@ds-gn/ui 0.6.2 → 0.8.0

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

@@ -16,5 +16,23 @@ export declare const containerPaddingValues: {
     readonly XL: "xl";
 };
 export type ContainerPaddingType = (typeof containerPaddingValues)[keyof typeof containerPaddingValues];
+/**
+ * Gutter step override. Leave unset to follow the inherited `--dsgn-gutter`,
+ * which pages and brands set once for every component.
+ */
 export declare const containerPaddingXProps: import("lit").PropertyDeclaration<unknown, unknown>;
-export declare const containerPaddingYProps: import("lit").PropertyDeclaration<unknown, unknown>;
+/** Steps for the space above and below a page section. */
+export declare const sectionSpaceValues: {
+    readonly NONE: "none";
+    readonly SM: "sm";
+    readonly MD: "md";
+    readonly LG: "lg";
+    readonly XL: "xl";
+};
+export type SectionSpaceType = ContainerPaddingType;
+/**
+ * Section spacing override for one side. Leave unset to follow the inherited
+ * `--dsgn-section-space`.
+ */
+export declare const paddingTopProps: import("lit").PropertyDeclaration<unknown, unknown>;
+export declare const paddingBottomProps: import("lit").PropertyDeclaration<unknown, unknown>;

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

@@ -38,12 +38,17 @@ var containerPaddingValues = {
   LG: "lg",
   XL: "xl"
 };
-var containerPaddingXProps = enumCreator(Object.values(containerPaddingValues), "padding-x", String, { reflect: true, attribute: "padding-x" });
-var containerPaddingYProps = enumCreator(Object.values(containerPaddingValues), "padding-y", String, { reflect: true, attribute: "padding-y" });
+var optional = (values) => [...values, undefined, null];
+var containerPaddingXProps = enumCreator(optional(Object.values(containerPaddingValues)), "padding-x", String, { reflect: true, attribute: "padding-x" });
+var sectionSpaceValues = containerPaddingValues;
+var paddingTopProps = enumCreator(optional(Object.values(sectionSpaceValues)), "padding-top", String, { reflect: true, attribute: "padding-top" });
+var paddingBottomProps = enumCreator(optional(Object.values(sectionSpaceValues)), "padding-bottom", String, { reflect: true, attribute: "padding-bottom" });
 export {
   containerPaddingValues,
   containerPaddingXProps,
-  containerPaddingYProps,
   containerSizeProps,
-  containerSizeValues
+  containerSizeValues,
+  paddingBottomProps,
+  paddingTopProps,
+  sectionSpaceValues
 };

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

@@ -1,2 +1,9 @@
-import type { ContainerPaddingType, ContainerSizeType } from './Container.props.js';
-export declare const classNames: (size: ContainerSizeType, paddingX: ContainerPaddingType, paddingY: ContainerPaddingType) => string;
+import type { ContainerPaddingType, ContainerSizeType, SectionSpaceType } from './Container.props.js';
+/** Shared by the component and its pre-upgrade stylesheet. */
+export declare const paddingXClassNames: (padding?: ContainerPaddingType) => string;
+/**
+ * Vertical padding. A section follows the inherited section space on any side
+ * left unset; a plain container has none there.
+ */
+export declare const sectionSpaceClassNames: (section: boolean, top?: SectionSpaceType, bottom?: SectionSpaceType) => string;
+export declare const classNames: (size: ContainerSizeType, paddingX: ContainerPaddingType | undefined, section: boolean, paddingTop?: SectionSpaceType, paddingBottom?: SectionSpaceType) => string;

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

