@scattered-light/loomiere-base-ui 0.15.6 → 0.16.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/README.md +16 -1
- package/dist/{chunk-RLXKWWZG.js → chunk-TVZOM4US.js} +24 -3
- package/dist/chunk-TVZOM4US.js.map +1 -0
- package/dist/custom/index.d.ts +1 -1
- package/dist/custom/index.js +1 -1
- package/dist/design-system/components/StatCard/README.md +50 -0
- package/dist/design-system/components/StatCard/preview.html +19 -0
- 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 +158 -61
- package/dist/{index-BlPgd6jW.d.ts → index-CoS-HLC1.d.ts} +25 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +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/CollectionPagination.css +1 -1
- package/dist/styles/custom/CollectionToolbar.css +1 -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 +1 -1
- package/dist/styles/custom/PickerSplit.css +1 -1
- package/dist/styles/custom/Sheet.css +1 -1
- package/dist/styles/custom/SideNav.css +1 -1
- package/dist/styles/custom/Splitter.css +1 -1
- package/dist/styles/custom/StatCard.css +96 -0
- 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-RLXKWWZG.js.map +0 -1
|
@@ -768,6 +768,30 @@ type StatFigureProps = Omit<React.ComponentProps<'div'>, 'children'> & {
|
|
|
768
768
|
*/
|
|
769
769
|
declare const StatFigure: React.ForwardRefExoticComponent<Omit<StatFigureProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
770
770
|
|
|
771
|
+
type StatCardFact = Pick<StatFigureProps, 'label' | 'value' | 'caption' | 'tone'>;
|
|
772
|
+
type StatCardProps = Omit<React.ComponentProps<'article'>, 'title'> & {
|
|
773
|
+
/** The name of the thing: "North Company". It is the card's heading, and its link when the card opens something. */
|
|
774
|
+
title: React.ReactNode;
|
|
775
|
+
/** A short line under the name: "USD · 1 account". */
|
|
776
|
+
caption?: React.ReactNode;
|
|
777
|
+
/** The figures, left to right, one equal column each. Pass them already formatted. */
|
|
778
|
+
facts: StatCardFact[];
|
|
779
|
+
/** Makes the title a link and the whole card its target. */
|
|
780
|
+
href?: string;
|
|
781
|
+
/** Makes the title a button and the whole card its target. Ignored when `href` is set. */
|
|
782
|
+
onOpen?: () => void;
|
|
783
|
+
/** The heading level of the title, so the card fits the page's outline. Default 3. */
|
|
784
|
+
headingLevel?: 2 | 3 | 4 | 5 | 6;
|
|
785
|
+
/** A line under the figures: a total, a date, a note. */
|
|
786
|
+
footer?: React.ReactNode;
|
|
787
|
+
};
|
|
788
|
+
/**
|
|
789
|
+
* A card for one thing a page lists, with its name, a caption and a row of figures. Give it
|
|
790
|
+
* `href` or `onOpen` and the whole card opens, through the title: one tab stop, named by the title.
|
|
791
|
+
* Not a Base UI part, so it does not take `render`.
|
|
792
|
+
*/
|
|
793
|
+
declare const StatCard: React.ForwardRefExoticComponent<Omit<StatCardProps, "ref"> & React.RefAttributes<HTMLElement>>;
|
|
794
|
+
|
|
771
795
|
type DescriptionListProps = React.ComponentProps<'dl'> & {
|
|
772
796
|
/**
|
|
773
797
|
* "columns" (the default) sets labels in a column beside their values. "leader" runs a dotted
|
|
@@ -963,4 +987,4 @@ declare const EditableList: {
|
|
|
963
987
|
Balance: typeof EditableListBalance;
|
|
964
988
|
};
|
|
965
989
|
|
|
966
|
-
export { type SideNavProps as $, AppBar as A, Badge as B, Calendar as C, DatePicker as D, EditableList as E, type MoneyFieldRootProps as F, type NumberFieldLabelProps as G, type PickerButtonProps as H, PickerSplit as I, PickerSplitMain as J, type PickerSplitMainProps as K, ListDetail as L, MoneyField as M, NumberField as N, type PickerSplitProps as O, PickerButton as P, PickerSplitTrigger as Q, type PickerSplitTriggerProps as R, type Preset as S, type PresetValue as T, Sheet as U, type SheetProps as V, SideNav as W, SideNavGroup as X, type SideNavGroupProps as Y, SideNavItem as Z, type SideNavItemProps as _, type AppBarProps as a,
|
|
990
|
+
export { type SideNavProps as $, AppBar as A, Badge as B, Calendar as C, DatePicker as D, EditableList as E, type MoneyFieldRootProps as F, type NumberFieldLabelProps as G, type PickerButtonProps as H, PickerSplit as I, PickerSplitMain as J, type PickerSplitMainProps as K, ListDetail as L, MoneyField as M, NumberField as N, type PickerSplitProps as O, PickerButton as P, PickerSplitTrigger as Q, type PickerSplitTriggerProps as R, type Preset as S, type PresetValue as T, Sheet as U, type SheetProps as V, SideNav as W, SideNavGroup as X, type SideNavGroupProps as Y, SideNavItem as Z, type SideNavItemProps as _, type AppBarProps as a, type RuntimePanel as a$, SideNavToggle as a0, type SideNavToggleProps as a1, Splitter as a2, type SplitterHandleProps as a3, type SplitterPanelProps as a4, type SplitterRootProps as a5, StatCard as a6, type StatCardFact as a7, type StatCardProps as a8, StatFigure as a9, thisMonth as aA, thisQuarter as aB, thisWeek as aC, toDecimalString as aD, toMinorUnits as aE, today as aF, todayDate as aG, tomorrow as aH, useListDetail as aI, yearToDate as aJ, yesterday as aK, CURRENCY_SEARCH_THRESHOLD as aL, CurrencySelect as aM, type KeyOptions as aN, ListDetailDetail as aO, ListDetailList as aP, ListDetailRoot as aQ, MAX_MINOR_UNITS as aR, type MoneyChangeDetails as aS, type MoneyDisplay as aT, MoneyFieldAffix as aU, MoneyFieldGroup as aV, MoneyFieldInput as aW, MoneyFieldRoot as aX, type MoneyFieldSteps as aY, type NormalizedPaste as aZ, type PanelSpec as a_, type StatFigureProps as aa, addDays as ab, addMonths as ac, builtinPresets as ad, clampDate as ae, daysInMonth as af, defaultPresets as ag, defaultWeekStartsOn as ah, endOfWeek as ai, formatMoney as aj, fromMinorUnits as ak, getCurrencyDigits as al, inclusiveDays as am, isValidCurrency as an, isoWeek as ao, last30Days as ap, last7Days as aq, lastMonth as ar, lastWeek as as, lengthBlockReason as at, nextMonth as au, nextWeek as av, orderRange as aw, parseDecimalString as ax, resolvePreset as ay, startOfWeek as az, AppBarSpacer as b, type Size as b0, type SizeInput as b1, SplitterHandle as b2, type SplitterKey as b3, SplitterPanel as b4, SplitterRoot as b5, type StoredLayout as b6, type StoredPanel as b7, affixSide as b8, applyKey as b9, toggleCollapsed as bA, valueText as bB, applyStored as ba, ariaPercents as bb, createPanels as bc, cssSize as bd, currencyName as be, currencySymbol as bf, formatDay as bg, formatFull as bh, handleTarget as bi, layoutOf as bj, measure as bk, monthCells as bl, moveFocusDate as bm, normalizePaste as bn, parseDate as bo, parseSize as bp, presetInBounds as bq, resetToDefault as br, resizeByDelta as bs, roundHalfExpand as bt, roundingChangesValue as bu, sameSelection as bv, serializeSize as bw, settle as bx, sizeText as by, syncPanels as bz, type AppBarSpacerProps as c, type BadgeProps as d, type CalendarProps as e, type CurrencyCode as f, type DatePickerProps as g, DatePresets as h, type DatePresetsProps as i, type DateRange as j, type DateValue as k, DescriptionItem as l, type DescriptionItemProps as m, DescriptionList as n, type DescriptionListProps as o, type EditableListApi as p, type EditableListRootProps as q, EmptyState as r, type EmptyStateKind as s, type EmptyStateProps as t, type ListDetailCloseReason as u, type ListDetailDetailProps as v, type ListDetailLayout as w, type ListDetailRootProps as x, type ListDetailValue as y, type MoneyFieldProps as z };
|
package/dist/index.d.ts
CHANGED
|
@@ -7,7 +7,7 @@ import { Fieldset as Fieldset$1 } from '@base-ui/react/fieldset';
|
|
|
7
7
|
import { Form as Form$1 } from '@base-ui/react/form';
|
|
8
8
|
import { NavigationMenu as NavigationMenu$1 } from '@base-ui/react/navigation-menu';
|
|
9
9
|
import { Select as Select$1 } from '@base-ui/react/select';
|
|
10
|
-
export { A as AppBar, a as AppBarProps, b as AppBarSpacer, c as AppBarSpacerProps, B as Badge, d as BadgeProps, C as Calendar, e as CalendarProps, f as CurrencyCode, D as DatePicker, g as DatePickerProps, h as DatePresets, i as DatePresetsProps, j as DateRange, k as DateValue, l as DescriptionItem, m as DescriptionItemProps, n as DescriptionList, o as DescriptionListProps, E as EditableList, p as EditableListApi, q as EditableListRootProps, r as EmptyState, s as EmptyStateKind, t as EmptyStateProps, L as ListDetail, u as ListDetailCloseReason, v as ListDetailDetailProps, w as ListDetailLayout, x as ListDetailRootProps, y as ListDetailValue, M as MoneyField, z as MoneyFieldProps, F as MoneyFieldRootProps, N as NumberField, G as NumberFieldLabelProps, P as PickerButton, H as PickerButtonProps, I as PickerSplit, J as PickerSplitMain, K as PickerSplitMainProps, O as PickerSplitProps, Q as PickerSplitTrigger, R as PickerSplitTriggerProps, S as Preset, T as PresetValue, U as Sheet, V as SheetProps, W as SideNav, X as SideNavGroup, Y as SideNavGroupProps, Z as SideNavItem, _ as SideNavItemProps, $ as SideNavProps, a0 as SideNavToggle, a1 as SideNavToggleProps, a2 as Splitter, a3 as SplitterHandleProps, a4 as SplitterPanelProps, a5 as SplitterRootProps, a6 as
|
|
10
|
+
export { A as AppBar, a as AppBarProps, b as AppBarSpacer, c as AppBarSpacerProps, B as Badge, d as BadgeProps, C as Calendar, e as CalendarProps, f as CurrencyCode, D as DatePicker, g as DatePickerProps, h as DatePresets, i as DatePresetsProps, j as DateRange, k as DateValue, l as DescriptionItem, m as DescriptionItemProps, n as DescriptionList, o as DescriptionListProps, E as EditableList, p as EditableListApi, q as EditableListRootProps, r as EmptyState, s as EmptyStateKind, t as EmptyStateProps, L as ListDetail, u as ListDetailCloseReason, v as ListDetailDetailProps, w as ListDetailLayout, x as ListDetailRootProps, y as ListDetailValue, M as MoneyField, z as MoneyFieldProps, F as MoneyFieldRootProps, N as NumberField, G as NumberFieldLabelProps, P as PickerButton, H as PickerButtonProps, I as PickerSplit, J as PickerSplitMain, K as PickerSplitMainProps, O as PickerSplitProps, Q as PickerSplitTrigger, R as PickerSplitTriggerProps, S as Preset, T as PresetValue, U as Sheet, V as SheetProps, W as SideNav, X as SideNavGroup, Y as SideNavGroupProps, Z as SideNavItem, _ as SideNavItemProps, $ as SideNavProps, a0 as SideNavToggle, a1 as SideNavToggleProps, a2 as Splitter, a3 as SplitterHandleProps, a4 as SplitterPanelProps, a5 as SplitterRootProps, a6 as StatCard, a7 as StatCardFact, a8 as StatCardProps, a9 as StatFigure, aa as StatFigureProps, ab as addDays, ac as addMonths, ad as builtinPresets, ae as clampDate, af as daysInMonth, ag as defaultPresets, ah as defaultWeekStartsOn, ai as endOfWeek, aj as formatMoney, ak as fromMinorUnits, al as getCurrencyDigits, am as inclusiveDays, an as isValidCurrency, ao as isoWeek, ap as last30Days, aq as last7Days, ar as lastMonth, as as lastWeek, at as lengthBlockReason, au as nextMonth, av as nextWeek, aw as orderRange, ax as parseDecimalString, ay as resolvePreset, az as startOfWeek, aA as thisMonth, aB as thisQuarter, aC as thisWeek, aD as toDecimalString, aE as toMinorUnits, aF as today, aG as todayDate, aH as tomorrow, aI as useListDetail, aJ as yearToDate, aK as yesterday } from './index-CoS-HLC1.js';
|
|
11
11
|
import * as _base_ui_react_internals_filter from '@base-ui/react/internals/filter';
|
|
12
12
|
import { AutocompleteRootProps, Autocomplete as Autocomplete$1 } from '@base-ui/react/autocomplete';
|
|
13
13
|
import { ComboboxRootProps, Combobox as Combobox$1 } from '@base-ui/react/combobox';
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { AppBar, AppBarSpacer, Badge, Calendar, DatePicker, DatePresets, DescriptionItem, DescriptionList, Drawer, EditableList, Field, ListDetail, MoneyField, NumberField, PickerButton, PickerSplit, PickerSplitMain, PickerSplitTrigger, Popover, Sheet, SideNav, SideNavGroup, SideNavItem, SideNavToggle, Splitter, StatFigure, addDays, addMonths, builtinPresets, clampDate, daysInMonth, defaultPresets, defaultWeekStartsOn, endOfWeek, formatMoney, fromMinorUnits, getCurrencyDigits, inclusiveDays, isValidCurrency, isoWeek, last30Days, last7Days, lastMonth, lastWeek, lengthBlockReason, nextMonth, nextWeek, orderRange, parseDecimalString, resolvePreset, startOfWeek, thisMonth, thisQuarter, thisWeek, toDecimalString, toMinorUnits, today, todayDate, tomorrow, useListDetail, yearToDate, yesterday } from './chunk-
|
|
1
|
+
export { AppBar, AppBarSpacer, Badge, Calendar, DatePicker, DatePresets, DescriptionItem, DescriptionList, Drawer, EditableList, Field, ListDetail, MoneyField, NumberField, PickerButton, PickerSplit, PickerSplitMain, PickerSplitTrigger, Popover, Sheet, SideNav, SideNavGroup, SideNavItem, SideNavToggle, Splitter, StatCard, StatFigure, addDays, addMonths, builtinPresets, clampDate, daysInMonth, defaultPresets, defaultWeekStartsOn, endOfWeek, formatMoney, fromMinorUnits, getCurrencyDigits, inclusiveDays, isValidCurrency, isoWeek, last30Days, last7Days, lastMonth, lastWeek, lengthBlockReason, nextMonth, nextWeek, orderRange, parseDecimalString, resolvePreset, startOfWeek, thisMonth, thisQuarter, thisWeek, toDecimalString, toMinorUnits, today, todayDate, tomorrow, useListDetail, yearToDate, yesterday } from './chunk-TVZOM4US.js';
|
|
2
2
|
export { Checkbox, CheckboxLabel, Input, Menu, Tabs } from './chunk-Y2CPBMFJ.js';
|
|
3
3
|
import { cnState, styledPart, styledPartUnless, buttonPart, cn } from './chunk-M7KJASGK.js';
|
|
4
4
|
export { Button, Combobox, EmptyState, Select, cn, cnState } from './chunk-M7KJASGK.js';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.16.0 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Accordion - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* No component tokens. Hover, press, chevron, divider and motion are the disclosure
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.16.0 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Alert Dialog - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* No component tokens and no rules of its own. An alert dialog looks exactly like a
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.16.0 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Autocomplete - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* No component tokens. The input is Input (Input.css), the clear button is an icon
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.16.0 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Avatar - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* A round picture with a ring in the page color, so avatars in a group cut out of each other in
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.16.0 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Button - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* Colors are the brand's emphasis levels, sizes are control.*, text is the trigger
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.16.0 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Checkbox - Mojave Theme
|
|
3
3
|
* Sizes follow the label: the box is the icon size one tier above the label's text
|
|
4
4
|
* tier (like a button's icon) and the check mark one tier below it.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.16.0 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Checkbox Group - Mojave Theme */
|
|
3
3
|
|
|
4
4
|
/* Each checkbox row is already a full tap target tall, so the rows sit close. */
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.16.0 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Collapsible - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* No component tokens. Hover, press, chevron and motion are the disclosure concept
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.16.0 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Combobox - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* No component tokens. The input is Input (Input.css); the chips box is a field; the
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.16.0 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Context Menu - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* No component tokens. Opens on right-click; the trigger area only sets the cursor. 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.16.0 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Dialog and Alert dialog - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* Both are centered modals built from the modal concept (tokens/semantic/modal.json):
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.16.0 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Drawer - a panel that slides in from an edge and can be swiped away.
|
|
3
3
|
The surface, scrim, heading and motion are the modal concept's (--sl-modal-*), so a
|
|
4
4
|
drawer reads as a dialog's sibling; only its size and grab bar are its own
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.16.0 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Field - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* Label, control, description and error. No component tokens: spacing is the field
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.16.0 · styles for @base-ui/react 1.9.0 */
|
|
2
2
|
/* Fieldset - Mojave Theme
|
|
3
3
|
*
|
|
4
4
|
* No component tokens: a titled group of fields, spaced by the stack gaps, with
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.16.0 · 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.16.0 · 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.16.0 · 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.16.0 · 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.16.0 · 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.16.0 · 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.16.0 · 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.16.0 · 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.16.0 · 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.16.0 · 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.16.0 · 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.16.0 · 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.16.0 · 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.16.0 · 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.16.0 · 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.16.0 · 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.16.0 · 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.16.0 · 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.16.0 · 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.16.0 · 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.16.0 · 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.16.0 · 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.16.0 · 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.16.0 · 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.16.0 · 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
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.16.0 · 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.16.0 · 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.16.0 · 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.16.0 · 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.16.0 · 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,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.16.0 · 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
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.16.0 · 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,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.16.0 · 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,96 @@
|
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.16.0 · styles for @base-ui/react 1.9.0 */
|
|
2
|
+
/* StatCard
|
|
3
|
+
*
|
|
4
|
+
* A card for one thing a page lists: a name (the heading), a caption, and a row of StatFigures
|
|
5
|
+
* ruled off under them. With data-interactive the title is a link or a button and its ::after
|
|
6
|
+
* covers the card, so the whole card is the target and the title names it. The hover fill and
|
|
7
|
+
* the focus ring follow the card, not just the title.
|
|
8
|
+
* Tokens: stat-card.* (tokens/component/stat-card.json).
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
.StatCard {
|
|
12
|
+
position: relative;
|
|
13
|
+
box-sizing: border-box;
|
|
14
|
+
display: flex;
|
|
15
|
+
flex-direction: column;
|
|
16
|
+
min-width: 0;
|
|
17
|
+
background: var(--sl-stat-card-background);
|
|
18
|
+
border: var(--sl-stat-card-border-width) solid var(--sl-stat-card-border-color);
|
|
19
|
+
border-top: var(--sl-stat-card-rule-width) solid var(--sl-stat-card-rule-color);
|
|
20
|
+
border-radius: var(--sl-stat-card-radius);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.StatCard[data-interactive]:hover {
|
|
24
|
+
background: var(--sl-stat-card-background-hover);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.StatCard[data-interactive]:has(.StatCardLink:focus-visible) {
|
|
28
|
+
outline: var(--sl-focus-outline);
|
|
29
|
+
outline-offset: 2px;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.StatCardHeader {
|
|
33
|
+
padding: var(--sl-stat-card-header-padding-block) var(--sl-stat-card-padding-inline);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.StatCardTitle {
|
|
37
|
+
font-family: var(--sl-font-title-magnify-font-family);
|
|
38
|
+
font-size: var(--sl-font-title-magnify-font-size);
|
|
39
|
+
font-weight: var(--sl-font-title-magnify-font-weight);
|
|
40
|
+
line-height: var(--sl-font-title-magnify-line-height);
|
|
41
|
+
letter-spacing: var(--sl-font-title-magnify-letter-spacing);
|
|
42
|
+
margin: 0;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.StatCardCaption {
|
|
46
|
+
font-family: var(--sl-font-figures-condense-font-family);
|
|
47
|
+
font-size: var(--sl-font-figures-condense-font-size);
|
|
48
|
+
font-weight: var(--sl-font-figures-condense-font-weight);
|
|
49
|
+
line-height: var(--sl-font-figures-condense-line-height);
|
|
50
|
+
letter-spacing: var(--sl-font-figures-condense-letter-spacing);
|
|
51
|
+
font-variant-numeric: var(--sl-font-figures-condense-font-variant-numeric);
|
|
52
|
+
margin: 0;
|
|
53
|
+
text-transform: uppercase;
|
|
54
|
+
color: var(--sl-stat-card-caption-color);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
/* The title's control: bare text that stretches over the whole card. */
|
|
58
|
+
.StatCardLink {
|
|
59
|
+
all: unset;
|
|
60
|
+
cursor: pointer;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.StatCardLink::after {
|
|
64
|
+
content: '';
|
|
65
|
+
position: absolute;
|
|
66
|
+
inset: 0;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.StatCardLink:focus-visible {
|
|
70
|
+
outline: none;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.StatCardFacts {
|
|
74
|
+
display: grid;
|
|
75
|
+
margin-top: auto;
|
|
76
|
+
border-top: var(--sl-stat-card-border-width) solid var(--sl-stat-card-rule-color);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.StatCardFacts > * {
|
|
80
|
+
padding: var(--sl-stat-card-facts-padding-block) var(--sl-stat-card-padding-inline);
|
|
81
|
+
border-inline-start: var(--sl-stat-card-border-width) solid var(--sl-stat-card-facts-divider-color);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.StatCardFacts > :first-child {
|
|
85
|
+
border-inline-start: 0;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.StatCardFooter {
|
|
89
|
+
font-family: var(--sl-font-body-condense-font-family);
|
|
90
|
+
font-size: var(--sl-font-body-condense-font-size);
|
|
91
|
+
font-weight: var(--sl-font-body-condense-font-weight);
|
|
92
|
+
line-height: var(--sl-font-body-condense-line-height);
|
|
93
|
+
letter-spacing: var(--sl-font-body-condense-letter-spacing);
|
|
94
|
+
padding: var(--sl-stat-card-header-padding-block) var(--sl-stat-card-padding-inline);
|
|
95
|
+
border-top: var(--sl-stat-card-border-width) solid var(--sl-stat-card-footer-border-color);
|
|
96
|
+
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @scattered-light/loomiere-base-ui 0.
|
|
1
|
+
/* @scattered-light/loomiere-base-ui 0.16.0 · 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
|