@fluentui/web-components 3.0.0-beta.9 → 3.0.0-beta.91

package/dist/esm/text-input/text-input.bench.js

@@ -0,0 +1,10 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './text-input.definition.js';
+definition.define(FluentDesignSystem.registry);
+const itemRenderer = () => {
+    const textInput = document.createElement('fluent-text-input');
+    return textInput;
+};
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';
+//# sourceMappingURL=text-input.bench.js.map

package/dist/esm/text-input/text-input.bench.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-input.bench.js","sourceRoot":"","sources":["../../../src/text-input/text-input.bench.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;AAE/C,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;IAC9D,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/esm/text-input/text-input.definition.js

@@ -3,16 +3,18 @@ import { TextInput } from './text-input.js';
 import { styles } from './text-input.styles.js';
 import { template } from './text-input.template.js';
 /**
- * The Fluent TextInput Element.
- *
+ * The Fluent TextInput Element definition.
  *
  * @public
  * @remarks
- * HTML Element: \<fluent-text-input\>
+ * HTML Element: `<fluent-text-input>`
  */
 export const definition = TextInput.compose({
     name: `${FluentDesignSystem.prefix}-text-input`,
     template,
     styles,
+    shadowOptions: {
+        delegatesFocus: true,
+    },
 });
 //# sourceMappingURL=text-input.definition.js.map

