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

package/dist/components-csr/md-number-field.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["mdNumberFieldCss","HOLD_START_DELAY_MS","HOLD_TICK_MS","BIDI_CONTROL_RE","SPACE_CHAR_RE","SPACE_CHAR_RE_G","buildFormatInfo","locale","options","resolvedLocale","undefined","formatter","Intl","NumberFormat","group","decimal","minus","plus","percent","symbolChars","plain","part","formatToParts","type","value","digitMap","Map","digits","useGrouping","d","glyph","format","String","set","isPercent","resolvedOptions","style","allowed","Set","add","keys","ch","test","cleanFloat","n","Number","isFinite","p","parseFloat","toPrecision","Math","abs","MdNumberField","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","label","placeholder","supportingText","error","errorText","disabled","readOnly","required","name","density","step","smallStep","largeStep","snapOnStep","allowOutOfRange","allowWheelScrub","steppers","incrementLabel","decrementLabel","valueMissingLabel","reserveSupportingSpace","inputValue","focused","formDisabled","defaultValue","lastCommitted","internalWrite","customValidityMessage","lastValidityKey","holdDir","heldAlt","heldShift","trackHoldModifiers","e","altKey","shiftKey","holdTick","dir","atBound","endHold","amount","stepAmount","doStep","clearTimeout","holdTimer","clearInterval","holdInterval","window","removeEventListener","handleFieldInput","stopPropagation","raw","detail","trim","mdInput","emit","formattedValue","reason","hasOnlyAllowedChars","revertFieldText","parsed","parseNumber","handleFieldChange","handleFieldKeyDown","isDisabled","isComposing","keyCode","key","preventDefault","minBound","setAndCommit","maxBound","commitTyped","requestSubmit","ctrlKey","metaKey","length","formatInfo","has","handleFieldFocus","handleFieldBlur","handleWheel","deltaY","formatOptionsObject","formatOptions","trimmed","parsedOptionsKey","JSON","parse","usable","Array","isArray","parsedOptionsCache","console","warn","optionsKey","stringify","formatInfoCache","formatInfoKey","min","NaN","max","resolvedInputMode","fo","fractional","isInteger","maximumFractionDigits","minimumFractionDigits","setFocus","focusField","select","fieldEl","stepUp","times","stepDown","getValidity","getValidityOf","internals","checkValidity","checkValidityOf","reportValidity","reportValidityOf","setCustomValidity","message","updateValidity","componentWillLoad","normalizeValueProp","formatValue","syncFormValue","componentDidLoad","el","addEventListener","passive","disconnectedCallback","formResetCallback","formDisabledCallback","queueMicrotask","formStateRestoreCallback","state","onValueChange","formatted","onFormatChange","setValidity","customError","valueMissing","emitValidityChange","v","setFormValue","valid","validationMessage","primed","mdValidityChange","info","s","replace","size","mapped","get","split","join","clamp","snap","candidate","nearest","base","offset","eps","units","round","floor","ceil","makeDetail","nearestSnap","next","prev","mdChange","f","focus","field","form","submitter","querySelector","HTMLButtonElement","HTMLInputElement","beginHold","pointerType","setTimeout","setInterval","renderStepper","kind","inline","h","class","slot","icon","groupTabindex","onMouseDown","onPointerDown","onPointerLeave","onClick","onMdClick","render","Host","ref","inputMode","autocomplete","spellcheck","onMdInput","onMdChange","onKeyDown","onFocus","onBlur"],"sources":["src/components/md-number-field/md-number-field.css?tag=md-number-field&encapsulation=shadow","src/components/md-number-field/md-number-field.tsx"],"sourcesContent":["/* ==========================================================\n   md-number-field — Material Design 3 number input.\n   Composes md-text-field + md-icon-button steppers.\n   The visible control is a plain text input with pointer-only steppers —\n   no spinbutton role, no type=\"number\" — so the Intl-formatted value stays\n   ordinary, editable text.\n\n   PUBLIC CSS CUSTOM PROPERTIES (override per-instance):\n     --md-number-field-width               Host inline-size (default 100% of container)\n     --md-number-field-min-width           Minimum host inline-size\n     --md-number-field-stepper-icon-size   Stepper glyph size (density-tapered 20px)\n     --md-number-field-stepper-color       Stepper icon ink\n     --md-number-field-split-stepper-size  Split-layout stepper circle (density-tapered 40px)\n\n   All md-text-field public hooks (--md-text-field-*) pass straight through\n   to the embedded field — e.g. --md-text-field-container-color.\n\n   CSS PARTS:\n     field      Inner md-text-field\n     increment  Increment stepper (md-icon-button)\n     decrement  Decrement stepper (md-icon-button)\n\n   SLOTS:\n     (none — the steppers are internal)\n\n   RTL:\n     Logical properties only; the split row follows the inline direction,\n     so DOM order (decrement, field, increment) mirrors for free. Stepping\n     itself is vertical-arrow / wheel driven — nothing to mirror.\n   ========================================================== */\n\n/* ==========================================================\n   1. HOST\n   ========================================================== */\n:host {\n  --_stepper-icon-size: var(--md-number-field-stepper-icon-size, max(14px, calc(20px + var(--md-sys-density-scale, 0) * 1px)));\n  --_stepper-color: var(--md-number-field-stepper-color, var(--md-sys-color-on-surface-variant, #49454f));\n\n  /* Inline stepper hit circle: 28px at density 0, tapering with the field. */\n  --_inline-stepper-size: max(20px, calc(28px + var(--md-sys-density-scale, 0) * 2px));\n\n  /* Split stepper circle + the field box it centres on — both derive from\n     the ONE density signal so they stay aligned at every rung. */\n  --_split-stepper-size: var(--md-number-field-split-stepper-size, max(32px, calc(40px + var(--md-sys-density-scale, 0) * 4px)));\n  --_field-box-height: max(40px, calc(56px + var(--md-sys-density-scale, 0) * 4px));\n\n  /* Fill the container (like md-select/md-autocomplete) — the trigger width\n     must come from layout, never from the typed text. */\n  display: inline-flex;\n  flex-direction: column;\n  inline-size: var(--md-number-field-width, 100%);\n  min-inline-size: var(--md-number-field-min-width, 200px);\n  box-sizing: border-box;\n  vertical-align: bottom;\n  position: relative;\n}\n\n/* ==========================================================\n   2. FIELD\n   ========================================================== */\n.md-number-field__field {\n  display: block;\n  inline-size: 100%;\n}\n\n/* Inline steppers live in the field's trailing cluster: pull the trailing\n   text inset back to the plain box inset (the default includes a caret's\n   7px optical bearing that buttons do not have — see md-text-field\n   --_text-inset). */\n:host(.md-number-field--inline) {\n  --md-text-field-padding-inline-end: var(--md-sys-spacing-inset-sm, 8px);\n}\n\n/* ==========================================================\n   3. STEPPERS — shared\n   Cross-component handoff trap: write only md-icon-button's PUBLIC hooks\n   (--md-icon-button-*), never its private --_x locals.\n   ========================================================== */\n.md-number-field__stepper {\n  --md-icon-button-icon-size: var(--_stepper-icon-size);\n  --md-icon-button-icon-color: var(--_stepper-color);\n\n  flex: none;\n}\n\n/* ==========================================================\n   3b. INLINE LAYOUT — both buttons inside the trailing slot\n   ========================================================== */\n.md-number-field__stepper--inline {\n  --md-icon-button-container-width: var(--_inline-stepper-size);\n  --md-icon-button-container-height: var(--_inline-stepper-size);\n}\n\n.md-number-field__stepper--inline + .md-number-field__stepper--inline {\n  margin-inline-start: var(--md-sys-spacing-gap-xs, 4px);\n}\n\n/* ==========================================================\n   3c. SPLIT LAYOUT — tonal circles flanking the field\n   ========================================================== */\n:host(.md-number-field--split) {\n  flex-direction: row;\n  align-items: flex-start;\n  gap: var(--md-sys-spacing-gap-sm, 8px);\n}\n\n:host(.md-number-field--split) .md-number-field__field {\n  flex: 1 1 auto;\n  inline-size: auto;\n  min-inline-size: 0;\n}\n\n.md-number-field__stepper--split {\n  --md-icon-button-container-width: var(--_split-stepper-size);\n  --md-icon-button-container-height: var(--_split-stepper-size);\n\n  /* Centre each circle on the field BOX (the supporting-text row below the\n     box must not skew it — hence flex-start + an explicit derived offset). */\n  margin-block-start: calc((var(--_field-box-height) - var(--_split-stepper-size)) / 2);\n}\n\n/* ==========================================================\n   4. DISABLED\n   ========================================================== */\n:host(.md-number-field--disabled) {\n  pointer-events: none;\n}\n\n/* ==========================================================\n   5. FORCED COLORS (Windows High Contrast)\n   ========================================================== */\n@media (forced-colors: active) {\n  .md-number-field__stepper {\n    --md-icon-button-icon-color: ButtonText;\n  }\n}\n\n/* ==========================================================\n   6. DENSITY (local override)\n   Maps the local `density` prop onto the same --md-sys-density-scale signal\n   a global `data-density` ancestor sets. The prop is FORWARDED to the inner\n   md-text-field for the field box; this block covers the host's own chrome\n   (stepper circles, gaps). Every density-sensitive value in this file\n   derives from that single signal by calc — never add a 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 { AttachInternals, Component, Element, Event, EventEmitter, Host, Method, Prop, State, Watch, h } from '@stencil/core';\nimport { setFormValue, checkValidityOf, reportValidityOf, getValidityOf } from '../../utils/form';\n\n/** What caused a value change / commit — reported as `reason` on every event. */\nexport type MdNumberFieldChangeReason =\n  | 'input-change'\n  | 'input-clear'\n  | 'input-blur'\n  | 'keyboard'\n  | 'increment-press'\n  | 'decrement-press'\n  | 'wheel'\n  | 'none';\n\n/** Detail payload of `mdInput` / `mdChange`. */\nexport interface MdNumberFieldChangeDetail {\n  /** The raw numeric value (`null` = empty). Never the formatted string. */\n  value: number | null;\n  /** The formatted display text at emit time. */\n  formattedValue: string;\n  /** What caused the change. */\n  reason: MdNumberFieldChangeReason;\n}\n\n/** Press-and-hold: delay before auto-repeat starts — long enough that a\n *  deliberate single press never repeats. */\nconst HOLD_START_DELAY_MS = 400;\n/** Press-and-hold: fixed auto-repeat interval — deliberately no acceleration,\n *  so the rate stays predictable and overshoot is one tap to correct. */\nconst HOLD_TICK_MS = 60;\n\n/** Bidi/format control characters the parser strips (never rejects). */\nconst BIDI_CONTROL_RE = /[\\u061c\\u200b\\u200e\\u200f\\u202a-\\u202e\\u2066-\\u2069]/g;\n/** Whitespace flavours seen in formatted numbers (NBSP, thin, narrow NBSP…). */\nconst SPACE_CHAR_RE = /[\\s\\u00a0\\u2009\\u202f]/;\nconst SPACE_CHAR_RE_G = /[\\s\\u00a0\\u2009\\u202f]/g;\n\n/** Everything the locale/format-aware parser needs, derived once per\n *  locale+options pair from `Intl.NumberFormat.formatToParts`. */\ninterface NumberFormatInfo {\n  formatter: Intl.NumberFormat;\n  /** Grouping separator (may be a NBSP flavour). Empty when the locale has none. */\n  group: string;\n  /** Decimal separator — always resolved from the plain locale format, because\n   *  the active format may have no fraction digits at all (percent default). */\n  decimal: string;\n  minus: string;\n  plus: string;\n  percent: string;\n  /** Currency / unit / literal characters of the active format, concatenated. */\n  symbolChars: string;\n  /** Locale numeral glyph → ASCII digit (empty for latin-digit locales). */\n  digitMap: Map<string, string>;\n  /** Intl percent semantics: displayed 50% ⇔ value 0.5. */\n  isPercent: boolean;\n  /** Characters the keydown filter lets through. */\n  allowed: Set<string>;\n}\n\nfunction buildFormatInfo(locale: string, options?: Intl.NumberFormatOptions): NumberFormatInfo {\n  const resolvedLocale = locale || undefined;\n  let formatter: Intl.NumberFormat;\n  try {\n    formatter = new Intl.NumberFormat(resolvedLocale, options);\n  } catch {\n    // Invalid options (e.g. style:'currency' with no currency code) must not\n    // brick the field — fall back to the plain locale format.\n    formatter = new Intl.NumberFormat(resolvedLocale);\n  }\n  let group = '';\n  let decimal = '';\n  let minus = '-';\n  let plus = '+';\n  let percent = '';\n  let symbolChars = '';\n  // Plain-locale pass FIRST: the active format may have no decimal part at all\n  // (percent defaults to 0 fraction digits), yet users still paste decimals.\n  const plain = new Intl.NumberFormat(resolvedLocale);\n  for (const part of plain.formatToParts(-12345678.9)) {\n    if (part.type === 'group') group = part.value;\n    else if (part.type === 'decimal') decimal = part.value;\n    else if (part.type === 'minusSign') minus = part.value;\n  }\n  for (const part of formatter.formatToParts(-12345678.9)) {\n    switch (part.type) {\n      case 'group': group = part.value; break;\n      case 'decimal': decimal = part.value; break;\n      case 'minusSign': minus = part.value; break;\n      case 'plusSign': plus = part.value; break;\n      case 'percentSign': percent = part.value; break;\n      case 'currency':\n      case 'unit':\n      case 'literal':\n        symbolChars += part.value;\n        break;\n      default:\n        break;\n    }\n  }\n  const digitMap = new Map<string, string>();\n  const digits = new Intl.NumberFormat(resolvedLocale, { useGrouping: false });\n  for (let d = 0; d <= 9; d++) {\n    const glyph = digits.format(d);\n    if (glyph !== String(d)) digitMap.set(glyph, String(d));\n  }\n  let isPercent = false;\n  try {\n    isPercent = formatter.resolvedOptions().style === 'percent';\n  } catch { /* resolvedOptions is universal, but stay defensive */ }\n  const allowed = new Set<string>();\n  for (let d = 0; d <= 9; d++) allowed.add(String(d));\n  for (const glyph of digitMap.keys()) allowed.add(glyph);\n  for (const ch of group + decimal + minus + plus + symbolChars) allowed.add(ch);\n  // ASCII sign keys always work, whatever glyph the locale renders.\n  allowed.add('-');\n  allowed.add('+');\n  if (isPercent) {\n    allowed.add('%');\n    if (percent) allowed.add(percent);\n  }\n  // Formats that separate with NBSP flavours accept the plain space key too.\n  if (SPACE_CHAR_RE.test(group + symbolChars)) allowed.add(' ');\n  return { formatter, group, decimal, minus, plus, percent, symbolChars, digitMap, isPercent, allowed };\n}\n\n/** The embedded md-text-field, addressed structurally (no global element types). */\ntype FieldElement = HTMLElement & {\n  value?: string;\n  focus?: () => void;\n  setFocus?: () => Promise<void>;\n  select?: () => Promise<void>;\n};\n\n/** Normalize float noise after arithmetic stepping: `toPrecision(15)` with a\n *  1e-10 absolute delta cap, so 0.1 + 0.2 commits as 0.3 while a value that\n *  genuinely needs those digits survives untouched. Typed values are never\n *  passed through this — they stay verbatim. */\nfunction cleanFloat(n: number): number {\n  if (!Number.isFinite(n)) return n;\n  const p = parseFloat(n.toPrecision(15));\n  return Math.abs(p - n) < 1e-10 ? p : n;\n}\n\n/**\n * `md-number-field` — Material Design 3 number input: an `md-text-field`\n * with locale-aware `Intl.NumberFormat` display, arrow-key / stepper-button /\n * wheel stepping, and native form participation.\n *\n * Behavior contract:\n *   - the visible control is a **plain text input** (`inputmode` numeric or\n *     decimal) — deliberately NOT `role=\"spinbutton\"` and NOT\n *     `type=\"number\"`, so the locale-formatted value stays ordinary readable,\n *     editable text and no native spinner chrome fights the Intl display;\n *     the steppers are separate labeled buttons with `tabindex=\"-1\"` (the\n *     input is the keyboard surface),\n *   - `value` is the raw number (`null` = empty); the formatted string is\n *     display-only state,\n *   - ArrowUp/Down step by `step`, Alt = `smallStep`, Shift = `largeStep`;\n *     Home/End jump to a defined `min`/`max`,\n *   - press-and-hold on a stepper auto-repeats (400ms delay, 60ms interval),\n *   - typing is filtered to the characters of the active locale/format,\n *     parsed leniently and kept verbatim; blur reformats (and clamps unless\n *     `allow-out-of-range`),\n *   - stepping (keys, buttons, wheel) always clamps and commits (`mdChange`).\n *\n * A drag-to-scrub surface (pointer lock over the field) is deliberately out of\n * scope: a niche gesture built on pointer lock, whose behaviour is unreliable\n * in Safari. `allow-wheel-scrub` covers the \"nudge without typing\" case.\n */\n@Component({\n  tag: 'md-number-field',\n  styleUrl: 'md-number-field.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class MdNumberField {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Form-association handle. The raw value is submitted under the host's\n   * `name` via `setFormValue` (`String(value)`; empty submits no entry).\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  // ── Props ────────────────────────────────────────────────\n\n  /** Visual variant of the inner text-field. */\n  @Prop({ reflect: true }) variant: 'filled' | 'outlined' = 'filled';\n\n  /** Floating label / accessible name. */\n  @Prop() label: string = '';\n\n  /** Placeholder for the input. */\n  @Prop() placeholder: string = '';\n\n  /** Supporting / helper text below the field. */\n  @Prop({ attribute: 'supporting-text' }) supportingText: string = '';\n\n  /** Error state — forwarded to the text-field. */\n  @Prop({ reflect: true }) error: boolean = false;\n\n  /** Error text rendered in place of supporting text when `error` is true. */\n  @Prop({ attribute: 'error-text' }) errorText: string = '';\n\n  /** Disabled — non-interactive. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Read-only: the value is visible and focusable but cannot be edited or stepped. */\n  @Prop({ attribute: 'readonly' }) readOnly: boolean = false;\n\n  /** Required for native form parity (`valueMissing` when empty). */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Form name. The raw numeric value submits as `String(value)`. */\n  @Prop({ reflect: true }) name: string = '';\n\n  /** Density forwarded to the text-field and applied to the steppers. */\n  @Prop({ reflect: true }) density: 0 | -1 | -2 | -3 | -4 = 0;\n\n  /**\n   * The raw numeric value (`null` = empty). Never the formatted string —\n   * the display text is derived via `Intl.NumberFormat`.\n   */\n  @Prop({ mutable: true }) value: number | null = null;\n\n  /**\n   * BCP-47 locale for `Intl.NumberFormat` display/parsing ONLY (an\n   * Intl-computed value — translatable copy stays in the `*-label` props).\n   * Empty = the runtime locale.\n   */\n  @Prop() locale: string = '';\n\n  /**\n   * `Intl.NumberFormat` options for display formatting (currency, percent,\n   * unit, fraction digits…). Percent keeps Intl semantics: displayed 50% ⇔\n   * value 0.5.\n   *\n   * Takes either form, so a plain-HTML page needs no script:\n   *   - property — `el.formatOptions = { style: 'currency', currency: 'EUR' }`\n   *   - attribute — `format-options='{\"style\":\"currency\",\"currency\":\"EUR\"}'`\n   *\n   * Malformed JSON warns once and falls back to plain number formatting rather\n   * than throwing: a broken attribute must not take the whole field down.\n   */\n  @Prop({ attribute: 'format-options' }) formatOptions?: Intl.NumberFormatOptions | string;\n\n  /** Parsed form of `formatOptions`, memoised on the raw attribute string. */\n  private parsedOptionsKey?: string;\n  private parsedOptionsCache?: Intl.NumberFormatOptions;\n\n  /** Lower bound. Interactive stepping always clamps to it. */\n  @Prop() min?: number;\n\n  /** Upper bound. Interactive stepping always clamps to it. */\n  @Prop() max?: number;\n\n  /** Step for arrows / steppers / wheel. */\n  @Prop() step: number = 1;\n\n  /** Step while **Alt** is held. */\n  @Prop({ attribute: 'small-step' }) smallStep: number = 0.1;\n\n  /** Step while **Shift** is held. */\n  @Prop({ attribute: 'large-step' }) largeStep: number = 10;\n\n  /**\n   * Snap stepped values to multiples of the active step (base = `min` when\n   * defined, else 0). Snapping happens BEFORE clamping, so non-aligned\n   * bounds stay reachable. Regular steps snap directionally; Alt\n   * (`smallStep`) snaps to the nearest multiple.\n   */\n  @Prop({ attribute: 'snap-on-step' }) snapOnStep: boolean = false;\n\n  /**\n   * Let TYPED text exceed `min`/`max` unclamped (blur does not clamp).\n   * Step-based interactions (keys, buttons, wheel) always clamp.\n   */\n  @Prop({ attribute: 'allow-out-of-range' }) allowOutOfRange: boolean = false;\n\n  /** Enable wheel stepping while the inner input has focus. */\n  @Prop({ attribute: 'allow-wheel-scrub' }) allowWheelScrub: boolean = false;\n\n  /** Which stepper buttons render: inside the field, split around it, or none. */\n  @Prop() steppers: 'inline' | 'split' | 'none' = 'inline';\n\n  /** Accessible name of the increment stepper (localizable). */\n  @Prop({ attribute: 'increment-label' }) incrementLabel: string = 'Increment';\n\n  /** Accessible name of the decrement stepper (localizable). */\n  @Prop({ attribute: 'decrement-label' }) decrementLabel: string = 'Decrement';\n\n  /**\n   * Localized constraint-validation message shown when `required` is unmet.\n   * `errorText` still wins when set, so an app-supplied inline message and\n   * the native bubble stay in agreement.\n   */\n  @Prop({ attribute: 'value-missing-label' }) valueMissingLabel: string = 'Please enter a number.';\n\n  /**\n   * Always occupy the supporting-text line, even when there is no message, so\n   * a validation error does not push the content below it down. Forwarded to\n   * the embedded md-text-field.\n   */\n  @Prop({ attribute: 'reserve-supporting-space' }) reserveSupportingSpace: boolean = false;\n\n  // ── Events ───────────────────────────────────────────────\n\n  /** Fires on every value change (typing included). */\n  @Event() mdInput: EventEmitter<MdNumberFieldChangeDetail>;\n\n  /** Fires at commit points: blur/Enter reformat, stepping, wheel. */\n  @Event() mdChange: EventEmitter<MdNumberFieldChangeDetail>;\n\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 embedding a field would\n   * otherwise hear two events for one logical control; `bubbles: true` still\n   * 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  // ── State ────────────────────────────────────────────────\n\n  /** Formatted display text (the text-field's `value`). */\n  @State() private inputValue: string = '';\n\n  /** True while the inner input has focus (wheel gating). */\n  @State() private focused = false;\n\n  /** Ancestor form/fieldset disabled via formDisabledCallback. */\n  @State() private formDisabled = false;\n\n  // ── Private fields ───────────────────────────────────────\n\n  private fieldEl?: FieldElement;\n\n  private defaultValue: number | null = null;\n  /** Last value published through mdChange — blur without change stays silent. */\n  private lastCommitted: number | null = null;\n  /** True while a this.value mutation originates from user input handlers. */\n  private internalWrite = false;\n  /** Message set via setCustomValidity(); non-empty wins over valueMissing. */\n  private customValidityMessage = '';\n  /** Last emitted validity, so a re-publish that changes nothing stays silent. */\n  private lastValidityKey: string | null = null;\n\n  private formatInfoCache?: NumberFormatInfo;\n  private formatInfoKey?: string;\n\n  // Press-and-hold machinery (timeouts on the instance; cleared on disconnect).\n  private holdTimer?: ReturnType<typeof setTimeout>;\n  private holdInterval?: ReturnType<typeof setInterval>;\n  private holdDir: 1 | -1 = 1;\n  private heldAlt = false;\n  private heldShift = false;\n\n  // ── Private getters ──────────────────────────────────────\n\n  /** Consumer `disabled` OR ancestor form/fieldset disabled. */\n  private get isDisabled(): boolean {\n    return this.disabled || this.formDisabled;\n  }\n\n  /** The options as an object, whichever way they were supplied. */\n  private get formatOptionsObject(): Intl.NumberFormatOptions | undefined {\n    const raw = this.formatOptions;\n    if (raw == null) return undefined;\n    if (typeof raw !== 'string') return raw;\n    const trimmed = raw.trim();\n    if (!trimmed) return undefined;\n    if (this.parsedOptionsKey !== trimmed) {\n      this.parsedOptionsKey = trimmed;\n      try {\n        const parsed: unknown = JSON.parse(trimmed);\n        const usable = !!parsed && typeof parsed === 'object' && !Array.isArray(parsed);\n        this.parsedOptionsCache = usable ? (parsed as Intl.NumberFormatOptions) : undefined;\n        if (!usable && typeof console !== 'undefined') {\n          console.warn(\n            '[md-number-field] `format-options` must be a JSON object:',\n            raw,\n          );\n        }\n      } catch {\n        this.parsedOptionsCache = undefined;\n        if (typeof console !== 'undefined') {\n          console.warn(\n            '[md-number-field] `format-options` attribute is not valid JSON:',\n            raw,\n          );\n        }\n      }\n    }\n    return this.parsedOptionsCache;\n  }\n\n  private get formatInfo(): NumberFormatInfo {\n    let optionsKey = 'null';\n    try {\n      optionsKey = JSON.stringify(this.formatOptions ?? null) ?? 'null';\n    } catch {\n      optionsKey = 'opaque';\n    }\n    const key = `${this.locale}|${optionsKey}`;\n    if (!this.formatInfoCache || this.formatInfoKey !== key) {\n      this.formatInfoCache = buildFormatInfo(this.locale, this.formatOptionsObject);\n      this.formatInfoKey = key;\n    }\n    return this.formatInfoCache;\n  }\n\n  /** Sanitized regular step (guards 0/negative/NaN back to 1). */\n  private get stepAmount(): number {\n    const n = Number(this.step);\n    return Number.isFinite(n) && n > 0 ? n : 1;\n  }\n\n  private get minBound(): number | null {\n    const n = this.min == null ? NaN : Number(this.min);\n    return Number.isFinite(n) ? n : null;\n  }\n\n  private get maxBound(): number | null {\n    const n = this.max == null ? NaN : Number(this.max);\n    return Number.isFinite(n) ? n : null;\n  }\n\n  /**\n   * `numeric` (digit-only software keyboard) when negatives are impossible\n   * (`min >= 0`) and neither step nor format implies decimals; otherwise\n   * `decimal` (exposes the separator — and, on iOS, the minus key lives on\n   * the decimal/numeric layouts, so `decimal` also serves `min < 0`).\n   */\n  private get resolvedInputMode(): 'numeric' | 'decimal' {\n    const fo = this.formatOptionsObject;\n    const fractional =\n      !Number.isInteger(this.stepAmount) ||\n      (fo != null &&\n        (((fo.maximumFractionDigits ?? 0) > 0) ||\n          ((fo.minimumFractionDigits ?? 0) > 0) ||\n          fo.style === 'currency' ||\n          fo.style === 'percent'));\n    const min = this.minBound;\n    return min != null && min >= 0 && !fractional ? 'numeric' : 'decimal';\n  }\n\n  // ── Public methods ───────────────────────────────────────\n\n  /** Focus the inner input. */\n  @Method()\n  async setFocus() {\n    this.focusField();\n  }\n\n  /** Select the input's full contents. */\n  @Method()\n  async select() {\n    await this.fieldEl?.select?.();\n  }\n\n  /** Step up by `step` (× `times`), snapping/clamping like an arrow press. */\n  @Method()\n  async stepUp(times: number = 1) {\n    this.doStep(1, this.stepAmount * Math.max(1, times), false, 'none');\n  }\n\n  /** Step down by `step` (× `times`), snapping/clamping like an arrow press. */\n  @Method()\n  async stepDown(times: number = 1) {\n    this.doStep(-1, this.stepAmount * Math.max(1, times), false, 'none');\n  }\n\n  /** Current validity: boolean, message and flags. Mirrors md-text-field. */\n  @Method()\n  async getValidity(): Promise<{\n    valid: boolean;\n    validationMessage: string;\n    flags: Record<string, boolean>;\n  }> {\n    return getValidityOf(this.internals);\n  }\n\n  /** Constraint-validation API, matching md-text-field and the native contract. */\n  @Method()\n  async checkValidity(): Promise<boolean> {\n    return checkValidityOf(this.internals);\n  }\n\n  @Method()\n  async reportValidity(): Promise<boolean> {\n    return reportValidityOf(this.internals);\n  }\n\n  /** App/server-side validation: a non-empty message marks the field\n   *  invalid for its form until cleared with an empty string. */\n  @Method()\n  async setCustomValidity(message: string) {\n    this.customValidityMessage = message;\n    this.updateValidity();\n  }\n\n  // ── Lifecycle + form callbacks ───────────────────────────\n\n  componentWillLoad() {\n    this.normalizeValueProp();\n    this.defaultValue = this.value;\n    this.lastCommitted = this.value;\n    this.inputValue = this.formatValue(this.value);\n    this.syncFormValue();\n  }\n\n  componentDidLoad() {\n    // Re-publish validity now that the field ref exists: reportValidity()\n    // needs a FOCUSABLE anchor, and the pre-render publish anchored the host.\n    this.updateValidity();\n    if (typeof window === 'undefined') return;\n    // Non-passive: a scrub must preventDefault the page scroll.\n    this.el.addEventListener('wheel', this.handleWheel, { passive: false });\n  }\n\n  disconnectedCallback() {\n    if (typeof window !== 'undefined') {\n      this.el.removeEventListener('wheel', this.handleWheel);\n    }\n    this.endHold();\n  }\n\n  formResetCallback() {\n    this.internalWrite = false;\n    this.customValidityMessage = '';\n    this.value = this.defaultValue;\n    // The watch only fires when the value actually moved — sync explicitly so\n    // display/form/commit baseline reset even when it did not.\n    this.inputValue = this.formatValue(this.value);\n    this.lastCommitted = this.value;\n    this.syncFormValue();\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    // called synchronously while Stencil reflects the disabled attribute\n    // during render — a direct @State write logs 'changed during rendering'\n    queueMicrotask(() => {\n      this.formDisabled = disabled;\n    });\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    // browser session restore / bfcache — native inputs restore their value\n    if (typeof state === 'string') {\n      const n = state === '' ? NaN : Number(state);\n      this.value = Number.isFinite(n) ? n : null;\n    }\n  }\n\n  // ── Watches ──────────────────────────────────────────────\n\n  @Watch('value')\n  onValueChange() {\n    this.normalizeValueProp();\n    this.syncFormValue();\n    if (!this.internalWrite) {\n      // A programmatic write is a committed fact, not a pending edit.\n      this.lastCommitted = this.value;\n      const formatted = this.formatValue(this.value);\n      if (this.inputValue !== formatted) this.inputValue = formatted;\n    }\n  }\n\n  @Watch('locale')\n  @Watch('formatOptions')\n  onFormatChange() {\n    this.formatInfoKey = undefined;\n    this.inputValue = this.formatValue(this.value);\n  }\n\n  @Watch('required')\n  @Watch('valueMissingLabel')\n  updateValidity() {\n    if (!this.internals?.setValidity) return; // spec mock — e2e covers the real path\n    // setCustomValidity() takes precedence over valueMissing, matching native.\n    if (this.customValidityMessage) {\n      this.internals.setValidity(\n        { customError: true },\n        this.customValidityMessage,\n        (this.fieldEl as HTMLElement) ?? this.el,\n      );\n    } else if (this.required && this.value === null) {\n      this.internals.setValidity(\n        { valueMissing: true },\n        this.errorText || this.valueMissingLabel,\n        (this.fieldEl as HTMLElement) ?? this.el,\n      );\n    } else {\n      this.internals.setValidity({});\n    }\n    this.emitValidityChange();\n  }\n\n  // ── Value plumbing ───────────────────────────────────────\n\n  /** Framework proxies can write strings/undefined through the number prop. */\n  private normalizeValueProp() {\n    const v = this.value as unknown;\n    if (v === null) return;\n    if (typeof v === 'number') {\n      if (!Number.isFinite(v)) this.value = null; // watch re-fires with null\n      return;\n    }\n    const n = v === '' || v == null ? NaN : Number(v);\n    this.value = Number.isFinite(n) ? n : null; // watch re-fires with the clean value\n  }\n\n  private syncFormValue() {\n    // null → no FormData entry (md-autocomplete convention), else the RAW value.\n    setFormValue(this.internals, this.value === null ? null : String(this.value));\n    this.updateValidity();\n  }\n\n  /**\n   * Emit mdValidityChange if validity actually moved.\n   *\n   * The FIRST call only primes the baseline. Initial state is not a change,\n   * and emitting on mount would fire once per control on every page load.\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  // ── Parse / format ───────────────────────────────────────\n\n  private formatValue(v: number | null): string {\n    if (v === null) return '';\n    try {\n      return this.formatInfo.formatter.format(v);\n    } catch {\n      return String(v);\n    }\n  }\n\n  /** Locale/format-aware lenient parse. `null` = not a number. */\n  private parseNumber(raw: string): number | null {\n    if (!raw) return null;\n    const info = this.formatInfo;\n    let s = raw.replace(BIDI_CONTROL_RE, '');\n    if (info.digitMap.size > 0) {\n      let mapped = '';\n      for (const ch of s) mapped += info.digitMap.get(ch) ?? ch;\n      s = mapped;\n    }\n    // Strip the active format's currency/unit/literal characters, then any\n    // whitespace flavour (formats separate with NBSP variants).\n    for (const ch of new Set(info.symbolChars)) s = s.split(ch).join('');\n    s = s.replace(SPACE_CHAR_RE_G, '');\n    if (info.percent) s = s.split(info.percent).join('');\n    s = s.split('%').join('');\n    if (info.group) s = s.split(info.group).join('');\n    if (info.decimal && info.decimal !== '.') s = s.split(info.decimal).join('.');\n    if (info.minus && info.minus !== '-') s = s.split(info.minus).join('-');\n    if (info.plus && info.plus !== '+') s = s.split(info.plus).join('+');\n    // U+2212 minus and its dash lookalikes normalize to ASCII.\n    s = s.replace(/[\\u2012\\u2013\\u2212]/g, '-');\n    if (s === '' || s === '-' || s === '+') return null;\n    const n = Number(s);\n    if (!Number.isFinite(n)) return null;\n    // Intl percent semantics: the typed \"50\" in a percent field means 0.5.\n    return info.isPercent ? n / 100 : n;\n  }\n\n  /** Every character is a numeral/separator/sign/symbol of the active format. */\n  private hasOnlyAllowedChars(raw: string): boolean {\n    const info = this.formatInfo;\n    for (const ch of raw.replace(BIDI_CONTROL_RE, '')) {\n      if (info.allowed.has(ch)) continue;\n      if (SPACE_CHAR_RE.test(ch)) continue; // any whitespace flavour is tolerated\n      return false;\n    }\n    return true;\n  }\n\n  private clamp(n: number): number {\n    const min = this.minBound;\n    const max = this.maxBound;\n    if (min != null && n < min) n = min;\n    if (max != null && n > max) n = max;\n    return n;\n  }\n\n  /** Snap BEFORE clamping, so a non-aligned bound stays reachable: base =\n   *  `min` ?? 0; directional for regular steps, nearest for Alt;\n   *  ε = amount × 1e-10. */\n  private snap(candidate: number, amount: number, dir: 1 | -1, nearest: boolean): number {\n    const base = this.minBound ?? 0;\n    const offset = candidate - base;\n    const eps = amount * 1e-10;\n    let units: number;\n    if (nearest) units = Math.round(offset / amount);\n    else if (dir > 0) units = Math.floor(offset / amount + eps);\n    else units = Math.ceil(offset / amount - eps);\n    return cleanFloat(base + units * amount);\n  }\n\n  private atBound(dir: 1 | -1): boolean {\n    if (this.value === null) return false;\n    if (dir > 0) return this.maxBound != null && this.value >= this.maxBound;\n    return this.minBound != null && this.value <= this.minBound;\n  }\n\n  private makeDetail(reason: MdNumberFieldChangeReason): MdNumberFieldChangeDetail {\n    return { value: this.value, formattedValue: this.inputValue, reason };\n  }\n\n  /**\n   * One step of interactive/programmatic stepping. Steps from the parsed\n   * VISIBLE text when the user edited it (not stale state); an empty field\n   * seeds from 0; snaps (opt-in) before clamping; always clamps; commits.\n   */\n  private doStep(dir: 1 | -1, amount: number, nearestSnap: boolean, reason: MdNumberFieldChangeReason) {\n    if (!(Number.isFinite(amount) && amount > 0)) amount = this.stepAmount;\n    const parsed = this.parseNumber(this.inputValue);\n    const base = parsed ?? this.value ?? 0;\n    let next = base + dir * amount;\n    if (this.snapOnStep) next = this.snap(next, amount, dir, nearestSnap);\n    next = cleanFloat(this.clamp(next));\n    const prev = this.value;\n    this.internalWrite = true;\n    this.value = next;\n    this.internalWrite = false;\n    this.inputValue = this.formatValue(next);\n    const detail = this.makeDetail(reason);\n    if (next !== prev) this.mdInput.emit(detail);\n    if (next !== this.lastCommitted) {\n      this.lastCommitted = next;\n      this.mdChange.emit(detail);\n    }\n  }\n\n  /** Non-stepping value set (Home/End): clamps and commits. */\n  private setAndCommit(n: number, reason: MdNumberFieldChangeReason) {\n    const next = cleanFloat(this.clamp(n));\n    const prev = this.value;\n    this.internalWrite = true;\n    this.value = next;\n    this.internalWrite = false;\n    this.inputValue = this.formatValue(next);\n    const detail = this.makeDetail(reason);\n    if (next !== prev) this.mdInput.emit(detail);\n    if (next !== this.lastCommitted) {\n      this.lastCommitted = next;\n      this.mdChange.emit(detail);\n    }\n  }\n\n  /** Blur/Enter commit: reformat, clamp TYPED text unless allow-out-of-range. */\n  private commitTyped(reason: MdNumberFieldChangeReason) {\n    const parsed = this.parseNumber(this.inputValue);\n    let next = parsed;\n    // Typed values stay verbatim (no float cleanup); only the range is enforced.\n    if (next !== null && !this.allowOutOfRange) next = this.clamp(next);\n    const prev = this.value;\n    this.internalWrite = true;\n    this.value = next;\n    this.internalWrite = false;\n    this.inputValue = this.formatValue(next);\n    const detail = this.makeDetail(reason);\n    if (next !== prev) this.mdInput.emit(detail);\n    if (next !== this.lastCommitted) {\n      this.lastCommitted = next;\n      this.mdChange.emit(detail);\n    }\n  }\n\n  private focusField() {\n    const f = this.fieldEl;\n    if (!f) return;\n    if (typeof f.setFocus === 'function') void f.setFocus();\n    else f.focus?.();\n  }\n\n  /** Snap the visible text back to the last accepted display (garbage paste). */\n  private revertFieldText() {\n    const field = this.fieldEl;\n    if (field && field.value !== this.inputValue) {\n      field.value = this.inputValue;\n    }\n  }\n\n  private requestSubmit() {\n    try {\n      const form = this.internals?.form;\n      // Native implicit submission attributes the submit to the DEFAULT submit\n      // button, so its name/value joins the entry list and `event.submitter` is\n      // set. It does NOT click that button — requestSubmit() runs the spec's\n      // submit steps directly, so a click handler on it never sees this.\n      const submitter = form?.querySelector<HTMLElement>(\n        'button[type=\"submit\"], input[type=\"submit\"], button:not([type])',\n      );\n      form?.requestSubmit(\n        submitter instanceof HTMLButtonElement || submitter instanceof HTMLInputElement\n          ? submitter\n          : undefined,\n      );\n    } catch { /* spec mock */ }\n  }\n\n  // ── Press-and-hold ───────────────────────────────────────\n\n  private beginHold(dir: 1 | -1, e: PointerEvent) {\n    if (this.isDisabled || this.readOnly) return;\n    // Mouse/pen presses keep the typing context in the input; a touch tap must\n    // NOT focus it — that would summon the software keyboard over the field\n    // the user is only trying to nudge.\n    if (e.pointerType !== 'touch') this.focusField();\n    this.endHold(); // never double timers\n    this.holdDir = dir;\n    this.heldAlt = e.altKey === true;\n    this.heldShift = e.shiftKey === true;\n    this.holdTick(); // first tick immediately on pointerdown\n    if (typeof window === 'undefined') return;\n    window.addEventListener('pointerup', this.endHold);\n    window.addEventListener('pointercancel', this.endHold);\n    window.addEventListener('contextmenu', this.endHold);\n    // Modifiers are read PER TICK — track them while holding.\n    window.addEventListener('keydown', this.trackHoldModifiers);\n    window.addEventListener('keyup', this.trackHoldModifiers);\n    this.holdTimer = setTimeout(() => {\n      this.holdInterval = setInterval(this.holdTick, HOLD_TICK_MS);\n    }, HOLD_START_DELAY_MS);\n  }\n\n  private trackHoldModifiers = (e: KeyboardEvent) => {\n    this.heldAlt = e.altKey;\n    this.heldShift = e.shiftKey;\n  };\n\n  private holdTick = () => {\n    const dir = this.holdDir;\n    if (this.atBound(dir)) {\n      this.endHold(); // ticking stops at the bound\n      return;\n    }\n    const amount = this.heldShift ? this.largeStep : this.heldAlt ? this.smallStep : this.stepAmount;\n    this.doStep(dir, amount, this.heldAlt, dir > 0 ? 'increment-press' : 'decrement-press');\n  };\n\n  private endHold = () => {\n    clearTimeout(this.holdTimer);\n    clearInterval(this.holdInterval);\n    this.holdTimer = undefined;\n    this.holdInterval = undefined;\n    if (typeof window !== 'undefined') {\n      window.removeEventListener('pointerup', this.endHold);\n      window.removeEventListener('pointercancel', this.endHold);\n      window.removeEventListener('contextmenu', this.endHold);\n      window.removeEventListener('keydown', this.trackHoldModifiers);\n      window.removeEventListener('keyup', this.trackHoldModifiers);\n    }\n  };\n\n  // ── Input handlers ───────────────────────────────────────\n\n  private handleFieldInput = (e: CustomEvent<string>) => {\n    // The inner field's mdInput (string detail) must not leak past the host —\n    // this component re-emits its own typed detail.\n    e.stopPropagation();\n    const raw = e.detail ?? '';\n    if (raw.trim() === '') {\n      this.inputValue = raw;\n      if (this.value !== null) {\n        this.internalWrite = true;\n        this.value = null;\n        this.internalWrite = false;\n        this.mdInput.emit({ value: null, formattedValue: raw, reason: 'input-clear' });\n      }\n      return;\n    }\n    if (!this.hasOnlyAllowedChars(raw)) {\n      // Unparseable candidate (garbage paste): silently revert to the last\n      // accepted text and emit nothing — a rejected edit is not a value change.\n      this.revertFieldText();\n      return;\n    }\n    // Typed text is kept VERBATIM (no live reformatting); the value updates\n    // only when the text parses. Partial states (\"-\", \"1,\") just wait.\n    this.inputValue = raw;\n    const parsed = this.parseNumber(raw);\n    if (parsed !== null && parsed !== this.value) {\n      this.internalWrite = true;\n      this.value = parsed;\n      this.internalWrite = false;\n      this.mdInput.emit({ value: parsed, formattedValue: raw, reason: 'input-change' });\n    }\n  };\n\n  private handleFieldChange = (e: CustomEvent<string>) => {\n    // Contain the inner field's mdChange — this component's own mdChange is\n    // emitted at ITS commit points with a typed detail.\n    e.stopPropagation();\n  };\n\n  private handleFieldKeyDown = (e: KeyboardEvent) => {\n    if (this.isDisabled) return;\n    // IME composition passes through untouched.\n    if (e.isComposing || e.keyCode === 229) return;\n    switch (e.key) {\n      case 'ArrowUp':\n      case 'ArrowDown': {\n        e.preventDefault();\n        if (this.readOnly) return;\n        const dir: 1 | -1 = e.key === 'ArrowUp' ? 1 : -1;\n        const amount = e.shiftKey ? this.largeStep : e.altKey ? this.smallStep : this.stepAmount;\n        this.doStep(dir, amount, e.altKey, 'keyboard');\n        return;\n      }\n      case 'Home':\n        // Only when a bound is defined — otherwise native caret-to-start.\n        if (this.minBound != null && !this.readOnly) {\n          e.preventDefault();\n          this.setAndCommit(this.minBound, 'keyboard');\n        }\n        return;\n      case 'End':\n        if (this.maxBound != null && !this.readOnly) {\n          e.preventDefault();\n          this.setAndCommit(this.maxBound, 'keyboard');\n        }\n        return;\n      case 'Enter':\n        // Enter commits like blur, then native implicit-submission parity\n        // (the inner field's own Enter handler has no form in this shadow root).\n        this.commitTyped('input-blur');\n        this.requestSubmit();\n        return;\n      default:\n        break;\n    }\n    // Editing/navigation keys and shortcuts pass through.\n    if (e.ctrlKey || e.metaKey || e.altKey) return;\n    if (e.key.length !== 1) return;\n    if (this.readOnly) return; // the native readonly input blocks typing anyway\n    // Character filter: only numerals/separators/signs/symbols of the format.\n    if (!this.formatInfo.allowed.has(e.key)) e.preventDefault();\n  };\n\n  private handleFieldFocus = () => {\n    this.focused = true;\n  };\n\n  private handleFieldBlur = () => {\n    this.focused = false;\n    this.commitTyped('input-blur');\n  };\n\n  private handleWheel = (e: WheelEvent) => {\n    // Opt-in, and only while the inner input is the focused element.\n    if (!this.allowWheelScrub || this.isDisabled || this.readOnly || !this.focused) return;\n    if (e.ctrlKey) return; // pinch-zoom gesture — never hijack it\n    e.preventDefault();\n    const dir: 1 | -1 = e.deltaY > 0 ? -1 : 1;\n    const amount = e.shiftKey ? this.largeStep : e.altKey ? this.smallStep : this.stepAmount;\n    this.doStep(dir, amount, e.altKey, 'wheel');\n  };\n\n  // ── Render ───────────────────────────────────────────────\n\n  private renderStepper(kind: 'increment' | 'decrement') {\n    const inline = this.steppers === 'inline';\n    const dir: 1 | -1 = kind === 'increment' ? 1 : -1;\n    const disabled = this.isDisabled || this.readOnly || this.atBound(dir);\n    return (\n      <md-icon-button\n        key={kind}\n        class={{\n          'md-number-field__stepper': true,\n          [`md-number-field__stepper--${kind}`]: true,\n          'md-number-field__stepper--inline': inline,\n          'md-number-field__stepper--split': !inline,\n        }}\n        slot={inline ? 'trailing-icon' : undefined}\n        part={kind}\n        variant={inline ? 'standard' : 'tonal'}\n        icon={kind === 'increment' ? 'add' : 'remove'}\n        aria-label={kind === 'increment' ? this.incrementLabel : this.decrementLabel}\n        disabled={disabled}\n        // The input is the keyboard surface — steppers are pointer-only\n        // (tabIndex=-1), so Tab never stops on buttons that only duplicate ↑/↓.\n        groupTabindex={-1}\n        onMouseDown={(e: MouseEvent) => e.preventDefault()} // keep focus in the input\n        onPointerDown={(e: PointerEvent) => this.beginHold(dir, e)}\n        onPointerLeave={this.endHold}\n        onClick={(e: MouseEvent) => e.stopPropagation()}\n        onMdClick={(e: CustomEvent) => e.stopPropagation()}\n      ></md-icon-button>\n    );\n  }\n\n  render() {\n    const split = this.steppers === 'split';\n    return (\n      <Host\n        class={{\n          'md-number-field': true,\n          [`md-number-field--${this.variant}`]: true,\n          'md-number-field--disabled': this.isDisabled,\n          'md-number-field--split': split,\n          'md-number-field--inline': this.steppers === 'inline',\n        }}\n      >\n        {split && this.renderStepper('decrement')}\n        <md-text-field\n          ref={(el) => (this.fieldEl = el as unknown as FieldElement)}\n          class=\"md-number-field__field\"\n          part=\"field\"\n          variant={this.variant}\n          label={this.label}\n          placeholder={this.placeholder}\n          value={this.inputValue}\n          disabled={this.isDisabled}\n          readOnly={this.readOnly}\n          required={this.required}\n          error={this.error}\n          errorText={this.errorText}\n          supportingText={this.supportingText}\n          reserveSupportingSpace={this.reserveSupportingSpace}\n          density={this.density}\n          // A plain text input with a numeric software keyboard — deliberately\n          // NOT type=\"number\" (its spinners and browser-specific parsing fight\n          // the Intl display), NOT role=\"spinbutton\" (the formatted value stays\n          // ordinary readable, editable text).\n          inputMode={this.resolvedInputMode}\n          autocomplete=\"off\"\n          spellcheck={false}\n          onMdInput={this.handleFieldInput}\n          onMdChange={this.handleFieldChange}\n          onKeyDown={this.handleFieldKeyDown}\n          onFocus={this.handleFieldFocus}\n          onBlur={this.handleFieldBlur}\n        >\n          {this.steppers === 'inline' && [\n            this.renderStepper('decrement'),\n            this.renderStepper('increment'),\n          ]}\n        </md-text-field>\n        {split && this.renderStepper('increment')}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components-csr/md-organization-chart.js

@@ -0,0 +1,2 @@
+import{p as t,H as r,c as e,h as o,d as a,t as i}from"./p-bSpXNc5J.js";import{d as s}from"./p-DMQ-6aj8.js";import{d as n}from"./p-R_guULjT.js";import{d as c}from"./p-C3vB0Hd9.js";import{d}from"./p-DjKPc5EU.js";const l=()=>`:host{--_connector-color:var(--md-org-chart-connector-color, var(--md-sys-color-outline-variant, #c4c7c5));--_connector-width:var(--md-org-chart-connector-width, 1.5px);--_node-color:var(--md-org-chart-node-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_node-outline:var(--md-org-chart-node-outline-color, var(--md-sys-color-outline-variant, #c4c7c5));--_node-outline-width:var(--md-org-chart-node-outline-width, 1px);--_node-shape:var(--md-org-chart-node-shape, var(--md-sys-shape-corner-medium, 12px));--_node-min-width:var(--md-org-chart-node-min-width, 176px);--_node-max-width:var(--md-org-chart-node-max-width, 260px);--_selected-color:var(--md-org-chart-selected-color, var(--md-sys-color-primary, #6750a4));--_focus-ring-color:var(--md-org-chart-focus-ring-color, var(--md-sys-color-secondary, #625b71));--_toggle-size:var(--md-org-chart-toggle-size, max(20px, calc(24px + var(--md-sys-density-scale, 0) * 1px)));--_state-layer-color:var(--md-org-chart-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_accent:var(--md-sys-color-primary, #6750a4);--_level-gap:var(--md-org-chart-level-gap, max(24px, calc(28px + var(--md-sys-density-scale, 0) * 1px)));--_sibling-gap:var(--md-org-chart-sibling-gap, max(8px, calc(12px + var(--md-sys-density-scale, 0) * 1px)));--_duration:var(--md-org-chart-duration, var(--md-sys-motion-duration-medium2, 300ms));--_easing:var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));--_line:var(--_connector-width) solid var(--_connector-color);--_elbow:12px;display:block;box-sizing:border-box;color:var(--md-sys-color-on-surface, #1d1b20);font-family:var(--md-sys-typescale-body-medium-font-family, Roboto, system-ui, sans-serif)}.md-org-chart__viewport{overflow:auto;padding:8px 8px calc(var(--_toggle-size) / 2 + 10px);box-sizing:border-box}.md-org-chart__tree,.md-org-chart__group{display:flex;justify-content:center;align-items:flex-start;list-style:none;margin:0;padding:0;position:relative}.md-org-chart__tree{inline-size:max-content;margin-inline:auto}.md-org-chart__group{padding-block-start:var(--_level-gap)}.md-org-chart__branch{position:relative;display:flex;flex-direction:column;align-items:center;padding-block-start:var(--_level-gap);padding-inline:calc(var(--_sibling-gap) / 2);outline:none}.md-org-chart__branch::before,.md-org-chart__branch::after{content:'';position:absolute;inset-block-start:0;inset-inline-end:50%;inline-size:50%;block-size:var(--_level-gap);border-block-start:var(--_line)}.md-org-chart__branch::after{inset-inline-end:auto;inset-inline-start:50%;border-inline-start:var(--_line)}.md-org-chart__branch:only-child::before,.md-org-chart__branch:only-child::after{display:none}.md-org-chart__branch:only-child{padding-block-start:0}.md-org-chart__branch:first-child::before,.md-org-chart__branch:last-child::after{border:0}.md-org-chart__branch:last-child::before{border-inline-end:var(--_line);border-start-end-radius:var(--_elbow)}.md-org-chart__branch:first-child::after{border-start-start-radius:var(--_elbow)}.md-org-chart__group::before{content:'';position:absolute;inset-block-start:0;inset-inline-start:50%;inline-size:0;block-size:var(--_level-gap);border-inline-start:var(--_line)}.md-org-chart__tree>.md-org-chart__branch{padding-block-start:0}.md-org-chart__tree>.md-org-chart__branch::before,.md-org-chart__tree>.md-org-chart__branch::after{display:none}.md-org-chart__node{position:relative;z-index:2;display:inline-flex;align-items:center;gap:max(6px, calc(12px + var(--md-sys-density-scale, 0) * 1.5px));padding-block:max(6px, calc(10px + var(--md-sys-density-scale, 0) * 1px));padding-inline:max(8px, calc(14px + var(--md-sys-density-scale, 0) * 1.5px));min-inline-size:var(--_node-min-width);max-inline-size:var(--_node-max-width);box-sizing:border-box;border-radius:var(--_node-shape);background:var(--_node-color);border:var(--_node-outline-width) solid var(--_node-outline);color:var(--md-sys-color-on-surface, #1d1b20);transition:border-color var(--_duration) var(--_easing),     box-shadow var(--_duration) var(--_easing);}.md-org-chart__node--selectable{cursor:pointer}.md-org-chart__node--selectable:hover{box-shadow:var(--md-sys-elevation-1, 0 1px 3px 1px rgba(0, 0, 0, 0.15))}.md-org-chart__node--selected{border-color:var(--_selected-color);box-shadow:0 0 0 1px var(--_selected-color)}.md-org-chart__node--selected.md-org-chart__node--selectable:hover{box-shadow:0 0 0 1px var(--_selected-color),     var(--md-sys-elevation-1, 0 1px 3px 1px rgba(0, 0, 0, 0.15))}.md-org-chart__branch:focus-visible>.md-org-chart__node{outline:3px solid var(--_focus-ring-color);outline-offset:2px}.md-org-chart__ripple{--md-ripple-color:var(--_selected-color);border-radius:inherit}.md-org-chart__state-layer{position:absolute;inset:0;border-radius:inherit;background:var(--_state-layer-color);opacity:0;pointer-events:none;transition:opacity var(--_duration) var(--_easing)}.md-org-chart__node--selectable:hover>.md-org-chart__state-layer{opacity:var(--md-sys-state-hover-state-layer-opacity, 0.08)}.md-org-chart__node--selectable:active>.md-org-chart__state-layer{opacity:var(--md-sys-state-pressed-state-layer-opacity, 0.12)}.md-org-chart__node--selected>.md-org-chart__state-layer{opacity:0.08;background:var(--_selected-color)}.md-org-chart__avatar{flex:0 0 auto;--md-avatar-container-color:var(--md-sys-color-primary-container, #eaddff);--md-avatar-label-color:var(--md-sys-color-on-primary-container, #21005d)}.md-org-chart__text{display:flex;flex-direction:column;min-inline-size:0;gap:2px}.md-org-chart__name{font-family:var(--md-sys-typescale-title-small-font-family, Roboto, system-ui, sans-serif);font-size:max(11px, calc(14px + var(--md-sys-density-scale, 0) * 0.5px));font-weight:600;line-height:max(16px, calc(20px + var(--md-sys-density-scale, 0) * 1px));color:var(--md-sys-color-on-surface, #1d1b20);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.md-org-chart__title{font-size:max(10px, calc(12px + var(--md-sys-density-scale, 0) * 0.5px));line-height:max(14px, calc(16px + var(--md-sys-density-scale, 0) * 0.5px));color:var(--md-sys-color-on-surface-variant, #49454f);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.md-org-chart__toggle-tip{position:absolute;inset-block-end:calc(-1 * var(--_toggle-size) / 2);inset-inline-start:calc(50% - var(--_toggle-size) / 2);z-index:3;line-height:0}.md-org-chart__toggle{--md-icon-button-container-color:var(--md-sys-color-surface-container-high, #ece6f0);--md-icon-button-container-width:var(--_toggle-size);--md-icon-button-container-height:var(--_toggle-size);--md-icon-button-icon-size:calc(var(--_toggle-size) * 0.66)}@keyframes md-org-chart-grow{from{opacity:0;transform:translateY(-8px) scale(0.96)}to{opacity:1;transform:none}}.md-org-chart__group{animation:md-org-chart-grow var(--_duration) var(--_easing);transform-origin:top center}.md-org-chart__empty{padding:32px 16px;text-align:center;color:var(--md-sys-color-on-surface-variant, #49454f);font-size:var(--md-sys-typescale-body-medium-size, 14px)}:host([orientation='horizontal']) .md-org-chart__tree,:host([orientation='horizontal']) .md-org-chart__group{flex-direction:column}:host([orientation='horizontal']) .md-org-chart__group{padding-block-start:0;padding-inline-start:var(--_level-gap)}:host([orientation='horizontal']) .md-org-chart__branch{flex-direction:row;padding-block:calc(var(--_sibling-gap) / 2);padding-inline:var(--_level-gap) 0;}:host([orientation='horizontal']) .md-org-chart__branch:only-child,:host([orientation='horizontal']) .md-org-chart__tree>.md-org-chart__branch{padding-inline-start:0}:host([orientation='horizontal']) .md-org-chart__branch::before,:host([orientation='horizontal']) .md-org-chart__branch::after{inset-block-start:0;inset-inline-start:0;inset-inline-end:auto;inline-size:var(--_level-gap);block-size:50%;border-block-start:0;border-inline-start:var(--_line);}:host([orientation='horizontal']) .md-org-chart__branch::after{inset-block-start:50%;border-block-start:var(--_line);}:host([orientation='horizontal']) .md-org-chart__branch:first-child::before,:host([orientation='horizontal']) .md-org-chart__branch:last-child::after{border:0}:host([orientation='horizontal']) .md-org-chart__branch:last-child::before{border-inline-end:0;border-start-end-radius:0;border-block-end:var(--_line);border-end-start-radius:var(--_elbow)}:host([orientation='horizontal']) .md-org-chart__branch:first-child::after{border-start-start-radius:var(--_elbow)}:host([orientation='horizontal']) .md-org-chart__group::before{inset-block-start:50%;inset-inline-start:0;inline-size:var(--_level-gap);block-size:0;border-inline-start:0;border-block-start:var(--_line)}:host([orientation='horizontal']) .md-org-chart__toggle-tip{inset-block-end:auto;inset-block-start:calc(50% - var(--_toggle-size) / 2);inset-inline-start:auto;inset-inline-end:calc(-1 * var(--_toggle-size) / 2)}:host([orientation='horizontal']) .md-org-chart__viewport{padding:8px calc(var(--_toggle-size) / 2 + 10px) 8px 8px}@keyframes md-org-chart-grow-h{from{opacity:0;transform:translateX(-8px) scale(0.96)}to{opacity:1;transform:none}}:host([orientation='horizontal']) .md-org-chart__group{animation-name:md-org-chart-grow-h;transform-origin:left center}@media (prefers-reduced-motion: reduce){.md-org-chart__node,.md-org-chart__toggle-icon,.md-org-chart__state-layer{transition:none}.md-org-chart__group{animation:none}}: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 h=t(class t extends r{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.mdSelectionChange=e(this,"mdSelectionChange",7);this.mdNodeToggle=e(this,"mdNodeToggle",7);this.nodes=[];this.selectionMode="none";this.selectedIds=[];this.collapsible=true;this.orientation="vertical";this.label="Organization chart";this.expandLabel="Expand";this.collapseLabel="Collapse";this.density=0;this.collapsed=new Set;this.selection=new Set;this.activeId="";this.nodeMap=new Map;this.roots=[];this.handleKeyDown=t=>{const r=t.target;if(!r||r.getAttribute?.("role")!=="treeitem")return;const e=this.nodeMap.get(r.getAttribute("data-id")??"");if(!e)return;const o=getComputedStyle(this.el).direction==="rtl";const a=o?"ArrowLeft":"ArrowRight";const i=o?"ArrowRight":"ArrowLeft";const s=this.visibleItems();const n=s.indexOf(r);switch(t.key){case"ArrowDown":this.focusItem(s[n+1]);break;case"ArrowUp":this.focusItem(s[n-1]);break;case a:if(this.hasChildren(e)){if(!this.isExpanded(e))this.toggle(e);else this.focusItem(this.firstChildItem(r))}break;case i:if(this.hasChildren(e)&&this.isExpanded(e))this.toggle(e);else this.focusItem(this.parentItem(r));break;case"Home":this.focusItem(s[0]);break;case"End":this.focusItem(s[s.length-1]);break;case"Enter":case" ":case"Spacebar":if(this.isSelectable(e))this.select(e);else if(this.hasChildren(e))this.toggle(e);break;default:return}t.preventDefault();t.stopPropagation()};this.handleNodeClick=t=>r=>{if(r.target?.closest(".md-org-chart__toggle"))return;this.activeId=t.id;if(this.isSelectable(t))this.select(t)};this.handleTogglerClick=t=>r=>{r.stopPropagation();this.toggle(t)}}componentWillLoad(){this.syncFromNodes(this.nodes);this.selection=new Set(this.selectedIds??[])}onNodesChange(t){this.syncFromNodes(t)}onSelectedIdsChange(t){this.selection=new Set(t??[])}syncFromNodes(t){const r=this.parseNodes(t);this.nodeMap=new Map;const e=new Set;const o=t=>{for(const r of t){if(!r||r.id==null)continue;this.nodeMap.set(r.id,r);if(r.expanded===false&&r.children?.length)e.add(r.id);if(r.children?.length)o(r.children)}};o(r);this.collapsed=e;if(!this.activeId||!this.nodeMap.has(this.activeId)){this.activeId=r[0]?.id??""}this.roots=r}parseNodes(t){if(Array.isArray(t))return t;if(typeof t==="string"&&t.trim()){try{const r=JSON.parse(t);return Array.isArray(r)?r:[r]}catch{return[]}}return[]}isExpanded(t){return!this.collapsed.has(t.id)}hasChildren(t){return!!t.children&&t.children.length>0}isSelectable(t){return this.selectionMode!=="none"&&t.selectable!==false}toggle(t){if(!this.hasChildren(t))return;const r=new Set(this.collapsed);const e=r.has(t.id);if(e)r.delete(t.id);else r.add(t.id);this.collapsed=r;this.mdNodeToggle.emit({node:t,expanded:e})}select(t){if(!this.isSelectable(t))return;const r=new Set(this.selection);if(this.selectionMode==="single"){const e=r.has(t.id)&&r.size===1;r.clear();if(!e)r.add(t.id)}else{if(r.has(t.id))r.delete(t.id);else r.add(t.id)}this.selection=r;this.selectedIds=Array.from(r);this.mdSelectionChange.emit({node:t,selectedIds:this.selectedIds})}visibleItems(){return Array.from(this.el.shadowRoot?.querySelectorAll('li[role="treeitem"]')??[])}itemFor(t){return this.el.shadowRoot?.querySelector(`li[role="treeitem"][data-id="${m(t.id)}"]`)??null}focusItem(t){if(!t)return;const r=t.getAttribute("data-id");if(r)this.activeId=r;t.focus()}firstChildItem(t){const r=Array.from(t.children).find((t=>t.getAttribute?.("role")==="group"));if(!r)return null;return Array.from(r.children).find((t=>t.getAttribute?.("role")==="treeitem"))??null}parentItem(t){const r=t.parentElement;if(!r||r.getAttribute("role")!=="group")return null;const e=r.parentElement;return e&&e.getAttribute("role")==="treeitem"?e:null}renderNode(t,r,e,a){const i=this.hasChildren(t);const s=this.isExpanded(t);const n=this.isSelectable(t);const c=n&&this.selection.has(t.id);const d=t.id===this.activeId;const l=this.collapsible&&i;return o("li",{role:"treeitem","data-id":t.id,"aria-level":r,"aria-setsize":a,"aria-posinset":e,"aria-expanded":i?String(s):undefined,"aria-selected":n?String(c):undefined,tabindex:d?"0":"-1",class:{"md-org-chart__branch":true,"md-org-chart__branch--collapsed":i&&!s},onKeyDown:this.handleKeyDown,onFocus:()=>this.activeId=t.id},o("div",{class:{"md-org-chart__node":true,"md-org-chart__node--selectable":n,"md-org-chart__node--selected":c},part:`node${c?" node-selected":""}`,style:t.accent?{"--_accent":t.accent}:undefined,onClick:this.handleNodeClick(t)},o("span",{class:"md-org-chart__state-layer",part:"state-layer","aria-hidden":"true"}),n&&o("md-ripple",{class:"md-org-chart__ripple"}),o("md-avatar",{class:"md-org-chart__avatar",part:"avatar",exportparts:"image: avatar-image","aria-hidden":"true",colorFromName:false,src:t.avatar,initials:t.avatarInitials,name:t.name,size:"medium",shape:"circle"}),o("span",{class:"md-org-chart__text"},o("span",{class:"md-org-chart__name",part:"name"},t.name),t.title&&o("span",{class:"md-org-chart__title",part:"title"},t.title)),l&&o("md-tooltip",{class:"md-org-chart__toggle-tip",text:s?this.collapseLabel:this.expandLabel,position:"bottom"},o("md-icon-button",{class:"md-org-chart__toggle",part:"toggle",icon:s?"expand_less":"expand_more",size:"xs",variant:"tonal",shape:"round","aria-hidden":"true","group-tabindex":-1,onPointerDown:t=>t.stopPropagation(),onClick:this.handleTogglerClick(t)}))),i&&s&&o("ul",{role:"group",class:"md-org-chart__group",part:"group"},t.children.map(((e,o)=>this.renderNode(e,r+1,o+1,t.children.length)))))}render(){const t=this.roots;const r=t.length===0;return o(a,{key:"30c2227bc9572fdf2eb6592bdf03409f86d8608e",class:{"md-org-chart":true,"md-org-chart--empty":r}},o("div",{key:"469a05bbafc74a11fe0e8d76012e0b6f94c56536",class:"md-org-chart__viewport",part:"viewport"},r?o("div",{class:"md-org-chart__empty",part:"empty",role:"status"},o("slot",{name:"empty"},"No data")):o("ul",{role:"tree",class:"md-org-chart__tree",part:"tree","aria-label":this.label,"aria-multiselectable":this.selectionMode==="multiple"?"true":undefined},t.map(((r,e)=>this.renderNode(r,1,e+1,t.length))))))}get el(){return this}static get watchers(){return{nodes:[{onNodesChange:0}],selectedIds:[{onSelectedIdsChange:0}]}}static get style(){return l()}},[257,"md-organization-chart",{nodes:[1],selectionMode:[513,"selection-mode"],selectedIds:[1040],collapsible:[4],orientation:[513],label:[1],expandLabel:[1,"expand-label"],collapseLabel:[1,"collapse-label"],density:[514],collapsed:[32],selection:[32],activeId:[32]},undefined,{nodes:[{onNodesChange:0}],selectedIds:[{onSelectedIdsChange:0}]}]);function m(t){return String(t).replace(/["\\\]]/g,"\\$&")}function g(){if(typeof customElements==="undefined"){return}const t=["md-organization-chart","md-avatar","md-icon-button","md-ripple","md-tooltip"];t.forEach((t=>{switch(t){case"md-organization-chart":if(!customElements.get(i(t))){customElements.define(i(t),h)}break;case"md-avatar":if(!customElements.get(i(t))){s()}break;case"md-icon-button":if(!customElements.get(i(t))){n()}break;case"md-ripple":if(!customElements.get(i(t))){c()}break;case"md-tooltip":if(!customElements.get(i(t))){d()}break}}))}g();const _=h;const p=g;export{_ as MdOrganizationChart,p as defineCustomElement};
+//# sourceMappingURL=md-organization-chart.js.map

package/dist/components-csr/md-organization-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["mdOrganizationChartCss","MdOrganizationChart","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","nodes","selectionMode","selectedIds","collapsible","orientation","label","expandLabel","collapseLabel","density","collapsed","Set","selection","activeId","nodeMap","Map","roots","handleKeyDown","e","current","target","getAttribute","node","get","rtl","getComputedStyle","el","direction","forwardKey","backwardKey","items","visibleItems","idx","indexOf","key","focusItem","hasChildren","isExpanded","toggle","firstChildItem","parentItem","length","isSelectable","select","preventDefault","stopPropagation","handleNodeClick","closest","id","handleTogglerClick","componentWillLoad","syncFromNodes","onNodesChange","next","onSelectedIdsChange","input","parseNodes","walk","list","n","set","expanded","children","add","has","Array","isArray","trim","parsed","JSON","parse","selectable","willExpand","delete","mdNodeToggle","emit","wasOnlySelected","size","clear","from","mdSelectionChange","shadowRoot","querySelectorAll","itemFor","querySelector","cssEscape","focus","li","group","find","c","parentElement","parent","renderNode","level","posInSet","setSize","selected","tabbable","showToggle","h","role","String","undefined","tabindex","class","onKeyDown","onFocus","part","style","accent","onClick","exportparts","colorFromName","src","avatar","initials","avatarInitials","name","shape","title","text","position","icon","variant","onPointerDown","map","child","i","render","empty","Host","root","value","replace"],"sources":["src/components/md-organization-chart/md-organization-chart.css?tag=md-organization-chart&encapsulation=shadow","src/components/md-organization-chart/md-organization-chart.tsx"],"sourcesContent":["/* ==========================================================\n   md-organization-chart — Material Design 3 Expressive\n   Hierarchical org tree of avatar cards joined by connectors.\n\n   Layout: the classic pure-CSS connector technique (::before/::after\n   elbows on each branch + a vertical drop on each group), authored with\n   LOGICAL properties so RTL mirrors without extra rules. The viewport\n   pans horizontally when the tree outgrows its container.\n\n   PUBLIC CSS CUSTOM PROPERTIES (override per-instance):\n     --md-org-chart-connector-color     Connector line colour\n     --md-org-chart-connector-width     Connector line thickness\n     --md-org-chart-node-color          Node card background\n     --md-org-chart-node-outline-color  Node card border colour\n     --md-org-chart-node-outline-width  Node card border width\n     --md-org-chart-node-shape          Node card corner radius\n     --md-org-chart-node-min-width      Node card min inline-size\n     --md-org-chart-node-max-width      Node card max inline-size\n     --md-org-chart-selected-color      Selected node accent (border + tint)\n     --md-org-chart-focus-ring-color    Focus outline colour (default: buttons')\n     --md-org-chart-state-layer-color   Hover / selected overlay colour\n     --md-org-chart-toggle-size         Expand/collapse toggler diameter\n     --md-org-chart-level-gap           Vertical gap between levels\n     --md-org-chart-sibling-gap         Horizontal gap between siblings\n     --md-org-chart-duration            Motion duration\n\n   CSS PARTS:\n     viewport      Scroll/pan container\n     tree          The role=\"tree\" root list\n     group         A role=\"group\" child list\n     node          A node card\n     node-selected A selected node card\n     state-layer   Hover / selected overlay\n     avatar        The md-avatar\n     avatar-image  The avatar's <img> (exported)\n     name          Primary label\n     title         Secondary label\n     toggle        Expand / collapse affordance\n     empty         Empty-state container\n\n   SLOTS:\n     empty         Custom empty-state content\n   ========================================================== */\n\n:host {\n  --_connector-color: var(--md-org-chart-connector-color, var(--md-sys-color-outline-variant, #c4c7c5));\n  --_connector-width: var(--md-org-chart-connector-width, 1.5px);\n  --_node-color: var(--md-org-chart-node-color, var(--md-sys-color-surface-container-low, #f7f2fa));\n  --_node-outline: var(--md-org-chart-node-outline-color, var(--md-sys-color-outline-variant, #c4c7c5));\n  --_node-outline-width: var(--md-org-chart-node-outline-width, 1px);\n  --_node-shape: var(--md-org-chart-node-shape, var(--md-sys-shape-corner-medium, 12px));\n  --_node-min-width: var(--md-org-chart-node-min-width, 176px);\n  --_node-max-width: var(--md-org-chart-node-max-width, 260px);\n  --_selected-color: var(--md-org-chart-selected-color, var(--md-sys-color-primary, #6750a4));\n  /* Match the focus ring the buttons use (md-sys-color-secondary). */\n  --_focus-ring-color: var(--md-org-chart-focus-ring-color, var(--md-sys-color-secondary, #625b71));\n  --_toggle-size: var(--md-org-chart-toggle-size, max(20px, calc(24px + var(--md-sys-density-scale, 0) * 1px)));\n  --_state-layer-color: var(--md-org-chart-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));\n  --_accent: var(--md-sys-color-primary, #6750a4);\n  --_level-gap: var(--md-org-chart-level-gap, max(24px, calc(28px + var(--md-sys-density-scale, 0) * 1px)));\n  --_sibling-gap: var(--md-org-chart-sibling-gap, max(8px, calc(12px + var(--md-sys-density-scale, 0) * 1px)));\n  --_duration: var(--md-org-chart-duration, var(--md-sys-motion-duration-medium2, 300ms));\n  --_easing: var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));\n  --_line: var(--_connector-width) solid var(--_connector-color);\n  --_elbow: 12px;\n\n  display: block;\n  box-sizing: border-box;\n  color: var(--md-sys-color-on-surface, #1d1b20);\n  font-family: var(--md-sys-typescale-body-medium-font-family, Roboto, system-ui, sans-serif);\n}\n\n.md-org-chart__viewport {\n  overflow: auto;\n  /* Extra block-end room so a collapsed node's edge-hung toggler (which\n     overhangs the tree by half its size) isn't clipped by `overflow`. */\n  padding: 8px 8px calc(var(--_toggle-size) / 2 + 10px);\n  box-sizing: border-box;\n}\n\n/* ── Lists / connectors ───────────────────────────────────────── */\n\n.md-org-chart__tree,\n.md-org-chart__group {\n  display: flex;\n  justify-content: center;\n  align-items: flex-start;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  position: relative;\n}\n\n/* The tree shrink-wraps and self-centres; when wider than the viewport it\n   left-aligns (margin collapses to 0) and the viewport scrolls. */\n.md-org-chart__tree {\n  inline-size: max-content;\n  margin-inline: auto;\n}\n\n.md-org-chart__group {\n  padding-block-start: var(--_level-gap);\n}\n\n.md-org-chart__branch {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-block-start: var(--_level-gap);\n  padding-inline: calc(var(--_sibling-gap) / 2);\n  outline: none;\n}\n\n/* Horizontal bus halves (top border) meeting at the branch centre, plus the\n   short vertical riser up into the bus (border-inline-start on ::after). */\n.md-org-chart__branch::before,\n.md-org-chart__branch::after {\n  content: '';\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline-end: 50%;\n  inline-size: 50%;\n  block-size: var(--_level-gap);\n  border-block-start: var(--_line);\n}\n\n.md-org-chart__branch::after {\n  inset-inline-end: auto;\n  inset-inline-start: 50%;\n  border-inline-start: var(--_line);\n}\n\n/* Only child: no horizontal bus/riser — just the group's vertical drop. Drop\n   its own block-start padding too, otherwise that padding (with no riser line)\n   leaves a gap between the drop and the child. */\n.md-org-chart__branch:only-child::before,\n.md-org-chart__branch:only-child::after {\n  display: none;\n}\n\n.md-org-chart__branch:only-child {\n  padding-block-start: 0;\n}\n\n/* Trim the outermost overhang and round the two elbows. */\n.md-org-chart__branch:first-child::before,\n.md-org-chart__branch:last-child::after {\n  border: 0;\n}\n\n.md-org-chart__branch:last-child::before {\n  border-inline-end: var(--_line);\n  border-start-end-radius: var(--_elbow);\n}\n\n.md-org-chart__branch:first-child::after {\n  border-start-start-radius: var(--_elbow);\n}\n\n/* Vertical drop from a parent node down to its children's bus. */\n.md-org-chart__group::before {\n  content: '';\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline-start: 50%;\n  inline-size: 0;\n  block-size: var(--_level-gap);\n  border-inline-start: var(--_line);\n}\n\n/* Roots have no incoming connector. */\n.md-org-chart__tree > .md-org-chart__branch {\n  padding-block-start: 0;\n}\n.md-org-chart__tree > .md-org-chart__branch::before,\n.md-org-chart__tree > .md-org-chart__branch::after {\n  display: none;\n}\n\n/* ── Node card ────────────────────────────────────────────────── */\n\n.md-org-chart__node {\n  position: relative;\n  /* Above the sibling group's connector lines (painted later in DOM) so the\n     node and its toggler sit on top of the drop/bus rather than under them. */\n  z-index: 2;\n  display: inline-flex;\n  align-items: center;\n  gap: max(6px, calc(12px + var(--md-sys-density-scale, 0) * 1.5px));\n  padding-block: max(6px, calc(10px + var(--md-sys-density-scale, 0) * 1px));\n  padding-inline: max(8px, calc(14px + var(--md-sys-density-scale, 0) * 1.5px));\n  min-inline-size: var(--_node-min-width);\n  max-inline-size: var(--_node-max-width);\n  box-sizing: border-box;\n  border-radius: var(--_node-shape);\n  background: var(--_node-color);\n  border: var(--_node-outline-width) solid var(--_node-outline);\n  color: var(--md-sys-color-on-surface, #1d1b20);\n  transition:\n    border-color var(--_duration) var(--_easing),\n    box-shadow var(--_duration) var(--_easing);\n  /* No transform / will-change here: either would make the node a containing\n     block for the toggler tooltip's position:fixed popup, cutting it off. */\n}\n\n.md-org-chart__node--selectable {\n  cursor: pointer;\n}\n\n.md-org-chart__node--selectable:hover {\n  box-shadow: var(--md-sys-elevation-1, 0 1px 3px 1px rgba(0, 0, 0, 0.15));\n}\n\n/* Selection ring via border-colour + an outset box-shadow — NOT a wider border.\n   Growing the border would move the padding box and shift the edge-hung toggler,\n   so width + padding stay constant and nothing in the card moves on select. */\n.md-org-chart__node--selected {\n  border-color: var(--_selected-color);\n  box-shadow: 0 0 0 1px var(--_selected-color);\n}\n\n.md-org-chart__node--selected.md-org-chart__node--selectable:hover {\n  box-shadow:\n    0 0 0 1px var(--_selected-color),\n    var(--md-sys-elevation-1, 0 1px 3px 1px rgba(0, 0, 0, 0.15));\n}\n\n/* Focus ring on the focusable treeitem — same colour as the buttons. */\n.md-org-chart__branch:focus-visible > .md-org-chart__node {\n  outline: 3px solid var(--_focus-ring-color);\n  outline-offset: 2px;\n}\n\n/* Selection ripple (auto-attaches to the node card; self-clips to the radius,\n   so the edge-hung toggler is unaffected). */\n.md-org-chart__ripple {\n  --md-ripple-color: var(--_selected-color);\n  border-radius: inherit;\n}\n\n.md-org-chart__state-layer {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background: var(--_state-layer-color);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--_duration) var(--_easing);\n}\n\n.md-org-chart__node--selectable:hover > .md-org-chart__state-layer {\n  opacity: var(--md-sys-state-hover-state-layer-opacity, 0.08);\n}\n\n.md-org-chart__node--selectable:active > .md-org-chart__state-layer {\n  opacity: var(--md-sys-state-pressed-state-layer-opacity, 0.12);\n}\n\n.md-org-chart__node--selected > .md-org-chart__state-layer {\n  opacity: 0.08;\n  background: var(--_selected-color);\n}\n\n.md-org-chart__avatar {\n  flex: 0 0 auto;\n  --md-avatar-container-color: var(--md-sys-color-primary-container, #eaddff);\n  --md-avatar-label-color: var(--md-sys-color-on-primary-container, #21005d);\n}\n\n.md-org-chart__text {\n  display: flex;\n  flex-direction: column;\n  min-inline-size: 0;\n  gap: 2px;\n}\n\n.md-org-chart__name {\n  font-family: var(--md-sys-typescale-title-small-font-family, Roboto, system-ui, sans-serif);\n  font-size: max(11px, calc(14px + var(--md-sys-density-scale, 0) * 0.5px));\n  font-weight: 600;\n  line-height: max(16px, calc(20px + var(--md-sys-density-scale, 0) * 1px));\n  color: var(--md-sys-color-on-surface, #1d1b20);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.md-org-chart__title {\n  font-size: max(10px, calc(12px + var(--md-sys-density-scale, 0) * 0.5px));\n  line-height: max(14px, calc(16px + var(--md-sys-density-scale, 0) * 0.5px));\n  color: var(--md-sys-color-on-surface-variant, #49454f);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* ── Toggler ──────────────────────────────────────────────────── */\n\n/* The toggler is an md-icon-button hung on the node's bottom edge, over the\n   connector drop. z-index keeps it above the lines; its opaque tonal fill\n   masks the line where they meet. */\n/* The md-tooltip wrapper carries the positioning (centred on the node's bottom\n   edge, half in / half out) and stacks above the connector lines. Centred with\n   calc() (NOT transform): a transform on the tooltip host would make it the\n   containing block for its own position:fixed popup, cutting it off / mis-placing\n   it. inset-inline-start keeps this direction-aware for RTL. */\n.md-org-chart__toggle-tip {\n  position: absolute;\n  inset-block-end: calc(-1 * var(--_toggle-size) / 2);\n  inset-inline-start: calc(50% - var(--_toggle-size) / 2);\n  z-index: 3;\n  line-height: 0;\n}\n\n.md-org-chart__toggle {\n  --md-icon-button-container-color: var(--md-sys-color-surface-container-high, #ece6f0);\n  --md-icon-button-container-width: var(--_toggle-size);\n  --md-icon-button-container-height: var(--_toggle-size);\n  --md-icon-button-icon-size: calc(var(--_toggle-size) * 0.66);\n}\n\n/* ── Group enter animation (expressive) ───────────────────────── */\n\n@keyframes md-org-chart-grow {\n  from {\n    opacity: 0;\n    transform: translateY(-8px) scale(0.96);\n  }\n  to {\n    opacity: 1;\n    transform: none;\n  }\n}\n\n.md-org-chart__group {\n  animation: md-org-chart-grow var(--_duration) var(--_easing);\n  transform-origin: top center;\n}\n\n/* ── Empty state ──────────────────────────────────────────────── */\n\n.md-org-chart__empty {\n  padding: 32px 16px;\n  text-align: center;\n  color: var(--md-sys-color-on-surface-variant, #49454f);\n  font-size: var(--md-sys-typescale-body-medium-size, 14px);\n}\n\n/* ── Horizontal orientation ───────────────────────────────────────\n   Left→right tree — the block↔inline mirror of the default (vertical)\n   connector geometry above. Still authored in LOGICAL properties, so RTL\n   flips it to right→left with no extra rules. Levels now advance on the\n   inline axis; siblings stack on the block axis. */\n\n:host([orientation='horizontal']) .md-org-chart__tree,\n:host([orientation='horizontal']) .md-org-chart__group {\n  flex-direction: column;\n}\n\n/* Level gap runs inline (parent → child) instead of block. */\n:host([orientation='horizontal']) .md-org-chart__group {\n  padding-block-start: 0;\n  padding-inline-start: var(--_level-gap);\n}\n\n:host([orientation='horizontal']) .md-org-chart__branch {\n  flex-direction: row;\n  /* Node beside its child group (was column: node above group). */\n  padding-block: calc(var(--_sibling-gap) / 2); /* siblings spread on block now */\n  padding-inline: var(--_level-gap) 0;           /* incoming-connector strip on inline-start */\n}\n\n/* Roots and only-children take no incoming inline gap. */\n:host([orientation='horizontal']) .md-org-chart__branch:only-child,\n:host([orientation='horizontal']) .md-org-chart__tree > .md-org-chart__branch {\n  padding-inline-start: 0;\n}\n\n/* Sibling bus (now vertical, on the inline-start edge) + a short horizontal\n   riser into the node. Mirrors the vertical ::before/::after exactly. */\n:host([orientation='horizontal']) .md-org-chart__branch::before,\n:host([orientation='horizontal']) .md-org-chart__branch::after {\n  inset-block-start: 0;\n  inset-inline-start: 0;\n  inset-inline-end: auto;\n  inline-size: var(--_level-gap);\n  block-size: 50%;\n  border-block-start: 0;           /* clear the vertical-mode horizontal bus */\n  border-inline-start: var(--_line); /* vertical bus */\n}\n\n:host([orientation='horizontal']) .md-org-chart__branch::after {\n  inset-block-start: 50%;\n  border-block-start: var(--_line); /* the single horizontal riser */\n}\n\n/* Trim the outermost overhang. The :host-scoped bus rules above out-specify the\n   axis-agnostic `border:0` trims (0-3-1 vs 0-2-1), so re-assert them here at\n   matching specificity — otherwise the vertical bus overshoots the first/last\n   sibling. */\n:host([orientation='horizontal']) .md-org-chart__branch:first-child::before,\n:host([orientation='horizontal']) .md-org-chart__branch:last-child::after {\n  border: 0;\n}\n\n/* Round the two outermost elbows where the bus turns into the end risers.\n   The last child's riser is reconstructed on ::before since its ::after is\n   trimmed. */\n:host([orientation='horizontal']) .md-org-chart__branch:last-child::before {\n  border-inline-end: 0;             /* undo the vertical-mode riser rebuild */\n  border-start-end-radius: 0;       /* undo the vertical-mode elbow */\n  border-block-end: var(--_line);\n  border-end-start-radius: var(--_elbow);\n}\n:host([orientation='horizontal']) .md-org-chart__branch:first-child::after {\n  border-start-start-radius: var(--_elbow);\n}\n\n/* Parent → children drop is now a horizontal line. */\n:host([orientation='horizontal']) .md-org-chart__group::before {\n  inset-block-start: 50%;\n  inset-inline-start: 0;\n  inline-size: var(--_level-gap);\n  block-size: 0;\n  border-inline-start: 0;\n  border-block-start: var(--_line);\n}\n\n/* Toggler hangs on the node's inline-end edge (over the outgoing drop),\n   vertically centred — instead of the bottom edge in vertical mode. */\n:host([orientation='horizontal']) .md-org-chart__toggle-tip {\n  inset-block-end: auto;\n  inset-block-start: calc(50% - var(--_toggle-size) / 2);\n  inset-inline-start: auto;\n  inset-inline-end: calc(-1 * var(--_toggle-size) / 2);\n}\n\n/* Give the overhanging inline-end toggler room instead of the block-end room. */\n:host([orientation='horizontal']) .md-org-chart__viewport {\n  padding: 8px calc(var(--_toggle-size) / 2 + 10px) 8px 8px;\n}\n\n/* Enter animation grows from the inline-start (parent) side. */\n@keyframes md-org-chart-grow-h {\n  from {\n    opacity: 0;\n    transform: translateX(-8px) scale(0.96);\n  }\n  to {\n    opacity: 1;\n    transform: none;\n  }\n}\n:host([orientation='horizontal']) .md-org-chart__group {\n  animation-name: md-org-chart-grow-h;\n  transform-origin: left center;\n}\n\n/* ── Reduced motion ───────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .md-org-chart__node,\n  .md-org-chart__toggle-icon,\n  .md-org-chart__state-layer {\n    transition: none;\n  }\n  .md-org-chart__group {\n    animation: none;\n  }\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 {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Element,\n  Watch,\n} from '@stencil/core';\n\n/**\n * A single node in the organization tree. Only `id` and `name` are required;\n * everything else is optional so the model stays terse.\n */\nexport interface OrgChartNode {\n  /** Stable identifier — used for selection, expansion, and eventing. */\n  id: string;\n  /** Primary label (person / unit name), rendered in the emphasis weight. */\n  name: string;\n  /** Secondary label (role / department), rendered muted under the name. */\n  title?: string;\n  /** Avatar image URL. Falls back to initials → name-derived initials. */\n  avatar?: string;\n  /** Explicit avatar initials (overrides name-derived ones). */\n  avatarInitials?: string;\n  /** Optional accent colour for the node's avatar ring + selected tint. */\n  accent?: string;\n  /** Initial expanded state for this node's subtree (default: expanded). */\n  expanded?: boolean;\n  /** When false the node cannot be selected (default: selectable). */\n  selectable?: boolean;\n  /** Child nodes. */\n  children?: OrgChartNode[];\n}\n\ntype NodeInput = OrgChartNode[] | string | null | undefined;\n\n/** Detail for the `mdSelectionChange` event. */\nexport interface OrgChartSelectionChangeDetail {\n  /** The node that was clicked / toggled. */\n  node: OrgChartNode;\n  /** The full set of selected ids after the change. */\n  selectedIds: string[];\n}\n\n/** Detail for the `mdNodeToggle` event. */\nexport interface OrgChartToggleDetail {\n  /** The node whose subtree was expanded / collapsed. */\n  node: OrgChartNode;\n  /** Whether the node is now expanded. */\n  expanded: boolean;\n}\n\n/**\n * `md-organization-chart` — Material Design 3 Expressive organization chart.\n *\n * Visualises hierarchical org data as a top-down tree of avatar cards joined\n * by connector lines. Data-driven (`nodes`), with collapsible subtrees,\n * optional single/multiple selection, and the full WAI-ARIA **tree** pattern\n * (roving tabindex, Arrow/Home/End navigation, Enter/Space to select).\n *\n * The surface pans horizontally when it outgrows its container, so a wide org\n * stays usable on small screens. Direction-aware (RTL mirrors the layout and\n * swaps the horizontal arrow keys); every affordance label is a prop for\n * localisation.\n *\n * ```html\n * <md-organization-chart selection-mode=\"single\"></md-organization-chart>\n * <script>\n *   document.querySelector('md-organization-chart').nodes = [{\n *     id: 'ceo', name: 'Amy Elsner', title: 'Founder & CEO',\n *     children: [{ id: 'prod', name: 'Asiya Javayant', title: 'Product Lead' }],\n *   }];\n * </script>\n * ```\n */\n@Component({\n  tag: 'md-organization-chart',\n  styleUrl: 'md-organization-chart.css',\n  shadow: true,\n})\nexport class MdOrganizationChart {\n  @Element() el!: HTMLElement;\n\n  /**\n   * The organization tree. Accepts an `OrgChartNode[]` (property) or a JSON\n   * string (attribute). Multiple roots are supported (rendered side by side).\n   */\n  @Prop() nodes: NodeInput = [];\n\n  /**\n   * Selection behaviour:\n   *   - `'none'`     — nodes are not selectable (default).\n   *   - `'single'`   — one node at a time.\n   *   - `'multiple'` — any number of nodes.\n   */\n  @Prop({ reflect: true }) selectionMode: 'none' | 'single' | 'multiple' = 'none';\n\n  /** Selected node ids (controlled + initial). Kept in sync as the user selects. */\n  @Prop({ mutable: true }) selectedIds: string[] = [];\n\n  /** Show expand/collapse togglers on nodes that have children. */\n  @Prop() collapsible: boolean = true;\n\n  /**\n   * Layout direction of the tree:\n   *   - `'vertical'`   — top-down (default).\n   *   - `'horizontal'` — left-to-right; RTL mirrors it right-to-left.\n   *\n   * Only the visual layout changes — the tree's ARIA semantics and keyboard\n   * model (Arrow Left/Right = collapse/expand, Up/Down = move) are unchanged.\n   */\n  @Prop({ reflect: true }) orientation: 'vertical' | 'horizontal' = 'vertical';\n\n  /** Accessible name for the tree (localisable). */\n  @Prop({ attribute: 'label' }) label: string = 'Organization chart';\n\n  /** Toggler accessible label when a node is collapsed (localisable). */\n  @Prop({ attribute: 'expand-label' }) expandLabel: string = 'Expand';\n\n  /** Toggler accessible label when a node is expanded (localisable). */\n  @Prop({ attribute: 'collapse-label' }) collapseLabel: string = 'Collapse';\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  /** Fired when the selection changes. */\n  @Event() mdSelectionChange!: EventEmitter<OrgChartSelectionChangeDetail>;\n\n  /** Fired when a node is expanded or collapsed. */\n  @Event() mdNodeToggle!: EventEmitter<OrgChartToggleDetail>;\n\n  /** Ids whose subtree is collapsed (default: everything expanded). */\n  @State() private collapsed = new Set<string>();\n  /** Working selection set (mirrors `selectedIds`). */\n  @State() private selection = new Set<string>();\n  /** Roving-tabindex owner — the one node reachable with Tab. */\n  @State() private activeId = '';\n\n  private nodeMap = new Map<string, OrgChartNode>();\n\n  componentWillLoad() {\n    this.syncFromNodes(this.nodes);\n    this.selection = new Set(this.selectedIds ?? []);\n  }\n\n  @Watch('nodes')\n  onNodesChange(next: NodeInput) {\n    this.syncFromNodes(next);\n  }\n\n  @Watch('selectedIds')\n  onSelectedIdsChange(next: string[]) {\n    this.selection = new Set(next ?? []);\n  }\n\n  /** Parse the incoming nodes, (re)build the id map, seed collapse + active. */\n  private syncFromNodes(input: NodeInput) {\n    const roots = this.parseNodes(input);\n    this.nodeMap = new Map();\n    const collapsed = new Set<string>();\n    const walk = (list: OrgChartNode[]) => {\n      for (const n of list) {\n        if (!n || n.id == null) continue;\n        this.nodeMap.set(n.id, n);\n        if (n.expanded === false && n.children?.length) collapsed.add(n.id);\n        if (n.children?.length) walk(n.children);\n      }\n    };\n    walk(roots);\n    this.collapsed = collapsed;\n    // Keep the roving owner valid; default to the first root.\n    if (!this.activeId || !this.nodeMap.has(this.activeId)) {\n      this.activeId = roots[0]?.id ?? '';\n    }\n    this.roots = roots;\n  }\n\n  private roots: OrgChartNode[] = [];\n\n  private parseNodes(input: NodeInput): OrgChartNode[] {\n    if (Array.isArray(input)) return input;\n    if (typeof input === 'string' && input.trim()) {\n      try {\n        const parsed = JSON.parse(input);\n        return Array.isArray(parsed) ? parsed : [parsed];\n      } catch {\n        return [];\n      }\n    }\n    return [];\n  }\n\n  private isExpanded(node: OrgChartNode): boolean {\n    return !this.collapsed.has(node.id);\n  }\n\n  private hasChildren(node: OrgChartNode): boolean {\n    return !!node.children && node.children.length > 0;\n  }\n\n  private isSelectable(node: OrgChartNode): boolean {\n    return this.selectionMode !== 'none' && node.selectable !== false;\n  }\n\n  private toggle(node: OrgChartNode) {\n    if (!this.hasChildren(node)) return;\n    const next = new Set(this.collapsed);\n    const willExpand = next.has(node.id);\n    if (willExpand) next.delete(node.id);\n    else next.add(node.id);\n    this.collapsed = next;\n    this.mdNodeToggle.emit({ node, expanded: willExpand });\n  }\n\n  private select(node: OrgChartNode) {\n    if (!this.isSelectable(node)) return;\n    const next = new Set(this.selection);\n    if (this.selectionMode === 'single') {\n      const wasOnlySelected = next.has(node.id) && next.size === 1;\n      next.clear();\n      if (!wasOnlySelected) next.add(node.id);\n    } else {\n      if (next.has(node.id)) next.delete(node.id);\n      else next.add(node.id);\n    }\n    this.selection = next;\n    this.selectedIds = Array.from(next);\n    this.mdSelectionChange.emit({ node, selectedIds: this.selectedIds });\n  }\n\n  // ── Keyboard: WAI-ARIA tree pattern ──────────────────────────────────────\n  private visibleItems(): HTMLElement[] {\n    return Array.from(\n      this.el.shadowRoot?.querySelectorAll('li[role=\"treeitem\"]') ?? [],\n    ) as HTMLElement[];\n  }\n\n  private itemFor(node: OrgChartNode): HTMLElement | null {\n    return (\n      (this.el.shadowRoot?.querySelector(\n        `li[role=\"treeitem\"][data-id=\"${cssEscape(node.id)}\"]`,\n      ) as HTMLElement | null) ?? null\n    );\n  }\n\n  private focusItem(el: HTMLElement | null | undefined) {\n    if (!el) return;\n    const id = el.getAttribute('data-id');\n    if (id) this.activeId = id;\n    el.focus();\n  }\n\n  private firstChildItem(li: HTMLElement): HTMLElement | null {\n    const group = Array.from(li.children).find(\n      (c) => (c as HTMLElement).getAttribute?.('role') === 'group',\n    ) as HTMLElement | undefined;\n    if (!group) return null;\n    return (\n      (Array.from(group.children).find(\n        (c) => (c as HTMLElement).getAttribute?.('role') === 'treeitem',\n      ) as HTMLElement | undefined) ?? null\n    );\n  }\n\n  private parentItem(li: HTMLElement): HTMLElement | null {\n    const group = li.parentElement;\n    if (!group || group.getAttribute('role') !== 'group') return null;\n    const parent = group.parentElement;\n    return parent && parent.getAttribute('role') === 'treeitem'\n      ? (parent as HTMLElement)\n      : null;\n  }\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    const current = e.target as HTMLElement;\n    if (!current || current.getAttribute?.('role') !== 'treeitem') return;\n    const node = this.nodeMap.get(current.getAttribute('data-id') ?? '');\n    if (!node) return;\n\n    const rtl = getComputedStyle(this.el).direction === 'rtl';\n    const forwardKey = rtl ? 'ArrowLeft' : 'ArrowRight';\n    const backwardKey = rtl ? 'ArrowRight' : 'ArrowLeft';\n    const items = this.visibleItems();\n    const idx = items.indexOf(current);\n\n    switch (e.key) {\n      case 'ArrowDown':\n        this.focusItem(items[idx + 1]);\n        break;\n      case 'ArrowUp':\n        this.focusItem(items[idx - 1]);\n        break;\n      case forwardKey:\n        if (this.hasChildren(node)) {\n          if (!this.isExpanded(node)) this.toggle(node);\n          else this.focusItem(this.firstChildItem(current));\n        }\n        break;\n      case backwardKey:\n        if (this.hasChildren(node) && this.isExpanded(node)) this.toggle(node);\n        else this.focusItem(this.parentItem(current));\n        break;\n      case 'Home':\n        this.focusItem(items[0]);\n        break;\n      case 'End':\n        this.focusItem(items[items.length - 1]);\n        break;\n      case 'Enter':\n      case ' ':\n      case 'Spacebar':\n        if (this.isSelectable(node)) this.select(node);\n        else if (this.hasChildren(node)) this.toggle(node);\n        break;\n      default:\n        return;\n    }\n    e.preventDefault();\n    e.stopPropagation();\n  };\n\n  private handleNodeClick = (node: OrgChartNode) => (e: MouseEvent) => {\n    // Toggler clicks are handled on the toggler itself.\n    if ((e.target as HTMLElement)?.closest('.md-org-chart__toggle')) return;\n    this.activeId = node.id;\n    if (this.isSelectable(node)) this.select(node);\n  };\n\n  private handleTogglerClick = (node: OrgChartNode) => (e: MouseEvent) => {\n    e.stopPropagation();\n    this.toggle(node);\n  };\n\n  private renderNode(node: OrgChartNode, level: number, posInSet: number, setSize: number) {\n    const has = this.hasChildren(node);\n    const expanded = this.isExpanded(node);\n    const selectable = this.isSelectable(node);\n    const selected = selectable && this.selection.has(node.id);\n    const tabbable = node.id === this.activeId;\n    const showToggle = this.collapsible && has;\n\n    return (\n      <li\n        role=\"treeitem\"\n        data-id={node.id}\n        aria-level={level}\n        aria-setsize={setSize}\n        aria-posinset={posInSet}\n        aria-expanded={has ? String(expanded) : undefined}\n        aria-selected={selectable ? String(selected) : undefined}\n        tabindex={tabbable ? '0' : '-1'}\n        class={{\n          'md-org-chart__branch': true,\n          'md-org-chart__branch--collapsed': has && !expanded,\n        }}\n        onKeyDown={this.handleKeyDown}\n        onFocus={() => (this.activeId = node.id)}\n      >\n        <div\n          class={{\n            'md-org-chart__node': true,\n            'md-org-chart__node--selectable': selectable,\n            'md-org-chart__node--selected': selected,\n          }}\n          part={`node${selected ? ' node-selected' : ''}`}\n          style={node.accent ? { '--_accent': node.accent } : undefined}\n          onClick={this.handleNodeClick(node)}\n        >\n          <span class=\"md-org-chart__state-layer\" part=\"state-layer\" aria-hidden=\"true\"></span>\n          {selectable && <md-ripple class=\"md-org-chart__ripple\"></md-ripple>}\n          <md-avatar\n            class=\"md-org-chart__avatar\"\n            part=\"avatar\"\n            exportparts=\"image: avatar-image\"\n            // Decorative: the node's name is already announced as the treeitem's\n            // text, so exposing the avatar's label would double-speak it. The\n            // auto per-name palette is disabled in favour of a fixed AA-contrast\n            // pair (see CSS) — initials here are a photo fallback, not identity.\n            aria-hidden=\"true\"\n            colorFromName={false}\n            src={node.avatar}\n            initials={node.avatarInitials}\n            name={node.name}\n            size=\"medium\"\n            shape=\"circle\"\n          ></md-avatar>\n          <span class=\"md-org-chart__text\">\n            <span class=\"md-org-chart__name\" part=\"name\">{node.name}</span>\n            {node.title && (\n              <span class=\"md-org-chart__title\" part=\"title\">{node.title}</span>\n            )}\n          </span>\n          {showToggle && (\n            // Decorative pointer affordance: expand/collapse is exposed to AT via\n            // the treeitem's aria-expanded + Arrow keys, so the button is\n            // aria-hidden and taken out of the tab order (group-tabindex=-1) to\n            // avoid a nested interactive control inside the treeitem. The label\n            // rides in the library md-tooltip rather than a native `title`.\n            <md-tooltip\n              class=\"md-org-chart__toggle-tip\"\n              text={expanded ? this.collapseLabel : this.expandLabel}\n              position=\"bottom\"\n            >\n              <md-icon-button\n                class=\"md-org-chart__toggle\"\n                part=\"toggle\"\n                icon={expanded ? 'expand_less' : 'expand_more'}\n                size=\"xs\"\n                variant=\"tonal\"\n                shape=\"round\"\n                aria-hidden=\"true\"\n                group-tabindex={-1}\n                onPointerDown={(e: PointerEvent) => e.stopPropagation()}\n                onClick={this.handleTogglerClick(node)}\n              ></md-icon-button>\n            </md-tooltip>\n          )}\n        </div>\n\n        {has && expanded && (\n          <ul role=\"group\" class=\"md-org-chart__group\" part=\"group\">\n            {node.children!.map((child, i) =>\n              this.renderNode(child, level + 1, i + 1, node.children!.length),\n            )}\n          </ul>\n        )}\n      </li>\n    );\n  }\n\n  render() {\n    const roots = this.roots;\n    const empty = roots.length === 0;\n\n    return (\n      <Host\n        class={{\n          'md-org-chart': true,\n          'md-org-chart--empty': empty,\n        }}\n      >\n        <div class=\"md-org-chart__viewport\" part=\"viewport\">\n          {empty ? (\n            <div class=\"md-org-chart__empty\" part=\"empty\" role=\"status\">\n              <slot name=\"empty\">No data</slot>\n            </div>\n          ) : (\n            <ul\n              role=\"tree\"\n              class=\"md-org-chart__tree\"\n              part=\"tree\"\n              aria-label={this.label}\n              aria-multiselectable={\n                this.selectionMode === 'multiple' ? 'true' : undefined\n              }\n            >\n              {roots.map((root, i) => this.renderNode(root, 1, i + 1, roots.length))}\n            </ul>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n\n/** Minimal CSS.escape shim (attribute-selector safe) for id values. */\nfunction cssEscape(value: string): string {\n  return String(value).replace(/[\"\\\\\\]]/g, '\\\\$&');\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components-csr/md-otp-field.js

@@ -0,0 +1,2 @@
+import{p as t,H as e,c as s,h as i,d as o,t as r}from"./p-bSpXNc5J.js";import{g as l,c as a,r as n,s as d,a as c}from"./p-DWxN44zD.js";const h=()=>`:host{--_cell-width:var(--md-otp-field-cell-width, max(32px, calc(48px + var(--md-sys-density-scale, 0) * 4px)));--_cell-height:var(--md-otp-field-cell-height, max(40px, calc(56px + var(--md-sys-density-scale, 0) * 4px)));--_cell-gap:var(--md-otp-field-cell-gap, var(--md-sys-spacing-gap-sm, 8px));--_cell-shape:var(--md-otp-field-cell-shape, var(--md-sys-shape-corner-small, 8px));--_outline-color:var(--md-otp-field-outline-color, var(--md-sys-color-outline, #79747E));--_focus-color:var(--md-otp-field-focus-color, var(--md-sys-color-primary, #6750A4));--_font-size:var(--md-otp-field-font-size, max(16px, calc(24px + var(--md-sys-density-scale, 0) * 1px)));--_error-color:var(--md-sys-color-error, #B3261E);--_text-color:var(--md-sys-color-on-surface, #1C1B1F);--_support-color:var(--md-sys-color-on-surface-variant, #49454F);display:inline-flex;flex-direction:column;font-family:var(--md-sys-typescale-body-large-font-family, Roboto, sans-serif);box-sizing:border-box}.md-otp-field__cells{display:flex;align-items:center;flex-wrap:wrap;gap:var(--_cell-gap);direction:ltr}.md-otp-field__cell{box-sizing:border-box;inline-size:var(--_cell-width);block-size:var(--_cell-height);min-inline-size:0;padding:0;margin:0;border:1px solid var(--_outline-color);border-radius:var(--_cell-shape);background:transparent;color:var(--_text-color);caret-color:var(--_focus-color);text-align:center;font-family:inherit;font-size:var(--_font-size);font-weight:var(--md-sys-typescale-headline-small-font-weight, 400);line-height:1;outline:none;transition:border-color var(--md-sys-motion-duration-short2, 100ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1))}.md-otp-field__cell:hover:not(:focus):not(:disabled){border-color:var(--md-sys-color-on-surface, #1C1B1F)}.md-otp-field__cell:focus{border-color:var(--_focus-color);border-width:3px;transition:none}:host(.md-otp-field--error) .md-otp-field__cell{border-color:var(--_error-color);color:var(--_error-color);caret-color:var(--_error-color)}:host(.md-otp-field--error) .md-otp-field__cell:hover:not(:focus):not(:disabled){border-color:var(--md-sys-color-on-error-container, #8C1D18)}:host(.md-otp-field--error) .md-otp-field__cell:focus{border-color:var(--_error-color);border-width:3px;transition:none}:host(.md-otp-field--readonly) .md-otp-field__cell:hover:not(:focus){border-color:var(--_outline-color)}:host(.md-otp-field--readonly.md-otp-field--error) .md-otp-field__cell:hover:not(:focus){border-color:var(--_error-color)}:host(.md-otp-field--disabled){pointer-events:none}.md-otp-field__cell:disabled{border-color:color-mix(in srgb, var(--md-sys-color-on-surface, #1C1B1F) calc(var(--md-sys-state-disabled-container-opacity, 0.12) * 100%), transparent);color:color-mix(in srgb, var(--md-sys-color-on-surface, #1C1B1F) calc(var(--md-sys-state-disabled-content-opacity, 0.38) * 100%), transparent)}:host(.md-otp-field--disabled) .md-otp-field__support-text{color:color-mix(in srgb, var(--md-sys-color-on-surface, #1C1B1F) calc(var(--md-sys-state-disabled-content-opacity, 0.38) * 100%), transparent)}:host(.md-otp-field--disabled) .md-otp-field__separator-dot{background:color-mix(in srgb, var(--md-sys-color-on-surface, #1C1B1F) calc(var(--md-sys-state-disabled-container-opacity, 0.12) * 100%), transparent)}.md-otp-field__separator{display:inline-flex;align-items:center;justify-content:center;color:var(--_support-color);min-inline-size:max(8px, calc(12px + var(--md-sys-density-scale, 0) * 1px));user-select:none}.md-otp-field__separator-dot{inline-size:max(6px, calc(8px + var(--md-sys-density-scale, 0) * 0.5px));block-size:max(6px, calc(8px + var(--md-sys-density-scale, 0) * 0.5px));border-radius:var(--md-sys-shape-corner-full, 9999px);background:var(--_outline-color)}.md-otp-field__support-row{padding-block-start:4px;padding-inline:4px}.md-otp-field__support-text{font-size:max(10px, calc(12px + var(--md-sys-density-scale, 0) * 0.5px));line-height:max(14px, calc(16px + var(--md-sys-density-scale, 0) * 0.5px));color:var(--_support-color)}.md-otp-field__support-text--error{color:var(--_error-color)}: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}@media (prefers-reduced-motion: reduce){.md-otp-field__cell{transition-duration:0.01ms !important}}@media (forced-colors: active){.md-otp-field__cell{forced-color-adjust:none;border-color:ButtonText;background:Field;color:FieldText;caret-color:FieldText}.md-otp-field__cell:focus{border-color:Highlight}.md-otp-field__cell:hover:not(:focus):not(:disabled){border-color:Highlight}:host(.md-otp-field--error) .md-otp-field__cell{border-color:LinkText;color:FieldText;caret-color:FieldText}:host(.md-otp-field--error) .md-otp-field__cell:focus,:host(.md-otp-field--error) .md-otp-field__cell:hover:not(:focus):not(:disabled){border-color:LinkText}.md-otp-field__cell:disabled{border-color:GrayText;color:GrayText}.md-otp-field__support-text{color:CanvasText}.md-otp-field__support-text--error{color:LinkText}:host(.md-otp-field--disabled) .md-otp-field__support-text{color:GrayText}.md-otp-field__separator-dot{background:CanvasText}}`;const p=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.mdInput=s(this,"mdInput",7);this.mdChange=s(this,"mdChange",7);this.mdComplete=s(this,"mdComplete",7);this.mdInvalidInput=s(this,"mdInvalidInput",7);this.mdValidityChange=s(this,"mdValidityChange",5);this.internals=this.attachInternals();this.length=6;this.value="";this.validationType="numeric";this.transform="none";this.mask=false;this.autoSubmit=false;this.groupSize=0;this.inputMode="";this.name="";this.disabled=false;this.readOnly=false;this.required=false;this.error=false;this.errorText="";this.supportingText="";this.label="One-time code";this.cellLabelTemplate="Character {index} of {length}";this.valueMissingLabel="Please enter the complete code.";this.incompleteLabel="";this.density=0;this.reserveSupportingSpace=false;this.formDisabled=false;this.inputEls=[];this.uid=`md-otp-field-${Math.random().toString(36).slice(2,7)}`;this.customValidityMessage="";this.lastCommitted="";this.lastValidityKey=null;this.handleInput=t=>{const e=t.target;const s=this.indexOfCell(e);if(s<0)return;if(this.isDisabled||this.readOnly){this.syncCellDom();return}const i=e.value;const o=this.value;if(i===""){if(s<o.length){const t=this.updateValue(o.slice(0,s)+o.slice(s+1));this.syncCellDom();if(t)this.mdInput.emit(this.value)}else{this.syncCellDom()}return}const{clean:r,rejected:l}=this.sanitize(i);if(l)this.mdInvalidInput.emit({attempted:i,reason:"input-change"});if(!r){this.syncCellDom();return}let a;let n;if(r.length>=this.cellCount){a=r.slice(0,this.cellCount);n=this.cellCount-1}else{const t=Math.min(s,o.length);const e=o.split("");for(let s=0;s<r.length;s++)e[t+s]=r.charAt(s);a=e.join("").slice(0,this.cellCount);n=Math.min(t+r.length,this.cellCount-1)}const d=this.updateValue(a);this.syncCellDom();this.focusCell(n);if(d)this.mdInput.emit(this.value);this.maybeComplete(o,false)};this.handleKeyDown=t=>{const e=t.target;const s=this.indexOfCell(e);if(s<0||this.isDisabled)return;switch(t.key){case"Backspace":{t.preventDefault();if(this.readOnly)return;const e=this.value;if(this.chars[s]){const t=this.updateValue(e.slice(0,s)+e.slice(s+1));this.syncCellDom();if(t)this.mdInput.emit(this.value)}else if(s>0){const t=s-1;this.focusCell(t);if(t<e.length){const s=this.updateValue(e.slice(0,t)+e.slice(t+1));this.syncCellDom();if(s)this.mdInput.emit(this.value)}}break}case"Delete":{t.preventDefault();if(this.readOnly)return;const e=this.value;if(s<e.length){const t=this.updateValue(e.slice(0,s)+e.slice(s+1));this.syncCellDom();if(t)this.mdInput.emit(this.value)}break}case"ArrowLeft":t.preventDefault();this.focusCell(s-1);break;case"ArrowRight":t.preventDefault();this.focusCell(s+1);break;case"Home":t.preventDefault();this.focusCell(0);break;case"End":t.preventDefault();this.focusCell(this.cellCount-1);break}};this.handleFocus=t=>{const e=t.target;if(typeof e.select==="function")e.select()};this.handleCellClick=t=>{const e=t.target;if(typeof e.select==="function")e.select()};this.handlePaste=t=>{t.preventDefault();if(this.isDisabled||this.readOnly)return;const e=t.clipboardData?.getData("text")??"";const s=this.value;const{clean:i,rejected:o}=this.sanitize(e);if(o)this.mdInvalidInput.emit({attempted:e,reason:"input-paste"});if(!i)return;const r=this.updateValue(i);this.syncCellDom();this.focusCell(Math.min(i.length,this.cellCount-1));if(r)this.mdInput.emit(this.value);this.maybeComplete(s,true)};this.handleFocusOut=t=>{const e=t.relatedTarget;if(e&&this.cellsEl&&this.cellsEl.contains(e))return;this.commit()}}get isDisabled(){return this.disabled||this.formDisabled}get cellCount(){const t=Math.floor(this.length);return Number.isFinite(t)&&t>0?t:1}get chars(){const t=[];for(let e=0;e<this.cellCount;e++)t.push(this.value.charAt(e)||"");return t}get effectiveInputMode(){return this.inputMode||(this.validationType==="numeric"?"numeric":"text")}componentWillLoad(){const{clean:t}=this.sanitize(this.value??"");if(t!==this.value)this.value=t;this.lastCommitted=this.value;this.syncFormState()}componentDidLoad(){this.syncValidity()}onValueChanged(){const{clean:t}=this.sanitize(this.value??"");if(t!==this.value){this.value=t;return}this.syncFormState()}onPipelineChanged(){const{clean:t}=this.sanitize(this.value??"");if(t!==this.value){this.value=t}else{this.syncFormState()}}onValidityInputsChanged(){this.syncValidity()}formResetCallback(){this.value="";this.lastCommitted=""}formDisabledCallback(t){queueMicrotask((()=>{this.formDisabled=t}))}formStateRestoreCallback(t){if(typeof t==="string"){this.value=this.sanitize(t).clean}}async setFocus(){const t=this.chars.findIndex((t=>!t));this.focusCell(t===-1?this.cellCount-1:t)}async clear(){this.value="";this.lastCommitted=""}async getValidity(){return l(this.internals)}async setCustomValidity(t){this.customValidityMessage=t;this.syncValidity()}async checkValidity(){return a(this.internals)}async reportValidity(){return n(this.internals)}sanitize(t){const e=String(t??"").replace(/\s+/g,"");const s=this.transform==="uppercase"?e.toUpperCase():e;let i=s;if(this.validationType==="numeric")i=s.replace(/[^0-9]/g,"");else if(this.validationType==="alpha")i=s.replace(/[^a-zA-Z]/g,"");else if(this.validationType==="alphanumeric")i=s.replace(/[^0-9a-zA-Z]/g,"");return{clean:i.slice(0,this.cellCount),rejected:i.length!==s.length}}syncFormState(){d(this.internals,this.value||null);this.syncValidity()}syncValidity(){const t=this.value.length;const e=this.required&&t===0;const s=this.required&&!!this.incompleteLabel&&t>0&&t<this.cellCount;c(this.internals,{missing:e||s,missingMessage:s?this.incompleteLabel:this.valueMissingLabel,customMessage:this.customValidityMessage,anchor:this.inputEls[0]});this.emitValidityChange()}emitValidityChange(){const t=l(this.internals);const e=`${t.valid}|${t.validationMessage}`;if(this.lastValidityKey===e)return;const s=this.lastValidityKey!==null;this.lastValidityKey=e;if(s)this.mdValidityChange.emit(t)}updateValue(t){if(t===this.value)return false;this.value=t;return true}syncCellDom(){const t=this.chars;this.inputEls.forEach(((e,s)=>{if(e&&e.value!==t[s])e.value=t[s]}))}focusCell(t){const e=Math.max(0,Math.min(t,this.cellCount-1));const s=this.inputEls[e];if(s&&typeof s.focus==="function")s.focus()}indexOfCell(t){return this.inputEls.findIndex((e=>e===t))}commit(){if(this.value===this.lastCommitted)return;this.lastCommitted=this.value;this.mdChange.emit(this.value)}maybeComplete(t,e){const s=this.value.length>=this.cellCount;if(!s)return;const i=t.length<this.cellCount;if(!i&&!e)return;this.commit();this.mdComplete.emit({value:this.value});if(this.autoSubmit){this.internals.form?.requestSubmit()}}render(){const t=this.isDisabled;const e=this.chars;const s=this.cellCount;const r=this.mask?"password":"text";const l=this.effectiveInputMode;const a=Math.max(0,Math.floor(this.groupSize)||0);const n=this.error&&this.errorText?this.errorText:this.supportingText;const d=!!n||this.reserveSupportingSpace;this.inputEls.length=s;const c=[];for(let o=0;o<s;o++){if(a>0&&o>0&&o%a===0){c.push(i("span",{class:"md-otp-field__separator",part:"separator","aria-hidden":"true"},i("slot",{name:"separator"},i("span",{class:"md-otp-field__separator-dot"}))))}const d=this.cellLabelTemplate.replace("{index}",String(o+1)).replace("{length}",String(s));c.push(i("input",{key:`cell-${o}`,ref:t=>{this.inputEls[o]=t},class:{"md-otp-field__cell":true,"md-otp-field__cell--filled":!!e[o]},part:"cell",type:r,disabled:t,readOnly:this.readOnly,autocomplete:o===0?"one-time-code":"off",inputMode:l,value:e[o],"aria-label":d,"aria-invalid":this.error?"true":undefined,"aria-required":o===0&&this.required?"true":undefined,"aria-describedby":n?`${this.uid}-support`:undefined,onInput:this.handleInput,onKeyDown:this.handleKeyDown,onFocus:this.handleFocus,onClick:this.handleCellClick,onPaste:this.handlePaste}))}return i(o,{key:"a737546458648b9a4d93231ef3ec423bd61236c6",class:{"md-otp-field":true,"md-otp-field--disabled":t,"md-otp-field--readonly":this.readOnly,"md-otp-field--error":this.error,"md-otp-field--masked":this.mask}},i("div",{key:"5a1d90c079a4f64c13f898615238956a055b7dcf",class:"md-otp-field__cells",part:"cells",role:"group","aria-label":this.label||undefined,dir:"ltr",ref:t=>{this.cellsEl=t},onFocusout:this.handleFocusOut},c),d&&i("div",{key:"8a49a9672a1b59f2e9d942df4172da52b336ba23",class:"md-otp-field__support-row"},i("span",{key:"879c852f5b3fae2ec47d87eb34bf8b97b062e030",id:`${this.uid}-support`,part:"supporting-text",role:this.error&&n?"alert":undefined,class:{"md-otp-field__support-text":true,"md-otp-field__support-text--error":this.error}},n||"​")))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{value:[{onValueChanged:0}],length:[{onPipelineChanged:0}],validationType:[{onPipelineChanged:0}],transform:[{onPipelineChanged:0}],required:[{onValidityInputsChanged:0}],valueMissingLabel:[{onValidityInputsChanged:0}],incompleteLabel:[{onValidityInputsChanged:0}]}}static get style(){return h()}},[321,"md-otp-field",{length:[2],value:[1025],validationType:[1,"validation-type"],transform:[1],mask:[4],autoSubmit:[4,"auto-submit"],groupSize:[2,"group-size"],inputMode:[1,"inputmode"],name:[513],disabled:[516],readOnly:[4,"readonly"],required:[4],error:[4],errorText:[1,"error-text"],supportingText:[1,"supporting-text"],label:[1],cellLabelTemplate:[1,"cell-label-template"],valueMissingLabel:[1,"value-missing-label"],incompleteLabel:[1,"incomplete-label"],density:[514],reserveSupportingSpace:[4,"reserve-supporting-space"],formDisabled:[32],setFocus:[64],clear:[64],getValidity:[64],setCustomValidity:[64],checkValidity:[64],reportValidity:[64]},undefined,{value:[{onValueChanged:0}],length:[{onPipelineChanged:0}],validationType:[{onPipelineChanged:0}],transform:[{onPipelineChanged:0}],required:[{onValidityInputsChanged:0}],valueMissingLabel:[{onValidityInputsChanged:0}],incompleteLabel:[{onValidityInputsChanged:0}]}]);function f(){if(typeof customElements==="undefined"){return}const t=["md-otp-field"];t.forEach((t=>{switch(t){case"md-otp-field":if(!customElements.get(r(t))){customElements.define(r(t),p)}break}}))}f();const m=p;const u=f;export{m as MdOtpField,u as defineCustomElement};
+//# sourceMappingURL=md-otp-field.js.map

