@crewlethq/ui 0.3.0 → 0.4.1

package/dist/Select/Select.d.ts

@@ -59,8 +59,23 @@ export interface SelectOption {
  * `HTMLSelectElement`, because the element a caller's handler lands on depends
  * on the mode: the listbox's trigger is a button and the native mode's is a
  * `select`. A handler written for the wider type works in both.
+ *
+ * `required` AND `aria-required` ARE BOTH HERE, and they are not the same
+ * fact. `required` is the form constraint: in native mode it is the attribute
+ * the browser validates against and refuses a submission on, and it implies
+ * the ARIA fact. `aria-required` states that fact ALONE — which is what a form
+ * needs where requiredness is the unmarked default and the visible mark beside
+ * the label is welded to the constraint flag, so asking for the constraint
+ * would mark every field on the screen. Where both are given the explicit one
+ * wins, because it is the more specific of the two statements.
+ *
+ * The rest of the `aria-*` surface is deliberately NOT picked. The listbox
+ * mode draws a button, a search box and a portalled panel rather than one
+ * element, so each attribute has to be routed to whichever of them is the
+ * combobox at the time; widened wholesale, every name nothing routes would be
+ * a prop the component accepts and silently ignores.
  */
-type NativePassthrough = Pick<SelectHTMLAttributes<HTMLSelectElement>, 'autoFocus' | 'name' | 'required' | 'aria-describedby'> & {
+type NativePassthrough = Pick<SelectHTMLAttributes<HTMLSelectElement>, 'autoFocus' | 'name' | 'required' | 'aria-describedby' | 'aria-required'> & {
     onBlur?: FocusEventHandler<HTMLElement> | undefined;
     onFocus?: FocusEventHandler<HTMLElement> | undefined;
 };

package/dist/Select/index.js

@@ -1,4 +1,4 @@
-export { Select } from '../chunk-5IMACPJS.js';
+export { Select } from '../chunk-OFHBK7RI.js';
 import '../chunk-GTOUGQQK.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-ITHXJHBB.js';

package/dist/Tabs/index.js

@@ -1,4 +1,4 @@
-export { TabPanel, Tabs, tabId } from '../chunk-YMWONFSI.js';
+export { TabPanel, Tabs, tabId } from '../chunk-QEUY3A5P.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Tabs/roving.d.ts

@@ -8,10 +8,35 @@ import { type KeyboardEvent } from 'react';
  * an element Tab skips, and the keyboard could not enter the row at all. It
  * falls back to the first option that can take focus, and to none where every
  * option is disabled, which is a row with nothing to reach.
+ *
+ * `selected` is where the stop BELONGS rather than what is chosen: under
+ * manual activation that is where focus last was, which is not the chosen
+ * option (see [RovingOptions.followFocus]).
  */
 export declare function tabStop(items: readonly {
     disabled?: boolean | undefined;
 }[], selected: number): number;
+/**
+ * How a row places its ONE TAB STOP while focus moves inside it.
+ */
+export interface RovingOptions {
+    /**
+     * Whether the stop FOLLOWS FOCUS rather than staying on the selection.
+     *
+     * Off by default, which is the only honest answer for a row that SELECTS AS
+     * FOCUS MOVES: there the two are the same element, so the stop needs no
+     * state of its own and an arrow key costs the render it was going to cost
+     * anyway.
+     *
+     * On is what a row whose arrows do NOT select has to have. With the stop
+     * left on the selection, a reader who arrows three options along without
+     * committing, Tabs out of the row and Tabs back is dropped on the option
+     * they started from rather than the one they left, and every move they made
+     * is gone with nothing said about it. It is half of manual activation, not
+     * a refinement of it.
+     */
+    followFocus?: boolean | undefined;
+}
 /**
  * Roving focus over a row of buttons: ONE TAB STOP for the row, the arrows to
  * move inside it.
@@ -26,11 +51,17 @@ export declare function tabStop(items: readonly {
  * tab is a section that pushes a history entry, and a row that selected on
  * every arrow press left one entry per keystroke for Back to walk through.
  *
+ * THE TWO ARGUMENTS GO TOGETHER. A caller that passes no `select` is a row
+ * under manual activation and wants `followFocus`, because the stop and the
+ * selection have come apart; a caller that passes one wants neither.
+ *
  * A DISABLED BUTTON IS STEPPED OVER rather than focused: a browser refuses it
  * focus, so a move that lands on one drops focus on the page body and the
  * next arrow press does nothing at all.
  */
-export declare function useRoving(count: number, select: ((index: number) => void) | null): {
+export declare function useRoving(count: number, select: ((index: number) => void) | null, { followFocus }?: RovingOptions): {
     buttons: import("react").RefObject<(HTMLButtonElement | null)[]>;
     onKeyDown: (event: KeyboardEvent<HTMLElement>, vertical: boolean) => void;
+    onFocusAt: (index: number) => void;
+    focused: number | null;
 };

package/dist/ThemeSwitcher/index.js

@@ -1,6 +1,6 @@
-export { DensitySwitcher, ThemeSwitcher, applyDensity, applyStoredPreferences, applyTheme, useDensityPreference, useThemePreference } from '../chunk-GUIF6Q6N.js';
-import '../chunk-ARMRX2YV.js';
-import '../chunk-YMWONFSI.js';
+export { DensitySwitcher, ThemeSwitcher, applyDensity, applyStoredPreferences, applyTheme, useDensityPreference, useThemePreference } from '../chunk-2HQR4U4D.js';
+import '../chunk-6ZFVFA56.js';
+import '../chunk-QEUY3A5P.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/TimeWindowPicker/index.js

@@ -1,5 +1,5 @@
-export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-G2QFRTJ2.js';
-import '../chunk-5IMACPJS.js';
+export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-WOYYD2YR.js';
+import '../chunk-OFHBK7RI.js';
 import '../chunk-DD5BBGBE.js';
 import '../chunk-GXQ3B46I.js';
 import '../chunk-GTOUGQQK.js';

package/dist/{chunk-GUIF6Q6N.js → chunk-2HQR4U4D.js}

@@ -1,4 +1,4 @@
-import { SegmentedControl } from './chunk-ARMRX2YV.js';
+import { SegmentedControl } from './chunk-6ZFVFA56.js';
 import { LightModeGlyph, ComputerGlyph, DarkModeGlyph } from '@crewlethq/icons/glyphs';
 import { useState, useEffect, useCallback } from 'react';
 import { jsx } from 'react/jsx-runtime';

package/dist/{chunk-GHYY2WPF.js → chunk-34VGEDVV.js}

@@ -2,7 +2,7 @@ import { Toolbar } from './chunk-5EKIWVOR.js';
 import { PageHeader } from './chunk-HOXGBLEY.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
 import { Kbd } from './chunk-SFZOKW2G.js';
-import { DataTable } from './chunk-EHMQQHYR.js';
+import { DataTable } from './chunk-WQX73TWF.js';
 import { Menu } from './chunk-FBZAKNSX.js';
 import { DateTimePicker } from './chunk-UG46QBLT.js';
 import { Popover } from './chunk-DD5BBGBE.js';

package/dist/{chunk-D3OADIM6.js → chunk-3QRYCPXQ.js}

@@ -1,4 +1,4 @@
-import { useClipboard } from './chunk-V663QU4R.js';
+import { useClipboard } from './chunk-5VNUYO76.js';
 import { IconButton } from './chunk-F27EPQ7D.js';
 import { Button } from './chunk-BZYDZBAN.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
@@ -26,9 +26,11 @@ function CopyButton({
   size = "small",
   variant = "tertiary",
   title,
+  resetMs,
+  failedResetMs,
   className
 }) {
-  const { state, copy } = useClipboard();
+  const { state, copy } = useClipboard({ resetMs, failedResetMs });
   const onClick = useCallback(() => {
     void copy(text);
   }, [copy, text]);
@@ -67,10 +69,12 @@ var Copyable = ({
   title = "Copy",
   copiedMessage = "copied to the clipboard",
   failedMessage = "the browser refused the clipboard",
+  resetMs,
+  failedResetMs,
   className
 }) => {
   const text = value === void 0 || value === null ? "" : String(value);
-  const { state, copy } = useClipboard();
+  const { state, copy } = useClipboard({ resetMs, failedResetMs });
   const onCopy = useCallback(() => {
     void copy(text);
   }, [copy, text]);

package/dist/{chunk-V663QU4R.js → chunk-5VNUYO76.js}

@@ -1,19 +1,30 @@
 import { useState, useRef, useEffect, useCallback } from 'react';
 
 // src/utils/useClipboard.ts
-function useClipboard({ resetMs = 2e3 } = {}) {
+function useClipboard({ resetMs = 2e3, failedResetMs } = {}) {
   const [state, setState] = useState("idle");
   const timer = useRef(void 0);
-  useEffect(() => () => clearTimeout(timer.current), []);
+  const live = useRef(true);
+  useEffect(() => {
+    live.current = true;
+    return () => {
+      live.current = false;
+      clearTimeout(timer.current);
+      timer.current = void 0;
+    };
+  }, []);
   const copy = useCallback(
     async (text) => {
       const ok = await writeClipboard(typeof text === "function" ? text() : text);
+      if (!live.current) return ok;
       setState(ok ? "copied" : "failed");
       clearTimeout(timer.current);
-      timer.current = setTimeout(() => setState("idle"), resetMs);
+      timer.current = void 0;
+      const after = ok ? resetMs : failedResetMs === void 0 ? resetMs : failedResetMs;
+      if (after !== null) timer.current = setTimeout(() => setState("idle"), after);
       return ok;
     },
-    [resetMs]
+    [resetMs, failedResetMs]
   );
   return { state, copy };
 }
@@ -48,4 +59,4 @@ function execCommandCopy(text) {
   }
 }
 
-export { useClipboard };
+export { useClipboard, writeClipboard };

package/dist/chunk-6ZFVFA56.js

@@ -0,0 +1,108 @@
+import { useRoving, tabStop, tabId } from './chunk-QEUY3A5P.js';
+import { Count } from './chunk-BHHIIK3M.js';
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './Tabs-VLICJFVB.css';
+import './SegmentedControl-X3BI3XU4.css';
+import { useId } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var ACTIVATE_HINT = "Press Enter or Space to choose the option you land on.";
+function SegmentedControl({
+  label,
+  options,
+  value,
+  onValueChange,
+  size = "md",
+  className = "",
+  semantics,
+  panelId,
+  activate = "automatic",
+  activateHint
+}) {
+  const radio = semantics === "radio";
+  const manual = radio && activate === "manual";
+  const cards = options.some((option) => option.description !== void 0);
+  const { buttons, onKeyDown, onFocusAt, focused } = useRoving(
+    options.length,
+    radio && !manual ? (index) => onValueChange(options[index].value) : null,
+    { followFocus: manual }
+  );
+  const chosenIndex = Math.max(
+    0,
+    options.findIndex((option) => option.value === value)
+  );
+  const stop = tabStop(options, focused ?? chosenIndex);
+  const hintId = useId();
+  const hint = manual ? activateHint === void 0 ? ACTIVATE_HINT : activateHint : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(
+        "crewlet-tabs",
+        /*
+         * THE PILL CHROME IS NOT WORN IN CARDS MODE. A card row is not a chip
+         * in a tinted container: the pill's own rules set the container's
+         * background, border, padding and `width: fit-content`, and each
+         * option's padding, radius and active chip. Left on, every one of
+         * them still applied (the two stylesheets are single-class rules and
+         * Tabs.css is bundled last), so the cards were drawn inside a pill
+         * bar sized to its content, which is what the mode exists to avoid.
+         */
+        !cards && "crewlet-tabs--pill",
+        `crewlet-tabs--${size}`,
+        "crewlet-segmented",
+        cards && "crewlet-segmented--cards",
+        className
+      ),
+      role: radio ? "radiogroup" : "tablist",
+      "aria-label": label,
+      "aria-describedby": hint ? hintId : void 0,
+      children: [
+        options.map((option, index) => {
+          const chosen = option.value === value;
+          const named = option.srLabel ?? (option.label ? void 0 : option.title);
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              ref: (el) => {
+                buttons.current[index] = el;
+              },
+              type: "button",
+              role: radio ? "radio" : "tab",
+              id: radio || !panelId ? void 0 : tabId(panelId, option.value),
+              "aria-checked": radio ? chosen : void 0,
+              "aria-selected": radio ? void 0 : chosen,
+              "aria-controls": radio ? void 0 : panelId,
+              "aria-label": named,
+              tabIndex: index === stop ? 0 : -1,
+              title: option.title,
+              disabled: option.disabled,
+              className: cx(
+                "crewlet-tabs__tab",
+                "crewlet-segmented__option",
+                chosen && "is-active",
+                option.disabled && "is-disabled"
+              ),
+              onClick: () => onValueChange(option.value),
+              onFocus: () => onFocusAt(index),
+              onKeyDown: (event) => onKeyDown(event, radio),
+              children: [
+                option.icon ? /* @__PURE__ */ jsx("span", { className: "crewlet-tabs__icon", children: option.icon }) : null,
+                option.label || option.description ? /* @__PURE__ */ jsxs("span", { className: "crewlet-segmented__text", children: [
+                  /* @__PURE__ */ jsx("span", { className: "crewlet-tabs__label", children: option.label }),
+                  option.description ? /* @__PURE__ */ jsx("span", { className: "crewlet-segmented__description", children: option.description }) : null
+                ] }) : null,
+                option.count != null ? /* @__PURE__ */ jsx(Count, { value: option.count }) : null
+              ]
+            },
+            option.value
+          );
+        }),
+        hint ? /* @__PURE__ */ jsx(VisuallyHidden, { id: hintId, children: hint }) : null
+      ]
+    }
+  );
+}
+
+export { SegmentedControl };

package/dist/{chunk-HTDFCRJZ.js → chunk-D35VTV2Z.js}

@@ -1,7 +1,7 @@
-import { CopyButton } from './chunk-D3OADIM6.js';
+import { CopyButton } from './chunk-3QRYCPXQ.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './CodeBlock-U2W6NNVC.css';
-import { forwardRef, useRef } from 'react';
+import './CodeBlock-GYNJ2HI6.css';
+import { forwardRef, useRef, useState, useLayoutEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var CodeBlock = forwardRef(function CodeBlock2({
@@ -16,6 +16,7 @@ var CodeBlock = forwardRef(function CodeBlock2({
   maxHeight,
   plain = false,
   selectable = false,
+  focusWhenScrollable = false,
   label,
   className,
   style,
@@ -25,6 +26,19 @@ var CodeBlock = forwardRef(function CodeBlock2({
   const body = code.replace(/\n+$/, "");
   const showHeader = !plain && (filename !== void 0 || language !== void 0 || copyable);
   const perLine = showLineNumbers || prompt !== void 0;
+  const [overflows, setOverflows] = useState(false);
+  useLayoutEffect(() => {
+    if (!focusWhenScrollable) return;
+    const node = box.current;
+    if (!node) return;
+    const measure = () => setOverflows(node.scrollHeight > node.clientHeight || node.scrollWidth > node.clientWidth);
+    measure();
+    if (typeof ResizeObserver !== "function") return;
+    const watch = new ResizeObserver(measure);
+    watch.observe(node);
+    return () => watch.disconnect();
+  }, [focusWhenScrollable, body, wrap, showLineNumbers, prompt, maxHeight]);
+  const focusable = selectable || focusWhenScrollable && overflows;
   const onKeyDown = (event) => {
     const isA = event.code === "KeyA" || !event.code && event.key.toLowerCase() === "a";
     if (!isA || event.altKey || event.shiftKey || !(event.metaKey || event.ctrlKey)) return;
@@ -77,9 +91,9 @@ var CodeBlock = forwardRef(function CodeBlock2({
             ref: box,
             className: "crewlet-codeblock__pre",
             "data-language": language,
-            tabIndex: selectable ? 0 : void 0,
-            role: selectable ? "region" : void 0,
-            "aria-label": selectable ? label : void 0,
+            tabIndex: focusable ? 0 : void 0,
+            role: focusable ? "region" : void 0,
+            "aria-label": focusable ? label : void 0,
             onKeyDown: selectable ? onKeyDown : void 0,
             children: /* @__PURE__ */ jsx("code", { className: "crewlet-codeblock__code", children: content })
           }

package/dist/{chunk-T7FKOJKW.js → chunk-NDCATSW7.js}

@@ -2,7 +2,7 @@ import { CardHeaderSlotContext } from './chunk-AV2DXAEL.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { useHeadingLevel, HeadingLevelProvider, nextHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Card-AHX3Q2JD.css';
+import './Card-RLR254LD.css';
 import { createContext, useId, useState, isValidElement, useRef, useCallback, useMemo, Children, cloneElement, useContext, useEffect, Fragment } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
@@ -198,7 +198,7 @@ var CardFooter = ({ variant = "actions", padding = "sm", className, children, ..
     children
   }
 );
-var CardTitle = ({ as, className, children, ...rest }) => {
+var CardTitle = ({ as, truncate = false, className, children, ...rest }) => {
   const card = useContext(CardContext);
   const fallback = useHeadingLevel();
   const Tag = as ?? headingTag(card?.titleLevel ?? fallback);
@@ -206,7 +206,15 @@ var CardTitle = ({ as, className, children, ...rest }) => {
   useEffect(() => {
     register?.();
   }, [register]);
-  return /* @__PURE__ */ jsx(Tag, { ...rest, id: rest.id ?? card?.titleId, className: cx("crewlet-card__title", className), children });
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ...rest,
+      id: rest.id ?? card?.titleId,
+      className: cx("crewlet-card__title", truncate && "crewlet-card__title--truncate", className),
+      children
+    }
+  );
 };
 var CardDescription = ({ className, children, ...rest }) => /* @__PURE__ */ jsx("p", { ...rest, className: cx("crewlet-card__description", className), children });
 var SLOT_TYPES = /* @__PURE__ */ new Set([CardHeader, CardBody, CardFooter]);

package/dist/{chunk-5IMACPJS.js → chunk-OFHBK7RI.js}

@@ -90,6 +90,7 @@ var Select = forwardRef(function Select2({
       emptyMessage,
       describedBy: native["aria-describedby"],
       required: native.required,
+      ariaRequired: native["aria-required"],
       focusOnMount: native.autoFocus,
       name: native.name,
       onBlur: native.onBlur,
@@ -165,6 +166,7 @@ var ListboxSelect = forwardRef(function ListboxSelect2({
   emptyMessage,
   describedBy,
   required,
+  ariaRequired,
   focusOnMount,
   name,
   onBlur,
@@ -339,6 +341,7 @@ var ListboxSelect = forwardRef(function ListboxSelect2({
   const listId = listbox.listId;
   const activeId = open && flat.length > 0 ? listbox.optionId(listbox.active) : void 0;
   const comboOnTrigger = !searchable;
+  const requiredForAria = ariaRequired ?? required;
   let index = -1;
   const rows = groups.map((group, position2) => {
     const items = group.items.map((option) => {
@@ -414,7 +417,7 @@ var ListboxSelect = forwardRef(function ListboxSelect2({
               "aria-controls": listId,
               "aria-activedescendant": activeId,
               "aria-label": searchPlaceholder,
-              "aria-required": required,
+              "aria-required": requiredForAria,
               placeholder: searchPlaceholder,
               value: query,
               onChange: (event) => setQuery(event.target.value),
@@ -474,7 +477,7 @@ var ListboxSelect = forwardRef(function ListboxSelect2({
             "aria-label": ariaLabel,
             "aria-describedby": describedBy,
             "aria-invalid": error || void 0,
-            "aria-required": comboOnTrigger ? required : void 0,
+            "aria-required": comboOnTrigger ? requiredForAria : void 0,
             disabled,
             onBlur,
             onFocus,

package/dist/{chunk-YMWONFSI.js → chunk-QEUY3A5P.js}

@@ -1,15 +1,16 @@
 import { Count } from './chunk-BHHIIK3M.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Tabs-VLICJFVB.css';
-import React, { useRef, useLayoutEffect } from 'react';
+import React, { useRef, useState, useLayoutEffect } from 'react';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
 function tabStop(items, selected) {
   if (selected >= 0 && !items[selected]?.disabled) return selected;
   return items.findIndex((item) => !item.disabled);
 }
-function useRoving(count, select) {
+function useRoving(count, select, { followFocus = false } = {}) {
   const buttons = useRef([]);
+  const [landed, setLanded] = useState(null);
   function step(from, by) {
     for (let i = 0; i < count; i += 1) {
       const at = ((from + by * i) % count + count) % count;
@@ -37,6 +38,9 @@ function useRoving(count, select) {
         return null;
     }
   }
+  const onFocusAt = (index) => {
+    if (followFocus) setLanded(index);
+  };
   const onKeyDown = (event, vertical) => {
     const at = buttons.current.findIndex((button) => button === document.activeElement);
     if (at < 0) return;
@@ -44,9 +48,21 @@ function useRoving(count, select) {
     if (next === null) return;
     event.preventDefault();
     buttons.current[next]?.focus();
+    onFocusAt(next);
     select?.(next);
   };
-  return { buttons, onKeyDown };
+  return {
+    buttons,
+    onKeyDown,
+    onFocusAt,
+    /*
+     * Where the stop belongs, or null for "on the caller's selection, as
+     * ever". Bounded by the CURRENT count, because a row whose options
+     * changed under a remembered index would otherwise put its only stop past
+     * its own end, where Tab finds nothing at all.
+     */
+    focused: followFocus && landed !== null && landed < count ? landed : null
+  };
 }
 function tabId(panelId, value) {
   return `${panelId}-tab-${value}`;

package/dist/{chunk-G2QFRTJ2.js → chunk-WOYYD2YR.js}

@@ -1,4 +1,4 @@
-import { Select } from './chunk-5IMACPJS.js';
+import { Select } from './chunk-OFHBK7RI.js';
 import { Popover } from './chunk-DD5BBGBE.js';
 import { today, shiftMonth, CalendarGrid, compareDays } from './chunk-GXQ3B46I.js';
 import { Input } from './chunk-O6232G37.js';

package/dist/{chunk-EHMQQHYR.js → chunk-WQX73TWF.js}

@@ -3,7 +3,7 @@ import { EmptyValue } from './chunk-EUCC37WY.js';
 import { Modal } from './chunk-2EOKFKHX.js';
 import { useCardHeaderSlot } from './chunk-AV2DXAEL.js';
 import { Checkbox } from './chunk-2PRH365R.js';
-import { useClipboard } from './chunk-V663QU4R.js';
+import { useClipboard } from './chunk-5VNUYO76.js';
 import { IconButton } from './chunk-F27EPQ7D.js';
 import { Button } from './chunk-BZYDZBAN.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';

package/dist/{chunk-LGCPQIOZ.js → chunk-YODNNSZL.js}

@@ -9,6 +9,13 @@ function meterTone(percent) {
   if (percent >= 75) return "warning";
   return "brand";
 }
+function progressTone(percent) {
+  return percent >= 100 ? "success" : "brand";
+}
+var RAMPS = {
+  spent: meterTone,
+  progress: progressTone
+};
 function Meter({
   value,
   max,
@@ -16,34 +23,41 @@ function Meter({
   valueText,
   hint,
   tone,
+  polarity = "spent",
   size = "default",
   hideLabel = false,
   className,
   ...rest
 }) {
   const labelId = useId();
-  const percent = max > 0 ? Math.min(100, Math.max(0, value / max * 100)) : 0;
-  const drawn = tone ?? meterTone(percent);
+  const bounded = max > 0;
+  const percent = bounded ? Math.min(100, Math.max(0, value / max * 100)) : 0;
+  const drawn = tone ?? RAMPS[polarity](percent);
   const trailing = hint ?? valueText;
+  const reported = bounded ? Math.min(max, Math.max(0, value)) : value;
+  const spoken = bounded ? valueText ?? (reported === value ? void 0 : `${value} of ${max}`) : void 0;
+  const unspoken = !bounded && valueText !== void 0 && (hideLabel || hint !== void 0) ? valueText : void 0;
   return /* @__PURE__ */ jsxs("div", { ...rest, className: cx("crewlet-meter", `crewlet-meter--${size}`, className), children: [
     hideLabel ? /* @__PURE__ */ jsx(VisuallyHidden, { id: labelId, children: label }) : /* @__PURE__ */ jsxs("div", { className: "crewlet-meter__legend", children: [
       /* @__PURE__ */ jsx("span", { id: labelId, className: "crewlet-meter__label", children: label }),
       trailing === void 0 ? null : /* @__PURE__ */ jsx("span", { className: "crewlet-meter__hint", children: trailing })
     ] }),
+    unspoken === void 0 ? null : /* @__PURE__ */ jsx(VisuallyHidden, { children: unspoken }),
     /* @__PURE__ */ jsx(
       "div",
       {
         className: "crewlet-meter__track",
-        role: "meter",
-        "aria-labelledby": labelId,
-        "aria-valuenow": value,
-        "aria-valuemin": 0,
-        "aria-valuemax": max,
-        "aria-valuetext": valueText,
+        role: bounded ? "meter" : void 0,
+        "aria-labelledby": bounded ? labelId : void 0,
+        "aria-valuenow": bounded ? reported : void 0,
+        "aria-valuemin": bounded ? 0 : void 0,
+        "aria-valuemax": bounded ? max : void 0,
+        "aria-valuetext": spoken,
+        "aria-hidden": bounded ? void 0 : true,
         children: /* @__PURE__ */ jsx("div", { className: "crewlet-meter__fill", "data-tone": drawn, style: { width: `${percent}%` } })
       }
     )
   ] });
 }
 
-export { Meter, meterTone };
+export { Meter, meterTone, progressTone };