@reliability-design/web 1.0.2

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

@@ -0,0 +1,150 @@
+import { LitElement, html, css } 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";
+
+  static styles = css`
+    :host {
+      display: inline-block;
+      font-family: var(--rel-fontFamilies-primary);
+    }
+
+    .segmented-buttons {
+      display: inline-flex;
+      border: 2px solid var(--rel-colors-gray-border);
+      border-radius: var(--rel-borders-radius-border-radius-300);
+      overflow: hidden;
+    }
+
+    /* Alignment */
+    .align-left {
+      justify-content: flex-start;
+    }
+
+    .align-middle {
+      justify-content: center;
+    }
+
+    .align-right {
+      justify-content: flex-end;
+    }
+
+    /* Base segment styling */
+    .segment {
+      background: var(--rel-colors-white);
+      border: none;
+      cursor: pointer;
+      font-weight: var(--rel-fontWeights-medium);
+      border-right: 2px solid var(--rel-colors-gray-border);
+      transition: all 0.2s ease-in-out;
+      color: var(--rel-colors-gray-heading);
+      font-family: var(--rel-fontFamilies-primary);
+      outline: none;
+    }
+
+    .segment:last-child {
+      border-right: none;
+    }
+
+    /* Hover */
+    .segment:hover:not(.disabled):not(.active) {
+      background: var(--rel-colors-gray-bg);
+    }
+
+    /* Active */
+    .segment.active {
+      background: var(--rel-colors-black);
+      color: var(--rel-colors-white);
+    }
+
+    .segment.active:hover:not(.disabled) {
+      background: var(--rel-colors-black);
+      color: var(--rel-colors-white);
+    }
+
+    /* Disabled */
+    .segment.disabled,
+    .segment:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+      background: var(--rel-colors-gray-bg);
+      color: var(--rel-colors-gray-placeholder);
+      pointer-events: none;
+    }
+
+    /* Sizes */
+    .segmented-buttons.small .segment {
+      padding: var(--rel-spacing-space-3xs) var(--rel-spacing-space-xs);
+      font-size: var(--rel-fontSizes-xs);
+    }
+
+    .segmented-buttons.medium .segment {
+      padding: var(--rel-spacing-space-2xs) var(--rel-spacing-space-sm);
+      font-size: var(--rel-fontSizes-sm);
+    }
+  `;
+
+  private setActive(option: SegmentOption) {
+    if (!option.disabled) {
+      this.active = option.value;
+      this.dispatchEvent(
+        new CustomEvent("changed", {
+          detail: { value: option.value },
+          bubbles: true,
+          composed: true,
+        })
+      );
+    }
+  }
+
+  private renderSegment(option: SegmentOption) {
+    const isActive = this.active === option.value;
+    const classes = [
+      "segment",
+      isActive ? "active" : "",
+      option.disabled ? "disabled" : "",
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    return html`
+      <button
+        class="${classes}"
+        ?disabled="${option.disabled}"
+        @click="${() => this.setActive(option)}">
+        ${option.label}
+      </button>
+    `;
+  }
+
+  render() {
+    const containerClasses = [
+      "segmented-buttons",
+      this.size,
+      `align-${this.align}`,
+    ].join(" ");
+
+    return html`
+      <div class="${containerClasses}">
+        ${this.options.map((option) => this.renderSegment(option))}
+      </div>
+    `;
+  }
+}