@ds-gn/ui 0.0.0-stage → 0.5.0

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

@@ -0,0 +1,38 @@
+export declare const navLinkDropdownColumnValues: {
+    readonly ONE: "1";
+    readonly TWO: "2";
+    readonly THREE: "3";
+};
+export type NavLinkDropdownColumnsType = (typeof navLinkDropdownColumnValues)[keyof typeof navLinkDropdownColumnValues];
+export declare const navLinkDropdownColumnsProps: import("lit").PropertyDeclaration<unknown, unknown>;
+export declare const navLinkVariantValues: {
+    /** Quiet wayfinding link — tertiary text, brightens to orange on hover. */
+    readonly LINK: "link";
+    /** Primary CTA — outlined pill on a transparent fill, accent glow on hover. */
+    readonly ACTION: "action";
+    /**
+     * Secondary CTA — the same pill on a filled surface. Pairs with `action` when
+     * the nav carries two calls to action.
+     */
+    readonly ACTION_SECONDARY: "action-secondary";
+};
+export type NavLinkVariantType = (typeof navLinkVariantValues)[keyof typeof navLinkVariantValues];
+export declare const navLinkVariantProps: import("lit").PropertyDeclaration<unknown, unknown>;
+export declare const navLinkSecondaryHoverValues: {
+    /** A 3px accent halo plus a 1px top inner highlight — lit from above. */
+    readonly RING: "ring";
+    /** A single bright pass sweeping around the border. */
+    readonly SHIMMER: "shimmer";
+    /** Label shifts left as a trailing arrow slides right and brightens. */
+    readonly NUDGE: "nudge";
+    /** Fill darkens behind an inset shadow — pressed in rather than lit. */
+    readonly DEEPEN: "deepen";
+};
+export type NavLinkSecondaryHoverType = (typeof navLinkSecondaryHoverValues)[keyof typeof navLinkSecondaryHoverValues];
+export declare const navLinkSecondaryHoverProps: import("lit").PropertyDeclaration<unknown, unknown>;
+export declare const navLinkTargetValues: {
+    readonly SELF: "_self";
+    readonly BLANK: "_blank";
+};
+export type NavLinkTargetType = (typeof navLinkTargetValues)[keyof typeof navLinkTargetValues];
+export declare const navLinkTargetProps: import("lit").PropertyDeclaration<unknown, unknown>;

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

@@ -0,0 +1,58 @@
+// 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/NavLink/src/NavLink.props.ts
+var navLinkDropdownColumnValues = {
+  ONE: "1",
+  TWO: "2",
+  THREE: "3"
+};
+var navLinkDropdownColumnsProps = enumCreator(Object.values(navLinkDropdownColumnValues), "dropdown-columns", String, { attribute: "dropdown-columns", reflect: true });
+var navLinkVariantValues = {
+  LINK: "link",
+  ACTION: "action",
+  ACTION_SECONDARY: "action-secondary"
+};
+var navLinkVariantProps = enumCreator(Object.values(navLinkVariantValues), "variant", String, { reflect: true });
+var navLinkSecondaryHoverValues = {
+  RING: "ring",
+  SHIMMER: "shimmer",
+  NUDGE: "nudge",
+  DEEPEN: "deepen"
+};
+var navLinkSecondaryHoverProps = enumCreator(Object.values(navLinkSecondaryHoverValues), "secondary-hover", String, { attribute: "secondary-hover", reflect: true });
+var navLinkTargetValues = {
+  SELF: "_self",
+  BLANK: "_blank"
+};
+var navLinkTargetProps = enumCreator(Object.values(navLinkTargetValues), "target", String, { reflect: true });
+export {
+  navLinkDropdownColumnValues,
+  navLinkDropdownColumnsProps,
+  navLinkSecondaryHoverProps,
+  navLinkSecondaryHoverValues,
+  navLinkTargetProps,
+  navLinkTargetValues,
+  navLinkVariantProps,
+  navLinkVariantValues
+};

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

