@funstack/ui 0.1.0-alpha.2 → 0.1.0-alpha.4

package/dist/menu/menu-trigger.mjs

@@ -1,9 +1,10 @@
 "use client";
 import { useRender } from "../internal/use-render.mjs";
+import { useToolbarContext } from "../internal/toolbar-context.mjs";
 import { useDevWarning } from "../internal/use-dev-warning.mjs";
 import { usePopoverTrigger } from "../internal/use-popover-trigger.mjs";
 import { useMenuContext } from "./menu-context.mjs";
-import { edgeItem, focusItem, hasModifier } from "./menu-dom.mjs";
+import { edgeItem, focusItem, hasModifier, isRtl } from "./menu-dom.mjs";
 //#region src/menu/menu-trigger.tsx
 /**
 * Opens with the first (`"first"`) or last (`"last"`) item focused, or focuses that item when the
@@ -29,7 +30,8 @@ function isPointerClick(event) {
 /**
 * The menu button: `<button type="button" commandfor command="toggle-popover"
 * aria-haspopup="menu" aria-expanded>`. A click (Enter, Space) toggles the menu through the
-* Root's transition; ArrowDown / ArrowUp open it with the first / last item focused.
+* Root's transition; ArrowDown / ArrowUp open it with the first / last item focused (inside a
+* vertical `Toolbar.Root`: the inline-end arrow, with the first item focused).
 *
 * Owned keys (conventions 1.2): `type` (on a `<button>` only), `id`, `disabled`, `commandfor`,
 * `command`, `aria-haspopup`, `aria-expanded`, `onClick`, `onKeyDown`, `data-open`,
@@ -38,11 +40,20 @@ function isPointerClick(event) {
 function MenuTrigger({ disabled = false, className, style, children, render, ...rest }) {
 	const menu = useMenuContext("Menu.Trigger");
 	useDevWarning(menu.submenu, "Menu.Trigger: rendered in a submenu. Use Menu.SubmenuTrigger, which is also an item of the parent menu.");
+	const toolbar = useToolbarContext();
 	const onKeyDown = (event) => {
 		if (disabled || hasModifier(event)) return;
-		if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
+		let which;
+		if (toolbar?.orientation === "vertical") {
+			const openKey = isRtl(event.currentTarget) ? "ArrowLeft" : "ArrowRight";
+			if (event.key !== openKey) return;
+			which = "first";
+		} else {
+			if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
+			which = event.key === "ArrowDown" ? "first" : "last";
+		}
 		event.preventDefault();
-		openMenuWithFocus(menu, event.nativeEvent, event.key === "ArrowDown" ? "first" : "last");
+		openMenuWithFocus(menu, event.nativeEvent, which);
 	};
 	const { state, libraryProps, ref } = usePopoverTrigger(menu.popover, {
 		part: "Menu.Trigger",

package/dist/menu/menu-trigger.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"menu-trigger.mjs","names":[],"sources":["../../src/menu/menu-trigger.tsx"],"sourcesContent":["\"use client\";\nimport type { ComponentPropsWithRef, CSSProperties, KeyboardEvent, ReactNode } from \"react\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useDevWarning } from \"../internal/use-dev-warning.js\";\nimport { usePopoverTrigger } from \"../internal/use-popover-trigger.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { useMenuContext } from \"./menu-context.js\";\nimport type { MenuContextValue } from \"./menu-context.js\";\nimport { edgeItem, focusItem, hasModifier } from \"./menu-dom.js\";\n\nexport interface MenuTriggerState {\n  /** Optimistic open state. */\n  readonly open: boolean;\n  /** The Root's transition is pending (an open, a part-initiated close or a dismissal notification). */\n  readonly pending: boolean;\n  readonly disabled: boolean;\n}\n\nexport interface MenuTriggerProps extends Omit<\n  ComponentPropsWithRef<\"button\">,\n  \"onClick\" | \"onKeyDown\" | \"aria-expanded\" | \"aria-haspopup\" | \"className\" | \"style\" | \"children\"\n> {\n  /** Native `disabled`: the menu cannot be opened from this button. */\n  disabled?: boolean;\n  className?: StateValue<string | undefined, MenuTriggerState>;\n  style?: StateValue<CSSProperties | undefined, MenuTriggerState>;\n  /** Rendered from optimistic state; must not suspend. */\n  children?: StateValue<ReactNode, MenuTriggerState>;\n  /** Should render a `<button>` (the command path before hydration). */\n  render?: RenderProp<ComponentPropsWithRef<\"button\">, MenuTriggerState>;\n}\n\n/**\n * Opens with the first (`\"first\"`) or last (`\"last\"`) item focused, or focuses that item when the\n * menu is already open (a pre-hydration open, walkthrough 10). Shared with SubmenuTrigger.\n */\nexport function openMenuWithFocus(\n  menu: MenuContextValue,\n  event: Event,\n  which: \"first\" | \"last\",\n): void {\n  const { popover } = menu;\n  if (popover.intended()) {\n    const popup = popover.popupRef.current;\n    if (popup !== null && popup.matches(\":popover-open\")) {\n      const item = edgeItem(popup, which);\n      if (item !== null) focusItem(item);\n    }\n    return;\n  }\n  menu.setOpenCause(which, isPointerClick(event));\n  popover.requestOpen(event, \"activate\");\n}\n\n/** A click from a pointing device (`detail` counts clicks; keyboard and `click()` give 0). */\nexport function isPointerClick(event: Event): boolean {\n  return event.type === \"click\" && (event as MouseEvent).detail > 0;\n}\n\n/**\n * The menu button: `<button type=\"button\" commandfor command=\"toggle-popover\"\n * aria-haspopup=\"menu\" aria-expanded>`. A click (Enter, Space) toggles the menu through the\n * Root's transition; ArrowDown / ArrowUp open it with the first / last item focused.\n *\n * Owned keys (conventions 1.2): `type` (on a `<button>` only), `id`, `disabled`, `commandfor`,\n * `command`, `aria-haspopup`, `aria-expanded`, `onClick`, `onKeyDown`, `data-open`,\n * `data-pending`, `data-disabled`.\n */\nexport function MenuTrigger({\n  disabled = false,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: MenuTriggerProps) {\n  const menu = useMenuContext(\"Menu.Trigger\");\n  useDevWarning(\n    menu.submenu,\n    \"Menu.Trigger: rendered in a submenu. Use Menu.SubmenuTrigger, which is also an item of the \" +\n      \"parent menu.\",\n  );\n\n  const onKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (disabled || hasModifier(event)) return;\n    if (event.key !== \"ArrowDown\" && event.key !== \"ArrowUp\") return;\n    // No page scroll; Enter and Space stay the native click.\n    event.preventDefault();\n    openMenuWithFocus(menu, event.nativeEvent, event.key === \"ArrowDown\" ? \"first\" : \"last\");\n  };\n\n  const { state, libraryProps, ref } = usePopoverTrigger(menu.popover, {\n    part: \"Menu.Trigger\",\n    disabled,\n    render,\n    handlers: { onKeyDown },\n    activate: (event) => {\n      const native = event.nativeEvent;\n      if (menu.popover.intended()) {\n        menu.popover.requestClose(native, \"activate\");\n      } else {\n        menu.setOpenCause(\"first\", isPointerClick(native));\n        menu.popover.requestOpen(native, \"activate\");\n      }\n    },\n  });\n\n  return useRender<ComponentPropsWithRef<\"button\">, MenuTriggerState>({\n    defaultElement: \"button\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps: {\n      ...libraryProps,\n      id: menu.triggerId,\n      \"aria-haspopup\": \"menu\",\n    },\n    ref,\n  });\n}\n\nMenuTrigger.displayName = \"MenuTrigger\";\n"],"mappings":";;;;;;;;;;;AAoCA,SAAgB,kBACd,MACA,OACA,OACM;CACN,MAAM,EAAE,YAAY;CACpB,IAAI,QAAQ,SAAS,GAAG;EACtB,MAAM,QAAQ,QAAQ,SAAS;EAC/B,IAAI,UAAU,QAAQ,MAAM,QAAQ,eAAe,GAAG;GACpD,MAAM,OAAO,SAAS,OAAO,KAAK;GAClC,IAAI,SAAS,MAAM,UAAU,IAAI;EACnC;EACA;CACF;CACA,KAAK,aAAa,OAAO,eAAe,KAAK,CAAC;CAC9C,QAAQ,YAAY,OAAO,UAAU;AACvC;;AAGA,SAAgB,eAAe,OAAuB;CACpD,OAAO,MAAM,SAAS,WAAY,MAAqB,SAAS;AAClE;;;;;;;;;;AAWA,SAAgB,YAAY,EAC1B,WAAW,OACX,WACA,OACA,UACA,QACA,GAAG,QACgB;CACnB,MAAM,OAAO,eAAe,cAAc;CAC1C,cACE,KAAK,SACL,yGAEF;CAEA,MAAM,aAAa,UAA4C;EAC7D,IAAI,YAAY,YAAY,KAAK,GAAG;EACpC,IAAI,MAAM,QAAQ,eAAe,MAAM,QAAQ,WAAW;EAE1D,MAAM,eAAe;EACrB,kBAAkB,MAAM,MAAM,aAAa,MAAM,QAAQ,cAAc,UAAU,MAAM;CACzF;CAEA,MAAM,EAAE,OAAO,cAAc,QAAQ,kBAAkB,KAAK,SAAS;EACnE,MAAM;EACN;EACA;EACA,UAAU,EAAE,UAAU;EACtB,WAAW,UAAU;GACnB,MAAM,SAAS,MAAM;GACrB,IAAI,KAAK,QAAQ,SAAS,GACxB,KAAK,QAAQ,aAAa,QAAQ,UAAU;QACvC;IACL,KAAK,aAAa,SAAS,eAAe,MAAM,CAAC;IACjD,KAAK,QAAQ,YAAY,QAAQ,UAAU;GAC7C;EACF;CACF,CAAC;CAED,OAAO,UAA6D;EAClE,gBAAgB;EAChB;EACA;EACA;EACA;EACA;EACA,OAAO;EACP,cAAc;GACZ,GAAG;GACH,IAAI,KAAK;GACT,iBAAiB;EACnB;EACA;CACF,CAAC;AACH;AAEA,YAAY,cAAc"}
+{"version":3,"file":"menu-trigger.mjs","names":[],"sources":["../../src/menu/menu-trigger.tsx"],"sourcesContent":["\"use client\";\nimport type { ComponentPropsWithRef, CSSProperties, KeyboardEvent, ReactNode } from \"react\";\nimport { useToolbarContext } from \"../internal/toolbar-context.js\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useDevWarning } from \"../internal/use-dev-warning.js\";\nimport { usePopoverTrigger } from \"../internal/use-popover-trigger.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { useMenuContext } from \"./menu-context.js\";\nimport type { MenuContextValue } from \"./menu-context.js\";\nimport { edgeItem, focusItem, hasModifier, isRtl } from \"./menu-dom.js\";\n\nexport interface MenuTriggerState {\n  /** Optimistic open state. */\n  readonly open: boolean;\n  /** The Root's transition is pending (an open, a part-initiated close or a dismissal notification). */\n  readonly pending: boolean;\n  readonly disabled: boolean;\n}\n\nexport interface MenuTriggerProps extends Omit<\n  ComponentPropsWithRef<\"button\">,\n  \"onClick\" | \"onKeyDown\" | \"aria-expanded\" | \"aria-haspopup\" | \"className\" | \"style\" | \"children\"\n> {\n  /** Native `disabled`: the menu cannot be opened from this button. */\n  disabled?: boolean;\n  className?: StateValue<string | undefined, MenuTriggerState>;\n  style?: StateValue<CSSProperties | undefined, MenuTriggerState>;\n  /** Rendered from optimistic state; must not suspend. */\n  children?: StateValue<ReactNode, MenuTriggerState>;\n  /** Should render a `<button>` (the command path before hydration). */\n  render?: RenderProp<ComponentPropsWithRef<\"button\">, MenuTriggerState>;\n}\n\n/**\n * Opens with the first (`\"first\"`) or last (`\"last\"`) item focused, or focuses that item when the\n * menu is already open (a pre-hydration open, walkthrough 10). Shared with SubmenuTrigger.\n */\nexport function openMenuWithFocus(\n  menu: MenuContextValue,\n  event: Event,\n  which: \"first\" | \"last\",\n): void {\n  const { popover } = menu;\n  if (popover.intended()) {\n    const popup = popover.popupRef.current;\n    if (popup !== null && popup.matches(\":popover-open\")) {\n      const item = edgeItem(popup, which);\n      if (item !== null) focusItem(item);\n    }\n    return;\n  }\n  menu.setOpenCause(which, isPointerClick(event));\n  popover.requestOpen(event, \"activate\");\n}\n\n/** A click from a pointing device (`detail` counts clicks; keyboard and `click()` give 0). */\nexport function isPointerClick(event: Event): boolean {\n  return event.type === \"click\" && (event as MouseEvent).detail > 0;\n}\n\n/**\n * The menu button: `<button type=\"button\" commandfor command=\"toggle-popover\"\n * aria-haspopup=\"menu\" aria-expanded>`. A click (Enter, Space) toggles the menu through the\n * Root's transition; ArrowDown / ArrowUp open it with the first / last item focused (inside a\n * vertical `Toolbar.Root`: the inline-end arrow, with the first item focused).\n *\n * Owned keys (conventions 1.2): `type` (on a `<button>` only), `id`, `disabled`, `commandfor`,\n * `command`, `aria-haspopup`, `aria-expanded`, `onClick`, `onKeyDown`, `data-open`,\n * `data-pending`, `data-disabled`.\n */\nexport function MenuTrigger({\n  disabled = false,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: MenuTriggerProps) {\n  const menu = useMenuContext(\"Menu.Trigger\");\n  useDevWarning(\n    menu.submenu,\n    \"Menu.Trigger: rendered in a submenu. Use Menu.SubmenuTrigger, which is also an item of the \" +\n      \"parent menu.\",\n  );\n\n  // Inside a vertical Toolbar, ArrowDown / ArrowUp are the Toolbar's: the trigger opens on the\n  // inline-end arrow instead, as a submenu trigger does (design/components/toggle-group.md 7.4).\n  const toolbar = useToolbarContext();\n  const onKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (disabled || hasModifier(event)) return;\n    let which: \"first\" | \"last\";\n    if (toolbar?.orientation === \"vertical\") {\n      const openKey = isRtl(event.currentTarget) ? \"ArrowLeft\" : \"ArrowRight\";\n      if (event.key !== openKey) return;\n      which = \"first\";\n    } else {\n      if (event.key !== \"ArrowDown\" && event.key !== \"ArrowUp\") return;\n      which = event.key === \"ArrowDown\" ? \"first\" : \"last\";\n    }\n    // No page scroll, and an enclosing Toolbar sees `defaultPrevented`; Enter and Space stay the\n    // native click.\n    event.preventDefault();\n    openMenuWithFocus(menu, event.nativeEvent, which);\n  };\n\n  const { state, libraryProps, ref } = usePopoverTrigger(menu.popover, {\n    part: \"Menu.Trigger\",\n    disabled,\n    render,\n    handlers: { onKeyDown },\n    activate: (event) => {\n      const native = event.nativeEvent;\n      if (menu.popover.intended()) {\n        menu.popover.requestClose(native, \"activate\");\n      } else {\n        menu.setOpenCause(\"first\", isPointerClick(native));\n        menu.popover.requestOpen(native, \"activate\");\n      }\n    },\n  });\n\n  return useRender<ComponentPropsWithRef<\"button\">, MenuTriggerState>({\n    defaultElement: \"button\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps: {\n      ...libraryProps,\n      id: menu.triggerId,\n      \"aria-haspopup\": \"menu\",\n    },\n    ref,\n  });\n}\n\nMenuTrigger.displayName = \"MenuTrigger\";\n"],"mappings":";;;;;;;;;;;;AAqCA,SAAgB,kBACd,MACA,OACA,OACM;CACN,MAAM,EAAE,YAAY;CACpB,IAAI,QAAQ,SAAS,GAAG;EACtB,MAAM,QAAQ,QAAQ,SAAS;EAC/B,IAAI,UAAU,QAAQ,MAAM,QAAQ,eAAe,GAAG;GACpD,MAAM,OAAO,SAAS,OAAO,KAAK;GAClC,IAAI,SAAS,MAAM,UAAU,IAAI;EACnC;EACA;CACF;CACA,KAAK,aAAa,OAAO,eAAe,KAAK,CAAC;CAC9C,QAAQ,YAAY,OAAO,UAAU;AACvC;;AAGA,SAAgB,eAAe,OAAuB;CACpD,OAAO,MAAM,SAAS,WAAY,MAAqB,SAAS;AAClE;;;;;;;;;;;AAYA,SAAgB,YAAY,EAC1B,WAAW,OACX,WACA,OACA,UACA,QACA,GAAG,QACgB;CACnB,MAAM,OAAO,eAAe,cAAc;CAC1C,cACE,KAAK,SACL,yGAEF;CAIA,MAAM,UAAU,kBAAkB;CAClC,MAAM,aAAa,UAA4C;EAC7D,IAAI,YAAY,YAAY,KAAK,GAAG;EACpC,IAAI;EACJ,IAAI,SAAS,gBAAgB,YAAY;GACvC,MAAM,UAAU,MAAM,MAAM,aAAa,IAAI,cAAc;GAC3D,IAAI,MAAM,QAAQ,SAAS;GAC3B,QAAQ;EACV,OAAO;GACL,IAAI,MAAM,QAAQ,eAAe,MAAM,QAAQ,WAAW;GAC1D,QAAQ,MAAM,QAAQ,cAAc,UAAU;EAChD;EAGA,MAAM,eAAe;EACrB,kBAAkB,MAAM,MAAM,aAAa,KAAK;CAClD;CAEA,MAAM,EAAE,OAAO,cAAc,QAAQ,kBAAkB,KAAK,SAAS;EACnE,MAAM;EACN;EACA;EACA,UAAU,EAAE,UAAU;EACtB,WAAW,UAAU;GACnB,MAAM,SAAS,MAAM;GACrB,IAAI,KAAK,QAAQ,SAAS,GACxB,KAAK,QAAQ,aAAa,QAAQ,UAAU;QACvC;IACL,KAAK,aAAa,SAAS,eAAe,MAAM,CAAC;IACjD,KAAK,QAAQ,YAAY,QAAQ,UAAU;GAC7C;EACF;CACF,CAAC;CAED,OAAO,UAA6D;EAClE,gBAAgB;EAChB;EACA;EACA;EACA;EACA;EACA,OAAO;EACP,cAAc;GACZ,GAAG;GACH,IAAI,KAAK;GACT,iBAAiB;EACnB;EACA;CACF,CAAC;AACH;AAEA,YAAY,cAAc"}

