@botiverse/raft-ui 0.64.0 → 0.66.0

package/dist/components/scroll-area/scroll-area.css

@@ -587,10 +587,7 @@
       block-size var(--r-scroll-area-duration) var(--r-scroll-area-easing);
   }
 
-  /* Shown while hovered (trigger="hover"), always (trigger="none"), and while scrolling or dragging (every trigger). */
-  .r-scroll-area.r-scroll-area--hover-trigger:hover
-    > .r-scroll-area__gutters
-    > .r-scroll-area__gutter,
+  /* Shown always (trigger="none"), and while scrolling or dragging (every trigger). */
   .r-scroll-area.r-scroll-area--none-trigger > .r-scroll-area__gutters > .r-scroll-area__gutter,
   .r-scroll-area
     > .r-scroll-area__gutters.r-scroll-area__gutters--scrolling
@@ -602,31 +599,7 @@
     transition-duration: var(--r-scroll-area-duration-fade-in);
   }
 
-  /*
-   * trigger="scroll": a hidden gutter doesn't catch presses meant for the
-   * content under it. A gutter the pointer is already on (it was shown by
-   * scrolling) stays visible and usable after `hideDelay`, until the pointer
-   * leaves it; a hidden gutter can't become hovered, so it never shows on hover.
-   */
-  .r-scroll-area.r-scroll-area--scroll-trigger
-    > .r-scroll-area__gutters
-    > .r-scroll-area__gutter:hover {
-    opacity: 1;
-    transition-duration: var(--r-scroll-area-duration-fade-in);
-  }
-  .r-scroll-area.r-scroll-area--scroll-trigger
-    > .r-scroll-area__gutters:not(.r-scroll-area__gutters--scrolling):not(
-      .r-scroll-area__gutters--dragging
-    )
-    > .r-scroll-area__gutter:not(:hover) {
-    pointer-events: none;
-  }
-
-  /* Pointed at, or while dragged: the thumb thickens and darkens. */
-  .r-scroll-area
-    > .r-scroll-area__gutters
-    > .r-scroll-area__gutter--vertical:hover
-    > .r-scroll-area__thumb,
+  /* While dragged: the thumb thickens and darkens. */
   .r-scroll-area
     > .r-scroll-area__gutters
     > .r-scroll-area__gutter--vertical.r-scroll-area__gutter--dragging
@@ -634,10 +607,6 @@
     background: var(--r-scroll-area-thumb-color-hover);
     inline-size: var(--r-scroll-area-thumb-size-hover);
   }
-  .r-scroll-area
-    > .r-scroll-area__gutters
-    > .r-scroll-area__gutter--horizontal:hover
-    > .r-scroll-area__thumb,
   .r-scroll-area
     > .r-scroll-area__gutters
     > .r-scroll-area__gutter--horizontal.r-scroll-area__gutter--dragging
@@ -646,6 +615,78 @@
     block-size: var(--r-scroll-area-thumb-size-hover);
   }
 
