@scattered-light/loomiere-mojave 0.5.3 → 0.7.0

package/dist/exports/tailwind.css

@@ -321,6 +321,7 @@
   --color-field-fg: var(--sl-field-color);
   --color-field-fg-disabled: var(--sl-field-color-disabled);
   --color-field-placeholder: var(--sl-field-placeholder-color);
+  --color-field-affix: var(--sl-field-affix-color);
   --color-item-fg: var(--sl-item-color);
   --color-item-fg-hover: var(--sl-item-color-hover);
   --color-item-fg-selected: var(--sl-item-color-selected);
@@ -359,6 +360,8 @@
   --color-table-row-border: var(--sl-table-row-border-color);
   --color-table-row-hover: var(--sl-table-row-hover);
   --color-table-row-selected: var(--sl-table-row-selected);
+  --color-table-row-current: var(--sl-table-row-current);
+  --color-table-group-header: var(--sl-table-group-header-background);
   --color-table-column-hover: var(--sl-table-column-hover);
   --color-table-range: var(--sl-table-range-background);
   --color-table-range-border: var(--sl-table-range-border);
@@ -984,6 +987,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);
@@ -1012,6 +1022,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);
@@ -1045,10 +1056,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);
 }
 
@@ -1119,6 +1133,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);
@@ -1147,6 +1168,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);
@@ -1180,10 +1202,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);
 }
 
@@ -1254,6 +1279,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);
@@ -1282,6 +1314,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);
@@ -1315,10 +1348,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/exports/tokens.dtcg.json

@@ -7160,6 +7160,10 @@
       "$value": "0.125em",
       "$description": "A slight em-based rounding so inline focus rings hug the text."
     },
+    "min-target": {
+      "$value": "24px",
+      "$description": "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."
+    },
     "min-touch-target": {
       "$value": "44px",
       "$description": "Smallest tap area for any control (WCAG 2.5.5 and Apple HIG both use 44px)."
@@ -7250,6 +7254,78 @@
       "$description": "Extra space either side of a divider."
     }
   },
+  "calendar": {
+    "day-size": {
+      "$type": "dimension",
+      "$value": "{space.10}",
+      "$description": "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."
+    },
+    "day-radius": {
+      "$type": "dimension",
+      "$value": "{radius.pill}",
+      "$description": "Selected days are circles. The pill radius is the same full radius badges and switches use."
+    },
+    "day-color": {
+      "$type": "color",
+      "$value": "{text.primary}",
+      "$description": "A day in the month being shown."
+    },
+    "day-color-outside": {
+      "$type": "color",
+      "$value": "{text.tertiary}",
+      "$description": "A day from the previous or next month, still selectable, drawn back so it does not compete with this month."
+    },
+    "day-color-disabled": {
+      "$type": "color",
+      "$value": "{text.disabled}",
+      "$description": "A day outside the allowed period, or one a length rule rejects. It stays in the tab order so the reason can be read."
+    },
+    "day-background-hover": {
+      "$type": "color",
+      "$value": "{item.background-hover}",
+      "$description": "The same hover tint as a list item, so a day feels like a choice in a list."
+    },
+    "range-background": {
+      "$type": "color",
+      "$value": "{interactive.tint-active}",
+      "$description": "The band between the start and end of a period. Same tint as a selected list item, quieter than the start and end circles."
+    },
+    "range-color": {
+      "$type": "color",
+      "$value": "{text.on-tint-strong}",
+      "$description": "Day numbers that sit on the range band. The on-tint text color is the one that stays readable on interactive.tint-active."
+    },
+    "today-ring": {
+      "$type": "color",
+      "$value": "{border.accent}",
+      "$description": "An inset ring on today, including when today is also selected, so today is never only a color of the number."
+    },
+    "weekday-color": {
+      "$type": "color",
+      "$value": "{text.tertiary}",
+      "$description": "Weekday initials and week numbers are labels, not choices."
+    },
+    "grid-gap": {
+      "$type": "dimension",
+      "$value": "{space.0-5}",
+      "$description": "Space between week rows. Days in a week share an edge, so the range band reads as one shape."
+    },
+    "month-gap": {
+      "$type": "dimension",
+      "$value": "{space.4}",
+      "$description": "Space between months shown side by side, the same step as panel padding so the two columns line up."
+    },
+    "header-gap": {
+      "$type": "dimension",
+      "$value": "{space.2}",
+      "$description": "Space between the month title and the weekday row."
+    },
+    "panel-padding": {
+      "$type": "dimension",
+      "$value": "{space.4}",
+      "$description": "Padding inside the popup. The shared popup padding is one step and is too tight for a calendar."
+    }
+  },
   "check": {
     "background": {
       "$value": "{field.background}",
@@ -7762,6 +7838,82 @@
       "$value": "{shadow.xs}"
     }
   },