package/dist/meter/index.d.mts

@@ -0,0 +1,24 @@
+import "../internal/platform-attributes.mjs";
+import { MeterRegion } from "./meter-region.mjs";
+import { MeterRoot, MeterRootProps, MeterState } from "./meter-root.mjs";
+import { MeterIndicator, MeterIndicatorProps } from "./meter-indicator.mjs";
+import { MeterLabel, MeterLabelProps } from "./meter-label.mjs";
+import { MeterTrack, MeterTrackProps } from "./meter-track.mjs";
+import { MeterValue, MeterValueProps } from "./meter-value.mjs";
+//#region src/meter/index.d.ts
+/**
+ * Meter (WAI-ARIA `meter`): `Root` (`div[role=meter]`, directive-free, so a Server Component may
+ * render it and it runs on the server), `Track`, `Indicator` (sized by your CSS from
+ * `--meter-value`), `Label` and `Value`. `low` / `high` / `optimum` decide the region
+ * (`data-region`: `optimum`, `suboptimum`, `even-less-good`) with the platform's rules.
+ */
+export declare const Meter: {
+  readonly Root: typeof MeterRoot;
+  readonly Track: typeof MeterTrack;
+  readonly Indicator: typeof MeterIndicator;
+  readonly Label: typeof MeterLabel;
+  readonly Value: typeof MeterValue;
+};
+//#endregion
+export type { MeterIndicatorProps, MeterLabelProps, MeterRegion, MeterRootProps, MeterState, MeterTrackProps, MeterValueProps };
+//# sourceMappingURL=index.d.mts.map

