npm - @scattered-light/loomiere-base-ui - Versions diffs - 0.5.2 → 0.6.0 - Mend

@scattered-light/loomiere-base-ui 0.5.2 → 0.6.0

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

Files changed (114) hide show

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

@@ -2,7 +2,7 @@
 The Base UI Menubar styled by the theme. No component tokens. A row of quiet triggers, each opening a menu. The popup is the popup concept, rows are item rows at the dense menu height, and group labels, separators and check slots are the shared list parts, so menus and listboxes read as one family.
-Use `Loomiere.Menubar` (`import { Menubar } from '@base-ui/react/menubar'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
+Use `Loomiere.Menubar`, this package's wrapper: it puts the class names on for you (`import { Menubar } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.Menubar`.
 Base UI docs: https://base-ui.com/react/components/menubar
@@ -35,19 +35,19 @@ From the Menubar stories (`Default`):
 ```tsx
 export const Default: Story = {
   render: () => (
-    <Menubar className="MenubarRoot">
+    <Menubar>
       <Menu.Root>
         <Menu.Trigger className="MenubarTrigger">File</Menu.Trigger>
         <Menu.Portal>
-          <Menu.Positioner className="MenuPositioner" sideOffset={6}>
-            <Menu.Popup className="MenuPopup">
-              <Menu.Item className="MenuItem">New File</Menu.Item>
-              <Menu.Item className="MenuItem">New Window</Menu.Item>
-              <Menu.Separator className="MenuSeparator" />
-              <Menu.Item className="MenuItem">Open...</Menu.Item>
-              <Menu.Item className="MenuItem">Save</Menu.Item>
-              <Menu.Separator className="MenuSeparator" />
-              <Menu.Item className="MenuItem">Exit</Menu.Item>
+          <Menu.Positioner sideOffset={6}>
+            <Menu.Popup>
+              <Menu.Item>New File</Menu.Item>
+              <Menu.Item>New Window</Menu.Item>
+              <Menu.Separator />
+              <Menu.Item>Open...</Menu.Item>
+              <Menu.Item>Save</Menu.Item>
+              <Menu.Separator />
+              <Menu.Item>Exit</Menu.Item>
             </Menu.Popup>
           </Menu.Positioner>
         </Menu.Portal>
@@ -56,14 +56,14 @@ export const Default: Story = {
       <Menu.Root>
         <Menu.Trigger className="MenubarTrigger">Edit</Menu.Trigger>
         <Menu.Portal>
-          <Menu.Positioner className="MenuPositioner" sideOffset={6}>
-            <Menu.Popup className="MenuPopup">
-              <Menu.Item className="MenuItem">Undo</Menu.Item>
-              <Menu.Item className="MenuItem">Redo</Menu.Item>
-              <Menu.Separator className="MenuSeparator" />
-              <Menu.Item className="MenuItem">Cut</Menu.Item>
-              <Menu.Item className="MenuItem">Copy</Menu.Item>
-              <Menu.Item className="MenuItem">Paste</Menu.Item>
+          <Menu.Positioner sideOffset={6}>
+            <Menu.Popup>
+              <Menu.Item>Undo</Menu.Item>
+              <Menu.Item>Redo</Menu.Item>
+              <Menu.Separator />
+              <Menu.Item>Cut</Menu.Item>
+              <Menu.Item>Copy</Menu.Item>
+              <Menu.Item>Paste</Menu.Item>
             </Menu.Popup>
           </Menu.Positioner>
         </Menu.Portal>
@@ -72,13 +72,13 @@ export const Default: Story = {
       <Menu.Root>
         <Menu.Trigger className="MenubarTrigger">View</Menu.Trigger>
         <Menu.Portal>
-          <Menu.Positioner className="MenuPositioner" sideOffset={6}>
-            <Menu.Popup className="MenuPopup">
-              <Menu.Item className="MenuItem">Zoom In</Menu.Item>
-              <Menu.Item className="MenuItem">Zoom Out</Menu.Item>
-              <Menu.Item className="MenuItem">Reset Zoom</Menu.Item>
-              <Menu.Separator className="MenuSeparator" />
-              <Menu.Item className="MenuItem">Full Screen</Menu.Item>
+          <Menu.Positioner sideOffset={6}>
+            <Menu.Popup>
+              <Menu.Item>Zoom In</Menu.Item>
+              <Menu.Item>Zoom Out</Menu.Item>
+              <Menu.Item>Reset Zoom</Menu.Item>
+              <Menu.Separator />
+              <Menu.Item>Full Screen</Menu.Item>
             </Menu.Popup>
           </Menu.Positioner>
         </Menu.Portal>
@@ -87,12 +87,12 @@ export const Default: Story = {
       <Menu.Root>
         <Menu.Trigger className="MenubarTrigger">Help</Menu.Trigger>
         <Menu.Portal>
-          <Menu.Positioner className="MenuPositioner" sideOffset={6}>
-            <Menu.Popup className="MenuPopup">
-              <Menu.Item className="MenuItem">Documentation</Menu.Item>
-              <Menu.Item className="MenuItem">Keyboard Shortcuts</Menu.Item>
-              <Menu.Separator className="MenuSeparator" />
-              <Menu.Item className="MenuItem">About</Menu.Item>
+          <Menu.Positioner sideOffset={6}>
+            <Menu.Popup>
+              <Menu.Item>Documentation</Menu.Item>
+              <Menu.Item>Keyboard Shortcuts</Menu.Item>
+              <Menu.Separator />
+              <Menu.Item>About</Menu.Item>
             </Menu.Popup>
           </Menu.Positioner>
         </Menu.Portal>

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

@@ -12,7 +12,7 @@
 <body>
 <div id="root"></div>
 <script>
-(()=>{var x=Object.create;var M=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var l=(a,o)=>()=>(o||a((o={exports:{}}).exports,o),o.exports),w=(a,o)=>{for(var n in o)M(a,n,{get:o[n],enumerable:!0})},O=(a,o,n,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of k(o))!C.call(a,s)&&s!==n&&M(a,s,{get:()=>o[s],enumerable:!(r=T(o,s))||r.enumerable});return a};var I=(a,o,n)=>(n=a!=null?x(y(a)):{},O(o||!a||!a.__esModule?M(n,"default",{value:a,enumerable:!0}):n,a));var P=l((D,N)=>{N.exports=window.React});var b=l((A,g)=>{g.exports=window.Loomiere.Base});var h=l((z,R)=>{R.exports=window.Loomiere.Base});var d={};w(d,{Default:()=>F,WithCheckboxes:()=>L,WithDisabledItems:()=>W,WithRadioGroup:()=>_,WithSubmenu:()=>G,default:()=>p});var i=I(P(),1),u=I(b(),1),t=I(h(),1);var c=window.React;function e(a,o,n){let{children:r,...s}=o||{};return n!==void 0&&(s.key=n),r===void 0?c.createElement(a,s):Array.isArray(r)?c.createElement(a,s,...r):c.createElement(a,s,r)}var Z=c.Fragment;var E={title:"Components/Menubar",component:u.Menubar,parameters:{layout:"centered"},tags:["autodocs"]},p=E,F={render:()=>e(u.Menubar,{className:"MenubarRoot",children:[e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"MenubarTrigger",children:"File"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{className:"MenuPositioner",sideOffset:6,children:e(t.Menu.Popup,{className:"MenuPopup",children:[e(t.Menu.Item,{className:"MenuItem",children:"New File"}),e(t.Menu.Item,{className:"MenuItem",children:"New Window"}),e(t.Menu.Separator,{className:"MenuSeparator"}),e(t.Menu.Item,{className:"MenuItem",children:"Open..."}),e(t.Menu.Item,{className:"MenuItem",children:"Save"}),e(t.Menu.Separator,{className:"MenuSeparator"}),e(t.Menu.Item,{className:"MenuItem",children:"Exit"})]})})})]}),e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"MenubarTrigger",children:"Edit"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{className:"MenuPositioner",sideOffset:6,children:e(t.Menu.Popup,{className:"MenuPopup",children:[e(t.Menu.Item,{className:"MenuItem",children:"Undo"}),e(t.Menu.Item,{className:"MenuItem",children:"Redo"}),e(t.Menu.Separator,{className:"MenuSeparator"}),e(t.Menu.Item,{className:"MenuItem",children:"Cut"}),e(t.Menu.Item,{className:"MenuItem",children:"Copy"}),e(t.Menu.Item,{className:"MenuItem",children:"Paste"})]})})})]}),e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"MenubarTrigger",children:"View"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{className:"MenuPositioner",sideOffset:6,children:e(t.Menu.Popup,{className:"MenuPopup",children:[e(t.Menu.Item,{className:"MenuItem",children:"Zoom In"}),e(t.Menu.Item,{className:"MenuItem",children:"Zoom Out"}),e(t.Menu.Item,{className:"MenuItem",children:"Reset Zoom"}),e(t.Menu.Separator,{className:"MenuSeparator"}),e(t.Menu.Item,{className:"MenuItem",children:"Full Screen"})]})})})]}),e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"MenubarTrigger",children:"Help"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{className:"MenuPositioner",sideOffset:6,children:e(t.Menu.Popup,{className:"MenuPopup",children:[e(t.Menu.Item,{className:"MenuItem",children:"Documentation"}),e(t.Menu.Item,{className:"MenuItem",children:"Keyboard Shortcuts"}),e(t.Menu.Separator,{className:"MenuSeparator"}),e(t.Menu.Item,{className:"MenuItem",children:"About"})]})})})]})]})},L={render:()=>{let[a,o]=i.useState(!0),[n,r]=i.useState(!0),[s,f]=i.useState(!1);return e(u.Menubar,{className:"MenubarRoot",children:[e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"MenubarTrigger",children:"File"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{className:"MenuPositioner",sideOffset:6,children:e(t.Menu.Popup,{className:"MenuPopup",children:[e(t.Menu.Item,{className:"MenuItem",children:"New"}),e(t.Menu.Item,{className:"MenuItem",children:"Open"}),e(t.Menu.Item,{className:"MenuItem",children:"Save"})]})})})]}),e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"MenubarTrigger",children:"View"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{className:"MenuPositioner",sideOffset:6,children:e(t.Menu.Popup,{className:"MenuPopup",children:[e(t.Menu.CheckboxItem,{className:"MenuCheckboxItem",checked:a,onCheckedChange:o,children:[e(t.Menu.CheckboxItemIndicator,{className:"MenuCheckboxItemIndicator",children:e("span",{className:"material-symbols-outlined MenuCheckboxItemIndicatorIcon",children:"check"})}),"Show Toolbar"]}),e(t.Menu.CheckboxItem,{className:"MenuCheckboxItem",checked:n,onCheckedChange:r,children:[e(t.Menu.CheckboxItemIndicator,{className:"MenuCheckboxItemIndicator",children:e("span",{className:"material-symbols-outlined MenuCheckboxItemIndicatorIcon",children:"check"})}),"Show Sidebar"]}),e(t.Menu.CheckboxItem,{className:"MenuCheckboxItem",checked:s,onCheckedChange:f,children:[e(t.Menu.CheckboxItemIndicator,{className:"MenuCheckboxItemIndicator",children:e("span",{className:"material-symbols-outlined MenuCheckboxItemIndicatorIcon",children:"check"})}),"Show Status Bar"]})]})})})]})]})}},_={render:()=>{let[a,o]=i.useState("medium");return e(u.Menubar,{className:"MenubarRoot",children:[e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"MenubarTrigger",children:"File"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{className:"MenuPositioner",sideOffset:6,children:e(t.Menu.Popup,{className:"MenuPopup",children:[e(t.Menu.Item,{className:"MenuItem",children:"New"}),e(t.Menu.Item,{className:"MenuItem",children:"Open"})]})})})]}),e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"MenubarTrigger",children:"Format"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{className:"MenuPositioner",sideOffset:6,children:e(t.Menu.Popup,{className:"MenuPopup",children:e(t.Menu.Group,{className:"MenuGroup",children:[e(t.Menu.GroupLabel,{className:"MenuGroupLabel",children:"Text Size"}),e(t.Menu.RadioGroup,{value:a,onValueChange:o,children:[e(t.Menu.RadioItem,{className:"MenuRadioItem",value:"small",children:[e(t.Menu.RadioItemIndicator,{className:"MenuRadioItemIndicator",children:e("span",{className:"material-symbols-outlined MenuRadioItemIndicatorIcon",style:{fontVariationSettings:'"FILL" 1'},children:"radio_button_checked"})}),e("span",{className:"MenuRadioItemIndicator","data-unchecked":!0,children:e("span",{className:"material-symbols-outlined MenuRadioItemIndicatorIcon",children:"radio_button_unchecked"})}),"Small"]}),e(t.Menu.RadioItem,{className:"MenuRadioItem",value:"medium",children:[e(t.Menu.RadioItemIndicator,{className:"MenuRadioItemIndicator",children:e("span",{className:"material-symbols-outlined MenuRadioItemIndicatorIcon",style:{fontVariationSettings:'"FILL" 1'},children:"radio_button_checked"})}),e("span",{className:"MenuRadioItemIndicator","data-unchecked":!0,children:e("span",{className:"material-symbols-outlined MenuRadioItemIndicatorIcon",children:"radio_button_unchecked"})}),"Medium"]}),e(t.Menu.RadioItem,{className:"MenuRadioItem",value:"large",children:[e(t.Menu.RadioItemIndicator,{className:"MenuRadioItemIndicator",children:e("span",{className:"material-symbols-outlined MenuRadioItemIndicatorIcon",style:{fontVariationSettings:'"FILL" 1'},children:"radio_button_checked"})}),e("span",{className:"MenuRadioItemIndicator","data-unchecked":!0,children:e("span",{className:"material-symbols-outlined MenuRadioItemIndicatorIcon",children:"radio_button_unchecked"})}),"Large"]})]})]})})})})]})]})}},G={render:()=>e(u.Menubar,{className:"MenubarRoot",children:[e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"MenubarTrigger",children:"File"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{className:"MenuPositioner",sideOffset:6,children:e(t.Menu.Popup,{className:"MenuPopup",children:[e(t.Menu.Item,{className:"MenuItem",children:"New File"}),e(t.Menu.Item,{className:"MenuItem",children:"New Window"}),e(t.Menu.Separator,{className:"MenuSeparator"}),e(t.Menu.SubmenuRoot,{children:[e(t.Menu.SubmenuTrigger,{className:"MenuSubmenuTrigger",children:"Open Recent"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{className:"MenuPositioner",children:e(t.Menu.Popup,{className:"MenuPopup",children:[e(t.Menu.Item,{className:"MenuItem",children:"project-1.txt"}),e(t.Menu.Item,{className:"MenuItem",children:"project-2.txt"}),e(t.Menu.Item,{className:"MenuItem",children:"project-3.txt"})]})})})]}),e(t.Menu.Separator,{className:"MenuSeparator"}),e(t.Menu.Item,{className:"MenuItem",children:"Exit"})]})})})]}),e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"MenubarTrigger",children:"Edit"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{className:"MenuPositioner",sideOffset:6,children:e(t.Menu.Popup,{className:"MenuPopup",children:[e(t.Menu.Item,{className:"MenuItem",children:"Undo"}),e(t.Menu.Item,{className:"MenuItem",children:"Redo"})]})})})]})]})},W={render:()=>e(u.Menubar,{className:"MenubarRoot",children:[e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"MenubarTrigger",children:"File"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{className:"MenuPositioner",sideOffset:6,children:e(t.Menu.Popup,{className:"MenuPopup",children:[e(t.Menu.Item,{className:"MenuItem",children:"New"}),e(t.Menu.Item,{className:"MenuItem",children:"Open"}),e(t.Menu.Item,{className:"MenuItem",children:"Save"})]})})})]}),e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"MenubarTrigger",children:"Edit"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{className:"MenuPositioner",sideOffset:6,children:e(t.Menu.Popup,{className:"MenuPopup",children:[e(t.Menu.Item,{className:"MenuItem",children:"Cut"}),e(t.Menu.Item,{className:"MenuItem",children:"Copy"}),e(t.Menu.Item,{className:"MenuItem",disabled:!0,children:"Paste (Nothing to paste)"}),e(t.Menu.Separator,{className:"MenuSeparator"}),e(t.Menu.Item,{className:"MenuItem",children:"Select All"})]})})})]})]})};var m=window.React,S=p||{},v=["Default","WithCheckboxes","WithRadioGroup","WithSubmenu"];function j({id:a}){let o=d[a],n={...S.args||{},...o.args||{}};return(o.render||(s=>m.createElement(S.component,s)))(n,{args:n,id:a,name:a})}var V=v.map(a=>m.createElement("section",{key:a,className:"ds-story"},m.createElement("p",{className:"ds-story-name"},a.replace(/([a-z])([A-Z])/g,"$1 $2")),m.createElement("div",{className:"ds-story-body"},m.createElement(j,{id:a}))));window.ReactDOM.createRoot(document.getElementById("root")).render(m.createElement(m.Fragment,null,V));})();
+(()=>{var S=Object.create;var c=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var d=(o,n)=>()=>(n||o((n={exports:{}}).exports,n),n.exports),y=(o,n)=>{for(var r in n)c(o,r,{get:n[r],enumerable:!0})},N=(o,n,r,u)=>{if(n&&typeof n=="object"||typeof n=="function")for(let a of T(n))!k.call(o,a)&&a!==r&&c(o,a,{get:()=>n[a],enumerable:!(u=f(n,a))||u.enumerable});return o};var l=(o,n,r)=>(r=o!=null?S(x(o)):{},N(n||!o||!o.__esModule?c(r,"default",{value:o,enumerable:!0}):r,o));var g=d((j,p)=>{p.exports=window.React});var b=d((V,P)=>{P.exports=window.Loomiere});var I={};y(I,{Default:()=>C,WithCheckboxes:()=>O,WithDisabledItems:()=>_,WithRadioGroup:()=>E,WithSubmenu:()=>F,default:()=>M});var s=l(g(),1),t=l(b(),1);var m=window.React;function e(o,n,r){let{children:u,...a}=n||{};return r!==void 0&&(a.key=r),u===void 0?m.createElement(o,a):Array.isArray(u)?m.createElement(o,a,...u):m.createElement(o,a,u)}var D=m.Fragment;var w={title:"Components/Lib/Menubar",component:t.Menubar,parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},M=w,C={render:()=>e(t.Menubar,{children:[e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"MenubarTrigger",children:"File"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{sideOffset:6,children:e(t.Menu.Popup,{children:[e(t.Menu.Item,{children:"New File"}),e(t.Menu.Item,{children:"New Window"}),e(t.Menu.Separator,{}),e(t.Menu.Item,{children:"Open..."}),e(t.Menu.Item,{children:"Save"}),e(t.Menu.Separator,{}),e(t.Menu.Item,{children:"Exit"})]})})})]}),e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"MenubarTrigger",children:"Edit"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{sideOffset:6,children:e(t.Menu.Popup,{children:[e(t.Menu.Item,{children:"Undo"}),e(t.Menu.Item,{children:"Redo"}),e(t.Menu.Separator,{}),e(t.Menu.Item,{children:"Cut"}),e(t.Menu.Item,{children:"Copy"}),e(t.Menu.Item,{children:"Paste"})]})})})]}),e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"MenubarTrigger",children:"View"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{sideOffset:6,children:e(t.Menu.Popup,{children:[e(t.Menu.Item,{children:"Zoom In"}),e(t.Menu.Item,{children:"Zoom Out"}),e(t.Menu.Item,{children:"Reset Zoom"}),e(t.Menu.Separator,{}),e(t.Menu.Item,{children:"Full Screen"})]})})})]}),e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"MenubarTrigger",children:"Help"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{sideOffset:6,children:e(t.Menu.Popup,{children:[e(t.Menu.Item,{children:"Documentation"}),e(t.Menu.Item,{children:"Keyboard Shortcuts"}),e(t.Menu.Separator,{}),e(t.Menu.Item,{children:"About"})]})})})]})]})},O={render:()=>{let[o,n]=s.useState(!0),[r,u]=s.useState(!0),[a,h]=s.useState(!1);return e(t.Menubar,{children:[e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"MenubarTrigger",children:"File"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{sideOffset:6,children:e(t.Menu.Popup,{children:[e(t.Menu.Item,{children:"New"}),e(t.Menu.Item,{children:"Open"}),e(t.Menu.Item,{children:"Save"})]})})})]}),e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"MenubarTrigger",children:"View"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{sideOffset:6,children:e(t.Menu.Popup,{children:[e(t.Menu.CheckboxItem,{checked:o,onCheckedChange:n,children:[e(t.Menu.CheckboxItemIndicator,{children:e("span",{className:"material-symbols-outlined MenuCheckboxItemIndicatorIcon",children:"check"})}),"Show Toolbar"]}),e(t.Menu.CheckboxItem,{checked:r,onCheckedChange:u,children:[e(t.Menu.CheckboxItemIndicator,{children:e("span",{className:"material-symbols-outlined MenuCheckboxItemIndicatorIcon",children:"check"})}),"Show Sidebar"]}),e(t.Menu.CheckboxItem,{checked:a,onCheckedChange:h,children:[e(t.Menu.CheckboxItemIndicator,{children:e("span",{className:"material-symbols-outlined MenuCheckboxItemIndicatorIcon",children:"check"})}),"Show Status Bar"]})]})})})]})]})}},E={render:()=>{let[o,n]=s.useState("medium");return e(t.Menubar,{children:[e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"MenubarTrigger",children:"File"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{sideOffset:6,children:e(t.Menu.Popup,{children:[e(t.Menu.Item,{children:"New"}),e(t.Menu.Item,{children:"Open"})]})})})]}),e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"MenubarTrigger",children:"Format"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{sideOffset:6,children:e(t.Menu.Popup,{children:e(t.Menu.Group,{children:[e(t.Menu.GroupLabel,{children:"Text Size"}),e(t.Menu.RadioGroup,{value:o,onValueChange:n,children:[e(t.Menu.RadioItem,{value:"small",children:[e(t.Menu.RadioItemIndicator,{children:e("span",{className:"material-symbols-outlined MenuRadioItemIndicatorIcon",style:{fontVariationSettings:'"FILL" 1'},children:"radio_button_checked"})}),e("span",{className:"MenuRadioItemIndicator","data-unchecked":!0,children:e("span",{className:"material-symbols-outlined MenuRadioItemIndicatorIcon",children:"radio_button_unchecked"})}),"Small"]}),e(t.Menu.RadioItem,{value:"medium",children:[e(t.Menu.RadioItemIndicator,{children:e("span",{className:"material-symbols-outlined MenuRadioItemIndicatorIcon",style:{fontVariationSettings:'"FILL" 1'},children:"radio_button_checked"})}),e("span",{className:"MenuRadioItemIndicator","data-unchecked":!0,children:e("span",{className:"material-symbols-outlined MenuRadioItemIndicatorIcon",children:"radio_button_unchecked"})}),"Medium"]}),e(t.Menu.RadioItem,{value:"large",children:[e(t.Menu.RadioItemIndicator,{children:e("span",{className:"material-symbols-outlined MenuRadioItemIndicatorIcon",style:{fontVariationSettings:'"FILL" 1'},children:"radio_button_checked"})}),e("span",{className:"MenuRadioItemIndicator","data-unchecked":!0,children:e("span",{className:"material-symbols-outlined MenuRadioItemIndicatorIcon",children:"radio_button_unchecked"})}),"Large"]})]})]})})})})]})]})}},F={render:()=>e(t.Menubar,{children:[e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"MenubarTrigger",children:"File"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{sideOffset:6,children:e(t.Menu.Popup,{children:[e(t.Menu.Item,{children:"New File"}),e(t.Menu.Item,{children:"New Window"}),e(t.Menu.Separator,{}),e(t.Menu.SubmenuRoot,{children:[e(t.Menu.SubmenuTrigger,{children:"Open Recent"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{children:e(t.Menu.Popup,{children:[e(t.Menu.Item,{children:"project-1.txt"}),e(t.Menu.Item,{children:"project-2.txt"}),e(t.Menu.Item,{children:"project-3.txt"})]})})})]}),e(t.Menu.Separator,{}),e(t.Menu.Item,{children:"Exit"})]})})})]}),e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"MenubarTrigger",children:"Edit"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{sideOffset:6,children:e(t.Menu.Popup,{children:[e(t.Menu.Item,{children:"Undo"}),e(t.Menu.Item,{children:"Redo"})]})})})]})]})},_={render:()=>e(t.Menubar,{children:[e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"MenubarTrigger",children:"File"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{sideOffset:6,children:e(t.Menu.Popup,{children:[e(t.Menu.Item,{children:"New"}),e(t.Menu.Item,{children:"Open"}),e(t.Menu.Item,{children:"Save"})]})})})]}),e(t.Menu.Root,{children:[e(t.Menu.Trigger,{className:"MenubarTrigger",children:"Edit"}),e(t.Menu.Portal,{children:e(t.Menu.Positioner,{sideOffset:6,children:e(t.Menu.Popup,{children:[e(t.Menu.Item,{children:"Cut"}),e(t.Menu.Item,{children:"Copy"}),e(t.Menu.Item,{disabled:!0,children:"Paste (Nothing to paste)"}),e(t.Menu.Separator,{}),e(t.Menu.Item,{children:"Select All"})]})})})]})]})};var i=window.React,R=M||{},L=["Default","WithCheckboxes","WithRadioGroup","WithSubmenu"];function W({id:o}){let n=I[o],r={...R.args||{},...n.args||{}};return(n.render||(a=>i.createElement(R.component,a)))(r,{args:r,id:o,name:o})}var v=L.map(o=>i.createElement("section",{key:o,className:"ds-story"},i.createElement("p",{className:"ds-story-name"},o.replace(/([a-z])([A-Z])/g,"$1 $2")),i.createElement("div",{className:"ds-story-body"},i.createElement(W,{id:o}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,v));})();
 </script>
 </body>

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

