@slotted/angular 0.1.0-beta.1 → 0.1.0-beta.10

package/fesm2022/slotted-angular-text-field.mjs

@@ -8,6 +8,7 @@ import { textFieldMessages } from '@slotted/core/i18n';
 import { getLiveAnnouncer } from '@slotted/core/live-announcer';
 import { createControllable } from '@slotted/core/state';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { writeSelectorKey } from '@slotted/core/selector-key';
 
 const FALLBACK = {
     mono: false,
@@ -163,22 +164,35 @@ class SlTextField {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showReveal" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTextField, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlTextField, isStandalone: true, selector: "[slTextField]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, mono: { classPropertyName: "mono", publicName: "mono", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, revealable: { classPropertyName: "revealable", publicName: "revealable", isSignal: true, isRequired: false, transformFunction: null }, copyable: { classPropertyName: "copyable", publicName: "copyable", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueCopy: "valueCopy" }, host: { attributes: { "data-ui": "text-field", "data-part": "root" }, properties: { "attr.data-size": "resolvedSize()", "attr.data-variant": "resolvedVariant()", "attr.data-mono": "resolvedMono() ? '' : null", "attr.data-disabled": "control()?.resolvedDisabled() === true ? '' : null", "attr.data-invalid": "control()?.resolvedInvalid() === true ? '' : null", "attr.data-readonly": "control()?.resolvedReadOnly() === true ? '' : null", "attr.data-loading": "loading() === true ? '' : null" } }, queries: [{ propertyName: "control", first: true, predicate: SlTextFieldControl, descendants: true, isSignal: true }], exportAs: ["slTextField"], ngImport: i0, template: `<ng-content select="[slTextFieldStart]" />
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlTextField, isStandalone: true, selector: "[slTextField]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, mono: { classPropertyName: "mono", publicName: "mono", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, revealable: { classPropertyName: "revealable", publicName: "revealable", isSignal: true, isRequired: false, transformFunction: null }, copyable: { classPropertyName: "copyable", publicName: "copyable", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueCopy: "valueCopy" }, host: { attributes: { "data-ui": "text-field", "data-ui-text-field": "", "data-part": "root", "data-part-root": "" }, properties: { "attr.data-size": "resolvedSize()", "attr.data-variant": "resolvedVariant()", "attr.data-mono": "resolvedMono() ? '' : null", "attr.data-disabled": "control()?.resolvedDisabled() === true ? '' : null", "attr.data-invalid": "control()?.resolvedInvalid() === true ? '' : null", "attr.data-readonly": "control()?.resolvedReadOnly() === true ? '' : null", "attr.data-loading": "loading() === true ? '' : null" } }, queries: [{ propertyName: "control", first: true, predicate: SlTextFieldControl, descendants: true, isSignal: true }], exportAs: ["slTextField"], ngImport: i0, template: `<ng-content select="[slTextFieldStart]" />
     <ng-content />
     <!-- The ring, the mark and the two buttons below stay rendered for as long
          as their capability is on, and leave through hidden, so the stylesheet
          can take them out as well as bring them in. -->
     @if (loading() !== undefined) {
-      <span data-part="busy" data-ui="spinner" aria-hidden="true" [hidden]="!loading()"></span>
+      <span
+        data-part="busy"
+        data-part-busy=""
+        data-ui="spinner"
+        data-ui-spinner=""
+        aria-hidden="true"
+        [hidden]="!loading()"
+      ></span>
     }
     @if (control()?.password()) {
-      <span data-part="caps-lock" aria-hidden="true" [hidden]="!control()!.capsLock()">
+      <span
+        data-part="caps-lock"
+        data-part-caps-lock=""
+        aria-hidden="true"
+        [hidden]="!control()!.capsLock()"
+      >
         <span slIcon><svg slGlyph name="caps-lock"></svg></span>
       </span>
     }
     @if (clearable()) {
       <button
         data-part="clear"
+        data-part-clear=""
         type="button"
         [hidden]="!showClear()"
         [attr.aria-label]="t('clear')"
@@ -190,6 +204,7 @@ class SlTextField {
     @if (copyable()) {
       <button
         data-part="copy"
+        data-part-copy=""
         type="button"
         [hidden]="!showCopy()"
         [attr.aria-label]="t('copy')"
@@ -207,6 +222,7 @@ class SlTextField {
     @if (showReveal()) {
       <button
         data-part="reveal"
+        data-part-reveal=""
         type="button"
         [attr.aria-label]="t('reveal')"
         [attr.aria-pressed]="control()!.revealed()"
@@ -219,7 +235,7 @@ class SlTextField {
         }
       </button>
     }
-    <ng-content select="[slTextFieldEnd]" />`, isInline: true, styles: ["@layer slotted.components{[data-ui=text-field][data-part=root]{--_font-size: var(--slotted-control-font-size-md, 13px);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-floor: var(--slotted-text-field-icon-size-min, 14px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px));--_inner-size: var(--slotted-control-inner-size-md, 24px);--_action-size: var( --slotted-text-field-action-size, min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), var(--_inner-size)) );--_inset: max( 0px, calc( (var(--_height) - 2 * var(--slotted-control-border-width, 1px) - var(--_action-size)) / 2 ) );--_action-radius: max( var(--slotted-radius-xs, 2px), calc(var(--slotted-text-field-radius, var(--slotted-control-radius, 4px)) - var(--_inset)) );--_action-transition: background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing), color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);align-items:center;background-color:var(--slotted-text-field-background, var(--slotted-control-surface, Field));border:var(--slotted-control-border-width, 1px) solid var(--slotted-text-field-border-color, var(--slotted-control-border-color, ButtonBorder));border-radius:var(--slotted-text-field-radius, var(--slotted-control-radius, 4px));box-shadow:var(--slotted-text-field-shadow, var(--slotted-control-shadow, none));box-sizing:border-box;color:var(--slotted-text-field-color, var(--slotted-text, CanvasText));display:flex;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--_font-size);gap:var(--_gap);inline-size:100%;min-inline-size:0;min-block-size:var(--_height);padding-inline:var(--_padding-inline);transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=text-field][data-part=root]:has(>:is([data-part=clear],[data-part=copy],[data-part=reveal]):not([hidden]):last-child,>[data-part=end]:last-child>[data-part=action]:last-child){padding-inline-end:var(--_inset)}[data-ui=text-field][data-part=root]:has(>[data-part=start]:first-child>[data-part=action]:first-child){padding-inline-start:var(--_inset)}[data-ui=text-field]>[data-part=input]{background-color:transparent;align-self:stretch;margin-block:calc(var(--slotted-control-border-width, 1px) * -1);border:0;color:inherit;flex:1 1 auto;font:inherit;outline:none;padding:0;min-inline-size:0;text-align:inherit;text-overflow:ellipsis}[data-ui=text-field]>[data-part=input]::placeholder{color:var(--slotted-text-field-placeholder-color, var(--slotted-text-muted, GrayText));text-overflow:ellipsis}[data-ui=text-field]>[data-part=input]::-webkit-search-cancel-button,[data-ui=text-field]>[data-part=input]::-webkit-search-decoration{appearance:none}[data-ui=text-field]>[data-part=input]:autofill{box-shadow:inset 0 0 0 100px var(--slotted-text-field-autofill-background, var(--slotted-tone-accent-surface));-webkit-text-fill-color:var(--slotted-text-field-color, var(--slotted-text, CanvasText))}[data-ui=text-field][data-part=root][data-size=sm]{--_font-size: var(--slotted-control-font-size-sm, 12px);--_height: var(--slotted-control-height-sm, 30px);--_padding-inline: var(--slotted-control-padding-inline-sm, 10px);--_gap: var(--slotted-control-gap-sm, 6px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-sm, 14px));--_inner-size: var(--slotted-control-inner-size-sm, 22px)}[data-ui=text-field][data-part=root][data-size=md]{--_font-size: var(--slotted-control-font-size-md, 13px);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px));--_inner-size: var(--slotted-control-inner-size-md, 24px)}[data-ui=text-field][data-part=root][data-size=lg]{--_font-size: var(--slotted-control-font-size-lg, 14px);--_height: var(--slotted-control-height-lg, 38px);--_padding-inline: var(--slotted-control-padding-inline-lg, 16px);--_gap: var(--slotted-control-gap-lg, 8px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-lg, 18px));--_inner-size: var(--slotted-control-inner-size-lg, 28px)}[data-ui=button-group]>[data-ui=text-field][data-part=root]{flex:1 1 0;inline-size:auto}[data-ui=text-field][data-part=root][data-variant=subtle]{background-color:var( --slotted-text-field-subtle-background, var(--slotted-surface-sunken, Canvas) );border-color:var( --slotted-text-field-subtle-border-color, var(--slotted-border-subtle, ButtonBorder) )}[data-ui=text-field][data-part=root][data-variant=plain]{background-color:transparent;border-color:transparent;border-radius:var(--slotted-radius-none, 0px);box-shadow:none}@media(forced-colors:active){[data-ui=text-field][data-part=root][data-variant=plain]{border-color:ButtonBorder}}[data-ui=text-field][data-part=root][data-mono]{font-family:var(--slotted-font-family-mono, monospace);font-variant-numeric:tabular-nums}[data-ui=text-field]>[data-part=start],[data-ui=text-field]>[data-part=end]{align-items:center;color:var(--slotted-text-field-adornment-color, var(--slotted-text-muted, GrayText));display:inline-flex;flex:0 0 auto;gap:var(--slotted-space-2, .25rem);line-height:1;unicode-bidi:plaintext}[data-ui=text-field]>[data-part=start],[data-ui=text-field]>[data-part=end]{--slotted-icon-size: var(--_icon-size);--slotted-control-inner-size: var(--_inner-size)}[data-ui=text-field]>[data-part=start]>svg,[data-ui=text-field]>[data-part=end]>svg{block-size:var(--_icon-size);inline-size:var(--_icon-size)}[data-ui=text-field]>[data-part=start]:not(:has(svg,img,[data-ui=icon],[data-part=action])),[data-ui=text-field]>[data-part=end]:not(:has(svg,img,[data-ui=icon],[data-part=action])){padding-inline:calc(var(--_icon-size) / 8)}[data-ui=text-field]>:is([data-part=clear],[data-part=copy],[data-part=reveal]),[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]{--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;block-size:var(--_action-size);border:0;border-radius:var(--_action-radius);box-sizing:border-box;color:var(--slotted-text-field-action-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;flex:0 0 auto;font:inherit;gap:var(--slotted-space-2, .25rem);justify-content:center;line-height:1;min-inline-size:var(--_action-size);padding:0;position:relative;touch-action:manipulation;transition:var(--_action-transition);unicode-bidi:plaintext;white-space:nowrap;-webkit-tap-highlight-color:transparent}[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:not([aria-label],[aria-labelledby]){color:var(--slotted-text-field-action-label-color, var(--slotted-text, CanvasText));font-weight:var(--slotted-font-weight-medium, 500);padding-inline:var(--slotted-space-3, .375rem)}[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:not([aria-label],[aria-labelledby]){align-content:center;align-items:baseline;display:inline-grid;grid-auto-flow:column;justify-content:center}[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:not([aria-label],[aria-labelledby])>[data-ui=icon]{margin-block-start:calc((1cap + 1ex) / 4 - var(--_icon-size) / 2);translate:0 calc(var(--_icon-size) / 2 - (1cap + 1ex) / 4)}[data-ui=text-field]>:is([data-part=start],[data-part=end]):has(>[data-part=action]){gap:0}[data-ui=text-field]>:is([data-part=clear],[data-part=copy],[data-part=reveal]):after,[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:after,[data-ui=text-field]>:is([data-part=clear],[data-part=copy],[data-part=reveal]):after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}[data-ui=text-field]>:is([data-part=clear],[data-part=copy]):has(~:is([data-part=copy],[data-part=reveal]):not([hidden])):after,[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:has(+[data-part=action]):after{inset-inline-end:0}[data-ui=text-field]>:is([data-part=clear],[data-part=copy]):not([hidden])~:is([data-part=copy],[data-part=reveal]):after,[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]+[data-part=action]:after{inset-inline-start:0}}[data-ui=text-field]>:is([data-part=clear],[data-part=copy],[data-part=reveal]):hover:not(:disabled,[data-complete]),[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:hover:not(:disabled,[aria-expanded=true]){background-color:var( --slotted-text-field-action-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=text-field]>:is([data-part=clear],[data-part=copy],[data-part=reveal]):active:not(:disabled),[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:active:not(:disabled){background-color:var( --slotted-text-field-action-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action][aria-expanded=true]{background-color:var( --slotted-text-field-action-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:disabled,[data-ui=text-field][data-part=root][data-disabled]>:is([data-part=start],[data-part=end])>[data-part=action]{color:var(--slotted-disabled-foreground);cursor:not-allowed}[data-ui=text-field]>:is([data-part=clear],[data-part=copy],[data-part=reveal]):focus-visible,[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=text-field]>[data-part=copy][data-complete]{color:var( --slotted-text-field-copy-complete-color, var(--slotted-tone-success-text, CanvasText) )}[data-ui=text-field]>:is([data-part=copy],[data-part=reveal])>[data-ui=icon]{transition:opacity var(--slotted-duration-short) var(--slotted-easing-enter),scale var(--slotted-duration-short) var(--slotted-easing-enter)}@starting-style{[data-ui=text-field]>:is([data-part=copy],[data-part=reveal])>[data-ui=icon]{opacity:0;scale:.8}}[data-ui=text-field]>:is([data-part=busy],[data-part=caps-lock],[data-part=clear],[data-part=copy]){transition:var(--_action-transition),opacity var(--slotted-duration-short) var(--slotted-easing-enter),scale var(--slotted-duration-short) var(--slotted-easing-enter),display var(--slotted-duration-short) allow-discrete}[data-ui=text-field]>:is([data-part=busy],[data-part=caps-lock],[data-part=clear],[data-part=copy])[hidden]{display:none;opacity:0;scale:.8;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit),scale var(--slotted-duration-short) var(--slotted-easing-exit),display var(--slotted-duration-short) allow-discrete}@starting-style{[data-ui=text-field]>:is([data-part=busy],[data-part=caps-lock],[data-part=clear],[data-part=copy]){opacity:0;scale:.8}}[data-ui=text-field]>[data-part=busy]{--slotted-spinner-size: var(--_icon-size);color:var(--slotted-text-field-adornment-color, var(--slotted-text-muted, GrayText));flex:0 0 auto}[data-ui=text-field]>[data-part=caps-lock]{--slotted-icon-size: var(--_icon-size);align-items:center;color:var(--slotted-text-field-caps-lock-color, var(--slotted-tone-warning-text, CanvasText));display:inline-flex;flex:0 0 auto}[data-ui=text-field][data-part=root]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){border-color:var(--slotted-text-field-hover-border-color, var(--slotted-tone-accent-border))}[data-ui=text-field][data-part=root][data-variant=subtle]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){background-color:var( --slotted-text-field-subtle-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=text-field][data-part=root][data-variant=plain]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){background-color:var( --slotted-text-field-plain-hover-background, var(--slotted-tone-secondary-subtle-hover) );border-color:transparent}[data-ui=text-field][data-part=root]:has(>[data-part=input]:focus-visible){box-shadow:var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight);outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=text-field][data-part=root][data-variant=plain]:has(>[data-part=input]:focus-visible){box-shadow:none;outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=text-field][data-part=root][data-invalid]{--slotted-focus-ring-color: var( --slotted-text-field-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) );--_invalid-edge-width: var( --slotted-text-field-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) );--_invalid-edge-color: var( --slotted-text-field-invalid-border-color, var(--slotted-tone-danger-border) );--_invalid-edge: inset 0 0 0 var(--_invalid-edge-width) var(--_invalid-edge-color);border-color:var(--slotted-text-field-invalid-border-color, var(--slotted-tone-danger-border));box-shadow:var(--_invalid-edge)}[data-ui=text-field][data-part=root][data-invalid]:has(>[data-part=input]:focus-visible){box-shadow:var(--_invalid-edge),var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight)}[data-ui=text-field][data-part=root][data-variant=plain][data-invalid]:has(>[data-part=input]:focus-visible){box-shadow:inset 0 0 0 calc(var(--slotted-focus-ring-offset, 2px) - var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)) var(--_invalid-edge-color)}@media(forced-colors:active){[data-ui=text-field][data-part=root][data-invalid]{outline:var(--_invalid-edge-width) solid CanvasText;outline-offset:calc(-1 * (var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)))}[data-ui=text-field][data-part=root][data-invalid]:has(>[data-part=input]:focus-visible){outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=text-field][data-part=root][data-variant=plain][data-invalid]:has(>[data-part=input]:focus-visible){outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * (var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)))}}[data-ui=text-field][data-part=root][data-readonly]{background-color:var( --slotted-text-field-readonly-background, var(--slotted-tone-secondary-subtle-hover) );cursor:default}[data-ui=text-field][data-part=root][data-disabled],[data-ui=text-field][data-part=root]:has(>[data-part=input]:disabled){background-color:var( --slotted-text-field-disabled-background, var(--slotted-disabled-background) );border-color:var(--slotted-text-field-disabled-border-color, var(--slotted-disabled-border));box-shadow:none;color:var(--slotted-text-field-disabled-color, var(--slotted-disabled-foreground));cursor:not-allowed}[data-ui=text-field][data-part=root][data-disabled]>[data-part=start],[data-ui=text-field][data-part=root][data-disabled]>[data-part=end]{color:var(--slotted-disabled-foreground)}}\n"], dependencies: [{ kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    <ng-content select="[slTextFieldEnd]" />`, isInline: true, styles: ["@layer slotted.components{[data-ui-text-field][data-part-root]{--_font-size: var(--slotted-control-font-size-md, 13px);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-floor: var(--slotted-text-field-icon-size-min, 14px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px));--_inner-size: var(--slotted-control-inner-size-md, 24px);--_action-size: var( --slotted-text-field-action-size, min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), var(--_inner-size)) );--_inset: max( 0px, calc( (var(--_height) - 2 * var(--slotted-control-border-width, 1px) - var(--_action-size)) / 2 ) );--_action-radius: max( var(--slotted-radius-xs, 2px), calc(var(--slotted-text-field-radius, var(--slotted-control-radius, 4px)) - var(--_inset)) );--_action-transition: background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing), color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);align-items:center;background-color:var(--slotted-text-field-background, var(--slotted-control-surface, Field));border:var(--slotted-control-border-width, 1px) solid var(--slotted-text-field-border-color, var(--slotted-control-border-color, ButtonBorder));border-radius:var(--slotted-text-field-radius, var(--slotted-control-radius, 4px));box-shadow:var(--slotted-text-field-shadow, var(--slotted-control-shadow, none));box-sizing:border-box;color:var(--slotted-text-field-color, var(--slotted-text, CanvasText));display:flex;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--_font-size);gap:var(--_gap);inline-size:100%;min-inline-size:0;min-block-size:var(--_height);padding-inline:var(--_padding-inline);transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui-text-field][data-part-root]:has(>:is([data-part-clear],[data-part-copy],[data-part-reveal]):not([hidden]):last-child,>[data-part-end]:last-child>[data-part-action]:last-child){padding-inline-end:var(--_inset)}[data-ui-text-field][data-part-root]:has(>[data-part-start]:first-child>[data-part-action]:first-child){padding-inline-start:var(--_inset)}[data-ui-text-field]>[data-part-input]{background-color:transparent;align-self:stretch;margin-block:calc(var(--slotted-control-border-width, 1px) * -1);border:0;color:inherit;flex:1 1 auto;font:inherit;outline:none;padding:0;min-inline-size:0;text-align:inherit;text-overflow:ellipsis}[data-ui-text-field]>[data-part-input]::placeholder{color:var(--slotted-text-field-placeholder-color, var(--slotted-text-muted, GrayText));text-overflow:ellipsis}[data-ui-text-field]>[data-part-input]::-webkit-search-cancel-button,[data-ui-text-field]>[data-part-input]::-webkit-search-decoration{appearance:none}[data-ui-text-field][data-part-root]:has(>[data-part-input]:autofill){background-color:var( --slotted-text-field-autofill-background, var(--slotted-tone-accent-surface) )}[data-ui-text-field]>[data-part-input]:autofill{box-shadow:inset 0 0 0 100px var(--slotted-text-field-autofill-background, var(--slotted-tone-accent-surface));clip-path:inset(var(--slotted-control-border-width, 1px) 0);-webkit-text-fill-color:var(--slotted-text-field-color, var(--slotted-text, CanvasText))}[data-ui-text-field][data-part-root][data-size=sm]{--_font-size: var(--slotted-control-font-size-sm, 12px);--_height: var(--slotted-control-height-sm, 30px);--_padding-inline: var(--slotted-control-padding-inline-sm, 10px);--_gap: var(--slotted-control-gap-sm, 6px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-sm, 14px));--_inner-size: var(--slotted-control-inner-size-sm, 22px)}[data-ui-text-field][data-part-root][data-size=md]{--_font-size: var(--slotted-control-font-size-md, 13px);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px));--_inner-size: var(--slotted-control-inner-size-md, 24px)}[data-ui-text-field][data-part-root][data-size=lg]{--_font-size: var(--slotted-control-font-size-lg, 14px);--_height: var(--slotted-control-height-lg, 38px);--_padding-inline: var(--slotted-control-padding-inline-lg, 16px);--_gap: var(--slotted-control-gap-lg, 8px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-lg, 18px));--_inner-size: var(--slotted-control-inner-size-lg, 28px)}[data-ui-button-group]>[data-ui-text-field][data-part-root]{flex:1 1 0;inline-size:auto}[data-ui-text-field][data-part-root][data-variant=subtle]{background-color:var( --slotted-text-field-subtle-background, var(--slotted-surface-sunken, Canvas) );border-color:var( --slotted-text-field-subtle-border-color, var(--slotted-border-subtle, ButtonBorder) )}[data-ui-text-field][data-part-root][data-variant=plain]{background-color:transparent;border-color:transparent;border-radius:var(--slotted-radius-none, 0px);box-shadow:none}@media(forced-colors:active){[data-ui-text-field][data-part-root][data-variant=plain]{border-color:ButtonBorder}}[data-ui-text-field][data-part-root][data-mono]{font-family:var(--slotted-font-family-mono, monospace);font-variant-numeric:tabular-nums}[data-ui-text-field]>[data-part-start],[data-ui-text-field]>[data-part-end]{align-items:center;color:var(--slotted-text-field-adornment-color, var(--slotted-text-muted, GrayText));display:inline-flex;flex:0 0 auto;gap:var(--slotted-space-2, .25rem);line-height:1;unicode-bidi:plaintext}[data-ui-text-field]>[data-part-start],[data-ui-text-field]>[data-part-end]{--slotted-icon-size: var(--_icon-size);--slotted-control-inner-size: var(--_inner-size)}[data-ui-text-field]>[data-part-start]>svg,[data-ui-text-field]>[data-part-end]>svg{block-size:var(--_icon-size);inline-size:var(--_icon-size)}[data-ui-text-field]>[data-part-start]:not(:has(svg,img,[data-ui-icon],[data-part-action])),[data-ui-text-field]>[data-part-end]:not(:has(svg,img,[data-ui-icon],[data-part-action])){padding-inline:calc(var(--_icon-size) / 8)}[data-ui-text-field]>:is([data-part-clear],[data-part-copy],[data-part-reveal]),[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action]{--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;block-size:var(--_action-size);border:0;border-radius:var(--_action-radius);box-sizing:border-box;color:var(--slotted-text-field-action-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;flex:0 0 auto;font:inherit;gap:var(--slotted-space-2, .25rem);justify-content:center;line-height:1;min-inline-size:var(--_action-size);padding:0;position:relative;touch-action:manipulation;transition:var(--_action-transition);unicode-bidi:plaintext;white-space:nowrap;-webkit-tap-highlight-color:transparent}[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action]:not([aria-label],[aria-labelledby]){color:var(--slotted-text-field-action-label-color, var(--slotted-text, CanvasText));font-weight:var(--slotted-font-weight-medium, 500);padding-inline:var(--slotted-space-3, .375rem)}[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action]:not([aria-label],[aria-labelledby]){align-content:center;align-items:baseline;display:inline-grid;grid-auto-flow:column;justify-content:center}[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action]:not([aria-label],[aria-labelledby])>[data-ui-icon]{margin-block-start:calc((1cap + 1ex) / 4 - var(--_icon-size) / 2);translate:0 calc(var(--_icon-size) / 2 - (1cap + 1ex) / 4)}[data-ui-text-field]>:is([data-part-start],[data-part-end]):has(>[data-part-action]){gap:0}[data-ui-text-field]>:is([data-part-clear],[data-part-copy],[data-part-reveal]):after,[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action]:after,[data-ui-text-field]>:is([data-part-clear],[data-part-copy],[data-part-reveal]):after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}[data-ui-text-field]>:is([data-part-clear],[data-part-copy]):has(~:is([data-part-copy],[data-part-reveal]):not([hidden])):after,[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action]:has(+[data-part-action]):after{inset-inline-end:0}[data-ui-text-field]>:is([data-part-clear],[data-part-copy]):not([hidden])~:is([data-part-copy],[data-part-reveal]):after,[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action]+[data-part-action]:after{inset-inline-start:0}}[data-ui-text-field]>:is([data-part-clear],[data-part-copy],[data-part-reveal]):hover:not(:disabled,[data-complete]),[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action]:hover:not(:disabled,[aria-expanded=true]){background-color:var( --slotted-text-field-action-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui-text-field]>:is([data-part-clear],[data-part-copy],[data-part-reveal]):active:not(:disabled),[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action]:active:not(:disabled){background-color:var( --slotted-text-field-action-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action][aria-expanded=true]{background-color:var( --slotted-text-field-action-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action]:disabled,[data-ui-text-field][data-part-root][data-disabled]>:is([data-part-start],[data-part-end])>[data-part-action]{color:var(--slotted-disabled-foreground);cursor:not-allowed}[data-ui-text-field]>:is([data-part-clear],[data-part-copy],[data-part-reveal]):focus-visible,[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui-text-field]>[data-part-copy][data-complete]{color:var( --slotted-text-field-copy-complete-color, var(--slotted-tone-success-text, CanvasText) )}[data-ui-text-field]>:is([data-part-copy],[data-part-reveal])>[data-ui-icon]{transition:opacity var(--slotted-duration-short) var(--slotted-easing-enter),scale var(--slotted-duration-short) var(--slotted-easing-enter)}@starting-style{[data-ui-text-field]>:is([data-part-copy],[data-part-reveal])>[data-ui-icon]{opacity:0;scale:.8}}[data-ui-text-field]>:is([data-part-busy],[data-part-caps-lock],[data-part-clear],[data-part-copy]){transition:var(--_action-transition),opacity var(--slotted-duration-short) var(--slotted-easing-enter),scale var(--slotted-duration-short) var(--slotted-easing-enter),display var(--slotted-duration-short) allow-discrete}[data-ui-text-field]>:is([data-part-busy],[data-part-caps-lock],[data-part-clear],[data-part-copy])[hidden]{display:none;opacity:0;scale:.8;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit),scale var(--slotted-duration-short) var(--slotted-easing-exit),display var(--slotted-duration-short) allow-discrete}@starting-style{[data-ui-text-field]>:is([data-part-busy],[data-part-caps-lock],[data-part-clear],[data-part-copy]){opacity:0;scale:.8}}[data-ui-text-field]>[data-part-busy]{--slotted-spinner-size: var(--_icon-size);color:var(--slotted-text-field-adornment-color, var(--slotted-text-muted, GrayText));flex:0 0 auto}[data-ui-text-field]>[data-part-caps-lock]{--slotted-icon-size: var(--_icon-size);align-items:center;color:var(--slotted-text-field-caps-lock-color, var(--slotted-tone-warning-text, CanvasText));display:inline-flex;flex:0 0 auto}[data-ui-text-field][data-part-root]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){border-color:var(--slotted-text-field-hover-border-color, var(--slotted-tone-accent-border))}[data-ui-text-field][data-part-root][data-variant=subtle]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]):not(:has(>[data-part-input]:autofill)){background-color:var( --slotted-text-field-subtle-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui-text-field][data-part-root][data-variant=plain]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]):not(:has(>[data-part-input]:autofill)){background-color:var( --slotted-text-field-plain-hover-background, var(--slotted-tone-secondary-subtle-hover) );border-color:transparent}[data-ui-text-field][data-part-root]:has(>[data-part-input]:focus-visible){box-shadow:var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight);outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-control-focus-ring-offset, var(--slotted-focus-ring-offset, 2px))}[data-ui-text-field][data-part-root][data-variant=plain]:has(>[data-part-input]:focus-visible){box-shadow:none;outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui-text-field][data-part-root][data-invalid]{--slotted-focus-ring-color: var( --slotted-text-field-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) );--_invalid-edge-width: var( --slotted-text-field-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) );--_invalid-edge-color: var( --slotted-text-field-invalid-border-color, var(--slotted-tone-danger-border) );--_invalid-edge: inset 0 0 0 var(--_invalid-edge-width) var(--_invalid-edge-color);border-color:var(--slotted-text-field-invalid-border-color, var(--slotted-tone-danger-border));box-shadow:var(--_invalid-edge)}[data-ui-text-field][data-part-root][data-invalid]:has(>[data-part-input]:focus-visible){box-shadow:var(--_invalid-edge),var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight)}[data-ui-text-field][data-part-root][data-variant=plain][data-invalid]:has(>[data-part-input]:focus-visible){box-shadow:inset 0 0 0 calc(var(--slotted-focus-ring-offset, 2px) - var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)) var(--_invalid-edge-color)}@media(forced-colors:active){[data-ui-text-field][data-part-root][data-invalid]{outline:var(--_invalid-edge-width) solid CanvasText;outline-offset:calc(-1 * (var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)))}[data-ui-text-field][data-part-root][data-invalid]:has(>[data-part-input]:focus-visible){outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:var( --slotted-control-focus-ring-offset, var(--slotted-focus-ring-offset, 2px) )}[data-ui-text-field][data-part-root][data-variant=plain][data-invalid]:has(>[data-part-input]:focus-visible){outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * (var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)))}}[data-ui-text-field][data-part-root][data-readonly]{background-color:var( --slotted-text-field-readonly-background, var(--slotted-tone-secondary-subtle-hover) );cursor:default}[data-ui-text-field][data-part-root][data-disabled],[data-ui-text-field][data-part-root]:has(>[data-part-input]:disabled){background-color:var( --slotted-text-field-disabled-background, var(--slotted-disabled-background) );border-color:var(--slotted-text-field-disabled-border-color, var(--slotted-disabled-border));box-shadow:none;color:var(--slotted-text-field-disabled-color, var(--slotted-disabled-foreground));cursor:not-allowed}[data-ui-text-field][data-part-root][data-disabled]>[data-part-start],[data-ui-text-field][data-part-root][data-disabled]>[data-part-end]{color:var(--slotted-disabled-foreground)}}\n"], dependencies: [{ kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTextField, decorators: [{
             type: Component,
@@ -229,16 +245,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
          as their capability is on, and leave through hidden, so the stylesheet
          can take them out as well as bring them in. -->
     @if (loading() !== undefined) {
-      <span data-part="busy" data-ui="spinner" aria-hidden="true" [hidden]="!loading()"></span>
+      <span
+        data-part="busy"
+        data-part-busy=""
+        data-ui="spinner"
+        data-ui-spinner=""
+        aria-hidden="true"
+        [hidden]="!loading()"
+      ></span>
     }
     @if (control()?.password()) {
-      <span data-part="caps-lock" aria-hidden="true" [hidden]="!control()!.capsLock()">
+      <span
+        data-part="caps-lock"
+        data-part-caps-lock=""
+        aria-hidden="true"
+        [hidden]="!control()!.capsLock()"
+      >
         <span slIcon><svg slGlyph name="caps-lock"></svg></span>
       </span>
     }
     @if (clearable()) {
       <button
         data-part="clear"
+        data-part-clear=""
         type="button"
         [hidden]="!showClear()"
         [attr.aria-label]="t('clear')"
@@ -250,6 +279,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
     @if (copyable()) {
       <button
         data-part="copy"
+        data-part-copy=""
         type="button"
         [hidden]="!showCopy()"
         [attr.aria-label]="t('copy')"
@@ -267,6 +297,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
     @if (showReveal()) {
       <button
         data-part="reveal"
+        data-part-reveal=""
         type="button"
         [attr.aria-label]="t('reveal')"
         [attr.aria-pressed]="control()!.revealed()"
@@ -281,7 +312,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
     }
     <ng-content select="[slTextFieldEnd]" />`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         'data-ui': 'text-field',
+                        'data-ui-text-field': '',
                         'data-part': 'root',
+                        'data-part-root': '',
                         '[attr.data-size]': 'resolvedSize()',
                         '[attr.data-variant]': 'resolvedVariant()',
                         '[attr.data-mono]': "resolvedMono() ? '' : null",
@@ -289,7 +322,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                         '[attr.data-invalid]': "control()?.resolvedInvalid() === true ? '' : null",
                         '[attr.data-readonly]': "control()?.resolvedReadOnly() === true ? '' : null",
                         '[attr.data-loading]': "loading() === true ? '' : null",
-                    }, styles: ["@layer slotted.components{[data-ui=text-field][data-part=root]{--_font-size: var(--slotted-control-font-size-md, 13px);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-floor: var(--slotted-text-field-icon-size-min, 14px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px));--_inner-size: var(--slotted-control-inner-size-md, 24px);--_action-size: var( --slotted-text-field-action-size, min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), var(--_inner-size)) );--_inset: max( 0px, calc( (var(--_height) - 2 * var(--slotted-control-border-width, 1px) - var(--_action-size)) / 2 ) );--_action-radius: max( var(--slotted-radius-xs, 2px), calc(var(--slotted-text-field-radius, var(--slotted-control-radius, 4px)) - var(--_inset)) );--_action-transition: background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing), color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);align-items:center;background-color:var(--slotted-text-field-background, var(--slotted-control-surface, Field));border:var(--slotted-control-border-width, 1px) solid var(--slotted-text-field-border-color, var(--slotted-control-border-color, ButtonBorder));border-radius:var(--slotted-text-field-radius, var(--slotted-control-radius, 4px));box-shadow:var(--slotted-text-field-shadow, var(--slotted-control-shadow, none));box-sizing:border-box;color:var(--slotted-text-field-color, var(--slotted-text, CanvasText));display:flex;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--_font-size);gap:var(--_gap);inline-size:100%;min-inline-size:0;min-block-size:var(--_height);padding-inline:var(--_padding-inline);transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui=text-field][data-part=root]:has(>:is([data-part=clear],[data-part=copy],[data-part=reveal]):not([hidden]):last-child,>[data-part=end]:last-child>[data-part=action]:last-child){padding-inline-end:var(--_inset)}[data-ui=text-field][data-part=root]:has(>[data-part=start]:first-child>[data-part=action]:first-child){padding-inline-start:var(--_inset)}[data-ui=text-field]>[data-part=input]{background-color:transparent;align-self:stretch;margin-block:calc(var(--slotted-control-border-width, 1px) * -1);border:0;color:inherit;flex:1 1 auto;font:inherit;outline:none;padding:0;min-inline-size:0;text-align:inherit;text-overflow:ellipsis}[data-ui=text-field]>[data-part=input]::placeholder{color:var(--slotted-text-field-placeholder-color, var(--slotted-text-muted, GrayText));text-overflow:ellipsis}[data-ui=text-field]>[data-part=input]::-webkit-search-cancel-button,[data-ui=text-field]>[data-part=input]::-webkit-search-decoration{appearance:none}[data-ui=text-field]>[data-part=input]:autofill{box-shadow:inset 0 0 0 100px var(--slotted-text-field-autofill-background, var(--slotted-tone-accent-surface));-webkit-text-fill-color:var(--slotted-text-field-color, var(--slotted-text, CanvasText))}[data-ui=text-field][data-part=root][data-size=sm]{--_font-size: var(--slotted-control-font-size-sm, 12px);--_height: var(--slotted-control-height-sm, 30px);--_padding-inline: var(--slotted-control-padding-inline-sm, 10px);--_gap: var(--slotted-control-gap-sm, 6px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-sm, 14px));--_inner-size: var(--slotted-control-inner-size-sm, 22px)}[data-ui=text-field][data-part=root][data-size=md]{--_font-size: var(--slotted-control-font-size-md, 13px);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px));--_inner-size: var(--slotted-control-inner-size-md, 24px)}[data-ui=text-field][data-part=root][data-size=lg]{--_font-size: var(--slotted-control-font-size-lg, 14px);--_height: var(--slotted-control-height-lg, 38px);--_padding-inline: var(--slotted-control-padding-inline-lg, 16px);--_gap: var(--slotted-control-gap-lg, 8px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-lg, 18px));--_inner-size: var(--slotted-control-inner-size-lg, 28px)}[data-ui=button-group]>[data-ui=text-field][data-part=root]{flex:1 1 0;inline-size:auto}[data-ui=text-field][data-part=root][data-variant=subtle]{background-color:var( --slotted-text-field-subtle-background, var(--slotted-surface-sunken, Canvas) );border-color:var( --slotted-text-field-subtle-border-color, var(--slotted-border-subtle, ButtonBorder) )}[data-ui=text-field][data-part=root][data-variant=plain]{background-color:transparent;border-color:transparent;border-radius:var(--slotted-radius-none, 0px);box-shadow:none}@media(forced-colors:active){[data-ui=text-field][data-part=root][data-variant=plain]{border-color:ButtonBorder}}[data-ui=text-field][data-part=root][data-mono]{font-family:var(--slotted-font-family-mono, monospace);font-variant-numeric:tabular-nums}[data-ui=text-field]>[data-part=start],[data-ui=text-field]>[data-part=end]{align-items:center;color:var(--slotted-text-field-adornment-color, var(--slotted-text-muted, GrayText));display:inline-flex;flex:0 0 auto;gap:var(--slotted-space-2, .25rem);line-height:1;unicode-bidi:plaintext}[data-ui=text-field]>[data-part=start],[data-ui=text-field]>[data-part=end]{--slotted-icon-size: var(--_icon-size);--slotted-control-inner-size: var(--_inner-size)}[data-ui=text-field]>[data-part=start]>svg,[data-ui=text-field]>[data-part=end]>svg{block-size:var(--_icon-size);inline-size:var(--_icon-size)}[data-ui=text-field]>[data-part=start]:not(:has(svg,img,[data-ui=icon],[data-part=action])),[data-ui=text-field]>[data-part=end]:not(:has(svg,img,[data-ui=icon],[data-part=action])){padding-inline:calc(var(--_icon-size) / 8)}[data-ui=text-field]>:is([data-part=clear],[data-part=copy],[data-part=reveal]),[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]{--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;block-size:var(--_action-size);border:0;border-radius:var(--_action-radius);box-sizing:border-box;color:var(--slotted-text-field-action-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;flex:0 0 auto;font:inherit;gap:var(--slotted-space-2, .25rem);justify-content:center;line-height:1;min-inline-size:var(--_action-size);padding:0;position:relative;touch-action:manipulation;transition:var(--_action-transition);unicode-bidi:plaintext;white-space:nowrap;-webkit-tap-highlight-color:transparent}[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:not([aria-label],[aria-labelledby]){color:var(--slotted-text-field-action-label-color, var(--slotted-text, CanvasText));font-weight:var(--slotted-font-weight-medium, 500);padding-inline:var(--slotted-space-3, .375rem)}[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:not([aria-label],[aria-labelledby]){align-content:center;align-items:baseline;display:inline-grid;grid-auto-flow:column;justify-content:center}[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:not([aria-label],[aria-labelledby])>[data-ui=icon]{margin-block-start:calc((1cap + 1ex) / 4 - var(--_icon-size) / 2);translate:0 calc(var(--_icon-size) / 2 - (1cap + 1ex) / 4)}[data-ui=text-field]>:is([data-part=start],[data-part=end]):has(>[data-part=action]){gap:0}[data-ui=text-field]>:is([data-part=clear],[data-part=copy],[data-part=reveal]):after,[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:after,[data-ui=text-field]>:is([data-part=clear],[data-part=copy],[data-part=reveal]):after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}[data-ui=text-field]>:is([data-part=clear],[data-part=copy]):has(~:is([data-part=copy],[data-part=reveal]):not([hidden])):after,[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:has(+[data-part=action]):after{inset-inline-end:0}[data-ui=text-field]>:is([data-part=clear],[data-part=copy]):not([hidden])~:is([data-part=copy],[data-part=reveal]):after,[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]+[data-part=action]:after{inset-inline-start:0}}[data-ui=text-field]>:is([data-part=clear],[data-part=copy],[data-part=reveal]):hover:not(:disabled,[data-complete]),[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:hover:not(:disabled,[aria-expanded=true]){background-color:var( --slotted-text-field-action-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=text-field]>:is([data-part=clear],[data-part=copy],[data-part=reveal]):active:not(:disabled),[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:active:not(:disabled){background-color:var( --slotted-text-field-action-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action][aria-expanded=true]{background-color:var( --slotted-text-field-action-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:disabled,[data-ui=text-field][data-part=root][data-disabled]>:is([data-part=start],[data-part=end])>[data-part=action]{color:var(--slotted-disabled-foreground);cursor:not-allowed}[data-ui=text-field]>:is([data-part=clear],[data-part=copy],[data-part=reveal]):focus-visible,[data-ui=text-field]>:is([data-part=start],[data-part=end])>[data-part=action]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=text-field]>[data-part=copy][data-complete]{color:var( --slotted-text-field-copy-complete-color, var(--slotted-tone-success-text, CanvasText) )}[data-ui=text-field]>:is([data-part=copy],[data-part=reveal])>[data-ui=icon]{transition:opacity var(--slotted-duration-short) var(--slotted-easing-enter),scale var(--slotted-duration-short) var(--slotted-easing-enter)}@starting-style{[data-ui=text-field]>:is([data-part=copy],[data-part=reveal])>[data-ui=icon]{opacity:0;scale:.8}}[data-ui=text-field]>:is([data-part=busy],[data-part=caps-lock],[data-part=clear],[data-part=copy]){transition:var(--_action-transition),opacity var(--slotted-duration-short) var(--slotted-easing-enter),scale var(--slotted-duration-short) var(--slotted-easing-enter),display var(--slotted-duration-short) allow-discrete}[data-ui=text-field]>:is([data-part=busy],[data-part=caps-lock],[data-part=clear],[data-part=copy])[hidden]{display:none;opacity:0;scale:.8;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit),scale var(--slotted-duration-short) var(--slotted-easing-exit),display var(--slotted-duration-short) allow-discrete}@starting-style{[data-ui=text-field]>:is([data-part=busy],[data-part=caps-lock],[data-part=clear],[data-part=copy]){opacity:0;scale:.8}}[data-ui=text-field]>[data-part=busy]{--slotted-spinner-size: var(--_icon-size);color:var(--slotted-text-field-adornment-color, var(--slotted-text-muted, GrayText));flex:0 0 auto}[data-ui=text-field]>[data-part=caps-lock]{--slotted-icon-size: var(--_icon-size);align-items:center;color:var(--slotted-text-field-caps-lock-color, var(--slotted-tone-warning-text, CanvasText));display:inline-flex;flex:0 0 auto}[data-ui=text-field][data-part=root]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){border-color:var(--slotted-text-field-hover-border-color, var(--slotted-tone-accent-border))}[data-ui=text-field][data-part=root][data-variant=subtle]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){background-color:var( --slotted-text-field-subtle-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui=text-field][data-part=root][data-variant=plain]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){background-color:var( --slotted-text-field-plain-hover-background, var(--slotted-tone-secondary-subtle-hover) );border-color:transparent}[data-ui=text-field][data-part=root]:has(>[data-part=input]:focus-visible){box-shadow:var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight);outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=text-field][data-part=root][data-variant=plain]:has(>[data-part=input]:focus-visible){box-shadow:none;outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=text-field][data-part=root][data-invalid]{--slotted-focus-ring-color: var( --slotted-text-field-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) );--_invalid-edge-width: var( --slotted-text-field-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) );--_invalid-edge-color: var( --slotted-text-field-invalid-border-color, var(--slotted-tone-danger-border) );--_invalid-edge: inset 0 0 0 var(--_invalid-edge-width) var(--_invalid-edge-color);border-color:var(--slotted-text-field-invalid-border-color, var(--slotted-tone-danger-border));box-shadow:var(--_invalid-edge)}[data-ui=text-field][data-part=root][data-invalid]:has(>[data-part=input]:focus-visible){box-shadow:var(--_invalid-edge),var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight)}[data-ui=text-field][data-part=root][data-variant=plain][data-invalid]:has(>[data-part=input]:focus-visible){box-shadow:inset 0 0 0 calc(var(--slotted-focus-ring-offset, 2px) - var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)) var(--_invalid-edge-color)}@media(forced-colors:active){[data-ui=text-field][data-part=root][data-invalid]{outline:var(--_invalid-edge-width) solid CanvasText;outline-offset:calc(-1 * (var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)))}[data-ui=text-field][data-part=root][data-invalid]:has(>[data-part=input]:focus-visible){outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=text-field][data-part=root][data-variant=plain][data-invalid]:has(>[data-part=input]:focus-visible){outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * (var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)))}}[data-ui=text-field][data-part=root][data-readonly]{background-color:var( --slotted-text-field-readonly-background, var(--slotted-tone-secondary-subtle-hover) );cursor:default}[data-ui=text-field][data-part=root][data-disabled],[data-ui=text-field][data-part=root]:has(>[data-part=input]:disabled){background-color:var( --slotted-text-field-disabled-background, var(--slotted-disabled-background) );border-color:var(--slotted-text-field-disabled-border-color, var(--slotted-disabled-border));box-shadow:none;color:var(--slotted-text-field-disabled-color, var(--slotted-disabled-foreground));cursor:not-allowed}[data-ui=text-field][data-part=root][data-disabled]>[data-part=start],[data-ui=text-field][data-part=root][data-disabled]>[data-part=end]{color:var(--slotted-disabled-foreground)}}\n"] }]
+                    }, styles: ["@layer slotted.components{[data-ui-text-field][data-part-root]{--_font-size: var(--slotted-control-font-size-md, 13px);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-floor: var(--slotted-text-field-icon-size-min, 14px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px));--_inner-size: var(--slotted-control-inner-size-md, 24px);--_action-size: var( --slotted-text-field-action-size, min(calc(var(--_icon-size) + 2 * var(--slotted-space-2, .25rem)), var(--_inner-size)) );--_inset: max( 0px, calc( (var(--_height) - 2 * var(--slotted-control-border-width, 1px) - var(--_action-size)) / 2 ) );--_action-radius: max( var(--slotted-radius-xs, 2px), calc(var(--slotted-text-field-radius, var(--slotted-control-radius, 4px)) - var(--_inset)) );--_action-transition: background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing), color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);align-items:center;background-color:var(--slotted-text-field-background, var(--slotted-control-surface, Field));border:var(--slotted-control-border-width, 1px) solid var(--slotted-text-field-border-color, var(--slotted-control-border-color, ButtonBorder));border-radius:var(--slotted-text-field-radius, var(--slotted-control-radius, 4px));box-shadow:var(--slotted-text-field-shadow, var(--slotted-control-shadow, none));box-sizing:border-box;color:var(--slotted-text-field-color, var(--slotted-text, CanvasText));display:flex;font-family:var(--slotted-control-font-family, system-ui, sans-serif);font-size:var(--_font-size);gap:var(--_gap);inline-size:100%;min-inline-size:0;min-block-size:var(--_height);padding-inline:var(--_padding-inline);transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),box-shadow var(--slotted-control-transition-duration) var(--slotted-control-transition-easing)}[data-ui-text-field][data-part-root]:has(>:is([data-part-clear],[data-part-copy],[data-part-reveal]):not([hidden]):last-child,>[data-part-end]:last-child>[data-part-action]:last-child){padding-inline-end:var(--_inset)}[data-ui-text-field][data-part-root]:has(>[data-part-start]:first-child>[data-part-action]:first-child){padding-inline-start:var(--_inset)}[data-ui-text-field]>[data-part-input]{background-color:transparent;align-self:stretch;margin-block:calc(var(--slotted-control-border-width, 1px) * -1);border:0;color:inherit;flex:1 1 auto;font:inherit;outline:none;padding:0;min-inline-size:0;text-align:inherit;text-overflow:ellipsis}[data-ui-text-field]>[data-part-input]::placeholder{color:var(--slotted-text-field-placeholder-color, var(--slotted-text-muted, GrayText));text-overflow:ellipsis}[data-ui-text-field]>[data-part-input]::-webkit-search-cancel-button,[data-ui-text-field]>[data-part-input]::-webkit-search-decoration{appearance:none}[data-ui-text-field][data-part-root]:has(>[data-part-input]:autofill){background-color:var( --slotted-text-field-autofill-background, var(--slotted-tone-accent-surface) )}[data-ui-text-field]>[data-part-input]:autofill{box-shadow:inset 0 0 0 100px var(--slotted-text-field-autofill-background, var(--slotted-tone-accent-surface));clip-path:inset(var(--slotted-control-border-width, 1px) 0);-webkit-text-fill-color:var(--slotted-text-field-color, var(--slotted-text, CanvasText))}[data-ui-text-field][data-part-root][data-size=sm]{--_font-size: var(--slotted-control-font-size-sm, 12px);--_height: var(--slotted-control-height-sm, 30px);--_padding-inline: var(--slotted-control-padding-inline-sm, 10px);--_gap: var(--slotted-control-gap-sm, 6px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-sm, 14px));--_inner-size: var(--slotted-control-inner-size-sm, 22px)}[data-ui-text-field][data-part-root][data-size=md]{--_font-size: var(--slotted-control-font-size-md, 13px);--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-md, 16px));--_inner-size: var(--slotted-control-inner-size-md, 24px)}[data-ui-text-field][data-part-root][data-size=lg]{--_font-size: var(--slotted-control-font-size-lg, 14px);--_height: var(--slotted-control-height-lg, 38px);--_padding-inline: var(--slotted-control-padding-inline-lg, 16px);--_gap: var(--slotted-control-gap-lg, 8px);--_icon-size: max(var(--_icon-floor), var(--slotted-control-icon-size-lg, 18px));--_inner-size: var(--slotted-control-inner-size-lg, 28px)}[data-ui-button-group]>[data-ui-text-field][data-part-root]{flex:1 1 0;inline-size:auto}[data-ui-text-field][data-part-root][data-variant=subtle]{background-color:var( --slotted-text-field-subtle-background, var(--slotted-surface-sunken, Canvas) );border-color:var( --slotted-text-field-subtle-border-color, var(--slotted-border-subtle, ButtonBorder) )}[data-ui-text-field][data-part-root][data-variant=plain]{background-color:transparent;border-color:transparent;border-radius:var(--slotted-radius-none, 0px);box-shadow:none}@media(forced-colors:active){[data-ui-text-field][data-part-root][data-variant=plain]{border-color:ButtonBorder}}[data-ui-text-field][data-part-root][data-mono]{font-family:var(--slotted-font-family-mono, monospace);font-variant-numeric:tabular-nums}[data-ui-text-field]>[data-part-start],[data-ui-text-field]>[data-part-end]{align-items:center;color:var(--slotted-text-field-adornment-color, var(--slotted-text-muted, GrayText));display:inline-flex;flex:0 0 auto;gap:var(--slotted-space-2, .25rem);line-height:1;unicode-bidi:plaintext}[data-ui-text-field]>[data-part-start],[data-ui-text-field]>[data-part-end]{--slotted-icon-size: var(--_icon-size);--slotted-control-inner-size: var(--_inner-size)}[data-ui-text-field]>[data-part-start]>svg,[data-ui-text-field]>[data-part-end]>svg{block-size:var(--_icon-size);inline-size:var(--_icon-size)}[data-ui-text-field]>[data-part-start]:not(:has(svg,img,[data-ui-icon],[data-part-action])),[data-ui-text-field]>[data-part-end]:not(:has(svg,img,[data-ui-icon],[data-part-action])){padding-inline:calc(var(--_icon-size) / 8)}[data-ui-text-field]>:is([data-part-clear],[data-part-copy],[data-part-reveal]),[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action]{--slotted-icon-size: var(--_icon-size);align-items:center;appearance:none;background-color:transparent;block-size:var(--_action-size);border:0;border-radius:var(--_action-radius);box-sizing:border-box;color:var(--slotted-text-field-action-color, var(--slotted-text-muted, GrayText));cursor:pointer;display:inline-flex;flex:0 0 auto;font:inherit;gap:var(--slotted-space-2, .25rem);justify-content:center;line-height:1;min-inline-size:var(--_action-size);padding:0;position:relative;touch-action:manipulation;transition:var(--_action-transition);unicode-bidi:plaintext;white-space:nowrap;-webkit-tap-highlight-color:transparent}[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action]:not([aria-label],[aria-labelledby]){color:var(--slotted-text-field-action-label-color, var(--slotted-text, CanvasText));font-weight:var(--slotted-font-weight-medium, 500);padding-inline:var(--slotted-space-3, .375rem)}[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action]:not([aria-label],[aria-labelledby]){align-content:center;align-items:baseline;display:inline-grid;grid-auto-flow:column;justify-content:center}[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action]:not([aria-label],[aria-labelledby])>[data-ui-icon]{margin-block-start:calc((1cap + 1ex) / 4 - var(--_icon-size) / 2);translate:0 calc(var(--_icon-size) / 2 - (1cap + 1ex) / 4)}[data-ui-text-field]>:is([data-part-start],[data-part-end]):has(>[data-part-action]){gap:0}[data-ui-text-field]>:is([data-part-clear],[data-part-copy],[data-part-reveal]):after,[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action]:after{content:\"\";inset:min(0px,calc((100% - var(--slotted-target-min, 24px)) / 2));position:absolute}@media(pointer:coarse){[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action]:after,[data-ui-text-field]>:is([data-part-clear],[data-part-copy],[data-part-reveal]):after{inset:min(0px,calc((100% - var(--slotted-target-comfortable, 44px)) / 2))}[data-ui-text-field]>:is([data-part-clear],[data-part-copy]):has(~:is([data-part-copy],[data-part-reveal]):not([hidden])):after,[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action]:has(+[data-part-action]):after{inset-inline-end:0}[data-ui-text-field]>:is([data-part-clear],[data-part-copy]):not([hidden])~:is([data-part-copy],[data-part-reveal]):after,[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action]+[data-part-action]:after{inset-inline-start:0}}[data-ui-text-field]>:is([data-part-clear],[data-part-copy],[data-part-reveal]):hover:not(:disabled,[data-complete]),[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action]:hover:not(:disabled,[aria-expanded=true]){background-color:var( --slotted-text-field-action-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui-text-field]>:is([data-part-clear],[data-part-copy],[data-part-reveal]):active:not(:disabled),[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action]:active:not(:disabled){background-color:var( --slotted-text-field-action-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action][aria-expanded=true]{background-color:var( --slotted-text-field-action-active-background, var(--slotted-tone-secondary-subtle-active) )}[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action]:disabled,[data-ui-text-field][data-part-root][data-disabled]>:is([data-part-start],[data-part-end])>[data-part-action]{color:var(--slotted-disabled-foreground);cursor:not-allowed}[data-ui-text-field]>:is([data-part-clear],[data-part-copy],[data-part-reveal]):focus-visible,[data-ui-text-field]>:is([data-part-start],[data-part-end])>[data-part-action]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui-text-field]>[data-part-copy][data-complete]{color:var( --slotted-text-field-copy-complete-color, var(--slotted-tone-success-text, CanvasText) )}[data-ui-text-field]>:is([data-part-copy],[data-part-reveal])>[data-ui-icon]{transition:opacity var(--slotted-duration-short) var(--slotted-easing-enter),scale var(--slotted-duration-short) var(--slotted-easing-enter)}@starting-style{[data-ui-text-field]>:is([data-part-copy],[data-part-reveal])>[data-ui-icon]{opacity:0;scale:.8}}[data-ui-text-field]>:is([data-part-busy],[data-part-caps-lock],[data-part-clear],[data-part-copy]){transition:var(--_action-transition),opacity var(--slotted-duration-short) var(--slotted-easing-enter),scale var(--slotted-duration-short) var(--slotted-easing-enter),display var(--slotted-duration-short) allow-discrete}[data-ui-text-field]>:is([data-part-busy],[data-part-caps-lock],[data-part-clear],[data-part-copy])[hidden]{display:none;opacity:0;scale:.8;transition:opacity var(--slotted-duration-short) var(--slotted-easing-exit),scale var(--slotted-duration-short) var(--slotted-easing-exit),display var(--slotted-duration-short) allow-discrete}@starting-style{[data-ui-text-field]>:is([data-part-busy],[data-part-caps-lock],[data-part-clear],[data-part-copy]){opacity:0;scale:.8}}[data-ui-text-field]>[data-part-busy]{--slotted-spinner-size: var(--_icon-size);color:var(--slotted-text-field-adornment-color, var(--slotted-text-muted, GrayText));flex:0 0 auto}[data-ui-text-field]>[data-part-caps-lock]{--slotted-icon-size: var(--_icon-size);align-items:center;color:var(--slotted-text-field-caps-lock-color, var(--slotted-tone-warning-text, CanvasText));display:inline-flex;flex:0 0 auto}[data-ui-text-field][data-part-root]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]){border-color:var(--slotted-text-field-hover-border-color, var(--slotted-tone-accent-border))}[data-ui-text-field][data-part-root][data-variant=subtle]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]):not(:has(>[data-part-input]:autofill)){background-color:var( --slotted-text-field-subtle-hover-background, var(--slotted-tone-secondary-subtle-hover) )}[data-ui-text-field][data-part-root][data-variant=plain]:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]):not(:has(>[data-part-input]:autofill)){background-color:var( --slotted-text-field-plain-hover-background, var(--slotted-tone-secondary-subtle-hover) );border-color:transparent}[data-ui-text-field][data-part-root]:has(>[data-part-input]:focus-visible){box-shadow:var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight);outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-control-focus-ring-offset, var(--slotted-focus-ring-offset, 2px))}[data-ui-text-field][data-part-root][data-variant=plain]:has(>[data-part-input]:focus-visible){box-shadow:none;outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui-text-field][data-part-root][data-invalid]{--slotted-focus-ring-color: var( --slotted-text-field-invalid-focus-ring-color, var(--slotted-focus-ring-color-invalid, Highlight) );--_invalid-edge-width: var( --slotted-text-field-invalid-edge-width, var(--slotted-control-invalid-edge-width, 1px) );--_invalid-edge-color: var( --slotted-text-field-invalid-border-color, var(--slotted-tone-danger-border) );--_invalid-edge: inset 0 0 0 var(--_invalid-edge-width) var(--_invalid-edge-color);border-color:var(--slotted-text-field-invalid-border-color, var(--slotted-tone-danger-border));box-shadow:var(--_invalid-edge)}[data-ui-text-field][data-part-root][data-invalid]:has(>[data-part-input]:focus-visible){box-shadow:var(--_invalid-edge),var(--slotted-control-shadow-focus-geometry, 0 1px 4px -1px) var(--slotted-focus-ring-color, Highlight)}[data-ui-text-field][data-part-root][data-variant=plain][data-invalid]:has(>[data-part-input]:focus-visible){box-shadow:inset 0 0 0 calc(var(--slotted-focus-ring-offset, 2px) - var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)) var(--_invalid-edge-color)}@media(forced-colors:active){[data-ui-text-field][data-part-root][data-invalid]{outline:var(--_invalid-edge-width) solid CanvasText;outline-offset:calc(-1 * (var(--slotted-control-border-width, 1px) + var(--_invalid-edge-width)))}[data-ui-text-field][data-part-root][data-invalid]:has(>[data-part-input]:focus-visible){outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:var( --slotted-control-focus-ring-offset, var(--slotted-focus-ring-offset, 2px) )}[data-ui-text-field][data-part-root][data-variant=plain][data-invalid]:has(>[data-part-input]:focus-visible){outline:calc(var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)) double var(--slotted-focus-ring-color, Highlight);outline-offset:calc(-1 * (var(--slotted-focus-ring-width, 2px) + var(--_invalid-edge-width)))}}[data-ui-text-field][data-part-root][data-readonly]{background-color:var( --slotted-text-field-readonly-background, var(--slotted-tone-secondary-subtle-hover) );cursor:default}[data-ui-text-field][data-part-root][data-disabled],[data-ui-text-field][data-part-root]:has(>[data-part-input]:disabled){background-color:var( --slotted-text-field-disabled-background, var(--slotted-disabled-background) );border-color:var(--slotted-text-field-disabled-border-color, var(--slotted-disabled-border));box-shadow:none;color:var(--slotted-text-field-disabled-color, var(--slotted-disabled-foreground));cursor:not-allowed}[data-ui-text-field][data-part-root][data-disabled]>[data-part-start],[data-ui-text-field][data-part-root][data-disabled]>[data-part-end]{color:var(--slotted-disabled-foreground)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], mono: [{ type: i0.Input, args: [{ isSignal: true, alias: "mono", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], revealable: [{ type: i0.Input, args: [{ isSignal: true, alias: "revealable", required: false }] }], copyable: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyable", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], valueCopy: [{ type: i0.Output, args: ["valueCopy"] }], control: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SlTextFieldControl), { ...{ descendants: true }, isSignal: true }] }] } });
 
 /**
@@ -565,7 +598,7 @@ class SlTextFieldInput {
         return !cancelled;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTextFieldInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlTextFieldInput, isStandalone: true, selector: "input[slTextFieldInput]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, showCount: { classPropertyName: "showCount", publicName: "showCount", isSignal: true, isRequired: false, transformFunction: null }, countMax: { classPropertyName: "countMax", publicName: "countMax", isSignal: true, isRequired: false, transformFunction: null }, revealedValue: { classPropertyName: "revealedValue", publicName: "revealed", isSignal: true, isRequired: false, transformFunction: null }, defaultRevealed: { classPropertyName: "defaultRevealed", publicName: "defaultRevealed", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", revealedChange: "revealedChange" }, host: { attributes: { "data-part": "input" }, listeners: { "input": "onInput($event)", "keydown": "readCapsLock($event)", "keyup": "readCapsLock($event)", "blur": "onBlur()" }, properties: { "attr.id": "controlId()", "attr.type": "resolvedType()", "attr.aria-describedby": "describedBy()", "attr.aria-invalid": "ariaInvalid()", "attr.aria-required": "ariaRequired()", "attr.disabled": "disabledAttribute()", "attr.readonly": "readonlyAttribute()", "attr.aria-busy": "textField.loading() === true ? 'true' : null" } }, providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlTextFieldInput, isStandalone: true, selector: "input[slTextFieldInput]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, showCount: { classPropertyName: "showCount", publicName: "showCount", isSignal: true, isRequired: false, transformFunction: null }, countMax: { classPropertyName: "countMax", publicName: "countMax", isSignal: true, isRequired: false, transformFunction: null }, revealedValue: { classPropertyName: "revealedValue", publicName: "revealed", isSignal: true, isRequired: false, transformFunction: null }, defaultRevealed: { classPropertyName: "defaultRevealed", publicName: "defaultRevealed", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", revealedChange: "revealedChange" }, host: { attributes: { "data-part": "input", "data-part-input": "" }, listeners: { "input": "onInput($event)", "keydown": "readCapsLock($event)", "keyup": "readCapsLock($event)", "blur": "onBlur()" }, properties: { "attr.id": "controlId()", "attr.type": "resolvedType()", "attr.aria-describedby": "describedBy()", "attr.aria-invalid": "ariaInvalid()", "attr.aria-required": "ariaRequired()", "attr.disabled": "disabledAttribute()", "attr.readonly": "readonlyAttribute()", "attr.aria-busy": "textField.loading() === true ? 'true' : null" } }, providers: [
             { provide: SlTextFieldControl, useExisting: forwardRef(() => SlTextFieldInput) },
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SlTextFieldInput), multi: true },
         ], exportAs: ["slTextFieldInput"], ngImport: i0 });
@@ -582,6 +615,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     ],
                     host: {
                         'data-part': 'input',
+                        'data-part-input': '',
                         '[attr.id]': 'controlId()',
                         '[attr.type]': 'resolvedType()',
                         '[attr.aria-describedby]': 'describedBy()',
@@ -611,7 +645,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
  */
 class SlTextFieldStart {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTextFieldStart, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTextFieldStart, isStandalone: true, selector: "[slTextFieldStart]", host: { attributes: { "data-part": "start" } }, exportAs: ["slTextFieldStart"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTextFieldStart, isStandalone: true, selector: "[slTextFieldStart]", host: { attributes: { "data-part": "start", "data-part-start": "" } }, exportAs: ["slTextFieldStart"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTextFieldStart, decorators: [{
             type: Directive,
@@ -619,13 +653,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     selector: '[slTextFieldStart]',
                     standalone: true,
                     exportAs: 'slTextFieldStart',
-                    host: { 'data-part': 'start' },
+                    host: { 'data-part': 'start', 'data-part-start': '' },
                 }]
         }] });
 /** An adornment after the value in the reading direction. */
 class SlTextFieldEnd {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTextFieldEnd, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTextFieldEnd, isStandalone: true, selector: "[slTextFieldEnd]", host: { attributes: { "data-part": "end" } }, exportAs: ["slTextFieldEnd"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTextFieldEnd, isStandalone: true, selector: "[slTextFieldEnd]", host: { attributes: { "data-part": "end", "data-part-end": "" } }, exportAs: ["slTextFieldEnd"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTextFieldEnd, decorators: [{
             type: Directive,
@@ -633,7 +667,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     selector: '[slTextFieldEnd]',
                     standalone: true,
                     exportAs: 'slTextFieldEnd',
-                    host: { 'data-part': 'end' },
+                    host: { 'data-part': 'end', 'data-part-end': '' },
                 }]
         }] });
 /**
@@ -651,10 +685,10 @@ class SlTextFieldAction {
     type = inject(new HostAttributeToken('type'), { optional: true }) ?? 'button';
     constructor() {
         const element = inject(ElementRef).nativeElement;
-        afterNextRender(() => element.setAttribute('data-part', 'action'));
+        afterNextRender(() => writeSelectorKey(element, 'part', 'action'));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTextFieldAction, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTextFieldAction, isStandalone: true, selector: "button[slTextFieldAction]", host: { attributes: { "data-part": "action" }, properties: { "attr.type": "type" } }, exportAs: ["slTextFieldAction"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlTextFieldAction, isStandalone: true, selector: "button[slTextFieldAction]", host: { attributes: { "data-part": "action", "data-part-action": "" }, properties: { "attr.type": "type" } }, exportAs: ["slTextFieldAction"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlTextFieldAction, decorators: [{
             type: Directive,
@@ -662,7 +696,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     selector: 'button[slTextFieldAction]',
                     standalone: true,
                     exportAs: 'slTextFieldAction',
-                    host: { 'data-part': 'action', '[attr.type]': 'type' },
+                    host: { 'data-part': 'action', 'data-part-action': '', '[attr.type]': 'type' },
                 }]
         }], ctorParameters: () => [] });