@scattered-light/loomiere-base-ui 0.3.0 → 0.4.0

package/dist/styles/components/Button.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.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
@@ -11,11 +11,11 @@
    ============================================ */
 
 .Button {
-  font-family: var(--sl-font-base-trigger-font-family);
-  font-size: var(--sl-font-base-trigger-font-size);
-  font-weight: var(--sl-font-base-trigger-font-weight);
-  line-height: var(--sl-font-base-trigger-line-height);
-  letter-spacing: var(--sl-font-base-trigger-letter-spacing);
+  font-family: var(--sl-font-trigger-base-font-family);
+  font-size: var(--sl-font-trigger-base-font-size);
+  font-weight: var(--sl-font-trigger-base-font-weight);
+  line-height: var(--sl-font-trigger-base-line-height);
+  letter-spacing: var(--sl-font-trigger-base-letter-spacing);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -96,11 +96,11 @@
    ============================================ */
 
 .Button[data-size='xs'] {
-  font-family: var(--sl-font-minimize-trigger-font-family);
-  font-size: var(--sl-font-minimize-trigger-font-size);
-  font-weight: var(--sl-font-minimize-trigger-font-weight);
-  line-height: var(--sl-font-minimize-trigger-line-height);
-  letter-spacing: var(--sl-font-minimize-trigger-letter-spacing);
+  font-family: var(--sl-font-trigger-minimize-font-family);
+  font-size: var(--sl-font-trigger-minimize-font-size);
+  font-weight: var(--sl-font-trigger-minimize-font-weight);
+  line-height: var(--sl-font-trigger-minimize-line-height);
+  letter-spacing: var(--sl-font-trigger-minimize-letter-spacing);
   gap: var(--sl-gap-control-xs);
   height: var(--sl-control-height-xs);
   padding-inline: var(--sl-control-padding-inline-xs);
@@ -114,11 +114,11 @@
 }
 
 .Button[data-size='sm'] {
-  font-family: var(--sl-font-condense-trigger-font-family);
-  font-size: var(--sl-font-condense-trigger-font-size);
-  font-weight: var(--sl-font-condense-trigger-font-weight);
-  line-height: var(--sl-font-condense-trigger-line-height);
-  letter-spacing: var(--sl-font-condense-trigger-letter-spacing);
+  font-family: var(--sl-font-trigger-condense-font-family);
+  font-size: var(--sl-font-trigger-condense-font-size);
+  font-weight: var(--sl-font-trigger-condense-font-weight);
+  line-height: var(--sl-font-trigger-condense-line-height);
+  letter-spacing: var(--sl-font-trigger-condense-letter-spacing);
   gap: var(--sl-gap-control-sm);
   height: var(--sl-control-height-sm);
   padding-inline: var(--sl-control-padding-inline-sm);
@@ -132,11 +132,11 @@
 }
 
 .Button[data-size='lg'] {
-  font-family: var(--sl-font-magnify-trigger-font-family);
-  font-size: var(--sl-font-magnify-trigger-font-size);
-  font-weight: var(--sl-font-magnify-trigger-font-weight);
-  line-height: var(--sl-font-magnify-trigger-line-height);
-  letter-spacing: var(--sl-font-magnify-trigger-letter-spacing);
+  font-family: var(--sl-font-trigger-magnify-font-family);
+  font-size: var(--sl-font-trigger-magnify-font-size);
+  font-weight: var(--sl-font-trigger-magnify-font-weight);
+  line-height: var(--sl-font-trigger-magnify-line-height);
+  letter-spacing: var(--sl-font-trigger-magnify-letter-spacing);
   height: var(--sl-control-height-lg);
   padding-inline: var(--sl-control-padding-inline-lg);
 }

package/dist/styles/components/Checkbox.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.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.
@@ -15,28 +15,28 @@
   color: var(--sl-text-primary);
   cursor: pointer;
   user-select: none;
-  font-family: var(--sl-font-base-font-family);
-  font-size: var(--sl-font-base-font-size);
-  font-weight: var(--sl-font-base-font-weight);
-  line-height: var(--sl-font-base-line-height);
-  letter-spacing: var(--sl-font-base-letter-spacing);
+  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);
   min-height: var(--sl-control-height-md); /* Tap target */
 }
 
 .CheckboxLabel:has(.CheckboxRoot[data-size='sm']) {
-  font-family: var(--sl-font-condense-font-family);
-  font-size: var(--sl-font-condense-font-size);
-  font-weight: var(--sl-font-condense-font-weight);
-  line-height: var(--sl-font-condense-line-height);
-  letter-spacing: var(--sl-font-condense-letter-spacing);
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
 }
 
 .CheckboxLabel:has(.CheckboxRoot[data-size='lg']) {
-  font-family: var(--sl-font-magnify-font-family);
-  font-size: var(--sl-font-magnify-font-size);
-  font-weight: var(--sl-font-magnify-font-weight);
-  line-height: var(--sl-font-magnify-line-height);
-  letter-spacing: var(--sl-font-magnify-letter-spacing);
+  font-family: var(--sl-font-body-magnify-font-family);
+  font-size: var(--sl-font-body-magnify-font-size);
+  font-weight: var(--sl-font-body-magnify-font-weight);
+  line-height: var(--sl-font-body-magnify-line-height);
+  letter-spacing: var(--sl-font-body-magnify-letter-spacing);
 }
 
 .CheckboxLabel:has(.CheckboxRoot[data-disabled]) {

package/dist/styles/components/CheckboxGroup.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.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. */

package/dist/styles/components/Collapsible.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Collapsible - Mojave Theme
  *
  * No component tokens. Hover, press, chevron and motion are the disclosure concept
@@ -13,11 +13,11 @@
 
 .CollapsibleTrigger {
   all: unset;
-  font-family: var(--sl-font-base-subtitle-font-family);
-  font-size: var(--sl-font-base-subtitle-font-size);
-  font-weight: var(--sl-font-base-subtitle-font-weight);
-  line-height: var(--sl-font-base-subtitle-line-height);
-  letter-spacing: var(--sl-font-base-subtitle-letter-spacing);
+  font-family: var(--sl-font-subtitle-base-font-family);
+  font-size: var(--sl-font-subtitle-base-font-size);
+  font-weight: var(--sl-font-subtitle-base-font-weight);
+  line-height: var(--sl-font-subtitle-base-line-height);
+  letter-spacing: var(--sl-font-subtitle-base-letter-spacing);
   box-sizing: border-box;
   display: flex;
   align-items: center;
@@ -81,11 +81,11 @@
 
 /* Content starts under the trigger's text: its padding, the chevron and the gap. */
 .CollapsibleContent {
-  font-family: var(--sl-font-base-font-family);
-  font-size: var(--sl-font-base-font-size);
-  font-weight: var(--sl-font-base-font-weight);
-  line-height: var(--sl-font-base-line-height);
-  letter-spacing: var(--sl-font-base-letter-spacing);
+  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: flex;
   flex-direction: column;
   gap: var(--sl-space-2);
@@ -102,11 +102,11 @@
 }
 
 .CollapsibleContent code {
-  font-family: var(--sl-font-code-font-family);
-  font-size: var(--sl-font-code-font-size);
-  font-weight: var(--sl-font-code-font-weight);
-  line-height: var(--sl-font-code-line-height);
-  letter-spacing: var(--sl-font-code-letter-spacing);
+  font-family: var(--sl-font-code-condense-font-family);
+  font-size: var(--sl-font-code-condense-font-size);
+  font-weight: var(--sl-font-code-condense-font-weight);
+  line-height: var(--sl-font-code-condense-line-height);
+  letter-spacing: var(--sl-font-code-condense-letter-spacing);
   display: block;
   margin-top: var(--sl-space-2);
   padding: var(--sl-space-2);

package/dist/styles/components/Combobox.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.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
@@ -22,11 +22,11 @@
 }
 
 .ComboboxLabel {
-  font-family: var(--sl-font-base-label-font-family);
-  font-size: var(--sl-font-base-label-font-size);
-  font-weight: var(--sl-font-base-label-font-weight);
-  line-height: var(--sl-font-base-label-line-height);
-  letter-spacing: var(--sl-font-base-label-letter-spacing);
+  font-family: var(--sl-font-label-base-font-family);
+  font-size: var(--sl-font-label-base-font-size);
+  font-weight: var(--sl-font-label-base-font-weight);
+  line-height: var(--sl-font-label-base-line-height);
+  letter-spacing: var(--sl-font-label-base-letter-spacing);
   display: flex;
   flex-direction: column;
   gap: var(--sl-field-label-spacing);
@@ -85,11 +85,11 @@
 }
 
 .ComboboxChip {
-  font-family: var(--sl-font-condense-font-family);
-  font-size: var(--sl-font-condense-font-size);
-  font-weight: var(--sl-font-condense-font-weight);
-  line-height: var(--sl-font-condense-line-height);
-  letter-spacing: var(--sl-font-condense-letter-spacing);
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
   display: flex;
   align-items: center;
   gap: var(--sl-space-1);
@@ -257,11 +257,11 @@
   user-select: none;
   outline: none;
   transition: var(--sl-item-transition);
-  font-family: var(--sl-font-base-font-family);
-  font-size: var(--sl-font-base-font-size);
-  font-weight: var(--sl-font-base-font-weight);
-  line-height: var(--sl-font-base-line-height);
-  letter-spacing: var(--sl-font-base-letter-spacing);
+  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);
   cursor: pointer;
   list-style: none;
 }
@@ -273,11 +273,11 @@
 }
 
 .ComboboxItem[data-selected] {
-  font-family: var(--sl-font-base-selected-font-family);
-  font-size: var(--sl-font-base-selected-font-size);
-  font-weight: var(--sl-font-base-selected-font-weight);
-  line-height: var(--sl-font-base-selected-line-height);
-  letter-spacing: var(--sl-font-base-selected-letter-spacing);
+  font-family: var(--sl-font-selected-base-font-family);
+  font-size: var(--sl-font-selected-base-font-size);
+  font-weight: var(--sl-font-selected-base-font-weight);
+  line-height: var(--sl-font-selected-base-line-height);
+  letter-spacing: var(--sl-font-selected-base-letter-spacing);
   background: var(--sl-item-background-selected);
   color: var(--sl-item-color-selected);
 }
