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

package/dist/components/p-D5Ht729E.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["mdTextFieldCss","RESTRICT_PATTERNS","numeric","integer","decimal","alpha","alphanumeric","MdTextField","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","reserveSupportingSpace","variant","label","value","placeholder","type","name","pattern","autocomplete","inputMode","enterKeyHint","autoCapitalize","disabled","readOnly","required","error","errorText","supportingText","prefixText","suffixText","clearable","passwordToggle","density","multiline","speechToText","speechLang","restrict","formatOn","focusBorderWidth","appearFocused","chipsWrap","debounce","throttle","focused","formDisabled","autofilled","hostAriaLabel","passwordVisible","hasSlottedLeading","hasSlottedChips","hasSlottedTrailing","hasTrailingIconButton","listening","displayValue","defaultValue","internalWrite","composing","warnedLiveFormat","uid","Math","random","toString","slice","throttlePending","customValidityMessage","inputRole","inputExpanded","inputAriaAutocomplete","lastValidityKey","pendingTypeResync","formatterEpoch","handleInput","e","el","target","inputEl","raw","cursorPos","selectionStart","length","restricted","applyRestrict","maxLength","isNaN","points","Array","from","out","pt","strippedBefore","substring","min","setSelectionRange","parser","err","formatter","effectiveFormatOn","content","replace","contentLen","str","match","contentBeforeCursor","formatted","newPos","i","mdInput","emit","emitSearch","autoGrow","handleCompositionStart","handleCompositionEnd","handleKeyDown","key","form","internals","submitter","querySelector","requestSubmit","HTMLButtonElement","HTMLInputElement","undefined","isDisabled","stopPropagation","preventDefault","clearValue","mdClear","handleAutofillStart","animationName","handleChange","mdChange","dispatchEvent","CustomEvent","bubbles","handleFocus","handleBlur","syncDisplayValue","handleContainerClick","focus","handleClear","handlePasswordToggle","mdPasswordToggle","visible","handleSpeechToggle","mdSpeechResult","transcript","recognition","stop","SpeechRecognition","window","webkitSpeechRecognition","console","warn","continuous","interimResults","lang","finalTranscript","baseValue","onresult","event","interim","resultIndex","results","isFinal","separator","endsWith","onend","onerror","start","isInteractive","tag","tagName","toLowerCase","includes","hasAttribute","isFloating","effectiveRows","rows","restrictPattern","inner","startsWith","RegExp","syncTrailingSlotState","trailingSlot","assignedNodes","assignedElements","some","syncHostSlottedIcons","leading","trailing","componentWillLoad","bridgeFormatterProps","parseInt","getAttribute","minLength","hostLabel","removeAttribute","test","updateFormValue","setFormValue","updateValidity","input","setValidity","customError","shown","restore","badInput","v","validity","flags","valueMissing","typeMismatch","patternMismatch","tooLong","tooShort","rangeUnderflow","rangeOverflow","stepMismatch","valid","message","validationMessage","emitValidityChange","formResetCallback","formDisabledCallback","queueMicrotask","setFocus","select","getInputElement","getValidity","setCustomValidity","formStateRestoreCallback","state","getValidityOf","primed","mdValidityChange","checkValidity","reportValidity","componentDidLoad","root","shadowRoot","leadingSlot","addEventListener","chipsSlot","onValueChange","end","onTypeChange","componentDidRender","expected","forEach","Object","defineProperty","configurable","get","set","fn","emitSearchDistinct","lastEmittedSearch","mdSearch","clearTimeout","debounceTimer","setTimeout","throttleTimer","textarea","style","height","scrollHeight","disconnectedCallback","abort","renderInputElement","inputType","useRawWhileFocused","showValue","supportText","describedBy","filter","Boolean","join","hostPopupAttr","hostPopup","comboboxRole","sharedProps","max","step","spellcheck","role","String","id","onInput","onChange","onFocus","onBlur","onKeyDown","onCompositionstart","onCompositionend","onAnimationStart","h","ref","part","class","render","showClear","showPasswordToggle","showSpeech","hasLeading","hasTrailing","usesFormatterLimit","contentLength","charCount","clearDisabled","isPasswordRevealed","passwordIcon","Host","Number","onClick","display","htmlFor","fontVariationSettings"],"sources":["src/components/md-text-field/md-text-field.css?tag=md-text-field&encapsulation=shadow","src/components/md-text-field/md-text-field.tsx"],"sourcesContent":["/* ==========================================================\n   md-text-field — Material Design 3 Text Field\n   Spec: https://m3.material.io/components/text-fields/specs\n\n   PUBLIC CSS CUSTOM PROPERTIES (override per-instance):\n     --md-text-field-container-color         Filled-variant container background\n     --md-text-field-input-color             Input text colour\n     --md-text-field-label-color             Resting label colour\n     --md-text-field-active-indicator-color  Filled bottom line + outlined border on focus\n     --md-text-field-outline-color           Outlined-variant resting border\n     --md-text-field-error-color             Error accent (label, indicator, icon, helper)\n     --md-text-field-supporting-text-color   Supporting text + character counter\n     --md-text-field-icon-color              Leading / trailing / clear / password / speech icons\n     --md-text-field-icon-size               All glyph sizes (24dp; tapers with\n                                             density — set to opt out)\n     --md-text-field-padding-inline-start / -end   Per-side container inset\n     --md-text-field-optical-nudge           Outlined only: px the input text is\n                                             shifted down from true centre\n                                             (default 0 = geometric centring)\n     --md-text-field-container-shape         Border-radius for both variants\n     --md-text-field-filled-pill             Filled only: 1 rounds all corners (pill);\n                                             0 keeps MD3 top-only radius + bottom indicator\n     --md-text-field-cursor               Cursor over the field (default: text)\n     --md-text-field-focus-border-width      Border thickness on focus (1, 2, or 3 px)\n     --md-text-field-focus-inset             Negative inset that compensates for the focus border\n\n   SLOTS:\n     leading-icon            Custom leading icon (overrides nothing — pure decoration)\n     trailing-icon           Custom trailing icon\n     clear-icon              Custom clear-button glyph (replaces the default \"cancel\" icon)\n     password-toggle-icon    Custom password-toggle glyph\n     speech-icon             Custom microphone glyph\n     error-icon              Custom error-state icon (replaces the default filled \"error\")\n\n   CSS PARTS:\n     container        Field container (state layer + input row)\n     label            Floating label\n     input            The native input / textarea\n     supporting-text  Supporting / error text line\n     counter          Character counter\n\n   ========================================================== */\n\n/* ==========================================================\n   1. HOST — public → internal var mapping\n   ========================================================== */\n:host {\n  /* Public → internal mapping. Each `--_*` falls back to the user-facing\n     `--md-text-field-*` token (if set), which itself falls back to the\n     MD3 system token. This keeps the override chain three layers deep\n     so end-users can theme either per-component or system-wide. */\n  --_container-color: var(--md-text-field-container-color, var(--md-sys-color-surface-container-highest, #E6E0E9));\n  --_input-color: var(--md-text-field-input-color, var(--md-sys-color-on-surface, #1C1B1F));\n  --_label-color: var(--md-text-field-label-color, var(--md-sys-color-on-surface-variant, #49454F));\n  --_active-indicator-color: var(--md-text-field-active-indicator-color, var(--md-sys-color-primary, #6750A4));\n  --_outline-color: var(--md-text-field-outline-color, var(--md-sys-color-outline, #79747E));\n  --_error-color: var(--md-text-field-error-color, var(--md-sys-color-error, #B3261E));\n  --_supporting-text-color: var(--md-text-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454F));\n  --_icon-color: var(--md-text-field-icon-color, var(--md-sys-color-on-surface-variant, #49454F));\n  /* One lever for every glyph in the field — leading, trailing, clear,\n     password toggle, speech, error. 1px per density rung off 24dp (18px floor),\n     the library-wide icon taper. Previously each of the six was a separate\n     hard-coded 24px, so the glyphs stayed full size while the container\n     tightened around them. */\n  /* The inset the TEXT sits at. inset-lg is the box inset; the extra 7px is the\n     optical bearing of a Material Symbols caret — `arrow_drop_down` renders only\n     ~21px of ink inside a 48px advance, so a select's caret box has to sit 7px\n     shallower than its ink appears to. Every field carries the same text inset,\n     glyph or not, so a text field, select, multi-select and autocomplete stacked\n     in a form all line their text up on one column. Composites pull their\n     TRAILING side back to the box inset — see md-select. */\n  --_text-inset: calc(var(--md-sys-spacing-inset-lg, 16px) + 7px);\n  --_icon-size: var(--md-text-field-icon-size, max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px)));\n  --_container-shape: var(--md-text-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px));\n  --_filled-pill: var(--md-text-field-filled-pill, 0);\n  --_filled-block-end-radius: calc(var(--_filled-pill) * var(--_container-shape));\n\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  font-family: var(--md-sys-typescale-body-large-font-family, Roboto, sans-serif);\n  width: 100%;\n  box-sizing: border-box;\n}\n\n/* ==========================================================\n   2. CONTAINER\n   ========================================================== */\n.md-text-field__container {\n  position: relative;\n  display: flex;\n  align-items: stretch;\n  /* Global density: follows an ancestor's `data-density` (0…-4) by default,\n     4px per rung. density-scale is 0 by default so 56px is unchanged. An\n     explicit local `density` prop overrides via the .--density-N blocks below\n     (they set a fixed height that wins over this base). */\n  min-height: calc(56px + var(--md-sys-density-scale, 0) * 4px);\n  cursor: var(--md-text-field-cursor, text);\n  box-sizing: border-box;\n}\n\n/* ── Filled container ── */\n:host(.md-text-field--filled) .md-text-field__container {\n  background-color: var(--_container-color);\n  border-start-start-radius: var(--_container-shape);\n  border-start-end-radius: var(--_container-shape);\n  border-end-start-radius: var(--_filled-block-end-radius);\n  border-end-end-radius: var(--_filled-block-end-radius);\n  /* The filled stack is padding + label + input + padding, and those four MUST\n     sum to the container height or a gap opens between the label and the value.\n     They are four independent formulas, so the coefficient here is not free —\n     it is whatever is left over:\n\n       container   56 + 4s\n       label       16 + 1s   (line-height)\n       input       24 + 2s   (line-height)\n       => padding  ((56 + 4s) - (16 + s) - (24 + 2s)) / 2  =  8 + 0.5s\n\n     At 1.5s it over-tightened: the padding shed 6px per side across the range\n     while label+input shed 12px, so 8px of slack piled up between the label and\n     the value at -4 — the one gap that grew while everything around it shrank.\n     If any of those three formulas changes, this coefficient changes with it. */\n  padding-block: max(2px, calc(8px + var(--md-sys-density-scale, 0) * 0.5px));\n  padding-inline-start: var(--md-text-field-padding-inline-start, var(--_text-inset));\n  padding-inline-end: var(--md-text-field-padding-inline-end, var(--_text-inset));\n  transition: background-color var(--md-sys-motion-duration-medium1, 200ms) var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));\n}\n\n:host(.md-text-field--filled.md-text-field--focused) .md-text-field__container {\n  /* the PUBLIC container var must keep applying while focused — it\n     previously vanished behind this hardcoded focus tint */\n  background-color: var(--md-text-field-container-color, var(--md-sys-color-surface-container-high, #ECE6F0));\n}\n\n/* Horizontal rhythm comes from the SPACING TOKENS, not literals: those already\n   taper per density rung at the token layer (inset-lg 16→12→8, gap-lg 16→12),\n   which is how the rest of the library tightens horizontally for free. These\n   were frozen at 16px/12px, so at -4 the field was 40px tall but still carried\n   density-0 side padding and a density-0 icon gap. */\n/* An icon does NOT reduce the container's inset — both sides pad to inset-lg\n   whether or not a leading/trailing icon is present.\n\n   --md-text-field-padding-inline-{start,end} let a COMPOSING component shift one\n   side without restating the density formula. md-select uses the start override:\n   its caret glyph carries 7px of empty space inside its box, so the text has to\n   sit that much further in for the two to LOOK level. */\n/* ── Outlined container ── */\n:host(.md-text-field--outlined) .md-text-field__container {\n  background-color: transparent;\n  border-radius: var(--_container-shape);\n  /* Vertical padding tightens with global density (1px/rung, floored at 2px) so\n     outlined fields shrink to the same rung heights as filled ones instead of\n     flooring ~4px taller. 8px at density 0. The local density classes below set\n     their own padding-block and still win by source order. */\n  padding-block: max(2px, calc(8px + var(--md-sys-density-scale, 0) * 1px));\n  padding-inline-start: var(--md-text-field-padding-inline-start, var(--_text-inset));\n  padding-inline-end: var(--md-text-field-padding-inline-end, var(--_text-inset));\n}\n\n/* Optical-centring lever for the outlined input, DEFAULT 0 — i.e. true geometric\n   centring, which is what the input already has: equal gaps above and below,\n   verified at every density rung and in both density paths.\n\n   It defaulted to 2px briefly. Do not reintroduce that without evidence: pushing\n   the text down makes it read LOW, and descender-heavy or CJK content compounds\n   it — `Hello世` carries ~22px of natural ink against ~19px for `Hello`, and the\n   extra mass extends downward inside the same 24px line box. The notched border\n   can make a centred field look high, but the two perceptions cancel out and\n   centre is the neutral answer.\n\n   Kept as a knob so per-instance optical tuning needs no CSS surgery. Applied to\n   the input rather than container padding because the local `density` classes\n   set `padding-block` as a SHORTHAND, which would wipe an asymmetric start/end\n   at rungs -3 and -4; a relative offset also stays out of layout, so container\n   heights are untouched. Filled is excluded — its input already sits low to\n   clear the floated label. */\n:host(.md-text-field--outlined) .md-text-field__input {\n  position: relative;\n  inset-block-start: var(--md-text-field-optical-nudge, 0px);\n}\n\n/* The local `density` prop drives the SAME --md-sys-density-scale signal as a\n   global `data-density` ancestor — set on the host so it overrides any inherited\n   global value (local wins). This unifies both paths: the container height,\n   input line box and label all condense identically whether density is set\n   locally or globally. */\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   2b. DENSITY\n   Density scale: 0 (default 56px), -1 (52px), -2 (48px), -3 (44px),\n   -4 (40px, ultra-compact — matches the global data-density scale).\n   Each step reduces container height by 4px.\n\n   There is deliberately NO fixed per-rung ladder here. The `density` PROP and a\n   global `data-density` ancestor both resolve to the SAME signal\n   (`--md-sys-density-scale`, mapped on :host above), and every density-sensitive\n   value derives from it by calc — container min-height (§2), padding-block,\n   input line box and label. One signal, one set of numbers, both paths.\n\n   A fixed ladder used to live here and had drifted out of sync: it set\n   52/48/40/36 while the formula gives 52/48/44/40, so `density=\"-4\"` rendered\n   36px but `data-density=\"-4\"` rendered 40px. Only the two newest rungs\n   disagreed, which is the signature of a ladder that wasn't renumbered when -4\n   was added — the comment above always documented the formula's values. If you\n   need to adjust a rung, change the calc, never re-add per-rung overrides.\n   ========================================================== */\n\n/* ==========================================================\n   3. STATE LAYER (filled only)\n   ========================================================== */\n.md-text-field__state-layer {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background-color: var(--md-sys-color-on-surface, #1C1B1F);\n  opacity: 0;\n  transition: opacity var(--md-sys-motion-duration-short2, 100ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n  pointer-events: none;\n}\n\n:host(.md-text-field--filled:hover:not(.md-text-field--disabled)) .md-text-field__state-layer {\n  opacity: var(--md-sys-state-hover-state-layer-opacity, 0.08);\n}\n\n/* MD3 outlined text fields have NO hover state layer — the outline color\n   change (below) is the hover affordance. */\n:host(.md-text-field--outlined) .md-text-field__state-layer {\n  display: none;\n}\n\n/* ==========================================================\n   4. INPUT WRAP\n   ========================================================== */\n.md-text-field__input-wrap {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  min-width: 0;\n  position: relative;\n  padding: 0;\n}\n\n:host(.md-text-field--filled) .md-text-field__input-wrap {\n  justify-content: flex-end;\n}\n\n.md-text-field__input-row {\n  display: flex;\n  align-items: center;\n}\n\n/* Interactive leading content (multi-select chips) inside the input row. By\n   default chips stay on a SINGLE line so a selection never changes the field's\n   height: a 32px chip fits within the 56px container's existing block padding,\n   the row does NOT wrap or add extra padding, and the chips box fills the row so\n   the consumer can lay out / measure overflow. `chips-wrap` opts back into the\n   multi-row growing behaviour. */\n.md-text-field__chips {\n  display: inline-flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  gap: 4px;\n  min-inline-size: 0;\n  overflow: hidden;\n}\n\n:host(.md-text-field--with-chips:not([chips-wrap])) .md-text-field__chips {\n  /* Fill the row up to the trailing cluster so a \"+N\" counter has room and the\n     consumer's chip box measures the true available width. */\n  flex: 1 1 auto;\n}\n\n:host(.md-text-field--with-chips) .md-text-field__input-row {\n  flex-wrap: nowrap;\n  gap: 4px;\n  min-inline-size: 0;\n}\n\n:host(.md-text-field--with-chips:not([chips-wrap])) .md-text-field__input {\n  /* Single-line chips own the row; the readonly input takes no reserved space. */\n  flex: 0 1 0;\n  min-inline-size: 0;\n}\n\n:host(.md-text-field--with-chips) .md-text-field__input {\n  /* The input follows the chips; keep it usable but let chips dominate the row. */\n  flex: 1 0 40px;\n  min-inline-size: 40px;\n}\n\n/* chips-wrap: chips flow onto multiple rows and the field grows (container is\n   min-height, not fixed). A SINGLE row keeps the normal 56px height — the growth\n   comes only from the second row onward; the between-row spacing is the row-gap\n   and the outer breathing room is the container's own block padding (so no extra\n   padding-block here, which would inflate even a one-row field). */\n:host(.md-text-field--with-chips[chips-wrap]) .md-text-field__input-row {\n  flex-wrap: wrap;\n  row-gap: 6px;\n}\n\n:host([chips-wrap]) .md-text-field__chips {\n  flex-wrap: wrap;\n  overflow: visible;\n}\n\n/* ==========================================================\n   5. INPUT\n   ========================================================== */\n.md-text-field__input {\n  flex: 1;\n  border: none;\n  outline: none;\n  background: transparent;\n  font-family: inherit;\n  font-size: max(13px, calc(16px + var(--md-sys-density-scale, 0) * 0.5px));\n  line-height: max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px));\n  font-weight: var(--md-sys-typescale-body-large-weight, 400);\n  letter-spacing: var(--md-sys-typescale-body-large-tracking, 0.5px);\n  color: var(--_input-color);\n  caret-color: var(--_active-indicator-color);\n  cursor: var(--md-text-field-cursor, text);\n  padding: 0;\n  margin: 0;\n  min-width: 0;\n  width: 100%;\n}\n\n.md-text-field__input::placeholder {\n  color: var(--_label-color);\n}\n\n:host(.md-text-field--error) .md-text-field__input {\n  caret-color: var(--_error-color);\n}\n\n/* ── Textarea (shared) ── */\n.md-text-field__input--textarea {\n  resize: none;\n  overflow-wrap: break-word;\n}\n\n/* ── Auto-grow: expands with content, no scrollbar ── */\n.md-text-field__input--auto-grow {\n  overflow: hidden;\n}\n\n/* ── Fixed: fixed height, scrolls vertically ── */\n.md-text-field__input--fixed {\n  overflow-y: auto;\n}\n\n/* Multiline container adjustments */\n:host(.md-text-field--multiline) .md-text-field__container {\n  align-items: flex-start;\n  min-height: auto;\n}\n\n:host(.md-text-field--multiline) .md-text-field__input-wrap {\n  justify-content: flex-start;\n}\n\n:host(.md-text-field--multiline.md-text-field--filled) .md-text-field__input-wrap {\n  justify-content: flex-start;\n  padding-block-start: 20px;\n}\n\n:host(.md-text-field--multiline) .md-text-field__input-row {\n  align-items: flex-start;\n}\n\n/* Chips + a floated label, filled variant.\n\n   A filled field floats its label to `top: 0` INSIDE the container. A single-\n   line value clears it because the value is vertically centred, but a chip box\n   is not centred — it fills from the container's top edge, so the first chip\n   row lands underneath the label (measured: label 4491-4507, chips from 4491).\n\n   Inset the chip stack by the label's own line-height, density-aware, exactly\n   as the multiline case does. Outlined fields are unaffected: their label sits\n   ON the outline stroke (top: -8px), outside the content box. */\n:host(.md-text-field--filled.md-text-field--floating.md-text-field--with-chips)\n  .md-text-field__input-wrap {\n  padding-block-start: max(12px, calc(16px + var(--md-sys-density-scale, 0) * 1px));\n}\n\n:host(.md-text-field--multiline:not(.md-text-field--auto-grow)) .md-text-field__icon,\n:host(.md-text-field--multiline:not(.md-text-field--auto-grow)) .md-text-field__trailing-icon-button,\n:host(.md-text-field--multiline:not(.md-text-field--auto-grow)) .md-text-field__clear,\n:host(.md-text-field--multiline:not(.md-text-field--auto-grow)) .md-text-field__password-toggle,\n:host(.md-text-field--multiline:not(.md-text-field--auto-grow)) .md-text-field__speech {\n  align-self: flex-start;\n  margin-block-start: 16px;\n}\n\n:host(.md-text-field--auto-grow) .md-text-field__icon,\n:host(.md-text-field--auto-grow) .md-text-field__trailing-icon-button,\n:host(.md-text-field--auto-grow) .md-text-field__clear,\n:host(.md-text-field--auto-grow) .md-text-field__password-toggle,\n:host(.md-text-field--auto-grow) .md-text-field__speech {\n  align-self: center;\n}\n\n/* ==========================================================\n   6. LABEL\n   ========================================================== */\n.md-text-field__label {\n  position: absolute;\n  inset-inline-start: 0;\n  font-size: max(13px, calc(16px + var(--md-sys-density-scale, 0) * 0.5px));\n  line-height: max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px));\n  color: var(--_label-color);\n  pointer-events: none;\n  transition:\n    top var(--md-sys-motion-duration-medium1, 200ms) var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)),\n    inset-inline-start var(--md-sys-motion-duration-medium1, 200ms) var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)),\n    font-size var(--md-sys-motion-duration-medium1, 200ms) var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)),\n    line-height var(--md-sys-motion-duration-medium1, 200ms) var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)),\n    transform var(--md-sys-motion-duration-medium1, 200ms) var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)),\n    background-color var(--md-sys-motion-duration-medium1, 200ms) var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)),\n    padding var(--md-sys-motion-duration-medium1, 200ms) var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)),\n    color var(--md-sys-motion-duration-short2, 100ms) ease;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 100%;\n}\n\n/* Filled label — resting */\n:host(.md-text-field--filled) .md-text-field__label {\n  top: 50%;\n  transform: translateY(-50%);\n}\n\n/* Multiline resting label sits on the FIRST line, not vertically centered\n   in the whole textarea */\n:host(.md-text-field--multiline:not(.md-text-field--floating)) .md-text-field__label {\n  top: 28px;\n}\n\n:host(.md-text-field--multiline.md-text-field--outlined:not(.md-text-field--floating)) .md-text-field__label {\n  top: 12px; /* outlined wrap has less top padding than filled */\n}\n\n:host(.md-text-field--multiline.md-text-field--filled:not(.md-text-field--floating)) .md-text-field__label {\n  top: 32px; /* measured 4px high against the first text line at 28px */\n}\n\n/* Filled label — floating */\n:host(.md-text-field--filled.md-text-field--floating) .md-text-field__label {\n  top: 0;\n  transform: translateY(0);\n  /* Condense the floated label with density (12/16 at scale 0 → 11/12 at -4) so\n     it clears the value in the shorter container under BOTH global data-density\n     and the local `density` prop. */\n  font-size: max(11px, calc(var(--md-sys-typescale-body-small-size, 12px) + var(--md-sys-density-scale, 0) * 0.25px));\n  line-height: max(12px, calc(var(--md-sys-typescale-body-small-line-height, 16px) + var(--md-sys-density-scale, 0) * 1px));\n}\n\n/* Outlined label — resting */\n:host(.md-text-field--outlined) .md-text-field__label {\n  top: 50%;\n  transform: translateY(-50%);\n  background-color: transparent;\n  padding: 0;\n}\n\n/* Outlined label — floating */\n:host(.md-text-field--outlined.md-text-field--floating) .md-text-field__label {\n  /* The floated label must sit centred ON the outline stroke, and with\n     translateY(-50%) its centre lands exactly at this `top`. The density term\n     has to cancel the container's own shrink: at 0.5px/rung it only compensated\n     half of it, so the label drifted 0.5px ABOVE the stroke per rung — dead-on\n     at density 0, 2px high by -4, which reads as uneven padding around the\n     notch. 1px/rung tracks the stroke exactly at every rung. */\n  top: calc(-8px - var(--md-sys-density-scale, 0) * 1px);\n  inset-inline-start: 0;\n  transform: translateY(-50%);\n  font-size: max(10px, calc(12px + var(--md-sys-density-scale, 0) * 0.5px));\n  line-height: max(12px, calc(16px + var(--md-sys-density-scale, 0) * 1px));\n  background-color: transparent;\n  padding: 0;\n}\n\n/* Condensed densities: the floating label crowded the input text (line\n   boxes overlapped up to 8px) — tighten its box so both fit the shorter\n   container */\n:host([density='-1'].md-text-field--filled.md-text-field--floating) .md-text-field__label,\n:host([density='-2'].md-text-field--filled.md-text-field--floating) .md-text-field__label,\n:host([density='-3'].md-text-field--filled.md-text-field--floating) .md-text-field__label,\n:host([density='-4'].md-text-field--filled.md-text-field--floating) .md-text-field__label {\n  font-size: 11px;\n  line-height: 12px;\n  top: 1px;\n}\n\n:host([density='-2'].md-text-field--filled.md-text-field--floating) .md-text-field__label {\n  top: -2px; /* -2 measured 5px of overlap where -1/-3 measured 1px */\n}\n\n/* Outlined density -3/-4: the notch label rode 4px above the border line */\n:host([density='-3'].md-text-field--outlined.md-text-field--floating) .md-text-field__label,\n:host([density='-4'].md-text-field--outlined.md-text-field--floating) .md-text-field__label {\n  top: -4px;\n}\n\n/* The filled input's 24px body-large line box collides with the floated label\n   in the shorter dense container. Tighten it WITH density (24px at scale 0 →\n   16px at -4, font size unchanged) so the value clears the label. Driven by\n   --md-sys-density-scale so it works under BOTH a global data-density ancestor\n   AND the local `density` prop (which sets the scale on the host, below). */\n:host(.md-text-field--filled) .md-text-field__input {\n  line-height: max(16px, calc(24px + var(--md-sys-density-scale, 0) * 2px));\n}\n\n/* Outlined + leading icon — shift the floating label back onto the notch.\n   With a leading icon the label's natural position is\n   `container padding + icon + icon gap`, so this pulls it back to where the\n   no-icon label sits (the container's inset-lg edge), which is where the notch\n   is cut. Written as that subtraction rather than the literal it evaluates to:\n   16 - 12 - 24 - 16 = -36 at density 0, but every one of those four terms now\n   tapers, so a constant went stale the moment the icon and gap started\n   shrinking — the label slid left out of the notch and the outline struck\n   through it (measured 16 -> 6 -> 0 from the container edge, against a notch\n   that stayed at 16). */\n:host(.md-text-field--outlined.md-text-field--floating.md-text-field--with-leading) .md-text-field__label {\n  inset-inline-start: calc(-1 * (var(--_icon-size) + var(--md-sys-spacing-gap-lg, 16px)));\n}\n\n/* Hover label color */\n:host(:hover:not(.md-text-field--focused):not(.md-text-field--disabled):not(.md-text-field--error)) .md-text-field__label {\n  color: var(--md-sys-color-on-surface, #1C1B1F);\n}\n\n:host(:hover:not(.md-text-field--focused):not(.md-text-field--disabled).md-text-field--error) .md-text-field__label {\n  color: var(--md-sys-color-on-error-container, #8C1D18);\n}\n\n/* Focused label color */\n:host(.md-text-field--focused) .md-text-field__label {\n  color: var(--_active-indicator-color);\n}\n\n/* Error label color */\n:host(.md-text-field--error) .md-text-field__label {\n  color: var(--_error-color);\n}\n\n/* ==========================================================\n   7. PREFIX / SUFFIX\n   ========================================================== */\n.md-text-field__prefix,\n.md-text-field__suffix {\n  font-size: max(13px, calc(16px + var(--md-sys-density-scale, 0) * 0.5px));\n  line-height: max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px));\n  color: var(--_supporting-text-color);\n  white-space: nowrap;\n  user-select: none;\n  transition: color var(--md-sys-motion-duration-short2, 100ms) ease;\n}\n\n.md-text-field__prefix {\n  margin-inline-end: 2px;\n}\n\n.md-text-field__suffix {\n  margin-inline-start: 2px;\n}\n\n:host(:hover:not(.md-text-field--focused):not(.md-text-field--disabled)) .md-text-field__prefix,\n:host(:hover:not(.md-text-field--focused):not(.md-text-field--disabled)) .md-text-field__suffix {\n  color: var(--md-sys-color-on-surface, #1C1B1F);\n}\n\n/* ==========================================================\n   8. ICONS (slot wrappers)\n   ========================================================== */\n.md-text-field__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--_icon-size);\n  color: var(--_icon-color);\n  flex-shrink: 0;\n  align-self: center;\n  user-select: none;\n  transition: color var(--md-sys-motion-duration-short2, 100ms) ease;\n}\n\n/* Decorative glyphs (SVG, icon font) — 24px. */\n.md-text-field__icon ::slotted(*) {\n  /* `!important` is required, not stylistic: slotted glyphs carry the\n     DOCUMENT-tree class `.material-symbols-outlined { font-size: 24px }`, and\n     per CSS Scoping §3.3 the outer tree beats `::slotted()` for normal\n     declarations at any specificity. Only `!important` inverts that. */\n  font-size: var(--_icon-size) !important;\n  width: var(--_icon-size);\n  height: var(--_icon-size);\n  color: inherit;\n}\n\n.md-text-field__icon--leading {\n  margin-inline-end: var(--md-sys-spacing-gap-lg, 16px);\n}\n\n.md-text-field__icon--trailing {\n  margin-inline-start: 0;\n}\n\n/* Slotted md-icon-button — layout only; sizing/colors come from md-icon-button. */\n.md-text-field__trailing-icon-button {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  align-self: center;\n  margin-inline-start: 0;\n}\n\n/* When a trailing icon BUTTON follows the error icon, tighten the gap: the\n   button's state layer already insets its glyph ~8px, so the full 16px margin\n   reads as ~24px between the two glyphs. 4px brings it to ~12px, pairing the\n   error icon with the trigger. Only applies after the error icon — the normal\n   text→button gap keeps its 16px. */\n.md-text-field__error-icon + .md-text-field__trailing-icon-button {\n  margin-inline-start: 4px;\n}\n\n:host(:hover:not(.md-text-field--focused):not(.md-text-field--disabled)) .md-text-field__icon--leading {\n  color: var(--md-sys-color-on-surface, #1C1B1F);\n}\n\n:host(:hover:not(.md-text-field--focused):not(.md-text-field--disabled):not(.md-text-field--error)) .md-text-field__icon--trailing {\n  color: var(--md-sys-color-on-surface, #1C1B1F);\n}\n\n:host(.md-text-field--error) .md-text-field__icon--trailing {\n  color: var(--_error-color);\n}\n\n:host(.md-text-field--error) .md-text-field__icon--trailing ::slotted(*) {\n  color: inherit;\n}\n\n/* ==========================================================\n   8b. CLEAR BUTTON\n   ========================================================== */\n.md-text-field__clear {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  align-self: center;\n  border: none;\n  background: none;\n  padding: 0;\n  margin: 0;\n  margin-inline-start: var(--md-sys-spacing-gap-lg, 16px);\n  cursor: pointer;\n  border-radius: 50%;\n  width: var(--_icon-size);\n  height: var(--_icon-size);\n  flex-shrink: 0;\n  color: var(--_icon-color);\n  transition: color var(--md-sys-motion-duration-short2, 100ms) ease,\n    opacity var(--md-sys-motion-duration-short2, 100ms) ease;\n}\n\n.md-text-field__clear ::slotted(*) {\n  /* `!important` is required, not stylistic: slotted glyphs carry the\n     DOCUMENT-tree class `.material-symbols-outlined { font-size: 24px }`, and\n     per CSS Scoping §3.3 the outer tree beats `::slotted()` for normal\n     declarations at any specificity. Only `!important` inverts that. */\n  font-size: var(--_icon-size) !important;\n  width: var(--_icon-size);\n  height: var(--_icon-size);\n  color: inherit;\n}\n\n.md-text-field__clear:hover:not(:disabled) {\n  color: var(--md-sys-color-on-surface, #1C1B1F);\n}\n\n/* Keyboard focus ring for the in-field buttons (clear / password / speech):\n   the system secondary colour used across the library (cf. md-icon-button).\n   Without it they fall back to the UA blue. The buttons have 40px hit targets\n   around 24px glyphs (see ACTION BUTTON HIT TARGETS below) — the negative\n   offset pulls the ring inside the hit box so it hugs the visible glyph\n   instead of haloing the invisible target. */\n.md-text-field__clear:focus-visible,\n.md-text-field__password-toggle:focus-visible,\n.md-text-field__speech:focus-visible {\n  outline: 2px solid var(--md-sys-color-secondary, #625B71);\n  outline-offset: -6px;\n}\n\n.md-text-field__clear--disabled {\n  color: var(--md-sys-color-on-surface, #1C1B1F);\n  opacity: 0.38;\n  cursor: default;\n  pointer-events: none;\n}\n\n:host(.md-text-field--error) .md-text-field__clear:not(:disabled) {\n  color: var(--_error-color);\n}\n\n/* ==========================================================\n   8c. PASSWORD TOGGLE BUTTON\n   ========================================================== */\n.md-text-field__password-toggle {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  align-self: center;\n  border: none;\n  background: none;\n  padding: 0;\n  margin: 0;\n  margin-inline-start: var(--md-sys-spacing-gap-lg, 16px);\n  cursor: pointer;\n  border-radius: 50%;\n  width: var(--_icon-size);\n  height: var(--_icon-size);\n  flex-shrink: 0;\n  color: var(--_icon-color);\n  transition: color var(--md-sys-motion-duration-short2, 100ms) ease;\n}\n\n.md-text-field__password-toggle ::slotted(*) {\n  /* `!important` is required, not stylistic: slotted glyphs carry the\n     DOCUMENT-tree class `.material-symbols-outlined { font-size: 24px }`, and\n     per CSS Scoping §3.3 the outer tree beats `::slotted()` for normal\n     declarations at any specificity. Only `!important` inverts that. */\n  font-size: var(--_icon-size) !important;\n  width: var(--_icon-size);\n  height: var(--_icon-size);\n  color: inherit;\n}\n\n.md-text-field__password-toggle:hover:not(:disabled) {\n  color: var(--md-sys-color-on-surface, #1C1B1F);\n}\n\n.md-text-field__password-toggle--disabled {\n  color: var(--md-sys-color-on-surface, #1C1B1F);\n  opacity: 0.38;\n  cursor: default;\n  pointer-events: none;\n}\n\n:host(.md-text-field--error) .md-text-field__password-toggle:not(:disabled) {\n  color: var(--_error-color);\n}\n\n/* ==========================================================\n   8d. SPEECH-TO-TEXT BUTTON\n   ========================================================== */\n.md-text-field__speech {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  align-self: center;\n  border: none;\n  background: none;\n  padding: 0;\n  margin: 0;\n  margin-inline-start: var(--md-sys-spacing-gap-lg, 16px);\n  cursor: pointer;\n  border-radius: 50%;\n  width: var(--_icon-size);\n  height: var(--_icon-size);\n  flex-shrink: 0;\n  color: var(--_icon-color);\n  transition: color var(--md-sys-motion-duration-short2, 100ms) ease;\n}\n\n.md-text-field__speech ::slotted(*) {\n  /* `!important` is required, not stylistic: slotted glyphs carry the\n     DOCUMENT-tree class `.material-symbols-outlined { font-size: 24px }`, and\n     per CSS Scoping §3.3 the outer tree beats `::slotted()` for normal\n     declarations at any specificity. Only `!important` inverts that. */\n  font-size: var(--_icon-size) !important;\n  width: var(--_icon-size);\n  height: var(--_icon-size);\n  color: inherit;\n}\n\n.md-text-field__speech:hover:not(:disabled) {\n  color: var(--md-sys-color-on-surface, #1C1B1F);\n}\n\n.md-text-field__speech--listening {\n  color: var(--_error-color);\n  animation: md-speech-pulse 1.2s ease-in-out infinite;\n}\n\n.md-text-field__speech--disabled {\n  color: var(--md-sys-color-on-surface, #1C1B1F);\n  opacity: 0.38;\n  cursor: default;\n  pointer-events: none;\n}\n\n:host(.md-text-field--error) .md-text-field__speech:not(:disabled):not(.md-text-field__speech--listening) {\n  color: var(--_error-color);\n}\n\n@keyframes md-speech-pulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.4; }\n}\n\n/* ==========================================================\n   8e. ERROR ICON\n   ========================================================== */\n.md-text-field__error-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  align-self: center;\n  width: var(--_icon-size);\n  height: var(--_icon-size);\n  /* Pin the glyph size so the default (non-slotted) material-symbols \"error\"\n     glyph renders at the field's icon size instead of inheriting the field's\n     font-size and ballooning. Slotted custom icons are normalized below. */\n  font-size: var(--_icon-size);\n  line-height: 1;\n  margin-inline-start: var(--md-sys-spacing-gap-lg, 16px);\n  color: var(--_error-color);\n}\n\n.md-text-field__error-icon ::slotted(*) {\n  /* `!important` is required, not stylistic: slotted glyphs carry the\n     DOCUMENT-tree class `.material-symbols-outlined { font-size: 24px }`, and\n     per CSS Scoping §3.3 the outer tree beats `::slotted()` for normal\n     declarations at any specificity. Only `!important` inverts that. */\n  font-size: var(--_icon-size) !important;\n  width: var(--_icon-size);\n  height: var(--_icon-size);\n  color: inherit;\n}\n\n:host(.md-text-field--multiline:not(.md-text-field--auto-grow)) .md-text-field__error-icon {\n  align-self: flex-start;\n  margin-block-start: 16px;\n}\n\n:host(.md-text-field--auto-grow) .md-text-field__error-icon {\n  align-self: center;\n}\n\n/* ==========================================================\n   9. FILLED — ACTIVE INDICATOR\n   ========================================================== */\n.md-text-field__indicator {\n  position: absolute;\n  inset-block-end: 0;\n  inset-inline: 0;\n  height: 1px;\n  background-color: var(--md-sys-color-on-surface-variant, #49454F);\n  opacity: calc(1 - var(--_filled-pill));\n  transition:\n    height var(--md-sys-motion-duration-short2, 100ms) ease,\n    background-color var(--md-sys-motion-duration-short2, 100ms) ease,\n    opacity var(--md-sys-motion-duration-short2, 100ms) ease;\n}\n\n:host(.md-text-field--focused) .md-text-field__indicator {\n  height: var(--md-text-field-focus-border-width, 3px);\n  background-color: var(--_active-indicator-color);\n  /* Keep the MD3 grow (1px→3px) but make the primary colour IMMEDIATE — else\n     the line morphs from the hover `on-surface` (near-black) to primary over\n     100ms, the same \"dark, then primary\" flash as the outlined ring. */\n  transition: height var(--md-sys-motion-duration-short2, 100ms) ease;\n}\n\n:host(.md-text-field--error) .md-text-field__indicator {\n  background-color: var(--_error-color);\n}\n\n:host(.md-text-field--error.md-text-field--focused) .md-text-field__indicator {\n  height: var(--md-text-field-focus-border-width, 3px);\n  background-color: var(--_error-color);\n  transition: height var(--md-sys-motion-duration-short2, 100ms) ease; /* immediate colour — see above */\n}\n\n:host(:hover:not(.md-text-field--focused):not(.md-text-field--disabled):not(.md-text-field--error)) .md-text-field__indicator {\n  height: 1px;\n  background-color: var(--md-sys-color-on-surface, #1C1B1F);\n}\n\n:host(:hover:not(.md-text-field--focused):not(.md-text-field--disabled).md-text-field--error) .md-text-field__indicator {\n  height: 1px;\n  background-color: var(--md-sys-color-on-error-container, #8C1D18);\n}\n\n/* ==========================================================\n   10. OUTLINED — FIELDSET / LEGEND\n   ========================================================== */\n.md-text-field__fieldset {\n  position: absolute;\n  inset: 0;\n  margin: 0;\n  /* a wide legend must never expand the fieldset past the host (min-content\n     of an abs-positioned box wins over inset without these) */\n  max-inline-size: 100%;\n  min-inline-size: 0;\n  overflow: hidden;\n  /* Positions the NOTCH, which must line up with the floated label — the label\n     sits at the container's padded content edge, so this has to track the same\n     token or the two drift apart and the outline strikes through the label.\n     The old literal 11px was that alignment hard-coded for density 0 only:\n     16px container padding - 1px fieldset border - 4px legend padding = 11.\n     Now derived, so it holds at every rung (12->7, 8->3). */\n  /* Both fall back to --_text-inset, the SAME default the container uses. With\n     the raw token here instead, the notch sat 7px left of the label the moment\n     the container's default gained the caret bearing — the border cut through\n     the label's first characters. */\n  padding-inline-start: calc(\n    var(--md-text-field-padding-inline-start, var(--_text-inset)) -\n      1px - var(--_legend-inline-padding, 4px)\n  );\n  padding-inline-end: calc(\n    var(--md-text-field-padding-inline-end, var(--_text-inset)) -\n      1px - var(--_legend-inline-padding, 4px)\n  );\n  padding-block: 0;\n  border: 1px solid var(--_outline-color);\n  border-radius: var(--_container-shape);\n  pointer-events: none;\n  /* Only border-COLOUR is transitioned. border-width is deliberately NOT — it\n     renders in integer-pixel steps, so a 1→3px \"grow\" reads as a jump, not a\n     glide; the ring snaps to its focused thickness while the floating label +\n     notch carry the smooth focus motion. On blur this rule fades the colour\n     primary→resting. */\n  transition: border-color var(--md-sys-motion-duration-medium1, 200ms) var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));\n}\n\n:host(.md-text-field--focused) .md-text-field__fieldset {\n  border-color: var(--_active-indicator-color);\n  border-width: var(--md-text-field-focus-border-width, 3px);\n  inset: var(--md-text-field-focus-inset, -2px);\n  /* Primary colour is IMMEDIATE (no border-color transition here) so a\n     mouse-focus — sitting on the near-black hover `on-surface` outline — never\n     morphs through black (\"black ring, then primary\"). The smooth part of focus\n     is the label floating up into the notch that cuts open in this ring. */\n  transition: none;\n}\n\n:host(.md-text-field--error) .md-text-field__fieldset {\n  border-color: var(--_error-color);\n}\n\n:host(.md-text-field--error.md-text-field--focused) .md-text-field__fieldset {\n  border-color: var(--_error-color);\n  border-width: var(--md-text-field-focus-border-width, 3px);\n  inset: var(--md-text-field-focus-inset, -2px);\n  transition: none; /* immediate colour — see the non-error rule above */\n}\n\n:host(:hover:not(.md-text-field--focused):not(.md-text-field--disabled):not(.md-text-field--error)) .md-text-field__fieldset {\n  border-color: var(--md-sys-color-on-surface, #1C1B1F);\n}\n\n:host(:hover:not(.md-text-field--focused):not(.md-text-field--disabled).md-text-field--error) .md-text-field__fieldset {\n  border-color: var(--md-sys-color-on-error-container, #8C1D18);\n}\n\n.md-text-field__legend {\n  /* long labels must never blow the notch past the host */\n  max-inline-size: calc(100% - 16px);\n  overflow: hidden;\n  height: 0;\n\n  padding: 0;\n  /* MUST stay identical to the outlined floating label's font-size — this\n     legend is what cuts the notch in the outline, and it sizes that gap by\n     rendering the same text. The label already tapered with density while this\n     stayed at a flat 12px, so below density 0 the notch was cut wider than the\n     label that sits in it. */\n  font-size: max(10px, calc(12px + var(--md-sys-density-scale, 0) * 0.5px));\n  max-width: 0;\n  /* Notch CLOSES with the same 200ms/easing it opens with (was `0ms` → the gap\n     snapped shut while the label smoothly descended). Now the cut in the outline\n     tracks the floating label symmetrically both ways. */\n  transition:\n    max-width var(--md-sys-motion-duration-medium1, 200ms) var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)),\n    padding-inline var(--md-sys-motion-duration-medium1, 200ms) var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));\n  white-space: nowrap;\n}\n\n.md-text-field__legend--active {\n  max-width: 100%;\n  /* Shared with the fieldset's padding-inline calc above — these two must agree. */\n  padding-inline: var(--_legend-inline-padding, 4px);\n  transition:\n    max-width var(--md-sys-motion-duration-medium1, 200ms) var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)),\n    padding-inline var(--md-sys-motion-duration-medium1, 200ms) var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));\n}\n\n.md-text-field__legend span {\n  display: inline-block;\n  padding: 0;\n  visibility: hidden;\n}\n\n/* ==========================================================\n   11. SUPPORT TEXT / CHARACTER COUNTER\n   ========================================================== */\n.md-text-field__support-row {\n  display: flex;\n  justify-content: space-between;\n  padding: 4px 16px 0;\n  gap: 16px;\n}\n\n.md-text-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(--_supporting-text-color);\n}\n\n.md-text-field__support-text--error {\n  color: var(--_error-color);\n}\n\n.md-text-field__counter {\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(--_supporting-text-color);\n  flex-shrink: 0;\n}\n\n/* ==========================================================\n   12. DISABLED\n   ========================================================== */\n:host(.md-text-field--disabled) .md-text-field__container {\n  cursor: default;\n  pointer-events: none;\n}\n\n:host(.md-text-field--disabled.md-text-field--filled) .md-text-field__container {\n  background-color: color-mix(in srgb, var(--md-sys-color-on-surface, #1C1B1F) 4%, transparent);\n}\n\n:host(.md-text-field--disabled) .md-text-field__label {\n  color: color-mix(in srgb, var(--md-sys-color-on-surface, #1C1B1F) 38%, transparent);\n}\n\n:host(.md-text-field--disabled) .md-text-field__input {\n  color: color-mix(in srgb, var(--md-sys-color-on-surface, #1C1B1F) 38%, transparent);\n}\n\n:host(.md-text-field--disabled) .md-text-field__indicator {\n  background-color: color-mix(in srgb, var(--md-sys-color-on-surface, #1C1B1F) 38%, transparent);\n}\n\n:host(.md-text-field--disabled) .md-text-field__fieldset {\n  border-color: color-mix(in srgb, var(--md-sys-color-on-surface, #1C1B1F) 12%, transparent);\n}\n\n:host(.md-text-field--disabled) .md-text-field__icon {\n  color: color-mix(in srgb, var(--md-sys-color-on-surface, #1C1B1F) 38%, transparent);\n}\n\n:host(.md-text-field--disabled) .md-text-field__icon ::slotted(*) {\n  color: inherit;\n}\n\n:host(.md-text-field--disabled) .md-text-field__support-text,\n:host(.md-text-field--disabled) .md-text-field__counter {\n  color: color-mix(in srgb, var(--md-sys-color-on-surface, #1C1B1F) 38%, transparent);\n}\n\n:host(.md-text-field--disabled) .md-text-field__prefix,\n:host(.md-text-field--disabled) .md-text-field__suffix {\n  color: color-mix(in srgb, var(--md-sys-color-on-surface, #1C1B1F) 38%, transparent);\n}\n\n/* ==========================================================\n   13. MATERIAL SYMBOLS (Shadow DOM)\n   ========================================================== */\n.material-symbols-outlined {\n  font-family: var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');\n  font-weight: normal;\n  font-style: normal;\n  /* Shadow-internal copy of the Material Symbols base — the global stylesheet\n     can't reach in here, so this needs no `!important`, only the same lever. */\n  font-size: var(--_icon-size);\n  line-height: 1;\n  letter-spacing: normal;\n  text-transform: none;\n  display: inline-block;\n  white-space: nowrap;\n  overflow-wrap: normal;\n  direction: ltr;\n  font-feature-settings: 'liga';\n  -webkit-font-smoothing: antialiased;\n}\n\n/* ==========================================================\n   AUTOFILL — browsers fill without input events; the animation\n   hack lets JS float the label instead of overlapping the text.\n   ========================================================== */\n\n@keyframes md-tf-autofill-start {\n  from { --md-tf-autofill: 1; }\n}\n\n@keyframes md-tf-autofill-cancel {\n  from { --md-tf-autofill: 0; }\n}\n\n.md-text-field__input:-webkit-autofill {\n  animation-name: md-tf-autofill-start;\n  /* keep the field's own surface instead of the UA's tint — must reference\n     the INTERNAL chain (the public var is unset on default themes, and a\n     transparent cover let Chrome's blue through) */\n  box-shadow: 0 0 0 1000px var(--_container-color, #E6E1E6) inset;\n  -webkit-text-fill-color: var(--md-text-field-input-color, var(--md-sys-color-on-surface, #1D1B20));\n  caret-color: var(--md-text-field-input-color, var(--md-sys-color-on-surface, #1D1B20));\n}\n\n.md-text-field__input:not(:-webkit-autofill) {\n  animation-name: md-tf-autofill-cancel;\n}\n\n/* ==========================================================\n   REDUCED MOTION\n   ========================================================== */\n\n@media (prefers-reduced-motion: reduce) {\n  .md-text-field__label,\n  .md-text-field__indicator,\n  .md-text-field__state-layer,\n  .md-text-field__fieldset,\n  .md-text-field__legend,\n  .md-text-field__legend > span,\n  .md-text-field__container {\n    transition-duration: 0.01ms !important;\n  }\n  .md-text-field__speech--listening,\n  .md-text-field__speech--listening * {\n    animation: none !important;\n  }\n}\n\n/* ==========================================================\n   FORCED COLORS (Windows High Contrast) — the filled variant is\n   background-only and measured white-on-white without this.\n   ========================================================== */\n\n@media (forced-colors: active) {\n  /* MUST outrank :host(.md-text-field--filled) .md-text-field__container\n     (0-3-0) — a bare class rule silently lost and the author container\n     survived under white FieldText labels (~1.25:1 in dark HCM) */\n  :host(.md-text-field--filled) .md-text-field__container,\n  :host(.md-text-field--filled.md-text-field--focused) .md-text-field__container,\n  :host(.md-text-field--filled.md-text-field--disabled) .md-text-field__container,\n  :host(.md-text-field--outlined) .md-text-field__container,\n  .md-text-field__container {\n    border: 1px solid ButtonText;\n    forced-color-adjust: none;\n    background: Field;\n    color: FieldText;\n  }\n  :host(.md-text-field--focused) .md-text-field__indicator {\n    background-color: Highlight;\n  }\n  .md-text-field__input {\n    caret-color: FieldText;\n  }\n  :host(.md-text-field--filled.md-text-field--disabled) .md-text-field__indicator {\n    background-color: GrayText;\n  }\n  :host(.md-text-field--outlined.md-text-field--disabled) .md-text-field__fieldset {\n    border-color: GrayText;\n  }\n  /* state-colored labels/indicator keep author colors without these */\n  :host(.md-text-field--focused) .md-text-field__label,\n  :host(.md-text-field--error) .md-text-field__label,\n  :host(.md-text-field--disabled) .md-text-field__label {\n    color: FieldText;\n  }\n  :host(.md-text-field--disabled) .md-text-field__label,\n  :host(.md-text-field--disabled) .md-text-field__input {\n    color: GrayText;\n  }\n  :host(.md-text-field--error) .md-text-field__indicator {\n    background-color: LinkText;\n  }\n  .md-text-field__input {\n    background: Field;\n    color: FieldText;\n  }\n  :host(.md-text-field--focused) .md-text-field__container {\n    outline: 2px solid Highlight;\n    outline-offset: 1px;\n  }\n  :host(.md-text-field--error) .md-text-field__container {\n    border-color: LinkText;\n  }\n  :host(.md-text-field--disabled) .md-text-field__container,\n  :host(.md-text-field--disabled) .md-text-field__input {\n    color: GrayText;\n    border-color: GrayText;\n  }\n  .md-text-field__support-text,\n  .md-text-field__counter {\n    color: CanvasText;\n  }\n  .md-text-field__support-text--error {\n    color: LinkText;\n  }\n  /* label / icons / prefix / suffix keep author colors without this and go\n     unreadable in dark HCM */\n  .md-text-field__label,\n  .md-text-field__prefix,\n  .md-text-field__suffix,\n  .md-text-field__icon,\n  .md-text-field__clear,\n  .md-text-field__password-toggle,\n  .md-text-field__speech {\n    color: FieldText;\n    forced-color-adjust: none;\n  }\n  .md-text-field__error-icon {\n    color: LinkText;\n  }\n  .md-text-field__indicator {\n    background-color: FieldText;\n  }\n  /* outlined draws its border via the fieldset — the container border added\n     above would double it with mismatched colors */\n  :host(.md-text-field--outlined) .md-text-field__container {\n    border: none;\n  }\n  :host(.md-text-field--outlined) .md-text-field__fieldset {\n    border-color: ButtonText;\n  }\n  :host(.md-text-field--outlined.md-text-field--error) .md-text-field__fieldset {\n    border-color: LinkText;\n  }\n  /* :hover author rules (~0-6-0) outranked the FC block and repainted the\n     label at 1.22:1 in dark HCM — mirror them at equal-or-higher specificity */\n  :host(:hover:not(.md-text-field--focused):not(.md-text-field--disabled):not(.md-text-field--error)) .md-text-field__label,\n  :host(:hover:not(.md-text-field--focused):not(.md-text-field--disabled).md-text-field--error) .md-text-field__label,\n  :host(:hover) .md-text-field__prefix,\n  :host(:hover) .md-text-field__suffix,\n  :host(:hover) .md-text-field__icon {\n    color: FieldText;\n  }\n  :host(:hover:not(.md-text-field--focused):not(.md-text-field--disabled).md-text-field--error) .md-text-field__label {\n    color: LinkText;\n  }\n  :host(:hover:not(.md-text-field--focused):not(.md-text-field--disabled):not(.md-text-field--error)) .md-text-field__indicator,\n  :host(:hover:not(.md-text-field--focused)) .md-text-field__indicator {\n    /* must match the author hover selector's specificity (0-4-0) exactly */\n    background-color: FieldText;\n  }\n  :host(:hover:not(.md-text-field--focused):not(.md-text-field--disabled).md-text-field--error) .md-text-field__indicator {\n    background-color: LinkText;\n  }\n  :host(:hover) .md-text-field__clear,\n  :host(:hover) .md-text-field__password-toggle,\n  :host(:hover) .md-text-field__speech {\n    color: FieldText;\n    background: none;\n  }\n}\n\n/* outlined fields have a transparent container — cover with the page surface */\n:host(.md-text-field--outlined) .md-text-field__input:-webkit-autofill {\n  box-shadow: 0 0 0 1000px var(--md-sys-color-surface, #FEF7FF) inset;\n}\n\n/* ==========================================================\n   ACTION BUTTON HIT TARGETS — 24px visuals, 40px targets\n   ========================================================== */\n\n.md-text-field__clear,\n.md-text-field__password-toggle,\n.md-text-field__speech {\n  min-inline-size: 40px;\n  min-block-size: 40px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-inline: -6px;\n  /* the 40px target must not defeat condensed densities: cancel its\n     contribution to the flex cross size (target area is preserved) */\n  margin-block: -8px;\n}\n\n/* M3: the clear affordance appears only when there is content — keep the\n   layout box (width stability) but hide the ghost icon */\n.md-text-field__clear--empty {\n  visibility: hidden;\n}\n","import { getValidityOf } from '../../utils/form';\nimport { AttachInternals, Build, Component, Element, Event, EventEmitter, Host, Method, Prop, State, Watch, h } from '@stencil/core';\n\nconst RESTRICT_PATTERNS: Record<string, RegExp> = {\n  numeric: /[^0-9]/g,\n  integer: /[^0-9-]/g,\n  decimal: /[^0-9.\\-]/g,\n  alpha: /[^a-zA-Z]/g,\n  alphanumeric: /[^a-zA-Z0-9]/g,\n};\n\n@Component({\n  tag: 'md-text-field',\n  styleUrl: 'md-text-field.css',\n  // delegatesFocus makes host.focus() (and click-anywhere) land in the inner\n  // input — previously host.focus() was a literal no-op.\n  shadow: { delegatesFocus: true },\n  formAssociated: true,\n})\nexport class MdTextField {\n\n  /**\n   * Always occupy the supporting-text line, even when there is no message.\n   *\n   * The row is otherwise rendered only when there is something to show, so the\n   * first validation error CREATES a line and shoves everything below it down —\n   * the whole form jumps as you tab through it. Reserving the space is opt-in\n   * because a field with no message would otherwise carry an empty line\n   * everywhere, including dense and inline layouts. createFormController turns\n   * it on automatically for the fields it manages, since those are exactly the\n   * ones whose messages appear and disappear.\n   */\n  @Prop({ attribute: 'reserve-supporting-space' }) reserveSupportingSpace: boolean = false;\n\n  @Element() el!: HTMLElement;\n\n  @Prop() variant: 'filled' | 'outlined' = 'filled';\n  @Prop() label: string = '';\n  /** NOT reflected: typed values (incl. passwords) must never appear as a DOM attribute. */\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() placeholder: string = '';\n  @Prop() type: string = 'text';\n  /** Form field name (host attribute — ElementInternals submits under it). */\n  @Prop({ reflect: true }) name: string = '';\n  /** Constraint validation (forwarded to the inner input; surfaced via ElementInternals). */\n  @Prop() pattern: string = '';\n  @Prop({ attribute: 'min-length', mutable: true }) minLength: number | undefined;\n  @Prop() min: string | number | undefined;\n  @Prop() max: string | number | undefined;\n  @Prop() step: string | number | undefined;\n  /** Input behavior passthrough (password managers / mobile keyboards). */\n  @Prop() autocomplete: string = '';\n  @Prop({ attribute: 'inputmode' }) inputMode: string = '';\n  @Prop({ attribute: 'enterkeyhint' }) enterKeyHint: string = '';\n  @Prop({ attribute: 'autocapitalize' }) autoCapitalize: string = '';\n  @Prop() spellcheck: boolean | undefined;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ attribute: 'readonly' }) readOnly: boolean = false;\n  @Prop() required: boolean = false;\n  @Prop() error: boolean = false;\n  @Prop() errorText: string = '';\n  @Prop() supportingText: string = '';\n  @Prop({ attribute: 'prefix-text' }) prefixText: string = '';\n  @Prop({ attribute: 'suffix-text' }) suffixText: string = '';\n  @Prop({ attribute: 'max-length', mutable: true }) maxLength: number | undefined;\n  /** Show a clear icon button. 'internal' clears the value directly; 'external' emits mdClear and leaves value control to the consumer. */\n  @Prop({ mutable: true }) clearable: 'internal' | 'external' | false = false;\n  /** Show a password visibility toggle. 'internal' toggles the input type directly; 'external' emits mdPasswordToggle and leaves type control to the consumer. */\n  @Prop({ attribute: 'password-toggle', mutable: true }) passwordToggle: 'internal' | 'external' | false = false;\n  /** Density scale: 0 (default 56px), -1 (52px), -2 (48px), -3 (44px). */\n  @Prop({ reflect: true }) density: 0 | -1 | -2 | -3 | -4 = 0;\n  /**\n   * Multi-line mode.\n   * - false: single-line <input> (default)\n   * - 'auto-grow': <textarea> that expands as content grows (multi-line field)\n   * - 'fixed': <textarea> with fixed height that scrolls (text area)\n   */\n  @Prop() multiline: 'auto-grow' | 'fixed' | false = false;\n  /** Number of visible text rows for multiline modes. Defaults to 2 for auto-grow, 4 for fixed. */\n  @Prop() rows: number | undefined;\n  /**\n   * Speech-to-text via Web Speech API.\n   * - 'internal': manages recognition internally, appends transcript to value\n   * - 'external': emits mdSpeechResult on mic click, letting the consumer handle recognition\n   */\n  @Prop({ attribute: 'speech-to-text', mutable: true }) speechToText: 'internal' | 'external' | false = false;\n  /** Language/locale for internal speech recognition (e.g. 'en-US', 'de-DE'). Defaults to browser locale. */\n  @Prop({ attribute: 'speech-lang' }) speechLang: string = '';\n  /**\n   * Restrict input to allowed characters.\n   * Presets: 'numeric', 'integer', 'decimal', 'alpha', 'alphanumeric'.\n   * Custom: a regex character class string, e.g. '[0-9+() -]'.\n   */\n  @Prop() restrict: string = '';\n  /**\n   * Formats the raw value for display.\n   * Set via JS: `el.formatter = (v) => Number(v).toLocaleString()`.\n   */\n  @Prop({ mutable: true }) formatter?: (value: string) => string;\n  /**\n   * Parses the display value back to a raw value.\n   * Set via JS: `el.parser = (v) => v.replace(/[^0-9.-]/g, '')`.\n   */\n  @Prop({ mutable: true }) parser?: (displayValue: string) => string;\n  /**\n   * When to apply the formatter.\n   * - 'blur': format on blur, show raw value on focus (default)\n   * - 'input': format on every keystroke (live formatting)\n   */\n  @Prop({ attribute: 'format-on' }) formatOn: 'blur' | 'input' = 'blur';\n  /** Border width when focused: 1, 2, or 3 pixels. */\n  @Prop({ attribute: 'focus-border-width', reflect: true }) focusBorderWidth: number = 3;\n  /**\n   * Force the field to render in its focused visual state regardless of the\n   * underlying input's actual focus. Use when the field acts as an *anchor*\n   * for a popover, dialog, or menu, and the OS focus has moved into that\n   * surface — for example the `md-time-picker` keeps its trigger field in\n   * the focused look while the picker modal is open, so the trigger and\n   * the modal read as one connected control.\n   *\n   * Visual-only: affects the notched-outline width / colour, the floating\n   * label position, and the leading-icon colour through md-text-field's\n   * existing `.md-text-field--focused` rules. Does NOT alter formatter /\n   * blur-format behaviour (those keep tracking real focus events), so\n   * `formatOn=\"blur\"` still flips between formatted and raw on real\n   * focus/blur even while `appear-focused` is on.\n   */\n  @Prop({ attribute: 'appear-focused', reflect: true }) appearFocused: boolean = false;\n  /**\n   * When leading `chips` are slotted, allow them to WRAP onto multiple rows so\n   * the field grows to fit them. Default `false`: chips stay on a single line and\n   * the field keeps its normal height (the consumer, e.g. md-multi-select, is\n   * responsible for handling overflow — clipping or a \"+N\" counter).\n   */\n  @Prop({ attribute: 'chips-wrap', reflect: true }) chipsWrap: boolean = false;\n  /** Debounce delay (ms) for the mdSearch event. Emits after the user stops typing for this duration. 0 = disabled. */\n  @Prop({ reflect: true }) debounce: number = 0;\n  /** Throttle interval (ms) for the mdSearch event. Emits at most once per interval while typing. 0 = disabled. */\n  @Prop({ reflect: true }) throttle: number = 0;\n\n  @Event() mdInput: EventEmitter<string>;\n  @Event() mdChange: EventEmitter<string>;\n  /** Emitted with debounce/throttle control. Useful for search-as-you-type, API calls, or filtering. */\n  @Event() mdSearch: EventEmitter<string>;\n  @Event() mdClear: EventEmitter<void>;\n  @Event() mdPasswordToggle: EventEmitter<{ visible: boolean }>;\n  @Event() mdSpeechResult: EventEmitter<{ transcript: string; listening: boolean }>;\n\n  @AttachInternals() internals!: ElementInternals;\n\n  @State() private focused = false;\n  @State() private formDisabled = false;\n  @State() private autofilled = false;\n  @State() private hostAriaLabel = '';\n  @State() private passwordVisible = false;\n  @State() private hasSlottedLeading = false;\n  /** Interactive leading content (e.g. multi-select chips) slotted into `chips` —\n   *  rendered in the input flow (NOT the aria-hidden icon slot) so it stays operable. */\n  @State() private hasSlottedChips = false;\n  @State() private hasSlottedTrailing = false;\n  @State() private hasTrailingIconButton = false;\n  @State() private listening = false;\n  @State() private displayValue: string = '';\n\n  private inputEl?: HTMLInputElement | HTMLTextAreaElement;\n  private defaultValue = '';\n  /** True while a this.value mutation originates from user input handlers. */\n  private internalWrite = false;\n  private composing = false;\n  private warnedLiveFormat = false;\n  private uid = `md-text-field-${Math.random().toString(36).slice(2, 7)}`;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  private recognition?: any;\n  private debounceTimer?: ReturnType<typeof setTimeout>;\n  private throttleTimer?: ReturnType<typeof setTimeout>;\n  private throttlePending = false;\n  private lastEmittedSearch: string | undefined;\n\n  /** Consumer `disabled` OR ancestor form/fieldset disabled (formDisabledCallback). */\n  private get isDisabled(): boolean {\n    return this.disabled || this.formDisabled;\n  }\n\n  /** Live (per-keystroke) formatting REQUIRES a parser — without one the\n   *  formatted display feeds back into the next parse and corrupts the value.\n   *  Fall back to blur formatting and warn once in dev. */\n  private get effectiveFormatOn(): 'blur' | 'input' {\n    if (this.formatOn === 'input' && this.formatter && !this.parser) {\n      if (Build.isDev && !this.warnedLiveFormat) {\n        this.warnedLiveFormat = true;\n        console.warn(\"[md-text-field] format-on='input' requires a parser — falling back to format-on='blur'.\", this.el);\n      }\n      return 'blur';\n    }\n    return this.formatOn;\n  }\n\n  /** Anything focusable slotted as trailing content must stay in the AX\n   *  tree (the wrapper is aria-hidden for decorative icons only). */\n  private static isInteractive(el: Element): boolean {\n    const tag = el.tagName.toLowerCase();\n    return (\n      ['md-icon-button', 'md-button', 'button', 'a', 'input', 'select', 'textarea'].includes(tag) ||\n      el.hasAttribute('tabindex')\n    );\n  }\n\n  private get isFloating(): boolean {\n    // `appearFocused` opts an unfocused, empty field into the floating-label\n    // state so the legend notch forms cleanly around the label. Without this,\n    // toggling `appear-focused` on an empty trigger would draw the focused\n    // primary outline THROUGH the resting (inline) label, because the\n    // fieldset's legend wouldn't be active and there'd be no notch cut.\n    return this.focused || this.appearFocused || !!this.value || !!this.placeholder || this.autofilled || this.hasSlottedChips;\n  }\n\n  private get effectiveRows(): number {\n    if (this.rows != null) return this.rows;\n    return this.multiline === 'fixed' ? 4 : 2;\n  }\n\n  private get restrictPattern(): RegExp | null {\n    if (!this.restrict) return null;\n    if (RESTRICT_PATTERNS[this.restrict]) return RESTRICT_PATTERNS[this.restrict];\n    try {\n      // Custom character class: invert it to strip disallowed chars\n      // e.g. '[0-9+]' → /[^0-9+]/g\n      const inner = this.restrict.startsWith('[') && this.restrict.endsWith(']')\n        ? this.restrict.slice(1, -1)\n        : this.restrict;\n      return new RegExp(`[^${inner}]`, 'g');\n    } catch {\n      return null;\n    }\n  }\n\n  private applyRestrict(raw: string): string {\n    const pattern = this.restrictPattern;\n    return pattern ? raw.replace(pattern, '') : raw;\n  }\n\n  private syncTrailingSlotState(trailingSlot: HTMLSlotElement | null | undefined) {\n    if (!trailingSlot) return;\n    this.hasSlottedTrailing = trailingSlot.assignedNodes().length > 0;\n    this.hasTrailingIconButton = trailingSlot\n      .assignedElements()\n      .some((el) => MdTextField.isInteractive(el));\n  }\n\n  /**\n   * Detect projected trailing/leading icons from host children before first\n   * paint. Nested consumers (e.g. md-date-picker) always render a trailing\n   * md-icon-button inside the field; waiting for componentDidLoad left the\n   * trailing wrapper at display:none on the initial frame.\n   */\n  private syncHostSlottedIcons() {\n    const leading = this.el.querySelector('[slot=\"leading-icon\"]');\n    const trailing = this.el.querySelector('[slot=\"trailing-icon\"]');\n    this.hasSlottedLeading = !!leading;\n    this.hasSlottedTrailing = !!trailing;\n    this.hasTrailingIconButton = !!trailing && MdTextField.isInteractive(trailing);\n  }\n\n  componentWillLoad() {\n    this.bridgeFormatterProps();\n    // bare attribute forms (`clearable`, `password-toggle`, `speech-to-text`)\n    // parse as '' — treat as the internal mode instead of silently off\n    if (this.el.hasAttribute('clearable') && !this.clearable) this.clearable = 'internal';\n    if (this.el.hasAttribute('password-toggle') && !this.passwordToggle) this.passwordToggle = 'internal';\n    if (this.el.hasAttribute('speech-to-text') && !this.speechToText) this.speechToText = 'internal';\n    // native attribute spellings (minlength/maxlength) as fallbacks for the\n    // dash-cased props\n    if (this.maxLength == null && this.el.hasAttribute('maxlength')) {\n      this.maxLength = parseInt(this.el.getAttribute('maxlength')!, 10);\n    }\n    if (this.minLength == null && this.el.hasAttribute('minlength')) {\n      this.minLength = parseInt(this.el.getAttribute('minlength')!, 10);\n    }\n    // host aria-label passthrough: hosts are role-less (generic), where\n    // aria-label is prohibited — move it to the input's accessible name\n    if (!this.label && !this.hostAriaLabel) {\n      const hostLabel = this.el.getAttribute('aria-label');\n      if (hostLabel) {\n        this.hostAriaLabel = hostLabel;\n        this.el.removeAttribute('aria-label');\n      }\n    }\n    // Sync before first paint so consumers (e.g. md-date-picker) do not flash\n    // an empty input when a `value` prop is already set.\n    if (!this.multiline && /[\\r\\n]/.test(this.value)) {\n      this.value = this.value.replace(/[\\r\\n]+/g, ''); // native setter parity for initial values\n    }\n    this.defaultValue = this.value;\n    this.syncDisplayValue();\n    this.syncHostSlottedIcons();\n    this.updateFormValue();\n  }\n\n  /** ElementInternals: participate in FormData under the host's `name`. */\n  private updateFormValue() {\n    try {\n      this.internals?.setFormValue(this.value); // '' submits as x= like a native input\n    } catch { /* spec mock */ }\n  }\n\n  /** Surface the inner input's constraint validity on the host. */\n  private customValidityMessage = '';\n\n  private updateValidity() {\n    const input = this.inputEl;\n    if (!input) return;\n    try {\n      if (this.customValidityMessage) {\n        this.internals?.setValidity({ customError: true }, this.customValidityMessage, input);\n        return;\n      }\n      // Validity must describe the SUBMITTED value (this.value), not the\n      // formatted display: pattern=\"[0-9]+\" + a grouping formatter flagged\n      // valid data as patternMismatch after blur. Probe raw synchronously\n      // (no paint can happen mid-task), then restore the display.\n      // While FOCUSED with display != raw (live formatter/parser fields),\n      // the probe swap below destroys the caret Chrome preserves across\n      // value writes — skip; blur re-validates on the committed state.\n      if (this.focused && input.value !== this.value) return;\n      const shown = input.value;\n      let restore = false;\n      if (input.value !== this.value) {\n        input.value = this.value;\n        restore = true;\n        if (input.value !== this.value) {\n          // input can't even HOLD the value (type=number + garbage) — block\n          // submission rather than submit data the control can't represent\n          input.value = shown;\n          this.internals?.setValidity({ badInput: true }, 'Invalid value', input);\n          return;\n        }\n      }\n      // SNAPSHOT immediately: input.validity is LIVE — restoring the display\n      // value below would re-flip every flag before we read it.\n      const v = input.validity;\n      const flags = {\n        valueMissing: v.valueMissing,\n        typeMismatch: v.typeMismatch,\n        patternMismatch: v.patternMismatch,\n        tooLong: v.tooLong,\n        tooShort: v.tooShort,\n        rangeUnderflow: v.rangeUnderflow,\n        rangeOverflow: v.rangeOverflow,\n        stepMismatch: v.stepMismatch,\n        badInput: v.badInput,\n      };\n      const valid = v.valid;\n      const message = input.validationMessage;\n      if (restore) input.value = shown;\n\n      if (valid) {\n        this.internals?.setValidity({});\n      } else {\n        // plain flags — passing the live ValidityState object throws in Chrome\n        this.internals?.setValidity(flags, message || 'Invalid value', input);\n      }\n    } catch { /* spec mock */ }\n      this.emitValidityChange();\n  }\n\n  formResetCallback() {\n    this.internalWrite = false;\n    this.value = this.defaultValue;\n    this.syncDisplayValue();\n    if (this.inputEl) this.inputEl.value = this.displayValue;\n    this.updateFormValue();\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  /**\n   * Promote the inner input to a WAI-ARIA **combobox**, for a composite that\n   * owns the popup (md-autocomplete). The role has to live on the real textbox\n   * — the one AT reads when it has focus — and this field renders it, so the\n   * owner cannot put it there itself.\n   *\n   * Whitelisted to `combobox`: it is the only role an owner has a legitimate\n   * reason to place on a text input, and an open-ended role prop here would let\n   * a consumer lie about the control.\n   */\n  @Prop({ attribute: 'input-role' }) inputRole: '' | 'combobox' = '';\n\n  /** Expanded state of the owner's popup. Emitted only with `input-role=\"combobox\"`,\n   *  where `aria-expanded` is an allowed attribute (it is not on a bare textbox). */\n  @Prop({ attribute: 'input-expanded' }) inputExpanded: boolean = false;\n\n  /** `aria-autocomplete` for the combobox — how typing relates to the popup. */\n  @Prop({ attribute: 'input-aria-autocomplete' })\n  inputAriaAutocomplete: '' | 'none' | 'inline' | 'list' | 'both' = '';\n\n  /** Focus the inner input (host.focus() also works via delegatesFocus). */\n  @Method()\n  async setFocus() {\n    this.inputEl?.focus();\n  }\n\n  /** Select the input's full contents. */\n  @Method()\n  async select() {\n    this.inputEl?.select();\n  }\n\n  /**\n   * The real `<input>` / `<textarea>` this field renders.\n   *\n   * A composite that owns a popup (md-autocomplete, the date/time pickers)\n   * needs the actual textbox to wire combobox ARIA onto — its role, its\n   * expanded state, and the element references that point at a listbox living\n   * in the PARENT's shadow root. Handing it over explicitly replaces the\n   * shadow-piercing `querySelector('.md-text-field__input')` those components\n   * were doing against a private class name.\n   *\n   * Returns null before the first render.\n   */\n  @Method()\n  async getInputElement(): Promise<HTMLInputElement | HTMLTextAreaElement | null> {\n    return this.inputEl ?? null;\n  }\n\n  /** Native-parity validity readback: flags + message + willValidate. */\n  @Method()\n  async getValidity(): Promise<{ valid: boolean; validationMessage: string; flags: Record<string, boolean> }> {\n    try {\n      const v = this.internals.validity;\n      return {\n        valid: v.valid,\n        validationMessage: this.internals.validationMessage,\n        flags: {\n          valueMissing: v.valueMissing,\n          typeMismatch: v.typeMismatch,\n          patternMismatch: v.patternMismatch,\n          tooLong: v.tooLong,\n          tooShort: v.tooShort,\n          rangeUnderflow: v.rangeUnderflow,\n          rangeOverflow: v.rangeOverflow,\n          stepMismatch: v.stepMismatch,\n          badInput: v.badInput,\n          customError: v.customError,\n        },\n      };\n    } catch {\n      return { valid: true, validationMessage: '', flags: {} };\n    }\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  formStateRestoreCallback(state: string | File | FormData | null) {\n    // browser session restore / bfcache — native inputs restore their value\n    if (typeof state === 'string') {\n      this.value = state;\n    }\n  }\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 like md-select embed an\n   * md-text-field, and a composed event escapes that inner shadow root, so a\n   * listener on md-select would receive the inner field's event as well as the\n   * host's — two events, different payloads, for one logical control. Keeping\n   * it uncomposed means each component reports only for itself, while\n   * `bubbles: true` still lets a <form> or app root hear every control.\n   */\n  @Event({ bubbles: true, composed: false }) mdValidityChange: EventEmitter<{\n    valid: boolean;\n    validationMessage: string;\n    flags: Record<string, boolean>;\n  }>;\n\n  /** Last emitted validity, so a re-publish that changes nothing stays silent. */\n  private lastValidityKey: string | null = null;\n\n  /**\n   * Emit mdValidityChange if validity actually moved.\n   *\n   * The FIRST call only primes the baseline. Initial state is not a change, and\n   * emitting on mount would fire once per control on every page load — noise a\n   * consumer would have to filter out, and misleading for anything logging\n   * \"field became invalid\".\n   */\n  private emitValidityChange() {\n    const v = getValidityOf(this.internals);\n    const key = `${v.valid}|${v.validationMessage}`;\n    if (this.lastValidityKey === key) return;\n    const primed = this.lastValidityKey !== null;\n    this.lastValidityKey = key;\n    if (primed) this.mdValidityChange.emit(v);\n  }\n\n  /** Constraint-validation API, delegated to the inner input. */\n  @Method()\n  async checkValidity(): Promise<boolean> {\n    // internals reflects the SUBMITTED value's validity (the inner input may\n    // hold a formatted display that would answer wrongly in both directions)\n    try {\n      return this.internals.checkValidity();\n    } catch {\n      return this.inputEl?.checkValidity() ?? true;\n    }\n  }\n\n  @Method()\n  async reportValidity(): Promise<boolean> {\n    try {\n      return this.internals.reportValidity();\n    } catch {\n      return this.inputEl?.reportValidity() ?? true;\n    }\n  }\n\n  componentDidLoad() {\n    const root = this.el.shadowRoot;\n    const leadingSlot = root?.querySelector('slot[name=\"leading-icon\"]') as HTMLSlotElement | null;\n    leadingSlot?.addEventListener('slotchange', () => {\n      this.hasSlottedLeading = leadingSlot.assignedNodes().length > 0;\n    });\n    const trailingSlot = root?.querySelector('slot[name=\"trailing-icon\"]') as HTMLSlotElement | null;\n    trailingSlot?.addEventListener('slotchange', () => {\n      this.syncTrailingSlotState(trailingSlot);\n    });\n    const chipsSlot = root?.querySelector('slot[name=\"chips\"]') as HTMLSlotElement | null;\n    chipsSlot?.addEventListener('slotchange', () => {\n      this.hasSlottedChips = chipsSlot.assignedNodes().length > 0;\n    });\n    // Detect statically-slotted icons present at first render: the initial\n    // `slotchange` can fire before the listeners above are attached, so sync\n    // once on load (matches md-icon-button's behaviour).\n    this.hasSlottedLeading = (leadingSlot?.assignedNodes().length ?? 0) > 0;\n    this.hasSlottedChips = (chipsSlot?.assignedNodes().length ?? 0) > 0;\n    this.syncTrailingSlotState(trailingSlot);\n\n    if (this.multiline === 'auto-grow') {\n      this.autoGrow();\n    }\n\n    // Initialize display value with formatted version if not focused\n    this.syncDisplayValue();\n    this.updateValidity();\n  }\n\n  @Watch('value')\n  onValueChange() {\n    // framework form resets (Angular/Vue setValue(null)) write null through\n    // the proxies — native inputs coerce to ''\n    if (this.value == null) {\n      this.value = '';\n      return; // watch re-fires with ''\n    }\n    // native single-line inputs strip newlines at the value SETTER —\n    // blurred programmatic writes must sanitize too, or value/display/\n    // validity/submission diverge\n    if (!this.internalWrite && !this.multiline && /[\\r\\n]/.test(this.value)) {\n      this.value = this.value.replace(/[\\r\\n]+/g, '');\n      return; // watch re-fires with the clean value\n    }\n    if (this.multiline === 'auto-grow') {\n      this.autoGrow();\n    }\n    this.updateFormValue();\n    if (!this.focused) {\n      this.syncDisplayValue();\n      return;\n    }\n    // Programmatic writes while FOCUSED were silently dropped (the next\n    // keystroke reverted to DOM state) — breaking md-autocomplete's option\n    // pick. Writes NOT originating from our own input handlers must reach\n    // the visible input, preserving the caret.\n    if (!this.internalWrite) {\n      // a programmatic write ABORTS any in-flight composition without a\n      // compositionend — un-wedge the gate\n      this.composing = false;\n      this.syncDisplayValue();\n      const el = this.inputEl;\n      if (el) {\n        el.value = this.effectiveFormatOn === 'blur' && this.formatter ? this.value : this.displayValue;\n        // replacement semantics (autocomplete pick): caret goes to the end\n        const end = el.value.length;\n        try { el.setSelectionRange(end, end); } catch { /* mock DOM */ }\n      }\n      this.updateValidity();\n    }\n  }\n\n  /** Re-sync the DOM input after a type change: churning through\n   *  type=\"number\" leaves the native input blank for non-numeric values;\n   *  switching back must restore the visible text. */\n  private pendingTypeResync = false;\n\n  @Watch('type')\n  onTypeChange() {\n    // resync must run AFTER the render that applies the new type to the DOM —\n    // a microtask fires before Stencil commits, and the type swap re-wipes it\n    this.pendingTypeResync = true;\n  }\n\n  componentDidRender() {\n    if (this.pendingTypeResync) {\n      this.pendingTypeResync = false;\n      const el = this.inputEl;\n      if (el) {\n        const expected = this.focused && this.formatter && this.effectiveFormatOn === 'blur' ? this.value : this.displayValue;\n        if (el.value !== expected) {\n          el.value = expected;\n        }\n      }\n    }\n    // Always AFTER render: validity must be read from the COMMITTED input —\n    // reading it in the value watch saw the stale DOM (programmatic fills\n    // never cleared valueMissing).\n    this.updateValidity();\n  }\n\n  @State() private formatterEpoch = 0;\n\n  /** Stencil function-typed props are INERT (no watch, no re-render on\n   *  assignment) — bridge element-level formatter/parser assignments with\n   *  explicit accessors so the documented `el.formatter = fn` path\n   *  reformats the resting display and re-renders (maxLength omission etc). */\n  private bridgeFormatterProps() {\n    (['formatter', 'parser'] as const).forEach((key) => {\n      const el = this.el as unknown as Record<string, unknown>;\n      Object.defineProperty(this.el, key, {\n        configurable: true,\n        get: () => this[key],\n        set: (fn: ((v: string) => string) | undefined) => {\n          this[key] = fn as never;\n          // recompute the display BEFORE the reactive poke — spec-env renders\n          // flush synchronously per state set, and a stale displayValue would\n          // win the final patch\n          if (!this.focused) {\n            this.syncDisplayValue();\n          }\n          this.formatterEpoch++; // re-render (maxLength omission, display)\n        },\n      });\n      void el;\n    });\n  }\n\n  private syncDisplayValue() {\n    if (this.formatter) {\n      try {\n        const out = this.formatter(this.value);\n        this.displayValue = typeof out === 'string' ? out : this.value;\n      } catch (err) {\n        if (Build.isDev) console.warn('[md-text-field] formatter threw — showing the raw value.', err);\n        this.displayValue = this.value;\n      }\n    } else {\n      this.displayValue = this.value;\n    }\n  }\n\n  private emitSearchDistinct(value: string) {\n    if (value === this.lastEmittedSearch) return;\n    this.lastEmittedSearch = value;\n    this.mdSearch.emit(value);\n  }\n\n  private emitSearch(value: string) {\n    if (this.debounce > 0) {\n      clearTimeout(this.debounceTimer);\n      this.debounceTimer = setTimeout(() => this.emitSearchDistinct(value), this.debounce);\n    }\n\n    if (this.throttle > 0) {\n      if (!this.throttleTimer) {\n        this.emitSearchDistinct(value);\n        this.throttlePending = false;\n        this.throttleTimer = setTimeout(() => {\n          this.throttleTimer = undefined;\n          if (this.throttlePending) {\n            this.emitSearchDistinct(this.value);\n            this.throttlePending = false;\n          }\n        }, this.throttle);\n      } else {\n        this.throttlePending = true;\n      }\n    }\n\n    if (this.debounce <= 0 && this.throttle <= 0) {\n      this.emitSearchDistinct(value);\n    }\n  }\n\n  private autoGrow() {\n    const textarea = this.inputEl as HTMLTextAreaElement | undefined;\n    if (!textarea) return;\n    textarea.value = this.value;\n    textarea.style.height = 'auto';\n    textarea.style.height = `${textarea.scrollHeight}px`;\n  }\n\n  private handleInput = (e: Event) => {\n    const el = (e.target as HTMLInputElement | HTMLTextAreaElement) || this.inputEl;\n    if (!el) return;\n    // Mid-IME-composition the DOM value is provisional: restricting or\n    // formatting it CANCELS the composition on every CJK keystroke. Let the\n    // browser compose; the full pipeline runs once on compositionend.\n    if (this.composing) return;\n    let raw = el.value;\n    let cursorPos = el.selectionStart ?? raw.length;\n\n    // Apply restriction\n    let restricted = this.applyRestrict(raw);\n    // length cap runs AFTER restrict (native maxLength is not forwarded for\n    // restrict fields), so pasting \"(555) 123-4567\" into numeric/10 keeps\n    // all ten digits\n    if (this.restrict && this.maxLength != null && !isNaN(this.maxLength) && restricted.length > this.maxLength) {\n      const points = Array.from(restricted);\n      let out = '';\n      for (const pt of points) {\n        if ((out + pt).length > this.maxLength) break;\n        out += pt;\n      }\n      restricted = out;\n    }\n    if (restricted !== raw) {\n      // adjust the caret by characters stripped BEFORE it only — the global\n      // length diff also counted strips after the caret, landing the caret\n      // behind the edit point and scrambling sustained mid-string typing\n      const strippedBefore = this.applyRestrict(raw.substring(0, cursorPos));\n      raw = restricted;\n      el.value = raw;\n      cursorPos = Math.min(strippedBefore.length, raw.length);\n      try { el.setSelectionRange(cursorPos, cursorPos); } catch { /* mock DOM */ }\n    }\n\n    this.internalWrite = true;\n    try {\n      this.value = this.parser ? this.parser(raw) : raw;\n    } catch (err) {\n      if (Build.isDev) console.warn('[md-text-field] parser threw — using the raw value.', err);\n      this.value = raw;\n    }\n\n    if (this.formatter && this.effectiveFormatOn === 'input' && this.maxLength != null) {\n      const content = this.value.replace(/[-/\\s]/g, '');\n      if (content.length > this.maxLength) {\n        // slice by CODE POINTS — a code-unit slice can split a surrogate\n        // pair and submit corrupted Unicode (U+FFFD)\n        const points = Array.from(content);\n        let out = '';\n        for (const pt of points) {\n          if ((out + pt).length > this.maxLength) break;\n          out += pt;\n        }\n        this.value = out;\n      }\n    }\n\n    if (this.formatter && this.effectiveFormatOn === 'input') {\n      try {\n      // content = what the PARSER keeps (typed '.'/',' are content for number\n      // formatters; group separators are not) — the alphanumeric-only count\n      // orphaned decimal separators and scrambled following digits\n      const contentLen = (str: string) =>\n        this.parser ? this.parser(str).length : (str.match(/[0-9a-zA-Z]/g) || []).length;\n      const contentBeforeCursor = contentLen(raw.substring(0, cursorPos));\n      const formatted = this.formatter(this.value);\n      this.displayValue = formatted;\n      el.value = formatted;\n\n      // deletions can land the caret at content position 0 — defaulting to\n      // the END teleported it and scrambled \"retype the first group\" flows\n      let newPos = contentBeforeCursor === 0 ? 0 : formatted.length;\n      for (let i = 0; contentBeforeCursor > 0 && i < formatted.length; i++) {\n        if (contentLen(formatted.slice(0, i + 1)) === contentBeforeCursor) {\n          newPos = i + 1;\n          break;\n        }\n      }\n      try { el.setSelectionRange(newPos, newPos); } catch { /* mock DOM */ }\n      } catch (err) {\n        // a throwing formatter must not wedge the pipeline (uncaught per\n        // keystroke froze the visible input while value kept advancing)\n        if (Build.isDev) console.warn('[md-text-field] formatter threw — leaving the raw display.', err);\n        this.displayValue = this.value;\n        el.value = this.value;\n      }\n    }\n\n    if (!(this.formatter && this.effectiveFormatOn === 'input')) {\n      // keep displayValue honest while typing — the post-render type-churn\n      // resync reads it and used to clobber live input with stale text\n      this.displayValue = el.value;\n    }\n    this.internalWrite = false;\n    this.mdInput.emit(this.value);\n    this.emitSearch(this.value);\n\n    if (this.multiline === 'auto-grow') {\n      this.autoGrow();\n    }\n  };\n\n  private handleCompositionStart = () => {\n    this.composing = true;\n  };\n\n  private handleCompositionEnd = (e: Event) => {\n    this.composing = false;\n    this.handleInput(e);\n  };\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    // Enter submits the owning form (single-line fields, like a native input)\n    if (e.key === 'Enter' && !this.multiline && !this.composing) {\n      try {\n        const form = this.internals?.form;\n        // native implicit submission activates the DEFAULT submit button so\n        // its name/value participates and its click handlers fire\n        const submitter = form?.querySelector<HTMLElement>(\n          'button[type=\"submit\"], input[type=\"submit\"], button:not([type])',\n        );\n        form?.requestSubmit(submitter instanceof HTMLButtonElement || submitter instanceof HTMLInputElement ? submitter : undefined);\n      } catch { /* spec mock */ }\n    }\n    // Escape clears (internal clearable only) — keyboard parity with the icon\n    if (e.key === 'Escape' && !this.composing && this.clearable === 'internal' && this.value && !this.readOnly && !this.isDisabled) {\n      e.stopPropagation();\n      e.preventDefault(); // a parent <dialog> must not ALSO close on the clearing press\n      this.clearValue();\n      this.mdClear.emit(); // keyboard parity with the clear icon\n    }\n  };\n\n  /** Autofill never fires input events pre-interaction — detect it via the\n   *  animation hack so the label floats instead of overlapping the text. */\n  private handleAutofillStart = (e: AnimationEvent) => {\n    if (e.animationName === 'md-tf-autofill-start') this.autofilled = true;\n    if (e.animationName === 'md-tf-autofill-cancel') this.autofilled = false;\n  };\n\n  private handleChange = () => {\n    this.mdChange.emit(this.value);\n    // change is non-composed — form-level change delegation never hears the\n    // inner input; re-dispatch from the host (material-web parity).\n    // CustomEvent, NOT Event: the Stencil `Event` decorator import shadows\n    // the DOM constructor here.\n    this.el.dispatchEvent(new CustomEvent('change', { bubbles: true }));\n  };\n\n  private handleFocus = () => {\n    this.focused = true;\n    // In blur mode, switch from formatted display to raw value for editing\n    if (this.formatter && this.effectiveFormatOn === 'blur' && this.inputEl) {\n      this.displayValue = this.value;\n      this.inputEl.value = this.value;\n    }\n  };\n\n  private handleBlur = () => {\n    this.focused = false;\n    this.composing = false; // abandoned compositions must not wedge the input gate\n    // Always sync display value on blur\n    this.syncDisplayValue();\n    if (this.inputEl) {\n      this.inputEl.value = this.displayValue;\n    }\n  };\n\n  private handleContainerClick = () => {\n    this.inputEl?.focus();\n  };\n\n  private clearValue() {\n    this.internalWrite = true;\n    this.value = '';\n    this.internalWrite = false;\n    if (this.inputEl) {\n      this.inputEl.value = '';\n    }\n    this.displayValue = '';\n    this.updateValidity();\n    this.mdInput.emit(this.value);\n    this.mdChange.emit(this.value);\n    this.emitSearch(''); // search consumers must not keep stale results\n  }\n\n  private handleClear = (e: MouseEvent) => {\n    e.stopPropagation();\n    // readonly means the USER cannot mutate the value — the clear affordance included\n    if (this.isDisabled || this.readOnly || !this.value) return;\n\n    if (this.clearable === 'internal') {\n      this.clearValue();\n    }\n\n    this.mdClear.emit();\n    this.inputEl?.focus();\n  };\n\n  private handlePasswordToggle = (e: MouseEvent) => {\n    e.stopPropagation();\n    if (this.isDisabled) return;\n\n    if (this.passwordToggle === 'internal') {\n      this.passwordVisible = !this.passwordVisible;\n      this.mdPasswordToggle.emit({ visible: this.passwordVisible });\n    } else {\n      this.mdPasswordToggle.emit({ visible: this.type === 'password' });\n    }\n\n    this.inputEl?.focus();\n  };\n\n  private handleSpeechToggle = (e: MouseEvent) => {\n    e.stopPropagation();\n    if (this.isDisabled || this.readOnly) return;\n\n    if (this.speechToText === 'external') {\n      this.listening = !this.listening;\n      this.mdSpeechResult.emit({ transcript: '', listening: this.listening });\n      return;\n    }\n\n    if (this.listening) {\n      this.recognition?.stop();\n      return;\n    }\n\n    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n    if (!SpeechRecognition) {\n      console.warn('md-text-field: SpeechRecognition API not supported in this browser.');\n      return;\n    }\n\n    const recognition = new SpeechRecognition();\n    recognition.continuous = false;\n    recognition.interimResults = true;\n    if (this.speechLang) {\n      recognition.lang = this.speechLang;\n    }\n\n    let finalTranscript = '';\n    const baseValue = this.value;\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    recognition.onresult = (event: any) => {\n      let interim = '';\n      for (let i = event.resultIndex; i < event.results.length; i++) {\n        const transcript = event.results[i][0].transcript;\n        if (event.results[i].isFinal) {\n          finalTranscript += transcript;\n        } else {\n          interim += transcript;\n        }\n      }\n      const separator = baseValue && !baseValue.endsWith(' ') ? ' ' : '';\n      this.internalWrite = true;\n      this.value = baseValue + separator + finalTranscript + interim;\n      this.internalWrite = false;\n      if (this.inputEl) this.inputEl.value = this.value;\n      this.mdInput.emit(this.value);\n      this.mdSpeechResult.emit({ transcript: finalTranscript + interim, listening: true });\n    };\n\n    recognition.onend = () => {\n      this.listening = false;\n      this.recognition = undefined;\n      const separator = baseValue && !baseValue.endsWith(' ') ? ' ' : '';\n      this.internalWrite = true;\n      this.value = baseValue + separator + finalTranscript;\n      this.internalWrite = false;\n      if (this.inputEl) this.inputEl.value = this.value;\n      this.mdInput.emit(this.value);\n      this.mdChange.emit(this.value);\n      this.mdSpeechResult.emit({ transcript: finalTranscript, listening: false });\n    };\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    recognition.onerror = (event: any) => {\n      if (event.error !== 'aborted') {\n        console.warn('md-text-field: Speech recognition error:', event.error);\n      }\n      this.listening = false;\n      this.recognition = undefined;\n    };\n\n    this.recognition = recognition;\n    this.listening = true;\n    recognition.start();\n  };\n\n  disconnectedCallback() {\n    this.recognition?.abort();\n    this.recognition = undefined;\n    clearTimeout(this.debounceTimer);\n    clearTimeout(this.throttleTimer);\n    // stale ids read as an OPEN throttle window after reconnect — mdSearch\n    // would never emit again for this instance\n    this.debounceTimer = undefined;\n    this.throttleTimer = undefined;\n    this.throttlePending = false;\n  }\n\n  private renderInputElement() {\n    const inputType = this.passwordToggle === 'internal' && this.passwordVisible ? 'text' : this.type;\n    const useRawWhileFocused = this.focused && this.formatter && this.effectiveFormatOn === 'blur';\n    const showValue = useRawWhileFocused ? this.value : this.displayValue;\n\n    const supportText = this.error && this.errorText ? this.errorText : this.supportingText;\n    const describedBy = [\n      supportText ? `${this.uid}-support` : '',\n      this.maxLength != null && !isNaN(this.maxLength) ? `${this.uid}-counter` : '',\n    ].filter(Boolean).join(' ');\n\n    // Mirror the popup-opener kinds that are truthful ON THE INPUT: 'dialog'\n    // (md-time-picker's modal trigger) and 'listbox' (the select/autocomplete\n    // family — the focused input genuinely summons a listbox popup). Other\n    // kinds stay host-side, and aria-controls is never mirrored (an IDREF in\n    // this shadow scope can never resolve to the owner's popup).\n    const hostPopupAttr = this.el.getAttribute('aria-haspopup');\n    const hostPopup = hostPopupAttr === 'dialog' || hostPopupAttr === 'listbox' ? hostPopupAttr : null;\n    // Combobox promotion (opt-in, `input-role=\"combobox\"`): with the role in\n    // place, aria-expanded and aria-autocomplete become allowed on this input,\n    // so the owner's popup state is exposed on the element AT actually reads.\n    // The listbox itself is still referenced by the OWNER, via ARIA element\n    // reflection — see md-autocomplete. An IDREF could not do it: it would have\n    // to resolve inside this shadow root, where the owner's listbox is not.\n    const comboboxRole = this.inputRole === 'combobox' ? 'combobox' : undefined;\n    const sharedProps = {\n      placeholder: this.isFloating ? this.placeholder : '',\n      disabled: this.isDisabled,\n      readOnly: this.readOnly,\n      required: this.required,\n      // restrict fields enforce length POST-strip in handleInput — native\n      // maxLength would truncate a paste BEFORE restrict runs, dropping legal chars\n      maxLength: (this.formatter && this.effectiveFormatOn === 'input') || this.restrict ? undefined : this.maxLength,\n      pattern: this.pattern || undefined,\n      minLength: this.minLength,\n      min: this.min,\n      max: this.max,\n      step: this.step,\n      autocomplete: this.autocomplete || undefined,\n      inputMode: this.inputMode || undefined,\n      enterKeyHint: this.enterKeyHint || undefined,\n      autoCapitalize: this.autoCapitalize || undefined,\n      spellcheck: this.spellcheck,\n      // value LAST: Stencil applies JSX props in order, and value-before-\n      //   type/min/max triggers dev warnings + transient clamping\n      value: showValue,\n      'aria-label': this.label || this.hostAriaLabel || undefined,\n      // popup-trigger passthrough: composite widgets (md-time-picker etc.)\n      // set aria-haspopup / aria-expanded / aria-controls on the host, but\n      // AT reads the focused element — the inner input — so mirror them.\n      // Only aria-haspopup is mirrored from the HOST — it's an ARIA *global*\n      // attribute, valid on the textbox role. aria-expanded is not allowed on a\n      // bare textbox (axe: critical aria-allowed-attr), so an owner that needs\n      // it opts into `input-role=\"combobox\"` above instead of pushing the\n      // attribute at the host. Read live from the host each render; the host\n      // attrs are re-applied by the owner's JSX and any owner state flip that\n      // changes them also re-renders this field (e.g. via appearFocused).\n      'aria-haspopup': hostPopup || undefined,\n      role: comboboxRole,\n      'aria-expanded': comboboxRole ? String(this.inputExpanded) : undefined,\n      'aria-autocomplete':\n        comboboxRole && this.inputAriaAutocomplete ? this.inputAriaAutocomplete : undefined,\n      'aria-describedby': describedBy || undefined,\n      // omit when valid — a hard-coded \"false\" suppresses the browser's own\n      // :user-invalid signal on the inner input\n      'aria-invalid': this.error ? 'true' : undefined,\n      'aria-required': this.required ? 'true' : undefined,\n      id: `${this.uid}-input`,\n      onInput: this.handleInput,\n      onChange: this.handleChange,\n      onFocus: this.handleFocus,\n      onBlur: this.handleBlur,\n      onKeyDown: this.handleKeyDown,\n      onCompositionstart: this.handleCompositionStart,\n      onCompositionend: this.handleCompositionEnd,\n      onAnimationStart: this.handleAutofillStart,\n    };\n\n    if (this.multiline) {\n      return (\n        <textarea\n          ref={(el?: HTMLTextAreaElement) => { this.inputEl = el; }}\n          {...sharedProps}\n          rows={this.effectiveRows}\n          part=\"input\"\n          class={{\n            'md-text-field__input': true,\n            'md-text-field__input--textarea': true,\n            'md-text-field__input--auto-grow': this.multiline === 'auto-grow',\n            'md-text-field__input--fixed': this.multiline === 'fixed',\n          }}\n        >\n          {showValue}\n        </textarea>\n      );\n    }\n\n    return (\n      <input\n        ref={(el?: HTMLInputElement) => { this.inputEl = el; }}\n        class=\"md-text-field__input\"\n        part=\"input\"\n        type={inputType}\n        {...sharedProps}\n      />\n    );\n  }\n\n  render() {\n    const supportText = this.error && this.errorText ? this.errorText : this.supportingText;\n    const showClear = !!this.clearable;\n    const showPasswordToggle = !this.multiline && !!this.passwordToggle;\n    const showSpeech = !!this.speechToText;\n    const hasLeading = this.hasSlottedLeading;\n    const hasTrailing = this.hasSlottedTrailing || showClear || showPasswordToggle || showSpeech || this.error;\n    // The counter must count what the LIMIT counts: native maxLength counts\n    // every char; only the live-formatter path enforces a stripped length.\n    const usesFormatterLimit = !!this.formatter && this.effectiveFormatOn === 'input';\n    const contentLength = usesFormatterLimit\n      ? this.value.replace(/[-/\\s]/g, '').length\n      : this.value.length;\n    const charCount = this.maxLength != null && !isNaN(this.maxLength) ? `${contentLength}/${this.maxLength}` : '';\n    const clearDisabled = this.isDisabled || this.readOnly || !this.value;\n\n    const isPasswordRevealed = this.passwordToggle === 'internal'\n      ? this.passwordVisible\n      : this.type !== 'password';\n    const passwordIcon = isPasswordRevealed ? 'visibility_off' : 'visibility';\n\n    return (\n      <Host\n        class={{\n          'md-text-field': true,\n          [`md-text-field--${this.variant}`]: true,\n          'md-text-field--focused': this.focused || this.appearFocused,\n          'md-text-field--error': this.error,\n          'md-text-field--disabled': this.isDisabled,\n          'md-text-field--with-leading': hasLeading,\n          'md-text-field--with-trailing': hasTrailing,\n          'md-text-field--with-chips': this.hasSlottedChips,\n          'md-text-field--floating': this.isFloating,\n          [`md-text-field--density${this.density}`]: this.density !== 0,\n          'md-text-field--multiline': !!this.multiline,\n          'md-text-field--auto-grow': this.multiline === 'auto-grow',\n          'md-text-field--textarea': this.multiline === 'fixed',\n          'md-text-field--listening': this.listening,\n        }}\n        style={Number(this.focusBorderWidth) !== 3 ? {\n          // Only inline when the prop deviates — unconditional inline styles\n          // made the documented custom properties dead (clobbered every render).\n          '--md-text-field-focus-border-width': `${Number(this.focusBorderWidth)}px`,\n          '--md-text-field-focus-inset': `${-(Number(this.focusBorderWidth) - 1)}px`,\n        } : undefined}\n      >\n        <div class=\"md-text-field__container\" part=\"container\" onClick={this.handleContainerClick}>\n          <div class=\"md-text-field__state-layer\" aria-hidden=\"true\"></div>\n\n          <span\n            class=\"md-text-field__icon md-text-field__icon--leading\"\n            aria-hidden=\"true\"\n            style={{ display: hasLeading ? undefined : 'none' }}\n          >\n            <slot name=\"leading-icon\"></slot>\n          </span>\n\n          <div class=\"md-text-field__input-wrap\">\n            {this.label && (\n              <label class=\"md-text-field__label\" part=\"label\" htmlFor={`${this.uid}-input`}>{this.label}</label>\n            )}\n\n            <div class=\"md-text-field__input-row\">\n              {/* Interactive leading content (multi-select chips). Kept in the input\n                  flow and NOT aria-hidden, so its focusable controls stay operable.\n                  Only occupies space when populated. */}\n              <span\n                class=\"md-text-field__chips\"\n                part=\"chips\"\n                style={{ display: this.hasSlottedChips ? undefined : 'none' }}\n              >\n                <slot name=\"chips\"></slot>\n              </span>\n              {this.prefixText && this.isFloating && (\n                <span class=\"md-text-field__prefix\">{this.prefixText}</span>\n              )}\n              {this.renderInputElement()}\n              {this.suffixText && this.isFloating && (\n                <span class=\"md-text-field__suffix\">{this.suffixText}</span>\n              )}\n            </div>\n          </div>\n\n          {showClear && (\n            <button\n              type=\"button\"\n              class={{\n                'md-text-field__clear': true,\n                'md-text-field__clear--disabled': clearDisabled,\n                'md-text-field__clear--empty': !this.value,\n              }}\n              disabled={clearDisabled}\n              onClick={this.handleClear}\n              aria-label=\"Clear\"\n            >\n              <slot name=\"clear-icon\">\n                <span class=\"material-symbols-outlined\" aria-hidden=\"true\">cancel</span>\n              </slot>\n            </button>\n          )}\n\n          {showPasswordToggle && (\n            <button\n              type=\"button\"\n              class={{\n                'md-text-field__password-toggle': true,\n                'md-text-field__password-toggle--disabled': this.isDisabled,\n              }}\n              disabled={this.isDisabled}\n              onClick={this.handlePasswordToggle}\n              aria-label={isPasswordRevealed ? 'Hide password' : 'Show password'}\n              aria-pressed={isPasswordRevealed ? 'true' : 'false'}\n            >\n              <slot name=\"password-toggle-icon\">\n                <span class=\"material-symbols-outlined\" aria-hidden=\"true\">{passwordIcon}</span>\n              </slot>\n            </button>\n          )}\n\n          {showSpeech && (\n            <button\n              type=\"button\"\n              class={{\n                'md-text-field__speech': true,\n                'md-text-field__speech--listening': this.listening,\n                'md-text-field__speech--disabled': this.isDisabled,\n              }}\n              disabled={this.isDisabled || this.readOnly}\n              onClick={this.handleSpeechToggle}\n              aria-label={this.listening ? 'Stop listening' : 'Start voice input'}\n              aria-pressed={this.listening ? 'true' : 'false'}\n            >\n              <slot name=\"speech-icon\">\n                <span class=\"material-symbols-outlined\" aria-hidden=\"true\">\n                  {this.listening ? 'hearing' : 'mic'}\n                </span>\n              </slot>\n            </button>\n          )}\n\n          {this.error && (\n            <span class=\"md-text-field__error-icon\" aria-hidden=\"true\">\n              <slot name=\"error-icon\">\n                <span class=\"material-symbols-outlined\" style={{ fontVariationSettings: \"'FILL' 1\" }}>error</span>\n              </slot>\n            </span>\n          )}\n\n          <span\n            class={{\n              'md-text-field__icon': !this.hasTrailingIconButton,\n              'md-text-field__icon--trailing': !this.hasTrailingIconButton,\n              'md-text-field__trailing-icon-button': this.hasTrailingIconButton,\n            }}\n            // interactive slotted content (md-date-picker's icon buttons) must\n            // NOT be pruned from the AX tree while staying tabbable\n            aria-hidden={this.hasTrailingIconButton ? null : 'true'}\n            style={{ display: this.hasSlottedTrailing ? undefined : 'none' }}\n          >\n            <slot name=\"trailing-icon\"></slot>\n          </span>\n\n          {this.variant === 'filled' && <div class=\"md-text-field__indicator\"></div>}\n\n          {this.variant === 'outlined' && (\n            <fieldset class=\"md-text-field__fieldset\">\n              {/* Only cut a notch when there's a label to notch around — an empty\n                  active legend still reserves `padding-inline`, leaving a blank\n                  gap in the top border (e.g. a label-less pagination select). */}\n              <legend\n                class={{\n                  'md-text-field__legend': true,\n                  'md-text-field__legend--active': this.isFloating && !!this.label,\n                }}\n              >\n                <span>{this.label}</span>\n              </legend>\n            </fieldset>\n          )}\n        </div>\n\n        {(supportText || charCount || this.reserveSupportingSpace) && (\n          <div class=\"md-text-field__support-row\">\n            <span\n              id={`${this.uid}-support`}\n              part=\"supporting-text\"\n              role={this.error ? 'alert' : undefined}\n              class={{ 'md-text-field__support-text': true, 'md-text-field__support-text--error': this.error }}\n            >\n              {/* A zero-width space holds the line box open when reserving, so\n                  the row has height before any message exists. An empty span\n                  would collapse and defeat the reservation. */}\n              {supportText || (this.reserveSupportingSpace ? '\\u200B' : '')}\n            </span>\n            {charCount && <span id={`${this.uid}-counter`} part=\"counter\" class=\"md-text-field__counter\">{charCount}</span>}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/p-DPqGg8C1.js

@@ -0,0 +1,2 @@
+import{h as t}from"./p-BR6gfOQH.js";const e="md-loading-"+"indicator";let n=false;function o(){if(n)return;n=true;if(typeof customElements==="undefined"||customElements.get(e))return;import("./p-Zjf9uhOr.js").then((t=>{if(customElements.get(e))return;const n=t.defineCustomElement;if(typeof n==="function"){n()}else if(typeof t.MdLoadingIndicator==="function"){customElements.define(e,t.MdLoadingIndicator)}}),(()=>{n=false}))}const s=(n,s)=>{o();const f=e;return t(f,{...n},s)};export{s as L};
+//# sourceMappingURL=p-DPqGg8C1.js.map

package/dist/components/p-DPqGg8C1.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["TAG","requested","ensureLoadingIndicator","customElements","get","import","then","m","define","defineCustomElement","MdLoadingIndicator","LazyLoadingIndicator","props","children","Tag","h"],"sources":["src/utils/lazy-loading-indicator.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\n/**\n * Lazily registered <md-loading-indicator> for host components.\n *\n * A literal `<md-loading-indicator>` JSX tag makes the Stencil compiler add\n * the spinner to the consumer's STATIC dependency graph, so every app using\n * md-button/md-select/... shipped its ~3 kB gz eagerly even though the tag\n * only renders while `loading`/`searching` is active. This wrapper renders\n * the tag through a computed string the compiler cannot trace, and registers\n * the element on first actual render via a dynamic import — the bundler emits\n * it as its own async chunk, fetched only when a loading state first engages.\n *\n * Behavior by build:\n * - dist-custom-elements (bundlers): the element is usually NOT defined yet —\n *   the import lands, defineCustomElement() runs, the already-in-DOM tag\n *   upgrades. One frame of unstyled (invisible) spinner on first engage.\n * - lazy/loader build and `define` users: everything is registered at boot,\n *   the customElements.get() guard short-circuits, no import happens.\n * - hydrate (SSR): renders in Node with its own full registry; the guard\n *   also prevents the import from running server-side.\n *\n * KNOWN COUPLING: this deliberately bypasses Stencil's tag-graph analysis.\n * If a future Stencil version changes how dist-custom-elements modules expose\n * `defineCustomElement`, the import callback below is the single place to fix.\n */\n\n// Computed, not a literal, so no compiler string-scan can re-add the edge.\nconst TAG = 'md-loading-' + 'indicator';\n\nlet requested = false;\n\nexport function ensureLoadingIndicator(): void {\n  if (requested) return;\n  requested = true;\n  if (typeof customElements === 'undefined' || customElements.get(TAG)) return;\n  import('../components/md-loading-indicator/md-loading-indicator').then(\n    (m: Record<string, unknown>) => {\n      if (customElements.get(TAG)) return;\n      const define = m.defineCustomElement;\n      if (typeof define === 'function') {\n        define();\n      } else if (typeof m.MdLoadingIndicator === 'function') {\n        // Fallback for a Stencil that stops exporting the per-module helper:\n        // the transformed class itself is a valid custom-element constructor.\n        customElements.define(TAG, m.MdLoadingIndicator as CustomElementConstructor);\n      }\n    },\n    () => {\n      // Import failed (offline chunk fetch, exotic env): allow a retry on the\n      // next render instead of latching a broken state.\n      requested = false;\n    },\n  );\n}\n\n/**\n * Drop-in replacement for a literal <md-loading-indicator> tag: forwards all\n * props/children and kicks off the lazy registration on first render.\n */\nexport const LazyLoadingIndicator: FunctionalComponent<Record<string, unknown>> = (\n  props,\n  children,\n) => {\n  ensureLoadingIndicator();\n  const Tag = TAG as unknown as 'div';\n  return <Tag {...props}>{children}</Tag>;\n};\n"],"mappings":"oCA4BA,MAAMA,EAAM,cAAgB,YAE5B,IAAIC,EAAY,M,SAEAC,IACd,GAAID,EAAW,OACfA,EAAY,KACZ,UAAWE,iBAAmB,aAAeA,eAAeC,IAAIJ,GAAM,OACtEK,OAAO,mBAA2DC,MAC/DC,IACC,GAAIJ,eAAeC,IAAIJ,GAAM,OAC7B,MAAMQ,EAASD,EAAEE,oBACjB,UAAWD,IAAW,WAAY,CAChCA,G,MACK,UAAWD,EAAEG,qBAAuB,WAAY,CAGrDP,eAAeK,OAAOR,EAAKO,EAAEG,mB,KAGjC,KAGET,EAAY,KAAK,GAGvB,C,MAMaU,EAAqE,CAChFC,EACAC,KAEAX,IACA,MAAMY,EAAMd,EACZ,OAAOe,EAACD,EAAG,IAAKF,GAAQC,EAAe,S","ignoreList":[]}

