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

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as _base_ui_react_field from '@base-ui/react/field';
+import * as _base_ui_react_button from '@base-ui/react/button';
 import { Button as Button$1 } from '@base-ui/react/button';
 import * as _base_ui_react_input from '@base-ui/react/input';
 import { Input as Input$1 } from '@base-ui/react/input';
@@ -39,10 +40,20 @@ type ButtonProps = React.ComponentProps<typeof Button$1> & {
 };
 /**
  * Base UI [Button](https://base-ui.com/react/components/button) with design-system `Button` classes.
- * Icon-only buttons must include a visible label for assistive tech (`aria-label` or `aria-labelledby`).
+ * A button holding only an icon gets `data-icon-only` and is drawn square (a circle, with the pill
+ * corners). Icon-only buttons must include a label for assistive tech (`aria-label` or `aria-labelledby`).
  */
 declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 
+type IconButtonProps = React.ComponentProps<typeof Button$1>;
+/**
+ * A small, quiet icon-only button: the icon-button concept (the X that closes a dialog, a field's
+ * clear button) as a part of its own, for calendar arrows, row actions and other controls that a
+ * full Button would make too loud. Base UI [Button](https://base-ui.com/react/components/button)
+ * with the `IconButton` class. Always give it `aria-label` or `aria-labelledby`.
+ */
+declare const IconButton: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_react_button.ButtonProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+
 type InputProps = React.ComponentProps<typeof Input$1>;
 /**
  * Base UI [Input](https://base-ui.com/react/components/input) with design-system `Input` classes.
@@ -104,4 +115,4 @@ type FieldControlProps = React.ComponentProps<typeof Field.Control>;
 type FieldValidityProps = React.ComponentProps<typeof Field.Validity>;
 type FieldItemProps = React.ComponentProps<typeof Field.Item>;
 
-export { Button, type ButtonProps, Field, type FieldControlProps, type FieldDescriptionProps, type FieldErrorProps, type FieldItemProps, type FieldLabelProps, type FieldRootProps, type FieldValidityProps, Fieldset, FieldsetDescription, type FieldsetDescriptionProps, type FieldsetLegendProps, type FieldsetRootProps, Form, FormActions, type FormActionsProps, type FormProps, Input, type InputProps, NavigationMenu, type NavigationMenuListProps, type NavigationMenuRootProps, cn, cnState };
+export { Button, type ButtonProps, Field, type FieldControlProps, type FieldDescriptionProps, type FieldErrorProps, type FieldItemProps, type FieldLabelProps, type FieldRootProps, type FieldValidityProps, Fieldset, FieldsetDescription, type FieldsetDescriptionProps, type FieldsetLegendProps, type FieldsetRootProps, Form, FormActions, type FormActionsProps, type FormProps, IconButton, type IconButtonProps, Input, type InputProps, NavigationMenu, type NavigationMenuListProps, type NavigationMenuRootProps, cn, cnState };

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.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.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.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.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.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.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.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.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.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.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.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.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.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.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.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.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
@@ -1101,7 +1101,7 @@ button,
   }
 }
 
-/* @scattered-light/loomiere-base-ui 0.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.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
@@ -1135,9 +1135,23 @@ button,
   user-select: none;
 }
 
-.Button svg {
+.Button svg,
+.Button .material-symbols-outlined {
   width: var(--sl-icon-size-magnify);
   height: var(--sl-icon-size-magnify);
+  font-size: var(--sl-icon-size-magnify);
+  line-height: 1;
+}
+
+/* Icon only: square, so the pill corners make a circle instead of a wide oval. The Button
+   wrapper sets data-icon-only when its only child is an icon. A plain .Button (a Popover or
+   Toolbar trigger) qualifies on its own with an aria-label and a single icon inside, since an
+   icon-only button needs the label anyway; CSS can't see text, so the label is the signal. */
+.Button[data-icon-only],
+.Button[aria-label]:has(> svg:only-child),
+.Button[aria-label]:has(> .material-symbols-outlined:only-child) {
+  aspect-ratio: 1;
+  padding-inline: 0;
 }
 
 /* ============================================
@@ -1195,9 +1209,11 @@ button,
   padding-inline: var(--sl-control-padding-inline-xs);
 }
 
-.Button[data-size='xs'] svg {
+.Button[data-size='xs'] svg,
+.Button[data-size='xs'] .material-symbols-outlined {
   width: var(--sl-icon-size-condense);
   height: var(--sl-icon-size-condense);
+  font-size: var(--sl-icon-size-condense);
 }
 
 .Button[data-size='sm'] {
@@ -1211,9 +1227,11 @@ button,
   padding-inline: var(--sl-control-padding-inline-sm);
 }
 
-.Button[data-size='sm'] svg {
+.Button[data-size='sm'] svg,
+.Button[data-size='sm'] .material-symbols-outlined {
   width: var(--sl-icon-size-base);
   height: var(--sl-icon-size-base);
+  font-size: var(--sl-icon-size-base);
 }
 
 .Button[data-size='lg'] {
@@ -1226,12 +1244,14 @@ button,
   padding-inline: var(--sl-control-padding-inline-lg);
 }
 
-.Button[data-size='lg'] svg {
+.Button[data-size='lg'] svg,
+.Button[data-size='lg'] .material-symbols-outlined {
   width: var(--sl-icon-size-maximize);
   height: var(--sl-icon-size-maximize);
+  font-size: var(--sl-icon-size-maximize);
 }
 
-/* @scattered-light/loomiere-base-ui 0.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.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.
@@ -1388,7 +1408,7 @@ button,
   border-radius: var(--sl-radius-pill);
 }
 
-/* @scattered-light/loomiere-base-ui 0.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.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. */
@@ -1404,7 +1424,7 @@ button,
   pointer-events: none;
 }
 
