@fluentui/web-components 3.0.0-beta.12 → 3.0.0-beta.121

package/dist/esm/option/option.js

@@ -0,0 +1,299 @@
+import { __decorate } from "tslib";
+import { attr, FASTElement, Observable, observable, Updates } from '@microsoft/fast-element';
+import { toggleState } from '../utils/element-internals.js';
+import { uniqueId } from '../utils/unique-id.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 class DropdownOption extends FASTElement {
+    /**
+     * 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
+     */
+    activeChanged(prev, next) {
+        toggleState(this.elementInternals, 'active', next);
+    }
+    /**
+     * Sets the selected property to match the currentSelected state.
+     *
+     * @param prev - the previous selected state
+     * @param next - the current selected state
+     * @internal
+     */
+    currentSelectedChanged(prev, next) {
+        this.selected = !!next;
+    }
+    /**
+     * 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
+     */
+    defaultSelectedChanged(prev, next) {
+        this.selected = !!next;
+    }
+    /**
+     * 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, next) {
+        toggleState(this.elementInternals, 'description', !!next?.length);
+    }
+    /**
+     * Toggles the disabled state when the user changes the `disabled` property.
+     *
+     * @internal
+     */
+    disabledChanged(prev, next) {
+        this.elementInternals.ariaDisabled = this.disabled ? 'true' : 'false';
+        toggleState(this.elementInternals, 'disabled', this.disabled);
+        this.setFormValue(!this.disabled && this.selected ? this.value : null);
+    }
+    /**
+     * Sets the disabled state when the `disabled` attribute changes.
+     *
+     * @param prev - the previous value
+     * @param next - the current value
+     * @internal
+     */
+    disabledAttributeChanged(prev, next) {
+        this.disabled = !!next;
+    }
+    /**
+     * Sets the value of the option when the `value` attribute changes.
+     *
+     * @param prev - The previous initial value
+     * @param next - The current initial value
+     * @internal
+     */
+    initialValueChanged(prev, next) {
+        this._value = next;
+    }
+    /**
+     * 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, next) {
+        toggleState(this.elementInternals, 'multiple', next);
+        this.selected = false;
+    }
+    /**
+     * The associated `<form>` element.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/form | `ElementInternals.form`} property.
+     */
+    get form() {
+        return this.elementInternals.form;
+    }
+    /**
+     * 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 { this.formAssociated = true; }
+    /**
+     * A reference to all associated `<label>` elements.
+     *
+     * @public
+     */
+    get labels() {
+        return Object.freeze(Array.from(this.elementInternals.labels));
+    }
+    /**
+     * The option's current selected state.
+     *
+     * @public
+     */
+    get selected() {
+        Observable.track(this, 'selected');
+        return !!this.currentSelected;
+    }
+    set selected(next) {
+        this.currentSelected = next;
+        Updates.enqueue(() => {
+            if (this.$fastController.isConnected) {
+                this.setFormValue(next ? this.value : null);
+                this.elementInternals.ariaSelected = next ? 'true' : 'false';
+                toggleState(this.elementInternals, 'selected', next);
+            }
+        });
+        Observable.notify(this, 'selected');
+    }
+    /**
+     * The display text of the option.
+     *
+     * @public
+     * @remarks
+     * When the option is freeform, the text is the value of the option.
+     */
+    get text() {
+        if (this.freeform) {
+            return this.value.replace(/\s+/g, ' ').trim();
+        }
+        return (this.textAttribute ?? this.textContent)?.replace(/\s+/g, ' ').trim() ?? '';
+    }
+    /**
+     * The current value of the option.
+     *
+     * @public
+     */
+    get value() {
+        Observable.track(this, 'value');
+        return this._value ?? this.text;
+    }
+    set value(value) {
+        this._value = value;
+        if (this.$fastController.isConnected) {
+            this.setFormValue(this.selected ? value : null);
+            this.freeformOutputs?.forEach(output => {
+                output.value = value;
+            });
+            Observable.notify(this, 'value');
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.freeform) {
+            this.value = '';
+            this.hidden = true;
+            this.selected = false;
+        }
+    }
+    constructor() {
+        super();
+        /**
+         * Indicates that the option is active.
+         *
+         * @public
+         */
+        this.active = false;
+        /**
+         * The id of the option. If not provided, a unique id will be assigned.
+         *
+         * @override
+         * @public
+         * @remarks
+         * HTML Attribute: `id`
+         */
+        this.id = uniqueId('option-');
+        /**
+         * The initial value of the option.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: `value`
+         */
+        this.initialValue = '';
+        /**
+         * Indicates that the option is in a multiple selection mode context.
+         * @public
+         */
+        this.multiple = false;
+        /**
+         * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+         *
+         * @internal
+         */
+        this.elementInternals = this.attachInternals();
+        /**
+         * The internal value of the option.
+         *
+         * @internal
+         */
+        this._value = this.initialValue;
+        this.elementInternals.role = 'option';
+    }
+    /**
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/setFormValue | `ElementInternals.setFormValue()`} method.
+     *
+     * @internal
+     */
+    setFormValue(value, state) {
+        if (this.disabled) {
+            this.elementInternals.setFormValue(null);
+            return;
+        }
+        this.elementInternals.setFormValue(value, value ?? state);
+    }
+    /**
+     * Toggles the selected state of the control.
+     *
+     * @param force - Forces the element to be checked or unchecked
+     * @public
+     */
+    toggleSelected(force = !this.selected) {
+        this.selected = force;
+    }
+}
+__decorate([
+    observable
+], DropdownOption.prototype, "active", void 0);
+__decorate([
+    attr({ attribute: 'current-selected', mode: 'boolean' })
+], DropdownOption.prototype, "currentSelected", void 0);
+__decorate([
+    attr({ attribute: 'selected', mode: 'boolean' })
+], DropdownOption.prototype, "defaultSelected", void 0);
+__decorate([
+    observable
+], DropdownOption.prototype, "descriptionSlot", void 0);
+__decorate([
+    observable
+], DropdownOption.prototype, "disabled", void 0);
+__decorate([
+    attr({ attribute: 'disabled', mode: 'boolean' })
+], DropdownOption.prototype, "disabledAttribute", void 0);
+__decorate([
+    attr({ attribute: 'form' })
+], DropdownOption.prototype, "formAttribute", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], DropdownOption.prototype, "freeform", void 0);
+__decorate([
+    attr({ attribute: 'id' })
+], DropdownOption.prototype, "id", void 0);
+__decorate([
+    attr({ attribute: 'value', mode: 'fromView' })
+], DropdownOption.prototype, "initialValue", void 0);
+__decorate([
+    observable
+], DropdownOption.prototype, "multiple", void 0);
+__decorate([
+    attr
+], DropdownOption.prototype, "name", void 0);
+__decorate([
+    observable
+], DropdownOption.prototype, "start", void 0);
+__decorate([
+    attr({ attribute: 'text', mode: 'fromView' })
+], DropdownOption.prototype, "textAttribute", void 0);
+//# sourceMappingURL=option.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"option.js","sourceRoot":"","sources":["../../../src/option/option.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,20 @@
+import type { StartOptions } from '../patterns/start-end.js';
+import type { StaticallyComposableHTML } from '../utils/template-helpers.js';
+import type { DropdownOption } from './option.js';
+/**
+ * Predicate function that determines if the element should be considered an option.
+ *
+ * @param element - The element to check.
+ * @param tagName - The tag name to check.
+ * @returns true if the element is an option.
+ * @public
+ */
+export declare function isDropdownOption(value: Node | null, tagName?: string): value is DropdownOption;
+/**
+ * The options for the {@link DropdownOption} component.
+ *
+ * @public
+ */
+export type DropdownOptionOptions = StartOptions<DropdownOption> & {
+    checkedIndicator?: StaticallyComposableHTML<DropdownOption>;
+};

