@scattered-light/loomiere-mojave 0.12.0 → 0.13.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.
@@ -1876,6 +1876,9 @@
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
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. */
1879
+ --sl-collection-tree-line-offset: var(--sl-space-2); /** Where a child's elbow starts, from the start of its level's indent. A brand with a wider tree-indent brings it closer to the parent's text. */
1880
+ --sl-collection-search-fixed-width: var(--sl-space-80); /** The search field's width when the toolbar sets searchWidth="fixed", the most it takes, so a count and a sort note can sit beside it. */
1881
+ --sl-collection-toolbar-frame-padding: var(--sl-space-3); /** Padding around the toolbar when it is framed, inside a Sheet above a table that runs edge to edge. */
1879
1882
  --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. */
1880
1883
  --sl-collection-list-row-gap: var(--sl-space-2); /** Between the checkbox, the text, the amount and the actions in a list row. */
1881
1884
  --sl-collection-toolbar-gap: var(--sl-space-2); /** Between the search, the filters and the actions. */
@@ -2280,6 +2283,11 @@
2280
2283
  --sl-status-level-success-bold-fg: var(--sl-scope-success-on-solid); /** bold in success: solid in success */
2281
2284
  --sl-status-level-warning-bold-fg: var(--sl-scope-warning-on-solid); /** bold in warning: solid in warning */
2282
2285
  --sl-status-level-error-bold-fg: var(--sl-scope-error-on-solid); /** bold in error: solid in error */
2286
+ --sl-collection-tree-row-height-parent: var(--sl-collection-row-height-sm); /** A parent row's height in a table with treeLines, so a register can give its parents a little more room than the rows under them. */
2287
+ --sl-collection-tree-row-height-child: var(--sl-collection-row-height-sm); /** A child row's height in a table with treeLines. */
2288
+ --sl-collection-total-row-height-subtotal: var(--sl-collection-row-height-sm); /** A subtotal row's height in a table with treeLines. */
2289
+ --sl-collection-total-row-height-grand: var(--sl-collection-row-height-sm); /** The grand-total row's height in a table with treeLines. */
2290
+ --sl-collection-disclosure-color: var(--sl-text-primary); /** The small expand button's chevron (disclosure="small"). A brand points it at its accent. */
2283
2291
  --sl-description-list-value-color: var(--sl-text-primary); /** Values. */
2284
2292
  --sl-side-nav-item-color: var(--sl-text-primary); /** A row's text. */
2285
2293
  --sl-side-nav-toggle-border-color: var(--sl-text-primary); /** The collapse handle's outline and chevron. It fills with this color on hover. */
@@ -2407,6 +2415,7 @@
2407
2415
  --sl-popup-background: var(--sl-surface-base); /** Popup fill. */
2408
2416
  --sl-popup-arrow-stroke: var(--sl-popup-border-color); /** Arrow edge, continuing the popup's border. */
2409
2417
  --sl-table-row-hover: var(--sl-item-background-hover); /** Row under the pointer. Same tint as a highlighted menu row. */
2418
+ --sl-table-row-hover-color: var(--sl-item-color-hover); /** Text on the row under the pointer. A brand whose hover is only a light tint points it at text.primary so the text does not change. */
2410
2419
  --sl-table-row-selected: var(--sl-item-background-selected); /** Selected rows. Same tint as the chosen menu row. */
2411
2420
  --sl-table-range-border: var(--sl-focus-ring); /** Edge of a range selection and of the focused cell, the same color as every focus ring. */
2412
2421
  --sl-table-total-rule-color: var(--sl-rule-color); /** The line above a subtotal or total row and the double line under a grand total. The working-paper rule color, so totals and sheet tops are ruled in the same ink. */
@@ -5893,6 +5902,7 @@
5893
5902
  --sl-table-border-color: var(--sl-border-default);
5894
5903
  --sl-table-row-border-color: var(--sl-border-subtle);
5895
5904
  --sl-table-row-hover: var(--sl-item-background-hover);
5905
+ --sl-table-row-hover-color: var(--sl-item-color-hover);
5896
5906
  --sl-table-row-selected: var(--sl-item-background-selected);
