@scattered-light/loomiere-mojave 0.3.0 → 0.4.0

package/dist/exports/design-system/README.md

@@ -83,6 +83,12 @@ Set it with `data-emphasis="bold|standard|subtle|quiet"` on a Button or any elem
 
 `data-color="<palette>"` on any element repaints everything inside it in that palette (`primary`, `secondary`, `error`, `accent`, `chrome`...): a destructive button is `<Button data-emphasis="bold" data-color="error">`.
 
+### Statuses
+
+`data-status="info|success|warning|error"` on any element gives every emphasis level inside it that status's version, so a subtle warning banner is `<div data-status="warning" data-emphasis="subtle">`. A level is the level's style in the status's palette unless the brand picked a pair for it:
+
+(This brand picks none, so every level is automatic.)
+
 ### Brand pairs
 
 A pair is a background with its own text and accent, checked to meet AA. Put `class="sl-pair-<name>"` on a band, card or callout and everything inside (text, links, buttons, focus) takes the pair's colors.
@@ -99,14 +105,14 @@ Families: display 'Funnel Display', sans-serif, body 'Barlow Semi Condensed', sa
 
 All text uses one whole text style, never a size or weight on its own: `class="text-style-<name>"`, or the `--sl-font-<name>-*` variables (font-family, font-size, font-weight, line-height, letter-spacing) together. Styles come in tiers named for why the text is that size:
 
-- **minimize**: the smallest functional text: captions, fine print, dense metadata. Variants: `trigger`, `selected`, `link`, `subtitle`, `subtitle-label`.
-- **condense**: compact UI: small controls, table cells, secondary labels. Variants: `trigger`, `selected`, `link`, `subtitle`, `subtitle-label`.
-- **base**: the default UI and body text. Variants: `selected`, `label`, `link`, `subtitle`, `trigger`.
-- **magnify**: emphasized body text: lead paragraphs, larger controls. Variants: `trigger`.
-- **maximize**: display text for headings and hero copy, in steps xs to 4xl. Variants: `2xl`, `3xl`, `4xl`, `lg`, `md`, `sm`, `xl`, `xs`.
-- **code**: code, in the mono family.
+- **minimize**: the smallest functional text: captions, fine print, dense metadata. Roles: `body`, `trigger`, `selected`, `link`, `subtitle`, `eyebrow`.
+- **condense**: compact UI: small controls, table cells, secondary labels. Roles: `code`, `body`, `trigger`, `selected`, `link`, `subtitle`, `eyebrow`, `title`.
+- **base**: the default UI and body text. Roles: `body`, `selected`, `label`, `link`, `subtitle`, `trigger`, `title`.
+- **magnify**: emphasized body text: lead paragraphs, larger controls. Roles: `body`, `trigger`, `title`.
+- **amplify**: titles of dialogs, drawers and page sections. Roles: `title`.
+- **maximize**: the page head. Roles: `title`.
 
-Inside a tier, `-trigger` is for buttons and triggers, `-selected` for the current tab, toggle or nav item, `-link` for links, `-subtitle` for subheads and `-label` for form labels. Sizes below the base are fixed; the base and up grow with the viewport.
+Names are role first, then tier: `body-` for running text, `trigger-` for buttons and triggers, `selected-` for the current tab, toggle or nav item, `link-` for links, `subtitle-` for subheads, `label-` for form labels, `eyebrow-` for small uppercase labels, `title-` for titles in the display family, `code-` for code in the mono family. Sizes below the base are fixed; the base and up grow with the viewport.
 
 ## Space, shape and depth
 
