@fluentui/web-components 3.0.0-rc.21 → 3.0.0-rc.23

package/dist/esm/divider/divider.styles.css

@@ -0,0 +1,119 @@
+
+  :host([hidden]){display:none}:host{display:flex}
+
+  :host {
+    contain: content;
+  }
+
+  :host::after,
+  :host::before {
+    align-self: center;
+    background: var(--colorNeutralStroke2);
+    box-sizing: border-box;
+    content: '';
+    display: flex;
+    flex-grow: 1;
+    height: var(--strokeWidthThin);
+  }
+
+  :host([inset]) {
+    padding: 0 12px;
+  }
+
+  :host ::slotted(*) {
+    color: var(--colorNeutralForeground2);
+    font-family: var(--fontFamilyBase);
+    font-size: var(--fontSizeBase200);
+    font-weight: var(--fontWeightRegular);
+    margin: 0;
+    padding: 0 12px;
+  }
+
+  :host([align-content='start'])::before,
+  :host([align-content='end'])::after {
+    flex-basis: 12px;
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+
+  :host([orientation='vertical']) {
+    align-items: center;
+    flex-direction: column;
+    height: 100%;
+    min-height: 84px;
+  }
+
+  :host([orientation='vertical']):empty {
+    min-height: 20px;
+  }
+
+  :host([orientation='vertical'][inset])::before {
+    margin-top: 12px;
+  }
+  :host([orientation='vertical'][inset])::after {
+    margin-bottom: 12px;
+  }
+
+  :host([orientation='vertical']):empty::before,
+  :host([orientation='vertical']):empty::after {
+    height: 10px;
+    min-height: 10px;
+    flex-grow: 0;
+  }
+
+  :host([orientation='vertical'])::before,
+  :host([orientation='vertical'])::after {
+    width: var(--strokeWidthThin);
+    min-height: 20px;
+    height: 100%;
+  }
+
+  :host([orientation='vertical']) ::slotted(*) {
+    display: flex;
+    flex-direction: column;
+    padding: 12px 0;
+    line-height: 20px;
+  }
+
+  :host([orientation='vertical'][align-content='start'])::before {
+    min-height: 8px;
+  }
+  :host([orientation='vertical'][align-content='end'])::after {
+    min-height: 8px;
+  }
+
+  :host([appearance='strong'])::before,
+  :host([appearance='strong'])::after {
+    background: var(--colorNeutralStroke1);
+  }
+  :host([appearance='strong']) ::slotted(*) {
+    color: var(--colorNeutralForeground1);
+  }
+  :host([appearance='brand'])::before,
+  :host([appearance='brand'])::after {
+    background: var(--colorBrandStroke1);
+  }
+  :host([appearance='brand']) ::slotted(*) {
+    color: var(--colorBrandForeground1);
+  }
+  :host([appearance='subtle'])::before,
+  :host([appearance='subtle'])::after {
+    background: var(--colorNeutralStroke3);
+  }
+  :host([appearance='subtle']) ::slotted(*) {
+    color: var(--colorNeutralForeground3);
+  }
+
+  @media (forced-colors: active) {
+    :host([appearance='strong'])::before,
+    :host([appearance='strong'])::after,
+    :host([appearance='brand'])::before,
+    :host([appearance='brand'])::after,
+    :host([appearance='subtle'])::before,
+    :host([appearance='subtle'])::after,
+    :host::after,
+    :host::before {
+      background: WindowText;
+      color: WindowText;
+    }
+  }

package/dist/esm/divider/divider.template.html

@@ -0,0 +1 @@
+<f-template name="fluent-divider" shadowrootmode="open"><template>{{styles}}<slot></slot></template></f-template>

package/dist/esm/drawer/define-async.d.ts

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

package/dist/esm/drawer/define-async.js

@@ -0,0 +1,5 @@
+import { RenderableFASTElement } from '@microsoft/fast-html';
+import { definition } from './drawer.definition-async.js';
+import { Drawer } from './drawer.js';
+RenderableFASTElement(Drawer).defineAsync(definition);
+//# sourceMappingURL=define-async.js.map

package/dist/esm/drawer/define-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define-async.js","sourceRoot":"","sources":["../../../src/drawer/define-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,qBAAqB,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC"}

package/dist/esm/drawer/drawer.definition-async.d.ts

@@ -0,0 +1,10 @@
+import type { PartialFASTElementDefinition } from '@microsoft/fast-element';
+/**
+ * The async definition configuration for the fluent-drawer element.
+ *
+ * @public
+ * @remarks
+ * This is used in server-side rendering (SSR) scenarios where the template
+ * is provided as a deferred option to be hydrated later.
+ */
+export declare const definition: PartialFASTElementDefinition;

package/dist/esm/drawer/drawer.definition-async.js

@@ -0,0 +1,14 @@
+import { tagName } from './drawer.options.js';
+/**
+ * The async definition configuration for the fluent-drawer element.
+ *
+ * @public
+ * @remarks
+ * This is used in server-side rendering (SSR) scenarios where the template
+ * is provided as a deferred option to be hydrated later.
+ */
+export const definition = {
+    name: tagName,
+    templateOptions: 'defer-and-hydrate',
+};
+//# sourceMappingURL=drawer.definition-async.js.map

package/dist/esm/drawer/drawer.definition-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.definition-async.js","sourceRoot":"","sources":["../../../src/drawer/drawer.definition-async.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,UAAU,GAAiC;IACtD,IAAI,EAAE,OAAO;IACb,eAAe,EAAE,mBAAmB;CACrC,CAAC"}

package/dist/esm/drawer/drawer.styles.css

@@ -0,0 +1,130 @@
+
+  :host([hidden]){display:none}:host{display:block}
+
+  :host {
+    --dialog-backdrop: var(--colorBackgroundOverlay);
+  }
+
+  :host([type='non-modal']) dialog[open]::backdrop {
+    display: none;
+  }
+
+  :host([type='non-modal']) dialog {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+  }
+
+  :host([type='inline']) {
+    height: 100%;
+    width: fit-content;
+  }
+
+  :host([type='inline']) dialog[open] {
+    box-shadow: none;
+    position: relative;
+  }
+
+  :host([size='small']) dialog {
+    width: 320px;
+    max-width: 320px;
+  }
+
+  :host([size='large']) dialog {
+    width: 940px;
+    max-width: 940px;
+  }
+
+  :host([size='full']) dialog {
+    width: 100%;
+    max-width: 100%;
+  }
+
+  :host([position='end']) dialog {
+    margin-inline-start: auto;
+    margin-inline-end: 0;
+  }
+
+  dialog {
+    box-sizing: border-box;
+    z-index: var(--drawer-elevation, 1000);
+    font-size: var(--fontSizeBase300);
+    line-height: var(--lineHeightBase300);
+    font-family: var(--fontFamilyBase);
+    font-weight: var(--fontWeightRegular);
+    color: var(--colorNeutralForeground1);
+    max-width: var(--drawer-width, 592px);
+    max-height: 100vh;
+    height: 100%;
+    margin-inline-start: 0;
+    margin-inline-end: auto;
+    border-inline-end-color: var(--colorTransparentStroke);
+    border-inline-start-color: var(--drawer-separator, var(--colorTransparentStroke));
+    outline: none;
+    top: 0;
+    bottom: 0;
+    width: var(--drawer-width, 592px);
+    border-radius: 0;
+    padding: 0;
+    max-width: var(--drawer-width, 592px);
+    box-shadow: var(--shadow64);
+    border: var(--strokeWidthThin) solid var(--colorTransparentStroke);
+    background: var(--colorNeutralBackground1);
+  }
+
+  dialog::backdrop {
+    background: var(--dialog-backdrop);
+  }
+
+  @layer animations {
+    /* Disable animations for reduced motion */
+    @media (prefers-reduced-motion: no-preference) {
+      dialog {
+        transition: display allow-discrete, opacity, overlay allow-discrete, transform;
+        transition-duration: var(--durationGentle);
+        transition-timing-function: var(--curveDecelerateMid);
+      }
+
+      /* Exit styles for dialog */
+      :host dialog:not([open]) {
+        transform: translateX(-100%);
+        transition-timing-function: var(--curveAccelerateMid);
+      }
+      :host([position='end']) dialog:not([open]) {
+        transform: translateX(100%);
+        transition-timing-function: var(--curveAccelerateMid);
+      }
+
+      dialog[open] {
+        transform: translateX(0);
+      }
+
+      dialog::backdrop {
+        transition: display allow-discrete, opacity, overlay allow-discrete, scale;
+        transition-duration: var(--durationGentle);
+        transition-timing-function: var(--curveDecelerateMid);
+        background: var(--dialog-backdrop, var(--colorBackgroundOverlay));
+        opacity: 0;
+      }
+
+      dialog[open]::backdrop {
+        opacity: 1;
+      }
+
+      dialog::backdrop {
+        transition-timing-function: var(--curveLinear);
+      }
+    }
+
+    @starting-style {
+      dialog[open] {
+        transform: translateX(-100%);
+      }
+      :host([position='end']) dialog[open] {
+        transform: translateX(100%);
+      }
+      dialog[open]::backdrop {
+        opacity: 0;
+      }
+    }
+  }

package/dist/esm/drawer/drawer.template.html

@@ -0,0 +1,18 @@
+<f-template name="fluent-drawer" shadowrootmode="open">
+<template>{{styles}}<dialog
+      class="dialog"
+      part="dialog"
+      aria-describedby="{{dialogDescribedby}}"
+      aria-labelledby="{{dialogLabelledby}}"
+      aria-label="{{dialogLabel}}"
+      aria-modal="{{dialogModal}}"
+      role="{{dialogRole}}"
+      size="{{size}}"
+      position="{{position}}"
+      @click="{clickHandler($e)}"
+      @cancel="{cancelHandler()}"
+      f-ref="{dialog}"
+    >
+      <slot></slot>
+    </dialog></template>
+</f-template>

package/dist/esm/drawer-body/define-async.d.ts

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

package/dist/esm/drawer-body/define-async.js

@@ -0,0 +1,5 @@
+import { RenderableFASTElement } from '@microsoft/fast-html';
+import { definition } from './drawer-body.definition-async.js';
+import { DrawerBody } from './drawer-body.js';
+RenderableFASTElement(DrawerBody).defineAsync(definition);
+//# sourceMappingURL=define-async.js.map

package/dist/esm/drawer-body/define-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define-async.js","sourceRoot":"","sources":["../../../src/drawer-body/define-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,qBAAqB,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC"}

package/dist/esm/drawer-body/drawer-body.definition-async.d.ts

@@ -0,0 +1,10 @@
+import type { PartialFASTElementDefinition } from '@microsoft/fast-element';
+/**
+ * The async definition configuration for the fluent-drawer-body element.
+ *
+ * @public
+ * @remarks
+ * This is used in server-side rendering (SSR) scenarios where the template
+ * is provided as a deferred option to be hydrated later.
+ */
+export declare const definition: PartialFASTElementDefinition;

package/dist/esm/drawer-body/drawer-body.definition-async.js

@@ -0,0 +1,14 @@
+import { tagName } from './drawer-body.options.js';
+/**
+ * The async definition configuration for the fluent-drawer-body element.
+ *
+ * @public
+ * @remarks
+ * This is used in server-side rendering (SSR) scenarios where the template
+ * is provided as a deferred option to be hydrated later.
+ */
+export const definition = {
+    name: tagName,
+    templateOptions: 'defer-and-hydrate',
+};
+//# sourceMappingURL=drawer-body.definition-async.js.map

package/dist/esm/drawer-body/drawer-body.definition-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-body.definition-async.js","sourceRoot":"","sources":["../../../src/drawer-body/drawer-body.definition-async.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAEnD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,UAAU,GAAiC;IACtD,IAAI,EAAE,OAAO;IACb,eAAe,EAAE,mBAAmB;CACrC,CAAC"}

package/dist/esm/drawer-body/drawer-body.styles.css

@@ -0,0 +1,33 @@
+
+  :host([hidden]){display:none}:host{display:grid}
+  :host {
+    box-sizing: border-box;
+    grid-template-rows: min-content auto min-content;
+    position: relative;
+    height: 100%;
+    padding: var(--spacingHorizontalXL);
+    max-height: 100svh;
+  }
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    
+  font-family: var(--fontFamilyBase);
+  font-size: var(--fontSizeBase500);
+  line-height: var(--lineHeightBase500);
+  font-weight: var(--fontWeightSemibold);
+
+  }
+
+  .footer {
+    display: flex;
+    justify-content: flex-start;
+    gap: var(--spacingHorizontalM);
+  }
+
+  ::slotted([slot='title']) {
+    font: inherit;
+    padding: 0;
+    margin: 0;
+  }

