/* SegmentedControl */
.SegmentedControl {
  --segmentedControl-item-padding: var(--control-small-paddingBlock);
  --overlay-offset: 0.5rem;
  display: inline-flex;
  list-style: none;
  background-color: var(--controlTrack-bgColor-rest, var(--color-segmented-control-bg));
  border-color: var(--controlTrack-borderColor-rest, transparent);
  border-radius: var(--borderRadius-medium);
}
.SegmentedControl--iconOnly .Button--iconOnly.Button--small,.SegmentedControl--iconOnly .Button--iconOnly.Button--medium {
    width: 100%;
    padding-inline: 0 !important;
  }
/* sizes */
.SegmentedControl--small {
  --segmentedControl-item-padding: var(--control-xsmall-paddingBlock);
}
.SegmentedControl--small .SegmentedControl-item {
    height: var(--control-small-size);
  }
:is(.SegmentedControl--small .SegmentedControl-item) .Button {
      /* stylelint-disable-next-line primer/spacing */
      padding-inline: calc(var(--control-xsmall-paddingInline-normal) - var(--segmentedControl-item-padding));
    }
.SegmentedControl--small.SegmentedControl--iconOnly .SegmentedControl-item {
      width: var(--control-small-size);
    }
.SegmentedControl--medium .SegmentedControl-item {
    height: var(--control-medium-size);
  }
.SegmentedControl--medium.SegmentedControl--iconOnly .SegmentedControl-item {
      width: var(--control-medium-size);
    }
/* item */
.SegmentedControl-item {
  position: relative;
  display: inline-flex;
  height: var(--control-medium-size);
  /* stylelint-disable-next-line primer/spacing */
  padding: var(--segmentedControl-item-padding);
  border: var(--borderWidth-thin) solid transparent;
  border-radius: var(--borderRadius-medium);
  justify-content: center;
  /* button color overrides */
}
:is(.SegmentedControl-item .Button--invisible):hover:not(:disabled) {
      background-color: var(--controlTrack-bgColor-hover, var(--color-action-list-item-default-hover-bg));
    }
:is(.SegmentedControl-item .Button--invisible):active:not(:disabled) {
      background-color: var(--controlTrack-bgColor-active, var(--color-action-list-item-default-active-bg));
    }
/* Selected ---------------------------------------- */
.SegmentedControl-item.SegmentedControl-item--selected {
    background-color: var(--controlKnob-bgColor-rest, var(--color-segmented-control-button-bg));
    border-color: var(--controlKnob-borderColor-rest, var(--color-segmented-control-button-selected-border));
  }
.SegmentedControl-item.SegmentedControl-item--selected .Button {
      font-weight: var(--base-text-weight-semibold);
    }
:is(.SegmentedControl-item.SegmentedControl-item--selected .Button):hover {
        background-color: transparent;
      }
.SegmentedControl-item.SegmentedControl-item--selected::before {
      border-color: transparent !important;
    }
.SegmentedControl-item.SegmentedControl-item--selected + .SegmentedControl-item::before {
      border-color: transparent;
    }
/* renders a visibly hidden "copy" of the text in bold, reserving box space for when text becomes bold on selected */
.SegmentedControl-item .Button-label[data-content]::before {
    display: block;
    height: 0;
    font-weight: var(--base-text-weight-semibold);
    visibility: hidden;
    content: attr(data-content);
  }
/* Separator lines */
.SegmentedControl-item:not(:first-child)::before {
      position: absolute;
      inset: 0 0 0 -1px;
      /* stylelint-disable-next-line primer/spacing */
      margin-top: var(--control-medium-paddingBlock);
      /* stylelint-disable-next-line primer/spacing */
      margin-bottom: var(--control-medium-paddingBlock);
      content: '';
      border-left: var(--borderWidth-thin) solid var(--borderColor-default);
    }
/* Button ----------------------------------------- */
.SegmentedControl-item .Button {
    width: 100%;
    min-width: -moz-fit-content;
    min-width: fit-content;
    height: 100%;
    font-weight: var(--base-text-weight-normal);
    border: 0;
    /* stylelint-disable-next-line primer/borders */
    border-radius: calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding) / 2);
    /* stylelint-disable-next-line primer/spacing */
    padding-inline: calc(var(--control-medium-paddingInline-normal) - var(--segmentedControl-item-padding));
  }
:is(.SegmentedControl-item .Button):focus-visible {
      /* stylelint-disable-next-line primer/borders */
      border-radius: calc(var(--borderRadius-medium) - var(--segmentedControl-item-padding) / 1);
      outline-offset: calc(var(--segmentedControl-item-padding) - var(--borderWidth-thin));
    }
.SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label {
    color: var(--button-default-fgColor-rest);
  }
.SegmentedControl-item .Button-content {
    flex: 1 1 auto;
    align-self: stretch;
  }
/* use ellipsis with the assumption that icon only variant will be used when not enough space is available */
.SegmentedControl-item .Button-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
/* fullWidth */
.SegmentedControl--fullWidth {
  display: flex;
}
.SegmentedControl--fullWidth .SegmentedControl-item {
    flex: 1;
    justify-content: center;
  }

import {controller, targets} from '@github/catalyst'
@controller
class SegmentedControlElement extends HTMLElement {
  @targets items: HTMLElement[]
  connectedCallback() {
    this.#updateButtonLabels()
  }
  select(event: Event) {
    const button = event.currentTarget as HTMLButtonElement
    for (const item of this.items) {
      item.classList.remove('SegmentedControl-item--selected')
      item.querySelector('[aria-current]')?.setAttribute('aria-current', 'false')
    }
    button.closest('li.SegmentedControl-item')?.classList.add('SegmentedControl-item--selected')
    button.setAttribute('aria-current', 'true')
  }
  // Updates the button labels to have a data-content attribute with the text
  // This is for selection styling to avoid the text jumping. It only needs to be
  // setup when the component is first loaded.
  #updateButtonLabels() {
    for (const label of this.querySelectorAll('.Button-label')) {
      label.setAttribute('data-content', label.textContent || '')
    }
  }
}
declare global {
  interface Window {
    SegmentedControlElement: typeof SegmentedControlElement
  }
}
if (!window.customElements.get('segmented-control')) {
  window.SegmentedControlElement = SegmentedControlElement
  window.customElements.define('segmented-control', SegmentedControlElement)
}