@scattered-light/loomiere-base-ui 0.1.1 → 0.3.0

package/README.md

@@ -14,7 +14,16 @@ import './theme/utilities.css';
 import '@scattered-light/loomiere-base-ui/styles.css';
 ```
 
-The document reset in styles.css sits in a CSS `reset` layer, so it never undoes a layered framework's styles (Chakra's recipes, Tailwind's utilities) when an app uses both.
+The document reset in styles.css sits in a CSS `reset` layer, so any unlayered rule wins over it.
+
+With Tailwind CSS v4, load `tailwind.css` instead. It holds the same styles, with the reset in Tailwind's `base` layer and the components in its `components` layer, so utility classes win over both (`className="Button px-6"`):
+
+```css
+@import url('<your brand fonts>');   /* font imports go first, or in a <link> */
+@import 'tailwindcss';
+@import './theme/exports/tailwind.css';   /* the theme's Tailwind classes; brings tokens.css along */
+@import '@scattered-light/loomiere-base-ui/tailwind.css';
+```
 
 Use Base UI as usual, with the class names the styles target, or the few wrappers this package exports:
 

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

@@ -0,0 +1,97 @@
+# 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.
+
+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.
+
+Base UI docs: https://base-ui.com/react/components/accordion
+
+## Classes
+
+| Class | Data attributes it answers to |
+|---|---|
+| `Accordion` | `data-variant`: `separated`, `bordered` |
+| `AccordionItem` |   |
+| `AccordionHeader` |   |
+| `AccordionTrigger` | `data-disabled`; `data-panel-open` |
+| `AccordionIcon` |   |
+| `AccordionPanel` | `data-starting-style`; `data-ending-style` |
+| `AccordionContent` |   |
+
+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 Accordion stories (`Default`):
+
+```tsx
+export const Default: Story = {
+  render: () => (
+    <div style={{ width: '600px' }}>
+      <Accordion.Root className="Accordion" defaultValue={[0]}>
+        <Accordion.Item className="AccordionItem" value={0}>
+          <Accordion.Header className="AccordionHeader">
+            <Accordion.Trigger className="AccordionTrigger">
+              What is Base UI?
+              <MaterialSymbol
+                name="expand_more"
+                className="AccordionIcon"
+                aria-hidden
+                style={{ fontSize: 'var(--sl-accordion-icon-size, 1.25rem)' }}
+              />
+            </Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Panel className="AccordionPanel">
+            <div className="AccordionContent">
+              Base UI is a library of headless (unstyled) React components and low-level hooks.
+              You gain complete control over your app's CSS and accessibility features.
+            </div>
+          </Accordion.Panel>
+        </Accordion.Item>
+
+        <Accordion.Item className="AccordionItem" value={1}>
+          <Accordion.Header className="AccordionHeader">
+            <Accordion.Trigger className="AccordionTrigger">
+              Why use Base UI?
+              <MaterialSymbol
+                name="expand_more"
+                className="AccordionIcon"
+                aria-hidden
+                style={{ fontSize: 'var(--sl-accordion-icon-size, 1.25rem)' }}
+              />
+            </Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Panel className="AccordionPanel">
+            <div className="AccordionContent">
+              Base UI gives you complete control over styling while handling all the complex
+              accessibility and interaction logic for you.
+            </div>
+          </Accordion.Panel>
+        </Accordion.Item>
+
+        <Accordion.Item className="AccordionItem" value={2}>
+          <Accordion.Header className="AccordionHeader">
+            <Accordion.Trigger className="AccordionTrigger">
+              How do I style it?
+              <MaterialSymbol
+                name="expand_more"
+                className="AccordionIcon"
+                aria-hidden
+                style={{ fontSize: 'var(--sl-accordion-icon-size, 1.25rem)' }}
+              />
+            </Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Panel className="AccordionPanel">
+            <div className="AccordionContent">
+              You apply class names to each component part and style them with CSS.
+              Base UI handles all the accessibility and interaction logic automatically.
+            </div>
+          </Accordion.Panel>
+        </Accordion.Item>
+      </Accordion.Root>
+    </div>
+  ),
+};
+```
+
+The preview also shows `SingleOpen`, `Separated`, `Bordered`.

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

@@ -0,0 +1,19 @@
+<!-- @dsCard group="Disclosure" height=480 subtitle="Default / SingleOpen / Separated / Bordered" -->
+<!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-minimize-label-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 v=Object.create;var l=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var f=(a,c)=>()=>(c||a((c={exports:{}}).exports,c),c.exports),S=(a,c)=>{for(var r in c)l(a,r,{get:c[r],enumerable:!0})},P=(a,c,r,s)=>{if(c&&typeof c=="object"||typeof c=="function")for(let n of I(c))!h.call(a,n)&&n!==r&&l(a,n,{get:()=>c[n],enumerable:!(s=y(c,n))||s.enumerable});return a};var T=(a,c,r)=>(r=a!=null?v(u(a)):{},P(c||!a||!a.__esModule?l(r,"default",{value:a,enumerable:!0}):r,a));var p=f((_,g)=>{g.exports=window.Loomiere.Base});var A={};S(A,{Bordered:()=>b,Default:()=>x,Separated:()=>w,SingleOpen:()=>z,default:()=>m});var o=T(p(),1);var t=window.React;function e(a,c,r){let{children:s,...n}=c||{};return r!==void 0&&(n.key=r),s===void 0?t.createElement(a,n):Array.isArray(s)?t.createElement(a,n,...s):t.createElement(a,n,s)}var k=t.Fragment;function i({name:a,className:c,...r}){let s=["material-symbols-outlined",c].filter(Boolean).join(" ");return e("span",{className:s,...r,children:a})}var H={title:"Components/Accordion",component:o.Accordion.Root,parameters:{layout:"centered"},tags:["autodocs"]},m=H,x={render:()=>e("div",{style:{width:"600px"},children:e(o.Accordion.Root,{className:"Accordion",defaultValue:[0],children:[e(o.Accordion.Item,{className:"AccordionItem",value:0,children:[e(o.Accordion.Header,{className:"AccordionHeader",children:e(o.Accordion.Trigger,{className:"AccordionTrigger",children:["What is Base UI?",e(i,{name:"expand_more",className:"AccordionIcon","aria-hidden":!0,style:{fontSize:"var(--sl-accordion-icon-size, 1.25rem)"}})]})}),e(o.Accordion.Panel,{className:"AccordionPanel",children:e("div",{className:"AccordionContent",children:"Base UI is a library of headless (unstyled) React components and low-level hooks. You gain complete control over your app's CSS and accessibility features."})})]}),e(o.Accordion.Item,{className:"AccordionItem",value:1,children:[e(o.Accordion.Header,{className:"AccordionHeader",children:e(o.Accordion.Trigger,{className:"AccordionTrigger",children:["Why use Base UI?",e(i,{name:"expand_more",className:"AccordionIcon","aria-hidden":!0,style:{fontSize:"var(--sl-accordion-icon-size, 1.25rem)"}})]})}),e(o.Accordion.Panel,{className:"AccordionPanel",children:e("div",{className:"AccordionContent",children:"Base UI gives you complete control over styling while handling all the complex accessibility and interaction logic for you."})})]}),e(o.Accordion.Item,{className:"AccordionItem",value:2,children:[e(o.Accordion.Header,{className:"AccordionHeader",children:e(o.Accordion.Trigger,{className:"AccordionTrigger",children:["How do I style it?",e(i,{name:"expand_more",className:"AccordionIcon","aria-hidden":!0,style:{fontSize:"var(--sl-accordion-icon-size, 1.25rem)"}})]})}),e(o.Accordion.Panel,{className:"AccordionPanel",children:e("div",{className:"AccordionContent",children:"You apply class names to each component part and style them with CSS. Base UI handles all the accessibility and interaction logic automatically."})})]})]})})},z={render:()=>e("div",{style:{width:"600px"},children:e(o.Accordion.Root,{className:"Accordion",defaultValue:[0],multiple:!1,children:[e(o.Accordion.Item,{className:"AccordionItem",value:0,children:[e(o.Accordion.Header,{className:"AccordionHeader",children:e(o.Accordion.Trigger,{className:"AccordionTrigger",children:["Section 1",e(i,{name:"expand_more",className:"AccordionIcon","aria-hidden":!0,style:{fontSize:"var(--sl-accordion-icon-size, 1.25rem)"}})]})}),e(o.Accordion.Panel,{className:"AccordionPanel",children:e("div",{className:"AccordionContent",children:"Only one section can be open at a time. Try opening another section - this one will close."})})]}),e(o.Accordion.Item,{className:"AccordionItem",value:1,children:[e(o.Accordion.Header,{className:"AccordionHeader",children:e(o.Accordion.Trigger,{className:"AccordionTrigger",children:["Section 2",e(i,{name:"expand_more",className:"AccordionIcon","aria-hidden":!0,style:{fontSize:"var(--sl-accordion-icon-size, 1.25rem)"}})]})}),e(o.Accordion.Panel,{className:"AccordionPanel",children:e("div",{className:"AccordionContent",children:"Opening this will automatically close Section 1."})})]}),e(o.Accordion.Item,{className:"AccordionItem",value:2,children:[e(o.Accordion.Header,{className:"AccordionHeader",children:e(o.Accordion.Trigger,{className:"AccordionTrigger",children:["Section 3",e(i,{name:"expand_more",className:"AccordionIcon","aria-hidden":!0,style:{fontSize:"var(--sl-accordion-icon-size, 1.25rem)"}})]})}),e(o.Accordion.Panel,{className:"AccordionPanel",children:e("div",{className:"AccordionContent",children:"This is a common pattern for FAQs and settings panels."})})]})]})})},w={render:()=>e("div",{style:{width:"600px"},children:e(o.Accordion.Root,{className:"Accordion","data-variant":"separated",defaultValue:[0],children:[e(o.Accordion.Item,{className:"AccordionItem",value:0,children:[e(o.Accordion.Header,{className:"AccordionHeader",children:e(o.Accordion.Trigger,{className:"AccordionTrigger",children:["Card-like Item 1",e(i,{name:"expand_more",className:"AccordionIcon","aria-hidden":!0,style:{fontSize:"var(--sl-accordion-icon-size, 1.25rem)"}})]})}),e(o.Accordion.Panel,{className:"AccordionPanel",children:e("div",{className:"AccordionContent",children:"Notice the gaps between items and individual borders. Each item looks like a separate card."})})]}),e(o.Accordion.Item,{className:"AccordionItem",value:1,children:[e(o.Accordion.Header,{className:"AccordionHeader",children:e(o.Accordion.Trigger,{className:"AccordionTrigger",children:["Card-like Item 2",e(i,{name:"expand_more",className:"AccordionIcon","aria-hidden":!0,style:{fontSize:"var(--sl-accordion-icon-size, 1.25rem)"}})]})}),e(o.Accordion.Panel,{className:"AccordionPanel",children:e("div",{className:"AccordionContent",children:"This variant is great for settings panels or feature lists."})})]}),e(o.Accordion.Item,{className:"AccordionItem",value:2,children:[e(o.Accordion.Header,{className:"AccordionHeader",children:e(o.Accordion.Trigger,{className:"AccordionTrigger",children:["Card-like Item 3",e(i,{name:"expand_more",className:"AccordionIcon","aria-hidden":!0,style:{fontSize:"var(--sl-accordion-icon-size, 1.25rem)"}})]})}),e(o.Accordion.Panel,{className:"AccordionPanel",children:e("div",{className:"AccordionContent",children:"Each item is visually distinct and separated."})})]})]})})},b={render:()=>e("div",{style:{width:"600px"},children:e(o.Accordion.Root,{className:"Accordion","data-variant":"bordered",defaultValue:[0],children:[e(o.Accordion.Item,{className:"AccordionItem",value:0,children:[e(o.Accordion.Header,{className:"AccordionHeader",children:e(o.Accordion.Trigger,{className:"AccordionTrigger",children:["Bordered Accordion",e(i,{name:"expand_more",className:"AccordionIcon","aria-hidden":!0,style:{fontSize:"var(--sl-accordion-icon-size, 1.25rem)"}})]})}),e(o.Accordion.Panel,{className:"AccordionPanel",children:e("div",{className:"AccordionContent",children:"This variant has a border around the entire accordion container."})})]}),e(o.Accordion.Item,{className:"AccordionItem",value:1,children:[e(o.Accordion.Header,{className:"AccordionHeader",children:e(o.Accordion.Trigger,{className:"AccordionTrigger",children:["Another Section",e(i,{name:"expand_more",className:"AccordionIcon","aria-hidden":!0,style:{fontSize:"var(--sl-accordion-icon-size, 1.25rem)"}})]})}),e(o.Accordion.Panel,{className:"AccordionPanel",children:e("div",{className:"AccordionContent",children:"All items are contained within a single bordered container."})})]})]})})};var d=window.React,N=m||{},C=["Default","SingleOpen","Separated","Bordered"];function R({id:a}){let c=A[a],r={...N.args||{},...c.args||{}};return(c.render||(n=>d.createElement(N.component,n)))(r,{args:r,id:a,name:a})}var E=C.map(a=>d.createElement("section",{key:a,className:"ds-story"},d.createElement("p",{className:"ds-story-name"},a.replace(/([a-z])([A-Z])/g,"$1 $2")),d.createElement("div",{className:"ds-story-body"},d.createElement(R,{id:a}))));window.ReactDOM.createRoot(document.getElementById("root")).render(d.createElement(d.Fragment,null,E));})();
+
+</script>
+</body>
+</html>

package/dist/design-system/components/AlertDialog/README.md

@@ -0,0 +1,52 @@
+# AlertDialog
+
+The Base UI AlertDialog styled by the theme. No component tokens and no rules of its own. An alert dialog looks exactly like a dialog, so its backdrop, popup, title, description and actions are styled with the dialog's in Dialog.css. Its buttons are .Button elements: the confirming one bold, a cancel quiet, and a destructive one bold with data-color="error".
+
+Use `Loomiere.AlertDialog` (`import { AlertDialog } from '@base-ui/react/alert-dialog'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
+
+Base UI docs: https://base-ui.com/react/components/alert-dialog
+
+## Classes
+
+| Class | Data attributes it answers to |
+|---|---|
+
+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 AlertDialog stories (`Default`):
+
+```tsx
+export const Default: Story = {
+  render: () => (
+    <AlertDialog.Root>
+      <AlertDialog.Trigger className="Button">
+        Delete Account
+      </AlertDialog.Trigger>
+      <AlertDialog.Portal>
+        <AlertDialog.Backdrop className="AlertDialogBackdrop" />
+        <AlertDialog.Popup className="AlertDialogPopup">
+          <AlertDialog.Title className="AlertDialogTitle">
+            Are you absolutely sure?
+          </AlertDialog.Title>
+          <AlertDialog.Description className="AlertDialogDescription">
+            This action cannot be undone. This will permanently delete your account
+            and remove your data from our servers.
+          </AlertDialog.Description>
+          <div className="AlertDialogActions">
+            <AlertDialog.Close className="Button" data-variant="ghost">
+              Cancel
+            </AlertDialog.Close>
+            <AlertDialog.Close className="Button" data-color="error">
+              Delete Account
+            </AlertDialog.Close>
+          </div>
+        </AlertDialog.Popup>
+      </AlertDialog.Portal>
+    </AlertDialog.Root>
+  ),
+};
+```
+
+The preview also shows `Warning`.

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