package/dist/esm/option/option.options.js

@@ -0,0 +1,15 @@
+/**
+ * Predicate function that determines if the element should be considered an option.
+ *
+ * @param element - The element to check.
+ * @param tagName - The tag name to check.
+ * @returns true if the element is an option.
+ * @public
+ */
+export function isDropdownOption(value, tagName = '-option') {
+    if (value?.nodeType !== Node.ELEMENT_NODE) {
+        return false;
+    }
+    return value.tagName.toLowerCase().endsWith(tagName);
+}
+//# sourceMappingURL=option.options.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"option.options.js","sourceRoot":"","sources":["../../../src/option/option.options.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AACH,MAAM,UAAU,gBAAgB,CAAC,KAAkB,EAAE,UAAkB,SAAS;IAC9E,IAAI,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC;QAC1C,OAAO,KAAK,CAAC;IACf,CAAC;IAED,OAAQ,KAAiB,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;AACpE,CAAC"}

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

@@ -0,0 +1,6 @@
+/**
+ * Styles for the {@link (DropdownOption:class)} component.
+ *
+ * @public
+ */
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/option/option.styles.js

@@ -0,0 +1,128 @@
+import { css } from '@microsoft/fast-element';
+import { typographyBody1Styles, typographyCaption1Styles } from '../styles/partials/typography.partials.js';
+import { activeState, descriptionState, multipleState, selectedState } from '../styles/states/index.js';
+import { borderRadiusMedium, borderRadiusSmall, colorCompoundBrandBackground, colorCompoundBrandStroke, colorNeutralBackground1, colorNeutralBackground1Hover, colorNeutralBackground1Pressed, colorNeutralBackgroundDisabled, colorNeutralForeground2, colorNeutralForeground2Hover, colorNeutralForeground2Pressed, colorNeutralForeground3, colorNeutralForegroundDisabled, colorNeutralForegroundInverted, colorNeutralStrokeAccessible, colorNeutralStrokeDisabled, colorStrokeFocus2, colorTransparentStroke, spacingHorizontalSNudge, spacingHorizontalXS, strokeWidthThick, strokeWidthThin, } from '../theme/design-tokens.js';
+import { display } from '../utils/display.js';
+/**
+ * Styles for the {@link (DropdownOption:class)} component.
+ *
+ * @public
+ */
+export const styles = css `
+  ${display('inline-grid')}
+
+  :host {
+    -webkit-tap-highlight-color: transparent;
+    ${typographyBody1Styles}
+    align-items: center;
+    background-color: ${colorNeutralBackground1};
+    border-radius: ${borderRadiusMedium};
+    border: ${strokeWidthThick} solid ${colorTransparentStroke};
+    box-sizing: border-box;
+    color: ${colorNeutralForeground2};
+    column-gap: ${spacingHorizontalXS};
+    cursor: pointer;
+    grid-template-areas: 'indicator start content';
+    grid-template-columns: auto auto 1fr;
+    min-height: 32px;
+    padding: ${spacingHorizontalSNudge};
+    text-align: start;
+  }
+
+  .content {
+    grid-area: content;
+    line-height: 1;
+  }
+
+  ::slotted([slot='start']) {
+    grid-area: start;
+  }
+
+  :host(:hover) {
+    background-color: ${colorNeutralBackground1Hover};
+    color: ${colorNeutralForeground2Hover};
+  }
+
+  :host(:active) {
+    background-color: ${colorNeutralBackground1Pressed};
+    color: ${colorNeutralForeground2Pressed};
+  }
+
+  :host(:disabled) {
+    background-color: ${colorNeutralBackground1};
+    color: ${colorNeutralForegroundDisabled};
+    cursor: default;
+  }
+
+  .checkmark-16-filled {
+    fill: currentColor;
+    width: 16px;
+  }
+
+  slot[name='checked-indicator'] > *,
+  ::slotted([slot='checked-indicator']) {
+    aspect-ratio: 1;
+    flex: 0 0 auto;
+    grid-area: indicator;
+    visibility: hidden;
+  }
+
+  :host(${selectedState}) :is(slot[name='checked-indicator'] > *, ::slotted([slot='checked-indicator'])) {
+    visibility: visible;
+  }
+
+  :host(${multipleState}) .checkmark-16-filled,
+  :host(:not(${multipleState})) .checkmark-12-regular {
+    display: none;
+  }
+
+  :host(${multipleState}) .checkmark-12-regular {
+    background-color: ${colorNeutralBackground1};
+    border-radius: ${borderRadiusSmall};
+    border: ${strokeWidthThin} solid ${colorNeutralStrokeAccessible};
+    box-sizing: border-box;
+    cursor: pointer;
+    fill: transparent;
+    position: relative;
+    visibility: visible;
+    width: 16px;
+  }
+
+  :host(${multipleState}${selectedState}) .checkmark-12-regular {
+    background-color: ${colorCompoundBrandBackground};
+    border-color: ${colorCompoundBrandStroke};
+    fill: ${colorNeutralForegroundInverted};
+  }
+
+  :host(:disabled${multipleState}) .checkmark-12-regular {
+    border-color: ${colorNeutralStrokeDisabled};
+  }
+
+  :host(:disabled${multipleState}${selectedState}) .checkmark-12-regular {
+    background-color: ${colorNeutralBackgroundDisabled};
+  }
+
+  :host(${activeState}) {
+    border: ${strokeWidthThick} solid ${colorStrokeFocus2};
+  }
+
+  @supports (selector(:host(:has(*)))) {
+    :host(:has([slot='start']:not([size='16']))) {
+      column-gap: ${spacingHorizontalSNudge};
+    }
+  }
+
+  :host(${descriptionState}) {
+    column-gap: ${spacingHorizontalSNudge};
+    grid-template-areas:
+      'indicator start content'
+      'indicator start description';
+  }
+
+  ::slotted([slot='description']) {
+    color: ${colorNeutralForeground3};
+    grid-area: description;
+    ${typographyCaption1Styles}
+  }
+`;
+//# sourceMappingURL=option.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"option.styles.js","sourceRoot":"","sources":["../../../src/option/option.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,MAAM,2CAA2C,CAAC;AAC5G,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACxG,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EACjB,4BAA4B,EAC5B,wBAAwB,EACxB,uBAAuB,EACvB,4BAA4B,EAC5B,8BAA8B,EAC9B,8BAA8B,EAC9B,uBAAuB,EACvB,4BAA4B,EAC5B,8BAA8B,EAC9B,uBAAuB,EACvB,8BAA8B,EAC9B,8BAA8B,EAC9B,4BAA4B,EAC5B,0BAA0B,EAC1B,iBAAiB,EACjB,sBAAsB,EACtB,uBAAuB,EACvB,mBAAmB,EACnB,gBAAgB,EAChB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;MAIpB,qBAAqB;;wBAEH,uBAAuB;qBAC1B,kBAAkB;cACzB,gBAAgB,UAAU,sBAAsB;;aAEjD,uBAAuB;kBAClB,mBAAmB;;;;;eAKtB,uBAAuB;;;;;;;;;;;;;;wBAcd,4BAA4B;aACvC,4BAA4B;;;;wBAIjB,8BAA8B;aACzC,8BAA8B;;;;wBAInB,uBAAuB;aAClC,8BAA8B;;;;;;;;;;;;;;;;;UAiBjC,aAAa;;;;UAIb,aAAa;eACR,aAAa;;;;UAIlB,aAAa;wBACC,uBAAuB;qBAC1B,iBAAiB;cACxB,eAAe,UAAU,4BAA4B;;;;;;;;;UASzD,aAAa,GAAG,aAAa;wBACf,4BAA4B;oBAChC,wBAAwB;YAChC,8BAA8B;;;mBAGvB,aAAa;oBACZ,0BAA0B;;;mBAG3B,aAAa,GAAG,aAAa;wBACxB,8BAA8B;;;UAG5C,WAAW;cACP,gBAAgB,UAAU,iBAAiB;;;;;oBAKrC,uBAAuB;;;;UAIjC,gBAAgB;kBACR,uBAAuB;;;;;;;aAO5B,uBAAuB;;MAE9B,wBAAwB;;CAE7B,CAAC"}

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

