@ds-gn/ui 0.6.2 → 0.8.0

package/README.md

@@ -95,8 +95,8 @@ Custom events are exposed as `on<EventName>` props named after their underlying
 | `@ds-gn/ui/logo/full.svg`       | Full DS/GN logo for light backgrounds                 |
 | `@ds-gn/ui/logo/light.svg`      | Full DS/GN logo for light backgrounds                 |
 | `@ds-gn/ui/logo/dark.svg`       | Full DS/GN logo for dark backgrounds                  |
-| `@ds-gn/ui/logo/light.svg`      | Full DS/GN logo for light backgrounds                 |
-| `@ds-gn/ui/logo/dark.svg`       | Full DS/GN logo for dark backgrounds                  |
+| `@ds-gn/ui/layout.css`          | Optional pre-upgrade styles for page layout           |
+| `@ds-gn/ui/hero/fallback.css`   | Optional pre-upgrade styles for Hero                  |
 | `@ds-gn/ui/playground-manifest` | Machine-readable component playground metadata        |
 
 The string helpers inherit `currentColor` for theme-aware lettering and keep the slash orange. Use `getLogoHtml({ size: 24 })` to render the full artwork at a given height with its accessible name.
@@ -107,13 +107,31 @@ The string helpers inherit `currentColor` for theme-aware lettering and keep the
   Start on Node): importing `@ds-gn/ui/react` during server rendering is
   safe. The server emits an inert `<dsgn-*>` tag that upgrades on the client.
   Declarative Shadow DOM is not emitted, so a brief unstyled frame is possible
-  before upgrade. Reactive properties are applied client-side; pass `id`,
+  before upgrade; the pre-upgrade stylesheets below cover the layout
+  components. Reactive properties are applied client-side; pass `id`,
   `class`, and similar values as normal attributes.
 - **Cloudflare workerd** (including TanStack Start on Workers): full SSR is not
   currently supported because the custom element cannot be evaluated in the
   worker runtime. Load the wrapper client-only, such as behind a `ClientOnly`
   boundary with a lazy import.
 
+### Before components register
+
+When your HTML is rendered before the component scripts run (server rendering
+or static pages), import the optional pre-upgrade stylesheets in your page CSS:
+
+```css
+@import '@ds-gn/ui/layout.css';
+@import '@ds-gn/ui/hero/fallback.css'; /* only if you use dsgn-hero */
+```
+
+They apply only until each element registers. `layout.css` holds Container,
+Nav, FeatureTabs and Footer to their final gutters and section spacing,
+reserves the nav bar's height, and keeps the nav's links and dropdowns hidden
+until it lays them out. `hero/fallback.css` does the same for every Hero
+layout. Without them, content can shift or flash as unstyled text while the
+scripts load.
+
 <details>
 <summary><strong>Public Beta components and compatibility policy</strong></summary>
 

package/custom-elements.json

@@ -1183,20 +1183,41 @@
               "kind": "field",
               "name": "paddingX",
               "type": {
-                "text": "ContainerPaddingType"
+                "text": "ContainerPaddingType | undefined"
               },
-              "description": "Horizontal padding (padding-inline)",
+              "description": "Gutter (padding-inline) step. Unset follows the inherited `--dsgn-gutter`.",
               "attribute": "padding-x",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "paddingY",
+              "name": "section",
               "type": {
-                "text": "ContainerPaddingType"
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Marks the container as a page section: unset vertical sides follow the\ninherited `--dsgn-section-space` instead of having no padding.",
+              "attribute": "section",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "paddingTop",
+              "type": {
+                "text": "SectionSpaceType | undefined"
               },
-              "description": "Vertical padding (padding-block)",
-              "attribute": "padding-y",
+              "description": "Space above the content.",
+              "attribute": "padding-top",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "paddingBottom",
+              "type": {
+                "text": "SectionSpaceType | undefined"
+              },
+              "description": "Space below the content.",
+              "attribute": "padding-bottom",
               "reflects": true
             }
           ],
