@ds-gn/ui 0.9.0 → 0.11.0

package/dist/components/Container/src/Container.js

@@ -91,6 +91,146 @@ class Base extends LitElement {
 }
 defineElement("dsgn-base", Base);
 
+// common/controllers/SectionEntranceController.ts
+import {
+  prefersReducedMotion,
+  splitText
+} from "@ds-gn/motion";
+import { MotionController } from "@ds-gn/motion/lit";
+var HEADING_STAGGER = 20;
+var HEADING_MAX_SPREAD = 500;
+var HEADING_RISE = 4;
+var MOTION_OVERLAP = 160;
+var holdHidden = (el) => el.style.setProperty("opacity", "0");
+var releaseHidden = (el) => el.style.removeProperty("opacity");
+var ENTRANCE_BLOCKS = new Set(["dsgn-heading-block", "dsgn-form-block"]);
+var hasContent = (el) => !["div", "span"].includes(el.localName) || el.children.length > 0 || (el.textContent ?? "").trim() !== "";
+var childrenIn = (parent, ...slots) => Array.from(parent.children).filter((child) => child instanceof HTMLElement && slots.includes(child.slot) && hasContent(child));
+function sectionEntranceParts(root) {
+  const parts = [];
+  const fade = (els) => {
+    if (els.length > 0)
+      parts.push({ kind: "fade", els });
+  };
+  Array.from(root.querySelectorAll("*")).filter((el) => ENTRANCE_BLOCKS.has(el.localName)).forEach((block) => {
+    if (block.localName === "dsgn-form-block") {
+      fade(childrenIn(block, "input", "button"));
+      fade(childrenIn(block, "note"));
+      return;
+    }
+    fade(childrenIn(block, "eyebrow"));
+    const [heading] = childrenIn(block, "heading");
+    if (heading)
+      parts.push({ kind: "letters", el: heading });
+    fade(childrenIn(block, "description"));
+    fade(childrenIn(block, "action-primary", "action-secondary"));
+  });
+  return parts;
+}
+var elementsOf = (part) => part.kind === "fade" ? part.els : [part.el];
+
+class SectionEntranceController {
+  constructor(host, enabled) {
+    this.parts = [];
+    this.host = host;
+    this.enabled = enabled;
+    this.motion = new MotionController(host);
+    host.addController(this);
+  }
+  hostUpdated() {
+    if (this.observer || this.state !== undefined || !this.enabled())
+      return;
+    if (typeof IntersectionObserver === "undefined") {
+      this.state = "static";
+      return;
+    }
+    this.observer = new IntersectionObserver((entries) => {
+      const entry = entries[entries.length - 1];
+      if (entry)
+        this.report(entry.isIntersecting);
+    });
+    this.observer.observe(this.host);
+  }
+  hostDisconnected() {
+    this.stopObserving();
+    if (this.state === "held") {
+      this.parts.flatMap(elementsOf).forEach(releaseHidden);
+      this.state = undefined;
+    }
+  }
+  report(inView) {
+    if (this.state === undefined) {
+      const play = !inView && !prefersReducedMotion();
+      this.state = play ? "held" : "static";
+      if (!play)
+        return this.stopObserving();
+      this.parts = sectionEntranceParts(this.host);
+      this.parts.flatMap(elementsOf).forEach(holdHidden);
+    }
+    if (this.state === "held" && inView) {
+      this.state = "played";
+      this.stopObserving();
+      this.play();
+    }
+  }
+  play() {
+    this.parts.flatMap(elementsOf).forEach(releaseHidden);
+    const splits = [];
+    const steps = this.parts.map((part, index) => {
+      const overlap = index === 0 ? undefined : MOTION_OVERLAP;
+      if (part.kind === "fade") {
+        return { targets: part.els, preset: "fade", stagger: 0, overlap };
+      }
+      const split = splitText(part.el);
+      splits.push(split);
+      return {
+        targets: split.chars,
+        preset: "fade",
+        y: HEADING_RISE,
+        stagger: HEADING_STAGGER,
+        maxDuration: HEADING_MAX_SPREAD
+      };
+    });
+    if (steps.length === 0)
+      return;
+    this.motion.timeline(steps).finished.then(() => splits.forEach((split) => split.revert()));
+  }
+  stopObserving() {
+    this.observer?.disconnect();
+    this.observer = undefined;
+  }
+}
+
+// common/helpers/enum-validator.ts
+var enumValidator = (propName, enumSet, candidateValue) => {
+  if (!enumSet.has(candidateValue)) {
+    throw new Error(`Invalid prop ${propName} of value ${candidateValue}. Expected one of: ${Array.from(enumSet).join(", ")}`);
+  }
+};
+
+// common/helpers/enum-creator.ts
+var enumCreator = (acceptableValues, propName, type, other = {}) => {
+  const acceptableValuesSet = new Set(acceptableValues);
+  return {
+    type,
+    hasChanged(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        enumValidator(propName, acceptableValuesSet, newValue);
+        return true;
+      }
+      return false;
+    },
+    ...other
+  };
+};
+
+// common/props/motion/motion.props.ts
+var motionValues = {
+  ON: "on",
+  OFF: "off"
+};
+var motionProps = enumCreator(Object.values(motionValues), "motion", String, { reflect: true });
+
 // components/Container/src/Container.css
 import { css as css2 } from "lit";
 var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
