@fluentui/web-components 3.0.0-alpha.1 → 3.0.0-alpha.3

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

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

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

@@ -0,0 +1,5 @@
+export * from './text.js';
+export * from './text.options.js';
+export { template as TextTemplate } from './text.template.js';
+export { styles as TextStyles } from './text.styles.js';
+export { definition as TextDefinition } from './text.definition.js';

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

@@ -0,0 +1,91 @@
+import { FASTElement } from '@microsoft/fast-element';
+import type { TextAlign, TextFont, TextSize, TextWeight } from './text.options.js';
+/**
+ * The base class used for constructing a fluent-text custom element
+ * @public
+ */
+export declare class Text extends FASTElement {
+    /**
+     * The text will not wrap
+     * NOTE: In Fluent UI React v9 this is "wrap"
+     * Boolean attributes which default to true in HTML can't be switched off in the DOM
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: nowrap
+     */
+    nowrap: boolean;
+    /**
+     * The text truncates
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: truncate
+     */
+    truncate: boolean;
+    /**
+     * The text style is italic
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: italic
+     */
+    italic: boolean;
+    /**
+     * The text style is underline
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: underline
+     */
+    underline: boolean;
+    /**
+     * The text style is strikethrough
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: strikethrough
+     */
+    strikethrough: boolean;
+    /**
+     * An text can take up the width of its container.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: block
+     */
+    block: boolean;
+    /**
+     * THe Text size
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: size
+     *
+     */
+    size: TextSize;
+    /**
+     * THe Text font
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: font
+     */
+    font: TextFont;
+    /**
+     * THe Text weight
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: weight
+     */
+    weight: TextWeight;
+    /**
+     * THe Text align
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: align
+     */
+    align: TextAlign;
+}

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

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

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

@@ -0,0 +1,67 @@
+import { ValuesOf } from '@microsoft/fast-foundation';
+/**
+ * TextSize constants
+ * @public
+ */
+export declare 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";
+};
+/**
+ * The type for TextSize
+ * The font size and line height based on the theme tokens
+ * @public
+ */
+export declare type TextSize = ValuesOf<typeof TextSize>;
+/**
+ * TextFont Constants
+ * @public
+ */
+export declare const TextFont: {
+    readonly base: "base";
+    readonly numeric: "numeric";
+    readonly monospace: "monospace";
+};
+/**
+ * Applies font family to the content
+ * @public
+ */
+export declare type TextFont = ValuesOf<typeof TextFont>;
+/**
+ * TextWeight Constants
+ * @public
+ */
+export declare const TextWeight: {
+    readonly medium: "medium";
+    readonly regular: "regular";
+    readonly semibold: "semibold";
+    readonly bold: "bold";
+};
+/**
+ * Applies font weight to the content
+ * @public
+ */
+export declare type TextWeight = ValuesOf<typeof TextWeight>;
+/**
+ * TextAlign Constants
+ * @public
+ */
+export declare const TextAlign: {
+    readonly start: "start";
+    readonly end: "end";
+    readonly center: "center";
+    readonly justify: "justify";
+};
+/**
+ * Aligns the content
+ * @public
+ */
+export declare type TextAlign = ValuesOf<typeof TextAlign>;

package/dist/dts/text/text.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Args, Meta } from '@storybook/html';
+import type { Text as FluentText } from './text.js';
+import './define.js';
+declare type TextStoryArgs = Args & FluentText;
+declare type TextStoryMeta = Meta<TextStoryArgs>;
+declare const _default: TextStoryMeta;
+export default _default;
+export declare const Text: any;

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

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

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

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

package/dist/dts/theme/index.d.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';

package/dist/esm/badge/badge.definition.js

@@ -0,0 +1,18 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { Badge } from './badge.js';
+import { styles } from './badge.styles.js';
+import { template } from './badge.template.js';
+/**
+ * The Fluent Badge Element. Implements {@link @microsoft/fast-foundation#Badge },
+ * {@link @microsoft/fast-foundation#badgeTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-badge\>
+ */
+export const definition = Badge.compose({
+    name: `${FluentDesignSystem.prefix}-badge`,
+    template,
+    styles,
+});

package/dist/esm/badge/badge.js

