@scattered-light/loomiere-mojave 0.11.0 → 0.12.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.
@@ -1875,6 +1875,7 @@
1875
1875
  --sl-badge-dot-condense: var(--sl-space-2); /** 8px, the default. */
1876
1876
  --sl-badge-dot-base: var(--sl-space-2); /** 8px. The base badge is taller, but the dot stays a mark. */
1877
1877
  --sl-collection-tree-indent: var(--sl-space-4); /** How far each deeper level steps in, so a child sits under its parent's text. */
1878
+ --sl-collection-disclosure-size-small: var(--sl-space-5); /** The expand and collapse button when a table sets disclosure="small", small enough that a parent row keeps its siblings' height. */
1878
1879
  --sl-collection-list-row-padding-block: var(--sl-space-3); /** Vertical padding of a list row. The row is not a fixed height, because a second line and an extra slot have to fit. */
1879
1880
  --sl-collection-list-row-gap: var(--sl-space-2); /** Between the checkbox, the text, the amount and the actions in a list row. */
1880
1881
  --sl-collection-toolbar-gap: var(--sl-space-2); /** Between the search, the filters and the actions. */
@@ -2369,6 +2370,7 @@
2369
2370
  --sl-status-level-default-bold-fg: var(--sl-scope-accent-on-solid); /** bold in default: solid in accent (primary) */
2370
2371
  --sl-app-bar-background: var(--sl-surface-raised); /** The bar's fill: one step off the page, like a card, so the page reads as sitting under it. */
2371
2372
  --sl-app-bar-divider-color: var(--sl-border-strong); /** Color of a vertical Separator in the bar. */
2373
+ --sl-collection-tree-line-color: var(--sl-border-strong); /** The elbow connector from a child row back to its parent, with treeLines. */
2372
2374
  --sl-description-list-row-border-color: var(--sl-border-subtle); /** Hairline between pairs, as quiet as a table's row lines. */
2373
2375
  --sl-description-list-label-color: var(--sl-text-secondary); /** Labels. */
2374
2376
  --sl-description-list-leader-color: var(--sl-border-control); /** The dotted leader at variant="leader". The control edge color: dark enough to lead the eye, still lighter than the text. */
@@ -5902,6 +5904,7 @@
5902
5904
  --sl-app-bar-background: var(--sl-surface-raised);
5903
5905
  --sl-app-bar-border-color: var(--sl-rule-color);
5904
5906
  --sl-app-bar-divider-color: var(--sl-border-strong);
5907
+ --sl-collection-tree-line-color: var(--sl-border-strong);
5905
5908
  --sl-description-list-row-border-color: var(--sl-border-subtle);
5906
5909
  --sl-description-list-label-color: var(--sl-text-secondary);
5907
5910
  --sl-description-list-value-color: var(--sl-text-primary);
@@ -6086,6 +6089,7 @@
6086
6089
  --sl-app-bar-background: var(--sl-surface-raised);
6087
6090
  --sl-app-bar-border-color: var(--sl-rule-color);
6088
6091
  --sl-app-bar-divider-color: var(--sl-border-strong);
6092
+ --sl-collection-tree-line-color: var(--sl-border-strong);
6089
6093
  --sl-description-list-row-border-color: var(--sl-border-subtle);
6090
6094
  --sl-description-list-label-color: var(--sl-text-secondary);
6091
6095
  --sl-description-list-value-color: var(--sl-text-primary);
@@ -6270,6 +6274,7 @@
6270
6274
  --sl-app-bar-background: var(--sl-surface-raised);
6271
6275
  --sl-app-bar-border-color: var(--sl-rule-color);
6272
6276
  --sl-app-bar-divider-color: var(--sl-border-strong);
6277
+ --sl-collection-tree-line-color: var(--sl-border-strong);
6273
6278
  --sl-description-list-row-border-color: var(--sl-border-subtle);
6274
6279
  --sl-description-list-label-color: var(--sl-text-secondary);
6275
6280
  --sl-description-list-value-color: var(--sl-text-primary);
