@scattered-light/loomiere-base-ui 0.1.0 → 0.2.0

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

@@ -0,0 +1,148 @@
+# NavigationMenu
+
+The Base UI NavigationMenu styled by the theme. The strip is the bar concept, the panel is the popup concept and each link is an item row with a title and description. Only the panel sizes are its own (tokens/component/navigation-menu.json). The panel slides between triggers on the slow duration with the out easing.
+
+Use `Loomiere.NavigationMenu`, this package's wrapper: it puts the class names on for you (`import { NavigationMenu } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.NavigationMenu`.
+
+Base UI docs: https://base-ui.com/react/components/navigation-menu
+
+## Classes
+
+| Class | Data attributes it answers to |
+|---|---|
+| `NavigationMenuRoot` |   |
+| `NavigationMenuList` |   |
+| `NavigationMenuTrigger` | `data-popup-open` |
+| `NavigationMenuIcon` | `data-popup-open` |
+| `NavigationMenuPositioner` | `data-side`: `top`, `bottom`, `left`, `right`; `data-instant` |
+| `NavigationMenuPopup` | `data-starting-style`; `data-ending-style` |
+| `NavigationMenuViewport` |   |
+| `NavigationMenuContent` | `data-starting-style`; `data-ending-style`; `data-activation-direction`: `left`, `right` |
+| `NavigationMenuLinkList` | `data-columns`: `1`, `2`, `3` |
+| `NavigationMenuSections` | `data-columns`: `2`, `3` |
+| `NavigationMenuLink` |   |
+| `NavigationMenuLinkTitle` |   |
+| `NavigationMenuLinkDescription` |   |
+| `NavigationMenuSection` |   |
+| `NavigationMenuSectionHeading` |   |
+| `NavigationMenuArrow` | `data-side`: `top`, `bottom`, `left`, `right` |
+| `NavigationMenuArrowFill` |   |
+| `NavigationMenuArrowOuterStroke` |   |
+| `NavigationMenuArrowInnerStroke` |   |
+| `NavigationMenuSeparator` |   |
+
+Base UI sets the state attributes (`data-checked`, `data-open`, `data-disabled`...) itself. Set `data-size`, `data-emphasis`, `data-variant` and `data-color` yourself; `data-color` takes any palette name (`primary`, `secondary`, `error`...) and repaints the part in it.
+
+## Example
+
+From the NavigationMenu stories (`Default`):
+
+```tsx
+export const Default: Story = {
+  render: () => (
+    <NavigationMenu.Root>
+      <NavigationMenu.List>
+        <NavigationMenu.Item>
+          <NavigationMenu.Trigger>
+            Products
+            <NavigationMenu.Icon>
+              <ChevronDownIcon />
+            </NavigationMenu.Icon>
+          </NavigationMenu.Trigger>
+          <NavigationMenu.Content>
+            <ul className="NavigationMenuLinkList" data-columns="2">
+              {productLinks.map((item) => (
+                <li key={item.href}>
+                  <Link href={item.href}>
+                    <h3 className="NavigationMenuLinkTitle">{item.title}</h3>
+                    <p className="NavigationMenuLinkDescription">{item.description}</p>
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </NavigationMenu.Content>
+        </NavigationMenu.Item>
+
+        <NavigationMenu.Item>
+          <NavigationMenu.Trigger>
+            Resources
+            <NavigationMenu.Icon>
+              <ChevronDownIcon />
+            </NavigationMenu.Icon>
+          </NavigationMenu.Trigger>
+          <NavigationMenu.Content>
+            <ul className="NavigationMenuLinkList" data-columns="1">
+              {resourceLinks.map((item) => (
+                <li key={item.href}>
+                  <Link href={item.href}>
+                    <h3 className="NavigationMenuLinkTitle">{item.title}</h3>
+                    <p className="NavigationMenuLinkDescription">{item.description}</p>
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </NavigationMenu.Content>
+        </NavigationMenu.Item>
+
+        <NavigationMenu.Item>
+          <Link className="NavigationMenuTrigger" href="#pricing">
+            Pricing
+          </Link>
+        </NavigationMenu.Item>
+      </NavigationMenu.List>
+
+      <NavigationMenu.Portal>
+        <NavigationMenu.Positioner
+          sideOffset={10}
+          collisionPadding={{ top: 10, bottom: 10, left: 20, right: 20 }}
+        >
+          <NavigationMenu.Popup>
+            <NavigationMenu.Arrow>
+              <ArrowSvg />
+            </NavigationMenu.Arrow>
+            <NavigationMenu.Viewport />
+          </NavigationMenu.Popup>
+        </NavigationMenu.Positioner>
+      </NavigationMenu.Portal>
+    </NavigationMenu.Root>
+  ),
+};
+
+const companyAboutLinks = [
+  {
+    href: '#story',
+    title: 'Our Story',
+    description: 'Learn about our mission and values',
+  },
+  {
+    href: '#team',
+    title: 'Team',
+    description: 'Meet the people behind the product',
+  },
+  {
+    href: '#careers',
+    title: 'Careers',
+    description: 'Join our growing team',
+  },
+] as const;
+
+const companyConnectLinks = [
+  {
+    href: '#contact',
+    title: 'Contact',
+    description: 'Get in touch with us',
+  },
+  {
+    href: '#support',
+    title: 'Support',
+    description: "We're here to help",
+  },
+  {
+    href: '#community',
+    title: 'Community',
+    description: 'Join our community forum',
+  },
+] as const;
+```
+
+The preview also shows `WithSections`, `ThreeColumns`, `WithSeparator`.

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

