entangle-ui 0.11.0 → 0.12.0

package/CHANGELOG.md

@@ -1,5 +1,78 @@
 # entangle-ui
 
+## 0.12.0
+
+### Minor Changes
+
+- [#109](https://github.com/SebastianWebdev/entangle-ui/pull/109) [`b61bfbd`](https://github.com/SebastianWebdev/entangle-ui/commit/b61bfbda7608652cdbcc68c7235980c6a113a9b4) Thanks [@SebastianWebdev](https://github.com/SebastianWebdev)! - **E1 — AppShell top-chrome + MenuBar fill/inset.** `AppShell.MenuBar` now paints
+  the menu-bar chrome background (`--etui-shell-menubar-bg`) on the slot, and
+  `MenuBar` stretches to fill its host slot so the top chrome reads as one
+  continuous strip instead of a lighter content-width block. MenuBar triggers now
+  inset their hover/active fill (rounded, vertically centered) from the chrome
+  edges. Docs clarify that side toolbar slots (`AppShell.Toolbar position="left|right"`)
+  are the intended home for docked panels. Visual default change — no API change.
+
+- [#109](https://github.com/SebastianWebdev/entangle-ui/pull/109) [`b61bfbd`](https://github.com/SebastianWebdev/entangle-ui/commit/b61bfbda7608652cdbcc68c7235980c6a113a9b4) Thanks [@SebastianWebdev](https://github.com/SebastianWebdev)! - **G1 — Align `Button` / `IconButton` icon API.** `IconButton` now accepts an
+  optional `icon` prop mirroring `Button`'s `icon`, so `<IconButton icon={…} />`
+  type-checks and the two components share one API. `children` still works for
+  back-compat (now optional); when both are set, `icon` wins. Additive.
+
+- [#109](https://github.com/SebastianWebdev/entangle-ui/pull/109) [`b61bfbd`](https://github.com/SebastianWebdev/entangle-ui/commit/b61bfbda7608652cdbcc68c7235980c6a113a9b4) Thanks [@SebastianWebdev](https://github.com/SebastianWebdev)! - **E2 — MenuBar checkable / radio items.** Add `MenuBar.CheckboxItem`
+  (`checked` / `defaultChecked` / `onCheckedChange`) and `MenuBar.RadioGroup` +
+  `MenuBar.RadioItem` (`value` / `defaultValue` / `onValueChange`), mirroring the
+  navigation `Menu` API. Items reserve a leading check-mark gutter so checked and
+  unchecked rows align, use `role="menuitemcheckbox"` / `role="menuitemradio"` with
+  `aria-checked`, participate in arrow-key navigation, and keep the menu open on
+  activation by default (`closeOnClick={false}`). Additive.
+
+- [#109](https://github.com/SebastianWebdev/entangle-ui/pull/109) [`b61bfbd`](https://github.com/SebastianWebdev/entangle-ui/commit/b61bfbda7608652cdbcc68c7235980c6a113a9b4) Thanks [@SebastianWebdev](https://github.com/SebastianWebdev)! - **F1 — Slider value tooltip → portal.** The drag value tooltip was an
+  absolutely-positioned child of the slider wrapper, so any ancestor `overflow`
+  (e.g. a `PropertySection` header) clipped it. It now renders in a portal to
+  `document.body` with fixed viewport coordinates anchored to the thumb, so it can
+  never be clipped. Added `tooltipPlacement?: 'top' | 'bottom'` (default `'top'`).
+  The portal is only mounted while dragging, so the idle/drag hot path is
+  unchanged. Default visual placement (above the thumb) is unchanged.
+
+- [#109](https://github.com/SebastianWebdev/entangle-ui/pull/109) [`b61bfbd`](https://github.com/SebastianWebdev/entangle-ui/commit/b61bfbda7608652cdbcc68c7235980c6a113a9b4) Thanks [@SebastianWebdev](https://github.com/SebastianWebdev)! - **G2 — `Spinner` `decorative` (live-region opt-out).** Add `decorative?: boolean`
+  to `Spinner`. When set, the spinner renders `role="presentation"` + `aria-hidden`
+  with no `aria-live`, for use inside an existing live region (e.g. `StatusBar`,
+  which is itself `role="status"`) so activity isn't announced twice. Default
+  behavior (`role="status"` + `aria-live="polite"`) is unchanged. Additive.
+
+### Patch Changes
+
+- [#109](https://github.com/SebastianWebdev/entangle-ui/pull/109) [`b61bfbd`](https://github.com/SebastianWebdev/entangle-ui/commit/b61bfbda7608652cdbcc68c7235980c6a113a9b4) Thanks [@SebastianWebdev](https://github.com/SebastianWebdev)! - **F2 — Tooltip z-index on the Positioner (renders under panels).** The tooltip
+  z-index (`--etui-z-tooltip`) was set on the inner `Popup`, trapped inside the
+  portaled `Positioner`'s own `position: fixed` stacking context, so a positioned
+  sibling at a lower z-index (e.g. an `AppShell` slot at `--etui-z-base`) painted
+  over the tooltip. The token now lives on the `Positioner`. Audited the other Base
+  UI `Positioner`/`Popup` pairs and applied the same fix to the navigation `Menu`
+  and `ContextMenu` (dropdown z-index now on their positioners). `HoverCard`,
+  `Select` and `Popover` were already correct (z-index on the positioned element).
+
+- [#109](https://github.com/SebastianWebdev/entangle-ui/pull/109) [`b61bfbd`](https://github.com/SebastianWebdev/entangle-ui/commit/b61bfbda7608652cdbcc68c7235980c6a113a9b4) Thanks [@SebastianWebdev](https://github.com/SebastianWebdev)! - **G3 — `Viewport` docs lead with "2D only".** The `Viewport` JSDoc, docs page,
+  and skill reference now lead with the 2D-only boundary (it owns a 2D pan/zoom
+  transform, not a 3D camera) and point to hosting your own WebGL/WebGPU canvas
+  for 3D. Docs-only; no API change.
+
+- [#111](https://github.com/SebastianWebdev/entangle-ui/pull/111) [`f933917`](https://github.com/SebastianWebdev/entangle-ui/commit/f933917f99da18ce70ed08bbfb103d03250346c2) Thanks [@SebastianWebdev](https://github.com/SebastianWebdev)! - Fix `entangle-ui/styles.css` being tree-shaken out of production builds.
+
+  The `./styles.css` export resolved to `dist/esm/styles.js` — a JS shim whose
+  only job is to `import` the dark-theme tokens + global-scrollbar stylesheets for
+  their side effects. But the package's `sideEffects` allowlist only matches
+  `*.css`, `*.css.ts`, and `*.css.js`, so a plain `styles.js` (which exports
+  nothing) was flagged side-effect-free and dropped by production bundlers. The
+  canonical `import 'entangle-ui/styles.css'` setup then shipped **zero** `--etui-*`
+  token definitions: no colours, no fonts, and menu/tooltip popups with no
+  background or stacking. Dev was unaffected because dev servers don't tree-shake,
+  so the failure only surfaced in `build`/`preview`.
+
+  The stylesheet entry is now emitted as `dist/esm/styles.css.js`, which matches
+  the existing `*.css.js` side-effect glob (the same bucket as every component's
+  compiled style module), so the import survives production tree-shaking and the
+  dark theme lands on `:root` in dev and prod alike. No source or API change is
+  required in consumer apps.
+
 ## 0.11.0
 
 ### Minor Changes

package/dist/esm/assets/src/components/controls/Slider/{Slider.css.ts.vanilla-Cqm3fQ0S.css → Slider.css.ts.vanilla-CLf_RC0A.css}

@@ -1,15 +1,15 @@
-.Slider_sliderContainerRecipe__t8kxxs3 {
+.Slider_sliderContainerRecipe__t8kxxs2 {
   display: flex;
   flex-direction: column;
   gap: var(--etui-spacing-xs);
   width: 100%;
   min-width: 0;
 }
-.Slider_sliderContainerRecipe_disabled_true__t8kxxs4 {
+.Slider_sliderContainerRecipe_disabled_true__t8kxxs3 {
   opacity: 0.5;
   pointer-events: none;
 }
-.Slider_sliderWrapperStyle__t8kxxs6 {
+.Slider_sliderWrapperStyle__t8kxxs5 {
   position: relative;
   display: flex;
   align-items: center;
@@ -18,56 +18,56 @@
   padding: 0px 0;
   width: 100%;
 }
-.Slider_trackRecipe__t8kxxs7 {
+.Slider_trackRecipe__t8kxxs6 {
   position: relative;
   flex: 1;
   border-radius: var(--etui-radius-sm);
   overflow: hidden;
   border: 1px solid;
 }
-.Slider_trackRecipe_size_sm__t8kxxs8 {
+.Slider_trackRecipe_size_sm__t8kxxs7 {
   height: 4px;
 }
-.Slider_trackRecipe_size_md__t8kxxs9 {
+.Slider_trackRecipe_size_md__t8kxxs8 {
   height: 6px;
 }
-.Slider_trackRecipe_size_lg__t8kxxsa {
+.Slider_trackRecipe_size_lg__t8kxxs9 {
   height: 8px;
 }
-.Slider_trackRecipe_error_true__t8kxxsb {
+.Slider_trackRecipe_error_true__t8kxxsa {
   background: var(--etui-color-accent-error);
   border-color: var(--etui-color-border-error);
 }
-.Slider_trackRecipe_error_true__t8kxxsb:hover {
+.Slider_trackRecipe_error_true__t8kxxsa:hover {
   border-color: var(--etui-color-border-error);
 }
-.Slider_trackRecipe_error_false__t8kxxsc {
+.Slider_trackRecipe_error_false__t8kxxsb {
   background: var(--etui-color-surface-default);
   border-color: var(--etui-color-border-default);
 }
-.Slider_trackRecipe_error_false__t8kxxsc:hover {
+.Slider_trackRecipe_error_false__t8kxxsb:hover {
   border-color: var(--etui-color-border-focus);
 }
-.Slider_fillRecipe__t8kxxsd {
+.Slider_fillRecipe__t8kxxsc {
   position: absolute;
   left: 0;
   top: 0;
   bottom: 0;
   width: var(--fillPercentageVar__t8kxxs0);
 }
-.Slider_fillRecipe_error_true__t8kxxse {
+.Slider_fillRecipe_error_true__t8kxxsd {
   background: var(--etui-color-accent-error);
 }
-.Slider_fillRecipe_error_false__t8kxxsf {
+.Slider_fillRecipe_error_false__t8kxxse {
   background: var(--etui-color-accent-primary);
 }
-.Slider_fillRecipe_isDragging_true__t8kxxsg {
+.Slider_fillRecipe_isDragging_true__t8kxxsf {
   transition: none;
 }
-.Slider_fillRecipe_isDragging_false__t8kxxsh {
+.Slider_fillRecipe_isDragging_false__t8kxxsg {
   transition: width 0.1s ease-out;
 }
-.Slider_thumbRecipe__t8kxxsi {
+.Slider_thumbRecipe__t8kxxsh {
   position: absolute;
   top: 50%;
   left: var(--thumbPercentageVar__t8kxxs1);
@@ -77,38 +77,38 @@
   cursor: grab;
   box-shadow: var(--etui-shadow-sm);
 }
-.Slider_thumbRecipe__t8kxxsi:hover {
+.Slider_thumbRecipe__t8kxxsh:hover {
   transform: translate(-50%, -50%) scale(1.1);
   box-shadow: var(--etui-shadow-md);
 }
-.Slider_thumbRecipe_size_sm__t8kxxsj {
+.Slider_thumbRecipe_size_sm__t8kxxsi {
   width: 12px;
   height: 12px;
 }
-.Slider_thumbRecipe_size_md__t8kxxsk {
+.Slider_thumbRecipe_size_md__t8kxxsj {
   width: 16px;
   height: 16px;
 }
-.Slider_thumbRecipe_size_lg__t8kxxsl {
+.Slider_thumbRecipe_size_lg__t8kxxsk {
   width: 20px;
   height: 20px;
 }
-.Slider_thumbRecipe_error_true__t8kxxsm {
+.Slider_thumbRecipe_error_true__t8kxxsl {
   background: var(--etui-color-accent-error);
 }
-.Slider_thumbRecipe_error_false__t8kxxsn {
+.Slider_thumbRecipe_error_false__t8kxxsm {
   background: var(--etui-color-accent-primary);
 }
-.Slider_thumbRecipe_isDragging_true__t8kxxso {
+.Slider_thumbRecipe_isDragging_true__t8kxxsn {
   cursor: grabbing;
   transform: translate(-50%, -50%) scale(1.15);
   box-shadow: var(--etui-shadow-lg);
   transition: none;
 }
-.Slider_thumbRecipe_isDragging_false__t8kxxsp {
+.Slider_thumbRecipe_isDragging_false__t8kxxso {
   transition: all var(--etui-transition-fast);
 }
-.Slider_ticksStyle__t8kxxsq {
+.Slider_ticksStyle__t8kxxsp {
   position: absolute;
   top: 100%;
   left: 0;
@@ -119,7 +119,7 @@
   align-items: flex-start;
   pointer-events: none;
 }
-.Slider_ticksStyle__t8kxxsq::before {
+.Slider_ticksStyle__t8kxxsp::before {
   content: "";
   position: absolute;
   top: 2px;
@@ -128,17 +128,14 @@
   height: 1px;
   background: var(--etui-color-border-default);
 }
-.Slider_tickStyle__t8kxxsr {
+.Slider_tickStyle__t8kxxsq {
   width: 1px;
   height: 4px;
   background: var(--etui-color-text-muted);
   margin-top: 2px;
 }
-.Slider_tooltipRecipe__t8kxxss {
-  position: absolute;
-  bottom: calc(100% + 8px);
-  left: var(--tooltipPercentageVar__t8kxxs2);
-  transform: translateX(-50%);
+.Slider_sliderTooltipRecipe__t8kxxsr {
+  position: fixed;
   background: var(--etui-color-bg-elevated);
   color: var(--etui-color-text-primary);
   border: 1px solid var(--etui-color-border-default);
@@ -149,9 +146,11 @@
   white-space: nowrap;
   pointer-events: none;
   z-index: var(--etui-z-tooltip);
-  transition: all var(--etui-transition-fast);
 }
-.Slider_tooltipRecipe__t8kxxss::after {
+.Slider_sliderTooltipRecipe_placement_top__t8kxxss {
+  transform: translate(-50%, calc(-100% - 8px));
+}
+.Slider_sliderTooltipRecipe_placement_top__t8kxxss::after {
   content: "";
   position: absolute;
   top: 100%;
@@ -163,25 +162,29 @@
   border-right: 4px solid transparent;
   border-top: 4px solid var(--etui-color-border-default);
 }
-.Slider_tooltipRecipe_visible_true__t8kxxst {
-  opacity: 1;
-  transform: translateX(-50%) translateY(0);
+.Slider_sliderTooltipRecipe_placement_bottom__t8kxxst {
+  transform: translate(-50%, 8px);
 }
-.Slider_tooltipRecipe_visible_false__t8kxxsu {
-  opacity: 0;
-  transform: translateX(-50%) translateY(4px);
+.Slider_sliderTooltipRecipe_placement_bottom__t8kxxst::after {
+  content: "";
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0;
+  height: 0;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-bottom: 4px solid var(--etui-color-border-default);
 }
 @media (prefers-reduced-motion: reduce) {
-  .Slider_thumbRecipe__t8kxxsi {
+  .Slider_thumbRecipe__t8kxxsh {
     transition: none;
   }
-  .Slider_thumbRecipe__t8kxxsi:hover {
+  .Slider_thumbRecipe__t8kxxsh:hover {
     transform: translate(-50%, -50%);
   }
-  .Slider_thumbRecipe_isDragging_false__t8kxxsp {
-    transition: none;
-  }
-  .Slider_tooltipRecipe__t8kxxss {
+  .Slider_thumbRecipe_isDragging_false__t8kxxso {
     transition: none;
   }
 }

package/dist/esm/assets/src/components/navigation/Menu/{Menu.css.ts.vanilla-B5iVe5S2.css → Menu.css.ts.vanilla-Bhh1L5yl.css}

@@ -1,4 +1,7 @@
-.Menu_menuContentStyle__1pkkb710 {
+.Menu_menuPositionerStyle__1pkkb710 {
+  z-index: var(--etui-z-dropdown);
+}
+.Menu_menuContentStyle__1pkkb711 {
   min-width: 200px;
   max-width: 360px;
   background: var(--etui-color-bg-elevated);
@@ -13,11 +16,11 @@
   transform-origin: var(--transform-origin);
   transition: opacity var(--etui-transition-fast), transform var(--etui-transition-fast);
 }
-.Menu_menuContentStyle__1pkkb710[data-starting-style], .Menu_menuContentStyle__1pkkb710[data-ending-style] {
+.Menu_menuContentStyle__1pkkb711[data-starting-style], .Menu_menuContentStyle__1pkkb711[data-ending-style] {
   opacity: 0;
   transform: scale(0.96);
 }
-.Menu_menuItemStyle__1pkkb711 {
+.Menu_menuItemStyle__1pkkb712 {
   display: flex;
   align-items: center;
   gap: var(--etui-spacing-sm);
@@ -33,15 +36,15 @@
   font-size: var(--etui-font-size-md);
   font-family: var(--etui-font-family-sans);
 }
-.Menu_menuItemStyle__1pkkb711[data-highlighted] {
+.Menu_menuItemStyle__1pkkb712[data-highlighted] {
   background: var(--etui-color-surface-hover);
 }
-.Menu_menuItemStyle__1pkkb711[data-disabled] {
+.Menu_menuItemStyle__1pkkb712[data-disabled] {
   color: var(--etui-color-text-disabled);
   cursor: not-allowed;
   pointer-events: none;
 }
-.Menu_itemStartSlotStyle__1pkkb712 {
+.Menu_itemStartSlotStyle__1pkkb713 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -50,14 +53,14 @@
   flex-shrink: 0;
   color: var(--etui-color-text-secondary);
 }
-.Menu_itemLabelStyle__1pkkb713 {
+.Menu_itemLabelStyle__1pkkb714 {
   flex: 1;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.Menu_itemEndSlotStyle__1pkkb714 {
+.Menu_itemEndSlotStyle__1pkkb715 {
   display: inline-flex;
   align-items: center;
   gap: var(--etui-spacing-xs);
@@ -66,13 +69,13 @@
   flex-shrink: 0;
   color: var(--etui-color-text-muted);
 }
-.Menu_shortcutStyle__1pkkb715 {
+.Menu_shortcutStyle__1pkkb716 {
   font-size: var(--etui-font-size-xs);
   color: var(--etui-color-text-muted);
   letter-spacing: 0.03em;
   white-space: nowrap;
 }
-.Menu_groupLabelStyle__1pkkb716 {
+.Menu_groupLabelStyle__1pkkb717 {
   display: block;
   padding: var(--etui-spacing-xs) var(--etui-spacing-sm);
   font-size: var(--etui-font-size-xs);
@@ -81,7 +84,7 @@
   font-family: var(--etui-font-family-sans);
   color: var(--etui-color-text-muted);
 }
-.Menu_separatorStyle__1pkkb717 {
+.Menu_separatorStyle__1pkkb718 {
   margin: var(--etui-spacing-xs) 0;
   border-top: 1px solid var(--etui-color-border-default);
   height: 0;

package/dist/esm/assets/src/components/primitives/Tooltip/{Tooltip.css.ts.vanilla-CrEFoLBX.css → Tooltip.css.ts.vanilla-BqaiGrFQ.css}

@@ -24,7 +24,10 @@
   opacity: 0;
   transform: scale(0.96);
 }
-.Tooltip_tooltipTriggerStyle__u81kis1 {
+.Tooltip_tooltipPositionerStyle__u81kis1 {
+  z-index: var(--etui-z-tooltip);
+}
+.Tooltip_tooltipTriggerStyle__u81kis2 {
   display: inline-block;
   cursor: pointer;
   width: fit-content;
@@ -33,17 +36,17 @@
   z-index: 1;
   pointer-events: none;
 }
-.Tooltip_tooltipTriggerStyle__u81kis1:focus {
+.Tooltip_tooltipTriggerStyle__u81kis2:focus {
   outline: none;
   box-shadow: var(--etui-shadow-focus);
 }
-.Tooltip_tooltipTriggerStyle__u81kis1 > * {
+.Tooltip_tooltipTriggerStyle__u81kis2 > * {
   pointer-events: auto;
 }
-.Tooltip_arrowFillStyle__u81kis2 {
+.Tooltip_arrowFillStyle__u81kis3 {
   fill: var(--etui-color-bg-elevated);
 }
-.Tooltip_tooltipArrowStyle__u81kis3 {
+.Tooltip_tooltipArrowStyle__u81kis4 {
   display: flex;
   transform-style: preserve-3d;
   backface-visibility: hidden;
@@ -53,19 +56,19 @@
   -moz-osx-font-smoothing: grayscale;
   will-change: transform;
 }
-.Tooltip_tooltipArrowStyle__u81kis3[data-side="top"] {
+.Tooltip_tooltipArrowStyle__u81kis4[data-side="top"] {
   bottom: -8px;
   rotate: 180deg;
 }
-.Tooltip_tooltipArrowStyle__u81kis3[data-side="bottom"] {
+.Tooltip_tooltipArrowStyle__u81kis4[data-side="bottom"] {
   top: -8px;
   rotate: 0deg;
 }
-.Tooltip_tooltipArrowStyle__u81kis3[data-side="left"] {
+.Tooltip_tooltipArrowStyle__u81kis4[data-side="left"] {
   right: -13px;
   rotate: 90deg;
 }
-.Tooltip_tooltipArrowStyle__u81kis3[data-side="right"] {
+.Tooltip_tooltipArrowStyle__u81kis4[data-side="right"] {
   left: -13px;
   rotate: -90deg;
 }

package/dist/esm/assets/src/components/shell/AppShell/{AppShell.css.ts.vanilla-BYmtU0O_.css → AppShell.css.ts.vanilla-BLK2-DRL.css}

@@ -32,6 +32,7 @@ html:has(.AppShell_viewportLockClass__1m62ws20) body {
 }
 .AppShell_menuBarSlot__1m62ws22 {
   grid-area: menubar;
+  background: var(--etui-shell-menubar-bg);
 }
 .AppShell_toolbarTopSlot__1m62ws23 {
   grid-area: toolbar-top;

package/dist/esm/assets/src/components/shell/MenuBar/{MenuBar.css.ts.vanilla-TgPcl4yA.css → MenuBar.css.ts.vanilla-Dt3w4f-q.css}

@@ -8,6 +8,7 @@
   padding: 0 var(--etui-spacing-sm);
   user-select: none;
   flex-shrink: 0;
+  width: 100%;
 }
 .MenuBar_menuBarRoot_size_sm__1h81mxv1 {
   height: 24px;
@@ -17,13 +18,15 @@
 }
 .MenuBar_menuContainer__1h81mxv3 {
   position: relative;
+  display: flex;
+  align-items: center;
   height: 100%;
 }
 .MenuBar_trigger__1h81mxv4 {
   display: inline-flex;
   align-items: center;
-  height: 100%;
-  padding: 0 var(--etui-spacing-md);
+  padding: var(--etui-spacing-xs) var(--etui-spacing-md);
+  border-radius: var(--etui-radius-sm);
   border: none;
   color: inherit;
   font: inherit;
@@ -95,15 +98,24 @@
   color: var(--etui-shell-menubar-shortcut-text);
   font-size: var(--etui-font-size-xs);
 }
-.MenuBar_separator__1h81mxva {
+.MenuBar_indicatorSlot__1h81mxva {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  color: var(--etui-color-text-secondary);
+}
+.MenuBar_separator__1h81mxvb {
   height: 1px;
   margin: var(--etui-spacing-xs) 0;
   background: var(--etui-color-border-default);
 }
-.MenuBar_subTrigger__1h81mxvb {
+.MenuBar_subTrigger__1h81mxvc {
   justify-content: space-between;
 }
-.MenuBar_subDropdown__1h81mxvc {
+.MenuBar_subDropdown__1h81mxvd {
   position: absolute;
   top: calc(-1 * var(--etui-spacing-xs));
   left: 100%;
@@ -115,6 +127,6 @@
   padding: var(--etui-spacing-xs) 0;
   z-index: calc(var(--etui-z-dropdown) + 1);
 }
-.MenuBar_subContainer__1h81mxvd {
+.MenuBar_subContainer__1h81mxve {
   position: relative;
 }

package/dist/esm/components/controls/Slider/Slider.css.js

@@ -1,17 +1,16 @@
-import './../../../assets/src/components/controls/Slider/Slider.css.ts.vanilla-Cqm3fQ0S.css';
+import './../../../assets/src/components/controls/Slider/Slider.css.ts.vanilla-CLf_RC0A.css';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 
 var fillPercentageVar = 'var(--fillPercentageVar__t8kxxs0)';
-var fillRecipe = createRuntimeFn({defaultClassName:'Slider_fillRecipe__t8kxxsd',variantClassNames:{error:{true:'Slider_fillRecipe_error_true__t8kxxse',false:'Slider_fillRecipe_error_false__t8kxxsf'},isDragging:{true:'Slider_fillRecipe_isDragging_true__t8kxxsg',false:'Slider_fillRecipe_isDragging_false__t8kxxsh'}},defaultVariants:{error:false,isDragging:false},compoundVariants:[]});
-var sliderContainerRecipe = createRuntimeFn({defaultClassName:'Slider_sliderContainerRecipe__t8kxxs3',variantClassNames:{disabled:{true:'Slider_sliderContainerRecipe_disabled_true__t8kxxs4',false:'Slider_sliderContainerRecipe_disabled_false__t8kxxs5'}},defaultVariants:{disabled:false},compoundVariants:[]});
-var sliderWrapperStyle = 'Slider_sliderWrapperStyle__t8kxxs6';
+var fillRecipe = createRuntimeFn({defaultClassName:'Slider_fillRecipe__t8kxxsc',variantClassNames:{error:{true:'Slider_fillRecipe_error_true__t8kxxsd',false:'Slider_fillRecipe_error_false__t8kxxse'},isDragging:{true:'Slider_fillRecipe_isDragging_true__t8kxxsf',false:'Slider_fillRecipe_isDragging_false__t8kxxsg'}},defaultVariants:{error:false,isDragging:false},compoundVariants:[]});
+var sliderContainerRecipe = createRuntimeFn({defaultClassName:'Slider_sliderContainerRecipe__t8kxxs2',variantClassNames:{disabled:{true:'Slider_sliderContainerRecipe_disabled_true__t8kxxs3',false:'Slider_sliderContainerRecipe_disabled_false__t8kxxs4'}},defaultVariants:{disabled:false},compoundVariants:[]});
+var sliderTooltipRecipe = createRuntimeFn({defaultClassName:'Slider_sliderTooltipRecipe__t8kxxsr',variantClassNames:{placement:{top:'Slider_sliderTooltipRecipe_placement_top__t8kxxss',bottom:'Slider_sliderTooltipRecipe_placement_bottom__t8kxxst'}},defaultVariants:{placement:'top'},compoundVariants:[]});
+var sliderWrapperStyle = 'Slider_sliderWrapperStyle__t8kxxs5';
 var thumbPercentageVar = 'var(--thumbPercentageVar__t8kxxs1)';
-var thumbRecipe = createRuntimeFn({defaultClassName:'Slider_thumbRecipe__t8kxxsi',variantClassNames:{size:{sm:'Slider_thumbRecipe_size_sm__t8kxxsj',md:'Slider_thumbRecipe_size_md__t8kxxsk',lg:'Slider_thumbRecipe_size_lg__t8kxxsl'},error:{true:'Slider_thumbRecipe_error_true__t8kxxsm',false:'Slider_thumbRecipe_error_false__t8kxxsn'},isDragging:{true:'Slider_thumbRecipe_isDragging_true__t8kxxso',false:'Slider_thumbRecipe_isDragging_false__t8kxxsp'}},defaultVariants:{size:'md',error:false,isDragging:false},compoundVariants:[]});
-var tickStyle = 'Slider_tickStyle__t8kxxsr';
-var ticksStyle = 'Slider_ticksStyle__t8kxxsq';
-var tooltipPercentageVar = 'var(--tooltipPercentageVar__t8kxxs2)';
-var tooltipRecipe = createRuntimeFn({defaultClassName:'Slider_tooltipRecipe__t8kxxss',variantClassNames:{visible:{true:'Slider_tooltipRecipe_visible_true__t8kxxst',false:'Slider_tooltipRecipe_visible_false__t8kxxsu'}},defaultVariants:{visible:false},compoundVariants:[]});
-var trackRecipe = createRuntimeFn({defaultClassName:'Slider_trackRecipe__t8kxxs7',variantClassNames:{size:{sm:'Slider_trackRecipe_size_sm__t8kxxs8',md:'Slider_trackRecipe_size_md__t8kxxs9',lg:'Slider_trackRecipe_size_lg__t8kxxsa'},error:{true:'Slider_trackRecipe_error_true__t8kxxsb',false:'Slider_trackRecipe_error_false__t8kxxsc'}},defaultVariants:{size:'md',error:false},compoundVariants:[]});
+var thumbRecipe = createRuntimeFn({defaultClassName:'Slider_thumbRecipe__t8kxxsh',variantClassNames:{size:{sm:'Slider_thumbRecipe_size_sm__t8kxxsi',md:'Slider_thumbRecipe_size_md__t8kxxsj',lg:'Slider_thumbRecipe_size_lg__t8kxxsk'},error:{true:'Slider_thumbRecipe_error_true__t8kxxsl',false:'Slider_thumbRecipe_error_false__t8kxxsm'},isDragging:{true:'Slider_thumbRecipe_isDragging_true__t8kxxsn',false:'Slider_thumbRecipe_isDragging_false__t8kxxso'}},defaultVariants:{size:'md',error:false,isDragging:false},compoundVariants:[]});
+var tickStyle = 'Slider_tickStyle__t8kxxsq';
+var ticksStyle = 'Slider_ticksStyle__t8kxxsp';
+var trackRecipe = createRuntimeFn({defaultClassName:'Slider_trackRecipe__t8kxxs6',variantClassNames:{size:{sm:'Slider_trackRecipe_size_sm__t8kxxs7',md:'Slider_trackRecipe_size_md__t8kxxs8',lg:'Slider_trackRecipe_size_lg__t8kxxs9'},error:{true:'Slider_trackRecipe_error_true__t8kxxsa',false:'Slider_trackRecipe_error_false__t8kxxsb'}},defaultVariants:{size:'md',error:false},compoundVariants:[]});
 
-export { fillPercentageVar, fillRecipe, sliderContainerRecipe, sliderWrapperStyle, thumbPercentageVar, thumbRecipe, tickStyle, ticksStyle, tooltipPercentageVar, tooltipRecipe, trackRecipe };
+export { fillPercentageVar, fillRecipe, sliderContainerRecipe, sliderTooltipRecipe, sliderWrapperStyle, thumbPercentageVar, thumbRecipe, tickStyle, ticksStyle, trackRecipe };
 //# sourceMappingURL=Slider.css.js.map

package/dist/esm/components/controls/Slider/Slider.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Slider.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

package/dist/esm/components/controls/Slider/Slider.js

@@ -2,12 +2,13 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import React, { useState, useRef, useCallback, useEffect } from 'react';
+import { createPortal } from 'react-dom';
 import { FormHelperText } from '../../form/FormHelperText.js';
 import { FormLabel } from '../../form/FormLabel.js';
 import { InputWrapper } from '../../form/InputWrapper.js';
 import { useKeyboardContext } from '../../../context/KeyboardContext.js';
 import { cx } from '../../../utils/cx.js';
-import { sliderWrapperStyle, fillPercentageVar, fillRecipe, trackRecipe, thumbPercentageVar, thumbRecipe, ticksStyle, tickStyle, tooltipPercentageVar, tooltipRecipe, sliderContainerRecipe } from './Slider.css.js';
+import { sliderWrapperStyle, fillPercentageVar, fillRecipe, trackRecipe, thumbPercentageVar, thumbRecipe, ticksStyle, tickStyle, sliderTooltipRecipe, sliderContainerRecipe } from './Slider.css.js';
 
 /**
  * Clamps a value between min and max bounds
@@ -73,10 +74,13 @@ function roundToPrecision(value, precision) {
  * />
  * ```
  */
-const Slider = ({ value, onChange, min = 0, max = 100, step = 1, precisionStep, largeStep, precision = 2, size = 'md', disabled = false, readOnly = false, label, helperText, errorMessage, error = false, required = false, unit, formatValue, showTooltip = true, showTicks = false, tickCount = 5, className, testId, onFocus, onBlur, onKeyDown, ref, ...props }) => {
+const Slider = ({ value, onChange, min = 0, max = 100, step = 1, precisionStep, largeStep, precision = 2, size = 'md', disabled = false, readOnly = false, label, helperText, errorMessage, error = false, required = false, unit, formatValue, showTooltip = true, tooltipPlacement = 'top', showTicks = false, tickCount = 5, className, testId, onFocus, onBlur, onKeyDown, ref, ...props }) => {
     const [isDragging, setIsDragging] = useState(false);
     const [isFocused, setIsFocused] = useState(false);
     const [showTooltipState, setShowTooltipState] = useState(false);
+    // Viewport coordinates of the portaled value tooltip (null until a drag
+    // starts). Updated only while dragging so the portal stays off the idle path.
+    const [tooltipPos, setTooltipPos] = useState(null);
     const sliderRef = useRef(null);
     const trackRef = useRef(null);
     const dragStartRef = useRef(null);
@@ -135,6 +139,22 @@ const Slider = ({ value, onChange, min = 0, max = 100, step = 1, precisionStep,
         const steps = Math.round((newValue - min) / currentStep);
         return min + steps * currentStep;
     }, [min, max, value, getStepSize]);
+    /**
+     * Computes the portaled tooltip's viewport position for a (snapped) value,
+     * anchored to the thumb. Reads the same track rect the drag math already
+     * reads, so it adds no extra layout pass per frame.
+     */
+    const updateTooltipPos = useCallback((v) => {
+        const track = trackRef.current;
+        if (!track)
+            return;
+        const rect = track.getBoundingClientRect();
+        const pct = clamp((v - min) / (max - min), 0, 1);
+        setTooltipPos({
+            left: rect.left + pct * rect.width,
+            top: tooltipPlacement === 'bottom' ? rect.bottom : rect.top,
+        });
+    }, [min, max, tooltipPlacement]);
     /**
      * Handle mouse down on track or thumb
      */
@@ -147,11 +167,20 @@ const Slider = ({ value, onChange, min = 0, max = 100, step = 1, precisionStep,
         // Use the current step size (depends on keyboard modifiers)
         const newValue = positionToValue(event.clientX);
         applyValue(newValue);
+        if (showTooltip)
+            updateTooltipPos(newValue);
         dragStartRef.current = {
             startX: event.clientX,
             startValue: newValue,
         };
-    }, [disabled, readOnly, positionToValue, applyValue, showTooltip]);
+    }, [
+        disabled,
+        readOnly,
+        positionToValue,
+        applyValue,
+        showTooltip,
+        updateTooltipPos,
+    ]);
     /**
      * Handle global mouse move during drag
      */
@@ -163,8 +192,10 @@ const Slider = ({ value, onChange, min = 0, max = 100, step = 1, precisionStep,
             // Use the current step size (depends on keyboard modifiers)
             const newValue = positionToValue(event.clientX);
             applyValue(newValue);
+            if (showTooltip)
+                updateTooltipPos(newValue);
         });
-    }, [isDragging, positionToValue, applyValue]);
+    }, [isDragging, positionToValue, applyValue, showTooltip, updateTooltipPos]);
     /**
      * Handle global mouse up to end drag
      */
@@ -254,9 +285,11 @@ const Slider = ({ value, onChange, min = 0, max = 100, step = 1, precisionStep,
                                     [fillPercentageVar]: `${percentage}%`,
                                 }) }) }), jsx("div", { className: thumbRecipe({ size, error, isDragging }), style: assignInlineVars({
                                 [thumbPercentageVar]: `${percentage}%`,
-                            }) }), showTicks && (jsx("div", { className: ticksStyle, children: ticks.map(i => (jsx("div", { className: tickStyle }, i))) })), showTooltip && (jsx("div", { className: tooltipRecipe({ visible: showTooltipState }), style: assignInlineVars({
-                                [tooltipPercentageVar]: `${percentage}%`,
-                            }), children: displayValue }))] }) }), (helperText ?? (error && errorMessage)) && (jsx(FormHelperText, { error: error, children: error && errorMessage ? errorMessage : helperText }))] }));
+                            }) }), showTicks && (jsx("div", { className: ticksStyle, children: ticks.map(i => (jsx("div", { className: tickStyle }, i))) })), showTooltip &&
+                            showTooltipState &&
+                            tooltipPos &&
+                            typeof document !== 'undefined' &&
+                            createPortal(jsx("div", { className: sliderTooltipRecipe({ placement: tooltipPlacement }), style: { left: tooltipPos.left, top: tooltipPos.top }, role: "presentation", "data-testid": testId ? `${testId}-tooltip` : undefined, children: displayValue }), document.body)] }) }), (helperText ?? (error && errorMessage)) && (jsx(FormHelperText, { error: error, children: error && errorMessage ? errorMessage : helperText }))] }));
 };
 Slider.displayName = 'Slider';