@@ -6659,7 +6664,7 @@
6659
6664
  }
6660
6665
 
6661
6666
 
6662
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
6667
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
6663
6668
  /* Loomiere for Base UI: component styles. Brand-free: every value is a --sl- variable from a
6664
6669
  Loomiere theme. Load the theme first:
6665
6670
  @import '<your theme>/tokens.css';
@@ -6669,7 +6674,7 @@
6669
6674
  /* Document defaults, in the reset layer so any unlayered rule wins over them, and so layered
6670
6675
  frameworks (Chakra's recipes, Tailwind's utilities) are not undone by them. */
6671
6676
  @layer reset {
6672
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
6677
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
6673
6678
  /* CSS Reset - Mojave Theme */
6674
6679
 
6675
6680
  /* ============================================
@@ -7113,7 +7118,7 @@ hr {
7113
7118
  }
7114
7119
  }
7115
7120
  @layer reset {
7116
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
7121
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
7117
7122
  /* Accessibility — base rules (no theme color dependencies). Theme-specific focus/invalid: accessibility-theme.css */
7118
7123
 
7119
7124
  /* Remove default focus; keyboard focus styled in accessibility-theme.css */
@@ -7226,7 +7231,7 @@ main:focus {
7226
7231
 
7227
7232
  }
7228
7233
  @layer reset {
7229
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
7234
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
7230
7235
  /* Focus, invalid, contrast — requires theme tokens (after theme-accessibility.css). */
7231
7236
 
7232
7237
  :focus-visible {
@@ -7294,7 +7299,7 @@ button,
7294
7299
 
7295
7300
  }
7296
7301
  /* Component styles */
7297
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
7302
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
7298
7303
  /* Accordion - Mojave Theme
7299
7304
  *
7300
7305
  * No component tokens. Hover, press, chevron, divider and motion are the disclosure
@@ -7415,7 +7420,7 @@ button,
7415
7420
  overflow: hidden;
7416
7421
  }
7417
7422
 
7418
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
7423
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
7419
7424
  /* Alert Dialog - Mojave Theme
7420
7425
  *
7421
7426
  * No component tokens and no rules of its own. An alert dialog looks exactly like a
@@ -7424,7 +7429,7 @@ button,
7424
7429
  * cancel quiet, and a destructive one bold with data-color="error".
7425
7430
  */
7426
7431
 
7427
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
7432
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
7428
7433
  /* Autocomplete - Mojave Theme
7429
7434
  *
7430
7435
  * No component tokens. The input is Input (Input.css), the clear button is an icon
@@ -7626,7 +7631,7 @@ button,
7626
7631
  (reset-accessibility.css).
7627
7632
  ============================================ */
7628
7633
 
7629
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
7634
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
7630
7635
  /* Avatar - Mojave Theme
7631
7636
  *
7632
7637
  * A round picture with a ring in the page color, so avatars in a group cut out of each other in
@@ -7734,7 +7739,7 @@ button,
7734
7739
  }
7735
7740
  }
7736
7741
 
7737
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
7742
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
7738
7743
  /* Button - Mojave Theme
7739
7744
  *
7740
7745
  * Colors are the brand's emphasis levels, sizes are control.*, text is the trigger
@@ -7884,7 +7889,7 @@ button,
7884
7889
  font-size: var(--sl-icon-size-maximize);
7885
7890
  }
7886
7891
 
7887
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
7892
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
7888
7893
  /* Checkbox - Mojave Theme
7889
7894
  * Sizes follow the label: the box is the icon size one tier above the label's text
7890
7895
  * tier (like a button's icon) and the check mark one tier below it.
@@ -8041,7 +8046,7 @@ button,
8041
8046
  border-radius: var(--sl-radius-pill);
8042
8047
  }
8043
8048
 
8044
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
8049
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
8045
8050
  /* Checkbox Group - Mojave Theme */
8046
8051
 
8047
8052
  /* Each checkbox row is already a full tap target tall, so the rows sit close. */
@@ -8057,7 +8062,7 @@ button,
8057
8062
  pointer-events: none;
8058
8063
  }
8059
8064
 
8060
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
8065
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
8061
8066
  /* Collapsible - Mojave Theme
8062
8067
  *
8063
8068
  * No component tokens. Hover, press, chevron and motion are the disclosure concept
@@ -8173,7 +8178,7 @@ button,
8173
8178
  background: var(--sl-surface-raised);
8174
8179
  }
8175
8180
 
8176
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
8181
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
8177
8182
  /* Combobox - Mojave Theme
8178
8183
  *
8179
8184
  * No component tokens. The input is Input (Input.css); the chips box is a field; the
@@ -8658,7 +8663,7 @@ button,
8658
8663
  color: var(--sl-text-tertiary);
8659
8664
  }
8660
8665
 
8661
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
8666
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
8662
8667
  /* Context Menu - Mojave Theme
8663
8668
  *
8664
8669
  * 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
@@ -8827,7 +8832,7 @@ button,
8827
8832
  stroke-width: var(--sl-stroke-default);
8828
8833
  }
8829
8834
 
8830
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
8835
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
8831
8836
  /* Dialog and Alert dialog - Mojave Theme
8832
8837
  *
8833
8838
  * Both are centered modals built from the modal concept (tokens/semantic/modal.json):
@@ -8973,7 +8978,7 @@ button,
8973
8978
  margin-top: var(--sl-modal-actions-spacing);
8974
8979
  }
8975
8980
 
8976
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
8981
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
8977
8982
  /* Drawer - a panel that slides in from an edge and can be swiped away.
8978
8983
  The surface, scrim, heading and motion are the modal concept's (--sl-modal-*), so a
8979
8984
  drawer reads as a dialog's sibling; only its size and grab bar are its own
@@ -9106,7 +9111,7 @@ button,
9106
9111
  color: var(--sl-modal-description-color);
9107
9112
  }
9108
9113
 
9109
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
9114
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
9110
9115
  /* Field - Mojave Theme
9111
9116
  *
9112
9117
  * Label, control, description and error. No component tokens: spacing is the field
@@ -9167,7 +9172,7 @@ textarea.FieldControl {
9167
9172
  height: auto;
9168
9173
  }
9169
9174
 
9170
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
9175
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
9171
9176
  /* Fieldset - Mojave Theme
9172
9177
  *
9173
9178
  * No component tokens: a titled group of fields, spaced by the stack gaps, with
@@ -9209,7 +9214,7 @@ textarea.FieldControl {
9209
9214
  color: var(--sl-text-secondary);
9210
9215
  }
9211
9216
 
9212
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
9217
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
9213
9218
  /* Form - Mojave Theme
9214
9219
  *
9215
9220
  * No component tokens: fields stack with the large block space, and the action
@@ -9229,7 +9234,7 @@ textarea.FieldControl {
9229
9234
  margin-top: var(--sl-space-block-md);
9230
9235
  }
9231
9236
 
9232
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
9237
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
9233
9238
  /* Input - Mojave Theme
9234
9239
  *
9235
9240
  * No component tokens: the look is the field concept (tokens/semantic/field.json),
@@ -9366,7 +9371,7 @@ textarea.FieldControl {
9366
9371
  padding-inline: var(--sl-control-padding-inline-lg);
9367
9372
  }
9368
9373
 
9369
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
9374
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
9370
9375
  /* Menu - Mojave Theme
9371
9376
  *
9372
9377
  * No component tokens. The trigger is a Button. The popup is the popup concept, rows are item rows at the
@@ -9515,7 +9520,7 @@ textarea.FieldControl {
9515
9520
  color: var(--sl-text-tertiary);
9516
9521
  }
9517
9522
 
9518
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
9523
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
9519
9524
  /* Menubar - Mojave Theme
9520
9525
  *
9521
9526
  * No component tokens. A row of quiet triggers, each opening a menu. The popup is the popup concept, rows are item rows at the
@@ -9708,7 +9713,7 @@ textarea.FieldControl {
9708
9713
  color: var(--sl-text-tertiary);
9709
9714
  }
9710
9715
 
9711
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
9716
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
9712
9717
  /* Meter - Mojave Theme
9713
9718
  *
9714
9719
  * A gauge (tokens/semantic/gauge.json). The fill is the solid color of the scope around it:
@@ -9771,7 +9776,7 @@ textarea.FieldControl {
9771
9776
  height: var(--sl-gauge-height-lg);
9772
9777
  }
9773
9778
 
9774
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
9779
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
9775
9780
  /* Navigation Menu - Mojave Theme
9776
9781
  *
9777
9782
  * The strip is the bar concept, the panel is the popup concept and each link is an item
@@ -10191,7 +10196,7 @@ textarea.FieldControl {
10191
10196
  width: 100%;
10192
10197
  }
10193
10198
 
10194
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
10199
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
10195
10200
  /* Number Field - Mojave Theme
10196
10201
  *
10197
10202
  * No component tokens. The input is Input (Input.css) and the label, description and
@@ -10282,7 +10287,7 @@ textarea.FieldControl {
10282
10287
  user-select: none;
10283
10288
  }
10284
10289
 
10285
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
10290
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
10286
10291
  /* OTP Field - Mojave Theme
10287
10292
  *
10288
10293
  * One-time code entry: a row of single-character inputs. Each slot is the same control as Input
@@ -10345,7 +10350,7 @@ textarea.FieldControl {
10345
10350
  letter-spacing: var(--sl-font-body-magnify-letter-spacing);
10346
10351
  }
10347
10352
 
10348
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
10353
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
10349
10354
  /* Popover - Mojave Theme */
10350
10355
 
10351
10356
  /* ============================================
@@ -10510,7 +10515,7 @@ textarea.FieldControl {
10510
10515
  fill: var(--sl-popup-arrow-stroke);
10511
10516
  }
10512
10517
 
10513
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
10518
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
10514
10519
  /* Preview Card - Mojave Theme
10515
10520
  *
10516
10521
  * The popup concept (surface, arrow, motion) with a title-magnify title and condense
@@ -10627,7 +10632,7 @@ textarea.FieldControl {
10627
10632
  fill: var(--sl-popup-arrow-stroke);
10628
10633
  }
10629
10634
 
10630
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
10635
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
10631
10636
  /* Progress - Mojave Theme
10632
10637
  *
10633
10638
  * A gauge (tokens/semantic/gauge.json), the same bar as Meter. The fill is the solid color of
@@ -10704,7 +10709,7 @@ textarea.FieldControl {
10704
10709
  height: var(--sl-gauge-height-lg);
10705
10710
  }
10706
10711
 
10707
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
10712
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
10708
10713
  /* Radio - Mojave Theme
10709
10714
  * Same box as Checkbox, always round. Sizes follow the label the same way, and the
10710
10715
  * dot is a share of the circle (check.dot-scale).
@@ -10856,7 +10861,7 @@ textarea.FieldControl {
10856
10861
  gap: var(--sl-gap-stack-sm);
10857
10862
  }
10858
10863
 
10859
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
10864
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
10860
10865
  /* Scroll Area - Mojave Theme
10861
10866
  *
10862
10867
  * The scrollbar is the content scrollbar (content.scrollbar-*): a track that stays clear until
@@ -10938,7 +10943,7 @@ textarea.FieldControl {
10938
10943
  background: transparent;
10939
10944
  }
10940
10945
 
10941
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
10946
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
10942
10947
  /* Select - Mojave Theme
10943
10948
  *
10944
10949
  * The trigger is a field (the field pattern, control sizes, the base text style); the
@@ -11223,7 +11228,7 @@ textarea.FieldControl {
11223
11228
  stroke-width: var(--sl-stroke-default);
11224
11229
  }
11225
11230
 
11226
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
11231
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
11227
11232
  /* Separator - Mojave Theme
11228
11233
  *
11229
11234
  * A hairline in the everyday divider color (border.default), one stroke thick, with a step of
@@ -11251,7 +11256,7 @@ textarea.FieldControl {
11251
11256
  margin-inline: var(--sl-space-4);
11252
11257
  }
11253
11258
 
11254
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
11259
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
11255
11260
  /* Slider - Mojave Theme
11256
11261
  *
11257
11262
  * A slider is a gauge you can drag: the track, fill and label row are gauge.* (the same bar as
@@ -11417,7 +11422,7 @@ textarea.FieldControl {
11417
11422
  transform: translate(-50%, 50%);
11418
11423
  }
11419
11424
 
11420
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
11425
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
11421
11426
  /* Switch - Mojave Theme
11422
11427
  * Switch keeps its track sizes. The thumb, its travel and the ON/OFF text are
11423
11428
  * worked out from them: the thumb fills the track's height inside the padding,
@@ -11583,7 +11588,7 @@ textarea.FieldControl {
11583
11588
  color: var(--sl-text-disabled);
11584
11589
  }
11585
11590
 
11586
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
11591
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
11587
11592
  /* Tabs - Mojave Theme
11588
11593
  *
11589
11594
  * No component tokens. The divider, the selected line and color, hover and the disabled
@@ -11719,7 +11724,7 @@ textarea.FieldControl {
11719
11724
  padding: var(--sl-space-6);
11720
11725
  }
11721
11726
 
11722
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
11727
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
11723
11728
  /* Toast - Mojave Theme
11724
11729
  *
11725
11730
  * A toast is a notice (tokens/semantic/notice.json) on the popup surface. A toast whose type
@@ -11955,7 +11960,7 @@ textarea.FieldControl {
11955
11960
  flex-shrink: 0;
11956
11961
  }
11957
11962
 
11958
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
11963
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
11959
11964
  /* Toggle - Mojave Theme
11960
11965
  * A toggle is a button that stays pressed: the same heights, padding, gap and
11961
11966
  * trigger text style as a button of the same size. Pressed, it takes its emphasis level's
@@ -12067,7 +12072,7 @@ textarea.FieldControl {
12067
12072
  height: var(--sl-icon-size-maximize);
12068
12073
  }
12069
12074
 
12070
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
12075
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
12071
12076
  /* Toggle Group - Mojave Theme
12072
12077
  *
12073
12078
  * No component tokens. The strip is the bar concept (tokens/semantic/bar.json); the
@@ -12129,7 +12134,7 @@ textarea.FieldControl {
12129
12134
  outline-offset: var(--sl-focus-outline-offset-inset);
12130
12135
  }
12131
12136
 
12132
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
12137
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
12133
12138
  /* Toolbar - Mojave Theme
12134
12139
  *
12135
12140
  * The strip is the bar concept (tokens/semantic/bar.json). Buttons, toggles, selects
@@ -12191,7 +12196,7 @@ textarea.FieldControl {
12191
12196
  max-width: var(--sl-toolbar-input-max-width);
12192
12197
  }
12193
12198
 
12194
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
12199
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
12195
12200
  /* Tooltip - Mojave Theme
12196
12201
  *
12197
12202
  * The inverse surface (surface.inverse, text.on-inverse-surface) with condense text, so a tooltip
@@ -12252,7 +12257,7 @@ textarea.FieldControl {
12252
12257
  }
12253
12258
 
12254
12259
  /* Custom components: not Base UI parts. Built from existing concepts and tokens. */
12255
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
12260
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
12256
12261
  /* Badge
12257
12262
  *
12258
12263
  * A status or count label. Not a Base UI part, and not interactive: no hover or focus.
@@ -12357,7 +12362,7 @@ textarea.FieldControl {
12357
12362
  height: var(--sl-badge-dot-base);
12358
12363
  }
12359
12364
 
12360
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
12365
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
12361
12366
  /*
12362
12367
  * DatePicker: a field that opens a calendar for one date or a period.
12363
12368
  * Not a Base UI part. The popup is Popover on a wide viewport and Drawer
@@ -12930,7 +12935,7 @@ textarea.FieldControl {
12930
12935
  flex-basis: 100%;
12931
12936
  }
12932
12937
 
12933
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
12938
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
12934
12939
  /* Money field
12935
12940
  *
12936
12941
  * An amount of money, built on Number field. The value is an integer in minor units
@@ -13275,7 +13280,7 @@ textarea.FieldControl {
13275
13280
  letter-spacing: var(--sl-font-body-base-letter-spacing);
13276
13281
  }
13277
13282
 
13278
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
13283
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
13279
13284
  /* ListDetail
13280
13285
  *
13281
13286
  * The detail of one item, next to its list. Not a Base UI part. It is a Splitter
@@ -13402,7 +13407,7 @@ textarea.FieldControl {
13402
13407
  background: transparent;
13403
13408
  }
13404
13409
 
13405
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
13410
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
13406
13411
  /* Splitter
13407
13412
  *
13408
13413
  * Two or more panels and a handle between them. Not a Base UI part. It follows the
@@ -13610,7 +13615,7 @@ textarea.FieldControl {
13610
13615
  background: var(--sl-border-default);
13611
13616
  }
13612
13617
 
13613
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
13618
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
13614
13619
  /* EmptyState
13615
13620
  *
13616
13621
  * The block a page, pane, table, list or popup shows when it has nothing to show.
@@ -13866,7 +13871,7 @@ textarea.FieldControl {
13866
13871
  color: inherit;
13867
13872
  }
13868
13873
 
13869
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
13874
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
13870
13875
  /* Table - Mojave Theme
13871
13876
  *
13872
13877
  * Base UI has no table, so this styles the native <table class="Table"> elements with the
@@ -14100,7 +14105,7 @@ textarea.FieldControl {
14100
14105
  color: inherit;
14101
14106
  }
14102
14107
 
14103
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
14108
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
14104
14109
  /* Collection
14105
14110
  *
14106
14111
  * DataTable, DataList, the toolbar and the pagination, in one place so the two views
@@ -14111,7 +14116,7 @@ textarea.FieldControl {
14111
14116
  * the tabs and the search where they are, so selecting rows does not grow the toolbar.
14112
14117
  */
14113
14118
 
14114
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
14119
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
14115
14120
  /* Collection toolbar
14116
14121
  *
14117
14122
  * The wrap follows the toolbar's own width, not the window: a table in a narrow pane wraps
@@ -14252,7 +14257,7 @@ textarea.FieldControl {
14252
14257
  letter-spacing: var(--sl-font-body-condense-letter-spacing);
14253
14258
  }
14254
14259
 
14255
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
14260
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
14256
14261
  /* DataTable additions on top of .Table.
14257
14262
  *
14258
14263
  * Sort buttons fill the header cell and inherit its hover, so old aria-sort markup keeps
@@ -14373,7 +14378,50 @@ textarea.FieldControl {
14373
14378
  color: var(--sl-table-subtle-color);
14374
14379
  }
14375
14380
 
14376
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
14381
+ /* Tree rows. `treeLines` draws an elbow from each child's name back up to its parent. */
14382
+ .DataTable {
14383
+ --row-depth: 0;
14384
+ }
14385
+
14386
+ .DataTable[data-tree-lines] tbody tr[data-depth] > th[scope='row'] {
14387
+ position: relative;
14388
+ }
14389
+
14390
+ .DataTable[data-tree-lines] tbody tr[data-depth] > th[scope='row']::before {
14391
+ content: '';
14392
+ position: absolute;
14393
+ inset-block: 0 50%;
14394
+ inset-inline-start: calc(
14395
+ var(--sl-table-cell-padding-inline) + var(--sl-collection-tree-indent) * (var(--row-depth) - 1) + var(--sl-collection-tree-indent) * 0.5
14396
+ );
14397
+ inline-size: calc(var(--sl-collection-tree-indent) * 0.375);
14398
+ border-inline-start: var(--sl-stroke-default) solid var(--sl-collection-tree-line-color);
14399
+ border-block-end: var(--sl-stroke-default) solid var(--sl-collection-tree-line-color);
14400
+ pointer-events: none;
14401
+ }
14402
+
14403
+ /* A small expand and collapse button, so a parent row stays the height of its siblings. */
14404
+ .DataTable[data-disclosure='small'] .CollectionGroupButton:has(> .material-symbols-outlined:only-child) {
14405
+ display: inline-flex;
14406
+ align-items: center;
14407
+ justify-content: center;
14408
+ inline-size: var(--sl-collection-disclosure-size-small);
14409
+ block-size: var(--sl-collection-disclosure-size-small);
14410
+ margin-inline-end: var(--sl-space-1);
14411
+ vertical-align: middle;
14412
+ }
14413
+
14414
+ .DataTable[data-disclosure='small'] .CollectionGroupButton > .material-symbols-outlined {
14415
+ font-size: var(--sl-collection-disclosure-size-small);
14416
+ }
14417
+
14418
+ /* A row that opens more rows or a page: its name reads as a link. */
14419
+ .DataTable tbody tr[data-kind='link'] :is(a, .CollectionRowButton) {
14420
+ color: var(--sl-content-link-color);
14421
+ font-weight: var(--sl-font-weight-semibold);
14422
+ }
14423
+
14424
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
14377
14425
  /* DataList
14378
14426
  *
14379
14427
  * The same rows as the table, in one container with the table's borders, hover, selected
@@ -14515,7 +14563,7 @@ textarea.FieldControl {
14515
14563
  transition: opacity var(--sl-duration-fast) var(--sl-easing-default);
14516
14564
  }
14517
14565
 
14518
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
14566
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
14519
14567
  /* Pagination
14520
14568
  *
14521
14569
  * Not tied to a collection. Anything with a page, a page count and a total can use it.
@@ -14540,7 +14588,7 @@ textarea.FieldControl {
14540
14588
  margin: 0;
14541
14589
  }
14542
14590
 
14543
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
14591
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
14544
14592
  /* EditableList
14545
14593
  *
14546
14594
  * One table at every width, so a field is not submitted twice. Under the stack width each
@@ -14639,7 +14687,7 @@ textarea.FieldControl {
14639
14687
  }
14640
14688
  }
14641
14689
 
14642
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
14690
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
14643
14691
  /* Sheet
14644
14692
  *
14645
14693
  * A working-paper surface: the raised surface with a heavier rule across its top
@@ -14730,7 +14778,7 @@ textarea.FieldControl {
14730
14778
  border-top: 0;
14731
14779
  }
14732
14780
 
14733
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
14781
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
14734
14782
  /* StatFigure
14735
14783
  *
14736
14784
  * One large figure with a caps label above and a caption under it. The label is
@@ -14791,7 +14839,7 @@ textarea.FieldControl {
14791
14839
  color: var(--sl-stat-figure-caption-color);
14792
14840
  }
14793
14841
 
14794
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
14842
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
14795
14843
  /* DescriptionList
14796
14844
  *
14797
14845
  * Label and value pairs in a native dl, one DescriptionItem (a div holding a dt and a dd)
@@ -14867,7 +14915,7 @@ textarea.FieldControl {
14867
14915
  text-align: end;
14868
14916
  }
14869
14917
 
14870
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
14918
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
14871
14919
  /* AppBar
14872
14920
  *
14873
14921
  * The bar across the top of an app window, one row on a line in the rule color. The line is
@@ -14901,7 +14949,7 @@ textarea.FieldControl {
14901
14949
  background: var(--sl-app-bar-divider-color);
14902
14950
  }
14903
14951
 
14904
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
14952
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
14905
14953
  /* PickerButton
14906
14954
  *
14907
14955
  * A trigger with a caps label before the current choice: CLIENT Alpha Services. The field
@@ -14987,7 +15035,7 @@ textarea.FieldControl {
14987
15035
  transform: rotate(180deg);
14988
15036
  }
14989
15037
 
14990
- /* @scattered-light/loomiere-base-ui 0.11.0 · styles for @base-ui/react 1.9.0 */
15038
+ /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
14991
15039
  /* SideNav
14992
15040
  *
14993
15041
  * The column of links down the side of a workspace. Rows are ruled apart with a hairline; the