@scattered-light/loomiere-mojave 0.14.0 → 0.14.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/dist/exports/design-system/components/PickerButton/README.md +1 -1
- package/dist/exports/design-system/components/bundle.css +77 -63
- package/dist/exports/design-system/components/bundle.js +2 -2
- package/dist/exports/design-system/components/index.d.ts +1 -1
- package/dist/exports/figma.json +1 -1
- package/dist/exports/tokens.dtcg.json +5 -0
- package/dist/tokens.css +1 -0
- package/dist/tokens.d.ts +1 -0
- package/dist/tokens.js +2 -1
- package/dist/tokens.json +8 -0
- package/package.json +2 -2
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# PickerButton
|
|
2
2
|
|
|
3
|
-
Loomiere component, not part of Base UI. A trigger with a caps label before the current choice: CLIENT Alpha Services. The field look and states of a Select trigger; the label is caps-condense in picker-button.label-color, the choice is cut with an ellipsis at picker-button.max-width and the chevron turns while its popup is open. Tokens: picker-button.* (tokens/component/picker-button.json) and field.*.
|
|
3
|
+
Loomiere component, not part of Base UI. A trigger with a caps label before the current choice: CLIENT Alpha Services. The field look and states of a Select trigger; the label is caps-condense in picker-button.label-color, the choice is cut with an ellipsis at picker-button.max-width and the chevron turns while its popup is open. Label and choice share a baseline, so caps beside lowercase read as one line; picker-button.text-offset nudges both down for a typeface that sits high. Tokens: picker-button.* (tokens/component/picker-button.json) and field.*.
|
|
4
4
|
|
|
5
5
|
Use `Loomiere.PickerButton`, this package's component: it puts the class names on for you (`import { PickerButton } from '@scattered-light/loomiere-base-ui'`, or from `@scattered-light/loomiere-base-ui/custom`).
|
|
6
6
|
|
|
@@ -795,6 +795,7 @@
|
|
|
795
795
|
--sl-navigation-menu-popup-min-width: 400px; /** Narrowest a navigation panel gets on wider screens, and the widest a single column of links grows. */
|
|
796
796
|
--sl-navigation-menu-column-width: 12rem; /** Width of each column in a two-column link list. */
|
|
797
797
|
--sl-picker-button-max-width: 18rem; /** Widest the button grows. A longer choice is cut with an ellipsis; the label never is. */
|
|
798
|
+
--sl-picker-button-text-offset: 0px; /** Nudges the label and choice down together, for a typeface whose text sits high in the button. Zero keeps the baseline where the line box puts it. */
|
|
798
799
|
--sl-preview-card-popup-min-width: 300px; /** Narrowest a preview card gets, so a short title still has room for its image. */
|
|
799
800
|
--sl-preview-card-popup-max-width: 450px; /** Widest a preview card gets, so its description keeps a comfortable line length. */
|
|
800
801
|
--sl-sheet-tab-text-offset: 0px; /** Nudges the tab label down, for a typeface whose caps sit high in the line box. Zero centers the line box. */
|
|
@@ -6688,7 +6689,7 @@
|
|
|
6688
6689
|
}
|
|
6689
6690
|
|
|
6690
6691
|
|
|
6691
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
6692
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
6692
6693
|
/* Loomiere for Base UI: component styles. Brand-free: every value is a --sl- variable from a
|
|
6693
6694
|
Loomiere theme. Load the theme first:
|
|
6694
6695
|
@import '<your theme>/tokens.css';
|
|
@@ -6698,7 +6699,7 @@
|
|
|
6698
6699
|
/* Document defaults, in the reset layer so any unlayered rule wins over them, and so layered
|
|
6699
6700
|
frameworks (Chakra's recipes, Tailwind's utilities) are not undone by them. */
|
|
6700
6701
|
@layer reset {
|
|
6701
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
6702
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
6702
6703
|
/* CSS Reset - Mojave Theme */
|
|
6703
6704
|
|
|
6704
6705
|
/* ============================================
|
|
@@ -7142,7 +7143,7 @@ hr {
|
|
|
7142
7143
|
}
|
|
7143
7144
|
}
|
|
7144
7145
|
@layer reset {
|
|
7145
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
7146
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
7146
7147
|
/* Accessibility — base rules (no theme color dependencies). Theme-specific focus/invalid: accessibility-theme.css */
|
|
7147
7148
|
|
|
7148
7149
|
/* Remove default focus; keyboard focus styled in accessibility-theme.css */
|
|
@@ -7255,7 +7256,7 @@ main:focus {
|
|
|
7255
7256
|
|
|
7256
7257
|
}
|
|
7257
7258
|
@layer reset {
|
|
7258
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
7259
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
7259
7260
|
/* Focus, invalid, contrast — requires theme tokens (after theme-accessibility.css). */
|
|
7260
7261
|
|
|
7261
7262
|
:focus-visible {
|
|
@@ -7323,7 +7324,7 @@ button,
|
|
|
7323
7324
|
|
|
7324
7325
|
}
|
|
7325
7326
|
/* Component styles */
|
|
7326
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
7327
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
7327
7328
|
/* Accordion - Mojave Theme
|
|
7328
7329
|
*
|
|
7329
7330
|
* No component tokens. Hover, press, chevron, divider and motion are the disclosure
|
|
@@ -7444,7 +7445,7 @@ button,
|
|
|
7444
7445
|
overflow: hidden;
|
|
7445
7446
|
}
|
|
7446
7447
|
|
|
7447
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
7448
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
7448
7449
|
/* Alert Dialog - Mojave Theme
|
|
7449
7450
|
*
|
|
7450
7451
|
* No component tokens and no rules of its own. An alert dialog looks exactly like a
|
|
@@ -7453,7 +7454,7 @@ button,
|
|
|
7453
7454
|
* cancel quiet, and a destructive one bold with data-color="error".
|
|
7454
7455
|
*/
|
|
7455
7456
|
|
|
7456
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
7457
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
7457
7458
|
/* Autocomplete - Mojave Theme
|
|
7458
7459
|
*
|
|
7459
7460
|
* No component tokens. The input is Input (Input.css), the clear button is an icon
|
|
@@ -7655,7 +7656,7 @@ button,
|
|
|
7655
7656
|
(reset-accessibility.css).
|
|
7656
7657
|
============================================ */
|
|
7657
7658
|
|
|
7658
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
7659
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
7659
7660
|
/* Avatar - Mojave Theme
|
|
7660
7661
|
*
|
|
7661
7662
|
* A round picture with a ring in the page color, so avatars in a group cut out of each other in
|
|
@@ -7763,7 +7764,7 @@ button,
|
|
|
7763
7764
|
}
|
|
7764
7765
|
}
|
|
7765
7766
|
|
|
7766
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
7767
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
7767
7768
|
/* Button - Mojave Theme
|
|
7768
7769
|
*
|
|
7769
7770
|
* Colors are the brand's emphasis levels, sizes are control.*, text is the trigger
|
|
@@ -7913,7 +7914,7 @@ button,
|
|
|
7913
7914
|
font-size: var(--sl-icon-size-maximize);
|
|
7914
7915
|
}
|
|
7915
7916
|
|
|
7916
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
7917
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
7917
7918
|
/* Checkbox - Mojave Theme
|
|
7918
7919
|
* Sizes follow the label: the box is the icon size one tier above the label's text
|
|
7919
7920
|
* tier (like a button's icon) and the check mark one tier below it.
|
|
@@ -8070,7 +8071,7 @@ button,
|
|
|
8070
8071
|
border-radius: var(--sl-radius-pill);
|
|
8071
8072
|
}
|
|
8072
8073
|
|
|
8073
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
8074
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
8074
8075
|
/* Checkbox Group - Mojave Theme */
|
|
8075
8076
|
|
|
8076
8077
|
/* Each checkbox row is already a full tap target tall, so the rows sit close. */
|
|
@@ -8086,7 +8087,7 @@ button,
|
|
|
8086
8087
|
pointer-events: none;
|
|
8087
8088
|
}
|
|
8088
8089
|
|
|
8089
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
8090
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
8090
8091
|
/* Collapsible - Mojave Theme
|
|
8091
8092
|
*
|
|
8092
8093
|
* No component tokens. Hover, press, chevron and motion are the disclosure concept
|
|
@@ -8202,7 +8203,7 @@ button,
|
|
|
8202
8203
|
background: var(--sl-surface-raised);
|
|
8203
8204
|
}
|
|
8204
8205
|
|
|
8205
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
8206
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
8206
8207
|
/* Combobox - Mojave Theme
|
|
8207
8208
|
*
|
|
8208
8209
|
* No component tokens. The input is Input (Input.css); the chips box is a field; the
|
|
@@ -8687,7 +8688,7 @@ button,
|
|
|
8687
8688
|
color: var(--sl-text-tertiary);
|
|
8688
8689
|
}
|
|
8689
8690
|
|
|
8690
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
8691
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
8691
8692
|
/* Context Menu - Mojave Theme
|
|
8692
8693
|
*
|
|
8693
8694
|
* 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
|
|
@@ -8856,7 +8857,7 @@ button,
|
|
|
8856
8857
|
stroke-width: var(--sl-stroke-default);
|
|
8857
8858
|
}
|
|
8858
8859
|
|
|
8859
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
8860
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
8860
8861
|
/* Dialog and Alert dialog - Mojave Theme
|
|
8861
8862
|
*
|
|
8862
8863
|
* Both are centered modals built from the modal concept (tokens/semantic/modal.json):
|
|
@@ -9002,7 +9003,7 @@ button,
|
|
|
9002
9003
|
margin-top: var(--sl-modal-actions-spacing);
|
|
9003
9004
|
}
|
|
9004
9005
|
|
|
9005
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
9006
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
9006
9007
|
/* Drawer - a panel that slides in from an edge and can be swiped away.
|
|
9007
9008
|
The surface, scrim, heading and motion are the modal concept's (--sl-modal-*), so a
|
|
9008
9009
|
drawer reads as a dialog's sibling; only its size and grab bar are its own
|
|
@@ -9135,7 +9136,7 @@ button,
|
|
|
9135
9136
|
color: var(--sl-modal-description-color);
|
|
9136
9137
|
}
|
|
9137
9138
|
|
|
9138
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
9139
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
9139
9140
|
/* Field - Mojave Theme
|
|
9140
9141
|
*
|
|
9141
9142
|
* Label, control, description and error. No component tokens: spacing is the field
|
|
@@ -9196,7 +9197,7 @@ textarea.FieldControl {
|
|
|
9196
9197
|
height: auto;
|
|
9197
9198
|
}
|
|
9198
9199
|
|
|
9199
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
9200
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
9200
9201
|
/* Fieldset - Mojave Theme
|
|
9201
9202
|
*
|
|
9202
9203
|
* No component tokens: a titled group of fields, spaced by the stack gaps, with
|
|
@@ -9238,7 +9239,7 @@ textarea.FieldControl {
|
|
|
9238
9239
|
color: var(--sl-text-secondary);
|
|
9239
9240
|
}
|
|
9240
9241
|
|
|
9241
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
9242
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
9242
9243
|
/* Form - Mojave Theme
|
|
9243
9244
|
*
|
|
9244
9245
|
* No component tokens: fields stack with the large block space, and the action
|
|
@@ -9258,7 +9259,7 @@ textarea.FieldControl {
|
|
|
9258
9259
|
margin-top: var(--sl-space-block-md);
|
|
9259
9260
|
}
|
|
9260
9261
|
|
|
9261
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
9262
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
9262
9263
|
/* Input - Mojave Theme
|
|
9263
9264
|
*
|
|
9264
9265
|
* No component tokens: the look is the field concept (tokens/semantic/field.json),
|
|
@@ -9395,7 +9396,7 @@ textarea.FieldControl {
|
|
|
9395
9396
|
padding-inline: var(--sl-control-padding-inline-lg);
|
|
9396
9397
|
}
|
|
9397
9398
|
|
|
9398
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
9399
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
9399
9400
|
/* Menu - Mojave Theme
|
|
9400
9401
|
*
|
|
9401
9402
|
* No component tokens. The trigger is a Button. The popup is the popup concept, rows are item rows at the
|
|
@@ -9544,7 +9545,7 @@ textarea.FieldControl {
|
|
|
9544
9545
|
color: var(--sl-text-tertiary);
|
|
9545
9546
|
}
|
|
9546
9547
|
|
|
9547
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
9548
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
9548
9549
|
/* Menubar - Mojave Theme
|
|
9549
9550
|
*
|
|
9550
9551
|
* No component tokens. A row of quiet triggers, each opening a menu. The popup is the popup concept, rows are item rows at the
|
|
@@ -9737,7 +9738,7 @@ textarea.FieldControl {
|
|
|
9737
9738
|
color: var(--sl-text-tertiary);
|
|
9738
9739
|
}
|
|
9739
9740
|
|
|
9740
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
9741
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
9741
9742
|
/* Meter - Mojave Theme
|
|
9742
9743
|
*
|
|
9743
9744
|
* A gauge (tokens/semantic/gauge.json). The fill is the solid color of the scope around it:
|
|
@@ -9800,7 +9801,7 @@ textarea.FieldControl {
|
|
|
9800
9801
|
height: var(--sl-gauge-height-lg);
|
|
9801
9802
|
}
|
|
9802
9803
|
|
|
9803
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
9804
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
9804
9805
|
/* Navigation Menu - Mojave Theme
|
|
9805
9806
|
*
|
|
9806
9807
|
* The strip is the bar concept, the panel is the popup concept and each link is an item
|
|
@@ -10220,7 +10221,7 @@ textarea.FieldControl {
|
|
|
10220
10221
|
width: 100%;
|
|
10221
10222
|
}
|
|
10222
10223
|
|
|
10223
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
10224
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
10224
10225
|
/* Number Field - Mojave Theme
|
|
10225
10226
|
*
|
|
10226
10227
|
* No component tokens. The input is Input (Input.css) and the label, description and
|
|
@@ -10311,7 +10312,7 @@ textarea.FieldControl {
|
|
|
10311
10312
|
user-select: none;
|
|
10312
10313
|
}
|
|
10313
10314
|
|
|
10314
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
10315
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
10315
10316
|
/* OTP Field - Mojave Theme
|
|
10316
10317
|
*
|
|
10317
10318
|
* One-time code entry: a row of single-character inputs. Each slot is the same control as Input
|
|
@@ -10374,7 +10375,7 @@ textarea.FieldControl {
|
|
|
10374
10375
|
letter-spacing: var(--sl-font-body-magnify-letter-spacing);
|
|
10375
10376
|
}
|
|
10376
10377
|
|
|
10377
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
10378
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
10378
10379
|
/* Popover - Mojave Theme */
|
|
10379
10380
|
|
|
10380
10381
|
/* ============================================
|
|
@@ -10539,7 +10540,7 @@ textarea.FieldControl {
|
|
|
10539
10540
|
fill: var(--sl-popup-arrow-stroke);
|
|
10540
10541
|
}
|
|
10541
10542
|
|
|
10542
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
10543
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
10543
10544
|
/* Preview Card - Mojave Theme
|
|
10544
10545
|
*
|
|
10545
10546
|
* The popup concept (surface, arrow, motion) with a title-magnify title and condense
|
|
@@ -10656,7 +10657,7 @@ textarea.FieldControl {
|
|
|
10656
10657
|
fill: var(--sl-popup-arrow-stroke);
|
|
10657
10658
|
}
|
|
10658
10659
|
|
|
10659
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
10660
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
10660
10661
|
/* Progress - Mojave Theme
|
|
10661
10662
|
*
|
|
10662
10663
|
* A gauge (tokens/semantic/gauge.json), the same bar as Meter. The fill is the solid color of
|
|
@@ -10733,7 +10734,7 @@ textarea.FieldControl {
|
|
|
10733
10734
|
height: var(--sl-gauge-height-lg);
|
|
10734
10735
|
}
|
|
10735
10736
|
|
|
10736
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
10737
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
10737
10738
|
/* Radio - Mojave Theme
|
|
10738
10739
|
* Same box as Checkbox, always round. Sizes follow the label the same way, and the
|
|
10739
10740
|
* dot is a share of the circle (check.dot-scale).
|
|
@@ -10885,7 +10886,7 @@ textarea.FieldControl {
|
|
|
10885
10886
|
gap: var(--sl-gap-stack-sm);
|
|
10886
10887
|
}
|
|
10887
10888
|
|
|
10888
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
10889
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
10889
10890
|
/* Scroll Area - Mojave Theme
|
|
10890
10891
|
*
|
|
10891
10892
|
* The scrollbar is the content scrollbar (content.scrollbar-*): a track that stays clear until
|
|
@@ -10967,7 +10968,7 @@ textarea.FieldControl {
|
|
|
10967
10968
|
background: transparent;
|
|
10968
10969
|
}
|
|
10969
10970
|
|
|
10970
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
10971
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
10971
10972
|
/* Select - Mojave Theme
|
|
10972
10973
|
*
|
|
10973
10974
|
* The trigger is a field (the field pattern, control sizes, the base text style); the
|
|
@@ -11252,7 +11253,7 @@ textarea.FieldControl {
|
|
|
11252
11253
|
stroke-width: var(--sl-stroke-default);
|
|
11253
11254
|
}
|
|
11254
11255
|
|
|
11255
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
11256
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
11256
11257
|
/* Separator - Mojave Theme
|
|
11257
11258
|
*
|
|
11258
11259
|
* A hairline in the everyday divider color (border.default), one stroke thick, with a step of
|
|
@@ -11280,7 +11281,7 @@ textarea.FieldControl {
|
|
|
11280
11281
|
margin-inline: var(--sl-space-4);
|
|
11281
11282
|
}
|
|
11282
11283
|
|
|
11283
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
11284
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
11284
11285
|
/* Slider - Mojave Theme
|
|
11285
11286
|
*
|
|
11286
11287
|
* A slider is a gauge you can drag: the track, fill and label row are gauge.* (the same bar as
|
|
@@ -11446,7 +11447,7 @@ textarea.FieldControl {
|
|
|
11446
11447
|
transform: translate(-50%, 50%);
|
|
11447
11448
|
}
|
|
11448
11449
|
|
|
11449
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
11450
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
11450
11451
|
/* Switch - Mojave Theme
|
|
11451
11452
|
* Switch keeps its track sizes. The thumb, its travel and the ON/OFF text are
|
|
11452
11453
|
* worked out from them: the thumb fills the track's height inside the padding,
|
|
@@ -11612,7 +11613,7 @@ textarea.FieldControl {
|
|
|
11612
11613
|
color: var(--sl-text-disabled);
|
|
11613
11614
|
}
|
|
11614
11615
|
|
|
11615
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
11616
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
11616
11617
|
/* Tabs - Mojave Theme
|
|
11617
11618
|
*
|
|
11618
11619
|
* No component tokens. The divider, the selected line and color, hover and the disabled
|
|
@@ -11748,7 +11749,7 @@ textarea.FieldControl {
|
|
|
11748
11749
|
padding: var(--sl-space-6);
|
|
11749
11750
|
}
|
|
11750
11751
|
|
|
11751
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
11752
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
11752
11753
|
/* Toast - Mojave Theme
|
|
11753
11754
|
*
|
|
11754
11755
|
* A toast is a notice (tokens/semantic/notice.json) on the popup surface. A toast whose type
|
|
@@ -11984,7 +11985,7 @@ textarea.FieldControl {
|
|
|
11984
11985
|
flex-shrink: 0;
|
|
11985
11986
|
}
|
|
11986
11987
|
|
|
11987
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
11988
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
11988
11989
|
/* Toggle - Mojave Theme
|
|
11989
11990
|
* A toggle is a button that stays pressed: the same heights, padding, gap and
|
|
11990
11991
|
* trigger text style as a button of the same size. Pressed, it takes its emphasis level's
|
|
@@ -12096,7 +12097,7 @@ textarea.FieldControl {
|
|
|
12096
12097
|
height: var(--sl-icon-size-maximize);
|
|
12097
12098
|
}
|
|
12098
12099
|
|
|
12099
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
12100
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
12100
12101
|
/* Toggle Group - Mojave Theme
|
|
12101
12102
|
*
|
|
12102
12103
|
* No component tokens. The strip is the bar concept (tokens/semantic/bar.json); the
|
|
@@ -12158,7 +12159,7 @@ textarea.FieldControl {
|
|
|
12158
12159
|
outline-offset: var(--sl-focus-outline-offset-inset);
|
|
12159
12160
|
}
|
|
12160
12161
|
|
|
12161
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
12162
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
12162
12163
|
/* Toolbar - Mojave Theme
|
|
12163
12164
|
*
|
|
12164
12165
|
* The strip is the bar concept (tokens/semantic/bar.json). Buttons, toggles, selects
|
|
@@ -12220,7 +12221,7 @@ textarea.FieldControl {
|
|
|
12220
12221
|
max-width: var(--sl-toolbar-input-max-width);
|
|
12221
12222
|
}
|
|
12222
12223
|
|
|
12223
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
12224
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
12224
12225
|
/* Tooltip - Mojave Theme
|
|
12225
12226
|
*
|
|
12226
12227
|
* The inverse surface (surface.inverse, text.on-inverse-surface) with condense text, so a tooltip
|
|
@@ -12281,7 +12282,7 @@ textarea.FieldControl {
|
|
|
12281
12282
|
}
|
|
12282
12283
|
|
|
12283
12284
|
/* Custom components: not Base UI parts. Built from existing concepts and tokens. */
|
|
12284
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
12285
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
12285
12286
|
/* Badge
|
|
12286
12287
|
*
|
|
12287
12288
|
* A status or count label. Not a Base UI part, and not interactive: no hover or focus.
|
|
@@ -12386,7 +12387,7 @@ textarea.FieldControl {
|
|
|
12386
12387
|
height: var(--sl-badge-dot-base);
|
|
12387
12388
|
}
|
|
12388
12389
|
|
|
12389
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
12390
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
12390
12391
|
/*
|
|
12391
12392
|
* DatePicker: a field that opens a calendar for one date or a period.
|
|
12392
12393
|
* Not a Base UI part. The popup is Popover on a wide viewport and Drawer
|
|
@@ -12959,7 +12960,7 @@ textarea.FieldControl {
|
|
|
12959
12960
|
flex-basis: 100%;
|
|
12960
12961
|
}
|
|
12961
12962
|
|
|
12962
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
12963
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
12963
12964
|
/* Money field
|
|
12964
12965
|
*
|
|
12965
12966
|
* An amount of money, built on Number field. The value is an integer in minor units
|
|
@@ -13304,7 +13305,7 @@ textarea.FieldControl {
|
|
|
13304
13305
|
letter-spacing: var(--sl-font-body-base-letter-spacing);
|
|
13305
13306
|
}
|
|
13306
13307
|
|
|
13307
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
13308
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
13308
13309
|
/* ListDetail
|
|
13309
13310
|
*
|
|
13310
13311
|
* The detail of one item, next to its list. Not a Base UI part. It is a Splitter
|
|
@@ -13431,7 +13432,7 @@ textarea.FieldControl {
|
|
|
13431
13432
|
background: transparent;
|
|
13432
13433
|
}
|
|
13433
13434
|
|
|
13434
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
13435
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
13435
13436
|
/* Splitter
|
|
13436
13437
|
*
|
|
13437
13438
|
* Two or more panels and a handle between them. Not a Base UI part. It follows the
|
|
@@ -13639,7 +13640,7 @@ textarea.FieldControl {
|
|
|
13639
13640
|
background: var(--sl-border-default);
|
|
13640
13641
|
}
|
|
13641
13642
|
|
|
13642
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
13643
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
13643
13644
|
/* EmptyState
|
|
13644
13645
|
*
|
|
13645
13646
|
* The block a page, pane, table, list or popup shows when it has nothing to show.
|
|
@@ -13895,7 +13896,7 @@ textarea.FieldControl {
|
|
|
13895
13896
|
color: inherit;
|
|
13896
13897
|
}
|
|
13897
13898
|
|
|
13898
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
13899
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
13899
13900
|
/* Table - Mojave Theme
|
|
13900
13901
|
*
|
|
13901
13902
|
* Base UI has no table, so this styles the native <table class="Table"> elements with the
|
|
@@ -14146,7 +14147,7 @@ textarea.FieldControl {
|
|
|
14146
14147
|
color: inherit;
|
|
14147
14148
|
}
|
|
14148
14149
|
|
|
14149
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
14150
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
14150
14151
|
/* Collection
|
|
14151
14152
|
*
|
|
14152
14153
|
* DataTable, DataList, the toolbar and the pagination, in one place so the two views
|
|
@@ -14157,7 +14158,7 @@ textarea.FieldControl {
|
|
|
14157
14158
|
* the tabs and the search where they are, so selecting rows does not grow the toolbar.
|
|
14158
14159
|
*/
|
|
14159
14160
|
|
|
14160
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
14161
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
14161
14162
|
/* Collection toolbar
|
|
14162
14163
|
*
|
|
14163
14164
|
* The wrap follows the toolbar's own width, not the window: a table in a narrow pane wraps
|
|
@@ -14323,7 +14324,7 @@ textarea.FieldControl {
|
|
|
14323
14324
|
border-block-end: var(--sl-stroke-default) solid var(--sl-table-border-color);
|
|
14324
14325
|
}
|
|
14325
14326
|
|
|
14326
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
14327
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
14327
14328
|
/* DataTable additions on top of .Table.
|
|
14328
14329
|
*
|
|
14329
14330
|
* Sort buttons fill the header cell and inherit its hover, so old aria-sort markup keeps
|
|
@@ -14522,7 +14523,7 @@ textarea.FieldControl {
|
|
|
14522
14523
|
}
|
|
14523
14524
|
}
|
|
14524
14525
|
|
|
14525
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
14526
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
14526
14527
|
/* DataList
|
|
14527
14528
|
*
|
|
14528
14529
|
* The same rows as the table, in one container with the table's borders, hover, selected
|
|
@@ -14664,7 +14665,7 @@ textarea.FieldControl {
|
|
|
14664
14665
|
transition: opacity var(--sl-duration-fast) var(--sl-easing-default);
|
|
14665
14666
|
}
|
|
14666
14667
|
|
|
14667
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
14668
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
14668
14669
|
/* Pagination
|
|
14669
14670
|
*
|
|
14670
14671
|
* Not tied to a collection. Anything with a page, a page count and a total can use it.
|
|
@@ -14689,7 +14690,7 @@ textarea.FieldControl {
|
|
|
14689
14690
|
margin: 0;
|
|
14690
14691
|
}
|
|
14691
14692
|
|
|
14692
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
14693
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
14693
14694
|
/* EditableList
|
|
14694
14695
|
*
|
|
14695
14696
|
* One table at every width, so a field is not submitted twice. Under the stack width each
|
|
@@ -14788,7 +14789,7 @@ textarea.FieldControl {
|
|
|
14788
14789
|
}
|
|
14789
14790
|
}
|
|
14790
14791
|
|
|
14791
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
14792
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
14792
14793
|
/* Sheet
|
|
14793
14794
|
*
|
|
14794
14795
|
* A working-paper surface: the raised surface with a heavier rule across its top
|
|
@@ -14881,7 +14882,7 @@ textarea.FieldControl {
|
|
|
14881
14882
|
border-top: 0;
|
|
14882
14883
|
}
|
|
14883
14884
|
|
|
14884
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
14885
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
14885
14886
|
/* StatFigure
|
|
14886
14887
|
*
|
|
14887
14888
|
* One large figure with a caps label above and a caption under it. The label is
|
|
@@ -14942,7 +14943,7 @@ textarea.FieldControl {
|
|
|
14942
14943
|
color: var(--sl-stat-figure-caption-color);
|
|
14943
14944
|
}
|
|
14944
14945
|
|
|
14945
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
14946
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
14946
14947
|
/* DescriptionList
|
|
14947
14948
|
*
|
|
14948
14949
|
* Label and value pairs in a native dl, one DescriptionItem (a div holding a dt and a dd)
|
|
@@ -15018,7 +15019,7 @@ textarea.FieldControl {
|
|
|
15018
15019
|
text-align: end;
|
|
15019
15020
|
}
|
|
15020
15021
|
|
|
15021
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
15022
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
15022
15023
|
/* AppBar
|
|
15023
15024
|
*
|
|
15024
15025
|
* The bar across the top of an app window, one row on a line in the rule color. The line is
|
|
@@ -15052,13 +15053,14 @@ textarea.FieldControl {
|
|
|
15052
15053
|
background: var(--sl-app-bar-divider-color);
|
|
15053
15054
|
}
|
|
15054
15055
|
|
|
15055
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
15056
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
15056
15057
|
/* PickerButton
|
|
15057
15058
|
*
|
|
15058
15059
|
* A trigger with a caps label before the current choice: CLIENT Alpha Services. The field
|
|
15059
15060
|
* look and states of a Select trigger; the label is caps-condense in picker-button.label-color,
|
|
15060
15061
|
* the choice is cut with an ellipsis at picker-button.max-width and the chevron turns while
|
|
15061
|
-
* its popup is open.
|
|
15062
|
+
* its popup is open. Label and choice share a baseline, so caps beside lowercase read as one line;
|
|
15063
|
+
* picker-button.text-offset nudges both down for a typeface that sits high. Tokens: picker-button.* (tokens/component/picker-button.json) and field.*.
|
|
15062
15064
|
*/
|
|
15063
15065
|
|
|
15064
15066
|
.PickerButton {
|
|
@@ -15074,8 +15076,15 @@ textarea.FieldControl {
|
|
|
15074
15076
|
font-weight: var(--sl-font-body-base-font-weight);
|
|
15075
15077
|
line-height: var(--sl-font-body-base-line-height);
|
|
15076
15078
|
letter-spacing: var(--sl-font-body-base-letter-spacing);
|
|
15077
|
-
|
|
15078
|
-
|
|
15079
|
+
/* A grid, not a flex row: label and choice share a baseline, and align-content centers that
|
|
15080
|
+
pair in the button's height. The choice column shrinks so a long choice gets its ellipsis. */
|
|
15081
|
+
display: inline-grid;
|
|
15082
|
+
grid-auto-flow: column;
|
|
15083
|
+
grid-template-columns: max-content minmax(0, max-content);
|
|
15084
|
+
grid-auto-columns: max-content;
|
|
15085
|
+
align-items: baseline;
|
|
15086
|
+
align-content: center;
|
|
15087
|
+
justify-content: start;
|
|
15079
15088
|
gap: var(--sl-gap-control);
|
|
15080
15089
|
max-width: var(--sl-picker-button-max-width);
|
|
15081
15090
|
min-width: 0;
|
|
@@ -15109,11 +15118,15 @@ textarea.FieldControl {
|
|
|
15109
15118
|
line-height: var(--sl-font-caps-condense-line-height);
|
|
15110
15119
|
letter-spacing: var(--sl-font-caps-condense-letter-spacing);
|
|
15111
15120
|
text-transform: var(--sl-font-caps-condense-text-transform);
|
|
15121
|
+
position: relative;
|
|
15122
|
+
top: var(--sl-picker-button-text-offset);
|
|
15112
15123
|
flex: none;
|
|
15113
15124
|
color: var(--sl-picker-button-label-color);
|
|
15114
15125
|
}
|
|
15115
15126
|
|
|
15116
15127
|
.PickerButtonValue {
|
|
15128
|
+
position: relative;
|
|
15129
|
+
top: var(--sl-picker-button-text-offset);
|
|
15117
15130
|
flex: 0 1 auto;
|
|
15118
15131
|
min-width: 0;
|
|
15119
15132
|
overflow: hidden;
|
|
@@ -15127,6 +15140,7 @@ textarea.FieldControl {
|
|
|
15127
15140
|
|
|
15128
15141
|
.PickerButtonIcon {
|
|
15129
15142
|
flex: none;
|
|
15143
|
+
align-self: center;
|
|
15130
15144
|
width: var(--sl-icon-size-base);
|
|
15131
15145
|
height: var(--sl-icon-size-base);
|
|
15132
15146
|
color: var(--sl-text-tertiary);
|
|
@@ -15138,7 +15152,7 @@ textarea.FieldControl {
|
|
|
15138
15152
|
transform: rotate(180deg);
|
|
15139
15153
|
}
|
|
15140
15154
|
|
|
15141
|
-
/* @scattered-light/loomiere-base-ui 0.14.
|
|
15155
|
+
/* @scattered-light/loomiere-base-ui 0.14.1 · styles for @base-ui/react 1.9.0 */
|
|
15142
15156
|
/* SideNav
|
|
15143
15157
|
*
|
|
15144
15158
|
* The column of links down the side of a workspace. Rows are ruled apart with a hairline; the
|