npm - @tcn/ui - Versions diffs - 0.12.6 → 0.13.1 - Mend

@tcn/ui 0.12.6 → 0.13.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (111) hide show

package/dist/aside.css +1 -0
package/dist/body.css +1 -1
package/dist/inputs/phone_number_input/phone_number_input.d.ts +2 -1
package/dist/inputs/phone_number_input/phone_number_input.d.ts.map +1 -1
package/dist/inputs/phone_number_input/phone_number_input.js +28 -26
package/dist/inputs/phone_number_input/phone_number_input.js.map +1 -1
package/dist/inputs/phone_number_input/sip_input.d.ts +2 -1
package/dist/inputs/phone_number_input/sip_input.d.ts.map +1 -1
package/dist/inputs/phone_number_input/sip_input.js +45 -43
package/dist/inputs/phone_number_input/sip_input.js.map +1 -1
package/dist/layouts/body/body.d.ts +17 -0
package/dist/layouts/body/body.d.ts.map +1 -1
package/dist/layouts/body/body.js +11 -12
package/dist/layouts/body/body.js.map +1 -1
package/dist/layouts/index.d.ts +1 -2
package/dist/layouts/index.d.ts.map +1 -1
package/dist/layouts/index.js +38 -40
package/dist/layouts/index.js.map +1 -1
package/dist/layouts/scaffold/scaffold.js +1 -1
package/dist/layouts/scaffold/scaffold.js.map +1 -1
package/dist/layouts/section/section.d.ts.map +1 -1
package/dist/layouts/section/section.js +14 -13
package/dist/layouts/section/section.js.map +1 -1
package/dist/page.css +1 -1
package/dist/surfaces/aside/aside.d.ts +5 -0
package/dist/surfaces/aside/aside.d.ts.map +1 -0
package/dist/surfaces/aside/aside.js +19 -0
package/dist/surfaces/aside/aside.js.map +1 -0
package/dist/surfaces/drawers/drawer.d.ts.map +1 -1
package/dist/surfaces/drawers/drawer.js +19 -11
package/dist/surfaces/drawers/drawer.js.map +1 -1
package/dist/surfaces/index.d.ts +2 -2
package/dist/surfaces/index.d.ts.map +1 -1
package/dist/surfaces/index.js +14 -14
package/dist/surfaces/modal/modal.d.ts.map +1 -1
package/dist/surfaces/modal/modal.js +22 -14
package/dist/surfaces/modal/modal.js.map +1 -1
package/dist/surfaces/page/page.d.ts +5 -0
package/dist/surfaces/page/page.d.ts.map +1 -0
package/dist/surfaces/page/page.js +19 -0
package/dist/surfaces/page/page.js.map +1 -0
package/dist/surfaces/pop_confirm/pop_confirm.d.ts.map +1 -1
package/dist/surfaces/pop_confirm/pop_confirm.js +23 -16
package/dist/surfaces/pop_confirm/pop_confirm.js.map +1 -1
package/dist/surfaces/window/window.d.ts.map +1 -1
package/dist/surfaces/window/window.js +27 -19
package/dist/surfaces/window/window.js.map +1 -1
package/dist/themes/themes/ergo/ergo_theme.css +1 -1
package/dist/themes/themes/ergo/ergo_theme.js +88 -48
package/dist/themes/themes/ergo/ergo_theme.js.map +1 -1
package/package.json +2 -2
package/src/inputs/phone_number_input/phone_number_input.tsx +3 -0
package/src/inputs/phone_number_input/sip_input.tsx +3 -0
package/src/layouts/__stories__/composed_stories.module.css +1 -7
package/src/layouts/__stories__/rail.stories.tsx +20 -13
package/src/layouts/__stories__/scaffold.stories.tsx +34 -22
package/src/layouts/__stories__/utils.tsx +10 -7
package/src/layouts/body/body.module.css +0 -8
package/src/layouts/body/body.tsx +19 -3
package/src/layouts/index.ts +1 -2
package/src/layouts/scaffold/scaffold.tsx +1 -1
package/src/layouts/section/section.tsx +2 -1
package/src/overlay/slide/slide.stories.tsx +9 -6
package/src/surfaces/aside/aside.module.css +5 -0
package/src/surfaces/aside/aside.stories.tsx +75 -0
package/src/surfaces/aside/aside.tsx +22 -0
package/src/surfaces/card/card.stories.tsx +8 -5
package/src/surfaces/card/card_stories.module.css +4 -2
package/src/surfaces/drawers/drawer.stories.tsx +21 -7
package/src/surfaces/drawers/drawer.tsx +5 -1
package/src/surfaces/index.ts +2 -2
package/src/surfaces/modal/__stories__/modal.stories.tsx +21 -4
package/src/surfaces/modal/modal.tsx +5 -1
package/src/surfaces/page/page.module.css +0 -6
package/src/surfaces/page/page.stories.tsx +71 -0
package/src/surfaces/page/page.tsx +22 -0
package/src/surfaces/panel/__stories__/panel.stories.tsx +66 -60
package/src/surfaces/pop_confirm/pop_confirm.stories.tsx +43 -31
package/src/surfaces/pop_confirm/pop_confirm.tsx +5 -1
package/src/surfaces/tooltip/__stories__/tooltip.stories.tsx +31 -0
package/src/surfaces/window/window.stories.tsx +15 -4
package/src/surfaces/window/window.tsx +5 -1
package/src/themes/themes/ergo/__stories__/components/tone_picker/sb_tone_card.tsx +16 -15
package/src/themes/themes/ergo/__stories__/material.stories.tsx +6 -4
package/src/themes/themes/ergo/ergo_theme.css +88 -48
package/dist/body.module-BbFZ7KNP.js +0 -5
package/dist/body.module-BbFZ7KNP.js.map +0 -1
package/dist/layouts/body/h_body.d.ts +0 -6
package/dist/layouts/body/h_body.d.ts.map +0 -1
package/dist/layouts/body/h_body.js +0 -27
package/dist/layouts/body/h_body.js.map +0 -1
package/dist/layouts/body/v_body.d.ts +0 -6
package/dist/layouts/body/v_body.d.ts.map +0 -1
package/dist/layouts/body/v_body.js +0 -27
package/dist/layouts/body/v_body.js.map +0 -1
package/dist/page.module-DXhph-u6.js +0 -5
package/dist/page.module-DXhph-u6.js.map +0 -1
package/dist/surfaces/page/h_page.d.ts +0 -6
package/dist/surfaces/page/h_page.d.ts.map +0 -1
package/dist/surfaces/page/h_page.js +0 -22
package/dist/surfaces/page/h_page.js.map +0 -1
package/dist/surfaces/page/v_page.d.ts +0 -6
package/dist/surfaces/page/v_page.d.ts.map +0 -1
package/dist/surfaces/page/v_page.js +0 -21
package/dist/surfaces/page/v_page.js.map +0 -1
package/src/layouts/body/h_body.module.css +0 -7
package/src/layouts/body/h_body.tsx +0 -28
package/src/layouts/body/v_body.module.css +0 -7
package/src/layouts/body/v_body.tsx +0 -28
package/src/surfaces/page/h_page.tsx +0 -23
package/src/surfaces/page/v_page.tsx +0 -22

