@kushagradhawan/kookie-ui 0.1.109 → 0.1.110

package/dist/esm/components/sidebar.props.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/sidebar.props.tsx"],
-  "sourcesContent": ["import { asChildPropDef } from '../props/as-child.prop.js';\nimport { colorPropDef } from '../props/color.prop.js';\nimport { highContrastPropDef } from '../props/high-contrast.prop.js';\n\nimport type { PropDef } from '../props/prop-def.js';\n\n// Re-export base menu props for sidebar menu components\nexport {\n  baseMenuContentPropDefs as sidebarContentPropDefs,\n  baseMenuItemPropDefs as sidebarItemPropDefs,\n  baseMenuCheckboxItemPropDefs as sidebarCheckboxItemPropDefs,\n  baseMenuRadioItemPropDefs as sidebarRadioItemPropDefs,\n} from './_internal/base-menu.props.js';\n\n// Sidebar container props\nconst sizes = ['1', '2'] as const;\nconst variants = ['soft', 'outline', 'surface', 'ghost'] as const;\nconst menuVariants = ['solid', 'soft'] as const;\nconst types = ['sidebar'] as const;\nconst sides = ['left', 'right'] as const;\nconst collapsibleModes = ['offcanvas', 'icon', 'none'] as const;\nconst layouts = ['rail', 'panel'] as const;\n\nconst sidebarPropDefs = {\n  ...asChildPropDef,\n  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },\n  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'outline' },\n  menuVariant: {\n    type: 'enum',\n    className: 'rt-menu-variant',\n    values: menuVariants,\n    default: 'soft',\n  },\n  type: { type: 'enum', className: 'rt-type', values: types, default: 'sidebar' },\n  side: { type: 'enum', className: 'rt-side', values: sides, default: 'left' },\n  collapsible: {\n    type: 'enum',\n    className: 'rt-collapsible',\n    values: collapsibleModes,\n    default: 'offcanvas',\n  },\n  layout: { type: 'enum', className: 'rt-layout', values: layouts, default: undefined },\n  panelBackground: { type: 'enum', values: ['solid', 'translucent'], default: undefined },\n  ...colorPropDef,\n  ...highContrastPropDef,\n} satisfies {\n  size: PropDef<(typeof sizes)[number]>;\n  variant: PropDef<(typeof variants)[number]>;\n  menuVariant: PropDef<(typeof menuVariants)[number]>;\n  type: PropDef<(typeof types)[number]>;\n  side: PropDef<(typeof sides)[number]>;\n  collapsible: PropDef<(typeof collapsibleModes)[number]>;\n  layout: PropDef<(typeof layouts)[number]>;\n  panelBackground: PropDef<'solid' | 'translucent'>;\n};\n\nexport { sidebarPropDefs };\n"],
-  "mappings": "AAAA,OAAS,kBAAAA,MAAsB,4BAC/B,OAAS,gBAAAC,MAAoB,yBAC7B,OAAS,uBAAAC,MAA2B,iCAKpC,OAC6B,2BAA3BC,EACwB,wBAAxBC,EACgC,gCAAhCC,EAC6B,6BAA7BC,MACK,iCAGP,MAAMC,EAAQ,CAAC,IAAK,GAAG,EACjBC,EAAW,CAAC,OAAQ,UAAW,UAAW,OAAO,EACjDC,EAAe,CAAC,QAAS,MAAM,EAC/BC,EAAQ,CAAC,SAAS,EAClBC,EAAQ,CAAC,OAAQ,OAAO,EACxBC,EAAmB,CAAC,YAAa,OAAQ,MAAM,EAC/CC,EAAU,CAAC,OAAQ,OAAO,EAE1BC,EAAkB,CACtB,GAAGd,EACH,KAAM,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQO,EAAO,QAAS,IAAK,WAAY,EAAK,EAC5F,QAAS,CAAE,KAAM,OAAQ,UAAW,aAAc,OAAQC,EAAU,QAAS,SAAU,EACvF,YAAa,CACX,KAAM,OACN,UAAW,kBACX,OAAQC,EACR,QAAS,MACX,EACA,KAAM,CAAE,KAAM,OAAQ,UAAW,UAAW,OAAQC,EAAO,QAAS,SAAU,EAC9E,KAAM,CAAE,KAAM,OAAQ,UAAW,UAAW,OAAQC,EAAO,QAAS,MAAO,EAC3E,YAAa,CACX,KAAM,OACN,UAAW,iBACX,OAAQC,EACR,QAAS,WACX,EACA,OAAQ,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQC,EAAS,QAAS,MAAU,EACpF,gBAAiB,CAAE,KAAM,OAAQ,OAAQ,CAAC,QAAS,aAAa,EAAG,QAAS,MAAU,EACtF,GAAGZ,EACH,GAAGC,CACL",
+  "sourcesContent": ["import { asChildPropDef } from '../props/as-child.prop.js';\nimport { colorPropDef } from '../props/color.prop.js';\nimport { highContrastPropDef } from '../props/high-contrast.prop.js';\n\nimport type { PropDef } from '../props/prop-def.js';\n\n// Re-export base menu props for sidebar menu components\nexport {\n  baseMenuContentPropDefs as sidebarContentPropDefs,\n  baseMenuItemPropDefs as sidebarItemPropDefs,\n  baseMenuCheckboxItemPropDefs as sidebarCheckboxItemPropDefs,\n  baseMenuRadioItemPropDefs as sidebarRadioItemPropDefs,\n} from './_internal/base-menu.props.js';\n\n// Sidebar container props\nconst sizes = ['1', '2', '3'] as const;\nconst variants = ['soft', 'outline', 'surface', 'ghost'] as const;\nconst menuVariants = ['solid', 'soft'] as const;\nconst types = ['sidebar'] as const;\nconst sides = ['left', 'right'] as const;\nconst collapsibleModes = ['offcanvas', 'icon', 'none'] as const;\nconst layouts = ['rail', 'panel'] as const;\n\nconst sidebarPropDefs = {\n  ...asChildPropDef,\n  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },\n  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'outline' },\n  menuVariant: {\n    type: 'enum',\n    className: 'rt-menu-variant',\n    values: menuVariants,\n    default: 'soft',\n  },\n  type: { type: 'enum', className: 'rt-type', values: types, default: 'sidebar' },\n  side: { type: 'enum', className: 'rt-side', values: sides, default: 'left' },\n  collapsible: {\n    type: 'enum',\n    className: 'rt-collapsible',\n    values: collapsibleModes,\n    default: 'offcanvas',\n  },\n  layout: { type: 'enum', className: 'rt-layout', values: layouts, default: undefined },\n  panelBackground: { type: 'enum', values: ['solid', 'translucent'], default: undefined },\n  ...colorPropDef,\n  ...highContrastPropDef,\n} satisfies {\n  size: PropDef<(typeof sizes)[number]>;\n  variant: PropDef<(typeof variants)[number]>;\n  menuVariant: PropDef<(typeof menuVariants)[number]>;\n  type: PropDef<(typeof types)[number]>;\n  side: PropDef<(typeof sides)[number]>;\n  collapsible: PropDef<(typeof collapsibleModes)[number]>;\n  layout: PropDef<(typeof layouts)[number]>;\n  panelBackground: PropDef<'solid' | 'translucent'>;\n};\n\nexport { sidebarPropDefs };\n"],
+  "mappings": "AAAA,OAAS,kBAAAA,MAAsB,4BAC/B,OAAS,gBAAAC,MAAoB,yBAC7B,OAAS,uBAAAC,MAA2B,iCAKpC,OAC6B,2BAA3BC,EACwB,wBAAxBC,EACgC,gCAAhCC,EAC6B,6BAA7BC,MACK,iCAGP,MAAMC,EAAQ,CAAC,IAAK,IAAK,GAAG,EACtBC,EAAW,CAAC,OAAQ,UAAW,UAAW,OAAO,EACjDC,EAAe,CAAC,QAAS,MAAM,EAC/BC,EAAQ,CAAC,SAAS,EAClBC,EAAQ,CAAC,OAAQ,OAAO,EACxBC,EAAmB,CAAC,YAAa,OAAQ,MAAM,EAC/CC,EAAU,CAAC,OAAQ,OAAO,EAE1BC,EAAkB,CACtB,GAAGd,EACH,KAAM,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQO,EAAO,QAAS,IAAK,WAAY,EAAK,EAC5F,QAAS,CAAE,KAAM,OAAQ,UAAW,aAAc,OAAQC,EAAU,QAAS,SAAU,EACvF,YAAa,CACX,KAAM,OACN,UAAW,kBACX,OAAQC,EACR,QAAS,MACX,EACA,KAAM,CAAE,KAAM,OAAQ,UAAW,UAAW,OAAQC,EAAO,QAAS,SAAU,EAC9E,KAAM,CAAE,KAAM,OAAQ,UAAW,UAAW,OAAQC,EAAO,QAAS,MAAO,EAC3E,YAAa,CACX,KAAM,OACN,UAAW,iBACX,OAAQC,EACR,QAAS,WACX,EACA,OAAQ,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQC,EAAS,QAAS,MAAU,EACpF,gBAAiB,CAAE,KAAM,OAAQ,OAAQ,CAAC,QAAS,aAAa,EAAG,QAAS,MAAU,EACtF,GAAGZ,EACH,GAAGC,CACL",
   "names": ["asChildPropDef", "colorPropDef", "highContrastPropDef", "baseMenuContentPropDefs", "baseMenuItemPropDefs", "baseMenuCheckboxItemPropDefs", "baseMenuRadioItemPropDefs", "sizes", "variants", "menuVariants", "types", "sides", "collapsibleModes", "layouts", "sidebarPropDefs"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kushagradhawan/kookie-ui",
-  "version": "0.1.109",
+  "version": "0.1.110",
   "description": "A modern React component library with beautiful design tokens, flexible theming, and comprehensive documentation",
   "keywords": [
     "react",

package/schemas/base-button.json

@@ -279,6 +279,6 @@
   "title": "Base-button Component Props",
   "description": "Props schema for the base-button component in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2026-01-06T19:05:02.636Z",
+  "generatedAt": "2026-01-07T05:55:02.780Z",
   "source": "Zod schema"
 }

package/schemas/button.json

@@ -530,6 +530,6 @@
   "title": "Button Component Props",
   "description": "Props schema for the button component in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2026-01-06T19:05:02.642Z",
+  "generatedAt": "2026-01-07T05:55:02.786Z",
   "source": "Zod schema"
 }

