@scattered-light/loomiere-mojave 0.22.5 → 0.23.0

package/dist/exports/AGENTS.md

@@ -152,7 +152,7 @@ Looks: this brand can look 2 ways. With no `data-look` it is Mojave; `data-look=
 
 ### Components
 
-The components are [Base UI](https://base-ui.com) parts styled by class name: `Accordion`, `AlertDialog`, `AppBar`, `Autocomplete`, `Avatar`, `Badge`, `Button`, `Checkbox`, `CheckboxGroup`, `Collapsible`, `Collection`, `CollectionCards`, `CollectionPagination`, `CollectionToolbar`, `Combobox`, `ContextMenu`, `DataList`, `DataTable`, `DatePicker`, `DescriptionList`, `Dialog`, `Drawer`, `EditableList`, `EmptyState`, `Field`, `Fieldset`, `Form`, `Input`, `ListDetail`, `Menu`, `Menubar`, `Meter`, `MoneyField`, `MultiSelect`, `NavigationMenu`, `NumberField`, `OTPField`, `PickerButton`, `PickerSplit`, `Popover`, `PreviewCard`, `Progress`, `Radio`, `ScrollArea`, `Select`, `Separator`, `Sheet`, `SideNav`, `Slider`, `SplitButton`, `Splitter`, `StatCard`, `StatFigure`, `Switch`, `Table`, `Tabs`, `Toast`, `Toggle`, `ToggleGroup`, `Toolbar`, `Tooltip`. Each component's README lists the classes its parts take and the data attributes they answer to (`data-size="sm|lg"`, `data-emphasis`, `data-color`).
+The components are [Base UI](https://base-ui.com) parts styled by class name: `Accordion`, `AlertDialog`, `AppBar`, `Autocomplete`, `Avatar`, `Badge`, `Button`, `Checkbox`, `CheckboxGroup`, `Collapsible`, `Collection`, `CollectionCards`, `CollectionPagination`, `CollectionToolbar`, `Combobox`, `ContextMenu`, `DataList`, `DataTable`, `DatePicker`, `DescriptionList`, `Dialog`, `Drawer`, `EditableList`, `EmptyState`, `Field`, `Fieldset`, `Form`, `FormGrid`, `Input`, `ListDetail`, `Menu`, `Menubar`, `Meter`, `MoneyField`, `MultiSelect`, `NavigationMenu`, `NumberField`, `OTPField`, `PickerButton`, `PickerSplit`, `Popover`, `PreviewCard`, `Progress`, `Radio`, `ScrollArea`, `Select`, `Separator`, `Sheet`, `SideNav`, `Slider`, `SplitButton`, `Splitter`, `StatCard`, `StatFigure`, `Switch`, `Table`, `Tabs`, `Toast`, `Toggle`, `ToggleGroup`, `Toolbar`, `Tooltip`. Each component's README lists the classes its parts take and the data attributes they answer to (`data-size="sm|lg"`, `data-emphasis`, `data-color`).
 
 Icons are Material Symbols Outlined by ligature name (`<span class="material-symbols-outlined">search</span>`, or `Loomiere.MaterialSymbol name="search"`), sized by the `.icon-<tier>` utilities to match the text beside them.
 

package/dist/exports/catalog.json

@@ -146,6 +146,8 @@
         "design-system/components/Fieldset/preview.html",
         "design-system/components/Form/README.md",
         "design-system/components/Form/preview.html",
+        "design-system/components/FormGrid/README.md",
+        "design-system/components/FormGrid/preview.html",
         "design-system/components/Input/README.md",
         "design-system/components/Input/preview.html",
         "design-system/components/ListDetail/README.md",

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

@@ -144,7 +144,7 @@ Looks: this brand can look 2 ways. With no `data-look` it is Mojave; `data-look=
 
 ## Components
 