@@ -2,7 +2,7 @@
 The Base UI Meter styled by the theme. A gauge (tokens/semantic/gauge.json). The fill is the solid color of the scope around it: the accent by default, or set data-color on the root (success, warning, error, any palette) to show a zone. Base UI doesn't map low/high/optimum, so the app picks the color.
-Use `Loomiere.Meter` (`import { Meter } from '@base-ui/react/meter'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
+Use `Loomiere.Meter`, this package's wrapper: it puts the class names on for you (`import { Meter } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.Meter`.
 Base UI docs: https://base-ui.com/react/components/meter
@@ -11,6 +11,7 @@ Base UI docs: https://base-ui.com/react/components/meter
 | Class | Data attributes it answers to |
 |---|---|
 | `MeterRoot` |   |
+| `MeterHeader` |   |
 | `MeterLabel` |   |
 | `MeterTrack` | `data-size`: `sm`, `lg` |
 | `MeterIndicator` |   |
@@ -26,13 +27,13 @@ From the Meter stories (`Default`):
 export const Default: Story = {
   render: () => (
     <div style={{ width: '300px' }}>
-      <Meter.Root value={75} min={0} max={100} className="MeterRoot">
-        <div className="MeterLabel">
-          <span>Storage</span>
-          <Meter.Value className="MeterValue" />
-        </div>
-        <Meter.Track className="MeterTrack">
-          <Meter.Indicator className="MeterIndicator" />
+      <Meter.Root value={75} min={0} max={100}>
+        <Meter.Header>
+          <Meter.Label>Storage</Meter.Label>
+          <Meter.Value />
+        </Meter.Header>
+        <Meter.Track>
+          <Meter.Indicator />
         </Meter.Track>
       </Meter.Root>
     </div>

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

@@ -12,7 +12,7 @@
 <body>
 <div id="root"></div>
 <script>
-(()=>{var y=Object.create;var m=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var V=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var M=(t,r)=>()=>(r||t((r={exports:{}}).exports,r),r.exports),g=(t,r)=>{for(var s in r)m(t,s,{get:r[s],enumerable:!0})},b=(t,r,s,c)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of f(r))!I.call(t,o)&&o!==s&&m(t,o,{get:()=>r[o],enumerable:!(c=T(r,o))||c.enumerable});return t};var p=(t,r,s)=>(s=t!=null?y(V(t)):{},b(r||!t||!t.__esModule?m(s,"default",{value:t,enumerable:!0}):s,t));var N=M((O,u)=>{u.exports=window.React});var x=M((j,v)=>{v.exports=window.Loomiere.Base});var d={};g(d,{BatteryLevel:()=>E,Default:()=>w,DiskUsage:()=>L,NetworkSpeed:()=>B,Sizes:()=>D,WithOptimumRange:()=>S,WithoutLabel:()=>C,default:()=>i});var R=p(N(),1),a=p(x(),1);var n=window.React;function e(t,r,s){let{children:c,...o}=r||{};return s!==void 0&&(o.key=s),c===void 0?n.createElement(t,o):Array.isArray(c)?n.createElement(t,o,...c):n.createElement(t,o,c)}var A=n.Fragment;var h={title:"Components/Meter",parameters:{layout:"centered"},tags:["autodocs"]},i=h,w={render:()=>e("div",{style:{width:"300px"},children:e(a.Meter.Root,{value:75,min:0,max:100,className:"MeterRoot",children:[e("div",{className:"MeterLabel",children:[e("span",{children:"Storage"}),e(a.Meter.Value,{className:"MeterValue"})]}),e(a.Meter.Track,{className:"MeterTrack",children:e(a.Meter.Indicator,{className:"MeterIndicator"})})]})})},S={render:()=>e("div",{style:{width:"300px",display:"flex",flexDirection:"column",gap:"24px"},children:[e("p",{style:{margin:0,fontSize:"14px",color:"var(--sl-text-tertiary)"},children:["Base UI Meter doesn't map ",e("code",{children:"low"}),"/",e("code",{children:"high"}),"/",e("code",{children:"optimum"}),", so pick the zone in the app and set ",e("code",{children:"data-color"})," on the root."]}),e(a.Meter.Root,{value:30,min:0,max:100,className:"MeterRoot","data-color":"success",children:[e("div",{className:"MeterLabel",children:[e("span",{children:"CPU load (lower is calmer)"}),e(a.Meter.Value,{className:"MeterValue"})]}),e(a.Meter.Track,{className:"MeterTrack",children:e(a.Meter.Indicator,{className:"MeterIndicator"})})]}),e(a.Meter.Root,{value:60,min:0,max:100,className:"MeterRoot","data-color":"warning",children:[e("div",{className:"MeterLabel",children:[e("span",{children:"CPU load (moderate)"}),e(a.Meter.Value,{className:"MeterValue"})]}),e(a.Meter.Track,{className:"MeterTrack",children:e(a.Meter.Indicator,{className:"MeterIndicator"})})]}),e(a.Meter.Root,{value:90,min:0,max:100,className:"MeterRoot","data-color":"error",children:[e("div",{className:"MeterLabel",children:[e("span",{children:"CPU load (high)"}),e(a.Meter.Value,{className:"MeterValue"})]}),e(a.Meter.Track,{className:"MeterTrack",children:e(a.Meter.Indicator,{className:"MeterIndicator"})})]})]})},D={render:()=>e("div",{style:{width:"300px",display:"flex",flexDirection:"column",gap:"24px"},children:[e(a.Meter.Root,{value:45,min:0,max:100,className:"MeterRoot",children:[e("div",{className:"MeterLabel",children:[e("span",{children:"Small"}),e(a.Meter.Value,{className:"MeterValue"})]}),e(a.Meter.Track,{className:"MeterTrack","data-size":"sm",children:e(a.Meter.Indicator,{className:"MeterIndicator"})})]}),e(a.Meter.Root,{value:65,min:0,max:100,className:"MeterRoot",children:[e("div",{className:"MeterLabel",children:[e("span",{children:"Medium (default)"}),e(a.Meter.Value,{className:"MeterValue"})]}),e(a.Meter.Track,{className:"MeterTrack",children:e(a.Meter.Indicator,{className:"MeterIndicator"})})]}),e(a.Meter.Root,{value:85,min:0,max:100,className:"MeterRoot",children:[e("div",{className:"MeterLabel",children:[e("span",{children:"Large"}),e(a.Meter.Value,{className:"MeterValue"})]}),e(a.Meter.Track,{className:"MeterTrack","data-size":"lg",children:e(a.Meter.Indicator,{className:"MeterIndicator"})})]})]})},L={render:()=>e("div",{style:{width:"400px",display:"flex",flexDirection:"column",gap:"24px"},children:[e(a.Meter.Root,{value:45,min:0,max:100,className:"MeterRoot",children:[e("div",{className:"MeterLabel",children:[e("span",{children:"System Drive (C:)"}),e(a.Meter.Value,{className:"MeterValue",children:(t,r)=>`${r}% used`})]}),e(a.Meter.Track,{className:"MeterTrack",children:e(a.Meter.Indicator,{className:"MeterIndicator"})})]}),e(a.Meter.Root,{value:78,min:0,max:100,className:"MeterRoot",children:[e("div",{className:"MeterLabel",children:[e("span",{children:"Data Drive (D:)"}),e(a.Meter.Value,{className:"MeterValue",children:(t,r)=>`${r}% used`})]}),e(a.Meter.Track,{className:"MeterTrack",children:e(a.Meter.Indicator,{className:"MeterIndicator"})})]}),e(a.Meter.Root,{value:95,min:0,max:100,className:"MeterRoot",children:[e("div",{className:"MeterLabel",children:[e("span",{children:"Backup Drive (E:)"}),e(a.Meter.Value,{className:"MeterValue",children:(t,r)=>`${r}% used`})]}),e(a.Meter.Track,{className:"MeterTrack",children:e(a.Meter.Indicator,{className:"MeterIndicator"})})]})]})},E={render:()=>{let[t,r]=R.useState(85);return e("div",{style:{width:"300px",display:"flex",flexDirection:"column",gap:"16px"},children:[e(a.Meter.Root,{value:t,min:0,max:100,className:"MeterRoot","data-color":t<=20?"error":t<=50?"warning":"success",children:[e("div",{className:"MeterLabel",children:[e("span",{children:"Battery Level"}),e(a.Meter.Value,{className:"MeterValue",children:(s,c)=>`${c}%`})]}),e(a.Meter.Track,{className:"MeterTrack",children:e(a.Meter.Indicator,{className:"MeterIndicator"})})]}),e("div",{style:{display:"flex",gap:"8px"},children:[e("button",{type:"button",className:"Button","data-emphasis":"standard",onClick:()=>r(Math.max(0,t-10)),children:"Drain -10%"}),e("button",{type:"button",className:"Button","data-emphasis":"standard",onClick:()=>r(Math.min(100,t+10)),children:"Charge +10%"})]})]})}},B={render:()=>e("div",{style:{width:"350px",display:"flex",flexDirection:"column",gap:"24px"},children:[e(a.Meter.Root,{value:850,min:0,max:1e3,className:"MeterRoot",children:[e("div",{className:"MeterLabel",children:[e("span",{children:"Download Speed"}),e(a.Meter.Value,{className:"MeterValue",children:(t,r)=>`${r} Mbps`})]}),e(a.Meter.Track,{className:"MeterTrack",children:e(a.Meter.Indicator,{className:"MeterIndicator"})})]}),e(a.Meter.Root,{value:450,min:0,max:1e3,className:"MeterRoot",children:[e("div",{className:"MeterLabel",children:[e("span",{children:"Upload Speed"}),e(a.Meter.Value,{className:"MeterValue",children:(t,r)=>`${r} Mbps`})]}),e(a.Meter.Track,{className:"MeterTrack",children:e(a.Meter.Indicator,{className:"MeterIndicator"})})]})]})},C={render:()=>e("div",{style:{width:"300px"},children:e(a.Meter.Root,{value:60,min:0,max:100,className:"MeterRoot",children:e(a.Meter.Track,{className:"MeterTrack",children:e(a.Meter.Indicator,{className:"MeterIndicator"})})})})};var l=window.React,k=i||{},$=["Default","WithOptimumRange","Sizes","DiskUsage"];function z({id:t}){let r=d[t],s={...k.args||{},...r.args||{}};return(r.render||(o=>l.createElement(k.component,o)))(s,{args:s,id:t,name:t})}var U=$.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(z,{id:t}))));window.ReactDOM.createRoot(document.getElementById("root")).render(l.createElement(l.Fragment,null,U));})();
+(()=>{var v=Object.create;var i=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var u=(a,r)=>()=>(r||a((r={exports:{}}).exports,r),r.exports),H=(a,r)=>{for(var o in r)i(a,o,{get:r[o],enumerable:!0})},h=(a,r,o,l)=>{if(r&&typeof r=="object"||typeof r=="function")for(let d of L(r))!T.call(a,d)&&d!==o&&i(a,d,{get:()=>r[d],enumerable:!(l=f(r,d))||l.enumerable});return a};var M=(a,r,o)=>(o=a!=null?v(g(a)):{},h(r||!a||!a.__esModule?i(o,"default",{value:a,enumerable:!0}):o,a));var x=u((_,p)=>{p.exports=window.React});var b=u((O,y)=>{y.exports=window.Loomiere});var m={};H(m,{BatteryLevel:()=>E,Default:()=>S,DiskUsage:()=>I,NetworkSpeed:()=>B,Sizes:()=>D,WithOptimumRange:()=>V,WithoutLabel:()=>C,default:()=>s});var R=M(x(),1),t=M(b(),1);var c=window.React;function e(a,r,o){let{children:l,...d}=r||{};return o!==void 0&&(d.key=o),l===void 0?c.createElement(a,d):Array.isArray(l)?c.createElement(a,d,...l):c.createElement(a,d,l)}var j=c.Fragment;var w={title:"Components/Lib/Meter",parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},s=w,S={render:()=>e("div",{style:{width:"300px"},children:e(t.Meter.Root,{value:75,min:0,max:100,children:[e(t.Meter.Header,{children:[e(t.Meter.Label,{children:"Storage"}),e(t.Meter.Value,{})]}),e(t.Meter.Track,{children:e(t.Meter.Indicator,{})})]})})},V={render:()=>e("div",{style:{width:"300px",display:"flex",flexDirection:"column",gap:"24px"},children:[e("p",{style:{margin:0,fontSize:"14px",color:"var(--sl-text-tertiary)"},children:["Base UI Meter doesn't map ",e("code",{children:"low"}),"/",e("code",{children:"high"}),"/",e("code",{children:"optimum"}),", so pick the zone in the app and set ",e("code",{children:"data-color"})," on the root."]}),e(t.Meter.Root,{value:30,min:0,max:100,"data-color":"success",children:[e(t.Meter.Header,{children:[e(t.Meter.Label,{children:"CPU load (lower is calmer)"}),e(t.Meter.Value,{})]}),e(t.Meter.Track,{children:e(t.Meter.Indicator,{})})]}),e(t.Meter.Root,{value:60,min:0,max:100,"data-color":"warning",children:[e(t.Meter.Header,{children:[e(t.Meter.Label,{children:"CPU load (moderate)"}),e(t.Meter.Value,{})]}),e(t.Meter.Track,{children:e(t.Meter.Indicator,{})})]}),e(t.Meter.Root,{value:90,min:0,max:100,"data-color":"error",children:[e(t.Meter.Header,{children:[e(t.Meter.Label,{children:"CPU load (high)"}),e(t.Meter.Value,{})]}),e(t.Meter.Track,{children:e(t.Meter.Indicator,{})})]})]})},D={render:()=>e("div",{style:{width:"300px",display:"flex",flexDirection:"column",gap:"24px"},children:[e(t.Meter.Root,{value:45,min:0,max:100,children:[e(t.Meter.Header,{children:[e(t.Meter.Label,{children:"Small"}),e(t.Meter.Value,{})]}),e(t.Meter.Track,{"data-size":"sm",children:e(t.Meter.Indicator,{})})]}),e(t.Meter.Root,{value:65,min:0,max:100,children:[e(t.Meter.Header,{children:[e(t.Meter.Label,{children:"Medium (default)"}),e(t.Meter.Value,{})]}),e(t.Meter.Track,{children:e(t.Meter.Indicator,{})})]}),e(t.Meter.Root,{value:85,min:0,max:100,children:[e(t.Meter.Header,{children:[e(t.Meter.Label,{children:"Large"}),e(t.Meter.Value,{})]}),e(t.Meter.Track,{"data-size":"lg",children:e(t.Meter.Indicator,{})})]})]})},I={render:()=>e("div",{style:{width:"400px",display:"flex",flexDirection:"column",gap:"24px"},children:[e(t.Meter.Root,{value:45,min:0,max:100,children:[e(t.Meter.Header,{children:[e(t.Meter.Label,{children:"System Drive (C:)"}),e(t.Meter.Value,{children:(a,r)=>`${r}% used`})]}),e(t.Meter.Track,{children:e(t.Meter.Indicator,{})})]}),e(t.Meter.Root,{value:78,min:0,max:100,children:[e(t.Meter.Header,{children:[e(t.Meter.Label,{children:"Data Drive (D:)"}),e(t.Meter.Value,{children:(a,r)=>`${r}% used`})]}),e(t.Meter.Track,{children:e(t.Meter.Indicator,{})})]}),e(t.Meter.Root,{value:95,min:0,max:100,children:[e(t.Meter.Header,{children:[e(t.Meter.Label,{children:"Backup Drive (E:)"}),e(t.Meter.Value,{children:(a,r)=>`${r}% used`})]}),e(t.Meter.Track,{children:e(t.Meter.Indicator,{})})]})]})},E={render:()=>{let[a,r]=R.useState(85);return e("div",{style:{width:"300px",display:"flex",flexDirection:"column",gap:"16px"},children:[e(t.Meter.Root,{value:a,min:0,max:100,"data-color":a<=20?"error":a<=50?"warning":"success",children:[e(t.Meter.Header,{children:[e(t.Meter.Label,{children:"Battery Level"}),e(t.Meter.Value,{children:(o,l)=>`${l}%`})]}),e(t.Meter.Track,{children:e(t.Meter.Indicator,{})})]}),e("div",{style:{display:"flex",gap:"8px"},children:[e("button",{type:"button",className:"Button","data-emphasis":"standard",onClick:()=>r(Math.max(0,a-10)),children:"Drain -10%"}),e("button",{type:"button",className:"Button","data-emphasis":"standard",onClick:()=>r(Math.min(100,a+10)),children:"Charge +10%"})]})]})}},B={render:()=>e("div",{style:{width:"350px",display:"flex",flexDirection:"column",gap:"24px"},children:[e(t.Meter.Root,{value:850,min:0,max:1e3,children:[e(t.Meter.Header,{children:[e(t.Meter.Label,{children:"Download Speed"}),e(t.Meter.Value,{children:(a,r)=>`${r} Mbps`})]}),e(t.Meter.Track,{children:e(t.Meter.Indicator,{})})]}),e(t.Meter.Root,{value:450,min:0,max:1e3,children:[e(t.Meter.Header,{children:[e(t.Meter.Label,{children:"Upload Speed"}),e(t.Meter.Value,{children:(a,r)=>`${r} Mbps`})]}),e(t.Meter.Track,{children:e(t.Meter.Indicator,{})})]})]})},C={render:()=>e("div",{style:{width:"300px"},children:e(t.Meter.Root,{value:60,min:0,max:100,children:e(t.Meter.Track,{children:e(t.Meter.Indicator,{})})})})};var n=window.React,k=s||{},$=["Default","WithOptimumRange","Sizes","DiskUsage"];function z({id:a}){let r=m[a],o={...k.args||{},...r.args||{}};return(r.render||(d=>n.createElement(k.component,d)))(o,{args:o,id:a,name:a})}var U=$.map(a=>n.createElement("section",{key:a,className:"ds-story"},n.createElement("p",{className:"ds-story-name"},a.replace(/([a-z])([A-Z])/g,"$1 $2")),n.createElement("div",{className:"ds-story-body"},n.createElement(z,{id:a}))));window.ReactDOM.createRoot(document.getElementById("root")).render(n.createElement(n.Fragment,null,U));})();
 </script>
 </body>

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

@@ -2,7 +2,7 @@
 The Base UI NumberField styled by the theme. No component tokens. The input is Input (Input.css) and the label, description and error are Field's parts (Field.css). Only the stepper buttons are drawn here: two stacked halves of the field's height, as wide as the smallest control.
-Use `Loomiere.NumberField` (`import { NumberField } from '@base-ui/react/number-field'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
+Use `Loomiere.NumberField`, this package's wrapper: it puts the class names on for you (`import { NumberField } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.NumberField`.
 Base UI docs: https://base-ui.com/react/components/number-field
@@ -29,22 +29,22 @@ export const Default: Story = {
     const id = React.useId();
     return (
       <div style={{ width: '200px' }}>
-        <NumberField.Root id={id} defaultValue={100} className="NumberFieldRoot">
-          <NumberField.ScrubArea className="NumberFieldScrubArea">
-            <label htmlFor={id} className="NumberFieldLabel">
+        <NumberField.Root id={id} defaultValue={100}>
+          <NumberField.ScrubArea>
+            <NumberField.Label htmlFor={id}>
               Amount
-            </label>
-            <NumberField.ScrubAreaCursor className="NumberFieldScrubAreaCursor">
+            </NumberField.Label>
+            <NumberField.ScrubAreaCursor>
               <CursorGrowIcon />
             </NumberField.ScrubAreaCursor>
           </NumberField.ScrubArea>
-          <NumberField.Group className="NumberFieldGroup">
-            <NumberField.Decrement className="NumberFieldDecrement">
+          <NumberField.Group>
+            <NumberField.Decrement>
               <MinusIcon />
             </NumberField.Decrement>
-            <NumberField.Input className="NumberFieldInput" />
-            <NumberField.Increment className="NumberFieldIncrement">
+            <NumberField.Input />
+            <NumberField.Increment>
               <PlusIcon />
             </NumberField.Increment>
           </NumberField.Group>

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

@@ -12,7 +12,7 @@
 <body>
 <div id="root"></div>
 <script>
-(()=>{var y=Object.create;var b=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var p=(r,l)=>()=>(l||r((l={exports:{}}).exports,l),l.exports),g=(r,l)=>{for(var a in l)b(r,a,{get:l[a],enumerable:!0})},C=(r,l,a,s)=>{if(l&&typeof l=="object"||typeof l=="function")for(let m of x(l))!D.call(r,m)&&m!==a&&b(r,m,{get:()=>l[m],enumerable:!(s=v(l,m))||s.enumerable});return r};var S=(r,l,a)=>(a=r!=null?y(f(r)):{},C(l||!r||!r.__esModule?b(a,"default",{value:r,enumerable:!0}):a,r));var A=p(($,I)=>{I.exports=window.React});var h=p((z,R)=>{R.exports=window.Loomiere.Base});var F={};g(F,{Default:()=>L,Disabled:()=>W,LargeStep:()=>O,ReadOnly:()=>B,WithDecimals:()=>E,WithMinMax:()=>V,WithStep:()=>M,WithoutScrubArea:()=>k,default:()=>N});var u=S(A(),1),t=S(h(),1);var i=window.React;function e(r,l,a){let{children:s,...m}=l||{};return a!==void 0&&(m.key=a),s===void 0?i.createElement(r,m):Array.isArray(s)?i.createElement(r,m,...s):i.createElement(r,m,s)}var q=i.Fragment;var G={title:"Components/NumberField",component:t.NumberField.Root,parameters:{layout:"centered"},tags:["autodocs"]},N=G;function n(r){return e("svg",{width:"26",height:"14",viewBox:"0 0 24 14",fill:"black",stroke:"white",xmlns:"http://www.w3.org/2000/svg",...r,children:e("path",{d:"M19.5 5.5L6.49737 5.51844V2L1 6.9999L6.5 12L6.49737 8.5L19.5 8.5V12L25 6.9999L19.5 2V5.5Z"})})}function o(r){return e("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",stroke:"currentcolor",strokeWidth:"1.6",xmlns:"http://www.w3.org/2000/svg",...r,children:e("path",{d:"M0 5H5M10 5H5M5 5V0M5 5V10"})})}function c(r){return e("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",stroke:"currentcolor",strokeWidth:"1.6",xmlns:"http://www.w3.org/2000/svg",...r,children:e("path",{d:"M0 5H10"})})}var L={render:()=>{let r=u.useId();return e("div",{style:{width:"200px"},children:e(t.NumberField.Root,{id:r,defaultValue:100,className:"NumberFieldRoot",children:[e(t.NumberField.ScrubArea,{className:"NumberFieldScrubArea",children:[e("label",{htmlFor:r,className:"NumberFieldLabel",children:"Amount"}),e(t.NumberField.ScrubAreaCursor,{className:"NumberFieldScrubAreaCursor",children:e(n,{})})]}),e(t.NumberField.Group,{className:"NumberFieldGroup",children:[e(t.NumberField.Decrement,{className:"NumberFieldDecrement",children:e(c,{})}),e(t.NumberField.Input,{className:"NumberFieldInput"}),e(t.NumberField.Increment,{className:"NumberFieldIncrement",children:e(o,{})})]})]})})}},V={render:()=>{let r=u.useId();return e("div",{style:{width:"200px"},children:e(t.NumberField.Root,{id:r,defaultValue:5,min:0,max:10,className:"NumberFieldRoot",children:[e(t.NumberField.ScrubArea,{className:"NumberFieldScrubArea",children:[e("label",{htmlFor:r,className:"NumberFieldLabel",children:"Rating (0-10)"}),e(t.NumberField.ScrubAreaCursor,{className:"NumberFieldScrubAreaCursor",children:e(n,{})})]}),e(t.NumberField.Group,{className:"NumberFieldGroup",children:[e(t.NumberField.Decrement,{className:"NumberFieldDecrement",children:e(c,{})}),e(t.NumberField.Input,{className:"NumberFieldInput"}),e(t.NumberField.Increment,{className:"NumberFieldIncrement",children:e(o,{})})]})]})})}},M={render:()=>{let r=u.useId();return e("div",{style:{width:"200px"},children:e(t.NumberField.Root,{id:r,defaultValue:0,step:5,className:"NumberFieldRoot",children:[e(t.NumberField.ScrubArea,{className:"NumberFieldScrubArea",children:[e("label",{htmlFor:r,className:"NumberFieldLabel",children:"Amount (increments of 5)"}),e(t.NumberField.ScrubAreaCursor,{className:"NumberFieldScrubAreaCursor",children:e(n,{})})]}),e(t.NumberField.Group,{className:"NumberFieldGroup",children:[e(t.NumberField.Decrement,{className:"NumberFieldDecrement",children:e(c,{})}),e(t.NumberField.Input,{className:"NumberFieldInput"}),e(t.NumberField.Increment,{className:"NumberFieldIncrement",children:e(o,{})})]})]})})}},E={render:()=>{let r=u.useId();return e("div",{style:{width:"200px"},children:e(t.NumberField.Root,{id:r,defaultValue:0,step:.1,className:"NumberFieldRoot",children:[e(t.NumberField.ScrubArea,{className:"NumberFieldScrubArea",children:[e("label",{htmlFor:r,className:"NumberFieldLabel",children:"Price"}),e(t.NumberField.ScrubAreaCursor,{className:"NumberFieldScrubAreaCursor",children:e(n,{})})]}),e(t.NumberField.Group,{className:"NumberFieldGroup",children:[e(t.NumberField.Decrement,{className:"NumberFieldDecrement",children:e(c,{})}),e(t.NumberField.Input,{className:"NumberFieldInput"}),e(t.NumberField.Increment,{className:"NumberFieldIncrement",children:e(o,{})})]})]})})}},W={render:()=>{let r=u.useId();return e("div",{style:{width:"200px"},children:e(t.NumberField.Root,{id:r,defaultValue:5,disabled:!0,className:"NumberFieldRoot",children:[e(t.NumberField.ScrubArea,{className:"NumberFieldScrubArea",children:[e("label",{htmlFor:r,className:"NumberFieldLabel",children:"Disabled field"}),e(t.NumberField.ScrubAreaCursor,{className:"NumberFieldScrubAreaCursor",children:e(n,{})})]}),e(t.NumberField.Group,{className:"NumberFieldGroup",children:[e(t.NumberField.Decrement,{className:"NumberFieldDecrement",children:e(c,{})}),e(t.NumberField.Input,{className:"NumberFieldInput"}),e(t.NumberField.Increment,{className:"NumberFieldIncrement",children:e(o,{})})]})]})})}},k={render:()=>{let r=u.useId();return e("div",{style:{width:"200px"},children:e(t.NumberField.Root,{id:r,defaultValue:50,className:"NumberFieldRoot",children:[e("label",{htmlFor:r,className:"NumberFieldLabel",children:"Volume"}),e(t.NumberField.Group,{className:"NumberFieldGroup",children:[e(t.NumberField.Decrement,{className:"NumberFieldDecrement",children:e(c,{})}),e(t.NumberField.Input,{className:"NumberFieldInput"}),e(t.NumberField.Increment,{className:"NumberFieldIncrement",children:e(o,{})})]})]})})}},B={render:()=>{let r=u.useId();return e("div",{style:{width:"200px"},children:e(t.NumberField.Root,{id:r,defaultValue:100,readOnly:!0,className:"NumberFieldRoot",children:[e(t.NumberField.ScrubArea,{className:"NumberFieldScrubArea",children:[e("label",{htmlFor:r,className:"NumberFieldLabel",children:"Read-only value"}),e(t.NumberField.ScrubAreaCursor,{className:"NumberFieldScrubAreaCursor",children:e(n,{})})]}),e(t.NumberField.Group,{className:"NumberFieldGroup",children:[e(t.NumberField.Decrement,{className:"NumberFieldDecrement",children:e(c,{})}),e(t.NumberField.Input,{className:"NumberFieldInput"}),e(t.NumberField.Increment,{className:"NumberFieldIncrement",children:e(o,{})})]})]})})}},O={render:()=>{let r=u.useId();return e("div",{style:{width:"200px"},children:e(t.NumberField.Root,{id:r,defaultValue:0,step:100,className:"NumberFieldRoot",children:[e(t.NumberField.ScrubArea,{className:"NumberFieldScrubArea",children:[e("label",{htmlFor:r,className:"NumberFieldLabel",children:"Budget (hundreds)"}),e(t.NumberField.ScrubAreaCursor,{className:"NumberFieldScrubAreaCursor",children:e(n,{})})]}),e(t.NumberField.Group,{className:"NumberFieldGroup",children:[e(t.NumberField.Decrement,{className:"NumberFieldDecrement",children:e(c,{})}),e(t.NumberField.Input,{className:"NumberFieldInput"}),e(t.NumberField.Increment,{className:"NumberFieldIncrement",children:e(o,{})})]})]})})}};var d=window.React,w=N||{},P=["Default","WithMinMax","WithStep","WithDecimals"];function j({id:r}){let l=F[r],a={...w.args||{},...l.args||{}};return(l.render||(m=>d.createElement(w.component,m)))(a,{args:a,id:r,name:r})}var H=P.map(r=>d.createElement("section",{key:r,className:"ds-story"},d.createElement("p",{className:"ds-story-name"},r.replace(/([a-z])([A-Z])/g,"$1 $2")),d.createElement("div",{className:"ds-story-body"},d.createElement(j,{id:r}))));window.ReactDOM.createRoot(document.getElementById("root")).render(d.createElement(d.Fragment,null,H));})();
+(()=>{var A=Object.create;var b=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var N=(t,o)=>()=>(o||t((o={exports:{}}).exports,o),o.exports),L=(t,o)=>{for(var u in o)b(t,u,{get:o[u],enumerable:!0})},D=(t,o,u,i)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of x(o))!g.call(t,n)&&n!==u&&b(t,n,{get:()=>o[n],enumerable:!(i=v(o,n))||i.enumerable});return t};var S=(t,o,u)=>(u=t!=null?A(f(t)):{},D(o||!t||!t.__esModule?b(u,"default",{value:t,enumerable:!0}):u,t));var R=N(($,h)=>{h.exports=window.React});var y=N((z,w)=>{w.exports=window.Loomiere});var F={};L(F,{Default:()=>G,Disabled:()=>W,LargeStep:()=>O,ReadOnly:()=>B,WithDecimals:()=>E,WithMinMax:()=>V,WithStep:()=>M,WithoutScrubArea:()=>k,default:()=>p});var d=S(R(),1),r=S(y(),1);var s=window.React;function e(t,o,u){let{children:i,...n}=o||{};return u!==void 0&&(n.key=u),i===void 0?s.createElement(t,n):Array.isArray(i)?s.createElement(t,n,...i):s.createElement(t,n,i)}var q=s.Fragment;var C={title:"Components/Lib/NumberField",component:r.NumberField.Root,parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},p=C;function a(t){return e("svg",{width:"26",height:"14",viewBox:"0 0 24 14",fill:"black",stroke:"white",xmlns:"http://www.w3.org/2000/svg",...t,children:e("path",{d:"M19.5 5.5L6.49737 5.51844V2L1 6.9999L6.5 12L6.49737 8.5L19.5 8.5V12L25 6.9999L19.5 2V5.5Z"})})}function l(t){return e("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",stroke:"currentcolor",strokeWidth:"1.6",xmlns:"http://www.w3.org/2000/svg",...t,children:e("path",{d:"M0 5H5M10 5H5M5 5V0M5 5V10"})})}function m(t){return e("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",stroke:"currentcolor",strokeWidth:"1.6",xmlns:"http://www.w3.org/2000/svg",...t,children:e("path",{d:"M0 5H10"})})}var G={render:()=>{let t=d.useId();return e("div",{style:{width:"200px"},children:e(r.NumberField.Root,{id:t,defaultValue:100,children:[e(r.NumberField.ScrubArea,{children:[e(r.NumberField.Label,{htmlFor:t,children:"Amount"}),e(r.NumberField.ScrubAreaCursor,{children:e(a,{})})]}),e(r.NumberField.Group,{children:[e(r.NumberField.Decrement,{children:e(m,{})}),e(r.NumberField.Input,{}),e(r.NumberField.Increment,{children:e(l,{})})]})]})})}},V={render:()=>{let t=d.useId();return e("div",{style:{width:"200px"},children:e(r.NumberField.Root,{id:t,defaultValue:5,min:0,max:10,children:[e(r.NumberField.ScrubArea,{children:[e(r.NumberField.Label,{htmlFor:t,children:"Rating (0-10)"}),e(r.NumberField.ScrubAreaCursor,{children:e(a,{})})]}),e(r.NumberField.Group,{children:[e(r.NumberField.Decrement,{children:e(m,{})}),e(r.NumberField.Input,{}),e(r.NumberField.Increment,{children:e(l,{})})]})]})})}},M={render:()=>{let t=d.useId();return e("div",{style:{width:"200px"},children:e(r.NumberField.Root,{id:t,defaultValue:0,step:5,children:[e(r.NumberField.ScrubArea,{children:[e(r.NumberField.Label,{htmlFor:t,children:"Amount (increments of 5)"}),e(r.NumberField.ScrubAreaCursor,{children:e(a,{})})]}),e(r.NumberField.Group,{children:[e(r.NumberField.Decrement,{children:e(m,{})}),e(r.NumberField.Input,{}),e(r.NumberField.Increment,{children:e(l,{})})]})]})})}},E={render:()=>{let t=d.useId();return e("div",{style:{width:"200px"},children:e(r.NumberField.Root,{id:t,defaultValue:0,step:.1,children:[e(r.NumberField.ScrubArea,{children:[e(r.NumberField.Label,{htmlFor:t,children:"Price"}),e(r.NumberField.ScrubAreaCursor,{children:e(a,{})})]}),e(r.NumberField.Group,{children:[e(r.NumberField.Decrement,{children:e(m,{})}),e(r.NumberField.Input,{}),e(r.NumberField.Increment,{children:e(l,{})})]})]})})}},W={render:()=>{let t=d.useId();return e("div",{style:{width:"200px"},children:e(r.NumberField.Root,{id:t,defaultValue:5,disabled:!0,children:[e(r.NumberField.ScrubArea,{children:[e(r.NumberField.Label,{htmlFor:t,children:"Disabled field"}),e(r.NumberField.ScrubAreaCursor,{children:e(a,{})})]}),e(r.NumberField.Group,{children:[e(r.NumberField.Decrement,{children:e(m,{})}),e(r.NumberField.Input,{}),e(r.NumberField.Increment,{children:e(l,{})})]})]})})}},k={render:()=>{let t=d.useId();return e("div",{style:{width:"200px"},children:e(r.NumberField.Root,{id:t,defaultValue:50,children:[e(r.NumberField.Label,{htmlFor:t,children:"Volume"}),e(r.NumberField.Group,{children:[e(r.NumberField.Decrement,{children:e(m,{})}),e(r.NumberField.Input,{}),e(r.NumberField.Increment,{children:e(l,{})})]})]})})}},B={render:()=>{let t=d.useId();return e("div",{style:{width:"200px"},children:e(r.NumberField.Root,{id:t,defaultValue:100,readOnly:!0,children:[e(r.NumberField.ScrubArea,{children:[e(r.NumberField.Label,{htmlFor:t,children:"Read-only value"}),e(r.NumberField.ScrubAreaCursor,{children:e(a,{})})]}),e(r.NumberField.Group,{children:[e(r.NumberField.Decrement,{children:e(m,{})}),e(r.NumberField.Input,{}),e(r.NumberField.Increment,{children:e(l,{})})]})]})})}},O={render:()=>{let t=d.useId();return e("div",{style:{width:"200px"},children:e(r.NumberField.Root,{id:t,defaultValue:0,step:100,children:[e(r.NumberField.ScrubArea,{children:[e(r.NumberField.Label,{htmlFor:t,children:"Budget (hundreds)"}),e(r.NumberField.ScrubAreaCursor,{children:e(a,{})})]}),e(r.NumberField.Group,{children:[e(r.NumberField.Decrement,{children:e(m,{})}),e(r.NumberField.Input,{}),e(r.NumberField.Increment,{children:e(l,{})})]})]})})}};var c=window.React,I=p||{},P=["Default","WithMinMax","WithStep","WithDecimals"];function j({id:t}){let o=F[t],u={...I.args||{},...o.args||{}};return(o.render||(n=>c.createElement(I.component,n)))(u,{args:u,id:t,name:t})}var H=P.map(t=>c.createElement("section",{key:t,className:"ds-story"},c.createElement("p",{className:"ds-story-name"},t.replace(/([a-z])([A-Z])/g,"$1 $2")),c.createElement("div",{className:"ds-story-body"},c.createElement(j,{id:t}))));window.ReactDOM.createRoot(document.getElementById("root")).render(c.createElement(c.Fragment,null,H));})();
 </script>
 </body>

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