package/schemas/icon-button.json

@@ -313,6 +313,6 @@
   "title": "Icon-button Component Props",
   "description": "Props schema for the icon-button component in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2026-01-06T19:05:02.643Z",
+  "generatedAt": "2026-01-07T05:55:02.787Z",
   "source": "Zod schema"
 }

package/schemas/index.json

@@ -3,7 +3,7 @@
   "title": "Kookie UI Button Components",
   "description": "Complete JSON Schema collection for all button components in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2026-01-06T19:05:02.646Z",
+  "generatedAt": "2026-01-07T05:55:02.790Z",
   "source": "Zod schemas",
   "components": {
     "base-button": {
@@ -287,7 +287,7 @@
       "title": "Base-button Component Props",
       "description": "Props schema for the base-button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2026-01-06T19:05:02.636Z",
+      "generatedAt": "2026-01-07T05:55:02.780Z",
       "source": "Zod schema"
     },
     "button": {
@@ -822,7 +822,7 @@
       "title": "Button Component Props",
       "description": "Props schema for the button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2026-01-06T19:05:02.642Z",
+      "generatedAt": "2026-01-07T05:55:02.786Z",
       "source": "Zod schema"
     },
     "icon-button": {
@@ -1140,7 +1140,7 @@
       "title": "Icon-button Component Props",
       "description": "Props schema for the icon-button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2026-01-06T19:05:02.643Z",
+      "generatedAt": "2026-01-07T05:55:02.787Z",
       "source": "Zod schema"
     },
     "toggle-button": {
@@ -1683,7 +1683,7 @@
       "title": "Toggle-button Component Props",
       "description": "Props schema for the toggle-button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2026-01-06T19:05:02.645Z",
+      "generatedAt": "2026-01-07T05:55:02.789Z",
       "source": "Zod schema"
     },
     "toggle-icon-button": {
@@ -2009,7 +2009,7 @@
       "title": "Toggle-icon-button Component Props",
       "description": "Props schema for the toggle-icon-button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2026-01-06T19:05:02.646Z",
+      "generatedAt": "2026-01-07T05:55:02.790Z",
       "source": "Zod schema"
     }
   }

