@ds-mo/ui 14.34.0 → 14.36.0

package/dist/lib/components/ShellApp/shell-app-types.d.ts

@@ -5,7 +5,7 @@ import type { MobileHeaderTone } from '../MobileHeader/mobile-header-types';
 import type { PanelNavGroup, PanelNavItem, PanelNavRouterMode } from '../PanelNav/panel-nav-types';
 import type { PanelToolsHeaders, PanelToolsHeaderAction, PanelToolsItem, PanelToolsRailAccessory } from '../PanelTools/panel-tools-types';
 import type { NavChromeStyle } from '../../shell/nav-chrome';
-import type { ShellPageContentInset, ShellPageContentSurface } from '../ShellPage/shell-page-types';
+import type { ShellPageContentInset, ShellPageContentSurface, ShellPageHeaderPresentation } from '../ShellPage/shell-page-types';
 export type ShellAppComposition = 'managed' | 'slotted';
 export type ShellSectionNavigation = 'bar' | 'panel';
 /**
@@ -48,6 +48,8 @@ export interface ShellNavigationConfig {
  * the intentionally different mobile MobileHeader presentation.
  */
 export interface ShellPageChromeConfig {
+    /** Explicit presentation for the page-local title. */
+    headerPresentation?: ShellPageHeaderPresentation;
     heading?: string;
     /** Desktop/tablet route-navigation heading when it differs from the page h1. */
     routeHeading?: string;

package/dist/lib/utils/button-render.d.ts

@@ -1,6 +1,6 @@
 import { type ButtonSize, type ButtonVariant } from './button-types';
 interface ButtonContentOptions {
-    namespace: 'button-filled' | 'button-unfilled';
+    namespace: 'button-filled' | 'button-inverted' | 'button-unfilled';
     variant: ButtonVariant;
     size: ButtonSize;
     label: string;

package/dist/lib/utils/clock-time.d.ts

@@ -0,0 +1,22 @@
+export type ClockPeriod = 'AM' | 'PM';
+export interface ClockTimeParts {
+    hour12: number;
+    minute: number;
+    period: ClockPeriod;
+}
+export declare const CLOCK_HOURS: readonly [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+export declare const CLOCK_PERIODS: readonly ClockPeriod[];
+export declare function isClockTime(value: string): boolean;
+export declare function clockMinuteStep(step?: string | number): number;
+export declare function clockMinutes(step?: number, baseMinute?: number): number[];
+export declare function splitClockTime(value: string): ClockTimeParts | null;
+export declare function joinClockTime(parts: ClockTimeParts): string;
+/** Readable 12-hour label for filled clock values such as `09:00` → `9:00 AM`. */
+export declare function formatClockTimeLabel(value: string): string;
+/** Parse a typed clock time: `HH:MM`, `H:MM`, or a 12-hour label such as `9:00 AM`. */
+export declare function parseLooseClockTime(value: string): string;
+export declare function isClockTimeOutOfRange(value: string, min?: string, max?: string): boolean;
+/** Whether a minute-precision clock value aligns to the configured native step. */
+export declare function isClockTimeStepAligned(value: string, step?: string | number, min?: string): boolean;
+/** Move within a finite list without wrapping past the first or last item. */
+export declare function stepBoundedIndex(index: number, offset: number, length: number): number;

package/dist/lib/utils/date-filter-value.d.ts

@@ -49,6 +49,10 @@ export type ParsedDateFilterValue = {
     kind: 'range';
 } & DateFilterRange);
 export declare function isIsoCalendarDate(value: string): boolean;
+/** Readable calendar date for filled ISO values such as `2026-09-10` → `Sep 10, 2026`. */
+export declare function formatIsoCalendarDateLabel(value: string): string;
+/** Parse a typed calendar date: ISO, `M/D/YYYY`, or a short-month label such as `Sep 10, 2026`. */
+export declare function parseLooseCalendarDate(value: string): string;
 export declare function shiftIsoCalendarDate(value: string, days: number): string;
 export declare function dateFilterRelativeValue(preset: DateFilterRelativePreset): DateFilterRelativeValue;
 export declare function dateFilterRangeValue(start: string, end?: string): DateFilterRangeValue;

package/dist/lib/utils/index.d.ts

@@ -25,5 +25,7 @@ export { CONTROL_SUPPORTING_TEXT_VARIANT, CONTROL_TEXT_VARIANT } from './control
 export type { ControlInsetDepth, ControlSize } from './control-text';
 export { choicePopupMinWidth, resolveChoicePopupAlignOffset } from './choice-popup-alignment';
 export type { ChoicePopupAnchorAlignment } from './choice-popup-alignment';
-export { DATE_FILTER_RELATIVE_PRESETS, dateFilterRangeValue, dateFilterRelativeValue, isIsoCalendarDate, normalizeDateFilterValue, parseDateFilterValue, resolveDateFilterRange, shiftIsoCalendarDate, } from './date-filter-value';
+export { CLOCK_HOURS, CLOCK_PERIODS, clockMinuteStep, clockMinutes, formatClockTimeLabel, isClockTime, isClockTimeOutOfRange, isClockTimeStepAligned, joinClockTime, parseLooseClockTime, splitClockTime, stepBoundedIndex, } from './clock-time';
+export type { ClockPeriod, ClockTimeParts } from './clock-time';
+export { DATE_FILTER_RELATIVE_PRESETS, dateFilterRangeValue, dateFilterRelativeValue, formatIsoCalendarDateLabel, isIsoCalendarDate, parseLooseCalendarDate, normalizeDateFilterValue, parseDateFilterValue, resolveDateFilterRange, shiftIsoCalendarDate, } from './date-filter-value';
 export type { DateFilterRange, DateFilterRangeValue, DateFilterRelativePreset, DateFilterRelativeValue, DateFilterValue, ParsedDateFilterValue, } from './date-filter-value';

package/dist/lib/utils/index.js

@@ -1058,6 +1058,85 @@ function choicePopupMinWidth(anchorWidth, sectionInsetPx) {
   return anchorWidth + sectionInsetPx * 2;
 }
 
+// src/wc/utils/clock-time.ts
+var CLOCK_HOURS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+var CLOCK_PERIODS = ["AM", "PM"];
+var CLOCK_TIME_PATTERN = /^\d{2}:\d{2}$/;
+function isClockTime(value) {
+  if (!CLOCK_TIME_PATTERN.test(value)) return false;
+  const [hour, minute] = value.split(":").map(Number);
+  return hour >= 0 && hour <= 23 && minute >= 0 && minute <= 59;
+}
+function clockMinuteStep(step = 60) {
+  const seconds = typeof step === "number" ? step : Number(step);
+  if (!Number.isFinite(seconds) || seconds <= 0) return 1;
+  if (seconds < 60) return 1;
+  return Math.max(1, Math.round(seconds / 60));
+}
+function clockMinutes(step = 1, baseMinute = 0) {
+  const stride = Number.isFinite(step) && step > 0 ? Math.floor(step) : 1;
+  const normalizedBase = (Math.floor(baseMinute) % 60 + 60) % 60;
+  const values = /* @__PURE__ */ new Set();
+  for (let offset = 0; offset < 1440; offset += stride) {
+    values.add((normalizedBase + offset) % 60);
+  }
+  return [...values].sort((a, b) => a - b);
+}
+function splitClockTime(value) {
+  if (!isClockTime(value)) return null;
+  const [hour24, minute] = value.split(":").map(Number);
+  const period = hour24 >= 12 ? "PM" : "AM";
+  const hour12 = hour24 % 12 === 0 ? 12 : hour24 % 12;
+  return { hour12, minute, period };
+}
+function joinClockTime(parts) {
+  const hour24 = parts.period === "AM" ? parts.hour12 === 12 ? 0 : parts.hour12 : parts.hour12 === 12 ? 12 : parts.hour12 + 12;
+  return `${String(hour24).padStart(2, "0")}:${String(parts.minute).padStart(2, "0")}`;
+}
+function formatClockTimeLabel(value) {
+  const parts = splitClockTime(value);
+  if (!parts) return "";
+  return `${parts.hour12}:${String(parts.minute).padStart(2, "0")} ${parts.period}`;
+}
+function parseLooseClockTime(value) {
+  const trimmed = value.trim();
+  if (!trimmed) return "";
+  if (isClockTime(trimmed)) return trimmed;
+  const twentyFour = trimmed.match(/^(\d{1,2}):(\d{2})$/);
+  if (twentyFour) {
+    const hour = Number(twentyFour[1]);
+    const minute2 = Number(twentyFour[2]);
+    if (hour > 23 || minute2 > 59) return "";
+    return `${String(hour).padStart(2, "0")}:${twentyFour[2]}`;
+  }
+  const meridiem = trimmed.match(/^(\d{1,2})(?::(\d{2}))?\s*([AaPp])\.?[Mm]\.?$/);
+  if (!meridiem) return "";
+  const hour12 = Number(meridiem[1]);
+  const minute = meridiem[2] ? Number(meridiem[2]) : 0;
+  if (hour12 < 1 || hour12 > 12 || minute > 59) return "";
+  const period = meridiem[3].toUpperCase() === "P" ? "PM" : "AM";
+  return joinClockTime({ hour12, minute, period });
+}
+function isClockTimeOutOfRange(value, min, max) {
+  if (!isClockTime(value)) return true;
+  if (min && isClockTime(min) && value < min) return true;
+  if (max && isClockTime(max) && value > max) return true;
+  return false;
+}
+function isClockTimeStepAligned(value, step = 60, min) {
+  if (!isClockTime(value)) return false;
+  const valueParts = value.split(":").map(Number);
+  const baseParts = min && isClockTime(min) ? min.split(":").map(Number) : [0, 0];
+  const stride = clockMinuteStep(step);
+  const valueMinutes = valueParts[0] * 60 + valueParts[1];
+  const baseMinutes = baseParts[0] * 60 + baseParts[1];
+  return (valueMinutes - baseMinutes) % stride === 0;
+}
+function stepBoundedIndex(index, offset, length) {
+  if (length <= 0) return 0;
+  return Math.min(length - 1, Math.max(0, index + offset));
+}
+
 // src/wc/utils/date-filter-value.ts
 var DATE_FILTER_RELATIVE_PRESETS = [
   { label: "Today", value: "today", days: 1, offset: 0 },
@@ -1069,12 +1148,52 @@ var DATE_FILTER_RELATIVE_PRESETS = [
   { label: "Last 90 days", value: "last-90-days", days: 90, offset: 0 }
 ];
 var ISO_DATE_PATTERN = /^\d{4}-\d{2}-\d{2}$/;
+var ISO_CALENDAR_DATE_LABEL = new Intl.DateTimeFormat("en-US", {
+  month: "short",
+  day: "numeric",
+  year: "numeric",
+  timeZone: "UTC"
+});
 function isIsoCalendarDate(value) {
   if (!ISO_DATE_PATTERN.test(value)) return false;
   const [year, month, day] = value.split("-").map(Number);
   const date = new Date(Date.UTC(year, month - 1, day));
   return date.getUTCFullYear() === year && date.getUTCMonth() === month - 1 && date.getUTCDate() === day;
 }
+function formatIsoCalendarDateLabel(value) {
+  if (!isIsoCalendarDate(value)) return "";
+  return ISO_CALENDAR_DATE_LABEL.format(/* @__PURE__ */ new Date(`${value}T00:00:00Z`));
+}
+var MONTH_LABELS = [
+  "jan",
+  "feb",
+  "mar",
+  "apr",
+  "may",
+  "jun",
+  "jul",
+  "aug",
+  "sep",
+  "oct",
+  "nov",
+  "dec"
+];
+function parseLooseCalendarDate(value) {
+  const trimmed = value.trim();
+  if (!trimmed) return "";
+  if (isIsoCalendarDate(trimmed)) return trimmed;
+  const numeric = trimmed.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/);
+  if (numeric) {
+    const iso2 = `${numeric[3]}-${numeric[1].padStart(2, "0")}-${numeric[2].padStart(2, "0")}`;
+    return isIsoCalendarDate(iso2) ? iso2 : "";
+  }
+  const labelled = trimmed.match(/^([A-Za-z]{3})\s+(\d{1,2}),\s+(\d{4})$/);
+  if (!labelled) return "";
+  const monthIndex = MONTH_LABELS.indexOf(labelled[1].toLowerCase());
+  if (monthIndex < 0) return "";
+  const iso = `${labelled[3]}-${String(monthIndex + 1).padStart(2, "0")}-${labelled[2].padStart(2, "0")}`;
+  return isIsoCalendarDate(iso) ? iso : "";
+}
 function shiftIsoCalendarDate(value, days) {
   if (!isIsoCalendarDate(value)) return "";
   const [year, month, day] = value.split("-").map(Number);
@@ -1117,6 +1236,8 @@ function resolveDateFilterRange(value, referenceDate) {
   return { start: shiftIsoCalendarDate(end, -(preset.days - 1)), end };
 }
 export {
+  CLOCK_HOURS,
+  CLOCK_PERIODS,
   CONTROL_SUPPORTING_TEXT_VARIANT,
   CONTROL_TEXT_VARIANT,
   DATE_FILTER_RELATIVE_PRESETS,
@@ -1137,6 +1258,8 @@ export {
   cell,
   choicePopupMinWidth,
   clearCssLengthPxCache,
+  clockMinuteStep,
+  clockMinutes,
   computeMetricChange,
   controlWidthClass,
   cumulativeBins,
@@ -1145,16 +1268,24 @@ export {
   defineChart,
   densityX,
   dot,
+  formatClockTimeLabel,
   formatCompactNumber,
+  formatIsoCalendarDateLabel,
   formatPercentage,
+  isClockTime,
+  isClockTimeOutOfRange,
+  isClockTimeStepAligned,
   isElementTruncated,
   isIsoCalendarDate,
   isScrollAtEdge,
+  joinClockTime,
   lineY,
   normalizeDateFilterValue,
   normalizeStack,
   parseCssTimeMs,
   parseDateFilterValue,
+  parseLooseCalendarDate,
+  parseLooseClockTime,
   pieLayout,
   polar,
   prefersReducedMotion,
@@ -1184,6 +1315,8 @@ export {
   setRepeatedFormControlValue,
   setRequiredValidity,
   shiftIsoCalendarDate,
+  splitClockTime,
+  stepBoundedIndex,
   textMark,
   truncateSvgTextToWidth
 };