-/* @scattered-light/loomiere-base-ui 0.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
 /* Collapsible - Mojave Theme
  *
  * No component tokens. Hover, press, chevron and motion are the disclosure concept
@@ -1520,7 +1540,7 @@ button,
   background: var(--sl-surface-raised);
 }
 
-/* @scattered-light/loomiere-base-ui 0.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.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
@@ -2005,7 +2025,7 @@ button,
   color: var(--sl-text-tertiary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.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
@@ -2174,7 +2194,7 @@ button,
   stroke-width: var(--sl-stroke-default);
 }
 
-/* @scattered-light/loomiere-base-ui 0.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.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):
@@ -2320,7 +2340,7 @@ button,
   margin-top: var(--sl-modal-actions-spacing);
 }
 
-/* @scattered-light/loomiere-base-ui 0.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.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
@@ -2447,7 +2467,7 @@ button,
   color: var(--sl-modal-description-color);
 }
 
-/* @scattered-light/loomiere-base-ui 0.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
 /* Field - Mojave Theme
  *
  * Label, control, description and error. No component tokens: spacing is the field
@@ -2508,7 +2528,57 @@ textarea.FieldControl {
   height: auto;
 }
 
-/* @scattered-light/loomiere-base-ui 0.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* Icon Button - Mojave Theme
+ *
+ * A small, quiet icon-only button: the icon-button concept (tokens/semantic/icon-button.json),
+ * the same look as the X that closes a dialog or toast, as a part of its own. For calendar
+ * arrows, row actions and clear buttons, where a Button would be too loud. No component tokens.
+ */
+
+.IconButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--sl-icon-button-size);
+  height: var(--sl-icon-button-size);
+  padding: 0;
+  border: none;
+  border-radius: var(--sl-icon-button-radius);
+  background: transparent;
+  color: var(--sl-icon-button-color);
+  cursor: pointer;
+  outline: none;
+  transition: var(--sl-icon-button-transition);
+}
+
+.IconButton svg,
+.IconButton .material-symbols-outlined {
+  width: var(--sl-icon-size-base);
+  height: var(--sl-icon-size-base);
+  font-size: var(--sl-icon-size-base);
+  line-height: 1;
+}
+
+.IconButton:hover:not(:disabled):not([aria-disabled='true']) {
+  background: var(--sl-icon-button-background-hover);
+  color: var(--sl-icon-button-color-hover);
+}
+
+.IconButton:focus-visible {
+  outline: var(--sl-focus-outline);
+  outline-offset: var(--sl-focus-outline-offset);
+  box-shadow: 0 0 0 var(--sl-focus-halo-spread) var(--sl-focus-halo-color);
+}
+
+.IconButton:disabled,
+.IconButton[aria-disabled='true'] {
+  color: var(--sl-text-disabled);
+  cursor: not-allowed;
+}
+
+/* @scattered-light/loomiere-base-ui 0.3.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
@@ -2550,7 +2620,7 @@ textarea.FieldControl {
   color: var(--sl-text-secondary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.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
@@ -2570,7 +2640,7 @@ textarea.FieldControl {
   margin-top: var(--sl-space-block-md);
 }
 
-/* @scattered-light/loomiere-base-ui 0.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.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),
@@ -2707,7 +2777,7 @@ textarea.FieldControl {
   padding-inline: var(--sl-control-padding-inline-lg);
 }
 
-/* @scattered-light/loomiere-base-ui 0.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.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
@@ -2856,7 +2926,7 @@ textarea.FieldControl {
   color: var(--sl-text-tertiary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.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
@@ -3049,7 +3119,7 @@ textarea.FieldControl {
   color: var(--sl-text-tertiary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.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:
@@ -3109,7 +3179,7 @@ textarea.FieldControl {
   height: var(--sl-gauge-height-lg);
 }
 
-/* @scattered-light/loomiere-base-ui 0.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.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
@@ -3529,7 +3599,7 @@ textarea.FieldControl {
   width: 100%;
 }
 
-/* @scattered-light/loomiere-base-ui 0.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.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
@@ -3620,7 +3690,7 @@ textarea.FieldControl {
   user-select: none;
 }
 
-/* @scattered-light/loomiere-base-ui 0.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.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
@@ -3683,7 +3753,7 @@ textarea.FieldControl {
   letter-spacing: var(--sl-font-magnify-letter-spacing);
 }
 
-/* @scattered-light/loomiere-base-ui 0.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
 /* Popover - Mojave Theme */
 
 /* ============================================
@@ -3733,7 +3803,8 @@ textarea.FieldControl {
   transform var(--sl-popup-animation-duration) var(--sl-popup-animation-easing);
   position: relative;
   min-width: var(--sl-popover-popup-min-width);
-  max-width: var(--sl-popover-popup-max-width);
+  /* No fixed cap: wide content (a calendar, a form) fits; Base UI reports the room beside the trigger. */
+  max-width: var(--available-width, 100vw);
   padding: var(--sl-popup-padding-panel);
 }
 