package/src/inputs/phone_number_input/phone_number_input.tsx CHANGED Viewed

@@ -16,6 +16,7 @@ export interface PhoneNumberInputProps
   extends Omit<HStackProps, 'onChange' | 'children'> {
   value?: string;
   allowSip?: boolean;
+  sipAutoComplete?: string;
   onChange: (value?: string) => void;
   defaultCountry?: string;
   allowedCountryCodes?: string[];
@@ -48,6 +49,7 @@ export function PhoneNumberInput({
   limitMaxLength,
   ariaSelectLabel,
   ariaPhoneBookButtonLabel,
+  sipAutoComplete,
   children,
   ...props
 }: PhoneNumberInputProps) {
@@ -124,6 +126,7 @@ export function PhoneNumberInput({
           autoFocus={autoFocus}
           placeholder={placeholder}
           countries={countries as CountryCode[]}
+          sipAutoComplete={sipAutoComplete}
         />
       </PhoneBookProvider>
     );

package/src/inputs/phone_number_input/sip_input.tsx CHANGED Viewed

@@ -14,6 +14,7 @@ import { SuggestionList } from '../suggestions/suggestion_list.js';
 export interface SipInputProps {
   onChange: (value: string) => void;
+  sipAutoComplete?: string;
   countries?: CountryCode[];
   disabled?: boolean;
   name?: string;
@@ -29,6 +30,7 @@ export function SipInput({
   'aria-label': ariaLabel,
   autoFocus,
   placeholder,
+  sipAutoComplete = 'on',
 }: SipInputProps) {
   const inputRef = React.useRef<HTMLInputElement>(null);
   const [phoneBookElement, setPhoneBookElement] =
@@ -120,6 +122,7 @@ export function SipInput({
           aria-label={ariaLabel}
           autoFocus={autoFocus}
           placeholder={placeholder}
+          autoComplete={sipAutoComplete}
         />
         {showPhoneBook && (
           <Button

package/src/layouts/__stories__/composed_stories.module.css CHANGED Viewed

@@ -25,7 +25,7 @@
 }
 .secondary {
-  padding: 8px 16px;
+  padding: 8px;
 }
 .primary {
@@ -76,7 +76,6 @@
 .body {
   background: var(--bg-4);
-  gap: 8px;
 }
 /* Horizontal Layouts */
@@ -89,11 +88,6 @@
   background: var(--bg-2);
 }
-.main {
-  background: var(--bg-3);
-  gap: 8px;
-}
 .content {
   background: rgba(0, 0, 0, 0.25);
   display: flex;

package/src/layouts/__stories__/rail.stories.tsx CHANGED Viewed

@@ -5,10 +5,10 @@ import { SBLayoutContent } from './utils/content.js';
 import { Rail } from '../rail/rail.js';
 import { Side } from '../rail/side/side.js';
 import { UtilityStrip } from '../rail/utility_strip/utility_strip.js';
-import { Title } from '../../typography/index.js';
-import { HBody } from '../body/h_body.js';
-import { VBody } from '../body/v_body.js';
+import { BodyText, Title } from '../../typography/index.js';
 import { Body } from '../body/body.js';
+import { VStack } from '../../stacks/v_stack.js';
+import { Scaffold } from '../scaffold/scaffold.js';
 const meta: Meta<typeof Rail> = {
   title: 'Layouts/Rail',
@@ -48,11 +48,16 @@ export const HorizontalContent: Story = {
         <UtilityStrip>
           <Title>Utility Strip</Title>
         </UtilityStrip>
-        <HBody>
-          <SBLayoutContent />
-          <SBLayoutContent />
-          <SBLayoutContent />
-        </HBody>
+        <Body>
+          <Rail>
+            <VStack minWidth="200px">
+              <BodyText>Body + Rail</BodyText>
+            </VStack>
+            <SBLayoutContent />
+            <SBLayoutContent />
+            <SBLayoutContent />
+          </Rail>
+        </Body>
         <Side width="200px">Side</Side>
       </Rail>
     </LayoutStoryDecorator>
@@ -66,11 +71,13 @@ export const VerticalContent: Story = {
         <UtilityStrip>
           <Title>Utility Strip</Title>
         </UtilityStrip>
-        <VBody>
-          <SBLayoutContent />
-          <SBLayoutContent />
-          <SBLayoutContent />
-        </VBody>
+        <Body>
+          <Scaffold>
+            <SBLayoutContent />
+            <SBLayoutContent />
+            <SBLayoutContent />
+          </Scaffold>
+        </Body>
         <Side width="200px">Side</Side>
       </Rail>
     </LayoutStoryDecorator>

package/src/layouts/__stories__/scaffold.stories.tsx CHANGED Viewed

@@ -1,15 +1,17 @@
 import { Scaffold } from '../scaffold/scaffold.js';
 import { Header } from '../header/header.js';
 import { UtilityBar } from '../utility_bar/utility_bar.js';
-import { VBody } from '../body/v_body.js';
 import { Footer } from '../footer/footer.js';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { LayoutStoryDecorator } from './utils/layout_theme_provider.js';
 import { SBLayoutContent } from './utils/content.js';
-import { HBody } from '../body/h_body.js';
 import { VStack } from '../../stacks/v_stack.js';
 import { Body } from '../body/body.js';
+import { Rail } from '../rail/rail.js';
+import { Section } from '../section/section.js';
+import { BodyText } from '../../typography/index.js';
+import { Heading } from '../section/heading.js';
 const meta: Meta<typeof Scaffold> = {
   title: 'Layouts/Scaffold',
@@ -50,20 +52,30 @@ export const VerticalContent: Story = {
       <Scaffold height="100vh">
         <Header>Header</Header>
         <UtilityBar>Utility Bar</UtilityBar>
-        <VBody>
-          <p>(V)Body</p>
-          <p>Fills available space</p>
-          <p>Scrolls vertically</p>
-          <SBLayoutContent />
-          <SBLayoutContent />
-          <SBLayoutContent />
-        </VBody>
-        <Footer>Footer</Footer>
+        <Body>
+          <Scaffold>
+            <VStack>
+              <BodyText>Body + Scaffold</BodyText>
+            </VStack>
+            <Section>
+              <Heading>Section 1 - A</Heading>
+              <SBLayoutContent />
+              <Section>
+                <Heading>Section 1 - B</Heading>
+                <SBLayoutContent />
+              </Section>
+            </Section>
+            <Section>
+              <Heading>Section 2</Heading>
+              <SBLayoutContent />
+              <SBLayoutContent />
+            </Section>
+          </Scaffold>
+        </Body>
       </Scaffold>
     </LayoutStoryDecorator>
   ),
 };
 export const HorizontalContent: Story = {
   args: {
     height: '100vh',
@@ -73,16 +85,16 @@ export const HorizontalContent: Story = {
       <Scaffold height="100vh">
         <Header>Header</Header>
         <UtilityBar>Utility Bar</UtilityBar>
-        <HBody>
-          <VStack minWidth="200px" hAlign="center">
-            <p>(H)Body</p>
-            <p>Fills available space</p>
-            <p>Scrolls horizontally</p>
-          </VStack>
-          <SBLayoutContent />
-          <SBLayoutContent />
-          <SBLayoutContent />
-        </HBody>
+        <Body>
+          <Rail>
+            <VStack minWidth="200px">
+              <BodyText>Body + Rail</BodyText>
+            </VStack>
+            <SBLayoutContent />
+            <SBLayoutContent />
+            <SBLayoutContent />
+          </Rail>
+        </Body>
         <Footer>Footer</Footer>
       </Scaffold>
     </LayoutStoryDecorator>

package/src/layouts/__stories__/utils.tsx CHANGED Viewed

@@ -8,13 +8,12 @@ import { UtilityBar } from '../utility_bar/utility_bar.js';
 import { Rail, type RailProps } from '../rail/rail.js';
 import { Side } from '../rail/side/side.js';
-import { VBody } from '../body/v_body.js';
-import { HBody } from '../body/h_body.js';
 import { Box, Spacer } from '../../stacks/index.js';
 import { UtilityStrip } from '../rail/utility_strip/utility_strip.js';
 import { SearchIcon } from '@tcn/icons/search_icon.js';
 import styles from './composed_stories.module.css';
+import { Body } from '../body/body.js';
 const FloatingLabel = ({ children }: { children: React.ReactNode }) => {
   return (
@@ -101,10 +100,12 @@ export const SBNestedRail: React.FC<PropsWithChildren<SBNestedRailProps>> = ({
         </UtilityStrip>
       )}
       {main && (
-        <HBody className={clsx(styles.main, styles.secondary)} width="200px">
-          {mainLabel && <>Body</>}
-          {children}
-        </HBody>
+        <Body className={clsx(styles.main, styles.secondary)} width="200px">
+          <Scaffold>
+            {mainLabel && <>Body</>}
+            {children}
+          </Scaffold>
+        </Body>
       )}
       {!main && children}
       {side && (
@@ -163,7 +164,9 @@ export const SBNestedScaffold: React.FC<PropsWithChildren<SBNestedScaffoldProps>
         </UtilityBar>
       )}
       {body && (
-        <VBody className={clsx(styles.body, styles.secondary)}>Body {children}</VBody>
+        <Body className={clsx(styles.body, styles.secondary)}>
+          <Scaffold>Body {children}</Scaffold>
+        </Body>
       )}
       {!body && children}
       {footer && (

package/src/layouts/body/body.module.css CHANGED Viewed

@@ -5,12 +5,4 @@
     flex-grow: 1;
     flex-shrink: unset;
   }
-  .h-body {
-    overflow-x: auto;
-  }
-  .v-body {
-    overflow-y: auto;
-  }
 }

package/src/layouts/body/body.tsx CHANGED Viewed

@@ -1,12 +1,28 @@
 import React from 'react';
 import { clsx } from 'clsx';
-import styles from './body.module.css';
 import { Box, type BoxProps } from '../../stacks/box/box.js';
+import styles from './body.module.css';
 export interface BodyProps extends Omit<BoxProps, 'as'> {}
-// Under construction: although this component behaves correctly, a content/child component that manages scrolling is needed.
-// For now HBody and VBody are recommended.
+/**
+ * The Body component will fill the available space in in a flex container.
+ * It is typically used within a Scaffold or Rail component.
+ * And typically will return a Scaffold or Rail component to determine the scroll behavior of the body
+ * Example:
+ * <Body>
+ *   <Scaffold>
+ *     <VerticalContent />
+ *   </Scaffold>
+ * </Body>
+ * or
+ * <Body>
+ *   <Rail>
+ *     <HorizontalContent />
+ *   </Rail>
+ * </Body>
+ */
 export const Body = React.forwardRef<HTMLElement, BodyProps>(function Body(
   { children, className, ...props }: BodyProps,
   ref

package/src/layouts/index.ts CHANGED Viewed

@@ -7,8 +7,7 @@ export * from './sidebar_end/sidebar_end.js';
 export * from './sidebar_start/sidebar_start.js';
 export { Scaffold, type ScaffoldProps } from './scaffold/scaffold.js';
-export { HBody, type HBodyProps } from './body/h_body.js';
-export { VBody, type VBodyProps } from './body/v_body.js';
+export { Body, type BodyProps } from './body/body.js';
 export { Footer, type FooterProps } from './footer/footer.js';
 export { Header, type HeaderProps } from './header/header.js';
 export { UtilityBar, type UtilityBarProps } from './utility_bar/utility_bar.js';

package/src/layouts/scaffold/scaffold.tsx CHANGED Viewed

@@ -20,7 +20,7 @@ export const Scaffold = React.forwardRef<HTMLElement, ScaffoldProps>(function Sc
     maxWidth,
     minHeight,
     maxHeight,
-    hAlign,
+    hAlign = 'start',
     vAlign = 'start',
     className,
     ...props

package/src/layouts/section/section.tsx CHANGED Viewed

@@ -4,13 +4,14 @@ import { VStack, type VStackProps } from '../../stacks/v_stack.js';
 import styles from './section.module.css';
 export const Section = React.forwardRef<HTMLDivElement, VStackProps>(function Section(
-  { children, className, as = 'section', style, ...props },
+  { children, className, hAlign = 'start', as = 'section', style, ...props },
   ref
 ) {
   return (
     <VStack
       as={as}
       ref={ref}
+      hAlign={hAlign}
       className={clsx(className, 'tcn-surface', styles.section, 'tcn-section')}
       style={style}
       {...props}

package/src/overlay/slide/slide.stories.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Header, Scaffold, VBody } from '../../layouts/index.js';
+import { Header, Scaffold, Body } from '../../layouts/index.js';
 import { ZStack } from '../../stacks/z_stack.js';
 import { BodyText } from '../../typography/index.js';
 import { Title } from '../../typography/title/title.js';
@@ -46,11 +46,14 @@ export const SlideStory = (args: Omit<SlideProps, 'children'>) => {
               <Title> This is a Slide</Title>
             </Header>
           </DragHandle>
-          <VBody>
-            <BodyText>
-              This component is fixed to a side of a container (top, bottom, start, end).
-            </BodyText>
-          </VBody>
+          <Body>
+            <Scaffold>
+              <BodyText>
+                This component is fixed to a side of a container (top, bottom, start,
+                end).
+              </BodyText>
+            </Scaffold>
+          </Body>
         </Scaffold>
       </Slide>
     </ZStack>

package/src/surfaces/aside/aside.module.css ADDED Viewed

@@ -0,0 +1,5 @@
+@layer tcn-system {
+  .aside {
+    height: 100%;
+  }
+}

package/src/surfaces/aside/aside.stories.tsx ADDED Viewed

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import {
+  Body,
+  Footer,
+  Header,
+  Heading,
+  Rail,
+  Scaffold,
+  Section,
+} from '../../layouts/index.js';
+import { Box } from '../../stacks/index.js';
+import { Aside } from './aside.js';
+import { BodyText, Title } from '../../typography/index.js';
+import { Panel } from '../panel/panel.js';
+import { theme } from '../../themes/theme_variables.js';
+const meta: Meta<typeof Aside> = {
+  title: 'Surfaces/Aside',
+  component: Aside,
+  tags: ['autodocs'],
+};
+export default meta;
+type Story = StoryObj<typeof Aside>;
+export const Baseline: Story = {
+  render: () => (
+    <Box
+      height="100vh"
+      minHeight="400px"
+      padding="16px"
+      style={{ backgroundColor: theme.backgroundColors.tertiary }}
+    >
+      <Panel>
+        <Header>
+          <Title>Parent Container Title</Title>
+        </Header>
+        <Body>
+          <Rail>
+            <Aside width="240px">
+              <Header>
+                <Title>Aside - Secondary</Title>
+              </Header>
+              <Body>
+                <Scaffold>
+                  <Section hAlign="start">
+                    <Heading>Aside Section</Heading>
+                    <BodyText>Section Content</BodyText>
+                  </Section>
+                  <Section hAlign="start">
+                    <Heading>Aside Section 2</Heading>
+                    <BodyText>Section Content 2</BodyText>
+                  </Section>
+                </Scaffold>
+              </Body>
+              <Footer>
+                <Title>Aside Footer</Title>
+              </Footer>
+            </Aside>
+            <Body>
+              <Scaffold>
+                <BodyText>Primary Content</BodyText>
+              </Scaffold>
+            </Body>
+          </Rail>
+        </Body>
+        <Footer>
+          <Title>Parent Container Footer</Title>
+        </Footer>
+      </Panel>
+    </Box>
+  ),
+};

package/src/surfaces/aside/aside.tsx ADDED Viewed

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Scaffold, type ScaffoldProps } from '../../layouts/scaffold/scaffold.js';
+import clsx from 'clsx';
+import styles from './aside.module.css';
+export type AsideProps = ScaffoldProps;
+export const Aside = React.forwardRef<HTMLElement, AsideProps>(function Aside(
+  { children, className, ...props }: AsideProps,
+  ref
+) {
+  return (
+    <Scaffold
+      ref={ref}
+      className={clsx(styles['aside'], 'tcn-surface', 'tcn-aside', className)}
+      {...props}
+    >
+      {children}
+    </Scaffold>
+  );
+});

package/src/surfaces/card/card.stories.tsx CHANGED Viewed

@@ -1,12 +1,12 @@
 import { BugIcon } from '@tcn/icons/bug_icon.js';
 import { GridOneIcon } from '@tcn/icons/grid_one_icon.js';
 import { Header } from '../../layouts/header/header.js';
-import { VBody } from '../../layouts/body/v_body.js';
 import { UtilityBar } from '../../layouts/utility_bar/utility_bar.js';
 import { Box, Spacer } from '../../stacks/index.js';
 import { Title } from '../../typography/title/title.js';
 import { Button } from '../../actions/index.js';
 import { Card } from './card.js';
+import { Body, Scaffold } from '../../layouts/index.js';
 // Styles
 import styles from './card_stories.module.css';
@@ -20,7 +20,7 @@ export default {
 export const Default = () => {
   return (
     <div className={styles['stories-container']}>
-      <Card maxHeight="400px">
+      <Card maxHeight="400px" maxWidth="400px">
         <Header>
           <Title>Card Header</Title>
           <Spacer />
@@ -48,9 +48,12 @@ export const Default = () => {
           </Button>
         </UtilityBar>
-        <VBody>
-          <Box className={styles['content-box']} />
-        </VBody>
+        <Body>
+          <Scaffold>
+            <Box className={styles['content-box']} />
+            <Box className={styles['content-box']} />
+          </Scaffold>
+        </Body>
         {/* Cards typically do not have a footer */}
         {/* <Footer>
           <Title>Footer</Title>

package/src/surfaces/card/card_stories.module.css CHANGED Viewed

@@ -6,8 +6,10 @@
   }
   :where(.stories-container) {
-    width: 100%;
-    height: 100%;
+    min-width: 400px;
+    min-height: 400px;
+    height: 1vh;
+    width: 1vw;
     padding: 16px;
     background-color: #ccc;
     overflow: auto;

package/src/surfaces/drawers/drawer.stories.tsx CHANGED Viewed

@@ -1,6 +1,14 @@
 import { useState } from 'react';
 import { Button } from '../../actions/index.js';
-import { Footer, Header, UtilityBar, VBody } from '../../layouts/index.js';
+import {
+  Body,
+  Footer,
+  Header,
+  Heading,
+  Scaffold,
+  Section,
+  UtilityBar,
+} from '../../layouts/index.js';
 import { ZStack } from '../../stacks/z_stack.js';
 import { BodyText, Title } from '../../typography/index.js';
 import { Drawer, type DrawerProps } from './drawer.js';
@@ -86,8 +94,6 @@ export const Baseline = ({
         minHeight={useWidth ? undefined : minSize}
         maxHeight={useWidth ? undefined : maxSize}
       >
-        {/* Add a drag handle around the areas of the modal you want to be draggable (usually the header) */}
-        {/* <DragHandle> */}
         <Header>
           <Title>Drawer Title</Title>
           <Spacer />
@@ -101,7 +107,6 @@ export const Baseline = ({
             <CrossIcon />
           </Button>
         </Header>
-        {/* </DragHandle> */}
         <UtilityBar>
           <Title>Utility Bar</Title>
@@ -116,9 +121,18 @@ export const Baseline = ({
             <BugIcon />
           </Button>
         </UtilityBar>
-        <VBody>
-          <BodyText>This is a drawer</BodyText>
-        </VBody>
+        <Body>
+          <Scaffold>
+            <Section>
+              <Heading>Drawer Section</Heading>
+              <BodyText>Section Content</BodyText>
+            </Section>
+            <Section>
+              <Heading>Drawer Section 2</Heading>
+              <BodyText>Section Content 2</BodyText>
+            </Section>
+          </Scaffold>
+        </Body>
         <Footer>
           <Spacer />
           <Button hierarchy="secondary">Cancel</Button>

package/src/surfaces/drawers/drawer.tsx CHANGED Viewed

@@ -18,7 +18,11 @@ export const Drawer = React.forwardRef<HTMLElement, DrawerProps>(function Drawer
       className={clsx('tcn-surface', 'tcn-drawer', className)}
       {...props}
     >
-      <Scaffold className={'tcn-drawer-scaffold'} width="100%" height="100%">
+      <Scaffold
+        className={'tcn-overlay-content tcn-drawer-scaffold'}
+        width="100%"
+        height="100%"
+      >
         {children}
       </Scaffold>
     </Slide>

package/src/surfaces/index.ts CHANGED Viewed

@@ -1,9 +1,9 @@
 export * from './alert/alert.js';
 export * from './card/card.js';
 export * from './confirm/confirm.js';
-export * from './page/h_page.js';
-export * from './page/v_page.js';
+export * from './page/page.js';
 export * from './panel/panel.js';
+export * from './aside/aside.js';
 export * from './popover/popover.js';
 export { Drawer, type DrawerProps } from './drawers/drawer.js';
 export { Window, type WindowProps } from './window/window.js';

package/src/surfaces/modal/__stories__/modal.stories.tsx CHANGED Viewed

@@ -1,6 +1,14 @@
 import { useState } from 'react';
 import { Button } from '../../../actions/index.js';
-import { Footer, Header, UtilityBar, VBody } from '../../../layouts/index.js';
+import {
+  Footer,
+  Header,
+  UtilityBar,
+  Body,
+  Scaffold,
+  Heading,
+  Section,
+} from '../../../layouts/index.js';
 import { ZStack } from '../../../stacks/z_stack.js';
 import { BodyText, Title } from '../../../typography/index.js';
 import { Modal, type ModalProps } from '../modal.js';
@@ -121,9 +129,18 @@ export const Baseline = ({
             <BugIcon />
           </Button>
         </UtilityBar>
-        <VBody>
-          <BodyText>This is a modal</BodyText>
-        </VBody>
+        <Body>
+          <Scaffold>
+            <Section>
+              <Heading>Modal Section</Heading>
+              <BodyText>Section Content</BodyText>
+            </Section>
+            <Section>
+              <Heading>Modal Section 2</Heading>
+              <BodyText>Section Content 2</BodyText>
+            </Section>
+          </Scaffold>
+        </Body>
         <Footer>
           <Spacer />
           <Button hierarchy="secondary">Cancel</Button>

package/src/surfaces/modal/modal.tsx CHANGED Viewed

@@ -30,7 +30,11 @@ export const Modal = React.forwardRef<HTMLElement, ModalProps>(function Modal(
       className={clsx(styles['modal'], 'tcn-surface', 'tcn-modal', className)}
       {...props}
     >
-      <Scaffold className={'tcn-modal-scaffold'} width="100%" height="100%">
+      <Scaffold
+        className={'tcn-overlay-content tcn-modal-scaffold'}
+        width="100%"
+        height="100%"
+      >
         {children}
       </Scaffold>
     </Frame>