package/dist/meter/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../../src/meter/index.ts"],"mappings":";;;;;;;;;;;;;;qBAea;WACX,aAAI;WACJ,cAAK;WACL,kBAAS;WACT,cAAK;WACL,cAAK"}

package/dist/meter/index.mjs

@@ -0,0 +1,23 @@
+import { MeterIndicator } from "./meter-indicator.mjs";
+import { MeterLabel } from "./meter-label.mjs";
+import { MeterRoot } from "./meter-root.mjs";
+import { MeterTrack } from "./meter-track.mjs";
+import { MeterValue } from "./meter-value.mjs";
+//#region src/meter/index.ts
+/**
+* Meter (WAI-ARIA `meter`): `Root` (`div[role=meter]`, directive-free, so a Server Component may
+* render it and it runs on the server), `Track`, `Indicator` (sized by your CSS from
+* `--meter-value`), `Label` and `Value`. `low` / `high` / `optimum` decide the region
+* (`data-region`: `optimum`, `suboptimum`, `even-less-good`) with the platform's rules.
+*/
+const Meter = {
+	Root: MeterRoot,
+	Track: MeterTrack,
+	Indicator: MeterIndicator,
+	Label: MeterLabel,
+	Value: MeterValue
+};
+//#endregion
+export { Meter };
+
+//# sourceMappingURL=index.mjs.map

package/dist/meter/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/meter/index.ts"],"sourcesContent":["// Ships the platform attribute typings with this subpath (conventions 7.4). Type-only: the\n// built JS has no import of it.\nimport \"../internal/platform-attributes.js\";\nimport { MeterIndicator } from \"./meter-indicator.js\";\nimport { MeterLabel } from \"./meter-label.js\";\nimport { MeterRoot } from \"./meter-root.js\";\nimport { MeterTrack } from \"./meter-track.js\";\nimport { MeterValue } from \"./meter-value.js\";\n\n/**\n * Meter (WAI-ARIA `meter`): `Root` (`div[role=meter]`, directive-free, so a Server Component may\n * render it and it runs on the server), `Track`, `Indicator` (sized by your CSS from\n * `--meter-value`), `Label` and `Value`. `low` / `high` / `optimum` decide the region\n * (`data-region`: `optimum`, `suboptimum`, `even-less-good`) with the platform's rules.\n */\nexport const Meter = {\n  Root: MeterRoot,\n  Track: MeterTrack,\n  Indicator: MeterIndicator,\n  Label: MeterLabel,\n  Value: MeterValue,\n} as const;\n\nexport type { MeterRootProps, MeterState, MeterRegion } from \"./meter-root.js\";\nexport type { MeterTrackProps } from \"./meter-track.js\";\nexport type { MeterIndicatorProps } from \"./meter-indicator.js\";\nexport type { MeterLabelProps } from \"./meter-label.js\";\nexport type { MeterValueProps } from \"./meter-value.js\";\n"],"mappings":";;;;;;;;;;;;AAeA,MAAa,QAAQ;CACnB,MAAM;CACN,OAAO;CACP,WAAW;CACX,OAAO;CACP,OAAO;AACT"}

package/dist/meter/meter-context.mjs

@@ -0,0 +1,13 @@
+"use client";
+import { createContext, use } from "react";
+//#region src/meter/meter-context.ts
+const MeterContext = createContext(null);
+function useMeterContext(part) {
+	const context = use(MeterContext);
+	if (context === null) throw new Error(`${part} must be rendered inside a Meter.Root.`);
+	return context;
+}
+//#endregion
+export { MeterContext, useMeterContext };
+
+//# sourceMappingURL=meter-context.mjs.map

