@ds-gn/ui 0.0.0-stage → 0.5.0

package/dist/components/Nav/src/Nav.props.d.ts

@@ -0,0 +1,8 @@
+export declare const navStickyValues: {
+    readonly TRUE: true;
+    readonly FALSE: false;
+};
+export declare const navTransparentValues: {
+    readonly TRUE: true;
+    readonly FALSE: false;
+};

package/dist/components/Nav/src/Nav.props.js

@@ -0,0 +1,13 @@
+// components/Nav/src/Nav.props.ts
+var navStickyValues = {
+  TRUE: true,
+  FALSE: false
+};
+var navTransparentValues = {
+  TRUE: true,
+  FALSE: false
+};
+export {
+  navStickyValues,
+  navTransparentValues
+};

package/dist/components/Nav/src/Nav.styles.d.ts

@@ -0,0 +1,10 @@
+export declare const classNames: (transparent: boolean) => string;
+export declare const stickyHostClasses: string[];
+export declare const innerClasses: () => string;
+export declare const logoClasses: () => string;
+export declare const rightClasses: (menuOpen: boolean) => string;
+export declare const linksClasses: () => string;
+export declare const actionsClasses: () => string;
+export declare const menuButtonClasses: () => string;
+export declare const linksSlotClasses: () => string;
+export declare const actionsSlotClasses: () => string;

package/dist/components/NavDropdownColumn/src/NavDropdownColumn.d.ts

@@ -0,0 +1,17 @@
+import '../../../types/global.d.ts';
+import { type CSSResultGroup } from 'lit';
+import { Base } from '../../../common/Base/Base.js';
+/**
+ * An ordered vertical group of links within a NavLink dropdown.
+ *
+ * @slot - Column links.
+ */
+export declare class NavDropdownColumn extends Base {
+    static styles: CSSResultGroup;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'dsgn-nav-dropdown-column': NavDropdownColumn;
+    }
+}

package/dist/components/NavDropdownColumn/src/NavDropdownColumn.js

