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

package/dist/styles/components/Switch.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 */
 /* 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,
@@ -70,12 +70,12 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  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);
   font-size: var(--switch-text-size);
   line-height: 1;
   color: var(--sl-text-secondary);
@@ -137,27 +137,27 @@
 
 /* Switch labels run one step smaller than checkbox and radio labels (switch.json). */
 .SwitchLabel {
-  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);
 }
 
 .SwitchContainer[data-size='sm'] .SwitchLabel {
-  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);
 }
 
 .SwitchContainer[data-size='lg'] .SwitchLabel {
-  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);
 }
 
 .SwitchContainer[data-disabled] .SwitchLabel {

package/dist/styles/components/Table.css

@@ -0,0 +1,144 @@
+/* @scattered-light/loomiere-base-ui 0.4.0 · styles for @base-ui/react 1.9.0 */
+/* Table - Mojave Theme
+ *
+ * Base UI has no table, so this styles the native <table class="Table"> elements with the
+ * table concept (tokens/semantic/table.json), the same tokens the AG Grid themes read: a small
+ * hand-built table and a full grid look alike. Rows answer to aria-selected="true" (or
+ * data-selected) for selection; cells take data-align="end" for numbers.
+ */
+
+.Table {
+  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);
+  box-sizing: border-box;
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  background: var(--sl-table-background);
+  color: var(--sl-table-color);
+  border: var(--sl-stroke-default) solid var(--sl-table-border-color);
+  border-radius: var(--sl-table-radius);
+  overflow: hidden;
+  font-variant-numeric: tabular-nums;
+}
+
+.Table caption {
+  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);
+  caption-side: bottom;
+  padding-block: var(--sl-space-2);
+  color: var(--sl-table-subtle-color);
+  text-align: start;
+}
+
+/* Header: the tray band, a little taller than the rows */
+.Table th {
+  font-family: var(--sl-font-subtitle-condense-font-family);
+  font-size: var(--sl-font-subtitle-condense-font-size);
+  font-weight: var(--sl-font-subtitle-condense-font-weight);
+  line-height: var(--sl-font-subtitle-condense-line-height);
+  letter-spacing: var(--sl-font-subtitle-condense-letter-spacing);
+  height: var(--sl-table-header-height);
+  padding-block: 0;
+  padding-inline: var(--sl-table-cell-padding-inline);
+  background: var(--sl-table-header-background);
+  color: var(--sl-table-header-color);
+  text-align: start;
+  vertical-align: middle;
+  border-bottom: var(--sl-stroke-default) solid var(--sl-table-border-color);
+}
+
+/* A header that sorts: aria-sort on the th */
+.Table th[aria-sort] {
+  cursor: pointer;
+  transition: background-color var(--sl-duration-fast) var(--sl-easing-default);
+}
+
+.Table th[aria-sort]:hover {
+  background: var(--sl-table-header-background-hover);
+}
+
+/* Body cells */
+.Table td {
+  height: var(--sl-table-row-height);
+  padding-block: 0;
+  padding-inline: var(--sl-table-cell-padding-inline);
+  vertical-align: middle;
+  border-bottom: var(--sl-stroke-default) solid var(--sl-table-row-border-color);
+}
+
+.Table tbody tr:last-child td,
+.Table tbody:last-child tr:last-child td {
+  border-bottom: none;
+}
+
+/* A row header (th in tbody) reads like a cell, in the header's weight */
+.Table tbody th {
+  background: transparent;
+  border-bottom: var(--sl-stroke-default) solid var(--sl-table-row-border-color);
+}
+
+/* Numbers and amounts: right-aligned so digits line up */
+.Table [data-align='end'] {
+  text-align: end;
+}
+
+.Table [data-align='center'] {
+  text-align: center;
+}
+
+/* Secondary text in a cell */
+.Table [data-subtle] {
+  color: var(--sl-table-subtle-color);
+}
+
+/* Hover and selection: the same tints as list items */
+@media (hover: hover) {
+  .Table tbody tr:hover > * {
+    background: var(--sl-table-row-hover);
+    color: var(--sl-item-color-hover);
+  }
+}
+
+.Table tbody tr:is([aria-selected='true'], [data-selected]) > * {
+  background: var(--sl-table-row-selected);
+  color: var(--sl-item-color-selected);
+}
+
+/* Footer: totals on the tray band */
+.Table tfoot td {
+  font-family: var(--sl-font-subtitle-condense-font-family);
+  font-size: var(--sl-font-subtitle-condense-font-size);
+  font-weight: var(--sl-font-subtitle-condense-font-weight);
+  line-height: var(--sl-font-subtitle-condense-line-height);
+  letter-spacing: var(--sl-font-subtitle-condense-letter-spacing);
+  background: var(--sl-table-header-background);
+  border-top: var(--sl-stroke-default) solid var(--sl-table-border-color);
+  border-bottom: none;
+}
+
+/* A header that stays put while the body scrolls (the table's wrapper scrolls) */
+.Table[data-sticky-header] thead th {
+  position: sticky;
+  top: 0;
+  z-index: var(--sl-z-index-docked);
+}
+
+/* Empty state: one cell spanning the columns */
+.Table td[data-empty] {
+  height: auto;
+  padding-block: var(--sl-space-10);
+  color: var(--sl-text-tertiary);
+  text-align: center;
+}
+
+.Table tbody tr:has(> td[data-empty]):hover > * {
+  background: transparent;
+  color: var(--sl-text-tertiary);
+}