package/dist/meter/meter-context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"meter-context.mjs","names":[],"sources":["../../src/meter/meter-context.ts"],"sourcesContent":["\"use client\";\nimport { createContext, use } from \"react\";\nimport type { MeterState } from \"./meter-root.js\";\n\n/**\n * What the directive-free `Meter.Root` provides to its parts: plain serialisable data, so the\n * provider can be rendered by a Root running as a Server Component (design/components/progress.md\n * 8.1).\n */\nexport interface MeterContextValue {\n  /** The Root's `useId`; `Meter.Label` renders `${id}-label`. */\n  readonly id: string;\n  readonly state: MeterState;\n}\n\nexport const MeterContext = createContext<MeterContextValue | null>(null);\n\nexport function useMeterContext(part: string): MeterContextValue {\n  const context = use(MeterContext);\n  if (context === null) {\n    throw new Error(`${part} must be rendered inside a Meter.Root.`);\n  }\n  return context;\n}\n"],"mappings":";;;AAeA,MAAa,eAAe,cAAwC,IAAI;AAExE,SAAgB,gBAAgB,MAAiC;CAC/D,MAAM,UAAU,IAAI,YAAY;CAChC,IAAI,YAAY,MACd,MAAM,IAAI,MAAM,GAAG,KAAK,uCAAuC;CAEjE,OAAO;AACT"}

package/dist/meter/meter-indicator.d.mts

@@ -0,0 +1,19 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { MeterState } from "./meter-root.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/meter/meter-indicator.d.ts
+export interface MeterIndicatorProps extends Omit<ComponentPropsWithRef<"span">, "className" | "style" | "children"> {
+  className?: StateValue<string | undefined, MeterState>;
+  style?: StateValue<CSSProperties | undefined, MeterState>;
+  children?: StateValue<ReactNode, MeterState>;
+  render?: RenderProp<ComponentPropsWithRef<"span">, MeterState>;
+}
+/**
+ * `Meter.Indicator`: the fill. It renders no inline size: the consumer's CSS sizes it from the Root's inherited custom property. Owned keys: `data-region`.
+ */
+export declare function MeterIndicator({ className, style, children, render, ...rest }: MeterIndicatorProps): ReactNode;
+export declare namespace MeterIndicator {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=meter-indicator.d.mts.map

package/dist/meter/meter-indicator.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"meter-indicator.d.mts","names":[],"sources":["../../src/meter/meter-indicator.tsx"],"mappings":";;;;iBAOiB,4BAA4B,KAC3C;EAGA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,+BAA+B;;;;;wBAMrC,iBACd,WACA,OACA,UACA,WACG,QACF,sBAAmB;yBANN"}

package/dist/meter/meter-indicator.mjs

@@ -0,0 +1,25 @@
+"use client";
+import { useRender } from "../internal/use-render.mjs";
+import { useMeterContext } from "./meter-context.mjs";
+//#region src/meter/meter-indicator.tsx
+/**
+* `Meter.Indicator`: the fill. It renders no inline size: the consumer's CSS sizes it from the Root's inherited custom property. Owned keys: `data-region`.
+*/
+function MeterIndicator({ className, style, children, render, ...rest }) {
+	const { state } = useMeterContext("Meter.Indicator");
+	return useRender({
+		defaultElement: "span",
+		render,
+		state,
+		className,
+		style,
+		children,
+		props: rest,
+		libraryProps: { "data-region": state.region }
+	});
+}
+MeterIndicator.displayName = "MeterIndicator";
+//#endregion
+export { MeterIndicator };
+
+//# sourceMappingURL=meter-indicator.mjs.map

package/dist/meter/meter-indicator.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"meter-indicator.mjs","names":[],"sources":["../../src/meter/meter-indicator.tsx"],"sourcesContent":["\"use client\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { useMeterContext } from \"./meter-context.js\";\nimport type { MeterState } from \"./meter-root.js\";\n\nexport interface MeterIndicatorProps extends Omit<\n  ComponentPropsWithRef<\"span\">,\n  \"className\" | \"style\" | \"children\"\n> {\n  className?: StateValue<string | undefined, MeterState>;\n  style?: StateValue<CSSProperties | undefined, MeterState>;\n  children?: StateValue<ReactNode, MeterState>;\n  render?: RenderProp<ComponentPropsWithRef<\"span\">, MeterState>;\n}\n\n/**\n * `Meter.Indicator`: the fill. It renders no inline size: the consumer's CSS sizes it from the Root's inherited custom property. Owned keys: `data-region`.\n */\nexport function MeterIndicator({\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: MeterIndicatorProps) {\n  const { state } = useMeterContext(\"Meter.Indicator\");\n  return useRender<ComponentPropsWithRef<\"span\">, MeterState>({\n    defaultElement: \"span\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps: {\n      \"data-region\": state.region,\n    },\n  });\n}\n\nMeterIndicator.displayName = \"MeterIndicator\";\n"],"mappings":";;;;;;;AAoBA,SAAgB,eAAe,EAC7B,WACA,OACA,UACA,QACA,GAAG,QACmB;CACtB,MAAM,EAAE,UAAU,gBAAgB,iBAAiB;CACnD,OAAO,UAAqD;EAC1D,gBAAgB;EAChB;EACA;EACA;EACA;EACA;EACA,OAAO;EACP,cAAc,EACZ,eAAe,MAAM,OACvB;CACF,CAAC;AACH;AAEA,eAAe,cAAc"}

package/dist/meter/meter-label.d.mts

@@ -0,0 +1,19 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { MeterState } from "./meter-root.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/meter/meter-label.d.ts
+export interface MeterLabelProps extends Omit<ComponentPropsWithRef<"span">, "id" | "className" | "style" | "children"> {
+  className?: StateValue<string | undefined, MeterState>;
+  style?: StateValue<CSSProperties | undefined, MeterState>;
+  children?: StateValue<ReactNode, MeterState>;
+  render?: RenderProp<ComponentPropsWithRef<"span">, MeterState>;
+}
+/**
+ * `Meter.Label`: a `span` whose id the Root always references through `aria-labelledby` (the Root is not a labelable element, so a `<label for>` would associate nothing). Owned keys: `id`, `data-region`.
+ */
+export declare function MeterLabel({ className, style, children, render, ...rest }: MeterLabelProps): ReactNode;
+export declare namespace MeterLabel {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=meter-label.d.mts.map

package/dist/meter/meter-label.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"meter-label.d.mts","names":[],"sources":["../../src/meter/meter-label.tsx"],"mappings":";;;;iBAOiB,wBAAwB,KACvC;EAGA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,+BAA+B;;;;;wBAMrC,aAAa,WAAW,OAAO,UAAU,WAAW,QAAQ,kBAAe;yBAA3E"}

package/dist/meter/meter-label.mjs

@@ -0,0 +1,28 @@
+"use client";
+import { useRender } from "../internal/use-render.mjs";
+import { useMeterContext } from "./meter-context.mjs";
+//#region src/meter/meter-label.tsx
+/**
+* `Meter.Label`: a `span` whose id the Root always references through `aria-labelledby` (the Root is not a labelable element, so a `<label for>` would associate nothing). Owned keys: `id`, `data-region`.
+*/
+function MeterLabel({ className, style, children, render, ...rest }) {
+	const { id, state } = useMeterContext("Meter.Label");
+	return useRender({
+		defaultElement: "span",
+		render,
+		state,
+		className,
+		style,
+		children,
+		props: rest,
+		libraryProps: {
+			id: `${id}-label`,
+			"data-region": state.region
+		}
+	});
+}
+MeterLabel.displayName = "MeterLabel";
+//#endregion
+export { MeterLabel };
+
+//# sourceMappingURL=meter-label.mjs.map

