@reliability-design/web 1.4.6 → 1.4.7

package/dist/components/rel-segmented-button/rel-segmented-button.ts

@@ -1,217 +0,0 @@
-import { LitElement, html, css, nothing } from "lit";
-import { customElement, property } from "lit/decorators.js";
-
-export type SegmentSize = "small" | "medium";
-export type SegmentAlign = "left" | "middle" | "right";
-
-export interface SegmentOption {
-  label: string;
-  value: string;
-  disabled?: boolean;
-}
-
-@customElement("rel-segmented-button")
-export class RelSegmentedButton extends LitElement {
-  @property({ type: Array }) options: SegmentOption[] = [];
-
-  @property({ type: String }) active: string = "";
-
-  @property({ type: String }) size: SegmentSize = "medium";
-
-  @property({ type: String }) align: SegmentAlign = "left";
-
-  /** Accessible name for the radiogroup (it renders no visible group label). */
-  @property({ type: String, attribute: "field-aria-label" }) fieldAriaLabel?: string;
-
-  static styles = css`
-    :host {
-      color: var(--rel-text-default);
-      display: inline-block;
-      font-family: var(--rel-fonts-font-family);
-    }
-
-    .segmented-buttons {
-      display: inline-flex;
-      border: 1px solid var(--rel-border-default);
-      border-radius: var(--rel-border-radius-xs);
-      overflow: hidden;
-    }
-
-    /* Alignment */
-    .align-left {
-      justify-content: flex-start;
-    }
-
-    .align-middle {
-      justify-content: center;
-    }
-
-    .align-right {
-      justify-content: flex-end;
-    }
-
-    /* Base segment styling */
-    .segment {
-      padding: var(--rel-spacing-2xs) var(--rel-spacing-sm);
-      background: var(--rel-bg-neutral);
-      border: none;
-      border-radius: 0;
-      cursor: pointer;
-      border-right: 1px solid var(--rel-border-default);
-      transition: background 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
-      color: var(--rel-action-neutral-label-icons-ghost);
-      font-family: var(--rel-action-md-font-family);
-      font-weight: var(--rel-action-md-font-weight);
-      font-size: var(--rel-action-md-font-size);
-      line-height: var(--rel-action-md-line-height);
-      letter-spacing: var(--rel-action-md-letter-spacing);
-    }
-
-    .segment:first-child {
-      border-radius: var(--rel-border-radius-xs) 0 0 var(--rel-border-radius-xs);
-    }
-
-    .segment:last-child {
-      border-radius: 0 var(--rel-border-radius-xs) var(--rel-border-radius-xs) 0;
-      border-right: none;
-    }
-
-    .segment:focus-visible {
-      outline: 2px solid var(--rel-border-focus);
-      outline-offset: -2px;
-      z-index: 1;
-    }
-
-    /* Hover */
-    .segment:hover:not(.disabled):not(.active) {
-      background: var(--rel-action-overlay-hover);
-    }
-
-    /* Active — action-neutral tokens flip automatically in dark mode */
-    .segment.active {
-      background: var(--rel-action-neutral-fill);
-      color: var(--rel-text-inverse);
-      border-radius: var(--rel-border-radius-xs) !important;
-    }
-
-    .segment.active:hover:not(.disabled) {
-      background: var(--rel-action-neutral-fill-hover);
-      color: var(--rel-action-neutral-label-icons-fill-inverse);
-    }
-
-    /* Disabled */
-    .segment.disabled,
-    .segment:disabled {
-      cursor: not-allowed;
-      pointer-events: auto;
-      opacity: 0.5;
-      background: var(--rel-bg-neutral-elevated-1);
-      color: var(--rel-text-disabled);
-    }
-
-    /* Sizes */
-    .segmented-buttons.small .segment {
-      padding: var(--rel-spacing-3xs) var(--rel-spacing-xs);
-      font-family: var(--rel-body-xs-regular-font-family);
-      font-weight: var(--rel-body-xs-semibold-font-weight);
-      font-size: var(--rel-body-xs-semibold-font-size);
-      line-height: var(--rel-body-xs-semibold-line-height);
-      letter-spacing: var(--rel-body-xs-semibold-letter-spacing);
-    }
-
-    .segmented-buttons.medium .segment {
-      padding: var(--rel-spacing-2xs) var(--rel-spacing-md);
-      font-family: var(--rel-body-sm-regular-font-family);
-      font-weight: var(--rel-body-sm-regular-font-weight);
-      font-size: var(--rel-body-sm-regular-font-size);
-      line-height: var(--rel-body-sm-regular-line-height);
-      letter-spacing: var(--rel-body-sm-regular-letter-spacing);
-    }
-  `;
-
-  private setActive(option: SegmentOption) {
-    if (!option.disabled) {
-      this.active = option.value;
-      this.dispatchEvent(
-        new CustomEvent("changed", {
-          detail: { value: option.value },
-          bubbles: true,
-          composed: true,
-        })
-      );
-    }
-  }
-
-  /** APG radio-group navigation: arrows move focus AND select, the group is
-   *  one Tab stop (roving tabindex on the selected segment). */
-  private onKeyDown = (e: KeyboardEvent) => {
-    const prevKey = e.key === "ArrowLeft" || e.key === "ArrowUp";
-    const nextKey = e.key === "ArrowRight" || e.key === "ArrowDown";
-    if (!prevKey && !nextKey && e.key !== "Home" && e.key !== "End") return;
-
-    const enabled = this.options.filter((o) => !o.disabled);
-    if (enabled.length === 0) return;
-    e.preventDefault();
-
-    const currentIdx = enabled.findIndex((o) => o.value === this.active);
-    let target: number;
-    if (e.key === "Home") target = 0;
-    else if (e.key === "End") target = enabled.length - 1;
-    else if (prevKey) target = currentIdx <= 0 ? enabled.length - 1 : currentIdx - 1;
-    else target = (currentIdx + 1) % enabled.length;
-
-    this.setActive(enabled[target]);
-    this.updateComplete.then(() => {
-      this.shadowRoot
-        ?.querySelector<HTMLElement>('button[tabindex="0"]')
-        ?.focus();
-    });
-  };
-
-  private renderSegment(option: SegmentOption, rovingValue: string | null) {
-    const isActive = this.active === option.value;
-    const classes = [
-      "segment",
-      isActive ? "active" : "",
-      option.disabled ? "disabled" : "",
-    ]
-      .filter(Boolean)
-      .join(" ");
-
-    return html`
-      <button
-        part="option" class="${classes}"
-        role="radio"
-        aria-checked="${isActive}"
-        tabindex="${!option.disabled && option.value === rovingValue ? 0 : -1}"
-        ?disabled="${option.disabled}"
-        @click="${() => this.setActive(option)}">
-        ${option.label}
-      </button>
-    `;
-  }
-
-  render() {
-    const containerClasses = [
-      "segmented-buttons",
-      this.size,
-      `align-${this.align}`,
-    ].join(" ");
-
-    const enabled = this.options.filter((o) => !o.disabled);
-    const rovingValue = enabled.some((o) => o.value === this.active)
-      ? this.active
-      : enabled[0]?.value ?? null;
-
-    return html`
-      <div
-        part="base" class="${containerClasses}"
-        role="radiogroup"
-        aria-label="${this.fieldAriaLabel ?? nothing}"
-        @keydown="${this.onKeyDown}"
-      >
-        ${this.options.map((option) => this.renderSegment(option, rovingValue))}
-      </div>
-    `;
-  }
-}