@cognivo/components 0.8.0 → 0.8.2

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

@@ -1 +1 @@
-{"version":3,"file":"cg-checkbox.js","sources":["../../../src/components/cg-checkbox/cg-checkbox.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-checkbox\n * Checkbox with animated tick draw, spring bounce, and indeterminate state.\n * Supports rich label content via the default slot — links and other\n * interactive elements inside the label do not toggle the checkbox.\n *\n * @example\n * ```html\n * <cg-checkbox label=\"Accept terms\" description=\"Required to continue\"></cg-checkbox>\n * <cg-checkbox checked label=\"Notifications\"></cg-checkbox>\n * <cg-checkbox indeterminate label=\"Select all\"></cg-checkbox>\n * <cg-checkbox rounded=\"full\" checked label=\"Round checkbox\"></cg-checkbox>\n * <cg-checkbox>I agree to the <a href=\"/terms\">terms</a></cg-checkbox>\n * ```\n *\n * @slot - Default slot for label content (overrides `label` prop)\n * @slot description - Description content (overrides `description` prop)\n *\n * @fires {CustomEvent<{checked: boolean, value: string}>} cg-change - When toggled\n */\n@customElement('cg-checkbox')\nexport class CgCheckbox 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    :host { display: inline-block; }\n\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 {\n      pointer-events: none;\n    }\n    :host([disabled]) .box {\n      background: var(--cg-color-checkbox-background-disabled);\n      border-color: var(--cg-color-checkbox-border-disabled);\n    }\n    :host([disabled]) .check-icon {\n      color: var(--cg-color-checkbox-checkmark-disabled);\n    }\n\n    /* ── Box ── */\n    .box {\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-checkbox-border-default);\n      border-radius: var(--cg-border-radius-50);\n      background: transparent;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      position: relative;\n      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), background var(--cg-transition-duration-fast) var(--cg-transition-easing-default), box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default), transform var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-out);\n    }\n\n    /* ── Rounded variants ── */\n    :host([rounded=\"none\"]) .box { border-radius: 0; }\n    :host([rounded=\"sm\"]) .box { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .box { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .box { border-radius: var(--cg-border-radius-150); }\n    :host([rounded=\"full\"]) .box { border-radius: var(--cg-border-radius-full); }\n\n    /* Hover */\n    :host(:not([disabled])) label:hover .box {\n      border-color: var(--cg-color-checkbox-background-hover);\n    }\n\n    /* Pressed */\n    :host(:not([disabled])) label:active .box {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n\n    /* Focus ring */\n    label:focus-visible .box {\n      border-color: var(--cg-color-checkbox-border-focus);\n      box-shadow: 0 0 0 2px var(--cg-color-focus-ring-offset), 0 0 0 4px var(--cg-color-focus-ring);\n    }\n\n    /* ── Checked state ── */\n    .box.checked {\n      background: var(--cg-color-checkbox-background-checked);\n      border-color: var(--cg-color-checkbox-border-checked);\n      animation: boxPop var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out);\n    }\n\n    /* Indeterminate */\n    .box.indeterminate {\n      background: var(--cg-color-checkbox-background-checked);\n      border-color: var(--cg-color-checkbox-border-checked);\n    }\n\n    /* ── Animated tick — stroke reveal ── */\n    .check-icon {\n      width: var(--cg-spacing-12);\n      height: var(--cg-spacing-12);\n      color: var(--cg-color-checkbox-checkmark-default);\n      overflow: visible;\n    }\n\n    .check-icon .tick {\n      stroke-dasharray: 24;\n      stroke-dashoffset: 24;\n      animation: drawTick var(--cg-transition-duration-slow) 60ms var(--cg-transition-easing-ease-out) forwards;\n    }\n\n    .check-icon .dash {\n      stroke-dasharray: 14;\n      stroke-dashoffset: 14;\n      animation: drawDash var(--cg-transition-duration-default) 40ms var(--cg-transition-easing-ease-out) forwards;\n    }\n\n    @keyframes drawTick {\n      to { stroke-dashoffset: 0; }\n    }\n\n    @keyframes drawDash {\n      to { stroke-dashoffset: 0; }\n    }\n\n    @keyframes boxPop {\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    /* 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]) .box {\n      border-color: var(--cg-color-status-error-text-default);\n    }\n    :host([error]) .box.checked,\n    :host([error]) .box.indeterminate {\n      background: var(--cg-color-status-error-text-default);\n      border-color: var(--cg-color-status-error-text-default);\n    }\n    :host([error]) .label-text {\n      color: var(--cg-color-status-error-text-default);\n    }\n\n    /* ── Success state ── */\n    :host([success]) .box {\n      border-color: var(--cg-color-status-success-text-default);\n    }\n    :host([success]) .box.checked,\n    :host([success]) .box.indeterminate {\n      background: var(--cg-color-status-success-text-default);\n      border-color: var(--cg-color-status-success-text-default);\n    }\n    :host([success]) .label-text {\n      color: var(--cg-color-status-success-text-default);\n    }\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      margin-top: var(--cg-spacing-2);\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-checkbox-spin var(--cg-transition-duration-slow) linear infinite;\n    }\n    @keyframes cg-checkbox-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 }) indeterminate = 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 }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'sm';\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 || 'on') : 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 || 'on');\n  }\n\n  private _toggle(e: Event) {\n    e.preventDefault();\n    if (this.disabled || this.loading) return;\n    const target = e.target as HTMLElement | null;\n    if (target && target !== this) {\n      const interactive = target.closest(\n        'a, button, [role=\"button\"], [role=\"link\"], input:not([type=\"checkbox\"]), select, textarea'\n      );\n      if (interactive) return;\n    }\n    this.checked = !this.checked;\n    this.indeterminate = false;\n    this.dispatchEvent(new CustomEvent('cg-change', {\n      detail: { checked: this.checked, value: this.value },\n      bubbles: true, composed: true,\n    }));\n  }\n\n  override render() {\n    const state = this.indeterminate ? 'indeterminate' : this.checked ? 'checked' : '';\n\n    return html`\n      <label\n        tabindex=${this.disabled ? '-1' : '0'}\n        role=\"checkbox\"\n        aria-checked=${this.indeterminate ? 'mixed' : String(this.checked)}\n        aria-disabled=${String(this.disabled)}\n        aria-required=${this.required ? 'true' : 'false'}\n        aria-invalid=${this.error ? 'true' : 'false'}\n        aria-busy=${this.loading ? 'true' : 'false'}\n        @click=${this._toggle}\n        @keydown=${(e: KeyboardEvent) => { if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); this._toggle(e); } }}\n      >\n        <input type=\"checkbox\" .checked=${this.checked} .indeterminate=${this.indeterminate}\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`<span class=\"box ${state}\">\n          ${this.checked ? html`\n            <svg class=\"check-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <path class=\"tick\" d=\"M4 12L9 17L20 6\"></path>\n            </svg>\n          ` : nothing}\n          ${this.indeterminate ? html`\n            <svg class=\"check-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\">\n              <path class=\"dash\" d=\"M5 12h14\"></path>\n            </svg>\n          ` : nothing}\n        </span>`}\n\n        <span class=\"text-group\">\n          <span class=\"label-text\"><slot>${this.label}</slot></span>\n          <span class=\"description\"><slot name=\"description\">${this.description}</slot></span>\n        </span>\n      </label>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap { 'cg-checkbox': CgCheckbox; }\n}\n"],"names":["CgCheckbox","LitElement","changed","state","e","target","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}
+{"version":3,"file":"cg-checkbox.js","sources":["../../../src/components/cg-checkbox/cg-checkbox.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-checkbox\n * Checkbox with animated tick draw, spring bounce, and indeterminate state.\n *\n * @example\n * ```html\n * <cg-checkbox label=\"Accept terms\" description=\"Required to continue\"></cg-checkbox>\n * <cg-checkbox checked label=\"Notifications\"></cg-checkbox>\n * <cg-checkbox indeterminate label=\"Select all\"></cg-checkbox>\n * <cg-checkbox rounded=\"full\" checked label=\"Round checkbox\"></cg-checkbox>\n * ```\n *\n * @fires {CustomEvent<{checked: boolean, value: string}>} cg-change - When toggled\n */\n@customElement('cg-checkbox')\nexport class CgCheckbox 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    :host { display: inline-block; }\n\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 {\n      pointer-events: none;\n    }\n    :host([disabled]) .box {\n      background: var(--cg-color-checkbox-background-disabled);\n      border-color: var(--cg-color-checkbox-border-disabled);\n    }\n    :host([disabled]) .check-icon {\n      color: var(--cg-color-checkbox-checkmark-disabled);\n    }\n\n    /* ── Box ── */\n    .box {\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-checkbox-border-default);\n      border-radius: var(--cg-border-radius-50);\n      background: transparent;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      position: relative;\n      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), background var(--cg-transition-duration-fast) var(--cg-transition-easing-default), box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default), transform var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-out);\n    }\n\n    /* ── Rounded variants ── */\n    :host([rounded=\"none\"]) .box { border-radius: 0; }\n    :host([rounded=\"sm\"]) .box { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .box { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .box { border-radius: var(--cg-border-radius-150); }\n    :host([rounded=\"full\"]) .box { border-radius: var(--cg-border-radius-full); }\n\n    /* Hover — scoped so it doesn't override the error/success border, and\n       uses the accent BORDER token (not a -background- fill) for the edge. */\n    :host(:not([disabled]):not([error]):not([success])) label:hover .box {\n      border-color: var(--cg-color-checkbox-border-checked);\n    }\n\n    /* Pressed */\n    :host(:not([disabled])) label:active .box {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n\n    /* Focus ring */\n    label:focus-visible .box {\n      border-color: var(--cg-color-checkbox-border-focus);\n      box-shadow: 0 0 0 var(--cg-border-width-100) var(--cg-color-focus-ring-offset), 0 0 0 calc(var(--cg-border-width-100) * 2) var(--cg-color-focus-ring);\n    }\n\n    /* ── Checked state ── */\n    .box.checked {\n      background: var(--cg-color-checkbox-background-checked);\n      border-color: var(--cg-color-checkbox-border-checked);\n      animation: boxPop var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out);\n    }\n\n    /* Indeterminate — same spring entry as checked for consistent feedback. */\n    .box.indeterminate {\n      background: var(--cg-color-checkbox-background-checked);\n      border-color: var(--cg-color-checkbox-border-checked);\n      animation: boxPop var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out);\n    }\n\n    /* ── Animated tick — stroke reveal ── */\n    .check-icon {\n      width: var(--cg-spacing-12);\n      height: var(--cg-spacing-12);\n      color: var(--cg-color-checkbox-checkmark-default);\n      overflow: visible;\n    }\n\n    .check-icon .tick {\n      stroke-dasharray: 24;\n      stroke-dashoffset: 24;\n      animation: drawTick var(--cg-transition-duration-slow) 60ms var(--cg-transition-easing-ease-out) forwards;\n    }\n\n    .check-icon .dash {\n      stroke-dasharray: 14;\n      stroke-dashoffset: 14;\n      animation: drawDash var(--cg-transition-duration-default) 40ms var(--cg-transition-easing-ease-out) forwards;\n    }\n\n    @keyframes drawTick {\n      to { stroke-dashoffset: 0; }\n    }\n\n    @keyframes drawDash {\n      to { stroke-dashoffset: 0; }\n    }\n\n    @keyframes boxPop {\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    /* 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]) .box {\n      border-color: var(--cg-color-status-error-text-default);\n    }\n    :host([error]) .box.checked,\n    :host([error]) .box.indeterminate {\n      background: var(--cg-color-status-error-text-default);\n      border-color: var(--cg-color-status-error-text-default);\n    }\n    :host([error]) .label-text {\n      color: var(--cg-color-status-error-text-default);\n    }\n\n    /* ── Success state ── */\n    :host([success]) .box {\n      border-color: var(--cg-color-status-success-text-default);\n    }\n    :host([success]) .box.checked,\n    :host([success]) .box.indeterminate {\n      background: var(--cg-color-status-success-text-default);\n      border-color: var(--cg-color-status-success-text-default);\n    }\n    :host([success]) .label-text {\n      color: var(--cg-color-status-success-text-default);\n    }\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      margin-top: var(--cg-spacing-2);\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-checkbox-spin var(--cg-transition-duration-slow) linear infinite;\n    }\n    @keyframes cg-checkbox-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 }) indeterminate = 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 }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'sm';\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 || 'on') : 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 || 'on');\n  }\n\n  private _toggle(e: Event) {\n    e.preventDefault();\n    if (this.disabled || this.loading) return;\n    this.checked = !this.checked;\n    this.indeterminate = false;\n    this.dispatchEvent(new CustomEvent('cg-change', {\n      detail: { checked: this.checked, value: this.value },\n      bubbles: true, composed: true,\n    }));\n  }\n\n  override render() {\n    const state = this.indeterminate ? 'indeterminate' : this.checked ? 'checked' : '';\n\n    return html`\n      <label\n        tabindex=${this.disabled ? '-1' : '0'}\n        role=\"checkbox\"\n        aria-checked=${this.indeterminate ? 'mixed' : String(this.checked)}\n        aria-disabled=${String(this.disabled)}\n        aria-required=${this.required ? 'true' : 'false'}\n        aria-invalid=${this.error ? 'true' : 'false'}\n        aria-busy=${this.loading ? 'true' : 'false'}\n        @click=${this._toggle}\n        @keydown=${(e: KeyboardEvent) => { if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); this._toggle(e); } }}\n      >\n        <input type=\"checkbox\" .checked=${this.checked} .indeterminate=${this.indeterminate}\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`<span class=\"box ${state}\">\n          ${this.checked ? html`\n            <svg class=\"check-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <path class=\"tick\" d=\"M4 12L9 17L20 6\"></path>\n            </svg>\n          ` : nothing}\n          ${this.indeterminate ? html`\n            <svg class=\"check-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\">\n              <path class=\"dash\" d=\"M5 12h14\"></path>\n            </svg>\n          ` : nothing}\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-checkbox': CgCheckbox; }\n}\n"],"names":["CgCheckbox","LitElement","changed","state","e","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}

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

@@ -1,10 +1,10 @@
-import { css as u, LitElement as h, nothing as g, html as d } from "lit";
-import { property as a, customElement as v } from "lit/decorators.js";
-import { a as p, r as b } from "../../chunks/premium.css-9I4kHrsl.js";
-var f = Object.defineProperty, m = Object.getOwnPropertyDescriptor, t = (r, i, n, s) => {
-  for (var o = s > 1 ? void 0 : s ? m(i, n) : i, c = r.length - 1, l; c >= 0; c--)
-    (l = r[c]) && (o = (s ? l(i, n, o) : l(o)) || o);
-  return s && o && f(i, n, o), o;
+import { css as u, LitElement as h, nothing as n, html as g } from "lit";
+import { property as t, customElement as v } from "lit/decorators.js";
+import { a as p, r as b } from "../../chunks/premium.css-DHekUEUt.js";
+var f = Object.defineProperty, m = Object.getOwnPropertyDescriptor, a = (r, i, c, s) => {
+  for (var o = s > 1 ? void 0 : s ? m(i, c) : i, l = r.length - 1, d; l >= 0; l--)
+    (d = r[l]) && (o = (s ? d(i, c, o) : d(o)) || o);
+  return s && o && f(i, c, o), o;
 };
 let e = class extends h {
   constructor() {
@@ -25,22 +25,22 @@ let e = class extends h {
     }));
   }
   render() {
-    return d`
+    return g`
       <span
         class="chip ${this.disabled ? "disabled" : ""}"
         role="button"
         tabindex="${this.disabled ? "-1" : "0"}"
         aria-disabled="${this.disabled}"
         aria-pressed="${this.selected}"
-        aria-label="${this.label}"
+        aria-label="${this.label ? n : this.icon || n}"
         @click="${this._handleClick}"
         @keydown="${(r) => {
       (r.key === "Enter" || r.key === " ") && (r.preventDefault(), this._handleClick()), (r.key === "Delete" || r.key === "Backspace") && this.removable && (r.preventDefault(), this._handleRemove(r));
     }}"
       >
-        ${this.icon ? d`<span class="chip-icon">${this.icon}</span>` : g}
+        ${this.icon ? g`<span class="chip-icon">${this.icon}</span>` : n}
         <span class="chip-label">${this.label}</span>
-        ${this.removable && !this.disabled ? d`
+        ${this.removable && !this.disabled ? g`
           <button
             class="remove-btn"
             aria-label="Remove ${this.label}"
@@ -51,7 +51,7 @@ let e = class extends h {
               <path d="M7.5 2.5L2.5 7.5M2.5 2.5l5 5" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"/>
             </svg>
           </button>
-        ` : g}
+        ` : n}
       </span>
     `;
   }
@@ -191,7 +191,7 @@ e.styles = [p, b, u`
     .chip-label {
       overflow: hidden;
       text-overflow: ellipsis;
-      max-width: 200px;
+      max-width: var(--cg-spacing-192);
     }
 
     /* ── Remove button ── */
@@ -217,37 +217,37 @@ e.styles = [p, b, u`
         transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
     }
     .remove-btn:hover { opacity: 1; }
-    .remove-btn:active { transform: scale(0.9); }
+    .remove-btn:active { transform: scale(var(--cg-interaction-press-scale)); }
     .remove-btn:focus-visible {
       box-shadow: 0 0 0 var(--cg-spacing-2) var(--cg-overlay-accent-strong);
       outline: none;
     }
   `];
-t([
-  a({ type: String })
+a([
+  t({ type: String })
 ], e.prototype, "label", 2);
-t([
-  a({ type: String, reflect: !0 })
+a([
+  t({ type: String, reflect: !0 })
 ], e.prototype, "variant", 2);
-t([
-  a({ type: Boolean })
+a([
+  t({ type: Boolean })
 ], e.prototype, "removable", 2);
-t([
-  a({ type: String, reflect: !0 })
+a([
+  t({ type: String, reflect: !0 })
 ], e.prototype, "size", 2);
-t([
-  a({ reflect: !0 })
+a([
+  t({ reflect: !0 })
 ], e.prototype, "rounded", 2);
-t([
-  a({ type: String })
+a([
+  t({ type: String })
 ], e.prototype, "icon", 2);
-t([
-  a({ type: Boolean })
+a([
+  t({ type: Boolean })
 ], e.prototype, "disabled", 2);
-t([
-  a({ type: Boolean, reflect: !0 })
+a([
+  t({ type: Boolean, reflect: !0 })
 ], e.prototype, "selected", 2);
-e = t([
+e = a([
   v("cg-chip")
 ], e);
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"cg-chip.js","sources":["../../../src/components/cg-chip/cg-chip.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBase, reducedMotion } from '../../styles/index.js';\n\n/**\n * @element cg-chip\n * Pill-shaped tag/chip with neutral default, color variants, optional icon,\n * removable X button, and toggleable selected state.\n *\n * @example\n * ```html\n * <cg-chip label=\"TypeScript\"></cg-chip>\n * <cg-chip label=\"Bug\" variant=\"error\" removable></cg-chip>\n * <cg-chip label=\"Active\" selected></cg-chip>\n * ```\n *\n * @fires {CustomEvent<{label: string, selected: boolean}>} cg-chip-click - When the chip is clicked\n * @fires {CustomEvent<{label: string}>} cg-chip-remove - When the remove button is clicked\n */\n@customElement('cg-chip')\nexport class CgChip extends LitElement {\n  static override styles = [hostBase, reducedMotion, css`\n    .chip {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-surface-cards-background);\n      color: var(--cg-color-surface-base-text);\n      cursor: pointer;\n      font-family: inherit;\n      font-weight: var(--cg-font-weight-medium);\n      line-height: 1;\n      white-space: nowrap;\n      user-select: none;\n      -webkit-font-smoothing: antialiased;\n      transition:\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n\n    /* ── Sizes ── */\n    :host([size=\"sm\"]) .chip {\n      padding: var(--cg-spacing-2) var(--cg-spacing-8);\n      font-size: var(--cg-font-size-xs);\n      height: var(--cg-spacing-24);\n    }\n    :host([size=\"md\"]) .chip {\n      padding: var(--cg-spacing-4) var(--cg-spacing-12);\n      font-size: var(--cg-font-size-sm);\n      height: var(--cg-spacing-32);\n    }\n\n    /* ── Hover ── */\n    .chip:hover:not(.disabled) {\n      border-color: var(--cg-color-input-border-hover);\n      transform: scale(1.02);\n    }\n\n    /* ── Press ── */\n    .chip:active:not(.disabled) {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n\n    /* ── Focus ring ── */\n    .chip:focus-visible {\n      box-shadow:\n        0 0 0 var(--cg-spacing-2) var(--cg-overlay-accent-strong);\n      outline: none;\n      outline-offset: var(--cg-outline-offset-default);\n    }\n\n    /* ── Disabled ── */\n    .chip.disabled {\n      opacity: 0.45;\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n\n    /* ── Variant: success ── */\n    :host([variant=\"success\"]) .chip {\n      background: var(--cg-color-status-success-background-default);\n      color: var(--cg-color-status-success-text-default);\n      border-color: var(--cg-color-status-success-border-default);\n    }\n    :host([variant=\"success\"]) .chip:hover:not(.disabled) {\n      background: var(--cg-color-status-success-background-hover);\n    }\n\n    /* ── Variant: warning ── */\n    :host([variant=\"warning\"]) .chip {\n      background: var(--cg-color-status-warning-background-default);\n      color: var(--cg-color-status-warning-text-default);\n      border-color: var(--cg-color-status-warning-border-default);\n    }\n    :host([variant=\"warning\"]) .chip:hover:not(.disabled) {\n      background: var(--cg-color-status-warning-background-hover);\n    }\n\n    /* ── Variant: error ── */\n    :host([variant=\"error\"]) .chip {\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([variant=\"error\"]) .chip:hover:not(.disabled) {\n      background: var(--cg-color-status-error-background-hover);\n    }\n\n    /* ── Variant: info ── */\n    :host([variant=\"info\"]) .chip {\n      background: var(--cg-color-status-info-background-default);\n      color: var(--cg-color-status-info-text-default);\n      border-color: var(--cg-color-status-info-border-default);\n    }\n    :host([variant=\"info\"]) .chip:hover:not(.disabled) {\n      background: var(--cg-color-status-info-background-hover);\n    }\n\n    /* ── Selected state ── */\n    :host([selected]) .chip {\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-background-default);\n    }\n    :host([selected]) .chip:hover:not(.disabled) {\n      background: var(--cg-color-action-primary-background-hover);\n    }\n\n    /* ── Rounded variants ── */\n    :host([rounded=\"none\"]) .chip { border-radius: 0; }\n    :host([rounded=\"sm\"]) .chip { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .chip { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .chip { border-radius: var(--cg-border-radius-150); }\n    :host([rounded=\"full\"]) .chip { border-radius: var(--cg-border-radius-full); }\n\n    /* ── Icon ── */\n    .chip-icon {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      width: var(--cg-icon-size-100);\n      height: var(--cg-icon-size-100);\n      font-size: var(--cg-font-size-xs);\n    }\n\n    /* ── Label ── */\n    .chip-label {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      max-width: 200px;\n    }\n\n    /* ── Remove button ── */\n    .remove-btn {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--cg-icon-size-100);\n      height: var(--cg-icon-size-100);\n      margin-left: var(--cg-spacing-2);\n      margin-right: calc(-1 * var(--cg-spacing-4));\n      border: none;\n      border-radius: 50%;\n      background: transparent;\n      color: inherit;\n      cursor: pointer;\n      padding: 0;\n      flex-shrink: 0;\n      opacity: 0.6;\n      transition:\n        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .remove-btn:hover { opacity: 1; }\n    .remove-btn:active { transform: scale(0.9); }\n    .remove-btn:focus-visible {\n      box-shadow: 0 0 0 var(--cg-spacing-2) var(--cg-overlay-accent-strong);\n      outline: none;\n    }\n  `];\n\n  @property({ type: String }) label = '';\n  @property({ type: String, reflect: true }) variant: 'default' | 'success' | 'warning' | 'error' | 'info' = 'default';\n  @property({ type: Boolean }) removable = false;\n  @property({ type: String, reflect: true }) size: 'sm' | 'md' = 'md';\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'full';\n  @property({ type: String }) icon = '';\n  @property({ type: Boolean }) disabled = false;\n  @property({ type: Boolean, reflect: true }) selected = false;\n\n  private _handleClick() {\n    if (this.disabled) return;\n    this.selected = !this.selected;\n    this.dispatchEvent(new CustomEvent('cg-chip-click', {\n      bubbles: true,\n      composed: true,\n      detail: { label: this.label, selected: this.selected },\n    }));\n  }\n\n  private _handleRemove(e: Event) {\n    e.stopPropagation();\n    if (this.disabled) return;\n    this.dispatchEvent(new CustomEvent('cg-chip-remove', {\n      bubbles: true,\n      composed: true,\n      detail: { label: this.label },\n    }));\n  }\n\n  override render() {\n    return html`\n      <span\n        class=\"chip ${this.disabled ? 'disabled' : ''}\"\n        role=\"button\"\n        tabindex=\"${this.disabled ? '-1' : '0'}\"\n        aria-disabled=\"${this.disabled}\"\n        aria-pressed=\"${this.selected}\"\n        aria-label=\"${this.label}\"\n        @click=\"${this._handleClick}\"\n        @keydown=\"${(e: KeyboardEvent) => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            this._handleClick();\n          }\n          if ((e.key === 'Delete' || e.key === 'Backspace') && this.removable) {\n            e.preventDefault();\n            this._handleRemove(e);\n          }\n        }}\"\n      >\n        ${this.icon ? html`<span class=\"chip-icon\">${this.icon}</span>` : nothing}\n        <span class=\"chip-label\">${this.label}</span>\n        ${this.removable && !this.disabled ? html`\n          <button\n            class=\"remove-btn\"\n            aria-label=\"Remove ${this.label}\"\n            tabindex=\"-1\"\n            @click=\"${this._handleRemove}\"\n          >\n            <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" aria-hidden=\"true\">\n              <path d=\"M7.5 2.5L2.5 7.5M2.5 2.5l5 5\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\"/>\n            </svg>\n          </button>\n        ` : nothing}\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-chip': CgChip;\n  }\n}\n"],"names":["CgChip","LitElement","e","html","nothing","hostBase","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}
+{"version":3,"file":"cg-chip.js","sources":["../../../src/components/cg-chip/cg-chip.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBase, reducedMotion } from '../../styles/index.js';\n\n/**\n * @element cg-chip\n * Pill-shaped tag/chip with neutral default, color variants, optional icon,\n * removable X button, and toggleable selected state.\n *\n * @example\n * ```html\n * <cg-chip label=\"TypeScript\"></cg-chip>\n * <cg-chip label=\"Bug\" variant=\"error\" removable></cg-chip>\n * <cg-chip label=\"Active\" selected></cg-chip>\n * ```\n *\n * @fires {CustomEvent<{label: string, selected: boolean}>} cg-chip-click - When the chip is clicked\n * @fires {CustomEvent<{label: string}>} cg-chip-remove - When the remove button is clicked\n */\n@customElement('cg-chip')\nexport class CgChip extends LitElement {\n  static override styles = [hostBase, reducedMotion, css`\n    .chip {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-surface-cards-background);\n      color: var(--cg-color-surface-base-text);\n      cursor: pointer;\n      font-family: inherit;\n      font-weight: var(--cg-font-weight-medium);\n      line-height: 1;\n      white-space: nowrap;\n      user-select: none;\n      -webkit-font-smoothing: antialiased;\n      transition:\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n\n    /* ── Sizes ── */\n    :host([size=\"sm\"]) .chip {\n      padding: var(--cg-spacing-2) var(--cg-spacing-8);\n      font-size: var(--cg-font-size-xs);\n      height: var(--cg-spacing-24);\n    }\n    :host([size=\"md\"]) .chip {\n      padding: var(--cg-spacing-4) var(--cg-spacing-12);\n      font-size: var(--cg-font-size-sm);\n      height: var(--cg-spacing-32);\n    }\n\n    /* ── Hover ── */\n    .chip:hover:not(.disabled) {\n      border-color: var(--cg-color-input-border-hover);\n      transform: scale(1.02);\n    }\n\n    /* ── Press ── */\n    .chip:active:not(.disabled) {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n\n    /* ── Focus ring ── */\n    .chip:focus-visible {\n      box-shadow:\n        0 0 0 var(--cg-spacing-2) var(--cg-overlay-accent-strong);\n      outline: none;\n      outline-offset: var(--cg-outline-offset-default);\n    }\n\n    /* ── Disabled ── */\n    .chip.disabled {\n      opacity: 0.45;\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n\n    /* ── Variant: success ── */\n    :host([variant=\"success\"]) .chip {\n      background: var(--cg-color-status-success-background-default);\n      color: var(--cg-color-status-success-text-default);\n      border-color: var(--cg-color-status-success-border-default);\n    }\n    :host([variant=\"success\"]) .chip:hover:not(.disabled) {\n      background: var(--cg-color-status-success-background-hover);\n    }\n\n    /* ── Variant: warning ── */\n    :host([variant=\"warning\"]) .chip {\n      background: var(--cg-color-status-warning-background-default);\n      color: var(--cg-color-status-warning-text-default);\n      border-color: var(--cg-color-status-warning-border-default);\n    }\n    :host([variant=\"warning\"]) .chip:hover:not(.disabled) {\n      background: var(--cg-color-status-warning-background-hover);\n    }\n\n    /* ── Variant: error ── */\n    :host([variant=\"error\"]) .chip {\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([variant=\"error\"]) .chip:hover:not(.disabled) {\n      background: var(--cg-color-status-error-background-hover);\n    }\n\n    /* ── Variant: info ── */\n    :host([variant=\"info\"]) .chip {\n      background: var(--cg-color-status-info-background-default);\n      color: var(--cg-color-status-info-text-default);\n      border-color: var(--cg-color-status-info-border-default);\n    }\n    :host([variant=\"info\"]) .chip:hover:not(.disabled) {\n      background: var(--cg-color-status-info-background-hover);\n    }\n\n    /* ── Selected state ── */\n    :host([selected]) .chip {\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-background-default);\n    }\n    :host([selected]) .chip:hover:not(.disabled) {\n      background: var(--cg-color-action-primary-background-hover);\n    }\n\n    /* ── Rounded variants ── */\n    :host([rounded=\"none\"]) .chip { border-radius: 0; }\n    :host([rounded=\"sm\"]) .chip { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .chip { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .chip { border-radius: var(--cg-border-radius-150); }\n    :host([rounded=\"full\"]) .chip { border-radius: var(--cg-border-radius-full); }\n\n    /* ── Icon ── */\n    .chip-icon {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      width: var(--cg-icon-size-100);\n      height: var(--cg-icon-size-100);\n      font-size: var(--cg-font-size-xs);\n    }\n\n    /* ── Label ── */\n    .chip-label {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      max-width: var(--cg-spacing-192);\n    }\n\n    /* ── Remove button ── */\n    .remove-btn {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--cg-icon-size-100);\n      height: var(--cg-icon-size-100);\n      margin-left: var(--cg-spacing-2);\n      margin-right: calc(-1 * var(--cg-spacing-4));\n      border: none;\n      border-radius: 50%;\n      background: transparent;\n      color: inherit;\n      cursor: pointer;\n      padding: 0;\n      flex-shrink: 0;\n      opacity: 0.6;\n      transition:\n        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .remove-btn:hover { opacity: 1; }\n    .remove-btn:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .remove-btn:focus-visible {\n      box-shadow: 0 0 0 var(--cg-spacing-2) var(--cg-overlay-accent-strong);\n      outline: none;\n    }\n  `];\n\n  @property({ type: String }) label = '';\n  @property({ type: String, reflect: true }) variant: 'default' | 'success' | 'warning' | 'error' | 'info' = 'default';\n  @property({ type: Boolean }) removable = false;\n  @property({ type: String, reflect: true }) size: 'sm' | 'md' = 'md';\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'full';\n  @property({ type: String }) icon = '';\n  @property({ type: Boolean }) disabled = false;\n  @property({ type: Boolean, reflect: true }) selected = false;\n\n  private _handleClick() {\n    if (this.disabled) return;\n    this.selected = !this.selected;\n    this.dispatchEvent(new CustomEvent('cg-chip-click', {\n      bubbles: true,\n      composed: true,\n      detail: { label: this.label, selected: this.selected },\n    }));\n  }\n\n  private _handleRemove(e: Event) {\n    e.stopPropagation();\n    if (this.disabled) return;\n    this.dispatchEvent(new CustomEvent('cg-chip-remove', {\n      bubbles: true,\n      composed: true,\n      detail: { label: this.label },\n    }));\n  }\n\n  override render() {\n    return html`\n      <span\n        class=\"chip ${this.disabled ? 'disabled' : ''}\"\n        role=\"button\"\n        tabindex=\"${this.disabled ? '-1' : '0'}\"\n        aria-disabled=\"${this.disabled}\"\n        aria-pressed=\"${this.selected}\"\n        aria-label=\"${this.label ? nothing : (this.icon || nothing)}\"\n        @click=\"${this._handleClick}\"\n        @keydown=\"${(e: KeyboardEvent) => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            this._handleClick();\n          }\n          if ((e.key === 'Delete' || e.key === 'Backspace') && this.removable) {\n            e.preventDefault();\n            this._handleRemove(e);\n          }\n        }}\"\n      >\n        ${this.icon ? html`<span class=\"chip-icon\">${this.icon}</span>` : nothing}\n        <span class=\"chip-label\">${this.label}</span>\n        ${this.removable && !this.disabled ? html`\n          <button\n            class=\"remove-btn\"\n            aria-label=\"Remove ${this.label}\"\n            tabindex=\"-1\"\n            @click=\"${this._handleRemove}\"\n          >\n            <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" aria-hidden=\"true\">\n              <path d=\"M7.5 2.5L2.5 7.5M2.5 2.5l5 5\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\"/>\n            </svg>\n          </button>\n        ` : nothing}\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-chip': CgChip;\n  }\n}\n"],"names":["CgChip","LitElement","e","html","nothing","hostBase","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/components/cg-code-block/cg-code-block.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cg-code-block.d.ts","sourceRoot":"","sources":["../../../src/components/cg-code-block/cg-code-block.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAgDrD,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,4BAoNnB;IAES,IAAI,SAAM;IACO,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC7D,QAAQ,SAAM;IACd,QAAQ,SAAM;IAC6C,WAAW,UAAS;IAC/C,IAAI,UAAS;IAC5B,WAAW,UAAS;IAExC,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,UAAU,CAAQ;YAErB,KAAK;IAQV,MAAM;IA+Cf,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,WAAW;CAKpB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAAG,eAAe,EAAE,WAAW,CAAC;KAAE;CAClE"}
+{"version":3,"file":"cg-code-block.d.ts","sourceRoot":"","sources":["../../../src/components/cg-code-block/cg-code-block.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AA6CrD,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,4BAkNnB;IAES,IAAI,SAAM;IACO,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC7D,QAAQ,SAAM;IACd,QAAQ,SAAM;IAC6C,WAAW,UAAS;IAC/C,IAAI,UAAS;IAC5B,WAAW,UAAS;IAExC,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,UAAU,CAAQ;YAErB,KAAK;IAQV,MAAM;IAmDf,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,WAAW;CAKpB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAAG,eAAe,EAAE,WAAW,CAAC;KAAE;CAClE"}

package/dist/components/cg-code-block/cg-code-block.js

@@ -1,10 +1,10 @@
-import { css as v, LitElement as f, nothing as p, html as s } from "lit";
+import { css as v, LitElement as f, nothing as p, html as c } from "lit";
 import { property as l, state as h, customElement as b } from "lit/decorators.js";
-import { h as m, r as y } from "../../chunks/premium.css-9I4kHrsl.js";
-var w = Object.defineProperty, x = Object.getOwnPropertyDescriptor, c = (o, e, n, a) => {
-  for (var r = a > 1 ? void 0 : a ? x(e, n) : e, i = o.length - 1, g; i >= 0; i--)
-    (g = o[i]) && (r = (a ? g(e, n, r) : g(r)) || r);
-  return a && r && w(e, n, r), r;
+import { h as m, r as y } from "../../chunks/premium.css-DHekUEUt.js";
+var w = Object.defineProperty, x = Object.getOwnPropertyDescriptor, n = (o, e, i, a) => {
+  for (var r = a > 1 ? void 0 : a ? x(e, i) : e, s = o.length - 1, g; s >= 0; s--)
+    (g = o[s]) && (r = (a ? g(e, i, r) : g(r)) || r);
+  return a && r && w(e, i, r), r;
 };
 const d = {
   keyword: /\b(const|let|var|function|return|if|else|for|while|import|export|from|class|extends|new|this|async|await|try|catch|throw|switch|case|break|default|typeof|instanceof|interface|type|enum|public|private|protected|static|override|readonly|abstract|implements|def|lambda|print|self|True|False|None|SELECT|FROM|WHERE|JOIN|INSERT|UPDATE|DELETE|CREATE|DROP|ALTER|AND|OR|NOT|IN|IS|NULL|GROUP|ORDER|BY|HAVING|LIMIT|AS|ON|SET|INTO|VALUES)\b/g,
@@ -15,8 +15,8 @@ const d = {
 };
 function u(o) {
   let e = o.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-  const n = [], a = (r, i) => (n.push(`<span class="hl-${r}">${i}</span>`), `\0${n.length - 1}\0`);
-  return e = e.replace(d.comment, (r) => a("comment", r)), e = e.replace(d.string, (r) => a("string", r)), e = e.replace(d.keyword, (r) => a("keyword", r)), e = e.replace(d.function, (r, i) => a("function", i)), e = e.replace(d.number, (r) => a("number", r)), e = e.replace(/\x00(\d+)\x00/g, (r, i) => n[Number(i)]), e;
+  const i = [], a = (r, s) => (i.push(`<span class="hl-${r}">${s}</span>`), `\0${i.length - 1}\0`);
+  return e = e.replace(d.comment, (r) => a("comment", r)), e = e.replace(d.string, (r) => a("string", r)), e = e.replace(d.keyword, (r) => a("keyword", r)), e = e.replace(d.function, (r, s) => a("function", s)), e = e.replace(d.number, (r) => a("number", r)), e = e.replace(/\x00(\d+)\x00/g, (r, s) => i[Number(s)]), e;
 }
 let t = class extends f {
   constructor() {
@@ -32,8 +32,8 @@ let t = class extends f {
   }
   render() {
     const o = this.code.split(`
-`), e = this.collapsible && o.length > 15, n = u(this.code);
-    return s`
+`), e = this.collapsible && o.length > 15, i = u(this.code);
+    return c`
       <div class="wrapper">
         <div class="header">
           <div class="header-left">
@@ -42,28 +42,32 @@ let t = class extends f {
               <span class="dot dot-yellow"></span>
               <span class="dot dot-green"></span>
             </div>
-            ${this.filename ? s`<span class="filename">${this.filename}</span>` : p}
+            ${this.filename ? c`<span class="filename">${this.filename}</span>` : p}
           </div>
           <div class="actions">
-            ${this.language ? s`<span class="language">${this.language}</span>` : p}
-            <button class="copy-btn ${this._copied ? "copied" : ""}" @click=${this._copy} aria-label="Copy code">
-              ${this._copied ? s`<cg-icon name="check" size="xs"></cg-icon> Copied` : s`<cg-icon name="copy" size="xs"></cg-icon> Copy`}
+            ${this.language ? c`<span class="language">${this.language}</span>` : p}
+            <button class="copy-btn ${this._copied ? "copied" : ""}" @click=${this._copy} aria-label=${this._copied ? "Code copied" : "Copy code"}>
+              ${this._copied ? c`<cg-icon name="check" size="xs"></cg-icon> Copied` : c`<cg-icon name="copy" size="xs"></cg-icon> Copy`}
             </button>
             <span class="sr-only" role="status" aria-live="polite">${this._copied ? "Copied!" : ""}</span>
           </div>
         </div>
 
-        <div class="code-area ${e && this._collapsed ? "collapsed" : ""}">
-          <pre>${this.lineNumbers ? o.map((a) => s`<span class="line">${this._highlightLine(a)}\n</span>`) : s`${this._unsafeHTML(n)}`}</pre>
+        <div id="code-area" class="code-area ${e && this._collapsed ? "collapsed" : ""}">
+          <pre>${this.lineNumbers ? o.map((a) => c`<span class="line">${this._highlightLine(a)}\n</span>`) : c`${this._unsafeHTML(i)}`}</pre>
         </div>
 
-        ${e && this._collapsed ? s`
+        ${e ? c`
           <div class="expand-bar">
-            <button class="expand-btn" aria-expanded="false" @click=${() => {
-      this._collapsed = !1;
+            <button
+              class="expand-btn"
+              aria-expanded=${this._collapsed ? "false" : "true"}
+              aria-controls="code-area"
+              @click=${() => {
+      this._collapsed = !this._collapsed;
     }}>
-              <cg-icon name="chevron-down" size="xs"></cg-icon>
-              Show all ${o.length} lines
+              <cg-icon name=${this._collapsed ? "chevron-down" : "chevron-up"} size="xs"></cg-icon>
+              ${this._collapsed ? c`Show all ${o.length} lines` : c`Show less`}
             </button>
           </div>
         ` : p}
@@ -148,7 +152,7 @@ t.styles = [m, y, v`
       font-size: var(--cg-font-size-xs);
       font-weight: var(--cg-font-weight-medium);
       text-transform: uppercase;
-      letter-spacing: 0.04em;
+      letter-spacing: var(--cg-letter-spacing-wider);
     }
 
     .copy-btn {
@@ -230,8 +234,6 @@ t.styles = [m, y, v`
     .hl-comment { color: var(--cg-color-code-comment); font-style: italic; }
     .hl-number { color: var(--cg-color-code-number); }
     .hl-function { color: var(--cg-color-code-function); }
-    .hl-tag { color: var(--cg-color-code-keyword); }
-    .hl-attr { color: var(--cg-color-code-number); }
 
     /* ── Expand button ── */
     .expand-bar {
@@ -291,34 +293,34 @@ t.styles = [m, y, v`
     :host([rounded="md"]) .wrapper { border-radius: var(--cg-border-radius-150); }
     :host([rounded="lg"]) .wrapper { border-radius: var(--cg-border-radius-200); }
   `];
-c([
+n([
   l()
 ], t.prototype, "code", 2);
-c([
+n([
   l({ reflect: !0 })
 ], t.prototype, "rounded", 2);
-c([
+n([
   l()
 ], t.prototype, "language", 2);
-c([
+n([
   l()
 ], t.prototype, "filename", 2);
-c([
+n([
   l({ type: Boolean, attribute: "line-numbers", reflect: !0 })
 ], t.prototype, "lineNumbers", 2);
-c([
+n([
   l({ type: Boolean, reflect: !0 })
 ], t.prototype, "wrap", 2);
-c([
+n([
   l({ type: Boolean })
 ], t.prototype, "collapsible", 2);
-c([
+n([
   h()
 ], t.prototype, "_copied", 2);
-c([
+n([
   h()
 ], t.prototype, "_collapsed", 2);
-t = c([
+t = n([
   b("cg-code-block")
 ], t);
 export {

package/dist/components/cg-code-block/cg-code-block.js.map

@@ -1 +1 @@
-{"version":3,"file":"cg-code-block.js","sources":["../../../src/components/cg-code-block/cg-code-block.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/**\n * <cg-code-block> — Code display with syntax highlighting, copy button, and line numbers.\n *\n * @example\n * ```html\n * <cg-code-block code=\"const x = 1;\" language=\"javascript\" line-numbers></cg-code-block>\n * ```\n *\n * @cssprop --cg-color-code-background - Block background\n * @cssprop --cg-color-code-text - Text color\n * @cssprop --cg-color-code-keyword - Keyword highlight color\n */\n\nconst KEYWORD_PATTERNS: Record<string, RegExp> = {\n  keyword: /\\b(const|let|var|function|return|if|else|for|while|import|export|from|class|extends|new|this|async|await|try|catch|throw|switch|case|break|default|typeof|instanceof|interface|type|enum|public|private|protected|static|override|readonly|abstract|implements|def|lambda|print|self|True|False|None|SELECT|FROM|WHERE|JOIN|INSERT|UPDATE|DELETE|CREATE|DROP|ALTER|AND|OR|NOT|IN|IS|NULL|GROUP|ORDER|BY|HAVING|LIMIT|AS|ON|SET|INTO|VALUES)\\b/g,\n  string: /([\"'`])(?:(?!\\1|\\\\).|\\\\.)*?\\1/g,\n  comment: /\\/\\/.*$|\\/\\*[\\s\\S]*?\\*\\/|#.*$/gm,\n  number: /\\b\\d+\\.?\\d*\\b/g,\n  function: /\\b([a-zA-Z_]\\w*)\\s*(?=\\()/g,\n  tag: /(&lt;\\/?[a-zA-Z][a-zA-Z0-9-]*)/g,\n  attr: /\\b([a-zA-Z-]+)(?==)/g,\n  punctuation: /[{}()\\[\\];,.:]/g,\n};\n\nfunction highlight(code: string): string {\n  let escaped = code.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');\n\n  const tokens: string[] = [];\n  const placeholder = (cls: string, text: string) => {\n    tokens.push(`<span class=\"hl-${cls}\">${text}</span>`);\n    return `\\x00${tokens.length - 1}\\x00`;\n  };\n\n  escaped = escaped.replace(KEYWORD_PATTERNS.comment!, m => placeholder('comment', m));\n  escaped = escaped.replace(KEYWORD_PATTERNS.string!, m => placeholder('string', m));\n  escaped = escaped.replace(KEYWORD_PATTERNS.keyword!, m => placeholder('keyword', m));\n  escaped = escaped.replace(KEYWORD_PATTERNS.function!, (_, name) => placeholder('function', name));\n  escaped = escaped.replace(KEYWORD_PATTERNS.number!, m => placeholder('number', m));\n\n  escaped = escaped.replace(/\\x00(\\d+)\\x00/g, (_, idx) => tokens[Number(idx)]!);\n\n  return escaped;\n}\n\n@customElement('cg-code-block')\nexport class CgCodeBlock extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    .wrapper {\n      background: var(--cg-color-code-background);\n      border-radius: var(--cg-border-radius-200);\n      overflow: hidden;\n      border: var(--cg-border-width-50) solid var(--cg-color-code-border);\n    }\n\n    /* ── Header ── */\n    .header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      gap: var(--cg-spacing-16);\n      padding: var(--cg-spacing-8) var(--cg-spacing-16);\n      min-height: var(--cg-spacing-48);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-code-border);\n    }\n\n    .header-left {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-16);\n      min-width: 0;\n      flex: 1;\n    }\n\n    .dots {\n      display: flex;\n      gap: var(--cg-spacing-6);\n      flex-shrink: 0;\n    }\n    .dot {\n      width: var(--cg-spacing-12);\n      height: var(--cg-spacing-12);\n      border-radius: var(--cg-border-radius-full);\n    }\n    .dot-red { background: var(--cg-color-chart-8-background); }\n    .dot-yellow { background: var(--cg-color-chart-7-background); }\n    .dot-green { background: var(--cg-color-chart-3-background); }\n\n    .filename {\n      font-family: var(--cg-font-family-mono);\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-code-text);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      min-width: 0;\n    }\n\n    .actions {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      flex-shrink: 0;\n    }\n\n    .language {\n      display: inline-flex;\n      align-items: center;\n      padding: var(--cg-spacing-2) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-50);\n      background: var(--cg-color-action-tertiary-background-hover);\n      color: var(--cg-color-code-muted);\n      font-family: var(--cg-font-family-mono);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-medium);\n      text-transform: uppercase;\n      letter-spacing: 0.04em;\n    }\n\n    .copy-btn {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-6);\n      height: var(--cg-spacing-32);\n      padding: 0 var(--cg-spacing-12);\n      border-radius: var(--cg-border-radius-50);\n      background: transparent;\n      border: none;\n      color: var(--cg-color-code-muted);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-medium);\n      cursor: pointer;\n      font-family: inherit;\n      transition:\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .copy-btn:hover {\n      background: var(--cg-color-action-tertiary-background-hover);\n      color: var(--cg-color-code-text);\n    }\n    .copy-btn:active {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n    .copy-btn.copied {\n      color: var(--cg-color-status-success-text-default);\n    }\n    .copy-btn:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 var(--cg-border-width-100) var(--cg-color-focus-ring);\n    }\n\n    /* ── Code area ── */\n    .code-area {\n      overflow-x: auto;\n      overflow-y: auto;\n    }\n    .code-area.collapsed { max-height: var(--cg-spacing-256); }\n\n    pre {\n      margin: 0;\n      padding: var(--cg-spacing-20) var(--cg-spacing-24);\n      font-family: var(--cg-font-family-mono);\n      font-size: var(--cg-font-size-sm);\n      line-height: var(--cg-line-height-relaxed);\n      color: var(--cg-color-code-text);\n      tab-size: 2;\n      counter-reset: line;\n      font-variant-numeric: tabular-nums;\n    }\n\n    :host([wrap]) pre { white-space: pre-wrap; word-break: break-all; }\n\n    /* ── Line numbers ── */\n    .line {\n      display: block;\n    }\n    :host([line-numbers]) .line::before {\n      counter-increment: line;\n      content: counter(line);\n      display: inline-block;\n      width: 3ch;\n      padding-right: var(--cg-spacing-16);\n      margin-right: var(--cg-spacing-16);\n      border-right: var(--cg-border-width-50) solid var(--cg-color-code-border);\n      color: var(--cg-color-code-muted);\n      text-align: right;\n      user-select: none;\n      opacity: 0.6;\n    }\n\n    /* ── Syntax highlighting ── */\n    .hl-keyword { color: var(--cg-color-code-keyword); font-weight: var(--cg-font-weight-medium); }\n    .hl-string { color: var(--cg-color-code-string); }\n    .hl-comment { color: var(--cg-color-code-comment); font-style: italic; }\n    .hl-number { color: var(--cg-color-code-number); }\n    .hl-function { color: var(--cg-color-code-function); }\n    .hl-tag { color: var(--cg-color-code-keyword); }\n    .hl-attr { color: var(--cg-color-code-number); }\n\n    /* ── Expand button ── */\n    .expand-bar {\n      display: flex;\n      justify-content: center;\n      padding: var(--cg-spacing-16) var(--cg-spacing-12) var(--cg-spacing-12);\n      background: linear-gradient(transparent, var(--cg-color-code-background) 60%);\n      margin-top: calc(var(--cg-spacing-48) * -1);\n      position: relative;\n    }\n    .expand-btn {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-6);\n      height: var(--cg-spacing-32);\n      padding: 0 var(--cg-spacing-16);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-code-muted);\n      background: var(--cg-color-code-surface);\n      border: var(--cg-border-width-50) solid var(--cg-color-code-border);\n      border-radius: var(--cg-border-radius-full);\n      cursor: pointer;\n      font-family: inherit;\n      font-weight: var(--cg-font-weight-medium);\n      transition:\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .expand-btn:hover {\n      color: var(--cg-color-code-text);\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    .expand-btn:active {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n    .expand-btn:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 var(--cg-border-width-100) var(--cg-color-focus-ring);\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    /* ── Rounded variants ── */\n    :host([rounded=\"none\"]) .wrapper { border-radius: 0; }\n    :host([rounded=\"sm\"]) .wrapper { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"md\"]) .wrapper { border-radius: var(--cg-border-radius-150); }\n    :host([rounded=\"lg\"]) .wrapper { border-radius: var(--cg-border-radius-200); }\n  `];\n\n  @property() code = '';\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' = 'lg';\n  @property() language = '';\n  @property() filename = '';\n  @property({ type: Boolean, attribute: 'line-numbers', reflect: true }) lineNumbers = false;\n  @property({ type: Boolean, reflect: true }) wrap = false;\n  @property({ type: Boolean }) collapsible = false;\n\n  @state() private _copied = false;\n  @state() private _collapsed = true;\n\n  private async _copy() {\n    try {\n      await navigator.clipboard.writeText(this.code);\n      this._copied = true;\n      setTimeout(() => { this._copied = false; }, 2000);\n    } catch { /* noop */ }\n  }\n\n  override render() {\n    const lines = this.code.split('\\n');\n    const isLong = this.collapsible && lines.length > 15;\n    const highlighted = highlight(this.code);\n\n    return html`\n      <div class=\"wrapper\">\n        <div class=\"header\">\n          <div class=\"header-left\">\n            <div class=\"dots\">\n              <span class=\"dot dot-red\"></span>\n              <span class=\"dot dot-yellow\"></span>\n              <span class=\"dot dot-green\"></span>\n            </div>\n            ${this.filename ? html`<span class=\"filename\">${this.filename}</span>` : nothing}\n          </div>\n          <div class=\"actions\">\n            ${this.language ? html`<span class=\"language\">${this.language}</span>` : nothing}\n            <button class=\"copy-btn ${this._copied ? 'copied' : ''}\" @click=${this._copy} aria-label=\"Copy code\">\n              ${this._copied\n                ? html`<cg-icon name=\"check\" size=\"xs\"></cg-icon> Copied`\n                : html`<cg-icon name=\"copy\" size=\"xs\"></cg-icon> Copy`\n              }\n            </button>\n            <span class=\"sr-only\" role=\"status\" aria-live=\"polite\">${this._copied ? 'Copied!' : ''}</span>\n          </div>\n        </div>\n\n        <div class=\"code-area ${isLong && this._collapsed ? 'collapsed' : ''}\">\n          <pre>${this.lineNumbers\n            ? lines.map(l => html`<span class=\"line\">${this._highlightLine(l)}\\n</span>`)\n            : html`${this._unsafeHTML(highlighted)}`\n          }</pre>\n        </div>\n\n        ${isLong && this._collapsed ? html`\n          <div class=\"expand-bar\">\n            <button class=\"expand-btn\" aria-expanded=\"false\" @click=${() => { this._collapsed = false; }}>\n              <cg-icon name=\"chevron-down\" size=\"xs\"></cg-icon>\n              Show all ${lines.length} lines\n            </button>\n          </div>\n        ` : nothing}\n      </div>\n    `;\n  }\n\n  private _highlightLine(line: string): unknown {\n    return this._unsafeHTML(highlight(line));\n  }\n\n  private _unsafeHTML(html: string): unknown {\n    const template = document.createElement('template');\n    template.innerHTML = html;\n    return template.content.cloneNode(true);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap { 'cg-code-block': CgCodeBlock; }\n}\n"],"names":["KEYWORD_PATTERNS","highlight","code","escaped","tokens","placeholder","cls","text","m","_","name","idx","CgCodeBlock","LitElement","lines","isLong","highlighted","html","nothing","l","line","template","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}
+{"version":3,"file":"cg-code-block.js","sources":["../../../src/components/cg-code-block/cg-code-block.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/**\n * <cg-code-block> — Code display with syntax highlighting, copy button, and line numbers.\n *\n * @example\n * ```html\n * <cg-code-block code=\"const x = 1;\" language=\"javascript\" line-numbers></cg-code-block>\n * ```\n *\n * @cssprop --cg-color-code-background - Block background\n * @cssprop --cg-color-code-text - Text color\n * @cssprop --cg-color-code-keyword - Keyword highlight color\n */\n\nconst KEYWORD_PATTERNS: Record<string, RegExp> = {\n  keyword: /\\b(const|let|var|function|return|if|else|for|while|import|export|from|class|extends|new|this|async|await|try|catch|throw|switch|case|break|default|typeof|instanceof|interface|type|enum|public|private|protected|static|override|readonly|abstract|implements|def|lambda|print|self|True|False|None|SELECT|FROM|WHERE|JOIN|INSERT|UPDATE|DELETE|CREATE|DROP|ALTER|AND|OR|NOT|IN|IS|NULL|GROUP|ORDER|BY|HAVING|LIMIT|AS|ON|SET|INTO|VALUES)\\b/g,\n  string: /([\"'`])(?:(?!\\1|\\\\).|\\\\.)*?\\1/g,\n  comment: /\\/\\/.*$|\\/\\*[\\s\\S]*?\\*\\/|#.*$/gm,\n  number: /\\b\\d+\\.?\\d*\\b/g,\n  function: /\\b([a-zA-Z_]\\w*)\\s*(?=\\()/g,\n};\n\nfunction highlight(code: string): string {\n  let escaped = code.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');\n\n  const tokens: string[] = [];\n  const placeholder = (cls: string, text: string) => {\n    tokens.push(`<span class=\"hl-${cls}\">${text}</span>`);\n    return `\\x00${tokens.length - 1}\\x00`;\n  };\n\n  escaped = escaped.replace(KEYWORD_PATTERNS.comment!, m => placeholder('comment', m));\n  escaped = escaped.replace(KEYWORD_PATTERNS.string!, m => placeholder('string', m));\n  escaped = escaped.replace(KEYWORD_PATTERNS.keyword!, m => placeholder('keyword', m));\n  escaped = escaped.replace(KEYWORD_PATTERNS.function!, (_, name) => placeholder('function', name));\n  escaped = escaped.replace(KEYWORD_PATTERNS.number!, m => placeholder('number', m));\n\n  escaped = escaped.replace(/\\x00(\\d+)\\x00/g, (_, idx) => tokens[Number(idx)]!);\n\n  return escaped;\n}\n\n@customElement('cg-code-block')\nexport class CgCodeBlock extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    .wrapper {\n      background: var(--cg-color-code-background);\n      border-radius: var(--cg-border-radius-200);\n      overflow: hidden;\n      border: var(--cg-border-width-50) solid var(--cg-color-code-border);\n    }\n\n    /* ── Header ── */\n    .header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      gap: var(--cg-spacing-16);\n      padding: var(--cg-spacing-8) var(--cg-spacing-16);\n      min-height: var(--cg-spacing-48);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-code-border);\n    }\n\n    .header-left {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-16);\n      min-width: 0;\n      flex: 1;\n    }\n\n    .dots {\n      display: flex;\n      gap: var(--cg-spacing-6);\n      flex-shrink: 0;\n    }\n    .dot {\n      width: var(--cg-spacing-12);\n      height: var(--cg-spacing-12);\n      border-radius: var(--cg-border-radius-full);\n    }\n    .dot-red { background: var(--cg-color-chart-8-background); }\n    .dot-yellow { background: var(--cg-color-chart-7-background); }\n    .dot-green { background: var(--cg-color-chart-3-background); }\n\n    .filename {\n      font-family: var(--cg-font-family-mono);\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-code-text);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      min-width: 0;\n    }\n\n    .actions {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      flex-shrink: 0;\n    }\n\n    .language {\n      display: inline-flex;\n      align-items: center;\n      padding: var(--cg-spacing-2) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-50);\n      background: var(--cg-color-action-tertiary-background-hover);\n      color: var(--cg-color-code-muted);\n      font-family: var(--cg-font-family-mono);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-medium);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wider);\n    }\n\n    .copy-btn {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-6);\n      height: var(--cg-spacing-32);\n      padding: 0 var(--cg-spacing-12);\n      border-radius: var(--cg-border-radius-50);\n      background: transparent;\n      border: none;\n      color: var(--cg-color-code-muted);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-medium);\n      cursor: pointer;\n      font-family: inherit;\n      transition:\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .copy-btn:hover {\n      background: var(--cg-color-action-tertiary-background-hover);\n      color: var(--cg-color-code-text);\n    }\n    .copy-btn:active {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n    .copy-btn.copied {\n      color: var(--cg-color-status-success-text-default);\n    }\n    .copy-btn:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 var(--cg-border-width-100) var(--cg-color-focus-ring);\n    }\n\n    /* ── Code area ── */\n    .code-area {\n      overflow-x: auto;\n      overflow-y: auto;\n    }\n    .code-area.collapsed { max-height: var(--cg-spacing-256); }\n\n    pre {\n      margin: 0;\n      padding: var(--cg-spacing-20) var(--cg-spacing-24);\n      font-family: var(--cg-font-family-mono);\n      font-size: var(--cg-font-size-sm);\n      line-height: var(--cg-line-height-relaxed);\n      color: var(--cg-color-code-text);\n      tab-size: 2;\n      counter-reset: line;\n      font-variant-numeric: tabular-nums;\n    }\n\n    :host([wrap]) pre { white-space: pre-wrap; word-break: break-all; }\n\n    /* ── Line numbers ── */\n    .line {\n      display: block;\n    }\n    :host([line-numbers]) .line::before {\n      counter-increment: line;\n      content: counter(line);\n      display: inline-block;\n      width: 3ch;\n      padding-right: var(--cg-spacing-16);\n      margin-right: var(--cg-spacing-16);\n      border-right: var(--cg-border-width-50) solid var(--cg-color-code-border);\n      color: var(--cg-color-code-muted);\n      text-align: right;\n      user-select: none;\n      opacity: 0.6;\n    }\n\n    /* ── Syntax highlighting ── */\n    .hl-keyword { color: var(--cg-color-code-keyword); font-weight: var(--cg-font-weight-medium); }\n    .hl-string { color: var(--cg-color-code-string); }\n    .hl-comment { color: var(--cg-color-code-comment); font-style: italic; }\n    .hl-number { color: var(--cg-color-code-number); }\n    .hl-function { color: var(--cg-color-code-function); }\n\n    /* ── Expand button ── */\n    .expand-bar {\n      display: flex;\n      justify-content: center;\n      padding: var(--cg-spacing-16) var(--cg-spacing-12) var(--cg-spacing-12);\n      background: linear-gradient(transparent, var(--cg-color-code-background) 60%);\n      margin-top: calc(var(--cg-spacing-48) * -1);\n      position: relative;\n    }\n    .expand-btn {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-6);\n      height: var(--cg-spacing-32);\n      padding: 0 var(--cg-spacing-16);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-code-muted);\n      background: var(--cg-color-code-surface);\n      border: var(--cg-border-width-50) solid var(--cg-color-code-border);\n      border-radius: var(--cg-border-radius-full);\n      cursor: pointer;\n      font-family: inherit;\n      font-weight: var(--cg-font-weight-medium);\n      transition:\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .expand-btn:hover {\n      color: var(--cg-color-code-text);\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    .expand-btn:active {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n    .expand-btn:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 var(--cg-border-width-100) var(--cg-color-focus-ring);\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    /* ── Rounded variants ── */\n    :host([rounded=\"none\"]) .wrapper { border-radius: 0; }\n    :host([rounded=\"sm\"]) .wrapper { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"md\"]) .wrapper { border-radius: var(--cg-border-radius-150); }\n    :host([rounded=\"lg\"]) .wrapper { border-radius: var(--cg-border-radius-200); }\n  `];\n\n  @property() code = '';\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' = 'lg';\n  @property() language = '';\n  @property() filename = '';\n  @property({ type: Boolean, attribute: 'line-numbers', reflect: true }) lineNumbers = false;\n  @property({ type: Boolean, reflect: true }) wrap = false;\n  @property({ type: Boolean }) collapsible = false;\n\n  @state() private _copied = false;\n  @state() private _collapsed = true;\n\n  private async _copy() {\n    try {\n      await navigator.clipboard.writeText(this.code);\n      this._copied = true;\n      setTimeout(() => { this._copied = false; }, 2000);\n    } catch { /* noop */ }\n  }\n\n  override render() {\n    const lines = this.code.split('\\n');\n    const isLong = this.collapsible && lines.length > 15;\n    const highlighted = highlight(this.code);\n\n    return html`\n      <div class=\"wrapper\">\n        <div class=\"header\">\n          <div class=\"header-left\">\n            <div class=\"dots\">\n              <span class=\"dot dot-red\"></span>\n              <span class=\"dot dot-yellow\"></span>\n              <span class=\"dot dot-green\"></span>\n            </div>\n            ${this.filename ? html`<span class=\"filename\">${this.filename}</span>` : nothing}\n          </div>\n          <div class=\"actions\">\n            ${this.language ? html`<span class=\"language\">${this.language}</span>` : nothing}\n            <button class=\"copy-btn ${this._copied ? 'copied' : ''}\" @click=${this._copy} aria-label=${this._copied ? 'Code copied' : 'Copy code'}>\n              ${this._copied\n                ? html`<cg-icon name=\"check\" size=\"xs\"></cg-icon> Copied`\n                : html`<cg-icon name=\"copy\" size=\"xs\"></cg-icon> Copy`\n              }\n            </button>\n            <span class=\"sr-only\" role=\"status\" aria-live=\"polite\">${this._copied ? 'Copied!' : ''}</span>\n          </div>\n        </div>\n\n        <div id=\"code-area\" class=\"code-area ${isLong && this._collapsed ? 'collapsed' : ''}\">\n          <pre>${this.lineNumbers\n            ? lines.map(l => html`<span class=\"line\">${this._highlightLine(l)}\\n</span>`)\n            : html`${this._unsafeHTML(highlighted)}`\n          }</pre>\n        </div>\n\n        ${isLong ? html`\n          <div class=\"expand-bar\">\n            <button\n              class=\"expand-btn\"\n              aria-expanded=${this._collapsed ? 'false' : 'true'}\n              aria-controls=\"code-area\"\n              @click=${() => { this._collapsed = !this._collapsed; }}>\n              <cg-icon name=${this._collapsed ? 'chevron-down' : 'chevron-up'} size=\"xs\"></cg-icon>\n              ${this._collapsed ? html`Show all ${lines.length} lines` : html`Show less`}\n            </button>\n          </div>\n        ` : nothing}\n      </div>\n    `;\n  }\n\n  private _highlightLine(line: string): unknown {\n    return this._unsafeHTML(highlight(line));\n  }\n\n  private _unsafeHTML(html: string): unknown {\n    const template = document.createElement('template');\n    template.innerHTML = html;\n    return template.content.cloneNode(true);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap { 'cg-code-block': CgCodeBlock; }\n}\n"],"names":["KEYWORD_PATTERNS","highlight","code","escaped","tokens","placeholder","cls","text","m","_","name","idx","CgCodeBlock","LitElement","lines","isLong","highlighted","html","nothing","l","line","template","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"cg-collapsible.d.ts","sourceRoot":"","sources":["../../../src/components/cg-collapsible/cg-collapsible.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C;;;;;;;;;;;;;;;;;GAiBG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BAkGnB;IAEyC,IAAI,UAAS;IACb,QAAQ,UAAS;IAChC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAChC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAU;IAEhE,OAAO,CAAC,OAAO;IAUN,MAAM;CAsBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAC;KACjC;CACF"}
+{"version":3,"file":"cg-collapsible.d.ts","sourceRoot":"","sources":["../../../src/components/cg-collapsible/cg-collapsible.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C;;;;;;;;;;;;;;;;;GAiBG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BAuGnB;IAEyC,IAAI,UAAS;IACb,QAAQ,UAAS;IAChC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAChC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAU;IAEhE,OAAO,CAAC,OAAO;IAUN,MAAM;CAsBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAC;KACjC;CACF"}

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

@@ -1,12 +1,12 @@
-import { css as c, LitElement as g, html as p } from "lit";
-import { property as i, customElement as b } from "lit/decorators.js";
-import { h as v, r as u } from "../../chunks/premium.css-9I4kHrsl.js";
-var f = Object.defineProperty, m = Object.getOwnPropertyDescriptor, e = (l, t, n, a) => {
-  for (var o = a > 1 ? void 0 : a ? m(t, n) : t, s = l.length - 1, d; s >= 0; s--)
-    (d = l[s]) && (o = (a ? d(t, n, o) : d(o)) || o);
-  return a && o && f(t, n, o), o;
+import { css as l, LitElement as g, html as p } from "lit";
+import { property as i, customElement as v } from "lit/decorators.js";
+import { h as b, r as u } from "../../chunks/premium.css-DHekUEUt.js";
+var f = Object.defineProperty, h = Object.getOwnPropertyDescriptor, e = (c, t, n, a) => {
+  for (var r = a > 1 ? void 0 : a ? h(t, n) : t, s = c.length - 1, d; s >= 0; s--)
+    (d = c[s]) && (r = (a ? d(t, n, r) : d(r)) || r);
+  return a && r && f(t, n, r), r;
 };
-let r = class extends g {
+let o = class extends g {
   constructor() {
     super(...arguments), this.open = !1, this.disabled = !1, this.size = "md", this.variant = "card";
   }
@@ -40,7 +40,7 @@ let r = class extends g {
     `;
   }
 };
-r.styles = [v, u, c`
+o.styles = [b, u, l`
     :host {
       display: block;
       overflow: hidden;
@@ -52,6 +52,11 @@ r.styles = [v, u, c`
       border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
       border-radius: var(--cg-component-collapsible-radius);
     }
+    /* Open card: structural divider under the trigger so the expanded state
+       reads beyond the chevron alone (card is the default variant). */
+    :host([variant="card"][open]) .trigger {
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);
+    }
 
     /* ── Variant: flush — no chrome, just hover affordance ── */
     :host([variant="flush"]) .trigger {
@@ -76,7 +81,7 @@ r.styles = [v, u, c`
       font-weight: var(--cg-font-weight-medium);
       text-align: left;
       cursor: pointer;
-      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
     }
 
     /* ── Sizes ── */
@@ -141,20 +146,20 @@ r.styles = [v, u, c`
   `];
 e([
   i({ type: Boolean, reflect: !0 })
-], r.prototype, "open", 2);
+], o.prototype, "open", 2);
 e([
   i({ type: Boolean, reflect: !0 })
-], r.prototype, "disabled", 2);
+], o.prototype, "disabled", 2);
 e([
   i({ reflect: !0 })
-], r.prototype, "size", 2);
+], o.prototype, "size", 2);
 e([
   i({ reflect: !0 })
-], r.prototype, "variant", 2);
-r = e([
-  b("cg-collapsible")
-], r);
+], o.prototype, "variant", 2);
+o = e([
+  v("cg-collapsible")
+], o);
 export {
-  r as CgCollapsible
+  o as CgCollapsible
 };
 //# sourceMappingURL=cg-collapsible.js.map