package/dist/esm/text-input/text-input.definition.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-input.definition.js","sourceRoot":"","sources":["../../../src/text-input/text-input.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAEpD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,SAAS,CAAC,OAAO,CAAC;IAC1C,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,aAAa;IAC/C,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}
+{"version":3,"file":"text-input.definition.js","sourceRoot":"","sources":["../../../src/text-input/text-input.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAEpD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,SAAS,CAAC,OAAO,CAAC;IAC1C,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,aAAa;IAC/C,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACb,cAAc,EAAE,IAAI;KACrB;CACF,CAAC,CAAC"}

package/dist/esm/text-input/text-input.js

@@ -1,181 +1,21 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { attr, nullableNumberConverter, observable, Updates } from '@microsoft/fast-element';
-import { ARIAGlobalStatesAndProperties, StartEnd } from '../patterns/index.js';
+import { __decorate } from "tslib";
+import { attr } from '@microsoft/fast-element';
+import { StartEnd } from '../patterns/start-end.js';
 import { applyMixins } from '../utils/apply-mixins.js';
-import { TextFieldType } from './text-input.options.js';
-import { FormAssociatedTextField } from './text-field.form-associated.js';
-export { TextFieldType };
-export class TextInput extends FormAssociatedTextField {
-    constructor() {
-        super(...arguments);
-        /**
-         * Allows setting a type or mode of text.
-         * @public
-         * @remarks
-         * HTML Attribute: type
-         */
-        this.type = TextFieldType.text;
-    }
-    readOnlyChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.readOnly = this.readOnly;
-            this.validate();
-        }
-    }
-    autofocusChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.autofocus = this.autofocus;
-            this.validate();
-        }
-    }
-    placeholderChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.placeholder = this.placeholder;
-        }
-    }
-    typeChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.type = this.type;
-            this.validate();
-        }
-    }
-    listChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.setAttribute('list', this.list);
-            this.validate();
-        }
-    }
-    maxlengthChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.maxLength = this.maxlength;
-            this.validate();
-        }
-    }
-    minlengthChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.minLength = this.minlength;
-            this.validate();
-        }
-    }
-    patternChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.pattern = this.pattern;
-            this.validate();
-        }
-    }
-    sizeChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.size = this.size;
-        }
-    }
-    spellcheckChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.spellcheck = this.spellcheck;
-        }
-    }
-    /**
-     * @internal
-     */
-    connectedCallback() {
-        super.connectedCallback();
-        this.proxy.setAttribute('type', this.type);
-        this.validate();
-        if (this.autofocus) {
-            Updates.enqueue(() => {
-                this.focus();
-            });
-        }
-    }
-    /**
-     * Selects all the text in the text field
-     *
-     * @public
-     */
-    select() {
-        this.control.select();
-        /**
-         * The select event does not permeate the shadow DOM boundary.
-         * This fn effectively proxies the select event,
-         * emitting a `select` event whenever the internal
-         * control emits a `select` event
-         */
-        this.$emit('select');
-    }
-    /**
-     * Handles the internal control's `input` event
-     * @internal
-     */
-    handleTextInput() {
-        this.value = this.control.value;
-    }
-    /**
-     * Change event handler for inner control.
-     * @remarks
-     * "Change" events are not `composable` so they will not
-     * permeate the shadow DOM boundary. This fn effectively proxies
-     * the change event, emitting a `change` event whenever the internal
-     * control emits a `change` event
-     * @internal
-     */
-    handleChange() {
-        this.$emit('change');
-    }
-    /** {@inheritDoc (FormAssociated:interface).validate} */
-    validate() {
-        super.validate(this.control);
-    }
-}
-__decorate([
-    attr({ attribute: 'control-size' })
-], TextInput.prototype, "controlSize", void 0);
-__decorate([
-    attr
-], TextInput.prototype, "appearance", void 0);
-__decorate([
-    attr({ attribute: 'readonly', mode: 'boolean' })
-], TextInput.prototype, "readOnly", void 0);
-__decorate([
-    attr({ mode: 'boolean' })
-], TextInput.prototype, "autofocus", void 0);
-__decorate([
-    attr
-], TextInput.prototype, "placeholder", void 0);
-__decorate([
-    attr
-], TextInput.prototype, "type", void 0);
-__decorate([
-    attr
-], TextInput.prototype, "list", void 0);
-__decorate([
-    attr({ converter: nullableNumberConverter })
-], TextInput.prototype, "maxlength", void 0);
-__decorate([
-    attr({ converter: nullableNumberConverter })
-], TextInput.prototype, "minlength", void 0);
-__decorate([
-    attr
-], TextInput.prototype, "pattern", void 0);
-__decorate([
-    attr({ converter: nullableNumberConverter })
-], TextInput.prototype, "size", void 0);
-__decorate([
-    attr({ mode: 'boolean' })
-], TextInput.prototype, "spellcheck", void 0);
-__decorate([
-    observable
-], TextInput.prototype, "defaultSlottedNodes", void 0);
+import { BaseTextInput } from './text-input.base.js';
 /**
- * Includes ARIA states and properties relating to the ARIA textbox role
+ * A Text Input Custom HTML Element.
+ * Based on BaseTextInput and includes style and layout specific attributes
  *
  * @public
  */