@@ -0,0 +1,170 @@
+// components/NavDropdownColumn/src/NavDropdownColumn.ts
+import { html as html2 } from "lit";
+
+// common/Base/Base.ts
+import { html, LitElement } from "lit";
+
+// common/helpers/define-element.ts
+var defineElement = (tag, ctor) => {
+  if (typeof customElements === "undefined")
+    return;
+  if (!customElements.get(tag))
+    customElements.define(tag, ctor);
+};
+
+// common/Base/Base.css
+import { css } from "lit";
+var styles = css`/* Base reset in @layer base ensures it comes before utilities in Tailwind v4 cascade
+   This prevents the reset from overriding component utility classes */
+@layer base {
+  :host {
+    display: block;
+    box-sizing: border-box;
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    font-family: var(
+      --default-font-family,
+      var(--font-sans, ui-sans-serif, system-ui, sans-serif)
+    );
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: inherit;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+  }
+
+  :host h1,
+  :host h2,
+  :host h3,
+  :host h4,
+  :host h5,
+  :host h6 {
+    font-size: inherit;
+    font-weight: inherit;
+    margin: 0;
+    padding: 0;
+  }
+}
+`;
+var Base_default = styles;
+
+// common/Base/Base.ts
+class Base extends LitElement {
+  static styles = Base_default;
+  updateTheme(changedProperties, surface) {
+    if (changedProperties.has("surface")) {
+      if (surface) {
+        this.setAttribute("data-theme", surface);
+      } else {
+        this.removeAttribute("data-theme");
+      }
+    }
+  }
+  emit(name, detail, options = {}) {
+    return this.dispatchEvent(new CustomEvent(name, {
+      detail,
+      bubbles: true,
+      composed: true,
+      cancelable: options.cancelable ?? false
+    }));
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+defineElement("dsgn-base", Base);
+
+// components/NavDropdownColumn/src/NavDropdownColumn.css
+import { css as css2 } from "lit";
+var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
+@layer properties;
+@layer theme {
+  :root, :host {
+    --spacing: 0.25rem;
+  }
+}
+@layer utilities {
+  .static {
+    position: static;
+  }
+  .flex {
+    display: flex;
+  }
+  .w-full {
+    width: 100%;
+  }
+  .min-w-0 {
+    min-width: calc(var(--spacing) * 0);
+  }
+  .flex-col {
+    flex-direction: column;
+  }
+  .items-stretch {
+    align-items: stretch;
+  }
+  .gap-1 {
+    gap: calc(var(--spacing) * 1);
+  }
+  .px-2\\.5 {
+    padding-inline: calc(var(--spacing) * 2.5);
+  }
+  .py-1 {
+    padding-block: calc(var(--spacing) * 1);
+  }
+}
+@property --dsgn-border-sweep-angle {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --dsgn-border-sweep-angle: 0deg;
+    }
+  }
+}
+`;
+var NavDropdownColumn_default = styles2;
+
+// ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if (typeof e == "string" || typeof e == "number")
+    n += e;
+  else if (typeof e == "object")
+    if (Array.isArray(e)) {
+      var o = e.length;
+      for (t = 0;t < o; t++)
+        e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+    } else
+      for (f in e)
+        e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length;f < o; f++)
+    (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+var clsx_default = clsx;
+
+// components/NavDropdownColumn/src/NavDropdownColumn.styles.ts
+var classNames = () => clsx_default("flex", "min-w-0", "w-full", "flex-col", "items-stretch", "gap-1", "px-2.5", "py-1");
+
+// components/NavDropdownColumn/src/NavDropdownColumn.ts
+class NavDropdownColumn extends Base {
+  static styles = [Base.styles, NavDropdownColumn_default];
+  render() {
+    return html2`<div class="${classNames()}"><slot></slot></div>`;
+  }
+}
+defineElement("dsgn-nav-dropdown-column", NavDropdownColumn);
+export {
+  NavDropdownColumn
+};

package/dist/components/NavDropdownColumn/src/NavDropdownColumn.styles.d.ts

@@ -0,0 +1 @@
+export declare const classNames: () => string;

package/dist/components/NavLink/src/NavLink.d.ts

@@ -0,0 +1,191 @@
+import '../../../types/global.d.ts';
+import '../../Icon/src/Icon.js';
+import '../../NavDropdownColumn/src/NavDropdownColumn.js';
+import { Base } from '../../../common/Base/Base.js';
+import { type SurfaceType } from '../../../common/props/surface/surface.props.js';
+import { type CSSResultGroup } from 'lit';
+import { type NavLinkDropdownColumnsType, type NavLinkSecondaryHoverType, type NavLinkTargetType, type NavLinkVariantType } from './NavLink.props.js';
+/**
+ * @fires dsgn-nav-link-toggle - Fired when the dropdown is toggled; `detail` is
+ * `{ open }`. The parent `dsgn-nav` listens for this to close sibling dropdowns.
+ * @slot - Link label.
+ * @slot dropdown - Dropdown content.
+ */
+export declare class NavLink extends Base {
+    static styles: CSSResultGroup;
+    /**
+     * Surface theme variant (light or dark). Defaults to `dark` — the nav this
+     * link lives in is dark by default.
+     */
+    surface: SurfaceType;
+    /**
+     * Visual variant: a quiet wayfinding `link` (default), the primary pill CTA
+     * (`action`, transparent fill), or the secondary pill CTA
+     * (`action-secondary`, filled surface). The two CTA variants are designed to
+     * sit side by side in the nav's `actions` slot.
+     */
+    variant: NavLinkVariantType;
+    /**
+     * Hover treatment for the `action-secondary` CTA. Ignored by every other
+     * variant. All four share one rest state and differ only on hover: a soft
+     * accent `ring`, a one-pass border `shimmer`, a directional `nudge` of the
+     * label and a trailing arrow, or a `deepen` of the fill.
+     */
+    secondaryHover: NavLinkSecondaryHoverType;
+    /**
+     * Destination URL for the link
+     */
+    href: string;
+    /**
+     * Target for the link
+     */
+    target: NavLinkTargetType;
+    /**
+     * Relationship between the current page and the linked page.
+     * Defaults to a safe value for links opened in a new tab.
+     */
+    rel: string;
+    /**
+     * Optional supporting copy shown beneath the link label.
+     */
+    subheading: string;
+    /**
+     * Accessible name for the disclosure trigger, used when no text is slotted
+     * into the link. Supplied by the CMS via the marketing template.
+     */
+    submenuLabel: string;
+    /**
+     * Label for the panel's link back to this link's own destination, shown when
+     * the dropdown does not already contain a link to it. Supplied by the CMS.
+     */
+    overviewLabel: string;
+    /**
+     * Number of explicitly slotted desktop dropdown column groups. Mobile always
+     * stacks those groups into one column.
+     */
+    dropdownColumns: NavLinkDropdownColumnsType;
+    /**
+     * Whether the dropdown is currently expanded. Reflected only while open.
+     */
+    expanded: boolean;
+    private hasDropdown;
+    /**
+     * Set when the panel was opened deliberately (a click on the disclosure)
+     * rather than by hovering. A pinned panel ignores pointer-leave, so it stays
+     * put until it is dismissed — by clicking again, Escape, a click outside, or
+     * another dropdown opening.
+     */
+    private pinned;
+    /**
+     * Set when the desktop dropdown is dismissed with Escape. Suppresses the
+     * focus-to-open behaviour while the trigger keeps focus, so the panel doesn't
+     * spring back open; cleared once focus leaves or the pointer re-enters.
+     */
+    private keyboardDismissed;
+    private readonly dropdownId;
+    /**
+     * Tracks the viewport so hover-to-open stays desktop-only. Below `sm` the
+     * layout swaps the desktop trigger for the mobile disclosure button, and touch
+     * taps synthesize `mouseenter` before `click` — ungated, the two fight each
+     * other and the tap opens then immediately re-closes the dropdown.
+     */
+    private breakpointController;
+    /**
+     * The shift is measured against the viewport, so a change in the room around
+     * the trigger invalidates it: an open panel would otherwise keep the offset
+     * the old width earned it and hang off whichever edge the new width put it
+     * over. Only subscribed while a panel is open. See the controller for the
+     * layout changes this does and does not see.
+     */
+    private layoutChangeController;
+    connectedCallback(): void;
+    /**
+     * Resolve the `rel` attribute. For `target="_blank"` links, always include
+     * `noopener`/`noreferrer` (merged with any author-provided tokens) so a
+     * new-tab nav link never exposes `window.opener`.
+     */
+    private get computedRel();
+    disconnectedCallback(): void;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    private updateDropdownState;
+    private handleDropdownSlotChange;
+    private handleLabelSlotChange;
+    private get labelText();
+    private get hasDropdownDestination();
+    private get isDropdownItem();
+    private get shouldRenderOverview();
+    /**
+     * Toggles the *pin*, not the open state, so the first click always means
+     * "keep this open". A panel the pointer already opened would otherwise close
+     * on the click that was meant to hold it, then stay shut until the pointer
+     * left and came back.
+     */
+    /**
+     * The single place the panel opens or closes, so every path tells the nav
+     * about it. That matters for the hover and focus paths in particular: the nav
+     * closes siblings only on this event, and a sibling a click has pinned
+     * ignores pointer and focus leave, so without it two panels sit open at once.
+     */
+    private setExpanded;
+    private toggleDropdown;
+    private handleDocumentPointerDown;
+    private clearDropdownAlignment;
+    /**
+     * Width the dropdown panel renders at. A closed panel is `display: none`, so
+     * lay it out just long enough to read it — the browser cannot paint between
+     * the two writes below, so nothing flashes.
+     */
+    private measureDropdownWidth;
+    /**
+     * Horizontal shift for the panel, measured from the left-aligned position
+     * under its trigger. Hanging right of the trigger is the default; if that
+     * would spill past the viewport, the panel flips to hang left instead, with
+     * its right edge on the trigger's. Only when *that* would leave the viewport
+     * too — a panel wider than the room on either side of its trigger — does it
+     * give up the anchor and sit on the gutter, where its fluid width has already
+     * shrunk it to fit.
+     */
+    private dropdownShift;
+    /**
+     * Panels are positioned against their own trigger and the viewport, not
+     * against the nav, so every column count uses the same rule.
+     */
+    private updateDropdownAlignment;
+    /**
+     * Hover-to-open applies only where the desktop trigger is rendered (>= sm)
+     * and only on a device that really hovers.
+     */
+    private get hoverOpensDropdown();
+    private handlePointerEnter;
+    private handlePointerLeave;
+    private handleFocusIn;
+    private handleFocusOut;
+    private handleKeydown;
+    /**
+     * Collapse the mobile dropdown. Used by the containing nav when another
+     * disclosure opens or when the mobile menu closes.
+     */
+    closeDropdown(): void;
+    /**
+     * Whether this is the secondary CTA using the `nudge` hover treatment, which
+     * is the only one that needs extra markup: the label has to be a box that can
+     * be translated, and it gains a trailing arrow to move against.
+     */
+    private get isNudgingSecondary();
+    /** The label and any supporting copy, shared by both trigger shapes. */
+    private renderLabel;
+    /**
+     * A link that owns a dropdown is a disclosure button, not a link: activating
+     * it opens the panel rather than navigating, and announcing it as a link
+     * would promise a navigation that never happens. Its own destination stays
+     * reachable through the panel's overview link.
+     */
+    private renderDisclosureTrigger;
+    private renderLinkTrigger;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'dsgn-nav-link': NavLink;
+    }
+}