package/dist/meter/meter-label.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"meter-label.mjs","names":[],"sources":["../../src/meter/meter-label.tsx"],"sourcesContent":["\"use client\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { useMeterContext } from \"./meter-context.js\";\nimport type { MeterState } from \"./meter-root.js\";\n\nexport interface MeterLabelProps extends Omit<\n  ComponentPropsWithRef<\"span\">,\n  \"id\" | \"className\" | \"style\" | \"children\"\n> {\n  className?: StateValue<string | undefined, MeterState>;\n  style?: StateValue<CSSProperties | undefined, MeterState>;\n  children?: StateValue<ReactNode, MeterState>;\n  render?: RenderProp<ComponentPropsWithRef<\"span\">, MeterState>;\n}\n\n/**\n * `Meter.Label`: a `span` whose id the Root always references through `aria-labelledby` (the Root is not a labelable element, so a `<label for>` would associate nothing). Owned keys: `id`, `data-region`.\n */\nexport function MeterLabel({ className, style, children, render, ...rest }: MeterLabelProps) {\n  const { id, state } = useMeterContext(\"Meter.Label\");\n  return useRender<ComponentPropsWithRef<\"span\">, MeterState>({\n    defaultElement: \"span\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps: {\n      id: `${id}-label`,\n      \"data-region\": state.region,\n    },\n  });\n}\n\nMeterLabel.displayName = \"MeterLabel\";\n"],"mappings":";;;;;;;AAoBA,SAAgB,WAAW,EAAE,WAAW,OAAO,UAAU,QAAQ,GAAG,QAAyB;CAC3F,MAAM,EAAE,IAAI,UAAU,gBAAgB,aAAa;CACnD,OAAO,UAAqD;EAC1D,gBAAgB;EAChB;EACA;EACA;EACA;EACA;EACA,OAAO;EACP,cAAc;GACZ,IAAI,GAAG,GAAG;GACV,eAAe,MAAM;EACvB;CACF,CAAC;AACH;AAEA,WAAW,cAAc"}

package/dist/meter/meter-region.d.mts

@@ -0,0 +1,4 @@
+//#region src/meter/meter-region.d.ts
+export type MeterRegion = "optimum" | "suboptimum" | "even-less-good";
+//#endregion
+//# sourceMappingURL=meter-region.d.mts.map

package/dist/meter/meter-region.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"meter-region.d.mts","names":[],"sources":["../../src/meter/meter-region.ts"],"mappings":";YAGY"}

package/dist/meter/meter-region.mjs

@@ -0,0 +1,39 @@
+import { clamp } from "../internal/range-value.mjs";
+//#region src/meter/meter-region.ts
+function given(value) {
+	return value !== void 0 && Number.isFinite(value);
+}
+/**
+* HTML's defaults and clamping for `<meter>`, in order: `low` (default `min`) to `[min, max]`,
+* `high` (default `max`) to `[low, max]`, `optimum` (default the midpoint) to `[min, max]`. A
+* non-finite boundary is treated as absent, as the platform's attribute parser does.
+*/
+function resolveMeterBounds(min, max, low, high, optimum) {
+	const resolvedLow = clamp(given(low) ? low : min, min, max);
+	return {
+		low: resolvedLow,
+		high: clamp(given(high) ? high : max, resolvedLow, max),
+		optimum: clamp(given(optimum) ? optimum : (min + max) / 2, min, max)
+	};
+}
+/**
+* The gauge region of a meter, with Chromium's comparison operators
+* (`HTMLMeterElement::GetGaugeRegion`). Expects the clamped value and bounds.
+*/
+function meterRegion(value, low, high, optimum) {
+	if (optimum < low) {
+		if (value <= low) return "optimum";
+		if (value <= high) return "suboptimum";
+		return "even-less-good";
+	}
+	if (high < optimum) {
+		if (high <= value) return "optimum";
+		if (low <= value) return "suboptimum";
+		return "even-less-good";
+	}
+	return low <= value && value <= high ? "optimum" : "suboptimum";
+}
+//#endregion
+export { meterRegion, resolveMeterBounds };
+
+//# sourceMappingURL=meter-region.mjs.map

package/dist/meter/meter-region.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"meter-region.mjs","names":[],"sources":["../../src/meter/meter-region.ts"],"sourcesContent":["// No \"use client\": pure functions (design/components/progress.md 2.4).\nimport { clamp } from \"../internal/range-value.js\";\n\nexport type MeterRegion = \"optimum\" | \"suboptimum\" | \"even-less-good\";\n\nexport interface MeterBounds {\n  readonly low: number;\n  readonly high: number;\n  readonly optimum: number;\n}\n\nfunction given(value: number | undefined): value is number {\n  return value !== undefined && Number.isFinite(value);\n}\n\n/**\n * HTML's defaults and clamping for `<meter>`, in order: `low` (default `min`) to `[min, max]`,\n * `high` (default `max`) to `[low, max]`, `optimum` (default the midpoint) to `[min, max]`. A\n * non-finite boundary is treated as absent, as the platform's attribute parser does.\n */\nexport function resolveMeterBounds(\n  min: number,\n  max: number,\n  low: number | undefined,\n  high: number | undefined,\n  optimum: number | undefined,\n): MeterBounds {\n  const resolvedLow = clamp(given(low) ? low : min, min, max);\n  const resolvedHigh = clamp(given(high) ? high : max, resolvedLow, max);\n  const resolvedOptimum = clamp(given(optimum) ? optimum : (min + max) / 2, min, max);\n  return { low: resolvedLow, high: resolvedHigh, optimum: resolvedOptimum };\n}\n\n/**\n * The gauge region of a meter, with Chromium's comparison operators\n * (`HTMLMeterElement::GetGaugeRegion`). Expects the clamped value and bounds.\n */\nexport function meterRegion(\n  value: number,\n  low: number,\n  high: number,\n  optimum: number,\n): MeterRegion {\n  if (optimum < low) {\n    // Lower is better.\n    if (value <= low) return \"optimum\";\n    if (value <= high) return \"suboptimum\";\n    return \"even-less-good\";\n  }\n  if (high < optimum) {\n    // Higher is better.\n    if (high <= value) return \"optimum\";\n    if (low <= value) return \"suboptimum\";\n    return \"even-less-good\";\n  }\n  // The middle is best: never \"even-less-good\".\n  return low <= value && value <= high ? \"optimum\" : \"suboptimum\";\n}\n"],"mappings":";;AAWA,SAAS,MAAM,OAA4C;CACzD,OAAO,UAAU,KAAA,KAAa,OAAO,SAAS,KAAK;AACrD;;;;;;AAOA,SAAgB,mBACd,KACA,KACA,KACA,MACA,SACa;CACb,MAAM,cAAc,MAAM,MAAM,GAAG,IAAI,MAAM,KAAK,KAAK,GAAG;CAG1D,OAAO;EAAE,KAAK;EAAa,MAFN,MAAM,MAAM,IAAI,IAAI,OAAO,KAAK,aAAa,GAEtB;EAAG,SADvB,MAAM,MAAM,OAAO,IAAI,WAAW,MAAM,OAAO,GAAG,KAAK,GACT;CAAE;AAC1E;;;;;AAMA,SAAgB,YACd,OACA,KACA,MACA,SACa;CACb,IAAI,UAAU,KAAK;EAEjB,IAAI,SAAS,KAAK,OAAO;EACzB,IAAI,SAAS,MAAM,OAAO;EAC1B,OAAO;CACT;CACA,IAAI,OAAO,SAAS;EAElB,IAAI,QAAQ,OAAO,OAAO;EAC1B,IAAI,OAAO,OAAO,OAAO;EACzB,OAAO;CACT;CAEA,OAAO,OAAO,SAAS,SAAS,OAAO,YAAY;AACrD"}

package/dist/meter/meter-root.d.mts

