@cognivo/components 0.8.0

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

@@ -0,0 +1,268 @@
+import { css as h, LitElement as g, nothing as u, html as s } from "lit";
+import { property as a, customElement as p } from "lit/decorators.js";
+import { h as f, r as v } from "../../chunks/premium.css-9I4kHrsl.js";
+var b = Object.defineProperty, k = Object.getOwnPropertyDescriptor, t = (e, i, l, c) => {
+  for (var o = c > 1 ? void 0 : c ? k(i, l) : i, n = e.length - 1, d; n >= 0; n--)
+    (d = e[n]) && (o = (c ? d(i, l, o) : d(o)) || o);
+  return c && o && b(i, l, o), o;
+};
+let r = class extends g {
+  constructor() {
+    super(), this.label = "", this.description = "", this.name = "", this.value = "", this.checked = !1, this.disabled = !1, this.error = !1, this.success = !1, this.loading = !1, this.required = !1, this.variant = "dot", typeof this.attachInternals == "function" && (this._internals = this.attachInternals());
+  }
+  updated(e) {
+    super.updated(e), (e.has("checked") || e.has("value")) && this._internals?.setFormValue(this.checked ? this.value : null), (e.has("required") || e.has("checked")) && (this.required && !this.checked ? this._internals?.setValidity({ valueMissing: !0 }, "This field is required") : this._internals?.setValidity({}));
+  }
+  formResetCallback() {
+    this.checked = this.hasAttribute("checked");
+  }
+  formStateRestoreCallback(e) {
+    this.checked = e === this.value;
+  }
+  _select() {
+    this.disabled || this.loading || this.checked || (this.checked = !0, this.dispatchEvent(new CustomEvent("cg-change", {
+      detail: { value: this.value, checked: !0 },
+      bubbles: !0,
+      composed: !0
+    })));
+  }
+  _renderIndicator() {
+    return this.checked ? this.variant === "tick" ? s`
+        <svg class="tick-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+          <path class="tick-path" d="M20 6L9 17l-5-5"></path>
+        </svg>
+      ` : s`<span class="dot"></span>` : u;
+  }
+  render() {
+    return s`
+      <label
+        tabindex=${this.disabled ? "-1" : "0"}
+        role="radio"
+        aria-checked=${String(this.checked)}
+        aria-disabled=${String(this.disabled)}
+        aria-required=${this.required ? "true" : "false"}
+        @click=${this._select}
+        @keydown=${(e) => {
+      (e.key === " " || e.key === "Enter") && (e.preventDefault(), this._select());
+    }}
+      >
+        <input type="radio" .checked=${this.checked}
+          ?disabled=${this.disabled} name=${this.name} value=${this.value}
+          tabindex="-1" aria-hidden="true"
+          @click=${(e) => e.stopPropagation()} />
+
+        ${this.loading ? s`<span class="loading-spinner" aria-hidden="true"></span>` : s`
+        <span class="circle ${this.checked ? "checked" : ""}">
+          ${this._renderIndicator()}
+        </span>`}
+
+        ${this.label ? s`
+          <span class="text-group">
+            <span class="label-text">${this.label}</span>
+            ${this.description ? s`<span class="description">${this.description}</span>` : u}
+          </span>
+        ` : u}
+      </label>
+    `;
+  }
+};
+r.formAssociated = !0;
+r.styles = [f, v, h`
+    label {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      cursor: pointer;
+      padding: var(--cg-spacing-6) 0;
+      min-height: 44px;
+      -webkit-tap-highlight-color: transparent;
+      user-select: none;
+    }
+    :host([disabled]) label { cursor: not-allowed; }
+    :host([disabled]) .circle {
+      background: var(--cg-color-radio-background-disabled);
+      border-color: var(--cg-color-radio-border-disabled);
+    }
+    :host([disabled]) .dot {
+      background: var(--cg-color-radio-dot-disabled);
+    }
+    :host([disabled]) .tick-icon {
+      color: var(--cg-color-radio-dot-disabled);
+    }
+
+    /* ── Circle ── */
+    .circle {
+      width: var(--cg-spacing-20);
+      height: var(--cg-spacing-20);
+      flex-shrink: 0;
+      border: var(--cg-border-width-100) solid var(--cg-color-radio-border-default);
+      border-radius: var(--cg-border-radius-full);
+      background: var(--cg-color-radio-background-default);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition:
+        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        background var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);
+    }
+
+    /* Hover */
+    :host(:not([disabled])) label:hover .circle {
+      border-color: var(--cg-color-radio-border-checked);
+      background: var(--cg-color-radio-background-hover);
+    }
+
+    /* Press */
+    :host(:not([disabled])) label:active .circle {
+      transform: scale(var(--cg-interaction-press-scale));
+    }
+
+    /* Focus ring */
+    label:focus-visible .circle {
+      border-color: var(--cg-color-radio-border-focus);
+      box-shadow: 0 0 0 var(--cg-spacing-2) var(--cg-overlay-accent-strong);
+      outline: none;
+    }
+
+    /* Checked */
+    .circle.checked {
+      border-color: var(--cg-color-radio-border-checked);
+      background: var(--cg-color-radio-background-checked);
+      animation: circlePop var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);
+    }
+
+    @keyframes circlePop {
+      0% { transform: scale(1); }
+      30% { transform: scale(0.85); }
+      60% { transform: scale(1.08); }
+      80% { transform: scale(0.97); }
+      100% { transform: scale(1); }
+    }
+
+    /* ── Dot indicator ── */
+    .dot {
+      width: 10px;
+      height: 10px;
+      border-radius: var(--cg-border-radius-full);
+      background: var(--cg-color-radio-dot-default);
+      animation: dotIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) forwards;
+    }
+
+    @keyframes dotIn {
+      0% { transform: scale(0); }
+      60% { transform: scale(1.2); }
+      100% { transform: scale(1); }
+    }
+
+    /* ── Tick indicator — stroke reveal ── */
+    .tick-icon {
+      width: var(--cg-spacing-12);
+      height: var(--cg-spacing-12);
+      color: var(--cg-color-radio-dot-default);
+      overflow: visible;
+    }
+
+    .tick-icon .tick-path {
+      stroke-dasharray: 24;
+      stroke-dashoffset: 24;
+      animation: drawRadioTick var(--cg-transition-duration-default) 60ms var(--cg-transition-easing-ease-out) forwards;
+    }
+
+    @keyframes drawRadioTick {
+      to { stroke-dashoffset: 0; }
+    }
+
+    /* Hidden native input */
+    input {
+      position: absolute;
+      opacity: 0;
+      width: 0;
+      height: 0;
+      pointer-events: none;
+    }
+
+    /* ── Error state ── */
+    :host([error]) .circle { border-color: var(--cg-color-status-error-text-default); }
+    :host([error]) .circle.checked { border-color: var(--cg-color-status-error-text-default); }
+    :host([error]) .dot { background: var(--cg-color-status-error-text-default); }
+    :host([error]) .tick-icon { color: var(--cg-color-status-error-text-default); }
+    :host([error]) .label-text { color: var(--cg-color-status-error-text-default); }
+
+    /* ── Success state ── */
+    :host([success]) .circle { border-color: var(--cg-color-status-success-text-default); }
+    :host([success]) .circle.checked { border-color: var(--cg-color-status-success-text-default); }
+    :host([success]) .dot { background: var(--cg-color-status-success-text-default); }
+    :host([success]) .tick-icon { color: var(--cg-color-status-success-text-default); }
+    :host([success]) .label-text { color: var(--cg-color-status-success-text-default); }
+
+    /* ── Loading state ── */
+    :host([loading]) label { pointer-events: none; opacity: 0.5; }
+    .loading-spinner {
+      width: var(--cg-spacing-20);
+      height: var(--cg-spacing-20);
+      flex-shrink: 0;
+      border: var(--cg-border-width-100) solid var(--cg-color-loading-spinner-secondary);
+      border-top-color: var(--cg-color-loading-spinner-primary);
+      border-radius: var(--cg-border-radius-full);
+      animation: cg-radio-spin var(--cg-transition-duration-slow) linear infinite;
+    }
+    @keyframes cg-radio-spin {
+      to { transform: rotate(360deg); }
+    }
+
+    /* Text */
+    .text-group { display: flex; flex-direction: column; gap: var(--cg-spacing-2); }
+    .label-text {
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-medium);
+      color: var(--cg-color-surface-base-text);
+      line-height: var(--cg-line-height-snug);
+    }
+    .description {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-container-outlined);
+      line-height: var(--cg-line-height-snug);
+    }
+  `];
+t([
+  a()
+], r.prototype, "label", 2);
+t([
+  a()
+], r.prototype, "description", 2);
+t([
+  a()
+], r.prototype, "name", 2);
+t([
+  a()
+], r.prototype, "value", 2);
+t([
+  a({ type: Boolean })
+], r.prototype, "checked", 2);
+t([
+  a({ type: Boolean, reflect: !0 })
+], r.prototype, "disabled", 2);
+t([
+  a({ type: Boolean, reflect: !0 })
+], r.prototype, "error", 2);
+t([
+  a({ type: Boolean, reflect: !0 })
+], r.prototype, "success", 2);
+t([
+  a({ type: Boolean, reflect: !0 })
+], r.prototype, "loading", 2);
+t([
+  a({ type: Boolean })
+], r.prototype, "required", 2);
+t([
+  a({ reflect: !0 })
+], r.prototype, "variant", 2);
+r = t([
+  p("cg-radio")
+], r);
+export {
+  r as CgRadio
+};
+//# sourceMappingURL=cg-radio.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-radio.js","sources":["../../../src/components/cg-radio/cg-radio.ts"],"sourcesContent":["import { LitElement, html, css, nothing, type PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/**\n * @element cg-radio\n * Radio button with dot or tick indicator and spring animation.\n *\n * @example\n * ```html\n * <cg-radio label=\"Option A\" value=\"a\"></cg-radio>\n * <cg-radio label=\"Option B\" value=\"b\" checked></cg-radio>\n * <cg-radio label=\"With tick\" value=\"c\" variant=\"tick\" checked></cg-radio>\n * ```\n *\n * @fires {CustomEvent<{value: string, checked: true}>} cg-change - When selected\n */\n@customElement('cg-radio')\nexport class CgRadio extends LitElement {\n  static formAssociated = true;\n  private _internals: ElementInternals | undefined;\n\n  constructor() {\n    super();\n    if (typeof this.attachInternals === 'function') {\n      this._internals = this.attachInternals();\n    }\n  }\n\n  static override styles = [hostBlock, reducedMotion, css`\n    label {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      cursor: pointer;\n      padding: var(--cg-spacing-6) 0;\n      min-height: 44px;\n      -webkit-tap-highlight-color: transparent;\n      user-select: none;\n    }\n    :host([disabled]) label { cursor: not-allowed; }\n    :host([disabled]) .circle {\n      background: var(--cg-color-radio-background-disabled);\n      border-color: var(--cg-color-radio-border-disabled);\n    }\n    :host([disabled]) .dot {\n      background: var(--cg-color-radio-dot-disabled);\n    }\n    :host([disabled]) .tick-icon {\n      color: var(--cg-color-radio-dot-disabled);\n    }\n\n    /* ── Circle ── */\n    .circle {\n      width: var(--cg-spacing-20);\n      height: var(--cg-spacing-20);\n      flex-shrink: 0;\n      border: var(--cg-border-width-100) solid var(--cg-color-radio-border-default);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-radio-background-default);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition:\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        background var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);\n    }\n\n    /* Hover */\n    :host(:not([disabled])) label:hover .circle {\n      border-color: var(--cg-color-radio-border-checked);\n      background: var(--cg-color-radio-background-hover);\n    }\n\n    /* Press */\n    :host(:not([disabled])) label:active .circle {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n\n    /* Focus ring */\n    label:focus-visible .circle {\n      border-color: var(--cg-color-radio-border-focus);\n      box-shadow: 0 0 0 var(--cg-spacing-2) var(--cg-overlay-accent-strong);\n      outline: none;\n    }\n\n    /* Checked */\n    .circle.checked {\n      border-color: var(--cg-color-radio-border-checked);\n      background: var(--cg-color-radio-background-checked);\n      animation: circlePop var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);\n    }\n\n    @keyframes circlePop {\n      0% { transform: scale(1); }\n      30% { transform: scale(0.85); }\n      60% { transform: scale(1.08); }\n      80% { transform: scale(0.97); }\n      100% { transform: scale(1); }\n    }\n\n    /* ── Dot indicator ── */\n    .dot {\n      width: 10px;\n      height: 10px;\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-radio-dot-default);\n      animation: dotIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) forwards;\n    }\n\n    @keyframes dotIn {\n      0% { transform: scale(0); }\n      60% { transform: scale(1.2); }\n      100% { transform: scale(1); }\n    }\n\n    /* ── Tick indicator — stroke reveal ── */\n    .tick-icon {\n      width: var(--cg-spacing-12);\n      height: var(--cg-spacing-12);\n      color: var(--cg-color-radio-dot-default);\n      overflow: visible;\n    }\n\n    .tick-icon .tick-path {\n      stroke-dasharray: 24;\n      stroke-dashoffset: 24;\n      animation: drawRadioTick var(--cg-transition-duration-default) 60ms var(--cg-transition-easing-ease-out) forwards;\n    }\n\n    @keyframes drawRadioTick {\n      to { stroke-dashoffset: 0; }\n    }\n\n    /* Hidden native input */\n    input {\n      position: absolute;\n      opacity: 0;\n      width: 0;\n      height: 0;\n      pointer-events: none;\n    }\n\n    /* ── Error state ── */\n    :host([error]) .circle { border-color: var(--cg-color-status-error-text-default); }\n    :host([error]) .circle.checked { border-color: var(--cg-color-status-error-text-default); }\n    :host([error]) .dot { background: var(--cg-color-status-error-text-default); }\n    :host([error]) .tick-icon { color: var(--cg-color-status-error-text-default); }\n    :host([error]) .label-text { color: var(--cg-color-status-error-text-default); }\n\n    /* ── Success state ── */\n    :host([success]) .circle { border-color: var(--cg-color-status-success-text-default); }\n    :host([success]) .circle.checked { border-color: var(--cg-color-status-success-text-default); }\n    :host([success]) .dot { background: var(--cg-color-status-success-text-default); }\n    :host([success]) .tick-icon { color: var(--cg-color-status-success-text-default); }\n    :host([success]) .label-text { color: var(--cg-color-status-success-text-default); }\n\n    /* ── Loading state ── */\n    :host([loading]) label { pointer-events: none; opacity: 0.5; }\n    .loading-spinner {\n      width: var(--cg-spacing-20);\n      height: var(--cg-spacing-20);\n      flex-shrink: 0;\n      border: var(--cg-border-width-100) solid var(--cg-color-loading-spinner-secondary);\n      border-top-color: var(--cg-color-loading-spinner-primary);\n      border-radius: var(--cg-border-radius-full);\n      animation: cg-radio-spin var(--cg-transition-duration-slow) linear infinite;\n    }\n    @keyframes cg-radio-spin {\n      to { transform: rotate(360deg); }\n    }\n\n    /* Text */\n    .text-group { display: flex; flex-direction: column; gap: var(--cg-spacing-2); }\n    .label-text {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-base-text);\n      line-height: var(--cg-line-height-snug);\n    }\n    .description {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n      line-height: var(--cg-line-height-snug);\n    }\n  `];\n\n  @property() label = '';\n  @property() description = '';\n  @property() name = '';\n  @property() value = '';\n  @property({ type: Boolean }) checked = false;\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ type: Boolean, reflect: true }) error = false;\n  @property({ type: Boolean, reflect: true }) success = false;\n  @property({ type: Boolean, reflect: true }) loading = false;\n  @property({ type: Boolean }) required = false;\n  @property({ reflect: true }) variant: 'dot' | 'tick' = 'dot';\n\n  override updated(changed: PropertyValues) {\n    super.updated(changed);\n    if (changed.has('checked') || changed.has('value')) {\n      this._internals?.setFormValue(this.checked ? this.value : null);\n    }\n    if (changed.has('required') || changed.has('checked')) {\n      if (this.required && !this.checked) {\n        this._internals?.setValidity({ valueMissing: true }, 'This field is required');\n      } else {\n        this._internals?.setValidity({});\n      }\n    }\n  }\n\n  formResetCallback() {\n    this.checked = this.hasAttribute('checked');\n  }\n\n  formStateRestoreCallback(state: string) {\n    this.checked = state === this.value;\n  }\n\n  private _select() {\n    if (this.disabled || this.loading || this.checked) return;\n    this.checked = true;\n    this.dispatchEvent(new CustomEvent('cg-change', {\n      detail: { value: this.value, checked: true },\n      bubbles: true, composed: true,\n    }));\n  }\n\n  private _renderIndicator() {\n    if (!this.checked) return nothing;\n    if (this.variant === 'tick') {\n      return html`\n        <svg class=\"tick-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path class=\"tick-path\" d=\"M20 6L9 17l-5-5\"></path>\n        </svg>\n      `;\n    }\n    return html`<span class=\"dot\"></span>`;\n  }\n\n  override render() {\n    return html`\n      <label\n        tabindex=${this.disabled ? '-1' : '0'}\n        role=\"radio\"\n        aria-checked=${String(this.checked)}\n        aria-disabled=${String(this.disabled)}\n        aria-required=${this.required ? 'true' : 'false'}\n        @click=${this._select}\n        @keydown=${(e: KeyboardEvent) => { if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); this._select(); } }}\n      >\n        <input type=\"radio\" .checked=${this.checked}\n          ?disabled=${this.disabled} name=${this.name} value=${this.value}\n          tabindex=\"-1\" aria-hidden=\"true\"\n          @click=${(e: Event) => e.stopPropagation()} />\n\n        ${this.loading ? html`<span class=\"loading-spinner\" aria-hidden=\"true\"></span>` : html`\n        <span class=\"circle ${this.checked ? 'checked' : ''}\">\n          ${this._renderIndicator()}\n        </span>`}\n\n        ${this.label ? html`\n          <span class=\"text-group\">\n            <span class=\"label-text\">${this.label}</span>\n            ${this.description ? html`<span class=\"description\">${this.description}</span>` : nothing}\n          </span>\n        ` : nothing}\n      </label>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap { 'cg-radio': CgRadio; }\n}\n"],"names":["CgRadio","LitElement","changed","state","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/components/cg-radio-group/cg-radio-group.d.ts

