@tcn/ui 0.18.0 → 0.18.1

package/CHANGELOG.md

@@ -0,0 +1,1009 @@
+# @tcn/ui
+
+## 0.18.1
+
+### Patch Changes
+
+- 8ed3944: Added AI documentation scaffolding — `AI_USAGE.md` entry point with decision tree routing to 15 topic docs covering all component categories. Published docs are included in the package via `ai-docs/`.
+
+  ## Migration
+
+  None required.
+
+- Updated dependencies [d181540]
+  - @tcn/state@1.3.4
+  - @tcn/icons@2.4.0
+
+## 0.18.0
+
+### Minor Changes
+
+- 2743104: Reorganized utils into logical subdirectories: `decorators/` (Resizable, Draggable), `listeners/` (ClickAwayListener, ScrollAwayListener), `system/` (shared design token types), and `hooks/`. Added shared `cloneWithDecorator` internal utility and decorator pattern documentation. Removed broken `./dnd` package export.
+
+  ## Migration
+
+  If importing directly from internal paths (e.g. `@tcn/ui/src/utils/resize/...` or `@tcn/ui/src/utils/dnd/...`), update to the new paths under `utils/decorators/resizable/` and `utils/decorators/draggable/`. Barrel imports from `@tcn/ui/utils` are unchanged.
+
+- 05a0db3: Refactored FieldSet to a composition-based API with a new `Legend` child component. Added `disabled` and `name` props. Moved visual styles (gap, padding, border-radius, background) from the system CSS layer to theme layers.
+
+  ## Breaking Changes
+
+  - The `legend`, `startAdornments`, and `endAdornments` props have been removed. Use a `<Legend>` child instead.
+  - The inner body `<div class="tcn-field-set-body">` has been removed. Children now render directly inside the fieldset. Any CSS targeting `.tcn-field-set-body` must target `.tcn-field-set` instead.
+
+  ## Migration
+
+  Replace the `legend` string prop with a composed `<Legend>` child. String children are automatically styled:
+
+  ```tsx
+  // Before
+  <FieldSet legend="Personal Info">
+    <Field label="Name"><Input /></Field>
+  </FieldSet>
+
+  // After
+  <FieldSet>
+    <Legend>Personal Info</Legend>
+    <Field label="Name"><Input /></Field>
+  </FieldSet>
+  ```
+
+  If you used `startAdornments` or `endAdornments`, place them directly inside `<Legend>`:
+
+  ```tsx
+  <Legend>
+    <Icon />
+    <BodyText size="lg">Section</BodyText>
+    <Spacer />
+    <Badge>3</Badge>
+  </Legend>
+  ```
+
+  If you have custom CSS targeting `.tcn-field-set-body`, move those rules to `.tcn-field-set`.
+
+- 7523fa4: Removed deprecated `SlimButton` component. Use `<Button utility>` instead — same API, just add the `utility` prop.
+
+  ## Breaking Changes
+
+  `SlimButton` export has been removed from `@tcn/ui`.
+
+  ## Migration
+
+  Replace all `<SlimButton>` usage with `<Button utility>`:
+
+  ```diff
+  - import { SlimButton } from '@tcn/ui';
+  + import { Button } from '@tcn/ui';
+
+  - <SlimButton hierarchy="tertiary" size="sm">
+  + <Button utility hierarchy="tertiary" size="sm">
+      <CrossIcon />
+  - </SlimButton>
+  + </Button>
+  ```
+
+- fb46de8: Resize origin values changed from physical (`'left'`/`'right'`) to logical (`'start'`/`'end'`) for i18n/RTL support. The `WidthResizeOrigin` type is now `'start' | 'end'`. Physical `ResizeHandlePosition` values (`'left'`, `'right'`, `'top-left'`, etc.) have been removed — use logical equivalents (`'start'`, `'end'`, `'top-start'`, etc.).
+
+  New shared utility types `HorizontalSide` and `VerticalSide` are exported from `@tcn/ui/utils`.
+
+  ## Breaking Changes
+
+  - `WidthResizeOrigin` changed from `'left' | 'right'` to `'start' | 'end'`
+  - Resize callbacks (`onWidthResize`, `onWidthResizeEnd`) now report `origin: 'start'` or `origin: 'end'`
+  - Physical `ResizeHandlePosition` values removed: `'left'`, `'right'`, `'top-left'`, `'top-right'`, `'bottom-left'`, `'bottom-right'`
+
+  ## Migration
+
+  - `origin === 'left'` → `origin === 'start'`
+  - `origin === 'right'` → `origin === 'end'`
+  - `position="left"` → `position="start"` (on ResizeHandle)
+  - `position="right"` → `position="end"` (on ResizeHandle)
+  - Corner equivalents: `top-left` → `top-start`, `top-right` → `top-end`, `bottom-left` → `bottom-start`, `bottom-right` → `bottom-end`
+
+### Patch Changes
+
+- 0cbec73: Resize-related props on Box (`enableResizeOn*`, `horizontalHandleProps`, `verticalHandleProps`, `onWidthResize`, `onHeightResize`, `onWidthResizeEnd`, `onHeightResizeEnd`) are now deprecated. Use `Resizable` + `ResizeHandle` instead. A `DeprecatedBoxResizeProps` type union is exported for easy omission from derived interfaces via `Omit<BoxProps, DeprecatedBoxResizeProps>`.
+
+  ## Migration
+
+  Wrap your Box in `<Resizable>` and add `<ResizeHandle position="...">` children instead of using the `enableResizeOn*` props. See the Resizable component docs for usage examples.
+
+- 75f907f: Continued splitting ergo theme into modular part files. Extracted `inputs.css` (entry, control, control-set, checkbox, switch, slider, multiselect), `form.css` (field-set, legend), and `navigation.css` (default + inline tab variants) from the monolithic `ergo_theme.css` into `parts/`. No visual changes — all styles are identical, just reorganized for maintainability.
+
+  ## Migration
+
+  None required.
+
+- d3738cd: Fixed ergo theme Divider rendering as transparent by migrating from the renamed `--material-line` variable to `--ergo-material-divider` token, with `#aaa` fallback.
+- 59ef353: Frame now uses the Resizable + ResizeHandle decorator pattern internally instead of Box's built-in resize handles. Resize handles are themed with a -6px offset for overlays. No changes to Frame's public API.
+
+  Storybook preview-head files now explicitly declare `@layer tcn-reset, tcn-system, tcn-theme` to restore correct CSS layer ordering after the layer injection was removed from Theme.
+
+  ## Migration
+
+  None required.
+
+- b9ad8cc: Fixed MultiSelect/MultiComboBox values container overflowing wider than the input above it (`box-sizing: border-box`). Disabled and default visual states now use ergo theme tokens instead of hardcoded colors.
+
+  ## Migration
+
+  None required.
+
+- Updated dependencies [206a97a]
+  - @tcn/icons@2.4.0
+
+## 0.17.0
+
+### Minor Changes
+
+- cb69f98: Adds default item-sizing props to `Columns` and `Rows`.
+
+  **`Columns`** gains `columnsMinWidth`, `columnsWidth`, and `columnsMaxWidth`. Set them once on the container to apply a uniform default to every child `Column`. An explicit prop on a `Column` always wins.
+
+  ```tsx
+  <Columns columnsMinWidth="300px">
+    <Column>Left</Column>
+    <Column>Right</Column>
+    <Column minWidth="500px">Override — wider</Column>
+  </Columns>
+  ```
+
+  **`Rows`** gains `rowsMinHeight`, `rowsHeight`, and `rowsMaxHeight`. Same propagation model — set once on `Rows`, override on individual `Row`.
+
+  ```tsx
+  <Rows rowsMinHeight="80px">
+    <Row>Top</Row>
+    <Row>Middle</Row>
+    <Row minHeight="160px">Override — taller</Row>
+  </Rows>
+  ```
+
+  Implemented via CSS custom properties (`--columns-min-width`, `--columns-width`, `--columns-max-width`, `--rows-min-height`, `--rows-height`, `--rows-max-height`) — zero runtime cost.
+
+  ## Migration
+
+  None required. Existing usages are unchanged.
+
+- 45d229d: Introduces `Resizable` and `ResizeHandle` — composable resize decorators in `utils/resize/`.
+  Decouples resize behavior from `Box`, allowing any element to be made resizable without
+  a wrapper component.
+
+  **`Resizable`** — decorates its first child with `position: relative` via `cloneElement`
+  and injects `ResizeHandle` children directly into the target. Provides context for
+  resize callbacks (`onWidthResize`, `onHeightResize`, `onWidthResizeEnd`, `onHeightResizeEnd`).
+
+  **`ResizeHandle`** — renders an absolutely-positioned handle div. Supports 14 positions:
+  6 edges (`top`, `bottom`, `left`, `right`, `start`, `end`) and 8 corners
+  (`top-left`, `top-right`, `bottom-left`, `bottom-right` + RTL-aware logical variants).
+  Accepts all `HTMLDivElement` props and a forwarded `ref`.
+
+  **Pure logic layer** (`handle_config.ts`) — position-to-config mapping, RTL direction
+  resolution, and delta computation are extracted into pure functions with no DOM/React
+  dependencies, fully unit-testable.
+
+  ### Usage
+
+  ```tsx
+  <Resizable onWidthResize={({ width }) => setWidth(width)}>
+    <Column width={`${width}px`}>content</Column>
+    <ResizeHandle position="right" />
+  </Resizable>
+  ```
+
+  ### Corner handles (dual-axis)
+
+  ```tsx
+  <Resizable
+    onWidthResize={({ width }) => setWidth(width)}
+    onHeightResize={({ height }) => setHeight(height)}
+  >
+    <Box width={`${width}px`} height={`${height}px`}>
+      content
+    </Box>
+    <ResizeHandle position="bottom-right" />
+  </Resizable>
+  ```
+
+  ### Overflow — consumer-controlled clipping
+
+  ```tsx
+  <Resizable onWidthResize={({ width }) => setWidth(width)}>
+    <Box width={`${width}px`} minWidth="100px">
+      <Box overflow="hidden">clipped content</Box>
+    </Box>
+    <ResizeHandle position="right" />
+  </Resizable>
+  ```
+
+  ### Theming
+
+  Handle offset is controlled via `--resize-offset` CSS variable (defaults to `0px`).
+  Themes or inline styles can override:
+
+  ```tsx
+  <ResizeHandle position="left" style={{ "--resize-offset": "-8px" }} />
+  ```
+
+  ## Migration
+
+  None required. This is additive — existing Box resize props continue to work.
+
+- 03d8f6c: Introduces `Rows` and `Row` — the vertical counterparts to `Columns` and `Column`.
+  Use them to stack fixed-height horizontal strips inside a `Scaffold`, with theme-driven
+  separators between rows.
+
+  **`Row`** — an `HStack` that renders as `<section>`. Defaults to `flex-grow: 0`
+  (holds its height). Pass `height="fill"` to let it grow into remaining space.
+
+  **`Rows`** — extends `Scaffold`, adding the `.tcn-rows` context class. The ergo
+  theme uses this context to apply `border-bottom` separators and block-axis padding
+  between rows. The last `Row` never receives a trailing border.
+
+  ### Contexts
+
+  | Container                 | Separator                    | Padding                      |
+  | ------------------------- | ---------------------------- | ---------------------------- |
+  | `.tcn-panel`, `.tcn-card` | `border-bottom` between rows | `padding-block` between rows |
+  | `.tcn-page`               | none                         | `padding-block` between rows |
+
+  ### Card / Panel — metadata rows with separators
+
+  ```tsx
+  <Card maxWidth="400px">
+    <Header>
+      <Title>Login Information</Title>
+    </Header>
+    <Scaffold>
+      <Rows>
+        <Row minHeight="48px">
+          <Term>
+            <Key>Username:</Key>
+            <Value>jsmith</Value>
+          </Term>
+        </Row>
+        <Row minHeight="48px">
+          <Term>
+            <Key>Email:</Key>
+            <Value severity="encouraged">jsmith@example.com</Value>
+          </Term>
+        </Row>
+        <Row minHeight="48px">
+          <Term>
+            <Key>Force Password Reset:</Key>
+            <Value>No</Value>
+          </Term>
+          <Term>
+            <Key>Two-Factor:</Key>
+            <Value severity="encouraged">Enabled</Value>
+          </Term>
+        </Row>
+        <Row height="fill">
+          <Term>
+            <Key>Expiration Date:</Key>
+            <Value>02/27/2024</Value>
+          </Term>
+        </Row>
+      </Rows>
+    </Scaffold>
+  </Card>
+  ```
+
+  ### Page — Column body with Rows
+
+  ```tsx
+  <Page>
+    <Rail>
+      <Column width="fill">
+        <Rows>
+          <Row minHeight="64px">{/* top strip — filters, toolbar */}</Row>
+          <Row height="fill">{/* main content */}</Row>
+          <Row minHeight="56px">{/* footer strip — pager, summary */}</Row>
+        </Rows>
+      </Column>
+    </Rail>
+  </Page>
+  ```
+
+  ## Migration
+
+  None required.
+
+### Patch Changes
+
+- 61815b2: Adds default ergo theme styles for `ResizeHandle`.
+
+  **Visual indicators** — edge handles render a centered pill chip via `::after`; corner handles render an L-shape indicator matching the resize cursor direction. Both darken on hover.
+
+  - Horizontal edges (`left`, `right`, `start`, `end`): 4px × 16px pill, centered vertically
+  - Vertical edges (`top`, `bottom`): 16px × 4px pill, centered horizontally
+  - Corners: 8px × 8px L-shape with 4px borders on two adjacent sides, anchored to the corner
+
+  **`data-axis` attribute** — `ResizeHandle` now exposes a `data-axis` attribute (`"horizontal"` | `"vertical"` | `"corner"`) derived from its `position` prop. Simplifies theme selectors and is available for custom styling.
+
+  **Column context offset** — within `.tcn-panel` and `.tcn-page`, handles inside `Columns` automatically inherit `--resize-offset` and `width` from the column padding token (`--padding-medium`), placing the handle in the gap between columns without any inline style override.
+
+  ## Migration
+
+  Remove any `--resize-offset` inline style overrides on `ResizeHandle` when used inside `Columns` within a `Panel` or `Page` — the ergo theme now sets this automatically.
+
+  ```diff
+  - <ResizeHandle position="left" style={{ '--resize-offset': '-8px' } as React.CSSProperties} />
+  + <ResizeHandle position="left" />
+  ```
+
+- 35fb302: `Scaffold` and `Rail` now render a single element (`VStack`/`HStack`) instead of a nested `Box` > Stack pair. This removes one DOM node per container, simplifies CSS selectors, and aligns the component API with the underlying stack primitives.
+
+  `ScaffoldProps` now extends `VStackProps` (minus `as`); `RailProps` now extends `HStackProps` (minus `as`). All existing sizing, spacing, and alignment props continue to work. The ergo theme `--pad-inline` default has moved from `.tcn-scaffold` to each surface (Page, Panel, Aside, Modal, Drawer, Window) individually.
+
+  ## Migration
+
+  - If you targeted `.tcn-scaffold-stack`, `.tcn-rail-stack`, or `.tcn-container-stack` in custom CSS, update selectors to target the container directly (`.tcn-scaffold`, `.tcn-rail`, `.tcn-container`).
+  - If you relied on `BoxProps`-specific types from `ScaffoldProps`/`RailProps`, switch to the equivalent `VStackProps`/`HStackProps` types.
+  - Resize props (`enableResizeOn*`, `onWidthResize`, `onHeightResize`, etc.) are no longer available on Scaffold/Rail. Wrap the container with `Resizable` and add a `ResizeHandle` child to restore resize behavior:
+
+    ```tsx
+    // Before
+    <Scaffold enableResizeOnEnd onWidthResize={handleResize}>...</Scaffold>
+
+    // After
+    <Resizable>
+      <Scaffold>
+        ...
+        <ResizeHandle position="right" />
+      </Scaffold>
+    </Resizable>
+    ```
+
+- 48b2b3f: We need to get the closest root, not just the document.
+
+## 0.16.0
+
+### Minor Changes
+
+- ff1db56: Introduces `Columns` and refactors `Column`. Removes `Side`.
+
+  **`Columns`** — new container that extends `Rail`, adding the `.tcn-columns` context
+  class. The ergo theme uses this context to apply column separators (right border +
+  padding-inline) when `Columns` is nested inside a Panel. Standalone `Column`
+  components in `Rail` and adjacent `Aside` components are unaffected.
+
+  **`Column`** — now a `VStack` directly (no Box wrapper). Defaults to `flex-grow: 0`
+  so it holds its width in a Rail. Pass `width="fill"` to make a Column grow and fill
+  remaining space. Two canonical uses:
+
+  - **Inside `Columns`** — fixed-width panel-body strip; ergo adds separators
+  - **Directly in `Rail`** — standalone sidebar or control column; no separator
+
+  ## Examples
+
+  **Panel with Columns** — side-by-side field groups, ergo applies right-border separators:
+
+  ```tsx
+  <Panel>
+    <Header>
+      <Title>Agent Details</Title>
+    </Header>
+    <Scaffold>
+      <Columns>
+        <Column minWidth="300px">
+          <Section>
+            <Heading>General</Heading>
+            <Detail>
+              <Term>
+                <Key>Agent</Key>
+                <Value>John Doe</Value>
+              </Term>
+              <Term>
+                <Key>Queue</Key>
+                <Value>Support</Value>
+              </Term>
+              <Term>
+                <Key>Status</Key>
+                <Value>Active</Value>
+              </Term>
+            </Detail>
+          </Section>
+        </Column>
+        <Column minWidth="300px">
+          <Section>
+            <Heading>Contact</Heading>
+            <Detail>
+              <Term>
+                <Key>Email</Key>
+                <Value>john.doe@example.com</Value>
+              </Term>
+              <Term>
+                <Key>Phone</Key>
+                <Value>+1 555 000 1234</Value>
+              </Term>
+            </Detail>
+          </Section>
+        </Column>
+      </Columns>
+    </Scaffold>
+    <Footer>
+      <Spacer />
+      <Button hierarchy="secondary">Cancel</Button>
+      <Button hierarchy="primary">Save</Button>
+    </Footer>
+  </Panel>
+  ```
+
+  **Page-level two-column layout** — primary panel fills, quarter-view panel fixed:
+
+  ```tsx
+  <Page>
+    <Columns>
+      <Column width="fill" minWidth="600px">
+        <Panel>
+          <Header>
+            <Title>Tasks</Title>
+          </Header>
+          <Scaffold>{/* table / main content */}</Scaffold>
+          <Footer>{/* pager */}</Footer>
+        </Panel>
+      </Column>
+      <Column minWidth="300px">
+        <Panel>
+          <Header>
+            <Title>Details</Title>
+          </Header>
+          <Scaffold>{/* selected row preview */}</Scaffold>
+        </Panel>
+      </Column>
+    </Columns>
+  </Page>
+  ```
+
+  ## Migration
+
+  **`Side` removed.** Replace `<Side width="Xpx">` with `<Column minWidth="Xpx">`.
+
+  **`Column` no longer grows by default.** If you had a `Column` that was growing to
+  fill space, add `width="fill"`: `<Column width="fill">`.
+
+  If you relied on `Column`'s previous hardcoded `250px` minimum width, pass
+  `minWidth="250px"` explicitly.
+
+## 0.15.0
+
+### Minor Changes
+
+- 4606dcd: Adds `Detail` as the named content slot for `Section`, replacing the catch-all CSS rule that applied `padding-inline-start` to all direct Section children.
+
+  `Detail` is a `VStack` that opts in to indentation based on context:
+
+  - Inside `Section` — receives `--section-tab` (inline-start) and `--gap-small` (inline-end)
+  - Inside `Scaffold` or `Panel` directly — receives `--pad-inline` on both sides, enabling flat Panel layouts without requiring an intermediate `Section`
+
+  Both contexts also apply `padding-block` via the ergo theme.
+
+  The ergo theme section block has been refactored: sticky positioning, height, z-index, and all padding values have moved out of the system CSS layer and into the theme. Heading sticky offsets are now driven by `--section-heading-height * --section-tab-depth` rather than hardcoded depth selectors.
+
+  ## Migration
+
+  Content placed directly inside `Section` (not wrapped in `Detail`) will no longer receive `padding-inline-start`. Wrap existing Section content in `Detail`:
+
+  ```tsx
+  // Before
+  <Section>
+    <Heading>Title</Heading>
+    <Term>...</Term>
+  </Section>
+
+  // After
+  <Section>
+    <Heading>Title</Heading>
+    <Detail>
+      <Term>...</Term>
+    </Detail>
+  </Section>
+  ```
+
+  `Detail` also replaces the need for a bare `Section` when no labeled grouping is required:
+
+  ```tsx
+  // Instead of a Section with no meaningful Heading just to get indentation:
+  <Panel>
+    <Header>Request Details</Header>
+    <Scaffold>
+      <Detail>
+        <Term>
+          <Key>Agent</Key>
+          <Value>John Doe</Value>
+        </Term>
+      </Detail>
+    </Scaffold>
+  </Panel>
+  ```
+
+  Surfaces like `Card` placed at section level are no longer affected by the catch-all indent — they are self-contained unless explicitly wrapped in `Detail`.
+
+### Patch Changes
+
+- 772908a: Ergo theme tokens are now organized into a dedicated brand palette file, with system-level tokens (`--action-severity-*`, spacing, palette colors, etc.) broken out into their own layer. All CSS variable references in the theme now resolve directly through named ergo tokens rather than ad-hoc values.
+
+  ## Migration
+
+  None required.
+
+- b0bca82: Adds `Term` to `Tokens` — a labeled key/value row — along with `emphasis` and `severity` props on `Key` and `Value`. A shared `tcn-datum` CSS class enables theme-level styling across both. Severity maps to the ergo status color palette. `Row` has been removed in favor of `Term`.
+
+## 0.14.0
+
+### Minor Changes
+
+- 8510f5b: Remove `Body` layout component. `Scaffold` and `Rail` now automatically apply body
+  behavior — flex growth, min-height clamping, and overflow scrolling — when nested
+  inside a parent `Scaffold` or `Rail`. This removes the need for an explicit wrapper
+  and makes layout composition more ergonomic.
+
+  **Migration:** Delete all `<Body>` imports and usages from your layouts. No other
+  changes are required — a nested `<Scaffold>` or `<Rail>` is now the scroll container
+  by default.
+
+  ```diff
+  - import { Scaffold, Body, Header, Footer } from '@tcn/ui'
+  + import { Scaffold, Header, Footer } from '@tcn/ui'
+
+    <Scaffold>
+      <Header />
+  -   <Body>
+        <Scaffold>
+          {content}
+        </Scaffold>
+  -   </Body>
+      <Footer />
+    </Scaffold>
+  ```
+
+### Patch Changes
+
+- 1ee1dcc: Input font sizes are now consistent across all input types at 12px, including date picker and select-based inputs which previously inherited an incorrect size from the button component.
+
+  ## Migration
+
+  None required.
+
+- a5a9cf0: Fix card internal spacing when used inside panels and sections.
+
+  Cards now isolate their own `--pad-inline` (8px) so header and body padding
+  are not polluted by the parent scaffold context (e.g. panels with edge-to-edge
+  headings that set padding to zero).
+
+  **Using cards inside panels:**
+
+  Cards should be placed using the following structure to ensure correct depth,
+  indentation, and internal spacing:
+
+  ```
+  Panel
+    └─ Body
+         └─ Scaffold
+              └─ Section          (establishes depth / padding via --section-tab)
+                   └─ Row         (absorbs section depth, positions card correctly)
+                        └─ Card
+  ```
+
+  Placing a `Card` directly inside a `Section` without a `Row` wrapper will cause
+  the section's `padding-inline-start` to be applied to the card element itself,
+  distorting its layout. `Row` acts as the inset carrier so the card remains
+  self-contained.
+
+  Cards placed directly inside a `Body > Scaffold` (without sections) do not
+  require a `Row` wrapper.
+
+- f83aaa6: Adding Mobile (Phone) Input. I haven't made them available yet. I want to iterate on the before I do.
+- 0d6328f: Style tweak for Ergo Theme select
+- b51d168: Font tweak for Title/Label on Filter fields
+- Updated dependencies [fb6bc45]
+  - @tcn/state@1.3.3
+  - @tcn/icons@2.3.0
+
+## 0.13.1
+
+### Patch Changes
+
+- e3d567c: Updates the table theme for ergo. Ensures that the first column is justified with a panel header. Quick fix for checkboxes in the first column - should be dark blue instead of orange. Adds a selection column example in ui-table
+
+## 0.13.0
+
+### Minor Changes
+
+- f2b9c66: # Changes
+
+  Removes deprecated V/H Body components. Finishes implementation for Body component, Updates all references and fixes stories
+
+  Body's only role now is to fill the available space in a layout. To determine the layout and scroll direction of the Body children pick between Scaffold (a vertical layout) or Rail (a horizontal layout).
+
+  ## Migration
+
+  Previous:
+
+  Vertical Approach
+
+  ```tsx
+  <Panel>
+    <Header><Title>Panel Title</Title></Header>
+    <VBody>
+      <Section>
+        <Heading>Example Content</Heading>
+      </Section>
+    <Footer><Title>Panel Title</Title></Footer>
+  </Panel>
+  ```
+
+  Horizontal Approach
+
+  ```tsx
+  <Panel>
+    <Header><Title>Panel Title</Title></Header>
+    <HBody>
+      <Section>
+        <Heading>Example Content</Heading>
+      </Section>
+    <Footer><Title>Panel Title</Title></Footer>
+  </Panel>
+  ```
+
+  New Approach:
+
+  Vertical Approach
+
+  ```tsx
+  <Panel>
+    <Header>
+      <Title>Header Title</Title>
+    </Header>
+    <Body>
+      <Scaffold>
+        <Section>
+          <Heading>Example Content</Heading>
+        </Section>
+      </Scaffold>
+    </Body>
+    <Footer>
+      <Title>Footer Title</Title>
+    </Footer>
+  </Panel>
+  ```
+
+  Horizontal Approach
+
+  ```tsx
+  <Panel>
+    <Header>
+      <Title>Header Title</Title>
+    </Header>
+    <Body>
+      <Scaffold>
+        <Section>
+          <Heading>Example Content</Heading>
+        </Section>
+      </Scaffold>
+    </Body>
+    <Footer>
+      <Title>Footer Title</Title>
+    </Footer>
+  </Panel>
+  ```
+
+- 675106d: Added autocomplete attribute for sipinput
+
+## 0.12.7
+
+### Patch Changes
+
+- 0c68fb9: Adds new Aside component - used to conditionally support the primary body content of a surface (scaffold)
+- Updated dependencies [182ee39]
+- Updated dependencies [2129fea]
+  - @tcn/state@1.3.2
+  - @tcn/icons@2.3.0
+
+## 0.12.6
+
+### Patch Changes
+
+- f768aa1: Adds Slide (Overlay utility) and Drawer (Surface)
+- 8e6f051: Remove shim from reset styles, test application fix
+- e7a2cfe: Add Control, rename InputGroup to ControlSet
+- Updated dependencies [41a4a76]
+- Updated dependencies [24a7d4d]
+- Updated dependencies [2c56723]
+  - @tcn/state@1.3.1
+  - @tcn/icons@2.3.0
+
+## 0.12.5
+
+### Patch Changes
+
+- 3505a49: Refactored resize callback signatures from individual parameters to payload objects (OnWidthResizePayload and OnHeightResizePayload). Expanded Modal and Windows stories to thouroughly test props
+- 27d3484: Fixes Frame and Box resizing logic - bounds are now enforced at same paint with pixel compare omptization if style is in px'
+- Updated dependencies [c3722d6]
+  - @tcn/state@1.3.0
+  - @tcn/icons@2.3.0
+
+## 0.12.4
+
+### Patch Changes
+
+- 4ee8e97: Adds Group component, adjusts theming on Tabs and Group component
+- adfd1af: Updated title and description to reactNode.
+- 36645db: Move SelectGroup from actions into Inputs
+- a0f28a7: Tweaks Ergo Theme for Rail
+- Updated dependencies [ffb3b25]
+  - @tcn/state@1.2.1
+  - @tcn/icons@2.3.0
+
+## 0.12.3
+
+### Patch Changes
+
+- ffcdad3: fix(popper): add content and anchor refs to acceptedRefs so portaled content doesn't dismiss on inside click.
+
+  ElementPopper and ContextPopper now pass popperRef and anchorElement into acceptedRefs. With portaled content, ClickAwayListener's node ref isn't an ancestor of the popover DOM, so clicks on the popover were treated as "away". Including the portaled root and anchor in acceptedRefs fixes that.
+
+- ffcdad3: docs(pop-confirm): add stories for dismissal variants and manual-close, fix incorrect description
+- ffcdad3: fix(popper): fix isException for dismissals
+
+  - Use dismissals.includes(dismissal) in buildExceptionHandler so isException runs for click-away and scroll-away (was “dismissal in dismissals”, which never matched for arrays).
+
+- bc8489a: Add margin to caret in ergo theme and set background to be surface aware, refactor tether and origin code to fix bug in initial position of caret
+
+## 0.12.2
+
+### Patch Changes
+
+- 3025114: Bug fixes for suggestion list and fixed layout on phone number input.
+
+## 0.12.1
+
+### Patch Changes
+
+- bdf2a7b: Setting tooltip caret to hidden until styles are fixed
+
+## 0.12.0
+
+### Minor Changes
+
+- 36f80fd: Separated ProgressBar into Progress and ProgressBar so we can use both.
+
+### Patch Changes
+
+- 7af569e: Adds functionality to clamp Frame to min/max width and heights
+- 438fab1: Fixed cache children bug.
+
+## 0.11.0
+
+### Minor Changes
+
+- 9bff31f: Improve Frame and Window sizing and clipping so overlays lay out and contain content correctly.
+- 1c97124: Added dialog to the reset
+- 494565b: Accessibility changes to PhoneNumberInput, VField and HField
+- 664f7f2: Updated SuggestionLists restore focus and fixed phone number inputs.
+
+### Patch Changes
+
+- 11de0f7: Updates Table Filter Panel to use new theming for inputs and applies an IR
+- 4389af3: Adjust Ergo Theme for inputs. Adds InputGroup
+- Updated dependencies [9a96e1f]
+  - @tcn/icons@2.3.0
+
+## 0.10.0
+
+### Minor Changes
+
+- 4547051: Upgraded Box's resize handlers to support displacment and origin position.
+- b52d699: Corrected divider coloring by emphasis in ergo theme.
+
+### Patch Changes
+
+- 60748a8: Deprecated Main, Tweaked Body components on Scaffold, updated examples.
+
+## 0.9.0
+
+### Minor Changes
+
+- fa45937: Upgraded Draggable Context to support setPosition.
+- 07bd249: Addded Responsive Component
+
+## 0.8.1
+
+### Patch Changes
+
+- a340e9f: Added rules for ai.
+- 2d53528: Initial implementation of Horizontal Layouts
+- de43067: Adds new app for testing composition of blackcat components. The app has two list view templates to begin with. Adds exports for horizontal layouts in UI, and ensure primitive table exports wont interfere with ui-table namespace.
+- 234a025: UI Table now uses themed primitive table component wrappers from ui. Also made some small adjustments to wrappers and Ergo Theme.
+- 61dcbbf: Adds primitive table elements to ui and themes them.
+
+## 0.8.0
+
+### Minor Changes
+
+- 40c0f66: Extract IWeakPromise interface and refactor code to use interface types instead of concrete WeakPromise class
+
+### Patch Changes
+
+- 2ac9878: Adds tab panel role onto tab child
+- Updated dependencies [40c0f66]
+  - @tcn/state@1.2.0
+  - @tcn/icons@2.2.1
+
+## 0.7.0
+
+### Minor Changes
+
+- 1e5a0d4: Added a disablePhoneNumber prop to the PhoneNumberInput
+- 96673cd: Adds caret positioning to the tethered overlay component, controlled by the precision prop. Renames BaseCaret component to Caret and updates CSS class from tcn-base-caret to tcn-caret.
+- a296e49: Exported the draggable handlers
+
+### Patch Changes
+
+- 861892e: Adjust Ergo theme for sections and panel body (scaffold)
+- 8ee1be6: Another approach for the Ergo Button hover issue
+- 109666d: Patch Ergo Theme - Button click bug, when clicking on the top 1px.
+
+## 0.6.0
+
+### Minor Changes
+
+- 9d000b3: Addded the correct background color to the confirm
+
+## 0.5.0
+
+### Minor Changes
+
+- f9677aa: Exported section heading from layout
+
+## 0.4.0
+
+### Minor Changes
+
+- 98d7081: Add new BaseCarrot component to overlay system with directional support (up, down, start, end) and theme support.
+
+### Patch Changes
+
+- a4c43ed: Added section to surfaces
+- 5fa70a3: Added Row, Key, Value, Section, Heading.
+- 3379485: removed root background colors off the ergo and windows 98 theme
+- d4d4046: Deprecates SlimButton, adds utlity prop to toggle and button components that replaces SlimButton useage. Updates theming for Toggle, and docs'
+- 547b393: Add Toggle Button
+
+## 0.3.3
+
+### Patch Changes
+
+- b249670: Add initial implementation of Tabs in UI Navigation
+- fa08372: Fixes Ergo theme font family, provides lato out of the box'
+
+## 0.3.2
+
+### Patch Changes
+
+- 74f4f89: Ergo theme supports SelectGroup and ButtonGroup
+- 3287a66: Fixed default select files.
+- 5318f44: Refactor vite build configuration to fix CSS entrypoint handling
+
+  - Replace `getEntrypoints`/`getRollupEntrypoints` with unified `getLibEntrypoints` function
+  - Use `externalizeDeps` plugin for cleaner dependency externalization
+  - Fix standalone CSS files (themes, layers.css) not being included in builds
+  - Improve `preventEmptyJsFilesPlugin` to filter type-only JS outputs
+
+- 532b07b: Added tcn to all classnames and fixed windows98 theme.
+- 11b4861: "Fixed exception for popover."
+- 7c4039d: Adjust Ergo theme for ButtonGroup
+- 7a9ad32: Fixed slider styles
+- 8efd840: Fixed tooltip hover bug.
+- 91432ed: Added css layers for tcn-reset, tcn-system and tcn-theme.
+- 11b4861: Fixed month selector
+- Updated dependencies [5318f44]
+  - @tcn/state@1.1.1
+  - @tcn/icons@2.2.1
+
+## 0.3.1
+
+### Patch Changes
+
+- b497df0: Added Severity type to buttons, needs to be iterated on'
+
+## 0.3.0
+
+### Minor Changes
+
+- fb762bd: Added ResponsiveRenderer to index.ts to be exported
+- fb762bd: Added changeset script to package.json
+
+### Patch Changes
+
+- 3c14164: Add Scaffold component to ui/layout. Panel, Modal, Window, Card surfaces extend the scaffold layout. Simplifies shared theming in ergo theme between these surfaces
+- ca4ace6: Expose tcn-surface class that is shared between panel, card, modal and window
+- d02aae3: Patched Tethered and Poppers to use Portals
+- 9a46dc5: Adding Exports for base popper and dismisal types
+- 532d392: Adds Tooltip Surface - a small wrapper around a PreviewPopper
+- ff797d8: Add PopConfirm Surface
+- a818f23: Add Preview, Context, and Element Popper components
+- b462f6f: Adds re-usable atomic components for relative overlays - Tethered and ElementTethered.
+- Updated dependencies [7347527]
+- Updated dependencies [acbec1e]
+  - @tcn/icons@2.2.0
+  - @tcn/state@1.1.0
+
+## 0.2.0
+
+### Minor Changes
+
+- 9557ed3: Added the TextareaHTMLAttributes to the textarea
+- 9f6a086: Added the name and autocomplete to the phoneinput
+
+### Patch Changes
+
+- 6f1d975: Update useDraggable hook to accept multiple handles. Add Draggable and DragHandle Utils - HOC Decorator components. Add Frame component. Refactor Modal and Window to use Frame. Adjust ergo theme for window, modal, and draggable.
+  - @tcn/icons@2.1.1
+
+## 0.1.1
+
+### Patch Changes
+
+- 0d622c5: - Updated shared dependencies across all packages.
+  - Improved build and test infrastructure for better reliability and consistency.
+- Updated dependencies [0d622c5]
+  - @tcn/icons@2.1.1
+  - @tcn/state@1.0.1
+
+## 0.1.0
+
+### Minor Changes
+
+- 012ff63: InputHTMLAttributes was updated as the prop type for inputs
+
+### Patch Changes
+
+- @tcn/icons@2.1.0
+
+## 0.0.5
+
+### Patch Changes
+
+- ee5e0b1: Adjusts Ergo theme: Adds initial styles for card and list, tweaks styles for modal and panel, adds styles for interactives, button and slim button. Adjusts theme class hooks for Card and Button, using tcn prefix for classes
+- 170af57: Added UtilityBar to the index.ts barrel file to be exported.
+- 4b52496: Added optional obfuscate feature for phone numbers in the phone book. This prevents agents from seeing phone numbers they shouldn't know anything about.
+  - @tcn/icons@2.1.0
+
+## 0.0.4
+
+### Patch Changes
+
+- 1dbd8fc: remove themes that are causing issues with js testing in consuming apps due to cssstylesheets
+- 5ec1141: Updated dependencies: replaced classnames dep with clsx for more ergonomic use and a bump in speed
+- b4654d6: Initial ergo theme for modal, covers header color, inset, and background color.
+  - @tcn/icons@2.1.0
+
+## 0.0.3
+
+### Patch Changes
+
+- 072bbe5: Added fill as a legit size for stacks and boxes. It will also work on the oppisite direction correctly.
+- b852190: Adds initial Ergo theme for panel, tweaks VBody and HBody layout components to work within panel. Adds tcn scoped classNames to panel related components.
+- 42c7053: Explicit exports for the ui/forms module. Tweaks imports to use type for type imports to allow easier removal for bundlers and dep analysis. Removes duplicate FormField component.
+  - @tcn/icons@2.1.0
+
+## 0.0.2
+
+### Patch Changes
+
+- 8bf95bf: Moved drawers to surfaces and add vBody and hBody
+- e8fa43c: Added barrel file for overlay package and missing fields for form package
+  - @tcn/icons@2.1.0
+
+## 0.0.1
+
+### Patch Changes
+
+- d04e50c: the phone number stripNonNumericAfterCountryCode removes all non numeric characters unless first character is a plus sign for edge cases.
+- 1383733: Added documentation for contributing and added new theme variables.
+- Updated dependencies [d7062b5]
+- Updated dependencies [5b662bc]
+- Updated dependencies [23a302d]
+  - @tcn/state@1.0.0
+  - @tcn/icons@2.1.0