@cognivo/components 0.8.0 → 0.8.2

package/dist/components/cg-scroll-area/cg-scroll-area.js

@@ -1,24 +1,42 @@
-import { css as v, LitElement as d, html as b } from "lit";
-import { property as n, customElement as p } from "lit/decorators.js";
-import { h, r as w } from "../../chunks/premium.css-9I4kHrsl.js";
-var u = Object.defineProperty, f = Object.getOwnPropertyDescriptor, i = (s, e, a, t) => {
-  for (var r = t > 1 ? void 0 : t ? f(e, a) : e, l = s.length - 1, c; l >= 0; l--)
-    (c = s[l]) && (r = (t ? c(e, a, r) : c(r)) || r);
-  return t && r && u(e, a, r), r;
+import { css as b, LitElement as d, nothing as v, html as h } from "lit";
+import { property as n, state as p, customElement as u } from "lit/decorators.js";
+import { h as w, r as g } from "../../chunks/premium.css-DHekUEUt.js";
+var f = Object.defineProperty, y = Object.getOwnPropertyDescriptor, t = (r, l, s, a) => {
+  for (var o = a > 1 ? void 0 : a ? y(l, s) : l, c = r.length - 1, i; c >= 0; c--)
+    (i = r[c]) && (o = (a ? i(l, s, o) : i(o)) || o);
+  return a && o && f(l, s, o), o;
 };
-let o = class extends d {
+let e = class extends d {
   constructor() {
-    super(...arguments), this.orientation = "vertical", this.type = "hover";
+    super(...arguments), this.orientation = "vertical", this.type = "hover", this.label = "", this._scrollable = !1;
+  }
+  firstUpdated() {
+    const r = this.shadowRoot?.querySelector(".viewport");
+    r && (this._resizeObserver = new ResizeObserver(() => this._updateScrollable(r)), this._resizeObserver.observe(r), this._updateScrollable(r));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._resizeObserver?.disconnect(), this._resizeObserver = void 0;
+  }
+  _updateScrollable(r) {
+    this._scrollable = r.scrollHeight > r.clientHeight || r.scrollWidth > r.clientWidth;
   }
   render() {
-    return b`
-      <div class="viewport" tabindex="0">
-        <slot></slot>
+    return h`
+      <div
+        class="viewport"
+        tabindex=${this._scrollable ? "0" : "-1"}
+        role=${this.label ? "region" : v}
+        aria-label=${this.label || v}
+      >
+        <slot @slotchange=${() => {
+      const r = this.shadowRoot?.querySelector(".viewport");
+      r && this._updateScrollable(r);
+    }}></slot>
       </div>
     `;
   }
 };
-o.styles = [h, w, v`
+e.styles = [w, g, b`
     :host {
       display: block;
       position: relative;
@@ -51,6 +69,10 @@ o.styles = [h, w, v`
       background-color: var(--cg-color-surface-cards-border-strong);
       background-clip: padding-box;
     }
+    .viewport::-webkit-scrollbar-thumb:active {
+      background-color: var(--cg-color-surface-cards-selected-border);
+      background-clip: padding-box;
+    }
     .viewport::-webkit-scrollbar-corner {
       background: transparent;
     }
@@ -72,6 +94,21 @@ o.styles = [h, w, v`
     :host([type="hover"]:hover) .viewport::-webkit-scrollbar-thumb:hover {
       background-color: var(--cg-color-surface-cards-border-strong);
     }
+    :host([type="hover"]:hover) .viewport::-webkit-scrollbar-thumb:active {
+      background-color: var(--cg-color-surface-cards-selected-border);
+    }
+    /* Keyboard users need the position indicator too, not just mouse hover */
+    :host([type="hover"]) .viewport:focus-visible::-webkit-scrollbar-thumb {
+      background-color: var(--cg-color-surface-cards-border);
+    }
+    /* Firefox: scrollbar-color is the only channel — mirror the hover reveal */
+    :host([type="hover"]) .viewport {
+      scrollbar-color: transparent transparent;
+    }
+    :host([type="hover"]:hover) .viewport,
+    :host([type="hover"]) .viewport:focus-visible {
+      scrollbar-color: var(--cg-color-surface-cards-border) transparent;
+    }
 
     /* Always-visible scrollbar (forces overflow even when content fits) */
     :host([type="always"]) .viewport {
@@ -96,16 +133,22 @@ o.styles = [h, w, v`
       overflow-y: auto;
     }
   `];
-i([
+t([
   n({ reflect: !0 })
-], o.prototype, "orientation", 2);
-i([
+], e.prototype, "orientation", 2);
+t([
   n({ reflect: !0 })
-], o.prototype, "type", 2);
-o = i([
-  p("cg-scroll-area")
-], o);
+], e.prototype, "type", 2);
+t([
+  n()
+], e.prototype, "label", 2);
+t([
+  p()
+], e.prototype, "_scrollable", 2);
+e = t([
+  u("cg-scroll-area")
+], e);
 export {
-  o as CgScrollArea
+  e as CgScrollArea
 };
 //# sourceMappingURL=cg-scroll-area.js.map

package/dist/components/cg-scroll-area/cg-scroll-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"cg-scroll-area.js","sources":["../../../src/components/cg-scroll-area/cg-scroll-area.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/**\n * @element cg-scroll-area\n * Custom-styled scroll container with themed scrollbars.\n * Uses native scrolling with styled thumbs.\n *\n * @example\n * ```html\n * <cg-scroll-area style=\"height: 300px;\">\n *   <div>Long content...</div>\n * </cg-scroll-area>\n * ```\n *\n * @slot - Scrollable content\n */\n@customElement('cg-scroll-area')\nexport class CgScrollArea extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      display: block;\n      position: relative;\n      overflow: hidden;\n    }\n\n    .viewport {\n      width: 100%;\n      height: 100%;\n      overflow: auto;\n      scrollbar-width: thin;\n      scrollbar-color: var(--cg-color-surface-cards-border) transparent;\n    }\n\n    .viewport::-webkit-scrollbar {\n      width: var(--cg-component-scroll-area-scrollbar-size);\n      height: var(--cg-component-scroll-area-scrollbar-size);\n    }\n    .viewport::-webkit-scrollbar-track {\n      background: transparent;\n    }\n    .viewport::-webkit-scrollbar-thumb {\n      background: var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-component-scroll-area-scrollbar-radius);\n      border: var(--cg-border-width-100) solid transparent;\n      background-clip: padding-box;\n      transition: background-color var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n    .viewport::-webkit-scrollbar-thumb:hover {\n      background-color: var(--cg-color-surface-cards-border-strong);\n      background-clip: padding-box;\n    }\n    .viewport::-webkit-scrollbar-corner {\n      background: transparent;\n    }\n    .viewport:focus-visible {\n      outline: none;\n      box-shadow:\n        inset 0 0 0 var(--cg-focus-ring-offset) var(--cg-color-focus-ring-offset),\n        inset 0 0 0 calc(var(--cg-focus-ring-offset) + var(--cg-focus-ring-width)) var(--cg-color-focus-ring);\n    }\n\n    /* Hide scrollbar until hover when type=\"hover\" — fade in smoothly */\n    :host([type=\"hover\"]) .viewport::-webkit-scrollbar-thumb {\n      background-color: transparent;\n      transition: background-color var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n    }\n    :host([type=\"hover\"]:hover) .viewport::-webkit-scrollbar-thumb {\n      background-color: var(--cg-color-surface-cards-border);\n    }\n    :host([type=\"hover\"]:hover) .viewport::-webkit-scrollbar-thumb:hover {\n      background-color: var(--cg-color-surface-cards-border-strong);\n    }\n\n    /* Always-visible scrollbar (forces overflow even when content fits) */\n    :host([type=\"always\"]) .viewport {\n      overflow: scroll;\n    }\n    :host([type=\"always\"][orientation=\"vertical\"]) .viewport {\n      overflow-x: hidden;\n      overflow-y: scroll;\n    }\n    :host([type=\"always\"][orientation=\"horizontal\"]) .viewport {\n      overflow-y: hidden;\n      overflow-x: scroll;\n    }\n\n    /* Horizontal only */\n    :host([orientation=\"horizontal\"]) .viewport {\n      overflow-y: hidden;\n      overflow-x: auto;\n    }\n    :host([orientation=\"vertical\"]) .viewport {\n      overflow-x: hidden;\n      overflow-y: auto;\n    }\n  `];\n\n  @property({ reflect: true }) orientation: 'vertical' | 'horizontal' | 'both' = 'vertical';\n  @property({ reflect: true }) type: 'auto' | 'always' | 'hover' = 'hover';\n\n  override render() {\n    return html`\n      <div class=\"viewport\" tabindex=\"0\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-scroll-area': CgScrollArea;\n  }\n}\n"],"names":["CgScrollArea","LitElement","html","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAmBO,IAAMA,IAAN,cAA2BC,EAAW;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA,GAgFwB,KAAA,cAAkD,YAClD,KAAA,OAAoC;AAAA,EAAA;AAAA,EAExD,SAAS;AAChB,WAAOC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKT;AACF;AA1FaF,EACK,SAAS,CAACG,GAAWC,GAAeC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA6EnD;AAE4BC,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAhFhBP,EAgFkB,WAAA,eAAA,CAAA;AACAM,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAjFhBP,EAiFkB,WAAA,QAAA,CAAA;AAjFlBA,IAANM,EAAA;AAAA,EADNE,EAAc,gBAAgB;AAAA,GAClBR,CAAA;"}
+{"version":3,"file":"cg-scroll-area.js","sources":["../../../src/components/cg-scroll-area/cg-scroll-area.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/**\n * @element cg-scroll-area\n * Custom-styled scroll container with themed scrollbars.\n * Uses native scrolling with styled thumbs.\n *\n * @example\n * ```html\n * <cg-scroll-area style=\"height: 300px;\">\n *   <div>Long content...</div>\n * </cg-scroll-area>\n * ```\n *\n * @slot - Scrollable content\n */\n@customElement('cg-scroll-area')\nexport class CgScrollArea extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      display: block;\n      position: relative;\n      overflow: hidden;\n    }\n\n    .viewport {\n      width: 100%;\n      height: 100%;\n      overflow: auto;\n      scrollbar-width: thin;\n      scrollbar-color: var(--cg-color-surface-cards-border) transparent;\n    }\n\n    .viewport::-webkit-scrollbar {\n      width: var(--cg-component-scroll-area-scrollbar-size);\n      height: var(--cg-component-scroll-area-scrollbar-size);\n    }\n    .viewport::-webkit-scrollbar-track {\n      background: transparent;\n    }\n    .viewport::-webkit-scrollbar-thumb {\n      background: var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-component-scroll-area-scrollbar-radius);\n      border: var(--cg-border-width-100) solid transparent;\n      background-clip: padding-box;\n      transition: background-color var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n    .viewport::-webkit-scrollbar-thumb:hover {\n      background-color: var(--cg-color-surface-cards-border-strong);\n      background-clip: padding-box;\n    }\n    .viewport::-webkit-scrollbar-thumb:active {\n      background-color: var(--cg-color-surface-cards-selected-border);\n      background-clip: padding-box;\n    }\n    .viewport::-webkit-scrollbar-corner {\n      background: transparent;\n    }\n    .viewport:focus-visible {\n      outline: none;\n      box-shadow:\n        inset 0 0 0 var(--cg-focus-ring-offset) var(--cg-color-focus-ring-offset),\n        inset 0 0 0 calc(var(--cg-focus-ring-offset) + var(--cg-focus-ring-width)) var(--cg-color-focus-ring);\n    }\n\n    /* Hide scrollbar until hover when type=\"hover\" — fade in smoothly */\n    :host([type=\"hover\"]) .viewport::-webkit-scrollbar-thumb {\n      background-color: transparent;\n      transition: background-color var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n    }\n    :host([type=\"hover\"]:hover) .viewport::-webkit-scrollbar-thumb {\n      background-color: var(--cg-color-surface-cards-border);\n    }\n    :host([type=\"hover\"]:hover) .viewport::-webkit-scrollbar-thumb:hover {\n      background-color: var(--cg-color-surface-cards-border-strong);\n    }\n    :host([type=\"hover\"]:hover) .viewport::-webkit-scrollbar-thumb:active {\n      background-color: var(--cg-color-surface-cards-selected-border);\n    }\n    /* Keyboard users need the position indicator too, not just mouse hover */\n    :host([type=\"hover\"]) .viewport:focus-visible::-webkit-scrollbar-thumb {\n      background-color: var(--cg-color-surface-cards-border);\n    }\n    /* Firefox: scrollbar-color is the only channel — mirror the hover reveal */\n    :host([type=\"hover\"]) .viewport {\n      scrollbar-color: transparent transparent;\n    }\n    :host([type=\"hover\"]:hover) .viewport,\n    :host([type=\"hover\"]) .viewport:focus-visible {\n      scrollbar-color: var(--cg-color-surface-cards-border) transparent;\n    }\n\n    /* Always-visible scrollbar (forces overflow even when content fits) */\n    :host([type=\"always\"]) .viewport {\n      overflow: scroll;\n    }\n    :host([type=\"always\"][orientation=\"vertical\"]) .viewport {\n      overflow-x: hidden;\n      overflow-y: scroll;\n    }\n    :host([type=\"always\"][orientation=\"horizontal\"]) .viewport {\n      overflow-y: hidden;\n      overflow-x: scroll;\n    }\n\n    /* Horizontal only */\n    :host([orientation=\"horizontal\"]) .viewport {\n      overflow-y: hidden;\n      overflow-x: auto;\n    }\n    :host([orientation=\"vertical\"]) .viewport {\n      overflow-x: hidden;\n      overflow-y: auto;\n    }\n  `];\n\n  @property({ reflect: true }) orientation: 'vertical' | 'horizontal' | 'both' = 'vertical';\n  @property({ reflect: true }) type: 'auto' | 'always' | 'hover' = 'hover';\n  /** Accessible name for the scroll region (role=\"region\" is only emitted\n   *  when named — an anonymous focusable container is an AT dead stop). */\n  @property() label = '';\n\n  @state() private _scrollable = false;\n\n  private _resizeObserver: ResizeObserver | undefined;\n\n  override firstUpdated(): void {\n    const viewport = this.shadowRoot?.querySelector<HTMLElement>('.viewport');\n    if (!viewport) return;\n    this._resizeObserver = new ResizeObserver(() => this._updateScrollable(viewport));\n    this._resizeObserver.observe(viewport);\n    this._updateScrollable(viewport);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._resizeObserver?.disconnect();\n    this._resizeObserver = undefined;\n  }\n\n  private _updateScrollable(viewport: HTMLElement): void {\n    this._scrollable =\n      viewport.scrollHeight > viewport.clientHeight ||\n      viewport.scrollWidth > viewport.clientWidth;\n  }\n\n  override render() {\n    return html`\n      <div\n        class=\"viewport\"\n        tabindex=${this._scrollable ? '0' : '-1'}\n        role=${this.label ? 'region' : nothing}\n        aria-label=${this.label || nothing}\n      >\n        <slot @slotchange=${() => {\n          const viewport = this.shadowRoot?.querySelector<HTMLElement>('.viewport');\n          if (viewport) this._updateScrollable(viewport);\n        }}></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-scroll-area': CgScrollArea;\n  }\n}\n"],"names":["CgScrollArea","LitElement","viewport","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":";;;;;;;;AAmBO,IAAMA,IAAN,cAA2BC,EAAW;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA,GAmGwB,KAAA,cAAkD,YAClD,KAAA,OAAoC,SAGrD,KAAA,QAAQ,IAEX,KAAQ,cAAc;AAAA,EAAA;AAAA,EAItB,eAAqB;AAC5B,UAAMC,IAAW,KAAK,YAAY,cAA2B,WAAW;AACxE,IAAKA,MACL,KAAK,kBAAkB,IAAI,eAAe,MAAM,KAAK,kBAAkBA,CAAQ,CAAC,GAChF,KAAK,gBAAgB,QAAQA,CAAQ,GACrC,KAAK,kBAAkBA,CAAQ;AAAA,EACjC;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA,GACN,KAAK,iBAAiB,WAAA,GACtB,KAAK,kBAAkB;AAAA,EACzB;AAAA,EAEQ,kBAAkBA,GAA6B;AACrD,SAAK,cACHA,EAAS,eAAeA,EAAS,gBACjCA,EAAS,cAAcA,EAAS;AAAA,EACpC;AAAA,EAES,SAAS;AAChB,WAAOC;AAAA;AAAA;AAAA,mBAGQ,KAAK,cAAc,MAAM,IAAI;AAAA,eACjC,KAAK,QAAQ,WAAWC,CAAO;AAAA,qBACzB,KAAK,SAASA,CAAO;AAAA;AAAA,4BAEd,MAAM;AACxB,YAAMF,IAAW,KAAK,YAAY,cAA2B,WAAW;AACxE,MAAIA,KAAU,KAAK,kBAAkBA,CAAQ;AAAA,IAC/C,CAAC;AAAA;AAAA;AAAA,EAGP;AACF;AAhJaF,EACK,SAAS,CAACK,GAAWC,GAAeC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAgGnD;AAE4BC,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAnGhBT,EAmGkB,WAAA,eAAA,CAAA;AACAQ,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GApGhBT,EAoGkB,WAAA,QAAA,CAAA;AAGjBQ,EAAA;AAAA,EAAXC,EAAA;AAAS,GAvGCT,EAuGC,WAAA,SAAA,CAAA;AAEKQ,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAzGIV,EAyGM,WAAA,eAAA,CAAA;AAzGNA,IAANQ,EAAA;AAAA,EADNG,EAAc,gBAAgB;AAAA,GAClBX,CAAA;"}

package/dist/components/cg-segmented-control/cg-segmented-control.d.ts

@@ -12,6 +12,7 @@ export interface SegmentOption {
  * @example
  * ```html
  * <cg-segmented-control
+ *   label="View period"
  *   value="day"
  *   .options=${[
  *     { label: 'Day', value: 'day' },
@@ -22,6 +23,7 @@ export interface SegmentOption {
  * ```
  *
  * @fires {CustomEvent<{value: string}>} cg-segmented-change
+ * @attr {string} label - Accessible name for the radiogroup. Always provide one.
  */
 export declare class CgSegmentedControl extends LitElement {
     static styles: import('lit').CSSResult[];
@@ -31,6 +33,8 @@ export declare class CgSegmentedControl extends LitElement {
     options: SegmentOption[];
     value: string;
     name: string;
+    /** Accessible name for the radiogroup (e.g. "View period"). Strongly recommended. */
+    label: string;
     disabled: boolean;
     size: 'sm' | 'md' | 'lg';
     full: boolean;

package/dist/components/cg-segmented-control/cg-segmented-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cg-segmented-control.d.ts","sourceRoot":"","sources":["../../../src/components/cg-segmented-control/cg-segmented-control.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,qBACa,kBAAmB,SAAQ,UAAU;IAChD,OAAgB,MAAM,4BAkFnB;IAEH,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAAC,CAAmB;;IASX,OAAO,EAAE,aAAa,EAAE,CAAM;IAC7C,KAAK,SAAM;IACX,IAAI,SAAM;IACsB,QAAQ,UAAS;IAChC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IACjB,IAAI,UAAS;IAEzD,OAAO,CAAC,eAAe,CAA+B;IAE7C,iBAAiB,IAAI,IAAI;IAUzB,oBAAoB,IAAI,IAAI;IAM5B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAU5C,YAAY,IAAI,IAAI;IAI7B,OAAO,CAAC,gBAAgB;IAWxB,OAAO,CAAC,OAAO;IAUf,OAAO,CAAC,cAAc;IA+Bb,MAAM;CAkBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,kBAAkB,CAAC;KAC5C;CACF"}
+{"version":3,"file":"cg-segmented-control.d.ts","sourceRoot":"","sources":["../../../src/components/cg-segmented-control/cg-segmented-control.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,kBAAmB,SAAQ,UAAU;IAChD,OAAgB,MAAM,4BAuFnB;IAEH,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAAC,CAAmB;;IASX,OAAO,EAAE,aAAa,EAAE,CAAM;IAC7C,KAAK,SAAM;IACM,IAAI,SAAM;IACvC,qFAAqF;IACzE,KAAK,SAAM;IACqB,QAAQ,UAAS;IAChC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IACjB,IAAI,UAAS;IAEzD,OAAO,CAAC,eAAe,CAA+B;IAE7C,iBAAiB,IAAI,IAAI;IAUzB,oBAAoB,IAAI,IAAI;IAM5B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAU5C,YAAY,IAAI,IAAI;IAI7B,OAAO,CAAC,gBAAgB;IAiBxB,OAAO,CAAC,OAAO;IAUf,OAAO,CAAC,cAAc;IA8Cb,MAAM;CAsBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,kBAAkB,CAAC;KAC5C;CACF"}

package/dist/components/cg-segmented-control/cg-segmented-control.js

@@ -1,14 +1,14 @@
-import { css as g, LitElement as u, html as d } from "lit";
+import { css as u, LitElement as h, nothing as g, html as d } from "lit";
 import { property as a, customElement as p } from "lit/decorators.js";
-import { a as h, r as f } from "../../chunks/premium.css-9I4kHrsl.js";
-var v = Object.defineProperty, m = Object.getOwnPropertyDescriptor, i = (e, o, t, r) => {
-  for (var s = r > 1 ? void 0 : r ? m(o, t) : o, c = e.length - 1, l; c >= 0; c--)
-    (l = e[c]) && (s = (r ? l(o, t, s) : l(s)) || s);
-  return r && s && v(o, t, s), s;
+import { a as f, r as v } from "../../chunks/premium.css-DHekUEUt.js";
+var m = Object.defineProperty, b = Object.getOwnPropertyDescriptor, r = (e, i, s, t) => {
+  for (var o = t > 1 ? void 0 : t ? b(i, s) : i, c = e.length - 1, l; c >= 0; c--)
+    (l = e[c]) && (o = (t ? l(i, s, o) : l(o)) || o);
+  return t && o && m(i, s, o), o;
 };
-let n = class extends u {
+let n = class extends h {
   constructor() {
-    super(), this.options = [], this.value = "", this.name = "", this.disabled = !1, this.size = "md", this.full = !1, this._resizeObserver = null, typeof this.attachInternals == "function" && (this._internals = this.attachInternals());
+    super(), this.options = [], this.value = "", this.name = "", this.label = "", this.disabled = !1, this.size = "md", this.full = !1, this._resizeObserver = null, typeof this.attachInternals == "function" && (this._internals = this.attachInternals());
   }
   connectedCallback() {
     super.connectedCallback(), this._resizeObserver = new ResizeObserver(() => this._updateIndicator()), requestAnimationFrame(() => {
@@ -26,12 +26,15 @@ let n = class extends u {
     requestAnimationFrame(() => this._updateIndicator());
   }
   _updateIndicator() {
-    const e = this.options.findIndex((s) => s.value === this.value);
-    if (e < 0) return;
-    const o = this.shadowRoot?.querySelectorAll(".segment"), t = this.shadowRoot?.querySelector(".indicator");
-    if (!o || !t || !o[e]) return;
-    const r = o[e];
-    t.style.width = `${r.offsetWidth}px`, t.style.transform = `translateX(${r.offsetLeft}px)`;
+    const e = this.shadowRoot?.querySelector(".indicator");
+    if (!e) return;
+    const i = this.options.findIndex((o) => o.value === this.value);
+    if (i < 0) {
+      e.style.visibility = "hidden";
+      return;
+    }
+    const t = this.shadowRoot?.querySelectorAll(".segment")?.[i];
+    t && (e.style.visibility = "visible", e.style.width = `${t.offsetWidth}px`, e.style.transform = `translateX(${t.offsetLeft}px)`);
   }
   _select(e) {
     e.disabled || this.disabled || (this.value = e.value, this.dispatchEvent(new CustomEvent("cg-segmented-change", {
@@ -42,36 +45,61 @@ let n = class extends u {
   }
   _handleKeydown(e) {
     if (this.disabled) return;
-    const o = this.options.findIndex((r) => r.value === this.value);
-    if (o < 0) return;
-    let t = o;
-    if (e.key === "ArrowLeft" || e.key === "ArrowUp" ? (e.preventDefault(), t = (o - 1 + this.options.length) % this.options.length) : e.key === "ArrowRight" || e.key === "ArrowDown" ? (e.preventDefault(), t = (o + 1) % this.options.length) : e.key === "Home" ? (e.preventDefault(), t = 0) : e.key === "End" && (e.preventDefault(), t = this.options.length - 1), t !== o) {
-      const r = this.options[t];
-      r && !r.disabled && (this._select(r), this.updateComplete.then(() => {
-        this.shadowRoot?.querySelectorAll(".segment")?.[t]?.focus();
+    let i = this.options.findIndex((t) => t.value === this.value);
+    if (i < 0 && (i = this.options.findIndex((t) => !t.disabled)), i < 0) return;
+    let s = i;
+    if (e.key === "ArrowLeft" || e.key === "ArrowUp" || e.key === "ArrowRight" || e.key === "ArrowDown") {
+      e.preventDefault();
+      const t = e.key === "ArrowLeft" || e.key === "ArrowUp" ? -1 : 1;
+      for (let o = 1; o <= this.options.length; o++) {
+        const c = (i + t * o + this.options.length) % this.options.length, l = this.options[c];
+        if (l && !l.disabled) {
+          s = c;
+          break;
+        }
+      }
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      const t = this.options.findIndex((o) => !o.disabled);
+      t >= 0 && (s = t);
+    } else if (e.key === "End") {
+      e.preventDefault();
+      for (let t = this.options.length - 1; t >= 0; t--) {
+        const o = this.options[t];
+        if (o && !o.disabled) {
+          s = t;
+          break;
+        }
+      }
+    }
+    if (s !== i) {
+      const t = this.options[s];
+      t && !t.disabled && (this._select(t), this.updateComplete.then(() => {
+        this.shadowRoot?.querySelectorAll(".segment")?.[s]?.focus();
       }));
     }
   }
   render() {
+    const e = this.options.findIndex((s) => s.value === this.value), i = e >= 0 ? e : this.options.findIndex((s) => !s.disabled);
     return d`
-      <div class="track" role="radiogroup" aria-disabled=${this.disabled ? "true" : "false"} @keydown=${this._handleKeydown}>
+      <div class="track" role="radiogroup" aria-label=${this.label || g} aria-disabled=${this.disabled ? "true" : "false"} @keydown=${this._handleKeydown}>
         <span class="indicator"></span>
-        ${this.options.map((e) => d`
+        ${this.options.map((s, t) => d`
           <button
             type="button"
             class="segment"
             role="radio"
-            aria-checked=${e.value === this.value ? "true" : "false"}
-            tabindex=${e.value === this.value ? "0" : "-1"}
-            ?disabled=${e.disabled || this.disabled}
-            @click=${() => this._select(e)}
-          >${e.label}</button>
+            aria-checked=${s.value === this.value ? "true" : "false"}
+            tabindex=${t === i ? "0" : "-1"}
+            ?disabled=${s.disabled || this.disabled}
+            @click=${() => this._select(s)}
+          >${s.icon ? d`<cg-icon name=${s.icon}></cg-icon>` : g}${s.label}</button>
         `)}
       </div>
     `;
   }
 };
-n.styles = [h, f, g`
+n.styles = [f, v, u`
     :host {
       display: inline-flex;
     }
@@ -120,7 +148,9 @@ n.styles = [h, f, g`
       font-size: var(--cg-font-size-sm);
       font-weight: var(--cg-font-weight-medium);
       cursor: pointer;
-      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      transition:
+        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
       z-index: 1;
       border-radius: inherit;
       flex: 1;
@@ -138,9 +168,12 @@ n.styles = [h, f, g`
         0 0 0 calc(var(--cg-focus-ring-offset) + var(--cg-focus-ring-width)) var(--cg-color-focus-ring);
     }
     .segment:disabled {
-      opacity: 0.45;
+      opacity: var(--cg-opacity-50);
       cursor: not-allowed;
     }
+    .segment:active:not(:disabled) {
+      transform: scale(var(--cg-interaction-press-scale));
+    }
 
     /* Sizes */
     :host([size="sm"]) .segment {
@@ -155,25 +188,28 @@ n.styles = [h, f, g`
     }
   `];
 n.formAssociated = !0;
-i([
+r([
   a({ type: Array })
 ], n.prototype, "options", 2);
-i([
+r([
   a()
 ], n.prototype, "value", 2);
-i([
-  a()
+r([
+  a({ reflect: !0 })
 ], n.prototype, "name", 2);
-i([
+r([
+  a()
+], n.prototype, "label", 2);
+r([
   a({ type: Boolean, reflect: !0 })
 ], n.prototype, "disabled", 2);
-i([
+r([
   a({ reflect: !0 })
 ], n.prototype, "size", 2);
-i([
+r([
   a({ type: Boolean, reflect: !0 })
 ], n.prototype, "full", 2);
-n = i([
+n = r([
   p("cg-segmented-control")
 ], n);
 export {

package/dist/components/cg-segmented-control/cg-segmented-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"cg-segmented-control.js","sources":["../../../src/components/cg-segmented-control/cg-segmented-control.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBase, reducedMotion } from '../../styles/index.js';\n\nexport interface SegmentOption {\n  label: string;\n  value: string;\n  icon?: string;\n  disabled?: boolean;\n}\n\n/**\n * @element cg-segmented-control\n * iOS-style pill selector with animated indicator. Single value selection.\n *\n * @example\n * ```html\n * <cg-segmented-control\n *   value=\"day\"\n *   .options=${[\n *     { label: 'Day', value: 'day' },\n *     { label: 'Week', value: 'week' },\n *     { label: 'Month', value: 'month' },\n *   ]}\n * ></cg-segmented-control>\n * ```\n *\n * @fires {CustomEvent<{value: string}>} cg-segmented-change\n */\n@customElement('cg-segmented-control')\nexport class CgSegmentedControl extends LitElement {\n  static override styles = [hostBase, reducedMotion, css`\n    :host {\n      display: inline-flex;\n    }\n\n    .track {\n      display: inline-flex;\n      position: relative;\n      padding: var(--cg-component-segmented-control-padding);\n      background: var(--cg-color-action-secondary-background-default);\n      border: var(--cg-border-width-50) solid var(--cg-color-action-secondary-border-default);\n      border-radius: var(--cg-component-segmented-control-radius);\n      gap: var(--cg-spacing-2);\n    }\n    :host([full]) .track {\n      display: flex;\n      width: 100%;\n    }\n\n    .indicator {\n      position: absolute;\n      top: var(--cg-component-segmented-control-padding);\n      left: 0;\n      height: calc(100% - 2 * var(--cg-component-segmented-control-padding));\n      box-sizing: border-box;\n      background: var(--cg-color-surface-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-action-secondary-border-default);\n      border-radius: calc(var(--cg-component-segmented-control-radius) - var(--cg-component-segmented-control-padding));\n      transition:\n        transform var(--cg-transition-duration-default) var(--cg-transition-easing-ease-in-out),\n        width var(--cg-transition-duration-default) var(--cg-transition-easing-ease-in-out);\n      pointer-events: none;\n    }\n\n    .segment {\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: var(--cg-spacing-6);\n      height: calc(var(--cg-component-segmented-control-height-md) - 2 * var(--cg-component-segmented-control-padding));\n      padding: 0 var(--cg-spacing-16);\n      border: none;\n      background: transparent;\n      color: var(--cg-color-surface-container-outlined);\n      font-family: inherit;\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      cursor: pointer;\n      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      z-index: 1;\n      border-radius: inherit;\n      flex: 1;\n    }\n    .segment:hover:not(:disabled) {\n      color: var(--cg-color-surface-base-text);\n    }\n    .segment[aria-checked=\"true\"] {\n      color: var(--cg-color-surface-base-text);\n    }\n    .segment:focus-visible {\n      outline: none;\n      box-shadow:\n        0 0 0 var(--cg-focus-ring-offset) var(--cg-color-focus-ring-offset),\n        0 0 0 calc(var(--cg-focus-ring-offset) + var(--cg-focus-ring-width)) var(--cg-color-focus-ring);\n    }\n    .segment:disabled {\n      opacity: 0.45;\n      cursor: not-allowed;\n    }\n\n    /* Sizes */\n    :host([size=\"sm\"]) .segment {\n      height: calc(var(--cg-component-segmented-control-height-sm) - 2 * var(--cg-component-segmented-control-padding));\n      padding: 0 var(--cg-spacing-12);\n      font-size: var(--cg-font-size-xs);\n    }\n    :host([size=\"lg\"]) .segment {\n      height: calc(var(--cg-component-segmented-control-height-lg) - 2 * var(--cg-component-segmented-control-padding));\n      padding: 0 var(--cg-spacing-20);\n      font-size: var(--cg-font-size-base);\n    }\n  `];\n\n  static formAssociated = true;\n  private _internals?: ElementInternals;\n\n  constructor() {\n    super();\n    if (typeof this.attachInternals === 'function') {\n      this._internals = this.attachInternals();\n    }\n  }\n\n  @property({ type: Array }) options: SegmentOption[] = [];\n  @property() value = '';\n  @property() name = '';\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n  @property({ type: Boolean, reflect: true }) full = false;\n\n  private _resizeObserver: ResizeObserver | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // Re-compute indicator when container resizes (e.g. full width on mobile)\n    this._resizeObserver = new ResizeObserver(() => this._updateIndicator());\n    requestAnimationFrame(() => {\n      const track = this.shadowRoot?.querySelector('.track');\n      if (track && this._resizeObserver) this._resizeObserver.observe(track);\n    });\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._resizeObserver?.disconnect();\n    this._resizeObserver = null;\n  }\n\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('value')) {\n      this._internals?.setFormValue(this.value);\n    }\n    if (changed.has('value') || changed.has('options') || changed.has('size')) {\n      // Wait for DOM to settle before measuring\n      requestAnimationFrame(() => this._updateIndicator());\n    }\n  }\n\n  override firstUpdated(): void {\n    requestAnimationFrame(() => this._updateIndicator());\n  }\n\n  private _updateIndicator(): void {\n    const activeIdx = this.options.findIndex(o => o.value === this.value);\n    if (activeIdx < 0) return;\n    const segments = this.shadowRoot?.querySelectorAll<HTMLElement>('.segment');\n    const indicator = this.shadowRoot?.querySelector<HTMLElement>('.indicator');\n    if (!segments || !indicator || !segments[activeIdx]) return;\n    const seg = segments[activeIdx];\n    indicator.style.width = `${seg.offsetWidth}px`;\n    indicator.style.transform = `translateX(${seg.offsetLeft}px)`;\n  }\n\n  private _select(option: SegmentOption): void {\n    if (option.disabled || this.disabled) return;\n    this.value = option.value;\n    this.dispatchEvent(new CustomEvent('cg-segmented-change', {\n      detail: { value: option.value },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _handleKeydown(e: KeyboardEvent): void {\n    if (this.disabled) return;\n    const current = this.options.findIndex(o => o.value === this.value);\n    if (current < 0) return;\n    let next = current;\n    if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n      e.preventDefault();\n      next = (current - 1 + this.options.length) % this.options.length;\n    } else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n      e.preventDefault();\n      next = (current + 1) % this.options.length;\n    } else if (e.key === 'Home') {\n      e.preventDefault();\n      next = 0;\n    } else if (e.key === 'End') {\n      e.preventDefault();\n      next = this.options.length - 1;\n    }\n    if (next !== current) {\n      const option = this.options[next];\n      if (option && !option.disabled) {\n        this._select(option);\n        // Roving tabindex: focus the newly-selected segment so Tab tracking stays consistent.\n        this.updateComplete.then(() => {\n          const segments = this.shadowRoot?.querySelectorAll<HTMLElement>('.segment');\n          segments?.[next]?.focus();\n        });\n      }\n    }\n  }\n\n  override render() {\n    return html`\n      <div class=\"track\" role=\"radiogroup\" aria-disabled=${this.disabled ? 'true' : 'false'} @keydown=${this._handleKeydown}>\n        <span class=\"indicator\"></span>\n        ${this.options.map(option => html`\n          <button\n            type=\"button\"\n            class=\"segment\"\n            role=\"radio\"\n            aria-checked=${option.value === this.value ? 'true' : 'false'}\n            tabindex=${option.value === this.value ? '0' : '-1'}\n            ?disabled=${option.disabled || this.disabled}\n            @click=${() => this._select(option)}\n          >${option.label}</button>\n        `)}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-segmented-control': CgSegmentedControl;\n  }\n}\n"],"names":["CgSegmentedControl","LitElement","track","changed","activeIdx","o","segments","indicator","seg","option","current","next","html","hostBase","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}
+{"version":3,"file":"cg-segmented-control.js","sources":["../../../src/components/cg-segmented-control/cg-segmented-control.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBase, reducedMotion } from '../../styles/index.js';\n\nexport interface SegmentOption {\n  label: string;\n  value: string;\n  icon?: string;\n  disabled?: boolean;\n}\n\n/**\n * @element cg-segmented-control\n * iOS-style pill selector with animated indicator. Single value selection.\n *\n * @example\n * ```html\n * <cg-segmented-control\n *   label=\"View period\"\n *   value=\"day\"\n *   .options=${[\n *     { label: 'Day', value: 'day' },\n *     { label: 'Week', value: 'week' },\n *     { label: 'Month', value: 'month' },\n *   ]}\n * ></cg-segmented-control>\n * ```\n *\n * @fires {CustomEvent<{value: string}>} cg-segmented-change\n * @attr {string} label - Accessible name for the radiogroup. Always provide one.\n */\n@customElement('cg-segmented-control')\nexport class CgSegmentedControl extends LitElement {\n  static override styles = [hostBase, reducedMotion, css`\n    :host {\n      display: inline-flex;\n    }\n\n    .track {\n      display: inline-flex;\n      position: relative;\n      padding: var(--cg-component-segmented-control-padding);\n      background: var(--cg-color-action-secondary-background-default);\n      border: var(--cg-border-width-50) solid var(--cg-color-action-secondary-border-default);\n      border-radius: var(--cg-component-segmented-control-radius);\n      gap: var(--cg-spacing-2);\n    }\n    :host([full]) .track {\n      display: flex;\n      width: 100%;\n    }\n\n    .indicator {\n      position: absolute;\n      top: var(--cg-component-segmented-control-padding);\n      left: 0;\n      height: calc(100% - 2 * var(--cg-component-segmented-control-padding));\n      box-sizing: border-box;\n      background: var(--cg-color-surface-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-action-secondary-border-default);\n      border-radius: calc(var(--cg-component-segmented-control-radius) - var(--cg-component-segmented-control-padding));\n      transition:\n        transform var(--cg-transition-duration-default) var(--cg-transition-easing-ease-in-out),\n        width var(--cg-transition-duration-default) var(--cg-transition-easing-ease-in-out);\n      pointer-events: none;\n    }\n\n    .segment {\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: var(--cg-spacing-6);\n      height: calc(var(--cg-component-segmented-control-height-md) - 2 * var(--cg-component-segmented-control-padding));\n      padding: 0 var(--cg-spacing-16);\n      border: none;\n      background: transparent;\n      color: var(--cg-color-surface-container-outlined);\n      font-family: inherit;\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      cursor: pointer;\n      transition:\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      z-index: 1;\n      border-radius: inherit;\n      flex: 1;\n    }\n    .segment:hover:not(:disabled) {\n      color: var(--cg-color-surface-base-text);\n    }\n    .segment[aria-checked=\"true\"] {\n      color: var(--cg-color-surface-base-text);\n    }\n    .segment:focus-visible {\n      outline: none;\n      box-shadow:\n        0 0 0 var(--cg-focus-ring-offset) var(--cg-color-focus-ring-offset),\n        0 0 0 calc(var(--cg-focus-ring-offset) + var(--cg-focus-ring-width)) var(--cg-color-focus-ring);\n    }\n    .segment:disabled {\n      opacity: var(--cg-opacity-50);\n      cursor: not-allowed;\n    }\n    .segment:active:not(:disabled) {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n\n    /* Sizes */\n    :host([size=\"sm\"]) .segment {\n      height: calc(var(--cg-component-segmented-control-height-sm) - 2 * var(--cg-component-segmented-control-padding));\n      padding: 0 var(--cg-spacing-12);\n      font-size: var(--cg-font-size-xs);\n    }\n    :host([size=\"lg\"]) .segment {\n      height: calc(var(--cg-component-segmented-control-height-lg) - 2 * var(--cg-component-segmented-control-padding));\n      padding: 0 var(--cg-spacing-20);\n      font-size: var(--cg-font-size-base);\n    }\n  `];\n\n  static formAssociated = true;\n  private _internals?: ElementInternals;\n\n  constructor() {\n    super();\n    if (typeof this.attachInternals === 'function') {\n      this._internals = this.attachInternals();\n    }\n  }\n\n  @property({ type: Array }) options: SegmentOption[] = [];\n  @property() value = '';\n  @property({ reflect: true }) name = '';\n  /** Accessible name for the radiogroup (e.g. \"View period\"). Strongly recommended. */\n  @property() label = '';\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n  @property({ type: Boolean, reflect: true }) full = false;\n\n  private _resizeObserver: ResizeObserver | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // Re-compute indicator when container resizes (e.g. full width on mobile)\n    this._resizeObserver = new ResizeObserver(() => this._updateIndicator());\n    requestAnimationFrame(() => {\n      const track = this.shadowRoot?.querySelector('.track');\n      if (track && this._resizeObserver) this._resizeObserver.observe(track);\n    });\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._resizeObserver?.disconnect();\n    this._resizeObserver = null;\n  }\n\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('value')) {\n      this._internals?.setFormValue(this.value);\n    }\n    if (changed.has('value') || changed.has('options') || changed.has('size')) {\n      // Wait for DOM to settle before measuring\n      requestAnimationFrame(() => this._updateIndicator());\n    }\n  }\n\n  override firstUpdated(): void {\n    requestAnimationFrame(() => this._updateIndicator());\n  }\n\n  private _updateIndicator(): void {\n    const indicator = this.shadowRoot?.querySelector<HTMLElement>('.indicator');\n    if (!indicator) return;\n    const activeIdx = this.options.findIndex(o => o.value === this.value);\n    if (activeIdx < 0) {\n      // No active option: hide the indicator so its border doesn't render as a sliver at left:0.\n      indicator.style.visibility = 'hidden';\n      return;\n    }\n    const segments = this.shadowRoot?.querySelectorAll<HTMLElement>('.segment');\n    const seg = segments?.[activeIdx];\n    if (!seg) return;\n    indicator.style.visibility = 'visible';\n    indicator.style.width = `${seg.offsetWidth}px`;\n    indicator.style.transform = `translateX(${seg.offsetLeft}px)`;\n  }\n\n  private _select(option: SegmentOption): void {\n    if (option.disabled || this.disabled) return;\n    this.value = option.value;\n    this.dispatchEvent(new CustomEvent('cg-segmented-change', {\n      detail: { value: option.value },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _handleKeydown(e: KeyboardEvent): void {\n    if (this.disabled) return;\n    let current = this.options.findIndex(o => o.value === this.value);\n    // No selection yet: navigate relative to the first enabled option (roving-focus seed).\n    if (current < 0) current = this.options.findIndex(o => !o.disabled);\n    if (current < 0) return;\n    let next = current;\n    if (e.key === 'ArrowLeft' || e.key === 'ArrowUp' || e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n      e.preventDefault();\n      const dir = e.key === 'ArrowLeft' || e.key === 'ArrowUp' ? -1 : 1;\n      // Scan for the next enabled option, skipping disabled segments (WAI-ARIA radio-group pattern).\n      for (let i = 1; i <= this.options.length; i++) {\n        const idx = (current + dir * i + this.options.length) % this.options.length;\n        const candidate = this.options[idx];\n        if (candidate && !candidate.disabled) {\n          next = idx;\n          break;\n        }\n      }\n    } else if (e.key === 'Home') {\n      e.preventDefault();\n      const idx = this.options.findIndex(o => !o.disabled);\n      if (idx >= 0) next = idx;\n    } else if (e.key === 'End') {\n      e.preventDefault();\n      for (let i = this.options.length - 1; i >= 0; i--) {\n        const candidate = this.options[i];\n        if (candidate && !candidate.disabled) {\n          next = i;\n          break;\n        }\n      }\n    }\n    if (next !== current) {\n      const option = this.options[next];\n      if (option && !option.disabled) {\n        this._select(option);\n        // Roving tabindex: focus the newly-selected segment so Tab tracking stays consistent.\n        this.updateComplete.then(() => {\n          const segments = this.shadowRoot?.querySelectorAll<HTMLElement>('.segment');\n          segments?.[next]?.focus();\n        });\n      }\n    }\n  }\n\n  override render() {\n    const activeIdx = this.options.findIndex(o => o.value === this.value);\n    // Roving tabindex: when nothing is selected, seed focus on the first enabled segment\n    // so the control stays keyboard-reachable.\n    const focusIdx = activeIdx >= 0 ? activeIdx : this.options.findIndex(o => !o.disabled);\n    return html`\n      <div class=\"track\" role=\"radiogroup\" aria-label=${this.label || nothing} aria-disabled=${this.disabled ? 'true' : 'false'} @keydown=${this._handleKeydown}>\n        <span class=\"indicator\"></span>\n        ${this.options.map((option, i) => html`\n          <button\n            type=\"button\"\n            class=\"segment\"\n            role=\"radio\"\n            aria-checked=${option.value === this.value ? 'true' : 'false'}\n            tabindex=${i === focusIdx ? '0' : '-1'}\n            ?disabled=${option.disabled || this.disabled}\n            @click=${() => this._select(option)}\n          >${option.icon ? html`<cg-icon name=${option.icon}></cg-icon>` : nothing}${option.label}</button>\n        `)}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-segmented-control': CgSegmentedControl;\n  }\n}\n"],"names":["CgSegmentedControl","LitElement","track","changed","indicator","activeIdx","seg","option","current","o","next","dir","i","idx","candidate","focusIdx","html","nothing","hostBase","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/components/cg-select/cg-select.d.ts

@@ -17,7 +17,7 @@ import { LitElement, PropertyValues } from 'lit';
  * @cssprop [--cg-color-input-background-default=#18181b] - Trigger background
  * @cssprop [--cg-color-surface-container-background=#18181b] - Dropdown panel background
  * @cssprop [--cg-color-focus-ring] - Focus/hover border accent
- * @cssprop [--cg-border-radius-150=12px] - Border radius for trigger and dropdown
+ * @cssprop [--cg-component-select-radius] - Border radius for trigger and dropdown (default rounded="md")
  */
 /** Option entry for cg-select, with value, display label, and optional disabled state. */
 export interface SelectOption {
@@ -49,12 +49,14 @@ export declare class CgSelect extends LitElement {
     private _open;
     private _search;
     private _highlighted;
+    private _openPanel;
     private _toggle;
     private _close;
     private _select;
     private _filteredOptions;
+    private _scrollHighlightedIntoView;
     private _handleKeydown;
-    private _handleClickOutside;
+    private _disposeOutsideClick;
     connectedCallback(): void;
     disconnectedCallback(): void;
     render(): import('lit').TemplateResult<1>;

package/dist/components/cg-select/cg-select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cg-select.d.ts","sourceRoot":"","sources":["../../../src/components/cg-select/cg-select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1E;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,0FAA0F;AAC1F,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,qBACa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAA+B;;IASjD,OAAgB,MAAM,4BA4HnB;IAE0B,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAChC,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IACvD,OAAO,EAAE,YAAY,EAAE,CAAM;IAC5C,KAAK,SAAM;IACX,KAAK,SAAM;IACX,WAAW,SAAe;IAC1B,IAAI,SAAM;IACO,QAAQ,UAAS;IACF,KAAK,UAAS;IACd,OAAO,UAAS;IAChB,OAAO,UAAS;IAC/B,UAAU,UAAS;IACnB,QAAQ,UAAS;IAErC,OAAO,CAAC,OAAO,EAAE,cAAc;IAcxC,iBAAiB;IAIjB,wBAAwB,CAAC,KAAK,EAAE,MAAM;IAI7B,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,OAAO,CAAM;IACrB,OAAO,CAAC,YAAY,CAAM;IAEnC,OAAO,CAAC,OAAO;IAOf,OAAO,CAAC,MAAM;IAEd,OAAO,CAAC,OAAO;IAOf,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,cAAc;IAsBtB,OAAO,CAAC,mBAAmB,CAEzB;IAEO,iBAAiB;IACjB,oBAAoB;IAEpB,MAAM;CAoDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAAG,WAAW,EAAE,QAAQ,CAAC;KAAE;CAC3D"}
+{"version":3,"file":"cg-select.d.ts","sourceRoot":"","sources":["../../../src/components/cg-select/cg-select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAK1E;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,0FAA0F;AAC1F,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,qBACa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAA+B;;IASjD,OAAgB,MAAM,4BA8HnB;IAE0B,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAChC,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IACvD,OAAO,EAAE,YAAY,EAAE,CAAM;IAC5C,KAAK,SAAM;IACX,KAAK,SAAM;IACX,WAAW,SAAe;IAC1B,IAAI,SAAM;IACO,QAAQ,UAAS;IACF,KAAK,UAAS;IACd,OAAO,UAAS;IAChB,OAAO,UAAS;IAC/B,UAAU,UAAS;IACnB,QAAQ,UAAS;IAErC,OAAO,CAAC,OAAO,EAAE,cAAc;IAcxC,iBAAiB;IAIjB,wBAAwB,CAAC,KAAK,EAAE,MAAM;IAI7B,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,OAAO,CAAM;IACrB,OAAO,CAAC,YAAY,CAAM;IAEnC,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,OAAO;IAYf,OAAO,CAAC,MAAM;IAEd,OAAO,CAAC,OAAO;IAOf,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,0BAA0B;IAMlC,OAAO,CAAC,cAAc;IAuCtB,OAAO,CAAC,oBAAoB,CAA6B;IAEhD,iBAAiB;IAMjB,oBAAoB;IAMpB,MAAM;CA6DhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAAG,WAAW,EAAE,QAAQ,CAAC;KAAE;CAC3D"}