@@ -0,0 +1,19 @@
+<!-- @dsCard group="Navigation" height=480 subtitle="Default / WithSections / ThreeColumns / WithSeparator" -->
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+  body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
+  #root { display: grid; gap: var(--sl-space-5, 20px); }
+  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
+</style>
+</head>
+<body>
+<div id="root"></div>
+<script>
+(()=>{var f=Object.create;var N=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var C=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),I=(t,n)=>{for(var a in n)N(t,a,{get:n[a],enumerable:!0})},P=(t,n,a,l)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of k(n))!w.call(t,r)&&r!==a&&N(t,r,{get:()=>n[r],enumerable:!(l=L(n,r))||l.enumerable});return t};var S=(t,n,a)=>(a=t!=null?f(y(t)):{},P(n||!t||!t.__esModule?N(a,"default",{value:t,enumerable:!0}):a,t));var M=C((J,h)=>{h.exports=window.Loomiere});var v={};I(v,{Default:()=>D,MixedItems:()=>F,ThreeColumns:()=>W,WithSections:()=>H,WithSeparator:()=>B,default:()=>m});var i=S(M(),1);var p=window.React;function e(t,n,a){let{children:l,...r}=n||{};return a!==void 0&&(r.key=a),l===void 0?p.createElement(t,r):Array.isArray(l)?p.createElement(t,r,...l):p.createElement(t,r,l)}var K=p.Fragment;var T={title:"Components/Lib/NavigationMenu",component:i.NavigationMenu.Root,parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},m=T;function o(t){return e(i.NavigationMenu.Link,{render:e("a",{}),...t})}function c(t){return e("svg",{width:"10",height:"10",viewBox:"0 0 10 10",fill:"none",...t,children:e("path",{d:"M1 3.5L5 7.5L9 3.5",stroke:"currentcolor",strokeWidth:"1.5"})})}function g(t){return e("svg",{width:"20",height:"10",viewBox:"0 0 20 10",fill:"none",...t,children:[e("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:"NavigationMenuArrowFill"}),e("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:"NavigationMenuArrowOuterStroke"}),e("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:"NavigationMenuArrowInnerStroke"})]})}var R=[{href:"#analytics",title:"Analytics",description:"Get insights into your data with powerful analytics tools"},{href:"#automation",title:"Automation",description:"Automate your workflows and save time"},{href:"#collaboration",title:"Collaboration",description:"Work together seamlessly with your team"},{href:"#security",title:"Security",description:"Enterprise-grade security for your peace of mind"}],A=[{href:"#documentation",title:"Documentation",description:"Learn how to integrate our tools"},{href:"#api",title:"API Reference",description:"Complete API documentation"},{href:"#guides",title:"Guides",description:"Step-by-step tutorials"}],D={render:()=>e(i.NavigationMenu.Root,{children:[e(i.NavigationMenu.List,{children:[e(i.NavigationMenu.Item,{children:[e(i.NavigationMenu.Trigger,{children:["Products",e(i.NavigationMenu.Icon,{children:e(c,{})})]}),e(i.NavigationMenu.Content,{children:e("ul",{className:"NavigationMenuLinkList","data-columns":"2",children:R.map(t=>e("li",{children:e(o,{href:t.href,children:[e("h3",{className:"NavigationMenuLinkTitle",children:t.title}),e("p",{className:"NavigationMenuLinkDescription",children:t.description})]})},t.href))})})]}),e(i.NavigationMenu.Item,{children:[e(i.NavigationMenu.Trigger,{children:["Resources",e(i.NavigationMenu.Icon,{children:e(c,{})})]}),e(i.NavigationMenu.Content,{children:e("ul",{className:"NavigationMenuLinkList","data-columns":"1",children:A.map(t=>e("li",{children:e(o,{href:t.href,children:[e("h3",{className:"NavigationMenuLinkTitle",children:t.title}),e("p",{className:"NavigationMenuLinkDescription",children:t.description})]})},t.href))})})]}),e(i.NavigationMenu.Item,{children:e(o,{className:"NavigationMenuTrigger",href:"#pricing",children:"Pricing"})})]}),e(i.NavigationMenu.Portal,{children:e(i.NavigationMenu.Positioner,{sideOffset:10,collisionPadding:{top:10,bottom:10,left:20,right:20},children:e(i.NavigationMenu.Popup,{children:[e(i.NavigationMenu.Arrow,{children:e(g,{})}),e(i.NavigationMenu.Viewport,{})]})})})]})},b=[{href:"#story",title:"Our Story",description:"Learn about our mission and values"},{href:"#team",title:"Team",description:"Meet the people behind the product"},{href:"#careers",title:"Careers",description:"Join our growing team"}],x=[{href:"#contact",title:"Contact",description:"Get in touch with us"},{href:"#support",title:"Support",description:"We're here to help"},{href:"#community",title:"Community",description:"Join our community forum"}],H={render:()=>e(i.NavigationMenu.Root,{children:[e(i.NavigationMenu.List,{children:e(i.NavigationMenu.Item,{children:[e(i.NavigationMenu.Trigger,{children:["Company",e(i.NavigationMenu.Icon,{children:e(c,{})})]}),e(i.NavigationMenu.Content,{children:e("div",{className:"NavigationMenuSections","data-columns":"2",children:[e("div",{className:"NavigationMenuSection",children:[e("h3",{className:"NavigationMenuSectionHeading",children:"About"}),e("ul",{className:"NavigationMenuLinkList","data-columns":"1",children:b.map(t=>e("li",{children:e(o,{href:t.href,children:[e("h4",{className:"NavigationMenuLinkTitle",children:t.title}),e("p",{className:"NavigationMenuLinkDescription",children:t.description})]})},t.href))})]}),e("div",{className:"NavigationMenuSection",children:[e("h3",{className:"NavigationMenuSectionHeading",children:"Connect"}),e("ul",{className:"NavigationMenuLinkList","data-columns":"1",children:x.map(t=>e("li",{children:e(o,{href:t.href,children:[e("h4",{className:"NavigationMenuLinkTitle",children:t.title}),e("p",{className:"NavigationMenuLinkDescription",children:t.description})]})},t.href))})]})]})})]})}),e(i.NavigationMenu.Portal,{children:e(i.NavigationMenu.Positioner,{sideOffset:10,children:e(i.NavigationMenu.Popup,{children:[e(i.NavigationMenu.Arrow,{children:e(g,{})}),e(i.NavigationMenu.Viewport,{})]})})})]})},E=[{href:"#enterprise",title:"Enterprise",description:"Solutions for large organizations"},{href:"#small-business",title:"Small Business",description:"Perfect for growing teams"}],O=[{href:"#api",title:"API",description:"Build custom integrations"},{href:"#sdks",title:"SDKs",description:"Tools for every platform"}],V=[{href:"#collaboration",title:"Collaboration",description:"Work together effectively"},{href:"#project-management",title:"Project Management",description:"Keep projects on track"}],W={render:()=>e(i.NavigationMenu.Root,{children:[e(i.NavigationMenu.List,{children:e(i.NavigationMenu.Item,{children:[e(i.NavigationMenu.Trigger,{children:["Solutions",e(i.NavigationMenu.Icon,{children:e(c,{})})]}),e(i.NavigationMenu.Content,{children:e("div",{className:"NavigationMenuSections","data-columns":"3",children:[e("div",{className:"NavigationMenuSection",children:[e("h3",{className:"NavigationMenuSectionHeading",children:"For Business"}),e("ul",{className:"NavigationMenuLinkList","data-columns":"1",children:E.map(t=>e("li",{children:e(o,{href:t.href,children:[e("h4",{className:"NavigationMenuLinkTitle",children:t.title}),e("p",{className:"NavigationMenuLinkDescription",children:t.description})]})},t.href))})]}),e("div",{className:"NavigationMenuSection",children:[e("h3",{className:"NavigationMenuSectionHeading",children:"For Developers"}),e("ul",{className:"NavigationMenuLinkList","data-columns":"1",children:O.map(t=>e("li",{children:e(o,{href:t.href,children:[e("h4",{className:"NavigationMenuLinkTitle",children:t.title}),e("p",{className:"NavigationMenuLinkDescription",children:t.description})]})},t.href))})]}),e("div",{className:"NavigationMenuSection",children:[e("h3",{className:"NavigationMenuSectionHeading",children:"For Teams"}),e("ul",{className:"NavigationMenuLinkList","data-columns":"1",children:V.map(t=>e("li",{children:e(o,{href:t.href,children:[e("h4",{className:"NavigationMenuLinkTitle",children:t.title}),e("p",{className:"NavigationMenuLinkDescription",children:t.description})]})},t.href))})]})]})})]})}),e(i.NavigationMenu.Portal,{children:e(i.NavigationMenu.Positioner,{sideOffset:10,children:e(i.NavigationMenu.Popup,{children:[e(i.NavigationMenu.Arrow,{children:e(g,{})}),e(i.NavigationMenu.Viewport,{})]})})})]})},s=[{href:"#help-center",title:"Help Center",description:"Find answers to common questions"},{href:"#tutorials",title:"Video Tutorials",description:"Watch and learn"},{href:"#support",title:"Contact Support",description:"Get help from our team"},{href:"#bug",title:"Report a Bug",description:"Help us improve"}],B={render:()=>e(i.NavigationMenu.Root,{children:[e(i.NavigationMenu.List,{children:e(i.NavigationMenu.Item,{children:[e(i.NavigationMenu.Trigger,{children:["Help",e(i.NavigationMenu.Icon,{children:e(c,{})})]}),e(i.NavigationMenu.Content,{children:e("ul",{className:"NavigationMenuLinkList","data-columns":"1",children:[e("li",{children:e(o,{href:s[0].href,children:[e("h3",{className:"NavigationMenuLinkTitle",children:s[0].title}),e("p",{className:"NavigationMenuLinkDescription",children:s[0].description})]})}),e("li",{children:e(o,{href:s[1].href,children:[e("h3",{className:"NavigationMenuLinkTitle",children:s[1].title}),e("p",{className:"NavigationMenuLinkDescription",children:s[1].description})]})}),e("li",{children:e("hr",{className:"NavigationMenuSeparator"})}),e("li",{children:e(o,{href:s[2].href,children:[e("h3",{className:"NavigationMenuLinkTitle",children:s[2].title}),e("p",{className:"NavigationMenuLinkDescription",children:s[2].description})]})}),e("li",{children:e(o,{href:s[3].href,children:[e("h3",{className:"NavigationMenuLinkTitle",children:s[3].title}),e("p",{className:"NavigationMenuLinkDescription",children:s[3].description})]})})]})})]})}),e(i.NavigationMenu.Portal,{children:e(i.NavigationMenu.Positioner,{sideOffset:10,children:e(i.NavigationMenu.Popup,{children:[e(i.NavigationMenu.Arrow,{children:e(g,{})}),e(i.NavigationMenu.Viewport,{})]})})})]})},F={render:()=>e(i.NavigationMenu.Root,{children:[e(i.NavigationMenu.List,{children:[e(i.NavigationMenu.Item,{children:[e(i.NavigationMenu.Trigger,{children:["Features",e(i.NavigationMenu.Icon,{children:e(c,{})})]}),e(i.NavigationMenu.Content,{children:e("ul",{className:"NavigationMenuLinkList","data-columns":"2",children:[e("li",{children:e(o,{href:"#dashboard",children:[e("h3",{className:"NavigationMenuLinkTitle",children:"Dashboard"}),e("p",{className:"NavigationMenuLinkDescription",children:"Overview of your workspace"})]})}),e("li",{children:e(o,{href:"#reports",children:[e("h3",{className:"NavigationMenuLinkTitle",children:"Reports"}),e("p",{className:"NavigationMenuLinkDescription",children:"Generate detailed reports"})]})})]})})]}),e(i.NavigationMenu.Item,{children:e(o,{className:"NavigationMenuTrigger",href:"#about",children:"About"})}),e(i.NavigationMenu.Item,{children:e(o,{className:"NavigationMenuTrigger",href:"#blog",children:"Blog"})}),e(i.NavigationMenu.Item,{children:[e(i.NavigationMenu.Trigger,{children:["More",e(i.NavigationMenu.Icon,{children:e(c,{})})]}),e(i.NavigationMenu.Content,{children:e("ul",{className:"NavigationMenuLinkList","data-columns":"1",children:[e("li",{children:e(o,{href:"#changelog",children:[e("h3",{className:"NavigationMenuLinkTitle",children:"Changelog"}),e("p",{className:"NavigationMenuLinkDescription",children:"See what's new"})]})}),e("li",{children:e(o,{href:"#roadmap",children:[e("h3",{className:"NavigationMenuLinkTitle",children:"Roadmap"}),e("p",{className:"NavigationMenuLinkDescription",children:"What we're building next"})]})})]})})]})]}),e(i.NavigationMenu.Portal,{children:e(i.NavigationMenu.Positioner,{sideOffset:10,children:e(i.NavigationMenu.Popup,{children:[e(i.NavigationMenu.Arrow,{children:e(g,{})}),e(i.NavigationMenu.Viewport,{})]})})})]})};var u=window.React,d=m||{},j=["Default","WithSections","ThreeColumns","WithSeparator"];function G({id:t}){let n=v[t],a={...d.args||{},...n.args||{}};return(n.render||(r=>u.createElement(d.component,r)))(a,{args:a,id:t,name:t})}var Z=j.map(t=>u.createElement("section",{key:t,className:"ds-story"},u.createElement("p",{className:"ds-story-name"},t.replace(/([a-z])([A-Z])/g,"$1 $2")),u.createElement("div",{className:"ds-story-body"},u.createElement(G,{id:t}))));window.ReactDOM.createRoot(document.getElementById("root")).render(u.createElement(u.Fragment,null,Z));})();
+
+</script>
+</body>
+</html>

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

@@ -0,0 +1,58 @@
+# NumberField
+
+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.
+
+Base UI docs: https://base-ui.com/react/components/number-field
+
+## Classes
+
+| Class | Data attributes it answers to |
+|---|---|
+| `NumberFieldRoot` |   |
+| `NumberFieldGroup` |   |
+| `NumberFieldInput` |   |
+| `NumberFieldIncrement` |   |
+| `NumberFieldDecrement` |   |
+| `NumberFieldScrubArea` | `data-scrubbing` |
+
+Base UI sets the state attributes (`data-checked`, `data-open`, `data-disabled`...) itself. Set `data-size`, `data-emphasis`, `data-variant` and `data-color` yourself; `data-color` takes any palette name (`primary`, `secondary`, `error`...) and repaints the part in it.
+
+## Example
+
+From the NumberField stories (`Default`):
+
+```tsx
+export const Default: Story = {
+  render: () => {
+    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">
+              Amount
+            </label>
+            <NumberField.ScrubAreaCursor className="NumberFieldScrubAreaCursor">
+              <CursorGrowIcon />
+            </NumberField.ScrubAreaCursor>
+          </NumberField.ScrubArea>
+
+          <NumberField.Group className="NumberFieldGroup">
+            <NumberField.Decrement className="NumberFieldDecrement">
+              <MinusIcon />
+            </NumberField.Decrement>
+            <NumberField.Input className="NumberFieldInput" />
+            <NumberField.Increment className="NumberFieldIncrement">
+              <PlusIcon />
+            </NumberField.Increment>
+          </NumberField.Group>
+        </NumberField.Root>
+      </div>
+    );
+  },
+};
+```
+
+The preview also shows `WithMinMax`, `WithStep`, `WithDecimals`.

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

@@ -0,0 +1,19 @@
+<!-- @dsCard group="Forms" height=480 subtitle="Default / WithMinMax / WithStep / WithDecimals" -->
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+  body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
+  #root { display: grid; gap: var(--sl-space-5, 20px); }
+  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
+</style>
+</head>
+<body>
+<div id="root"></div>
+<script>
+(()=>{var 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));})();
+
+</script>
+</body>
+</html>

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

@@ -0,0 +1,39 @@
+# OTPField
+
+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.
+
+Base UI docs: https://base-ui.com/react/components/otpfield
+
+## Classes
+
+| Class | Data attributes it answers to |
+|---|---|
+| `OTPFieldRoot` | `data-size`: `sm`, `lg` |
+| `OTPFieldInput` |   |
+| `OTPFieldSeparator` |   |
+
+Base UI sets the state attributes (`data-checked`, `data-open`, `data-disabled`...) itself. Set `data-size`, `data-emphasis`, `data-variant` and `data-color` yourself; `data-color` takes any palette name (`primary`, `secondary`, `error`...) and repaints the part in it.
+
+## Example
+
+From the 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">
+        <Slots length={6} />
+      </OTPField.Root>
+      <Field.Description className="FieldDescription">
+        Enter the 6-digit code we sent to your phone.
+      </Field.Description>
+    </Field.Root>
+  ),
+};
+```
+
+The preview also shows `Grouped`, `PlaceholderHints`, `Sizes`.

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

@@ -0,0 +1,19 @@
+<!-- @dsCard group="Forms" height=480 subtitle="Default / Grouped / PlaceholderHints / Sizes" -->
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+  body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
+  #root { display: grid; gap: var(--sl-space-5, 20px); }
+  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
+</style>
+</head>
+<body>
+<div id="root"></div>
+<script>
+(()=>{var 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));})();
+
+</script>
+</body>
+</html>

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

@@ -0,0 +1,56 @@
+# Popover
+
+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.
+
+Base UI docs: https://base-ui.com/react/components/popover
+
+## Classes
+
+| Class | Data attributes it answers to |
+|---|---|
+| `PopoverTrigger` |   |
+| `PopoverBackdrop` |   |
+| `PopoverPositioner` |   |
+| `PopoverPopup` | `data-starting-style`; `data-ending-style` |
+| `PopoverTitle` |   |
+| `PopoverDescription` |   |
+| `PopoverClose` |   |
+| `PopoverArrow` | `data-side`: `top`, `bottom`, `left`, `right` |
+| `PopoverArrowFill` |   |
+| `PopoverArrowOuterStroke` |   |
+| `PopoverArrowInnerStroke` |   |
+
+Base UI sets the state attributes (`data-checked`, `data-open`, `data-disabled`...) itself. Set `data-size`, `data-emphasis`, `data-variant` and `data-color` yourself; `data-color` takes any palette name (`primary`, `secondary`, `error`...) and repaints the part in it.
+
+## Example
+
+From the Popover stories (`Default`):
+
+```tsx
+export const Default: Story = {
+  render: () => (
+    <Popover.Root>
+      <Popover.Trigger className="PopoverTrigger Button">
+        <BellIcon aria-label="Notifications" />
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Positioner className="PopoverPositioner" sideOffset={8}>
+          <Popover.Popup className="PopoverPopup">
+            <Popover.Arrow className="PopoverArrow">
+              <ArrowSvg />
+            </Popover.Arrow>
+            <Popover.Title className="PopoverTitle">Notifications</Popover.Title>
+            <Popover.Description className="PopoverDescription">
+              You are all caught up. Good job!
+            </Popover.Description>
+          </Popover.Popup>
+        </Popover.Positioner>
+      </Popover.Portal>
+    </Popover.Root>
+  ),
+};
+```
+
+The preview also shows `WithCloseButton`, `WithForm`, `Placement`.

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

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

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

@@ -0,0 +1,74 @@
+# PreviewCard
+
+The Base UI PreviewCard styled by the theme. The popup concept (surface, arrow, motion) with a maximize-lg title and condense description. Only its min and max width are its own (tokens/component/preview-card.json).
+
+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.
+
+Base UI docs: https://base-ui.com/react/components/preview-card
+
+## Classes
+
+| Class | Data attributes it answers to |
+|---|---|
+| `PreviewCardTrigger` |   |
+| `PreviewCardPositioner` |   |
+| `PreviewCardPopup` | `data-starting-style`; `data-ending-style` |
+| `PreviewCardImage` |   |
+| `PreviewCardContent` |   |
+| `PreviewCardTitle` |   |
+| `PreviewCardDescription` |   |
+| `PreviewCardArrow` | `data-side`: `top`, `bottom`, `left`, `right` |
+| `PreviewCardArrowFill` |   |
+| `PreviewCardArrowOuterStroke` |   |
+| `PreviewCardArrowInnerStroke` |   |
+
+Base UI sets the state attributes (`data-checked`, `data-open`, `data-disabled`...) itself. Set `data-size`, `data-emphasis`, `data-variant` and `data-color` yourself; `data-color` takes any palette name (`primary`, `secondary`, `error`...) and repaints the part in it.
+
+## Example
+
+From the PreviewCard stories (`Default`):
+
+```tsx
+export const Default: Story = {
+  render: () => (
+    <div style={{ padding: '100px' }}>
+      <p style={{ fontSize: '16px', lineHeight: '1.6', maxWidth: '600px' }}>
+        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">
+                  <ArrowSvg />
+                </PreviewCard.Arrow>
+                <img
+                  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">
+                    <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.Popup>
+            </PreviewCard.Positioner>
+          </PreviewCard.Portal>
+        </PreviewCard.Root>{' '}
+        remain into the digital age.
+      </p>
+    </div>
+  ),
+};
+```
+
+The preview also shows `WithTitle`, `TextOnly`, `MultipleLinks`.

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

@@ -0,0 +1,19 @@
+<!-- @dsCard group="Overlays" height=480 subtitle="Default / WithTitle / TextOnly / MultipleLinks" -->
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+  body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
+  #root { display: grid; gap: var(--sl-space-5, 20px); }
+  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
+</style>
+</head>
+<body>
+<div id="root"></div>
+<script>
+(()=>{var C=Object.create;var l=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var N=(i,a)=>()=>(a||i((a={exports:{}}).exports,a),a.exports),y=(i,a)=>{for(var t in a)l(i,t,{get:a[t],enumerable:!0})},T=(i,a,t,s)=>{if(a&&typeof a=="object"||typeof a=="function")for(let o of h(a))!f.call(i,o)&&o!==t&&l(i,o,{get:()=>a[o],enumerable:!(s=g(a,o))||s.enumerable});return i};var x=(i,a,t)=>(t=i!=null?C(u(i)):{},T(a||!i||!i.__esModule?l(t,"default",{value:i,enumerable:!0}):t,i));var c=N((E,v)=>{v.exports=window.Loomiere.Base});var w={};y(w,{Default:()=>S,DifferentPlacements:()=>b,MultipleLinks:()=>L,TextOnly:()=>k,WithTitle:()=>R,default:()=>P});var r=x(c(),1);var p=window.React;function e(i,a,t){let{children:s,...o}=a||{};return t!==void 0&&(o.key=t),s===void 0?p.createElement(i,o):Array.isArray(s)?p.createElement(i,o,...s):p.createElement(i,o,s)}var W=p.Fragment;var A={title:"Components/PreviewCard",component:r.PreviewCard.Root,parameters:{layout:"centered"},tags:["autodocs"]},P=A;function d(i){return e("svg",{width:"20",height:"10",viewBox:"0 0 20 10",fill:"none",...i,children:[e("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:"PreviewCardArrowFill"}),e("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:"PreviewCardArrowOuterStroke"}),e("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:"PreviewCardArrowInnerStroke"})]})}var S={render:()=>e("div",{style:{padding:"100px"},children:e("p",{style:{fontSize:"16px",lineHeight:"1.6",maxWidth:"600px"},children:["The principles of good"," ",e(r.PreviewCard.Root,{children:[e(r.PreviewCard.Trigger,{className:"PreviewCardTrigger",href:"https://en.wikipedia.org/wiki/Typography",children:"typography"}),e(r.PreviewCard.Portal,{children:e(r.PreviewCard.Positioner,{className:"PreviewCardPositioner",sideOffset:8,children:e(r.PreviewCard.Popup,{className:"PreviewCardPopup",children:[e(r.PreviewCard.Arrow,{className:"PreviewCardArrow",children:e(d,{})}),e("img",{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"}),e("div",{className:"PreviewCardContent",children:e("p",{className:"PreviewCardDescription",children:[e("strong",{children:"Typography"})," is the art and science of arranging type to make written language clear, visually appealing, and effective in communication."]})})]})})})]})," ","remain into the digital age."]})})},R={render:()=>e("div",{style:{padding:"100px"},children:e("p",{style:{fontSize:"16px",lineHeight:"1.6",maxWidth:"600px"},children:["Learn more about"," ",e(r.PreviewCard.Root,{children:[e(r.PreviewCard.Trigger,{className:"PreviewCardTrigger",href:"https://en.wikipedia.org/wiki/Design",children:"design principles"}),e(r.PreviewCard.Portal,{children:e(r.PreviewCard.Positioner,{className:"PreviewCardPositioner",sideOffset:8,children:e(r.PreviewCard.Popup,{className:"PreviewCardPopup",children:[e(r.PreviewCard.Arrow,{className:"PreviewCardArrow",children:e(d,{})}),e("img",{width:"448",height:"300",className:"PreviewCardImage",src:"https://images.unsplash.com/photo-1561070791-2526d30994b5?q=80&w=448&h=300",alt:"Design workspace"}),e("div",{className:"PreviewCardContent",children:[e("h3",{className:"PreviewCardTitle",children:"Design Principles"}),e("p",{className:"PreviewCardDescription",children:"Fundamental guidelines that help designers create effective, aesthetically pleasing, and functional designs across various mediums."})]})]})})})]})," ","in modern web development."]})})},k={render:()=>e("div",{style:{padding:"100px"},children:e("p",{style:{fontSize:"16px",lineHeight:"1.6",maxWidth:"600px"},children:["Check out our"," ",e(r.PreviewCard.Root,{children:[e(r.PreviewCard.Trigger,{className:"PreviewCardTrigger",href:"https://example.com/documentation",children:"documentation"}),e(r.PreviewCard.Portal,{children:e(r.PreviewCard.Positioner,{className:"PreviewCardPositioner",sideOffset:8,children:e(r.PreviewCard.Popup,{className:"PreviewCardPopup",children:[e(r.PreviewCard.Arrow,{className:"PreviewCardArrow",children:e(d,{})}),e("div",{className:"PreviewCardContent",children:[e("h3",{className:"PreviewCardTitle",children:"Documentation"}),e("p",{className:"PreviewCardDescription",children:"Comprehensive guides and API references to help you build with our platform. Includes tutorials, examples, and best practices."})]})]})})})]})," ","for more information."]})})},L={render:()=>e("div",{style:{padding:"100px"},children:e("p",{style:{fontSize:"16px",lineHeight:"1.6",maxWidth:"600px"},children:["Modern web development involves understanding"," ",e(r.PreviewCard.Root,{children:[e(r.PreviewCard.Trigger,{className:"PreviewCardTrigger",href:"https://en.wikipedia.org/wiki/HTML",children:"HTML"}),e(r.PreviewCard.Portal,{children:e(r.PreviewCard.Positioner,{className:"PreviewCardPositioner",sideOffset:8,children:e(r.PreviewCard.Popup,{className:"PreviewCardPopup",children:[e(r.PreviewCard.Arrow,{className:"PreviewCardArrow",children:e(d,{})}),e("div",{className:"PreviewCardContent",children:[e("h3",{className:"PreviewCardTitle",children:"HTML"}),e("p",{className:"PreviewCardDescription",children:"HyperText Markup Language is the standard markup language for documents designed to be displayed in a web browser."})]})]})})})]}),","," ",e(r.PreviewCard.Root,{children:[e(r.PreviewCard.Trigger,{className:"PreviewCardTrigger",href:"https://en.wikipedia.org/wiki/CSS",children:"CSS"}),e(r.PreviewCard.Portal,{children:e(r.PreviewCard.Positioner,{className:"PreviewCardPositioner",sideOffset:8,children:e(r.PreviewCard.Popup,{className:"PreviewCardPopup",children:[e(r.PreviewCard.Arrow,{className:"PreviewCardArrow",children:e(d,{})}),e("div",{className:"PreviewCardContent",children:[e("h3",{className:"PreviewCardTitle",children:"CSS"}),e("p",{className:"PreviewCardDescription",children:"Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in HTML."})]})]})})})]}),", and"," ",e(r.PreviewCard.Root,{children:[e(r.PreviewCard.Trigger,{className:"PreviewCardTrigger",href:"https://en.wikipedia.org/wiki/JavaScript",children:"JavaScript"}),e(r.PreviewCard.Portal,{children:e(r.PreviewCard.Positioner,{className:"PreviewCardPositioner",sideOffset:8,children:e(r.PreviewCard.Popup,{className:"PreviewCardPopup",children:[e(r.PreviewCard.Arrow,{className:"PreviewCardArrow",children:e(d,{})}),e("div",{className:"PreviewCardContent",children:[e("h3",{className:"PreviewCardTitle",children:"JavaScript"}),e("p",{className:"PreviewCardDescription",children:"A high-level, interpreted programming language that conforms to the ECMAScript specification. It's a core technology of the World Wide Web."})]})]})})})]}),"."]})})},b={render:()=>e("div",{style:{padding:"100px",display:"flex",flexDirection:"column",gap:"40px"},children:[e("p",{style:{fontSize:"16px",lineHeight:"1.6"},children:["Preview on top:"," ",e(r.PreviewCard.Root,{children:[e(r.PreviewCard.Trigger,{className:"PreviewCardTrigger",href:"https://example.com",children:"hover me"}),e(r.PreviewCard.Portal,{children:e(r.PreviewCard.Positioner,{className:"PreviewCardPositioner",side:"top",sideOffset:8,children:e(r.PreviewCard.Popup,{className:"PreviewCardPopup",children:[e(r.PreviewCard.Arrow,{className:"PreviewCardArrow",children:e(d,{})}),e("div",{className:"PreviewCardContent",children:e("p",{className:"PreviewCardDescription",children:"This preview appears above the link."})})]})})})]})]}),e("p",{style:{fontSize:"16px",lineHeight:"1.6"},children:["Preview on bottom:"," ",e(r.PreviewCard.Root,{children:[e(r.PreviewCard.Trigger,{className:"PreviewCardTrigger",href:"https://example.com",children:"hover me"}),e(r.PreviewCard.Portal,{children:e(r.PreviewCard.Positioner,{className:"PreviewCardPositioner",side:"bottom",sideOffset:8,children:e(r.PreviewCard.Popup,{className:"PreviewCardPopup",children:[e(r.PreviewCard.Arrow,{className:"PreviewCardArrow",children:e(d,{})}),e("div",{className:"PreviewCardContent",children:e("p",{className:"PreviewCardDescription",children:"This preview appears below the link."})})]})})})]})]})]})};var n=window.React,m=P||{},H=["Default","WithTitle","TextOnly","MultipleLinks"];function D({id:i}){let a=w[i],t={...m.args||{},...a.args||{}};return(a.render||(o=>n.createElement(m.component,o)))(t,{args:t,id:i,name:i})}var M=H.map(i=>n.createElement("section",{key:i,className:"ds-story"},n.createElement("p",{className:"ds-story-name"},i.replace(/([a-z])([A-Z])/g,"$1 $2")),n.createElement("div",{className:"ds-story-body"},n.createElement(D,{id:i}))));window.ReactDOM.createRoot(document.getElementById("root")).render(n.createElement(n.Fragment,null,M));})();
+
+</script>
+</body>
+</html>

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

@@ -0,0 +1,58 @@
+# Progress
+
+The Base UI Progress styled by the theme. A gauge (tokens/semantic/gauge.json), the same bar as Meter. 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).
+
+Use `Loomiere.Progress` (`import { Progress } from '@base-ui/react/progress'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
+
+Base UI docs: https://base-ui.com/react/components/progress
+
+## Classes
+
+| Class | Data attributes it answers to |
+|---|---|
+| `ProgressRoot` | `data-indeterminate`; `data-size`: `sm`, `lg` |
+| `ProgressHeader` |   |
+| `ProgressLabel` |   |
+| `ProgressValue` |   |
+| `ProgressTrack` |   |
+| `ProgressIndicator` |   |
+
+Base UI sets the state attributes (`data-checked`, `data-open`, `data-disabled`...) itself. Set `data-size`, `data-emphasis`, `data-variant` and `data-color` yourself; `data-color` takes any palette name (`primary`, `secondary`, `error`...) and repaints the part in it.
+
+## Example
+
+From the Progress stories (`Default`):
+
+```tsx
+export const Default: Story = {
+  render: () => {
+    const [value, setValue] = React.useState(20);
+
+    React.useEffect(() => {
+      const interval = setInterval(() => {
+        setValue((current) => {
+          const next = current + Math.random() * 25;
+          return next >= 100 ? 100 : Math.round(next);
+        });
+      }, 1000);
+      return () => clearInterval(interval);
+    }, []);
+
+    return (
+      <div style={{ width: '400px' }}>
+        <Progress.Root className="ProgressRoot" value={value}>
+          <div className="ProgressHeader">
+            <Progress.Label className="ProgressLabel">Export data</Progress.Label>
+            <Progress.Value className="ProgressValue" />
+          </div>
+          <Progress.Track className="ProgressTrack">
+            <Progress.Indicator className="ProgressIndicator" />
+          </Progress.Track>
+        </Progress.Root>
+      </div>
+    );
+  },
+};
+```
+
+The preview also shows `Static`, `Indeterminate`, `WithoutLabel`.