@@ -0,0 +1,49 @@
+import { LitElement } from 'lit';
+/**
+ * @element cg-radio-group
+ * Manages a group of `<cg-radio>` elements with WAI-ARIA keyboard navigation.
+ *
+ * @example
+ * ```html
+ * <cg-radio-group name="color" value="red" label="Pick a color">
+ *   <cg-radio label="Red" value="red"></cg-radio>
+ *   <cg-radio label="Blue" value="blue"></cg-radio>
+ * </cg-radio-group>
+ * ```
+ *
+ * @slot - Default slot for `<cg-radio>` children
+ *
+ * @fires {CustomEvent<{value: string}>} cg-change - When the selected value changes
+ *
+ * @cssprop [--cg-spacing-8=8px] - Gap between radio items (vertical)
+ * @cssprop [--cg-spacing-16=16px] - Gap between radio items (horizontal)
+ */
+export declare class CgRadioGroup extends LitElement {
+    static styles: import('lit').CSSResult[];
+    /** Shared name for all child radios */
+    name: string;
+    /** Currently selected value */
+    value: string;
+    /** Accessible group label */
+    label: string;
+    /** Disables all child radios */
+    disabled: boolean;
+    /** Layout direction */
+    orientation: 'vertical' | 'horizontal';
+    private _radios;
+    private _getRadios;
+    private _syncRadios;
+    private _updateTabindex;
+    private _handleSlotChange;
+    private _handleChange;
+    private _handleKeydown;
+    private _selectRadio;
+    updated(changed: Map<string, unknown>): void;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-radio-group': CgRadioGroup;
+    }
+}
+//# sourceMappingURL=cg-radio-group.d.ts.map

