@scattered-light/loomiere-mojave 0.14.0 → 0.14.1

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