@scattered-light/loomiere-mojave 0.5.2 → 0.6.0

package/dist/exports/AGENTS.md

@@ -166,8 +166,8 @@ Load three things, in this order:
 
 `window.Loomiere` holds two kinds of component:
 
-- **Wrappers** put their own classes on, so use them bare: `Loomiere.Button`, `Loomiere.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.
+- **Wrappers** put their own classes on, so use them bare: `Loomiere.Button`, `Loomiere.Input`, `Loomiere.Field`, `Loomiere.Fieldset`, `Loomiere.Form`, `Loomiere.NavigationMenu`, `Loomiere.Select`, `Loomiere.NumberField`, `Loomiere.OTPField`, `Loomiere.Autocomplete`, `Loomiere.Combobox`, `Loomiere.Checkbox`, `Loomiere.Radio`, `Loomiere.CheckboxGroup`, `Loomiere.Toggle`, `Loomiere.ToggleGroup`, `Loomiere.Dialog`, `Loomiere.AlertDialog`, `Loomiere.Meter`, `Loomiere.Progress`, `Loomiere.Slider`, `Loomiere.Menu`, `Loomiere.ContextMenu`, `Loomiere.Menubar`, `Loomiere.Popover`, `Loomiere.PreviewCard`, `Loomiere.Tooltip`, `Loomiere.Drawer`, `Loomiere.Accordion`, `Loomiere.Collapsible`, `Loomiere.Tabs`, `Loomiere.Switch`, `Loomiere.Toast`, `Loomiere.Avatar`, `Loomiere.Toolbar`, `Loomiere.ScrollArea`, `Loomiere.Separator`. `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`). Wrapped parts that are buttons (`Dialog.Trigger`, `Menu.Trigger`, `Toolbar.Button`, `Drawer.Close`...) take the same `emphasis` and `palette` props and draw square the same way. `Popover.Trigger`, `Tooltip.Trigger`, `Select.Trigger` and `Dialog.Close` become Buttons only when they set `emphasis`, `palette` or `className="Button"`. A plain `.Button` on a bare part is drawn square when it has an `aria-label` and a single icon inside, or when you set `data-icon-only` on it.
+- **Table is plain HTML**, not a Base UI part, so it has no wrapper. Use the classes in its stylesheet.
 
 `Loomiere.Base` holds the bare Base UI parts for the wrappers too (`Loomiere.Base.Button`), for when you need the part without its classes.
 

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

@@ -158,8 +158,8 @@ Load three things, in this order:
 
 `window.Loomiere` holds two kinds of component:
 
-- **Wrappers** put their own classes on, so use them bare: `Loomiere.Button`, `Loomiere.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.
+- **Wrappers** put their own classes on, so use them bare: `Loomiere.Button`, `Loomiere.Input`, `Loomiere.Field`, `Loomiere.Fieldset`, `Loomiere.Form`, `Loomiere.NavigationMenu`, `Loomiere.Select`, `Loomiere.NumberField`, `Loomiere.OTPField`, `Loomiere.Autocomplete`, `Loomiere.Combobox`, `Loomiere.Checkbox`, `Loomiere.Radio`, `Loomiere.CheckboxGroup`, `Loomiere.Toggle`, `Loomiere.ToggleGroup`, `Loomiere.Dialog`, `Loomiere.AlertDialog`, `Loomiere.Meter`, `Loomiere.Progress`, `Loomiere.Slider`, `Loomiere.Menu`, `Loomiere.ContextMenu`, `Loomiere.Menubar`, `Loomiere.Popover`, `Loomiere.PreviewCard`, `Loomiere.Tooltip`, `Loomiere.Drawer`, `Loomiere.Accordion`, `Loomiere.Collapsible`, `Loomiere.Tabs`, `Loomiere.Switch`, `Loomiere.Toast`, `Loomiere.Avatar`, `Loomiere.Toolbar`, `Loomiere.ScrollArea`, `Loomiere.Separator`. `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`). Wrapped parts that are buttons (`Dialog.Trigger`, `Menu.Trigger`, `Toolbar.Button`, `Drawer.Close`...) take the same `emphasis` and `palette` props and draw square the same way. `Popover.Trigger`, `Tooltip.Trigger`, `Select.Trigger` and `Dialog.Close` become Buttons only when they set `emphasis`, `palette` or `className="Button"`. A plain `.Button` on a bare part is drawn square when it has an `aria-label` and a single icon inside, or when you set `data-icon-only` on it.
+- **Table is plain HTML**, not a Base UI part, so it has no wrapper. Use the classes in its stylesheet.
 
 `Loomiere.Base` holds the bare Base UI parts for the wrappers too (`Loomiere.Base.Button`), for when you need the part without its classes.
 

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

