@fluentui/web-components 3.0.0-beta.13 → 3.0.0-beta.130

package/dist/esm/message-bar/message-bar.styles.js

@@ -0,0 +1,107 @@
+import { css } from '@microsoft/fast-element';
+import { borderRadiusMedium, colorNeutralBackground3, colorNeutralForeground3, colorNeutralStroke1, colorPaletteDarkOrangeBackground1, colorPaletteDarkOrangeBorder1, colorPaletteGreenBackground1, colorPaletteGreenBorder1, colorPaletteRedBackground1, colorPaletteRedBorder1, fontFamilyBase, fontSizeBase200, lineHeightBase200, spacingHorizontalM, spacingHorizontalS, spacingVerticalMNudge, spacingVerticalS, } from '../theme/design-tokens.js';
+/**
+ * Styles for the MessageBar component.
+ *
+ * @public
+ */
+export const styles = css `
+  :host {
+    display: grid;
+    box-sizing: border-box;
+    font-family: ${fontFamilyBase};
+    font-size: ${fontSizeBase200};
+    line-height: ${lineHeightBase200};
+    width: 100%;
+    background: ${colorNeutralBackground3};
+    border: 1px solid ${colorNeutralStroke1};
+    padding-inline: ${spacingHorizontalM};
+    border-radius: ${borderRadiusMedium};
+    min-height: 36px;
+    align-items: center;
+    grid-template: 'icon body actions dismiss' / auto 1fr auto auto;
+    contain: layout style paint;
+  }
+
+  :host([shape='square']) {
+    border-radius: 0;
+  }
+
+  :host([intent='success']) {
+    background-color: ${colorPaletteGreenBackground1};
+    border-color: ${colorPaletteGreenBorder1};
+  }
+
+  :host([intent='warning']) {
+    background-color: ${colorPaletteDarkOrangeBackground1};
+    border-color: ${colorPaletteDarkOrangeBorder1};
+  }
+
+  :host([intent='error']) {
+    background-color: ${colorPaletteRedBackground1};
+    border-color: ${colorPaletteRedBorder1};
+  }
+
+  :host([layout='multiline']) {
+    grid-template-areas:
+      'icon body dismiss'
+      'actions actions actions';
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto auto 1fr;
+    padding-block: ${spacingVerticalMNudge};
+    padding-inline: ${spacingHorizontalM};
+  }
+
+  .content {
+    grid-area: body;
+    max-width: 520px;
+    padding-block: ${spacingVerticalMNudge};
+    padding-inline: 0;
+  }
+
+  :host([layout='multiline']) .content {
+    padding: 0;
+  }
+
+  ::slotted([slot='icon']) {
+    display: flex;
+    grid-area: icon;
+    flex-direction: column;
+    align-items: center;
+    color: ${colorNeutralForeground3};
+    margin-inline-end: ${spacingHorizontalS};
+  }
+
+  :host([layout='multiline']) ::slotted([slot='icon']) {
+    align-items: start;
+    height: 100%;
+  }
+
+  ::slotted([slot='dismiss']) {
+    grid-area: dismiss;
+  }
+
+  .actions {
+    grid-area: actions;
+    display: flex;
+    justify-self: end;
+    margin-inline-end: ${spacingHorizontalS};
+    gap: ${spacingHorizontalS};
+  }
+
+  :host([layout='multiline']) .actions {
+    margin-block-start: ${spacingVerticalMNudge};
+    margin-inline-end: 0;
+  }
+
+  :host([layout='multiline']) ::slotted([slot='dismiss']) {
+    align-items: start;
+    height: 100%;
+    padding-block-start: ${spacingVerticalS};
+  }
+
+  ::slotted(*) {
+    font-size: inherit;
+  }
+`;
+//# sourceMappingURL=message-bar.styles.js.map

package/dist/esm/message-bar/message-bar.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-bar.styles.js","sourceRoot":"","sources":["../../../src/message-bar/message-bar.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,uBAAuB,EACvB,mBAAmB,EACnB,iCAAiC,EACjC,6BAA6B,EAC7B,4BAA4B,EAC5B,wBAAwB,EACxB,0BAA0B,EAC1B,sBAAsB,EACtB,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,gBAAgB,GACjB,MAAM,2BAA2B,CAAC;AAEnC;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAkB,GAAG,CAAA;;;;mBAIrB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;;kBAElB,uBAAuB;wBACjB,mBAAmB;sBACrB,kBAAkB;qBACnB,kBAAkB;;;;;;;;;;;;wBAYf,4BAA4B;oBAChC,wBAAwB;;;;wBAIpB,iCAAiC;oBACrC,6BAA6B;;;;wBAIzB,0BAA0B;oBAC9B,sBAAsB;;;;;;;;;qBASrB,qBAAqB;sBACpB,kBAAkB;;;;;;qBAMnB,qBAAqB;;;;;;;;;;;;;aAa7B,uBAAuB;yBACX,kBAAkB;;;;;;;;;;;;;;;;yBAgBlB,kBAAkB;WAChC,kBAAkB;;;;0BAIH,qBAAqB;;;;;;;2BAOpB,gBAAgB;;;;;;CAM1C,CAAC"}

