@fluentui/web-components 3.0.0-beta.8 → 3.0.0-beta.80

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

@@ -1,43 +1,55 @@
 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';
+import { filledDarkerState, filledLighterState, largeState, outlineState, smallState, underlineState, } from '../styles/states/index.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 +57,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 +84,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 +115,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});
+  :host(${outlineState}:focus-within) .root {
+    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});
+  :host(${smallState}) .control {
+    font-size: ${fontSizeBase200};
+    font-weight: ${fontWeightRegular};
+    line-height: ${lineHeightBase200};
   }
-  :host([control-size='small']) .root {
+  :host(${smallState}) .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});
+  :host(${smallState}) ::slotted([slot='start']),
+  :host(${smallState}) ::slotted([slot='end']) {
+    font-size: ${fontSizeBase400};
   }
-  :host([control-size='large']) .control {
-    font-size: var(${fontSizeBase400});
-    font-weight: var(${fontWeightRegular});
-    line-height: var(${lineHeightBase400});
+  :host(${largeState}) .control {
+    font-size: ${fontSizeBase400};
+    font-weight: ${fontWeightRegular};
+    line-height: ${lineHeightBase400};
   }
-  :host([control-size='large']) .root {
+  :host(${largeState}) .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});
+  :host(${largeState}) ::slotted([slot='start']),
+  :host(${largeState}) ::slotted([slot='end']) {
+    font-size: ${fontSizeBase600};
   }
-  :host([appearance='underline']) .root {
-    background: var(${colorTransparentBackground});
+  :host(${underlineState}) .root {
+    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});
+  :host(${underlineState}:hover) .root {
+    border-bottom-color: ${colorNeutralStrokeAccessibleHover};
   }
