@scattered-light/loomiere-base-ui 0.7.1 → 0.9.0

package/dist/styles/custom/DescriptionList.css

@@ -0,0 +1,75 @@
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
+/* DescriptionList
+ *
+ * Label and value pairs in a native dl, one DescriptionItem (a div holding a dt and a dd)
+ * per pair, with a hairline between pairs. The default variant sets labels in a column
+ * beside their values. data-variant="leader" runs a dotted leader from each label to its
+ * value, which sits at the end of the row, as on a working paper. Labels are body text
+ * in the secondary color, values primary text with tabular numbers.
+ * Tokens: description-list.* (tokens/component/description-list.json).
+ */
+
+.DescriptionList {
+  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;
+  padding: 0;
+  font-variant-numeric: tabular-nums;
+}
+
+.DescriptionItem {
+  display: grid;
+  grid-template-columns: var(--sl-description-list-label-width) 2fr;
+  align-items: baseline;
+  column-gap: var(--sl-description-list-column-gap);
+  padding-block: var(--sl-description-list-row-padding-block);
+  padding-inline: var(--sl-description-list-row-padding-inline);
+  border-bottom: var(--sl-stroke-default) solid var(--sl-description-list-row-border-color);
+}
+
+.DescriptionItem:last-child {
+  border-bottom: none;
+}
+
+.DescriptionTerm {
+  margin: 0;
+  color: var(--sl-description-list-label-color);
+}
+
+.DescriptionDetails {
+  margin: 0;
+  min-width: 0;
+  color: var(--sl-description-list-value-color);
+  overflow-wrap: anywhere;
+}
+
+/* Leader: the label grows to fill the row, and its ::after is the dotted line that leads
+   to the value. The line sits on the text's baseline. */
+.DescriptionList[data-variant='leader'] .DescriptionItem {
+  display: flex;
+  column-gap: var(--sl-description-list-leader-gap);
+}
+
+.DescriptionList[data-variant='leader'] .DescriptionTerm {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: baseline;
+  gap: var(--sl-description-list-leader-gap);
+  min-width: 0;
+}
+
+.DescriptionList[data-variant='leader'] .DescriptionTerm::after {
+  content: '';
+  flex: 1 1 var(--sl-space-6);
+  min-width: var(--sl-space-6);
+  border-bottom: var(--sl-description-list-leader-width) dotted var(--sl-description-list-leader-color);
+}
+
+.DescriptionList[data-variant='leader'] .DescriptionDetails {
+  flex: 0 1 auto;
+  max-width: 60%;
+  text-align: end;
+}

package/dist/styles/custom/EditableList.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* EditableList
  *
  * One table at every width, so a field is not submitted twice. Under the stack width each

package/dist/styles/custom/EmptyState.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* EmptyState
  *
  * The block a page, pane, table, list or popup shows when it has nothing to show.

package/dist/styles/custom/ListDetail.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* ListDetail
  *
  * The detail of one item, next to its list. Not a Base UI part. It is a Splitter

package/dist/styles/custom/MoneyField.css

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

package/dist/styles/custom/PickerButton.css