@@ -1219,17 +1240,34 @@
               "name": "padding-x",
               "fieldName": "paddingX",
               "type": {
-                "text": "ContainerPaddingType"
+                "text": "ContainerPaddingType | undefined"
+              },
+              "description": "Gutter (padding-inline) step. Unset follows the inherited `--dsgn-gutter`."
+            },
+            {
+              "name": "section",
+              "fieldName": "section",
+              "type": {
+                "text": "boolean"
               },
-              "description": "Horizontal padding (padding-inline)"
+              "default": "false",
+              "description": "Marks the container as a page section: unset vertical sides follow the\ninherited `--dsgn-section-space` instead of having no padding."
             },
             {
-              "name": "padding-y",
-              "fieldName": "paddingY",
+              "name": "padding-top",
+              "fieldName": "paddingTop",
               "type": {
-                "text": "ContainerPaddingType"
+                "text": "SectionSpaceType | undefined"
               },
-              "description": "Vertical padding (padding-block)"
+              "description": "Space above the content."
+            },
+            {
+              "name": "padding-bottom",
+              "fieldName": "paddingBottom",
+              "type": {
+                "text": "SectionSpaceType | undefined"
+              },
+              "description": "Space below the content."
             }
           ]
         }
@@ -1432,6 +1470,26 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "paddingTop",
+              "type": {
+                "text": "SectionSpaceType | undefined"
+              },
+              "description": "Space above the section. Unset follows the inherited section space.",
+              "attribute": "padding-top",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "paddingBottom",
+              "type": {
+                "text": "SectionSpaceType | undefined"
+              },
+              "description": "Space below the section. Unset follows the inherited section space.",
+              "attribute": "padding-bottom",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "_inView",
@@ -1447,6 +1505,21 @@
               "privacy": "private",
               "default": "new AutoRotateController( this, DEFAULT_DURATION, () => this._inView.value === true, )"
             },
+            {
+              "kind": "field",
+              "name": "_motion",
+              "privacy": "private",
+              "default": "new MotionController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "_shownIndex",
+              "type": {
+                "text": "number | undefined"
+              },
+              "privacy": "private",
+              "description": "The feature whose detail last faded in; the fade replays when it changes."
+            },
             {
               "kind": "field",
               "name": "surface",
@@ -1533,6 +1606,12 @@
               "description": "Accessible label for the tab list.",
               "attribute": "tabs-aria-label"
             },
+            {
+              "kind": "method",
+              "name": "_fadeInDetail",
+              "privacy": "private",
+              "description": "Fade the detail in whenever the active feature changes. `keyed` renders a\nfresh element per feature, so each change animates a new node. This runs\nafter render and before paint, so the new detail never shows unfaded."
+            },
             {
               "kind": "method",
               "name": "_handleTabClick",
@@ -1699,6 +1778,22 @@
           "tagName": "dsgn-feature-tabs",
           "customElement": true,
           "attributes": [
+            {
+              "name": "padding-top",
+              "fieldName": "paddingTop",
+              "type": {
+                "text": "SectionSpaceType | undefined"
+              },
+              "description": "Space above the section. Unset follows the inherited section space."
+            },
+            {
+              "name": "padding-bottom",
+              "fieldName": "paddingBottom",
+              "type": {
+                "text": "SectionSpaceType | undefined"
+              },
+              "description": "Space below the section. Unset follows the inherited section space."
+            },
             {
               "name": "surface",
               "fieldName": "surface",
@@ -1843,22 +1938,22 @@
             },
             {
               "kind": "field",
-              "name": "containerPaddingX",
+              "name": "paddingTop",
               "type": {
-                "text": "ContainerPaddingType"
+                "text": "SectionSpaceType | undefined"
               },
-              "description": "Container horizontal padding",
-              "attribute": "padding-x",
+              "description": "Space above the section. Unset follows the inherited section space.",
+              "attribute": "padding-top",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "containerPaddingY",
+              "name": "paddingBottom",
               "type": {
-                "text": "ContainerPaddingType"
+                "text": "SectionSpaceType | undefined"
               },
-              "description": "Container vertical padding",
-              "attribute": "padding-y",
+              "description": "Space below the section. Unset follows the inherited section space.",
+              "attribute": "padding-bottom",
               "reflects": true
             }
           ],
@@ -1886,20 +1981,20 @@
               "description": "Container max-width size"
             },
             {
-              "name": "padding-x",
-              "fieldName": "containerPaddingX",
+              "name": "padding-top",
+              "fieldName": "paddingTop",
               "type": {
-                "text": "ContainerPaddingType"
+                "text": "SectionSpaceType | undefined"
               },
-              "description": "Container horizontal padding"
+              "description": "Space above the section. Unset follows the inherited section space."
             },
             {
-              "name": "padding-y",
-              "fieldName": "containerPaddingY",
+              "name": "padding-bottom",
+              "fieldName": "paddingBottom",
               "type": {
-                "text": "ContainerPaddingType"
+                "text": "SectionSpaceType | undefined"
               },
-              "description": "Container vertical padding"
+              "description": "Space below the section. Unset follows the inherited section space."
             }
           ]
         }
