@cognivo/components 0.8.0 → 0.8.2

package/dist/components/cg-progress-bar/cg-progress-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"cg-progress-bar.js","sources":["../../../src/components/cg-progress-bar/cg-progress-bar.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/**\n * <cg-progress-bar> — Linear progress bar with label, buffer, and custom formatting.\n *\n * @example\n * ```html\n * <cg-progress-bar value=\"68\" label=\"Upload\" showValue></cg-progress-bar>\n * <cg-progress-bar value=\"45\" label=\"Storage\" formatValue=\"45 MB / 100 MB\"></cg-progress-bar>\n * <cg-progress-bar value=\"80\" buffer=\"95\" label=\"Video\" showValue></cg-progress-bar>\n * <cg-progress-bar indeterminate label=\"Processing...\"></cg-progress-bar>\n * ```\n *\n * @cssprop --cg-component-progress-radius - Track border radius\n * @cssprop --cg-component-progress-height-sm - Track height sm (4px)\n * @cssprop --cg-component-progress-height-md - Track height md (8px)\n * @cssprop --cg-component-progress-height-lg - Track height lg (12px)\n */\n@customElement('cg-progress-bar')\nexport class CgProgressBar extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      width: 100%;\n    }\n\n    .header {\n      display: flex;\n      align-items: baseline;\n      justify-content: space-between;\n      margin-bottom: var(--cg-spacing-6);\n    }\n\n    .header-left {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-2);\n    }\n\n    .label {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-container-text);\n      line-height: var(--cg-line-height-snug);\n    }\n\n    .description {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n      line-height: var(--cg-line-height-snug);\n    }\n\n    .value-text {\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-container-text);\n      font-variant-numeric: tabular-nums;\n      white-space: nowrap;\n    }\n\n    /* ── Track ── */\n    .track {\n      width: 100%;\n      background: var(--cg-color-loading-spinner-secondary);\n      border-radius: var(--cg-component-progress-radius);\n      overflow: hidden;\n      position: relative;\n    }\n\n    /* Sizes */\n    :host([size=\"sm\"]) .track { height: var(--cg-component-progress-height-sm); }\n    :host([size=\"md\"]) .track { height: var(--cg-component-progress-height-md); }\n    :host([size=\"lg\"]) .track { height: var(--cg-component-progress-height-lg); }\n\n    /* ── Buffer bar (behind fill) ── */\n    .buffer {\n      position: absolute;\n      top: 0;\n      left: 0;\n      height: 100%;\n      border-radius: var(--cg-component-progress-radius);\n      background: var(--cg-color-loading-spinner-primary);\n      opacity: 0.25;\n      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n    }\n\n    /* ── Fill bar ── */\n    .fill {\n      height: 100%;\n      border-radius: var(--cg-component-progress-radius);\n      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n      position: relative;\n      overflow: hidden;\n    }\n\n    /* ── Variant colors ── */\n    :host([variant=\"default\"]) .fill {\n      background: var(--cg-color-loading-spinner-primary);\n    }\n    :host([variant=\"success\"]) .fill {\n      background: var(--cg-color-status-success-text-default);\n    }\n    :host([variant=\"warning\"]) .fill {\n      background: var(--cg-color-status-warning-text-default);\n    }\n    :host([variant=\"danger\"]) .fill {\n      background: var(--cg-color-status-error-text-default);\n    }\n\n    /* ── Striped pattern ── */\n    :host([striped]) .fill::after {\n      content: '';\n      position: absolute;\n      inset: 0;\n      background-image: linear-gradient(\n        45deg,\n        var(--cg-overlay-white-strong) 25%,\n        transparent 25%,\n        transparent 50%,\n        var(--cg-overlay-white-strong) 50%,\n        var(--cg-overlay-white-strong) 75%,\n        transparent 75%,\n        transparent\n      );\n      background-size: 20px 20px;\n    }\n\n    /* ── Animated stripes ── */\n    :host([animated]) .fill::after {\n      animation: stripe-move 1s linear infinite;\n    }\n\n    @keyframes stripe-move {\n      from { background-position: 0 0; }\n      to { background-position: 20px 0; }\n    }\n\n    /* ── Indeterminate ── */\n    :host([indeterminate]) .fill {\n      width: 40% !important;\n      animation: indeterminate-slide 1.5s var(--cg-transition-easing-ease-in-out) infinite;\n    }\n\n    @keyframes indeterminate-slide {\n      0% { transform: translateX(-100%); }\n      50% { transform: translateX(150%); }\n      100% { transform: translateX(-100%); }\n    }\n\n    @keyframes indeterminate-pulse {\n      0%, 100% { opacity: 0.4; }\n      50% { opacity: 1; }\n    }\n\n    /* ── Min/Max labels ── */\n    .range-labels {\n      display: flex;\n      justify-content: space-between;\n      margin-top: var(--cg-spacing-4);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n      font-variant-numeric: tabular-nums;\n    }\n\n    /* Reduced motion */\n    @media (prefers-reduced-motion: reduce) {\n      .fill::before {\n        animation: none !important;\n        background: none !important;\n      }\n      :host([animated]) .fill::after {\n        animation: none !important;\n      }\n      :host([indeterminate]) .fill {\n        animation: indeterminate-pulse 2s ease-in-out infinite !important;\n        animation-duration: 2s !important;\n        transform: none !important;\n        width: 100% !important;\n      }\n    }\n  `];\n\n  /** Progress value 0–100 */\n  @property({ type: Number }) value = 0;\n\n  /** Label text above the bar */\n  @property({ type: String }) label = '';\n\n  /** Description text below the label */\n  @property({ type: String }) description = '';\n\n  /** Show percentage value */\n  @property({ type: Boolean }) showValue = false;\n\n  /** Custom formatted value text (e.g. \"45 MB / 100 MB\") — overrides percentage */\n  @property({ type: String }) formatValue = '';\n\n  /** Buffer value 0–100 (secondary fill, e.g. video buffering) */\n  @property({ type: Number }) buffer = 0;\n\n  /** Min label shown under the track */\n  @property({ type: String }) minLabel = '';\n\n  /** Max label shown under the track */\n  @property({ type: String }) maxLabel = '';\n\n  @property({ type: String, reflect: true }) variant: 'default' | 'success' | 'warning' | 'danger' = 'default';\n  @property({ type: Boolean, reflect: true }) indeterminate = false;\n  @property({ type: String, reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n  @property({ type: Boolean, reflect: true }) striped = false;\n  @property({ type: Boolean, reflect: true }) animated = false;\n\n  private get _clampedValue(): number {\n    return Math.max(0, Math.min(100, this.value));\n  }\n\n  private get _clampedBuffer(): number {\n    return Math.max(0, Math.min(100, this.buffer));\n  }\n\n  private get _displayValue(): string {\n    if (this.formatValue) return this.formatValue;\n    return `${this._clampedValue}%`;\n  }\n\n  override render() {\n    const showHeader = this.label || this.description || ((this.showValue || this.formatValue) && !this.indeterminate);\n    const showRangeLabels = this.minLabel || this.maxLabel;\n    const hasBuffer = this.buffer > 0 && !this.indeterminate;\n\n    return html`\n      ${showHeader ? html`\n        <div class=\"header\">\n          <div class=\"header-left\">\n            ${this.label ? html`<span class=\"label\">${this.label}</span>` : nothing}\n            ${this.description ? html`<span class=\"description\">${this.description}</span>` : nothing}\n          </div>\n          ${(this.showValue || this.formatValue) && !this.indeterminate ? html`\n            <span class=\"value-text\">${this._displayValue}</span>\n          ` : nothing}\n        </div>\n      ` : nothing}\n      <div\n        class=\"track\"\n        role=\"progressbar\"\n        aria-valuenow=\"${this.indeterminate ? nothing : this._clampedValue}\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-label=\"${this.label || 'Progress'}\"\n        aria-busy=\"${this.indeterminate}\"\n      >\n        ${hasBuffer ? html`\n          <div class=\"buffer\" style=\"width: ${this._clampedBuffer}%\"></div>\n        ` : nothing}\n        <div\n          class=\"fill\"\n          style=\"${this.indeterminate ? '' : `width: ${this._clampedValue}%`}\"\n        ></div>\n      </div>\n      ${showRangeLabels ? html`\n        <div class=\"range-labels\">\n          <span>${this.minLabel}</span>\n          <span>${this.maxLabel}</span>\n        </div>\n      ` : nothing}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-progress-bar': CgProgressBar;\n  }\n}\n"],"names":["CgProgressBar","LitElement","showHeader","showRangeLabels","hasBuffer","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAqBO,IAAMA,IAAN,cAA4BC,EAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA,GAmKuB,KAAA,QAAQ,GAGR,KAAA,QAAQ,IAGR,KAAA,cAAc,IAGb,KAAA,YAAY,IAGb,KAAA,cAAc,IAGd,KAAA,SAAS,GAGT,KAAA,WAAW,IAGX,KAAA,WAAW,IAEI,KAAA,UAAwD,WACvD,KAAA,gBAAgB,IACjB,KAAA,OAA2B,MAC1B,KAAA,UAAU,IACV,KAAA,WAAW;AAAA,EAAA;AAAA,EAEvD,IAAY,gBAAwB;AAClC,WAAO,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,KAAK,KAAK,CAAC;AAAA,EAC9C;AAAA,EAEA,IAAY,iBAAyB;AACnC,WAAO,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,KAAK,MAAM,CAAC;AAAA,EAC/C;AAAA,EAEA,IAAY,gBAAwB;AAClC,WAAI,KAAK,cAAoB,KAAK,cAC3B,GAAG,KAAK,aAAa;AAAA,EAC9B;AAAA,EAES,SAAS;AAChB,UAAMC,IAAa,KAAK,SAAS,KAAK,gBAAiB,KAAK,aAAa,KAAK,gBAAgB,CAAC,KAAK,eAC9FC,IAAkB,KAAK,YAAY,KAAK,UACxCC,IAAY,KAAK,SAAS,KAAK,CAAC,KAAK;AAE3C,WAAOC;AAAA,QACHH,IAAaG;AAAA;AAAA;AAAA,cAGP,KAAK,QAAQA,wBAA2B,KAAK,KAAK,YAAYC,CAAO;AAAA,cACrE,KAAK,cAAcD,8BAAiC,KAAK,WAAW,YAAYC,CAAO;AAAA;AAAA,aAExF,KAAK,aAAa,KAAK,gBAAgB,CAAC,KAAK,gBAAgBD;AAAA,uCACnC,KAAK,aAAa;AAAA,cAC3CC,CAAO;AAAA;AAAA,UAEXA,CAAO;AAAA;AAAA;AAAA;AAAA,yBAIQ,KAAK,gBAAgBA,IAAU,KAAK,aAAa;AAAA;AAAA;AAAA,sBAGpD,KAAK,SAAS,UAAU;AAAA,qBACzB,KAAK,aAAa;AAAA;AAAA,UAE7BF,IAAYC;AAAA,8CACwB,KAAK,cAAc;AAAA,YACrDC,CAAO;AAAA;AAAA;AAAA,mBAGA,KAAK,gBAAgB,KAAK,UAAU,KAAK,aAAa,GAAG;AAAA;AAAA;AAAA,QAGpEH,IAAkBE;AAAA;AAAA,kBAER,KAAK,QAAQ;AAAA,kBACb,KAAK,QAAQ;AAAA;AAAA,UAErBC,CAAO;AAAA;AAAA,EAEf;AACF;AAvPaN,EACK,SAAS,CAACO,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;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,GA+JnD;AAG2BC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAnKfX,EAmKiB,WAAA,SAAA,CAAA;AAGAU,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAtKfX,EAsKiB,WAAA,SAAA,CAAA;AAGAU,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAzKfX,EAyKiB,WAAA,eAAA,CAAA;AAGCU,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GA5KhBX,EA4KkB,WAAA,aAAA,CAAA;AAGDU,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA/KfX,EA+KiB,WAAA,eAAA,CAAA;AAGAU,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAlLfX,EAkLiB,WAAA,UAAA,CAAA;AAGAU,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GArLfX,EAqLiB,WAAA,YAAA,CAAA;AAGAU,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAxLfX,EAwLiB,WAAA,YAAA,CAAA;AAEeU,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA1L9BX,EA0LgC,WAAA,WAAA,CAAA;AACCU,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA3L/BX,EA2LiC,WAAA,iBAAA,CAAA;AACDU,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA5L9BX,EA4LgC,WAAA,QAAA,CAAA;AACCU,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA7L/BX,EA6LiC,WAAA,WAAA,CAAA;AACAU,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA9L/BX,EA8LiC,WAAA,YAAA,CAAA;AA9LjCA,IAANU,EAAA;AAAA,EADNE,EAAc,iBAAiB;AAAA,GACnBZ,CAAA;"}
+{"version":3,"file":"cg-progress-bar.js","sources":["../../../src/components/cg-progress-bar/cg-progress-bar.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/**\n * <cg-progress-bar> — Linear progress bar with label, buffer, and custom formatting.\n *\n * @example\n * ```html\n * <cg-progress-bar value=\"68\" label=\"Upload\" showValue></cg-progress-bar>\n * <cg-progress-bar value=\"45\" label=\"Storage\" formatValue=\"45 MB / 100 MB\"></cg-progress-bar>\n * <cg-progress-bar value=\"80\" buffer=\"95\" label=\"Video\" showValue></cg-progress-bar>\n * <cg-progress-bar indeterminate label=\"Processing...\"></cg-progress-bar>\n * ```\n *\n * @cssprop --cg-component-progress-radius - Track border radius\n * @cssprop --cg-component-progress-height-sm - Track height sm (4px)\n * @cssprop --cg-component-progress-height-md - Track height md (8px)\n * @cssprop --cg-component-progress-height-lg - Track height lg (12px)\n */\n@customElement('cg-progress-bar')\nexport class CgProgressBar extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      width: 100%;\n    }\n\n    .header {\n      display: flex;\n      align-items: baseline;\n      justify-content: space-between;\n      margin-bottom: var(--cg-spacing-6);\n    }\n\n    .header-left {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-2);\n    }\n\n    .label {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-container-text);\n      line-height: var(--cg-line-height-snug);\n    }\n\n    .description {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n      line-height: var(--cg-line-height-snug);\n    }\n\n    .value-text {\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-container-text);\n      font-variant-numeric: tabular-nums;\n      white-space: nowrap;\n    }\n\n    /* ── Track ── */\n    .track {\n      width: 100%;\n      background: var(--cg-color-loading-spinner-secondary);\n      border-radius: var(--cg-component-progress-radius);\n      overflow: hidden;\n      position: relative;\n    }\n\n    /* Sizes */\n    :host([size=\"sm\"]) .track { height: var(--cg-component-progress-height-sm); }\n    :host([size=\"md\"]) .track { height: var(--cg-component-progress-height-md); }\n    :host([size=\"lg\"]) .track { height: var(--cg-component-progress-height-lg); }\n\n    /* ── Buffer bar (behind fill) ── */\n    .buffer {\n      position: absolute;\n      top: 0;\n      left: 0;\n      height: 100%;\n      border-radius: var(--cg-component-progress-radius);\n      background: var(--cg-color-loading-spinner-primary);\n      opacity: var(--cg-opacity-25);\n      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n    }\n    :host([variant=\"success\"]) .buffer { background: var(--cg-color-status-success-text-default); }\n    :host([variant=\"warning\"]) .buffer { background: var(--cg-color-status-warning-text-default); }\n    :host([variant=\"danger\"]) .buffer { background: var(--cg-color-status-error-text-default); }\n\n    /* ── Fill bar ── */\n    .fill {\n      height: 100%;\n      border-radius: var(--cg-component-progress-radius);\n      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n      position: relative;\n      overflow: hidden;\n    }\n\n    /* ── Variant colors ── */\n    :host([variant=\"default\"]) .fill {\n      background: var(--cg-color-loading-spinner-primary);\n    }\n    :host([variant=\"success\"]) .fill {\n      background: var(--cg-color-status-success-text-default);\n    }\n    :host([variant=\"warning\"]) .fill {\n      background: var(--cg-color-status-warning-text-default);\n    }\n    :host([variant=\"danger\"]) .fill {\n      background: var(--cg-color-status-error-text-default);\n    }\n\n    /* ── Striped pattern ── */\n    :host([striped]) .fill::after {\n      content: '';\n      position: absolute;\n      inset: 0;\n      background-image: linear-gradient(\n        45deg,\n        var(--cg-overlay-white-strong) 25%,\n        transparent 25%,\n        transparent 50%,\n        var(--cg-overlay-white-strong) 50%,\n        var(--cg-overlay-white-strong) 75%,\n        transparent 75%,\n        transparent\n      );\n      background-size: var(--cg-spacing-20) var(--cg-spacing-20);\n    }\n\n    /* ── Animated stripes ── */\n    :host([animated]) .fill::after {\n      animation: stripe-move 1s linear infinite;\n    }\n\n    @keyframes stripe-move {\n      from { background-position: 0 0; }\n      to { background-position: var(--cg-spacing-20) 0; }\n    }\n\n    /* ── Indeterminate ── */\n    :host([indeterminate]) .fill {\n      width: 40% !important;\n      animation: indeterminate-slide 1.5s var(--cg-transition-easing-ease-in-out) infinite;\n    }\n\n    @keyframes indeterminate-slide {\n      0% { transform: translateX(-100%); }\n      50% { transform: translateX(150%); }\n      100% { transform: translateX(-100%); }\n    }\n\n    @keyframes indeterminate-pulse {\n      0%, 100% { opacity: 0.4; }\n      50% { opacity: 1; }\n    }\n\n    /* ── Min/Max labels ── */\n    .range-labels {\n      display: flex;\n      justify-content: space-between;\n      margin-top: var(--cg-spacing-4);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n      font-variant-numeric: tabular-nums;\n    }\n\n    /* Reduced motion */\n    @media (prefers-reduced-motion: reduce) {\n      :host([animated]) .fill::after {\n        animation: none !important;\n      }\n      :host([indeterminate]) .fill {\n        animation: indeterminate-pulse 2s ease-in-out infinite !important;\n        animation-duration: 2s !important;\n        transform: none !important;\n        width: 100% !important;\n      }\n    }\n  `];\n\n  /** Progress value 0–100 */\n  @property({ type: Number }) value = 0;\n\n  /** Label text above the bar */\n  @property({ type: String }) label = '';\n\n  /** Description text below the label */\n  @property({ type: String }) description = '';\n\n  /** Show percentage value */\n  @property({ type: Boolean }) showValue = false;\n\n  /** Custom formatted value text (e.g. \"45 MB / 100 MB\") — overrides percentage */\n  @property({ type: String }) formatValue = '';\n\n  /** Buffer value 0–100 (secondary fill, e.g. video buffering) */\n  @property({ type: Number }) buffer = 0;\n\n  /** Min label shown under the track */\n  @property({ type: String }) minLabel = '';\n\n  /** Max label shown under the track */\n  @property({ type: String }) maxLabel = '';\n\n  @property({ type: String, reflect: true }) variant: 'default' | 'success' | 'warning' | 'danger' = 'default';\n  @property({ type: Boolean, reflect: true }) indeterminate = false;\n  @property({ type: String, reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n  @property({ type: Boolean, reflect: true }) striped = false;\n  @property({ type: Boolean, reflect: true }) animated = false;\n\n  private get _clampedValue(): number {\n    return Math.max(0, Math.min(100, this.value));\n  }\n\n  private get _clampedBuffer(): number {\n    return Math.max(0, Math.min(100, this.buffer));\n  }\n\n  private get _displayValue(): string {\n    if (this.formatValue) return this.formatValue;\n    return `${this._clampedValue}%`;\n  }\n\n  override render() {\n    const showHeader = this.label || this.description || ((this.showValue || this.formatValue) && !this.indeterminate);\n    const showRangeLabels = this.minLabel || this.maxLabel;\n    const hasBuffer = this.buffer > 0 && !this.indeterminate;\n\n    return html`\n      ${showHeader ? html`\n        <div class=\"header\">\n          <div class=\"header-left\">\n            ${this.label ? html`<span class=\"label\">${this.label}</span>` : nothing}\n            ${this.description ? html`<span class=\"description\">${this.description}</span>` : nothing}\n          </div>\n          ${(this.showValue || this.formatValue) && !this.indeterminate ? html`\n            <span class=\"value-text\">${this._displayValue}</span>\n          ` : nothing}\n        </div>\n      ` : nothing}\n      <div\n        class=\"track\"\n        role=\"progressbar\"\n        aria-valuenow=\"${this.indeterminate ? nothing : this._clampedValue}\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-label=\"${this.label || 'Progress'}\"\n        aria-valuetext=${this.formatValue && !this.indeterminate ? this.formatValue : nothing}\n        aria-busy=\"${this.indeterminate}\"\n      >\n        ${hasBuffer ? html`\n          <div class=\"buffer\" style=\"width: ${this._clampedBuffer}%\"></div>\n        ` : nothing}\n        <div\n          class=\"fill\"\n          style=\"${this.indeterminate ? '' : `width: ${this._clampedValue}%`}\"\n        ></div>\n      </div>\n      ${showRangeLabels ? html`\n        <div class=\"range-labels\">\n          <span>${this.minLabel}</span>\n          <span>${this.maxLabel}</span>\n        </div>\n      ` : nothing}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-progress-bar': CgProgressBar;\n  }\n}\n"],"names":["CgProgressBar","LitElement","showHeader","showRangeLabels","hasBuffer","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}

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

@@ -14,6 +14,14 @@ import { LitElement, PropertyValues } from 'lit';
  */
 export declare class CgRadio extends LitElement {
     static formAssociated: boolean;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
     private _internals;
     constructor();
     static styles: import('lit').CSSResult[];
@@ -28,6 +36,8 @@ export declare class CgRadio extends LitElement {
     loading: boolean;
     required: boolean;
     variant: 'dot' | 'tick';
+    /** Roving tabindex slot managed by cg-radio-group; standalone radios stay tabbable. */
+    groupTabIndex: number;
     updated(changed: PropertyValues): void;
     formResetCallback(): void;
     formStateRestoreCallback(state: string): void;

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

@@ -1 +1 @@
-{"version":3,"file":"cg-radio.d.ts","sourceRoot":"","sources":["../../../src/components/cg-radio/cg-radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1E;;;;;;;;;;;;GAYG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAA+B;;IASjD,OAAgB,MAAM,4BA8JnB;IAES,KAAK,SAAM;IACX,WAAW,SAAM;IACjB,IAAI,SAAM;IACV,KAAK,SAAM;IACM,OAAO,UAAS;IACD,QAAQ,UAAS;IACjB,KAAK,UAAS;IACd,OAAO,UAAS;IAChB,OAAO,UAAS;IAC/B,QAAQ,UAAS;IACjB,OAAO,EAAE,KAAK,GAAG,MAAM,CAAS;IAEpD,OAAO,CAAC,OAAO,EAAE,cAAc;IAcxC,iBAAiB;IAIjB,wBAAwB,CAAC,KAAK,EAAE,MAAM;IAItC,OAAO,CAAC,OAAO;IASf,OAAO,CAAC,gBAAgB;IAYf,MAAM;CA8BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAAG,UAAU,EAAE,OAAO,CAAC;KAAE;CACzD"}
+{"version":3,"file":"cg-radio.d.ts","sourceRoot":"","sources":["../../../src/components/cg-radio/cg-radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1E;;;;;;;;;;;;GAYG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAgB,iBAAiB;;;;;;;MAA6D;IAC9F,OAAO,CAAC,UAAU,CAA+B;;IASjD,OAAgB,MAAM,4BAoKnB;IAES,KAAK,SAAM;IACX,WAAW,SAAM;IACA,IAAI,SAAM;IAC3B,KAAK,SAAM;IACM,OAAO,UAAS;IACD,QAAQ,UAAS;IACjB,KAAK,UAAS;IACd,OAAO,UAAS;IAChB,OAAO,UAAS;IAC/B,QAAQ,UAAS;IACjB,OAAO,EAAE,KAAK,GAAG,MAAM,CAAS;IAE7D,uFAAuF;IAC3D,aAAa,SAAK;IAErC,OAAO,CAAC,OAAO,EAAE,cAAc;IAcxC,iBAAiB;IAIjB,wBAAwB,CAAC,KAAK,EAAE,MAAM;IAItC,OAAO,CAAC,OAAO;IASf,OAAO,CAAC,gBAAgB;IAYf,MAAM;CA+BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAAG,UAAU,EAAE,OAAO,CAAC;KAAE;CACzD"}

package/dist/components/cg-radio/cg-radio.js

@@ -1,23 +1,23 @@
-import { css as h, LitElement as g, nothing as u, html as s } from "lit";
-import { property as a, customElement as p } from "lit/decorators.js";
-import { h as f, r as v } from "../../chunks/premium.css-9I4kHrsl.js";
-var b = Object.defineProperty, k = Object.getOwnPropertyDescriptor, t = (e, i, l, c) => {
-  for (var o = c > 1 ? void 0 : c ? k(i, l) : i, n = e.length - 1, d; n >= 0; n--)
-    (d = e[n]) && (o = (c ? d(i, l, o) : d(o)) || o);
-  return c && o && b(i, l, o), o;
+import { LitElement as h, css as g, nothing as u, html as s } from "lit";
+import { property as o, customElement as p } from "lit/decorators.js";
+import { h as f, r as v } from "../../chunks/premium.css-DHekUEUt.js";
+var b = Object.defineProperty, k = Object.getOwnPropertyDescriptor, t = (r, i, l, c) => {
+  for (var a = c > 1 ? void 0 : c ? k(i, l) : i, n = r.length - 1, d; n >= 0; n--)
+    (d = r[n]) && (a = (c ? d(i, l, a) : d(a)) || a);
+  return c && a && b(i, l, a), a;
 };
-let r = class extends g {
+let e = class extends h {
   constructor() {
-    super(), this.label = "", this.description = "", this.name = "", this.value = "", this.checked = !1, this.disabled = !1, this.error = !1, this.success = !1, this.loading = !1, this.required = !1, this.variant = "dot", typeof this.attachInternals == "function" && (this._internals = this.attachInternals());
+    super(), this.label = "", this.description = "", this.name = "", this.value = "", this.checked = !1, this.disabled = !1, this.error = !1, this.success = !1, this.loading = !1, this.required = !1, this.variant = "dot", this.groupTabIndex = 0, typeof this.attachInternals == "function" && (this._internals = this.attachInternals());
   }
-  updated(e) {
-    super.updated(e), (e.has("checked") || e.has("value")) && this._internals?.setFormValue(this.checked ? this.value : null), (e.has("required") || e.has("checked")) && (this.required && !this.checked ? this._internals?.setValidity({ valueMissing: !0 }, "This field is required") : this._internals?.setValidity({}));
+  updated(r) {
+    super.updated(r), (r.has("checked") || r.has("value")) && this._internals?.setFormValue(this.checked ? this.value : null), (r.has("required") || r.has("checked")) && (this.required && !this.checked ? this._internals?.setValidity({ valueMissing: !0 }, "This field is required") : this._internals?.setValidity({}));
   }
   formResetCallback() {
     this.checked = this.hasAttribute("checked");
   }
-  formStateRestoreCallback(e) {
-    this.checked = e === this.value;
+  formStateRestoreCallback(r) {
+    this.checked = r === this.value;
   }
   _select() {
     this.disabled || this.loading || this.checked || (this.checked = !0, this.dispatchEvent(new CustomEvent("cg-change", {
@@ -36,20 +36,21 @@ let r = class extends g {
   render() {
     return s`
       <label
-        tabindex=${this.disabled ? "-1" : "0"}
+        tabindex=${this.disabled ? "-1" : String(this.groupTabIndex)}
         role="radio"
         aria-checked=${String(this.checked)}
         aria-disabled=${String(this.disabled)}
         aria-required=${this.required ? "true" : "false"}
+        aria-busy=${this.loading ? "true" : "false"}
         @click=${this._select}
-        @keydown=${(e) => {
-      (e.key === " " || e.key === "Enter") && (e.preventDefault(), this._select());
+        @keydown=${(r) => {
+      (r.key === " " || r.key === "Enter") && (r.preventDefault(), this._select());
     }}
       >
         <input type="radio" .checked=${this.checked}
           ?disabled=${this.disabled} name=${this.name} value=${this.value}
           tabindex="-1" aria-hidden="true"
-          @click=${(e) => e.stopPropagation()} />
+          @click=${(r) => r.stopPropagation()} />
 
         ${this.loading ? s`<span class="loading-spinner" aria-hidden="true"></span>` : s`
         <span class="circle ${this.checked ? "checked" : ""}">
@@ -66,8 +67,9 @@ let r = class extends g {
     `;
   }
 };
-r.formAssociated = !0;
-r.styles = [f, v, h`
+e.formAssociated = !0;
+e.shadowRootOptions = { ...h.shadowRootOptions, delegatesFocus: !0 };
+e.styles = [f, v, g`
     label {
       display: inline-flex;
       align-items: center;
@@ -122,9 +124,15 @@ r.styles = [f, v, h`
     /* Focus ring */
     label:focus-visible .circle {
       border-color: var(--cg-color-radio-border-focus);
-      box-shadow: 0 0 0 var(--cg-spacing-2) var(--cg-overlay-accent-strong);
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
       outline: none;
     }
+    :host([error]) label:focus-visible .circle {
+      box-shadow: 0 0 0 3px var(--cg-shadow-focus-error);
+    }
+    :host([success]) label:focus-visible .circle {
+      box-shadow: 0 0 0 3px var(--cg-shadow-focus-success);
+    }
 
     /* Checked */
     .circle.checked {
@@ -143,8 +151,8 @@ r.styles = [f, v, h`
 
     /* ── Dot indicator ── */
     .dot {
-      width: 10px;
-      height: 10px;
+      width: var(--cg-spacing-8);
+      height: var(--cg-spacing-8);
       border-radius: var(--cg-border-radius-full);
       background: var(--cg-color-radio-dot-default);
       animation: dotIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) forwards;
@@ -198,7 +206,7 @@ r.styles = [f, v, h`
     :host([success]) .label-text { color: var(--cg-color-status-success-text-default); }
 
     /* ── Loading state ── */
-    :host([loading]) label { pointer-events: none; opacity: 0.5; }
+    :host([loading]) label { pointer-events: none; opacity: var(--cg-opacity-50); }
     .loading-spinner {
       width: var(--cg-spacing-20);
       height: var(--cg-spacing-20);
@@ -227,42 +235,45 @@ r.styles = [f, v, h`
     }
   `];
 t([
-  a()
-], r.prototype, "label", 2);
+  o()
+], e.prototype, "label", 2);
+t([
+  o()
+], e.prototype, "description", 2);
 t([
-  a()
-], r.prototype, "description", 2);
+  o({ reflect: !0 })
+], e.prototype, "name", 2);
 t([
-  a()
-], r.prototype, "name", 2);
+  o()
+], e.prototype, "value", 2);
 t([
-  a()
-], r.prototype, "value", 2);
+  o({ type: Boolean })
+], e.prototype, "checked", 2);
 t([
-  a({ type: Boolean })
-], r.prototype, "checked", 2);
+  o({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled", 2);
 t([
-  a({ type: Boolean, reflect: !0 })
-], r.prototype, "disabled", 2);
+  o({ type: Boolean, reflect: !0 })
+], e.prototype, "error", 2);
 t([
-  a({ type: Boolean, reflect: !0 })
-], r.prototype, "error", 2);
+  o({ type: Boolean, reflect: !0 })
+], e.prototype, "success", 2);
 t([
-  a({ type: Boolean, reflect: !0 })
-], r.prototype, "success", 2);
+  o({ type: Boolean, reflect: !0 })
+], e.prototype, "loading", 2);
 t([
-  a({ type: Boolean, reflect: !0 })
-], r.prototype, "loading", 2);
+  o({ type: Boolean })
+], e.prototype, "required", 2);
 t([
-  a({ type: Boolean })
-], r.prototype, "required", 2);
+  o({ reflect: !0 })
+], e.prototype, "variant", 2);
 t([
-  a({ reflect: !0 })
-], r.prototype, "variant", 2);
-r = t([
+  o({ type: Number })
+], e.prototype, "groupTabIndex", 2);
+e = t([
   p("cg-radio")
-], r);
+], e);
 export {
-  r as CgRadio
+  e as CgRadio
 };
 //# sourceMappingURL=cg-radio.js.map

package/dist/components/cg-radio/cg-radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"cg-radio.js","sources":["../../../src/components/cg-radio/cg-radio.ts"],"sourcesContent":["import { LitElement, html, css, nothing, type PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/**\n * @element cg-radio\n * Radio button with dot or tick indicator and spring animation.\n *\n * @example\n * ```html\n * <cg-radio label=\"Option A\" value=\"a\"></cg-radio>\n * <cg-radio label=\"Option B\" value=\"b\" checked></cg-radio>\n * <cg-radio label=\"With tick\" value=\"c\" variant=\"tick\" checked></cg-radio>\n * ```\n *\n * @fires {CustomEvent<{value: string, checked: true}>} cg-change - When selected\n */\n@customElement('cg-radio')\nexport class CgRadio extends LitElement {\n  static formAssociated = true;\n  private _internals: ElementInternals | undefined;\n\n  constructor() {\n    super();\n    if (typeof this.attachInternals === 'function') {\n      this._internals = this.attachInternals();\n    }\n  }\n\n  static override styles = [hostBlock, reducedMotion, css`\n    label {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      cursor: pointer;\n      padding: var(--cg-spacing-6) 0;\n      min-height: 44px;\n      -webkit-tap-highlight-color: transparent;\n      user-select: none;\n    }\n    :host([disabled]) label { cursor: not-allowed; }\n    :host([disabled]) .circle {\n      background: var(--cg-color-radio-background-disabled);\n      border-color: var(--cg-color-radio-border-disabled);\n    }\n    :host([disabled]) .dot {\n      background: var(--cg-color-radio-dot-disabled);\n    }\n    :host([disabled]) .tick-icon {\n      color: var(--cg-color-radio-dot-disabled);\n    }\n\n    /* ── Circle ── */\n    .circle {\n      width: var(--cg-spacing-20);\n      height: var(--cg-spacing-20);\n      flex-shrink: 0;\n      border: var(--cg-border-width-100) solid var(--cg-color-radio-border-default);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-radio-background-default);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition:\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        background var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);\n    }\n\n    /* Hover */\n    :host(:not([disabled])) label:hover .circle {\n      border-color: var(--cg-color-radio-border-checked);\n      background: var(--cg-color-radio-background-hover);\n    }\n\n    /* Press */\n    :host(:not([disabled])) label:active .circle {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n\n    /* Focus ring */\n    label:focus-visible .circle {\n      border-color: var(--cg-color-radio-border-focus);\n      box-shadow: 0 0 0 var(--cg-spacing-2) var(--cg-overlay-accent-strong);\n      outline: none;\n    }\n\n    /* Checked */\n    .circle.checked {\n      border-color: var(--cg-color-radio-border-checked);\n      background: var(--cg-color-radio-background-checked);\n      animation: circlePop var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);\n    }\n\n    @keyframes circlePop {\n      0% { transform: scale(1); }\n      30% { transform: scale(0.85); }\n      60% { transform: scale(1.08); }\n      80% { transform: scale(0.97); }\n      100% { transform: scale(1); }\n    }\n\n    /* ── Dot indicator ── */\n    .dot {\n      width: 10px;\n      height: 10px;\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-radio-dot-default);\n      animation: dotIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) forwards;\n    }\n\n    @keyframes dotIn {\n      0% { transform: scale(0); }\n      60% { transform: scale(1.2); }\n      100% { transform: scale(1); }\n    }\n\n    /* ── Tick indicator — stroke reveal ── */\n    .tick-icon {\n      width: var(--cg-spacing-12);\n      height: var(--cg-spacing-12);\n      color: var(--cg-color-radio-dot-default);\n      overflow: visible;\n    }\n\n    .tick-icon .tick-path {\n      stroke-dasharray: 24;\n      stroke-dashoffset: 24;\n      animation: drawRadioTick var(--cg-transition-duration-default) 60ms var(--cg-transition-easing-ease-out) forwards;\n    }\n\n    @keyframes drawRadioTick {\n      to { stroke-dashoffset: 0; }\n    }\n\n    /* Hidden native input */\n    input {\n      position: absolute;\n      opacity: 0;\n      width: 0;\n      height: 0;\n      pointer-events: none;\n    }\n\n    /* ── Error state ── */\n    :host([error]) .circle { border-color: var(--cg-color-status-error-text-default); }\n    :host([error]) .circle.checked { border-color: var(--cg-color-status-error-text-default); }\n    :host([error]) .dot { background: var(--cg-color-status-error-text-default); }\n    :host([error]) .tick-icon { color: var(--cg-color-status-error-text-default); }\n    :host([error]) .label-text { color: var(--cg-color-status-error-text-default); }\n\n    /* ── Success state ── */\n    :host([success]) .circle { border-color: var(--cg-color-status-success-text-default); }\n    :host([success]) .circle.checked { border-color: var(--cg-color-status-success-text-default); }\n    :host([success]) .dot { background: var(--cg-color-status-success-text-default); }\n    :host([success]) .tick-icon { color: var(--cg-color-status-success-text-default); }\n    :host([success]) .label-text { color: var(--cg-color-status-success-text-default); }\n\n    /* ── Loading state ── */\n    :host([loading]) label { pointer-events: none; opacity: 0.5; }\n    .loading-spinner {\n      width: var(--cg-spacing-20);\n      height: var(--cg-spacing-20);\n      flex-shrink: 0;\n      border: var(--cg-border-width-100) solid var(--cg-color-loading-spinner-secondary);\n      border-top-color: var(--cg-color-loading-spinner-primary);\n      border-radius: var(--cg-border-radius-full);\n      animation: cg-radio-spin var(--cg-transition-duration-slow) linear infinite;\n    }\n    @keyframes cg-radio-spin {\n      to { transform: rotate(360deg); }\n    }\n\n    /* Text */\n    .text-group { display: flex; flex-direction: column; gap: var(--cg-spacing-2); }\n    .label-text {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-base-text);\n      line-height: var(--cg-line-height-snug);\n    }\n    .description {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n      line-height: var(--cg-line-height-snug);\n    }\n  `];\n\n  @property() label = '';\n  @property() description = '';\n  @property() name = '';\n  @property() value = '';\n  @property({ type: Boolean }) checked = false;\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ type: Boolean, reflect: true }) error = false;\n  @property({ type: Boolean, reflect: true }) success = false;\n  @property({ type: Boolean, reflect: true }) loading = false;\n  @property({ type: Boolean }) required = false;\n  @property({ reflect: true }) variant: 'dot' | 'tick' = 'dot';\n\n  override updated(changed: PropertyValues) {\n    super.updated(changed);\n    if (changed.has('checked') || changed.has('value')) {\n      this._internals?.setFormValue(this.checked ? this.value : null);\n    }\n    if (changed.has('required') || changed.has('checked')) {\n      if (this.required && !this.checked) {\n        this._internals?.setValidity({ valueMissing: true }, 'This field is required');\n      } else {\n        this._internals?.setValidity({});\n      }\n    }\n  }\n\n  formResetCallback() {\n    this.checked = this.hasAttribute('checked');\n  }\n\n  formStateRestoreCallback(state: string) {\n    this.checked = state === this.value;\n  }\n\n  private _select() {\n    if (this.disabled || this.loading || this.checked) return;\n    this.checked = true;\n    this.dispatchEvent(new CustomEvent('cg-change', {\n      detail: { value: this.value, checked: true },\n      bubbles: true, composed: true,\n    }));\n  }\n\n  private _renderIndicator() {\n    if (!this.checked) return nothing;\n    if (this.variant === 'tick') {\n      return html`\n        <svg class=\"tick-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path class=\"tick-path\" d=\"M20 6L9 17l-5-5\"></path>\n        </svg>\n      `;\n    }\n    return html`<span class=\"dot\"></span>`;\n  }\n\n  override render() {\n    return html`\n      <label\n        tabindex=${this.disabled ? '-1' : '0'}\n        role=\"radio\"\n        aria-checked=${String(this.checked)}\n        aria-disabled=${String(this.disabled)}\n        aria-required=${this.required ? 'true' : 'false'}\n        @click=${this._select}\n        @keydown=${(e: KeyboardEvent) => { if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); this._select(); } }}\n      >\n        <input type=\"radio\" .checked=${this.checked}\n          ?disabled=${this.disabled} name=${this.name} value=${this.value}\n          tabindex=\"-1\" aria-hidden=\"true\"\n          @click=${(e: Event) => e.stopPropagation()} />\n\n        ${this.loading ? html`<span class=\"loading-spinner\" aria-hidden=\"true\"></span>` : html`\n        <span class=\"circle ${this.checked ? 'checked' : ''}\">\n          ${this._renderIndicator()}\n        </span>`}\n\n        ${this.label ? html`\n          <span class=\"text-group\">\n            <span class=\"label-text\">${this.label}</span>\n            ${this.description ? html`<span class=\"description\">${this.description}</span>` : nothing}\n          </span>\n        ` : nothing}\n      </label>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap { 'cg-radio': CgRadio; }\n}\n"],"names":["CgRadio","LitElement","changed","state","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}
+{"version":3,"file":"cg-radio.js","sources":["../../../src/components/cg-radio/cg-radio.ts"],"sourcesContent":["import { LitElement, html, css, nothing, type PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/**\n * @element cg-radio\n * Radio button with dot or tick indicator and spring animation.\n *\n * @example\n * ```html\n * <cg-radio label=\"Option A\" value=\"a\"></cg-radio>\n * <cg-radio label=\"Option B\" value=\"b\" checked></cg-radio>\n * <cg-radio label=\"With tick\" value=\"c\" variant=\"tick\" checked></cg-radio>\n * ```\n *\n * @fires {CustomEvent<{value: string, checked: true}>} cg-change - When selected\n */\n@customElement('cg-radio')\nexport class CgRadio extends LitElement {\n  static formAssociated = true;\n  static override shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n  private _internals: ElementInternals | undefined;\n\n  constructor() {\n    super();\n    if (typeof this.attachInternals === 'function') {\n      this._internals = this.attachInternals();\n    }\n  }\n\n  static override styles = [hostBlock, reducedMotion, css`\n    label {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      cursor: pointer;\n      padding: var(--cg-spacing-6) 0;\n      min-height: 44px;\n      -webkit-tap-highlight-color: transparent;\n      user-select: none;\n    }\n    :host([disabled]) label { cursor: not-allowed; }\n    :host([disabled]) .circle {\n      background: var(--cg-color-radio-background-disabled);\n      border-color: var(--cg-color-radio-border-disabled);\n    }\n    :host([disabled]) .dot {\n      background: var(--cg-color-radio-dot-disabled);\n    }\n    :host([disabled]) .tick-icon {\n      color: var(--cg-color-radio-dot-disabled);\n    }\n\n    /* ── Circle ── */\n    .circle {\n      width: var(--cg-spacing-20);\n      height: var(--cg-spacing-20);\n      flex-shrink: 0;\n      border: var(--cg-border-width-100) solid var(--cg-color-radio-border-default);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-radio-background-default);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition:\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        background var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);\n    }\n\n    /* Hover */\n    :host(:not([disabled])) label:hover .circle {\n      border-color: var(--cg-color-radio-border-checked);\n      background: var(--cg-color-radio-background-hover);\n    }\n\n    /* Press */\n    :host(:not([disabled])) label:active .circle {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n\n    /* Focus ring */\n    label:focus-visible .circle {\n      border-color: var(--cg-color-radio-border-focus);\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n      outline: none;\n    }\n    :host([error]) label:focus-visible .circle {\n      box-shadow: 0 0 0 3px var(--cg-shadow-focus-error);\n    }\n    :host([success]) label:focus-visible .circle {\n      box-shadow: 0 0 0 3px var(--cg-shadow-focus-success);\n    }\n\n    /* Checked */\n    .circle.checked {\n      border-color: var(--cg-color-radio-border-checked);\n      background: var(--cg-color-radio-background-checked);\n      animation: circlePop var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);\n    }\n\n    @keyframes circlePop {\n      0% { transform: scale(1); }\n      30% { transform: scale(0.85); }\n      60% { transform: scale(1.08); }\n      80% { transform: scale(0.97); }\n      100% { transform: scale(1); }\n    }\n\n    /* ── Dot indicator ── */\n    .dot {\n      width: var(--cg-spacing-8);\n      height: var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-radio-dot-default);\n      animation: dotIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) forwards;\n    }\n\n    @keyframes dotIn {\n      0% { transform: scale(0); }\n      60% { transform: scale(1.2); }\n      100% { transform: scale(1); }\n    }\n\n    /* ── Tick indicator — stroke reveal ── */\n    .tick-icon {\n      width: var(--cg-spacing-12);\n      height: var(--cg-spacing-12);\n      color: var(--cg-color-radio-dot-default);\n      overflow: visible;\n    }\n\n    .tick-icon .tick-path {\n      stroke-dasharray: 24;\n      stroke-dashoffset: 24;\n      animation: drawRadioTick var(--cg-transition-duration-default) 60ms var(--cg-transition-easing-ease-out) forwards;\n    }\n\n    @keyframes drawRadioTick {\n      to { stroke-dashoffset: 0; }\n    }\n\n    /* Hidden native input */\n    input {\n      position: absolute;\n      opacity: 0;\n      width: 0;\n      height: 0;\n      pointer-events: none;\n    }\n\n    /* ── Error state ── */\n    :host([error]) .circle { border-color: var(--cg-color-status-error-text-default); }\n    :host([error]) .circle.checked { border-color: var(--cg-color-status-error-text-default); }\n    :host([error]) .dot { background: var(--cg-color-status-error-text-default); }\n    :host([error]) .tick-icon { color: var(--cg-color-status-error-text-default); }\n    :host([error]) .label-text { color: var(--cg-color-status-error-text-default); }\n\n    /* ── Success state ── */\n    :host([success]) .circle { border-color: var(--cg-color-status-success-text-default); }\n    :host([success]) .circle.checked { border-color: var(--cg-color-status-success-text-default); }\n    :host([success]) .dot { background: var(--cg-color-status-success-text-default); }\n    :host([success]) .tick-icon { color: var(--cg-color-status-success-text-default); }\n    :host([success]) .label-text { color: var(--cg-color-status-success-text-default); }\n\n    /* ── Loading state ── */\n    :host([loading]) label { pointer-events: none; opacity: var(--cg-opacity-50); }\n    .loading-spinner {\n      width: var(--cg-spacing-20);\n      height: var(--cg-spacing-20);\n      flex-shrink: 0;\n      border: var(--cg-border-width-100) solid var(--cg-color-loading-spinner-secondary);\n      border-top-color: var(--cg-color-loading-spinner-primary);\n      border-radius: var(--cg-border-radius-full);\n      animation: cg-radio-spin var(--cg-transition-duration-slow) linear infinite;\n    }\n    @keyframes cg-radio-spin {\n      to { transform: rotate(360deg); }\n    }\n\n    /* Text */\n    .text-group { display: flex; flex-direction: column; gap: var(--cg-spacing-2); }\n    .label-text {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-base-text);\n      line-height: var(--cg-line-height-snug);\n    }\n    .description {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n      line-height: var(--cg-line-height-snug);\n    }\n  `];\n\n  @property() label = '';\n  @property() description = '';\n  @property({ reflect: true }) name = '';\n  @property() value = '';\n  @property({ type: Boolean }) checked = false;\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ type: Boolean, reflect: true }) error = false;\n  @property({ type: Boolean, reflect: true }) success = false;\n  @property({ type: Boolean, reflect: true }) loading = false;\n  @property({ type: Boolean }) required = false;\n  @property({ reflect: true }) variant: 'dot' | 'tick' = 'dot';\n\n  /** Roving tabindex slot managed by cg-radio-group; standalone radios stay tabbable. */\n  @property({ type: Number }) groupTabIndex = 0;\n\n  override updated(changed: PropertyValues) {\n    super.updated(changed);\n    if (changed.has('checked') || changed.has('value')) {\n      this._internals?.setFormValue(this.checked ? this.value : null);\n    }\n    if (changed.has('required') || changed.has('checked')) {\n      if (this.required && !this.checked) {\n        this._internals?.setValidity({ valueMissing: true }, 'This field is required');\n      } else {\n        this._internals?.setValidity({});\n      }\n    }\n  }\n\n  formResetCallback() {\n    this.checked = this.hasAttribute('checked');\n  }\n\n  formStateRestoreCallback(state: string) {\n    this.checked = state === this.value;\n  }\n\n  private _select() {\n    if (this.disabled || this.loading || this.checked) return;\n    this.checked = true;\n    this.dispatchEvent(new CustomEvent('cg-change', {\n      detail: { value: this.value, checked: true },\n      bubbles: true, composed: true,\n    }));\n  }\n\n  private _renderIndicator() {\n    if (!this.checked) return nothing;\n    if (this.variant === 'tick') {\n      return html`\n        <svg class=\"tick-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path class=\"tick-path\" d=\"M20 6L9 17l-5-5\"></path>\n        </svg>\n      `;\n    }\n    return html`<span class=\"dot\"></span>`;\n  }\n\n  override render() {\n    return html`\n      <label\n        tabindex=${this.disabled ? '-1' : String(this.groupTabIndex)}\n        role=\"radio\"\n        aria-checked=${String(this.checked)}\n        aria-disabled=${String(this.disabled)}\n        aria-required=${this.required ? 'true' : 'false'}\n        aria-busy=${this.loading ? 'true' : 'false'}\n        @click=${this._select}\n        @keydown=${(e: KeyboardEvent) => { if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); this._select(); } }}\n      >\n        <input type=\"radio\" .checked=${this.checked}\n          ?disabled=${this.disabled} name=${this.name} value=${this.value}\n          tabindex=\"-1\" aria-hidden=\"true\"\n          @click=${(e: Event) => e.stopPropagation()} />\n\n        ${this.loading ? html`<span class=\"loading-spinner\" aria-hidden=\"true\"></span>` : html`\n        <span class=\"circle ${this.checked ? 'checked' : ''}\">\n          ${this._renderIndicator()}\n        </span>`}\n\n        ${this.label ? html`\n          <span class=\"text-group\">\n            <span class=\"label-text\">${this.label}</span>\n            ${this.description ? html`<span class=\"description\">${this.description}</span>` : nothing}\n          </span>\n        ` : nothing}\n      </label>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap { 'cg-radio': CgRadio; }\n}\n"],"names":["CgRadio","LitElement","changed","state","html","nothing","e","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/components/cg-radio-group/cg-radio-group.d.ts

@@ -30,7 +30,13 @@ export declare class CgRadioGroup extends LitElement {
     disabled: boolean;
     /** Layout direction */
     orientation: 'vertical' | 'horizontal';
+    /** Group-level error state, propagated to every child radio */
+    error: boolean;
     private _radios;
+    /** Radios WE disabled via group disabled — so re-enabling is reversible
+     *  without clobbering individually-disabled radios. */
+    private _groupDisabled;
+    private _appliedName;
     private _getRadios;
     private _syncRadios;
     private _updateTabindex;

package/dist/components/cg-radio-group/cg-radio-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cg-radio-group.d.ts","sourceRoot":"","sources":["../../../src/components/cg-radio-group/cg-radio-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAKrD;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,4BAgBnB;IAEH,uCAAuC;IAC3B,IAAI,SAAM;IAEtB,+BAA+B;IACnB,KAAK,SAAM;IAEvB,6BAA6B;IACjB,KAAK,SAAM;IAEvB,gCAAgC;IACY,QAAQ,UAAS;IAE7D,uBAAuB;IACM,WAAW,EAAE,UAAU,GAAG,YAAY,CAAc;IAEjF,OAAO,CAAC,OAAO,CAAiB;IAEhC,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,eAAe;IAYvB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,aAAa;IAsBrB,OAAO,CAAC,cAAc;IAuCtB,OAAO,CAAC,YAAY;IAiBX,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAMrC,MAAM;CAahB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAAG,gBAAgB,EAAE,YAAY,CAAC;KAAE;CACpE"}
+{"version":3,"file":"cg-radio-group.d.ts","sourceRoot":"","sources":["../../../src/components/cg-radio-group/cg-radio-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAKrD;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,4BAuBnB;IAEH,uCAAuC;IAC3B,IAAI,SAAM;IAEtB,+BAA+B;IACnB,KAAK,SAAM;IAEvB,6BAA6B;IACjB,KAAK,SAAM;IAEvB,gCAAgC;IACY,QAAQ,UAAS;IAE7D,uBAAuB;IACM,WAAW,EAAE,UAAU,GAAG,YAAY,CAAc;IAEjF,+DAA+D;IACnB,KAAK,UAAS;IAE1D,OAAO,CAAC,OAAO,CAAiB;IAChC;2DACuD;IACvD,OAAO,CAAC,cAAc,CAA0B;IAChD,OAAO,CAAC,YAAY,CAAS;IAE7B,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,WAAW;IA0BnB,OAAO,CAAC,eAAe;IAYvB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,aAAa;IAuBrB,OAAO,CAAC,cAAc;IAwCtB,OAAO,CAAC,YAAY;IAiBX,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAMrC,MAAM;CAehB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAAG,gBAAgB,EAAE,YAAY,CAAC;KAAE;CACpE"}

package/dist/components/cg-radio-group/cg-radio-group.js

@@ -1,14 +1,14 @@
-import { css as h, LitElement as c, nothing as u, html as p } from "lit";
-import { property as d, customElement as f } from "lit/decorators.js";
-import { h as g, r as v } from "../../chunks/premium.css-9I4kHrsl.js";
-var b = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, l = (e, t, o, s) => {
-  for (var a = s > 1 ? void 0 : s ? _(t, o) : t, i = e.length - 1, n; i >= 0; i--)
-    (n = e[i]) && (a = (s ? n(t, o, a) : n(a)) || a);
-  return s && a && b(t, o, a), a;
+import { css as p, LitElement as f, nothing as c, html as u } from "lit";
+import { property as d, customElement as g } from "lit/decorators.js";
+import { h as b, r as v } from "../../chunks/premium.css-DHekUEUt.js";
+var _ = Object.defineProperty, m = Object.getOwnPropertyDescriptor, n = (e, t, o, s) => {
+  for (var a = s > 1 ? void 0 : s ? m(t, o) : t, r = e.length - 1, l; r >= 0; r--)
+    (l = e[r]) && (a = (s ? l(t, o, a) : l(a)) || a);
+  return s && a && _(t, o, a), a;
 };
-let r = class extends c {
+let i = class extends f {
   constructor() {
-    super(...arguments), this.name = "", this.value = "", this.label = "", this.disabled = !1, this.orientation = "vertical", this._radios = [];
+    super(...arguments), this.name = "", this.value = "", this.label = "", this.disabled = !1, this.orientation = "vertical", this.error = !1, this._radios = [], this._groupDisabled = /* @__PURE__ */ new WeakSet(), this._appliedName = !1;
   }
   _getRadios() {
     const e = this.shadowRoot?.querySelector("slot");
@@ -17,7 +17,7 @@ let r = class extends c {
   _syncRadios() {
     this._radios = this._getRadios();
     for (const e of this._radios)
-      this.name && (e.name = this.name), this.disabled && (e.disabled = !0), e.checked = e.value === this.value;
+      this.name ? (e.name = this.name, this._appliedName = !0) : this._appliedName && (e.name = ""), this.disabled ? e.disabled || (this._groupDisabled.add(e), e.disabled = !0) : this._groupDisabled.has(e) && (this._groupDisabled.delete(e), e.disabled = !1), e.error = this.error, e.checked = e.value === this.value;
     this._updateTabindex();
   }
   _updateTabindex() {
@@ -25,12 +25,13 @@ let r = class extends c {
     if (e.length === 0) return;
     const o = e.find((s) => s.checked) ?? e[0];
     for (const s of this._radios)
-      s.tabIndex = s === o ? 0 : -1;
+      s.groupTabIndex = s === o ? 0 : -1;
   }
   _handleSlotChange() {
     this._syncRadios();
   }
   _handleChange(e) {
+    e.stopPropagation();
     const t = e.detail;
     if (!t) return;
     const o = t.value;
@@ -46,31 +47,31 @@ let r = class extends c {
     }
   }
   _handleKeydown(e) {
-    const t = this._radios.filter((n) => !n.disabled);
+    const t = this._radios.filter((h) => !h.disabled);
     if (t.length === 0 || !["ArrowDown", "ArrowRight", "ArrowUp", "ArrowLeft", "Home", "End"].includes(e.key)) return;
     e.preventDefault();
-    const s = t.findIndex((n) => n.checked);
-    let a;
+    const s = t.findIndex((h) => h.matches(":focus-within")), a = s !== -1 ? s : t.findIndex((h) => h.checked);
+    let r;
     switch (e.key) {
       case "ArrowDown":
       case "ArrowRight":
-        a = s === -1 ? 0 : (s + 1) % t.length;
+        r = a === -1 ? 0 : (a + 1) % t.length;
         break;
       case "ArrowUp":
       case "ArrowLeft":
-        a = s === -1 ? t.length - 1 : (s - 1 + t.length) % t.length;
+        r = a === -1 ? t.length - 1 : (a - 1 + t.length) % t.length;
         break;
       case "Home":
-        a = 0;
+        r = 0;
         break;
       case "End":
-        a = t.length - 1;
+        r = t.length - 1;
         break;
       default:
         return;
     }
-    const i = t[a];
-    i && (this._selectRadio(i), i.focus());
+    const l = t[r];
+    l && (this._selectRadio(l), l.focus());
   }
   _selectRadio(e) {
     if (e.value !== this.value) {
@@ -88,11 +89,13 @@ let r = class extends c {
     (e.has("value") || e.has("name") || e.has("disabled")) && this._syncRadios();
   }
   render() {
-    return p`
+    return u`
+      ${this.label ? u`<div class="label" id="group-label">${this.label}</div>` : c}
       <div
         class="group"
         role="radiogroup"
-        aria-label=${this.label || u}
+        aria-labelledby=${this.label ? "group-label" : c}
+        aria-orientation=${this.orientation}
         @cg-change=${this._handleChange}
         @keydown=${this._handleKeydown}
       >
@@ -101,7 +104,7 @@ let r = class extends c {
     `;
   }
 };
-r.styles = [g, v, h`
+i.styles = [b, v, p`
     :host {
       display: block;
     }
@@ -117,26 +120,36 @@ r.styles = [g, v, h`
       gap: var(--cg-spacing-16);
       flex-wrap: wrap;
     }
+
+    .label {
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-medium);
+      color: var(--cg-color-surface-base-text);
+      margin-bottom: var(--cg-spacing-8);
+    }
   `];
-l([
+n([
   d()
-], r.prototype, "name", 2);
-l([
+], i.prototype, "name", 2);
+n([
   d()
-], r.prototype, "value", 2);
-l([
+], i.prototype, "value", 2);
+n([
   d()
-], r.prototype, "label", 2);
-l([
+], i.prototype, "label", 2);
+n([
   d({ type: Boolean, reflect: !0 })
-], r.prototype, "disabled", 2);
-l([
+], i.prototype, "disabled", 2);
+n([
   d({ reflect: !0 })
-], r.prototype, "orientation", 2);
-r = l([
-  f("cg-radio-group")
-], r);
+], i.prototype, "orientation", 2);
+n([
+  d({ type: Boolean, reflect: !0 })
+], i.prototype, "error", 2);
+i = n([
+  g("cg-radio-group")
+], i);
 export {
-  r as CgRadioGroup
+  i as CgRadioGroup
 };
 //# sourceMappingURL=cg-radio-group.js.map

package/dist/components/cg-radio-group/cg-radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"cg-radio-group.js","sources":["../../../src/components/cg-radio-group/cg-radio-group.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\nimport type { CgRadio } from '../cg-radio/cg-radio.js';\n\n/**\n * @element cg-radio-group\n * Manages a group of `<cg-radio>` elements with WAI-ARIA keyboard navigation.\n *\n * @example\n * ```html\n * <cg-radio-group name=\"color\" value=\"red\" label=\"Pick a color\">\n *   <cg-radio label=\"Red\" value=\"red\"></cg-radio>\n *   <cg-radio label=\"Blue\" value=\"blue\"></cg-radio>\n * </cg-radio-group>\n * ```\n *\n * @slot - Default slot for `<cg-radio>` children\n *\n * @fires {CustomEvent<{value: string}>} cg-change - When the selected value changes\n *\n * @cssprop [--cg-spacing-8=8px] - Gap between radio items (vertical)\n * @cssprop [--cg-spacing-16=16px] - Gap between radio items (horizontal)\n */\n@customElement('cg-radio-group')\nexport class CgRadioGroup extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      display: block;\n    }\n\n    .group {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-8);\n    }\n\n    :host([orientation=\"horizontal\"]) .group {\n      flex-direction: row;\n      gap: var(--cg-spacing-16);\n      flex-wrap: wrap;\n    }\n  `];\n\n  /** Shared name for all child radios */\n  @property() name = '';\n\n  /** Currently selected value */\n  @property() value = '';\n\n  /** Accessible group label */\n  @property() label = '';\n\n  /** Disables all child radios */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Layout direction */\n  @property({ reflect: true }) orientation: 'vertical' | 'horizontal' = 'vertical';\n\n  private _radios: CgRadio[] = [];\n\n  private _getRadios(): CgRadio[] {\n    const slot = this.shadowRoot?.querySelector('slot');\n    if (!slot) return [];\n    return slot.assignedElements({ flatten: true })\n      .filter((el): el is CgRadio => el.tagName === 'CG-RADIO') as CgRadio[];\n  }\n\n  private _syncRadios() {\n    this._radios = this._getRadios();\n\n    for (const radio of this._radios) {\n      if (this.name) radio.name = this.name;\n      if (this.disabled) radio.disabled = true;\n      radio.checked = radio.value === this.value;\n    }\n\n    this._updateTabindex();\n  }\n\n  private _updateTabindex() {\n    const enabledRadios = this._radios.filter(r => !r.disabled);\n    if (enabledRadios.length === 0) return;\n\n    const selected = enabledRadios.find(r => r.checked);\n    const focusTarget = selected ?? enabledRadios[0];\n\n    for (const radio of this._radios) {\n      radio.tabIndex = radio === focusTarget ? 0 : -1;\n    }\n  }\n\n  private _handleSlotChange() {\n    this._syncRadios();\n  }\n\n  private _handleChange(e: Event) {\n    const detail = (e as CustomEvent).detail;\n    if (!detail) return;\n\n    const newValue = detail.value as string;\n    if (newValue === this.value) return;\n\n    this.value = newValue;\n\n    // Deselect all others and update tabindex\n    for (const radio of this._radios) {\n      radio.checked = radio.value === newValue;\n    }\n    this._updateTabindex();\n\n    this.dispatchEvent(new CustomEvent('cg-change', {\n      detail: { value: newValue },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _handleKeydown(e: KeyboardEvent) {\n    const enabledRadios = this._radios.filter(r => !r.disabled);\n    if (enabledRadios.length === 0) return;\n\n    const keys = ['ArrowDown', 'ArrowRight', 'ArrowUp', 'ArrowLeft', 'Home', 'End'];\n    if (!keys.includes(e.key)) return;\n\n    e.preventDefault();\n\n    const currentIndex = enabledRadios.findIndex(r => r.checked);\n    let nextIndex: number;\n\n    switch (e.key) {\n      case 'ArrowDown':\n      case 'ArrowRight':\n        nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % enabledRadios.length;\n        break;\n      case 'ArrowUp':\n      case 'ArrowLeft':\n        nextIndex = currentIndex === -1\n          ? enabledRadios.length - 1\n          : (currentIndex - 1 + enabledRadios.length) % enabledRadios.length;\n        break;\n      case 'Home':\n        nextIndex = 0;\n        break;\n      case 'End':\n        nextIndex = enabledRadios.length - 1;\n        break;\n      default:\n        return;\n    }\n\n    const target = enabledRadios[nextIndex];\n    if (!target) return;\n    this._selectRadio(target);\n    target.focus();\n  }\n\n  private _selectRadio(radio: CgRadio) {\n    if (radio.value === this.value) return;\n\n    this.value = radio.value;\n\n    for (const r of this._radios) {\n      r.checked = r === radio;\n    }\n    this._updateTabindex();\n\n    this.dispatchEvent(new CustomEvent('cg-change', {\n      detail: { value: radio.value },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('value') || changed.has('name') || changed.has('disabled')) {\n      this._syncRadios();\n    }\n  }\n\n  override render() {\n    return html`\n      <div\n        class=\"group\"\n        role=\"radiogroup\"\n        aria-label=${this.label || nothing}\n        @cg-change=${this._handleChange}\n        @keydown=${this._handleKeydown}\n      >\n        <slot @slotchange=${this._handleSlotChange}></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap { 'cg-radio-group': CgRadioGroup; }\n}\n"],"names":["CgRadioGroup","LitElement","slot","el","radio","enabledRadios","r","focusTarget","detail","newValue","currentIndex","nextIndex","target","changed","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}
+{"version":3,"file":"cg-radio-group.js","sources":["../../../src/components/cg-radio-group/cg-radio-group.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\nimport type { CgRadio } from '../cg-radio/cg-radio.js';\n\n/**\n * @element cg-radio-group\n * Manages a group of `<cg-radio>` elements with WAI-ARIA keyboard navigation.\n *\n * @example\n * ```html\n * <cg-radio-group name=\"color\" value=\"red\" label=\"Pick a color\">\n *   <cg-radio label=\"Red\" value=\"red\"></cg-radio>\n *   <cg-radio label=\"Blue\" value=\"blue\"></cg-radio>\n * </cg-radio-group>\n * ```\n *\n * @slot - Default slot for `<cg-radio>` children\n *\n * @fires {CustomEvent<{value: string}>} cg-change - When the selected value changes\n *\n * @cssprop [--cg-spacing-8=8px] - Gap between radio items (vertical)\n * @cssprop [--cg-spacing-16=16px] - Gap between radio items (horizontal)\n */\n@customElement('cg-radio-group')\nexport class CgRadioGroup extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      display: block;\n    }\n\n    .group {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-8);\n    }\n\n    :host([orientation=\"horizontal\"]) .group {\n      flex-direction: row;\n      gap: var(--cg-spacing-16);\n      flex-wrap: wrap;\n    }\n\n    .label {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-base-text);\n      margin-bottom: var(--cg-spacing-8);\n    }\n  `];\n\n  /** Shared name for all child radios */\n  @property() name = '';\n\n  /** Currently selected value */\n  @property() value = '';\n\n  /** Accessible group label */\n  @property() label = '';\n\n  /** Disables all child radios */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Layout direction */\n  @property({ reflect: true }) orientation: 'vertical' | 'horizontal' = 'vertical';\n\n  /** Group-level error state, propagated to every child radio */\n  @property({ type: Boolean, reflect: true }) error = false;\n\n  private _radios: CgRadio[] = [];\n  /** Radios WE disabled via group disabled — so re-enabling is reversible\n   *  without clobbering individually-disabled radios. */\n  private _groupDisabled = new WeakSet<CgRadio>();\n  private _appliedName = false;\n\n  private _getRadios(): CgRadio[] {\n    const slot = this.shadowRoot?.querySelector('slot');\n    if (!slot) return [];\n    return slot.assignedElements({ flatten: true })\n      .filter((el): el is CgRadio => el.tagName === 'CG-RADIO') as CgRadio[];\n  }\n\n  private _syncRadios() {\n    this._radios = this._getRadios();\n\n    for (const radio of this._radios) {\n      if (this.name) {\n        radio.name = this.name;\n        this._appliedName = true;\n      } else if (this._appliedName) {\n        radio.name = '';\n      }\n      if (this.disabled) {\n        if (!radio.disabled) {\n          this._groupDisabled.add(radio);\n          radio.disabled = true;\n        }\n      } else if (this._groupDisabled.has(radio)) {\n        this._groupDisabled.delete(radio);\n        radio.disabled = false;\n      }\n      radio.error = this.error;\n      radio.checked = radio.value === this.value;\n    }\n\n    this._updateTabindex();\n  }\n\n  private _updateTabindex() {\n    const enabledRadios = this._radios.filter(r => !r.disabled);\n    if (enabledRadios.length === 0) return;\n\n    const selected = enabledRadios.find(r => r.checked);\n    const focusTarget = selected ?? enabledRadios[0];\n\n    for (const radio of this._radios) {\n      radio.groupTabIndex = radio === focusTarget ? 0 : -1;\n    }\n  }\n\n  private _handleSlotChange() {\n    this._syncRadios();\n  }\n\n  private _handleChange(e: Event) {\n    e.stopPropagation();\n    const detail = (e as CustomEvent).detail;\n    if (!detail) return;\n\n    const newValue = detail.value as string;\n    if (newValue === this.value) return;\n\n    this.value = newValue;\n\n    // Deselect all others and update tabindex\n    for (const radio of this._radios) {\n      radio.checked = radio.value === newValue;\n    }\n    this._updateTabindex();\n\n    this.dispatchEvent(new CustomEvent('cg-change', {\n      detail: { value: newValue },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _handleKeydown(e: KeyboardEvent) {\n    const enabledRadios = this._radios.filter(r => !r.disabled);\n    if (enabledRadios.length === 0) return;\n\n    const keys = ['ArrowDown', 'ArrowRight', 'ArrowUp', 'ArrowLeft', 'Home', 'End'];\n    if (!keys.includes(e.key)) return;\n\n    e.preventDefault();\n\n    const focusedIndex = enabledRadios.findIndex(r => r.matches(':focus-within'));\n    const currentIndex = focusedIndex !== -1 ? focusedIndex : enabledRadios.findIndex(r => r.checked);\n    let nextIndex: number;\n\n    switch (e.key) {\n      case 'ArrowDown':\n      case 'ArrowRight':\n        nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % enabledRadios.length;\n        break;\n      case 'ArrowUp':\n      case 'ArrowLeft':\n        nextIndex = currentIndex === -1\n          ? enabledRadios.length - 1\n          : (currentIndex - 1 + enabledRadios.length) % enabledRadios.length;\n        break;\n      case 'Home':\n        nextIndex = 0;\n        break;\n      case 'End':\n        nextIndex = enabledRadios.length - 1;\n        break;\n      default:\n        return;\n    }\n\n    const target = enabledRadios[nextIndex];\n    if (!target) return;\n    this._selectRadio(target);\n    target.focus();\n  }\n\n  private _selectRadio(radio: CgRadio) {\n    if (radio.value === this.value) return;\n\n    this.value = radio.value;\n\n    for (const r of this._radios) {\n      r.checked = r === radio;\n    }\n    this._updateTabindex();\n\n    this.dispatchEvent(new CustomEvent('cg-change', {\n      detail: { value: radio.value },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('value') || changed.has('name') || changed.has('disabled')) {\n      this._syncRadios();\n    }\n  }\n\n  override render() {\n    return html`\n      ${this.label ? html`<div class=\"label\" id=\"group-label\">${this.label}</div>` : nothing}\n      <div\n        class=\"group\"\n        role=\"radiogroup\"\n        aria-labelledby=${this.label ? 'group-label' : nothing}\n        aria-orientation=${this.orientation}\n        @cg-change=${this._handleChange}\n        @keydown=${this._handleKeydown}\n      >\n        <slot @slotchange=${this._handleSlotChange}></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap { 'cg-radio-group': CgRadioGroup; }\n}\n"],"names":["CgRadioGroup","LitElement","slot","el","radio","enabledRadios","r","focusTarget","detail","newValue","focusedIndex","currentIndex","nextIndex","target","changed","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"cg-rating.d.ts","sourceRoot":"","sources":["../../../src/components/cg-rating/cg-rating.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;;;;;;;GAWG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,4BA4DnB;IAEH,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAAC,CAAmB;;IASV,KAAK,SAAK;IACV,GAAG,SAAK;IACR,SAAS,EAAE,GAAG,GAAG,CAAC,CAAK;IACP,QAAQ,UAAS;IACjB,QAAQ,UAAS;IAChC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IACjD,IAAI,SAAM;IAEb,OAAO,CAAC,WAAW,CAAK;IAExB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAMrD,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,YAAY;IAmBpB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,cAAc;IA6Bb,MAAM;CAyChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
+{"version":3,"file":"cg-rating.d.ts","sourceRoot":"","sources":["../../../src/components/cg-rating/cg-rating.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;;;;;;;GAWG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,4BA4DnB;IAEH,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAAC,CAAmB;;IASV,KAAK,SAAK;IACV,GAAG,SAAK;IACR,SAAS,EAAE,GAAG,GAAG,CAAC,CAAK;IACP,QAAQ,UAAS;IACjB,QAAQ,UAAS;IAChC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IACjD,IAAI,SAAM;IAEb,OAAO,CAAC,WAAW,CAAK;IAExB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAMrD,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,YAAY;IAmBpB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,cAAc;IA6Bb,MAAM;CA2ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}