@@ -313,12 +313,12 @@
    ============================================ */
 
 .ComboboxGroupLabel {
-  font-family: var(--sl-font-condense-subtitle-label-font-family);
-  font-size: var(--sl-font-condense-subtitle-label-font-size);
-  font-weight: var(--sl-font-condense-subtitle-label-font-weight);
-  line-height: var(--sl-font-condense-subtitle-label-line-height);
-  letter-spacing: var(--sl-font-condense-subtitle-label-letter-spacing);
-  text-transform: var(--sl-font-condense-subtitle-label-text-transform);
+  font-family: var(--sl-font-eyebrow-condense-font-family);
+  font-size: var(--sl-font-eyebrow-condense-font-size);
+  font-weight: var(--sl-font-eyebrow-condense-font-weight);
+  line-height: var(--sl-font-eyebrow-condense-line-height);
+  letter-spacing: var(--sl-font-eyebrow-condense-letter-spacing);
+  text-transform: var(--sl-font-eyebrow-condense-text-transform);
   padding-block: var(--sl-popup-group-label-padding-top) var(--sl-popup-group-label-padding-bottom);
   padding-inline: var(--sl-item-padding-inline);
   color: var(--sl-text-secondary);
@@ -332,11 +332,11 @@
 }
 
 .ComboboxEmpty:not(:empty) {
-  font-family: var(--sl-font-condense-font-family);
-  font-size: var(--sl-font-condense-font-size);
-  font-weight: var(--sl-font-condense-font-weight);
-  line-height: var(--sl-font-condense-line-height);
-  letter-spacing: var(--sl-font-condense-letter-spacing);
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
   padding-block: var(--sl-popup-empty-padding-block);
   padding-inline: var(--sl-item-padding-inline);
   color: var(--sl-text-tertiary);
@@ -347,11 +347,11 @@
    and shown while results load or when it has a message. */
 .ComboboxPopup[aria-busy] .ComboboxStatus,
 .ComboboxStatus:not(:empty) {
-  font-family: var(--sl-font-condense-font-family);
-  font-size: var(--sl-font-condense-font-size);
-  font-weight: var(--sl-font-condense-font-weight);
-  line-height: var(--sl-font-condense-line-height);
-  letter-spacing: var(--sl-font-condense-letter-spacing);
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
   position: static;
   width: auto;
   height: auto;
@@ -383,11 +383,11 @@
   border-radius: var(--sl-field-radius);
   transition: var(--sl-field-transition);
   outline: none;
-  font-family: var(--sl-font-base-font-family);
-  font-size: var(--sl-font-base-font-size);
-  font-weight: var(--sl-font-base-font-weight);
-  line-height: var(--sl-font-base-line-height);
-  letter-spacing: var(--sl-font-base-letter-spacing);
+  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: flex;
   align-items: center;
   justify-content: space-between;
@@ -444,20 +444,20 @@
 }
 
 .ComboboxItemTitle {
-  font-family: var(--sl-font-base-trigger-font-family);
-  font-size: var(--sl-font-base-trigger-font-size);
-  font-weight: var(--sl-font-base-trigger-font-weight);
-  line-height: var(--sl-font-base-trigger-line-height);
-  letter-spacing: var(--sl-font-base-trigger-letter-spacing);
+  font-family: var(--sl-font-trigger-base-font-family);
+  font-size: var(--sl-font-trigger-base-font-size);
+  font-weight: var(--sl-font-trigger-base-font-weight);
+  line-height: var(--sl-font-trigger-base-line-height);
+  letter-spacing: var(--sl-font-trigger-base-letter-spacing);
   color: var(--sl-text-primary);
 }
 
 .ComboboxItemSubtitle {
-  font-family: var(--sl-font-condense-font-family);
-  font-size: var(--sl-font-condense-font-size);
-  font-weight: var(--sl-font-condense-font-weight);
-  line-height: var(--sl-font-condense-line-height);
-  letter-spacing: var(--sl-font-condense-letter-spacing);
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
   display: flex;
   gap: var(--sl-space-2);
   margin-top: var(--sl-space-0-5);
@@ -465,20 +465,20 @@
 }
 
 .ComboboxItemUsername {
-  font-family: var(--sl-font-base-label-font-family);
-  font-size: var(--sl-font-base-label-font-size);
-  font-weight: var(--sl-font-base-label-font-weight);
-  line-height: var(--sl-font-base-label-line-height);
-  letter-spacing: var(--sl-font-base-label-letter-spacing);
+  font-family: var(--sl-font-label-base-font-family);
+  font-size: var(--sl-font-label-base-font-size);
+  font-weight: var(--sl-font-label-base-font-weight);
+  line-height: var(--sl-font-label-base-line-height);
+  letter-spacing: var(--sl-font-label-base-letter-spacing);
   color: var(--sl-interactive-default);
 }
 
 .ComboboxItemEmail {
-  font-family: var(--sl-font-minimize-font-family);
-  font-size: var(--sl-font-minimize-font-size);
-  font-weight: var(--sl-font-minimize-font-weight);
-  line-height: var(--sl-font-minimize-line-height);
-  letter-spacing: var(--sl-font-minimize-letter-spacing);
+  font-family: var(--sl-font-body-minimize-font-family);
+  font-size: var(--sl-font-body-minimize-font-size);
+  font-weight: var(--sl-font-body-minimize-font-weight);
+  line-height: var(--sl-font-body-minimize-line-height);
+  letter-spacing: var(--sl-font-body-minimize-letter-spacing);
   margin-top: var(--sl-space-0-5);
   color: var(--sl-text-tertiary);
 }

package/dist/styles/components/ContextMenu.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.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
@@ -57,11 +57,11 @@
   user-select: none;
   outline: none;
   transition: var(--sl-item-transition);
-  font-family: var(--sl-font-base-font-family);
-  font-size: var(--sl-font-base-font-size);
-  font-weight: var(--sl-font-base-font-weight);
-  line-height: var(--sl-font-base-line-height);
-  letter-spacing: var(--sl-font-base-letter-spacing);
+  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);
   padding-block: var(--sl-item-padding-block-dense);
   cursor: pointer;
   list-style: none;