package/dist/components/p-De3E5Q8v.js

@@ -0,0 +1,2 @@
+import{p as t,H as s,h as e,d as i,t as n}from"./p-BR6gfOQH.js";const r=()=>`:host{display:contents;border-radius:inherit;--_color:var(--md-ripple-color, currentColor)}.md-ripple{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}.md-ripple__wave{position:absolute;border-radius:50%;pointer-events:none;background:var(--_color);opacity:0;transform:scale(0);will-change:transform, opacity}.md-ripple{opacity:var(--md-sys-ripple-enabled, 1)}`;const o=450;const a=150;const c=.12;const h="cubic-bezier(0.2, 0, 0, 1)";const l="--md-ripple-grow-duration";const p="--md-ripple-grow-easing";const d=t(class t extends s{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.disabled=false;this.hostEl=null;this.activeWave=null;this.growAnimation=null;this.activeOpacity=c;this.bound=false;this.settlePromise=null;this.settleResolve=null;this.onPointerDown=t=>{if(this.disabled||this.rippleSuppressed())return;const s=this.el.shadowRoot?.querySelector(".md-ripple");if(!s||!this.hostEl)return;this.endWave();const e=this.hostEl.getBoundingClientRect();const i=this.resolveExtent("--md-ripple-extend-inline");const n=this.resolveExtent("--md-ripple-extend-block");const r=e.left-i;const o=e.right+i;const a=e.top-n;const c=e.bottom+n;const h=Math.max(Math.abs(t.clientX-r),Math.abs(t.clientX-o));const l=Math.max(Math.abs(t.clientY-a),Math.abs(t.clientY-c));const p=Math.sqrt(h*h+l*l);const d=p*2;const u=t.clientX-e.left-p;const f=t.clientY-e.top-p;const m=document.createElement("span");m.classList.add("md-ripple__wave");m.style.width=m.style.height=`${d}px`;m.style.left=`${u}px`;m.style.top=`${f}px`;s.appendChild(m);this.activeWave=m;this.activeOpacity=this.resolveOpacity();this.beginSettle();this.growAnimation=m.animate([{transform:"scale(0)",opacity:this.activeOpacity},{transform:"scale(1)",opacity:this.activeOpacity}],{duration:this.resolveGrowDuration(),easing:this.resolveGrowEasing(),fill:"forwards"});window.addEventListener("pointerup",this.onRelease,{once:true});window.addEventListener("pointercancel",this.onRelease,{once:true})};this.onRelease=()=>{this.endWave()}}rippleSuppressed(){if(typeof getComputedStyle!=="function")return false;try{return getComputedStyle(this.el).getPropertyValue("--md-sys-ripple-enabled").trim()==="0"}catch{return false}}resolveOpacity(){if(!this.hostEl)return c;const t=getComputedStyle(this.hostEl).getPropertyValue("--md-ripple-opacity").trim();if(!t)return c;const s=parseFloat(t);return Number.isFinite(s)?s:c}resolveExtent(t){const s=getComputedStyle(this.el).getPropertyValue(t).trim();if(!s)return 0;const e=parseFloat(s);return Number.isFinite(e)&&e>0?e:0}resolveGrowDuration(){const t=getComputedStyle(this.el).getPropertyValue(l).trim();if(!t)return o;const s=parseFloat(t);return Number.isFinite(s)&&s>0?s:o}resolveGrowEasing(){const t=getComputedStyle(this.el).getPropertyValue(p).trim();return t||h}beginSettle(){this.finishSettle();this.settlePromise=new Promise((t=>{this.settleResolve=t}))}finishSettle(){this.settleResolve?.();this.settleResolve=null;this.settlePromise=null}async whenSettled(){if(!this.settlePromise)return;const t=new Promise((t=>{setTimeout(t,a+50)}));await Promise.race([this.settlePromise,t]);this.finishSettle()}resolveHost(){const t=this.el.getRootNode();return this.el.parentElement??(t instanceof ShadowRoot?t.host:null)}bind(){if(this.bound)return;this.hostEl=this.resolveHost();if(!this.hostEl)return;this.bound=true;this.hostEl.addEventListener("pointerdown",this.onPointerDown)}connectedCallback(){this.bind();if(!this.bound){queueMicrotask((()=>this.bind()))}}disconnectedCallback(){this.hostEl?.removeEventListener("pointerdown",this.onPointerDown);this.hostEl=null;this.bound=false}async endWave(){const t=this.activeWave;const s=this.growAnimation;if(!t||!s)return;this.activeWave=null;this.growAnimation=null;if(s.playState!=="finished"){await s.finished}const e=t.animate([{opacity:this.activeOpacity},{opacity:0}],{duration:a,easing:h,fill:"forwards"});try{if(typeof e.finished?.then==="function"){await e.finished}else{await new Promise((t=>setTimeout(t,a)))}}catch{}t.remove();this.finishSettle()}async trigger(){if(this.disabled||this.rippleSuppressed())return;if(!this.hostEl)this.hostEl=this.resolveHost();const t=this.el.shadowRoot?.querySelector(".md-ripple");if(!t||!this.hostEl)return;this.endWave();const s=this.hostEl.getBoundingClientRect();const e=this.resolveExtent("--md-ripple-extend-inline");const i=this.resolveExtent("--md-ripple-extend-block");const n=s.width/2;const r=s.height/2;const o=n+e;const a=r+i;const c=Math.sqrt(o*o+a*a);const h=c*2;const l=document.createElement("span");l.classList.add("md-ripple__wave");l.style.width=l.style.height=`${h}px`;l.style.left=`${n-c}px`;l.style.top=`${r-c}px`;t.appendChild(l);this.activeWave=l;this.activeOpacity=this.resolveOpacity();this.beginSettle();this.growAnimation=l.animate([{transform:"scale(0)",opacity:this.activeOpacity},{transform:"scale(1)",opacity:this.activeOpacity}],{duration:this.resolveGrowDuration(),easing:this.resolveGrowEasing(),fill:"forwards"});this.growAnimation.addEventListener("finish",(()=>this.endWave()),{once:true})}render(){return e(i,{key:"8e980fcdaae407a6adaa3ea90cd6f9e3771c19af","aria-hidden":"true"},e("div",{key:"d4c6fb757ce02f8cbba86d5e07de6cb4efb6d93b",class:"md-ripple"}))}get el(){return this}static get style(){return r()}},[1,"md-ripple",{disabled:[4],whenSettled:[64],trigger:[64]}]);function u(){if(typeof customElements==="undefined"){return}const t=["md-ripple"];t.forEach((t=>{switch(t){case"md-ripple":if(!customElements.get(n(t))){customElements.define(n(t),d)}break}}))}u();export{d as M,u as d};
+//# sourceMappingURL=p-De3E5Q8v.js.map

