@womp/kookie-ui 0.24.0 → 0.25.1

package/dist/esm/props/gap.props.d.ts

@@ -19,7 +19,7 @@ declare const gapPropDefs: {
         responsive: true;
     };
     /**
-     * Sets the CSS **row-gap** property.
+     * Sets the CSS **column-gap** property.
      * Supports space scale values, CSS strings, and responsive objects.
      *
      * @example
@@ -28,7 +28,7 @@ declare const gapPropDefs: {
      * gapX={{ sm: '2', lg: '3em' }}
      *
      * @link
-     * https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap
+     * https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap
      */
     gapX: {
         type: "enum | string";
@@ -38,7 +38,7 @@ declare const gapPropDefs: {
         responsive: true;
     };
     /**
-     * Sets the CSS **column-gap** property.
+     * Sets the CSS **row-gap** property.
      * Supports space scale values, CSS strings, and responsive objects.
      *
      * @example
@@ -47,7 +47,7 @@ declare const gapPropDefs: {
      * gapY={{ sm: '2', lg: '3em' }}
      *
      * @link
-     * https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap
+     * https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap
      */
     gapY: {
         type: "enum | string";

package/dist/esm/props/gap.props.js

@@ -1,2 +1,2 @@
-import{a}from"../chunk-NA237RHQ.js";import"../chunk-OS3FCYZY.js";export{a as gapPropDefs};
+import{a}from"../chunk-FJLYSZV3.js";export{a as gapPropDefs};
 //# sourceMappingURL=gap.props.js.map

package/dist/esm/props/height.props.js

@@ -1,2 +1,2 @@
-import{a}from"../chunk-NUVUXNHF.js";import"../chunk-OS3FCYZY.js";export{a as heightPropDefs};
+import{a}from"../chunk-NUVUXNHF.js";export{a as heightPropDefs};
 //# sourceMappingURL=height.props.js.map

package/dist/esm/props/index.js

@@ -1,2 +1,2 @@
-import{a as lo}from"../chunk-677CX2QF.js";import{a as jo,b as ko}from"../chunk-LXTGEI62.js";import{a as xo}from"../chunk-YHYPIJCR.js";import{a as ao,b as bo,c as co}from"../chunk-YXLDRDHW.js";import{a as go,b as ho}from"../chunk-TZTUPQYK.js";import{a as io}from"../chunk-LUNWI377.js";import{a as to}from"../chunk-PJR6GRZC.js";import{a as eo,b as fo,c as mo}from"../chunk-HCBR74BW.js";import{a as po}from"../chunk-3QZBWH2A.js";import{a as ro}from"../chunk-CLZW2IDD.js";import{a as $}from"../chunk-SKOYHBIE.js";import{a as oo}from"../chunk-FVY44PTM.js";import"../chunk-STPMPY3X.js";import{a as _}from"../chunk-3BUQ7ADW.js";import"../chunk-WOR3JCLX.js";import{a as Z}from"../chunk-IAEAXIBI.js";import{a as W}from"../chunk-IDOZJVO6.js";import{a as X}from"../chunk-X4A3XRBY.js";import{a as Y}from"../chunk-VW46DG7H.js";import"../chunk-OA7C34MJ.js";import{a as U}from"../chunk-OSSNMF5U.js";import{a as V}from"../chunk-VPSMETY2.js";import"../chunk-UICSVJ3B.js";import{a as Q}from"../chunk-CHPT42BY.js";import{a as R}from"../chunk-S6GWR6EZ.js";import{a as S}from"../chunk-BIITGC3Z.js";import"../chunk-6DWDNKLS.js";import{a as T}from"../chunk-H3IAGAEL.js";import{a as N}from"../chunk-LVCUY2OS.js";import{a as P}from"../chunk-DCNHG6VN.js";import{a as O}from"../chunk-XZQSSRTG.js";import{a as J}from"../chunk-WTCZAUFY.js";import"../chunk-VCV7RACK.js";import{a as I}from"../chunk-KEWNXANF.js";import{a as G,b as H}from"../chunk-VS2ZWRGO.js";import{a as K}from"../chunk-SBRPXQWH.js";import{a as L}from"../chunk-SJXV4BWZ.js";import{a as M}from"../chunk-N6KH2EOU.js";import{a as F}from"../chunk-DFGY2NZB.js";import{a as E}from"../chunk-FNAE6HUI.js";import{a as D}from"../chunk-UONSKZQT.js";import{a as n}from"../chunk-HIEGLLY7.js";import{a as l}from"../chunk-KKMOGHIY.js";import{a as k}from"../chunk-NA237RHQ.js";import{a as i}from"../chunk-7FTUTUMD.js";import{a as j}from"../chunk-YLDV2HKZ.js";import{a as d}from"../chunk-P7VSZYG3.js";import{a as g}from"../chunk-NUVUXNHF.js";import{a as h}from"../chunk-EKTVL6SS.js";import{a}from"../chunk-BWLCTTTN.js";import{a as t,b as x}from"../chunk-KRJTW535.js";import{a as q}from"../chunk-DNOQ6E3W.js";import{a as s,b as u,c as v,d as w,e as y,f as z}from"../chunk-3XHTJZNP.js";import{a as A}from"../chunk-RAVZ7F5L.js";import{a as b,b as c}from"../chunk-WRWNN2NW.js";import{a as o}from"../chunk-NZJGC6ZW.js";import{a as B}from"../chunk-GNTNGLYR.js";import{a as C}from"../chunk-ETQNRMHU.js";import{a as r,b as e,c as f,d as m,e as p}from"../chunk-CUNKWFKA.js";import"../chunk-OS3FCYZY.js";export{m as accentColorPropDef,r as accentColors,F as alertDialogContentPropDefs,o as asChildPropDef,Q as avatarPropDefs,R as blockquotePropDefs,S as boxPropDefs,c as breakpointSet,b as breakpoints,a as buttonPropDefs,U as cardPropDefs,V as checkboxGroupRootPropDefs,q as checkboxPropDefs,W as chipPropDefs,X as codePropDefs,f as colorPropDef,y as contextMenuCheckboxItemPropDefs,v as contextMenuContentPropDefs,w as contextMenuItemPropDefs,z as contextMenuRadioItemPropDefs,v as contextMenuSubContentPropDefs,E as dialogContentPropDefs,y as dropdownMenuCheckboxItemPropDefs,u as dropdownMenuContentPropDefs,w as dropdownMenuItemPropDefs,z as dropdownMenuRadioItemPropDefs,v as dropdownMenuSubContentPropDefs,G as emphases,H as emphasisPropDef,l as flexPropDefs,k as gapPropDefs,p as grayAccentColorPropDef,e as grayColors,Z as gridPropDefs,N as headingPropDefs,g as heightPropDefs,A as kbdPropDefs,i as layoutPropDefs,I as leadingTrimPropDef,_ as linkPropDefs,j as marginPropDefs,d as paddingPropDefs,Y as popoverContentPropDefs,$ as progressPropDefs,t as radii,oo as radioGroupRootPropDefs,B as radioPropDefs,x as radiusPropDef,D as scrollAreaPropDefs,ro as segmentedControlRootPropDefs,mo as selectContentPropDefs,eo as selectRootPropDefs,fo as selectTriggerPropDefs,po as separatorPropDefs,lo as shadowPropDefs,to as sliderPropDefs,n as spinnerPropDefs,s as submenuBehaviors,xo as switchPropDefs,co as tableCellPropDefs,ao as tableRootPropDefs,bo as tableRowPropDefs,ho as tabsContentPropDefs,C as tabsListPropDefs,go as tabsRootPropDefs,J as textAlignPropDef,io as textAreaPropDefs,jo as textFieldRootPropDefs,ko as textFieldSlotPropDefs,O as textPropDefs,K as textWrapPropDef,P as themePropDefs,T as tooltipPropDefs,L as truncatePropDef,M as weightPropDef,h as widthPropDefs};
+import{a as l,b as n}from"../chunk-KRJTW535.js";import{a as q}from"../chunk-677CX2QF.js";import{a as s}from"../chunk-WTCZAUFY.js";import{a as u}from"../chunk-SBRPXQWH.js";import{a as v}from"../chunk-SJXV4BWZ.js";import{a as w}from"../chunk-N6KH2EOU.js";import{a as d}from"../chunk-FJLYSZV3.js";import{a as j}from"../chunk-IZXML75Y.js";import{a as i}from"../chunk-EKTVL6SS.js";import{a as g}from"../chunk-NUVUXNHF.js";import{a as k}from"../chunk-KEWNXANF.js";import{a as h}from"../chunk-P7VSZYG3.js";import{a as f}from"../chunk-NZJGC6ZW.js";import{a as m,b as p,c as t,d as x,e as a}from"../chunk-CUNKWFKA.js";import{a as b,b as c}from"../chunk-VS2ZWRGO.js";import{a as e}from"../chunk-YLDV2HKZ.js";import{a as o,b as r}from"../chunk-WRWNN2NW.js";export*from"../components/alert-dialog.props.js";export*from"../components/avatar.props.js";export*from"../components/blockquote.props.js";export*from"../components/box.props.js";export*from"../components/button.props.js";export*from"../components/card.props.js";export*from"../components/checkbox-group.props.js";export*from"../components/checkbox.props.js";export*from"../components/chip.props.js";export*from"../components/code.props.js";export*from"../components/context-menu.props.js";export*from"../components/dialog.props.js";export*from"../components/dropdown-menu.props.js";export*from"../components/flex.props.js";export*from"../components/grid.props.js";export*from"../components/heading.props.js";export*from"../components/kbd.props.js";export*from"../components/link.props.js";export*from"../components/popover.props.js";export*from"../components/progress.props.js";export*from"../components/radio.props.js";export*from"../components/radio-group.props.js";export*from"../components/scroll-area.props.js";export*from"../components/segmented-control.props.js";export*from"../components/select.props.js";export*from"../components/separator.props.js";export*from"../components/slider.props.js";export*from"../components/spinner.props.js";export*from"../components/switch.props.js";export*from"../components/table.props.js";export*from"../components/tabs.props.js";export*from"../components/text-area.props.js";export*from"../components/text-field.props.js";export*from"../components/text.props.js";export*from"../components/theme.props.js";export*from"../components/tooltip.props.js";export{x as accentColorPropDef,m as accentColors,f as asChildPropDef,r as breakpointSet,o as breakpoints,t as colorPropDef,b as emphases,c as emphasisPropDef,d as gapPropDefs,a as grayAccentColorPropDef,p as grayColors,g as heightPropDefs,j as layoutPropDefs,k as leadingTrimPropDef,e as marginPropDefs,h as paddingPropDefs,l as radii,n as radiusPropDef,q as shadowPropDefs,s as textAlignPropDef,u as textWrapPropDef,v as truncatePropDef,w as weightPropDef,i as widthPropDefs};
 //# sourceMappingURL=index.js.map

package/dist/esm/props/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": [],
-  "sourcesContent": [],
-  "mappings": "",
+  "sources": ["../../../src/props/index.ts"],
+  "sourcesContent": ["// Prop definition\nexport * from './prop-def.js';\n\n// Individual props\nexport * from './as-child.prop.js';\nexport * from './color.prop.js';\nexport * from './emphasis.prop.js';\nexport * from './gap.props.js';\nexport * from './height.props.js';\nexport * from './layout.props.js';\nexport * from './leading-trim.prop.js';\nexport * from './margin.props.js';\nexport * from './padding.props.js';\nexport * from './radius.prop.js';\nexport * from './shadow.props.js';\nexport * from './text-align.prop.js';\nexport * from './text-wrap.prop.js';\nexport * from './truncate.prop.js';\nexport * from './weight.prop.js';\nexport * from './width.props.js';\n\n// Component props\nexport * from '../components/alert-dialog.props.js';\nexport * from '../components/avatar.props.js';\nexport * from '../components/blockquote.props.js';\nexport * from '../components/box.props.js';\nexport * from '../components/button.props.js';\nexport * from '../components/card.props.js';\nexport * from '../components/checkbox-group.props.js';\nexport * from '../components/checkbox.props.js';\nexport * from '../components/chip.props.js';\nexport * from '../components/code.props.js';\nexport * from '../components/context-menu.props.js';\nexport * from '../components/dialog.props.js';\nexport * from '../components/dropdown-menu.props.js';\nexport * from '../components/flex.props.js';\nexport * from '../components/grid.props.js';\nexport * from '../components/heading.props.js';\nexport * from '../components/kbd.props.js';\nexport * from '../components/link.props.js';\nexport * from '../components/popover.props.js';\nexport * from '../components/progress.props.js';\nexport * from '../components/radio.props.js';\nexport * from '../components/radio-group.props.js';\nexport * from '../components/scroll-area.props.js';\nexport * from '../components/segmented-control.props.js';\nexport * from '../components/select.props.js';\nexport * from '../components/separator.props.js';\nexport * from '../components/slider.props.js';\nexport * from '../components/spinner.props.js';\nexport * from '../components/switch.props.js';\nexport * from '../components/table.props.js';\nexport * from '../components/tabs.props.js';\nexport * from '../components/text-area.props.js';\nexport * from '../components/text-field.props.js';\nexport * from '../components/text.props.js';\nexport * from '../components/theme.props.js';\nexport * from '../components/tooltip.props.js';\n"],
+  "mappings": "0uBAsBA,WAAc,sCACd,WAAc,gCACd,WAAc,oCACd,WAAc,6BACd,WAAc,gCACd,WAAc,8BACd,WAAc,wCACd,WAAc,kCACd,WAAc,8BACd,WAAc,8BACd,WAAc,sCACd,WAAc,gCACd,WAAc,uCACd,WAAc,8BACd,WAAc,8BACd,WAAc,iCACd,WAAc,6BACd,WAAc,8BACd,WAAc,iCACd,WAAc,kCACd,WAAc,+BACd,WAAc,qCACd,WAAc,qCACd,WAAc,2CACd,WAAc,gCACd,WAAc,mCACd,WAAc,gCACd,WAAc,iCACd,WAAc,gCACd,WAAc,+BACd,WAAc,8BACd,WAAc,mCACd,WAAc,oCACd,WAAc,8BACd,WAAc,+BACd,WAAc",
   "names": []
 }

package/dist/esm/props/layout.props.js

@@ -1,2 +1,2 @@
-import{a}from"../chunk-7FTUTUMD.js";import"../chunk-P7VSZYG3.js";import"../chunk-NUVUXNHF.js";import"../chunk-EKTVL6SS.js";import"../chunk-OS3FCYZY.js";export{a as layoutPropDefs};
+import{a}from"../chunk-IZXML75Y.js";import"../chunk-EKTVL6SS.js";import"../chunk-NUVUXNHF.js";import"../chunk-P7VSZYG3.js";export{a as layoutPropDefs};
 //# sourceMappingURL=layout.props.js.map

package/dist/esm/props/leading-trim.prop.js

@@ -1,2 +1,2 @@
-import{a}from"../chunk-KEWNXANF.js";import"../chunk-OS3FCYZY.js";export{a as leadingTrimPropDef};
+import{a}from"../chunk-KEWNXANF.js";export{a as leadingTrimPropDef};
 //# sourceMappingURL=leading-trim.prop.js.map

package/dist/esm/props/margin.props.js

@@ -1,2 +1,2 @@
-import{a}from"../chunk-YLDV2HKZ.js";import"../chunk-OS3FCYZY.js";export{a as marginPropDefs};
+import{a}from"../chunk-YLDV2HKZ.js";export{a as marginPropDefs};
 //# sourceMappingURL=margin.props.js.map

package/dist/esm/props/padding.props.js

@@ -1,2 +1,2 @@
-import{a}from"../chunk-P7VSZYG3.js";import"../chunk-OS3FCYZY.js";export{a as paddingPropDefs};
+import{a}from"../chunk-P7VSZYG3.js";export{a as paddingPropDefs};
 //# sourceMappingURL=padding.props.js.map

package/dist/esm/props/prop-def.js

@@ -1,2 +1,2 @@
-import{a,b}from"../chunk-WRWNN2NW.js";import"../chunk-OS3FCYZY.js";export{b as breakpointSet,a as breakpoints};
+import{a,b}from"../chunk-WRWNN2NW.js";export{b as breakpointSet,a as breakpoints};
 //# sourceMappingURL=prop-def.js.map

package/dist/esm/props/radius.prop.js

@@ -1,2 +1,2 @@
-import{a,b}from"../chunk-KRJTW535.js";import"../chunk-OS3FCYZY.js";export{a as radii,b as radiusPropDef};
+import{a,b}from"../chunk-KRJTW535.js";export{a as radii,b as radiusPropDef};
 //# sourceMappingURL=radius.prop.js.map

package/dist/esm/props/shadow.props.js

@@ -1,2 +1,2 @@
-import{a}from"../chunk-677CX2QF.js";import"../chunk-OS3FCYZY.js";export{a as shadowPropDefs};
+import{a}from"../chunk-677CX2QF.js";export{a as shadowPropDefs};
 //# sourceMappingURL=shadow.props.js.map

package/dist/esm/props/text-align.prop.js

@@ -1,2 +1,2 @@
-import{a}from"../chunk-WTCZAUFY.js";import"../chunk-OS3FCYZY.js";export{a as textAlignPropDef};
+import{a}from"../chunk-WTCZAUFY.js";export{a as textAlignPropDef};
 //# sourceMappingURL=text-align.prop.js.map

package/dist/esm/props/text-wrap.prop.js

@@ -1,2 +1,2 @@
-import{a}from"../chunk-SBRPXQWH.js";import"../chunk-OS3FCYZY.js";export{a as textWrapPropDef};
+import{a}from"../chunk-SBRPXQWH.js";export{a as textWrapPropDef};
 //# sourceMappingURL=text-wrap.prop.js.map

package/dist/esm/props/truncate.prop.js

@@ -1,2 +1,2 @@
-import{a}from"../chunk-SJXV4BWZ.js";import"../chunk-OS3FCYZY.js";export{a as truncatePropDef};
+import{a}from"../chunk-SJXV4BWZ.js";export{a as truncatePropDef};
 //# sourceMappingURL=truncate.prop.js.map

package/dist/esm/props/weight.prop.js

@@ -1,2 +1,2 @@
-import{a}from"../chunk-N6KH2EOU.js";import"../chunk-OS3FCYZY.js";export{a as weightPropDef};
+import{a}from"../chunk-N6KH2EOU.js";export{a as weightPropDef};
 //# sourceMappingURL=weight.prop.js.map

package/dist/esm/props/width.props.js

@@ -1,2 +1,2 @@
-import{a}from"../chunk-EKTVL6SS.js";import"../chunk-OS3FCYZY.js";export{a as widthPropDefs};
+import{a}from"../chunk-EKTVL6SS.js";export{a as widthPropDefs};
 //# sourceMappingURL=width.props.js.map

package/layout/utilities.css

@@ -6956,8 +6956,8 @@
         margin-right: var(--margin-right-override, var(--margin-right));
     }
     .sm\:kui-r-mx {
-        --margin-left: var(--ml-md);
-        --margin-right: var(--mr-md)
+        --margin-left: var(--ml-sm);
+        --margin-right: var(--mr-sm)
     }
     .sm\:kui-r-mx-0 {
         --margin-left: 0px;

package/layout.css

@@ -7065,8 +7065,8 @@
         margin-right: var(--margin-right-override, var(--margin-right));
     }
     .sm\:kui-r-mx {
-        --margin-left: var(--ml-md);
-        --margin-right: var(--mr-md)
+        --margin-left: var(--ml-sm);
+        --margin-right: var(--mr-sm)
     }
     .sm\:kui-r-mx-0 {
         --margin-left: 0px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@womp/kookie-ui",
-  "version": "0.24.0",
+  "version": "0.25.1",
   "description": "Kookie UI v1: a React component library with design tokens, flexible theming, a full layout shell, and comprehensive documentation.",
   "keywords": [
     "react",
@@ -164,21 +164,17 @@
     "@radix-ui/react-accordion": "^1.2.20",
     "@shadcn/react": "0.3.1",
     "@tanstack/react-virtual": "^3.14.13",
-    "@zag-js/react": "^1.44.0",
-    "@zag-js/splitter": "^1.44.0",
     "classnames": "^2.5.1",
     "cmdk": "^1.1.1",
-    "geist": "^1.7.2",
     "radix-ui": "^1.6.7",
     "react-dropzone": "^20.1.2",
-    "react-remove-scroll-bar": "^2.3.8",
     "zod": "^4.6.5"
   },
   "peerDependencies": {
     "@types/react": "*",
     "@types/react-dom": "*",
-    "react": "^18.0 || ^19.0",
-    "react-dom": "^18.0 || ^19.0"
+    "react": "^19.0",
+    "react-dom": "^19.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {

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

@@ -63,11 +63,6 @@
   font-style: normal;
   text-align: center;
 
-  /* RTL support for right-to-left languages */
-  :where([dir='rtl']) & {
-    flex-direction: row-reverse;
-  }
-
   /* Own stacking context so inner layers (spinner) stay contained */
   isolation: isolate;
 
@@ -101,9 +96,15 @@
     cursor: progress;
   }
 
-  /* The label, hidden in place while the spinner shows. `contents` keeps the button's flex gap. */
+  /* The loading spinner rides the icon ladder */
+  --spinner-size: var(--base-button-icon-size);
+
+  /* The label's wrapper. `contents` keeps the button's flex gap; hidden in place while the spinner shows. */
   & :where(.kui-BaseButtonContent) {
     display: contents;
+  }
+
+  &:where(.kui-loading) :where(.kui-BaseButtonContent) {
     visibility: hidden;
   }
 
@@ -463,3 +464,20 @@
     top: 0;
   }
 }
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * FORCED COLORS: PRESSED                                                                          *
+ *                                                                                                 *
+ * Forced colors erase the pressed background, so a pressed toggle takes the Highlight pair.       *
+ * Last in the file, so it wins over every variant's pressed rule.                                 *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+@media (forced-colors: active) {
+  .kui-BaseButton:where([data-state='on'], [aria-pressed='true']):where(:not([data-disabled], [aria-disabled='true'])) {
+    border-color: Highlight;
+    background-color: Highlight;
+    color: HighlightText;
+  }
+}

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