5897
5907
  --sl-table-row-current: var(--sl-surface-tray);
5898
5908
  --sl-table-group-header-background: var(--sl-surface-tray);
@@ -5905,6 +5915,7 @@
5905
5915
  --sl-app-bar-border-color: var(--sl-rule-color);
5906
5916
  --sl-app-bar-divider-color: var(--sl-border-strong);
5907
5917
  --sl-collection-tree-line-color: var(--sl-border-strong);
5918
+ --sl-collection-disclosure-color: var(--sl-text-primary);
5908
5919
  --sl-description-list-row-border-color: var(--sl-border-subtle);
5909
5920
  --sl-description-list-label-color: var(--sl-text-secondary);
5910
5921
  --sl-description-list-value-color: var(--sl-text-primary);
@@ -6078,6 +6089,7 @@
6078
6089
  --sl-table-border-color: var(--sl-border-default);
6079
6090
  --sl-table-row-border-color: var(--sl-border-subtle);
6080
6091
  --sl-table-row-hover: var(--sl-item-background-hover);
6092
+ --sl-table-row-hover-color: var(--sl-item-color-hover);
6081
6093
  --sl-table-row-selected: var(--sl-item-background-selected);
6082
6094
  --sl-table-row-current: var(--sl-surface-tray);
6083
6095
  --sl-table-group-header-background: var(--sl-surface-tray);
@@ -6090,6 +6102,7 @@
6090
6102
  --sl-app-bar-border-color: var(--sl-rule-color);
6091
6103
  --sl-app-bar-divider-color: var(--sl-border-strong);
6092
6104
  --sl-collection-tree-line-color: var(--sl-border-strong);
6105
+ --sl-collection-disclosure-color: var(--sl-text-primary);
6093
6106
  --sl-description-list-row-border-color: var(--sl-border-subtle);
6094
6107
  --sl-description-list-label-color: var(--sl-text-secondary);
6095
6108
  --sl-description-list-value-color: var(--sl-text-primary);
@@ -6263,6 +6276,7 @@
6263
6276
  --sl-table-border-color: var(--sl-border-default);
6264
6277
  --sl-table-row-border-color: var(--sl-border-subtle);
6265
6278
  --sl-table-row-hover: var(--sl-item-background-hover);
6279
+ --sl-table-row-hover-color: var(--sl-item-color-hover);
6266
6280
  --sl-table-row-selected: var(--sl-item-background-selected);
6267
6281
  --sl-table-row-current: var(--sl-surface-tray);
6268
6282
  --sl-table-group-header-background: var(--sl-surface-tray);
@@ -6275,6 +6289,7 @@
6275
6289
  --sl-app-bar-border-color: var(--sl-rule-color);
6276
6290
  --sl-app-bar-divider-color: var(--sl-border-strong);
6277
6291
  --sl-collection-tree-line-color: var(--sl-border-strong);
6292
+ --sl-collection-disclosure-color: var(--sl-text-primary);
6278
6293
  --sl-description-list-row-border-color: var(--sl-border-subtle);
6279
6294
  --sl-description-list-label-color: var(--sl-text-secondary);
6280
6295
  --sl-description-list-value-color: var(--sl-text-primary);
@@ -6664,7 +6679,7 @@
6664
6679
  }
6665
6680
 
6666
6681
 
6667
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
6682
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
6668
6683
  /* Loomiere for Base UI: component styles. Brand-free: every value is a --sl- variable from a
6669
6684
  Loomiere theme. Load the theme first:
6670
6685
  @import '<your theme>/tokens.css';
@@ -6674,7 +6689,7 @@
6674
6689
  /* Document defaults, in the reset layer so any unlayered rule wins over them, and so layered
6675
6690
  frameworks (Chakra's recipes, Tailwind's utilities) are not undone by them. */