package/dist/components/p-De3E5Q8v.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["mdRippleCss","PRESS_GROW_MS","RELEASE_FADE_MS","DEFAULT_PRESS_OPACITY","EASING_STANDARD","GROW_DURATION_PROP","GROW_EASING_PROP","MdRipple","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","disabled","hostEl","activeWave","growAnimation","activeOpacity","bound","settlePromise","settleResolve","onPointerDown","e","rippleSuppressed","container","el","shadowRoot","querySelector","endWave","rect","getBoundingClientRect","extendInline","resolveExtent","extendBlock","left","right","top","bottom","dx","Math","max","abs","clientX","dy","clientY","radius","sqrt","size","x","y","wave","document","createElement","classList","add","style","width","height","appendChild","resolveOpacity","beginSettle","animate","transform","opacity","duration","resolveGrowDuration","easing","resolveGrowEasing","fill","window","addEventListener","onRelease","once","getComputedStyle","getPropertyValue","trim","raw","parsed","parseFloat","Number","isFinite","prop","finishSettle","Promise","resolve","whenSettled","maxWait","setTimeout","race","resolveHost","root","getRootNode","parentElement","ShadowRoot","host","bind","connectedCallback","queueMicrotask","disconnectedCallback","removeEventListener","grow","playState","finished","fade","then","remove","trigger","cx","cy","halfX","halfY","render","h","Host","key","class"],"sources":["src/components/md-ripple/md-ripple.css?tag=md-ripple&encapsulation=shadow","src/components/md-ripple/md-ripple.tsx"],"sourcesContent":["/* ==========================================================\n   md-ripple — Material Design 3 ripple effect\n   Spec: https://m3.material.io/foundations/interaction/states\n\n   PUBLIC CSS CUSTOM PROPERTIES (override per-instance):\n     --md-ripple-color           Ripple tint color (default: currentColor)\n     --md-ripple-opacity         Ripple peak opacity (default: 0.12)\n     --md-ripple-extend-inline   Extra pixels to add on each inline edge\n                                 of the host's rect when computing the\n                                 wave's farthest-corner radius. Use on\n                                 surfaces that GROW horizontally during\n                                 the ripple's lifetime (e.g. md-search\n                                 springing out on focus) so the wave is\n                                 sized for the settled rect instead of\n                                 the resting one. Wave position is\n                                 unaffected — the wave still originates\n                                 at the click point. Must be a CONCRETE\n                                 PIXEL VALUE (e.g. `120px`). Computed\n                                 expressions involving %, calc() or\n                                 clamp() are NOT resolved by this hook —\n                                 read the literal token via\n                                 getComputedStyle and parseFloat returns\n                                 NaN on those forms. Consumers needing\n                                 such expressions should compute the\n                                 value in JS and write it back as fixed\n                                 pixels via inline style. (default: 0)\n     --md-ripple-extend-block    Same as --md-ripple-extend-inline but\n                                 for the block axis. (default: 0)\n     --md-ripple-grow-duration   Override the wave's scale 0 → 1 grow\n                                 duration. Use on surfaces that animate\n                                 their own size during the ripple's\n                                 lifetime (e.g. md-search) so the wave\n                                 reaches full size at the same instant\n                                 the surface settles — otherwise the\n                                 wave is still ramping up while the\n                                 surface is already at its final width.\n                                 var() references and any value that\n                                 resolves to a CSS time work (e.g.\n                                 `250ms`). (default: 450ms)\n     --md-ripple-grow-easing     Companion to --md-ripple-grow-duration\n                                 — usually set to the surface's own\n                                 easing so the wave feels like part of\n                                 the same motion.\n                                 (default: cubic-bezier(0.2, 0, 0, 1))\n\n   CSS PARTS:\n     (none)\n\n   SLOTS:\n     (none)\n   ========================================================== */\n\n:host {\n  display: contents;\n\n  /* `.md-ripple` clips the wave with `border-radius: inherit`, which inherits\n     from THIS host — not from the component embedding us. Left at the initial\n     0, that clip is a square, and the wave only looked round because the\n     embedding host happened to clip it with its own `overflow: hidden`. Any\n     host that must let something escape (an icon button with a badge) then got\n     a square ripple. Inheriting the radius here makes the clip follow the\n     container's shape on its own. */\n  border-radius: inherit;\n\n  --_color: var(--md-ripple-color, currentColor);\n}\n\n.md-ripple {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  overflow: hidden;\n  pointer-events: none;\n}\n\n.md-ripple__wave {\n  position: absolute;\n  border-radius: 50%;\n  pointer-events: none;\n  background: var(--_color);\n  opacity: 0;\n  transform: scale(0);\n  will-change: transform, opacity;\n}\n\n/* ==========================================================\n   SUPPRESSION (global data-ripple=\"off\" / per-component ripple=\"off\")\n   The real gate is in TS — onPointerDown and trigger() bail before a wave is\n   ever created, so nothing is allocated or animated. This rule is the safety\n   net for the one case TS cannot cover: a wave already mid-flight when the\n   toggle flips. Without it that wave would finish its 450ms grow after ripples\n   were switched off.\n\n   The signal is 0/1, which is already a valid opacity, so it drops straight in\n   — no keyword mapping, and the default of 1 makes this a no-op when the\n   feature is on. opacity (not display) so nothing about layout or the\n   containing block changes.\n   ========================================================== */\n.md-ripple {\n  opacity: var(--md-sys-ripple-enabled, 1);\n}\n","import { Component, Element, h, Host, Method, Prop } from '@stencil/core';\n\nconst PRESS_GROW_MS = 450;\nconst RELEASE_FADE_MS = 150;\nconst DEFAULT_PRESS_OPACITY = 0.12;\nconst EASING_STANDARD = 'cubic-bezier(0.2, 0, 0, 1)';\n\nconst GROW_DURATION_PROP = '--md-ripple-grow-duration';\nconst GROW_EASING_PROP = '--md-ripple-grow-easing';\n\n@Component({ tag: 'md-ripple', styleUrl: 'md-ripple.css', shadow: true })\nexport class MdRipple {\n  @Element() el!: HTMLElement;\n\n  @Prop() disabled: boolean = false;\n\n  /**\n   * True when ripples are switched off for this element, either globally\n   * (`data-ripple=\"off\"` on any ancestor) or on the owning component\n   * (`ripple=\"off\"`). Both spellings resolve to `--md-sys-ripple-enabled` in\n   * tokens.css, so only the resolved value is read here.\n   *\n   * Read at interaction time rather than cached. The signal is a plain\n   * inherited custom property, so it can change at any moment — a theme\n   * switch, a settings toggle, a parent re-render — with no attribute mutation\n   * on THIS element to observe. One getComputedStyle per press is cheap next to\n   * the wave animation that follows, and it cannot go stale.\n   *\n   * The check is deliberately `=== '0'`: an unset property returns '' and must\n   * mean ENABLED, so testing for falsiness would disable ripples everywhere the\n   * token sheet has not loaded.\n   */\n  private rippleSuppressed(): boolean {\n    if (typeof getComputedStyle !== 'function') return false;\n    try {\n      return (\n        getComputedStyle(this.el).getPropertyValue('--md-sys-ripple-enabled').trim() === '0'\n      );\n    } catch {\n      return false;\n    }\n  }\n\n  private hostEl: HTMLElement | null = null;\n  private activeWave: HTMLElement | null = null;\n  private growAnimation: Animation | null = null;\n  private activeOpacity: number = DEFAULT_PRESS_OPACITY;\n  private bound = false;\n  private settlePromise: Promise<void> | null = null;\n  private settleResolve: (() => void) | null = null;\n\n  private resolveOpacity(): number {\n    if (!this.hostEl) return DEFAULT_PRESS_OPACITY;\n    const raw = getComputedStyle(this.hostEl)\n      .getPropertyValue('--md-ripple-opacity')\n      .trim();\n    if (!raw) return DEFAULT_PRESS_OPACITY;\n    const parsed = parseFloat(raw);\n    return Number.isFinite(parsed) ? parsed : DEFAULT_PRESS_OPACITY;\n  }\n\n  /**\n   * Resolve the inline / block extents that surfaces growing during the\n   * ripple's lifetime (e.g. md-search springing out on focus) declare via\n   * `--md-ripple-extend-inline` / `--md-ripple-extend-block`. The values\n   * inflate the host's rect ONLY for the wave's farthest-corner radius\n   * calculation, so the wave is sized for the SETTLED rect even though\n   * the actual host is still at its resting size at pointerdown. Wave\n   * POSITION still uses the unmodified rect so the wave originates\n   * exactly where the user clicked.\n   *\n   * Consumers MUST pass concrete pixel values here (e.g.\n   * `style.setProperty('--md-ripple-extend-inline', '120px')`).\n   * `getComputedStyle().getPropertyValue()` on a custom property returns\n   * the LITERAL TOKEN — for `calc()` / `clamp()` / `%` expressions the\n   * string is unparsed (`\"calc(clamp(0px, 8%, 64px) * 2)\"`) and\n   * `parseFloat()` returns `NaN`. Resolving such expressions reliably\n   * requires knowing the consumer's intended containing-block reference,\n   * which md-ripple cannot infer; consumers therefore compute the value\n   * themselves (typically with a hidden probe element scoped to the\n   * correct containing block) and write it back as fixed pixels.\n   */\n  private resolveExtent(prop: string): number {\n    const raw = getComputedStyle(this.el).getPropertyValue(prop).trim();\n    if (!raw) return 0;\n    const parsed = parseFloat(raw);\n    return Number.isFinite(parsed) && parsed > 0 ? parsed : 0;\n  }\n\n  /**\n   * Wave grow duration (ms). Surfaces that animate their size during the\n   * ripple's lifetime (e.g. md-search springing from a narrower resting\n   * width to its full width) should sync the wave's growth with their\n   * own settle so the wave reaches scale = 1 at the same moment the\n   * surface stops moving — otherwise the wave is still ramping up while\n   * the surface is already at its final width and the user sees a\n   * visible gap on the side that grew. Default is the spec-canonical\n   * 450ms.\n   */\n  private resolveGrowDuration(): number {\n    const raw = getComputedStyle(this.el).getPropertyValue(GROW_DURATION_PROP).trim();\n    if (!raw) return PRESS_GROW_MS;\n    const parsed = parseFloat(raw);\n    return Number.isFinite(parsed) && parsed > 0 ? parsed : PRESS_GROW_MS;\n  }\n\n  /**\n   * Wave grow easing function. Companion to {@link resolveGrowDuration}\n   * — when a surface drives the timing it should usually pass its own\n   * easing (typically a back-out spring) so the wave's growth feels\n   * like part of the same motion.\n   */\n  private resolveGrowEasing(): string {\n    const raw = getComputedStyle(this.el).getPropertyValue(GROW_EASING_PROP).trim();\n    return raw || EASING_STANDARD;\n  }\n\n  private beginSettle() {\n    this.finishSettle();\n    this.settlePromise = new Promise<void>((resolve) => {\n      this.settleResolve = resolve;\n    });\n  }\n\n  private finishSettle() {\n    this.settleResolve?.();\n    this.settleResolve = null;\n    this.settlePromise = null;\n  }\n\n  /** Resolves when the active press ripple has fully faded out. */\n  @Method()\n  async whenSettled(): Promise<void> {\n    if (!this.settlePromise) return;\n    const maxWait = new Promise<void>((resolve) => {\n      setTimeout(resolve, RELEASE_FADE_MS + 50);\n    });\n    await Promise.race([this.settlePromise, maxWait]);\n    this.finishSettle();\n  }\n\n  private resolveHost(): HTMLElement | null {\n    const root = this.el.getRootNode();\n    return this.el.parentElement ??\n      (root instanceof ShadowRoot ? (root.host as HTMLElement) : null);\n  }\n\n  private bind() {\n    if (this.bound) return;\n    this.hostEl = this.resolveHost();\n    if (!this.hostEl) return;\n    this.bound = true;\n    this.hostEl.addEventListener('pointerdown', this.onPointerDown);\n  }\n\n  connectedCallback() {\n    this.bind();\n    if (!this.bound) {\n      queueMicrotask(() => this.bind());\n    }\n  }\n\n  disconnectedCallback() {\n    this.hostEl?.removeEventListener('pointerdown', this.onPointerDown);\n    this.hostEl = null;\n    this.bound = false;\n  }\n\n  private onPointerDown = (e: PointerEvent) => {\n    if (this.disabled || this.rippleSuppressed()) return;\n\n    const container = this.el.shadowRoot?.querySelector('.md-ripple') as HTMLElement;\n    if (!container || !this.hostEl) return;\n\n    this.endWave();\n\n    const rect = this.hostEl.getBoundingClientRect();\n    // Treat the surface as if it spans an extended rect when the host has\n    // declared `--md-ripple-extend-inline` / `--md-ripple-extend-block`.\n    // Wave POSITION still uses the actual (current) rect so the wave\n    // visually originates at the click point — only the RADIUS uses the\n    // inflated bounds so the wave grows large enough to cover the surface\n    // once it settles.\n    const extendInline = this.resolveExtent('--md-ripple-extend-inline');\n    const extendBlock = this.resolveExtent('--md-ripple-extend-block');\n    const left = rect.left - extendInline;\n    const right = rect.right + extendInline;\n    const top = rect.top - extendBlock;\n    const bottom = rect.bottom + extendBlock;\n    const dx = Math.max(Math.abs(e.clientX - left), Math.abs(e.clientX - right));\n    const dy = Math.max(Math.abs(e.clientY - top), Math.abs(e.clientY - bottom));\n    const radius = Math.sqrt(dx * dx + dy * dy);\n    const size = radius * 2;\n    const x = e.clientX - rect.left - radius;\n    const y = e.clientY - rect.top - radius;\n\n    const wave = document.createElement('span');\n    wave.classList.add('md-ripple__wave');\n    wave.style.width = wave.style.height = `${size}px`;\n    wave.style.left = `${x}px`;\n    wave.style.top = `${y}px`;\n    container.appendChild(wave);\n    this.activeWave = wave;\n    this.activeOpacity = this.resolveOpacity();\n    this.beginSettle();\n\n    this.growAnimation = wave.animate(\n      [\n        { transform: 'scale(0)', opacity: this.activeOpacity },\n        { transform: 'scale(1)', opacity: this.activeOpacity },\n      ],\n      {\n        duration: this.resolveGrowDuration(),\n        easing: this.resolveGrowEasing(),\n        fill: 'forwards',\n      },\n    );\n\n    window.addEventListener('pointerup', this.onRelease, { once: true });\n    window.addEventListener('pointercancel', this.onRelease, { once: true });\n  };\n\n  private onRelease = () => {\n    this.endWave();\n  };\n\n  private async endWave() {\n    const wave = this.activeWave;\n    const grow = this.growAnimation;\n    if (!wave || !grow) return;\n\n    this.activeWave = null;\n    this.growAnimation = null;\n\n    if (grow.playState !== 'finished') {\n      await grow.finished;\n    }\n\n    const fade = wave.animate(\n      [{ opacity: this.activeOpacity }, { opacity: 0 }],\n      { duration: RELEASE_FADE_MS, easing: EASING_STANDARD, fill: 'forwards' },\n    );\n    try {\n      if (typeof fade.finished?.then === 'function') {\n        await fade.finished;\n      } else {\n        await new Promise<void>((resolve) => setTimeout(resolve, RELEASE_FADE_MS));\n      }\n    } catch {\n      /* animation cancelled */\n    }\n    wave.remove();\n    this.finishSettle();\n  }\n\n  /** Programmatically trigger a centered ripple (for keyboard activations). */\n  @Method()\n  async trigger() {\n    if (this.disabled || this.rippleSuppressed()) return;\n\n    if (!this.hostEl) this.hostEl = this.resolveHost();\n    const container = this.el.shadowRoot?.querySelector('.md-ripple') as HTMLElement;\n    if (!container || !this.hostEl) return;\n\n    this.endWave();\n\n    const rect = this.hostEl.getBoundingClientRect();\n    const extendInline = this.resolveExtent('--md-ripple-extend-inline');\n    const extendBlock = this.resolveExtent('--md-ripple-extend-block');\n    const cx = rect.width / 2;\n    const cy = rect.height / 2;\n    // Centered ripples use the rect's centre as both anchor and farthest\n    // reference, so the inflated half-extents become the radius\n    // contribution directly.\n    const halfX = cx + extendInline;\n    const halfY = cy + extendBlock;\n    const radius = Math.sqrt(halfX * halfX + halfY * halfY);\n    const size = radius * 2;\n\n    const wave = document.createElement('span');\n    wave.classList.add('md-ripple__wave');\n    wave.style.width = wave.style.height = `${size}px`;\n    wave.style.left = `${cx - radius}px`;\n    wave.style.top = `${cy - radius}px`;\n    container.appendChild(wave);\n    this.activeWave = wave;\n    this.activeOpacity = this.resolveOpacity();\n    this.beginSettle();\n\n    this.growAnimation = wave.animate(\n      [\n        { transform: 'scale(0)', opacity: this.activeOpacity },\n        { transform: 'scale(1)', opacity: this.activeOpacity },\n      ],\n      {\n        duration: this.resolveGrowDuration(),\n        easing: this.resolveGrowEasing(),\n        fill: 'forwards',\n      },\n    );\n\n    this.growAnimation.addEventListener('finish', () => this.endWave(), { once: true });\n  }\n\n  render() {\n    return (\n      <Host aria-hidden=\"true\">\n        <div class=\"md-ripple\"></div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/p-Dm_7DA1f.js

@@ -0,0 +1,2 @@
+import{p as e,H as o,c as i,h as a,d as r,t}from"./p-BR6gfOQH.js";import{t as s}from"./p-DYBUr7K_.js";import{d as n}from"./p-De3E5Q8v.js";const c=()=>`:host{--_container-color:var(--md-chip-container-color, transparent);--_container-color-selected:var(--md-chip-container-color-selected, var(--md-sys-color-secondary-container));--_label-color:var(--md-chip-label-color, var(--md-sys-color-on-surface-variant));--_label-color-selected:var(--md-chip-label-color-selected, var(--md-sys-color-on-secondary-container));--_icon-color:var(--md-chip-icon-color, var(--md-sys-color-primary));--_icon-size:var(--md-chip-icon-size, max(14px, calc(18px + var(--md-sys-density-scale, 0) * 1px)));--_container-shape:var(--md-chip-container-shape, var(--md-sys-shape-corner-small, 8px));--_container-height:var(--md-chip-container-height, 32px);--_outline-color:var(--md-chip-outline-color, var(--md-sys-color-outline));--_outline-width:var(--md-chip-outline-width, 1px);--_state-layer-color:var(--md-chip-state-layer-color, var(--md-sys-color-on-surface));--_elevation:var(--md-chip-elevation, var(--md-sys-elevation-0, none));--_c-main:var(--md-sys-color-primary);--_c-on-main:var(--md-sys-color-on-primary);--_c-container:var(--md-sys-color-secondary-container);--_c-on-container:var(--md-sys-color-on-secondary-container);--_padding-inline:var(--md-sys-spacing-inset-lg, 16px);--_gap:var(--md-sys-spacing-gap-sm, 8px);display:inline-flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box;block-size:max(24px, calc(var(--_container-height) + var(--md-sys-density-scale, 0) * 4px));padding-inline:var(--_padding-inline);gap:var(--_gap);background-color:var(--_container-color);border-radius:var(--_container-shape);box-shadow:var(--_elevation);cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;overflow:hidden;font-family:var(--md-sys-typescale-label-large-font-family, Roboto, sans-serif);font-size:max(11px, calc(14px + var(--md-sys-density-scale, 0) * 0.5px));font-weight:var(--md-sys-typescale-label-large-font-weight, 500);line-height:max(16px, calc(20px + var(--md-sys-density-scale, 0) * 1px));letter-spacing:var(--md-sys-typescale-label-large-letter-spacing, 0.1px);color:var(--_label-color);transition:background-color var(--md-sys-motion-duration-short2, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),     box-shadow var(--md-sys-motion-duration-short2, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),     color var(--md-sys-motion-duration-short2, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1))}:host(.md-chip--with-leading-icon){padding-inline-start:var(--md-sys-spacing-inset-sm, 8px)}:host(.md-chip--with-trailing-icon){padding-inline-end:var(--md-sys-spacing-inset-sm, 8px)}:host(.md-chip--assist){--_icon-color:var(--md-chip-icon-color, var(--md-sys-color-primary));--_label-color:var(--md-chip-label-color, var(--md-sys-color-on-surface))}:host(.md-chip--filter){--_icon-color:var(--md-chip-icon-color, var(--md-sys-color-on-surface-variant));--_label-color:var(--md-chip-label-color, var(--md-sys-color-on-surface-variant))}:host(.md-chip--input){--_outline-color:var(--md-chip-outline-color, var(--md-sys-color-outline-variant));--_icon-color:var(--md-chip-icon-color, var(--md-sys-color-on-surface-variant));--_label-color:var(--md-chip-label-color, var(--md-sys-color-on-surface-variant))}:host(.md-chip--suggestion){--_icon-color:var(--md-chip-icon-color, var(--md-sys-color-on-surface-variant));--_label-color:var(--md-chip-label-color, var(--md-sys-color-on-surface-variant))}:host(.md-chip--selected){--_container-color:var(--_container-color-selected);color:var(--_label-color-selected);--_icon-color:var(--md-chip-icon-color, var(--md-sys-color-on-secondary-container));--_state-layer-color:var(--md-sys-color-on-secondary-container)}:host(.md-chip--selected) .md-chip__outline{border-color:transparent}:host(.md-chip--elevated){--_elevation:var(--md-chip-elevation, var(--md-sys-elevation-1))}:host(.md-chip--elevated) .md-chip__outline{border-color:transparent}:host(.md-chip--elevated.md-chip--selected){--_elevation:var(--md-chip-elevation, var(--md-sys-elevation-1))}:host(.md-chip--appearance-outlined[color]){--_outline-color:var(--md-chip-outline-color, var(--_c-main));--_label-color:var(--md-chip-label-color, var(--_c-main));--_icon-color:var(--md-chip-icon-color, var(--_c-main));--_state-layer-color:var(--md-chip-state-layer-color, var(--_c-main))}:host(.md-chip--appearance-filled),:host(.md-chip--appearance-elevated){--_container-color:var(--md-chip-container-color, var(--md-sys-color-surface-container-high));--_label-color:var(--md-chip-label-color, var(--md-sys-color-on-surface-variant));--_icon-color:var(--md-chip-icon-color, var(--md-sys-color-on-surface-variant))}:host(.md-chip--appearance-filled[color]),:host(.md-chip--appearance-elevated[color]){--_container-color:var(--md-chip-container-color, var(--_c-container));--_label-color:var(--md-chip-label-color, var(--_c-on-container));--_icon-color:var(--md-chip-icon-color, var(--_c-on-container));--_state-layer-color:var(--md-chip-state-layer-color, var(--_c-on-container))}:host(.md-chip--appearance-filled) .md-chip__outline,:host(.md-chip--appearance-elevated) .md-chip__outline{border-color:transparent}:host(.md-chip--selected[color]){--_container-color:var(--_c-container);color:var(--_c-on-container);--_label-color-selected:var(--_c-on-container);--_icon-color:var(--md-chip-icon-color, var(--_c-on-container));--_state-layer-color:var(--_c-on-container)}.md-chip__outline{position:absolute;inset:0;border-radius:inherit;border:var(--_outline-width) solid var(--_outline-color);pointer-events:none}.md-chip__state-layer{position:absolute;inset:0;border-radius:inherit;background-color:var(--_state-layer-color);opacity:0;transition:opacity var(--md-sys-motion-duration-short1, 100ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));pointer-events:none;z-index:1}:host(:hover) .md-chip__state-layer{opacity:var(--md-sys-state-hover-state-layer-opacity, 0.08)}:host(:focus-visible) .md-chip__state-layer{opacity:var(--md-sys-state-focus-state-layer-opacity, 0.12)}:host(:active) .md-chip__state-layer{opacity:var(--md-sys-state-pressed-state-layer-opacity, 0.12)}:host(:focus-visible){outline:3px solid var(--md-sys-color-secondary);outline-offset:2px}.md-chip__primary{position:absolute;inset:0;z-index:2;margin:0;padding:0;border:none;background:none;border-radius:inherit;cursor:inherit;-webkit-tap-highlight-color:transparent}.md-chip__primary:focus-visible{outline:3px solid var(--md-sys-color-secondary);outline-offset:-3px}.md-chip__label{position:relative;z-index:2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start}.md-chip__icon,.md-chip__trailing-icon{position:relative;z-index:2;font-family:var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');font-size:var(--_icon-size);inline-size:var(--_icon-size);block-size:var(--_icon-size);color:var(--_icon-color);line-height:1;font-weight:normal;font-style:normal;letter-spacing:normal;text-transform:none;white-space:nowrap;overflow-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;pointer-events:none;flex-shrink:0}slot[name="leading-icon"],slot[name="trailing-icon"]{display:contents}::slotted([slot="leading-icon"]),::slotted([slot="trailing-icon"]){display:inline-flex;align-items:center;justify-content:center;inline-size:var(--_icon-size);block-size:var(--_icon-size);font-size:var(--_icon-size);color:var(--_icon-color);fill:currentColor;pointer-events:none;flex-shrink:0;position:relative;z-index:2}.md-chip__checkmark{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;inline-size:var(--_icon-size);block-size:var(--_icon-size);color:var(--_icon-color);flex-shrink:0}.md-chip__checkmark svg{inline-size:var(--_icon-size);block-size:var(--_icon-size)}.md-chip__remove{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;min-inline-size:18px;min-block-size:18px;padding:0;border:none;background:none;color:var(--_icon-color);cursor:pointer;border-radius:50%;flex-shrink:0;-webkit-tap-highlight-color:transparent}.md-chip__remove:focus-visible{outline:2px solid var(--md-sys-color-secondary);outline-offset:1px}.md-chip__remove svg{inline-size:var(--_icon-size);block-size:var(--_icon-size);pointer-events:none}.md-chip__remove:disabled{cursor:default;pointer-events:none}:host(.md-chip--disabled){cursor:default;pointer-events:none;color:color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity, 0.38) * 100%), transparent);--_icon-color:color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity, 0.38) * 100%), transparent);--_elevation:var(--md-sys-elevation-0, none) !important}:host(.md-chip--disabled:not(.md-chip--selected):not(.md-chip--elevated)) .md-chip__outline{border-color:color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-container-opacity, 0.12) * 100%), transparent)}:host(.md-chip--disabled.md-chip--selected){--_container-color:color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-container-opacity, 0.12) * 100%), transparent)}:host(.md-chip--disabled.md-chip--elevated:not(.md-chip--selected)){--_container-color:color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-container-opacity, 0.12) * 100%), transparent)}:host(.md-chip--disabled:hover) .md-chip__state-layer,:host(.md-chip--disabled:active) .md-chip__state-layer,:host(.md-chip--disabled:focus-visible) .md-chip__state-layer{opacity:0}:host([soft-disabled]){cursor:default;pointer-events:auto;color:color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity, 0.38) * 100%), transparent);--_icon-color:color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity, 0.38) * 100%), transparent);--_elevation:var(--md-sys-elevation-0, none) !important}:host([soft-disabled]) .md-chip__state-layer{display:none}@media (prefers-reduced-motion: reduce){:host{transition:none}.md-chip__state-layer{transition:none}}@media (forced-colors: active){:host{border:1px solid ButtonText;background-color:ButtonFace;color:ButtonText;forced-color-adjust:none}.md-chip__outline{border-color:ButtonText}:host(:focus-visible){outline-color:Highlight}.md-chip__primary:focus-visible{outline-color:Highlight}:host(.md-chip--selected){background-color:Highlight;color:HighlightText}:host(.md-chip--disabled){border-color:GrayText;color:GrayText;opacity:1}.md-chip__state-layer{display: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 l=e(class e extends o{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.mdClick=i(this,"mdClick",7);this.mdSelect=i(this,"mdSelect",7);this.mdRemove=i(this,"mdRemove",7);this.variant="assist";this.icon="";this.trailingIcon="";this.selected=false;this.appearance="outlined";this.elevated=false;this.disabled=false;this.softDisabled=false;this.label="";this.density=0;this.hasSlottedLeadingIcon=false;this.hasSlottedTrailingIcon=false;this.handleClick=e=>{if(this.isDisabled){e.preventDefault();return}if(this.isSelectable){this.selected=!this.selected;this.mdSelect.emit({selected:this.selected})}this.mdClick.emit()};this.handleKeyDown=e=>{if(this.isDisabled)return;if(e.key==="Enter"||e.key===" "){e.preventDefault();s(this.el);this.el.click();return}if(this.isRemovable&&(e.key==="Delete"||e.key==="Backspace")){e.preventDefault();this.dispatchRemove()}};this.handleRemoveClick=e=>{e.stopPropagation();if(this.isDisabled)return;this.dispatchRemove()};this.handleRemoveKeyDown=e=>{if(this.isDisabled)return;if(e.key==="Enter"||e.key===" "){e.stopPropagation();e.preventDefault();this.dispatchRemove()}}}get isDisabled(){return this.disabled||this.softDisabled}get colorVars(){const e=this.color;if(!e||!/^[a-z][a-z0-9-]*$/i.test(e))return undefined;return{"--_c-main":`var(--md-sys-color-${e}, var(--md-sys-color-primary))`,"--_c-on-main":`var(--md-sys-color-on-${e}, var(--md-sys-color-on-primary))`,"--_c-container":`var(--md-sys-color-${e}-container, var(--md-sys-color-secondary-container))`,"--_c-on-container":`var(--md-sys-color-on-${e}-container, var(--md-sys-color-on-secondary-container))`}}get effectiveAppearance(){return this.elevated?"elevated":this.appearance}get isSelectable(){if(this.selectable!==undefined)return this.selectable;return this.variant==="filter"||this.variant==="input"}get isInteractiveHost(){return!(this.selectable===false&&this.isRemovable)}get isRemovable(){if(this.removable===true)return true;if(this.removable===false)return false;return this.variant==="input"}get accessibleLabel(){return this.label||this.el.textContent?.trim()||""}componentDidLoad(){const e=this.el.shadowRoot;if(!e)return;const o=e.querySelector('slot[name="leading-icon"]');const i=e.querySelector('slot[name="trailing-icon"]');o?.addEventListener("slotchange",(()=>{this.hasSlottedLeadingIcon=o.assignedElements().length>0}));i?.addEventListener("slotchange",(()=>{this.hasSlottedTrailingIcon=i.assignedElements().length>0}))}dispatchRemove(){const e=this.mdRemove.emit();if(!e.defaultPrevented){this.el.remove()}}render(){const e=!!this.icon||this.hasSlottedLeadingIcon;const o=!!this.trailingIcon||this.hasSlottedTrailingIcon;const i=this.variant==="filter"&&this.selected&&!e;const t=this.isRemovable;const s=this.isDisabled;const n=this.accessibleLabel;const c=this.isInteractiveHost&&!t;const l=this.isInteractiveHost&&t;return a(r,{key:"0a328e2479ae8b551eeb7288192dfb79bf4ee99e",style:this.colorVars,class:{"md-chip":true,[`md-chip--${this.variant}`]:true,"md-chip--selected":this.selected&&this.isSelectable,[`md-chip--appearance-${this.effectiveAppearance}`]:true,"md-chip--elevated":this.effectiveAppearance==="elevated",[`md-chip--color-${this.color}`]:!!this.color,"md-chip--disabled":s,"md-chip--with-leading-icon":e||i,"md-chip--with-trailing-icon":o||t},role:c?"button":"group","aria-roledescription":"chip","aria-pressed":c&&this.isSelectable?String(this.selected):undefined,"aria-label":c?undefined:n||undefined,"aria-disabled":s?"true":undefined,tabindex:c?this.disabled?"-1":"0":undefined,onClick:this.handleClick,onKeyDown:this.handleKeyDown},a("md-ripple",{key:"73b49904dae32e15bbdb50623494d42bce04d6a7",disabled:s}),a("span",{key:"cfefcd180227f6386ef4c20a982f8f17c734f307",class:"md-chip__state-layer",part:"state-layer","aria-hidden":"true"}),!this.elevated&&a("span",{key:"e814b0966bc07ecef53daa0b5e12070bc88b56e3",class:"md-chip__outline",part:"outline","aria-hidden":"true"}),l&&a("span",{key:"adaf99f2ca0a22c682aafbcdc2ff32ef90362c6b",class:"md-chip__primary",part:"primary",role:"button",tabindex:this.disabled?"-1":"0","aria-labelledby":"md-chip-label-text","aria-pressed":this.isSelectable?String(this.selected):undefined,"aria-disabled":s?"true":undefined}),i&&a("span",{key:"4d7ef4295ae72f6a9d623e49c38037a0dc8b08fc",class:"md-chip__checkmark",part:"checkmark","aria-hidden":"true"},a("svg",{key:"3b5f9d0d70ca30d56a3d3567e72d77424bc1faec",viewBox:"0 0 18 18",fill:"none"},a("path",{key:"e49d701bb05de3507af5e1e20bf789d3ffe2737c",d:"M6.75 12.127L3.623 9l-1.06 1.057L6.75 14.25l9-9-1.057-1.057L6.75 12.127z",fill:"currentColor"}))),a("slot",{key:"3bdfe28e8ab4815fdcd9a0eecb06460882ab3dfe",name:"leading-icon"},e&&!i&&a("span",{key:"9ac99981f7593db7923734234489bb983ca11a99",class:"md-chip__icon material-symbols-outlined",part:"icon","aria-hidden":"true"},this.icon)),a("span",{key:"ab1acdc080116f4d5b2529289b9f8879745b6c14",class:"md-chip__label",part:"label",id:"md-chip-label-text"},a("slot",{key:"90ec6e8a87cc540123f61278df8acb60b761449d"},this.label)),t?a("button",{class:"md-chip__remove",part:"remove",type:"button",tabindex:this.disabled?"-1":"0","aria-label":n?`Remove ${n}`:"Remove",disabled:s,onClick:this.handleRemoveClick,onKeyDown:this.handleRemoveKeyDown},a("slot",{name:"trailing-icon"},a("svg",{viewBox:"0 0 18 18",fill:"none","aria-hidden":"true"},a("path",{d:"M14.25 4.808l-1.058-1.058L9 7.942 4.808 3.75 3.75 4.808 7.942 9 3.75 13.192l1.058 1.058L9 10.058l4.192 4.192 1.058-1.058L10.058 9l4.192-4.192z",fill:"currentColor"})))):a("slot",{name:"trailing-icon"},o&&a("span",{class:"md-chip__trailing-icon material-symbols-outlined",part:"trailing-icon","aria-hidden":"true"},this.trailingIcon)))}get el(){return this}static get style(){return c()}},[257,"md-chip",{variant:[513],icon:[1],trailingIcon:[1,"trailing-icon"],selected:[1540],selectable:[4],appearance:[513],color:[513],elevated:[516],disabled:[516],softDisabled:[516,"soft-disabled"],removable:[516],label:[1],density:[514],hasSlottedLeadingIcon:[32],hasSlottedTrailingIcon:[32]}]);function d(){if(typeof customElements==="undefined"){return}const e=["md-chip","md-ripple"];e.forEach((e=>{switch(e){case"md-chip":if(!customElements.get(t(e))){customElements.define(t(e),l)}break;case"md-ripple":if(!customElements.get(t(e))){n()}break}}))}d();export{l as M,d};
+//# sourceMappingURL=p-Dm_7DA1f.js.map

package/dist/components/p-Dm_7DA1f.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["mdChipCss","MdChip","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","icon","trailingIcon","selected","appearance","elevated","disabled","softDisabled","label","density","hasSlottedLeadingIcon","hasSlottedTrailingIcon","handleClick","e","isDisabled","preventDefault","isSelectable","mdSelect","emit","mdClick","handleKeyDown","key","triggerRipple","el","click","isRemovable","dispatchRemove","handleRemoveClick","stopPropagation","handleRemoveKeyDown","colorVars","c","color","test","undefined","effectiveAppearance","selectable","isInteractiveHost","removable","accessibleLabel","textContent","trim","componentDidLoad","shadow","shadowRoot","leadingSlot","querySelector","trailingSlot","addEventListener","assignedElements","length","ev","mdRemove","defaultPrevented","remove","render","hasLeadingIcon","hasTrailingIcon","showCheckmark","showRemove","isEffectivelyDisabled","chipLabel","hostIsButton","renderPrimary","h","Host","style","class","role","String","tabindex","onClick","onKeyDown","part","viewBox","fill","d","name","id","type"],"sources":["src/components/md-chip/md-chip.css?tag=md-chip&encapsulation=shadow","src/components/md-chip/md-chip.tsx"],"sourcesContent":["/* ==========================================================\n   md-chip — Material Design 3 Chip\n   Spec: https://m3.material.io/components/chips/specs\n\n   Four variants:\n     assist      — surface-container-low, on-surface, outline\n     filter      — surface-container-low, on-surface-variant, outline (selectable)\n     input       — surface-container-low, on-surface-variant, outline-variant (selectable + removable)\n     suggestion  — surface-container-low, on-surface-variant, outline\n\n   Measurements (MD3 spec):\n     Height:                 32px\n     Shape:                  8px corner radius (shape-corner-small)\n     Icon size:              18px\n     Left/right padding:     16px (no icon), 8px (with icon)\n     Padding between:        8px\n     Label text:             label-large\n\n   APPEARANCE x COLOUR:\n     `appearance` picks the surface style (outlined | filled | elevated) and is\n     independent of `variant`, which picks the M3 chip TYPE. `color` picks a\n     role — primary / secondary / tertiary / error (baseline M3) or\n     success / warning / info (semantic status roles, defined in\n     packages/tokens/src/tokens.css on the same tonal recipe).\n\n     outlined + color  -> tints outline, label and icon; container transparent\n     filled/elevated   -> tonal container (<color>-container) with\n                          on-<color>-container label; outline dropped\n     no color          -> neutral: outlined is unchanged from before, and\n                          filled/elevated take a surface tone rather than the\n                          secondary container, so an unselected filled chip is\n                          never mistaken for a selected one\n\n     Every per-instance property below still wins over all of it.\n\n   PUBLIC CSS CUSTOM PROPERTIES (override per-instance):\n     --md-chip-container-color           Container background\n     --md-chip-container-color-selected  Selected container background\n     --md-chip-label-color               Label text color\n     --md-chip-label-color-selected      Selected label text color\n     --md-chip-icon-color                Leading/trailing icon color\n     --md-chip-icon-size                 Icon dimensions\n     --md-chip-container-shape           Border-radius override\n     --md-chip-container-height          Height override\n     --md-chip-outline-color             Outline color\n     --md-chip-outline-width             Outline width\n     --md-chip-state-layer-color         State layer color override\n     --md-chip-elevation                 Box-shadow override\n\n   CSS PARTS:\n     state-layer   Hover/press overlay\n     outline       Border element\n     label         Label text wrapper\n     icon          Leading icon\n     trailing-icon Trailing icon\n     checkmark     Filter chip checkmark\n     remove        Input chip remove button\n\n   SLOTS:\n     (default)       Label text\n     leading-icon    Custom leading icon\n     trailing-icon   Custom trailing icon\n   ========================================================== */\n\n/* ==========================================================\n   1. HOST — BASE\n   ========================================================== */\n\n:host {\n  --_container-color: var(--md-chip-container-color, transparent);\n  --_container-color-selected: var(--md-chip-container-color-selected, var(--md-sys-color-secondary-container));\n  --_label-color: var(--md-chip-label-color, var(--md-sys-color-on-surface-variant));\n  --_label-color-selected: var(--md-chip-label-color-selected, var(--md-sys-color-on-secondary-container));\n  --_icon-color: var(--md-chip-icon-color, var(--md-sys-color-primary));\n  --_icon-size: var(--md-chip-icon-size, max(14px, calc(18px + var(--md-sys-density-scale, 0) * 1px)));\n  --_container-shape: var(--md-chip-container-shape, var(--md-sys-shape-corner-small, 8px));\n  --_container-height: var(--md-chip-container-height, 32px);\n  --_outline-color: var(--md-chip-outline-color, var(--md-sys-color-outline));\n  --_outline-width: var(--md-chip-outline-width, 1px);\n  --_state-layer-color: var(--md-chip-state-layer-color, var(--md-sys-color-on-surface));\n  --_elevation: var(--md-chip-elevation, var(--md-sys-elevation-0, none));\n  /* Colour-role slots. These four are the ONLY thing the `color` prop swaps;\n     every appearance below is written against them, so adding a role is a\n     4-line block and never touches the appearance rules.\n     The neutral defaults reproduce the pre-existing look exactly: an uncoloured\n     chip's selected state has always been secondary-container. */\n  --_c-main: var(--md-sys-color-primary);\n  --_c-on-main: var(--md-sys-color-on-primary);\n  --_c-container: var(--md-sys-color-secondary-container);\n  --_c-on-container: var(--md-sys-color-on-secondary-container);\n  --_padding-inline: var(--md-sys-spacing-inset-lg, 16px);\n  --_gap: var(--md-sys-spacing-gap-sm, 8px);\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  box-sizing: border-box;\n  /* Global density: each `data-density` rung (0…-4) trims 4px off the chip\n     height, floored at 24px (label-large line-height is 20px). Applied at the\n     consumption point so every size/variant is covered by one edit. Unchanged\n     at density 0. */\n  block-size: max(24px, calc(var(--_container-height) + var(--md-sys-density-scale, 0) * 4px));\n  padding-inline: var(--_padding-inline);\n  gap: var(--_gap);\n\n  background-color: var(--_container-color);\n  border-radius: var(--_container-shape);\n  box-shadow: var(--_elevation);\n  cursor: pointer;\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\n  overflow: hidden;\n\n  font-family: var(--md-sys-typescale-label-large-font-family, Roboto, sans-serif);\n  font-size: max(11px, calc(14px + var(--md-sys-density-scale, 0) * 0.5px));\n  font-weight: var(--md-sys-typescale-label-large-font-weight, 500);\n  line-height: max(16px, calc(20px + var(--md-sys-density-scale, 0) * 1px));\n  letter-spacing: var(--md-sys-typescale-label-large-letter-spacing, 0.1px);\n  color: var(--_label-color);\n\n  transition:\n    background-color var(--md-sys-motion-duration-short2, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n    box-shadow var(--md-sys-motion-duration-short2, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n    color var(--md-sys-motion-duration-short2, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n}\n\n/* Shrink padding when leading/trailing icon present */\n:host(.md-chip--with-leading-icon) {\n  padding-inline-start: var(--md-sys-spacing-inset-sm, 8px);\n}\n\n:host(.md-chip--with-trailing-icon) {\n  padding-inline-end: var(--md-sys-spacing-inset-sm, 8px);\n}\n\n/* ==========================================================\n   2. VARIANT-SPECIFIC COLORS\n   ========================================================== */\n\n/* Assist — primary icon color */\n:host(.md-chip--assist) {\n  --_icon-color: var(--md-chip-icon-color, var(--md-sys-color-primary));\n  --_label-color: var(--md-chip-label-color, var(--md-sys-color-on-surface));\n}\n\n/* Filter */\n:host(.md-chip--filter) {\n  --_icon-color: var(--md-chip-icon-color, var(--md-sys-color-on-surface-variant));\n  --_label-color: var(--md-chip-label-color, var(--md-sys-color-on-surface-variant));\n}\n\n/* Input */\n:host(.md-chip--input) {\n  --_outline-color: var(--md-chip-outline-color, var(--md-sys-color-outline-variant));\n  --_icon-color: var(--md-chip-icon-color, var(--md-sys-color-on-surface-variant));\n  --_label-color: var(--md-chip-label-color, var(--md-sys-color-on-surface-variant));\n}\n\n/* Suggestion */\n:host(.md-chip--suggestion) {\n  --_icon-color: var(--md-chip-icon-color, var(--md-sys-color-on-surface-variant));\n  --_label-color: var(--md-chip-label-color, var(--md-sys-color-on-surface-variant));\n}\n\n/* ==========================================================\n   3. SELECTED STATE\n   ========================================================== */\n\n:host(.md-chip--selected) {\n  --_container-color: var(--_container-color-selected);\n  color: var(--_label-color-selected);\n  --_icon-color: var(--md-chip-icon-color, var(--md-sys-color-on-secondary-container));\n  --_state-layer-color: var(--md-sys-color-on-secondary-container);\n}\n\n:host(.md-chip--selected) .md-chip__outline {\n  border-color: transparent;\n}\n\n/* ==========================================================\n   4. ELEVATED\n   ========================================================== */\n\n:host(.md-chip--elevated) {\n  --_elevation: var(--md-chip-elevation, var(--md-sys-elevation-1));\n}\n\n:host(.md-chip--elevated) .md-chip__outline {\n  border-color: transparent;\n}\n\n:host(.md-chip--elevated.md-chip--selected) {\n  --_elevation: var(--md-chip-elevation, var(--md-sys-elevation-1));\n}\n\n/* ==========================================================\n   4b. COLOUR ROLES\n   Resolved in the component, not here: md-chip.tsx maps `color` onto the four\n   --_c-* slots below as inline custom properties. That way ANY role the theme\n   defines works — `color=\"brand\"` picks up --md-sys-color-brand the moment a\n   theme ships it — instead of only the names we happened to enumerate in CSS.\n   Each slot falls back to the neutral default, so an unknown role renders as an\n   uncoloured chip rather than losing its container colour entirely.\n   ========================================================== */\n\n/* ==========================================================\n   4c. APPEARANCE  (outlined | filled | elevated)\n   ========================================================== */\n\n/* `outlined` is the default and is deliberately a no-op when no `color` is set,\n   so untouched chips render exactly as before. With a colour, the role tints\n   the outline, label and icon while the container stays transparent. */\n:host(.md-chip--appearance-outlined[color]) {\n  --_outline-color: var(--md-chip-outline-color, var(--_c-main));\n  --_label-color: var(--md-chip-label-color, var(--_c-main));\n  --_icon-color: var(--md-chip-icon-color, var(--_c-main));\n  --_state-layer-color: var(--md-chip-state-layer-color, var(--_c-main));\n}\n\n/* `filled` and `elevated` share one tonal container — they differ only in\n   elevation, which section 4 already owns. Without a colour they take a neutral\n   surface rather than the secondary container, so an unselected filled chip is\n   never mistaken for a selected one. */\n:host(.md-chip--appearance-filled),\n:host(.md-chip--appearance-elevated) {\n  --_container-color: var(--md-chip-container-color, var(--md-sys-color-surface-container-high));\n  --_label-color: var(--md-chip-label-color, var(--md-sys-color-on-surface-variant));\n  --_icon-color: var(--md-chip-icon-color, var(--md-sys-color-on-surface-variant));\n}\n\n:host(.md-chip--appearance-filled[color]),\n:host(.md-chip--appearance-elevated[color]) {\n  --_container-color: var(--md-chip-container-color, var(--_c-container));\n  --_label-color: var(--md-chip-label-color, var(--_c-on-container));\n  --_icon-color: var(--md-chip-icon-color, var(--_c-on-container));\n  --_state-layer-color: var(--md-chip-state-layer-color, var(--_c-on-container));\n}\n\n/* Both drop the outline: the container itself is now the shape. */\n:host(.md-chip--appearance-filled) .md-chip__outline,\n:host(.md-chip--appearance-elevated) .md-chip__outline {\n  border-color: transparent;\n}\n\n/* Selection tints with the chosen role instead of the fixed secondary\n   container, for every appearance. Section 3 still supplies the neutral case. */\n:host(.md-chip--selected[color]) {\n  --_container-color: var(--_c-container);\n  color: var(--_c-on-container);\n  --_label-color-selected: var(--_c-on-container);\n  --_icon-color: var(--md-chip-icon-color, var(--_c-on-container));\n  --_state-layer-color: var(--_c-on-container);\n}\n\n/* ==========================================================\n   5. OUTLINE\n   ========================================================== */\n\n.md-chip__outline {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  border: var(--_outline-width) solid var(--_outline-color);\n  pointer-events: none;\n}\n\n/* ==========================================================\n   6. STATE LAYER\n   ========================================================== */\n\n.md-chip__state-layer {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background-color: var(--_state-layer-color);\n  opacity: 0;\n  transition: opacity var(--md-sys-motion-duration-short1, 100ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n  pointer-events: none;\n  z-index: 1;\n}\n\n:host(:hover) .md-chip__state-layer {\n  opacity: var(--md-sys-state-hover-state-layer-opacity, 0.08);\n}\n\n:host(:focus-visible) .md-chip__state-layer {\n  opacity: var(--md-sys-state-focus-state-layer-opacity, 0.12);\n}\n\n:host(:active) .md-chip__state-layer {\n  opacity: var(--md-sys-state-pressed-state-layer-opacity, 0.12);\n}\n\n/* ==========================================================\n   7. FOCUS RING\n   ========================================================== */\n\n:host(:focus-visible) {\n  outline: 3px solid var(--md-sys-color-secondary);\n  outline-offset: 2px;\n}\n\n/* ==========================================================\n   7b. PRIMARY ACTION (removable chips)\n   When a chip is both interactive AND removable, its body action is a\n   SEPARATE focusable control that is a sibling of the remove ✕ button\n   (so the two interactive controls don't nest — see md-chip.tsx). It is a\n   transparent layer over the chip; the label/icons paint above it (higher in\n   DOM at the same z-index) and pointer/keyboard activation bubbles to the\n   host handlers. The focus ring uses a NEGATIVE outline-offset so it renders\n   INSIDE the chip edge and is not clipped by the host's `overflow: hidden`.\n   ========================================================== */\n\n.md-chip__primary {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  margin: 0;\n  padding: 0;\n  border: none;\n  background: none;\n  border-radius: inherit;\n  cursor: inherit;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.md-chip__primary:focus-visible {\n  outline: 3px solid var(--md-sys-color-secondary);\n  outline-offset: -3px;\n}\n\n/* ==========================================================\n   8. LABEL\n   ========================================================== */\n\n.md-chip__label {\n  position: relative;\n  z-index: 2;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  text-align: start;\n}\n\n/* ==========================================================\n   9. ICONS\n   ========================================================== */\n\n.md-chip__icon,\n.md-chip__trailing-icon {\n  position: relative;\n  z-index: 2;\n  font-family: var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');\n  font-size: var(--_icon-size);\n  inline-size: var(--_icon-size);\n  block-size: var(--_icon-size);\n  color: var(--_icon-color);\n  line-height: 1;\n  font-weight: normal;\n  font-style: normal;\n  letter-spacing: normal;\n  text-transform: none;\n  white-space: nowrap;\n  overflow-wrap: normal;\n  direction: ltr;\n  -webkit-font-smoothing: antialiased;\n  pointer-events: none;\n  flex-shrink: 0;\n}\n\nslot[name=\"leading-icon\"],\nslot[name=\"trailing-icon\"] {\n  display: contents;\n}\n\n::slotted([slot=\"leading-icon\"]),\n::slotted([slot=\"trailing-icon\"]) {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: var(--_icon-size);\n  block-size: var(--_icon-size);\n  font-size: var(--_icon-size);\n  color: var(--_icon-color);\n  fill: currentColor;\n  pointer-events: none;\n  flex-shrink: 0;\n  position: relative;\n  z-index: 2;\n}\n\n/* ==========================================================\n   10. CHECKMARK (filter chip selected)\n   ========================================================== */\n\n.md-chip__checkmark {\n  position: relative;\n  z-index: 2;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: var(--_icon-size);\n  block-size: var(--_icon-size);\n  color: var(--_icon-color);\n  flex-shrink: 0;\n}\n\n.md-chip__checkmark svg {\n  inline-size: var(--_icon-size);\n  block-size: var(--_icon-size);\n}\n\n/* ==========================================================\n   11. REMOVE BUTTON (input chip)\n   ========================================================== */\n\n.md-chip__remove {\n  position: relative;\n  z-index: 2;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-inline-size: 18px;\n  min-block-size: 18px;\n  padding: 0;\n  border: none;\n  background: none;\n  color: var(--_icon-color);\n  cursor: pointer;\n  border-radius: 50%;\n  flex-shrink: 0;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.md-chip__remove:focus-visible {\n  outline: 2px solid var(--md-sys-color-secondary);\n  outline-offset: 1px;\n}\n\n.md-chip__remove svg {\n  inline-size: var(--_icon-size);\n  block-size: var(--_icon-size);\n  pointer-events: none;\n}\n\n.md-chip__remove:disabled {\n  cursor: default;\n  pointer-events: none;\n}\n\n/* ==========================================================\n   12. DISABLED\n   ========================================================== */\n\n:host(.md-chip--disabled) {\n  cursor: default;\n  pointer-events: none;\n  color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity, 0.38) * 100%), transparent);\n  --_icon-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity, 0.38) * 100%), transparent);\n  --_elevation: var(--md-sys-elevation-0, none) !important;\n}\n\n:host(.md-chip--disabled:not(.md-chip--selected):not(.md-chip--elevated)) .md-chip__outline {\n  border-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-container-opacity, 0.12) * 100%), transparent);\n}\n\n:host(.md-chip--disabled.md-chip--selected) {\n  --_container-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-container-opacity, 0.12) * 100%), transparent);\n}\n\n:host(.md-chip--disabled.md-chip--elevated:not(.md-chip--selected)) {\n  --_container-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-container-opacity, 0.12) * 100%), transparent);\n}\n\n:host(.md-chip--disabled:hover) .md-chip__state-layer,\n:host(.md-chip--disabled:active) .md-chip__state-layer,\n:host(.md-chip--disabled:focus-visible) .md-chip__state-layer {\n  opacity: 0;\n}\n\n/* Soft-disabled: disabled visuals but remains focusable */\n:host([soft-disabled]) {\n  cursor: default;\n  pointer-events: auto;\n  color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity, 0.38) * 100%), transparent);\n  --_icon-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity, 0.38) * 100%), transparent);\n  --_elevation: var(--md-sys-elevation-0, none) !important;\n}\n\n:host([soft-disabled]) .md-chip__state-layer {\n  display: none;\n}\n\n/* ==========================================================\n   13. REDUCED MOTION\n   ========================================================== */\n\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    transition: none;\n  }\n\n  .md-chip__state-layer {\n    transition: none;\n  }\n}\n\n/* ==========================================================\n   14. FORCED COLORS — Windows High Contrast\n   ========================================================== */\n\n@media (forced-colors: active) {\n  :host {\n    border: 1px solid ButtonText;\n    background-color: ButtonFace;\n    color: ButtonText;\n    forced-color-adjust: none;\n  }\n\n  .md-chip__outline {\n    border-color: ButtonText;\n  }\n\n  :host(:focus-visible) {\n    outline-color: Highlight;\n  }\n\n  .md-chip__primary:focus-visible {\n    outline-color: Highlight;\n  }\n\n  :host(.md-chip--selected) {\n    background-color: Highlight;\n    color: HighlightText;\n  }\n\n  :host(.md-chip--disabled) {\n    border-color: GrayText;\n    color: GrayText;\n    opacity: 1;\n  }\n\n  .md-chip__state-layer {\n    display: 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 { Component, Host, h, Prop, State, Event, EventEmitter, Element } from '@stencil/core';\nimport { triggerRipple } from '../../utils/ripple';\n\n@Component({ tag: 'md-chip', styleUrl: 'md-chip.css', shadow: true })\nexport class MdChip {\n  @Element() el!: HTMLElement;\n\n  /** Chip variant */\n  @Prop({ reflect: true }) variant: 'assist' | 'filter' | 'input' | 'suggestion' = 'assist';\n\n  /** Material Symbols icon name for the leading icon */\n  @Prop() icon: string = '';\n\n  /** Material Symbols icon name for the trailing icon (filter/input only) */\n  @Prop({ attribute: 'trailing-icon' }) trailingIcon: string = '';\n\n  /** Whether the chip is selected (filter/input variants) */\n  @Prop({ mutable: true, reflect: true }) selected: boolean = false;\n\n  /**\n   * Whether clicking the chip body toggles `selected`. Defaults to true for\n   * `filter`/`input` variants. Set `selectable=\"false\"` for a token that is only\n   * a display of a value (e.g. a multi-select's removable chips) — clicking the\n   * body then does nothing and the ✕ remove button is the only action, so the\n   * chip doesn't flash a misleading \"active\" state.\n   */\n  @Prop() selectable?: boolean;\n\n  /**\n   * Surface style of the chip. Distinct from `variant`, which selects the M3\n   * chip TYPE (assist / filter / input / suggestion); a chip has both.\n   *\n   * - `outlined` (default) — transparent container with a 1dp outline.\n   * - `filled` — tonal container, no outline.\n   * - `elevated` — tonal container with elevation and no outline.\n   */\n  @Prop({ reflect: true }) appearance: 'outlined' | 'filled' | 'elevated' = 'outlined';\n\n  /**\n   * Colour role applied to the chip's outline / label / container, depending on\n   * `appearance`. Omit for the neutral surface treatment.\n   *\n   * Any role name the THEME defines is accepted, not just a fixed list — the\n   * chip resolves `<name>` to the `--md-sys-color-<name>` /\n   * `-<name>-container` / `-on-<name>-container` family at runtime. So\n   * `color=\"brand\"` works as soon as a theme ships those tokens, and a name the\n   * theme does not define degrades to the neutral treatment rather than\n   * rendering broken.\n   *\n   * `primary` | `secondary` | `tertiary` | `error` are the baseline M3 roles;\n   * `success` | `warning` | `info` ship in packages/tokens on the same tonal\n   * recipe. The union below is a hint for editor autocomplete only — the `string`\n   * arm is what makes custom roles work.\n   */\n  @Prop({ reflect: true }) color?:\n    | 'primary'\n    | 'secondary'\n    | 'tertiary'\n    | 'error'\n    | 'success'\n    | 'warning'\n    | 'info'\n    | (string & {});\n\n  /**\n   * Whether the chip is elevated (adds shadow instead of outline).\n   *\n   * @deprecated Use `appearance=\"elevated\"`. Kept as an alias so existing\n   * markup keeps working: when true it forces the elevated appearance and wins\n   * over `appearance`, since a consumer setting it is being explicit.\n   */\n  @Prop({ reflect: true }) elevated: boolean = false;\n\n  /** Disables the chip */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Soft-disabled: disabled visuals but remains focusable */\n  @Prop({ reflect: true, attribute: 'soft-disabled' }) softDisabled: boolean = false;\n\n  /**\n   * When `true`, the chip renders a trailing remove (\"✕\") button and responds\n   * to Delete / Backspace from the chip itself. Works on every variant.\n   *\n   * `variant=\"input\"` is removable by default (per MD3 spec) — setting\n   * `removable=\"false\"` explicitly opts out of that behavior.\n   */\n  @Prop({ reflect: true }) removable?: boolean;\n\n  /** Label text — alternative to default slot */\n  @Prop() label: string = '';\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  /** Emits when the chip is clicked or activated via keyboard */\n  @Event() mdClick: EventEmitter<void>;\n\n  /** Emits when the selected state changes (filter/input) */\n  @Event() mdSelect: EventEmitter<{ selected: boolean }>;\n\n  /**\n   * Fires when the trailing remove (\"✕\") button is activated on a removable\n   * chip (by click, Enter, Space, Delete, or Backspace).\n   *\n   * The event is **cancelable**: by default, after `mdRemove` is dispatched\n   * the chip removes itself from the DOM. Call `event.preventDefault()` in a\n   * handler to keep the chip mounted (e.g. when your state layer owns the\n   * list and will re-render with the chip gone).\n   */\n  @Event({ cancelable: true }) mdRemove: EventEmitter<void>;\n\n  @State() private hasSlottedLeadingIcon = false;\n  @State() private hasSlottedTrailingIcon = false;\n\n  private get isDisabled() {\n    return this.disabled || this.softDisabled;\n  }\n\n  /**\n   * Maps `color` onto the four slots every appearance rule is written against.\n   * Done here rather than as one CSS block per role so ANY theme-defined role\n   * works, not just a list we happen to have enumerated.\n   *\n   * Each var carries a fallback to the neutral default, so a role the theme has\n   * not defined renders as an uncoloured chip instead of collapsing to\n   * guaranteed-invalid and losing its container colour entirely.\n   */\n  private get colorVars(): Record<string, string> | undefined {\n    const c = this.color;\n    // Guard the interpolation: this value becomes part of a custom-property\n    // NAME, so anything outside a plain CSS ident is rejected outright.\n    if (!c || !/^[a-z][a-z0-9-]*$/i.test(c)) return undefined;\n    return {\n      '--_c-main': `var(--md-sys-color-${c}, var(--md-sys-color-primary))`,\n      '--_c-on-main': `var(--md-sys-color-on-${c}, var(--md-sys-color-on-primary))`,\n      '--_c-container': `var(--md-sys-color-${c}-container, var(--md-sys-color-secondary-container))`,\n      '--_c-on-container': `var(--md-sys-color-on-${c}-container, var(--md-sys-color-on-secondary-container))`,\n    };\n  }\n\n  /**\n   * Resolves the deprecated `elevated` boolean against `appearance`. Setting\n   * `elevated` is an explicit act, so it wins; `appearance` covers everything\n   * else. One accessor means the class map and any future logic can't disagree\n   * about which surface style is in effect.\n   */\n  private get effectiveAppearance(): 'outlined' | 'filled' | 'elevated' {\n    return this.elevated ? 'elevated' : this.appearance;\n  }\n\n  private get isSelectable() {\n    if (this.selectable !== undefined) return this.selectable;\n    return this.variant === 'filter' || this.variant === 'input';\n  }\n\n  /**\n   * Whether the chip BODY is an interactive control. An EXPLICITLY non-selectable\n   * (`selectable=\"false\"`) REMOVABLE token — e.g. md-multi-select's display chips —\n   * does nothing on body-click and only its ✕ is interactive, so exposing the host\n   * as a focusable `button` both misleads AT and nests an interactive control inside\n   * another (axe nested-interactive). Such tokens are a labelled `group` whose only\n   * tab stop is the remove ✕. Every other chip keeps its default button semantics.\n   */\n  private get isInteractiveHost() {\n    return !(this.selectable === false && this.isRemovable);\n  }\n\n  /**\n   * A chip is removable when `removable` is explicitly true, or when the chip\n   * is an `input` variant and the consumer hasn't explicitly opted out\n   * (`removable=\"false\"`). This keeps backward compatibility: pre-existing\n   * `<md-chip variant=\"input\">` markup continues to show the ✕ button.\n   */\n  private get isRemovable() {\n    if (this.removable === true) return true;\n    if (this.removable === false) return false;\n    return this.variant === 'input';\n  }\n\n  /** Resolves the chip's accessible label from the label prop or light-DOM text content. */\n  private get accessibleLabel(): string {\n    return this.label || this.el.textContent?.trim() || '';\n  }\n\n  componentDidLoad() {\n    const shadow = this.el.shadowRoot;\n    if (!shadow) return;\n\n    const leadingSlot = shadow.querySelector('slot[name=\"leading-icon\"]') as HTMLSlotElement | null;\n    const trailingSlot = shadow.querySelector('slot[name=\"trailing-icon\"]') as HTMLSlotElement | null;\n\n    leadingSlot?.addEventListener('slotchange', () => {\n      this.hasSlottedLeadingIcon = leadingSlot.assignedElements().length > 0;\n    });\n    trailingSlot?.addEventListener('slotchange', () => {\n      this.hasSlottedTrailingIcon = trailingSlot.assignedElements().length > 0;\n    });\n  }\n\n  /**\n   * Dispatches the cancelable `mdRemove` event. When the consumer hasn't\n   * called `preventDefault()`, removes the chip from its parent DOM as the\n   * default action. Centralises the policy so click/key handlers stay\n   * single-purpose and we never forget the default action on one path.\n   */\n  private dispatchRemove() {\n    const ev = this.mdRemove.emit();\n    if (!ev.defaultPrevented) {\n      this.el.remove();\n    }\n  }\n\n  private handleClick = (e: MouseEvent) => {\n    if (this.isDisabled) { e.preventDefault(); return; }\n\n    if (this.isSelectable) {\n      this.selected = !this.selected;\n      this.mdSelect.emit({ selected: this.selected });\n    }\n\n    this.mdClick.emit();\n  };\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (this.isDisabled) return;\n\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      triggerRipple(this.el);\n      this.el.click();\n      return;\n    }\n\n    if (this.isRemovable && (e.key === 'Delete' || e.key === 'Backspace')) {\n      e.preventDefault();\n      this.dispatchRemove();\n    }\n  };\n\n  private handleRemoveClick = (e: MouseEvent) => {\n    e.stopPropagation();\n    if (this.isDisabled) return;\n    this.dispatchRemove();\n  };\n\n  private handleRemoveKeyDown = (e: KeyboardEvent) => {\n    if (this.isDisabled) return;\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.stopPropagation();\n      e.preventDefault();\n      this.dispatchRemove();\n    }\n  };\n\n  render() {\n    const hasLeadingIcon = !!this.icon || this.hasSlottedLeadingIcon;\n    const hasTrailingIcon = !!this.trailingIcon || this.hasSlottedTrailingIcon;\n    const showCheckmark = this.variant === 'filter' && this.selected && !hasLeadingIcon;\n    const showRemove = this.isRemovable;\n    const isEffectivelyDisabled = this.isDisabled;\n    const chipLabel = this.accessibleLabel;\n\n    // A removable chip renders a trailing remove ✕ <button> — itself a\n    // focusable control. If the HOST were also a focusable widget\n    // (role=\"button\" + tabindex) the two would nest (axe \"nested-interactive\").\n    // So when the body is interactive AND a remove button is present, the host\n    // steps down to a labelled `group` container and the primary (body) action\n    // becomes its OWN focusable element — a sibling of the remove button, not\n    // its ancestor. The host stays a single `button` only when there is no\n    // remove button to nest.\n    const hostIsButton = this.isInteractiveHost && !showRemove;\n    const renderPrimary = this.isInteractiveHost && showRemove;\n\n    return (\n      <Host\n        style={this.colorVars}\n        class={{\n          'md-chip': true,\n          [`md-chip--${this.variant}`]: true,\n          'md-chip--selected': this.selected && this.isSelectable,\n          // The deprecated `elevated` boolean resolves into `appearance`, and\n          // the legacy `md-chip--elevated` class is still emitted for that case\n          // so every existing rule keyed on it (disabled states, selected\n          // combinations) keeps applying untouched.\n          [`md-chip--appearance-${this.effectiveAppearance}`]: true,\n          'md-chip--elevated': this.effectiveAppearance === 'elevated',\n          [`md-chip--color-${this.color}`]: !!this.color,\n          'md-chip--disabled': isEffectivelyDisabled,\n          'md-chip--with-leading-icon': hasLeadingIcon || showCheckmark,\n          'md-chip--with-trailing-icon': hasTrailingIcon || showRemove,\n        }}\n        role={hostIsButton ? 'button' : 'group'}\n        aria-roledescription=\"chip\"\n        aria-pressed={hostIsButton && this.isSelectable ? String(this.selected) : undefined}\n        aria-label={hostIsButton ? undefined : chipLabel || undefined}\n        aria-disabled={isEffectivelyDisabled ? 'true' : undefined}\n        tabindex={hostIsButton ? (this.disabled ? '-1' : '0') : undefined}\n        onClick={this.handleClick}\n        onKeyDown={this.handleKeyDown}\n      >\n        <md-ripple disabled={isEffectivelyDisabled}></md-ripple>\n        <span class=\"md-chip__state-layer\" part=\"state-layer\" aria-hidden=\"true\"></span>\n\n        {!this.elevated && <span class=\"md-chip__outline\" part=\"outline\" aria-hidden=\"true\"></span>}\n\n        {renderPrimary && (\n          <span\n            class=\"md-chip__primary\"\n            part=\"primary\"\n            role=\"button\"\n            tabindex={this.disabled ? '-1' : '0'}\n            aria-labelledby=\"md-chip-label-text\"\n            aria-pressed={this.isSelectable ? String(this.selected) : undefined}\n            aria-disabled={isEffectivelyDisabled ? 'true' : undefined}\n          ></span>\n        )}\n\n        {showCheckmark && (\n          <span class=\"md-chip__checkmark\" part=\"checkmark\" aria-hidden=\"true\">\n            <svg viewBox=\"0 0 18 18\" fill=\"none\">\n              <path d=\"M6.75 12.127L3.623 9l-1.06 1.057L6.75 14.25l9-9-1.057-1.057L6.75 12.127z\" fill=\"currentColor\" />\n            </svg>\n          </span>\n        )}\n\n        <slot name=\"leading-icon\">\n          {hasLeadingIcon && !showCheckmark && (\n            <span class=\"md-chip__icon material-symbols-outlined\" part=\"icon\" aria-hidden=\"true\">\n              {this.icon}\n            </span>\n          )}\n        </slot>\n\n        <span class=\"md-chip__label\" part=\"label\" id=\"md-chip-label-text\">\n          <slot>{this.label}</slot>\n        </span>\n\n        {showRemove ? (\n          <button\n            class=\"md-chip__remove\"\n            part=\"remove\"\n            type=\"button\"\n            tabindex={this.disabled ? '-1' : '0'}\n            aria-label={chipLabel ? `Remove ${chipLabel}` : 'Remove'}\n            disabled={isEffectivelyDisabled}\n            onClick={this.handleRemoveClick}\n            onKeyDown={this.handleRemoveKeyDown}\n          >\n            <slot name=\"trailing-icon\">\n              <svg viewBox=\"0 0 18 18\" fill=\"none\" aria-hidden=\"true\">\n                <path d=\"M14.25 4.808l-1.058-1.058L9 7.942 4.808 3.75 3.75 4.808 7.942 9 3.75 13.192l1.058 1.058L9 10.058l4.192 4.192 1.058-1.058L10.058 9l4.192-4.192z\" fill=\"currentColor\" />\n              </svg>\n            </slot>\n          </button>\n        ) : (\n          <slot name=\"trailing-icon\">\n            {hasTrailingIcon && (\n              <span class=\"md-chip__trailing-icon material-symbols-outlined\" part=\"trailing-icon\" aria-hidden=\"true\">\n                {this.trailingIcon}\n              </span>\n            )}\n          </slot>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}