@@ -0,0 +1,16 @@
+import type { ElementViewTemplate } from '@microsoft/fast-element';
+import type { DropdownOption } from './option.js';
+import type { DropdownOptionOptions } from './option.options.js';
+/**
+ * Generates a template for the {@link (Option:class)} component.
+ *
+ * @param options - The {@link (OptionOptions:interface)} to use for generating the template.
+ * @returns The template object.
+ * @public
+ */
+export declare function dropdownOptionTemplate<T extends DropdownOption>(options?: DropdownOptionOptions): ElementViewTemplate<T>;
+/**
+ * Template for the Option component.
+ * @public
+ */
+export declare const template: ElementViewTemplate<DropdownOption>;

package/dist/esm/option/option.template.js

@@ -0,0 +1,42 @@
+import { elements, html, slotted } from '@microsoft/fast-element';
+import { startSlotTemplate } from '../patterns/start-end.js';
+import { staticallyCompose } from '../utils/template-helpers.js';
+const checkedIndicator = html.partial(/* html */ `
+  <svg aria-hidden="true" class="checkmark-16-filled" viewBox="0 0 16 16">
+    <path
+      d="M14.046 3.486a.75.75 0 0 1-.032 1.06l-7.93 7.474a.85.85 0 0 1-1.188-.022l-2.68-2.72a.75.75 0 1 1 1.068-1.053l2.234 2.267l7.468-7.038a.75.75 0 0 1 1.06.032"
+    />
+  </svg>
+  <svg aria-hidden="true" class="checkmark-12-regular" viewBox="0 0 12 12">
+    <path
+      d="M9.854 3.146a.5.5 0 0 1 0 .708l-4.5 4.5a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L5 7.293l4.146-4.147a.5.5 0 0 1 .708 0"
+    />
+  </svg>
+`);
+/**
+ * Generates a template for the {@link (Option:class)} component.
+ *
+ * @param options - The {@link (OptionOptions:interface)} to use for generating the template.
+ * @returns The template object.
+ * @public
+ */
+export function dropdownOptionTemplate(options = {}) {
+    return html `
+    <slot name="checked-indicator">${staticallyCompose(options.checkedIndicator)}</slot>
+    ${startSlotTemplate(options)}
+    <div class="content" part="content">
+      <slot ${slotted({ property: 'freeformOutputs', filter: elements('output') })}></slot>
+    </div>
+    <div class="description" part="description">
+      <slot name="description" ${slotted('descriptionSlot')}></slot>
+    </div>
+  `;
+}
+/**
+ * Template for the Option component.
+ * @public
+ */
+export const template = dropdownOptionTemplate({
+    checkedIndicator,
+});
+//# sourceMappingURL=option.template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"option.template.js","sourceRoot":"","sources":["../../../src/option/option.template.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAIjE,MAAM,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC;;;;;;;;;;;CAWhD,CAAC,CAAC;AAEH;;;;;;GAMG;AACH,MAAM,UAAU,sBAAsB,CACpC,UAAiC,EAAE;IAEnC,OAAO,IAAI,CAAG;qCACqB,iBAAiB,CAAC,OAAO,CAAC,gBAAgB,CAAC;MAC1E,iBAAiB,CAAC,OAAO,CAAC;;cAElB,OAAO,CAAC,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,EAAE,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;;;iCAGjD,OAAO,CAAC,iBAAiB,CAAC;;GAExD,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAwC,sBAAsB,CAAC;IAClF,gBAAgB;CACjB,CAAC,CAAC"}

