@scattered-light/loomiere-base-ui 0.5.3 → 0.6.0

package/dist/design-system/components/styles.css

@@ -1,5 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,400,0..1,0');
-/* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
 /* Loomiere for Base UI: component styles. Brand-free: every value is a --sl- variable from a
    Loomiere theme. Load the theme first:
      @import '<your theme>/tokens.css';
@@ -9,7 +9,7 @@
 /* Document defaults, in the reset layer so any unlayered rule wins over them, and so layered
    frameworks (Chakra's recipes, Tailwind's utilities) are not undone by them. */
 @layer reset {
-/* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
 /* CSS Reset - Mojave Theme */
 
 /* ============================================
@@ -453,7 +453,7 @@ hr {
 }
 }
 @layer reset {
-/* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
 /* Accessibility — base rules (no theme color dependencies). Theme-specific focus/invalid: accessibility-theme.css */
 
 /* Remove default focus; keyboard focus styled in accessibility-theme.css */
@@ -566,7 +566,7 @@ main:focus {
 
 }
 @layer reset {
-/* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
 /* Focus, invalid, contrast — requires theme tokens (after theme-accessibility.css). */
 
 :focus-visible {
@@ -634,7 +634,7 @@ button,
 
 }
 /* Component styles */
-/* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
 /* Accordion - Mojave Theme
  *
  * No component tokens. Hover, press, chevron, divider and motion are the disclosure
@@ -755,7 +755,7 @@ button,
   overflow: hidden;
 }
 
-/* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
 /* Alert Dialog - Mojave Theme
  *
  * No component tokens and no rules of its own. An alert dialog looks exactly like a
@@ -764,7 +764,7 @@ button,
  * cancel quiet, and a destructive one bold with data-color="error".
  */
 
-/* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
 /* Autocomplete - Mojave Theme
  *
  * No component tokens. The input is Input (Input.css), the clear button is an icon
@@ -966,7 +966,7 @@ button,
    (reset-accessibility.css).
    ============================================ */
 
-/* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
 /* Avatar - Mojave Theme
  *
  * A round picture with a ring in the page color, so avatars in a group cut out of each other in
@@ -1074,7 +1074,7 @@ button,
   }
 }
 
-/* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
 /* Button - Mojave Theme
  *
  * Colors are the brand's emphasis levels, sizes are control.*, text is the trigger
@@ -1224,7 +1224,7 @@ button,
   font-size: var(--sl-icon-size-maximize);
 }
 
-/* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
 /* Checkbox - Mojave Theme
  * Sizes follow the label: the box is the icon size one tier above the label's text
  * tier (like a button's icon) and the check mark one tier below it.
@@ -1381,7 +1381,7 @@ button,
   border-radius: var(--sl-radius-pill);
 }
 
-/* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
 /* Checkbox Group - Mojave Theme */
 
 /* Each checkbox row is already a full tap target tall, so the rows sit close. */
@@ -1397,7 +1397,7 @@ button,
   pointer-events: none;
 }
 
-/* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
 /* Collapsible - Mojave Theme
  *
  * No component tokens. Hover, press, chevron and motion are the disclosure concept
@@ -1513,7 +1513,7 @@ button,
   background: var(--sl-surface-raised);
 }
 
-/* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
 /* Combobox - Mojave Theme
  *
  * No component tokens. The input is Input (Input.css); the chips box is a field; the
@@ -1998,7 +1998,7 @@ button,
   color: var(--sl-text-tertiary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
 /* Context Menu - Mojave Theme
  *
  * 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
@@ -2167,7 +2167,7 @@ button,
   stroke-width: var(--sl-stroke-default);
 }
 
-/* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
 /* Dialog and Alert dialog - Mojave Theme
  *
  * Both are centered modals built from the modal concept (tokens/semantic/modal.json):
@@ -2313,7 +2313,7 @@ button,
   margin-top: var(--sl-modal-actions-spacing);
 }
 
-/* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
 /* Drawer - a panel that slides in from an edge and can be swiped away.
    The surface, scrim, heading and motion are the modal concept's (--sl-modal-*), so a
    drawer reads as a dialog's sibling; only its size and grab bar are its own
@@ -2440,7 +2440,7 @@ button,
   color: var(--sl-modal-description-color);
 }
 
-/* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
 /* Field - Mojave Theme
  *
  * Label, control, description and error. No component tokens: spacing is the field
@@ -2501,7 +2501,7 @@ textarea.FieldControl {
   height: auto;
 }
 
-/* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
 /* Fieldset - Mojave Theme
  *
  * No component tokens: a titled group of fields, spaced by the stack gaps, with
@@ -2543,7 +2543,7 @@ textarea.FieldControl {
   color: var(--sl-text-secondary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
 /* Form - Mojave Theme
  *
  * No component tokens: fields stack with the large block space, and the action
@@ -2563,7 +2563,7 @@ textarea.FieldControl {
   margin-top: var(--sl-space-block-md);
 }
 
-/* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
 /* Input - Mojave Theme
  *
  * No component tokens: the look is the field concept (tokens/semantic/field.json),
@@ -2700,7 +2700,7 @@ textarea.FieldControl {
   padding-inline: var(--sl-control-padding-inline-lg);
 }
 
-/* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
 /* Menu - Mojave Theme
  *
  * No component tokens. The trigger is a Button. The popup is the popup concept, rows are item rows at the
@@ -2849,7 +2849,7 @@ textarea.FieldControl {
   color: var(--sl-text-tertiary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
 /* Menubar - Mojave Theme
  *
  * No component tokens. A row of quiet triggers, each opening a menu. The popup is the popup concept, rows are item rows at the
@@ -3042,7 +3042,7 @@ textarea.FieldControl {
   color: var(--sl-text-tertiary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
 /* Meter - Mojave Theme
  *
  * A gauge (tokens/semantic/gauge.json). The fill is the solid color of the scope around it:
@@ -3057,6 +3057,12 @@ textarea.FieldControl {
   width: 100%;
 }
 
+.MeterHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
 .MeterLabel {
   font-family: var(--sl-font-label-base-font-family);
   font-size: var(--sl-font-label-base-font-size);
@@ -3064,9 +3070,6 @@ textarea.FieldControl {
   line-height: var(--sl-font-label-base-line-height);
   letter-spacing: var(--sl-font-label-base-letter-spacing);
   color: var(--sl-gauge-label-color);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
 }
 
 .MeterTrack {
@@ -3102,7 +3105,7 @@ textarea.FieldControl {
   height: var(--sl-gauge-height-lg);
 }
 
-/* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
 /* Navigation Menu - Mojave Theme
  *
  * The strip is the bar concept, the panel is the popup concept and each link is an item
@@ -3522,7 +3525,7 @@ textarea.FieldControl {
   width: 100%;
 }
 
-/* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
 /* Number Field - Mojave Theme
  *
  * No component tokens. The input is Input (Input.css) and the label, description and
@@ -3613,7 +3616,7 @@ textarea.FieldControl {
   user-select: none;
 }
 
-/* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
 /* OTP Field - Mojave Theme
  *
  * One-time code entry: a row of single-character inputs. Each slot is the same control as Input
@@ -3676,7 +3679,7 @@ textarea.FieldControl {
   letter-spacing: var(--sl-font-body-magnify-letter-spacing);
 }
 
-/* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
 /* Popover - Mojave Theme */
 
 /* ============================================
@@ -3841,7 +3844,7 @@ textarea.FieldControl {
   fill: var(--sl-popup-arrow-stroke);
 }
 
-/* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
 /* Preview Card - Mojave Theme
  *
  * The popup concept (surface, arrow, motion) with a title-magnify title and condense
@@ -3958,7 +3961,7 @@ textarea.FieldControl {
   fill: var(--sl-popup-arrow-stroke);
 }
 
-/* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
 /* Progress - Mojave Theme
  *
  * A gauge (tokens/semantic/gauge.json), the same bar as Meter. The fill is the solid color of
@@ -4035,7 +4038,7 @@ textarea.FieldControl {
   height: var(--sl-gauge-height-lg);
 }
 
-/* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
 /* Radio - Mojave Theme
  * Same box as Checkbox, always round. Sizes follow the label the same way, and the
  * dot is a share of the circle (check.dot-scale).
@@ -4187,7 +4190,7 @@ textarea.FieldControl {
   gap: var(--sl-gap-stack-sm);
 }
 
-/* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
 /* Scroll Area - Mojave Theme
  *
  * The scrollbar is the content scrollbar (content.scrollbar-*): a track that stays clear until
@@ -4269,7 +4272,7 @@ textarea.FieldControl {
   background: transparent;
 }
 
-/* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
 /* Select - Mojave Theme
  *
  * The trigger is a field (the field pattern, control sizes, the base text style); the
@@ -4350,6 +4353,17 @@ textarea.FieldControl {
   transform: rotate(180deg);
 }
 
+/* A Select.Trigger drawn as a Button (in a toolbar) takes the Button's text color and sizing. */
+.Button > .SelectValue,
+.Button > .SelectIcon {
+  flex: none;
+  color: inherit;
+}
+
+.Button[aria-expanded='true'] > .SelectIcon {
+  transform: rotate(180deg);
+}
+
 /* ============================================
    BACKDROP, POSITIONER, POPUP
    ============================================ */
@@ -4543,7 +4557,7 @@ textarea.FieldControl {
   stroke-width: var(--sl-stroke-default);
 }
 
-/* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
 /* Separator - Mojave Theme
  *
  * A hairline in the everyday divider color (border.default), one stroke thick, with a step of
@@ -4571,7 +4585,7 @@ textarea.FieldControl {
   margin-inline: var(--sl-space-4);
 }
 
-/* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
 /* Slider - Mojave Theme
  *
  * A slider is a gauge you can drag: the track, fill and label row are gauge.* (the same bar as
@@ -4737,7 +4751,7 @@ textarea.FieldControl {
   transform: translate(-50%, 50%);
 }
 
-/* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
 /* Switch - Mojave Theme
  * Switch keeps its track sizes. The thumb, its travel and the ON/OFF text are
  * worked out from them: the thumb fills the track's height inside the padding,
@@ -4903,7 +4917,7 @@ textarea.FieldControl {
   color: var(--sl-text-disabled);
 }
 
-/* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
 /* Table - Mojave Theme
  *
  * Base UI has no table, so this styles the native <table class="Table"> elements with the
@@ -5048,7 +5062,7 @@ textarea.FieldControl {
   color: var(--sl-text-tertiary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
 /* Tabs - Mojave Theme
  *
  * No component tokens. The divider, the selected line and color, hover and the disabled
@@ -5184,7 +5198,7 @@ textarea.FieldControl {
   padding: var(--sl-space-6);
 }
 
-/* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
 /* Toast - Mojave Theme
  *
  * A toast is a notice (tokens/semantic/notice.json) on the popup surface. A toast whose type
@@ -5420,7 +5434,7 @@ textarea.FieldControl {
   flex-shrink: 0;
 }
 
-/* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
 /* Toggle - Mojave Theme
  * A toggle is a button that stays pressed: the same heights, padding, gap and
  * trigger text style as a button of the same size. Pressed, it takes its emphasis level's
@@ -5532,7 +5546,7 @@ textarea.FieldControl {
   height: var(--sl-icon-size-maximize);
 }
 
-/* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
 /* Toggle Group - Mojave Theme
  *
  * No component tokens. The strip is the bar concept (tokens/semantic/bar.json); the
@@ -5553,7 +5567,7 @@ textarea.FieldControl {
   border-radius: var(--sl-radius-item);
 }
 
-/* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
 /* Toolbar - Mojave Theme
  *
  * The strip is the bar concept (tokens/semantic/bar.json). Buttons, toggles, selects
@@ -5615,7 +5629,7 @@ textarea.FieldControl {
   max-width: var(--sl-toolbar-input-max-width);
 }
 
-/* @scattered-light/loomiere-base-ui 0.5.3 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
 /* Tooltip - Mojave Theme
  *
  * The inverse surface (surface.inverse, text.on-inverse-surface) with condense text, so a tooltip