@@ -132,11 +138,11 @@ Keyboard focus is one ring, `--sl-focus-outline` with `--sl-focus-outline-offset
 
 ## Modes
 
-Light and dark: `data-theme="light|dark"` on the root, or the system setting when neither is set. High contrast follows `prefers-contrast: more`. Color vision themes: `data-vision="deuteranopia|protanopia|tritanopia|achromatopsia"`, each designed from this brand. Never hand-pick dark colors; the tokens already flip.
+Themes: `data-theme="light|dark|light-high-contrast|dark-high-contrast"` on the root, or the system setting (including `prefers-contrast: more`) when none is set. Color vision themes are themes of their own, each a light theme designed from this brand: `data-theme="deuteranopia|protanopia|tritanopia|achromatopsia"`. Never hand-pick dark colors; the tokens already flip.
 
 ## Components
 
-The components are [Base UI](https://base-ui.com) parts styled by class name: `Accordion`, `AlertDialog`, `Autocomplete`, `Avatar`, `Button`, `Checkbox`, `CheckboxGroup`, `Collapsible`, `Combobox`, `ContextMenu`, `Dialog`, `Drawer`, `Field`, `Fieldset`, `Form`, `IconButton`, `Input`, `Menu`, `Menubar`, `Meter`, `NavigationMenu`, `NumberField`, `OTPField`, `Popover`, `PreviewCard`, `Progress`, `Radio`, `ScrollArea`, `Select`, `Separator`, `Slider`, `Switch`, `Tabs`, `Toast`, `Toggle`, `ToggleGroup`, `Toolbar`, `Tooltip`. Each component's README lists the classes its parts take and the data attributes they answer to (`data-size="sm|lg"`, `data-emphasis`, `data-color`).
+The components are [Base UI](https://base-ui.com) parts styled by class name: `Accordion`, `AlertDialog`, `Autocomplete`, `Avatar`, `Button`, `Checkbox`, `CheckboxGroup`, `Collapsible`, `Combobox`, `ContextMenu`, `Dialog`, `Drawer`, `Field`, `Fieldset`, `Form`, `Input`, `Menu`, `Menubar`, `Meter`, `NavigationMenu`, `NumberField`, `OTPField`, `Popover`, `PreviewCard`, `Progress`, `Radio`, `ScrollArea`, `Select`, `Separator`, `Slider`, `Switch`, `Table`, `Tabs`, `Toast`, `Toggle`, `ToggleGroup`, `Toolbar`, `Tooltip`. Each component's README lists the classes its parts take and the data attributes they answer to (`data-size="sm|lg"`, `data-emphasis`, `data-color`).
 
 Icons are Material Symbols Outlined by ligature name (`<span class="material-symbols-outlined">search</span>`, or `Loomiere.MaterialSymbol name="search"`), sized by the `.icon-<tier>` utilities to match the text beside them.
 
@@ -150,7 +156,7 @@ Load three things, in this order:
 
 `window.Loomiere` holds two kinds of component:
 
-- **Wrappers** put their own classes on, so use them bare: `Loomiere.Button`, `Loomiere.IconButton`, `Loomiere.Input`, `Loomiere.Field`, `Loomiere.Fieldset`, `Loomiere.Form`, `Loomiere.NavigationMenu`. `Loomiere.Button` also takes `emphasis` (`bold|standard|subtle|quiet`) and `palette` props, and a Button holding only an icon draws itself square (it sets `data-icon-only`). A plain `.Button`, such as a Popover or Toolbar trigger, is drawn square when it has an `aria-label` and a single icon inside, or when you set `data-icon-only` on it.
+- **Wrappers** put their own classes on, so use them bare: `Loomiere.Button`, `Loomiere.Input`, `Loomiere.Field`, `Loomiere.Fieldset`, `Loomiere.Form`, `Loomiere.NavigationMenu`. `Loomiere.Button` also takes `emphasis` (`bold|standard|subtle|quiet`) and `palette` props, and a Button holding only an icon draws itself square (it sets `data-icon-only`). A plain `.Button`, such as a Popover or Toolbar trigger, is drawn square when it has an `aria-label` and a single icon inside, or when you set `data-icon-only` on it.
 - **Everything else is the bare Base UI part** under its usual name (`Loomiere.Popover.Popup`, `Loomiere.ToggleGroup`). It draws nothing until you give each part its class, which is the component and part names joined: `<Loomiere.Popover.Popup className="PopoverPopup">`, `<Loomiere.Toggle className="Toggle">`. The component READMEs list every class.
 
 `Loomiere.Base` holds the bare Base UI parts for the wrappers too (`Loomiere.Base.Button`), for when you need the part without its classes.
@@ -161,8 +167,7 @@ Pick by what the person is doing, not by look:
 
 | Component | Use it to |
 |---|---|
-| `Button` | Run one action. Set its emphasis by how much the action matters. |
-| `IconButton` | Run a small, frequent action shown as an icon alone, where a Button would be too loud: calendar arrows, row actions, a clear button. Always give it an aria-label. |
+| `Button` | Run one action. Set its emphasis by how much the action matters. For a small, frequent action shown as an icon alone (calendar arrows, row actions), use a quiet neutral icon-only Button: `<Loomiere.Button emphasis="quiet" palette="neutral" data-size="xs" aria-label="Next month">` with one icon inside. |
 | `Switch` | Turn one setting on or off, taking effect at once. |
 | `Checkbox` | Turn one option on or off inside a form that is submitted later. |
 | `Toggle` | A tool that stays pressed, such as Bold in a toolbar. |

package/dist/exports/design-system/components/Accordion/README.md

@@ -1,6 +1,6 @@
 # Accordion
 
-The Base UI Accordion styled by the theme. No component tokens. Hover, press, chevron, divider and motion are the disclosure concept (tokens/semantic/disclosure.json); the trigger is the maximize-md heading and the panel is base text. The accordion sits on whatever surface holds it.
+The Base UI Accordion styled by the theme. No component tokens. Hover, press, chevron, divider and motion are the disclosure concept (tokens/semantic/disclosure.json); the trigger is the title-base heading and the panel is base text. The accordion sits on whatever surface holds it.
 
 Use `Loomiere.Accordion` (`import { Accordion } from '@base-ui/react/accordion'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
 