package/dist/styles/components/Tabs.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 */
 /* Tabs - Mojave Theme
  *
  * No component tokens. The divider, the selected line and color, hover and the disabled
@@ -31,11 +31,11 @@
 /* Tab: a transparent line under it that turns accent when selected. */
 .TabsTab {
   all: unset;
-  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);
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
@@ -54,11 +54,11 @@
 }
 
 .TabsTab[data-active] {
-  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);
   color: var(--sl-disclosure-selected-color);
   border-bottom-color: var(--sl-disclosure-indicator-color);
 }
@@ -85,11 +85,11 @@
 
 /* Panel */
 .TabsPanel {
-  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: var(--sl-space-4);
   color: var(--sl-text-primary);
 }
@@ -101,28 +101,28 @@
 
 /* Sizes: the minimize tier for small tabs, more room for large ones. */
 .TabsRoot[data-size='sm'] .TabsTab {
-  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);
   padding: var(--sl-space-1-5) var(--sl-space-3);
 }
 
 .TabsRoot[data-size='sm'] .TabsTab[data-active] {
-  font-family: var(--sl-font-minimize-selected-font-family);
-  font-size: var(--sl-font-minimize-selected-font-size);
-  font-weight: var(--sl-font-minimize-selected-font-weight);
-  line-height: var(--sl-font-minimize-selected-line-height);
-  letter-spacing: var(--sl-font-minimize-selected-letter-spacing);
+  font-family: var(--sl-font-selected-minimize-font-family);
+  font-size: var(--sl-font-selected-minimize-font-size);
+  font-weight: var(--sl-font-selected-minimize-font-weight);
+  line-height: var(--sl-font-selected-minimize-line-height);
+  letter-spacing: var(--sl-font-selected-minimize-letter-spacing);
 }
 
 .TabsRoot[data-size='sm'] .TabsPanel {
-  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);
   padding: var(--sl-space-3);
 }
 

