@scattered-light/loomiere-mojave 0.6.0 → 0.7.0

package/dist/tokens.css

@@ -740,6 +740,7 @@
     --sl-a11y-focus-outline-width: 2px; /** Focus ring thickness. 2px is the WCAG 2.2 minimum that stays visible on every surface. */
     --sl-a11y-link-focus-outline-offset: 0.25em; /** Links sit inside text, so the offset scales with the font (em) instead of a fixed px. */
     --sl-a11y-link-focus-ring-radius: 0.125em; /** A slight em-based rounding so inline focus rings hug the text. */
+    --sl-a11y-min-target: 24px; /** Smallest target for a fine pointer (WCAG 2.5.8). A mouse can hit 24px; a finger still needs min-touch-target. The splitter handle uses this so the grab area does not cover the scrollbar beside it. */
     --sl-a11y-min-touch-target: 44px; /** Smallest tap area for any control (WCAG 2.5.5 and Apple HIG both use 44px). */
     --sl-check-dot-scale: 0.4; /** A radio's dot as a share of the circle, so it scales with the size. */
     --sl-check-opacity-disabled: 0.5; /** A disabled box fades as a whole; its label turns to disabled text. */
@@ -779,11 +780,17 @@
     --sl-button-opacity-disabled: 0.5; /** A disabled button fades as a whole, keeping its shape so the layout doesn't jump. */
     --sl-drawer-popup-size: min(420px, 90vw); /** Width of a side drawer. A bottom or top drawer sizes to its content up to max-size. */
     --sl-drawer-popup-max-size: 85vh; /** Tallest a bottom or top drawer gets, leaving the page visible above it. */
+    --sl-list-detail-split-min-width: 720px; /** Side by side once this element, not the window, is this wide. Dryden used 1100px of the window. A container needs less: a list around 320px and a form around 400px still read at 720px. Narrower, the detail becomes a drawer or a page. */
+    --sl-list-detail-detail-default-size: 45%; /** The detail's share when it opens. The list fills the rest, about 55%, which is the split Dryden started from. */
+    --sl-list-detail-detail-min-size: 35%; /** The detail cannot be dragged narrower than this, so the form stays readable. */
+    --sl-list-detail-detail-max-size: 65%; /** The detail cannot cover more than this, so the list stays usable. Dryden kept the detail between 35% and 65%. */
     --sl-navigation-menu-popup-min-width: 400px; /** Narrowest a navigation panel gets on wider screens, and the widest a single column of links grows. */
     --sl-navigation-menu-column-width: 12rem; /** Width of each column in a two-column link list. */
     --sl-preview-card-popup-min-width: 300px; /** Narrowest a preview card gets, so a short title still has room for its image. */
     --sl-preview-card-popup-max-width: 450px; /** Widest a preview card gets, so its description keeps a comfortable line length. */
     --sl-slider-vertical-height: 200px; /** Default length of a vertical slider. */
+    --sl-splitter-key-step: 5%; /** One arrow press moves the handle by 5% of the splitter. Dryden used 5%: a nudge you can see, not a jump. */
+    --sl-splitter-key-step-large: 10%; /** The Shift step. Twice the arrow step, so a few presses cross the panel without holding the key. */
     --sl-switch-track-width: 48px; /** Wide enough for the thumb plus the ON/OFF text. */
     --sl-switch-track-width-sm: 44px;
     --sl-switch-track-width-lg: 68px;
@@ -1444,6 +1451,11 @@
     --sl-bar-group-gap: var(--sl-space-2); /** Space between groups in a toolbar, wider than inside a group. */
     --sl-bar-separator-length: var(--sl-space-6); /** Divider height, shorter than the controls so the groups still read as one strip. */
     --sl-bar-separator-spacing: var(--sl-space-1); /** Extra space either side of a divider. */
+    --sl-calendar-day-size: var(--sl-space-10); /** A day cell on a pointer. space.10 keeps seven columns inside a phone; touch layouts raise the cell to the minimum touch target in CSS. */
+    --sl-calendar-grid-gap: var(--sl-space-0-5); /** Space between week rows. Days in a week share an edge, so the range band reads as one shape. */
+    --sl-calendar-month-gap: var(--sl-space-4); /** Space between months shown side by side, the same step as panel padding so the two columns line up. */
+    --sl-calendar-header-gap: var(--sl-space-2); /** Space between the month title and the weekday row. */
+    --sl-calendar-panel-padding: var(--sl-space-4); /** Padding inside the popup. The shared popup padding is one step and is too tight for a calendar. */
     --sl-overlay-base: var(--sl-color-black); /** Base color for scrims behind modals. Components apply their own opacity. */
     --sl-disclosure-animation-duration: var(--sl-duration-normal); /** How long a panel takes to open or close, and the chevron to turn. */
     --sl-disclosure-animation-easing: var(--sl-easing-in-out); /** Panels grow and shrink in place, so they ease both ways. */
@@ -1454,6 +1466,22 @@
     --sl-elevation-sm: var(--sl-shadow-sm);
     --sl-elevation-xl: var(--sl-shadow-xl);
     --sl-elevation-xs: var(--sl-shadow-xs);