package/dist/esm/message-bar/message-bar.template.d.ts

@@ -0,0 +1,14 @@
+import { type ElementViewTemplate } from '@microsoft/fast-element';
+import type { MessageBar } from './message-bar.js';
+/**
+ * Generates a template for the MessageBar component.
+ * @public
+ * @param {MessageBar} T - The type of the MessageBar.
+ * @returns {ElementViewTemplate<T>} - The template for the MessageBar component.
+ */
+export declare function messageBarTemplate<T extends MessageBar>(): ElementViewTemplate<T>;
+/**
+ * The template for the MessageBar component.
+ * @type {ElementViewTemplate<MessageBar>}
+ */
+export declare const template: ElementViewTemplate<MessageBar>;

package/dist/esm/message-bar/message-bar.template.js

@@ -0,0 +1,25 @@
+import { html } from '@microsoft/fast-element';
+/**
+ * Generates a template for the MessageBar component.
+ * @public
+ * @param {MessageBar} T - The type of the MessageBar.
+ * @returns {ElementViewTemplate<T>} - The template for the MessageBar component.
+ */
+export function messageBarTemplate() {
+    return html `
+    <slot name="icon"></slot>
+    <div class="content">
+      <slot></slot>
+    </div>
+    <div class="actions">
+      <slot name="actions"></slot>
+    </div>
+    <slot name="dismiss"></slot>
+  `;
+}
+/**
+ * The template for the MessageBar component.
+ * @type {ElementViewTemplate<MessageBar>}
+ */
+export const template = messageBarTemplate();
+//# sourceMappingURL=message-bar.template.js.map

package/dist/esm/message-bar/message-bar.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-bar.template.js","sourceRoot":"","sources":["../../../src/message-bar/message-bar.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGzE;;;;;GAKG;AACH,MAAM,UAAU,kBAAkB;IAChC,OAAO,IAAI,CAAG;;;;;;;;;GASb,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAoC,kBAAkB,EAAE,CAAC"}

package/dist/esm/option/define.js

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

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

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

package/dist/esm/option/index.d.ts

@@ -0,0 +1,5 @@
+export { definition as DropdownOptionDefinition } from './option.definition.js';
+export { DropdownOption } from './option.js';
+export { isDropdownOption, type DropdownOptionOptions } from './option.options.js';
+export { styles as DropdownOptionStyles } from './option.styles.js';
+export { template as DropdownOptionTemplate } from './option.template.js';

package/dist/esm/option/index.js

@@ -0,0 +1,6 @@
+export { definition as DropdownOptionDefinition } from './option.definition.js';
+export { DropdownOption } from './option.js';
+export { isDropdownOption } from './option.options.js';
+export { styles as DropdownOptionStyles } from './option.styles.js';
+export { template as DropdownOptionTemplate } from './option.template.js';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/option/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAChF,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,gBAAgB,EAA8B,MAAM,qBAAqB,CAAC;AACnF,OAAO,EAAE,MAAM,IAAI,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AACpE,OAAO,EAAE,QAAQ,IAAI,sBAAsB,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/esm/option/option.d.ts