package/dist/esm/drawer-body/drawer-body.template.html

@@ -0,0 +1,12 @@
+<f-template name="fluent-drawer-body" shadowrootmode="open">
+<template>{{styles}}<div class="header" part="header">
+      <slot name="title"></slot>
+      <slot name="close" @click="{clickHandler($e)}"></slot>
+    </div>
+    <div class="content" part="content">
+      <slot></slot>
+    </div>
+    <div class="footer" part="footer">
+      <slot name="footer"></slot>
+    </div></template>
+</f-template>

package/dist/esm/dropdown/define-async.d.ts

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

package/dist/esm/dropdown/define-async.js

@@ -0,0 +1,5 @@
+import { RenderableFASTElement } from '@microsoft/fast-html';
+import { definition } from './dropdown.definition-async.js';
+import { Dropdown } from './dropdown.js';
+RenderableFASTElement(Dropdown).defineAsync(definition);
+//# sourceMappingURL=define-async.js.map

package/dist/esm/dropdown/define-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define-async.js","sourceRoot":"","sources":["../../../src/dropdown/define-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,qBAAqB,CAAC,QAAQ,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC"}

package/dist/esm/dropdown/dropdown.base.d.ts

@@ -431,6 +431,31 @@ export declare class BaseDropdown extends FASTElement {
      * This method can be overridden in derived classes to provide custom control elements, though this is not recommended.
      */
     protected insertControl(): void;
+    /**
+     * The duration in milliseconds after the last character search keystroke before the search string is cleared.
+     */
+    protected searchTimeoutMs: number;
+    /**
+     * The accumulated search string used to match option labels by prefix when printable characters are typed.
+     *
+     * @internal
+     */
+    private searchString;
+    /**
+     * The timeout id used to reset the search string.
+     *
+     * @internal
+     */
+    private searchTimeout?;
+    /**
+     * Handles printable character input by moving {@link activeIndex} to the next option whose label matches the
+     * accumulated search string. When the string is a single character (or the same character repeated), matching
+     * options are cycled through; otherwise the string is treated as a prefix match.
+     *
+     * @param char - the printable character that was pressed
+     * @internal
+     */
+    private handleSearchCharacter;
     /**
      * Handles the keydown events for the dropdown.
      *

package/dist/esm/dropdown/dropdown.base.js

@@ -129,7 +129,7 @@ export class BaseDropdown extends FASTElement {
             const notifier = Observable.getNotifier(this);
             notifier.subscribe(next);
             notifier.notify('multiple');
-            waitForConnectedDescendants(next, () => {
+            Updates.enqueue(() => {
                 this.options.forEach(option => {
                     option.disabled = option.disabledAttribute || this.disabled;
                     option.name = this.name;
@@ -140,7 +140,7 @@ export class BaseDropdown extends FASTElement {
                     x.selected = this.multiple || i === 0;
                 });
                 this.setValidity();
-            }, { idleCallback: true });
+            });
             if (AnchorPositioningCSSSupported) {
                 // The `anchor-name` property seems to not be isolated between instances in Safari Technology Preview 220 (18.4).
                 // It's unclear if the spec requires the `anchor-name` to be unique when styled on the `:host`.
@@ -210,7 +210,8 @@ export class BaseDropdown extends FASTElement {
      * @public
      */
     get enabledOptions() {
-        return this.listbox?.enabledOptions ?? [];
+        return (this.listbox?.enabledOptions ??
+            Array.from(this.querySelectorAll('*')).filter((o) => isDropdownOption(o) && !o.disabled));
     }
     /**
      * The form-associated flag.
@@ -249,7 +250,7 @@ export class BaseDropdown extends FASTElement {
      * @public
      */
     get options() {
-        return this.listbox?.options ?? [];
+        return (this.listbox?.options ?? Array.from(this.querySelectorAll('*')).filter(o => isDropdownOption(o)));
     }
     /**
      * The index of the first selected option, scoped to the enabled options.
@@ -473,6 +474,16 @@ export class BaseDropdown extends FASTElement {
          * @internal
          */
         this._insertingControl = false;
+        /**
+         * The duration in milliseconds after the last character search keystroke before the search string is cleared.
+         */
+        this.searchTimeoutMs = 500;
+        /**
+         * The accumulated search string used to match option labels by prefix when printable characters are typed.
+         *
+         * @internal
+         */
+        this.searchString = '';
         this.elementInternals.role = 'presentation';
     }
     /**
@@ -585,6 +596,39 @@ export class BaseDropdown extends FASTElement {
         dropdownButtonTemplate.render(this, this);
         this._insertingControl = false;
     }
+    /**
+     * Handles printable character input by moving {@link activeIndex} to the next option whose label matches the
+     * accumulated search string. When the string is a single character (or the same character repeated), matching
+     * options are cycled through; otherwise the string is treated as a prefix match.
+     *
+     * @param char - the printable character that was pressed
+     * @internal
+     */
+    handleSearchCharacter(char) {
+        const isRepeating = this.searchString === char.repeat(this.searchString.length);
+        this.searchString += char;
+        let candidates = this.searchString.length > 1 ? this.filterOptions(this.searchString) : [];
+        let isCycling = false;
+        if (!candidates.length && isRepeating) {
+            candidates = this.filterOptions(char);
+            isCycling = true;
+        }
+        if (candidates.length) {
+            const activeOption = this.enabledOptions[this.activeIndex];
+            const currentPos = candidates.indexOf(activeOption);
+            const nextMatch = isCycling
+                ? candidates[this.getEnabledIndexInBounds(currentPos + 1, candidates.length)]
+                : currentPos >= 0
+                    ? activeOption
+                    : candidates[0];
+            this.activeIndex = this.enabledOptions.indexOf(nextMatch);
+        }
+        clearTimeout(this.searchTimeout);
+        this.searchTimeout = setTimeout(() => {
+            this.searchString = '';
+            this.searchTimeout = undefined;
+        }, this.searchTimeoutMs);
+    }
     /**
      * Handles the keydown events for the dropdown.
      *
@@ -604,14 +648,15 @@ export class BaseDropdown extends FASTElement {
                 increment = 1;
                 break;
             }
-            case ' ': {
-                if (this.isCombobox) {
-                    break;
-                }
-                e.preventDefault();
-            }
+            case ' ':
             case 'Enter':
             case 'Tab': {
+                if (e.key === ' ') {
+                    if (this.isCombobox) {
+                        break;
+                    }
+                    e.preventDefault();
+                }
                 if (this.open) {
                     this.selectOption(this.activeIndex, true);
                     if (this.multiple) {
@@ -630,6 +675,12 @@ export class BaseDropdown extends FASTElement {
             }
         }
         if (!increment) {
+            if (!this.isCombobox && e.key.length === 1 && e.key !== ' ' && !e.ctrlKey && !e.metaKey && !e.altKey) {
+                if (!this.open) {
+                    this.listbox.showPopover();
+                }
+                this.handleSearchCharacter(e.key);
+            }
             return true;
         }
         if (!this.open) {
@@ -751,6 +802,11 @@ export class BaseDropdown extends FASTElement {
     disconnectedCallback() {
         BaseDropdown.AnchorPositionFallbackObserver?.disconnect();
         this.debounceController?.abort();
+        if (this.searchTimeout) {
+            clearTimeout(this.searchTimeout);
+            this.searchTimeout = undefined;
+            this.searchString = '';
+        }
         super.disconnectedCallback();
     }
     /**