@@ -2527,6 +2622,26 @@
               "description": "Horizontal alignment of content, form, and features in the centered layout.\nHas no effect on asset-right / asset-left / asset-background layouts.",
               "attribute": "content-align",
               "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "paddingTop",
+              "type": {
+                "text": "SectionSpaceType | undefined"
+              },
+              "description": "Space above the section. Unset follows the inherited section space.",
+              "attribute": "padding-top",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "paddingBottom",
+              "type": {
+                "text": "SectionSpaceType | undefined"
+              },
+              "description": "Space below the section. Unset follows the inherited section space.",
+              "attribute": "padding-bottom",
+              "reflects": true
             }
           ],
           "superclass": {
@@ -2567,6 +2682,22 @@
                 "text": "HeroContentAlignType"
               },
               "description": "Horizontal alignment of content, form, and features in the centered layout.\nHas no effect on asset-right / asset-left / asset-background layouts."
+            },
+            {
+              "name": "padding-top",
+              "fieldName": "paddingTop",
+              "type": {
+                "text": "SectionSpaceType | undefined"
+              },
+              "description": "Space above the section. Unset follows the inherited section space."
+            },
+            {
+              "name": "padding-bottom",
+              "fieldName": "paddingBottom",
+              "type": {
+                "text": "SectionSpaceType | undefined"
+              },
+              "description": "Space below the section. Unset follows the inherited section space."
             }
           ]
         }
@@ -3510,6 +3641,13 @@
               "attribute": "no-escape-dismiss",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "_motion",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new MotionController(this)"
+            },
             {
               "kind": "field",
               "name": "_closing",
@@ -3517,8 +3655,17 @@
                 "text": "boolean"
               },
               "privacy": "private",
-              "default": "false",
-              "description": "Drives `data-state`, which the stylesheet keys the exit animation on."
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_closeRun",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0",
+              "description": "Invalidates an exit when reopened, disconnected, or closed externally."
             },
             {
               "kind": "field",
@@ -3614,7 +3761,7 @@
               "kind": "field",
               "name": "_motionOrigin",
               "type": {
-                "text": "string"
+                "text": "Exclude<ModalMotionType, 'inherit'>"
               },
               "privacy": "private",
               "description": "The resolved animation origin, with `inherit` folded into `placement`.",
@@ -3690,6 +3837,30 @@
               ],
               "description": "Play the exit animation, then leave the top layer. The dialog stays in the\ntop layer for the whole animation because `dialog.close()` is what removes\nit, and that is deliberately the last step — no timers involved, the wait is\non the animations' own `finished` promises."
             },
