@tcn/ui 0.0.2 → 0.0.3

package/dist/typography/title/title.js

@@ -1,33 +1,33 @@
-import { jsx as c } from "react/jsx-runtime";
+import { jsx as p } from "react/jsx-runtime";
 import u from "classnames";
 import { s as x } from "../../title.module-B16de2jd.js";
 function j({
-  size: r = "md",
+  size: t = "md",
   emphasis: o = "normal",
   hierarchy: s = "primary",
   color: e,
-  children: g,
-  className: h,
+  children: c,
+  className: g,
   style: i = {},
   padStart: n,
-  padEnd: f,
-  padBottom: m,
-  padTop: t,
-  pad: d,
-  selectable: p = !0,
-  as: l
+  padEnd: r,
+  padBottom: f,
+  padTop: m,
+  pad: l,
+  selectable: h = !0,
+  as: d
 }) {
-  let a = l;
-  return l == null && (r === "lg" ? a = "h1" : r === "md" ? a = "h2" : a = "h3"), d && (i.padding = d), n && (i.paddingInlineStart = n), f && (i.paddingInlineEnd = f), t && (i.paddingTop = t), m && (i.paddingBottom = m), e && (i.color = e), /* @__PURE__ */ c(
+  let a = d;
+  return d == null && (t === "lg" ? a = "h1" : t === "md" ? a = "h2" : a = "h3"), l && (i.padding = l), n && (i.paddingInlineStart = n), r && (i.paddingInlineEnd = r), m && (i.paddingTop = m), f && (i.paddingBottom = f), e && (i.color = e), /* @__PURE__ */ p(
     a,
     {
       "data-hierarchy": s,
       "data-emphasis": o,
-      "data-selectable": p,
-      className: u(x.title, "title", h),
+      "data-selectable": h,
+      className: u(x.title, "title", "tcn-title", g),
       style: i,
-      "data-size": r,
-      children: g
+      "data-size": t,
+      children: c
     }
   );
 }

package/dist/typography/title/title.js.map

@@ -1 +1 @@
-{"version":3,"file":"title.js","sources":["../../../src/typography/title/title.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport { Emphasis, Hierarchy, Size } from '../../utils/index.js';\nimport type { WithDetailedHTMLProps } from '../../stacks/types/as.js';\nimport styles from './title.module.css';\n\nexport interface TitleOwnProps {\n  children?: string;\n  size?: Size;\n  emphasis?: Emphasis;\n  hierarchy?: Hierarchy;\n  color?: string;\n  pad?: string;\n  padStart?: string;\n  padEnd?: string;\n  padTop?: string;\n  padBottom?: string;\n  selectable?: boolean;\n  as?: string;\n}\n\nexport type TitleProps = WithDetailedHTMLProps<TitleOwnProps, 'h1' | 'h2' | 'h3'>;\n\nexport function Title({\n  size = 'md',\n  emphasis = 'normal',\n  hierarchy = 'primary',\n  color,\n  children,\n  className,\n  style = {},\n  padStart,\n  padEnd,\n  padBottom,\n  padTop,\n  pad,\n  selectable = true,\n  as,\n}: TitleProps) {\n  let As: React.ElementType = as as React.ElementType;\n\n  if (as == null) {\n    if (size === 'lg') {\n      As = 'h1';\n    } else if (size === 'md') {\n      As = 'h2';\n    } else {\n      As = 'h3';\n    }\n  }\n\n  if (pad) {\n    style.padding = pad;\n  }\n\n  if (padStart) {\n    style.paddingInlineStart = padStart;\n  }\n\n  if (padEnd) {\n    style.paddingInlineEnd = padEnd;\n  }\n\n  if (padTop) {\n    style.paddingTop = padTop;\n  }\n\n  if (padBottom) {\n    style.paddingBottom = padBottom;\n  }\n\n  if (color) {\n    style.color = color;\n  }\n\n  return (\n    <As\n      data-hierarchy={hierarchy}\n      data-emphasis={emphasis}\n      data-selectable={selectable}\n      className={classnames(styles['title'], 'title', className)}\n      style={style}\n      data-size={size}\n    >\n      {children}\n    </As>\n  );\n}\n"],"names":["Title","size","emphasis","hierarchy","color","children","className","style","padStart","padEnd","padBottom","padTop","pad","selectable","as","As","jsx","classnames","styles"],"mappings":";;;AAuBO,SAASA,EAAM;AAAA,EACpB,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ,CAAA;AAAA,EACR,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,IAAAC;AACF,GAAe;AACb,MAAIC,IAAwBD;AAE5B,SAAIA,KAAM,SACJb,MAAS,OACXc,IAAK,OACId,MAAS,OAClBc,IAAK,OAELA,IAAK,OAILH,MACFL,EAAM,UAAUK,IAGdJ,MACFD,EAAM,qBAAqBC,IAGzBC,MACFF,EAAM,mBAAmBE,IAGvBE,MACFJ,EAAM,aAAaI,IAGjBD,MACFH,EAAM,gBAAgBG,IAGpBN,MACFG,EAAM,QAAQH,IAId,gBAAAY;AAAA,IAACD;AAAA,IAAA;AAAA,MACC,kBAAgBZ;AAAA,MAChB,iBAAeD;AAAA,MACf,mBAAiBW;AAAA,MACjB,WAAWI,EAAWC,EAAO,OAAU,SAASZ,CAAS;AAAA,MACzD,OAAAC;AAAA,MACA,aAAWN;AAAA,MAEV,UAAAI;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"title.js","sources":["../../../src/typography/title/title.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport type { WithDetailedHTMLProps } from '../../stacks/types/as.js';\nimport type { Emphasis, Hierarchy, Size } from '../../utils/index.js';\nimport styles from './title.module.css';\n\nexport interface TitleOwnProps {\n  children?: string;\n  size?: Size;\n  emphasis?: Emphasis;\n  hierarchy?: Hierarchy;\n  color?: string;\n  pad?: string;\n  padStart?: string;\n  padEnd?: string;\n  padTop?: string;\n  padBottom?: string;\n  selectable?: boolean;\n  as?: string;\n}\n\nexport type TitleProps = WithDetailedHTMLProps<TitleOwnProps, 'h1' | 'h2' | 'h3'>;\n\nexport function Title({\n  size = 'md',\n  emphasis = 'normal',\n  hierarchy = 'primary',\n  color,\n  children,\n  className,\n  style = {},\n  padStart,\n  padEnd,\n  padBottom,\n  padTop,\n  pad,\n  selectable = true,\n  as,\n}: TitleProps) {\n  let As: React.ElementType = as as React.ElementType;\n\n  if (as == null) {\n    if (size === 'lg') {\n      As = 'h1';\n    } else if (size === 'md') {\n      As = 'h2';\n    } else {\n      As = 'h3';\n    }\n  }\n\n  if (pad) {\n    style.padding = pad;\n  }\n\n  if (padStart) {\n    style.paddingInlineStart = padStart;\n  }\n\n  if (padEnd) {\n    style.paddingInlineEnd = padEnd;\n  }\n\n  if (padTop) {\n    style.paddingTop = padTop;\n  }\n\n  if (padBottom) {\n    style.paddingBottom = padBottom;\n  }\n\n  if (color) {\n    style.color = color;\n  }\n\n  return (\n    <As\n      data-hierarchy={hierarchy}\n      data-emphasis={emphasis}\n      data-selectable={selectable}\n      className={classnames(styles['title'], 'title', 'tcn-title', className)}\n      style={style}\n      data-size={size}\n    >\n      {children}\n    </As>\n  );\n}\n"],"names":["Title","size","emphasis","hierarchy","color","children","className","style","padStart","padEnd","padBottom","padTop","pad","selectable","as","As","jsx","classnames","styles"],"mappings":";;;AAuBO,SAASA,EAAM;AAAA,EACpB,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ,CAAA;AAAA,EACR,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,IAAAC;AACF,GAAe;AACb,MAAIC,IAAwBD;AAE5B,SAAIA,KAAM,SACJb,MAAS,OACXc,IAAK,OACId,MAAS,OAClBc,IAAK,OAELA,IAAK,OAILH,MACFL,EAAM,UAAUK,IAGdJ,MACFD,EAAM,qBAAqBC,IAGzBC,MACFF,EAAM,mBAAmBE,IAGvBE,MACFJ,EAAM,aAAaI,IAGjBD,MACFH,EAAM,gBAAgBG,IAGpBN,MACFG,EAAM,QAAQH,IAId,gBAAAY;AAAA,IAACD;AAAA,IAAA;AAAA,MACC,kBAAgBZ;AAAA,MAChB,iBAAeD;AAAA,MACf,mBAAiBW;AAAA,MACjB,WAAWI,EAAWC,EAAO,OAAU,SAAS,aAAaZ,CAAS;AAAA,MACtE,OAAAC;AAAA,MACA,aAAWN;AAAA,MAEV,UAAAI;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/v_body.css

@@ -1 +1 @@
-._v-body_d8f1917{gap:var(--gap-medium);padding:var(--padding-medium)}
+._v-body_d8f1917{min-height:0;flex-grow:1;width:100%}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tcn/ui",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
   "description": "",
   "author": "TCN",
@@ -109,8 +109,8 @@
   "dependencies": {
     "classnames": "^2.5.1",
     "react-color": "^2.19.3",
-    "@tcn/icons": "2.1.0",
-    "@tcn/state": "1.0.0"
+    "@tcn/state": "1.0.0",
+    "@tcn/icons": "2.1.0"
   },
   "scripts": {
     "build": "vite build",

package/src/actions/button/button/button.tsx

@@ -1,6 +1,6 @@
-import cln from 'classnames';
 import React from 'react';
-import { BaseButton, BaseButtonProps } from '../base_button/base_button.js';
+import cln from 'classnames';
+import { BaseButton, type BaseButtonProps } from '../base_button/base_button.js';
 import styles from './button.module.css';
 
 export interface ButtonProps extends BaseButtonProps {}
@@ -10,9 +10,15 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function
   ref
 ) {
   return (
-    <BaseButton ref={ref} className={cln(styles.button, 'button', className)} {...props}>
+    <BaseButton
+      ref={ref}
+      className={cln(styles.button, 'button', 'tcn-button', className)}
+      {...props}
+    >
       {typeof children === 'string' ? (
-        <span className={cln(styles['button-text'], 'button-text')}>{children}</span>
+        <span className={cln(styles['button-text'], 'button-text', 'tcn-button-text')}>
+          {children}
+        </span>
       ) : (
         children
       )}

package/src/form/field/common/status_input/status_input.tsx

@@ -9,7 +9,7 @@ import classNames from 'classnames';
 import styles from './status_input.module.css';
 
 /*
- TODO: I really want to make these themable.
+ TODO: I really want to make these themeable.
  The way we do that is simply put a div placeholder with
  a class that the theme can override. They can use svgs as 
  backgrounds for icons. This would make it so the component

package/src/form/field/h_field/h_field.tsx

@@ -4,7 +4,7 @@ import type { WithDetailedHTMLProps } from '../../../stacks/types/as.js';
 import classNames from 'classnames';
 import React, { useState } from 'react';
 import styles from './h_field.module.css';
-import { FieldInput } from '../common/types.js';
+import type { FieldInput } from '../common/types.js';
 import { FieldHeader } from '../common/field_header.js';
 import { FieldControl } from '../common/field_control/field_control.js';
 import { FieldStatusInput } from '../common/status_input/status_input.js';

package/src/form/field/v_field/v_field.tsx

@@ -7,7 +7,7 @@ import styles from './v_field.module.css';
 import { FieldControl } from '../common/field_control/field_control.js';
 import { FieldHeader } from '../common/field_header.js';
 import { FieldStatusInput } from '../common/status_input/status_input.js';
-import { FieldInput } from '../common/types.js';
+import type { FieldInput } from '../common/types.js';
 
 export interface VFieldOwnProps extends FieldInput {
   children: React.ReactNode;

package/src/form/field_presenters/options_field_presenter.ts

@@ -1,5 +1,5 @@
 import { Signal } from '@tcn/state';
-import { FieldOptions, FieldPresenter, FieldState } from './field_presenter.js';
+import { type FieldOptions, FieldPresenter, type FieldState } from './field_presenter.js';
 
 export interface OptionsFieldState<TValue = string, TOption = string>
   extends FieldState<TValue> {

package/src/form/form_field.tsx

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 import { useSignalValue } from '@tcn/state';
-import { FieldPresenter, FieldState } from './field_presenters/field_presenter.js';
+import { FieldPresenter, type FieldState } from './field_presenters/field_presenter.js';
 
 export function FormField<T>({
   field,

package/src/form/index.ts

@@ -1,11 +1,50 @@
-export * from './form_field.js';
-export * from './field_presenters/field_presenter.js';
-export * from './field_presenters/options_field_presenter.js';
-export * from './field_set/field_set.js';
-export * from './form_field.js';
-export * from './field/v_field/v_field.js';
-export * from './field/h_field/h_field.js';
-export * from './field/field.js';
-export * from './field/common/field_header.js';
-export * from './field/common/field_label.js';
-export * from './field/common/field_description.js';
+export {
+  type FieldControlOwnProps,
+  type FieldControlProps,
+  FieldControl,
+} from './field/common/field_control/field_control.js';
+export {
+  AdornmentMap,
+  type StatusInputState,
+  type StatusInputOwnProps,
+  type StatusInputProps,
+  FieldStatusInput,
+} from './field/common/status_input/status_input.js';
+export {
+  FieldDescription,
+  type FieldDescriptionOwnProps,
+} from './field/common/field_description.js';
+export {
+  type FieldErrorMessageOwnProps,
+  FieldErrorMessage,
+} from './field/common/field_error.js';
+export {
+  FieldHeader,
+  type FieldHeaderProps,
+  type FieldHeaderOwnProps,
+} from './field/common/field_header.js';
+export { FieldLabel, type FieldLabelOwnProps } from './field/common/field_label.js';
+export type { FieldInput } from './field/common/types.js';
+export {
+  HField,
+  type HFieldProps,
+  type HFieldOwnProps,
+} from './field/h_field/h_field.js';
+export {
+  VField,
+  type VFieldProps,
+  type VFieldOwnProps,
+} from './field/v_field/v_field.js';
+export { Field, type FieldProps } from './field/field.js';
+export {
+  FieldPresenter,
+  type FieldState,
+  type FieldOptions,
+} from './field_presenters/field_presenter.js';
+export {
+  OptionsFieldPresenter,
+  type OptionsFieldState,
+  type OptionsFieldOptions,
+} from './field_presenters/options_field_presenter.js';
+export { FieldSet, type FieldSetProps } from './field_set/field_set.js';
+export { FormField } from './form_field.js';

package/src/layouts/body/h_body.module.css

@@ -1,4 +1,5 @@
 .h-body {
-  gap: var(--gap-medium);
-  padding: var(--padding-medium);
+  min-width: 0;
+  flex-grow: 1;
+  height: 100%;
 }

package/src/layouts/body/h_body.tsx

@@ -6,14 +6,15 @@ import styles from './h_body.module.css';
 export interface HBodyProps extends Omit<HStackProps, 'as'> {}
 
 export const HBody = React.forwardRef<HTMLElement, HBodyProps>(function HBody(
-  { children, className, ...props }: HBodyProps,
+  { children, className, overflowX = 'auto', ...props }: HBodyProps,
   ref
 ) {
   return (
     <HStack
       ref={ref}
-      as="section"
-      className={classNames(styles['h-body'], className, 'h-body', 'body')}
+      as="div"
+      overflowX={overflowX}
+      className={classNames(styles['h-body'], className, 'tcn-h-body', 'body')}
       {...props}
     >
       {children}

package/src/layouts/body/v_body.module.css

@@ -1,4 +1,5 @@
 .v-body {
-  gap: var(--gap-medium);
-  padding: var(--padding-medium);
+  min-height: 0;
+  flex-grow: 1;
+  width: 100%;
 }

package/src/layouts/body/v_body.tsx

@@ -6,14 +6,15 @@ import styles from './v_body.module.css';
 export interface VBodyProps extends Omit<VStackProps, 'as'> {}
 
 export const VBody = React.forwardRef<HTMLElement, VBodyProps>(function VBody(
-  { children, className, ...props }: VBodyProps,
+  { children, className, overflowY = 'auto', ...props }: VBodyProps,
   ref
 ) {
   return (
     <VStack
       ref={ref}
-      as="section"
-      className={classNames(styles['v-body'], className, 'v-body', 'body')}
+      as="div"
+      overflowY={overflowY}
+      className={classNames(styles['v-body'], className, 'tcn-body', 'tcn-v-body')}
       {...props}
     >
       {children}

package/src/layouts/divider/divider.tsx

@@ -1,7 +1,7 @@
-import { Emphasis, Size } from '../../utils/index.js';
-import type { WithDetailedHTMLProps } from '../../stacks/types/as.js';
+import React, { type CSSProperties } from 'react';
 import classnames from 'classnames';
-import React, { CSSProperties } from 'react';
+import type { WithDetailedHTMLProps } from '../../stacks/types/as.js';
+import type { Emphasis, Size } from '../../utils/index.js';
 import styles from './divider.module.css';
 
 export type DividerOrientation =
@@ -59,7 +59,7 @@ export const Divider: React.FC<DividerProps> = ({
       data-thickness={thickness}
       data-length={length}
       data-orientation={orientation}
-      className={classnames(styles[`divider`], 'divider', className)}
+      className={classnames(styles[`divider`], 'divider', 'tcn-divider', className)}
       {...props}
     >
       <div
@@ -71,6 +71,7 @@ export const Divider: React.FC<DividerProps> = ({
         className={classnames(
           styles[`divider-line`],
           'divider-line',
+          'tcn-divider-line',
           'material',
           className
         )}

package/src/layouts/footer/footer.tsx

@@ -1,8 +1,8 @@
-import { HStack, type HStackProps } from '../../stacks/h_stack.js';
-import classNames from 'classnames';
 import React from 'react';
-import styles from './footer.module.css';
+import classNames from 'classnames';
+import { HStack, type HStackProps } from '../../stacks/h_stack.js';
 import type { Hierarchy, Size } from '../../utils/index.js';
+import styles from './footer.module.css';
 
 export interface FooterProps extends Omit<HStackProps, 'as' | 'children'> {
   hierarchy?: Hierarchy;
@@ -18,7 +18,7 @@ export const Footer = React.forwardRef<HTMLElement, FooterProps>(function Footer
     <HStack
       ref={ref}
       as="footer"
-      className={classNames(styles.footer, className, 'footer')}
+      className={classNames(styles.footer, className, 'footer', 'tcn-footer')}
       data-hierarchy={hierarchy}
       data-size={size}
       {...props}

package/src/layouts/header/header.tsx

@@ -1,8 +1,8 @@
-import { HStack, type HStackProps } from '../../stacks/h_stack.js';
-import classNames from 'classnames';
 import React from 'react';
-import styles from './header.module.css';
+import classNames from 'classnames';
+import { HStack, type HStackProps } from '../../stacks/h_stack.js';
 import type { Hierarchy, Size } from '../../utils/index.js';
+import styles from './header.module.css';
 
 // UtilityBar
 export interface HeaderProps extends Omit<HStackProps, 'as'> {
@@ -25,7 +25,7 @@ export const Header = React.forwardRef<HTMLElement, HeaderProps>(function Header
     <HStack
       ref={ref}
       as="header"
-      className={classNames(styles.header, className, 'header')}
+      className={classNames(styles.header, className, 'tcn-header', 'header')}
       data-hierarchy={hierarchy}
       data-size={size}
       height={height}

package/src/layouts/utility_bar/utility_bar.tsx

@@ -1,8 +1,8 @@
-import { HStack, type HStackProps } from '../../stacks/h_stack.js';
-import classNames from 'classnames';
 import React from 'react';
-import styles from './utility_bar.module.css';
+import classNames from 'classnames';
+import { HStack, type HStackProps } from '../../stacks/h_stack.js';
 import type { Hierarchy, Size } from '../../utils/index.js';
+import styles from './utility_bar.module.css';
 
 // UtilityBar
 export interface UtilityBarProps extends Omit<HStackProps, 'as'> {
@@ -26,7 +26,12 @@ export const UtilityBar = React.forwardRef<HTMLElement, UtilityBarProps>(
       <HStack
         ref={ref}
         as="header"
-        className={classNames(styles['utility-bar'], className, 'utility-bar')}
+        className={classNames(
+          styles['utility-bar'],
+          className,
+          'utility-bar',
+          'tcn-utility-bar'
+        )}
         data-hierarchy={hierarchy}
         data-size={size}
         height={height}

package/src/stacks/stack.module.css

@@ -20,7 +20,8 @@ HStack CSS
   display: inline-grid;
 }
 
-.box[data-height="flex"] {
+.box[data-height="flex"],
+.box[data-height="fill"] {
   height: auto;
 }
 
@@ -127,13 +128,30 @@ HStack CSS
 :where(.h-stack > .h-stack[data-width="flex"]),
 :where(.h-stack > .z-stack[data-width="flex"]),
 :where(.h-stack > .v-stack[data-width="flex"]),
-:where(.h-stack > .stack-flex[data-width="flex"]) {
+:where(.h-stack > .stack-flex[data-width="flex"]),
+:where(.h-stack > .h-stack[data-width="fill"]),
+:where(.h-stack > .z-stack[data-width="fill"]),
+:where(.h-stack > .v-stack[data-width="fill"]),
+:where(.h-stack > .stack-flex[data-width="fill"]),
+:where(.h-stack > .box[data-width="fill"]) {
   flex-grow: 1;
   flex-shrink: 0;
   flex-basis: 0%;
   width: auto;
 }
 
+:where(.h-stack > .h-stack[data-height="flex"]),
+:where(.h-stack > .z-stack[data-height="flex"]),
+:where(.h-stack > .v-stack[data-height="flex"]),
+:where(.h-stack > .stack-flex[data-height="flex"]),
+:where(.h-stack > .h-stack[data-height="fill"]),
+:where(.h-stack > .z-stack[data-height="fill"]),
+:where(.h-stack > .v-stack[data-height="fill"]),
+:where(.h-stack > .stack-flex[data-height="fill"]),
+:where(.h-stack > .box[data-height="fill"]) {
+  height: 100%;
+}
+
 :where(.reveal-layout .h-stack:after),
 :where(.reveal-h-stack .h-stack:after) {
   content: "";
@@ -189,17 +207,38 @@ HStack CSS
 :where(.v-stack > .h-stack[data-height="flex"]),
 :where(.v-stack > .z-stack[data-height="flex"]),
 :where(.v-stack > .v-stack[data-height="flex"]),
-:where(.v-stack > .stack-flex[data-height="flex"]) {
+:where(.v-stack > .stack-flex[data-height="flex"]),
+:where(.v-stack > .h-stack[data-height="fill"]),
+:where(.v-stack > .z-stack[data-height="fill"]),
+:where(.v-stack > .v-stack[data-height="fill"]),
+:where(.v-stack > .stack-flex[data-height="fill"]),
+:where(.v-stack > .box[data-height="fill"]) {
   flex-grow: 1;
   flex-shrink: 0;
   flex-basis: 0%;
   height: auto;
 }
 
+:where(.v-stack > .h-stack[data-width="flex"]),
+:where(.v-stack > .z-stack[data-width="flex"]),
+:where(.v-stack > .v-stack[data-width="flex"]),
+:where(.v-stack > .stack-flex[data-width="flex"]),
+:where(.v-stack > .h-stack[data-width="fill"]),
+:where(.v-stack > .z-stack[data-width="fill"]),
+:where(.v-stack > .v-stack[data-width="fill"]),
+:where(.v-stack > .stack-flex[data-width="fill"]),
+:where(.v-stack > .box[data-width="fill"]) {
+  width: 100%;
+}
+
 :where(.v-stack[data-height="auto"] > .h-stack[data-height="flex"]),
 :where(.v-stack[data-height="auto"] > .z-stack[data-height="flex"]),
 :where(.v-stack[data-height="auto"] > .v-stack[data-height="flex"]),
-:where(.v-stack[data-height="auto"] > .stack-flex[data-height="flex"]) {
+:where(.v-stack[data-height="auto"] > .stack-flex[data-height="flex"]),
+:where(.v-stack[data-height="auto"] > .h-stack[data-height="fill"]),
+:where(.v-stack[data-height="auto"] > .z-stack[data-height="fill"]),
+:where(.v-stack[data-height="auto"] > .v-stack[data-height="fill"]),
+:where(.v-stack[data-height="auto"] > .stack-flex[data-height="fill"]) {
   flex-basis: auto;
 }
 
@@ -259,12 +298,18 @@ ZStack CSS
 
 :where(.z-stack > .h-stack[data-height="flex"]),
 :where(.z-stack > .v-stack[data-height="flex"]),
+:where(.z-stack > .h-stack[data-height="fill"]),
+:where(.z-stack > .v-stack[data-height="fill"]),
+:where(.z-stack > .stack-flex[data-height="fill"]),
 :where(.z-stack > .stack-flex[data-height="default"]) {
   height: 100%;
 }
 
 :where(.z-stack > .h-stack[data-width="flex"]),
 :where(.z-stack > .v-stack[data-width="flex"]),
+:where(.z-stack > .h-stack[data-width="fill"]),
+:where(.z-stack > .v-stack[data-width="fill"]),
+:where(.z-stack > .stack-flex[data-width="fill"]),
 :where(.z-stack > .stack-flex[data-width="default"]) {
   width: 100%;
 }
@@ -311,7 +356,11 @@ Defaults CSS
 :where(.h-stack[data-width="auto"] > .h-stack[data-width="flex"]),
 :where(.h-stack[data-width="auto"] > .z-stack[data-width="flex"]),
 :where(.h-stack[data-width="auto"] > .v-stack[data-width="flex"]),
-:where(.h-stack[data-width="auto"] > .stack-flex[data-width="flex"]) {
+:where(.h-stack[data-width="auto"] > .stack-flex[data-width="flex"]),
+:where(.h-stack[data-width="auto"] > .h-stack[data-width="fill"]),
+:where(.h-stack[data-width="auto"] > .z-stack[data-width="fill"]),
+:where(.h-stack[data-width="auto"] > .v-stack[data-width="fill"]),
+:where(.h-stack[data-width="auto"] > .stack-flex[data-width="fill"]) {
   flex-basis: auto;
 }