@scattered-light/loomiere-mojave 0.2.0 → 0.4.0

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

@@ -0,0 +1,50 @@
+# Table
+
+Plain HTML styled by the theme. Base UI has no table, so this styles the native <table class="Table"> elements with the table concept (tokens/semantic/table.json), the same tokens the AG Grid themes read: a small hand-built table and a full grid look alike. Rows answer to aria-selected="true" (or data-selected) for selection; cells take data-align="end" for numbers.
+
+Base UI has no Table: use the native element with the class below (`<table className="Table">`).
+
+Tokens: the table concept (--sl-table-*).
+
+## Classes
+
+| Class | Data attributes it answers to |
+|---|---|
+| `Table` | `data-sticky-header` |
+
+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 Table stories (`Default`):
+
+```tsx
+export const Default: Story = {
+  render: () => (
+    <table className="Table">
+      <thead>
+        <tr>
+          <th scope="col">Site</th>
+          <th scope="col">Park</th>
+          <th scope="col" data-align="end">
+            Nights
+          </th>
+          <th scope="col">Status</th>
+        </tr>
+      </thead>
+      <tbody>
+        {trips.map((t) => (
+          <tr key={t.site}>
+            <td>{t.site}</td>
+            <td data-subtle="">{t.park}</td>
+            <td data-align="end">{t.nights}</td>
+            <td>{t.status}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  ),
+};
+```
+
+The preview also shows `SortableAndSelected`, `Empty`.

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

@@ -0,0 +1,19 @@
+<!-- @dsCard group="Display" height=360 subtitle="Default / SortableAndSelected / Empty" -->
+<!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 p=Object.defineProperty;var m=(e,a)=>{for(var o in a)p(e,o,{get:a[o],enumerable:!0})};var i={};m(i,{Default:()=>u,Empty:()=>b,SortableAndSelected:()=>g,default:()=>l});var d=window.React;function t(e,a,o){let{children:n,...r}=a||{};return o!==void 0&&(r.key=o),n===void 0?d.createElement(e,r):Array.isArray(n)?d.createElement(e,r,...n):d.createElement(e,r,n)}var N=d.Fragment;var y={title:"Components/Table",parameters:{layout:"padded"},tags:["autodocs"]},l=y,c=[{site:"Jumbo Rocks 42",park:"Joshua Tree",nights:3,status:"Booked"},{site:"Hole-in-the-Wall 7",park:"Mojave Preserve",nights:2,status:"Waitlist"},{site:"Furnace Creek 118",park:"Death Valley",nights:4,status:"Booked"},{site:"Cottonwood 15",park:"Joshua Tree",nights:1,status:"Cancelled"}],u={render:()=>t("table",{className:"Table",children:[t("thead",{children:t("tr",{children:[t("th",{scope:"col",children:"Site"}),t("th",{scope:"col",children:"Park"}),t("th",{scope:"col","data-align":"end",children:"Nights"}),t("th",{scope:"col",children:"Status"})]})}),t("tbody",{children:c.map(e=>t("tr",{children:[t("td",{children:e.site}),t("td",{"data-subtle":"",children:e.park}),t("td",{"data-align":"end",children:e.nights}),t("td",{children:e.status})]},e.site))})]})},g={render:()=>t("table",{className:"Table",children:[t("caption",{children:"Sorted by nights. Hover a header to sort by it."}),t("thead",{children:t("tr",{children:[t("th",{scope:"col","aria-sort":"none",children:"Site"}),t("th",{scope:"col","aria-sort":"none",children:"Park"}),t("th",{scope:"col","aria-sort":"descending","data-align":"end",children:"Nights"}),t("th",{scope:"col",children:"Status"})]})}),t("tbody",{children:[...c].sort((e,a)=>a.nights-e.nights).map((e,a)=>t("tr",{"aria-selected":a===1?"true":void 0,children:[t("td",{children:e.site}),t("td",{"data-subtle":"",children:e.park}),t("td",{"data-align":"end",children:e.nights}),t("td",{children:e.status})]},e.site))}),t("tfoot",{children:t("tr",{children:[t("td",{colSpan:2,children:"Total"}),t("td",{"data-align":"end",children:c.reduce((e,a)=>e+a.nights,0)}),t("td",{})]})})]})},b={render:()=>t("table",{className:"Table",children:[t("thead",{children:t("tr",{children:[t("th",{scope:"col",children:"Site"}),t("th",{scope:"col",children:"Park"}),t("th",{scope:"col","data-align":"end",children:"Nights"})]})}),t("tbody",{children:t("tr",{children:t("td",{colSpan:3,"data-empty":"",children:"No trips yet"})})})]})};var s=window.React,h=l||{},S=["Default","SortableAndSelected","Empty"];function k({id:e}){let a=i[e],o={...h.args||{},...a.args||{}};return(a.render||(r=>s.createElement(h.component,r)))(o,{args:o,id:e,name:e})}var f=S.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(k,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(s.createElement(s.Fragment,null,f));})();
+
+</script>
+</body>
+</html>

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

@@ -6,7 +6,7 @@
 <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; }
+  .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>

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

@@ -6,7 +6,7 @@
 <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; }
+  .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>

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

@@ -1,6 +1,6 @@
 # Toggle
 
-The Base UI Toggle styled by the theme. A toggle is a button that stays pressed: the same heights, padding, gap and trigger text style as a button of the same size.
+The Base UI Toggle styled by the theme. A toggle is a button that stays pressed: the same heights, padding, gap and trigger text style as a button of the same size. Pressed, it takes its emphasis level's pressed look (standard unless data-emphasis on it or its group says otherwise), so the brand's emphasis ladder decides how loud an "on" toggle is.
 
 Use `Loomiere.Toggle` (`import { Toggle } from '@base-ui/react/toggle'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
 

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

@@ -6,7 +6,7 @@
 <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; }
+  .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>

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

@@ -6,7 +6,7 @@
 <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; }
+  .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>

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

@@ -6,7 +6,7 @@
 <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; }
+  .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>

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

@@ -6,7 +6,7 @@
 <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; }
+  .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>