@cognivo/components 0.8.0 → 0.8.2

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

@@ -1 +1 @@
-{"version":3,"file":"cg-slider.js","sources":["../../../src/components/cg-slider/cg-slider.ts"],"sourcesContent":["import { LitElement, html, css, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/**\n * <cg-slider> — Range slider with floating tooltip, filled track, and spring interactions.\n *\n * @fires {CustomEvent<{value: number}>} cg-change - On value change\n */\n@customElement('cg-slider')\nexport class CgSlider 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    .slider-wrapper { padding: var(--cg-spacing-8) 0; }\n\n    .header {\n      display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--cg-spacing-8);\n    }\n    .label { font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-medium); color: var(--cg-color-surface-base-text); }\n    .value-display { font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-semibold); color: var(--cg-color-action-primary-background-default); transition: transform var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-out); }\n    .value-display.active { transform: scale(1.1); }\n\n    /* ── Track container ── */\n    .track-container {\n      position: relative;\n      height: 44px;\n      display: flex;\n      align-items: center;\n    }\n\n    /* ── Track ── */\n    .track {\n      position: relative;\n      width: 100%;\n      height: var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-slider-track-background);\n      cursor: pointer;\n    }\n\n    /* Filled portion */\n    .track-fill {\n      position: absolute;\n      top: 0;\n      left: 0;\n      height: 100%;\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-slider-track-filled);\n      transition: width var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      pointer-events: none;\n    }\n    .track-fill.dragging {\n      transition: none;\n    }\n\n    /* ── Thumb ── */\n    .thumb-wrapper {\n      position: absolute;\n      top: 50%;\n      transform: translate(-50%, -50%);\n      z-index: 2;\n      pointer-events: none;\n      transition: left var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .thumb-wrapper.dragging {\n      transition: none;\n    }\n    .thumb {\n      width: var(--cg-spacing-20);\n      height: var(--cg-spacing-20);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-slider-thumb-background);\n      border: var(--cg-border-width-100) solid var(--cg-color-surface-cards-border);\n      box-shadow: var(--cg-elevation-1);\n      transition: transform var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out), box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      pointer-events: auto;\n      cursor: grab;\n    }\n    .thumb:hover {\n      transform: scale(1.15);\n      box-shadow: var(--cg-elevation-2);\n    }\n    .thumb.dragging {\n      cursor: grabbing;\n      transform: scale(1.2);\n      box-shadow: var(--cg-elevation-3);\n    }\n\n    /* Focus ring */\n    .thumb:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n\n    /* ── Floating tooltip ── */\n    .tooltip {\n      position: absolute;\n      bottom: calc(100% + var(--cg-spacing-12));\n      left: 50%;\n      transform: translateX(-50%) scale(0.7) rotate(0deg);\n      transform-origin: center bottom;\n      padding: var(--cg-spacing-6) var(--cg-spacing-12);\n      background: var(--cg-color-tooltip-background);\n      color: var(--cg-color-tooltip-text);\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n      border-radius: var(--cg-border-radius-100);\n      white-space: nowrap;\n      pointer-events: none;\n      opacity: 0;\n      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default), transform var(--cg-transition-duration-slow) var(--cg-transition-easing-spring);\n    }\n    .tooltip::after {\n      content: '';\n      position: absolute;\n      top: 100%;\n      left: 50%;\n      transform: translateX(-50%);\n      border: var(--cg-spacing-4) solid transparent;\n      border-top-color: var(--cg-color-tooltip-arrow);\n    }\n    .tooltip.visible {\n      opacity: 1;\n      transform: translateX(-50%) scale(1) rotate(var(--_tilt, 0deg));\n    }\n\n    /* ── Hidden native input — drives keyboard ── */\n    input[type=\"range\"] {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      top: 0;\n      left: 0;\n      opacity: 0;\n      cursor: pointer;\n      margin: 0;\n      z-index: 3;\n    }\n    input[type=\"range\"]:disabled { cursor: not-allowed; }\n\n    /* ── Disabled ── */\n    :host([disabled]) .track-container { opacity: 0.5; pointer-events: none; }\n\n    /* ── Error ── */\n    :host([error]) .track-fill { background: var(--cg-color-status-error-text-default); }\n    :host([error]) .label { color: var(--cg-color-status-error-text-default); }\n    :host([error]) .value-display { color: var(--cg-color-status-error-text-default); }\n\n    /* ── Success ── */\n    :host([success]) .track-fill { background: var(--cg-color-status-success-text-default); }\n    :host([success]) .label { color: var(--cg-color-status-success-text-default); }\n    :host([success]) .value-display { color: var(--cg-color-status-success-text-default); }\n\n    /* ── Loading ── */\n    :host([loading]) .track-container { pointer-events: none; opacity: 0.5; }\n    .loading-bar {\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%);\n      left: 0;\n      height: var(--cg-spacing-6);\n      width: 40%;\n      background: var(--cg-color-slider-track-filled);\n      border-radius: var(--cg-border-radius-full);\n      animation: cg-slider-loading 1.2s ease-in-out infinite;\n    }\n    @keyframes cg-slider-loading {\n      0% { left: 0; width: 40%; }\n      50% { left: 60%; width: 40%; }\n      100% { left: 0; width: 40%; }\n    }\n\n    .range-labels { display: flex; justify-content: space-between; margin-top: var(--cg-spacing-4); }\n    .range-label { font-size: var(--cg-font-size-xs); color: var(--cg-color-slider-mark-background); }\n\n    /* ── Simple variant — no fill, no tooltip ── */\n    :host([variant=\"simple\"]) .track-fill { display: none; }\n    :host([variant=\"simple\"]) .tooltip { display: none; }\n\n    /* ── Toggle variant — thick pill track, thumb inside ── */\n    :host([variant=\"toggle\"]) .track {\n      height: var(--cg-spacing-24);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n    }\n    :host([variant=\"toggle\"]) .thumb {\n      width: var(--cg-spacing-20);\n      height: var(--cg-spacing-20);\n      border: var(--cg-border-width-50) solid var(--cg-overlay-accent-subtle);\n      box-shadow: var(--cg-elevation-1);\n    }\n    :host([variant=\"toggle\"]) .thumb:hover {\n      transform: scale(1.05);\n    }\n    :host([variant=\"toggle\"]) .thumb.dragging {\n      transform: scaleX(1.2);\n    }\n\n    :host([variant=\"toggle\"][size=\"sm\"]) .track { height: var(--cg-spacing-16); }\n    :host([variant=\"toggle\"][size=\"sm\"]) .thumb { width: var(--cg-spacing-12); height: var(--cg-spacing-12); }\n\n    :host([variant=\"toggle\"][size=\"lg\"]) .track { height: var(--cg-spacing-32); }\n    :host([variant=\"toggle\"][size=\"lg\"]) .thumb { width: var(--cg-spacing-24); height: var(--cg-spacing-24); }\n\n    /* Size variants (default + simple) */\n    :host([size=\"sm\"]:not([variant=\"toggle\"])) .track { height: var(--cg-spacing-4); }\n    :host([size=\"sm\"]:not([variant=\"toggle\"])) .thumb { width: var(--cg-spacing-16); height: var(--cg-spacing-16); }\n\n    :host([size=\"lg\"]:not([variant=\"toggle\"])) .track { height: var(--cg-spacing-8); }\n    :host([size=\"lg\"]:not([variant=\"toggle\"])) .thumb { width: var(--cg-spacing-24); height: var(--cg-spacing-24); }\n  `];\n\n  @property({ reflect: true }) variant: 'default' | 'simple' | 'toggle' = 'default';\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n  @property() label = '';\n  @property() name = '';\n  @property({ type: Number }) value = 50;\n  @property({ type: Number }) min = 0;\n  @property({ type: Number }) max = 100;\n  @property({ type: Number }) step = 1;\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 }) showValue = true;\n  @property({ type: Boolean }) showRange = false;\n  @property({ type: Boolean }) showTooltip = true;\n  @property() unit = '';\n\n  @state() private _dragging = false;\n  @state() private _hovering = false;\n  @state() private _tilt = 0;\n  private _prevValue = 0;\n  private _tiltTimer: ReturnType<typeof setTimeout> | null = null;\n\n  override updated(changed: PropertyValues) {\n    super.updated(changed);\n    if (changed.has('value')) {\n      this._internals?.setFormValue(String(this.value));\n    }\n  }\n\n  formResetCallback() {\n    const attr = this.getAttribute('value');\n    this.value = attr !== null ? Number(attr) : 50;\n  }\n\n  formStateRestoreCallback(state: string) {\n    this.value = Number(state);\n  }\n\n  private _getPercent(): number {\n    return ((this.value - this.min) / (this.max - this.min)) * 100;\n  }\n\n  private _handleInput(e: Event) {\n    const newVal = Number((e.target as HTMLInputElement).value);\n    const delta = newVal - this._prevValue;\n    this._prevValue = newVal;\n\n    // Tilt tooltip based on drag direction — clamp to ±20deg\n    const tiltAmount = Math.max(-20, Math.min(20, delta * 4));\n    this._tilt = tiltAmount;\n\n    // Settle back to 0 after a pause\n    if (this._tiltTimer) clearTimeout(this._tiltTimer);\n    this._tiltTimer = setTimeout(() => { this._tilt = 0; }, 150);\n\n    this.value = newVal;\n    this.dispatchEvent(new CustomEvent('cg-change', { detail: { value: this.value }, bubbles: true, composed: true }));\n  }\n\n  private _onPointerDown() { this._dragging = true; this._prevValue = this.value; }\n  private _onPointerUp() { this._dragging = false; this._tilt = 0; }\n  private _onMouseEnter() { this._hovering = true; }\n  private _onMouseLeave() { this._hovering = false; this._dragging = false; }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    window.addEventListener('pointerup', this._onPointerUp);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    window.removeEventListener('pointerup', this._onPointerUp);\n  }\n\n  override render() {\n    const pct = this._getPercent();\n    const tooltipVisible = this.showTooltip && (this._hovering || this._dragging);\n\n    return html`\n      <div class=\"slider-wrapper\">\n        ${this.label || this.showValue ? html`\n          <div class=\"header\">\n            ${this.label ? html`<span class=\"label\">${this.label}</span>` : nothing}\n            ${this.showValue ? html`<span class=\"value-display ${this._dragging ? 'active' : ''}\">${this.value}${this.unit}</span>` : nothing}\n          </div>\n        ` : nothing}\n\n        <div class=\"track-container\"\n          @mouseenter=${this._onMouseEnter}\n          @mouseleave=${this._onMouseLeave}\n        >\n          <div class=\"track\">\n            <div class=\"track-fill ${this._dragging ? 'dragging' : ''}\" style=\"width: ${pct}%\"></div>\n          </div>\n\n          <div class=\"thumb-wrapper ${this._dragging ? 'dragging' : ''}\" style=\"left: ${pct}%; --_tilt: ${this._tilt}deg\">\n            <div class=\"thumb ${this._dragging ? 'dragging' : ''}\"\n              tabindex=${this.disabled ? '-1' : '0'}\n              role=\"slider\"\n              aria-valuenow=${this.value}\n              aria-valuemin=${this.min}\n              aria-valuemax=${this.max}\n              aria-label=${this.label || nothing}\n            >\n              ${this.showTooltip ? html`\n                <div class=\"tooltip ${tooltipVisible ? 'visible' : ''}\">${this.value}${this.unit}</div>\n              ` : nothing}\n            </div>\n          </div>\n\n          <input\n            type=\"range\"\n            .value=${String(this.value)}\n            min=${this.min}\n            max=${this.max}\n            step=${this.step}\n            ?disabled=${this.disabled || this.loading}\n            aria-hidden=\"true\"\n            tabindex=\"-1\"\n            name=${this.name || nothing}\n            @input=${this._handleInput}\n            @pointerdown=${this._onPointerDown}\n          />\n\n          ${this.loading ? html`<div class=\"loading-bar\" aria-hidden=\"true\"></div>` : nothing}\n        </div>\n\n        ${this.showRange ? html`\n          <div class=\"range-labels\">\n            <span class=\"range-label\">${this.min}${this.unit}</span>\n            <span class=\"range-label\">${this.max}${this.unit}</span>\n          </div>\n        ` : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap { 'cg-slider': CgSlider; }\n}\n"],"names":["CgSlider","LitElement","changed","attr","state","e","newVal","delta","tiltAmount","pct","tooltipVisible","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}
+{"version":3,"file":"cg-slider.js","sources":["../../../src/components/cg-slider/cg-slider.ts"],"sourcesContent":["import { LitElement, html, css, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/**\n * <cg-slider> — Range slider with floating tooltip, filled track, and spring interactions.\n *\n * @fires {CustomEvent<{value: number}>} cg-change - On value change\n */\n@customElement('cg-slider')\nexport class CgSlider 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    .slider-wrapper { padding: var(--cg-spacing-8) 0; }\n\n    .header {\n      display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--cg-spacing-8);\n    }\n    .label { font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-medium); color: var(--cg-color-surface-base-text); }\n    .value-display { font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-semibold); color: var(--cg-color-accent-text); transition: transform var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-out); }\n    .value-display.active { transform: scale(1.1); }\n\n    /* ── Track container ── */\n    .track-container {\n      position: relative;\n      height: var(--cg-spacing-48);\n      display: flex;\n      align-items: center;\n    }\n\n    /* ── Track ── */\n    .track {\n      position: relative;\n      width: 100%;\n      height: var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-slider-track-background);\n      cursor: pointer;\n    }\n\n    /* Filled portion */\n    .track-fill {\n      position: absolute;\n      top: 0;\n      left: 0;\n      height: 100%;\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-slider-track-filled);\n      transition: width var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      pointer-events: none;\n    }\n    .track-fill.dragging {\n      transition: none;\n    }\n\n    /* ── Thumb ── */\n    /* Private travel-inset var — keeps the thumb center inside the track at min/max\n       and aligned with the native input's inset thumb hotspot. */\n    :host { --_thumb-size: var(--cg-spacing-20); }\n    :host([size=\"sm\"]:not([variant=\"toggle\"])) { --_thumb-size: var(--cg-spacing-16); }\n    :host([size=\"lg\"]:not([variant=\"toggle\"])) { --_thumb-size: var(--cg-spacing-24); }\n    :host([variant=\"toggle\"][size=\"sm\"]) { --_thumb-size: var(--cg-spacing-12); }\n    :host([variant=\"toggle\"][size=\"lg\"]) { --_thumb-size: var(--cg-spacing-24); }\n\n    .thumb-wrapper {\n      position: absolute;\n      top: 50%;\n      transform: translate(-50%, -50%);\n      z-index: 2;\n      pointer-events: none;\n      transition: left var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .thumb-wrapper.dragging {\n      transition: none;\n    }\n    .thumb {\n      width: var(--cg-spacing-20);\n      height: var(--cg-spacing-20);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-slider-thumb-background);\n      border: var(--cg-border-width-100) solid var(--cg-color-slider-thumb-border);\n      box-shadow: var(--cg-elevation-1);\n      transition: transform var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out), box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      pointer-events: auto;\n    }\n    .track-container:hover .thumb:not(.dragging) {\n      transform: scale(1.15);\n      box-shadow: var(--cg-elevation-2);\n    }\n    .thumb.dragging {\n      transform: scale(1.2);\n      box-shadow: var(--cg-elevation-3);\n    }\n\n    /* Focus ring — native input is the accessible control; ring paints on the visual thumb.\n       :not(.dragging) keeps the ring above the container-hover rule in specificity. */\n    .track-container:has(input:focus-visible) .thumb:not(.dragging) {\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n    :host([error]) .track-container:has(input:focus-visible) .thumb:not(.dragging) {\n      box-shadow: 0 0 0 3px var(--cg-shadow-focus-error);\n    }\n    :host([success]) .track-container:has(input:focus-visible) .thumb:not(.dragging) {\n      box-shadow: 0 0 0 3px var(--cg-shadow-focus-success);\n    }\n\n    /* ── Floating tooltip ── */\n    .tooltip {\n      position: absolute;\n      bottom: calc(100% + var(--cg-spacing-12));\n      left: 50%;\n      transform: translateX(-50%) scale(0.7) rotate(0deg);\n      transform-origin: center bottom;\n      padding: var(--cg-spacing-6) var(--cg-spacing-12);\n      background: var(--cg-color-tooltip-background);\n      color: var(--cg-color-tooltip-text);\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n      border-radius: var(--cg-component-tooltip-radius);\n      white-space: nowrap;\n      pointer-events: none;\n      opacity: 0;\n      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default), transform var(--cg-transition-duration-slow) var(--cg-transition-easing-spring);\n    }\n    .tooltip::after {\n      content: '';\n      position: absolute;\n      top: 100%;\n      left: 50%;\n      transform: translateX(-50%);\n      border: var(--cg-spacing-4) solid transparent;\n      border-top-color: var(--cg-color-tooltip-arrow);\n    }\n    .tooltip.visible {\n      opacity: 1;\n      transform: translateX(-50%) scale(1) rotate(var(--_tilt, 0deg));\n    }\n\n    /* ── Hidden native input — drives keyboard ── */\n    input[type=\"range\"] {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      top: 0;\n      left: 0;\n      opacity: 0;\n      cursor: grab;\n      margin: 0;\n      z-index: 3;\n    }\n    .track-container:active input[type=\"range\"] { cursor: grabbing; }\n    input[type=\"range\"]:disabled { cursor: not-allowed; }\n\n    /* ── Disabled ── */\n    :host([disabled]) .track-container { opacity: var(--cg-opacity-50); pointer-events: none; }\n\n    /* ── Error ── */\n    :host([error]) .track-fill { background: var(--cg-color-status-error-text-default); }\n    :host([error]) .label { color: var(--cg-color-status-error-text-default); }\n    :host([error]) .value-display { color: var(--cg-color-status-error-text-default); }\n\n    /* ── Success ── */\n    :host([success]) .track-fill { background: var(--cg-color-status-success-text-default); }\n    :host([success]) .label { color: var(--cg-color-status-success-text-default); }\n    :host([success]) .value-display { color: var(--cg-color-status-success-text-default); }\n\n    /* ── Loading ── */\n    :host([loading]) .track-container { pointer-events: none; opacity: var(--cg-opacity-50); }\n    :host([loading]) .track-fill,\n    :host([loading]) .thumb-wrapper { display: none; }\n    .loading-bar {\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%);\n      left: 0;\n      height: var(--cg-spacing-6);\n      width: 40%;\n      background: var(--cg-color-slider-track-filled);\n      border-radius: var(--cg-border-radius-full);\n      animation: cg-slider-loading 1.2s var(--cg-transition-easing-ease-in-out) infinite;\n    }\n    @keyframes cg-slider-loading {\n      0% { left: 0; width: 40%; }\n      50% { left: 60%; width: 40%; }\n      100% { left: 0; width: 40%; }\n    }\n\n    .range-labels { display: flex; justify-content: space-between; margin-top: var(--cg-spacing-4); }\n    .range-label { font-size: var(--cg-font-size-xs); color: var(--cg-color-input-text-placeholder); }\n\n    /* ── Simple variant — no fill, no tooltip ── */\n    :host([variant=\"simple\"]) .track-fill { display: none; }\n    :host([variant=\"simple\"]) .tooltip { display: none; }\n\n    /* ── Toggle variant — thick pill track, thumb inside ── */\n    :host([variant=\"toggle\"]) .track {\n      height: var(--cg-spacing-24);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n    }\n    :host([variant=\"toggle\"]) .thumb {\n      width: var(--cg-spacing-20);\n      height: var(--cg-spacing-20);\n      border: var(--cg-border-width-50) solid var(--cg-color-slider-thumb-border);\n      box-shadow: var(--cg-elevation-1);\n    }\n    :host([variant=\"toggle\"]) .track-container:hover .thumb:not(.dragging) {\n      transform: scale(1.05);\n    }\n    :host([variant=\"toggle\"]) .thumb.dragging {\n      transform: scaleX(1.2);\n    }\n\n    :host([variant=\"toggle\"][size=\"sm\"]) .track { height: var(--cg-spacing-16); }\n    :host([variant=\"toggle\"][size=\"sm\"]) .thumb { width: var(--cg-spacing-12); height: var(--cg-spacing-12); }\n\n    :host([variant=\"toggle\"][size=\"lg\"]) .track { height: var(--cg-spacing-32); }\n    :host([variant=\"toggle\"][size=\"lg\"]) .thumb { width: var(--cg-spacing-24); height: var(--cg-spacing-24); }\n\n    /* Size variants (default + simple) */\n    :host([size=\"sm\"]:not([variant=\"toggle\"])) .track { height: var(--cg-spacing-4); }\n    :host([size=\"sm\"]:not([variant=\"toggle\"])) .thumb { width: var(--cg-spacing-16); height: var(--cg-spacing-16); }\n\n    :host([size=\"lg\"]:not([variant=\"toggle\"])) .track { height: var(--cg-spacing-8); }\n    :host([size=\"lg\"]:not([variant=\"toggle\"])) .thumb { width: var(--cg-spacing-24); height: var(--cg-spacing-24); }\n  `];\n\n  @property({ reflect: true }) variant: 'default' | 'simple' | 'toggle' = 'default';\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n  @property() label = '';\n  @property() name = '';\n  @property({ type: Number }) value = 50;\n  @property({ type: Number }) min = 0;\n  @property({ type: Number }) max = 100;\n  @property({ type: Number }) step = 1;\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 }) showValue = true;\n  @property({ type: Boolean }) showRange = false;\n  @property({ type: Boolean }) showTooltip = true;\n  @property() unit = '';\n\n  @state() private _dragging = false;\n  @state() private _hovering = false;\n  @state() private _tilt = 0;\n  private _prevValue = 0;\n  private _tiltTimer: ReturnType<typeof setTimeout> | null = null;\n\n  override updated(changed: PropertyValues) {\n    super.updated(changed);\n    if (changed.has('value')) {\n      this._internals?.setFormValue(String(this.value));\n    }\n  }\n\n  formResetCallback() {\n    const attr = this.getAttribute('value');\n    this.value = attr !== null ? Number(attr) : 50;\n  }\n\n  formStateRestoreCallback(state: string) {\n    this.value = Number(state);\n  }\n\n  private _getPercent(): number {\n    return ((this.value - this.min) / (this.max - this.min)) * 100;\n  }\n\n  private _handleInput(e: Event) {\n    const newVal = Number((e.target as HTMLInputElement).value);\n    const delta = newVal - this._prevValue;\n    this._prevValue = newVal;\n\n    // Tilt tooltip based on drag direction — clamp to ±20deg\n    const tiltAmount = Math.max(-20, Math.min(20, delta * 4));\n    this._tilt = tiltAmount;\n\n    // Settle back to 0 after a pause\n    if (this._tiltTimer) clearTimeout(this._tiltTimer);\n    this._tiltTimer = setTimeout(() => { this._tilt = 0; }, 150);\n\n    this.value = newVal;\n    this.dispatchEvent(new CustomEvent('cg-change', { detail: { value: this.value }, bubbles: true, composed: true }));\n  }\n\n  private _onPointerDown() { this._dragging = true; this._prevValue = this.value; }\n  // Class-field arrow so the window listener stays bound to the component instance.\n  private _onPointerUp = () => { this._dragging = false; this._tilt = 0; };\n  private _onMouseEnter() { this._hovering = true; }\n  private _onMouseLeave() { this._hovering = false; }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    window.addEventListener('pointerup', this._onPointerUp);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    window.removeEventListener('pointerup', this._onPointerUp);\n  }\n\n  override render() {\n    const pct = this._getPercent();\n    const tooltipVisible = this.showTooltip && (this._hovering || this._dragging);\n\n    return html`\n      <div class=\"slider-wrapper\">\n        ${this.label || this.showValue ? html`\n          <div class=\"header\">\n            ${this.label ? html`<span class=\"label\">${this.label}</span>` : nothing}\n            ${this.showValue ? html`<span class=\"value-display ${this._dragging ? 'active' : ''}\">${this.value}${this.unit}</span>` : nothing}\n          </div>\n        ` : nothing}\n\n        <div class=\"track-container\"\n          @mouseenter=${this._onMouseEnter}\n          @mouseleave=${this._onMouseLeave}\n        >\n          <div class=\"track\">\n            <div class=\"track-fill ${this._dragging ? 'dragging' : ''}\" style=\"width: ${pct}%\"></div>\n          </div>\n\n          <div class=\"thumb-wrapper ${this._dragging ? 'dragging' : ''}\" style=\"left: calc(${pct}% + (0.5 - ${pct / 100}) * var(--_thumb-size)); --_tilt: ${this._tilt}deg\">\n            <div class=\"thumb ${this._dragging ? 'dragging' : ''}\" aria-hidden=\"true\">\n              ${this.showTooltip ? html`\n                <div class=\"tooltip ${tooltipVisible ? 'visible' : ''}\">${this.value}${this.unit}</div>\n              ` : nothing}\n            </div>\n          </div>\n\n          <input\n            type=\"range\"\n            .value=${String(this.value)}\n            min=${this.min}\n            max=${this.max}\n            step=${this.step}\n            ?disabled=${this.disabled || this.loading}\n            aria-label=${this.label || 'Slider'}\n            aria-valuetext=\"${this.value}${this.unit}\"\n            name=${this.name || nothing}\n            @input=${this._handleInput}\n            @pointerdown=${this._onPointerDown}\n          />\n\n          ${this.loading ? html`<div class=\"loading-bar\" aria-hidden=\"true\"></div>` : nothing}\n        </div>\n\n        ${this.showRange ? html`\n          <div class=\"range-labels\">\n            <span class=\"range-label\">${this.min}${this.unit}</span>\n            <span class=\"range-label\">${this.max}${this.unit}</span>\n          </div>\n        ` : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap { 'cg-slider': CgSlider; }\n}\n"],"names":["CgSlider","LitElement","changed","attr","state","newVal","delta","tiltAmount","pct","tooltipVisible","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"cg-spinner.d.ts","sourceRoot":"","sources":["../../../src/components/cg-spinner/cg-spinner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C;;;;;;;;;;;;;GAaG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,4BA8EnB;IAEwC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC9C,KAAK,EAAE,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAa;IACjE,KAAK,SAAa;IAErC,MAAM;CAWhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}
+{"version":3,"file":"cg-spinner.d.ts","sourceRoot":"","sources":["../../../src/components/cg-spinner/cg-spinner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C;;;;;;;;;;;;;GAaG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,4BAyEnB;IAEwC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC9C,KAAK,EAAE,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAa;IACjE,KAAK,SAAa;IAErC,MAAM;CAOhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

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

@@ -1,28 +1,24 @@
-import { css as l, LitElement as d, html as h } from "lit";
+import { css as d, LitElement as l, html as h } from "lit";
 import { property as a, customElement as g } from "lit/decorators.js";
-import { a as m, r as v, c as b } from "../../chunks/premium.css-9I4kHrsl.js";
-var u = Object.defineProperty, w = Object.getOwnPropertyDescriptor, n = (c, o, t, i) => {
-  for (var e = i > 1 ? void 0 : i ? w(o, t) : o, s = c.length - 1, p; s >= 0; s--)
+import { a as m, r as v, c as b, p as w } from "../../chunks/premium.css-DHekUEUt.js";
+var u = Object.defineProperty, y = Object.getOwnPropertyDescriptor, n = (c, o, t, i) => {
+  for (var e = i > 1 ? void 0 : i ? y(o, t) : o, s = c.length - 1, p; s >= 0; s--)
     (p = c[s]) && (e = (i ? p(o, t, e) : p(e)) || e);
   return i && e && u(o, t, e), e;
 };
-let r = class extends d {
+let r = class extends l {
   constructor() {
     super(...arguments), this.size = "md", this.color = "default", this.label = "Loading";
   }
   render() {
     return h`
-      <div
-        class="spinner"
-        role="status"
-        aria-label="${this.label}"
-      >
+      <div class="spinner" role="status">
         <span class="sr-only">${this.label}</span>
       </div>
     `;
   }
 };
-r.styles = [m, v, b, l`
+r.styles = [m, v, b, w, d`
     :host {
       display: inline-flex;
       align-items: center;
@@ -70,7 +66,7 @@ r.styles = [m, v, b, l`
       border-top-color: var(--cg-color-loading-spinner-primary);
     }
     :host([color="accent"]) .spinner {
-      border-top-color: var(--cg-color-action-primary-background-default);
+      border-top-color: var(--cg-color-action-primary-border-default);
     }
     :host([color="white"]) .spinner {
       border-color: var(--cg-overlay-white-intense);
@@ -89,15 +85,10 @@ r.styles = [m, v, b, l`
       border: 0;
     }
 
-    /* Reduced motion: replace spin with gentle opacity pulse */
+    /* Reduced motion: replace spin with gentle opacity pulse (shared keyframes) */
     @media (prefers-reduced-motion: reduce) {
       .spinner {
-        animation: spinnerPulse 2s ease-in-out infinite !important;
-      }
-
-      @keyframes spinnerPulse {
-        0%, 100% { opacity: 1; }
-        50% { opacity: 0.4; }
+        animation: pulse 2s ease-in-out infinite !important;
       }
     }
   `];

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

@@ -1 +1 @@
-{"version":3,"file":"cg-spinner.js","sources":["../../../src/components/cg-spinner/cg-spinner.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBase, reducedMotion, spinKeyframes } from '../../styles/index.js';\n\n/**\n * <cg-spinner> — Spinning loading indicator.\n *\n * @example\n * ```html\n * <cg-spinner size=\"md\"></cg-spinner>\n * <cg-spinner size=\"lg\" color=\"accent\"></cg-spinner>\n * <cg-spinner size=\"sm\" color=\"white\"></cg-spinner>\n * ```\n *\n * @cssprop --cg-component-spinner-size-md - Spinner diameter (20px)\n * @cssprop --cg-color-loading-spinner-primary - Active arc color\n * @cssprop --cg-color-loading-spinner-secondary - Track color\n */\n@customElement('cg-spinner')\nexport class CgSpinner extends LitElement {\n  static override styles = [hostBase, reducedMotion, spinKeyframes, css`\n    :host {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n    }\n    :host([hidden]) { display: none; }\n\n    .spinner {\n      border-radius: 50%;\n      border-style: solid;\n      border-color: var(--cg-color-loading-spinner-secondary);\n      border-top-color: var(--cg-color-loading-spinner-primary);\n      animation: spin var(--cg-transition-duration-slow) linear infinite;\n    }\n\n    /* ── Sizes (Tier 3) ── */\n    :host([size=\"xs\"]) .spinner {\n      width: var(--cg-component-spinner-size-xs);\n      height: var(--cg-component-spinner-size-xs);\n      border-width: var(--cg-border-width-100);\n    }\n    :host([size=\"sm\"]) .spinner {\n      width: var(--cg-component-spinner-size-sm);\n      height: var(--cg-component-spinner-size-sm);\n      border-width: var(--cg-border-width-100);\n    }\n    :host([size=\"md\"]) .spinner {\n      width: var(--cg-component-spinner-size-md);\n      height: var(--cg-component-spinner-size-md);\n      border-width: var(--cg-border-width-100);\n    }\n    :host([size=\"lg\"]) .spinner {\n      width: var(--cg-component-spinner-size-lg);\n      height: var(--cg-component-spinner-size-lg);\n      border-width: var(--cg-border-width-100);\n    }\n    :host([size=\"xl\"]) .spinner {\n      width: var(--cg-component-spinner-size-xl);\n      height: var(--cg-component-spinner-size-xl);\n      border-width: var(--cg-border-width-300);\n    }\n\n    /* ── Color variants ── */\n    :host([color=\"default\"]) .spinner {\n      border-top-color: var(--cg-color-loading-spinner-primary);\n    }\n    :host([color=\"accent\"]) .spinner {\n      border-top-color: var(--cg-color-action-primary-background-default);\n    }\n    :host([color=\"white\"]) .spinner {\n      border-color: var(--cg-overlay-white-intense);\n      border-top-color: var(--cg-overlay-white-solid);\n    }\n\n    .sr-only {\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      padding: 0;\n      margin: -1px;\n      overflow: hidden;\n      clip: rect(0, 0, 0, 0);\n      white-space: nowrap;\n      border: 0;\n    }\n\n    /* Reduced motion: replace spin with gentle opacity pulse */\n    @media (prefers-reduced-motion: reduce) {\n      .spinner {\n        animation: spinnerPulse 2s ease-in-out infinite !important;\n      }\n\n      @keyframes spinnerPulse {\n        0%, 100% { opacity: 1; }\n        50% { opacity: 0.4; }\n      }\n    }\n  `];\n\n  @property({ type: String, reflect: true }) size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';\n  @property({ type: String, reflect: true }) color: 'default' | 'accent' | 'white' = 'default';\n  @property({ type: String }) label = 'Loading';\n\n  override render() {\n    return html`\n      <div\n        class=\"spinner\"\n        role=\"status\"\n        aria-label=\"${this.label}\"\n      >\n        <span class=\"sr-only\">${this.label}</span>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-spinner': CgSpinner;\n  }\n}\n"],"names":["CgSpinner","LitElement","html","hostBase","reducedMotion","spinKeyframes","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAmBO,IAAMA,IAAN,cAAwBC,EAAW;AAAA,EAAnC,cAAA;AAAA,UAAA,GAAA,SAAA,GAiFsC,KAAA,OAAyC,MACzC,KAAA,QAAwC,WACvD,KAAA,QAAQ;AAAA,EAAA;AAAA,EAE3B,SAAS;AAChB,WAAOC;AAAA;AAAA;AAAA;AAAA,sBAIW,KAAK,KAAK;AAAA;AAAA,gCAEA,KAAK,KAAK;AAAA;AAAA;AAAA,EAGxC;AACF;AAhGaF,EACK,SAAS,CAACG,GAAUC,GAAeC,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,GA8EjE;AAE0CC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAjF9BR,EAiFgC,WAAA,QAAA,CAAA;AACAO,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAlF9BR,EAkFgC,WAAA,SAAA,CAAA;AACfO,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAnFfR,EAmFiB,WAAA,SAAA,CAAA;AAnFjBA,IAANO,EAAA;AAAA,EADNE,EAAc,YAAY;AAAA,GACdT,CAAA;"}
+{"version":3,"file":"cg-spinner.js","sources":["../../../src/components/cg-spinner/cg-spinner.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBase, pulseKeyframes, reducedMotion, spinKeyframes } from '../../styles/index.js';\n\n/**\n * <cg-spinner> — Spinning loading indicator.\n *\n * @example\n * ```html\n * <cg-spinner size=\"md\"></cg-spinner>\n * <cg-spinner size=\"lg\" color=\"accent\"></cg-spinner>\n * <cg-spinner size=\"sm\" color=\"white\"></cg-spinner>\n * ```\n *\n * @cssprop --cg-component-spinner-size-md - Spinner diameter (20px)\n * @cssprop --cg-color-loading-spinner-primary - Active arc color\n * @cssprop --cg-color-loading-spinner-secondary - Track color\n */\n@customElement('cg-spinner')\nexport class CgSpinner extends LitElement {\n  static override styles = [hostBase, reducedMotion, spinKeyframes, pulseKeyframes, css`\n    :host {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n    }\n    :host([hidden]) { display: none; }\n\n    .spinner {\n      border-radius: 50%;\n      border-style: solid;\n      border-color: var(--cg-color-loading-spinner-secondary);\n      border-top-color: var(--cg-color-loading-spinner-primary);\n      animation: spin var(--cg-transition-duration-slow) linear infinite;\n    }\n\n    /* ── Sizes (Tier 3) ── */\n    :host([size=\"xs\"]) .spinner {\n      width: var(--cg-component-spinner-size-xs);\n      height: var(--cg-component-spinner-size-xs);\n      border-width: var(--cg-border-width-100);\n    }\n    :host([size=\"sm\"]) .spinner {\n      width: var(--cg-component-spinner-size-sm);\n      height: var(--cg-component-spinner-size-sm);\n      border-width: var(--cg-border-width-100);\n    }\n    :host([size=\"md\"]) .spinner {\n      width: var(--cg-component-spinner-size-md);\n      height: var(--cg-component-spinner-size-md);\n      border-width: var(--cg-border-width-100);\n    }\n    :host([size=\"lg\"]) .spinner {\n      width: var(--cg-component-spinner-size-lg);\n      height: var(--cg-component-spinner-size-lg);\n      border-width: var(--cg-border-width-100);\n    }\n    :host([size=\"xl\"]) .spinner {\n      width: var(--cg-component-spinner-size-xl);\n      height: var(--cg-component-spinner-size-xl);\n      border-width: var(--cg-border-width-300);\n    }\n\n    /* ── Color variants ── */\n    :host([color=\"default\"]) .spinner {\n      border-top-color: var(--cg-color-loading-spinner-primary);\n    }\n    :host([color=\"accent\"]) .spinner {\n      border-top-color: var(--cg-color-action-primary-border-default);\n    }\n    :host([color=\"white\"]) .spinner {\n      border-color: var(--cg-overlay-white-intense);\n      border-top-color: var(--cg-overlay-white-solid);\n    }\n\n    .sr-only {\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      padding: 0;\n      margin: -1px;\n      overflow: hidden;\n      clip: rect(0, 0, 0, 0);\n      white-space: nowrap;\n      border: 0;\n    }\n\n    /* Reduced motion: replace spin with gentle opacity pulse (shared keyframes) */\n    @media (prefers-reduced-motion: reduce) {\n      .spinner {\n        animation: pulse 2s ease-in-out infinite !important;\n      }\n    }\n  `];\n\n  @property({ type: String, reflect: true }) size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';\n  @property({ type: String, reflect: true }) color: 'default' | 'accent' | 'white' = 'default';\n  @property({ type: String }) label = 'Loading';\n\n  override render() {\n    return html`\n      <div class=\"spinner\" role=\"status\">\n        <span class=\"sr-only\">${this.label}</span>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-spinner': CgSpinner;\n  }\n}\n"],"names":["CgSpinner","LitElement","html","hostBase","reducedMotion","spinKeyframes","pulseKeyframes","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAmBO,IAAMA,IAAN,cAAwBC,EAAW;AAAA,EAAnC,cAAA;AAAA,UAAA,GAAA,SAAA,GA4EsC,KAAA,OAAyC,MACzC,KAAA,QAAwC,WACvD,KAAA,QAAQ;AAAA,EAAA;AAAA,EAE3B,SAAS;AAChB,WAAOC;AAAA;AAAA,gCAEqB,KAAK,KAAK;AAAA;AAAA;AAAA,EAGxC;AACF;AAvFaF,EACK,SAAS,CAACG,GAAUC,GAAeC,GAAeC,GAAgBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAyEjF;AAE0CC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA5E9BT,EA4EgC,WAAA,QAAA,CAAA;AACAQ,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA7E9BT,EA6EgC,WAAA,SAAA,CAAA;AACfQ,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA9EfT,EA8EiB,WAAA,SAAA,CAAA;AA9EjBA,IAANQ,EAAA;AAAA,EADNE,EAAc,YAAY;AAAA,GACdV,CAAA;"}

package/dist/components/cg-split-button/cg-split-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cg-split-button.d.ts","sourceRoot":"","sources":["../../../src/components/cg-split-button/cg-split-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAOrD,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BAyKnB;IAES,KAAK,SAAM;IACM,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAa;IAC1D,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAChC,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAAY;IACtB,QAAQ,UAAS;IACjB,OAAO,UAAS;IACjC,KAAK,EAAE,eAAe,EAAE,CAAM;IACb,IAAI,UAAS;IACC,aAAa,EAAE,cAAc,GAAG,YAAY,GAAG,WAAW,GAAG,SAAS,CAAgB;IACnH,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhE,OAAO,CAAC,YAAY,CAAM;IACnB,OAAO,CAAC,OAAO,CAAe;IAC3B,OAAO,CAAC,UAAU,CAAe;IAEpD,OAAO,CAAC,oBAAoB,CAA6B;IAEhD,oBAAoB,IAAI,IAAI;IAOrC,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,OAAO;IAKf,OAAO,CAAC,SAAS;IAoBjB,OAAO,CAAC,MAAM;IAUd,OAAO,CAAC,OAAO;IAUf,OAAO,CAAC,cAAc,CAapB;IAEF,OAAO,CAAC,iBAAiB;IAOhB,MAAM;CAsDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}
+{"version":3,"file":"cg-split-button.d.ts","sourceRoot":"","sources":["../../../src/components/cg-split-button/cg-split-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAOrD,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BAuLnB;IAES,KAAK,SAAM;IACM,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAa;IAC1D,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAChC,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAAY;IACtB,QAAQ,UAAS;IACjB,OAAO,UAAS;IACjC,KAAK,EAAE,eAAe,EAAE,CAAM;IACb,IAAI,UAAS;IACC,aAAa,EAAE,cAAc,GAAG,YAAY,GAAG,WAAW,GAAG,SAAS,CAAgB;IACnH,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhE,OAAO,CAAC,YAAY,CAAM;IACnB,OAAO,CAAC,OAAO,CAAe;IAC3B,OAAO,CAAC,UAAU,CAAe;IAEpD,OAAO,CAAC,oBAAoB,CAA6B;IAEhD,oBAAoB,IAAI,IAAI;IAOrC,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,OAAO;IAKf,OAAO,CAAC,SAAS;IAoBjB,OAAO,CAAC,MAAM;IAUd,OAAO,CAAC,OAAO;IAUf,OAAO,CAAC,cAAc,CAapB;IAEF,OAAO,CAAC,iBAAiB;IAOhB,MAAM;CAsDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

package/dist/components/cg-split-button/cg-split-button.js

@@ -1,26 +1,26 @@
 import { css as g, LitElement as h, nothing as d, html as c } from "lit";
-import { property as i, state as b, query as p, customElement as m } from "lit/decorators.js";
-import { a as v, r as f, e as y, m as k } from "../../chunks/premium.css-9I4kHrsl.js";
+import { property as a, state as b, query as p, customElement as v } from "lit/decorators.js";
+import { a as m, r as f, e as y, m as k } from "../../chunks/premium.css-DHekUEUt.js";
 import { a as _ } from "../../chunks/floating-DfsaYJnh.js";
-import { b as w } from "../../chunks/outside-click-CP1P1fK3.js";
-import { h as x } from "../../chunks/roving-index-BuO0tTba.js";
-var $ = Object.defineProperty, C = Object.getOwnPropertyDescriptor, o = (t, e, a, n) => {
-  for (var s = n > 1 ? void 0 : n ? C(e, a) : e, u = t.length - 1, l; u >= 0; u--)
-    (l = t[u]) && (s = (n ? l(e, a, s) : l(s)) || s);
-  return n && s && $(e, a, s), s;
+import { b as x } from "../../chunks/outside-click-CP1P1fK3.js";
+import { h as w } from "../../chunks/roving-index-BuO0tTba.js";
+var $ = Object.defineProperty, C = Object.getOwnPropertyDescriptor, o = (t, r, i, n) => {
+  for (var s = n > 1 ? void 0 : n ? C(r, i) : r, l = t.length - 1, u; l >= 0; l--)
+    (u = t[l]) && (s = (n ? u(r, i, s) : u(s)) || s);
+  return n && s && $(r, i, s), s;
 };
-let r = class extends h {
+let e = class extends h {
   constructor() {
     super(...arguments), this.label = "", this.variant = "primary", this.size = "md", this.type = "normal", this.disabled = !1, this.loading = !1, this.items = [], this.open = !1, this.menuPlacement = "bottom-end", this.rounded = "md", this._activeIndex = -1, this._disposeOutsideClick = null, this._handleKeydown = (t) => {
       if (!this.open) return;
-      const { index: e, handled: a } = x(t, {
+      const { index: r, handled: i } = w(t, {
         items: this.items,
         activeIndex: this._activeIndex,
         isSkippable: (n) => !!(n.separator || n.disabled),
         onSelect: (n) => this._select(n),
         onEscape: () => this._close()
       });
-      a && (t.preventDefault(), this._activeIndex = e);
+      i && (t.preventDefault(), this._activeIndex = r);
     };
   }
   disconnectedCallback() {
@@ -40,7 +40,7 @@ let r = class extends h {
         flip: !0,
         shift: !0
       });
-    }), this._disposeOutsideClick?.(), this._disposeOutsideClick = w(this, () => this._close()), setTimeout(() => {
+    }), this._disposeOutsideClick?.(), this._disposeOutsideClick = x(this, () => this._close()), setTimeout(() => {
       document.addEventListener("keydown", this._handleKeydown);
     }, 0));
   }
@@ -87,23 +87,23 @@ let r = class extends h {
         </button>
       </div>
       <ul class="menu" role="menu" ?hidden=${!this.open}>
-        ${this.items.map((e, a) => {
-      if (e.separator) return c`<li role="separator" class="divider"></li>`;
+        ${this.items.map((r, i) => {
+      if (r.separator) return c`<li role="separator" class="divider"></li>`;
       t++;
       const n = t === this._activeIndex;
       return c`
             <li role="none">
               <button
-                class="menu-item ${e.danger ? "danger" : ""}"
+                class="menu-item ${r.danger ? "danger" : ""}"
                 role="menuitem"
-                ?disabled=${e.disabled}
+                ?disabled=${r.disabled}
                 data-active=${n ? "true" : d}
-                style="--stagger-index: ${a}"
-                @click=${() => this._select(e)}
+                style="--stagger-index: ${i}"
+                @click=${() => this._select(r)}
               >
-                ${e.icon ? c`<cg-icon class="menu-item-icon" name="${e.icon}" size="sm"></cg-icon>` : d}
-                <span>${e.label}</span>
-                ${e.shortcut ? c`<span class="menu-item-shortcut">${e.shortcut}</span>` : d}
+                ${r.icon ? c`<cg-icon class="menu-item-icon" name="${r.icon}" size="sm"></cg-icon>` : d}
+                <span>${r.label}</span>
+                ${r.shortcut ? c`<span class="menu-item-shortcut">${r.shortcut}</span>` : d}
               </button>
             </li>
           `;
@@ -112,7 +112,7 @@ let r = class extends h {
     `;
   }
 };
-r.styles = [v, f, y, k, g`
+e.styles = [m, f, y, k, g`
     :host {
       display: inline-flex;
       position: relative;
@@ -169,7 +169,21 @@ r.styles = [v, f, y, k, g`
       outline: none;
       z-index: 1;
     }
-    .group > button:disabled { opacity: 0.5; pointer-events: none; }
+    /* Themeable per-variant disabled colors (scoped with :host to win over variant rules). */
+    .group > button:disabled { pointer-events: none; }
+    :host([variant="primary"]) .group > button:disabled,
+    :host([type="danger"][variant="primary"]) .group > button:disabled {
+      background: var(--cg-color-action-primary-background-disable);
+      color: var(--cg-color-action-primary-text-disable);
+    }
+    :host([variant="secondary"]) .group > button:disabled {
+      background: var(--cg-color-action-secondary-background-disable);
+      color: var(--cg-color-action-secondary-text-disable);
+    }
+    :host([variant="tertiary"]) .group > button:disabled {
+      background: var(--cg-color-action-tertiary-background-disable);
+      color: var(--cg-color-action-tertiary-text-disable);
+    }
 
     /* Sizes — scoped to .group. */
     :host([size="sm"]) .group > button { height: var(--cg-component-button-height-sm); padding: 0 var(--cg-spacing-12); font-size: var(--cg-font-size-xs); }
@@ -283,48 +297,48 @@ r.styles = [v, f, y, k, g`
     :host([menu-placement="top-end"]) .menu { transform-origin: bottom right; }
   `];
 o([
-  i()
-], r.prototype, "label", 2);
+  a()
+], e.prototype, "label", 2);
 o([
-  i({ reflect: !0 })
-], r.prototype, "variant", 2);
+  a({ reflect: !0 })
+], e.prototype, "variant", 2);
 o([
-  i({ reflect: !0 })
-], r.prototype, "size", 2);
+  a({ reflect: !0 })
+], e.prototype, "size", 2);
 o([
-  i({ reflect: !0 })
-], r.prototype, "type", 2);
+  a({ reflect: !0 })
+], e.prototype, "type", 2);
 o([
-  i({ type: Boolean, reflect: !0 })
-], r.prototype, "disabled", 2);
+  a({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled", 2);
 o([
-  i({ type: Boolean, reflect: !0 })
-], r.prototype, "loading", 2);
+  a({ type: Boolean, reflect: !0 })
+], e.prototype, "loading", 2);
 o([
-  i({ type: Array })
-], r.prototype, "items", 2);
+  a({ type: Array })
+], e.prototype, "items", 2);
 o([
-  i({ type: Boolean, reflect: !0 })
-], r.prototype, "open", 2);
+  a({ type: Boolean, reflect: !0 })
+], e.prototype, "open", 2);
 o([
-  i({ attribute: "menu-placement", reflect: !0 })
-], r.prototype, "menuPlacement", 2);
+  a({ attribute: "menu-placement", reflect: !0 })
+], e.prototype, "menuPlacement", 2);
 o([
-  i({ reflect: !0 })
-], r.prototype, "rounded", 2);
+  a({ reflect: !0 })
+], e.prototype, "rounded", 2);
 o([
   b()
-], r.prototype, "_activeIndex", 2);
+], e.prototype, "_activeIndex", 2);
 o([
   p(".menu")
-], r.prototype, "_menuEl", 2);
+], e.prototype, "_menuEl", 2);
 o([
   p(".chevron")
-], r.prototype, "_chevronEl", 2);
-r = o([
-  m("cg-split-button")
-], r);
+], e.prototype, "_chevronEl", 2);
+e = o([
+  v("cg-split-button")
+], e);
 export {
-  r as CgSplitButton
+  e as CgSplitButton
 };
 //# sourceMappingURL=cg-split-button.js.map