package/dist/styles/components/Toast.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 */
 /* Toast - Mojave Theme
  *
  * A toast is a notice (tokens/semantic/notice.json) on the popup surface. A toast whose type
@@ -164,20 +164,20 @@
    ============================================ */
 
 .Title {
-  font-family: var(--sl-font-maximize-md-font-family);
-  font-size: var(--sl-font-maximize-md-font-size);
-  font-weight: var(--sl-font-maximize-md-font-weight);
-  line-height: var(--sl-font-maximize-md-line-height);
-  letter-spacing: var(--sl-font-maximize-md-letter-spacing);
+  font-family: var(--sl-font-title-base-font-family);
+  font-size: var(--sl-font-title-base-font-size);
+  font-weight: var(--sl-font-title-base-font-weight);
+  line-height: var(--sl-font-title-base-line-height);
+  letter-spacing: var(--sl-font-title-base-letter-spacing);
   margin: 0;
 }
 
 .Description {
-  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(--notice-text, var(--sl-notice-description-color));
   margin: 0;
   margin-top: var(--sl-notice-text-gap);

package/dist/styles/components/Toggle.css

@@ -1,7 +1,9 @@
-/* @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 */
 /* 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.
+ * trigger text style as a button of the same size. Pressed, it takes its emphasis level's
+ * pressed look (standard unless data-emphasis on it or its group says otherwise), so the
+ * brand's emphasis ladder decides how loud an "on" toggle is.
  */
 
 /* ============================================
@@ -17,11 +19,11 @@
   gap: var(--sl-gap-control);
   height: var(--sl-control-height-md);
   padding-inline: var(--sl-control-padding-inline);
-  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);
   background: var(--sl-surface-base);
   border: var(--sl-stroke-default) solid var(--sl-border-default);
@@ -36,17 +38,17 @@
   border-color: var(--sl-border-strong);
 }
 
+/* An outline or ghost level rests on no fill, so pressed reads from the active fill. */
 .Toggle[data-pressed],
 .Toggle[aria-pressed='true'] {
-  background: var(--sl-interactive-tint-hover);
-  color: var(--sl-interactive-default);
-  border-color: var(--sl-border-accent);
+  background: var(--sl-e-bg-active);
+  color: var(--sl-e-fg);
+  border-color: var(--sl-e-border);
 }
 
 .Toggle[data-pressed]:hover:not([data-disabled]):not(:disabled),
 .Toggle[aria-pressed='true']:hover:not([data-disabled]):not(:disabled) {
-  background: var(--sl-interactive-tint-strong);
-  border-color: var(--sl-interactive-hover);
+  border-color: var(--sl-e-border-hover);
 }
 
 .Toggle:focus-visible {
@@ -69,22 +71,22 @@
   gap: var(--sl-gap-control-sm);
   height: var(--sl-control-height-sm);
   padding-inline: var(--sl-control-padding-inline-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);
   border-radius: var(--sl-radius-item);
 }
 
 .Toggle[data-size='lg'] {
   height: var(--sl-control-height-lg);
   padding-inline: var(--sl-control-padding-inline-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);
   border-radius: var(--sl-radius-surface);
 }
 

package/dist/styles/components/ToggleGroup.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 */
 /* Toggle Group - Mojave Theme
  *
  * No component tokens. The strip is the bar concept (tokens/semantic/bar.json); the

package/dist/styles/components/Toolbar.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 */
 /* Toolbar - Mojave Theme
  *
  * The strip is the bar concept (tokens/semantic/bar.json). Buttons, toggles, selects
@@ -32,11 +32,11 @@
 
 /* Link: secondary text that darkens on hover. */
 .ToolbarLink {
-  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: inline-flex;
   align-items: center;
   padding-inline: var(--sl-control-padding-inline-sm);

package/dist/styles/components/Tooltip.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 */
 /* Tooltip - Mojave Theme
  *
  * The inverse surface (surface.inverse, text.on-inverse-surface) with condense text, so a tooltip
@@ -15,11 +15,11 @@
 }
 
 .TooltipPopup {
-  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);
   transform-origin: var(--transform-origin);
   transition:
   opacity var(--sl-popup-animation-duration) var(--sl-popup-animation-easing),

package/dist/styles/index.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 */
 /* 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';
@@ -26,7 +26,6 @@
 @import './components/Dialog.css';
 @import './components/Drawer.css';
 @import './components/Field.css';
-@import './components/IconButton.css';
 @import './components/Fieldset.css';
 @import './components/Form.css';
 @import './components/Input.css';
@@ -45,6 +44,7 @@
 @import './components/Separator.css';
 @import './components/Slider.css';
 @import './components/Switch.css';
+@import './components/Table.css';
 @import './components/Tabs.css';
 @import './components/Toast.css';
 @import './components/Toggle.css';

package/dist/styles/reset/accessibility.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 */
 /* Focus, invalid, contrast — requires theme tokens (after theme-accessibility.css). */
 
 :focus-visible {

package/dist/styles/reset/reset-accessibility.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 */
 /* Accessibility — base rules (no theme color dependencies). Theme-specific focus/invalid: accessibility-theme.css */
 
 /* Remove default focus; keyboard focus styled in accessibility-theme.css */

package/dist/styles/reset/reset-tailwind.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 */
 /* CSS Reset - Mojave Theme */
 
 /* ============================================

package/dist/styles/reset/reset.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 */
 /* CSS Reset - Mojave Theme */
 
 /* ============================================

package/dist/styles/tailwind.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 */
 /* Loomiere for Base UI: component styles for Tailwind CSS v4. Load Tailwind and the theme first:
      @import 'tailwindcss';
      @import '<your theme>/tokens.css';
@@ -29,7 +29,6 @@
 @import './components/Dialog.css' layer(components);
 @import './components/Drawer.css' layer(components);
 @import './components/Field.css' layer(components);
-@import './components/IconButton.css' layer(components);
 @import './components/Fieldset.css' layer(components);
 @import './components/Form.css' layer(components);
 @import './components/Input.css' layer(components);
@@ -48,6 +47,7 @@
 @import './components/Separator.css' layer(components);
 @import './components/Slider.css' layer(components);
 @import './components/Switch.css' layer(components);
+@import './components/Table.css' layer(components);
 @import './components/Tabs.css' layer(components);
 @import './components/Toast.css' layer(components);
 @import './components/Toggle.css' layer(components);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scattered-light/loomiere-base-ui",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Base UI components styled by any Loomiere theme. Brand-free: every value is a --sl- variable.",
   "keywords": ["base-ui", "react", "components", "design-tokens", "loomiere"],
   "repository": {
@@ -49,6 +49,6 @@
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@scattered-light/loomiere": "0.3.0"
+    "@scattered-light/loomiere": "0.4.0"
   }
 }

package/dist/design-system/components/IconButton/README.md

@@ -1,31 +0,0 @@
-# IconButton
-
-The Base UI Button styled by the 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.
-
-Use `Loomiere.IconButton`, this package's wrapper: it puts the class names on for you (`import { IconButton } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.Button`.
-
-Base UI docs: https://base-ui.com/react/components/button
-
-## Classes
-
-| Class | Data attributes it answers to |
-|---|---|
-| `IconButton` |   |
-
-Base UI sets the state attributes (`data-checked`, `data-open`, `data-disabled`...) itself. Set `data-size`, `data-emphasis`, `data-variant` and `data-color` yourself; `data-color` takes any palette name (`primary`, `secondary`, `error`...) and repaints the part in it.
-
-## Example
-
-From the IconButton stories (`Default`):
-
-```tsx
-export const Default: Story = {
-  render: () => (
-    <IconButton type="button" aria-label="Next month">
-      <Icon name="chevron_right" />
-    </IconButton>
-  ),
-};
-```
-
-The preview also shows `CalendarHeader`, `RowActions`, `Disabled`.

package/dist/design-system/components/IconButton/preview.html

@@ -1,19 +0,0 @@
-<!-- @dsCard group="Actions" height=480 subtitle="Default / CalendarHeader / RowActions / Disabled" -->
-<!doctype html>
-<html>
-<head>
-<meta charset="utf-8">
-<style>
-  body { margin: 0; padding: var(--sl-space-4, 16px); background: var(--sl-surface-canvas); color: var(--sl-text-primary); }
-  #root { display: grid; gap: var(--sl-space-5, 20px); }
-  .ds-story-name { margin: 0 0 var(--sl-space-2, 8px); font: var(--sl-font-minimize-label-font, 500 10px sans-serif); color: var(--sl-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; }
-</style>
-</head>
-<body>
-<div id="root"></div>
-<script>
-(()=>{var x=Object.create;var m=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var I=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),v=(e,t)=>{for(var o in t)m(e,o,{get:t[o],enumerable:!0})},E=(e,t,o,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of g(t))!w.call(e,a)&&a!==o&&m(e,a,{get:()=>t[a],enumerable:!(s=f(t,a))||s.enumerable});return e};var B=(e,t,o)=>(o=e!=null?x(h(e)):{},E(t||!e||!e.__esModule?m(o,"default",{value:e,enumerable:!0}):o,e));var u=I((F,y)=>{y.exports=window.Loomiere});var p={};v(p,{CalendarHeader:()=>N,Default:()=>D,Disabled:()=>A,RowActions:()=>R,default:()=>d});var r=B(u(),1);var i=window.React;function n(e,t,o){let{children:s,...a}=t||{};return o!==void 0&&(a.key=o),s===void 0?i.createElement(e,a):Array.isArray(s)?i.createElement(e,a,...s):i.createElement(e,a,s)}var M=i.Fragment;var S={title:"Components/Lib/IconButton",component:r.IconButton,parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},d=S,c=({name:e})=>n("span",{className:"material-symbols-outlined","aria-hidden":"true",children:e}),D={render:()=>n(r.IconButton,{type:"button","aria-label":"Next month",children:n(c,{name:"chevron_right"})})},N={render:()=>n("div",{style:{display:"flex",alignItems:"center",gap:"var(--sl-space-2)",width:"280px"},children:[n(r.IconButton,{type:"button","aria-label":"Previous month",children:n(c,{name:"chevron_left"})}),n("span",{className:"text-style-base-subtitle",style:{flexGrow:1,textAlign:"center"},children:"October 2026"}),n(r.IconButton,{type:"button","aria-label":"Next month",children:n(c,{name:"chevron_right"})})]})},R={render:()=>n("div",{style:{display:"flex",gap:"var(--sl-space-1)"},children:[n(r.IconButton,{type:"button","aria-label":"Edit",children:n(c,{name:"edit"})}),n(r.IconButton,{type:"button","aria-label":"Duplicate",children:n(c,{name:"content_copy"})}),n(r.IconButton,{type:"button","aria-label":"Delete",children:n(c,{name:"delete"})})]})},A={render:()=>n(r.IconButton,{type:"button","aria-label":"Next month",disabled:!0,children:n(c,{name:"chevron_right"})})};var l=window.React,b=d||{},_=["Default","CalendarHeader","RowActions","Disabled"];function j({id:e}){let t=p[e],o={...b.args||{},...t.args||{}};return(t.render||(a=>l.createElement(b.component,a)))(o,{args:o,id:e,name:e})}var O=_.map(e=>l.createElement("section",{key:e,className:"ds-story"},l.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),l.createElement("div",{className:"ds-story-body"},l.createElement(j,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(l.createElement(l.Fragment,null,O));})();
-
-</script>
-</body>
-</html>