-The components are [Base UI](https://base-ui.com) parts styled by class name: `Accordion`, `AlertDialog`, `AppBar`, `Autocomplete`, `Avatar`, `Badge`, `Button`, `Checkbox`, `CheckboxGroup`, `Collapsible`, `Collection`, `CollectionCards`, `CollectionPagination`, `CollectionToolbar`, `Combobox`, `ContextMenu`, `DataList`, `DataTable`, `DatePicker`, `DescriptionList`, `Dialog`, `Drawer`, `EditableList`, `EmptyState`, `Field`, `Fieldset`, `Form`, `Input`, `ListDetail`, `Menu`, `Menubar`, `Meter`, `MoneyField`, `MultiSelect`, `NavigationMenu`, `NumberField`, `OTPField`, `PickerButton`, `PickerSplit`, `Popover`, `PreviewCard`, `Progress`, `Radio`, `ScrollArea`, `Select`, `Separator`, `Sheet`, `SideNav`, `Slider`, `SplitButton`, `Splitter`, `StatCard`, `StatFigure`, `Switch`, `Table`, `Tabs`, `Toast`, `Toggle`, `ToggleGroup`, `Toolbar`, `Tooltip`. Each component's README lists the classes its parts take and the data attributes they answer to (`data-size="sm|lg"`, `data-emphasis`, `data-color`).
+The components are [Base UI](https://base-ui.com) parts styled by class name: `Accordion`, `AlertDialog`, `AppBar`, `Autocomplete`, `Avatar`, `Badge`, `Button`, `Checkbox`, `CheckboxGroup`, `Collapsible`, `Collection`, `CollectionCards`, `CollectionPagination`, `CollectionToolbar`, `Combobox`, `ContextMenu`, `DataList`, `DataTable`, `DatePicker`, `DescriptionList`, `Dialog`, `Drawer`, `EditableList`, `EmptyState`, `Field`, `Fieldset`, `Form`, `FormGrid`, `Input`, `ListDetail`, `Menu`, `Menubar`, `Meter`, `MoneyField`, `MultiSelect`, `NavigationMenu`, `NumberField`, `OTPField`, `PickerButton`, `PickerSplit`, `Popover`, `PreviewCard`, `Progress`, `Radio`, `ScrollArea`, `Select`, `Separator`, `Sheet`, `SideNav`, `Slider`, `SplitButton`, `Splitter`, `StatCard`, `StatFigure`, `Switch`, `Table`, `Tabs`, `Toast`, `Toggle`, `ToggleGroup`, `Toolbar`, `Tooltip`. Each component's README lists the classes its parts take and the data attributes they answer to (`data-size="sm|lg"`, `data-emphasis`, `data-color`).
 
 Icons are Material Symbols Outlined by ligature name (`<span class="material-symbols-outlined">search</span>`, or `Loomiere.MaterialSymbol name="search"`), sized by the `.icon-<tier>` utilities to match the text beside them.
 

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

@@ -0,0 +1,41 @@
+# FormGrid
+
+The Base UI FormGrid styled by the theme. Fields on a grid. Columns are as wide as the space allows up to --form-grid-columns (the columns prop), never narrower than 12rem, so a narrow drawer gets one column and a wide dialog two or more. Cells share rows, so controls line up. A FormGridItem with data-span="full" crosses every column; data-align="end" sits a cell on the row's bottom. Uses the same spacing as Form.
+
+Use `Loomiere.FormGrid` (`import { FormGrid } from '@base-ui/react/form-grid'` 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/form-grid
+
+## Classes
+
+| Class | Data attributes it answers to |
+|---|---|
+| `FormGrid` |   |
+| `FormGridItem` | `data-span`: `full`; `data-align`: `end` |
+
+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 FormGrid stories (`Default`):
+
+```tsx
+export const Default: Story = {
+  render: () => (
+    <div style={{ maxWidth: 640 }}>
+      <Form>
+        <FormGrid>
+          <Fields />
+        </FormGrid>
+        <FormActions>
+          <Button>Save</Button>
+        </FormActions>
+      </Form>
+    </div>
+  ),
+};
+
+/** In a narrow space the grid drops to one column. */
+```
+
+The preview also shows `Narrow`, `ThreeColumns`.

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

@@ -0,0 +1,19 @@
+<!-- @dsCard group="Components" height=360 subtitle="Default / Narrow / ThreeColumns" -->
+<!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-label-minimize-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
+</style>
+</head>
+<body>
+<div id="root"></div>
+<script>
+(()=>{var R=Object.create;var m=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,L=Object.prototype.hasOwnProperty;var w=(t,r)=>()=>(r||t((r={exports:{}}).exports,r),r.exports),E=(t,r)=>{for(var a in r)m(t,a,{get:r[a],enumerable:!0})},g=(t,r,a,l)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of h(r))!L.call(t,n)&&n!==a&&m(t,n,{get:()=>r[n],enumerable:!(l=b(r,n))||l.enumerable});return t};var S=(t,r,a)=>(a=t!=null?R(x(t)):{},g(r||!t||!t.__esModule?m(a,"default",{value:t,enumerable:!0}):a,t));var y=w((I,F)=>{F.exports=window.Loomiere});var p={};E(p,{Default:()=>G,Narrow:()=>C,ThreeColumns:()=>A,default:()=>i});var o=S(y(),1);var s=window.React;function e(t,r,a){let{children:l,...n}=r||{};return a!==void 0&&(n.key=a),l===void 0?s.createElement(t,n):Array.isArray(l)?s.createElement(t,n,...l):s.createElement(t,n,l)}var u=s.Fragment;var v={title:"Components/Lib/FormGrid",component:o.FormGrid,parameters:{layout:"padded"},tags:["autodocs","ds:lib"]},i=v;function c(){return e(u,{children:[e(o.Field.Root,{name:"first",children:[e(o.Field.Label,{children:"First name"}),e(o.Field.Control,{placeholder:"Jordan"})]}),e(o.Field.Root,{name:"last",children:[e(o.Field.Label,{children:"Last name"}),e(o.Field.Control,{placeholder:"Rivera"})]}),e(o.Field.Root,{name:"email",children:[e(o.Field.Label,{children:"Email"}),e(o.Field.Control,{type:"email",placeholder:"jordan@example.com"})]}),e(o.Field.Root,{name:"phone",children:[e(o.Field.Label,{children:"Phone"}),e(o.Field.Control,{placeholder:"555-0100"})]}),e(o.FormGridItem,{span:"full",children:e(o.Field.Root,{name:"address",children:[e(o.Field.Label,{children:"Address"}),e(o.Field.Control,{placeholder:"1200 Desert View Rd"})]})})]})}var G={render:()=>e("div",{style:{maxWidth:640},children:e(o.Form,{children:[e(o.FormGrid,{children:e(c,{})}),e(o.FormActions,{children:e(o.Button,{children:"Save"})})]})})},C={render:()=>e("div",{style:{maxWidth:360},children:e(o.FormGrid,{children:e(c,{})})})},A={render:()=>e("div",{style:{maxWidth:840},children:e(o.FormGrid,{columns:3,children:[e(c,{}),e(o.FormGridItem,{align:"end",children:e(o.Button,{children:"Add"})})]})})};var d=window.React,f=i||{},j=["Default","Narrow","ThreeColumns"];function D({id:t}){let r=p[t],a={...f.args||{},...r.args||{}};return(r.render||(n=>d.createElement(f.component,n)))(a,{args:a,id:t,name:t})}var N=j.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(D,{id:t}))));window.ReactDOM.createRoot(document.getElementById("root")).render(d.createElement(d.Fragment,null,N));})();
+
+</script>
+</body>
+</html>