@crewlethq/ui 0.3.0 → 0.4.1

package/dist/Card/Card.d.ts

@@ -131,12 +131,34 @@ export interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
      * heading and an `h2` at the top of a page.
      */
     as?: `h${HeadingLevel}` | undefined;
+    /**
+     * A title with nowhere left to go ENDS in an ellipsis rather than being cut.
+     *
+     * The head is one line and the name block clips, so a title longer than the
+     * row is stopped at the header's edge — mid-word, with nothing to say a word
+     * was lost. `text-overflow` is the answer to that and it applies to a BLOCK
+     * container only, never to a flex one, and the title is flex: the text
+     * inside it is an anonymous flex item that no rule in this stylesheet can
+     * reach. So the ellipsis is a change of the title's own display, which is a
+     * change to what a caller's own children do inside it, which is why it is
+     * asked for rather than assumed.
+     *
+     * OFF BY DEFAULT, because it is not free: a truncating title lays its
+     * children out as one line of inline content instead of as centred,
+     * gap-separated flex items, so a caller who put a glyph or a tag inside the
+     * title gets it on the text baseline with no gap. `Card.Header`'s own `icon`
+     * slot is where a glyph belongs, and it is outside the title and unaffected.
+     * A title of plain text — which is every title in this package and every one
+     * in the engine dashboard — reads identically either way, and is exactly the
+     * case that was being cut.
+     */
+    truncate?: boolean | undefined;
 }
 export declare const Card: (({ variant, padding, interactive, rail, selected, as, href, asChild, className, children, ...rest }: CardProps) => import("react/jsx-runtime").JSX.Element) & {
     Header: ({ divided, icon, count, subtitle, actions, className, children, ...rest }: CardHeaderProps) => import("react/jsx-runtime").JSX.Element;
     Body: ({ padding, className, children, ...rest }: CardSectionProps) => import("react/jsx-runtime").JSX.Element;
     Footer: ({ variant, padding, className, children, ...rest }: CardFooterProps) => import("react/jsx-runtime").JSX.Element;
-    Title: ({ as, className, children, ...rest }: CardTitleProps) => import("react/jsx-runtime").JSX.Element;
+    Title: ({ as, truncate, className, children, ...rest }: CardTitleProps) => import("react/jsx-runtime").JSX.Element;
     Description: ({ className, children, ...rest }: HTMLAttributes<HTMLParagraphElement>) => import("react/jsx-runtime").JSX.Element;
 };
 export {};

package/dist/Card/index.js

@@ -1,4 +1,4 @@
-export { Card } from '../chunk-T7FKOJKW.js';
+export { Card } from '../chunk-NDCATSW7.js';
 export { useCardHeaderSlot } from '../chunk-AV2DXAEL.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';

package/dist/{Card-AHX3Q2JD.css → Card-RLR254LD.css}

@@ -394,6 +394,28 @@
   color: var(--color-text-primary);
 }
 