@@ -0,0 +1,42 @@
+import { __decorate } from "tslib";
+import { attr, FASTElement } from '@microsoft/fast-element';
+import { applyMixins, StartEnd } from '@microsoft/fast-foundation';
+import { BadgeAppearance, BadgeColor } from './badge.options.js';
+/**
+ * The base class used for constructing a fluent-badge custom element
+ * @public
+ */
+export class Badge extends FASTElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The appearance the badge should have.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: appearance
+         */
+        this.appearance = BadgeAppearance.filled;
+        /**
+         * The color the badge should have.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: color
+         */
+        this.color = BadgeColor.brand;
+    }
+}
+__decorate([
+    attr
+], Badge.prototype, "appearance", void 0);
+__decorate([
+    attr
+], Badge.prototype, "color", void 0);
+__decorate([
+    attr
+], Badge.prototype, "shape", void 0);
+__decorate([
+    attr
+], Badge.prototype, "size", void 0);
+applyMixins(Badge, StartEnd);

package/dist/esm/badge/badge.options.js

@@ -0,0 +1,45 @@
+/**
+ * BadgeAppearance constants
+ * @public
+ */
+export const BadgeAppearance = {
+    filled: 'filled',
+    ghost: 'ghost',
+    outline: 'outline',
+    tint: 'tint',
+};
+/**
+ * BadgeColor constants
+ * @public
+ */
+export const BadgeColor = {
+    brand: 'brand',
+    danger: 'danger',
+    important: 'important',
+    informative: 'informative',
+    severe: 'severe',
+    subtle: 'subtle',
+    success: 'success',
+    warning: 'warning',
+};
+/**
+ * A Badge can be square, circular or rounded.
+ * @public
+ */
+export const BadgeShape = {
+    circular: 'circular',
+    rounded: 'rounded',
+    square: 'square',
+};
+/**
+ * A Badge can be square, circular or rounded.
+ * @public
+ */
+export const BadgeSize = {
+    tiny: 'tiny',
+    extraSmall: 'extra-small',
+    small: 'small',
+    medium: 'medium',
+    large: 'large',
+    extraLarge: 'extra-large',
+};

package/dist/esm/badge/badge.stories.js