@@ -0,0 +1,22 @@
+import { type SurfaceType } from '../../../common/props/surface/surface.props.js';
+import { type NavLinkDropdownColumnsType, type NavLinkSecondaryHoverType, type NavLinkVariantType } from './NavLink.props.js';
+export declare const nudgeLabelClasses: () => string;
+export declare const nudgeArrowClasses: () => string;
+export declare const classNames: (variant: NavLinkVariantType, surface: SurfaceType, isDropdownItem?: boolean, secondaryHover?: NavLinkSecondaryHoverType) => string;
+export declare const wrapperClasses: () => string;
+/**
+ * The trigger for a link that owns a dropdown. It is one control at every
+ * breakpoint — an inline pill on desktop, a full-width disclosure row in the
+ * mobile drawer — so the label and its caret are a single target, a single tab
+ * stop, and share one hover glow. The caret inside it is decorative; this
+ * button is what carries the expanded state.
+ */
+export declare const disclosureTriggerClasses: (surface: SurfaceType, open: boolean) => string;
+export declare const disclosureIconClasses: (open: boolean) => string;
+export declare const linkContentClasses: (hasSubheading: boolean, surface: SurfaceType, isDropdownItem?: boolean) => string;
+export declare const linkSubheadingClasses: () => string;
+export declare const dropdownClasses: (open: boolean, columns: NavLinkDropdownColumnsType) => string;
+export declare const dropdownClipClasses: () => string;
+export declare const dropdownPanelClasses: () => string;
+export declare const dropdownSlotClasses: (columns: NavLinkDropdownColumnsType) => string;
+export declare const overviewClasses: () => string;

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

@@ -0,0 +1,30 @@
+import '../../../types/global.d.ts';
+import { type CSSResultGroup } from 'lit';
+import { Base } from '../../../common/Base/Base.js';
+import { type StackAlignType, type StackDirectionType, type StackGapType } from './Stack.props.js';
+/** @slot - Stack content. */
+export declare class Stack extends Base {
+    static styles: CSSResultGroup;
+    /**
+     * Stack direction — vertical (column) or horizontal (row)
+     */
+    direction: StackDirectionType;
+    /**
+     * Gap between items
+     */
+    gap: StackGapType;
+    /**
+     * Cross-axis alignment of items
+     */
+    align: StackAlignType;
+    /**
+     * Whether items should wrap when horizontal
+     */
+    wrap: boolean;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'dsgn-stack': Stack;
+    }
+}

package/dist/components/Stack/src/Stack.js

@@ -0,0 +1,300 @@
+var __legacyDecorateClassTS = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1;i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+
+// components/Stack/src/Stack.ts
+import { html as html2 } from "lit";
+import { property } from "lit/decorators.js";
+
+// 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/Stack/src/Stack.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;
+  }
+  .flex-col {
+    flex-direction: column;
+  }
+  .flex-row {
+    flex-direction: row;
+  }
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .items-end {
+    align-items: flex-end;
+  }
+  .items-start {
+    align-items: flex-start;
+  }
+  .items-stretch {
+    align-items: stretch;
+  }
+  .gap-0 {
+    gap: calc(var(--spacing) * 0);
+  }
+  .gap-2 {
+    gap: calc(var(--spacing) * 2);
+  }
+  .gap-3 {
+    gap: calc(var(--spacing) * 3);
+  }
+  .gap-4 {
+    gap: calc(var(--spacing) * 4);
+  }
+  .gap-6 {
+    gap: calc(var(--spacing) * 6);
+  }
+  .gap-8 {
+    gap: calc(var(--spacing) * 8);
+  }
+  .md\\:gap-6 {
+    @media (width >= 48rem) {
+      gap: calc(var(--spacing) * 6);
+    }
+  }
+  .md\\:gap-8 {
+    @media (width >= 48rem) {
+      gap: calc(var(--spacing) * 8);
+    }
+  }
+  .md\\:gap-12 {
+    @media (width >= 48rem) {
+      gap: calc(var(--spacing) * 12);
+    }
+  }
+}
+@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 Stack_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/Stack/src/Stack.props.ts
+var stackDirectionValues = {
+  VERTICAL: "vertical",
+  HORIZONTAL: "horizontal"
+};
+var stackDirectionProps = enumCreator(Object.values(stackDirectionValues), "direction", String, { reflect: true });
+var stackGapValues = {
+  NONE: "none",
+  XS: "xs",
+  SM: "sm",
+  MD: "md",
+  LG: "lg",
+  XL: "xl"
+};
+var stackGapProps = enumCreator(Object.values(stackGapValues), "gap", String, { reflect: true });
+var stackAlignValues = {
+  START: "start",
+  CENTER: "center",
+  END: "end",
+  STRETCH: "stretch"
+};
+var stackAlignProps = enumCreator(Object.values(stackAlignValues), "align", String, { reflect: true });
+
+// ../../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/Stack/src/Stack.styles.ts
+var gapClasses = {
+  none: ["gap-0"],
+  xs: ["gap-2"],
+  sm: ["gap-3"],
+  md: ["gap-4", "md:gap-6"],
+  lg: ["gap-6", "md:gap-8"],
+  xl: ["gap-8", "md:gap-12"]
+};
+var alignClasses = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch"
+};
+var classNames = (direction, gap, align, wrap) => {
+  return clsx_default("flex", direction === "vertical" ? "flex-col" : "flex-row", gapClasses[gap], alignClasses[align], wrap && "flex-wrap");
+};
+
+// components/Stack/src/Stack.ts
+class Stack extends Base {
+  constructor() {
+    super(...arguments);
+    this.direction = stackDirectionValues.VERTICAL;
+    this.gap = stackGapValues.MD;
+    this.align = stackAlignValues.STRETCH;
+    this.wrap = false;
+  }
+  static styles = [Base.styles, Stack_default];
+  render() {
+    return html2`<div
+      class="${classNames(this.direction, this.gap, this.align, this.wrap)}"
+    >
+      <slot></slot>
+    </div>`;
+  }
+}
+__legacyDecorateClassTS([
+  property({ ...stackDirectionProps })
+], Stack.prototype, "direction", undefined);
+__legacyDecorateClassTS([
+  property({ ...stackGapProps })
+], Stack.prototype, "gap", undefined);
+__legacyDecorateClassTS([
+  property({ ...stackAlignProps })
+], Stack.prototype, "align", undefined);
+__legacyDecorateClassTS([
+  property({ type: Boolean, reflect: true })
+], Stack.prototype, "wrap", undefined);
+defineElement("dsgn-stack", Stack);
+export {
+  Stack
+};

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

