npm - @cognivo/components - Versions diffs - 0.8.0 → 0.8.2 - Mend

@cognivo/components 0.8.0 → 0.8.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (543) hide show

package/dist/components/cg-image-gallery/cg-image-gallery.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cg-image-gallery.js","sources":["../../../src/components/cg-image-gallery/cg-image-gallery.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, shimmerKeyframes } from '../../styles/index.js';\n\n/** Image entry for cg-image-gallery, with source URL, alt text, and optional caption. /\nexport interface GalleryImage { src: string; alt?: string; caption?: string; }\n\n/\n <cg-image-gallery> — Responsive image grid with lightbox click and \"show all\" overflow.\n \n Features:\n * - Smart grid layout (adapts to image count: 1-5 different layouts)\n * - Max visible images with \"+N more\" badge\n * - Click to emit event (for lightbox integration)\n * - Loading skeleton per image\n * - Responsive column sizing\n /\n@customElement('cg-image-gallery')\nexport class CgImageGallery extends LitElement {\n static override styles = [hostBlock, reducedMotion, shimmerKeyframes, css`\n .grid {\n display: grid;\n gap: var(--cg-spacing-8);\n border-radius: var(--cg-border-radius-200);\n overflow: hidden;\n }\n\n / Smart layouts based on image count /\n .grid.count-1 { grid-template-columns: 1fr; }\n .grid.count-2 { grid-template-columns: 1fr 1fr; }\n .grid.count-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }\n .grid.count-3 .img-wrapper:first-child { grid-row: 1 / 3; }\n .grid.count-4 { grid-template-columns: 1fr 1fr; }\n .grid.count-many { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }\n\n .img-wrapper {\n position: relative;\n overflow: hidden;\n border-radius: var(--cg-border-radius-50);\n background: var(--cg-color-surface-container-background);\n cursor: pointer;\n }\n .img-wrapper::after {\n content: '';\n position: absolute;\n inset: 0;\n background: transparent;\n transition: background var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n }\n .img-wrapper:focus-visible {\n outline: none;\n box-shadow: inset 0 0 0 2px var(--cg-color-focus-ring-offset), inset 0 0 0 4px var(--cg-color-focus-ring);\n }\n .img-wrapper:hover::after {\n background: var(--cg-overlay-dark-subtle);\n }\n\n img {\n width: 100%;\n aspect-ratio: 1;\n object-fit: cover;\n display: block;\n transition: transform var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n }\n .img-wrapper:hover img { transform: scale(1.03); }\n .img-wrapper:active img { transform: scale(0.98); }\n\n .grid.count-1 img { aspect-ratio: 16 / 9; }\n .grid.count-3 .img-wrapper:first-child img { aspect-ratio: auto; height: 100%; }\n\n / Overflow badge /\n .overflow-wrapper {\n position: relative;\n }\n .overflow-badge {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--cg-overlay-dark-strong);\n color: var(--cg-overlay-dark-text);\n font-size: var(--cg-font-size-lg);\n font-weight: var(--cg-font-weight-bold);\n z-index: 1;\n pointer-events: none;\n }\n\n / Skeleton /\n .skeleton {\n position: absolute; inset: 0;\n background: linear-gradient(90deg, var(--cg-color-surface-container-border) 25%, var(--cg-color-surface-container-background) 50%, var(--cg-color-surface-container-border) 75%);\n background-size: 200% 100%;\n animation: shimmer 1.5s infinite;\n }\n\n / Rounded variants */\n :host([rounded=\"none\"]) .grid { border-radius: 0; }\n :host([rounded=\"sm\"]) .grid { border-radius: var(--cg-border-radius-50); }\n :host([rounded=\"md\"]) .grid { border-radius: var(--cg-border-radius-100); }\n :host([rounded=\"lg\"]) .grid { border-radius: var(--cg-border-radius-150); }\n :host([rounded=\"full\"]) .grid { border-radius: var(--cg-border-radius-full); }\n `];\n\n @property({ type: Array }) images: GalleryImage[] = [];\n @property({ reflect: true }) rounded: 'none' \| 'sm' \| 'md' \| 'lg' \| 'full' = 'lg';\n @property({ type: Number }) maxVisible = 5;\n\n @state() private _loadedSet = new Set<number>();\n\n private _handleImageLoad(idx: number) {\n this._loadedSet = new Set([...this._loadedSet, idx]);\n }\n\n private _handleImageKeydown(e: KeyboardEvent, idx: number) {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n this._handleClick(idx);\n }\n }\n\n private _handleClick(idx: number) {\n this.dispatchEvent(new CustomEvent('cg-gallery-click', {\n detail: { index: idx, image: this.images[idx] },\n bubbles: true,\n composed: true,\n }));\n }\n\n override render() {\n const visible = this.images.slice(0, this.maxVisible);\n const overflow = this.images.length - this.maxVisible;\n const count = Math.min(visible.length, 5);\n const gridClass = count <= 4 ? `count-${count}` : 'count-many';\n\n return html`\n <div class=\"grid ${gridClass}\">\n ${visible.map((img, i) => {\n const isLast = i === visible.length - 1 && overflow > 0;\n const loaded = this._loadedSet.has(i);\n return html`\n <div\n class=\"img-wrapper ${isLast ? 'overflow-wrapper' : ''}\"\n tabindex=\"0\"\n role=\"button\"\n aria-label=\"View image ${i + 1}${img.alt ? ': ' + img.alt : ''}\"\n @click=${() => this._handleClick(i)}\n @keydown=${(e: KeyboardEvent) => this._handleImageKeydown(e, i)}\n >\n ${!loaded ? html`<div class=\"skeleton\"></div>` : nothing}\n ${isLast && overflow > 0 ? html`<div class=\"overflow-badge\">+${overflow}</div>` : nothing}\n <img\n src=${img.src}\n alt~~=${img.alt ?? ''}~~\n loading=\"lazy\"\n @load=${() => this._handleImageLoad(i)}\n />\n </div>\n `;\n })}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap { 'cg-image-gallery': CgImageGallery; }\n}\n"],"names":["CgImageGallery","LitElement","idx","e","visible","overflow","count","gridClass","html","img","i","isLast","loaded","nothing","hostBlock","reducedMotion","shimmerKeyframes","css","__decorateClass","property","state","customElement"],"mappings":";;;;;;;;AAkBO,IAAMA,IAAN,cAA6BC,EAAW;AAAA,EAAxC,cAAA;AAAA,UAAA,GAAA,SAAA,GAsFsB,KAAA,SAAyB,CAAA,GACvB,KAAA,UAAgD,MACjD,KAAA,aAAa,GAEhC,KAAQ,iCAAiB,IAAA;AAAA,EAAY;AAAA,EAEtC,iBAAiBC,GAAa;AACpC,SAAK,iCAAiB,IAAI,CAAC,GAAG,KAAK,YAAYA,CAAG,CAAC;AAAA,EACrD;AAAA,EAEQ,oBAAoBC,GAAkBD,GAAa;AACzD,KAAIC,EAAE,QAAQ,WAAWA,EAAE,QAAQ,SACjCA,EAAE,eAAA,GACF,KAAK,aAAaD,CAAG;AAAA,EAEzB;AAAA,EAEQ,aAAaA,GAAa;AAChC,SAAK,cAAc,IAAI,YAAY,oBAAoB;AAAA,MACrD,QAAQ,EAAE,OAAOA,GAAK,OAAO,KAAK,OAAOA,CAAG,EAAA;AAAA,MAC5C,SAAS;AAAA,MACT,UAAU;AAAA,IAAA,CACX,CAAC;AAAA,EACJ;AAAA,EAES,SAAS;AAChB,UAAME,IAAU,KAAK,OAAO,MAAM,GAAG,KAAK,UAAU,GAC9CC,IAAW,KAAK,OAAO,SAAS,KAAK,YACrCC,IAAQ,KAAK,IAAIF,EAAQ,QAAQ,CAAC,GAClCG,IAAYD,KAAS,IAAI,SAASA,CAAK,KAAK;AAElD,WAAOE;AAAA,yBACcD,CAAS;AAAA,UACxBH,EAAQ,IAAI,CAACK,GAAKC,MAAM;AACxB,YAAMC,IAASD,MAAMN,EAAQ,SAAS,KAAKC,IAAW,GAChDO,IAAS,KAAK,WAAW,IAAIF,CAAC;AACpC,aAAOF;AAAA;AAAA,mCAEkBG,IAAS,qBAAqB,EAAE;AAAA;AAAA;AAAA,uCAG5BD,IAAI,CAAC,GAAGD,EAAI,MAAM,OAAOA,EAAI,MAAM,EAAE;AAAA,uBACrD,MAAM,KAAK,aAAaC,CAAC,CAAC;AAAA,yBACxB,CAACP,MAAqB,KAAK,oBAAoBA,GAAGO,CAAC,CAAC;AAAA;AAAA,gBAE5DE,IAA8CC,IAArCL,+BAA4C;AAAA,gBACtDG,KAAUN,IAAW,IAAIG,iCAAoCH,CAAQ,WAAWQ,CAAO;AAAA;AAAA,sBAEjFJ,EAAI,GAAG;AAAA~~,sBACPA,EAAI,OAAO,EAAE~~;AAAA;AAAA,~~wBAEX~~,MAAM,KAAK,iBAAiBC,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,IAI9C,CAAC,CAAC;AAAA;AAAA;AAAA,EAGR;AACF;AAjJaV,EACK,SAAS,CAACc,GAAWC,GAAeC,GAAkBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAmFrE;AAE0BC,EAAA;AAAA,EAA1BC,EAAS,EAAE,MAAM,MAAA,CAAO;AAAA,GAtFdnB,EAsFgB,WAAA,UAAA,CAAA;AACEkB,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAvFhBnB,EAuFkB,WAAA,WAAA,CAAA;AACDkB,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAxFfnB,EAwFiB,WAAA,cAAA,CAAA;AAEXkB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GA1FIpB,EA0FM,WAAA,cAAA,CAAA;AA1FNA,IAANkB,EAAA;AAAA,EADNG,EAAc,kBAAkB;AAAA,GACpBrB,CAAA;"}
1	+ {"version":3,"file":"cg-image-gallery.js","sources":["../../../src/components/cg-image-gallery/cg-image-gallery.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, shimmerKeyframes } from '../../styles/index.js';\n\n/** Image entry for cg-image-gallery, with source URL, alt text, and optional caption. /\nexport interface GalleryImage { src: string; alt?: string; caption?: string; }\n\n/\n <cg-image-gallery> — Responsive image grid with lightbox click and \"show all\" overflow.\n \n Features:\n * - Smart grid layout (adapts to image count: 1-5 different layouts)\n * - Max visible images with \"+N more\" badge\n * - Click to emit event (for lightbox integration)\n * - Loading skeleton per image\n * - Responsive column sizing\n /\n@customElement('cg-image-gallery')\nexport class CgImageGallery extends LitElement {\n static override styles = [hostBlock, reducedMotion, shimmerKeyframes, css`\n .grid {\n display: grid;\n gap: var(--cg-spacing-8);\n border-radius: var(--cg-border-radius-200);\n overflow: hidden;\n }\n\n / Smart layouts based on image count /\n .grid.count-1 { grid-template-columns: 1fr; }\n .grid.count-2 { grid-template-columns: 1fr 1fr; }\n .grid.count-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }\n .grid.count-3 .img-wrapper:first-child { grid-row: 1 / 3; }\n .grid.count-4 { grid-template-columns: 1fr 1fr; }\n .grid.count-many { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }\n\n .img-wrapper {\n position: relative;\n overflow: hidden;\n border-radius: var(--cg-border-radius-50);\n background: var(--cg-color-surface-container-background);\n cursor: pointer;\n }\n .img-wrapper::after {\n content: '';\n position: absolute;\n inset: 0;\n background: transparent;\n transition: background var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n }\n .img-wrapper:focus-visible {\n outline: none;\n box-shadow: inset 0 0 0 2px var(--cg-color-focus-ring-offset), inset 0 0 0 4px var(--cg-color-focus-ring);\n }\n .img-wrapper:hover::after {\n background: var(--cg-overlay-dark-subtle);\n }\n\n img {\n width: 100%;\n aspect-ratio: 1;\n object-fit: cover;\n display: block;\n transition: transform var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n }\n .img-wrapper:hover img { transform: scale(1.03); }\n .img-wrapper:active img { transform: scale(0.98); }\n\n .grid.count-1 img { aspect-ratio: 16 / 9; }\n .grid.count-3 .img-wrapper:first-child img { aspect-ratio: auto; height: 100%; }\n\n / Overflow badge /\n .overflow-wrapper {\n position: relative;\n }\n .overflow-badge {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--cg-overlay-dark-strong);\n color: var(--cg-overlay-dark-text);\n font-size: var(--cg-font-size-lg);\n font-weight: var(--cg-font-weight-bold);\n z-index: 1;\n pointer-events: none;\n }\n\n / Skeleton /\n .skeleton {\n position: absolute; inset: 0;\n background: linear-gradient(90deg, var(--cg-color-surface-container-border) 25%, var(--cg-color-surface-container-background) 50%, var(--cg-color-surface-container-border) 75%);\n background-size: 200% 100%;\n animation: shimmer 1.5s infinite;\n }\n\n / Rounded variants */\n :host([rounded=\"none\"]) .grid { border-radius: 0; }\n :host([rounded=\"sm\"]) .grid { border-radius: var(--cg-border-radius-50); }\n :host([rounded=\"md\"]) .grid { border-radius: var(--cg-border-radius-100); }\n :host([rounded=\"lg\"]) .grid { border-radius: var(--cg-border-radius-150); }\n :host([rounded=\"full\"]) .grid { border-radius: var(--cg-border-radius-full); }\n `];\n\n @property({ type: Array }) images: GalleryImage[] = [];\n @property({ reflect: true }) rounded: 'none' \| 'sm' \| 'md' \| 'lg' \| 'full' = 'lg';\n @property({ type: Number }) maxVisible = 5;\n\n @state() private _loadedSet = new Set<number>();\n\n private _handleImageLoad(idx: number) {\n this._loadedSet = new Set([...this._loadedSet, idx]);\n }\n\n private _handleImageKeydown(e: KeyboardEvent, idx: number) {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n this._handleClick(idx);\n }\n }\n\n private _handleClick(idx: number) {\n this.dispatchEvent(new CustomEvent('cg-gallery-click', {\n detail: { index: idx, image: this.images[idx] },\n bubbles: true,\n composed: true,\n }));\n }\n\n override render() {\n const visible = this.images.slice(0, this.maxVisible);\n const overflow = this.images.length - this.maxVisible;\n const count = Math.min(visible.length, 5);\n const gridClass = count <= 4 ? `count-${count}` : 'count-many';\n\n return html`\n <div class=\"grid ${gridClass}\" role=\"group\" aria-label=\"Image gallery\">\n ${visible.map((img, i) => {\n const isLast = i === visible.length - 1 && overflow > 0;\n const loaded = this._loadedSet.has(i);\n return html`\n <div\n class=\"img-wrapper ${isLast ? 'overflow-wrapper' : ''}\"\n tabindex=\"0\"\n role=\"button\"\n aria-label=\"View image ${i + 1}${img.alt ? ': ' + img.alt : ''}\"\n @click=${() => this._handleClick(i)}\n @keydown=${(e: KeyboardEvent) => this._handleImageKeydown(e, i)}\n >\n ${!loaded ? html`<div class=\"skeleton\"></div>` : nothing}\n ${isLast && overflow > 0 ? html`<div class=\"overflow-badge\">+${overflow}</div>` : nothing}\n <img\n src=${img.src}\n alt=\"\"\n loading=\"lazy\"\n @load=${() => this._handleImageLoad(i)}\n />\n </div>\n `;\n })}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap { 'cg-image-gallery': CgImageGallery; }\n}\n"],"names":["CgImageGallery","LitElement","idx","e","visible","overflow","count","gridClass","html","img","i","isLast","loaded","nothing","hostBlock","reducedMotion","shimmerKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/cg-input/cg-input.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { css as g, LitElement as h, nothing as o, html as l } from "lit";
 import { property as r, state as u, query as f, customElement as v } from "lit/decorators.js";
-import { h as b, r as m } from "../../chunks/premium.css-9I4kHrsl.js";
+import { h as b, r as m } from "../../chunks/premium.css-DHekUEUt.js";
 var y = Object.defineProperty, x = Object.getOwnPropertyDescriptor, t = (a, s, i, c) => {
   for (var n = c > 1 ? void 0 : c ? x(s, i) : s, d = a.length - 1, p; d >= 0; d--)
     (p = a[d]) && (n = (c ? p(s, i, n) : p(n)) || n);
@@ -64,7 +64,7 @@ let e = class extends h {
             aria-invalid=${this.error ? "true" : "false"}
             aria-busy=${this.loading ? "true" : "false"}
             aria-required=${this.required ? "true" : "false"}
-            aria-label=${this.label || o}
+            aria-label=${this.label || this.placeholder || o}
             aria-describedby=${this.helper ? "helper" : o}
             @input=${this._handleInput}
             @focus=${this._handleFocus}
@@ -164,7 +164,7 @@ e.styles = [b, m, g`
     }
     :host([success]) .wrapper.focused {
       border-color: var(--cg-color-status-success-text-default);
-      box-shadow: 0 0 0 3px var(--cg-shadow-focus-success);
+      box-shadow: 0 0 0 var(--cg-border-width-300) var(--cg-shadow-focus-success);
     }
     /* Disabled */

package/dist/components/cg-input/cg-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cg-input.js","sources":["../../../src/components/cg-input/cg-input.ts"],"sourcesContent":["import { LitElement, html, css, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/*\n @element cg-input\n * Text input with floating label, prefix/suffix slots, clear button, and validation states.\n \n @example\n * ```html\n * <cg-input label=\"Email\" type=\"email\" placeholder=\"you@example.com\"></cg-input>\n * <cg-input label=\"Search\" clearable><span slot=\"prefix\">[search icon]</span></cg-input>\n * <cg-input label=\"Bio\" maxlength=\"200\" error helper=\"Too long\"></cg-input>\n * ```\n \n @slot prefix - Icon or content before the input field\n * @slot suffix - Icon or content after the input field\n \n @fires {CustomEvent<{value: string}>} cg-input - On every input change\n * @fires {CustomEvent} cg-clear - When the clear button is clicked\n \n @cssprop [--cg-color-input-border-default=#3f3f46] - Default border color\n * @cssprop [--cg-brand-ai-accent=#dfff61] - Focus ring and floating label color\n * @cssprop [--cg-component-input-height-md=44px] - Input height (md size)\n * @cssprop [--cg-color-input-background-default=#18181b] - Input background\n /\n@customElement('cg-input')\nexport class CgInput 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: block; }\n\n .wrapper {\n display: flex;\n align-items: center;\n gap: 0;\n padding: 0 var(--cg-spacing-4);\n border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n border-radius: var(--cg-component-input-radius);\n background: var(--cg-color-input-background-default);\n transition:\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 height: var(--cg-component-input-height-md);\n position: relative;\n }\n\n / Size variants /\n :host([size=\"lg\"]) .wrapper { height: var(--cg-component-input-height-lg); padding: 0 var(--cg-spacing-4); border-radius: var(--cg-border-radius-150); }\n\n / Rounded variants /\n :host([rounded=\"none\"]) .wrapper { border-radius: 0; }\n :host([rounded=\"sm\"]) .wrapper { border-radius: var(--cg-border-radius-50); }\n :host([rounded=\"md\"]) .wrapper { border-radius: var(--cg-border-radius-100); }\n :host([rounded=\"lg\"]) .wrapper { border-radius: var(--cg-component-input-radius); }\n\n / Hover /\n .wrapper:hover:not(.disabled):not(.readonly) {\n border-color: var(--cg-color-input-border-hover);\n }\n\n / Active / Press — no scale transform on text inputs /\n\n / Loading /\n :host([loading]) .wrapper {\n position: relative;\n pointer-events: none;\n opacity: 0.7;\n }\n .loading-spinner {\n width: var(--cg-spacing-16);\n height: var(--cg-spacing-16);\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-input-spin 600ms linear infinite;\n flex-shrink: 0;\n }\n @keyframes cg-input-spin {\n to { transform: rotate(360deg); }\n }\n\n / Focus — border change + subtle glow /\n .wrapper.focused {\n border-color: var(--cg-color-input-border-focus);\n box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n }\n\n / Error /\n :host([error]) .wrapper {\n border-color: var(--cg-color-input-border-error);\n }\n :host([error]) .wrapper.focused {\n border-color: var(--cg-color-status-error-text-default);\n box-shadow: 0 0 0 3px var(--cg-shadow-focus-error);\n }\n\n / Success /\n :host([success]) .wrapper {\n border-color: var(--cg-color-input-icon-success);\n }\n :host([success]) .wrapper.focused {\n border-color: var(--cg-color-status-success-text-default);\n box-shadow: 0 0 0 3px var(--cg-shadow-focus-success);\n }\n\n / Disabled /\n .wrapper.disabled {\n opacity: 0.5;\n pointer-events: none;\n background: var(--cg-color-input-background-disabled);\n border-color: var(--cg-color-input-border-disabled);\n }\n\n / Readonly /\n .wrapper.readonly {\n background: var(--cg-color-surface-field-readonly-background);\n border-style: dashed;\n }\n\n / ── Input field area ── /\n .field {\n flex: 1;\n position: relative;\n display: flex;\n align-items: center;\n min-width: 0;\n min-height: 100%;\n padding: 0 var(--cg-spacing-8);\n }\n\n input {\n width: 100%;\n border: none;\n outline: none;\n background: transparent;\n font: inherit;\n font-size: var(--cg-font-size-sm);\n color: var(--cg-color-input-text-default);\n min-width: 0;\n padding: var(--cg-spacing-8) 0;\n z-index: 1;\n }\n :host([size=\"lg\"]) input { font-size: var(--cg-font-size-base); padding: var(--cg-spacing-12) 0; }\n\n / When floating label is active, shift input down to make room /\n :host([label]) input {\n padding-top: var(--cg-spacing-20);\n padding-bottom: var(--cg-spacing-2);\n }\n :host([label][size=\"lg\"]) input {\n padding-top: var(--cg-spacing-24);\n padding-bottom: var(--cg-spacing-4);\n }\n\n input::placeholder {\n color: transparent;\n }\n / Show placeholder only when label is floated (focused or has value) /\n .field.floated input::placeholder {\n color: var(--cg-color-input-text-placeholder);\n transition: color var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n }\n\n input:disabled { cursor: not-allowed; }\n\n / ── Floating label ── /\n .floating-label {\n position: absolute;\n left: var(--cg-spacing-8);\n right: var(--cg-spacing-8);\n top: 50%;\n transform: translateY(-50%);\n font-size: var(--cg-font-size-sm);\n color: var(--cg-color-input-text-placeholder);\n pointer-events: none;\n transform-origin: left top;\n transition:\n top var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n transform var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n font-size var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n z-index: 2;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n :host([size=\"lg\"]) .floating-label { font-size: var(--cg-font-size-base); }\n\n / Floated state — label shrinks and moves to top /\n .field.floated .floating-label {\n top: var(--cg-spacing-6);\n transform: translateY(0);\n font-size: var(--cg-font-size-xs);\n color: var(--cg-color-surface-container-text);\n }\n :host([size=\"lg\"]) .field.floated .floating-label {\n top: var(--cg-spacing-8);\n font-size: var(--cg-font-size-xs);\n }\n\n / Error state label color /\n :host([error]) .field.floated .floating-label {\n color: var(--cg-color-status-error-text-default);\n }\n\n / Success state label color /\n :host([success]) .field.floated .floating-label {\n color: var(--cg-color-status-success-text-default);\n }\n\n / Disabled label /\n .wrapper.disabled .floating-label {\n color: var(--cg-color-input-text-disabled);\n }\n\n / ── Slots — hidden by default, shown when content is slotted ── /\n .prefix, .suffix {\n display: none;\n align-items: center;\n justify-content: center;\n color: var(--cg-color-input-icon-default);\n flex-shrink: 0;\n width: var(--cg-spacing-40);\n align-self: stretch;\n background: var(--cg-overlay-dark-subtle);\n }\n .prefix.has-content, .suffix.has-content {\n display: flex;\n }\n .prefix {\n border-right: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n border-radius: var(--cg-component-input-radius) 0 0 var(--cg-component-input-radius);\n margin-left: calc(-1 var(--cg-spacing-4));\n }\n .suffix {\n border-left: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n border-radius: 0 var(--cg-component-input-radius) var(--cg-component-input-radius) 0;\n margin-right: calc(-1 * var(--cg-spacing-4));\n }\n\n /* ── Clear button ── /\n .clear {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--cg-spacing-20);\n height: var(--cg-spacing-20);\n border: none;\n background: var(--cg-overlay-dark-subtle);\n color: var(--cg-color-input-text-placeholder);\n border-radius: var(--cg-border-radius-full);\n cursor: pointer;\n padding: 0;\n flex-shrink: 0;\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 opacity: 0;\n transform: scale(0.8);\n animation: clearIn 150ms var(--cg-transition-easing-ease-out) forwards;\n }\n .clear:hover { background: var(--cg-overlay-accent-subtle); color: var(--cg-color-surface-base-text); }\n .clear:active { transform: scale(0.9); }\n .clear svg { width: var(--cg-spacing-12); height: var(--cg-spacing-12); }\n\n @keyframes clearIn {\n from { opacity: 0; transform: scale(0.8); }\n to { opacity: 1; transform: scale(1); }\n }\n\n / ── Character count ── /\n .count {\n font-size: var(--cg-font-size-xs);\n color: var(--cg-color-input-text-placeholder);\n flex-shrink: 0;\n font-variant-numeric: tabular-nums;\n transition: color var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n }\n :host([error]) .count { color: var(--cg-color-status-error-text-default); }\n\n / ── Helper text ── */\n .helper {\n font-size: var(--cg-font-size-xs);\n color: var(--cg-color-input-text-placeholder);\n padding: var(--cg-spacing-8) var(--cg-spacing-12) 0;\n }\n :host([error]) .helper { color: var(--cg-color-status-error-text-default); }\n :host([success]) .helper { color: var(--cg-color-status-success-text-default); }\n `];\n\n @property({ reflect: true }) label = '';\n @property() value = '';\n @property() placeholder = '';\n @property() name = '';\n @property() helper = '';\n @property({ reflect: true }) type: 'text' \| 'email' \| 'password' \| 'number' \| 'url' \| 'search' \| 'tel' = 'text';\n @property({ reflect: true }) size: 'md' \| 'lg' = 'md';\n @property({ reflect: true }) rounded: 'none' \| 'sm' \| 'md' \| 'lg' = 'lg';\n @property({ type: Boolean, reflect: true }) disabled = false;\n @property({ type: Boolean }) readonly = 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({ type: Boolean }) clearable = false;\n @property({ type: Number }) maxlength = 0;\n @property() autocomplete = 'off';\n\n @state() private _focused = false;\n @state() private _hasPrefix = false;\n @state() private _hasSuffix = false;\n\n @query('input') private _input!: HTMLInputElement;\n\n override updated(changed: PropertyValues) {\n super.updated(changed);\n if (changed.has('value')) {\n this._internals?.setFormValue(this.value);\n }\n if (changed.has('required') \|\| changed.has('value')) {\n if (this.required && !this.value) {\n this._internals?.setValidity({ valueMissing: true }, 'This field is required');\n } else {\n this._internals?.setValidity({});\n }\n }\n }\n\n formResetCallback() {\n this.value = this.getAttribute('value') ?? '';\n }\n\n formStateRestoreCallback(state: string) {\n this.value = state;\n }\n\n private get _isFloated() {\n return this._focused \|\| !!this.value;\n }\n\n private _handleInput(e: Event) {\n const input = e.target as HTMLInputElement;\n this.value = input.value;\n this.dispatchEvent(new CustomEvent('cg-input', { detail: { value: this.value }, bubbles: true, composed: true }));\n }\n\n private _handleFocus() { this._focused = true; }\n private _handleBlur() { this._focused = false; }\n\n private _handleClear() {\n this.value = '';\n this._input.value = '';\n this._input.focus();\n this.dispatchEvent(new CustomEvent('cg-input', { detail: { value: '' }, bubbles: true, composed: true }));\n this.dispatchEvent(new CustomEvent('cg-clear', { bubbles: true, composed: true }));\n }\n\n override render() {\n const wrapperClasses = [\n 'wrapper',\n this._focused ? 'focused' : '',\n this.disabled ? 'disabled' : '',\n this.readonly ? 'readonly' : '',\n ].filter(Boolean).join(' ');\n\n const fieldClasses = ['field', this._isFloated ? 'floated' : ''].filter(Boolean).join(' ');\n\n return html`\n <div class=${wrapperClasses}>\n <span class=\"prefix ${this._hasPrefix ? 'has-content' : ''}\">\n <slot name=\"prefix\" @slotchange=${(e: Event) => { this._hasPrefix = (e.target as HTMLSlotElement).assignedNodes().length > 0; }}></slot>\n </span>\n\n <div class=${fieldClasses}>\n ${this.label ? html`<span class=\"floating-label\">${this.label}</span>` : nothing}\n <input\n .value=${this.value}\n type=${this.type}\n name=${this.name \|\| nothing}\n placeholder=${this.placeholder \|\| (this.label ? ' ' : nothing)}\n ?disabled=${this.disabled \|\| this.loading}\n ?readonly=${this.readonly}\n maxlength=${this.maxlength \|\| nothing}\n autocomplete=${this.autocomplete}\n aria-invalid=${this.error ? 'true' : 'false'}\n aria-busy=${this.loading ? 'true' : 'false'}\n aria-required=${this.required ? 'true' : 'false'}\n aria-label=${this.label \|\| nothing}\n aria-describedby=${this.helper ? 'helper' : nothing}\n @input=${this._handleInput}\n @focus=${this._handleFocus}\n @blur=${this._handleBlur}\n />\n </div>\n\n ${this.loading ? html`<span class=\"loading-spinner\" aria-hidden=\"true\"></span>` : nothing}\n ${this.clearable && this.value && !this.loading ? html`\n <button class=\"clear\" @click=${this._handleClear} aria-label=\"Clear input\" tabindex=\"-1\">\n <cg-icon name=\"x\" size=\"xs\"></cg-icon>\n </button>\n ` : nothing}\n ${this.maxlength ? html`<span class=\"count\">${this.value.length}/${this.maxlength}</span>` : nothing}\n <span class=\"suffix ${this._hasSuffix ? 'has-content' : ''}\">\n <slot name=\"suffix\" @slotchange=${(e: Event) => { this._hasSuffix = (e.target as HTMLSlotElement).assignedNodes().length > 0; }}></slot>\n </span>\n </div>\n ${this.helper ? html`<div class=\"helper\" id=\"helper\">${this.helper}</div>` : nothing}\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'cg-input': CgInput;\n }\n}\n"],"names":["CgInput","LitElement","changed","state","e","input","wrapperClasses","fieldClasses","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","query","customElement"],"mappings":"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"}
1	+ {"version":3,"file":"cg-input.js","sources":["../../../src/components/cg-input/cg-input.ts"],"sourcesContent":["import { LitElement, html, css, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/*\n @element cg-input\n * Text input with floating label, prefix/suffix slots, clear button, and validation states.\n \n @example\n * ```html\n * <cg-input label=\"Email\" type=\"email\" placeholder=\"you@example.com\"></cg-input>\n * <cg-input label=\"Search\" clearable><span slot=\"prefix\">[search icon]</span></cg-input>\n * <cg-input label=\"Bio\" maxlength=\"200\" error helper=\"Too long\"></cg-input>\n * ```\n \n @slot prefix - Icon or content before the input field\n * @slot suffix - Icon or content after the input field\n \n @fires {CustomEvent<{value: string}>} cg-input - On every input change\n * @fires {CustomEvent} cg-clear - When the clear button is clicked\n \n @cssprop [--cg-color-input-border-default=#3f3f46] - Default border color\n * @cssprop [--cg-brand-ai-accent=#dfff61] - Focus ring and floating label color\n * @cssprop [--cg-component-input-height-md=44px] - Input height (md size)\n * @cssprop [--cg-color-input-background-default=#18181b] - Input background\n /\n@customElement('cg-input')\nexport class CgInput 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: block; }\n\n .wrapper {\n display: flex;\n align-items: center;\n gap: 0;\n padding: 0 var(--cg-spacing-4);\n border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n border-radius: var(--cg-component-input-radius);\n background: var(--cg-color-input-background-default);\n transition:\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 height: var(--cg-component-input-height-md);\n position: relative;\n }\n\n / Size variants /\n :host([size=\"lg\"]) .wrapper { height: var(--cg-component-input-height-lg); padding: 0 var(--cg-spacing-4); border-radius: var(--cg-border-radius-150); }\n\n / Rounded variants /\n :host([rounded=\"none\"]) .wrapper { border-radius: 0; }\n :host([rounded=\"sm\"]) .wrapper { border-radius: var(--cg-border-radius-50); }\n :host([rounded=\"md\"]) .wrapper { border-radius: var(--cg-border-radius-100); }\n :host([rounded=\"lg\"]) .wrapper { border-radius: var(--cg-component-input-radius); }\n\n / Hover /\n .wrapper:hover:not(.disabled):not(.readonly) {\n border-color: var(--cg-color-input-border-hover);\n }\n\n / Active / Press — no scale transform on text inputs /\n\n / Loading /\n :host([loading]) .wrapper {\n position: relative;\n pointer-events: none;\n opacity: 0.7;\n }\n .loading-spinner {\n width: var(--cg-spacing-16);\n height: var(--cg-spacing-16);\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-input-spin 600ms linear infinite;\n flex-shrink: 0;\n }\n @keyframes cg-input-spin {\n to { transform: rotate(360deg); }\n }\n\n / Focus — border change + subtle glow /\n .wrapper.focused {\n border-color: var(--cg-color-input-border-focus);\n box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n }\n\n / Error /\n :host([error]) .wrapper {\n border-color: var(--cg-color-input-border-error);\n }\n :host([error]) .wrapper.focused {\n border-color: var(--cg-color-status-error-text-default);\n box-shadow: 0 0 0 3px var(--cg-shadow-focus-error);\n }\n\n / Success /\n :host([success]) .wrapper {\n border-color: var(--cg-color-input-icon-success);\n }\n :host([success]) .wrapper.focused {\n border-color: var(--cg-color-status-success-text-default);\n box-shadow: 0 0 0 var(--cg-border-width-300) var(--cg-shadow-focus-success);\n }\n\n / Disabled /\n .wrapper.disabled {\n opacity: 0.5;\n pointer-events: none;\n background: var(--cg-color-input-background-disabled);\n border-color: var(--cg-color-input-border-disabled);\n }\n\n / Readonly /\n .wrapper.readonly {\n background: var(--cg-color-surface-field-readonly-background);\n border-style: dashed;\n }\n\n / ── Input field area ── /\n .field {\n flex: 1;\n position: relative;\n display: flex;\n align-items: center;\n min-width: 0;\n min-height: 100%;\n padding: 0 var(--cg-spacing-8);\n }\n\n input {\n width: 100%;\n border: none;\n outline: none;\n background: transparent;\n font: inherit;\n font-size: var(--cg-font-size-sm);\n color: var(--cg-color-input-text-default);\n min-width: 0;\n padding: var(--cg-spacing-8) 0;\n z-index: 1;\n }\n :host([size=\"lg\"]) input { font-size: var(--cg-font-size-base); padding: var(--cg-spacing-12) 0; }\n\n / When floating label is active, shift input down to make room /\n :host([label]) input {\n padding-top: var(--cg-spacing-20);\n padding-bottom: var(--cg-spacing-2);\n }\n :host([label][size=\"lg\"]) input {\n padding-top: var(--cg-spacing-24);\n padding-bottom: var(--cg-spacing-4);\n }\n\n input::placeholder {\n color: transparent;\n }\n / Show placeholder only when label is floated (focused or has value) /\n .field.floated input::placeholder {\n color: var(--cg-color-input-text-placeholder);\n transition: color var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n }\n\n input:disabled { cursor: not-allowed; }\n\n / ── Floating label ── /\n .floating-label {\n position: absolute;\n left: var(--cg-spacing-8);\n right: var(--cg-spacing-8);\n top: 50%;\n transform: translateY(-50%);\n font-size: var(--cg-font-size-sm);\n color: var(--cg-color-input-text-placeholder);\n pointer-events: none;\n transform-origin: left top;\n transition:\n top var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n transform var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n font-size var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n z-index: 2;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n :host([size=\"lg\"]) .floating-label { font-size: var(--cg-font-size-base); }\n\n / Floated state — label shrinks and moves to top /\n .field.floated .floating-label {\n top: var(--cg-spacing-6);\n transform: translateY(0);\n font-size: var(--cg-font-size-xs);\n color: var(--cg-color-surface-container-text);\n }\n :host([size=\"lg\"]) .field.floated .floating-label {\n top: var(--cg-spacing-8);\n font-size: var(--cg-font-size-xs);\n }\n\n / Error state label color /\n :host([error]) .field.floated .floating-label {\n color: var(--cg-color-status-error-text-default);\n }\n\n / Success state label color /\n :host([success]) .field.floated .floating-label {\n color: var(--cg-color-status-success-text-default);\n }\n\n / Disabled label /\n .wrapper.disabled .floating-label {\n color: var(--cg-color-input-text-disabled);\n }\n\n / ── Slots — hidden by default, shown when content is slotted ── /\n .prefix, .suffix {\n display: none;\n align-items: center;\n justify-content: center;\n color: var(--cg-color-input-icon-default);\n flex-shrink: 0;\n width: var(--cg-spacing-40);\n align-self: stretch;\n background: var(--cg-overlay-dark-subtle);\n }\n .prefix.has-content, .suffix.has-content {\n display: flex;\n }\n .prefix {\n border-right: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n border-radius: var(--cg-component-input-radius) 0 0 var(--cg-component-input-radius);\n margin-left: calc(-1 var(--cg-spacing-4));\n }\n .suffix {\n border-left: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n border-radius: 0 var(--cg-component-input-radius) var(--cg-component-input-radius) 0;\n margin-right: calc(-1 * var(--cg-spacing-4));\n }\n\n /* ── Clear button ── /\n .clear {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--cg-spacing-20);\n height: var(--cg-spacing-20);\n border: none;\n background: var(--cg-overlay-dark-subtle);\n color: var(--cg-color-input-text-placeholder);\n border-radius: var(--cg-border-radius-full);\n cursor: pointer;\n padding: 0;\n flex-shrink: 0;\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 opacity: 0;\n transform: scale(0.8);\n animation: clearIn 150ms var(--cg-transition-easing-ease-out) forwards;\n }\n .clear:hover { background: var(--cg-overlay-accent-subtle); color: var(--cg-color-surface-base-text); }\n .clear:active { transform: scale(0.9); }\n .clear svg { width: var(--cg-spacing-12); height: var(--cg-spacing-12); }\n\n @keyframes clearIn {\n from { opacity: 0; transform: scale(0.8); }\n to { opacity: 1; transform: scale(1); }\n }\n\n / ── Character count ── /\n .count {\n font-size: var(--cg-font-size-xs);\n color: var(--cg-color-input-text-placeholder);\n flex-shrink: 0;\n font-variant-numeric: tabular-nums;\n transition: color var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n }\n :host([error]) .count { color: var(--cg-color-status-error-text-default); }\n\n / ── Helper text ── */\n .helper {\n font-size: var(--cg-font-size-xs);\n color: var(--cg-color-input-text-placeholder);\n padding: var(--cg-spacing-8) var(--cg-spacing-12) 0;\n }\n :host([error]) .helper { color: var(--cg-color-status-error-text-default); }\n :host([success]) .helper { color: var(--cg-color-status-success-text-default); }\n `];\n\n @property({ reflect: true }) label = '';\n @property() value = '';\n @property() placeholder = '';\n @property() name = '';\n @property() helper = '';\n @property({ reflect: true }) type: 'text' \| 'email' \| 'password' \| 'number' \| 'url' \| 'search' \| 'tel' = 'text';\n @property({ reflect: true }) size: 'md' \| 'lg' = 'md';\n @property({ reflect: true }) rounded: 'none' \| 'sm' \| 'md' \| 'lg' = 'lg';\n @property({ type: Boolean, reflect: true }) disabled = false;\n @property({ type: Boolean }) readonly = 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({ type: Boolean }) clearable = false;\n @property({ type: Number }) maxlength = 0;\n @property() autocomplete = 'off';\n\n @state() private _focused = false;\n @state() private _hasPrefix = false;\n @state() private _hasSuffix = false;\n\n @query('input') private _input!: HTMLInputElement;\n\n override updated(changed: PropertyValues) {\n super.updated(changed);\n if (changed.has('value')) {\n this._internals?.setFormValue(this.value);\n }\n if (changed.has('required') \|\| changed.has('value')) {\n if (this.required && !this.value) {\n this._internals?.setValidity({ valueMissing: true }, 'This field is required');\n } else {\n this._internals?.setValidity({});\n }\n }\n }\n\n formResetCallback() {\n this.value = this.getAttribute('value') ?? '';\n }\n\n formStateRestoreCallback(state: string) {\n this.value = state;\n }\n\n private get _isFloated() {\n return this._focused \|\| !!this.value;\n }\n\n private _handleInput(e: Event) {\n const input = e.target as HTMLInputElement;\n this.value = input.value;\n this.dispatchEvent(new CustomEvent('cg-input', { detail: { value: this.value }, bubbles: true, composed: true }));\n }\n\n private _handleFocus() { this._focused = true; }\n private _handleBlur() { this._focused = false; }\n\n private _handleClear() {\n this.value = '';\n this._input.value = '';\n this._input.focus();\n this.dispatchEvent(new CustomEvent('cg-input', { detail: { value: '' }, bubbles: true, composed: true }));\n this.dispatchEvent(new CustomEvent('cg-clear', { bubbles: true, composed: true }));\n }\n\n override render() {\n const wrapperClasses = [\n 'wrapper',\n this._focused ? 'focused' : '',\n this.disabled ? 'disabled' : '',\n this.readonly ? 'readonly' : '',\n ].filter(Boolean).join(' ');\n\n const fieldClasses = ['field', this._isFloated ? 'floated' : ''].filter(Boolean).join(' ');\n\n return html`\n <div class=${wrapperClasses}>\n <span class=\"prefix ${this._hasPrefix ? 'has-content' : ''}\">\n <slot name=\"prefix\" @slotchange=${(e: Event) => { this._hasPrefix = (e.target as HTMLSlotElement).assignedNodes().length > 0; }}></slot>\n </span>\n\n <div class=${fieldClasses}>\n ${this.label ? html`<span class=\"floating-label\">${this.label}</span>` : nothing}\n <input\n .value=${this.value}\n type=${this.type}\n name=${this.name \|\| nothing}\n placeholder=${this.placeholder \|\| (this.label ? ' ' : nothing)}\n ?disabled=${this.disabled \|\| this.loading}\n ?readonly=${this.readonly}\n maxlength=${this.maxlength \|\| nothing}\n autocomplete=${this.autocomplete}\n aria-invalid=${this.error ? 'true' : 'false'}\n aria-busy=${this.loading ? 'true' : 'false'}\n aria-required=${this.required ? 'true' : 'false'}\n aria-label=${this.label \|\| this.placeholder \|\| nothing}\n aria-describedby=${this.helper ? 'helper' : nothing}\n @input=${this._handleInput}\n @focus=${this._handleFocus}\n @blur=${this._handleBlur}\n />\n </div>\n\n ${this.loading ? html`<span class=\"loading-spinner\" aria-hidden=\"true\"></span>` : nothing}\n ${this.clearable && this.value && !this.loading ? html`\n <button class=\"clear\" @click=${this._handleClear} aria-label=\"Clear input\" tabindex=\"-1\">\n <cg-icon name=\"x\" size=\"xs\"></cg-icon>\n </button>\n ` : nothing}\n ${this.maxlength ? html`<span class=\"count\">${this.value.length}/${this.maxlength}</span>` : nothing}\n <span class=\"suffix ${this._hasSuffix ? 'has-content' : ''}\">\n <slot name=\"suffix\" @slotchange=${(e: Event) => { this._hasSuffix = (e.target as HTMLSlotElement).assignedNodes().length > 0; }}></slot>\n </span>\n </div>\n ${this.helper ? html`<div class=\"helper\" id=\"helper\">${this.helper}</div>` : nothing}\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'cg-input': CgInput;\n }\n}\n"],"names":["CgInput","LitElement","changed","state","e","input","wrapperClasses","fieldClasses","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","query","customElement"],"mappings":"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"}

package/dist/components/cg-kbd/cg-kbd.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cg-kbd.d.ts","sourceRoot":"","sources":["../../../src/components/cg-kbd/cg-kbd.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;;;;;;;;GAYG;AACH,qBACa,KAAM,SAAQ,UAAU;IACnC,OAAgB,MAAM,~~4BAiDnB~~;IAES,IAAI,EAAE,MAAM,CAAM;IACD,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAChC,OAAO,EAAE,SAAS,GAAG,SAAS,CAAa;IAE/D,MAAM;CAYhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,KAAK,CAAC;KACjB;CACF"}
1	+ {"version":3,"file":"cg-kbd.d.ts","sourceRoot":"","sources":["../../../src/components/cg-kbd/cg-kbd.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;;;;;;;;GAYG;AACH,qBACa,KAAM,SAAQ,UAAU;IACnC,OAAgB,MAAM,4BAmDnB;IAES,IAAI,EAAE,MAAM,CAAM;IACD,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAChC,OAAO,EAAE,SAAS,GAAG,SAAS,CAAa;IAE/D,MAAM;CAYhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,KAAK,CAAC;KACjB;CACF"}

package/dist/components/cg-kbd/cg-kbd.js CHANGED Viewed

@@ -1,29 +1,29 @@
-import { css as m, LitElement as p, nothing as l, html as s } from "lit";
+import { css as m, LitElement as p, nothing as l, html as i } from "lit";
 import { property as g, customElement as b } from "lit/decorators.js";
-import { a as v } from "../../chunks/premium.css-9I4kHrsl.js";
-var f = Object.defineProperty, h = Object.getOwnPropertyDescriptor, a = (n, e, o, i) => {
-  for (var t = i > 1 ? void 0 : i ? h(e, o) : e, d = n.length - 1, c; d >= 0; d--)
-    (c = n[d]) && (t = (i ? c(e, o, t) : c(t)) || t);
-  return i && t && f(e, o, t), t;
+import { a as v } from "../../chunks/premium.css-DHekUEUt.js";
+var f = Object.defineProperty, h = Object.getOwnPropertyDescriptor, d = (n, e, r, s) => {
+  for (var t = s > 1 ? void 0 : s ? h(e, r) : e, c = n.length - 1, a; c >= 0; c--)
+    (a = n[c]) && (t = (s ? a(e, r, t) : a(t)) || t);
+  return s && t && f(e, r, t), t;
 };
-let r = class extends p {
+let o = class extends p {
   constructor() {
     super(...arguments), this.keys = "", this.size = "md", this.variant = "default";
   }
   render() {
     if (this.keys) {
       const n = this.keys.split(",").map((e) => e.trim()).filter(Boolean);
-      return s`
-        ${n.map((e, o) => s`
-          ${o > 0 ? s`<span class="plus">+</span>` : l}
+      return i`
+        ${n.map((e, r) => i`
+          ${r > 0 ? i`<span class="plus">+</span>` : l}
           <kbd>${e}</kbd>
         `)}
       `;
     }
-    return s`<kbd><slot></slot></kbd>`;
+    return i`<kbd><slot></slot></kbd>`;
   }
 };
-r.styles = [v, m`
+o.styles = [v, m`
     :host {
       display: inline-flex;
       align-items: center;
@@ -34,11 +34,11 @@ r.styles = [v, m`
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      background: var(--cg-color-action-tertiary-background-hover);
+      background: var(--cg-color-surface-cards-background);
       border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
       border-bottom-width: var(--cg-border-width-100);
       border-radius: var(--cg-component-kbd-radius);
-      color: var(--cg-color-surface-base-text);
+      color: var(--cg-color-surface-cards-text);
       font-family: var(--cg-font-family-mono);
       font-weight: var(--cg-font-weight-medium);
       line-height: var(--cg-line-height-tight);
@@ -70,22 +70,24 @@ r.styles = [v, m`
     .plus {
       color: var(--cg-color-surface-container-outlined);
-      font-size: var(--cg-font-size-xs);
     }
+    :host([size="sm"]) .plus { font-size: var(--cg-component-kbd-font-size-sm); }
+    :host([size="md"]) .plus { font-size: var(--cg-component-kbd-font-size-md); }
+    :host([size="lg"]) .plus { font-size: var(--cg-component-kbd-font-size-lg); }
   `];
-a([
+d([
   g()
-], r.prototype, "keys", 2);
-a([
+], o.prototype, "keys", 2);
+d([
   g({ reflect: !0 })
-], r.prototype, "size", 2);
-a([
+], o.prototype, "size", 2);
+d([
   g({ reflect: !0 })
-], r.prototype, "variant", 2);
-r = a([
+], o.prototype, "variant", 2);
+o = d([
   b("cg-kbd")
-], r);
+], o);
 export {
-  r as CgKbd
+  o as CgKbd
 };
 //# sourceMappingURL=cg-kbd.js.map

package/dist/components/cg-kbd/cg-kbd.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cg-kbd.js","sources":["../../../src/components/cg-kbd/cg-kbd.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBase } from '../../styles/index.js';\n\n/*\n @element cg-kbd\n * Keyboard shortcut display chip. Use for showing keyboard combinations like ⌘K.\n \n @example\n * ```html\n * <cg-kbd keys=\"⌘K\"></cg-kbd>\n * <cg-kbd keys=\"Shift,⌘,P\"></cg-kbd>\n * <cg-kbd>Esc</cg-kbd>\n * ```\n \n @slot - Key content (alternative to keys property)\n /\n@customElement('cg-kbd')\nexport class CgKbd extends LitElement {\n static override styles = [hostBase, css`\n :host {\n display: inline-flex;\n align-items: center;\n gap: var(--cg-spacing-4);\n }\n\n kbd {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background: var(--cg-color-~~action~~-~~tertiary~~-background~~-hover~~);\n border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n border-bottom-width: var(--cg-border-width-100);\n border-radius: var(--cg-component-kbd-radius);\n color: var(--cg-color-surface-~~base~~-text);\n font-family: var(--cg-font-family-mono);\n font-weight: var(--cg-font-weight-medium);\n line-height: var(--cg-line-height-tight);\n box-shadow:\n inset 0 var(--cg-border-width-50) 0 var(--cg-overlay-accent-subtle),\n 0 var(--cg-border-width-50) 0 var(--cg-color-surface-cards-border);\n }\n\n / Sizes — driven entirely by Tier-3 tokens for system-wide consistency. */\n :host([size=\"sm\"]) kbd {\n min-width: var(--cg-component-kbd-min-width-sm);\n padding: var(--cg-component-kbd-padding-y-sm) var(--cg-component-kbd-padding-x-sm);\n font-size: var(--cg-component-kbd-font-size-sm);\n }\n :host([size=\"md\"]) kbd {\n min-width: var(--cg-component-kbd-min-width-md);\n padding: var(--cg-component-kbd-padding-y-md) var(--cg-component-kbd-padding-x-md);\n font-size: var(--cg-component-kbd-font-size-md);\n }\n :host([size=\"lg\"]) kbd {\n min-width: var(--cg-component-kbd-min-width-lg);\n padding: var(--cg-component-kbd-padding-y-lg) var(--cg-component-kbd-padding-x-lg);\n font-size: var(--cg-component-kbd-font-size-lg);\n }\n\n :host([variant=\"outline\"]) kbd {\n background: transparent;\n }\n\n .plus {\n color: var(--cg-color-surface-container-outlined);\n font-size: var(--cg-font-size-xs);\n }\n `];\n\n @property() keys: string = '';\n @property({ reflect: true }) size: 'sm' \| 'md' \| 'lg' = 'md';\n @property({ reflect: true }) variant: 'default' \| 'outline' = 'default';\n\n override render() {\n if (this.keys) {\n const keyArr = this.keys.split(',').map(k => k.trim()).filter(Boolean);\n return html`\n ${keyArr.map((key, i) => html`\n ${i > 0 ? html`<span class=\"plus\">+</span>` : nothing}\n <kbd>${key}</kbd>\n `)}\n `;\n }\n return html`<kbd><slot></slot></kbd>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'cg-kbd': CgKbd;\n }\n}\n"],"names":["CgKbd","LitElement","keyArr","k","html","key","i","nothing","hostBase","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAkBO,IAAMA,IAAN,cAAoBC,EAAW;AAAA,EAA/B,cAAA;AAAA,UAAA,GAAA,SAAA,~~GAoDO~~,KAAA,OAAe,IACE,KAAA,OAA2B,MAC3B,KAAA,UAAiC;AAAA,EAAA;AAAA,EAErD,SAAS;AAChB,QAAI,KAAK,MAAM;AACb,YAAMC,IAAS,KAAK,KAAK,MAAM,GAAG,EAAE,IAAI,CAAAC,MAAKA,EAAE,KAAA,CAAM,EAAE,OAAO,OAAO;AACrE,aAAOC;AAAA,UACHF,EAAO,IAAI,CAACG,GAAKC,MAAMF;AAAA,YACrBE,IAAI,IAAIF,iCAAoCG,CAAO;AAAA,iBAC9CF,CAAG;AAAA,SACX,CAAC;AAAA;AAAA,IAEN;AACA,WAAOD;AAAA,EACT;AACF;~~AApEaJ~~,EACK,SAAS,CAACQ,GAAUC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,~~GAiDnC~~;AAEWC,EAAA;AAAA,EAAXC,EAAA;AAAS,~~GApDCX~~,~~EAoDC~~,WAAA,QAAA,CAAA;AACiBU,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,~~GArDhBX~~,~~EAqDkB~~,WAAA,QAAA,CAAA;AACAU,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,~~GAtDhBX~~,~~EAsDkB~~,WAAA,WAAA,CAAA;~~AAtDlBA~~,IAANU,EAAA;AAAA,EADNE,EAAc,QAAQ;AAAA,GACVZ,CAAA;"}
1	+ {"version":3,"file":"cg-kbd.js","sources":["../../../src/components/cg-kbd/cg-kbd.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBase } from '../../styles/index.js';\n\n/*\n @element cg-kbd\n * Keyboard shortcut display chip. Use for showing keyboard combinations like ⌘K.\n \n @example\n * ```html\n * <cg-kbd keys=\"⌘K\"></cg-kbd>\n * <cg-kbd keys=\"Shift,⌘,P\"></cg-kbd>\n * <cg-kbd>Esc</cg-kbd>\n * ```\n \n @slot - Key content (alternative to keys property)\n /\n@customElement('cg-kbd')\nexport class CgKbd extends LitElement {\n static override styles = [hostBase, css`\n :host {\n display: inline-flex;\n align-items: center;\n gap: var(--cg-spacing-4);\n }\n\n kbd {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background: var(--cg-color-surface-cards-background);\n border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n border-bottom-width: var(--cg-border-width-100);\n border-radius: var(--cg-component-kbd-radius);\n color: var(--cg-color-surface-cards-text);\n font-family: var(--cg-font-family-mono);\n font-weight: var(--cg-font-weight-medium);\n line-height: var(--cg-line-height-tight);\n box-shadow:\n inset 0 var(--cg-border-width-50) 0 var(--cg-overlay-accent-subtle),\n 0 var(--cg-border-width-50) 0 var(--cg-color-surface-cards-border);\n }\n\n / Sizes — driven entirely by Tier-3 tokens for system-wide consistency. */\n :host([size=\"sm\"]) kbd {\n min-width: var(--cg-component-kbd-min-width-sm);\n padding: var(--cg-component-kbd-padding-y-sm) var(--cg-component-kbd-padding-x-sm);\n font-size: var(--cg-component-kbd-font-size-sm);\n }\n :host([size=\"md\"]) kbd {\n min-width: var(--cg-component-kbd-min-width-md);\n padding: var(--cg-component-kbd-padding-y-md) var(--cg-component-kbd-padding-x-md);\n font-size: var(--cg-component-kbd-font-size-md);\n }\n :host([size=\"lg\"]) kbd {\n min-width: var(--cg-component-kbd-min-width-lg);\n padding: var(--cg-component-kbd-padding-y-lg) var(--cg-component-kbd-padding-x-lg);\n font-size: var(--cg-component-kbd-font-size-lg);\n }\n\n :host([variant=\"outline\"]) kbd {\n background: transparent;\n }\n\n .plus {\n color: var(--cg-color-surface-container-outlined);\n }\n :host([size=\"sm\"]) .plus { font-size: var(--cg-component-kbd-font-size-sm); }\n :host([size=\"md\"]) .plus { font-size: var(--cg-component-kbd-font-size-md); }\n :host([size=\"lg\"]) .plus { font-size: var(--cg-component-kbd-font-size-lg); }\n `];\n\n @property() keys: string = '';\n @property({ reflect: true }) size: 'sm' \| 'md' \| 'lg' = 'md';\n @property({ reflect: true }) variant: 'default' \| 'outline' = 'default';\n\n override render() {\n if (this.keys) {\n const keyArr = this.keys.split(',').map(k => k.trim()).filter(Boolean);\n return html`\n ${keyArr.map((key, i) => html`\n ${i > 0 ? html`<span class=\"plus\">+</span>` : nothing}\n <kbd>${key}</kbd>\n `)}\n `;\n }\n return html`<kbd><slot></slot></kbd>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'cg-kbd': CgKbd;\n }\n}\n"],"names":["CgKbd","LitElement","keyArr","k","html","key","i","nothing","hostBase","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAkBO,IAAMA,IAAN,cAAoBC,EAAW;AAAA,EAA/B,cAAA;AAAA,UAAA,GAAA,SAAA,GAsDO,KAAA,OAAe,IACE,KAAA,OAA2B,MAC3B,KAAA,UAAiC;AAAA,EAAA;AAAA,EAErD,SAAS;AAChB,QAAI,KAAK,MAAM;AACb,YAAMC,IAAS,KAAK,KAAK,MAAM,GAAG,EAAE,IAAI,CAAAC,MAAKA,EAAE,KAAA,CAAM,EAAE,OAAO,OAAO;AACrE,aAAOC;AAAA,UACHF,EAAO,IAAI,CAACG,GAAKC,MAAMF;AAAA,YACrBE,IAAI,IAAIF,iCAAoCG,CAAO;AAAA,iBAC9CF,CAAG;AAAA,SACX,CAAC;AAAA;AAAA,IAEN;AACA,WAAOD;AAAA,EACT;AACF;AAtEaJ,EACK,SAAS,CAACQ,GAAUC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAmDnC;AAEWC,EAAA;AAAA,EAAXC,EAAA;AAAS,GAtDCX,EAsDC,WAAA,QAAA,CAAA;AACiBU,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAvDhBX,EAuDkB,WAAA,QAAA,CAAA;AACAU,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAxDhBX,EAwDkB,WAAA,WAAA,CAAA;AAxDlBA,IAANU,EAAA;AAAA,EADNE,EAAc,QAAQ;AAAA,GACVZ,CAAA;"}

package/dist/components/cg-label/cg-label.d.ts CHANGED Viewed

@@ -6,7 +6,9 @@ import { LitElement } from 'lit';
  * - Required asterisk
  * - Hint text (description below label)
  * - Error text (replaces hint when in error state)
- * - htmlFor association
+ * - Click-to-focus delegation via `for` (label semantics cannot cross the
+ *   shadow boundary, so the target control must carry its own accessible
+ *   name via aria-label/aria-labelledby — cg-input already self-labels)
  */
 export declare class CgLabel extends LitElement {
     static styles: import('lit').CSSResult[];
@@ -16,6 +18,7 @@ export declare class CgLabel extends LitElement {
     htmlFor: string;
     required: boolean;
     disabled: boolean;
+    private _delegateClick;
     render(): import('lit').TemplateResult<1>;
 }
 declare global {

package/dist/components/cg-label/cg-label.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cg-label.d.ts","sourceRoot":"","sources":["../../../src/components/cg-label/cg-label.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD~~;;;;;;;;GAQG~~;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,~~4BAyCnB~~;IAES,IAAI,SAAM;IACV,IAAI,SAAM;IACV,KAAK,SAAM;IACS,OAAO,SAAM;IAChB,QAAQ,UAAS;IACF,QAAQ,UAAS;~~IAEpD~~,MAAM;CAchB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
1	+ {"version":3,"file":"cg-label.d.ts","sourceRoot":"","sources":["../../../src/components/cg-label/cg-label.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;;;;;;GAUG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,4BAuCnB;IAES,IAAI,SAAM;IACV,IAAI,SAAM;IACV,KAAK,SAAM;IACS,OAAO,SAAM;IAChB,QAAQ,UAAS;IACF,QAAQ,UAAS;IAE7D,OAAO,CAAC,cAAc;IAYb,MAAM;CAchB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/components/cg-label/cg-label.js CHANGED Viewed

@@ -1,30 +1,31 @@
-import { css as p, LitElement as u, nothing as h, html as a } from "lit";
-import { property as o, customElement as f } from "lit/decorators.js";
-import { h as d, r as v } from "../../chunks/premium.css-9I4kHrsl.js";
-var m = Object.defineProperty, b = Object.getOwnPropertyDescriptor, e = (g, i, n, s) => {
-  for (var r = s > 1 ? void 0 : s ? b(i, n) : i, l = g.length - 1, c; l >= 0; l--)
-    (c = g[l]) && (r = (s ? c(i, n, r) : c(r)) || r);
-  return s && r && m(i, n, r), r;
+import { css as p, LitElement as g, nothing as d, html as l } from "lit";
+import { property as i, customElement as f } from "lit/decorators.js";
+import { h as u, r as m } from "../../chunks/premium.css-DHekUEUt.js";
+var v = Object.defineProperty, b = Object.getOwnPropertyDescriptor, o = (a, t, n, s) => {
+  for (var r = s > 1 ? void 0 : s ? b(t, n) : t, c = a.length - 1, h; c >= 0; c--)
+    (h = a[c]) && (r = (s ? h(t, n, r) : h(r)) || r);
+  return s && r && v(t, n, r), r;
 };
-let t = class extends u {
+let e = class extends g {
   constructor() {
     super(...arguments), this.text = "", this.hint = "", this.error = "", this.htmlFor = "", this.required = !1, this.disabled = !1;
   }
+  _delegateClick() {
+    if (this.disabled || !this.htmlFor) return;
+    const t = this.getRootNode().getElementById(this.htmlFor);
+    t instanceof HTMLElement && (t.focus(), t instanceof HTMLInputElement && (t.type === "checkbox" || t.type === "radio") && t.click());
+  }
   render() {
-    return a`
-      <label for=${this.htmlFor || h}>
+    return l`
+      <label @click=${this._delegateClick}>
         ${this.text}<slot></slot>
-        ${this.required ? a`<span class="required" aria-hidden="true"> *</span>` : h}
+        ${this.required ? l`<span class="required" aria-hidden="true"> *</span>` : d}
       </label>
-      ${this.error ? a`<div class="error-text" role="alert">${this.error}</div>` : this.hint ? a`<div class="hint">${this.hint}</div>` : h}
+      ${this.error ? l`<div class="error-text" role="alert">${this.error}</div>` : this.hint ? l`<div class="hint">${this.hint}</div>` : d}
     `;
   }
 };
-t.styles = [d, v, p`
-    :host {
-      margin-bottom: var(--cg-spacing-6);
-    }
+e.styles = [u, m, p`
     label {
       font-size: var(--cg-font-size-sm);
       font-weight: var(--cg-font-weight-medium);
@@ -36,8 +37,12 @@ t.styles = [d, v, p`
       cursor: pointer;
     }
-    :host([disabled]) label {
+    :host([disabled]) label,
+    :host([disabled]) .hint {
       opacity: 0.5;
+    }
+    :host([disabled]) label {
       cursor: not-allowed;
     }
@@ -51,7 +56,6 @@ t.styles = [d, v, p`
       color: var(--cg-color-surface-container-outlined);
       margin-top: var(--cg-spacing-2);
       line-height: var(--cg-line-height-snug);
-      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
     }
     .error-text {
@@ -59,31 +63,30 @@ t.styles = [d, v, p`
       color: var(--cg-color-status-error-text-default);
       margin-top: var(--cg-spacing-2);
       line-height: var(--cg-line-height-snug);
-      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
     }
   `];
-e([
-  o()
-], t.prototype, "text", 2);
-e([
-  o()
-], t.prototype, "hint", 2);
-e([
-  o()
-], t.prototype, "error", 2);
-e([
-  o({ attribute: "for" })
-], t.prototype, "htmlFor", 2);
-e([
-  o({ type: Boolean })
-], t.prototype, "required", 2);
-e([
-  o({ type: Boolean, reflect: !0 })
-], t.prototype, "disabled", 2);
-t = e([
+o([
+  i()
+], e.prototype, "text", 2);
+o([
+  i()
+], e.prototype, "hint", 2);
+o([
+  i()
+], e.prototype, "error", 2);
+o([
+  i({ attribute: "for" })
+], e.prototype, "htmlFor", 2);
+o([
+  i({ type: Boolean })
+], e.prototype, "required", 2);
+o([
+  i({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled", 2);
+e = o([
   f("cg-label")
-], t);
+], e);
 export {
-  t as CgLabel
+  e as CgLabel
 };
 //# sourceMappingURL=cg-label.js.map

package/dist/components/cg-label/cg-label.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cg-label.js","sources":["../../../src/components/cg-label/cg-label.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/*\n <cg-label> — Form label with required indicator, hint, and error text.\n \n Better than OpenUI's Label:\n * - Required asterisk\n * - Hint text (description below label)\n * - Error text (replaces hint when in error state)\n * - ~~htmlFor~~ ~~association~~\n /\n@customElement('cg-label')\nexport class CgLabel extends LitElement {\n static override styles = [hostBlock, reducedMotion, css`\n ~~:host {\n margin-bottom: var(--cg-spacing-6);\n }\n\n~~ label {\n font-size: var(--cg-font-size-sm);\n font-weight: var(--cg-font-weight-medium);\n color: var(--cg-color-surface-base-text);\n cursor: default;\n }\n\n :host([for]) label {\n cursor: pointer;\n }\n\n :host([disabled]) label {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .required {\n color: var(--cg-color-status-error-text-default);\n font-weight: var(--cg-font-weight-bold);\n }\n\n .hint {\n font-size: var(--cg-font-size-xs);\n color: var(--cg-color-surface-container-outlined);\n margin-top: var(--cg-spacing-2);\n line-height: var(--cg-line-height-snug);\n ~~transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n~~ }\n\n .error-text {\n font-size: var(--cg-font-size-xs);\n color: var(--cg-color-status-error-text-default);\n margin-top: var(--cg-spacing-2);\n line-height: var(--cg-line-height-snug);\n ~~transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n~~ }\n `];\n\n @property() text = '';\n @property() hint = '';\n @property() error = '';\n @property({ attribute: 'for' }) htmlFor = '';\n @property({ type: Boolean }) required = false;\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n override render() {\n return html`\n <label ~~for~~=${this.~~htmlFor \|\| nothing~~}>\n ${this.text}<slot></slot>\n ${this.required ? html`<span class=\"required\" aria-hidden=\"true\"> </span>` : nothing}\n </label>\n ${this.error\n ? html`<div class=\"error-text\" role=\"alert\">${this.error}</div>`\n : this.hint\n ? html`<div class=\"hint\">${this.hint}</div>`\n : nothing\n }\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'cg-label': CgLabel;\n }\n}\n"],"names":["CgLabel","LitElement","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;~~AAcO~~,IAAMA,IAAN,cAAsBC,EAAW;AAAA,EAAjC,cAAA;AAAA,UAAA,GAAA,SAAA,~~GA4CO~~,KAAA,OAAO,IACP,KAAA,OAAO,IACP,KAAA,QAAQ,IACY,KAAA,UAAU,IACb,KAAA,WAAW,IACI,KAAA,WAAW;AAAA,EAAA;AAAA,~~EAE9C~~,SAAS;AAChB,WAAOC;AAAA,~~mBACQ~~,KAAK,~~WAAWC,CAAO~~;AAAA,~~UAChC~~,KAAK,IAAI;AAAA,UACT,KAAK,~~WAAWD~~,yDAA4DC,CAAO;AAAA;AAAA,QAErF,KAAK,QACHD,yCAA4C,KAAK,KAAK,WACtD,KAAK,OACHA,sBAAyB,KAAK,IAAI,WAClCC,CACN;AAAA;AAAA,EAEJ;AACF;~~AAjEaH~~,EACK,SAAS,~~CAACI~~,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~~,~~GAyCnD~~;AAEWC,EAAA;AAAA,EAAXC,EAAA;AAAS,~~GA5CCR~~,~~EA4CC~~,WAAA,QAAA,CAAA;~~AACAO~~,EAAA;AAAA,EAAXC,EAAA;AAAS,~~GA7CCR~~,~~EA6CC~~,WAAA,QAAA,CAAA;~~AACAO~~,EAAA;AAAA,EAAXC,EAAA;AAAS,~~GA9CCR~~,~~EA8CC~~,WAAA,SAAA,CAAA;~~AACoBO~~,EAAA;AAAA,EAA/BC,EAAS,EAAE,WAAW,MAAA,CAAO;AAAA,~~GA/CnBR~~,~~EA+CqB~~,WAAA,WAAA,CAAA;~~AACHO~~,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,~~GAhDhBR~~,~~EAgDkB~~,WAAA,YAAA,CAAA;~~AACeO~~,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,~~GAjD~~/BR,~~EAiDiC~~,WAAA,YAAA,CAAA;~~AAjDjCA~~,~~IAANO~~,EAAA;AAAA,EADNE,EAAc,UAAU;AAAA,~~GACZT~~,CAAA;"}
1	+ {"version":3,"file":"cg-label.js","sources":["../../../src/components/cg-label/cg-label.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/*\n <cg-label> — Form label with required indicator, hint, and error text.\n \n Better than OpenUI's Label:\n * - Required asterisk\n * - Hint text (description below label)\n * - Error text (replaces hint when in error state)\n * - Click-to-focus delegation via `for` (label semantics cannot cross the\n * shadow boundary, so the target control must carry its own accessible\n * name via aria-label/aria-labelledby — cg-input already self-labels)\n /\n@customElement('cg-label')\nexport class CgLabel extends LitElement {\n static override styles = [hostBlock, reducedMotion, css`\n label {\n font-size: var(--cg-font-size-sm);\n font-weight: var(--cg-font-weight-medium);\n color: var(--cg-color-surface-base-text);\n cursor: default;\n }\n\n :host([for]) label {\n cursor: pointer;\n }\n\n :host([disabled]) label,\n :host([disabled]) .hint {\n opacity: 0.5;\n }\n\n :host([disabled]) label {\n cursor: not-allowed;\n }\n\n .required {\n color: var(--cg-color-status-error-text-default);\n font-weight: var(--cg-font-weight-bold);\n }\n\n .hint {\n font-size: var(--cg-font-size-xs);\n color: var(--cg-color-surface-container-outlined);\n margin-top: var(--cg-spacing-2);\n line-height: var(--cg-line-height-snug);\n }\n\n .error-text {\n font-size: var(--cg-font-size-xs);\n color: var(--cg-color-status-error-text-default);\n margin-top: var(--cg-spacing-2);\n line-height: var(--cg-line-height-snug);\n }\n `];\n\n @property() text = '';\n @property() hint = '';\n @property() error = '';\n @property({ attribute: 'for' }) htmlFor = '';\n @property({ type: Boolean }) required = false;\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n private _delegateClick(): void {\n if (this.disabled \|\| !this.htmlFor) return;\n const root = this.getRootNode() as Document \| ShadowRoot;\n const target = root.getElementById(this.htmlFor);\n if (target instanceof HTMLElement) {\n target.focus();\n if (target instanceof HTMLInputElement && (target.type === 'checkbox' \|\| target.type === 'radio')) {\n target.click();\n }\n }\n }\n\n override render() {\n return html`\n <label @click=${this._delegateClick}>\n ${this.text}<slot></slot>\n ${this.required ? html`<span class=\"required\" aria-hidden=\"true\"> </span>` : nothing}\n </label>\n ${this.error\n ? html`<div class=\"error-text\" role=\"alert\">${this.error}</div>`\n : this.hint\n ? html`<div class=\"hint\">${this.hint}</div>`\n : nothing\n }\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'cg-label': CgLabel;\n }\n}\n"],"names":["CgLabel","LitElement","target","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAgBO,IAAMA,IAAN,cAAsBC,EAAW;AAAA,EAAjC,cAAA;AAAA,UAAA,GAAA,SAAA,GA0CO,KAAA,OAAO,IACP,KAAA,OAAO,IACP,KAAA,QAAQ,IACY,KAAA,UAAU,IACb,KAAA,WAAW,IACI,KAAA,WAAW;AAAA,EAAA;AAAA,EAE/C,iBAAuB;AAC7B,QAAI,KAAK,YAAY,CAAC,KAAK,QAAS;AAEpC,UAAMC,IADO,KAAK,YAAA,EACE,eAAe,KAAK,OAAO;AAC/C,IAAIA,aAAkB,gBACpBA,EAAO,MAAA,GACHA,aAAkB,qBAAqBA,EAAO,SAAS,cAAcA,EAAO,SAAS,YACvFA,EAAO,MAAA;AAAA,EAGb;AAAA,EAES,SAAS;AAChB,WAAOC;AAAA,sBACW,KAAK,cAAc;AAAA,UAC/B,KAAK,IAAI;AAAA,UACT,KAAK,WAAWA,yDAA4DC,CAAO;AAAA;AAAA,QAErF,KAAK,QACHD,yCAA4C,KAAK,KAAK,WACtD,KAAK,OACHA,sBAAyB,KAAK,IAAI,WAClCC,CACN;AAAA;AAAA,EAEJ;AACF;AA3EaJ,EACK,SAAS,CAACK,GAAWC,GAAeC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAuCnD;AAEWC,EAAA;AAAA,EAAXC,EAAA;AAAS,GA1CCT,EA0CC,WAAA,QAAA,CAAA;AACAQ,EAAA;AAAA,EAAXC,EAAA;AAAS,GA3CCT,EA2CC,WAAA,QAAA,CAAA;AACAQ,EAAA;AAAA,EAAXC,EAAA;AAAS,GA5CCT,EA4CC,WAAA,SAAA,CAAA;AACoBQ,EAAA;AAAA,EAA/BC,EAAS,EAAE,WAAW,MAAA,CAAO;AAAA,GA7CnBT,EA6CqB,WAAA,WAAA,CAAA;AACHQ,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GA9ChBT,EA8CkB,WAAA,YAAA,CAAA;AACeQ,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA/C/BT,EA+CiC,WAAA,YAAA,CAAA;AA/CjCA,IAANQ,EAAA;AAAA,EADNE,EAAc,UAAU;AAAA,GACZV,CAAA;"}

package/dist/components/cg-link/cg-link.js CHANGED Viewed

@@ -1,12 +1,12 @@
-import { css as f, LitElement as h, nothing as r, html as u } from "lit";
-import { property as o, customElement as v } from "lit/decorators.js";
-import { a as g, r as p } from "../../chunks/premium.css-9I4kHrsl.js";
-var x = Object.defineProperty, b = Object.getOwnPropertyDescriptor, a = (n, i, c, s) => {
-  for (var e = s > 1 ? void 0 : s ? b(i, c) : i, l = n.length - 1, d; l >= 0; l--)
+import { css as h, LitElement as v, nothing as a, html as u } from "lit";
+import { property as o, customElement as f } from "lit/decorators.js";
+import { a as g, r as p } from "../../chunks/premium.css-DHekUEUt.js";
+var b = Object.defineProperty, x = Object.getOwnPropertyDescriptor, r = (n, i, c, s) => {
+  for (var e = s > 1 ? void 0 : s ? x(i, c) : i, l = n.length - 1, d; l >= 0; l--)
     (d = n[l]) && (e = (s ? d(i, c, e) : d(e)) || e);
-  return s && e && x(i, c, e), e;
+  return s && e && b(i, c, e), e;
 };
-let t = class extends h {
+let t = class extends v {
   constructor() {
     super(...arguments), this.href = "", this.variant = "default", this.external = !1, this.disabled = !1, this.size = "md";
   }
@@ -20,10 +20,10 @@ let t = class extends h {
   render() {
     return u`
       <a
-        href=${this.href || r}
-        target=${this.external ? "_blank" : r}
-        rel=${this.external ? "noopener noreferrer" : r}
-        aria-disabled=${this.disabled ? "true" : r}
+        href=${this.href || a}
+        target=${this.external ? "_blank" : a}
+        rel=${this.external ? "noopener noreferrer" : a}
+        aria-disabled=${this.disabled ? "true" : a}
         tabindex=${this.disabled ? -1 : 0}
         @click=${this._onClick}
       >
@@ -36,12 +36,12 @@ let t = class extends h {
               <line x1="10" y1="14" x2="21" y2="3"/>
             </svg>
           </span>
-        ` : r}
+        ` : a}
       </a>
     `;
   }
 };
-t.styles = [g, p, f`
+t.styles = [g, p, h`
     a {
       display: inline-flex;
       align-items: center;
@@ -57,7 +57,7 @@ t.styles = [g, p, f`
     a::after {
       content: '';
       position: absolute;
-      bottom: -1px;
+      bottom: calc(-1 * var(--cg-border-width-50));
       left: 50%;
       width: 0;
       height: var(--cg-border-width-50);
@@ -74,8 +74,8 @@ t.styles = [g, p, f`
       outline: none;
       border-radius: var(--cg-border-radius-50);
       box-shadow:
-        0 0 0 2px var(--cg-color-surface-base-background),
-        0 0 0 4px var(--cg-color-focus-ring);
+        0 0 0 var(--cg-border-width-100) var(--cg-color-surface-base-background),
+        0 0 0 calc(var(--cg-border-width-100) * 2) var(--cg-color-focus-ring);
     }
     /* Sizes */
@@ -128,23 +128,23 @@ t.styles = [g, p, f`
       height: 100%;
     }
   `];
-a([
+r([
   o()
 ], t.prototype, "href", 2);
-a([
+r([
   o({ reflect: !0 })
 ], t.prototype, "variant", 2);
-a([
+r([
   o({ type: Boolean })
 ], t.prototype, "external", 2);
-a([
+r([
   o({ type: Boolean, reflect: !0 })
 ], t.prototype, "disabled", 2);
-a([
+r([
   o({ reflect: !0 })
 ], t.prototype, "size", 2);
-t = a([
-  v("cg-link")
+t = r([
+  f("cg-link")
 ], t);
 export {
   t as CgLink

package/dist/components/cg-link/cg-link.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cg-link.js","sources":["../../../src/components/cg-link/cg-link.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 <cg-link> — Styled anchor element with variants.\n \n Features:\n * - Hover underline animation (width grows from center)\n * - External link icon with target=_blank\n * - Color variants: default, accent, muted, underline\n * - Disabled state, size variants\n * - Focus-visible ring, proper ARIA\n /\n@customElement('cg-link')\nexport class CgLink extends LitElement {\n static override styles = [hostBase, reducedMotion, css`\n a {\n display: inline-flex;\n align-items: center;\n gap: var(--cg-spacing-4);\n text-decoration: none;\n position: relative;\n cursor: pointer;\n font-weight: var(--cg-font-weight-medium);\n transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n }\n\n / Underline animation — grows from center /\n a::after {\n content: '';\n position: absolute;\n bottom: -~~1px~~;\n left: 50%;\n width: 0;\n height: var(--cg-border-width-50);\n background: currentColor;\n transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default), left var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n }\n a:hover::after {\n left: 0;\n width: 100%;\n }\n\n / Focus ring — dual layer /\n a:focus-visible {\n outline: none;\n border-radius: var(--cg-border-radius-50);\n box-shadow:\n 0 0 0 ~~2px~~ var(--cg-color-surface-base-background),\n 0 0 0 ~~4px~~ var(--cg-color-focus-ring);\n }\n\n / Sizes /\n :host([size=\"sm\"]) a { font-size: var(--cg-font-size-xs); }\n :host([size=\"md\"]) a { font-size: var(--cg-font-size-sm); }\n :host([size=\"lg\"]) a { font-size: var(--cg-font-size-base); }\n\n / Variant: default /\n :host([variant=\"default\"]) a { color: var(--cg-color-surface-base-text); }\n :host([variant=\"default\"]) a:hover { color: var(--cg-color-surface-base-text); }\n\n / Variant: accent — uses the brand accent color /\n :host([variant=\"accent\"]) a { color: var(--cg-color-accent-text); }\n :host([variant=\"accent\"]) a:hover { color: var(--cg-color-accent-text); }\n :host([variant=\"accent\"]) a::after { background: var(--cg-color-accent-text); }\n\n / Variant: muted /\n :host([variant=\"muted\"]) a { color: var(--cg-color-input-text-placeholder); }\n :host([variant=\"muted\"]) a:hover { color: var(--cg-color-surface-base-text); }\n\n / Variant: underline — always show underline /\n :host([variant=\"underline\"]) a { color: var(--cg-color-surface-base-text); text-decoration: underline; text-underline-offset: var(--cg-spacing-2); text-decoration-skip-ink: auto; }\n :host([variant=\"underline\"]) a::after { display: none; }\n :host([variant=\"underline\"]) a:hover { color: var(--cg-color-surface-base-text); }\n\n / Active press feedback /\n a:active {\n opacity: 0.8;\n transform: scale(var(--cg-interaction-press-scale));\n transition: transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default), opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n }\n\n / Disabled /\n :host([disabled]) a {\n opacity: 0.5;\n pointer-events: none;\n cursor: not-allowed;\n }\n :host([disabled]) a::after { display: none; }\n\n / External icon */\n .external-icon {\n display: inline-flex;\n flex-shrink: 0;\n width: 0.85em;\n height: 0.85em;\n }\n .external-icon svg {\n width: 100%;\n height: 100%;\n }\n `];\n\n @property() href = '';\n @property({ reflect: true }) variant: 'default' \| 'accent' \| 'muted' \| 'underline' = 'default';\n @property({ type: Boolean }) external = false;\n @property({ type: Boolean, reflect: true }) disabled = false;\n @property({ reflect: true }) size: 'sm' \| 'md' \| 'lg' = 'md';\n\n private _onClick(e: MouseEvent) {\n if (this.disabled) {\n e.preventDefault();\n return;\n }\n this.dispatchEvent(new CustomEvent('cg-link-click', { bubbles: true, composed: true }));\n }\n\n override render() {\n return html`\n <a\n href=${this.href \|\| nothing}\n target=${this.external ? '_blank' : nothing}\n rel=${this.external ? 'noopener noreferrer' : nothing}\n aria-disabled=${this.disabled ? 'true' : nothing}\n tabindex=${this.disabled ? -1 : 0}\n @click=${this._onClick}\n >\n <slot></slot>\n ${this.external ? html`\n <span class=\"external-icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6\"/>\n <polyline points=\"15 3 21 3 21 9\"/>\n <line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"/>\n </svg>\n </span>\n ` : nothing}\n </a>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'cg-link': CgLink;\n }\n}\n"],"names":["CgLink","LitElement","e","html","nothing","hostBase","reducedMotion","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAeO,IAAMA,IAAN,cAAqBC,EAAW;AAAA,EAAhC,cAAA;AAAA,UAAA,GAAA,SAAA,GAyFO,KAAA,OAAO,IACU,KAAA,UAAwD,WACxD,KAAA,WAAW,IACI,KAAA,WAAW,IAC1B,KAAA,OAA2B;AAAA,EAAA;AAAA,EAEhD,SAASC,GAAe;AAC9B,QAAI,KAAK,UAAU;AACjB,MAAAA,EAAE,eAAA;AACF;AAAA,IACF;AACA,SAAK,cAAc,IAAI,YAAY,iBAAiB,EAAE,SAAS,IAAM,UAAU,GAAA,CAAM,CAAC;AAAA,EACxF;AAAA,EAES,SAAS;AAChB,WAAOC;AAAA;AAAA,eAEI,KAAK,QAAQC,CAAO;AAAA,iBAClB,KAAK,WAAW,WAAWA,CAAO;AAAA,cACrC,KAAK,WAAW,wBAAwBA,CAAO;AAAA,wBACrC,KAAK,WAAW,SAASA,CAAO;AAAA,mBACrC,KAAK,WAAW,KAAK,CAAC;AAAA,iBACxB,KAAK,QAAQ;AAAA;AAAA;AAAA,UAGpB,KAAK,WAAWD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQdC,CAAO;AAAA;AAAA;AAAA,EAGjB;AACF;AA9HaJ,EACK,SAAS,CAACK,GAAUC,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,GAsFlD;AAEWC,EAAA;AAAA,EAAXC,EAAA;AAAS,GAzFCT,EAyFC,WAAA,QAAA,CAAA;AACiBQ,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GA1FhBT,EA0FkB,WAAA,WAAA,CAAA;AACAQ,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GA3FhBT,EA2FkB,WAAA,YAAA,CAAA;AACeQ,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA5F/BT,EA4FiC,WAAA,YAAA,CAAA;AACfQ,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GA7FhBT,EA6FkB,WAAA,QAAA,CAAA;AA7FlBA,IAANQ,EAAA;AAAA,EADNE,EAAc,SAAS;AAAA,GACXV,CAAA;"}
1	+ {"version":3,"file":"cg-link.js","sources":["../../../src/components/cg-link/cg-link.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 <cg-link> — Styled anchor element with variants.\n \n Features:\n * - Hover underline animation (width grows from center)\n * - External link icon with target=_blank\n * - Color variants: default, accent, muted, underline\n * - Disabled state, size variants\n * - Focus-visible ring, proper ARIA\n /\n@customElement('cg-link')\nexport class CgLink extends LitElement {\n static override styles = [hostBase, reducedMotion, css`\n a {\n display: inline-flex;\n align-items: center;\n gap: var(--cg-spacing-4);\n text-decoration: none;\n position: relative;\n cursor: pointer;\n font-weight: var(--cg-font-weight-medium);\n transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n }\n\n / Underline animation — grows from center /\n a::after {\n content: '';\n position: absolute;\n bottom: calc(-1 var(--cg-border-width-50));\n left: 50%;\n width: 0;\n height: var(--cg-border-width-50);\n background: currentColor;\n transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default), left var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n }\n a:hover::after {\n left: 0;\n width: 100%;\n }\n\n /* Focus ring — dual layer /\n a:focus-visible {\n outline: none;\n border-radius: var(--cg-border-radius-50);\n box-shadow:\n 0 0 0 var(--cg-border-width-100) var(--cg-color-surface-base-background),\n 0 0 0 calc(var(--cg-border-width-100) 2) var(--cg-color-focus-ring);\n }\n\n /* Sizes /\n :host([size=\"sm\"]) a { font-size: var(--cg-font-size-xs); }\n :host([size=\"md\"]) a { font-size: var(--cg-font-size-sm); }\n :host([size=\"lg\"]) a { font-size: var(--cg-font-size-base); }\n\n / Variant: default /\n :host([variant=\"default\"]) a { color: var(--cg-color-surface-base-text); }\n :host([variant=\"default\"]) a:hover { color: var(--cg-color-surface-base-text); }\n\n / Variant: accent — uses the brand accent color /\n :host([variant=\"accent\"]) a { color: var(--cg-color-accent-text); }\n :host([variant=\"accent\"]) a:hover { color: var(--cg-color-accent-text); }\n :host([variant=\"accent\"]) a::after { background: var(--cg-color-accent-text); }\n\n / Variant: muted /\n :host([variant=\"muted\"]) a { color: var(--cg-color-input-text-placeholder); }\n :host([variant=\"muted\"]) a:hover { color: var(--cg-color-surface-base-text); }\n\n / Variant: underline — always show underline /\n :host([variant=\"underline\"]) a { color: var(--cg-color-surface-base-text); text-decoration: underline; text-underline-offset: var(--cg-spacing-2); text-decoration-skip-ink: auto; }\n :host([variant=\"underline\"]) a::after { display: none; }\n :host([variant=\"underline\"]) a:hover { color: var(--cg-color-surface-base-text); }\n\n / Active press feedback /\n a:active {\n opacity: 0.8;\n transform: scale(var(--cg-interaction-press-scale));\n transition: transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default), opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n }\n\n / Disabled /\n :host([disabled]) a {\n opacity: 0.5;\n pointer-events: none;\n cursor: not-allowed;\n }\n :host([disabled]) a::after { display: none; }\n\n / External icon */\n .external-icon {\n display: inline-flex;\n flex-shrink: 0;\n width: 0.85em;\n height: 0.85em;\n }\n .external-icon svg {\n width: 100%;\n height: 100%;\n }\n `];\n\n @property() href = '';\n @property({ reflect: true }) variant: 'default' \| 'accent' \| 'muted' \| 'underline' = 'default';\n @property({ type: Boolean }) external = false;\n @property({ type: Boolean, reflect: true }) disabled = false;\n @property({ reflect: true }) size: 'sm' \| 'md' \| 'lg' = 'md';\n\n private _onClick(e: MouseEvent) {\n if (this.disabled) {\n e.preventDefault();\n return;\n }\n this.dispatchEvent(new CustomEvent('cg-link-click', { bubbles: true, composed: true }));\n }\n\n override render() {\n return html`\n <a\n href=${this.href \|\| nothing}\n target=${this.external ? '_blank' : nothing}\n rel=${this.external ? 'noopener noreferrer' : nothing}\n aria-disabled=${this.disabled ? 'true' : nothing}\n tabindex=${this.disabled ? -1 : 0}\n @click=${this._onClick}\n >\n <slot></slot>\n ${this.external ? html`\n <span class=\"external-icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6\"/>\n <polyline points=\"15 3 21 3 21 9\"/>\n <line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"/>\n </svg>\n </span>\n ` : nothing}\n </a>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'cg-link': CgLink;\n }\n}\n"],"names":["CgLink","LitElement","e","html","nothing","hostBase","reducedMotion","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAeO,IAAMA,IAAN,cAAqBC,EAAW;AAAA,EAAhC,cAAA;AAAA,UAAA,GAAA,SAAA,GAyFO,KAAA,OAAO,IACU,KAAA,UAAwD,WACxD,KAAA,WAAW,IACI,KAAA,WAAW,IAC1B,KAAA,OAA2B;AAAA,EAAA;AAAA,EAEhD,SAASC,GAAe;AAC9B,QAAI,KAAK,UAAU;AACjB,MAAAA,EAAE,eAAA;AACF;AAAA,IACF;AACA,SAAK,cAAc,IAAI,YAAY,iBAAiB,EAAE,SAAS,IAAM,UAAU,GAAA,CAAM,CAAC;AAAA,EACxF;AAAA,EAES,SAAS;AAChB,WAAOC;AAAA;AAAA,eAEI,KAAK,QAAQC,CAAO;AAAA,iBAClB,KAAK,WAAW,WAAWA,CAAO;AAAA,cACrC,KAAK,WAAW,wBAAwBA,CAAO;AAAA,wBACrC,KAAK,WAAW,SAASA,CAAO;AAAA,mBACrC,KAAK,WAAW,KAAK,CAAC;AAAA,iBACxB,KAAK,QAAQ;AAAA;AAAA;AAAA,UAGpB,KAAK,WAAWD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQdC,CAAO;AAAA;AAAA;AAAA,EAGjB;AACF;AA9HaJ,EACK,SAAS,CAACK,GAAUC,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,GAsFlD;AAEWC,EAAA;AAAA,EAAXC,EAAA;AAAS,GAzFCT,EAyFC,WAAA,QAAA,CAAA;AACiBQ,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GA1FhBT,EA0FkB,WAAA,WAAA,CAAA;AACAQ,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GA3FhBT,EA2FkB,WAAA,YAAA,CAAA;AACeQ,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA5F/BT,EA4FiC,WAAA,YAAA,CAAA;AACfQ,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GA7FhBT,EA6FkB,WAAA,QAAA,CAAA;AA7FlBA,IAANQ,EAAA;AAAA,EADNE,EAAc,SAAS;AAAA,GACXV,CAAA;"}