@@ -0,0 +1,85 @@
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
+/* PickerButton
+ *
+ * A trigger with a caps label before the current choice: CLIENT Alpha Services. The field
+ * look and states of a Select trigger; the label is caps-condense in picker-button.label-color,
+ * the choice is cut with an ellipsis at picker-button.max-width and the chevron turns while
+ * its popup is open. Tokens: picker-button.* (tokens/component/picker-button.json) and field.*.
+ */
+
+.PickerButton {
+  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: inline-flex;
+  align-items: center;
+  gap: var(--sl-gap-control);
+  max-width: var(--sl-picker-button-max-width);
+  min-width: 0;
+  height: var(--sl-control-height-md);
+  margin: 0;
+  padding-block: var(--sl-control-padding-block);
+  padding-inline: var(--sl-control-padding-inline);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.PickerButton:hover:not(:disabled) {
+  border-color: var(--sl-field-border-color-hover);
+}
+
+.PickerButton:focus-visible {
+  border-color: var(--sl-field-border-color-focus);
+  box-shadow: var(--sl-field-shadow-focus);
+}
+
+.PickerButton:disabled {
+  background: var(--sl-field-background-disabled);
+  color: var(--sl-field-color-disabled);
+  cursor: not-allowed;
+}
+
+.PickerButtonLabel {
+  font-family: var(--sl-font-caps-condense-font-family);
+  font-size: var(--sl-font-caps-condense-font-size);
+  font-weight: var(--sl-font-caps-condense-font-weight);
+  line-height: var(--sl-font-caps-condense-line-height);
+  letter-spacing: var(--sl-font-caps-condense-letter-spacing);
+  text-transform: var(--sl-font-caps-condense-text-transform);
+  flex: none;
+  color: var(--sl-picker-button-label-color);
+}
+
+.PickerButtonValue {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--sl-field-color);
+}
+
+.PickerButtonValue[data-placeholder] {
+  color: var(--sl-field-placeholder-color);
+}
+
+.PickerButtonIcon {
+  flex: none;
+  width: var(--sl-icon-size-base);
+  height: var(--sl-icon-size-base);
+  color: var(--sl-text-tertiary);
+  transition: transform var(--sl-duration-normal) var(--sl-easing-default);
+}
+
+.PickerButton[aria-expanded='true'] .PickerButtonIcon,
+.PickerButton[data-popup-open] .PickerButtonIcon {
+  transform: rotate(180deg);
+}

package/dist/styles/custom/Sheet.css

@@ -0,0 +1,90 @@
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
+/* Sheet
+ *
+ * A working-paper surface: the raised surface with a heavier rule across its top
+ * (sheet.rule-width in sheet.rule-color) instead of its top border, and an optional tab
+ * label that sits on the rule like the tab of a ledger page. The tab is caps-condense on
+ * the inverse surface. An action (an Edit link, a count) sits at the end of the header row.
+ * Tokens: sheet.* (tokens/component/sheet.json).
+ *
+ * Content runs edge to edge, so a Table, DataList or leader DescriptionList inside lines up
+ * with the sheet's sides; data-inset on SheetBody pads it by sheet.padding instead. A Table
+ * inside drops its own outer border and corners, since the sheet is its frame.
+ */
+
+.Sheet {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.SheetHeader {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--sl-sheet-header-gap);
+  min-height: var(--sl-sheet-tab-height);
+}
+
+.SheetTab {
+  font-family: var(--sl-font-caps-condense-font-family);
+  font-size: var(--sl-font-caps-condense-font-size);
+  font-weight: var(--sl-font-caps-condense-font-weight);
+  line-height: var(--sl-font-caps-condense-line-height);
+  letter-spacing: var(--sl-font-caps-condense-letter-spacing);
+  text-transform: var(--sl-font-caps-condense-text-transform);
+  display: inline-flex;
+  align-items: center;
+  height: var(--sl-sheet-tab-height);
+  padding-inline: var(--sl-sheet-tab-padding-inline);
+  background: var(--sl-sheet-tab-background);
+  color: var(--sl-sheet-tab-color);
+  border-radius: var(--sl-sheet-tab-radius) var(--sl-sheet-tab-radius) 0 0;
+  white-space: nowrap;
+}
+
+.SheetAction {
+  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);
+  margin-inline-start: auto;
+  padding-block-end: var(--sl-space-1);
+}
+
+.SheetBody {
+  box-sizing: border-box;
+  flex: 1;
+  min-width: 0;
+  background: var(--sl-sheet-background);
+  border: var(--sl-sheet-border-width) solid var(--sl-sheet-border-color);
+  border-top: var(--sl-sheet-rule-width) solid var(--sl-sheet-rule-color);
+  border-radius: var(--sl-sheet-radius);
+  /* Rows inside keep to the rounded corners. clip, not hidden, so a sticky header still sticks. */
+  overflow: clip;
+}
+
+/* Under a tab the top corners stay square, so the tab sits flush on the rule. */
+.Sheet[data-tab] > .SheetBody {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+}
+
+.SheetBody[data-inset] {
+  padding: var(--sl-sheet-padding);
+}
+
+/* The sheet is the frame: a table or list inside drops its own outer edge. */
+.SheetBody > .Table,
+.SheetBody > .CollectionView .Table,
+.SheetBody > .DataList ul {
+  border: 0;
+  border-radius: 0;
+}
+
+.SheetBody > .Table > thead > tr:first-child > *,
+.SheetBody > .Table:not(:has(> thead)) > tbody:first-of-type > tr:first-child > *,
+.SheetBody > .DataList ul > li:first-child {
+  border-top: 0;
+}

