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

package/dist/styles/components/Input.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.6.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
 /* Input - Mojave Theme
  *
  * No component tokens: the look is the field concept (tokens/semantic/field.json),

package/dist/styles/components/Menu.css

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

package/dist/styles/components/Menubar.css

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

package/dist/styles/components/Meter.css

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

package/dist/styles/components/NavigationMenu.css

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

package/dist/styles/components/NumberField.css

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

package/dist/styles/components/OTPField.css

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

package/dist/styles/components/Popover.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.6.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
 /* Popover - Mojave Theme */
 
 /* ============================================

package/dist/styles/components/PreviewCard.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.6.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
 /* Preview Card - Mojave Theme
  *
  * The popup concept (surface, arrow, motion) with a title-magnify title and condense

package/dist/styles/components/Progress.css

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

package/dist/styles/components/Radio.css

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

package/dist/styles/components/ScrollArea.css

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

package/dist/styles/components/Select.css

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

package/dist/styles/components/Separator.css

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

package/dist/styles/components/Slider.css

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

package/dist/styles/components/Switch.css

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

package/dist/styles/components/Tabs.css

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

package/dist/styles/components/Toast.css

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

package/dist/styles/components/Toggle.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.6.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.1 · 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. Pressed, it takes its emphasis level's

package/dist/styles/components/ToggleGroup.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.6.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.1 · 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.6.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
 /* Toolbar - Mojave Theme
  *
  * The strip is the bar concept (tokens/semantic/bar.json). Buttons, toggles, selects

package/dist/styles/components/Tooltip.css

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

@@ -0,0 +1,104 @@
+/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* Badge
+ *
+ * A status or count label. Not a Base UI part, and not interactive: no hover or focus.
+ * Colors are the emphasis levels (--sl-e-bg, --sl-e-fg, --sl-e-border), so data-emphasis,
+ * data-status and data-color all recolor it. The default level is subtle, from
+ * DEFAULT_LEVELS. The shape is radius.pill. Sizes are badge.* (tokens/component/badge.json).
+ *
+ * Text is the trigger style of the same tier (trigger-minimize, trigger-condense,
+ * trigger-base): medium weight, and those three tiers already exist. subtitle is bold,
+ * which would shout, and label only exists at base. Icons use icon-size of that same
+ * tier (a badge icon is a mark beside the label, not a control that fills the line the
+ * way a Button icon does).
+ *
+ * Min width equals the height on every badge, so a single digit is a circle and a
+ * wider label is unchanged. Padding stays, so "12" does not touch the pill edges.
+ */
+
+.Badge {
+  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);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sl-badge-gap-condense);
+  height: var(--sl-badge-height-condense);
+  min-width: var(--sl-badge-height-condense);
+  padding-inline: var(--sl-badge-padding-inline-condense);
+  border: var(--sl-stroke-default) solid var(--sl-e-border);
+  border-radius: var(--sl-radius-pill);
+  background: var(--sl-e-bg);
+  color: var(--sl-e-fg);
+  white-space: nowrap;
+}
+
+.Badge[data-size='minimize'] {
+  font-family: var(--sl-font-trigger-minimize-font-family);
+  font-size: var(--sl-font-trigger-minimize-font-size);
+  font-weight: var(--sl-font-trigger-minimize-font-weight);
+  line-height: var(--sl-font-trigger-minimize-line-height);
+  letter-spacing: var(--sl-font-trigger-minimize-letter-spacing);
+  gap: var(--sl-badge-gap-minimize);
+  height: var(--sl-badge-height-minimize);
+  min-width: var(--sl-badge-height-minimize);
+  padding-inline: var(--sl-badge-padding-inline-minimize);
+}
+
+.Badge[data-size='base'] {
+  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);
+  gap: var(--sl-badge-gap-base);
+  height: var(--sl-badge-height-base);
+  min-width: var(--sl-badge-height-base);
+  padding-inline: var(--sl-badge-padding-inline-base);
+}
+
+.Badge svg,
+.Badge .material-symbols-outlined {
+  width: var(--sl-icon-size-condense);
+  height: var(--sl-icon-size-condense);
+  font-size: var(--sl-icon-size-condense);
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.Badge[data-size='minimize'] svg,
+.Badge[data-size='minimize'] .material-symbols-outlined {
+  width: var(--sl-icon-size-minimize);
+  height: var(--sl-icon-size-minimize);
+  font-size: var(--sl-icon-size-minimize);
+}
+
+.Badge[data-size='base'] svg,
+.Badge[data-size='base'] .material-symbols-outlined {
+  width: var(--sl-icon-size-base);
+  height: var(--sl-icon-size-base);
+  font-size: var(--sl-icon-size-base);
+}
+
+/* A status dot, in the label color. */
+.Badge[data-dot]::before {
+  content: '';
+  width: var(--sl-badge-dot-condense);
+  height: var(--sl-badge-dot-condense);
+  border-radius: var(--sl-radius-pill);
+  background: currentColor;
+  flex-shrink: 0;
+}
+
+.Badge[data-size='minimize'][data-dot]::before {
+  width: var(--sl-badge-dot-minimize);
+  height: var(--sl-badge-dot-minimize);
+}
+
+.Badge[data-size='base'][data-dot]::before {
+  width: var(--sl-badge-dot-base);
+  height: var(--sl-badge-dot-base);
+}

package/dist/styles/custom/Collection.css

@@ -0,0 +1,15 @@
+/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* Collection
+ *
+ * DataTable, DataList, the toolbar and the pagination, in one place so the two views
+ * share the table concept. Sections: toolbar, table additions, groups, list, pagination, sizes.
+ * Each section is its own file so the design system can name the part. This file brings them in.
+ *
+ * The selection bar replaces the trailing controls (filters, sort, actions) and leaves
+ * the tabs and the search where they are, so selecting rows does not grow the toolbar.
+ */
+
+@import './CollectionToolbar.css';
+@import './DataTable.css';
+@import './DataList.css';
+@import './CollectionPagination.css';

package/dist/styles/custom/CollectionPagination.css

@@ -0,0 +1,24 @@
+/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* Pagination
+ *
+ * Not tied to a collection. Anything with a page, a page count and a total can use it.
+ * Previous and Next are quiet buttons. The count reads "1–25 of 312".
+ */
+
+.CollectionPagination {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--sl-collection-toolbar-gap);
+  margin-block-start: var(--sl-collection-toolbar-gap);
+  color: var(--sl-table-subtle-color);
+}
+
+.CollectionPagination p {
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
+  margin: 0;
+}