@@ -124,12 +124,12 @@
 }
 
 .ContextMenuGroupLabel {
-  font-family: var(--sl-font-condense-subtitle-label-font-family);
-  font-size: var(--sl-font-condense-subtitle-label-font-size);
-  font-weight: var(--sl-font-condense-subtitle-label-font-weight);
-  line-height: var(--sl-font-condense-subtitle-label-line-height);
-  letter-spacing: var(--sl-font-condense-subtitle-label-letter-spacing);
-  text-transform: var(--sl-font-condense-subtitle-label-text-transform);
+  font-family: var(--sl-font-eyebrow-condense-font-family);
+  font-size: var(--sl-font-eyebrow-condense-font-size);
+  font-weight: var(--sl-font-eyebrow-condense-font-weight);
+  line-height: var(--sl-font-eyebrow-condense-line-height);
+  letter-spacing: var(--sl-font-eyebrow-condense-letter-spacing);
+  text-transform: var(--sl-font-eyebrow-condense-text-transform);
   padding-block: var(--sl-popup-group-label-padding-top) var(--sl-popup-group-label-padding-bottom);
   padding-inline: var(--sl-item-padding-inline);
   color: var(--sl-text-secondary);

package/dist/styles/components/Dialog.css

@@ -1,8 +1,8 @@
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.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):
- * the modal-surface and modal-backdrop patterns, the maximize-xl heading and base
+ * the modal-surface and modal-backdrop patterns, the title-amplify heading and base
  * description. Alert dialog shares every rule here; AlertDialog.css adds nothing of
  * its own. Action buttons are plain .Button elements, so they follow the emphasis levels.
  */