package/dist/styles/custom/Splitter.css

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

package/dist/styles/custom/StatFigure.css

@@ -0,0 +1,60 @@
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
+/* StatFigure
+ *
+ * One large figure with a caps label above and a caption under it. The label is
+ * caps-condense, the figure uses the figures text family (mono, tabular numbers) at
+ * stat-figure.figure-font-size, the caption is body-condense. data-underline="double"
+ * draws a double rule under the figure only, the accountant's mark for a final total;
+ * data-tone="accent" colors the figure; data-size="sm" makes it smaller for a row of figures.
+ * Tokens: stat-figure.* (tokens/component/stat-figure.json).
+ */
+
+.StatFigure {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--sl-stat-figure-gap);
+  min-width: 0;
+}
+
+.StatFigureLabel {
+  font-family: var(--sl-font-caps-condense-font-family);
+  font-size: var(--sl-font-caps-condense-font-size);
+  font-weight: var(--sl-font-caps-condense-font-weight);
+  line-height: var(--sl-font-caps-condense-line-height);
+  letter-spacing: var(--sl-font-caps-condense-letter-spacing);
+  text-transform: var(--sl-font-caps-condense-text-transform);
+  color: var(--sl-stat-figure-label-color);
+}
+
+.StatFigureValue {
+  font-family: var(--sl-font-figures-base-font-family);
+  font-variant-numeric: var(--sl-font-figures-base-font-variant-numeric);
+  font-size: var(--sl-stat-figure-figure-font-size);
+  font-weight: var(--sl-stat-figure-figure-font-weight);
+  line-height: var(--sl-stat-figure-figure-line-height);
+  color: var(--sl-stat-figure-figure-color);
+  white-space: nowrap;
+}
+
+.StatFigure[data-size='sm'] .StatFigureValue {
+  font-size: var(--sl-stat-figure-figure-font-size-sm);
+  line-height: var(--sl-stat-figure-figure-line-height-sm);
+}
+
+.StatFigure[data-tone='accent'] .StatFigureValue {
+  color: var(--sl-stat-figure-figure-color-accent);
+}
+
+.StatFigure[data-underline='double'] .StatFigureValue {
+  border-bottom: var(--sl-stat-figure-underline-width) double var(--sl-stat-figure-underline-color);
+}
+
+.StatFigureCaption {
+  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);
+  color: var(--sl-stat-figure-caption-color);
+}

