@fluentui/web-components 3.0.0-beta.3 → 3.0.0-beta.30

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

@@ -0,0 +1 @@
+{"version":3,"file":"text.bench.js","sourceRoot":"","sources":["../../../src/text/text.bench.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;AAE/C,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IACnD,MAAM,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IACtC,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;IAC/C,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;IACpB,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/esm/text/text.js

@@ -1,9 +1,4 @@
-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 { __decorate } from "tslib";
 import { attr, FASTElement } from '@microsoft/fast-element';
 /**
  * The base class used for constructing a fluent-text custom element

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

@@ -1 +1 @@
-{"version":3,"file":"text.js","sourceRoot":"","sources":["../../../src/text/text.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG5D;;;GAGG;AACH,MAAM,OAAO,IAAK,SAAQ,WAAW;IAArC;;QACE;;;;;;;;WAQG;QAEH,WAAM,GAAY,KAAK,CAAC;QAExB;;;;;;WAMG;QAEH,aAAQ,GAAY,KAAK,CAAC;QAE1B;;;;;;WAMG;QAEH,WAAM,GAAY,KAAK,CAAC;QAExB;;;;;;WAMG;QAEH,cAAS,GAAY,KAAK,CAAC;QAE3B;;;;;;WAMG;QAEH,kBAAa,GAAY,KAAK,CAAC;QAE/B;;;;;;WAMG;QAEH,UAAK,GAAY,KAAK,CAAC;IA0CzB,CAAC;CAAA;AA5FC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;oCACF;AAUxB;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;sCACA;AAU1B;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;oCACF;AAUxB;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;uCACC;AAU3B;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;2CACK;AAU/B;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;mCACH;AAWvB;IADC,IAAI;kCACW;AAUhB;IADC,IAAI;kCACW;AAUhB;IADC,IAAI;oCACe;AAUpB;IADC,IAAI;mCACa"}
+{"version":3,"file":"text.js","sourceRoot":"","sources":["../../../src/text/text.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG5D;;;GAGG;AACH,MAAM,OAAO,IAAK,SAAQ,WAAW;IAArC;;QACE;;;;;;;;WAQG;QAEH,WAAM,GAAY,KAAK,CAAC;QAExB;;;;;;WAMG;QAEH,aAAQ,GAAY,KAAK,CAAC;QAE1B;;;;;;WAMG;QAEH,WAAM,GAAY,KAAK,CAAC;QAExB;;;;;;WAMG;QAEH,cAAS,GAAY,KAAK,CAAC;QAE3B;;;;;;WAMG;QAEH,kBAAa,GAAY,KAAK,CAAC;QAE/B;;;;;;WAMG;QAEH,UAAK,GAAY,KAAK,CAAC;IA0CzB,CAAC;CAAA;AA5FC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;oCACF;AAUxB;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;sCACA;AAU1B;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;oCACF;AAUxB;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;uCACC;AAU3B;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;2CACK;AAU/B;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;mCACH;AAWvB;IADC,IAAI;kCACW;AAUhB;IADC,IAAI;kCACW;AAUhB;IADC,IAAI;oCACe;AAUpB;IADC,IAAI;mCACa"}

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

@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation/utilities.js';
+import { display } from '../utils/index.js';
 import { fontFamilyBase, fontFamilyMonospace, fontFamilyNumeric, fontSizeBase100, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontSizeBase500, fontSizeBase600, fontSizeHero1000, fontSizeHero700, fontSizeHero800, fontSizeHero900, fontWeightBold, fontWeightMedium, fontWeightRegular, fontWeightSemibold, lineHeightBase100, lineHeightBase200, lineHeightBase300, lineHeightBase400, lineHeightBase500, lineHeightBase600, lineHeightHero1000, lineHeightHero700, lineHeightHero800, lineHeightHero900, } from '../theme/design-tokens.js';
 /** Text styles
  * @public
@@ -24,87 +24,111 @@ export const styles = css `
     display: inline;
   }
 
-  :host([nowrap]) ::slotted(*) {
+  :host([nowrap]) ::slotted(*),
+  :host([nowrap]) {
     white-space: nowrap;
     overflow: hidden;
   }
-  :host([truncate]) ::slotted(*) {
+  :host([truncate]) ::slotted(*),
+  :host([truncate]) {
     text-overflow: ellipsis;
   }
   :host([block]),
-  :host([block]) ::slotted(*) {
+  :host([block]) ::slotted(*),
+  :host([block]) {
     display: block;
   }
-  :host([italic]) ::slotted(*) {
+  :host([italic]) ::slotted(*),
+  :host([italic]) {
     font-style: italic;
   }
-  :host([underline]) ::slotted(*) {
+  :host([underline]) ::slotted(*),
+  :host([underline]) {
     text-decoration-line: underline;
   }
-  :host([strikethrough]) ::slotted(*) {
+  :host([strikethrough]) ::slotted(*),
+  :host([strikethrough]) {
     text-decoration-line: line-through;
   }
-  :host([underline][strikethrough]) ::slotted(*) {
+  :host([underline][strikethrough]) ::slotted(*),
+  :host([underline][strikethrough]) {
     text-decoration-line: line-through underline;
   }
-  :host([size='100']) ::slotted(*) {
+  :host([size='100']) ::slotted(*),
+  :host([size='100']) {
     font-size: ${fontSizeBase100};
     line-height: ${lineHeightBase100};
   }
-  :host([size='200']) ::slotted(*) {
+  :host([size='200']) ::slotted(*),
+  :host([size='200']) {
     font-size: ${fontSizeBase200};
     line-height: ${lineHeightBase200};
   }
-  :host([size='400']) ::slotted(*) {
+  :host([size='400']) ::slotted(*),
+  :host([size='400']) {
     font-size: ${fontSizeBase400};
     line-height: ${lineHeightBase400};
   }
-  :host([size='500']) ::slotted(*) {
+  :host([size='500']) ::slotted(*),
+  :host([size='500']) {
     font-size: ${fontSizeBase500};
     line-height: ${lineHeightBase500};
   }
-  :host([size='600']) ::slotted(*) {
+  :host([size='600']) ::slotted(*),
+  :host([size='600']) {
     font-size: ${fontSizeBase600};
     line-height: ${lineHeightBase600};
   }
-  :host([size='700']) ::slotted(*) {
+  :host([size='700']) ::slotted(*),
+  :host([size='700']) {
     font-size: ${fontSizeHero700};
     line-height: ${lineHeightHero700};
   }
-  :host([size='800']) ::slotted(*) {
+  :host([size='800']) ::slotted(*),
+  :host([size='800']) {
     font-size: ${fontSizeHero800};
     line-height: ${lineHeightHero800};
   }
-  :host([size='900']) ::slotted(*) {
+  :host([size='900']) ::slotted(*),
+  :host([size='900']) {
     font-size: ${fontSizeHero900};
     line-height: ${lineHeightHero900};
   }
-  :host([size='1000']) ::slotted(*) {
+  :host([size='1000']) ::slotted(*),
+  :host([size='1000']) {
     font-size: ${fontSizeHero1000};
     line-height: ${lineHeightHero1000};
   }
-  :host([font='monospace']) ::slotted(*) {
+  :host([font='monospace']) ::slotted(*),
+  :host([font='monospace']) {
     font-family: ${fontFamilyMonospace};
   }
-  :host([font='numeric']) ::slotted(*) {
+  :host([font='numeric']) ::slotted(*),
+  :host([font='numeric']) {
     font-family: ${fontFamilyNumeric};
   }
-  :host([weight='medium']) ::slotted(*) {
+  :host([weight='medium']) ::slotted(*),
+  :host([weight='medium']) {
     font-weight: ${fontWeightMedium};
   }
-  :host([weight='semibold']) ::slotted(*) {
+  :host([weight='semibold']) ::slotted(*),
+  :host([weight='semibold']) {
     font-weight: ${fontWeightSemibold};
   }
-  :host([weight='bold']) ::slotted(*) {
+  :host([weight='bold']) ::slotted(*),
+  :host([weight='bold']) {
     font-weight: ${fontWeightBold};
   }
-  :host([align='center']) ::slotted(*) {
+  :host([align='center']) ::slotted(*),
+  :host([align='center']) {
     text-align: center;
   }
-  :host([align='end']) ::slotted(*) {
+  :host([align='end']) ::slotted(*),
+  :host([align='end']) {
     text-align: end;
   }
-  :host([align='justify']) ::slotted(*) {
+  :host([align='justify']) ::slotted(*),
+  :host([align='justify']) {
     text-align: justify;
   }
 `;

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

@@ -1 +1 @@
-{"version":3,"file":"text.styles.js","sourceRoot":"","sources":["../../../src/text/text.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,yCAAyC,CAAC;AAClE,OAAO,EACL,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,eAAe,EACf,eAAe,EACf,cAAc,EACd,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,QAAQ,CAAC;;;;;;;mBAOF,cAAc;iBAChB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAiCnB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;mBACb,iBAAiB;;;iBAGnB,gBAAgB;mBACd,kBAAkB;;;mBAGlB,mBAAmB;;;mBAGnB,iBAAiB;;;mBAGjB,gBAAgB;;;mBAGhB,kBAAkB;;;mBAGlB,cAAc;;;;;;;;;;;CAWhC,CAAC"}
+{"version":3,"file":"text.styles.js","sourceRoot":"","sources":["../../../src/text/text.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EACL,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,eAAe,EACf,eAAe,EACf,cAAc,EACd,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,QAAQ,CAAC;;;;;;;mBAOF,cAAc;iBAChB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAyCnB,eAAe;mBACb,iBAAiB;;;;iBAInB,eAAe;mBACb,iBAAiB;;;;iBAInB,eAAe;mBACb,iBAAiB;;;;iBAInB,eAAe;mBACb,iBAAiB;;;;iBAInB,eAAe;mBACb,iBAAiB;;;;iBAInB,eAAe;mBACb,iBAAiB;;;;iBAInB,eAAe;mBACb,iBAAiB;;;;iBAInB,eAAe;mBACb,iBAAiB;;;;iBAInB,gBAAgB;mBACd,kBAAkB;;;;mBAIlB,mBAAmB;;;;mBAInB,iBAAiB;;;;mBAIjB,gBAAgB;;;;mBAIhB,kBAAkB;;;;mBAIlB,cAAc;;;;;;;;;;;;;;CAchC,CAAC"}

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

@@ -1,7 +1,6 @@
-export * from './text-input.js';
-export * from './text-input.options.js';
-export { template as TextInputTemplate } from './text-input.template.js';
-export { styles as TextInputStyles } from './text-input.styles.js';
 export { definition as TextInputDefinition } from './text-input.definition.js';
-export { TextFieldType as TextInputType } from '@microsoft/fast-foundation/text-field.js';
+export { TextInput } from './text-input.js';
+export { TextInputAppearance, TextInputControlSize, TextInputType } from './text-input.options.js';
+export { styles as TextInputStyles } from './text-input.styles.js';
+export { template as TextInputTemplate } from './text-input.template.js';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/text-input/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AACzE,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAE,UAAU,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAC/E,OAAO,EAAE,aAAa,IAAI,aAAa,EAAE,MAAM,0CAA0C,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/text-input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAC/E,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAEnG,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,0BAA0B,CAAC"}

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,21 +1,408 @@
-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 } from '@microsoft/fast-element';
-import { FASTTextField } from '@microsoft/fast-foundation/text-field.js';
+import { __decorate } from "tslib";
+import { attr, FASTElement, nullableNumberConverter, Observable, observable } from '@microsoft/fast-element';
+import { StartEnd } from '../patterns/start-end.js';
+import { applyMixins } from '../utils/apply-mixins.js';
+import { ImplicitSubmissionBlockingTypes, TextInputType } from './text-input.options.js';
 /**
- * The base class used for constructing a fluent-text-input custom element
+ * A Text Input Custom HTML Element.
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input | `<input>`} element.
+ *
+ * @slot start - Content which can be provided before the input
+ * @slot end - Content which can be provided after the input
+ * @slot - The default slot for button content
+ * @csspart label - The internal `<label>` element
+ * @csspart root - the root container for the internal control
+ * @csspart control - The internal `<input>` control
  * @public
  */
-export class TextInput extends FASTTextField {
+export class TextInput extends FASTElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Allows setting a type or mode of text.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: `type`
+         */
+        this.type = TextInputType.text;
+        /**
+         * The current value of the input.
+         *
+         * @internal
+         */
+        this._value = this.initialValue;
+        /**
+         * Indicates that the value has been changed by the user.
+         *
+         * @internal
+         */
+        this.dirtyValue = false;
+        /**
+         * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+         *
+         * @internal
+         */
+        this.elementInternals = this.attachInternals();
+    }
+    /**
+     * Updates the control label visibility based on the presence of default slotted content.
+     *
+     * @internal
+     */
+    defaultSlottedNodesChanged(prev, next) {
+        if (this.$fastController.isConnected) {
+            this.controlLabel.hidden = !(next === null || next === void 0 ? void 0 : next.length);
+        }
+    }
+    /**
+     * Sets the value of the element to the initial value.
+     *
+     * @internal
+     */
+    initialValueChanged() {
+        if (!this.dirtyValue) {
+            this.value = this.initialValue;
+        }
+    }
+    /**
+     * Syncs the `ElementInternals.ariaReadOnly` property when the `readonly` property changes.
+     *
+     * @internal
+     */
+    readOnlyChanged() {
+        if (this.$fastController.isConnected) {
+            this.elementInternals.ariaReadOnly = `${!!this.readOnly}`;
+        }
+    }
+    /**
+     * Syncs the element's internal `aria-required` state with the `required` attribute.
+     *
+     * @param previous - the previous required state
+     * @param next - the current required state
+     *
+     * @internal
+     */
+    requiredChanged(previous, next) {
+        if (this.$fastController.isConnected) {
+            this.elementInternals.ariaRequired = `${!!next}`;
+        }
+    }
+    /**
+     * The element's validity state.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validity | `ElementInternals.validity`} property.
+     */
+    get validity() {
+        return this.elementInternals.validity;
+    }
+    /**
+     * The validation message.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validationMessage | `ElementInternals.validationMessage`} property.
+     */
+    get validationMessage() {
+        return this.elementInternals.validationMessage || this.control.validationMessage;
+    }
+    /**
+     * The current value of the input.
+     * @public
+     */
+    get value() {
+        Observable.track(this, 'value');
+        return this._value;
+    }
+    set value(value) {
+        this._value = value;
+        if (this.$fastController.isConnected) {
+            this.control.value = value;
+            this.setFormValue(value);
+            this.setValidity();
+            Observable.notify(this, 'value');
+        }
+    }
+    /**
+     * Determines if the control can be submitted for constraint validation.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/willValidate | `ElementInternals.willValidate`} property.
+     */
+    get willValidate() {
+        return this.elementInternals.willValidate;
+    }
+    /**
+     * The associated form element.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/form | `ElementInternals.form`} property.
+     */
+    get form() {
+        return this.elementInternals.form;
+    }
+    /**
+     * Handles the internal control's `keypress` event.
+     *
+     * @internal
+     */
+    beforeinputHandler(e) {
+        if (e.inputType === 'insertLineBreak') {
+            this.implicitSubmit();
+        }
+        return true;
+    }
+    /**
+     * Change event handler for inner control.
+     *
+     * @internal
+     * @privateRemarks
+     * "Change" events are not `composable` so they will not permeate the shadow DOM boundary. This function effectively
+     * proxies the change event, emitting a `change` event whenever the internal control emits a `change` event.
+     */
+    changeHandler(e) {
+        this.setValidity();
+        this.$emit('change', e, {
+            bubbles: true,
+            composed: true,
+        });
+        return true;
+    }
+    /**
+     * Checks the validity of the element and returns the result.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/checkValidity | `HTMLInputElement.checkValidity()`} method.
+     */
+    checkValidity() {
+        return this.elementInternals.checkValidity();
+    }
+    /**
+     * Clicks the inner control when the component is clicked.
+     *
+     * @param e - the event object
+     */
+    clickHandler(e) {
+        var _a;
+        if (this.isSameNode(e.target)) {
+            (_a = this.control) === null || _a === void 0 ? void 0 : _a.click();
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setFormValue(this.value);
+        this.setValidity();
+    }
+    /**
+     * Focuses the inner control when the component is focused.
+     *
+     * @param e - the event object
+     * @public
+     */
+    focusinHandler(e) {
+        var _a;
+        (_a = this.control) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    /**
+     * Resets the value to its initial value when the form is reset.
+     *
+     * @internal
+     */
+    formResetCallback() {
+        this.value = this.initialValue;
+        this.dirtyValue = false;
+    }
+    /**
+     * Handles implicit form submission when the user presses the "Enter" key.
+     *
+     * @internal
+     */
+    implicitSubmit() {
+        if (!this.elementInternals.form) {
+            return;
+        }
+        if (this.elementInternals.form.elements.length === 1) {
+            this.elementInternals.form.requestSubmit();
+            return;
+        }
+        const formElements = [...this.elementInternals.form.elements];
+        // Try submitting with the first submit button, if any
+        const submitButton = formElements.find(x => x.getAttribute('type') === 'submit');
+        if (submitButton) {
+            submitButton.click();
+            return;
+        }
+        // Determine if there is only one implicit submission blocking element
+        const filteredElements = formElements.filter(x => { var _a; return ImplicitSubmissionBlockingTypes.includes((_a = x.getAttribute('type')) !== null && _a !== void 0 ? _a : ''); });
+        if (filteredElements.length > 1) {
+            return;
+        }
+        this.elementInternals.form.requestSubmit();
+    }
+    /**
+     * Handles the internal control's `input` event.
+     *
+     * @internal
+     */
+    inputHandler(e) {
+        this.dirtyValue = true;
+        this.value = this.control.value;
+        return true;
+    }
+    /**
+     * Handles the internal control's `keydown` event.
+     *
+     * @param e - the event object
+     * @internal
+     */
+    keydownHandler(e) {
+        if (e.key === 'Enter') {
+            this.implicitSubmit();
+        }
+        return true;
+    }
+    /**
+     * Selects all the text in the text field.
+     *
+     * @public
+     * @privateRemarks
+     * The `select` event does not permeate the shadow DOM boundary. This function effectively proxies the event,
+     * emitting a `select` event whenever the internal control emits a `select` event
+     *
+     */
+    select() {
+        this.control.select();
+        this.$emit('select');
+    }
+    /**
+     * Sets the custom validity message.
+     * @param message - The message to set
+     *
+     * @public
+     */
+    setCustomValidity(message) {
+        this.elementInternals.setValidity({ customError: true }, message);
+        this.reportValidity();
+    }
+    /**
+     * Reports the validity of the element.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/reportValidity | `HTMLInputElement.reportValidity()`} method.
+     */
+    reportValidity() {
+        return this.elementInternals.reportValidity();
+    }
+    /**
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/setFormValue | `ElementInternals.setFormValue()`} method.
+     *
+     * @internal
+     */
+    setFormValue(value, state) {
+        this.elementInternals.setFormValue(value, value !== null && value !== void 0 ? value : state);
+    }
+    /**
+     * Sets the validity of the control.
+     *
+     * @param flags - Validity flags. If not provided, the control's `validity` will be used.
+     * @param message - Optional message to supply. If not provided, the control's `validationMessage` will be used. If the control does not have a `validationMessage`, the message will be empty.
+     * @param anchor - Optional anchor to use for the validation message. If not provided, the control will be used.
+     *
+     * @internal
+     */
+    setValidity(flags = this.control.validity, message = this.validationMessage, anchor = this.control) {
+        if (this.$fastController.isConnected) {
+            if (this.disabled) {
+                this.elementInternals.setValidity({});
+                return;
+            }
+            this.elementInternals.setValidity(flags, message, anchor);
+        }
+    }
 }
+/**
+ * The form-associated flag.
+ * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
+ *
+ * @public
+ */
+TextInput.formAssociated = true;
+__decorate([
+    attr
+], TextInput.prototype, "appearance", void 0);
+__decorate([
+    attr
+], TextInput.prototype, "autocomplete", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], TextInput.prototype, "autofocus", void 0);
 __decorate([
     attr({ attribute: 'control-size' })
 ], TextInput.prototype, "controlSize", void 0);
+__decorate([
+    observable
+], TextInput.prototype, "defaultSlottedNodes", void 0);
 __decorate([
     attr
-], TextInput.prototype, "appearance", void 0);
+], TextInput.prototype, "dirname", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], TextInput.prototype, "disabled", void 0);
+__decorate([
+    attr({ attribute: 'form' })
+], TextInput.prototype, "formAttribute", void 0);
+__decorate([
+    attr({ attribute: 'value', mode: 'fromView' })
+], TextInput.prototype, "initialValue", 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({ mode: 'boolean' })
+], TextInput.prototype, "multiple", void 0);
+__decorate([
+    attr
+], TextInput.prototype, "name", void 0);
+__decorate([
+    attr
+], TextInput.prototype, "pattern", void 0);
+__decorate([
+    attr
+], TextInput.prototype, "placeholder", void 0);
+__decorate([
+    attr({ attribute: 'readonly', mode: 'boolean' })
+], TextInput.prototype, "readOnly", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], TextInput.prototype, "required", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], TextInput.prototype, "size", void 0);
+__decorate([
+    attr({
+        converter: {
+            fromView: value => (typeof value === 'string' ? ['true', ''].includes(value.trim().toLowerCase()) : null),
+            toView: value => value.toString(),
+        },
+    })
+], TextInput.prototype, "spellcheck", void 0);
+__decorate([
+    attr
+], TextInput.prototype, "type", void 0);
+__decorate([
+    observable
+], TextInput.prototype, "controlLabel", void 0);
+applyMixins(TextInput, StartEnd);
 //# sourceMappingURL=text-input.js.map