+    --sl-empty-padding-block-compact: var(--sl-space-6); /** 24px above and below a compact empty state. The same room a popup already gives a plain 'No results' line, so the two stay one height. */
+    --sl-empty-padding-block-standard: var(--sl-space-10); /** 40px. A pane or a section needs more air than a table row, or the block looks stuck to the content around it. */
+    --sl-empty-padding-block-spacious: var(--sl-space-16); /** 64px. A page with nothing else on it. The extra space above keeps the block off the top of the viewport. */
+    --sl-empty-padding-inline-compact: var(--sl-space-4); /** 16px. Enough that a compact row doesn't touch the cell or popup edge. */
+    --sl-empty-padding-inline-standard: var(--sl-space-6); /** 24px. A pane can be wide; the inline padding keeps the block off the sides before the description's own cap does. */
+    --sl-empty-padding-inline-spacious: var(--sl-space-8); /** 32px. A full page, a step wider than a pane. */
+    --sl-empty-gap-compact: var(--sl-space-3); /** 12px between the icon, the text and the actions in a table row or a popup. Tight, because the row is short. */
+    --sl-empty-gap-standard: var(--sl-space-4); /** 16px. The stack in a pane: media, then words, then actions. */
+    --sl-empty-gap-spacious: var(--sl-space-6); /** 24px. A page-sized stack needs the steps to separate, or the circle sits on the title. */
+    --sl-empty-text-gap-compact: var(--sl-space-1); /** 4px between the title and the description in a compact row. They read as one message. */
+    --sl-empty-text-gap-standard: var(--sl-space-1); /** 4px. Same as compact: the description belongs to the title, so it stays close. */
+    --sl-empty-text-gap-spacious: var(--sl-space-2); /** 8px. The page title is larger, so the description steps down a little further. */
+    --sl-empty-media-size-standard: var(--sl-space-12); /** 48px circle around a magnify icon (20px). The icon needs a field, or it reads as a bullet. */
+    --sl-empty-media-size-spacious: var(--sl-space-16); /** 64px circle around a maximize icon (24px). A page can carry a larger mark. Compact has no circle: the icon is icon-size.condense on its own. */
+    --sl-empty-description-max-width: var(--sl-measure-narrow); /** 45ch. A description is one sentence. Past a caption's measure it stretches across a wide pane and stops being a sentence. */
+    --sl-empty-actions-gap: var(--sl-space-2); /** 8px between actions, the same gap a control uses between its icon and its label. The first action is the main one; the rest sit beside it. */
     --sl-field-gap: var(--sl-space-1-5); /** Between a field's label, control and messages. */
     --sl-field-label-spacing: var(--sl-space-1); /** Extra room under the label, so it reads as belonging to the control below it. */
     --sl-field-message-spacing: var(--sl-space-1); /** Extra room above a description or error, so it reads as a note on the control. */
@@ -1496,7 +1524,6 @@
     --sl-popup-separator-spacing: var(--sl-space-1); /** Space above and below a separator. */
     --sl-popup-group-label-padding-top: var(--sl-space-2); /** Space above a group label, so it sits closer to its own rows than to the group before. */
     --sl-popup-group-label-padding-bottom: var(--sl-space-1); /** Space between a group label and its first row. */
-    --sl-popup-empty-padding-block: var(--sl-space-6); /** Room around a 'No results' message, so an empty list doesn't collapse to a sliver. */
     --sl-control-height-lg: var(--sl-space-13);
     --sl-control-height-md: var(--sl-space-11);
     --sl-control-height-sm: var(--sl-space-9);
@@ -1807,11 +1834,35 @@
     --sl-avatar-initials-font-size-md: var(--sl-font-size-md); /** Sized to the avatar, not a text style: initials have to fit inside the circle at each size. The rest of the type is title-base. */
     --sl-avatar-initials-font-size-lg: var(--sl-font-size-lg); /** Sized to the avatar, not a text style: initials have to fit inside the circle at each size. The rest of the type is title-base. */
     --sl-avatar-initials-font-size-xl: var(--sl-font-size-2xl); /** Sized to the avatar, not a text style: initials have to fit inside the circle at each size. The rest of the type is title-base. */
