@helixui/library 1.1.1 → 1.1.2-next.2

package/dist/shared/{hx-image-C6pGiI6c.js → hx-image-DUsEi-oN.js}

@@ -1,4 +1,4 @@
-import { css as g, LitElement as f, html as d, nothing as h } from "lit";
+import { css as g, LitElement as f, html as d, nothing as l } from "lit";
 import { property as r, state as p, customElement as m } from "lit/decorators.js";
 import { classMap as _ } from "lit/directives/class-map.js";
 import { styleMap as u } from "lit/directives/style-map.js";
@@ -45,10 +45,10 @@ const y = g`
     display: block;
   }
 `;
-var b = Object.defineProperty, S = Object.getOwnPropertyDescriptor, e = (s, o, a, l) => {
-  for (var i = l > 1 ? void 0 : l ? S(o, a) : o, n = s.length - 1, c; n >= 0; n--)
-    (c = s[n]) && (i = (l ? c(o, a, i) : c(i)) || i);
-  return l && i && b(o, a, i), i;
+var b = Object.defineProperty, S = Object.getOwnPropertyDescriptor, e = (s, o, a, h) => {
+  for (var i = h > 1 ? void 0 : h ? S(o, a) : o, n = s.length - 1, c; n >= 0; n--)
+    (c = s[n]) && (i = (h ? c(o, a, i) : c(i)) || i);
+  return h && i && b(o, a, i), i;
 };
 let t = class extends f {
   constructor() {
@@ -83,7 +83,8 @@ let t = class extends f {
     return this._usedFallbackSrc && this.fallbackSrc ? this.fallbackSrc : this.src;
   }
   render() {
-    const s = this.decorative || this.alt === "", o = s ? "" : this.alt ?? "", a = this._computeBorderRadius(), l = this._hasCaptionSlot, i = {
+    !this.decorative && this.alt;
+    const s = this.decorative || this.alt === "", o = s ? "" : this.alt ?? "", a = this._computeBorderRadius(), h = this._hasCaptionSlot, i = {
       ...this.ratio ? { "--_ratio": this.ratio } : {},
       ...this.fit ? { "--_fit": this.fit } : {},
       ...a ? { "--_radius": a } : {},
@@ -95,7 +96,6 @@ let t = class extends f {
           class="image__container image__container--error"
           style=${u(i)}
           role="alert"
-          aria-live="polite"
         >
           <slot name="fallback"></slot>
         </figure>
@@ -104,20 +104,20 @@ let t = class extends f {
         <img
           part="base"
           class="image__img"
-          src=${this._currentSrc() || h}
+          src=${this._currentSrc() || l}
           alt=${o}
-          role=${s ? "presentation" : h}
+          role=${s ? "presentation" : l}
           loading=${this.loading}
-          width=${this.width != null ? this.width : h}
-          height=${this.height != null ? this.height : h}
-          srcset=${this.srcset ?? h}
-          sizes=${this.sizes ?? h}
+          width=${this.width != null ? this.width : l}
+          height=${this.height != null ? this.height : l}
+          srcset=${this.srcset ?? l}
+          sizes=${this.sizes ?? l}
           @load=${this._handleLoad}
           @error=${this._handleError}
         />
         <figcaption
           part="caption"
-          class=${_({ image__caption: !0, "image__caption--visible": l })}
+          class=${_({ image__caption: !0, "image__caption--visible": h })}
         >
           <slot name="caption" @slotchange=${this._onCaptionSlotChange}></slot>
         </figcaption>
@@ -177,4 +177,4 @@ t = e([
 export {
   t as H
 };
-//# sourceMappingURL=hx-image-C6pGiI6c.js.map
+//# sourceMappingURL=hx-image-DUsEi-oN.js.map

package/dist/shared/hx-image-DUsEi-oN.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-image-DUsEi-oN.js","sources":["../../src/components/hx-image/hx-image.styles.ts","../../src/components/hx-image/hx-image.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixImageStyles = css`\n  :host {\n    display: block;\n  }\n\n  .image__container {\n    position: relative;\n    display: block;\n    overflow: hidden;\n    margin: 0;\n    padding: 0;\n    aspect-ratio: var(--_ratio, var(--hx-image-aspect-ratio));\n    border-radius: var(--_radius, var(--hx-image-border-radius, 0));\n  }\n\n  .image__container--error {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: var(--hx-image-fallback-min-height, 3rem);\n    background-color: var(--hx-color-neutral-100, #f3f4f6);\n    color: var(--hx-color-neutral-500, #6b7280);\n  }\n\n  .image__img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: var(--_fit, var(--hx-image-object-fit, cover));\n  }\n\n  .image__caption {\n    display: none;\n    padding: var(--hx-image-caption-padding, 0.5rem 0 0);\n    color: var(--hx-image-caption-color, var(--hx-color-neutral-600, #4b5563));\n    font-size: var(--hx-image-caption-font-size, 0.875rem);\n  }\n\n  .image__caption--visible {\n    display: block;\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixImageStyles } from './hx-image.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * An accessible image wrapper with lazy loading, fallback support, aspect ratio control,\n * responsive image (srcset/sizes) support, and optional caption.\n *\n * @summary Accessible image wrapper with lazy loading, fallback, srcset, and aspect ratio control.\n *\n * @tag hx-image\n *\n * @slot fallback - Custom content shown when the image fails to load and no fallback-src is set.\n * @slot caption - Optional caption content rendered in a figcaption element below the image.\n *\n * @csspart base - The inner img element.\n * @csspart caption - The figcaption element (visible only when caption content is present).\n *\n * @cssprop [--hx-image-object-fit] - Controls how the image fills its container. Maps to object-fit.\n * @cssprop [--hx-image-border-radius] - Border radius of the image. Overridden by the `rounded` prop.\n * @cssprop [--hx-image-aspect-ratio] - Aspect ratio of the image container. Overridden by the `ratio` prop.\n * @cssprop [--hx-image-caption-color] - Text color for the caption.\n * @cssprop [--hx-image-caption-font-size] - Font size for the caption.\n * @cssprop [--hx-image-caption-padding] - Padding for the caption.\n * @cssprop [--hx-image-fallback-min-height] - Minimum height of the error/fallback container.\n *\n * @fires hx-load - Dispatched when the image has successfully loaded.\n * @fires hx-error - Dispatched when the image fails to load (including after fallback-src also fails).\n */\n@customElement('hx-image')\nexport class HelixImage extends LitElement {\n  static override styles = [tokenStyles, helixImageStyles];\n\n  /**\n   * The URL of the image to display.\n   * @attr src\n   */\n  @property({ type: String, reflect: true })\n  src = '';\n\n  /**\n   * Accessible text description of the image.\n   * Required for informative images. Use the `decorative` prop for decorative images\n   * instead of setting this to an empty string — explicit decorative intent is preferred.\n   * @attr alt\n   */\n  @property({ type: String, reflect: true })\n  alt: string | undefined = undefined;\n\n  /**\n   * Marks the image as decorative (hidden from screen readers).\n   * Use this instead of `alt=\"\"` to make decorative intent explicit in markup.\n   * When set, the inner img receives `alt=\"\"` and `role=\"presentation\"`.\n   * @attr decorative\n   */\n  @property({ type: Boolean, reflect: true })\n  decorative = false;\n\n  /**\n   * Width of the image element.\n   * @attr width\n   */\n  @property({ reflect: true })\n  width: number | string | undefined = undefined;\n\n  /**\n   * Height of the image element.\n   * @attr height\n   */\n  @property({ reflect: true })\n  height: number | string | undefined = undefined;\n\n  /**\n   * Loading strategy for the image.\n   * @attr loading\n   */\n  @property({ type: String, reflect: true })\n  loading: 'lazy' | 'eager' = 'lazy';\n\n  /**\n   * How the image should be resized to fit its container.\n   * Maps to CSS object-fit.\n   * @attr fit\n   */\n  @property({ type: String, reflect: true })\n  fit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down' | undefined = undefined;\n\n  /**\n   * CSS aspect-ratio value (e.g. \"16/9\", \"1\", \"4/3\").\n   * When set, the container maintains this ratio.\n   * @attr ratio\n   */\n  @property({ type: String, reflect: true })\n  ratio: string | undefined = undefined;\n\n  /**\n   * Border radius for the image.\n   * Boolean attribute (or `true`) applies the theme's medium radius token.\n   * A string value is used directly as a CSS border-radius value (e.g. \"1rem\", \"50%\").\n   *\n   * Note: When set as an HTML attribute (`<hx-image rounded>`), Lit receives the value as\n   * an empty string (`''`). When set programmatically (`el.rounded = true`), it receives\n   * a boolean. Both forms apply the theme radius token.\n   *\n   * @attr rounded\n   */\n  @property({ type: String, reflect: true })\n  rounded: boolean | string | undefined = undefined;\n\n  /**\n   * Fallback image URL shown when the primary src fails to load.\n   * @attr fallback-src\n   */\n  @property({ type: String, attribute: 'fallback-src', reflect: true })\n  fallbackSrc: string | undefined = undefined;\n\n  /**\n   * A comma-separated list of image candidates for responsive images.\n   * Passed directly to the inner img's srcset attribute.\n   * Enables Drupal responsive image styles and browser-native image selection.\n   * @attr srcset\n   */\n  @property({ type: String, reflect: true })\n  srcset: string | undefined = undefined;\n\n  /**\n   * Media conditions indicating which image size to use alongside srcset.\n   * Works in conjunction with the `srcset` attribute.\n   * @attr sizes\n   */\n  @property({ type: String, reflect: true })\n  sizes: string | undefined = undefined;\n\n  /** @internal */\n  @state()\n  private _error = false;\n\n  /** @internal */\n  @state()\n  private _usedFallbackSrc = false;\n\n  /** @internal */\n  @state()\n  private _hasCaptionSlot = false;\n\n  /** @internal */\n  private _handleLoad(): void {\n    this.dispatchEvent(new CustomEvent<void>('hx-load', { bubbles: true, composed: true }));\n  }\n\n  /** @internal */\n  private _handleError(): void {\n    if (!this._error && this.fallbackSrc && !this._usedFallbackSrc) {\n      // Try the fallback-src before showing the fallback slot\n      this._usedFallbackSrc = true;\n      return;\n    }\n    this._error = true;\n    this.dispatchEvent(new CustomEvent<void>('hx-error', { bubbles: true, composed: true }));\n  }\n\n  /** @internal */\n  private _onCaptionSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasCaptionSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  /** @internal */\n  private _computeBorderRadius(): string | undefined {\n    if (this.rounded === true || this.rounded === '' || this.rounded === 'true') {\n      return 'var(--hx-border-radius-md, 0.375rem)';\n    }\n    if (typeof this.rounded === 'string' && this.rounded.length > 0 && this.rounded !== 'false') {\n      return this.rounded;\n    }\n    return undefined;\n  }\n\n  /** @internal */\n  private _currentSrc(): string {\n    if (this._usedFallbackSrc && this.fallbackSrc) {\n      return this.fallbackSrc;\n    }\n    return this.src;\n  }\n\n  override render() {\n    if (!this.decorative && !this.alt) {\n      devWarn(\n        'hx-image',\n        'Informative images require an `alt` attribute for accessibility (WCAG 1.1.1). ' +\n          'Provide a descriptive `alt` value, or set the `decorative` attribute if the image is decorative.',\n      );\n    }\n    const isDecorative = this.decorative || this.alt === '';\n    const altText = isDecorative ? '' : (this.alt ?? '');\n    const borderRadius = this._computeBorderRadius();\n    const showCaption = this._hasCaptionSlot;\n\n    const containerStyles = {\n      ...(this.ratio ? { '--_ratio': this.ratio } : {}),\n      ...(this.fit ? { '--_fit': this.fit } : {}),\n      ...(borderRadius ? { '--_radius': borderRadius } : {}),\n      ...(this.width != null\n        ? { width: typeof this.width === 'number' ? `${this.width}px` : this.width }\n        : {}),\n      ...(this.height != null\n        ? { height: typeof this.height === 'number' ? `${this.height}px` : this.height }\n        : {}),\n    };\n\n    if (this._error) {\n      return html`\n        <figure\n          class=\"image__container image__container--error\"\n          style=${styleMap(containerStyles)}\n          role=\"alert\"\n        >\n          <slot name=\"fallback\"></slot>\n        </figure>\n      `;\n    }\n\n    return html`\n      <figure class=\"image__container\" style=${styleMap(containerStyles)}>\n        <img\n          part=\"base\"\n          class=\"image__img\"\n          src=${this._currentSrc() || nothing}\n          alt=${altText}\n          role=${isDecorative ? 'presentation' : nothing}\n          loading=${this.loading}\n          width=${this.width != null ? this.width : nothing}\n          height=${this.height != null ? this.height : nothing}\n          srcset=${this.srcset ?? nothing}\n          sizes=${this.sizes ?? nothing}\n          @load=${this._handleLoad}\n          @error=${this._handleError}\n        />\n        <figcaption\n          part=\"caption\"\n          class=${classMap({ image__caption: true, 'image__caption--visible': showCaption })}\n        >\n          <slot name=\"caption\" @slotchange=${this._onCaptionSlotChange}></slot>\n        </figcaption>\n      </figure>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-image': HelixImage;\n  }\n}\n"],"names":["helixImageStyles","css","HelixImage","LitElement","e","slot","isDecorative","altText","borderRadius","showCaption","containerStyles","html","styleMap","nothing","classMap","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/{hx-link-Tmk_YPvW.js → hx-link-Peg2LzOD.js}

@@ -1,9 +1,9 @@
-import { css as v, LitElement as x, nothing as u, svg as f, html as c } from "lit";
-import { property as o, customElement as k } from "lit/decorators.js";
+import { css as v, LitElement as x, nothing as f, svg as u, html as c } from "lit";
+import { property as i, customElement as k } from "lit/decorators.js";
 import { classMap as p } from "lit/directives/class-map.js";
 import { ifDefined as a } from "lit/directives/if-defined.js";
 import { tokenStyles as m } from "@helixui/tokens/lit";
-const b = v`
+const g = v`
   :host {
     display: inline;
   }
@@ -42,7 +42,10 @@ const b = v`
 
   .link:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-link-focus-ring-color, var(--hx-focus-ring-color, #2563eb));
+      var(
+        --hx-link-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+      );
     outline-offset: var(--hx-focus-ring-offset, 2px);
     border-radius: var(--hx-border-radius-sm, 0.125rem);
   }
@@ -106,27 +109,27 @@ const b = v`
     border: 0;
   }
 `;
-var g = Object.defineProperty, y = Object.getOwnPropertyDescriptor, i = (e, n, s, l) => {
-  for (var t = l > 1 ? void 0 : l ? y(n, s) : n, d = e.length - 1, h; d >= 0; d--)
-    (h = e[d]) && (t = (l ? h(n, s, t) : h(t)) || t);
-  return l && t && g(n, s, t), t;
+var y = Object.defineProperty, b = Object.getOwnPropertyDescriptor, o = (r, n, s, l) => {
+  for (var t = l > 1 ? void 0 : l ? b(n, s) : n, h = r.length - 1, d; h >= 0; h--)
+    (d = r[h]) && (t = (l ? d(n, s, t) : d(t)) || t);
+  return l && t && y(n, s, t), t;
 };
-let r = class extends x {
+let e = class extends x {
   constructor() {
     super(...arguments), this.href = void 0, this.target = void 0, this.variant = "default", this.disabled = !1, this.download = void 0, this.rel = void 0;
   }
   // --- Event Handling ---
   /** @internal */
-  _handleClick(e) {
+  _handleClick(r) {
     if (this.disabled) {
-      e.preventDefault(), e.stopPropagation();
+      r.preventDefault(), r.stopPropagation();
       return;
     }
     this.dispatchEvent(
       new CustomEvent("hx-click", {
         bubbles: !0,
         composed: !0,
-        detail: { originalEvent: e }
+        detail: { originalEvent: r }
       })
     );
   }
@@ -138,7 +141,7 @@ let r = class extends x {
   }
   /** @internal */
   _renderExternalIcon() {
-    return this.target !== "_blank" ? u : c`
+    return this.target !== "_blank" ? f : c`
       <svg
         class="link__external-icon"
         part="external-icon"
@@ -150,14 +153,14 @@ let r = class extends x {
         stroke-linecap="round"
         stroke-linejoin="round"
       >
-        ${f`<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /><polyline points="15 3 21 3 21 9" /><line x1="10" y1="14" x2="21" y2="3" />`}
+        ${u`<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /><polyline points="15 3 21 3 21 9" /><line x1="10" y1="14" x2="21" y2="3" />`}
       </svg>
       <span class="sr-only">(opens in new tab)</span>
     `;
   }
   // --- Render ---
   render() {
-    const e = {
+    const r = {
       link: !0,
       [`link--${this.variant}`]: this.variant !== "default",
       "link--disabled": this.disabled
@@ -165,9 +168,8 @@ let r = class extends x {
     return this.disabled ? c`
         <span
           part="link"
-          class=${p(e)}
+          class=${p(r)}
           role="link"
-          tabindex="0"
           aria-disabled="true"
           @click=${this._handleClick}
         >
@@ -176,7 +178,7 @@ let r = class extends x {
       ` : c`
       <a
         part="link"
-        class=${p(e)}
+        class=${p(r)}
         href=${a(this.href)}
         target=${a(this.target)}
         rel=${a(this._computeRel())}
@@ -189,29 +191,29 @@ let r = class extends x {
     `;
   }
 };
-r.styles = [m, b];
-i([
-  o({ type: String })
-], r.prototype, "href", 2);
-i([
-  o({ type: String })
-], r.prototype, "target", 2);
-i([
-  o({ type: String, reflect: !0 })
-], r.prototype, "variant", 2);
-i([
-  o({ type: Boolean, reflect: !0 })
-], r.prototype, "disabled", 2);
-i([
-  o({ type: String })
-], r.prototype, "download", 2);
-i([
-  o({ type: String })
-], r.prototype, "rel", 2);
-r = i([
+e.styles = [m, g];
+o([
+  i({ type: String })
+], e.prototype, "href", 2);
+o([
+  i({ type: String })
+], e.prototype, "target", 2);
+o([
+  i({ type: String, reflect: !0 })
+], e.prototype, "variant", 2);
+o([
+  i({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled", 2);
+o([
+  i({ type: String })
+], e.prototype, "download", 2);
+o([
+  i({ type: String })
+], e.prototype, "rel", 2);
+e = o([
   k("hx-link")
-], r);
+], e);
 export {
-  r as H
+  e as H
 };
-//# sourceMappingURL=hx-link-Tmk_YPvW.js.map
+//# sourceMappingURL=hx-link-Peg2LzOD.js.map

package/dist/shared/hx-link-Peg2LzOD.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-link-Peg2LzOD.js","sources":["../../src/components/hx-link/hx-link.styles.ts","../../src/components/hx-link/hx-link.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixLinkStyles = css`\n  :host {\n    display: inline;\n  }\n\n  :host([disabled]) {\n    cursor: not-allowed;\n  }\n\n  /* --- Base Link --- */\n\n  .link {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--hx-space-1, 0.25rem);\n    color: var(--hx-link-color, var(--hx-color-primary-500, #2563eb));\n    font-family: var(--hx-link-font-family, var(--hx-font-family-sans, inherit));\n    font-size: inherit;\n    line-height: inherit;\n    text-decoration: var(--hx-link-text-decoration, underline);\n    text-underline-offset: var(--hx-link-underline-offset, 2px);\n    cursor: pointer;\n    outline: 0;\n    transition:\n      color var(--hx-transition-fast, 150ms ease),\n      text-decoration-color var(--hx-transition-fast, 150ms ease);\n  }\n\n  .link:hover {\n    color: var(--hx-link-color-hover, var(--hx-color-primary-700, #1d4ed8));\n    text-decoration: var(--hx-link-text-decoration-hover, underline);\n  }\n\n  .link:active {\n    color: var(--hx-link-color-active, var(--hx-color-primary-800, #1e40af));\n  }\n\n  .link:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(\n        --hx-link-focus-ring-color,\n        var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))\n      );\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n    border-radius: var(--hx-border-radius-sm, 0.125rem);\n  }\n\n  /* --- Variant: subtle --- */\n\n  .link--subtle {\n    color: var(--hx-link-color-subtle, var(--hx-color-neutral-600, #475569));\n    text-decoration: none;\n  }\n\n  .link--subtle:hover {\n    color: var(--hx-link-color-hover, var(--hx-color-primary-700, #1d4ed8));\n    text-decoration: underline;\n  }\n\n  /* --- Variant: danger --- */\n\n  .link--danger {\n    color: var(--hx-link-color-danger, var(--hx-color-error-text, #b91c1c));\n  }\n\n  .link--danger:hover {\n    color: var(--hx-link-color-danger-hover, var(--hx-color-error-700, #b91c1c));\n  }\n\n  /* --- Disabled --- */\n\n  .link--disabled {\n    color: var(--hx-link-color-disabled, var(--hx-color-neutral-400, #94a3b8));\n    text-decoration: none;\n    pointer-events: none;\n  }\n\n  /* --- External link icon --- */\n\n  .link__external-icon {\n    display: inline-flex;\n    width: 0.75em;\n    height: 0.75em;\n    flex-shrink: 0;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .link {\n      transition: none;\n    }\n  }\n\n  /* --- Visually hidden (sr-only) --- */\n\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border: 0;\n  }\n`;\n","import { LitElement, html, nothing, svg } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixLinkStyles } from './hx-link.styles.js';\n\n/**\n * Variant options for the link component.\n */\nexport type LinkVariant = 'default' | 'subtle' | 'danger';\n\n/**\n * A semantic hyperlink component with accessibility-first design.\n * Renders a native `<a>` element for enabled state and a `<span>` for\n * disabled state with full keyboard and screen reader support.\n *\n * @summary Accessible hyperlink with external-link detection, disabled state,\n *   and download support.\n *\n * @tag hx-link\n *\n * @slot - Default slot for link label text or content.\n *\n * @fires {CustomEvent<{originalEvent: MouseEvent}>} hx-click - Dispatched when\n *   the link is clicked and is not disabled.\n *\n * @csspart link - The inner anchor or span element.\n * @csspart external-icon - The external link icon SVG (when target=\"_blank\").\n *\n * @cssprop [--hx-link-color=var(--hx-color-primary-500)] - Default link color.\n * @cssprop [--hx-link-color-hover=var(--hx-color-primary-700)] - Hover color.\n * @cssprop [--hx-link-color-active=var(--hx-color-primary-800)] - Active color.\n * @cssprop [--hx-link-color-disabled=var(--hx-color-neutral-400)] - Disabled color.\n * @cssprop [--hx-link-color-subtle=var(--hx-color-neutral-600)] - Subtle variant color.\n * @cssprop [--hx-link-color-danger=var(--hx-color-error-text)] - Danger variant color.\n * @cssprop [--hx-link-color-danger-hover=var(--hx-color-error-700)] - Danger variant hover color.\n * @cssprop [--hx-link-font-family=var(--hx-font-family-sans)] - Link font family.\n * @cssprop [--hx-link-text-decoration=underline] - Link text decoration.\n * @cssprop [--hx-link-text-decoration-hover=underline] - Hover text decoration.\n * @cssprop [--hx-link-underline-offset=2px] - Text underline offset.\n * @cssprop [--hx-link-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n *\n * @note The `:visited` pseudo-class does not work inside Shadow DOM due to\n *   browser privacy restrictions. This is a known platform limitation.\n */\n@customElement('hx-link')\nexport class HelixLink extends LitElement {\n  static override styles = [tokenStyles, helixLinkStyles];\n\n  /**\n   * The URL the link points to.\n   * @attr href\n   */\n  @property({ type: String })\n  href: string | undefined = undefined;\n\n  /**\n   * Where to display the linked URL (_self, _blank, etc.).\n   * When set to \"_blank\", automatically adds rel=\"noopener noreferrer\"\n   * and shows an external-link indicator.\n   * @attr target\n   */\n  @property({ type: String })\n  target: string | undefined = undefined;\n\n  /**\n   * Visual style variant of the link.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'default' | 'subtle' | 'danger' = 'default';\n\n  /**\n   * Whether the link is disabled. Renders a span instead of an anchor.\n   * The disabled span is keyboard-focusable (tabindex=\"0\") and announces\n   * as a disabled link to screen readers.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Prompts the user to download the linked URL. When set to a string,\n   * the value is used as the suggested filename.\n   * @attr download\n   */\n  @property({ type: String })\n  download: string | undefined = undefined;\n\n  /**\n   * Relationship between the current document and the linked URL.\n   * Automatically set to \"noopener noreferrer\" when target=\"_blank\".\n   * @attr rel\n   */\n  @property({ type: String })\n  rel: string | undefined = undefined;\n\n  // --- Event Handling ---\n\n  /** @internal */\n  private _handleClick(e: MouseEvent): void {\n    if (this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent<{ originalEvent: MouseEvent }>('hx-click', {\n        bubbles: true,\n        composed: true,\n        detail: { originalEvent: e },\n      }),\n    );\n  }\n\n  // --- Render Helpers ---\n\n  /** @internal */\n  private _computeRel(): string | undefined {\n    if (this.rel) return this.rel;\n    if (this.target === '_blank') return 'noopener noreferrer';\n    return undefined;\n  }\n\n  /** @internal */\n  private _renderExternalIcon() {\n    if (this.target !== '_blank') return nothing;\n\n    return html`\n      <svg\n        class=\"link__external-icon\"\n        part=\"external-icon\"\n        aria-hidden=\"true\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      >\n        ${svg`<path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\" /><polyline points=\"15 3 21 3 21 9\" /><line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\" />`}\n      </svg>\n      <span class=\"sr-only\">(opens in new tab)</span>\n    `;\n  }\n\n  // --- Render ---\n\n  override render() {\n    const classes = {\n      link: true,\n      [`link--${this.variant}`]: this.variant !== 'default',\n      'link--disabled': this.disabled,\n    };\n\n    if (this.disabled) {\n      return html`\n        <span\n          part=\"link\"\n          class=${classMap(classes)}\n          role=\"link\"\n          aria-disabled=\"true\"\n          @click=${this._handleClick}\n        >\n          <slot></slot>\n        </span>\n      `;\n    }\n\n    return html`\n      <a\n        part=\"link\"\n        class=${classMap(classes)}\n        href=${ifDefined(this.href)}\n        target=${ifDefined(this.target)}\n        rel=${ifDefined(this._computeRel())}\n        download=${ifDefined(this.download)}\n        @click=${this._handleClick}\n      >\n        <slot></slot>\n        ${this._renderExternalIcon()}\n      </a>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-link': HelixLink;\n  }\n}\n"],"names":["helixLinkStyles","css","HelixLink","LitElement","e","nothing","html","svg","classes","classMap","ifDefined","tokenStyles","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/shared/{hx-meter-uXkTZq-W.js → hx-meter-CVs4A649.js}

@@ -1,8 +1,8 @@
-import { css as _, LitElement as g, nothing as x, html as v } from "lit";
+import { css as f, LitElement as g, nothing as x, html as v } from "lit";
 import { property as h, state as b, customElement as w } from "lit/decorators.js";
 import { ifDefined as m } from "lit/directives/if-defined.js";
 import { tokenStyles as y } from "@helixui/tokens/lit";
-const $ = _`
+const $ = f`
   :host {
     display: block;
     width: 100%;
@@ -25,9 +25,9 @@ const $ = _`
   .meter__track {
     position: relative;
     width: 100%;
-    height: var(--hx-meter-track-height, var(--hx-size-2, 0.5rem));
+    height: var(--hx-meter-track-height, var(--hx-space-2, 0.5rem));
     background-color: var(--hx-meter-track-color, var(--hx-color-neutral-200, #e5e7eb));
-    border-radius: var(--hx-meter-track-radius, var(--hx-radius-full, 9999px));
+    border-radius: var(--hx-meter-track-radius, var(--hx-border-radius-full, 9999px));
     overflow: hidden;
   }
 
@@ -69,7 +69,7 @@ const $ = _`
   }
 
   :host([data-state='danger']) {
-    --_indicator-color: var(--hx-meter-color-danger, var(--hx-color-danger-500, #ef4444));
+    --_indicator-color: var(--hx-meter-color-danger, var(--hx-color-error-500, #dc2626));
   }
 
   /* ─── State Label (WCAG 1.4.1) ─── */
@@ -93,7 +93,7 @@ const $ = _`
   }
 
   .meter__state-label[data-state='danger'] {
-    color: var(--hx-meter-color-danger, var(--hx-color-danger-700, #b91c1c));
+    color: var(--hx-meter-color-danger, var(--hx-color-error-700, #991b1b));
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -141,18 +141,18 @@ let r = class extends g {
     const a = this.low ?? 0, n = this.high ?? this.max, l = t && e < a, c = i && e > n, d = !l && !c;
     if (!o)
       return l || c ? "warning" : "optimum";
-    const u = this.optimum ?? this.min, p = t && u < a, f = i && u > n;
-    return !p && !f ? d ? "optimum" : "warning" : p ? l ? "optimum" : d ? "warning" : "danger" : c ? "optimum" : d ? "warning" : "danger";
+    const u = this.optimum ?? this.min, p = t && u < a, _ = i && u > n;
+    return !p && !_ ? d ? "optimum" : "warning" : p ? l ? "optimum" : d ? "warning" : "danger" : c ? "optimum" : d ? "warning" : "danger";
   }
   /** @internal */
   _onLabelSlotChange(e) {
     const t = e.target;
     this._hasSlotContent = t.assignedNodes({ flatten: !0 }).length > 0;
   }
-  updated() {
-    this.dataset.state = this._resolveState();
-    const e = this._percentage() / 100;
-    this.style.setProperty("--_value-ratio", String(Math.max(0, Math.min(1, e))));
+  updated(e) {
+    super.updated(e), this.dataset.state = this._resolveState();
+    const t = this._percentage() / 100;
+    this.style.setProperty("--_value-ratio", String(Math.max(0, Math.min(1, t))));
   }
   render() {
     const e = this._resolveState(), t = this._clampedValue(), i = e !== "default" ? ` — ${e}` : "", o = `${t} of ${this.max}${i}`, a = this.label !== void 0 || this._hasSlotContent, n = r._STATE_LABELS[e];
@@ -235,4 +235,4 @@ r = s([
 export {
   r as H
 };
-//# sourceMappingURL=hx-meter-uXkTZq-W.js.map
+//# sourceMappingURL=hx-meter-CVs4A649.js.map

package/dist/shared/hx-meter-CVs4A649.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-meter-CVs4A649.js","sources":["../../src/components/hx-meter/hx-meter.styles.ts","../../src/components/hx-meter/hx-meter.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixMeterStyles = css`\n  :host {\n    display: block;\n    width: 100%;\n  }\n\n  .meter {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-2, 0.5rem);\n    width: 100%;\n  }\n\n  .meter__label {\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    font-weight: var(--hx-font-weight-medium, 500);\n    color: var(--hx-meter-label-color, var(--hx-color-neutral-700, #374151));\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  .meter__track {\n    position: relative;\n    width: 100%;\n    height: var(--hx-meter-track-height, var(--hx-space-2, 0.5rem));\n    background-color: var(--hx-meter-track-color, var(--hx-color-neutral-200, #e5e7eb));\n    border-radius: var(--hx-meter-track-radius, var(--hx-border-radius-full, 9999px));\n    overflow: hidden;\n  }\n\n  .meter__indicator {\n    position: absolute;\n    inset-block: 0;\n    inset-inline-start: 0;\n    height: 100%;\n    width: 100%;\n    border-radius: inherit;\n    background-color: var(--_indicator-color);\n    transform-origin: left center;\n    transform: scaleX(var(--_value-ratio, 0));\n    transition:\n      transform var(--hx-transition-fast, 150ms ease),\n      background-color var(--hx-transition-fast, 150ms ease);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .meter__indicator {\n      transition: none;\n    }\n  }\n\n  /* ─── Default (no thresholds configured) ─── */\n\n  :host {\n    --_indicator-color: var(--hx-meter-indicator-color, var(--hx-color-primary-500, #3b82f6));\n  }\n\n  /* ─── Semantic state colors ─── */\n\n  :host([data-state='optimum']) {\n    --_indicator-color: var(--hx-meter-color-optimum, var(--hx-color-success-500, #22c55e));\n  }\n\n  :host([data-state='warning']) {\n    --_indicator-color: var(--hx-meter-color-warning, var(--hx-color-warning-500, #f59e0b));\n  }\n\n  :host([data-state='danger']) {\n    --_indicator-color: var(--hx-meter-color-danger, var(--hx-color-error-500, #dc2626));\n  }\n\n  /* ─── State Label (WCAG 1.4.1) ─── */\n  /* Visible text label rendered below the track when a semantic state is active. */\n  /* Ensures the meter state is not conveyed by fill color alone.                 */\n  /* aria-hidden=\"true\" because aria-valuetext already includes the state for AT. */\n\n  .meter__state-label {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    font-weight: var(--hx-font-weight-medium, 500);\n    line-height: var(--hx-line-height-tight, 1.25);\n    font-family: var(--hx-font-family-sans, sans-serif);\n  }\n\n  .meter__state-label[data-state='optimum'] {\n    color: var(--hx-meter-color-optimum, var(--hx-color-success-700, #15803d));\n  }\n\n  .meter__state-label[data-state='warning'] {\n    color: var(--hx-meter-color-warning, var(--hx-color-warning-700, #b45309));\n  }\n\n  .meter__state-label[data-state='danger'] {\n    color: var(--hx-meter-color-danger, var(--hx-color-error-700, #991b1b));\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .meter__indicator {\n      transition: none;\n    }\n  }\n\n  /* ─── Native meter hidden (we use custom rendering) ─── */\n\n  .meter__native {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixMeterStyles } from './hx-meter.styles.js';\n\ntype MeterState = 'optimum' | 'warning' | 'danger' | 'default';\n\n/**\n * A scalar measurement within a known range — e.g., disk usage, health score,\n * or any numeric value with defined min/max bounds. Supports low/high/optimum\n * threshold markers for semantic color feedback.\n *\n * @summary Scalar measurement gauge within a defined range.\n *\n * @tag hx-meter\n *\n * @slot label - Visible label rendered above the meter track. When using this\n *   slot without the `label` attribute, the accessible name is derived from the\n *   slot content via `aria-labelledby`. The `label` attribute is NOT required\n *   when slot content is provided — the component detects slot content and\n *   switches to `aria-labelledby` automatically.\n *\n * @csspart base - The outer wrapper element.\n * @csspart track - The unfilled track bar element.\n * @csspart indicator - The filled bar indicating the current value.\n * @csspart label - The label wrapper element.\n *\n * @cssprop [--hx-meter-track-height] - Height of the track bar.\n * @cssprop [--hx-meter-track-color] - Background color of the unfilled track.\n * @cssprop [--hx-meter-track-radius] - Border radius of the track.\n * @cssprop [--hx-meter-indicator-color] - Default filled bar color (no thresholds).\n * @cssprop [--hx-meter-color-optimum] - Color when value is in the optimum zone.\n * @cssprop [--hx-meter-color-warning] - Color when value is in a warning zone.\n * @cssprop [--hx-meter-color-danger] - Color when value is in the danger zone.\n * @cssprop [--hx-meter-label-color] - Label text color.\n */\n@customElement('hx-meter')\nexport class HelixMeter extends LitElement {\n  static override styles = [tokenStyles, helixMeterStyles];\n\n  /** @internal */\n  private static _counter = 0;\n  /** @internal */\n  private _uid = `hx-meter-${++HelixMeter._counter}`;\n\n  /**\n   * Current value of the meter.\n   * @attr value\n   */\n  @property({ type: Number, reflect: true })\n  value = 0;\n\n  /**\n   * Minimum value of the range.\n   * @attr min\n   */\n  @property({ type: Number, reflect: true })\n  min = 0;\n\n  /**\n   * Maximum value of the range.\n   * @attr max\n   */\n  @property({ type: Number, reflect: true })\n  max = 100;\n\n  /**\n   * Threshold below which the value is considered suboptimal (lower range warning).\n   * @attr low\n   */\n  @property({ type: Number, reflect: true })\n  low?: number;\n\n  /**\n   * Threshold above which the value is considered suboptimal (upper range warning).\n   * @attr high\n   */\n  @property({ type: Number, reflect: true })\n  high?: number;\n\n  /**\n   * The optimal value within the range. Used to determine which zone is \"good\".\n   * @attr optimum\n   */\n  @property({ type: Number, reflect: true })\n  optimum?: number;\n\n  /**\n   * Accessible label for the meter. Used as the visible label text and as\n   * the source for `aria-labelledby`. When only slot content is provided\n   * (no `label` attribute), the slot content is used for the accessible name.\n   * @attr label\n   */\n  @property({ type: String })\n  label?: string;\n\n  /** @internal */\n  @state()\n  private _hasSlotContent = false;\n\n  /** @internal */\n  private _clampedValue(): number {\n    return Math.min(Math.max(this.value, this.min), this.max);\n  }\n\n  /** @internal */\n  private _percentage(): number {\n    const range = this.max - this.min;\n    if (range === 0) return 0;\n    return ((this._clampedValue() - this.min) / range) * 100;\n  }\n\n  /** @internal */\n  private _resolveState(): MeterState {\n    const v = this._clampedValue();\n    const hasLow = this.low !== undefined;\n    const hasHigh = this.high !== undefined;\n    const hasOptimum = this.optimum !== undefined;\n\n    if (!hasLow && !hasHigh && !hasOptimum) return 'default';\n\n    // When hasLow/hasHigh/hasOptimum are true, the corresponding property is defined.\n    // Use nullish coalescing to satisfy the type checker while preserving the runtime logic.\n    const lowVal = this.low ?? 0;\n    const highVal = this.high ?? this.max;\n    const inLowZone = hasLow && v < lowVal;\n    const inHighZone = hasHigh && v > highVal;\n    const inMiddleZone = !inLowZone && !inHighZone;\n\n    if (!hasOptimum) {\n      if (inLowZone || inHighZone) return 'warning';\n      return 'optimum';\n    }\n\n    const opt = this.optimum ?? this.min;\n    const optimumInLow = hasLow && opt < lowVal;\n    const optimumInHigh = hasHigh && opt > highVal;\n    const optimumInMiddle = !optimumInLow && !optimumInHigh;\n\n    if (optimumInMiddle) {\n      if (inMiddleZone) return 'optimum';\n      return 'warning';\n    } else if (optimumInLow) {\n      if (inLowZone) return 'optimum';\n      if (inMiddleZone) return 'warning';\n      return 'danger';\n    } else {\n      // optimumInHigh\n      if (inHighZone) return 'optimum';\n      if (inMiddleZone) return 'warning';\n      return 'danger';\n    }\n  }\n\n  /** @internal */\n  private _onLabelSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this._hasSlotContent = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n    // Set data-state on host so :host([data-state]) CSS selectors work\n    this.dataset['state'] = this._resolveState();\n    // Set --_value-ratio for GPU-compositable scaleX() transform on indicator\n    const ratio = this._percentage() / 100;\n    this.style.setProperty('--_value-ratio', String(Math.max(0, Math.min(1, ratio))));\n  }\n\n  // ─── WCAG 1.4.1: State label map ───\n  // The indicator bar color alone is insufficient for color-blind users.\n  // A visible state label is rendered below the track when a semantic state\n  // (optimum/warning/danger) is active, providing a non-color visual cue.\n  // aria-valuetext already embeds the state for AT users.\n\n  /** @internal */\n  private static readonly _STATE_LABELS: Partial<Record<MeterState, string>> = {\n    optimum: 'Optimum',\n    warning: 'Warning',\n    danger: 'Danger',\n  };\n\n  override render() {\n    const state = this._resolveState();\n    const clampedValue = this._clampedValue();\n    const stateLabel = state !== 'default' ? ` — ${state}` : '';\n    const ariaValuetext = `${clampedValue} of ${this.max}${stateLabel}`;\n    const hasVisibleLabel = this.label !== undefined || this._hasSlotContent;\n    const visibleStateLabel = HelixMeter._STATE_LABELS[state];\n\n    return html`\n      <div\n        part=\"base\"\n        class=\"meter\"\n        role=\"meter\"\n        tabindex=\"0\"\n        aria-valuenow=${clampedValue}\n        aria-valuemin=${this.min}\n        aria-valuemax=${this.max}\n        aria-valuetext=${ariaValuetext}\n        aria-label=${ifDefined(!hasVisibleLabel ? `${clampedValue} of ${this.max}` : undefined)}\n        aria-labelledby=${ifDefined(hasVisibleLabel ? `${this._uid}-label` : undefined)}\n      >\n        <span\n          id=${`${this._uid}-label`}\n          part=\"label\"\n          class=\"meter__label\"\n          ?hidden=${!hasVisibleLabel}\n        >\n          <slot name=\"label\" @slotchange=${this._onLabelSlotChange}>${this.label ?? ''}</slot>\n        </span>\n        <div class=\"meter__track\" part=\"track\">\n          <div part=\"indicator\" class=\"meter__indicator\"></div>\n        </div>\n        ${visibleStateLabel\n          ? html`<span class=\"meter__state-label\" data-state=${state} aria-hidden=\"true\"\n              >${visibleStateLabel}</span\n            >`\n          : nothing}\n        <meter\n          class=\"meter__native\"\n          value=${clampedValue}\n          min=${this.min}\n          max=${this.max}\n          low=${ifDefined(this.low)}\n          high=${ifDefined(this.high)}\n          optimum=${ifDefined(this.optimum)}\n          aria-hidden=\"true\"\n          tabindex=\"-1\"\n        ></meter>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-meter': HelixMeter;\n  }\n}\n"],"names":["helixMeterStyles","css","HelixMeter","LitElement","range","v","hasLow","hasHigh","hasOptimum","lowVal","highVal","inLowZone","inHighZone","inMiddleZone","opt","optimumInLow","optimumInHigh","slot","changedProperties","ratio","state","clampedValue","stateLabel","ariaValuetext","hasVisibleLabel","visibleStateLabel","html","ifDefined","nothing","tokenStyles","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/shared/{hx-nav-3JsN2Oak.js → hx-nav-D377Ngz4.js}

@@ -1,6 +1,6 @@
-import { css as g, LitElement as k, svg as f, html as d, nothing as x } from "lit";
+import { css as g, LitElement as k, svg as _, html as d, nothing as f } from "lit";
 import { property as v, state as b, customElement as y } from "lit/decorators.js";
-import { classMap as m } from "lit/directives/class-map.js";
+import { classMap as x } from "lit/directives/class-map.js";
 import { repeat as w } from "lit/directives/repeat.js";
 import { tokenStyles as C } from "@helixui/tokens/lit";
 const $ = g`
@@ -93,7 +93,7 @@ const $ = g`
 
   .nav__link:hover {
     background-color: var(--hx-nav-link-hover-bg, var(--hx-color-neutral-700, #374151));
-    color: var(--hx-nav-link-hover-color, var(--hx-color-white, #ffffff));
+    color: var(--hx-nav-link-hover-color, var(--hx-color-neutral-0, #ffffff));
   }
 
   .nav__link:focus-visible {
@@ -104,7 +104,7 @@ const $ = g`
 
   .nav__link--active {
     background-color: var(--hx-nav-link-active-bg, var(--hx-color-primary-600, #2563eb));
-    color: var(--hx-nav-link-active-color, var(--hx-color-white, #ffffff));
+    color: var(--hx-nav-link-active-color, var(--hx-color-neutral-0, #ffffff));
   }
 
   /* ─── Chevron Icon ─── */
@@ -135,7 +135,7 @@ const $ = g`
       0 4px 6px -1px rgb(0 0 0 / 0.1),
       0 2px 4px -2px rgb(0 0 0 / 0.1)
     );
-    z-index: var(--hx-z-index-dropdown, 100);
+    z-index: var(--hx-z-index-dropdown, 1000);
   }
 
   .nav__submenu[hidden] {
@@ -145,7 +145,7 @@ const $ = g`
   .nav__submenu .nav__link {
     display: block;
     width: 100%;
-    text-align: left;
+    text-align: start;
     border-radius: 0;
     padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);
   }
@@ -173,7 +173,7 @@ const $ = g`
     border-radius: 0;
     background-color: transparent;
     padding: 0;
-    padding-left: var(--hx-space-4, 1rem);
+    padding-inline-start: var(--hx-space-4, 1rem);
   }
 
   :host([orientation='vertical']) .nav__submenu[hidden] {
@@ -226,7 +226,7 @@ const $ = g`
       position: static;
       box-shadow: none;
       border-radius: 0;
-      padding-left: var(--hx-space-4, 1rem);
+      padding-inline-start: var(--hx-space-4, 1rem);
       background-color: transparent;
     }
 
@@ -262,8 +262,7 @@ let c = class extends k {
   /** @internal */
   _sanitizeHref(e) {
     if (!e || e === "#") return "#";
-    if (e.startsWith("/") || e.startsWith("./") || e.startsWith("../") || e.startsWith("#"))
-      return e;
+    if (e.startsWith("/") || e.startsWith("./") || e.startsWith("../") || e.startsWith("#") || typeof window > "u") return e;
     try {
       const n = new URL(e, window.location.href);
       if (n.protocol === "http:" || n.protocol === "https:")
@@ -340,8 +339,8 @@ let c = class extends k {
           e.preventDefault();
           const r = this._expandedIndex === n;
           this._expandedIndex = r ? null : n, r || this.updateComplete.then(() => {
-            var _;
-            const p = (_ = this.shadowRoot) == null ? void 0 : _.querySelector(
+            var m;
+            const p = (m = this.shadowRoot) == null ? void 0 : m.querySelector(
               '.nav__submenu:not([hidden]) [part="link"]'
             );
             p == null || p.focus();
@@ -388,7 +387,7 @@ let c = class extends k {
   }
   // ─── Lifecycle ───
   connectedCallback() {
-    super.connectedCallback(), document.addEventListener("click", this._boundOutsideClick);
+    super.connectedCallback(), typeof document < "u" && document.addEventListener("click", this._boundOutsideClick);
   }
   disconnectedCallback() {
     super.disconnectedCallback(), document.removeEventListener("click", this._boundOutsideClick);
@@ -406,8 +405,8 @@ let c = class extends k {
       stroke-linecap="round"
       aria-hidden="true"
     >
-      ${this._mobileOpen ? f`<line x1="18" y1="6" x2="6" y2="18"></line>
-            <line x1="6" y1="6" x2="18" y2="18"></line>` : f`<line x1="3" y1="12" x2="21" y2="12"></line>
+      ${this._mobileOpen ? _`<line x1="18" y1="6" x2="6" y2="18"></line>
+            <line x1="6" y1="6" x2="18" y2="18"></line>` : _`<line x1="3" y1="12" x2="21" y2="12"></line>
             <line x1="3" y1="6" x2="21" y2="6"></line>
             <line x1="3" y1="18" x2="21" y2="18"></line>`}
     </svg>`;
@@ -448,11 +447,11 @@ let c = class extends k {
               <a
                 part="link"
                 href=${this._sanitizeHref(t.href)}
-                class=${m({
+                class=${x({
         nav__link: !0,
         "nav__link--active": !!t.current
       })}
-                aria-current=${t.current ? "page" : x}
+                aria-current=${t.current ? "page" : f}
                 @click=${(i) => this._handleSubItemClick(t, i)}
                 @keydown=${(i) => this._handleSubKeydown(i, n)}
               >
@@ -475,8 +474,8 @@ let c = class extends k {
     }, i = o ? d`
           <button
             part="link"
-            class=${m(t)}
-            aria-expanded=${a ? "true" : x}
+            class=${x(t)}
+            aria-expanded=${a ? "true" : "false"}
             @click=${(s) => this._handleItemClick(e, n, s)}
             @keydown=${(s) => this._handleKeydown(s, n, e)}
           >
@@ -487,8 +486,8 @@ let c = class extends k {
           <a
             part="link"
             href=${this._sanitizeHref(e.href)}
-            class=${m(t)}
-            aria-current=${e.current ? "page" : x}
+            class=${x(t)}
+            aria-current=${e.current ? "page" : f}
             @click=${(s) => this._handleItemClick(e, n, s)}
             @keydown=${(s) => this._handleKeydown(s, n, e)}
           >
@@ -508,7 +507,7 @@ let c = class extends k {
         <button
           part="toggle"
           class="nav__toggle"
-          aria-expanded=${this._mobileOpen ? "true" : x}
+          aria-expanded=${this._mobileOpen ? "true" : "false"}
           aria-controls="nav-list"
           aria-label=${this._mobileOpen ? this.labelCloseMenu : this.labelOpenMenu}
           @click=${this._handleToggle}
@@ -516,7 +515,7 @@ let c = class extends k {
           ${this._renderHamburgerIcon()}
         </button>
 
-        <ul part="list" id="nav-list" class=${m(e)} role="list">
+        <ul part="list" id="nav-list" class=${x(e)} role="list">
           ${w(
       this.items,
       (n, o) => o,
@@ -568,4 +567,4 @@ c = h([
 export {
   c as H
 };
-//# sourceMappingURL=hx-nav-3JsN2Oak.js.map
+//# sourceMappingURL=hx-nav-D377Ngz4.js.map