@cognivo/components 0.8.0 → 0.8.2

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

@@ -1,20 +1,20 @@
-import { css as n, LitElement as g, html as p } from "lit";
-import { property as s, customElement as u } from "lit/decorators.js";
-import { a as h, r as v } from "../../chunks/premium.css-9I4kHrsl.js";
-var f = Object.defineProperty, m = Object.getOwnPropertyDescriptor, e = (c, o, d, a) => {
-  for (var r = a > 1 ? void 0 : a ? m(o, d) : o, i = c.length - 1, l; i >= 0; i--)
-    (l = c[i]) && (r = (a ? l(o, d, r) : l(r)) || r);
-  return a && r && f(o, d, r), r;
+import { css as c, LitElement as p, nothing as u, html as h } from "lit";
+import { property as r, customElement as g } from "lit/decorators.js";
+import { a as m, r as v } from "../../chunks/premium.css-DHekUEUt.js";
+var f = Object.defineProperty, b = Object.getOwnPropertyDescriptor, o = (l, a, s, i) => {
+  for (var e = i > 1 ? void 0 : i ? b(a, s) : a, n = l.length - 1, d; n >= 0; n--)
+    (d = l[n]) && (e = (i ? d(a, s, e) : d(e)) || e);
+  return i && e && f(a, s, e), e;
 };
-let t = class extends g {
+let t = class extends p {
   constructor() {
     super(...arguments), this.direction = "row", this.gap = "sm", this.align = "start", this.attached = !1;
   }
   render() {
-    return p`<div role="group"><slot></slot></div>`;
+    return h`<div role="group" aria-label=${this.label ? this.label : u}><slot></slot></div>`;
   }
 };
-t.styles = [h, v, n`
+t.styles = [m, v, c`
     div[role="group"] {
       display: flex;
     }
@@ -35,53 +35,67 @@ t.styles = [h, v, n`
     :host([align="end"]) div[role="group"] { justify-content: flex-end; }
     :host([align="stretch"]) ::slotted(*) { flex: 1; }
 
-    /* Attached mode — buttons share borders */
-    :host([attached]) {
+    /* Attached mode — buttons share borders. The gap must be zeroed on the
+       flex CONTAINER (the div), not the host (not a flex parent), or the
+       gap-attribute rule above keeps an 8px gap and buttons aren't attached. */
+    :host([attached]) div[role="group"] {
       gap: 0;
     }
     :host([attached]) ::slotted(*) {
       border-radius: 0;
-      margin-left: -1px;
+      margin-left: calc(-1 * var(--cg-border-width-50));
+    }
+    /* Lift the hovered/focused button so its border + focus ring aren't
+       clipped under the next sibling (the -1px overlap stacks later siblings
+       on top). position:relative is required for z-index on flex children. */
+    :host([attached]) ::slotted(*:hover),
+    :host([attached]) ::slotted(*:focus),
+    :host([attached]) ::slotted(*:focus-within) {
+      position: relative;
+      z-index: 1;
     }
     :host([attached]) ::slotted(*:first-child) {
       margin-left: 0;
-      border-radius: var(--cg-border-radius-150) 0 0 var(--cg-border-radius-150);
+      border-radius: var(--cg-component-button-radius-md) 0 0 var(--cg-component-button-radius-md);
     }
     :host([attached]) ::slotted(*:last-child) {
-      border-radius: 0 var(--cg-border-radius-150) var(--cg-border-radius-150) 0;
+      border-radius: 0 var(--cg-component-button-radius-md) var(--cg-component-button-radius-md) 0;
     }
     :host([attached]) ::slotted(*:only-child) {
-      border-radius: var(--cg-border-radius-150);
+      border-radius: var(--cg-component-button-radius-md);
       margin-left: 0;
     }
 
     /* Attached vertical */
     :host([attached][direction="column"]) ::slotted(*) {
       margin-left: 0;
-      margin-top: -1px;
+      margin-top: calc(-1 * var(--cg-border-width-50));
     }
     :host([attached][direction="column"]) ::slotted(*:first-child) {
       margin-top: 0;
-      border-radius: var(--cg-border-radius-150) var(--cg-border-radius-150) 0 0;
+      border-radius: var(--cg-component-button-radius-md) var(--cg-component-button-radius-md) 0 0;
     }
     :host([attached][direction="column"]) ::slotted(*:last-child) {
-      border-radius: 0 0 var(--cg-border-radius-150) var(--cg-border-radius-150);
+      border-radius: 0 0 var(--cg-component-button-radius-md) var(--cg-component-button-radius-md);
     }
   `];
-e([
-  s({ reflect: !0 })
+o([
+  r({ reflect: !0 })
 ], t.prototype, "direction", 2);
-e([
-  s({ reflect: !0 })
+o([
+  r({ reflect: !0 })
 ], t.prototype, "gap", 2);
-e([
-  s({ reflect: !0 })
+o([
+  r({ reflect: !0 })
 ], t.prototype, "align", 2);
-e([
-  s({ type: Boolean, reflect: !0 })
+o([
+  r({ type: Boolean, reflect: !0 })
 ], t.prototype, "attached", 2);
-t = e([
-  u("cg-button-group")
+o([
+  r()
+], t.prototype, "label", 2);
+t = o([
+  g("cg-button-group")
 ], t);
 export {
   t as CgButtonGroup

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

@@ -1 +1 @@
-{"version":3,"file":"cg-button-group.js","sources":["../../../src/components/cg-button-group/cg-button-group.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBase, reducedMotion } from '../../styles/index.js';\n\n/**\n * <cg-button-group> — Groups buttons with optional attached mode.\n *\n * Features:\n * - Row or column direction\n * - Attached mode (no gap, shared border radius)\n * - Gap size control\n * - Alignment (start/center/end/stretch)\n * - ARIA group role\n */\n@customElement('cg-button-group')\nexport class CgButtonGroup extends LitElement {\n  static override styles = [hostBase, reducedMotion, css`\n    div[role=\"group\"] {\n      display: flex;\n    }\n\n    /* Direction */\n    :host([direction=\"row\"]) div[role=\"group\"] { flex-direction: row; }\n    :host([direction=\"column\"]) div[role=\"group\"] { flex-direction: column; width: 100%; }\n\n    /* Gap */\n    :host([gap=\"none\"]) div[role=\"group\"] { gap: 0; }\n    :host([gap=\"xs\"]) div[role=\"group\"] { gap: var(--cg-spacing-4); }\n    :host([gap=\"sm\"]) div[role=\"group\"] { gap: var(--cg-spacing-8); }\n    :host([gap=\"md\"]) div[role=\"group\"] { gap: var(--cg-spacing-12); }\n\n    /* Alignment */\n    :host([align=\"start\"]) div[role=\"group\"] { justify-content: flex-start; }\n    :host([align=\"center\"]) div[role=\"group\"] { justify-content: center; }\n    :host([align=\"end\"]) div[role=\"group\"] { justify-content: flex-end; }\n    :host([align=\"stretch\"]) ::slotted(*) { flex: 1; }\n\n    /* Attached mode — buttons share borders */\n    :host([attached]) {\n      gap: 0;\n    }\n    :host([attached]) ::slotted(*) {\n      border-radius: 0;\n      margin-left: -1px;\n    }\n    :host([attached]) ::slotted(*:first-child) {\n      margin-left: 0;\n      border-radius: var(--cg-border-radius-150) 0 0 var(--cg-border-radius-150);\n    }\n    :host([attached]) ::slotted(*:last-child) {\n      border-radius: 0 var(--cg-border-radius-150) var(--cg-border-radius-150) 0;\n    }\n    :host([attached]) ::slotted(*:only-child) {\n      border-radius: var(--cg-border-radius-150);\n      margin-left: 0;\n    }\n\n    /* Attached vertical */\n    :host([attached][direction=\"column\"]) ::slotted(*) {\n      margin-left: 0;\n      margin-top: -1px;\n    }\n    :host([attached][direction=\"column\"]) ::slotted(*:first-child) {\n      margin-top: 0;\n      border-radius: var(--cg-border-radius-150) var(--cg-border-radius-150) 0 0;\n    }\n    :host([attached][direction=\"column\"]) ::slotted(*:last-child) {\n      border-radius: 0 0 var(--cg-border-radius-150) var(--cg-border-radius-150);\n    }\n  `];\n\n  @property({ reflect: true }) direction: 'row' | 'column' = 'row';\n  @property({ reflect: true }) gap: 'none' | 'xs' | 'sm' | 'md' = 'sm';\n  @property({ reflect: true }) align: 'start' | 'center' | 'end' | 'stretch' = 'start';\n  @property({ type: Boolean, reflect: true }) attached = false;\n\n  override render() {\n    return html`<div role=\"group\"><slot></slot></div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap { 'cg-button-group': CgButtonGroup; }\n}\n"],"names":["CgButtonGroup","LitElement","html","hostBase","reducedMotion","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAeO,IAAMA,IAAN,cAA4BC,EAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA,GAwDwB,KAAA,YAA8B,OAC9B,KAAA,MAAmC,MACnC,KAAA,QAAgD,SACjC,KAAA,WAAW;AAAA,EAAA;AAAA,EAE9C,SAAS;AAChB,WAAOC;AAAA,EACT;AACF;AAhEaF,EACK,SAAS,CAACG,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,GAqDlD;AAE4BC,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAxDhBP,EAwDkB,WAAA,aAAA,CAAA;AACAM,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAzDhBP,EAyDkB,WAAA,OAAA,CAAA;AACAM,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GA1DhBP,EA0DkB,WAAA,SAAA,CAAA;AACeM,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA3D/BP,EA2DiC,WAAA,YAAA,CAAA;AA3DjCA,IAANM,EAAA;AAAA,EADNE,EAAc,iBAAiB;AAAA,GACnBR,CAAA;"}
+{"version":3,"file":"cg-button-group.js","sources":["../../../src/components/cg-button-group/cg-button-group.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-button-group> — Groups buttons with optional attached mode.\n *\n * Features:\n * - Row or column direction\n * - Attached mode (no gap, shared border radius)\n * - Gap size control\n * - Alignment (start/center/end/stretch)\n * - ARIA group role\n */\n@customElement('cg-button-group')\nexport class CgButtonGroup extends LitElement {\n  static override styles = [hostBase, reducedMotion, css`\n    div[role=\"group\"] {\n      display: flex;\n    }\n\n    /* Direction */\n    :host([direction=\"row\"]) div[role=\"group\"] { flex-direction: row; }\n    :host([direction=\"column\"]) div[role=\"group\"] { flex-direction: column; width: 100%; }\n\n    /* Gap */\n    :host([gap=\"none\"]) div[role=\"group\"] { gap: 0; }\n    :host([gap=\"xs\"]) div[role=\"group\"] { gap: var(--cg-spacing-4); }\n    :host([gap=\"sm\"]) div[role=\"group\"] { gap: var(--cg-spacing-8); }\n    :host([gap=\"md\"]) div[role=\"group\"] { gap: var(--cg-spacing-12); }\n\n    /* Alignment */\n    :host([align=\"start\"]) div[role=\"group\"] { justify-content: flex-start; }\n    :host([align=\"center\"]) div[role=\"group\"] { justify-content: center; }\n    :host([align=\"end\"]) div[role=\"group\"] { justify-content: flex-end; }\n    :host([align=\"stretch\"]) ::slotted(*) { flex: 1; }\n\n    /* Attached mode — buttons share borders. The gap must be zeroed on the\n       flex CONTAINER (the div), not the host (not a flex parent), or the\n       gap-attribute rule above keeps an 8px gap and buttons aren't attached. */\n    :host([attached]) div[role=\"group\"] {\n      gap: 0;\n    }\n    :host([attached]) ::slotted(*) {\n      border-radius: 0;\n      margin-left: calc(-1 * var(--cg-border-width-50));\n    }\n    /* Lift the hovered/focused button so its border + focus ring aren't\n       clipped under the next sibling (the -1px overlap stacks later siblings\n       on top). position:relative is required for z-index on flex children. */\n    :host([attached]) ::slotted(*:hover),\n    :host([attached]) ::slotted(*:focus),\n    :host([attached]) ::slotted(*:focus-within) {\n      position: relative;\n      z-index: 1;\n    }\n    :host([attached]) ::slotted(*:first-child) {\n      margin-left: 0;\n      border-radius: var(--cg-component-button-radius-md) 0 0 var(--cg-component-button-radius-md);\n    }\n    :host([attached]) ::slotted(*:last-child) {\n      border-radius: 0 var(--cg-component-button-radius-md) var(--cg-component-button-radius-md) 0;\n    }\n    :host([attached]) ::slotted(*:only-child) {\n      border-radius: var(--cg-component-button-radius-md);\n      margin-left: 0;\n    }\n\n    /* Attached vertical */\n    :host([attached][direction=\"column\"]) ::slotted(*) {\n      margin-left: 0;\n      margin-top: calc(-1 * var(--cg-border-width-50));\n    }\n    :host([attached][direction=\"column\"]) ::slotted(*:first-child) {\n      margin-top: 0;\n      border-radius: var(--cg-component-button-radius-md) var(--cg-component-button-radius-md) 0 0;\n    }\n    :host([attached][direction=\"column\"]) ::slotted(*:last-child) {\n      border-radius: 0 0 var(--cg-component-button-radius-md) var(--cg-component-button-radius-md);\n    }\n  `];\n\n  @property({ reflect: true }) direction: 'row' | 'column' = 'row';\n  @property({ reflect: true }) gap: 'none' | 'xs' | 'sm' | 'md' = 'sm';\n  @property({ reflect: true }) align: 'start' | 'center' | 'end' | 'stretch' = 'start';\n  @property({ type: Boolean, reflect: true }) attached = false;\n  /** Accessible name for the group landmark (e.g. \"Text alignment\"). */\n  @property() label?: string;\n\n  override render() {\n    return html`<div role=\"group\" aria-label=${this.label ? this.label : nothing}><slot></slot></div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap { 'cg-button-group': CgButtonGroup; }\n}\n"],"names":["CgButtonGroup","LitElement","html","nothing","hostBase","reducedMotion","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAeO,IAAMA,IAAN,cAA4BC,EAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA,GAmEwB,KAAA,YAA8B,OAC9B,KAAA,MAAmC,MACnC,KAAA,QAAgD,SACjC,KAAA,WAAW;AAAA,EAAA;AAAA,EAI9C,SAAS;AAChB,WAAOC,iCAAoC,KAAK,QAAQ,KAAK,QAAQC,CAAO;AAAA,EAC9E;AACF;AA7EaH,EACK,SAAS,CAACI,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,GAgElD;AAE4BC,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAnEhBR,EAmEkB,WAAA,aAAA,CAAA;AACAO,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GApEhBR,EAoEkB,WAAA,OAAA,CAAA;AACAO,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GArEhBR,EAqEkB,WAAA,SAAA,CAAA;AACeO,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAtE/BR,EAsEiC,WAAA,YAAA,CAAA;AAEhCO,EAAA;AAAA,EAAXC,EAAA;AAAS,GAxECR,EAwEC,WAAA,SAAA,CAAA;AAxEDA,IAANO,EAAA;AAAA,EADNE,EAAc,iBAAiB;AAAA,GACnBT,CAAA;"}

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

@@ -35,6 +35,10 @@ export declare class CgCalendar extends LitElement {
     private _isToday;
     private _isSameDay;
     private _isDisabled;
+    /** True when the entire previous month is before `min` (nothing to show). */
+    private _isPrevMonthOutOfBounds;
+    /** True when the entire next month is after `max` (nothing to show). */
+    private _isNextMonthOutOfBounds;
     private _prevMonth;
     private _nextMonth;
     private _onGridKeydown;

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

@@ -1 +1 @@
-{"version":3,"file":"cg-calendar.d.ts","sourceRoot":"","sources":["../../../src/components/cg-calendar/cg-calendar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C;;;;;;;;;;;;GAYG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BAiInB;IAEH,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAAC,CAAmB;;IAS1B,KAAK,SAAM;IACe,QAAQ,SAAM;IACxC,IAAI,EAAE,QAAQ,GAAG,OAAO,GAAG,UAAU,CAAY;IACjD,GAAG,SAAM;IACT,GAAG,SAAM;IACoC,YAAY,EAAE,CAAC,GAAG,CAAC,CAAK;IACrE,IAAI,SAAM;IAEb,OAAO,CAAC,YAAY,CAA4B;IAChD,OAAO,CAAC,aAAa,CAAyB;IAE9C,iBAAiB,IAAI,IAAI;IAWzB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAcrD,OAAO,CAAC,UAAU;IAWlB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,kBAAkB;IAK1B,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,cAAc;IAwBtB,OAAO,CAAC,WAAW;IA8BnB,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,cAAc;IAuBb,MAAM;CA0DhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
+{"version":3,"file":"cg-calendar.d.ts","sourceRoot":"","sources":["../../../src/components/cg-calendar/cg-calendar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C;;;;;;;;;;;;GAYG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BAqInB;IAEH,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAAC,CAAmB;;IAS1B,KAAK,SAAM;IACe,QAAQ,SAAM;IACxC,IAAI,EAAE,QAAQ,GAAG,OAAO,GAAG,UAAU,CAAY;IACjD,GAAG,SAAM;IACT,GAAG,SAAM;IACoC,YAAY,EAAE,CAAC,GAAG,CAAC,CAAK;IACrE,IAAI,SAAM;IAEb,OAAO,CAAC,YAAY,CAA4B;IAChD,OAAO,CAAC,aAAa,CAAyB;IAE9C,iBAAiB,IAAI,IAAI;IAWzB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAcrD,OAAO,CAAC,UAAU;IAWlB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,kBAAkB;IAK1B,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,WAAW;IAYnB,6EAA6E;IAC7E,OAAO,CAAC,uBAAuB;IAQ/B,wEAAwE;IACxE,OAAO,CAAC,uBAAuB;IAQ/B,OAAO,CAAC,UAAU;IAUlB,OAAO,CAAC,UAAU;IAUlB,OAAO,CAAC,cAAc;IAwBtB,OAAO,CAAC,WAAW;IA8BnB,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,cAAc;IAuBb,MAAM;CA0DhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

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

@@ -1,6 +1,6 @@
-import { css as h, LitElement as u, html as d } from "lit";
-import { property as c, state as g, customElement as p } from "lit/decorators.js";
-import { h as f, r as v } from "../../chunks/premium.css-9I4kHrsl.js";
+import { css as g, LitElement as u, html as d } from "lit";
+import { property as c, state as h, customElement as p } from "lit/decorators.js";
+import { h as f, r as v } from "../../chunks/premium.css-DHekUEUt.js";
 var y = Object.defineProperty, m = Object.getOwnPropertyDescriptor, i = (t, e, s, r) => {
   for (var a = r > 1 ? void 0 : r ? m(e, s) : e, o = t.length - 1, l; o >= 0; o--)
     (l = t[o]) && (a = (r ? l(e, s, a) : l(a)) || a);
@@ -57,11 +57,23 @@ let n = class extends u {
     }
     return !1;
   }
+  /** True when the entire previous month is before `min` (nothing to show). */
+  _isPrevMonthOutOfBounds() {
+    if (!this.min) return !1;
+    const t = this._parseDate(this.min);
+    return t ? new Date(this._displayYear, this._displayMonth, 0) < t : !1;
+  }
+  /** True when the entire next month is after `max` (nothing to show). */
+  _isNextMonthOutOfBounds() {
+    if (!this.max) return !1;
+    const t = this._parseDate(this.max);
+    return t ? new Date(this._displayYear, this._displayMonth + 1, 1) > t : !1;
+  }
   _prevMonth() {
-    this._displayMonth === 0 ? (this._displayMonth = 11, this._displayYear--) : this._displayMonth--;
+    this._isPrevMonthOutOfBounds() || (this._displayMonth === 0 ? (this._displayMonth = 11, this._displayYear--) : this._displayMonth--);
   }
   _nextMonth() {
-    this._displayMonth === 11 ? (this._displayMonth = 0, this._displayYear++) : this._displayMonth++;
+    this._isNextMonthOutOfBounds() || (this._displayMonth === 11 ? (this._displayMonth = 0, this._displayYear++) : this._displayMonth++);
   }
   _onGridKeydown(t) {
     const e = t.target;
@@ -149,13 +161,13 @@ let n = class extends u {
     return d`
       <div class="calendar" role="grid" aria-label=${`${this._getMonthName()} ${this._displayYear}`}>
         <div class="header">
-          <button class="nav-btn" type="button" aria-label="Previous month" @click=${this._prevMonth}>
+          <button class="nav-btn" type="button" aria-label="Previous month" ?disabled=${this._isPrevMonthOutOfBounds()} @click=${this._prevMonth}>
             <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
               <path d="M9 3L5 7l4 4"/>
             </svg>
           </button>
           <div class="month-year">${this._getMonthName()} ${this._displayYear}</div>
-          <button class="nav-btn" type="button" aria-label="Next month" @click=${this._nextMonth}>
+          <button class="nav-btn" type="button" aria-label="Next month" ?disabled=${this._isNextMonthOutOfBounds()} @click=${this._nextMonth}>
             <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
               <path d="M5 3l4 4-4 4"/>
             </svg>
@@ -179,7 +191,7 @@ let n = class extends u {
     `;
   }
 };
-n.styles = [f, v, h`
+n.styles = [f, v, g`
     :host { display: inline-block; }
 
     .calendar {
@@ -211,6 +223,10 @@ n.styles = [f, v, h`
         transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
     }
     .nav-btn:hover { background: var(--cg-color-action-tertiary-background-hover); }
+    .nav-btn:disabled {
+      opacity: 0.3;
+      cursor: not-allowed;
+    }
     .nav-btn:focus-visible {
       outline: none;
       box-shadow:
@@ -281,8 +297,8 @@ n.styles = [f, v, h`
       opacity: 0.5;
     }
     .day.today:not(.selected):not(.range-start):not(.range-end) {
-      box-shadow: inset 0 0 0 var(--cg-border-width-50) var(--cg-color-action-primary-background-default);
-      color: var(--cg-color-action-primary-background-default);
+      box-shadow: inset 0 0 0 var(--cg-border-width-50) var(--cg-color-action-primary-border-default);
+      color: var(--cg-color-action-primary-border-default);
       font-weight: var(--cg-font-weight-semibold);
     }
     .day.selected {
@@ -332,10 +348,10 @@ i([
   c()
 ], n.prototype, "name", 2);
 i([
-  g()
+  h()
 ], n.prototype, "_displayYear", 2);
 i([
-  g()
+  h()
 ], n.prototype, "_displayMonth", 2);
 n = i([
   p("cg-calendar")

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

@@ -1 +1 @@
-{"version":3,"file":"cg-calendar.js","sources":["../../../src/components/cg-calendar/cg-calendar.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/**\n * @element cg-calendar\n * Full month calendar view with single/range/multiple selection modes,\n * keyboard navigation, and min/max bounds.\n *\n * @example\n * ```html\n * <cg-calendar value=\"2026-04-15\"></cg-calendar>\n * <cg-calendar mode=\"range\" value=\"2026-04-10\" range-end=\"2026-04-20\"></cg-calendar>\n * ```\n *\n * @fires {CustomEvent<{value: string, rangeEnd?: string}>} cg-calendar-change\n */\n@customElement('cg-calendar')\nexport class CgCalendar extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host { display: inline-block; }\n\n    .calendar {\n      padding: var(--cg-spacing-16);\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-component-calendar-radius);\n    }\n\n    .header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      margin-bottom: var(--cg-spacing-12);\n    }\n    .nav-btn {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--cg-spacing-32);\n      height: var(--cg-spacing-32);\n      border: none;\n      background: transparent;\n      color: var(--cg-color-surface-base-text);\n      cursor: pointer;\n      border-radius: var(--cg-border-radius-100);\n      transition:\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .nav-btn:hover { background: var(--cg-color-action-tertiary-background-hover); }\n    .nav-btn:focus-visible {\n      outline: none;\n      box-shadow:\n        0 0 0 var(--cg-focus-ring-offset) var(--cg-color-focus-ring-offset),\n        0 0 0 calc(var(--cg-focus-ring-offset) + var(--cg-focus-ring-width)) var(--cg-color-focus-ring);\n    }\n\n    .month-year {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    .weekdays {\n      display: grid;\n      grid-template-columns: repeat(7, var(--cg-component-calendar-cell-size));\n      gap: var(--cg-spacing-2);\n      margin-bottom: var(--cg-spacing-8);\n    }\n    .weekday {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: var(--cg-spacing-32);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-container-outlined);\n    }\n\n    .days {\n      display: grid;\n      grid-template-columns: repeat(7, var(--cg-component-calendar-cell-size));\n      gap: var(--cg-spacing-2);\n    }\n    .day {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--cg-component-calendar-cell-size);\n      height: var(--cg-component-calendar-cell-size);\n      border: none;\n      background: transparent;\n      color: var(--cg-color-surface-base-text);\n      font-size: var(--cg-font-size-sm);\n      cursor: pointer;\n      border-radius: var(--cg-border-radius-full);\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        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .day:hover:not(:disabled) {\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    .day:active:not(:disabled) {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n    .nav-btn:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .day:focus-visible {\n      outline: none;\n      box-shadow:\n        0 0 0 var(--cg-focus-ring-offset) var(--cg-color-focus-ring-offset),\n        0 0 0 calc(var(--cg-focus-ring-offset) + var(--cg-focus-ring-width)) var(--cg-color-focus-ring);\n    }\n    .day.outside {\n      color: var(--cg-color-surface-container-outlined);\n      opacity: 0.5;\n    }\n    .day.today:not(.selected):not(.range-start):not(.range-end) {\n      box-shadow: inset 0 0 0 var(--cg-border-width-50) var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-background-default);\n      font-weight: var(--cg-font-weight-semibold);\n    }\n    .day.selected {\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-text-default);\n      font-weight: var(--cg-font-weight-semibold);\n    }\n    .day.in-range {\n      background: var(--cg-overlay-accent-light);\n      border-radius: 0;\n    }\n    .day.range-start {\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-text-default);\n      border-radius: var(--cg-border-radius-100) 0 0 var(--cg-border-radius-100);\n    }\n    .day.range-end {\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-text-default);\n      border-radius: 0 var(--cg-border-radius-100) var(--cg-border-radius-100) 0;\n    }\n    .day:disabled {\n      opacity: 0.3;\n      cursor: not-allowed;\n    }\n  `];\n\n  static formAssociated = true;\n  private _internals?: ElementInternals;\n\n  constructor() {\n    super();\n    if (typeof this.attachInternals === 'function') {\n      this._internals = this.attachInternals();\n    }\n  }\n\n  @property() value = '';\n  @property({ attribute: 'range-end' }) rangeEnd = '';\n  @property() mode: 'single' | 'range' | 'multiple' = 'single';\n  @property() min = '';\n  @property() max = '';\n  @property({ type: Number, attribute: 'week-starts-on' }) weekStartsOn: 0 | 1 = 0;\n  @property() name = '';\n\n  @state() private _displayYear = new Date().getFullYear();\n  @state() private _displayMonth = new Date().getMonth();\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (this.value) {\n      const d = this._parseDate(this.value);\n      if (d) {\n        this._displayYear = d.getFullYear();\n        this._displayMonth = d.getMonth();\n      }\n    }\n  }\n\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('value')) {\n      this._internals?.setFormValue(this.value);\n      // Jump to the month containing the new value\n      if (this.value) {\n        const d = this._parseDate(this.value);\n        if (d) {\n          this._displayYear = d.getFullYear();\n          this._displayMonth = d.getMonth();\n        }\n      }\n    }\n  }\n\n  private _parseDate(iso: string): Date | null {\n    if (!iso) return null;\n    const parts = iso.split('-');\n    if (parts.length !== 3) return null;\n    const year = parseInt(parts[0]!, 10);\n    const month = parseInt(parts[1]!, 10) - 1;\n    const day = parseInt(parts[2]!, 10);\n    if (isNaN(year) || isNaN(month) || isNaN(day)) return null;\n    return new Date(year, month, day);\n  }\n\n  private _formatISO(date: Date): string {\n    const y = date.getFullYear();\n    const m = String(date.getMonth() + 1).padStart(2, '0');\n    const d = String(date.getDate()).padStart(2, '0');\n    return `${y}-${m}-${d}`;\n  }\n\n  private _getDaysInMonth(year: number, month: number): number {\n    return new Date(year, month + 1, 0).getDate();\n  }\n\n  private _getFirstDayOfWeek(year: number, month: number): number {\n    const day = new Date(year, month, 1).getDay();\n    return (day - this.weekStartsOn + 7) % 7;\n  }\n\n  private _isToday(date: Date): boolean {\n    const today = new Date();\n    return date.getFullYear() === today.getFullYear() &&\n           date.getMonth() === today.getMonth() &&\n           date.getDate() === today.getDate();\n  }\n\n  private _isSameDay(a: Date, b: Date): boolean {\n    return a.getFullYear() === b.getFullYear() &&\n           a.getMonth() === b.getMonth() &&\n           a.getDate() === b.getDate();\n  }\n\n  private _isDisabled(date: Date): boolean {\n    if (this.min) {\n      const min = this._parseDate(this.min);\n      if (min && date < min) return true;\n    }\n    if (this.max) {\n      const max = this._parseDate(this.max);\n      if (max && date > max) return true;\n    }\n    return false;\n  }\n\n  private _prevMonth(): void {\n    if (this._displayMonth === 0) {\n      this._displayMonth = 11;\n      this._displayYear--;\n    } else {\n      this._displayMonth--;\n    }\n  }\n\n  private _nextMonth(): void {\n    if (this._displayMonth === 11) {\n      this._displayMonth = 0;\n      this._displayYear++;\n    } else {\n      this._displayMonth++;\n    }\n  }\n\n  private _onGridKeydown(e: KeyboardEvent): void {\n    const target = e.target as HTMLElement;\n    if (!target || !target.classList.contains('day')) return;\n    const buttons = Array.from(\n      this.shadowRoot?.querySelectorAll<HTMLButtonElement>('.day:not(:disabled)') ?? [],\n    );\n    const idx = buttons.indexOf(target as HTMLButtonElement);\n    if (idx < 0) return;\n    let next = idx;\n    switch (e.key) {\n      case 'ArrowLeft': next = Math.max(0, idx - 1); break;\n      case 'ArrowRight': next = Math.min(buttons.length - 1, idx + 1); break;\n      case 'ArrowUp': next = Math.max(0, idx - 7); break;\n      case 'ArrowDown': next = Math.min(buttons.length - 1, idx + 7); break;\n      case 'Home': next = 0; break;\n      case 'End': next = buttons.length - 1; break;\n      case 'PageUp': e.preventDefault(); this._prevMonth(); return;\n      case 'PageDown': e.preventDefault(); this._nextMonth(); return;\n      default: return;\n    }\n    e.preventDefault();\n    buttons[next]?.focus();\n  }\n\n  private _selectDate(date: Date): void {\n    if (this._isDisabled(date)) return;\n    const iso = this._formatISO(date);\n\n    if (this.mode === 'range') {\n      if (!this.value || (this.value && this.rangeEnd)) {\n        // Start new range\n        this.value = iso;\n        this.rangeEnd = '';\n      } else {\n        // Complete range\n        const start = this._parseDate(this.value);\n        if (start && date < start) {\n          this.rangeEnd = this.value;\n          this.value = iso;\n        } else {\n          this.rangeEnd = iso;\n        }\n      }\n    } else {\n      this.value = iso;\n    }\n\n    this.dispatchEvent(new CustomEvent('cg-calendar-change', {\n      detail: { value: this.value, rangeEnd: this.rangeEnd },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _getWeekdayNames(): string[] {\n    const names = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];\n    if (this.weekStartsOn === 1) {\n      return [...names.slice(1), names[0]!];\n    }\n    return names;\n  }\n\n  private _getMonthName(): string {\n    return new Date(this._displayYear, this._displayMonth, 1).toLocaleString('default', { month: 'long' });\n  }\n\n  private _getDayClasses(date: Date, isOutside: boolean): string {\n    const classes = ['day'];\n    if (isOutside) classes.push('outside');\n    if (this._isToday(date)) classes.push('today');\n\n    const selected = this._parseDate(this.value);\n    const rangeEnd = this._parseDate(this.rangeEnd);\n\n    if (this.mode === 'range') {\n      if (selected && this._isSameDay(date, selected)) {\n        classes.push(rangeEnd ? 'range-start' : 'selected');\n      } else if (rangeEnd && this._isSameDay(date, rangeEnd)) {\n        classes.push('range-end');\n      } else if (selected && rangeEnd && date > selected && date < rangeEnd) {\n        classes.push('in-range');\n      }\n    } else {\n      if (selected && this._isSameDay(date, selected)) classes.push('selected');\n    }\n\n    return classes.join(' ');\n  }\n\n  override render() {\n    const daysInMonth = this._getDaysInMonth(this._displayYear, this._displayMonth);\n    const firstDayOffset = this._getFirstDayOfWeek(this._displayYear, this._displayMonth);\n    const prevDaysInMonth = this._getDaysInMonth(this._displayYear, this._displayMonth - 1);\n\n    const cells: Array<{ date: Date; outside: boolean }> = [];\n\n    // Previous month outside days\n    for (let i = firstDayOffset - 1; i >= 0; i--) {\n      const date = new Date(this._displayYear, this._displayMonth - 1, prevDaysInMonth - i);\n      cells.push({ date, outside: true });\n    }\n\n    // Current month days\n    for (let i = 1; i <= daysInMonth; i++) {\n      const date = new Date(this._displayYear, this._displayMonth, i);\n      cells.push({ date, outside: false });\n    }\n\n    // Next month outside days (fill to 42 cells = 6 rows)\n    while (cells.length < 42) {\n      const lastDate = cells[cells.length - 1]!.date;\n      const date = new Date(lastDate.getFullYear(), lastDate.getMonth(), lastDate.getDate() + 1);\n      cells.push({ date, outside: true });\n    }\n\n    return html`\n      <div class=\"calendar\" role=\"grid\" aria-label=${`${this._getMonthName()} ${this._displayYear}`}>\n        <div class=\"header\">\n          <button class=\"nav-btn\" type=\"button\" aria-label=\"Previous month\" @click=${this._prevMonth}>\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <path d=\"M9 3L5 7l4 4\"/>\n            </svg>\n          </button>\n          <div class=\"month-year\">${this._getMonthName()} ${this._displayYear}</div>\n          <button class=\"nav-btn\" type=\"button\" aria-label=\"Next month\" @click=${this._nextMonth}>\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <path d=\"M5 3l4 4-4 4\"/>\n            </svg>\n          </button>\n        </div>\n        <div class=\"weekdays\">\n          ${this._getWeekdayNames().map(name => html`<div class=\"weekday\">${name}</div>`)}\n        </div>\n        <div class=\"days\" @keydown=${this._onGridKeydown}>\n          ${cells.map(cell => html`\n            <button\n              class=${this._getDayClasses(cell.date, cell.outside)}\n              role=\"gridcell\"\n              aria-selected=${this._parseDate(this.value) && this._isSameDay(cell.date, this._parseDate(this.value)!) ? 'true' : 'false'}\n              ?disabled=${this._isDisabled(cell.date)}\n              @click=${() => this._selectDate(cell.date)}\n            >${cell.date.getDate()}</button>\n          `)}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-calendar': CgCalendar;\n  }\n}\n"],"names":["CgCalendar","LitElement","d","changed","iso","parts","year","month","day","date","y","m","today","a","b","min","max","e","target","buttons","idx","next","start","names","isOutside","classes","selected","rangeEnd","daysInMonth","firstDayOffset","prevDaysInMonth","cells","i","lastDate","html","name","cell","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}
+{"version":3,"file":"cg-calendar.js","sources":["../../../src/components/cg-calendar/cg-calendar.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/**\n * @element cg-calendar\n * Full month calendar view with single/range/multiple selection modes,\n * keyboard navigation, and min/max bounds.\n *\n * @example\n * ```html\n * <cg-calendar value=\"2026-04-15\"></cg-calendar>\n * <cg-calendar mode=\"range\" value=\"2026-04-10\" range-end=\"2026-04-20\"></cg-calendar>\n * ```\n *\n * @fires {CustomEvent<{value: string, rangeEnd?: string}>} cg-calendar-change\n */\n@customElement('cg-calendar')\nexport class CgCalendar extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host { display: inline-block; }\n\n    .calendar {\n      padding: var(--cg-spacing-16);\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-component-calendar-radius);\n    }\n\n    .header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      margin-bottom: var(--cg-spacing-12);\n    }\n    .nav-btn {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--cg-spacing-32);\n      height: var(--cg-spacing-32);\n      border: none;\n      background: transparent;\n      color: var(--cg-color-surface-base-text);\n      cursor: pointer;\n      border-radius: var(--cg-border-radius-100);\n      transition:\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .nav-btn:hover { background: var(--cg-color-action-tertiary-background-hover); }\n    .nav-btn:disabled {\n      opacity: 0.3;\n      cursor: not-allowed;\n    }\n    .nav-btn:focus-visible {\n      outline: none;\n      box-shadow:\n        0 0 0 var(--cg-focus-ring-offset) var(--cg-color-focus-ring-offset),\n        0 0 0 calc(var(--cg-focus-ring-offset) + var(--cg-focus-ring-width)) var(--cg-color-focus-ring);\n    }\n\n    .month-year {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    .weekdays {\n      display: grid;\n      grid-template-columns: repeat(7, var(--cg-component-calendar-cell-size));\n      gap: var(--cg-spacing-2);\n      margin-bottom: var(--cg-spacing-8);\n    }\n    .weekday {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: var(--cg-spacing-32);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-container-outlined);\n    }\n\n    .days {\n      display: grid;\n      grid-template-columns: repeat(7, var(--cg-component-calendar-cell-size));\n      gap: var(--cg-spacing-2);\n    }\n    .day {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--cg-component-calendar-cell-size);\n      height: var(--cg-component-calendar-cell-size);\n      border: none;\n      background: transparent;\n      color: var(--cg-color-surface-base-text);\n      font-size: var(--cg-font-size-sm);\n      cursor: pointer;\n      border-radius: var(--cg-border-radius-full);\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        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .day:hover:not(:disabled) {\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    .day:active:not(:disabled) {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n    .nav-btn:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .day:focus-visible {\n      outline: none;\n      box-shadow:\n        0 0 0 var(--cg-focus-ring-offset) var(--cg-color-focus-ring-offset),\n        0 0 0 calc(var(--cg-focus-ring-offset) + var(--cg-focus-ring-width)) var(--cg-color-focus-ring);\n    }\n    .day.outside {\n      color: var(--cg-color-surface-container-outlined);\n      opacity: 0.5;\n    }\n    .day.today:not(.selected):not(.range-start):not(.range-end) {\n      box-shadow: inset 0 0 0 var(--cg-border-width-50) var(--cg-color-action-primary-border-default);\n      color: var(--cg-color-action-primary-border-default);\n      font-weight: var(--cg-font-weight-semibold);\n    }\n    .day.selected {\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-text-default);\n      font-weight: var(--cg-font-weight-semibold);\n    }\n    .day.in-range {\n      background: var(--cg-overlay-accent-light);\n      border-radius: 0;\n    }\n    .day.range-start {\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-text-default);\n      border-radius: var(--cg-border-radius-100) 0 0 var(--cg-border-radius-100);\n    }\n    .day.range-end {\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-text-default);\n      border-radius: 0 var(--cg-border-radius-100) var(--cg-border-radius-100) 0;\n    }\n    .day:disabled {\n      opacity: 0.3;\n      cursor: not-allowed;\n    }\n  `];\n\n  static formAssociated = true;\n  private _internals?: ElementInternals;\n\n  constructor() {\n    super();\n    if (typeof this.attachInternals === 'function') {\n      this._internals = this.attachInternals();\n    }\n  }\n\n  @property() value = '';\n  @property({ attribute: 'range-end' }) rangeEnd = '';\n  @property() mode: 'single' | 'range' | 'multiple' = 'single';\n  @property() min = '';\n  @property() max = '';\n  @property({ type: Number, attribute: 'week-starts-on' }) weekStartsOn: 0 | 1 = 0;\n  @property() name = '';\n\n  @state() private _displayYear = new Date().getFullYear();\n  @state() private _displayMonth = new Date().getMonth();\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (this.value) {\n      const d = this._parseDate(this.value);\n      if (d) {\n        this._displayYear = d.getFullYear();\n        this._displayMonth = d.getMonth();\n      }\n    }\n  }\n\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('value')) {\n      this._internals?.setFormValue(this.value);\n      // Jump to the month containing the new value\n      if (this.value) {\n        const d = this._parseDate(this.value);\n        if (d) {\n          this._displayYear = d.getFullYear();\n          this._displayMonth = d.getMonth();\n        }\n      }\n    }\n  }\n\n  private _parseDate(iso: string): Date | null {\n    if (!iso) return null;\n    const parts = iso.split('-');\n    if (parts.length !== 3) return null;\n    const year = parseInt(parts[0]!, 10);\n    const month = parseInt(parts[1]!, 10) - 1;\n    const day = parseInt(parts[2]!, 10);\n    if (isNaN(year) || isNaN(month) || isNaN(day)) return null;\n    return new Date(year, month, day);\n  }\n\n  private _formatISO(date: Date): string {\n    const y = date.getFullYear();\n    const m = String(date.getMonth() + 1).padStart(2, '0');\n    const d = String(date.getDate()).padStart(2, '0');\n    return `${y}-${m}-${d}`;\n  }\n\n  private _getDaysInMonth(year: number, month: number): number {\n    return new Date(year, month + 1, 0).getDate();\n  }\n\n  private _getFirstDayOfWeek(year: number, month: number): number {\n    const day = new Date(year, month, 1).getDay();\n    return (day - this.weekStartsOn + 7) % 7;\n  }\n\n  private _isToday(date: Date): boolean {\n    const today = new Date();\n    return date.getFullYear() === today.getFullYear() &&\n           date.getMonth() === today.getMonth() &&\n           date.getDate() === today.getDate();\n  }\n\n  private _isSameDay(a: Date, b: Date): boolean {\n    return a.getFullYear() === b.getFullYear() &&\n           a.getMonth() === b.getMonth() &&\n           a.getDate() === b.getDate();\n  }\n\n  private _isDisabled(date: Date): boolean {\n    if (this.min) {\n      const min = this._parseDate(this.min);\n      if (min && date < min) return true;\n    }\n    if (this.max) {\n      const max = this._parseDate(this.max);\n      if (max && date > max) return true;\n    }\n    return false;\n  }\n\n  /** True when the entire previous month is before `min` (nothing to show). */\n  private _isPrevMonthOutOfBounds(): boolean {\n    if (!this.min) return false;\n    const min = this._parseDate(this.min);\n    if (!min) return false;\n    const lastDayPrev = new Date(this._displayYear, this._displayMonth, 0);\n    return lastDayPrev < min;\n  }\n\n  /** True when the entire next month is after `max` (nothing to show). */\n  private _isNextMonthOutOfBounds(): boolean {\n    if (!this.max) return false;\n    const max = this._parseDate(this.max);\n    if (!max) return false;\n    const firstDayNext = new Date(this._displayYear, this._displayMonth + 1, 1);\n    return firstDayNext > max;\n  }\n\n  private _prevMonth(): void {\n    if (this._isPrevMonthOutOfBounds()) return;\n    if (this._displayMonth === 0) {\n      this._displayMonth = 11;\n      this._displayYear--;\n    } else {\n      this._displayMonth--;\n    }\n  }\n\n  private _nextMonth(): void {\n    if (this._isNextMonthOutOfBounds()) return;\n    if (this._displayMonth === 11) {\n      this._displayMonth = 0;\n      this._displayYear++;\n    } else {\n      this._displayMonth++;\n    }\n  }\n\n  private _onGridKeydown(e: KeyboardEvent): void {\n    const target = e.target as HTMLElement;\n    if (!target || !target.classList.contains('day')) return;\n    const buttons = Array.from(\n      this.shadowRoot?.querySelectorAll<HTMLButtonElement>('.day:not(:disabled)') ?? [],\n    );\n    const idx = buttons.indexOf(target as HTMLButtonElement);\n    if (idx < 0) return;\n    let next = idx;\n    switch (e.key) {\n      case 'ArrowLeft': next = Math.max(0, idx - 1); break;\n      case 'ArrowRight': next = Math.min(buttons.length - 1, idx + 1); break;\n      case 'ArrowUp': next = Math.max(0, idx - 7); break;\n      case 'ArrowDown': next = Math.min(buttons.length - 1, idx + 7); break;\n      case 'Home': next = 0; break;\n      case 'End': next = buttons.length - 1; break;\n      case 'PageUp': e.preventDefault(); this._prevMonth(); return;\n      case 'PageDown': e.preventDefault(); this._nextMonth(); return;\n      default: return;\n    }\n    e.preventDefault();\n    buttons[next]?.focus();\n  }\n\n  private _selectDate(date: Date): void {\n    if (this._isDisabled(date)) return;\n    const iso = this._formatISO(date);\n\n    if (this.mode === 'range') {\n      if (!this.value || (this.value && this.rangeEnd)) {\n        // Start new range\n        this.value = iso;\n        this.rangeEnd = '';\n      } else {\n        // Complete range\n        const start = this._parseDate(this.value);\n        if (start && date < start) {\n          this.rangeEnd = this.value;\n          this.value = iso;\n        } else {\n          this.rangeEnd = iso;\n        }\n      }\n    } else {\n      this.value = iso;\n    }\n\n    this.dispatchEvent(new CustomEvent('cg-calendar-change', {\n      detail: { value: this.value, rangeEnd: this.rangeEnd },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _getWeekdayNames(): string[] {\n    const names = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];\n    if (this.weekStartsOn === 1) {\n      return [...names.slice(1), names[0]!];\n    }\n    return names;\n  }\n\n  private _getMonthName(): string {\n    return new Date(this._displayYear, this._displayMonth, 1).toLocaleString('default', { month: 'long' });\n  }\n\n  private _getDayClasses(date: Date, isOutside: boolean): string {\n    const classes = ['day'];\n    if (isOutside) classes.push('outside');\n    if (this._isToday(date)) classes.push('today');\n\n    const selected = this._parseDate(this.value);\n    const rangeEnd = this._parseDate(this.rangeEnd);\n\n    if (this.mode === 'range') {\n      if (selected && this._isSameDay(date, selected)) {\n        classes.push(rangeEnd ? 'range-start' : 'selected');\n      } else if (rangeEnd && this._isSameDay(date, rangeEnd)) {\n        classes.push('range-end');\n      } else if (selected && rangeEnd && date > selected && date < rangeEnd) {\n        classes.push('in-range');\n      }\n    } else {\n      if (selected && this._isSameDay(date, selected)) classes.push('selected');\n    }\n\n    return classes.join(' ');\n  }\n\n  override render() {\n    const daysInMonth = this._getDaysInMonth(this._displayYear, this._displayMonth);\n    const firstDayOffset = this._getFirstDayOfWeek(this._displayYear, this._displayMonth);\n    const prevDaysInMonth = this._getDaysInMonth(this._displayYear, this._displayMonth - 1);\n\n    const cells: Array<{ date: Date; outside: boolean }> = [];\n\n    // Previous month outside days\n    for (let i = firstDayOffset - 1; i >= 0; i--) {\n      const date = new Date(this._displayYear, this._displayMonth - 1, prevDaysInMonth - i);\n      cells.push({ date, outside: true });\n    }\n\n    // Current month days\n    for (let i = 1; i <= daysInMonth; i++) {\n      const date = new Date(this._displayYear, this._displayMonth, i);\n      cells.push({ date, outside: false });\n    }\n\n    // Next month outside days (fill to 42 cells = 6 rows)\n    while (cells.length < 42) {\n      const lastDate = cells[cells.length - 1]!.date;\n      const date = new Date(lastDate.getFullYear(), lastDate.getMonth(), lastDate.getDate() + 1);\n      cells.push({ date, outside: true });\n    }\n\n    return html`\n      <div class=\"calendar\" role=\"grid\" aria-label=${`${this._getMonthName()} ${this._displayYear}`}>\n        <div class=\"header\">\n          <button class=\"nav-btn\" type=\"button\" aria-label=\"Previous month\" ?disabled=${this._isPrevMonthOutOfBounds()} @click=${this._prevMonth}>\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <path d=\"M9 3L5 7l4 4\"/>\n            </svg>\n          </button>\n          <div class=\"month-year\">${this._getMonthName()} ${this._displayYear}</div>\n          <button class=\"nav-btn\" type=\"button\" aria-label=\"Next month\" ?disabled=${this._isNextMonthOutOfBounds()} @click=${this._nextMonth}>\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <path d=\"M5 3l4 4-4 4\"/>\n            </svg>\n          </button>\n        </div>\n        <div class=\"weekdays\">\n          ${this._getWeekdayNames().map(name => html`<div class=\"weekday\">${name}</div>`)}\n        </div>\n        <div class=\"days\" @keydown=${this._onGridKeydown}>\n          ${cells.map(cell => html`\n            <button\n              class=${this._getDayClasses(cell.date, cell.outside)}\n              role=\"gridcell\"\n              aria-selected=${this._parseDate(this.value) && this._isSameDay(cell.date, this._parseDate(this.value)!) ? 'true' : 'false'}\n              ?disabled=${this._isDisabled(cell.date)}\n              @click=${() => this._selectDate(cell.date)}\n            >${cell.date.getDate()}</button>\n          `)}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-calendar': CgCalendar;\n  }\n}\n"],"names":["CgCalendar","LitElement","d","changed","iso","parts","year","month","day","date","y","m","today","a","b","min","max","e","target","buttons","idx","next","start","names","isOutside","classes","selected","rangeEnd","daysInMonth","firstDayOffset","prevDaysInMonth","cells","i","lastDate","html","name","cell","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"cg-callout.d.ts","sourceRoot":"","sources":["../../../src/components/cg-callout/cg-callout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAIrD;;;;;;;;GAQG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,4BA8GnB;IAE0B,OAAO,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAU;IACxE,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IAC7D,KAAK,SAAM;IACpB,WAAW,SAAM;IACA,WAAW,UAAS;IAExC,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,WAAW,CAAS;IAErC,OAAO,CAAC,aAAa,CAAK;IAE1B,OAAO,CAAC,UAAU,CAMhB;IAEO,oBAAoB;IAK7B,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,QAAQ;IAUP,MAAM;CA8BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}
+{"version":3,"file":"cg-callout.d.ts","sourceRoot":"","sources":["../../../src/components/cg-callout/cg-callout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAIrD;;;;;;;;GAQG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,4BA+GnB;IAE0B,OAAO,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAU;IACxE,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IAC7D,KAAK,SAAM;IACpB,WAAW,SAAM;IACA,WAAW,UAAS;IAExC,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,WAAW,CAAS;IAErC,OAAO,CAAC,aAAa,CAAK;IAE1B,OAAO,CAAC,UAAU,CAMhB;IAEO,oBAAoB;IAK7B,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,QAAQ;IAUP,MAAM;CAkChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

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

@@ -1,12 +1,12 @@
 import { css as v, LitElement as h, nothing as n, html as c } from "lit";
-import { property as o, state as u, customElement as m } from "lit/decorators.js";
-import { h as p, r as f, f as b } from "../../chunks/premium.css-9I4kHrsl.js";
-var y = Object.defineProperty, w = Object.getOwnPropertyDescriptor, t = (r, a, l, e) => {
-  for (var s = e > 1 ? void 0 : e ? w(a, l) : a, d = r.length - 1, g; d >= 0; d--)
-    (g = r[d]) && (s = (e ? g(a, l, s) : g(s)) || s);
-  return e && s && y(a, l, s), s;
+import { property as a, state as u, customElement as m } from "lit/decorators.js";
+import { h as f, r as p, f as b } from "../../chunks/premium.css-DHekUEUt.js";
+var w = Object.defineProperty, y = Object.getOwnPropertyDescriptor, i = (s, t, l, e) => {
+  for (var o = e > 1 ? void 0 : e ? y(t, l) : t, d = s.length - 1, g; d >= 0; d--)
+    (g = s[d]) && (o = (e ? g(t, l, o) : g(o)) || o);
+  return e && o && w(t, l, o), o;
 };
-let i = class extends h {
+let r = class extends h {
   constructor() {
     super(...arguments), this.variant = "info", this.rounded = "lg", this.title = "", this.description = "", this.dismissible = !1, this._dismissed = !1, this._dismissing = !1, this._dismissTimer = 0, this._iconPaths = {
       info: "M12 2a10 10 0 100 20 10 10 0 000-20zm0 5a1 1 0 011 1v4a1 1 0 01-2 0V8a1 1 0 011-1zm0 8a1 1 0 110 2 1 1 0 010-2z",
@@ -19,8 +19,8 @@ let i = class extends h {
   disconnectedCallback() {
     super.disconnectedCallback(), clearTimeout(this._dismissTimer);
   }
-  _handleKeydown(r) {
-    this.dismissible && r.key === "Escape" && (r.preventDefault(), this._dismiss());
+  _handleKeydown(s) {
+    this.dismissible && s.key === "Escape" && (s.preventDefault(), this._dismiss());
   }
   _dismiss() {
     this._dismissing = !0, this.dispatchEvent(new CustomEvent("cg-callout-dismiss", { bubbles: !0, composed: !0 })), this._dismissTimer = window.setTimeout(() => {
@@ -29,13 +29,13 @@ let i = class extends h {
   }
   render() {
     if (this._dismissed && !this._dismissing) return n;
-    const r = this._iconPaths[this.variant] ?? this._iconPaths.info;
+    const s = this._iconPaths[this.variant] ?? this._iconPaths.info, t = this.variant === "danger" || this.variant === "warning";
     return c`
-      <div class="callout ${this._dismissing ? "dismissing" : ""}" role=${this.variant === "danger" || this.variant === "warning" ? "alert" : "note"} aria-live="polite" @keydown=${this._handleKeydown}>
+      <div class="callout ${this._dismissing ? "dismissing" : ""}" role=${t ? "alert" : "note"} aria-live=${t ? "assertive" : "polite"} @keydown=${this._handleKeydown}>
         <div class="icon">
           <slot name="icon">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="${r}"></path>
+            <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="${s}"></path>
             </svg>
           </slot>
         </div>
@@ -56,7 +56,7 @@ let i = class extends h {
     `;
   }
 };
-i.styles = [p, f, b, v`
+r.styles = [f, p, b, v`
     :host {
       animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
     }
@@ -71,7 +71,7 @@ i.styles = [p, f, b, v`
         opacity var(--cg-transition-duration-default) var(--cg-transition-easing-default),
         transform var(--cg-transition-duration-default) var(--cg-transition-easing-default);
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       gap: var(--cg-spacing-12);
       padding: var(--cg-spacing-12) var(--cg-spacing-16);
       border-radius: var(--cg-border-radius-100);
@@ -80,22 +80,23 @@ i.styles = [p, f, b, v`
       line-height: var(--cg-line-height-normal);
     }
 
-    /* Variants — colored border, icon + title colored (softened), description normal */
-    :host([variant="info"]) .callout { border-color: var(--cg-color-message-border-info); }
+    /* Variants — tinted surface + colored border for at-a-glance distinction,
+       icon + title at full accent strength (no opacity dampening). */
+    :host([variant="info"]) .callout { background: var(--cg-color-message-background-info); border-color: var(--cg-color-message-border-info); }
     :host([variant="info"]) .icon { color: var(--cg-color-message-icon-info); }
-    :host([variant="info"]) .title { color: var(--cg-color-message-text-info); opacity: 0.85; }
+    :host([variant="info"]) .title { color: var(--cg-color-message-text-info); }
 
-    :host([variant="success"]) .callout { border-color: var(--cg-color-message-border-success); }
+    :host([variant="success"]) .callout { background: var(--cg-color-message-background-success); border-color: var(--cg-color-message-border-success); }
     :host([variant="success"]) .icon { color: var(--cg-color-message-icon-success); }
-    :host([variant="success"]) .title { color: var(--cg-color-message-text-success); opacity: 0.85; }
+    :host([variant="success"]) .title { color: var(--cg-color-message-text-success); }
 
-    :host([variant="warning"]) .callout { border-color: var(--cg-color-message-border-warning); }
+    :host([variant="warning"]) .callout { background: var(--cg-color-message-background-warning); border-color: var(--cg-color-message-border-warning); }
     :host([variant="warning"]) .icon { color: var(--cg-color-message-icon-warning); }
-    :host([variant="warning"]) .title { color: var(--cg-color-message-text-warning); opacity: 0.85; }
+    :host([variant="warning"]) .title { color: var(--cg-color-message-text-warning); }
 
-    :host([variant="danger"]) .callout { border-color: var(--cg-color-message-border-error); }
+    :host([variant="danger"]) .callout { background: var(--cg-color-message-background-error); border-color: var(--cg-color-message-border-error); }
     :host([variant="danger"]) .icon { color: var(--cg-color-message-icon-error); }
-    :host([variant="danger"]) .title { color: var(--cg-color-message-text-error); opacity: 0.85; }
+    :host([variant="danger"]) .title { color: var(--cg-color-message-text-error); }
 
     :host([variant="neutral"]) .icon,
     :host([variant="neutral"]) .title { color: var(--cg-color-surface-container-text); }
@@ -148,13 +149,13 @@ i.styles = [p, f, b, v`
     .dismiss:hover { opacity: 0.8; }
     .dismiss:focus-visible {
       outline: none;
-      box-shadow: 0 0 0 2px var(--cg-color-surface-base-background), 0 0 0 4px var(--cg-color-focus-ring);
+      box-shadow: 0 0 0 var(--cg-focus-ring-offset) var(--cg-color-surface-base-background), 0 0 0 calc(var(--cg-focus-ring-offset) + var(--cg-focus-ring-width)) var(--cg-color-focus-ring);
     }
     .dismiss svg { width: var(--cg-spacing-16); height: var(--cg-spacing-16); }
 
     @keyframes calloutExit {
       from { opacity: 1; transform: translateY(0); }
-      to { opacity: 0; transform: translateY(-8px); }
+      to { opacity: 0; transform: translateY(calc(-1 * var(--cg-spacing-8))); }
     }
     .callout.dismissing {
       animation: calloutExit var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-in) forwards;
@@ -167,31 +168,31 @@ i.styles = [p, f, b, v`
     :host([rounded="lg"]) .callout { border-radius: var(--cg-border-radius-150); }
     :host([rounded="full"]) .callout { border-radius: var(--cg-border-radius-full); }
   `];
-t([
-  o({ reflect: !0 })
-], i.prototype, "variant", 2);
-t([
-  o({ reflect: !0 })
-], i.prototype, "rounded", 2);
-t([
-  o()
-], i.prototype, "title", 2);
-t([
-  o()
-], i.prototype, "description", 2);
-t([
-  o({ type: Boolean })
-], i.prototype, "dismissible", 2);
-t([
+i([
+  a({ reflect: !0 })
+], r.prototype, "variant", 2);
+i([
+  a({ reflect: !0 })
+], r.prototype, "rounded", 2);
+i([
+  a()
+], r.prototype, "title", 2);
+i([
+  a()
+], r.prototype, "description", 2);
+i([
+  a({ type: Boolean })
+], r.prototype, "dismissible", 2);
+i([
   u()
-], i.prototype, "_dismissed", 2);
-t([
+], r.prototype, "_dismissed", 2);
+i([
   u()
-], i.prototype, "_dismissing", 2);
-i = t([
+], r.prototype, "_dismissing", 2);
+r = i([
   m("cg-callout")
-], i);
+], r);
 export {
-  i as CgCallout
+  r as CgCallout
 };
 //# sourceMappingURL=cg-callout.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"cg-callout.js","sources":["../../../src/components/cg-callout/cg-callout.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\n\n/**\n * <cg-callout> — Alert/notice with semantic variants.\n *\n * Better than OpenUI's Callout:\n * - Dismissible\n * - Icon auto-selected by variant (or custom via slot)\n * - Action slot (button)\n * - 5 semantic variants\n */\n@customElement('cg-callout')\nexport class CgCallout extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n    :host {\n      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n\n    :host([hidden]) { display: none; }\n\n    .callout {\n      transition:\n        background-color var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        border-color var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        opacity var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      border-radius: var(--cg-border-radius-100);\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-container-border);\n      line-height: var(--cg-line-height-normal);\n    }\n\n    /* Variants — colored border, icon + title colored (softened), description normal */\n    :host([variant=\"info\"]) .callout { border-color: var(--cg-color-message-border-info); }\n    :host([variant=\"info\"]) .icon { color: var(--cg-color-message-icon-info); }\n    :host([variant=\"info\"]) .title { color: var(--cg-color-message-text-info); opacity: 0.85; }\n\n    :host([variant=\"success\"]) .callout { border-color: var(--cg-color-message-border-success); }\n    :host([variant=\"success\"]) .icon { color: var(--cg-color-message-icon-success); }\n    :host([variant=\"success\"]) .title { color: var(--cg-color-message-text-success); opacity: 0.85; }\n\n    :host([variant=\"warning\"]) .callout { border-color: var(--cg-color-message-border-warning); }\n    :host([variant=\"warning\"]) .icon { color: var(--cg-color-message-icon-warning); }\n    :host([variant=\"warning\"]) .title { color: var(--cg-color-message-text-warning); opacity: 0.85; }\n\n    :host([variant=\"danger\"]) .callout { border-color: var(--cg-color-message-border-error); }\n    :host([variant=\"danger\"]) .icon { color: var(--cg-color-message-icon-error); }\n    :host([variant=\"danger\"]) .title { color: var(--cg-color-message-text-error); opacity: 0.85; }\n\n    :host([variant=\"neutral\"]) .icon,\n    :host([variant=\"neutral\"]) .title { color: var(--cg-color-surface-container-text); }\n\n    .icon {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    .icon svg {\n      width: var(--cg-icon-size-150);\n      height: var(--cg-icon-size-150);\n    }\n\n    .content { flex: 1; min-width: 0; }\n\n    .title {\n      font-weight: var(--cg-font-weight-medium);\n      font-size: var(--cg-font-size-sm);\n      line-height: var(--cg-line-height-tight);\n      letter-spacing: var(--cg-letter-spacing-tight);\n    }\n\n    .title + .description {\n      margin-top: var(--cg-spacing-2);\n    }\n\n    .description {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    ::slotted([slot=\"action\"]) {\n      margin-top: var(--cg-spacing-8);\n    }\n\n    .dismiss {\n      flex-shrink: 0;\n      background: none;\n      border: none;\n      color: currentColor;\n      opacity: 0.5;\n      cursor: pointer;\n      padding: var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-50);\n      display: flex;\n      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .dismiss:hover { opacity: 0.8; }\n    .dismiss:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 2px var(--cg-color-surface-base-background), 0 0 0 4px var(--cg-color-focus-ring);\n    }\n    .dismiss svg { width: var(--cg-spacing-16); height: var(--cg-spacing-16); }\n\n    @keyframes calloutExit {\n      from { opacity: 1; transform: translateY(0); }\n      to { opacity: 0; transform: translateY(-8px); }\n    }\n    .callout.dismissing {\n      animation: calloutExit var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-in) forwards;\n    }\n\n    /* Rounded variants */\n    :host([rounded=\"none\"]) .callout { border-radius: 0; }\n    :host([rounded=\"sm\"]) .callout { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .callout { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .callout { border-radius: var(--cg-border-radius-150); }\n    :host([rounded=\"full\"]) .callout { border-radius: var(--cg-border-radius-full); }\n  `];\n\n  @property({ reflect: true }) variant: 'info' | 'success' | 'warning' | 'danger' | 'neutral' = 'info';\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'lg';\n  @property() override title = '';\n  @property() description = '';\n  @property({ type: Boolean }) dismissible = false;\n\n  @state() private _dismissed = false;\n  @state() private _dismissing = false;\n\n  private _dismissTimer = 0;\n\n  private _iconPaths: Record<string, string> = {\n    info: 'M12 2a10 10 0 100 20 10 10 0 000-20zm0 5a1 1 0 011 1v4a1 1 0 01-2 0V8a1 1 0 011-1zm0 8a1 1 0 110 2 1 1 0 010-2z',\n    success: 'M12 2a10 10 0 100 20 10 10 0 000-20zm-2 10l2 2 4-4',\n    warning: 'M12 2L2 22h20L12 2zm0 7v4m0 4h.01',\n    danger: 'M12 2a10 10 0 100 20 10 10 0 000-20zm-1 5h2v6h-2zm0 8h2v2h-2z',\n    neutral: 'M12 2a10 10 0 100 20 10 10 0 000-20zm0 5a1 1 0 011 1v4a1 1 0 01-2 0V8a1 1 0 011-1zm0 8a1 1 0 110 2 1 1 0 010-2z',\n  };\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    clearTimeout(this._dismissTimer);\n  }\n\n  private _handleKeydown(e: KeyboardEvent) {\n    if (this.dismissible && e.key === 'Escape') {\n      e.preventDefault();\n      this._dismiss();\n    }\n  }\n\n  private _dismiss() {\n    this._dismissing = true;\n    this.dispatchEvent(new CustomEvent('cg-callout-dismiss', { bubbles: true, composed: true }));\n    this._dismissTimer = window.setTimeout(() => {\n      this._dismissed = true;\n      this._dismissing = false;\n      this.setAttribute('hidden', '');\n    }, 250);\n  }\n\n  override render() {\n    if (this._dismissed && !this._dismissing) return nothing;\n\n    const iconPath = this._iconPaths[this.variant] ?? this._iconPaths.info;\n\n    return html`\n      <div class=\"callout ${this._dismissing ? 'dismissing' : ''}\" role=${this.variant === 'danger' || this.variant === 'warning' ? 'alert' : 'note'} aria-live=\"polite\" @keydown=${this._handleKeydown}>\n        <div class=\"icon\">\n          <slot name=\"icon\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <path d=\"${iconPath}\"></path>\n            </svg>\n          </slot>\n        </div>\n        <div class=\"content\">\n          ${this.title ? html`<div class=\"title\">${this.title}</div>` : nothing}\n          ${this.description ? html`<div class=\"description\">${this.description}</div>` : nothing}\n          <slot></slot>\n          <slot name=\"action\"></slot>\n        </div>\n        ${this.dismissible ? html`\n          <button class=\"dismiss\" @click=${this._dismiss} aria-label=\"Dismiss\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n              <path d=\"M18 6L6 18M6 6l12 12\"></path>\n            </svg>\n          </button>\n        ` : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-callout': CgCallout;\n  }\n}\n"],"names":["CgCallout","LitElement","e","nothing","iconPath","html","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}
+{"version":3,"file":"cg-callout.js","sources":["../../../src/components/cg-callout/cg-callout.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\n\n/**\n * <cg-callout> — Alert/notice with semantic variants.\n *\n * Better than OpenUI's Callout:\n * - Dismissible\n * - Icon auto-selected by variant (or custom via slot)\n * - Action slot (button)\n * - 5 semantic variants\n */\n@customElement('cg-callout')\nexport class CgCallout extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n    :host {\n      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n\n    :host([hidden]) { display: none; }\n\n    .callout {\n      transition:\n        background-color var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        border-color var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        opacity var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n      display: flex;\n      align-items: flex-start;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      border-radius: var(--cg-border-radius-100);\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-container-border);\n      line-height: var(--cg-line-height-normal);\n    }\n\n    /* Variants — tinted surface + colored border for at-a-glance distinction,\n       icon + title at full accent strength (no opacity dampening). */\n    :host([variant=\"info\"]) .callout { background: var(--cg-color-message-background-info); border-color: var(--cg-color-message-border-info); }\n    :host([variant=\"info\"]) .icon { color: var(--cg-color-message-icon-info); }\n    :host([variant=\"info\"]) .title { color: var(--cg-color-message-text-info); }\n\n    :host([variant=\"success\"]) .callout { background: var(--cg-color-message-background-success); border-color: var(--cg-color-message-border-success); }\n    :host([variant=\"success\"]) .icon { color: var(--cg-color-message-icon-success); }\n    :host([variant=\"success\"]) .title { color: var(--cg-color-message-text-success); }\n\n    :host([variant=\"warning\"]) .callout { background: var(--cg-color-message-background-warning); border-color: var(--cg-color-message-border-warning); }\n    :host([variant=\"warning\"]) .icon { color: var(--cg-color-message-icon-warning); }\n    :host([variant=\"warning\"]) .title { color: var(--cg-color-message-text-warning); }\n\n    :host([variant=\"danger\"]) .callout { background: var(--cg-color-message-background-error); border-color: var(--cg-color-message-border-error); }\n    :host([variant=\"danger\"]) .icon { color: var(--cg-color-message-icon-error); }\n    :host([variant=\"danger\"]) .title { color: var(--cg-color-message-text-error); }\n\n    :host([variant=\"neutral\"]) .icon,\n    :host([variant=\"neutral\"]) .title { color: var(--cg-color-surface-container-text); }\n\n    .icon {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    .icon svg {\n      width: var(--cg-icon-size-150);\n      height: var(--cg-icon-size-150);\n    }\n\n    .content { flex: 1; min-width: 0; }\n\n    .title {\n      font-weight: var(--cg-font-weight-medium);\n      font-size: var(--cg-font-size-sm);\n      line-height: var(--cg-line-height-tight);\n      letter-spacing: var(--cg-letter-spacing-tight);\n    }\n\n    .title + .description {\n      margin-top: var(--cg-spacing-2);\n    }\n\n    .description {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    ::slotted([slot=\"action\"]) {\n      margin-top: var(--cg-spacing-8);\n    }\n\n    .dismiss {\n      flex-shrink: 0;\n      background: none;\n      border: none;\n      color: currentColor;\n      opacity: 0.5;\n      cursor: pointer;\n      padding: var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-50);\n      display: flex;\n      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .dismiss:hover { opacity: 0.8; }\n    .dismiss:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 var(--cg-focus-ring-offset) var(--cg-color-surface-base-background), 0 0 0 calc(var(--cg-focus-ring-offset) + var(--cg-focus-ring-width)) var(--cg-color-focus-ring);\n    }\n    .dismiss svg { width: var(--cg-spacing-16); height: var(--cg-spacing-16); }\n\n    @keyframes calloutExit {\n      from { opacity: 1; transform: translateY(0); }\n      to { opacity: 0; transform: translateY(calc(-1 * var(--cg-spacing-8))); }\n    }\n    .callout.dismissing {\n      animation: calloutExit var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-in) forwards;\n    }\n\n    /* Rounded variants */\n    :host([rounded=\"none\"]) .callout { border-radius: 0; }\n    :host([rounded=\"sm\"]) .callout { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .callout { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .callout { border-radius: var(--cg-border-radius-150); }\n    :host([rounded=\"full\"]) .callout { border-radius: var(--cg-border-radius-full); }\n  `];\n\n  @property({ reflect: true }) variant: 'info' | 'success' | 'warning' | 'danger' | 'neutral' = 'info';\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'lg';\n  @property() override title = '';\n  @property() description = '';\n  @property({ type: Boolean }) dismissible = false;\n\n  @state() private _dismissed = false;\n  @state() private _dismissing = false;\n\n  private _dismissTimer = 0;\n\n  private _iconPaths: Record<string, string> = {\n    info: 'M12 2a10 10 0 100 20 10 10 0 000-20zm0 5a1 1 0 011 1v4a1 1 0 01-2 0V8a1 1 0 011-1zm0 8a1 1 0 110 2 1 1 0 010-2z',\n    success: 'M12 2a10 10 0 100 20 10 10 0 000-20zm-2 10l2 2 4-4',\n    warning: 'M12 2L2 22h20L12 2zm0 7v4m0 4h.01',\n    danger: 'M12 2a10 10 0 100 20 10 10 0 000-20zm-1 5h2v6h-2zm0 8h2v2h-2z',\n    neutral: 'M12 2a10 10 0 100 20 10 10 0 000-20zm0 5a1 1 0 011 1v4a1 1 0 01-2 0V8a1 1 0 011-1zm0 8a1 1 0 110 2 1 1 0 010-2z',\n  };\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    clearTimeout(this._dismissTimer);\n  }\n\n  private _handleKeydown(e: KeyboardEvent) {\n    if (this.dismissible && e.key === 'Escape') {\n      e.preventDefault();\n      this._dismiss();\n    }\n  }\n\n  private _dismiss() {\n    this._dismissing = true;\n    this.dispatchEvent(new CustomEvent('cg-callout-dismiss', { bubbles: true, composed: true }));\n    this._dismissTimer = window.setTimeout(() => {\n      this._dismissed = true;\n      this._dismissing = false;\n      this.setAttribute('hidden', '');\n    }, 250);\n  }\n\n  override render() {\n    if (this._dismissed && !this._dismissing) return nothing;\n\n    const iconPath = this._iconPaths[this.variant] ?? this._iconPaths.info;\n    // role=\"alert\" carries implicit aria-live=\"assertive\"; setting an explicit\n    // \"polite\" on it downgrades urgent callouts. Pair role and aria-live so\n    // danger/warning announce assertively and the rest stay polite.\n    const isAlert = this.variant === 'danger' || this.variant === 'warning';\n\n    return html`\n      <div class=\"callout ${this._dismissing ? 'dismissing' : ''}\" role=${isAlert ? 'alert' : 'note'} aria-live=${isAlert ? 'assertive' : 'polite'} @keydown=${this._handleKeydown}>\n        <div class=\"icon\">\n          <slot name=\"icon\">\n            <svg aria-hidden=\"true\" focusable=\"false\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n              <path d=\"${iconPath}\"></path>\n            </svg>\n          </slot>\n        </div>\n        <div class=\"content\">\n          ${this.title ? html`<div class=\"title\">${this.title}</div>` : nothing}\n          ${this.description ? html`<div class=\"description\">${this.description}</div>` : nothing}\n          <slot></slot>\n          <slot name=\"action\"></slot>\n        </div>\n        ${this.dismissible ? html`\n          <button class=\"dismiss\" @click=${this._dismiss} aria-label=\"Dismiss\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n              <path d=\"M18 6L6 18M6 6l12 12\"></path>\n            </svg>\n          </button>\n        ` : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-callout': CgCallout;\n  }\n}\n"],"names":["CgCallout","LitElement","e","nothing","iconPath","isAlert","html","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}