@@ -2,7 +2,7 @@
 The Base UI OTPField styled by the theme. One-time code entry: a row of single-character inputs. Each slot is the same control as Input (Input.css styles .OTPFieldInput with the field pattern, hover, focus, disabled and error), cut into a square as tall as a control of the same size. data-size on the root picks the control size and the text tier of the same name, as on Input. No component tokens.
-Use `Loomiere.OTPField` (`import { OTPField } from '@base-ui/react/otpfield'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
+Use `Loomiere.OTPField`, this package's wrapper: it puts the class names on for you (`import { OTPField } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.OTPField`.
 Base UI docs: https://base-ui.com/react/components/otpfield
@@ -23,12 +23,12 @@ From the OTPField stories (`Default`):
 ```tsx
 export const Default: Story = {
   render: () => (
-    <Field.Root className="FieldRoot">
-      <Field.Label className="FieldLabel">Verification code</Field.Label>
-      <OTPField.Root length={6} className="OTPFieldRoot">
+    <Field.Root>
+      <Field.Label>Verification code</Field.Label>
+      <OTPField.Root length={6}>
         <Slots length={6} />
       </OTPField.Root>
-      <Field.Description className="FieldDescription">
+      <Field.Description>
         Enter the 6-digit code we sent to your phone.
       </Field.Description>
     </Field.Root>

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

@@ -12,7 +12,7 @@
 <body>
 <div id="root"></div>
 <script>
-(()=>{var P=Object.create;var m=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var F=(t,o)=>()=>(o||t((o={exports:{}}).exports,o),o.exports),w=(t,o)=>{for(var l in o)m(t,l,{get:o[l],enumerable:!0})},D=(t,o,l,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of S(o))!E.call(t,s)&&s!==l&&m(t,s,{get:()=>o[s],enumerable:!(r=T(o,s))||r.enumerable});return t};var R=(t,o,l)=>(l=t!=null?P(x(t)):{},D(o||!t||!t.__esModule?m(l,"default",{value:t,enumerable:!0}):l,t));var h=F((H,g)=>{g.exports=window.React});var y=F((_,f)=>{f.exports=window.Loomiere.Base});var N=F((Z,b)=>{b.exports=window.Loomiere.Base});var u={};w(u,{Controlled:()=>j,Default:()=>v,Disabled:()=>$,Grouped:()=>C,Invalid:()=>A,PlaceholderHints:()=>k,Sizes:()=>I,default:()=>p});var L=R(h(),1),a=R(y(),1),n=R(N(),1);var c=window.React;function e(t,o,l){let{children:r,...s}=o||{};return l!==void 0&&(s.key=l),r===void 0?c.createElement(t,s):Array.isArray(r)?c.createElement(t,s,...r):c.createElement(t,s,r)}var q=c.Fragment;var V={title:"Components/OTPField",component:n.OTPField.Root,args:{length:6},parameters:{layout:"centered"},tags:["autodocs"]},p=V;function i({length:t,from:o=0}){return Array.from({length:t},(l,r)=>e(n.OTPField.Input,{className:"OTPFieldInput","aria-label":o+r===0?void 0:`Character ${o+r+1}`},o+r))}var v={render:()=>e(a.Field.Root,{className:"FieldRoot",children:[e(a.Field.Label,{className:"FieldLabel",children:"Verification code"}),e(n.OTPField.Root,{length:6,className:"OTPFieldRoot",children:e(i,{length:6})}),e(a.Field.Description,{className:"FieldDescription",children:"Enter the 6-digit code we sent to your phone."})]})},C={render:()=>e(a.Field.Root,{className:"FieldRoot",children:[e(a.Field.Label,{className:"FieldLabel",children:"Backup code"}),e(n.OTPField.Root,{length:6,className:"OTPFieldRoot",children:[e(i,{length:3}),e(n.OTPField.Separator,{className:"OTPFieldSeparator"}),e(i,{length:3,from:3})]})]})},k={render:()=>e(a.Field.Root,{className:"FieldRoot",children:[e(a.Field.Label,{className:"FieldLabel",children:"Verification code"}),e(n.OTPField.Root,{length:4,className:"OTPFieldRoot",children:Array.from({length:4},(t,o)=>e(n.OTPField.Input,{className:"OTPFieldInput",placeholder:"\u2022","aria-label":o===0?void 0:`Character ${o+1}`},o))})]})},I={render:()=>e("div",{style:{display:"flex",flexDirection:"column",gap:"var(--sl-space-6)"},children:["sm","md","lg"].map(t=>e(a.Field.Root,{className:"FieldRoot",children:[e(a.Field.Label,{className:"FieldLabel",children:["Size ",t]}),e(n.OTPField.Root,{length:4,className:"OTPFieldRoot","data-size":t,children:e(i,{length:4})})]},t))})},A={render:()=>e(a.Field.Root,{className:"FieldRoot",invalid:!0,children:[e(a.Field.Label,{className:"FieldLabel",children:"Verification code"}),e(n.OTPField.Root,{length:6,className:"OTPFieldRoot",defaultValue:"482",children:e(i,{length:6})}),e(a.Field.Error,{className:"FieldError",match:!0,children:"That code didn't match. Check the message and try again."})]})},$={render:()=>e(a.Field.Root,{className:"FieldRoot",disabled:!0,children:[e(a.Field.Label,{className:"FieldLabel",children:"Verification code"}),e(n.OTPField.Root,{length:6,className:"OTPFieldRoot",defaultValue:"4821",children:e(i,{length:6})})]})},j={render:function(){let[o,l]=L.useState("");return e(a.Field.Root,{className:"FieldRoot",children:[e(a.Field.Label,{className:"FieldLabel",children:"Verification code"}),e(n.OTPField.Root,{length:6,className:"OTPFieldRoot",value:o,onValueChange:l,children:e(i,{length:6})}),e(a.Field.Description,{className:"FieldDescription",children:o.length===6?"Code complete.":`${6-o.length} characters left.`})]})}};var d=window.React,O=p||{},B=["Default","Grouped","PlaceholderHints","Sizes"];function z({id:t}){let o=u[t],l={...O.args||{},...o.args||{}};return(o.render||(s=>d.createElement(O.component,s)))(l,{args:l,id:t,name:t})}var M=B.map(t=>d.createElement("section",{key:t,className:"ds-story"},d.createElement("p",{className:"ds-story-name"},t.replace(/([a-z])([A-Z])/g,"$1 $2")),d.createElement("div",{className:"ds-story-body"},d.createElement(z,{id:t}))));window.ReactDOM.createRoot(document.getElementById("root")).render(d.createElement(d.Fragment,null,M));})();
+(()=>{var S=Object.create;var s=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var R=(t,o)=>()=>(o||t((o={exports:{}}).exports,o),o.exports),w=(t,o)=>{for(var n in o)s(t,n,{get:o[n],enumerable:!0})},P=(t,o,n,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of L(o))!O.call(t,l)&&l!==n&&s(t,l,{get:()=>o[l],enumerable:!(a=x(o,l))||a.enumerable});return t};var u=(t,o,n)=>(n=t!=null?S(E(t)):{},P(o||!t||!t.__esModule?s(n,"default",{value:t,enumerable:!0}):n,t));var h=R((N,g)=>{g.exports=window.React});var f=R((B,y)=>{y.exports=window.Loomiere});var p={};w(p,{Controlled:()=>$,Default:()=>D,Disabled:()=>A,Grouped:()=>V,Invalid:()=>k,PlaceholderHints:()=>v,Sizes:()=>C,default:()=>m});var F=u(h(),1),r=u(f(),1);var c=window.React;function e(t,o,n){let{children:a,...l}=o||{};return n!==void 0&&(l.key=n),a===void 0?c.createElement(t,l):Array.isArray(a)?c.createElement(t,l,...a):c.createElement(t,l,a)}var G=c.Fragment;var T={title:"Components/Lib/OTPField",component:r.OTPField.Root,args:{length:6},parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},m=T;function d({length:t,from:o=0}){return Array.from({length:t},(n,a)=>e(r.OTPField.Input,{"aria-label":o+a===0?void 0:`Character ${o+a+1}`},o+a))}var D={render:()=>e(r.Field.Root,{children:[e(r.Field.Label,{children:"Verification code"}),e(r.OTPField.Root,{length:6,children:e(d,{length:6})}),e(r.Field.Description,{children:"Enter the 6-digit code we sent to your phone."})]})},V={render:()=>e(r.Field.Root,{children:[e(r.Field.Label,{children:"Backup code"}),e(r.OTPField.Root,{length:6,children:[e(d,{length:3}),e(r.OTPField.Separator,{}),e(d,{length:3,from:3})]})]})},v={render:()=>e(r.Field.Root,{children:[e(r.Field.Label,{children:"Verification code"}),e(r.OTPField.Root,{length:4,children:Array.from({length:4},(t,o)=>e(r.OTPField.Input,{placeholder:"\u2022","aria-label":o===0?void 0:`Character ${o+1}`},o))})]})},C={render:()=>e("div",{style:{display:"flex",flexDirection:"column",gap:"var(--sl-space-6)"},children:["sm","md","lg"].map(t=>e(r.Field.Root,{children:[e(r.Field.Label,{children:["Size ",t]}),e(r.OTPField.Root,{length:4,"data-size":t,children:e(d,{length:4})})]},t))})},k={render:()=>e(r.Field.Root,{invalid:!0,children:[e(r.Field.Label,{children:"Verification code"}),e(r.OTPField.Root,{length:6,defaultValue:"482",children:e(d,{length:6})}),e(r.Field.Error,{match:!0,children:"That code didn't match. Check the message and try again."})]})},A={render:()=>e(r.Field.Root,{disabled:!0,children:[e(r.Field.Label,{children:"Verification code"}),e(r.OTPField.Root,{length:6,defaultValue:"4821",children:e(d,{length:6})})]})},$={render:function(){let[o,n]=F.useState("");return e(r.Field.Root,{children:[e(r.Field.Label,{children:"Verification code"}),e(r.OTPField.Root,{length:6,value:o,onValueChange:n,children:e(d,{length:6})}),e(r.Field.Description,{children:o.length===6?"Code complete.":`${6-o.length} characters left.`})]})}};var i=window.React,b=m||{},j=["Default","Grouped","PlaceholderHints","Sizes"];function I({id:t}){let o=p[t],n={...b.args||{},...o.args||{}};return(o.render||(l=>i.createElement(b.component,l)))(n,{args:n,id:t,name:t})}var z=j.map(t=>i.createElement("section",{key:t,className:"ds-story"},i.createElement("p",{className:"ds-story-name"},t.replace(/([a-z])([A-Z])/g,"$1 $2")),i.createElement("div",{className:"ds-story-body"},i.createElement(I,{id:t}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,z));})();
 </script>
 </body>

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

@@ -2,7 +2,7 @@
 The Base UI Popover styled by the theme.
-Use `Loomiere.Popover` (`import { Popover } from '@base-ui/react/popover'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
+Use `Loomiere.Popover`, this package's wrapper: it puts the class names on for you (`import { Popover } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.Popover`.
 Base UI docs: https://base-ui.com/react/components/popover
@@ -32,17 +32,17 @@ From the Popover stories (`Default`):
 export const Default: Story = {
   render: () => (
     <Popover.Root>
-      <Popover.Trigger className="PopoverTrigger Button" aria-label="Notifications">
+      <Popover.Trigger className="Button" aria-label="Notifications">
         <BellIcon aria-hidden="true" />
       </Popover.Trigger>
       <Popover.Portal>
-        <Popover.Positioner className="PopoverPositioner" sideOffset={8}>
-          <Popover.Popup className="PopoverPopup">
-            <Popover.Arrow className="PopoverArrow">
+        <Popover.Positioner sideOffset={8}>
+          <Popover.Popup>
+            <Popover.Arrow>
               <ArrowSvg />
             </Popover.Arrow>
-            <Popover.Title className="PopoverTitle">Notifications</Popover.Title>
-            <Popover.Description className="PopoverDescription">
+            <Popover.Title>Notifications</Popover.Title>
+            <Popover.Description>
               You are all caught up. Good job!
             </Popover.Description>
           </Popover.Popup>

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

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

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

@@ -2,7 +2,7 @@
 The Base UI PreviewCard styled by the theme. The popup concept (surface, arrow, motion) with a title-magnify title and condense description. Only its min and max width are its own (tokens/component/preview-card.json).
-Use `Loomiere.PreviewCard` (`import { PreviewCard } from '@base-ui/react/preview-card'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
+Use `Loomiere.PreviewCard`, this package's wrapper: it puts the class names on for you (`import { PreviewCard } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.PreviewCard`.
 Base UI docs: https://base-ui.com/react/components/preview-card
@@ -36,30 +36,28 @@ export const Default: Story = {
         The principles of good{' '}
         <PreviewCard.Root>
           <PreviewCard.Trigger
-            className="PreviewCardTrigger"
             href="https://en.wikipedia.org/wiki/Typography"
           >
             typography
           </PreviewCard.Trigger>
           <PreviewCard.Portal>
-            <PreviewCard.Positioner className="PreviewCardPositioner" sideOffset={8}>
-              <PreviewCard.Popup className="PreviewCardPopup">
-                <PreviewCard.Arrow className="PreviewCardArrow">
+            <PreviewCard.Positioner sideOffset={8}>
+              <PreviewCard.Popup>
+                <PreviewCard.Arrow>
                   <ArrowSvg />
                 </PreviewCard.Arrow>
-                <img
+                <PreviewCard.Image
                   width="448"
                   height="300"
-                  className="PreviewCardImage"
                   src="https://images.unsplash.com/photo-1619615391095-dfa29e1672ef?q=80&w=448&h=300"
                   alt="Station Hofplein signage in Rotterdam, Netherlands"
                 />
-                <div className="PreviewCardContent">
-                  <p className="PreviewCardDescription">
+                <PreviewCard.Content>
+                  <PreviewCard.Description>
                     <strong>Typography</strong> is the art and science of arranging type to make written
                     language clear, visually appealing, and effective in communication.
-                  </p>
-                </div>
+                  </PreviewCard.Description>
+                </PreviewCard.Content>
               </PreviewCard.Popup>
             </PreviewCard.Positioner>
           </PreviewCard.Portal>