@awc-ui/core 1.0.0-beta.2 → 1.0.0-beta.4

package/dist/components-csr/md-time-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["mdTimePickerCss","openPickerStack","bodyOverflowBeforeLock","openSeqCounter","MdTimePicker","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","format","value","name","min","max","required","label","headline","headlineInputLabel","headlineDialLabel","valueMissingLabel","rangeUnderflowLabel","rangeOverflowLabel","rangeOutsideLabel","disabled","open","minuteStep","cancelLabel","okLabel","hideTrigger","amLabel","pmLabel","hourLabel","minuteLabel","toggleDialLabel","toggleInputLabel","periodLabel","periodLayout","orientation","responsive","density","isOpen","mode","selecting","draftHours","draftMinutes","hourInputValue","minuteInputValue","hourInputError","minuteInputError","viewportWidth","viewportHeight","formDisabled","committedHours","committedMinutes","committedValue","defaultValue","isDragging","hourInputSeeded","minuteInputSeeded","previousFocus","openSeq","uid","Math","random","toString","slice","headlineId","hourCumulativeAngle","minuteCumulativeAngle","lastHandMode","lastValidityKey","lastInputEmitKey","openPicker","isDisabled","deepActiveElement","sampleViewport","attachOpenEnvironment","effectiveVariant","String","displayHour","padStart","mdOpen","emit","requestAnimationFrame","focusInitial","closePicker","detachOpenEnvironment","mdClose","restoreFocusAfterClose","cancel","mdCancel","confirm","commitInputs","detail","buildChangeDetail","updateFormValue","mdChange","setSelecting","s","togglePeriod","p","period","emitInputIfChanged","syncInputsFromDraft","onPeriodKeyDown","e","key","nav","preventDefault","next","root","el","shadowRoot","target","querySelector","focus","toggleMode","previousMode","mdModeChange","syncInputFields","focusInputSelectingAll","hourInputEl","bindHourInput","undefined","bindMinuteInput","minuteInputEl","applyDialPointer","pt","dialPointFromEvent","angle","distance","radius","idx","round","displayH","setHour24FromDisplay","isInner","step","raw","onDialPointerDown","currentTarget","setPointerCapture","pointerId","onDialPointerMove","onDialPointerUp","releasePointerCapture","onHostKeyDown","stopPropagation","applyInputsToDraft","onHourInput","v","replace","onMinuteInput","onHourBlur","parseInt","onMinuteBlur","onInputKeyDown","isHour","classList","contains","isMinute","bumpFocusedInput","onTriggerClick","onTriggerKeyDown","componentWillLoad","parseValueInto","toIso","computeDisplayHour","componentDidLoad","updateValidity","connectedCallback","disconnectedCallback","formResetCallback","formDisabledCallback","formStateRestoreCallback","state","handleVariantChange","handleValueChange","normalized","handleConstraintChange","handleDisabledChange","handleResponsiveChange","attachViewportListener","ADAPTIVE_MIN_DIAL_HEIGHT","detachViewportListener","handleOpenPropChange","emitValidityChange","getValidityOf","internals","valid","validationMessage","primed","mdValidityChange","show","hide","checkValidity","reportValidity","getValidity","validity","valueMissing","rangeUnderflow","rangeOverflow","m","exec","h","parseHHMM","mdInput","iso","date","Date","setHours","isoDateTime","toISOString","hours","minutes","h24","formatDisplayTime","dh","selectInputContents","document","docKeyHandler","includes","push","body","length","style","overflow","ev","isTopmostOpen","stopImmediatePropagation","trapFocus","addEventListener","removeEventListener","indexOf","splice","picker","top","active","activeElement","composedContains","ancestor","node","n","ShadowRoot","host","parentNode","usable","isConnected","after","triggerFieldEl","focusTrigger","field","setFocus","dialogFocusables","dialog","nodes","Array","from","querySelectorAll","filter","hasAttribute","getAttribute","focusItem","anyEl","inner","HTMLInputElement","focusables","findIndex","f","forward","shiftKey","window","innerWidth","innerHeight","viewportResizeHandler","frame","cancelAnimationFrame","passive","setFormValue","setValidity","anchor","flags","message","current","minM","maxM","msg","tpl","hourStr","minuteStr","dialEl","rect","getBoundingClientRect","cx","left","width","cy","height","dx","clientX","dy","clientY","hypot","atan2","PI","scope","minH","maxH","hValid","isNaN","mValid","hourValueNow","b","Number","minuteValueNow","direction","base","minuteBase","snapped","select","renderTrigger","display","a11yLabel","class","readOnly","part","appearFocused","ref","onClick","onKeyDown","slot","effectivePeriodLayout","effectiveOrientation","ADAPTIVE_LANDSCAPE_WIDTH","ADAPTIVE_DEMOTE_WIDTH","renderPeriodToggle","horizontal","role","type","tabindex","advanceHandAngle","last","delta","renderDial","outerRadiusRatio","innerRadiusRatio","rawAngle","handLengthRatio","handAngle","onPointerDown","onPointerMove","onPointerUp","onPointerCancel","transform","renderHourNumbers","renderMinuteNumbers","outerRatio","innerRatio","numbers","i","map","renderDialNumber","isHourActive","items","minute","r","rad","x","cos","y","sin","renderInputs","inlinePeriod","inputmode","autocomplete","maxLength","onInput","onFocus","onBlur","renderDialog","isInput","isHorizontalDialog","computedHeadline","useHorizontalPeriod","timeArea","id","size","icon","onMdClick","render","Host"],"sources":["src/components/md-time-picker/md-time-picker.css?tag=md-time-picker&encapsulation=shadow","src/components/md-time-picker/md-time-picker.tsx"],"sourcesContent":["/* ==========================================================\n   md-time-picker — Material Design 3 Time Picker\n   Spec:        https://m3.material.io/components/time-pickers/specs\n   Guidelines:  https://m3.material.io/components/time-pickers/guidelines\n   A11y:        https://m3.material.io/components/time-pickers/accessibility\n\n   PUBLIC CSS CUSTOM PROPERTIES (override per-instance):\n     ── Colour ──\n     --md-time-picker-trigger-color             Trigger label/value color\n     --md-time-picker-trigger-outline-color     Trigger outline color\n     --md-time-picker-trigger-hover-color       Trigger leading-icon color on hover\n     --md-time-picker-trigger-focus-color       Trigger focus indicator color\n     --md-time-picker-trigger-icon-color        Trigger leading icon color\n     --md-time-picker-dialog-color              Dialog surface color\n     --md-time-picker-dialog-on-color           Dialog text color\n     --md-time-picker-scrim-color               Modal scrim color (rgba)\n     --md-time-picker-headline-color            Headline label color\n     --md-time-picker-period-bg                 Period (AM/PM) container bg\n     --md-time-picker-period-color              Period (AM/PM) text color\n     --md-time-picker-period-active-bg          Period selected bg\n     --md-time-picker-period-active-color       Period selected color\n     --md-time-picker-period-outline-color      Period outline color\n     --md-time-picker-period-hover-opacity      Period state-layer opacity on hover (e.g. 8% / 12%)\n     --md-time-picker-dial-bg                   Dial surface color\n     --md-time-picker-dial-number-color         Dial number text color\n     --md-time-picker-dial-number-active-color  Selected number color\n     --md-time-picker-dial-hand-color           Hand / centre-dot color\n     --md-time-picker-input-bg                  HH/MM tile bg (inactive)\n     --md-time-picker-input-color               HH/MM tile text color (inactive)\n     --md-time-picker-input-active-bg           HH/MM tile bg when focused (default = primary-container)\n     --md-time-picker-input-active-color        HH/MM tile text when focused (default = on-primary-container)\n     --md-time-picker-input-outline-color       HH/MM tile resting outline color (default transparent)\n     --md-time-picker-input-active-outline-color HH/MM tile outline when active\n     --md-time-picker-input-error-color         Error outline / hint color\n     --md-time-picker-input-hint-color          \"Hour\" / \"Minute\" helper-label color\n     --md-time-picker-input-separator-color     Colon glyph between HH and MM\n     --md-time-picker-input-hover-opacity       HH/MM state-layer opacity (e.g. 8%)\n     --md-time-picker-action-color              Cancel label color\n     --md-time-picker-action-primary-color      OK label color\n     --md-time-picker-action-cancel-bg          Cancel button container color (default transparent — set to apply a tonal/filled style)\n     --md-time-picker-action-confirm-bg         OK button container color (default transparent — set to apply a tonal/filled style)\n     --md-time-picker-toggle-icon-color         Mode-toggle icon color\n     --md-time-picker-toggle-bg                 Mode-toggle container color (default transparent)\n\n     ── Shape ──\n     --md-time-picker-trigger-shape             Trigger corner-radius (piped onto md-text-field)\n     --md-time-picker-dialog-shape              Dialog corner-radius\n     --md-time-picker-input-shape               HH/MM tile corner-radius (canonical name; --md-time-picker-time-display-shape kept as back-compat alias)\n     --md-time-picker-period-shape              AM/PM container corner-radius\n     --md-time-picker-action-shape              Cancel / OK button corner-radius (piped onto md-button)\n     --md-time-picker-toggle-shape              Mode-toggle corner-radius (piped onto md-icon-button)\n\n     ── Dimensions ──\n     --md-time-picker-trigger-min-width         Trigger min-inline-size (default 240px)\n     --md-time-picker-trigger-icon-size         Trigger leading icon font-size (default 24px, tapers with density)\n     --md-time-picker-dialog-padding            Dialog internal padding (default 24px)\n     --md-time-picker-dialog-min-width          Dialog width in portrait / input variants (default 328px)\n     --md-time-picker-dialog-horizontal-width-12h  Horizontal dial dialog width in 12h mode (default 572px)\n     --md-time-picker-dialog-horizontal-width-24h  Horizontal dial dialog width in 24h mode (default 608px)\n     --md-time-picker-input-width               HH/MM tile inline-size (default 96px = 4/3 of the height; derived from the font unless set)\n     --md-time-picker-input-height              HH/MM tile block-size (default 72px = 1.6 x the font; derived from the font unless set)\n     --md-time-picker-input-border-width        HH/MM tile border width (default 2px)\n     --md-time-picker-input-separator-width     Colon column width (default 24px)\n     --md-time-picker-input-hint-gap            Gap between tile and \"Hour\" / \"Minute\" hint (default 4px)\n     --md-time-picker-period-outline-width      AM/PM container border width (default 1px)\n     --md-time-picker-period-vertical-width     AM/PM vertical-stack width (default 52px)\n     --md-time-picker-period-vertical-height    AM/PM vertical-stack height in dial variant (default 80px)\n     --md-time-picker-period-vertical-height-input  AM/PM vertical-stack height in input variant (default 72px)\n     --md-time-picker-period-horizontal-width   AM/PM horizontal-pill width (default 216px)\n     --md-time-picker-period-horizontal-height  AM/PM horizontal-pill height (default 38px)\n     --md-time-picker-dial-size                 Dial face diameter (default 256px)\n     --md-time-picker-dial-target-size          Per-number touch-target diameter (default 48px)\n     --md-time-picker-dial-center-size          Centre-dot diameter (default 8px)\n     --md-time-picker-dial-hand-width           Hand-line stroke width (default 2px)\n     --md-time-picker-hand-length               Hand-line length override (default: computed — 100%, ~62% on the 24h inner ring)\n     --md-time-picker-footer-gap                Gap between mode-toggle and actions (default 8px)\n     --md-time-picker-actions-gap               Gap between Cancel and OK (default 8px)\n     --md-time-picker-toggle-icon-size          Mode-toggle icon font-size (default 24px, tapers with density)\n     --md-time-picker-headline-spacing          Margin below headline (default 20px)\n\n     ── Typography ── (all tapering with the global density scale; set any of\n        them explicitly to opt that one out)\n     --md-time-picker-headline-font-size        Headline font-size (default label-medium = 12px)\n     --md-time-picker-headline-font-weight      Headline font-weight (default 500)\n     --md-time-picker-input-font-size           HH/MM tile font-size (default display-medium = 45px)\n     --md-time-picker-input-font-weight         HH/MM tile font-weight (default 400)\n     --md-time-picker-period-font-size          AM/PM label font-size (default 14px)\n     --md-time-picker-period-font-weight        AM/PM label font-weight (default 500)\n     --md-time-picker-dial-number-font-size     Dial number font-size (default body-large = 16px)\n     --md-time-picker-dial-number-font-weight   Dial number resting font-weight (default 400)\n     --md-time-picker-dial-number-active-font-weight  Dial number active font-weight (default 500)\n\n     ── Motion ──\n     --md-time-picker-dialog-enter-duration     Dialog open animation duration (default 500ms)\n     --md-time-picker-mode-swap-duration        Dial⇄input swap animation duration (default 450ms)\n     --md-time-picker-motion-easing             Easing curve shared by both entry animations (default emphasized-decelerate)\n\n     ── Elevation ──\n     --md-time-picker-dialog-elevation          Dialog box-shadow\n\n   CSS PARTS:\n     trigger            Composed md-text-field that opens the dialog\n                        (variant=\"outlined\", readonly). Style its internals\n                        through md-text-field's own ::part() API\n                        (e.g. ::part(trigger)::part(label)).\n     trigger-icon       Schedule icon slotted into trigger's leading slot\n     scrim              Modal scrim\n     dialog             Dialog surface\n     headline           Headline label (\"Enter time\" / \"Select time\")\n     time-area          Dial-variant wrapper around input-area + the\n                        216×38 horizontal AM/PM pill in landscape\n     input-area         Container for the typeable HH/MM input row\n                        (rendered in BOTH variants — dial mode shows\n                        the dial face below it)\n     input-hour         HH text input tile\n     input-minute       MM text input tile\n     period-toggle      AM/PM toggle group\n     period-am          AM button\n     period-pm          PM button\n     dial-wrap          Wrapper around the dial (dial variant only)\n     dial               Dial surface (drag target; dial variant only)\n     dial-hand          Selection hand (dial variant only)\n     footer             Footer with mode toggle + actions\n     toggle-mode        Icon button switching dial<->input\n     actions            Action button row (Cancel / OK)\n     cancel-button      Cancel button\n     confirm-button     OK (confirm) button\n\n   SLOTS:\n     (none)             The component is fully driven by props/attributes for\n                        full localization and consistent layout. Use CSS parts\n                        for visual customization and labels for localization.\n   ========================================================== */\n\n:host {\n  /* ── Public tokens (override per-instance) ── */\n  --_trigger-color: var(--md-time-picker-trigger-color, var(--md-sys-color-on-surface, #1c1b1f));\n  --_trigger-outline-color: var(--md-time-picker-trigger-outline-color, var(--md-sys-color-outline, #79747e));\n  --_trigger-hover-color: var(--md-time-picker-trigger-hover-color, var(--md-sys-color-on-surface, #1c1b1f));\n  --_trigger-focus-color: var(--md-time-picker-trigger-focus-color, var(--md-sys-color-primary, #6750a4));\n  --_trigger-icon-color: var(--md-time-picker-trigger-icon-color, var(--md-sys-color-on-surface-variant, #49454f));\n\n  --_dialog-color: var(--md-time-picker-dialog-color, var(--md-sys-color-surface-container-high, #ece6f0));\n  --_dialog-on-color: var(--md-time-picker-dialog-on-color, var(--md-sys-color-on-surface, #1c1b1f));\n  --_dialog-shape: var(--md-time-picker-dialog-shape, var(--md-sys-shape-corner-extra-large, 28px));\n  --_dialog-elevation: var(--md-time-picker-dialog-elevation, var(--md-sys-elevation-3, 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3)));\n  --_scrim-color: var(--md-time-picker-scrim-color, rgba(0, 0, 0, 0.32));\n\n  --_headline-color: var(--md-time-picker-headline-color, var(--md-sys-color-on-surface-variant, #49454f));\n\n  /* Shape of the HH/MM tiles — shared with the input variant. The\n     bg / color tokens that used to live here (--_time-display-bg,\n     --_time-display-color, ...-active-*) were dropped when the dial\n     variant unified around the typeable input tile; the runtime now\n     reads --_input-bg / --_input-color / etc. directly. Authors who\n     wired the legacy `--md-time-picker-time-display-bg` etc. tokens\n     should migrate to the `--md-time-picker-input-*` namespace —\n     both knobs target the same DOM element now.\n\n     `--md-time-picker-input-shape` is the canonical name (matches the\n     rest of the input-* family). `--md-time-picker-time-display-shape`\n     is kept as a back-compat fallback for anyone who shipped overrides\n     against the old name; new code should reach for the canonical one. */\n  --_time-display-shape: var(\n    --md-time-picker-input-shape,\n    var(--md-time-picker-time-display-shape, var(--md-sys-shape-corner-small, 8px))\n  );\n\n  --_period-bg: var(--md-time-picker-period-bg, transparent);\n  --_period-color: var(--md-time-picker-period-color, var(--md-sys-color-on-surface, #1c1b1f));\n  --_period-active-bg: var(--md-time-picker-period-active-bg, var(--md-sys-color-tertiary-container, #ffd8e4));\n  --_period-active-color: var(--md-time-picker-period-active-color, var(--md-sys-color-on-tertiary-container, #370b1e));\n  --_period-outline-color: var(--md-time-picker-period-outline-color, var(--md-sys-color-outline, #79747e));\n\n  --_dial-bg: var(--md-time-picker-dial-bg, var(--md-sys-color-surface-container-highest, #e6e0e9));\n  --_dial-number-color: var(--md-time-picker-dial-number-color, var(--md-sys-color-on-surface, #1c1b1f));\n  --_dial-number-active-color: var(--md-time-picker-dial-number-active-color, var(--md-sys-color-on-primary, #ffffff));\n  --_dial-hand-color: var(--md-time-picker-dial-hand-color, var(--md-sys-color-primary, #6750a4));\n  --_dial-target-size: var(--md-time-picker-dial-target-size, 48px);\n\n  --_input-bg: var(--md-time-picker-input-bg, var(--md-sys-color-surface-container-highest, #e6e0e9));\n  --_input-color: var(--md-time-picker-input-color, var(--md-sys-color-on-surface, #1c1b1f));\n  --_input-outline-color: var(--md-time-picker-input-outline-color, transparent);\n  --_input-active-outline-color: var(--md-time-picker-input-active-outline-color, var(--md-sys-color-primary, #6750a4));\n  --_input-error-color: var(--md-time-picker-input-error-color, var(--md-sys-color-error, #b3261e));\n  --_input-hint-color: var(--md-time-picker-input-hint-color, var(--md-sys-color-on-surface-variant, #49454f));\n\n  --_action-color: var(--md-time-picker-action-color, var(--md-sys-color-primary, #6750a4));\n  --_action-primary-color: var(--md-time-picker-action-primary-color, var(--md-sys-color-primary, #6750a4));\n  --_toggle-icon-color: var(--md-time-picker-toggle-icon-color, var(--md-sys-color-on-surface-variant, #49454f));\n\n  /* ── EXTENDED public tokens (dimensions, typography, shapes, motion) ──\n     Every knob below has a sensible MD3-spec default so the picker still\n     looks like the canonical Material reference out of the box. Override\n     any of them on the host element to retheme without forking the CSS.\n\n     Token naming follows the established `--md-time-picker-<area>-<axis>`\n     pattern so authors can discover new knobs the same way they discover\n     existing colour tokens. */\n\n  /* Dialog chrome (modal surface around the body + footer) */\n  --_dialog-padding: var(--md-time-picker-dialog-padding, var(--md-sys-spacing-inset-xl, 24px));\n  --_dialog-min-width: var(--md-time-picker-dialog-min-width, 328px);\n  --_dialog-horizontal-width-12h: var(--md-time-picker-dialog-horizontal-width-12h, 572px);\n  --_dialog-horizontal-width-24h: var(--md-time-picker-dialog-horizontal-width-24h, 608px);\n  --_dialog-enter-duration: var(--md-time-picker-dialog-enter-duration, var(--md-sys-motion-duration-long2, 500ms));\n  --_mode-swap-duration: var(--md-time-picker-mode-swap-duration, var(--md-sys-motion-duration-long1, 450ms));\n  --_motion-easing: var(--md-time-picker-motion-easing, var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1)));\n\n  /* Trigger (closed-state outlined field) */\n  --_trigger-min-width: var(--md-time-picker-trigger-min-width, 240px);\n  /* 1px per density rung off 24dp (18px floor) — the library-wide icon taper,\n     matching md-text-field's own glyphs so the trigger reads as one unit. */\n  --_trigger-icon-size: var(--md-time-picker-trigger-icon-size, max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px)));\n  --_trigger-shape: var(--md-time-picker-trigger-shape, var(--md-sys-shape-corner-extra-small, 4px));\n\n  /* Headline (\"Enter time\" / \"Select time\") */\n  /* label-medium (12) — 0.5px/rung, the library rate for sub-22px type. */\n  --_headline-font-size: var(--md-time-picker-headline-font-size, max(10px, calc(12px + var(--md-sys-density-scale, 0) * 0.5px)));\n  --_headline-font-weight: var(--md-time-picker-headline-font-weight, var(--md-sys-typescale-label-medium-font-weight, 500));\n  --_headline-spacing: var(--md-time-picker-headline-spacing, max(4px, calc(20px + var(--md-sys-density-scale, 0) * 2px)));\n\n  /* HH / MM input tile (rendered in BOTH variants) */\n  /* Tile geometry is DERIVED from the number it holds, not tapered separately.\n     At density 0 the M3 defaults are already exactly 45 × 1.6 = 72 and\n     72 × 4/3 = 96, so this reproduces the spec sizes bit-for-bit while keeping\n     the tile's proportions locked to the digits at every rung — tapering the\n     three independently is how a 37px number ends up rattling around in a\n     full-size 96×72 box. Public overrides still win: set -input-width /\n     -input-height to pin them. */\n  --_input-height: var(--md-time-picker-input-height, calc(var(--_input-font-size) * 1.6));\n  --_input-width: var(--md-time-picker-input-width, calc(var(--_input-height) * 4 / 3));\n  --_input-border-width: var(--md-time-picker-input-border-width, 2px);\n  /* display-medium (45). Display type carries 2px/rung: at the library's 1px\n     rate a 45px numeral would only reach 41px at -4 (9%) while the dialog\n     around it tightens far more, so the tile would still dominate the panel. */\n  --_input-font-size: var(--md-time-picker-input-font-size, max(32px, calc(45px + var(--md-sys-density-scale, 0) * 2px)));\n  --_input-font-weight: var(--md-time-picker-input-font-weight, var(--md-sys-typescale-display-medium-font-weight, 400));\n  --_input-active-bg: var(--md-time-picker-input-active-bg, var(--md-sys-color-primary-container, #eaddff));\n  --_input-active-color: var(--md-time-picker-input-active-color, var(--md-sys-color-on-primary-container, #21005d));\n  --_input-separator-color: var(--md-time-picker-input-separator-color, var(--_dialog-on-color));\n  --_input-separator-width: var(--md-time-picker-input-separator-width, 24px);\n  --_input-hint-gap: var(--md-time-picker-input-hint-gap, var(--md-sys-spacing-gap-xs, 4px));\n  --_input-hover-opacity: var(--md-time-picker-input-hover-opacity, 8%);\n\n  /* AM / PM period selector */\n  --_period-shape: var(--md-time-picker-period-shape, var(--md-sys-shape-corner-small, 8px));\n  --_period-outline-width: var(--md-time-picker-period-outline-width, 1px);\n  --_period-vertical-width: var(--md-time-picker-period-vertical-width, 52px);\n  --_period-vertical-height: var(--md-time-picker-period-vertical-height, 80px);\n  --_period-vertical-height-input: var(--md-time-picker-period-vertical-height-input, 72px);\n  --_period-horizontal-width: var(--md-time-picker-period-horizontal-width, 216px);\n  --_period-horizontal-height: var(--md-time-picker-period-horizontal-height, 38px);\n  /* label-large (14) — 0.5px/rung. */\n  --_period-font-size: var(--md-time-picker-period-font-size, max(12px, calc(14px + var(--md-sys-density-scale, 0) * 0.5px)));\n  --_period-font-weight: var(--md-time-picker-period-font-weight, 500);\n  --_period-hover-opacity: var(--md-time-picker-period-hover-opacity, 8%);\n\n  /* Dial face */\n  --_dial-size: var(--md-time-picker-dial-size, 256px);\n  --_dial-center-size: var(--md-time-picker-dial-center-size, 8px);\n  --_dial-hand-width: var(--md-time-picker-dial-hand-width, 2px);\n  /* body-large (16) — 0.5px/rung. The dial FACE keeps its 256px diameter:\n     number positions and hand length are computed against it, so retuning that\n     is a layout change rather than a type change. */\n  --_dial-number-font-size: var(--md-time-picker-dial-number-font-size, max(13px, calc(16px + var(--md-sys-density-scale, 0) * 0.5px)));\n  --_dial-number-font-weight: var(--md-time-picker-dial-number-font-weight, var(--md-sys-typescale-body-large-font-weight, 400));\n  --_dial-number-active-font-weight: var(--md-time-picker-dial-number-active-font-weight, 500);\n\n  /* Footer + action buttons */\n  --_footer-gap: var(--md-time-picker-footer-gap, var(--md-sys-spacing-gap-sm, 8px));\n  --_actions-gap: var(--md-time-picker-actions-gap, var(--md-sys-spacing-gap-sm, 8px));\n  --_action-shape: var(--md-time-picker-action-shape, var(--md-sys-shape-corner-full, 9999px));\n  --_action-confirm-bg: var(--md-time-picker-action-confirm-bg, transparent);\n  --_action-cancel-bg: var(--md-time-picker-action-cancel-bg, transparent);\n  --_toggle-bg: var(--md-time-picker-toggle-bg, transparent);\n  --_toggle-icon-size: var(--md-time-picker-toggle-icon-size, max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px)));\n  --_toggle-shape: var(--md-time-picker-toggle-shape, var(--md-sys-shape-corner-full, 9999px));\n\n  display: inline-block;\n  position: relative;\n  font-family: var(--md-sys-typescale-body-large-font-family, Roboto, sans-serif);\n  color: var(--_dialog-on-color);\n}\n\n:host([hide-trigger]) {\n  display: contents;\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n}\n\n/* ── Trigger (composes md-text-field, outlined variant) ──\n   We delegate every aspect of the trigger surface — notched outline,\n   floating label, hover / focus / disabled states, density — to the\n   canonical md-text-field component. This file only forwards the\n   time-picker-scoped public tokens onto md-text-field's own custom\n   properties so author overrides like\n   `--md-time-picker-trigger-outline-color` keep working without the\n   author having to learn md-text-field's variable names.\n\n   The leading-icon slot carries the schedule glyph; we tighten its\n   color so it picks up the time-picker icon token rather than the\n   text-field's inherit-from-label default. */\n.md-time-picker__field {\n  /* Width parity with the legacy trigger so dialogs / forms keep the\n     same intrinsic field width after the swap. md-text-field is\n     inline-flex internally so this is just a min-inline-size hint. */\n  min-inline-size: var(--_trigger-min-width);\n  display: inline-flex;\n  inline-size: auto;\n  cursor: pointer;\n\n  /* Forward time-picker public tokens onto md-text-field's API surface.\n     md-text-field only exposes resting tokens for outline / label /\n     input colour (hover & focus colours are computed from sys tokens\n     internally), so we wire the ones it supports and rely on its own\n     focus / hover styling for the rest. Authors who set the\n     `--md-time-picker-trigger-hover-color` token will see it apply on\n     the icon (below); the outline hover stays driven by md-text-field\n     so the field reads as a real text-field at all states.\n\n     `--md-time-picker-trigger-shape` is piped onto the text-field's\n     `--md-text-field-container-shape` so authors can swap the trigger\n     corners from the M3 default (extra-small / 4dp) to anything between\n     sharp and pill without having to learn md-text-field's own API. */\n  --md-text-field-label-color: var(--_trigger-icon-color);\n  --md-text-field-input-color: var(--_trigger-color);\n  --md-text-field-outline-color: var(--_trigger-outline-color);\n  --md-text-field-active-indicator-color: var(--_trigger-focus-color);\n  --md-text-field-icon-color: var(--_trigger-icon-color);\n  --md-text-field-container-shape: var(--_trigger-shape);\n}\n\n.md-time-picker__field--disabled {\n  cursor: not-allowed;\n}\n\n.md-time-picker__field-icon {\n  /* Material Symbols glyph styling — match the field's typographic\n     weight and pick up the icon token so authors can tint the icon\n     independently of the label/value text. */\n  font-family: var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons'), sans-serif;\n  font-size: var(--_trigger-icon-size);\n  line-height: 1;\n  color: var(--_trigger-icon-color);\n  flex-shrink: 0;\n}\n\n.md-time-picker__field:hover:not(.md-time-picker__field--disabled) .md-time-picker__field-icon {\n  /* Wires the documented `--md-time-picker-trigger-hover-color` token:\n     the leading icon shifts on-surface-variant -> on-surface on hover\n     (md-text-field owns the outline hover internally). */\n  color: var(--_trigger-hover-color);\n}\n\n/* ── Trigger \"looks focused while the modal is open\" ──\n   While the dialog is open the OS focus has moved into the dialog,\n   so the underlying md-text-field would normally fall back to its\n   resting (neutral) outline. Visually that severs the connection\n   between the trigger and the dialog — the user reads them as two\n   unrelated surfaces. To preserve the trigger-dialog relationship\n   we tell the underlying md-text-field to render in its focused\n   look for the duration the modal is open via the public\n   `appear-focused` prop (see render template), which activates the\n   field's own `.md-text-field--focused` rules. Going through the\n   field's own machinery (rather than painting an external ring) is\n   what makes the notched-outline cut for the floating label happen\n   correctly — an external `box-shadow inset` would draw a\n   continuous line that would strike through the label text, because\n   the fieldset's legend cutout only exists inside the field's own\n   shadow DOM and can't be respected from the outside.\n\n   We additionally pipe the picker's `--_trigger-focus-color` token\n   onto the field's focus/label/icon colour variables so author\n   overrides flow through. A single override\n   (`--md-time-picker-trigger-focus-color: #...`) re-tints the\n   trigger's focused outline, label, and leading icon together. */\n:host(.md-time-picker--open) .md-time-picker__field {\n  /* md-text-field uses `--md-text-field-active-indicator-color` for\n     both the focused outline AND the floating-label colour while\n     `.md-text-field--focused` is on. Mapping our `--_trigger-focus-color`\n     onto it re-tints both with a single override. */\n  --md-text-field-active-indicator-color: var(--_trigger-focus-color);\n  /* md-text-field doesn't toggle icon colour on focus, so pipe the\n     focus colour onto the icon variable for the duration the picker\n     is open. The selector is scoped to `--open` so this DOESN'T\n     change the resting-state icon colour. */\n  --md-text-field-icon-color: var(--_trigger-focus-color);\n}\n\n/* ── Scrim / modal overlay ── */\n.md-time-picker__scrim {\n  position: fixed;\n  inset: 0;\n  z-index: var(--md-sys-z-index-popup, 1000);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--_scrim-color);\n  padding: var(--md-sys-spacing-inset-xl, 24px);\n  animation: md-time-picker-scrim-in var(--md-sys-motion-duration-short3, 150ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)) forwards;\n  box-sizing: border-box;\n}\n\n@keyframes md-time-picker-scrim-in {\n  from { opacity: 0; }\n  to   { opacity: 1; }\n}\n\n/* ── Dialog ── */\n.md-time-picker__dialog {\n  background: var(--_dialog-color);\n  color: var(--_dialog-on-color);\n  border-radius: var(--_dialog-shape);\n  box-shadow: var(--_dialog-elevation);\n  /* MD3 spec: 24dp padding on every edge, both portrait and\n     landscape dialogs. Exposed as `--md-time-picker-dialog-padding`\n     for authors who need to compact the chrome on dense surfaces. */\n  padding: var(--_dialog-padding);\n  /* Default (vertical / portrait) dialog width — the canonical M3\n     reference shows 328dp. Override via\n     `--md-time-picker-dialog-min-width`. The horizontal modifier\n     below widens this to fit the dial in a right column. */\n  width: min(var(--_dialog-min-width), calc(100vw - 48px));\n  /* Never trap the OK/Cancel row off-screen: when the viewport is\n     shorter than the dialog (landscape phones showing the ~440dp\n     dial dialog), the dialog clamps to the viewport and scrolls\n     internally instead of overflowing past the scrim. */\n  /* stylelint-disable-next-line declaration-block-no-duplicate-properties -- intentional vh→dvh progressive-enhancement fallback */\n  max-block-size: calc(100vh - 48px);\n  max-block-size: calc(100dvh - 48px);\n  overflow-y: auto;\n  /* overflow-y:auto computes overflow-x to auto — pin it so a classic\n     (width-stealing) vertical scrollbar never spawns a nested\n     horizontal one against the fixed-width body. */\n  overflow-x: hidden;\n  box-sizing: border-box;\n  /* Dialog entrance: a deliberate \"unfold + bloom\" motion that\n     mirrors the inner mode-swap bloom (same easing, same anchor)\n     so the whole picker feels like one motion family. The 500ms\n     long2 duration is intentionally slow enough to read as\n     \"expressive\" — a faster open felt dismissive and clipped the\n     state-layer overshoot on emphasized-decelerate. The\n     transform-origin pivots the unfold from `center top`, so the\n     dialog visually drops down out of the headline / trigger\n     above it instead of zooming from its centre. Authors can shorten\n     the entry via `--md-time-picker-dialog-enter-duration` (e.g. set\n     to `200ms` for snappier desktop UX) or swap the easing via\n     `--md-time-picker-motion-easing`. */\n  animation: md-time-picker-dialog-in var(--_dialog-enter-duration) var(--_motion-easing) both;\n  transform-origin: center top;\n}\n\n.md-time-picker__dialog--input {\n  width: min(var(--_dialog-min-width), calc(100vw - 48px));\n}\n\n/* ── Horizontal (landscape) dial dialog ──\n   Two-column body: HH:MM + AM/PM in the left column, 256dp dial in\n   the right column. Width math (per MD3 spec sheet):\n     padding_l(24) + tile(96) + colon(24) + tile(96)\n     + gap(52) + dial(256) + padding_r(24) = 572dp (12h)\n     padding_l(24) + tile(114) + colon(24) + tile(114)\n     + gap(52) + dial(256) + padding_r(24) = 608dp (24h)\n   Both widths are public tokens\n   (`--md-time-picker-dialog-horizontal-width-12h` /\n    `--md-time-picker-dialog-horizontal-width-24h`) so authors can\n   widen the dialog when they need extra breathing room (e.g. when\n   the dial is enlarged via `--md-time-picker-dial-size`). */\n.md-time-picker__dialog--horizontal {\n  width: min(var(--_dialog-horizontal-width-12h), calc(100vw - 48px));\n}\n\n/* 24-hour mode in horizontal orientation needs an extra 36dp of\n   width because each HH/MM tile widens from 96dp → 114dp (the\n   \"Width (24h vertical)\" spec measurement which the horizontal\n   layout reuses since no AM/PM rides alongside). */\n:host(.md-time-picker--format-24h) .md-time-picker__dialog--horizontal {\n  width: min(var(--_dialog-horizontal-width-24h), calc(100vw - 48px));\n}\n\n@keyframes md-time-picker-dialog-in {\n  /* Unfold-from-the-top: scale up from 0.88 + translate down 12dp\n     while fading in. The scale alone read as \"zoom\" rather than\n     \"unfold\"; pairing it with the block-axis translate gives the\n     dialog a clear \"dropping into place\" direction of motion that\n     matches the mode-swap bloom inside. */\n  from {\n    opacity: 0;\n    transform: translateY(12px) scale(0.88);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n/* ── Mode swap bloom ──\n   Plays on every mount of the dial wrap or the input area, which\n   covers BOTH the initial dialog open AND the subsequent mode\n   toggles (Stencil unmounts one branch and mounts the other when\n   `mode` flips, re-triggering the CSS animation). The bloom uses\n   M3 **emphasized-decelerate** easing (the canonical \"settle\"\n   curve, peaks early then eases into rest), with a subtle scale\n   range (0.96 → 1.0) so it doesn't compound visibly with the\n   dialog's outer 0.88 → 1.0 unfold.\n\n   A small block-axis translate (8dp → 0) sells the \"new content\n   has just arrived\" feel without making the digits feel weighty.\n\n   The transform-origin is anchored to `center top` so the dial /\n   input area expands DOWNWARD from the headline above it,\n   reinforcing the headline as the visual anchor of the dialog. */\n@keyframes md-time-picker-mode-in {\n  from {\n    opacity: 0;\n    transform: translateY(8px) scale(0.96);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n/* ── Headline ── */\n.md-time-picker__headline {\n  font-size: var(--_headline-font-size);\n  font-weight: var(--_headline-font-weight);\n  letter-spacing: var(--md-sys-typescale-label-medium-letter-spacing, 0.5px);\n  line-height: var(--md-sys-typescale-label-medium-line-height, 16px);\n  color: var(--_headline-color);\n  text-transform: none;\n  margin-block-end: var(--_headline-spacing);\n  /* Spec: headline is always left-aligned, both portrait and\n     landscape. The dialog box already starts the inline axis at the\n     24dp left padding, so we just keep the default text alignment. */\n  text-align: start;\n}\n\n/* ── Body wrapper ──\n   Holds the time-area (HH:MM + AM/PM) and the dial / inputs. In the\n   vertical (default) layout the body is a column flex that visually\n   matches the pre-refactor structure. In the horizontal layout it\n   becomes a row flex with a 52dp gap between the left column and\n   the dial — exactly the gap shown in the canonical MD3 landscape\n   spec sheet. */\n.md-time-picker__body {\n  display: flex;\n  flex-direction: column;\n}\n\n.md-time-picker__body--horizontal {\n  flex-direction: row;\n  /* Anchor both columns to the top edge — the left column (HH:MM +\n     AM/PM = 134dp tall in 12h mode) is naturally shorter than the\n     256dp dial, so flex-start keeps everything aligned with the\n     headline above instead of letting the time-area drift to the\n     middle of the row. */\n  align-items: flex-start;\n  /* 52dp gap between MM tile (right edge of time-area) and the dial\n     wrap, per the M3 horizontal spec measurement. */\n  column-gap: 52px;\n}\n\n/* The time-area is the wrapper around the typeable HH/MM input row\n   (and, in the 12h horizontal landscape layout, the 216×38 horizontal\n   AM/PM pill that sits below it). In the dial vertical layout it's a\n   passthrough wrapper above the dial; in the input variant the\n   time-area is intentionally NOT rendered because the input-area is\n   the entire body. */\n.md-time-picker__time-area {\n  display: flex;\n  flex-direction: column;\n  /* No `flex: 1` so the column hugs the input-row width. The dial\n     flexes to fill the remaining inline space in the horizontal\n     dialog. Authors who want a wider gutter can override the body's\n     column-gap via a custom CSS var if needed. */\n  flex: 0 0 auto;\n}\n\n/* The dial wrap keeps its default 24dp block-end margin — that's\n   the gap between the dial's bottom and the footer row. In the\n   horizontal layout we also drop the implicit `flex: 1` so the dial\n   centers in its 256dp column instead of stretching to fill the\n   leftover inline space. */\n.md-time-picker__body--horizontal .md-time-picker__dial-wrap {\n  flex: 0 0 auto;\n}\n\n/* Inside the dial horizontal landscape layout the typeable input row\n   needs to give up its default 24dp block-end margin — the horizontal\n   AM/PM pill that follows owns the 16dp spec gap, and the column\n   already sits inside its own flex track next to the dial. */\n.md-time-picker__body--horizontal .md-time-picker__input-area {\n  margin-block-end: 0;\n}\n\n/* The horizontal AM/PM pill sits flush below the input row in the\n   left column. Override the default `margin-block-start: 12px` so\n   the 16dp spec gap above isn't doubled, and zero the bottom margin\n   so the column doesn't stretch taller than the dial unnecessarily. */\n.md-time-picker__body--horizontal .md-time-picker__period--horizontal {\n  margin-block-start: var(--md-sys-spacing-inset-lg, 16px);\n  margin-block-end: 0;\n  margin-inline: 0;\n}\n\n/* ── Period (AM/PM) toggle ──\n   MD3 supports two layouts (see `MdTimePickerPeriodLayout`):\n\n   - Vertical (default): 52dp × 80dp stack, sits 12dp to the end-side\n     of the minute tile. Each row is 50% tall so AM and PM split the\n     80dp envelope evenly. The 1px hairline divider lives between them.\n\n   - Horizontal: 216dp × 38dp inline pill that sits centered below the\n     HH:MM display. The divider becomes inline-end on the AM button.\n\n   The base ruleset below covers values shared across both layouts;\n   the `--vertical` / `--horizontal` modifier classes specialize the\n   axis-specific sizing and divider placement.\n\n   ⚠️ The container is intentionally NOT `overflow: hidden`. We\n   previously clipped here to mask the AM/PM corner backgrounds, but\n   that also clipped the canonical M3 external focus ring (3dp\n   secondary outline + 2dp offset) on each child button. The corner\n   masking is now done by the AM and PM buttons themselves via\n   matching border-radius — see the per-layout rules below — which\n   keeps the pill shape clean *and* lets each button paint its own\n   focus ring outside its bounds. */\n.md-time-picker__period {\n  display: inline-flex;\n  border: var(--_period-outline-width) solid var(--_period-outline-color);\n  box-sizing: border-box;\n}\n\n.md-time-picker__period--vertical {\n  flex-direction: column;\n  /* The container still owns the pill shape for its own border /\n     hover, but corner clipping of the AM/PM backgrounds is delegated\n     to the buttons (see the `--am` / `--pm` corner rules below). */\n  border-radius: var(--_period-shape);\n  margin-inline-start: var(--md-sys-spacing-inset-md, 12px);\n  inline-size: var(--_period-vertical-width);\n  block-size: var(--_period-vertical-height);\n}\n\n/* In the input variant the AM/PM toggle shrinks from 80dp → 72dp so\n   it aligns to the 72dp input field above. The 8dp delta is the\n   exact difference between the dial variant's HH/MM tile height\n   (80dp) and the input variant's HH/MM input height (72dp), and the\n   spec sheet reuses the 52dp width across both variants. We scope\n   the override to the input area rather than introducing a new\n   modifier class so callers don't have to thread state through the\n   toggle render. The input-variant height is independently\n   re-themeable via `--md-time-picker-period-vertical-height-input`\n   so authors who resize the inputs (`--md-time-picker-input-height`)\n   can keep the AM/PM column locked to the new input height. */\n.md-time-picker__input-area .md-time-picker__period--vertical {\n  block-size: var(--_period-vertical-height-input);\n}\n\n.md-time-picker__period--horizontal {\n  flex-direction: row;\n  /* 216dp × 38dp container with `shape-corner-small` rounding (8dp).\n     Intentionally NOT a full pill — the horizontal AM/PM toggle is\n     paired with the 8dp HH:MM tiles above it, so matching that\n     radius keeps the corner language of the entire time area\n     consistent (and matches the vertical 52×80 toggle). The pill\n     belongs to the canonical M3 *segmented button* surface; the\n     time picker's period selector is a dedicated control with its\n     own spec rhythm. */\n  border-radius: var(--_period-shape);\n  margin-block-start: var(--md-sys-spacing-inset-md, 12px);\n  margin-block-end: var(--md-sys-spacing-inset-xl, 24px);\n  margin-inline: auto;\n  inline-size: var(--_period-horizontal-width);\n  block-size: var(--_period-horizontal-height);\n  align-self: center;\n}\n\n.md-time-picker__period-btn {\n  flex: 1 1 0;\n  background: var(--_period-bg);\n  color: var(--_period-color);\n  border: none;\n  font: inherit;\n  font-size: var(--_period-font-size);\n  font-weight: var(--_period-font-weight);\n  letter-spacing: 0.1px;\n  cursor: pointer;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  /* Each button clips its own ripple (the parent no longer does it\n     for the whole pill — see the comment on `.md-time-picker__period`). */\n  position: relative;\n  overflow: hidden;\n  transition: background-color 150ms var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n    color 150ms var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n}\n\n.md-time-picker__period-btn-label {\n  position: relative;\n  z-index: 1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.md-time-picker__period--vertical .md-time-picker__period-btn {\n  block-size: 50%;\n}\n\n.md-time-picker__period--horizontal .md-time-picker__period-btn {\n  inline-size: 50%;\n  block-size: 100%;\n}\n\n.md-time-picker__period-btn:hover {\n  background: color-mix(in srgb, var(--_period-color) var(--_period-hover-opacity), transparent);\n}\n\n.md-time-picker__period-btn--active {\n  background: var(--_period-active-bg);\n  color: var(--_period-active-color);\n}\n\n.md-time-picker__period-btn--active:hover {\n  background: color-mix(in srgb, var(--_period-active-color) var(--_period-hover-opacity), var(--_period-active-bg));\n}\n\n/* Canonical M3 focus ring on each AM/PM tile — identical to the\n   md-button / md-icon-button pattern (3dp secondary outline at 2dp\n   offset). Because the parent no longer clips, the ring renders\n   in full *around* the focused button. The ring auto-follows each\n   tile's own corner radii (see the `--am` / `--pm` rules below), so\n   AM shows a top-rounded ring in vertical mode and a start-rounded\n   ring in horizontal mode — matching the canonical button look. */\n.md-time-picker__period-btn:focus-visible {\n  outline: 3px solid var(--md-sys-color-secondary, #625b71);\n  outline-offset: 2px;\n  z-index: 1;\n}\n\n/* Hairline divider + per-button corner radii.\n\n   The corner radii used to live on the parent (`.md-time-picker__period`)\n   together with `overflow: hidden`, but that clipped the canonical\n   external focus ring. We now give each tile only the corners that\n   meet the pill's edge, leaving the corners that touch the divider\n   square. The result is the same visual pill, with each button able\n   to paint its own external focus ring uncliped.\n\n   `calc(<parent-radius> - 1px)` accounts for the parent's 1dp border\n   so the button's background lines up with the inside of the border\n   instead of leaving a 1dp halo at the corners. */\n\n.md-time-picker__period--vertical .md-time-picker__period-btn--am {\n  border-block-end: var(--_period-outline-width) solid var(--_period-outline-color);\n  border-start-start-radius: calc(var(--_period-shape) - var(--_period-outline-width));\n  border-start-end-radius: calc(var(--_period-shape) - var(--_period-outline-width));\n}\n.md-time-picker__period--vertical .md-time-picker__period-btn--pm {\n  border-end-start-radius: calc(var(--_period-shape) - var(--_period-outline-width));\n  border-end-end-radius: calc(var(--_period-shape) - var(--_period-outline-width));\n}\n\n.md-time-picker__period--horizontal .md-time-picker__period-btn--am {\n  border-inline-end: var(--_period-outline-width) solid var(--_period-outline-color);\n  /* Mirrors the vertical layout: parent shape minus its border so the\n     AM's active background stops cleanly at the outline instead of\n     bleeding past it. */\n  border-start-start-radius: calc(var(--_period-shape) - var(--_period-outline-width));\n  border-end-start-radius: calc(var(--_period-shape) - var(--_period-outline-width));\n}\n.md-time-picker__period--horizontal .md-time-picker__period-btn--pm {\n  border-start-end-radius: calc(var(--_period-shape) - var(--_period-outline-width));\n  border-end-end-radius: calc(var(--_period-shape) - var(--_period-outline-width));\n}\n\n/* ── Dial ── */\n.md-time-picker__dial-wrap {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-block-end: var(--md-sys-spacing-inset-xl, 24px);\n  /* Bloom in on mount (dialog open AND swap from input → dial) —\n     paired with `.md-time-picker__input-area` so both modes\n     animate symmetrically. The transform-origin pulls the bloom\n     toward the headline so the dial visually \"grows\" out of the\n     selected time digits. Duration is long1 (450ms), 50ms quicker\n     than the outer dialog unfold so the nested content settles\n     just BEFORE the dialog locks in — that staggered finish reads\n     as \"the dialog opens, then its contents bloom into place\"\n     rather than two motions racing each other. */\n  animation: md-time-picker-mode-in\n    var(--_mode-swap-duration)\n    var(--_motion-easing)\n    both;\n  transform-origin: center top;\n}\n\n.md-time-picker__dial {\n  position: relative;\n  width: var(--_dial-size);\n  height: var(--_dial-size);\n  background: var(--_dial-bg);\n  border-radius: 50%;\n  touch-action: none;\n  user-select: none;\n  cursor: pointer;\n  box-sizing: border-box;\n}\n\n:host([disabled]) .md-time-picker__dial {\n  pointer-events: none;\n  opacity: 0.38;\n}\n\n.md-time-picker__dial-center {\n  position: absolute;\n  width: var(--_dial-center-size);\n  height: var(--_dial-center-size);\n  border-radius: 50%;\n  background: var(--_dial-hand-color);\n  /* PHYSICAL anchors — a clock dial is a geometric shape that does\n     not mirror in RTL (clocks have no RTL variant; the dot must stay\n     dead-centre regardless of inherited direction). `inset-inline-*`\n     would still resolve to centre at 50% in a symmetric box, but the\n     intent of the dial coordinate system is physical, so we make\n     that explicit. */\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 2;\n}\n\n/* ── Selection hand ──\n   The hand math in md-time-picker.tsx (`renderDial` → `handAngle`,\n   `renderDialNumber`, and `dialPointFromEvent`) uses the canonical\n   clockwise-from-12 convention: angle 0deg = 12 o'clock, 60deg = 2,\n   90deg = 3, 180deg = 6, etc.\n\n   To keep the CSS rotation in phase with that convention, the hand\n   bar must start out pointing UP at rotate(0deg). We achieve that by\n   anchoring the bar's BOTTOM edge at the vertical center of the dial\n   (`bottom: 50%`) and giving it a `transform-origin: 50% 100%`\n   so the pivot sits at the dial center while the bar extends into the\n   upper half. Without this, the bar would extend downward and every\n   rotation would land the tip 180deg out of phase — so hour=2 with\n   handAngle=60deg visibly painted the tip at the \"8\" position.\n\n   `width: 0` keeps the rotation pivot dead-centre on the dial.\n   The visible parts (line, tip) are themselves centred via\n   translateX(-50%), so a zero-width anchor is all the parent needs to\n   provide. A 2px-wide parent would push the pivot 1px off, producing\n   a subtle gap between the centre dot and the line's foot. */\n.md-time-picker__dial-hand {\n  position: absolute;\n  /* PHYSICAL anchors — see `.md-time-picker__dial-center`. The hand\n     and its children deliberately live in physical coordinates so\n     that `transform: rotate(deg)` (which is also physical) lands the\n     tip on the active number in both LTR and RTL. Using\n     `inset-inline-*` here would resolve to centre at 50% / 0 width\n     today, but if the geometry ever shifts off-centre it would\n     silently flip in RTL and dislocate the hand. */\n  left: 50%;\n  top: auto;\n  bottom: 50%;\n  width: 0;\n  height: 50%;\n  background: transparent;\n  transform-origin: 50% 100%;\n  transform: rotate(0deg);\n  transition: transform 200ms var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));\n  pointer-events: none;\n  z-index: 1;\n}\n\n.md-time-picker__dial-hand-line {\n  position: absolute;\n  left: 50%;\n  /* Line draws from the pivot (= bottom of the hand bar = dial centre)\n     outward toward the tip, scaling with `--md-time-picker-hand-length`\n     so the 24h-inner-ring hand naturally short-strokes to its number.\n     Stroke width is themable via `--md-time-picker-dial-hand-width`\n     for authors who want a beefier or thinner hand. */\n  top: auto;\n  bottom: 0;\n  width: var(--_dial-hand-width);\n  height: var(--md-time-picker-hand-length, var(--_hand-length-dynamic, 100%));\n  background: var(--_dial-hand-color);\n  transform: translateX(-50%);\n}\n\n.md-time-picker__dial-hand-tip {\n  position: absolute;\n  left: 50%;\n  /* Tip lives at the far end of the line: `--md-time-picker-hand-length`\n     units away from the pivot at the bottom. Translating to a top-edge\n     offset → `100% - hand-length`. For full-length (100%) the tip sits\n     at the bar's top (the outer ring); for the 24h inner ring (62%) it\n     lands inset by 38% of the bar, on the inner ring numbers. */\n  top: calc(100% - var(--md-time-picker-hand-length, var(--_hand-length-dynamic, 100%)));\n  bottom: auto;\n  width: var(--_dial-target-size);\n  height: var(--_dial-target-size);\n  background: var(--_dial-hand-color);\n  border-radius: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.md-time-picker__dial-hand-dot {\n  display: none;\n}\n\n/* ── Dial numbers ──\n   MD3 Body Large typography (16dp / 400 weight / 24 line-height /\n   0.5px tracking) is used for every number on the dial, regardless\n   of ring (outer 12h or inner 24h). Tracking is forced to 0 for the\n   numerals so the digits stay optically aligned with the 48dp touch\n   targets — a stock 0.5px tracking visibly pushes two-digit numbers\n   (10, 11, 12) off-centre compared to one-digit ones.\n\n   The active number bumps weight to 500 to read clearly inside the\n   primary-coloured handle (and is recoloured to on-primary via\n   `--_dial-number-active-color`). */\n.md-time-picker__dial-number {\n  position: absolute;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  /* Physical sizing + physical centring offsets — pairs with the\n     `left`/`top` set inline by `renderDialNumber`. A logical\n     `margin-inline-start` would flip in RTL and pull every number\n     1×target-size to the wrong side, leaving the dial face mirrored\n     while the hand (a physical `rotate`) stayed put. */\n  width: var(--_dial-target-size);\n  height: var(--_dial-target-size);\n  /* stylelint-disable-next-line property-disallowed-list -- dial numbers are rotated in place; logical margin would flip in RTL while the hand stays put */\n  margin-left: calc(-1 * var(--_dial-target-size) / 2);\n  margin-top: calc(-1 * var(--_dial-target-size) / 2);\n  border-radius: 50%;\n  font-family: var(--md-sys-typescale-body-large-font-family, var(--md-sys-typescale-body-large-font, inherit));\n  font-size: var(--_dial-number-font-size);\n  font-weight: var(--_dial-number-font-weight);\n  line-height: 1;\n  letter-spacing: 0;\n  color: var(--_dial-number-color);\n  pointer-events: none;\n  user-select: none;\n  z-index: 2;\n  transition: color 150ms var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n  font-variant-numeric: tabular-nums;\n}\n\n/* Inner-ring 24h numbers are styled identically to outer-ring numbers —\n   same size, same opacity, same colour — per the MD3 24h dial spec.\n   The class is preserved as a hook for authors who want to opt into\n   custom inner-ring styling without re-targeting via :nth-child. */\n.md-time-picker__dial-number--inner {\n  color: var(--_dial-number-color);\n  opacity: 1;\n}\n\n.md-time-picker__dial-number--active {\n  color: var(--_dial-number-active-color);\n  font-weight: var(--_dial-number-active-font-weight);\n  opacity: 1;\n}\n\n/* ── Input variant ── */\n.md-time-picker__input-area {\n  /* M3 input spec: 24dp from the bottom of the input row (including\n     the \"Hour\" / \"Minute\" hint labels stacked underneath each input)\n     to the top of the footer / actions row. Previously this was\n     36dp, which inflated the dialog beyond the canonical layout. */\n  margin-block-end: var(--md-sys-spacing-inset-xl, 24px);\n  /* Bloom in on mount (dialog open AND mode swap) — see the\n     `@keyframes md-time-picker-mode-in` comment for the geometry\n     rationale, and the .md-time-picker__dial-wrap rule for why\n     the duration is long1 (450ms) — 50ms quicker than the outer\n     dialog unfold so the nested content settles first. */\n  animation: md-time-picker-mode-in\n    var(--_mode-swap-duration)\n    var(--_motion-easing)\n    both;\n  transform-origin: center top;\n}\n\n.md-time-picker__input-time {\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  /* No flex gap — the colon separator owns its own 24dp column\n     (M3 spec) and the AM/PM toggle uses `margin-inline-start: 12px`\n     to introduce the 12dp gutter shown in the M3 input spec sheet.\n     Mirroring this to the dial variant (which also lays out HH /\n     colon / MM with a fixed 24dp column and no flex gap) keeps the\n     two variants pixel-aligned. */\n  gap: 0;\n}\n\n.md-time-picker__input-group {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--_input-hint-gap);\n}\n\n.md-time-picker__input {\n  font-family: inherit;\n  /* Input mode uses M3 **display-medium** (45px / 52 line-height /\n     0 tracking) by default — intentionally one step smaller than\n     the dial variant's display-large (57px) tile glyphs. This\n     creates a deliberate size contrast when the user toggles\n     between modes: dial = \"read this number\" (big), input = \"type\n     a number\" (compact). The swap is animated by the bloom\n     keyframes at the bottom of this file. Override the size /\n     weight via `--md-time-picker-input-font-size` /\n     `--md-time-picker-input-font-weight`. */\n  font-size: var(--_input-font-size);\n  font-weight: var(--_input-font-weight);\n  line-height: 1;\n  letter-spacing: var(--md-sys-typescale-display-medium-letter-spacing, 0);\n  background: var(--_input-bg);\n  color: var(--_input-color);\n  border: var(--_input-border-width) solid var(--_input-outline-color);\n  border-radius: var(--_time-display-shape);\n  /* M3 input spec: 96dp × 72dp container. With the smaller\n     display-medium glyphs the box has extra breathing room above\n     and below the digits, so vertical alignment stays clean via\n     native <input> text centering. Both axes are themable\n     (`--md-time-picker-input-width` / `--md-time-picker-input-height`)\n     so dense layouts can squeeze them or accessibility-first\n     surfaces can bump them up. */\n  padding-block: 0;\n  padding-inline: 16px;\n  inline-size: var(--_input-width);\n  block-size: var(--_input-height);\n  text-align: center;\n  font-variant-numeric: tabular-nums;\n  appearance: textfield;\n  box-sizing: border-box;\n}\n\n.md-time-picker__input::-webkit-outer-spin-button,\n.md-time-picker__input::-webkit-inner-spin-button {\n  appearance: none;\n  margin: 0;\n}\n\n.md-time-picker__input:hover {\n  background: color-mix(in srgb, var(--_input-color) var(--_input-hover-opacity), var(--_input-bg));\n}\n\n.md-time-picker__input:focus {\n  outline: none;\n  background: var(--_input-bg);\n  border-color: var(--_input-active-outline-color);\n}\n\n.md-time-picker__input--active {\n  background: var(--_input-active-bg);\n  color: var(--_input-active-color);\n  border-color: transparent;\n}\n\n/* Re-declare the active palette under `:focus` because the generic\n   `.md-time-picker__input:focus` rule above has higher specificity\n   than `.md-time-picker__input--active` (one class + one pseudo\n   beats one class) and would otherwise stomp the primary-container\n   background back to `surface-container-highest` the moment the\n   active input took focus. With both classes plus the pseudo we\n   land at (0, 2, 1) which decisively wins the cascade. The MD3\n   spec calls for the active input to KEEP its primary-container\n   fill in the focused state and gain a primary 2dp outline on top\n   — anything else looks like a flicker bug to the user. Authors\n   re-skinning the active state should set BOTH\n   `--md-time-picker-input-active-bg` and\n   `--md-time-picker-input-active-color` for legibility. */\n.md-time-picker__input--active:focus {\n  background: var(--_input-active-bg);\n  color: var(--_input-active-color);\n  border-color: var(--_input-active-outline-color);\n}\n\n/* Same cascade trap as above, but for the hover state — make sure\n   hovering the already-active input doesn't briefly drain its\n   primary-container fill back through the generic-hover color-mix. */\n.md-time-picker__input--active:hover {\n  background: color-mix(\n    in srgb,\n    var(--_input-active-color) var(--_input-hover-opacity),\n    var(--_input-active-bg)\n  );\n}\n\n.md-time-picker__input--error,\n.md-time-picker__input--error:focus {\n  border-color: var(--_input-error-color);\n  color: var(--_input-error-color);\n}\n\n.md-time-picker__input-separator {\n  /* Separator glyph matches the input-mode digits (same font-size\n     and weight) so the colon doesn't tower over the digits it\n     separates. Both colour and column width are themable:\n     `--md-time-picker-input-separator-color` and\n     `--md-time-picker-input-separator-width`. */\n  font-size: var(--_input-font-size);\n  font-weight: var(--_input-font-weight);\n  line-height: 1;\n  color: var(--_input-separator-color);\n  /* M3 spec: 24dp-wide column with the colon visually centered inside\n     the input row (NOT inside the full input+hint column — otherwise\n     the colon would drift down into the hint band). Pin block-size\n     to the input height so the colon sits flush with the input row\n     regardless of how tall the hint underneath grows. */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: var(--_input-separator-width);\n  block-size: var(--_input-height);\n  align-self: flex-start;\n}\n\n.md-time-picker__input-hint {\n  font-size: var(--md-sys-typescale-body-small-font-size, 12px);\n  letter-spacing: var(--md-sys-typescale-body-small-letter-spacing, 0.4px);\n  color: var(--_input-hint-color);\n}\n\n.md-time-picker__input--error ~ .md-time-picker__input-hint {\n  color: var(--_input-error-color);\n}\n\n/* ── Footer ──\n   The footer composes md-icon-button (mode toggle) and md-button\n   (Cancel / OK), so we only handle layout here. Theming for each\n   button is forwarded via custom-property pipes so the existing\n   `--md-time-picker-toggle-icon-color`, `--md-time-picker-action-color`,\n   and `--md-time-picker-action-primary-color` tokens still work\n   without authors having to learn md-button / md-icon-button's\n   private property names. */\n.md-time-picker__footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--_footer-gap);\n}\n\n/* Mode-toggle (clock ⇄ keyboard) — composes md-icon-button. We\n   forward the time-picker-scoped tokens onto md-icon-button's own\n   custom-property surface so authors can recolour / resize /\n   reshape the toggle without learning a second API. */\n.md-time-picker__toggle-mode {\n  --md-icon-button-color: var(--_toggle-icon-color);\n  --md-icon-button-icon-color: var(--_toggle-icon-color);\n  --md-icon-button-icon-size: var(--_toggle-icon-size);\n  --md-icon-button-container-color: var(--_toggle-bg);\n  --md-icon-button-container-shape: var(--_toggle-shape);\n}\n\n.md-time-picker__actions {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--_actions-gap);\n}\n\n/* Cancel / OK — compose md-button (text variant). The\n   `--md-button-*` overrides below give authors a single-line\n   recipe for the three most-asked actions:\n     • recolour the label    → `--md-time-picker-action-color` (Cancel)\n                              `--md-time-picker-action-primary-color` (OK)\n     • give the OK button a tonal/filled background\n                              → `--md-time-picker-action-confirm-bg`\n     • restyle the corners   → `--md-time-picker-action-shape`. */\n.md-time-picker__action-btn {\n  --md-button-label-color: var(--_action-color);\n  --md-button-container-color: var(--_action-cancel-bg);\n  --md-button-container-shape: var(--_action-shape);\n}\n\n.md-time-picker__action-btn--primary {\n  --md-button-label-color: var(--_action-primary-color);\n  --md-button-container-color: var(--_action-confirm-bg);\n  --md-button-container-shape: var(--_action-shape);\n}\n\n/* ── RTL — keep numbers around the dial visually unmirrored ── */\n/* Layout uses logical properties throughout; the dial is geometrically\n   symmetrical, so we don't need to flip the dial itself. Only the\n   AM/PM segment ordering needs to follow logical flow. */\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .md-time-picker__scrim,\n  .md-time-picker__dialog,\n  .md-time-picker__dial-wrap,\n  .md-time-picker__input-area,\n  .md-time-picker__dial-hand,\n  .md-time-picker__period-btn,\n  .md-time-picker__dial-number,\n  .md-time-picker__input {\n    animation: none !important;\n    transition: none !important;\n  }\n}\n\n/* ── Forced colors (high contrast) ── */\n/* Visually-hidden polite live region (dialog phase announcements). */\n.md-time-picker__sr-status {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n\n@media (forced-colors: active) {\n  .md-time-picker__dialog {\n    border: 1px solid CanvasText;\n  }\n  .md-time-picker__period,\n  .md-time-picker__input,\n  .md-time-picker__dial {\n    border: 1px solid CanvasText;\n  }\n  /* Mirror the author hover/focus rules (0,2,0) at equal-or-higher\n     specificity so their color-mix()/sys-token values can't leak into\n     forced-colors mode — the base FC rules below them are only (0,1,0)\n     and would lose the cascade (same bug class as md-text-field's FC\n     hover indicator). Non-active tiles stay Canvas on hover; focus is\n     signalled with a Highlight border, never a fill. */\n  .md-time-picker__input:hover,\n  .md-time-picker__period-btn:hover {\n    background: Canvas;\n    color: CanvasText;\n    forced-color-adjust: none;\n  }\n  .md-time-picker__input:focus {\n    background: Canvas;\n    color: CanvasText;\n    border-color: Highlight;\n    forced-color-adjust: none;\n  }\n  .md-time-picker__input--active,\n  .md-time-picker__input--active:hover,\n  .md-time-picker__input--active:focus,\n  .md-time-picker__period-btn--active,\n  .md-time-picker__period-btn--active:hover,\n  .md-time-picker__dial-hand-line,\n  .md-time-picker__dial-hand-tip,\n  .md-time-picker__dial-center {\n    background: Highlight;\n    color: HighlightText;\n    forced-color-adjust: none;\n  }\n  .md-time-picker__input--error,\n  .md-time-picker__input--error:focus,\n  .md-time-picker__input--error:hover {\n    /* Canvas fill so LinkText stays readable even on an active\n       (Highlight-filled) tile that enters the error state. The :hover\n       mirror is REQUIRED: the (0,2,0) hover mirrors above would\n       otherwise out-specify the bare --error rule and flip a hovered\n       erroring tile back to Highlight/Canvas. */\n    background: Canvas;\n    border-color: LinkText;\n    color: LinkText;\n    forced-color-adjust: none;\n  }\n  /* The active period button carries forced-color-adjust:none, which\n     also stops the UA from re-forcing its author-colored focus ring,\n     divider, and ripple — mirror them to system colors explicitly. */\n  .md-time-picker__period-btn:focus-visible {\n    outline-color: Highlight;\n  }\n  .md-time-picker__period--vertical .md-time-picker__period-btn--am {\n    border-block-end-color: CanvasText;\n  }\n  .md-time-picker__period--horizontal .md-time-picker__period-btn--am {\n    border-inline-end-color: CanvasText;\n  }\n  .md-time-picker__period-btn md-ripple {\n    display: none;\n  }\n}\n\n/* ── Dark theme (relies on system tokens; this is a finishing pass) ── */\n:host-context([data-theme='dark']) {\n  --_scrim-color: var(--md-time-picker-scrim-color, rgba(0, 0, 0, 0.6));\n}\n\n/* ==========================================================\n   DENSITY (local override)\n   Maps the local `density` prop onto the same --md-sys-density-scale signal a\n   global `data-density` ancestor sets. Declared on :host, so a local rung wins\n   over the inherited global one. Every density-sensitive value in this file\n   derives from that single signal by calc — never add a fixed per-rung ladder.\n   ========================================================== */\n:host([density='-1']) { --md-sys-density-scale: -1; }\n:host([density='-2']) { --md-sys-density-scale: -2; }\n:host([density='-3']) { --md-sys-density-scale: -3; }\n:host([density='-4']) { --md-sys-density-scale: -4; }\n","import { getValidityOf } from '../../utils/form';\nimport { AttachInternals, Build, Component, Element, Event, EventEmitter, Host, Method, Prop, State, Watch, h } from '@stencil/core';\n\nexport type MdTimePickerFormat = '12h' | '24h';\nexport type MdTimePickerMode = 'dial' | 'input';\nexport type MdTimePickerSelection = 'hour' | 'minute';\nexport type MdTimePickerPeriod = 'AM' | 'PM';\n/**\n * MD3 supports two AM/PM period-selector layouts inside the dial dialog:\n *\n * - `vertical` (default) — 52×80dp stack on the trailing side of the\n *   minute tile. Matches the canonical reference dialog.\n * - `horizontal` — 216×38dp segmented button placed below the\n *   HH:MM display. Useful in compact layouts where the inline gutter\n *   cannot fit the vertical toggle.\n */\nexport type MdTimePickerPeriodLayout = 'vertical' | 'horizontal';\n\n/**\n * MD3 supports two **dialog** orientations for the dial variant:\n *\n * - `vertical` (default, portrait) — headline / HH:MM / dial / actions\n *   stacked top-to-bottom inside a ~328dp-wide dialog. Optimal for\n *   phone-portrait screens.\n * - `horizontal` (landscape) — two-column body with HH:MM + AM/PM in\n *   the left column and the 256dp dial in the right column, inside a\n *   wider (~572dp / 608dp for 24h) dialog. Matches the canonical M3\n *   \"Time picker dial - horizontal\" spec sheet. Always uses the\n *   216×38dp horizontal AM/PM pill — the 52×80dp vertical pill does\n *   not fit the landscape layout.\n *\n * `orientation` has no effect when `variant=\"input\"` (the input\n * dialog is always vertical / 328dp wide).\n */\nexport type MdTimePickerOrientation = 'vertical' | 'horizontal';\n\nexport interface MdTimePickerChangeDetail {\n  /**\n   * Canonical value as a 24-hour `HH:MM` string (e.g. `\"14:30\"`).\n   * Always zero-padded. Matches the `value` prop format so the\n   * detail can be round-tripped back into another picker without\n   * any transformation.\n   */\n  value: string;\n  /**\n   * ISO 8601 extended local-time string (`HH:MM:SS`), e.g.\n   * `\"14:30:00\"`. Seconds are always `\"00\"` because the picker\n   * tops out at minute precision.\n   *\n   * This is the format used by:\n   *   • HTML `<input type=\"time\" step=\"1\">` (when step ≤ 60 the\n   *     browser exposes the value with the seconds component);\n   *   • the W3C HTML Living Standard's \"time\" microsyntax;\n   *   • REST API \"time-only\" column types (Postgres `time`,\n   *     MySQL `TIME`, OpenAPI `format: \"time\"`).\n   */\n  iso: string;\n  /**\n   * Full ISO 8601 / RFC 3339 datetime string anchored to *today's*\n   * calendar date in UTC, e.g. `\"2026-05-21T14:30:00.000Z\"`.\n   * Equivalent to `date.toISOString()`.\n   *\n   * Use this when posting to an API that expects a JSON\n   * datetime (the vast majority of REST / GraphQL backends).\n   * The selected hours/minutes are interpreted in the user's\n   * **local** timezone and then serialized to UTC, so a user\n   * picking `15:00` in CET sees `\"…T14:00:00.000Z\"`.\n   */\n  isoDateTime: string;\n  /**\n   * JavaScript `Date` object — today's calendar date with the\n   * picked hours and minutes; seconds and milliseconds are\n   * zeroed. The local timezone offset is preserved by the\n   * `Date` itself; serialize with `.toISOString()` for UTC or\n   * `.toLocaleTimeString()` for the user's locale.\n   */\n  date: Date;\n  /** Hours in 24-hour clock (0–23). */\n  hours: number;\n  /** Minutes (0–59). */\n  minutes: number;\n  /** Day period derived from `hours` (always defined). */\n  period: MdTimePickerPeriod;\n}\n\n/**\n * Payload emitted by the `mdModeChange` event when the user\n * toggles between the dial and input variants from inside the\n * open dialog.\n */\nexport interface MdTimePickerModeChangeDetail {\n  /** Active mode after the toggle. */\n  mode: MdTimePickerMode;\n  /** Mode the picker was in before the toggle. */\n  previousMode: MdTimePickerMode;\n}\n\n/**\n * `md-time-picker` — Material Design 3 time picker.\n *\n * Spec: https://m3.material.io/components/time-pickers/specs\n *\n * Implements both MD3 dialog variants:\n *   1. **Dial** — a clock face the user drags or taps to pick hour & minute.\n *   2. **Input** — two text fields (HH / MM) plus optional AM/PM toggle.\n *\n * Users can switch between modes inside the open dialog via the toggle icon\n * (mirrors the official MD3 reference implementation). Both 12-hour and\n * 24-hour clocks are supported; the canonical `value` is always 24-hour\n * `HH:MM` for round-trip safety.\n */\n/* Module-level registry of open pickers (push order = open order).\n   Drives: topmost-only Escape/Tab handling when several pickers are\n   open simultaneously (capture listeners on the same document node all\n   fire — stopPropagation cannot silence same-node siblings), and a\n   refcounted body scroll lock so closing/disconnecting one picker never\n   unlocks scrolling underneath another that is still open. */\nconst openPickerStack: MdTimePicker[] = [];\nlet bodyOverflowBeforeLock = '';\n/* Monotonic open counter. Keyboard ownership (Escape / Tab trap) belongs\n   to the LAST-OPENED picker, which is NOT the same as the tail of\n   openPickerStack: a reparent (disconnect → reconnect) of a lower picker\n   re-pushes it to the tail, so array position is unreliable. Each picker\n   stamps openSeq when it actually opens (not on a reparent re-arm), and\n   the topmost owner is the open picker with the greatest openSeq. */\nlet openSeqCounter = 0;  \n\n@Component({\n  tag: 'md-time-picker',\n  styleUrl: 'md-time-picker.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class MdTimePicker {\n  @Element() el!: HTMLElement;\n\n  @AttachInternals() internals!: ElementInternals;\n\n  // ───────────────────────────── PUBLIC API ─────────────────────────────\n\n  /** Picker mode shown when the dialog first opens. Defaults to `input` (keyboard-first); users can toggle to `dial` from the footer icon. */\n  @Prop() variant: MdTimePickerMode = 'input';\n\n  /** 12-hour (with AM/PM) or 24-hour clock. */\n  @Prop() format: MdTimePickerFormat = '12h';\n\n  /** Selected time as a 24-hour `HH:MM` string (e.g. `\"14:30\"`). */\n  @Prop({ mutable: true, reflect: true }) value: string = '';\n\n  /** Form field name — the picker is form-associated and submits its `value` under this name in `FormData`, like a native `<input type=\"time\">`. */\n  @Prop({ reflect: true }) name: string = '';\n\n  /** Earliest selectable time as a 24-hour `HH:MM` string. A committed value before it fails constraint validation with `rangeUnderflow`. */\n  @Prop() min: string = '';\n\n  /** Latest selectable time as a 24-hour `HH:MM` string. A committed value after it fails constraint validation with `rangeOverflow`. */\n  @Prop() max: string = '';\n\n  /** Requires a committed value for the host form to validate (`valueMissing` otherwise). */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Trigger field label (acts as the floating label of the text-field-shaped trigger). */\n  @Prop() label: string = 'Select time';\n\n  /** Headline copy shown above the dial / inputs. Overrides the\n   *  mode-specific defaults (`headline-input-label` / `headline-dial-label`)\n   *  when set. */\n  @Prop() headline: string = '';\n\n  /** Localized default headline for the input variant (used when `headline` is empty). */\n  @Prop({ attribute: 'headline-input-label' }) headlineInputLabel: string = 'Enter time';\n\n  /** Localized default headline for the dial variant (used when `headline` is empty). */\n  @Prop({ attribute: 'headline-dial-label' }) headlineDialLabel: string = 'Select time';\n\n  /** Localized constraint-validation message when `required` and no time is committed. */\n  @Prop({ attribute: 'value-missing-label' }) valueMissingLabel: string = 'Please select a time.';\n\n  /** Localized validation message when the committed time is before `min`. `{min}` is substituted. */\n  @Prop({ attribute: 'range-underflow-label' }) rangeUnderflowLabel: string = 'Please select a time at or after {min}.';\n\n  /** Localized validation message when the committed time is after `max`. `{max}` is substituted. */\n  @Prop({ attribute: 'range-overflow-label' }) rangeOverflowLabel: string = 'Please select a time at or before {max}.';\n\n  /** Localized validation message for a reversed (overnight) `min`/`max` window when the time falls in the excluded middle. `{min}` and `{max}` are substituted. */\n  @Prop({ attribute: 'range-outside-label' }) rangeOutsideLabel: string = 'Please select a time at or after {min} or at or before {max}.';\n\n  /** Disables the trigger and prevents the dialog from opening. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether the picker dialog is open. Two-way bindable / reflected. */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /** Minute snap increment on the dial (1, 5, 10, 15, 30…). Inputs always accept 1-minute granularity. */\n  @Prop({ attribute: 'minute-step' }) minuteStep: number = 1;\n\n  /** Localized label for the Cancel action. */\n  @Prop({ attribute: 'cancel-label' }) cancelLabel: string = 'Cancel';\n\n  /** Localized label for the confirm action. */\n  @Prop({ attribute: 'ok-label' }) okLabel: string = 'OK';\n\n  /** When true the built-in field trigger is not rendered; open the dialog programmatically via `.show()`. */\n  @Prop({ attribute: 'hide-trigger', reflect: true }) hideTrigger: boolean = false;\n\n  /** Localized AM label (12-hour mode). */\n  @Prop({ attribute: 'am-label' }) amLabel: string = 'AM';\n\n  /** Localized PM label (12-hour mode). */\n  @Prop({ attribute: 'pm-label' }) pmLabel: string = 'PM';\n\n  /**\n   * Localized accessible label for the Hour input field. Matches the\n   * [MD3 Time picker accessibility spec](https://m3.material.io/components/time-pickers/accessibility)\n   * which mandates an \"Hour\" label on the hour text input.\n   */\n  @Prop({ attribute: 'hour-label' }) hourLabel: string = 'Hour';\n\n  /**\n   * Localized accessible label for the Minute input field. Matches the\n   * [MD3 Time picker accessibility spec](https://m3.material.io/components/time-pickers/accessibility)\n   * which mandates a \"Minute\" label on the minute text input.\n   */\n  @Prop({ attribute: 'minute-label' }) minuteLabel: string = 'Minute';\n\n  /**\n   * Localized accessible label for the mode-toggle icon button when the\n   * picker is currently in the *input* variant (clock icon shown — click\n   * to switch to the dial). Matches the MD3 accessibility spec entry\n   * \"Clock button → Toggle dial picker\".\n   */\n  @Prop({ attribute: 'toggle-dial-label' }) toggleDialLabel: string = 'Toggle dial picker';\n\n  /**\n   * Localized accessible label for the mode-toggle icon button when the\n   * picker is currently in the *dial* variant (keyboard icon shown —\n   * click to switch back to the input). Symmetric extension of the MD3\n   * \"Toggle dial picker\" naming pattern, since the spec only documents\n   * the input-mode label explicitly.\n   */\n  @Prop({ attribute: 'toggle-input-label' }) toggleInputLabel: string = 'Toggle keyboard input';\n\n  /**\n   * Localized accessible label for the AM/PM radio group container.\n   * Wraps the two radio children; individual radio names come from\n   * `am-label` / `pm-label`.\n   */\n  @Prop({ attribute: 'period-label' }) periodLabel: string = 'Period';\n\n  /**\n   * Layout for the AM/PM period selector. Has no effect when\n   * `format=\"24h\"` (the toggle is not rendered).\n   *\n   * - `vertical` — 52×72dp stack next to the minute tile (default).\n   * - `horizontal` — 216×38dp segmented button below HH:MM.\n   */\n  @Prop({ attribute: 'period-layout' }) periodLayout: MdTimePickerPeriodLayout = 'vertical';\n\n  /**\n   * Dialog orientation for the dial variant.\n   *\n   * - `vertical` (default) — single-column portrait layout (~328dp wide).\n   * - `horizontal` — two-column landscape layout (~572dp wide in both\n   *   12h and 24h modes since the HH/MM input tiles are 96dp in either\n   *   format). Forces the AM/PM pill into the 216×38dp horizontal\n   *   variant since the 52×72dp vertical pill cannot share the left\n   *   column cleanly. Has no effect when `variant=\"input\"`.\n   */\n  @Prop({ attribute: 'orientation' }) orientation: MdTimePickerOrientation = 'vertical';\n\n  /**\n   * Adaptive layout policy. Per the MD3 spec the picker should swap\n   * orientation or variant based on the viewport so the dial never\n   * has to scroll. When `responsive` is enabled the dialog\n   * automatically:\n   *\n   *   • Falls back to `variant=\"input\"` when the viewport height is\n   *     too short to fit the 256dp dial (default threshold: 460px),\n   *     matching the spec line \"Time pickers can fallback to the\n   *     input time picker when there isn't enough vertical real\n   *     estate to present the landscape orientation without\n   *     scrolling\".\n   *   • Promotes the dial variant to `orientation=\"horizontal\"`\n   *     when the viewport is wide enough for the 572/608dp landscape\n   *     dialog (default threshold: width ≥ 720px AND width > height),\n   *     matching \"the time picker can change to landscape orientation\n   *     on larger breakpoints or when viewport height is limited\".\n   *\n   * The `variant` / `orientation` props remain the *preference*\n   * the picker tries to honor — adaptive overrides only kick in\n   * when the viewport literally cannot fit them. Default `false`\n   * for backward compatibility; flip to `true` on new integrations\n   * to get the canonical MD3 adaptive layout.\n   */\n  @Prop({ attribute: 'responsive' }) responsive: boolean = false;\n\n  /**\n   * Local density rung. Drives the same `--md-sys-density-scale` signal that a\n   * global `data-density` ancestor sets, so a local value simply overrides the\n   * inherited one. 0 = default, -4 = ultra-compact.\n   */\n  @Prop({ reflect: true }) density: 0 | -1 | -2 | -3 | -4 = 0;\n\n  // ───────────────────────────── EVENTS ─────────────────────────────\n\n  /**\n   * Emitted when the user confirms the chosen time (OK button, or\n   * Enter inside the HH/MM fields while the buffers are valid).\n   * This is the canonical \"the user has committed a value\" event —\n   * use it for form integration, persistence, and analytics.\n   *\n   * The detail bundle includes both the human-friendly `value` and\n   * three industry-standard ISO / Date representations so\n   * downstream code never has to re-format the time itself.\n   */\n  @Event() mdChange: EventEmitter<MdTimePickerChangeDetail>;\n\n  /**\n   * Emitted on every intermediate change while the dialog is\n   * open — dial drag, dial-mode keyboard typing, AM/PM toggle,\n   * and input-variant keystrokes that produce a valid HH:MM.\n   *\n   * Mirrors the HTML `input` event semantics (\"fires for every\n   * user-driven mutation\") and matches the pattern used by\n   * `md-date-picker` / `md-text-field`. Use `mdInput` for live\n   * previews and `mdChange` for the final commit. The detail\n   * shape is identical to `mdChange` so a previewer can read the\n   * same fields regardless of which event arrived.\n   */\n  @Event() mdInput: EventEmitter<MdTimePickerChangeDetail>;\n\n  /** Emitted when the picker opens. */\n  @Event() mdOpen: EventEmitter<void>;\n\n  /** Emitted when the picker closes (whether confirmed, cancelled, or dismissed). */\n  @Event() mdClose: EventEmitter<void>;\n\n  /** Emitted when the picker is cancelled or dismissed without committing. */\n  @Event() mdCancel: EventEmitter<void>;\n\n  /**\n   * Emitted when the user switches between the dial and input\n   * variants via the dialog's keyboard / clock toggle. Lets\n   * analytics or sibling UI react to the variant change (e.g.\n   * announce the new mode to screen readers, or resize a hosting\n   * dialog wrapper).\n   */\n  @Event() mdModeChange: EventEmitter<MdTimePickerModeChangeDetail>;\n\n  // ───────────────────────────── INTERNAL STATE ─────────────────────────────\n\n  @State() private isOpen: boolean = false;\n  @State() private mode: MdTimePickerMode = 'dial';\n  @State() private selecting: MdTimePickerSelection = 'hour';\n  @State() private draftHours: number = 12;\n  @State() private draftMinutes: number = 0;\n  @State() private hourInputValue: string = '';\n  @State() private minuteInputValue: string = '';\n  @State() private hourInputError: boolean = false;\n  @State() private minuteInputError: boolean = false;\n  /* Live viewport dimensions, sampled while the dialog is open so\n     the adaptive `responsive` policy can flip variant / orientation\n     in response to a window resize, an orientationchange event, or\n     a foldable device unfolding. Only updated when `responsive` is\n     enabled to avoid paying the listener cost in the static case.\n     Initial value of 0/0 reads as \"no measurement yet\" and is\n     interpreted as \"respect the props verbatim\" by the getters. */\n  @State() private viewportWidth: number = 0;\n  @State() private viewportHeight: number = 0;\n  /* Mirrors the `disabled` state a wrapping `<fieldset disabled>` imposes\n     via the form-associated `formDisabledCallback` — merged with the\n     `disabled` prop through `isDisabled` so both channels behave alike. */\n  @State() private formDisabled: boolean = false;\n\n  private committedHours: number = 12;\n  private committedMinutes: number = 0;\n  private committedValue: string = '';\n  /* The canonical initial `value` captured at load, restored on form\n     reset — native `<input type=\"time\">` reset returns to the initial\n     attribute value, not to empty. */\n  private defaultValue: string = '';\n  private isDragging: boolean = false;\n  private dialEl?: HTMLDivElement;\n  private hourInputEl?: HTMLInputElement;\n  private minuteInputEl?: HTMLInputElement;\n  private hourInputSeeded: boolean = false;\n  private minuteInputSeeded: boolean = false;\n  private previousFocus: HTMLElement | null = null;\n  /* Open-sequence stamp (see openSeqCounter). 0 = never opened; set when\n     this picker opens, preserved across reparents so keyboard ownership\n     tracks open-order rather than DOM/stack position. */\n  private openSeq = 0;\n  private triggerFieldEl?: HTMLMdTextFieldElement;\n  private uid = Math.random().toString(36).slice(2, 11);\n  private headlineId = `md-time-picker-headline-${this.uid}`;\n  /* Cumulative (unwrapped) rotation, per dial mode, in degrees.\n     CSS `transition: transform` interpolates between literal angle\n     values — `rotate(354deg) → rotate(0deg)` therefore unwinds the\n     hand backward by -354° instead of advancing forward +6°. We\n     track the running angle so each render hands CSS the shortest\n     signed delta from the previous frame, keeping minute 59 → 00 (or\n     hour 23 → 00 in 24h mode) animating in the natural direction. */\n  private hourCumulativeAngle: number = 0;\n  private minuteCumulativeAngle: number = 0;\n  /* Which dial mode owned the cumulative angles last paint. When the\n     mode flips (hour ↔ minute) or the picker opens fresh, we re-seed\n     to avoid spinning the hand from a stale unwrapped value. */\n  private lastHandMode: MdTimePickerSelection | null = null;\n  private docKeyHandler?: (e: KeyboardEvent) => void;\n  /* Window resize / orientationchange listener for the adaptive\n     `responsive` policy. Only attached while the dialog is open\n     AND `responsive === true` — keeps idle pickers off the global\n     event loop. */\n  private viewportResizeHandler?: () => void;\n  // ───────────────────────────── LIFECYCLE ─────────────────────────────\n\n  componentWillLoad() {\n    if (!this.parseValueInto(this.value)) {\n      if (Build.isDev) {\n        console.warn(\n          `[md-time-picker] invalid value \"${this.value}\" — expected a 24-hour \"HH:MM\" string. Treating as empty.`,\n        );\n      }\n      this.value = '';\n    } else if (this.value) {\n      // Canonicalize accepted-but-unpadded input (\"9:05\" → \"09:05\") so\n      // FormData and the reflected attribute never flip format later.\n      this.value = this.toIso(this.draftHours, this.draftMinutes);\n    }\n    this.committedHours = this.draftHours;\n    this.committedMinutes = this.draftMinutes;\n    this.committedValue = this.value;\n    // Capture the canonical initial value for form reset (native parity).\n    this.defaultValue = this.value;\n    this.hourInputValue = String(this.computeDisplayHour(this.draftHours));\n    this.minuteInputValue = String(this.draftMinutes).padStart(2, '0');\n    // Sample the viewport BEFORE deriving the initial mode so the\n    // adaptive `responsive` policy can already apply the\n    // input-fallback during first paint (avoids a hydration flash\n    // where the dial briefly renders against a tiny viewport).\n    if (this.responsive) this.sampleViewport();\n    this.mode = this.effectiveVariant;\n    // Don't boot into an open dialog on a disabled picker (mirrors the\n    // openPicker isDisabled guard). formDisabled is always false at load.\n    if (this.open && !this.disabled) {\n      this.isOpen = true;\n      this.selecting = 'hour';\n    } else if (this.open && this.disabled) {\n      this.open = false;\n    }\n    this.updateFormValue();\n  }\n\n  componentDidLoad() {\n    // Re-assert validity now that renderTrigger's ref bound\n    // triggerFieldEl — the willLoad pass ran without an anchor, and an\n    // un-anchored valueMissing means the first form submit would show\n    // no validation UI.\n    this.updateValidity();\n    if (this.isOpen) {\n      this.openSeq = ++openSeqCounter;\n      this.previousFocus = MdTimePicker.deepActiveElement();\n      this.attachOpenEnvironment();\n      this.mdOpen.emit();\n      requestAnimationFrame(() => this.focusInitial());\n    }\n  }\n\n  connectedCallback() {\n    // Stencil fires disconnected/connected on a DOM *move* (reparent).\n    // disconnectedCallback tears the open-dialog environment down, so an\n    // open picker that gets reparented must re-arm Escape handling, the\n    // scroll lock, and the adaptive resize listener here — otherwise the\n    // dialog stays visible but Escape and the focus trap are dead.\n    if (this.isOpen) this.attachOpenEnvironment();\n  }\n\n  disconnectedCallback() {\n    this.detachOpenEnvironment();\n  }\n\n  // ─────────────────────── FORM-ASSOCIATED CALLBACKS ───────────────────────\n\n  formResetCallback() {\n    // Native `<input type=\"time\">` reset restores the initial attribute\n    // value, not empty. The @Watch('value') pass handles re-parsing/\n    // committing when the value actually changed; when it was already at\n    // the default nothing fires, so re-assert form value + validity here.\n    this.value = this.defaultValue;\n    this.updateFormValue();\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    if (disabled && this.isOpen) this.cancel();\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    if (typeof state === 'string') this.value = state;\n  }\n\n  // ───────────────────────────── WATCHERS ─────────────────────────────\n\n  @Watch('variant')\n  handleVariantChange(v: MdTimePickerMode) {\n    if (!this.isOpen) this.mode = v;\n  }\n\n  @Watch('value')\n  handleValueChange(v: string) {\n    // 1. NORMALIZE into the draft and compute the canonical string:\n    //      empty            → '' (draft seeds to the noon default)\n    //      valid \"HH:MM\"    → zero-padded canonical (parses into draft)\n    //      malformed/range  → '' + dev warn (draft reset to the default)\n    let normalized: string;\n    if (v === '') {\n      this.parseValueInto('');\n      normalized = '';\n    } else if (this.parseValueInto(v)) {\n      normalized = this.toIso(this.draftHours, this.draftMinutes);\n    } else {\n      if (Build.isDev) {\n        console.warn(\n          `[md-time-picker] invalid value \"${v}\" — expected a 24-hour \"HH:MM\" string. Treating as empty.`,\n        );\n      }\n      this.parseValueInto('');\n      normalized = '';\n    }\n    // 2. Round-trip a non-canonical / rejected input through the prop so\n    //    the reflected attribute + FormData always carry the canonical\n    //    form. Re-assigning re-fires this watch with normalized === v,\n    //    which falls through to the commit below (bounded — one bounce).\n    if (normalized !== v) {\n      this.value = normalized;\n      return;\n    }\n    // 3. Commit. We deliberately do NOT early-return when v equals the\n    //    prior committedValue: an open dialog whose draft/tiles the user\n    //    moved (dial drag) must still resync to an external set that\n    //    canonically equals the committed value (\"9:05\" while committed\n    //    \"09:05\") — the previous early-return stranded the tiles/dial.\n    this.committedHours = this.draftHours;\n    this.committedMinutes = this.draftMinutes;\n    this.committedValue = v;\n    if (this.isOpen) {\n      this.syncInputsFromDraft();\n      this.lastInputEmitKey = this.draftHours * 60 + this.draftMinutes;\n    } else {\n      this.hourInputValue = String(this.computeDisplayHour(this.draftHours));\n      this.minuteInputValue = String(this.draftMinutes).padStart(2, '0');\n    }\n    this.updateFormValue();\n  }\n\n  @Watch('min')\n  @Watch('max')\n  @Watch('required')\n  @Watch('valueMissingLabel')\n  @Watch('rangeUnderflowLabel')\n  @Watch('rangeOverflowLabel')\n  @Watch('rangeOutsideLabel')\n  handleConstraintChange() {\n    this.updateValidity();\n  }\n\n  @Watch('disabled')\n  handleDisabledChange(v: boolean) {\n    // Disabling an open picker at runtime must close it — symmetric with\n    // formDisabledCallback and the \"both channels behave alike\" contract.\n    // (isDisabled already gates opening, the dial, and the trigger.)\n    if (v && this.isOpen) this.cancel();\n  }\n\n  @Watch('responsive')\n  handleResponsiveChange(v: boolean) {\n    if (!this.isOpen) return;\n    if (v) {\n      this.sampleViewport();\n      this.attachViewportListener();\n      // Enabling responsive mid-session must apply the adaptive policy\n      // immediately, not only on the NEXT resize: a dial open on a short\n      // viewport falls back to input right away.\n      if (\n        this.mode === 'dial' &&\n        this.viewportHeight > 0 &&\n        this.viewportHeight < MdTimePicker.ADAPTIVE_MIN_DIAL_HEIGHT\n      ) {\n        this.mode = 'input';\n      }\n    } else {\n      // Disabling responsive stops the adaptive policy from applying to\n      // FUTURE resizes; we deliberately do NOT flip the current mode.\n      // `mode==='input'` is indistinguishable between an adaptive\n      // short-viewport fallback and a user's deliberate keyboard toggle\n      // (toggleMode sets mode without touching variant), and the\n      // component's own rule is that flipping a user OUT of input mid-\n      // session is hostile (see the resize handler). Leaving mode as-is\n      // preserves a user choice; the user can toggle to the dial via the\n      // footer icon if they want it.\n      this.detachViewportListener();\n    }\n  }\n\n  @Watch('open')\n  handleOpenPropChange(v: boolean) {\n    if (v && !this.isOpen) {\n      this.openPicker();\n    } else if (!v && this.isOpen) {\n      this.closePicker();\n    }\n  }\n\n  // ───────────────────────────── PUBLIC METHODS ─────────────────────────────\n\n  /** Programmatically open the picker dialog. */\n  /**\n   * Fires when this control's validity CHANGES — never on every keystroke, and\n   * never for a re-publish that lands on the same state.\n   *\n   * `composed: false` is deliberate. Composites like md-select embed an\n   * md-text-field, and a composed event escapes that inner shadow root, so a\n   * listener on md-select would receive the inner field's event as well as the\n   * host's — two events, different payloads, for one logical control. Keeping\n   * it uncomposed means each component reports only for itself, while\n   * `bubbles: true` still lets a <form> or app root hear every control.\n   */\n  @Event({ bubbles: true, composed: false }) mdValidityChange: EventEmitter<{\n    valid: boolean;\n    validationMessage: string;\n    flags: Record<string, boolean>;\n  }>;\n\n  /** Last emitted validity, so a re-publish that changes nothing stays silent. */\n  private lastValidityKey: string | null = null;\n\n  /**\n   * Emit mdValidityChange if validity actually moved.\n   *\n   * The FIRST call only primes the baseline. Initial state is not a change, and\n   * emitting on mount would fire once per control on every page load — noise a\n   * consumer would have to filter out, and misleading for anything logging\n   * \"field became invalid\".\n   */\n  private emitValidityChange() {\n    const v = getValidityOf(this.internals);\n    const key = `${v.valid}|${v.validationMessage}`;\n    if (this.lastValidityKey === key) return;\n    const primed = this.lastValidityKey !== null;\n    this.lastValidityKey = key;\n    if (primed) this.mdValidityChange.emit(v);\n  }\n\n  @Method()\n  async show(): Promise<void> {\n    this.openPicker();\n  }\n\n  /** Programmatically close the picker dialog (treated as Cancel). */\n  @Method()\n  async hide(): Promise<void> {\n    this.cancel();\n  }\n\n  /** Constraint-validation parity with native form controls: true when\n   *  the committed value satisfies `required` / `min` / `max`. */\n  @Method()\n  async checkValidity(): Promise<boolean> {\n    if (typeof this.internals?.checkValidity !== 'function') return true;\n    return this.internals.checkValidity();\n  }\n\n  /** Like `checkValidity()` but also surfaces the browser's validation\n   *  UI anchored on the trigger field (matches md-text-field). */\n  @Method()\n  async reportValidity(): Promise<boolean> {\n    if (typeof this.internals?.reportValidity !== 'function') return true;\n    return this.internals.reportValidity();\n  }\n\n  /** Snapshot of the host's ValidityState + message (ElementInternals). */\n  @Method()\n  async getValidity(): Promise<{ valid: boolean; validationMessage: string } & Partial<ValidityState>> {\n    const v = this.internals?.validity;\n    if (!v) return { valid: true, validationMessage: '' };\n    return {\n      valid: v.valid,\n      valueMissing: v.valueMissing,\n      rangeUnderflow: v.rangeUnderflow,\n      rangeOverflow: v.rangeOverflow,\n      validationMessage: this.internals.validationMessage,\n    };\n  }\n\n  // ───────────────────────────── VALUE HELPERS ─────────────────────────────\n\n  /** Parse a `HH:MM` string into the draft. Returns false (leaving the\n   *  draft untouched) when the string is present but malformed / out of\n   *  range — callers decide how to surface the rejection (dev warn +\n   *  reset to empty). An empty string is valid and seeds the draft to\n   *  the documented empty-state default of 12:00 PM (noon). */\n  private parseValueInto(v: string): boolean {\n    if (!v) {\n      this.draftHours = 12;\n      this.draftMinutes = 0;\n      return true;\n    }\n    const m = /^(\\d{1,2}):(\\d{2})$/.exec(v);\n    if (!m) return false;\n    const h = parseInt(m[1], 10);\n    const min = parseInt(m[2], 10);\n    if (h < 0 || h > 23 || min < 0 || min > 59) return false;\n    this.draftHours = h;\n    this.draftMinutes = min;\n    return true;\n  }\n\n  /** Effective disabled state: the `disabled` prop OR the form-imposed\n   *  disabled state from a wrapping `<fieldset disabled>`. */\n  private get isDisabled(): boolean {\n    return this.disabled || this.formDisabled;\n  }\n\n  /** `HH:MM` → minutes-since-midnight, or null when absent/malformed.\n   *  Used by the min/max constraint validation. */\n  private parseHHMM(v: string): number | null {\n    const m = /^(\\d{1,2}):(\\d{2})$/.exec(v || '');\n    if (!m) return null;\n    const h = parseInt(m[1], 10);\n    const min = parseInt(m[2], 10);\n    if (h > 23 || min > 59) return null;\n    return h * 60 + min;\n  }\n\n  private toIso(h: number, m: number): string {\n    return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;\n  }\n\n  /* Cache of the last `(hours, minutes)` pair we emitted on\n     `mdInput` so a single user gesture (drag, keyboard repeat,\n     IME composition) doesn't fire the same payload twice in a\n     row. Reset on open / close. The comparison key is a packed\n     int (`h * 60 + m`) for cheap equality. */\n  private lastInputEmitKey: number = -1;\n\n  /** Emit `mdInput` for the current draft H/M if (and only if)\n   *  the draft moved since the previous emit. Cheap to over-call\n   *  — pointer-move handlers, dial-typing commits, AM/PM toggles\n   *  and input keystrokes all funnel through this. */\n  private emitInputIfChanged() {\n    if (!this.isOpen) return;\n    const key = this.draftHours * 60 + this.draftMinutes;\n    if (key === this.lastInputEmitKey) return;\n    this.lastInputEmitKey = key;\n    this.mdInput.emit(this.buildChangeDetail(this.draftHours, this.draftMinutes));\n  }\n\n  /** Build the full event detail bundle for `mdChange` / `mdInput`.\n   *\n   *  We compute every representation up-front so listeners never\n   *  need to re-format the time themselves. The cost is trivial\n   *  (a single `Date` allocation + three `String.prototype.padStart`\n   *  calls) and we already touch all of these formats internally,\n   *  so centralizing the build keeps the canonical mapping in one\n   *  place.\n   *\n   *  Format choices follow the relevant industry standards:\n   *    • `value`       — `HH:MM`        → matches the `value` prop & HTML `<input type=\"time\">`\n   *    • `iso`         — `HH:MM:SS`     → ISO 8601 partial-time, extended (W3C, OpenAPI `format: time`)\n   *    • `isoDateTime` — full RFC 3339  → JSON-safe datetime for REST/GraphQL backends\n   *    • `date`        — `Date` instance → ergonomic for in-process JS code\n   */\n  private buildChangeDetail(h: number, m: number): MdTimePickerChangeDetail {\n    const value = this.toIso(h, m);\n    const iso = `${value}:00`;\n    // Anchor to today's calendar date so the `Date` is a real point\n    // in time the backend can persist. We zero seconds and ms to\n    // match the picker's actual precision; serializing a Date with\n    // junk seconds would mislead anyone diffing two emitted values.\n    const date = new Date();\n    date.setHours(h, m, 0, 0);\n    return {\n      value,\n      iso,\n      isoDateTime: date.toISOString(),\n      date,\n      hours: h,\n      minutes: m,\n      period: h >= 12 ? 'PM' : 'AM',\n    };\n  }\n\n  private get period(): MdTimePickerPeriod {\n    return this.draftHours >= 12 ? 'PM' : 'AM';\n  }\n\n  private computeDisplayHour(h24: number): number {\n    if (this.format === '24h') return h24;\n    if (h24 === 0) return 12;\n    if (h24 > 12) return h24 - 12;\n    return h24;\n  }\n\n  private get displayHour(): number {\n    return this.computeDisplayHour(this.draftHours);\n  }\n\n  private setHour24FromDisplay(displayH: number, period: MdTimePickerPeriod) {\n    let h: number;\n    if (this.format === '24h') {\n      h = ((displayH % 24) + 24) % 24;\n    } else {\n      const normalized = displayH === 0 ? 12 : displayH;\n      if (normalized === 12) h = period === 'AM' ? 0 : 12;\n      else h = period === 'AM' ? normalized : normalized + 12;\n    }\n    this.draftHours = h;\n  }\n\n  private formatDisplayTime(h: number, m: number): string {\n    if (this.format === '24h') {\n      return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;\n    }\n    const period = h >= 12 ? this.pmLabel : this.amLabel;\n    const dh = h === 0 ? 12 : h > 12 ? h - 12 : h;\n    return `${dh}:${String(m).padStart(2, '0')} ${period}`;\n  }\n\n  // ───────────────────────────── OPEN / CLOSE ─────────────────────────────\n\n  private openPicker = () => {\n    if (this.isDisabled || this.isOpen) return;\n    // Deep (composed-tree) capture: `document.activeElement` alone stops\n    // at the outermost shadow host — often this very picker — which made\n    // the close-time restore land on <body>. Walking shadowRoot\n    // .activeElement down to the real focused node lets closePicker put\n    // focus back exactly where the user left it.\n    this.previousFocus = MdTimePicker.deepActiveElement();\n    // Take an initial viewport sample BEFORE picking the open mode\n    // so `effectiveVariant` already has the data it needs to apply\n    // the adaptive fallback (input on short viewports).\n    this.sampleViewport();\n    this.attachOpenEnvironment();\n    this.draftHours = this.committedHours;\n    this.draftMinutes = this.committedMinutes;\n    // Seed the input-event de-dupe key with the *current* draft so\n    // the first user-driven movement away from the seed fires\n    // `mdInput`, but reopening the picker on an unchanged time\n    // doesn't fire a spurious \"input\" event before any interaction.\n    this.lastInputEmitKey = this.draftHours * 60 + this.draftMinutes;\n    this.selecting = 'hour';\n    // `effectiveVariant` collapses to `this.variant` when `responsive`\n    // is false, so this stays a no-op for non-adaptive integrations.\n    this.mode = this.effectiveVariant;\n    this.hourInputValue = String(this.displayHour);\n    this.minuteInputValue = String(this.draftMinutes).padStart(2, '0');\n    this.hourInputError = false;\n    this.minuteInputError = false;\n    this.hourInputSeeded = false;\n    this.minuteInputSeeded = false;\n    /* Fresh dial — drop the cumulative rotation so the first render\n       snaps to the seeded value without animating in from whatever\n       angle the previous session ended on. The actual seed happens\n       inside renderDial() when it detects `lastHandMode === null`. */\n    this.hourCumulativeAngle = 0;\n    this.minuteCumulativeAngle = 0;\n    this.lastHandMode = null;\n    this.openSeq = ++openSeqCounter;\n    this.isOpen = true;\n    this.open = true;\n    this.mdOpen.emit();\n    requestAnimationFrame(() => this.focusInitial());\n  };\n\n  private focusInitial() {\n    const root = this.el.shadowRoot;\n    if (!root) return;\n    // Both variants share the typeable HH:MM input row, so the\n    // initial focus target is identical in either mode — the HH input.\n    this.syncInputFields();\n    this.focusInputSelectingAll(this.hourInputEl);\n  }\n\n  /** Focus an input with its full contents selected so the next\n   *  keystroke REPLACES the seeded value. The seeded buffer is always\n   *  already at `maxLength` (e.g. \"12\"), so a caret parked at the end\n   *  silently swallows the first keystroke — the single worst failure\n   *  mode for a keyboard user (\"typed 9:30, got 12:30\"). Select-all is\n   *  also what native `<input type=\"time\">` segments do on focus. */\n  private focusInputSelectingAll(el: HTMLInputElement | undefined | null) {\n    if (!el) return;\n    el.focus();\n    this.selectInputContents(el);\n  }\n\n  private closePicker = () => {\n    if (!this.isOpen) return;\n    this.isOpen = false;\n    this.open = false;\n    this.detachOpenEnvironment();\n    this.mdClose.emit();\n    this.restoreFocusAfterClose();\n  };\n\n  /** Everything the open dialog needs from the document/window scope:\n   *  scroll lock, the capture-phase Escape + Tab-trap key handler, and\n   *  the adaptive viewport listener. Idempotent — safe to call from\n   *  openPicker, the boot-open path, and connectedCallback (reparent). */\n  private attachOpenEnvironment() {\n    if (typeof document === 'undefined' || this.docKeyHandler) return;\n    if (!openPickerStack.includes(this)) openPickerStack.push(this);\n    if (document.body) {\n      // Save the pre-lock overflow only when taking the FIRST lock so a\n      // stack of pickers restores the page's own value, not 'hidden'.\n      if (openPickerStack.length === 1) {\n        bodyOverflowBeforeLock = document.body.style.overflow;\n      }\n      document.body.style.overflow = 'hidden';\n    }\n    this.docKeyHandler = (ev: KeyboardEvent) => {\n      if (!this.isOpen) return;\n      // Only the LAST-OPENED picker owns the keyboard: every stacked\n      // picker's capture listener fires on the same keydown, so without\n      // this gate one Escape closed every dialog and the dueling Tab\n      // traps pinned focus into the wrong dialog. Ownership follows the\n      // greatest openSeq — NOT the stack tail, which a reparent's\n      // detach/re-push would otherwise hand to a background picker.\n      if (!MdTimePicker.isTopmostOpen(this)) return;\n      if (ev.key === 'Escape') {\n        ev.preventDefault();\n        ev.stopImmediatePropagation();\n        this.cancel();\n      } else if (ev.key === 'Tab') {\n        this.trapFocus(ev);\n      }\n    };\n    document.addEventListener('keydown', this.docKeyHandler, true);\n    this.attachViewportListener();\n  }\n\n  private detachOpenEnvironment() {\n    if (typeof document !== 'undefined' && this.docKeyHandler) {\n      document.removeEventListener('keydown', this.docKeyHandler, true);\n      this.docKeyHandler = undefined;\n      const idx = openPickerStack.indexOf(this);\n      if (idx !== -1) openPickerStack.splice(idx, 1);\n      // Release the shared scroll lock only when the LAST open picker\n      // leaves; a closed/never-opened picker (disconnectedCallback on a\n      // closed instance) must not touch the lock it never took.\n      if (document.body && openPickerStack.length === 0) {\n        document.body.style.overflow = bodyOverflowBeforeLock;\n      }\n    }\n    this.detachViewportListener();\n  }\n\n  /** True when `picker` is the last-opened member of the open stack\n   *  (greatest openSeq) — the keyboard/focus-trap owner. Uses the open\n   *  stamp rather than array position so a reparent (which re-pushes a\n   *  lower picker to the tail) can't hand ownership to a background\n   *  dialog. */\n  private static isTopmostOpen(picker: MdTimePicker): boolean {\n    let top: MdTimePicker | null = null;\n    for (const p of openPickerStack) {\n      if (!top || p.openSeq > top.openSeq) top = p;\n    }\n    return top === picker;\n  }\n\n  /** The real focused element across shadow boundaries (composed tree). */\n  private static deepActiveElement(): HTMLElement | null {\n    if (typeof document === 'undefined') return null;\n    let active: Element | null = document.activeElement;\n    while (active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;\n    return (active as HTMLElement) ?? null;\n  }\n\n  /** Composed-tree containment (crosses shadow boundaries upward). */\n  private static composedContains(ancestor: Node, node: Node | null): boolean {\n    let n: Node | null = node;\n    while (n) {\n      if (n === ancestor) return true;\n      n = n instanceof ShadowRoot ? n.host : n.parentNode;\n    }\n    return false;\n  }\n\n  /** Focus-restore on close. The captured origin is only reused when it\n   *  is still connected and NOT inside this picker (opening via the\n   *  built-in trigger captures the trigger's inner input — restoring\n   *  through the md-text-field's setFocus keeps delegatesFocus happy).\n   *  Every degraded path lands on the trigger, never on <body>. */\n  private restoreFocusAfterClose() {\n    const target = this.previousFocus;\n    this.previousFocus = null;\n    const usable =\n      !!target &&\n      target.isConnected &&\n      typeof target.focus === 'function' &&\n      (typeof document === 'undefined' || target !== document.body);\n    if (usable && !MdTimePicker.composedContains(this.el, target)) {\n      target.focus();\n      // A connected origin can still refuse focus (disabled or\n      // display:none since capture) — verify it actually took before\n      // accepting, otherwise fall through to the trigger.\n      const after = MdTimePicker.deepActiveElement();\n      if (after && MdTimePicker.composedContains(target, after)) return;\n    }\n    // When the close was caused by the control becoming disabled\n    // (fieldset), match native behavior: no focus target remains.\n    if (this.isDisabled) return;\n    // With a trigger, restore to it. Without one (hideTrigger), the host\n    // itself is `display: contents` and generates no focusable box, so\n    // there is no in-component anchor: focus falling to <body> is the\n    // honest outcome (matching a native <dialog> opened with no trigger).\n    // The meaningful hideTrigger case — an external control that called\n    // show() — is handled by the usable-previousFocus branch above.\n    if (this.triggerFieldEl) this.focusTrigger();\n  }\n\n  private focusTrigger() {\n    const field = this.triggerFieldEl;\n    if (!field) return;\n    if (typeof field.setFocus === 'function') void field.setFocus();\n    else field.focus?.();\n  }\n\n  /** Tab-order candidates inside the open dialog, in DOM order.\n   *  Includes the composed md-button / md-icon-button hosts (their\n   *  shadow buttons receive the actual focus via focusItem). Roving\n   *  tabindex=\"-1\" radios and disabled controls are excluded. */\n  private dialogFocusables(): HTMLElement[] {\n    const dialog = this.el.shadowRoot?.querySelector('.md-time-picker__dialog');\n    if (!dialog) return [];\n    const nodes = Array.from(\n      dialog.querySelectorAll<HTMLElement>('input, button, md-button, md-icon-button, [tabindex]'),\n    );\n    return nodes.filter(\n      (n) => !n.hasAttribute('disabled') && n.getAttribute('tabindex') !== '-1',\n    );\n  }\n\n  private focusItem(el: HTMLElement) {\n    const anyEl = el as HTMLElement & { setFocus?: () => Promise<void> };\n    if (typeof anyEl.setFocus === 'function') {\n      void anyEl.setFocus();\n      return;\n    }\n    const inner = el.shadowRoot?.querySelector<HTMLElement>('button, input, [tabindex]');\n    const target = inner ?? el;\n    target.focus();\n    // HH/MM buffers sit at maxLength — a bare focus() with a collapsed\n    // caret swallows the next keystroke, so the trap wrap honors the\n    // same select-all contract as focusInputSelectingAll.\n    if (target instanceof HTMLInputElement) this.selectInputContents(target);\n  }\n\n  /** Modal focus trap (WAI-ARIA dialog pattern): Tab from the last\n   *  focusable wraps to the first, Shift+Tab from the first wraps to\n   *  the last, and focus that escaped the dialog (scrim click residue,\n   *  background page) is pulled back in on the next Tab. */\n  private trapFocus(ev: KeyboardEvent) {\n    const focusables = this.dialogFocusables();\n    if (!focusables.length) return;\n    const active = MdTimePicker.deepActiveElement();\n    const idx = active\n      ? focusables.findIndex((f) => MdTimePicker.composedContains(f, active))\n      : -1;\n    const forward = !ev.shiftKey;\n    if (idx === -1) {\n      ev.preventDefault();\n      this.focusItem(focusables[forward ? 0 : focusables.length - 1]);\n      return;\n    }\n    if (forward && idx === focusables.length - 1) {\n      ev.preventDefault();\n      this.focusItem(focusables[0]);\n    } else if (!forward && idx === 0) {\n      ev.preventDefault();\n      this.focusItem(focusables[focusables.length - 1]);\n    }\n  }\n\n  /** Take a synchronous snapshot of the current viewport size into\n   *  state, used by the adaptive `responsive` policy. Safe to call\n   *  outside a browser (returns early when `window` is unavailable\n   *  during SSR / Jest spec runs). */\n  private sampleViewport() {\n    if (typeof window === 'undefined') return;\n    this.viewportWidth = window.innerWidth || 0;\n    this.viewportHeight = window.innerHeight || 0;\n  }\n\n  private attachViewportListener() {\n    if (!this.responsive || typeof window === 'undefined') return;\n    if (this.viewportResizeHandler) return; // already attached\n    let frame = 0;\n    this.viewportResizeHandler = () => {\n      // Coalesce bursts of resize / orientationchange events into\n      // a single re-render frame so we don't thrash the layout\n      // while the user is mid-drag of a window edge.\n      if (frame) cancelAnimationFrame(frame);\n      frame = requestAnimationFrame(() => {\n        this.sampleViewport();\n        // If the new viewport pushes us into the input-fallback\n        // range, eagerly flip `mode` so the dial doesn't render\n        // for a frame against an undersized container. The\n        // reverse (input → dial when the viewport grows) is left\n        // to the user — flipping them OUT of input mid-typing\n        // would be hostile.\n        // Force the input FALLBACK only when the viewport genuinely\n        // cannot fit the dial — not merely because the author's\n        // variant preference is 'input'. Otherwise any resize evicted\n        // a user who had toggled to the dial back to the input mode.\n        if (\n          this.mode === 'dial' &&\n          this.viewportHeight > 0 &&\n          this.viewportHeight < MdTimePicker.ADAPTIVE_MIN_DIAL_HEIGHT\n        ) {\n          this.mode = 'input';\n        }\n        frame = 0;\n      });\n    };\n    window.addEventListener('resize', this.viewportResizeHandler, { passive: true });\n    window.addEventListener('orientationchange', this.viewportResizeHandler, { passive: true });\n  }\n\n  private detachViewportListener() {\n    if (typeof window === 'undefined') return;\n    if (!this.viewportResizeHandler) return;\n    window.removeEventListener('resize', this.viewportResizeHandler);\n    window.removeEventListener('orientationchange', this.viewportResizeHandler);\n    this.viewportResizeHandler = undefined;\n  }\n\n  private cancel = () => {\n    if (!this.isOpen) return;\n    this.draftHours = this.committedHours;\n    this.draftMinutes = this.committedMinutes;\n    this.mdCancel.emit();\n    this.closePicker();\n  };\n\n  private confirm = () => {\n    // A disabled picker must never commit (defensive — the dialog is\n    // closed on disable, but confirm() is also reachable programmatically).\n    if (this.isDisabled) return;\n    // The typeable HH:MM tile row exists in BOTH variants, so OK must\n    // validate the visible buffers in dial mode too — previously a\n    // stale invalid buffer (e.g. \"99\") let OK silently commit the older\n    // draft while the tiles still showed the erroring text.\n    this.commitInputs();\n    if (this.hourInputError || this.minuteInputError) return;\n    this.committedHours = this.draftHours;\n    this.committedMinutes = this.draftMinutes;\n    const detail = this.buildChangeDetail(this.draftHours, this.draftMinutes);\n    this.committedValue = detail.value;\n    this.value = detail.value;\n    this.updateFormValue();\n    this.mdChange.emit(detail);\n    this.closePicker();\n  };\n\n  // ─────────────────────── FORM VALUE & VALIDITY ───────────────────────\n\n  /** ElementInternals: participate in FormData under the host's `name`\n   *  and keep constraint validity in sync with the committed value. */\n  private updateFormValue() {\n    try {\n      // '' submits as name= (empty entry), matching a native\n      // <input type=\"time\"> with no selection.\n      this.internals?.setFormValue(this.committedValue ?? '');\n    } catch {\n      /* spec mock */\n    }\n    this.updateValidity();\n  }\n\n  private updateValidity() {\n    if (typeof this.internals?.setValidity !== 'function') return;\n    // Anchor validation UI on the trigger field when rendered (it's a\n    // shadow-including descendant); before first render or with\n    // `hideTrigger`, omit the anchor so the browser defaults to the host.\n    const anchor = this.triggerFieldEl as unknown as HTMLElement | undefined;\n    const setValidity = (flags: ValidityStateFlags, message?: string) => {\n      if (message && anchor) this.internals.setValidity(flags, message, anchor);\n      else if (message) this.internals.setValidity(flags, message);\n      else this.internals.setValidity(flags);\n    };\n    const current = this.parseHHMM(this.committedValue);\n    const minM = this.parseHHMM(this.min);\n    const maxM = this.parseHHMM(this.max);\n    // Substitute {min}/{max} into a localizable message template. Global\n    // so a template that repeats a token substitutes every occurrence.\n    const msg = (tpl: string) => tpl.replace(/\\{min\\}/g, this.min).replace(/\\{max\\}/g, this.max);\n    try {\n      if (this.required && current === null) {\n        setValidity({ valueMissing: true }, this.valueMissingLabel);\n      } else if (current !== null && minM !== null && maxM !== null && minM > maxM) {\n        // Reversed range = overnight window, matching native\n        // <input type=\"time\"> semantics: valid when v >= min OR v <= max\n        // (e.g. min=\"22:00\" max=\"06:00\" accepts 23:30 and 05:00). When\n        // the value falls in the excluded middle the HTML spec marks the\n        // control as suffering from BOTH underflow and overflow, so we\n        // set both flags (a consumer checking rangeOverflow alone still\n        // sees the failure).\n        if (current < minM && current > maxM) {\n          setValidity({ rangeUnderflow: true, rangeOverflow: true }, msg(this.rangeOutsideLabel));\n        } else {\n          setValidity({});\n        }\n      } else if (current !== null && minM !== null && current < minM) {\n        setValidity({ rangeUnderflow: true }, msg(this.rangeUnderflowLabel));\n      } else if (current !== null && maxM !== null && current > maxM) {\n        setValidity({ rangeOverflow: true }, msg(this.rangeOverflowLabel));\n      } else {\n        setValidity({});\n      }\n    } catch {\n      /* spec mock */\n    }\n      this.emitValidityChange();\n  }\n\n  // ───────────────────────────── MODE / SELECTION ─────────────────────────────\n\n  private setSelecting = (s: MdTimePickerSelection) => {\n    this.selecting = s;\n  };\n\n  private togglePeriod = (p: MdTimePickerPeriod) => {\n    if (this.format === '24h') return;\n    if (this.period === p) return;\n    if (p === 'AM' && this.draftHours >= 12) this.draftHours -= 12;\n    else if (p === 'PM' && this.draftHours < 12) this.draftHours += 12;\n    this.emitInputIfChanged();\n    // In 12h mode the displayed HH digit doesn't change when the\n    // period flips (3 AM ↔ 3 PM both show \"3\"), but the typed\n    // buffer might be stale or in an error state from a prior bad\n    // value — re-sync so the inputs always reflect the truth.\n    this.syncInputsFromDraft();\n  };\n\n  /**\n   * WAI-ARIA radiogroup keyboard pattern for AM ⇄ PM.\n   *\n   * The roving-tabindex on the period buttons (only the *checked*\n   * radio is tabbable) is correct for `role=\"radiogroup\"`, but it\n   * means the second radio is unreachable via Tab — so the group\n   * also has to handle the arrow / Home / End keys per the WAI-ARIA\n   * Authoring Practices for the radio pattern. Without this, Tab\n   * appears to \"skip\" PM straight to the footer keyboard-toggle\n   * icon — which is exactly the bug this handler fixes.\n   *\n   * Bindings:\n   *   - ArrowLeft / ArrowUp    → previous radio (and select it)\n   *   - ArrowRight / ArrowDown → next radio (and select it)\n   *   - Home                   → AM\n   *   - End                    → PM\n   *   - Space                  → re-select the focused radio (no-op\n   *                              if already checked; matches HTML\n   *                              radio semantics)\n   *\n   * All four arrow keys are wired even though the toggle is laid out\n   * vertically by default, because the horizontal-period-layout\n   * variant (and the dial's landscape orientation) reorient the\n   * group and users expect both axes to work either way.\n   */\n  private onPeriodKeyDown = (e: KeyboardEvent) => {\n    if (this.format === '24h') return;\n    const key = e.key;\n    const nav = key === 'ArrowLeft' || key === 'ArrowRight' || key === 'ArrowUp' || key === 'ArrowDown' || key === 'Home' || key === 'End';\n    if (!nav && key !== ' ' && key !== 'Spacebar') return;\n    e.preventDefault();\n    let next: MdTimePickerPeriod;\n    if (key === 'Home') next = 'AM';\n    else if (key === 'End') next = 'PM';\n    else if (key === ' ' || key === 'Spacebar') next = this.period;\n    else next = this.period === 'AM' ? 'PM' : 'AM';\n    this.togglePeriod(next);\n    // Move DOM focus to the newly-active radio so the user can keep\n    // arrowing without first re-tabbing into the group. We do this\n    // in the next frame because the tabindex flip (`current === 'AM'`\n    // ? 0 : -1) only takes effect after the next render — focusing\n    // a tabindex=-1 element pre-render would silently no-op on some\n    // browsers.\n    requestAnimationFrame(() => {\n      const root = this.el.shadowRoot;\n      if (!root) return;\n      const target = root.querySelector(\n        next === 'AM' ? '[part=\"period-am\"]' : '[part=\"period-pm\"]',\n      ) as HTMLElement | null;\n      target?.focus();\n    });\n  };\n\n  private toggleMode = () => {\n    const previousMode = this.mode;\n    this.mode = this.mode === 'dial' ? 'input' : 'dial';\n    // Fire mdModeChange BEFORE re-seeding inputs / focusing so a\n    // listener can react synchronously (e.g. tweak a wrapper's\n    // max-height) before the new mode lays out. The detail bundle\n    // includes the previous mode for analytics that need to count\n    // \"user opened the keyboard from dial\" vs \"from input\".\n    this.mdModeChange.emit({ mode: this.mode, previousMode });\n    // Both modes share the same typeable HH:MM input row — re-seed\n    // the input fields, clear any prior error state, and focus the\n    // hour input with its contents selected so the next keystroke\n    // replaces the seeded value (the buffer is already at maxLength,\n    // so a caret at the end would swallow the first keystroke).\n    this.selecting = 'hour';\n    this.hourInputValue = String(this.displayHour);\n    this.minuteInputValue = String(this.draftMinutes).padStart(2, '0');\n    this.hourInputError = false;\n    this.minuteInputError = false;\n    this.hourInputSeeded = false;\n    this.minuteInputSeeded = false;\n    requestAnimationFrame(() => {\n      this.syncInputFields();\n      this.focusInputSelectingAll(this.hourInputEl);\n    });\n  };\n\n  /** Write current state to the (uncontrolled) input fields. */\n  private syncInputFields() {\n    if (this.hourInputEl) this.hourInputEl.value = String(this.displayHour);\n    if (this.minuteInputEl) this.minuteInputEl.value = String(this.draftMinutes).padStart(2, '0');\n  }\n\n  /**\n   * Bidirectional dial ⇄ input sync: mirror the current draft into the\n   * HH / MM input fields whenever the *dial side* drove the change\n   * (drag, click on a number, AM/PM toggle, etc.). Without this the\n   * input row would silently desync — the user would drag the dial\n   * to 17:45 but the HH/MM fields would keep showing \"03:30\" until\n   * they typed something or blurred.\n   *\n   * Two writes per call site:\n   *\n   *   1. `hourInputValue` / `minuteInputValue` — the `@State` strings\n   *      backing the validator. Updated so that the next blur or\n   *      `Enter` re-validates against the dial-driven value, not the\n   *      stale typed buffer.\n   *\n   *   2. The actual `<input>` DOM nodes (uncontrolled). The input is\n   *      uncontrolled because Stencil's JSX `value=` rebinding would\n   *      yank the caret mid-typing — but that means we have to write\n   *      the value imperatively when the dial drives the change.\n   *\n   * Also clears both error flags: any value coming from the dial is\n   * by construction in range (the dial geometry can't produce hour\n   * 99 or minute 60), so a stale error from a prior bad typed buffer\n   * should not survive a corrective dial drag.\n   *\n   * Caret safety: we write to `.value` only when it actually differs\n   * from the target string, and we never call this from inside the\n   * input-typing handlers — so the user's caret position in the\n   * field they're actively editing is never disturbed.\n   */\n  private syncInputsFromDraft() {\n    const hourStr = String(this.displayHour);\n    const minuteStr = String(this.draftMinutes).padStart(2, '0');\n    this.hourInputValue = hourStr;\n    this.minuteInputValue = minuteStr;\n    this.hourInputError = false;\n    this.minuteInputError = false;\n    if (this.hourInputEl && this.hourInputEl.value !== hourStr) {\n      this.hourInputEl.value = hourStr;\n      // Rewriting the FOCUSED field leaves a collapsed caret in a\n      // maxLength-full buffer (the dial auto-advance focuses MM, then\n      // dial taps rewrite it) — re-select so the next keystroke\n      // replaces instead of being swallowed. Never called from the\n      // typing handlers, so a mid-edit caret is never disturbed.\n      if (MdTimePicker.deepActiveElement() === this.hourInputEl) {\n        this.selectInputContents(this.hourInputEl);\n      }\n    }\n    if (this.minuteInputEl && this.minuteInputEl.value !== minuteStr) {\n      this.minuteInputEl.value = minuteStr;\n      if (MdTimePicker.deepActiveElement() === this.minuteInputEl) {\n        this.selectInputContents(this.minuteInputEl);\n      }\n    }\n  }\n\n  private bindHourInput = (el?: HTMLInputElement | null) => {\n    if (!el) {\n      this.hourInputSeeded = false;\n      this.hourInputEl = undefined;\n      return;\n    }\n    this.hourInputEl = el;\n    if (!this.hourInputSeeded) {\n      el.value = this.hourInputValue;\n      this.hourInputSeeded = true;\n    }\n  };\n\n  private bindMinuteInput = (el?: HTMLInputElement | null) => {\n    if (!el) {\n      this.minuteInputSeeded = false;\n      this.minuteInputEl = undefined;\n      return;\n    }\n    this.minuteInputEl = el;\n    if (!this.minuteInputSeeded) {\n      el.value = this.minuteInputValue;\n      this.minuteInputSeeded = true;\n    }\n  };\n\n  // ───────────────────────────── DIAL INTERACTION ─────────────────────────────\n\n  private dialPointFromEvent(e: PointerEvent) {\n    if (!this.dialEl) return null;\n    const rect = this.dialEl.getBoundingClientRect();\n    const cx = rect.left + rect.width / 2;\n    const cy = rect.top + rect.height / 2;\n    const dx = e.clientX - cx;\n    const dy = e.clientY - cy;\n    const distance = Math.hypot(dx, dy);\n    let angle = Math.atan2(dy, dx) * (180 / Math.PI);\n    angle = (angle + 90 + 360) % 360;\n    return { angle, distance, radius: rect.width / 2 };\n  }\n\n  private applyDialPointer = (e: PointerEvent) => {\n    const pt = this.dialPointFromEvent(e);\n    if (!pt) return;\n    const { angle, distance, radius } = pt;\n\n    if (this.selecting === 'hour') {\n      const idx = Math.round(angle / 30) % 12;\n      if (this.format === '12h') {\n        const displayH = idx === 0 ? 12 : idx;\n        this.setHour24FromDisplay(displayH, this.period);\n      } else {\n        // The midpoint between the inner (0.52r) and outer (0.80r)\n        // number rings — anything closer to the centre than this\n        // threshold is treated as an inner-ring tap (hours 0/13-23).\n        // Keep this in sync with outerRadiusRatio/innerRadiusRatio in\n        // renderDial(): midpoint = (0.52 + 0.80) / 2 = 0.66.\n        const isInner = distance < radius * 0.66;\n        if (isInner) {\n          this.draftHours = idx === 0 ? 0 : 12 + idx;\n        } else {\n          this.draftHours = idx === 0 ? 12 : idx;\n        }\n      }\n    } else {\n      const step = Math.max(1, Math.min(30, this.minuteStep || 1));\n      let raw = Math.round(angle / 6);\n      raw = (Math.round(raw / step) * step) % 60;\n      this.draftMinutes = raw;\n    }\n    // Drag emits `mdInput` continuously, but the de-dupe key\n    // collapses repeats so listeners only see one event per\n    // distinct H/M pair. Cheap enough to call on every pointer\n    // move without throttling.\n    this.emitInputIfChanged();\n    // Mirror the dial-driven draft into the HH/MM input row so the\n    // user sees their drag reflected in the typeable tiles too —\n    // the dial and the inputs share a single source of truth.\n    this.syncInputsFromDraft();\n  };\n\n  private onDialPointerDown = (e: PointerEvent) => {\n    if (this.isDisabled) return;\n    e.preventDefault();\n    this.isDragging = true;\n    (e.currentTarget as Element)?.setPointerCapture?.(e.pointerId);\n    this.applyDialPointer(e);\n  };\n\n  private onDialPointerMove = (e: PointerEvent) => {\n    if (!this.isDragging) return;\n    this.applyDialPointer(e);\n  };\n\n  private onDialPointerUp = (e: PointerEvent) => {\n    if (!this.isDragging) return;\n    this.isDragging = false;\n    (e.currentTarget as Element)?.releasePointerCapture?.(e.pointerId);\n    if (this.selecting === 'hour') {\n      this.selecting = 'minute';\n      // After the user commits an hour by releasing a dial drag,\n      // push keyboard focus to the MM input so they can either keep\n      // dragging the (now-minute) dial OR start typing the minute\n      // value without first clicking into the field. The MM input's\n      // `onFocus` would also call `setSelecting('minute')`, but\n      // `selecting` was already flipped above — this is purely\n      // about getting the caret into the right field.\n      //\n      // Deferred to the next frame because (a) the minute input\n      // needs to render in its newly-active state first (the\n      // `--active` class drives focus-visible styling), and (b)\n      // focusing mid-pointerup races the browser's own focus\n      // restoration on some platforms.\n      requestAnimationFrame(() => {\n        this.focusInputSelectingAll(this.minuteInputEl);\n      });\n    }\n  };\n\n  // ───────────────────────────── KEYBOARD ─────────────────────────────\n\n  private onHostKeyDown = (e: KeyboardEvent) => {\n    if (!this.isOpen) return;\n    if (e.key === 'Escape') {\n      e.preventDefault();\n      e.stopPropagation();\n      this.cancel();\n    }\n  };\n\n  // ───────────────────────────── INPUT MODE ─────────────────────────────\n\n  /**\n   * Apply the current `hourInputValue` / `minuteInputValue` buffers to\n   * the live draft (so the dial hand tracks typing in real time) and\n   * flag invalid buffers as errors.\n   *\n   * `scope` tells the validator which field(s) the user just touched,\n   * so we only re-flag the field the user is actively editing instead\n   * of painting both fields red when only one was just typed into:\n   *\n   *   • `'hour'`   — fired from `onHourInput`.   Only the HH field's\n   *     error flag is rewritten (set OR cleared). MM's error sticks\n   *     until MM itself is edited or the input is blurred.\n   *   • `'minute'` — fired from `onMinuteInput`. Symmetric mirror.\n   *   • `'both'`   — fired from blur / Enter / OK. Both fields are\n   *     re-validated together so the form is \"final-state\" correct\n   *     before committing (or before refusing to commit).\n   *\n   * In *all* call sites a valid (H, M) pair commits to the draft and\n   * emits `mdInput`. The `emitInputIfChanged` filter handles the\n   * common case where mid-keystroke commits and the blur commit\n   * resolve to the same final value (only one emit reaches listeners).\n   *\n   * Note on the dial: if the buffer is mid-typing-invalid (e.g. the\n   * user has typed \"5\" → \"50\" and is on their way to \"55\"), the\n   * draft does NOT update — the dial hand intentionally HOLDS at the\n   * previous valid value so the hand doesn't jitter into nonsense\n   * positions between keystrokes. The error flag still updates\n   * synchronously per the scope rules above.\n   */\n  private applyInputsToDraft(scope: 'hour' | 'minute' | 'both'): boolean {\n    const h = parseInt(this.hourInputValue, 10);\n    const m = parseInt(this.minuteInputValue, 10);\n    const minH = this.format === '24h' ? 0 : 1;\n    const maxH = this.format === '24h' ? 23 : 12;\n    const hValid = !isNaN(h) && h >= minH && h <= maxH;\n    const mValid = !isNaN(m) && m >= 0 && m <= 59;\n    if (scope === 'hour' || scope === 'both') this.hourInputError = !hValid;\n    if (scope === 'minute' || scope === 'both') this.minuteInputError = !mValid;\n    if (hValid && mValid) {\n      this.draftMinutes = m;\n      this.setHour24FromDisplay(h, this.period);\n      this.emitInputIfChanged();\n      return true;\n    }\n    return false;\n  }\n\n  private commitInputs = () => {\n    this.applyInputsToDraft('both');\n  };\n\n  private onHourInput = (e: Event) => {\n    const el = e.target as HTMLInputElement;\n    const v = el.value.replace(/\\D/g, '').slice(0, 2);\n    if (el.value !== v) el.value = v;\n    this.hourInputValue = v;\n    // Live: flag the HH field immediately if the buffer is out of\n    // range, AND commit to the draft (which moves the dial hand) if\n    // BOTH HH and MM parse cleanly. We never touch the MM error flag\n    // here — only HH was just edited.\n    this.applyInputsToDraft('hour');\n  };\n\n  private onMinuteInput = (e: Event) => {\n    const el = e.target as HTMLInputElement;\n    const v = el.value.replace(/\\D/g, '').slice(0, 2);\n    if (el.value !== v) el.value = v;\n    this.minuteInputValue = v;\n    this.applyInputsToDraft('minute');\n  };\n\n  private onHourBlur = () => {\n    if (this.hourInputEl) this.hourInputValue = this.hourInputEl.value;\n    this.commitInputs();\n    // Canonicalize the display ONLY when the buffer actually round-trips\n    // to the draft. When this field is valid but the sibling errors, the\n    // both-valid gate in applyInputsToDraft left the draft stale —\n    // rewriting from the draft here would silently destroy the user's\n    // typed value (they typed \"7\", the field would snap back to \"10\").\n    if (!this.hourInputError && parseInt(this.hourInputValue, 10) === this.displayHour) {\n      this.hourInputValue = String(this.displayHour);\n      if (this.hourInputEl) this.hourInputEl.value = this.hourInputValue;\n    }\n  };\n\n  private onMinuteBlur = () => {\n    if (this.minuteInputEl) this.minuteInputValue = this.minuteInputEl.value;\n    this.commitInputs();\n    // Same sibling-error guard as onHourBlur: only pad/canonicalize a\n    // buffer that was actually applied to the draft.\n    if (!this.minuteInputError && parseInt(this.minuteInputValue, 10) === this.draftMinutes) {\n      this.minuteInputValue = String(this.draftMinutes).padStart(2, '0');\n      if (this.minuteInputEl) this.minuteInputEl.value = this.minuteInputValue;\n    }\n  };\n\n  /**\n   * Apply a signed delta (in \"ticks\" — 1 hour / 1 minute step) to the\n   * currently-focused HH or MM input. Mirrors the keyboard increment\n   * pattern of the native `<input type=\"time\">` and the WAI-ARIA\n   * spinbutton pattern, so screen-reader users on Win+NVDA who hear\n   * the input announced and press the standard Up arrow get the\n   * expected behaviour.\n   *\n   * Wrap rules:\n   *   • HH 24h     — wraps 23↔0 cyclically.\n   *   • HH 12h     — wraps in display-hour space (1..12) so going up\n   *                   from \"12\" lands on \"1\" with period UNCHANGED.\n   *                   Users flip AM/PM with the dedicated pill (or\n   *                   ArrowUp/Down on that pill); the hour cycler\n   *                   doesn't fight them by flipping period under\n   *                   them on every wrap.\n   *   • MM         — wraps mod 60 in steps of `minuteStep` (snapping\n   *                   the current value to the nearest step first so\n   *                   an off-step value typed manually still moves\n   *                   cleanly on the next arrow press).\n   *\n   * After the update we re-render the visible input string, clear\n   * the field's error flag (the new value is definitionally valid),\n   * emit `mdInput` via the de-duping channel, and reselect the\n   * input's text so the next arrow press operates on the field\n   * (instead of moving the caret within the now-visible digits).\n   */\n  /** Spinbutton \"current value\": prefer the visible valid buffer — it\n   *  can be valid-but-unapplied while the SIBLING field errors (the\n   *  both-valid gate holds the draft) — falling back to the draft.\n   *  Feeds aria-valuenow and the ArrowUp/Down base so what the user\n   *  sees is always what gets announced and incremented. */\n  private get hourValueNow(): number {\n    const b = parseInt(this.hourInputValue, 10);\n    return Number.isNaN(b) ? this.displayHour : b;\n  }\n\n  private get minuteValueNow(): number {\n    const b = parseInt(this.minuteInputValue, 10);\n    return Number.isNaN(b) ? this.draftMinutes : b;\n  }\n\n  private bumpFocusedInput(direction: 1 | -1, target: 'hour' | 'minute') {\n    if (target === 'hour') {\n      const base = this.hourInputError ? this.displayHour : this.hourValueNow;\n      if (this.format === '24h') {\n        this.draftHours = ((base + direction) % 24 + 24) % 24;\n      } else {\n        // Cycle the DISPLAY hour 1..12 so the wrap from 12→1 / 1→12\n        // preserves whichever period the user is currently in.\n        const current = base;\n        let next = current + direction;\n        if (next > 12) next = 1;\n        else if (next < 1) next = 12;\n        this.setHour24FromDisplay(next, this.period);\n      }\n      this.hourInputError = false;\n      this.hourInputValue = String(this.displayHour);\n      if (this.hourInputEl) {\n        this.hourInputEl.value = this.hourInputValue;\n        this.selectInputContents(this.hourInputEl);\n      }\n    } else {\n      const step = Math.max(1, Math.min(30, this.minuteStep || 1));\n      // Snap the current value to the step grid before bumping, so a\n      // 1-min stray (e.g. typed \"07\" with step=5) still produces a\n      // clean next-step value (\"10\") rather than \"12\".\n      const minuteBase = this.minuteInputError ? this.draftMinutes : this.minuteValueNow;\n      const snapped = Math.round(minuteBase / step) * step;\n      this.draftMinutes = ((snapped + direction * step) % 60 + 60) % 60;\n      this.minuteInputError = false;\n      this.minuteInputValue = String(this.draftMinutes).padStart(2, '0');\n      if (this.minuteInputEl) {\n        this.minuteInputEl.value = this.minuteInputValue;\n        this.selectInputContents(this.minuteInputEl);\n      }\n    }\n    this.emitInputIfChanged();\n  }\n\n  /**\n   * Re-select the input's contents so the next arrow press operates\n   * on the field as a whole (instead of moving the caret within the\n   * now-visible digits).\n   *\n   * Wrapped in a feature-detect + try/catch so spec environments\n   * whose mock `HTMLInputElement` doesn't implement `select()` (e.g.\n   * Stencil's mock-doc) don't throw out of the keydown handler and\n   * skip the subsequent `emitInputIfChanged()` call. In real browsers\n   * `select()` always exists; the guard is a no-op cost.\n   */\n  private selectInputContents(el: HTMLInputElement) {\n    if (typeof el.select !== 'function') return;\n    try { el.select(); } catch { /* DOM not focusable yet — non-fatal */ }\n  }\n\n  private onInputKeyDown = (e: KeyboardEvent) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      if (this.hourInputEl) this.hourInputValue = this.hourInputEl.value;\n      if (this.minuteInputEl) this.minuteInputValue = this.minuteInputEl.value;\n      this.confirm();\n      return;\n    }\n    // ArrowUp / ArrowDown increment / decrement the focused field.\n    // The dial hand follows along because both HH/MM inputs and the\n    // dial are bound to the same `draftHours` / `draftMinutes` state.\n    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n      // Identify which input fired this event. Using the event target\n      // (rather than `this.selecting`) keeps the handler correct even\n      // if the active-input class lags behind focus by a render\n      // (e.g. mid-tab transitions).\n      const target = e.target as HTMLElement | null;\n      const isHour =\n        target === this.hourInputEl ||\n        target?.classList?.contains('md-time-picker__input-hour') === true;\n      const isMinute =\n        target === this.minuteInputEl ||\n        target?.classList?.contains('md-time-picker__input-minute') === true;\n      if (!isHour && !isMinute) return;\n      // preventDefault stops the browser from jumping the text caret\n      // to start/end of the input, which would otherwise visually\n      // compete with the .select() the bumper performs.\n      e.preventDefault();\n      this.bumpFocusedInput(e.key === 'ArrowUp' ? 1 : -1, isHour ? 'hour' : 'minute');\n    }\n  };\n\n  // ───────────────────────────── RENDER HELPERS ─────────────────────────────\n\n  /**\n   * Renders the trigger as a real `md-text-field` (outlined, read-only).\n   * Composing the canonical field gets us the M3 notched outline, the\n   * floating-label animation, hover/focus/disabled visual states, and\n   * density / a11y plumbing for free — none of which the legacy custom\n   * button could match without re-implementing the whole text-field spec.\n   *\n   * The text-field is read-only so users can't type free text into a time\n   * trigger, but Tab still focuses it (matching the standard pattern for\n   * pickers that wrap an input). Click and Enter/Space open the dialog.\n   */\n  private renderTrigger() {\n    if (this.hideTrigger) return null;\n    const display = this.committedValue\n      ? this.formatDisplayTime(this.committedHours, this.committedMinutes)\n      : '';\n    const a11yLabel = display ? `${this.label}, ${display}` : this.label;\n    return (\n      <md-text-field\n        class={{\n          'md-time-picker__field': true,\n          'md-time-picker__field--disabled': this.isDisabled,\n          'md-time-picker__field--filled': !!display,\n          'md-time-picker__field--open': this.isOpen,\n        }}\n        variant=\"outlined\"\n        readOnly\n        label={this.label}\n        value={display}\n        disabled={this.isDisabled}\n        required={this.required}\n        part=\"trigger\"\n        aria-haspopup=\"dialog\"\n        aria-expanded={String(this.isOpen)}\n        aria-label={a11yLabel}\n        appearFocused={this.isOpen}\n        ref={(el?: HTMLMdTextFieldElement) => {\n          this.triggerFieldEl = el;\n        }}\n        onClick={this.onTriggerClick}\n        onKeyDown={this.onTriggerKeyDown}\n      >\n        <span\n          slot=\"leading-icon\"\n          class=\"md-time-picker__field-icon material-symbols-outlined\"\n          part=\"trigger-icon\"\n          aria-hidden=\"true\"\n        >\n          schedule\n        </span>\n      </md-text-field>\n    );\n  }\n\n  private onTriggerClick = (e: MouseEvent) => {\n    if (this.isDisabled) return;\n    e.preventDefault();\n    this.openPicker();\n  };\n\n  private onTriggerKeyDown = (e: KeyboardEvent) => {\n    if (this.isDisabled) return;\n    if (e.key === 'Enter' || e.key === ' ' || e.key === 'Spacebar') {\n      e.preventDefault();\n      e.stopPropagation();\n      this.openPicker();\n    }\n  };\n\n  /**\n   * Resolves the AM/PM pill layout used at render time. Returns the\n   * 216×38 horizontal pill whenever the dialog itself is horizontal\n   * (because the 52×80 vertical pill would have to share the left\n   * column with HH:MM and AM/PM and the spec arrangement doesn't\n   * accommodate that). Otherwise the author's explicit\n   * `period-layout` prop wins.\n   *\n   * Centralising this in a getter means every site that branches on\n   * AM/PM layout (renderInputs, renderDialog, period CSS modifier)\n   * stays in sync if the orientation flips at runtime.\n   */\n  private get effectivePeriodLayout(): MdTimePickerPeriodLayout {\n    // Input variant: spec sheet (m3.material.io/components/time-pickers/\n    // specs#input) shows the AM/PM toggle as a 52×72 vertical stack\n    // inline-end of MM, never as the 216×38 horizontal pill. We force\n    // vertical here so authors can keep their `period-layout=\"horizontal\"`\n    // preference for dial mode without breaking the input layout.\n    if (this.mode === 'input') return 'vertical';\n    // Horizontal dial dialog: the 52×80 vertical pill cannot share the\n    // left column with HH:MM cleanly, so we coerce the 216×38 pill.\n    if (this.effectiveOrientation === 'horizontal' && this.mode === 'dial') return 'horizontal';\n    return this.periodLayout;\n  }\n\n  /* ── Adaptive layout policy ──\n     The MD3 spec says the picker should \"swap between orientation\n     or variant depending on device orientation and viewport\n     constraints\" so the dial never has to scroll. These two\n     getters centralise that decision so every render path\n     (renderDialog, renderPeriodToggle, the @Watch handlers, the\n     CSS-class branches) reads from a single source of truth.\n\n     Thresholds — picked off the canonical MD3 reference and our\n     own dialog math:\n\n       • `--_adaptive-min-dial-height` (460dp): the dial dialog is\n         the headline (~32dp) + HH:MM tile row (80dp) + dial\n         (256dp) + footer (~48dp) + 2 × 24dp padding ≈ 440dp.\n         Add the 24dp scrim padding and 460dp is the smallest\n         viewport that fits the picker without scroll.\n       • `--_adaptive-landscape-width` (720dp): the 12-hour\n         horizontal dialog is 572dp wide and 24-hour is 608dp. With\n         24dp scrim padding either side we need at least ~656dp;\n         720dp gives the dialog comfortable breathing room.\n\n     The author's prop values are honored unless the viewport\n     literally cannot fit them. `responsive=false` skips the entire\n     policy and respects props verbatim. */\n  private static readonly ADAPTIVE_MIN_DIAL_HEIGHT = 460;\n  private static readonly ADAPTIVE_LANDSCAPE_WIDTH = 720;\n  /* Demotion threshold for an explicit `orientation=\"horizontal\"`:\n     the 12h landscape dialog is 572dp wide (608dp for 24h) + 2×24dp\n     scrim padding ≈ 620/656dp. Below 620px the horizontal layout\n     cannot fit even the narrower 12h dialog, so the responsive\n     policy falls back to the vertical portrait dialog. Deliberately\n     lower than ADAPTIVE_LANDSCAPE_WIDTH (720) so there's a hysteresis\n     band where an author preference is honored but never auto-promoted. */\n  private static readonly ADAPTIVE_DEMOTE_WIDTH = 620;\n\n  private get effectiveVariant(): MdTimePickerMode {\n    if (!this.responsive) return this.variant;\n    if (!this.viewportHeight) return this.variant;\n    // Vertical real estate too small for the 256dp dial → fall\n    // back to input even if the author asked for `dial`.\n    if (this.viewportHeight < MdTimePicker.ADAPTIVE_MIN_DIAL_HEIGHT) return 'input';\n    return this.variant;\n  }\n\n  private get effectiveOrientation(): MdTimePickerOrientation {\n    if (!this.responsive) return this.orientation;\n    if (!this.viewportWidth || !this.viewportHeight) return this.orientation;\n    // Landscape promotion/demotion only applies while the DIAL is the\n    // rendered mode — gate on `this.mode` (what renderDialog uses), not\n    // the variant preference: a user who toggles variant=\"input\" into\n    // dial mode must still get the demotion on narrow viewports.\n    if (this.mode !== 'dial') return this.orientation;\n    // Promote vertical → horizontal when the viewport is wide\n    // enough AND wider than it is tall. The width gate avoids\n    // promoting on a tall-but-narrow tablet (e.g. unfolded book\n    // mode) where the horizontal dialog would still be cramped.\n    if (\n      this.orientation === 'vertical' &&\n      this.viewportWidth >= MdTimePicker.ADAPTIVE_LANDSCAPE_WIDTH &&\n      this.viewportWidth > this.viewportHeight\n    ) {\n      return 'horizontal';\n    }\n    // Demote horizontal → vertical when the viewport cannot fit the\n    // 572/608dp landscape dialog (+ scrim padding) — the symmetric\n    // counterpart of the promotion above. Without it an explicit\n    // `orientation=\"horizontal\"` on a narrow viewport overflowed the\n    // dialog ~196px past the right edge with no scroll access to OK.\n    if (\n      this.orientation === 'horizontal' &&\n      this.viewportWidth < MdTimePicker.ADAPTIVE_DEMOTE_WIDTH\n    ) {\n      return 'vertical';\n    }\n    return this.orientation;\n  }\n\n  private renderPeriodToggle() {\n    const current = this.period;\n    // Same effective-layout resolution as renderInputs — when the\n    // dialog is horizontal we override the prop to \"horizontal\" so the\n    // pill stretches across the left column instead of stacking next\n    // to MM as a 52×80 vertical pill.\n    const horizontal = this.effectivePeriodLayout === 'horizontal';\n    return (\n      <div\n        class={{\n          'md-time-picker__period': true,\n          'md-time-picker__period--vertical': !horizontal,\n          'md-time-picker__period--horizontal': horizontal,\n        }}\n        role=\"radiogroup\"\n        aria-label={this.periodLabel}\n        aria-orientation={horizontal ? 'horizontal' : 'vertical'}\n        onKeyDown={this.onPeriodKeyDown}\n        part=\"period-toggle\"\n      >\n        <button\n          type=\"button\"\n          class={{\n            'md-time-picker__period-btn': true,\n            'md-time-picker__period-btn--am': true,\n            'md-time-picker__period-btn--active': current === 'AM',\n          }}\n          role=\"radio\"\n          aria-checked={String(current === 'AM')}\n          tabindex={current === 'AM' ? 0 : -1}\n          onClick={() => this.togglePeriod('AM')}\n          part=\"period-am\"\n        >\n          <md-ripple disabled={this.isDisabled} part=\"period-am-ripple\"></md-ripple>\n          <span class=\"md-time-picker__period-btn-label\">{this.amLabel}</span>\n        </button>\n        <button\n          type=\"button\"\n          class={{\n            'md-time-picker__period-btn': true,\n            'md-time-picker__period-btn--pm': true,\n            'md-time-picker__period-btn--active': current === 'PM',\n          }}\n          role=\"radio\"\n          aria-checked={String(current === 'PM')}\n          tabindex={current === 'PM' ? 0 : -1}\n          onClick={() => this.togglePeriod('PM')}\n          part=\"period-pm\"\n        >\n          <md-ripple disabled={this.isDisabled} part=\"period-pm-ripple\"></md-ripple>\n          <span class=\"md-time-picker__period-btn-label\">{this.pmLabel}</span>\n        </button>\n      </div>\n    );\n  }\n\n  /**\n   * Maintains a per-mode cumulative rotation so successive renders feed\n   * CSS the shortest signed delta from the previous frame. Without this\n   * the hand visibly snaps backward whenever the value crosses zero\n   * (minute 59 → 00, hour 23 → 00 in 24h, hour 12 → 1 in 12h, …).\n   *\n   * Math: project `raw - last` into the half-open interval [-180°, +180°)\n   * using the trick `((d % 360) + 540) % 360 - 180`. Add that delta to\n   * the running total — the result is monotonic across boundaries.\n   *\n   * Re-seed when the dial mode flips (hour ↔ minute) or when the picker\n   * just opened (`lastHandMode === null`) so the first paint of a fresh\n   * dial doesn't animate in from a stale unwrapped angle.\n   */\n  private advanceHandAngle(mode: MdTimePickerSelection, raw: number): number {\n    if (this.lastHandMode !== mode) {\n      this.lastHandMode = mode;\n      if (mode === 'hour') {\n        this.hourCumulativeAngle = raw;\n        return raw;\n      }\n      this.minuteCumulativeAngle = raw;\n      return raw;\n    }\n    const last = mode === 'hour' ? this.hourCumulativeAngle : this.minuteCumulativeAngle;\n    const delta = (((raw - last) % 360) + 540) % 360 - 180;\n    const next = last + delta;\n    if (mode === 'hour') this.hourCumulativeAngle = next;\n    else this.minuteCumulativeAngle = next;\n    return next;\n  }\n\n  private renderDial() {\n    const isHour = this.selecting === 'hour';\n    const radius = 50;\n    // Number-ring radii expressed as a fraction of the half-dial radius\n    // (128dp on a 256dp dial). Two competing constraints:\n    //   1) The OUTER handle must hug the dial circle (~1–2dp clear).\n    //   2) The INNER handle must not engulf outer-ring numbers.\n    //\n    // With a 48dp handle (24dp radius), constraint #2 requires\n    //   outer_center − (inner_center + 24dp) ≥ ~10dp\n    // ⇒ inner ≤ (outer × 128 − 24 − 10) / 128 = outer − 0.266r\n    // With outer = 0.80r, that caps inner at ~0.534r.\n    //\n    // Current values (verified by E2E):\n    //   outer ring center  = 0.80  →  102.4dp from dial centre\n    //   handle outer edge  = 102.4 + 24 = 126.4dp\n    //   dial radius        = 128dp\n    //   clearance to edge  = ~1.6dp (handle hugs the dial) ✓\n    //\n    //   inner 24h ring     = 0.52  →  66.56dp from dial centre\n    //   inner-handle outer = 66.56 + 24 = 90.56dp\n    //   gap to outer ring  = 102.4 − 90.56 = 11.84dp ✓\n    //   gap to centre dot  = 66.56 − 4 = 62.56dp ✓\n    //\n    // History — the iteration trail that landed here:\n    //   0.82 / 0.62 → outer handle 1dp PAST dial edge (overflow)\n    //   0.75 / 0.50 → outer handle 8dp away (\"too inside\")\n    //   0.80 / 0.55 → outer good, inner-handle engulfed outer numbers\n    //                 (only 8dp clearance between rings)\n    //   0.80 / 0.50 → safe but the inner ring felt \"too inner\" — the\n    //                 empty centre was visually dominant\n    //   0.80 / 0.52 → inner pushed outward by ~4% while keeping\n    //                 11.84dp clearance to the outer ring\n    const outerRadiusRatio = 0.8;\n    const innerRadiusRatio = 0.52;\n\n    // ── Hand angle (wrapped 0–360°) ──\n    let rawAngle = 0;\n    let handLengthRatio = outerRadiusRatio;\n    if (isHour) {\n      if (this.format === '12h') {\n        const idx = this.displayHour === 12 ? 0 : this.displayHour;\n        rawAngle = idx * 30;\n      } else {\n        const h = this.draftHours;\n        if (h === 0) {\n          rawAngle = 0;\n          handLengthRatio = innerRadiusRatio;\n        } else if (h >= 1 && h <= 12) {\n          rawAngle = (h === 12 ? 0 : h) * 30;\n        } else {\n          rawAngle = (h - 12) * 30;\n          handLengthRatio = innerRadiusRatio;\n        }\n      }\n    } else {\n      rawAngle = this.draftMinutes * 6;\n    }\n\n    // ── Smooth wrap across 0/360 ──\n    // CSS `transition: transform` interpolates between literal degree\n    // values, so feeding it `rotate(354deg) → rotate(0deg)` unwinds the\n    // hand backward by -354°. We compute the shortest signed delta\n    // (within [-180°, +180°)) from the previous unwrapped angle and add\n    // it to the running total; the consumer hand keeps spinning the\n    // natural direction even as the value crosses the 0-hour or\n    // 0-minute boundary.\n    const handAngle = this.advanceHandAngle(isHour ? 'hour' : 'minute', rawAngle);\n\n    return (\n      <div\n        class=\"md-time-picker__dial-wrap\"\n        part=\"dial-wrap\"\n      >\n        <div\n          class={{\n            'md-time-picker__dial': true,\n            'md-time-picker__dial--minute': !isHour,\n            'md-time-picker__dial--24h-hour': isHour && this.format === '24h',\n          }}\n          ref={(el) => (this.dialEl = el as HTMLDivElement)}\n          onPointerDown={this.onDialPointerDown}\n          onPointerMove={this.onDialPointerMove}\n          onPointerUp={this.onDialPointerUp}\n          onPointerCancel={this.onDialPointerUp}\n          role=\"presentation\"\n          part=\"dial\"\n        >\n          <div\n            class=\"md-time-picker__dial-hand\"\n            style={{\n              transform: `rotate(${handAngle}deg)`,\n              /* Private var — the PUBLIC `--md-time-picker-hand-length`\n                 token must stay author-settable, so CSS resolves\n                 `var(--md-time-picker-hand-length, var(--_hand-length-dynamic))`.\n                 Writing the public name here would shadow any author\n                 value on the host (element-level inline always wins). */\n              ['--_hand-length-dynamic' as any]: `${handLengthRatio * 100}%`,\n            }}\n            aria-hidden=\"true\"\n            part=\"dial-hand\"\n          >\n            <span class=\"md-time-picker__dial-hand-dot\" aria-hidden=\"true\"></span>\n            <span class=\"md-time-picker__dial-hand-line\" aria-hidden=\"true\"></span>\n            <span class=\"md-time-picker__dial-hand-tip\" aria-hidden=\"true\"></span>\n          </div>\n          <span class=\"md-time-picker__dial-center\" aria-hidden=\"true\"></span>\n          {isHour\n            ? this.renderHourNumbers(radius, outerRadiusRatio, innerRadiusRatio)\n            : this.renderMinuteNumbers(radius, outerRadiusRatio)}\n        </div>\n      </div>\n    );\n  }\n\n  private renderHourNumbers(radius: number, outerRatio: number, innerRatio: number) {\n    const numbers: { label: string; angle: number; inner: boolean; value: number }[] = [];\n    if (this.format === '12h') {\n      for (let i = 0; i < 12; i++) {\n        const label = i === 0 ? '12' : String(i);\n        numbers.push({ label, angle: i * 30, inner: false, value: i === 0 ? 12 : i });\n      }\n    } else {\n      for (let i = 0; i < 12; i++) {\n        const label = i === 0 ? '12' : String(i);\n        numbers.push({ label, angle: i * 30, inner: false, value: i === 0 ? 12 : i });\n      }\n      for (let i = 0; i < 12; i++) {\n        const label = i === 0 ? '00' : String(12 + i);\n        numbers.push({ label, angle: i * 30, inner: true, value: i === 0 ? 0 : 12 + i });\n      }\n    }\n\n    return numbers.map((n) => this.renderDialNumber(n.label, n.angle, n.inner, this.isHourActive(n.value), radius, outerRatio, innerRatio, n.value));\n  }\n\n  private isHourActive(h: number) {\n    if (this.format === '12h') {\n      return this.displayHour === h;\n    }\n    return this.draftHours === h;\n  }\n\n  private renderMinuteNumbers(radius: number, outerRatio: number) {\n    const items: { label: string; angle: number; value: number }[] = [];\n    for (let i = 0; i < 12; i++) {\n      const minute = i * 5;\n      items.push({ label: String(minute).padStart(2, '0'), angle: minute * 6, value: minute });\n    }\n    return items.map((n) =>\n      // Minutes only ever live on the outer ring — feed the outerRatio\n      // into both `outerRatio` and `innerRatio` so the value is unused.\n      this.renderDialNumber(n.label, n.angle, false, this.draftMinutes === n.value, radius, outerRatio, outerRatio, n.value),\n    );\n  }\n\n  private renderDialNumber(\n    label: string,\n    angle: number,\n    inner: boolean,\n    active: boolean,\n    radius: number,\n    outerRatio: number,\n    innerRatio: number,\n    value: number,\n  ) {\n    // Number placement MUST agree with `renderDial`'s hand length so the\n    // 48dp handle visually overlaps the selected number rather than\n    // floating past it. Both ratios are sourced from the single pair\n    // declared in renderDial().\n    const r = inner ? radius * innerRatio : radius * outerRatio;\n    const rad = ((angle - 90) * Math.PI) / 180;\n    const x = 50 + (Math.cos(rad) * r);\n    const y = 50 + (Math.sin(rad) * r);\n    // PHYSICAL `left` / `top` — not the logical `inset-inline-start`\n    // pair we use for content flow. A clock dial is a geometric\n    // shape, not a text layout: in every locale, the numbers go\n    // clockwise from 12 at the top (real wristwatches don't have an\n    // RTL variant, and the MD3 spec dial mirrors that — Google's\n    // Material Components Android implementation positions numbers\n    // physically and never flips for RTL). Pairing physical\n    // positioning here with the hand's physical `transform: rotate`\n    // keeps the handle visually centred on the active number in\n    // both LTR and RTL contexts.\n    //\n    // We intentionally side-step the logical-properties rule of this\n    // codebase for these two declarations because the dial is the\n    // exception called out in the same rule\n    // (\"RTL Icon Mirroring … Icons that imply direction mirror —\n    // clock-face geometry does not\").\n    return (\n      <span\n        class={{\n          'md-time-picker__dial-number': true,\n          'md-time-picker__dial-number--inner': inner,\n          'md-time-picker__dial-number--active': active,\n        }}\n        style={{\n          left: `${x}%`,\n          top: `${y}%`,\n        }}\n        data-value={String(value)}\n        aria-hidden=\"true\"\n      >\n        {label}\n      </span>\n    );\n  }\n\n  /**\n   * Renders the typeable HH:MM headline tile row that's shared by\n   * BOTH the dial and input variants. In dial mode the dial-face\n   * still renders below; in input mode this is the entire body.\n   *\n   * `inlinePeriod` controls whether the 12-hour AM/PM toggle gets\n   * placed inline in the same row as MM (its default — matches the\n   * input variant and the dial variant's vertical orientation), or\n   * is suppressed so the dialog can render the 216×38 horizontal\n   * pill as a separate row below (dial variant + horizontal\n   * landscape orientation). The horizontal toggle is rendered by\n   * the caller in that case.\n   *\n   * The two `<input>` fields expose `input-hour` / `input-minute`\n   * parts. The legacy `hour-display` / `minute-display` parts —\n   * which used to identify the read-only `<button role=\"spinbutton\">`\n   * tiles in dial mode — were removed when both variants unified\n   * around the typeable input row. Consumers that styled the old\n   * parts should migrate to the new names.\n   */\n  private renderInputs(inlinePeriod: boolean = true) {\n    const isHour = this.selecting === 'hour';\n    return (\n      <div class=\"md-time-picker__input-area\" part=\"input-area\">\n        <div class=\"md-time-picker__input-time\">\n          <div class=\"md-time-picker__input-group\">\n            <input\n              type=\"text\"\n              inputmode=\"numeric\"\n              autocomplete=\"off\"\n              class={{\n                'md-time-picker__input': true,\n                'md-time-picker__input-hour': true,\n                'md-time-picker__input--active': isHour,\n                'md-time-picker__input--error': this.hourInputError,\n              }}\n              maxLength={2}\n              ref={this.bindHourInput}\n              /* WAI-ARIA spinbutton: the field cycles via ArrowUp/Down\n                 (bumpFocusedInput), so expose the numeric range + current\n                 value. aria-valuenow is omitted while the typed buffer is\n                 invalid — the current value is genuinely unknown then. */\n              role=\"spinbutton\"\n              aria-valuemin={this.format === '24h' ? 0 : 1}\n              aria-valuemax={this.format === '24h' ? 23 : 12}\n              aria-valuenow={this.hourInputError ? undefined : this.hourValueNow}\n              aria-label={this.hourLabel}\n              aria-invalid={String(this.hourInputError)}\n              onInput={this.onHourInput}\n              onFocus={() => this.setSelecting('hour')}\n              onBlur={this.onHourBlur}\n              onKeyDown={this.onInputKeyDown}\n              part=\"input-hour\"\n            />\n            <span class=\"md-time-picker__input-hint\">{this.hourLabel}</span>\n          </div>\n          <span class=\"md-time-picker__input-separator\" aria-hidden=\"true\">:</span>\n          <div class=\"md-time-picker__input-group\">\n            <input\n              type=\"text\"\n              inputmode=\"numeric\"\n              autocomplete=\"off\"\n              class={{\n                'md-time-picker__input': true,\n                'md-time-picker__input-minute': true,\n                'md-time-picker__input--active': !isHour,\n                'md-time-picker__input--error': this.minuteInputError,\n              }}\n              maxLength={2}\n              ref={this.bindMinuteInput}\n              role=\"spinbutton\"\n              aria-valuemin={0}\n              aria-valuemax={59}\n              aria-valuenow={this.minuteInputError ? undefined : this.minuteValueNow}\n              aria-label={this.minuteLabel}\n              aria-invalid={String(this.minuteInputError)}\n              onInput={this.onMinuteInput}\n              onFocus={() => this.setSelecting('minute')}\n              onBlur={this.onMinuteBlur}\n              onKeyDown={this.onInputKeyDown}\n              part=\"input-minute\"\n            />\n            <span class=\"md-time-picker__input-hint\">{this.minuteLabel}</span>\n          </div>\n          {/* In both variants the 12h AM/PM toggle defaults to the\n              52×72 (input) / 52×80 (dial) vertical pill stacked next\n              to MM. The only exception is the dial variant's\n              horizontal landscape dialog — there the left column\n              can't fit a 52×80 pill alongside HH:MM, so we suppress\n              the inline toggle and the caller renders the 216×38\n              horizontal pill as a separate row below. */}\n          {this.format === '12h' && inlinePeriod && this.renderPeriodToggle()}\n        </div>\n      </div>\n    );\n  }\n\n  private renderDialog() {\n    if (!this.isOpen) return null;\n    const isInput = this.mode === 'input';\n    // Horizontal orientation only applies to the dial variant — the\n    // input variant always renders as a compact 328dp portrait dialog\n    // because there's no dial to balance against in the right column.\n    // `effectiveOrientation` factors in the adaptive `responsive`\n    // policy so a vertical preference is auto-promoted to horizontal\n    // on wide viewports per the MD3 adaptive-design guideline.\n    const isHorizontalDialog = !isInput && this.effectiveOrientation === 'horizontal';\n    const effectivePeriodLayout = this.effectivePeriodLayout;\n    const computedHeadline =\n      this.headline || (isInput ? this.headlineInputLabel : this.headlineDialLabel);\n\n    // Both variants share the same typeable HH:MM headline tile\n    // row (rendered by `renderInputs`). In the input variant the\n    // input-area IS the dialog body. In the dial variant we wrap\n    // it in a `time-area` so the horizontal landscape layout can\n    // place the 216×38 AM/PM pill below it as a separate row, and\n    // so consumers / tests targeting `[part=\"time-area\"]` still\n    // resolve a node.\n    //\n    // `inlinePeriod` controls whether the 12-hour AM/PM toggle\n    // renders inline with MM (default — vertical 52dp pill) or\n    // gets suppressed so the horizontal 216×38 pill can render\n    // below the row in landscape dial dialogs.\n    const useHorizontalPeriod =\n      !isInput && this.format === '12h' && effectivePeriodLayout === 'horizontal';\n    const timeArea = isInput ? null : (\n      <div class=\"md-time-picker__time-area\" part=\"time-area\">\n        {this.renderInputs(!useHorizontalPeriod)}\n        {useHorizontalPeriod && this.renderPeriodToggle()}\n      </div>\n    );\n\n    return (\n      <div\n        class=\"md-time-picker__scrim\"\n        part=\"scrim\"\n        onClick={(e) => {\n          if (e.target === e.currentTarget) this.cancel();\n        }}\n      >\n        <div\n          class={{\n            'md-time-picker__dialog': true,\n            'md-time-picker__dialog--dial': !isInput,\n            'md-time-picker__dialog--input': isInput,\n            'md-time-picker__dialog--horizontal': isHorizontalDialog,\n            'md-time-picker__dialog--vertical': !isHorizontalDialog,\n          }}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby={this.headlineId}\n          part=\"dialog\"\n        >\n          <div class=\"md-time-picker__headline\" id={this.headlineId} part=\"headline\">\n            {computedHeadline}\n          </div>\n\n          {/* Polite live region announcing which unit is being selected\n              as the dial auto-advances hour → minute (and on mode\n              toggles the tiles re-seed, changing the announcement\n              context). Uses the localizable hour/minute label props —\n              no hardcoded English. Visually hidden via CSS. */}\n          <span class=\"md-time-picker__sr-status\" aria-live=\"polite\">\n            {this.selecting === 'hour' ? this.hourLabel : this.minuteLabel}\n          </span>\n\n          <div\n            class={{\n              'md-time-picker__body': true,\n              'md-time-picker__body--horizontal': isHorizontalDialog,\n            }}\n            part=\"body\"\n          >\n            {timeArea}\n            {isInput ? this.renderInputs() : this.renderDial()}\n          </div>\n\n          <div class=\"md-time-picker__footer\" part=\"footer\">\n            {/* Compose md-icon-button so the mode toggle inherits the\n                full M3 icon-button system (state layer, focus ring,\n                ripple, density, RTL) without reimplementing it locally. */}\n            <md-icon-button\n              class=\"md-time-picker__toggle-mode\"\n              variant=\"standard\"\n              size=\"sm\"\n              icon={isInput ? 'schedule' : 'keyboard'}\n              aria-label={isInput ? this.toggleDialLabel : this.toggleInputLabel}\n              onMdClick={this.toggleMode}\n              part=\"toggle-mode\"\n            ></md-icon-button>\n            <div class=\"md-time-picker__actions\" part=\"actions\">\n              {/* Cancel / OK use md-button's text variant — the canonical\n                  M3 dialog action style (no container, primary label\n                  color, label-large typography). */}\n              <md-button\n                class=\"md-time-picker__action-btn\"\n                variant=\"text\"\n                size=\"sm\"\n                onMdClick={this.cancel}\n                part=\"cancel-button\"\n              >\n                {this.cancelLabel}\n              </md-button>\n              <md-button\n                class=\"md-time-picker__action-btn md-time-picker__action-btn--primary\"\n                variant=\"text\"\n                size=\"sm\"\n                onMdClick={this.confirm}\n                part=\"confirm-button\"\n              >\n                {this.okLabel}\n              </md-button>\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  // ───────────────────────────── RENDER ─────────────────────────────\n\n  render() {\n    return (\n      <Host\n        class={{\n          'md-time-picker': true,\n          [`md-time-picker--${this.variant}`]: true,\n          [`md-time-picker--format-${this.format}`]: true,\n          'md-time-picker--open': this.isOpen,\n          'md-time-picker--disabled': this.isDisabled,\n        }}\n        onKeyDown={this.onHostKeyDown}\n      >\n        {this.renderTrigger()}\n        {this.renderDialog()}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components-csr/md-toolbar.js

@@ -0,0 +1,2 @@
+import{p as t,H as o,h as e,d as n,t as a}from"./p-bSpXNc5J.js";const r=()=>`:host{--_container-color:var(--md-toolbar-container-color, var(--md-sys-color-surface-container, #F3EDF7));--_icon-color:var(--md-toolbar-icon-color, var(--md-sys-color-on-surface-variant, #49454F));--_shape:var(--md-toolbar-container-shape, 0px);--_height:var(--md-toolbar-container-height, max(48px, calc(64px + var(--md-sys-density-scale, 0) * 4px)));--_padding:var(--md-toolbar-padding, var(--md-sys-spacing-inset-lg, 16px));--_gap:var(--md-toolbar-gap, max(4px, calc(32px + var(--md-sys-density-scale, 0) * 2px)));--_fab-gap:var(--md-toolbar-fab-gap, var(--md-sys-spacing-gap-lg, 16px));display:flex;align-items:center;box-sizing:border-box;color:var(--_icon-color);font-family:var(--md-sys-typescale-label-large-font-family, Roboto, sans-serif)}:host(.md-toolbar--docked){--_gap:var(--md-toolbar-gap, max(4px, calc(32px + var(--md-sys-density-scale, 0) * 2px)));--_padding:var(--md-toolbar-padding, var(--md-sys-spacing-inset-lg, 16px));inline-size:100%;min-block-size:var(--_height);padding-inline:var(--_padding);padding-block-end:env(safe-area-inset-bottom, 0px);background-color:var(--_container-color);border-radius:var(--_shape);box-shadow:var(--md-sys-elevation-2, 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.3));position:sticky;inset-block-end:0;z-index:var(--md-sys-z-index-app-bar, 100);gap:0}:host(.md-toolbar--docked.md-toolbar--align-center){--_gap:var(--md-toolbar-gap, var(--md-sys-spacing-gap-sm, 8px))}:host(.md-toolbar--docked.md-toolbar--align-space-between){--_gap:0px}:host(.md-toolbar--floating){--_shape:var(--md-toolbar-container-shape, var(--md-sys-shape-corner-full, 100px));--_gap:var(--md-toolbar-gap, var(--md-sys-spacing-gap-xs, 4px));--_padding:var(--md-toolbar-padding, var(--md-sys-spacing-inset-sm, 8px));--_fab-gap:var(--md-toolbar-fab-gap, var(--md-sys-spacing-gap-sm, 8px));display:inline-flex;align-items:center;gap:var(--_fab-gap);margin-inline:var(--md-sys-spacing-inset-lg, 16px);padding:0;background-color:transparent;border-radius:0;box-shadow:none}:host(.md-toolbar--floating) .md-toolbar__container{background-color:var(--_container-color);border-radius:var(--_shape);box-shadow:var(--md-sys-elevation-2, 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.3));padding:var(--_padding);box-sizing:border-box;flex:0 1 auto}:host(.md-toolbar--floating:not(.md-toolbar--vertical)){min-block-size:var(--_height)}:host(.md-toolbar--floating:not(.md-toolbar--vertical)) .md-toolbar__container{block-size:var(--_height)}:host(.md-toolbar--floating.md-toolbar--vertical) .md-toolbar__container{block-size:auto;inline-size:100%}:host(.md-toolbar--vertical){flex-direction:column;block-size:auto;inline-size:var(--_height)}:host(.md-toolbar--vertical) .md-toolbar__container{flex-direction:column}:host(.md-toolbar--standard){--_container-color:var(--md-toolbar-container-color, var(--md-sys-color-surface-container, #F3EDF7));--_icon-color:var(--md-toolbar-icon-color, var(--md-sys-color-on-surface-variant, #49454F))}:host(.md-toolbar--vibrant){--_container-color:var(--md-toolbar-container-color, var(--md-sys-color-primary-container, #EADDFF));--_icon-color:var(--md-toolbar-icon-color, var(--md-sys-color-on-surface, #1C1B1F))}.md-toolbar__container{display:flex;align-items:center;gap:var(--_gap);flex:1;min-inline-size:0;flex-wrap:var(--md-toolbar-flex-wrap, nowrap);overflow-x:var(--md-toolbar-overflow-x, visible);scrollbar-width:var(--md-toolbar-scrollbar-width, thin);scroll-padding-inline:var(--_padding)}:host(.md-toolbar--vertical) .md-toolbar__container{overflow-x:visible;overflow-y:var(--md-toolbar-overflow-y, visible);scroll-padding-block:var(--_padding)}:host(.md-toolbar--align-start) .md-toolbar__container{justify-content:flex-start}:host(.md-toolbar--align-center) .md-toolbar__container{justify-content:center}:host(.md-toolbar--align-end) .md-toolbar__container{justify-content:flex-end}:host(.md-toolbar--align-space-between) .md-toolbar__container{justify-content:space-between}.md-toolbar__fab-container{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-inline-start:var(--_fab-gap)}.md-toolbar__fab-container--hidden{display:none}.md-toolbar__fab-container--floating{margin-inline-start:0;margin-block-start:0}::slotted(*){flex-shrink:0}:host(.md-toolbar--standard) ::slotted(md-icon-button.md-icon-button--standard:not(.md-icon-button--selected)),:host(.md-toolbar--standard) ::slotted(md-icon-button.md-icon-button--outlined:not(.md-icon-button--selected)){--md-icon-button-icon-color:var(--md-toolbar-icon-color, var(--md-sys-color-on-surface-variant, #49454F));--md-icon-button-state-layer-color:var(--md-toolbar-icon-color, var(--md-sys-color-on-surface-variant, #49454F))}:host(.md-toolbar--vibrant) ::slotted(md-icon-button.md-icon-button--standard:not(.md-icon-button--selected)),:host(.md-toolbar--vibrant) ::slotted(md-icon-button.md-icon-button--outlined:not(.md-icon-button--selected)){--md-icon-button-icon-color:var(--md-toolbar-icon-color, var(--md-sys-color-on-surface, #1C1B1F));--md-icon-button-state-layer-color:var(--md-toolbar-icon-color, var(--md-sys-color-on-surface, #1C1B1F))}:host(.md-toolbar--vibrant) ::slotted(md-icon-button.md-icon-button--tonal.md-icon-button--toggle:not(.md-icon-button--selected)){--md-icon-button-container-color:var(--md-sys-color-surface-container, #F3EDF7);--md-icon-button-icon-color:var(--md-sys-color-on-surface, #1C1B1F);--md-icon-button-state-layer-color:var(--md-sys-color-on-surface, #1C1B1F)}:host(.md-toolbar--vibrant) ::slotted(md-icon-button.md-icon-button--tonal.md-icon-button--toggle.md-icon-button--selected){--md-icon-button-container-color:var(--md-sys-color-secondary-container, #E8DEF8);--md-icon-button-icon-color:var(--md-sys-color-on-secondary-container, #1E192B);--md-icon-button-state-layer-color:var(--md-sys-color-on-secondary-container, #1E192B)}::slotted([slot="leading"]){margin-inline-end:auto}::slotted([slot="trailing"]){margin-inline-start:auto}:host(.md-toolbar--docked) ::slotted([slot="fab"]){box-shadow:none !important}@media (forced-colors: active){:host(.md-toolbar--docked){border-block-start:1px solid CanvasText}:host(.md-toolbar--floating) .md-toolbar__container{border:1px solid CanvasText}}@media (prefers-reduced-motion: reduce){.md-toolbar__container{scroll-behavior:auto}}:host([density='-1']){--md-sys-density-scale:-1}:host([density='-2']){--md-sys-density-scale:-2}:host([density='-3']){--md-sys-density-scale:-3}:host([density='-4']){--md-sys-density-scale:-4}`;const i=t(class t extends o{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.variant="docked";this.color="standard";this.layout="horizontal";this.alignment="start";this.containerSemantics="toolbar";this.ariaLabelProp="";this.ariaLabelledby="";this.density=0;this.hasFab=false;this.activeItem=null;this.roved=new Map;this.hasLoaded=false;this.rovingFrame=0;this.onHostKeyDown=t=>this.handleKeyDown(t);this.onFocusIn=t=>this.handleFocusIn(t);this.syncFab=()=>{this.hasFab=(this.fabSlot?.assignedElements().length??0)>0};this.syncRoving=()=>{if(typeof requestAnimationFrame!=="function"){this.updateRoving();return}if(this.rovingFrame)return;this.rovingFrame=requestAnimationFrame((()=>{this.rovingFrame=0;this.updateRoving()}))}}onNavPropChange(t,o,e){this.updateRoving()}hasAccessibleName(){return(this.ariaLabelledby??"").trim().length>0||(this.ariaLabelProp??"").trim().length>0}warnGenericNamed(){console.warn('[md-toolbar] `aria-label`/`aria-labelledby` on container-semantics="generic": a generic container cannot be named (ARIA name-prohibited), so assistive tech will ignore it. Use container-semantics="toolbar" if the name matters.')}componentWillLoad(){const t=this.el.getAttribute("aria-label");if(t!==null&&t.trim()==="")this.el.removeAttribute("aria-label")}connectedCallback(){this.el.addEventListener("keydown",this.onHostKeyDown,false);this.el.addEventListener("focusin",this.onFocusIn,false);if(this.hasLoaded)this.setupObservers()}componentDidLoad(){this.hasLoaded=true;this.setupObservers()}disconnectedCallback(){this.el.removeEventListener("keydown",this.onHostKeyDown,false);this.el.removeEventListener("focusin",this.onFocusIn,false);this.teardownObservers();this.clearRoving()}setupObservers(){const t=this.el.shadowRoot;this.fabSlot=t?.querySelector('slot[name="fab"]')??undefined;this.fabSlot?.addEventListener("slotchange",this.syncFab);this.syncFab();t?.querySelectorAll("slot").forEach((t=>t.addEventListener("slotchange",this.syncRoving)));if(typeof MutationObserver!=="undefined"&&!this.slotObserver){this.slotObserver=new MutationObserver(this.syncRoving);this.slotObserver.observe(this.el,{childList:true,subtree:true,attributes:true,attributeFilter:["disabled","aria-disabled","aria-hidden","hidden","class","style","role","type"]})}this.updateRoving()}teardownObservers(){this.fabSlot?.removeEventListener("slotchange",this.syncFab);this.el.shadowRoot?.querySelectorAll("slot").forEach((t=>t.removeEventListener("slotchange",this.syncRoving)));this.slotObserver?.disconnect();this.slotObserver=undefined;if(this.rovingFrame&&typeof cancelAnimationFrame==="function")cancelAnimationFrame(this.rovingFrame);this.rovingFrame=0}async setFocus(){const t=this.getItems();const o=this.activeItem&&t.includes(this.activeItem)?this.activeItem:this.preferredActive(t);o?.focus()}classify(o){if("isContentEditable"in o&&o.isContentEditable)return"independent";if(o.matches(t.COMPOSITE_SELECTOR))return"composite";if(o.matches(t.INDEPENDENT_SELECTOR))return"independent";if(o.matches(t.ROVING_SELECTOR))return"roving";if(o.matches('[tabindex]:not([tabindex^="-"])')){return o.querySelector(t.ANY_CONTROL_SELECTOR)?"wrapper":"roving"}return"wrapper"}optedOut(t){if("groupTabindex"in t)return false;const o=this.roved.get(t);const e=o&&o.kind==="attr"?o.orig:t.getAttribute("tabindex");return e!==null&&e.trim()!==""&&parseInt(e,10)<0}slotOf(t){const o=t.getAttribute("slot");if(o==="leading")return"leading";if(o==="trailing")return"trailing";if(o==="fab")return"fab";return"default"}slotPriority(t){const o=this.slotOf(t);return o==="leading"?0:o==="trailing"?2:o==="fab"?3:1}isVisible(t){const o=t.checkVisibility;if(typeof o==="function")return o.call(t,{checkVisibilityCSS:true});if(typeof getComputedStyle!=="function")return true;const e=getComputedStyle(t);return e.display!=="none"&&e.visibility!=="hidden"&&e.visibility!=="collapse"}ariaHiddenWithin(t){let o=t;while(o&&o!==this.el){if(o.getAttribute&&o.getAttribute("aria-hidden")==="true")return true;o=o.parentElement}return false}isNavigable(t){if(!(t instanceof o))return false;if(t.hidden)return false;if(t.hasAttribute("disabled"))return false;if("disabled"in t&&t.disabled===true)return false;if(this.optedOut(t))return false;if(this.ariaHiddenWithin(t))return false;return this.isVisible(t)}collectRoving(t,o){const e=this.classify(t);if(e==="composite"||e==="independent")return;if(e==="roving"){if(this.isNavigable(t)&&!o.includes(t))o.push(t);return}for(const e of Array.from(t.children))this.collectRoving(e,o)}preferredActive(t){return t.find((t=>t.getAttribute("aria-disabled")!=="true"))??t[0]}getItems(){const t=Array.from(this.el.children).filter((t=>this.slotOf(t)!=="fab"));const o=new Map;t.forEach(((t,e)=>o.set(t,e)));t.sort(((t,e)=>{const n=this.slotPriority(t);const a=this.slotPriority(e);if(n!==a)return n-a;return(o.get(t)??0)-(o.get(e)??0)}));const e=[];for(const o of t)this.collectRoving(o,e);return e}applyRoving(t,o){if("groupTabindex"in t){if(!this.roved.has(t))this.roved.set(t,{kind:"group",orig:null});t.groupTabindex=o?0:-1}else{if(!this.roved.has(t))this.roved.set(t,{kind:"attr",orig:t.getAttribute("tabindex")});t.setAttribute("tabindex",o?"0":"-1")}}restoreOne(t){const o=this.roved.get(t);if(!o)return;if(o.kind==="group"){try{t.groupTabindex=null}catch{}}else if(o.orig===null){t.removeAttribute("tabindex")}else{t.setAttribute("tabindex",o.orig)}this.roved.delete(t)}clearRoving(){for(const t of Array.from(this.roved.keys()))this.restoreOne(t)}updateRoving(){if(this.containerSemantics!=="toolbar"){this.clearRoving();return}const t=this.getItems();for(const o of Array.from(this.roved.keys())){if(!t.includes(o))this.restoreOne(o)}if(t.length===0){this.activeItem=null;return}const o=this.activeItem&&t.includes(this.activeItem)?this.activeItem:this.preferredActive(t);this.activeItem=o??null;for(const e of t)this.applyRoving(e,e===o)}handleFocusIn(t){if(this.containerSemantics!=="toolbar")return;const o=this.getItems();const e=this.resolveItem(t.target,o);if(!e||e===this.activeItem)return;this.activeItem=e;for(const t of o)this.applyRoving(t,t===e)}resolveItem(t,o){const e=t;if(!e)return null;for(const t of o){if(t===e||t.contains(e))return t}return null}handleKeyDown(t){if(this.containerSemantics!=="toolbar")return;if(t.defaultPrevented)return;if(t.shiftKey||t.ctrlKey||t.metaKey||t.altKey)return;const o=t.key;const e=o==="ArrowRight"||o==="ArrowLeft"||o==="ArrowUp"||o==="ArrowDown"||o==="Home"||o==="End";if(!e)return;const n=this.getItems();if(n.length===0)return;const a=this.resolveItem(t.target,n);if(!a)return;const r=this.variant==="floating"&&this.layout==="vertical";const i=typeof getComputedStyle==="function"&&getComputedStyle(this.el).direction==="rtl";let s=0;if(r){if(o==="ArrowDown")s=1;else if(o==="ArrowUp")s=-1}else{if(o==="ArrowRight")s=i?-1:1;else if(o==="ArrowLeft")s=i?1:-1}let l;if(o==="Home"){l=0}else if(o==="End"){l=n.length-1}else if(s!==0){const t=n.indexOf(a);l=(t+s+n.length)%n.length}else{return}const d=n[l];if(!d)return;t.preventDefault();if(d!==a){this.activeItem=d;for(const t of n)this.applyRoving(t,t===d);d.focus()}}render(){const t=this.variant==="floating";const o=t&&this.layout==="vertical";const a=this.containerSemantics==="toolbar";const r=(this.ariaLabelledby??"").trim();const i=(this.ariaLabelProp??"").trim();const s=i.length>0?this.ariaLabelProp:undefined;const l=r.length>0?this.ariaLabelledby:undefined;const d=a?o?"vertical":"horizontal":undefined;return e(n,{key:"2064ce9ddf20d134ceaedbb2a0a54d39a70a19d0",class:{"md-toolbar":true,[`md-toolbar--${this.variant}`]:true,[`md-toolbar--${this.color}`]:true,[`md-toolbar--${this.layout}`]:t,[`md-toolbar--align-${this.alignment}`]:true,"md-toolbar--vertical":o,"md-toolbar--generic":!a},role:a?"toolbar":undefined,"aria-label":s,"aria-labelledby":l,"aria-orientation":d},e("div",{key:"e311ea0f281f1bb167ccf2914d047f2d49ca34e9",class:"md-toolbar__container",part:"container"},e("slot",{key:"6f9ce44e297c337340debd90a935e6db46fd10f0",name:"leading"}),e("slot",{key:"6a57d91bb3d358ae64b727d89754501ec3efb71f"}),e("slot",{key:"c826d0f85ed25a897d8bc667b904f28a0f099191",name:"trailing"})),e("div",{key:"153673e76d1ec5b6a84cfb9ac2bed6ca53faaf74",class:{"md-toolbar__fab-container":true,"md-toolbar__fab-container--floating":t,"md-toolbar__fab-container--hidden":!this.hasFab},part:"fab-container"},e("slot",{key:"5835dab76c0418045a36a1128c0315e772af0e7d",name:"fab"})))}get el(){return this}static get watchers(){return{containerSemantics:[{onNavPropChange:0}],variant:[{onNavPropChange:0}],layout:[{onNavPropChange:0}]}}static get style(){return r()}},[257,"md-toolbar",{variant:[513],color:[513],layout:[513],alignment:[513],containerSemantics:[513,"container-semantics"],ariaLabelProp:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],density:[514],hasFab:[32],setFocus:[64]},undefined,{containerSemantics:[{onNavPropChange:0}],variant:[{onNavPropChange:0}],layout:[{onNavPropChange:0}]}]);i.COMPOSITE_SELECTOR='md-button-group,md-menu,[role="group"],[role="radiogroup"],[role="listbox"],[role="menu"],[role="tablist"],[role="toolbar"]';i.INDEPENDENT_SELECTOR=['input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="file"]):not([type="color"]):not([type="hidden"])',"textarea","select",'[contenteditable]:not([contenteditable="false"])',"md-text-field","md-select","md-radio","md-chip","md-switch","md-checkbox","md-fab",'[role="textbox"]','[role="searchbox"]','[role="spinbutton"]','[role="combobox"]','[role="slider"]','[role="radio"]','[role="checkbox"]'].join(",");i.ROVING_SELECTOR=["button","a[href]","md-button","md-icon-button",'input[type="button"]','input[type="submit"]','input[type="reset"]','input[type="image"]','input[type="file"]','input[type="color"]','[role="button"]','[role="menuitem"]','[role="link"]'].join(",");i.ANY_CONTROL_SELECTOR=i.COMPOSITE_SELECTOR+","+i.INDEPENDENT_SELECTOR+","+i.ROVING_SELECTOR;function s(){if(typeof customElements==="undefined"){return}const t=["md-toolbar"];t.forEach((t=>{switch(t){case"md-toolbar":if(!customElements.get(a(t))){customElements.define(a(t),i)}break}}))}s();const l=i;const d=s;export{l as MdToolbar,d as defineCustomElement};
+//# sourceMappingURL=md-toolbar.js.map