@@ -0,0 +1,108 @@
+import { html, when } from '@microsoft/fast-element';
+import { renderComponent } from '../__test__/helpers.js';
+import { BadgeAppearance, BadgeColor, BadgeShape, BadgeSize } from './badge.options.js';
+import './define.js';
+const storyTemplate = html `
+  <fluent-badge appearance="${x => x.appearance}" color="${x => x.color}" shape="${x => x.shape}" size="${x => x.size}">
+    ${when(x => x.iconPosition === 'start', html `<svg
+        slot="start"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        width="1em"
+        height="1em"
+        preserveAspectRatio="xMidYMid meet"
+        viewBox="0 0 20 20"
+      >
+        <path
+          fill="currentColor"
+          d="M14.69 11.503c1 0 1.81.81 1.81 1.81v.689h-.005c-.034.78-.248 1.757-1.123 2.555C14.416 17.43 12.765 18 10 18c-2.766 0-4.416-.57-5.372-1.443c-.875-.798-1.089-1.776-1.123-2.555H3.5v-.69c0-.999.81-1.809 1.81-1.809h9.38ZM6.5 3A1.5 1.5 0 0 0 5 4.5v4A1.5 1.5 0 0 0 6.5 10h7A1.5 1.5 0 0 0 15 8.5v-4A1.5 1.5 0 0 0 13.5 3h-3v-.5A.48.48 0 0 0 10 2c-.276 0-.5.23-.5.5V3h-3ZM7 6.5a1 1 0 1 1 2 0a1 1 0 0 1-2 0Zm4 0a1 1 0 1 1 2 0a1 1 0 0 1-2 0Z"
+        />
+      </svg>`)}
+    ${x => x.content}
+    ${when(x => x.iconPosition === 'end', html `<svg
+        slot="start"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        width="1em"
+        height="1em"
+        preserveAspectRatio="xMidYMid meet"
+        viewBox="0 0 20 20"
+      >
+        <path
+          fill="currentColor"
+          d="M14.69 11.503c1 0 1.81.81 1.81 1.81v.689h-.005c-.034.78-.248 1.757-1.123 2.555C14.416 17.43 12.765 18 10 18c-2.766 0-4.416-.57-5.372-1.443c-.875-.798-1.089-1.776-1.123-2.555H3.5v-.69c0-.999.81-1.809 1.81-1.809h9.38ZM6.5 3A1.5 1.5 0 0 0 5 4.5v4A1.5 1.5 0 0 0 6.5 10h7A1.5 1.5 0 0 0 15 8.5v-4A1.5 1.5 0 0 0 13.5 3h-3v-.5A.48.48 0 0 0 10 2c-.276 0-.5.23-.5.5V3h-3ZM7 6.5a1 1 0 1 1 2 0a1 1 0 0 1-2 0Zm4 0a1 1 0 1 1 2 0a1 1 0 0 1-2 0Z"
+        />
+      </svg>`)}
+  </fluent-badge>
+`;
+export default {
+    title: 'Components/Badge/Badge',
+    args: {
+        content: null,
+    },
+    argTypes: {
+        appearance: {
+            options: Object.values(BadgeAppearance),
+            control: {
+                type: 'select',
+            },
+        },
+        color: {
+            options: Object.values(BadgeColor),
+            control: {
+                type: 'select',
+            },
+        },
+        shape: {
+            options: Object.values(BadgeShape),
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: Object.values(BadgeSize),
+            control: {
+                type: 'select',
+            },
+        },
+        iconPosition: {
+            options: ['none', 'start', 'end'],
+            control: {
+                type: 'select',
+            },
+        },
+        content: {
+            control: 'text',
+        },
+    },
+};
+export const Badge = renderComponent(storyTemplate).bind({});
+export const Appearance = renderComponent(html `
+  <fluent-badge appearance="filled">filled</fluent-badge>
+  <fluent-badge appearance="ghost">ghost</fluent-badge>
+  <fluent-badge appearance="outline">outline</fluent-badge>
+  <fluent-badge appearance="tint">tint</fluent-badge>
+`);
+export const Color = renderComponent(html `
+  <fluent-badge color="brand">brand</fluent-badge>
+  <fluent-badge color="danger">danger</fluent-badge>
+  <fluent-badge color="important">important</fluent-badge>
+  <fluent-badge color="informative">informative</fluent-badge>
+  <fluent-badge color="severe">severe</fluent-badge>
+  <fluent-badge color="subtle">subtle</fluent-badge>
+  <fluent-badge color="success">success</fluent-badge>
+  <fluent-badge color="warning">warning</fluent-badge>
+`);
+export const Shape = renderComponent(html `
+  <fluent-badge shape="circular"></fluent-badge>
+  <fluent-badge shape="rounded"></fluent-badge>
+  <fluent-badge shape="square"></fluent-badge>
+`);
+export const Size = renderComponent(html `
+  <fluent-badge size="tiny"></fluent-badge>
+  <fluent-badge size="extra-small"></fluent-badge>
+  <fluent-badge size="small"></fluent-badge>
+  <fluent-badge size="medium"></fluent-badge>
+  <fluent-badge size="large"></fluent-badge>
+  <fluent-badge size="extra-large"></fluent-badge>
+`);

package/dist/esm/badge/badge.styles.js

@@ -0,0 +1,29 @@
+import { css } from '@microsoft/fast-element';
+import { badgeBaseStyles, badgeFilledStyles, badgeGhostStyles, badgeOutlineStyles, badgeSizeStyles, badgeTintStyles, } from '../styles/index.js';
+import { borderRadiusMedium, borderRadiusNone, borderRadiusSmall } from '../theme/design-tokens.js';
+// why is the border not showing up?
+/** Badge styles
+ * @public
+ */
+export const styles = css `
+  :host([shape='square']) {
+    border-radius: ${borderRadiusNone};
+  }
+
+  :host([shape='rounded']) {
+    border-radius: ${borderRadiusMedium};
+  }
+
+  :host([shape='rounded'][size='tiny']),
+  :host([shape='rounded'][size='extra-small']),
+  :host([shape='rounded'][size='small']) {
+    border-radius: ${borderRadiusSmall};
+  }
+
+  ${badgeSizeStyles}
+  ${badgeFilledStyles}
+  ${badgeGhostStyles}
+  ${badgeOutlineStyles}
+  ${badgeTintStyles}
+  ${badgeBaseStyles}
+`;

package/dist/esm/badge/badge.template.js

@@ -0,0 +1,14 @@
+import { html } from '@microsoft/fast-element';
+import { endSlotTemplate, startSlotTemplate, staticallyCompose } from '@microsoft/fast-foundation';
+/**
+ * The template for the Badge component.
+ * @public
+ */
+export function badgeTemplate(options = {}) {
+    return html `
+    ${startSlotTemplate(options)}
+    <slot>${staticallyCompose(options.defaultContent)}</slot>
+    ${endSlotTemplate(options)}
+  `;
+}
+export const template = badgeTemplate();

