@lerianstudio/sindarian-ui 2.0.0-beta.11 → 2.0.0-beta.12

package/README.md

@@ -161,6 +161,57 @@ twice. The rules are identical and the duplication is harmless, costing roughly
 8 KB pre-gzip. Keep the app's `@import 'tailwindcss'` first; do not drop it to
 avoid the duplicate.
 
+## 📱 What a call site controls on a phone
+
+### `SheetContent` fills the screen below `sm`
+
+The panel was `w-2/5` with `p-12` at every viewport, which at 390px is a 156px
+panel with 9px of readable field inside it. Below 40rem it is now full width
+with 16px of side padding; the desktop panel is unchanged.
+
+A call site that declares its own width keeps it — the phone values carry the
+`max-sm:` modifier and tailwind-merge only drops a conflicting class with
+matching modifiers, so `className="w-[594px]"` still means 594px on a desktop
+AND full width on a phone, with no edit. A call site that wants its own phone
+geometry states it the same way:
+
+```tsx
+<SheetContent className="w-[594px] max-sm:w-[320px] max-sm:p-0" />
+```
+
+That modifier rule cuts both ways, and the padding is where a call site feels
+it: a bare `p-0` drops `p-12` and **cannot** reach `max-sm:px-4` either, so a
+panel that asked for no padding gets 16px a side below 40rem. If it genuinely
+wants none, `max-sm:p-0` is the one token that says so.
+
+The navigation drawer is exempt and says so itself; nothing at a call site is
+needed for it.
+
+### `SidebarTrigger` hides in pixels, not rems
+
+Its default is `min-[768px]:hidden`, the exact complement of the media query
+the drawer decision subscribes to. Do not restate that boundary as `md:hidden`
+anywhere: `md` is 48rem, and a rem inside a media query follows the browser's
+default font size, so the two flip at different widths as soon as a reader
+changes that setting — which left viewports with no rail and no hamburger.
+
+### `IconButton size="small"` answers a 2.5rem target
+
+The glyph stays 2rem; the tap target is an absolutely positioned pseudo-element
+at `.icon-button-base`'s own size, so no layout moves and a table row keeps its
+height. A call site needs nothing. Two of these side by side want at least
+`gap-1` between them, which is what makes each target stop at its neighbour's
+visible edge.
+
+### A `w-*` on an input is a preferred size; `shrink-0` on the wrapper is the floor
+
+`.input-base` declares no width, so the control contributes its intrinsic size
+and compresses when an ancestor says it may. A width utility on the input is
+therefore what it asks for, not what it keeps: in a row under pressure the
+field still gives. A field that must not give says so on its own wrapper with
+`shrink-0`, and a column that must compress says `min-w-0` on its own flex
+item. See `scripts/measure-input-shrink.mjs` for the fixtures and the numbers.
+
 ## 📚 Component Categories
 
 ### UI Primitives

package/dist/components/ui/icon-button/styles.css

@@ -1,5 +1,9 @@
 @theme inline {
   --spacing-icon-button-p: calc(var(--spacing) * 2);
+  /* The tap target every icon control in this package answers to, which is
+     also `.icon-button-base`'s own box. Named once so the small variant's
+     target and the default variant's size cannot drift apart. */
+  --spacing-icon-button-target: calc(var(--spacing) * 10);
 }
 
 @layer components {
@@ -19,6 +23,44 @@
     @apply size-8 [&>*]:size-4;
   }
 
+  /* ⛔ THE GLYPH IS 2rem, THE TARGET IS 2.5rem, AND THEY ARE NOT THE SAME BOX.
+     A table's row-actions kebab is the one control in its row, and at
+     `size-8` it was a 32x32 tap target where every icon control in the shell
+     is 40x40 — measured at 32x32 on the ledgers, transactions and
+     bank-transfer listings at a 390px viewport.
+
+     Growing the button instead would have grown the row: `TableCell` is
+     `py-4`, so a `size-10` trigger takes the row from 64.5px to 72.5px and a
+     phone shows fewer rows for the trouble. An absolutely positioned
+     pseudo-element takes part in hit testing and in nothing else, so the row,
+     the cell, the alignment and every other layout this class appears in are
+     byte-identical; `.button-base` is already `relative`, which is what this
+     anchors to.
+
+     ⚠️ CENTRED AND SIZED, NOT INSET BY A CONSTANT. A negative `inset` is
+     measured from the PADDING box, so `-inset-1` on this button came out
+     38x38 rather than 40x40 — `.button-outline` carries a 1px transparent
+     border, and three of the eight perimeter points fell outside it. Half of
+     50% resolves against whatever the box actually is, so this states the
+     target as a size and lets the border be whatever it is.
+
+     The target is `--spacing-icon-button-target`, which is `.icon-button-base`
+     itself, so it is 2.5rem at any browser font rather than 40px at one of
+     them. That leaves a quarter of a rem on each side, which is also the
+     `gap-1` between the two buttons in `CopyField` — the only place in this
+     package where two of these sit side by side — so each target stops at its
+     neighbour's visible edge and neither can be tapped by aiming at the other.
+     They do share the empty gap, which the later one paints over and takes.
+
+     `scripts/measure-phone-shapes.mjs` walks eight points around the 2.5rem
+     perimeter and asks the document what is there; run it when touching this
+     rule. */
+  .icon-button-small::after {
+    position: absolute;
+    inset: calc(50% - var(--spacing-icon-button-target) / 2);
+    content: '';
+  }
+
   .icon-button-rounded {
     @apply rounded-full;
   }

package/dist/components/ui/input/styles.css

@@ -41,12 +41,15 @@
      box narrower than that gets the difference painted outside it. Measured at
      23px on the console's template-builder header, whose `w-48` wrapper is
      squeezed to 18px and which the console repairs with `shrink-0` on that
-     wrapper. This package's own `SheetContent side="right"` runs the same
-     arithmetic one step earlier: at a 390px viewport `w-2/5 p-12` leaves a
-     59px panel, and the field comes out 41px wide with 9px of text — unusable,
+     wrapper. This package's own `SheetContent side="right"` used to run the
+     same arithmetic one step earlier: `w-2/5 p-12` at a 390px viewport left a
+     59px panel, and the field came out 41px wide with 9px of text — unusable,
      but inside its box, where 2.0.0-beta.9 painted 189px of it across the
-     panel edge. A row that must compress says so on its own flex item, with
-     `min-w-0`, and that one token now works.
+     panel edge. That panel grew a phone step in 2.0.0-beta.12 and now fills
+     the screen, so the field reads 307px there; the arithmetic still stands
+     wherever a box is genuinely narrower than the control's own padding. A row
+     that must compress says so on its own flex item, with `min-w-0`, and that
+     one token now works.
 
      Why no declared width, measured rather than assumed. A declared width
      replaces the control's max-content contribution as well as its min-content

package/dist/components/ui/sheet/index.d.ts