@@ -2,7 +2,7 @@
 
 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.
+Use `Loomiere.Accordion`, this package's wrapper: it puts the class names on for you (`import { Accordion } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.Accordion`.
 
 Base UI docs: https://base-ui.com/react/components/accordion
 
@@ -28,10 +28,10 @@ From the Accordion stories (`Default`):
 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">
+      <Accordion.Root defaultValue={[0]}>
+        <Accordion.Item value={0}>
+          <Accordion.Header>
+            <Accordion.Trigger>
               What is Base UI?
               <MaterialSymbol
                 name="expand_more"
@@ -41,17 +41,17 @@ export const Default: Story = {
               />
             </Accordion.Trigger>
           </Accordion.Header>
-          <Accordion.Panel className="AccordionPanel">
-            <div className="AccordionContent">
+          <Accordion.Panel>
+            <Accordion.Content>
               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.Content>
           </Accordion.Panel>
         </Accordion.Item>
 
-        <Accordion.Item className="AccordionItem" value={1}>
-          <Accordion.Header className="AccordionHeader">
-            <Accordion.Trigger className="AccordionTrigger">
+        <Accordion.Item value={1}>
+          <Accordion.Header>
+            <Accordion.Trigger>
               Why use Base UI?
               <MaterialSymbol
                 name="expand_more"
@@ -61,17 +61,17 @@ export const Default: Story = {
               />
             </Accordion.Trigger>
           </Accordion.Header>
-          <Accordion.Panel className="AccordionPanel">
-            <div className="AccordionContent">
+          <Accordion.Panel>
+            <Accordion.Content>
               Base UI gives you complete control over styling while handling all the complex
               accessibility and interaction logic for you.
-            </div>
+            </Accordion.Content>
           </Accordion.Panel>
         </Accordion.Item>
 
-        <Accordion.Item className="AccordionItem" value={2}>
-          <Accordion.Header className="AccordionHeader">
-            <Accordion.Trigger className="AccordionTrigger">
+        <Accordion.Item value={2}>
+          <Accordion.Header>
+            <Accordion.Trigger>
               How do I style it?
               <MaterialSymbol
                 name="expand_more"
@@ -81,11 +81,11 @@ export const Default: Story = {
               />
             </Accordion.Trigger>
           </Accordion.Header>
-          <Accordion.Panel className="AccordionPanel">
-            <div className="AccordionContent">
+          <Accordion.Panel>
+            <Accordion.Content>
               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.Content>
           </Accordion.Panel>
         </Accordion.Item>
       </Accordion.Root>

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

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

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

@@ -2,7 +2,7 @@
 
 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.
+Use `Loomiere.AlertDialog`, this package's wrapper: it puts the class names on for you (`import { AlertDialog } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.AlertDialog`.
 
 Base UI docs: https://base-ui.com/react/components/alert-dialog
 
@@ -21,24 +21,24 @@ From the AlertDialog stories (`Default`):
 export const Default: Story = {
   render: () => (
     <AlertDialog.Root>
-      <AlertDialog.Trigger className="Button">
+      <AlertDialog.Trigger>
         Delete Account
       </AlertDialog.Trigger>
       <AlertDialog.Portal>
-        <AlertDialog.Backdrop className="AlertDialogBackdrop" />
-        <AlertDialog.Popup className="AlertDialogPopup">
-          <AlertDialog.Title className="AlertDialogTitle">
+        <AlertDialog.Backdrop />
+        <AlertDialog.Popup>
+          <AlertDialog.Title>
             Are you absolutely sure?
           </AlertDialog.Title>
-          <AlertDialog.Description className="AlertDialogDescription">
+          <AlertDialog.Description>
             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">
+            <AlertDialog.Close data-variant="ghost">
               Cancel
             </AlertDialog.Close>
-            <AlertDialog.Close className="Button" data-color="error">
+            <AlertDialog.Close data-color="error">
               Delete Account
             </AlertDialog.Close>
           </div>

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

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

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

@@ -2,7 +2,7 @@
 
 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.
+Use `Loomiere.Autocomplete`, this package's wrapper: it puts the class names on for you (`import { Autocomplete } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.Autocomplete`.
 
 Base UI docs: https://base-ui.com/react/components/autocomplete
 
@@ -30,29 +30,29 @@ From the Autocomplete stories (`Default`):
 ```tsx
 export const Default: Story = {
   render: () => (
-    <div className="AutocompleteRoot" style={{ width: '300px' }}>
+    <div style={{ width: '300px' }}>
       <Autocomplete.Root>
         <div style={{ position: 'relative' }}>
           <Autocomplete.Input 
-            className="AutocompleteInput" 
+
             placeholder="Search fruits..." 
           />
-          <Autocomplete.Clear className="AutocompleteClear">×</Autocomplete.Clear>
+          <Autocomplete.Clear>×</Autocomplete.Clear>
         </div>
         <Autocomplete.Portal>
-          <Autocomplete.Positioner className="AutocompletePositioner">
-            <Autocomplete.Popup className="AutocompletePopup">
-              <Autocomplete.List className="AutocompleteList">
+          <Autocomplete.Positioner>
+            <Autocomplete.Popup>
+              <Autocomplete.List>
                 {fruits.map((fruit) => (
                   <Autocomplete.Item 
                     key={fruit} 
                     value={fruit}
-                    className="AutocompleteItem"
+
                   >
                     {fruit}
                   </Autocomplete.Item>
                 ))}
-                <Autocomplete.Empty className="AutocompleteEmpty">
+                <Autocomplete.Empty>
                   No results found
                 </Autocomplete.Empty>
               </Autocomplete.List>

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

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

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

@@ -2,7 +2,7 @@
 
 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.
+Use `Loomiere.Avatar`, this package's wrapper: it puts the class names on for you (`import { Avatar } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.Avatar`.
 
 Base UI docs: https://base-ui.com/react/components/avatar
 
@@ -24,13 +24,12 @@ From the Avatar stories (`Default`):
 ```tsx
 export const Default: Story = {
   render: () => (
-    <Avatar.Root className="AvatarRoot">
+    <Avatar.Root>
       <Avatar.Image 
-        className="AvatarImage"
         src="https://i.pravatar.cc/150?img=1" 
         alt="User avatar" 
       />
-      <Avatar.Fallback className="AvatarFallback">JD</Avatar.Fallback>
+      <Avatar.Fallback>JD</Avatar.Fallback>
     </Avatar.Root>
   ),
 };

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

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

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

@@ -2,7 +2,7 @@
 
 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.
+Use `Loomiere.Checkbox`, this package's wrapper: it puts the class names on for you (`import { Checkbox } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.Checkbox`.
 
 Base UI docs: https://base-ui.com/react/components/checkbox
 
@@ -24,14 +24,14 @@ From the Checkbox stories (`Default`):
 ```tsx
 export const Default: Story = {
   render: () => (
-    <label className="CheckboxLabel">
-      <Checkbox.Root className="CheckboxRoot">
-        <Checkbox.Indicator className="CheckboxIndicator">
+    <Checkbox.Label>
+      <Checkbox.Root>
+        <Checkbox.Indicator>
           <CheckIcon className="CheckboxIcon" />
         </Checkbox.Indicator>
       </Checkbox.Root>
       Accept terms and conditions
-    </label>
+    </Checkbox.Label>
   ),
 };
 ```

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

@@ -12,7 +12,7 @@
 <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));})();
+(()=>{var k=Object.create;var i=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var I=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var f=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),R=(e,t)=>{for(var r in t)i(e,r,{get:t[r],enumerable:!0})},g=(e,t,r,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of u(t))!y.call(e,n)&&n!==r&&i(e,n,{get:()=>t[n],enumerable:!(a=p(t,n))||a.enumerable});return e};var L=(e,t,r)=>(r=e!=null?k(I(e)):{},g(t||!e||!e.__esModule?i(r,"default",{value:e,enumerable:!0}):r,e));var x=f((O,h)=>{h.exports=window.Loomiere});var m={};R(m,{Checked:()=>E,Default:()=>v,Disabled:()=>N,Indeterminate:()=>D,WithoutLabel:()=>M,default:()=>b});var c=L(x(),1);var l=window.React;function o(e,t,r){let{children:a,...n}=t||{};return r!==void 0&&(n.key=r),a===void 0?l.createElement(e,n):Array.isArray(a)?l.createElement(e,n,...a):l.createElement(e,n,a)}var P=l.Fragment;var w={title:"Components/Lib/Checkbox",component:c.Checkbox.Root,parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},b=w;function d(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 S(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 v={render:()=>o(c.Checkbox.Label,{children:[o(c.Checkbox.Root,{children:o(c.Checkbox.Indicator,{children:o(d,{className:"CheckboxIcon"})})}),"Accept terms and conditions"]})},E={render:()=>o(c.Checkbox.Label,{children:[o(c.Checkbox.Root,{defaultChecked:!0,children:o(c.Checkbox.Indicator,{children:o(d,{className:"CheckboxIcon"})})}),"I agree to the terms"]})},D={render:()=>o(c.Checkbox.Label,{children:[o(c.Checkbox.Root,{indeterminate:!0,children:o(c.Checkbox.Indicator,{children:o(S,{className:"CheckboxIcon"})})}),"Select all items"]})},N={render:()=>o("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[o(c.Checkbox.Label,{children:[o(c.Checkbox.Root,{disabled:!0,children:o(c.Checkbox.Indicator,{children:o(d,{className:"CheckboxIcon"})})}),"Disabled unchecked"]}),o(c.Checkbox.Label,{children:[o(c.Checkbox.Root,{disabled:!0,defaultChecked:!0,children:o(c.Checkbox.Indicator,{children:o(d,{className:"CheckboxIcon"})})}),"Disabled checked"]})]})},M={render:()=>o(c.Checkbox.Root,{children:o(c.Checkbox.Indicator,{children:o(d,{className:"CheckboxIcon"})})})};var s=window.React,C=b||{},j=["Default","Checked","Indeterminate","Disabled"];function A({id:e}){let t=m[e],r={...C.args||{},...t.args||{}};return(t.render||(n=>s.createElement(C.component,n)))(r,{args:r,id:e,name:e})}var B=j.map(e=>s.createElement("section",{key:e,className:"ds-story"},s.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),s.createElement("div",{className:"ds-story-body"},s.createElement(A,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(s.createElement(s.Fragment,null,B));})();
 
 </script>
 </body>

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

@@ -2,7 +2,7 @@
 
 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.
+Use `Loomiere.CheckboxGroup`, this package's wrapper: it puts the class names on for you (`import { CheckboxGroup } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.CheckboxGroup`.
 
 Base UI docs: https://base-ui.com/react/components/checkbox-group
 
@@ -21,33 +21,33 @@ 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">
+    <CheckboxGroup defaultValue={['design']}>
+      <Checkbox.Label>
+        <Checkbox.Root name="interests" value="design">
+          <Checkbox.Indicator>
             <CheckIcon className="CheckboxIcon" />
           </Checkbox.Indicator>
         </Checkbox.Root>
         Design
-      </label>
+      </Checkbox.Label>
       
-      <label className="CheckboxLabel">
-        <Checkbox.Root className="CheckboxRoot" name="interests" value="development">
-          <Checkbox.Indicator className="CheckboxIndicator">
+      <Checkbox.Label>
+        <Checkbox.Root name="interests" value="development">
+          <Checkbox.Indicator>
             <CheckIcon className="CheckboxIcon" />
           </Checkbox.Indicator>
         </Checkbox.Root>
         Development
-      </label>
+      </Checkbox.Label>
       
-      <label className="CheckboxLabel">
-        <Checkbox.Root className="CheckboxRoot" name="interests" value="marketing">
-          <Checkbox.Indicator className="CheckboxIndicator">
+      <Checkbox.Label>
+        <Checkbox.Root name="interests" value="marketing">
+          <Checkbox.Indicator>
             <CheckIcon className="CheckboxIcon" />
           </Checkbox.Indicator>
         </Checkbox.Root>
         Marketing
-      </label>
+      </Checkbox.Label>
     </CheckboxGroup>
   ),
 };

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

@@ -12,7 +12,7 @@
 <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));})();