@@ -3755,6 +3826,7 @@ textarea.FieldControl {
   letter-spacing: var(--sl-font-maximize-lg-letter-spacing);
   color: var(--sl-text-primary);
   margin: 0 0 var(--sl-space-block-xs) 0;
+  max-width: var(--sl-popover-text-max-width);
 }
 
 /* ============================================
@@ -3769,6 +3841,7 @@ textarea.FieldControl {
   letter-spacing: var(--sl-font-base-letter-spacing);
   color: var(--sl-text-secondary);
   margin: 0;
+  max-width: var(--sl-popover-text-max-width);
 }
 
 /* ============================================
@@ -3845,7 +3918,7 @@ textarea.FieldControl {
   fill: var(--sl-popup-arrow-stroke);
 }
 
-/* @scattered-light/loomiere-base-ui 0.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
 /* Preview Card - Mojave Theme
  *
  * The popup concept (surface, arrow, motion) with a maximize-lg title and condense
@@ -3962,7 +4035,7 @@ textarea.FieldControl {
   fill: var(--sl-popup-arrow-stroke);
 }
 
-/* @scattered-light/loomiere-base-ui 0.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.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
@@ -4039,7 +4112,7 @@ textarea.FieldControl {
   height: var(--sl-gauge-height-lg);
 }
 
-/* @scattered-light/loomiere-base-ui 0.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.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).
@@ -4191,7 +4264,7 @@ textarea.FieldControl {
   gap: var(--sl-gap-stack-sm);
 }
 
-/* @scattered-light/loomiere-base-ui 0.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.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
@@ -4273,7 +4346,7 @@ textarea.FieldControl {
   background: transparent;
 }
 
-/* @scattered-light/loomiere-base-ui 0.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.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
@@ -4547,7 +4620,7 @@ textarea.FieldControl {
   stroke-width: var(--sl-stroke-default);
 }
 
-/* @scattered-light/loomiere-base-ui 0.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.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
@@ -4575,7 +4648,7 @@ textarea.FieldControl {
   margin-inline: var(--sl-space-4);
 }
 
-/* @scattered-light/loomiere-base-ui 0.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.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
@@ -4741,7 +4814,7 @@ textarea.FieldControl {
   transform: translate(-50%, 50%);
 }
 
-/* @scattered-light/loomiere-base-ui 0.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.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,
@@ -4907,7 +4980,7 @@ textarea.FieldControl {
   color: var(--sl-text-disabled);
 }
 
-/* @scattered-light/loomiere-base-ui 0.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.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
@@ -5043,7 +5116,7 @@ textarea.FieldControl {
   padding: var(--sl-space-6);
 }
 
-/* @scattered-light/loomiere-base-ui 0.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.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
@@ -5279,7 +5352,7 @@ textarea.FieldControl {
   flex-shrink: 0;
 }
 
-/* @scattered-light/loomiere-base-ui 0.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.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.
@@ -5389,7 +5462,7 @@ textarea.FieldControl {
   height: var(--sl-icon-size-maximize);
 }
 
-/* @scattered-light/loomiere-base-ui 0.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.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
@@ -5410,7 +5483,7 @@ textarea.FieldControl {
   border-radius: var(--sl-radius-item);
 }
 
-/* @scattered-light/loomiere-base-ui 0.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.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
@@ -5472,7 +5545,7 @@ textarea.FieldControl {
   max-width: var(--sl-toolbar-input-max-width);
 }
 
-/* @scattered-light/loomiere-base-ui 0.2.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.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

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as _base_ui_react_field from '@base-ui/react/field';
+import * as _base_ui_react_button from '@base-ui/react/button';
 import { Button as Button$1 } from '@base-ui/react/button';
 import * as _base_ui_react_input from '@base-ui/react/input';
 import { Input as Input$1 } from '@base-ui/react/input';
@@ -39,10 +40,20 @@ type ButtonProps = React.ComponentProps<typeof Button$1> & {
 };
 /**
  * Base UI [Button](https://base-ui.com/react/components/button) with design-system `Button` classes.
- * Icon-only buttons must include a visible label for assistive tech (`aria-label` or `aria-labelledby`).
+ * A button holding only an icon gets `data-icon-only` and is drawn square (a circle, with the pill
+ * corners). Icon-only buttons must include a label for assistive tech (`aria-label` or `aria-labelledby`).
  */
 declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 