+            {
+              "kind": "method",
+              "name": "_animateDialog",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "dialog",
+                  "type": {
+                    "text": "HTMLDialogElement"
+                  }
+                },
+                {
+                  "name": "entering",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "_focusInitialElement",

package/dist/components/Background/src/Background.js

@@ -156,20 +156,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/AuroraMeshController.ts
+import { prefersReducedMotion } from "@ds-gn/motion";
 var X_MIN = -15;
 var X_MAX = 70;
 var Y_MIN = -20;

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

@@ -1,7 +1,7 @@
 import '../../../types/global.d.ts';
 import { type CSSResultGroup } from 'lit';
 import { Base } from '../../../common/Base/Base.js';
-import { type ContainerPaddingType, type ContainerSizeType } from './Container.props.js';
+import { type ContainerPaddingType, type ContainerSizeType, type SectionSpaceType } from './Container.props.js';
 /** @slot - Constrained page content. */
 export declare class Container extends Base {
     static styles: CSSResultGroup;
@@ -10,13 +10,18 @@ export declare class Container extends Base {
      */
     size: ContainerSizeType;
     /**
-     * Horizontal padding (padding-inline)
+     * Gutter (padding-inline) step. Unset follows the inherited `--dsgn-gutter`.
      */
-    paddingX: ContainerPaddingType;
+    paddingX?: ContainerPaddingType;
     /**
-     * Vertical padding (padding-block)
+     * Marks the container as a page section: unset vertical sides follow the
+     * inherited `--dsgn-section-space` instead of having no padding.
      */
-    paddingY: ContainerPaddingType;
+    section: boolean;
+    /** Space above the content. */
+    paddingTop?: SectionSpaceType;
+    /** Space below the content. */
+    paddingBottom?: SectionSpaceType;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

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

@@ -103,6 +103,14 @@ var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.co
     --breakpoint-lg: 64rem;
     --breakpoint-xl: 80rem;
     --breakpoint-2xl: 96rem;
+    --spacing-gutter-lg: var(--dsgn-src-spacing-gutter-lg, clamp(1.5rem, 0.333rem + 4.167vw, 3rem));
+    --spacing-gutter-md: var(--dsgn-src-spacing-gutter-md, clamp(1rem, 0.25rem + 3vw, 2rem));
+    --spacing-gutter-sm: var(--dsgn-src-spacing-gutter-sm, clamp(0.5rem, 0.125rem + 1.5vw, 1rem));
+    --spacing-gutter-xl: var(--dsgn-src-spacing-gutter-xl, clamp(2rem, 6.25vw, 4rem));
+    --spacing-section-lg: var(--dsgn-src-spacing-section-lg, 3rem);
+    --spacing-section-md: var(--dsgn-src-spacing-section-md, 2rem);
+    --spacing-section-sm: var(--dsgn-src-spacing-section-sm, 1rem);
+    --spacing-section-xl: var(--dsgn-src-spacing-section-xl, 4rem);
   }
 }
 @layer utilities {
@@ -151,69 +159,59 @@ var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.co
   .max-w-screen-xl {
     max-width: var(--breakpoint-xl);
   }
-  .px-2 {
-    padding-inline: calc(var(--spacing) * 2);
+  .px-0 {
+    padding-inline: calc(var(--spacing) * 0);
   }
-  .px-4 {
-    padding-inline: calc(var(--spacing) * 4);
+  .px-\\[var\\(--dsgn-gutter\\,var\\(--spacing-gutter-md\\)\\)\\] {
+    padding-inline: var(--dsgn-gutter,var(--spacing-gutter-md));
   }
-  .px-6 {
-    padding-inline: calc(var(--spacing) * 6);
+  .px-gutter-lg {
+    padding-inline: var(--spacing-gutter-lg);
   }
-  .px-8 {
-    padding-inline: calc(var(--spacing) * 8);
+  .px-gutter-md {
+    padding-inline: var(--spacing-gutter-md);
   }
-  .py-4 {
-    padding-block: calc(var(--spacing) * 4);
+  .px-gutter-sm {
+    padding-inline: var(--spacing-gutter-sm);
   }
-  .py-8 {
-    padding-block: calc(var(--spacing) * 8);
+  .px-gutter-xl {
+    padding-inline: var(--spacing-gutter-xl);
   }
-  .py-12 {
-    padding-block: calc(var(--spacing) * 12);
+  .pt-0 {
+    padding-top: calc(var(--spacing) * 0);
   }
-  .py-16 {
-    padding-block: calc(var(--spacing) * 16);
+  .pt-\\[var\\(--dsgn-section-space\\,var\\(--spacing-section-md\\)\\)\\] {
+    padding-top: var(--dsgn-section-space,var(--spacing-section-md));
   }
-  .sm\\:px-3 {
-    @media (width >= 40rem) {
-      padding-inline: calc(var(--spacing) * 3);
-    }
+  .pt-section-lg {
+    padding-top: var(--spacing-section-lg);
   }
-  .sm\\:px-6 {
-    @media (width >= 40rem) {
-      padding-inline: calc(var(--spacing) * 6);
-    }
+  .pt-section-md {
+    padding-top: var(--spacing-section-md);
   }
-  .sm\\:px-8 {
-    @media (width >= 40rem) {
-      padding-inline: calc(var(--spacing) * 8);
-    }
+  .pt-section-sm {
+    padding-top: var(--spacing-section-sm);
   }
-  .sm\\:px-10 {
-    @media (width >= 40rem) {
-      padding-inline: calc(var(--spacing) * 10);
-    }
+  .pt-section-xl {
+    padding-top: var(--spacing-section-xl);
   }
-  .lg\\:px-4 {
-    @media (width >= 64rem) {
-      padding-inline: calc(var(--spacing) * 4);
-    }
+  .pb-0 {
+    padding-bottom: calc(var(--spacing) * 0);
   }
-  .lg\\:px-8 {
-    @media (width >= 64rem) {
-      padding-inline: calc(var(--spacing) * 8);
-    }
+  .pb-\\[var\\(--dsgn-section-space\\,var\\(--spacing-section-md\\)\\)\\] {
+    padding-bottom: var(--dsgn-section-space,var(--spacing-section-md));
   }
-  .lg\\:px-12 {
-    @media (width >= 64rem) {
-      padding-inline: calc(var(--spacing) * 12);
-    }
+  .pb-section-lg {
+    padding-bottom: var(--spacing-section-lg);
   }
-  .lg\\:px-16 {
-    @media (width >= 64rem) {
-      padding-inline: calc(var(--spacing) * 16);
-    }
+  .pb-section-md {
+    padding-bottom: var(--spacing-section-md);
+  }
+  .pb-section-sm {
+    padding-bottom: var(--spacing-section-sm);
+  }
+  .pb-section-xl {
+    padding-bottom: var(--spacing-section-xl);
   }
 }
 @property --dsgn-border-sweep-angle {
@@ -271,8 +269,11 @@ 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" });
 
 // ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -306,34 +307,45 @@ var sizeClasses = {
   "2xl": ["max-w-screen-2xl"],
   full: ["max-w-full"]
 };
+var inheritedGutter = "px-[var(--dsgn-gutter,var(--spacing-gutter-md))]";
 var paddingXClasses = {
-  none: [],
-  sm: ["px-2", "sm:px-3", "lg:px-4"],
-  md: ["px-4", "sm:px-6", "lg:px-8"],
-  lg: ["px-6", "sm:px-8", "lg:px-12"],
-  xl: ["px-8", "sm:px-10", "lg:px-16"]
+  none: "px-0",
+  sm: "px-gutter-sm",
+  md: "px-gutter-md",
+  lg: "px-gutter-lg",
+  xl: "px-gutter-xl"
+};
+var inheritedTop = "pt-[var(--dsgn-section-space,var(--spacing-section-md))]";
+var inheritedBottom = "pb-[var(--dsgn-section-space,var(--spacing-section-md))]";
+var paddingTopClasses = {
+  none: "pt-0",
+  sm: "pt-section-sm",
+  md: "pt-section-md",
+  lg: "pt-section-lg",
+  xl: "pt-section-xl"
 };
-var paddingYClasses = {
-  none: [],
-  sm: ["py-4"],
-  md: ["py-8"],
-  lg: ["py-12"],
-  xl: ["py-16"]
+var paddingBottomClasses = {
+  none: "pb-0",
+  sm: "pb-section-sm",
+  md: "pb-section-md",
+  lg: "pb-section-lg",
+  xl: "pb-section-xl"
 };
-var classNames = (size, paddingX, paddingY) => clsx_default(baseClasses, sizeClasses[size], paddingXClasses[paddingX], paddingYClasses[paddingY]);
+var paddingXClassNames = (padding) => padding ? paddingXClasses[padding] : inheritedGutter;
+var sectionSpaceClassNames = (section, top, bottom) => clsx_default(top ? paddingTopClasses[top] : section && inheritedTop, bottom ? paddingBottomClasses[bottom] : section && inheritedBottom);
+var classNames = (size, paddingX, section, paddingTop, paddingBottom) => clsx_default(baseClasses, sizeClasses[size], paddingXClassNames(paddingX), sectionSpaceClassNames(section, paddingTop, paddingBottom));
 
 // components/Container/src/Container.ts
 class Container extends Base {
   constructor() {
     super(...arguments);
     this.size = containerSizeValues.LG;
-    this.paddingX = containerPaddingValues.MD;
-    this.paddingY = containerPaddingValues.NONE;
+    this.section = false;
   }
   static styles = [Base.styles, Container_default];
   render() {
     return html2`<div
-      class="${classNames(this.size, this.paddingX, this.paddingY)}"
+      class="${classNames(this.size, this.paddingX ?? undefined, this.section, this.paddingTop ?? undefined, this.paddingBottom ?? undefined)}"
     >
       <slot></slot>
     </div>`;
@@ -346,8 +358,14 @@ __legacyDecorateClassTS([
   property({ ...containerPaddingXProps })
 ], Container.prototype, "paddingX", undefined);
 __legacyDecorateClassTS([
-  property({ ...containerPaddingYProps })
-], Container.prototype, "paddingY", undefined);
+  property({ type: Boolean, reflect: true })
+], Container.prototype, "section", undefined);
+__legacyDecorateClassTS([
+  property({ ...paddingTopProps })
+], Container.prototype, "paddingTop", undefined);
+__legacyDecorateClassTS([
+  property({ ...paddingBottomProps })
+], Container.prototype, "paddingBottom", undefined);
 defineElement("dsgn-container", Container);
 export {
   Container