@@ -6,7 +6,7 @@ import type { PropDef } from '../../props/prop-def.js';
 
 /**
  * Available button sizes for responsive design
- * Size 1: 24px - Compact for toolbars and dense interfaces
+ * Size 1: 28px - Compact for toolbars and dense interfaces
  * Size 2: 32px - Standard for most interface contexts
  * Size 3: 40px - Large for important actions and mobile touch targets
  * Size 4: 48px - Extra large for hero sections and maximum impact

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

@@ -8,7 +8,7 @@ import { Flex } from '../flex.js';
 import { Spinner } from '../spinner.js';
 import { TickIcon } from '../icons.js';
 import { extractProps } from '../../helpers/extract-props.js';
-import { useThemeSizeProps } from '../../helpers/theme-size.js';
+import { useThemeSizeProps } from '../../hooks/theme-size.js';
 
 import type { ComponentPropsWithout, RemovedProps } from '../../helpers/component-props.js';
 import type { GetPropDefTypes } from '../../props/prop-def.js';
@@ -89,6 +89,7 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((ownProp
   // stays native on form controls; on anything else (a link, an asChild child) the `disabled`
   // attribute does nothing, so aria-disabled carries the state and the click is stopped here.
   const loading = Boolean(props.loading);
+  const canLoad = props.loading !== undefined;
   const disabled = Boolean(nativeDisabled) || loading;
   const { onClick, 'aria-describedby': ariaDescribedByProp } = baseButtonProps as {
     onClick?: React.MouseEventHandler<HTMLElement>;
@@ -107,16 +108,19 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((ownProp
 
   // Which edges start or end with an icon. A bare edge pads wider under a full radius; an edge
   // holding an icon keeps the plain padding (the icon already stands between text and curve).
-  // Only an svg is an icon. Rendering reads the children for an svg element at either end, so
-  // the server output is right for inline svgs; after mount the rendered DOM settles it, which
-  // also catches icon components (they render an svg) and rules out wrapped text (`<Text>`,
-  // `<Kbd>`, `<Trans>`), whose first node is not an svg.
+  // Rendering guesses from the children: an svg element, or a component at either end that is
+  // not a known text component (`<Text>`, `<Kbd>`, `<Trans>` and the like), counts as an icon,
+  // so the server output is right for icon components such as HugeIcons. After mount the
+  // rendered DOM settles it: only an svg is an icon, which corrects a wrong guess.
   const childEdges = React.useMemo(() => {
     const content =
       asChild && React.isValidElement(children) ? (children.props as { children?: React.ReactNode }).children : children;
     // Fragments are see-through: their own first and last children are the edges.
     const items = flattenFragments(content);
-    const isIcon = (node: React.ReactNode) => React.isValidElement(node) && node.type === 'svg';
+    const isIcon = (node: React.ReactNode) =>
+      React.isValidElement(node) &&
+      (node.type === 'svg' ||
+        (typeof node.type !== 'string' && node.type !== React.Fragment && !TEXT_COMPONENTS.has(componentName(node.type))));
     return { iconStart: isIcon(items[0]), iconEnd: isIcon(items[items.length - 1]) };
   }, [asChild, children]);
   const [domEdges, setDomEdges] = React.useState<{ iconStart: boolean; iconEnd: boolean } | null>(null);
@@ -124,11 +128,12 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((ownProp
   const composedRef = useComposedRefs(forwardedRef, elementRef as React.Ref<BaseButtonElement>);
   useLayoutEffect(() => {
     const element = elementRef.current;
-    // While loading the label sits in a wrapper, and while done the tick stands at the start;
-    // keep the edges read before either.
+    // While loading the sr-only copy and spinner follow the content, and while done the tick
+    // stands at the start; keep the edges read before either.
     if (!element || loading || done) return;
-    const iconStart = edgeIsSvg(element, 'start');
-    const iconEnd = edgeIsSvg(element, 'end');
+    const contentRoot = element.querySelector(':scope > .kui-BaseButtonContent') ?? element;
+    const iconStart = edgeIsSvg(contentRoot, 'start');
+    const iconEnd = edgeIsSvg(contentRoot, 'end');
     setDomEdges((prev) => (prev && prev.iconStart === iconStart && prev.iconEnd === iconEnd ? prev : { iconStart, iconEnd }));
   });
   const { iconStart, iconEnd } = domEdges ?? childEdges;
@@ -159,8 +164,26 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((ownProp
   const Comp = asChild ? Slot.Root : (as || 'button');
 
   // Only pass disabled for elements that support it
-  // This prevents invalid HTML attributes on unsupported elements
-  const shouldPassDisabled = asChild || !as || ['button', 'input', 'textarea', 'select'].includes(as);
+  // This prevents invalid HTML attributes on unsupported elements. With asChild, the child's own
+  // element type decides: a link child gets aria-disabled, not an invalid `disabled`.
+  const formElements = ['button', 'input', 'textarea', 'select'];
+  const renderedType = asChild ? (React.isValidElement(children) ? children.type : undefined) : (as || 'button');
+  const shouldPassDisabled = typeof renderedType === 'string' && formElements.includes(renderedType);
+
+  // With asChild, Radix Slot runs the child's own onClick before ours, so a disabled asChild
+  // button stops the click in the capture phase, before any bubble handler runs.
+  const { onClickCapture } = baseButtonProps as { onClickCapture?: React.MouseEventHandler<HTMLElement> };
+  const handleClickCapture = React.useCallback(
+    (event: React.MouseEvent<HTMLElement>) => {
+      if (asChild && disabled) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+      onClickCapture?.(event);
+    },
+    [asChild, disabled, onClickCapture],
+  );
 
   // Determine if we are rendering a real <button> element so we can set a safe
   // default type. Native <button> defaults to type="submit" which can cause
@@ -190,6 +213,56 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((ownProp
     return {};
   }, [loading, describedById, ariaDescribedByProp, nativeDisabled, shouldPassDisabled, asChild]);
 
+  /**
+   * The inside of the button. A button that takes `loading` (true or false) keeps its content in
+   * a `kui-BaseButtonContent` wrapper, so starting or stopping `loading` keeps the children in
+   * place (their state survives). A button that never loads skips it, which saves a node per
+   * button. `display: contents` keeps the button's flex gap; while loading the wrapper is
+   * `visibility: hidden` under the spinner.
+   *
+   * `display: contents` removes the content from the accessibility tree in some browsers, so
+   * while loading the wrapper is `aria-hidden` and a `kui-sr-only` copy carries the name.
+   */
+  const renderInner = (inner: React.ReactNode, label: React.ReactNode) => {
+    if (!canLoad) return inner;
+    return (
+      <>
+        <span className="kui-BaseButtonContent" aria-hidden={loading || undefined}>
+          {inner}
+        </span>
+        {loading ? (
+          <>
+            {/* The label stays the name; the hidden "Loading" only describes (aria-describedby reads hidden text). */}
+            <span className="kui-sr-only">
+              <span id={describedById} aria-hidden>
+                Loading
+              </span>
+              {label}
+            </span>
+
+            {/* Centered spinner overlay during loading state */}
+            <Flex asChild align="center" justify="center" position="absolute" inset="0">
+              <span>
+                <Spinner aria-hidden="true" />
+              </span>
+            </Flex>
+          </>
+        ) : null}
+      </>
+    );
+  };
+  const asChildContent =
+    asChild && canLoad && React.isValidElement(content)
+      ? React.cloneElement(
+          content as React.ReactElement<{ children?: React.ReactNode }>,
+          undefined,
+          renderInner(
+            (content.props as { children?: React.ReactNode }).children,
+            React.isValidElement(children) ? (children.props as { children?: React.ReactNode }).children : null,
+          ),
+        )
+      : content;
+
   return (
     <Comp
       data-accent-color={color}
@@ -203,48 +276,34 @@ const BaseButton = React.forwardRef<BaseButtonElement, BaseButtonProps>((ownProp
       // Radix Toggle (asChild) passes `data-disabled={undefined}` that must not erase it.
       data-disabled={disabled || undefined}
       onClick={handleClick}
+      onClickCapture={handleClickCapture}
       ref={composedRef}
       className={classNames('kui-reset', 'kui-BaseButton', className)}
       {...(shouldPassDisabled && { disabled: nativeDisabled })}
       {...(isNativeButtonElement && !hasExplicitTypeAttribute ? { type: 'button' } : {})}
     >
-      {props.loading ? (
-        <>
-          {/**
-           * We need a wrapper to set `visibility: hidden` to hide the button content whilst we show the `Spinner`.
-           * The button is a flex container with a `gap`, so we use `display: contents` to ensure the correct flex layout.
-           *
-           * However, `display: contents` removes the content from the accessibility tree in some browsers,
-           * so we force remove it with `aria-hidden` and re-add it in the tree with a `kui-sr-only` copy.
-           * Both are classes, not style attributes, so a loading button carries no inline style.
-           */}
-          <span className="kui-BaseButtonContent" aria-hidden>
-            {content}
-          </span>
-
-          {/* The label stays the name; the hidden "Loading" only describes (aria-describedby reads hidden text). */}
-          <span className="kui-sr-only">
-            <span id={describedById} aria-hidden>
-              Loading
-            </span>
-            {children}
-          </span>
-
-          {/* Centered spinner overlay during loading state */}
-          <Flex asChild align="center" justify="center" position="absolute" inset="0">
-            <span>
-              <Spinner aria-hidden="true" />
-            </span>
-          </Flex>
-        </>
+      {asChild ? (
+        // asChild: Slot merges onto the single child, so the wrapper, spinner and label copy go
+        // inside that child, never beside it.
+        asChildContent
       ) : (
-        content
+        renderInner(content, children)
       )}
     </Comp>
   );
 });
 BaseButton.displayName = 'BaseButton';
 
+/** Components that render text, never an icon, so the render-time guess skips them. */
+const TEXT_COMPONENTS = new Set(['Text', 'Kbd', 'Code', 'Link', 'Em', 'Strong', 'Quote', 'Badge', 'Trans']);
+
+/** A component's display name, looking through forwardRef and memo. */
+function componentName(type: unknown): string {
+  if (!type || (typeof type !== 'function' && typeof type !== 'object')) return '';
+  const named = type as { displayName?: string; name?: string; render?: unknown; type?: unknown };
+  return named.displayName || named.name || componentName(named.render) || componentName(named.type);
+}
+
 /** The child list with fragments opened up: a fragment's own children are the edges. */
 function flattenFragments(nodes: React.ReactNode): React.ReactNode[] {
   return React.Children.toArray(nodes).flatMap((node) =>

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

@@ -324,3 +324,26 @@
     cursor: default;
   }
 }
+
+/* Windows High Contrast drops box shadows and background colours, so the box takes a real
+ * border and system colours. */
+@media (forced-colors: active) {
+  .kui-BaseCheckboxRoot::before {
+    box-sizing: border-box;
+    border: 1px solid CanvasText;
+  }
+  .kui-BaseCheckboxRoot:where([data-state='checked'], [data-state='indeterminate'])::before {
+    border-color: Highlight;
+    background-color: Highlight;
+  }
+  .kui-BaseCheckboxRoot:where([data-state='checked'], [data-state='indeterminate']) :where(.kui-BaseCheckboxIndicator) {
+    color: HighlightText;
+  }
+  .kui-BaseCheckboxRoot:where(:disabled, [data-disabled])::before {
+    border-color: GrayText;
+    background-color: Canvas;
+  }
+  .kui-BaseCheckboxRoot:where(:disabled, [data-disabled]) :where(.kui-BaseCheckboxIndicator) {
+    color: GrayText;
+  }
+}

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

@@ -297,9 +297,15 @@
   & :where(.kui-BaseMenuItem[data-highlighted]) {
     background-color: var(--accent-4);
 
-    /* In soft variant, lift muted text a step while keeping the hierarchy */
-    & :where(.kui-Text.kui-emphasis-medium:where(:not([data-accent-color]), [data-accent-color='gray'])) {
-      color: var(--neutral-11) !important;
+    /*
+     * In soft variant, lift muted text a step while keeping the hierarchy. This sets the ink
+     * token Text reads, not its color, so a caller's own color on the Text still wins.
+     */
+    & :where(.kui-Text.kui-emphasis-medium:not([data-accent-color])) {
+      --neutral-ink-muted: var(--neutral-11);
+    }
+    & :where(.kui-Text.kui-emphasis-medium[data-accent-color='gray']) {
+      --accent-ink-muted: var(--neutral-11);
     }
   }
 

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

@@ -270,3 +270,25 @@
     box-shadow: inset 0 0 0 1px var(--radio-checked-active);
   }
 }
+
+/* Windows High Contrast drops box shadows and background colours, so the ring takes a real
+ * border and the dot a system colour. */
+@media (forced-colors: active) {
+  .kui-BaseRadioRoot::before {
+    box-sizing: border-box;
+    border: 1px solid CanvasText;
+  }
+  .kui-BaseRadioRoot:where(:checked, [data-state='checked'])::before {
+    border-color: Highlight;
+    background-color: Canvas;
+  }
+  .kui-BaseRadioRoot::after {
+    background-color: Highlight;
+  }
+  .kui-BaseRadioRoot:where(:disabled, [data-disabled])::before {
+    border-color: GrayText;
+  }
+  .kui-BaseRadioRoot:where(:disabled, [data-disabled])::after {
+    background-color: GrayText;
+  }
+}

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

@@ -34,6 +34,11 @@
 .kui-BaseTabListTriggerInner {
   position: absolute;
 
+  /* Without a width sizer beside it (non-text children), it sizes the trigger itself */
+  &:where(:only-child) {
+    position: static;
+  }
+
   :where(.kui-BaseTabListTrigger[data-state='inactive']) & {
     letter-spacing: var(--tab-inactive-letter-spacing);
     word-spacing: var(--tab-inactive-word-spacing);