package/dist/styles/custom/Table.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.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
@@ -11,6 +11,13 @@
  * `<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.
+ *
+ * Totals: tr data-total="subtotal" draws a single rule above the row, and data-total="grand"
+ * a rule above and a double rule under, as on a working paper (table.total-*). They work in
+ * tbody or tfoot. A tfoot row without data-total keeps the header tray band.
+ *
+ * The working-paper rule (rule.width, 0 by default) replaces the table's top border with a
+ * heavier line in rule.color, drawn on the first row's cells so it stays with a sticky header.
  */
 
 .Table {
@@ -29,6 +36,15 @@
   border-radius: var(--sl-table-radius);
   overflow: hidden;
   font-variant-numeric: tabular-nums;
+  /* The top border steps aside while the working-paper rule is on (any rule.width above 0). */
+  border-top-width: max(0px, var(--sl-stroke-default) - var(--sl-rule-width) * 1000);
+}
+
+/* The working-paper rule, on the first row: the header, or the body when there is none.
+   At rule.width 0 this is no border at all. */
+.Table > thead > tr:first-child > *,
+.Table:not(:has(> thead)) > tbody:first-of-type > tr:first-child > * {
+  border-top: var(--sl-rule-width) solid var(--sl-rule-color);
 }
 
 .Table caption {
@@ -140,6 +156,52 @@
   border-bottom: none;
 }
 
+/* Subtotal and grand total rows: rules instead of a band, in the subtitle weight.
+   Hover and selection don't apply: a total is not a record. */
+.Table tr[data-total] > * {
+  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-total-background);
+  color: var(--sl-table-color);
+  border-top: var(--sl-table-subtotal-rule-width) solid var(--sl-table-total-rule-color);
+}
+
+.Table tbody tr[data-total] > * {
+  border-bottom: var(--sl-stroke-default) solid var(--sl-table-row-border-color);
+}
+
+.Table tbody tr[data-total]:last-child:not([data-total='grand']) > * {
+  border-bottom: none;
+}
+
+/* The grand total: a double rule under the figures. */
+.Table :is(tbody, tfoot) tr[data-total='grand'] > * {
+  border-bottom: var(--sl-table-grand-total-rule-width) double var(--sl-table-total-rule-color);
+}
+
+/* A label or blank cell in a total row can leave the rules off, so they only run under the
+   figures: data-rule="none" on the cell. */
+.Table :is(tbody, tfoot) tr[data-total] > [data-rule='none'] {
+  border-top-color: transparent;
+  border-bottom-color: transparent;
+}
+
+/* In the footer the body's last row has no line under it, so those cells keep the footer's
+   usual line on top. */
+.Table tfoot tr[data-total] > [data-rule='none'] {
+  border-top: var(--sl-stroke-default) solid var(--sl-table-border-color);
+}
+
+@media (hover: hover) {
+  .Table tbody tr[data-total]:hover > * {
+    background: var(--sl-table-total-background);
+    color: var(--sl-table-color);
+  }
+}
+
 /* A header that stays put while the body scrolls (the table's wrapper scrolls) */
 .Table[data-sticky-header] thead th {
   position: sticky;

package/dist/styles/index.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.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';
@@ -61,3 +61,8 @@
 @import './custom/Table.css';
 @import './custom/Collection.css';
 @import './custom/EditableList.css';
+@import './custom/Sheet.css';
+@import './custom/StatFigure.css';
+@import './custom/DescriptionList.css';
+@import './custom/AppBar.css';
+@import './custom/PickerButton.css';

package/dist/styles/reset/accessibility.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.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.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.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.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* CSS Reset - Mojave Theme */
 
 /* ============================================
@@ -271,7 +271,7 @@ pre {
   background: var(--sl-content-pre-background);
   border: var(--sl-stroke-thin) solid var(--sl-content-pre-border);
   color: var(--sl-content-pre-text);
-  border-radius: var(--sl-space-2);
+  border-radius: var(--sl-content-pre-radius);
   overflow-x: auto;
   margin-block: var(--sl-space-6);
 }

package/dist/styles/reset/reset.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.0 · styles for @base-ui/react 1.9.0 */
 /* CSS Reset - Mojave Theme */
 
 /* ============================================
@@ -272,7 +272,7 @@ pre {
   background: var(--sl-content-pre-background);
   border: var(--sl-stroke-thin) solid var(--sl-content-pre-border);
   color: var(--sl-content-pre-text);
-  border-radius: var(--sl-space-2);
+  border-radius: var(--sl-content-pre-radius);
   overflow-x: auto;
   margin-block: var(--sl-space-6);
 }

package/dist/styles/tailwind.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.9.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';
@@ -64,3 +64,8 @@
 @import './custom/Table.css' layer(components);
 @import './custom/Collection.css' layer(components);
 @import './custom/EditableList.css' layer(components);
+@import './custom/Sheet.css' layer(components);
+@import './custom/StatFigure.css' layer(components);
+@import './custom/DescriptionList.css' layer(components);
+@import './custom/AppBar.css' layer(components);
+@import './custom/PickerButton.css' layer(components);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scattered-light/loomiere-base-ui",
-  "version": "0.7.1",
+  "version": "0.9.0",
   "description": "Base UI components styled by any Loomiere theme. Brand-free: every value is a --sl- variable.",
   "keywords": [
     "base-ui",
@@ -76,7 +76,7 @@
     }
   },
   "devDependencies": {
-    "@scattered-light/loomiere": "0.7.1",
+    "@scattered-light/loomiere": "0.9.0",
     "@tanstack/react-table": "^9.3.1"
   }
 }