package/dist/components/cg-split-button/cg-split-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"cg-split-button.js","sources":["../../../src/components/cg-split-button/cg-split-button.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { hostBase, reducedMotion, entranceStagger, menuListStyles } from '../../styles/index.js';\nimport { applyFloatingPosition } from '../../utils/floating.js';\nimport { bindOutsideClick } from '../../utils/outside-click.js';\nimport { handleRovingKey } from '../../utils/roving-index.js';\n\nexport interface SplitButtonItem {\n  id: string;\n  label: string;\n  icon?: string;\n  shortcut?: string;\n  disabled?: boolean;\n  danger?: boolean;\n  separator?: boolean;\n}\n\n/**\n * @element cg-split-button\n * Primary action button with an attached dropdown for related actions\n * (`Save ▼` → Save / Save As / Save a copy). Shares variant/size with cg-button.\n *\n * @example\n * ```html\n * <cg-split-button\n *   label=\"Save\"\n *   variant=\"primary\"\n *   .items=${[\n *     { id: 'save-as', label: 'Save as…', shortcut: '⌘⇧S' },\n *     { id: 'copy', label: 'Save a copy' },\n *     { separator: true, id: 's1', label: '' },\n *     { id: 'delete', label: 'Delete', danger: true },\n *   ]}\n * ></cg-split-button>\n * ```\n *\n * @fires {CustomEvent} cg-split-button-click  - Primary action triggered\n * @fires {CustomEvent<{id:string, item:SplitButtonItem}>} cg-split-button-select - Menu item selected\n * @fires {CustomEvent} cg-split-button-open   - Menu opened\n * @fires {CustomEvent} cg-split-button-close  - Menu closed\n */\n@customElement('cg-split-button')\nexport class CgSplitButton extends LitElement {\n  static override styles = [hostBase, reducedMotion, entranceStagger, menuListStyles, css`\n    :host {\n      display: inline-flex;\n      position: relative;\n    }\n\n    /* Outer group — carries the border-radius so inner buttons inherit corners. */\n    .group {\n      display: inline-flex;\n      align-items: stretch;\n      border-radius: var(--cg-component-button-radius-md);\n    }\n    :host([size=\"sm\"]) .group { border-radius: var(--cg-component-button-radius-sm); }\n    :host([size=\"lg\"]) .group { border-radius: var(--cg-component-button-radius-lg); }\n\n    /* Rounded prop overrides the size-derived radius (matches cg-button). */\n    :host([rounded=\"none\"]) .group { border-radius: 0; }\n    :host([rounded=\"sm\"]) .group { border-radius: var(--cg-component-button-radius-sm); }\n    :host([rounded=\"md\"]) .group { border-radius: var(--cg-component-button-radius-md); }\n    :host([rounded=\"lg\"]) .group { border-radius: var(--cg-component-button-radius-lg); }\n\n    /* Group-button baseline — scoped to .group so it doesn't hit menu items. */\n    .group > button {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: var(--cg-spacing-8);\n      height: var(--cg-component-button-height-md);\n      padding: 0 var(--cg-spacing-16);\n      border: var(--cg-border-width-50) solid transparent;\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-text-default);\n      font-family: inherit;\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      line-height: 1;\n      white-space: nowrap;\n      cursor: pointer;\n      user-select: none;\n      position: relative;\n      -webkit-font-smoothing: antialiased;\n      transition:\n        background-color var(--cg-transition-duration-fast) ease,\n        border-color var(--cg-transition-duration-fast) ease,\n        box-shadow var(--cg-transition-duration-fast) ease,\n        transform var(--cg-transition-duration-fast) ease;\n    }\n    .group > button:active:not(:disabled) {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n    .group > button:focus-visible {\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      outline: none;\n      z-index: 1;\n    }\n    .group > button:disabled { opacity: 0.5; pointer-events: none; }\n\n    /* Sizes — scoped to .group. */\n    :host([size=\"sm\"]) .group > button { height: var(--cg-component-button-height-sm); padding: 0 var(--cg-spacing-12); font-size: var(--cg-font-size-xs); }\n    :host([size=\"lg\"]) .group > button { height: var(--cg-component-button-height-lg); padding: 0 var(--cg-spacing-24); font-size: var(--cg-font-size-base); }\n\n    .primary {\n      border-top-left-radius: inherit;\n      border-bottom-left-radius: inherit;\n    }\n    /* Divider between primary and chevron — a dedicated line rendered as a pseudo\n       element, so it's not fighting the button's own border shorthand. */\n    .primary::after {\n      content: '';\n      position: absolute;\n      top: 18%;\n      right: calc(-1 * var(--cg-border-width-50));\n      width: var(--cg-border-width-50);\n      height: 64%;\n      background: color-mix(in srgb, var(--cg-color-action-primary-text-default) 22%, transparent);\n      pointer-events: none;\n      z-index: 1;\n    }\n\n    .chevron {\n      padding: 0 var(--cg-spacing-8);\n      border-top-right-radius: inherit;\n      border-bottom-right-radius: inherit;\n    }\n    .chevron svg {\n      width: var(--cg-spacing-16);\n      height: var(--cg-spacing-16);\n      transition: transform var(--cg-transition-duration-fast) ease;\n    }\n    :host([open]) .chevron svg { transform: rotate(180deg); }\n\n    /* ── Primary variant (default) ── */\n    :host([variant=\"primary\"]) .group > button {\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-text-default);\n      border-color: var(--cg-color-action-primary-border-default);\n    }\n    :host([variant=\"primary\"]) .group > button:not(:disabled):hover {\n      background: var(--cg-color-action-primary-background-hover);\n    }\n\n    /* ── Secondary variant ── */\n    :host([variant=\"secondary\"]) .group > button {\n      background: var(--cg-color-action-secondary-background-default);\n      color: var(--cg-color-action-secondary-text-default);\n      border-color: var(--cg-color-action-secondary-border-default);\n    }\n    :host([variant=\"secondary\"]) .group > button:not(:disabled):hover {\n      background: var(--cg-color-action-secondary-background-hover);\n    }\n    :host([variant=\"secondary\"]) .primary::after {\n      background: var(--cg-color-action-secondary-border-default);\n    }\n\n    /* ── Tertiary (ghost) variant ── */\n    :host([variant=\"tertiary\"]) .group > button {\n      background: transparent;\n      color: var(--cg-color-action-tertiary-text-default);\n      border-color: transparent;\n    }\n    :host([variant=\"tertiary\"]) .group > button:not(:disabled):hover {\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    :host([variant=\"tertiary\"]) .primary::after {\n      background: var(--cg-color-surface-cards-border);\n    }\n\n    /* ── Danger type ── */\n    :host([type=\"danger\"]) .group > button {\n      background: var(--cg-color-status-error-background-default);\n      color: var(--cg-color-status-error-text-default);\n      border-color: var(--cg-color-status-error-border-default);\n    }\n    :host([type=\"danger\"][variant=\"primary\"]) .group > button {\n      background: var(--cg-color-status-error-text-default);\n      color: var(--cg-color-status-error-text-inverse);\n      border-color: transparent;\n    }\n    :host([type=\"danger\"]) .group > button:not(:disabled):hover,\n    :host([type=\"danger\"][variant=\"primary\"]) .group > button:not(:disabled):hover {\n      background: var(--cg-color-status-error-background-hover);\n    }\n    :host([type=\"danger\"]) .primary::after { background: color-mix(in srgb, var(--cg-color-status-error-text-default) 25%, transparent); }\n\n    /* Loading spinner on primary button */\n    .spinner {\n      width: var(--cg-spacing-16);\n      height: var(--cg-spacing-16);\n      border: var(--cg-border-width-100) solid currentColor;\n      border-right-color: transparent;\n      border-radius: var(--cg-border-radius-full);\n      animation: spin 600ms linear infinite;\n      margin-right: var(--cg-spacing-8);\n    }\n    @keyframes spin { to { transform: rotate(360deg); } }\n    :host([loading]) .primary { pointer-events: none; }\n\n    /* Menu positioning — visual styling inherited from menuListStyles.\n       cg-split-button uses fixed positioning + floating-ui placement computed in JS. */\n    .menu {\n      position: fixed;\n      z-index: var(--cg-z-index-500);\n    }\n    :host([menu-placement=\"bottom-start\"]) .menu { transform-origin: top left; }\n    :host([menu-placement=\"bottom-end\"]) .menu { transform-origin: top right; }\n    :host([menu-placement=\"top-start\"]) .menu { transform-origin: bottom left; }\n    :host([menu-placement=\"top-end\"]) .menu { transform-origin: bottom right; }\n  `];\n\n  @property() label = '';\n  @property({ reflect: true }) variant: 'primary' | 'secondary' | 'tertiary' = 'primary';\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n  @property({ reflect: true }) type: 'normal' | 'danger' = 'normal';\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ type: Boolean, reflect: true }) loading = false;\n  @property({ type: Array }) items: SplitButtonItem[] = [];\n  @property({ type: Boolean, reflect: true }) open = false;\n  @property({ attribute: 'menu-placement', reflect: true }) menuPlacement: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' = 'bottom-end';\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' = 'md';\n\n  @state() private _activeIndex = -1;\n  @query('.menu') private _menuEl!: HTMLElement;\n  @query('.chevron') private _chevronEl!: HTMLElement;\n\n  private _disposeOutsideClick: (() => void) | null = null;\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._disposeOutsideClick?.();\n    this._disposeOutsideClick = null;\n    document.removeEventListener('keydown', this._handleKeydown);\n  }\n\n  private _onPrimaryClick(e: Event): void {\n    e.stopPropagation();\n    if (this.disabled || this.loading) return;\n    this.dispatchEvent(new CustomEvent('cg-split-button-click', { bubbles: true, composed: true }));\n  }\n\n  private _toggle(): void {\n    if (this.disabled) return;\n    this.open ? this._close() : this._openMenu();\n  }\n\n  private _openMenu(): void {\n    if (this.open) return;\n    this.open = true;\n    this._activeIndex = -1;\n    this.dispatchEvent(new CustomEvent('cg-split-button-open', { bubbles: true, composed: true }));\n\n    requestAnimationFrame(() => {\n      if (!this._menuEl || !this._chevronEl) return;\n      applyFloatingPosition(this._chevronEl, this._menuEl, {\n        placement: this.menuPlacement, offset: 4, flip: true, shift: true,\n      });\n    });\n\n    this._disposeOutsideClick?.();\n    this._disposeOutsideClick = bindOutsideClick(this, () => this._close());\n    setTimeout(() => {\n      document.addEventListener('keydown', this._handleKeydown);\n    }, 0);\n  }\n\n  private _close(): void {\n    if (!this.open) return;\n    this.open = false;\n    this._activeIndex = -1;\n    this._disposeOutsideClick?.();\n    this._disposeOutsideClick = null;\n    document.removeEventListener('keydown', this._handleKeydown);\n    this.dispatchEvent(new CustomEvent('cg-split-button-close', { bubbles: true, composed: true }));\n  }\n\n  private _select(item: SplitButtonItem): void {\n    if (item.disabled || item.separator) return;\n    this.dispatchEvent(new CustomEvent('cg-split-button-select', {\n      detail: { id: item.id, item },\n      bubbles: true,\n      composed: true,\n    }));\n    this._close();\n  }\n\n  private _handleKeydown = (e: KeyboardEvent): void => {\n    if (!this.open) return;\n    const { index, handled } = handleRovingKey(e, {\n      items: this.items,\n      activeIndex: this._activeIndex,\n      isSkippable: i => Boolean(i.separator || i.disabled),\n      onSelect: item => this._select(item),\n      onEscape: () => this._close(),\n    });\n    if (handled) {\n      e.preventDefault();\n      this._activeIndex = index;\n    }\n  };\n\n  private _onPrimaryKeydown(e: KeyboardEvent): void {\n    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n      e.preventDefault();\n      this._openMenu();\n    }\n  }\n\n  override render() {\n    let selectableIdx = -1;\n    return html`\n      <div class=\"group\">\n        <button\n          class=\"primary\"\n          type=\"button\"\n          aria-label=${this.label}\n          ?disabled=${this.disabled || this.loading}\n          @click=${this._onPrimaryClick}\n          @keydown=${this._onPrimaryKeydown}\n        >\n          ${this.loading ? html`<span class=\"spinner\" aria-hidden=\"true\"></span>` : nothing}\n          ${this.label}\n        </button>\n        <button\n          class=\"chevron\"\n          type=\"button\"\n          aria-label=\"More actions\"\n          aria-haspopup=\"menu\"\n          aria-expanded=${this.open ? 'true' : 'false'}\n          ?disabled=${this.disabled}\n          @click=${this._toggle}\n        >\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M6 9l6 6 6-6\"/>\n          </svg>\n        </button>\n      </div>\n      <ul class=\"menu\" role=\"menu\" ?hidden=${!this.open}>\n        ${this.items.map((item, index) => {\n          if (item.separator) return html`<li role=\"separator\" class=\"divider\"></li>`;\n          selectableIdx++;\n          const isActive = selectableIdx === this._activeIndex;\n          return html`\n            <li role=\"none\">\n              <button\n                class=\"menu-item ${item.danger ? 'danger' : ''}\"\n                role=\"menuitem\"\n                ?disabled=${item.disabled}\n                data-active=${isActive ? 'true' : nothing}\n                style=\"--stagger-index: ${index}\"\n                @click=${() => this._select(item)}\n              >\n                ${item.icon ? html`<cg-icon class=\"menu-item-icon\" name=\"${item.icon}\" size=\"sm\"></cg-icon>` : nothing}\n                <span>${item.label}</span>\n                ${item.shortcut ? html`<span class=\"menu-item-shortcut\">${item.shortcut}</span>` : nothing}\n              </button>\n            </li>\n          `;\n        })}\n      </ul>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-split-button': CgSplitButton;\n  }\n}\n"],"names":["CgSplitButton","LitElement","e","index","handled","handleRovingKey","i","item","applyFloatingPosition","bindOutsideClick","selectableIdx","html","nothing","isActive","hostBase","reducedMotion","entranceStagger","menuListStyles","css","__decorateClass","property","state","query","customElement"],"mappings":"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"}
+{"version":3,"file":"cg-split-button.js","sources":["../../../src/components/cg-split-button/cg-split-button.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { hostBase, reducedMotion, entranceStagger, menuListStyles } from '../../styles/index.js';\nimport { applyFloatingPosition } from '../../utils/floating.js';\nimport { bindOutsideClick } from '../../utils/outside-click.js';\nimport { handleRovingKey } from '../../utils/roving-index.js';\n\nexport interface SplitButtonItem {\n  id: string;\n  label: string;\n  icon?: string;\n  shortcut?: string;\n  disabled?: boolean;\n  danger?: boolean;\n  separator?: boolean;\n}\n\n/**\n * @element cg-split-button\n * Primary action button with an attached dropdown for related actions\n * (`Save ▼` → Save / Save As / Save a copy). Shares variant/size with cg-button.\n *\n * @example\n * ```html\n * <cg-split-button\n *   label=\"Save\"\n *   variant=\"primary\"\n *   .items=${[\n *     { id: 'save-as', label: 'Save as…', shortcut: '⌘⇧S' },\n *     { id: 'copy', label: 'Save a copy' },\n *     { separator: true, id: 's1', label: '' },\n *     { id: 'delete', label: 'Delete', danger: true },\n *   ]}\n * ></cg-split-button>\n * ```\n *\n * @fires {CustomEvent} cg-split-button-click  - Primary action triggered\n * @fires {CustomEvent<{id:string, item:SplitButtonItem}>} cg-split-button-select - Menu item selected\n * @fires {CustomEvent} cg-split-button-open   - Menu opened\n * @fires {CustomEvent} cg-split-button-close  - Menu closed\n */\n@customElement('cg-split-button')\nexport class CgSplitButton extends LitElement {\n  static override styles = [hostBase, reducedMotion, entranceStagger, menuListStyles, css`\n    :host {\n      display: inline-flex;\n      position: relative;\n    }\n\n    /* Outer group — carries the border-radius so inner buttons inherit corners. */\n    .group {\n      display: inline-flex;\n      align-items: stretch;\n      border-radius: var(--cg-component-button-radius-md);\n    }\n    :host([size=\"sm\"]) .group { border-radius: var(--cg-component-button-radius-sm); }\n    :host([size=\"lg\"]) .group { border-radius: var(--cg-component-button-radius-lg); }\n\n    /* Rounded prop overrides the size-derived radius (matches cg-button). */\n    :host([rounded=\"none\"]) .group { border-radius: 0; }\n    :host([rounded=\"sm\"]) .group { border-radius: var(--cg-component-button-radius-sm); }\n    :host([rounded=\"md\"]) .group { border-radius: var(--cg-component-button-radius-md); }\n    :host([rounded=\"lg\"]) .group { border-radius: var(--cg-component-button-radius-lg); }\n\n    /* Group-button baseline — scoped to .group so it doesn't hit menu items. */\n    .group > button {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: var(--cg-spacing-8);\n      height: var(--cg-component-button-height-md);\n      padding: 0 var(--cg-spacing-16);\n      border: var(--cg-border-width-50) solid transparent;\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-text-default);\n      font-family: inherit;\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      line-height: 1;\n      white-space: nowrap;\n      cursor: pointer;\n      user-select: none;\n      position: relative;\n      -webkit-font-smoothing: antialiased;\n      transition:\n        background-color var(--cg-transition-duration-fast) ease,\n        border-color var(--cg-transition-duration-fast) ease,\n        box-shadow var(--cg-transition-duration-fast) ease,\n        transform var(--cg-transition-duration-fast) ease;\n    }\n    .group > button:active:not(:disabled) {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n    .group > button:focus-visible {\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      outline: none;\n      z-index: 1;\n    }\n    /* Themeable per-variant disabled colors (scoped with :host to win over variant rules). */\n    .group > button:disabled { pointer-events: none; }\n    :host([variant=\"primary\"]) .group > button:disabled,\n    :host([type=\"danger\"][variant=\"primary\"]) .group > button:disabled {\n      background: var(--cg-color-action-primary-background-disable);\n      color: var(--cg-color-action-primary-text-disable);\n    }\n    :host([variant=\"secondary\"]) .group > button:disabled {\n      background: var(--cg-color-action-secondary-background-disable);\n      color: var(--cg-color-action-secondary-text-disable);\n    }\n    :host([variant=\"tertiary\"]) .group > button:disabled {\n      background: var(--cg-color-action-tertiary-background-disable);\n      color: var(--cg-color-action-tertiary-text-disable);\n    }\n\n    /* Sizes — scoped to .group. */\n    :host([size=\"sm\"]) .group > button { height: var(--cg-component-button-height-sm); padding: 0 var(--cg-spacing-12); font-size: var(--cg-font-size-xs); }\n    :host([size=\"lg\"]) .group > button { height: var(--cg-component-button-height-lg); padding: 0 var(--cg-spacing-24); font-size: var(--cg-font-size-base); }\n\n    .primary {\n      border-top-left-radius: inherit;\n      border-bottom-left-radius: inherit;\n    }\n    /* Divider between primary and chevron — a dedicated line rendered as a pseudo\n       element, so it's not fighting the button's own border shorthand. */\n    .primary::after {\n      content: '';\n      position: absolute;\n      top: 18%;\n      right: calc(-1 * var(--cg-border-width-50));\n      width: var(--cg-border-width-50);\n      height: 64%;\n      background: color-mix(in srgb, var(--cg-color-action-primary-text-default) 22%, transparent);\n      pointer-events: none;\n      z-index: 1;\n    }\n\n    .chevron {\n      padding: 0 var(--cg-spacing-8);\n      border-top-right-radius: inherit;\n      border-bottom-right-radius: inherit;\n    }\n    .chevron svg {\n      width: var(--cg-spacing-16);\n      height: var(--cg-spacing-16);\n      transition: transform var(--cg-transition-duration-fast) ease;\n    }\n    :host([open]) .chevron svg { transform: rotate(180deg); }\n\n    /* ── Primary variant (default) ── */\n    :host([variant=\"primary\"]) .group > button {\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-text-default);\n      border-color: var(--cg-color-action-primary-border-default);\n    }\n    :host([variant=\"primary\"]) .group > button:not(:disabled):hover {\n      background: var(--cg-color-action-primary-background-hover);\n    }\n\n    /* ── Secondary variant ── */\n    :host([variant=\"secondary\"]) .group > button {\n      background: var(--cg-color-action-secondary-background-default);\n      color: var(--cg-color-action-secondary-text-default);\n      border-color: var(--cg-color-action-secondary-border-default);\n    }\n    :host([variant=\"secondary\"]) .group > button:not(:disabled):hover {\n      background: var(--cg-color-action-secondary-background-hover);\n    }\n    :host([variant=\"secondary\"]) .primary::after {\n      background: var(--cg-color-action-secondary-border-default);\n    }\n\n    /* ── Tertiary (ghost) variant ── */\n    :host([variant=\"tertiary\"]) .group > button {\n      background: transparent;\n      color: var(--cg-color-action-tertiary-text-default);\n      border-color: transparent;\n    }\n    :host([variant=\"tertiary\"]) .group > button:not(:disabled):hover {\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    :host([variant=\"tertiary\"]) .primary::after {\n      background: var(--cg-color-surface-cards-border);\n    }\n\n    /* ── Danger type ── */\n    :host([type=\"danger\"]) .group > button {\n      background: var(--cg-color-status-error-background-default);\n      color: var(--cg-color-status-error-text-default);\n      border-color: var(--cg-color-status-error-border-default);\n    }\n    :host([type=\"danger\"][variant=\"primary\"]) .group > button {\n      background: var(--cg-color-status-error-text-default);\n      color: var(--cg-color-status-error-text-inverse);\n      border-color: transparent;\n    }\n    :host([type=\"danger\"]) .group > button:not(:disabled):hover,\n    :host([type=\"danger\"][variant=\"primary\"]) .group > button:not(:disabled):hover {\n      background: var(--cg-color-status-error-background-hover);\n    }\n    :host([type=\"danger\"]) .primary::after { background: color-mix(in srgb, var(--cg-color-status-error-text-default) 25%, transparent); }\n\n    /* Loading spinner on primary button */\n    .spinner {\n      width: var(--cg-spacing-16);\n      height: var(--cg-spacing-16);\n      border: var(--cg-border-width-100) solid currentColor;\n      border-right-color: transparent;\n      border-radius: var(--cg-border-radius-full);\n      animation: spin 600ms linear infinite;\n      margin-right: var(--cg-spacing-8);\n    }\n    @keyframes spin { to { transform: rotate(360deg); } }\n    :host([loading]) .primary { pointer-events: none; }\n\n    /* Menu positioning — visual styling inherited from menuListStyles.\n       cg-split-button uses fixed positioning + floating-ui placement computed in JS. */\n    .menu {\n      position: fixed;\n      z-index: var(--cg-z-index-500);\n    }\n    :host([menu-placement=\"bottom-start\"]) .menu { transform-origin: top left; }\n    :host([menu-placement=\"bottom-end\"]) .menu { transform-origin: top right; }\n    :host([menu-placement=\"top-start\"]) .menu { transform-origin: bottom left; }\n    :host([menu-placement=\"top-end\"]) .menu { transform-origin: bottom right; }\n  `];\n\n  @property() label = '';\n  @property({ reflect: true }) variant: 'primary' | 'secondary' | 'tertiary' = 'primary';\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n  @property({ reflect: true }) type: 'normal' | 'danger' = 'normal';\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ type: Boolean, reflect: true }) loading = false;\n  @property({ type: Array }) items: SplitButtonItem[] = [];\n  @property({ type: Boolean, reflect: true }) open = false;\n  @property({ attribute: 'menu-placement', reflect: true }) menuPlacement: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' = 'bottom-end';\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' = 'md';\n\n  @state() private _activeIndex = -1;\n  @query('.menu') private _menuEl!: HTMLElement;\n  @query('.chevron') private _chevronEl!: HTMLElement;\n\n  private _disposeOutsideClick: (() => void) | null = null;\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._disposeOutsideClick?.();\n    this._disposeOutsideClick = null;\n    document.removeEventListener('keydown', this._handleKeydown);\n  }\n\n  private _onPrimaryClick(e: Event): void {\n    e.stopPropagation();\n    if (this.disabled || this.loading) return;\n    this.dispatchEvent(new CustomEvent('cg-split-button-click', { bubbles: true, composed: true }));\n  }\n\n  private _toggle(): void {\n    if (this.disabled) return;\n    this.open ? this._close() : this._openMenu();\n  }\n\n  private _openMenu(): void {\n    if (this.open) return;\n    this.open = true;\n    this._activeIndex = -1;\n    this.dispatchEvent(new CustomEvent('cg-split-button-open', { bubbles: true, composed: true }));\n\n    requestAnimationFrame(() => {\n      if (!this._menuEl || !this._chevronEl) return;\n      applyFloatingPosition(this._chevronEl, this._menuEl, {\n        placement: this.menuPlacement, offset: 4, flip: true, shift: true,\n      });\n    });\n\n    this._disposeOutsideClick?.();\n    this._disposeOutsideClick = bindOutsideClick(this, () => this._close());\n    setTimeout(() => {\n      document.addEventListener('keydown', this._handleKeydown);\n    }, 0);\n  }\n\n  private _close(): void {\n    if (!this.open) return;\n    this.open = false;\n    this._activeIndex = -1;\n    this._disposeOutsideClick?.();\n    this._disposeOutsideClick = null;\n    document.removeEventListener('keydown', this._handleKeydown);\n    this.dispatchEvent(new CustomEvent('cg-split-button-close', { bubbles: true, composed: true }));\n  }\n\n  private _select(item: SplitButtonItem): void {\n    if (item.disabled || item.separator) return;\n    this.dispatchEvent(new CustomEvent('cg-split-button-select', {\n      detail: { id: item.id, item },\n      bubbles: true,\n      composed: true,\n    }));\n    this._close();\n  }\n\n  private _handleKeydown = (e: KeyboardEvent): void => {\n    if (!this.open) return;\n    const { index, handled } = handleRovingKey(e, {\n      items: this.items,\n      activeIndex: this._activeIndex,\n      isSkippable: i => Boolean(i.separator || i.disabled),\n      onSelect: item => this._select(item),\n      onEscape: () => this._close(),\n    });\n    if (handled) {\n      e.preventDefault();\n      this._activeIndex = index;\n    }\n  };\n\n  private _onPrimaryKeydown(e: KeyboardEvent): void {\n    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n      e.preventDefault();\n      this._openMenu();\n    }\n  }\n\n  override render() {\n    let selectableIdx = -1;\n    return html`\n      <div class=\"group\">\n        <button\n          class=\"primary\"\n          type=\"button\"\n          aria-label=${this.label}\n          ?disabled=${this.disabled || this.loading}\n          @click=${this._onPrimaryClick}\n          @keydown=${this._onPrimaryKeydown}\n        >\n          ${this.loading ? html`<span class=\"spinner\" aria-hidden=\"true\"></span>` : nothing}\n          ${this.label}\n        </button>\n        <button\n          class=\"chevron\"\n          type=\"button\"\n          aria-label=\"More actions\"\n          aria-haspopup=\"menu\"\n          aria-expanded=${this.open ? 'true' : 'false'}\n          ?disabled=${this.disabled}\n          @click=${this._toggle}\n        >\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M6 9l6 6 6-6\"/>\n          </svg>\n        </button>\n      </div>\n      <ul class=\"menu\" role=\"menu\" ?hidden=${!this.open}>\n        ${this.items.map((item, index) => {\n          if (item.separator) return html`<li role=\"separator\" class=\"divider\"></li>`;\n          selectableIdx++;\n          const isActive = selectableIdx === this._activeIndex;\n          return html`\n            <li role=\"none\">\n              <button\n                class=\"menu-item ${item.danger ? 'danger' : ''}\"\n                role=\"menuitem\"\n                ?disabled=${item.disabled}\n                data-active=${isActive ? 'true' : nothing}\n                style=\"--stagger-index: ${index}\"\n                @click=${() => this._select(item)}\n              >\n                ${item.icon ? html`<cg-icon class=\"menu-item-icon\" name=\"${item.icon}\" size=\"sm\"></cg-icon>` : nothing}\n                <span>${item.label}</span>\n                ${item.shortcut ? html`<span class=\"menu-item-shortcut\">${item.shortcut}</span>` : nothing}\n              </button>\n            </li>\n          `;\n        })}\n      </ul>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-split-button': CgSplitButton;\n  }\n}\n"],"names":["CgSplitButton","LitElement","e","index","handled","handleRovingKey","i","item","applyFloatingPosition","bindOutsideClick","selectableIdx","html","nothing","isActive","hostBase","reducedMotion","entranceStagger","menuListStyles","css","__decorateClass","property","state","query","customElement"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 import { css as p, LitElement as g, html as f } from "lit";
 import { property as s, customElement as h } from "lit/decorators.js";
-import { h as u, r as y } from "../../chunks/premium.css-9I4kHrsl.js";
+import { h as u, r as y } from "../../chunks/premium.css-DHekUEUt.js";
 var m = Object.defineProperty, d = Object.getOwnPropertyDescriptor, r = (c, o, n, i) => {
   for (var e = i > 1 ? void 0 : i ? d(o, n) : o, a = c.length - 1, l; a >= 0; a--)
     (l = c[a]) && (e = (i ? l(o, n, e) : l(e)) || e);

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

@@ -1,6 +1,6 @@
 import { css as v, LitElement as u, html as c, nothing as s } from "lit";
 import { property as n, customElement as p } from "lit/decorators.js";
-import { h, r as f } from "../../chunks/premium.css-9I4kHrsl.js";
+import { h, r as f } from "../../chunks/premium.css-DHekUEUt.js";
 var b = Object.defineProperty, m = Object.getOwnPropertyDescriptor, l = (e, t, r, i) => {
   for (var a = i > 1 ? void 0 : i ? m(t, r) : t, d = e.length - 1, g; d >= 0; d--)
     (g = e[d]) && (a = (i ? g(t, r, a) : g(a)) || a);

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

@@ -18,6 +18,9 @@ export declare class CgSwitch extends LitElement {
     constructor();
     static styles: import('lit').CSSResult[];
     label: string;
+    /** Accessible name when no visible label is rendered (host aria-label is
+     *  forwarded to the internal switch, which carries the role). */
+    ariaLabel: string | null;
     checked: boolean;
     disabled: boolean;
     error: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"cg-switch.d.ts","sourceRoot":"","sources":["../../../src/components/cg-switch/cg-switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1E;;;;;;;;;;;;GAYG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAA+B;;IASjD,OAAgB,MAAM,4BA4HnB;IAES,KAAK,SAAM;IACM,OAAO,UAAS;IACD,QAAQ,UAAS;IACjB,KAAK,UAAS;IACd,OAAO,UAAS;IAChB,OAAO,UAAS;IAChD,IAAI,SAAM;IAEb,OAAO,CAAC,OAAO,EAAE,cAAc;IAOxC,iBAAiB;IAIjB,wBAAwB,CAAC,KAAK,EAAE,MAAM;IAItC,OAAO,CAAC,OAAO;IASN,MAAM;CAyBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAAG,WAAW,EAAE,QAAQ,CAAC;KAAE;CAC3D"}
+{"version":3,"file":"cg-switch.d.ts","sourceRoot":"","sources":["../../../src/components/cg-switch/cg-switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1E;;;;;;;;;;;;GAYG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAA+B;;IASjD,OAAgB,MAAM,4BAoHnB;IAES,KAAK,SAAM;IACvB;qEACiE;IACjB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAQ;IACnD,OAAO,UAAS;IACD,QAAQ,UAAS;IACjB,KAAK,UAAS;IACd,OAAO,UAAS;IAChB,OAAO,UAAS;IAChD,IAAI,SAAM;IAEb,OAAO,CAAC,OAAO,EAAE,cAAc;IAOxC,iBAAiB;IAIjB,wBAAwB,CAAC,KAAK,EAAE,MAAM;IAItC,OAAO,CAAC,OAAO;IASN,MAAM;CAsBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAAG,WAAW,EAAE,QAAQ,CAAC;KAAE;CAC3D"}