package/dist/styles/custom/CollectionToolbar.css

@@ -0,0 +1,140 @@
+/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* Collection toolbar
+ *
+ * The wrap follows the toolbar's own width, not the window: a table in a narrow pane wraps
+ * even when the page is wide. Search grows to fill the row beside the trailing controls, and
+ * wraps to its own line before it shrinks under collection.search-min-width. Under the narrow
+ * width it takes the full row and filters wrap under it.
+ * A container query cannot read the width token, so the component also sets data-narrow.
+ *
+ * The search icon and the clear button sit inside the field. The browser's own search cancel
+ * is hidden by the reset, so the clear button is the only one, in every browser.
+ */
+
+.CollectionToolbar {
+  container-type: inline-size;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-collection-toolbar-gap);
+  margin-block-end: var(--sl-collection-toolbar-gap);
+}
+
+.CollectionToolbarMain,
+.CollectionSelectionBar,
+.CollectionSort {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--sl-collection-toolbar-gap);
+}
+
+.CollectionSearch {
+  display: flex;
+  align-items: center;
+  gap: var(--sl-collection-toolbar-gap);
+  flex: 1 1 0;
+  min-width: min(100%, var(--sl-collection-search-min-width));
+}
+
+.CollectionSearchField {
+  position: relative;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* Scoped to the field so it wins over Input.css, which loads later. */
+.CollectionSearchField .Input {
+  min-width: 0;
+  padding-inline-start: calc(var(--sl-control-padding-inline) + var(--sl-icon-size-magnify) + var(--sl-space-2));
+}
+
+.CollectionSearchField[data-filled] .Input {
+  padding-inline-end: calc(var(--sl-control-padding-inline) + var(--sl-icon-button-size));
+}
+
+.CollectionSearchIcon {
+  position: absolute;
+  inset-inline-start: var(--sl-control-padding-inline);
+  inset-block-start: 50%;
+  transform: translateY(-50%);
+  width: var(--sl-icon-size-magnify);
+  height: var(--sl-icon-size-magnify);
+  font-size: var(--sl-icon-size-magnify);
+  line-height: 1;
+  color: var(--sl-field-affix-color);
+  pointer-events: none;
+}
+
+.CollectionSearchClear {
+  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);
+  position: absolute;
+  inset-inline-end: var(--sl-space-3);
+  inset-block-start: 50%;
+  transform: translateY(-50%);
+  font-size: var(--sl-icon-size-magnify);
+  line-height: 1;
+}
+
+.CollectionSearchClear:hover {
+  background: var(--sl-icon-button-background-hover);
+  color: var(--sl-icon-button-color-hover);
+}
+
+.CollectionSearchClear: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);
+}
+
+/* The trailing controls join the main row one by one, so each keeps its own width and
+   wraps under the search on its own rather than squeezing. Search takes what is left. */
+.CollectionToolbarTrailing {
+  display: contents;
+}
+
+.CollectionSelectionBar {
+  flex: 0 0 auto;
+  max-width: 100%;
+}
+
+/* Select.css and Combobox.css fill their container. In the row they size to their text. */
+.CollectionToolbarMain .SelectTrigger,
+.CollectionToolbarMain .ComboboxInputWrapper {
+  flex: none;
+  width: auto;
+  max-width: 100%;
+}
+
+.CollectionToolbarActions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sl-collection-toolbar-gap);
+  margin-inline-start: auto;
+}
+
+/* The width token is measured in JS (data-narrow). A container query cannot read a custom property. */
+.CollectionToolbar[data-narrow] .CollectionSearch,
+.CollectionView[data-narrow] .CollectionSearch {
+  flex-basis: 100%;
+}
+
+.CollectionCount {
+  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);
+}

