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

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

@@ -1,6 +1,7 @@
 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';
+import { blockState, boldState, centerState, endState, italicState, justifyState, mediumState, monospaceState, nowrapState, numericState, semiboldState, size1000State, size100State, size200State, size400State, size500State, size600State, size700State, size800State, size900State, strikethroughState, truncateState, underlineState, } from '../styles/states/index.js';
 /** Text styles
  * @public
  */
@@ -9,103 +10,105 @@ export const styles = css `
 
   :host {
     contain: content;
-  }
-
-  ::slotted(*) {
-    font-family: var(${fontFamilyBase});
-    font-size: var(${fontSizeBase300});
-    line-height: var(${lineHeightBase300});
-    font-weight: var(${fontWeightRegular});
+    font-family: ${fontFamilyBase};
+    font-size: ${fontSizeBase300};
+    line-height: ${lineHeightBase300};
+    font-weight: ${fontWeightRegular};
     text-align: start;
-    white-space: normal;
-    overflow: visible;
-    text-overflow: clip;
-    margin: 0;
-    display: inline;
   }
 
-  :host([nowrap]) ::slotted(*) {
+  :host(${nowrapState}),
+  :host(${nowrapState}) ::slotted(*) {
     white-space: nowrap;
     overflow: hidden;
   }
-  :host([truncate]) ::slotted(*) {
+  :host(${truncateState}),
+  :host(${truncateState}) ::slotted(*) {
     text-overflow: ellipsis;
   }
-  :host([block]),
-  :host([block]) ::slotted(*) {
+  :host(${blockState}) {
     display: block;
   }
-  :host([italic]) ::slotted(*) {
+  :host(${italicState}) {
     font-style: italic;
   }
-  :host([underline]) ::slotted(*) {
+  :host(${underlineState}) {
     text-decoration-line: underline;
   }
-  :host([strikethrough]) ::slotted(*) {
+  :host(${strikethroughState}) {
     text-decoration-line: line-through;
   }
-  :host([underline][strikethrough]) ::slotted(*) {
+  :host(${underlineState}${strikethroughState}) {
     text-decoration-line: line-through underline;
   }
-  :host([size='100']) ::slotted(*) {
-    font-size: var(${fontSizeBase100});
-    line-height: var(${lineHeightBase100});
+  :host(${size100State}) {
+    font-size: ${fontSizeBase100};
+    line-height: ${lineHeightBase100};
   }
-  :host([size='200']) ::slotted(*) {
-    font-size: var(${fontSizeBase200});
-    line-height: var(${lineHeightBase200});
+  :host(${size200State}) {
+    font-size: ${fontSizeBase200};
+    line-height: ${lineHeightBase200};
   }
-  :host([size='400']) ::slotted(*) {
-    font-size: var(${fontSizeBase400});
-    line-height: var(${lineHeightBase400});
+  :host(${size400State}) {
+    font-size: ${fontSizeBase400};
+    line-height: ${lineHeightBase400};
   }
-  :host([size='500']) ::slotted(*) {
-    font-size: var(${fontSizeBase500});
-    line-height: var(${lineHeightBase500});
+  :host(${size500State}) {
+    font-size: ${fontSizeBase500};
+    line-height: ${lineHeightBase500};
   }
-  :host([size='600']) ::slotted(*) {
-    font-size: var(${fontSizeBase600});
-    line-height: var(${lineHeightBase600});
+  :host(${size600State}) {
+    font-size: ${fontSizeBase600};
+    line-height: ${lineHeightBase600};
   }
-  :host([size='700']) ::slotted(*) {
-    font-size: var(${fontSizeHero700});
-    line-height: var(${lineHeightHero700});
+  :host(${size700State}) {
+    font-size: ${fontSizeHero700};
+    line-height: ${lineHeightHero700};
   }
-  :host([size='800']) ::slotted(*) {
-    font-size: var(${fontSizeHero800});
-    line-height: var(${lineHeightHero800});
+  :host(${size800State}) {
+    font-size: ${fontSizeHero800};
+    line-height: ${lineHeightHero800};
   }
-  :host([size='900']) ::slotted(*) {
-    font-size: var(${fontSizeHero900});
-    line-height: var(${lineHeightHero900});
+  :host(${size900State}) {
+    font-size: ${fontSizeHero900};
+    line-height: ${lineHeightHero900};
   }
-  :host([size='1000']) ::slotted(*) {
-    font-size: var(${fontSizeHero1000});
-    line-height: var(${lineHeightHero1000});
+  :host(${size1000State}) {
+    font-size: ${fontSizeHero1000};
+    line-height: ${lineHeightHero1000};
   }
-  :host([font='monospace']) ::slotted(*) {
-    font-family: var(${fontFamilyMonospace});
+  :host(${monospaceState}) {
+    font-family: ${fontFamilyMonospace};
   }
-  :host([font='numeric']) ::slotted(*) {
-    font-family: var(${fontFamilyNumeric});
+  :host(${numericState}) {
+    font-family: ${fontFamilyNumeric};
   }
-  :host([weight='medium']) ::slotted(*) {
-    font-weight: var(${fontWeightMedium});
+  :host(${mediumState}) {
+    font-weight: ${fontWeightMedium};
   }
-  :host([weight='semibold']) ::slotted(*) {
-    font-weight: var(${fontWeightSemibold});
+  :host(${semiboldState}) {
+    font-weight: ${fontWeightSemibold};
   }
-  :host([weight='bold']) ::slotted(*) {
-    font-weight: var(${fontWeightBold});
+  :host(${boldState}) {
+    font-weight: ${fontWeightBold};
   }
-  :host([align='center']) ::slotted(*) {
+  :host(${centerState}) {
     text-align: center;
   }
-  :host([align='end']) ::slotted(*) {
+  :host(${endState}) {
     text-align: end;
   }
-  :host([align='justify']) ::slotted(*) {
+  :host(${justifyState}) {
     text-align: justify;
   }
+
+  ::slotted(*) {
+    font: inherit;
+    line-height: inherit;
+    text-decoration-line: inherit;
+    text-align: inherit;
+    text-decoration-line: inherit;
+    margin: 0;
+  }
 `;
 //# sourceMappingURL=text.styles.js.map

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;;;;;;;uBAOE,cAAc;qBAChB,eAAe;uBACb,iBAAiB;uBACjB,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAiCnB,eAAe;uBACb,iBAAiB;;;qBAGnB,eAAe;uBACb,iBAAiB;;;qBAGnB,eAAe;uBACb,iBAAiB;;;qBAGnB,eAAe;uBACb,iBAAiB;;;qBAGnB,eAAe;uBACb,iBAAiB;;;qBAGnB,eAAe;uBACb,iBAAiB;;;qBAGnB,eAAe;uBACb,iBAAiB;;;qBAGnB,eAAe;uBACb,iBAAiB;;;qBAGnB,gBAAgB;uBACd,kBAAkB;;;uBAGlB,mBAAmB;;;uBAGnB,iBAAiB;;;uBAGjB,gBAAgB;;;uBAGhB,kBAAkB;;;uBAGlB,cAAc;;;;;;;;;;;CAWpC,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;AACnC,OAAO,EACL,UAAU,EACV,SAAS,EACT,WAAW,EACX,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,WAAW,EACX,cAAc,EACd,WAAW,EACX,YAAY,EACZ,aAAa,EACb,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,kBAAkB,EAClB,aAAa,EACb,cAAc,GACf,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,QAAQ,CAAC;;;;mBAIF,cAAc;iBAChB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;UAI1B,WAAW;UACX,WAAW;;;;UAIX,aAAa;UACb,aAAa;;;UAGb,UAAU;;;UAGV,WAAW;;;UAGX,cAAc;;;UAGd,kBAAkB;;;UAGlB,cAAc,GAAG,kBAAkB;;;UAGnC,YAAY;iBACL,eAAe;mBACb,iBAAiB;;UAE1B,YAAY;iBACL,eAAe;mBACb,iBAAiB;;UAE1B,YAAY;iBACL,eAAe;mBACb,iBAAiB;;UAE1B,YAAY;iBACL,eAAe;mBACb,iBAAiB;;UAE1B,YAAY;iBACL,eAAe;mBACb,iBAAiB;;UAE1B,YAAY;iBACL,eAAe;mBACb,iBAAiB;;UAE1B,YAAY;iBACL,eAAe;mBACb,iBAAiB;;UAE1B,YAAY;iBACL,eAAe;mBACb,iBAAiB;;UAE1B,aAAa;iBACN,gBAAgB;mBACd,kBAAkB;;UAE3B,cAAc;mBACL,mBAAmB;;UAE5B,YAAY;mBACH,iBAAiB;;UAE1B,WAAW;mBACF,gBAAgB;;UAEzB,aAAa;mBACJ,kBAAkB;;UAE3B,SAAS;mBACA,cAAc;;UAEvB,WAAW;;;UAGX,QAAQ;;;UAGR,YAAY;;;;;;;;;;;;CAYrB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"text.template.js","sourceRoot":"","sources":["../../../src/text/text.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGpE;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA8B,IAAI,CAAM,eAAe,CAAC"}
+{"version":3,"file":"text.template.js","sourceRoot":"","sources":["../../../src/text/text.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGzE;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA8B,IAAI,CAAM,eAAe,CAAC"}

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

@@ -1,6 +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 { BaseTextInput, 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"}
+{"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,aAAa,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC3D,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"}