@scattered-light/loomiere-mojave 0.7.0 → 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/exports/AGENTS.md +8 -5
- package/dist/exports/catalog.json +6 -0
- package/dist/exports/design-system/README.md +8 -5
- package/dist/exports/design-system/components/Collection/README.md +1 -1
- package/dist/exports/design-system/components/CollectionToolbar/README.md +7 -2
- package/dist/exports/design-system/components/ContextMenu/README.md +1 -1
- package/dist/exports/design-system/components/ContextMenu/preview.html +1 -1
- package/dist/exports/design-system/components/DataList/README.md +1 -1
- package/dist/exports/design-system/components/DataList/preview.html +171 -171
- package/dist/exports/design-system/components/DataTable/README.md +1 -1
- package/dist/exports/design-system/components/DataTable/preview.html +176 -176
- package/dist/exports/design-system/components/DescriptionList/README.md +41 -0
- package/dist/exports/design-system/components/DescriptionList/preview.html +19 -0
- package/dist/exports/design-system/components/Drawer/README.md +1 -1
- package/dist/exports/design-system/components/ScrollArea/preview.html +2 -2
- package/dist/exports/design-system/components/Sheet/README.md +46 -0
- package/dist/exports/design-system/components/Sheet/preview.html +19 -0
- package/dist/exports/design-system/components/StatFigure/README.md +38 -0
- package/dist/exports/design-system/components/StatFigure/preview.html +19 -0
- package/dist/exports/design-system/components/Table/README.md +2 -2
- package/dist/exports/design-system/components/Table/preview.html +2 -2
- package/dist/exports/design-system/components/bundle.css +708 -165
- package/dist/exports/design-system/components/bundle.js +7 -7
- package/dist/exports/design-system/components/index.d.ts +1 -1
- package/dist/exports/design-system/tokens.json +35 -0
- package/dist/exports/figma.json +1 -1
- package/dist/exports/tailwind.css +81 -0
- package/dist/exports/tokens.dtcg.json +317 -26
- package/dist/tokens.css +221 -105
- package/dist/tokens.d.ts +79 -0
- package/dist/tokens.js +80 -1
- package/dist/tokens.json +588 -27
- package/dist/utilities.css +30 -0
- package/package.json +2 -2
package/dist/exports/AGENTS.md
CHANGED
|
@@ -114,8 +114,8 @@ Families: display 'Funnel Display', sans-serif, body 'Barlow Semi Condensed', sa
|
|
|
114
114
|
All text uses one whole text style, never a size or weight on its own: `class="text-style-<name>"`, or the `--sl-font-<name>-*` variables (font-family, font-size, font-weight, line-height, letter-spacing) together. Styles come in tiers named for why the text is that size:
|
|
115
115
|
|
|
116
116
|
- **minimize**: the smallest functional text: captions, fine print, dense metadata. Roles: `body`, `trigger`, `selected`, `link`, `subtitle`, `eyebrow`.
|
|
117
|
-
- **condense**: compact UI: small controls, table cells, secondary labels. Roles: `code`, `body`, `trigger`, `selected`, `link`, `subtitle`, `eyebrow`, `title`.
|
|
118
|
-
- **base**: the default UI and body text. Roles: `body`, `selected`, `label`, `link`, `subtitle`, `trigger`, `title`.
|
|
117
|
+
- **condense**: compact UI: small controls, table cells, secondary labels. Roles: `code`, `figures`, `body`, `trigger`, `selected`, `link`, `subtitle`, `eyebrow`, `caps`, `title`.
|
|
118
|
+
- **base**: the default UI and body text. Roles: `body`, `selected`, `label`, `link`, `subtitle`, `trigger`, `title`, `figures`.
|
|
119
119
|
- **magnify**: emphasized body text: lead paragraphs, larger controls. Roles: `body`, `trigger`, `title`.
|
|
120
120
|
- **amplify**: titles of dialogs, drawers and page sections. Roles: `title`.
|
|
121
121
|
- **maximize**: the page head. Roles: `title`.
|
|
@@ -152,7 +152,7 @@ Looks: this brand can look 2 ways. With no `data-look` it is Mojave; `data-look=
|
|
|
152
152
|
|
|
153
153
|
### Components
|
|
154
154
|
|
|
155
|
-
The components are [Base UI](https://base-ui.com) parts styled by class name: `Accordion`, `AlertDialog`, `Autocomplete`, `Avatar`, `Badge`, `Button`, `Checkbox`, `CheckboxGroup`, `Collapsible`, `Collection`, `CollectionPagination`, `CollectionToolbar`, `Combobox`, `ContextMenu`, `DataList`, `DataTable`, `DatePicker`, `Dialog`, `Drawer`, `EditableList`, `EmptyState`, `Field`, `Fieldset`, `Form`, `Input`, `ListDetail`, `Menu`, `Menubar`, `Meter`, `MoneyField`, `NavigationMenu`, `NumberField`, `OTPField`, `Popover`, `PreviewCard`, `Progress`, `Radio`, `ScrollArea`, `Select`, `Separator`, `Slider`, `Splitter`, `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`).
|
|
155
|
+
The components are [Base UI](https://base-ui.com) parts styled by class name: `Accordion`, `AlertDialog`, `Autocomplete`, `Avatar`, `Badge`, `Button`, `Checkbox`, `CheckboxGroup`, `Collapsible`, `Collection`, `CollectionPagination`, `CollectionToolbar`, `Combobox`, `ContextMenu`, `DataList`, `DataTable`, `DatePicker`, `DescriptionList`, `Dialog`, `Drawer`, `EditableList`, `EmptyState`, `Field`, `Fieldset`, `Form`, `Input`, `ListDetail`, `Menu`, `Menubar`, `Meter`, `MoneyField`, `NavigationMenu`, `NumberField`, `OTPField`, `Popover`, `PreviewCard`, `Progress`, `Radio`, `ScrollArea`, `Select`, `Separator`, `Sheet`, `Slider`, `Splitter`, `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`).
|
|
156
156
|
|
|
157
157
|
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.
|
|
158
158
|
|
|
@@ -166,8 +166,8 @@ Load three things, in this order:
|
|
|
166
166
|
|
|
167
167
|
`window.Loomiere` holds two kinds of component:
|
|
168
168
|
|
|
169
|
-
- **Wrappers** put their own classes on, so use them bare: `Loomiere.Button`, `Loomiere.Input`, `Loomiere.Field`, `Loomiere.Fieldset`, `Loomiere.Form`, `Loomiere.NavigationMenu`, `Loomiere.Select`, `Loomiere.NumberField`, `Loomiere.OTPField`, `Loomiere.Autocomplete`, `Loomiere.Combobox`, `Loomiere.Checkbox`, `Loomiere.Radio`, `Loomiere.CheckboxGroup`, `Loomiere.Toggle`, `Loomiere.ToggleGroup`, `Loomiere.Dialog`, `Loomiere.AlertDialog`, `Loomiere.Meter`, `Loomiere.Progress`, `Loomiere.Slider`, `Loomiere.Menu`, `Loomiere.ContextMenu`, `Loomiere.Menubar`, `Loomiere.Popover`, `Loomiere.PreviewCard`, `Loomiere.Tooltip`, `Loomiere.Drawer`, `Loomiere.Accordion`, `Loomiere.Collapsible`, `Loomiere.Tabs`, `Loomiere.Switch`, `Loomiere.Toast`, `Loomiere.Avatar`, `Loomiere.Toolbar`, `Loomiere.ScrollArea`, `Loomiere.Separator`, `Loomiere.Badge`, `Loomiere.DatePicker`, `Loomiere.MoneyField`, `Loomiere.Splitter`, `Loomiere.ListDetail`, `Loomiere.EmptyState`, `Loomiere.DataTable`, `Loomiere.DataList`, `Loomiere.CollectionToolbar`, `Loomiere.CollectionPagination`, `Loomiere.EditableList`. `Loomiere.Button` also takes `emphasis` (`bold|standard|subtle|quiet`) and `palette` props, and a Button holding only an icon draws itself square (it sets `data-icon-only`). Wrapped parts that are buttons (`Dialog.Trigger`, `Menu.Trigger`, `Toolbar.Button`, `Drawer.Close`...) take the same `emphasis` and `palette` props and draw square the same way. `Popover.Trigger`, `Tooltip.Trigger`, `Select.Trigger` and `Dialog.Close` become Buttons only when they set `emphasis`, `palette` or `className="Button"`. A plain `.Button` on a bare part is drawn square when it has an `aria-label` and a single icon inside, or when you set `data-icon-only` on it. `Loomiere.Badge` takes the same `emphasis` and `palette` props, plus `status`, `size` and `dot`.
|
|
170
|
-
- **Table, Badge, DatePicker, MoneyField, Splitter, ListDetail, EmptyState, DataTable, DataList, CollectionToolbar, CollectionPagination and
|
|
169
|
+
- **Wrappers** put their own classes on, so use them bare: `Loomiere.Button`, `Loomiere.Input`, `Loomiere.Field`, `Loomiere.Fieldset`, `Loomiere.Form`, `Loomiere.NavigationMenu`, `Loomiere.Select`, `Loomiere.NumberField`, `Loomiere.OTPField`, `Loomiere.Autocomplete`, `Loomiere.Combobox`, `Loomiere.Checkbox`, `Loomiere.Radio`, `Loomiere.CheckboxGroup`, `Loomiere.Toggle`, `Loomiere.ToggleGroup`, `Loomiere.Dialog`, `Loomiere.AlertDialog`, `Loomiere.Meter`, `Loomiere.Progress`, `Loomiere.Slider`, `Loomiere.Menu`, `Loomiere.ContextMenu`, `Loomiere.Menubar`, `Loomiere.Popover`, `Loomiere.PreviewCard`, `Loomiere.Tooltip`, `Loomiere.Drawer`, `Loomiere.Accordion`, `Loomiere.Collapsible`, `Loomiere.Tabs`, `Loomiere.Switch`, `Loomiere.Toast`, `Loomiere.Avatar`, `Loomiere.Toolbar`, `Loomiere.ScrollArea`, `Loomiere.Separator`, `Loomiere.Badge`, `Loomiere.DatePicker`, `Loomiere.MoneyField`, `Loomiere.Splitter`, `Loomiere.ListDetail`, `Loomiere.EmptyState`, `Loomiere.DataTable`, `Loomiere.DataList`, `Loomiere.CollectionToolbar`, `Loomiere.CollectionPagination`, `Loomiere.EditableList`, `Loomiere.Sheet`, `Loomiere.StatFigure`, `Loomiere.DescriptionList`. `Loomiere.Button` also takes `emphasis` (`bold|standard|subtle|quiet`) and `palette` props, and a Button holding only an icon draws itself square (it sets `data-icon-only`). Wrapped parts that are buttons (`Dialog.Trigger`, `Menu.Trigger`, `Toolbar.Button`, `Drawer.Close`...) take the same `emphasis` and `palette` props and draw square the same way. `Popover.Trigger`, `Tooltip.Trigger`, `Select.Trigger` and `Dialog.Close` become Buttons only when they set `emphasis`, `palette` or `className="Button"`. A plain `.Button` on a bare part is drawn square when it has an `aria-label` and a single icon inside, or when you set `data-icon-only` on it. `Loomiere.Badge` takes the same `emphasis` and `palette` props, plus `status`, `size` and `dot`.
|
|
170
|
+
- **Table, Badge, DatePicker, MoneyField, Splitter, ListDetail, EmptyState, DataTable, DataList, CollectionToolbar, CollectionPagination, EditableList, Sheet, StatFigure and DescriptionList are Loomiere components**, not Base UI parts. Table is plain HTML for a static table or a report: use the classes in its stylesheet. Badge is `Loomiere.Badge`. DatePicker is `Loomiere.DatePicker`; `Loomiere.Calendar` is the month grid on its own and `Loomiere.DatePresets` is the quick-selection list. MoneyField is `Loomiere.MoneyField`: an amount of money, stored as minor units. Splitter is `Loomiere.Splitter`. ListDetail is `Loomiere.ListDetail`. EmptyState is `Loomiere.EmptyState`. DataTable, DataList, CollectionToolbar and CollectionPagination come from `@scattered-light/loomiere-base-ui/custom/collection` and need `@tanstack/react-table` installed. EditableList, Sheet, StatFigure and DescriptionList (with `Loomiere.DescriptionItem`) come from the package root or `./custom`.
|
|
171
171
|
|
|
172
172
|
`Loomiere.Base` holds the bare Base UI parts for the wrappers too (`Loomiere.Base.Button`), for when you need the part without its classes.
|
|
173
173
|
|
|
@@ -216,6 +216,9 @@ Pick by what the person is doing, not by look:
|
|
|
216
216
|
| `EditableList` | Repeating form rows people add, edit and remove: line items, allocations. |
|
|
217
217
|
| `CollectionToolbar` | Search, tabs, filters and the selection bar for a DataTable or a DataList. |
|
|
218
218
|
| `CollectionPagination` | Which page of a long list you are on. It also works without a collection. |
|
|
219
|
+
| `Sheet` | Frame a section of a working page (open items, a profile, periods) with a ruled top and an optional tab label. A table or list inside runs edge to edge. |
|
|
220
|
+
| `StatFigure` | Lead a page with one figure that matters (a balance, a count to act on), with a caps label and a caption. Give a final total the double underline. |
|
|
221
|
+
| `DescriptionList` | Show label and value pairs, such as a profile. variant="leader" runs dotted leaders to values at the end of the row, as on a working paper. |
|
|
219
222
|
| `EmptyState` | Don't use it for a message about something that just happened (use Toast) or a warning above content that still shows (use a notice or an inline alert). |
|
|
220
223
|
| `Progress` | Show how far a task has got. |
|
|
221
224
|
| `Meter` | Show a measured amount within known limits, such as storage used. |
|
|
@@ -126,6 +126,8 @@
|
|
|
126
126
|
"design-system/components/DataTable/preview.html",
|
|
127
127
|
"design-system/components/DatePicker/README.md",
|
|
128
128
|
"design-system/components/DatePicker/preview.html",
|
|
129
|
+
"design-system/components/DescriptionList/README.md",
|
|
130
|
+
"design-system/components/DescriptionList/preview.html",
|
|
129
131
|
"design-system/components/Dialog/README.md",
|
|
130
132
|
"design-system/components/Dialog/preview.html",
|
|
131
133
|
"design-system/components/Drawer/README.md",
|
|
@@ -172,10 +174,14 @@
|
|
|
172
174
|
"design-system/components/Select/preview.html",
|
|
173
175
|
"design-system/components/Separator/README.md",
|
|
174
176
|
"design-system/components/Separator/preview.html",
|
|
177
|
+
"design-system/components/Sheet/README.md",
|
|
178
|
+
"design-system/components/Sheet/preview.html",
|
|
175
179
|
"design-system/components/Slider/README.md",
|
|
176
180
|
"design-system/components/Slider/preview.html",
|
|
177
181
|
"design-system/components/Splitter/README.md",
|
|
178
182
|
"design-system/components/Splitter/preview.html",
|
|
183
|
+
"design-system/components/StatFigure/README.md",
|
|
184
|
+
"design-system/components/StatFigure/preview.html",
|
|
179
185
|
"design-system/components/Switch/README.md",
|
|
180
186
|
"design-system/components/Switch/preview.html",
|
|
181
187
|
"design-system/components/Table/README.md",
|
|
@@ -106,8 +106,8 @@ Families: display 'Funnel Display', sans-serif, body 'Barlow Semi Condensed', sa
|
|
|
106
106
|
All text uses one whole text style, never a size or weight on its own: `class="text-style-<name>"`, or the `--sl-font-<name>-*` variables (font-family, font-size, font-weight, line-height, letter-spacing) together. Styles come in tiers named for why the text is that size:
|
|
107
107
|
|
|
108
108
|
- **minimize**: the smallest functional text: captions, fine print, dense metadata. Roles: `body`, `trigger`, `selected`, `link`, `subtitle`, `eyebrow`.
|
|
109
|
-
- **condense**: compact UI: small controls, table cells, secondary labels. Roles: `code`, `body`, `trigger`, `selected`, `link`, `subtitle`, `eyebrow`, `title`.
|
|
110
|
-
- **base**: the default UI and body text. Roles: `body`, `selected`, `label`, `link`, `subtitle`, `trigger`, `title`.
|
|
109
|
+
- **condense**: compact UI: small controls, table cells, secondary labels. Roles: `code`, `figures`, `body`, `trigger`, `selected`, `link`, `subtitle`, `eyebrow`, `caps`, `title`.
|
|
110
|
+
- **base**: the default UI and body text. Roles: `body`, `selected`, `label`, `link`, `subtitle`, `trigger`, `title`, `figures`.
|
|
111
111
|
- **magnify**: emphasized body text: lead paragraphs, larger controls. Roles: `body`, `trigger`, `title`.
|
|
112
112
|
- **amplify**: titles of dialogs, drawers and page sections. Roles: `title`.
|
|
113
113
|
- **maximize**: the page head. Roles: `title`.
|
|
@@ -144,7 +144,7 @@ Looks: this brand can look 2 ways. With no `data-look` it is Mojave; `data-look=
|
|
|
144
144
|
|
|
145
145
|
## Components
|
|
146
146
|
|
|
147
|
-
The components are [Base UI](https://base-ui.com) parts styled by class name: `Accordion`, `AlertDialog`, `Autocomplete`, `Avatar`, `Badge`, `Button`, `Checkbox`, `CheckboxGroup`, `Collapsible`, `Collection`, `CollectionPagination`, `CollectionToolbar`, `Combobox`, `ContextMenu`, `DataList`, `DataTable`, `DatePicker`, `Dialog`, `Drawer`, `EditableList`, `EmptyState`, `Field`, `Fieldset`, `Form`, `Input`, `ListDetail`, `Menu`, `Menubar`, `Meter`, `MoneyField`, `NavigationMenu`, `NumberField`, `OTPField`, `Popover`, `PreviewCard`, `Progress`, `Radio`, `ScrollArea`, `Select`, `Separator`, `Slider`, `Splitter`, `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`).
|
|
147
|
+
The components are [Base UI](https://base-ui.com) parts styled by class name: `Accordion`, `AlertDialog`, `Autocomplete`, `Avatar`, `Badge`, `Button`, `Checkbox`, `CheckboxGroup`, `Collapsible`, `Collection`, `CollectionPagination`, `CollectionToolbar`, `Combobox`, `ContextMenu`, `DataList`, `DataTable`, `DatePicker`, `DescriptionList`, `Dialog`, `Drawer`, `EditableList`, `EmptyState`, `Field`, `Fieldset`, `Form`, `Input`, `ListDetail`, `Menu`, `Menubar`, `Meter`, `MoneyField`, `NavigationMenu`, `NumberField`, `OTPField`, `Popover`, `PreviewCard`, `Progress`, `Radio`, `ScrollArea`, `Select`, `Separator`, `Sheet`, `Slider`, `Splitter`, `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`).
|
|
148
148
|
|
|
149
149
|
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.
|
|
150
150
|
|
|
@@ -158,8 +158,8 @@ Load three things, in this order:
|
|
|
158
158
|
|
|
159
159
|
`window.Loomiere` holds two kinds of component:
|
|
160
160
|
|
|
161
|
-
- **Wrappers** put their own classes on, so use them bare: `Loomiere.Button`, `Loomiere.Input`, `Loomiere.Field`, `Loomiere.Fieldset`, `Loomiere.Form`, `Loomiere.NavigationMenu`, `Loomiere.Select`, `Loomiere.NumberField`, `Loomiere.OTPField`, `Loomiere.Autocomplete`, `Loomiere.Combobox`, `Loomiere.Checkbox`, `Loomiere.Radio`, `Loomiere.CheckboxGroup`, `Loomiere.Toggle`, `Loomiere.ToggleGroup`, `Loomiere.Dialog`, `Loomiere.AlertDialog`, `Loomiere.Meter`, `Loomiere.Progress`, `Loomiere.Slider`, `Loomiere.Menu`, `Loomiere.ContextMenu`, `Loomiere.Menubar`, `Loomiere.Popover`, `Loomiere.PreviewCard`, `Loomiere.Tooltip`, `Loomiere.Drawer`, `Loomiere.Accordion`, `Loomiere.Collapsible`, `Loomiere.Tabs`, `Loomiere.Switch`, `Loomiere.Toast`, `Loomiere.Avatar`, `Loomiere.Toolbar`, `Loomiere.ScrollArea`, `Loomiere.Separator`, `Loomiere.Badge`, `Loomiere.DatePicker`, `Loomiere.MoneyField`, `Loomiere.Splitter`, `Loomiere.ListDetail`, `Loomiere.EmptyState`, `Loomiere.DataTable`, `Loomiere.DataList`, `Loomiere.CollectionToolbar`, `Loomiere.CollectionPagination`, `Loomiere.EditableList`. `Loomiere.Button` also takes `emphasis` (`bold|standard|subtle|quiet`) and `palette` props, and a Button holding only an icon draws itself square (it sets `data-icon-only`). Wrapped parts that are buttons (`Dialog.Trigger`, `Menu.Trigger`, `Toolbar.Button`, `Drawer.Close`...) take the same `emphasis` and `palette` props and draw square the same way. `Popover.Trigger`, `Tooltip.Trigger`, `Select.Trigger` and `Dialog.Close` become Buttons only when they set `emphasis`, `palette` or `className="Button"`. A plain `.Button` on a bare part is drawn square when it has an `aria-label` and a single icon inside, or when you set `data-icon-only` on it. `Loomiere.Badge` takes the same `emphasis` and `palette` props, plus `status`, `size` and `dot`.
|
|
162
|
-
- **Table, Badge, DatePicker, MoneyField, Splitter, ListDetail, EmptyState, DataTable, DataList, CollectionToolbar, CollectionPagination and
|
|
161
|
+
- **Wrappers** put their own classes on, so use them bare: `Loomiere.Button`, `Loomiere.Input`, `Loomiere.Field`, `Loomiere.Fieldset`, `Loomiere.Form`, `Loomiere.NavigationMenu`, `Loomiere.Select`, `Loomiere.NumberField`, `Loomiere.OTPField`, `Loomiere.Autocomplete`, `Loomiere.Combobox`, `Loomiere.Checkbox`, `Loomiere.Radio`, `Loomiere.CheckboxGroup`, `Loomiere.Toggle`, `Loomiere.ToggleGroup`, `Loomiere.Dialog`, `Loomiere.AlertDialog`, `Loomiere.Meter`, `Loomiere.Progress`, `Loomiere.Slider`, `Loomiere.Menu`, `Loomiere.ContextMenu`, `Loomiere.Menubar`, `Loomiere.Popover`, `Loomiere.PreviewCard`, `Loomiere.Tooltip`, `Loomiere.Drawer`, `Loomiere.Accordion`, `Loomiere.Collapsible`, `Loomiere.Tabs`, `Loomiere.Switch`, `Loomiere.Toast`, `Loomiere.Avatar`, `Loomiere.Toolbar`, `Loomiere.ScrollArea`, `Loomiere.Separator`, `Loomiere.Badge`, `Loomiere.DatePicker`, `Loomiere.MoneyField`, `Loomiere.Splitter`, `Loomiere.ListDetail`, `Loomiere.EmptyState`, `Loomiere.DataTable`, `Loomiere.DataList`, `Loomiere.CollectionToolbar`, `Loomiere.CollectionPagination`, `Loomiere.EditableList`, `Loomiere.Sheet`, `Loomiere.StatFigure`, `Loomiere.DescriptionList`. `Loomiere.Button` also takes `emphasis` (`bold|standard|subtle|quiet`) and `palette` props, and a Button holding only an icon draws itself square (it sets `data-icon-only`). Wrapped parts that are buttons (`Dialog.Trigger`, `Menu.Trigger`, `Toolbar.Button`, `Drawer.Close`...) take the same `emphasis` and `palette` props and draw square the same way. `Popover.Trigger`, `Tooltip.Trigger`, `Select.Trigger` and `Dialog.Close` become Buttons only when they set `emphasis`, `palette` or `className="Button"`. A plain `.Button` on a bare part is drawn square when it has an `aria-label` and a single icon inside, or when you set `data-icon-only` on it. `Loomiere.Badge` takes the same `emphasis` and `palette` props, plus `status`, `size` and `dot`.
|
|
162
|
+
- **Table, Badge, DatePicker, MoneyField, Splitter, ListDetail, EmptyState, DataTable, DataList, CollectionToolbar, CollectionPagination, EditableList, Sheet, StatFigure and DescriptionList are Loomiere components**, not Base UI parts. Table is plain HTML for a static table or a report: use the classes in its stylesheet. Badge is `Loomiere.Badge`. DatePicker is `Loomiere.DatePicker`; `Loomiere.Calendar` is the month grid on its own and `Loomiere.DatePresets` is the quick-selection list. MoneyField is `Loomiere.MoneyField`: an amount of money, stored as minor units. Splitter is `Loomiere.Splitter`. ListDetail is `Loomiere.ListDetail`. EmptyState is `Loomiere.EmptyState`. DataTable, DataList, CollectionToolbar and CollectionPagination come from `@scattered-light/loomiere-base-ui/custom/collection` and need `@tanstack/react-table` installed. EditableList, Sheet, StatFigure and DescriptionList (with `Loomiere.DescriptionItem`) come from the package root or `./custom`.
|
|
163
163
|
|
|
164
164
|
`Loomiere.Base` holds the bare Base UI parts for the wrappers too (`Loomiere.Base.Button`), for when you need the part without its classes.
|
|
165
165
|
|
|
@@ -208,6 +208,9 @@ Pick by what the person is doing, not by look:
|
|
|
208
208
|
| `EditableList` | Repeating form rows people add, edit and remove: line items, allocations. |
|
|
209
209
|
| `CollectionToolbar` | Search, tabs, filters and the selection bar for a DataTable or a DataList. |
|
|
210
210
|
| `CollectionPagination` | Which page of a long list you are on. It also works without a collection. |
|
|
211
|
+
| `Sheet` | Frame a section of a working page (open items, a profile, periods) with a ruled top and an optional tab label. A table or list inside runs edge to edge. |
|
|
212
|
+
| `StatFigure` | Lead a page with one figure that matters (a balance, a count to act on), with a caps label and a caption. Give a final total the double underline. |
|
|
213
|
+
| `DescriptionList` | Show label and value pairs, such as a profile. variant="leader" runs dotted leaders to values at the end of the row, as on a working paper. |
|
|
211
214
|
| `EmptyState` | Don't use it for a message about something that just happened (use Toast) or a warning above content that still shows (use a notice or an inline alert). |
|
|
212
215
|
| `Progress` | Show how far a task has got. |
|
|
213
216
|
| `Meter` | Show a measured amount within known limits, such as storage used. |
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Collection
|
|
2
2
|
|
|
3
|
-
The Base UI Collection styled by the theme. DataTable, DataList, the toolbar and the pagination, in one place so the two views share the table concept. Sections: toolbar, table additions, groups, list, pagination, sizes. Each section is its own file so the design system can name the part. This file brings them in. The selection bar replaces the trailing controls (filters, sort,
|
|
3
|
+
The Base UI Collection styled by the theme. DataTable, DataList, the toolbar and the pagination, in one place so the two views share the table concept. Sections: toolbar, table additions, groups, list, pagination, sizes. Each section is its own file so the design system can name the part. This file brings them in. The selection bar replaces the trailing controls (filters, sort, actions) and leaves the tabs and the search where they are, so selecting rows does not grow the toolbar.
|
|
4
4
|
|
|
5
5
|
Use `Loomiere.Collection` (`import { Collection } from '@base-ui/react/collection'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
|
|
6
6
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# CollectionToolbar
|
|
2
2
|
|
|
3
|
-
Loomiere component, not part of Base UI. The wrap follows the toolbar's own width, not the window: a table in a narrow pane wraps even when the page is wide. Search takes the full
|
|
3
|
+
Loomiere component, not part of Base UI. The wrap follows the toolbar's own width, not the window: a table in a narrow pane wraps even when the page is wide. Search grows to fill the row beside the trailing controls, and wraps to its own line before it shrinks under collection.search-min-width. Under the narrow width it takes the full row and filters wrap under it. A container query cannot read the width token, so the component also sets data-narrow. The search icon and the clear button sit inside the field. The browser's own search cancel is hidden by the reset, so the clear button is the only one, in every browser.
|
|
4
4
|
|
|
5
5
|
Use `Loomiere.CollectionToolbar` from `@scattered-light/loomiere-base-ui/custom/collection`. Install `@tanstack/react-table` (peer, optional). It is not on the main entry, so an app that only imports Badge does not need it.
|
|
6
6
|
|
|
@@ -12,11 +12,16 @@ Not a Base UI part, so there is no base-ui.com page for it.
|
|
|
12
12
|
|---|---|
|
|
13
13
|
| `CollectionToolbar` | `data-narrow` |
|
|
14
14
|
| `CollectionToolbarMain` | |
|
|
15
|
-
| `CollectionToolbarTrailing` | |
|
|
16
15
|
| `CollectionSelectionBar` | |
|
|
17
16
|
| `CollectionSort` | |
|
|
18
17
|
| `CollectionSearch` | |
|
|
18
|
+
| `CollectionSearchField` | `data-filled` |
|
|
19
19
|
| `Input` | |
|
|
20
|
+
| `CollectionSearchIcon` | |
|
|
21
|
+
| `CollectionSearchClear` | |
|
|
22
|
+
| `CollectionToolbarTrailing` | |
|
|
23
|
+
| `SelectTrigger` | |
|
|
24
|
+
| `ComboboxInputWrapper` | |
|
|
20
25
|
| `CollectionToolbarActions` | |
|
|
21
26
|
| `CollectionView` | `data-narrow` |
|
|
22
27
|
| `CollectionCount` | |
|
|
@@ -44,7 +44,7 @@ export const Default: Story = {
|
|
|
44
44
|
alignItems: 'center',
|
|
45
45
|
justifyContent: 'center',
|
|
46
46
|
border: '2px dashed var(--sl-border-strong)',
|
|
47
|
-
borderRadius: '
|
|
47
|
+
borderRadius: 'var(--sl-radius-surface)',
|
|
48
48
|
background: 'var(--sl-surface-overlay)',
|
|
49
49
|
cursor: 'context-menu'
|
|
50
50
|
}}>
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
<body>
|
|
13
13
|
<div id="root"></div>
|
|
14
14
|
<script>
|
|
15
|
-
(()=>{var R=Object.create;var d=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var x=(o,n)=>()=>(n||o((n={exports:{}}).exports,n),n.exports),S=(o,n)=>{for(var a in n)d(o,a,{get:n[a],enumerable:!0})},v=(o,n,a,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of k(n))!P.call(o,r)&&r!==a&&d(o,r,{get:()=>n[r],enumerable:!(s=y(n,r))||s.enumerable});return o};var
|
|
15
|
+
(()=>{var R=Object.create;var d=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var x=(o,n)=>()=>(n||o((n={exports:{}}).exports,n),n.exports),S=(o,n)=>{for(var a in n)d(o,a,{get:n[a],enumerable:!0})},v=(o,n,a,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of k(n))!P.call(o,r)&&r!==a&&d(o,r,{get:()=>n[r],enumerable:!(s=y(n,r))||s.enumerable});return o};var C=(o,n,a)=>(a=o!=null?R(f(o)):{},v(n||!o||!o.__esModule?d(a,"default",{value:o,enumerable:!0}):a,o));var I=x((W,p)=>{p.exports=window.React});var b=x((V,h)=>{h.exports=window.Loomiere});var l={};S(l,{Default:()=>N,WithCheckboxes:()=>T,WithDisabledItems:()=>_,WithRadioGroup:()=>E,WithSubmenu:()=>L,default:()=>m});var c=C(I(),1),t=C(b(),1);var u=window.React;function e(o,n,a){let{children:s,...r}=n||{};return a!==void 0&&(r.key=a),s===void 0?u.createElement(o,r):Array.isArray(s)?u.createElement(o,r,...s):u.createElement(o,r,s)}var A=u.Fragment;var w={title:"Components/Lib/ContextMenu",component:t.ContextMenu.Root,parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},m=w,N={render:()=>e(t.ContextMenu.Root,{children:[e(t.ContextMenu.Trigger,{children:e("div",{style:{width:"300px",height:"200px",display:"flex",alignItems:"center",justifyContent:"center",border:"2px dashed var(--sl-border-strong)",borderRadius:"var(--sl-radius-surface)",background:"var(--sl-surface-overlay)",cursor:"context-menu"},children:"Right-click here"})}),e(t.ContextMenu.Portal,{children:e(t.ContextMenu.Positioner,{children:e(t.ContextMenu.Popup,{children:[e(t.ContextMenu.Item,{children:"Copy"}),e(t.ContextMenu.Item,{children:"Cut"}),e(t.ContextMenu.Item,{children:"Paste"}),e(t.ContextMenu.Separator,{}),e(t.ContextMenu.Item,{children:"Delete"})]})})})]})},T={render:()=>{let[o,n]=c.useState(!1),[a,s]=c.useState(!0),[r,g]=c.useState(!1);return e(t.ContextMenu.Root,{children:[e(t.ContextMenu.Trigger,{children:e("div",{style:{width:"300px",height:"200px",display:"flex",alignItems:"center",justifyContent:"center",border:"2px dashed var(--sl-border-strong)",borderRadius:"var(--sl-radius-surface)",background:"var(--sl-surface-overlay)",cursor:"context-menu"},children:"Right-click for view options"})}),e(t.ContextMenu.Portal,{children:e(t.ContextMenu.Positioner,{children:e(t.ContextMenu.Popup,{children:[e(t.ContextMenu.CheckboxItem,{checked:o,onCheckedChange:n,children:[e(t.ContextMenu.CheckboxItemIndicator,{children:e("span",{className:"material-symbols-outlined ContextMenuCheckboxItemIndicatorIcon",children:"check"})}),"Show toolbar"]}),e(t.ContextMenu.CheckboxItem,{checked:a,onCheckedChange:s,children:[e(t.ContextMenu.CheckboxItemIndicator,{children:e("span",{className:"material-symbols-outlined ContextMenuCheckboxItemIndicatorIcon",children:"check"})}),"Show sidebar"]}),e(t.ContextMenu.CheckboxItem,{checked:r,onCheckedChange:g,children:[e(t.ContextMenu.CheckboxItemIndicator,{children:e("span",{className:"material-symbols-outlined ContextMenuCheckboxItemIndicatorIcon",children:"check"})}),"Show footer"]})]})})})]})}},E={render:()=>{let[o,n]=c.useState("light");return e(t.ContextMenu.Root,{children:[e(t.ContextMenu.Trigger,{children:e("div",{style:{width:"300px",height:"200px",display:"flex",alignItems:"center",justifyContent:"center",border:"2px dashed var(--sl-border-strong)",borderRadius:"var(--sl-radius-surface)",background:"var(--sl-surface-overlay)",cursor:"context-menu"},children:"Right-click to change theme"})}),e(t.ContextMenu.Portal,{children:e(t.ContextMenu.Positioner,{children:e(t.ContextMenu.Popup,{children:e(t.ContextMenu.Group,{children:[e(t.ContextMenu.GroupLabel,{children:"Theme"}),e(t.ContextMenu.RadioGroup,{value:o,onValueChange:n,children:[e(t.ContextMenu.RadioItem,{value:"light",children:[e(t.ContextMenu.RadioItemIndicator,{children:e("span",{className:"material-symbols-outlined ContextMenuRadioItemIndicatorIcon",style:{fontVariationSettings:'"FILL" 1'},children:"radio_button_checked"})}),e("span",{className:"ContextMenuRadioItemIndicator","data-unchecked":!0,children:e("span",{className:"material-symbols-outlined ContextMenuRadioItemIndicatorIcon",children:"radio_button_unchecked"})}),"Light"]}),e(t.ContextMenu.RadioItem,{value:"dark",children:[e(t.ContextMenu.RadioItemIndicator,{children:e("span",{className:"material-symbols-outlined ContextMenuRadioItemIndicatorIcon",style:{fontVariationSettings:'"FILL" 1'},children:"radio_button_checked"})}),e("span",{className:"ContextMenuRadioItemIndicator","data-unchecked":!0,children:e("span",{className:"material-symbols-outlined ContextMenuRadioItemIndicatorIcon",children:"radio_button_unchecked"})}),"Dark"]}),e(t.ContextMenu.RadioItem,{value:"system",children:[e(t.ContextMenu.RadioItemIndicator,{children:e("span",{className:"material-symbols-outlined ContextMenuRadioItemIndicatorIcon",style:{fontVariationSettings:'"FILL" 1'},children:"radio_button_checked"})}),e("span",{className:"ContextMenuRadioItemIndicator","data-unchecked":!0,children:e("span",{className:"material-symbols-outlined ContextMenuRadioItemIndicatorIcon",children:"radio_button_unchecked"})}),"System"]})]})]})})})})]})}},L={render:()=>e(t.ContextMenu.Root,{children:[e(t.ContextMenu.Trigger,{children:e("div",{style:{width:"300px",height:"200px",display:"flex",alignItems:"center",justifyContent:"center",border:"2px dashed var(--sl-border-strong)",borderRadius:"var(--sl-radius-surface)",background:"var(--sl-surface-overlay)",cursor:"context-menu"},children:"Right-click for nested menu"})}),e(t.ContextMenu.Portal,{children:e(t.ContextMenu.Positioner,{children:e(t.ContextMenu.Popup,{children:[e(t.ContextMenu.Item,{children:"New File"}),e(t.ContextMenu.Item,{children:"New Folder"}),e(t.ContextMenu.Separator,{}),e(t.ContextMenu.SubmenuRoot,{children:[e(t.ContextMenu.SubmenuTrigger,{children:"Share"}),e(t.ContextMenu.Portal,{children:e(t.ContextMenu.Positioner,{children:e(t.ContextMenu.Popup,{children:[e(t.ContextMenu.Item,{children:"Email"}),e(t.ContextMenu.Item,{children:"Copy Link"}),e(t.ContextMenu.Item,{children:"Social Media"})]})})})]})]})})})]})},_={render:()=>e(t.ContextMenu.Root,{children:[e(t.ContextMenu.Trigger,{children:e("div",{style:{width:"300px",height:"200px",display:"flex",alignItems:"center",justifyContent:"center",border:"2px dashed var(--sl-border-strong)",borderRadius:"var(--sl-radius-surface)",background:"var(--sl-surface-overlay)",cursor:"context-menu"},children:"Right-click here"})}),e(t.ContextMenu.Portal,{children:e(t.ContextMenu.Positioner,{children:e(t.ContextMenu.Popup,{children:[e(t.ContextMenu.Item,{children:"Copy"}),e(t.ContextMenu.Item,{disabled:!0,children:"Cut (disabled)"}),e(t.ContextMenu.Item,{disabled:!0,children:"Paste (disabled)"}),e(t.ContextMenu.Separator,{}),e(t.ContextMenu.Item,{children:"Delete"})]})})})]})};var i=window.React,M=m||{},F=["Default","WithCheckboxes","WithRadioGroup","WithSubmenu"];function j({id:o}){let n=l[o],a={...M.args||{},...n.args||{}};return(n.render||(r=>i.createElement(M.component,r)))(a,{args:a,id:o,name:o})}var D=F.map(o=>i.createElement("section",{key:o,className:"ds-story"},i.createElement("p",{className:"ds-story-name"},o.replace(/([a-z])([A-Z])/g,"$1 $2")),i.createElement("div",{className:"ds-story-body"},i.createElement(j,{id:o}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,D));})();
|
|
16
16
|
|
|
17
17
|
</script>
|
|
18
18
|
</body>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# DataList
|
|
2
2
|
|
|
3
|
-
Loomiere component, not part of Base UI. The same rows as the table, in one container with the table's borders, hover, selected and current states. Not a stack of floating cards: the two views should read as one family. variant=cards adds the surface radius and a gap when a queue should read as separate items.
|
|
3
|
+
Loomiere component, not part of Base UI. The same rows as the table, in one container with the table's borders, hover, selected and current states. Not a stack of floating cards: the two views should read as one family. variant=cards adds the surface radius and a gap when a queue should read as separate items. The working-paper rule (rule.width, 0 by default) replaces the top border with a heavier line in rule.color: on the first row, or on each card's top edge.
|
|
4
4
|
|
|
5
5
|
Use `Loomiere.DataList` from `@scattered-light/loomiere-base-ui/custom/collection`. Install `@tanstack/react-table` (peer, optional). It is not on the main entry, so an app that only imports Badge does not need it.
|
|
6
6
|
|