@ds-gn/ui 0.0.0-stage → 0.5.0

package/dist/components/Modal/src/Modal.playground.d.ts

@@ -0,0 +1,2 @@
+import type { PlaygroundDefinition } from '../../../playground/types.js';
+export declare const playground: PlaygroundDefinition;

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

@@ -0,0 +1,66 @@
+/**
+ * Where the dialog sits in the viewport. `center` is a classic modal; the four
+ * edges are sheets/drawers that span that edge.
+ */
+export declare const modalPlacementValues: {
+    readonly CENTER: "center";
+    readonly LEFT: "left";
+    readonly RIGHT: "right";
+    readonly TOP: "top";
+    readonly BOTTOM: "bottom";
+};
+export type ModalPlacementType = (typeof modalPlacementValues)[keyof typeof modalPlacementValues];
+export declare const modalPlacementProps: import("lit").PropertyDeclaration<unknown, unknown>;
+/**
+ * Direction the dialog animates from, independent of where it comes to rest.
+ * `inherit` (the default) follows `placement`, which is what a sheet or a
+ * centered modal wants. Set it explicitly when the two need to differ — e.g. a
+ * bottom sheet on mobile that should fade rather than slide — and use `none`
+ * for an opacity-only transition with no spatial motion.
+ */
+export declare const modalMotionValues: {
+    readonly INHERIT: "inherit";
+    readonly NONE: "none";
+    readonly CENTER: "center";
+    readonly LEFT: "left";
+    readonly RIGHT: "right";
+    readonly TOP: "top";
+    readonly BOTTOM: "bottom";
+};
+export type ModalMotionType = (typeof modalMotionValues)[keyof typeof modalMotionValues];
+export declare const modalMotionProps: import("lit").PropertyDeclaration<unknown, unknown>;
+/**
+ * Size along the axis the placement grows on: width for `center`/`left`/`right`,
+ * height for `top`/`bottom`. `full` fills the viewport on both axes.
+ */
+export declare const modalSizeValues: {
+    readonly SM: "sm";
+    readonly MD: "md";
+    readonly LG: "lg";
+    readonly XL: "xl";
+    readonly FULL: "full";
+};
+export type ModalSizeType = (typeof modalSizeValues)[keyof typeof modalSizeValues];
+export declare const modalSizeProps: import("lit").PropertyDeclaration<unknown, unknown>;
+/**
+ * What asked the modal to close. Carried on `dsgn-modal-request-close` (where it
+ * can be vetoed) and on `dsgn-modal-close`.
+ */
+export declare const modalCloseReasonValues: {
+    /** `close()`/`requestClose()` called, or `open` set to false. */
+    readonly API: "api";
+    /** The Escape key / a platform close request. */
+    readonly ESCAPE: "escape";
+    /** A click that both started and ended on the backdrop. */
+    readonly BACKDROP: "backdrop";
+    /** A control slotted into `close`. */
+    readonly CLOSE_CONTROL: "close-control";
+};
+export type ModalCloseReasonType = (typeof modalCloseReasonValues)[keyof typeof modalCloseReasonValues];
+export interface ModalRequestCloseDetail {
+    reason: ModalCloseReasonType;
+}
+export interface ModalCloseDetail {
+    reason: ModalCloseReasonType;
+    returnValue: string;
+}

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

@@ -0,0 +1,65 @@
+// 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/Modal/src/Modal.props.ts
+var modalPlacementValues = {
+  CENTER: "center",
+  LEFT: "left",
+  RIGHT: "right",
+  TOP: "top",
+  BOTTOM: "bottom"
+};
+var modalPlacementProps = enumCreator(Object.values(modalPlacementValues), "placement", String, { reflect: true });
+var modalMotionValues = {
+  INHERIT: "inherit",
+  NONE: "none",
+  CENTER: "center",
+  LEFT: "left",
+  RIGHT: "right",
+  TOP: "top",
+  BOTTOM: "bottom"
+};
+var modalMotionProps = enumCreator(Object.values(modalMotionValues), "motion", String, { reflect: true });
+var modalSizeValues = {
+  SM: "sm",
+  MD: "md",
+  LG: "lg",
+  XL: "xl",
+  FULL: "full"
+};
+var modalSizeProps = enumCreator(Object.values(modalSizeValues), "size", String, { reflect: true });
+var modalCloseReasonValues = {
+  API: "api",
+  ESCAPE: "escape",
+  BACKDROP: "backdrop",
+  CLOSE_CONTROL: "close-control"
+};
+export {
+  modalCloseReasonValues,
+  modalMotionProps,
+  modalMotionValues,
+  modalPlacementProps,
+  modalPlacementValues,
+  modalSizeProps,
+  modalSizeValues
+};

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

