@scattered-light/loomiere-mojave 0.14.0 → 0.15.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.
@@ -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. */
@@ -2431,6 +2432,7 @@
2431
2432
  --sl-toggle-group-segmented-pressed-color: var(--sl-text-on-inverse); /** Text on the pressed toggle. */
2432
2433
  --sl-check-background: var(--sl-field-background); /** Empty box, the same fill as a field so it reads as something to fill in. */
2433
2434
  --sl-popup-arrow-fill: var(--sl-popup-background); /** The arrow is part of the popup, so it takes the popup's fill. */
2435
+ --sl-table-grand-total-top-color: var(--sl-table-total-rule-color); /** The line above a grand total row. The total rule color by default; a brand can quiet it so the double rule under the figures leads. */
2434
2436
  --sl-collection-tree-parent-row-hover: var(--sl-table-row-hover); /** A parent row under the pointer, with treeLines. A brand sets it a step darker than table.row-hover so a parent still stands out when hovered. */
2435
2437
  }
2436
2438
 
@@ -5913,6 +5915,7 @@
5913
5915
  --sl-table-range-background: var(--sl-interactive-tint);
5914
5916
  --sl-table-range-border: var(--sl-focus-ring);
5915
5917
  --sl-table-total-rule-color: var(--sl-rule-color);
5918
+ --sl-table-grand-total-top-color: var(--sl-table-total-rule-color);
5916
5919
  --sl-table-total-background: var(--sl-table-background);
5917
5920
  --sl-app-bar-background: var(--sl-surface-raised);
5918
5921
  --sl-app-bar-border-color: var(--sl-rule-color);
@@ -6102,6 +6105,7 @@
6102
6105
  --sl-table-range-background: var(--sl-interactive-tint);
6103
6106
  --sl-table-range-border: var(--sl-focus-ring);
6104
6107
  --sl-table-total-rule-color: var(--sl-rule-color);
6108
+ --sl-table-grand-total-top-color: var(--sl-table-total-rule-color);
6105
6109
  --sl-table-total-background: var(--sl-table-background);
6106
6110
  --sl-app-bar-background: var(--sl-surface-raised);
6107
6111
  --sl-app-bar-border-color: var(--sl-rule-color);
@@ -6291,6 +6295,7 @@
6291
6295
  --sl-table-range-background: var(--sl-interactive-tint);
6292
6296
  --sl-table-range-border: var(--sl-focus-ring);
6293
6297
  --sl-table-total-rule-color: var(--sl-rule-color);
6298
+ --sl-table-grand-total-top-color: var(--sl-table-total-rule-color);
6294
6299
  --sl-table-total-background: var(--sl-table-background);
6295
6300
  --sl-app-bar-background: var(--sl-surface-raised);
6296
6301
  --sl-app-bar-border-color: var(--sl-rule-color);
@@ -6688,7 +6693,7 @@
6688
6693
  }
6689
6694
 
6690
6695
 
6691
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
6696
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
6692
6697
  /* Loomiere for Base UI: component styles. Brand-free: every value is a --sl- variable from a
6693
6698
  Loomiere theme. Load the theme first:
6694
6699
  @import '<your theme>/tokens.css';
@@ -6698,7 +6703,7 @@
6698
6703
  /* Document defaults, in the reset layer so any unlayered rule wins over them, and so layered
6699
6704
  frameworks (Chakra's recipes, Tailwind's utilities) are not undone by them. */