+    --sl-badge-height-minimize: var(--sl-space-5); /** 20px. The smallest pill that still holds trigger-minimize. */
+    --sl-badge-height-condense: var(--sl-space-6); /** 24px, the default. Sits in a line of text and in dense rows. */
+    --sl-badge-height-base: var(--sl-space-7); /** 28px, the small control height, for a badge beside base text. */
+    --sl-badge-padding-inline-minimize: var(--sl-space-1); /** 4px. Tighter than a control so a short label stays a pill, not a button. */
+    --sl-badge-padding-inline-condense: var(--sl-space-1-5); /** 6px, the default. */
+    --sl-badge-padding-inline-base: var(--sl-space-2); /** 8px, still inside the small control's inline padding. */
+    --sl-badge-gap-minimize: var(--sl-space-1); /** 4px between a dot or icon and the label at the smallest size. */
+    --sl-badge-gap-condense: var(--sl-space-1); /** 4px, the default. The same gap as the smallest control. */
+    --sl-badge-gap-base: var(--sl-space-1-5); /** 6px, a step wider once the label is base-sized. */
+    --sl-badge-dot-minimize: var(--sl-space-1-5); /** 6px status dot. Smaller than icon-size-minimize so it reads as a mark, not an icon. */
+    --sl-badge-dot-condense: var(--sl-space-2); /** 8px, the default. */
+    --sl-badge-dot-base: var(--sl-space-2); /** 8px. The base badge is taller, but the dot stays a mark. */
+    --sl-collection-tree-indent: var(--sl-space-4); /** How far each deeper level steps in, so a child sits under its parent's text. */
+    --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. */
+    --sl-collection-list-row-gap: var(--sl-space-2); /** Between the checkbox, the text, the amount and the actions in a list row. */
+    --sl-collection-toolbar-gap: var(--sl-space-2); /** Between the search, the filters and the actions. */
+    --sl-collection-narrow-width: var(--sl-space-96); /** Below this, a table with narrow="list" becomes a list, and the toolbar's search takes the full width. A 360px pane is under it. */
+    --sl-collection-editable-list-stack-width: var(--sl-space-80); /** Below this, editable rows stack and show their own labels. 320px matches. */
+    --sl-collection-selection-column-width: var(--sl-space-10); /** The checkbox column. Wide enough for the control, no wider, so the data keeps the room. */
     --sl-drawer-handle-width: var(--sl-space-10); /** Grab bar length. */
     --sl-drawer-handle-height: var(--sl-space-1); /** Grab bar thickness. */
+    --sl-list-detail-header-gap: var(--sl-space-3); /** Space between the title, the actions and Close. */
+    --sl-list-detail-header-padding: var(--sl-space-4); /** Padding inside the detail header. One step under a dialog, because this is a pane, not a modal. */
+    --sl-money-field-picker-min-inline-size: var(--sl-space-56); /** The currency list shows a code, a name and a symbol, so the popup is wider than the code trigger inside the field. */
     --sl-popover-text-max-width: var(--sl-measure-narrow); /** Keeps the title and description to a readable line length. The popup itself has no fixed cap, so wider content such as a calendar or a form fits; it stops at the space Base UI reports beside the trigger. */
     --sl-popover-popup-min-width: var(--sl-popup-min-width); /** Narrow enough for a short note, wide enough that a title doesn't wrap word by word. */
     --sl-slider-thumb-size: var(--sl-space-5); /** Knob diameter, big enough to grab with a finger on a 4px track. */
+    --sl-splitter-handle-hit-size: var(--sl-a11y-min-touch-target); /** The part a finger grabs. The line stays one stroke. A fine pointer uses a11y.min-target (24px) instead, so the grab area does not cover the panel's scrollbar. Coarse pointers keep this 44px. */
+    --sl-splitter-grip-size: var(--sl-space-1); /** 4px. The diameter of one grip dot. Small enough to sit on the hairline without becoming a second control. */
     --sl-switch-track-text-font-size: var(--sl-font-size-xs); /** Sized to the track, not a text style: the ON/OFF label has to fit inside the switch at each size. The rest of the label uses condense-subtitle-label. */
     --sl-switch-track-text-font-size-sm: var(--sl-font-size-xxs); /** Sized to the track, not a text style: the ON/OFF label has to fit inside the switch at each size. The rest of the label uses condense-subtitle-label. */
     --sl-switch-track-text-font-size-lg: var(--sl-font-size-sm); /** Sized to the track, not a text style: the ON/OFF label has to fit inside the switch at each size. The rest of the label uses condense-subtitle-label. */
@@ -1845,6 +1896,7 @@
     --sl-a11y-focus-ring-radius: var(--sl-radius-focus); /** Rounds the focus ring to match the small control radius. */
     --sl-bar-border-width: var(--sl-stroke-default); /** Strip edge thickness. */
     --sl-bar-radius: var(--sl-radius-surface); /** Strip corners. Controls inside a toggle group take radius.item, so the inner corners follow the outer ones. */
+    --sl-calendar-day-radius: var(--sl-radius-pill); /** Selected days are circles. The pill radius is the same full radius badges and switches use. */
     --sl-check-border-width: var(--sl-stroke-default); /** Edge thickness. */
     --sl-check-radius: var(--sl-radius-box); /** Checkbox corners. Radios are always round. */
     --sl-check-transition: var(--sl-transition-input); /** Changes at the same speed as a field. */
@@ -1877,6 +1929,7 @@
     --sl-popup-radius: var(--sl-radius-surface); /** Corners of a free-floating popup. */
     --sl-popup-radius-field: var(--sl-radius-control); /** Corners of a list that drops from a field, matching the field so the two read as one control. */
     --sl-popup-shadow: var(--sl-elevation-lg); /** Lifts the popup above the page. */
+    --sl-popup-empty-padding-block: var(--sl-empty-padding-block-compact); /** Room around a plain 'No results' line. The same padding as a compact empty state, so a sentence and an EmptyState in that slot take the same space. An EmptyState drops this padding and uses its own. */
     --sl-table-row-height: var(--sl-control-height-sm); /** Row height: the small control height, so a checkbox, input or button in a cell fits without growing the row. */
     --sl-table-header-height: var(--sl-control-height-md); /** Header row height: the regular control height, a little taller than rows so the header reads as its own band. */
     --sl-table-cell-padding-inline: var(--sl-control-padding-inline-sm); /** Space either side of cell text, matching small controls. */