package/dist/styles/custom/DataList.css

@@ -0,0 +1,123 @@
+/* @scattered-light/loomiere-base-ui 0.7.1 · styles for @base-ui/react 1.9.0 */
+/* DataList
+ *
+ * The same rows as the table, in one container with the table's borders, hover, selected
+ * and current states. Not a stack of floating cards: the two views should read as one family.
+ * variant=cards adds the surface radius and a gap when a queue should read as separate items.
+ */
+
+.DataList {
+  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-table-color);
+}
+
+.DataList ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  background: var(--sl-table-background);
+  border: var(--sl-stroke-default) solid var(--sl-table-border-color);
+  border-radius: var(--sl-table-radius);
+}
+
+.DataList li {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--sl-collection-list-row-gap);
+  padding-block: var(--sl-collection-list-row-padding-block);
+  padding-inline: var(--sl-table-cell-padding-inline);
+  border-bottom: var(--sl-stroke-default) solid var(--sl-table-row-border-color);
+}
+
+.DataList li:last-child {
+  border-bottom: none;
+}
+
+.DataList[data-size='md'] li {
+  padding-block: var(--sl-collection-list-row-padding-block);
+  min-height: var(--sl-collection-row-height-md);
+}
+
+.DataList li[data-selected] {
+  background: var(--sl-table-row-selected);
+  color: var(--sl-table-color);
+}
+
+.DataList li[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);
+}
+
+@media (hover: hover) {
+  .DataList li:hover:not([data-selected], [aria-current='true']) {
+    background: var(--sl-table-row-hover);
+    color: var(--sl-table-color);
+  }
+}
+
+.DataListPrimary {
+  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);
+}
+
+.DataListSecondary,
+.DataListMeta,
+.DataListSummary {
+  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-table-subtle-color);
+}
+
+.DataListBody {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--sl-space-1);
+  min-width: 0;
+}
+
+.DataListMeta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sl-collection-list-row-gap);
+}
+
+.DataListAmount {
+  margin-inline-start: auto;
+  font-variant-numeric: tabular-nums;
+}
+
+.DataListGroup {
+  background: var(--sl-table-group-header-background);
+  color: var(--sl-table-header-color);
+}
+
+.DataList[data-variant='cards'] ul {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-collection-list-row-gap);
+  background: transparent;
+  border: 0;
+}
+
+.DataList[data-variant='cards'] li {
+  background: var(--sl-table-background);
+  border: var(--sl-stroke-default) solid var(--sl-table-border-color);
+  border-radius: var(--sl-table-radius);
+}
+
+.DataList[data-loading] ul {
+  opacity: var(--sl-item-opacity-disabled);
+  transition: opacity var(--sl-duration-fast) var(--sl-easing-default);
+}