@helixui/library 0.1.0

package/dist/shared/hx-spinner-CcbmN-u_.js

@@ -0,0 +1,183 @@
+import { css as h, LitElement as f, html as v } from "lit";
+import { property as a, customElement as d } from "lit/decorators.js";
+import { styleMap as p } from "lit/directives/style-map.js";
+import { ifDefined as m } from "lit/directives/if-defined.js";
+import { t as u } from "./lit-Dpo7RLp4.js";
+const x = h`
+  :host {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .spinner {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--_spinner-size);
+    height: var(--_spinner-size);
+    flex-shrink: 0;
+  }
+
+  .spinner__svg {
+    width: 100%;
+    height: 100%;
+    animation: hx-spinner-rotate var(--hx-duration-spinner, 750ms) linear infinite;
+  }
+
+  .spinner__track {
+    stroke: var(--_spinner-track-color);
+  }
+
+  .spinner__arc {
+    stroke: var(--_spinner-color);
+    /* SVG arc math: viewBox is 24×24, r=10, circumference = 2π × 10 ≈ 62.83.
+       stroke-dasharray: 56 creates a visible arc of ~89% of circumference.
+       stroke-dashoffset: 14 shifts the arc start to produce the ~75% visible gap aesthetic.
+       Adjust both proportionally if r or viewBox dimensions change. */
+    stroke-dasharray: 56;
+    stroke-dashoffset: 14;
+    animation: hx-spinner-dash 1.5s ease-in-out infinite;
+    transform-origin: center;
+  }
+
+  @keyframes hx-spinner-rotate {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes hx-spinner-dash {
+    0% {
+      stroke-dashoffset: 50;
+    }
+    50% {
+      stroke-dashoffset: 14;
+    }
+    100% {
+      stroke-dashoffset: 50;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .spinner__svg {
+      animation: none;
+    }
+
+    .spinner__arc {
+      animation: none;
+      /* Maintain the static partial arc at full opacity so the loading state remains
+         clearly communicated without motion. A faded arc looks broken; full opacity
+         alongside the track ring unambiguously signals "in progress". */
+      stroke-dashoffset: 14;
+      opacity: 1;
+    }
+  }
+
+  /* ─── Size Variants ─── */
+
+  :host([size='sm']) {
+    --_spinner-size: var(--hx-size-4, 1rem);
+  }
+
+  :host([size='md']) {
+    --_spinner-size: var(--hx-size-6, 1.5rem);
+  }
+
+  :host([size='lg']) {
+    --_spinner-size: var(--hx-size-8, 2rem);
+  }
+
+  /* ─── Variant Colors ─── */
+
+  :host([variant='default']) {
+    --_spinner-color: var(--hx-spinner-color, var(--hx-color-neutral-600, #475569));
+    --_spinner-track-color: var(--hx-spinner-track-color, var(--hx-color-neutral-200, #e2e8f0));
+  }
+
+  :host([variant='primary']) {
+    --_spinner-color: var(--hx-spinner-color, var(--hx-color-primary-500, #2563eb));
+    --_spinner-track-color: var(--hx-spinner-track-color, var(--hx-color-primary-100, #dbeafe));
+  }
+
+  :host([variant='inverted']) {
+    --_spinner-color: var(--hx-spinner-color, var(--hx-color-neutral-0, #ffffff));
+    /* Fallback for browsers without color-mix() support (Chrome < 111, Firefox < 113, Safari < 16.2).
+       rgba(255, 255, 255, 0.3) approximates the intended 30% white track color. */
+    --_spinner-track-color: var(
+      --hx-spinner-track-color,
+      var(--hx-overlay-white-30, rgba(255, 255, 255, 0.3))
+    );
+  }
+
+  @supports (color: color-mix(in srgb, white 30%, transparent)) {
+    :host([variant='inverted']) {
+      --_spinner-track-color: var(
+        --hx-spinner-track-color,
+        color-mix(in srgb, var(--hx-color-neutral-0, #ffffff) 30%, transparent)
+      );
+    }
+  }
+`;
+var _ = Object.defineProperty, y = Object.getOwnPropertyDescriptor, s = (n, t, i, o) => {
+  for (var e = o > 1 ? void 0 : o ? y(t, i) : t, l = n.length - 1, c; l >= 0; l--)
+    (c = n[l]) && (e = (o ? c(t, i, e) : c(e)) || e);
+  return o && e && _(t, i, e), e;
+};
+let r = class extends f {
+  constructor() {
+    super(...arguments), this.size = "md", this.variant = "default", this.label = "Loading", this.decorative = !1;
+  }
+  _isTokenSize() {
+    return this.size === "sm" || this.size === "md" || this.size === "lg";
+  }
+  render() {
+    const n = !this._isTokenSize() && this.size ? p({ "--_spinner-size": this.size }) : p({}), t = this.decorative ? "presentation" : "status", i = this.decorative ? void 0 : this.label || void 0;
+    return v`
+      <div
+        class="spinner"
+        part="base"
+        style=${n}
+        role=${t}
+        aria-label=${m(i)}
+      >
+        <svg
+          class="spinner__svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          aria-hidden="true"
+          focusable="false"
+        >
+          <circle class="spinner__track" cx="12" cy="12" r="10" stroke-width="2.5" fill="none" />
+          <path
+            class="spinner__arc"
+            d="M12 2a10 10 0 0 1 10 10"
+            stroke-width="2.5"
+            stroke-linecap="round"
+            fill="none"
+          />
+        </svg>
+      </div>
+    `;
+  }
+};
+r.styles = [u, x];
+s([
+  a({ type: String, reflect: !0 })
+], r.prototype, "size", 2);
+s([
+  a({ type: String, reflect: !0 })
+], r.prototype, "variant", 2);
+s([
+  a({ type: String, reflect: !0 })
+], r.prototype, "label", 2);
+s([
+  a({ type: Boolean, reflect: !0 })
+], r.prototype, "decorative", 2);
+r = s([
+  d("hx-spinner")
+], r);
+export {
+  r as H
+};
+//# sourceMappingURL=hx-spinner-CcbmN-u_.js.map