package/dist/exports/design-system/components/Accordion/preview.html

@@ -6,7 +6,7 @@
 <style>
   body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
   #root { display: grid; gap: var(--sl-space-5, 20px); }
-  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
+  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
 </style>
 </head>
 <body>

package/dist/exports/design-system/components/AlertDialog/preview.html

@@ -6,7 +6,7 @@
 <style>
   body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
   #root { display: grid; gap: var(--sl-space-5, 20px); }
-  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
+  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
 </style>
 </head>
 <body>

package/dist/exports/design-system/components/Autocomplete/preview.html

@@ -6,7 +6,7 @@
 <style>
   body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
   #root { display: grid; gap: var(--sl-space-5, 20px); }
-  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
+  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
 </style>
 </head>
 <body>

package/dist/exports/design-system/components/Avatar/README.md

@@ -1,6 +1,6 @@
 # Avatar
 
-The Base UI Avatar styled by the theme. A round picture with a ring in the page color, so avatars in a group cut out of each other in both themes. Initials sit on the scope's solid fill in its on-solid text (the bold emphasis colors), so data-color re-colors them. Initials use the heading text style one tier per size. Only the sizes are avatar tokens.
+The Base UI Avatar styled by the theme. A round picture with a ring in the page color, so avatars in a group cut out of each other in both themes. Initials paint with the avatar's emphasis level (bold unless data-emphasis says otherwise), so data-color re-colors them and the brand's ladder sets how loud they are. Initials use the heading text style one tier per size. Only the sizes are avatar tokens.
 
 Use `Loomiere.Avatar` (`import { Avatar } from '@base-ui/react/avatar'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
 

package/dist/exports/design-system/components/Avatar/preview.html

@@ -6,7 +6,7 @@
 <style>
   body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
   #root { display: grid; gap: var(--sl-space-5, 20px); }
-  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
+  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
 </style>
 </head>
 <body>

package/dist/exports/design-system/components/Button/preview.html

@@ -6,17 +6,17 @@
 <style>
   body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
   #root { display: grid; gap: var(--sl-space-5, 20px); }
-  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
+  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
 </style>
 </head>
 <body>
 <div id="root"></div>
 <script>
-(()=>{var b=Object.create;var p=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,B=Object.prototype.hasOwnProperty;var w=(e,a)=>()=>(a||e((a={exports:{}}).exports,a),a.exports),h=(e,a)=>{for(var n in a)p(e,n,{get:a[n],enumerable:!0})},S=(e,a,n,s)=>{if(a&&typeof a=="object"||typeof a=="function")for(let r of g(a))!B.call(e,r)&&r!==n&&p(e,r,{get:()=>a[r],enumerable:!(s=f(a,r))||s.enumerable});return e};var E=(e,a,n)=>(n=e!=null?b(v(e)):{},S(a||!e||!e.__esModule?p(n,"default",{value:e,enumerable:!0}):n,e));var m=w((F,c)=>{c.exports=window.Loomiere});var y={};h(y,{Default:()=>D,Disabled:()=>k,Emphasis:()=>L,IconOnly:()=>W,Loading:()=>C,Sizes:()=>R,Variants:()=>I,WithIcon:()=>z,default:()=>u});var o=E(m(),1);var l=window.React;function t(e,a,n){let{children:s,...r}=a||{};return n!==void 0&&(r.key=n),s===void 0?l.createElement(e,r):Array.isArray(s)?l.createElement(e,r,...s):l.createElement(e,r,s)}var N=l.Fragment;var A={title:"Components/Lib/Button",component:o.Button,parameters:{layout:"centered"},tags:["autodocs","ds:lib"],argTypes:{children:{control:"text",description:"Button content"}}},u=A,i=e=>t("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor",width:"20",height:"20",...e,children:t("path",{d:"M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"})}),D={render:()=>t(o.Button,{type:"button",children:"Button"})},I={render:()=>t("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"},children:[t(o.Button,{type:"button",children:"Default"}),t(o.Button,{type:"button","data-variant":"outline",children:"Outline"}),t(o.Button,{type:"button","data-variant":"ghost",children:"Ghost"})]})},R={render:()=>t("div",{style:{display:"flex",gap:"12px",alignItems:"center",flexWrap:"wrap"},children:[t(o.Button,{type:"button","data-size":"xs",children:"Extra Small"}),t(o.Button,{type:"button","data-size":"sm",children:"Small"}),t(o.Button,{type:"button","data-size":"md",children:"Medium"}),t(o.Button,{type:"button","data-size":"lg",children:"Large"})]})},z={render:()=>t("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"},children:[t(o.Button,{type:"button",children:[t(i,{}),"Add Item"]}),t(o.Button,{type:"button","data-variant":"outline",children:[t(i,{}),"Add Item"]}),t(o.Button,{type:"button","data-variant":"ghost",children:[t(i,{}),"Add Item"]})]})},W={render:()=>t("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"},children:[t(o.Button,{type:"button","aria-label":"Add item",children:t(i,{})}),t(o.Button,{type:"button","data-variant":"outline","aria-label":"Add item",children:t(i,{})}),t(o.Button,{type:"button","data-variant":"ghost","aria-label":"Add item",children:t(i,{})})]})},k={render:()=>t("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"},children:[t(o.Button,{type:"button",disabled:!0,children:"Disabled"}),t(o.Button,{type:"button","data-variant":"outline",disabled:!0,children:"Disabled"}),t(o.Button,{type:"button","data-variant":"ghost",disabled:!0,children:"Disabled"})]})},C={render:()=>t("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"},children:[t(o.Button,{type:"button",disabled:!0,children:[t("span",{style:{width:"16px",height:"16px",border:"2px solid currentColor",borderTopColor:"transparent",borderRadius:"50%",animation:"spin 0.6s linear infinite"}}),"Loading..."]}),t("style",{children:`
+(()=>{var v=Object.create;var p=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var B=(e,a)=>()=>(a||e((a={exports:{}}).exports,a),a.exports),S=(e,a)=>{for(var n in a)p(e,n,{get:a[n],enumerable:!0})},E=(e,a,n,s)=>{if(a&&typeof a=="object"||typeof a=="function")for(let r of f(a))!w.call(e,r)&&r!==n&&p(e,r,{get:()=>a[r],enumerable:!(s=g(a,r))||s.enumerable});return e};var I=(e,a,n)=>(n=e!=null?v(h(e)):{},E(a||!e||!e.__esModule?p(n,"default",{value:e,enumerable:!0}):n,e));var m=B((q,c)=>{c.exports=window.Loomiere});var y={};S(y,{Default:()=>A,Disabled:()=>O,Emphasis:()=>k,IconOnly:()=>W,Loading:()=>M,QuietIconOnly:()=>L,Sizes:()=>D,Variants:()=>R,WithIcon:()=>C,default:()=>u});var o=I(m(),1);var d=window.React;function t(e,a,n){let{children:s,...r}=a||{};return n!==void 0&&(r.key=n),s===void 0?d.createElement(e,r):Array.isArray(s)?d.createElement(e,r,...s):d.createElement(e,r,s)}var F=d.Fragment;var z={title:"Components/Lib/Button",component:o.Button,parameters:{layout:"centered"},tags:["autodocs","ds:lib"],argTypes:{children:{control:"text",description:"Button content"}}},u=z,l=e=>t("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor",width:"20",height:"20",...e,children:t("path",{d:"M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"})}),A={render:()=>t(o.Button,{type:"button",children:"Button"})},R={render:()=>t("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"},children:[t(o.Button,{type:"button",children:"Default"}),t(o.Button,{type:"button","data-variant":"outline",children:"Outline"}),t(o.Button,{type:"button","data-variant":"ghost",children:"Ghost"})]})},D={render:()=>t("div",{style:{display:"flex",gap:"12px",alignItems:"center",flexWrap:"wrap"},children:[t(o.Button,{type:"button","data-size":"xs",children:"Extra Small"}),t(o.Button,{type:"button","data-size":"sm",children:"Small"}),t(o.Button,{type:"button","data-size":"md",children:"Medium"}),t(o.Button,{type:"button","data-size":"lg",children:"Large"})]})},C={render:()=>t("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"},children:[t(o.Button,{type:"button",children:[t(l,{}),"Add Item"]}),t(o.Button,{type:"button","data-variant":"outline",children:[t(l,{}),"Add Item"]}),t(o.Button,{type:"button","data-variant":"ghost",children:[t(l,{}),"Add Item"]})]})},W={render:()=>t("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"},children:[t(o.Button,{type:"button","aria-label":"Add item",children:t(l,{})}),t(o.Button,{type:"button","data-variant":"outline","aria-label":"Add item",children:t(l,{})}),t(o.Button,{type:"button","data-variant":"ghost","aria-label":"Add item",children:t(l,{})})]})},x=({flip:e,...a})=>t("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor",width:"20",height:"20",style:e?{transform:"scaleX(-1)"}:void 0,...a,children:t("path",{d:"M7.2 14.8a.75.75 0 010-1.06L10.94 10 7.2 6.26a.75.75 0 011.06-1.06l4.27 4.27a.75.75 0 010 1.06L8.26 14.8a.75.75 0 01-1.06 0z"})}),L={render:()=>t("div",{style:{display:"flex",alignItems:"center",gap:"var(--sl-space-2)",width:"280px"},children:[t(o.Button,{type:"button",emphasis:"quiet",palette:"neutral","data-size":"xs","aria-label":"Previous month",children:t(x,{flip:!0})}),t("span",{className:"text-style-subtitle-base",style:{flexGrow:1,textAlign:"center"},children:"October 2026"}),t(o.Button,{type:"button",emphasis:"quiet",palette:"neutral","data-size":"xs","aria-label":"Next month",children:t(x,{})})]})},O={render:()=>t("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"},children:[t(o.Button,{type:"button",disabled:!0,children:"Disabled"}),t(o.Button,{type:"button","data-variant":"outline",disabled:!0,children:"Disabled"}),t(o.Button,{type:"button","data-variant":"ghost",disabled:!0,children:"Disabled"})]})},M={render:()=>t("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"},children:[t(o.Button,{type:"button",disabled:!0,children:[t("span",{style:{width:"16px",height:"16px",border:"2px solid currentColor",borderTopColor:"transparent",borderRadius:"50%",animation:"spin 0.6s linear infinite"}}),"Loading..."]}),t("style",{children:`
         @keyframes spin {
           to { transform: rotate(360deg); }
         }
-      `})]})},L={render:()=>t("div",{style:{display:"grid",gap:"var(--sl-space-3)"},children:[void 0,"secondary","error"].map(e=>t("div",{style:{display:"flex",gap:"var(--sl-space-2)"},children:["bold","standard","subtle","quiet"].map(a=>t(o.Button,{type:"button",emphasis:a,palette:e,children:e?`${a} ${e}`:a},a))},e??"default"))})};var d=window.React,x=u||{},M=["Default","Variants","Sizes","WithIcon"];function O({id:e}){let a=y[e],n={...x.args||{},...a.args||{}};return(a.render||(r=>d.createElement(x.component,r)))(n,{args:n,id:e,name:e})}var j=M.map(e=>d.createElement("section",{key:e,className:"ds-story"},d.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),d.createElement("div",{className:"ds-story-body"},d.createElement(O,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(d.createElement(d.Fragment,null,j));})();
+      `})]})},k={render:()=>t("div",{style:{display:"grid",gap:"var(--sl-space-3)"},children:[void 0,"secondary","error"].map(e=>t("div",{style:{display:"flex",gap:"var(--sl-space-2)"},children:["bold","standard","subtle","quiet"].map(a=>t(o.Button,{type:"button",emphasis:a,palette:e,children:e?`${a} ${e}`:a},a))},e??"default"))})};var i=window.React,b=u||{},N=["Default","Variants","Sizes","WithIcon"];function j({id:e}){let a=y[e],n={...b.args||{},...a.args||{}};return(a.render||(r=>i.createElement(b.component,r)))(n,{args:n,id:e,name:e})}var P=N.map(e=>i.createElement("section",{key:e,className:"ds-story"},i.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),i.createElement("div",{className:"ds-story-body"},i.createElement(j,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,P));})();
 
 </script>
 </body>

package/dist/exports/design-system/components/Checkbox/preview.html

@@ -6,7 +6,7 @@
 <style>
   body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
   #root { display: grid; gap: var(--sl-space-5, 20px); }
-  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
+  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
 </style>
 </head>
 <body>

package/dist/exports/design-system/components/CheckboxGroup/preview.html

@@ -6,7 +6,7 @@
 <style>
   body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
   #root { display: grid; gap: var(--sl-space-5, 20px); }
-  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
+  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
 </style>
 </head>
 <body>

package/dist/exports/design-system/components/Collapsible/preview.html

@@ -6,7 +6,7 @@
 <style>
   body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
   #root { display: grid; gap: var(--sl-space-5, 20px); }
-  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
+  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
 </style>
 </head>
 <body>

package/dist/exports/design-system/components/Combobox/preview.html

@@ -6,7 +6,7 @@
 <style>
   body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
   #root { display: grid; gap: var(--sl-space-5, 20px); }
-  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
+  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
 </style>
 </head>
 <body>

package/dist/exports/design-system/components/ContextMenu/preview.html

@@ -6,7 +6,7 @@
 <style>
   body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
   #root { display: grid; gap: var(--sl-space-5, 20px); }
-  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
+  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
 </style>
 </head>
 <body>

package/dist/exports/design-system/components/Dialog/README.md

@@ -1,6 +1,6 @@
 # Dialog
 
-The Base UI Dialog styled by the theme. Both are centered modals built from the modal concept (tokens/semantic/modal.json): the modal-surface and modal-backdrop patterns, the maximize-xl heading and base description. Alert dialog shares every rule here; AlertDialog.css adds nothing of its own. Action buttons are plain .Button elements, so they follow the emphasis levels.
+The Base UI Dialog styled by the theme. Both are centered modals built from the modal concept (tokens/semantic/modal.json): the modal-surface and modal-backdrop patterns, the title-amplify heading and base description. Alert dialog shares every rule here; AlertDialog.css adds nothing of its own. Action buttons are plain .Button elements, so they follow the emphasis levels.
 
 Use `Loomiere.Dialog` (`import { Dialog } from '@base-ui/react/dialog'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
 

package/dist/exports/design-system/components/Dialog/preview.html

@@ -6,7 +6,7 @@
 <style>
   body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
   #root { display: grid; gap: var(--sl-space-5, 20px); }
-  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
+  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
 </style>
 </head>
 <body>

package/dist/exports/design-system/components/Drawer/preview.html

@@ -6,7 +6,7 @@
 <style>
   body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
   #root { display: grid; gap: var(--sl-space-5, 20px); }
-  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
+  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
 </style>
 </head>
 <body>

package/dist/exports/design-system/components/Field/preview.html

@@ -6,7 +6,7 @@
 <style>
   body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
   #root { display: grid; gap: var(--sl-space-5, 20px); }
-  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
+  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
 </style>
 </head>
 <body>

package/dist/exports/design-system/components/Fieldset/preview.html

@@ -6,7 +6,7 @@
 <style>
   body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
   #root { display: grid; gap: var(--sl-space-5, 20px); }
-  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
+  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
 </style>
 </head>
 <body>

package/dist/exports/design-system/components/Form/preview.html

@@ -6,7 +6,7 @@
 <style>
   body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
   #root { display: grid; gap: var(--sl-space-5, 20px); }
-  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
+  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
 </style>
 </head>
 <body>

package/dist/exports/design-system/components/Input/preview.html

@@ -6,7 +6,7 @@
 <style>
   body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
   #root { display: grid; gap: var(--sl-space-5, 20px); }
-  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
+  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
 </style>
 </head>
 <body>

package/dist/exports/design-system/components/Menu/preview.html

@@ -6,7 +6,7 @@
 <style>
   body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
   #root { display: grid; gap: var(--sl-space-5, 20px); }
-  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
+  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
 </style>
 </head>
 <body>

package/dist/exports/design-system/components/Menubar/preview.html

@@ -6,7 +6,7 @@
 <style>
   body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
   #root { display: grid; gap: var(--sl-space-5, 20px); }
-  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
+  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
 </style>
 </head>
 <body>

package/dist/exports/design-system/components/Meter/preview.html

@@ -6,7 +6,7 @@
 <style>
   body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
   #root { display: grid; gap: var(--sl-space-5, 20px); }
-  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
+  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
 </style>
 </head>
 <body>

package/dist/exports/design-system/components/NavigationMenu/preview.html

@@ -6,7 +6,7 @@
 <style>
   body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
   #root { display: grid; gap: var(--sl-space-5, 20px); }
-  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
+  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
 </style>
 </head>
 <body>

package/dist/exports/design-system/components/NumberField/preview.html

@@ -6,7 +6,7 @@
 <style>
   body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
   #root { display: grid; gap: var(--sl-space-5, 20px); }
-  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
+  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
 </style>
 </head>
 <body>

package/dist/exports/design-system/components/OTPField/preview.html

@@ -6,7 +6,7 @@
 <style>
   body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
   #root { display: grid; gap: var(--sl-space-5, 20px); }
-  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
+  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
 </style>
 </head>
 <body>

package/dist/exports/design-system/components/Popover/preview.html

@@ -6,7 +6,7 @@
 <style>
   body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
   #root { display: grid; gap: var(--sl-space-5, 20px); }
-  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
+  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
 </style>
 </head>
 <body>

package/dist/exports/design-system/components/PreviewCard/README.md

@@ -1,6 +1,6 @@
 # PreviewCard
 
-The Base UI PreviewCard styled by the theme. The popup concept (surface, arrow, motion) with a maximize-lg title and condense description. Only its min and max width are its own (tokens/component/preview-card.json).
+The Base UI PreviewCard styled by the theme. The popup concept (surface, arrow, motion) with a title-magnify title and condense description. Only its min and max width are its own (tokens/component/preview-card.json).
 
 Use `Loomiere.PreviewCard` (`import { PreviewCard } from '@base-ui/react/preview-card'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
 

package/dist/exports/design-system/components/PreviewCard/preview.html

@@ -6,7 +6,7 @@
 <style>
   body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
   #root { display: grid; gap: var(--sl-space-5, 20px); }
-  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
+  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
 </style>
 </head>
 <body>

package/dist/exports/design-system/components/Progress/preview.html

@@ -6,7 +6,7 @@
 <style>
   body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
   #root { display: grid; gap: var(--sl-space-5, 20px); }
-  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
+  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
 </style>
 </head>
 <body>

package/dist/exports/design-system/components/Radio/preview.html

@@ -6,7 +6,7 @@
 <style>
   body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
   #root { display: grid; gap: var(--sl-space-5, 20px); }
-  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
+  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
 </style>
 </head>
 <body>

package/dist/exports/design-system/components/ScrollArea/preview.html

@@ -6,7 +6,7 @@
 <style>
   body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
   #root { display: grid; gap: var(--sl-space-5, 20px); }
-  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
+  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
 </style>
 </head>
 <body>

package/dist/exports/design-system/components/Select/preview.html

@@ -6,7 +6,7 @@
 <style>
   body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
   #root { display: grid; gap: var(--sl-space-5, 20px); }
-  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
+  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
 </style>
 </head>
 <body>

package/dist/exports/design-system/components/Separator/preview.html

@@ -6,7 +6,7 @@
 <style>
   body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
   #root { display: grid; gap: var(--sl-space-5, 20px); }
-  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
+  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
 </style>
 </head>
 <body>

package/dist/exports/design-system/components/Slider/preview.html

@@ -6,7 +6,7 @@
 <style>
   body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
   #root { display: grid; gap: var(--sl-space-5, 20px); }
-  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
+  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
 </style>
 </head>
 <body>

package/dist/exports/design-system/components/Switch/preview.html

@@ -6,7 +6,7 @@
 <style>
   body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
   #root { display: grid; gap: var(--sl-space-5, 20px); }
-  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
+  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
 </style>
 </head>
 <body>

package/dist/exports/design-system/components/Table/README.md

@@ -0,0 +1,50 @@
+# Table
+
+Plain HTML styled by the theme. Base UI has no table, so this styles the native <table class="Table"> elements with the table concept (tokens/semantic/table.json), the same tokens the AG Grid themes read: a small hand-built table and a full grid look alike. Rows answer to aria-selected="true" (or data-selected) for selection; cells take data-align="end" for numbers.
+
+Base UI has no Table: use the native element with the class below (`<table className="Table">`).
+
+Tokens: the table concept (--sl-table-*).
+
+## Classes
+
+| Class | Data attributes it answers to |
+|---|---|
+| `Table` | `data-sticky-header` |
+
+Base UI sets the state attributes (`data-checked`, `data-open`, `data-disabled`...) itself. Set `data-size`, `data-emphasis`, `data-variant` and `data-color` yourself; `data-color` takes any palette name (`primary`, `secondary`, `error`...) and repaints the part in it.
+
+## Example
+
+From the Table stories (`Default`):
+
+```tsx
+export const Default: Story = {
+  render: () => (
+    <table className="Table">
+      <thead>
+        <tr>
+          <th scope="col">Site</th>
+          <th scope="col">Park</th>
+          <th scope="col" data-align="end">
+            Nights
+          </th>
+          <th scope="col">Status</th>
+        </tr>
+      </thead>
+      <tbody>
+        {trips.map((t) => (
+          <tr key={t.site}>
+            <td>{t.site}</td>
+            <td data-subtle="">{t.park}</td>
+            <td data-align="end">{t.nights}</td>
+            <td>{t.status}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  ),
+};
+```
+
+The preview also shows `SortableAndSelected`, `Empty`.

package/dist/exports/design-system/components/Table/preview.html

@@ -0,0 +1,19 @@
+<!-- @dsCard group="Display" height=360 subtitle="Default / SortableAndSelected / Empty" -->
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+  body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
+  #root { display: grid; gap: var(--sl-space-5, 20px); }
+  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
+</style>
+</head>
+<body>
+<div id="root"></div>
+<script>
+(()=>{var p=Object.defineProperty;var m=(e,a)=>{for(var o in a)p(e,o,{get:a[o],enumerable:!0})};var i={};m(i,{Default:()=>u,Empty:()=>b,SortableAndSelected:()=>g,default:()=>l});var d=window.React;function t(e,a,o){let{children:n,...r}=a||{};return o!==void 0&&(r.key=o),n===void 0?d.createElement(e,r):Array.isArray(n)?d.createElement(e,r,...n):d.createElement(e,r,n)}var N=d.Fragment;var y={title:"Components/Table",parameters:{layout:"padded"},tags:["autodocs"]},l=y,c=[{site:"Jumbo Rocks 42",park:"Joshua Tree",nights:3,status:"Booked"},{site:"Hole-in-the-Wall 7",park:"Mojave Preserve",nights:2,status:"Waitlist"},{site:"Furnace Creek 118",park:"Death Valley",nights:4,status:"Booked"},{site:"Cottonwood 15",park:"Joshua Tree",nights:1,status:"Cancelled"}],u={render:()=>t("table",{className:"Table",children:[t("thead",{children:t("tr",{children:[t("th",{scope:"col",children:"Site"}),t("th",{scope:"col",children:"Park"}),t("th",{scope:"col","data-align":"end",children:"Nights"}),t("th",{scope:"col",children:"Status"})]})}),t("tbody",{children:c.map(e=>t("tr",{children:[t("td",{children:e.site}),t("td",{"data-subtle":"",children:e.park}),t("td",{"data-align":"end",children:e.nights}),t("td",{children:e.status})]},e.site))})]})},g={render:()=>t("table",{className:"Table",children:[t("caption",{children:"Sorted by nights. Hover a header to sort by it."}),t("thead",{children:t("tr",{children:[t("th",{scope:"col","aria-sort":"none",children:"Site"}),t("th",{scope:"col","aria-sort":"none",children:"Park"}),t("th",{scope:"col","aria-sort":"descending","data-align":"end",children:"Nights"}),t("th",{scope:"col",children:"Status"})]})}),t("tbody",{children:[...c].sort((e,a)=>a.nights-e.nights).map((e,a)=>t("tr",{"aria-selected":a===1?"true":void 0,children:[t("td",{children:e.site}),t("td",{"data-subtle":"",children:e.park}),t("td",{"data-align":"end",children:e.nights}),t("td",{children:e.status})]},e.site))}),t("tfoot",{children:t("tr",{children:[t("td",{colSpan:2,children:"Total"}),t("td",{"data-align":"end",children:c.reduce((e,a)=>e+a.nights,0)}),t("td",{})]})})]})},b={render:()=>t("table",{className:"Table",children:[t("thead",{children:t("tr",{children:[t("th",{scope:"col",children:"Site"}),t("th",{scope:"col",children:"Park"}),t("th",{scope:"col","data-align":"end",children:"Nights"})]})}),t("tbody",{children:t("tr",{children:t("td",{colSpan:3,"data-empty":"",children:"No trips yet"})})})]})};var s=window.React,h=l||{},S=["Default","SortableAndSelected","Empty"];function k({id:e}){let a=i[e],o={...h.args||{},...a.args||{}};return(a.render||(r=>s.createElement(h.component,r)))(o,{args:o,id:e,name:e})}var f=S.map(e=>s.createElement("section",{key:e,className:"ds-story"},s.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),s.createElement("div",{className:"ds-story-body"},s.createElement(k,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(s.createElement(s.Fragment,null,f));})();
+
+</script>
+</body>
+</html>

package/dist/exports/design-system/components/Tabs/preview.html

@@ -6,7 +6,7 @@
 <style>
   body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
   #root { display: grid; gap: var(--sl-space-5, 20px); }
-  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
+  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
 </style>
 </head>
 <body>

package/dist/exports/design-system/components/Toast/preview.html

@@ -6,7 +6,7 @@
 <style>
   body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
   #root { display: grid; gap: var(--sl-space-5, 20px); }
-  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
+  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
 </style>
 </head>
 <body>

package/dist/exports/design-system/components/Toggle/README.md

@@ -1,6 +1,6 @@
 # Toggle
 
-The Base UI Toggle styled by the theme. A toggle is a button that stays pressed: the same heights, padding, gap and trigger text style as a button of the same size.
+The Base UI Toggle styled by the theme. A toggle is a button that stays pressed: the same heights, padding, gap and trigger text style as a button of the same size. Pressed, it takes its emphasis level's pressed look (standard unless data-emphasis on it or its group says otherwise), so the brand's emphasis ladder decides how loud an "on" toggle is.
 
 Use `Loomiere.Toggle` (`import { Toggle } from '@base-ui/react/toggle'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
 

package/dist/exports/design-system/components/Toggle/preview.html

@@ -6,7 +6,7 @@
 <style>
   body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
   #root { display: grid; gap: var(--sl-space-5, 20px); }
-  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
+  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
 </style>
 </head>
 <body>