@@ -92,11 +92,11 @@
 /* Title */
 .DialogTitle,
 .AlertDialogTitle {
-  font-family: var(--sl-font-maximize-xl-font-family);
-  font-size: var(--sl-font-maximize-xl-font-size);
-  font-weight: var(--sl-font-maximize-xl-font-weight);
-  line-height: var(--sl-font-maximize-xl-line-height);
-  letter-spacing: var(--sl-font-maximize-xl-letter-spacing);
+  font-family: var(--sl-font-title-amplify-font-family);
+  font-size: var(--sl-font-title-amplify-font-size);
+  font-weight: var(--sl-font-title-amplify-font-weight);
+  line-height: var(--sl-font-title-amplify-line-height);
+  letter-spacing: var(--sl-font-title-amplify-letter-spacing);
   color: var(--sl-modal-title-color);
   margin: 0;
 }
@@ -104,11 +104,11 @@
 /* Description */
 .DialogDescription,
 .AlertDialogDescription {
-  font-family: var(--sl-font-base-font-family);
-  font-size: var(--sl-font-base-font-size);
-  font-weight: var(--sl-font-base-font-weight);
-  line-height: var(--sl-font-base-line-height);
-  letter-spacing: var(--sl-font-base-letter-spacing);
+  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);
   color: var(--sl-modal-description-color);
   margin: 0;
 }

