@helixui/library 0.1.0

package/dist/shared/hx-top-nav-CBxdfPqY.js

@@ -0,0 +1,322 @@
+import { css as c, LitElement as h, html as t } from "lit";
+import { property as d, state as v, customElement as m } from "lit/decorators.js";
+import { classMap as x } from "lit/directives/class-map.js";
+import { t as b } from "./lit-Dpo7RLp4.js";
+const g = c`
+  /* ─── Host ─── */
+
+  :host {
+    display: block;
+  }
+
+  /* ─── Header wrapper (landmark) ─── */
+
+  header {
+    display: block;
+    margin: 0;
+    padding: 0;
+  }
+
+  /* ─── Sticky mode ─── */
+
+  :host([sticky]) .nav {
+    position: sticky;
+    top: 0;
+    /* Fallback 1000 is appropriate for sticky navbars (below modals ~1300, above content) */
+    z-index: var(--hx-top-nav-z-index, var(--hx-z-index-sticky, 1000));
+  }
+
+  /* ─── Nav container ─── */
+
+  .nav {
+    background-color: var(--hx-top-nav-bg, var(--hx-color-neutral-0, #ffffff));
+    color: var(--hx-top-nav-color, var(--hx-color-neutral-800, #212529));
+    border-bottom: var(--hx-border-width-thin, 1px) solid
+      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #dee2e6));
+    font-family: var(--hx-font-family-sans, sans-serif);
+  }
+
+  /* ─── Bar row (always visible) ─── */
+
+  .nav__bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    min-height: var(--hx-top-nav-height, var(--hx-space-16, 4rem));
+    padding-inline: var(--hx-top-nav-padding-x, var(--hx-space-6, 1.5rem));
+    gap: var(--hx-space-4, 1rem);
+  }
+
+  /* ─── Logo ─── */
+
+  .nav__logo {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  /* ─── Mobile toggle (hamburger) ─── */
+
+  .mobile-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-inline-start: auto;
+    /* var(--hx-space-3, 0.75rem) padding + 24px icon = 48×48px touch target (exceeds WCAG 2.5.5 44×44px) */
+    padding: var(--hx-space-3, 0.75rem);
+    background: transparent;
+    border: none;
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
+    color: var(--hx-top-nav-toggle-color, var(--hx-color-neutral-700, #343a40));
+    cursor: pointer;
+    line-height: 0;
+  }
+
+  .mobile-toggle:hover {
+    background: var(--hx-color-neutral-100, #f1f3f5);
+  }
+
+  .mobile-toggle:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  .mobile-toggle__icon {
+    width: var(--hx-space-6, 1.5rem);
+    height: var(--hx-space-6, 1.5rem);
+  }
+
+  /* ─── Collapsible panel (mobile) ─── */
+
+  .nav__collapsible {
+    display: none;
+    flex-direction: column;
+    width: 100%;
+    padding-block: var(--hx-space-3, 0.75rem);
+    border-top: var(--hx-border-width-thin, 1px) solid
+      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #dee2e6));
+  }
+
+  .nav__collapsible--open {
+    display: flex;
+    animation: hx-mobile-nav-open var(--hx-duration-fast, 150ms) ease-out;
+  }
+
+  /* ─── Menu and actions in collapsible (mobile) ─── */
+
+  .nav__menu,
+  .nav__actions {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-1, 0.25rem);
+    padding-inline: var(--hx-top-nav-padding-x, var(--hx-space-6, 1.5rem));
+  }
+
+  .nav__actions {
+    margin-top: var(--hx-space-3, 0.75rem);
+    padding-top: var(--hx-space-3, 0.75rem);
+    border-top: var(--hx-border-width-thin, 1px) solid
+      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #dee2e6));
+  }
+
+  /* ─── Desktop breakpoint ─── */
+
+  /* NOTE: CSS @media queries do not support custom properties.
+     This value corresponds to --hx-breakpoint-md (768px). */
+  @media (min-width: 768px) {
+    /* Hide hamburger on desktop */
+    .mobile-toggle {
+      display: none;
+    }
+
+    .nav__bar {
+      flex-wrap: nowrap;
+    }
+
+    /* Collapsible becomes a standard inline flex row */
+    .nav__collapsible {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      width: auto;
+      flex: 1;
+      padding-block: 0;
+      border-top: none;
+      margin-inline-start: auto;
+      gap: var(--hx-space-4, 1rem);
+      animation: none;
+    }
+
+    /* Override open modifier — always visible on desktop regardless of state */
+    .nav__collapsible--open {
+      display: flex;
+      animation: none;
+    }
+
+    /* Menu grows to fill available space */
+    .nav__menu {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: var(--hx-space-1, 0.25rem);
+      flex: 1;
+      padding-inline: 0;
+    }
+
+    /* Actions sit at the far right */
+    .nav__actions {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: var(--hx-space-2, 0.5rem);
+      margin-top: 0;
+      padding-top: 0;
+      padding-inline: 0;
+      border-top: none;
+      flex-shrink: 0;
+    }
+  }
+
+  /* ─── Mobile menu open animation ─── */
+
+  @keyframes hx-mobile-nav-open {
+    from {
+      opacity: 0;
+      transform: translateY(-0.25rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  /* ─── Reduced motion ─── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .nav__collapsible--open {
+      animation: none;
+    }
+  }
+`;
+var u = Object.defineProperty, f = Object.getOwnPropertyDescriptor, l = (e, n, o, i) => {
+  for (var a = i > 1 ? void 0 : i ? f(n, o) : n, s = e.length - 1, p; s >= 0; s--)
+    (p = e[s]) && (a = (i ? p(n, o, a) : p(a)) || a);
+  return i && a && u(n, o, a), a;
+};
+let r = class extends h {
+  constructor() {
+    super(...arguments), this.sticky = !1, this.label = "Site Navigation", this._mobileOpen = !1, this._handleKeydown = (e) => {
+      var n, o;
+      e.key === "Escape" && this._mobileOpen && (this._mobileOpen = !1, this.dispatchEvent(
+        new CustomEvent("hx-mobile-toggle", {
+          bubbles: !0,
+          composed: !0,
+          detail: { open: !1 }
+        })
+      ), (o = (n = this.shadowRoot) == null ? void 0 : n.querySelector('[part="mobile-toggle"]')) == null || o.focus());
+    };
+  }
+  // ─── Lifecycle ───
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("keydown", this._handleKeydown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("keydown", this._handleKeydown);
+  }
+  // ─── Event Handling ───
+  _handleMobileToggle() {
+    this._mobileOpen = !this._mobileOpen, this.dispatchEvent(
+      new CustomEvent("hx-mobile-toggle", {
+        bubbles: !0,
+        composed: !0,
+        detail: { open: this._mobileOpen }
+      })
+    ), this._mobileOpen && this.updateComplete.then(() => {
+      var i;
+      const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector("slot:not([name])"), o = ((e == null ? void 0 : e.assignedElements({ flatten: !0 })) ?? []).find((a) => a instanceof HTMLElement);
+      o == null || o.focus();
+    });
+  }
+  // ─── Render Helpers ───
+  _renderHamburgerIcon() {
+    return t`
+      <svg
+        class="mobile-toggle__icon"
+        aria-hidden="true"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        ${this._mobileOpen ? t`
+              <line x1="18" y1="6" x2="6" y2="18"></line>
+              <line x1="6" y1="6" x2="18" y2="18"></line>
+            ` : t`
+              <line x1="3" y1="6" x2="21" y2="6"></line>
+              <line x1="3" y1="12" x2="21" y2="12"></line>
+              <line x1="3" y1="18" x2="21" y2="18"></line>
+            `}
+      </svg>
+    `;
+  }
+  // ─── Render ───
+  render() {
+    const e = {
+      nav__collapsible: !0,
+      "nav__collapsible--open": this._mobileOpen
+    };
+    return t`
+      <header part="header">
+        <nav part="nav" class="nav" aria-label=${this.label}>
+          <div class="nav__bar">
+            <div part="logo" class="nav__logo">
+              <slot name="logo"></slot>
+            </div>
+
+            <button
+              part="mobile-toggle"
+              class="mobile-toggle"
+              type="button"
+              aria-expanded=${String(this._mobileOpen)}
+              aria-controls="nav-menu"
+              aria-label="Toggle navigation"
+              @click=${this._handleMobileToggle}
+            >
+              ${this._renderHamburgerIcon()}
+            </button>
+
+            <div id="nav-menu" class=${x(e)}>
+              <div part="menu" class="nav__menu">
+                <slot></slot>
+              </div>
+
+              <div part="actions" class="nav__actions">
+                <slot name="actions"></slot>
+              </div>
+            </div>
+          </div>
+        </nav>
+      </header>
+    `;
+  }
+};
+r.styles = [b, g];
+l([
+  d({ type: Boolean, reflect: !0 })
+], r.prototype, "sticky", 2);
+l([
+  d({ type: String })
+], r.prototype, "label", 2);
+l([
+  v()
+], r.prototype, "_mobileOpen", 2);
+r = l([
+  m("hx-top-nav")
+], r);
+export {
+  r as H
+};
+//# sourceMappingURL=hx-top-nav-CBxdfPqY.js.map

