@scattered-light/loomiere-base-ui 0.8.0 → 0.9.0

package/dist/design-system/components/index.d.ts

@@ -7,7 +7,7 @@ import { Fieldset as Fieldset$1 } from '@base-ui/react/fieldset';
 import { Form as Form$1 } from '@base-ui/react/form';
 import { NavigationMenu as NavigationMenu$1 } from '@base-ui/react/navigation-menu';
 import { Select as Select$1 } from '@base-ui/react/select';
-export { B as Badge, a as BadgeProps, C as Calendar, b as CalendarProps, c as CurrencyCode, D as DatePicker, d as DatePickerProps, e as DatePresets, f as DatePresetsProps, g as DateRange, h as DateValue, i as DescriptionItem, j as DescriptionItemProps, k as DescriptionList, l as DescriptionListProps, E as EditableList, m as EditableListApi, n as EditableListRootProps, o as EmptyState, p as EmptyStateKind, q as EmptyStateProps, L as ListDetail, r as ListDetailCloseReason, s as ListDetailDetailProps, t as ListDetailLayout, u as ListDetailRootProps, v as ListDetailValue, M as MoneyField, w as MoneyFieldProps, x as MoneyFieldRootProps, N as NumberField, y as NumberFieldLabelProps, P as Preset, z as PresetValue, S as Sheet, A as SheetProps, F as Splitter, G as SplitterHandleProps, H as SplitterPanelProps, I as SplitterRootProps, J as StatFigure, K as StatFigureProps, O as addDays, Q as addMonths, R as builtinPresets, T as clampDate, U as daysInMonth, V as defaultPresets, W as defaultWeekStartsOn, X as endOfWeek, Y as formatMoney, Z as fromMinorUnits, _ as getCurrencyDigits, $ as inclusiveDays, a0 as isValidCurrency, a1 as isoWeek, a2 as last30Days, a3 as last7Days, a4 as lastMonth, a5 as lastWeek, a6 as lengthBlockReason, a7 as nextMonth, a8 as nextWeek, a9 as orderRange, aa as parseDecimalString, ab as resolvePreset, ac as startOfWeek, ad as thisMonth, ae as thisQuarter, af as thisWeek, ag as toDecimalString, ah as toMinorUnits, ai as today, aj as todayDate, ak as tomorrow, al as useListDetail, am as yearToDate, an as yesterday } from './index-CBAo353T.js';
+export { A as AppBar, a as AppBarProps, b as AppBarSpacer, c as AppBarSpacerProps, B as Badge, d as BadgeProps, C as Calendar, e as CalendarProps, f as CurrencyCode, D as DatePicker, g as DatePickerProps, h as DatePresets, i as DatePresetsProps, j as DateRange, k as DateValue, l as DescriptionItem, m as DescriptionItemProps, n as DescriptionList, o as DescriptionListProps, E as EditableList, p as EditableListApi, q as EditableListRootProps, r as EmptyState, s as EmptyStateKind, t as EmptyStateProps, L as ListDetail, u as ListDetailCloseReason, v as ListDetailDetailProps, w as ListDetailLayout, x as ListDetailRootProps, y as ListDetailValue, M as MoneyField, z as MoneyFieldProps, F as MoneyFieldRootProps, N as NumberField, G as NumberFieldLabelProps, P as PickerButton, H as PickerButtonProps, I as Preset, J as PresetValue, S as Sheet, K as SheetProps, O as Splitter, Q as SplitterHandleProps, R as SplitterPanelProps, T as SplitterRootProps, U as StatFigure, V as StatFigureProps, W as addDays, X as addMonths, Y as builtinPresets, Z as clampDate, _ as daysInMonth, $ as defaultPresets, a0 as defaultWeekStartsOn, a1 as endOfWeek, a2 as formatMoney, a3 as fromMinorUnits, a4 as getCurrencyDigits, a5 as inclusiveDays, a6 as isValidCurrency, a7 as isoWeek, a8 as last30Days, a9 as last7Days, aa as lastMonth, ab as lastWeek, ac as lengthBlockReason, ad as nextMonth, ae as nextWeek, af as orderRange, ag as parseDecimalString, ah as resolvePreset, ai as startOfWeek, aj as thisMonth, ak as thisQuarter, al as thisWeek, am as toDecimalString, an as toMinorUnits, ao as today, ap as todayDate, aq as tomorrow, ar as useListDetail, as as yearToDate, at as yesterday } from './index-DdHpYalU.js';
 import * as _base_ui_react_internals_filter from '@base-ui/react/internals/filter';
 import { AutocompleteRootProps, Autocomplete as Autocomplete$1 } from '@base-ui/react/autocomplete';
 import { ComboboxRootProps, Combobox as Combobox$1 } from '@base-ui/react/combobox';

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.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.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.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.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.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.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.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.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.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.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.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.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.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.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.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.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.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.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.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.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.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.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.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.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.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.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.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.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.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.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.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.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
@@ -2446,7 +2446,7 @@ button,
   color: var(--sl-modal-description-color);
 }
 