package/schemas/toggle-button.json

@@ -538,6 +538,6 @@
   "title": "Toggle-button Component Props",
   "description": "Props schema for the toggle-button component in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2026-01-06T19:05:02.645Z",
+  "generatedAt": "2026-01-07T05:55:02.789Z",
   "source": "Zod schema"
 }

package/schemas/toggle-icon-button.json

@@ -321,6 +321,6 @@
   "title": "Toggle-icon-button Component Props",
   "description": "Props schema for the toggle-icon-button component in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2026-01-06T19:05:02.646Z",
+  "generatedAt": "2026-01-07T05:55:02.790Z",
   "source": "Zod schema"
 }

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

@@ -230,12 +230,10 @@
 
   &:where([data-state='open']) {
     background-color: color-mix(in srgb, var(--gray-a3) calc(var(--material-alpha) * 100%), var(--gray-3) var(--material-blend));
-    box-shadow: var(--shadow-1);
   }
 
   &:where(:active:not([data-state='open'], [data-disabled]), [data-state='on']:not([data-disabled])) {
     background-color: color-mix(in srgb, var(--gray-a3) calc(var(--material-alpha) * 100%), var(--gray-3) var(--material-blend));
-    box-shadow: var(--shadow-1);
   }
 
   @media (pointer: coarse) {
@@ -361,12 +359,10 @@
   &:where([data-state='open']) {
     background-color: color-mix(in srgb, var(--accent-a10) calc(var(--material-alpha) * 100%), var(--accent-10) var(--solid-blend));
     filter: var(--base-button-solid-open-filter);
-    box-shadow: var(--shadow-1);
   }
 
   &:where(:active:not([data-state='open'])) {
     filter: var(--base-button-solid-active-filter);
-    box-shadow: var(--shadow-1);
   }
 
   @media (pointer: coarse) {
@@ -396,12 +392,10 @@
     &:where([data-state='open']) {
       background-color: color-mix(in srgb, var(--accent-a12) calc(var(--material-alpha) * 100%), var(--accent-12) var(--solid-blend));
       filter: var(--base-button-solid-high-contrast-open-filter);
-      box-shadow: var(--shadow-1);
     }
 
     &:where(:active:not([data-state='open'])) {
       filter: var(--base-button-solid-high-contrast-active-filter);
-      box-shadow: var(--shadow-1);
     }
   }
 
@@ -453,12 +447,10 @@
 
   &:where([data-state='open']) {
     background-color: color-mix(in srgb, var(--accent-a4) calc(var(--material-alpha) * 100%), var(--accent-4) var(--material-blend));
-    box-shadow: var(--shadow-1);
   }
 
   &:where(:active:not([data-state='open'])) {
     background-color: color-mix(in srgb, var(--accent-a5) calc(var(--material-alpha) * 100%), var(--accent-5) var(--material-blend));
-    box-shadow: var(--shadow-1);
   }
 
   &:where([data-disabled]) {
@@ -514,12 +506,10 @@
 
   &:where([data-state='open']) {
     background-color: color-mix(in srgb, var(--accent-a3) calc(var(--material-alpha) * 100%), var(--accent-3) var(--material-blend));
-    box-shadow: var(--shadow-1);
   }
 
   &:where(:active:not([data-state='open'])) {
     background-color: color-mix(in srgb, var(--accent-a4) calc(var(--material-alpha) * 100%), var(--accent-4) var(--material-blend));
-    box-shadow: var(--shadow-1);
   }
 
   &:where([data-disabled]) {
@@ -554,16 +544,12 @@
 
   &:where([data-state='open']) {
     background-color: color-mix(in srgb, var(--accent-a2) calc(var(--material-alpha) * 100%), var(--accent-2) var(--material-blend));
-    box-shadow:
-      inset 0 0 0 1px var(--outline-border-7),
-      var(--shadow-1);
+    box-shadow: inset 0 0 0 1px var(--outline-border-7);
   }
 
   &:where(:active:not([data-state='open'])) {
     background-color: color-mix(in srgb, var(--accent-a3) calc(var(--material-alpha) * 100%), var(--accent-3) var(--material-blend));
-    box-shadow:
-      inset 0 0 0 1px var(--outline-border-8),
-      var(--shadow-1);
+    box-shadow: inset 0 0 0 1px var(--outline-border-8);
   }
 
   &:where(:focus-visible) {
@@ -608,16 +594,12 @@
 
   &:where([data-state='open']) {
     background-color: color-mix(in srgb, var(--accent-a3) calc(var(--material-alpha) * 100%), var(--accent-3) var(--material-blend));
-    box-shadow:
-      inset 0 0 0 1px var(--surface-border-8),
-      var(--shadow-1);
+    box-shadow: inset 0 0 0 1px var(--surface-border-8);
   }
 
   &:where(:active:not([data-state='open'])) {
     background-color: color-mix(in srgb, var(--accent-a4) calc(var(--material-alpha) * 100%), var(--accent-4) var(--material-blend));
-    box-shadow:
-      inset 0 0 0 1px var(--surface-border-8),
-      var(--shadow-1);
+    box-shadow: inset 0 0 0 1px var(--surface-border-8);
   }
 
   &:where(:focus-visible) {
@@ -649,7 +631,6 @@
   /* Classic variant pressed */
   &:where(.rt-variant-classic) {
     background-color: color-mix(in srgb, var(--gray-a3) calc(var(--material-alpha) * 100%), var(--gray-3) var(--material-blend));
-    box-shadow: var(--shadow-1);
   }
 
   /* Solid variant pressed - uses solid-blend from variant definition */
@@ -657,7 +638,6 @@
     --solid-blend: calc(100% - (var(--material-alpha) * 90%));
     background-color: color-mix(in srgb, var(--accent-a10) calc(var(--material-alpha) * 100%), var(--accent-10) var(--solid-blend));
     opacity: 0.9;
-    box-shadow: var(--shadow-1);
 
     &:where(.rt-high-contrast) {
       background-color: var(--accent-12);
@@ -668,31 +648,25 @@
   /* Soft variant pressed */
   &:where(.rt-variant-soft) {
     background-color: color-mix(in srgb, var(--accent-a5) calc(var(--material-alpha) * 100%), var(--accent-5) var(--material-blend));
-    box-shadow: var(--shadow-1);
   }
 
   /* Ghost variant pressed */
   &:where(.rt-variant-ghost) {
     background-color: color-mix(in srgb, var(--accent-a4) calc(var(--material-alpha) * 100%), var(--accent-4) var(--material-blend));
-    box-shadow: var(--shadow-1);
   }
 
   /* Outline variant pressed */
   &:where(.rt-variant-outline) {
     --outline-border-8: color-mix(in srgb, var(--accent-a8) calc(var(--material-alpha) * 100%), var(--accent-8) var(--material-blend));
     background-color: color-mix(in srgb, var(--accent-a3) calc(var(--material-alpha) * 100%), var(--accent-3) var(--material-blend));
-    box-shadow:
-      inset 0 0 0 1px var(--outline-border-8),
-      var(--shadow-1);
+    box-shadow: inset 0 0 0 1px var(--outline-border-8);
   }
 
   /* Surface variant pressed */
   &:where(.rt-variant-surface) {
     --surface-border-8: color-mix(in srgb, var(--accent-a8) calc(var(--material-alpha) * 100%), var(--accent-8) var(--material-blend));
     background-color: color-mix(in srgb, var(--accent-a4) calc(var(--material-alpha) * 100%), var(--accent-4) var(--material-blend));
-    box-shadow:
-      inset 0 0 0 1px var(--surface-border-8),
-      var(--shadow-1);
+    box-shadow: inset 0 0 0 1px var(--surface-border-8);
   }
 }
 

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

@@ -329,7 +329,6 @@
 
     &:where([data-state='open']) {
       transition-duration: 40ms;
-      box-shadow: var(--shadow-1);
 
       &::before {
         background-color: var(--gray-3);
@@ -346,8 +345,6 @@
     }
 
     &:where(:active:not([data-state='open'])) {
-      box-shadow: var(--shadow-1);
-
       &::before {
         background-color: var(--gray-3);
 

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

@@ -170,7 +170,6 @@
   &:where([data-state='checked'], [data-state='indeterminate']) {
     &::before {
       background-color: var(--accent-3);
-      box-shadow: var(--shadow-1);
 
       /* Theme-level translucent override */
       :where([data-panel-background='translucent'], [data-material='translucent']) & {
@@ -219,7 +218,6 @@
     
     &::before {
       background-color: var(--accent-3);
-      box-shadow: var(--shadow-1);
 
       /* Theme-level translucent override for active */
       :where([data-panel-background='translucent'], [data-material='translucent']) & {

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

@@ -160,7 +160,6 @@
   
   &:where(:checked, [data-state='checked'])::before {
     background-color: var(--accent-3);
-    box-shadow: var(--shadow-1);
 
     /* Theme-level translucent override */
     :where([data-panel-background='translucent'], [data-material='translucent']) & {
@@ -191,7 +190,6 @@
     
     &::before {
       background-color: var(--accent-3);
-      box-shadow: var(--shadow-1);
 
       /* Theme-level translucent override for active */
       :where([data-panel-background='translucent'], [data-material='translucent']) & {

package/src/components/avatar.css

@@ -104,7 +104,6 @@
       padding-top: var(--classic-active-padding-offset-2);
       padding-bottom: 0;
       background-color: var(--gray-3);
-      box-shadow: var(--shadow-1);
 
       /* Theme-level translucent override for active */
       :where([data-panel-background='translucent'], [data-material='translucent']) & {

package/src/components/select.css

@@ -400,7 +400,6 @@
 
   &:where([data-state='open']) {
     background-color: var(--accent-3);
-    box-shadow: var(--shadow-1);
 
     /* Theme-level translucent override for open */
     :where([data-panel-background='translucent'], [data-material='translucent']) & {
@@ -419,7 +418,6 @@
 
   &:where(:active:not([data-state='open'], [data-disabled])) {
     background-color: var(--accent-3);
-    box-shadow: var(--shadow-1);
 
     /* Theme-level translucent override for active */
     :where([data-panel-background='translucent'], [data-material='translucent']) & {

package/src/components/sidebar.css

@@ -36,10 +36,27 @@
   text-align: center !important;
   font-size: var(--font-size-0) !important;
   line-height: var(--line-height-0) !important;
-  padding-top: var(--space-2) !important;
-  padding-bottom: var(--space-2) !important;
   padding-inline-start: var(--space-1) !important;
   padding-inline-end: var(--space-1) !important;
+  /* Add margin for balanced spacing like normal variant */
+  margin-top: 1px;
+  margin-bottom: 1px;
+}
+
+/* Size-specific vertical padding for thin mode buttons */
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-1) :where(.rt-SidebarMenuButton, .rt-SidebarMenuSubTrigger) {
+  padding-top: var(--space-1) !important;
+  padding-bottom: var(--space-1) !important;
+}
+
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-2) :where(.rt-SidebarMenuButton, .rt-SidebarMenuSubTrigger) {
+  padding-top: var(--space-1) !important;
+  padding-bottom: var(--space-1) !important;
+}
+
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-3) :where(.rt-SidebarMenuButton, .rt-SidebarMenuSubTrigger) {
+  padding-top: var(--space-2) !important;
+  padding-bottom: var(--space-2) !important;
 }
 
 /* Consolidated thin mode size blocks */
@@ -195,20 +212,107 @@
   display: block;
 }
 
-/* Truncate labels inside an explicit label span */
+/* Icon wrapper for thin mode - receives hover/active background */
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuIconWrapper) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* Override the 100% width from .rt-SidebarMenuButton > * - icon wrapper should fit content */
+  width: auto;
+  padding: var(--space-3) var(--space-2);
+  border-radius: var(--radius-2);
+  transition:
+    background-color var(--motion-duration-micro) var(--motion-ease-standard),
+    color var(--motion-duration-small) var(--motion-ease-standard);
+}
+
+/* Size-specific icon wrapper padding */
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-1 .rt-SidebarMenuIconWrapper) {
+  padding: var(--space-2) var(--space-2);
+  border-radius: var(--radius-1);
+}
+
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-2 .rt-SidebarMenuIconWrapper) {
+  padding: var(--space-2);
+  border-radius: var(--radius-2);
+}
+
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-3 .rt-SidebarMenuIconWrapper) {
+  padding: var(--space-3);
+  border-radius: var(--radius-2);
+}
+
+/* Label styling in thin mode - outside the background area */
 :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuButton .rt-SidebarMenuLabel) {
   display: block;
   max-width: 100%;
   min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  overflow: visible;
+  text-overflow: clip;
   white-space: nowrap;
   text-align: center;
-  color: var(--accent-11);
+  color: var(--gray-11);
   font-size: var(--font-size-0);
   line-height: var(--line-height-0);
 }
 
+/* Active label gets accent color and medium weight */
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuButton[data-active] .rt-SidebarMenuLabel) {
+  color: var(--accent-11);
+  font-weight: var(--font-weight-medium);
+}
+
+/* Highlighted label gets slightly darker color */
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuButton[data-highlighted] .rt-SidebarMenuLabel) {
+  color: var(--accent-11);
+}
+
+/* Remove background from button itself in thin mode - styles are on icon wrapper */
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuButton[data-highlighted]),
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuButton[data-active]) {
+  background-color: transparent !important;
+}
+
+/* Soft variant icon wrapper states in thin mode */
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-menu-variant-soft .rt-SidebarMenuButton[data-highlighted] .rt-SidebarMenuIconWrapper) {
+  background-color: var(--accent-4);
+}
+
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-menu-variant-soft .rt-SidebarMenuButton[data-active] .rt-SidebarMenuIconWrapper) {
+  background-color: var(--accent-3);
+}
+
+/* Translucent panel support for soft variant */
+:where([data-panel-background='translucent']) :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-menu-variant-soft .rt-SidebarMenuButton[data-highlighted] .rt-SidebarMenuIconWrapper) {
+  background-color: var(--accent-a4);
+}
+
+:where([data-panel-background='translucent']) :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-menu-variant-soft .rt-SidebarMenuButton[data-active] .rt-SidebarMenuIconWrapper) {
+  background-color: var(--accent-a3);
+}
+
+/* Solid variant icon wrapper states in thin mode */
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-menu-variant-solid .rt-SidebarMenuButton[data-highlighted] .rt-SidebarMenuIconWrapper) {
+  background-color: var(--accent-9);
+  color: var(--accent-contrast);
+}
+
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-menu-variant-solid .rt-SidebarMenuButton[data-active] .rt-SidebarMenuIconWrapper) {
+  background-color: var(--accent-9);
+  color: var(--accent-contrast);
+}
+
+/* High contrast solid variant in thin mode */
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-menu-variant-solid[data-high-contrast] .rt-SidebarMenuButton[data-highlighted] .rt-SidebarMenuIconWrapper) {
+  background-color: var(--accent-12);
+  color: var(--accent-1);
+}
+
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-menu-variant-solid[data-high-contrast] .rt-SidebarMenuButton[data-active] .rt-SidebarMenuIconWrapper) {
+  background-color: var(--accent-12);
+  color: var(--accent-1);
+}
+
 :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuBadge),
 :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuShortcut),
 :where(.rt-SidebarContainer[data-presentation='thin'] .rt-Badge),

