@reliability-design/web 1.4.4 → 1.4.6

package/dist/components/rel-time-picker/rel-time-picker.ts

@@ -1,9 +1,12 @@
 import { LitElement, html, css, nothing } from "lit";
 import { customElement, property, state, query } from "lit/decorators.js";
+import { live } from "lit/directives/live.js";
 import "@reliability-design/icons/rel-icon";
 import "../rel-button/rel-button";
+import { parseTimeInput } from "./time-parse";
+import { announce } from "../../utils/announce";
 
-type TimeColumn = "hour" | "minute" | "period";
+type TimeColumn = "hour" | "minute" | "second" | "period";
 
 /**
  * `<rel-time-picker>` — time selection field.
@@ -13,12 +16,18 @@ type TimeColumn = "hour" | "minute" | "period";
  * column selections are held in draft state until Apply is clicked; Cancel,
  * Escape, or an outside click discards the draft.
  *
- * The committed `value` is ALWAYS 24-hour "HH:mm" regardless of the display
- * `format`, so consumers get a consistent machine-readable string.
+ * The committed `value` is ALWAYS 24-hour "HH:mm" (or "HH:mm:ss" when
+ * `seconds` is enabled) regardless of the display `format`, so consumers get
+ * a consistent machine-readable string.
+ *
+ * Panel visuals follow the Figma "Time Picker" component (Reliability DS
+ * V1.0, node 8301:3771): fixed panel widths 220/250/280 by size, full-bleed
+ * columns with 1px dividers, neutral selected state, and a Now / Cancel / OK
+ * footer whose buttons are always size S.
  */
 @customElement("rel-time-picker")
 export class RelTimePicker extends LitElement {
-  /** Committed time, 24-hour "HH:mm" (e.g. "09:30", "17:05"). */
+  /** Committed time, 24-hour "HH:mm" or "HH:mm:ss" (e.g. "09:30", "17:05:30"). */
   @property({ type: String, reflect: true }) value: string | null = null;
   @property({ type: String }) placeholder = "Select time";
   @property({ type: String }) label: string | null = null;
@@ -26,10 +35,12 @@ export class RelTimePicker extends LitElement {
   @property({ type: Boolean }) required = false;
   @property({ type: Boolean, reflect: true }) readonly = false;
 
-  /** Display format of the trigger text and hour column. Value stays "HH:mm". */
+  /** Display format of the trigger text and hour column. Value stays 24-hour. */
   @property({ type: String }) format: "12h" | "24h" = "12h";
+  /** Shows the seconds column; committed value becomes "HH:mm:ss". */
+  @property({ type: Boolean, reflect: true }) seconds = false;
   /** Minute granularity of the minutes column (1, 5, 10, 15, 30, …). */
-  @property({ type: Number, attribute: "minute-step" }) minuteStep = 1;
+  @property({ type: Number, attribute: "minute-step" }) minuteStep = 5;
 
   /** Earliest selectable time, "HH:mm" (inclusive). */
   @property({ type: String, attribute: "min-time" }) minTime: string | null = null;
@@ -50,11 +61,25 @@ export class RelTimePicker extends LitElement {
   @property({ type: String, reflect: true }) variant: "outlined" = "outlined";
   @property({ type: Boolean, reflect: true }) fullWidth = false;
 
-  // Draft selection (hour is 0–23 internally; committed on Apply only)
+  // Draft selection (hour is 0–23 internally; committed on OK only)
   @state() private draftHour: number | null = null;
   @state() private draftMinute: number | null = null;
+  @state() private draftSecond: number | null = null;
+  /** Uncommitted typed text; null → the input shows the committed value. */
+  @state() private inputText: string | null = null;
+  /** Parse/range error message for the typed text (cleared on next input). */
+  @state() private inputError: string | null = null;
+
+  /**
+   * Whether the next popover open should move focus into the columns.
+   * Icon-click / ArrowDown / external `open` do (previous behavior); opening
+   * by clicking into the text input must NOT, or typing would be impossible.
+   */
+  private focusPanelOnOpen = true;
 
-  @query(".trigger-button") private triggerButton?: HTMLButtonElement;
+  @query(".trigger-input") private triggerInput?: HTMLInputElement;
+  @query(".trigger-button") private triggerButton?: HTMLElement;
+  @query(".popover") private popoverElement?: HTMLElement;
   @query(".columns") private columnsElement?: HTMLElement;
 
   static styles = css`
@@ -118,6 +143,11 @@ export class RelTimePicker extends LitElement {
       color: var(--rel-text-danger);
     }
 
+    /* Persistent live region — out of flow while empty so it adds no gap. */
+    .time-picker-support.empty {
+      position: absolute;
+    }
+
     .trigger-button {
       width: 100%;
       min-width: 160px;
@@ -140,28 +170,48 @@ export class RelTimePicker extends LitElement {
       letter-spacing: var(--rel-body-md-regular-letter-spacing);
     }
 
-    .trigger-button:hover:not(:disabled) {
+    :host(:not([disabled])) .trigger-button:hover {
       border-color: var(--rel-border-strong);
     }
 
-    .trigger-button:focus-visible {
+    .trigger-button:focus-within {
       outline: 2px solid var(--rel-border-focus);
       outline-offset: 2px;
       border-color: var(--rel-border-focus);
     }
 
-    .trigger-button:disabled {
+    :host([disabled]) .trigger-button {
       cursor: not-allowed;
       background: var(--rel-bg-surface-elevated);
     }
 
+    /* The editable field itself — the wrapper carries the box styles. */
+    .trigger-input {
+      flex: 1;
+      min-width: 0;
+      border: none;
+      background: transparent;
+      padding: 0;
+      margin: 0;
+      outline: none;
+      color: var(--rel-text-default);
+      font: inherit;
+      letter-spacing: inherit;
+      cursor: inherit;
+    }
+
+    .trigger-input::placeholder {
+      color: var(--rel-text-placeholder);
+      opacity: 1;
+    }
+
     /* Error state */
     .trigger-button.error,
-    .trigger-button.error:hover:not(:disabled) {
+    :host(:not([disabled])) .trigger-button.error:hover {
       border-color: var(--rel-border-danger);
     }
 
-    .trigger-button.error:focus-visible {
+    .trigger-button.error:focus-within {
       outline-color: var(--rel-border-danger);
       border-color: var(--rel-border-danger);
     }
@@ -185,15 +235,6 @@ export class RelTimePicker extends LitElement {
       letter-spacing: var(--rel-body-lg-regular-letter-spacing);
     }
 
-    .trigger-content {
-      flex: 1;
-      color: var(--rel-text-default);
-    }
-
-    .trigger-content.placeholder {
-      color: var(--rel-text-placeholder);
-    }
-
     .trigger-icons {
       display: flex;
       align-items: center;
@@ -224,16 +265,36 @@ export class RelTimePicker extends LitElement {
       height: 16px;
     }
 
+    /* Panel (Figma "Time Picker"): fixed width per size, full-bleed content. */
     .popover {
+      /* Reset native [popover] UA styles first (the panel is promoted to
+         the top layer so a drawer/sheet/modal ancestor — transformed,
+         overflow:hidden, or an equal-z-index sibling panel — can't clip it
+         or paint over it). While in the top layer, JS overrides the
+         anchored position below with inline fixed coordinates; the CSS
+         anchoring is the no-Popover-API fallback. */
+      margin: 0;
+      padding: 0;
+      height: auto;
+      inset: auto;
+      color: inherit;
       position: absolute;
       top: calc(100% + 4px);
       left: 0;
-      z-index: 1000;
+      z-index: 2147483647;
       background: var(--rel-bg-surface);
-      border: 1px solid var(--rel-border-default);
+      border: 1px solid var(--rel-border-subtle);
       border-radius: var(--rel-border-radius-sm);
       box-shadow: var(--rel-shadows-shadow-300);
-      padding: var(--rel-spacing-md);
+      /* Never wider or taller than the viewport (small screens). border-box
+         so the Figma widths and viewport caps include the 1px borders. */
+      box-sizing: border-box;
+      overflow-x: hidden;
+      overflow-y: auto;
+      min-width: min(220px, calc(100vw - 16px));
+      width: 250px;
+      max-width: calc(100vw - 16px);
+      max-height: calc(100vh - 16px);
       display: none;
     }
 
@@ -241,94 +302,122 @@ export class RelTimePicker extends LitElement {
       display: block;
     }
 
-    /* Draft readout (mirrors the range-picker FROM/TO block) */
-    .time-readout {
+    /* Typed-shortcut hints ("N → Now"); each chip applies its value. */
+    .shortcut-row {
       display: flex;
-      align-items: baseline;
-      gap: var(--rel-spacing-sm);
-      padding-bottom: var(--rel-spacing-sm);
-      margin-bottom: var(--rel-spacing-sm);
+      flex-wrap: wrap;
+      gap: var(--rel-spacing-2xs);
+      padding: var(--rel-spacing-2xs) var(--rel-spacing-xs);
       border-bottom: 1px solid var(--rel-border-subtle);
     }
 
-    .time-readout-label {
-      color: var(--rel-text-placeholder);
-      text-transform: uppercase;
-      font-family: var(--rel-body-xs-semibold-font-family);
-      font-weight: var(--rel-body-xs-semibold-font-weight);
-      font-size: var(--rel-body-xs-semibold-font-size);
-      line-height: var(--rel-body-xs-semibold-line-height);
-      letter-spacing: var(--rel-body-xs-semibold-letter-spacing);
+    .shortcut-chip {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--rel-spacing-2xs);
+      border: none;
+      background: transparent;
+      border-radius: var(--rel-border-radius-xs);
+      padding: var(--rel-spacing-3xs) var(--rel-spacing-2xs);
+      cursor: pointer;
+      color: var(--rel-text-default);
+      transition: background 0.15s ease;
+      font-family: var(--rel-body-xs-regular-font-family);
+      font-weight: var(--rel-body-xs-regular-font-weight);
+      font-size: var(--rel-body-xs-regular-font-size);
+      line-height: var(--rel-body-xs-regular-line-height);
+      letter-spacing: var(--rel-body-xs-regular-letter-spacing);
     }
 
-    .time-readout-value {
-      color: var(--rel-text-default);
-      font-family: var(--rel-body-md-semibold-font-family);
-      font-weight: var(--rel-body-md-semibold-font-weight);
-      font-size: var(--rel-body-md-semibold-font-size);
-      line-height: var(--rel-body-md-semibold-line-height);
-      letter-spacing: var(--rel-body-md-semibold-letter-spacing);
+    .shortcut-chip:hover {
+      background: var(--rel-bg-neutral-elevated-1);
     }
 
-    .time-readout-value.empty {
-      color: var(--rel-text-placeholder);
+    .shortcut-chip:focus-visible {
+      outline: 2px solid var(--rel-border-focus);
+      outline-offset: -2px;
     }
 
-    .columns {
-      display: flex;
-      gap: var(--rel-spacing-xs);
+    .shortcut-chip kbd {
+      border: 1px solid var(--rel-border-default);
+      border-bottom-width: 2px;
+      border-radius: var(--rel-border-radius-xs);
+      background: var(--rel-bg-surface-elevated);
+      padding: 0 var(--rel-spacing-3xs);
+      min-width: 18px;
+      text-align: center;
+      font-family: inherit;
+      font-size: inherit;
+      color: var(--rel-text-label);
     }
 
-    /* Columns share the panel width equally, so the two-column 24h layout
-       fills the same footprint the footer dictates instead of bunching left. */
-    .column {
+    /* Full-bleed column row with 1px dividers (Figma "Columns"). */
+    .columns {
       display: flex;
-      flex-direction: column;
-      flex: 1;
-      min-width: 64px;
+      align-items: stretch;
+      height: 260px;
     }
 
-    .column-header {
-      text-align: center;
-      color: var(--rel-text-placeholder);
-      padding: var(--rel-spacing-xs);
-      text-transform: uppercase;
-      font-family: var(--rel-body-xs-semibold-font-family);
-      font-weight: var(--rel-body-xs-semibold-font-weight);
-      font-size: var(--rel-body-xs-semibold-font-size);
-      line-height: var(--rel-body-xs-semibold-line-height);
-      letter-spacing: var(--rel-body-xs-semibold-letter-spacing);
+    .column-divider {
+      flex-shrink: 0;
+      width: 1px;
+      background: var(--rel-border-subtle);
     }
 
+    /* Each column scrolls independently. The 4px rail is always reserved
+       (scrollbar-gutter) so columns stay aligned whether or not they
+       overflow; the thumb only appears on overflow. */
     .column-list {
+      flex: 1;
+      min-width: 0;
       display: flex;
       flex-direction: column;
-      gap: var(--rel-spacing-3xs);
-      max-height: 224px;
+      /* Positioned so option offsetTop is list-relative — the in-column
+         scroll math depends on it (we never scrollIntoView: it scrolls every
+         ancestor, page included). */
+      position: relative;
       overflow-y: auto;
-      padding: var(--rel-spacing-3xs);
+      padding: var(--rel-spacing-2xs);
       scrollbar-width: thin;
+      scrollbar-color: var(--rel-border-default) transparent;
+      scrollbar-gutter: stable;
+    }
+
+    .column-list::-webkit-scrollbar {
+      width: 4px;
+    }
+
+    .column-list::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    .column-list::-webkit-scrollbar-thumb {
+      background: var(--rel-border-default);
+      border-radius: var(--rel-border-radius-full-rounded);
     }
 
+    /* Option cell (Figma ".Time Option"): selected uses the neutral
+       elevated-2 fill + medium weight, NOT the brand color. */
     .option-button {
       border: none;
       background: transparent;
-      border-radius: var(--rel-border-radius-sm);
+      border-radius: var(--rel-border-radius-xs);
       color: var(--rel-text-default);
       cursor: pointer;
-      padding: var(--rel-spacing-xs) var(--rel-spacing-sm);
-      text-align: center;
       flex-shrink: 0;
-      transition: all 0.15s ease;
-      font-family: var(--rel-body-sm-medium-font-family);
-      font-weight: var(--rel-body-sm-medium-font-weight);
-      font-size: var(--rel-body-sm-medium-font-size);
-      line-height: var(--rel-body-sm-medium-line-height);
-      letter-spacing: var(--rel-body-sm-medium-letter-spacing);
+      height: 36px;
+      padding: 0 var(--rel-spacing-xs);
+      text-align: center;
+      transition: background 0.15s ease;
+      font-family: var(--rel-body-md-regular-font-family);
+      font-weight: var(--rel-body-md-regular-font-weight);
+      font-size: var(--rel-body-md-regular-font-size);
+      line-height: var(--rel-body-md-regular-line-height);
+      letter-spacing: var(--rel-body-md-regular-letter-spacing);
     }
 
     .option-button:hover:not(:disabled):not(.selected) {
-      background: var(--rel-bg-surface-elevated);
+      background: var(--rel-bg-neutral-elevated-1);
     }
 
     .option-button:focus-visible {
@@ -338,9 +427,9 @@ export class RelTimePicker extends LitElement {
     }
 
     .option-button.selected {
-      background: var(--rel-action-brand-fill);
-      color: var(--rel-action-brand-label-icons-primary);
-      font-weight: var(--rel-body-md-semibold-font-weight);
+      background: var(--rel-bg-neutral-elevated-2);
+      color: var(--rel-text-default);
+      font-weight: var(--rel-body-md-medium-font-weight);
     }
 
     .option-button:disabled {
@@ -353,14 +442,15 @@ export class RelTimePicker extends LitElement {
       background: transparent;
     }
 
-    /* Footer (mirrors the range-picker calendar-footer) */
+    /* Footer (Figma "Footer"): 8px padding + 8px extra left so the "Now"
+       link aligns with the buttons' inner padding. Buttons are always S. */
     .time-footer {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      gap: var(--rel-spacing-sm);
-      padding-top: var(--rel-spacing-sm);
-      margin-top: var(--rel-spacing-sm);
+      gap: var(--rel-spacing-xs);
+      padding: var(--rel-spacing-xs);
+      padding-left: calc(var(--rel-spacing-xs) * 2);
       border-top: 1px solid var(--rel-border-subtle);
     }
 
@@ -370,6 +460,56 @@ export class RelTimePicker extends LitElement {
       gap: var(--rel-spacing-xs);
     }
 
+    /* The design narrows OK below the DS small min-width (60 vs 80) so the
+       compact footer fits the 220px panel. */
+    .footer-right rel-button[variant="primary"] {
+      --rel-button-min-width: 60px;
+    }
+
+    /* Panel size variants (Figma S/M/L): width 220/250/280, option height
+       32/36/40, body-sm/md/lg type. Medium is the base above. */
+    .time-picker-wrapper.small .popover {
+      width: 220px;
+    }
+
+    .time-picker-wrapper.small .columns {
+      height: 232px;
+    }
+
+    .time-picker-wrapper.small .option-button {
+      height: 32px;
+      font-family: var(--rel-body-sm-regular-font-family);
+      font-weight: var(--rel-body-sm-regular-font-weight);
+      font-size: var(--rel-body-sm-regular-font-size);
+      line-height: var(--rel-body-sm-regular-line-height);
+      letter-spacing: var(--rel-body-sm-regular-letter-spacing);
+    }
+
+    .time-picker-wrapper.small .option-button.selected {
+      font-weight: var(--rel-body-sm-medium-font-weight);
+    }
+
+    .time-picker-wrapper.large .popover {
+      width: 280px;
+    }
+
+    .time-picker-wrapper.large .columns {
+      height: 288px;
+    }
+
+    .time-picker-wrapper.large .option-button {
+      height: 40px;
+      font-family: var(--rel-body-lg-regular-font-family);
+      font-weight: var(--rel-body-lg-regular-font-weight);
+      font-size: var(--rel-body-lg-regular-font-size);
+      line-height: var(--rel-body-lg-regular-line-height);
+      letter-spacing: var(--rel-body-lg-regular-letter-spacing);
+    }
+
+    .time-picker-wrapper.large .option-button.selected {
+      font-weight: var(--rel-body-lg-medium-font-weight);
+    }
+
     @media (prefers-reduced-motion: reduce) {
       .trigger-button,
       .icon-button,
@@ -389,13 +529,17 @@ export class RelTimePicker extends LitElement {
     super.disconnectedCallback();
     document.removeEventListener("click", this.handleClickOutside);
     document.removeEventListener("keydown", this.handleEscapeKey);
+    window.removeEventListener("resize", this.onReposition);
+    window.removeEventListener("scroll", this.onReposition, true);
+    this.hideTopLayer();
   }
 
   private handleClickOutside = (e: MouseEvent) => {
     if (!this.open) return;
     const path = e.composedPath();
     if (!path.includes(this)) {
-      this.cancelPopover();
+      // Don't refocus the field — the user clicked somewhere else on purpose.
+      this.cancelPopover(false);
     }
   };
 
@@ -405,49 +549,163 @@ export class RelTimePicker extends LitElement {
     }
   };
 
+  // `open` is a public reflected property (consumers may set it directly,
+  // not only via the trigger), so top-layer promotion syncs here rather
+  // than inside toggle/cancel.
   updated(changedProperties: Map<string, any>) {
-    if (changedProperties.has("open") && this.open) {
+    if (changedProperties.has("open")) {
+      if (!this.open) {
+        window.removeEventListener("resize", this.onReposition);
+        window.removeEventListener("scroll", this.onReposition, true);
+        this.hideTopLayer();
+        this.focusPanelOnOpen = true;
+        return;
+      }
       this.resetDraftFromValue();
-      // Focus the selected (or first enabled) hour and center each column's
-      // selection once the popover has rendered.
+      this.showTopLayer();
+      window.addEventListener("resize", this.onReposition);
+      window.addEventListener("scroll", this.onReposition, true);
+      // Once the popover has rendered: center each column's selection, and —
+      // unless the open came from clicking into the text input (typing must
+      // keep working) — focus the selected hour without scrolling the page.
+      const focusPanel = this.focusPanelOnOpen;
+      this.focusPanelOnOpen = true;
       setTimeout(() => {
         this.scrollColumnsToSelection();
-        const target =
-          this.columnsElement?.querySelector<HTMLButtonElement>(
-            ".option-button.selected:not(:disabled)"
-          ) ??
-          this.columnsElement?.querySelector<HTMLButtonElement>(
-            ".option-button:not(:disabled)"
-          );
-        target?.focus();
+        if (focusPanel) this.focusPanelSelection();
       }, 0);
     }
   }
 
+  /* A drawer/sheet/modal ancestor breaks the anchored panel two ways: a
+   * transform makes it the containing block for position:fixed descendants
+   * (and overflow:hidden clips absolute ones), and an equal-z-index panel
+   * later in the DOM paints over the columns. Promoting the panel to the
+   * browser top layer sidesteps both — same fix as rel-popover /
+   * rel-autocomplete / rel-select / rel-range-picker / rel-date-picker.
+   * `manual` keeps outside-click and Escape handling under this component's
+   * own control. While in the top layer the CSS anchoring is meaningless, so
+   * the panel gets inline fixed coordinates from updatePopoverPosition()
+   * (which also replaces the old .open-up CSS flip). */
+
+  private showTopLayer() {
+    const el = this.popoverElement;
+    if (el && typeof el.showPopover === "function") {
+      try {
+        if (!el.matches(":popover-open")) el.showPopover();
+      } catch {
+        /* older engines / detached element — CSS fallback applies */
+      }
+    }
+    requestAnimationFrame(() => this.updatePopoverPosition());
+  }
+
+  private hideTopLayer() {
+    const el = this.popoverElement;
+    if (!el) return;
+    if (typeof el.hidePopover === "function") {
+      try {
+        if (el.matches(":popover-open")) el.hidePopover();
+      } catch {
+        /* already hidden or unsupported — nothing to do */
+      }
+    }
+    el.style.position = "";
+    el.style.top = "";
+    el.style.left = "";
+    el.style.maxHeight = "";
+  }
+
+  private onReposition = () => {
+    if (this.open) this.updatePopoverPosition();
+  };
+
+  private updatePopoverPosition = () => {
+    const panel = this.popoverElement;
+    const anchor = this.triggerButton;
+    if (!panel || !anchor || !this.open) return;
+
+    const t = anchor.getBoundingClientRect();
+    // Measure the natural height, clearing any cap from a previous pass.
+    panel.style.maxHeight = "";
+    const c = panel.getBoundingClientRect();
+
+    // Below the trigger; flip above when there's no room below. Either side
+    // keeps the same 4px gap to the field (above, the panel may cover the
+    // label) and the panel shrinks to the available space — columns scroll —
+    // rather than sliding over the trigger. 8px viewport margin on every edge.
+    const spaceBelow = Math.max(0, window.innerHeight - 8 - (t.bottom + 4));
+    const spaceAbove = Math.max(0, t.top - 4 - 8);
+    let top: number;
+    if (c.height <= spaceBelow || spaceBelow >= spaceAbove) {
+      panel.style.maxHeight = `${Math.min(c.height, spaceBelow)}px`;
+      top = t.bottom + 4;
+    } else {
+      const height = Math.min(c.height, spaceAbove);
+      panel.style.maxHeight = `${height}px`;
+      top = t.top - 4 - height;
+    }
+    let left = t.left;
+    if (left + c.width > window.innerWidth - 8) {
+      left = window.innerWidth - c.width - 8;
+    }
+    left = Math.max(8, left);
+
+    // Without top-layer support a transformed ancestor may be the containing
+    // block for position:fixed, shifting the panel away from the viewport
+    // coordinates computed above. Apply, re-measure, and cancel the offset.
+    panel.style.position = "fixed";
+    panel.style.top = `${top}px`;
+    panel.style.left = `${left}px`;
+    const applied = panel.getBoundingClientRect();
+    top -= applied.top - top;
+    left -= applied.left - left;
+    panel.style.top = `${top}px`;
+    panel.style.left = `${left}px`;
+  };
+
+  /** Focus the selected (or first enabled) option in the columns. */
+  private focusPanelSelection() {
+    const target =
+      this.columnsElement?.querySelector<HTMLButtonElement>(
+        ".option-button.selected:not(:disabled)"
+      ) ??
+      this.columnsElement?.querySelector<HTMLButtonElement>(
+        ".option-button:not(:disabled)"
+      );
+    target?.focus({ preventScroll: true });
+  }
+
   // ── Parsing / formatting ──
 
-  private parseTime(time: string | null): { hour: number; minute: number } | null {
+  private parseTime(
+    time: string | null
+  ): { hour: number; minute: number; second: number } | null {
     if (!time) return null;
-    const match = time.match(/^(\d{1,2}):(\d{2})$/);
+    const match = time.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/);
     if (!match) return null;
     const hour = parseInt(match[1], 10);
     const minute = parseInt(match[2], 10);
-    if (hour > 23 || minute > 59) return null;
-    return { hour, minute };
+    const second = match[3] ? parseInt(match[3], 10) : 0;
+    if (hour > 23 || minute > 59 || second > 59) return null;
+    return { hour, minute, second };
   }
 
-  private formatValue(hour: number, minute: number): string {
-    return `${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}`;
+  private formatValue(hour: number, minute: number, second = 0): string {
+    const hh = String(hour).padStart(2, "0");
+    const mm = String(minute).padStart(2, "0");
+    return this.seconds ? `${hh}:${mm}:${String(second).padStart(2, "0")}` : `${hh}:${mm}`;
   }
 
-  private formatDisplay(hour: number, minute: number): string {
+  private formatDisplay(hour: number, minute: number, second = 0): string {
     const mm = String(minute).padStart(2, "0");
+    const ss = this.seconds ? `:${String(second).padStart(2, "0")}` : "";
     if (this.format === "24h") {
-      return `${String(hour).padStart(2, "0")}:${mm}`;
+      return `${String(hour).padStart(2, "0")}:${mm}${ss}`;
     }
     const period = hour < 12 ? "AM" : "PM";
     const hour12 = hour % 12 === 0 ? 12 : hour % 12;
-    return `${hour12}:${mm} ${period}`;
+    return `${hour12}:${mm}${ss} ${period}`;
   }
 
   private toMinutes(hour: number, minute: number): number {
@@ -504,13 +762,22 @@ export class RelTimePicker extends LitElement {
         hour24: h,
       }));
     }
-    // 12-hour clock, chronological within the current period: 12, 01 … 11
+    // 12-hour clock, 01 … 12 as in the Figma "Hour 12" column ("12" maps to
+    // 00:xx AM / 12:xx PM).
     const period = this.draftPeriod ?? "AM";
     const base = period === "AM" ? 0 : 12;
-    return Array.from({ length: 12 }, (_, i) => ({
-      label: i === 0 ? "12" : String(i).padStart(2, "0"),
-      hour24: base + i,
-    }));
+    return Array.from({ length: 12 }, (_, i) => {
+      const display = i + 1;
+      return {
+        label: String(display).padStart(2, "0"),
+        hour24: base + (display % 12),
+      };
+    });
+  }
+
+  /** Seconds shown in the seconds column (always step 1). */
+  private getSecondOptions(): number[] {
+    return Array.from({ length: 60 }, (_, s) => s);
   }
 
   private get draftPeriod(): "AM" | "PM" | null {
@@ -522,6 +789,7 @@ export class RelTimePicker extends LitElement {
     const parsed = this.parseTime(this.value);
     this.draftHour = parsed ? parsed.hour : null;
     this.draftMinute = parsed ? parsed.minute : null;
+    this.draftSecond = parsed ? parsed.second : null;
   }
 
   /** Snap the draft minute to the nearest valid step minute for the hour. */
@@ -555,9 +823,9 @@ export class RelTimePicker extends LitElement {
   }
 
   /** Close discarding the draft (Cancel / Escape / outside click). */
-  private cancelPopover() {
+  private cancelPopover(refocus = true) {
     this.open = false;
-    this.triggerButton?.focus();
+    if (refocus) this.triggerInput?.focus();
     this.dispatchEvent(
       new CustomEvent("rel-open-change", {
         detail: { open: false },
@@ -569,8 +837,20 @@ export class RelTimePicker extends LitElement {
 
   private applySelection() {
     if (this.draftHour === null) return;
-    const newValue = this.formatValue(this.draftHour, this.draftMinute ?? 0);
+    const hour = this.draftHour;
+    const minute = this.draftMinute ?? 0;
+    const second = this.draftSecond ?? 0;
+    this.commitTime(hour, minute, second);
+    announce(`${this.formatDisplay(hour, minute, second)} selected`);
+    this.cancelPopover();
+  }
+
+  /** Commit a time: set value, reset typed text/error, fire rel-change. */
+  private commitTime(hour: number, minute: number, second: number) {
+    const newValue = this.formatValue(hour, minute, second);
     this.value = newValue;
+    this.inputText = null;
+    this.inputError = null;
     this.dispatchEvent(
       new CustomEvent("rel-change", {
         detail: { value: newValue },
@@ -578,7 +858,6 @@ export class RelTimePicker extends LitElement {
         composed: true,
       })
     );
-    this.cancelPopover();
   }
 
   /** Set the draft to the current time, snapped to the minute step and range. */
@@ -586,6 +865,7 @@ export class RelTimePicker extends LitElement {
     const now = new Date();
     const step = this.minuteStepSafe;
     this.draftHour = now.getHours();
+    this.draftSecond = this.seconds ? now.getSeconds() : null;
     this.draftMinute = Math.round(now.getMinutes() / step) * step;
     if (this.draftMinute >= 60) {
       this.draftMinute = 0;
@@ -610,6 +890,9 @@ export class RelTimePicker extends LitElement {
     this.value = null;
     this.draftHour = null;
     this.draftMinute = null;
+    this.draftSecond = null;
+    this.inputText = null;
+    this.inputError = null;
     this.dispatchEvent(
       new CustomEvent("rel-change", {
         detail: { value: null },
@@ -619,6 +902,73 @@ export class RelTimePicker extends LitElement {
     );
   }
 
+  // ── Typed keyboard entry ──
+
+  /**
+   * Parse and commit the typed text (Enter / blur). Invalid or out-of-range
+   * text keeps the field in an error state with the text preserved for
+   * correction; the committed value is untouched (Escape reverts the text).
+   */
+  private commitTypedValue() {
+    if (this.inputText === null) return; // nothing typed since last commit
+    const text = this.inputText.trim();
+
+    if (!text) {
+      // Field cleared by keyboard — behaves like the clear button.
+      this.inputText = null;
+      this.inputError = null;
+      if (this.value !== null) {
+        this.value = null;
+        this.dispatchEvent(
+          new CustomEvent("rel-change", {
+            detail: { value: null },
+            bubbles: true,
+            composed: true,
+          })
+        );
+      }
+      if (this.open) this.cancelPopover();
+      return;
+    }
+
+    const parsed = parseTimeInput(text);
+    if (!parsed) {
+      this.inputError = "Invalid time";
+      return;
+    }
+
+    if (parsed.kind === "now") {
+      this.applyNowShortcut();
+      return;
+    }
+
+    if (!this.isTimeInRange(parsed.hour, parsed.minute)) {
+      this.inputError = "Time out of range";
+      return;
+    }
+
+    // Typed entry accepts exact minutes/seconds (not limited to minuteStep).
+    this.commitTime(parsed.hour, parsed.minute, this.seconds ? parsed.second : 0);
+    if (this.open) this.cancelPopover();
+  }
+
+  /** "Now", committed directly (N shortcut / popover chip), clamped to range. */
+  private applyNowShortcut() {
+    const now = new Date();
+    let hour = now.getHours();
+    let minute = now.getMinutes();
+    const total = this.toMinutes(hour, minute);
+    if (total < this.minBoundMinutes) {
+      hour = Math.floor(this.minBoundMinutes / 60);
+      minute = this.minBoundMinutes % 60;
+    } else if (total > this.maxBoundMinutes) {
+      hour = Math.floor(this.maxBoundMinutes / 60);
+      minute = this.maxBoundMinutes % 60;
+    }
+    this.commitTime(hour, minute, this.seconds ? now.getSeconds() : 0);
+    if (this.open) this.cancelPopover();
+  }
+
   // ── Column selection ──
 
   private selectHour(hour24: number) {
@@ -643,6 +993,22 @@ export class RelTimePicker extends LitElement {
     this.draftMinute = minute;
   }
 
+  private selectSecond(second: number) {
+    if (this.draftHour === null) {
+      // Second picked first — default the hour to the first enabled one.
+      for (let h = 0; h < 24; h++) {
+        if (this.isHourEnabled(h)) {
+          this.draftHour = h;
+          break;
+        }
+      }
+      if (this.draftHour === null) return;
+    }
+    if (this.draftMinute === null) this.draftMinute = 0;
+    this.draftSecond = second;
+    this.clampDraftToRange();
+  }
+
   private selectPeriod(period: "AM" | "PM") {
     if (!this.isPeriodEnabled(period)) return;
     const base = period === "AM" ? 0 : 12;
@@ -663,25 +1029,111 @@ export class RelTimePicker extends LitElement {
     this.scrollColumnsToSelection();
   }
 
+  /**
+   * Scrolls the column's own scroll container only. scrollIntoView is off
+   * limits here: it walks ALL scrollable ancestors, so it yanked the page
+   * up/down whenever a column recentred (user-reported jump bug).
+   */
+  private scrollOptionInColumn(btn: HTMLElement, block: "center" | "nearest") {
+    const list = btn.parentElement;
+    if (!list) return;
+    const top = btn.offsetTop;
+    const height = btn.offsetHeight;
+    if (block === "center") {
+      list.scrollTop = top - (list.clientHeight - height) / 2;
+    } else if (top < list.scrollTop) {
+      list.scrollTop = top;
+    } else if (top + height > list.scrollTop + list.clientHeight) {
+      list.scrollTop = top + height - list.clientHeight;
+    }
+  }
+
   private scrollColumnsToSelection() {
     this.updateComplete.then(() => {
       this.columnsElement
         ?.querySelectorAll<HTMLButtonElement>(".option-button.selected")
-        .forEach((btn) => btn.scrollIntoView({ block: "center" }));
+        .forEach((btn) => this.scrollOptionInColumn(btn, "center"));
     });
   }
 
   // ── Keyboard ──
 
-  private handleTriggerKeydown(e: KeyboardEvent) {
-    if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+  private handleInputInput(e: Event) {
+    this.inputText = (e.target as HTMLInputElement).value;
+    if (this.inputError) this.inputError = null;
+  }
+
+  private handleInputKeydown(e: KeyboardEvent) {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      if (this.inputText === null) {
+        // Nothing typed — Enter toggles the popover (previous trigger behavior).
+        if (!this.open) {
+          this.toggleTimePopover();
+        } else {
+          this.applySelection();
+        }
+      } else {
+        this.commitTypedValue();
+      }
+      return;
+    }
+    if (e.key === "ArrowDown") {
       e.preventDefault();
       if (!this.open) {
         this.toggleTimePopover();
+      } else {
+        this.focusPanelSelection();
       }
+      return;
+    }
+    if (e.key === "Escape" && this.inputText !== null) {
+      // Revert the typed text; the document listener closes the popover.
+      this.inputText = null;
+      this.inputError = null;
     }
   }
 
+  /** Clicking anywhere on the field opens the popover, keeping focus typed-in. */
+  private handleFieldClick() {
+    if (this.open || this.disabled || this.readonly) return;
+    this.focusPanelOnOpen = false;
+    this.toggleTimePopover();
+  }
+
+  /** The clock icon toggles the popover with the previous focus behavior. */
+  private handleIconClick(e: Event) {
+    e.stopPropagation();
+    if (this.open) {
+      this.cancelPopover();
+    } else {
+      this.toggleTimePopover();
+    }
+  }
+
+  /** Commit typed text when focus leaves the component entirely. */
+  private handleInputBlur = (e: FocusEvent) => {
+    this.dispatchEvent(new CustomEvent("rel-blur", { bubbles: true, composed: true }));
+    const related = e.relatedTarget as Node | null;
+    if (related && (this.renderRoot.contains(related) || this.contains(related))) {
+      return; // focus moved into the panel/icons — their own handlers commit
+    }
+    this.commitTypedValue();
+  };
+
+  /** N inside the panel (columns/footer focus) applies Now directly. */
+  private handlePanelKeydown = (e: KeyboardEvent) => {
+    if (
+      (e.key === "n" || e.key === "N") &&
+      !e.ctrlKey &&
+      !e.metaKey &&
+      !e.altKey
+    ) {
+      e.preventDefault();
+      this.applyNowShortcut();
+    }
+  };
+
   /**
    * Column navigation: Up/Down move within the column (and select), Left/Right
    * jump between columns, Home/End go to the first/last option, Enter applies.
@@ -729,14 +1181,15 @@ export class RelTimePicker extends LitElement {
 
     if (target && target !== buttons[index]) {
       target.click();
-      target.focus();
-      target.scrollIntoView({ block: "nearest" });
+      target.focus({ preventScroll: true });
+      this.scrollOptionInColumn(target, "nearest");
     }
   }
 
   private focusAdjacentColumn(from: TimeColumn, direction: 1 | -1) {
-    const order: TimeColumn[] =
-      this.format === "12h" ? ["hour", "minute", "period"] : ["hour", "minute"];
+    const order: TimeColumn[] = ["hour", "minute"];
+    if (this.seconds) order.push("second");
+    if (this.format === "12h") order.push("period");
     const nextIndex = order.indexOf(from) + direction;
     if (nextIndex < 0 || nextIndex >= order.length) return;
     const lists = this.columnsElement?.querySelectorAll(".column-list");
@@ -744,26 +1197,27 @@ export class RelTimePicker extends LitElement {
     const target =
       list?.querySelector<HTMLButtonElement>(".option-button.selected:not(:disabled)") ??
       list?.querySelector<HTMLButtonElement>(".option-button:not(:disabled)");
-    target?.focus();
-    target?.scrollIntoView({ block: "nearest" });
+    if (target) {
+      target.focus({ preventScroll: true });
+      this.scrollOptionInColumn(target, "nearest");
+    }
   }
 
   // ── Render ──
 
   render() {
-    const isError = this.error || this.invalid;
-    const belowText = isError && this.errorMessage ? this.errorMessage : this.helperText;
+    const isError = this.error || this.invalid || this.inputError !== null;
+    const belowText = isError
+      ? this.errorMessage ?? this.inputError ?? this.helperText
+      : this.helperText;
     const describedById = belowText ? "time-picker-desc" : undefined;
     const parsedValue = this.parseTime(this.value);
     const displayText = parsedValue
-      ? this.formatDisplay(parsedValue.hour, parsedValue.minute)
+      ? this.formatDisplay(parsedValue.hour, parsedValue.minute, parsedValue.second)
       : "";
-    const draftDisplay =
-      this.draftHour !== null
-        ? this.formatDisplay(this.draftHour, this.draftMinute ?? 0)
-        : "";
     const hourOptions = this.getHourOptions();
     const minuteOptions = this.getMinuteOptions();
+    const secondOptions = this.seconds ? this.getSecondOptions() : [];
     const draftPeriod = this.draftPeriod;
     const wrapperClasses = [
       "time-picker-wrapper",
@@ -788,33 +1242,39 @@ export class RelTimePicker extends LitElement {
           ? html`<input type="hidden" name=${this.name} .value=${this.value ?? ""} />`
           : nothing}
 
-        <button
+        <div
           part="trigger"
           class="trigger-button ${isError ? "error" : ""}"
-          type="button"
-          ?disabled=${this.disabled}
-          @click=${this.toggleTimePopover}
-          @keydown=${this.handleTriggerKeydown}
-          @focus=${() =>
-            this.dispatchEvent(
-              new CustomEvent("rel-focus", { bubbles: true, composed: true })
-            )}
-          @blur=${() =>
-            this.dispatchEvent(
-              new CustomEvent("rel-blur", { bubbles: true, composed: true })
-            )}
-          aria-label=${this.label || "Select time"}
-          aria-haspopup="dialog"
-          aria-expanded=${this.open}
-          aria-required=${this.required}
-          aria-invalid=${isError}
-          aria-readonly=${this.readonly}
-          aria-describedby=${describedById ?? nothing}
-          aria-labelledby=${this.label ? "time-picker-label" : nothing}
+          @click=${this.handleFieldClick}
         >
-          <span part="value" class="trigger-content ${displayText ? "" : "placeholder"}">
-            ${displayText || this.placeholder}
-          </span>
+          <input
+            part="value"
+            class="trigger-input"
+            type="text"
+            .value=${live(this.inputText ?? displayText)}
+            placeholder=${this.placeholder}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            autocomplete="off"
+            spellcheck="false"
+            enterkeyhint="done"
+            @input=${this.handleInputInput}
+            @keydown=${this.handleInputKeydown}
+            @focus=${() =>
+              this.dispatchEvent(
+                new CustomEvent("rel-focus", { bubbles: true, composed: true })
+              )}
+            @blur=${this.handleInputBlur}
+            role="combobox"
+            aria-label=${this.label || "Select time"}
+            aria-haspopup="dialog"
+            aria-expanded=${this.open}
+            aria-controls="time-picker-panel"
+            aria-required=${this.required}
+            aria-invalid=${isError}
+            aria-describedby=${describedById ?? nothing}
+            aria-labelledby=${this.label ? "time-picker-label" : nothing}
+          />
           <span class="trigger-icons">
             ${this.clearable && this.value
               ? html`
@@ -835,126 +1295,158 @@ export class RelTimePicker extends LitElement {
                   </button>
                 `
               : nothing}
-            <rel-icon part="icon" name="time-filled" size="sm"></rel-icon>
+            <button
+              class="icon-button"
+              type="button"
+              aria-label="Open time panel"
+              aria-expanded=${this.open}
+              ?disabled=${this.disabled}
+              @click=${this.handleIconClick}
+            >
+              <rel-icon part="icon" name="time-filled" size="sm"></rel-icon>
+            </button>
           </span>
-        </button>
+        </div>
 
         <div
           part="panel"
+          id="time-picker-panel"
           class="popover ${this.open ? "open" : ""}"
+          popover="manual"
           role="dialog"
           aria-label="Choose time"
+          @keydown=${this.handlePanelKeydown}
         >
-          <div class="time-readout">
-            <span class="time-readout-label">Time</span>
-            <span class="time-readout-value ${draftDisplay ? "" : "empty"}">
-              ${draftDisplay || (this.format === "24h" ? "--:--" : "--:-- --")}
-            </span>
+          <div part="shortcuts" class="shortcut-row">
+            <button
+              class="shortcut-chip"
+              type="button"
+              title="Type N in the field for the current time"
+              @click=${() => this.applyNowShortcut()}
+            >
+              <kbd aria-hidden="true">N</kbd><span>Now</span>
+            </button>
           </div>
-
           <div class="columns">
-            <div class="column">
-              <div class="column-header" aria-hidden="true">Hour</div>
-              <div class="column-list" role="listbox" aria-label="Hours">
-                ${hourOptions.map(
-                  (opt, i) => html`
-                    <button
-                      part="option"
-                      class="option-button ${this.draftHour === opt.hour24
-                        ? "selected"
-                        : ""}"
-                      type="button"
-                      role="option"
-                      aria-selected=${this.draftHour === opt.hour24}
-                      ?disabled=${!this.isHourEnabled(opt.hour24)}
-                      @click=${() => this.selectHour(opt.hour24)}
-                      @keydown=${(e: KeyboardEvent) => this.handleOptionKeydown(e, "hour")}
-                      tabindex=${this.draftHour === opt.hour24 ||
-                      (this.draftHour === null && i === 0)
-                        ? 0
-                        : -1}
-                    >
-                      ${opt.label}
-                    </button>
-                  `
-                )}
-              </div>
+            <div class="column-list" role="listbox" aria-label="Hours">
+              ${hourOptions.map(
+                (opt, i) => html`
+                  <button
+                    part="option"
+                    class="option-button ${this.draftHour === opt.hour24
+                      ? "selected"
+                      : ""}"
+                    type="button"
+                    role="option"
+                    aria-selected=${this.draftHour === opt.hour24}
+                    ?disabled=${!this.isHourEnabled(opt.hour24)}
+                    @click=${() => this.selectHour(opt.hour24)}
+                    @keydown=${(e: KeyboardEvent) => this.handleOptionKeydown(e, "hour")}
+                    tabindex=${this.draftHour === opt.hour24 ||
+                    (this.draftHour === null && i === 0)
+                      ? 0
+                      : -1}
+                  >
+                    ${opt.label}
+                  </button>
+                `
+              )}
             </div>
 
-            <div class="column">
-              <div class="column-header" aria-hidden="true">Min</div>
-              <div class="column-list" role="listbox" aria-label="Minutes">
-                ${minuteOptions.map(
-                  (m, i) => html`
-                    <button
-                      part="option"
-                      class="option-button ${this.draftMinute === m ? "selected" : ""}"
-                      type="button"
-                      role="option"
-                      aria-selected=${this.draftMinute === m}
-                      ?disabled=${this.draftHour !== null &&
-                      !this.isTimeInRange(this.draftHour, m)}
-                      @click=${() => this.selectMinute(m)}
-                      @keydown=${(e: KeyboardEvent) =>
-                        this.handleOptionKeydown(e, "minute")}
-                      tabindex=${this.draftMinute === m ||
-                      (this.draftMinute === null && i === 0)
-                        ? 0
-                        : -1}
-                    >
-                      ${String(m).padStart(2, "0")}
-                    </button>
-                  `
-                )}
-              </div>
+            <div class="column-divider" aria-hidden="true"></div>
+
+            <div class="column-list" role="listbox" aria-label="Minutes">
+              ${minuteOptions.map(
+                (m, i) => html`
+                  <button
+                    part="option"
+                    class="option-button ${this.draftMinute === m ? "selected" : ""}"
+                    type="button"
+                    role="option"
+                    aria-selected=${this.draftMinute === m}
+                    ?disabled=${this.draftHour !== null &&
+                    !this.isTimeInRange(this.draftHour, m)}
+                    @click=${() => this.selectMinute(m)}
+                    @keydown=${(e: KeyboardEvent) =>
+                      this.handleOptionKeydown(e, "minute")}
+                    tabindex=${this.draftMinute === m ||
+                    (this.draftMinute === null && i === 0)
+                      ? 0
+                      : -1}
+                  >
+                    ${String(m).padStart(2, "0")}
+                  </button>
+                `
+              )}
             </div>
 
+            ${this.seconds
+              ? html`
+                  <div class="column-divider" aria-hidden="true"></div>
+                  <div class="column-list" role="listbox" aria-label="Seconds">
+                    ${secondOptions.map(
+                      (s, i) => html`
+                        <button
+                          part="option"
+                          class="option-button ${this.draftSecond === s
+                            ? "selected"
+                            : ""}"
+                          type="button"
+                          role="option"
+                          aria-selected=${this.draftSecond === s}
+                          @click=${() => this.selectSecond(s)}
+                          @keydown=${(e: KeyboardEvent) =>
+                            this.handleOptionKeydown(e, "second")}
+                          tabindex=${this.draftSecond === s ||
+                          (this.draftSecond === null && i === 0)
+                            ? 0
+                            : -1}
+                        >
+                          ${String(s).padStart(2, "0")}
+                        </button>
+                      `
+                    )}
+                  </div>
+                `
+              : nothing}
             ${this.format === "12h"
               ? html`
-                  <div class="column">
-                    <div class="column-header" aria-hidden="true">AM/PM</div>
-                    <div class="column-list" role="listbox" aria-label="AM or PM">
-                      ${(["AM", "PM"] as const).map(
-                        (p) => html`
-                          <button
-                            part="option"
-                            class="option-button ${draftPeriod === p ? "selected" : ""}"
-                            type="button"
-                            role="option"
-                            aria-selected=${draftPeriod === p}
-                            ?disabled=${!this.isPeriodEnabled(p)}
-                            @click=${() => this.selectPeriod(p)}
-                            @keydown=${(e: KeyboardEvent) =>
-                              this.handleOptionKeydown(e, "period")}
-                            tabindex=${draftPeriod === p ||
-                            (draftPeriod === null && p === "AM")
-                              ? 0
-                              : -1}
-                          >
-                            ${p}
-                          </button>
-                        `
-                      )}
-                    </div>
+                  <div class="column-divider" aria-hidden="true"></div>
+                  <div class="column-list" role="listbox" aria-label="AM or PM">
+                    ${(["AM", "PM"] as const).map(
+                      (p) => html`
+                        <button
+                          part="option"
+                          class="option-button ${draftPeriod === p ? "selected" : ""}"
+                          type="button"
+                          role="option"
+                          aria-selected=${draftPeriod === p}
+                          ?disabled=${!this.isPeriodEnabled(p)}
+                          @click=${() => this.selectPeriod(p)}
+                          @keydown=${(e: KeyboardEvent) =>
+                            this.handleOptionKeydown(e, "period")}
+                          tabindex=${draftPeriod === p ||
+                          (draftPeriod === null && p === "AM")
+                            ? 0
+                            : -1}
+                        >
+                          ${p}
+                        </button>
+                      `
+                    )}
                   </div>
                 `
               : nothing}
           </div>
 
           <div part="footer" class="time-footer">
-            <rel-button
-              variant="secondary"
-              size="small"
-              border="corner-radius"
-              @click=${() => this.selectNow()}
-            >
+            <rel-button variant="link" size="small" @click=${() => this.selectNow()}>
               Now
             </rel-button>
             <div class="footer-right">
               <rel-button
-                variant="secondary"
+                variant="ghost"
                 size="small"
-                border="corner-radius"
                 @click=${() => this.cancelPopover()}
               >
                 Cancel
@@ -963,25 +1455,21 @@ export class RelTimePicker extends LitElement {
                 variant="primary"
                 tone="default"
                 size="small"
-                border="corner-radius"
                 ?disabled=${this.draftHour === null}
                 @click=${() => this.applySelection()}
               >
-                Apply
+                OK
               </rel-button>
             </div>
           </div>
         </div>
 
-        ${belowText
-          ? html`<div
-              part="helper"
-              class="time-picker-support ${isError ? "error" : ""}"
-              id=${describedById}
-            >
-              ${belowText}
-            </div>`
-          : nothing}
+        <div
+          part="helper"
+          class="time-picker-support ${isError ? "error" : ""} ${belowText ? "" : "empty"}"
+          id="time-picker-desc"
+          aria-live="polite"
+        >${belowText ?? nothing}</div>
       </div>
     `;
   }