npm - @lerianstudio/sindarian-ui - Versions diffs - 2.0.0-beta.7 → 2.0.0-beta.9 - Mend

@lerianstudio/sindarian-ui 2.0.0-beta.7 → 2.0.0-beta.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (84) hide show

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

@@ -2,7 +2,28 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { getStorage, getStorageObject } from '../../../lib/storage/index.js';
-const SidebarContext = React.createContext(undefined);
+/**
+ * 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.
+ */
+export const SIDEBAR_MOBILE_QUERY = '(max-width: 767px)';
+/**
+ * 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
+ * full tabbable grammar: a `[tabindex]` sweep would have to exclude `-1`, and
+ * nothing in a sidebar carries one.
+ */
+const FOCUSABLE = 'a[href], button:not([disabled])';
+/**
+ * Exported so `SidebarRoot` can re-provide it for the drawer's subtree. That
+ * subtree is the only place `isCollapsed` and `isDrawer` differ from the
+ * provider's own values, and scoping the override to it is what keeps a
+ * consumer on `mobile="inline"` seeing exactly today's rail.
+ */
+export const SidebarContext = React.createContext(undefined);
 export const useSidebar = () => {
     const context = React.useContext(SidebarContext);
     if (!context) {
@@ -14,6 +35,61 @@ export const SidebarProvider = ({ children }) => {
     const [hydrated, setHydrated] = React.useState(false);
     const [collapsed, setCollapsed] = React.useState(false);
     const [items, _setItems] = React.useState({});
+    const [isMobile, setIsMobile] = React.useState(false);
+    const [openMobile, _setOpenMobile] = React.useState(false);
+    const sidebarId = React.useId();
+    /**
+     * ⛔ RADIX CANNOT RESTORE THIS FOCUS BY ITSELF. `DialogContent` preventDefaults
+     * the focus scope's own restore and focuses `triggerRef.current` instead —
+     * the ref a `SheetTrigger` would have filled. The drawer is opened from this
+     * state rather than from a trigger inside the dialog, so that ref is null and
+     * closing dropped focus onto `<body>`: a keyboard reader who opened the
+     * navigation and pressed Escape was returned to the top of the document.
+     *
+     * Captured here rather than in `SidebarTrigger` so that a consumer opening
+     * the drawer from its own control gets the same behaviour.
+     */
+    const opener = React.useRef(null);
+    const setOpenMobile = React.useCallback((open) => {
+        if (open && typeof document !== 'undefined') {
+            opener.current = document.activeElement;
+        }
+        _setOpenMobile(open);
+    }, []);
+    /**
+     * ⛔ THE VIEWPORT AT THE MOMENT FOCUS MOVES, NOT AT THE MOMENT IT OPENED.
+     *
+     * Radix calls `restoreDrawerFocus` from the focus scope's UNMOUNT handler,
+     * which is the last thing in the commit to touch focus — later than any
+     * effect in this provider, so the decision has to be made inside the handler
+     * rather than beside it. By then `isMobile` has already flipped.
+     */
+    const isMobileRef = React.useRef(false);
+    isMobileRef.current = isMobile;
+    const restoreDrawerFocus = React.useCallback(() => {
+        // `isConnected`: the control that opened the drawer may itself have been
+        // unmounted by whatever the reader did inside it.
+        //
+        // ⛔ 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`.
+        // `.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
+        // 390 → 1280: `{"rails":1,"triggerDisplay":"none","focus":"BODY:"}`.
+        if (isMobileRef.current && opener.current?.isConnected) {
+            opener.current.focus();
+            return;
+        }
+        // The rail is what the drawer became, so that is where the reader goes.
+        // Below the breakpoint there is nothing here to find — a closed drawer
+        // leaves no navigation in the DOM — and focus stays where Radix left it.
+        document
+            .getElementById(sidebarId)
+            ?.querySelector(FOCUSABLE)
+            ?.focus();
+    }, [sidebarId]);
     const toggleSidebar = () => setCollapsed((collapsed) => !collapsed);
     const getItemCollapsed = (key) => {
         return items[key] || false;
@@ -27,6 +103,37 @@ export const SidebarProvider = ({ children }) => {
         _setItems(getStorageObject('sidebar-items', {}));
         setHydrated(true);
     }, []);
+    /**
+     * ⚠️ FALSE UNTIL THE CLIENT SAYS OTHERWISE. There is no viewport on the
+     * server, so the first paint is always the rail and the drawer appears on
+     * hydration; starting from a guess would make the markup differ between the
+     * two renders. The `matchMedia` guard is the one `theme-provider.tsx` next
+     * door already carries: jsdom and some embedded runtimes ship without it, and
+     * a missing media API is a desktop, not a crash.
+     */
+    React.useEffect(() => {
+        if (typeof window.matchMedia !== 'function') {
+            return;
+        }
+        const media = window.matchMedia(SIDEBAR_MOBILE_QUERY);
+        const sync = () => setIsMobile(media.matches);
+        sync();
+        media.addEventListener('change', sync);
+        return () => media.removeEventListener('change', sync);
+    }, []);
+    /**
+     * A drawer left open while the viewport grows back would keep an overlay and
+     * a focus trap over a layout that is already showing its rail, with nothing
+     * on screen to dismiss them.
+     *
+     * Where focus goes afterwards is `restoreDrawerFocus`'s decision, not this
+     * effect's: Radix's unmount handler runs later than anything here.
+     */
+    React.useEffect(() => {
+        if (!isMobile) {
+            _setOpenMobile(false);
+        }
+    }, [isMobile]);
     // Only persist to localStorage after hydration to avoid overwriting stored values
     React.useEffect(() => {
         if (!hydrated) {
@@ -41,7 +148,21 @@ export const SidebarProvider = ({ children }) => {
         localStorage.setItem('sidebar-items', JSON.stringify(items));
     }, [items, hydrated]);
     return (_jsx(SidebarContext.Provider, { value: {
+            /**
+             * ⚠️ A NARROW VIEWPORT DOES NOT TOUCH THIS. It used to be forced false
+             * whenever `isMobile`, which silently changed the rail for every
+             * consumer — including the ones that never asked for a drawer.
+             * `SidebarRoot` overrides it for the drawer's own subtree instead, so
+             * the stored preference reaches an inline rail unchanged at every
+             * viewport.
+             */
             isCollapsed: collapsed,
+            isDrawer: false,
+            isMobile,
+            openMobile,
+            setOpenMobile,
+            restoreDrawerFocus,
+            sidebarId,
             items,
             setItems: _setItems,
             getItemCollapsed,

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

@@ -1,3 +1,40 @@
 import React from 'react';
-export declare const SidebarRoot: ({ className, ...props }: React.ComponentProps<"nav">) => React.JSX.Element;
+export type SidebarRootProps = React.ComponentProps<'nav'> & {
+    /**
+     * What this rail becomes below 768px.
+     *
+     * - `'inline'` (default): nothing changes. The rail renders at every
+     *   viewport exactly as it always has, and the reader's collapsed preference
+     *   is untouched.
+     * - `'drawer'`: the inline rail is not rendered below the breakpoint and the
+     *   navigation moves into an overlay drawer that `SidebarTrigger` opens.
+     *
+     * ⛔ THE DEFAULT IS NOT A TASTE, IT IS A CONSUMER-SAFETY RULE. `SidebarTrigger`
+     * is the only way back into the drawer and it must render inside
+     * `SidebarProvider`. A consumer that has not placed one yet — which is every
+     * consumer at the moment this shipped — would get a phone with NO navigation
+     * rather than a rail that takes 63% of it, and that is strictly worse. Opt in
+     * once there is somewhere to put the trigger.
+     */
+    mobile?: 'inline' | 'drawer';
+    /**
+     * The drawer's accessible name. A dialog needs one, and it is read out when
+     * the drawer opens. Unused while `mobile` is `'inline'`.
+     */
+    mobileTitle?: string;
+};
+/**
+ * ⛔ BELOW 768px A RAIL IS NOT A LAYOUT — once a consumer opts in.
+ *
+ * The widths above are a fixed share of a flex row, so at 390px the expanded
+ * rail took 63% of the screen and left the page 146px, and the only affordance
+ * — `SidebarExpandButton` — shrinks it to 72px, which is still 18% and still
+ * permanently on screen. There was nothing that removed it.
+ *
+ * With `mobile="drawer"` the rail is replaced below the breakpoint by an
+ * overlay drawer. Escape, the backdrop click, the focus trap and returning
+ * focus to whatever opened it are Radix Dialog's, through the kit's own
+ * `Sheet`; none of that is re-implemented here.
+ */
+export declare const SidebarRoot: ({ className, id, mobile, mobileTitle, ...props }: SidebarRootProps) => React.JSX.Element;
 //# sourceMappingURL=sidebar-root.d.ts.map

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

	@@ -1 +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;~~AAoBzB~~,~~eAAO~~,MAAM,~~WAAW~~,~~GAAI~~,~~yBAGzB,~~KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,~~sBAW7B~~,CAAA"}
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"}

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

@@ -1,20 +1,115 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cva } from 'class-variance-authority';
-import { useSidebar } from './sidebar-provider.js';
+import { SidebarContext, useSidebar } from './sidebar-provider.js';
 import { cn } from '../../../lib/utils.js';
+import { Sheet, SheetContent, SheetTitle } from '../sheet/index.js';
+/**
+ * ⛔ THE WIDTHS ARE TOKENS, NOT LITERALS.
+ *
+ * They were `w-[72px]` and `w-[244px]`, which a consumer could only override by
+ * winning a specificity argument with `cn`. `--sidebar-width` and
+ * `--sidebar-width-collapsed` are declared in `globals.css`, so the default
+ * still ships with the stylesheet, and a consumer re-points either one with
+ * `className="[--sidebar-width:280px]"` ON THE RAIL, which moves the rail and
+ * the mobile drawer together (see `liftWidthOverrides` below), or with a rule
+ * on `:root`/`html`.
+ *
+ * ⚠️ A DECLARATION ON A REACT-TREE ANCESTOR REACHES THE RAIL AND NOT THE
+ * DRAWER. Custom properties inherit down the DOM tree, and the drawer is
+ * portalled to `document.body`, so a layout wrapper is not an ancestor of it.
+ * `:root` is, which is why it is named above and a wrapper is not.
+ */
 const sidebarVariants = cva('group/sidebar shadow-sidebar relative flex flex-col transition-[width] duration-300 ease-in-out', {
     variants: {
         collapsed: {
-            true: 'w-[72px]',
-            false: 'w-[244px]'
+            true: 'w-[var(--sidebar-width-collapsed)]',
+            false: 'w-[var(--sidebar-width)]'
         }
     },
     defaultVariants: {
         collapsed: false
     }
 });
-export const SidebarRoot = ({ className, ...props }) => {
-    const { isCollapsed } = useSidebar();
-    return (_jsx("nav", { "data-slot": "sidebar-root", className: cn(sidebarVariants({ collapsed: isCollapsed }), className), "data-collapsed": isCollapsed, ...props }));
+/**
+ * Tailwind arbitrary-property classes that re-point the sidebar geometry, e.g.
+ * `[--sidebar-width:320px]` or `[--sidebar-width-collapsed:88px]`.
+ *
+ * ⚠️ ANCHORED TO A CLASS BOUNDARY, WHICH IS THE WHOLE POINT OF THE LOOKBEHIND.
+ * Unanchored it also matched the tail of `md:[--sidebar-width:320px]` and
+ * lifted it with the prefix stripped — an override a consumer scoped to
+ * ≥768px, applied unconditionally to the drawer that only exists below it.
+ */
+const WIDTH_OVERRIDE = /(?<=^|\s)\[--sidebar-width(?:-collapsed)?:[^\]]+\]/g;
+/**
+ * ⛔ THE ONE PART OF THE CONSUMER'S className THAT HAS TO CROSS THE PORTAL.
+ *
+ * `SheetContent` mounts through `SheetPortal` into `document.body`, and custom
+ * properties inherit down the DOM tree rather than the React tree. So the
+ * documented override — a class on the rail — set `--sidebar-width` on an
+ * element the drawer is not a descendant of, and the whole className that DOES
+ * travel lands on the inner `<nav>`, which is BELOW the element that reads the
+ * variable. Measured in Chromium: rail 320px, drawer 244px. Following the
+ * instruction handed to product-console produced a 280px rail on desktop and a
+ * 244px drawer on a phone, silently.
+ *
+ * ⚠️ ONLY THE GEOMETRY TOKENS. The rest of a rail className is rail-shaped —
+ * `h-full`, and the `data-[collapsed=false]:min-w-70` all eight console
+ * sidebars pass — and putting that on the sheet would reinstate the
+ * 280px-inside-a-244px-sheet overflow from the other side.
+ */
+function liftWidthOverrides(className) {
+    return className?.match(WIDTH_OVERRIDE)?.join(' ');
+}
+/**
+ * ⛔ BELOW 768px A RAIL IS NOT A LAYOUT — once a consumer opts in.
+ *
+ * The widths above are a fixed share of a flex row, so at 390px the expanded
+ * rail took 63% of the screen and left the page 146px, and the only affordance
+ * — `SidebarExpandButton` — shrinks it to 72px, which is still 18% and still
+ * permanently on screen. There was nothing that removed it.
+ *
+ * With `mobile="drawer"` the rail is replaced below the breakpoint by an
+ * overlay drawer. Escape, the backdrop click, the focus trap and returning
+ * focus to whatever opened it are Radix Dialog's, through the kit's own
+ * `Sheet`; none of that is re-implemented here.
+ */
+export const SidebarRoot = ({ className, id, mobile = 'inline', mobileTitle = 'Navigation', ...props }) => {
+    const context = useSidebar();
+    const { isCollapsed, isMobile, openMobile, setOpenMobile, restoreDrawerFocus, sidebarId } = context;
+    if (!isMobile || mobile === 'inline') {
+        return (_jsx("nav", { "data-slot": "sidebar-root", className: cn(sidebarVariants({ collapsed: isCollapsed }), className), "data-collapsed": isCollapsed, ...props, id: mobile === 'drawer' ? sidebarId : id }));
+    }
+    return (_jsx(SidebarContext.Provider, { value: { ...context, isCollapsed: false, isDrawer: true }, children: _jsx(Sheet, { open: openMobile, onOpenChange: setOpenMobile, children: _jsxs(SheetContent, { side: "left",
+                // The Sheet's own paddings are built for a form panel; a rail brings
+                // 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,
+                // ⛔ 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
+                // state, so that ref is null and closing dropped focus onto `<body>`.
+                // Running first means `composeEventHandlers` skips Radix's half.
+                onCloseAutoFocus: (event) => {
+                    event.preventDefault();
+                    restoreDrawerFocus();
+                }, children: [_jsx(SheetTitle, { className: "sr-only", children: mobileTitle }), _jsx("nav", { "data-slot": "sidebar-root", "data-mobile": "true",
+                        /* ⛔ NO `data-collapsed` HERE. The consumer className is forwarded
+                           verbatim, and all eight console sidebars pass
+                           `data-[collapsed=false]:min-w-70`; stamping the attribute armed
+                           it, giving the navigation a 280px min-width inside a 244px sheet.
+                           `min-width` resolves after `max-width`, so the sheet could not
+                           claw it back and the contents were 36px wider than the drawer.
+                           `data-mobile` already names this surface and a drawer is never
+                           collapsed, so the attribute had nothing left to say. */
+                        className: cn(sidebarVariants({ collapsed: false }), 'h-full w-full shadow-none', className), ...props,
+                        /* ⛔ AFTER THE SPREAD, AND NOT THE CALLER'S. This is the target of
+                           `SidebarTrigger`'s `aria-controls` and the handle the provider
+                           uses to put focus back into the navigation when the viewport
+                           grows. Spread first, a caller that set `id` replaced it and left
+                           a dangling `aria-controls` — which axe reports as a CRITICAL
+                           `aria-valid-attr-value` — and a focus restore that lands on
+                           `<body>`. Both silent. */
+                        id: sidebarId })] }) }) }));
 };

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { IconButton } from '../icon-button/index.js';
+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.
+ *
+ * ⚠️ `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
+ * DOM is what axe-core reports as a CRITICAL `aria-valid-attr-value` — the same
+ * defect the Autocomplete panel was repaired for (console-sdk#150). A toggle
+ * with `aria-expanded="false"` and no `aria-controls` is complete on its own.
+ */
+export declare const SidebarTrigger: ({ className, onClick, "aria-label": ariaLabel, ...props }: SidebarTriggerProps) => React.JSX.Element;
+//# sourceMappingURL=sidebar-trigger.d.ts.map

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

	@@ -0,0 +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"}

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

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Menu } from 'lucide-react';
+import { cn } from '../../../lib/utils.js';
+import { IconButton } from '../icon-button/index.js';
+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.
+ *
+ * ⚠️ `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
+ * DOM is what axe-core reports as a CRITICAL `aria-valid-attr-value` — the same
+ * defect the Autocomplete panel was repaired for (console-sdk#150). A toggle
+ * with `aria-expanded="false"` and no `aria-controls` is complete on its own.
+ */
+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) => {
+            onClick?.(event);
+            setOpenMobile(!openMobile);
+        }, ...props, children: _jsx(Menu, { "aria-hidden": true }) }));
+};

package/dist/globals.css CHANGED Viewed

@@ -214,6 +214,28 @@
   :root {
     color-scheme: light; /* native widgets (form controls, scrollbars) follow the theme */
+    /*
+      Sidebar geometry. These were literals inside SidebarRoot's cva
+      (`w-[244px]` / `w-[72px]`), which a consumer could only override by
+      winning a specificity argument with `cn`. As custom properties the
+      default still ships with this sheet.
+      TWO places to re-point them, and only these two:
+        - on the rail, via `className="[--sidebar-width:280px]"`. SidebarRoot
+          copies exactly these two arbitrary-property classes onto the mobile
+          drawer's own element, so one class moves the rail AND the drawer.
+        - on `:root` or `html`, which every layout inherits from.
+      NOT on a React-tree wrapper above the rail: that reaches the rail, but
+      the mobile drawer is portalled into document.body, and custom properties
+      inherit down the DOM tree. A wrapper is not an ancestor of the portal;
+      `:root` is.
+      They are theme-independent on purpose: a rail is not wider in the dark.
+    */
+    --sidebar-width: 244px;
+    --sidebar-width-collapsed: 72px;
     /* Application tokens (from Figma ring-tokens) */
     --body-surface: 240 5% 96%; /* base/100 = #F4F4F5 */
     /*
@@ -602,8 +624,32 @@
   --normal-border: hsl(var(--border));
 }
-[data-sonner-toast] [data-title] {
-  font-weight: 600;
+/*
+  The title outranks the description, and both rules have to WIN the cascade
+  for that to mean anything. Sonner ships
+  `[data-sonner-toast][data-styled='true'] [data-title]` at font-weight 500 and
+  its description twin at 400 — both (0,3,0), both injected at runtime.
+  The title rule here was a plain `[data-sonner-toast] [data-title]` (0,2,0):
+  it declared 600 and rendered at 500, losing outright, while the description
+  carried `!important` and rendered at 600. The hierarchy came out inverted on
+  every toast in the kit, the long line heavier than the label naming it.
+  Both now take the compound selector plus !important — the shape the
+  close-button rules below already use against this same stylesheet, and for
+  the same reason: source order cannot settle a tie with a sheet that is
+  injected at runtime.
+  The description returns to 400. It is the running text of a toast, and 14px
+  semibold across a full sentence reads as emphasis with nothing left to
+  emphasise; the family ink already carries the severity. Its `color` override
+  keeps !important on its own merits — sonner hardcodes #3f3f3f there, plus a
+  dark-theme rule of its own on top.
+  `toast text weights` in src/__tests__/tokens-contract.test.ts holds the order
+  and the two properties that let it apply.
+*/
+[data-sonner-toast][data-styled='true'] [data-title] {
+  font-weight: 600 !important;
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
@@ -611,7 +657,7 @@
 [data-sonner-toast] [data-description],
 [data-sonner-toast][data-styled='true'] [data-description] {
   font-size: 0.875rem;
-  font-weight: 600 !important;
+  font-weight: 400 !important;
   line-height: 1.25rem;
   color: var(--normal-text) !important;
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@lerianstudio/sindarian-ui",
-  "version": "2.0.0-beta.7",
+  "version": "2.0.0-beta.9",
   "description": "Sindarian UI - A UI library for Midaz Console",
   "license": "ISC",
   "author": {