@threadlabs/looma 0.14.0 → 0.14.2

package/vue/components.css

@@ -1844,29 +1844,66 @@ dd[data-v-6e5b491d] {
 
 /* Named values: a term and what it is, for each item (ui-description-item). */
 /* Rows line every term up in one column and every value in the next, through subgrid. */
-[data-component~="ui-description-list"][data-v-a4548235] {
+[data-component~="ui-description-list"][data-v-640c2332] {
+  --_gap: var(--ui-space-2);
+  --_gap-compact: var(--ui-space-1);
+  --_column-gap: var(--ui-space-6);
+  --_min: 10rem;
+  --_track: var(--_min);
+  --_tile-padding: var(--ui-space-3);
   display: grid;
   grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr);
-  gap: var(--ui-space-2) var(--ui-space-6);
+  gap: var(--_gap) var(--_column-gap);
   min-inline-size: 0;
   margin: 0;
 }
 
-/* Tiles pass their shape to the items through private properties, which cross into each item. */
-[data-component~="ui-description-list"][data-ui-description-list-state~="layout=tiles"][data-v-a4548235] {
+/* Stacked, grid, and tiles set each term above its value, passing the shape to the items through
+   private properties, which cross into each item. */
+[data-component~="ui-description-list"][data-ui-description-list-state~="layout=stacked"][data-v-640c2332],
+[data-component~="ui-description-list"][data-ui-description-list-state~="layout=grid"][data-v-640c2332],
+[data-component~="ui-description-list"][data-ui-description-list-state~="layout=tiles"][data-v-640c2332] {
   --_ui-description-display: flex;
   --_ui-description-column: auto;
+  --_ui-description-align: stretch;
+  --_gap: var(--ui-space-4);
+  --_gap-compact: var(--ui-space-2);
+  grid-template-columns: minmax(0, 1fr);
+}
+
+/* A column is at least --_min wide; with columns set, at least its share of the width, so no more
+   than that many fit. */
+[data-component~="ui-description-list"][data-ui-description-list-state~="layout=grid"][data-v-640c2332],
+[data-component~="ui-description-list"][data-ui-description-list-state~="layout=tiles"][data-v-640c2332] {
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--_track)), 1fr));
+}
+[data-component~="ui-description-list"][data-ui-description-list-state~="layout=tiles"][data-v-640c2332] {
   --_ui-description-align: flex-start;
   --_ui-description-value-size: var(--ui-font-size-lg);
-  --_ui-description-padding: var(--ui-space-3);
+  --_ui-description-padding: var(--_tile-padding);
   --_ui-description-border-width: 1px;
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
-  gap: var(--ui-space-3);
+  --_gap: var(--ui-space-3);
+  --_gap-compact: var(--ui-space-2);
+  --_column-gap: var(--_gap);
+}
+[data-component~="ui-description-list"][data-ui-description-list-state~="columns=2"][data-v-640c2332] {
+  --_track: max(var(--_min), (100% - var(--_column-gap)) / 2);
+}
+[data-component~="ui-description-list"][data-ui-description-list-state~="columns=3"][data-v-640c2332] {
+  --_track: max(var(--_min), (100% - 2 * var(--_column-gap)) / 3);
+}
+[data-component~="ui-description-list"][data-ui-description-list-state~="columns=4"][data-v-640c2332] {
+  --_track: max(var(--_min), (100% - 3 * var(--_column-gap)) / 4);
+}
+
+/* Compact takes each layout's closer spacing. */
+[data-component~="ui-description-list"][data-ui-description-list-state~="density=compact"][data-v-640c2332] {
+  --_gap: var(--_gap-compact);
+  --_tile-padding: var(--ui-space-2);
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-description-list"][hidden][data-v-a4548235] {
+[data-component~="ui-description-list"][hidden][data-v-640c2332] {
   display: none;
 }
 
@@ -4399,6 +4436,66 @@ svg[data-v-006fa1b2-s] {
   display: none;
 }
 
+/* How far along something is: a track, filled from the start in the tone's colour. The track is a
+       quiet border colour, so an empty meter still shows; every tone's fill keeps 3:1 against the
+       track and the page. */
+@property --ui-meter-inline-size {
+  syntax: "*";
+  inherits: false;
+}
+[data-component~="ui-meter"][data-v-f716cd47] {
+  --_meter-fill: var(--ui-text-muted);
+
+  display: inline-block;
+  flex: none;
+  vertical-align: middle;
+  inline-size: var(--ui-meter-inline-size, 8rem);
+  max-inline-size: 100%;
+  block-size: var(--ui-space-2);
+  overflow: hidden;
+  border-radius: var(--ui-radius-round);
+  background: var(--ui-border);
+  /* Unseen until forced colours draw it, where the track's own colour is gone. */
+  outline: 1px solid transparent;
+}
+[data-component~="ui-meter"][data-ui-meter-state~="size=sm"][data-v-f716cd47] {
+  inline-size: var(--ui-meter-inline-size, 5rem);
+  block-size: var(--ui-space-1);
+}
+.fill[data-v-f716cd47] {
+  display: block;
+  block-size: 100%;
+  background: var(--_meter-fill);
+}
+[data-component~="ui-meter"][data-ui-meter-state~="tone=accent"][data-v-f716cd47] {
+  --_meter-fill: var(--ui-accent-solid);
+}
+[data-component~="ui-meter"][data-ui-meter-state~="tone=info"][data-v-f716cd47] {
+  --_meter-fill: var(--ui-info-solid);
+}
+[data-component~="ui-meter"][data-ui-meter-state~="tone=success"][data-v-f716cd47] {
+  --_meter-fill: var(--ui-success-solid);
+}
+[data-component~="ui-meter"][data-ui-meter-state~="tone=warning"][data-v-f716cd47] {
+  --_meter-fill: var(--ui-warning-solid);
+}
+[data-component~="ui-meter"][data-ui-meter-state~="tone=danger"][data-v-f716cd47] {
+  --_meter-fill: var(--ui-danger-solid);
+}
+
+/* Forced colours drop backgrounds: draw the fill in the text colour inside the outlined track. */
+@media (forced-colors: active) {
+.fill[data-v-f716cd47] {
+    forced-color-adjust: none;
+    background: CanvasText;
+}
+}
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-meter"][hidden][data-v-f716cd47] {
+  display: none;
+}
+
 /* This component's hooks style the element they are set on, and never a nested one. */
 @property --ui-nav-item-current-surface {
   syntax: "*";
@@ -5951,6 +6048,117 @@ input[data-v-87fc218c], input[data-v-87fc218c]::after {
   display: none;
 }
 
+/* Styles an authored <table> (caption, thead, tbody, th scope) without replacing it: the table is
+       meaningful before JavaScript, and a screen reader reads it as a table. The root scrolls a table
+       wider than it, or taller than a bounded height; while it does, the controller makes the root a named, focusable region so a
+       keyboard can scroll it. A cell's data-ui-align (start, center, or end; start by default) sets its
+       content along the row, such as end for a column of figures. */
+[data-component~="ui-table"][data-v-9980d203] {
+  --_pad-block: var(--ui-space-1);
+  --_pad-inline: var(--ui-space-3);
+  --_row-size: var(--ui-control-size);
+  display: block;
+  box-sizing: border-box;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  min-block-size: 0;
+  overflow: auto;
+  overscroll-behavior-inline: contain;
+  /* The sideways scroll fade every Looma scroller uses (see ui-scroll-area). Only the inline edges
+     fade, so a sticky header never fades. */
+  --_ui-scroll-fade-direction: to right;
+  --_ui-scroll-fade-size: var(--ui-scroll-fade-size, 24px);
+  mask-image: linear-gradient(
+    var(--_ui-scroll-fade-direction),
+    transparent,
+    #000 var(--_ui-scroll-fade-start),
+    #000 calc(100% - var(--_ui-scroll-fade-end)),
+    transparent
+  );
+  animation:
+    ui-scroll-fade-start linear,
+    ui-scroll-fade-start-hold linear,
+    ui-scroll-fade-end-hold linear,
+    ui-scroll-fade-end linear;
+  animation-timeline: scroll(self inline);
+  animation-range:
+    0 var(--_ui-scroll-fade-size),
+    var(--_ui-scroll-fade-size) calc(100% + 1px),
+    -1px calc(100% - var(--_ui-scroll-fade-size)),
+    calc(100% - var(--_ui-scroll-fade-size)) 100%;
+}
+[data-component~="ui-table"][data-v-9980d203]:dir(rtl) {
+  --_ui-scroll-fade-direction: to left;
+}
+[data-component~="ui-table"][data-v-9980d203]:focus-visible {
+  outline: 2px solid var(--ui-focus-ring);
+  outline-offset: -2px;
+}
+[data-component~="ui-table"][data-ui-table-state~="density=compact"][data-v-9980d203] {
+  --_pad-block: var(--ui-space-0-5);
+  --_pad-inline: var(--ui-space-2);
+  --_row-size: var(--ui-control-size-sm);
+}
+
+/* Separate borders stay on their cells when a sticky header scrolls; collapsed ones stay behind. */
+table[data-v-9980d203-s] {
+  inline-size: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  color: var(--ui-text-primary);
+  font-size: var(--ui-font-size-sm);
+  line-height: var(--ui-line-height);
+  font-variant-numeric: tabular-nums;
+}
+caption[data-v-9980d203-s] {
+  padding-block-end: var(--ui-space-2);
+  color: var(--ui-text-secondary);
+  font-weight: var(--ui-font-medium);
+  text-align: start;
+}
+
+/* Every row is at least one control tall, so a row holding a checkbox, select, or input keeps the
+   rhythm of the rows around it. A cell's height is its minimum. */
+th[data-v-9980d203-s],td[data-v-9980d203-s] {
+  block-size: var(--_row-size);
+  padding: var(--_pad-block) var(--_pad-inline);
+  border-block-end: 1px solid var(--ui-border-subtle);
+  text-align: start;
+  vertical-align: middle;
+}
+thead th[data-v-9980d203-s] {
+  block-size: auto;
+  padding-block: var(--ui-space-2);
+  border-block-end-color: var(--ui-border-default);
+  background: var(--ui-surface);
+  color: var(--ui-text-muted);
+  font-weight: var(--ui-font-medium);
+  white-space: nowrap;
+  vertical-align: bottom;
+}
+tbody th[data-v-9980d203-s] {
+  font-weight: var(--ui-font-medium);
+}
+tbody tr[data-v-9980d203-s]:last-child > * {
+  border-block-end-width: 0;
+}
+[data-ui-align="center"][data-v-9980d203-s] {
+  text-align: center;
+}
+[data-ui-align="end"][data-v-9980d203-s] {
+  text-align: end;
+}
+[data-component~="ui-table"][data-ui-table-state~="stickyHeader"] thead th[data-v-9980d203-s] {
+  position: sticky;
+  inset-block-start: 0;
+  z-index: 1;
+}
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-table"][hidden][data-v-9980d203] {
+  display: none;
+}
+
 /* This component's hooks style the element they are set on, and never a nested one. */
 @property --ui-tabs-tab-min-block-size {
   syntax: "*";

package/vue/index.d.ts

@@ -37,6 +37,7 @@ export { default as List } from "./UiList.js";
 export { default as ListItem } from "./UiListItem.js";
 export { default as Menu } from "./UiMenu.js";
 export { default as MenuItem } from "./UiMenuItem.js";
+export { default as Meter } from "./UiMeter.js";
 export { default as NavItem } from "./UiNavItem.js";
 export { default as PageHeader } from "./UiPageHeader.js";
 export { default as Popover } from "./UiPopover.js";
@@ -55,6 +56,7 @@ export { default as Stack } from "./UiStack.js";
 export { default as StatusMessage } from "./UiStatusMessage.js";
 export { default as Switch } from "./UiSwitch.js";
 export { default as Switcher } from "./UiSwitcher.js";
+export { default as Table } from "./UiTable.js";
 export { default as Tabs } from "./UiTabs.js";
 export { default as Text } from "./UiText.js";
 export { default as Textarea } from "./UiTextarea.js";

package/vue/index.js

@@ -38,6 +38,7 @@ import { t as UiList_default } from "./chunks/UiList.js";
 import { t as UiListItem_default } from "./chunks/UiListItem.js";
 import { t as UiMenu_default } from "./chunks/UiMenu.js";
 import { t as UiMenuItem_default } from "./chunks/UiMenuItem.js";
+import { t as UiMeter_default } from "./chunks/UiMeter.js";
 import { t as UiNavItem_default } from "./chunks/UiNavItem.js";
 import { t as UiPageHeader_default } from "./chunks/UiPageHeader.js";
 import { t as UiPopover_default } from "./chunks/UiPopover.js";
@@ -56,6 +57,7 @@ import { t as UiStack_default } from "./chunks/UiStack.js";
 import { t as UiStatusMessage_default } from "./chunks/UiStatusMessage.js";
 import { t as UiSwitch_default } from "./chunks/UiSwitch.js";
 import { t as UiSwitcher_default } from "./chunks/UiSwitcher.js";
+import { t as UiTable_default } from "./chunks/UiTable.js";
 import { t as UiTabs_default } from "./chunks/UiTabs.js";
 import { t as UiText_default } from "./chunks/UiText.js";
 import { t as UiTextarea_default } from "./chunks/UiTextarea.js";
@@ -64,4 +66,4 @@ import { t as UiTopBar_default } from "./chunks/UiTopBar.js";
 import { t as UiTree_default } from "./chunks/UiTree.js";
 import { t as UiTreeItem_default } from "./chunks/UiTreeItem.js";
 import { trackInputModality } from "@threadlabs/looma/components/shared/input-modality.js";
-export { UiActionBar_default as ActionBar, UiAffordanceScope_default as AffordanceScope, UiAvatar_default as Avatar, UiAvatarGroup_default as AvatarGroup, UiBadge_default as Badge, UiBreadcrumbItem_default as BreadcrumbItem, UiBreadcrumbs_default as Breadcrumbs, UiButton_default as Button, UiCallout_default as Callout, UiCard_default as Card, UiCheckbox_default as Checkbox, UiCluster_default as Cluster, UiCombobox_default as Combobox, UiContainer_default as Container, UiContextMenu_default as ContextMenu, UiCover_default as Cover, UiDescriptionItem_default as DescriptionItem, UiDescriptionList_default as DescriptionList, UiDialog_default as Dialog, UiDisclosure_default as Disclosure, UiEditable_default as Editable, UiEditorInsertTableGrid_default as EditorInsertTableGrid, UiEditorMentionMenu_default as EditorMentionMenu, UiEditorSlashMenu_default as EditorSlashMenu, UiEditorTableContextMenu_default as EditorTableContextMenu, UiEditorTableOverlay_default as EditorTableOverlay, UiEditorTableToolbar_default as EditorTableToolbar, UiEditorToolbar_default as EditorToolbar, UiFloatingActionButton_default as FloatingActionButton, UiFormField_default as FormField, UiGrid_default as Grid, UiIcon_default as Icon, UiIconButton_default as IconButton, UiInput_default as Input, UiInputGroup_default as InputGroup, UiList_default as List, UiListItem_default as ListItem, UiMenu_default as Menu, UiMenuItem_default as MenuItem, UiNavItem_default as NavItem, UiPageHeader_default as PageHeader, UiPopover_default as Popover, UiRadio_default as Radio, UiRadioGroup_default as RadioGroup, UiReel_default as Reel, UiScrollArea_default as ScrollArea, UiSearchResultRow_default as SearchResultRow, UiSearchShell_default as SearchShell, UiSection_default as Section, UiSelect_default as Select, UiSeparator_default as Separator, UiSidebar_default as Sidebar, UiSpinner_default as Spinner, UiStack_default as Stack, UiStatusMessage_default as StatusMessage, UiSwitch_default as Switch, UiSwitcher_default as Switcher, UiTabs_default as Tabs, UiText_default as Text, UiTextarea_default as Textarea, UiToastRegion_default as ToastRegion, UiTooltip_default as Tooltip, UiTopBar_default as TopBar, UiTree_default as Tree, UiTreeItem_default as TreeItem, trackInputModality };
+export { UiActionBar_default as ActionBar, UiAffordanceScope_default as AffordanceScope, UiAvatar_default as Avatar, UiAvatarGroup_default as AvatarGroup, UiBadge_default as Badge, UiBreadcrumbItem_default as BreadcrumbItem, UiBreadcrumbs_default as Breadcrumbs, UiButton_default as Button, UiCallout_default as Callout, UiCard_default as Card, UiCheckbox_default as Checkbox, UiCluster_default as Cluster, UiCombobox_default as Combobox, UiContainer_default as Container, UiContextMenu_default as ContextMenu, UiCover_default as Cover, UiDescriptionItem_default as DescriptionItem, UiDescriptionList_default as DescriptionList, UiDialog_default as Dialog, UiDisclosure_default as Disclosure, UiEditable_default as Editable, UiEditorInsertTableGrid_default as EditorInsertTableGrid, UiEditorMentionMenu_default as EditorMentionMenu, UiEditorSlashMenu_default as EditorSlashMenu, UiEditorTableContextMenu_default as EditorTableContextMenu, UiEditorTableOverlay_default as EditorTableOverlay, UiEditorTableToolbar_default as EditorTableToolbar, UiEditorToolbar_default as EditorToolbar, UiFloatingActionButton_default as FloatingActionButton, UiFormField_default as FormField, UiGrid_default as Grid, UiIcon_default as Icon, UiIconButton_default as IconButton, UiInput_default as Input, UiInputGroup_default as InputGroup, UiList_default as List, UiListItem_default as ListItem, UiMenu_default as Menu, UiMenuItem_default as MenuItem, UiMeter_default as Meter, UiNavItem_default as NavItem, UiPageHeader_default as PageHeader, UiPopover_default as Popover, UiRadio_default as Radio, UiRadioGroup_default as RadioGroup, UiReel_default as Reel, UiScrollArea_default as ScrollArea, UiSearchResultRow_default as SearchResultRow, UiSearchShell_default as SearchShell, UiSection_default as Section, UiSelect_default as Select, UiSeparator_default as Separator, UiSidebar_default as Sidebar, UiSpinner_default as Spinner, UiStack_default as Stack, UiStatusMessage_default as StatusMessage, UiSwitch_default as Switch, UiSwitcher_default as Switcher, UiTable_default as Table, UiTabs_default as Tabs, UiText_default as Text, UiTextarea_default as Textarea, UiToastRegion_default as ToastRegion, UiTooltip_default as Tooltip, UiTopBar_default as TopBar, UiTree_default as Tree, UiTreeItem_default as TreeItem, trackInputModality };