@cognivo/components 0.8.0 → 0.8.2

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

@@ -1 +1 @@
-{"version":3,"file":"cg-collapsible.js","sources":["../../../src/components/cg-collapsible/cg-collapsible.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/**\n * @element cg-collapsible\n * Simple expand/collapse with smooth grid-template-rows animation.\n * Lighter than cg-accordion (single section only).\n *\n * @example\n * ```html\n * <cg-collapsible>\n *   <span slot=\"trigger\">Show details</span>\n *   <p>Additional content...</p>\n * </cg-collapsible>\n * ```\n *\n * @slot trigger - Clickable header element\n * @slot - Collapsible body content\n *\n * @fires {CustomEvent<{open: boolean}>} cg-collapsible-toggle\n */\n@customElement('cg-collapsible')\nexport class CgCollapsible extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      display: block;\n      overflow: hidden;\n    }\n\n    /* ── Variant: card (default) — bordered surface ── */\n    :host([variant=\"card\"]) {\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-component-collapsible-radius);\n    }\n\n    /* ── Variant: flush — no chrome, just hover affordance ── */\n    :host([variant=\"flush\"]) .trigger {\n      border-bottom: var(--cg-border-width-50) solid transparent;\n      transition:\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        border-color var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n    :host([variant=\"flush\"][open]) .trigger {\n      border-bottom-color: var(--cg-color-surface-cards-divider);\n    }\n\n    .trigger {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      width: 100%;\n      background: transparent;\n      border: none;\n      color: var(--cg-color-surface-base-text);\n      font-family: inherit;\n      font-weight: var(--cg-font-weight-medium);\n      text-align: left;\n      cursor: pointer;\n      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n\n    /* ── Sizes ── */\n    :host([size=\"sm\"]) .trigger {\n      padding: var(--cg-component-collapsible-trigger-padding-y-sm) var(--cg-component-collapsible-trigger-padding-x-sm);\n      font-size: var(--cg-component-collapsible-font-size-sm);\n    }\n    :host([size=\"md\"]) .trigger {\n      padding: var(--cg-component-collapsible-trigger-padding-y-md) var(--cg-component-collapsible-trigger-padding-x-md);\n      font-size: var(--cg-component-collapsible-font-size-md);\n    }\n    :host([size=\"lg\"]) .trigger {\n      padding: var(--cg-component-collapsible-trigger-padding-y-lg) var(--cg-component-collapsible-trigger-padding-x-lg);\n      font-size: var(--cg-component-collapsible-font-size-lg);\n    }\n\n    .trigger:hover:not(:disabled) {\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    .trigger:focus-visible {\n      outline: none;\n      box-shadow:\n        inset 0 0 0 var(--cg-spacing-2) var(--cg-color-focus-ring-offset),\n        inset 0 0 0 var(--cg-spacing-4) var(--cg-color-focus-ring);\n    }\n    .trigger:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .chevron {\n      margin-left: auto;\n      color: var(--cg-color-surface-container-outlined);\n      transition:\n        transform var(--cg-transition-duration-default) var(--cg-transition-easing-spring),\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .trigger:hover .chevron { color: var(--cg-color-surface-base-text); }\n    .trigger:active:not(:disabled) { transform: scale(0.995); }\n    :host([open]) .chevron {\n      color: var(--cg-color-accent-text);\n      transform: rotate(180deg);\n    }\n\n    .body-wrap {\n      display: grid;\n      grid-template-rows: 0fr;\n      transition: grid-template-rows var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);\n    }\n    :host([open]) .body-wrap {\n      grid-template-rows: 1fr;\n    }\n    .body {\n      overflow: hidden;\n    }\n    :host([size=\"sm\"]) .body { padding: 0 var(--cg-component-collapsible-body-padding-sm); }\n    :host([size=\"md\"]) .body { padding: 0 var(--cg-component-collapsible-body-padding-md); }\n    :host([size=\"lg\"]) .body { padding: 0 var(--cg-component-collapsible-body-padding-lg); }\n    :host([open][size=\"sm\"]) .body { padding: var(--cg-component-collapsible-body-padding-sm); }\n    :host([open][size=\"md\"]) .body { padding: var(--cg-component-collapsible-body-padding-md); }\n    :host([open][size=\"lg\"]) .body { padding: var(--cg-component-collapsible-body-padding-lg); }\n  `];\n\n  @property({ type: Boolean, reflect: true }) open = false;\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n  @property({ reflect: true }) variant: 'card' | 'flush' = 'card';\n\n  private _toggle(): void {\n    if (this.disabled) return;\n    this.open = !this.open;\n    this.dispatchEvent(new CustomEvent('cg-collapsible-toggle', {\n      detail: { open: this.open },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  override render() {\n    return html`\n      <button\n        type=\"button\"\n        class=\"trigger\"\n        aria-expanded=${this.open ? 'true' : 'false'}\n        aria-controls=\"body\"\n        ?disabled=${this.disabled}\n        @click=${this._toggle}\n      >\n        <slot name=\"trigger\">Toggle</slot>\n        <svg class=\"chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M3 5l4 4 4-4\"/>\n        </svg>\n      </button>\n      <div class=\"body-wrap\">\n        <div class=\"body\" id=\"body\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-collapsible': CgCollapsible;\n  }\n}\n"],"names":["CgCollapsible","LitElement","html","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAuBO,IAAMA,IAAN,cAA4BC,EAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA,GAqGuC,KAAA,OAAO,IACP,KAAA,WAAW,IAC1B,KAAA,OAA2B,MAC3B,KAAA,UAA4B;AAAA,EAAA;AAAA,EAEjD,UAAgB;AACtB,IAAI,KAAK,aACT,KAAK,OAAO,CAAC,KAAK,MAClB,KAAK,cAAc,IAAI,YAAY,yBAAyB;AAAA,MAC1D,QAAQ,EAAE,MAAM,KAAK,KAAA;AAAA,MACrB,SAAS;AAAA,MACT,UAAU;AAAA,IAAA,CACX,CAAC;AAAA,EACJ;AAAA,EAES,SAAS;AAChB,WAAOC;AAAA;AAAA;AAAA;AAAA,wBAIa,KAAK,OAAO,SAAS,OAAO;AAAA;AAAA,oBAEhC,KAAK,QAAQ;AAAA,iBAChB,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAa3B;AACF;AA1IaF,EACK,SAAS,CAACG,GAAWC,GAAeC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAkGnD;AAE2CC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GArG/BP,EAqGiC,WAAA,QAAA,CAAA;AACAM,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAtG/BP,EAsGiC,WAAA,YAAA,CAAA;AACfM,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAvGhBP,EAuGkB,WAAA,QAAA,CAAA;AACAM,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAxGhBP,EAwGkB,WAAA,WAAA,CAAA;AAxGlBA,IAANM,EAAA;AAAA,EADNE,EAAc,gBAAgB;AAAA,GAClBR,CAAA;"}
+{"version":3,"file":"cg-collapsible.js","sources":["../../../src/components/cg-collapsible/cg-collapsible.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/**\n * @element cg-collapsible\n * Simple expand/collapse with smooth grid-template-rows animation.\n * Lighter than cg-accordion (single section only).\n *\n * @example\n * ```html\n * <cg-collapsible>\n *   <span slot=\"trigger\">Show details</span>\n *   <p>Additional content...</p>\n * </cg-collapsible>\n * ```\n *\n * @slot trigger - Clickable header element\n * @slot - Collapsible body content\n *\n * @fires {CustomEvent<{open: boolean}>} cg-collapsible-toggle\n */\n@customElement('cg-collapsible')\nexport class CgCollapsible extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      display: block;\n      overflow: hidden;\n    }\n\n    /* ── Variant: card (default) — bordered surface ── */\n    :host([variant=\"card\"]) {\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-component-collapsible-radius);\n    }\n    /* Open card: structural divider under the trigger so the expanded state\n       reads beyond the chevron alone (card is the default variant). */\n    :host([variant=\"card\"][open]) .trigger {\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n    }\n\n    /* ── Variant: flush — no chrome, just hover affordance ── */\n    :host([variant=\"flush\"]) .trigger {\n      border-bottom: var(--cg-border-width-50) solid transparent;\n      transition:\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        border-color var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n    :host([variant=\"flush\"][open]) .trigger {\n      border-bottom-color: var(--cg-color-surface-cards-divider);\n    }\n\n    .trigger {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      width: 100%;\n      background: transparent;\n      border: none;\n      color: var(--cg-color-surface-base-text);\n      font-family: inherit;\n      font-weight: var(--cg-font-weight-medium);\n      text-align: left;\n      cursor: pointer;\n      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n\n    /* ── Sizes ── */\n    :host([size=\"sm\"]) .trigger {\n      padding: var(--cg-component-collapsible-trigger-padding-y-sm) var(--cg-component-collapsible-trigger-padding-x-sm);\n      font-size: var(--cg-component-collapsible-font-size-sm);\n    }\n    :host([size=\"md\"]) .trigger {\n      padding: var(--cg-component-collapsible-trigger-padding-y-md) var(--cg-component-collapsible-trigger-padding-x-md);\n      font-size: var(--cg-component-collapsible-font-size-md);\n    }\n    :host([size=\"lg\"]) .trigger {\n      padding: var(--cg-component-collapsible-trigger-padding-y-lg) var(--cg-component-collapsible-trigger-padding-x-lg);\n      font-size: var(--cg-component-collapsible-font-size-lg);\n    }\n\n    .trigger:hover:not(:disabled) {\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    .trigger:focus-visible {\n      outline: none;\n      box-shadow:\n        inset 0 0 0 var(--cg-spacing-2) var(--cg-color-focus-ring-offset),\n        inset 0 0 0 var(--cg-spacing-4) var(--cg-color-focus-ring);\n    }\n    .trigger:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .chevron {\n      margin-left: auto;\n      color: var(--cg-color-surface-container-outlined);\n      transition:\n        transform var(--cg-transition-duration-default) var(--cg-transition-easing-spring),\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .trigger:hover .chevron { color: var(--cg-color-surface-base-text); }\n    .trigger:active:not(:disabled) { transform: scale(0.995); }\n    :host([open]) .chevron {\n      color: var(--cg-color-accent-text);\n      transform: rotate(180deg);\n    }\n\n    .body-wrap {\n      display: grid;\n      grid-template-rows: 0fr;\n      transition: grid-template-rows var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);\n    }\n    :host([open]) .body-wrap {\n      grid-template-rows: 1fr;\n    }\n    .body {\n      overflow: hidden;\n    }\n    :host([size=\"sm\"]) .body { padding: 0 var(--cg-component-collapsible-body-padding-sm); }\n    :host([size=\"md\"]) .body { padding: 0 var(--cg-component-collapsible-body-padding-md); }\n    :host([size=\"lg\"]) .body { padding: 0 var(--cg-component-collapsible-body-padding-lg); }\n    :host([open][size=\"sm\"]) .body { padding: var(--cg-component-collapsible-body-padding-sm); }\n    :host([open][size=\"md\"]) .body { padding: var(--cg-component-collapsible-body-padding-md); }\n    :host([open][size=\"lg\"]) .body { padding: var(--cg-component-collapsible-body-padding-lg); }\n  `];\n\n  @property({ type: Boolean, reflect: true }) open = false;\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n  @property({ reflect: true }) variant: 'card' | 'flush' = 'card';\n\n  private _toggle(): void {\n    if (this.disabled) return;\n    this.open = !this.open;\n    this.dispatchEvent(new CustomEvent('cg-collapsible-toggle', {\n      detail: { open: this.open },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  override render() {\n    return html`\n      <button\n        type=\"button\"\n        class=\"trigger\"\n        aria-expanded=${this.open ? 'true' : 'false'}\n        aria-controls=\"body\"\n        ?disabled=${this.disabled}\n        @click=${this._toggle}\n      >\n        <slot name=\"trigger\">Toggle</slot>\n        <svg class=\"chevron\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M3 5l4 4 4-4\"/>\n        </svg>\n      </button>\n      <div class=\"body-wrap\">\n        <div class=\"body\" id=\"body\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-collapsible': CgCollapsible;\n  }\n}\n"],"names":["CgCollapsible","LitElement","html","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAuBO,IAAMA,IAAN,cAA4BC,EAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA,GA0GuC,KAAA,OAAO,IACP,KAAA,WAAW,IAC1B,KAAA,OAA2B,MAC3B,KAAA,UAA4B;AAAA,EAAA;AAAA,EAEjD,UAAgB;AACtB,IAAI,KAAK,aACT,KAAK,OAAO,CAAC,KAAK,MAClB,KAAK,cAAc,IAAI,YAAY,yBAAyB;AAAA,MAC1D,QAAQ,EAAE,MAAM,KAAK,KAAA;AAAA,MACrB,SAAS;AAAA,MACT,UAAU;AAAA,IAAA,CACX,CAAC;AAAA,EACJ;AAAA,EAES,SAAS;AAChB,WAAOC;AAAA;AAAA;AAAA;AAAA,wBAIa,KAAK,OAAO,SAAS,OAAO;AAAA;AAAA,oBAEhC,KAAK,QAAQ;AAAA,iBAChB,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAa3B;AACF;AA/IaF,EACK,SAAS,CAACG,GAAWC,GAAeC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAuGnD;AAE2CC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA1G/BP,EA0GiC,WAAA,QAAA,CAAA;AACAM,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA3G/BP,EA2GiC,WAAA,YAAA,CAAA;AACfM,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GA5GhBP,EA4GkB,WAAA,QAAA,CAAA;AACAM,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GA7GhBP,EA6GkB,WAAA,WAAA,CAAA;AA7GlBA,IAANM,EAAA;AAAA,EADNE,EAAc,gBAAgB;AAAA,GAClBR,CAAA;"}

package/dist/components/cg-color-picker/cg-color-picker.d.ts

@@ -34,6 +34,9 @@ export declare class CgColorPicker extends LitElement {
     private _onAlphaPointerDown;
     private _onAlphaPointerMove;
     private _updateAlpha;
+    private _onAreaKeydown;
+    private _onHueKeydown;
+    private _onAlphaKeydown;
     private _onHexInput;
     private _onRgbInput;
     private _copy;

package/dist/components/cg-color-picker/cg-color-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cg-color-picker.d.ts","sourceRoot":"","sources":["../../../src/components/cg-color-picker/cg-color-picker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAmDrD;;;;;;GAMG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BAoOnB;IAES,KAAK,SAAa;IAClB,KAAK,SAAM;IACI,MAAM,EAAE,MAAM,EAAE,CAAiB;IAC/B,SAAS,UAAS;IAClB,OAAO,UAAQ;IACf,WAAW,UAAQ;IACJ,QAAQ,UAAS;IAEpD,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,IAAI,CAA2C;IACvD,OAAO,CAAC,SAAS,CAAa;IAC9B,OAAO,CAAC,OAAO,CAAS;IACjC,OAAO,CAAC,SAAS,CAAS;IAEjB,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAYjD,OAAO,CAAC,OAAO;IACf,OAAO,CAAC,MAAM;IAEd,OAAO,CAAC,KAAK;IAQb,OAAO,CAAC,kBAAkB;IAK1B,OAAO,CAAC,kBAAkB;IAC1B,OAAO,CAAC,YAAY;IACpB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,iBAAiB;IACzB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,mBAAmB;IAC3B,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,WAAW;YASL,KAAK;IAMnB,OAAO,CAAC,mBAAmB,CAA0E;IACrG,OAAO,CAAC,cAAc;IAKb,iBAAiB;IACjB,oBAAoB;IAEpB,MAAM;CA8FhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAAG,iBAAiB,EAAE,aAAa,CAAC;KAAE;CACtE"}
+{"version":3,"file":"cg-color-picker.d.ts","sourceRoot":"","sources":["../../../src/components/cg-color-picker/cg-color-picker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAmDrD;;;;;;GAMG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BAoOnB;IAES,KAAK,SAAa;IAClB,KAAK,SAAM;IACI,MAAM,EAAE,MAAM,EAAE,CAAiB;IAC/B,SAAS,UAAS;IAClB,OAAO,UAAQ;IACf,WAAW,UAAQ;IACJ,QAAQ,UAAS;IAEpD,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,IAAI,CAA2C;IACvD,OAAO,CAAC,SAAS,CAAa;IAC9B,OAAO,CAAC,OAAO,CAAS;IACjC,OAAO,CAAC,SAAS,CAAS;IAEjB,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAYjD,OAAO,CAAC,OAAO;IACf,OAAO,CAAC,MAAM;IAEd,OAAO,CAAC,KAAK;IAQb,OAAO,CAAC,kBAAkB;IAK1B,OAAO,CAAC,kBAAkB;IAC1B,OAAO,CAAC,YAAY;IACpB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,iBAAiB;IACzB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,mBAAmB;IAC3B,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,cAAc;IAetB,OAAO,CAAC,aAAa;IAgBrB,OAAO,CAAC,eAAe;IAiBvB,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,WAAW;YASL,KAAK;IAMnB,OAAO,CAAC,mBAAmB,CAA0E;IACrG,OAAO,CAAC,cAAc;IAKb,iBAAiB;IACjB,oBAAoB;IAEpB,MAAM;CAiHhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAAG,iBAAiB,EAAE,aAAa,CAAC;KAAE;CACtE"}

package/dist/components/cg-color-picker/cg-color-picker.js

@@ -1,12 +1,12 @@
-import { css as w, LitElement as k, nothing as u, html as p } from "lit";
-import { property as h, state as b, customElement as y } from "lit/decorators.js";
-import { h as $, r as P } from "../../chunks/premium.css-9I4kHrsl.js";
-var C = Object.defineProperty, M = Object.getOwnPropertyDescriptor, l = (r, t, a, o) => {
-  for (var e = o > 1 ? void 0 : o ? M(t, a) : t, i = r.length - 1, d; i >= 0; i--)
-    (d = r[i]) && (e = (o ? d(t, a, e) : d(e)) || e);
-  return o && e && C(t, a, e), e;
+import { css as k, LitElement as x, nothing as u, html as h } from "lit";
+import { property as p, state as b, customElement as y } from "lit/decorators.js";
+import { h as $, r as M } from "../../chunks/premium.css-DHekUEUt.js";
+var A = Object.defineProperty, P = Object.getOwnPropertyDescriptor, l = (t, r, a, e) => {
+  for (var o = e > 1 ? void 0 : e ? P(r, a) : r, i = t.length - 1, d; i >= 0; i--)
+    (d = t[i]) && (o = (e ? d(r, a, o) : d(o)) || o);
+  return e && o && A(r, a, o), o;
 };
-const A = [
+const C = [
   "#ef4444",
   "#f97316",
   "#f59e0b",
@@ -20,33 +20,33 @@ const A = [
   "#ffffff",
   "#18181b"
 ];
-function m(r) {
-  const { h: t, s: a, v: o } = r, e = o * a, i = e * (1 - Math.abs(t / 60 % 2 - 1)), d = o - e;
+function m(t) {
+  const { h: r, s: a, v: e } = t, o = e * a, i = o * (1 - Math.abs(r / 60 % 2 - 1)), d = e - o;
   let s = 0, n = 0, g = 0;
-  t < 60 ? (s = e, n = i) : t < 120 ? (s = i, n = e) : t < 180 ? (n = e, g = i) : t < 240 ? (n = i, g = e) : t < 300 ? (s = i, g = e) : (s = e, g = i);
-  const f = (x) => Math.round((x + d) * 255).toString(16).padStart(2, "0");
+  r < 60 ? (s = o, n = i) : r < 120 ? (s = i, n = o) : r < 180 ? (n = o, g = i) : r < 240 ? (n = i, g = o) : r < 300 ? (s = i, g = o) : (s = o, g = i);
+  const f = (_) => Math.round((_ + d) * 255).toString(16).padStart(2, "0");
   return `#${f(s)}${f(n)}${f(g)}`;
 }
-function v(r) {
-  const t = r.replace("#", ""), a = parseInt(t.substring(0, 2), 16) / 255, o = parseInt(t.substring(2, 4), 16) / 255, e = parseInt(t.substring(4, 6), 16) / 255, i = Math.max(a, o, e), d = Math.min(a, o, e), s = i - d;
+function v(t) {
+  const r = t.replace("#", ""), a = parseInt(r.substring(0, 2), 16) / 255, e = parseInt(r.substring(2, 4), 16) / 255, o = parseInt(r.substring(4, 6), 16) / 255, i = Math.max(a, e, o), d = Math.min(a, e, o), s = i - d;
   let n = 0;
-  return s !== 0 && (i === a ? n = ((o - e) / s + 6) % 6 * 60 : i === o ? n = ((e - a) / s + 2) * 60 : n = ((a - o) / s + 4) * 60), { h: n, s: i === 0 ? 0 : s / i, v: i, a: 1 };
+  return s !== 0 && (i === a ? n = ((e - o) / s + 6) % 6 * 60 : i === e ? n = ((o - a) / s + 2) * 60 : n = ((a - e) / s + 4) * 60), { h: n, s: i === 0 ? 0 : s / i, v: i, a: 1 };
 }
-function _(r) {
-  const { h: t, s: a, v: o } = r, e = o * a, i = e * (1 - Math.abs(t / 60 % 2 - 1)), d = o - e;
+function w(t) {
+  const { h: r, s: a, v: e } = t, o = e * a, i = o * (1 - Math.abs(r / 60 % 2 - 1)), d = e - o;
   let s = 0, n = 0, g = 0;
-  return t < 60 ? (s = e, n = i) : t < 120 ? (s = i, n = e) : t < 180 ? (n = e, g = i) : t < 240 ? (n = i, g = e) : t < 300 ? (s = i, g = e) : (s = e, g = i), { r: Math.round((s + d) * 255), g: Math.round((n + d) * 255), b: Math.round((g + d) * 255) };
+  return r < 60 ? (s = o, n = i) : r < 120 ? (s = i, n = o) : r < 180 ? (n = o, g = i) : r < 240 ? (n = i, g = o) : r < 300 ? (s = i, g = o) : (s = o, g = i), { r: Math.round((s + d) * 255), g: Math.round((n + d) * 255), b: Math.round((g + d) * 255) };
 }
-let c = class extends k {
+let c = class extends x {
   constructor() {
-    super(...arguments), this.value = "#3b82f6", this.label = "", this.colors = A, this.showAlpha = !1, this.showRgb = !0, this.showPresets = !0, this.disabled = !1, this._open = !1, this._hsv = { h: 217, s: 0.77, v: 0.96, a: 1 }, this._hexInput = "#3b82f6", this._copied = !1, this._dragging = !1, this._handleClickOutside = (r) => {
-      r.composedPath().includes(this) || this._close();
+    super(...arguments), this.value = "#3b82f6", this.label = "", this.colors = C, this.showAlpha = !1, this.showRgb = !0, this.showPresets = !0, this.disabled = !1, this._open = !1, this._hsv = { h: 217, s: 0.77, v: 0.96, a: 1 }, this._hexInput = "#3b82f6", this._copied = !1, this._dragging = !1, this._handleClickOutside = (t) => {
+      t.composedPath().includes(this) || this._close();
     };
   }
-  willUpdate(r) {
-    if (r.has("value") && !this._dragging && /^#([0-9a-fA-F]{3}){1,2}$/.test(this.value)) {
-      const t = this.value.length === 4 ? "#" + this.value[1] + this.value[1] + this.value[2] + this.value[2] + this.value[3] + this.value[3] : this.value;
-      this._hsv = v(t), this._hexInput = t;
+  willUpdate(t) {
+    if (t.has("value") && !this._dragging && /^#([0-9a-fA-F]{3}){1,2}$/.test(this.value)) {
+      const r = this.value.length === 4 ? "#" + this.value[1] + this.value[1] + this.value[2] + this.value[2] + this.value[3] + this.value[3] : this.value;
+      this._hsv = v(r), this._hexInput = r;
     }
   }
   _toggle() {
@@ -56,70 +56,149 @@ let c = class extends k {
     this._open = !1;
   }
   _emit() {
-    const r = m(this._hsv);
-    this.value = r, this._hexInput = r, this.dispatchEvent(new CustomEvent("cg-color-change", { detail: { color: r, hex: r }, bubbles: !0, composed: !0 }));
+    const t = m(this._hsv);
+    this.value = t, this._hexInput = t, this.dispatchEvent(new CustomEvent("cg-color-change", { detail: { color: t, hex: t }, bubbles: !0, composed: !0 }));
   }
   // ── Color area ──
-  _onAreaPointerDown(r) {
-    this._dragging = !0, r.currentTarget.setPointerCapture(r.pointerId), this._updateArea(r, r.currentTarget);
+  _onAreaPointerDown(t) {
+    this._dragging = !0, t.currentTarget.setPointerCapture(t.pointerId), this._updateArea(t, t.currentTarget);
   }
-  _onAreaPointerMove(r) {
-    this._dragging && this._updateArea(r, r.currentTarget);
+  _onAreaPointerMove(t) {
+    this._dragging && this._updateArea(t, t.currentTarget);
   }
   _onPointerUp() {
     this._dragging = !1;
   }
-  _updateArea(r, t) {
-    const a = t.getBoundingClientRect();
-    this._hsv = { ...this._hsv, s: Math.max(0, Math.min(1, (r.clientX - a.left) / a.width)), v: Math.max(0, Math.min(1, 1 - (r.clientY - a.top) / a.height)) }, this._emit();
+  _updateArea(t, r) {
+    const a = r.getBoundingClientRect();
+    this._hsv = { ...this._hsv, s: Math.max(0, Math.min(1, (t.clientX - a.left) / a.width)), v: Math.max(0, Math.min(1, 1 - (t.clientY - a.top) / a.height)) }, this._emit();
   }
   // ── Hue ──
-  _onHuePointerDown(r) {
-    this._dragging = !0, r.currentTarget.setPointerCapture(r.pointerId), this._updateHue(r, r.currentTarget);
+  _onHuePointerDown(t) {
+    this._dragging = !0, t.currentTarget.setPointerCapture(t.pointerId), this._updateHue(t, t.currentTarget);
   }
-  _onHuePointerMove(r) {
-    this._dragging && this._updateHue(r, r.currentTarget);
+  _onHuePointerMove(t) {
+    this._dragging && this._updateHue(t, t.currentTarget);
   }
-  _updateHue(r, t) {
-    const a = t.getBoundingClientRect();
-    this._hsv = { ...this._hsv, h: Math.max(0, Math.min(360, (r.clientX - a.left) / a.width * 360)) }, this._emit();
+  _updateHue(t, r) {
+    const a = r.getBoundingClientRect();
+    this._hsv = { ...this._hsv, h: Math.max(0, Math.min(360, (t.clientX - a.left) / a.width * 360)) }, this._emit();
   }
   // ── Alpha ──
-  _onAlphaPointerDown(r) {
-    this._dragging = !0, r.currentTarget.setPointerCapture(r.pointerId), this._updateAlpha(r, r.currentTarget);
+  _onAlphaPointerDown(t) {
+    this._dragging = !0, t.currentTarget.setPointerCapture(t.pointerId), this._updateAlpha(t, t.currentTarget);
   }
-  _onAlphaPointerMove(r) {
-    this._dragging && this._updateAlpha(r, r.currentTarget);
+  _onAlphaPointerMove(t) {
+    this._dragging && this._updateAlpha(t, t.currentTarget);
   }
-  _updateAlpha(r, t) {
-    const a = t.getBoundingClientRect();
-    this._hsv = { ...this._hsv, a: Math.max(0, Math.min(1, (r.clientX - a.left) / a.width)) }, this._emit();
+  _updateAlpha(t, r) {
+    const a = r.getBoundingClientRect();
+    this._hsv = { ...this._hsv, a: Math.max(0, Math.min(1, (t.clientX - a.left) / a.width)) }, this._emit();
+  }
+  // ── Keyboard (mirrors the pointer handlers so the spectrum + sliders are
+  //    fully operable without a mouse — they were pointer-only before). ──
+  _onAreaKeydown(t) {
+    const r = t.shiftKey ? 0.1 : 0.01;
+    let { s: a, v: e } = this._hsv;
+    switch (t.key) {
+      case "ArrowLeft":
+        a -= r;
+        break;
+      case "ArrowRight":
+        a += r;
+        break;
+      case "ArrowUp":
+        e += r;
+        break;
+      case "ArrowDown":
+        e -= r;
+        break;
+      default:
+        return;
+    }
+    t.preventDefault(), this._hsv = { ...this._hsv, s: Math.max(0, Math.min(1, a)), v: Math.max(0, Math.min(1, e)) }, this._emit();
+  }
+  _onHueKeydown(t) {
+    let r = this._hsv.h;
+    switch (t.key) {
+      case "ArrowRight":
+      case "ArrowUp":
+        r += 1;
+        break;
+      case "ArrowLeft":
+      case "ArrowDown":
+        r -= 1;
+        break;
+      case "PageUp":
+        r += 10;
+        break;
+      case "PageDown":
+        r -= 10;
+        break;
+      case "Home":
+        r = 0;
+        break;
+      case "End":
+        r = 360;
+        break;
+      default:
+        return;
+    }
+    t.preventDefault(), this._hsv = { ...this._hsv, h: Math.max(0, Math.min(360, r)) }, this._emit();
+  }
+  _onAlphaKeydown(t) {
+    let r = this._hsv.a;
+    switch (t.key) {
+      case "ArrowRight":
+      case "ArrowUp":
+        r += 0.01;
+        break;
+      case "ArrowLeft":
+      case "ArrowDown":
+        r -= 0.01;
+        break;
+      case "PageUp":
+        r += 0.1;
+        break;
+      case "PageDown":
+        r -= 0.1;
+        break;
+      case "Home":
+        r = 0;
+        break;
+      case "End":
+        r = 1;
+        break;
+      default:
+        return;
+    }
+    t.preventDefault(), this._hsv = { ...this._hsv, a: Math.max(0, Math.min(1, r)) }, this._emit();
   }
   // ── Inputs ──
-  _onHexInput(r) {
-    let t = r.target.value.trim();
-    if (this._hexInput = t, t.startsWith("#") || (t = "#" + t), /^#([0-9a-fA-F]{3}){1,2}$/.test(t)) {
-      const a = t.length === 4 ? "#" + t[1] + t[1] + t[2] + t[2] + t[3] + t[3] : t;
+  _onHexInput(t) {
+    let r = t.target.value.trim();
+    if (this._hexInput = r, r.startsWith("#") || (r = "#" + r), /^#([0-9a-fA-F]{3}){1,2}$/.test(r)) {
+      const a = r.length === 4 ? "#" + r[1] + r[1] + r[2] + r[2] + r[3] + r[3] : r;
       this._hsv = v(a), this._emit();
     }
   }
-  _onRgbInput(r, t) {
-    const a = Math.max(0, Math.min(255, parseInt(t.target.value) || 0)), o = _(this._hsv);
-    o[r] = a;
-    const e = `#${o.r.toString(16).padStart(2, "0")}${o.g.toString(16).padStart(2, "0")}${o.b.toString(16).padStart(2, "0")}`;
-    this._hsv = v(e), this._emit();
+  _onRgbInput(t, r) {
+    const a = Math.max(0, Math.min(255, parseInt(r.target.value) || 0)), e = w(this._hsv);
+    e[t] = a;
+    const o = `#${e.r.toString(16).padStart(2, "0")}${e.g.toString(16).padStart(2, "0")}${e.b.toString(16).padStart(2, "0")}`;
+    this._hsv = v(o), this._emit();
   }
   async _copy() {
     await navigator.clipboard.writeText(this.value), this._copied = !0, setTimeout(() => {
       this._copied = !1, this.requestUpdate();
     }, 1500);
   }
-  _handleKeydown(r) {
-    if (r.key === "Escape") {
+  _handleKeydown(t) {
+    if (t.key === "Escape") {
       this._close();
       return;
     }
-    (r.key === "Enter" || r.key === " ") && !this._open && (r.preventDefault(), this._toggle());
+    (t.key === "Enter" || t.key === " ") && !this._open && (t.preventDefault(), this._toggle());
   }
   connectedCallback() {
     super.connectedCallback(), document.removeEventListener("click", this._handleClickOutside), document.addEventListener("click", this._handleClickOutside);
@@ -128,9 +207,9 @@ let c = class extends k {
     super.disconnectedCallback(), document.removeEventListener("click", this._handleClickOutside);
   }
   render() {
-    const r = m({ h: this._hsv.h, s: 1, v: 1 }), t = m(this._hsv), a = _(this._hsv);
-    return p`
-      ${this.label ? p`<span class="label">${this.label}</span>` : u}
+    const t = m({ h: this._hsv.h, s: 1, v: 1 }), r = m(this._hsv), a = w(this._hsv);
+    return h`
+      ${this.label ? h`<span class="label">${this.label}</span>` : u}
 
       <div class="trigger ${this._open ? "open" : ""} ${this.disabled ? "disabled" : ""}"
         tabindex=${this.disabled ? "-1" : "0"}
@@ -138,53 +217,72 @@ let c = class extends k {
         aria-label=${this.label || "Color picker"}
         @click=${this._toggle} @keydown=${this._handleKeydown}
       >
-        <div class="trigger-swatch" style="background:${t}"></div>
-        <span class="trigger-text">${t}</span>
+        <div class="trigger-swatch" style="background:${r}"></div>
+        <span class="trigger-text">${r}</span>
         <svg class="trigger-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M6 9l6 6 6-6"></path></svg>
       </div>
 
       <div class="dropdown ${this._open ? "open" : ""}" role="dialog" aria-label="Color picker">
         <!-- Spectrum -->
         <div class="color-area"
+          tabindex="0"
+          role="slider"
+          aria-label="Saturation and brightness"
+          aria-valuetext=${`Saturation ${Math.round(this._hsv.s * 100)}%, brightness ${Math.round(this._hsv.v * 100)}%, ${r}`}
           @pointerdown=${this._onAreaPointerDown}
           @pointermove=${this._onAreaPointerMove}
           @pointerup=${this._onPointerUp}
+          @keydown=${this._onAreaKeydown}
         >
-          <div class="color-area-bg" style="background:${r}"></div>
+          <div class="color-area-bg" style="background:${t}"></div>
           <div class="color-area-white"></div>
           <div class="color-area-black"></div>
-          <div class="color-area-thumb" style="left:${this._hsv.s * 100}%;top:${(1 - this._hsv.v) * 100}%;background:${t}"></div>
+          <div class="color-area-thumb" style="left:${this._hsv.s * 100}%;top:${(1 - this._hsv.v) * 100}%;background:${r}"></div>
         </div>
 
         <!-- Hue -->
         <div class="slider-row">
           <div class="slider-track hue-track"
+            tabindex="0"
+            role="slider"
+            aria-label="Hue"
+            aria-valuemin="0"
+            aria-valuemax="360"
+            aria-valuenow=${Math.round(this._hsv.h)}
             @pointerdown=${this._onHuePointerDown}
             @pointermove=${this._onHuePointerMove}
             @pointerup=${this._onPointerUp}
-          ><div class="slider-thumb" style="left:${this._hsv.h / 360 * 100}%;background:${r}"></div></div>
+            @keydown=${this._onHueKeydown}
+          ><div class="slider-thumb" style="left:${this._hsv.h / 360 * 100}%;background:${t}"></div></div>
         </div>
 
         <!-- Alpha -->
-        ${this.showAlpha ? p`
+        ${this.showAlpha ? h`
           <div class="slider-row">
             <div class="slider-track alpha-track"
+              tabindex="0"
+              role="slider"
+              aria-label="Opacity"
+              aria-valuemin="0"
+              aria-valuemax="100"
+              aria-valuenow=${Math.round(this._hsv.a * 100)}
               @pointerdown=${this._onAlphaPointerDown}
               @pointermove=${this._onAlphaPointerMove}
               @pointerup=${this._onPointerUp}
-            ><div class="alpha-gradient" style="background:linear-gradient(to right,transparent,${t})"></div>
-            <div class="slider-thumb" style="left:${this._hsv.a * 100}%;background:${t}"></div></div>
+              @keydown=${this._onAlphaKeydown}
+            ><div class="alpha-gradient" style="background:linear-gradient(to right,transparent,${r})"></div>
+            <div class="slider-thumb" style="left:${this._hsv.a * 100}%;background:${r}"></div></div>
           </div>
         ` : u}
 
         <!-- Hex + copy -->
         <div class="inputs-row">
-          <div class="preview-dot" style="background:${t}"></div>
+          <div class="preview-dot" style="background:${r}"></div>
           <input class="hex-input" type="text" .value=${this._hexInput} aria-label="Hex color" @input=${this._onHexInput} />
           <button class="copy-btn" @click=${this._copy} aria-label="Copy color">
-            ${this._copied ? p`
+            ${this._copied ? h`
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M20 6L9 17l-5-5"></path></svg>
-            ` : p`
+            ` : h`
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"></path>
               </svg>
@@ -193,25 +291,25 @@ let c = class extends k {
         </div>
 
         <!-- RGB -->
-        ${this.showRgb ? p`
+        ${this.showRgb ? h`
           <div class="rgb-row">
-            ${["r", "g", "b"].map((o) => p`
+            ${["r", "g", "b"].map((e) => h`
               <div class="rgb-field">
-                <input class="rgb-input" type="number" min="0" max="255" .value=${String(a[o])} @input=${(e) => this._onRgbInput(o, e)} aria-label=${o.toUpperCase()} />
-                <span class="rgb-label">${o.toUpperCase()}</span>
+                <input class="rgb-input" type="number" min="0" max="255" .value=${String(a[e])} @input=${(o) => this._onRgbInput(e, o)} aria-label=${e.toUpperCase()} />
+                <span class="rgb-label">${e.toUpperCase()}</span>
               </div>
             `)}
           </div>
         ` : u}
 
         <!-- Presets -->
-        ${this.showPresets && this.colors.length > 0 ? p`
+        ${this.showPresets && this.colors.length > 0 ? h`
           <div class="presets" role="radiogroup" aria-label="Preset colors">
-            ${this.colors.map((o) => p`
-              <button class="preset ${this.value === o ? "active" : ""}" style="background:${o}"
-                role="radio" aria-checked=${this.value === o} aria-label=${o}
+            ${this.colors.map((e) => h`
+              <button class="preset ${this.value === e ? "active" : ""}" style="background:${e}"
+                role="radio" aria-checked=${this.value === e} aria-label=${e}
                 @click=${() => {
-      this._hsv = v(o), this._emit();
+      this._hsv = v(e), this._emit();
     }}
               ></button>
             `)}
@@ -221,7 +319,7 @@ let c = class extends k {
     `;
   }
 };
-c.styles = [$, P, w`
+c.styles = [$, M, k`
     :host { position: relative; display: inline-block; }
 
     /* ── Label ── */
@@ -451,25 +549,25 @@ c.styles = [$, P, w`
     .preset:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--cg-overlay-accent-strong); }
   `];
 l([
-  h()
+  p()
 ], c.prototype, "value", 2);
 l([
-  h()
+  p()
 ], c.prototype, "label", 2);
 l([
-  h({ type: Array })
+  p({ type: Array })
 ], c.prototype, "colors", 2);
 l([
-  h({ type: Boolean })
+  p({ type: Boolean })
 ], c.prototype, "showAlpha", 2);
 l([
-  h({ type: Boolean })
+  p({ type: Boolean })
 ], c.prototype, "showRgb", 2);
 l([
-  h({ type: Boolean })
+  p({ type: Boolean })
 ], c.prototype, "showPresets", 2);
 l([
-  h({ type: Boolean, reflect: !0 })
+  p({ type: Boolean, reflect: !0 })
 ], c.prototype, "disabled", 2);
 l([
   b()