@@ -0,0 +1,71 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { MeterRegion } from "./meter-region.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/meter/meter-root.d.ts
+/** The state every Meter part receives. */
+export interface MeterState {
+  /** Clamped to `[min, max]`. */
+  readonly value: number;
+  readonly min: number;
+  readonly max: number;
+  /** After HTML's defaults and clamping. */
+  readonly low: number;
+  readonly high: number;
+  readonly optimum: number;
+  /** A number 0–100. */
+  readonly percentage: number;
+  /** The `Intl.NumberFormat` text of the value (or of the fraction, for the percent style). */
+  readonly formattedValue: string;
+  /** What `aria-valuetext` carries: `getAriaValueText`'s result, else `formattedValue`. */
+  readonly valueText: string | null;
+  readonly region: MeterRegion;
+}
+export interface MeterRootProps extends Omit<ComponentPropsWithRef<"div">, "role" | "aria-valuemin" | "aria-valuemax" | "aria-valuenow" | "aria-valuetext" | "defaultValue" | "defaultChecked" | "className" | "style" | "children"> {
+  /** Required: a meter always has a value. Clamped to `[min, max]`. */
+  value: number;
+  /** @default 0 */
+  min?: number;
+  /** @default 100 */
+  max?: number;
+  /** Upper bound of the "low" part of the range. Default `min`. */
+  low?: number;
+  /** Lower bound of the "high" part of the range. Default `max`. */
+  high?: number;
+  /** The best value. Default the midpoint. Decides which part of the range is `optimum`. */
+  optimum?: number;
+  /**
+   * `Intl.NumberFormat` options for `aria-valuetext` and `Meter.Value`. Default
+   * `{ style: "percent" }`. A `percent` style formats the fraction of the range; any other style
+   * formats the value. Serialisable: a Server Component may pass it.
+   */
+  format?: Intl.NumberFormatOptions;
+  /**
+   * BCP 47 tag for `Intl.NumberFormat`; default: the runtime's locale. Pass it when a client
+   * tree is server-rendered.
+   */
+  locale?: string;
+  /**
+   * The `aria-valuetext` to render instead of `formattedValue`. Called with the clamped value
+   * and the state as it would be without this prop. Return `null` to render no
+   * `aria-valuetext`.
+   */
+  getAriaValueText?: (value: number, state: MeterState) => string | null | undefined;
+  className?: StateValue<string | undefined, MeterState>;
+  style?: StateValue<CSSProperties | undefined, MeterState>;
+  children?: StateValue<ReactNode, MeterState>;
+  render?: RenderProp<ComponentPropsWithRef<"div">, MeterState>;
+}
+/**
+ * `Meter.Root`: a `div[role=meter]` with the ARIA values and `aria-valuetext` always,
+ * `data-region`, and `--meter-value` / `--meter-low` / `--meter-high` / `--meter-optimum` (the
+ * percentages) in `style`, where the consumer's entries win. Owned keys: `role`,
+ * `aria-valuemin`, `aria-valuemax`, `aria-valuenow`, `aria-valuetext`, `aria-labelledby`
+ * (token-merged: the consumer's tokens, then `Meter.Label`'s id, always), `data-region`.
+ */
+export declare function MeterRoot({ value, min, max, low, high, optimum, format, locale, getAriaValueText, className, style, children, render, ref, ...rest }: MeterRootProps): import("react").JSX.Element;
+export declare namespace MeterRoot {
+  var displayName: string;
+}
+//#endregion
+export type { MeterRegion };
+//# sourceMappingURL=meter-root.d.mts.map

package/dist/meter/meter-root.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"meter-root.d.mts","names":[],"sources":["../../src/meter/meter-root.tsx"],"mappings":";;;;;iBAkBiB;;WAEN;WACA;WACA;;WAEA;WACA;WACA;;WAEA;;WAEA;;WAEA;WACA,QAAQ;;iBAGF,uBAAuB,KACtC;;EAaA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;;;;;EAMA,SAAS,KAAK;;;;;EAKd;;;;;;EAMA,oBAAoB,eAAe,OAAO;EAC1C,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,8BAA8B;;;;;;;;;wBAUpC,YACd,OACA,KACA,KACA,KACA,MACA,SACA,QACA,QACA,kBACA,WACA,OACA,UACA,QACA,QACG,QACF,iCAAc,IAAA;yBAhBD"}

package/dist/meter/meter-root.mjs

@@ -0,0 +1,83 @@
+import { mergeRenderRef, renderElement, resolveStateValue } from "../internal/render-element.mjs";
+import { warnOnce } from "../internal/dev-warn.mjs";
+import { clamp, formatRangeValue, isDegenerate, percentage } from "../internal/range-value.mjs";
+import { MeterContext } from "./meter-context.mjs";
+import { meterRegion, resolveMeterBounds } from "./meter-region.mjs";
+import { useId } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/meter/meter-root.tsx
+/**
+* `Meter.Root`: a `div[role=meter]` with the ARIA values and `aria-valuetext` always,
+* `data-region`, and `--meter-value` / `--meter-low` / `--meter-high` / `--meter-optimum` (the
+* percentages) in `style`, where the consumer's entries win. Owned keys: `role`,
+* `aria-valuemin`, `aria-valuemax`, `aria-valuenow`, `aria-valuetext`, `aria-labelledby`
+* (token-merged: the consumer's tokens, then `Meter.Label`'s id, always), `data-region`.
+*/
+function MeterRoot({ value, min = 0, max = 100, low, high, optimum, format, locale, getAriaValueText, className, style, children, render, ref, ...rest }) {
+	const id = useId();
+	let given = value;
+	if (!Number.isFinite(given)) {
+		warnOnce(`Meter.Root:non-finite:${given}`, `Meter.Root: \`value\` is ${given}, which is not a finite number; it is rendered as \`min\`.`);
+		given = min;
+	}
+	if (isDegenerate(min, max)) warnOnce(`Meter.Root:degenerate:${min}:${max}`, `Meter.Root: \`max\` (${max}) must be greater than \`min\` (${min}); the percentage is rendered as 0.`);
+	const clamped = clamp(given, min, max);
+	const bounds = resolveMeterBounds(min, max, low, high, optimum);
+	const formattedValue = formatRangeValue(clamped, min, max, format, locale);
+	const base = {
+		value: clamped,
+		min,
+		max,
+		...bounds,
+		percentage: percentage(clamped, min, max),
+		formattedValue,
+		valueText: formattedValue,
+		region: meterRegion(clamped, bounds.low, bounds.high, bounds.optimum)
+	};
+	const valueText = getAriaValueText === void 0 ? formattedValue : getAriaValueText(clamped, base) ?? null;
+	const state = valueText === base.valueText ? base : {
+		...base,
+		valueText
+	};
+	const variables = {
+		"--meter-value": `${state.percentage}%`,
+		"--meter-low": `${percentage(bounds.low, min, max)}%`,
+		"--meter-high": `${percentage(bounds.high, min, max)}%`,
+		"--meter-optimum": `${percentage(bounds.optimum, min, max)}%`
+	};
+	const libraryProps = {
+		role: "meter",
+		"aria-valuemin": min,
+		"aria-valuemax": max,
+		"aria-valuenow": clamped,
+		"aria-valuetext": valueText ?? void 0,
+		"aria-labelledby": `${id}-label`,
+		"data-region": state.region
+	};
+	const element = renderElement({
+		defaultElement: "div",
+		render,
+		state,
+		className,
+		style: (s) => ({
+			...variables,
+			...resolveStateValue(style, s)
+		}),
+		children,
+		props: rest,
+		libraryProps,
+		ref: mergeRenderRef(ref, render)
+	});
+	return /* @__PURE__ */ jsx(MeterContext, {
+		value: {
+			id,
+			state
+		},
+		children: element
+	});
+}
+MeterRoot.displayName = "MeterRoot";
+//#endregion
+export { MeterRoot };
+
+//# sourceMappingURL=meter-root.mjs.map