6676
6691
  @layer reset {
6677
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
6692
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
6678
6693
  /* CSS Reset - Mojave Theme */
6679
6694
 
6680
6695
  /* ============================================
@@ -7118,7 +7133,7 @@ hr {
7118
7133
  }
7119
7134
  }
7120
7135
  @layer reset {
7121
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
7136
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
7122
7137
  /* Accessibility — base rules (no theme color dependencies). Theme-specific focus/invalid: accessibility-theme.css */
7123
7138
 
7124
7139
  /* Remove default focus; keyboard focus styled in accessibility-theme.css */
@@ -7231,7 +7246,7 @@ main:focus {
7231
7246
 
7232
7247
  }
7233
7248
  @layer reset {
7234
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
7249
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
7235
7250
  /* Focus, invalid, contrast — requires theme tokens (after theme-accessibility.css). */
7236
7251
 
7237
7252
  :focus-visible {
@@ -7299,7 +7314,7 @@ button,
7299
7314
 
7300
7315
  }
7301
7316
  /* Component styles */
7302
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
7317
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
7303
7318
  /* Accordion - Mojave Theme
7304
7319
  *
7305
7320
  * No component tokens. Hover, press, chevron, divider and motion are the disclosure
@@ -7420,7 +7435,7 @@ button,
7420
7435
  overflow: hidden;
7421
7436
  }
7422
7437
 
7423
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
7438
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
7424
7439
  /* Alert Dialog - Mojave Theme
7425
7440
  *
7426
7441
  * No component tokens and no rules of its own. An alert dialog looks exactly like a
@@ -7429,7 +7444,7 @@ button,
7429
7444
  * cancel quiet, and a destructive one bold with data-color="error".
7430
7445
  */
7431
7446
 
7432
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
7447
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
7433
7448
  /* Autocomplete - Mojave Theme
7434
7449
  *
7435
7450
  * No component tokens. The input is Input (Input.css), the clear button is an icon
@@ -7631,7 +7646,7 @@ button,
7631
7646
  (reset-accessibility.css).
7632
7647
  ============================================ */
7633
7648
 
7634
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
7649
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
7635
7650
  /* Avatar - Mojave Theme
7636
7651
  *
7637
7652
  * A round picture with a ring in the page color, so avatars in a group cut out of each other in
@@ -7739,7 +7754,7 @@ button,
7739
7754
  }
7740
7755
  }
7741
7756
 
7742
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
7757
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
7743
7758
  /* Button - Mojave Theme
7744
7759
  *
7745
7760
  * Colors are the brand's emphasis levels, sizes are control.*, text is the trigger
@@ -7889,7 +7904,7 @@ button,
7889
7904
  font-size: var(--sl-icon-size-maximize);
7890
7905
  }
7891
7906
 
7892
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
7907
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
7893
7908
  /* Checkbox - Mojave Theme
7894
7909
  * Sizes follow the label: the box is the icon size one tier above the label's text
7895
7910
  * tier (like a button's icon) and the check mark one tier below it.
@@ -8046,7 +8061,7 @@ button,
8046
8061
  border-radius: var(--sl-radius-pill);
8047
8062
  }
8048
8063
 
8049
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
8064
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
8050
8065
  /* Checkbox Group - Mojave Theme */
8051
8066
 
8052
8067
  /* Each checkbox row is already a full tap target tall, so the rows sit close. */
@@ -8062,7 +8077,7 @@ button,
8062
8077
  pointer-events: none;
8063
8078
  }
8064
8079
 
8065
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
8080
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
8066
8081
  /* Collapsible - Mojave Theme
8067
8082
  *
8068
8083
  * No component tokens. Hover, press, chevron and motion are the disclosure concept
@@ -8178,7 +8193,7 @@ button,
8178
8193
  background: var(--sl-surface-raised);
8179
8194
  }
8180
8195
 
8181
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
8196
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
8182
8197
  /* Combobox - Mojave Theme
8183
8198
  *
8184
8199
  * No component tokens. The input is Input (Input.css); the chips box is a field; the
@@ -8663,7 +8678,7 @@ button,
8663
8678
  color: var(--sl-text-tertiary);
8664
8679
  }
8665
8680
 
8666
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
8681
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
8667
8682
  /* Context Menu - Mojave Theme
8668
8683
  *
8669
8684
  * 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
@@ -8832,7 +8847,7 @@ button,
8832
8847
  stroke-width: var(--sl-stroke-default);
8833
8848
  }
8834
8849
 
8835
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
8850
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
8836
8851
  /* Dialog and Alert dialog - Mojave Theme
8837
8852
  *
8838
8853
  * Both are centered modals built from the modal concept (tokens/semantic/modal.json):
@@ -8978,7 +8993,7 @@ button,
8978
8993
  margin-top: var(--sl-modal-actions-spacing);
8979
8994
  }
8980
8995
 
8981
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
8996
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
8982
8997
  /* Drawer - a panel that slides in from an edge and can be swiped away.
8983
8998
  The surface, scrim, heading and motion are the modal concept's (--sl-modal-*), so a
8984
8999
  drawer reads as a dialog's sibling; only its size and grab bar are its own
@@ -9111,7 +9126,7 @@ button,
9111
9126
  color: var(--sl-modal-description-color);
9112
9127
  }
9113
9128
 
9114
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
9129
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
9115
9130
  /* Field - Mojave Theme
9116
9131
  *
9117
9132
  * Label, control, description and error. No component tokens: spacing is the field
@@ -9172,7 +9187,7 @@ textarea.FieldControl {
9172
9187
  height: auto;
9173
9188
  }
9174
9189
 
9175
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
9190
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
9176
9191
  /* Fieldset - Mojave Theme
9177
9192
  *
9178
9193
  * No component tokens: a titled group of fields, spaced by the stack gaps, with
@@ -9214,7 +9229,7 @@ textarea.FieldControl {
9214
9229
  color: var(--sl-text-secondary);
9215
9230
  }
9216
9231
 
9217
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
9232
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
9218
9233
  /* Form - Mojave Theme
9219
9234
  *
9220
9235
  * No component tokens: fields stack with the large block space, and the action
@@ -9234,7 +9249,7 @@ textarea.FieldControl {
9234
9249
  margin-top: var(--sl-space-block-md);
9235
9250
  }
9236
9251
 
9237
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
9252
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
9238
9253
  /* Input - Mojave Theme
9239
9254
  *
9240
9255
  * No component tokens: the look is the field concept (tokens/semantic/field.json),
@@ -9371,7 +9386,7 @@ textarea.FieldControl {
9371
9386
  padding-inline: var(--sl-control-padding-inline-lg);
9372
9387
  }
9373
9388
 
9374
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
9389
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
9375
9390
  /* Menu - Mojave Theme
9376
9391
  *
9377
9392
  * No component tokens. The trigger is a Button. The popup is the popup concept, rows are item rows at the
@@ -9520,7 +9535,7 @@ textarea.FieldControl {
9520
9535
  color: var(--sl-text-tertiary);
9521
9536
  }
9522
9537
 
9523
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
9538
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
9524
9539
  /* Menubar - Mojave Theme
9525
9540
  *
9526
9541
  * No component tokens. A row of quiet triggers, each opening a menu. The popup is the popup concept, rows are item rows at the
@@ -9713,7 +9728,7 @@ textarea.FieldControl {
9713
9728
  color: var(--sl-text-tertiary);
9714
9729
  }
9715
9730
 
9716
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
9731
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
9717
9732
  /* Meter - Mojave Theme
9718
9733
  *
9719
9734
  * A gauge (tokens/semantic/gauge.json). The fill is the solid color of the scope around it:
@@ -9776,7 +9791,7 @@ textarea.FieldControl {
9776
9791
  height: var(--sl-gauge-height-lg);
9777
9792
  }
9778
9793
 
9779
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
9794
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
9780
9795
  /* Navigation Menu - Mojave Theme
9781
9796
  *
9782
9797
  * The strip is the bar concept, the panel is the popup concept and each link is an item
@@ -10196,7 +10211,7 @@ textarea.FieldControl {
10196
10211
  width: 100%;
10197
10212
  }
10198
10213
 
10199
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
10214
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
10200
10215
  /* Number Field - Mojave Theme
10201
10216
  *
10202
10217
  * No component tokens. The input is Input (Input.css) and the label, description and
@@ -10287,7 +10302,7 @@ textarea.FieldControl {
10287
10302
  user-select: none;
10288
10303
  }
10289
10304
 
10290
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
10305
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
10291
10306
  /* OTP Field - Mojave Theme
10292
10307
  *
10293
10308
  * One-time code entry: a row of single-character inputs. Each slot is the same control as Input
@@ -10350,7 +10365,7 @@ textarea.FieldControl {
10350
10365
  letter-spacing: var(--sl-font-body-magnify-letter-spacing);
10351
10366
  }
10352
10367
 
10353
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
10368
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
10354
10369
  /* Popover - Mojave Theme */
10355
10370
 
10356
10371
  /* ============================================
@@ -10515,7 +10530,7 @@ textarea.FieldControl {
10515
10530
  fill: var(--sl-popup-arrow-stroke);
10516
10531
  }
10517
10532
 
10518
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
10533
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
10519
10534
  /* Preview Card - Mojave Theme
10520
10535
  *
10521
10536
  * The popup concept (surface, arrow, motion) with a title-magnify title and condense
@@ -10632,7 +10647,7 @@ textarea.FieldControl {
10632
10647
  fill: var(--sl-popup-arrow-stroke);
10633
10648
  }
10634
10649
 
10635
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
10650
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
10636
10651
  /* Progress - Mojave Theme
10637
10652
  *
10638
10653
  * A gauge (tokens/semantic/gauge.json), the same bar as Meter. The fill is the solid color of
@@ -10709,7 +10724,7 @@ textarea.FieldControl {
10709
10724
  height: var(--sl-gauge-height-lg);
10710
10725
  }
10711
10726
 
10712
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
10727
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
10713
10728
  /* Radio - Mojave Theme
10714
10729
  * Same box as Checkbox, always round. Sizes follow the label the same way, and the
10715
10730
  * dot is a share of the circle (check.dot-scale).
@@ -10861,7 +10876,7 @@ textarea.FieldControl {
10861
10876
  gap: var(--sl-gap-stack-sm);
10862
10877
  }
10863
10878
 
10864
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
10879
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
10865
10880
  /* Scroll Area - Mojave Theme
10866
10881
  *
10867
10882
  * The scrollbar is the content scrollbar (content.scrollbar-*): a track that stays clear until
@@ -10943,7 +10958,7 @@ textarea.FieldControl {
10943
10958
  background: transparent;
10944
10959
  }
10945
10960
 
10946
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
10961
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
10947
10962
  /* Select - Mojave Theme
10948
10963
  *
10949
10964
  * The trigger is a field (the field pattern, control sizes, the base text style); the
@@ -11228,7 +11243,7 @@ textarea.FieldControl {
11228
11243
  stroke-width: var(--sl-stroke-default);
11229
11244
  }
11230
11245
 
11231
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
11246
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
11232
11247
  /* Separator - Mojave Theme
11233
11248
  *
11234
11249
  * A hairline in the everyday divider color (border.default), one stroke thick, with a step of
@@ -11256,7 +11271,7 @@ textarea.FieldControl {
11256
11271
  margin-inline: var(--sl-space-4);
11257
11272
  }
11258
11273
 
11259
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
11274
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
11260
11275
  /* Slider - Mojave Theme
11261
11276
  *
11262
11277
  * A slider is a gauge you can drag: the track, fill and label row are gauge.* (the same bar as
@@ -11422,7 +11437,7 @@ textarea.FieldControl {
11422
11437
  transform: translate(-50%, 50%);
11423
11438
  }
11424
11439
 
11425
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
11440
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
11426
11441
  /* Switch - Mojave Theme
11427
11442
  * Switch keeps its track sizes. The thumb, its travel and the ON/OFF text are
11428
11443
  * worked out from them: the thumb fills the track's height inside the padding,
@@ -11588,7 +11603,7 @@ textarea.FieldControl {
11588
11603
  color: var(--sl-text-disabled);
11589
11604
  }
11590
11605
 
11591
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
11606
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
11592
11607
  /* Tabs - Mojave Theme
11593
11608
  *
11594
11609
  * No component tokens. The divider, the selected line and color, hover and the disabled
@@ -11724,7 +11739,7 @@ textarea.FieldControl {
11724
11739
  padding: var(--sl-space-6);
11725
11740
  }
11726
11741
 
11727
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
11742
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
11728
11743
  /* Toast - Mojave Theme
11729
11744
  *
11730
11745
  * A toast is a notice (tokens/semantic/notice.json) on the popup surface. A toast whose type
@@ -11960,7 +11975,7 @@ textarea.FieldControl {
11960
11975
  flex-shrink: 0;
11961
11976
  }
11962
11977
 
11963
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
11978
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
11964
11979
  /* Toggle - Mojave Theme
11965
11980
  * A toggle is a button that stays pressed: the same heights, padding, gap and
11966
11981
  * trigger text style as a button of the same size. Pressed, it takes its emphasis level's
@@ -12072,7 +12087,7 @@ textarea.FieldControl {
12072
12087
  height: var(--sl-icon-size-maximize);
12073
12088
  }
12074
12089
 
12075
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
12090
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
12076
12091
  /* Toggle Group - Mojave Theme
12077
12092
  *
12078
12093
  * No component tokens. The strip is the bar concept (tokens/semantic/bar.json); the
@@ -12134,7 +12149,7 @@ textarea.FieldControl {
12134
12149
  outline-offset: var(--sl-focus-outline-offset-inset);
12135
12150
  }
12136
12151
 
12137
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
12152
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
12138
12153
  /* Toolbar - Mojave Theme
12139
12154
  *
12140
12155
  * The strip is the bar concept (tokens/semantic/bar.json). Buttons, toggles, selects
@@ -12196,7 +12211,7 @@ textarea.FieldControl {
12196
12211
  max-width: var(--sl-toolbar-input-max-width);
12197
12212
  }
12198
12213
 
12199
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
12214
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
12200
12215
  /* Tooltip - Mojave Theme
12201
12216
  *
12202
12217
  * The inverse surface (surface.inverse, text.on-inverse-surface) with condense text, so a tooltip
@@ -12257,7 +12272,7 @@ textarea.FieldControl {
12257
12272
  }
12258
12273
 
12259
12274
  /* Custom components: not Base UI parts. Built from existing concepts and tokens. */
12260
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
12275
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
12261
12276
  /* Badge
12262
12277
  *
12263
12278
  * A status or count label. Not a Base UI part, and not interactive: no hover or focus.
@@ -12362,7 +12377,7 @@ textarea.FieldControl {
12362
12377
  height: var(--sl-badge-dot-base);
12363
12378
  }
12364
12379
 
12365
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
12380
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
12366
12381
  /*
12367
12382
  * DatePicker: a field that opens a calendar for one date or a period.
12368
12383
  * Not a Base UI part. The popup is Popover on a wide viewport and Drawer
@@ -12935,7 +12950,7 @@ textarea.FieldControl {
12935
12950
  flex-basis: 100%;
12936
12951
  }
12937
12952
 
12938
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
12953
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
12939
12954
  /* Money field
12940
12955
  *
12941
12956
  * An amount of money, built on Number field. The value is an integer in minor units
@@ -13280,7 +13295,7 @@ textarea.FieldControl {
13280
13295
  letter-spacing: var(--sl-font-body-base-letter-spacing);
13281
13296
  }
13282
13297
 
13283
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
13298
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
13284
13299
  /* ListDetail
13285
13300
  *
13286
13301
  * The detail of one item, next to its list. Not a Base UI part. It is a Splitter
@@ -13407,7 +13422,7 @@ textarea.FieldControl {
13407
13422
  background: transparent;
13408
13423
  }
13409
13424
 
13410
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
13425
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
13411
13426
  /* Splitter
13412
13427
  *
13413
13428
  * Two or more panels and a handle between them. Not a Base UI part. It follows the
@@ -13615,7 +13630,7 @@ textarea.FieldControl {
13615
13630
  background: var(--sl-border-default);
13616
13631
  }
13617
13632
 
13618
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
13633
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
13619
13634
  /* EmptyState
13620
13635
  *
13621
13636
  * The block a page, pane, table, list or popup shows when it has nothing to show.
@@ -13871,7 +13886,7 @@ textarea.FieldControl {
13871
13886
  color: inherit;
13872
13887
  }
13873
13888
 
13874
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
13889
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
13875
13890
  /* Table - Mojave Theme
13876
13891
  *
13877
13892
  * Base UI has no table, so this styles the native <table class="Table"> elements with the
@@ -13997,7 +14012,7 @@ textarea.FieldControl {
13997
14012
  @media (hover: hover) {
13998
14013
  .Table tbody tr:hover > * {
13999
14014
  background: var(--sl-table-row-hover);
14000
- color: var(--sl-item-color-hover);
14015
+ color: var(--sl-table-row-hover-color);
14001
14016
  }
14002
14017
  }
14003
14018
 
@@ -14105,7 +14120,7 @@ textarea.FieldControl {
14105
14120
  color: inherit;
14106
14121
  }
14107
14122
 
14108
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
14123
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
14109
14124
  /* Collection
14110
14125
  *
14111
14126
  * DataTable, DataList, the toolbar and the pagination, in one place so the two views
@@ -14116,7 +14131,7 @@ textarea.FieldControl {
14116
14131
  * the tabs and the search where they are, so selecting rows does not grow the toolbar.
14117
14132
  */
14118
14133
 
14119
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
14134
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
14120
14135
  /* Collection toolbar
14121
14136
  *
14122
14137
  * The wrap follows the toolbar's own width, not the window: a table in a narrow pane wraps
@@ -14257,7 +14272,32 @@ textarea.FieldControl {
14257
14272
  letter-spacing: var(--sl-font-body-condense-letter-spacing);
14258
14273
  }
14259
14274
 
14260
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
14275
+ /* searchWidth="fixed": the search takes its own width, so a count and a note can sit beside it. */
14276
+ .CollectionToolbar[data-search='fixed'] .CollectionSearch {
14277
+ flex: 0 1 var(--sl-collection-search-fixed-width);
14278
+ }
14279
+
14280
+ .CollectionToolbarMeta {
14281
+ font-family: var(--sl-font-body-condense-font-family);
14282
+ font-size: var(--sl-font-body-condense-font-size);
14283
+ font-weight: var(--sl-font-body-condense-font-weight);
14284
+ line-height: var(--sl-font-body-condense-line-height);
14285
+ letter-spacing: var(--sl-font-body-condense-letter-spacing);
14286
+ color: var(--sl-table-subtle-color);
14287
+ }
14288
+
14289
+ .CollectionToolbarMetaEnd {
14290
+ margin-inline-start: auto;
14291
+ }
14292
+
14293
+ /* framed: for a toolbar inside a Sheet above a table that runs edge to edge. */
14294
+ .CollectionToolbar[data-framed] {
14295
+ margin-block-end: 0;
14296
+ padding: var(--sl-collection-toolbar-frame-padding);
14297
+ border-block-end: var(--sl-stroke-default) solid var(--sl-table-border-color);
14298
+ }
14299
+
14300
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
14261
14301
  /* DataTable additions on top of .Table.
14262
14302
  *
14263
14303
  * Sort buttons fill the header cell and inherit its hover, so old aria-sort markup keeps
@@ -14392,7 +14432,7 @@ textarea.FieldControl {
14392
14432
  position: absolute;
14393
14433
  inset-block: 0 50%;
14394
14434
  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
14435
+ var(--sl-table-cell-padding-inline) + var(--sl-collection-tree-indent) * (var(--row-depth) - 1) + var(--sl-collection-tree-line-offset)
14396
14436
  );
14397
14437
  inline-size: calc(var(--sl-collection-tree-indent) * 0.375);
14398
14438
  border-inline-start: var(--sl-stroke-default) solid var(--sl-collection-tree-line-color);
@@ -14405,6 +14445,8 @@ textarea.FieldControl {
14405
14445
  display: inline-flex;
14406
14446
  align-items: center;
14407
14447
  justify-content: center;
14448
+ color: var(--sl-collection-disclosure-color);
14449
+ border: 0;
14408
14450
  inline-size: var(--sl-collection-disclosure-size-small);
14409
14451
  block-size: var(--sl-collection-disclosure-size-small);
14410
14452
  margin-inline-end: var(--sl-space-1);
@@ -14421,7 +14463,29 @@ textarea.FieldControl {
14421
14463
  font-weight: var(--sl-font-weight-semibold);
14422
14464
  }
14423
14465
 
14424
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
14466
+ /* Row heights for a register: a table with treeLines sets them by kind. They all default to the dense row. */
14467
+ .DataTable[data-tree-lines] tbody tr:not([data-depth]) > :is(th, td) {
14468
+ height: var(--sl-collection-tree-row-height-parent);
14469
+ }
14470
+
14471
+ .DataTable[data-tree-lines] tbody tr[data-depth] > :is(th, td) {
14472
+ height: var(--sl-collection-tree-row-height-child);
14473
+ }
14474
+
14475
+ .DataTable[data-tree-lines] tfoot tr[data-total='subtotal'] > td {
14476
+ height: var(--sl-collection-total-row-height-subtotal);
14477
+ }
14478
+
14479
+ .DataTable[data-tree-lines] tfoot tr[data-total='grand'] > td {
14480
+ height: var(--sl-collection-total-row-height-grand);
14481
+ }
14482
+
14483
+ /* A row that opens something shows it. */
14484
+ .DataTable tbody tr[data-activates] {
14485
+ cursor: pointer;
14486
+ }
14487
+
14488
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
14425
14489
  /* DataList
14426
14490
  *
14427
14491
  * The same rows as the table, in one container with the table's borders, hover, selected
@@ -14563,7 +14627,7 @@ textarea.FieldControl {
14563
14627
  transition: opacity var(--sl-duration-fast) var(--sl-easing-default);
14564
14628
  }
14565
14629
 
14566
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
14630
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
14567
14631
  /* Pagination
14568
14632
  *
14569
14633
  * Not tied to a collection. Anything with a page, a page count and a total can use it.
@@ -14588,7 +14652,7 @@ textarea.FieldControl {
14588
14652
  margin: 0;
14589
14653
  }
14590
14654
 
14591
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
14655
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
14592
14656
  /* EditableList
14593
14657
  *
14594
14658
  * One table at every width, so a field is not submitted twice. Under the stack width each
@@ -14687,7 +14751,7 @@ textarea.FieldControl {
14687
14751
  }
14688
14752
  }
14689
14753
 
14690
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
14754
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
14691
14755
  /* Sheet
14692
14756
  *
14693
14757
  * A working-paper surface: the raised surface with a heavier rule across its top
@@ -14778,7 +14842,7 @@ textarea.FieldControl {
14778
14842
  border-top: 0;
14779
14843
  }
14780
14844
 
14781
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
14845
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
14782
14846
  /* StatFigure
14783
14847
  *
14784
14848
  * One large figure with a caps label above and a caption under it. The label is
@@ -14839,7 +14903,7 @@ textarea.FieldControl {
14839
14903
  color: var(--sl-stat-figure-caption-color);
14840
14904
  }
14841
14905
 
14842
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
14906
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
14843
14907
  /* DescriptionList
14844
14908
  *
14845
14909
  * Label and value pairs in a native dl, one DescriptionItem (a div holding a dt and a dd)
@@ -14915,7 +14979,7 @@ textarea.FieldControl {
14915
14979
  text-align: end;
14916
14980
  }
14917
14981
 
14918
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
14982
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
14919
14983
  /* AppBar
14920
14984
  *
14921
14985
  * The bar across the top of an app window, one row on a line in the rule color. The line is
@@ -14949,7 +15013,7 @@ textarea.FieldControl {
14949
15013
  background: var(--sl-app-bar-divider-color);
14950
15014
  }
14951
15015
 
14952
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
15016
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
14953
15017
  /* PickerButton
14954
15018
  *
14955
15019
  * A trigger with a caps label before the current choice: CLIENT Alpha Services. The field
@@ -15035,7 +15099,7 @@ textarea.FieldControl {
15035
15099
  transform: rotate(180deg);
15036
15100
  }
15037
15101
 
15038
- /* @scattered-light/loomiere-base-ui 0.12.0 · styles for @base-ui/react 1.9.0 */
15102
+ /* @scattered-light/loomiere-base-ui 0.13.0 · styles for @base-ui/react 1.9.0 */
15039
15103
  /* SideNav
15040
15104
  *
15041
15105
  * The column of links down the side of a workspace. Rows are ruled apart with a hairline; the