-/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Field - Mojave Theme
  *
  * Label, control, description and error. No component tokens: spacing is the field
@@ -2507,7 +2507,7 @@ textarea.FieldControl {
   height: auto;
 }
 
-/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.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
@@ -2549,7 +2549,7 @@ textarea.FieldControl {
   color: var(--sl-text-secondary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.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
@@ -2569,7 +2569,7 @@ textarea.FieldControl {
   margin-top: var(--sl-space-block-md);
 }
 
-/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.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),
@@ -2706,7 +2706,7 @@ textarea.FieldControl {
   padding-inline: var(--sl-control-padding-inline-lg);
 }
 
-/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.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
@@ -2855,7 +2855,7 @@ textarea.FieldControl {
   color: var(--sl-text-tertiary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.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
@@ -3048,7 +3048,7 @@ textarea.FieldControl {
   color: var(--sl-text-tertiary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.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:
@@ -3111,7 +3111,7 @@ textarea.FieldControl {
   height: var(--sl-gauge-height-lg);
 }
 
-/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.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
@@ -3531,7 +3531,7 @@ textarea.FieldControl {
   width: 100%;
 }
 
-/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.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
@@ -3622,7 +3622,7 @@ textarea.FieldControl {
   user-select: none;
 }
 
-/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.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
@@ -3685,7 +3685,7 @@ textarea.FieldControl {
   letter-spacing: var(--sl-font-body-magnify-letter-spacing);
 }
 
-/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Popover - Mojave Theme */
 
 /* ============================================
@@ -3850,7 +3850,7 @@ textarea.FieldControl {
   fill: var(--sl-popup-arrow-stroke);
 }
 
-/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.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
@@ -3967,7 +3967,7 @@ textarea.FieldControl {
   fill: var(--sl-popup-arrow-stroke);
 }
 
-/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.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
@@ -4044,7 +4044,7 @@ textarea.FieldControl {
   height: var(--sl-gauge-height-lg);
 }
 
-/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.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).
@@ -4196,7 +4196,7 @@ textarea.FieldControl {
   gap: var(--sl-gap-stack-sm);
 }
 
-/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.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
@@ -4278,7 +4278,7 @@ textarea.FieldControl {
   background: transparent;
 }
 
-/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.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
@@ -4563,7 +4563,7 @@ textarea.FieldControl {
   stroke-width: var(--sl-stroke-default);
 }
 
-/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.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
@@ -4591,7 +4591,7 @@ textarea.FieldControl {
   margin-inline: var(--sl-space-4);
 }
 
-/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.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
@@ -4757,7 +4757,7 @@ textarea.FieldControl {
   transform: translate(-50%, 50%);
 }
 
-/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.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,
@@ -4923,7 +4923,7 @@ textarea.FieldControl {
   color: var(--sl-text-disabled);
 }
 
-/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.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
@@ -5059,7 +5059,7 @@ textarea.FieldControl {
   padding: var(--sl-space-6);
 }
 
-/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.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
@@ -5295,7 +5295,7 @@ textarea.FieldControl {
   flex-shrink: 0;
 }
 
-/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.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
@@ -5407,7 +5407,7 @@ textarea.FieldControl {
   height: var(--sl-icon-size-maximize);
 }
 
-/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.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
@@ -5428,7 +5428,48 @@ textarea.FieldControl {
   border-radius: var(--sl-radius-item);
 }
 
-/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
+/* ============================================
+   SEGMENTED (data-variant="segmented")
+   Joined toggles in one outline, the pressed one filled solid: a switch between a few
+   views or modules. Tokens: toggle-group.segmented-* (tokens/component/toggle-group.json).
+   ============================================ */
+
+.ToggleGroup[data-variant='segmented'] {
+  padding: 0;
+  gap: 0;
+  background: var(--sl-toggle-group-segmented-background);
+  border: var(--sl-stroke-default) solid var(--sl-toggle-group-segmented-border-color);
+  border-radius: var(--sl-radius-chrome);
+  overflow: hidden;
+}
+
+.ToggleGroup[data-variant='segmented'] .Toggle {
+  height: calc(var(--sl-control-height-md) - 2 * var(--sl-stroke-default));
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--sl-text-primary);
+}
+
+.ToggleGroup[data-variant='segmented'] .Toggle + .Toggle {
+  border-inline-start: var(--sl-stroke-default) solid var(--sl-toggle-group-segmented-border-color);
+}
+
+.ToggleGroup[data-variant='segmented'] .Toggle:hover:not([data-disabled]):not(:disabled) {
+  background: var(--sl-fill-subtle);
+}
+
+.ToggleGroup[data-variant='segmented'] .Toggle[data-pressed],
+.ToggleGroup[data-variant='segmented'] .Toggle[data-pressed]:hover:not([data-disabled]):not(:disabled) {
+  background: var(--sl-toggle-group-segmented-pressed-background);
+  color: var(--sl-toggle-group-segmented-pressed-color);
+}
+
+.ToggleGroup[data-variant='segmented'] .Toggle:focus-visible {
+  outline-offset: var(--sl-focus-outline-offset-inset);
+}
+
+/* @scattered-light/loomiere-base-ui 0.9.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
@@ -5490,7 +5531,7 @@ textarea.FieldControl {
   max-width: var(--sl-toolbar-input-max-width);
 }
 
-/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.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
@@ -5551,7 +5592,7 @@ textarea.FieldControl {
 }
 
 /* Custom components: not Base UI parts. Built from existing concepts and tokens. */
-/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Badge
  *
  * A status or count label. Not a Base UI part, and not interactive: no hover or focus.
@@ -5656,7 +5697,7 @@ textarea.FieldControl {
   height: var(--sl-badge-dot-base);
 }
 
-/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /*
  * DatePicker: a field that opens a calendar for one date or a period.
  * Not a Base UI part. The popup is Popover on a wide viewport and Drawer
@@ -6229,7 +6270,7 @@ textarea.FieldControl {
   flex-basis: 100%;
 }
 
-/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Money field
  *
  * An amount of money, built on Number field. The value is an integer in minor units
@@ -6574,7 +6615,7 @@ textarea.FieldControl {
   letter-spacing: var(--sl-font-body-base-letter-spacing);
 }
 
-/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* ListDetail
  *
  * The detail of one item, next to its list. Not a Base UI part. It is a Splitter
@@ -6701,7 +6742,7 @@ textarea.FieldControl {
   background: transparent;
 }
 
-/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Splitter
  *
  * Two or more panels and a handle between them. Not a Base UI part. It follows the
@@ -6909,7 +6950,7 @@ textarea.FieldControl {
   background: var(--sl-border-default);
 }
 
-/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* EmptyState
  *
  * The block a page, pane, table, list or popup shows when it has nothing to show.
@@ -7165,7 +7206,7 @@ textarea.FieldControl {
   color: inherit;
 }
 
-/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.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
@@ -7399,7 +7440,7 @@ textarea.FieldControl {
   color: inherit;
 }
 
-/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Collection
  *
  * DataTable, DataList, the toolbar and the pagination, in one place so the two views
@@ -7410,7 +7451,7 @@ textarea.FieldControl {
  * the tabs and the search where they are, so selecting rows does not grow the toolbar.
  */
 
-/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Collection toolbar
  *
  * The wrap follows the toolbar's own width, not the window: a table in a narrow pane wraps
@@ -7551,7 +7592,7 @@ textarea.FieldControl {
   letter-spacing: var(--sl-font-body-condense-letter-spacing);
 }
 
-/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* DataTable additions on top of .Table.
  *
  * Sort buttons fill the header cell and inherit its hover, so old aria-sort markup keeps
@@ -7672,7 +7713,7 @@ textarea.FieldControl {
   color: var(--sl-table-subtle-color);
 }
 
-/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* DataList
  *
  * The same rows as the table, in one container with the table's borders, hover, selected
@@ -7814,7 +7855,7 @@ textarea.FieldControl {
   transition: opacity var(--sl-duration-fast) var(--sl-easing-default);
 }
 
-/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Pagination
  *
  * Not tied to a collection. Anything with a page, a page count and a total can use it.
@@ -7839,7 +7880,7 @@ textarea.FieldControl {
   margin: 0;
 }
 
-/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* EditableList
  *
  * One table at every width, so a field is not submitted twice. Under the stack width each
@@ -7938,7 +7979,7 @@ textarea.FieldControl {
   }
 }
 
-/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* Sheet
  *
  * A working-paper surface: the raised surface with a heavier rule across its top
@@ -8029,7 +8070,7 @@ textarea.FieldControl {
   border-top: 0;
 }
 
-/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* StatFigure
  *
  * One large figure with a caps label above and a caption under it. The label is
@@ -8090,7 +8131,7 @@ textarea.FieldControl {
   color: var(--sl-stat-figure-caption-color);
 }
 
-/* @scattered-light/loomiere-base-ui 0.8.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* DescriptionList
  *
  * Label and value pairs in a native dl, one DescriptionItem (a div holding a dt and a dd)
@@ -8165,3 +8206,123 @@ textarea.FieldControl {
   max-width: 60%;
   text-align: end;
 }
+
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
+/* AppBar
+ *
+ * The bar across the top of an app window, one row on a line in the rule color. The line is
+ * app-bar.border-width while rule.width is 0, and the thicker of the two once a brand turns the
+ * rule on, so an ink-rule brand gets the working-paper rule under its app bar.
+ * AppBarSpacer pushes what follows it to the end. A vertical Separator inside is a short
+ * divider between groups of icon actions. Tokens: app-bar.* (tokens/component/app-bar.json).
+ */
+
+.AppBar {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--sl-app-bar-gap);
+  min-height: var(--sl-app-bar-height);
+  padding-inline: var(--sl-app-bar-padding-inline);
+  padding-block: var(--sl-space-2);
+  background: var(--sl-app-bar-background);
+  border-bottom: max(var(--sl-app-bar-border-width), var(--sl-rule-width)) solid var(--sl-app-bar-border-color);
+  min-width: 0;
+}
+
+.AppBarSpacer {
+  flex: 1 1 var(--sl-space-4);
+  min-width: 0;
+}
+
+.AppBar .Separator[data-orientation='vertical'] {
+  height: var(--sl-app-bar-divider-height);
+  margin-inline: var(--sl-space-1);
+  background: var(--sl-app-bar-divider-color);
+}
+
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
+/* PickerButton
+ *
+ * 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.*.
+ */
+
+.PickerButton {
+  box-sizing: border-box;
+  color: var(--sl-field-color);
+  background: var(--sl-field-background);
+  border: var(--sl-field-border-width) solid var(--sl-field-border-color);
+  border-radius: var(--sl-field-radius);
+  transition: var(--sl-field-transition);
+  outline: none;
+  font-family: var(--sl-font-body-base-font-family);
+  font-size: var(--sl-font-body-base-font-size);
+  font-weight: var(--sl-font-body-base-font-weight);
+  line-height: var(--sl-font-body-base-line-height);
+  letter-spacing: var(--sl-font-body-base-letter-spacing);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sl-gap-control);
+  max-width: var(--sl-picker-button-max-width);
+  min-width: 0;
+  height: var(--sl-control-height-md);
+  margin: 0;
+  padding-block: var(--sl-control-padding-block);
+  padding-inline: var(--sl-control-padding-inline);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.PickerButton:hover:not(:disabled) {
+  border-color: var(--sl-field-border-color-hover);
+}
+
+.PickerButton:focus-visible {
+  border-color: var(--sl-field-border-color-focus);
+  box-shadow: var(--sl-field-shadow-focus);
+}
+
+.PickerButton:disabled {
+  background: var(--sl-field-background-disabled);
+  color: var(--sl-field-color-disabled);
+  cursor: not-allowed;
+}
+
+.PickerButtonLabel {
+  font-family: var(--sl-font-caps-condense-font-family);
+  font-size: var(--sl-font-caps-condense-font-size);
+  font-weight: var(--sl-font-caps-condense-font-weight);
+  line-height: var(--sl-font-caps-condense-line-height);
+  letter-spacing: var(--sl-font-caps-condense-letter-spacing);
+  text-transform: var(--sl-font-caps-condense-text-transform);
+  flex: none;
+  color: var(--sl-picker-button-label-color);
+}
+
+.PickerButtonValue {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--sl-field-color);
+}
+
+.PickerButtonValue[data-placeholder] {
+  color: var(--sl-field-placeholder-color);
+}
+
+.PickerButtonIcon {
+  flex: none;
+  width: var(--sl-icon-size-base);
+  height: var(--sl-icon-size-base);
+  color: var(--sl-text-tertiary);
+  transition: transform var(--sl-duration-normal) var(--sl-easing-default);
+}
+
+.PickerButton[aria-expanded='true'] .PickerButtonIcon,
+.PickerButton[data-popup-open] .PickerButtonIcon {
+  transform: rotate(180deg);
+}