@scattered-light/loomiere-base-ui 0.6.0 → 0.7.0

package/dist/styles/custom/MoneyField.css

@@ -0,0 +1,344 @@
+/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* Money field
+ *
+ * An amount of money, built on Number field. The value is an integer in minor units
+ * (cents, yen, fils) so 0.1 + 0.2 and 1.005 * 100 cannot drift, and so the number matches
+ * what a payment API sends. Number field counts in major units; Money field converts at
+ * the edge and rounds half away from zero. The default maximum is 10^15 - 1 minor
+ * units, so the major amount stays inside 15 significant digits. Changing currency
+ * keeps the number the person typed and re-rounds it to the new currency's digits
+ * (12.50 USD becomes 13 JPY). There is no exchange rate. When the app
+ * controls both the value and the currency, it decides whether to apply that rounding:
+ * onValueChange still reports the re-rounded minor units.
+ *
+ * Keyboard is Number field's: ArrowUp and ArrowDown step one major unit, Shift steps 100
+ * major units, Alt steps one minor unit, Home and End jump to the minimum and maximum.
+ * The currency symbol is not in the text, so the caret does not fight it. A fixed symbol
+ * is aria-hidden; the currency name is in the input's accessible description. A picker
+ * is its own tab stop, before the input when the locale puts the symbol first and after
+ * it when the locale puts the symbol last.
+ *
+ * State on the root: data-currency (USD), data-affix (start or end), data-affix-kind
+ * (symbol or picker), data-negative (below zero; set data-color on the field to color
+ * it, never on by default), data-align (start or end),
+ * data-size (xs, sm, md, lg), data-readonly, plus data-invalid, data-disabled,
+ * data-focused and data-scrubbing.
+ *
+ * The affix (symbol or picker) is drawn inside the field so it can later be lifted into
+ * a general Input affix for units, https://, or @. Position comes from the locale, with
+ * logical properties so RTL mirrors it. The group, not the input, carries the field
+ * border, hover, focus halo, invalid edge and disabled fill, so the affix reads as part
+ * of the field.
+ */
+
+/* ============================================
+   FIELD
+   ============================================ */
+
+.MoneyField {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--sl-field-gap);
+  width: 100%;
+}
+
+.MoneyFieldGroup {
+  box-sizing: border-box;
+  color: var(--sl-field-color);
+  background: var(--sl-field-background);
+  border: var(--sl-field-border-width) solid var(--sl-field-border-color);
+  border-radius: var(--sl-field-radius);
+  transition: var(--sl-field-transition);
+  outline: none;
+  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: stretch;
+  width: 100%;
+  height: var(--sl-control-height-md);
+  padding: 0;
+}
+
+.MoneyField[data-size='xs'] .MoneyFieldGroup {
+  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);
+  height: var(--sl-control-height-xs);
+}
+
+.MoneyField[data-size='sm'] .MoneyFieldGroup {
+  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);
+  height: var(--sl-control-height-sm);
+}
+
+.MoneyField[data-size='lg'] .MoneyFieldGroup {
+  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);
+  height: var(--sl-control-height-lg);
+}
+
+.MoneyFieldGroup .MoneyFieldInput,
+.MoneyFieldAffix,
+.MoneyFieldGroup .MoneyFieldCurrencyTrigger {
+  font: inherit;
+}
+
+.MoneyFieldGroup .MoneyFieldInput {
+  flex: 1;
+  min-inline-size: 0;
+  height: auto;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  outline: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.MoneyFieldGroup .MoneyFieldInput:hover,
+.MoneyFieldGroup .MoneyFieldInput:focus,
+.MoneyField[data-invalid] .MoneyFieldInput,
+.MoneyField[data-invalid] .MoneyFieldInput:focus,
+.MoneyField[data-disabled] .MoneyFieldInput {
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+}
+
+/* A symbol brings its own padding. A picker has a divider, so the amount keeps its inset. */
+.MoneyField[data-affix-kind='symbol'][data-affix='start'] .MoneyFieldInput {
+  padding-inline-start: 0;
+}
+
+.MoneyField[data-affix-kind='symbol'][data-affix='end']:not([data-steppers]) .MoneyFieldInput {
+  padding-inline-end: 0;
+}
+
+/* Number field always pads for its steppers. Those buttons are absent unless asked for. */
+.MoneyField:not([data-steppers]) .MoneyFieldInput {
+  padding-inline-end: var(--sl-control-padding-inline);
+}
+
+.MoneyField[data-size='xs']:not([data-steppers]) .MoneyFieldInput {
+  padding-inline-end: var(--sl-control-padding-inline-xs);
+}
+
+.MoneyField[data-size='sm']:not([data-steppers]) .MoneyFieldInput {
+  padding-inline-end: var(--sl-control-padding-inline-sm);
+}
+
+.MoneyField[data-size='lg']:not([data-steppers]) .MoneyFieldInput {
+  padding-inline-end: var(--sl-control-padding-inline-lg);
+}
+
+.MoneyField[data-align='end'] .MoneyFieldInput {
+  text-align: end;
+}
+
+.MoneyField[data-align='start'] .MoneyFieldInput {
+  text-align: start;
+}
+
+.MoneyFieldGroup:hover:not(:focus-within) {
+  border-color: var(--sl-field-border-color-hover);
+}
+
+.MoneyFieldGroup:focus-within,
+.MoneyField[data-focused] .MoneyFieldGroup {
+  border-color: var(--sl-field-border-color-focus);
+  box-shadow: var(--sl-field-shadow-focus);
+}
+
+.MoneyField[data-invalid] .MoneyFieldGroup {
+  border-color: var(--sl-field-border-color-error);
+}
+
+.MoneyField[data-invalid] .MoneyFieldGroup:focus-within,
+.MoneyField[data-invalid][data-focused] .MoneyFieldGroup {
+  border-color: var(--sl-field-border-color-error);
+  box-shadow: var(--sl-field-shadow-focus-error);
+}
+
+.MoneyField[data-disabled] .MoneyFieldGroup {
+  background: var(--sl-field-background-disabled);
+  cursor: not-allowed;
+}
+
+.MoneyField[data-readonly] .MoneyFieldInput {
+  cursor: default;
+}
+
+/* The palette is the one on the field. An ancestor data-color does not recolor a balance. */
+.MoneyField[data-negative][data-color] .MoneyFieldInput {
+  color: var(--sl-scope-fg);
+}
+
+.MoneyField[data-scrubbing] .MoneyFieldInput {
+  cursor: ns-resize;
+}
+
+/* The sign toggle is for coarse pointers: an iOS decimal keypad has no minus key. */
+.MoneyFieldSign {
+  display: none;
+  align-self: center;
+  flex: none;
+}
+
+@media (pointer: coarse) {
+  .MoneyFieldSign {
+    display: inline-flex;
+  }
+}
+
+/* ============================================
+   AFFIX
+   ============================================ */
+
+.MoneyFieldAffix {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  padding-inline: var(--sl-control-padding-inline);
+  color: var(--sl-field-affix-color);
+  user-select: none;
+}
+
+.MoneyField[data-size='xs'] .MoneyFieldAffix {
+  padding-inline: var(--sl-control-padding-inline-xs);
+}
+
+.MoneyField[data-size='sm'] .MoneyFieldAffix {
+  padding-inline: var(--sl-control-padding-inline-sm);
+}
+
+.MoneyField[data-size='lg'] .MoneyFieldAffix {
+  padding-inline: var(--sl-control-padding-inline-lg);
+}
+
+/* ============================================
+   CURRENCY SELECT
+   ============================================ */
+
+.MoneyFieldCurrency {
+  display: flex;
+  align-self: stretch;
+  flex: none;
+}
+
+.MoneyFieldCurrencyTrigger {
+  display: inline-flex;
+  align-items: center;
+  align-self: stretch;
+  flex: none;
+  gap: var(--sl-space-1);
+  height: auto;
+  min-height: 0;
+  padding-inline: var(--sl-control-padding-inline);
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  color: var(--sl-field-affix-color);
+}
+
+.MoneyField[data-size='xs'] .MoneyFieldCurrencyTrigger {
+  padding-inline: var(--sl-control-padding-inline-xs);
+}
+
+.MoneyField[data-size='sm'] .MoneyFieldCurrencyTrigger {
+  padding-inline: var(--sl-control-padding-inline-sm);
+}
+
+.MoneyField[data-size='lg'] .MoneyFieldCurrencyTrigger {
+  padding-inline: var(--sl-control-padding-inline-lg);
+}
+
+.MoneyField[data-affix='start'] .MoneyFieldCurrency {
+  border-inline-end: var(--sl-field-border-width) solid var(--sl-field-border-color);
+}
+
+.MoneyField[data-affix='end'] .MoneyFieldCurrency {
+  border-inline-start: var(--sl-field-border-width) solid var(--sl-field-border-color);
+}
+
+.MoneyFieldCurrencyTrigger:hover,
+.MoneyFieldCurrencyTrigger:focus,
+.MoneyFieldCurrencyTrigger[data-popup-open],
+.MoneyFieldCurrencyTrigger[aria-expanded='true'] {
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+  color: var(--sl-text-primary);
+}
+
+/* The group halo says the field is focused. This says the picker, not the amount, has the caret. */
+.MoneyFieldCurrencyTrigger:focus-visible {
+  outline: var(--sl-focus-outline);
+  outline-offset: var(--sl-focus-outline-offset-inset);
+}
+
+/* The picker is its own field, so it does not take the amount's label. */
+.MoneyFieldCurrencyField,
+.MoneyFieldGroup .ComboboxRoot {
+  display: contents;
+}
+
+.MoneyFieldCurrencyIcon {
+  width: var(--sl-icon-size-base);
+  height: var(--sl-icon-size-base);
+  font-size: var(--sl-icon-size-base);
+}
+
+.MoneyField[data-size='xs'] .MoneyFieldCurrencyIcon {
+  width: var(--sl-icon-size-minimize);
+  height: var(--sl-icon-size-minimize);
+  font-size: var(--sl-icon-size-minimize);
+}
+
+.MoneyField[data-size='sm'] .MoneyFieldCurrencyIcon {
+  width: var(--sl-icon-size-condense);
+  height: var(--sl-icon-size-condense);
+  font-size: var(--sl-icon-size-condense);
+}
+
+.MoneyField[data-size='lg'] .MoneyFieldCurrencyIcon {
+  width: var(--sl-icon-size-magnify);
+  height: var(--sl-icon-size-magnify);
+  font-size: var(--sl-icon-size-magnify);
+}
+
+.MoneyFieldCurrencyPopup {
+  min-inline-size: var(--sl-money-field-picker-min-inline-size);
+}
+
+.MoneyFieldCurrencyItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sl-space-4);
+  width: 100%;
+}
+
+.MoneyFieldCurrencySymbol {
+  color: var(--sl-text-secondary);
+}
+
+.MoneyFieldCurrencyPopup .ComboboxInput {
+  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);
+}