-export class DelegatesARIATextbox {
+export class TextInput extends BaseTextInput {
 }
-applyMixins(DelegatesARIATextbox, ARIAGlobalStatesAndProperties);
-applyMixins(TextInput, StartEnd, DelegatesARIATextbox);
+__decorate([
+    attr
+], TextInput.prototype, "appearance", void 0);
+__decorate([
+    attr({ attribute: 'control-size' })
+], TextInput.prototype, "controlSize", void 0);
+applyMixins(TextInput, StartEnd);
 //# sourceMappingURL=text-input.js.map

package/dist/esm/text-input/text-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-input.js","sourceRoot":"","sources":["../../../src/text-input/text-input.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"text-input.js","sourceRoot":"","sources":["../../../src/text-input/text-input.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEvD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAGrD;;;;;GAKG;AACH,MAAM,OAAO,SAAU,SAAQ,aAAa;CAoB3C;AAXQ;IADN,IAAI;6CACmC;AAUjC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;8CACM;AAY5C,WAAW,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC"}

package/dist/esm/text-input/text-input.options.js

@@ -1,5 +1,6 @@
 /**
- * TextInput size constants
+ * Values for the `control-size` attribute on TextInput elements.
+ *
  * @public
  */
 export const TextInputControlSize = {
@@ -8,7 +9,8 @@ export const TextInputControlSize = {
     large: 'large',
 };
 /**
- * TextInput appearance constants
+ * Values for the `appearance` attribute on TextInput elements.
+ *
  * @public
  */
 export const TextInputAppearance = {
@@ -18,29 +20,34 @@ export const TextInputAppearance = {
     filledDarker: 'filled-darker',
 };
 /**
- * Text field sub-types
+ * Values for the `type` attribute on TextInput elements.
+ *
  * @public
  */
-export const TextFieldType = {
-    /**
-     * An email TextField
-     */
+export const TextInputType = {
     email: 'email',
-    /**
-     * A password TextField
-     */
     password: 'password',
-    /**
-     * A telephone TextField
-     */
     tel: 'tel',
-    /**
-     * A text TextField
-     */
     text: 'text',
-    /**
-     * A URL TextField
-     */
     url: 'url',
 };
+/**
+ * Input types that block implicit form submission.
+ *
+ * @public
+ */
+export const ImplicitSubmissionBlockingTypes = [
+    'date',
+    'datetime-local',
+    'email',
+    'month',
+    'number',
+    'password',
+    'search',
+    'tel',
+    'text',
+    'time',
+    'url',
+    'week',
+];
 //# sourceMappingURL=text-input.options.js.map

package/dist/esm/text-input/text-input.options.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-input.options.js","sourceRoot":"","sources":["../../../src/text-input/text-input.options.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC;AAQX;;;GAGG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,OAAO,EAAE,SAAS;IAClB,SAAS,EAAE,WAAW;IACtB,aAAa,EAAE,gBAAgB;IAC/B,YAAY,EAAE,eAAe;CACrB,CAAC;AAQX;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B;;OAEG;IACH,KAAK,EAAE,OAAO;IAEd;;OAEG;IACH,QAAQ,EAAE,UAAU;IAEpB;;OAEG;IACH,GAAG,EAAE,KAAK;IAEV;;OAEG;IACH,IAAI,EAAE,MAAM;IAEZ;;OAEG;IACH,GAAG,EAAE,KAAK;CACF,CAAC"}
+{"version":3,"file":"text-input.options.js","sourceRoot":"","sources":["../../../src/text-input/text-input.options.ts"],"names":[],"mappings":"AAWA;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC;AAIX;;;;GAIG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,OAAO,EAAE,SAAS;IAClB,SAAS,EAAE,WAAW;IACtB,aAAa,EAAE,gBAAgB;IAC/B,YAAY,EAAE,eAAe;CACrB,CAAC;AAIX;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,KAAK,EAAE,OAAO;IACd,QAAQ,EAAE,UAAU;IACpB,GAAG,EAAE,KAAK;IACV,IAAI,EAAE,MAAM;IACZ,GAAG,EAAE,KAAK;CACF,CAAC;AAIX;;;;GAIG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAAG;IAC7C,MAAM;IACN,gBAAgB;IAChB,OAAO;IACP,OAAO;IACP,QAAQ;IACR,UAAU;IACV,QAAQ;IACR,KAAK;IACL,MAAM;IACN,MAAM;IACN,KAAK;IACL,MAAM;CACP,CAAC"}

package/dist/esm/text-input/text-input.styles.js

@@ -1,43 +1,54 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation/utilities.js';
-import { borderRadiusMedium, colorCompoundBrandStroke, colorCompoundBrandStrokePressed, colorNeutralBackground1, colorNeutralBackground3, colorNeutralBackgroundInverted, colorNeutralForeground1, colorNeutralForeground3, colorNeutralForeground4, colorNeutralForegroundDisabled, colorNeutralForegroundInverted, colorNeutralStroke1, colorNeutralStroke1Hover, colorNeutralStroke1Pressed, colorNeutralStrokeAccessible, colorNeutralStrokeAccessibleHover, colorNeutralStrokeAccessiblePressed, colorNeutralStrokeDisabled, colorTransparentBackground, colorTransparentStroke, colorTransparentStrokeInteractive, curveAccelerateMid, curveDecelerateMid, durationNormal, durationUltraFast, fontFamilyBase, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontSizeBase500, fontSizeBase600, fontWeightRegular, lineHeightBase200, lineHeightBase300, lineHeightBase400, shadow2, spacingHorizontalM, spacingHorizontalMNudge, spacingHorizontalS, spacingHorizontalSNudge, spacingHorizontalXS, spacingHorizontalXXS, spacingVerticalXS, strokeWidthThin, } from '../theme/design-tokens.js';
-/** TextInput styles
+import { borderRadiusMedium, colorCompoundBrandStroke, colorCompoundBrandStrokePressed, colorNeutralBackground1, colorNeutralBackground3, colorNeutralBackgroundInverted, colorNeutralForeground1, colorNeutralForeground3, colorNeutralForeground4, colorNeutralForegroundDisabled, colorNeutralForegroundInverted, colorNeutralStroke1, colorNeutralStroke1Hover, colorNeutralStroke1Pressed, colorNeutralStrokeAccessible, colorNeutralStrokeAccessibleHover, colorNeutralStrokeAccessiblePressed, colorNeutralStrokeDisabled, colorPaletteRedBorder2, colorTransparentBackground, colorTransparentStroke, colorTransparentStrokeInteractive, curveAccelerateMid, curveDecelerateMid, durationNormal, durationUltraFast, fontFamilyBase, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontSizeBase500, fontSizeBase600, fontWeightRegular, lineHeightBase200, lineHeightBase300, lineHeightBase400, shadow2, spacingHorizontalM, spacingHorizontalMNudge, spacingHorizontalS, spacingHorizontalSNudge, spacingHorizontalXS, spacingHorizontalXXS, spacingVerticalXS, strokeWidthThin, } from '../theme/design-tokens.js';
+import { display } from '../utils/display.js';
+/**
+ * Styles for the TextInput component.
+ *
  * @public
  */
 export const styles = css `
   ${display('block')}
 
   :host {
-    font-family: var(${fontFamilyBase});
-    font-size: var(${fontSizeBase300});
-    font-weight: var(${fontWeightRegular});
-    line-height: var(${lineHeightBase300});
+    font-family: ${fontFamilyBase};
+    font-size: ${fontSizeBase300};
+    font-weight: ${fontWeightRegular};
+    line-height: ${lineHeightBase300};
     max-width: 400px;
   }
   .label {
     display: flex;
-    color: var(${colorNeutralForeground1});
-    padding-bottom: var(${spacingVerticalXS});
+    color: ${colorNeutralForeground1};
+    padding-bottom: ${spacingVerticalXS};
     flex-shrink: 0;
-    padding-inline-end: var(${spacingHorizontalXS});
+    padding-inline-end: ${spacingHorizontalXS};
   }
-  .label__hidden {
+
+  .label[hidden],
+  :host(:empty) .label {
     display: none;
   }
+
   .root {
-    position: relative;
+    align-items: center;
+    background-color: ${colorNeutralBackground1};
+    border: ${strokeWidthThin} solid ${colorNeutralStroke1};
+    border-bottom-color: ${colorNeutralStrokeAccessible};
+    border-radius: ${borderRadiusMedium};
     box-sizing: border-box;
     height: 32px;
     display: inline-flex;
-    align-items: center;
     flex-direction: row;
+    gap: ${spacingHorizontalXXS};
+    padding: 0 ${spacingHorizontalMNudge};
+    position: relative;
     width: 100%;
-    padding: 0 var(${spacingHorizontalMNudge});
-    border: var(${strokeWidthThin}) solid var(${colorNeutralStroke1});
-    border-bottom-color: var(${colorNeutralStrokeAccessible});
-    border-radius: var(${borderRadiusMedium});
-    gap: var(${spacingHorizontalXXS});
   }
+
+  :has(.control:user-invalid) {
+    border-color: ${colorPaletteRedBorder2};
+  }
+
   .root::after {
     box-sizing: border-box;
     content: '';
@@ -45,27 +56,26 @@ export const styles = css `
     left: -1px;
     bottom: 0px;
     right: -1px;
-    height: max(2px, var(${borderRadiusMedium}));
-    border-radius: 0 0 var(${borderRadiusMedium}) var(${borderRadiusMedium});
-    border-bottom: 2px solid var(${colorCompoundBrandStroke});
+    height: max(2px, ${borderRadiusMedium});
+    border-radius: 0 0 ${borderRadiusMedium} ${borderRadiusMedium};
+    border-bottom: 2px solid ${colorCompoundBrandStroke};
     clip-path: inset(calc(100% - 2px) 1px 0px);
     transform: scaleX(0);
     transition-property: transform;
-    transition-duration: var(${durationUltraFast});
-    transition-delay: var(${curveAccelerateMid});
+    transition-duration: ${durationUltraFast};
+    transition-delay: ${curveAccelerateMid};
   }
   .control {
     width: 100%;
     height: 100%;
     box-sizing: border-box;
-    color: var(${colorNeutralForeground1});
-    border-radius: var(${borderRadiusMedium});
-    background: var(${colorTransparentBackground});
-    font-family: var(${fontFamilyBase});
-    font-weight: var(${fontWeightRegular});
-    font-size: var(${fontSizeBase300});
+    color: ${colorNeutralForeground1};
+    border-radius: ${borderRadiusMedium};
+    background: ${colorTransparentBackground};
+    font-family: ${fontFamilyBase};
+    font-weight: ${fontWeightRegular};
+    font-size: ${fontSizeBase300};
     border: none;
-    background: transparent;
     vertical-align: center;
   }
   .control:focus-visible {
@@ -73,29 +83,29 @@ export const styles = css `
     border: 0;
   }
   .control::placeholder {
-    color: var(${colorNeutralForeground4});
+    color: ${colorNeutralForeground4};
   }
   :host ::slotted([slot='start']),
   :host ::slotted([slot='end']) {
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(${colorNeutralForeground3});
-    font-size: var(${fontSizeBase500});
+    color: ${colorNeutralForeground3};
+    font-size: ${fontSizeBase500};
   }
   :host ::slotted([slot='start']) {
-    padding-right: var(${spacingHorizontalXXS});
+    padding-right: ${spacingHorizontalXXS};
   }
   :host ::slotted([slot='end']) {
-    padding-left: var(${spacingHorizontalXXS});
-    gap: var(${spacingHorizontalXS});
+    padding-left: ${spacingHorizontalXXS};
+    gap: ${spacingHorizontalXS};
   }
   :host(:hover) .root {
-    border-color: var(${colorNeutralStroke1Hover});
-    border-bottom-color: var(${colorNeutralStrokeAccessibleHover});
+    border-color: ${colorNeutralStroke1Hover};
+    border-bottom-color: ${colorNeutralStrokeAccessibleHover};
   }
   :host(:active) .root {
-    border-color: var(${colorNeutralStroke1Pressed});
+    border-color: ${colorNeutralStroke1Pressed};
   }
   :host(:focus-within) .root {
     outline: transparent solid 2px;
@@ -104,97 +114,97 @@ export const styles = css `
   :host(:focus-within) .root::after {
     transform: scaleX(1);
     transition-property: transform;
-    transition-duration: var(${durationNormal});
-    transition-delay: var(${curveDecelerateMid});
+    transition-duration: ${durationNormal};
+    transition-delay: ${curveDecelerateMid};
   }
   :host(:focus-within:active) .root:after {
-    border-bottom-color: var(${colorCompoundBrandStrokePressed});
+    border-bottom-color: ${colorCompoundBrandStrokePressed};
   }
   :host([appearance='outline']:focus-within) .root {
-    border: var(${strokeWidthThin}) solid var(${colorNeutralStroke1});
+    border: ${strokeWidthThin} solid ${colorNeutralStroke1};
   }
   :host(:focus-within) .control {
-    color: var(${colorNeutralForeground1});
+    color: ${colorNeutralForeground1};
   }
   :host([disabled]) .root {
-    background: var(${colorTransparentBackground});
-    border: var(${strokeWidthThin}) solid var(${colorNeutralStrokeDisabled});
+    background: ${colorTransparentBackground};
+    border: ${strokeWidthThin} solid ${colorNeutralStrokeDisabled};
   }
   :host([disabled]) .control::placeholder,
   :host([disabled]) ::slotted([slot='start']),
   :host([disabled]) ::slotted([slot='end']) {
-    color: var(${colorNeutralForegroundDisabled});
+    color: ${colorNeutralForegroundDisabled};
   }
   ::selection {
-    color: var(${colorNeutralForegroundInverted});
-    background-color: var(${colorNeutralBackgroundInverted});
+    color: ${colorNeutralForegroundInverted};
+    background-color: ${colorNeutralBackgroundInverted};
   }
   :host([control-size='small']) .control {
-    font-size: var(${fontSizeBase200});
-    font-weight: var(${fontWeightRegular});
-    line-height: var(${lineHeightBase200});
+    font-size: ${fontSizeBase200};
+    font-weight: ${fontWeightRegular};
+    line-height: ${lineHeightBase200};
   }
   :host([control-size='small']) .root {
     height: 24px;
-    gap: var(${spacingHorizontalXXS});
-    padding: 0 var(${spacingHorizontalSNudge});
+    gap: ${spacingHorizontalXXS};
+    padding: 0 ${spacingHorizontalSNudge};
   }
   :host([control-size='small']) ::slotted([slot='start']),
   :host([control-size='small']) ::slotted([slot='end']) {
-    font-size: var(${fontSizeBase400});
+    font-size: ${fontSizeBase400};
   }
   :host([control-size='large']) .control {
-    font-size: var(${fontSizeBase400});
-    font-weight: var(${fontWeightRegular});
-    line-height: var(${lineHeightBase400});
+    font-size: ${fontSizeBase400};
+    font-weight: ${fontWeightRegular};
+    line-height: ${lineHeightBase400};
   }
   :host([control-size='large']) .root {
     height: 40px;
-    gap: var(${spacingHorizontalS});
-    padding: 0 var(${spacingHorizontalM});
+    gap: ${spacingHorizontalS};
+    padding: 0 ${spacingHorizontalM};
   }
   :host([control-size='large']) ::slotted([slot='start']),
   :host([control-size='large']) ::slotted([slot='end']) {
-    font-size: var(${fontSizeBase600});
+    font-size: ${fontSizeBase600};
   }
   :host([appearance='underline']) .root {
-    background: var(${colorTransparentBackground});
+    background: ${colorTransparentBackground};
     border: 0;
     border-radius: 0;
-    border-bottom: var(${strokeWidthThin}) solid var(${colorNeutralStrokeAccessible});
+    border-bottom: ${strokeWidthThin} solid ${colorNeutralStrokeAccessible};
   }
   :host([appearance='underline']:hover) .root {
-    border-bottom-color: var(${colorNeutralStrokeAccessibleHover});
+    border-bottom-color: ${colorNeutralStrokeAccessibleHover};
   }
   :host([appearance='underline']:active) .root {
-    border-bottom-color: var(${colorNeutralStrokeAccessiblePressed});
+    border-bottom-color: ${colorNeutralStrokeAccessiblePressed};
   }
   :host([appearance='underline']:focus-within) .root {
     border: 0;
-    border-bottom-color: var(${colorNeutralStrokeAccessiblePressed});
+    border-bottom-color: ${colorNeutralStrokeAccessiblePressed};
   }
   :host([appearance='underline'][disabled]) .root {
-    border-bottom-color: var(${colorNeutralStrokeDisabled});
+    border-bottom-color: ${colorNeutralStrokeDisabled};
   }
   :host([appearance='filled-lighter']) .root,
   :host([appearance='filled-darker']) .root {
-    border: var(${strokeWidthThin}) solid var(${colorTransparentStroke});
-    box-shadow: var(${shadow2});
+    border: ${strokeWidthThin} solid ${colorTransparentStroke};
+    box-shadow: ${shadow2};
   }
   :host([appearance='filled-lighter']) .root {
-    background: var(${colorNeutralBackground1});
+    background: ${colorNeutralBackground1};
   }
   :host([appearance='filled-darker']) .root {
-    background: var(${colorNeutralBackground3});
+    background: ${colorNeutralBackground3};
   }
   :host([appearance='filled-lighter']:hover) .root,
   :host([appearance='filled-darker']:hover) .root {
-    border-color: var(${colorTransparentStrokeInteractive});
+    border-color: ${colorTransparentStrokeInteractive};
   }
   :host([appearance='filled-lighter']:active) .root,
   :host([appearance='filled-darker']:active) .root {
-    border-color: var(${colorTransparentStrokeInteractive});
-    background: var(${colorNeutralBackground3});
+    border-color: ${colorTransparentStrokeInteractive};
+    background: ${colorNeutralBackground3};
   }
 `;
 //# sourceMappingURL=text-input.styles.js.map

package/dist/esm/text-input/text-input.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-input.styles.js","sourceRoot":"","sources":["../../../src/text-input/text-input.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,yCAAyC,CAAC;AAClE,OAAO,EACL,kBAAkB,EAClB,wBAAwB,EACxB,+BAA+B,EAC/B,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,8BAA8B,EAC9B,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,0BAA0B,EAC1B,0BAA0B,EAC1B,sBAAsB,EACtB,iCAAiC,EACjC,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,OAAO,EACP,kBAAkB,EAClB,uBAAuB,EACvB,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,EACnB,oBAAoB,EACpB,iBAAiB,EACjB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,OAAO,CAAC;;;uBAGG,cAAc;qBAChB,eAAe;uBACb,iBAAiB;uBACjB,iBAAiB;;;;;iBAKvB,uBAAuB;0BACd,iBAAiB;;8BAEb,mBAAmB;;;;;;;;;;;;;qBAa5B,uBAAuB;kBAC1B,eAAe,eAAe,mBAAmB;+BACpC,4BAA4B;yBAClC,kBAAkB;eAC5B,oBAAoB;;;;;;;;;2BASR,kBAAkB;6BAChB,kBAAkB,SAAS,kBAAkB;mCACvC,wBAAwB;;;;+BAI5B,iBAAiB;4BACpB,kBAAkB;;;;;;iBAM7B,uBAAuB;yBACf,kBAAkB;sBACrB,0BAA0B;uBACzB,cAAc;uBACd,iBAAiB;qBACnB,eAAe;;;;;;;;;;iBAUnB,uBAAuB;;;;;;;iBAOvB,uBAAuB;qBACnB,eAAe;;;yBAGX,oBAAoB;;;wBAGrB,oBAAoB;eAC7B,mBAAmB;;;wBAGV,wBAAwB;+BACjB,iCAAiC;;;wBAGxC,0BAA0B;;;;;;;;;+BASnB,cAAc;4BACjB,kBAAkB;;;+BAGf,+BAA+B;;;kBAG5C,eAAe,eAAe,mBAAmB;;;iBAGlD,uBAAuB;;;sBAGlB,0BAA0B;kBAC9B,eAAe,eAAe,0BAA0B;;;;;iBAKzD,8BAA8B;;;iBAG9B,8BAA8B;4BACnB,8BAA8B;;;qBAGrC,eAAe;uBACb,iBAAiB;uBACjB,iBAAiB;;;;eAIzB,oBAAoB;qBACd,uBAAuB;;;;qBAIvB,eAAe;;;qBAGf,eAAe;uBACb,iBAAiB;uBACjB,iBAAiB;;;;eAIzB,kBAAkB;qBACZ,kBAAkB;;;;qBAIlB,eAAe;;;sBAGd,0BAA0B;;;yBAGvB,eAAe,eAAe,4BAA4B;;;+BAGpD,iCAAiC;;;+BAGjC,mCAAmC;;;;+BAInC,mCAAmC;;;+BAGnC,0BAA0B;;;;kBAIvC,eAAe,eAAe,sBAAsB;sBAChD,OAAO;;;sBAGP,uBAAuB;;;sBAGvB,uBAAuB;;;;wBAIrB,iCAAiC;;;;wBAIjC,iCAAiC;sBACnC,uBAAuB;;CAE5C,CAAC"}
+{"version":3,"file":"text-input.styles.js","sourceRoot":"","sources":["../../../src/text-input/text-input.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,wBAAwB,EACxB,+BAA+B,EAC/B,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,8BAA8B,EAC9B,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,0BAA0B,EAC1B,sBAAsB,EACtB,0BAA0B,EAC1B,sBAAsB,EACtB,iCAAiC,EACjC,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,OAAO,EACP,kBAAkB,EAClB,uBAAuB,EACvB,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,EACnB,oBAAoB,EACpB,iBAAiB,EACjB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAkB,GAAG,CAAA;IACpC,OAAO,CAAC,OAAO,CAAC;;;mBAGD,cAAc;iBAChB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;;aAKvB,uBAAuB;sBACd,iBAAiB;;0BAEb,mBAAmB;;;;;;;;;;wBAUrB,uBAAuB;cACjC,eAAe,UAAU,mBAAmB;2BAC/B,4BAA4B;qBAClC,kBAAkB;;;;;WAK5B,oBAAoB;iBACd,uBAAuB;;;;;;oBAMpB,sBAAsB;;;;;;;;;;uBAUnB,kBAAkB;yBAChB,kBAAkB,IAAI,kBAAkB;+BAClC,wBAAwB;;;;2BAI5B,iBAAiB;wBACpB,kBAAkB;;;;;;aAM7B,uBAAuB;qBACf,kBAAkB;kBACrB,0BAA0B;mBACzB,cAAc;mBACd,iBAAiB;iBACnB,eAAe;;;;;;;;;aASnB,uBAAuB;;;;;;;aAOvB,uBAAuB;iBACnB,eAAe;;;qBAGX,oBAAoB;;;oBAGrB,oBAAoB;WAC7B,mBAAmB;;;oBAGV,wBAAwB;2BACjB,iCAAiC;;;oBAGxC,0BAA0B;;;;;;;;;2BASnB,cAAc;wBACjB,kBAAkB;;;2BAGf,+BAA+B;;;cAG5C,eAAe,UAAU,mBAAmB;;;aAG7C,uBAAuB;;;kBAGlB,0BAA0B;cAC9B,eAAe,UAAU,0BAA0B;;;;;aAKpD,8BAA8B;;;aAG9B,8BAA8B;wBACnB,8BAA8B;;;iBAGrC,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;WAIzB,oBAAoB;iBACd,uBAAuB;;;;iBAIvB,eAAe;;;iBAGf,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;WAIzB,kBAAkB;iBACZ,kBAAkB;;;;iBAIlB,eAAe;;;kBAGd,0BAA0B;;;qBAGvB,eAAe,UAAU,4BAA4B;;;2BAG/C,iCAAiC;;;2BAGjC,mCAAmC;;;;2BAInC,mCAAmC;;;2BAGnC,0BAA0B;;;;cAIvC,eAAe,UAAU,sBAAsB;kBAC3C,OAAO;;;kBAGP,uBAAuB;;;kBAGvB,uBAAuB;;;;oBAIrB,iCAAiC;;;;oBAIjC,iCAAiC;kBACnC,uBAAuB;;CAExC,CAAC"}