@fluentui/web-components 3.0.0-beta.52 → 3.0.0-beta.54

package/dist/esm/theme/set-theme.js

@@ -1,12 +1,20 @@
-import * as tokens from './design-tokens.js';
-const tokenNames = Object.keys(tokens);
 const SUPPORTS_REGISTER_PROPERTY = 'registerProperty' in CSS;
 const SUPPORTS_ADOPTED_STYLE_SHEETS = 'adoptedStyleSheets' in document;
 const themeStyleSheet = new CSSStyleSheet();
 const themeStyleTextMap = new Map();
 /**
- * Sets the theme tokens on defaultNode.
- * @param theme - Flat object of theme token values.
+ * Sets the theme tokens as CSS Custom Properties. The Custom Properties are
+ * set in a constructed stylesheet on `document.adoptedStyleSheets` if
+ * supported, and on `document.documentElement.style` as a fallback.
+ *
+ * @param theme - Flat object of theme tokens. Each object entry must follow
+ *     these rules: the key is the name of the token, usually in camel case, it
+ *     must be a valid CSS Custom Property name WITHOUT the starting two dashes
+ *     (`--`), the two dashes are added inside the function; the value must be
+ *     a valid CSS value, e.g. it cannot contain semicolons (`;`).
+ *     Note that this argument is not limited to existing theme objects (from
+ *     `@fluentui/tokens`), you can pass in an arbitrary theme object as long
+ *     as each entry’s value is either a string or a number.
  * @internal
  */
 export const setTheme = (theme) => {
@@ -20,18 +28,23 @@ export const setTheme = (theme) => {
     }
     if (!themeStyleTextMap.has(theme)) {
         const tokenDeclarations = [];
-        for (const t of tokenNames) {
+        for (const [tokenName, tokenValue] of Object.entries(theme)) {
+            if (typeof tokenValue !== 'string' && Number.isNaN(tokenValue)) {
+                throw new Error(`"${tokenName}" must be a string or a number.`);
+            }
+            const name = `--${tokenName}`;
+            const initialValue = tokenValue.toString();
             if (SUPPORTS_REGISTER_PROPERTY) {
                 try {
                     CSS.registerProperty({
-                        name: `--${t}`,
+                        name,
+                        initialValue,
                         inherits: true,
-                        initialValue: theme[t],
                     });
                 }
                 catch { }
             }
-            tokenDeclarations.push(`--${t}: ${theme[t]};`);
+            tokenDeclarations.push(`${name}:${initialValue};`);
         }
         themeStyleTextMap.set(theme, `html{${tokenDeclarations.join('')}}`);
     }
@@ -46,8 +59,8 @@ export const setTheme = (theme) => {
  * @internal
  */
 export const setThemeFor = (element, theme) => {
-    for (const t of tokenNames) {
-        element.style.setProperty(`--${t}`, theme[t]);
+    for (const [tokenName, tokenValue] of Object.entries(theme)) {
+        element.style.setProperty(`--${tokenName}`, tokenValue.toString());
     }
 };
 //# sourceMappingURL=set-theme.js.map

package/dist/esm/theme/set-theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"set-theme.js","sourceRoot":"","sources":["../../../src/theme/set-theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,oBAAoB,CAAC;AAS7C,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAoB,CAAC;AAE1D,MAAM,0BAA0B,GAAG,kBAAkB,IAAI,GAAG,CAAC;AAC7D,MAAM,6BAA6B,GAAG,oBAAoB,IAAI,QAAQ,CAAC;AACvE,MAAM,eAAe,GAAG,IAAI,aAAa,EAAE,CAAC;AAC5C,MAAM,iBAAiB,GAAG,IAAI,GAAG,EAAiB,CAAC;AAEnD;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAY,EAAE,EAAE;IACvC,4EAA4E;IAC5E,yEAAyE;IACzE,2EAA2E;IAC3E,oBAAoB;IACpB,IAAI,CAAC,6BAA6B,EAAE;QAClC,WAAW,CAAC,QAAQ,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC;QAC7C,OAAO;KACR;IAED,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;QACjC,MAAM,iBAAiB,GAAa,EAAE,CAAC;QAEvC,KAAK,MAAM,CAAC,IAAI,UAAU,EAAE;YAC1B,IAAI,0BAA0B,EAAE;gBAC9B,IAAI;oBACF,GAAG,CAAC,gBAAgB,CAAC;wBACnB,IAAI,EAAE,KAAK,CAAC,EAAE;wBACd,QAAQ,EAAE,IAAI;wBACd,YAAY,EAAE,KAAK,CAAC,CAAC,CAAW;qBACjC,CAAC,CAAC;iBACJ;gBAAC,MAAM,GAAE;aACX;YACD,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,CAAC,CAAC,CAAW,GAAG,CAAC,CAAC;SAC1D;QAED,iBAAiB,CAAC,GAAG,CAAC,KAAK,EAAE,QAAQ,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;KACrE;IAED,8CAA8C;IAC9C,eAAe,CAAC,WAAW,CAAC,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAE,CAAC,CAAC;IAE3D,gEAAgE;IAChE,IAAI,CAAC,QAAQ,CAAC,kBAAkB,CAAC,QAAQ,CAAC,eAAe,CAAC,EAAE;QAC1D,QAAQ,CAAC,kBAAkB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;KACnD;AACH,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,OAAoB,EAAE,KAAY,EAAE,EAAE;IAChE,KAAK,MAAM,CAAC,IAAI,UAAU,EAAE;QAC1B,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC,CAAW,CAAC,CAAC;KACzD;AACH,CAAC,CAAC"}
+{"version":3,"file":"set-theme.js","sourceRoot":"","sources":["../../../src/theme/set-theme.ts"],"names":[],"mappings":"AAOA,MAAM,0BAA0B,GAAG,kBAAkB,IAAI,GAAG,CAAC;AAC7D,MAAM,6BAA6B,GAAG,oBAAoB,IAAI,QAAQ,CAAC;AACvE,MAAM,eAAe,GAAG,IAAI,aAAa,EAAE,CAAC;AAC5C,MAAM,iBAAiB,GAAG,IAAI,GAAG,EAAiB,CAAC;AAEnD;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAY,EAAE,EAAE;IACvC,4EAA4E;IAC5E,yEAAyE;IACzE,2EAA2E;IAC3E,oBAAoB;IACpB,IAAI,CAAC,6BAA6B,EAAE;QAClC,WAAW,CAAC,QAAQ,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC;QAC7C,OAAO;KACR;IAED,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;QACjC,MAAM,iBAAiB,GAAa,EAAE,CAAC;QAEvC,KAAK,MAAM,CAAC,SAAS,EAAE,UAAU,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YAC3D,IAAI,OAAO,UAAU,KAAK,QAAQ,IAAI,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,EAAE;gBAC9D,MAAM,IAAI,KAAK,CAAC,IAAI,SAAS,iCAAiC,CAAC,CAAC;aACjE;YAED,MAAM,IAAI,GAAG,KAAK,SAAS,EAAE,CAAC;YAC9B,MAAM,YAAY,GAAG,UAAU,CAAC,QAAQ,EAAE,CAAC;YAC3C,IAAI,0BAA0B,EAAE;gBAC9B,IAAI;oBACF,GAAG,CAAC,gBAAgB,CAAC;wBACnB,IAAI;wBACJ,YAAY;wBACZ,QAAQ,EAAE,IAAI;qBACf,CAAC,CAAC;iBACJ;gBAAC,MAAM,GAAE;aACX;YACD,iBAAiB,CAAC,IAAI,CAAC,GAAG,IAAI,IAAI,YAAY,GAAG,CAAC,CAAC;SACpD;QAED,iBAAiB,CAAC,GAAG,CAAC,KAAK,EAAE,QAAQ,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;KACrE;IAED,8CAA8C;IAC9C,eAAe,CAAC,WAAW,CAAC,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAE,CAAC,CAAC;IAE3D,gEAAgE;IAChE,IAAI,CAAC,QAAQ,CAAC,kBAAkB,CAAC,QAAQ,CAAC,eAAe,CAAC,EAAE;QAC1D,QAAQ,CAAC,kBAAkB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;KACnD;AACH,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,OAAoB,EAAE,KAAY,EAAE,EAAE;IAChE,KAAK,MAAM,CAAC,SAAS,EAAE,UAAU,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;QAC3D,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,SAAS,EAAE,EAAE,UAAU,CAAC,QAAQ,EAAE,CAAC,CAAC;KACpE;AACH,CAAC,CAAC"}

package/dist/esm/utils/focusable-element.js

@@ -0,0 +1,10 @@
+export const isARIADisabledElement = (el) => {
+    return el.getAttribute('aria-disabled') === 'true';
+};
+export const isHiddenElement = (el) => {
+    return el.hasAttribute('hidden');
+};
+export const isFocusableElement = (el) => {
+    return !isARIADisabledElement(el) && !isHiddenElement(el);
+};
+//# sourceMappingURL=focusable-element.js.map

package/dist/esm/utils/focusable-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focusable-element.js","sourceRoot":"","sources":["../../../src/utils/focusable-element.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,EAAW,EAAW,EAAE;IAC5D,OAAO,EAAE,CAAC,YAAY,CAAC,eAAe,CAAC,KAAK,MAAM,CAAC;AACrD,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAW,EAAW,EAAE;IACtD,OAAO,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;AACnC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EAAW,EAAW,EAAE;IACzD,OAAO,CAAC,qBAAqB,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC;AAC5D,CAAC,CAAC"}

package/dist/web-components.d.ts

@@ -1839,6 +1839,99 @@ export declare class BaseSpinner extends FASTElement {
     constructor();
 }
 
+/**
+ * A Tablist element that wraps a collection of tab elements
+ * @public
+ */
+export declare class BaseTablist extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    /**
+     * Used for disabling all click and keyboard events for the tabs, child tab elements.
+     * @public
+     * @remarks
+     * HTML Attribute: disabled.
+     */
+    disabled: boolean;
+    /**
+     * Handles disabled changes
+     * @param prev - previous value
+     * @param next - next value
+     *
+     * @internal
+     */
+    protected disabledChanged(prev: boolean, next: boolean): void;
+    /**
+     * The orientation
+     * @public
+     * @remarks
+     * HTML Attribute: orientation
+     */
+    orientation: TablistOrientation;
+    /**
+     * @internal
+     */
+    protected orientationChanged(prev: TablistOrientation, next: TablistOrientation): void;
+    /**
+     * The id of the active tab
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: activeid
+     */
+    activeid: string;
+    /**
+     * @internal
+     */
+    protected activeidChanged(oldValue: string, newValue: string): void;
+    /**
+     * @internal
+     */
+    tabs: HTMLElement[];
+    /**
+     * @internal
+     */
+    protected tabsChanged(): void;
+    /**
+     * A reference to the active tab
+     * @public
+     */
+    activetab: HTMLElement;
+    private prevActiveTabIndex;
+    private activeTabIndex;
+    private tabIds;
+    private change;
+    private getActiveIndex;
+    /**
+     * Function that is invoked whenever the selected tab or the tab collection changes.
+     *
+     * @public
+     */
+    protected setTabs(): void;
+    private getTabIds;
+    private setComponent;
+    private handleTabClick;
+    private isHorizontal;
+    private handleTabKeyDown;
+    /**
+     * The adjust method for FASTTabs
+     * @public
+     * @remarks
+     * This method allows the active index to be adjusted by numerical increments
+     */
+    adjust(adjustment: number): void;
+    private activateTabByIndex;
+    private focusTab;
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+}
+
 /**
  * A Tabs component that wraps a collection of tab and tab panel elements.
  *
@@ -7519,8 +7612,18 @@ export declare const roleForMenuItem: {
 };
 
 /**
- * Sets the theme tokens on defaultNode.
- * @param theme - Flat object of theme token values.
+ * Sets the theme tokens as CSS Custom Properties. The Custom Properties are
+ * set in a constructed stylesheet on `document.adoptedStyleSheets` if
+ * supported, and on `document.documentElement.style` as a fallback.
+ *
+ * @param theme - Flat object of theme tokens. Each object entry must follow
+ *     these rules: the key is the name of the token, usually in camel case, it
+ *     must be a valid CSS Custom Property name WITHOUT the starting two dashes
+ *     (`--`), the two dashes are added inside the function; the value must be
+ *     a valid CSS value, e.g. it cannot contain semicolons (`;`).
+ *     Note that this argument is not limited to existing theme objects (from
+ *     `@fluentui/tokens`), you can pass in an arbitrary theme object as long
+ *     as each entry’s value is either a string or a number.
  * @internal
  */
 export declare const setTheme: (theme: Theme) => void;
@@ -8396,6 +8499,170 @@ export declare interface Tab extends StartEnd {
 
 export declare const TabDefinition: FASTElementDefinition<typeof Tab>;
 
+/**
+ * A BaseTablist component with extra logic for handling the styled active tab indicator.
+ * @public
+ */
+export declare class Tablist extends BaseTablist {
+    /**
+     * activeTabData
+     * The positional coordinates and size dimensions of the active tab. Used for calculating the offset and scale of the tab active indicator.
+     */
+    private activeTabData;
+    /**
+     * previousActiveTabData
+     * The positional coordinates and size dimensions of the active tab. Used for calculating the offset and scale of the tab active indicator.
+     */
+    private previousActiveTabData;
+    /**
+     * activeTabOffset
+     * Used to position the active indicator for animations of the active indicator on active tab changes.
+     */
+    private activeTabOffset;
+    /**
+     * activeTabScale
+     * Used to scale the tab active indicator up or down as animations of the active indicator occur.
+     */
+    private activeTabScale;
+    /**
+     * appearance
+     * There are two modes of appearance: transparent and subtle.
+     */
+    appearance?: TablistAppearance;
+    /**
+     * @internal
+     */
+    protected appearanceChanged(prev: TablistAppearance, next: TablistAppearance): void;
+    /**
+     * size
+     * defaults to medium.
+     * Used to set the size of all the tab controls, which effects text size and margins. Three sizes: small, medium and large.
+     */
+    size?: TablistSize;
+    /**
+     * @internal
+     */
+    protected sizeChanged(prev: TablistSize, next: TablistSize): void;
+    /**
+     * calculateAnimationProperties
+     *
+     * Recalculates the active tab offset and scale.
+     * These values will be applied to css variables that control the tab active indicator position animations
+     */
+    private calculateAnimationProperties;
+    /**
+     * getSelectedTabPosition - gets the x or y coordinates of the tab
+     */
+    private getTabPosition;
+    /**
+     * getSelectedTabScale - gets the scale of the tab
+     */
+    private getTabScale;
+    /**
+     * Calculates and applies updated values to CSS variables.
+     *
+     * @param tab - the tab element to apply the updated values to
+     * @internal
+     */
+    private applyUpdatedCSSValues;
+    /**
+     * Runs through all the operations required for setting the tab active indicator to its starting location, ending
+     * location, and applying the animated css class to the tab.
+     *
+     * @param tab - the tab element to apply the updated values to
+     * @internal
+     */
+    private animationLoop;
+    /**
+     * Sets the data from the active tab onto the class. used for making all the animation calculations for the active
+     * tab indicator.
+     *
+     * @internal
+     */
+    private setTabData;
+    /**
+     * Sets the css variables for the active tab indicator.
+     * @internal
+     */
+    private setAnimationVars;
+    /**
+     * Initiates the active tab indicator animation loop when activeid changes.
+     * @param oldValue - the previous tabId
+     * @param newValue - the new tabId
+     */
+    activeidChanged(oldValue: string, newValue: string): void;
+    /**
+     * Initiates the active tab indicator animation loop when tabs change.
+     */
+    tabsChanged(): void;
+}
+
+/**
+ * The appearance of the component
+ * @public
+ */
+export declare const TablistAppearance: {
+    readonly subtle: "subtle";
+    readonly transparent: "transparent";
+};
+
+/**
+ * The types for the Tablist appearance
+ * @public
+ */
+export declare type TablistAppearance = ValuesOf<typeof TablistAppearance>;
+
+/**
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-tablist\>
+ */
+export declare const TablistDefinition: FASTElementDefinition<typeof Tablist>;
+
+/**
+ * The orientation of the component
+ * @public
+ */
+export declare const TablistOrientation: {
+    readonly horizontal: "horizontal"; /**
+    * The appearance of the component
+    * @public
+    */
+    readonly vertical: "vertical";
+};
+
+/**
+ * The types for the Tablist orientation
+ * @public
+ */
+export declare type TablistOrientation = ValuesOf<typeof TablistOrientation>;
+
+/**
+ * The size of the component
+ * @public
+ */
+export declare const TablistSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+};
+
+/**
+ * The types for the Tablist size
+ * @public
+ */
+export declare type TablistSize = ValuesOf<typeof TablistSize>;
+
+/**
+ * @public
+ */
+export declare const TablistStyles: ElementStyles;
+
+/**
+ * @public
+ */
+export declare const TablistTemplate: ViewTemplate<Tablist, any>;
+
 /**
  * Tab configuration options
  * @public