@scattered-light/loomiere-mojave 0.25.0 → 0.41.0

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

@@ -1,6 +1,6 @@
 # EmptyState
 
-Loomiere component, not part of Base UI. The block a page, pane, table, list or popup shows when it has nothing to show. One look for every kind. data-kind only picks the media tone and, in the component, the default icon and whether the block is announced. Sizes are empty.* (tokens/semantic/empty.json). No border and no fill: the container provides those. The circle uses the subtle emphasis level (--sl-e-bg, --sl-e-fg), the same variables Badge uses. data-status on the media recolors it. A parent data-color does too: the subtle chrome pin skips this circle when a color scope is on an ancestor (Badge keeps the pin). A brand pair re-points fill and text, not that chrome scope. The circle stays chrome subtle inside a pair, the same as Badge, so a pair does not get its own selector. High contrast and the vision themes come with those variables. The title stays text-primary and the description text-secondary: an error's title is not red, because a sentence has to stay readable. Neutral kinds use the chrome palette, which is what subtle resolves to when no status is set. Text is a whole style per size, not a font-size on its own. Compact is a table row or a popup, so the title is subtitle-condense (bold, the row's size) and the description is body-condense. Standard is a pane: title-condense, the section heading, with body-base under it. Spacious is a page: title-magnify, the next title up, still body-base so the sentence doesn't grow with the heading. Unselected is the quiet pane beside a list, so it drops the circle, the icon is text-tertiary, and the title steps down one tier: subtitle-minimize where the others use a condense style (there is no title at minimize), and title-condense where the others use title-magnify. Compact is a row (icon, text, actions) centered across the cell. Standard and spacious are a column. They take margin-block: auto so a flex or grid column centers them in the leftover space; in normal flow that margin is zero, so a page that isn't a column doesn't grow a hole. There is no data-fill attribute. The icon for unselected is left_click: the pane is waiting for a choice in the list beside it, which an empty inbox would not say. A popup's empty slot already pads a plain sentence (popup-empty). When the child is an EmptyState, that padding drops so the two don't add. Menu.Empty has no popup-empty padding of its own, so it needs nothing here.
+Loomiere component, not part of Base UI. The block a page, pane, table, list or popup shows when it has nothing to show. One look for every kind. data-kind only picks the media tone and, in the component, the default icon and whether the block is announced. Sizes are empty.* (tokens/semantic/empty.json). No border and no fill: the container provides those. The circle uses the subtle emphasis level (--sl-e-bg, --sl-e-fg), the same variables Badge uses. data-status on the media recolors it. A parent data-color does too: the subtle chrome pin skips this circle when a color scope is on an ancestor (Badge keeps the pin). A brand pair re-points fill and text, not that chrome scope. The circle stays chrome subtle inside a pair, the same as Badge, so a pair does not get its own selector. High contrast and the vision themes come with those variables. The title stays text-primary and the description text-secondary: an error's title is not red, because a sentence has to stay readable. Neutral kinds use the chrome palette, which is what subtle resolves to when no status is set. Text is a whole style per size, not a font-size on its own. Compact is a table row or a popup, so the title is subtitle-condense (bold, the row's size) and the description is body-condense. Standard is a pane: title-condense, the section heading, with body-base under it. Spacious is a page: title-amplify, the page title size, still body-base so the sentence doesn't grow with the heading. A brand that raises title-condense (Tulvo sets it to xl) would otherwise get a spacious title smaller than the standard one. Unselected is the quiet pane beside a list, so it drops the circle, the icon is text-tertiary, and the title steps down one tier: subtitle-minimize where the others use a condense style (there is no title at minimize), and title-condense where the others use title-amplify. Compact is a row (icon, text, actions) centered across the cell. Standard and spacious are a column. They take margin-block: auto so a flex or grid column centers them in the leftover space; in normal flow that margin is zero, so a page that isn't a column doesn't grow a hole. There is no data-fill attribute. The icon for unselected is left_click: the pane is waiting for a choice in the list beside it, which an empty inbox would not say. A popup's empty slot already pads a plain sentence (popup-empty). When the child is an EmptyState, that padding drops so the two don't add. Menu.Empty has no popup-empty padding of its own, so it needs nothing here.
 
 Use `Loomiere.EmptyState`, this package's component: it puts the class names on for you (`import { EmptyState } from '@scattered-light/loomiere-base-ui'`, or from `@scattered-light/loomiere-base-ui/custom`).
 

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

