@cognivo/components 0.8.0 → 0.8.2

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

@@ -1,104 +1,106 @@
-import { css as c, LitElement as d, nothing as v, html as u } from "lit";
-import { property as n, state as f, customElement as p } from "lit/decorators.js";
-import { a as g, r as m } from "../../chunks/premium.css-9I4kHrsl.js";
-var y = Object.defineProperty, w = Object.getOwnPropertyDescriptor, o = (e, r, t, i) => {
-  for (var a = i > 1 ? void 0 : i ? w(r, t) : r, l = e.length - 1, h; l >= 0; l--)
-    (h = e[l]) && (a = (i ? h(r, t, a) : h(a)) || a);
-  return i && a && y(r, t, a), a;
+import { css as d, LitElement as v, nothing as c, html as u } from "lit";
+import { property as n, state as g, customElement as f } from "lit/decorators.js";
+import { a as p, r as m } from "../../chunks/premium.css-DHekUEUt.js";
+var y = Object.defineProperty, w = Object.getOwnPropertyDescriptor, o = (t, r, e, i) => {
+  for (var a = i > 1 ? void 0 : i ? w(r, e) : r, l = t.length - 1, h; l >= 0; l--)
+    (h = t[l]) && (a = (i ? h(r, e, a) : h(a)) || a);
+  return i && a && y(r, e, a), a;
 };
-let s = class extends d {
+let s = class extends v {
   constructor() {
     super(), this.value = 0, this.max = 5, this.precision = 1, this.readonly = !1, this.disabled = !1, this.size = "md", this.name = "", this._hoverValue = 0, typeof this.attachInternals == "function" && (this._internals = this.attachInternals());
   }
-  updated(e) {
-    e.has("value") && this._internals?.setFormValue(String(this.value));
+  updated(t) {
+    t.has("value") && this._internals?.setFormValue(String(this.value));
   }
   _displayValue() {
     return this._hoverValue || this.value;
   }
-  _getFillType(e) {
-    const r = this._displayValue(), t = e + 1;
-    return r >= t ? "full" : r >= t - 0.5 && this.precision === 0.5 ? "half" : "empty";
+  _getFillType(t) {
+    const r = this._displayValue(), e = t + 1;
+    return r >= e ? "full" : r >= e - 0.5 && this.precision === 0.5 ? "half" : "empty";
   }
-  _handleClick(e, r) {
+  _handleClick(t, r) {
     if (this.readonly || this.disabled) return;
-    let t = e + 1;
+    let e = t + 1;
     if (this.precision === 0.5) {
       const a = r.currentTarget.getBoundingClientRect();
-      r.clientX - a.left < a.width / 2 && (t = e + 0.5);
+      r.clientX - a.left < a.width / 2 && (e = t + 0.5);
     }
-    t === this.value && (t = 0), this.value = t, this.dispatchEvent(new CustomEvent("cg-rating-change", {
-      detail: { value: t },
+    e === this.value && (e = 0), this.value = e, this.dispatchEvent(new CustomEvent("cg-rating-change", {
+      detail: { value: e },
       bubbles: !0,
       composed: !0
     }));
   }
-  _handleMouseMove(e, r) {
+  _handleMouseMove(t, r) {
     if (!(this.readonly || this.disabled))
       if (this.precision === 0.5) {
         const i = r.currentTarget.getBoundingClientRect(), a = r.clientX - i.left < i.width / 2;
-        this._hoverValue = e + (a ? 0.5 : 1);
+        this._hoverValue = t + (a ? 0.5 : 1);
       } else
-        this._hoverValue = e + 1;
+        this._hoverValue = t + 1;
   }
   _handleMouseLeave() {
     this._hoverValue = 0;
   }
-  _handleKeydown(e) {
+  _handleKeydown(t) {
     if (this.readonly || this.disabled) return;
     const r = this.precision;
-    let t = this.value;
-    if (e.key === "ArrowRight" || e.key === "ArrowUp")
-      e.preventDefault(), t = Math.min(this.max, this.value + r);
-    else if (e.key === "ArrowLeft" || e.key === "ArrowDown")
-      e.preventDefault(), t = Math.max(0, this.value - r);
-    else if (e.key === "Home")
-      e.preventDefault(), t = 0;
-    else if (e.key === "End")
-      e.preventDefault(), t = this.max;
+    let e = this.value;
+    if (t.key === "ArrowRight" || t.key === "ArrowUp")
+      t.preventDefault(), e = Math.min(this.max, this.value + r);
+    else if (t.key === "ArrowLeft" || t.key === "ArrowDown")
+      t.preventDefault(), e = Math.max(0, this.value - r);
+    else if (t.key === "Home")
+      t.preventDefault(), e = 0;
+    else if (t.key === "End")
+      t.preventDefault(), e = this.max;
     else
       return;
-    t !== this.value && (this.value = t, this.dispatchEvent(new CustomEvent("cg-rating-change", {
-      detail: { value: t },
+    e !== this.value && (this.value = e, this.dispatchEvent(new CustomEvent("cg-rating-change", {
+      detail: { value: e },
       bubbles: !0,
       composed: !0
     })));
   }
   render() {
-    const e = "M12 2l2.5 7.5h7.5l-6 4.5 2.5 7.5-6.5-4.5-6.5 4.5 2.5-7.5-6-4.5h7.5z";
+    const t = "M12 2l2.5 7.5h7.5l-6 4.5 2.5 7.5-6.5-4.5-6.5 4.5 2.5-7.5-6-4.5h7.5z";
     return u`
       <div
         class="rating"
-        role="radiogroup"
-        tabindex="0"
-        aria-label=${`Rated ${this.value} of ${this.max}`}
+        role="slider"
+        tabindex=${this.disabled ? "-1" : "0"}
+        aria-label="Rating"
         aria-valuenow=${this.value}
         aria-valuemin="0"
         aria-valuemax=${this.max}
+        aria-valuetext=${`${this.value} of ${this.max} stars`}
+        aria-disabled=${this.disabled ? "true" : c}
+        aria-readonly=${this.readonly ? "true" : c}
         @keydown=${this._handleKeydown}
         @mouseleave=${this._handleMouseLeave}
       >
-        ${Array.from({ length: this.max }, (r, t) => {
-      const i = this._getFillType(t);
+        ${Array.from({ length: this.max }, (r, e) => {
+      const i = this._getFillType(e);
       return u`
             <div
               class="star"
               data-filled=${i}
-              role="radio"
-              aria-checked=${t + 1 <= this.value ? "true" : "false"}
-              @click=${(a) => this._handleClick(t, a)}
-              @mousemove=${(a) => this._handleMouseMove(t, a)}
+              aria-hidden="true"
+              @click=${(a) => this._handleClick(e, a)}
+              @mousemove=${(a) => this._handleMouseMove(e, a)}
             >
               <svg viewBox="0 0 24 24" fill=${i === "full" ? "currentColor" : "none"} stroke="currentColor" stroke-width="1.5" stroke-linejoin="round">
-                <path d=${e}/>
+                <path d=${t}/>
               </svg>
               ${i === "half" ? u`
                 <div class="half">
                   <svg viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round">
-                    <path d=${e}/>
+                    <path d=${t}/>
                   </svg>
                 </div>
-              ` : v}
+              ` : c}
             </div>
           `;
     })}
@@ -106,7 +108,7 @@ let s = class extends d {
     `;
   }
 };
-s.styles = [g, m, c`
+s.styles = [p, m, d`
     :host {
       display: inline-flex;
     }
@@ -123,13 +125,13 @@ s.styles = [g, m, c`
       width: var(--cg-component-rating-size-md);
       height: var(--cg-component-rating-size-md);
       cursor: pointer;
-      color: var(--cg-color-surface-container-border);
+      color: var(--cg-color-surface-container-outlined);
       transition:
         color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
         transform var(--cg-transition-duration-fast) var(--cg-transition-easing-spring);
     }
     .star:hover { transform: scale(1.15); }
-    .star:active { transform: scale(0.95); }
+    .star:active { transform: scale(var(--cg-interaction-press-scale)); }
     .star[data-filled="full"] { color: var(--cg-color-status-warning-text-default); }
     .star[data-filled="half"] { color: var(--cg-color-status-warning-text-default); }
 
@@ -157,13 +159,13 @@ s.styles = [g, m, c`
 
     :host([readonly]) .star { cursor: default; }
     :host([readonly]) .star:hover { transform: none; }
-    :host([disabled]) .rating { opacity: 0.45; pointer-events: none; }
+    :host([disabled]) .rating { opacity: var(--cg-opacity-50); pointer-events: none; }
 
     .rating:focus-visible {
       outline: none;
       box-shadow:
-        0 0 0 2px var(--cg-color-focus-ring-offset),
-        0 0 0 4px var(--cg-color-focus-ring);
+        0 0 0 var(--cg-focus-ring-offset) var(--cg-color-focus-ring-offset),
+        0 0 0 calc(var(--cg-focus-ring-offset) + var(--cg-focus-ring-width)) var(--cg-color-focus-ring);
       border-radius: var(--cg-border-radius-50);
     }
   `];
@@ -190,10 +192,10 @@ o([
   n()
 ], s.prototype, "name", 2);
 o([
-  f()
+  g()
 ], s.prototype, "_hoverValue", 2);
 s = o([
-  p("cg-rating")
+  f("cg-rating")
 ], s);
 export {
   s as CgRating

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

@@ -1 +1 @@
-{"version":3,"file":"cg-rating.js","sources":["../../../src/components/cg-rating/cg-rating.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\n/**\n * @element cg-rating\n * Star rating input with keyboard navigation, half-star precision, and clear.\n *\n * @example\n * ```html\n * <cg-rating value=\"4\" max=\"5\"></cg-rating>\n * <cg-rating value=\"3.5\" precision=\"0.5\"></cg-rating>\n * ```\n *\n * @fires {CustomEvent<{value: number}>} cg-rating-change\n */\n@customElement('cg-rating')\nexport class CgRating extends LitElement {\n  static override styles = [hostBase, reducedMotion, css`\n    :host {\n      display: inline-flex;\n    }\n\n    .rating {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-component-rating-gap);\n      outline: none;\n    }\n\n    .star {\n      position: relative;\n      width: var(--cg-component-rating-size-md);\n      height: var(--cg-component-rating-size-md);\n      cursor: pointer;\n      color: var(--cg-color-surface-container-border);\n      transition:\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-spring);\n    }\n    .star:hover { transform: scale(1.15); }\n    .star:active { transform: scale(0.95); }\n    .star[data-filled=\"full\"] { color: var(--cg-color-status-warning-text-default); }\n    .star[data-filled=\"half\"] { color: var(--cg-color-status-warning-text-default); }\n\n    .star svg { width: 100%; height: 100%; }\n\n    .star .half {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 50%;\n      height: 100%;\n      overflow: hidden;\n    }\n    .star .half svg { width: 200%; }\n\n    /* Sizes */\n    :host([size=\"sm\"]) .star {\n      width: var(--cg-component-rating-size-sm);\n      height: var(--cg-component-rating-size-sm);\n    }\n    :host([size=\"lg\"]) .star {\n      width: var(--cg-component-rating-size-lg);\n      height: var(--cg-component-rating-size-lg);\n    }\n\n    :host([readonly]) .star { cursor: default; }\n    :host([readonly]) .star:hover { transform: none; }\n    :host([disabled]) .rating { opacity: 0.45; pointer-events: none; }\n\n    .rating: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      border-radius: var(--cg-border-radius-50);\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({ type: Number }) value = 0;\n  @property({ type: Number }) max = 5;\n  @property({ type: Number }) precision: 0.5 | 1 = 1;\n  @property({ type: Boolean, reflect: true }) readonly = false;\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n  @property() name = '';\n\n  @state() private _hoverValue = 0;\n\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('value')) {\n      this._internals?.setFormValue(String(this.value));\n    }\n  }\n\n  private _displayValue(): number {\n    return this._hoverValue || this.value;\n  }\n\n  private _getFillType(starIndex: number): 'full' | 'half' | 'empty' {\n    const display = this._displayValue();\n    const starValue = starIndex + 1;\n    if (display >= starValue) return 'full';\n    if (display >= starValue - 0.5 && this.precision === 0.5) return 'half';\n    return 'empty';\n  }\n\n  private _handleClick(starIndex: number, e: MouseEvent): void {\n    if (this.readonly || this.disabled) return;\n    let newValue = starIndex + 1;\n    if (this.precision === 0.5) {\n      const target = e.currentTarget as HTMLElement;\n      const rect = target.getBoundingClientRect();\n      const half = e.clientX - rect.left < rect.width / 2;\n      if (half) newValue = starIndex + 0.5;\n    }\n    // Clear on click of same value\n    if (newValue === this.value) newValue = 0;\n    this.value = newValue;\n    this.dispatchEvent(new CustomEvent('cg-rating-change', {\n      detail: { value: newValue },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _handleMouseMove(starIndex: number, e: MouseEvent): void {\n    if (this.readonly || this.disabled) return;\n    if (this.precision === 0.5) {\n      const target = e.currentTarget as HTMLElement;\n      const rect = target.getBoundingClientRect();\n      const half = e.clientX - rect.left < rect.width / 2;\n      this._hoverValue = starIndex + (half ? 0.5 : 1);\n    } else {\n      this._hoverValue = starIndex + 1;\n    }\n  }\n\n  private _handleMouseLeave(): void {\n    this._hoverValue = 0;\n  }\n\n  private _handleKeydown(e: KeyboardEvent): void {\n    if (this.readonly || this.disabled) return;\n    const step = this.precision;\n    let newValue = this.value;\n    if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {\n      e.preventDefault();\n      newValue = Math.min(this.max, this.value + step);\n    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {\n      e.preventDefault();\n      newValue = Math.max(0, this.value - step);\n    } else if (e.key === 'Home') {\n      e.preventDefault();\n      newValue = 0;\n    } else if (e.key === 'End') {\n      e.preventDefault();\n      newValue = this.max;\n    } else {\n      return;\n    }\n    if (newValue !== this.value) {\n      this.value = newValue;\n      this.dispatchEvent(new CustomEvent('cg-rating-change', {\n        detail: { value: newValue },\n        bubbles: true,\n        composed: true,\n      }));\n    }\n  }\n\n  override render() {\n    const starPath = 'M12 2l2.5 7.5h7.5l-6 4.5 2.5 7.5-6.5-4.5-6.5 4.5 2.5-7.5-6-4.5h7.5z';\n    return html`\n      <div\n        class=\"rating\"\n        role=\"radiogroup\"\n        tabindex=\"0\"\n        aria-label=${`Rated ${this.value} of ${this.max}`}\n        aria-valuenow=${this.value}\n        aria-valuemin=\"0\"\n        aria-valuemax=${this.max}\n        @keydown=${this._handleKeydown}\n        @mouseleave=${this._handleMouseLeave}\n      >\n        ${Array.from({ length: this.max }, (_, i) => {\n          const fill = this._getFillType(i);\n          return html`\n            <div\n              class=\"star\"\n              data-filled=${fill}\n              role=\"radio\"\n              aria-checked=${i + 1 <= this.value ? 'true' : 'false'}\n              @click=${(e: MouseEvent) => this._handleClick(i, e)}\n              @mousemove=${(e: MouseEvent) => this._handleMouseMove(i, e)}\n            >\n              <svg viewBox=\"0 0 24 24\" fill=${fill === 'full' ? 'currentColor' : 'none'} stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\">\n                <path d=${starPath}/>\n              </svg>\n              ${fill === 'half' ? html`\n                <div class=\"half\">\n                  <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\">\n                    <path d=${starPath}/>\n                  </svg>\n                </div>\n              ` : nothing}\n            </div>\n          `;\n        })}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-rating': CgRating;\n  }\n}\n"],"names":["CgRating","LitElement","changed","starIndex","display","starValue","e","newValue","rect","half","step","starPath","html","_","i","fill","nothing","hostBase","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}
+{"version":3,"file":"cg-rating.js","sources":["../../../src/components/cg-rating/cg-rating.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\n/**\n * @element cg-rating\n * Star rating input with keyboard navigation, half-star precision, and clear.\n *\n * @example\n * ```html\n * <cg-rating value=\"4\" max=\"5\"></cg-rating>\n * <cg-rating value=\"3.5\" precision=\"0.5\"></cg-rating>\n * ```\n *\n * @fires {CustomEvent<{value: number}>} cg-rating-change\n */\n@customElement('cg-rating')\nexport class CgRating extends LitElement {\n  static override styles = [hostBase, reducedMotion, css`\n    :host {\n      display: inline-flex;\n    }\n\n    .rating {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-component-rating-gap);\n      outline: none;\n    }\n\n    .star {\n      position: relative;\n      width: var(--cg-component-rating-size-md);\n      height: var(--cg-component-rating-size-md);\n      cursor: pointer;\n      color: var(--cg-color-surface-container-outlined);\n      transition:\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-spring);\n    }\n    .star:hover { transform: scale(1.15); }\n    .star:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .star[data-filled=\"full\"] { color: var(--cg-color-status-warning-text-default); }\n    .star[data-filled=\"half\"] { color: var(--cg-color-status-warning-text-default); }\n\n    .star svg { width: 100%; height: 100%; }\n\n    .star .half {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 50%;\n      height: 100%;\n      overflow: hidden;\n    }\n    .star .half svg { width: 200%; }\n\n    /* Sizes */\n    :host([size=\"sm\"]) .star {\n      width: var(--cg-component-rating-size-sm);\n      height: var(--cg-component-rating-size-sm);\n    }\n    :host([size=\"lg\"]) .star {\n      width: var(--cg-component-rating-size-lg);\n      height: var(--cg-component-rating-size-lg);\n    }\n\n    :host([readonly]) .star { cursor: default; }\n    :host([readonly]) .star:hover { transform: none; }\n    :host([disabled]) .rating { opacity: var(--cg-opacity-50); pointer-events: none; }\n\n    .rating: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      border-radius: var(--cg-border-radius-50);\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({ type: Number }) value = 0;\n  @property({ type: Number }) max = 5;\n  @property({ type: Number }) precision: 0.5 | 1 = 1;\n  @property({ type: Boolean, reflect: true }) readonly = false;\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n  @property() name = '';\n\n  @state() private _hoverValue = 0;\n\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('value')) {\n      this._internals?.setFormValue(String(this.value));\n    }\n  }\n\n  private _displayValue(): number {\n    return this._hoverValue || this.value;\n  }\n\n  private _getFillType(starIndex: number): 'full' | 'half' | 'empty' {\n    const display = this._displayValue();\n    const starValue = starIndex + 1;\n    if (display >= starValue) return 'full';\n    if (display >= starValue - 0.5 && this.precision === 0.5) return 'half';\n    return 'empty';\n  }\n\n  private _handleClick(starIndex: number, e: MouseEvent): void {\n    if (this.readonly || this.disabled) return;\n    let newValue = starIndex + 1;\n    if (this.precision === 0.5) {\n      const target = e.currentTarget as HTMLElement;\n      const rect = target.getBoundingClientRect();\n      const half = e.clientX - rect.left < rect.width / 2;\n      if (half) newValue = starIndex + 0.5;\n    }\n    // Clear on click of same value\n    if (newValue === this.value) newValue = 0;\n    this.value = newValue;\n    this.dispatchEvent(new CustomEvent('cg-rating-change', {\n      detail: { value: newValue },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _handleMouseMove(starIndex: number, e: MouseEvent): void {\n    if (this.readonly || this.disabled) return;\n    if (this.precision === 0.5) {\n      const target = e.currentTarget as HTMLElement;\n      const rect = target.getBoundingClientRect();\n      const half = e.clientX - rect.left < rect.width / 2;\n      this._hoverValue = starIndex + (half ? 0.5 : 1);\n    } else {\n      this._hoverValue = starIndex + 1;\n    }\n  }\n\n  private _handleMouseLeave(): void {\n    this._hoverValue = 0;\n  }\n\n  private _handleKeydown(e: KeyboardEvent): void {\n    if (this.readonly || this.disabled) return;\n    const step = this.precision;\n    let newValue = this.value;\n    if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {\n      e.preventDefault();\n      newValue = Math.min(this.max, this.value + step);\n    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {\n      e.preventDefault();\n      newValue = Math.max(0, this.value - step);\n    } else if (e.key === 'Home') {\n      e.preventDefault();\n      newValue = 0;\n    } else if (e.key === 'End') {\n      e.preventDefault();\n      newValue = this.max;\n    } else {\n      return;\n    }\n    if (newValue !== this.value) {\n      this.value = newValue;\n      this.dispatchEvent(new CustomEvent('cg-rating-change', {\n        detail: { value: newValue },\n        bubbles: true,\n        composed: true,\n      }));\n    }\n  }\n\n  override render() {\n    const starPath = 'M12 2l2.5 7.5h7.5l-6 4.5 2.5 7.5-6.5-4.5-6.5 4.5 2.5-7.5-6-4.5h7.5z';\n    return html`\n      <div\n        class=\"rating\"\n        role=\"slider\"\n        tabindex=${this.disabled ? '-1' : '0'}\n        aria-label=\"Rating\"\n        aria-valuenow=${this.value}\n        aria-valuemin=\"0\"\n        aria-valuemax=${this.max}\n        aria-valuetext=${`${this.value} of ${this.max} stars`}\n        aria-disabled=${this.disabled ? 'true' : nothing}\n        aria-readonly=${this.readonly ? 'true' : nothing}\n        @keydown=${this._handleKeydown}\n        @mouseleave=${this._handleMouseLeave}\n      >\n        ${Array.from({ length: this.max }, (_, i) => {\n          const fill = this._getFillType(i);\n          return html`\n            <div\n              class=\"star\"\n              data-filled=${fill}\n              aria-hidden=\"true\"\n              @click=${(e: MouseEvent) => this._handleClick(i, e)}\n              @mousemove=${(e: MouseEvent) => this._handleMouseMove(i, e)}\n            >\n              <svg viewBox=\"0 0 24 24\" fill=${fill === 'full' ? 'currentColor' : 'none'} stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\">\n                <path d=${starPath}/>\n              </svg>\n              ${fill === 'half' ? html`\n                <div class=\"half\">\n                  <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\">\n                    <path d=${starPath}/>\n                  </svg>\n                </div>\n              ` : nothing}\n            </div>\n          `;\n        })}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-rating': CgRating;\n  }\n}\n"],"names":["CgRating","LitElement","changed","starIndex","display","starValue","e","newValue","rect","half","step","starPath","html","nothing","_","i","fill","hostBase","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement, PropertyValues } from 'lit';
 /**
  * @element cg-resizable
  * Two-pane split container with a draggable handle.
@@ -14,7 +14,10 @@ export declare class CgResizable extends LitElement {
     defaultSize: number;
     min: number;
     max: number;
+    /** Accessible name for the resize handle (window-splitter pattern). */
+    handleLabel: string;
     private _size;
+    protected willUpdate(changed: PropertyValues<this>): void;
     private _activeMove;
     private _activeUp;
     connectedCallback(): void;

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

@@ -1 +1 @@
-{"version":3,"file":"cg-resizable.d.ts","sourceRoot":"","sources":["../../../src/components/cg-resizable/cg-resizable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C;;;;;;;;GAQG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,4BA6HnB;IAE0B,SAAS,EAAE,YAAY,GAAG,UAAU,CAAgB;IACrD,WAAW,SAAO;IAClB,GAAG,SAAO;IACV,GAAG,SAAO;IAE7B,OAAO,CAAC,KAAK,CAAO;IAE7B,OAAO,CAAC,WAAW,CAA6C;IAChE,OAAO,CAAC,SAAS,CAA6B;IAErC,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IASrC,OAAO,CAAC,MAAM;IAId,OAAO,CAAC,QAAQ;IAWhB,OAAO,CAAC,cAAc;IA8BtB,OAAO,CAAC,UAAU;IAmCT,MAAM;CAyBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}
+{"version":3,"file":"cg-resizable.d.ts","sourceRoot":"","sources":["../../../src/components/cg-resizable/cg-resizable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAIjE;;;;;;;;GAQG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,4BA8HnB;IAE0B,SAAS,EAAE,YAAY,GAAG,UAAU,CAAgB;IACrD,WAAW,SAAO;IAClB,GAAG,SAAO;IACV,GAAG,SAAO;IACtC,uEAAuE;IAC9B,WAAW,SAAkB;IAE7D,OAAO,CAAC,KAAK,CAAO;cAEV,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAMlE,OAAO,CAAC,WAAW,CAA6C;IAChE,OAAO,CAAC,SAAS,CAA6B;IAErC,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IASrC,OAAO,CAAC,MAAM;IAId,OAAO,CAAC,QAAQ;IAWhB,OAAO,CAAC,cAAc;IA+BtB,OAAO,CAAC,UAAU;IAmCT,MAAM;CA0BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}

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

@@ -1,14 +1,17 @@
 import { css as h, LitElement as v, html as g } from "lit";
 import { property as l, state as u, customElement as p } from "lit/decorators.js";
-import { h as b, r as f } from "../../chunks/premium.css-9I4kHrsl.js";
-var m = Object.defineProperty, w = Object.getOwnPropertyDescriptor, s = (e, t, i, o) => {
-  for (var r = o > 1 ? void 0 : o ? w(t, i) : t, a = e.length - 1, c; a >= 0; a--)
-    (c = e[a]) && (r = (o ? c(t, i, r) : c(r)) || r);
-  return o && r && m(t, i, r), r;
+import { h as b, r as f } from "../../chunks/premium.css-DHekUEUt.js";
+var m = Object.defineProperty, w = Object.getOwnPropertyDescriptor, c = (e, t, o, i) => {
+  for (var r = i > 1 ? void 0 : i ? w(t, o) : t, a = e.length - 1, s; a >= 0; a--)
+    (s = e[a]) && (r = (i ? s(t, o, r) : s(r)) || r);
+  return i && r && m(t, o, r), r;
 };
 let n = class extends v {
   constructor() {
-    super(...arguments), this.direction = "horizontal", this.defaultSize = 0.5, this.min = 0.1, this.max = 0.9, this._size = 0.5, this._activeMove = null, this._activeUp = null;
+    super(...arguments), this.direction = "horizontal", this.defaultSize = 0.5, this.min = 0.1, this.max = 0.9, this.handleLabel = "Resize panes", this._size = 0.5, this._activeMove = null, this._activeUp = null;
+  }
+  willUpdate(e) {
+    (e.has("min") || e.has("max")) && (this._size = this._clamp(this._size));
   }
   connectedCallback() {
     super.connectedCallback(), this._size = this._clamp(this.defaultSize);
@@ -29,15 +32,17 @@ let n = class extends v {
   }
   _onPointerDown(e) {
     e.preventDefault();
-    const t = e.currentTarget, i = e.pointerId;
-    t.setPointerCapture?.(i), t.setAttribute("data-dragging", "");
-    const o = this.getBoundingClientRect(), r = (c) => {
-      const d = this.direction === "horizontal" ? (c.clientX - o.left) / o.width : (c.clientY - o.top) / o.height;
+    const t = e.currentTarget;
+    t.focus();
+    const o = e.pointerId;
+    t.setPointerCapture?.(o), t.setAttribute("data-dragging", "");
+    const i = this.getBoundingClientRect(), r = (s) => {
+      const d = this.direction === "horizontal" ? (s.clientX - i.left) / i.width : (s.clientY - i.top) / i.height;
       this._setSize(d);
     }, a = () => {
       window.removeEventListener("pointermove", r), window.removeEventListener("pointerup", a), window.removeEventListener("pointercancel", a);
       try {
-        t.releasePointerCapture?.(i);
+        t.releasePointerCapture?.(o);
       } catch {
       }
       t.removeAttribute("data-dragging"), this._activeMove = null, this._activeUp = null;
@@ -45,13 +50,13 @@ let n = class extends v {
     this._activeMove = r, this._activeUp = a, window.addEventListener("pointermove", r), window.addEventListener("pointerup", a), window.addEventListener("pointercancel", a);
   }
   _onKeydown(e) {
-    const i = e.shiftKey ? 0.1 : 0.05, o = this.direction === "horizontal", r = o ? "ArrowLeft" : "ArrowUp", a = o ? "ArrowRight" : "ArrowDown";
+    const o = e.shiftKey ? 0.1 : 0.05, i = this.direction === "horizontal", r = i ? "ArrowLeft" : "ArrowUp", a = i ? "ArrowRight" : "ArrowDown";
     switch (e.key) {
       case r:
-        e.preventDefault(), this._setSize(this._size - i);
+        e.preventDefault(), this._setSize(this._size - o);
         break;
       case a:
-        e.preventDefault(), this._setSize(this._size + i);
+        e.preventDefault(), this._setSize(this._size + o);
         break;
       case "PageUp":
         e.preventDefault(), this._setSize(this._size - 0.1);
@@ -68,13 +73,14 @@ let n = class extends v {
     }
   }
   render() {
-    const e = this.direction === "horizontal", t = e ? `width: ${this._size * 100}%; height: 100%;` : `height: ${this._size * 100}%; width: 100%;`, i = e ? `width: ${(1 - this._size) * 100}%; height: 100%;` : `height: ${(1 - this._size) * 100}%; width: 100%;`;
+    const e = this.direction === "horizontal", t = e ? `width: ${this._size * 100}%; height: 100%;` : `height: ${this._size * 100}%; width: 100%;`, o = e ? `width: ${(1 - this._size) * 100}%; height: 100%;` : `height: ${(1 - this._size) * 100}%; width: 100%;`;
     return g`
       <div class="pane" style=${t}><slot name="start"></slot></div>
       <div
         class="handle"
         role="separator"
         tabindex="0"
+        aria-label=${this.handleLabel}
         aria-orientation=${e ? "vertical" : "horizontal"}
         aria-valuenow=${Math.round(this._size * 100)}
         aria-valuemin=${Math.round(this.min * 100)}
@@ -82,7 +88,7 @@ let n = class extends v {
         @pointerdown=${this._onPointerDown}
         @keydown=${this._onKeydown}
       ></div>
-      <div class="pane" style=${i}><slot name="end"></slot></div>
+      <div class="pane" style=${o}><slot name="end"></slot></div>
     `;
   }
 };
@@ -104,7 +110,10 @@ n.styles = [b, f, h`
     .handle {
       flex-shrink: 0;
       position: relative;
-      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      z-index: var(--cg-z-index-100);
+      transition:
+        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
     }
     :host([direction="horizontal"]) .handle {
       width: var(--cg-spacing-6);
@@ -145,12 +154,10 @@ n.styles = [b, f, h`
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
-      background:
-        var(--cg-color-surface-container-outlined),
-        var(--cg-color-surface-container-outlined),
-        var(--cg-color-surface-container-outlined);
       pointer-events: none;
-      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      transition:
+        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
     }
     :host([direction="horizontal"]) .handle::before {
       width: var(--cg-border-width-50);
@@ -174,31 +181,31 @@ n.styles = [b, f, h`
     :host([direction="horizontal"]) .handle:focus-visible {
       border-left-color: var(--cg-color-action-primary-border-default);
       border-right-color: var(--cg-color-action-primary-border-default);
-      background: color-mix(in srgb, var(--cg-color-action-primary-background-default) 20%, transparent);
+      background: var(--cg-overlay-accent-medium);
       outline: none;
     }
     :host([direction="vertical"]) .handle:hover,
     :host([direction="vertical"]) .handle:focus-visible {
       border-top-color: var(--cg-color-action-primary-border-default);
       border-bottom-color: var(--cg-color-action-primary-border-default);
-      background: color-mix(in srgb, var(--cg-color-action-primary-background-default) 20%, transparent);
+      background: var(--cg-overlay-accent-medium);
       outline: none;
     }
     .handle:hover::before,
     .handle:focus-visible::before {
-      background: var(--cg-color-action-primary-text-default);
+      background: var(--cg-color-accent-text);
     }
     :host([direction="horizontal"]) .handle:hover::before,
     :host([direction="horizontal"]) .handle:focus-visible::before {
       box-shadow:
-        calc(var(--cg-spacing-4) * -1) 0 0 0 var(--cg-color-action-primary-text-default),
-        var(--cg-spacing-4) 0 0 0 var(--cg-color-action-primary-text-default);
+        calc(var(--cg-spacing-4) * -1) 0 0 0 var(--cg-color-accent-text),
+        var(--cg-spacing-4) 0 0 0 var(--cg-color-accent-text);
     }
     :host([direction="vertical"]) .handle:hover::before,
     :host([direction="vertical"]) .handle:focus-visible::before {
       box-shadow:
-        0 calc(var(--cg-spacing-4) * -1) 0 0 var(--cg-color-action-primary-text-default),
-        0 var(--cg-spacing-4) 0 0 var(--cg-color-action-primary-text-default);
+        0 calc(var(--cg-spacing-4) * -1) 0 0 var(--cg-color-accent-text),
+        0 var(--cg-spacing-4) 0 0 var(--cg-color-accent-text);
     }
 
     /* Active drag — stronger tint while pointer is down. */
@@ -212,22 +219,25 @@ n.styles = [b, f, h`
         0 0 0 calc(var(--cg-focus-ring-offset) + var(--cg-focus-ring-width)) var(--cg-color-focus-ring);
     }
   `];
-s([
+c([
   l({ reflect: !0 })
 ], n.prototype, "direction", 2);
-s([
+c([
   l({ type: Number })
 ], n.prototype, "defaultSize", 2);
-s([
+c([
   l({ type: Number })
 ], n.prototype, "min", 2);
-s([
+c([
   l({ type: Number })
 ], n.prototype, "max", 2);
-s([
+c([
+  l({ attribute: "handle-label" })
+], n.prototype, "handleLabel", 2);
+c([
   u()
 ], n.prototype, "_size", 2);
-n = s([
+n = c([
   p("cg-resizable")
 ], n);
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"cg-resizable.js","sources":["../../../src/components/cg-resizable/cg-resizable.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-resizable\n * Two-pane split container with a draggable handle.\n *\n * @slot start - First pane (left or top).\n * @slot end - Second pane (right or bottom).\n *\n * @fires {CustomEvent<{size:number}>} cg-resize - When the split ratio changes.\n */\n@customElement('cg-resizable')\nexport class CgResizable extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      display: flex;\n      width: 100%;\n      height: 100%;\n      min-height: var(--cg-spacing-160);\n      overflow: hidden;\n    }\n    :host([direction=\"vertical\"]) { flex-direction: column; }\n\n    .pane {\n      overflow: auto;\n      position: relative;\n    }\n\n    .handle {\n      flex-shrink: 0;\n      position: relative;\n      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    :host([direction=\"horizontal\"]) .handle {\n      width: var(--cg-spacing-6);\n      cursor: col-resize;\n      background: transparent;\n      border-left: var(--cg-border-width-50) solid var(--cg-color-surface-container-border);\n      border-right: var(--cg-border-width-50) solid var(--cg-color-surface-container-border);\n    }\n    :host([direction=\"vertical\"]) .handle {\n      height: var(--cg-spacing-6);\n      cursor: row-resize;\n      background: transparent;\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-container-border);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-container-border);\n    }\n\n    /* Invisible hit area — extends the handle on the perpendicular axis to\n       hit the WCAG 2.5.5 / Cognivo 44px minimum touch-target requirement. */\n    .handle::after {\n      content: '';\n      position: absolute;\n      inset: 0;\n    }\n    :host([direction=\"horizontal\"]) .handle::after {\n      left: calc(var(--cg-spacing-20) * -1);\n      right: calc(var(--cg-spacing-20) * -1);\n    }\n    :host([direction=\"vertical\"]) .handle::after {\n      top: calc(var(--cg-spacing-20) * -1);\n      bottom: calc(var(--cg-spacing-20) * -1);\n    }\n\n    /* Visible grip glyph — three small bars centered on the handle so users\n       see it's draggable. */\n    .handle::before {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      background:\n        var(--cg-color-surface-container-outlined),\n        var(--cg-color-surface-container-outlined),\n        var(--cg-color-surface-container-outlined);\n      pointer-events: none;\n      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    :host([direction=\"horizontal\"]) .handle::before {\n      width: var(--cg-border-width-50);\n      height: var(--cg-spacing-24);\n      background: var(--cg-color-surface-container-outlined);\n      box-shadow:\n        calc(var(--cg-spacing-4) * -1) 0 0 0 var(--cg-color-surface-container-outlined),\n        var(--cg-spacing-4) 0 0 0 var(--cg-color-surface-container-outlined);\n    }\n    :host([direction=\"vertical\"]) .handle::before {\n      width: var(--cg-spacing-24);\n      height: var(--cg-border-width-50);\n      background: var(--cg-color-surface-container-outlined);\n      box-shadow:\n        0 calc(var(--cg-spacing-4) * -1) 0 0 var(--cg-color-surface-container-outlined),\n        0 var(--cg-spacing-4) 0 0 var(--cg-color-surface-container-outlined);\n    }\n\n    /* Hover + focus-visible — brand-accent borders + tinted fill. */\n    :host([direction=\"horizontal\"]) .handle:hover,\n    :host([direction=\"horizontal\"]) .handle:focus-visible {\n      border-left-color: var(--cg-color-action-primary-border-default);\n      border-right-color: var(--cg-color-action-primary-border-default);\n      background: color-mix(in srgb, var(--cg-color-action-primary-background-default) 20%, transparent);\n      outline: none;\n    }\n    :host([direction=\"vertical\"]) .handle:hover,\n    :host([direction=\"vertical\"]) .handle:focus-visible {\n      border-top-color: var(--cg-color-action-primary-border-default);\n      border-bottom-color: var(--cg-color-action-primary-border-default);\n      background: color-mix(in srgb, var(--cg-color-action-primary-background-default) 20%, transparent);\n      outline: none;\n    }\n    .handle:hover::before,\n    .handle:focus-visible::before {\n      background: var(--cg-color-action-primary-text-default);\n    }\n    :host([direction=\"horizontal\"]) .handle:hover::before,\n    :host([direction=\"horizontal\"]) .handle:focus-visible::before {\n      box-shadow:\n        calc(var(--cg-spacing-4) * -1) 0 0 0 var(--cg-color-action-primary-text-default),\n        var(--cg-spacing-4) 0 0 0 var(--cg-color-action-primary-text-default);\n    }\n    :host([direction=\"vertical\"]) .handle:hover::before,\n    :host([direction=\"vertical\"]) .handle:focus-visible::before {\n      box-shadow:\n        0 calc(var(--cg-spacing-4) * -1) 0 0 var(--cg-color-action-primary-text-default),\n        0 var(--cg-spacing-4) 0 0 var(--cg-color-action-primary-text-default);\n    }\n\n    /* Active drag — stronger tint while pointer is down. */\n    .handle[data-dragging] {\n      background: color-mix(in srgb, var(--cg-color-action-primary-background-default) 35%, transparent);\n    }\n\n    .handle:focus-visible {\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\n  @property({ reflect: true }) direction: 'horizontal' | 'vertical' = 'horizontal';\n  @property({ type: Number }) defaultSize = 0.5;\n  @property({ type: Number }) min = 0.1;\n  @property({ type: Number }) max = 0.9;\n\n  @state() private _size = 0.5;\n\n  private _activeMove: ((ev: PointerEvent) => void) | null = null;\n  private _activeUp: (() => void) | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._size = this._clamp(this.defaultSize);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    // Drop any in-progress drag listeners so an unmount mid-drag doesn't leak.\n    if (this._activeMove) window.removeEventListener('pointermove', this._activeMove);\n    if (this._activeUp) window.removeEventListener('pointerup', this._activeUp);\n    this._activeMove = null;\n    this._activeUp = null;\n  }\n\n  private _clamp(v: number): number {\n    return Math.max(this.min, Math.min(this.max, v));\n  }\n\n  private _setSize(v: number): void {\n    const next = this._clamp(v);\n    if (next === this._size) return;\n    this._size = next;\n    this.dispatchEvent(new CustomEvent('cg-resize', {\n      bubbles: true,\n      composed: true,\n      detail: { size: next },\n    }));\n  }\n\n  private _onPointerDown(e: PointerEvent): void {\n    e.preventDefault();\n    const handle = e.currentTarget as HTMLElement;\n    const pointerId = e.pointerId;\n    handle.setPointerCapture?.(pointerId);\n    handle.setAttribute('data-dragging', '');\n    const rect = this.getBoundingClientRect();\n    const move = (ev: PointerEvent) => {\n      const fraction =\n        this.direction === 'horizontal'\n          ? (ev.clientX - rect.left) / rect.width\n          : (ev.clientY - rect.top) / rect.height;\n      this._setSize(fraction);\n    };\n    const up = () => {\n      window.removeEventListener('pointermove', move);\n      window.removeEventListener('pointerup', up);\n      window.removeEventListener('pointercancel', up);\n      try { handle.releasePointerCapture?.(pointerId); } catch { /* already released */ }\n      handle.removeAttribute('data-dragging');\n      this._activeMove = null;\n      this._activeUp = null;\n    };\n    this._activeMove = move;\n    this._activeUp = up;\n    window.addEventListener('pointermove', move);\n    window.addEventListener('pointerup', up);\n    window.addEventListener('pointercancel', up);\n  }\n\n  private _onKeydown(e: KeyboardEvent): void {\n    // 5% per arrow press, 10% with Shift, 10% on PageUp/PageDown.\n    const baseStep = 0.05;\n    const step = e.shiftKey ? baseStep * 2 : baseStep;\n    const horizontal = this.direction === 'horizontal';\n    const decreaseKey = horizontal ? 'ArrowLeft' : 'ArrowUp';\n    const increaseKey = horizontal ? 'ArrowRight' : 'ArrowDown';\n    switch (e.key) {\n      case decreaseKey:\n        e.preventDefault();\n        this._setSize(this._size - step);\n        break;\n      case increaseKey:\n        e.preventDefault();\n        this._setSize(this._size + step);\n        break;\n      case 'PageUp':\n        e.preventDefault();\n        this._setSize(this._size - 0.1);\n        break;\n      case 'PageDown':\n        e.preventDefault();\n        this._setSize(this._size + 0.1);\n        break;\n      case 'Home':\n        e.preventDefault();\n        this._setSize(this.min);\n        break;\n      case 'End':\n        e.preventDefault();\n        this._setSize(this.max);\n        break;\n    }\n  }\n\n  override render() {\n    const horizontal = this.direction === 'horizontal';\n    const startStyle = horizontal\n      ? `width: ${this._size * 100}%; height: 100%;`\n      : `height: ${this._size * 100}%; width: 100%;`;\n    const endStyle = horizontal\n      ? `width: ${(1 - this._size) * 100}%; height: 100%;`\n      : `height: ${(1 - this._size) * 100}%; width: 100%;`;\n\n    return html`\n      <div class=\"pane\" style=${startStyle}><slot name=\"start\"></slot></div>\n      <div\n        class=\"handle\"\n        role=\"separator\"\n        tabindex=\"0\"\n        aria-orientation=${horizontal ? 'vertical' : 'horizontal'}\n        aria-valuenow=${Math.round(this._size * 100)}\n        aria-valuemin=${Math.round(this.min * 100)}\n        aria-valuemax=${Math.round(this.max * 100)}\n        @pointerdown=${this._onPointerDown}\n        @keydown=${this._onKeydown}\n      ></div>\n      <div class=\"pane\" style=${endStyle}><slot name=\"end\"></slot></div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-resizable': CgResizable;\n  }\n}\n"],"names":["CgResizable","LitElement","v","next","handle","pointerId","rect","move","ev","fraction","up","step","horizontal","decreaseKey","increaseKey","startStyle","endStyle","html","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}
+{"version":3,"file":"cg-resizable.js","sources":["../../../src/components/cg-resizable/cg-resizable.ts"],"sourcesContent":["import { LitElement, html, css, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/**\n * @element cg-resizable\n * Two-pane split container with a draggable handle.\n *\n * @slot start - First pane (left or top).\n * @slot end - Second pane (right or bottom).\n *\n * @fires {CustomEvent<{size:number}>} cg-resize - When the split ratio changes.\n */\n@customElement('cg-resizable')\nexport class CgResizable extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      display: flex;\n      width: 100%;\n      height: 100%;\n      min-height: var(--cg-spacing-160);\n      overflow: hidden;\n    }\n    :host([direction=\"vertical\"]) { flex-direction: column; }\n\n    .pane {\n      overflow: auto;\n      position: relative;\n    }\n\n    .handle {\n      flex-shrink: 0;\n      position: relative;\n      z-index: var(--cg-z-index-100);\n      transition:\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    :host([direction=\"horizontal\"]) .handle {\n      width: var(--cg-spacing-6);\n      cursor: col-resize;\n      background: transparent;\n      border-left: var(--cg-border-width-50) solid var(--cg-color-surface-container-border);\n      border-right: var(--cg-border-width-50) solid var(--cg-color-surface-container-border);\n    }\n    :host([direction=\"vertical\"]) .handle {\n      height: var(--cg-spacing-6);\n      cursor: row-resize;\n      background: transparent;\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-container-border);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-container-border);\n    }\n\n    /* Invisible hit area — extends the handle on the perpendicular axis to\n       hit the WCAG 2.5.5 / Cognivo 44px minimum touch-target requirement. */\n    .handle::after {\n      content: '';\n      position: absolute;\n      inset: 0;\n    }\n    :host([direction=\"horizontal\"]) .handle::after {\n      left: calc(var(--cg-spacing-20) * -1);\n      right: calc(var(--cg-spacing-20) * -1);\n    }\n    :host([direction=\"vertical\"]) .handle::after {\n      top: calc(var(--cg-spacing-20) * -1);\n      bottom: calc(var(--cg-spacing-20) * -1);\n    }\n\n    /* Visible grip glyph — three small bars centered on the handle so users\n       see it's draggable. */\n    .handle::before {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      pointer-events: none;\n      transition:\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    :host([direction=\"horizontal\"]) .handle::before {\n      width: var(--cg-border-width-50);\n      height: var(--cg-spacing-24);\n      background: var(--cg-color-surface-container-outlined);\n      box-shadow:\n        calc(var(--cg-spacing-4) * -1) 0 0 0 var(--cg-color-surface-container-outlined),\n        var(--cg-spacing-4) 0 0 0 var(--cg-color-surface-container-outlined);\n    }\n    :host([direction=\"vertical\"]) .handle::before {\n      width: var(--cg-spacing-24);\n      height: var(--cg-border-width-50);\n      background: var(--cg-color-surface-container-outlined);\n      box-shadow:\n        0 calc(var(--cg-spacing-4) * -1) 0 0 var(--cg-color-surface-container-outlined),\n        0 var(--cg-spacing-4) 0 0 var(--cg-color-surface-container-outlined);\n    }\n\n    /* Hover + focus-visible — brand-accent borders + tinted fill. */\n    :host([direction=\"horizontal\"]) .handle:hover,\n    :host([direction=\"horizontal\"]) .handle:focus-visible {\n      border-left-color: var(--cg-color-action-primary-border-default);\n      border-right-color: var(--cg-color-action-primary-border-default);\n      background: var(--cg-overlay-accent-medium);\n      outline: none;\n    }\n    :host([direction=\"vertical\"]) .handle:hover,\n    :host([direction=\"vertical\"]) .handle:focus-visible {\n      border-top-color: var(--cg-color-action-primary-border-default);\n      border-bottom-color: var(--cg-color-action-primary-border-default);\n      background: var(--cg-overlay-accent-medium);\n      outline: none;\n    }\n    .handle:hover::before,\n    .handle:focus-visible::before {\n      background: var(--cg-color-accent-text);\n    }\n    :host([direction=\"horizontal\"]) .handle:hover::before,\n    :host([direction=\"horizontal\"]) .handle:focus-visible::before {\n      box-shadow:\n        calc(var(--cg-spacing-4) * -1) 0 0 0 var(--cg-color-accent-text),\n        var(--cg-spacing-4) 0 0 0 var(--cg-color-accent-text);\n    }\n    :host([direction=\"vertical\"]) .handle:hover::before,\n    :host([direction=\"vertical\"]) .handle:focus-visible::before {\n      box-shadow:\n        0 calc(var(--cg-spacing-4) * -1) 0 0 var(--cg-color-accent-text),\n        0 var(--cg-spacing-4) 0 0 var(--cg-color-accent-text);\n    }\n\n    /* Active drag — stronger tint while pointer is down. */\n    .handle[data-dragging] {\n      background: color-mix(in srgb, var(--cg-color-action-primary-background-default) 35%, transparent);\n    }\n\n    .handle:focus-visible {\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\n  @property({ reflect: true }) direction: 'horizontal' | 'vertical' = 'horizontal';\n  @property({ type: Number }) defaultSize = 0.5;\n  @property({ type: Number }) min = 0.1;\n  @property({ type: Number }) max = 0.9;\n  /** Accessible name for the resize handle (window-splitter pattern). */\n  @property({ attribute: 'handle-label' }) handleLabel = 'Resize panes';\n\n  @state() private _size = 0.5;\n\n  protected override willUpdate(changed: PropertyValues<this>): void {\n    if (changed.has('min') || changed.has('max')) {\n      this._size = this._clamp(this._size);\n    }\n  }\n\n  private _activeMove: ((ev: PointerEvent) => void) | null = null;\n  private _activeUp: (() => void) | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._size = this._clamp(this.defaultSize);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    // Drop any in-progress drag listeners so an unmount mid-drag doesn't leak.\n    if (this._activeMove) window.removeEventListener('pointermove', this._activeMove);\n    if (this._activeUp) window.removeEventListener('pointerup', this._activeUp);\n    this._activeMove = null;\n    this._activeUp = null;\n  }\n\n  private _clamp(v: number): number {\n    return Math.max(this.min, Math.min(this.max, v));\n  }\n\n  private _setSize(v: number): void {\n    const next = this._clamp(v);\n    if (next === this._size) return;\n    this._size = next;\n    this.dispatchEvent(new CustomEvent('cg-resize', {\n      bubbles: true,\n      composed: true,\n      detail: { size: next },\n    }));\n  }\n\n  private _onPointerDown(e: PointerEvent): void {\n    e.preventDefault();\n    const handle = e.currentTarget as HTMLElement;\n    handle.focus();\n    const pointerId = e.pointerId;\n    handle.setPointerCapture?.(pointerId);\n    handle.setAttribute('data-dragging', '');\n    const rect = this.getBoundingClientRect();\n    const move = (ev: PointerEvent) => {\n      const fraction =\n        this.direction === 'horizontal'\n          ? (ev.clientX - rect.left) / rect.width\n          : (ev.clientY - rect.top) / rect.height;\n      this._setSize(fraction);\n    };\n    const up = () => {\n      window.removeEventListener('pointermove', move);\n      window.removeEventListener('pointerup', up);\n      window.removeEventListener('pointercancel', up);\n      try { handle.releasePointerCapture?.(pointerId); } catch { /* already released */ }\n      handle.removeAttribute('data-dragging');\n      this._activeMove = null;\n      this._activeUp = null;\n    };\n    this._activeMove = move;\n    this._activeUp = up;\n    window.addEventListener('pointermove', move);\n    window.addEventListener('pointerup', up);\n    window.addEventListener('pointercancel', up);\n  }\n\n  private _onKeydown(e: KeyboardEvent): void {\n    // 5% per arrow press, 10% with Shift, 10% on PageUp/PageDown.\n    const baseStep = 0.05;\n    const step = e.shiftKey ? baseStep * 2 : baseStep;\n    const horizontal = this.direction === 'horizontal';\n    const decreaseKey = horizontal ? 'ArrowLeft' : 'ArrowUp';\n    const increaseKey = horizontal ? 'ArrowRight' : 'ArrowDown';\n    switch (e.key) {\n      case decreaseKey:\n        e.preventDefault();\n        this._setSize(this._size - step);\n        break;\n      case increaseKey:\n        e.preventDefault();\n        this._setSize(this._size + step);\n        break;\n      case 'PageUp':\n        e.preventDefault();\n        this._setSize(this._size - 0.1);\n        break;\n      case 'PageDown':\n        e.preventDefault();\n        this._setSize(this._size + 0.1);\n        break;\n      case 'Home':\n        e.preventDefault();\n        this._setSize(this.min);\n        break;\n      case 'End':\n        e.preventDefault();\n        this._setSize(this.max);\n        break;\n    }\n  }\n\n  override render() {\n    const horizontal = this.direction === 'horizontal';\n    const startStyle = horizontal\n      ? `width: ${this._size * 100}%; height: 100%;`\n      : `height: ${this._size * 100}%; width: 100%;`;\n    const endStyle = horizontal\n      ? `width: ${(1 - this._size) * 100}%; height: 100%;`\n      : `height: ${(1 - this._size) * 100}%; width: 100%;`;\n\n    return html`\n      <div class=\"pane\" style=${startStyle}><slot name=\"start\"></slot></div>\n      <div\n        class=\"handle\"\n        role=\"separator\"\n        tabindex=\"0\"\n        aria-label=${this.handleLabel}\n        aria-orientation=${horizontal ? 'vertical' : 'horizontal'}\n        aria-valuenow=${Math.round(this._size * 100)}\n        aria-valuemin=${Math.round(this.min * 100)}\n        aria-valuemax=${Math.round(this.max * 100)}\n        @pointerdown=${this._onPointerDown}\n        @keydown=${this._onKeydown}\n      ></div>\n      <div class=\"pane\" style=${endStyle}><slot name=\"end\"></slot></div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cg-resizable': CgResizable;\n  }\n}\n"],"names":["CgResizable","LitElement","changed","v","next","handle","pointerId","rect","move","ev","fraction","up","step","horizontal","decreaseKey","increaseKey","startStyle","endStyle","html","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/cg-scroll-area/cg-scroll-area.d.ts

@@ -17,6 +17,14 @@ export declare class CgScrollArea extends LitElement {
     static styles: import('lit').CSSResult[];
     orientation: 'vertical' | 'horizontal' | 'both';
     type: 'auto' | 'always' | 'hover';
+    /** Accessible name for the scroll region (role="region" is only emitted
+     *  when named — an anonymous focusable container is an AT dead stop). */
+    label: string;
+    private _scrollable;
+    private _resizeObserver;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    private _updateScrollable;
     render(): import('lit').TemplateResult<1>;
 }
 declare global {

package/dist/components/cg-scroll-area/cg-scroll-area.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cg-scroll-area.d.ts","sourceRoot":"","sources":["../../../src/components/cg-scroll-area/cg-scroll-area.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C;;;;;;;;;;;;;GAaG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,4BA6EnB;IAE0B,WAAW,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAc;IAC7D,IAAI,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAW;IAEhE,MAAM;CAOhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}
+{"version":3,"file":"cg-scroll-area.d.ts","sourceRoot":"","sources":["../../../src/components/cg-scroll-area/cg-scroll-area.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;;;;;;;;;GAaG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,4BAgGnB;IAE0B,WAAW,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAc;IAC7D,IAAI,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAW;IACzE;6EACyE;IAC7D,KAAK,SAAM;IAEd,OAAO,CAAC,WAAW,CAAS;IAErC,OAAO,CAAC,eAAe,CAA6B;IAE3C,YAAY,IAAI,IAAI;IAQpB,oBAAoB,IAAI,IAAI;IAMrC,OAAO,CAAC,iBAAiB;IAMhB,MAAM;CAehB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}