@@ -138,6 +278,9 @@ var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.co
   .mx-auto {
     margin-inline: auto;
   }
+  .block {
+    display: block;
+  }
   .w-full {
     width: 100%;
   }
@@ -229,29 +372,6 @@ var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.co
 `;
 var Container_default = styles2;
 
-// common/helpers/enum-validator.ts
-var enumValidator = (propName, enumSet, candidateValue) => {
-  if (!enumSet.has(candidateValue)) {
-    throw new Error(`Invalid prop ${propName} of value ${candidateValue}. Expected one of: ${Array.from(enumSet).join(", ")}`);
-  }
-};
-
-// common/helpers/enum-creator.ts
-var enumCreator = (acceptableValues, propName, type, other = {}) => {
-  const acceptableValuesSet = new Set(acceptableValues);
-  return {
-    type,
-    hasChanged(newValue, oldValue) {
-      if (newValue !== oldValue) {
-        enumValidator(propName, acceptableValuesSet, newValue);
-        return true;
-      }
-      return false;
-    },
-    ...other
-  };
-};
-
 // components/Container/src/Container.props.ts
 var containerSizeValues = {
   SM: "sm",
@@ -341,6 +461,8 @@ class Container extends Base {
     super(...arguments);
     this.size = containerSizeValues.LG;
     this.section = false;
+    this.motion = motionValues.OFF;
+    this._entrance = new SectionEntranceController(this, () => this.motion === motionValues.ON);
   }
   static styles = [Base.styles, Container_default];
   render() {
@@ -366,6 +488,9 @@ __legacyDecorateClassTS([
 __legacyDecorateClassTS([
   property({ ...paddingBottomProps })
 ], Container.prototype, "paddingBottom", undefined);
+__legacyDecorateClassTS([
+  property({ ...motionProps })
+], Container.prototype, "motion", undefined);
 defineElement("dsgn-container", Container);
 export {
   Container

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

@@ -0,0 +1,150 @@
+import '../../../types/global.d.ts';
+import { type CSSResultGroup } from 'lit';
+import { Base } from '../../../common/Base/Base.js';
+import { type SurfaceType } from '../../../common/props/surface/surface.props.js';
+import { type DropdownMenuAlignType, type DropdownMenuEntry, type DropdownMenuSizeType } from './DropdownMenu.props.js';
+type FocusTarget = 'first' | 'last';
+/**
+ * A menu of actions opened from a trigger button, following the WAI-ARIA APG
+ * menu button: the trigger gets `aria-haspopup="menu"` and `aria-expanded`,
+ * and while the `role="menu"` is open DOM focus moves between its
+ * `role="menuitem"` rows (roving focus), unlike `dsgn-select`, where focus
+ * stays on the trigger. Not a form control: activating an item fires
+ * `dsgn-select` and closes the menu.
+ *
+ * **Keyboard.** On the trigger, Enter, Space and ↓ open the menu on the first
+ * item and ↑ on the last. In the menu, ↑ ↓ move with wrap-around, Home/End
+ * jump, typing a letter moves to the next item starting with it, Enter and
+ * Space activate, Escape closes and returns focus to the trigger, and Tab
+ * closes and lets focus move on. Disabled items can be focused but not
+ * activated. Hovering an item focuses it, so hover and keyboard highlight are
+ * the same.
+ *
+ * **Pointer.** Clicking the trigger opens the menu on its first item, and
+ * clicking it again closes it. A press outside closes the menu without moving
+ * focus. Only one menu is open at a time on the page.
+ *
+ * **Position.** The menu hangs below the trigger, lined up with its start
+ * edge or, with `align="end"`, its end edge (for "⋯" triggers at the end of a
+ * row). It flips above when there isn't room below and shifts to keep a 16px
+ * viewport gutter. It opens in the top layer (`popover="manual"`), so an
+ * ancestor's `overflow` or stacking context cannot clip or cover it.
+ *
+ * **Naming.** The trigger is in light DOM and the menu in this shadow root,
+ * so `aria-controls` and `aria-labelledby` cannot point from one to the other.
+ * `aria-controls` is omitted (it is optional in the APG pattern); the menu is
+ * named from `label`, else from the trigger's `aria-label` or text. An
+ * icon-only trigger needs an `aria-label` naming its object, e.g. "Actions
+ * for Priya Natarajan".
+ *
+ * @slot trigger - The button that opens the menu, usually a `dsgn-button`.
+ *
+ * @fires dsgn-select - Fired when an enabled item is activated, before the menu closes; `detail` is `{ value }`. React: `onDsgnSelect`.
+ *
+ * @csspart menu - The floating `role="menu"` panel.
+ * @csspart item - Each `role="menuitem"` row.
+ * @csspart item-icon - An item's leading icon.
+ * @csspart item-shortcut - An item's trailing shortcut hint.
+ * @csspart separator - A divider between groups of items.
+ */
+export declare class DropdownMenu extends Base {
+    static styles: CSSResultGroup;
+    surface: SurfaceType;
+    /**
+     * Item size on the shared `size` scale. On a coarse pointer (touch) items
+     * are always `lg`, the 44px touch target.
+     */
+    size: DropdownMenuSizeType;
+    /**
+     * The items and separators, in order. Set as a property, or as a JSON
+     * attribute in plain HTML.
+     */
+    items: DropdownMenuEntry[];
+    /**
+     * Which trigger edge the menu lines up with: `start` for text triggers,
+     * `end` for icon-only triggers at the end of a row.
+     */
+    align: DropdownMenuAlignType;
+    /** Whether the menu is open. Opening it moves focus to the first item. */
+    open: boolean;
+    /**
+     * Accessible name for the menu. Defaults to the trigger's `aria-label`, or
+     * its text.
+     */
+    label: string;
+    /** Whether the menu is displayed — stays true through the exit animation. */
+    private _visible;
+    private _placement;
+    /** Index of the focused item among `items`, or -1. */
+    private _activeIndex;
+    private _coarse;
+    /** The trigger's name, captured on open (see `label`). */
+    private _triggerName;
+    private _menu;
+    private _trigger;
+    /** Where focus goes once the menu has rendered open. */
+    private _focusOnOpen;
+    /** Whether closing should return focus to the trigger. */
+    private _returnFocus;
+    private readonly _motion;
+    private _exitRun;
+    private readonly _topLayer;
+    private _inTopLayer;
+    private _menuScrollTop;
+    private _coarseQuery?;
+    private readonly _position;
+    private readonly _dismiss;
+    private readonly _roving;
+    private get _effectiveSize();
+    private _itemElements;
+    private _entryAt;
+    /** Open the menu and focus its first (or last) item. */
+    show(focus?: FocusTarget): void;
+    /** Close the menu without moving focus. */
+    hide(): void;
+    private _close;
+    private _activate;
+    /**
+     * Pick up the slotted trigger. Runs on `slotchange` and after the first
+     * render, since an element slotted before upgrade may not fire one.
+     */
+    private _resolveTrigger;
+    private _readTriggerName;
+    /**
+     * Write the popup state on the trigger. A Lit trigger that declares the
+     * properties (`dsgn-button`) forwards them to its inner control; anything
+     * else, such as a native `<button>`, takes them as attributes.
+     */
+    private _syncTrigger;
+    /** Whether an event came from (or through) the trigger. */
+    private _fromTrigger;
+    private _triggerUnavailable;
+    private _handleTriggerClick;
+    private _handleTriggerKeydown;
+    /** Firefox activates a button on Space keyup; the keydown already acted. */
+    private _handleTriggerKeyup;
+    private _handleMenuKeydown;
+    private _handleItemPointerMove;
+    private _handleItemClick;
+    /** Focus leaving the component altogether — not to the trigger — closes. */
+    private _handleFocusOut;
+    private _handleCoarseChange;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    willUpdate(changedProperties: Map<string | number | symbol, unknown>): void;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    private _showMenu;
+    private _hideMenu;
+    private _handleOpenChange;
+    private _exit;
+    private _renderIcon;
+    private _renderEntry;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'dsgn-dropdown-menu': DropdownMenu;
+    }
+}
+export {};