-  :host([appearance='underline']:active) .root {
-    border-bottom-color: var(${colorNeutralStrokeAccessiblePressed});
+  :host(${underlineState}:active) .root {
+    border-bottom-color: ${colorNeutralStrokeAccessiblePressed};
   }
-  :host([appearance='underline']:focus-within) .root {
+  :host(${underlineState}:focus-within) .root {
     border: 0;
-    border-bottom-color: var(${colorNeutralStrokeAccessiblePressed});
+    border-bottom-color: ${colorNeutralStrokeAccessiblePressed};
   }
-  :host([appearance='underline'][disabled]) .root {
-    border-bottom-color: var(${colorNeutralStrokeDisabled});
+  :host(${underlineState}[disabled]) .root {
+    border-bottom-color: ${colorNeutralStrokeDisabled};
   }
-  :host([appearance='filled-lighter']) .root,
-  :host([appearance='filled-darker']) .root {
-    border: var(${strokeWidthThin}) solid var(${colorTransparentStroke});
-    box-shadow: var(${shadow2});
+  :host(${filledLighterState}) .root,
+  :host(${filledDarkerState}) .root {
+    border: ${strokeWidthThin} solid ${colorTransparentStroke};
+    box-shadow: ${shadow2};
   }
-  :host([appearance='filled-lighter']) .root {
-    background: var(${colorNeutralBackground1});
+  :host(${filledLighterState}) .root {
+    background: ${colorNeutralBackground1};
   }
-  :host([appearance='filled-darker']) .root {
-    background: var(${colorNeutralBackground3});
+  :host(${filledDarkerState}) .root {
+    background: ${colorNeutralBackground3};
   }
-  :host([appearance='filled-lighter']:hover) .root,
-  :host([appearance='filled-darker']:hover) .root {
-    border-color: var(${colorTransparentStrokeInteractive});
+  :host(${filledLighterState}:hover) .root,
+  :host(${filledDarkerState}:hover) .root {
+    border-color: ${colorTransparentStrokeInteractive};
   }
-  :host([appearance='filled-lighter']:active) .root,
-  :host([appearance='filled-darker']:active) .root {
-    border-color: var(${colorTransparentStrokeInteractive});
-    background: var(${colorNeutralBackground3});
+  :host(${filledLighterState}:active) .root,
+  :host(${filledDarkerState}:active) .root {
+    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":"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"}

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

@@ -1,69 +1,59 @@
 import { html, ref, slotted } from '@microsoft/fast-element';
 import { endSlotTemplate, startSlotTemplate } from '../patterns/index.js';
 import { whitespaceFilter } from '../utils/index.js';
-export function textFieldTemplate(options = {}) {
+/**
+ * Generates a template for the TextInput component.
+ *
+ * @public
+ */
+export function textInputTemplate(options = {}) {
     return html `
-    <label
-      part="label"
-      for="control"
-      class="${x => (x.defaultSlottedNodes && x.defaultSlottedNodes.length ? 'label' : 'label label__hidden')}"
+    <template
+      @beforeinput="${(x, c) => x.beforeinputHandler(c.event)}"
+      @focusin="${(x, c) => x.focusinHandler(c.event)}"
+      @keydown="${(x, c) => x.keydownHandler(c.event)}"
     >
-      <slot
-        ${slotted({
+      <label part="label" for="control" class="label" ${ref('controlLabel')}>
+        <slot
+          ${slotted({
         property: 'defaultSlottedNodes',
         filter: whitespaceFilter,
     })}
-      ></slot>
-    </label>
-    <div class="root" part="root">
-      ${startSlotTemplate(options)}
-      <input
-        class="control"
-        part="control"
-        id="control"
-        @input="${x => x.handleTextInput()}"
-        @change="${x => x.handleChange()}"
-        ?autofocus="${x => x.autofocus}"
-        ?disabled="${x => x.disabled}"
-        list="${x => x.list}"
-        maxlength="${x => x.maxlength}"
-        name="${x => x.name}"
-        minlength="${x => x.minlength}"
-        pattern="${x => x.pattern}"
-        placeholder="${x => x.placeholder}"
-        ?readonly="${x => x.readOnly}"
-        ?required="${x => x.required}"
-        size="${x => x.size}"
-        ?spellcheck="${x => x.spellcheck}"
-        :value="${x => x.value}"
-        type="${x => x.type}"
-        aria-atomic="${x => x.ariaAtomic}"
-        aria-busy="${x => x.ariaBusy}"
-        aria-controls="${x => x.ariaControls}"
-        aria-current="${x => x.ariaCurrent}"
-        aria-describedby="${x => x.ariaDescribedby}"
-        aria-details="${x => x.ariaDetails}"
-        aria-disabled="${x => x.ariaDisabled}"
-        aria-errormessage="${x => x.ariaErrormessage}"
-        aria-flowto="${x => x.ariaFlowto}"
-        aria-haspopup="${x => x.ariaHaspopup}"
-        aria-hidden="${x => x.ariaHidden}"
-        aria-invalid="${x => x.ariaInvalid}"
-        aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
-        aria-label="${x => x.ariaLabel}"
-        aria-labelledby="${x => x.ariaLabelledby}"
-        aria-live="${x => x.ariaLive}"
-        aria-owns="${x => x.ariaOwns}"
-        aria-relevant="${x => x.ariaRelevant}"
-        aria-roledescription="${x => x.ariaRoledescription}"
-        ${ref('control')}
-      />
-      ${endSlotTemplate(options)}
-    </div>
+        ></slot>
+      </label>
+      <div class="root" part="root">
+        ${startSlotTemplate(options)}
+        <input
+          class="control"
+          part="control"
+          id="control"
+          @change="${(x, c) => x.changeHandler(c.event)}"
+          @input="${(x, c) => x.inputHandler(c.event)}"
+          ?autofocus="${x => x.autofocus}"
+          autocomplete="${x => x.autocomplete}"
+          ?disabled="${x => x.disabled}"
+          list="${x => x.list}"
+          maxlength="${x => x.maxlength}"
+          minlength="${x => x.minlength}"
+          ?multiple="${x => x.multiple}"
+          name="${x => x.name}"
+          pattern="${x => x.pattern}"
+          placeholder="${x => x.placeholder}"
+          ?readonly="${x => x.readOnly}"
+          ?required="${x => x.required}"
+          size="${x => x.size}"
+          spellcheck="${x => x.spellcheck}"
+          type="${x => x.type}"
+          value="${x => x.initialValue}"
+          ${ref('control')}
+        />
+        ${endSlotTemplate(options)}
+      </div>
+    </template>
   `;
 }
 /**
  * @internal
  */
-export const template = textFieldTemplate();
+export const template = textInputTemplate();
 //# sourceMappingURL=text-input.template.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"text-input.template.js","sourceRoot":"","sources":["../../../src/text-input/text-input.template.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"text-input.template.js","sourceRoot":"","sources":["../../../src/text-input/text-input.template.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAC1E,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAIrD;;;;GAIG;AACH,MAAM,UAAU,iBAAiB,CAAsB,UAA4B,EAAE;IACnF,OAAO,IAAI,CAAG;;sBAEM,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,KAAmB,CAAC;kBACzD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAmB,CAAC;kBACjD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAsB,CAAC;;wDAEd,GAAG,CAAC,cAAc,CAAC;;YAE/D,OAAO,CAAC;QACR,QAAQ,EAAE,qBAAqB;QAC/B,MAAM,EAAE,gBAAgB;KACzB,CAAC;;;;UAIF,iBAAiB,CAAC,OAAO,CAAC;;;;;qBAKf,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAmB,CAAC;oBACjD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;wBAC3C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;0BACd,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;uBACtB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;kBACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;uBACN,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;uBAChB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;uBAChB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;kBACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;qBACR,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;yBACV,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;uBACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;uBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;kBACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;wBACL,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;kBACvB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;mBACV,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;YAC1B,GAAG,CAAC,SAAS,CAAC;;UAEhB,eAAe,CAAC,OAAO,CAAC;;;GAG/B,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAmC,iBAAiB,EAAE,CAAC"}

package/dist/esm/textarea/define.js

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

package/dist/esm/textarea/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/textarea/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC"}

package/dist/esm/textarea/index.js

@@ -0,0 +1,6 @@
+export { definition as TextAreaDefinition } from './textarea.definition.js';
+export { BaseTextArea, TextArea } from './textarea.js';
+export { TextAreaAppearance, TextAreaAppearancesForDisplayShadow, TextAreaAutocomplete, TextAreaResize, TextAreaSize, } from './textarea.options.js';
+export { styles as TextAreaStyles } from './textarea.styles.js';
+export { template as TextAreaTemplate } from './textarea.template.js';
+//# sourceMappingURL=index.js.map

package/dist/esm/textarea/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/textarea/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC5E,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EACL,kBAAkB,EAClB,mCAAmC,EACnC,oBAAoB,EACpB,cAAc,EACd,YAAY,GACb,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAE,QAAQ,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/esm/textarea/textarea.bench.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.bench.js","sourceRoot":"","sources":["../../../src/textarea/textarea.bench.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;AAE/C,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAC3D,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/esm/textarea/textarea.definition.js

@@ -0,0 +1,20 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { TextArea } from './textarea.js';
+import { styles } from './textarea.styles.js';
+import { template } from './textarea.template.js';
+/**
+ * The Fluent Textarea Element definition.
+ *
+ * @public
+ * @remarks
+ * HTML Element: `<fluent-textarea>`
+ */
+export const definition = TextArea.compose({
+    name: `${FluentDesignSystem.prefix}-textarea`,
+    template,
+    styles,
+    shadowOptions: {
+        delegatesFocus: true,
+    },
+});
+//# sourceMappingURL=textarea.definition.js.map

package/dist/esm/textarea/textarea.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.definition.js","sourceRoot":"","sources":["../../../src/textarea/textarea.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAElD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,OAAO,CAAC;IACzC,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,WAAW;IAC7C,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACb,cAAc,EAAE,IAAI;KACrB;CACF,CAAC,CAAC"}