+/*
+ * A TITLE THAT ENDS RATHER THAN STOPS, where a caller has asked for it.
+ *
+ * The name block clips, which is what keeps the head one line, so a title
+ * wider than the row is cut at the header's edge — mid-word, with nothing to
+ * say a word was lost. `text-overflow` is the rule that says it, and it
+ * applies to a BLOCK container only: on the flex title above it does nothing
+ * at all, and the text it would act on is an anonymous flex item that no
+ * selector here can reach. So the modifier makes the title a block. Its
+ * children are then one line of inline content rather than centred flex items
+ * with a gap between them, which is the whole of what a caller opts into, and
+ * why this is a modifier rather than the base rule.
+ *
+ * `white-space: nowrap` is already the title's own, and `min-width: 0` is what
+ * lets the block shrink below its content inside the name block; both stand.
+ */
+.crewlet-card__title--truncate {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 /*
  * The subtitle gives up its tail and the title does not: a title is the
  * record's identity and has to be read in full, while a subtitle is context.

package/dist/CodeBlock/CodeBlock.d.ts

@@ -19,31 +19,90 @@ interface CodeBlockLook extends Omit<HTMLAttributes<HTMLDivElement>, 'children'>
      * trace, and a sideways scrollbar on one of those is a line nobody finds the
      * end of. Turn it off for a block whose columns are the point: a diff, a
      * table of output, a log that is aligned on purpose.
+     *
+     * THIS IS THE WRAPPING PROP, and the only one. `plain` is about the header;
+     * see its note.
      */
     wrap?: boolean | undefined;
     /**
-     * A ceiling, after which the block scrolls itself: a CSS length, or a number
-     * of px. Without one a 900-line record pushes everything under it off the
-     * screen.
+     * A ceiling for THIS block, after which it scrolls itself: a CSS length, or
+     * a number of px. Without one a 900-line record pushes everything under it
+     * off the screen.
+     *
+     * There is no default, and a ceiling every caller has to remember is a
+     * ceiling somebody forgets — so the value is also readable from the CASCADE.
+     * An application that wants one ceiling for every block it renders declares
+     * `--crewlet-codeblock-max-height` on an ancestor (`:root`, a route's own
+     * wrapper) and passes nothing here; this prop then OVERRIDES that ancestor
+     * for one block, `maxHeight="none"` escapes it, and with neither set the
+     * block is unbounded exactly as it has always been.
      */
     maxHeight?: string | number | undefined;
-    /** No header at all, for a block inside a row that already has one. */
+    /**
+     * No HEADER at all, for a block inside a row that already has one: no
+     * filename strip, no language, no copy control.
+     *
+     * IT IS ABOUT THE CHROME, NEVER THE TEXT. A `plain` block still wraps, and a
+     * block with a header wraps too — wrapping is `wrap` and nothing else. The
+     * name is worth reading twice when porting, because it is a word other code
+     * blocks spend on the opposite meaning: a `plain` that turned WRAPPING off
+     * is `wrap={false}` here.
+     */
     plain?: boolean | undefined;
 }
 /**
- * `selectable` and `label` travel together, and the type is what says so: a
- * focusable `role="region"` with no accessible name is a tab stop a screen
- * reader announces as nothing, which is worse than the plain block it
- * replaced. A union rather than two optional props, because an optional label
- * beside an optional flag is a label somebody forgets.
+ * WHAT MAKES A BLOCK FOCUSABLE IS TWO DECISIONS, AND A NAME IS WHAT BOTH OWE.
+ *
+ * `selectable` is an INTENT only the caller has: this block is the record the
+ * screen is about, so while it has focus Command or Control plus A means this
+ * record rather than the document.
+ *
+ * `focusWhenScrollable` is an OBLIGATION the component discharges for itself.
+ * The `pre` is `overflow: auto`, so a ceiling or `wrap={false}` can turn any
+ * block into a scroll container, and a scroll container no keyboard can reach
+ * is content no keyboard can read. Whether a given block is one is a fact
+ * about the RENDERED BOX, not about any prop — the same code overflows at one
+ * viewport and not at the next — so the component measures it. A card carrying
+ * dozens of tool-argument blocks then gets a tab stop in front of the two that
+ * scroll rather than in front of all of them.
+ *
+ * They are separate because they answer different questions, and welding them
+ * gets both cases wrong: a block promoted for its scrollbar would start
+ * swallowing a chord nobody pressed for it, and a block that owns the chord
+ * would have to scroll to be named.
+ *
+ * `label` is the part they SHARE, and the type is what says so: a focusable
+ * `role="region"` with no accessible name is a tab stop a screen reader
+ * announces as nothing, which is worse than the plain block it replaced. So
+ * every arm that can take focus demands one, from either door, and the arm
+ * that cannot take focus refuses one — an optional label beside an optional
+ * flag is a label somebody forgets, and a label on a block that can never be
+ * named is a prop that silently does nothing.
  */
 export type CodeBlockProps = CodeBlockLook & ({
     /** Take Command or Control plus A while focused, and take focus. */
     selectable: true;
+    /** Also take focus when the rendered box turns out to scroll. */
+    focusWhenScrollable?: boolean | undefined;
     /** What this block is: "The turn record, as JSON". */
     label: string;
 } | {
     selectable?: false | undefined;
+    /**
+     * Take focus when, and only when, the rendered box scrolls — on
+     * either axis. The block is a named region then and nothing more: the
+     * select-all chord stays with the browser.
+     */
+    focusWhenScrollable: true;
+    /**
+     * What this block is. Required although the block may never take
+     * focus, because whether it does is a property of the box at one
+     * viewport and not of this call.
+     */
+    label: string;
+} | {
+    selectable?: false | undefined;
+    focusWhenScrollable?: false | undefined;
     label?: never;
 });
 /**

package/dist/CodeBlock/index.js

@@ -1,6 +1,6 @@
-export { CodeBlock } from '../chunk-HTDFCRJZ.js';
-import '../chunk-D3OADIM6.js';
-import '../chunk-V663QU4R.js';
+export { CodeBlock } from '../chunk-D35VTV2Z.js';
+import '../chunk-3QRYCPXQ.js';
+import '../chunk-5VNUYO76.js';
 import '../chunk-F27EPQ7D.js';
 import '../chunk-BZYDZBAN.js';
 import '../chunk-BZFWDIV6.js';

package/dist/{CodeBlock-U2W6NNVC.css → CodeBlock-GYNJ2HI6.css}

@@ -66,6 +66,42 @@
   white-space: pre-wrap;
   overflow-wrap: anywhere;
   tab-size: 2;
+  /*
+   * THE CEILING IS A CASCADING ONE, read here and declared nowhere, so the
+   * fallback IS the default: with nothing set the block is unbounded, as it
+   * has always been. `maxHeight` writes the property inline on the block, and
+   * an application that wants one ceiling for every block it renders writes it
+   * once on an ancestor instead — because a ceiling every call site has to
+   * remember is a ceiling somebody forgets, and the right height is a fact
+   * about the SURFACE the block sits on rather than about the component.
+   *
+   * Declared with a fallback rather than seeded on `.crewlet-codeblock`: a
+   * name a component declares on itself stops inheriting, so seeding it would
+   * be the one shape in which an ancestor's value can never arrive.
+   *
+   * ONE DECLARATION, in the rule below. `.crewlet-codeblock--bounded` is still
+   * emitted as the marker that this block set a ceiling of its own — the hook
+   * an application stylesheet and a reader of the DOM key on — but it draws
+   * nothing, because a second rule restating this height is how the two come
+   * to disagree.
+   */
+}
+
+/*
+ * The ceiling, at the specificity the rule it replaces already had.
+ *
+ * `.crewlet-codeblock .crewlet-codeblock__pre` rather than
+ * `.crewlet-codeblock__pre`, and the extra class earns its place: the rule
+ * that used to set this was `.crewlet-codeblock--bounded .crewlet-codeblock__pre`
+ * at (0,2,0), and an application overriding it wrote `.crewlet-codeblock__pre
+ * { max-height: … }` at (0,1,0) and expected to LOSE. Declaring it on the
+ * single class drops this to (0,1,0), which turns every one of those
+ * overrides into a tie decided by sheet order — so a consumer who wrote a
+ * losing rule on purpose silently starts winning. Same two-class weight,
+ * same outcome for anybody who already had an opinion.
+ */
+.crewlet-codeblock .crewlet-codeblock__pre {
+  max-height: var(--crewlet-codeblock-max-height, none);
 }
 
 /*
@@ -78,21 +114,20 @@
 }
 
 /*
- * Bounded, with its own scroll. Without a ceiling a long record pushes
- * everything under it off the screen, which on a detail page is every other
- * fact about the thing being read.
- */
-.crewlet-codeblock--bounded .crewlet-codeblock__pre {
-  max-height: var(--crewlet-codeblock-max-height);
-}
-
-/*
- * A BLOCK THAT OWNS SELECT-ALL. Select-all is a document verb, so on a screen
- * that is mostly one record it took the nav, the stat row and every card with
- * it. While this block has focus the verb means "this record", which is the
- * only thing anybody was reaching for, and the ring is what says so: a
- * keyboard verb that changes meaning on focus, with no visible focus state, is
- * a secret.
+ * A BLOCK A READER CAN REACH. Two things put the block in the tab order and
+ * the role follows both: `selectable`, and `focusWhenScrollable` on a box that
+ * turned out to scroll.
+ *
+ * On the first, select-all is a document verb, so on a screen that is mostly
+ * one record it took the nav, the stat row and every card with it. While this
+ * block has focus the verb means "this record", which is the only thing
+ * anybody was reaching for, and the ring is what says so: a keyboard verb that
+ * changes meaning on focus, with no visible focus state, is a secret. On the
+ * second the block keeps no keys at all; the ring is there because a scroll
+ * container a reader arrows through has to say where they are.
+ *
+ * The text cursor is right for both, and it is what the caret-shape of a
+ * `pre` full of selectable text should always have been.
  */
 .crewlet-codeblock__pre[role='region'] {
   cursor: text;

package/dist/Copyable/CopyButton.d.ts

@@ -41,6 +41,16 @@ export interface CopyButtonProps {
     size?: ButtonSize | undefined;
     variant?: ButtonVariant | undefined;
     title?: string | undefined;
+    /** How long `copiedLabel` stands before the control offers its action again. */
+    resetMs?: number | undefined;
+    /**
+     * How long `failedLabel` stands. Unset it is `resetMs`; `null` holds it
+     * until the next press. See [ClipboardOptions.failedResetMs] for why a
+     * refusal wants a clock of its own — and note the cost of `null`, which is
+     * that the control's accessible name stays "Copy failed" and so names a
+     * status rather than the action it still performs.
+     */
+    failedResetMs?: number | null | undefined;
     className?: string | undefined;
 }
 /**
@@ -51,4 +61,4 @@ export interface CopyButtonProps {
  * sighted reader gets and the status region is the only evidence anybody else
  * gets. Both are part of the control, not decoration on it.
  */
-export declare function CopyButton({ text, label, copiedLabel, failedLabel, copiedMessage, failedMessage, size, variant, title, className, }: CopyButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function CopyButton({ text, label, copiedLabel, failedLabel, copiedMessage, failedMessage, size, variant, title, resetMs, failedResetMs, className, }: CopyButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/Copyable/Copyable.d.ts

@@ -16,6 +16,14 @@ export interface CopyableProps {
     copiedMessage?: string | undefined;
     /** Read out on failure. */
     failedMessage?: string | undefined;
+    /** How long the tick stands before the control settles back. */
+    resetMs?: number | undefined;
+    /**
+     * How long the refusal glyph stands. Unset it is `resetMs`; `null` holds it
+     * until the next press. See [ClipboardOptions.failedResetMs] for why a
+     * refusal wants a clock of its own.
+     */
+    failedResetMs?: number | null | undefined;
     className?: string | undefined;
 }
 /**
@@ -31,4 +39,4 @@ export interface CopyableProps {
  * plain http origin anybody reads a remote dashboard at, the tick appeared and
  * the clipboard was empty.
  */
-export declare const Copyable: ({ value, display, variant, monospace, truncate, truncateLength, ariaLabel, title, copiedMessage, failedMessage, className, }: CopyableProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Copyable: ({ value, display, variant, monospace, truncate, truncateLength, ariaLabel, title, copiedMessage, failedMessage, resetMs, failedResetMs, className, }: CopyableProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/Copyable/index.js

@@ -1,5 +1,5 @@
-export { CopyButton, Copyable } from '../chunk-D3OADIM6.js';
-import '../chunk-V663QU4R.js';
+export { CopyButton, Copyable } from '../chunk-3QRYCPXQ.js';
+import '../chunk-5VNUYO76.js';
 import '../chunk-F27EPQ7D.js';
 import '../chunk-BZYDZBAN.js';
 import '../chunk-BZFWDIV6.js';

package/dist/DataTable/index.js

@@ -1,10 +1,10 @@
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-EHMQQHYR.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-WQX73TWF.js';
 import '../chunk-FBZAKNSX.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-2EOKFKHX.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-2PRH365R.js';
-import '../chunk-V663QU4R.js';
+import '../chunk-5VNUYO76.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-ITHXJHBB.js';

package/dist/DataView/index.js

@@ -1,9 +1,9 @@
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-GHYY2WPF.js';
+export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-34VGEDVV.js';
 import '../chunk-5EKIWVOR.js';
 import '../chunk-HOXGBLEY.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-SFZOKW2G.js';
-import '../chunk-EHMQQHYR.js';
+import '../chunk-WQX73TWF.js';
 import '../chunk-FBZAKNSX.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-2EOKFKHX.js';
@@ -12,7 +12,7 @@ import '../chunk-DD5BBGBE.js';
 import '../chunk-GXQ3B46I.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-2PRH365R.js';
-import '../chunk-V663QU4R.js';
+import '../chunk-5VNUYO76.js';
 import '../chunk-GTOUGQQK.js';
 import '../chunk-O6232G37.js';
 import '../chunk-BHHIIK3M.js';

package/dist/FilterChip/FilterChip.d.ts

@@ -9,6 +9,23 @@ import { type ButtonHTMLAttributes, type ReactNode } from 'react';
  * at, so this is a prop rather than a styling flag.
  */
 export type FilterChipSemantics = 'toggle' | 'radio';
+/**
+ * Whether an arrow key APPLIES the filter it lands on, or only moves to it.
+ *
+ * `automatic` is the platform's own radio group and the default: the choice
+ * changes as focus moves, which costs nothing where the choice costs nothing.
+ *
+ * `manual` moves focus alone, and Enter or Space applies — which a real
+ * button already turns into its own click. A filter row is the one place that
+ * is routinely wrong: a chip row that drives a URL parameter re-runs the
+ * screen's query on every change, so arrowing across five chips under
+ * `automatic` fires five queries nobody asked for and redraws the list under
+ * the reader four times on the way past.
+ *
+ * It says nothing about a `toggle` row, which has no arrow keys to qualify:
+ * every chip there is its own tab stop and its own switch.
+ */
+export type FilterChipActivation = 'automatic' | 'manual';
 /** The attribute the group finds its own chips by, without a registry to keep. */
 export declare const FILTER_CHIP_ATTRIBUTE = "data-crewlet-filter-chip";
 export interface FilterChipProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'value' | 'onChange'> {
@@ -43,6 +60,15 @@ export interface FilterChipGroupProps {
      */
     label: string;
     semantics?: FilterChipSemantics | undefined;
+    /** Whether the arrows apply the filter they land on. Radio rows only. */
+    activate?: FilterChipActivation | undefined;
+    /**
+     * The sentence a manual row is described by, or `null` for none where the
+     * screen already says it elsewhere. Defaults to naming the key that
+     * applies, because a radio group that does not select as it moves is the
+     * unusual one and nothing else on the row says so.
+     */
+    activateHint?: string | null | undefined;
     /** The chosen value in radio mode. `null` is a deliberate none. */
     value?: string | null | undefined;
     onValueChange?: ((value: string | null) => void) | undefined;
@@ -60,9 +86,15 @@ export interface FilterChipGroupProps {
 /**
  * A named row of filters.
  *
- * In radio mode the arrows move AND choose, which is what the platform's own
- * radio group does: a reader arrowing through a set of choices is choosing,
- * and a group where focus and selection come apart makes them press Space
- * after every move for a reason they could not name.
+ * In radio mode the arrows move AND choose by default, which is what the
+ * platform's own radio group does: a reader arrowing through a set of choices
+ * is choosing, and a group where focus and selection come apart makes them
+ * press Space after every move for a reason they could not name.
+ *
+ * `activate="manual"` is where the reason CAN be named: a row driving a URL
+ * parameter runs the screen's query again on every change, and there the
+ * moves a reader makes on the way to the chip they want are queries nobody
+ * asked for. Then the row says which key applies, because a radio group that
+ * does not select as it moves is the unusual one.
  */
-export declare function FilterChipGroup({ label, semantics, value, onValueChange, allowNone, hideLabel, className, children, }: FilterChipGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function FilterChipGroup({ label, semantics, activate, activateHint, value, onValueChange, allowNone, hideLabel, className, children, }: FilterChipGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/FilterChip/index.d.ts

@@ -1,3 +1,3 @@
 import './FilterChip.css';
 export { FILTER_CHIP_ATTRIBUTE, FilterChip, FilterChipGroup } from './FilterChip.js';
-export type { FilterChipGroupProps, FilterChipProps, FilterChipSemantics } from './FilterChip.js';
+export type { FilterChipActivation, FilterChipGroupProps, FilterChipProps, FilterChipSemantics, } from './FilterChip.js';

package/dist/FilterChip/index.js

@@ -1,3 +1,3 @@
-export { FILTER_CHIP_ATTRIBUTE, FilterChip, FilterChipGroup } from '../chunk-EPOOQZYA.js';
+export { FILTER_CHIP_ATTRIBUTE, FilterChip, FilterChipGroup } from '../chunk-ZFATEERP.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Meter/Meter.d.ts

@@ -8,8 +8,31 @@ import { type HTMLAttributes, type ReactNode } from 'react';
  * so without every call site remembering to.
  */
 export type MeterTone = 'brand' | 'success' | 'warning' | 'danger' | 'neutral';
+/**
+ * WHICH DIRECTION A FULL BAR POINTS, which is the one thing the fill itself
+ * cannot say. A budget at 100 percent is a fault; a goal at 100 percent is the
+ * whole point of the goal. The same arithmetic, the opposite conclusion — so
+ * the polarity is a property of what is being measured and belongs to the call
+ * site, not to the ramp.
+ *
+ * `spent` is the default and is what every existing caller already gets.
+ *
+ * IT MOVES THE TONE RAMP AND NOTHING ELSE — in particular it does not reach
+ * for `role="progressbar"`. That role is for an operation the application is
+ * running while the user waits on it, which is why the meter role says authors
+ * "SHOULD NOT use the meter role to indicate progress". A goal that is eight
+ * tenths achieved is not an operation anybody is waiting on; it is a scalar
+ * measurement within a known range, which is a meter. A file upload is the
+ * other thing, and it is not this component.
+ */
+export type MeterPolarity = 'spent' | 'progress';
 export interface MeterProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     value: number;
+    /**
+     * The ceiling. NON-POSITIVE MEANS THERE IS NO CEILING, and the bar is then
+     * drawn as decoration rather than as a reading — see the note on the
+     * component.
+     */
     max: number;
     /**
      * What is being measured. REQUIRED, and LINKED to the bar: the meter this
@@ -28,6 +51,12 @@ export interface MeterProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'
     hint?: ReactNode;
     /** Overrides the tone derived from the fill. */
     tone?: MeterTone | undefined;
+    /**
+     * Which ramp the derived tone comes from. `spent` (the default) reads a full
+     * bar as a fault; `progress` reads it as an achievement. Ignored when `tone`
+     * is given, which overrides the ramp entirely.
+     */
+    polarity?: MeterPolarity | undefined;
     /**
      * `compact` is the bar inside a table cell. Its legend drops a type step;
      * the track does not, because the track is already the engine's 4px and
@@ -37,13 +66,61 @@ export interface MeterProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'
     /** Keep the label out of the picture. It stays in the accessibility tree. */
     hideLabel?: boolean | undefined;
 }
-/** At the top it is a fault, near the top it wants a person, below that it is just a number. */
+/**
+ * The `spent` ramp: at the top it is a fault, near the top it wants a person,
+ * below that it is just a number.
+ *
+ * Keeps its plain name because renaming an export is breaking, and it is still
+ * the ramp a `Meter` uses when nobody says otherwise.
+ */
 export declare function meterTone(percent: number): MeterTone;
+/**
+ * The `progress` ramp: finished is finished, and everything short of it is
+ * just a number.
+ *
+ * TWO STEPS RATHER THAN THREE, deliberately. The spent ramp has a middle step
+ * because a budget carries two escalating facts a reader has to act on — near
+ * the limit somebody should look, past it something is already wrong. A goal
+ * carries one: it is done or it is not. "Nearly done" is not a warning and
+ * "barely started" is only a fault against a DEADLINE, which is not one of
+ * this component's inputs — so a middle step here would be an alarm invented
+ * out of a number the meter cannot interpret.
+ */
+export declare function progressTone(percent: number): MeterTone;
 /**
  * A budget, a share, a fill.
  *
  * THE TRACK IS ALWAYS DRAWN. A bar with no track is a bar whose maximum the
  * reader has to guess, and at 8 percent it is indistinguishable from a bar
  * that is simply short.
+ *
+ * A NON-POSITIVE MAXIMUM IS NOT A METER, because ARIA gives the meter role no
+ * way at all to say "there is no ceiling" and both attempts are a false claim.
+ * `max={0}` renders `aria-valuemax="0"` against an `aria-valuemin` of 0: a
+ * range of zero width, in which the fraction a reader is offered is 0/0 and
+ * every value but 0 breaks the role's own "the value of aria-valuenow MUST NOT
+ * fall below or exceed the computed values of aria-valuemin and aria-valuemax"
+ * — and a negative maximum additionally breaks "authors MUST ensure the value
+ * of aria-valuemax is greater than or equal to the value of aria-valuemin".
+ * Leaving the attribute off instead is WORSE rather than better, because
+ * missing is precisely when the role's implicit value takes over — "if
+ * aria-valuemax is missing or not a number, it defaults to 100" — so the bar
+ * stops saying nothing and starts announcing a confident fraction of a ceiling
+ * that nobody set.
+ *
+ * So the only honest move is to stop being a meter. The bar drops the role and
+ * every value attribute and is hidden from the accessibility tree as the
+ * decoration it is; the legend still names it and still carries the figure.
+ * (`DataTable`'s column resizer reaches the same conclusion from the same
+ * place: a maximum invented to fill the attribute is a number a reader is told
+ * they cannot pass.)
+ *
+ * THE REPORTED VALUE IS CLAMPED INTO THE SCALE. A budget lowered under a
+ * counter that has already passed it is an ordinary event, and it used to
+ * publish `aria-valuenow` outside `[min,max]` — the same normative MUST NOT as
+ * above, which assistive technology is therefore free to resolve however it
+ * likes. The clamp makes the pair valid and `aria-valuetext` keeps the true
+ * figures, so nothing is lost: what a reader hears is "140 of 100", not a bar
+ * that quietly rounds itself down to exactly the limit it has overrun.
  */
-export declare function Meter({ value, max, label, valueText, hint, tone, size, hideLabel, className, ...rest }: MeterProps): import("react/jsx-runtime").JSX.Element;
+export declare function Meter({ value, max, label, valueText, hint, tone, polarity, size, hideLabel, className, ...rest }: MeterProps): import("react/jsx-runtime").JSX.Element;

package/dist/Meter/index.d.ts

@@ -1,3 +1,3 @@
 import './Meter.css';
-export { Meter, meterTone } from './Meter.js';
-export type { MeterProps, MeterTone } from './Meter.js';
+export { Meter, meterTone, progressTone } from './Meter.js';
+export type { MeterPolarity, MeterProps, MeterTone } from './Meter.js';

package/dist/Meter/index.js

@@ -1,3 +1,3 @@
-export { Meter, meterTone } from '../chunk-LGCPQIOZ.js';
+export { Meter, meterTone, progressTone } from '../chunk-YODNNSZL.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SegmentedControl/SegmentedControl.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 export type SegmentedSize = 'sm' | 'md';
 export interface SegmentedOption<T extends string = string> {
     value: T;
@@ -35,7 +35,8 @@ interface SegmentedShared<T extends string> {
  * `radio` is a SETTING or a filter (the theme, the density, a lens with no
  * panel): announced as a radio group, and the arrows select as they move,
  * because a choice that is not in the URL costs nothing to change on every
- * keypress.
+ * keypress. A choice that IS in the URL costs a query per keypress, and
+ * `activate` is where that row says so (see [SegmentedActivation]).
  *
  * `tabs` is a row of SECTIONS, and in this product a section pushes a history
  * entry: the arrows move focus and Enter or Space selects, so walking the row
@@ -45,10 +46,42 @@ interface SegmentedShared<T extends string> {
 type SegmentedSemantics = {
     semantics: 'tabs';
     panelId: string;
+    activate?: undefined;
+    activateHint?: undefined;
 } | {
     semantics: 'radio';
     panelId?: undefined;
+    /** Whether the arrows choose the option they land on. Radio rows only. */
+    activate?: SegmentedActivation | undefined;
+    /**
+     * The sentence a manual row is described by, or `null` for none where
+     * the screen already says it elsewhere. Defaults to naming the key that
+     * chooses, because a radio group that does not select as it moves is the
+     * unusual one and nothing else on the row says so.
+     */
+    activateHint?: string | null | undefined;
 };
+/**
+ * Whether an arrow key CHOOSES the option it lands on, or only moves to it.
+ *
+ * `automatic` is the platform's own radio group and the default: the choice
+ * changes as focus moves, which costs nothing where the choice costs nothing.
+ *
+ * `manual` moves focus alone, and Enter or Space chooses — which a real
+ * button already turns into its own click. It is for the row whose choice is
+ * NOT free: a single-choice filter that drives a URL parameter re-runs the
+ * screen's query on every change, so arrowing across five options under
+ * `automatic` fires five queries nobody asked for and re-renders the screen
+ * under the reader four times on the way past. Those rows are not tabs
+ * either — they open no panel and `semantics="tabs"` would have a screen
+ * reader hunting for one — so the choice between the two semantics was never
+ * the choice this answers.
+ *
+ * It is offered on a radio row only. A `tabs` row is manual already, for the
+ * history entry its own doc describes, and an automatic one would be that
+ * bug on request.
+ */
+export type SegmentedActivation = 'automatic' | 'manual';
 export type SegmentedControlProps<T extends string = string> = SegmentedShared<T> & SegmentedSemantics;
 /**
  * A row of mutually exclusive choices.
@@ -64,5 +97,5 @@ export type SegmentedControlProps<T extends string = string> = SegmentedShared<T
  * look like two different controls depending on which component a screen
  * reached for.
  */
-export declare function SegmentedControl<T extends string = string>({ label, options, value, onValueChange, size, className, semantics, panelId, }: SegmentedControlProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function SegmentedControl<T extends string = string>({ label, options, value, onValueChange, size, className, semantics, panelId, activate, activateHint, }: SegmentedControlProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/SegmentedControl/index.d.ts

@@ -1,4 +1,4 @@
 import '../Tabs/Tabs.css';
 import './SegmentedControl.css';
 export { SegmentedControl } from './SegmentedControl.js';
-export type { SegmentedControlProps, SegmentedOption, SegmentedSize } from './SegmentedControl.js';
+export type { SegmentedActivation, SegmentedControlProps, SegmentedOption, SegmentedSize, } from './SegmentedControl.js';

package/dist/SegmentedControl/index.js

@@ -1,5 +1,5 @@
-export { SegmentedControl } from '../chunk-ARMRX2YV.js';
-import '../chunk-YMWONFSI.js';
+export { SegmentedControl } from '../chunk-6ZFVFA56.js';
+import '../chunk-QEUY3A5P.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';