npm - @scattered-light/loomiere-mojave - Versions diffs - 0.2.0 → 0.4.0 - Mend

@scattered-light/loomiere-mojave 0.2.0 → 0.4.0

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 (70) hide show

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

@@ -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,65 @@ 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`, `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`). In previews and designs they are `window.Loomiere.<Name>`; Button, Input, Field, Fieldset, Form and NavigationMenu are wrappers that put their classes on themselves.
+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.
+### Using the components in a page or design
+Load three things, in this order:
+1. `components/bundle.css`: the whole theme in one sheet. It holds every token (light, dark, high contrast and color vision modes), the text style, icon and focus utilities, the brand pairs, and every component's styles, and it imports the brand fonts and Material Symbols from Google Fonts itself. Nothing else is needed for styling; `tokens.json` is the same tokens as data for the Design System page.
+2. React 18 and ReactDOM 18 as the `window.React` and `window.ReactDOM` globals. A design canvas or the preview frame already has them.
+3. `components/bundle.js`: one classic script that sets `window.Loomiere`.
+`window.Loomiere` holds two kinds of component:
+- **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.
+### Choosing a component
+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. 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. |
+| `ToggleGroup` | Switch between 2 to 5 short modes or views that apply at once (Single date / Date range, List / Grid). |
+| `Tabs` | Switch between panels of content in the same place. |
+| `Radio` | Choose one of 2 to 6 options in a form, where each option can carry a label and description. |
+| `CheckboxGroup` | Choose any number of a few visible options. |
+| `Select` | Choose one of a fixed list too long to show (about 6 to 15 items). |
+| `Combobox` | Choose one or more from a long list by typing to filter it. |
+| `Autocomplete` | Type free text, with suggestions to speed it up. |
+| `NumberField` | Enter an exact number, with steppers. |
+| `Slider` | Set a value in a range where roughly is good enough. |
+| `OTPField` | Enter a one-time code. |
+| `Menu` | Offer commands from a button. Menus run actions; they don't hold a value. |
+| `ContextMenu` | Offer commands on right-click or long press. |
+| `Menubar` | An app's top row of menus. |
+| `Toolbar` | A row of buttons, toggles and fields that act on one thing. |
+| `NavigationMenu` | Site navigation, with panels of links. |
+| `Tooltip` | Name an icon-only control. Never put anything you can click inside one. |
+| `PreviewCard` | Preview what a link leads to on hover. |
+| `Popover` | Show interactive content beside its trigger: a picker, a short form, filters. |
+| `Dialog` | A task that needs full attention before the page goes on. |
+| `AlertDialog` | Confirm a destructive or hard-to-undo action. |
+| `Drawer` | A side task or detail panel that keeps the page in view. |
+| `Accordion` | Several sections where only some need to be open. |
+| `Collapsible` | One section to show or hide. |
+| `Toast` | Report the result of an action, briefly. |
+| `Progress` | Show how far a task has got. |
+| `Meter` | Show a measured amount within known limits, such as storage used. |
+A list of choices that stays on screen inside a panel, one of them selected (quick picks, saved filters, presets), has no Base UI part. Make each row a `<button aria-pressed>` drawn from the item concept: `--sl-item-padding-block`, `-padding-inline`, `-radius` and `-gap`, `--sl-item-background-hover` and `-color-hover` on hover, `--sl-item-background-selected` and `-color-selected` with the `-selected` text style when chosen. These are the same rows menus and selects use. When the choice is a form value, use Radio instead.

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/README.md CHANGED Viewed

@@ -10,7 +10,7 @@ Base UI docs: https://base-ui.com/react/components/button
 | Class | Data attributes it answers to |
 |---|---|
-| `Button` | `data-size`: `xs`, `sm`, `lg` |
+| `Button` | `data-icon-only`; `data-size`: `xs`, `sm`, `lg` |
 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.

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/README.md CHANGED Viewed

@@ -32,8 +32,8 @@ From the Popover stories (`Default`):
 export const Default: Story = {
   render: () => (
     <Popover.Root>
-      <Popover.Trigger className="PopoverTrigger Button">
-        <BellIcon aria-label="Notifications" />
+      <Popover.Trigger className="PopoverTrigger Button" aria-label="Notifications">
+        <BellIcon aria-hidden="true" />
       </Popover.Trigger>
       <Popover.Portal>
         <Popover.Positioner className="PopoverPositioner" sideOffset={8}>

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

@@ -6,13 +6,13 @@
 <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 y=Object.create;var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var T=Object.getPrototypeOf,L=Object.prototype.hasOwnProperty;var d=(r,t)=>()=>(t||r((t={exports:{}}).exports,t),t.exports),R=(r,t)=>{for(var s in t)c(r,s,{get:t[s],enumerable:!0})},b=(r,t,s,p)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of x(t))!L.call(r,a)&&a!==s&&c(r,a,{get:()=>t[a],enumerable:!(p=h(t,a))||p.enumerable});return r};var u=(r,t,s)=>(s=r!=null?y(T(r)):{},b(t||!r||!r.__esModule?c(s,"default",{value:r,enumerable:!0}):s,r));var w=d((W,g)=>{g.exports=window.React});var C=d((Z,f)=>{f.exports=window.Loomiere.Base});var m={};R(m,{Default:()=>B,Placement:()=>M,WithBackdrop:()=>O,WithCloseButton:()=>S,WithForm:()=>E,default:()=>v});var P=u(w(),1),e=u(C(),1);var l=window.React;function o(r,t,s){let{children:p,...a}=t||{};return s!==void 0&&(a.key=s),p===void 0?l.createElement(r,a):Array.isArray(p)?l.createElement(r,a,...p):l.createElement(r,a,p)}var V=l.Fragment;var A={title:"Components/Popover",component:e.Popover.Root,parameters:{layout:"centered"},tags:["autodocs"]},v=A;function n(r){return o("svg",{width:"20",height:"10",viewBox:"0 0 20 10",fill:"none",...r,children:[o("path",{d:"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",className:"PopoverArrowFill"}),o("path",{d:"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z",className:"PopoverArrowOuterStroke"}),o("path",{d:"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z",className:"PopoverArrowInnerStroke"})]})}function D(r){return o("svg",{fill:"currentcolor",width:"20",height:"20",viewBox:"0 0 16 16",...r,children:o("path",{d:"M 8 1 C 7.453125 1 7 1.453125 7 2 L 7 3.140625 C 5.28125 3.589844 4 5.144531 4 7 L 4 10.984375 C 4 10.984375 3.984375 11.261719 3.851563 11.519531 C 3.71875 11.78125 3.558594 12 3 12 L 3 13 L 13 13 L 13 12 C 12.40625 12 12.253906 11.78125 12.128906 11.53125 C 12.003906 11.277344 12 11.003906 12 11.003906 L 12 7 C 12 5.144531 10.71875 3.589844 9 3.140625 L 9 2 C 9 1.453125 8.546875 1 8 1 Z M 8 13 C 7.449219 13 7 13.449219 7 14 C 7 14.550781 7.449219 15 8 15 C 8.550781 15 9 14.550781 9 14 C 9 13.449219 8.550781 13 8 13 Z M 8 4 C 9.664063 4 11 5.335938 11 7 L 11 10.996094 C 11 10.996094 10.988281 11.472656 11.234375 11.96875 C 11.238281 11.980469 11.246094 11.988281 11.25 12 L 4.726563 12 C 4.730469 11.992188 4.738281 11.984375 4.742188 11.980469 C 4.992188 11.488281 5 11.015625 5 11.015625 L 5 7 C 5 5.335938 6.335938 4 8 4 Z"})})}function k(r){return o("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",width:"16",height:"16",...r,children:o("path",{d:"M18 6L6 18M6 6l12 12"})})}var B={render:()=>o(e.Popover.Root,{children:[o(e.Popover.Trigger,{className:"PopoverTrigger Button",children:o(D,{"aria-label":"Notifications"})}),o(e.Popover.Portal,{children:o(e.Popover.Positioner,{className:"PopoverPositioner",sideOffset:8,children:o(e.Popover.Popup,{className:"PopoverPopup",children:[o(e.Popover.Arrow,{className:"PopoverArrow",children:o(n,{})}),o(e.Popover.Title,{className:"PopoverTitle",children:"Notifications"}),o(e.Popover.Description,{className:"PopoverDescription",children:"You are all caught up. Good job!"})]})})})]})},S={render:()=>o(e.Popover.Root,{children:[o(e.Popover.Trigger,{className:"PopoverTrigger Button",children:"Open settings"}),o(e.Popover.Portal,{children:o(e.Popover.Positioner,{className:"PopoverPositioner",sideOffset:8,children:o(e.Popover.Popup,{className:"PopoverPopup",children:[o(e.Popover.Close,{className:"PopoverClose","aria-label":"Close",children:o(k,{})}),o(e.Popover.Arrow,{className:"PopoverArrow",children:o(n,{})}),o(e.Popover.Title,{className:"PopoverTitle",children:"Settings"}),o(e.Popover.Description,{className:"PopoverDescription",children:"Adjust your preferences and account settings here."})]})})})]})},E={render:()=>{let r=P.useId(),t=P.useId();return o(e.Popover.Root,{children:[o(e.Popover.Trigger,{className:"PopoverTrigger Button",children:"Contact form"}),o(e.Popover.Portal,{children:o(e.Popover.Positioner,{className:"PopoverPositioner",sideOffset:8,children:o(e.Popover.Popup,{className:"PopoverPopup",children:[o(e.Popover.Arrow,{className:"PopoverArrow",children:o(n,{})}),o(e.Popover.Title,{className:"PopoverTitle",children:"Get in touch"}),o(e.Popover.Description,{className:"PopoverDescription",children:"Fill out the form below and we'll get back to you."}),o("div",{style:{marginTop:"16px",display:"flex",flexDirection:"column",gap:"12px"},children:[o("div",{children:[o("label",{htmlFor:r,style:{display:"block",fontSize:"14px",marginBottom:"4px"},children:"Name"}),o("input",{id:r,type:"text",className:"Input",placeholder:"Your name",style:{width:"100%"}})]}),o("div",{children:[o("label",{htmlFor:t,style:{display:"block",fontSize:"14px",marginBottom:"4px"},children:"Email"}),o("input",{id:t,type:"email",className:"Input",placeholder:"you@example.com",style:{width:"100%"}})]}),o("button",{className:"Button",style:{marginTop:"8px"},children:"Submit"})]})]})})})]})}},M={render:()=>o("div",{style:{display:"flex",gap:"16px",flexWrap:"wrap"},children:["top","right","bottom","left"].map(r=>o(e.Popover.Root,{children:[o(e.Popover.Trigger,{className:"PopoverTrigger Button",children:r}),o(e.Popover.Portal,{children:o(e.Popover.Positioner,{className:"PopoverPositioner",side:r,sideOffset:8,children:o(e.Popover.Popup,{className:"PopoverPopup",children:[o(e.Popover.Arrow,{className:"PopoverArrow",children:o(n,{})}),o(e.Popover.Description,{className:"PopoverDescription",children:["Popover on the ",r]})]})})})]},r))})},O={render:()=>o(e.Popover.Root,{children:[o(e.Popover.Trigger,{className:"PopoverTrigger Button",children:"Open with backdrop"}),o(e.Popover.Portal,{children:[o(e.Popover.Backdrop,{className:"PopoverBackdrop",style:{background:"rgba(0, 0, 0, 0.3)"}}),o(e.Popover.Positioner,{className:"PopoverPositioner",sideOffset:8,children:o(e.Popover.Popup,{className:"PopoverPopup",children:[o(e.Popover.Arrow,{className:"PopoverArrow",children:o(n,{})}),o(e.Popover.Title,{className:"PopoverTitle",children:"Modal-like popover"}),o(e.Popover.Description,{className:"PopoverDescription",children:"This popover has a backdrop to focus attention."})]})})]})]})};var i=window.React,N=v||{},I=["Default","WithCloseButton","WithForm","Placement"];function F({id:r}){let t=m[r],s={...N.args||{},...t.args||{}};return(t.render||(a=>i.createElement(N.component,a)))(s,{args:s,id:r,name:r})}var j=I.map(r=>i.createElement("section",{key:r,className:"ds-story"},i.createElement("p",{className:"ds-story-name"},r.replace(/([a-z])([A-Z])/g,"$1 $2")),i.createElement("div",{className:"ds-story-body"},i.createElement(F,{id:r}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,j));})();
+(()=>{var y=Object.create;var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var T=Object.getPrototypeOf,L=Object.prototype.hasOwnProperty;var d=(r,t)=>()=>(t||r((t={exports:{}}).exports,t),t.exports),R=(r,t)=>{for(var s in t)c(r,s,{get:t[s],enumerable:!0})},b=(r,t,s,p)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of x(t))!L.call(r,a)&&a!==s&&c(r,a,{get:()=>t[a],enumerable:!(p=h(t,a))||p.enumerable});return r};var u=(r,t,s)=>(s=r!=null?y(T(r)):{},b(t||!r||!r.__esModule?c(s,"default",{value:r,enumerable:!0}):s,r));var w=d((W,g)=>{g.exports=window.React});var C=d((Z,f)=>{f.exports=window.Loomiere.Base});var m={};R(m,{Default:()=>B,Placement:()=>M,WithBackdrop:()=>O,WithCloseButton:()=>S,WithForm:()=>E,default:()=>v});var P=u(w(),1),e=u(C(),1);var l=window.React;function o(r,t,s){let{children:p,...a}=t||{};return s!==void 0&&(a.key=s),p===void 0?l.createElement(r,a):Array.isArray(p)?l.createElement(r,a,...p):l.createElement(r,a,p)}var V=l.Fragment;var A={title:"Components/Popover",component:e.Popover.Root,parameters:{layout:"centered"},tags:["autodocs"]},v=A;function n(r){return o("svg",{width:"20",height:"10",viewBox:"0 0 20 10",fill:"none",...r,children:[o("path",{d:"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",className:"PopoverArrowFill"}),o("path",{d:"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z",className:"PopoverArrowOuterStroke"}),o("path",{d:"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z",className:"PopoverArrowInnerStroke"})]})}function D(r){return o("svg",{fill:"currentcolor",width:"20",height:"20",viewBox:"0 0 16 16",...r,children:o("path",{d:"M 8 1 C 7.453125 1 7 1.453125 7 2 L 7 3.140625 C 5.28125 3.589844 4 5.144531 4 7 L 4 10.984375 C 4 10.984375 3.984375 11.261719 3.851563 11.519531 C 3.71875 11.78125 3.558594 12 3 12 L 3 13 L 13 13 L 13 12 C 12.40625 12 12.253906 11.78125 12.128906 11.53125 C 12.003906 11.277344 12 11.003906 12 11.003906 L 12 7 C 12 5.144531 10.71875 3.589844 9 3.140625 L 9 2 C 9 1.453125 8.546875 1 8 1 Z M 8 13 C 7.449219 13 7 13.449219 7 14 C 7 14.550781 7.449219 15 8 15 C 8.550781 15 9 14.550781 9 14 C 9 13.449219 8.550781 13 8 13 Z M 8 4 C 9.664063 4 11 5.335938 11 7 L 11 10.996094 C 11 10.996094 10.988281 11.472656 11.234375 11.96875 C 11.238281 11.980469 11.246094 11.988281 11.25 12 L 4.726563 12 C 4.730469 11.992188 4.738281 11.984375 4.742188 11.980469 C 4.992188 11.488281 5 11.015625 5 11.015625 L 5 7 C 5 5.335938 6.335938 4 8 4 Z"})})}function k(r){return o("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",width:"16",height:"16",...r,children:o("path",{d:"M18 6L6 18M6 6l12 12"})})}var B={render:()=>o(e.Popover.Root,{children:[o(e.Popover.Trigger,{className:"PopoverTrigger Button","aria-label":"Notifications",children:o(D,{"aria-hidden":"true"})}),o(e.Popover.Portal,{children:o(e.Popover.Positioner,{className:"PopoverPositioner",sideOffset:8,children:o(e.Popover.Popup,{className:"PopoverPopup",children:[o(e.Popover.Arrow,{className:"PopoverArrow",children:o(n,{})}),o(e.Popover.Title,{className:"PopoverTitle",children:"Notifications"}),o(e.Popover.Description,{className:"PopoverDescription",children:"You are all caught up. Good job!"})]})})})]})},S={render:()=>o(e.Popover.Root,{children:[o(e.Popover.Trigger,{className:"PopoverTrigger Button",children:"Open settings"}),o(e.Popover.Portal,{children:o(e.Popover.Positioner,{className:"PopoverPositioner",sideOffset:8,children:o(e.Popover.Popup,{className:"PopoverPopup",children:[o(e.Popover.Close,{className:"PopoverClose","aria-label":"Close",children:o(k,{})}),o(e.Popover.Arrow,{className:"PopoverArrow",children:o(n,{})}),o(e.Popover.Title,{className:"PopoverTitle",children:"Settings"}),o(e.Popover.Description,{className:"PopoverDescription",children:"Adjust your preferences and account settings here."})]})})})]})},E={render:()=>{let r=P.useId(),t=P.useId();return o(e.Popover.Root,{children:[o(e.Popover.Trigger,{className:"PopoverTrigger Button",children:"Contact form"}),o(e.Popover.Portal,{children:o(e.Popover.Positioner,{className:"PopoverPositioner",sideOffset:8,children:o(e.Popover.Popup,{className:"PopoverPopup",children:[o(e.Popover.Arrow,{className:"PopoverArrow",children:o(n,{})}),o(e.Popover.Title,{className:"PopoverTitle",children:"Get in touch"}),o(e.Popover.Description,{className:"PopoverDescription",children:"Fill out the form below and we'll get back to you."}),o("div",{style:{marginTop:"16px",display:"flex",flexDirection:"column",gap:"12px"},children:[o("div",{children:[o("label",{htmlFor:r,style:{display:"block",fontSize:"14px",marginBottom:"4px"},children:"Name"}),o("input",{id:r,type:"text",className:"Input",placeholder:"Your name",style:{width:"100%"}})]}),o("div",{children:[o("label",{htmlFor:t,style:{display:"block",fontSize:"14px",marginBottom:"4px"},children:"Email"}),o("input",{id:t,type:"email",className:"Input",placeholder:"you@example.com",style:{width:"100%"}})]}),o("button",{className:"Button",style:{marginTop:"8px"},children:"Submit"})]})]})})})]})}},M={render:()=>o("div",{style:{display:"flex",gap:"16px",flexWrap:"wrap"},children:["top","right","bottom","left"].map(r=>o(e.Popover.Root,{children:[o(e.Popover.Trigger,{className:"PopoverTrigger Button",children:r}),o(e.Popover.Portal,{children:o(e.Popover.Positioner,{className:"PopoverPositioner",side:r,sideOffset:8,children:o(e.Popover.Popup,{className:"PopoverPopup",children:[o(e.Popover.Arrow,{className:"PopoverArrow",children:o(n,{})}),o(e.Popover.Description,{className:"PopoverDescription",children:["Popover on the ",r]})]})})})]},r))})},O={render:()=>o(e.Popover.Root,{children:[o(e.Popover.Trigger,{className:"PopoverTrigger Button",children:"Open with backdrop"}),o(e.Popover.Portal,{children:[o(e.Popover.Backdrop,{className:"PopoverBackdrop",style:{background:"rgba(0, 0, 0, 0.3)"}}),o(e.Popover.Positioner,{className:"PopoverPositioner",sideOffset:8,children:o(e.Popover.Popup,{className:"PopoverPopup",children:[o(e.Popover.Arrow,{className:"PopoverArrow",children:o(n,{})}),o(e.Popover.Title,{className:"PopoverTitle",children:"Modal-like popover"}),o(e.Popover.Description,{className:"PopoverDescription",children:"This popover has a backdrop to focus attention."})]})})]})]})};var i=window.React,N=v||{},I=["Default","WithCloseButton","WithForm","Placement"];function F({id:r}){let t=m[r],s={...N.args||{},...t.args||{}};return(t.render||(a=>i.createElement(N.component,a)))(s,{args:s,id:r,name:r})}var j=I.map(r=>i.createElement("section",{key:r,className:"ds-story"},i.createElement("p",{className:"ds-story-name"},r.replace(/([a-z])([A-Z])/g,"$1 $2")),i.createElement("div",{className:"ds-story-body"},i.createElement(F,{id:r}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,j));})();
 </script>
 </body>

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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>