package/dist/meter/meter-root.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"meter-root.mjs","names":[],"sources":["../../src/meter/meter-root.tsx"],"sourcesContent":["// No \"use client\": `Meter.Root` uses only `useId`, arithmetic and `Intl`, and renders the client\n// context's provider (conventions 7.1's second exception). Rendered by a Server Component it runs\n// once, on the server (design/components/progress.md 8.1). It must not import from any\n// \"use client\" module except its context (checked by src/__tests__/directives.test.ts).\nimport { useId } from \"react\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport { warnOnce } from \"../internal/dev-warn.js\";\nimport { clamp, formatRangeValue, isDegenerate, percentage } from \"../internal/range-value.js\";\nimport { mergeRenderRef, renderElement, resolveStateValue } from \"../internal/render-element.js\";\nimport type { DataAttributes } from \"../internal/render-element.js\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { MeterContext } from \"./meter-context.js\";\nimport { meterRegion, resolveMeterBounds } from \"./meter-region.js\";\nimport type { MeterRegion } from \"./meter-region.js\";\n\nexport type { MeterRegion } from \"./meter-region.js\";\n\n/** The state every Meter part receives. */\nexport interface MeterState {\n  /** Clamped to `[min, max]`. */\n  readonly value: number;\n  readonly min: number;\n  readonly max: number;\n  /** After HTML's defaults and clamping. */\n  readonly low: number;\n  readonly high: number;\n  readonly optimum: number;\n  /** A number 0–100. */\n  readonly percentage: number;\n  /** The `Intl.NumberFormat` text of the value (or of the fraction, for the percent style). */\n  readonly formattedValue: string;\n  /** What `aria-valuetext` carries: `getAriaValueText`'s result, else `formattedValue`. */\n  readonly valueText: string | null;\n  readonly region: MeterRegion;\n}\n\nexport interface MeterRootProps extends Omit<\n  ComponentPropsWithRef<\"div\">,\n  | \"role\"\n  | \"aria-valuemin\"\n  | \"aria-valuemax\"\n  | \"aria-valuenow\"\n  | \"aria-valuetext\"\n  | \"defaultValue\"\n  | \"defaultChecked\"\n  | \"className\"\n  | \"style\"\n  | \"children\"\n> {\n  /** Required: a meter always has a value. Clamped to `[min, max]`. */\n  value: number;\n  /** @default 0 */\n  min?: number;\n  /** @default 100 */\n  max?: number;\n  /** Upper bound of the \"low\" part of the range. Default `min`. */\n  low?: number;\n  /** Lower bound of the \"high\" part of the range. Default `max`. */\n  high?: number;\n  /** The best value. Default the midpoint. Decides which part of the range is `optimum`. */\n  optimum?: number;\n  /**\n   * `Intl.NumberFormat` options for `aria-valuetext` and `Meter.Value`. Default\n   * `{ style: \"percent\" }`. A `percent` style formats the fraction of the range; any other style\n   * formats the value. Serialisable: a Server Component may pass it.\n   */\n  format?: Intl.NumberFormatOptions;\n  /**\n   * BCP 47 tag for `Intl.NumberFormat`; default: the runtime's locale. Pass it when a client\n   * tree is server-rendered.\n   */\n  locale?: string;\n  /**\n   * The `aria-valuetext` to render instead of `formattedValue`. Called with the clamped value\n   * and the state as it would be without this prop. Return `null` to render no\n   * `aria-valuetext`.\n   */\n  getAriaValueText?: (value: number, state: MeterState) => string | null | undefined;\n  className?: StateValue<string | undefined, MeterState>;\n  style?: StateValue<CSSProperties | undefined, MeterState>;\n  children?: StateValue<ReactNode, MeterState>;\n  render?: RenderProp<ComponentPropsWithRef<\"div\">, MeterState>;\n}\n\n/**\n * `Meter.Root`: a `div[role=meter]` with the ARIA values and `aria-valuetext` always,\n * `data-region`, and `--meter-value` / `--meter-low` / `--meter-high` / `--meter-optimum` (the\n * percentages) in `style`, where the consumer's entries win. Owned keys: `role`,\n * `aria-valuemin`, `aria-valuemax`, `aria-valuenow`, `aria-valuetext`, `aria-labelledby`\n * (token-merged: the consumer's tokens, then `Meter.Label`'s id, always), `data-region`.\n */\nexport function MeterRoot({\n  value,\n  min = 0,\n  max = 100,\n  low,\n  high,\n  optimum,\n  format,\n  locale,\n  getAriaValueText,\n  className,\n  style,\n  children,\n  render,\n  ref,\n  ...rest\n}: MeterRootProps) {\n  const id = useId();\n\n  let given = value;\n  if (!Number.isFinite(given)) {\n    warnOnce(\n      `Meter.Root:non-finite:${given}`,\n      `Meter.Root: \\`value\\` is ${given}, which is not a finite number; it is rendered as \\`min\\`.`,\n    );\n    given = min;\n  }\n  if (isDegenerate(min, max)) {\n    warnOnce(\n      `Meter.Root:degenerate:${min}:${max}`,\n      `Meter.Root: \\`max\\` (${max}) must be greater than \\`min\\` (${min}); the percentage is ` +\n        \"rendered as 0.\",\n    );\n  }\n\n  const clamped = clamp(given, min, max);\n  const bounds = resolveMeterBounds(min, max, low, high, optimum);\n  const formattedValue = formatRangeValue(clamped, min, max, format, locale);\n  const base: MeterState = {\n    value: clamped,\n    min,\n    max,\n    ...bounds,\n    percentage: percentage(clamped, min, max),\n    formattedValue,\n    valueText: formattedValue,\n    region: meterRegion(clamped, bounds.low, bounds.high, bounds.optimum),\n  };\n  const valueText =\n    getAriaValueText === undefined ? formattedValue : (getAriaValueText(clamped, base) ?? null);\n  const state: MeterState = valueText === base.valueText ? base : { ...base, valueText };\n\n  const variables = {\n    \"--meter-value\": `${state.percentage}%`,\n    \"--meter-low\": `${percentage(bounds.low, min, max)}%`,\n    \"--meter-high\": `${percentage(bounds.high, min, max)}%`,\n    \"--meter-optimum\": `${percentage(bounds.optimum, min, max)}%`,\n  };\n\n  const libraryProps: Partial<ComponentPropsWithRef<\"div\">> & DataAttributes = {\n    role: \"meter\",\n    \"aria-valuemin\": min,\n    \"aria-valuemax\": max,\n    \"aria-valuenow\": clamped,\n    \"aria-valuetext\": valueText ?? undefined,\n    \"aria-labelledby\": `${id}-label`,\n    \"data-region\": state.region,\n  };\n\n  const element = renderElement<ComponentPropsWithRef<\"div\">, MeterState>({\n    defaultElement: \"div\",\n    render,\n    state,\n    className,\n    // The custom properties lose to the consumer's own entries (design 3.3).\n    style: (s) => ({ ...(variables as CSSProperties), ...resolveStateValue(style, s) }),\n    children,\n    props: rest,\n    libraryProps,\n    // Passed through to the element, never read during render.\n    // oxlint-disable-next-line react/refs\n    ref: mergeRenderRef(ref, render),\n  });\n\n  return <MeterContext value={{ id, state }}>{element}</MeterContext>;\n}\n\nMeterRoot.displayName = \"MeterRoot\";\n"],"mappings":";;;;;;;;;;;;;;;AA2FA,SAAgB,UAAU,EACxB,OACA,MAAM,GACN,MAAM,KACN,KACA,MACA,SACA,QACA,QACA,kBACA,WACA,OACA,UACA,QACA,KACA,GAAG,QACc;CACjB,MAAM,KAAK,MAAM;CAEjB,IAAI,QAAQ;CACZ,IAAI,CAAC,OAAO,SAAS,KAAK,GAAG;EAC3B,SACE,yBAAyB,SACzB,4BAA4B,MAAM,2DACpC;EACA,QAAQ;CACV;CACA,IAAI,aAAa,KAAK,GAAG,GACvB,SACE,yBAAyB,IAAI,GAAG,OAChC,wBAAwB,IAAI,kCAAkC,IAAI,oCAEpE;CAGF,MAAM,UAAU,MAAM,OAAO,KAAK,GAAG;CACrC,MAAM,SAAS,mBAAmB,KAAK,KAAK,KAAK,MAAM,OAAO;CAC9D,MAAM,iBAAiB,iBAAiB,SAAS,KAAK,KAAK,QAAQ,MAAM;CACzE,MAAM,OAAmB;EACvB,OAAO;EACP;EACA;EACA,GAAG;EACH,YAAY,WAAW,SAAS,KAAK,GAAG;EACxC;EACA,WAAW;EACX,QAAQ,YAAY,SAAS,OAAO,KAAK,OAAO,MAAM,OAAO,OAAO;CACtE;CACA,MAAM,YACJ,qBAAqB,KAAA,IAAY,iBAAkB,iBAAiB,SAAS,IAAI,KAAK;CACxF,MAAM,QAAoB,cAAc,KAAK,YAAY,OAAO;EAAE,GAAG;EAAM;CAAU;CAErF,MAAM,YAAY;EAChB,iBAAiB,GAAG,MAAM,WAAW;EACrC,eAAe,GAAG,WAAW,OAAO,KAAK,KAAK,GAAG,EAAE;EACnD,gBAAgB,GAAG,WAAW,OAAO,MAAM,KAAK,GAAG,EAAE;EACrD,mBAAmB,GAAG,WAAW,OAAO,SAAS,KAAK,GAAG,EAAE;CAC7D;CAEA,MAAM,eAAuE;EAC3E,MAAM;EACN,iBAAiB;EACjB,iBAAiB;EACjB,iBAAiB;EACjB,kBAAkB,aAAa,KAAA;EAC/B,mBAAmB,GAAG,GAAG;EACzB,eAAe,MAAM;CACvB;CAEA,MAAM,UAAU,cAAwD;EACtE,gBAAgB;EAChB;EACA;EACA;EAEA,QAAQ,OAAO;GAAE,GAAI;GAA6B,GAAG,kBAAkB,OAAO,CAAC;EAAE;EACjF;EACA,OAAO;EACP;EAGA,KAAK,eAAe,KAAK,MAAM;CACjC,CAAC;CAED,OAAO,oBAAC,cAAD;EAAc,OAAO;GAAE;GAAI;EAAM;EAAI,UAAA;CAAsB,CAAA;AACpE;AAEA,UAAU,cAAc"}

