@threadlabs/looma 0.14.1 → 0.14.3

package/vue/components.css

@@ -4436,6 +4436,136 @@ 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-c0b7936e] {
+  --_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-c0b7936e] {
+  inline-size: var(--ui-meter-inline-size, 5rem);
+  block-size: var(--ui-space-1);
+}
+.fill[data-v-c0b7936e] {
+  display: block;
+  block-size: 100%;
+  background: var(--_meter-fill);
+}
+[data-component~="ui-meter"][data-ui-meter-state~="tone=accent"][data-v-c0b7936e] {
+  --_meter-fill: var(--ui-accent-solid);
+}
+[data-component~="ui-meter"][data-ui-meter-state~="tone=info"][data-v-c0b7936e] {
+  --_meter-fill: var(--ui-info-solid);
+}
+[data-component~="ui-meter"][data-ui-meter-state~="tone=success"][data-v-c0b7936e] {
+  --_meter-fill: var(--ui-success-solid);
+}
+[data-component~="ui-meter"][data-ui-meter-state~="tone=warning"][data-v-c0b7936e] {
+  --_meter-fill: var(--ui-warning-solid);
+}
+[data-component~="ui-meter"][data-ui-meter-state~="tone=danger"][data-v-c0b7936e] {
+  --_meter-fill: var(--ui-danger-solid);
+}
+
+/* Segments: the track and its fill show through a mask of equal segments with a gap between them.
+   A mask over the whole meter, rather than one element per segment, because the expression
+   language has no range to render N elements from, and one mask lines the fill up with the track
+   for free. Each period is a segment and the gap after it; N periods span the track plus one
+   trailing gap, so the segments sit symmetrically and right to left needs nothing of its own.
+   The count arrives as an attribute, not an inline custom property (which would add a style
+   attribute to every meter), so a continuous meter renders exactly as before, and the rules below
+   turn it into a number. That caps it at 12, until attr() with a type reads any count in every engine. */
+[data-component~="ui-meter"][data-ui-meter-segments="2"][data-v-c0b7936e] {
+  --_segments: 2;
+}
+[data-component~="ui-meter"][data-ui-meter-segments="3"][data-v-c0b7936e] {
+  --_segments: 3;
+}
+[data-component~="ui-meter"][data-ui-meter-segments="4"][data-v-c0b7936e] {
+  --_segments: 4;
+}
+[data-component~="ui-meter"][data-ui-meter-segments="5"][data-v-c0b7936e] {
+  --_segments: 5;
+}
+[data-component~="ui-meter"][data-ui-meter-segments="6"][data-v-c0b7936e] {
+  --_segments: 6;
+}
+[data-component~="ui-meter"][data-ui-meter-segments="7"][data-v-c0b7936e] {
+  --_segments: 7;
+}
+[data-component~="ui-meter"][data-ui-meter-segments="8"][data-v-c0b7936e] {
+  --_segments: 8;
+}
+[data-component~="ui-meter"][data-ui-meter-segments="9"][data-v-c0b7936e] {
+  --_segments: 9;
+}
+[data-component~="ui-meter"][data-ui-meter-segments="10"][data-v-c0b7936e] {
+  --_segments: 10;
+}
+[data-component~="ui-meter"][data-ui-meter-segments="11"][data-v-c0b7936e] {
+  --_segments: 11;
+}
+[data-component~="ui-meter"][data-ui-meter-segments="12"][data-v-c0b7936e] {
+  --_segments: 12;
+}
+[data-component~="ui-meter"][data-ui-meter-segments][data-v-c0b7936e] {
+  --_meter-gap: var(--ui-space-1);
+  --_meter-period: calc((100% + var(--_meter-gap)) / var(--_segments));
+  --_meter-segment: calc(var(--_meter-period) - var(--_meter-gap));
+
+  mask-image: repeating-linear-gradient(
+    to right,
+    #000 0 var(--_meter-segment),
+    transparent 0 var(--_meter-period)
+  );
+}
+[data-component~="ui-meter"][data-ui-meter-state~="size=sm"][data-ui-meter-segments][data-v-c0b7936e] {
+  --_meter-gap: var(--ui-space-0-5);
+}
+
+/* Forced colours drop backgrounds: draw the fill in the text colour inside the outlined track. */
+@media (forced-colors: active) {
+.fill[data-v-c0b7936e] {
+    forced-color-adjust: none;
+    background: CanvasText;
+}
+
+  /* The mask clips the track's outline, so each segment draws its own: the inset shadow draws the
+     top and bottom edges and the gradient the ends. */
+[data-component~="ui-meter"][data-ui-meter-segments][data-v-c0b7936e] {
+    forced-color-adjust: none;
+    background: repeating-linear-gradient(
+      to right,
+      CanvasText 0 1px,
+      Canvas 0 calc(var(--_meter-segment) - 1px),
+      CanvasText 0 var(--_meter-segment),
+      transparent 0 var(--_meter-period)
+    );
+    box-shadow: inset 0 0 0 1px CanvasText;
+}
+}
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-meter"][hidden][data-v-c0b7936e] {
+  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: "*";

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";

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";
@@ -65,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, 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 };
+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 };