+  /*
+   * Hover only with a pointer that hovers (design/foundations/states.md): on a
+   * touch screen the last thing tapped stays `:hover`, which would leave the
+   * scrollbars shown, the thumb thick and a hidden gutter catching taps.
+   */
+  @media (hover: hover) {
+    /* trigger="hover": shown while the pointer is over the area. */
+    .r-scroll-area.r-scroll-area--hover-trigger:hover
+      > .r-scroll-area__gutters
+      > .r-scroll-area__gutter {
+      opacity: 1;
+      transition-duration: var(--r-scroll-area-duration-fade-in);
+    }
+
+    /*
+     * trigger="scroll": a hidden gutter doesn't catch presses meant for the
+     * content under it. A gutter the pointer is already on (it was shown by
+     * scrolling) stays visible and usable after `hideDelay`, until the pointer
+     * leaves it; a hidden gutter can't become hovered, so it never shows on hover.
+     */
+    .r-scroll-area.r-scroll-area--scroll-trigger
+      > .r-scroll-area__gutters
+      > .r-scroll-area__gutter:hover {
+      opacity: 1;
+      transition-duration: var(--r-scroll-area-duration-fade-in);
+    }
+    .r-scroll-area.r-scroll-area--scroll-trigger
+      > .r-scroll-area__gutters:not(.r-scroll-area__gutters--scrolling):not(
+        .r-scroll-area__gutters--dragging
+      )
+      > .r-scroll-area__gutter:not(:hover) {
+      pointer-events: none;
+    }
+
+    /* Pointed at: the thumb thickens and darkens, as while dragged. */
+    .r-scroll-area
+      > .r-scroll-area__gutters
+      > .r-scroll-area__gutter--vertical:hover
+      > .r-scroll-area__thumb {
+      background: var(--r-scroll-area-thumb-color-hover);
+      inline-size: var(--r-scroll-area-thumb-size-hover);
+    }
+    .r-scroll-area
+      > .r-scroll-area__gutters
+      > .r-scroll-area__gutter--horizontal:hover
+      > .r-scroll-area__thumb {
+      background: var(--r-scroll-area-thumb-color-hover);
+      block-size: var(--r-scroll-area-thumb-size-hover);
+    }
+  }
+
+  /*
+   * Where nothing hovers, trigger="hover" and "scroll" both show the scrollbars
+   * only while the area scrolls or a thumb is dragged, and a hidden gutter
+   * never catches a tap: it goes to the content under it. A scrollbar shown by
+   * scrolling takes the finger, so its thumb can be dragged; the drag keeps it.
+   */
+  @media (hover: none) {
+    .r-scroll-area.r-scroll-area--hover-trigger
+      > .r-scroll-area__gutters:not(.r-scroll-area__gutters--scrolling):not(
+        .r-scroll-area__gutters--dragging
+      )
+      > .r-scroll-area__gutter,
+    .r-scroll-area.r-scroll-area--scroll-trigger
+      > .r-scroll-area__gutters:not(.r-scroll-area__gutters--scrolling):not(
+        .r-scroll-area__gutters--dragging
+      )
+      > .r-scroll-area__gutter {
+      pointer-events: none;
+    }
+  }
+
   /*
    * Scroll-driven thumbs: the browser moves each thumb from the scroll itself,
    * on the compositor, with no script per scroll. The container names its

package/dist/components/search/search-entity.recipe.mjs

@@ -5,7 +5,8 @@ const searchEntity = tv({ slots: {
 	entity: [
 		"flex min-w-0 w-full items-center gap-3 text-left",
 		"rounded-none border-0 py-3 text-foreground",
-		"pointer-coarse:min-h-16",
+		"md:pointer-fine:py-2",
+		"pointer-coarse:min-h-14 pointer-coarse:py-2",
 		listCell,
 		listCellStates,
 		"disabled:cursor-default",
@@ -15,7 +16,7 @@ const searchEntity = tv({ slots: {
 	entityLeading: ["relative flex shrink-0"],
 	entityIcon: [
 		"flex items-center justify-center overflow-hidden",
-		"size-[27px] rounded-sticker bg-fill-muted text-foreground-muted",
+		"size-[27px] rounded-chip bg-fill-muted text-foreground-muted",
 		"[&_svg]:size-3.5"
 	],
 	entityActivity: [

package/dist/components/search/search-message.recipe.mjs

@@ -6,6 +6,7 @@ const searchMessage = tv({ slots: {
 	message: [
 		"w-full text-left",
 		"block rounded-none border-0 py-3 text-foreground",
+		"md:pointer-fine:py-2",
 		listCell,
 		listCellStates,
 		"disabled:cursor-default",

package/dist/components/search/search-thread.recipe.mjs

@@ -2,7 +2,7 @@ import { tv } from "../../lib/tv.mjs";
 //#region src/components/search/search-thread.recipe.ts
 const searchThread = tv({ slots: {
 	thread: ["overflow-hidden", "relative rounded-none border-0 bg-transparent text-foreground shadow-none"],
-	threadHeader: ["py-2", "px-5 pt-3 pb-0"],
+	threadHeader: ["py-2", "px-(--surface-inset) pt-3 pb-0"],
 	threadMeta: [
 		"flex flex-wrap items-center",
 		"mb-0.5 gap-1.5",

package/dist/components/search/search-trigger.mjs

@@ -6,7 +6,7 @@ import { useRender } from "@base-ui/react/use-render";
 //#region src/components/search/search-trigger.tsx
 const searchTrigger = tv({ slots: {
 	root: [
-		"relative inline-flex h-9 w-[clamp(360px,32vw,520px)] max-w-full min-w-0 shrink-0 items-center gap-2 px-3",
+		"relative inline-flex h-(--frame-item-height) w-[clamp(360px,32vw,520px)] max-w-full min-w-0 shrink-0 items-center gap-2 px-3",
 		"rounded-control border-[1.5px] border-line-field bg-layer-card",
 		"text-left font-sans text-body font-normal text-foreground-hint",
 		"select-none outline-none transition-colors duration-100",

package/dist/components/search/search.recipe.mjs

@@ -7,13 +7,17 @@ const search = tv({ slots: {
 		"bg-layer-canvas text-foreground",
 		listColumnMargin
 	],
-	filtersRow: ["shrink-0", "border-b border-line-seam bg-layer-canvas px-(--column-margin) py-3"],
+	filtersRow: [
+		"shrink-0",
+		"border-b border-line-seam bg-layer-canvas px-(--column-margin) py-3",
+		"md:pointer-fine:py-[calc((var(--header-height)-1px-var(--control-height))/2)]"
+	],
 	viewport: ["min-h-0 flex-1 overflow-y-auto scrollbar-list p-4", "bg-layer-canvas px-0 pt-0 pb-4"],
-	summary: ["block", "mb-0 px-5 pt-2 font-sans text-footnote text-foreground-hint"],
+	summary: ["block", "mb-0 px-(--surface-inset) pt-2 font-sans text-footnote text-foreground-hint"],
 	section: ["mb-0"],
 	sectionHeading: [
 		"py-2",
-		"flex items-center gap-2 px-5 pt-3 pb-0",
+		"flex items-center gap-2 px-(--surface-inset) pt-3 pb-0",
 		"font-sans text-footnote font-bold text-foreground-hint"
 	],
 	list: ["flex flex-col", "gap-0.5 py-2"]

package/dist/components/segmented-control/segmented-control.mjs

@@ -12,13 +12,14 @@ const segmentedControl = tv({
 		root: [
 			"inline-flex min-w-0 items-center",
 			"w-fit max-w-full flex-nowrap gap-[3px] rounded-[11px] bg-fill-muted p-[3px]",
+			"[--segment-size:2rem] md:pointer-fine:[--segment-size:var(--control-height)]",
 			"data-overflowing:overflow-x-auto data-overflowing:overscroll-x-contain data-overflowing:scrollbar-none"
 		],
 		item: [
 			"inline-flex min-w-0 shrink-0 items-center gap-1.5",
 			"outline-none disabled:pointer-events-none",
 			"[&_svg]:pointer-events-none [&_svg]:shrink-0",
-			"h-8 justify-center rounded-control border-[1.5px] border-transparent bg-transparent px-3",
+			"h-(--segment-size) justify-center rounded-control border-[1.5px] border-transparent bg-transparent px-3",
 			"font-sans text-callout font-semibold text-foreground-muted",
 			"[&_svg:not([class*='size-'])]:size-4",
 			"hover:bg-fill-medium active:bg-fill-medium",
@@ -42,14 +43,14 @@ const segmentedControl = tv({
 			] }
 		},
 		iconsOnlyBelow: {
-			xs: { root: ["@max-xs:**:data-[slot=segmented-control-item]:relative @max-xs:**:data-[slot=segmented-control-item]:w-8 @max-xs:**:data-[slot=segmented-control-item]:px-0", "@max-xs:**:data-[slot=segmented-control-label]:sr-only @max-xs:**:data-[slot=segmented-control-count]:sr-only"] },
-			sm: { root: ["@max-sm:**:data-[slot=segmented-control-item]:relative @max-sm:**:data-[slot=segmented-control-item]:w-8 @max-sm:**:data-[slot=segmented-control-item]:px-0", "@max-sm:**:data-[slot=segmented-control-label]:sr-only @max-sm:**:data-[slot=segmented-control-count]:sr-only"] },
-			md: { root: ["@max-md:**:data-[slot=segmented-control-item]:relative @max-md:**:data-[slot=segmented-control-item]:w-8 @max-md:**:data-[slot=segmented-control-item]:px-0", "@max-md:**:data-[slot=segmented-control-label]:sr-only @max-md:**:data-[slot=segmented-control-count]:sr-only"] },
-			lg: { root: ["@max-lg:**:data-[slot=segmented-control-item]:relative @max-lg:**:data-[slot=segmented-control-item]:w-8 @max-lg:**:data-[slot=segmented-control-item]:px-0", "@max-lg:**:data-[slot=segmented-control-label]:sr-only @max-lg:**:data-[slot=segmented-control-count]:sr-only"] },
-			xl: { root: ["@max-xl:**:data-[slot=segmented-control-item]:relative @max-xl:**:data-[slot=segmented-control-item]:w-8 @max-xl:**:data-[slot=segmented-control-item]:px-0", "@max-xl:**:data-[slot=segmented-control-label]:sr-only @max-xl:**:data-[slot=segmented-control-count]:sr-only"] },
-			"2xl": { root: ["@max-2xl:**:data-[slot=segmented-control-item]:relative @max-2xl:**:data-[slot=segmented-control-item]:w-8 @max-2xl:**:data-[slot=segmented-control-item]:px-0", "@max-2xl:**:data-[slot=segmented-control-label]:sr-only @max-2xl:**:data-[slot=segmented-control-count]:sr-only"] }
+			xs: { root: ["@max-xs:**:data-[slot=segmented-control-item]:relative @max-xs:**:data-[slot=segmented-control-item]:w-(--segment-size) @max-xs:**:data-[slot=segmented-control-item]:px-0", "@max-xs:**:data-[slot=segmented-control-label]:sr-only @max-xs:**:data-[slot=segmented-control-count]:sr-only"] },
+			sm: { root: ["@max-sm:**:data-[slot=segmented-control-item]:relative @max-sm:**:data-[slot=segmented-control-item]:w-(--segment-size) @max-sm:**:data-[slot=segmented-control-item]:px-0", "@max-sm:**:data-[slot=segmented-control-label]:sr-only @max-sm:**:data-[slot=segmented-control-count]:sr-only"] },
+			md: { root: ["@max-md:**:data-[slot=segmented-control-item]:relative @max-md:**:data-[slot=segmented-control-item]:w-(--segment-size) @max-md:**:data-[slot=segmented-control-item]:px-0", "@max-md:**:data-[slot=segmented-control-label]:sr-only @max-md:**:data-[slot=segmented-control-count]:sr-only"] },
+			lg: { root: ["@max-lg:**:data-[slot=segmented-control-item]:relative @max-lg:**:data-[slot=segmented-control-item]:w-(--segment-size) @max-lg:**:data-[slot=segmented-control-item]:px-0", "@max-lg:**:data-[slot=segmented-control-label]:sr-only @max-lg:**:data-[slot=segmented-control-count]:sr-only"] },
+			xl: { root: ["@max-xl:**:data-[slot=segmented-control-item]:relative @max-xl:**:data-[slot=segmented-control-item]:w-(--segment-size) @max-xl:**:data-[slot=segmented-control-item]:px-0", "@max-xl:**:data-[slot=segmented-control-label]:sr-only @max-xl:**:data-[slot=segmented-control-count]:sr-only"] },
+			"2xl": { root: ["@max-2xl:**:data-[slot=segmented-control-item]:relative @max-2xl:**:data-[slot=segmented-control-item]:w-(--segment-size) @max-2xl:**:data-[slot=segmented-control-item]:px-0", "@max-2xl:**:data-[slot=segmented-control-label]:sr-only @max-2xl:**:data-[slot=segmented-control-count]:sr-only"] }
 		},
-		iconsOnlyMeasured: { true: { root: ["data-icons-only:**:data-[slot=segmented-control-item]:relative data-icons-only:**:data-[slot=segmented-control-item]:w-8 data-icons-only:**:data-[slot=segmented-control-item]:px-0", "data-icons-only:**:data-[slot=segmented-control-label]:sr-only data-icons-only:**:data-[slot=segmented-control-count]:sr-only"] } }
+		iconsOnlyMeasured: { true: { root: ["data-icons-only:**:data-[slot=segmented-control-item]:relative data-icons-only:**:data-[slot=segmented-control-item]:w-(--segment-size) data-icons-only:**:data-[slot=segmented-control-item]:px-0", "data-icons-only:**:data-[slot=segmented-control-label]:sr-only data-icons-only:**:data-[slot=segmented-control-count]:sr-only"] } }
 	}
 });
 const ICONS_ONLY_PRESETS = /* @__PURE__ */ new Set([

package/dist/components/select/select.mjs

@@ -17,7 +17,7 @@ const select = tv({
 			"**:data-[slot='button-content']:w-full **:data-[slot='button-content']:justify-between",
 			"[&>span[data-slot='select-trigger-content']]:min-w-0 [&>span[data-slot='select-trigger-content']]:flex-1",
 			"[&_[data-slot='select-trigger-content']_svg]:shrink-0",
-			"h-control w-full gap-2 pr-3 pl-3.5",
+			"h-control w-full gap-2 rounded-(--control-radius) pr-3 pl-3.5",
 			"border-[1.5px] border-line-field",
 			"hover:bg-none",
 			"text-subhead font-semibold text-foreground",
@@ -102,7 +102,7 @@ const select = tv({
 			trigger: [
 				"px-3 text-field font-field",
 				"**:data-[slot='button-content']:font-field **:data-[slot='select-value']:font-field",
-				"h-control py-0",
+				"h-control rounded-(--control-radius) py-0",
 				"data-placeholder:font-field"
 			],
 			item: ["text-field font-field", "**:data-[slot='select-item-text']:font-field"],

package/dist/components/sidebar/index.d.mts

@@ -1,5 +1,5 @@
 import { SidebarBody, SidebarBodyProps, SidebarContent, SidebarContentProps, SidebarGroupLabel, SidebarGroupLabelProps, SidebarHeader, SidebarHeaderProps, SidebarHeaderTitle, SidebarHeaderTitleProps, SidebarRoot, SidebarRootProps } from "./sidebar.mjs";
 import { SidebarMenu, SidebarMenuAside, SidebarMenuAsideProps, SidebarMenuCount, SidebarMenuCountProps, SidebarMenuIcon, SidebarMenuIconProps, SidebarMenuProps, SidebarMenuTitle, SidebarMenuTitleProps } from "./sidebar-menu.mjs";
 import { SidebarItem, SidebarItemAside, SidebarItemAsideProps, SidebarItemChannelIcon, SidebarItemChannelIconProps, SidebarItemContent, SidebarItemContentProps, SidebarItemCount, SidebarItemCountProps, SidebarItemCountSeparator, SidebarItemCountSeparatorProps, SidebarItemIcon, SidebarItemIconProps, SidebarItemIndicator, SidebarItemIndicatorProps, SidebarItemMeta, SidebarItemMetaIcon, SidebarItemMetaIconProps, SidebarItemMetaProps, SidebarItemProps, SidebarItemStatus, SidebarItemStatusProps, SidebarItemSubtitle, SidebarItemSubtitleProps, SidebarItemThreadCount, SidebarItemThreadCountProps, SidebarItemTitle, SidebarItemTitleProps } from "./sidebar-item.mjs";
-import { SidebarControl, SidebarControlProps, SidebarList, SidebarListProps, SidebarSection, SidebarSectionAttention, SidebarSectionAttentionProps, SidebarSectionChevron, SidebarSectionChevronProps, SidebarSectionControl, SidebarSectionControlProps, SidebarSectionControls, SidebarSectionControlsProps, SidebarSectionCount, SidebarSectionCountProps, SidebarSectionDisclosure, SidebarSectionDisclosureProps, SidebarSectionEmpty, SidebarSectionEmptyProps, SidebarSectionHeader, SidebarSectionHeaderProps, SidebarSectionProps, SidebarSectionTitle, SidebarSectionTitleProps, SidebarSectionTrailing, SidebarSectionTrailingProps } from "./sidebar-section.mjs";
-export { SidebarBody, type SidebarBodyProps, SidebarContent, type SidebarContentProps, SidebarControl, type SidebarControlProps, SidebarGroupLabel, type SidebarGroupLabelProps, SidebarHeader, type SidebarHeaderProps, SidebarHeaderTitle, type SidebarHeaderTitleProps, SidebarItem, SidebarItemAside, type SidebarItemAsideProps, SidebarItemChannelIcon, type SidebarItemChannelIconProps, SidebarItemContent, type SidebarItemContentProps, SidebarItemCount, type SidebarItemCountProps, SidebarItemCountSeparator, type SidebarItemCountSeparatorProps, SidebarItemIcon, type SidebarItemIconProps, SidebarItemIndicator, type SidebarItemIndicatorProps, SidebarItemMeta, SidebarItemMetaIcon, type SidebarItemMetaIconProps, type SidebarItemMetaProps, type SidebarItemProps, SidebarItemStatus, type SidebarItemStatusProps, SidebarItemSubtitle, type SidebarItemSubtitleProps, SidebarItemThreadCount, type SidebarItemThreadCountProps, SidebarItemTitle, type SidebarItemTitleProps, SidebarList, type SidebarListProps, SidebarMenu, SidebarMenuAside, type SidebarMenuAsideProps, SidebarMenuCount, type SidebarMenuCountProps, SidebarMenuIcon, type SidebarMenuIconProps, type SidebarMenuProps, SidebarMenuTitle, type SidebarMenuTitleProps, SidebarRoot, type SidebarRootProps, SidebarSection, SidebarSectionAttention, type SidebarSectionAttentionProps, SidebarSectionChevron, type SidebarSectionChevronProps, SidebarSectionControl, type SidebarSectionControlProps, SidebarSectionControls, type SidebarSectionControlsProps, SidebarSectionCount, type SidebarSectionCountProps, SidebarSectionDisclosure, type SidebarSectionDisclosureProps, SidebarSectionEmpty, type SidebarSectionEmptyProps, SidebarSectionHeader, type SidebarSectionHeaderProps, type SidebarSectionProps, SidebarSectionTitle, type SidebarSectionTitleProps, SidebarSectionTrailing, type SidebarSectionTrailingProps };
+import { SidebarControl, SidebarControlProps, SidebarList, SidebarListProps, SidebarSection, SidebarSectionAttention, SidebarSectionAttentionProps, SidebarSectionChevron, SidebarSectionChevronProps, SidebarSectionControl, SidebarSectionControlProps, SidebarSectionControls, SidebarSectionControlsProps, SidebarSectionCount, SidebarSectionCountProps, SidebarSectionDisclosure, SidebarSectionDisclosureProps, SidebarSectionEmpty, SidebarSectionEmptyProps, SidebarSectionEndChevron, SidebarSectionEndChevronProps, SidebarSectionHeader, SidebarSectionHeaderProps, SidebarSectionProps, SidebarSectionTitle, SidebarSectionTitleProps, SidebarSectionTrailing, SidebarSectionTrailingProps } from "./sidebar-section.mjs";
+export { SidebarBody, type SidebarBodyProps, SidebarContent, type SidebarContentProps, SidebarControl, type SidebarControlProps, SidebarGroupLabel, type SidebarGroupLabelProps, SidebarHeader, type SidebarHeaderProps, SidebarHeaderTitle, type SidebarHeaderTitleProps, SidebarItem, SidebarItemAside, type SidebarItemAsideProps, SidebarItemChannelIcon, type SidebarItemChannelIconProps, SidebarItemContent, type SidebarItemContentProps, SidebarItemCount, type SidebarItemCountProps, SidebarItemCountSeparator, type SidebarItemCountSeparatorProps, SidebarItemIcon, type SidebarItemIconProps, SidebarItemIndicator, type SidebarItemIndicatorProps, SidebarItemMeta, SidebarItemMetaIcon, type SidebarItemMetaIconProps, type SidebarItemMetaProps, type SidebarItemProps, SidebarItemStatus, type SidebarItemStatusProps, SidebarItemSubtitle, type SidebarItemSubtitleProps, SidebarItemThreadCount, type SidebarItemThreadCountProps, SidebarItemTitle, type SidebarItemTitleProps, SidebarList, type SidebarListProps, SidebarMenu, SidebarMenuAside, type SidebarMenuAsideProps, SidebarMenuCount, type SidebarMenuCountProps, SidebarMenuIcon, type SidebarMenuIconProps, type SidebarMenuProps, SidebarMenuTitle, type SidebarMenuTitleProps, SidebarRoot, type SidebarRootProps, SidebarSection, SidebarSectionAttention, type SidebarSectionAttentionProps, SidebarSectionChevron, type SidebarSectionChevronProps, SidebarSectionControl, type SidebarSectionControlProps, SidebarSectionControls, type SidebarSectionControlsProps, SidebarSectionCount, type SidebarSectionCountProps, SidebarSectionDisclosure, type SidebarSectionDisclosureProps, SidebarSectionEmpty, type SidebarSectionEmptyProps, SidebarSectionEndChevron, type SidebarSectionEndChevronProps, SidebarSectionHeader, type SidebarSectionHeaderProps, type SidebarSectionProps, SidebarSectionTitle, type SidebarSectionTitleProps, SidebarSectionTrailing, type SidebarSectionTrailingProps };

package/dist/components/sidebar/sidebar-item.recipe.mjs

@@ -6,7 +6,8 @@ const sidebarItemRecipe = tv({
 		sidebarItem: [
 			"group/sidebar-item flex w-full items-center text-left",
 			listCell,
-			"h-[38px] gap-2 rounded-none border-0 py-0",
+			"h-(--row-height) gap-2 rounded-none border-0 py-0",
+			"md:pointer-fine:*:data-[slot=avatar]:-mr-[3px]",
 			"md:py-0 md:[@media(max-height:600px)]:py-0",
 			"max-md:h-auto max-md:min-h-11 max-md:py-2.5",
 			"font-sans text-subhead font-medium text-foreground",
@@ -18,13 +19,13 @@ const sidebarItemRecipe = tv({
 		sidebarItemIcon: [
 			"flex shrink-0 items-center justify-center",
 			"[&>svg]:shrink-0",
-			"size-[19px] text-foreground-hint [&>svg]:size-4 [&>svg]:stroke-2",
+			"size-[19px] md:pointer-fine:size-4 text-foreground-hint [&>svg]:size-4 [&>svg]:stroke-2",
 			"group-data-active/sidebar-item:text-sticker-ink"
 		],
 		sidebarItemChannelIcon: [
 			"flex shrink-0 items-center justify-center",
 			"[&_svg]:shrink-0",
-			"size-[19px] text-foreground-hint [&_svg]:size-4 [&_svg]:stroke-2",
+			"size-[19px] md:pointer-fine:size-4 text-foreground-hint [&_svg]:size-4 [&_svg]:stroke-2",
 			"group-data-active/sidebar-item:text-sticker-ink"
 		],
 		sidebarItemContent: ["has-[>[data-slot=sidebar-item-meta-icon]]:items-center"],
@@ -79,7 +80,7 @@ const sidebarItemRecipe = tv({
 			false: {},
 			true: { sidebarItem: [
 				"h-auto items-start whitespace-normal",
-				"min-h-[38px] py-[9px] md:py-[9px] md:[@media(max-height:600px)]:py-[9px]",
+				"min-h-(--row-height) py-[calc((var(--row-height)-20px)/2)] md:py-[calc((var(--row-height)-20px)/2)] md:[@media(max-height:600px)]:py-[calc((var(--row-height)-20px)/2)]",
 				"**:data-[slot=sidebar-item-channel-icon]:h-lh **:data-[slot=sidebar-item-icon]:h-lh",
 				"**:data-[slot=sidebar-item-meta-icon]:h-lh",
 				"*:data-[slot=avatar]:mt-[calc((1lh-19px)/2)]"

package/dist/components/sidebar/sidebar-section.d.mts

@@ -18,8 +18,15 @@ export type SidebarSectionEmptyProps = Omit<ComponentProps<typeof Collapsible.Pa
   className?: string;
 };
 export declare function SidebarSectionEmpty({ className, render, ...props }: SidebarSectionEmptyProps): import("react").JSX.Element;
-export type SidebarSectionHeaderProps = useRender.ComponentProps<"div">;
-export declare function SidebarSectionHeader({ className, render, ...props }: SidebarSectionHeaderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SidebarSectionHeaderProps = useRender.ComponentProps<"div"> & {
+  /**
+   * The header ends with a `SidebarSectionEndChevron`: with a mouse on a
+   * desktop the chevron is that last control, so the one before the title
+   * hides. On a touch screen the chevron stays before the title.
+   */
+  chevronAtEnd?: boolean;
+};
+export declare function SidebarSectionHeader({ className, render, chevronAtEnd, ...props }: SidebarSectionHeaderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export type SidebarSectionDisclosureProps = useRender.ComponentProps<"button">;
 export declare function SidebarSectionDisclosure({ className, render, ...props }: SidebarSectionDisclosureProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export type SidebarSectionChevronProps = useRender.ComponentProps<"svg">;
@@ -36,6 +43,8 @@ export declare function SidebarSectionTrailing({ className, render, ...props }:
 export declare function SidebarSectionControls({ className, render, ...props }: SidebarSectionControlsProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export type SidebarSectionControlProps = useRender.ComponentProps<"button"> & Pick<ButtonProps, "size" | "variant" | "loading" | "loadingLabel">;
 export declare function SidebarSectionControl({ className, render, size, variant, loading, loadingLabel, children, disabled, ...props }: SidebarSectionControlProps): import("react").JSX.Element;
+export type SidebarSectionEndChevronProps = Omit<SidebarSectionControlProps, "children" | "render">;
+export declare function SidebarSectionEndChevron({ className, ...props }: SidebarSectionEndChevronProps): import("react").JSX.Element;
 export type SidebarControlProps = SidebarSectionControlProps;
 export declare const SidebarControl: typeof SidebarSectionControl;
 //#endregion

package/dist/components/sidebar/sidebar-section.mjs

@@ -42,10 +42,11 @@ function SidebarSectionEmpty({ className, render, ...props }) {
 		...mergeProps(defaultProps, props)
 	});
 }
-function SidebarSectionHeader({ className, render, ...props }) {
+function SidebarSectionHeader({ className, render, chevronAtEnd = false, ...props }) {
 	const { sidebarSectionHeader } = sidebarSectionRecipe();
 	const defaultProps = {
 		"data-slot": "sidebar-section-header",
+		"data-chevron-at-end": chevronAtEnd ? "" : void 0,
 		className: sidebarSectionHeader({ className })
 	};
 	return useRender({
@@ -67,6 +68,7 @@ function SidebarSectionDisclosure({ className, render, ...props }) {
 	});
 }
 function SidebarSectionChevron({ className, render, ...props }) {
+	const { sidebarSectionChevronSlot } = sidebarSectionRecipe();
 	const defaultProps = {
 		"data-slot": "sidebar-section-chevron",
 		className: cn("size-3", className)
@@ -76,7 +78,7 @@ function SidebarSectionChevron({ className, render, ...props }) {
 		props: mergeProps(defaultProps, props)
 	});
 	return /* @__PURE__ */ jsx("span", {
-		className: "flex size-4.5 shrink-0 items-center justify-center",
+		className: sidebarSectionChevronSlot(),
 		"aria-hidden": "true",
 		children: chevron
 	});
@@ -159,6 +161,30 @@ function SidebarSectionControl({ className, render, size = "icon-md", variant =
 		children
 	});
 }
+/**
+* The section's chevron as the last of its controls, with a mouse on a
+* desktop (sidebar.md, Section headers): a SidebarSectionControl that is a
+* second trigger of the section, so it toggles it and turns with it. The
+* title stays the section's one toggle for the keyboard and a screen reader,
+* so this one is out of the tab order and the accessibility tree, and a press
+* doesn't move focus onto it (focus on a hidden element would be read as
+* nothing). Put it in a `SidebarSectionHeader` with `chevronAtEnd`.
+*/
+function keepFocus(event) {
+	event.preventDefault();
+}
+function SidebarSectionEndChevron({ className, ...props }) {
+	const { sidebarSectionEndChevron } = sidebarSectionRecipe();
+	return /* @__PURE__ */ jsx(SidebarSectionControl, {
+		"data-end-chevron": "",
+		render: /* @__PURE__ */ jsx(Collapsible.Trigger, {}),
+		tabIndex: -1,
+		"aria-hidden": true,
+		className: sidebarSectionEndChevron({ className }),
+		...mergeProps({ onMouseDown: keepFocus }, props),
+		children: /* @__PURE__ */ jsx(ChevronRight, {})
+	});
+}
 const SidebarControl = SidebarSectionControl;
 //#endregion
-export { SidebarControl, SidebarList, SidebarSection, SidebarSectionAttention, SidebarSectionChevron, SidebarSectionControl, SidebarSectionControls, SidebarSectionCount, SidebarSectionDisclosure, SidebarSectionEmpty, SidebarSectionHeader, SidebarSectionTitle, SidebarSectionTrailing };
+export { SidebarControl, SidebarList, SidebarSection, SidebarSectionAttention, SidebarSectionChevron, SidebarSectionControl, SidebarSectionControls, SidebarSectionCount, SidebarSectionDisclosure, SidebarSectionEmpty, SidebarSectionEndChevron, SidebarSectionHeader, SidebarSectionTitle, SidebarSectionTrailing };

package/dist/components/sidebar/sidebar-section.recipe.mjs

@@ -2,9 +2,9 @@ import { tv } from "../../lib/tv.mjs";
 //#region src/components/sidebar/sidebar-section.recipe.ts
 const sidebarSectionRecipe = tv({ slots: {
 	sidebarSection: ["group/section", "px-0"],
-	sidebarList: ["flex flex-col gap-0.5 py-2"],
+	sidebarList: ["flex flex-col gap-0.5 py-2 md:pointer-fine:pt-1"],
 	sidebarSectionEmpty: [
-		"px-5 py-2",
+		"px-(--surface-inset) md:pointer-fine:pl-(--sidebar-text-axis) py-2",
 		"font-sans text-footnote",
 		"text-foreground-hint"
 	],
@@ -13,6 +13,7 @@ const sidebarSectionRecipe = tv({ slots: {
 		"group/section-header",
 		"my-0 h-auto gap-2 pt-4 pb-0 pl-5",
 		"pr-[calc(max(0px,calc(8px-var(--scrollbar-size,0px)))+12px)]",
+		"md:pointer-fine:min-h-6 md:pointer-fine:pt-2 md:pointer-fine:pl-(--sidebar-glyph-axis) md:pointer-fine:pr-[calc(max(0px,calc(8px-var(--scrollbar-size,0px)))+10px)]",
 		"not-pointer-fine:pb-1.5"
 	],
 	sidebarSectionDisclosure: [
@@ -24,6 +25,8 @@ const sidebarSectionRecipe = tv({ slots: {
 		"outline-none focus-visible:shadow-focus",
 		"**:data-[slot=sidebar-section-chevron]:size-3.5 **:data-[slot=sidebar-section-chevron]:stroke-2"
 	],
+	sidebarSectionChevronSlot: ["flex size-4.5 shrink-0 items-center justify-center", "md:pointer-fine:in-data-chevron-at-end:hidden"],
+	sidebarSectionEndChevron: ["hidden md:pointer-fine:flex", "[&_svg]:transition-transform data-panel-open:[&_svg]:rotate-90"],
 	sidebarSectionTitle: ["min-w-0 truncate"],
 	sidebarSectionCount: ["font-mono text-mono-meta font-normal tabular-nums text-foreground-hint"],
 	sidebarSectionAttention: ["inline-flex min-w-4.5 shrink-0 items-center justify-center", "group-data-open/section:hidden"],
@@ -31,12 +34,14 @@ const sidebarSectionRecipe = tv({ slots: {
 	sidebarSectionControls: ["flex shrink-0 items-center gap-1", "[&>[data-icon-inset]:nth-last-child(1_of_:not([data-base-ui-focus-guard],[aria-owns]))]:-mr-icon-inset"],
 	sidebarSectionControl: [
 		"relative flex h-6 w-auto min-w-6 shrink-0 items-center justify-center p-0 -my-1",
+		"md:pointer-fine:size-auto md:pointer-fine:h-6 md:pointer-fine:min-w-6",
 		"[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
 		"[--icon-inset:calc((--spacing(6)-14px)/2)]",
 		"text-foreground-hint",
 		"hover:text-foreground active:text-foreground focus-visible:text-foreground",
 		"data-popup-open:bg-fill-medium data-popup-open:text-foreground",
 		"not-pointer-fine:after:absolute not-pointer-fine:after:inset-[-11px] not-pointer-fine:after:content-['']",
+		"pointer-fine:after:absolute pointer-fine:after:inset-[-3px] pointer-fine:after:content-['']",
 		"not-pointer-fine:not-first:after:left-[-3px] not-pointer-fine:not-last:after:right-[-3px]"
 	]
 } });

package/dist/components/sidebar/sidebar.recipe.mjs

@@ -10,16 +10,16 @@ const sidebarRecipe = tv({ slots: {
 	],
 	sidebarHeader: [
 		"flex items-center",
-		"h-(--shell-header-height,56px) shrink-0 gap-2 border-b border-line-seam px-(--column-margin)",
+		"h-(--shell-header-height,var(--header-height)) shrink-0 gap-2 border-b border-line-seam px-(--column-margin)",
 		"bg-layer-sidebar text-foreground",
 		"max-md:bg-layer-frame max-md:text-foreground-on-frame",
 		headEdgePull,
-		"[@media(max-height:600px)]:h-12"
+		"[@media(max-height:600px)]:h-(--header-height-short)"
 	],
 	sidebarHeaderMask: ["pointer-events-none absolute inset-x-0 top-0 -z-10 hidden"],
 	sidebarHeaderMaskLayer: ["absolute inset-x-0 top-0"],
 	sidebarHeaderTitle: ["truncate font-bold", "font-sans text-headline text-foreground max-md:text-foreground-on-frame"],
-	sidebarGroupLabel: ["px-5 pt-4 pb-0", "font-sans text-footnote font-bold normal-case tracking-normal text-foreground-hint"],
+	sidebarGroupLabel: ["px-5 pt-4 pb-0 md:pointer-fine:px-(--sidebar-glyph-axis) md:pointer-fine:pt-2", "font-sans text-footnote font-bold normal-case tracking-normal text-foreground-hint"],
 	sidebarBody: ["relative flex min-h-0 flex-1 overflow-hidden", "bg-layer-sidebar max-md:bg-layer-canvas"],
 	sidebarContent: ["relative flex min-h-0 min-w-0 flex-1"],
 	sidebarViewport: ["size-full min-h-0  flex-1 overflow-x-hidden overflow-y-auto"],

package/dist/components/switch/switch.mjs

@@ -9,9 +9,9 @@ const switchRecipe = tv({ slots: {
 		"motion-reduce:transition-none",
 		"not-data-disabled:cursor-pointer",
 		"data-disabled:cursor-not-allowed",
-		"after:absolute after:-inset-x-3 after:-inset-y-2 after:content-['']",
+		"after:absolute after:-inset-x-3 after:-inset-y-[calc((44px-var(--switch-height))/2+1.5px)] after:content-['']",
 		"focus-visible:ring-line-strong focus-visible:ring-offset-layer-sidebar",
-		"h-[30px] w-[50px] rounded-full border-[1.5px] border-line-strong bg-fill-muted p-[2.5px]",
+		"h-(--switch-height) w-(--switch-width) rounded-full border-[1.5px] border-line-strong bg-fill-muted p-[2.5px]",
 		"duration-150",
 		"data-checked:border-sticker-ink data-checked:bg-selected data-checked:ring-[1.5px] data-checked:ring-sticker-edge",
 		"focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:shadow-focus",
@@ -22,7 +22,7 @@ const switchRecipe = tv({ slots: {
 		"pointer-events-none block",
 		"transition-transform ease-out",
 		"motion-reduce:transition-none",
-		"size-[22px] rounded-full bg-layer-card shadow-[0_0_0_1.5px_var(--line-strong)] data-[checked]:translate-x-5",
+		"size-[calc(var(--switch-height)-8px)] rounded-full bg-layer-card shadow-[0_0_0_1.5px_var(--line-strong)] data-checked:translate-x-[calc(var(--switch-width)-var(--switch-height))]",
 		"duration-220 ease-slide",
 		"data-checked:bg-sticker-paper data-checked:shadow-[0_0_0_1.5px_var(--sticker-ink)]",
 		"data-disabled:bg-fill-muted data-disabled:shadow-[0_0_0_1.5px_var(--foreground-disabled)]",

package/dist/components/tabs/tabs.mjs

@@ -41,7 +41,7 @@ const tabs = tv({
 			default: {
 				list: ["gap-0.5"],
 				tab: [
-					"h-8 justify-center gap-1.5 rounded-control border-[1.5px] border-transparent px-3",
+					"h-8 md:pointer-fine:h-control justify-center gap-1.5 rounded-control border-[1.5px] border-transparent px-3",
 					"after:inset-x-0 after:-inset-y-1.5",
 					"hover:bg-fill-medium active:bg-fill-medium",
 					"data-active:border-sticker-ink data-active:bg-selected data-active:font-bold data-active:text-sticker-ink data-active:ring-[1.5px] data-active:ring-sticker-edge",

package/dist/components/task-board/task-board-column.recipe.mjs

@@ -8,7 +8,7 @@ const taskBoardColumn = tv({ slots: {
 	],
 	trigger: [
 		"group flex w-full touch-manipulation items-center justify-between text-left outline-none",
-		"min-h-8 gap-2 rounded-control",
+		"min-h-8 md:pointer-fine:min-h-control gap-2 rounded-control",
 		"font-sans text-footnote font-bold text-foreground-muted",
 		"data-[panel-open]:mb-2",
 		"focus-visible:shadow-focus"

package/dist/components/task-list/task-list-section.recipe.mjs

@@ -5,7 +5,7 @@ const taskListSection = tv({ slots: {
 	trigger: [
 		"group flex w-full touch-manipulation items-center text-left outline-none",
 		"disabled:cursor-default",
-		"min-h-8 justify-start gap-2 rounded-control",
+		"min-h-8 md:pointer-fine:min-h-control justify-start gap-2 rounded-control",
 		"font-sans text-footnote font-bold text-foreground-hint",
 		"focus-visible:shadow-focus"
 	],

package/dist/components/tasks/tasks-panel.recipe.mjs

@@ -5,7 +5,8 @@ const tasksPanel = tv({ slots: {
 	toolbar: [
 		"grid shrink-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-2",
 		"@min-md/tasks:flex @min-md/tasks:flex-wrap @min-md/tasks:items-center @min-md/tasks:justify-between",
-		"min-h-14 border-b border-line-seam bg-layer-canvas px-5 py-3",
+		"min-h-(--header-height) border-b border-line-seam bg-layer-canvas px-(--surface-inset) py-3",
+		"md:pointer-fine:@min-[40rem]/tasks:py-0",
 		"@max-md/tasks:px-4"
 	],
 	toolbarGroup: ["flex flex-wrap items-center gap-2"],
@@ -20,14 +21,14 @@ const tasksPanel = tv({ slots: {
 	toolbarLabel: [
 		"inline-flex items-center",
 		"[&_svg]:size-3.5 [&_svg]:shrink-0 [&>svg:last-child]:size-3",
-		"h-8 gap-1.5 rounded-control px-2.5",
+		"h-8 md:pointer-fine:h-control gap-1.5 rounded-control px-2.5",
 		"bg-transparent inset-ring inset-ring-line-seam",
 		"font-sans text-footnote font-semibold text-foreground-muted whitespace-nowrap"
 	],
 	viewport: [
 		"min-h-0 flex-1 overflow-auto overscroll-contain p-4",
 		"pb-[calc(1rem+env(safe-area-inset-bottom,0px))]",
-		"bg-layer-canvas px-5",
+		"bg-layer-canvas px-(--surface-inset)",
 		"@max-md/tasks:px-4"
 	],
 	empty: ["flex h-full flex-col items-center justify-center"]

package/dist/components/text-selection-toolbar/text-selection-toolbar.recipe.mjs

@@ -8,7 +8,7 @@ const textSelectionToolbar = tv({ slots: {
 	],
 	button: [
 		"flex shrink-0 items-center gap-1.5 outline-none transition-colors",
-		"h-7 rounded-chip px-2.5 whitespace-nowrap text-foreground",
+		"h-7 rounded-chip md:pointer-fine:h-control md:pointer-fine:rounded-control px-2.5 whitespace-nowrap text-foreground",
 		"hover:bg-fill-medium active:bg-fill-medium",
 		"focus-visible:shadow-focus",
 		"[&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-foreground-muted"

package/dist/components/textarea/textarea.mjs

@@ -6,7 +6,7 @@ const textarea = tv({ slots: { root: [
 	"scroll-pb-(--ta-scroll-pb,0)",
 	"font-heading text-field font-field outline-none",
 	"py-2.5",
-	"rounded-control border-[1.5px] border-line-field bg-layer-card",
+	"rounded-(--control-radius) border-[1.5px] border-line-field bg-layer-card",
 	"text-foreground placeholder:text-foreground-hint",
 	"shadow-none transition-shadow duration-90 ease-out focus-visible:shadow-focus",
 	"data-invalid:border-danger-strong",

package/dist/components/thread-panel/thread-panel.recipe.mjs

@@ -4,7 +4,7 @@ import { panelHeadActions, panelHeadEdges } from "../panel/panel-header.recipe.m
 const threadPanel = tv({ slots: {
 	root: ["isolate flex size-full min-h-0  flex-col", "relative bg-layer-canvas font-sans text-foreground"],
 	header: [
-		"flex h-(--shell-header-height,56px) shrink-0 items-center gap-3 max-md:gap-2",
+		"flex h-(--shell-header-height,var(--header-height)) shrink-0 items-center gap-3 max-md:gap-2",
 		panelHeadEdges,
 		"border-b border-line-seam bg-layer-canvas"
 	],
@@ -19,7 +19,7 @@ const threadPanel = tv({ slots: {
 	search: [
 		"relative z-20 flex shrink-0 items-center gap-1.5 py-2",
 		"[&>[data-slot=input-group]]:min-w-0 *:data-[slot=input-group]:flex-1",
-		"border-b border-line-hairline bg-layer-canvas px-5"
+		"border-b border-line-hairline bg-layer-canvas px-(--surface-inset)"
 	],
 	searchTrailing: ["ml-auto flex shrink-0 items-center gap-1.5"],
 	searchCount: ["shrink-0 whitespace-nowrap font-mono tabular-nums", "text-mono-meta text-foreground-hint"],
@@ -28,7 +28,7 @@ const threadPanel = tv({ slots: {
 		"border-b border-line-hairline bg-transparent pb-timeline-end",
 		"**:data-message-item:bg-transparent"
 	],
-	replySummary: ["pt-timeline-start", "px-5"],
+	replySummary: ["pt-timeline-start", "px-(--surface-inset)"],
 	replyCount: ["my-timeline-row border-b pb-2 text-center font-mono", "border-line-hairline text-mono-meta text-foreground-hint"],
 	footer: ["pt-0", "text-caption text-foreground-hint"]
 } });

package/dist/components/toggle-group/toggle-group.mjs

@@ -14,7 +14,7 @@ const toggleGroup = tv({ slots: {
 		"gap-[3px] rounded-[11px] bg-fill-muted p-[3px]"
 	],
 	item: [
-		"inline-flex h-8 min-w-0 shrink-0 items-center justify-center gap-1.5",
+		"inline-flex h-8 md:pointer-fine:h-control min-w-0 shrink-0 items-center justify-center gap-1.5",
 		"whitespace-nowrap",
 		"outline-2 outline-offset-2 outline-transparent transition-[background-color,color,box-shadow,transform] duration-100",
 		"disabled:pointer-events-none data-disabled:cursor-not-allowed",

package/dist/components/web-top-bar/index.d.mts

@@ -0,0 +1,2 @@
+import { WebTopBarCenter, WebTopBarCenterProps, WebTopBarEnd, WebTopBarEndProps, WebTopBarRoot, WebTopBarRootProps, WebTopBarStart, WebTopBarStartProps } from "./web-top-bar.mjs";
+export { WebTopBarCenter, type WebTopBarCenterProps, WebTopBarEnd, type WebTopBarEndProps, WebTopBarRoot, type WebTopBarRootProps, WebTopBarStart, type WebTopBarStartProps };