@botiverse/raft-ui 0.10.1 → 0.10.2

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## [0.10.2](https://github.com/botiverse/raft-design/compare/v0.10.1...v0.10.2) (2026-10-20)
+
+### Fixed
+
+- `PanelAction` and `PanelToggleAction` follow the same desktop condition as every other control (`(width >= 48rem) and (pointer: fine)`). On a touch tablet they were 32px while the rest stayed 44px; they now keep 44px with 22px icons there. Phone and desktop sizes are unchanged. ([#605](https://github.com/botiverse/raft-design/pull/605))
+
 ## [0.10.1](https://github.com/botiverse/raft-design/compare/v0.10.0...v0.10.1) (2026-10-20)
 
 ### Fixed

package/dist/index.mjs

@@ -194,9 +194,12 @@ const panelHeadEdges = [
 /**
 * A head's trailing actions. The last glyph ends on the head's edge: 20px on
 * desktop (12px of padding, 1px here, the 32px button's 7px glyph inset); on
-* a phone 14px in (44px buttons, 11px inset), mirroring a leading Back.
+* a phone 14px in (44px buttons, 11px inset), mirroring a leading Back. The
+* margin and gap follow the button's size, not the layout: a touch screen
+* from 768px has the desktop head with 44px buttons, so -3px puts its last
+* glyph on 20px too.
 */
-const panelHeadActions = "flex shrink-0 items-center gap-0.5 mr-[-3px] md:mr-px md:gap-1";
+const panelHeadActions = "flex shrink-0 items-center gap-0.5 mr-[-3px] md:pointer-fine:mr-px md:pointer-fine:gap-1";
 /**
 * `header` and `sectionHeader` share one bar, expressed through
 * `compoundSlots`: a 56px row (the shell header height) with a seam under it.
@@ -13488,12 +13491,13 @@ const panelActionBase = tv({ base: [
 	"overflow-visible font-sans leading-none tabular-nums select-none outline-none",
 	"transition-all duration-100",
 	"[&>svg]:pointer-events-none [&>svg]:shrink-0",
-	"h-11 min-w-11 rounded-control border-[1.5px] border-transparent bg-transparent px-2 py-0",
-	"md:h-8 md:min-w-8 md:px-[5px] md:after:absolute md:after:-inset-1.5",
+	"h-control min-w-control rounded-control border-[1.5px] border-transparent bg-transparent py-0",
+	"px-2 md:pointer-fine:px-[5px]",
+	"after:absolute after:-inset-control-hit",
 	"text-foreground",
 	"hover:bg-fill-pressed active:bg-fill-pressed",
 	"focus-visible:shadow-focus",
-	"[&>svg]:size-[22px] md:[&>svg]:size-[18px]"
+	"[&>svg]:size-control-icon"
 ] });
 const panelAction = tv({
 	extend: panelActionBase,

package/dist/styles.css

@@ -359,8 +359,9 @@
      `after:-inset-y-control-hit`, which is 0 on a phone.
 
      Consumers: `Input`, `InputGroup`, `SelectTrigger`,
-     `ComboboxControl`, `ComboboxChips`, `ComboboxSelect`, and Button at `lg`,
-     `xl` (`h-control-cta`) and `icon-lg` (`size-control-icon` for its icon). */
+     `ComboboxControl`, `ComboboxChips`, `ComboboxSelect`, `PanelAction`, and
+     Button at `lg`, `xl` (`h-control-cta`) and `icon-lg` (`size-control-icon`
+     for its icon). */
   --spacing-control: var(--control-height);
   --spacing-control-cta: var(--control-height-cta);
   --spacing-control-icon: var(--control-icon-size);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botiverse/raft-ui",
-  "version": "0.10.1",
+  "version": "0.10.2",
   "description": "React components and CSS foundations for the Raft Design System.",
   "keywords": [
     "agent-skills",