@usefragments/ui 1.7.0 → 2.0.0

package/src/components/Alert/Alert.module.scss

@@ -1,66 +1,70 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
+@use "../../tokens/measurements.generated" as measurements;
 @use "../../recipes/feedback" as feedback;
 
+// The tone publishes its ramp on three channels; the alert paints wash, hairline
+// and ink from them, and `emphasis="surface"` keeps only the hairline + title.
 .alert {
   @include feedback.contextual;
+  @include high-contrast-outline;
 
+  --_alert-tint: var(--fui-color-info-bg, #{$fui-color-info-bg});
+  --_alert-ink: var(--fui-color-info-text, #{$fui-color-info-text});
+  --_alert-line: var(--fui-color-info-border, #{$fui-color-info-border});
+
+  border: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) solid
+    var(--_alert-line, var(--fui-color-info-border, #{$fui-color-info-border}));
   border-radius: var(--fui-card-radius, var(--fui-radius-lg, $fui-radius-lg));
+  background: var(--_alert-tint, var(--fui-color-info-bg, #{$fui-color-info-bg}));
+  color: var(--_alert-ink, var(--fui-color-info-text, #{$fui-color-info-text}));
 }
 
 .alert:has(.title) {
   align-items: flex-start;
 }
 
-.info {
-  background: var(--fui-color-info-bg, $fui-color-info-bg);
-  border: var(--fui-stroke-hairline, 1px) solid var(--fui-color-info-border, $fui-color-info-border);
-  color: var(--fui-color-info-text, $fui-color-info-text);
+@mixin _tone($tone, $bg, $text, $border) {
+  --_alert-tint: var(--fui-color-#{$tone}-bg, #{$bg});
+  --_alert-ink: var(--fui-color-#{$tone}-text, #{$text});
+  --_alert-line: var(--fui-color-#{$tone}-border, #{$border});
+}
+
+.toneInfo {
+  @include _tone("info", $fui-color-info-bg, $fui-color-info-text, $fui-color-info-border);
 }
 
-.success {
-  background: var(--fui-color-success-bg, $fui-color-success-bg);
-  border: var(--fui-stroke-hairline, 1px) solid
-    var(--fui-color-success-border, $fui-color-success-border);
-  color: var(--fui-color-success-text, $fui-color-success-text);
+.toneSuccess {
+  @include _tone(
+    "success",
+    $fui-color-success-bg,
+    $fui-color-success-text,
+    $fui-color-success-border
+  );
 }
 
-.warning {
-  background: var(--fui-color-warning-bg, $fui-color-warning-bg);
-  border: var(--fui-stroke-hairline, 1px) solid
-    var(--fui-color-warning-border, $fui-color-warning-border);
-  color: var(--fui-color-warning-text, $fui-color-warning-text);
+.toneWarning {
+  @include _tone(
+    "warning",
+    $fui-color-warning-bg,
+    $fui-color-warning-text,
+    $fui-color-warning-border
+  );
 }
 
-.error {
-  background: var(--fui-color-danger-bg, $fui-color-danger-bg);
-  border: var(--fui-stroke-hairline, 1px) solid
-    var(--fui-color-danger-border, $fui-color-danger-border);
-  color: var(--fui-color-danger-text, $fui-color-danger-text);
+.toneDanger {
+  @include _tone("danger", $fui-color-danger-bg, $fui-color-danger-text, $fui-color-danger-border);
 }
 
 // `emphasis="surface"`: the card keeps the page's own surface and spends the
-// severity only on the hairline and the title. Declared after the severities
-// so it overrides their wash while their border survives.
+// tone only on the hairline and the title.
 .surface {
   background: var(--fui-bg-secondary, $fui-bg-secondary);
   color: var(--fui-text-secondary, $fui-text-secondary);
-}
-
-.surface.info .title {
-  color: var(--fui-color-info-text, $fui-color-info-text);
-}
 
-.surface.success .title {
-  color: var(--fui-color-success-text, $fui-color-success-text);
-}
-
-.surface.warning .title {
-  color: var(--fui-color-warning-text, $fui-color-warning-text);
-}
-
-.surface.error .title {
-  color: var(--fui-color-danger-text, $fui-color-danger-text);
+  .title {
+    color: var(--_alert-ink, var(--fui-color-info-text, #{$fui-color-info-text}));
+  }
 }
 
 .icon {
@@ -69,35 +73,20 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 50%;
+  border-radius: var(--fui-radius-full, #{$fui-radius-full});
+  background-color: var(--_alert-ink, var(--fui-color-info-text, #{$fui-color-info-text}));
   color: var(--fui-text-inverse, $fui-text-inverse);
   font: inherit;
 }
 
 .alert:has(.title) .icon {
-  margin-block-start: var(--fui-stroke-hairline, 1px);
-}
-
-.info .icon {
-  background-color: var(--fui-color-info-text, $fui-color-info-text);
-}
-
-.success .icon {
-  background-color: var(--fui-color-success-text, $fui-color-success-text);
-}
-
-.warning .icon {
-  background-color: var(--fui-color-warning-text, $fui-color-warning-text);
-}
-
-.error .icon {
-  background-color: var(--fui-color-danger-text, $fui-color-danger-text);
+  margin-block-start: var(--fui-stroke-hairline, #{$fui-stroke-hairline});
 }
 
 .body {
   display: grid;
   flex: 1;
-  gap: var(--fui-feedback-text-gap, var(--fui-raw-space-4, 4px));
+  gap: var(--fui-feedback-text-gap, var(--fui-raw-space-4, #{measurements.raw-space(4)}));
   min-inline-size: 0;
 }
 
@@ -107,14 +96,12 @@
 
 .content {
   @include feedback.body;
-
-  opacity: 0.9;
 }
 
 .actions {
   display: flex;
   align-items: center;
-  gap: var(--fui-feedback-transient-gap, var(--fui-raw-space-8, 8px));
+  gap: var(--fui-feedback-transient-gap, var(--fui-raw-space-8, #{measurements.raw-space(8)}));
 }
 
 .close {
@@ -123,13 +110,12 @@
   @include feedback.close;
 
   margin-inline-start: auto;
-  border-radius: var(--fui-radius-sm, $fui-radius-sm);
-  color: inherit;
+  border-radius: var(--fui-radius-l3, $fui-radius-l3);
+  color: color-mix(in srgb, currentColor 60%, transparent);
   line-height: 1;
-  opacity: 0.6;
 
   &:hover {
-    opacity: 1;
+    color: currentColor;
   }
 }
 
@@ -137,12 +123,12 @@
   @include button-reset;
   @include feedback.compact-action;
 
-  border-radius: var(--fui-radius-sm, $fui-radius-sm);
+  border-radius: var(--fui-radius-l3, $fui-radius-l3);
   color: inherit;
   text-decoration: underline;
 
   &:hover {
-    opacity: 0.8;
+    color: color-mix(in srgb, currentColor 80%, transparent);
   }
 
   &:focus-visible {

package/src/components/Alert/index.tsx

@@ -8,20 +8,20 @@ import styles from "./Alert.module.scss";
 // Types
 // ============================================
 
-export type AlertSeverity = "info" | "success" | "warning" | "error";
+export type AlertTone = "info" | "success" | "warning" | "danger";
 
 /**
- * Alert for contextual feedback messages (info, success, warning, error).
+ * Alert for contextual feedback messages (info, success, warning, danger).
  * @see https://usefragments.com/components/alert
  */
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
-  /** Alert severity level. Controls color and default icon.
+  /** Tone. Controls color and default icon.
    * @default "info"
-   * @see https://usefragments.com/components/alert#variants */
-  severity?: AlertSeverity;
-  /** How much surface the severity claims. `tint` washes the whole card in the
-   * severity colour. `surface` keeps the card on the page's own background and
+   * @see https://usefragments.com/components/alert#tones */
+  tone?: AlertTone;
+  /** How much surface the tone claims. `tint` washes the whole card in the
+   * tone colour. `surface` keeps the card on the page's own background and
    * spends the colour only on the hairline and the title — for a standing
    * failure that owns the view, where a full wash would read as a red page.
    * @default "tint" */
@@ -68,7 +68,7 @@ export interface AlertBodyProps extends React.HTMLAttributes<HTMLDivElement> {
 // ============================================
 
 interface AlertContextValue {
-  severity: AlertSeverity;
+  tone: AlertTone;
   titleId: string;
   descId: string;
   dismiss: () => void;
@@ -96,14 +96,21 @@ function composeEventHandlers<E extends { defaultPrevented: boolean }>(
 }
 
 // ============================================
-// Severity Icons
+// Tone Icons
 // ============================================
 
-const severityIcons: Record<AlertSeverity, string> = {
+const toneIcons: Record<AlertTone, string> = {
   info: "i",
   success: "\u2713",
   warning: "!",
-  error: "\u2717",
+  danger: "\u2717",
+};
+
+const TONE_CLASS: Record<AlertTone, string> = {
+  info: styles.toneInfo,
+  success: styles.toneSuccess,
+  warning: styles.toneWarning,
+  danger: styles.toneDanger,
 };
 
 // ============================================
@@ -112,7 +119,7 @@ const severityIcons: Record<AlertSeverity, string> = {
 
 function AlertRoot({
   children,
-  severity = "info",
+  tone = "info",
   emphasis = "tint",
   className,
   ...htmlProps
@@ -129,16 +136,16 @@ function AlertRoot({
 
   const classes = [
     styles.alert,
-    styles[severity],
+    TONE_CLASS[tone],
     emphasis === "surface" ? styles.surface : null,
     className,
   ]
     .filter(Boolean)
     .join(" ");
-  const role = severity === "warning" || severity === "error" ? "alert" : "status";
+  const role = tone === "warning" || tone === "danger" ? "alert" : "status";
 
   const contextValue: AlertContextValue = {
-    severity,
+    tone,
     titleId,
     descId,
     dismiss,
@@ -160,12 +167,12 @@ function AlertRoot({
 }
 
 function AlertIcon({ children, className, ...htmlProps }: AlertIconProps) {
-  const { severity } = useAlertContext();
+  const { tone } = useAlertContext();
   const classes = [styles.icon, className].filter(Boolean).join(" ");
 
   return (
     <span {...htmlProps} className={classes} aria-hidden="true">
-      {children ?? severityIcons[severity]}
+      {children ?? toneIcons[tone]}
     </span>
   );
 }

package/src/components/AppShell/AppShell.contract.json

@@ -70,17 +70,17 @@
     {
       "name": "Default Layout",
       "description": "Header spans the full width above the sidebar.",
-      "code": "import { ChartBar, Gear, House } from '@phosphor-icons/react';\nimport { AppShell } from '@/components/AppShell';\nimport { Box } from '@/components/Box';\nimport { Header } from '@/components/Header';\nimport { Icon } from '@/components/Icon';\nimport { Sidebar } from '@/components/Sidebar';\nimport { Stack } from '@/components/Stack';\nimport { Text } from '@/components/Text';\nimport { ThemeToggle } from '@/components/Theme';\n\n<Box height=\"360px\" overflow=\"hidden\" border rounded=\"md\">\n  <AppShell layout=\"default\">\n    <AppShell.Header>\n      <Header>\n        <Header.Trigger />\n        <Header.Brand>MyApp</Header.Brand>\n        <Header.Nav>\n          <Header.NavItem active>Dashboard</Header.NavItem>\n          <Header.NavItem>Settings</Header.NavItem>\n        </Header.Nav>\n        <Header.Spacer />\n        <Header.Actions>\n          <ThemeToggle size=\"sm\" />\n        </Header.Actions>\n      </Header>\n    </AppShell.Header>\n\n    <AppShell.Sidebar width=\"200px\" collapsible=\"offcanvas\">\n      <Sidebar.Nav>\n        <Sidebar.Section label=\"Menu\">\n          <Sidebar.Item icon={<Icon icon={House} size=\"md\" />} active>Home</Sidebar.Item>\n          <Sidebar.Item icon={<Icon icon={ChartBar} size=\"md\" />}>Analytics</Sidebar.Item>\n          <Sidebar.Item icon={<Icon icon={Gear} size=\"md\" />}>Settings</Sidebar.Item>\n        </Sidebar.Section>\n      </Sidebar.Nav>\n    </AppShell.Sidebar>\n\n    <AppShell.Main padding=\"md\">\n      <Stack gap=\"xs\">\n        <Text as=\"h2\" size=\"xl\" weight=\"semibold\">Default Layout</Text>\n        <Text as=\"p\" color=\"secondary\">\n          Header spans full width. Logo is in the header.\n        </Text>\n      </Stack>\n    </AppShell.Main>\n  </AppShell>\n</Box>"
+      "code": "import { ChartBar, Gear, House } from '@phosphor-icons/react';\nimport { AppShell } from '@/components/AppShell';\nimport { Box } from '@/components/Box';\nimport { Header } from '@/components/Header';\nimport { Icon } from '@/components/Icon';\nimport { Sidebar } from '@/components/Sidebar';\nimport { Stack } from '@/components/Stack';\nimport { Text } from '@/components/Text';\nimport { ThemeToggle } from '@/components/Theme';\n\n<Box height=\"360px\" overflow=\"hidden\" border rounded=\"md\">\n  <AppShell layout=\"default\">\n    <AppShell.Header>\n      <Header>\n        <Header.Trigger />\n        <Header.Brand>MyApp</Header.Brand>\n        <Header.Nav>\n          <Header.NavItem active>Dashboard</Header.NavItem>\n          <Header.NavItem>Settings</Header.NavItem>\n        </Header.Nav>\n        <Header.Spacer />\n        <Header.Actions>\n          <ThemeToggle size=\"sm\" />\n        </Header.Actions>\n      </Header>\n    </AppShell.Header>\n\n    <AppShell.Sidebar width=\"200px\" collapsible=\"offcanvas\">\n      <Sidebar.Nav>\n        <Sidebar.Section label=\"Menu\">\n          <Sidebar.Item icon={<Icon icon={House} size=\"md\" />} active>Home</Sidebar.Item>\n          <Sidebar.Item icon={<Icon icon={ChartBar} size=\"md\" />}>Analytics</Sidebar.Item>\n          <Sidebar.Item icon={<Icon icon={Gear} size=\"md\" />}>Settings</Sidebar.Item>\n        </Sidebar.Section>\n      </Sidebar.Nav>\n    </AppShell.Sidebar>\n\n    <AppShell.Main padding=\"md\">\n      <Stack gap=\"xs\">\n        <Text as=\"h2\" scale=\"xl\" weight=\"semibold\">Default Layout</Text>\n        <Text as=\"p\" color=\"secondary\">\n          Header spans full width. Logo is in the header.\n        </Text>\n      </Stack>\n    </AppShell.Main>\n  </AppShell>\n</Box>"
     },
     {
       "name": "Sidebar Layout",
       "description": "Sidebar runs full height with the header beside it.",
-      "code": "import { ChartBar, Gear, House, MagnifyingGlass } from '@phosphor-icons/react';\nimport { AppShell } from '@/components/AppShell';\nimport { Box } from '@/components/Box';\nimport { Header } from '@/components/Header';\nimport { Icon } from '@/components/Icon';\nimport { Sidebar } from '@/components/Sidebar';\nimport { Stack } from '@/components/Stack';\nimport { Text } from '@/components/Text';\nimport { ThemeToggle } from '@/components/Theme';\n\n<Box height=\"360px\" overflow=\"hidden\" border rounded=\"md\">\n  <AppShell layout=\"sidebar\">\n    <AppShell.Header>\n      <Header>\n        <Header.Trigger />\n        <Header.Search>\n          <Box background=\"secondary\" rounded=\"sm\" paddingX=\"sm\" paddingY=\"xs\">\n            <Stack direction=\"row\" align=\"center\" gap=\"sm\">\n              <Icon icon={MagnifyingGlass} size=\"sm\" variant=\"tertiary\" />\n              <Text size=\"sm\" color=\"tertiary\">Search...</Text>\n            </Stack>\n          </Box>\n        </Header.Search>\n        <Header.Spacer />\n        <Header.Actions>\n          <ThemeToggle size=\"sm\" />\n        </Header.Actions>\n      </Header>\n    </AppShell.Header>\n\n    <AppShell.Sidebar width=\"200px\" collapsible=\"offcanvas\">\n      <Sidebar.Header>\n        <Text weight=\"semibold\">MyApp</Text>\n      </Sidebar.Header>\n      <Sidebar.Nav>\n        <Sidebar.Section label=\"Menu\">\n          <Sidebar.Item icon={<Icon icon={House} size=\"md\" />} active>Home</Sidebar.Item>\n          <Sidebar.Item icon={<Icon icon={ChartBar} size=\"md\" />}>Analytics</Sidebar.Item>\n          <Sidebar.Item icon={<Icon icon={Gear} size=\"md\" />}>Settings</Sidebar.Item>\n        </Sidebar.Section>\n      </Sidebar.Nav>\n      <Sidebar.Footer>v1.0.0</Sidebar.Footer>\n    </AppShell.Sidebar>\n\n    <AppShell.Main padding=\"md\">\n      <Stack gap=\"xs\">\n        <Text as=\"h2\" size=\"xl\" weight=\"semibold\">Sidebar Layout</Text>\n        <Text as=\"p\" color=\"secondary\">\n          Sidebar is full height. Logo is in the sidebar header.\n        </Text>\n      </Stack>\n    </AppShell.Main>\n  </AppShell>\n</Box>"
+      "code": "import { ChartBar, Gear, House, MagnifyingGlass } from '@phosphor-icons/react';\nimport { AppShell } from '@/components/AppShell';\nimport { Box } from '@/components/Box';\nimport { Header } from '@/components/Header';\nimport { Icon } from '@/components/Icon';\nimport { Sidebar } from '@/components/Sidebar';\nimport { Stack } from '@/components/Stack';\nimport { Text } from '@/components/Text';\nimport { ThemeToggle } from '@/components/Theme';\n\n<Box height=\"360px\" overflow=\"hidden\" border rounded=\"md\">\n  <AppShell layout=\"sidebar\">\n    <AppShell.Header>\n      <Header>\n        <Header.Trigger />\n        <Header.Search>\n          <Box background=\"secondary\" rounded=\"sm\" paddingX=\"sm\" paddingY=\"xs\">\n            <Stack direction=\"row\" align=\"center\" gap=\"sm\">\n              <Icon icon={MagnifyingGlass} size=\"sm\" color=\"tertiary\" />\n              <Text scale=\"sm\" color=\"tertiary\">Search...</Text>\n            </Stack>\n          </Box>\n        </Header.Search>\n        <Header.Spacer />\n        <Header.Actions>\n          <ThemeToggle size=\"sm\" />\n        </Header.Actions>\n      </Header>\n    </AppShell.Header>\n\n    <AppShell.Sidebar width=\"200px\" collapsible=\"offcanvas\">\n      <Sidebar.Header>\n        <Text weight=\"semibold\">MyApp</Text>\n      </Sidebar.Header>\n      <Sidebar.Nav>\n        <Sidebar.Section label=\"Menu\">\n          <Sidebar.Item icon={<Icon icon={House} size=\"md\" />} active>Home</Sidebar.Item>\n          <Sidebar.Item icon={<Icon icon={ChartBar} size=\"md\" />}>Analytics</Sidebar.Item>\n          <Sidebar.Item icon={<Icon icon={Gear} size=\"md\" />}>Settings</Sidebar.Item>\n        </Sidebar.Section>\n      </Sidebar.Nav>\n      <Sidebar.Footer>v1.0.0</Sidebar.Footer>\n    </AppShell.Sidebar>\n\n    <AppShell.Main padding=\"md\">\n      <Stack gap=\"xs\">\n        <Text as=\"h2\" scale=\"xl\" weight=\"semibold\">Sidebar Layout</Text>\n        <Text as=\"p\" color=\"secondary\">\n          Sidebar is full height. Logo is in the sidebar header.\n        </Text>\n      </Stack>\n    </AppShell.Main>\n  </AppShell>\n</Box>"
     },
     {
       "name": "With Aside Panel",
       "description": "Adds a right rail for context, filters, or actions.",
-      "code": "import { ChartBar, House } from '@phosphor-icons/react';\nimport { AppShell } from '@/components/AppShell';\nimport { Box } from '@/components/Box';\nimport { Header } from '@/components/Header';\nimport { Icon } from '@/components/Icon';\nimport { Sidebar } from '@/components/Sidebar';\nimport { Stack } from '@/components/Stack';\nimport { Text } from '@/components/Text';\nimport { ThemeToggle } from '@/components/Theme';\n\n<Box height=\"360px\" overflow=\"hidden\" border rounded=\"md\">\n  <AppShell layout=\"default\">\n    <AppShell.Header>\n      <Header>\n        <Header.Brand>App</Header.Brand>\n        <Header.Spacer />\n        <Header.Actions>\n          <ThemeToggle size=\"sm\" />\n        </Header.Actions>\n      </Header>\n    </AppShell.Header>\n\n    <AppShell.Sidebar width=\"180px\" collapsible=\"offcanvas\">\n      <Sidebar.Nav>\n        <Sidebar.Section>\n          <Sidebar.Item icon={<Icon icon={House} size=\"md\" />} active>Home</Sidebar.Item>\n          <Sidebar.Item icon={<Icon icon={ChartBar} size=\"md\" />}>Stats</Sidebar.Item>\n        </Sidebar.Section>\n      </Sidebar.Nav>\n    </AppShell.Sidebar>\n\n    <AppShell.Main padding=\"md\">\n      <Stack gap=\"xs\">\n        <Text as=\"h2\" size=\"xl\" weight=\"semibold\">Main Content</Text>\n        <Text as=\"p\">Content with aside panel on the right.</Text>\n      </Stack>\n    </AppShell.Main>\n\n    <AppShell.Aside width=\"180px\">\n      <Box padding=\"md\">\n        <Stack gap=\"xs\">\n          <Text as=\"h3\" size=\"sm\" weight=\"semibold\">Aside Panel</Text>\n          <Text as=\"p\" size=\"sm\" color=\"secondary\">\n            Additional context, filters, or quick actions.\n          </Text>\n        </Stack>\n      </Box>\n    </AppShell.Aside>\n  </AppShell>\n</Box>"
+      "code": "import { ChartBar, House } from '@phosphor-icons/react';\nimport { AppShell } from '@/components/AppShell';\nimport { Box } from '@/components/Box';\nimport { Header } from '@/components/Header';\nimport { Icon } from '@/components/Icon';\nimport { Sidebar } from '@/components/Sidebar';\nimport { Stack } from '@/components/Stack';\nimport { Text } from '@/components/Text';\nimport { ThemeToggle } from '@/components/Theme';\n\n<Box height=\"360px\" overflow=\"hidden\" border rounded=\"md\">\n  <AppShell layout=\"default\">\n    <AppShell.Header>\n      <Header>\n        <Header.Brand>App</Header.Brand>\n        <Header.Spacer />\n        <Header.Actions>\n          <ThemeToggle size=\"sm\" />\n        </Header.Actions>\n      </Header>\n    </AppShell.Header>\n\n    <AppShell.Sidebar width=\"180px\" collapsible=\"offcanvas\">\n      <Sidebar.Nav>\n        <Sidebar.Section>\n          <Sidebar.Item icon={<Icon icon={House} size=\"md\" />} active>Home</Sidebar.Item>\n          <Sidebar.Item icon={<Icon icon={ChartBar} size=\"md\" />}>Stats</Sidebar.Item>\n        </Sidebar.Section>\n      </Sidebar.Nav>\n    </AppShell.Sidebar>\n\n    <AppShell.Main padding=\"md\">\n      <Stack gap=\"xs\">\n        <Text as=\"h2\" scale=\"xl\" weight=\"semibold\">Main Content</Text>\n        <Text as=\"p\">Content with aside panel on the right.</Text>\n      </Stack>\n    </AppShell.Main>\n\n    <AppShell.Aside width=\"180px\">\n      <Box padding=\"md\">\n        <Stack gap=\"xs\">\n          <Text as=\"h3\" scale=\"sm\" weight=\"semibold\">Aside Panel</Text>\n          <Text as=\"p\" scale=\"sm\" color=\"secondary\">\n            Additional context, filters, or quick actions.\n          </Text>\n        </Stack>\n      </Box>\n    </AppShell.Aside>\n  </AppShell>\n</Box>"
     },
     {
       "name": "Collapsible Icon Sidebar",
@@ -90,22 +90,22 @@
     {
       "name": "Floating Main",
       "description": "Only the main slot floats — rounded, raised, on its own background.",
-      "code": "import { ChartBar, Gear, House, MagnifyingGlass } from '@phosphor-icons/react';\nimport { AppShell } from '@/components/AppShell';\nimport { Box } from '@/components/Box';\nimport { Header } from '@/components/Header';\nimport { Icon } from '@/components/Icon';\nimport { Sidebar } from '@/components/Sidebar';\nimport { Stack } from '@/components/Stack';\nimport { Text } from '@/components/Text';\nimport { ThemeToggle } from '@/components/Theme';\n\n<Box height=\"360px\" overflow=\"hidden\" border rounded=\"md\">\n  <AppShell layout=\"sidebar\">\n    <AppShell.Header>\n      <Header>\n        <Header.Trigger />\n        <Header.Search>\n          <Box background=\"primary\" border rounded=\"sm\" paddingX=\"sm\" paddingY=\"xs\">\n            <Stack direction=\"row\" align=\"center\" gap=\"sm\">\n              <Icon icon={MagnifyingGlass} size=\"sm\" variant=\"tertiary\" />\n              <Text size=\"sm\" color=\"tertiary\">Search...</Text>\n            </Stack>\n          </Box>\n        </Header.Search>\n        <Header.Spacer />\n        <Header.Actions>\n          <ThemeToggle size=\"sm\" />\n        </Header.Actions>\n      </Header>\n    </AppShell.Header>\n\n    <AppShell.Sidebar width=\"200px\" collapsible=\"offcanvas\" variant=\"floating\">\n      <Sidebar.Header>\n        <Text weight=\"semibold\">MyApp</Text>\n      </Sidebar.Header>\n      <Sidebar.Nav>\n        <Sidebar.Section label=\"Menu\">\n          <Sidebar.Item icon={<Icon icon={House} size=\"md\" />} active>Home</Sidebar.Item>\n          <Sidebar.Item icon={<Icon icon={ChartBar} size=\"md\" />}>Analytics</Sidebar.Item>\n          <Sidebar.Item icon={<Icon icon={Gear} size=\"md\" />}>Settings</Sidebar.Item>\n        </Sidebar.Section>\n      </Sidebar.Nav>\n      <Sidebar.Footer>v1.0.0</Sidebar.Footer>\n    </AppShell.Sidebar>\n\n    <AppShell.Main padding=\"md\" variant=\"floating\">\n      <Stack gap=\"xs\">\n        <Text as=\"h2\" size=\"xl\" weight=\"semibold\">Floating Main</Text>\n        <Text as=\"p\" color=\"secondary\">\n          Main content has rounded corners and visual separation from the sidebar.\n        </Text>\n      </Stack>\n    </AppShell.Main>\n  </AppShell>\n</Box>"
+      "code": "import { ChartBar, Gear, House, MagnifyingGlass } from '@phosphor-icons/react';\nimport { AppShell } from '@/components/AppShell';\nimport { Box } from '@/components/Box';\nimport { Header } from '@/components/Header';\nimport { Icon } from '@/components/Icon';\nimport { Sidebar } from '@/components/Sidebar';\nimport { Stack } from '@/components/Stack';\nimport { Text } from '@/components/Text';\nimport { ThemeToggle } from '@/components/Theme';\n\n<Box height=\"360px\" overflow=\"hidden\" border rounded=\"md\">\n  <AppShell layout=\"sidebar\">\n    <AppShell.Header>\n      <Header>\n        <Header.Trigger />\n        <Header.Search>\n          <Box background=\"primary\" border rounded=\"sm\" paddingX=\"sm\" paddingY=\"xs\">\n            <Stack direction=\"row\" align=\"center\" gap=\"sm\">\n              <Icon icon={MagnifyingGlass} size=\"sm\" color=\"tertiary\" />\n              <Text scale=\"sm\" color=\"tertiary\">Search...</Text>\n            </Stack>\n          </Box>\n        </Header.Search>\n        <Header.Spacer />\n        <Header.Actions>\n          <ThemeToggle size=\"sm\" />\n        </Header.Actions>\n      </Header>\n    </AppShell.Header>\n\n    <AppShell.Sidebar width=\"200px\" collapsible=\"offcanvas\" variant=\"floating\">\n      <Sidebar.Header>\n        <Text weight=\"semibold\">MyApp</Text>\n      </Sidebar.Header>\n      <Sidebar.Nav>\n        <Sidebar.Section label=\"Menu\">\n          <Sidebar.Item icon={<Icon icon={House} size=\"md\" />} active>Home</Sidebar.Item>\n          <Sidebar.Item icon={<Icon icon={ChartBar} size=\"md\" />}>Analytics</Sidebar.Item>\n          <Sidebar.Item icon={<Icon icon={Gear} size=\"md\" />}>Settings</Sidebar.Item>\n        </Sidebar.Section>\n      </Sidebar.Nav>\n      <Sidebar.Footer>v1.0.0</Sidebar.Footer>\n    </AppShell.Sidebar>\n\n    <AppShell.Main padding=\"md\" variant=\"floating\">\n      <Stack gap=\"xs\">\n        <Text as=\"h2\" scale=\"xl\" weight=\"semibold\">Floating Main</Text>\n        <Text as=\"p\" color=\"secondary\">\n          Main content has rounded corners and visual separation from the sidebar.\n        </Text>\n      </Stack>\n    </AppShell.Main>\n  </AppShell>\n</Box>"
     },
     {
       "name": "Floating Main & Aside",
       "description": "Two slots float independently; the sidebar stays flush.",
-      "code": "import { ChartBar, Gear, House, MagnifyingGlass } from '@phosphor-icons/react';\nimport { AppShell } from '@/components/AppShell';\nimport { Box } from '@/components/Box';\nimport { Header } from '@/components/Header';\nimport { Icon } from '@/components/Icon';\nimport { Sidebar } from '@/components/Sidebar';\nimport { Stack } from '@/components/Stack';\nimport { Text } from '@/components/Text';\nimport { ThemeToggle } from '@/components/Theme';\n\n<Box height=\"360px\" overflow=\"hidden\" border rounded=\"md\">\n  <AppShell layout=\"sidebar\">\n    <AppShell.Header>\n      <Header>\n        <Header.Trigger />\n        <Header.Search>\n          <Box background=\"primary\" border rounded=\"sm\" paddingX=\"sm\" paddingY=\"xs\">\n            <Stack direction=\"row\" align=\"center\" gap=\"sm\">\n              <Icon icon={MagnifyingGlass} size=\"sm\" variant=\"tertiary\" />\n              <Text size=\"sm\" color=\"tertiary\">Search...</Text>\n            </Stack>\n          </Box>\n        </Header.Search>\n        <Header.Spacer />\n        <Header.Actions>\n          <ThemeToggle size=\"sm\" />\n        </Header.Actions>\n      </Header>\n    </AppShell.Header>\n\n    <AppShell.Sidebar width=\"200px\" collapsible=\"offcanvas\" variant=\"floating\">\n      <Sidebar.Header>\n        <Text weight=\"semibold\">MyApp</Text>\n      </Sidebar.Header>\n      <Sidebar.Nav>\n        <Sidebar.Section label=\"Menu\">\n          <Sidebar.Item icon={<Icon icon={House} size=\"md\" />} active>Home</Sidebar.Item>\n          <Sidebar.Item icon={<Icon icon={ChartBar} size=\"md\" />}>Analytics</Sidebar.Item>\n          <Sidebar.Item icon={<Icon icon={Gear} size=\"md\" />}>Settings</Sidebar.Item>\n        </Sidebar.Section>\n      </Sidebar.Nav>\n      <Sidebar.Footer>v1.0.0</Sidebar.Footer>\n    </AppShell.Sidebar>\n\n    <AppShell.Main padding=\"md\" variant=\"floating\">\n      <Stack gap=\"xs\">\n        <Text as=\"h2\" size=\"xl\" weight=\"semibold\">Floating Main & Aside</Text>\n        <Text as=\"p\" color=\"secondary\">\n          Both main content and aside panel float with rounded corners.\n        </Text>\n      </Stack>\n    </AppShell.Main>\n\n    <AppShell.Aside width=\"200px\" variant=\"floating\">\n      <Box padding=\"md\">\n        <Stack gap=\"xs\">\n          <Text as=\"h3\" size=\"sm\" weight=\"semibold\">Aside Panel</Text>\n          <Text as=\"p\" size=\"sm\" color=\"secondary\">\n            This aside also floats, matching the main content area.\n          </Text>\n        </Stack>\n      </Box>\n    </AppShell.Aside>\n  </AppShell>\n</Box>"
+      "code": "import { ChartBar, Gear, House, MagnifyingGlass } from '@phosphor-icons/react';\nimport { AppShell } from '@/components/AppShell';\nimport { Box } from '@/components/Box';\nimport { Header } from '@/components/Header';\nimport { Icon } from '@/components/Icon';\nimport { Sidebar } from '@/components/Sidebar';\nimport { Stack } from '@/components/Stack';\nimport { Text } from '@/components/Text';\nimport { ThemeToggle } from '@/components/Theme';\n\n<Box height=\"360px\" overflow=\"hidden\" border rounded=\"md\">\n  <AppShell layout=\"sidebar\">\n    <AppShell.Header>\n      <Header>\n        <Header.Trigger />\n        <Header.Search>\n          <Box background=\"primary\" border rounded=\"sm\" paddingX=\"sm\" paddingY=\"xs\">\n            <Stack direction=\"row\" align=\"center\" gap=\"sm\">\n              <Icon icon={MagnifyingGlass} size=\"sm\" color=\"tertiary\" />\n              <Text scale=\"sm\" color=\"tertiary\">Search...</Text>\n            </Stack>\n          </Box>\n        </Header.Search>\n        <Header.Spacer />\n        <Header.Actions>\n          <ThemeToggle size=\"sm\" />\n        </Header.Actions>\n      </Header>\n    </AppShell.Header>\n\n    <AppShell.Sidebar width=\"200px\" collapsible=\"offcanvas\" variant=\"floating\">\n      <Sidebar.Header>\n        <Text weight=\"semibold\">MyApp</Text>\n      </Sidebar.Header>\n      <Sidebar.Nav>\n        <Sidebar.Section label=\"Menu\">\n          <Sidebar.Item icon={<Icon icon={House} size=\"md\" />} active>Home</Sidebar.Item>\n          <Sidebar.Item icon={<Icon icon={ChartBar} size=\"md\" />}>Analytics</Sidebar.Item>\n          <Sidebar.Item icon={<Icon icon={Gear} size=\"md\" />}>Settings</Sidebar.Item>\n        </Sidebar.Section>\n      </Sidebar.Nav>\n      <Sidebar.Footer>v1.0.0</Sidebar.Footer>\n    </AppShell.Sidebar>\n\n    <AppShell.Main padding=\"md\" variant=\"floating\">\n      <Stack gap=\"xs\">\n        <Text as=\"h2\" scale=\"xl\" weight=\"semibold\">Floating Main & Aside</Text>\n        <Text as=\"p\" color=\"secondary\">\n          Both main content and aside panel float with rounded corners.\n        </Text>\n      </Stack>\n    </AppShell.Main>\n\n    <AppShell.Aside width=\"200px\" variant=\"floating\">\n      <Box padding=\"md\">\n        <Stack gap=\"xs\">\n          <Text as=\"h3\" scale=\"sm\" weight=\"semibold\">Aside Panel</Text>\n          <Text as=\"p\" scale=\"sm\" color=\"secondary\">\n            This aside also floats, matching the main content area.\n          </Text>\n        </Stack>\n      </Box>\n    </AppShell.Aside>\n  </AppShell>\n</Box>"
     },
     {
       "name": "Floating Default Layout",
       "description": "Floating works under any layout, including header-on-top.",
-      "code": "import { ChartBar, House } from '@phosphor-icons/react';\nimport { AppShell } from '@/components/AppShell';\nimport { Box } from '@/components/Box';\nimport { Header } from '@/components/Header';\nimport { Icon } from '@/components/Icon';\nimport { Sidebar } from '@/components/Sidebar';\nimport { Stack } from '@/components/Stack';\nimport { Text } from '@/components/Text';\nimport { ThemeToggle } from '@/components/Theme';\n\n<Box height=\"360px\" overflow=\"hidden\" border rounded=\"md\">\n  <AppShell layout=\"default\">\n    <AppShell.Header>\n      <Header>\n        <Header.Brand>MyApp</Header.Brand>\n        <Header.Spacer />\n        <Header.Actions>\n          <ThemeToggle size=\"sm\" />\n        </Header.Actions>\n      </Header>\n    </AppShell.Header>\n\n    <AppShell.Sidebar width=\"180px\" collapsible=\"offcanvas\" variant=\"floating\">\n      <Sidebar.Nav>\n        <Sidebar.Section>\n          <Sidebar.Item icon={<Icon icon={House} size=\"md\" />} active>Home</Sidebar.Item>\n          <Sidebar.Item icon={<Icon icon={ChartBar} size=\"md\" />}>Stats</Sidebar.Item>\n        </Sidebar.Section>\n      </Sidebar.Nav>\n    </AppShell.Sidebar>\n\n    <AppShell.Main padding=\"md\" variant=\"floating\">\n      <Stack gap=\"xs\">\n        <Text as=\"h2\" size=\"xl\" weight=\"semibold\">Floating Default Layout</Text>\n        <Text as=\"p\" color=\"secondary\">\n          Default structure (header on top) with floating main content. Any slot can float in any layout.\n        </Text>\n      </Stack>\n    </AppShell.Main>\n  </AppShell>\n</Box>"
+      "code": "import { ChartBar, House } from '@phosphor-icons/react';\nimport { AppShell } from '@/components/AppShell';\nimport { Box } from '@/components/Box';\nimport { Header } from '@/components/Header';\nimport { Icon } from '@/components/Icon';\nimport { Sidebar } from '@/components/Sidebar';\nimport { Stack } from '@/components/Stack';\nimport { Text } from '@/components/Text';\nimport { ThemeToggle } from '@/components/Theme';\n\n<Box height=\"360px\" overflow=\"hidden\" border rounded=\"md\">\n  <AppShell layout=\"default\">\n    <AppShell.Header>\n      <Header>\n        <Header.Brand>MyApp</Header.Brand>\n        <Header.Spacer />\n        <Header.Actions>\n          <ThemeToggle size=\"sm\" />\n        </Header.Actions>\n      </Header>\n    </AppShell.Header>\n\n    <AppShell.Sidebar width=\"180px\" collapsible=\"offcanvas\" variant=\"floating\">\n      <Sidebar.Nav>\n        <Sidebar.Section>\n          <Sidebar.Item icon={<Icon icon={House} size=\"md\" />} active>Home</Sidebar.Item>\n          <Sidebar.Item icon={<Icon icon={ChartBar} size=\"md\" />}>Stats</Sidebar.Item>\n        </Sidebar.Section>\n      </Sidebar.Nav>\n    </AppShell.Sidebar>\n\n    <AppShell.Main padding=\"md\" variant=\"floating\">\n      <Stack gap=\"xs\">\n        <Text as=\"h2\" scale=\"xl\" weight=\"semibold\">Floating Default Layout</Text>\n        <Text as=\"p\" color=\"secondary\">\n          Default structure (header on top) with floating main content. Any slot can float in any layout.\n        </Text>\n      </Stack>\n    </AppShell.Main>\n  </AppShell>\n</Box>"
     },
     {
       "name": "Custom Backgrounds",
       "description": "Each slot takes its own bg, so regions read apart.",
-      "code": "import { ChartBar, House } from '@phosphor-icons/react';\nimport { AppShell } from '@/components/AppShell';\nimport { Box } from '@/components/Box';\nimport { Header } from '@/components/Header';\nimport { Icon } from '@/components/Icon';\nimport { Sidebar } from '@/components/Sidebar';\nimport { Stack } from '@/components/Stack';\nimport { Text } from '@/components/Text';\nimport { ThemeToggle } from '@/components/Theme';\n\n<Box height=\"360px\" overflow=\"hidden\" border rounded=\"md\">\n  <AppShell layout=\"sidebar\">\n    <AppShell.Header>\n      <Header>\n        <Header.Trigger />\n        <Header.Spacer />\n        <Header.Actions>\n          <ThemeToggle size=\"sm\" />\n        </Header.Actions>\n      </Header>\n    </AppShell.Header>\n\n    <AppShell.Sidebar width=\"200px\" collapsible=\"offcanvas\" bg=\"var(--fui-bg-elevated)\">\n      <Sidebar.Header>\n        <Text weight=\"semibold\">MyApp</Text>\n      </Sidebar.Header>\n      <Sidebar.Nav>\n        <Sidebar.Section label=\"Menu\">\n          <Sidebar.Item icon={<Icon icon={House} size=\"md\" />} active>Home</Sidebar.Item>\n          <Sidebar.Item icon={<Icon icon={ChartBar} size=\"md\" />}>Analytics</Sidebar.Item>\n        </Sidebar.Section>\n      </Sidebar.Nav>\n    </AppShell.Sidebar>\n\n    <AppShell.Main padding=\"md\" bg=\"var(--fui-bg-primary)\">\n      <Stack gap=\"xs\">\n        <Text as=\"h2\" size=\"xl\" weight=\"semibold\">Custom Backgrounds</Text>\n        <Text as=\"p\" color=\"secondary\">\n          Sidebar uses bg-elevated (lighter), main uses bg-primary (darker). Any CSS color or token works.\n        </Text>\n      </Stack>\n    </AppShell.Main>\n\n    <AppShell.Aside width=\"200px\" bg=\"var(--fui-bg-elevated)\">\n      <Box padding=\"md\">\n        <Stack gap=\"xs\">\n          <Text as=\"h3\" size=\"sm\" weight=\"semibold\">Aside Panel</Text>\n          <Text as=\"p\" size=\"sm\" color=\"secondary\">\n            Aside with bg-elevated background matching the sidebar.\n          </Text>\n        </Stack>\n      </Box>\n    </AppShell.Aside>\n  </AppShell>\n</Box>"
+      "code": "import { ChartBar, House } from '@phosphor-icons/react';\nimport { AppShell } from '@/components/AppShell';\nimport { Box } from '@/components/Box';\nimport { Header } from '@/components/Header';\nimport { Icon } from '@/components/Icon';\nimport { Sidebar } from '@/components/Sidebar';\nimport { Stack } from '@/components/Stack';\nimport { Text } from '@/components/Text';\nimport { ThemeToggle } from '@/components/Theme';\n\n<Box height=\"360px\" overflow=\"hidden\" border rounded=\"md\">\n  <AppShell layout=\"sidebar\">\n    <AppShell.Header>\n      <Header>\n        <Header.Trigger />\n        <Header.Spacer />\n        <Header.Actions>\n          <ThemeToggle size=\"sm\" />\n        </Header.Actions>\n      </Header>\n    </AppShell.Header>\n\n    <AppShell.Sidebar width=\"200px\" collapsible=\"offcanvas\" bg=\"var(--fui-bg-elevated)\">\n      <Sidebar.Header>\n        <Text weight=\"semibold\">MyApp</Text>\n      </Sidebar.Header>\n      <Sidebar.Nav>\n        <Sidebar.Section label=\"Menu\">\n          <Sidebar.Item icon={<Icon icon={House} size=\"md\" />} active>Home</Sidebar.Item>\n          <Sidebar.Item icon={<Icon icon={ChartBar} size=\"md\" />}>Analytics</Sidebar.Item>\n        </Sidebar.Section>\n      </Sidebar.Nav>\n    </AppShell.Sidebar>\n\n    <AppShell.Main padding=\"md\" bg=\"var(--fui-bg-primary)\">\n      <Stack gap=\"xs\">\n        <Text as=\"h2\" scale=\"xl\" weight=\"semibold\">Custom Backgrounds</Text>\n        <Text as=\"p\" color=\"secondary\">\n          Sidebar uses bg-elevated (lighter), main uses bg-primary (darker). Any CSS color or token works.\n        </Text>\n      </Stack>\n    </AppShell.Main>\n\n    <AppShell.Aside width=\"200px\" bg=\"var(--fui-bg-elevated)\">\n      <Box padding=\"md\">\n        <Stack gap=\"xs\">\n          <Text as=\"h3\" scale=\"sm\" weight=\"semibold\">Aside Panel</Text>\n          <Text as=\"p\" scale=\"sm\" color=\"secondary\">\n            Aside with bg-elevated background matching the sidebar.\n          </Text>\n        </Stack>\n      </Box>\n    </AppShell.Aside>\n  </AppShell>\n</Box>"
     }
   ],
   "relations": [

package/src/components/AppShell/AppShell.module.scss

@@ -1,7 +1,17 @@
 @use "../../tokens/variables" as *;
+@use "../../tokens/measurements.generated" as measurements;
 @use "../../tokens/mixins" as *;
 @use "../../recipes/navigation" as navigation;
 
+// Tablet band (md ≤ width < lg): the sidebar stays docked but a third column
+// would starve main, so the aside stacks under it. Below md the sidebar
+// becomes an overlay and everything is one column.
+@mixin tablet {
+  @media (min-width: $fui-breakpoint-md) and (max-width: #{$fui-breakpoint-lg - 1px}) {
+    @content;
+  }
+}
+
 // ============================================
 // AppShell Root - CSS Grid Layout
 // ============================================
@@ -25,9 +35,9 @@
     "header header header"
     "sidebar main aside";
   grid-template-columns:
-    var(--appshell-sidebar-width, 240px)
+    var(--appshell-sidebar-width)
     1fr
-    var(--appshell-aside-width, 0px);
+    var(--appshell-aside-width);
   grid-template-rows:
     var(--appshell-header-height, var(--fui-appshell-header-height, $fui-appshell-header-height))
     1fr;
@@ -40,6 +50,19 @@
     transition: none;
   }
 
+  // Tablet: sidebar + main, aside stacked under main
+  @include tablet {
+    grid-template-areas:
+      "header header"
+      "sidebar main"
+      "sidebar aside";
+    grid-template-columns: var(--appshell-sidebar-width) 1fr;
+    grid-template-rows:
+      var(--appshell-header-height, var(--fui-appshell-header-height, $fui-appshell-header-height))
+      1fr
+      auto;
+  }
+
   // Mobile: single column layout
   @include below-md {
     grid-template-areas:
@@ -63,6 +86,14 @@
     "sidebar header header"
     "sidebar main aside";
 
+  @include tablet {
+    grid-template-areas:
+      "sidebar header"
+      "sidebar main"
+      "sidebar aside";
+    grid-template-columns: var(--appshell-sidebar-width) 1fr;
+  }
+
   @include below-md {
     grid-template-areas:
       "header"
@@ -103,12 +134,12 @@
   position: relative;
   height: auto;
   min-height: 100%;
-  z-index: 30;
+  z-index: 1;
   overflow: visible;
   background-color: inherit;
   // Border lives on the grid column so the rail runs the full content
   // height; the sticky inner sidebar is viewport-tall for nav scrolling.
-  border-inline-end: var(--fui-stroke-hairline, 1px) solid
+  border-inline-end: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) solid
     var(
       --fui-sidebar-border,
       var(--fui-border-subtle, var(--fui-border-default, #{$fui-border-default}))
@@ -146,13 +177,13 @@
     width: 0;
     height: 100vh;
     height: 100dvh;
-    z-index: 51;
+    z-index: var(--fui-overlay-layer-modal, #{$fui-overlay-layer-modal});
     border-inline-end: 0;
 
     > aside {
       position: relative;
       top: 0;
-      width: var(--appshell-sidebar-expanded-width, 240px);
+      width: var(--appshell-sidebar-expanded-width);
       height: 100vh;
       height: 100dvh;
     }
@@ -200,10 +231,10 @@
   margin: var(--fui-space-1, $fui-space-1) var(--fui-space-1, $fui-space-1)
     var(--fui-space-1, $fui-space-1) 0;
   padding: var(--fui-space-4, $fui-space-4);
-  border: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
+  border: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) solid var(--fui-border, $fui-border);
   border-radius: var(--fui-radius-xl, $fui-radius-xl);
   background-color: var(--fui-app-main-bg, var(--fui-main-bg, #{$fui-main-bg}));
-  box-shadow: inset 0 var(--fui-stroke-hairline, 1px) 0
+  box-shadow: inset 0 var(--fui-stroke-hairline, #{$fui-stroke-hairline}) 0
     color-mix(in srgb, var(--fui-text-primary, #{$fui-text-primary}) 5%, transparent);
   overflow: hidden auto;
 
@@ -220,7 +251,7 @@
 // Keep these compound rules after `.mainFloating`: the explicit padding prop
 // owns the content inset even when the floating surface supplies its default.
 .main.paddingNone {
-  padding: 0;
+  padding: var(--fui-raw-space-0, #{measurements.raw-space(0)});
 }
 
 .main.paddingSm {
@@ -258,18 +289,19 @@
         var(--fui-appshell-header-height, $fui-appshell-header-height)
       )
   );
-  width: var(--aside-width, 280px);
+  width: var(--aside-width);
   min-height: 0; // Allow shrinking in grid
-  z-index: 30;
+  z-index: 1;
   background-color: var(--fui-app-sidebar-bg, inherit);
   overflow: hidden;
 
-  // Stack below main on mobile
-  @include below-md {
+  // Stack below main on tablet and mobile
+  @include below-lg {
     position: static;
     width: 100%;
     height: auto;
-    border-top: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
+    border-top: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) solid
+      var(--fui-border, $fui-border);
   }
 }
 
@@ -295,14 +327,14 @@
   );
   margin: var(--fui-space-1, $fui-space-1) var(--fui-space-1, $fui-space-1)
     var(--fui-space-1, $fui-space-1) 0;
-  border: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
+  border: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) solid var(--fui-border, $fui-border);
   border-radius: var(--fui-radius-xl, $fui-radius-xl);
   background-color: var(--fui-panel-bg, inherit);
-  box-shadow: inset 0 var(--fui-stroke-hairline, 1px) 0
+  box-shadow: inset 0 var(--fui-stroke-hairline, #{$fui-stroke-hairline}) 0
     color-mix(in srgb, var(--fui-text-primary, #{$fui-text-primary}) 5%, transparent);
   overflow: hidden;
 
-  @include below-md {
+  @include below-lg {
     margin: var(--fui-space-1, $fui-space-1) 0;
     border-left: none;
     border-right: none;

package/src/components/AppShell/index.tsx

@@ -156,7 +156,7 @@ interface AppShellContextValue {
 const AppShellContext = React.createContext<AppShellContextValue>({
   layout: "default",
   structure: "default",
-  headerHeight: "56px",
+  headerHeight: "var(--fui-appshell-header-height, 56px)",
   sidebarWidth: "240px",
   sidebarCollapsedWidth: "var(--fui-navigation-sidebar-collapsed-width, 56px)",
   asideWidth: "280px",
@@ -204,7 +204,7 @@ interface ExtractedConfig {
 
 function extractConfigFromChildren(children: React.ReactNode): ExtractedConfig {
   const config: ExtractedConfig = {
-    headerHeight: "56px",
+    headerHeight: "var(--fui-appshell-header-height, 56px)",
     sidebarWidth: "240px",
     sidebarCollapsedWidth: "var(--fui-navigation-sidebar-collapsed-width, 56px)",
     sidebarCollapsible: "icon",

package/src/components/Avatar/Avatar.module.scss

@@ -50,7 +50,6 @@
 .initials {
   font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
   color: var(--avatar-initials-color, var(--fui-text-inverse, $fui-text-inverse));
-  text-transform: uppercase;
   line-height: 1;
 }