+  "empty": {
+    "padding-block": {
+      "compact": {
+        "$value": "{space.6}",
+        "$description": "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."
+      },
+      "standard": {
+        "$value": "{space.10}",
+        "$description": "40px. A pane or a section needs more air than a table row, or the block looks stuck to the content around it."
+      },
+      "spacious": {
+        "$value": "{space.16}",
+        "$description": "64px. A page with nothing else on it. The extra space above keeps the block off the top of the viewport."
+      }
+    },
+    "padding-inline": {
+      "compact": {
+        "$value": "{space.4}",
+        "$description": "16px. Enough that a compact row doesn't touch the cell or popup edge."
+      },
+      "standard": {
+        "$value": "{space.6}",
+        "$description": "24px. A pane can be wide; the inline padding keeps the block off the sides before the description's own cap does."
+      },
+      "spacious": {
+        "$value": "{space.8}",
+        "$description": "32px. A full page, a step wider than a pane."
+      }
+    },
+    "gap": {
+      "compact": {
+        "$value": "{space.3}",
+        "$description": "12px between the icon, the text and the actions in a table row or a popup. Tight, because the row is short."
+      },
+      "standard": {
+        "$value": "{space.4}",
+        "$description": "16px. The stack in a pane: media, then words, then actions."
+      },
+      "spacious": {
+        "$value": "{space.6}",
+        "$description": "24px. A page-sized stack needs the steps to separate, or the circle sits on the title."
+      }
+    },
+    "text-gap": {
+      "compact": {
+        "$value": "{space.1}",
+        "$description": "4px between the title and the description in a compact row. They read as one message."
+      },
+      "standard": {
+        "$value": "{space.1}",
+        "$description": "4px. Same as compact: the description belongs to the title, so it stays close."
+      },
+      "spacious": {
+        "$value": "{space.2}",
+        "$description": "8px. The page title is larger, so the description steps down a little further."
+      }
+    },
+    "media-size": {
+      "standard": {
+        "$value": "{space.12}",
+        "$description": "48px circle around a magnify icon (20px). The icon needs a field, or it reads as a bullet."
+      },
+      "spacious": {
+        "$value": "{space.16}",
+        "$description": "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."
+      }
+    },
+    "description-max-width": {
+      "$value": "{measure.narrow}",
+      "$description": "45ch. A description is one sentence. Past a caption's measure it stretches across a wide pane and stops being a sentence."
+    },
+    "actions-gap": {
+      "$value": "{space.2}",
+      "$description": "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."
+    }
+  },
   "field": {
     "background": {
       "$value": "{surface.base}",
@@ -7834,6 +7986,10 @@
     "opacity-disabled": {
       "$value": "0.6",
       "$description": "A disabled field fades as a whole, label included."
+    },
+    "affix-color": {
+      "$value": "{text.secondary}",
+      "$description": "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."
     }
   },
   "gauge": {
@@ -8210,8 +8366,8 @@
       "$description": "Space between a group label and its first row."
     },
     "empty-padding-block": {
-      "$value": "{space.6}",
-      "$description": "Room around a 'No results' message, so an empty list doesn't collapse to a sliver."
+      "$value": "{empty.padding-block.compact}",
+      "$description": "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."
     },
     "min-width": {
       "$value": "200px",
@@ -8346,6 +8502,14 @@
       "$value": "{item.background-selected}",
       "$description": "Selected rows. Same tint as the chosen menu row."
     },
+    "row-current": {
+      "$value": "{surface.tray}",
+      "$description": "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."
+    },
+    "group-header-background": {
+      "$value": "{surface.tray}",
+      "$description": "A group header. The tray, like the column header, so a group reads as chrome rather than another data row."
+    },
     "column-hover": {
       "$value": "{fill.subtle}",
       "$description": "Column under the pointer, when column hover is on. Neutral so it never reads as a selection."
@@ -11779,6 +11943,56 @@
       "$description": "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."
     }
   },
+  "badge": {
+    "height-minimize": {
+      "$value": "{space.5}",
+      "$description": "20px. The smallest pill that still holds trigger-minimize."
+    },
+    "height-condense": {
+      "$value": "{space.6}",
+      "$description": "24px, the default. Sits in a line of text and in dense rows."
+    },
+    "height-base": {
+      "$value": "{space.7}",
+      "$description": "28px, the small control height, for a badge beside base text."
+    },
+    "padding-inline-minimize": {
+      "$value": "{space.1}",
+      "$description": "4px. Tighter than a control so a short label stays a pill, not a button."
+    },
+    "padding-inline-condense": {
+      "$value": "{space.1-5}",
+      "$description": "6px, the default."
+    },
+    "padding-inline-base": {
+      "$value": "{space.2}",
+      "$description": "8px, still inside the small control's inline padding."
+    },
+    "gap-minimize": {
+      "$value": "{space.1}",
+      "$description": "4px between a dot or icon and the label at the smallest size."
+    },
+    "gap-condense": {
+      "$value": "{space.1}",
+      "$description": "4px, the default. The same gap as the smallest control."
+    },
+    "gap-base": {
+      "$value": "{space.1-5}",
+      "$description": "6px, a step wider once the label is base-sized."
+    },
+    "dot-minimize": {
+      "$value": "{space.1-5}",
+      "$description": "6px status dot. Smaller than icon-size-minimize so it reads as a mark, not an icon."
+    },
+    "dot-condense": {
+      "$value": "{space.2}",
+      "$description": "8px, the default."
+    },
+    "dot-base": {
+      "$value": "{space.2}",
+      "$description": "8px. The base badge is taller, but the dot stays a mark."
+    }
+  },
   "button": {
     "radius": {
       "$value": "{radius.pill}",
@@ -11789,6 +12003,52 @@
       "$description": "A disabled button fades as a whole, keeping its shape so the layout doesn't jump."
     }
   },