package/dist/components/cg-radio-group/cg-radio-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-radio-group.d.ts","sourceRoot":"","sources":["../../../src/components/cg-radio-group/cg-radio-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAKrD;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,4BAgBnB;IAEH,uCAAuC;IAC3B,IAAI,SAAM;IAEtB,+BAA+B;IACnB,KAAK,SAAM;IAEvB,6BAA6B;IACjB,KAAK,SAAM;IAEvB,gCAAgC;IACY,QAAQ,UAAS;IAE7D,uBAAuB;IACM,WAAW,EAAE,UAAU,GAAG,YAAY,CAAc;IAEjF,OAAO,CAAC,OAAO,CAAiB;IAEhC,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,eAAe;IAYvB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,aAAa;IAsBrB,OAAO,CAAC,cAAc;IAuCtB,OAAO,CAAC,YAAY;IAiBX,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAMrC,MAAM;CAahB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAAG,gBAAgB,EAAE,YAAY,CAAC;KAAE;CACpE"}

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

@@ -0,0 +1,142 @@
+import { css as h, LitElement as c, nothing as u, html as p } from "lit";
+import { property as d, customElement as f } from "lit/decorators.js";
+import { h as g, r as v } from "../../chunks/premium.css-9I4kHrsl.js";
+var b = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, l = (e, t, o, s) => {
+  for (var a = s > 1 ? void 0 : s ? _(t, o) : t, i = e.length - 1, n; i >= 0; i--)
+    (n = e[i]) && (a = (s ? n(t, o, a) : n(a)) || a);
+  return s && a && b(t, o, a), a;
+};
+let r = class extends c {
+  constructor() {
+    super(...arguments), this.name = "", this.value = "", this.label = "", this.disabled = !1, this.orientation = "vertical", this._radios = [];
+  }
+  _getRadios() {
+    const e = this.shadowRoot?.querySelector("slot");
+    return e ? e.assignedElements({ flatten: !0 }).filter((t) => t.tagName === "CG-RADIO") : [];
+  }
+  _syncRadios() {
+    this._radios = this._getRadios();
+    for (const e of this._radios)
+      this.name && (e.name = this.name), this.disabled && (e.disabled = !0), e.checked = e.value === this.value;
+    this._updateTabindex();
+  }
+  _updateTabindex() {
+    const e = this._radios.filter((s) => !s.disabled);
+    if (e.length === 0) return;
+    const o = e.find((s) => s.checked) ?? e[0];
+    for (const s of this._radios)
+      s.tabIndex = s === o ? 0 : -1;
+  }
+  _handleSlotChange() {
+    this._syncRadios();
+  }
+  _handleChange(e) {
+    const t = e.detail;
+    if (!t) return;
+    const o = t.value;
+    if (o !== this.value) {
+      this.value = o;
+      for (const s of this._radios)
+        s.checked = s.value === o;
+      this._updateTabindex(), this.dispatchEvent(new CustomEvent("cg-change", {
+        detail: { value: o },
+        bubbles: !0,
+        composed: !0
+      }));
+    }
+  }
+  _handleKeydown(e) {
+    const t = this._radios.filter((n) => !n.disabled);
+    if (t.length === 0 || !["ArrowDown", "ArrowRight", "ArrowUp", "ArrowLeft", "Home", "End"].includes(e.key)) return;
+    e.preventDefault();
+    const s = t.findIndex((n) => n.checked);
+    let a;
+    switch (e.key) {
+      case "ArrowDown":
+      case "ArrowRight":
+        a = s === -1 ? 0 : (s + 1) % t.length;
+        break;
+      case "ArrowUp":
+      case "ArrowLeft":
+        a = s === -1 ? t.length - 1 : (s - 1 + t.length) % t.length;
+        break;
+      case "Home":
+        a = 0;
+        break;
+      case "End":
+        a = t.length - 1;
+        break;
+      default:
+        return;
+    }
+    const i = t[a];
+    i && (this._selectRadio(i), i.focus());
+  }
+  _selectRadio(e) {
+    if (e.value !== this.value) {
+      this.value = e.value;
+      for (const t of this._radios)
+        t.checked = t === e;
+      this._updateTabindex(), this.dispatchEvent(new CustomEvent("cg-change", {
+        detail: { value: e.value },
+        bubbles: !0,
+        composed: !0
+      }));
+    }
+  }
+  updated(e) {
+    (e.has("value") || e.has("name") || e.has("disabled")) && this._syncRadios();
+  }
+  render() {
+    return p`
+      <div
+        class="group"
+        role="radiogroup"
+        aria-label=${this.label || u}
+        @cg-change=${this._handleChange}
+        @keydown=${this._handleKeydown}
+      >
+        <slot @slotchange=${this._handleSlotChange}></slot>
+      </div>
+    `;
+  }
+};
+r.styles = [g, v, h`
+    :host {
+      display: block;
+    }
+
+    .group {
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-8);
+    }
+
+    :host([orientation="horizontal"]) .group {
+      flex-direction: row;
+      gap: var(--cg-spacing-16);
+      flex-wrap: wrap;
+    }
+  `];
+l([
+  d()
+], r.prototype, "name", 2);
+l([
+  d()
+], r.prototype, "value", 2);
+l([
+  d()
+], r.prototype, "label", 2);
+l([
+  d({ type: Boolean, reflect: !0 })
+], r.prototype, "disabled", 2);
+l([
+  d({ reflect: !0 })
+], r.prototype, "orientation", 2);
+r = l([
+  f("cg-radio-group")
+], r);
+export {
+  r as CgRadioGroup
+};
+//# sourceMappingURL=cg-radio-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-radio-group.js","sources":["../../../src/components/cg-radio-group/cg-radio-group.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\nimport type { CgRadio } from '../cg-radio/cg-radio.js';\n\n/**\n * @element cg-radio-group\n * Manages a group of `<cg-radio>` elements with WAI-ARIA keyboard navigation.\n *\n * @example\n * ```html\n * <cg-radio-group name=\"color\" value=\"red\" label=\"Pick a color\">\n *   <cg-radio label=\"Red\" value=\"red\"></cg-radio>\n *   <cg-radio label=\"Blue\" value=\"blue\"></cg-radio>\n * </cg-radio-group>\n * ```\n *\n * @slot - Default slot for `<cg-radio>` children\n *\n * @fires {CustomEvent<{value: string}>} cg-change - When the selected value changes\n *\n * @cssprop [--cg-spacing-8=8px] - Gap between radio items (vertical)\n * @cssprop [--cg-spacing-16=16px] - Gap between radio items (horizontal)\n */\n@customElement('cg-radio-group')\nexport class CgRadioGroup extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      display: block;\n    }\n\n    .group {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-8);\n    }\n\n    :host([orientation=\"horizontal\"]) .group {\n      flex-direction: row;\n      gap: var(--cg-spacing-16);\n      flex-wrap: wrap;\n    }\n  `];\n\n  /** Shared name for all child radios */\n  @property() name = '';\n\n  /** Currently selected value */\n  @property() value = '';\n\n  /** Accessible group label */\n  @property() label = '';\n\n  /** Disables all child radios */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Layout direction */\n  @property({ reflect: true }) orientation: 'vertical' | 'horizontal' = 'vertical';\n\n  private _radios: CgRadio[] = [];\n\n  private _getRadios(): CgRadio[] {\n    const slot = this.shadowRoot?.querySelector('slot');\n    if (!slot) return [];\n    return slot.assignedElements({ flatten: true })\n      .filter((el): el is CgRadio => el.tagName === 'CG-RADIO') as CgRadio[];\n  }\n\n  private _syncRadios() {\n    this._radios = this._getRadios();\n\n    for (const radio of this._radios) {\n      if (this.name) radio.name = this.name;\n      if (this.disabled) radio.disabled = true;\n      radio.checked = radio.value === this.value;\n    }\n\n    this._updateTabindex();\n  }\n\n  private _updateTabindex() {\n    const enabledRadios = this._radios.filter(r => !r.disabled);\n    if (enabledRadios.length === 0) return;\n\n    const selected = enabledRadios.find(r => r.checked);\n    const focusTarget = selected ?? enabledRadios[0];\n\n    for (const radio of this._radios) {\n      radio.tabIndex = radio === focusTarget ? 0 : -1;\n    }\n  }\n\n  private _handleSlotChange() {\n    this._syncRadios();\n  }\n\n  private _handleChange(e: Event) {\n    const detail = (e as CustomEvent).detail;\n    if (!detail) return;\n\n    const newValue = detail.value as string;\n    if (newValue === this.value) return;\n\n    this.value = newValue;\n\n    // Deselect all others and update tabindex\n    for (const radio of this._radios) {\n      radio.checked = radio.value === newValue;\n    }\n    this._updateTabindex();\n\n    this.dispatchEvent(new CustomEvent('cg-change', {\n      detail: { value: newValue },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _handleKeydown(e: KeyboardEvent) {\n    const enabledRadios = this._radios.filter(r => !r.disabled);\n    if (enabledRadios.length === 0) return;\n\n    const keys = ['ArrowDown', 'ArrowRight', 'ArrowUp', 'ArrowLeft', 'Home', 'End'];\n    if (!keys.includes(e.key)) return;\n\n    e.preventDefault();\n\n    const currentIndex = enabledRadios.findIndex(r => r.checked);\n    let nextIndex: number;\n\n    switch (e.key) {\n      case 'ArrowDown':\n      case 'ArrowRight':\n        nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % enabledRadios.length;\n        break;\n      case 'ArrowUp':\n      case 'ArrowLeft':\n        nextIndex = currentIndex === -1\n          ? enabledRadios.length - 1\n          : (currentIndex - 1 + enabledRadios.length) % enabledRadios.length;\n        break;\n      case 'Home':\n        nextIndex = 0;\n        break;\n      case 'End':\n        nextIndex = enabledRadios.length - 1;\n        break;\n      default:\n        return;\n    }\n\n    const target = enabledRadios[nextIndex];\n    if (!target) return;\n    this._selectRadio(target);\n    target.focus();\n  }\n\n  private _selectRadio(radio: CgRadio) {\n    if (radio.value === this.value) return;\n\n    this.value = radio.value;\n\n    for (const r of this._radios) {\n      r.checked = r === radio;\n    }\n    this._updateTabindex();\n\n    this.dispatchEvent(new CustomEvent('cg-change', {\n      detail: { value: radio.value },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('value') || changed.has('name') || changed.has('disabled')) {\n      this._syncRadios();\n    }\n  }\n\n  override render() {\n    return html`\n      <div\n        class=\"group\"\n        role=\"radiogroup\"\n        aria-label=${this.label || nothing}\n        @cg-change=${this._handleChange}\n        @keydown=${this._handleKeydown}\n      >\n        <slot @slotchange=${this._handleSlotChange}></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap { 'cg-radio-group': CgRadioGroup; }\n}\n"],"names":["CgRadioGroup","LitElement","slot","el","radio","enabledRadios","r","focusTarget","detail","newValue","currentIndex","nextIndex","target","changed","html","nothing","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}

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