@@ -0,0 +1,38 @@
+# FileDropZone
+
+The Base UI FileDropZone styled by the theme. A dashed, quiet box with one line of text and its buttons. It fills when a file is dragged over it. Colors are the fill and border roles, so a brand restyles it without a component token.
+
+Use `Loomiere.FileDropZone` (`import { FileDropZone } from '@base-ui/react/file-drop-zone'` 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/file-drop-zone
+
+## Classes
+
+| Class | Data attributes it answers to |
+|---|---|
+| `FileDropZone` | `data-over`; `data-disabled` |
+| `FileDropZoneText` |   |
+| `FileDropZoneActions` |   |
+
+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 FileDropZone stories (`Default`):
+
+```tsx
+export const Default: Story = {
+  render: function Render() {
+    const [name, setName] = React.useState('');
+    return (
+      <FileDropZone onFiles={(files) => setName(files[0]?.name ?? '')} accept=".pdf,.csv">
+        {name ? `Chosen: ${name}` : 'Drop the statement here, or choose a file.'}
+      </FileDropZone>
+    );
+  },
+};
+
+/** More buttons sit beside Choose file. */
+```
+
+The preview also shows `WithActions`, `Disabled`.

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

@@ -0,0 +1,19 @@
+<!-- @dsCard group="Components" height=360 subtitle="Default / WithActions / Disabled" -->
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<style>
+  body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
+  #root { display: grid; gap: var(--sl-space-5, 20px); }
+  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-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 x=Object.create;var m=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var p=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),R=(e,t)=>{for(var o in t)m(e,o,{get:t[o],enumerable:!0})},Z=(e,t,o,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of F(t))!b.call(e,r)&&r!==o&&m(e,r,{get:()=>t[r],enumerable:!(n=E(t,r))||n.enumerable});return e};var f=(e,t,o)=>(o=e!=null?x(S(e)):{},Z(t||!e||!e.__esModule?m(o,"default",{value:e,enumerable:!0}):o,e));var u=p((O,y)=>{y.exports=window.React});var h=p(($,D)=>{D.exports=window.Loomiere});var d={};R(d,{Default:()=>j,Disabled:()=>N,WithActions:()=>L,default:()=>l});var g=f(u(),1),a=f(h(),1);var c=window.React;function i(e,t,o){let{children:n,...r}=t||{};return o!==void 0&&(r.key=o),n===void 0?c.createElement(e,r):Array.isArray(n)?c.createElement(e,r,...n):c.createElement(e,r,n)}var C=c.Fragment;var A={title:"Components/Lib/FileDropZone",component:a.FileDropZone,parameters:{layout:"padded"},tags:["autodocs","ds:lib"],args:{onFiles:()=>{}}},l=A,j={render:function(){let[t,o]=g.useState("");return i(a.FileDropZone,{onFiles:n=>o(n[0]?.name??""),accept:".pdf,.csv",children:t?`Chosen: ${t}`:"Drop the statement here, or choose a file."})}},L={render:()=>i(a.FileDropZone,{onFiles:()=>{},actions:i(a.Button,{emphasis:"standard",children:"Link from Document Library"}),children:"Drop the statement here, or choose a file."})},N={args:{disabled:!0,children:"Saving\u2026"}};var s=window.React,w=l||{},k=["Default","WithActions","Disabled"];function v({id:e}){let t=d[e],o={...w.args||{},...t.args||{}};return(t.render||(r=>s.createElement(w.component,r)))(o,{args:o,id:e,name:e})}var B=k.map(e=>s.createElement("section",{key:e,className:"ds-story"},s.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),s.createElement("div",{className:"ds-story-body"},s.createElement(v,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(s.createElement(s.Fragment,null,B));})();
+
+</script>
+</body>
+</html>

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

@@ -1,6 +1,6 @@
 # LineItemGrid
 
-The Base UI LineItemGrid styled by the theme. Editable lines (a journal entry, an invoice) on the Table styles. Cells hold controls, so their padding drops to the table's block padding and the controls fill the cell. The line-number column is narrow and in the tertiary color; the remove column is as narrow as its button. Footer rows stick to the bottom of the scroll box (maxHeight caps it): the table clips instead of hiding its overflow, because overflow: hidden would make the table the scroll container and the footer would never stick. A footer row's data-tone colors its figures with the status text colors (the -dark steps, which pass as text on the tray). The words in the cell carry the state; color only adds.
+The Base UI LineItemGrid styled by the theme. Editable lines (a journal entry, an invoice) on the Table styles. Cells hold controls, so their padding drops to the table's block padding and the controls fill the cell. The line-number column is narrow and in the tertiary color; the remove column is as narrow as its button. Footer rows stick to the bottom of the scroll box (maxHeight caps it): the table clips instead of hiding its overflow, because overflow: hidden would make the table the scroll container and the footer would never stick. A footer row's data-tone colors its figures with the status text colors (the -dark steps, which pass as text on the tray). The words in the cell carry the state; color only adds. look="statement" (data-look) puts the lines on a statement's terms: the Table's statement rows with caps 11px headers, 6px cell padding, no frame and rows tall enough for their controls. The footer rows move under the Add button into .LineItemGridSummary: a box on the base surface with a 1px border and the sheet's heavy rule on top, label left and figure right, a toned row in its status color, and the grand total over a dark rule with a double rule under its figure.
 
 Use `Loomiere.LineItemGrid` (`import { LineItemGrid } from '@base-ui/react/line-item-grid'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
 
@@ -10,9 +10,9 @@ Base UI docs: https://base-ui.com/react/components/line-item-grid
 
 | Class | Data attributes it answers to |
 |---|---|
-| `LineItemGrid` | `data-read-only` |
+| `LineItemGrid` | `data-read-only`; `data-look`: `statement` |
 | `LineItemGridScroll` |   |
-| `LineItemGridTable` |   |
+| `LineItemGridTable` | `data-look`: `statement` |
 | `Input` |   |
 | `FieldRoot` |   |
 | `ComboboxRoot` |   |
@@ -23,6 +23,9 @@ Base UI docs: https://base-ui.com/react/components/line-item-grid
 | `LineItemGridNumber` |   |
 | `LineItemGridRemove` |   |
 | `LineItemGridAdd` |   |
+| `LineItemGridAddHint` |   |
+| `Table` |   |
+| `LineItemGridSummary` |   |
 
 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.
 
@@ -47,4 +50,4 @@ export const Default: Story = {
 /** A posted entry: text in the cells, no add or remove. */
 ```
 
-The preview also shows `ReadOnly`.
+The preview also shows `ReadOnly`, `RuledTotals`, `Statement`.