@@ -2060,7 +2113,13 @@
     --sl-status-level-error-quiet-border: var(--sl-scope-error-border); /** quiet in error: outline in error */
     --sl-status-level-error-quiet-border-hover: var(--sl-scope-error-solid-hover); /** quiet in error: outline in error */
     --sl-button-radius: var(--sl-radius-pill); /** Buttons are pills, so they read as actions and never as fields or cards. */
+    --sl-collection-row-height-sm: var(--sl-control-height-sm); /** The dense row, the same height the plain table already uses, so a checkbox fits. */
+    --sl-collection-row-height-md: var(--sl-control-height-md); /** A roomier row when the collection is the page rather than a dense register. */
+    --sl-collection-header-height-sm: var(--sl-control-height-md); /** The dense header, a step above the dense row, matching today's table header. */
+    --sl-collection-header-height-md: var(--sl-control-height-lg); /** The header for the roomier row. */
+    --sl-splitter-handle-size: var(--sl-stroke-default); /** The visible separator. One stroke, the same hairline as Separator, so a splitter reads as a divider you can grab. */
     --sl-focus-shadow-3px-error: 0 0 0 3px var(--sl-status-error); /** Focus halo for a field with an error. */
+    --sl-calendar-day-color: var(--sl-text-primary); /** A day in the month being shown. */
     --sl-border-accent: var(--sl-scope-accent-border); /** Borders that signal selection or the active item. */
     --sl-border-default: var(--sl-scope-chrome-divider); /** Everyday dividers and control outlines. Darkens under prefers-contrast: more. */
     --sl-border-strong: var(--sl-scope-chrome-border-strong); /** Borders that identify a control, such as inputs and unchecked checkboxes. 3:1 against the canvas, as WCAG asks for control boundaries. */
@@ -2160,6 +2219,12 @@
     --sl-bar-background: var(--sl-surface-tray); /** Strip fill. */
     --sl-bar-border-color: var(--sl-border-default); /** Strip edge. */
     --sl-bar-separator-color: var(--sl-border-default); /** Divider between groups. */
+    --sl-calendar-day-color-outside: var(--sl-text-tertiary); /** A day from the previous or next month, still selectable, drawn back so it does not compete with this month. */
+    --sl-calendar-day-color-disabled: var(--sl-text-disabled); /** A day outside the allowed period, or one a length rule rejects. It stays in the tab order so the reason can be read. */
+    --sl-calendar-range-background: var(--sl-interactive-tint-active); /** The band between the start and end of a period. Same tint as a selected list item, quieter than the start and end circles. */
+    --sl-calendar-range-color: var(--sl-text-on-tint-strong); /** Day numbers that sit on the range band. The on-tint text color is the one that stays readable on interactive.tint-active. */
+    --sl-calendar-today-ring: var(--sl-border-accent); /** An inset ring on today, including when today is also selected, so today is never only a color of the number. */
+    --sl-calendar-weekday-color: var(--sl-text-tertiary); /** Weekday initials and week numbers are labels, not choices. */
     --sl-check-border-color: var(--sl-border-control); /** Empty box edge. Passes 3:1 so the box can be found before it's ticked. */
     --sl-check-border-color-hover: var(--sl-border-control-hover); /** Edge under the pointer. */
     --sl-check-background-checked: var(--sl-interactive-default); /** Ticked box fill, the brand's interactive color. */
@@ -2202,6 +2267,7 @@
     --sl-field-color-disabled: var(--sl-text-disabled); /** The value in a disabled field. */
     --sl-field-placeholder-color: var(--sl-text-tertiary); /** Hint text before anything is typed. */
     --sl-field-shadow-focus-error: var(--sl-focus-shadow-3px-error); /** Halo while typing in an invalid field. */
+    --sl-field-affix-color: var(--sl-text-secondary); /** A prefix or suffix drawn inside the field (a currency symbol, a unit). Muted so it reads as part of the control, not as the value. */
     --sl-gauge-track-color: var(--sl-fill-track); /** The empty part of the bar. Every palette's fill reads 3:1 on it, so the amount is clear in both themes. */
     --sl-gauge-value-color: var(--sl-text-secondary); /** The number, quieter than its label. */
     --sl-icon-button-color: var(--sl-text-tertiary); /** Quiet at rest so it doesn't compete with the content. */
@@ -2224,12 +2290,15 @@
     --sl-table-header-background-hover: var(--sl-fill-subtle); /** A header cell under the pointer, showing it can be clicked to sort. */
     --sl-table-border-color: var(--sl-border-default); /** The grid's outer edge and the line under the header. */
     --sl-table-row-border-color: var(--sl-border-subtle); /** Hairlines between rows, quiet so the data leads. */
