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-avatar/cg-avatar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cg-avatar.js","sources":["../../../src/components/cg-avatar/cg-avatar.ts"],"sourcesContent":["import { LitElement, html, css, nothing, svg } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBase, reducedMotion } from '../../styles/index.js';\n\n/*\n @element cg-avatar\n * Image with initials fallback and optional status indicator.\n \n @example\n * ```html\n * <cg-avatar src=\"/u.jpg\" name=\"Ada Lovelace\" size=\"md\" status=\"online\"></cg-avatar>\n * <cg-avatar name=\"Grace Hopper\" size=\"lg\" shape=\"square\"></cg-avatar>\n * ```\n \n @slot fallback - Override fallback content\n /\n@customElement('cg-avatar')\nexport class CgAvatar extends LitElement {\n static override styles = [hostBase, reducedMotion, css`\n :host {\n display: inline-block;\n position: relative;\n flex-shrink: 0;\n }\n\n .avatar {\n position: relative;\n width: 100%;\n height: 100%;\n aspect-ratio: 1 / 1;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--cg-color-action-secondary-background-default);\n color: var(--cg-color-~~surface~~-~~container~~-text);\n overflow: hidden;\n border-radius: var(--cg-border-radius-full);\n font-weight: var(--cg-font-weight-semibold);\n text-transform: uppercase;\n line-height: 1;\n user-select: none;\n }\n\n :host([shape=\"square\"]) .avatar {\n border-radius: var(--cg-border-radius-150);\n }\n\n .avatar img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n }\n\n .fallback-icon {\n width: 60%;\n height: 60%;\n color: var(--cg-color-surface-container-outlined);\n }\n\n / ── Sizes ── /\n :host([size=\"xs\"]) { width: var(--cg-component-avatar-size-xs); height: var(--cg-component-avatar-size-xs); }\n :host([size=\"xs\"]) .avatar { font-size: var(--cg-font-size-xs); }\n\n :host([size=\"sm\"]) { width: var(--cg-component-avatar-size-sm); height: var(--cg-component-avatar-size-sm); }\n :host([size=\"sm\"]) .avatar { font-size: var(--cg-font-size-xs); }\n\n :host([size=\"md\"]) { width: var(--cg-component-avatar-size-md); height: var(--cg-component-avatar-size-md); }\n :host([size=\"md\"]) .avatar { font-size: var(--cg-font-size-sm); }\n\n :host([size=\"lg\"]) { width: var(--cg-component-avatar-size-lg); height: var(--cg-component-avatar-size-lg); }\n :host([size=\"lg\"]) .avatar { font-size: var(--cg-font-size-base); }\n\n :host([size=\"xl\"]) { width: var(--cg-component-avatar-size-xl); height: var(--cg-component-avatar-size-xl); }\n :host([size=\"xl\"]) .avatar { font-size: var(--cg-font-size-lg); }\n\n / ── Status dot ── /\n .status {\n position: absolute;\n bottom: 0;\n right: 0;\n width: var(--cg-component-avatar-status-dot-size);\n height: var(--cg-component-avatar-status-dot-size);\n border-radius: var(--cg-border-radius-full);\n border: var(--cg-border-width-100) solid var(--cg-color-surface-base-background);\n box-sizing: border-box;\n }\n :host([size=\"xs\"]) .status,\n :host([size=\"sm\"]) .status {\n width: var(--cg-spacing-8);\n height: var(--cg-spacing-8);\n }\n\n .status.online { background: var(--cg-color-status-success-text-default); }\n .status.offline {\n background: var(--cg-color-surface-base-background);\n border-color: var(--cg-color-surface-container-outlined);\n }\n .status.away { background: var(--cg-color-status-warning-text-default); }\n .status.busy { background: var(--cg-color-status-error-text-default); }\n\n / ── Type ring (AI-app variant) ── */\n :host([type=\"agent\"]) .avatar {\n box-shadow: 0 0 0 var(--cg-border-width-100) var(--cg-color-accent-text);\n }\n :host([type=\"user\"]) .avatar {\n box-shadow: 0 0 0 var(--cg-border-width-100) var(--cg-color-status-info-text-default);\n }\n :host([type=\"system\"]) .avatar {\n box-shadow: 0 0 0 var(--cg-border-width-100) var(--cg-color-surface-container-outlined);\n }\n `];\n\n @property() src = '';\n @property() alt = '';\n @property() name = '';\n @property({ reflect: true }) size: 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' = 'md';\n @property({ reflect: true }) shape: 'circle' \| 'square' = 'circle';\n @property({ reflect: true }) status: 'online' \| 'offline' \| 'away' \| 'busy' \| null = null;\n @property({ reflect: true }) type: 'user' \| 'agent' \| 'system' \| null = null;\n @property({ attribute: 'fallback-icon' }) fallbackIcon = '';\n\n @state() private _imgFailed = false;\n\n private _getInitials(name: string): string {\n if (!name) return '';\n return name\n .trim()\n .split(/\\s+/)\n .slice(0, 2)\n .map(p => p[0] \|\| '')\n .join('')\n .toUpperCase();\n }\n\n private _onError() {\n this._imgFailed = true;\n }\n\n private _onLoad() {\n this._imgFailed = false;\n }\n\n override render() {\n const initials = this._getInitials(this.name);\n const hasImage = this.src && !this._imgFailed;\n const label = this.alt \|\| this.name \|\| 'Avatar';\n\n const userIcon = svg`\n <svg class=\"fallback-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"></path>\n <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\n </svg>\n `;\n\n return html`\n <div class=\"avatar\" role=\"img\" aria-label=${label}>\n ${hasImage ? html`\n <img\n src=${this.src}\n alt=${this.alt \|\| this.name \|\| ''}\n @error=${this._onError}\n @load=${this._onLoad}\n />\n ` : initials ? html`<span class=\"initials\">${initials}</span>`\n : html`<slot name=\"fallback\">${userIcon}</slot>`}\n </div>\n ${this.status ? html`<span class=\"status ${this.status}\" aria-hidden=\"true\"></span>` : nothing}\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'cg-avatar': CgAvatar;\n }\n}\n"],"names":["CgAvatar","LitElement","name","p","initials","hasImage","label","userIcon","svg","html","nothing","hostBase","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":";;;;;;;;AAiBO,IAAMA,IAAN,cAAuBC,EAAW;AAAA,EAAlC,cAAA;AAAA,UAAA,GAAA,SAAA,GAgGO,KAAA,MAAM,IACN,KAAA,MAAM,IACN,KAAA,OAAO,IACU,KAAA,OAAyC,MACzC,KAAA,QAA6B,UAC7B,KAAA,SAAwD,MACxD,KAAA,OAA2C,MAC9B,KAAA,eAAe,IAEhD,KAAQ,aAAa;AAAA,EAAA;AAAA,EAEtB,aAAaC,GAAsB;AACzC,WAAKA,IACEA,EACJ,OACA,MAAM,KAAK,EACX,MAAM,GAAG,CAAC,EACV,IAAI,CAAAC,MAAKA,EAAE,CAAC,KAAK,EAAE,EACnB,KAAK,EAAE,EACP,YAAA,IAPe;AAAA,EAQpB;AAAA,EAEQ,WAAW;AACjB,SAAK,aAAa;AAAA,EACpB;AAAA,EAEQ,UAAU;AAChB,SAAK,aAAa;AAAA,EACpB;AAAA,EAES,SAAS;AAChB,UAAMC,IAAW,KAAK,aAAa,KAAK,IAAI,GACtCC,IAAW,KAAK,OAAO,CAAC,KAAK,~~YAC7BC~~,IAAQ,KAAK,OAAO,KAAK,QAAQ,~~UAEjCC~~,IAAWC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOjB,WAAOC;AAAA,kDACuCH,CAAK;AAAA,~~UAC7CD~~,~~IAAWI~~;AAAA;AAAA,kBAEH,KAAK,GAAG;AAAA,kBACR,KAAK,OAAO,KAAK,QAAQ,EAAE;AAAA,qBACxB,KAAK,QAAQ;AAAA,oBACd,KAAK,OAAO;AAAA;AAAA,~~YAEpBL~~,~~IAAWK~~,~~2BAA8BL~~,CAAQ,~~YACjDK~~,0BAA6BF,CAAQ,SAAS;AAAA;AAAA,QAElD,KAAK,SAASE,wBAA2B,KAAK,MAAM,iCAAiCC,CAAO;AAAA;AAAA,EAElG;AACF;~~AAzJaV~~,EACK,SAAS,~~CAACW~~,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA6FlD;AAEWC,EAAA;AAAA,EAAXC,EAAA;AAAS,~~GAhGCf~~,EAgGC,WAAA,OAAA,CAAA;~~AACAc~~,EAAA;AAAA,EAAXC,EAAA;AAAS,~~GAjGCf~~,EAiGC,WAAA,OAAA,CAAA;~~AACAc~~,EAAA;AAAA,EAAXC,EAAA;AAAS,~~GAlGCf~~,EAkGC,WAAA,QAAA,CAAA;~~AACiBc~~,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,~~GAnGhBf~~,EAmGkB,WAAA,QAAA,CAAA;~~AACAc~~,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,~~GApGhBf~~,EAoGkB,WAAA,SAAA,CAAA;~~AACAc~~,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,~~GArGhBf~~,EAqGkB,WAAA,UAAA,CAAA;~~AACAc~~,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,~~GAtGhBf~~,EAsGkB,WAAA,QAAA,CAAA;~~AACac~~,EAAA;AAAA,EAAzCC,EAAS,EAAE,WAAW,gBAAA,CAAiB;AAAA,~~GAvG7Bf~~,EAuG+B,WAAA,gBAAA,CAAA;~~AAEzBc~~,EAAA;AAAA,EAAhBE,EAAA;AAAM,~~GAzGIhB~~,EAyGM,WAAA,cAAA,CAAA;AAzGNA,~~IAANc~~,EAAA;AAAA,EADNG,EAAc,WAAW;AAAA,~~GACbjB~~,CAAA;"}
1	+ {"version":3,"file":"cg-avatar.js","sources":["../../../src/components/cg-avatar/cg-avatar.ts"],"sourcesContent":["import { LitElement, html, css, nothing, svg } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBase, reducedMotion } from '../../styles/index.js';\n\n/*\n @element cg-avatar\n * Image with initials fallback and optional status indicator.\n \n @example\n * ```html\n * <cg-avatar src=\"/u.jpg\" name=\"Ada Lovelace\" size=\"md\" status=\"online\"></cg-avatar>\n * <cg-avatar name=\"Grace Hopper\" size=\"lg\" shape=\"square\"></cg-avatar>\n * ```\n \n @slot fallback - Override fallback content\n /\n@customElement('cg-avatar')\nexport class CgAvatar extends LitElement {\n static override styles = [hostBase, reducedMotion, css`\n :host {\n display: inline-block;\n position: relative;\n flex-shrink: 0;\n }\n\n .avatar {\n position: relative;\n width: 100%;\n height: 100%;\n aspect-ratio: 1 / 1;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--cg-color-action-secondary-background-default);\n color: var(--cg-color-action-secondary-text-default);\n overflow: hidden;\n border-radius: var(--cg-border-radius-full);\n font-weight: var(--cg-font-weight-semibold);\n text-transform: uppercase;\n line-height: 1;\n user-select: none;\n }\n\n :host([shape=\"square\"]) .avatar {\n border-radius: var(--cg-border-radius-150);\n }\n\n .avatar img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n }\n\n .fallback-icon {\n width: 60%;\n height: 60%;\n color: var(--cg-color-surface-container-outlined);\n }\n\n / ── Sizes ── /\n :host([size=\"xs\"]) { width: var(--cg-component-avatar-size-xs); height: var(--cg-component-avatar-size-xs); }\n :host([size=\"xs\"]) .avatar { font-size: var(--cg-font-size-xs); }\n\n :host([size=\"sm\"]) { width: var(--cg-component-avatar-size-sm); height: var(--cg-component-avatar-size-sm); }\n :host([size=\"sm\"]) .avatar { font-size: var(--cg-font-size-xs); }\n\n :host([size=\"md\"]) { width: var(--cg-component-avatar-size-md); height: var(--cg-component-avatar-size-md); }\n :host([size=\"md\"]) .avatar { font-size: var(--cg-font-size-sm); }\n\n :host([size=\"lg\"]) { width: var(--cg-component-avatar-size-lg); height: var(--cg-component-avatar-size-lg); }\n :host([size=\"lg\"]) .avatar { font-size: var(--cg-font-size-base); }\n\n :host([size=\"xl\"]) { width: var(--cg-component-avatar-size-xl); height: var(--cg-component-avatar-size-xl); }\n :host([size=\"xl\"]) .avatar { font-size: var(--cg-font-size-lg); }\n\n / ── Status dot ── /\n .status {\n position: absolute;\n bottom: 0;\n right: 0;\n width: var(--cg-component-avatar-status-dot-size);\n height: var(--cg-component-avatar-status-dot-size);\n border-radius: var(--cg-border-radius-full);\n border: var(--cg-border-width-100) solid var(--cg-color-surface-base-background);\n box-sizing: border-box;\n }\n :host([size=\"xs\"]) .status,\n :host([size=\"sm\"]) .status {\n width: var(--cg-spacing-8);\n height: var(--cg-spacing-8);\n }\n\n .status.online { background: var(--cg-color-status-success-text-default); }\n .status.offline {\n background: var(--cg-color-surface-base-background);\n border-color: var(--cg-color-surface-container-outlined);\n }\n .status.away { background: var(--cg-color-status-warning-text-default); }\n .status.busy { background: var(--cg-color-status-error-text-default); }\n\n / ── Type ring (AI-app variant) ── */\n :host([type=\"agent\"]) .avatar {\n box-shadow: 0 0 0 var(--cg-border-width-100) var(--cg-color-accent-text);\n }\n :host([type=\"user\"]) .avatar {\n box-shadow: 0 0 0 var(--cg-border-width-100) var(--cg-color-status-info-text-default);\n }\n :host([type=\"system\"]) .avatar {\n box-shadow: 0 0 0 var(--cg-border-width-100) var(--cg-color-surface-container-outlined);\n }\n `];\n\n @property() src = '';\n @property() alt = '';\n @property() name = '';\n @property({ reflect: true }) size: 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' = 'md';\n @property({ reflect: true }) shape: 'circle' \| 'square' = 'circle';\n @property({ reflect: true }) status: 'online' \| 'offline' \| 'away' \| 'busy' \| null = null;\n @property({ reflect: true }) type: 'user' \| 'agent' \| 'system' \| null = null;\n @property({ attribute: 'fallback-icon' }) fallbackIcon = '';\n\n @state() private _imgFailed = false;\n\n private _getInitials(name: string): string {\n if (!name) return '';\n return name\n .trim()\n .split(/\\s+/)\n .slice(0, 2)\n .map(p => p[0] \|\| '')\n .join('')\n .toUpperCase();\n }\n\n private _onError() {\n this._imgFailed = true;\n }\n\n private _onLoad() {\n this._imgFailed = false;\n }\n\n override render() {\n const initials = this._getInitials(this.name);\n const hasImage = this.src && !this._imgFailed;\n // Fold type (role) and status (presence) into the accessible name — both\n // are otherwise conveyed by color alone (ring / dot), invisible to AT.\n const typePrefix = this.type ? `${this.type} ` : '';\n const statusSuffix = this.status ? `, ${this.status}` : '';\n const label = `${typePrefix}${this.alt \|\| this.name \|\| 'Avatar'}${statusSuffix}`;\n\n const userIcon = svg`\n <svg class=\"fallback-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"></path>\n <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\n </svg>\n `;\n\n return html`\n <div class=\"avatar\" role=\"img\" aria-label=${label}>\n ${hasImage ? html`\n <img\n src=${this.src}\n alt=${this.alt \|\| this.name \|\| ''}\n @error=${this._onError}\n @load=${this._onLoad}\n />\n ` : initials ? html`<span class=\"initials\">${initials}</span>`\n : html`<slot name=\"fallback\">${userIcon}</slot>`}\n </div>\n ${this.status ? html`<span class=\"status ${this.status}\" aria-hidden=\"true\"></span>` : nothing}\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'cg-avatar': CgAvatar;\n }\n}\n"],"names":["CgAvatar","LitElement","name","p","initials","hasImage","typePrefix","statusSuffix","label","userIcon","svg","html","nothing","hostBase","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"cg-avatar-group.d.ts","sourceRoot":"","sources":["../../../src/components/cg-avatar-group/cg-avatar-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,MAAM,WAAW,UAAU;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;CACjD;AAED;;;;;;;;;;GAUG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,~~4BA+HnB~~;IAEwB,OAAO,EAAE,UAAU,EAAE,CAAM;IAC1B,UAAU,SAAK;IACd,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IACjB,QAAQ,UAAS;IAE7D,qDAAqD;IAC5C,OAAO,CAAC,aAAa,CAAqB;IAEnD,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,aAAa;IACrB,OAAO,CAAC,aAAa;IAErB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,gBAAgB;IAIf,MAAM;CAqChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}
1	+ {"version":3,"file":"cg-avatar-group.d.ts","sourceRoot":"","sources":["../../../src/components/cg-avatar-group/cg-avatar-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,MAAM,WAAW,UAAU;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;CACjD;AAED;;;;;;;;;;GAUG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BAqInB;IAEwB,OAAO,EAAE,UAAU,EAAE,CAAM;IAC1B,UAAU,SAAK;IACd,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IACjB,QAAQ,UAAS;IAE7D,qDAAqD;IAC5C,OAAO,CAAC,aAAa,CAAqB;IAEnD,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,aAAa;IACrB,OAAO,CAAC,aAAa;IAErB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,gBAAgB;IAIf,MAAM;CAqChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

package/dist/components/cg-avatar-group/cg-avatar-group.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { css as d, LitElement as u, nothing as v, html as i } from "lit";
 import { property as c, state as f, customElement as h } from "lit/decorators.js";
-import { a as p, r as m } from "../../chunks/premium.css-9I4kHrsl.js";
-var b = Object.defineProperty, w = Object.getOwnPropertyDescriptor, n = (e, r, a, s) => {
-  for (var t = s > 1 ? void 0 : s ? w(r, a) : r, l = e.length - 1, g; l >= 0; l--)
+import { a as p, r as m } from "../../chunks/premium.css-DHekUEUt.js";
+var b = Object.defineProperty, z = Object.getOwnPropertyDescriptor, n = (e, r, a, s) => {
+  for (var t = s > 1 ? void 0 : s ? z(r, a) : r, l = e.length - 1, g; l >= 0; l--)
     (g = e[l]) && (t = (s ? g(r, a, t) : g(t)) || t);
   return s && t && b(r, a, t), t;
 };
@@ -38,7 +38,7 @@ let o = class extends u {
           <div class="avatar"
             role="button"
             tabindex="0"
-            aria-label=${a.name}
+            aria-label=${a.status ? `${a.name}, ${a.status}` : a.name}
             style="z-index:${e.length - s}; --avatar-index: ${s}"
             @click=${this._onAvatarClick}
             @keydown=${(t) => {
@@ -51,7 +51,7 @@ let o = class extends u {
                 <span class="initials">${this._getInitials(a.name)}</span>
               `}
             </div>
-            ${a.status ? i`<span class="status ${a.status}"></span>` : v}
+            ${a.status ? i`<span class="status ${a.status}" aria-hidden="true"></span>` : v}
           </div>
         `)}
         ${r > 0 ? i`
@@ -84,7 +84,7 @@ o.styles = [p, m, d`
       cursor: pointer;
       transition: transform var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out), margin var(--cg-transition-duration-slow) var(--cg-transition-easing-default);
       animation: avatarIn var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out) both;
-      animation-delay: calc(var(--avatar-index, 0) * 50ms);
+      animation-delay: calc(var(--avatar-index, 0) * var(--cg-transition-duration-fast) / 2);
     }
     .avatar-inner {
@@ -102,9 +102,15 @@ o.styles = [p, m, d`
       to { opacity: 1; transform: scale(1); }
     }
-    :host([expanded]) .avatar,
-    :host([expanded]) .overflow { margin-left: var(--cg-spacing-4) !important; }
-    :host([expanded]) .avatar:first-child { margin-left: 0 !important; }
+    /* Expanded spread. Per-size selectors (2 attrs + class) out-specify the
+       base :host([size]) overlap rules, so no !important is needed. The
+       :not(:first-child) excludes the leading avatar naturally. */
+    :host([expanded][size="sm"]) .avatar:not(:first-child),
+    :host([expanded][size="sm"]) .overflow { margin-left: var(--cg-spacing-4); }
+    :host([expanded][size="md"]) .avatar:not(:first-child),
+    :host([expanded][size="md"]) .overflow { margin-left: var(--cg-spacing-4); }
+    :host([expanded][size="lg"]) .avatar:not(:first-child),
+    :host([expanded][size="lg"]) .overflow { margin-left: var(--cg-spacing-4); }
     .avatar:hover {
       z-index: 10;
@@ -176,19 +182,19 @@ o.styles = [p, m, d`
     }
     /* Sizes */
-    :host([size="sm"]) .avatar, :host([size="sm"]) .overflow { width: var(--cg-spacing-32); height: var(--cg-spacing-32); }
+    :host([size="sm"]) .avatar, :host([size="sm"]) .overflow { width: var(--cg-component-avatar-size-sm); height: var(--cg-component-avatar-size-sm); }
     :host([size="sm"]) .avatar:not(:first-child) { margin-left: calc(-1 * var(--cg-spacing-8)); }
     :host([size="sm"]) .overflow { margin-left: calc(-1 * var(--cg-spacing-8)); font-size: var(--cg-font-size-xs); }
     :host([size="sm"]) .initials { font-size: var(--cg-font-size-xs); }
     :host([size="sm"]) .status { width: var(--cg-spacing-8); height: var(--cg-spacing-8); }
-    :host([size="md"]) .avatar, :host([size="md"]) .overflow { width: var(--cg-spacing-40); height: var(--cg-spacing-40); }
+    :host([size="md"]) .avatar, :host([size="md"]) .overflow { width: var(--cg-component-avatar-size-md); height: var(--cg-component-avatar-size-md); }
     :host([size="md"]) .avatar:not(:first-child) { margin-left: calc(-1 * var(--cg-spacing-12)); }
     :host([size="md"]) .overflow { margin-left: calc(-1 * var(--cg-spacing-12)); font-size: var(--cg-font-size-xs); }
     :host([size="md"]) .initials { font-size: var(--cg-font-size-xs); }
     :host([size="md"]) .status { width: var(--cg-spacing-12); height: var(--cg-spacing-12); }
-    :host([size="lg"]) .avatar, :host([size="lg"]) .overflow { width: var(--cg-spacing-48); height: var(--cg-spacing-48); }
+    :host([size="lg"]) .avatar, :host([size="lg"]) .overflow { width: var(--cg-component-avatar-size-lg); height: var(--cg-component-avatar-size-lg); }
     :host([size="lg"]) .avatar:not(:first-child) { margin-left: calc(-1 * var(--cg-spacing-12)); }
     :host([size="lg"]) .overflow { margin-left: calc(-1 * var(--cg-spacing-12)); font-size: var(--cg-font-size-sm); }
     :host([size="lg"]) .initials { font-size: var(--cg-font-size-sm); }

package/dist/components/cg-avatar-group/cg-avatar-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cg-avatar-group.js","sources":["../../../src/components/cg-avatar-group/cg-avatar-group.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBase, reducedMotion } from '../../styles/index.js';\n\nexport interface AvatarItem {\n src?: string;\n name: string;\n status?: 'online' \| 'offline' \| 'busy' \| 'away';\n}\n\n/*\n <cg-avatar-group> — Overlapping avatar stack with overflow badge.\n \n Features:\n * - Overlapping circles with negative margin\n * - \"+N more\" overflow badge\n * - Status dots (online/offline/busy/away)\n * - Initials fallback, image error fallback\n * - Hover to spread apart, size variants\n * - Click events on overflow\n /\n@customElement('cg-avatar-group')\nexport class CgAvatarGroup extends LitElement {\n static override styles = [hostBase, reducedMotion, css`\n .group {\n display: flex;\n align-items: center;\n }\n\n .avatar {\n position: relative;\n border-radius: var(--cg-border-radius-full);\n border: var(--cg-border-width-100) solid var(--cg-color-surface-base-background);\n background: var(--cg-color-action-secondary-background-default);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n cursor: pointer;\n transition: transform var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out), margin var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n animation: avatarIn var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out) both;\n animation-delay: calc(var(--avatar-index, 0) 50ms);\n }\n\n .avatar-inner {\n width: 100%;\n height: 100%;\n border-radius: var(--cg-border-radius-full);\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n @keyframes avatarIn {\n from { opacity: 0; transform: scale(0.8); }\n to { opacity: 1; transform: scale(1); }\n }\n\n :host([expanded]) .avatar,\n :host([expanded]) .overflow { margin-left: var(--cg-spacing-4) !important; }\n :host([expanded]) .avatar:first-child { margin-left: 0 !important; }\n\n .avatar:hover {\n z-index: 10;\n transform: scale(1.15) translateY(calc(-1 * var(--cg-spacing-2)));\n }\n\n .avatar:active {\n transform: scale(var(--cg-interaction-press-scale));\n }\n\n .avatar:focus-visible {\n outline: none;\n box-shadow:\n 0 0 0 2px var(--cg-color-focus-ring-offset),\n 0 0 0 4px var(--cg-color-focus-ring);\n z-index: 11;\n }\n\n .avatar img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n .initials {\n font-weight: var(--cg-font-weight-semibold);\n color: var(--cg-color-surface-base-text);\n text-transform: uppercase;\n line-height: 1;\n pointer-events: none;\n }\n\n /* Status dot /\n .status {\n position: absolute;\n bottom: 0;\n right: 0;\n border-radius: var(--cg-border-radius-full);\n border: var(--cg-border-width-100) solid var(--cg-color-surface-base-background);\n }\n .status.online { background: var(--cg-color-status-success-text-default); }\n .status.offline { background: var(--cg-color-surface-container-outlined); }\n .status.busy { background: var(--cg-color-status-error-text-default); }\n .status.away { background: var(--cg-color-status-warning-text-default); }\n\n / Overflow badge /\n .overflow {\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--cg-border-radius-full);\n border: var(--cg-border-width-100) solid var(--cg-color-surface-base-background);\n background: var(--cg-color-action-secondary-background-default);\n color: var(--cg-color-surface-base-text);\n font-weight: var(--cg-font-weight-semibold);\n cursor: pointer;\n flex-shrink: 0;\n transition: transform var(--cg-transition-duration-slow) var(--cg-transition-easing-default), background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n }\n .overflow:hover {\n background: var(--cg-color-action-secondary-background-hover);\n transform: scale(1.1);\n }\n .overflow:focus-visible {\n outline: none;\n box-shadow:\n 0 0 0 2px var(--cg-color-focus-ring-offset),\n 0 0 0 4px var(--cg-color-focus-ring);\n }\n\n / Sizes /\n :host([size=\"sm\"]) .avatar, :host([size=\"sm\"]) .overflow { width: var(--cg-spacing-32); height: var(--cg-spacing-32); }\n :host([size=\"sm\"]) .avatar:not(:first-child) { margin-left: calc(-1 var(--cg-spacing-8)); }\n :host([size=\"sm\"]) .overflow { margin-left: calc(-1 * var(--cg-spacing-8)); font-size: var(--cg-font-size-xs); }\n :host([size=\"sm\"]) .initials { font-size: var(--cg-font-size-xs); }\n :host([size=\"sm\"]) .status { width: var(--cg-spacing-8); height: var(--cg-spacing-8); }\n\n :host([size=\"md\"]) .avatar, :host([size=\"md\"]) .overflow { width: var(--cg-spacing-40); height: var(--cg-spacing-40); }\n :host([size=\"md\"]) .avatar:not(:first-child) { margin-left: calc(-1 * var(--cg-spacing-12)); }\n :host([size=\"md\"]) .overflow { margin-left: calc(-1 * var(--cg-spacing-12)); font-size: var(--cg-font-size-xs); }\n :host([size=\"md\"]) .initials { font-size: var(--cg-font-size-xs); }\n :host([size=\"md\"]) .status { width: var(--cg-spacing-12); height: var(--cg-spacing-12); }\n\n :host([size=\"lg\"]) .avatar, :host([size=\"lg\"]) .overflow { width: var(--cg-spacing-48); height: var(--cg-spacing-48); }\n :host([size=\"lg\"]) .avatar:not(:first-child) { margin-left: calc(-1 * var(--cg-spacing-12)); }\n :host([size=\"lg\"]) .overflow { margin-left: calc(-1 * var(--cg-spacing-12)); font-size: var(--cg-font-size-sm); }\n :host([size=\"lg\"]) .initials { font-size: var(--cg-font-size-sm); }\n :host([size=\"lg\"]) .status { width: var(--cg-spacing-12); height: var(--cg-spacing-12); }\n `];\n\n @property({ type: Array }) avatars: AvatarItem[] = [];\n @property({ type: Number }) maxVisible = 4;\n @property({ reflect: true }) size: 'sm' \| 'md' \| 'lg' = 'md';\n @property({ type: Boolean, reflect: true }) expanded = false;\n\n /** Tracks which avatar indices have failed images */\n @state() private _failedImages = new Set<number>();\n\n private _getInitials(name: string): string {\n return name.split(' ').map(p => p[0] \|\| '').join('').slice(0, 2);\n }\n\n private _onImgError(index: number) {\n this._failedImages = new Set(this._failedImages).add(index);\n }\n\n private _onGroupEnter() { this.expanded = true; }\n private _onGroupLeave() { this.expanded = false; }\n\n private _onAvatarClick() {\n this.dispatchEvent(new CustomEvent('cg-avatar-group-click', { bubbles: true, composed: true }));\n }\n\n private _onOverflowClick() {\n this.dispatchEvent(new CustomEvent('cg-avatar-group-overflow-click', { bubbles: true, composed: true }));\n }\n\n override render() {\n const visible = this.avatars.slice(0, this.maxVisible);\n const overflow = this.avatars.length - this.maxVisible;\n\n return html`\n <div class=\"group\" role=\"group\" aria-label=\"Avatar group\"\n @mouseenter=${this._onGroupEnter}\n @mouseleave=${this._onGroupLeave}>\n ${visible.map((a, i) => html`\n <div class=\"avatar\"\n role=\"button\"\n tabindex=\"0\"\n aria-label=${a.name}\n style=\"z-index:${visible.length - i}; --avatar-index: ${i}\"\n @click=${this._onAvatarClick}\n @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' \|\| e.key === ' ') { e.preventDefault(); this._onAvatarClick(); } }}>\n <div class=\"avatar-inner\">\n ${a.src && !this._failedImages.has(i) ? html`\n <img src=${a.src} alt=${a.name} loading=\"lazy\" @error=${() => this._onImgError(i)} />\n ` : html`\n <span class=\"initials\">${this._getInitials(a.name)}</span>\n `}\n </div>\n ${a.status ? html`<span class=\"status ${a.status}\"></span>` : nothing}\n </div>\n `)}\n ${overflow > 0 ? html`\n <button class=\"overflow\"\n aria-label=\"${overflow} more avatars\"\n style=\"z-index:0\"\n @click=${this._onOverflowClick}>\n +${overflow}\n </button>\n ` : nothing}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'cg-avatar-group': CgAvatarGroup;\n }\n}\n"],"names":["CgAvatarGroup","LitElement","name","p","index","visible","overflow","html","i","e","nothing","hostBase","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}
1	+ {"version":3,"file":"cg-avatar-group.js","sources":["../../../src/components/cg-avatar-group/cg-avatar-group.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBase, reducedMotion } from '../../styles/index.js';\n\nexport interface AvatarItem {\n src?: string;\n name: string;\n status?: 'online' \| 'offline' \| 'busy' \| 'away';\n}\n\n/*\n <cg-avatar-group> — Overlapping avatar stack with overflow badge.\n \n Features:\n * - Overlapping circles with negative margin\n * - \"+N more\" overflow badge\n * - Status dots (online/offline/busy/away)\n * - Initials fallback, image error fallback\n * - Hover to spread apart, size variants\n * - Click events on overflow\n /\n@customElement('cg-avatar-group')\nexport class CgAvatarGroup extends LitElement {\n static override styles = [hostBase, reducedMotion, css`\n .group {\n display: flex;\n align-items: center;\n }\n\n .avatar {\n position: relative;\n border-radius: var(--cg-border-radius-full);\n border: var(--cg-border-width-100) solid var(--cg-color-surface-base-background);\n background: var(--cg-color-action-secondary-background-default);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n cursor: pointer;\n transition: transform var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out), margin var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n animation: avatarIn var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out) both;\n animation-delay: calc(var(--avatar-index, 0) var(--cg-transition-duration-fast) / 2);\n }\n\n .avatar-inner {\n width: 100%;\n height: 100%;\n border-radius: var(--cg-border-radius-full);\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n @keyframes avatarIn {\n from { opacity: 0; transform: scale(0.8); }\n to { opacity: 1; transform: scale(1); }\n }\n\n /* Expanded spread. Per-size selectors (2 attrs + class) out-specify the\n base :host([size]) overlap rules, so no !important is needed. The\n :not(:first-child) excludes the leading avatar naturally. /\n :host([expanded][size=\"sm\"]) .avatar:not(:first-child),\n :host([expanded][size=\"sm\"]) .overflow { margin-left: var(--cg-spacing-4); }\n :host([expanded][size=\"md\"]) .avatar:not(:first-child),\n :host([expanded][size=\"md\"]) .overflow { margin-left: var(--cg-spacing-4); }\n :host([expanded][size=\"lg\"]) .avatar:not(:first-child),\n :host([expanded][size=\"lg\"]) .overflow { margin-left: var(--cg-spacing-4); }\n\n .avatar:hover {\n z-index: 10;\n transform: scale(1.15) translateY(calc(-1 var(--cg-spacing-2)));\n }\n\n .avatar:active {\n transform: scale(var(--cg-interaction-press-scale));\n }\n\n .avatar:focus-visible {\n outline: none;\n box-shadow:\n 0 0 0 2px var(--cg-color-focus-ring-offset),\n 0 0 0 4px var(--cg-color-focus-ring);\n z-index: 11;\n }\n\n .avatar img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n .initials {\n font-weight: var(--cg-font-weight-semibold);\n color: var(--cg-color-surface-base-text);\n text-transform: uppercase;\n line-height: 1;\n pointer-events: none;\n }\n\n /* Status dot /\n .status {\n position: absolute;\n bottom: 0;\n right: 0;\n border-radius: var(--cg-border-radius-full);\n border: var(--cg-border-width-100) solid var(--cg-color-surface-base-background);\n }\n .status.online { background: var(--cg-color-status-success-text-default); }\n .status.offline { background: var(--cg-color-surface-container-outlined); }\n .status.busy { background: var(--cg-color-status-error-text-default); }\n .status.away { background: var(--cg-color-status-warning-text-default); }\n\n / Overflow badge /\n .overflow {\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--cg-border-radius-full);\n border: var(--cg-border-width-100) solid var(--cg-color-surface-base-background);\n background: var(--cg-color-action-secondary-background-default);\n color: var(--cg-color-surface-base-text);\n font-weight: var(--cg-font-weight-semibold);\n cursor: pointer;\n flex-shrink: 0;\n transition: transform var(--cg-transition-duration-slow) var(--cg-transition-easing-default), background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n }\n .overflow:hover {\n background: var(--cg-color-action-secondary-background-hover);\n transform: scale(1.1);\n }\n .overflow:focus-visible {\n outline: none;\n box-shadow:\n 0 0 0 2px var(--cg-color-focus-ring-offset),\n 0 0 0 4px var(--cg-color-focus-ring);\n }\n\n / Sizes /\n :host([size=\"sm\"]) .avatar, :host([size=\"sm\"]) .overflow { width: var(--cg-component-avatar-size-sm); height: var(--cg-component-avatar-size-sm); }\n :host([size=\"sm\"]) .avatar:not(:first-child) { margin-left: calc(-1 var(--cg-spacing-8)); }\n :host([size=\"sm\"]) .overflow { margin-left: calc(-1 * var(--cg-spacing-8)); font-size: var(--cg-font-size-xs); }\n :host([size=\"sm\"]) .initials { font-size: var(--cg-font-size-xs); }\n :host([size=\"sm\"]) .status { width: var(--cg-spacing-8); height: var(--cg-spacing-8); }\n\n :host([size=\"md\"]) .avatar, :host([size=\"md\"]) .overflow { width: var(--cg-component-avatar-size-md); height: var(--cg-component-avatar-size-md); }\n :host([size=\"md\"]) .avatar:not(:first-child) { margin-left: calc(-1 * var(--cg-spacing-12)); }\n :host([size=\"md\"]) .overflow { margin-left: calc(-1 * var(--cg-spacing-12)); font-size: var(--cg-font-size-xs); }\n :host([size=\"md\"]) .initials { font-size: var(--cg-font-size-xs); }\n :host([size=\"md\"]) .status { width: var(--cg-spacing-12); height: var(--cg-spacing-12); }\n\n :host([size=\"lg\"]) .avatar, :host([size=\"lg\"]) .overflow { width: var(--cg-component-avatar-size-lg); height: var(--cg-component-avatar-size-lg); }\n :host([size=\"lg\"]) .avatar:not(:first-child) { margin-left: calc(-1 * var(--cg-spacing-12)); }\n :host([size=\"lg\"]) .overflow { margin-left: calc(-1 * var(--cg-spacing-12)); font-size: var(--cg-font-size-sm); }\n :host([size=\"lg\"]) .initials { font-size: var(--cg-font-size-sm); }\n :host([size=\"lg\"]) .status { width: var(--cg-spacing-12); height: var(--cg-spacing-12); }\n `];\n\n @property({ type: Array }) avatars: AvatarItem[] = [];\n @property({ type: Number }) maxVisible = 4;\n @property({ reflect: true }) size: 'sm' \| 'md' \| 'lg' = 'md';\n @property({ type: Boolean, reflect: true }) expanded = false;\n\n /** Tracks which avatar indices have failed images */\n @state() private _failedImages = new Set<number>();\n\n private _getInitials(name: string): string {\n return name.split(' ').map(p => p[0] \|\| '').join('').slice(0, 2);\n }\n\n private _onImgError(index: number) {\n this._failedImages = new Set(this._failedImages).add(index);\n }\n\n private _onGroupEnter() { this.expanded = true; }\n private _onGroupLeave() { this.expanded = false; }\n\n private _onAvatarClick() {\n this.dispatchEvent(new CustomEvent('cg-avatar-group-click', { bubbles: true, composed: true }));\n }\n\n private _onOverflowClick() {\n this.dispatchEvent(new CustomEvent('cg-avatar-group-overflow-click', { bubbles: true, composed: true }));\n }\n\n override render() {\n const visible = this.avatars.slice(0, this.maxVisible);\n const overflow = this.avatars.length - this.maxVisible;\n\n return html`\n <div class=\"group\" role=\"group\" aria-label=\"Avatar group\"\n @mouseenter=${this._onGroupEnter}\n @mouseleave=${this._onGroupLeave}>\n ${visible.map((a, i) => html`\n <div class=\"avatar\"\n role=\"button\"\n tabindex=\"0\"\n aria-label=${a.status ? `${a.name}, ${a.status}` : a.name}\n style=\"z-index:${visible.length - i}; --avatar-index: ${i}\"\n @click=${this._onAvatarClick}\n @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' \|\| e.key === ' ') { e.preventDefault(); this._onAvatarClick(); } }}>\n <div class=\"avatar-inner\">\n ${a.src && !this._failedImages.has(i) ? html`\n <img src=${a.src} alt=${a.name} loading=\"lazy\" @error=${() => this._onImgError(i)} />\n ` : html`\n <span class=\"initials\">${this._getInitials(a.name)}</span>\n `}\n </div>\n ${a.status ? html`<span class=\"status ${a.status}\" aria-hidden=\"true\"></span>` : nothing}\n </div>\n `)}\n ${overflow > 0 ? html`\n <button class=\"overflow\"\n aria-label=\"${overflow} more avatars\"\n style=\"z-index:0\"\n @click=${this._onOverflowClick}>\n +${overflow}\n </button>\n ` : nothing}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'cg-avatar-group': CgAvatarGroup;\n }\n}\n"],"names":["CgAvatarGroup","LitElement","name","p","index","visible","overflow","html","i","e","nothing","hostBase","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"cg-badge.d.ts","sourceRoot":"","sources":["../../../src/components/cg-badge/cg-badge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,~~4BAiFnB~~;IAE0B,OAAO,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAa;IACtF,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAChC,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IACtE,KAAK,SAAM;IACM,GAAG,UAAS;IAEhC,MAAM;~~CAQhB~~;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
1	+ {"version":3,"file":"cg-badge.d.ts","sourceRoot":"","sources":["../../../src/components/cg-badge/cg-badge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,4BAuFnB;IAE0B,OAAO,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAa;IACtF,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAChC,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IACtE,KAAK,SAAM;IACM,GAAG,UAAS;IAEhC,MAAM;CAYhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

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

@@ -1,9 +1,9 @@
 import { css as l, LitElement as u, nothing as b, html as i } from "lit";
-import { property as e, customElement as v } from "lit/decorators.js";
-import { a as p, r as f, e as h, d as m } from "../../chunks/premium.css-9I4kHrsl.js";
-var y = Object.defineProperty, w = Object.getOwnPropertyDescriptor, o = (g, t, d, s) => {
-  for (var a = s > 1 ? void 0 : s ? w(t, d) : t, c = g.length - 1, n; c >= 0; c--)
-    (n = g[c]) && (a = (s ? n(t, d, a) : n(a)) || a);
+import { property as o, customElement as p } from "lit/decorators.js";
+import { a as v, r as f, e as h, d as m } from "../../chunks/premium.css-DHekUEUt.js";
+var y = Object.defineProperty, x = Object.getOwnPropertyDescriptor, e = (g, t, d, s) => {
+  for (var a = s > 1 ? void 0 : s ? x(t, d) : t, n = g.length - 1, c; n >= 0; n--)
+    (c = g[n]) && (a = (s ? c(t, d, a) : c(a)) || a);
   return s && a && y(t, d, a), a;
 };
 let r = class extends u {
@@ -12,17 +12,23 @@ let r = class extends u {
   }
   render() {
     return i`
-      <span class="badge" role=${this.dot ? "status" : "presentation"}>
-        ${this.dot ? i`<span class="dot"></span>` : b}
+      <span class="badge">
+        ${this.dot ? i`<span class="dot" aria-hidden="true"></span>` : b}
         <span class="text">${this.label}<slot></slot></span>
       </span>
     `;
   }
 };
-r.styles = [p, f, h, m, l`
+r.styles = [v, f, h, m, l`
     :host {
       animation: staggerFadeIn var(--cg-transition-duration-fast) ease-out both;
     }
+    /* Collapse a truly-empty badge (no label, no dot, no slotted text) so it
+       doesn't render as a stray padded/bordered pill. Slot-only usage still
+       renders because .text:empty is false when slotted text is present. */
+    :host(:not([dot])) .badge:has(.text:empty) {
+      display: none;
+    }
     .badge {
       display: inline-flex;
@@ -101,23 +107,23 @@ r.styles = [p, f, h, m, l`
     }
   `];
-o([
-  e({ reflect: !0 })
+e([
+  o({ reflect: !0 })
 ], r.prototype, "variant", 2);
-o([
-  e({ reflect: !0 })
+e([
+  o({ reflect: !0 })
 ], r.prototype, "size", 2);
-o([
-  e({ reflect: !0 })
+e([
+  o({ reflect: !0 })
 ], r.prototype, "rounded", 2);
-o([
-  e()
+e([
+  o()
 ], r.prototype, "label", 2);
-o([
-  e({ type: Boolean })
+e([
+  o({ type: Boolean })
 ], r.prototype, "dot", 2);
-r = o([
-  v("cg-badge")
+r = e([
+  p("cg-badge")
 ], r);
 export {
   r as CgBadge

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

	@@ -1 +1 @@
1	- {"version":3,"file":"cg-badge.js","sources":["../../../src/components/cg-badge/cg-badge.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBase, reducedMotion, entranceStagger, dotPulseKeyframes } from '../../styles/index.js';\n\n/*\n @element cg-badge\n * Static semantic status label — display only, no interaction.\n \n If you need a clickable / removable / selectable pill, use `cg-chip` instead.\n * If you need a toolbar press-state button, use `cg-toggle`.\n \n @example\n * ```html\n * <cg-badge variant=\"success\" label=\"Active\" dot></cg-badge>\n * <cg-badge variant=\"danger\" label=\"Error\"></cg-badge>\n * <cg-badge variant=\"accent\" size=\"lg\">Custom</cg-badge>\n * ```\n \n @slot - Additional content after the label text\n \n @cssprop --cg-color-badge-background-default - Neutral badge background\n * @cssprop --cg-color-badge-text-default - Neutral badge text color\n * @cssprop --cg-component-badge-radius-md - Badge border radius (md)\n * @cssprop --cg-font-size-xs - Badge font size (12px)\n /\n@customElement('cg-badge')\nexport class CgBadge extends LitElement {\n static override styles = [hostBase, reducedMotion, entranceStagger, dotPulseKeyframes, css`\n :host {\n animation: staggerFadeIn var(--cg-transition-duration-fast) ease-out both;\n }\n\n .badge {\n display: inline-flex;\n align-items: center;\n gap: var(--cg-spacing-4);\n font-weight: var(--cg-font-weight-medium);\n white-space: nowrap;\n border: var(--cg-border-width-50) solid transparent;\n transition: background-color var(--cg-transition-duration-fast) ease, border-color var(--cg-transition-duration-fast) ease, opacity var(--cg-transition-duration-fast) ease;\n }\n\n / Sizes /\n :host([size=\"sm\"]) .badge {\n padding: var(--cg-spacing-4) var(--cg-spacing-8);\n font-size: var(--cg-font-size-xs);\n border-radius: var(--cg-component-badge-radius-sm);\n }\n :host([size=\"md\"]) .badge {\n padding: var(--cg-spacing-6) var(--cg-spacing-12);\n font-size: var(--cg-font-size-sm);\n border-radius: var(--cg-component-badge-radius-md);\n }\n :host([size=\"lg\"]) .badge {\n padding: var(--cg-spacing-8) var(--cg-spacing-16);\n font-size: var(--cg-font-size-base);\n border-radius: var(--cg-component-badge-radius-lg);\n }\n\n / Variants /\n :host([variant=\"neutral\"]) .badge {\n background: var(--cg-color-surface-container-background);\n color: var(--cg-color-surface-container-text);\n border-color: var(--cg-color-surface-container-border);\n }\n :host([variant=\"info\"]) .badge {\n background: var(--cg-color-badge-background-default);\n color: var(--cg-color-badge-text-default);\n border-color: var(--cg-color-status-info-border-default);\n }\n :host([variant=\"success\"]) .badge {\n background: var(--cg-color-badge-background-success);\n color: var(--cg-color-badge-text-success);\n border-color: var(--cg-color-status-success-border-default);\n }\n :host([variant=\"warning\"]) .badge {\n background: var(--cg-color-badge-background-warning);\n color: var(--cg-color-badge-text-warning);\n border-color: var(--cg-color-status-warning-border-default);\n }\n :host([variant=\"danger\"]) .badge {\n background: var(--cg-color-badge-background-error);\n color: var(--cg-color-badge-text-error);\n border-color: var(--cg-color-status-error-border-default);\n }\n :host([variant=\"accent\"]) .badge {\n background: var(--cg-overlay-accent-light);\n color: var(--cg-color-action-primary-background-default);\n border-color: var(--cg-overlay-accent-strong);\n }\n\n / Rounded variants /\n :host([rounded=\"none\"]) .badge { border-radius: 0; }\n :host([rounded=\"sm\"]) .badge { border-radius: var(--cg-component-badge-radius-sm); }\n :host([rounded=\"md\"]) .badge { border-radius: var(--cg-component-badge-radius-md); }\n :host([rounded=\"lg\"]) .badge { border-radius: var(--cg-component-badge-radius-lg); }\n :host([rounded=\"full\"]) .badge { border-radius: var(--cg-border-radius-full); }\n\n / Dot indicator */\n .dot {\n width: var(--cg-spacing-6);\n height: var(--cg-spacing-6);\n border-radius: var(--cg-border-radius-full);\n background: currentColor;\n flex-shrink: 0;\n animation: dotPulse 2s ease-in-out infinite;\n }\n\n `];\n\n @property({ reflect: true }) variant: 'neutral' \| 'info' \| 'success' \| 'warning' \| 'danger' \| 'accent' = 'neutral';\n @property({ reflect: true }) size: 'sm' \| 'md' \| 'lg' = 'md';\n @property({ reflect: true }) rounded: 'none' \| 'sm' \| 'md' \| 'lg' \| 'full' = 'md';\n @property() label = '';\n @property({ type: Boolean }) dot = false;\n\n override render() {\n return html`\n <span class=\"badge\" ~~role=${this.dot ? 'status' : 'presentation'}~~>\n ${this.dot ? html`<span class=\"dot\"></span>` : nothing}\n <span class=\"text\">${this.label}<slot></slot></span>\n </span>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'cg-badge': CgBadge;\n }\n}\n"],"names":["CgBadge","LitElement","html","nothing","hostBase","reducedMotion","entranceStagger","dotPulseKeyframes","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AA0BO,IAAMA,IAAN,cAAsBC,EAAW;AAAA,EAAjC,cAAA;AAAA,UAAA,GAAA,SAAA,~~GAoFwB~~,KAAA,UAA4E,WAC5E,KAAA,OAA2B,MAC3B,KAAA,UAAgD,MACjE,KAAA,QAAQ,IACS,KAAA,MAAM;AAAA,EAAA;AAAA,EAE1B,SAAS;~~AAChB~~,WAAOC;AAAA~~,iCACsB,KAAK,MAAM,WAAW,cAAc~~;AAAA,~~UAC3D~~,KAAK,MAAMA~~,+BAAkCC~~,CAAO;AAAA,~~6BACjC~~,KAAK,KAAK;AAAA;AAAA;AAAA,EAGrC;AACF;~~AAlGaH~~,EACK,SAAS,CAACI,GAAUC,GAAeC,GAAiBC,GAAmBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,~~GAiFtF~~;AAE4BC,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,~~GApFhBV~~,~~EAoFkB~~,WAAA,WAAA,CAAA;AACAS,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,~~GArFhBV~~,~~EAqFkB~~,WAAA,QAAA,CAAA;AACAS,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,~~GAtFhBV~~,~~EAsFkB~~,WAAA,WAAA,CAAA;AACjBS,EAAA;AAAA,EAAXC,EAAA;AAAS,~~GAvFCV~~,~~EAuFC~~,WAAA,SAAA,CAAA;AACiBS,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,~~GAxFhBV~~,~~EAwFkB~~,WAAA,OAAA,CAAA;~~AAxFlBA~~,IAANS,EAAA;AAAA,EADNE,EAAc,UAAU;AAAA,GACZX,CAAA;"}
1	+ {"version":3,"file":"cg-badge.js","sources":["../../../src/components/cg-badge/cg-badge.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBase, reducedMotion, entranceStagger, dotPulseKeyframes } from '../../styles/index.js';\n\n/*\n @element cg-badge\n * Static semantic status label — display only, no interaction.\n \n If you need a clickable / removable / selectable pill, use `cg-chip` instead.\n * If you need a toolbar press-state button, use `cg-toggle`.\n \n @example\n * ```html\n * <cg-badge variant=\"success\" label=\"Active\" dot></cg-badge>\n * <cg-badge variant=\"danger\" label=\"Error\"></cg-badge>\n * <cg-badge variant=\"accent\" size=\"lg\">Custom</cg-badge>\n * ```\n \n @slot - Additional content after the label text\n \n @cssprop --cg-color-badge-background-default - Neutral badge background\n * @cssprop --cg-color-badge-text-default - Neutral badge text color\n * @cssprop --cg-component-badge-radius-md - Badge border radius (md)\n * @cssprop --cg-font-size-xs - Badge font size (12px)\n /\n@customElement('cg-badge')\nexport class CgBadge extends LitElement {\n static override styles = [hostBase, reducedMotion, entranceStagger, dotPulseKeyframes, css`\n :host {\n animation: staggerFadeIn var(--cg-transition-duration-fast) ease-out both;\n }\n / Collapse a truly-empty badge (no label, no dot, no slotted text) so it\n doesn't render as a stray padded/bordered pill. Slot-only usage still\n renders because .text:empty is false when slotted text is present. /\n :host(:not([dot])) .badge:has(.text:empty) {\n display: none;\n }\n\n .badge {\n display: inline-flex;\n align-items: center;\n gap: var(--cg-spacing-4);\n font-weight: var(--cg-font-weight-medium);\n white-space: nowrap;\n border: var(--cg-border-width-50) solid transparent;\n transition: background-color var(--cg-transition-duration-fast) ease, border-color var(--cg-transition-duration-fast) ease, opacity var(--cg-transition-duration-fast) ease;\n }\n\n / Sizes /\n :host([size=\"sm\"]) .badge {\n padding: var(--cg-spacing-4) var(--cg-spacing-8);\n font-size: var(--cg-font-size-xs);\n border-radius: var(--cg-component-badge-radius-sm);\n }\n :host([size=\"md\"]) .badge {\n padding: var(--cg-spacing-6) var(--cg-spacing-12);\n font-size: var(--cg-font-size-sm);\n border-radius: var(--cg-component-badge-radius-md);\n }\n :host([size=\"lg\"]) .badge {\n padding: var(--cg-spacing-8) var(--cg-spacing-16);\n font-size: var(--cg-font-size-base);\n border-radius: var(--cg-component-badge-radius-lg);\n }\n\n / Variants /\n :host([variant=\"neutral\"]) .badge {\n background: var(--cg-color-surface-container-background);\n color: var(--cg-color-surface-container-text);\n border-color: var(--cg-color-surface-container-border);\n }\n :host([variant=\"info\"]) .badge {\n background: var(--cg-color-badge-background-default);\n color: var(--cg-color-badge-text-default);\n border-color: var(--cg-color-status-info-border-default);\n }\n :host([variant=\"success\"]) .badge {\n background: var(--cg-color-badge-background-success);\n color: var(--cg-color-badge-text-success);\n border-color: var(--cg-color-status-success-border-default);\n }\n :host([variant=\"warning\"]) .badge {\n background: var(--cg-color-badge-background-warning);\n color: var(--cg-color-badge-text-warning);\n border-color: var(--cg-color-status-warning-border-default);\n }\n :host([variant=\"danger\"]) .badge {\n background: var(--cg-color-badge-background-error);\n color: var(--cg-color-badge-text-error);\n border-color: var(--cg-color-status-error-border-default);\n }\n :host([variant=\"accent\"]) .badge {\n background: var(--cg-overlay-accent-light);\n color: var(--cg-color-action-primary-background-default);\n border-color: var(--cg-overlay-accent-strong);\n }\n\n / Rounded variants /\n :host([rounded=\"none\"]) .badge { border-radius: 0; }\n :host([rounded=\"sm\"]) .badge { border-radius: var(--cg-component-badge-radius-sm); }\n :host([rounded=\"md\"]) .badge { border-radius: var(--cg-component-badge-radius-md); }\n :host([rounded=\"lg\"]) .badge { border-radius: var(--cg-component-badge-radius-lg); }\n :host([rounded=\"full\"]) .badge { border-radius: var(--cg-border-radius-full); }\n\n / Dot indicator */\n .dot {\n width: var(--cg-spacing-6);\n height: var(--cg-spacing-6);\n border-radius: var(--cg-border-radius-full);\n background: currentColor;\n flex-shrink: 0;\n animation: dotPulse 2s ease-in-out infinite;\n }\n\n `];\n\n @property({ reflect: true }) variant: 'neutral' \| 'info' \| 'success' \| 'warning' \| 'danger' \| 'accent' = 'neutral';\n @property({ reflect: true }) size: 'sm' \| 'md' \| 'lg' = 'md';\n @property({ reflect: true }) rounded: 'none' \| 'sm' \| 'md' \| 'lg' \| 'full' = 'md';\n @property() label = '';\n @property({ type: Boolean }) dot = false;\n\n override render() {\n // No role override: a badge is a styled inline label whose text is read\n // natively. role=\"status\" made every dotted badge a polite live region\n // (spurious announcements on mount); role=\"presentation\" hid its own\n // semantics. A plain <span> is correct for a static label.\n return html`\n <span class=\"badge\">\n ${this.dot ? html`<span class=\"dot\" aria-hidden=\"true\"></span>` : nothing}\n <span class=\"text\">${this.label}<slot></slot></span>\n </span>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'cg-badge': CgBadge;\n }\n}\n"],"names":["CgBadge","LitElement","html","nothing","hostBase","reducedMotion","entranceStagger","dotPulseKeyframes","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AA0BO,IAAMA,IAAN,cAAsBC,EAAW;AAAA,EAAjC,cAAA;AAAA,UAAA,GAAA,SAAA,GA0FwB,KAAA,UAA4E,WAC5E,KAAA,OAA2B,MAC3B,KAAA,UAAgD,MACjE,KAAA,QAAQ,IACS,KAAA,MAAM;AAAA,EAAA;AAAA,EAE1B,SAAS;AAKhB,WAAOC;AAAA;AAAA,UAED,KAAK,MAAMA,kDAAqDC,CAAO;AAAA,6BACpD,KAAK,KAAK;AAAA;AAAA;AAAA,EAGrC;AACF;AA5GaH,EACK,SAAS,CAACI,GAAUC,GAAeC,GAAiBC,GAAmBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAuFtF;AAE4BC,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GA1FhBV,EA0FkB,WAAA,WAAA,CAAA;AACAS,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GA3FhBV,EA2FkB,WAAA,QAAA,CAAA;AACAS,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GA5FhBV,EA4FkB,WAAA,WAAA,CAAA;AACjBS,EAAA;AAAA,EAAXC,EAAA;AAAS,GA7FCV,EA6FC,WAAA,SAAA,CAAA;AACiBS,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GA9FhBV,EA8FkB,WAAA,OAAA,CAAA;AA9FlBA,IAANS,EAAA;AAAA,EADNE,EAAc,UAAU;AAAA,GACZX,CAAA;"}

package/dist/components/cg-badge-group/cg-badge-group.d.ts CHANGED Viewed

@@ -6,7 +6,6 @@ import { LitElement } from 'lit';
  * - Horizontal wrap layout with configurable gap
  * - Optional label above the group
  * - Max visible count with "+N more" overflow indicator
- * - Configurable size passed to children
  */
 export declare class CgBadgeGroup extends LitElement {
     static styles: import('lit').CSSResult[];

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

	@@ -1 +1 @@
1	- {"version":3,"file":"cg-badge-group.d.ts","sourceRoot":"","sources":["../../../src/components/cg-badge-group/cg-badge-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD~~;;;;;;;;GAQG~~;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,~~4BAmCnB~~;IAEH,sDAAsD;IAC1C,KAAK,SAAM;IAEvB,0BAA0B;IACG,GAAG,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEnE,kDAAkD;IACtB,GAAG,SAAK;IAEpC,6DAA6D;IACjC,KAAK,SAAK;IAE7B,MAAM;CAWhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAAG,gBAAgB,EAAE,YAAY,CAAC;KAAE;CACpE"}
1	+ {"version":3,"file":"cg-badge-group.d.ts","sourceRoot":"","sources":["../../../src/components/cg-badge-group/cg-badge-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;;;GAOG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,4BAqCnB;IAEH,sDAAsD;IAC1C,KAAK,SAAM;IAEvB,0BAA0B;IACG,GAAG,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEnE,kDAAkD;IACtB,GAAG,SAAK;IAEpC,6DAA6D;IACjC,KAAK,SAAK;IAE7B,MAAM;CAWhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAAG,gBAAgB,EAAE,YAAY,CAAC;KAAE;CACpE"}

package/dist/components/cg-badge-group/cg-badge-group.js CHANGED Viewed

@@ -1,27 +1,27 @@
-import { css as m, LitElement as d, nothing as n, html as p } from "lit";
-import { property as g, customElement as f } from "lit/decorators.js";
-import { h as v, r as b } from "../../chunks/premium.css-9I4kHrsl.js";
-var h = Object.defineProperty, u = Object.getOwnPropertyDescriptor, e = (r, o, l, s) => {
-  for (var t = s > 1 ? void 0 : s ? u(o, l) : o, i = r.length - 1, c; i >= 0; i--)
-    (c = r[i]) && (t = (s ? c(o, l, t) : c(t)) || t);
-  return s && t && h(o, l, t), t;
+import { css as d, LitElement as f, nothing as n, html as p } from "lit";
+import { property as l, customElement as h } from "lit/decorators.js";
+import { h as m, r as v } from "../../chunks/premium.css-DHekUEUt.js";
+var b = Object.defineProperty, u = Object.getOwnPropertyDescriptor, r = (t, o, g, s) => {
+  for (var a = s > 1 ? void 0 : s ? u(o, g) : o, i = t.length - 1, c; i >= 0; i--)
+    (c = t[i]) && (a = (s ? c(o, g, a) : c(a)) || a);
+  return s && a && b(o, g, a), a;
 };
-let a = class extends d {
+let e = class extends f {
   constructor() {
     super(...arguments), this.label = "", this.gap = "sm", this.max = 0, this.total = 0;
   }
   render() {
-    const r = this.max > 0 && this.total > this.max ? this.total - this.max : 0;
+    const t = this.max > 0 && this.total > this.max ? this.total - this.max : 0;
     return p`
       ${this.label ? p`<div class="label">${this.label}</div>` : n}
       <div class="badges" role="group" aria-label=${this.label || "Badge group"}>
         <slot></slot>
-        ${r > 0 ? p`<span class="overflow" title="${r} more items">+${r}</span>` : n}
+        ${t > 0 ? p`<span class="overflow" aria-label="${t} more items">+${t}</span>` : n}
       </div>
     `;
   }
 };
-a.styles = [v, b, m`
+e.styles = [m, v, d`
     :host {
       display: block;
       font-family: var(--cg-font-family-primary);
@@ -30,7 +30,7 @@ a.styles = [v, b, m`
     .label {
       font-size: var(--cg-font-size-xs);
       font-weight: var(--cg-font-weight-semibold);
-      color: var(--cg-color-surface-tertiary-text);
+      color: var(--cg-color-input-text-placeholder);
       text-transform: uppercase;
       letter-spacing: 0.04em;
       margin-bottom: var(--cg-spacing-8);
@@ -50,29 +50,31 @@ a.styles = [v, b, m`
     .overflow {
       font-size: var(--cg-font-size-xs);
       font-weight: var(--cg-font-weight-semibold);
-      color: var(--cg-color-surface-tertiary-text);
+      /* Paired text token for the secondary surface — legible (gray-100 on
+         gray-800) vs the placeholder gray-500 which failed AA here. */
+      color: var(--cg-color-action-secondary-text-default);
       padding: var(--cg-spacing-2) var(--cg-spacing-8);
       background: var(--cg-color-action-secondary-background-default);
       border-radius: var(--cg-border-radius-100);
       cursor: default;
     }
   `];
-e([
-  g()
-], a.prototype, "label", 2);
-e([
-  g({ reflect: !0 })
-], a.prototype, "gap", 2);
-e([
-  g({ type: Number })
-], a.prototype, "max", 2);
-e([
-  g({ type: Number })
-], a.prototype, "total", 2);
-a = e([
-  f("cg-badge-group")
-], a);
+r([
+  l()
+], e.prototype, "label", 2);
+r([
+  l({ reflect: !0 })
+], e.prototype, "gap", 2);
+r([
+  l({ type: Number })
+], e.prototype, "max", 2);
+r([
+  l({ type: Number })
+], e.prototype, "total", 2);
+e = r([
+  h("cg-badge-group")
+], e);
 export {
-  a as CgBadgeGroup
+  e as CgBadgeGroup
 };
 //# sourceMappingURL=cg-badge-group.js.map

package/dist/components/cg-badge-group/cg-badge-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cg-badge-group.js","sources":["../../../src/components/cg-badge-group/cg-badge-group.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-badge-group> — Container for a group of badges/tags.\n \n Features:\n * - Horizontal wrap layout with configurable gap\n * - Optional label above the group\n * - Max visible count with \"+N more\" overflow indicator\n * - Configurable size passed to children\n /\n@customElement('cg-badge-group')\nexport class CgBadgeGroup extends LitElement {\n static override styles = [hostBlock, reducedMotion, css`\n :host {\n display: block;\n font-family: var(--cg-font-family-primary);\n }\n\n .label {\n font-size: var(--cg-font-size-xs);\n font-weight: var(--cg-font-weight-semibold);\n color: var(--cg-color-~~surface~~-~~tertiary~~-~~text~~);\n text-transform: uppercase;\n letter-spacing: 0.04em;\n margin-bottom: var(--cg-spacing-8);\n }\n\n .badges {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n }\n\n :host([gap=\"xs\"]) .badges { gap: var(--cg-spacing-4); }\n :host([gap=\"sm\"]) .badges { gap: var(--cg-spacing-6); }\n :host([gap=\"md\"]) .badges { gap: var(--cg-spacing-8); }\n :host([gap=\"lg\"]) .badges { gap: var(--cg-spacing-12); }\n\n .overflow {\n font-size: var(--cg-font-size-xs);\n font-weight: var(--cg-font-weight-semibold);\n color: var(--cg-color-~~surface~~-~~tertiary~~-text);\n padding: var(--cg-spacing-2) var(--cg-spacing-8);\n background: var(--cg-color-action-secondary-background-default);\n border-radius: var(--cg-border-radius-100);\n cursor: default;\n }\n `];\n\n /* Optional label displayed above the badge group. /\n @property() label = '';\n\n /* Gap between badges. /\n @property({ reflect: true }) gap: 'xs' \| 'sm' \| 'md' \| 'lg' = 'sm';\n\n /* Max number of visible badges. 0 = show all. /\n @property({ type: Number }) max = 0;\n\n /* Total count (for overflow calculation when using max). */\n @property({ type: Number }) total = 0;\n\n override render() {\n const overflowCount = this.max > 0 && this.total > this.max ? this.total - this.max : 0;\n\n return html`\n ${this.label ? html`<div class=\"label\">${this.label}</div>` : nothing}\n <div class=\"badges\" role=\"group\" aria-label=${this.label \|\| 'Badge group'}>\n <slot></slot>\n ${overflowCount > 0 ? html`<span class=\"overflow\" ~~title~~=\"${overflowCount} more items\">+${overflowCount}</span>` : nothing}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap { 'cg-badge-group': CgBadgeGroup; }\n}\n"],"names":["CgBadgeGroup","LitElement","overflowCount","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;~~AAcO~~,IAAMA,IAAN,cAA2BC,EAAW;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA,~~GAuCO~~,KAAA,QAAQ,IAGS,KAAA,MAAiC,MAGlC,KAAA,MAAM,GAGN,KAAA,QAAQ;AAAA,EAAA;AAAA,EAE3B,SAAS;AAChB,UAAMC,IAAgB,KAAK,MAAM,KAAK,KAAK,QAAQ,KAAK,MAAM,KAAK,QAAQ,KAAK,MAAM;AAEtF,WAAOC;AAAA,QACH,KAAK,QAAQA,uBAA0B,KAAK,KAAK,WAAWC,CAAO;AAAA,oDACvB,KAAK,SAAS,aAAa;AAAA;AAAA,UAErEF,IAAgB,IAAIC,~~kCAAqCD~~,CAAa,iBAAiBA,CAAa,YAAYE,CAAO;AAAA;AAAA;AAAA,~~EAG/H~~;AACF;~~AA7DaJ~~,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,~~GAmCnD~~;AAGWC,EAAA;AAAA,EAAXC,EAAA;AAAS,~~GAvCCT~~,~~EAuCC~~,WAAA,SAAA,CAAA;AAGiBQ,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,~~GA1ChBT~~,~~EA0CkB~~,WAAA,OAAA,CAAA;AAGDQ,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,~~GA7CfT~~,~~EA6CiB~~,WAAA,OAAA,CAAA;AAGAQ,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,~~GAhDfT~~,~~EAgDiB~~,WAAA,SAAA,CAAA;~~AAhDjBA~~,IAANQ,EAAA;AAAA,EADNE,EAAc,gBAAgB;AAAA,GAClBV,CAAA;"}
1	+ {"version":3,"file":"cg-badge-group.js","sources":["../../../src/components/cg-badge-group/cg-badge-group.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-badge-group> — Container for a group of badges/tags.\n \n Features:\n * - Horizontal wrap layout with configurable gap\n * - Optional label above the group\n * - Max visible count with \"+N more\" overflow indicator\n /\n@customElement('cg-badge-group')\nexport class CgBadgeGroup extends LitElement {\n static override styles = [hostBlock, reducedMotion, css`\n :host {\n display: block;\n font-family: var(--cg-font-family-primary);\n }\n\n .label {\n font-size: var(--cg-font-size-xs);\n font-weight: var(--cg-font-weight-semibold);\n color: var(--cg-color-input-text-placeholder);\n text-transform: uppercase;\n letter-spacing: 0.04em;\n margin-bottom: var(--cg-spacing-8);\n }\n\n .badges {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n }\n\n :host([gap=\"xs\"]) .badges { gap: var(--cg-spacing-4); }\n :host([gap=\"sm\"]) .badges { gap: var(--cg-spacing-6); }\n :host([gap=\"md\"]) .badges { gap: var(--cg-spacing-8); }\n :host([gap=\"lg\"]) .badges { gap: var(--cg-spacing-12); }\n\n .overflow {\n font-size: var(--cg-font-size-xs);\n font-weight: var(--cg-font-weight-semibold);\n / Paired text token for the secondary surface — legible (gray-100 on\n gray-800) vs the placeholder gray-500 which failed AA here. /\n color: var(--cg-color-action-secondary-text-default);\n padding: var(--cg-spacing-2) var(--cg-spacing-8);\n background: var(--cg-color-action-secondary-background-default);\n border-radius: var(--cg-border-radius-100);\n cursor: default;\n }\n `];\n\n /* Optional label displayed above the badge group. /\n @property() label = '';\n\n /* Gap between badges. /\n @property({ reflect: true }) gap: 'xs' \| 'sm' \| 'md' \| 'lg' = 'sm';\n\n /* Max number of visible badges. 0 = show all. /\n @property({ type: Number }) max = 0;\n\n /* Total count (for overflow calculation when using max). */\n @property({ type: Number }) total = 0;\n\n override render() {\n const overflowCount = this.max > 0 && this.total > this.max ? this.total - this.max : 0;\n\n return html`\n ${this.label ? html`<div class=\"label\">${this.label}</div>` : nothing}\n <div class=\"badges\" role=\"group\" aria-label=${this.label \|\| 'Badge group'}>\n <slot></slot>\n ${overflowCount > 0 ? html`<span class=\"overflow\" aria-label=\"${overflowCount} more items\">+${overflowCount}</span>` : nothing}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap { 'cg-badge-group': CgBadgeGroup; }\n}\n"],"names":["CgBadgeGroup","LitElement","overflowCount","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAaO,IAAMA,IAAN,cAA2BC,EAAW;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA,GAyCO,KAAA,QAAQ,IAGS,KAAA,MAAiC,MAGlC,KAAA,MAAM,GAGN,KAAA,QAAQ;AAAA,EAAA;AAAA,EAE3B,SAAS;AAChB,UAAMC,IAAgB,KAAK,MAAM,KAAK,KAAK,QAAQ,KAAK,MAAM,KAAK,QAAQ,KAAK,MAAM;AAEtF,WAAOC;AAAA,QACH,KAAK,QAAQA,uBAA0B,KAAK,KAAK,WAAWC,CAAO;AAAA,oDACvB,KAAK,SAAS,aAAa;AAAA;AAAA,UAErEF,IAAgB,IAAIC,uCAA0CD,CAAa,iBAAiBA,CAAa,YAAYE,CAAO;AAAA;AAAA;AAAA,EAGpI;AACF;AA/DaJ,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,GAqCnD;AAGWC,EAAA;AAAA,EAAXC,EAAA;AAAS,GAzCCT,EAyCC,WAAA,SAAA,CAAA;AAGiBQ,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GA5ChBT,EA4CkB,WAAA,OAAA,CAAA;AAGDQ,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA/CfT,EA+CiB,WAAA,OAAA,CAAA;AAGAQ,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAlDfT,EAkDiB,WAAA,SAAA,CAAA;AAlDjBA,IAANQ,EAAA;AAAA,EADNE,EAAc,gBAAgB;AAAA,GAClBV,CAAA;"}

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

@@ -1,10 +1,10 @@
 import { css as m, LitElement as b, nothing as c, html as t } from "lit";
 import { property as d, state as f, customElement as v } from "lit/decorators.js";
-import { h as x, r as z } from "../../chunks/premium.css-9I4kHrsl.js";
-var w = Object.defineProperty, y = Object.getOwnPropertyDescriptor, p = (e, i, a, s) => {
-  for (var r = s > 1 ? void 0 : s ? y(i, a) : i, n = e.length - 1, l; n >= 0; n--)
-    (l = e[n]) && (r = (s ? l(i, a, r) : l(r)) || r);
-  return s && r && w(i, a, r), r;
+import { h as x, r as z } from "../../chunks/premium.css-DHekUEUt.js";
+var w = Object.defineProperty, y = Object.getOwnPropertyDescriptor, p = (e, i, a, r) => {
+  for (var s = r > 1 ? void 0 : r ? y(i, a) : i, n = e.length - 1, l; n >= 0; n--)
+    (l = e[n]) && (s = (r ? l(i, a, s) : l(s)) || s);
+  return r && s && w(i, a, s), s;
 };
 let o = class extends b {
   constructor() {
@@ -30,8 +30,8 @@ let o = class extends b {
         <a
           class="crumb-link"
           href="${e.href}"
-          @click="${(s) => {
-      s.preventDefault(), this._handleClick(e, i);
+          @click="${(r) => {
+      r.preventDefault(), this._handleClick(e, i);
     }}"
         >
           ${e.icon ? t`<span class="crumb-icon">${e.icon}</span>` : c}
@@ -47,9 +47,9 @@ let o = class extends b {
       </button>
     `;
   }
-  _renderItem(e, i, a, s = "") {
+  _renderItem(e, i, a, r = "") {
     return t`
-      <li class="breadcrumb-item ${s}">
+      <li class="breadcrumb-item ${r}">
         ${this._renderCrumb(e, i, a)}
         ${a ? c : t`
           <span class="separator" aria-hidden="true">${this.separator}</span>
@@ -73,15 +73,15 @@ let o = class extends b {
     if (!this.items.length) return c;
     const e = this.items;
     if (this.maxVisible > 0 && e.length > this.maxVisible && !this._expanded) {
-      const s = Math.max(1, this.maxVisible - 1), r = e[0], n = e.slice(e.length - s);
+      const r = Math.max(1, this.maxVisible - 1), s = e[0], n = e.slice(e.length - r);
       return t`
         <nav aria-label="Breadcrumb">
           <ol class="breadcrumb-list">
-            ${this._renderItem(r, 0, !1)}
+            ${this._renderItem(s, 0, !1)}
             ${this._renderEllipsis()}
-            ${n.map((l, u) => {
-        const g = e.length - s + u, h = g === e.length - 1;
-        return this._renderItem(l, g, h);
+            ${n.map((l, g) => {
+        const u = e.length - r + g, h = u === e.length - 1;
+        return this._renderItem(l, u, h);
       })}
           </ol>
         </nav>
@@ -91,10 +91,10 @@ let o = class extends b {
     return t`
       <nav aria-label="Breadcrumb">
         <ol class="breadcrumb-list">
-          ${e.map((s, r) => {
-      const n = r === e.length - 1, l = r === 0, u = !l && !n && a;
+          ${e.map((r, s) => {
+      const n = s === e.length - 1, l = s === 0, g = !l && !n && a;
       return t`
-              ${this._renderItem(s, r, n, u ? "collapsible-middle" : "")}
+              ${this._renderItem(r, s, n, g ? "collapsible-middle" : "")}
               ${l && a ? this._renderEllipsis("ellipsis-item-auto") : c}
             `;
     })}
@@ -170,8 +170,8 @@ o.styles = [x, z, m`
     .crumb-link:focus-visible {
       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);
       outline: none;
     }
@@ -223,8 +223,8 @@ o.styles = [x, z, m`
     .ellipsis:focus-visible {
       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);
       outline: none;
     }