@ds-gn/ui 0.6.1 → 0.7.0

package/README.md

@@ -11,9 +11,9 @@ System.
 
 **Public Beta** ·
 [Website](https://ds-gn.com/?utm_source=npm&utm_medium=readme&utm_campaign=ui&utm_content=website_link)
-· [Documentation](https://docs.ds-gn.com/) ·
-[Component reference](https://docs.ds-gn.com/components/button/) ·
-[Changelog](https://docs.ds-gn.com/changelog/ui/) ·
+· [Documentation](https://ds-gn.com/docs/) ·
+[Component reference](https://ds-gn.com/docs/components/button/) ·
+[Changelog](https://ds-gn.com/docs/changelog/ui/) ·
 [Public repository](https://github.com/LightLeapLabs/design-system)
 
 npm's Repository link points to our private build repository, which is required
@@ -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"
               },
-              "description": "Vertical padding (padding-block)",
-              "attribute": "padding-y",
+              "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": "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": "Horizontal padding (padding-inline)"
+              "description": "Gutter (padding-inline) step. Unset follows the inherited `--dsgn-gutter`."
             },
             {
-              "name": "padding-y",
-              "fieldName": "paddingY",
+              "name": "section",
+              "fieldName": "section",
               "type": {
-                "text": "ContainerPaddingType"
+                "text": "boolean"
               },
-              "description": "Vertical padding (padding-block)"
+              "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-top",
+              "fieldName": "paddingTop",
+              "type": {
+                "text": "SectionSpaceType | undefined"
+              },
+              "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",
@@ -1699,6 +1757,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 +1917,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 +1960,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 +2601,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 +2661,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."
             }
           ]
         }

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

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,10 +8,15 @@ 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;
     surface: SurfaceType;