+type IconButtonProps = React.ComponentProps<typeof Button$1>;
+/**
+ * A small, quiet icon-only button: the icon-button concept (the X that closes a dialog, a field's
+ * clear button) as a part of its own, for calendar arrows, row actions and other controls that a
+ * full Button would make too loud. Base UI [Button](https://base-ui.com/react/components/button)
+ * with the `IconButton` class. Always give it `aria-label` or `aria-labelledby`.
+ */
+declare const IconButton: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_react_button.ButtonProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+
 type InputProps = React.ComponentProps<typeof Input$1>;
 /**
  * Base UI [Input](https://base-ui.com/react/components/input) with design-system `Input` classes.
@@ -104,4 +115,4 @@ type FieldControlProps = React.ComponentProps<typeof Field.Control>;
 type FieldValidityProps = React.ComponentProps<typeof Field.Validity>;
 type FieldItemProps = React.ComponentProps<typeof Field.Item>;
 
-export { Button, type ButtonProps, Field, type FieldControlProps, type FieldDescriptionProps, type FieldErrorProps, type FieldItemProps, type FieldLabelProps, type FieldRootProps, type FieldValidityProps, Fieldset, FieldsetDescription, type FieldsetDescriptionProps, type FieldsetLegendProps, type FieldsetRootProps, Form, FormActions, type FormActionsProps, type FormProps, Input, type InputProps, NavigationMenu, type NavigationMenuListProps, type NavigationMenuRootProps, cn, cnState };
+export { Button, type ButtonProps, Field, type FieldControlProps, type FieldDescriptionProps, type FieldErrorProps, type FieldItemProps, type FieldLabelProps, type FieldRootProps, type FieldValidityProps, Fieldset, FieldsetDescription, type FieldsetDescriptionProps, type FieldsetLegendProps, type FieldsetRootProps, Form, FormActions, type FormActionsProps, type FormProps, IconButton, type IconButtonProps, Input, type InputProps, NavigationMenu, type NavigationMenuListProps, type NavigationMenuRootProps, cn, cnState };