@cognivo/components 0.8.0

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

@@ -0,0 +1,201 @@
+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;
+};
+let s = class extends d {
+  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));
+  }
+  _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";
+  }
+  _handleClick(e, r) {
+    if (this.readonly || this.disabled) return;
+    let t = e + 1;
+    if (this.precision === 0.5) {
+      const a = r.currentTarget.getBoundingClientRect();
+      r.clientX - a.left < a.width / 2 && (t = e + 0.5);
+    }
+    t === this.value && (t = 0), this.value = t, this.dispatchEvent(new CustomEvent("cg-rating-change", {
+      detail: { value: t },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  _handleMouseMove(e, 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);
+      } else
+        this._hoverValue = e + 1;
+  }
+  _handleMouseLeave() {
+    this._hoverValue = 0;
+  }
+  _handleKeydown(e) {
+    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;
+    else
+      return;
+    t !== this.value && (this.value = t, this.dispatchEvent(new CustomEvent("cg-rating-change", {
+      detail: { value: t },
+      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";
+    return u`
+      <div
+        class="rating"
+        role="radiogroup"
+        tabindex="0"
+        aria-label=${`Rated ${this.value} of ${this.max}`}
+        aria-valuenow=${this.value}
+        aria-valuemin="0"
+        aria-valuemax=${this.max}
+        @keydown=${this._handleKeydown}
+        @mouseleave=${this._handleMouseLeave}
+      >
+        ${Array.from({ length: this.max }, (r, t) => {
+      const i = this._getFillType(t);
+      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)}
+            >
+              <svg viewBox="0 0 24 24" fill=${i === "full" ? "currentColor" : "none"} stroke="currentColor" stroke-width="1.5" stroke-linejoin="round">
+                <path d=${e}/>
+              </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}/>
+                  </svg>
+                </div>
+              ` : v}
+            </div>
+          `;
+    })}
+      </div>
+    `;
+  }
+};
+s.styles = [g, m, c`
+    :host {
+      display: inline-flex;
+    }
+
+    .rating {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-component-rating-gap);
+      outline: none;
+    }
+
+    .star {
+      position: relative;
+      width: var(--cg-component-rating-size-md);
+      height: var(--cg-component-rating-size-md);
+      cursor: pointer;
+      color: var(--cg-color-surface-container-border);
+      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[data-filled="full"] { color: var(--cg-color-status-warning-text-default); }
+    .star[data-filled="half"] { color: var(--cg-color-status-warning-text-default); }
+
+    .star svg { width: 100%; height: 100%; }
+
+    .star .half {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 50%;
+      height: 100%;
+      overflow: hidden;
+    }
+    .star .half svg { width: 200%; }
+
+    /* Sizes */
+    :host([size="sm"]) .star {
+      width: var(--cg-component-rating-size-sm);
+      height: var(--cg-component-rating-size-sm);
+    }
+    :host([size="lg"]) .star {
+      width: var(--cg-component-rating-size-lg);
+      height: var(--cg-component-rating-size-lg);
+    }
+
+    :host([readonly]) .star { cursor: default; }
+    :host([readonly]) .star:hover { transform: none; }
+    :host([disabled]) .rating { opacity: 0.45; 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);
+      border-radius: var(--cg-border-radius-50);
+    }
+  `];
+s.formAssociated = !0;
+o([
+  n({ type: Number })
+], s.prototype, "value", 2);
+o([
+  n({ type: Number })
+], s.prototype, "max", 2);
+o([
+  n({ type: Number })
+], s.prototype, "precision", 2);
+o([
+  n({ type: Boolean, reflect: !0 })
+], s.prototype, "readonly", 2);
+o([
+  n({ type: Boolean, reflect: !0 })
+], s.prototype, "disabled", 2);
+o([
+  n({ reflect: !0 })
+], s.prototype, "size", 2);
+o([
+  n()
+], s.prototype, "name", 2);
+o([
+  f()
+], s.prototype, "_hoverValue", 2);
+s = o([
+  p("cg-rating")
+], s);
+export {
+  s as CgRating
+};
+//# sourceMappingURL=cg-rating.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,33 @@
+import { LitElement } from 'lit';
+/**
+ * @element cg-resizable
+ * Two-pane split container with a draggable handle.
+ *
+ * @slot start - First pane (left or top).
+ * @slot end - Second pane (right or bottom).
+ *
+ * @fires {CustomEvent<{size:number}>} cg-resize - When the split ratio changes.
+ */
+export declare class CgResizable extends LitElement {
+    static styles: import('lit').CSSResult[];
+    direction: 'horizontal' | 'vertical';
+    defaultSize: number;
+    min: number;
+    max: number;
+    private _size;
+    private _activeMove;
+    private _activeUp;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _clamp;
+    private _setSize;
+    private _onPointerDown;
+    private _onKeydown;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-resizable': CgResizable;
+    }
+}
+//# sourceMappingURL=cg-resizable.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,236 @@
+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;
+};
+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;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._size = this._clamp(this.defaultSize);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._activeMove && window.removeEventListener("pointermove", this._activeMove), this._activeUp && window.removeEventListener("pointerup", this._activeUp), this._activeMove = null, this._activeUp = null;
+  }
+  _clamp(e) {
+    return Math.max(this.min, Math.min(this.max, e));
+  }
+  _setSize(e) {
+    const t = this._clamp(e);
+    t !== this._size && (this._size = t, this.dispatchEvent(new CustomEvent("cg-resize", {
+      bubbles: !0,
+      composed: !0,
+      detail: { size: t }
+    })));
+  }
+  _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;
+      this._setSize(d);
+    }, a = () => {
+      window.removeEventListener("pointermove", r), window.removeEventListener("pointerup", a), window.removeEventListener("pointercancel", a);
+      try {
+        t.releasePointerCapture?.(i);
+      } catch {
+      }
+      t.removeAttribute("data-dragging"), this._activeMove = null, this._activeUp = null;
+    };
+    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";
+    switch (e.key) {
+      case r:
+        e.preventDefault(), this._setSize(this._size - i);
+        break;
+      case a:
+        e.preventDefault(), this._setSize(this._size + i);
+        break;
+      case "PageUp":
+        e.preventDefault(), this._setSize(this._size - 0.1);
+        break;
+      case "PageDown":
+        e.preventDefault(), this._setSize(this._size + 0.1);
+        break;
+      case "Home":
+        e.preventDefault(), this._setSize(this.min);
+        break;
+      case "End":
+        e.preventDefault(), this._setSize(this.max);
+        break;
+    }
+  }
+  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%;`;
+    return g`
+      <div class="pane" style=${t}><slot name="start"></slot></div>
+      <div
+        class="handle"
+        role="separator"
+        tabindex="0"
+        aria-orientation=${e ? "vertical" : "horizontal"}
+        aria-valuenow=${Math.round(this._size * 100)}
+        aria-valuemin=${Math.round(this.min * 100)}
+        aria-valuemax=${Math.round(this.max * 100)}
+        @pointerdown=${this._onPointerDown}
+        @keydown=${this._onKeydown}
+      ></div>
+      <div class="pane" style=${i}><slot name="end"></slot></div>
+    `;
+  }
+};
+n.styles = [b, f, h`
+    :host {
+      display: flex;
+      width: 100%;
+      height: 100%;
+      min-height: var(--cg-spacing-160);
+      overflow: hidden;
+    }
+    :host([direction="vertical"]) { flex-direction: column; }
+
+    .pane {
+      overflow: auto;
+      position: relative;
+    }
+
+    .handle {
+      flex-shrink: 0;
+      position: relative;
+      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    :host([direction="horizontal"]) .handle {
+      width: var(--cg-spacing-6);
+      cursor: col-resize;
+      background: transparent;
+      border-left: var(--cg-border-width-50) solid var(--cg-color-surface-container-border);
+      border-right: var(--cg-border-width-50) solid var(--cg-color-surface-container-border);
+    }
+    :host([direction="vertical"]) .handle {
+      height: var(--cg-spacing-6);
+      cursor: row-resize;
+      background: transparent;
+      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-container-border);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-container-border);
+    }
+
+    /* Invisible hit area — extends the handle on the perpendicular axis to
+       hit the WCAG 2.5.5 / Cognivo 44px minimum touch-target requirement. */
+    .handle::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+    }
+    :host([direction="horizontal"]) .handle::after {
+      left: calc(var(--cg-spacing-20) * -1);
+      right: calc(var(--cg-spacing-20) * -1);
+    }
+    :host([direction="vertical"]) .handle::after {
+      top: calc(var(--cg-spacing-20) * -1);
+      bottom: calc(var(--cg-spacing-20) * -1);
+    }
+
+    /* Visible grip glyph — three small bars centered on the handle so users
+       see it's draggable. */
+    .handle::before {
+      content: '';
+      position: absolute;
+      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);
+    }
+    :host([direction="horizontal"]) .handle::before {
+      width: var(--cg-border-width-50);
+      height: var(--cg-spacing-24);
+      background: var(--cg-color-surface-container-outlined);
+      box-shadow:
+        calc(var(--cg-spacing-4) * -1) 0 0 0 var(--cg-color-surface-container-outlined),
+        var(--cg-spacing-4) 0 0 0 var(--cg-color-surface-container-outlined);
+    }
+    :host([direction="vertical"]) .handle::before {
+      width: var(--cg-spacing-24);
+      height: var(--cg-border-width-50);
+      background: var(--cg-color-surface-container-outlined);
+      box-shadow:
+        0 calc(var(--cg-spacing-4) * -1) 0 0 var(--cg-color-surface-container-outlined),
+        0 var(--cg-spacing-4) 0 0 var(--cg-color-surface-container-outlined);
+    }
+
+    /* Hover + focus-visible — brand-accent borders + tinted fill. */
+    :host([direction="horizontal"]) .handle:hover,
+    :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);
+      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);
+      outline: none;
+    }
+    .handle:hover::before,
+    .handle:focus-visible::before {
+      background: var(--cg-color-action-primary-text-default);
+    }
+    :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);
+    }
+    :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);
+    }
+
+    /* Active drag — stronger tint while pointer is down. */
+    .handle[data-dragging] {
+      background: color-mix(in srgb, var(--cg-color-action-primary-background-default) 35%, transparent);
+    }
+
+    .handle:focus-visible {
+      box-shadow:
+        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);
+    }
+  `];
+s([
+  l({ reflect: !0 })
+], n.prototype, "direction", 2);
+s([
+  l({ type: Number })
+], n.prototype, "defaultSize", 2);
+s([
+  l({ type: Number })
+], n.prototype, "min", 2);
+s([
+  l({ type: Number })
+], n.prototype, "max", 2);
+s([
+  u()
+], n.prototype, "_size", 2);
+n = s([
+  p("cg-resizable")
+], n);
+export {
+  n as CgResizable
+};
+//# sourceMappingURL=cg-resizable.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,27 @@
+import { LitElement } from 'lit';
+/**
+ * @element cg-scroll-area
+ * Custom-styled scroll container with themed scrollbars.
+ * Uses native scrolling with styled thumbs.
+ *
+ * @example
+ * ```html
+ * <cg-scroll-area style="height: 300px;">
+ *   <div>Long content...</div>
+ * </cg-scroll-area>
+ * ```
+ *
+ * @slot - Scrollable content
+ */
+export declare class CgScrollArea extends LitElement {
+    static styles: import('lit').CSSResult[];
+    orientation: 'vertical' | 'horizontal' | 'both';
+    type: 'auto' | 'always' | 'hover';
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-scroll-area': CgScrollArea;
+    }
+}
+//# sourceMappingURL=cg-scroll-area.d.ts.map

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

@@ -0,0 +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"}