@@ -0,0 +1,24 @@
+export declare const stackDirectionValues: {
+    readonly VERTICAL: "vertical";
+    readonly HORIZONTAL: "horizontal";
+};
+export type StackDirectionType = (typeof stackDirectionValues)[keyof typeof stackDirectionValues];
+export declare const stackDirectionProps: import("lit").PropertyDeclaration<unknown, unknown>;
+export declare const stackGapValues: {
+    readonly NONE: "none";
+    readonly XS: "xs";
+    readonly SM: "sm";
+    readonly MD: "md";
+    readonly LG: "lg";
+    readonly XL: "xl";
+};
+export type StackGapType = (typeof stackGapValues)[keyof typeof stackGapValues];
+export declare const stackGapProps: import("lit").PropertyDeclaration<unknown, unknown>;
+export declare const stackAlignValues: {
+    readonly START: "start";
+    readonly CENTER: "center";
+    readonly END: "end";
+    readonly STRETCH: "stretch";
+};
+export type StackAlignType = (typeof stackAlignValues)[keyof typeof stackAlignValues];
+export declare const stackAlignProps: import("lit").PropertyDeclaration<unknown, unknown>;

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

@@ -0,0 +1,53 @@
+// 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/Stack/src/Stack.props.ts
+var stackDirectionValues = {
+  VERTICAL: "vertical",
+  HORIZONTAL: "horizontal"
+};
+var stackDirectionProps = enumCreator(Object.values(stackDirectionValues), "direction", String, { reflect: true });
+var stackGapValues = {
+  NONE: "none",
+  XS: "xs",
+  SM: "sm",
+  MD: "md",
+  LG: "lg",
+  XL: "xl"
+};
+var stackGapProps = enumCreator(Object.values(stackGapValues), "gap", String, { reflect: true });
+var stackAlignValues = {
+  START: "start",
+  CENTER: "center",
+  END: "end",
+  STRETCH: "stretch"
+};
+var stackAlignProps = enumCreator(Object.values(stackAlignValues), "align", String, { reflect: true });
+export {
+  stackAlignProps,
+  stackAlignValues,
+  stackDirectionProps,
+  stackDirectionValues,
+  stackGapProps,
+  stackGapValues
+};

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

@@ -0,0 +1,2 @@
+import type { StackAlignType, StackDirectionType, StackGapType } from './Stack.props.js';
+export declare const classNames: (direction: StackDirectionType, gap: StackGapType, align: StackAlignType, wrap: boolean) => string;

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

@@ -0,0 +1,32 @@
+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 TextColorType, type TextSizeType, type TextWeightType } from './Text.props.js';
+/** @slot - Text content. */
+export declare class Text extends Base {
+    static styles: CSSResultGroup;
+    /**
+     * Surface theme variant (light or dark)
+     */
+    surface: SurfaceType;
+    /**
+     * Text size scale
+     */
+    size: TextSizeType;
+    /**
+     * Font weight
+     */
+    weight: TextWeightType;
+    /**
+     * Semantic text color
+     */
+    color: TextColorType;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'dsgn-text': Text;
+    }
+}