@scattered-light/loomiere-base-ui 0.19.0 → 0.20.1
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/README.md +4 -2
- package/dist/{chunk-M7KJASGK.js → chunk-43IJNNXK.js} +86 -3
- package/dist/chunk-43IJNNXK.js.map +1 -0
- package/dist/{chunk-2BFNETZZ.js → chunk-B5FH3RF5.js} +33 -15
- package/dist/chunk-B5FH3RF5.js.map +1 -0
- package/dist/chunk-Z6SR3KMB.js +77 -0
- package/dist/chunk-Z6SR3KMB.js.map +1 -0
- package/dist/custom/collection/index.d.ts +37 -2
- package/dist/custom/collection/index.js +70 -5
- package/dist/custom/collection/index.js.map +1 -1
- package/dist/custom/index.d.ts +1 -1
- package/dist/custom/index.js +2 -2
- package/dist/design-system/components/CollectionCards/README.md +32 -0
- package/dist/design-system/components/CollectionCards/preview.html +2 -2
- package/dist/design-system/components/CollectionToolbar/README.md +3 -1
- package/dist/design-system/components/PickerButton/README.md +1 -1
- package/dist/design-system/components/SplitButton/README.md +25 -0
- package/dist/design-system/components/SplitButton/preview.html +19 -0
- package/dist/design-system/components/StatCard/README.md +4 -1
- package/dist/design-system/components/StatCard/preview.html +1 -1
- package/dist/design-system/components/bundle.js +7 -7
- package/dist/design-system/components/index.d.ts +1 -1
- package/dist/design-system/components/styles.css +180 -67
- package/dist/{index-ywBkS0AA.d.ts → index-CB3_OECu.d.ts} +35 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +5 -18
- package/dist/index.js.map +1 -1
- package/dist/styles/components/Accordion.css +1 -1
- package/dist/styles/components/AlertDialog.css +1 -1
- package/dist/styles/components/Autocomplete.css +1 -1
- package/dist/styles/components/Avatar.css +1 -1
- package/dist/styles/components/Button.css +1 -1
- package/dist/styles/components/Checkbox.css +1 -1
- package/dist/styles/components/CheckboxGroup.css +1 -1
- package/dist/styles/components/Collapsible.css +1 -1
- package/dist/styles/components/Combobox.css +1 -1
- package/dist/styles/components/ContextMenu.css +1 -1
- package/dist/styles/components/Dialog.css +1 -1
- package/dist/styles/components/Drawer.css +1 -1
- package/dist/styles/components/Field.css +1 -1
- package/dist/styles/components/Fieldset.css +1 -1
- package/dist/styles/components/Form.css +1 -1
- package/dist/styles/components/Input.css +1 -1
- package/dist/styles/components/Menu.css +1 -1
- package/dist/styles/components/Menubar.css +1 -1
- package/dist/styles/components/Meter.css +1 -1
- package/dist/styles/components/NavigationMenu.css +1 -1
- package/dist/styles/components/NumberField.css +1 -1
- package/dist/styles/components/OTPField.css +1 -1
- package/dist/styles/components/Popover.css +1 -1
- package/dist/styles/components/PreviewCard.css +1 -1
- package/dist/styles/components/Progress.css +1 -1
- package/dist/styles/components/Radio.css +1 -1
- package/dist/styles/components/ScrollArea.css +1 -1
- package/dist/styles/components/Select.css +1 -1
- package/dist/styles/components/Separator.css +1 -1
- package/dist/styles/components/Slider.css +1 -1
- package/dist/styles/components/Switch.css +1 -1
- package/dist/styles/components/Tabs.css +1 -1
- package/dist/styles/components/Toast.css +1 -1
- package/dist/styles/components/Toggle.css +1 -1
- package/dist/styles/components/ToggleGroup.css +1 -1
- package/dist/styles/components/Toolbar.css +1 -1
- package/dist/styles/components/Tooltip.css +1 -1
- package/dist/styles/custom/AppBar.css +1 -1
- package/dist/styles/custom/Badge.css +1 -1
- package/dist/styles/custom/Collection.css +1 -1
- package/dist/styles/custom/CollectionCards.css +1 -1
- package/dist/styles/custom/CollectionPagination.css +1 -1
- package/dist/styles/custom/CollectionToolbar.css +47 -1
- package/dist/styles/custom/DataList.css +1 -1
- package/dist/styles/custom/DataTable.css +1 -1
- package/dist/styles/custom/DatePicker.css +1 -1
- package/dist/styles/custom/DescriptionList.css +1 -1
- package/dist/styles/custom/EditableList.css +1 -1
- package/dist/styles/custom/EmptyState.css +1 -1
- package/dist/styles/custom/ListDetail.css +1 -1
- package/dist/styles/custom/MoneyField.css +1 -1
- package/dist/styles/custom/PickerButton.css +4 -4
- package/dist/styles/custom/PickerSplit.css +2 -2
- package/dist/styles/custom/Sheet.css +1 -1
- package/dist/styles/custom/SideNav.css +1 -1
- package/dist/styles/custom/SplitButton.css +23 -0
- package/dist/styles/custom/Splitter.css +1 -1
- package/dist/styles/custom/StatCard.css +44 -1
- package/dist/styles/custom/StatFigure.css +1 -1
- package/dist/styles/custom/Table.css +1 -1
- package/dist/styles/index.css +2 -1
- package/dist/styles/reset/accessibility.css +1 -1
- package/dist/styles/reset/reset-accessibility.css +1 -1
- package/dist/styles/reset/reset-tailwind.css +1 -1
- package/dist/styles/reset/reset.css +1 -1
- package/dist/styles/tailwind.css +2 -1
- package/package.json +2 -2
- package/dist/chunk-2BFNETZZ.js.map +0 -1
- package/dist/chunk-M7KJASGK.js.map +0 -1
- package/dist/chunk-Y2CPBMFJ.js +0 -147
- package/dist/chunk-Y2CPBMFJ.js.map +0 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.20.1 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Form - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* No component tokens: fields stack with the large block space, and the action
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.20.1 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Input - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* No component tokens: the look is the field concept (tokens/semantic/field.json),
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.20.1 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Menu - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* No component tokens. The trigger is a Button. The popup is the popup concept, rows are item rows at the
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.20.1 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Menubar - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* No component tokens. A row of quiet triggers, each opening a menu. The popup is the popup concept, rows are item rows at the
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.20.1 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Meter - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* A gauge (tokens/semantic/gauge.json). The fill is the solid color of the scope around it:
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.20.1 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Navigation Menu - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* The strip is the bar concept, the panel is the popup concept and each link is an item
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.20.1 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Number Field - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* No component tokens. The input is Input (Input.css) and the label, description and
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.20.1 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* OTP Field - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* One-time code entry: a row of single-character inputs. Each slot is the same control as Input
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.20.1 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Preview Card - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* The popup concept (surface, arrow, motion) with a title-magnify title and condense
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.20.1 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Progress - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* A gauge (tokens/semantic/gauge.json), the same bar as Meter. The fill is the solid color of
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.20.1 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Radio - Mojave Theme
|
|
3
3
|
* Same box as Checkbox, always round. Sizes follow the label the same way, and the
|
|
4
4
|
* dot is a share of the circle (check.dot-scale).
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.20.1 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Scroll Area - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* The scrollbar is the content scrollbar (content.scrollbar-*): a track that stays clear until
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.20.1 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Select - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* The trigger is a field (the field pattern, control sizes, the base text style); the
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.20.1 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Separator - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* A hairline in the everyday divider color (border.default), one stroke thick, with a step of
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.20.1 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Slider - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* A slider is a gauge you can drag: the track, fill and label row are gauge.* (the same bar as
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.20.1 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Switch - Mojave Theme
|
|
3
3
|
* Switch keeps its track sizes. The thumb, its travel and the ON/OFF text are
|
|
4
4
|
* worked out from them: the thumb fills the track's height inside the padding,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.20.1 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Tabs - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* No component tokens. The divider, the selected line and color, hover and the disabled
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.20.1 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Toast - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* A toast is a notice (tokens/semantic/notice.json) on the popup surface. A toast whose type
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.20.1 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Toggle - Mojave Theme
|
|
3
3
|
* A toggle is a button that stays pressed: the same heights, padding, gap and
|
|
4
4
|
* trigger text style as a button of the same size. Pressed, it takes its emphasis level's
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.20.1 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Toggle Group - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* No component tokens. The strip is the bar concept (tokens/semantic/bar.json); the
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.20.1 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Toolbar - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* The strip is the bar concept (tokens/semantic/bar.json). Buttons, toggles, selects
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.20.1 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Tooltip - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* The inverse surface (surface.inverse, text.on-inverse-surface) with condense text, so a tooltip
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.20.1 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* AppBar
|
|
3
3
|
*
|
|
4
4
|
* The bar across the top of an app window, one row on a line in the rule color. The line is
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.20.1 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Collection cards
|
|
3
3
|
*
|
|
4
4
|
* The page of a collection as a grid. Columns fill the width, none narrower than
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.20.1 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Pagination
|
|
3
3
|
*
|
|
4
4
|
* Not tied to a collection. Anything with a page, a page count and a total can use it.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.20.1 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Collection toolbar
|
|
3
3
|
*
|
|
4
4
|
* The wrap follows the toolbar's own width, not the window: a table in a narrow pane wraps
|
|
@@ -163,3 +163,49 @@
|
|
|
163
163
|
padding: var(--sl-collection-toolbar-frame-padding);
|
|
164
164
|
border-block-end: var(--sl-stroke-default) solid var(--sl-table-border-color);
|
|
165
165
|
}
|
|
166
|
+
|
|
167
|
+
/* Segmented toolbar: search, then toggle groups, in one wrapping row. `ruled` adds the sheet
|
|
168
|
+
rule above it. A group marked `end` (and the ones after it) sits at the far end. */
|
|
169
|
+
.CollectionToolbar[data-segmented] {
|
|
170
|
+
flex-direction: row;
|
|
171
|
+
flex-wrap: wrap;
|
|
172
|
+
align-items: center;
|
|
173
|
+
column-gap: var(--sl-space-4);
|
|
174
|
+
row-gap: var(--sl-space-3);
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.CollectionToolbar[data-segmented][data-ruled] {
|
|
178
|
+
border-top: var(--sl-sheet-rule-width) solid var(--sl-border-strong, currentColor);
|
|
179
|
+
padding-top: var(--sl-space-3);
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.CollectionToolbar[data-segmented] .CollectionSearch {
|
|
183
|
+
flex: 0 1 var(--sl-collection-search-fixed-width);
|
|
184
|
+
min-width: 12rem;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
.CollectionSegment {
|
|
188
|
+
display: flex;
|
|
189
|
+
align-items: center;
|
|
190
|
+
gap: var(--sl-space-2);
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.CollectionSegment[data-end] {
|
|
194
|
+
margin-inline-start: auto;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.CollectionSegmentLabel {
|
|
198
|
+
font-family: var(--sl-font-figures-condense-font-family);
|
|
199
|
+
font-size: var(--sl-font-figures-condense-font-size);
|
|
200
|
+
font-weight: var(--sl-font-figures-condense-font-weight);
|
|
201
|
+
line-height: var(--sl-font-figures-condense-line-height);
|
|
202
|
+
letter-spacing: var(--sl-font-figures-condense-letter-spacing);
|
|
203
|
+
font-variant-numeric: var(--sl-font-figures-condense-font-variant-numeric);
|
|
204
|
+
font-weight: 600;
|
|
205
|
+
text-transform: uppercase;
|
|
206
|
+
color: var(--sl-text-secondary);
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.CollectionToolbar[data-segmented] .CollectionToolbarMeta {
|
|
210
|
+
margin-inline-start: auto;
|
|
211
|
+
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.20.1 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* DataList
|
|
3
3
|
*
|
|
4
4
|
* The same rows as the table, in one container with the table's borders, hover, selected
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.20.1 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* DataTable additions on top of .Table.
|
|
3
3
|
*
|
|
4
4
|
* Sort buttons fill the header cell and inherit its hover, so old aria-sort markup keeps
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.20.1 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/*
|
|
3
3
|
* DatePicker: a field that opens a calendar for one date or a period.
|
|
4
4
|
* Not a Base UI part. The popup is Popover on a wide viewport and Drawer
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.20.1 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* DescriptionList
|
|
3
3
|
*
|
|
4
4
|
* Label and value pairs in a native dl, one DescriptionItem (a div holding a dt and a dd)
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.20.1 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* EditableList
|
|
3
3
|
*
|
|
4
4
|
* One table at every width, so a field is not submitted twice. Under the stack width each
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.20.1 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* PickerButton
|
|
3
3
|
*
|
|
4
4
|
* A trigger with a caps label before the current choice: CLIENT Alpha Services. The field
|
|
5
5
|
* look and states of a Select trigger; the label is caps-condense in picker-button.label-color,
|
|
6
6
|
* the choice is cut with an ellipsis at picker-button.max-width and the chevron turns while
|
|
7
|
-
* its popup is open. Label and choice
|
|
7
|
+
* its popup is open. Label and choice are centered on the control's height, so a caps label and its choice sit level at any font size;
|
|
8
8
|
* picker-button.text-offset nudges both down for a typeface that sits high. Tokens: picker-button.* (tokens/component/picker-button.json) and field.*.
|
|
9
9
|
*/
|
|
10
10
|
|
|
@@ -21,13 +21,13 @@
|
|
|
21
21
|
font-weight: var(--sl-font-body-base-font-weight);
|
|
22
22
|
line-height: var(--sl-font-body-base-line-height);
|
|
23
23
|
letter-spacing: var(--sl-font-body-base-letter-spacing);
|
|
24
|
-
/* A grid, not a flex row: label and choice
|
|
24
|
+
/* A grid, not a flex row: label and choice are centered on the same line, and align-content centers that
|
|
25
25
|
pair in the button's height. The choice column shrinks so a long choice gets its ellipsis. */
|
|
26
26
|
display: inline-grid;
|
|
27
27
|
grid-auto-flow: column;
|
|
28
28
|
grid-template-columns: max-content minmax(0, max-content);
|
|
29
29
|
grid-auto-columns: max-content;
|
|
30
|
-
align-items:
|
|
30
|
+
align-items: center;
|
|
31
31
|
align-content: center;
|
|
32
32
|
justify-content: start;
|
|
33
33
|
gap: var(--sl-gap-control);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.20.1 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* PickerSplit
|
|
3
3
|
*
|
|
4
4
|
* A PickerButton whose choice is itself a control: the main part (CLIENT Alpha Services) acts,
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
grid-auto-flow: column;
|
|
54
54
|
grid-template-columns: max-content minmax(0, max-content);
|
|
55
55
|
grid-auto-columns: max-content;
|
|
56
|
-
align-items:
|
|
56
|
+
align-items: center;
|
|
57
57
|
align-content: center;
|
|
58
58
|
justify-content: start;
|
|
59
59
|
gap: var(--sl-gap-control);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.20.1 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* SideNav
|
|
3
3
|
*
|
|
4
4
|
* The column of links down the side of a workspace. Rows are ruled apart with a hairline; the
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.20.1 · styles for @base-ui/react 1.9.0 */
|
|
2
|
+
/* SplitButton
|
|
3
|
+
*
|
|
4
|
+
* A Button and a square Menu trigger side by side, joined into one outline: the inner corners
|
|
5
|
+
* are square and the trigger overlaps the main part's border by one stroke.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
.SplitButton {
|
|
9
|
+
display: inline-flex;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
/* The open Menu adds hidden focus-guard spans beside the chevron, so :first-child and :last-child
|
|
13
|
+
can match a span. Select the buttons by type instead. */
|
|
14
|
+
.SplitButton > button:first-of-type {
|
|
15
|
+
border-start-end-radius: 0;
|
|
16
|
+
border-end-end-radius: 0;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.SplitButton > button:last-of-type {
|
|
20
|
+
border-start-start-radius: 0;
|
|
21
|
+
border-end-start-radius: 0;
|
|
22
|
+
margin-inline-start: -1px;
|
|
23
|
+
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.20.1 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* StatCard
|
|
3
3
|
*
|
|
4
4
|
* A card for one thing a page lists: a name (the heading), a caption, and a row of StatFigures
|
|
@@ -116,3 +116,46 @@
|
|
|
116
116
|
padding: var(--sl-stat-card-header-padding-block) var(--sl-stat-card-padding-inline);
|
|
117
117
|
border-top: var(--sl-stat-card-border-width) solid var(--sl-stat-card-footer-border-color);
|
|
118
118
|
}
|
|
119
|
+
|
|
120
|
+
/* Detailed card: details (a leader list), a status and actions. The figures sit snug, the list
|
|
121
|
+
runs with no rules between pairs, and the footer is a column ending in a ruled bar. */
|
|
122
|
+
.StatCard[data-detailed] {
|
|
123
|
+
--sl-stat-card-facts-padding-block: var(--sl-space-2);
|
|
124
|
+
--sl-description-list-row-border-color: transparent;
|
|
125
|
+
--sl-description-list-row-padding-block: var(--sl-space-1);
|
|
126
|
+
--sl-stat-card-footer-border-color: var(--sl-stat-card-rule-color);
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.StatCard[data-detailed] .StatCardFooter {
|
|
130
|
+
display: flex;
|
|
131
|
+
flex-direction: column;
|
|
132
|
+
padding: 0;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.StatCard[data-detailed] .DescriptionList {
|
|
136
|
+
padding-block: var(--sl-space-1);
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
/* The bar sits above the card's link so its buttons stay clickable. */
|
|
140
|
+
.StatCardBar {
|
|
141
|
+
position: relative;
|
|
142
|
+
z-index: 1;
|
|
143
|
+
display: flex;
|
|
144
|
+
align-items: center;
|
|
145
|
+
gap: var(--sl-space-2);
|
|
146
|
+
margin-top: auto;
|
|
147
|
+
padding: var(--sl-space-2) var(--sl-stat-card-padding-inline);
|
|
148
|
+
border-top: var(--sl-stroke-default) solid var(--sl-stat-card-facts-divider-color);
|
|
149
|
+
background: var(--sl-stat-card-background-hover);
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.StatCardStatus {
|
|
153
|
+
font-family: var(--sl-font-body-condense-font-family);
|
|
154
|
+
font-size: var(--sl-font-body-condense-font-size);
|
|
155
|
+
font-weight: var(--sl-font-body-condense-font-weight);
|
|
156
|
+
line-height: var(--sl-font-body-condense-line-height);
|
|
157
|
+
letter-spacing: var(--sl-font-body-condense-letter-spacing);
|
|
158
|
+
margin-inline-end: auto;
|
|
159
|
+
font-weight: 600;
|
|
160
|
+
white-space: nowrap;
|
|
161
|
+
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.20.1 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Table - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* Base UI has no table, so this styles the native <table class="Table"> elements with the
|
package/dist/styles/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.20.1 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Loomiere for Base UI: component styles. Brand-free: every value is a --sl- variable from a
|
|
3
3
|
Loomiere theme. Load the theme first:
|
|
4
4
|
@import '<your theme>/tokens.css';
|
|
@@ -68,4 +68,5 @@
|
|
|
68
68
|
@import './custom/AppBar.css';
|
|
69
69
|
@import './custom/PickerButton.css';
|
|
70
70
|
@import './custom/PickerSplit.css';
|
|
71
|
+
@import './custom/SplitButton.css';
|
|
71
72
|
@import './custom/SideNav.css';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.20.1 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Focus, invalid, contrast — requires theme tokens (after theme-accessibility.css). */
|
|
3
3
|
|
|
4
4
|
:focus-visible {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.20.1 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Accessibility — base rules (no theme color dependencies). Theme-specific focus/invalid: accessibility-theme.css */
|
|
3
3
|
|
|
4
4
|
/* Remove default focus; keyboard focus styled in accessibility-theme.css */
|
package/dist/styles/tailwind.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.20.1 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Loomiere for Base UI: component styles for Tailwind CSS v4. Load Tailwind and the theme first:
|
|
3
3
|
@import 'tailwindcss';
|
|
4
4
|
@import '<your theme>/tokens.css';
|
|
@@ -71,4 +71,5 @@
|
|
|
71
71
|
@import './custom/AppBar.css' layer(components);
|
|
72
72
|
@import './custom/PickerButton.css' layer(components);
|
|
73
73
|
@import './custom/PickerSplit.css' layer(components);
|
|
74
|
+
@import './custom/SplitButton.css' layer(components);
|
|
74
75
|
@import './custom/SideNav.css' layer(components);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@scattered-light/loomiere-base-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.20.1",
|
|
4
4
|
"description": "Base UI components styled by any Loomiere theme. Brand-free: every value is a --sl- variable.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"base-ui",
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
}
|
|
77
77
|
},
|
|
78
78
|
"devDependencies": {
|
|
79
|
-
"@scattered-light/loomiere": "0.
|
|
79
|
+
"@scattered-light/loomiere": "0.20.1",
|
|
80
80
|
"@tanstack/react-table": "^9.3.1"
|
|
81
81
|
}
|
|
82
82
|
}
|