package/dist/shared/hx-top-nav-CBxdfPqY.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-top-nav-CBxdfPqY.js","sources":["../../src/components/hx-top-nav/hx-top-nav.styles.ts","../../src/components/hx-top-nav/hx-top-nav.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixTopNavStyles = css`\n  /* ─── Host ─── */\n\n  :host {\n    display: block;\n  }\n\n  /* ─── Header wrapper (landmark) ─── */\n\n  header {\n    display: block;\n    margin: 0;\n    padding: 0;\n  }\n\n  /* ─── Sticky mode ─── */\n\n  :host([sticky]) .nav {\n    position: sticky;\n    top: 0;\n    /* Fallback 1000 is appropriate for sticky navbars (below modals ~1300, above content) */\n    z-index: var(--hx-top-nav-z-index, var(--hx-z-index-sticky, 1000));\n  }\n\n  /* ─── Nav container ─── */\n\n  .nav {\n    background-color: var(--hx-top-nav-bg, var(--hx-color-neutral-0, #ffffff));\n    color: var(--hx-top-nav-color, var(--hx-color-neutral-800, #212529));\n    border-bottom: var(--hx-border-width-thin, 1px) solid\n      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #dee2e6));\n    font-family: var(--hx-font-family-sans, sans-serif);\n  }\n\n  /* ─── Bar row (always visible) ─── */\n\n  .nav__bar {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    min-height: var(--hx-top-nav-height, var(--hx-space-16, 4rem));\n    padding-inline: var(--hx-top-nav-padding-x, var(--hx-space-6, 1.5rem));\n    gap: var(--hx-space-4, 1rem);\n  }\n\n  /* ─── Logo ─── */\n\n  .nav__logo {\n    display: flex;\n    align-items: center;\n    flex-shrink: 0;\n  }\n\n  /* ─── Mobile toggle (hamburger) ─── */\n\n  .mobile-toggle {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-inline-start: auto;\n    /* var(--hx-space-3, 0.75rem) padding + 24px icon = 48×48px touch target (exceeds WCAG 2.5.5 44×44px) */\n    padding: var(--hx-space-3, 0.75rem);\n    background: transparent;\n    border: none;\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n    color: var(--hx-top-nav-toggle-color, var(--hx-color-neutral-700, #343a40));\n    cursor: pointer;\n    line-height: 0;\n  }\n\n  .mobile-toggle:hover {\n    background: var(--hx-color-neutral-100, #f1f3f5);\n  }\n\n  .mobile-toggle:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  .mobile-toggle__icon {\n    width: var(--hx-space-6, 1.5rem);\n    height: var(--hx-space-6, 1.5rem);\n  }\n\n  /* ─── Collapsible panel (mobile) ─── */\n\n  .nav__collapsible {\n    display: none;\n    flex-direction: column;\n    width: 100%;\n    padding-block: var(--hx-space-3, 0.75rem);\n    border-top: var(--hx-border-width-thin, 1px) solid\n      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #dee2e6));\n  }\n\n  .nav__collapsible--open {\n    display: flex;\n    animation: hx-mobile-nav-open var(--hx-duration-fast, 150ms) ease-out;\n  }\n\n  /* ─── Menu and actions in collapsible (mobile) ─── */\n\n  .nav__menu,\n  .nav__actions {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-1, 0.25rem);\n    padding-inline: var(--hx-top-nav-padding-x, var(--hx-space-6, 1.5rem));\n  }\n\n  .nav__actions {\n    margin-top: var(--hx-space-3, 0.75rem);\n    padding-top: var(--hx-space-3, 0.75rem);\n    border-top: var(--hx-border-width-thin, 1px) solid\n      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #dee2e6));\n  }\n\n  /* ─── Desktop breakpoint ─── */\n\n  /* NOTE: CSS @media queries do not support custom properties.\n     This value corresponds to --hx-breakpoint-md (768px). */\n  @media (min-width: 768px) {\n    /* Hide hamburger on desktop */\n    .mobile-toggle {\n      display: none;\n    }\n\n    .nav__bar {\n      flex-wrap: nowrap;\n    }\n\n    /* Collapsible becomes a standard inline flex row */\n    .nav__collapsible {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      width: auto;\n      flex: 1;\n      padding-block: 0;\n      border-top: none;\n      margin-inline-start: auto;\n      gap: var(--hx-space-4, 1rem);\n      animation: none;\n    }\n\n    /* Override open modifier — always visible on desktop regardless of state */\n    .nav__collapsible--open {\n      display: flex;\n      animation: none;\n    }\n\n    /* Menu grows to fill available space */\n    .nav__menu {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      gap: var(--hx-space-1, 0.25rem);\n      flex: 1;\n      padding-inline: 0;\n    }\n\n    /* Actions sit at the far right */\n    .nav__actions {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      gap: var(--hx-space-2, 0.5rem);\n      margin-top: 0;\n      padding-top: 0;\n      padding-inline: 0;\n      border-top: none;\n      flex-shrink: 0;\n    }\n  }\n\n  /* ─── Mobile menu open animation ─── */\n\n  @keyframes hx-mobile-nav-open {\n    from {\n      opacity: 0;\n      transform: translateY(-0.25rem);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .nav__collapsible--open {\n      animation: none;\n    }\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixTopNavStyles } from './hx-top-nav.styles.js';\n\n/**\n * Top-of-page site navigation bar with logo, menu items, and utility area.\n * Supports sticky positioning, responsive hamburger menu, and full slot-driven\n * content composition for Drupal and other CMS consumers.\n *\n * @summary Site-level navigation bar with logo, nav items, and action slots.\n *\n * @tag hx-top-nav\n *\n * @slot logo - Brand area rendered on the left side.\n * @slot - Default slot for primary navigation items rendered in the center.\n *   IMPORTANT: Do NOT place a `<nav>` element in this slot — the component\n *   already renders a `<nav>` landmark internally. Use a `<div>` or bare links.\n * @slot actions - Utility area rendered on the right side (search, user menu, etc.).\n *\n * @fires {CustomEvent<{open: boolean}>} hx-mobile-toggle - Dispatched when the\n *   hamburger button is toggled. Detail contains the new open state.\n *\n * @csspart header - The outer `<header>` landmark element.\n * @csspart nav - The `<nav>` element inside the header.\n * @csspart logo - The logo slot container.\n * @csspart menu - The primary navigation slot container.\n * @csspart actions - The actions slot container.\n * @csspart mobile-toggle - The hamburger toggle button.\n *\n * @cssprop [--hx-top-nav-bg=var(--hx-color-neutral-0)] - Navigation bar background color.\n * @cssprop [--hx-top-nav-color=var(--hx-color-neutral-800)] - Navigation bar text color.\n * @cssprop [--hx-top-nav-border-color=var(--hx-color-neutral-200)] - Bottom border color.\n * @cssprop [--hx-top-nav-height=var(--hx-space-16)] - Navigation bar height.\n * @cssprop [--hx-top-nav-padding-x=var(--hx-space-6)] - Horizontal padding.\n * @cssprop [--hx-top-nav-z-index=var(--hx-z-index-sticky)] - Z-index for sticky mode.\n * @cssprop [--hx-top-nav-toggle-color=var(--hx-color-neutral-700)] - Hamburger icon color.\n */\n@customElement('hx-top-nav')\nexport class HelixTopNav extends LitElement {\n  static override styles = [tokenStyles, helixTopNavStyles];\n\n  // ─── Public Properties ───\n\n  /**\n   * When true, the navigation bar sticks to the top of the viewport during scroll.\n   * @attr sticky\n   */\n  @property({ type: Boolean, reflect: true })\n  sticky = false;\n\n  /**\n   * Accessible label applied to the `<nav>` element via `aria-label`.\n   * @attr label\n   */\n  @property({ type: String })\n  label = 'Site Navigation';\n\n  // ─── Private State ───\n\n  /** Whether the mobile collapsible menu is currently open. */\n  @state() private _mobileOpen = false;\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('keydown', this._handleKeydown);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this._handleKeydown);\n  }\n\n  // ─── Event Handling ───\n\n  private _handleMobileToggle(): void {\n    this._mobileOpen = !this._mobileOpen;\n\n    /**\n     * Dispatched when the hamburger button is toggled.\n     * @event hx-mobile-toggle\n     */\n    this.dispatchEvent(\n      new CustomEvent<{ open: boolean }>('hx-mobile-toggle', {\n        bubbles: true,\n        composed: true,\n        detail: { open: this._mobileOpen },\n      }),\n    );\n\n    if (this._mobileOpen) {\n      // Move focus to first interactive element in the default slot\n      this.updateComplete.then(() => {\n        const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n        const assigned = slot?.assignedElements({ flatten: true }) ?? [];\n        const firstFocusable = assigned.find((el): el is HTMLElement => el instanceof HTMLElement);\n        firstFocusable?.focus();\n      });\n    }\n  }\n\n  private _handleKeydown = (e: KeyboardEvent): void => {\n    if (e.key === 'Escape' && this._mobileOpen) {\n      this._mobileOpen = false;\n      this.dispatchEvent(\n        new CustomEvent<{ open: boolean }>('hx-mobile-toggle', {\n          bubbles: true,\n          composed: true,\n          detail: { open: false },\n        }),\n      );\n      // Return focus to the toggle button\n      this.shadowRoot?.querySelector<HTMLButtonElement>('[part=\"mobile-toggle\"]')?.focus();\n    }\n  };\n\n  // ─── Render Helpers ───\n\n  private _renderHamburgerIcon() {\n    return html`\n      <svg\n        class=\"mobile-toggle__icon\"\n        aria-hidden=\"true\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      >\n        ${this._mobileOpen\n          ? html`\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n            `\n          : html`\n              <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\n              <line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\"></line>\n              <line x1=\"3\" y1=\"18\" x2=\"21\" y2=\"18\"></line>\n            `}\n      </svg>\n    `;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const menuClasses = {\n      nav__collapsible: true,\n      'nav__collapsible--open': this._mobileOpen,\n    };\n\n    return html`\n      <header part=\"header\">\n        <nav part=\"nav\" class=\"nav\" aria-label=${this.label}>\n          <div class=\"nav__bar\">\n            <div part=\"logo\" class=\"nav__logo\">\n              <slot name=\"logo\"></slot>\n            </div>\n\n            <button\n              part=\"mobile-toggle\"\n              class=\"mobile-toggle\"\n              type=\"button\"\n              aria-expanded=${String(this._mobileOpen)}\n              aria-controls=\"nav-menu\"\n              aria-label=\"Toggle navigation\"\n              @click=${this._handleMobileToggle}\n            >\n              ${this._renderHamburgerIcon()}\n            </button>\n\n            <div id=\"nav-menu\" class=${classMap(menuClasses)}>\n              <div part=\"menu\" class=\"nav__menu\">\n                <slot></slot>\n              </div>\n\n              <div part=\"actions\" class=\"nav__actions\">\n                <slot name=\"actions\"></slot>\n              </div>\n            </div>\n          </div>\n        </nav>\n      </header>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-top-nav': HelixTopNav;\n  }\n}\n"],"names":["helixTopNavStyles","css","HelixTopNav","LitElement","_b","_a","slot","firstFocusable","el","html","menuClasses","classMap","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}