+    --sl-table-row-current: var(--sl-surface-tray); /** The open row beside a detail pane. The tray, a step off the page, so secondary text on it still passes AA in dark. A selected row keeps its own tint, so a checked row and the row you are reading can both show. */
+    --sl-table-group-header-background: var(--sl-surface-tray); /** A group header. The tray, like the column header, so a group reads as chrome rather than another data row. */
     --sl-table-column-hover: var(--sl-fill-subtle); /** Column under the pointer, when column hover is on. Neutral so it never reads as a selection. */
     --sl-table-range-background: var(--sl-interactive-tint); /** Cells inside a dragged range selection. */
     --sl-emphasis-bold-fg: var(--sl-scope-accent-on-solid); /** bold in default: solid in accent (primary) */
     --sl-status-level-default-bold-fg: var(--sl-scope-accent-on-solid); /** bold in default: solid in accent (primary) */
     --sl-drawer-handle-color: var(--sl-border-strong); /** The grab bar on bottom drawers. Strong border so it reads as something to drag. */
     --sl-shadow-outline: 0 0 0 3px color-mix(in oklab, var(--sl-focus-ring) 60%, transparent); /** Focus halo for controls that use box-shadow instead of outline: the focus ring color at 60% opacity, so it follows the accent and the theme. Becomes currentColor under prefers-contrast: more. */
+    --sl-calendar-day-background-hover: var(--sl-item-background-hover); /** The same hover tint as a list item, so a day feels like a choice in a list. */
     --sl-check-mark-color: var(--sl-text-on-primary); /** Check mark, dash or dot on a ticked fill. */
     --sl-text-on-accent: var(--sl-text-on-primary); /** Alias for text placed on any accent fill. */
     --sl-content-kbd-text: var(--sl-text-on-inverse); /** Text on keycaps. */
@@ -5476,7 +5545,8 @@
   [data-emphasis='bold'],
   .Button[data-variant='solid']:not([data-emphasis]),
   .Button:not([data-variant]):not([data-emphasis]),