package/dist/styles/custom/Splitter.css

@@ -0,0 +1,207 @@
+/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* Splitter
+ *
+ * Two or more panels and a handle between them. Not a Base UI part. It follows the
+ * window splitter pattern: the handle is a separator you drag or move with the arrow
+ * keys. Each panel's size is --sl-splitter-panel-size, so a drag can update the line
+ * without rendering the tree again. The parent gives the root its height.
+ *
+ * One panel has no size and fills what the others leave (the last panel, when every
+ * panel has a size). Px and percent mix, so a workstation can pin its sides in pixels
+ * while a list keeps a percent.
+ *
+ * Arrow keys move one key step, 5% of the splitter; Shift uses the larger step.
+ * Home and End jump to that panel's min and max. Enter collapses a collapsible panel
+ * and restores the size it had. Double-click resets to the default size. In RTL,
+ * Left and Right swap. A panel collapsed to nothing is hidden, so its contents leave
+ * the tab order.
+ *
+ * data-orientation is on the root, the panel and the handle. data-dragging is on the
+ * root and the handle while the pointer is down. data-collapsed is on a collapsed
+ * panel and on the handle that resizes it. data-disabled is on the handle. data-grip
+ * draws the grip. data-fill marks the panel that takes the leftover space.
+ *
+ * The line is one stroke. The part you grab sits on the next panel's inline-start,
+ * not centered, so it does not cover the previous panel's scrollbar. A fine pointer
+ * gets a11y.min-target (24px). A coarse pointer gets the 44px touch target. The
+ * focus ring is drawn on that grab area: a ring around the 1px line reads as a
+ * second hairline. Collapse animates with duration.normal. A drag does not animate.
+ * Reduced motion is the shared reset, which finishes every transition at once.
+ */
+
+.Splitter {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
+.Splitter[data-orientation='horizontal'] {
+  flex-direction: row;
+}
+
+.Splitter[data-orientation='vertical'] {
+  flex-direction: column;
+}
+
+.Splitter[data-dragging] .SplitterPanel {
+  transition: none;
+}
+
+.SplitterPanel {
+  --sl-splitter-panel-size: auto;
+  position: relative;
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  flex: 0 0 var(--sl-splitter-panel-size);
+  transition:
+    flex-basis var(--sl-duration-normal) var(--sl-easing-default),
+    width var(--sl-duration-normal) var(--sl-easing-default),
+    height var(--sl-duration-normal) var(--sl-easing-default);
+}
+
+.SplitterPanel[data-orientation='horizontal'] {
+  width: var(--sl-splitter-panel-size);
+  height: auto;
+}
+
+.SplitterPanel[data-orientation='vertical'] {
+  height: var(--sl-splitter-panel-size);
+  width: auto;
+}
+
+.SplitterPanel[data-orientation='horizontal'][data-fill]:not([data-collapsed]) {
+  flex: 1 1 auto;
+  width: auto;
+}
+
+.SplitterPanel[data-orientation='vertical'][data-fill]:not([data-collapsed]) {
+  flex: 1 1 auto;
+  height: auto;
+}
+
+/* A ScrollArea thumb still stacks above the grab area, for a bar that lives in the
+   next panel, under the part of the hit area that crosses the line. */
+.SplitterPanel .ScrollAreaScrollbar {
+  z-index: 2;
+}
+
+.SplitterHandle {
+  position: relative;
+  flex: none;
+  box-sizing: border-box;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  touch-action: none;
+  color: var(--sl-border-default);
+}
+
+.SplitterHandle[data-orientation='horizontal'] {
+  width: var(--sl-splitter-handle-size);
+  height: auto;
+  align-self: stretch;
+  cursor: col-resize;
+}
+
+.SplitterHandle[data-orientation='vertical'] {
+  height: var(--sl-splitter-handle-size);
+  width: auto;
+  align-self: stretch;
+  cursor: row-resize;
+}
+
+.SplitterHandle::before,
+.SplitterHandle::after {
+  content: '';
+  position: absolute;
+}
+
+.SplitterHandle::before {
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.SplitterHandle[data-orientation='horizontal']::before {
+  width: var(--sl-splitter-handle-size);
+  height: 100%;
+  background: var(--sl-border-default);
+}
+
+.SplitterHandle[data-orientation='vertical']::before {
+  height: var(--sl-splitter-handle-size);
+  width: 100%;
+  background: var(--sl-border-default);
+}
+
+/* The grab area starts on the line and extends into the next panel. The previous
+   panel keeps its scrollbar, which sits on its inline-end, against this line. */
+.SplitterHandle[data-orientation='horizontal']::after {
+  inset-inline-start: 0;
+  top: 0;
+  bottom: 0;
+  width: var(--sl-a11y-min-target);
+  z-index: 1;
+}
+
+.SplitterHandle[data-orientation='vertical']::after {
+  inset-block-start: 0;
+  left: 0;
+  right: 0;
+  height: var(--sl-a11y-min-target);
+  z-index: 1;
+}
+
+@media (pointer: coarse) {
+  .SplitterHandle[data-orientation='horizontal']::after {
+    width: var(--sl-splitter-handle-hit-size);
+  }
+
+  .SplitterHandle[data-orientation='vertical']::after {
+    height: var(--sl-splitter-handle-hit-size);
+  }
+}
+
+.SplitterHandle:hover::before,
+.SplitterHandle[data-dragging]::before,
+.SplitterHandle[data-collapsed]::before {
+  background: var(--sl-border-strong);
+}
+
+/* The dot edge (45% to 50%) is the shape of the grip, not a size token. */
+/* The dots sit on the line, at the start of the grab area, not in its middle. */
+.SplitterHandle[data-orientation='horizontal'][data-grip]::after {
+  background:
+    radial-gradient(circle, var(--sl-border-strong) 45%, transparent 50%) inline-start calc(50% - var(--sl-splitter-grip-size) * 2) / var(--sl-splitter-grip-size) var(--sl-splitter-grip-size) no-repeat,
+    radial-gradient(circle, var(--sl-border-strong) 45%, transparent 50%) inline-start center / var(--sl-splitter-grip-size) var(--sl-splitter-grip-size) no-repeat,
+    radial-gradient(circle, var(--sl-border-strong) 45%, transparent 50%) inline-start calc(50% + var(--sl-splitter-grip-size) * 2) / var(--sl-splitter-grip-size) var(--sl-splitter-grip-size) no-repeat;
+}
+
+.SplitterHandle[data-orientation='vertical'][data-grip]::after {
+  background:
+    radial-gradient(circle, var(--sl-border-strong) 45%, transparent 50%) calc(50% - var(--sl-splitter-grip-size) * 2) block-start / var(--sl-splitter-grip-size) var(--sl-splitter-grip-size) no-repeat,
+    radial-gradient(circle, var(--sl-border-strong) 45%, transparent 50%) center block-start / var(--sl-splitter-grip-size) var(--sl-splitter-grip-size) no-repeat,
+    radial-gradient(circle, var(--sl-border-strong) 45%, transparent 50%) calc(50% + var(--sl-splitter-grip-size) * 2) block-start / var(--sl-splitter-grip-size) var(--sl-splitter-grip-size) no-repeat;
+}
+
+.SplitterHandle:focus {
+  outline: none;
+}
+
+.SplitterHandle:focus-visible::after {
+  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);
+}
+
+.SplitterHandle[data-disabled] {
+  cursor: not-allowed;
+}
+
+.SplitterHandle[data-disabled]::before {
+  background: var(--sl-border-default);
+}

package/dist/styles/{components → custom}/Table.css

@@ -1,10 +1,16 @@
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.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.
+ * hand-built table and a full grid look alike. Rows answer to aria-selected="true",
+ * aria-current="true" (the row whose detail is open) or data-selected; cells take
+ * data-align="end" for numbers.
+ *
+ * An empty body keeps the header and the column widths: one cell spanning the columns,
+ * `<tr><td data-empty colSpan={n}><EmptyState size="compact" … /></td></tr>`. A cell with
+ * only text still uses this rule's padding. A cell whose child is an EmptyState lets the
+ * empty state pad itself. The empty row does not take the row hover.
  */
 
 .Table {
@@ -111,6 +117,17 @@
   color: var(--sl-item-color-selected);
 }
 
+/* The open row keeps a fill, and a bar on the inline start so it is not only a color. */
+.Table tbody tr[aria-current='true'] > * {
+  background: var(--sl-table-row-current);
+  color: var(--sl-table-color);
+  box-shadow: inset var(--sl-stroke-strong) 0 0 0 var(--sl-border-accent);
+}
+
+[dir='rtl'] .Table tbody tr[aria-current='true'] > * {
+  box-shadow: inset calc(var(--sl-stroke-strong) * -1) 0 0 0 var(--sl-border-accent);
+}
+
 /* Footer: totals on the tray band */
 .Table tfoot td {
   font-family: var(--sl-font-subtitle-condense-font-family);
@@ -130,7 +147,8 @@
   z-index: var(--sl-z-index-docked);
 }
 
-/* Empty state: one cell spanning the columns */
+/* Empty state: one cell spanning the columns. Plain text keeps the old padding.
+   An EmptyState brings its own, and its title stays the normal text color on hover. */
 .Table td[data-empty] {
   height: auto;
   padding-block: var(--sl-space-10);
@@ -138,7 +156,16 @@
   text-align: center;
 }
 
+.Table td[data-empty]:has(> .EmptyState) {
+  padding: 0;
+  color: inherit;
+}
+
 .Table tbody tr:has(> td[data-empty]):hover > * {
   background: transparent;
   color: var(--sl-text-tertiary);
 }
+
+.Table tbody tr:has(> td[data-empty] > .EmptyState):hover > * {
+  color: inherit;
+}

package/dist/styles/index.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.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';
@@ -44,10 +44,20 @@
 @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';
 @import './components/ToggleGroup.css';
 @import './components/Toolbar.css';
 @import './components/Tooltip.css';
+
+/* Custom components: not Base UI parts. Built from existing concepts and tokens. */
+@import './custom/Badge.css';
+@import './custom/DatePicker.css';
+@import './custom/MoneyField.css';
+@import './custom/ListDetail.css';
+@import './custom/Splitter.css';
+@import './custom/EmptyState.css';
+@import './custom/Table.css';
+@import './custom/Collection.css';
+@import './custom/EditableList.css';

package/dist/styles/reset/accessibility.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.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.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.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.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.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.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.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.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.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';
@@ -47,10 +47,20 @@
 @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);
 @import './components/ToggleGroup.css' layer(components);
 @import './components/Toolbar.css' layer(components);
 @import './components/Tooltip.css' layer(components);
+
+/* Custom components: not Base UI parts. Built from existing concepts and tokens. */
+@import './custom/Badge.css' layer(components);
+@import './custom/DatePicker.css' layer(components);
+@import './custom/MoneyField.css' layer(components);
+@import './custom/ListDetail.css' layer(components);
+@import './custom/Splitter.css' layer(components);
+@import './custom/EmptyState.css' layer(components);
+@import './custom/Table.css' layer(components);
+@import './custom/Collection.css' layer(components);
+@import './custom/EditableList.css' layer(components);