+  "collection": {
+    "row-height-sm": {
+      "$value": "{control.height-sm}",
+      "$description": "The dense row, the same height the plain table already uses, so a checkbox fits."
+    },
+    "row-height-md": {
+      "$value": "{control.height-md}",
+      "$description": "A roomier row when the collection is the page rather than a dense register."
+    },
+    "header-height-sm": {
+      "$value": "{control.height-md}",
+      "$description": "The dense header, a step above the dense row, matching today's table header."
+    },
+    "header-height-md": {
+      "$value": "{control.height-lg}",
+      "$description": "The header for the roomier row."
+    },
+    "tree-indent": {
+      "$value": "{space.4}",
+      "$description": "How far each deeper level steps in, so a child sits under its parent's text."
+    },
+    "list-row-padding-block": {
+      "$value": "{space.3}",
+      "$description": "Vertical padding of a list row. The row is not a fixed height, because a second line and an extra slot have to fit."
+    },
+    "list-row-gap": {
+      "$value": "{space.2}",
+      "$description": "Between the checkbox, the text, the amount and the actions in a list row."
+    },
+    "toolbar-gap": {
+      "$value": "{space.2}",
+      "$description": "Between the search, the filters and the actions."
+    },
+    "narrow-width": {
+      "$value": "{space.96}",
+      "$description": "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."
+    },
+    "editable-list-stack-width": {
+      "$value": "{space.80}",
+      "$description": "Below this, editable rows stack and show their own labels. 320px matches."
+    },
+    "selection-column-width": {
+      "$value": "{space.10}",
+      "$description": "The checkbox column. Wide enough for the control, no wider, so the data keeps the room."
+    }
+  },
   "drawer": {
     "popup-size": {
       "$value": "min(420px, 90vw)",
@@ -11812,6 +12072,38 @@
       "$description": "Grab bar thickness."
     }
   },
+  "list-detail": {
+    "split-min-width": {
+      "$value": "720px",
+      "$description": "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."
+    },
+    "detail-default-size": {
+      "$value": "45%",
+      "$description": "The detail's share when it opens. The list fills the rest, about 55%, which is the split Dryden started from."
+    },
+    "detail-min-size": {
+      "$value": "35%",
+      "$description": "The detail cannot be dragged narrower than this, so the form stays readable."
+    },
+    "detail-max-size": {
+      "$value": "65%",
+      "$description": "The detail cannot cover more than this, so the list stays usable. Dryden kept the detail between 35% and 65%."
+    },
+    "header-gap": {
+      "$value": "{space.3}",
+      "$description": "Space between the title, the actions and Close."
+    },
+    "header-padding": {
+      "$value": "{space.4}",
+      "$description": "Padding inside the detail header. One step under a dialog, because this is a pane, not a modal."
+    }
+  },
+  "money-field": {
+    "picker-min-inline-size": {
+      "$value": "{space.56}",
+      "$description": "The currency list shows a code, a name and a symbol, so the popup is wider than the code trigger inside the field."
+    }
+  },
   "navigation-menu": {
     "popup-min-width": {
       "$value": "400px",
@@ -11852,6 +12144,28 @@
       "$description": "Default length of a vertical slider."
     }
   },
+  "splitter": {
+    "handle-size": {
+      "$value": "{stroke.default}",
+      "$description": "The visible separator. One stroke, the same hairline as Separator, so a splitter reads as a divider you can grab."
+    },
+    "handle-hit-size": {
+      "$value": "{a11y.min-touch-target}",
+      "$description": "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."
+    },
+    "grip-size": {
+      "$value": "{space.1}",
+      "$description": "4px. The diameter of one grip dot. Small enough to sit on the hairline without becoming a second control."
+    },
+    "key-step": {
+      "$value": "5%",
+      "$description": "One arrow press moves the handle by 5% of the splitter. Dryden used 5%: a nudge you can see, not a jump."
+    },
+    "key-step-large": {
+      "$value": "10%",
+      "$description": "The Shift step. Twice the arrow step, so a few presses cross the panel without holding the key."
+    }
+  },
   "switch": {
     "track-width": {
       "$value": "48px",