6700
6705
  @layer reset {
6701
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
6706
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
6702
6707
  /* CSS Reset - Mojave Theme */
6703
6708
 
6704
6709
  /* ============================================
@@ -7142,7 +7147,7 @@ hr {
7142
7147
  }
7143
7148
  }
7144
7149
  @layer reset {
7145
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
7150
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
7146
7151
  /* Accessibility — base rules (no theme color dependencies). Theme-specific focus/invalid: accessibility-theme.css */
7147
7152
 
7148
7153
  /* Remove default focus; keyboard focus styled in accessibility-theme.css */
@@ -7255,7 +7260,7 @@ main:focus {
7255
7260
 
7256
7261
  }
7257
7262
  @layer reset {
7258
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
7263
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
7259
7264
  /* Focus, invalid, contrast — requires theme tokens (after theme-accessibility.css). */
7260
7265
 
7261
7266
  :focus-visible {
@@ -7323,7 +7328,7 @@ button,
7323
7328
 
7324
7329
  }
7325
7330
  /* Component styles */
7326
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
7331
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
7327
7332
  /* Accordion - Mojave Theme
7328
7333
  *
7329
7334
  * No component tokens. Hover, press, chevron, divider and motion are the disclosure
@@ -7444,7 +7449,7 @@ button,
7444
7449
  overflow: hidden;
7445
7450
  }
7446
7451
 
7447
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
7452
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
7448
7453
  /* Alert Dialog - Mojave Theme
7449
7454
  *
7450
7455
  * No component tokens and no rules of its own. An alert dialog looks exactly like a
@@ -7453,7 +7458,7 @@ button,
7453
7458
  * cancel quiet, and a destructive one bold with data-color="error".
7454
7459
  */
7455
7460
 
7456
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
7461
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
7457
7462
  /* Autocomplete - Mojave Theme
7458
7463
  *
7459
7464
  * No component tokens. The input is Input (Input.css), the clear button is an icon
@@ -7655,7 +7660,7 @@ button,
7655
7660
  (reset-accessibility.css).
7656
7661
  ============================================ */
7657
7662
 
7658
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
7663
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
7659
7664
  /* Avatar - Mojave Theme
7660
7665
  *
7661
7666
  * A round picture with a ring in the page color, so avatars in a group cut out of each other in
@@ -7763,7 +7768,7 @@ button,
7763
7768
  }
7764
7769
  }
7765
7770
 
7766
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
7771
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
7767
7772
  /* Button - Mojave Theme
7768
7773
  *
7769
7774
  * Colors are the brand's emphasis levels, sizes are control.*, text is the trigger
@@ -7913,7 +7918,7 @@ button,
7913
7918
  font-size: var(--sl-icon-size-maximize);
7914
7919
  }
7915
7920
 
7916
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
7921
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
7917
7922
  /* Checkbox - Mojave Theme
7918
7923
  * Sizes follow the label: the box is the icon size one tier above the label's text
7919
7924
  * tier (like a button's icon) and the check mark one tier below it.
@@ -8070,7 +8075,7 @@ button,
8070
8075
  border-radius: var(--sl-radius-pill);
8071
8076
  }
8072
8077
 
8073
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
8078
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
8074
8079
  /* Checkbox Group - Mojave Theme */
8075
8080
 
8076
8081
  /* Each checkbox row is already a full tap target tall, so the rows sit close. */
@@ -8086,7 +8091,7 @@ button,
8086
8091
  pointer-events: none;
8087
8092
  }
8088
8093
 
8089
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
8094
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
8090
8095
  /* Collapsible - Mojave Theme
8091
8096
  *
8092
8097
  * No component tokens. Hover, press, chevron and motion are the disclosure concept
@@ -8202,7 +8207,7 @@ button,
8202
8207
  background: var(--sl-surface-raised);
8203
8208
  }
8204
8209
 
8205
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
8210
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
8206
8211
  /* Combobox - Mojave Theme
8207
8212
  *
8208
8213
  * No component tokens. The input is Input (Input.css); the chips box is a field; the
@@ -8687,7 +8692,7 @@ button,
8687
8692
  color: var(--sl-text-tertiary);
8688
8693
  }
8689
8694
 
8690
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
8695
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
8691
8696
  /* Context Menu - Mojave Theme
8692
8697
  *
8693
8698
  * 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 +8861,7 @@ button,
8856
8861
  stroke-width: var(--sl-stroke-default);
8857
8862
  }
8858
8863
 
8859
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
8864
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
8860
8865
  /* Dialog and Alert dialog - Mojave Theme
8861
8866
  *
8862
8867
  * Both are centered modals built from the modal concept (tokens/semantic/modal.json):
@@ -9002,7 +9007,7 @@ button,
9002
9007
  margin-top: var(--sl-modal-actions-spacing);
9003
9008
  }
9004
9009
 
9005
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
9010
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
9006
9011
  /* Drawer - a panel that slides in from an edge and can be swiped away.
9007
9012
  The surface, scrim, heading and motion are the modal concept's (--sl-modal-*), so a
9008
9013
  drawer reads as a dialog's sibling; only its size and grab bar are its own
@@ -9135,7 +9140,7 @@ button,
9135
9140
  color: var(--sl-modal-description-color);
9136
9141
  }
9137
9142
 
9138
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
9143
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
9139
9144
  /* Field - Mojave Theme
9140
9145
  *
9141
9146
  * Label, control, description and error. No component tokens: spacing is the field
@@ -9196,7 +9201,7 @@ textarea.FieldControl {
9196
9201
  height: auto;
9197
9202
  }
9198
9203
 
9199
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
9204
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
9200
9205
  /* Fieldset - Mojave Theme
9201
9206
  *
9202
9207
  * No component tokens: a titled group of fields, spaced by the stack gaps, with
@@ -9238,7 +9243,7 @@ textarea.FieldControl {
9238
9243
  color: var(--sl-text-secondary);
9239
9244
  }
9240
9245
 
9241
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
9246
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
9242
9247
  /* Form - Mojave Theme
9243
9248
  *
9244
9249
  * No component tokens: fields stack with the large block space, and the action
@@ -9258,7 +9263,7 @@ textarea.FieldControl {
9258
9263
  margin-top: var(--sl-space-block-md);
9259
9264
  }
9260
9265
 
9261
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
9266
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
9262
9267
  /* Input - Mojave Theme
9263
9268
  *
9264
9269
  * No component tokens: the look is the field concept (tokens/semantic/field.json),
@@ -9395,7 +9400,7 @@ textarea.FieldControl {
9395
9400
  padding-inline: var(--sl-control-padding-inline-lg);
9396
9401
  }
9397
9402
 
9398
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
9403
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
9399
9404
  /* Menu - Mojave Theme
9400
9405
  *
9401
9406
  * No component tokens. The trigger is a Button. The popup is the popup concept, rows are item rows at the
@@ -9544,7 +9549,7 @@ textarea.FieldControl {
9544
9549
  color: var(--sl-text-tertiary);
9545
9550
  }
9546
9551
 
9547
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
9552
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
9548
9553
  /* Menubar - Mojave Theme
9549
9554
  *
9550
9555
  * 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 +9742,7 @@ textarea.FieldControl {
9737
9742
  color: var(--sl-text-tertiary);
9738
9743
  }
9739
9744
 
9740
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
9745
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
9741
9746
  /* Meter - Mojave Theme
9742
9747
  *
9743
9748
  * A gauge (tokens/semantic/gauge.json). The fill is the solid color of the scope around it:
@@ -9800,7 +9805,7 @@ textarea.FieldControl {
9800
9805
  height: var(--sl-gauge-height-lg);
9801
9806
  }
9802
9807
 
9803
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
9808
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
9804
9809
  /* Navigation Menu - Mojave Theme
9805
9810
  *
9806
9811
  * The strip is the bar concept, the panel is the popup concept and each link is an item
@@ -10220,7 +10225,7 @@ textarea.FieldControl {
10220
10225
  width: 100%;
10221
10226
  }
10222
10227
 
10223
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
10228
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
10224
10229
  /* Number Field - Mojave Theme
10225
10230
  *
10226
10231
  * No component tokens. The input is Input (Input.css) and the label, description and
@@ -10311,7 +10316,7 @@ textarea.FieldControl {
10311
10316
  user-select: none;
10312
10317
  }
10313
10318
 
10314
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
10319
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
10315
10320
  /* OTP Field - Mojave Theme
10316
10321
  *
10317
10322
  * One-time code entry: a row of single-character inputs. Each slot is the same control as Input
@@ -10374,7 +10379,7 @@ textarea.FieldControl {
10374
10379
  letter-spacing: var(--sl-font-body-magnify-letter-spacing);
10375
10380
  }
10376
10381
 
10377
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
10382
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
10378
10383
  /* Popover - Mojave Theme */
10379
10384
 
10380
10385
  /* ============================================
@@ -10539,7 +10544,7 @@ textarea.FieldControl {
10539
10544
  fill: var(--sl-popup-arrow-stroke);
10540
10545
  }
10541
10546
 
10542
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
10547
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
10543
10548
  /* Preview Card - Mojave Theme
10544
10549
  *
10545
10550
  * The popup concept (surface, arrow, motion) with a title-magnify title and condense
@@ -10656,7 +10661,7 @@ textarea.FieldControl {
10656
10661
  fill: var(--sl-popup-arrow-stroke);
10657
10662
  }
10658
10663
 
10659
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
10664
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
10660
10665
  /* Progress - Mojave Theme
10661
10666
  *
10662
10667
  * A gauge (tokens/semantic/gauge.json), the same bar as Meter. The fill is the solid color of
@@ -10733,7 +10738,7 @@ textarea.FieldControl {
10733
10738
  height: var(--sl-gauge-height-lg);
10734
10739
  }
10735
10740
 
10736
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
10741
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
10737
10742
  /* Radio - Mojave Theme
10738
10743
  * Same box as Checkbox, always round. Sizes follow the label the same way, and the
10739
10744
  * dot is a share of the circle (check.dot-scale).
@@ -10885,7 +10890,7 @@ textarea.FieldControl {
10885
10890
  gap: var(--sl-gap-stack-sm);
10886
10891
  }
10887
10892
 
10888
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
10893
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
10889
10894
  /* Scroll Area - Mojave Theme
10890
10895
  *
10891
10896
  * The scrollbar is the content scrollbar (content.scrollbar-*): a track that stays clear until
@@ -10967,7 +10972,7 @@ textarea.FieldControl {
10967
10972
  background: transparent;
10968
10973
  }
10969
10974
 
10970
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
10975
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
10971
10976
  /* Select - Mojave Theme
10972
10977
  *
10973
10978
  * The trigger is a field (the field pattern, control sizes, the base text style); the
@@ -11252,7 +11257,7 @@ textarea.FieldControl {
11252
11257
  stroke-width: var(--sl-stroke-default);
11253
11258
  }
11254
11259
 
11255
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
11260
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
11256
11261
  /* Separator - Mojave Theme
11257
11262
  *
11258
11263
  * A hairline in the everyday divider color (border.default), one stroke thick, with a step of
@@ -11280,7 +11285,7 @@ textarea.FieldControl {
11280
11285
  margin-inline: var(--sl-space-4);
11281
11286
  }
11282
11287
 
11283
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
11288
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
11284
11289
  /* Slider - Mojave Theme
11285
11290
  *
11286
11291
  * A slider is a gauge you can drag: the track, fill and label row are gauge.* (the same bar as
@@ -11446,7 +11451,7 @@ textarea.FieldControl {
11446
11451
  transform: translate(-50%, 50%);
11447
11452
  }
11448
11453
 
11449
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
11454
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
11450
11455
  /* Switch - Mojave Theme
11451
11456
  * Switch keeps its track sizes. The thumb, its travel and the ON/OFF text are
11452
11457
  * worked out from them: the thumb fills the track's height inside the padding,
@@ -11612,7 +11617,7 @@ textarea.FieldControl {
11612
11617
  color: var(--sl-text-disabled);
11613
11618
  }
11614
11619
 
11615
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
11620
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
11616
11621
  /* Tabs - Mojave Theme
11617
11622
  *
11618
11623
  * No component tokens. The divider, the selected line and color, hover and the disabled
@@ -11748,7 +11753,7 @@ textarea.FieldControl {
11748
11753
  padding: var(--sl-space-6);
11749
11754
  }
11750
11755
 
11751
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
11756
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
11752
11757
  /* Toast - Mojave Theme
11753
11758
  *
11754
11759
  * A toast is a notice (tokens/semantic/notice.json) on the popup surface. A toast whose type
@@ -11984,7 +11989,7 @@ textarea.FieldControl {
11984
11989
  flex-shrink: 0;
11985
11990
  }
11986
11991
 
11987
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
11992
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
11988
11993
  /* Toggle - Mojave Theme
11989
11994
  * A toggle is a button that stays pressed: the same heights, padding, gap and
11990
11995
  * trigger text style as a button of the same size. Pressed, it takes its emphasis level's
@@ -12096,7 +12101,7 @@ textarea.FieldControl {
12096
12101
  height: var(--sl-icon-size-maximize);
12097
12102
  }
12098
12103
 
12099
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
12104
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
12100
12105
  /* Toggle Group - Mojave Theme
12101
12106
  *
12102
12107
  * No component tokens. The strip is the bar concept (tokens/semantic/bar.json); the
@@ -12158,7 +12163,7 @@ textarea.FieldControl {
12158
12163
  outline-offset: var(--sl-focus-outline-offset-inset);
12159
12164
  }
12160
12165
 
12161
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
12166
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
12162
12167
  /* Toolbar - Mojave Theme
12163
12168
  *
12164
12169
  * The strip is the bar concept (tokens/semantic/bar.json). Buttons, toggles, selects
@@ -12220,7 +12225,7 @@ textarea.FieldControl {
12220
12225
  max-width: var(--sl-toolbar-input-max-width);
12221
12226
  }
12222
12227
 
12223
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
12228
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
12224
12229
  /* Tooltip - Mojave Theme
12225
12230
  *
12226
12231
  * The inverse surface (surface.inverse, text.on-inverse-surface) with condense text, so a tooltip
@@ -12281,7 +12286,7 @@ textarea.FieldControl {
12281
12286
  }
12282
12287
 
12283
12288
  /* Custom components: not Base UI parts. Built from existing concepts and tokens. */
12284
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
12289
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
12285
12290
  /* Badge
12286
12291
  *
12287
12292
  * A status or count label. Not a Base UI part, and not interactive: no hover or focus.
@@ -12386,7 +12391,7 @@ textarea.FieldControl {
12386
12391
  height: var(--sl-badge-dot-base);
12387
12392
  }
12388
12393
 
12389
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
12394
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
12390
12395
  /*
12391
12396
  * DatePicker: a field that opens a calendar for one date or a period.
12392
12397
  * Not a Base UI part. The popup is Popover on a wide viewport and Drawer
@@ -12959,7 +12964,7 @@ textarea.FieldControl {
12959
12964
  flex-basis: 100%;
12960
12965
  }
12961
12966
 
12962
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
12967
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
12963
12968
  /* Money field
12964
12969
  *
12965
12970
  * An amount of money, built on Number field. The value is an integer in minor units
@@ -13304,7 +13309,7 @@ textarea.FieldControl {
13304
13309
  letter-spacing: var(--sl-font-body-base-letter-spacing);
13305
13310
  }
13306
13311
 
13307
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
13312
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
13308
13313
  /* ListDetail
13309
13314
  *
13310
13315
  * The detail of one item, next to its list. Not a Base UI part. It is a Splitter
@@ -13431,7 +13436,7 @@ textarea.FieldControl {
13431
13436
  background: transparent;
13432
13437
  }
13433
13438
 
13434
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
13439
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
13435
13440
  /* Splitter
13436
13441
  *
13437
13442
  * Two or more panels and a handle between them. Not a Base UI part. It follows the
@@ -13639,7 +13644,7 @@ textarea.FieldControl {
13639
13644
  background: var(--sl-border-default);
13640
13645
  }
13641
13646
 
13642
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
13647
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
13643
13648
  /* EmptyState
13644
13649
  *
13645
13650
  * The block a page, pane, table, list or popup shows when it has nothing to show.
@@ -13895,7 +13900,7 @@ textarea.FieldControl {
13895
13900
  color: inherit;
13896
13901
  }
13897
13902
 
13898
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
13903
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
13899
13904
  /* Table - Mojave Theme
13900
13905
  *
13901
13906
  * Base UI has no table, so this styles the native <table class="Table"> elements with the
@@ -14109,6 +14114,15 @@ textarea.FieldControl {
14109
14114
  border-top: var(--sl-stroke-default) solid var(--sl-table-border-color);
14110
14115
  }
14111
14116
 
14117
+ /* The grand total's top line can be a quieter color than the subtotal's: table.grand-total-top-color. */
14118
+ .Table :is(tbody, tfoot) tr[data-total='grand'] > * {
14119
+ border-top-color: var(--sl-table-grand-total-top-color);
14120
+ }
14121
+
14122
+ .Table tfoot tr[data-total='grand'] > [data-rule='none'] {
14123
+ border-top-color: var(--sl-table-grand-total-top-color);
14124
+ }
14125
+
14112
14126
  @media (hover: hover) {
14113
14127
  .Table tbody tr[data-total]:hover > * {
14114
14128
  background: var(--sl-table-total-background);
@@ -14146,7 +14160,7 @@ textarea.FieldControl {
14146
14160
  color: inherit;
14147
14161
  }
14148
14162
 
14149
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
14163
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
14150
14164
  /* Collection
14151
14165
  *
14152
14166
  * DataTable, DataList, the toolbar and the pagination, in one place so the two views
@@ -14157,7 +14171,7 @@ textarea.FieldControl {
14157
14171
  * the tabs and the search where they are, so selecting rows does not grow the toolbar.
14158
14172
  */
14159
14173
 
14160
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
14174
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
14161
14175
  /* Collection toolbar
14162
14176
  *
14163
14177
  * The wrap follows the toolbar's own width, not the window: a table in a narrow pane wraps
@@ -14323,7 +14337,7 @@ textarea.FieldControl {
14323
14337
  border-block-end: var(--sl-stroke-default) solid var(--sl-table-border-color);
14324
14338
  }
14325
14339
 
14326
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
14340
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
14327
14341
  /* DataTable additions on top of .Table.
14328
14342
  *
14329
14343
  * Sort buttons fill the header cell and inherit its hover, so old aria-sort markup keeps
@@ -14522,7 +14536,7 @@ textarea.FieldControl {
14522
14536
  }
14523
14537
  }
14524
14538
 
14525
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
14539
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
14526
14540
  /* DataList
14527
14541
  *
14528
14542
  * The same rows as the table, in one container with the table's borders, hover, selected
@@ -14664,7 +14678,7 @@ textarea.FieldControl {
14664
14678
  transition: opacity var(--sl-duration-fast) var(--sl-easing-default);
14665
14679
  }
14666
14680
 
14667
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
14681
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
14668
14682
  /* Pagination
14669
14683
  *
14670
14684
  * Not tied to a collection. Anything with a page, a page count and a total can use it.
@@ -14689,7 +14703,7 @@ textarea.FieldControl {
14689
14703
  margin: 0;
14690
14704
  }
14691
14705
 
14692
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
14706
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
14693
14707
  /* EditableList
14694
14708
  *
14695
14709
  * One table at every width, so a field is not submitted twice. Under the stack width each
@@ -14788,7 +14802,7 @@ textarea.FieldControl {
14788
14802
  }
14789
14803
  }
14790
14804
 
14791
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
14805
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
14792
14806
  /* Sheet
14793
14807
  *
14794
14808
  * A working-paper surface: the raised surface with a heavier rule across its top
@@ -14875,13 +14889,19 @@ textarea.FieldControl {
14875
14889
  border-radius: 0;
14876
14890
  }
14877
14891
 
14892
+ /* And its fill: rows rest on the sheet, so a row's hover tint shows against it. */
14893
+ .SheetBody > .Table,
14894
+ .SheetBody > .CollectionView .Table {
14895
+ background: transparent;
14896
+ }
14897
+
14878
14898
  .SheetBody > .Table > thead > tr:first-child > *,
14879
14899
  .SheetBody > .Table:not(:has(> thead)) > tbody:first-of-type > tr:first-child > *,
14880
14900
  .SheetBody > .DataList ul > li:first-child {
14881
14901
  border-top: 0;
14882
14902
  }
14883
14903
 
14884
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
14904
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
14885
14905
  /* StatFigure
14886
14906
  *
14887
14907
  * One large figure with a caps label above and a caption under it. The label is
@@ -14942,7 +14962,7 @@ textarea.FieldControl {
14942
14962
  color: var(--sl-stat-figure-caption-color);
14943
14963
  }
14944
14964
 
14945
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
14965
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
14946
14966
  /* DescriptionList
14947
14967
  *
14948
14968
  * Label and value pairs in a native dl, one DescriptionItem (a div holding a dt and a dd)
@@ -15018,7 +15038,7 @@ textarea.FieldControl {
15018
15038
  text-align: end;
15019
15039
  }
15020
15040
 
15021
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
15041
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
15022
15042
  /* AppBar
15023
15043
  *
15024
15044
  * The bar across the top of an app window, one row on a line in the rule color. The line is
@@ -15052,13 +15072,14 @@ textarea.FieldControl {
15052
15072
  background: var(--sl-app-bar-divider-color);
15053
15073
  }
15054
15074
 
15055
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
15075
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
15056
15076
  /* PickerButton
15057
15077
  *
15058
15078
  * A trigger with a caps label before the current choice: CLIENT Alpha Services. The field
15059
15079
  * look and states of a Select trigger; the label is caps-condense in picker-button.label-color,
15060
15080
  * the choice is cut with an ellipsis at picker-button.max-width and the chevron turns while
15061
- * its popup is open. Tokens: picker-button.* (tokens/component/picker-button.json) and field.*.
15081
+ * its popup is open. Label and choice share a baseline, so caps beside lowercase read as one line;
15082
+ * picker-button.text-offset nudges both down for a typeface that sits high. Tokens: picker-button.* (tokens/component/picker-button.json) and field.*.
15062
15083
  */
15063
15084
 
15064
15085
  .PickerButton {
@@ -15074,8 +15095,15 @@ textarea.FieldControl {
15074
15095
  font-weight: var(--sl-font-body-base-font-weight);
15075
15096
  line-height: var(--sl-font-body-base-line-height);
15076
15097
  letter-spacing: var(--sl-font-body-base-letter-spacing);
15077
- display: inline-flex;
15078
- align-items: center;
15098
+ /* A grid, not a flex row: label and choice share a baseline, and align-content centers that
15099
+ pair in the button's height. The choice column shrinks so a long choice gets its ellipsis. */
15100
+ display: inline-grid;
15101
+ grid-auto-flow: column;
15102
+ grid-template-columns: max-content minmax(0, max-content);
15103
+ grid-auto-columns: max-content;
15104
+ align-items: baseline;
15105
+ align-content: center;
15106
+ justify-content: start;
15079
15107
  gap: var(--sl-gap-control);
15080
15108
  max-width: var(--sl-picker-button-max-width);
15081
15109
  min-width: 0;
@@ -15109,11 +15137,15 @@ textarea.FieldControl {
15109
15137
  line-height: var(--sl-font-caps-condense-line-height);
15110
15138
  letter-spacing: var(--sl-font-caps-condense-letter-spacing);
15111
15139
  text-transform: var(--sl-font-caps-condense-text-transform);
15140
+ position: relative;
15141
+ top: var(--sl-picker-button-text-offset);
15112
15142
  flex: none;
15113
15143
  color: var(--sl-picker-button-label-color);
15114
15144
  }
15115
15145
 
15116
15146
  .PickerButtonValue {
15147
+ position: relative;
15148
+ top: var(--sl-picker-button-text-offset);
15117
15149
  flex: 0 1 auto;
15118
15150
  min-width: 0;
15119
15151
  overflow: hidden;
@@ -15127,6 +15159,7 @@ textarea.FieldControl {
15127
15159
 
15128
15160
  .PickerButtonIcon {
15129
15161
  flex: none;
15162
+ align-self: center;
15130
15163
  width: var(--sl-icon-size-base);
15131
15164
  height: var(--sl-icon-size-base);
15132
15165
  color: var(--sl-text-tertiary);
@@ -15138,7 +15171,104 @@ textarea.FieldControl {
15138
15171
  transform: rotate(180deg);
15139
15172
  }
15140
15173
 
15141
- /* @scattered-light/loomiere-base-ui 0.14.0 · styles for @base-ui/react 1.9.0 */
15174
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
15175
+ /* PickerSplit
15176
+ *
15177
+ * A PickerButton whose choice is itself a control: the main part (CLIENT Alpha Services) acts,
15178
+ * and a square trigger beside it, divided by a hairline, opens the list. The root carries the
15179
+ * field look so a popup anchors to the whole control; each part fills on hover and the border
15180
+ * darkens for the control as a whole. Label, choice and chevron reuse the PickerButton parts and
15181
+ * tokens (picker-button.*), so the two read as one family.
15182
+ */
15183
+
15184
+ .PickerSplit {
15185
+ box-sizing: border-box;
15186
+ color: var(--sl-field-color);
15187
+ background: var(--sl-field-background);
15188
+ border: var(--sl-field-border-width) solid var(--sl-field-border-color);
15189
+ border-radius: var(--sl-field-radius);
15190
+ transition: var(--sl-field-transition);
15191
+ outline: none;
15192
+ display: inline-grid;
15193
+ grid-template-columns: minmax(0, 1fr) var(--sl-control-height-md);
15194
+ box-sizing: border-box;
15195
+ max-width: var(--sl-picker-button-max-width);
15196
+ min-width: 0;
15197
+ height: var(--sl-control-height-md);
15198
+ padding: 0;
15199
+ overflow: hidden;
15200
+ }
15201
+
15202
+ .PickerSplit:hover:not(:has(:disabled)) {
15203
+ border-color: var(--sl-field-border-color-hover);
15204
+ }
15205
+
15206
+ .PickerSplitMain,
15207
+ .PickerSplitTrigger {
15208
+ font-family: var(--sl-font-body-base-font-family);
15209
+ font-size: var(--sl-font-body-base-font-size);
15210
+ font-weight: var(--sl-font-body-base-font-weight);
15211
+ line-height: var(--sl-font-body-base-line-height);
15212
+ letter-spacing: var(--sl-font-body-base-letter-spacing);
15213
+ box-sizing: border-box;
15214
+ height: 100%;
15215
+ margin: 0;
15216
+ border: 0;
15217
+ border-radius: 0;
15218
+ background: transparent;
15219
+ color: var(--sl-field-color);
15220
+ cursor: pointer;
15221
+ }
15222
+
15223
+ .PickerSplitMain {
15224
+ display: grid;
15225
+ grid-auto-flow: column;
15226
+ grid-template-columns: max-content minmax(0, max-content);
15227
+ grid-auto-columns: max-content;
15228
+ align-items: baseline;
15229
+ align-content: center;
15230
+ justify-content: start;
15231
+ gap: var(--sl-gap-control);
15232
+ min-width: 0;
15233
+ padding-block: var(--sl-control-padding-block);
15234
+ padding-inline: var(--sl-control-padding-inline);
15235
+ white-space: nowrap;
15236
+ }
15237
+
15238
+ .PickerSplitTrigger {
15239
+ display: inline-flex;
15240
+ align-items: center;
15241
+ justify-content: center;
15242
+ padding: 0;
15243
+ border-inline-start: var(--sl-stroke-default) solid var(--sl-field-border-color);
15244
+ }
15245
+
15246
+ @media (hover: hover) {
15247
+ .PickerSplitMain:hover:not(:disabled),
15248
+ .PickerSplitTrigger:hover:not(:disabled) {
15249
+ background: var(--sl-fill-subtle);
15250
+ }
15251
+ }
15252
+
15253
+ /* The focus ring sits inside each part, since the root clips its edges. */
15254
+ .PickerSplitMain:focus-visible,
15255
+ .PickerSplitTrigger:focus-visible {
15256
+ outline: var(--sl-stroke-strong) solid var(--sl-field-border-color-focus);
15257
+ outline-offset: calc(var(--sl-stroke-strong) * -1);
15258
+ }
15259
+
15260
+ .PickerSplitMain:disabled,
15261
+ .PickerSplitTrigger:disabled {
15262
+ color: var(--sl-field-color-disabled);
15263
+ cursor: not-allowed;
15264
+ }
15265
+
15266
+ .PickerSplitTrigger[aria-expanded='true'] .PickerButtonIcon,
15267
+ .PickerSplitTrigger[data-popup-open] .PickerButtonIcon {
15268
+ transform: rotate(180deg);
15269
+ }
15270
+
15271
+ /* @scattered-light/loomiere-base-ui 0.15.0 · styles for @base-ui/react 1.9.0 */
15142
15272
  /* SideNav
15143
15273
  *
15144
15274
  * The column of links down the side of a workspace. Rows are ruled apart with a hairline; the