package/dist/meter/meter-track.d.mts

@@ -0,0 +1,19 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { MeterState } from "./meter-root.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/meter/meter-track.d.ts
+export interface MeterTrackProps extends Omit<ComponentPropsWithRef<"div">, "className" | "style" | "children"> {
+  className?: StateValue<string | undefined, MeterState>;
+  style?: StateValue<CSSProperties | undefined, MeterState>;
+  children?: StateValue<ReactNode, MeterState>;
+  render?: RenderProp<ComponentPropsWithRef<"div">, MeterState>;
+}
+/**
+ * `Meter.Track`: the rail. It renders nothing but the state's data attributes. Owned keys: `data-region`.
+ */
+export declare function MeterTrack({ className, style, children, render, ...rest }: MeterTrackProps): ReactNode;
+export declare namespace MeterTrack {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=meter-track.d.mts.map

package/dist/meter/meter-track.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"meter-track.d.mts","names":[],"sources":["../../src/meter/meter-track.tsx"],"mappings":";;;;iBAOiB,wBAAwB,KACvC;EAGA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,8BAA8B;;;;;wBAMpC,aAAa,WAAW,OAAO,UAAU,WAAW,QAAQ,kBAAe;yBAA3E"}

package/dist/meter/meter-track.mjs

@@ -0,0 +1,25 @@
+"use client";
+import { useRender } from "../internal/use-render.mjs";
+import { useMeterContext } from "./meter-context.mjs";
+//#region src/meter/meter-track.tsx
+/**
+* `Meter.Track`: the rail. It renders nothing but the state's data attributes. Owned keys: `data-region`.
+*/
+function MeterTrack({ className, style, children, render, ...rest }) {
+	const { state } = useMeterContext("Meter.Track");
+	return useRender({
+		defaultElement: "div",
+		render,
+		state,
+		className,
+		style,
+		children,
+		props: rest,
+		libraryProps: { "data-region": state.region }
+	});
+}
+MeterTrack.displayName = "MeterTrack";
+//#endregion
+export { MeterTrack };
+
+//# sourceMappingURL=meter-track.mjs.map

package/dist/meter/meter-track.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"meter-track.mjs","names":[],"sources":["../../src/meter/meter-track.tsx"],"sourcesContent":["\"use client\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { useMeterContext } from \"./meter-context.js\";\nimport type { MeterState } from \"./meter-root.js\";\n\nexport interface MeterTrackProps extends Omit<\n  ComponentPropsWithRef<\"div\">,\n  \"className\" | \"style\" | \"children\"\n> {\n  className?: StateValue<string | undefined, MeterState>;\n  style?: StateValue<CSSProperties | undefined, MeterState>;\n  children?: StateValue<ReactNode, MeterState>;\n  render?: RenderProp<ComponentPropsWithRef<\"div\">, MeterState>;\n}\n\n/**\n * `Meter.Track`: the rail. It renders nothing but the state's data attributes. Owned keys: `data-region`.\n */\nexport function MeterTrack({ className, style, children, render, ...rest }: MeterTrackProps) {\n  const { state } = useMeterContext(\"Meter.Track\");\n  return useRender<ComponentPropsWithRef<\"div\">, MeterState>({\n    defaultElement: \"div\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps: {\n      \"data-region\": state.region,\n    },\n  });\n}\n\nMeterTrack.displayName = \"MeterTrack\";\n"],"mappings":";;;;;;;AAoBA,SAAgB,WAAW,EAAE,WAAW,OAAO,UAAU,QAAQ,GAAG,QAAyB;CAC3F,MAAM,EAAE,UAAU,gBAAgB,aAAa;CAC/C,OAAO,UAAoD;EACzD,gBAAgB;EAChB;EACA;EACA;EACA;EACA;EACA,OAAO;EACP,cAAc,EACZ,eAAe,MAAM,OACvB;CACF,CAAC;AACH;AAEA,WAAW,cAAc"}

package/dist/meter/meter-value.d.mts

@@ -0,0 +1,20 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { MeterState } from "./meter-root.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/meter/meter-value.d.ts
+export interface MeterValueProps extends Omit<ComponentPropsWithRef<"span">, "className" | "style" | "children"> {
+  className?: StateValue<string | undefined, MeterState>;
+  style?: StateValue<CSSProperties | undefined, MeterState>;
+  /** Default: `state.formattedValue`. */
+  children?: StateValue<ReactNode, MeterState>;
+  render?: RenderProp<ComponentPropsWithRef<"span">, MeterState>;
+}
+/**
+ * `Meter.Value`: shows `state.formattedValue` or `children(state)`. `aria-hidden="true"` is a default the consumer may override, not an owned key: the same text is in the Root's `aria-valuetext`. Owned keys: `data-region`.
+ */
+export declare function MeterValue({ className, style, children, render, ...rest }: MeterValueProps): ReactNode;
+export declare namespace MeterValue {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=meter-value.d.mts.map

package/dist/meter/meter-value.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"meter-value.d.mts","names":[],"sources":["../../src/meter/meter-value.tsx"],"mappings":";;;;iBAOiB,wBAAwB,KACvC;EAGA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;;EAE9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,+BAA+B;;;;;wBAMrC,aAAa,WAAW,OAAO,UAAU,WAAW,QAAQ,kBAAe;yBAA3E"}

package/dist/meter/meter-value.mjs

@@ -0,0 +1,29 @@
+"use client";
+import { useRender } from "../internal/use-render.mjs";
+import { useMeterContext } from "./meter-context.mjs";
+//#region src/meter/meter-value.tsx
+/**
+* `Meter.Value`: shows `state.formattedValue` or `children(state)`. `aria-hidden="true"` is a default the consumer may override, not an owned key: the same text is in the Root's `aria-valuetext`. Owned keys: `data-region`.
+*/
+function MeterValue({ className, style, children, render, ...rest }) {
+	const { state } = useMeterContext("Meter.Value");
+	const props = {
+		...rest,
+		"aria-hidden": rest["aria-hidden"] ?? true
+	};
+	return useRender({
+		defaultElement: "span",
+		render,
+		state,
+		className,
+		style,
+		children: children ?? state.formattedValue,
+		props,
+		libraryProps: { "data-region": state.region }
+	});
+}
+MeterValue.displayName = "MeterValue";
+//#endregion
+export { MeterValue };
+
+//# sourceMappingURL=meter-value.mjs.map