@womp/kookie-ui 0.14.4 → 0.15.0

package/src/components/_internal/base-menu.props.ts

@@ -4,8 +4,6 @@ import { colorPropDef } from '../../props/color.prop.js';
 import type { PropDef } from '../../props/prop-def.js';
 
 const contentSizes = ['1', '2'] as const;
-const contentVariants = ['solid', 'soft'] as const;
-const panelBackgrounds = ['solid', 'translucent'] as const;
 const materials = ['solid', 'translucent'] as const;
 const submenuBehaviors = ['cascade', 'drill-down'] as const;
 
@@ -18,31 +16,15 @@ const baseMenuSharedPropDefs = {
     default: '2',
     responsive: true,
   },
-  variant: {
-    type: 'enum',
-    className: 'rt-variant',
-    values: contentVariants,
-    default: 'soft',
-  },
   material: {
     type: 'enum',
     values: materials,
     default: undefined,
   },
-  /**
-   * @deprecated Use `material` prop instead. This prop will be removed in a future version.
-   */
-  panelBackground: {
-    type: 'enum',
-    values: panelBackgrounds,
-    default: undefined,
-  },
   ...colorPropDef,
 } satisfies {
   size: PropDef<(typeof contentSizes)[number]>;
-  variant: PropDef<(typeof contentVariants)[number]>;
   material: PropDef<(typeof materials)[number] | undefined>;
-  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;
 };
 
 // Content-specific props (includes submenuBehavior)
@@ -62,9 +44,7 @@ const baseMenuContentPropDefs = {
   },
 } satisfies {
   size: PropDef<(typeof contentSizes)[number]>;
-  variant: PropDef<(typeof contentVariants)[number]>;
   material: PropDef<(typeof materials)[number] | undefined>;
-  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;
   submenuBehavior: PropDef<(typeof submenuBehaviors)[number]>;
 };
 

package/src/components/_internal/base-menu.utils.tsx