package/dist/esm/patterns/aria-globals.js

@@ -1,10 +1,5 @@
 //Copied from @microsoft/fast-foundation
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+import { __decorate } from "tslib";
 import { attr } from '@microsoft/fast-element';
 /**
  * Some states and properties are applicable to all host language elements regardless of whether a role is applied.

package/dist/esm/patterns/aria-globals.js.map

@@ -1 +1 @@
-{"version":3,"file":"aria-globals.js","sourceRoot":"","sources":["../../../src/patterns/aria-globals.ts"],"names":[],"mappings":"AAAA,wCAAwC;;;;;;;AAExC,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE/C;;;;;;;;GAQG;AACH,MAAM,OAAO,6BAA6B;CAwNzC;AA7MC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;iEACkB;AAYrD;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;+DACkB;AAWnD;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;mEACD;AAWpC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;kEACmE;AAWvG;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;sEACD;AAWvC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;kEACD;AAWnC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;mEACkB;AAWvD;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;uEACD;AAYxC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;iEACD;AAYlC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;mEACoE;AAWzG;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;iEACkB;AAWrD;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;kEAC2C;AAW/E;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;uEACD;AAWxC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;gEACD;AAWjC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;qEACD;AAYtC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;+DACgC;AAajE;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;+DACD;AAWhC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;mEAC8D;AAWnG;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,sBAAsB,EAAE,CAAC;0EACD"}
+{"version":3,"file":"aria-globals.js","sourceRoot":"","sources":["../../../src/patterns/aria-globals.ts"],"names":[],"mappings":"AAAA,wCAAwC;;AAExC,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE/C;;;;;;;;GAQG;AACH,MAAM,OAAO,6BAA6B;CAwNzC;AA7MQ;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;iEACkB;AAY9C;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;+DACkB;AAW5C;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;mEACD;AAW7B;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;kEACmE;AAWhG;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;sEACD;AAWhC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;kEACD;AAW5B;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;mEACkB;AAWhD;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;uEACD;AAYjC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;iEACD;AAY3B;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;mEACoE;AAWlG;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;iEACkB;AAW9C;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;kEAC2C;AAWxE;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;uEACD;AAWjC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;gEACD;AAW1B;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;qEACD;AAY/B;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;+DACgC;AAa1D;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;+DACD;AAWzB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;mEAC8D;AAW5F;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,sBAAsB,EAAE,CAAC;0EACD"}

package/dist/esm/patterns/start-end.d.ts

@@ -0,0 +1,58 @@
+import { type CaptureType } from '@microsoft/fast-element';
+import type { StaticallyComposableHTML } from '../utils/index.js';
+/**
+ * Start configuration options
+ * @public
+ */
+export type StartOptions<TSource = any, TParent = any> = {
+    start?: StaticallyComposableHTML<TSource, TParent>;
+};
+/**
+ * End configuration options
+ * @public
+ */
+export type EndOptions<TSource = any, TParent = any> = {
+    end?: StaticallyComposableHTML<TSource, TParent>;
+};
+/**
+ * Start/End configuration options
+ * @public
+ */
+export type StartEndOptions<TSource = any, TParent = any> = StartOptions<TSource, TParent> & EndOptions<TSource, TParent>;
+/**
+ * A mixin class implementing start slots.
+ * @public
+ */
+export declare class Start {
+    start: HTMLSlotElement;
+}
+/**
+ * A mixin class implementing end slots.
+ * @public
+ */
+export declare class End {
+    end: HTMLSlotElement;
+}
+/**
+ * A mixin class implementing start and end slots.
+ * These are generally used to decorate text elements with icons or other visual indicators.
+ * @public
+ */
+export declare class StartEnd implements Start, End {
+    start: HTMLSlotElement;
+    end: HTMLSlotElement;
+}
+/**
+ * The template for the end slot.
+ * For use with {@link StartEnd}
+ *
+ * @public
+ */
+export declare function endSlotTemplate<TSource extends StartEnd = StartEnd, TParent = any>(options: EndOptions<TSource, TParent>): CaptureType<TSource, TParent>;
+/**
+ * The template for the start slots.
+ * For use with {@link StartEnd}
+ *
+ * @public
+ */
+export declare function startSlotTemplate<TSource extends Pick<StartEnd, 'start'> = StartEnd, TParent = any>(options: StartOptions<TSource, TParent>): CaptureType<TSource, TParent>;