package/dist/esm/badge/define.js

@@ -0,0 +1,3 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './badge.definition.js';
+definition.define(FluentDesignSystem.registry);

package/dist/esm/badge/index.js

@@ -0,0 +1,5 @@
+export * from './badge.js';
+export * from './badge.options.js';
+export { template as BadgeTemplate } from './badge.template.js';
+export { styles as BadgeStyles } from './badge.styles.js';
+export { definition as BadgeDefinition } from './badge.definition.js';

package/dist/esm/counter-badge/counter-badge.definition.js

@@ -0,0 +1,18 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { CounterBadge } from './counter-badge.js';
+import { styles } from './counter-badge.styles.js';
+import { template } from './counter-badge.template.js';
+/**
+ * The Fluent CounterBadge Element. Implements {@link @microsoft/fast-foundation#Badge },
+ * {@link @microsoft/fast-foundation#badgeTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-counter-badge\>
+ */
+export const definition = CounterBadge.compose({
+    name: `${FluentDesignSystem.prefix}-counter-badge`,
+    template,
+    styles,
+});

package/dist/esm/counter-badge/counter-badge.js

@@ -0,0 +1,89 @@
+import { __decorate } from "tslib";
+import { attr, FASTElement, nullableNumberConverter } from '@microsoft/fast-element';
+import { applyMixins, StartEnd } from '@microsoft/fast-foundation';
+/**
+ * The base class used for constructing a fluent-badge custom element
+ * @public
+ */
+export class CounterBadge extends FASTElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The count the badge should have.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: count
+         */
+        this.count = 0;
+        /**
+         * Max number to be displayed
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: overflow-count
+         */
+        this.overflowCount = 99;
+        /**
+         * If the badge should be shown when count is 0
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: show-zero
+         */
+        this.showZero = false;
+        /**
+         * If a dot should be displayed without the count
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: dot
+         */
+        this.dot = false;
+    }
+    countChanged() {
+        this.setCount();
+    }
+    overflowCountChanged() {
+        this.setCount();
+    }
+    /**
+     * @internal
+     * Function to set the count
+     * This is the default slotted content for the counter badge
+     * If children are slotted, that will override the value returned
+     */
+    setCount() {
+        var _a;
+        const count = (_a = this.count) !== null && _a !== void 0 ? _a : 0;
+        if ((count !== 0 || this.showZero) && !this.dot) {
+            return count > this.overflowCount ? `${this.overflowCount}+` : `${count}`;
+        }
+        return;
+    }
+}
+__decorate([
+    attr
+], CounterBadge.prototype, "appearance", void 0);
+__decorate([
+    attr
+], CounterBadge.prototype, "color", void 0);
+__decorate([
+    attr
+], CounterBadge.prototype, "shape", void 0);
+__decorate([
+    attr
+], CounterBadge.prototype, "size", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], CounterBadge.prototype, "count", void 0);
+__decorate([
+    attr({ attribute: 'overflow-count', converter: nullableNumberConverter })
+], CounterBadge.prototype, "overflowCount", void 0);
+__decorate([
+    attr({ attribute: 'show-zero', mode: 'boolean' })
+], CounterBadge.prototype, "showZero", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], CounterBadge.prototype, "dot", void 0);
+applyMixins(CounterBadge, StartEnd);

package/dist/esm/counter-badge/counter-badge.options.js

@@ -0,0 +1,42 @@
+/**
+ * CounterBadgeAppearance constants
+ * @public
+ */
+export const CounterBadgeAppearance = {
+    filled: 'filled',
+    ghost: 'ghost',
+};
+/**
+ * CounterBadgeColor constants
+ * @public
+ */
+export const CounterBadgeColor = {
+    brand: 'brand',
+    danger: 'danger',
+    important: 'important',
+    informative: 'informative',
+    severe: 'severe',
+    subtle: 'subtle',
+    success: 'success',
+    warning: 'warning',
+};
+/**
+ * A CounterBadge shape can be circular or rounded.
+ * @public
+ */
+export const CounterBadgeShape = {
+    circular: 'circular',
+    rounded: 'rounded',
+};
+/**
+ * A CounterBadge can be square, circular or rounded.
+ * @public
+ */
+export const CounterBadgeSize = {
+    tiny: 'tiny',
+    extraSmall: 'extra-small',
+    small: 'small',
+    medium: 'medium',
+    large: 'large',
+    extraLarge: 'extra-large',
+};