-  .AvatarRoot:not([data-emphasis]) {
+  .AvatarRoot:not([data-emphasis]),
+  .CalendarDay[data-selected]:not([data-emphasis]) {
     --sl-e-bg: var(--sl-scope-solid);
     --sl-e-bg-hover: var(--sl-scope-solid-hover);
     --sl-e-bg-active: var(--sl-scope-solid-active);
@@ -5496,7 +5566,9 @@
     --sl-e-border-hover: var(--sl-scope-solid-hover);
   }
 
-  [data-emphasis='subtle'] {
+  [data-emphasis='subtle'],
+  .Badge:not([data-emphasis]),
+  .EmptyStateMedia:not([data-emphasis]) {
     --sl-e-bg: var(--sl-scope-soft);
     --sl-e-bg-hover: var(--sl-scope-soft-hover);
     --sl-e-bg-active: var(--sl-scope-soft-active);
@@ -5505,7 +5577,9 @@
     --sl-e-border-hover: var(--sl-scope-soft-hover);
   }
 
-  [data-emphasis='subtle']:not([data-color], [data-status], [data-status] *, .Toast[data-type], .Toast[data-type] *) {
+  [data-emphasis='subtle']:not([data-color], [data-status], [data-status] *, .Toast[data-type], .Toast[data-type] *),
+  .Badge:not([data-emphasis]):not([data-color], [data-status], [data-status] *, .Toast[data-type], .Toast[data-type] *),
+  .EmptyStateMedia:not([data-emphasis]):not([data-color], [data-color] *, [data-status], [data-status] *, .Toast[data-type], .Toast[data-type] *) {
     --sl-scope-solid: var(--sl-scope-chrome-solid);
     --sl-scope-solid-hover: var(--sl-scope-chrome-solid-hover);
     --sl-scope-solid-active: var(--sl-scope-chrome-solid-active);
@@ -5644,6 +5718,13 @@
     --sl-bar-background: var(--sl-surface-tray);
     --sl-bar-border-color: var(--sl-border-default);
     --sl-bar-separator-color: var(--sl-border-default);
+    --sl-calendar-day-color: var(--sl-text-primary);
+    --sl-calendar-day-color-outside: var(--sl-text-tertiary);
+    --sl-calendar-day-color-disabled: var(--sl-text-disabled);
+    --sl-calendar-range-background: var(--sl-interactive-tint-active);
+    --sl-calendar-range-color: var(--sl-text-on-tint-strong);
+    --sl-calendar-today-ring: var(--sl-border-accent);
+    --sl-calendar-weekday-color: var(--sl-text-tertiary);
     --sl-check-border-color: var(--sl-border-control);
     --sl-check-border-color-hover: var(--sl-border-control-hover);
     --sl-check-background-checked: var(--sl-interactive-default);
@@ -5672,6 +5753,7 @@
     --sl-field-color-disabled: var(--sl-text-disabled);
     --sl-field-placeholder-color: var(--sl-text-tertiary);
     --sl-field-shadow-focus: var(--sl-focus-shadow-3px-primary);
+    --sl-field-affix-color: var(--sl-text-secondary);
     --sl-gauge-track-color: var(--sl-fill-track);
     --sl-gauge-label-color: var(--sl-text-primary);
     --sl-gauge-value-color: var(--sl-text-secondary);
@@ -5705,10 +5787,13 @@
     --sl-table-row-border-color: var(--sl-border-subtle);
     --sl-table-row-hover: var(--sl-item-background-hover);
     --sl-table-row-selected: var(--sl-item-background-selected);
+    --sl-table-row-current: var(--sl-surface-tray);
+    --sl-table-group-header-background: var(--sl-surface-tray);
     --sl-table-column-hover: var(--sl-fill-subtle);
     --sl-table-range-background: var(--sl-interactive-tint);
     --sl-table-range-border: var(--sl-focus-ring);
     --sl-drawer-handle-color: var(--sl-border-strong);
+    --sl-calendar-day-background-hover: var(--sl-item-background-hover);
     --sl-check-background: var(--sl-field-background);
   }
 
@@ -5779,6 +5864,13 @@
     --sl-bar-background: var(--sl-surface-tray);
     --sl-bar-border-color: var(--sl-border-default);
     --sl-bar-separator-color: var(--sl-border-default);
+    --sl-calendar-day-color: var(--sl-text-primary);
+    --sl-calendar-day-color-outside: var(--sl-text-tertiary);
+    --sl-calendar-day-color-disabled: var(--sl-text-disabled);
+    --sl-calendar-range-background: var(--sl-interactive-tint-active);
+    --sl-calendar-range-color: var(--sl-text-on-tint-strong);
+    --sl-calendar-today-ring: var(--sl-border-accent);
+    --sl-calendar-weekday-color: var(--sl-text-tertiary);
     --sl-check-border-color: var(--sl-border-control);
     --sl-check-border-color-hover: var(--sl-border-control-hover);
     --sl-check-background-checked: var(--sl-interactive-default);
@@ -5807,6 +5899,7 @@
     --sl-field-color-disabled: var(--sl-text-disabled);
     --sl-field-placeholder-color: var(--sl-text-tertiary);
     --sl-field-shadow-focus: var(--sl-focus-shadow-3px-primary);
+    --sl-field-affix-color: var(--sl-text-secondary);
     --sl-gauge-track-color: var(--sl-fill-track);
     --sl-gauge-label-color: var(--sl-text-primary);
     --sl-gauge-value-color: var(--sl-text-secondary);
@@ -5840,10 +5933,13 @@
     --sl-table-row-border-color: var(--sl-border-subtle);
     --sl-table-row-hover: var(--sl-item-background-hover);
     --sl-table-row-selected: var(--sl-item-background-selected);
+    --sl-table-row-current: var(--sl-surface-tray);
+    --sl-table-group-header-background: var(--sl-surface-tray);
     --sl-table-column-hover: var(--sl-fill-subtle);
     --sl-table-range-background: var(--sl-interactive-tint);
     --sl-table-range-border: var(--sl-focus-ring);
     --sl-drawer-handle-color: var(--sl-border-strong);
+    --sl-calendar-day-background-hover: var(--sl-item-background-hover);
     --sl-check-background: var(--sl-field-background);
   }
 
@@ -5914,6 +6010,13 @@
     --sl-bar-background: var(--sl-surface-tray);
     --sl-bar-border-color: var(--sl-border-default);
     --sl-bar-separator-color: var(--sl-border-default);
+    --sl-calendar-day-color: var(--sl-text-primary);
+    --sl-calendar-day-color-outside: var(--sl-text-tertiary);
+    --sl-calendar-day-color-disabled: var(--sl-text-disabled);
+    --sl-calendar-range-background: var(--sl-interactive-tint-active);
+    --sl-calendar-range-color: var(--sl-text-on-tint-strong);
+    --sl-calendar-today-ring: var(--sl-border-accent);
+    --sl-calendar-weekday-color: var(--sl-text-tertiary);
     --sl-check-border-color: var(--sl-border-control);
     --sl-check-border-color-hover: var(--sl-border-control-hover);
     --sl-check-background-checked: var(--sl-interactive-default);
@@ -5942,6 +6045,7 @@
     --sl-field-color-disabled: var(--sl-text-disabled);
     --sl-field-placeholder-color: var(--sl-text-tertiary);
     --sl-field-shadow-focus: var(--sl-focus-shadow-3px-primary);
+    --sl-field-affix-color: var(--sl-text-secondary);
     --sl-gauge-track-color: var(--sl-fill-track);
     --sl-gauge-label-color: var(--sl-text-primary);
     --sl-gauge-value-color: var(--sl-text-secondary);
@@ -5975,10 +6079,13 @@
     --sl-table-row-border-color: var(--sl-border-subtle);
     --sl-table-row-hover: var(--sl-item-background-hover);
     --sl-table-row-selected: var(--sl-item-background-selected);
+    --sl-table-row-current: var(--sl-surface-tray);
+    --sl-table-group-header-background: var(--sl-surface-tray);
     --sl-table-column-hover: var(--sl-fill-subtle);
     --sl-table-range-background: var(--sl-interactive-tint);
     --sl-table-range-border: var(--sl-focus-ring);
     --sl-drawer-handle-color: var(--sl-border-strong);
+    --sl-calendar-day-background-hover: var(--sl-item-background-hover);
     --sl-check-background: var(--sl-field-background);
   }
 }

package/dist/tokens.d.ts