@@ -0,0 +1,29 @@
+/**
+ * `:host` is the only rule with no utility equivalent — the host is the
+ * consumer's own `<dsgn-modal>` element, so there is no class we can put on it.
+ * Everything else, including `::backdrop`, the `[data-*]` state selectors and
+ * the enter/exit motion, is expressed as Tailwind utilities in
+ * `dialogClasses()` below.
+ */
+export declare const hostStyles: import("lit").CSSResult;
+/**
+ * Every style the `<dialog>` needs, as one static utility list.
+ *
+ * Nothing here is conditional: the dialog carries `data-placement`,
+ * `data-size`, `data-motion` and `data-state`, and the `data-[…]:` variants
+ * select which rules apply at runtime. That is also a requirement rather than a
+ * preference — Tailwind only generates classes it finds as *literal* strings in
+ * the source, so these cannot be composed or interpolated.
+ *
+ * Ordering note: `motion-reduce:` is emitted after the `data-motion` rules and
+ * matches their specificity, so it wins — the reduced-motion cross-fade
+ * overrides whichever spatial animation the placement selected.
+ */
+export declare const dialogClasses: () => string;
+export declare const panelClasses: () => string;
+export declare const headerClasses: (visible: boolean) => string;
+export declare const headingClasses: () => string;
+export declare const closeSlotClasses: () => string;
+export declare const descriptionClasses: (visible: boolean) => string;
+export declare const bodyClasses: () => string;
+export declare const footerClasses: (visible: boolean) => string;

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

@@ -0,0 +1,66 @@
+import '../../../types/global.d.ts';
+import '../../Container/src/Container.js';
+import '../../Icon/src/Icon.js';
+import '../../NavLink/src/NavLink.js';
+import { type CSSResultGroup } from 'lit';
+import { Base } from '../../../common/Base/Base.js';
+import { type SurfaceType } from '../../../common/props/surface/surface.props.js';
+/**
+ * @slot logo - Brand or logo content.
+ * @slot links - Primary navigation links.
+ * @slot actions - Navigation actions.
+ */
+export declare class Nav extends Base {
+    static styles: CSSResultGroup;
+    /**
+     * Surface theme variant (light or dark)
+     */
+    surface: SurfaceType;
+    /**
+     * Whether the nav sticks to the top of the viewport
+     */
+    sticky: boolean;
+    /**
+     * Whether the nav has a transparent background (for hero overlays)
+     */
+    transparent: boolean;
+    /**
+     * Accessible label for the mobile menu button when the menu is closed.
+     * Supplied by the CMS via the marketing template; the default is a
+     * Storybook/dev fallback only.
+     */
+    menuOpenLabel: string;
+    /**
+     * Accessible label for the mobile menu button when the menu is open.
+     * Supplied by the CMS via the marketing template; the default is a
+     * Storybook/dev fallback only.
+     */
+    menuCloseLabel: string;
+    private menuOpen;
+    private hasNavigationItems;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    private getNavigationLinks;
+    /**
+     * Any element assigned to the links/actions slots — regardless of tag. The
+     * mobile menu (toggle + panel) must appear for plain `<a slot="links">`
+     * consumers too, or their links would vanish below `sm`. Dropdown management
+     * is separately scoped to `dsgn-nav-link` via getNavigationLinks().
+     */
+    private hasSlottedNavigationItems;
+    private updateNavigationItems;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    private toggleMenu;
+    private closeMenu;
+    private closeDropdowns;
+    private handleDropdownToggle;
+    private handleKeydown;
+    private handleMenuClick;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'dsgn-nav': Nav;
+    }
+}