@sankhyatronics/sankhya-cms 0.0.0-stage → 0.1.0

package/dist/chunk-RMIJVTFS.js

@@ -0,0 +1,397 @@
+import {
+  buttonResetStyles,
+  controlBaseStyles,
+  fontFamilyStyles
+} from "./chunk-RHAOQ6K4.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// src/dropdown/Dropdown.ts
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+var Dropdown = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.label = "";
+    this.href = "";
+    this.iconPosition = "left";
+    this.iconSize = "1.2rem";
+    this.iconColor = "currentColor";
+    this.align = "left";
+    this.target = "_self";
+    this.triggerClassName = "";
+    this.itemGroupClassName = "";
+    this.itemClassName = "";
+    this.disabled = false;
+    this.active = false;
+    this.inline = false;
+    this.open = false;
+    this.hasContent = false;
+    this.hasIcon = false;
+    this.closeOnOutsideMouseDown = (event) => {
+      if (this.open && !event.composedPath().includes(this)) this.setOpen(false);
+    };
+    this.closeOnEscape = (event) => {
+      if (!this.open || event.key !== "Escape") return;
+      const focusWasInside = event.composedPath().includes(this);
+      this.setOpen(false);
+      if (focusWasInside) this.trigger()?.focus();
+    };
+    /** Enter/Space/ArrowDown open the panel and focus its first entry; ArrowUp its last. */
+    this.onTitleKeyDown = (event) => {
+      if (!this.hasContent || this.disabled) return;
+      if (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        event.stopPropagation();
+        this.setOpen(true);
+        this.focusItem((items) => items[0]);
+      } else if (event.key === "ArrowUp") {
+        event.preventDefault();
+        event.stopPropagation();
+        this.setOpen(true);
+        this.focusItem((items) => items[items.length - 1]);
+      }
+    };
+    /** Arrow keys/Home/End move between the panel's entries; Tab closes the panel and moves on. */
+    this.onPanelKeyDown = (event) => {
+      if (event.key === "Tab") {
+        this.setOpen(false);
+        return;
+      }
+      if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) return;
+      const items = this.panelItems();
+      if (items.length === 0) return;
+      event.preventDefault();
+      event.stopPropagation();
+      const path = event.composedPath();
+      const current = items.findIndex((item) => path.includes(item));
+      const last = items.length - 1;
+      const next = event.key === "Home" ? 0 : event.key === "End" ? last : event.key === "ArrowDown" ? current < 0 || current === last ? 0 : current + 1 : current <= 0 ? last : current - 1;
+      items[next].focus();
+    };
+    this.onTitleClick = (event) => {
+      event.stopPropagation();
+      if (!this.hasContent) return;
+      event.preventDefault();
+      this.setOpen(!this.open);
+    };
+    /** A click anywhere inside the panel closes it, as in the source. */
+    this.onPanelClick = () => {
+      this.setOpen(false);
+    };
+    this.onContentSlotChange = (event) => {
+      this.hasContent = event.target.assignedNodes({ flatten: true }).some(
+        (node) => node.nodeType === Node.ELEMENT_NODE || !!node.textContent?.trim()
+      );
+    };
+    this.onIconSlotChange = (event) => {
+      this.hasIcon = event.target.assignedNodes({ flatten: true }).length > 0;
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener("mousedown", this.closeOnOutsideMouseDown);
+    window.addEventListener("keydown", this.closeOnEscape);
+  }
+  disconnectedCallback() {
+    document.removeEventListener("mousedown", this.closeOnOutsideMouseDown);
+    window.removeEventListener("keydown", this.closeOnEscape);
+    if (Dropdown.openDropdown === this) Dropdown.openDropdown = null;
+    super.disconnectedCallback();
+  }
+  updated(changed) {
+    if (!changed.has("open")) return;
+    if (this.open) {
+      const previous = Dropdown.openDropdown;
+      Dropdown.openDropdown = this;
+      if (previous && previous !== this) previous.setOpen(false);
+    } else if (Dropdown.openDropdown === this) {
+      Dropdown.openDropdown = null;
+    }
+  }
+  setOpen(open) {
+    if (this.open === open) return;
+    this.open = open;
+    this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open }, bubbles: true, composed: true }));
+  }
+  trigger() {
+    return this.renderRoot.querySelector(".menu-title");
+  }
+  /** Keyboard-reachable entries in the panel, in order: menu items (they delegate focus to their
+   * own link) plus any plain links/buttons/tabbable elements a caller slots in. */
+  panelItems() {
+    const slot = this.renderRoot.querySelector(".menu-dropdown slot");
+    if (!slot) return [];
+    const selector = 'st-menu-item, st-menu-grid-item, a[href], button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])';
+    const items = [];
+    for (const el of slot.assignedElements({ flatten: true })) {
+      if (el.matches(selector)) items.push(el);
+      items.push(...Array.from(el.querySelectorAll(selector)));
+    }
+    return items;
+  }
+  /** Moves focus into the panel once it has become visible (it is `visibility: hidden` until the
+   * `show` class lands, and hidden elements can't take focus). */
+  focusItem(pick) {
+    void this.updateComplete.then(() => pick(this.panelItems())?.focus());
+  }
+  render() {
+    const icon = html`<span
+      class="icon ${this.iconPosition === "left" ? "icon-left" : "icon-right"}"
+      ?hidden=${!this.hasIcon}
+      style="width:${this.iconSize};height:${this.iconSize};color:${this.iconColor}"
+      ><slot name="icon" @slotchange=${this.onIconSlotChange}></slot
+    ></span>`;
+    const titleContent = html`
+      ${this.iconPosition === "left" ? icon : nothing} ${this.label ? html`<span part="label">${this.label}</span>` : nothing}
+      ${this.iconPosition === "right" ? icon : nothing}
+      ${this.hasContent ? html`<span class="arrow" part="caret" aria-hidden="true">▼</span>` : nothing}
+    `;
+    const titleClass = `menu-title ${this.triggerClassName} ${this.open ? "active" : ""}`;
+    return html`
+      <div class="menu" part="menu">
+        ${this.href ? html`
+              <a
+                part="trigger"
+                class=${titleClass}
+                href=${this.href}
+                target=${this.target}
+                aria-haspopup=${this.hasContent ? "true" : "false"}
+                aria-expanded=${this.open}
+                aria-disabled=${this.disabled ? "true" : nothing}
+                @click=${this.onTitleClick}
+                @keydown=${this.onTitleKeyDown}
+              >
+                ${titleContent}
+              </a>
+            ` : html`
+              <button
+                part="trigger"
+                class=${titleClass}
+                type="button"
+                aria-haspopup="true"
+                aria-expanded=${this.open}
+                ?disabled=${this.disabled}
+                @click=${this.onTitleClick}
+                @keydown=${this.onTitleKeyDown}
+              >
+                ${titleContent}
+              </button>
+            `}
+        <div
+          part="panel"
+          class="menu-dropdown align-${this.align} ${this.itemGroupClassName} ${this.open ? "show" : ""}"
+          role="menu"
+          @click=${this.onPanelClick}
+          @keydown=${this.onPanelKeyDown}
+        >
+          <slot @slotchange=${this.onContentSlotChange}></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+/** The open dropdown, if any — the source's `DropdownContext.activeDropdown`. */
+Dropdown.openDropdown = null;
+Dropdown.styles = css`
+    ${controlBaseStyles}
+
+    :host {
+      display: inline-block;
+      position: relative;
+      ${fontFamilyStyles}
+    }
+
+    .menu-title {
+      ${buttonResetStyles}
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      min-height: 40px;
+      padding: 12px;
+      gap: 8px;
+      text-align: center;
+      width: fit-content;
+      border-radius: var(--st-radius-sm);
+      color: var(--st-color-text);
+      font-size: 0.875rem;
+      text-decoration: none;
+      white-space: nowrap;
+      transition: background-color 0.3s ease;
+    }
+
+    .menu-title:hover,
+    .menu-title[aria-expanded='true'] {
+      background: var(--st-color-hover);
+      color: var(--st-color-text-strong);
+    }
+
+    :host([active]) .menu-title {
+      background: var(--st-color-accent-subtle);
+      color: var(--st-color-accent-text);
+    }
+
+    :host([disabled]) .menu-title {
+      color: var(--st-color-text-muted);
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    .icon {
+      display: inline-flex;
+      flex: none;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .icon[hidden] {
+      display: none;
+    }
+
+    .arrow {
+      display: inline-block;
+      margin-left: 8px;
+      font-size: 0.75rem;
+      transition: transform 0.3s ease;
+    }
+
+    .menu-title[aria-expanded='true'] .arrow {
+      transform: rotate(180deg);
+    }
+
+    .menu-dropdown {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      z-index: 100;
+      padding: 16px;
+      background: var(--st-color-surface);
+      color: var(--st-color-text);
+      border: 1px solid var(--st-color-border);
+      border-radius: var(--st-radius-sm);
+      box-shadow: 0 4px 16px var(--st-shadow-color-sm);
+      opacity: 0;
+      visibility: hidden;
+      transform: translateY(-10px);
+      /* visibility flips at once on open (so keyboard focus can move into the panel on the same
+         frame) and only after the 0.3s fade on close. */
+      transition:
+        opacity 0.3s ease,
+        transform 0.3s ease,
+        visibility 0s linear 0.3s;
+      pointer-events: none;
+    }
+
+    .menu-dropdown.align-right {
+      left: auto;
+      right: 0;
+    }
+
+    .menu-dropdown.show {
+      opacity: 1;
+      visibility: visible;
+      transform: translateY(0);
+      pointer-events: auto;
+      transition-delay: 0s;
+    }
+
+    /* Inline: the panel opens in the flow under its trigger and pushes what follows down, instead
+       of floating — the source's .touch-device layout. st-header turns this on for its menu while
+       the hamburger panel is showing. */
+    :host([inline]) {
+      display: block;
+    }
+
+    :host([inline]) .menu-title {
+      width: 100%;
+      justify-content: flex-start;
+    }
+
+    :host([inline]) .arrow {
+      margin-left: auto;
+    }
+
+    :host([inline]) .menu-dropdown {
+      display: none;
+      position: relative;
+      top: auto;
+      left: auto;
+      right: auto;
+      width: 100%;
+      box-sizing: border-box;
+      box-shadow: none;
+      opacity: 1;
+      visibility: visible;
+      transform: none;
+    }
+
+    :host([inline]) .menu-dropdown.show {
+      display: block;
+      pointer-events: auto;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .menu-dropdown,
+      .arrow {
+        transition: none;
+      }
+    }
+  `;
+__decorateClass([
+  property({ type: String })
+], Dropdown.prototype, "label", 2);
+__decorateClass([
+  property({ type: String })
+], Dropdown.prototype, "href", 2);
+__decorateClass([
+  property({ type: String, attribute: "icon-position" })
+], Dropdown.prototype, "iconPosition", 2);
+__decorateClass([
+  property({ type: String, attribute: "icon-size" })
+], Dropdown.prototype, "iconSize", 2);
+__decorateClass([
+  property({ type: String, attribute: "icon-color" })
+], Dropdown.prototype, "iconColor", 2);
+__decorateClass([
+  property({ type: String })
+], Dropdown.prototype, "align", 2);
+__decorateClass([
+  property({ type: String })
+], Dropdown.prototype, "target", 2);
+__decorateClass([
+  property({ type: String, attribute: "trigger-class-name" })
+], Dropdown.prototype, "triggerClassName", 2);
+__decorateClass([
+  property({ type: String, attribute: "item-group-class-name" })
+], Dropdown.prototype, "itemGroupClassName", 2);
+__decorateClass([
+  property({ type: String, attribute: "item-class-name" })
+], Dropdown.prototype, "itemClassName", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Dropdown.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Dropdown.prototype, "active", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Dropdown.prototype, "inline", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Dropdown.prototype, "open", 2);
+__decorateClass([
+  state()
+], Dropdown.prototype, "hasContent", 2);
+__decorateClass([
+  state()
+], Dropdown.prototype, "hasIcon", 2);
+Dropdown = __decorateClass([
+  customElement("st-dropdown")
+], Dropdown);
+
+export {
+  Dropdown
+};
+//# sourceMappingURL=chunk-RMIJVTFS.js.map

package/dist/chunk-RMIJVTFS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/dropdown/Dropdown.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property, state } from 'lit/decorators.js';\r\n\r\nimport { buttonResetStyles, controlBaseStyles, fontFamilyStyles } from '../shared/styles';\r\nimport type { DropdownToggleEventDetail } from './DropdownEvents';\r\n\r\n/**\r\n * A labeled trigger + slotted dropdown panel — nav menus (typically holding an `st-menu-grid`),\r\n * action menus, anything \"click a trigger, show content under it\". A 1:1 port of `SankhyaUI`'s\r\n * React `Dropdown` (`SankhyaCMS/SankhyaUI/src/components/Dropdown`): same markup\r\n * (`.menu` > `.menu-title` + `.menu-dropdown`), sizes, 0.3s slide/fade, and behavior —\r\n *\r\n * - only one dropdown is open at a time (the source's `DropdownProvider`, built in here, so no\r\n *   provider element is needed);\r\n * - a mousedown outside, Escape, or a click inside the panel closes it;\r\n * - an `href` trigger toggles the panel when it has content, and is a plain link when it doesn't;\r\n * - `inline` opens the panel in the flow, the source's `.touch-device` layout.\r\n *\r\n * Colors and the panel's surface come from the suite theme (the source left those to the\r\n * consumer's `className`/`itemGroupClassName` utility classes). Two source rules are left out\r\n * because they break existing suite uses (`st-source-bar`'s site/library menus): the 100vw panel\r\n * at <=768px (overflows the screen from wherever the trigger sits; the header uses `inline`\r\n * instead) and `overflow: hidden` on slotted children (clips their focus rings). Suite additions\r\n * kept on top: `align`, `active`, `disabled`, `inline`, and the `dropdown-toggle` event.\r\n */\r\n@customElement('st-dropdown')\r\nexport class Dropdown extends LitElement {\r\n  /** The open dropdown, if any — the source's `DropdownContext.activeDropdown`. */\r\n  private static openDropdown: Dropdown | null = null;\r\n\r\n  static styles = css`\r\n    ${controlBaseStyles}\r\n\r\n    :host {\r\n      display: inline-block;\r\n      position: relative;\r\n      ${fontFamilyStyles}\r\n    }\r\n\r\n    .menu-title {\r\n      ${buttonResetStyles}\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      box-sizing: border-box;\r\n      min-height: 40px;\r\n      padding: 12px;\r\n      gap: 8px;\r\n      text-align: center;\r\n      width: fit-content;\r\n      border-radius: var(--st-radius-sm);\r\n      color: var(--st-color-text);\r\n      font-size: 0.875rem;\r\n      text-decoration: none;\r\n      white-space: nowrap;\r\n      transition: background-color 0.3s ease;\r\n    }\r\n\r\n    .menu-title:hover,\r\n    .menu-title[aria-expanded='true'] {\r\n      background: var(--st-color-hover);\r\n      color: var(--st-color-text-strong);\r\n    }\r\n\r\n    :host([active]) .menu-title {\r\n      background: var(--st-color-accent-subtle);\r\n      color: var(--st-color-accent-text);\r\n    }\r\n\r\n    :host([disabled]) .menu-title {\r\n      color: var(--st-color-text-muted);\r\n      cursor: not-allowed;\r\n      pointer-events: none;\r\n    }\r\n\r\n    .icon {\r\n      display: inline-flex;\r\n      flex: none;\r\n      align-items: center;\r\n      justify-content: center;\r\n    }\r\n\r\n    .icon[hidden] {\r\n      display: none;\r\n    }\r\n\r\n    .arrow {\r\n      display: inline-block;\r\n      margin-left: 8px;\r\n      font-size: 0.75rem;\r\n      transition: transform 0.3s ease;\r\n    }\r\n\r\n    .menu-title[aria-expanded='true'] .arrow {\r\n      transform: rotate(180deg);\r\n    }\r\n\r\n    .menu-dropdown {\r\n      position: absolute;\r\n      top: 100%;\r\n      left: 0;\r\n      z-index: 100;\r\n      padding: 16px;\r\n      background: var(--st-color-surface);\r\n      color: var(--st-color-text);\r\n      border: 1px solid var(--st-color-border);\r\n      border-radius: var(--st-radius-sm);\r\n      box-shadow: 0 4px 16px var(--st-shadow-color-sm);\r\n      opacity: 0;\r\n      visibility: hidden;\r\n      transform: translateY(-10px);\r\n      /* visibility flips at once on open (so keyboard focus can move into the panel on the same\r\n         frame) and only after the 0.3s fade on close. */\r\n      transition:\r\n        opacity 0.3s ease,\r\n        transform 0.3s ease,\r\n        visibility 0s linear 0.3s;\r\n      pointer-events: none;\r\n    }\r\n\r\n    .menu-dropdown.align-right {\r\n      left: auto;\r\n      right: 0;\r\n    }\r\n\r\n    .menu-dropdown.show {\r\n      opacity: 1;\r\n      visibility: visible;\r\n      transform: translateY(0);\r\n      pointer-events: auto;\r\n      transition-delay: 0s;\r\n    }\r\n\r\n    /* Inline: the panel opens in the flow under its trigger and pushes what follows down, instead\r\n       of floating — the source's .touch-device layout. st-header turns this on for its menu while\r\n       the hamburger panel is showing. */\r\n    :host([inline]) {\r\n      display: block;\r\n    }\r\n\r\n    :host([inline]) .menu-title {\r\n      width: 100%;\r\n      justify-content: flex-start;\r\n    }\r\n\r\n    :host([inline]) .arrow {\r\n      margin-left: auto;\r\n    }\r\n\r\n    :host([inline]) .menu-dropdown {\r\n      display: none;\r\n      position: relative;\r\n      top: auto;\r\n      left: auto;\r\n      right: auto;\r\n      width: 100%;\r\n      box-sizing: border-box;\r\n      box-shadow: none;\r\n      opacity: 1;\r\n      visibility: visible;\r\n      transform: none;\r\n    }\r\n\r\n    :host([inline]) .menu-dropdown.show {\r\n      display: block;\r\n      pointer-events: auto;\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      .menu-dropdown,\r\n      .arrow {\r\n        transition: none;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** Trigger label text (source: `title`, renamed because `title` is the native tooltip\r\n   * attribute). Leave empty to show only `slot=\"icon\"`. */\r\n  @property({ type: String })\r\n  label = '';\r\n\r\n  /** Renders the trigger as an `<a href>`. With panel content the click toggles the panel (as in\r\n   * the source); with none it navigates. */\r\n  @property({ type: String })\r\n  href = '';\r\n\r\n  @property({ type: String, attribute: 'icon-position' })\r\n  iconPosition: 'left' | 'right' = 'left';\r\n\r\n  /** Inline `width`/`height` of the `slot=\"icon\"` wrapper (source: `iconSize`, default `1.2rem`). */\r\n  @property({ type: String, attribute: 'icon-size' })\r\n  iconSize = '1.2rem';\r\n\r\n  /** Inline `color` of the `slot=\"icon\"` wrapper (source: `iconColor`). */\r\n  @property({ type: String, attribute: 'icon-color' })\r\n  iconColor = 'currentColor';\r\n\r\n  /** Which edge of the trigger the panel lines up with. */\r\n  @property({ type: String })\r\n  align: 'left' | 'right' = 'left';\r\n\r\n  /** `target` of an `href` trigger (source default `_self`). */\r\n  @property({ type: String })\r\n  target = '_self';\r\n\r\n  /** Extra class(es) on the trigger (source: `className`; a `class` on `st-dropdown` styles the host). */\r\n  @property({ type: String, attribute: 'trigger-class-name' })\r\n  triggerClassName = '';\r\n\r\n  /** Extra class(es) on the panel (source: `itemGroupClassName`). */\r\n  @property({ type: String, attribute: 'item-group-class-name' })\r\n  itemGroupClassName = '';\r\n\r\n  /** Unused, as in the source (`itemClassName` is never read there); kept for prop parity. */\r\n  @property({ type: String, attribute: 'item-class-name' })\r\n  itemClassName = '';\r\n\r\n  @property({ type: Boolean, reflect: true })\r\n  disabled = false;\r\n\r\n  /** Highlights the trigger as the current section (e.g. the current page is one of its items). */\r\n  @property({ type: Boolean, reflect: true })\r\n  active = false;\r\n\r\n  /** Opens the panel in the flow under the trigger instead of floating over the page (see the\r\n   * styles). `st-header` sets this on its own menu's dropdowns while its hamburger panel shows. */\r\n  @property({ type: Boolean, reflect: true })\r\n  inline = false;\r\n\r\n  /** Whether the panel is showing. Follows user toggles; may also be set from outside. */\r\n  @property({ type: Boolean, reflect: true })\r\n  open = false;\r\n\r\n  /** Whether the default slot has content — the source's `children` check. */\r\n  @state() private hasContent = false;\r\n\r\n  /** Whether `slot=\"icon\"` has content. */\r\n  @state() private hasIcon = false;\r\n\r\n  connectedCallback(): void {\r\n    super.connectedCallback();\r\n    document.addEventListener('mousedown', this.closeOnOutsideMouseDown);\r\n    window.addEventListener('keydown', this.closeOnEscape);\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    document.removeEventListener('mousedown', this.closeOnOutsideMouseDown);\r\n    window.removeEventListener('keydown', this.closeOnEscape);\r\n    if (Dropdown.openDropdown === this) Dropdown.openDropdown = null;\r\n    super.disconnectedCallback();\r\n  }\r\n\r\n  protected updated(changed: Map<string, unknown>): void {\r\n    if (!changed.has('open')) return;\r\n    if (this.open) {\r\n      const previous = Dropdown.openDropdown;\r\n      Dropdown.openDropdown = this;\r\n      if (previous && previous !== this) previous.setOpen(false);\r\n    } else if (Dropdown.openDropdown === this) {\r\n      Dropdown.openDropdown = null;\r\n    }\r\n  }\r\n\r\n  private setOpen(open: boolean): void {\r\n    if (this.open === open) return;\r\n    this.open = open;\r\n    this.dispatchEvent(new CustomEvent<DropdownToggleEventDetail>('dropdown-toggle', { detail: { open }, bubbles: true, composed: true }));\r\n  }\r\n\r\n  private closeOnOutsideMouseDown = (event: Event): void => {\r\n    if (this.open && !event.composedPath().includes(this)) this.setOpen(false);\r\n  };\r\n\r\n  private closeOnEscape = (event: KeyboardEvent): void => {\r\n    if (!this.open || event.key !== 'Escape') return;\r\n    const focusWasInside = event.composedPath().includes(this);\r\n    this.setOpen(false);\r\n    if (focusWasInside) this.trigger()?.focus();\r\n  };\r\n\r\n  private trigger(): HTMLElement | null {\r\n    return this.renderRoot.querySelector<HTMLElement>('.menu-title');\r\n  }\r\n\r\n  /** Keyboard-reachable entries in the panel, in order: menu items (they delegate focus to their\r\n   * own link) plus any plain links/buttons/tabbable elements a caller slots in. */\r\n  private panelItems(): HTMLElement[] {\r\n    const slot = this.renderRoot.querySelector<HTMLSlotElement>('.menu-dropdown slot');\r\n    if (!slot) return [];\r\n    const selector =\r\n      'st-menu-item, st-menu-grid-item, a[href], button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\r\n    const items: HTMLElement[] = [];\r\n    for (const el of slot.assignedElements({ flatten: true })) {\r\n      if (el.matches(selector)) items.push(el as HTMLElement);\r\n      items.push(...Array.from(el.querySelectorAll<HTMLElement>(selector)));\r\n    }\r\n    return items;\r\n  }\r\n\r\n  /** Moves focus into the panel once it has become visible (it is `visibility: hidden` until the\r\n   * `show` class lands, and hidden elements can't take focus). */\r\n  private focusItem(pick: (items: HTMLElement[]) => HTMLElement | undefined): void {\r\n    void this.updateComplete.then(() => pick(this.panelItems())?.focus());\r\n  }\r\n\r\n  /** Enter/Space/ArrowDown open the panel and focus its first entry; ArrowUp its last. */\r\n  private onTitleKeyDown = (event: KeyboardEvent): void => {\r\n    if (!this.hasContent || this.disabled) return;\r\n    if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {\r\n      event.preventDefault();\r\n      event.stopPropagation();\r\n      this.setOpen(true);\r\n      this.focusItem((items) => items[0]);\r\n    } else if (event.key === 'ArrowUp') {\r\n      event.preventDefault();\r\n      event.stopPropagation();\r\n      this.setOpen(true);\r\n      this.focusItem((items) => items[items.length - 1]);\r\n    }\r\n  };\r\n\r\n  /** Arrow keys/Home/End move between the panel's entries; Tab closes the panel and moves on. */\r\n  private onPanelKeyDown = (event: KeyboardEvent): void => {\r\n    if (event.key === 'Tab') {\r\n      this.setOpen(false);\r\n      return;\r\n    }\r\n    if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) return;\r\n    const items = this.panelItems();\r\n    if (items.length === 0) return;\r\n    event.preventDefault();\r\n    event.stopPropagation();\r\n    const path = event.composedPath();\r\n    const current = items.findIndex((item) => path.includes(item));\r\n    const last = items.length - 1;\r\n    const next =\r\n      event.key === 'Home'\r\n        ? 0\r\n        : event.key === 'End'\r\n          ? last\r\n          : event.key === 'ArrowDown'\r\n            ? current < 0 || current === last ? 0 : current + 1\r\n            : current <= 0 ? last : current - 1;\r\n    items[next].focus();\r\n  };\r\n\r\n  private onTitleClick = (event: Event): void => {\r\n    event.stopPropagation();\r\n    if (!this.hasContent) return;\r\n    event.preventDefault();\r\n    this.setOpen(!this.open);\r\n  };\r\n\r\n  /** A click anywhere inside the panel closes it, as in the source. */\r\n  private onPanelClick = (): void => {\r\n    this.setOpen(false);\r\n  };\r\n\r\n  private onContentSlotChange = (event: Event): void => {\r\n    this.hasContent = (event.target as HTMLSlotElement).assignedNodes({ flatten: true }).some(\r\n      (node) => node.nodeType === Node.ELEMENT_NODE || !!node.textContent?.trim()\r\n    );\r\n  };\r\n\r\n  private onIconSlotChange = (event: Event): void => {\r\n    this.hasIcon = (event.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;\r\n  };\r\n\r\n  render() {\r\n    const icon = html`<span\r\n      class=\"icon ${this.iconPosition === 'left' ? 'icon-left' : 'icon-right'}\"\r\n      ?hidden=${!this.hasIcon}\r\n      style=\"width:${this.iconSize};height:${this.iconSize};color:${this.iconColor}\"\r\n      ><slot name=\"icon\" @slotchange=${this.onIconSlotChange}></slot\r\n    ></span>`;\r\n    const titleContent = html`\r\n      ${this.iconPosition === 'left' ? icon : nothing} ${this.label ? html`<span part=\"label\">${this.label}</span>` : nothing}\r\n      ${this.iconPosition === 'right' ? icon : nothing}\r\n      ${this.hasContent ? html`<span class=\"arrow\" part=\"caret\" aria-hidden=\"true\">▼</span>` : nothing}\r\n    `;\r\n    const titleClass = `menu-title ${this.triggerClassName} ${this.open ? 'active' : ''}`;\r\n\r\n    return html`\r\n      <div class=\"menu\" part=\"menu\">\r\n        ${this.href\r\n          ? html`\r\n              <a\r\n                part=\"trigger\"\r\n                class=${titleClass}\r\n                href=${this.href}\r\n                target=${this.target}\r\n                aria-haspopup=${this.hasContent ? 'true' : 'false'}\r\n                aria-expanded=${this.open}\r\n                aria-disabled=${this.disabled ? 'true' : nothing}\r\n                @click=${this.onTitleClick}\r\n                @keydown=${this.onTitleKeyDown}\r\n              >\r\n                ${titleContent}\r\n              </a>\r\n            `\r\n          : html`\r\n              <button\r\n                part=\"trigger\"\r\n                class=${titleClass}\r\n                type=\"button\"\r\n                aria-haspopup=\"true\"\r\n                aria-expanded=${this.open}\r\n                ?disabled=${this.disabled}\r\n                @click=${this.onTitleClick}\r\n                @keydown=${this.onTitleKeyDown}\r\n              >\r\n                ${titleContent}\r\n              </button>\r\n            `}\r\n        <div\r\n          part=\"panel\"\r\n          class=\"menu-dropdown align-${this.align} ${this.itemGroupClassName} ${this.open ? 'show' : ''}\"\r\n          role=\"menu\"\r\n          @click=${this.onPanelClick}\r\n          @keydown=${this.onPanelKeyDown}\r\n        >\r\n          <slot @slotchange=${this.onContentSlotChange}></slot>\r\n        </div>\r\n      </div>\r\n    `;\r\n  }\r\n}\r\n"],"mappings":"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","names":[]}

package/dist/chunk-U7YKCCJG.js

@@ -0,0 +1,228 @@
+import {
+  ctaLinkStyles,
+  paddingScaleStyles
+} from "./chunk-3VE6VFJ4.js";
+import {
+  controlBaseStyles,
+  rootFontFamilyStyles
+} from "./chunk-RHAOQ6K4.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// src/hero/Hero.ts
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+var Hero = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.title = "";
+    this.subtitle = "";
+    this.imageSrc = "";
+    this.actionLabel = "";
+    this.href = "";
+    this.textAlignment = "left";
+    this.padding = "none";
+    this.inverted = false;
+    this.focalPoint = "center";
+    this.onClick = (event) => {
+      const action = new CustomEvent("action", {
+        detail: { href: this.href },
+        bubbles: true,
+        composed: true,
+        cancelable: true
+      });
+      this.dispatchEvent(action);
+      if (action.defaultPrevented) event.preventDefault();
+    };
+  }
+  willUpdate() {
+    this.style.backgroundImage = this.imageSrc ? `url(${JSON.stringify(this.imageSrc)})` : "";
+    this.style.setProperty("--st-hero-position", Hero.positions[this.focalPoint] ?? Hero.positions.center);
+  }
+  render() {
+    return html`
+      <div class="overlay" part="overlay"></div>
+      <div class="content" part="content">
+        <h1 class="title" part="title">${this.title}</h1>
+        ${this.subtitle ? html`<p class="subtitle" part="subtitle">${this.subtitle}</p>` : nothing}
+        ${this.actionLabel ? html`<div class="actions" part="actions">
+              <a class="cta" part="action" href=${this.href || nothing} @click=${this.onClick}>${this.actionLabel}</a>
+            </div>` : nothing}
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+Hero.styles = css`
+    ${controlBaseStyles}
+    ${paddingScaleStyles}
+
+    @keyframes st-hero-zoom {
+      from { opacity: 0; transform: scale(1.1); }
+      to { opacity: 1; transform: scale(1); }
+    }
+    @keyframes st-hero-rise {
+      from { opacity: 0; transform: translateY(30px); }
+      to { opacity: 1; transform: none; }
+    }
+    @keyframes st-hero-fade {
+      from { opacity: 0; }
+      to { opacity: 1; }
+    }
+
+    :host {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      overflow: hidden;
+      width: 100%;
+      box-sizing: border-box;
+      background-color: var(--st-color-text-strong);
+      background-repeat: no-repeat;
+      background-size: cover;
+      background-position: var(--st-hero-position, center center);
+      color: var(--st-color-on-solid);
+      ${rootFontFamilyStyles}
+      animation: st-hero-zoom 1.5s ease-out;
+    }
+
+    :host([inverted]) {
+      background-color: var(--st-color-surface);
+      color: var(--st-color-text-strong);
+    }
+
+    .overlay {
+      position: absolute;
+      inset: 0;
+      z-index: 1;
+      background: linear-gradient(
+        to bottom,
+        color-mix(in oklch, var(--st-color-text-strong) 40%, transparent),
+        color-mix(in oklch, var(--st-color-text-strong) 20%, transparent),
+        color-mix(in oklch, var(--st-color-text-strong) 40%, transparent)
+      );
+    }
+
+    :host([inverted]) .overlay {
+      display: none;
+    }
+
+    .content {
+      display: flex;
+      flex-direction: column;
+      gap: var(--st-space-20);
+      position: relative;
+      z-index: 2;
+      width: 80%;
+      margin: 0 auto;
+      text-align: center;
+      align-items: center;
+      /* Set here, not only on :host: text sits on the image/overlay, so a colour class the page puts
+         on the host (e.g. a theme text colour) must not turn it dark. */
+      color: var(--st-hero-text-color, var(--st-color-on-solid));
+    }
+
+    :host([inverted]) .content {
+      color: var(--st-hero-text-color, var(--st-color-text-strong));
+    }
+
+    :host([text-alignment='left']) .content { text-align: left; align-items: flex-start; }
+    :host([text-alignment='right']) .content { text-align: right; align-items: flex-end; }
+    :host([text-alignment='justify']) .content { text-align: justify; align-items: stretch; }
+
+    .title {
+      font-size: var(--st-cms-text-display);
+      font-weight: var(--st-font-weight-bold);
+      line-height: 1.1;
+      color: inherit;
+      margin: 0;
+      animation: st-hero-rise 0.8s 0.3s ease-out backwards;
+    }
+
+    .subtitle {
+      font-size: var(--st-cms-text-xl);
+      line-height: 1.5;
+      color: inherit;
+      margin: 0;
+      animation: st-hero-fade 0.8s 0.5s ease-out backwards;
+    }
+
+    .actions {
+      display: flex;
+      justify-content: center;
+      width: 100%;
+    }
+
+    .cta {
+      ${ctaLinkStyles}
+      background: var(--st-button-primary-bg);
+      color: var(--st-button-primary-color);
+      font-weight: var(--st-button-font-weight);
+      font-size: var(--st-text-md);
+      animation: st-hero-rise 0.6s 0.7s ease-out backwards;
+    }
+
+    .cta:hover {
+      transform: scale(1.05);
+    }
+
+    .cta:active {
+      transform: scale(0.98);
+    }
+
+    @media (min-width: 768px) {
+      .content { padding: var(--st-space-32); }
+    }
+    @media (min-width: 1024px) {
+      .content { padding: var(--st-space-48); }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      :host, .title, .subtitle, .cta { animation: none; }
+      .cta { transition: none; }
+    }
+  `;
+Hero.positions = {
+  top: "center top",
+  left: "left center",
+  right: "right center",
+  bottom: "center bottom",
+  center: "center center"
+};
+__decorateClass([
+  property({ type: String })
+], Hero.prototype, "title", 2);
+__decorateClass([
+  property({ type: String })
+], Hero.prototype, "subtitle", 2);
+__decorateClass([
+  property({ type: String, attribute: "image-src" })
+], Hero.prototype, "imageSrc", 2);
+__decorateClass([
+  property({ type: String, attribute: "action-label" })
+], Hero.prototype, "actionLabel", 2);
+__decorateClass([
+  property({ type: String })
+], Hero.prototype, "href", 2);
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "text-alignment" })
+], Hero.prototype, "textAlignment", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], Hero.prototype, "padding", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Hero.prototype, "inverted", 2);
+__decorateClass([
+  property({ type: String, attribute: "focal-point" })
+], Hero.prototype, "focalPoint", 2);
+Hero = __decorateClass([
+  customElement("st-hero")
+], Hero);
+
+export {
+  Hero
+};
+//# sourceMappingURL=chunk-U7YKCCJG.js.map