@@ -0,0 +1,19 @@
+<!-- @dsCard group="Overlays" height=240 subtitle="Default / Warning" -->
+<!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-minimize-label-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 u=Object.create;var c=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var v=(e,o)=>()=>(o||e((o={exports:{}}).exports,o),o.exports),C=(e,o)=>{for(var r in o)c(e,r,{get:o[r],enumerable:!0})},T=(e,o,r,s)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of y(o))!f.call(e,l)&&l!==r&&c(e,l,{get:()=>o[l],enumerable:!(s=A(o,l))||s.enumerable});return e};var B=(e,o,r)=>(r=e!=null?u(N(e)):{},T(o||!e||!e.__esModule?c(r,"default",{value:e,enumerable:!0}):r,e));var D=v((b,p)=>{p.exports=window.Loomiere.Base});var m={};C(m,{Default:()=>w,Warning:()=>E,default:()=>g});var a=B(D(),1);var i=window.React;function t(e,o,r){let{children:s,...l}=o||{};return r!==void 0&&(l.key=r),s===void 0?i.createElement(e,l):Array.isArray(s)?i.createElement(e,l,...s):i.createElement(e,l,s)}var k=i.Fragment;var R={title:"Components/AlertDialog",component:a.AlertDialog.Root,parameters:{layout:"centered"},tags:["autodocs"]},g=R,w={render:()=>t(a.AlertDialog.Root,{children:[t(a.AlertDialog.Trigger,{className:"Button",children:"Delete Account"}),t(a.AlertDialog.Portal,{children:[t(a.AlertDialog.Backdrop,{className:"AlertDialogBackdrop"}),t(a.AlertDialog.Popup,{className:"AlertDialogPopup",children:[t(a.AlertDialog.Title,{className:"AlertDialogTitle",children:"Are you absolutely sure?"}),t(a.AlertDialog.Description,{className:"AlertDialogDescription",children:"This action cannot be undone. This will permanently delete your account and remove your data from our servers."}),t("div",{className:"AlertDialogActions",children:[t(a.AlertDialog.Close,{className:"Button","data-variant":"ghost",children:"Cancel"}),t(a.AlertDialog.Close,{className:"Button","data-color":"error",children:"Delete Account"})]})]})]})]})},E={render:()=>t(a.AlertDialog.Root,{children:[t(a.AlertDialog.Trigger,{className:"Button","data-variant":"outline",children:"Clear All Data"}),t(a.AlertDialog.Portal,{children:[t(a.AlertDialog.Backdrop,{className:"AlertDialogBackdrop"}),t(a.AlertDialog.Popup,{className:"AlertDialogPopup",children:[t(a.AlertDialog.Title,{className:"AlertDialogTitle",children:"Clear all data?"}),t(a.AlertDialog.Description,{className:"AlertDialogDescription",children:"This will remove all your saved preferences and settings. You'll need to set everything up again."}),t("div",{className:"AlertDialogActions",children:[t(a.AlertDialog.Close,{className:"Button","data-variant":"ghost",children:"Keep Data"}),t(a.AlertDialog.Close,{className:"Button",children:"Clear All"})]})]})]})]})};var n=window.React,d=g||{},P=["Default","Warning"];function x({id:e}){let o=m[e],r={...d.args||{},...o.args||{}};return(o.render||(l=>n.createElement(d.component,l)))(r,{args:r,id:e,name:e})}var h=P.map(e=>n.createElement("section",{key:e,className:"ds-story"},n.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),n.createElement("div",{className:"ds-story-body"},n.createElement(x,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(n.createElement(n.Fragment,null,h));})();
+
+</script>
+</body>
+</html>

package/dist/design-system/components/Autocomplete/README.md

@@ -0,0 +1,68 @@
+# Autocomplete
+
+The Base UI Autocomplete styled by the theme. No component tokens. The input is Input (Input.css), the clear button is an icon button, and the list is a popup of item rows with the shared group label, separator and empty message.
+
+Use `Loomiere.Autocomplete` (`import { Autocomplete } from '@base-ui/react/autocomplete'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
+
+Base UI docs: https://base-ui.com/react/components/autocomplete
+
+## Classes
+
+| Class | Data attributes it answers to |
+|---|---|
+| `AutocompleteRoot` |   |
+| `AutocompleteInput` |   |
+| `AutocompleteClear` |   |
+| `AutocompletePositioner` |   |
+| `AutocompletePopup` | `data-ending-style` |
+| `AutocompleteList` |   |
+| `AutocompleteItem` | `data-highlighted`; `data-selected`; `data-disabled` |
+| `AutocompleteGroupLabel` |   |
+| `AutocompleteSeparator` |   |
+| `AutocompleteEmpty` |   |
+
+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 Autocomplete stories (`Default`):
+
+```tsx
+export const Default: Story = {
+  render: () => (
+    <div className="AutocompleteRoot" style={{ width: '300px' }}>
+      <Autocomplete.Root>
+        <div style={{ position: 'relative' }}>
+          <Autocomplete.Input 
+            className="AutocompleteInput" 
+            placeholder="Search fruits..." 
+          />
+          <Autocomplete.Clear className="AutocompleteClear">×</Autocomplete.Clear>
+        </div>
+        <Autocomplete.Portal>
+          <Autocomplete.Positioner className="AutocompletePositioner">
+            <Autocomplete.Popup className="AutocompletePopup">
+              <Autocomplete.List className="AutocompleteList">
+                {fruits.map((fruit) => (
+                  <Autocomplete.Item 
+                    key={fruit} 
+                    value={fruit}
+                    className="AutocompleteItem"
+                  >
+                    {fruit}
+                  </Autocomplete.Item>
+                ))}
+                <Autocomplete.Empty className="AutocompleteEmpty">
+                  No results found
+                </Autocomplete.Empty>
+              </Autocomplete.List>
+            </Autocomplete.Popup>
+          </Autocomplete.Positioner>
+        </Autocomplete.Portal>
+      </Autocomplete.Root>
+    </div>
+  ),
+};
+```
+
+The preview also shows `WithGroups`, `WithDisabledItems`.

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

@@ -0,0 +1,19 @@
+<!-- @dsCard group="Forms" height=360 subtitle="Default / WithGroups / WithDisabledItems" -->
+<!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-minimize-label-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 I=Object.create;var r=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var E=(o,a)=>()=>(a||o((a={exports:{}}).exports,a),a.exports),b=(o,a)=>{for(var l in a)r(o,l,{get:a[l],enumerable:!0})},h=(o,a,l,s)=>{if(a&&typeof a=="object"||typeof a=="function")for(let m of N(a))!P.call(o,m)&&m!==l&&r(o,m,{get:()=>a[m],enumerable:!(s=y(a,m))||s.enumerable});return o};var f=(o,a,l)=>(l=o!=null?I(v(o)):{},h(a||!o||!o.__esModule?r(l,"default",{value:o,enumerable:!0}):l,o));var A=E((D,i)=>{i.exports=window.Loomiere.Base});var n={};b(n,{Default:()=>S,WithDisabledItems:()=>g,WithGroups:()=>R,default:()=>u});var t=f(A(),1);var p=window.React;function e(o,a,l){let{children:s,...m}=a||{};return l!==void 0&&(m.key=l),s===void 0?p.createElement(o,m):Array.isArray(s)?p.createElement(o,m,...s):p.createElement(o,m,s)}var F=p.Fragment;var C={title:"Components/Autocomplete",parameters:{layout:"centered"},tags:["autodocs"]},u=C,L=["Apple","Banana","Cherry","Date","Elderberry","Fig","Grape","Honeydew","Kiwi","Lemon","Mango","Orange","Papaya","Raspberry","Strawberry"],S={render:()=>e("div",{className:"AutocompleteRoot",style:{width:"300px"},children:e(t.Autocomplete.Root,{children:[e("div",{style:{position:"relative"},children:[e(t.Autocomplete.Input,{className:"AutocompleteInput",placeholder:"Search fruits..."}),e(t.Autocomplete.Clear,{className:"AutocompleteClear",children:"\xD7"})]}),e(t.Autocomplete.Portal,{children:e(t.Autocomplete.Positioner,{className:"AutocompletePositioner",children:e(t.Autocomplete.Popup,{className:"AutocompletePopup",children:e(t.Autocomplete.List,{className:"AutocompleteList",children:[L.map(o=>e(t.Autocomplete.Item,{value:o,className:"AutocompleteItem",children:o},o)),e(t.Autocomplete.Empty,{className:"AutocompleteEmpty",children:"No results found"})]})})})})]})})},R={render:()=>e("div",{className:"AutocompleteRoot",style:{width:"300px"},children:e(t.Autocomplete.Root,{children:[e("div",{style:{position:"relative"},children:[e(t.Autocomplete.Input,{className:"AutocompleteInput",placeholder:"Search produce..."}),e(t.Autocomplete.Clear,{className:"AutocompleteClear",children:"\xD7"})]}),e(t.Autocomplete.Portal,{children:e(t.Autocomplete.Positioner,{className:"AutocompletePositioner",children:e(t.Autocomplete.Popup,{className:"AutocompletePopup",children:e(t.Autocomplete.List,{className:"AutocompleteList",children:[e(t.Autocomplete.Group,{className:"AutocompleteGroup",children:[e(t.Autocomplete.GroupLabel,{className:"AutocompleteGroupLabel",children:"Fruits"}),e(t.Autocomplete.Item,{value:"Apple",className:"AutocompleteItem",children:"Apple"}),e(t.Autocomplete.Item,{value:"Banana",className:"AutocompleteItem",children:"Banana"}),e(t.Autocomplete.Item,{value:"Cherry",className:"AutocompleteItem",children:"Cherry"})]}),e(t.Autocomplete.Separator,{className:"AutocompleteSeparator"}),e(t.Autocomplete.Group,{className:"AutocompleteGroup",children:[e(t.Autocomplete.GroupLabel,{className:"AutocompleteGroupLabel",children:"Vegetables"}),e(t.Autocomplete.Item,{value:"Carrot",className:"AutocompleteItem",children:"Carrot"}),e(t.Autocomplete.Item,{value:"Broccoli",className:"AutocompleteItem",children:"Broccoli"}),e(t.Autocomplete.Item,{value:"Spinach",className:"AutocompleteItem",children:"Spinach"})]}),e(t.Autocomplete.Empty,{className:"AutocompleteEmpty",children:"No results found"})]})})})})]})})},g={render:()=>e("div",{className:"AutocompleteRoot",style:{width:"300px"},children:e(t.Autocomplete.Root,{children:[e("div",{style:{position:"relative"},children:[e(t.Autocomplete.Input,{className:"AutocompleteInput",placeholder:"Some items are disabled..."}),e(t.Autocomplete.Clear,{className:"AutocompleteClear",children:"\xD7"})]}),e(t.Autocomplete.Portal,{children:e(t.Autocomplete.Positioner,{className:"AutocompletePositioner",children:e(t.Autocomplete.Popup,{className:"AutocompletePopup",children:e(t.Autocomplete.List,{className:"AutocompleteList",children:[e(t.Autocomplete.Item,{value:"Apple",className:"AutocompleteItem",children:"Apple"}),e(t.Autocomplete.Item,{value:"Banana",className:"AutocompleteItem",disabled:!0,children:"Banana (Out of stock)"}),e(t.Autocomplete.Item,{value:"Cherry",className:"AutocompleteItem",children:"Cherry"}),e(t.Autocomplete.Item,{value:"Date",className:"AutocompleteItem",disabled:!0,children:"Date (Out of stock)"}),e(t.Autocomplete.Item,{value:"Elderberry",className:"AutocompleteItem",children:"Elderberry"}),e(t.Autocomplete.Item,{value:"Fig",className:"AutocompleteItem",children:"Fig"}),e(t.Autocomplete.Empty,{className:"AutocompleteEmpty",children:"No results found"})]})})})})]})})};var c=window.React,d=u||{},w=["Default","WithGroups","WithDisabledItems"];function G({id:o}){let a=n[o],l={...d.args||{},...a.args||{}};return(a.render||(m=>c.createElement(d.component,m)))(l,{args:l,id:o,name:o})}var x=w.map(o=>c.createElement("section",{key:o,className:"ds-story"},c.createElement("p",{className:"ds-story-name"},o.replace(/([a-z])([A-Z])/g,"$1 $2")),c.createElement("div",{className:"ds-story-body"},c.createElement(G,{id:o}))));window.ReactDOM.createRoot(document.getElementById("root")).render(c.createElement(c.Fragment,null,x));})();
+
+</script>
+</body>
+</html>

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

@@ -0,0 +1,39 @@
+# 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.
+
+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.
+
+Base UI docs: https://base-ui.com/react/components/avatar
+
+## Classes
+
+| Class | Data attributes it answers to |
+|---|---|
+| `AvatarRoot` | `data-size`: `xs`, `sm`, `lg`, `xl` |
+| `AvatarImage` |   |
+| `AvatarFallback` |   |
+| `AvatarGroup` |   |
+
+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 Avatar stories (`Default`):
+
+```tsx
+export const Default: Story = {
+  render: () => (
+    <Avatar.Root className="AvatarRoot">
+      <Avatar.Image 
+        className="AvatarImage"
+        src="https://i.pravatar.cc/150?img=1" 
+        alt="User avatar" 
+      />
+      <Avatar.Fallback className="AvatarFallback">JD</Avatar.Fallback>
+    </Avatar.Root>
+  ),
+};
+```
+
+The preview also shows `Fallback`, `Sizes`, `Group`.

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

@@ -0,0 +1,19 @@
+<!-- @dsCard group="Display" height=480 subtitle="Default / Fallback / Sizes / Group" -->
+<!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-minimize-label-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 F=Object.create;var v=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var d=(e,r)=>()=>(r||e((r={exports:{}}).exports,r),r.exports),y=(e,r)=>{for(var l in r)v(e,l,{get:r[l],enumerable:!0})},I=(e,r,l,o)=>{if(r&&typeof r=="object"||typeof r=="function")for(let s of p(r))!N.call(e,s)&&s!==l&&v(e,s,{get:()=>r[s],enumerable:!(o=k(r,s))||o.enumerable});return e};var x=(e,r,l)=>(l=e!=null?F(g(e)):{},I(r||!e||!e.__esModule?v(l,"default",{value:e,enumerable:!0}):l,e));var R=d((j,i)=>{i.exports=window.Loomiere.Base});var n={};y(n,{Default:()=>f,Fallback:()=>S,FallbackOnly:()=>w,Group:()=>h,Sizes:()=>E,default:()=>A});var t=x(R(),1);var m=window.React;function a(e,r,l){let{children:o,...s}=r||{};return l!==void 0&&(s.key=l),o===void 0?m.createElement(e,s):Array.isArray(o)?m.createElement(e,s,...o):m.createElement(e,s,o)}var G=m.Fragment;var u={title:"Components/Avatar",component:t.Avatar.Root,parameters:{layout:"centered"},tags:["autodocs"]},A=u,f={render:()=>a(t.Avatar.Root,{className:"AvatarRoot",children:[a(t.Avatar.Image,{className:"AvatarImage",src:"https://i.pravatar.cc/150?img=1",alt:"User avatar"}),a(t.Avatar.Fallback,{className:"AvatarFallback",children:"JD"})]})},S={render:()=>a(t.Avatar.Root,{className:"AvatarRoot",children:[a(t.Avatar.Image,{className:"AvatarImage",src:"invalid-url.jpg",alt:"User avatar"}),a(t.Avatar.Fallback,{className:"AvatarFallback",children:"JD"})]})},E={render:()=>a("div",{style:{display:"flex",gap:"16px",alignItems:"center"},children:[a(t.Avatar.Root,{className:"AvatarRoot","data-size":"xs",children:[a(t.Avatar.Image,{className:"AvatarImage",src:"https://i.pravatar.cc/150?img=2",alt:"Extra Small"}),a(t.Avatar.Fallback,{className:"AvatarFallback",children:"XS"})]}),a(t.Avatar.Root,{className:"AvatarRoot","data-size":"sm",children:[a(t.Avatar.Image,{className:"AvatarImage",src:"https://i.pravatar.cc/150?img=3",alt:"Small"}),a(t.Avatar.Fallback,{className:"AvatarFallback",children:"SM"})]}),a(t.Avatar.Root,{className:"AvatarRoot","data-size":"md",children:[a(t.Avatar.Image,{className:"AvatarImage",src:"https://i.pravatar.cc/150?img=4",alt:"Medium"}),a(t.Avatar.Fallback,{className:"AvatarFallback",children:"MD"})]}),a(t.Avatar.Root,{className:"AvatarRoot","data-size":"lg",children:[a(t.Avatar.Image,{className:"AvatarImage",src:"https://i.pravatar.cc/150?img=5",alt:"Large"}),a(t.Avatar.Fallback,{className:"AvatarFallback",children:"LG"})]}),a(t.Avatar.Root,{className:"AvatarRoot","data-size":"xl",children:[a(t.Avatar.Image,{className:"AvatarImage",src:"https://i.pravatar.cc/150?img=6",alt:"Extra Large"}),a(t.Avatar.Fallback,{className:"AvatarFallback",children:"XL"})]})]})},h={render:()=>a("div",{className:"AvatarGroup",children:[a(t.Avatar.Root,{className:"AvatarRoot",children:[a(t.Avatar.Image,{className:"AvatarImage",src:"https://i.pravatar.cc/150?img=7",alt:"User 1"}),a(t.Avatar.Fallback,{className:"AvatarFallback",children:"U1"})]}),a(t.Avatar.Root,{className:"AvatarRoot",children:[a(t.Avatar.Image,{className:"AvatarImage",src:"https://i.pravatar.cc/150?img=8",alt:"User 2"}),a(t.Avatar.Fallback,{className:"AvatarFallback",children:"U2"})]}),a(t.Avatar.Root,{className:"AvatarRoot",children:[a(t.Avatar.Image,{className:"AvatarImage",src:"https://i.pravatar.cc/150?img=9",alt:"User 3"}),a(t.Avatar.Fallback,{className:"AvatarFallback",children:"U3"})]}),a(t.Avatar.Root,{className:"AvatarRoot",children:a(t.Avatar.Fallback,{className:"AvatarFallback",children:"+5"})})]})},w={render:()=>a("div",{style:{display:"flex",gap:"16px",alignItems:"center"},children:[a(t.Avatar.Root,{className:"AvatarRoot",children:a(t.Avatar.Fallback,{className:"AvatarFallback",children:"AB"})}),a(t.Avatar.Root,{className:"AvatarRoot",children:a(t.Avatar.Fallback,{className:"AvatarFallback",children:"CD"})}),a(t.Avatar.Root,{className:"AvatarRoot",children:a(t.Avatar.Fallback,{className:"AvatarFallback",children:"EF"})}),a(t.Avatar.Root,{className:"AvatarRoot",children:a(t.Avatar.Fallback,{className:"AvatarFallback",children:"GH"})})]})};var c=window.React,b=A||{},z=["Default","Fallback","Sizes","Group"];function D({id:e}){let r=n[e],l={...b.args||{},...r.args||{}};return(r.render||(s=>c.createElement(b.component,s)))(l,{args:l,id:e,name:e})}var U=z.map(e=>c.createElement("section",{key:e,className:"ds-story"},c.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),c.createElement("div",{className:"ds-story-body"},c.createElement(D,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(c.createElement(c.Fragment,null,U));})();
+
+</script>
+</body>
+</html>

package/dist/design-system/components/Button/README.md

@@ -0,0 +1,27 @@
+# Button
+
+The Base UI Button styled by the theme. Colors are the brand's emphasis levels, sizes are control.*, text is the trigger text style of each tier, and icons fill the button line (icon-size one tier up). Only the pill shape and disabled fade are Button's own (tokens/component/button.json).
+
+Use `Loomiere.Button`, this package's wrapper: it puts the class names on for you (`import { Button } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.Button`.
+
+Base UI docs: https://base-ui.com/react/components/button
+
+## Classes
+
+| Class | Data attributes it answers to |
+|---|---|
+| `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.
+
+## Example
+
+From the Button stories (`Default`):
+
+```tsx
+export const Default: Story = {
+  render: () => <Button type="button">Button</Button>,
+};
+```
+
+The preview also shows `Variants`, `Sizes`, `WithIcon`.

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

@@ -0,0 +1,23 @@
+<!-- @dsCard group="Actions" height=480 subtitle="Default / Variants / Sizes / WithIcon" -->
+<!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-minimize-label-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:`
+        @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));})();
+
+</script>
+</body>
+</html>

package/dist/design-system/components/Checkbox/README.md

@@ -0,0 +1,39 @@
+# Checkbox
+
+The Base UI Checkbox styled by the theme. Sizes follow the label: the box is the icon size one tier above the label's text tier (like a button's icon) and the check mark one tier below it.
+
+Use `Loomiere.Checkbox` (`import { Checkbox } from '@base-ui/react/checkbox'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
+
+Base UI docs: https://base-ui.com/react/components/checkbox
+
+## Classes
+
+| Class | Data attributes it answers to |
+|---|---|
+| `CheckboxLabel` | `data-size`: `sm`, `lg`; `data-disabled` |
+| `CheckboxRoot` | `data-size`: `sm`, `lg`; `data-checked`; `data-indeterminate`; `data-disabled`; `data-variant`: `outline`, `circular-outline`, `circular` |
+| `CheckboxIndicator` |   |
+| `CheckboxIcon` |   |
+
+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 Checkbox stories (`Default`):
+
+```tsx
+export const Default: Story = {
+  render: () => (
+    <label className="CheckboxLabel">
+      <Checkbox.Root className="CheckboxRoot">
+        <Checkbox.Indicator className="CheckboxIndicator">
+          <CheckIcon className="CheckboxIcon" />
+        </Checkbox.Indicator>
+      </Checkbox.Root>
+      Accept terms and conditions
+    </label>
+  ),
+};
+```
+
+The preview also shows `Checked`, `Indeterminate`, `Disabled`.

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

@@ -0,0 +1,19 @@
+<!-- @dsCard group="Forms" height=480 subtitle="Default / Checked / Indeterminate / Disabled" -->
+<!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-minimize-label-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 k=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var N=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),y=(e,t)=>{for(var c in t)i(e,c,{get:t[c],enumerable:!0})},f=(e,t,c,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of I(t))!u.call(e,r)&&r!==c&&i(e,r,{get:()=>t[r],enumerable:!(s=p(t,r))||s.enumerable});return e};var g=(e,t,c)=>(c=e!=null?k(R(e)):{},f(t||!e||!e.__esModule?i(c,"default",{value:e,enumerable:!0}):c,e));var x=N((O,h)=>{h.exports=window.Loomiere.Base});var b={};y(b,{Checked:()=>v,Default:()=>S,Disabled:()=>D,Indeterminate:()=>E,WithoutLabel:()=>M,default:()=>m});var a=g(x(),1);var d=window.React;function o(e,t,c){let{children:s,...r}=t||{};return c!==void 0&&(r.key=c),s===void 0?d.createElement(e,r):Array.isArray(s)?d.createElement(e,r,...s):d.createElement(e,r,s)}var P=d.Fragment;var w={title:"Components/Checkbox",component:a.Checkbox.Root,parameters:{layout:"centered"},tags:["autodocs"]},m=w;function l(e){return o("svg",{fill:"currentcolor",width:"10",height:"10",viewBox:"0 0 10 10",...e,children:o("path",{d:"M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z"})})}function L(e){return o("svg",{fill:"currentcolor",width:"10",height:"10",viewBox:"0 0 10 10",...e,children:o("path",{d:"M1 5h8",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})})}var S={render:()=>o("label",{className:"CheckboxLabel",children:[o(a.Checkbox.Root,{className:"CheckboxRoot",children:o(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:o(l,{className:"CheckboxIcon"})})}),"Accept terms and conditions"]})},v={render:()=>o("label",{className:"CheckboxLabel",children:[o(a.Checkbox.Root,{className:"CheckboxRoot",defaultChecked:!0,children:o(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:o(l,{className:"CheckboxIcon"})})}),"I agree to the terms"]})},E={render:()=>o("label",{className:"CheckboxLabel",children:[o(a.Checkbox.Root,{className:"CheckboxRoot",indeterminate:!0,children:o(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:o(L,{className:"CheckboxIcon"})})}),"Select all items"]})},D={render:()=>o("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[o("label",{className:"CheckboxLabel",children:[o(a.Checkbox.Root,{className:"CheckboxRoot",disabled:!0,children:o(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:o(l,{className:"CheckboxIcon"})})}),"Disabled unchecked"]}),o("label",{className:"CheckboxLabel",children:[o(a.Checkbox.Root,{className:"CheckboxRoot",disabled:!0,defaultChecked:!0,children:o(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:o(l,{className:"CheckboxIcon"})})}),"Disabled checked"]})]})},M={render:()=>o(a.Checkbox.Root,{className:"CheckboxRoot",children:o(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:o(l,{className:"CheckboxIcon"})})})};var n=window.React,C=m||{},j=["Default","Checked","Indeterminate","Disabled"];function A({id:e}){let t=b[e],c={...C.args||{},...t.args||{}};return(t.render||(r=>n.createElement(C.component,r)))(c,{args:c,id:e,name:e})}var B=j.map(e=>n.createElement("section",{key:e,className:"ds-story"},n.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),n.createElement("div",{className:"ds-story-body"},n.createElement(A,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(n.createElement(n.Fragment,null,B));})();
+
+</script>
+</body>
+</html>

package/dist/design-system/components/CheckboxGroup/README.md

@@ -0,0 +1,56 @@
+# CheckboxGroup
+
+The Base UI CheckboxGroup styled by the theme.
+
+Use `Loomiere.CheckboxGroup` (`import { CheckboxGroup } from '@base-ui/react/checkbox-group'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
+
+Base UI docs: https://base-ui.com/react/components/checkbox-group
+
+## Classes
+
+| Class | Data attributes it answers to |
+|---|---|
+| `CheckboxGroup` | `data-disabled` |
+
+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 CheckboxGroup stories (`Default`):
+
+```tsx
+export const Default: Story = {
+  render: () => (
+    <CheckboxGroup className="CheckboxGroup" defaultValue={['design']}>
+      <label className="CheckboxLabel">
+        <Checkbox.Root className="CheckboxRoot" name="interests" value="design">
+          <Checkbox.Indicator className="CheckboxIndicator">
+            <CheckIcon className="CheckboxIcon" />
+          </Checkbox.Indicator>
+        </Checkbox.Root>
+        Design
+      </label>
+      
+      <label className="CheckboxLabel">
+        <Checkbox.Root className="CheckboxRoot" name="interests" value="development">
+          <Checkbox.Indicator className="CheckboxIndicator">
+            <CheckIcon className="CheckboxIcon" />
+          </Checkbox.Indicator>
+        </Checkbox.Root>
+        Development
+      </label>
+      
+      <label className="CheckboxLabel">
+        <Checkbox.Root className="CheckboxRoot" name="interests" value="marketing">
+          <Checkbox.Indicator className="CheckboxIndicator">
+            <CheckIcon className="CheckboxIcon" />
+          </Checkbox.Indicator>
+        </Checkbox.Root>
+        Marketing
+      </label>
+    </CheckboxGroup>
+  ),
+};
+```
+
+The preview also shows `WithLabel`, `Disabled`, `WithDefaultValues`.

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

@@ -0,0 +1,19 @@
+<!-- @dsCard group="Forms" height=480 subtitle="Default / WithLabel / Disabled / WithDefaultValues" -->
+<!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-minimize-label-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 R=Object.create;var i=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var k=(o,c)=>()=>(c||o((c={exports:{}}).exports,c),c.exports),L=(o,c)=>{for(var s in c)i(o,s,{get:c[s],enumerable:!0})},D=(o,c,s,n)=>{if(c&&typeof c=="object"||typeof c=="function")for(let l of v(c))!y.call(o,l)&&l!==s&&i(o,l,{get:()=>c[l],enumerable:!(n=g(c,l))||n.enumerable});return o};var C=(o,c,s)=>(s=o!=null?R(f(o)):{},D(c||!o||!o.__esModule?i(s,"default",{value:o,enumerable:!0}):s,o));var N=k((A,d)=>{d.exports=window.Loomiere.Base});var p=k((F,I)=>{I.exports=window.Loomiere.Base});var h={};L(h,{Default:()=>G,Disabled:()=>E,HorizontalLayout:()=>W,WithDefaultValues:()=>M,WithLabel:()=>S,default:()=>x});var a=C(N(),1),r=C(p(),1);var m=window.React;function e(o,c,s){let{children:n,...l}=c||{};return s!==void 0&&(l.key=s),n===void 0?m.createElement(o,l):Array.isArray(n)?m.createElement(o,l,...n):m.createElement(o,l,n)}var O=m.Fragment;var w={title:"Components/CheckboxGroup",component:r.CheckboxGroup,parameters:{layout:"centered"},tags:["autodocs"]},x=w;function t(o){return e("svg",{fill:"currentcolor",width:"14",height:"14",viewBox:"0 0 10 10",...o,children:e("path",{d:"M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z"})})}var G={render:()=>e(r.CheckboxGroup,{className:"CheckboxGroup",defaultValue:["design"],children:[e("label",{className:"CheckboxLabel",children:[e(a.Checkbox.Root,{className:"CheckboxRoot",name:"interests",value:"design",children:e(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:e(t,{className:"CheckboxIcon"})})}),"Design"]}),e("label",{className:"CheckboxLabel",children:[e(a.Checkbox.Root,{className:"CheckboxRoot",name:"interests",value:"development",children:e(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:e(t,{className:"CheckboxIcon"})})}),"Development"]}),e("label",{className:"CheckboxLabel",children:[e(a.Checkbox.Root,{className:"CheckboxRoot",name:"interests",value:"marketing",children:e(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:e(t,{className:"CheckboxIcon"})})}),"Marketing"]})]})},S={render:()=>{let o=`checkbox-group-${Math.random()}`;return e("div",{children:[e("div",{id:o,style:{fontSize:"var(--sl-font-size-lg)",fontWeight:"var(--sl-font-weight-semibold)",marginBottom:"var(--sl-space-3)",color:"var(--sl-text-primary)"},children:"Select your interests"}),e(r.CheckboxGroup,{className:"CheckboxGroup","aria-labelledby":o,children:[e("label",{className:"CheckboxLabel",children:[e(a.Checkbox.Root,{className:"CheckboxRoot",name:"interests",value:"design",children:e(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:e(t,{className:"CheckboxIcon"})})}),"Design"]}),e("label",{className:"CheckboxLabel",children:[e(a.Checkbox.Root,{className:"CheckboxRoot",name:"interests",value:"development",children:e(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:e(t,{className:"CheckboxIcon"})})}),"Development"]}),e("label",{className:"CheckboxLabel",children:[e(a.Checkbox.Root,{className:"CheckboxRoot",name:"interests",value:"marketing",children:e(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:e(t,{className:"CheckboxIcon"})})}),"Marketing"]})]})]})}},E={render:()=>e(r.CheckboxGroup,{className:"CheckboxGroup",disabled:!0,children:[e("label",{className:"CheckboxLabel",children:[e(a.Checkbox.Root,{className:"CheckboxRoot",name:"interests",value:"design",children:e(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:e(t,{className:"CheckboxIcon"})})}),"Design"]}),e("label",{className:"CheckboxLabel",children:[e(a.Checkbox.Root,{className:"CheckboxRoot",name:"interests",value:"development",children:e(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:e(t,{className:"CheckboxIcon"})})}),"Development"]}),e("label",{className:"CheckboxLabel",children:[e(a.Checkbox.Root,{className:"CheckboxRoot",name:"interests",value:"marketing",children:e(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:e(t,{className:"CheckboxIcon"})})}),"Marketing"]})]})},M={render:()=>e(r.CheckboxGroup,{className:"CheckboxGroup",defaultValue:["design","development"],children:[e("label",{className:"CheckboxLabel",children:[e(a.Checkbox.Root,{className:"CheckboxRoot",name:"interests",value:"design",children:e(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:e(t,{className:"CheckboxIcon"})})}),"Design"]}),e("label",{className:"CheckboxLabel",children:[e(a.Checkbox.Root,{className:"CheckboxRoot",name:"interests",value:"development",children:e(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:e(t,{className:"CheckboxIcon"})})}),"Development"]}),e("label",{className:"CheckboxLabel",children:[e(a.Checkbox.Root,{className:"CheckboxRoot",name:"interests",value:"marketing",children:e(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:e(t,{className:"CheckboxIcon"})})}),"Marketing"]})]})},W={render:()=>e(r.CheckboxGroup,{className:"CheckboxGroup",style:{flexDirection:"row",flexWrap:"wrap",gap:"var(--sl-space-4)"},children:[e("label",{className:"CheckboxLabel",children:[e(a.Checkbox.Root,{className:"CheckboxRoot",name:"interests",value:"design",children:e(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:e(t,{className:"CheckboxIcon"})})}),"Design"]}),e("label",{className:"CheckboxLabel",children:[e(a.Checkbox.Root,{className:"CheckboxRoot",name:"interests",value:"development",children:e(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:e(t,{className:"CheckboxIcon"})})}),"Development"]}),e("label",{className:"CheckboxLabel",children:[e(a.Checkbox.Root,{className:"CheckboxRoot",name:"interests",value:"marketing",children:e(a.Checkbox.Indicator,{className:"CheckboxIndicator",children:e(t,{className:"CheckboxIcon"})})}),"Marketing"]})]})};var b=window.React,u=x||{},B=["Default","WithLabel","Disabled","WithDefaultValues"];function V({id:o}){let c=h[o],s={...u.args||{},...c.args||{}};return(c.render||(l=>b.createElement(u.component,l)))(s,{args:s,id:o,name:o})}var j=B.map(o=>b.createElement("section",{key:o,className:"ds-story"},b.createElement("p",{className:"ds-story-name"},o.replace(/([a-z])([A-Z])/g,"$1 $2")),b.createElement("div",{className:"ds-story-body"},b.createElement(V,{id:o}))));window.ReactDOM.createRoot(document.getElementById("root")).render(b.createElement(b.Fragment,null,j));})();
+
+</script>
+</body>
+</html>