@@ -8,12 +8,20 @@ import '../../Icon/src/Icon.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 SectionSpaceType } from '../../Container/src/Container.props.js';
 import { type FeatureTabData } from './FeatureTabs.props.js';
 /** @slot header - Optional content above the tab interface. */
 export declare class FeatureTabs extends Base {
     static styles: CSSResultGroup;
+    /** Space above the section. Unset follows the inherited section space. */
+    paddingTop?: SectionSpaceType;
+    /** Space below the section. Unset follows the inherited section space. */
+    paddingBottom?: SectionSpaceType;
     private _inView;
     private _rotate;
+    private _motion;
+    /** The feature whose detail last faded in; the fade replays when it changes. */
+    private _shownIndex?;
     surface: SurfaceType;
     features: FeatureTabData[];
     duration: number;
@@ -32,6 +40,12 @@ export declare class FeatureTabs extends Base {
     constructor();
     firstUpdated(): void;
     updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    /**
+     * Fade the detail in whenever the active feature changes. `keyed` renders a
+     * fresh element per feature, so each change animates a new node. This runs
+     * after render and before paint, so the new detail never shows unfaded.
+     */
+    private _fadeInDetail;
     private _handleTabClick;
     private _handleTabKeyDown;
     private _handlePauseResume;

package/dist/components/FeatureTabs/src/FeatureTabs.js

@@ -95,20 +95,8 @@ class Base extends LitElement {
 }
 defineElement("dsgn-base", Base);
 
-// common/helpers/motion.ts
-var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
-var cachedMatchMedia;
-var cachedQuery = null;
-function prefersReducedMotion() {
-  const mm = typeof matchMedia === "function" ? matchMedia : undefined;
-  if (mm !== cachedMatchMedia) {
-    cachedMatchMedia = mm;
-    cachedQuery = mm ? mm(REDUCED_MOTION_QUERY) : null;
-  }
-  return cachedQuery?.matches ?? false;
-}
-
 // common/controllers/AutoRotateController.ts
+import { prefersReducedMotion } from "@ds-gn/motion";
 var TICK_MS = 32;
 
 class AutoRotateController {
@@ -229,6 +217,9 @@ var surfaceValues = {
 };
 var surfaceProps = enumCreator(Object.values(surfaceValues), "surface", String, { reflect: true });
 
+// components/FeatureTabs/src/FeatureTabs.ts
+import { MotionController } from "@ds-gn/motion/lit";
+
 // ../../node_modules/.bun/lit-html@3.3.3/node_modules/lit-html/development/is-server.js
 var NODE_MODE = false;
 var isServer = NODE_MODE;
@@ -304,8 +295,9 @@ import { property } from "lit/decorators.js";
 import { keyed } from "lit/directives/keyed.js";
 import { styleMap } from "lit/directives/style-map.js";
 import {
-  containerPaddingValues,
-  containerSizeValues
+  containerSizeValues,
+  paddingBottomProps,
+  paddingTopProps
 } from "../../Container/src/Container.props.js";
 
 // components/FeatureTabs/src/FeatureTabs.css
@@ -337,8 +329,6 @@ var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.co
     --color-text-primary: inherit;
     --color-text-secondary: inherit;
     --color-text-tertiary: inherit;
-    --animate-fade-in-a: fade-in-a 0.3s ease-in;
-    --animate-fade-in-b: fade-in-b 0.3s ease-in;
   }
 }
 @layer utilities {
@@ -462,12 +452,6 @@ var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.co
   .shrink-0 {
     flex-shrink: 0;
   }
-  .animate-fade-in-a {
-    animation: var(--animate-fade-in-a);
-  }
-  .animate-fade-in-b {
-    animation: var(--animate-fade-in-b);
-  }
   .cursor-pointer {
     cursor: pointer;
   }
@@ -849,22 +833,6 @@ var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.co
   syntax: "*";
   inherits: false;
 }
-@keyframes fade-in-a {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@keyframes fade-in-b {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
 @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 {
@@ -1018,7 +986,7 @@ var patternOverlayStyles = () => ({
   maskImage: PATTERN_MASK,
   WebkitMaskImage: PATTERN_MASK
 });
-var detailContentClassNames = (idx) => clsx_default("relative", "flex", "flex-col", "flex-1", idx % 2 === 0 ? "animate-fade-in-a" : "animate-fade-in-b");
+var detailContentClassNames = () => clsx_default("relative", "flex", "flex-col", "flex-1");
 var detailHeaderClassNames = () => clsx_default("flex", "items-center", "gap-3", "mb-6");
 var detailEyebrowClassNames = () => clsx_default("font-mono", "text-[11px]", "tracking-[0.06em]", "uppercase", "text-text-tertiary");
 var detailCounterClassNames = () => clsx_default("ml-auto", "font-mono", "text-[12px]", "text-text-tertiary");
@@ -1068,6 +1036,7 @@ class FeatureTabs extends Base {
       config: { threshold: 0 },
       callback: (entries) => entries[entries.length - 1]?.isIntersecting ?? false
     });
+    this._motion = new MotionController(this);
     this.surface = surfaceValues.DARK;
     this.features = DEFAULT_FEATURES;
     this.duration = DEFAULT_DURATION;
@@ -1088,6 +1057,14 @@ class FeatureTabs extends Base {
     if (changedProperties.has("duration")) {
       this._rotate.setDuration(this.duration);
     }
+    this._fadeInDetail();
+  }
+  _fadeInDetail() {
+    const index = this._rotate.activeIndex;
+    if (index === this._shownIndex)
+      return;
+    this._shownIndex = index;
+    this.renderRoot.querySelectorAll("[data-detail-content]").forEach((detail) => void this._motion.enter(detail, "fade"));
   }
   _handleTabClick(index) {
     this._rotate.goTo(index);
@@ -1147,7 +1124,7 @@ class FeatureTabs extends Base {
         <div aria-hidden="true" style=${styleMap(patternOverlayStyles())}></div>
 
         ${keyed(idx, html2`
-            <div class="${detailContentClassNames(idx)}">
+            <div class="${detailContentClassNames()}" data-detail-content>
               <div class="${detailHeaderClassNames()}">
                 <span class="${iconBadgeClassNames(true, true)}">
                   ${this._renderIcon(feature.icon, "lg")}
@@ -1276,8 +1253,9 @@ class FeatureTabs extends Base {
       <section>
         <dsgn-container
           size="${containerSizeValues.XXL}"
-          padding-x="${containerPaddingValues.MD}"
-          padding-y="${containerPaddingValues.MD}"
+          section
+          .paddingTop=${this.paddingTop}
+          .paddingBottom=${this.paddingBottom}
         >
           <div class="${headerClassNames()}">
             <slot name="header"></slot>
@@ -1300,6 +1278,12 @@ class FeatureTabs extends Base {
     `;
   }
 }
+__legacyDecorateClassTS([
+  property({ ...paddingTopProps })
+], FeatureTabs.prototype, "paddingTop", undefined);
+__legacyDecorateClassTS([
+  property({ ...paddingBottomProps })
+], FeatureTabs.prototype, "paddingBottom", undefined);
 __legacyDecorateClassTS([
   property({ ...surfaceProps })
 ], FeatureTabs.prototype, "surface", undefined);

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

@@ -18,7 +18,7 @@ export declare const controlBtnClassNames: () => string;
 export declare const controlDotClassNames: (rotating: boolean) => string;
 export declare const detailClassNames: () => string;
 export declare const patternOverlayStyles: () => Record<string, string>;
-export declare const detailContentClassNames: (idx: number) => string;
+export declare const detailContentClassNames: () => string;
 export declare const detailHeaderClassNames: () => string;
 export declare const detailEyebrowClassNames: () => string;
 export declare const detailCounterClassNames: () => string;

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

@@ -3,7 +3,7 @@ import '../../Container/src/Container.js';
 import { type CSSResultGroup } from 'lit';
 import { Base } from '../../../common/Base/Base.js';
 import { type SurfaceType } from '../../../common/props/surface/surface.props.js';
-import { type ContainerPaddingType, type ContainerSizeType } from '../../Container/src/Container.props.js';
+import { type ContainerSizeType, type SectionSpaceType } from '../../Container/src/Container.props.js';
 /**
  * @slot logo - Brand or logo content.
  * @slot col-1 - First footer column.
@@ -21,14 +21,10 @@ export declare class Footer extends Base {
      * Container max-width size
      */
     containerSize: ContainerSizeType;
-    /**
-     * Container horizontal padding
-     */
-    containerPaddingX: ContainerPaddingType;
-    /**
-     * Container vertical padding
-     */
-    containerPaddingY: ContainerPaddingType;
+    /** Space above the section. Unset follows the inherited section space. */
+    paddingTop?: SectionSpaceType;
+    /** Space below the section. Unset follows the inherited section space. */
+    paddingBottom?: SectionSpaceType;
     updated(changedProperties: Map<string | number | symbol, unknown>): void;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/components/Footer/src/Footer.js

@@ -124,11 +124,10 @@ var surfaceProps = enumCreator(Object.values(surfaceValues), "surface", String,
 
 // components/Footer/src/Footer.ts
 import {
-  containerPaddingValues,
-  containerPaddingXProps,
-  containerPaddingYProps,
   containerSizeProps,
-  containerSizeValues
+  containerSizeValues,
+  paddingBottomProps,
+  paddingTopProps
 } from "../../Container/src/Container.props.js";
 
 // components/Footer/src/Footer.css
@@ -303,8 +302,6 @@ class Footer extends Base {
     super(...arguments);
     this.surface = surfaceValues.DARK;
     this.containerSize = containerSizeValues.XXL;
-    this.containerPaddingX = containerPaddingValues.SM;
-    this.containerPaddingY = containerPaddingValues.LG;
   }
   static styles = [Base.styles, Footer_default];
   updated(changedProperties) {
@@ -316,8 +313,9 @@ class Footer extends Base {
       <footer class="${classNames()}">
         <dsgn-container
           size="${this.containerSize}"
-          padding-x="${this.containerPaddingX}"
-          padding-y="${this.containerPaddingY}"
+          section
+          .paddingTop=${this.paddingTop}
+          .paddingBottom=${this.paddingBottom}
         >
           <div class="${topClasses()}">
             <div class="${logoClasses()}">
@@ -350,11 +348,11 @@ __legacyDecorateClassTS([
   property({ ...containerSizeProps, attribute: "container-size" })
 ], Footer.prototype, "containerSize", undefined);
 __legacyDecorateClassTS([
-  property({ ...containerPaddingXProps })
-], Footer.prototype, "containerPaddingX", undefined);
+  property({ ...paddingTopProps })
+], Footer.prototype, "paddingTop", undefined);
 __legacyDecorateClassTS([
-  property({ ...containerPaddingYProps })
-], Footer.prototype, "containerPaddingY", undefined);
+  property({ ...paddingBottomProps })
+], Footer.prototype, "paddingBottom", undefined);
 defineElement("dsgn-footer", Footer);
 export {
   Footer

package/dist/components/Heading/src/Heading.js

@@ -157,20 +157,8 @@ class Base extends LitElement {
 }
 defineElement("dsgn-base", Base);
 
-// common/helpers/motion.ts
-var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
-var cachedMatchMedia;
-var cachedQuery = null;
-function prefersReducedMotion() {
-  const mm = typeof matchMedia === "function" ? matchMedia : undefined;
-  if (mm !== cachedMatchMedia) {
-    cachedMatchMedia = mm;
-    cachedQuery = mm ? mm(REDUCED_MOTION_QUERY) : null;
-  }
-  return cachedQuery?.matches ?? false;
-}
-
 // common/controllers/WordCycleController.ts
+import { prefersReducedMotion } from "@ds-gn/motion";
 var DEFAULT_INTERVAL = 1000;
 
 class WordCycleController {

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

@@ -6,6 +6,7 @@ import '../../HeadingBlock/src/HeadingBlock.js';
 import { type CSSResultGroup } from 'lit';
 import { Base } from '../../../common/Base/Base.js';
 import { type SurfaceType } from '../../../common/props/surface/surface.props.js';
+import { type SectionSpaceType } from '../../Container/src/Container.props.js';
 import { type HeroContentAlignType, type HeroLayoutType, type HeroMinHeightType } from './Hero.props.js';
 /**
  * @slot content - Primary hero content.
@@ -32,6 +33,10 @@ export declare class Hero extends Base {
      * Has no effect on asset-right / asset-left / asset-background layouts.
      */
     contentAlign: HeroContentAlignType;
+    /** Space above the section. Unset follows the inherited section space. */
+    paddingTop?: SectionSpaceType;
+    /** Space below the section. Unset follows the inherited section space. */
+    paddingBottom?: SectionSpaceType;
     updated(changedProperties: Map<string | number | symbol, unknown>): void;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/components/Hero/src/Hero.js

@@ -126,7 +126,11 @@ var surfaceValues = {
 var surfaceProps = enumCreator(Object.values(surfaceValues), "surface", String, { reflect: true });
 
 // components/Hero/src/Hero.ts
-import { containerSizeValues } from "../../Container/src/Container.props.js";
+import {
+  containerSizeValues,
+  paddingBottomProps,
+  paddingTopProps
+} from "../../Container/src/Container.props.js";
 import {
   gridAlignValues,
   gridColsValues,
@@ -399,8 +403,9 @@ var overlayClassNames = () => {
 var featuresClassNames = () => {
   return clsx_default("mt-14", "pb-6", "relative", "z-10");
 };
+var featuresTypographyClassNames = () => clsx_default("font-mono", "text-xs", "text-text-tertiary", "tracking-[0.02em]", "uppercase");
 var featuresContentClassNames = (layout, contentAlign) => {
-  return clsx_default("flex", "gap-10", "flex-wrap", "font-mono", "text-xs", "text-text-tertiary", "tracking-[0.02em]", "uppercase", layout === "centered" && contentAlign === "center" && "justify-center");
+  return clsx_default("flex", "gap-10", "flex-wrap", featuresTypographyClassNames(), layout === "centered" && contentAlign === "center" && "justify-center");
 };
 var centeredFormClassNames = (contentAlign) => {
   return clsx_default("flex", "w-full", contentAlign === "center" ? "justify-center" : "justify-start");
@@ -430,7 +435,12 @@ class Hero extends Base {
             </div>
           </div>
           <div class="${overlayClassNames()}"></div>
-          <dsgn-container size="${containerSizeValues.XXL}">
+          <dsgn-container
+            size="${containerSizeValues.XXL}"
+            section
+            .paddingTop=${this.paddingTop}
+            .paddingBottom=${this.paddingBottom}
+          >
             <div class="${backgroundInnerClassNames()}">
               <slot name="content"></slot>
               <slot name="form"></slot>
@@ -447,7 +457,12 @@ class Hero extends Base {
     if (this.layout === heroLayoutValues.CENTERED) {
       return html2`
         <div class="${wrapperClassNames(this.layout, this.minHeight)}">
-          <dsgn-container size="${containerSizeValues.XXL}">
+          <dsgn-container
+            size="${containerSizeValues.XXL}"
+            section
+            .paddingTop=${this.paddingTop}
+            .paddingBottom=${this.paddingBottom}
+          >
             <div class="${centeredInnerClassNames()}">
               <slot name="content"></slot>
               <div class="${centeredFormClassNames(this.contentAlign)}">
@@ -467,7 +482,12 @@ class Hero extends Base {
     }
     return html2`
       <div class="${wrapperClassNames(this.layout, this.minHeight)}">
-        <dsgn-container size="${containerSizeValues.XXL}">
+        <dsgn-container
+          size="${containerSizeValues.XXL}"
+          section
+          .paddingTop=${this.paddingTop}
+          .paddingBottom=${this.paddingBottom}
+        >
           <dsgn-grid
             .cols=${gridColsValues.EIGHT_FOUR}
             .gap=${gridGapValues.LG}
@@ -500,6 +520,12 @@ __legacyDecorateClassTS([
 __legacyDecorateClassTS([
   property({ ...heroContentAlignProps })
 ], Hero.prototype, "contentAlign", undefined);
+__legacyDecorateClassTS([
+  property({ ...paddingTopProps })
+], Hero.prototype, "paddingTop", undefined);
+__legacyDecorateClassTS([
+  property({ ...paddingBottomProps })
+], Hero.prototype, "paddingBottom", undefined);
 defineElement("dsgn-hero", Hero);
 export {
   Hero

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

@@ -6,5 +6,6 @@ export declare const assetClassNames: (layout: HeroLayoutType) => string;
 export declare const assetInnerClassNames: (layout: HeroLayoutType) => string;
 export declare const overlayClassNames: () => string;
 export declare const featuresClassNames: () => string;
+export declare const featuresTypographyClassNames: () => string;
 export declare const featuresContentClassNames: (layout?: HeroLayoutType, contentAlign?: HeroContentAlignType) => string;
 export declare const centeredFormClassNames: (contentAlign?: HeroContentAlignType) => string;

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

@@ -72,8 +72,10 @@ export declare class Modal extends Base {
      * keyboard users are stuck.
      */
     noEscapeDismiss: boolean;
-    /** Drives `data-state`, which the stylesheet keys the exit animation on. */
+    private readonly _motion;
     private _closing;
+    /** Invalidates an exit when reopened, disconnected, or closed externally. */
+    private _closeRun;
     private _hasHeading;
     private _hasDescription;
     private _hasFooter;
@@ -118,6 +120,7 @@ export declare class Modal extends Base {
      * on the animations' own `finished` promises.
      */
     private _runCloseSequence;
+    private _animateDialog;
     /**
      * Deliberate initial focus: an author-marked `[autofocus]` (light DOM first,
      * since that is where the modal's content lives), otherwise the dialog itself.