@charcuterie/ui 4.2.1 → 4.4.0

package/src/ActionTiles/ActionTiles.tsx

@@ -4,7 +4,7 @@ import type {
 } from "@charcuterie/tokens"
 import {
   CATEGORICAL_INDEX_COUNT,
-  CATEGORICAL_INDEXES,
+  CATEGORICAL_SEQUENCE,
 } from "@charcuterie/tokens"
 import type { CSSProperties, ReactNode } from "react"
 
@@ -39,8 +39,8 @@ export type ActionTileItem = {
    * set — a destination that is red everywhere else in the app, a
    * pair that must not drift apart when a third tile is inserted
    * between them. An overridden tile keeps its hue and the rest go
-   * on walking the palette in order, so naming one does not force
-   * naming all of them.
+   * on walking `CATEGORICAL_SEQUENCE` from their own positions, so
+   * naming one does not force naming all of them.
    *
    * Ignored when the set is `accent="none"`.
    */
@@ -157,15 +157,20 @@ const STACK_GAP_CLASS: Record<ControlSize, string> = {
  * two-tile set the same colour twice. A tile set is short, ordered,
  * and written out in the source; the eye reads it as a row, so the
  * palette is walked as one.
+ *
+ * `CATEGORICAL_SEQUENCE`, not `CATEGORICAL_INDEXES`. The ring is
+ * hue-ordered for the swatch picker's sake, so walking it in order
+ * hands a two-tile set the two hardest colours in the family to
+ * tell apart — 34 degrees, the tightest pair the palette has. The
+ * sequence visits the same ten in an order that keeps every
+ * neighbour 105 degrees or more away.
  */
 const getTileCategorical = (
   item: ActionTileItem,
   position: number,
 ): CategoricalIndex =>
   item.categorical ??
-  (CATEGORICAL_INDEXES[
-    position % CATEGORICAL_INDEX_COUNT
-  ] as CategoricalIndex)
+  CATEGORICAL_SEQUENCE[position % CATEGORICAL_INDEX_COUNT]
 
 /**
  * A set of ACTIONS drawn as tiles — a bordered card carrying a
@@ -211,8 +216,10 @@ const getTileCategorical = (
  * accent-edge pseudo-element so a tile and a card on the same page
  * are the same bar rather than two that nearly match. Its icon takes
  * the same hue, and the box hovers in it too. The hue comes from the
- * ten-wide categorical palette, taken **in order**, which is why a
- * set of eight needs no colour props at all. See
+ * ten-wide categorical palette, walked in `CATEGORICAL_SEQUENCE`
+ * rather than 1..10 — the ring is hue-ordered for the swatch
+ * picker's sake, so taking it in order would hand a two-tile set
+ * red and orange. A set of eight needs no colour props at all. See
  * [the tile paint record](../../../../docs/decisions/2026-09-02-an-action-tile-is-coloured-and-the-icon-sits-beside-the-name.md)
  * for the four other paints that were drawn and rejected.
  *

package/src/PortraitTiles/PortraitTiles.tsx

@@ -4,7 +4,7 @@ import type {
 } from "@charcuterie/tokens"
 import {
   CATEGORICAL_INDEX_COUNT,
-  CATEGORICAL_INDEXES,
+  CATEGORICAL_SEQUENCE,
 } from "@charcuterie/tokens"
 import type { CSSProperties, ReactNode } from "react"
 
@@ -45,8 +45,10 @@ import { getPortraitColourProperties } from "./portraitColour.ts"
  *    palette hues cannot represent that, and swapping them in would
  *    have made the app disagree with the cards on the fridge.
  *
- * Neither is a default. A portrait that names no colour takes the
- * next `categorical` hue by position.
+ * Neither is a default. A portrait that names no colour takes its
+ * position's entry in `CATEGORICAL_SEQUENCE` — the palette walked so
+ * neighbours contrast, rather than the hue-ordered ring, which would
+ * put red beside orange.
  */
 type PortraitTileColour =
   | { categorical?: CategoricalIndex; color?: never }
@@ -273,9 +275,9 @@ const getPortraitCategorical = (
 ): CategoricalIndex | null =>
   item.color === undefined
     ? (item.categorical ??
-      (CATEGORICAL_INDEXES[
+      CATEGORICAL_SEQUENCE[
         position % CATEGORICAL_INDEX_COUNT
-      ] as CategoricalIndex))
+      ])
     : null
 
 /**

package/src/TimecodeInput/TimecodeInput.mdx

@@ -74,11 +74,27 @@ Three mechanisms keep a grammar that permissive from being dangerous:
    the field, in a `role="status"` live region wired into the input's `aria-describedby`.
    Commit is Enter or blur; a keystroke never commits.
 
+The echo is a **reading of the focused field**, so it leaves when the focus does. A
+restatement left under an idle control is an unlabelled timecode floating on the page, which
+reads as a value rather than as a report on the one above it.
+
+A **refusal** is the other case and it stays up, both kinds of it. The zero-length complaint
+is written at the commit — which *is* the blur — so a rule that cleared it on blur would mean
+it was never readable. And a text the grammar cannot read keeps `aria-invalid` on the
+control, so the sentence saying why has to stay with it: an invalid field with no message is
+worse than the stray line this removes. Emptying a live region announces nothing, so none of
+this makes a screen reader chatty.
+
 **The largest field present is unbounded; every smaller one is 0–59.** That one sentence is
 every bound in the grammar. It is also why a bare number is seconds: seconds is the smallest
 unit the field prints, so the reading that needs no explanation is the one where the typist
 appended nothing.
 
+**Milliseconds are optional to read as well as to type.** The grammar has always accepted
+`1:01:00`, and the field now writes it back as `01:01:00` rather than as `01:01:00.000` — you
+write 3, not 3.000. A real fraction still prints in full: `1:01:00.5` commits as
+`01:01:00.500`, because a fraction pads on the right.
+
 Refused by name: a negative, a seconds or minutes field of 60 or more with a larger field
 beside it, more than three colon-separated parts, a fraction longer than three digits, and
 anything the accepting rules do not match. A refused value leaves the text **exactly as
@@ -132,6 +148,25 @@ its text is refused — which are exactly the states the echo exists for. A spin
 value is a widget that under-reports itself to a screen reader in its two most important
 states.
 
+## The Narrow View stacks the two fields
+
+A section is `[start] to [end]` in a row while there is room for it. Below `--cq-sm` the two
+fields **stack**, and the `to` is replaced by a "Start" caption over the first and an "End"
+caption over the second. Two `hh:mm:ss.mmm` fields and a word between them fill a 390px modal
+edge to edge with no slack, which is where this was reported from.
+
+It is a **container** query, not a window breakpoint. The box that ran out of room is this
+field's own, and a 390px dialog on a 2560px monitor is the Wide View by every media query
+ever written. The cost of `container-type: inline-size` is the `contain: inline-size` that
+rides with it, so `TimecodeInput` takes its width from its parent rather than from its
+content — give it a definite inline size, as with every container-query component here.
+
+The captions are `aria-hidden`, exactly as the `to` always was. Each input already carries
+`aria-label="<label> start"` / `"<label> end"`, and a real `<label>` would name the start
+control a second time and fight the `id` a `Field` above clones onto it. **The accessible
+name of each control is identical in both layouts**, and `TimecodeInput.test.tsx` asserts it
+at two container widths.
+
 <Canvas of={TimecodeInputStories.Responsive} />
 
 ## The formatter is exported, because the fleet writes it repeatedly
@@ -143,13 +178,18 @@ whether the hour is shown and whether the minute is padded. A read-only surface
 the exported one rather than spell a sixth.
 
 ```ts
-formatTimecode(3_723_500)                            // "01:02:03.500"
-formatTimecode(90_000, { isHoursShown: false })      // "01:30.000"
-formatTimecode(1_999, { millisecondDigits: 0 })      // "00:00:01" — truncates
+formatTimecode(3_723_500)                                 // "01:02:03.500"
+formatTimecode(90_000, { isHoursShown: false })           // "01:30.000"
+formatTimecode(1_999, { millisecondDigits: 0 })           // "00:00:01" — truncates
+formatTimecode(3_660_000, { millisecondDigits: "auto" })  // "01:01:00" — no fraction to print
+formatTimecode(3_660_500, { millisecondDigits: "auto" })  // "01:01:00.500"
 ```
 
-The default is the canonical `hh:mm:ss.mmm`, and it is what the field writes back on commit:
-one spelling means a re-read of the field parses to the number that produced it, and a
-screenshot of the same value is the same picture.
+The **default is the canonical `hh:mm:ss.mmm`** and it stays that way, because a published
+export is read by callers no change here can see. `TimecodeInput` opts in to `"auto"` for
+both the text it writes back and its own echo, so the two agree on the page.
+
+Either way it is one spelling per value: a re-read of the field parses to the number that
+produced it, and a screenshot of the same value is the same picture.
 
 <Canvas of={TimecodeInputStories.Interactive} />

package/src/TimecodeInput/TimecodeInput.stories.tsx

@@ -20,6 +20,12 @@ import { formatTimecode } from "./timecode.ts"
  */
 const DURATION_MS = 2_712_000
 
+/**
+ * The demo readout prints a committed value the way the field
+ * writes it — `millisecondDigits: "auto"` — so one position is one
+ * spelling everywhere on the page. `formatTimecode`'s own default is
+ * still the full `hh:mm:ss.mmm`, and the docs page shows both.
+ */
 const describeValue = (
   value: null | number | TimecodeRange,
 ) => {
@@ -28,7 +34,9 @@ const describeValue = (
   }
 
   if (typeof value === "number") {
-    return formatTimecode(value)
+    return formatTimecode(value, {
+      millisecondDigits: "auto",
+    })
   }
 
   // A section with neither end set is the same absence `onChange`
@@ -37,7 +45,7 @@ const describeValue = (
     return "—"
   }
 
-  return `${value.start === null ? "the beginning" : formatTimecode(value.start)} to ${value.end === null ? "the end" : formatTimecode(value.end)}`
+  return `${value.start === null ? "the beginning" : formatTimecode(value.start, { millisecondDigits: "auto" })} to ${value.end === null ? "the end" : formatTimecode(value.end, { millisecondDigits: "auto" })}`
 }
 
 const meta = {
@@ -97,6 +105,13 @@ const TimecodeHarness = ({
  * it before anything commits — `90` is ninety seconds, `1:30` is the
  * same position spelled the other way, `1:02:03.500` is the full
  * form. Enter or blur commits; Escape puts the last value back.
+ *
+ * The line is a reading of the field, so it leaves when the focus
+ * does. A refusal stays up, because a control that is still marked
+ * invalid needs the sentence that says why.
+ *
+ * Milliseconds are optional both ways: `1:01:00` commits as
+ * `01:01:00`, not as `01:01:00.000`.
  */
 export const Default: Story = {
   args: { label: "Start at" },
@@ -257,9 +272,14 @@ export const AllStates: Story = {
 }
 
 /**
- * The field at three container widths. Two inputs and a word between
- * them is the layout that runs out of room first, so the section
- * mode is the one worth looking at narrow.
+ * The field at three container widths, which is the only honest way
+ * to story a container query — the window never moves.
+ *
+ * Below `--cq-sm` the section becomes the **Narrow View**: the two
+ * fields stack, and the word `to` is replaced by a "Start" caption
+ * over the first and an "End" caption over the second. Two
+ * `hh:mm:ss.mmm` fields and a word between them fill a phone-width
+ * modal edge to edge, which is where this was reported from.
  */
 export const Responsive: Story = {
   args: { label: "Start at" },
@@ -286,7 +306,9 @@ export const Responsive: Story = {
  *
  * In the section below, type an end that sits before the start and
  * the pair **swaps**; type an end equal to the start and it is
- * **refused**, because a section with no length plays nothing.
+ * **refused**, because a section with no length plays nothing. The
+ * refusal is readable after the field has been left, which is when
+ * a commit-time complaint is written.
  */
 export const Interactive: Story = {
   args: { label: "Start at" },

package/src/TimecodeInput/TimecodeInput.test.tsx

@@ -7,7 +7,8 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import * as stories from "./TimecodeInput.stories.tsx"
 
-const { AllStates, Interactive } = composeStories(stories)
+const { AllStates, Interactive, Responsive } =
+  composeStories(stories)
 
 const mountInteractive = async () => {
   const mounted = await mountStory(Interactive)
@@ -40,9 +41,7 @@ test("a typed position is echoed in full, and does NOT commit until Enter", asyn
   // and the field says so in a live region before anything is
   // stored.
   await waitFor(() => {
-    expect(
-      canvas.getByText("00:01:30.000"),
-    ).toBeInTheDocument()
+    expect(canvas.getByText("00:01:30")).toBeInTheDocument()
   })
 
   await expect(
@@ -53,13 +52,13 @@ test("a typed position is echoed in full, and does NOT commit until Enter", asyn
 
   await waitFor(() => {
     expect(
-      canvas.getByText("Chosen: 00:01:30.000"),
+      canvas.getByText("Chosen: 00:01:30"),
     ).toBeInTheDocument()
   })
 
   // Committed in the one canonical spelling, so a re-read of the
   // field parses to the number that produced it.
-  await expect(single).toHaveValue("00:01:30.000")
+  await expect(single).toHaveValue("00:01:30")
 })
 
 test("an overflowed field is refused by name, and the typed text survives", async () => {
@@ -101,7 +100,7 @@ test("Escape puts the last committed value back", async () => {
 
   await userEvent.type(single, "90{Enter}")
 
-  await expect(single).toHaveValue("00:01:30.000")
+  await expect(single).toHaveValue("00:01:30")
 
   await userEvent.clear(single)
 
@@ -109,7 +108,7 @@ test("Escape puts the last committed value back", async () => {
 
   await userEvent.keyboard("{Escape}")
 
-  await expect(single).toHaveValue("00:01:30.000")
+  await expect(single).toHaveValue("00:01:30")
 })
 
 test("the arrows step by stepMs, and Shift multiplies that by ten", async () => {
@@ -123,24 +122,24 @@ test("the arrows step by stepMs, and Shift multiplies that by ten", async () =>
   // than a draft the echo is reporting on.
   await waitFor(() => {
     expect(
-      canvas.getByText("Chosen: 00:00:01.000"),
+      canvas.getByText("Chosen: 00:00:01"),
     ).toBeInTheDocument()
   })
 
   await userEvent.keyboard("{Shift>}{ArrowUp}{/Shift}")
 
-  await expect(single).toHaveValue("00:00:11.000")
+  await expect(single).toHaveValue("00:00:11")
 
   await userEvent.keyboard("{ArrowDown}")
 
-  await expect(single).toHaveValue("00:00:10.000")
+  await expect(single).toHaveValue("00:00:10")
 
   // The floor is the start of the media, not a negative position.
   await userEvent.keyboard(
     "{Shift>}{ArrowDown}{ArrowDown}{/Shift}",
   )
 
-  await expect(single).toHaveValue("00:00:00.000")
+  await expect(single).toHaveValue("00:00:00")
 })
 
 test("a position past the end of the media says so, then commits clamped", async () => {
@@ -152,13 +151,13 @@ test("a position past the end of the media says so, then commits clamped", async
 
   await waitFor(() => {
     expect(
-      canvas.getByText(/commits as 00:45:12\.000/),
+      canvas.getByText(/commits as 00:45:12/),
     ).toBeInTheDocument()
   })
 
   await userEvent.keyboard("{Enter}")
 
-  await expect(single).toHaveValue("00:45:12.000")
+  await expect(single).toHaveValue("00:45:12")
 })
 
 test("an inverted section swaps, rather than throwing away the boundary just typed", async () => {
@@ -167,14 +166,12 @@ test("an inverted section swaps, rather than throwing away the boundary just typ
 
   await userEvent.click(end)
 
-  // The seeded start is 00:05:00.000, so this end sits before it.
+  // The seeded start is 00:05:00, so this end sits before it.
   await userEvent.type(end, "1:00{Enter}")
 
   await waitFor(() => {
     expect(
-      canvas.getByText(
-        "Chosen: 00:01:00.000 to 00:05:00.000",
-      ),
+      canvas.getByText("Chosen: 00:01:00 to 00:05:00"),
     ).toBeInTheDocument()
   })
 
@@ -200,7 +197,7 @@ test("a zero-length section is refused by name, because it plays nothing", async
   // The start is untouched and the end is still open — nothing was
   // committed, and the text is still what was typed.
   await expect(
-    canvas.getByText("Chosen: 00:05:00.000 to the end"),
+    canvas.getByText("Chosen: 00:05:00 to the end"),
   ).toBeInTheDocument()
 
   await expect(end).toHaveValue("5:00")
@@ -217,9 +214,7 @@ test("both ends are independently optional, and clearing one leaves the other al
 
   await waitFor(() => {
     expect(
-      canvas.getByText(
-        "Chosen: 00:05:00.000 to 00:10:00.000",
-      ),
+      canvas.getByText("Chosen: 00:05:00 to 00:10:00"),
     ).toBeInTheDocument()
   })
 
@@ -231,9 +226,7 @@ test("both ends are independently optional, and clearing one leaves the other al
 
   await waitFor(() => {
     expect(
-      canvas.getByText(
-        "Chosen: the beginning to 00:10:00.000",
-      ),
+      canvas.getByText("Chosen: the beginning to 00:10:00"),
     ).toBeInTheDocument()
   })
 })
@@ -260,20 +253,250 @@ test("the four states of a section all render as values, not as half-finished in
   ).toHaveLength(2)
 
   await expect(
-    canvas.getByText("Chosen: 00:05:00.000 to the end"),
+    canvas.getByText("Chosen: 00:05:00 to the end"),
   ).toBeInTheDocument()
 
   await expect(
-    canvas.getByText(
-      "Chosen: the beginning to 00:05:00.000",
-    ),
+    canvas.getByText("Chosen: the beginning to 00:05:00"),
   ).toBeInTheDocument()
 
   await expect(
-    canvas.getByText(
-      "Chosen: 00:05:00.000 to 00:15:00.000",
-    ),
+    canvas.getByText("Chosen: 00:05:00 to 00:15:00"),
+  ).toBeInTheDocument()
+
+  await expectNoAxeViolations(canvasElement)
+})
+
+test("the echo is a reading of the focused field, so it leaves with the focus", async () => {
+  const { canvas, single } = await mountInteractive()
+
+  await userEvent.click(single)
+
+  await userEvent.type(single, "90")
+
+  await waitFor(() => {
+    expect(canvas.getByText("00:01:30")).toBeInTheDocument()
+  })
+
+  // Tab commits and takes the focus away. What is left underneath an
+  // idle field would be an unlabelled timecode, which reads as a
+  // stray value rather than as a report on the field above it.
+  await userEvent.tab()
+
+  await waitFor(() => {
+    expect(
+      canvas.queryByText("00:01:30"),
+    ).not.toBeInTheDocument()
+  })
+
+  // The value itself is untouched by any of that: the line is a
+  // reading, not the state.
+  await expect(single).toHaveValue("00:01:30")
+
+  await expect(
+    canvas.getByText("Chosen: 00:01:30"),
+  ).toBeInTheDocument()
+})
+
+test("an unparsed text keeps its refusal after the focus leaves, because the control is still invalid", async () => {
+  const { canvas, canvasElement, single } =
+    await mountInteractive()
+
+  await userEvent.click(single)
+
+  await userEvent.type(single, "1:90")
+
+  await userEvent.tab()
+
+  // `aria-invalid` survives the blur, so the sentence that says why
+  // has to survive it too. An invalid control with no message is
+  // worse than the stray line the test above removes.
+  await expect(single).toHaveAttribute(
+    "aria-invalid",
+    "true",
+  )
+
+  await expect(
+    canvas.getByText(/A minute has 60 seconds/),
   ).toBeInTheDocument()
 
+  await expect(single).toHaveValue("1:90")
+
   await expectNoAxeViolations(canvasElement)
 })
+
+test("a zero-length refusal is written at the commit, so it survives the blur that wrote it", async () => {
+  const { canvas, canvasElement, end } =
+    await mountInteractive()
+
+  await userEvent.click(end)
+
+  // The seeded start is 00:05:00, so this end has no length. Blur is
+  // the commit here, which is the case that would have hidden the
+  // complaint the instant it was made.
+  await userEvent.type(end, "5:00")
+
+  await userEvent.tab()
+
+  await waitFor(() => {
+    expect(
+      canvas.getByText(/A section needs a length/),
+    ).toBeInTheDocument()
+  })
+
+  await expect(end).toHaveAttribute("aria-invalid", "true")
+
+  await expectNoAxeViolations(canvasElement)
+})
+
+/**
+ * The container query, asserted rather than assumed — and the
+ * accessible name held identical across the two layouts it draws.
+ *
+ * The window never moves in this test. Each panel of the board is a
+ * fixed inline size around `--cq-sm`, which is the only honest way
+ * to exercise a query about the component's own box.
+ */
+test("the Narrow View stacks the two fields, and neither layout changes a control's name", async () => {
+  const { canvas, canvasElement } =
+    await mountStory(Responsive)
+
+  const narrowStart = expectAgentDrivable(canvas, {
+    name: "Section 15rem start",
+    role: "textbox",
+  })
+
+  const wideStart = expectAgentDrivable(canvas, {
+    name: "Section 34rem start",
+    role: "textbox",
+  })
+
+  expectAgentDrivable(canvas, {
+    name: "Section 15rem end",
+    role: "textbox",
+  })
+
+  expectAgentDrivable(canvas, {
+    name: "Section 34rem end",
+    role: "textbox",
+  })
+
+  const narrowRow = narrowStart.parentElement
+    ?.parentElement as HTMLElement
+
+  const wideRow = wideStart.parentElement
+    ?.parentElement as HTMLElement
+
+  await expect(
+    globalThis.getComputedStyle(narrowRow).flexDirection,
+  ).toBe("column")
+
+  await expect(
+    globalThis.getComputedStyle(wideRow).flexDirection,
+  ).toBe("row")
+
+  const [
+    narrowStartCaption,
+    narrowJoiner,
+    narrowEndCaption,
+  ] = Array.from(
+    narrowRow.querySelectorAll<HTMLElement>(
+      ":scope > * > span, :scope > span",
+    ),
+  )
+
+  const [wideStartCaption, wideJoiner, wideEndCaption] =
+    Array.from(
+      wideRow.querySelectorAll<HTMLElement>(
+        ":scope > * > span, :scope > span",
+      ),
+    )
+
+  // Narrow: two captions, no joining word.
+  await expect(narrowStartCaption).toHaveTextContent(
+    "Start",
+  )
+
+  await expect(narrowEndCaption).toHaveTextContent("End")
+
+  await expect(
+    globalThis.getComputedStyle(
+      narrowStartCaption as HTMLElement,
+    ).display,
+  ).not.toBe("none")
+
+  await expect(
+    globalThis.getComputedStyle(narrowJoiner as HTMLElement)
+      .display,
+  ).toBe("none")
+
+  // Wide: the joining word, no captions.
+  await expect(wideJoiner).toHaveTextContent("to")
+
+  await expect(
+    globalThis.getComputedStyle(wideJoiner as HTMLElement)
+      .display,
+  ).not.toBe("none")
+
+  await expect(
+    globalThis.getComputedStyle(
+      wideStartCaption as HTMLElement,
+    ).display,
+  ).toBe("none")
+
+  await expect(
+    globalThis.getComputedStyle(
+      wideEndCaption as HTMLElement,
+    ).display,
+  ).toBe("none")
+
+  // Every one of them is for the eye. A real `<label>` would name the
+  // start control a second time and fight the `id` a `Field` clones
+  // onto it, so nothing here is named "Start" or "End".
+  for (const caption of [
+    narrowStartCaption,
+    narrowJoiner,
+    narrowEndCaption,
+    wideStartCaption,
+    wideJoiner,
+    wideEndCaption,
+  ]) {
+    await expect(caption).toHaveAttribute(
+      "aria-hidden",
+      "true",
+    )
+  }
+
+  await expect(
+    canvas.queryAllByRole("textbox", {
+      name: /^(Start|End)$/,
+    }),
+  ).toHaveLength(0)
+
+  await expectNoAxeViolations(canvasElement)
+})
+
+test("milliseconds are optional to read as well as to type", async () => {
+  const { canvas, single } = await mountInteractive()
+
+  await userEvent.click(single)
+
+  // No fraction typed, so no fraction written back. You write 3, not
+  // 3.000.
+  await userEvent.type(single, "10:00{Enter}")
+
+  await expect(single).toHaveValue("00:10:00")
+
+  await waitFor(() => {
+    expect(
+      canvas.getByText("Chosen: 00:10:00"),
+    ).toBeInTheDocument()
+  })
+
+  await userEvent.clear(single)
+
+  // A real fraction still prints in full, padded on the right.
+  await userEvent.type(single, "10:00.25{Enter}")
+
+  await expect(single).toHaveValue("00:10:00.250")
+})