@@ -43,19 +43,9 @@ function useResolvedResponsiveValue<T>(value: Responsive<T> | undefined, default
 
 type MenuMaterial = 'solid' | 'translucent';
 
-/**
- * The menu surface material. The component props win, then the nearest
- * Theme's `material`. Theme keeps `panelBackground` in sync with `material` at
- * the root, but a nested `<Theme material="solid">` only updates `material`,
- * so reading the deprecated `panelBackground` from the theme gave the wrong
- * surface there.
- */
-function resolveMenuMaterial(
-  material: MenuMaterial | undefined,
-  panelBackground: MenuMaterial | undefined,
-  theme: { material: MenuMaterial; panelBackground: MenuMaterial },
-): MenuMaterial {
-  return material ?? panelBackground ?? theme.material ?? theme.panelBackground;
+/** The menu surface material: the component's prop, then the nearest Theme's `material`. */
+function resolveMenuMaterial(material: MenuMaterial | undefined, theme: { material: MenuMaterial }): MenuMaterial {
+  return material ?? theme.material;
 }
 
 /** Content padding per menu size, in px at 100% scaling (see base-menu.css). */

package/src/components/_internal/base-radio.css

@@ -15,26 +15,12 @@
   border-radius: var(--skeleton-radius);
   --skeleton-radius-override: 100%;
 
-
   /* Theme-level translucent override */
-  :where([data-panel-background='translucent'], [data-material='translucent']) & {
-    backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
-  }
 
   /* Prevent backdrop-filter stacking with parents */
   isolation: isolate;
 
   /* Component-level overrides */
-  &:where([data-panel-background='solid'], [data-material='solid']) {
-    backdrop-filter: none;
-    --backdrop-filter-components: none;
-  }
-  
-  &:where([data-panel-background='translucent'], [data-material='translucent']) {
-    backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
-  }
 
   &:where(:disabled, [data-disabled]) {
     cursor: var(--cursor-disabled);
@@ -46,7 +32,6 @@
     height: var(--radio-size);
     width: var(--radio-size);
     border-radius: 100%;
-    transition: var(--transition-radio);
   }
 
   &::after {
@@ -57,7 +42,6 @@
     border-radius: 100%;
     /* Scale via transform to achieve perfect sub-pixel positioning */
     transform: scale(0.4);
-    transition: var(--transition-radio);
   }
 
   &:where(:checked, [data-state='checked']) {
@@ -131,39 +115,19 @@
   &:where(:not(:checked), [data-state='unchecked'])::before {
     color: var(--accent-ink);
     background-color: var(--color-surface-solid);
-    box-shadow: var(--shadow-2);
+    box-shadow: var(--shadow-2)
 
     /* Theme-level translucent override */
-    :where([data-panel-background='translucent'], [data-material='translucent']) & {
-      background-color: var(--color-surface-translucent);
-    }
 
     /* Component-level overrides (higher specificity) */
-    &:where([data-panel-background='solid'], [data-material='solid']) {
-      background-color: var(--color-surface-solid);
-    }
-
-    &:where([data-panel-background='translucent'], [data-material='translucent']) {
-      background-color: var(--color-surface-translucent);
-    }
   }
   
   &:where(:checked, [data-state='checked'])::before {
-    background-color: var(--accent-3);
+    background-color: var(--accent-3)
 
     /* Theme-level translucent override */
-    :where([data-panel-background='translucent'], [data-material='translucent']) & {
-      background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
-    }
 
     /* Component-level overrides (higher specificity) */
-    &:where([data-panel-background='solid'], [data-material='solid']) {
-      background-color: var(--accent-3);
-    }
-
-    &:where([data-panel-background='translucent'], [data-material='translucent']) {
-      background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
-    }
   }
   &::after {
     background-color: var(--accent-ink);
@@ -173,21 +137,11 @@
     top: calc(var(--raised-elevation-offset) + var(--raised-active-padding-offset-1));
     
     &::before {
-      background-color: var(--accent-3);
+      background-color: var(--accent-3)
 
       /* Theme-level translucent override for active */
-      :where([data-panel-background='translucent'], [data-material='translucent']) & {
-        background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
-      }
 
       /* Component-level overrides for active */
-      &:where([data-panel-background='solid'], [data-material='solid']) {
-        background-color: var(--accent-3);
-      }
-
-      &:where([data-panel-background='translucent'], [data-material='translucent']) {
-        background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
-      }
     }
   }
 
@@ -208,21 +162,11 @@
 
 .rt-BaseRadioRoot:where(.rt-variant-soft) {
   &::before {
-    background-color: var(--accent-3);
+    background-color: var(--accent-3)
 
     /* Theme-level translucent override */
-    :where([data-panel-background='translucent'], [data-material='translucent']) & {
-      background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
-    }
 
     /* Component-level overrides (higher specificity) */
-    &:where([data-panel-background='solid'], [data-material='solid']) {
-      background-color: var(--accent-3);
-    }
-
-    &:where([data-panel-background='translucent'], [data-material='translucent']) {
-      background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
-    }
   }
   &::after {
     background-color: var(--accent-ink);
@@ -241,50 +185,25 @@
   }
 }
 
-
-
 /* outline */
 
 .rt-BaseRadioRoot:where(.rt-variant-outline) {
   &:where(:not(:checked), [data-state='unchecked'])::before {
     box-shadow: inset 0 0 0 1px var(--accent-6);
-    color: var(--accent-ink);
+    color: var(--accent-ink)
 
     /* Theme-level translucent override */
-    :where([data-panel-background='translucent'], [data-material='translucent']) & {
-      box-shadow: inset 0 0 0 1px var(--accent-a6);
-    }
 
     /* Component-level overrides (higher specificity) */
-    &:where([data-panel-background='solid'], [data-material='solid']) {
-      box-shadow: inset 0 0 0 1px var(--accent-6);
-    }
-
-    &:where([data-panel-background='translucent'], [data-material='translucent']) {
-      box-shadow: inset 0 0 0 1px var(--accent-a6);
-    }
   }
 
   &:where(:checked, [data-state='checked'])::before {
     background-color: var(--accent-2);
-    box-shadow: inset 0 0 0 1px var(--accent-7);
+    box-shadow: inset 0 0 0 1px var(--accent-7)
 
     /* Theme-level translucent override */
-    :where([data-panel-background='translucent'], [data-material='translucent']) & {
-      background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
-      box-shadow: inset 0 0 0 1px var(--accent-a7);
-    }
 
     /* Component-level overrides (higher specificity) */
-    &:where([data-panel-background='solid'], [data-material='solid']) {
-      background-color: var(--accent-2);
-      box-shadow: inset 0 0 0 1px var(--accent-7);
-    }
-
-    &:where([data-panel-background='translucent'], [data-material='translucent']) {
-      background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
-      box-shadow: inset 0 0 0 1px var(--accent-a7);
-    }
   }
   &::after {
     background-color: var(--accent-ink);
@@ -304,46 +223,20 @@
 .rt-BaseRadioRoot:where(.rt-variant-surface) {
   &:where(:not(:checked), [data-state='unchecked'])::before {
     background-color: var(--accent-2);
-    box-shadow: inset 0 0 0 1px var(--accent-6);
+    box-shadow: inset 0 0 0 1px var(--accent-6)
 
     /* Theme-level translucent override */
-    :where([data-panel-background='translucent'], [data-material='translucent']) & {
-      background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
-      box-shadow: inset 0 0 0 1px var(--accent-a6);
-    }
 
     /* Component-level overrides (higher specificity) */
-    &:where([data-panel-background='solid'], [data-material='solid']) {
-      background-color: var(--accent-2);
-      box-shadow: inset 0 0 0 1px var(--accent-6);
-    }
-
-    &:where([data-panel-background='translucent'], [data-material='translucent']) {
-      background-color: color-mix(in srgb, var(--accent-a2), var(--accent-2) 60%);
-      box-shadow: inset 0 0 0 1px var(--accent-a6);
-    }
   }
 
   &:where(:checked, [data-state='checked'])::before {
     background-color: var(--accent-3);
-    box-shadow: inset 0 0 0 1px var(--accent-8);
+    box-shadow: inset 0 0 0 1px var(--accent-8)
 
     /* Theme-level translucent override */
-    :where([data-panel-background='translucent'], [data-material='translucent']) & {
-      background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
-      box-shadow: inset 0 0 0 1px var(--accent-a8);
-    }
 
     /* Component-level overrides (higher specificity) */
-    &:where([data-panel-background='solid'], [data-material='solid']) {
-      background-color: var(--accent-3);
-      box-shadow: inset 0 0 0 1px var(--accent-8);
-    }
-
-    &:where([data-panel-background='translucent'], [data-material='translucent']) {
-      background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
-      box-shadow: inset 0 0 0 1px var(--accent-a8);
-    }
   }
   &::after {
     background-color: var(--accent-ink);

package/src/components/_internal/base-radio.props.ts

@@ -1,21 +1,17 @@
-import { parseVariant } from '../../helpers/parse-variant.js';
 import { colorPropDef } from '../../props/color.prop.js';
 
 import type { PropDef } from '../../props/prop-def.js';
 
 const sizes = ['1', '2', '3'] as const;
-const variants = ['raised', 'solid', 'soft', 'outline', 'surface', 'classic'] as const;
-const materials = ['solid', 'translucent'] as const;
+const variants = ['raised', 'solid', 'soft', 'outline', 'surface'] as const;
 
 const baseRadioPropDefs = {
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
-  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised', parseValue: parseVariant },
-  material: { type: 'enum', values: materials, default: undefined },
+  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised' },
   ...colorPropDef,
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;
-  material: PropDef<(typeof materials)[number] | undefined>;
 };
 
 export { baseRadioPropDefs };

package/src/components/_internal/base-sidebar-menu.css

@@ -46,10 +46,6 @@
   /* No default border radius - inherited from size-specific rules */
 
   /* Step 3: restrict to paint-only transitions to avoid Chrome compositing nudge */
-  transition:
-    background-color var(--motion-duration-micro) var(--motion-ease-standard),
-    color var(--motion-duration-small) var(--motion-ease-standard),
-    font-weight var(--motion-duration-small) var(--motion-ease-standard);
 
   /* Fix sticky text highlighting after selection in Firefox */
   user-select: none;
@@ -99,9 +95,6 @@
   }
 
   /* Reduced motion support */
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
 }
 
 /* Sidebar Menu Sub Components - Radix Accordion */
@@ -111,9 +104,6 @@
 
 /* Accordion trigger icon rotation */
 .rt-SidebarMenuSubTrigger {
-  & :where(.rt-SidebarMenuSubTriggerIcon) {
-    transition: transform var(--motion-duration-micro) var(--motion-ease-standard);
-  }
 
   &:where([data-state='open']) :where(.rt-SidebarMenuSubTriggerIcon) {
     transform: rotate(90deg);
@@ -129,31 +119,6 @@
   }
 
   /* Radix Accordion animation support */
-  &:where([data-state='open']) {
-    animation: rt-sidebar-slide-down var(--motion-duration-small) var(--motion-ease-standard);
-  }
-
-  &:where([data-state='closed']) {
-    animation: rt-sidebar-slide-up var(--motion-duration-small) var(--motion-ease-standard);
-  }
-}
-
-@keyframes rt-sidebar-slide-down {
-  from {
-    height: 0;
-  }
-  to {
-    height: var(--radix-accordion-content-height);
-  }
-}
-
-@keyframes rt-sidebar-slide-up {
-  from {
-    height: var(--radix-accordion-content-height);
-  }
-  to {
-    height: 0;
-  }
 }
 
 .rt-SidebarMenuSubList {

package/src/components/_internal/base-sidebar.css

@@ -8,44 +8,7 @@
 /* Removed Sidebar Provider (unused) */
 
 /* Sidebar Root Container */
-.rt-SidebarRoot {
-  --sidebar-base-border-radius: 0; /* Default to no radius */
-
-  width: 100%;
-  height: 100%;
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
-
-  /* Make sure Theme wrapper also participates in flex layout */
-  & :where(.radix-themes) {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    height: 100%;
-  }
-}
-
 /* Sidebar Container */
-.rt-SidebarContainer {
-  /*
-   * This surface blurs its own backdrop, which makes it the backdrop root for
-   * everything inside it. A component nested here would re-blur an already
-   * blurred, already flat surface for the full cost of another blur pass, so
-   * switch the component filter off for the subtree. See tokens/blur.css.
-   */
-  --backdrop-filter-components-enabled: none;
-  --sidebar-base-border-radius: 0; /* Default to no radius */
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-  background-color: var(--color-panel);
-  backdrop-filter: var(--backdrop-filter-panel);
-  border-radius: inherit;
-  flex: 1;
-}
-
 /* Sidebar Header */
 .rt-SidebarHeader {
   display: flex;

package/src/components/_internal/base-tab-list.css

@@ -21,7 +21,6 @@
   flex-shrink: 0;
   position: relative;
   user-select: none;
-  transition: var(--transition-tabs);
   scroll-behavior: smooth;
 }
 
@@ -30,7 +29,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: var(--transition-tabs), var(--transition-background-blur);
 }
 
 .rt-BaseTabListTriggerInner {
@@ -39,14 +37,14 @@
   :where(.rt-BaseTabListTrigger[data-state='inactive'], .rt-TabNavLink:not([data-active])) & {
     letter-spacing: var(--tab-inactive-letter-spacing);
     word-spacing: var(--tab-inactive-word-spacing);
-    transition-delay: var(--duration-1); /* 100ms - allows staggered effect vs active state's 0ms */
+ /* 100ms - allows staggered effect vs active state's 0ms */
   }
 
   :where(.rt-BaseTabListTrigger[data-state='active'], .rt-TabNavLink[data-active]) & {
     font-weight: var(--font-weight-medium);
     letter-spacing: var(--tab-active-letter-spacing);
     word-spacing: var(--tab-active-word-spacing);
-    transition-delay: 0ms; /* Immediate transition for active state */
+ /* Immediate transition for active state */
   }
 }
 
@@ -188,19 +186,19 @@
       background-color: var(--gray-a3);
 
       /* Theme-level translucent override for hover */
-      :where([data-panel-background='translucent']) & {
+      :where([data-material='translucent']) & {
         background-color: var(--gray-a3);
         backdrop-filter: var(--backdrop-filter-components);
       }
 
       /* Component-level overrides for hover */
-      :where(.rt-BaseTabList[data-panel-background='solid']) & {
+      :where(.rt-BaseTabList[data-material='solid']) & {
         background-color: var(--gray-a3);
         backdrop-filter: none;
         --backdrop-filter-components: none;
       }
 
-      :where(.rt-BaseTabList[data-panel-background='translucent']) & {
+      :where(.rt-BaseTabList[data-material='translucent']) & {
         background-color: var(--gray-a3);
         backdrop-filter: var(--backdrop-filter-components);
         --backdrop-filter-components: var(--backdrop-filter-components-enabled);
@@ -216,19 +214,19 @@
       background-color: var(--accent-a3);
 
       /* Theme-level translucent override for focus+hover */
-      :where([data-panel-background='translucent']) & {
+      :where([data-material='translucent']) & {
         background-color: var(--accent-a3);
         backdrop-filter: var(--backdrop-filter-components);
       }
 
       /* Component-level overrides for focus+hover */
-      :where(.rt-BaseTabList[data-panel-background='solid']) & {
+      :where(.rt-BaseTabList[data-material='solid']) & {
         background-color: var(--accent-a3);
         backdrop-filter: none;
         --backdrop-filter-components: none;
       }
 
-      :where(.rt-BaseTabList[data-panel-background='translucent']) & {
+      :where(.rt-BaseTabList[data-material='translucent']) & {
         background-color: var(--accent-a3);
         backdrop-filter: var(--backdrop-filter-components);
         --backdrop-filter-components: var(--backdrop-filter-components-enabled);
@@ -253,10 +251,6 @@
     right: 0;
     background-color: var(--accent-solid-indicator);
     transform-origin: center;
-    transition: 
-      transform var(--duration-3) var(--ease-3),
-      opacity var(--duration-2) var(--ease-1),
-      background-color var(--duration-2) var(--ease-1);
   }
 }
 

package/src/components/_internal/base-tab-list.props.ts

@@ -5,7 +5,7 @@ import type { PropDef } from '../../props/prop-def.js';
 const sizes = ['1', '2', '3', '4'] as const;
 const wrapValues = ['nowrap', 'wrap', 'wrap-reverse'] as const;
 const justifyValues = ['start', 'center', 'end'] as const;
-const panelBackgrounds = ['solid', 'translucent'] as const;
+const materials = ['solid', 'translucent'] as const;
 
 const baseTabListPropDefs = {
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
@@ -22,15 +22,12 @@ const baseTabListPropDefs = {
     responsive: true,
   },
   ...colorPropDef,
-  material: { type: 'enum', values: panelBackgrounds, default: undefined },
-  /** @deprecated Use `material`. Removed in 0.15.0. */
-  panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },
+  material: { type: 'enum', values: materials, default: undefined },
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   wrap: PropDef<(typeof wrapValues)[number]>;
   justify: PropDef<(typeof justifyValues)[number]>;
-  material: PropDef<(typeof panelBackgrounds)[number] | undefined>;
-  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;
+  material: PropDef<(typeof materials)[number] | undefined>;
 };
 
 export { baseTabListPropDefs };

package/src/components/_internal/shell-pane.tsx

@@ -255,11 +255,10 @@ export function paneAttributes(pane: PaneController, presentationAttributes: Rec
   const { state, value, presentation, shown } = pane;
   return {
     ...presentationAttributes,
-    'data-state': state === 'thin' ? 'open' : state,
-    'data-thin': state === 'thin' ? '' : undefined,
+    'data-state': state,
     ...(state === 'auto' ? tableAttributes('auto', pane.autoTable) : {}),
     'data-presentation': presentation,
-    'data-mode': value === undefined ? undefined : value === 'closed' ? 'collapsed' : value === 'thin' ? 'thin' : 'expanded',
+    'data-mode': value === undefined ? undefined : value === 'closed' ? 'collapsed' : 'expanded',
     // Kept for stylesheets written against 0.7: set while a stacked pane is open.
     'data-open': presentation === 'stacked' && shown ? '' : undefined,
     'data-peek': pane.peeking ? '' : undefined,

package/src/components/_internal/shell-sidebar.tsx

@@ -10,7 +10,6 @@ import { splitHandles, useResizablePane, type SizeChangeMeta } from './shell-res
 import { useInsetRegistration, warnOnce, type PaneValue } from './shell-store.js';
 import { navigationRest, startAnchoredGrowth, withoutRemovedPaneProps } from './shell-rest.js';
 import { readBreakpoint } from '../../hooks/use-breakpoint.js';
-import { warnDeprecated } from '../../helpers/warn-deprecated.js';
 import { PaneChromeScope } from './pane-chrome.js';
 import type { Breakpoint, CSSPropertiesWithVars, PaneBaseProps, Responsive, SidebarMode } from '../shell.types.js';
 
@@ -18,10 +17,6 @@ type SidebarStateChangeMeta = { reason: 'init' | 'toggle' | 'responsive' | 'dism
 type SidebarControlledProps = { state: Responsive<SidebarMode>; onStateChange?: (state: SidebarMode, meta: SidebarStateChangeMeta) => void; defaultState?: never };
 type SidebarUncontrolledProps = { defaultState?: SidebarMode | Partial<Record<Breakpoint, SidebarMode>>; onStateChange?: (state: SidebarMode, meta: SidebarStateChangeMeta) => void; state?: never };
 type SidebarPublicProps = PaneBaseProps & {
-  /** @deprecated Thin mode is removed in 0.15.0. Use `Shell.Rail`. */
-  thinSize?: number;
-  /** `both` (deprecated with thin mode; `single` is the 0.15.0 behaviour) toggles through collapsed, thin and expanded; `single` between collapsed and the default. */
-  toggleModes?: 'both' | 'single';
   size?: number | string;
   defaultSize?: number | string;
   onSizeChange?: (size: number, meta: SizeChangeMeta) => void;
@@ -33,8 +28,8 @@ type SidebarPublicProps = PaneBaseProps & {
 
 type SidebarComponent = React.ForwardRefExoticComponent<SidebarPublicProps & React.RefAttributes<HTMLDivElement>> & { Handle: typeof SidebarHandle };
 
-const toValue = (mode: SidebarMode): PaneValue => (mode === 'collapsed' ? 'closed' : mode === 'thin' ? 'thin' : 'open');
-const toMode = (value: PaneValue): SidebarMode => (value === 'closed' ? 'collapsed' : value === 'thin' ? 'thin' : 'expanded');
+const toValue = (mode: SidebarMode): PaneValue => (mode === 'collapsed' ? 'closed' : 'open');
+const toMode = (value: PaneValue): SidebarMode => (value === 'closed' ? 'collapsed' : 'expanded');
 
 function modeToValue(state: Responsive<SidebarMode> | undefined): PaneValue | Partial<Record<Breakpoint, PaneValue>> | undefined {
   if (state === undefined) return undefined;
@@ -51,12 +46,6 @@ const SIDEBAR_PROP_NAMES = { controlled: 'state', default: 'defaultState' };
 /** Since 0.8.0 the Sidebar is in the frame from 768px up, the boundary kookie-ui-v2 uses everywhere. It was 1024px. */
 const SIDEBAR_DEFAULT_PRESENTATION = { initial: 'overlay', sm: 'fixed' } as const;
 
-const toggleBoth = (current: PaneValue): PaneValue => (current === 'closed' ? 'thin' : current === 'thin' ? 'open' : 'closed');
-const toggleSingle = (current: PaneValue, defaultHere: PaneValue | undefined): PaneValue => {
-  const target: PaneValue = defaultHere === 'thin' ? 'thin' : 'open';
-  if (current === 'closed') return target;
-  return current === target ? 'closed' : target;
-};
 
 export const Sidebar = React.forwardRef<HTMLDivElement, SidebarPublicProps>((props, ref) => {
   const {
@@ -79,8 +68,6 @@ export const Sidebar = React.forwardRef<HTMLDivElement, SidebarPublicProps>((pro
     persistence,
     children,
     style,
-    thinSize = 64,
-    toggleModes = 'both',
     state,
     defaultState,
     onStateChange,
@@ -105,19 +92,12 @@ export const Sidebar = React.forwardRef<HTMLDivElement, SidebarPublicProps>((pro
     presentationTable: table,
     builtIn: navigationRest,
     onChange: (value, reason) => onStateChange?.(toMode(value), { reason }),
-    toggleNext: toggleModes === 'single' ? toggleSingle : toggleBoth,
     onExpand,
     onCollapse,
     size: expandedSize,
   });
   useInsetRegistration('sidebar', inset);
 
-  if (props.thinSize !== undefined || pane.value === 'thin') {
-    warnDeprecated(
-      "Shell.Sidebar's thin mode is deprecated and will be removed in 0.15.0. Put the rows in Shell.Rail, which draws them as tiles, and use toggleModes=\"single\" so the toggle skips thin.",
-    );
-  }
-
   React.useEffect(() => {
     if (snapPoints !== undefined || collapseThreshold !== undefined || paneId !== undefined || persistence !== undefined) {
       warnOnce('Shell.Sidebar: `snapPoints`, `collapseThreshold`, `paneId` and `persistence` are deprecated and are removed in 1.0. Keep the size in your own state with `size`/`onSizeChange`.');
@@ -160,18 +140,13 @@ export const Sidebar = React.forwardRef<HTMLDivElement, SidebarPublicProps>((pro
   });
 
   const { handles, content } = splitHandles(children, SidebarHandle);
-  // A thin sidebar has no handle: the thin width is a mode, not a size.
   const handle =
-    resizable && pane.value !== 'closed' && pane.value !== 'thin' && !pane.overlaying ? (
+    resizable && pane.value !== 'closed' && !pane.overlaying ? (
       <PaneResizeContext.Provider value={resize}>{handles.length > 0 ? handles : <PaneHandle />}</PaneResizeContext.Provider>
     ) : null;
 
-  // A peek previews the width the next toggle would open to.
-  const peekWidth = pane.peeking
-    ? (toggleModes === 'single' ? toggleSingle : toggleBoth)('closed', pane.defaultHereNow()) === 'thin'
-      ? `${thinSize}px`
-      : `var(--sidebar-size, ${expandedSize}px)`
-    : undefined;
+  // A peek previews the width the next toggle opens to.
+  const peekWidth = pane.peeking ? `var(--sidebar-size, ${expandedSize}px)` : undefined;
 
   return (
     <div
@@ -186,7 +161,6 @@ export const Sidebar = React.forwardRef<HTMLDivElement, SidebarPublicProps>((pro
         {
           ...style,
           '--sidebar-expanded-size': `${expandedSize}px`,
-          '--sidebar-thin-size': `${thinSize}px`,
           '--sidebar-min-size': `${minSize}px`,
           '--sidebar-max-size': `${maxSize}px`,
           ...(peekWidth ? { '--peek-sidebar-width': peekWidth } : {}),