package/dist/shared/hx-spinner-CcbmN-u_.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-spinner-CcbmN-u_.js","sources":["../../src/components/hx-spinner/hx-spinner.styles.ts","../../src/components/hx-spinner/hx-spinner.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixSpinnerStyles = css`\n  :host {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .spinner {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--_spinner-size);\n    height: var(--_spinner-size);\n    flex-shrink: 0;\n  }\n\n  .spinner__svg {\n    width: 100%;\n    height: 100%;\n    animation: hx-spinner-rotate var(--hx-duration-spinner, 750ms) linear infinite;\n  }\n\n  .spinner__track {\n    stroke: var(--_spinner-track-color);\n  }\n\n  .spinner__arc {\n    stroke: var(--_spinner-color);\n    /* SVG arc math: viewBox is 24×24, r=10, circumference = 2π × 10 ≈ 62.83.\n       stroke-dasharray: 56 creates a visible arc of ~89% of circumference.\n       stroke-dashoffset: 14 shifts the arc start to produce the ~75% visible gap aesthetic.\n       Adjust both proportionally if r or viewBox dimensions change. */\n    stroke-dasharray: 56;\n    stroke-dashoffset: 14;\n    animation: hx-spinner-dash 1.5s ease-in-out infinite;\n    transform-origin: center;\n  }\n\n  @keyframes hx-spinner-rotate {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  @keyframes hx-spinner-dash {\n    0% {\n      stroke-dashoffset: 50;\n    }\n    50% {\n      stroke-dashoffset: 14;\n    }\n    100% {\n      stroke-dashoffset: 50;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .spinner__svg {\n      animation: none;\n    }\n\n    .spinner__arc {\n      animation: none;\n      /* Maintain the static partial arc at full opacity so the loading state remains\n         clearly communicated without motion. A faded arc looks broken; full opacity\n         alongside the track ring unambiguously signals \"in progress\". */\n      stroke-dashoffset: 14;\n      opacity: 1;\n    }\n  }\n\n  /* ─── Size Variants ─── */\n\n  :host([size='sm']) {\n    --_spinner-size: var(--hx-size-4, 1rem);\n  }\n\n  :host([size='md']) {\n    --_spinner-size: var(--hx-size-6, 1.5rem);\n  }\n\n  :host([size='lg']) {\n    --_spinner-size: var(--hx-size-8, 2rem);\n  }\n\n  /* ─── Variant Colors ─── */\n\n  :host([variant='default']) {\n    --_spinner-color: var(--hx-spinner-color, var(--hx-color-neutral-600, #475569));\n    --_spinner-track-color: var(--hx-spinner-track-color, var(--hx-color-neutral-200, #e2e8f0));\n  }\n\n  :host([variant='primary']) {\n    --_spinner-color: var(--hx-spinner-color, var(--hx-color-primary-500, #2563eb));\n    --_spinner-track-color: var(--hx-spinner-track-color, var(--hx-color-primary-100, #dbeafe));\n  }\n\n  :host([variant='inverted']) {\n    --_spinner-color: var(--hx-spinner-color, var(--hx-color-neutral-0, #ffffff));\n    /* Fallback for browsers without color-mix() support (Chrome < 111, Firefox < 113, Safari < 16.2).\n       rgba(255, 255, 255, 0.3) approximates the intended 30% white track color. */\n    --_spinner-track-color: var(\n      --hx-spinner-track-color,\n      var(--hx-overlay-white-30, rgba(255, 255, 255, 0.3))\n    );\n  }\n\n  @supports (color: color-mix(in srgb, white 30%, transparent)) {\n    :host([variant='inverted']) {\n      --_spinner-track-color: var(\n        --hx-spinner-track-color,\n        color-mix(in srgb, var(--hx-color-neutral-0, #ffffff) 30%, transparent)\n      );\n    }\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixSpinnerStyles } from './hx-spinner.styles.js';\n\n/**\n * A circular loading indicator for inline and overlay loading states.\n * Purely visual — no slots. Announces loading state to screen readers via\n * `role=\"status\"` and an `aria-label` (customizable via the `label` prop).\n *\n * When used alongside visible loading text, set `decorative` to suppress\n * duplicate AT announcements.\n *\n * @summary Circular loading indicator component.\n *\n * @tag hx-spinner\n *\n * @csspart base - The SVG spinner element.\n *\n * @cssprop [--hx-spinner-color] - Spinner arc color. Defaults per variant.\n * @cssprop [--hx-spinner-track-color] - Spinner track color. Defaults per variant.\n * @cssprop [--hx-duration-spinner] - Duration of the rotation animation. Defaults to 750ms.\n */\n@customElement('hx-spinner')\nexport class HelixSpinner extends LitElement {\n  static override styles = [tokenStyles, helixSpinnerStyles];\n\n  /**\n   * Size of the spinner. Accepts 'sm' | 'md' | 'lg' token values, or any\n   * valid CSS size string (e.g. \"3rem\", \"48px\").\n   *\n   * Note: `'sm' | 'md' | 'lg' | string` intentionally degrades to `string`\n   * at the TypeScript level to allow CSS size values as a convenience override.\n   * This is a deliberate design choice — use token values for standard sizing.\n   * @attr size\n   */\n  @property({ type: String, reflect: true })\n  size: 'sm' | 'md' | 'lg' | string = 'md';\n\n  /**\n   * Visual variant of the spinner.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'default' | 'primary' | 'inverted' = 'default';\n\n  /**\n   * Accessible label announced to screen readers. Defaults to \"Loading\".\n   * Reflected as an attribute for Drupal/Twig compatibility.\n   * @attr label\n   */\n  @property({ type: String, reflect: true })\n  label = 'Loading';\n\n  /**\n   * When true, the spinner is decorative and suppresses all ARIA announcements.\n   * Use this when the spinner appears alongside visible loading text to prevent\n   * duplicate announcements. Sets `role=\"presentation\"` and removes `aria-label`.\n   * @attr decorative\n   */\n  @property({ type: Boolean, reflect: true })\n  decorative = false;\n\n  private _isTokenSize(): boolean {\n    return this.size === 'sm' || this.size === 'md' || this.size === 'lg';\n  }\n\n  override render() {\n    const customSizeStyle =\n      !this._isTokenSize() && this.size ? styleMap({ '--_spinner-size': this.size }) : styleMap({});\n\n    // Decorative spinners use role=\"presentation\" to suppress AT announcements.\n    // Non-decorative spinners use role=\"status\" with aria-label for accessible naming.\n    // Guard against empty label (aria-label=\"\" is a WCAG failure).\n    const role = this.decorative ? 'presentation' : 'status';\n    const ariaLabel = this.decorative ? undefined : this.label || undefined;\n\n    return html`\n      <div\n        class=\"spinner\"\n        part=\"base\"\n        style=${customSizeStyle}\n        role=${role}\n        aria-label=${ifDefined(ariaLabel)}\n      >\n        <svg\n          class=\"spinner__svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          aria-hidden=\"true\"\n          focusable=\"false\"\n        >\n          <circle class=\"spinner__track\" cx=\"12\" cy=\"12\" r=\"10\" stroke-width=\"2.5\" fill=\"none\" />\n          <path\n            class=\"spinner__arc\"\n            d=\"M12 2a10 10 0 0 1 10 10\"\n            stroke-width=\"2.5\"\n            stroke-linecap=\"round\"\n            fill=\"none\"\n          />\n        </svg>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-spinner': HelixSpinner;\n  }\n}\n"],"names":["helixSpinnerStyles","css","HelixSpinner","LitElement","customSizeStyle","styleMap","role","ariaLabel","html","ifDefined","tokenStyles","__decorateClass","property","customElement"],"mappings":";;;;;AAEO,MAAMA,IAAqBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACwB3B,IAAMC,IAAN,cAA2BC,EAAW;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA,GAaL,KAAA,OAAoC,MAOpC,KAAA,UAA8C,WAQ9C,KAAA,QAAQ,WASR,KAAA,aAAa;AAAA,EAAA;AAAA,EAEL,eAAwB;AAC9B,WAAO,KAAK,SAAS,QAAQ,KAAK,SAAS,QAAQ,KAAK,SAAS;AAAA,EACnE;AAAA,EAES,SAAS;AAChB,UAAMC,IACJ,CAAC,KAAK,aAAA,KAAkB,KAAK,OAAOC,EAAS,EAAE,mBAAmB,KAAK,KAAA,CAAM,IAAIA,EAAS,CAAA,CAAE,GAKxFC,IAAO,KAAK,aAAa,iBAAiB,UAC1CC,IAAY,KAAK,aAAa,SAAY,KAAK,SAAS;AAE9D,WAAOC;AAAA;AAAA;AAAA;AAAA,gBAIKJ,CAAe;AAAA,eAChBE,CAAI;AAAA,qBACEG,EAAUF,CAAS,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAoBvC;AACF;AAhFaL,EACK,SAAS,CAACQ,GAAaV,CAAkB;AAYzDW,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAZ9BV,EAaX,WAAA,QAAA,CAAA;AAOAS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAnB9BV,EAoBX,WAAA,WAAA,CAAA;AAQAS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA3B9BV,EA4BX,WAAA,SAAA,CAAA;AASAS,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GApC/BV,EAqCX,WAAA,cAAA,CAAA;AArCWA,IAANS,EAAA;AAAA,EADNE,EAAc,YAAY;AAAA,GACdX,CAAA;"}