@ds-gn/ui 0.6.1 → 0.7.0

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

@@ -304,8 +304,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
@@ -1276,8 +1277,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 +1302,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/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/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/Nav/src/Nav.js

@@ -125,10 +125,7 @@ var surfaceValues = {
 var surfaceProps = enumCreator(Object.values(surfaceValues), "surface", String, { reflect: true });
 
 // components/Nav/src/Nav.ts
-import {
-  containerPaddingValues,
-  containerSizeValues
-} from "../../Container/src/Container.props.js";
+import { containerSizeValues } from "../../Container/src/Container.props.js";
 // components/Icon/src/icons/menu.ts
 import { svg } from "lit";
 var menu = svg`<line x1="4" x2="20" y1="12" y2="12" /><line x1="4" x2="20" y1="6" y2="6" /><line x1="4" x2="20" y1="18" y2="18" />`;
@@ -672,11 +669,7 @@ class Nav extends Base {
   render() {
     return html2`
       <nav class="${classNames(this.transparent)}">
-        <dsgn-container
-          size="${containerSizeValues.XXL}"
-          padding-x="${containerPaddingValues.SM}"
-          padding-y="${containerPaddingValues.NONE}"
-        >
+        <dsgn-container size="${containerSizeValues.XXL}">
           <div class="${innerClasses()}">
             <div class="${logoClasses()}">
               <slot name="logo"></slot>