package/src/components/sidebar.props.tsx

@@ -13,7 +13,7 @@ export {
 } from './_internal/base-menu.props.js';
 
 // Sidebar container props
-const sizes = ['1', '2'] as const;
+const sizes = ['1', '2', '3'] as const;
 const variants = ['soft', 'outline', 'surface', 'ghost'] as const;
 const menuVariants = ['solid', 'soft'] as const;
 const types = ['sidebar'] as const;

package/src/components/sidebar.tsx

@@ -32,7 +32,7 @@ type BadgeConfig = {
 
 // Internal presentational context (not exported) for size/menu variant
 type SidebarVisualContextValue = {
-  size: '1' | '2';
+  size: '1' | '2' | '3';
   menuVariant: 'solid' | 'soft';
   presentation?: 'thin' | 'expanded';
   color?: string;
@@ -236,6 +236,7 @@ const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenuButtonP
     const [isHighlighted, setIsHighlighted] = React.useState(false);
     const visual = useSidebarVisual();
     const sidebarSize = visual?.size ?? '2';
+    const isThinMode = visual?.presentation === 'thin';
 
     const Comp = asChild ? Slot : 'button';
 
@@ -268,6 +269,30 @@ const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenuButtonP
       [onClick, onKeyDown],
     );
 
+    // Separate icons and labels for thin mode styling
+    const separateIconsAndLabels = (node: React.ReactNode): { icons: React.ReactNode[]; labels: React.ReactNode[] } => {
+      const icons: React.ReactNode[] = [];
+      const labels: React.ReactNode[] = [];
+
+      React.Children.forEach(node, (child) => {
+        if (typeof child === 'string' || typeof child === 'number') {
+          labels.push(<span key={labels.length} className="rt-SidebarMenuLabel">{child}</span>);
+        } else if (React.isValidElement(child)) {
+          const el = child as React.ReactElement<any>;
+          // Check if it's an SVG or icon component
+          if (el.type === 'svg' || (el.props && el.props.icon) || (typeof el.type === 'function' && ((el.type as any).displayName?.includes('Icon') || (el.type as any).name?.includes('Icon')))) {
+            icons.push(child);
+          } else {
+            labels.push(child);
+          }
+        } else if (child) {
+          labels.push(child);
+        }
+      });
+
+      return { icons, labels };
+    };
+
     // Wrap bare text nodes so CSS can target labels (e.g., for truncation in thin mode)
     const wrapTextNodes = (node: React.ReactNode): React.ReactNode => {
       if (typeof node === 'string' || typeof node === 'number') {
@@ -289,6 +314,9 @@ const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenuButtonP
 
     const processedChildren = wrapTextNodes(children);
 
+    // For thin mode, separate icons into a wrapper for targeted background styling
+    const { icons, labels } = isThinMode ? separateIconsAndLabels(children) : { icons: [], labels: [] };
+
     // When rendering asChild, Slot expects a single child element. We still want to
     // append optional badge/shortcut inside that element so they render with Link.
     const slottedChildren = React.useMemo(() => {
@@ -347,6 +375,19 @@ const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenuButtonP
       >
         {asChild ? (
           slottedChildren
+        ) : isThinMode && icons.length > 0 ? (
+          <>
+            <span className="rt-SidebarMenuIconWrapper">{icons}</span>
+            {labels.map((label, index) => (
+              <React.Fragment key={index}>
+                {typeof label === 'string' || typeof label === 'number' ? (
+                  <span className="rt-SidebarMenuLabel">{label}</span>
+                ) : (
+                  label
+                )}
+              </React.Fragment>
+            ))}
+          </>
         ) : (
           <>
             {processedChildren}
@@ -522,8 +563,10 @@ const SidebarMenuSubContent = React.forwardRef<React.ElementRef<typeof Accordion
       );
     });
 
+    // DropdownMenu only supports sizes 1 and 2, so map size 3 to 2
+    const dropdownSize = visual?.size === '3' ? '2' : visual?.size;
     return (
-      <DropdownMenu.Content size={visual?.size} variant={visual?.menuVariant} className={classNames(className)}>
+      <DropdownMenu.Content size={dropdownSize} variant={visual?.menuVariant} className={classNames(className)}>
         <DropdownMenu.Group>{normalized}</DropdownMenu.Group>
       </DropdownMenu.Content>
     );

package/src/components/text-area.css

@@ -299,7 +299,6 @@
   &:where(:has(.rt-TextAreaInput:where(:disabled, :read-only))) {
     /* Blend with grey */
     background-image: linear-gradient(var(--gray-a2), var(--gray-a2));
-    box-shadow: var(--shadow-1);
   }
 }
 

package/src/components/text-field.css

@@ -476,7 +476,6 @@
   &:where(:has(.rt-TextFieldInput:where(:disabled, :read-only))) {
     /* Blend with grey */
     background-image: linear-gradient(var(--gray-a2), var(--gray-a2));
-    box-shadow: var(--shadow-1);
   }
 }