package/dist/esm/patterns/start-end.js

@@ -1,6 +1,18 @@
 //Copied from @microsoft/fast-foundation
 import { html, ref } from '@microsoft/fast-element';
 import { staticallyCompose } from '../utils/index.js';
+/**
+ * A mixin class implementing start slots.
+ * @public
+ */
+export class Start {
+}
+/**
+ * A mixin class implementing end slots.
+ * @public
+ */
+export class End {
+}
 /**
  * A mixin class implementing start and end slots.
  * These are generally used to decorate text elements with icons or other visual indicators.

package/dist/esm/patterns/start-end.js.map

@@ -1 +1 @@
-{"version":3,"file":"start-end.js","sourceRoot":"","sources":["../../../src/patterns/start-end.ts"],"names":[],"mappings":"AAAA,wCAAwC;AAExC,OAAO,EAAe,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAEjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAyBtD;;;;GAIG;AACH,MAAM,OAAO,QAAQ;CAGpB;AAED;;;;;GAKG;AACH,MAAM,UAAU,eAAe,CAC7B,OAAqC;IAErC,OAAO,IAAI,CAAA,qBAAqB,GAAG,CAAC,KAAK,CAAC,IAAI,iBAAiB,CAAC,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC;AAClG,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,iBAAiB,CAC/B,OAAuC;IAEvC,OAAO,IAAI,CAAA,uBAAuB,GAAG,CAAC,OAAO,CAAC,IAAI,iBAAiB,CAAC,OAAO,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC;AACxG,CAAC"}
+{"version":3,"file":"start-end.js","sourceRoot":"","sources":["../../../src/patterns/start-end.ts"],"names":[],"mappings":"AAAA,wCAAwC;AAExC,OAAO,EAAoB,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAEtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAyBtD;;;GAGG;AACH,MAAM,OAAO,KAAK;CAEjB;AAED;;;GAGG;AACH,MAAM,OAAO,GAAG;CAEf;AAED;;;;GAIG;AACH,MAAM,OAAO,QAAQ;CAGpB;AAED;;;;;GAKG;AACH,MAAM,UAAU,eAAe,CAC7B,OAAqC;IAErC,OAAO,IAAI,CAAA,qBAAqB,GAAG,CAAC,KAAK,CAAC,IAAI,iBAAiB,CAAC,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC;AAClG,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,iBAAiB,CAC/B,OAAuC;IAEvC,OAAO,IAAI,CAAA,uBAAuB,GAAG,CAAC,OAAO,CAAC,IAAI,iBAAiB,CAAC,OAAO,CAAC,KAAK,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC;AACxG,CAAC"}

package/dist/esm/progress-bar/index.d.ts

@@ -0,0 +1,6 @@
+export { definition as ProgressBarDefinition } from './progress-bar.definition.js';
+export { BaseProgressBar } from './progress-bar.base.js';
+export { ProgressBar } from './progress-bar.js';
+export { ProgressBarShape, ProgressBarThickness, ProgressBarValidationState } from './progress-bar.options.js';
+export { styles as ProgressBarStyles } from './progress-bar.styles.js';
+export { template as ProgressBarTemplate } from './progress-bar.template.js';