@@ -1637,6 +1637,7 @@ declare const tokens: {
     readonly "focus-ring-radius": string;
     readonly "link-focus-outline-offset": string;
     readonly "link-focus-ring-radius": string;
+    readonly "min-target": string;
     readonly "min-touch-target": string;
   };
   readonly "focus": {
@@ -1663,6 +1664,22 @@ declare const tokens: {
     readonly "separator-length": string;
     readonly "separator-spacing": string;
   };
+  readonly "calendar": {
+    readonly "day-size": string;
+    readonly "day-radius": string;
+    readonly "day-color": string;
+    readonly "day-color-outside": string;
+    readonly "day-color-disabled": string;
+    readonly "day-background-hover": string;
+    readonly "range-background": string;
+    readonly "range-color": string;
+    readonly "today-ring": string;
+    readonly "weekday-color": string;
+    readonly "grid-gap": string;
+    readonly "month-gap": string;
+    readonly "header-gap": string;
+    readonly "panel-padding": string;
+  };
   readonly "check": {
     readonly "background": string;
     readonly "border-color": string;
@@ -1792,6 +1809,34 @@ declare const tokens: {
     readonly "xl": string;
     readonly "xs": string;
   };
+  readonly "empty": {
+    readonly "padding-block": {
+      readonly "compact": string;
+      readonly "standard": string;
+      readonly "spacious": string;
+    };
+    readonly "padding-inline": {
+      readonly "compact": string;
+      readonly "standard": string;
+      readonly "spacious": string;
+    };
+    readonly "gap": {
+      readonly "compact": string;
+      readonly "standard": string;
+      readonly "spacious": string;
+    };
+    readonly "text-gap": {
+      readonly "compact": string;
+      readonly "standard": string;
+      readonly "spacious": string;
+    };
+    readonly "media-size": {
+      readonly "standard": string;
+      readonly "spacious": string;
+    };
+    readonly "description-max-width": string;
+    readonly "actions-gap": string;
+  };
   readonly "field": {
     readonly "background": string;
     readonly "background-disabled": string;
@@ -1811,6 +1856,7 @@ declare const tokens: {
     readonly "label-spacing": string;
     readonly "message-spacing": string;
     readonly "opacity-disabled": string;
+    readonly "affix-color": string;
   };
   readonly "gauge": {
     readonly "track-color": string;
@@ -1961,6 +2007,8 @@ declare const tokens: {
     readonly "row-border-color": string;
     readonly "row-hover": string;
     readonly "row-selected": string;
+    readonly "row-current": string;
+    readonly "group-header-background": string;
     readonly "column-hover": string;
     readonly "range-background": string;
     readonly "range-border": string;
@@ -2650,10 +2698,37 @@ declare const tokens: {
     readonly "initials-font-size-lg": string;
     readonly "initials-font-size-xl": string;
   };
+  readonly "badge": {
+    readonly "height-minimize": string;
+    readonly "height-condense": string;
+    readonly "height-base": string;
+    readonly "padding-inline-minimize": string;
+    readonly "padding-inline-condense": string;
+    readonly "padding-inline-base": string;
+    readonly "gap-minimize": string;
+    readonly "gap-condense": string;
+    readonly "gap-base": string;
+    readonly "dot-minimize": string;
+    readonly "dot-condense": string;
+    readonly "dot-base": string;
+  };
   readonly "button": {
     readonly "radius": string;
     readonly "opacity-disabled": string;
   };
+  readonly "collection": {
+    readonly "row-height-sm": string;
+    readonly "row-height-md": string;
+    readonly "header-height-sm": string;
+    readonly "header-height-md": string;
+    readonly "tree-indent": string;
+    readonly "list-row-padding-block": string;
+    readonly "list-row-gap": string;
+    readonly "toolbar-gap": string;
+    readonly "narrow-width": string;
+    readonly "editable-list-stack-width": string;
+    readonly "selection-column-width": string;
+  };
   readonly "drawer": {
     readonly "popup-size": string;
     readonly "popup-max-size": string;
@@ -2661,6 +2736,17 @@ declare const tokens: {
     readonly "handle-width": string;
     readonly "handle-height": string;
   };
+  readonly "list-detail": {
+    readonly "split-min-width": string;
+    readonly "detail-default-size": string;
+    readonly "detail-min-size": string;
+    readonly "detail-max-size": string;
+    readonly "header-gap": string;
+    readonly "header-padding": string;
+  };
+  readonly "money-field": {
+    readonly "picker-min-inline-size": string;
+  };
   readonly "navigation-menu": {
     readonly "popup-min-width": string;
     readonly "column-width": string;
@@ -2677,6 +2763,13 @@ declare const tokens: {
     readonly "thumb-size": string;
     readonly "vertical-height": string;
   };
+  readonly "splitter": {
+    readonly "handle-size": string;
+    readonly "handle-hit-size": string;
+    readonly "grip-size": string;
+    readonly "key-step": string;
+    readonly "key-step-large": string;
+  };
   readonly "switch": {
     readonly "track-width": string;
     readonly "track-width-sm": string;

package/dist/tokens.js

@@ -1637,6 +1637,7 @@ const tokens = {
     "focus-ring-radius": "0.125rem",
     "link-focus-outline-offset": "0.25em",
     "link-focus-ring-radius": "0.125em",
+    "min-target": "24px",
     "min-touch-target": "44px"
   },
   "focus": {
@@ -1663,6 +1664,22 @@ const tokens = {
     "separator-length": "1.5rem",
     "separator-spacing": "0.25rem"
   },
+  "calendar": {
+    "day-size": "2.5rem",
+    "day-radius": "9999px",
+    "day-color": "#221928",
+    "day-color-outside": "#667169",
+    "day-color-disabled": "#bcccc1",
+    "day-background-hover": "#f4e7ff",
+    "range-background": "#e6c6ff",
+    "range-color": "#371e4a",
+    "today-ring": "#8838c4",
+    "weekday-color": "#667169",
+    "grid-gap": "0.125rem",
+    "month-gap": "1rem",
+    "header-gap": "0.5rem",
+    "panel-padding": "1rem"
+  },
   "check": {
     "background": "#ffffff",
     "border-color": "#7c8980",
@@ -1792,6 +1809,34 @@ const tokens = {
     "xl": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
     "xs": "0 0 0 1px rgba(0, 0, 0, 0.05)"
   },
+  "empty": {
+    "padding-block": {
+      "compact": "1.5rem",
+      "standard": "2.5rem",
+      "spacious": "4rem"
+    },
+    "padding-inline": {
+      "compact": "1rem",
+      "standard": "1.5rem",
+      "spacious": "2rem"
+    },
+    "gap": {
+      "compact": "0.75rem",
+      "standard": "1rem",
+      "spacious": "1.5rem"
+    },
+    "text-gap": {
+      "compact": "0.25rem",
+      "standard": "0.25rem",
+      "spacious": "0.5rem"
+    },
+    "media-size": {
+      "standard": "3rem",
+      "spacious": "4rem"
+    },
+    "description-max-width": "45ch",
+    "actions-gap": "0.5rem"
+  },
   "field": {
     "background": "#ffffff",
     "background-disabled": "#f6f9f6",
@@ -1810,7 +1855,8 @@ const tokens = {
     "gap": "0.375rem",
     "label-spacing": "0.25rem",
     "message-spacing": "0.25rem",
-    "opacity-disabled": "0.6"
+    "opacity-disabled": "0.6",
+    "affix-color": "#4f5852"
   },
   "gauge": {
     "track-color": "#eff3ee",
@@ -1961,6 +2007,8 @@ const tokens = {
     "row-border-color": "#eff3ee",
     "row-hover": "#f4e7ff",
     "row-selected": "#e6c6ff",
+    "row-current": "#f8fbf9",
+    "group-header-background": "#f8fbf9",
     "column-hover": "#eff3ee",
     "range-background": "#fdfaff",
     "range-border": "#8838c4",
@@ -2650,10 +2698,37 @@ const tokens = {
     "initials-font-size-lg": "clamp(1rem, 0.9333rem + 0.3333vw, 1.2rem)",
     "initials-font-size-xl": "clamp(1.44rem, 1.344rem + 0.48vw, 1.728rem)"
   },
+  "badge": {
+    "height-minimize": "1.25rem",
+    "height-condense": "1.5rem",
+    "height-base": "1.75rem",
+    "padding-inline-minimize": "0.25rem",
+    "padding-inline-condense": "0.375rem",
+    "padding-inline-base": "0.5rem",
+    "gap-minimize": "0.25rem",
+    "gap-condense": "0.25rem",
+    "gap-base": "0.375rem",
+    "dot-minimize": "0.375rem",
+    "dot-condense": "0.5rem",
+    "dot-base": "0.5rem"
+  },
   "button": {
     "radius": "9999px",
     "opacity-disabled": "0.5"
   },
+  "collection": {
+    "row-height-sm": "2.25rem",
+    "row-height-md": "2.75rem",
+    "header-height-sm": "2.75rem",
+    "header-height-md": "3.25rem",
+    "tree-indent": "1rem",
+    "list-row-padding-block": "0.75rem",
+    "list-row-gap": "0.5rem",
+    "toolbar-gap": "0.5rem",
+    "narrow-width": "24rem",
+    "editable-list-stack-width": "20rem",
+    "selection-column-width": "2.5rem"
+  },
   "drawer": {
     "popup-size": "min(420px, 90vw)",
     "popup-max-size": "85vh",
@@ -2661,6 +2736,17 @@ const tokens = {
     "handle-width": "2.5rem",
     "handle-height": "0.25rem"
   },
+  "list-detail": {
+    "split-min-width": "720px",
+    "detail-default-size": "45%",
+    "detail-min-size": "35%",
+    "detail-max-size": "65%",
+    "header-gap": "0.75rem",
+    "header-padding": "1rem"
+  },
+  "money-field": {
+    "picker-min-inline-size": "14rem"
+  },
   "navigation-menu": {
     "popup-min-width": "400px",
     "column-width": "12rem"
@@ -2677,6 +2763,13 @@ const tokens = {
     "thumb-size": "1.25rem",
     "vertical-height": "200px"
   },
+  "splitter": {
+    "handle-size": "1px",
+    "handle-hit-size": "44px",
+    "grip-size": "0.25rem",
+    "key-step": "5%",
+    "key-step-large": "10%"
+  },
   "switch": {
     "track-width": "48px",
     "track-width-sm": "44px",