@threadlabs/looma 0.14.1 → 0.14.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.14.1",
+  "version": "0.14.2",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/styles/ui-meter.css

@@ -0,0 +1,81 @@
+/* Generated by HTML Next 1.0.0-alpha.7. Do not edit. */
+@property --ui-meter-inline-size {
+      syntax: "*";
+      inherits: false;
+    }
+@scope ([data-component~="ui-meter"]) to ([data-component], [data-slotted]) {
+/* 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. */
+
+    :scope {
+      --_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;
+    }
+
+    :scope[data-ui-meter-state~="size=sm"] {
+      inline-size: var(--ui-meter-inline-size, 5rem);
+      block-size: var(--ui-space-1);
+    }
+
+    .fill {
+      display: block;
+      block-size: 100%;
+      background: var(--_meter-fill);
+    }
+
+    :scope[data-ui-meter-state~="tone=accent"] {
+      --_meter-fill: var(--ui-accent-solid);
+    }
+
+    :scope[data-ui-meter-state~="tone=info"] {
+      --_meter-fill: var(--ui-info-solid);
+    }
+
+    :scope[data-ui-meter-state~="tone=success"] {
+      --_meter-fill: var(--ui-success-solid);
+    }
+
+    :scope[data-ui-meter-state~="tone=warning"] {
+      --_meter-fill: var(--ui-warning-solid);
+    }
+
+    :scope[data-ui-meter-state~="tone=danger"] {
+      --_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 {
+        forced-color-adjust: none;
+        background: CanvasText;
+      }
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-meter"]) to ([data-component]) {
+/* 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. */
+
+    /* Forced colours drop backgrounds: draw the fill in the text colour inside the outlined track. */
+    @media (forced-colors: active) {
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}

package/vanilla/UiMeter.d.ts

@@ -0,0 +1,19 @@
+// Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
+export interface UiMeterEventMap {
+}
+export interface UiMeterElement extends HTMLSpanElement {
+  addEventListener<K extends keyof UiMeterEventMap>(type: K, listener: (this: UiMeterElement, event: UiMeterEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiMeterEventMap>(type: K, listener: (this: UiMeterElement, event: UiMeterEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiMeterProps {
+  label?: string | null;
+  max?: number | null;
+  size?: "sm" | "md" | null;
+  tone?: "neutral" | "accent" | "info" | "success" | "warning" | "danger" | null;
+  value?: number | null;
+  valueText?: string | null;
+  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
+  children?: readonly (string | Node)[];
+  slots?: Readonly<Record<string, readonly (string | Node)[]>>;
+}
+export declare function createUiMeter(props?: UiMeterProps): UiMeterElement;

package/vanilla/UiMeter.js

@@ -0,0 +1,28 @@
+// Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
+import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
+import "../styles/ui-meter.css";
+
+const definition = {...{"contract":{"tag":"ui-meter","props":{"label":{"type":"string","required":false,"target":{"attribute":"label"},"default":""},"max":{"type":"number","required":false,"target":{"attribute":"aria-valuemax"},"default":1},"size":{"type":{"enum":["sm","md"]},"required":false,"target":{"attribute":"size"},"default":"md"},"tone":{"type":{"enum":["neutral","accent","info","success","warning","danger"]},"required":false,"target":{"attribute":"tone"},"default":"neutral"},"value":{"type":"number","required":false,"target":{"attribute":"value"},"default":0},"valueText":{"type":"string","required":false,"target":{"attribute":"valuetext"},"default":""}}},"template":{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"role","value":"meter"},{"kind":"literal","name":"aria-valuemin","value":"0"},{"kind":"attribute","name":"aria-valuemax","expression":"max","expressionPlan":{"source":"max","ast":{"kind":"id","name":"max"},"dependencies":["max"]}},{"kind":"attribute","name":"aria-valuenow","expression":"amount","expressionPlan":{"source":"amount","ast":{"kind":"id","name":"amount"},"dependencies":["amount"]}},{"kind":"attribute","name":"aria-valuetext","expression":"{ true: valueText, false: format('%s%', whole) }[format('%s', valueText != '')]","expressionPlan":{"source":"{ true: valueText, false: format('%s%', whole) }[format('%s', valueText != '')]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"id","name":"valueText"}},{"key":"false","value":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s%"},{"kind":"id","name":"whole"}]}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":"!=","left":{"kind":"id","name":"valueText"},"right":{"kind":"literal","value":""}}]}},"dependencies":["valueText","whole"]}},{"kind":"attribute","name":"aria-label","expression":"{ true: label, false: null }[format('%s', label != '')]","expressionPlan":{"source":"{ true: label, false: null }[format('%s', label != '')]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"id","name":"label"}},{"key":"false","value":{"kind":"literal","value":null}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":"!=","left":{"kind":"id","name":"label"},"right":{"kind":"literal","value":""}}]}},"dependencies":["label"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"fill"},{"kind":"attribute","name":"inline-size","expression":"format('%s%', percent)","expressionPlan":{"source":"format('%s%', percent)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s%"},{"kind":"id","name":"percent"}]},"dependencies":["percent"]},"target":"style"}],"children":[]}]},"declarations":[{"kind":"computed","name":"amount","expression":{"source":"clamp(0, value, max)","ast":{"kind":"call","fn":"clamp","args":[{"kind":"literal","value":0},{"kind":"id","name":"value"},{"kind":"id","name":"max"}]},"dependencies":["max","value"]}},{"kind":"computed","name":"percent","expression":{"source":"{ true: amount / max * 100, false: 0 }[format('%s', max > 0)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"binary","op":"*","left":{"kind":"binary","op":"/","left":{"kind":"id","name":"amount"},"right":{"kind":"id","name":"max"}},"right":{"kind":"literal","value":100}}},{"key":"false","value":{"kind":"literal","value":0}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":">","left":{"kind":"id","name":"max"},"right":{"kind":"literal","value":0}}]}},"dependencies":["amount","max"]}},{"kind":"computed","name":"whole","expression":{"source":"percent + 0.5 - (percent + 0.5) % 1","ast":{"kind":"binary","op":"-","left":{"kind":"binary","op":"+","left":{"kind":"id","name":"percent"},"right":{"kind":"literal","value":0.5}},"right":{"kind":"binary","op":"%","left":{"kind":"binary","op":"+","left":{"kind":"id","name":"percent"},"right":{"kind":"literal","value":0.5}},"right":{"kind":"literal","value":1}}},"dependencies":["percent"]}}],"root":{"kind":"native","element":"span","choices":["span"]}},source:{file:import.meta.url},css:""};
+
+export function createUiMeter(options = {}) {
+  const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
+  const projected = [];
+  const element = document.createElement("span");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === undefined || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  if (!element.hasAttribute("role")) element.setAttribute("role", "meter");
+  if (!element.hasAttribute("aria-valuemin")) element.setAttribute("aria-valuemin", "0");
+  const value0 = componentProps["max"] === undefined ? 1 : componentProps["max"];
+  if (value0 === null || value0 === undefined) element.removeAttribute("aria-valuemax");
+  else element.setAttribute("aria-valuemax", String(value0));
+  element.setAttribute("data-component", "ui-meter");
+  const element0 = document.createElement("span");
+  element0.setAttribute("class", "fill");
+  element.append(element0);
+  manageComponentLifecycle(element, definition, { props: componentProps, projected,
+  });
+  return element;
+}
+

package/vanilla/index.js

@@ -37,6 +37,7 @@ export * from "./UiList.js";
 export * from "./UiListItem.js";
 export * from "./UiMenu.js";
 export * from "./UiMenuItem.js";
+export * from "./UiMeter.js";
 export * from "./UiNavItem.js";
 export * from "./UiPageHeader.js";
 export * from "./UiPopover.js";

package/vue/UiMeter.d.ts

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    label?: string;
+    max?: number;
+    size?: 'sm' | 'md';
+    tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger';
+    value?: number;
+    valueText?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    label: string;
+    size: "sm" | "md";
+    value: number;
+    max: number;
+    tone: "neutral" | "accent" | "info" | "success" | "warning" | "danger";
+    valueText: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/vue/UiMeter.js

@@ -0,0 +1,2 @@
+import { t as UiMeter_default } from "./chunks/UiMeter.js";
+export { UiMeter_default as default };

package/vue/UiMeter.vue

@@ -0,0 +1,194 @@
+<!-- Generated by HTML Next 1.0.0-alpha.7 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    label?: string
+    max?: number
+    size?: 'sm' | 'md'
+    tone?: 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'
+    value?: number
+    valueText?: string
+  }>(),
+  {
+    label: '',
+    max: 1,
+    size: 'md',
+    tone: 'neutral',
+    value: 0,
+    valueText: '',
+  },
+)
+
+const amount = computed(() => Math.min(Math.max(0, props.value), props.max))
+const percent = computed(() =>
+  ({
+    true: number(
+            number(amount.value) === undefined || number(props.max) === undefined
+              ? undefined
+              : number(amount.value)! / number(props.max)!,
+          ) === undefined || number(100) === undefined
+      ? undefined
+      : number(
+        number(amount.value) === undefined || number(props.max) === undefined
+          ? undefined
+          : number(amount.value)! / number(props.max)!,
+      )! * number(100)!,
+    false: 0,
+  })[`${props.max > 0}`]
+)
+const whole = computed(
+  () => (number(
+          number(percent.value) === undefined || number(0.5) === undefined
+            ? undefined
+            : number(percent.value)! + number(0.5)!,
+        ) === undefined
+      || number(
+          number(
+                number(percent.value) === undefined || number(0.5) === undefined
+                  ? undefined
+                  : number(percent.value)! + number(0.5)!,
+              ) === undefined || number(1) === undefined
+            ? undefined
+            : number(
+              number(percent.value) === undefined || number(0.5) === undefined
+                ? undefined
+                : number(percent.value)! + number(0.5)!,
+            )! % number(1)!,
+        ) === undefined
+    ? undefined
+    : number(
+      number(percent.value) === undefined || number(0.5) === undefined
+        ? undefined
+        : number(percent.value)! + number(0.5)!,
+    )! - number(
+      number(
+            number(percent.value) === undefined || number(0.5) === undefined
+              ? undefined
+              : number(percent.value)! + number(0.5)!,
+          ) === undefined || number(1) === undefined
+        ? undefined
+        : number(
+          number(percent.value) === undefined || number(0.5) === undefined
+            ? undefined
+            : number(percent.value)! + number(0.5)!,
+        )! % number(1)!,
+    )!)
+)
+
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    props.size && `size size=${props.size}`,
+    props.tone && `tone tone=${props.tone}`,
+  ].filter(Boolean).join(' ')
+)
+
+function text(value: unknown): string {
+  if (Array.isArray(value)) return value.map(text).join(' ')
+  return value === null || value === undefined || typeof value === 'object' ? '' : String(value)
+}
+
+function attribute(value: unknown): any {
+  if (
+    value === null || value === undefined || value === false
+    || (typeof value === 'object' && !Array.isArray(value))
+  ) return undefined
+  return value === true ? '' : text(value)
+}
+
+function number(value: unknown): number | undefined {
+  return typeof value === 'number' && !Number.isNaN(value) ? value : undefined
+}
+</script>
+
+<template>
+  <span
+    data-component="ui-meter"
+    role="meter"
+    aria-valuemin="0"
+    v-bind="$attrs"
+    :aria-valuemax="max"
+    :aria-valuenow="amount"
+    :aria-valuetext="typeof (({ true: valueText, false: `${whole ?? ''}%` })[`${valueText !== ''}`]) === 'boolean'
+    ? String(({ true: valueText, false: `${whole ?? ''}%` })[`${valueText !== ''}`])
+    : attribute(({ true: valueText, false: `${whole ?? ''}%` })[`${valueText !== ''}`])"
+    :aria-label="typeof (({ true: label, false: null })[`${label !== ''}`]) === 'boolean'
+    ? String(({ true: label, false: null })[`${label !== ''}`])
+    : attribute(({ true: label, false: null })[`${label !== ''}`])"
+    :data-ui-meter-state="hostState || undefined"
+  ><span class="fill" :style="{ 'inline-size': `${text(percent)}%` }"></span></span>
+</template>
+
+<style scoped>
+/* 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"] {
+  --_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"] {
+  inline-size: var(--ui-meter-inline-size, 5rem);
+  block-size: var(--ui-space-1);
+}
+
+.fill {
+  display: block;
+  block-size: 100%;
+  background: var(--_meter-fill);
+}
+
+[data-component~="ui-meter"][data-ui-meter-state~="tone=accent"] {
+  --_meter-fill: var(--ui-accent-solid);
+}
+
+[data-component~="ui-meter"][data-ui-meter-state~="tone=info"] {
+  --_meter-fill: var(--ui-info-solid);
+}
+
+[data-component~="ui-meter"][data-ui-meter-state~="tone=success"] {
+  --_meter-fill: var(--ui-success-solid);
+}
+
+[data-component~="ui-meter"][data-ui-meter-state~="tone=warning"] {
+  --_meter-fill: var(--ui-warning-solid);
+}
+
+[data-component~="ui-meter"][data-ui-meter-state~="tone=danger"] {
+  --_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 {
+    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] {
+  display: none;
+}
+</style>

package/vue/chunks/UiMeter.js

@@ -0,0 +1,82 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeStyle, openBlock } from "vue";
+//#region .build/vue/UiMeter.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"aria-valuemax",
+	"aria-valuenow",
+	"aria-valuetext",
+	"aria-label",
+	"data-ui-meter-state"
+];
+//#endregion
+//#region .build/vue/UiMeter.vue
+var UiMeter_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "UiMeter",
+	props: {
+		label: { default: "" },
+		max: { default: 1 },
+		size: { default: "md" },
+		tone: { default: "neutral" },
+		value: { default: 0 },
+		valueText: { default: "" }
+	},
+	setup(__props) {
+		const props = __props;
+		const amount = computed(() => Math.min(Math.max(0, props.value), props.max));
+		const percent = computed(() => ({
+			true: number(number(amount.value) === void 0 || number(props.max) === void 0 ? void 0 : number(amount.value) / number(props.max)) === void 0 || number(100) === void 0 ? void 0 : number(number(amount.value) === void 0 || number(props.max) === void 0 ? void 0 : number(amount.value) / number(props.max)) * number(100),
+			false: 0
+		})[`${props.max > 0}`]);
+		const whole = computed(() => number(number(percent.value) === void 0 || number(.5) === void 0 ? void 0 : number(percent.value) + number(.5)) === void 0 || number(number(number(percent.value) === void 0 || number(.5) === void 0 ? void 0 : number(percent.value) + number(.5)) === void 0 || number(1) === void 0 ? void 0 : number(number(percent.value) === void 0 || number(.5) === void 0 ? void 0 : number(percent.value) + number(.5)) % number(1)) === void 0 ? void 0 : number(number(percent.value) === void 0 || number(.5) === void 0 ? void 0 : number(percent.value) + number(.5)) - number(number(number(percent.value) === void 0 || number(.5) === void 0 ? void 0 : number(percent.value) + number(.5)) === void 0 || number(1) === void 0 ? void 0 : number(number(percent.value) === void 0 || number(.5) === void 0 ? void 0 : number(percent.value) + number(.5)) % number(1)));
+		/** The values the styles' :host-state() rules test. */
+		const hostState = computed(() => [props.size && `size size=${props.size}`, props.tone && `tone tone=${props.tone}`].filter(Boolean).join(" "));
+		function text(value) {
+			if (Array.isArray(value)) return value.map(text).join(" ");
+			return value === null || value === void 0 || typeof value === "object" ? "" : String(value);
+		}
+		function attribute(value) {
+			if (value === null || value === void 0 || value === false || typeof value === "object" && !Array.isArray(value)) return void 0;
+			return value === true ? "" : text(value);
+		}
+		function number(value) {
+			return typeof value === "number" && !Number.isNaN(value) ? value : void 0;
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", mergeProps({
+				"data-component": "ui-meter",
+				role: "meter",
+				"aria-valuemin": "0"
+			}, _ctx.$attrs, {
+				"aria-valuemax": __props.max,
+				"aria-valuenow": amount.value,
+				"aria-valuetext": typeof {
+					true: __props.valueText,
+					false: `${whole.value ?? ""}%`
+				}[`${__props.valueText !== ""}`] === "boolean" ? String({
+					true: __props.valueText,
+					false: `${whole.value ?? ""}%`
+				}[`${__props.valueText !== ""}`]) : attribute({
+					true: __props.valueText,
+					false: `${whole.value ?? ""}%`
+				}[`${__props.valueText !== ""}`]),
+				"aria-label": typeof {
+					true: __props.label,
+					false: null
+				}[`${__props.label !== ""}`] === "boolean" ? String({
+					true: __props.label,
+					false: null
+				}[`${__props.label !== ""}`]) : attribute({
+					true: __props.label,
+					false: null
+				}[`${__props.label !== ""}`]),
+				"data-ui-meter-state": hostState.value || void 0
+			}), [createElementVNode("span", {
+				class: "fill",
+				style: normalizeStyle({ "inline-size": `${text(percent.value)}%` })
+			}, null, 4)], 16, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-f716cd47"]]);
+//#endregion
+export { UiMeter_default as t };

package/vue/components.css

@@ -4436,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: "*";

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