@@ -0,0 +1,41 @@
+import { LitElement } from 'lit';
+/**
+ * @element cg-rating
+ * Star rating input with keyboard navigation, half-star precision, and clear.
+ *
+ * @example
+ * ```html
+ * <cg-rating value="4" max="5"></cg-rating>
+ * <cg-rating value="3.5" precision="0.5"></cg-rating>
+ * ```
+ *
+ * @fires {CustomEvent<{value: number}>} cg-rating-change
+ */
+export declare class CgRating extends LitElement {
+    static styles: import('lit').CSSResult[];
+    static formAssociated: boolean;
+    private _internals?;
+    constructor();
+    value: number;
+    max: number;
+    precision: 0.5 | 1;
+    readonly: boolean;
+    disabled: boolean;
+    size: 'sm' | 'md' | 'lg';
+    name: string;
+    private _hoverValue;
+    updated(changed: Map<string, unknown>): void;
+    private _displayValue;
+    private _getFillType;
+    private _handleClick;
+    private _handleMouseMove;
+    private _handleMouseLeave;
+    private _handleKeydown;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-rating': CgRating;
+    }
+}
+//# sourceMappingURL=cg-rating.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cg-rating.d.ts","sourceRoot":"","sources":["../../../src/components/cg-rating/cg-rating.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;;;;;;;GAWG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,4BA4DnB;IAEH,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAAC,CAAmB;;IASV,KAAK,SAAK;IACV,GAAG,SAAK;IACR,SAAS,EAAE,GAAG,GAAG,CAAC,CAAK;IACP,QAAQ,UAAS;IACjB,QAAQ,UAAS;IAChC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IACjD,IAAI,SAAM;IAEb,OAAO,CAAC,WAAW,CAAK;IAExB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAMrD,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,YAAY;IAmBpB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,cAAc;IA6Bb,MAAM;CAyChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}