@@ -6,6 +6,48 @@ declare function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPri
 declare function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>): React.JSX.Element;
 declare function SheetPortal({ ...props }: React.ComponentProps<typeof SheetPrimitive.Portal>): React.JSX.Element;
 declare function SheetOverlay({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Overlay>): React.JSX.Element;
+/**
+ * ⛔ A PANEL BUILT FOR A DESKTOP HAS TO STOP BEING TWO FIFTHS ON A PHONE.
+ *
+ * `w-2/5` and `p-12` were unconditional. At a 390px viewport that is a 156px
+ * panel with 59px of usable width, and a form field inside it measures 9px of
+ * text — a sheet that cannot be read, let alone filled in. At 320px the panel
+ * is 128px and the field has NOTHING: its own padding is wider than its box.
+ * Thirteen product-console routes opened a sheet that looked like that, which
+ * is why that console has carried a rule against `[data-slot='sheet-content']`
+ * since its M10 lane; this is that rule brought home, and the console can drop
+ * its copy.
+ *
+ * ⚠️ THE PHONE VALUES CARRY THE MODIFIER, THE DESKTOP ONES DO NOT, AND THAT
+ * ASYMMETRY IS THE WHOLE MECHANISM. `cn` resolves these through tailwind-merge
+ * before the cascade sees them, and tailwind-merge only drops a conflicting
+ * class carrying the SAME modifiers. So a caller's `w-[594px]` replaces
+ * `w-2/5` and leaves `max-sm:w-full` standing: the fifteen product-console
+ * sheets that declare a pixel width of their own — and the two that declare
+ * `w-full` — all still fill a phone, with no edit at the call site. Written
+ * the other way round — `w-full sm:w-2/5` — the caller's bare `w-[594px]`
+ * would have been overruled by `sm:w-2/5` at every desktop width instead,
+ * which is the same bug pointing the other way.
+ *
+ * ⚠️ IT CUTS BOTH WAYS, AND THE PADDING IS WHERE THAT IS FELT. A caller's bare
+ * `p-0` drops `p-12` and cannot reach `max-sm:px-4` either, so a panel that
+ * asked for no padding gets 16px a side below 40rem. That is deliberate — it
+ * is what makes the phone step reach the call sites that need it most — and it
+ * is what product-console's own unlayered rule already did to those five
+ * sheets, so nothing there moves. For any other consumer it is a behaviour
+ * change from 2.0.0-beta.11, and the way out is one token.
+ *
+ * A call site that genuinely wants its own phone width or padding says so with
+ * the modifier (`max-sm:w-[320px]`, `max-sm:p-0`), which is one token and
+ * strictly more than the console's unlayered rule allowed anyone.
+ *
+ * 40rem rather than 768px, unlike `SidebarTrigger` next door: nothing here is
+ * paired with a pixel media query in JavaScript. This is a reading-width
+ * decision and it is the complement of `sm:`, so it moves with the reader's
+ * font exactly as the rest of the package's responsive steps do. The one panel
+ * that IS coupled to the pixel breakpoint is the navigation drawer, and
+ * `SidebarRoot` opts it out by restating both tokens under `max-sm:`.
+ */
 declare const sheetVariants: (props?: ({
     side?: "bottom" | "left" | "right" | "top" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/ui/sheet/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/sheet/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,cAAc,MAAM,wBAAwB,CAAA;AACxD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,iBAAS,KAAK,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,qBAE5E;AAED,iBAAS,YAAY,CAAC,EACpB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,qBAErD;AAED,iBAAS,UAAU,CAAC,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC,qBAEnD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,MAAM,CAAC,qBAEpD;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,qBAWrD;AAED,QAAA,MAAM,aAAa;;8EAiBlB,CAAA;AAED,KAAK,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,GAC1E,YAAY,CAAC,OAAO,aAAa,CAAC,CAAA;AAEpC,iBAAS,YAAY,CAAC,EACpB,IAAc,EACd,SAAS,EACT,QAAQ,EACR,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,iBAAiB,qBA6CnB;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWxE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWxE;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC,qBAWnD;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,WAAW,CAAC,qBAQzD;AAED,OAAO,EACL,KAAK,EACL,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,WAAW,EACX,WAAW,EACX,UAAU,EACV,gBAAgB,EACjB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/sheet/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,cAAc,MAAM,wBAAwB,CAAA;AACxD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,iBAAS,KAAK,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,qBAE5E;AAED,iBAAS,YAAY,CAAC,EACpB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,qBAErD;AAED,iBAAS,UAAU,CAAC,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC,qBAEnD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,MAAM,CAAC,qBAEpD;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,qBAWrD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,QAAA,MAAM,aAAa;;8EAiBlB,CAAA;AAED,KAAK,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,GAC1E,YAAY,CAAC,OAAO,aAAa,CAAC,CAAA;AAEpC,iBAAS,YAAY,CAAC,EACpB,IAAc,EACd,SAAS,EACT,QAAQ,EACR,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,iBAAiB,qBA6CnB;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWxE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWxE;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC,qBAWnD;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,WAAW,CAAC,qBAQzD;AAED,OAAO,EACL,KAAK,EACL,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,WAAW,EACX,WAAW,EACX,UAAU,EACV,gBAAgB,EACjB,CAAA"}

package/dist/components/ui/sheet/index.js

@@ -65,13 +65,55 @@ function SheetPortal({ ...props }) {
 function SheetOverlay({ className, ...props }) {
     return ((0, jsx_runtime_1.jsx)(SheetPrimitive.Overlay, { "data-slot": "sheet-overlay", className: (0, utils_1.cn)('motion-safe:data-[state=open]:animate-in motion-safe:data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', className), ...props }));
 }
-const sheetVariants = (0, class_variance_authority_1.cva)('fixed z-50 gap-4 bg-background p-12 shadow-lg transition ease-in-out motion-safe:data-[state=open]:animate-in motion-safe:data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500', {
+/**
+ * ⛔ A PANEL BUILT FOR A DESKTOP HAS TO STOP BEING TWO FIFTHS ON A PHONE.
+ *
+ * `w-2/5` and `p-12` were unconditional. At a 390px viewport that is a 156px
+ * panel with 59px of usable width, and a form field inside it measures 9px of
+ * text — a sheet that cannot be read, let alone filled in. At 320px the panel
+ * is 128px and the field has NOTHING: its own padding is wider than its box.
+ * Thirteen product-console routes opened a sheet that looked like that, which
+ * is why that console has carried a rule against `[data-slot='sheet-content']`
+ * since its M10 lane; this is that rule brought home, and the console can drop
+ * its copy.
+ *
+ * ⚠️ THE PHONE VALUES CARRY THE MODIFIER, THE DESKTOP ONES DO NOT, AND THAT
+ * ASYMMETRY IS THE WHOLE MECHANISM. `cn` resolves these through tailwind-merge
+ * before the cascade sees them, and tailwind-merge only drops a conflicting
+ * class carrying the SAME modifiers. So a caller's `w-[594px]` replaces
+ * `w-2/5` and leaves `max-sm:w-full` standing: the fifteen product-console
+ * sheets that declare a pixel width of their own — and the two that declare
+ * `w-full` — all still fill a phone, with no edit at the call site. Written
+ * the other way round — `w-full sm:w-2/5` — the caller's bare `w-[594px]`
+ * would have been overruled by `sm:w-2/5` at every desktop width instead,
+ * which is the same bug pointing the other way.
+ *
+ * ⚠️ IT CUTS BOTH WAYS, AND THE PADDING IS WHERE THAT IS FELT. A caller's bare
+ * `p-0` drops `p-12` and cannot reach `max-sm:px-4` either, so a panel that
+ * asked for no padding gets 16px a side below 40rem. That is deliberate — it
+ * is what makes the phone step reach the call sites that need it most — and it
+ * is what product-console's own unlayered rule already did to those five
+ * sheets, so nothing there moves. For any other consumer it is a behaviour
+ * change from 2.0.0-beta.11, and the way out is one token.
+ *
+ * A call site that genuinely wants its own phone width or padding says so with
+ * the modifier (`max-sm:w-[320px]`, `max-sm:p-0`), which is one token and
+ * strictly more than the console's unlayered rule allowed anyone.
+ *
+ * 40rem rather than 768px, unlike `SidebarTrigger` next door: nothing here is
+ * paired with a pixel media query in JavaScript. This is a reading-width
+ * decision and it is the complement of `sm:`, so it moves with the reader's
+ * font exactly as the rest of the package's responsive steps do. The one panel
+ * that IS coupled to the pixel breakpoint is the navigation drawer, and
+ * `SidebarRoot` opts it out by restating both tokens under `max-sm:`.
+ */
+const sheetVariants = (0, class_variance_authority_1.cva)('fixed z-50 gap-4 bg-background p-12 max-sm:px-4 shadow-lg transition ease-in-out motion-safe:data-[state=open]:animate-in motion-safe:data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500', {
     variants: {
         side: {
             top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
             bottom: 'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
-            left: 'inset-y-0 left-0 h-full w-2/5 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left',
-            right: 'inset-y-0 right-0 h-full w-2/5  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right'
+            left: 'inset-y-0 left-0 h-full w-2/5 max-sm:w-full border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left',
+            right: 'inset-y-0 right-0 h-full w-2/5 max-sm:w-full border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right'
         }
     },
     defaultVariants: {

package/dist/components/ui/sidebar/sidebar-provider.d.ts

@@ -2,11 +2,32 @@ import React from 'react';
 /**
  * The viewport below which the rail stops being a layout and becomes a drawer.
  *
- * 767px rather than 768px: this is the upper bound of `max-width`, so it is the
- * complement of Tailwind's `md` breakpoint (`min-width: 768px`) and `md:hidden`
- * on `SidebarTrigger` flips at exactly the same pixel the query does.
+ * ⛔ THE NEGATION OF THE TRIGGER'S QUERY, SPELLED AS A NEGATION.
+ *
+ * `SidebarTrigger` hides itself at `min-[768px]`, which is `width >= 768`. This
+ * is its exact complement AT ANY PRECISION, which `(max-width: 767px)` was not:
+ * that pair leaves the open interval (767, 768) matched by neither rule, and a
+ * viewport there draws the rail AND a hamburger that opens nothing — with the
+ * rail inline, `SidebarRoot` mounts no `Sheet`, so the control is dead. Chromium
+ * snaps its layout viewport to a whole pixel and never lands there, measured at
+ * four zoom levels; that is a rounding behaviour to rely on, not a boundary.
+ *
+ * ⚠️ THE PAIR HAS TO BE IN THE SAME UNIT. It used to be `md:hidden` over there,
+ * and `md` is 48rem: rem in a media query follows the BROWSER'S default font
+ * size, so at Chrome's "Small" setting that class hid the hamburger from 576px
+ * while this query still asked for a drawer up to 767px — a band of viewports
+ * with no navigation at all. Anything else that hides or shows a control at
+ * this boundary states it in pixels for the same reason.
+ *
+ * Media Queries Level 4 boolean logic, which is not a new requirement here:
+ * Tailwind v4 emits MQ4 RANGE syntax for everything this package ships —
+ * `min-[768px]` on the trigger compiles to `@media (width >= 768px)` and
+ * `max-sm:` on `SheetContent` to `@media (width < 40rem)` — and range syntax
+ * and boolean `not` landed in the same browsers (Chrome 88, Firefox 64,
+ * Safari 16.4). `(width < 768px)` is the equivalent range spelling of this
+ * line, should a reader prefer the pair to match character for character.
  */
-export declare const SIDEBAR_MOBILE_QUERY = "(max-width: 767px)";
+export declare const SIDEBAR_MOBILE_QUERY = "not (min-width: 768px)";
 export type SidebarContextProps = {
     isCollapsed: boolean;
     /**

package/dist/components/ui/sidebar/sidebar-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-provider.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/sidebar/sidebar-provider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,uBAAuB,CAAA;AAUxD,MAAM,MAAM,mBAAmB,GAAG;IAChC,WAAW,EAAE,OAAO,CAAA;IACpB;;;;OAIG;IACH,QAAQ,EAAE,OAAO,CAAA;IACjB;;;;OAIG;IACH,QAAQ,EAAE,OAAO,CAAA;IACjB,mFAAmF;IACnF,UAAU,EAAE,OAAO,CAAA;IACnB,aAAa,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC;;;OAGG;IACH,kBAAkB,EAAE,MAAM,IAAI,CAAA;IAC9B,gFAAgF;IAChF,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC9B,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACvE,gBAAgB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAA;IAC1C,gBAAgB,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACvD,aAAa,EAAE,MAAM,IAAI,CAAA;CAC1B,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,cAAc,gDAEf,CAAA;AAEZ,eAAO,MAAM,UAAU,2BAMtB,CAAA;AAED,eAAO,MAAM,eAAe,GAAI,cAAc,KAAK,CAAC,iBAAiB,sBAkKpE,CAAA"}
+{"version":3,"file":"sidebar-provider.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/sidebar/sidebar-provider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,oBAAoB,2BAA2B,CAAA;AAU5D,MAAM,MAAM,mBAAmB,GAAG;IAChC,WAAW,EAAE,OAAO,CAAA;IACpB;;;;OAIG;IACH,QAAQ,EAAE,OAAO,CAAA;IACjB;;;;OAIG;IACH,QAAQ,EAAE,OAAO,CAAA;IACjB,mFAAmF;IACnF,UAAU,EAAE,OAAO,CAAA;IACnB,aAAa,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC;;;OAGG;IACH,kBAAkB,EAAE,MAAM,IAAI,CAAA;IAC9B,gFAAgF;IAChF,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC9B,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACvE,gBAAgB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAA;IAC1C,gBAAgB,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACvD,aAAa,EAAE,MAAM,IAAI,CAAA;CAC1B,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,cAAc,gDAEf,CAAA;AAEZ,eAAO,MAAM,UAAU,2BAMtB,CAAA;AAED,eAAO,MAAM,eAAe,GAAI,cAAc,KAAK,CAAC,iBAAiB,sBAkKpE,CAAA"}

package/dist/components/ui/sidebar/sidebar-provider.js

@@ -11,11 +11,32 @@ const storage_1 = require("../../../lib/storage");
 /**
  * The viewport below which the rail stops being a layout and becomes a drawer.
  *
- * 767px rather than 768px: this is the upper bound of `max-width`, so it is the
- * complement of Tailwind's `md` breakpoint (`min-width: 768px`) and `md:hidden`
- * on `SidebarTrigger` flips at exactly the same pixel the query does.
+ * ⛔ THE NEGATION OF THE TRIGGER'S QUERY, SPELLED AS A NEGATION.
+ *
+ * `SidebarTrigger` hides itself at `min-[768px]`, which is `width >= 768`. This
+ * is its exact complement AT ANY PRECISION, which `(max-width: 767px)` was not:
+ * that pair leaves the open interval (767, 768) matched by neither rule, and a
+ * viewport there draws the rail AND a hamburger that opens nothing — with the
+ * rail inline, `SidebarRoot` mounts no `Sheet`, so the control is dead. Chromium
+ * snaps its layout viewport to a whole pixel and never lands there, measured at
+ * four zoom levels; that is a rounding behaviour to rely on, not a boundary.
+ *
+ * ⚠️ THE PAIR HAS TO BE IN THE SAME UNIT. It used to be `md:hidden` over there,
+ * and `md` is 48rem: rem in a media query follows the BROWSER'S default font
+ * size, so at Chrome's "Small" setting that class hid the hamburger from 576px
+ * while this query still asked for a drawer up to 767px — a band of viewports
+ * with no navigation at all. Anything else that hides or shows a control at
+ * this boundary states it in pixels for the same reason.
+ *
+ * Media Queries Level 4 boolean logic, which is not a new requirement here:
+ * Tailwind v4 emits MQ4 RANGE syntax for everything this package ships —
+ * `min-[768px]` on the trigger compiles to `@media (width >= 768px)` and
+ * `max-sm:` on `SheetContent` to `@media (width < 40rem)` — and range syntax
+ * and boolean `not` landed in the same browsers (Chrome 88, Firefox 64,
+ * Safari 16.4). `(width < 768px)` is the equivalent range spelling of this
+ * line, should a reader prefer the pair to match character for character.
  */
-exports.SIDEBAR_MOBILE_QUERY = '(max-width: 767px)';
+exports.SIDEBAR_MOBILE_QUERY = 'not (min-width: 768px)';
 /**
  * Where focus goes when the rail has to receive it. The rail's own content is
  * links and buttons, so this is deliberately the short list rather than the
@@ -80,7 +101,7 @@ const SidebarProvider = ({ children }) => {
         // ⛔ AND NOT AT ALL WHEN THE VIEWPORT IS THE ONE THAT DISMISSED IT. A
         // tablet rotated from portrait to landscape with the navigation open
         // crosses 768px, so the drawer is replaced by the rail and the opener is
-        // `SidebarTrigger` — which the same breakpoint just hid with `md:hidden`.
+        // `SidebarTrigger` — which the same breakpoint just hid.
         // `.focus()` on a `display: none` element is a silent no-op, and Radix's
         // own restore is already `preventDefault()`ed, so focus fell to `<body>`
         // and the reader lost their place (SC 2.4.3). Measured in Chromium at

package/dist/components/ui/sidebar/sidebar-root.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-root.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/sidebar/sidebar-root.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAqEzB,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC3D;;;;;;;;;;;;;;;OAeG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAC5B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,WAAW,GAAI,kDAMzB,gBAAgB,sBA0GlB,CAAA"}
+{"version":3,"file":"sidebar-root.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/sidebar/sidebar-root.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAqEzB,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC3D;;;;;;;;;;;;;;;OAeG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAC5B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,WAAW,GAAI,kDAMzB,gBAAgB,sBAqHlB,CAAA"}

package/dist/components/ui/sidebar/sidebar-root.js

@@ -88,7 +88,18 @@ const SidebarRoot = ({ className, id, mobile = 'inline', mobileTitle = 'Navigati
                 // its own. `max-w-full` so a consumer widening `--sidebar-width` past
                 // the viewport still cannot push the drawer off screen. The lifted
                 // override goes LAST so it re-points the variable this element reads.
-                className: (0, utils_1.cn)('w-[var(--sidebar-width)] max-w-full gap-0 p-0', liftWidthOverrides(className)), "aria-describedby": undefined, 
+                //
+                // ⛔ THE `max-sm:` PAIR IS NOT A DUPLICATE. `SheetContent` grew a
+                // phone step — `max-sm:w-full max-sm:px-4` — because a form panel at
+                // two fifths of a 390px screen is unreadable. A NAVIGATION drawer is
+                // the one panel that must not take it: 244px over a dimmed page is
+                // the design, and full-bleed removes the tap-outside-to-close target
+                // that every other way out of this drawer is an alternative to.
+                // tailwind-merge drops a conflicting class only when the modifiers
+                // match, so a bare `w-[…]` cannot reach `max-sm:w-full` and these two
+                // tokens are what state the exemption. Measured: without them the
+                // drawer is 390px wide with 16px of inset on a 390px phone.
+                className: (0, utils_1.cn)('w-[var(--sidebar-width)] max-w-full gap-0 p-0 max-sm:w-[var(--sidebar-width)] max-sm:p-0', liftWidthOverrides(className)), "aria-describedby": undefined, 
                 // ⛔ RADIX'S OWN RESTORE GOES NOWHERE HERE. `DialogContent`
                 // preventDefaults the focus scope's restore and focuses the ref a
                 // `SheetTrigger` would have filled; this drawer is opened from provider

package/dist/components/ui/sidebar/sidebar-trigger.d.ts

@@ -4,9 +4,36 @@ export type SidebarTriggerProps = React.ComponentProps<typeof IconButton>;
 /**
  * The control that opens the mobile drawer.
  *
- * `md:hidden` by default because above 768px the rail is already on screen and
- * a second way to reach it is a second thing to explain; a consumer that wants
- * it everywhere passes its own display class.
+ * Hidden from 768px up by default, because above it the rail is already on
+ * screen and a second way to reach it is a second thing to explain; a consumer
+ * that wants it everywhere passes its own display class.
+ *
+ * ⛔ THE BREAKPOINT IS IN PIXELS, AND `md:hidden` IS NOT A SPELLING OF IT.
+ *
+ * Whether the rail became a drawer is decided by `SIDEBAR_MOBILE_QUERY`, which
+ * is `not (min-width: 768px)` — pixels. `md:` is 48rem, and rem inside a MEDIA
+ * QUERY resolves against the browser's default font size rather than anything
+ * the page declares, so the two flip at different widths the moment a reader
+ * changes that setting. At Chrome's "Small" (12px) `md:` turns over at 576px
+ * while the drawer still turns over at 768px: every window between them showed
+ * NO RAIL AND NO HAMBURGER, which is a console with no navigation at all.
+ * Measured on product-console; the band is four of this package's own fixtures
+ * in `scripts/measure-phone-shapes.mjs`. At "Very large" (20px) the same
+ * mismatch runs the other way and 768–959px drew both.
+ *
+ * `min-[768px]:hidden` is the exact complement of that query, at every font
+ * size AND at any sub-pixel precision — which is why the query next door is
+ * spelled as a negation rather than as `(max-width: 767px)`: that pair leaves
+ * the open interval (767, 768) matched by neither, and a viewport there draws
+ * the rail plus a hamburger that opens nothing.
+ *
+ * ⚠️ THE PROPERTY IS ABOUT THE TWO MEDIA DECISIONS, NOT ABOUT THE FIRST PAINT.
+ * The harness enforces one of the two and never neither or both, which holds
+ * wherever `isMobile` has been read. `isMobile` starts false on purpose — there
+ * is no viewport on the server — and is corrected in an effect, so on a phone
+ * the first painted frame shows the inline rail while this control is already
+ * on screen. That one hydration is the deliberate price of hydration safety,
+ * documented on `SidebarProvider`'s own effect, and predates this class.
  *
  * ⚠️ `aria-controls` IS SET ONLY WHILE THE DRAWER EXISTS. Radix unmounts the
  * dialog content when closed, and a reference to an element that is not in the

package/dist/components/ui/sidebar/sidebar-trigger.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-trigger.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/sidebar/sidebar-trigger.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAG3C,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,CAAA;AAEzE;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,cAAc,GAAI,2DAK5B,mBAAmB,sBAqBrB,CAAA"}
+{"version":3,"file":"sidebar-trigger.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/sidebar/sidebar-trigger.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAG3C,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,CAAA;AAEzE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,eAAO,MAAM,cAAc,GAAI,2DAK5B,mBAAmB,sBAqBrB,CAAA"}

package/dist/components/ui/sidebar/sidebar-trigger.js

@@ -10,9 +10,36 @@ const sidebar_provider_1 = require("./sidebar-provider");
 /**
  * The control that opens the mobile drawer.
  *
- * `md:hidden` by default because above 768px the rail is already on screen and
- * a second way to reach it is a second thing to explain; a consumer that wants
- * it everywhere passes its own display class.
+ * Hidden from 768px up by default, because above it the rail is already on
+ * screen and a second way to reach it is a second thing to explain; a consumer
+ * that wants it everywhere passes its own display class.
+ *
+ * ⛔ THE BREAKPOINT IS IN PIXELS, AND `md:hidden` IS NOT A SPELLING OF IT.
+ *
+ * Whether the rail became a drawer is decided by `SIDEBAR_MOBILE_QUERY`, which
+ * is `not (min-width: 768px)` — pixels. `md:` is 48rem, and rem inside a MEDIA
+ * QUERY resolves against the browser's default font size rather than anything
+ * the page declares, so the two flip at different widths the moment a reader
+ * changes that setting. At Chrome's "Small" (12px) `md:` turns over at 576px
+ * while the drawer still turns over at 768px: every window between them showed
+ * NO RAIL AND NO HAMBURGER, which is a console with no navigation at all.
+ * Measured on product-console; the band is four of this package's own fixtures
+ * in `scripts/measure-phone-shapes.mjs`. At "Very large" (20px) the same
+ * mismatch runs the other way and 768–959px drew both.
+ *
+ * `min-[768px]:hidden` is the exact complement of that query, at every font
+ * size AND at any sub-pixel precision — which is why the query next door is
+ * spelled as a negation rather than as `(max-width: 767px)`: that pair leaves
+ * the open interval (767, 768) matched by neither, and a viewport there draws
+ * the rail plus a hamburger that opens nothing.
+ *
+ * ⚠️ THE PROPERTY IS ABOUT THE TWO MEDIA DECISIONS, NOT ABOUT THE FIRST PAINT.
+ * The harness enforces one of the two and never neither or both, which holds
+ * wherever `isMobile` has been read. `isMobile` starts false on purpose — there
+ * is no viewport on the server — and is corrected in an effect, so on a phone
+ * the first painted frame shows the inline rail while this control is already
+ * on screen. That one hydration is the deliberate price of hydration safety,
+ * documented on `SidebarProvider`'s own effect, and predates this class.
  *
  * ⚠️ `aria-controls` IS SET ONLY WHILE THE DRAWER EXISTS. Radix unmounts the
  * dialog content when closed, and a reference to an element that is not in the
@@ -22,7 +49,7 @@ const sidebar_provider_1 = require("./sidebar-provider");
  */
 const SidebarTrigger = ({ className, onClick, 'aria-label': ariaLabel = 'Open navigation', ...props }) => {
     const { openMobile, setOpenMobile, sidebarId } = (0, sidebar_provider_1.useSidebar)();
-    return ((0, jsx_runtime_1.jsx)(icon_button_1.IconButton, { type: "button", variant: "outline", "data-slot": "sidebar-trigger", "aria-label": ariaLabel, "aria-expanded": openMobile, "aria-controls": openMobile ? sidebarId : undefined, className: (0, utils_1.cn)('md:hidden', className), onClick: (event) => {
+    return ((0, jsx_runtime_1.jsx)(icon_button_1.IconButton, { type: "button", variant: "outline", "data-slot": "sidebar-trigger", "aria-label": ariaLabel, "aria-expanded": openMobile, "aria-controls": openMobile ? sidebarId : undefined, className: (0, utils_1.cn)('min-[768px]:hidden', className), onClick: (event) => {
             onClick?.(event);
             setOpenMobile(!openMobile);
         }, ...props, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Menu, { "aria-hidden": true }) }));

package/dist/esm/components/ui/sheet/index.d.ts

@@ -6,6 +6,48 @@ declare function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPri
 declare function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>): React.JSX.Element;
 declare function SheetPortal({ ...props }: React.ComponentProps<typeof SheetPrimitive.Portal>): React.JSX.Element;
 declare function SheetOverlay({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Overlay>): React.JSX.Element;
+/**
+ * ⛔ A PANEL BUILT FOR A DESKTOP HAS TO STOP BEING TWO FIFTHS ON A PHONE.
+ *
+ * `w-2/5` and `p-12` were unconditional. At a 390px viewport that is a 156px
+ * panel with 59px of usable width, and a form field inside it measures 9px of
+ * text — a sheet that cannot be read, let alone filled in. At 320px the panel
+ * is 128px and the field has NOTHING: its own padding is wider than its box.
+ * Thirteen product-console routes opened a sheet that looked like that, which
+ * is why that console has carried a rule against `[data-slot='sheet-content']`
+ * since its M10 lane; this is that rule brought home, and the console can drop
+ * its copy.
+ *
+ * ⚠️ THE PHONE VALUES CARRY THE MODIFIER, THE DESKTOP ONES DO NOT, AND THAT
+ * ASYMMETRY IS THE WHOLE MECHANISM. `cn` resolves these through tailwind-merge
+ * before the cascade sees them, and tailwind-merge only drops a conflicting
+ * class carrying the SAME modifiers. So a caller's `w-[594px]` replaces
+ * `w-2/5` and leaves `max-sm:w-full` standing: the fifteen product-console
+ * sheets that declare a pixel width of their own — and the two that declare
+ * `w-full` — all still fill a phone, with no edit at the call site. Written
+ * the other way round — `w-full sm:w-2/5` — the caller's bare `w-[594px]`
+ * would have been overruled by `sm:w-2/5` at every desktop width instead,
+ * which is the same bug pointing the other way.
+ *
+ * ⚠️ IT CUTS BOTH WAYS, AND THE PADDING IS WHERE THAT IS FELT. A caller's bare
+ * `p-0` drops `p-12` and cannot reach `max-sm:px-4` either, so a panel that
+ * asked for no padding gets 16px a side below 40rem. That is deliberate — it
+ * is what makes the phone step reach the call sites that need it most — and it
+ * is what product-console's own unlayered rule already did to those five
+ * sheets, so nothing there moves. For any other consumer it is a behaviour
+ * change from 2.0.0-beta.11, and the way out is one token.
+ *
+ * A call site that genuinely wants its own phone width or padding says so with
+ * the modifier (`max-sm:w-[320px]`, `max-sm:p-0`), which is one token and
+ * strictly more than the console's unlayered rule allowed anyone.
+ *
+ * 40rem rather than 768px, unlike `SidebarTrigger` next door: nothing here is
+ * paired with a pixel media query in JavaScript. This is a reading-width
+ * decision and it is the complement of `sm:`, so it moves with the reader's
+ * font exactly as the rest of the package's responsive steps do. The one panel
+ * that IS coupled to the pixel breakpoint is the navigation drawer, and
+ * `SidebarRoot` opts it out by restating both tokens under `max-sm:`.
+ */
 declare const sheetVariants: (props?: ({
     side?: "bottom" | "left" | "right" | "top" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/esm/components/ui/sheet/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/sheet/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,cAAc,MAAM,wBAAwB,CAAA;AACxD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,iBAAS,KAAK,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,qBAE5E;AAED,iBAAS,YAAY,CAAC,EACpB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,qBAErD;AAED,iBAAS,UAAU,CAAC,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC,qBAEnD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,MAAM,CAAC,qBAEpD;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,qBAWrD;AAED,QAAA,MAAM,aAAa;;8EAiBlB,CAAA;AAED,KAAK,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,GAC1E,YAAY,CAAC,OAAO,aAAa,CAAC,CAAA;AAEpC,iBAAS,YAAY,CAAC,EACpB,IAAc,EACd,SAAS,EACT,QAAQ,EACR,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,iBAAiB,qBA6CnB;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWxE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWxE;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC,qBAWnD;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,WAAW,CAAC,qBAQzD;AAED,OAAO,EACL,KAAK,EACL,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,WAAW,EACX,WAAW,EACX,UAAU,EACV,gBAAgB,EACjB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/sheet/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,cAAc,MAAM,wBAAwB,CAAA;AACxD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,iBAAS,KAAK,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,qBAE5E;AAED,iBAAS,YAAY,CAAC,EACpB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,qBAErD;AAED,iBAAS,UAAU,CAAC,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC,qBAEnD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,MAAM,CAAC,qBAEpD;AAED,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,qBAWrD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,QAAA,MAAM,aAAa;;8EAiBlB,CAAA;AAED,KAAK,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,GAC1E,YAAY,CAAC,OAAO,aAAa,CAAC,CAAA;AAEpC,iBAAS,YAAY,CAAC,EACpB,IAAc,EACd,SAAS,EACT,QAAQ,EACR,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,iBAAiB,qBA6CnB;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWxE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWxE;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC,qBAWnD;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,WAAW,CAAC,qBAQzD;AAED,OAAO,EACL,KAAK,EACL,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,WAAW,EACX,WAAW,EACX,UAAU,EACV,gBAAgB,EACjB,CAAA"}

package/dist/esm/components/ui/sheet/index.js

@@ -20,13 +20,55 @@ function SheetPortal({ ...props }) {
 function SheetOverlay({ className, ...props }) {
     return (_jsx(SheetPrimitive.Overlay, { "data-slot": "sheet-overlay", className: cn('motion-safe:data-[state=open]:animate-in motion-safe:data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', className), ...props }));
 }
-const sheetVariants = cva('fixed z-50 gap-4 bg-background p-12 shadow-lg transition ease-in-out motion-safe:data-[state=open]:animate-in motion-safe:data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500', {
+/**
+ * ⛔ A PANEL BUILT FOR A DESKTOP HAS TO STOP BEING TWO FIFTHS ON A PHONE.
+ *
+ * `w-2/5` and `p-12` were unconditional. At a 390px viewport that is a 156px
+ * panel with 59px of usable width, and a form field inside it measures 9px of
+ * text — a sheet that cannot be read, let alone filled in. At 320px the panel
+ * is 128px and the field has NOTHING: its own padding is wider than its box.
+ * Thirteen product-console routes opened a sheet that looked like that, which
+ * is why that console has carried a rule against `[data-slot='sheet-content']`
+ * since its M10 lane; this is that rule brought home, and the console can drop
+ * its copy.
+ *
+ * ⚠️ THE PHONE VALUES CARRY THE MODIFIER, THE DESKTOP ONES DO NOT, AND THAT
+ * ASYMMETRY IS THE WHOLE MECHANISM. `cn` resolves these through tailwind-merge
+ * before the cascade sees them, and tailwind-merge only drops a conflicting
+ * class carrying the SAME modifiers. So a caller's `w-[594px]` replaces
+ * `w-2/5` and leaves `max-sm:w-full` standing: the fifteen product-console
+ * sheets that declare a pixel width of their own — and the two that declare
+ * `w-full` — all still fill a phone, with no edit at the call site. Written
+ * the other way round — `w-full sm:w-2/5` — the caller's bare `w-[594px]`
+ * would have been overruled by `sm:w-2/5` at every desktop width instead,
+ * which is the same bug pointing the other way.
+ *
+ * ⚠️ IT CUTS BOTH WAYS, AND THE PADDING IS WHERE THAT IS FELT. A caller's bare
+ * `p-0` drops `p-12` and cannot reach `max-sm:px-4` either, so a panel that
+ * asked for no padding gets 16px a side below 40rem. That is deliberate — it
+ * is what makes the phone step reach the call sites that need it most — and it
+ * is what product-console's own unlayered rule already did to those five
+ * sheets, so nothing there moves. For any other consumer it is a behaviour
+ * change from 2.0.0-beta.11, and the way out is one token.
+ *
+ * A call site that genuinely wants its own phone width or padding says so with
+ * the modifier (`max-sm:w-[320px]`, `max-sm:p-0`), which is one token and
+ * strictly more than the console's unlayered rule allowed anyone.
+ *
+ * 40rem rather than 768px, unlike `SidebarTrigger` next door: nothing here is
+ * paired with a pixel media query in JavaScript. This is a reading-width
+ * decision and it is the complement of `sm:`, so it moves with the reader's
+ * font exactly as the rest of the package's responsive steps do. The one panel
+ * that IS coupled to the pixel breakpoint is the navigation drawer, and
+ * `SidebarRoot` opts it out by restating both tokens under `max-sm:`.
+ */
+const sheetVariants = cva('fixed z-50 gap-4 bg-background p-12 max-sm:px-4 shadow-lg transition ease-in-out motion-safe:data-[state=open]:animate-in motion-safe:data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500', {
     variants: {
         side: {
             top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
             bottom: 'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
-            left: 'inset-y-0 left-0 h-full w-2/5 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left',
-            right: 'inset-y-0 right-0 h-full w-2/5  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right'
+            left: 'inset-y-0 left-0 h-full w-2/5 max-sm:w-full border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left',
+            right: 'inset-y-0 right-0 h-full w-2/5 max-sm:w-full border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right'
         }
     },
     defaultVariants: {

package/dist/esm/components/ui/sidebar/sidebar-provider.d.ts

@@ -2,11 +2,32 @@ import React from 'react';
 /**
  * The viewport below which the rail stops being a layout and becomes a drawer.
  *
- * 767px rather than 768px: this is the upper bound of `max-width`, so it is the
- * complement of Tailwind's `md` breakpoint (`min-width: 768px`) and `md:hidden`
- * on `SidebarTrigger` flips at exactly the same pixel the query does.
+ * ⛔ THE NEGATION OF THE TRIGGER'S QUERY, SPELLED AS A NEGATION.
+ *
+ * `SidebarTrigger` hides itself at `min-[768px]`, which is `width >= 768`. This
+ * is its exact complement AT ANY PRECISION, which `(max-width: 767px)` was not:
+ * that pair leaves the open interval (767, 768) matched by neither rule, and a
+ * viewport there draws the rail AND a hamburger that opens nothing — with the
+ * rail inline, `SidebarRoot` mounts no `Sheet`, so the control is dead. Chromium
+ * snaps its layout viewport to a whole pixel and never lands there, measured at
+ * four zoom levels; that is a rounding behaviour to rely on, not a boundary.
+ *
+ * ⚠️ THE PAIR HAS TO BE IN THE SAME UNIT. It used to be `md:hidden` over there,
+ * and `md` is 48rem: rem in a media query follows the BROWSER'S default font
+ * size, so at Chrome's "Small" setting that class hid the hamburger from 576px
+ * while this query still asked for a drawer up to 767px — a band of viewports
+ * with no navigation at all. Anything else that hides or shows a control at
+ * this boundary states it in pixels for the same reason.
+ *
+ * Media Queries Level 4 boolean logic, which is not a new requirement here:
+ * Tailwind v4 emits MQ4 RANGE syntax for everything this package ships —
+ * `min-[768px]` on the trigger compiles to `@media (width >= 768px)` and
+ * `max-sm:` on `SheetContent` to `@media (width < 40rem)` — and range syntax
+ * and boolean `not` landed in the same browsers (Chrome 88, Firefox 64,
+ * Safari 16.4). `(width < 768px)` is the equivalent range spelling of this
+ * line, should a reader prefer the pair to match character for character.
  */
-export declare const SIDEBAR_MOBILE_QUERY = "(max-width: 767px)";
+export declare const SIDEBAR_MOBILE_QUERY = "not (min-width: 768px)";
 export type SidebarContextProps = {
     isCollapsed: boolean;
     /**

package/dist/esm/components/ui/sidebar/sidebar-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-provider.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/sidebar/sidebar-provider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,uBAAuB,CAAA;AAUxD,MAAM,MAAM,mBAAmB,GAAG;IAChC,WAAW,EAAE,OAAO,CAAA;IACpB;;;;OAIG;IACH,QAAQ,EAAE,OAAO,CAAA;IACjB;;;;OAIG;IACH,QAAQ,EAAE,OAAO,CAAA;IACjB,mFAAmF;IACnF,UAAU,EAAE,OAAO,CAAA;IACnB,aAAa,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC;;;OAGG;IACH,kBAAkB,EAAE,MAAM,IAAI,CAAA;IAC9B,gFAAgF;IAChF,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC9B,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACvE,gBAAgB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAA;IAC1C,gBAAgB,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACvD,aAAa,EAAE,MAAM,IAAI,CAAA;CAC1B,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,cAAc,gDAEf,CAAA;AAEZ,eAAO,MAAM,UAAU,2BAMtB,CAAA;AAED,eAAO,MAAM,eAAe,GAAI,cAAc,KAAK,CAAC,iBAAiB,sBAkKpE,CAAA"}
+{"version":3,"file":"sidebar-provider.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/sidebar/sidebar-provider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,oBAAoB,2BAA2B,CAAA;AAU5D,MAAM,MAAM,mBAAmB,GAAG;IAChC,WAAW,EAAE,OAAO,CAAA;IACpB;;;;OAIG;IACH,QAAQ,EAAE,OAAO,CAAA;IACjB;;;;OAIG;IACH,QAAQ,EAAE,OAAO,CAAA;IACjB,mFAAmF;IACnF,UAAU,EAAE,OAAO,CAAA;IACnB,aAAa,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC;;;OAGG;IACH,kBAAkB,EAAE,MAAM,IAAI,CAAA;IAC9B,gFAAgF;IAChF,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC9B,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACvE,gBAAgB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAA;IAC1C,gBAAgB,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACvD,aAAa,EAAE,MAAM,IAAI,CAAA;CAC1B,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,cAAc,gDAEf,CAAA;AAEZ,eAAO,MAAM,UAAU,2BAMtB,CAAA;AAED,eAAO,MAAM,eAAe,GAAI,cAAc,KAAK,CAAC,iBAAiB,sBAkKpE,CAAA"}

package/dist/esm/components/ui/sidebar/sidebar-provider.js

@@ -5,11 +5,32 @@ import { getStorage, getStorageObject } from '../../../lib/storage/index.js';
 /**
  * The viewport below which the rail stops being a layout and becomes a drawer.
  *
- * 767px rather than 768px: this is the upper bound of `max-width`, so it is the
- * complement of Tailwind's `md` breakpoint (`min-width: 768px`) and `md:hidden`
- * on `SidebarTrigger` flips at exactly the same pixel the query does.
+ * ⛔ THE NEGATION OF THE TRIGGER'S QUERY, SPELLED AS A NEGATION.
+ *
+ * `SidebarTrigger` hides itself at `min-[768px]`, which is `width >= 768`. This
+ * is its exact complement AT ANY PRECISION, which `(max-width: 767px)` was not:
+ * that pair leaves the open interval (767, 768) matched by neither rule, and a
+ * viewport there draws the rail AND a hamburger that opens nothing — with the
+ * rail inline, `SidebarRoot` mounts no `Sheet`, so the control is dead. Chromium
+ * snaps its layout viewport to a whole pixel and never lands there, measured at
+ * four zoom levels; that is a rounding behaviour to rely on, not a boundary.
+ *
+ * ⚠️ THE PAIR HAS TO BE IN THE SAME UNIT. It used to be `md:hidden` over there,
+ * and `md` is 48rem: rem in a media query follows the BROWSER'S default font
+ * size, so at Chrome's "Small" setting that class hid the hamburger from 576px
+ * while this query still asked for a drawer up to 767px — a band of viewports
+ * with no navigation at all. Anything else that hides or shows a control at
+ * this boundary states it in pixels for the same reason.
+ *
+ * Media Queries Level 4 boolean logic, which is not a new requirement here:
+ * Tailwind v4 emits MQ4 RANGE syntax for everything this package ships —
+ * `min-[768px]` on the trigger compiles to `@media (width >= 768px)` and
+ * `max-sm:` on `SheetContent` to `@media (width < 40rem)` — and range syntax
+ * and boolean `not` landed in the same browsers (Chrome 88, Firefox 64,
+ * Safari 16.4). `(width < 768px)` is the equivalent range spelling of this
+ * line, should a reader prefer the pair to match character for character.
  */
-export const SIDEBAR_MOBILE_QUERY = '(max-width: 767px)';
+export const SIDEBAR_MOBILE_QUERY = 'not (min-width: 768px)';
 /**
  * Where focus goes when the rail has to receive it. The rail's own content is
  * links and buttons, so this is deliberately the short list rather than the
@@ -73,7 +94,7 @@ export const SidebarProvider = ({ children }) => {
         // ⛔ AND NOT AT ALL WHEN THE VIEWPORT IS THE ONE THAT DISMISSED IT. A
         // tablet rotated from portrait to landscape with the navigation open
         // crosses 768px, so the drawer is replaced by the rail and the opener is
-        // `SidebarTrigger` — which the same breakpoint just hid with `md:hidden`.
+        // `SidebarTrigger` — which the same breakpoint just hid.
         // `.focus()` on a `display: none` element is a silent no-op, and Radix's
         // own restore is already `preventDefault()`ed, so focus fell to `<body>`
         // and the reader lost their place (SC 2.4.3). Measured in Chromium at

package/dist/esm/components/ui/sidebar/sidebar-root.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-root.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/sidebar/sidebar-root.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAqEzB,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC3D;;;;;;;;;;;;;;;OAeG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAC5B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,WAAW,GAAI,kDAMzB,gBAAgB,sBA0GlB,CAAA"}
+{"version":3,"file":"sidebar-root.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/sidebar/sidebar-root.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAqEzB,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC3D;;;;;;;;;;;;;;;OAeG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAC5B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,WAAW,GAAI,kDAMzB,gBAAgB,sBAqHlB,CAAA"}

package/dist/esm/components/ui/sidebar/sidebar-root.js

@@ -85,7 +85,18 @@ export const SidebarRoot = ({ className, id, mobile = 'inline', mobileTitle = 'N
                 // its own. `max-w-full` so a consumer widening `--sidebar-width` past
                 // the viewport still cannot push the drawer off screen. The lifted
                 // override goes LAST so it re-points the variable this element reads.
-                className: cn('w-[var(--sidebar-width)] max-w-full gap-0 p-0', liftWidthOverrides(className)), "aria-describedby": undefined, 
+                //
+                // ⛔ THE `max-sm:` PAIR IS NOT A DUPLICATE. `SheetContent` grew a
+                // phone step — `max-sm:w-full max-sm:px-4` — because a form panel at
+                // two fifths of a 390px screen is unreadable. A NAVIGATION drawer is
+                // the one panel that must not take it: 244px over a dimmed page is
+                // the design, and full-bleed removes the tap-outside-to-close target
+                // that every other way out of this drawer is an alternative to.
+                // tailwind-merge drops a conflicting class only when the modifiers
+                // match, so a bare `w-[…]` cannot reach `max-sm:w-full` and these two
+                // tokens are what state the exemption. Measured: without them the
+                // drawer is 390px wide with 16px of inset on a 390px phone.
+                className: cn('w-[var(--sidebar-width)] max-w-full gap-0 p-0 max-sm:w-[var(--sidebar-width)] max-sm:p-0', liftWidthOverrides(className)), "aria-describedby": undefined, 
                 // ⛔ RADIX'S OWN RESTORE GOES NOWHERE HERE. `DialogContent`
                 // preventDefaults the focus scope's restore and focuses the ref a
                 // `SheetTrigger` would have filled; this drawer is opened from provider

package/dist/esm/components/ui/sidebar/sidebar-trigger.d.ts

@@ -4,9 +4,36 @@ export type SidebarTriggerProps = React.ComponentProps<typeof IconButton>;
 /**
  * The control that opens the mobile drawer.
  *
- * `md:hidden` by default because above 768px the rail is already on screen and
- * a second way to reach it is a second thing to explain; a consumer that wants
- * it everywhere passes its own display class.
+ * Hidden from 768px up by default, because above it the rail is already on
+ * screen and a second way to reach it is a second thing to explain; a consumer
+ * that wants it everywhere passes its own display class.
+ *
+ * ⛔ THE BREAKPOINT IS IN PIXELS, AND `md:hidden` IS NOT A SPELLING OF IT.
+ *
+ * Whether the rail became a drawer is decided by `SIDEBAR_MOBILE_QUERY`, which
+ * is `not (min-width: 768px)` — pixels. `md:` is 48rem, and rem inside a MEDIA
+ * QUERY resolves against the browser's default font size rather than anything
+ * the page declares, so the two flip at different widths the moment a reader
+ * changes that setting. At Chrome's "Small" (12px) `md:` turns over at 576px
+ * while the drawer still turns over at 768px: every window between them showed
+ * NO RAIL AND NO HAMBURGER, which is a console with no navigation at all.
+ * Measured on product-console; the band is four of this package's own fixtures
+ * in `scripts/measure-phone-shapes.mjs`. At "Very large" (20px) the same
+ * mismatch runs the other way and 768–959px drew both.
+ *
+ * `min-[768px]:hidden` is the exact complement of that query, at every font
+ * size AND at any sub-pixel precision — which is why the query next door is
+ * spelled as a negation rather than as `(max-width: 767px)`: that pair leaves
+ * the open interval (767, 768) matched by neither, and a viewport there draws
+ * the rail plus a hamburger that opens nothing.
+ *
+ * ⚠️ THE PROPERTY IS ABOUT THE TWO MEDIA DECISIONS, NOT ABOUT THE FIRST PAINT.
+ * The harness enforces one of the two and never neither or both, which holds
+ * wherever `isMobile` has been read. `isMobile` starts false on purpose — there
+ * is no viewport on the server — and is corrected in an effect, so on a phone
+ * the first painted frame shows the inline rail while this control is already
+ * on screen. That one hydration is the deliberate price of hydration safety,
+ * documented on `SidebarProvider`'s own effect, and predates this class.
  *
  * ⚠️ `aria-controls` IS SET ONLY WHILE THE DRAWER EXISTS. Radix unmounts the
  * dialog content when closed, and a reference to an element that is not in the

package/dist/esm/components/ui/sidebar/sidebar-trigger.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-trigger.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/sidebar/sidebar-trigger.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAG3C,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,CAAA;AAEzE;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,cAAc,GAAI,2DAK5B,mBAAmB,sBAqBrB,CAAA"}
+{"version":3,"file":"sidebar-trigger.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/sidebar/sidebar-trigger.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAG3C,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,CAAA;AAEzE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,eAAO,MAAM,cAAc,GAAI,2DAK5B,mBAAmB,sBAqBrB,CAAA"}

package/dist/esm/components/ui/sidebar/sidebar-trigger.js

@@ -7,9 +7,36 @@ import { useSidebar } from './sidebar-provider.js';
 /**
  * The control that opens the mobile drawer.
  *
- * `md:hidden` by default because above 768px the rail is already on screen and
- * a second way to reach it is a second thing to explain; a consumer that wants
- * it everywhere passes its own display class.
+ * Hidden from 768px up by default, because above it the rail is already on
+ * screen and a second way to reach it is a second thing to explain; a consumer
+ * that wants it everywhere passes its own display class.
+ *
+ * ⛔ THE BREAKPOINT IS IN PIXELS, AND `md:hidden` IS NOT A SPELLING OF IT.
+ *
+ * Whether the rail became a drawer is decided by `SIDEBAR_MOBILE_QUERY`, which
+ * is `not (min-width: 768px)` — pixels. `md:` is 48rem, and rem inside a MEDIA
+ * QUERY resolves against the browser's default font size rather than anything
+ * the page declares, so the two flip at different widths the moment a reader
+ * changes that setting. At Chrome's "Small" (12px) `md:` turns over at 576px
+ * while the drawer still turns over at 768px: every window between them showed
+ * NO RAIL AND NO HAMBURGER, which is a console with no navigation at all.
+ * Measured on product-console; the band is four of this package's own fixtures
+ * in `scripts/measure-phone-shapes.mjs`. At "Very large" (20px) the same
+ * mismatch runs the other way and 768–959px drew both.
+ *
+ * `min-[768px]:hidden` is the exact complement of that query, at every font
+ * size AND at any sub-pixel precision — which is why the query next door is
+ * spelled as a negation rather than as `(max-width: 767px)`: that pair leaves
+ * the open interval (767, 768) matched by neither, and a viewport there draws
+ * the rail plus a hamburger that opens nothing.
+ *
+ * ⚠️ THE PROPERTY IS ABOUT THE TWO MEDIA DECISIONS, NOT ABOUT THE FIRST PAINT.
+ * The harness enforces one of the two and never neither or both, which holds
+ * wherever `isMobile` has been read. `isMobile` starts false on purpose — there
+ * is no viewport on the server — and is corrected in an effect, so on a phone
+ * the first painted frame shows the inline rail while this control is already
+ * on screen. That one hydration is the deliberate price of hydration safety,
+ * documented on `SidebarProvider`'s own effect, and predates this class.
  *
  * ⚠️ `aria-controls` IS SET ONLY WHILE THE DRAWER EXISTS. Radix unmounts the
  * dialog content when closed, and a reference to an element that is not in the
@@ -19,7 +46,7 @@ import { useSidebar } from './sidebar-provider.js';
  */
 export const SidebarTrigger = ({ className, onClick, 'aria-label': ariaLabel = 'Open navigation', ...props }) => {
     const { openMobile, setOpenMobile, sidebarId } = useSidebar();
-    return (_jsx(IconButton, { type: "button", variant: "outline", "data-slot": "sidebar-trigger", "aria-label": ariaLabel, "aria-expanded": openMobile, "aria-controls": openMobile ? sidebarId : undefined, className: cn('md:hidden', className), onClick: (event) => {
+    return (_jsx(IconButton, { type: "button", variant: "outline", "data-slot": "sidebar-trigger", "aria-label": ariaLabel, "aria-expanded": openMobile, "aria-controls": openMobile ? sidebarId : undefined, className: cn('min-[768px]:hidden', className), onClick: (event) => {
             onClick?.(event);
             setOpenMobile(!openMobile);
         }, ...props, children: _jsx(Menu, { "aria-hidden": true }) }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lerianstudio/sindarian-ui",
-  "version": "2.0.0-beta.11",
+  "version": "2.0.0-beta.12",
   "description": "Sindarian UI - A UI library for Midaz Console",
   "license": "ISC",
   "author": {
@@ -50,7 +50,8 @@
     "test": "jest",
     "test:e2e": "exit 0",
     "test:cov": "jest --coverage",
-    "measure:input-shrink": "node scripts/measure-input-shrink.mjs"
+    "measure:input-shrink": "node scripts/measure-input-shrink.mjs",
+    "measure:phone-shapes": "node scripts/measure-phone-shapes.mjs"
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.20",