@fluentui/web-components 3.0.0-alpha.21 → 3.0.0-alpha.23

package/CHANGELOG.json

@@ -2,7 +2,37 @@
   "name": "@fluentui/web-components",
   "entries": [
     {
-      "date": "Mon, 15 May 2023 04:19:50 GMT",
+      "date": "Thu, 08 Jun 2023 04:17:55 GMT",
+      "tag": "@fluentui/web-components_v3.0.0-alpha.23",
+      "version": "3.0.0-alpha.23",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "brianbrady@microsoft.com",
+            "package": "@fluentui/web-components",
+            "commit": "ac7f17ec809a50b1b709e5fd66e8566b4181f08e",
+            "comment": "feat(text-input): add TextInput as a new web component"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 24 May 2023 04:19:34 GMT",
+      "tag": "@fluentui/web-components_v3.0.0-alpha.22",
+      "version": "3.0.0-alpha.22",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "harankin@microsoft.com",
+            "package": "@fluentui/web-components",
+            "commit": "60b51196b1939782da61b7ff578c17fa510ef864",
+            "comment": "feat(menu-item): export MenuItemRole constants"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 15 May 2023 04:19:56 GMT",
       "tag": "@fluentui/web-components_v3.0.0-alpha.21",
       "version": "3.0.0-alpha.21",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,30 @@
 # Change Log - @fluentui/web-components
 
-This log was last generated on Mon, 15 May 2023 04:19:50 GMT and should not be manually modified.
+This log was last generated on Thu, 08 Jun 2023 04:17:55 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [3.0.0-alpha.23](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.23)
+
+Thu, 08 Jun 2023 04:17:55 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.22..@fluentui/web-components_v3.0.0-alpha.23)
+
+### Changes
+
+- feat(text-input): add TextInput as a new web component ([PR #27348](https://github.com/microsoft/fluentui/pull/27348) by brianbrady@microsoft.com)
+
+## [3.0.0-alpha.22](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.22)
+
+Wed, 24 May 2023 04:19:34 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.21..@fluentui/web-components_v3.0.0-alpha.22)
+
+### Changes
+
+- feat(menu-item): export MenuItemRole constants ([PR #27941](https://github.com/microsoft/fluentui/pull/27941) by harankin@microsoft.com)
+
 ## [3.0.0-alpha.21](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.21)
 
-Mon, 15 May 2023 04:19:50 GMT 
+Mon, 15 May 2023 04:19:56 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.20..@fluentui/web-components_v3.0.0-alpha.21)
 
 ### Changes

package/dist/dts/index.d.ts

@@ -22,5 +22,6 @@ export * from './tabs/index.js';
 export * from './tab/index.js';
 export * from './tab-panel/index.js';
 export * from './text/index.js';
+export * from './text-input/index.js';
 export * from './toggle-button/index.js';
 export * from './theme/index.js';

package/dist/dts/menu-item/menu-item.d.ts

@@ -1,5 +1,6 @@
-import { FASTMenuItem } from '@microsoft/fast-foundation';
+import { FASTMenuItem, MenuItemRole } from '@microsoft/fast-foundation';
 export declare type MenuItemColumnCount = 0 | 1 | 2;
+export { MenuItemRole };
 /**
  * The base class used for constructing a fluent-menu-item custom element
  * @public

package/dist/dts/text-input/define.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/dts/text-input/index.d.ts

@@ -0,0 +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';

package/dist/dts/text-input/text-input.d.ts

@@ -0,0 +1,26 @@
+import { FASTTextField } from '@microsoft/fast-foundation';
+import { TextInputAppearance, TextInputControlSize } from './text-input.options.js';
+/**
+ * The base class used for constructing a fluent-text-input custom element
+ * @public
+ */
+export declare class TextInput extends FASTTextField {
+    /**
+     * Defines TextInput control size
+     *
+     * @public
+     * @default 'medium'
+     * @remarks
+     * HTML Attribute: control-size
+     */
+    controlSize?: TextInputControlSize;
+    /**
+     * Defines TextInput appearance.
+     *
+     * @public
+     * @default 'outline'
+     * @remarks
+     * HTML Attribute: appearance
+     */
+    appearance?: TextInputAppearance;
+}

package/dist/dts/text-input/text-input.definition.d.ts

@@ -0,0 +1,10 @@
+import { TextInput } from './text-input.js';
+/**
+ * The Fluent TextInput Element.
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-text-input\>
+ */
+export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof TextInput>;

package/dist/dts/text-input/text-input.options.d.ts

@@ -0,0 +1,30 @@
+import { ValuesOf } from '@microsoft/fast-foundation';
+/**
+ * TextInput size constants
+ * @public
+ */
+export declare const TextInputControlSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+};
+/**
+ * Applies size styling to TextInput
+ * @public
+ */
+export declare type TextInputControlSize = ValuesOf<typeof TextInputControlSize>;
+/**
+ * TextInput appearance constants
+ * @public
+ */
+export declare const TextInputAppearance: {
+    readonly outline: "outline";
+    readonly underline: "underline";
+    readonly filledLighter: "filled-lighter";
+    readonly filledDarker: "filled-darker";
+};
+/**
+ * Applies appearance styling to TextInput
+ * @public
+ */
+export declare type TextInputAppearance = ValuesOf<typeof TextInputAppearance>;

package/dist/dts/text-input/text-input.styles.d.ts

@@ -0,0 +1,4 @@
+/** TextInput styles
+ * @public
+ */
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/dts/text-input/text-input.template.d.ts

@@ -0,0 +1,6 @@
+import { ElementViewTemplate } from '@microsoft/fast-element';
+import type { TextInput } from './text-input.js';
+/**
+ * @internal
+ */
+export declare const template: ElementViewTemplate<TextInput>;

package/dist/esm/index.js

@@ -22,6 +22,7 @@ export * from './tabs/index.js';
 export * from './tab/index.js';
 export * from './tab-panel/index.js';
 export * from './text/index.js';
+export * from './text-input/index.js';
 export * from './toggle-button/index.js';
 export * from './theme/index.js';
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,iBAAiB,CAAC;AAChC,cAAc,0BAA0B,CAAC;AAEzC,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AAEzC,cAAc,kBAAkB,CAAC"}

package/dist/esm/menu-item/menu-item.js

@@ -1,4 +1,5 @@
-import { FASTMenuItem } from '@microsoft/fast-foundation';
+import { FASTMenuItem, MenuItemRole } from '@microsoft/fast-foundation';
+export { MenuItemRole };
 /**
  * The base class used for constructing a fluent-menu-item custom element
  * @public

package/dist/esm/menu-item/menu-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.js","sourceRoot":"","sources":["../../../src/menu-item/menu-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAI1D;;;GAGG;AACH,MAAM,OAAO,QAAS,SAAQ,YAAY;CAAG"}
+{"version":3,"file":"menu-item.js","sourceRoot":"","sources":["../../../src/menu-item/menu-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAIxE,OAAO,EAAE,YAAY,EAAE,CAAC;AAExB;;;GAGG;AACH,MAAM,OAAO,QAAS,SAAQ,YAAY;CAAG"}

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

@@ -0,0 +1,4 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './text-input.definition.js';
+definition.define(FluentDesignSystem.registry);
+//# sourceMappingURL=define.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/text-input/define.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"}

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

@@ -0,0 +1,7 @@
+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';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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,4BAA4B,CAAC"}

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

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

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

@@ -0,0 +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"}

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

@@ -0,0 +1,16 @@
+import { __decorate } from "tslib";
+import { attr } from '@microsoft/fast-element';
+import { FASTTextField } from '@microsoft/fast-foundation';
+/**
+ * The base class used for constructing a fluent-text-input custom element
+ * @public
+ */
+export class TextInput extends FASTTextField {
+}
+__decorate([
+    attr({ attribute: 'control-size' })
+], TextInput.prototype, "controlSize", void 0);
+__decorate([
+    attr
+], TextInput.prototype, "appearance", void 0);
+//# sourceMappingURL=text-input.js.map

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

@@ -0,0 +1 @@
+{"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,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAG3D;;;GAGG;AACH,MAAM,OAAO,SAAU,SAAQ,aAAa;CAsB3C;AAZC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;8CACM;AAW1C;IADC,IAAI;6CACmC"}

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

@@ -0,0 +1,20 @@
+/**
+ * TextInput size constants
+ * @public
+ */
+export const TextInputControlSize = {
+    small: 'small',
+    medium: 'medium',
+    large: 'large',
+};
+/**
+ * TextInput appearance constants
+ * @public
+ */
+export const TextInputAppearance = {
+    outline: 'outline',
+    underline: 'underline',
+    filledLighter: 'filled-lighter',
+    filledDarker: 'filled-darker',
+};
+//# sourceMappingURL=text-input.options.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,200 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+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
+ * @public
+ */
+export const styles = css `
+  ${display('block')}
+
+  :host {
+    font-family: ${fontFamilyBase};
+    font-size: ${fontSizeBase300};
+    font-weight: ${fontWeightRegular};
+    line-height: ${lineHeightBase300};
+    max-width: 400px;
+  }
+  .label {
+    display: flex;
+    color: ${colorNeutralForeground1};
+    padding-bottom: ${spacingVerticalXS};
+    flex-shrink: 0;
+    padding-inline-end: ${spacingHorizontalXS};
+  }
+  .label__hidden {
+    display: none;
+  }
+  .root {
+    position: relative;
+    box-sizing: border-box;
+    height: 32px;
+    display: inline-flex;
+    align-items: center;
+    flex-direction: row;
+    width: 100%;
+    padding: 0 ${spacingHorizontalMNudge};
+    border: ${strokeWidthThin} solid ${colorNeutralStroke1};
+    border-bottom-color: ${colorNeutralStrokeAccessible};
+    border-radius: ${borderRadiusMedium};
+    gap: ${spacingHorizontalXXS};
+  }
+  .root::after {
+    box-sizing: border-box;
+    content: '';
+    position: absolute;
+    left: -1px;
+    bottom: 0px;
+    right: -1px;
+    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: ${durationUltraFast};
+    transition-delay: ${curveAccelerateMid};
+  }
+  .control {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    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 {
+    outline: 0;
+    border: 0;
+  }
+  .control::placeholder {
+    color: ${colorNeutralForeground4};
+  }
+  :host ::slotted([slot='start']),
+  :host ::slotted([slot='end']) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: ${colorNeutralForeground3};
+    font-size: ${fontSizeBase500};
+  }
+  :host ::slotted([slot='start']) {
+    padding-right: ${spacingHorizontalXXS};
+  }
+  :host ::slotted([slot='end']) {
+    padding-left: ${spacingHorizontalXXS};
+    gap: ${spacingHorizontalXS};
+  }
+  :host(:hover) .root {
+    border-color: ${colorNeutralStroke1Hover};
+    border-bottom-color: ${colorNeutralStrokeAccessibleHover};
+  }
+  :host(:active) .root {
+    border-color: ${colorNeutralStroke1Pressed};
+  }
+  :host(:focus-within) .root {
+    outline: transparent solid 2px;
+    border-bottom: 0;
+  }
+  :host(:focus-within) .root::after {
+    transform: scaleX(1);
+    transition-property: transform;
+    transition-duration: ${durationNormal};
+    transition-delay: ${curveDecelerateMid};
+  }
+  :host(:focus-within:active) .root:after {
+    border-bottom-color: ${colorCompoundBrandStrokePressed};
+  }
+  :host([appearance='outline']:focus-within) .root {
+    border: ${strokeWidthThin} solid ${colorNeutralStroke1};
+  }
+  :host(:focus-within) .control {
+    color: ${colorNeutralForeground1};
+  }
+  :host([disabled]) .root {
+    background: ${colorTransparentBackground};
+    border: ${strokeWidthThin} solid ${colorNeutralStrokeDisabled};
+  }
+  :host([disabled]) .control::placeholder,
+  :host([disabled]) ::slotted([slot='start']),
+  :host([disabled]) ::slotted([slot='end']) {
+    color: ${colorNeutralForegroundDisabled};
+  }
+  ::selection {
+    color: ${colorNeutralForegroundInverted};
+    background-color: ${colorNeutralBackgroundInverted};
+  }
+  :host([control-size='small']) .control {
+    font-size: ${fontSizeBase200};
+    font-weight: ${fontWeightRegular};
+    line-height: ${lineHeightBase200};
+  }
+  :host([control-size='small']) .root {
+    height: 24px;
+    gap: ${spacingHorizontalXXS};
+    padding: 0 ${spacingHorizontalSNudge};
+  }
+  :host([control-size='small']) ::slotted([slot='start']),
+  :host([control-size='small']) ::slotted([slot='end']) {
+    font-size: ${fontSizeBase400};
+  }
+  :host([control-size='large']) .control {
+    font-size: ${fontSizeBase400};
+    font-weight: ${fontWeightRegular};
+    line-height: ${lineHeightBase400};
+  }
+  :host([control-size='large']) .root {
+    height: 40px;
+    gap: ${spacingHorizontalS};
+    padding: 0 ${spacingHorizontalM};
+  }
+  :host([control-size='large']) ::slotted([slot='start']),
+  :host([control-size='large']) ::slotted([slot='end']) {
+    font-size: ${fontSizeBase600};
+  }
+  :host([appearance='underline']) .root {
+    background: ${colorTransparentBackground};
+    border: 0;
+    border-radius: 0;
+    border-bottom: ${strokeWidthThin} solid ${colorNeutralStrokeAccessible};
+  }
+  :host([appearance='underline']:hover) .root {
+    border-bottom-color: ${colorNeutralStrokeAccessibleHover};
+  }
+  :host([appearance='underline']:active) .root {
+    border-bottom-color: ${colorNeutralStrokeAccessiblePressed};
+  }
+  :host([appearance='underline']:focus-within) .root {
+    border: 0;
+    border-bottom-color: ${colorNeutralStrokeAccessiblePressed};
+  }
+  :host([appearance='underline'][disabled]) .root {
+    border-bottom-color: ${colorNeutralStrokeDisabled};
+  }
+  :host([appearance='filled-lighter']) .root,
+  :host([appearance='filled-darker']) .root {
+    border: ${strokeWidthThin} solid ${colorTransparentStroke};
+    box-shadow: ${shadow2};
+  }
+  :host([appearance='filled-lighter']) .root {
+    background: ${colorNeutralBackground1};
+  }
+  :host([appearance='filled-darker']) .root {
+    background: ${colorNeutralBackground3};
+  }
+  :host([appearance='filled-lighter']:hover) .root,
+  :host([appearance='filled-darker']:hover) .root {
+    border-color: ${colorTransparentStrokeInteractive};
+  }
+  :host([appearance='filled-lighter']:active) .root,
+  :host([appearance='filled-darker']:active) .root {
+    border-color: ${colorTransparentStrokeInteractive};
+    background: ${colorNeutralBackground3};
+  }
+`;
+//# sourceMappingURL=text-input.styles.js.map

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

@@ -0,0 +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,4BAA4B,CAAC;AACrD,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;;;mBAGD,cAAc;iBAChB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;;aAKvB,uBAAuB;sBACd,iBAAiB;;0BAEb,mBAAmB;;;;;;;;;;;;;iBAa5B,uBAAuB;cAC1B,eAAe,UAAU,mBAAmB;2BAC/B,4BAA4B;qBAClC,kBAAkB;WAC5B,oBAAoB;;;;;;;;;uBASR,kBAAkB;yBAChB,kBAAkB,IAAI,kBAAkB;+BAClC,wBAAwB;;;;2BAI5B,iBAAiB;wBACpB,kBAAkB;;;;;;aAM7B,uBAAuB;qBACf,kBAAkB;kBACrB,0BAA0B;mBACzB,cAAc;mBACd,iBAAiB;iBACnB,eAAe;;;;;;;;;;aAUnB,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"}

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

@@ -0,0 +1,6 @@
+import { textFieldTemplate } from '@microsoft/fast-foundation';
+/**
+ * @internal
+ */
+export const template = textFieldTemplate();
+//# sourceMappingURL=text-input.template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text-input.template.js","sourceRoot":"","sources":["../../../src/text-input/text-input.template.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAG/D;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAmC,iBAAiB,EAAE,CAAC"}