@@ -0,0 +1,262 @@
+import { FASTElement } from '@microsoft/fast-element';
+import type { Start } from '../patterns/start-end.js';
+/**
+ * A DropdownOption Custom HTML Element.
+ * Implements the {@link https://w3c.github.io/aria/#option | ARIA option } role.
+ *
+ * @tag fluent-dropdown-option
+ *
+ * @slot - The default slot for the option's content.
+ * @slot checked-indicator - The checked indicator.
+ * @slot description - Optional description content.
+ *
+ * @remarks
+ * To support single and multiple selection modes with the {@link (BaseDropdown:class)} element, the Option element
+ * itself handles form association and value submission, rather than its parent Dropdown element. In this way, the
+ * Option element is a variation of the Checkbox element that is specifically designed for use in the Dropdown element.
+ *
+ * This class is named `DropdownOption` to avoid conflicts with the native `Option` global. Related constructs are also
+ * titled with `DropdownOption` to maintain consistency.
+ *
+ * @public
+ */
+export declare class DropdownOption extends FASTElement implements Start {
+    /**
+     * Indicates that the option is active.
+     *
+     * @public
+     */
+    active: boolean;
+    /**
+     * Changes the active state of the option when the active property changes.
+     *
+     * @param prev - the previous active state
+     * @param next - the current active state
+     * @internal
+     */
+    protected activeChanged(prev: boolean, next: boolean): void;
+    /**
+     * The current selected state of the option.
+     *
+     * @internal
+     */
+    currentSelected?: boolean;
+    /**
+     * Sets the selected property to match the currentSelected state.
+     *
+     * @param prev - the previous selected state
+     * @param next - the current selected state
+     * @internal
+     */
+    currentSelectedChanged(prev: boolean | undefined, next: boolean | undefined): void;
+    /**
+     * The initial selected state of the option.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `checked`
+     */
+    defaultSelected?: boolean;
+    /**
+     * Updates the selected state when the `selected` attribute is changed, unless the selected state has been changed by the user.
+     *
+     * @param prev - The previous initial selected state
+     * @param next - The current initial selected state
+     * @internal
+     */
+    protected defaultSelectedChanged(prev: boolean | undefined, next: boolean | undefined): void;
+    /**
+     * The collection of slotted description elements.
+     *
+     * @internal
+     */
+    descriptionSlot: Node[];
+    /**
+     * Changes the description state of the option when the description slot changes.
+     *
+     * @param prev - the previous collection of description elements
+     * @param next - the current collection of description elements
+     * @internal
+     */
+    descriptionSlotChanged(prev: Node[] | undefined, next: Node[] | undefined): void;
+    /**
+     * The current disabled state of the option.
+     *
+     * @public
+     */
+    disabled?: boolean;
+    /**
+     * Toggles the disabled state when the user changes the `disabled` property.
+     *
+     * @internal
+     */
+    protected disabledChanged(prev: boolean | undefined, next: boolean | undefined): void;
+    /**
+     * The initial disabled state of the option.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `disabled`
+     */
+    disabledAttribute?: boolean;
+    /**
+     * Sets the disabled state when the `disabled` attribute changes.
+     *
+     * @param prev - the previous value
+     * @param next - the current value
+     * @internal
+     */
+    protected disabledAttributeChanged(prev: boolean | undefined, next: boolean | undefined): void;
+    /**
+     * The id of a form to associate the element to.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/input#form | `form`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `form`
+     */
+    formAttribute?: string;
+    /**
+     * Indicates that the option value should sync with the value of the dropdown's control.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `freeform`
+     */
+    freeform?: boolean;
+    /**
+     * The id of the option. If not provided, a unique id will be assigned.
+     *
+     * @override
+     * @public
+     * @remarks
+     * HTML Attribute: `id`
+     */
+    id: string;
+    /**
+     * The initial value of the option.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `value`
+     */
+    initialValue: string;
+    /**
+     * Sets the value of the option when the `value` attribute changes.
+     *
+     * @param prev - The previous initial value
+     * @param next - The current initial value
+     * @internal
+     */
+    protected initialValueChanged(prev: string, next: string): void;
+    /**
+     * Indicates that the option is in a multiple selection mode context.
+     * @public
+     */
+    multiple: boolean;
+    /**
+     * Updates the multiple state of the option when the multiple property changes.
+     *
+     * @param prev - the previous multiple state
+     * @param next - the current multiple state
+     */
+    multipleChanged(prev: boolean, next: boolean): void;
+    /**
+     * The name of the option. This option's value will be surfaced during form submission under the provided name.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `name`
+     */
+    name: string;
+    /**
+     * Reference to the start slot element.
+     *
+     * @internal
+     */
+    start: HTMLSlotElement;
+    /**
+     * The text to display in the dropdown control when the option is selected.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `text`
+     */
+    textAttribute?: string;
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    /**
+     * The associated `<form>` element.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/form | `ElementInternals.form`} property.
+     */
+    get form(): HTMLFormElement | null;
+    /**
+     * The collection of slotted `output` elements, used to display the value when the option is freeform.
+     *
+     * @internal
+     */
+    freeformOutputs?: HTMLOutputElement[];
+    /**
+     * The form-associated flag.
+     * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
+     *
+     * @public
+     */
+    static formAssociated: boolean;
+    /**
+     * A reference to all associated `<label>` elements.
+     *
+     * @public
+     */
+    get labels(): ReadonlyArray<HTMLLabelElement>;
+    /**
+     * The option's current selected state.
+     *
+     * @public
+     */
+    get selected(): boolean;
+    set selected(next: boolean);
+    /**
+     * The display text of the option.
+     *
+     * @public
+     * @remarks
+     * When the option is freeform, the text is the value of the option.
+     */
+    get text(): string;
+    /**
+     * The internal value of the option.
+     *
+     * @internal
+     */
+    private _value;
+    /**
+     * The current value of the option.
+     *
+     * @public
+     */
+    get value(): string;
+    set value(value: string);
+    connectedCallback(): void;
+    constructor();
+    /**
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/setFormValue | `ElementInternals.setFormValue()`} method.
+     *
+     * @internal
+     */
+    setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
+    /**
+     * Toggles the selected state of the control.
+     *
+     * @param force - Forces the element to be checked or unchecked
+     * @public
+     */
+    toggleSelected(force?: boolean): void;
+}

package/dist/esm/option/option.definition.d.ts

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

package/dist/esm/option/option.definition.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"option.definition.js","sourceRoot":"","sources":["../../../src/option/option.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,cAAc,CAAC,OAAO,CAAC;IAC/C,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,SAAS;IAC3C,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}