package/dist/styles/components/Drawer.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.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
@@ -106,21 +106,21 @@
 }
 
 .DrawerTitle {
-  font-family: var(--sl-font-maximize-xl-font-family);
-  font-size: var(--sl-font-maximize-xl-font-size);
-  font-weight: var(--sl-font-maximize-xl-font-weight);
-  line-height: var(--sl-font-maximize-xl-line-height);
-  letter-spacing: var(--sl-font-maximize-xl-letter-spacing);
+  font-family: var(--sl-font-title-amplify-font-family);
+  font-size: var(--sl-font-title-amplify-font-size);
+  font-weight: var(--sl-font-title-amplify-font-weight);
+  line-height: var(--sl-font-title-amplify-line-height);
+  letter-spacing: var(--sl-font-title-amplify-letter-spacing);
   margin: 0;
   color: var(--sl-modal-title-color);
 }
 
 .DrawerDescription {
-  font-family: var(--sl-font-base-font-family);
-  font-size: var(--sl-font-base-font-size);
-  font-weight: var(--sl-font-base-font-weight);
-  line-height: var(--sl-font-base-line-height);
-  letter-spacing: var(--sl-font-base-letter-spacing);
+  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);
   margin: 0;
   color: var(--sl-modal-description-color);
 }

package/dist/styles/components/Field.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
 /* Field - Mojave Theme
  *
  * Label, control, description and error. No component tokens: spacing is the field
@@ -20,11 +20,11 @@
 
 .FieldLabel,
 .NumberFieldLabel {
-  font-family: var(--sl-font-base-label-font-family);
-  font-size: var(--sl-font-base-label-font-size);
-  font-weight: var(--sl-font-base-label-font-weight);
-  line-height: var(--sl-font-base-label-line-height);
-  letter-spacing: var(--sl-font-base-label-letter-spacing);
+  font-family: var(--sl-font-label-base-font-family);
+  font-size: var(--sl-font-label-base-font-size);
+  font-weight: var(--sl-font-label-base-font-weight);
+  line-height: var(--sl-font-label-base-line-height);
+  letter-spacing: var(--sl-font-label-base-letter-spacing);
   display: block;
   margin-bottom: var(--sl-field-label-spacing);
   color: var(--sl-text-primary);
@@ -32,22 +32,22 @@
 
 .FieldDescription,
 .NumberFieldDescription {
-  font-family: var(--sl-font-condense-font-family);
-  font-size: var(--sl-font-condense-font-size);
-  font-weight: var(--sl-font-condense-font-weight);
-  line-height: var(--sl-font-condense-line-height);
-  letter-spacing: var(--sl-font-condense-letter-spacing);
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
   margin: var(--sl-field-message-spacing) 0 0;
   color: var(--sl-text-secondary);
 }
 
 .FieldError,
 .NumberFieldError {
-  font-family: var(--sl-font-base-label-font-family);
-  font-size: var(--sl-font-base-label-font-size);
-  font-weight: var(--sl-font-base-label-font-weight);
-  line-height: var(--sl-font-base-label-line-height);
-  letter-spacing: var(--sl-font-base-label-letter-spacing);
+  font-family: var(--sl-font-label-base-font-family);
+  font-size: var(--sl-font-label-base-font-size);
+  font-weight: var(--sl-font-label-base-font-weight);
+  line-height: var(--sl-font-label-base-line-height);
+  letter-spacing: var(--sl-font-label-base-letter-spacing);
   margin: var(--sl-field-message-spacing) 0 0;
   color: var(--sl-status-error);
 }

package/dist/styles/components/Fieldset.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.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
@@ -20,22 +20,22 @@
 }
 
 .FieldsetLegend {
-  font-family: var(--sl-font-maximize-lg-font-family);
-  font-size: var(--sl-font-maximize-lg-font-size);
-  font-weight: var(--sl-font-maximize-lg-font-weight);
-  line-height: var(--sl-font-maximize-lg-line-height);
-  letter-spacing: var(--sl-font-maximize-lg-letter-spacing);
+  font-family: var(--sl-font-title-magnify-font-family);
+  font-size: var(--sl-font-title-magnify-font-size);
+  font-weight: var(--sl-font-title-magnify-font-weight);
+  line-height: var(--sl-font-title-magnify-line-height);
+  letter-spacing: var(--sl-font-title-magnify-letter-spacing);
   margin-bottom: var(--sl-space-block-sm);
   padding: 0;
   color: var(--sl-text-primary);
 }
 
 .FieldsetDescription {
-  font-family: var(--sl-font-condense-font-family);
-  font-size: var(--sl-font-condense-font-size);
-  font-weight: var(--sl-font-condense-font-weight);
-  line-height: var(--sl-font-condense-line-height);
-  letter-spacing: var(--sl-font-condense-letter-spacing);
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
   margin-bottom: var(--sl-space-block-sm);
   color: var(--sl-text-secondary);
 }

package/dist/styles/components/Form.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.4.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