export text, update node resolution to 16 and fix object.keys for siz…

…e to object.values

packages/web-components/docs/api-report.md

@@ -4,8 +4,85 @@
 
 ```ts
 
-// @public (undocumented)
-export const empty = "";
+import { ElementStyles } from '@microsoft/fast-element';
+import { ElementViewTemplate } from '@microsoft/fast-element';
+import { FASTElement } from '@microsoft/fast-element';
+import { FASTElementDefinition } from '@microsoft/fast-element';
+
+// @public
+class Text_2 extends FASTElement {
+    align: TextAlign;
+    block: boolean;
+    font: TextFont;
+    italic: boolean;
+    nowrap: boolean;
+    size: TextSize;
+    strikethrough: boolean;
+    truncate: boolean;
+    underline: boolean;
+    weight: TextWeight;
+}
+export { Text_2 as Text }
+
+// @public
+export const TextAlign: {
+    readonly start: "start";
+    readonly end: "end";
+    readonly center: "center";
+    readonly justify: "justify";
+};
+
+// @public
+export type TextAlign = typeof TextAlign[keyof typeof TextAlign];
+
+// @public
+export const TextDefinition: FASTElementDefinition<typeof Text_2>;
+
+// @public
+export const TextFont: {
+    readonly base: "base";
+    readonly numeric: "numeric";
+    readonly monospace: "monospace";
+};
+
+// @public
+export type TextFont = typeof TextFont[keyof typeof TextFont];
+
+// @public
+export const TextSize: {
+    readonly _100: "100";
+    readonly _200: "200";
+    readonly _300: "300";
+    readonly _400: "400";
+    readonly _500: "500";
+    readonly _600: "600";
+    readonly _700: "700";
+    readonly _800: "800";
+    readonly _900: "900";
+    readonly _1000: "1000";
+};
+
+// @public
+export type TextSize = typeof TextSize[keyof typeof TextSize];
+
+// @public
+export const TextStyles: ElementStyles;
+
+// Warning: (ae-internal-missing-underscore) The name "TextTemplate" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export const TextTemplate: ElementViewTemplate<Text_2>;
+
+// @public
+export const TextWeight: {
+    readonly medium: "medium";
+    readonly regular: "regular";
+    readonly semibold: "semibold";
+    readonly bold: "bold";
+};
+
+// @public
+export type TextWeight = typeof TextWeight[keyof typeof TextWeight];
 
 // (No @packageDocumentation comment for this package)
 

packages/web-components/package.json

@@ -19,6 +19,16 @@
   "main": "dist/esm/index.js",
   "types": "dist/web-components.d.ts",
   "unpkg": "dist/web-components.min.js",
+  "exports": {
+    ".": {
+      "types": "./dist/dts/index.d.ts",
+      "default": "./dist/esm/index.js"
+    },
+    "./text": {
+      "types": "./dist/esm/text/define.d.ts",
+      "default": "./dist/esm/text/define.js"
+    }
+  },
   "scripts": {
     "tsc": "tsc",
     "api-extractor": "api-extractor",

packages/web-components/src/index-rollup.ts

@@ -1 +1 @@
-export * from './index';
+export * from './index.js';

packages/web-components/src/index.ts

@@ -1 +1 @@
-export const empty = '';
+export * from './text/index.js';

packages/web-components/src/text/text.stories.ts

@@ -3,7 +3,7 @@ import type { Args, Meta } from '@storybook/html';
 import { renderComponent } from '../__test__/helpers.js';
 import type { Text as FluentText } from './text.js';
 import './define.js';
-import { TextAlign, TextFont, TextSize, TextWeight } from './text.options';
+import { TextAlign, TextFont, TextSize, TextWeight } from './text.options.js';
 
 type TextStoryArgs = Args & FluentText;
 type TextStoryMeta = Meta<TextStoryArgs>;
@@ -73,7 +73,7 @@ export default {
       },
     },
     size: {
-      options: Object.keys(TextSize),
+      options: Object.values(TextSize),
       control: {
         type: 'select',
       },

packages/web-components/src/text/text.template.ts

@@ -1,4 +1,7 @@
 import { ElementViewTemplate, html } from '@microsoft/fast-element';
 import type { Text } from './text.js';
 
+/**
+ * @internal
+ */
 export const template: ElementViewTemplate<Text> = html<Text>`<slot></slot>`;

packages/web-components/src/text/text.ts

@@ -2,7 +2,8 @@ import { attr, FASTElement } from '@microsoft/fast-element';
 import type { TextAlign, TextFont, TextSize, TextWeight } from './text.options.js';
 
 /**
- * @internal
+ * The base class used for constructing a fluent-text custom element
+ * @public
  */
 export class Text extends FASTElement {
   /**

packages/web-components/src/theme/index.ts

@@ -1,2 +1,2 @@
-export * from './design-tokens';
-export { setTheme } from './set-theme';
+export * from './design-tokens.js';
+export { setTheme } from './set-theme.js';

packages/web-components/src/theme/set-theme.ts

@@ -1,5 +1,5 @@
 import type { Theme } from '@fluentui/tokens';
-import * as tokens from './design-tokens';
+import * as tokens from './design-tokens.js';
 
 const tokenNames = Object.keys(tokens);
 

packages/web-components/src/theme/theme.stories.ts

@@ -1,5 +1,5 @@
 import { DesignToken } from '@microsoft/fast-foundation';
-import * as tokens from '../theme/design-tokens';
+import * as tokens from '../theme/design-tokens.js';
 
 DesignToken.registerDefaultStyleTarget();
 

packages/web-components/tsconfig.json

@@ -4,7 +4,7 @@
     "esModuleInterop": true,
     "experimentalDecorators": true,
     "resolveJsonModule": true,
-    "moduleResolution": "node",
+    "moduleResolution": "Node16",
     "declarationDir": "dist/dts",
     "outDir": "dist/esm",
     "strictNullChecks": true,