+(()=>{var C=Object.create;var b=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var I=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var v=(t,a)=>()=>(a||t((a={exports:{}}).exports,a),a.exports),L=(t,a)=>{for(var c in a)b(t,c,{get:a[c],enumerable:!0})},R=(t,a,c,s)=>{if(a&&typeof a=="object"||typeof a=="function")for(let r of u(a))!g.call(t,r)&&r!==c&&b(t,r,{get:()=>a[r],enumerable:!(s=p(a,r))||s.enumerable});return t};var y=(t,a,c)=>(c=t!=null?C(I(t)):{},R(a||!t||!t.__esModule?b(c,"default",{value:t,enumerable:!0}):c,t));var h=v((j,m)=>{m.exports=window.Loomiere});var x={};L(x,{Default:()=>D,Disabled:()=>w,HorizontalLayout:()=>E,WithDefaultValues:()=>S,WithLabel:()=>N,default:()=>d});var o=y(h(),1);var i=window.React;function e(t,a,c){let{children:s,...r}=a||{};return c!==void 0&&(r.key=c),s===void 0?i.createElement(t,r):Array.isArray(s)?i.createElement(t,r,...s):i.createElement(t,r,s)}var z=i.Fragment;var f={title:"Components/Lib/CheckboxGroup",component:o.CheckboxGroup,parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},d=f;function n(t){return e("svg",{fill:"currentcolor",width:"14",height:"14",viewBox:"0 0 10 10",...t,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 D={render:()=>e(o.CheckboxGroup,{defaultValue:["design"],children:[e(o.Checkbox.Label,{children:[e(o.Checkbox.Root,{name:"interests",value:"design",children:e(o.Checkbox.Indicator,{children:e(n,{className:"CheckboxIcon"})})}),"Design"]}),e(o.Checkbox.Label,{children:[e(o.Checkbox.Root,{name:"interests",value:"development",children:e(o.Checkbox.Indicator,{children:e(n,{className:"CheckboxIcon"})})}),"Development"]}),e(o.Checkbox.Label,{children:[e(o.Checkbox.Root,{name:"interests",value:"marketing",children:e(o.Checkbox.Indicator,{children:e(n,{className:"CheckboxIcon"})})}),"Marketing"]})]})},N={render:()=>{let t=`checkbox-group-${Math.random()}`;return e("div",{children:[e("div",{id:t,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(o.CheckboxGroup,{"aria-labelledby":t,children:[e(o.Checkbox.Label,{children:[e(o.Checkbox.Root,{name:"interests",value:"design",children:e(o.Checkbox.Indicator,{children:e(n,{className:"CheckboxIcon"})})}),"Design"]}),e(o.Checkbox.Label,{children:[e(o.Checkbox.Root,{name:"interests",value:"development",children:e(o.Checkbox.Indicator,{children:e(n,{className:"CheckboxIcon"})})}),"Development"]}),e(o.Checkbox.Label,{children:[e(o.Checkbox.Root,{name:"interests",value:"marketing",children:e(o.Checkbox.Indicator,{children:e(n,{className:"CheckboxIcon"})})}),"Marketing"]})]})]})}},w={render:()=>e(o.CheckboxGroup,{disabled:!0,children:[e(o.Checkbox.Label,{children:[e(o.Checkbox.Root,{name:"interests",value:"design",children:e(o.Checkbox.Indicator,{children:e(n,{className:"CheckboxIcon"})})}),"Design"]}),e(o.Checkbox.Label,{children:[e(o.Checkbox.Root,{name:"interests",value:"development",children:e(o.Checkbox.Indicator,{children:e(n,{className:"CheckboxIcon"})})}),"Development"]}),e(o.Checkbox.Label,{children:[e(o.Checkbox.Root,{name:"interests",value:"marketing",children:e(o.Checkbox.Indicator,{children:e(n,{className:"CheckboxIcon"})})}),"Marketing"]})]})},S={render:()=>e(o.CheckboxGroup,{defaultValue:["design","development"],children:[e(o.Checkbox.Label,{children:[e(o.Checkbox.Root,{name:"interests",value:"design",children:e(o.Checkbox.Indicator,{children:e(n,{className:"CheckboxIcon"})})}),"Design"]}),e(o.Checkbox.Label,{children:[e(o.Checkbox.Root,{name:"interests",value:"development",children:e(o.Checkbox.Indicator,{children:e(n,{className:"CheckboxIcon"})})}),"Development"]}),e(o.Checkbox.Label,{children:[e(o.Checkbox.Root,{name:"interests",value:"marketing",children:e(o.Checkbox.Indicator,{children:e(n,{className:"CheckboxIcon"})})}),"Marketing"]})]})},E={render:()=>e(o.CheckboxGroup,{style:{flexDirection:"row",flexWrap:"wrap",gap:"var(--sl-space-4)"},children:[e(o.Checkbox.Label,{children:[e(o.Checkbox.Root,{name:"interests",value:"design",children:e(o.Checkbox.Indicator,{children:e(n,{className:"CheckboxIcon"})})}),"Design"]}),e(o.Checkbox.Label,{children:[e(o.Checkbox.Root,{name:"interests",value:"development",children:e(o.Checkbox.Indicator,{children:e(n,{className:"CheckboxIcon"})})}),"Development"]}),e(o.Checkbox.Label,{children:[e(o.Checkbox.Root,{name:"interests",value:"marketing",children:e(o.Checkbox.Indicator,{children:e(n,{className:"CheckboxIcon"})})}),"Marketing"]})]})};var l=window.React,k=d||{},M=["Default","WithLabel","Disabled","WithDefaultValues"];function G({id:t}){let a=x[t],c={...k.args||{},...a.args||{}};return(a.render||(r=>l.createElement(k.component,r)))(c,{args:c,id:t,name:t})}var W=M.map(t=>l.createElement("section",{key:t,className:"ds-story"},l.createElement("p",{className:"ds-story-name"},t.replace(/([a-z])([A-Z])/g,"$1 $2")),l.createElement("div",{className:"ds-story-body"},l.createElement(G,{id:t}))));window.ReactDOM.createRoot(document.getElementById("root")).render(l.createElement(l.Fragment,null,W));})();
 
 </script>
 </body>