package/dist/components-csr/md-otp-field.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["mdOtpFieldCss","MdOtpField","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","length","value","validationType","transform","mask","autoSubmit","groupSize","inputMode","name","disabled","readOnly","required","error","errorText","supportingText","label","cellLabelTemplate","valueMissingLabel","incompleteLabel","density","reserveSupportingSpace","formDisabled","inputEls","uid","Math","random","toString","slice","customValidityMessage","lastCommitted","lastValidityKey","handleInput","e","input","target","index","indexOfCell","isDisabled","syncCellDom","raw","prev","changed","updateValue","mdInput","emit","clean","rejected","sanitize","mdInvalidInput","attempted","reason","next","focusTarget","cellCount","start","min","arr","split","i","charAt","join","focusCell","maybeComplete","handleKeyDown","key","preventDefault","chars","t","handleFocus","select","handleCellClick","handlePaste","clipboardData","getData","handleFocusOut","relatedTarget","cellsEl","contains","commit","n","floor","Number","isFinite","out","push","effectiveInputMode","componentWillLoad","syncFormState","componentDidLoad","syncValidity","onValueChanged","onPipelineChanged","onValidityInputsChanged","formResetCallback","formDisabledCallback","queueMicrotask","formStateRestoreCallback","state","setFocus","firstEmpty","findIndex","c","clear","getValidity","getValidityOf","internals","setCustomValidity","message","checkValidity","checkValidityOf","reportValidity","reportValidityOf","stripped","String","replace","transformed","toUpperCase","kept","setFormValue","len","missing","incomplete","setValidityState","missingMessage","customMessage","anchor","emitValidityChange","v","valid","validationMessage","primed","mdValidityChange","forEach","clamped","max","focus","el","mdChange","prevValue","force","complete","became","mdComplete","form","requestSubmit","render","count","inputType","group","supportText","showSupport","nodes","h","class","part","cellLabel","ref","type","autocomplete","undefined","onInput","onKeyDown","onFocus","onClick","onPaste","Host","role","dir","onFocusout","id"],"sources":["src/components/md-otp-field/md-otp-field.css?tag=md-otp-field&encapsulation=shadow","src/components/md-otp-field/md-otp-field.tsx"],"sourcesContent":["/* ==========================================================\n   md-otp-field — Material Design 3 one-time-code field\n   Derived from the outlined text-field treatment:\n   https://m3.material.io/components/text-fields/specs\n\n   PUBLIC CSS CUSTOM PROPERTIES (override per-instance):\n     --md-otp-field-cell-width     Cell inline size (48px, tapers with density, 32px floor)\n     --md-otp-field-cell-height    Cell block size (56px, tapers with density, 40px floor)\n     --md-otp-field-cell-gap       Gap between cells (spacing-gap-sm token)\n     --md-otp-field-cell-shape     Cell corner radius (shape-corner-small)\n     --md-otp-field-outline-color  Resting cell border colour\n     --md-otp-field-focus-color    Focused cell border + caret colour\n     --md-otp-field-font-size      Cell glyph size (24px, tapers with density, 16px floor)\n\n   SLOTS:\n     separator  Custom separator content between cell groups (falls back to a\n                dot; fills the FIRST gap — later gaps repeat the dot)\n\n   CSS PARTS:\n     cells            The cell row (role=\"group\" container)\n     cell             Every character input\n     separator        Each group separator wrapper\n     supporting-text  Supporting / error text line\n\n   RTL:\n     The component (supporting text, layout) follows the document direction\n     via logical properties. The CELL ROW is deliberately pinned LTR — codes\n     read left-to-right in RTL locales too (standard practice; also set as\n     dir=\"ltr\" in the markup). Arrow keys are therefore physical AND logical\n     at once inside the row.\n   ========================================================== */\n\n/* ==========================================================\n   1. HOST — public → internal var mapping\n   ========================================================== */\n:host {\n  /* Three-layer override chain: per-instance public hook → system token →\n     literal fallback. */\n  --_cell-width: var(--md-otp-field-cell-width, max(32px, calc(48px + var(--md-sys-density-scale, 0) * 4px)));\n  --_cell-height: var(--md-otp-field-cell-height, max(40px, calc(56px + var(--md-sys-density-scale, 0) * 4px)));\n  --_cell-gap: var(--md-otp-field-cell-gap, var(--md-sys-spacing-gap-sm, 8px));\n  --_cell-shape: var(--md-otp-field-cell-shape, var(--md-sys-shape-corner-small, 8px));\n  --_outline-color: var(--md-otp-field-outline-color, var(--md-sys-color-outline, #79747E));\n  --_focus-color: var(--md-otp-field-focus-color, var(--md-sys-color-primary, #6750A4));\n  /* Headline-small-ish glyphs, 1px/rung taper with a 16px floor. */\n  --_font-size: var(--md-otp-field-font-size, max(16px, calc(24px + var(--md-sys-density-scale, 0) * 1px)));\n  --_error-color: var(--md-sys-color-error, #B3261E);\n  --_text-color: var(--md-sys-color-on-surface, #1C1B1F);\n  --_support-color: var(--md-sys-color-on-surface-variant, #49454F);\n\n  display: inline-flex;\n  flex-direction: column;\n  font-family: var(--md-sys-typescale-body-large-font-family, Roboto, sans-serif);\n  box-sizing: border-box;\n}\n\n/* ==========================================================\n   2. CELL ROW\n   ========================================================== */\n.md-otp-field__cells {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--_cell-gap);\n\n  /* Codes read left-to-right in RTL locales too — pinning the row LTR is the\n     standard OTP practice (the markup also carries dir=\"ltr\" so the contract\n     holds even without this stylesheet). The rest of the component follows\n     the document direction via logical properties. */\n  direction: ltr;\n}\n\n/* ==========================================================\n   3. CELL — a small outlined field\n   ========================================================== */\n.md-otp-field__cell {\n  box-sizing: border-box;\n  inline-size: var(--_cell-width);\n  block-size: var(--_cell-height);\n  min-inline-size: 0;\n  padding: 0;\n  margin: 0;\n  border: 1px solid var(--_outline-color);\n  border-radius: var(--_cell-shape);\n  background: transparent;\n  color: var(--_text-color);\n  caret-color: var(--_focus-color);\n  text-align: center;\n  font-family: inherit;\n  font-size: var(--_font-size);\n  font-weight: var(--md-sys-typescale-headline-small-font-weight, 400);\n  line-height: 1;\n  outline: none;\n  transition: border-color var(--md-sys-motion-duration-short2, 100ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n}\n\n/* Hover affordance mirrors the outlined text field: outline darkens. */\n.md-otp-field__cell:hover:not(:focus):not(:disabled) {\n  border-color: var(--md-sys-color-on-surface, #1C1B1F);\n}\n\n/* Focused cell: 3px primary ring via a per-cell border swap (not a fieldset —\n   each cell is its own outlined box). Colour is IMMEDIATE (transition: none),\n   the md-text-field convention: a mouse-focus sitting on the near-black hover\n   outline must never morph through black (\"black ring, then primary\"). The\n   border grows inward (box-sizing: border-box), so the row never reflows. */\n.md-otp-field__cell:focus {\n  border-color: var(--_focus-color);\n  border-width: 3px;\n  transition: none;\n}\n\n/* ==========================================================\n   4. ERROR — everything takes the error colour\n   ========================================================== */\n:host(.md-otp-field--error) .md-otp-field__cell {\n  border-color: var(--_error-color);\n  color: var(--_error-color);\n  caret-color: var(--_error-color);\n}\n\n:host(.md-otp-field--error) .md-otp-field__cell:hover:not(:focus):not(:disabled) {\n  border-color: var(--md-sys-color-on-error-container, #8C1D18);\n}\n\n:host(.md-otp-field--error) .md-otp-field__cell:focus {\n  border-color: var(--_error-color);\n  border-width: 3px;\n  transition: none;\n}\n\n/* ==========================================================\n   5. READONLY — resting visuals, no hover invitation\n   ========================================================== */\n:host(.md-otp-field--readonly) .md-otp-field__cell:hover:not(:focus) {\n  border-color: var(--_outline-color);\n}\n\n:host(.md-otp-field--readonly.md-otp-field--error) .md-otp-field__cell:hover:not(:focus) {\n  border-color: var(--_error-color);\n}\n\n/* ==========================================================\n   6. DISABLED\n   ========================================================== */\n:host(.md-otp-field--disabled) {\n  pointer-events: none;\n}\n\n.md-otp-field__cell:disabled {\n  border-color: color-mix(in srgb, var(--md-sys-color-on-surface, #1C1B1F) calc(var(--md-sys-state-disabled-container-opacity, 0.12) * 100%), transparent);\n  color: color-mix(in srgb, var(--md-sys-color-on-surface, #1C1B1F) calc(var(--md-sys-state-disabled-content-opacity, 0.38) * 100%), transparent);\n}\n\n:host(.md-otp-field--disabled) .md-otp-field__support-text {\n  color: color-mix(in srgb, var(--md-sys-color-on-surface, #1C1B1F) calc(var(--md-sys-state-disabled-content-opacity, 0.38) * 100%), transparent);\n}\n\n:host(.md-otp-field--disabled) .md-otp-field__separator-dot {\n  background: color-mix(in srgb, var(--md-sys-color-on-surface, #1C1B1F) calc(var(--md-sys-state-disabled-container-opacity, 0.12) * 100%), transparent);\n}\n\n/* ==========================================================\n   7. SEPARATOR (grouped layouts)\n   ========================================================== */\n.md-otp-field__separator {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--_support-color);\n  min-inline-size: max(8px, calc(12px + var(--md-sys-density-scale, 0) * 1px));\n  user-select: none;\n}\n\n.md-otp-field__separator-dot {\n  inline-size: max(6px, calc(8px + var(--md-sys-density-scale, 0) * 0.5px));\n  block-size: max(6px, calc(8px + var(--md-sys-density-scale, 0) * 0.5px));\n  border-radius: var(--md-sys-shape-corner-full, 9999px);\n  background: var(--_outline-color);\n}\n\n/* ==========================================================\n   8. SUPPORTING / ERROR TEXT\n   ========================================================== */\n.md-otp-field__support-row {\n  padding-block-start: 4px;\n  padding-inline: 4px;\n}\n\n.md-otp-field__support-text {\n  /* body-small (12/16) — the library's 0.5px/rung rate for sub-22px type. */\n  font-size: max(10px, calc(12px + var(--md-sys-density-scale, 0) * 0.5px));\n  line-height: max(14px, calc(16px + var(--md-sys-density-scale, 0) * 0.5px));\n  color: var(--_support-color);\n}\n\n.md-otp-field__support-text--error {\n  color: var(--_error-color);\n}\n\n/* ==========================================================\n   9. 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\n/* ==========================================================\n   10. REDUCED MOTION\n   ========================================================== */\n@media (prefers-reduced-motion: reduce) {\n  .md-otp-field__cell {\n    transition-duration: 0.01ms !important;\n  }\n}\n\n/* ==========================================================\n   11. FORCED COLORS (Windows High Contrast)\n   ========================================================== */\n@media (forced-colors: active) {\n  .md-otp-field__cell {\n    forced-color-adjust: none;\n    border-color: ButtonText;\n    background: Field;\n    color: FieldText;\n    caret-color: FieldText;\n  }\n  .md-otp-field__cell:focus {\n    border-color: Highlight;\n  }\n  .md-otp-field__cell:hover:not(:focus):not(:disabled) {\n    border-color: Highlight;\n  }\n  :host(.md-otp-field--error) .md-otp-field__cell {\n    border-color: LinkText;\n    color: FieldText;\n    caret-color: FieldText;\n  }\n  :host(.md-otp-field--error) .md-otp-field__cell:focus,\n  :host(.md-otp-field--error) .md-otp-field__cell:hover:not(:focus):not(:disabled) {\n    border-color: LinkText;\n  }\n  .md-otp-field__cell:disabled {\n    border-color: GrayText;\n    color: GrayText;\n  }\n  .md-otp-field__support-text {\n    color: CanvasText;\n  }\n  .md-otp-field__support-text--error {\n    color: LinkText;\n  }\n  :host(.md-otp-field--disabled) .md-otp-field__support-text {\n    color: GrayText;\n  }\n  .md-otp-field__separator-dot {\n    background: CanvasText;\n  }\n}\n","import { AttachInternals, Component, Element, Event, EventEmitter, Host, Method, Prop, State, VNode, Watch, h } from '@stencil/core';\nimport {\n  setFormValue,\n  setValidityState,\n  checkValidityOf,\n  reportValidityOf,\n  getValidityOf,\n} from '../../utils/form';\n\n/** Detail for `mdComplete` — fired when every cell is filled. */\nexport interface MdOtpFieldCompleteDetail {\n  /** The complete, sanitized code. */\n  value: string;\n}\n\n/** Detail for `mdInvalidInput` — fired when characters are rejected by the charset filter. */\nexport interface MdOtpFieldInvalidDetail {\n  /** The raw attempted string, BEFORE whitespace-stripping / filtering. */\n  attempted: string;\n  /** Where the rejected characters came from. */\n  reason: 'input-change' | 'input-paste';\n}\n\n/** Detail for `mdValidityChange` — mirrors the shared form-control contract. */\nexport interface MdOtpFieldValidityDetail {\n  valid: boolean;\n  validationMessage: string;\n  flags: Record<string, boolean>;\n}\n\n/**\n * `md-otp-field` — Material Design 3 one-time-code field.\n *\n * Renders `length` real `<input>` cells in its own shadow root (it OWNS its\n * inputs, so every cell carries full ARIA), pipes all entry — typing, paste,\n * SMS autofill — through one sanitizing pipeline (strip whitespace →\n * `transform` → `validationType` charset filter → clamp to `length`), and\n * participates in forms via `ElementInternals` (no hidden input).\n *\n * The value is a CONTIGUOUS string: clearing a cell shifts the characters\n * after it left (there are no holes), and a character typed into an empty\n * cell beyond the fill point lands at the first empty position.\n *\n * Normalization is declarative: `transform` names the casing rule as an\n * attribute value rather than taking a callback, so the rule is authorable\n * from plain HTML and survives SSR — an element attribute cannot carry a\n * function.\n */\n@Component({\n  tag: 'md-otp-field',\n  styleUrl: 'md-otp-field.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class MdOtpField {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Form-association handle. The field submits `value` under `name` via\n   * `setFormValue`, publishes `valueMissing`/incomplete validity, and anchors\n   * `reportValidity()` bubbles at the first cell.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /** Number of character cells. */\n  @Prop() length: number = 6;\n\n  /**\n   * The current code. Mutable, deliberately NOT reflected — entered codes\n   * must never appear as a DOM attribute (value privacy, like md-text-field).\n   * Programmatic writes run through the same sanitizing pipeline as typing.\n   */\n  @Prop({ mutable: true }) value: string = '';\n\n  /** Which characters are accepted. `none` accepts anything (still whitespace-stripped). */\n  @Prop({ attribute: 'validation-type' }) validationType: 'numeric' | 'alpha' | 'alphanumeric' | 'none' = 'numeric';\n\n  /**\n   * Case normalization as an attribute value, not a callback (attributes\n   * can't carry functions): `uppercase` upper-cases every accepted character\n   * (recovery-code entry).\n   */\n  @Prop() transform: 'none' | 'uppercase' = 'none';\n\n  /** Obscure the entered characters (cells render as `type=\"password\"`). */\n  @Prop() mask: boolean = false;\n\n  /** Submit the owning form (`requestSubmit()`) when the code becomes complete. */\n  @Prop({ attribute: 'auto-submit' }) autoSubmit: boolean = false;\n\n  /** Chunk the cells into groups of this size with a separator between groups. 0 = ungrouped. */\n  @Prop({ attribute: 'group-size' }) groupSize: number = 0;\n\n  /**\n   * Virtual-keyboard hint override. Empty derives from `validationType`\n   * (`numeric` → `numeric`, everything else → `text`).\n   */\n  @Prop({ attribute: 'inputmode' }) inputMode: string = '';\n\n  /** Form field name — ElementInternals submits the code under it. */\n  @Prop({ reflect: true }) name: string = '';\n\n  /** Disables every cell. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Value not user-changeable; cells stay focusable and arrow-navigable. */\n  @Prop({ attribute: 'readonly' }) readOnly: boolean = false;\n\n  /** The code must be complete before the owning form submits. */\n  @Prop() required: boolean = false;\n\n  /** Error visual state — colors cells and swaps supporting text to `errorText`. */\n  @Prop() error: boolean = false;\n\n  /** Translatable error message; replaces `supportingText` while `error` is true. */\n  @Prop({ attribute: 'error-text' }) errorText: string = '';\n\n  /** Translatable supporting text shown under the cells. */\n  @Prop({ attribute: 'supporting-text' }) supportingText: string = '';\n\n  /** Accessible group label (translatable). Rendered as `aria-label` on the cell group. */\n  @Prop() label: string = 'One-time code';\n\n  /**\n   * Per-cell `aria-label` template (translatable). `{index}` is 1-based,\n   * `{length}` is the cell count.\n   */\n  @Prop({ attribute: 'cell-label-template' }) cellLabelTemplate: string = 'Character {index} of {length}';\n\n  /** Translatable constraint-validation message when `required` and empty. */\n  @Prop({ attribute: 'value-missing-label' }) valueMissingLabel: string = 'Please enter the complete code.';\n\n  /**\n   * When non-empty AND `required`, a started-but-incomplete code is also\n   * invalid, reported with this message. Empty (default) = only a fully empty\n   * required field blocks submission.\n   */\n  @Prop({ attribute: 'incomplete-label' }) incompleteLabel: string = '';\n\n  /**\n   * Local density rung. Drives the same `--md-sys-density-scale` signal a\n   * global `data-density` ancestor sets; local wins. 0 = default, -4 = compact.\n   */\n  @Prop({ reflect: true }) density: 0 | -1 | -2 | -3 | -4 = 0;\n\n  /** Always reserve the supporting-text line so error text causes no layout jump. */\n  @Prop({ attribute: 'reserve-supporting-space' }) reserveSupportingSpace: boolean = false;\n\n  /** Fires on every value change from user input (typing, clearing, paste, autofill). */\n  @Event() mdInput!: EventEmitter<string>;\n\n  /** Commit event: fires when the code becomes complete and when focus leaves the whole group. */\n  @Event() mdChange!: EventEmitter<string>;\n\n  /** Fires when every cell is filled. A complete paste re-fires it even if the value is unchanged. */\n  @Event() mdComplete!: EventEmitter<MdOtpFieldCompleteDetail>;\n\n  /** Fires when typed/pasted characters are rejected by the `validationType` charset. */\n  @Event() mdInvalidInput!: EventEmitter<MdOtpFieldInvalidDetail>;\n\n  /**\n   * Fires when this control's validity CHANGES — never on mount, never for a\n   * re-publish landing on the same state. `composed: false` by the library\n   * convention: each control reports only for itself; `bubbles: true` still\n   * reaches `<form>`-level listeners in the same DOM tree.\n   */\n  @Event({ bubbles: true, composed: false }) mdValidityChange!: EventEmitter<MdOtpFieldValidityDetail>;\n\n  /** Ancestor `<fieldset disabled>` / form-disabled state (formDisabledCallback). */\n  @State() private formDisabled = false;\n\n  private inputEls: (HTMLInputElement | undefined)[] = [];\n  private cellsEl?: HTMLElement;\n  private uid = `md-otp-field-${Math.random().toString(36).slice(2, 7)}`;\n  private customValidityMessage = '';\n  /** Last committed value — mdChange only fires when the value moved past this. */\n  private lastCommitted = '';\n  /** Last emitted validity, so a re-publish that changes nothing stays silent. */\n  private lastValidityKey: string | null = null;\n\n  private get isDisabled(): boolean {\n    return this.disabled || this.formDisabled;\n  }\n\n  /** `length` hardened against zero/negative/fractional authoring. */\n  private get cellCount(): number {\n    const n = Math.floor(this.length);\n    return Number.isFinite(n) && n > 0 ? n : 1;\n  }\n\n  private get chars(): string[] {\n    const out: string[] = [];\n    for (let i = 0; i < this.cellCount; i++) out.push(this.value.charAt(i) || '');\n    return out;\n  }\n\n  private get effectiveInputMode(): string {\n    return this.inputMode || (this.validationType === 'numeric' ? 'numeric' : 'text');\n  }\n\n  componentWillLoad() {\n    // Normalize any authored initial value through the same pipeline as user\n    // input. @Watch is inert before load, so sync explicitly.\n    const { clean } = this.sanitize(this.value ?? '');\n    if (clean !== this.value) this.value = clean;\n    this.lastCommitted = this.value;\n    this.syncFormState();\n  }\n\n  componentDidLoad() {\n    // Re-publish validity now that the cell refs exist: the willLoad publish\n    // had no anchor, and reportValidity() needs a FOCUSABLE anchor (the first\n    // cell) or the browser silently shows no bubble. Same validity state, so\n    // emitValidityChange stays silent.\n    this.syncValidity();\n  }\n\n  @Watch('value')\n  onValueChanged() {\n    // The pipeline is idempotent, so re-sanitizing a value the component set\n    // itself is a no-op; a programmatic write of dirty input gets cleaned and\n    // re-enters this watch once with the clean string.\n    const { clean } = this.sanitize(this.value ?? '');\n    if (clean !== this.value) {\n      this.value = clean;\n      return;\n    }\n    this.syncFormState();\n  }\n\n  @Watch('length')\n  @Watch('validationType')\n  @Watch('transform')\n  onPipelineChanged() {\n    const { clean } = this.sanitize(this.value ?? '');\n    if (clean !== this.value) {\n      this.value = clean; // watch above re-syncs\n    } else {\n      this.syncFormState();\n    }\n  }\n\n  @Watch('required')\n  @Watch('valueMissingLabel')\n  @Watch('incompleteLabel')\n  onValidityInputsChanged() {\n    this.syncValidity();\n  }\n\n  /** Form reset clears the code — one-time codes are transient by nature. */\n  formResetCallback() {\n    this.value = '';\n    this.lastCommitted = '';\n  }\n\n  /** Ancestor form/fieldset disabling. State write deferred — Stencil forbids sync writes here. */\n  formDisabledCallback(disabled: boolean) {\n    queueMicrotask(() => {\n      this.formDisabled = disabled;\n    });\n  }\n\n  /** Browser session restore. */\n  formStateRestoreCallback(state: unknown) {\n    if (typeof state === 'string') {\n      this.value = this.sanitize(state).clean;\n    }\n  }\n\n  /** Focus the first empty cell (or the last cell when the code is complete). */\n  @Method()\n  async setFocus() {\n    const firstEmpty = this.chars.findIndex((c) => !c);\n    this.focusCell(firstEmpty === -1 ? this.cellCount - 1 : firstEmpty);\n  }\n\n  /** Clear the code programmatically (no `mdInput`/`mdChange` — programmatic writes stay silent). */\n  @Method()\n  async clear() {\n    this.value = '';\n    this.lastCommitted = '';\n  }\n\n  /** Current validity: boolean, message and flags. Mirrors md-text-field. */\n  @Method()\n  async getValidity(): Promise<MdOtpFieldValidityDetail> {\n    return getValidityOf(this.internals);\n  }\n\n  /** App/server-side validation: a non-empty message marks the control invalid until cleared with `''`. */\n  @Method()\n  async setCustomValidity(message: string) {\n    this.customValidityMessage = message;\n    this.syncValidity();\n  }\n\n  /** Constraint-validation API, matching md-text-field and the native contract. */\n  @Method()\n  async checkValidity(): Promise<boolean> {\n    return checkValidityOf(this.internals);\n  }\n\n  /** Like checkValidity(), but also shows the browser's validation message. */\n  @Method()\n  async reportValidity(): Promise<boolean> {\n    return reportValidityOf(this.internals);\n  }\n\n  /**\n   * The one value pipeline every entry path shares — typing, paste, autofill,\n   * programmatic writes, authored attributes: strip whitespace → `transform`\n   * → filter by the `validationType` charset → clamp to `length`. `rejected`\n   * is true when the charset filter dropped characters (clamping is silent).\n   */\n  private sanitize(raw: string): { clean: string; rejected: boolean } {\n    const stripped = String(raw ?? '').replace(/\\s+/g, '');\n    const transformed = this.transform === 'uppercase' ? stripped.toUpperCase() : stripped;\n    let kept = transformed;\n    if (this.validationType === 'numeric') kept = transformed.replace(/[^0-9]/g, '');\n    else if (this.validationType === 'alpha') kept = transformed.replace(/[^a-zA-Z]/g, '');\n    else if (this.validationType === 'alphanumeric') kept = transformed.replace(/[^0-9a-zA-Z]/g, '');\n    return { clean: kept.slice(0, this.cellCount), rejected: kept.length !== transformed.length };\n  }\n\n  private syncFormState() {\n    // Empty submits NO entry (null) — an absent code should be absent from\n    // FormData, unlike text fields where `x=` matches the native input.\n    setFormValue(this.internals, this.value || null);\n    this.syncValidity();\n  }\n\n  private syncValidity() {\n    const len = this.value.length;\n    const missing = this.required && len === 0;\n    // Incomplete-but-started handling: reported through the shared helper's\n    // `missing` channel (flag: valueMissing) with `incompleteLabel` as the\n    // message — utils/form.ts deliberately exposes no badInput channel.\n    const incomplete = this.required && !!this.incompleteLabel && len > 0 && len < this.cellCount;\n    setValidityState(this.internals, {\n      missing: missing || incomplete,\n      missingMessage: incomplete ? this.incompleteLabel : this.valueMissingLabel,\n      customMessage: this.customValidityMessage,\n      anchor: this.inputEls[0],\n    });\n    this.emitValidityChange();\n  }\n\n  /** Emit mdValidityChange only when validity actually moved; the first call primes the baseline. */\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  private updateValue(next: string): boolean {\n    if (next === this.value) return false;\n    this.value = next; // @Watch sanitizes (idempotent no-op here) + syncs the form\n    return true;\n  }\n\n  /** Force every cell's DOM value back to state — the vdom can't see a DOM-only divergence (e.g. a rejected char). */\n  private syncCellDom() {\n    const chars = this.chars;\n    this.inputEls.forEach((input, i) => {\n      if (input && input.value !== chars[i]) input.value = chars[i];\n    });\n  }\n\n  private focusCell(index: number) {\n    const clamped = Math.max(0, Math.min(index, this.cellCount - 1));\n    const input = this.inputEls[clamped];\n    if (input && typeof input.focus === 'function') input.focus();\n  }\n\n  private indexOfCell(target: EventTarget | null): number {\n    return this.inputEls.findIndex((el) => el === target);\n  }\n\n  private commit() {\n    if (this.value === this.lastCommitted) return;\n    this.lastCommitted = this.value;\n    this.mdChange.emit(this.value);\n  }\n\n  /**\n   * Completion check. `force` is the paste path: a complete paste announces\n   * completion even when the pasted code equals the current value — the\n   * consumer re-runs verification either way, so re-pasting a code the server\n   * rejected must retrigger it rather than sit silent.\n   */\n  private maybeComplete(prevValue: string, force: boolean) {\n    const complete = this.value.length >= this.cellCount;\n    if (!complete) return;\n    const became = prevValue.length < this.cellCount;\n    if (!became && !force) return;\n    this.commit();\n    this.mdComplete.emit({ value: this.value });\n    if (this.autoSubmit) {\n      // Runs after mdComplete so listeners see the completed code before the\n      // form submits. requestSubmit (never submit()) so the form's submit\n      // event fires and validation runs.\n      this.internals.form?.requestSubmit();\n    }\n  }\n\n  private handleInput = (e: Event) => {\n    const input = e.target as HTMLInputElement;\n    const index = this.indexOfCell(input);\n    if (index < 0) return;\n    if (this.isDisabled || this.readOnly) {\n      this.syncCellDom();\n      return;\n    }\n    const raw = input.value;\n    const prev = this.value;\n\n    if (raw === '') {\n      // Native deletion (cut / context-menu delete). Backspace/Delete keys are\n      // handled in keydown and never reach here.\n      if (index < prev.length) {\n        const changed = this.updateValue(prev.slice(0, index) + prev.slice(index + 1));\n        this.syncCellDom();\n        if (changed) this.mdInput.emit(this.value);\n      } else {\n        this.syncCellDom();\n      }\n      return;\n    }\n\n    const { clean, rejected } = this.sanitize(raw);\n    if (rejected) this.mdInvalidInput.emit({ attempted: raw, reason: 'input-change' });\n    if (!clean) {\n      // Everything was filtered out — restore the cell.\n      this.syncCellDom();\n      return;\n    }\n\n    let next: string;\n    let focusTarget: number;\n    if (clean.length >= this.cellCount) {\n      // Full-code burst (SMS autofill / IME) — whole-value replace from 0.\n      next = clean.slice(0, this.cellCount);\n      focusTarget = this.cellCount - 1;\n    } else {\n      // Contiguous model: a char typed beyond the fill point lands at the\n      // first empty position.\n      const start = Math.min(index, prev.length);\n      const arr = prev.split('');\n      for (let i = 0; i < clean.length; i++) arr[start + i] = clean.charAt(i);\n      next = arr.join('').slice(0, this.cellCount);\n      focusTarget = Math.min(start + clean.length, this.cellCount - 1);\n    }\n\n    const changed = this.updateValue(next);\n    this.syncCellDom();\n    this.focusCell(focusTarget);\n    if (changed) this.mdInput.emit(this.value);\n    this.maybeComplete(prev, false);\n  };\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    const input = e.target as HTMLInputElement;\n    const index = this.indexOfCell(input);\n    if (index < 0 || this.isDisabled) return;\n\n    switch (e.key) {\n      case 'Backspace': {\n        e.preventDefault();\n        if (this.readOnly) return;\n        const prev = this.value;\n        if (this.chars[index]) {\n          // Filled: clear this cell (chars after it shift left), keep focus.\n          const changed = this.updateValue(prev.slice(0, index) + prev.slice(index + 1));\n          this.syncCellDom();\n          if (changed) this.mdInput.emit(this.value);\n        } else if (index > 0) {\n          // Empty: walk back and clear the previous cell.\n          const t = index - 1;\n          this.focusCell(t);\n          if (t < prev.length) {\n            const changed = this.updateValue(prev.slice(0, t) + prev.slice(t + 1));\n            this.syncCellDom();\n            if (changed) this.mdInput.emit(this.value);\n          }\n        }\n        break;\n      }\n      case 'Delete': {\n        e.preventDefault();\n        if (this.readOnly) return;\n        const prev = this.value;\n        if (index < prev.length) {\n          const changed = this.updateValue(prev.slice(0, index) + prev.slice(index + 1));\n          this.syncCellDom();\n          if (changed) this.mdInput.emit(this.value);\n        }\n        break;\n      }\n      // The cell row is forced LTR even in RTL documents (codes read\n      // left-to-right everywhere), so \"physical left\" and \"previous index\"\n      // are always the same direction — no RTL branch.\n      case 'ArrowLeft':\n        e.preventDefault();\n        this.focusCell(index - 1);\n        break;\n      case 'ArrowRight':\n        e.preventDefault();\n        this.focusCell(index + 1);\n        break;\n      case 'Home':\n        e.preventDefault();\n        this.focusCell(0);\n        break;\n      case 'End':\n        e.preventDefault();\n        this.focusCell(this.cellCount - 1);\n        break;\n      default:\n        break;\n    }\n  };\n\n  /** Select the cell's char on focus so typing replaces it. */\n  private handleFocus = (e: Event) => {\n    const input = e.target as HTMLInputElement;\n    if (typeof input.select === 'function') input.select();\n  };\n\n  /** Clicking an already-focused cell re-selects its content. */\n  private handleCellClick = (e: Event) => {\n    const input = e.target as HTMLInputElement;\n    if (typeof input.select === 'function') input.select();\n  };\n\n  private handlePaste = (e: ClipboardEvent) => {\n    e.preventDefault();\n    if (this.isDisabled || this.readOnly) return;\n    const raw = e.clipboardData?.getData('text') ?? '';\n    const prev = this.value;\n    const { clean, rejected } = this.sanitize(raw);\n    if (rejected) this.mdInvalidInput.emit({ attempted: raw, reason: 'input-paste' });\n    if (!clean) return;\n    // Whole-value replace from position 0, regardless of which cell was pasted into.\n    const changed = this.updateValue(clean);\n    this.syncCellDom();\n    this.focusCell(Math.min(clean.length, this.cellCount - 1));\n    if (changed) this.mdInput.emit(this.value);\n    this.maybeComplete(prev, true);\n  };\n\n  /** Commit (mdChange) when focus leaves the whole group. */\n  private handleFocusOut = (e: FocusEvent) => {\n    const next = e.relatedTarget;\n    if (next && this.cellsEl && this.cellsEl.contains(next as Node)) return;\n    this.commit();\n  };\n\n  render() {\n    const disabled = this.isDisabled;\n    const chars = this.chars;\n    const count = this.cellCount;\n    const inputType = this.mask ? 'password' : 'text';\n    const inputMode = this.effectiveInputMode;\n    const group = Math.max(0, Math.floor(this.groupSize) || 0);\n    const supportText = this.error && this.errorText ? this.errorText : this.supportingText;\n    const showSupport = !!supportText || this.reserveSupportingSpace;\n\n    this.inputEls.length = count;\n\n    const nodes: VNode[] = [];\n    for (let i = 0; i < count; i++) {\n      if (group > 0 && i > 0 && i % group === 0) {\n        nodes.push(\n          <span class=\"md-otp-field__separator\" part=\"separator\" aria-hidden=\"true\">\n            {/* Slotted content is assigned to the FIRST separator slot in tree\n                order; later gaps keep the built-in dot fallback (documented). */}\n            <slot name=\"separator\">\n              <span class=\"md-otp-field__separator-dot\"></span>\n            </slot>\n          </span>,\n        );\n      }\n      const cellLabel = this.cellLabelTemplate\n        .replace('{index}', String(i + 1))\n        .replace('{length}', String(count));\n      nodes.push(\n        <input\n          key={`cell-${i}`}\n          ref={(el?: HTMLInputElement) => {\n            this.inputEls[i] = el;\n          }}\n          class={{\n            'md-otp-field__cell': true,\n            'md-otp-field__cell--filled': !!chars[i],\n          }}\n          part=\"cell\"\n          type={inputType}\n          disabled={disabled}\n          readOnly={this.readOnly}\n          // one-time-code on the FIRST cell only: it is the SMS-autofill\n          // target; the burst is distributed by handleInput.\n          autocomplete={i === 0 ? 'one-time-code' : 'off'}\n          inputMode={inputMode}\n          // No maxlength: it would truncate autofill/IME bursts before the\n          // JS pipeline can distribute them. Select-on-focus keeps single\n          // keystrokes replacing rather than appending.\n          value={chars[i]}\n          aria-label={cellLabel}\n          aria-invalid={this.error ? 'true' : undefined}\n          aria-required={i === 0 && this.required ? 'true' : undefined}\n          aria-describedby={supportText ? `${this.uid}-support` : undefined}\n          onInput={this.handleInput}\n          onKeyDown={this.handleKeyDown}\n          onFocus={this.handleFocus}\n          onClick={this.handleCellClick}\n          onPaste={this.handlePaste}\n        />,\n      );\n    }\n\n    return (\n      <Host\n        class={{\n          'md-otp-field': true,\n          'md-otp-field--disabled': disabled,\n          'md-otp-field--readonly': this.readOnly,\n          'md-otp-field--error': this.error,\n          'md-otp-field--masked': this.mask,\n        }}\n      >\n        <div\n          class=\"md-otp-field__cells\"\n          part=\"cells\"\n          role=\"group\"\n          aria-label={this.label || undefined}\n          // Codes read left-to-right in RTL locales too — the row is pinned\n          // LTR at the markup level (CSS re-asserts it).\n          dir=\"ltr\"\n          ref={(el?: HTMLElement) => {\n            this.cellsEl = el;\n          }}\n          onFocusout={this.handleFocusOut}\n        >\n          {nodes}\n        </div>\n        {showSupport && (\n          <div class=\"md-otp-field__support-row\">\n            <span\n              id={`${this.uid}-support`}\n              part=\"supporting-text\"\n              role={this.error && supportText ? 'alert' : undefined}\n              class={{\n                'md-otp-field__support-text': true,\n                'md-otp-field__support-text--error': this.error,\n              }}\n            >\n              {supportText || '\\u200B'}\n            </span>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}