@fluentui/web-components 3.0.0-rc.3 → 3.0.0-rc.31

package/dist/esm/link/link.styles.css

@@ -0,0 +1,72 @@
+:host([hidden]) {
+  display: none;
+}
+:host {
+  display: inline;
+}
+
+:host {
+  position: relative;
+  box-sizing: border-box;
+  background-color: transparent;
+  color: var(--colorBrandForegroundLink);
+  cursor: pointer;
+  font-family: var(--fontFamilyBase);
+  font-size: var(--fontSizeBase300);
+  font-weight: var(--fontWeightRegular);
+  overflow: inherit;
+  text-align: start;
+  text-decoration: none;
+  text-decoration-thickness: var(--strokeWidthThin);
+  text-overflow: inherit;
+  user-select: text;
+}
+
+:host(:is(:hover, :focus-visible)) {
+  outline: none;
+  text-decoration-line: underline;
+}
+
+@media (hover: hover) {
+  :host(:hover) {
+    color: var(--colorBrandForegroundLinkHover);
+  }
+
+  :host(:active) {
+    color: var(--colorBrandForegroundLinkPressed);
+  }
+
+  :host([appearance='subtle']:hover) {
+    color: var(--colorNeutralForeground2LinkHover);
+  }
+
+  :host([appearance='subtle']:active) {
+    color: var(--colorNeutralForeground2LinkPressed);
+  }
+}
+
+:host([appearance='subtle']) {
+  color: var(--colorNeutralForeground2Link);
+}
+
+:host-context(:is(h1, h2, h3, h4, h5, h6, p, fluent-text)),
+:host([inline]) {
+  font: inherit;
+  text-decoration: underline;
+}
+
+:host(:not([href])) {
+  color: inherit;
+  text-decoration: none;
+}
+
+::slotted(a) {
+  position: absolute;
+  inset: 0;
+}
+
+@media (forced-colors: active) {
+  :host {
+    color: LinkText;
+  }
+}

package/dist/esm/link/link.styles.js

@@ -1,6 +1,6 @@
 import { css } from '@microsoft/fast-element';
-import { display, forcedColorsStylesheetBehavior } from '../utils/index.js';
-import { colorBrandForegroundLink, colorBrandForegroundLinkHover, colorBrandForegroundLinkPressed, colorNeutralForeground2Link, colorNeutralForeground2LinkHover, colorNeutralForeground2LinkPressed, fontFamilyBase, fontSizeBase300, fontWeightRegular, strokeWidthThin, } from '../theme/design-tokens.js';
+import { display } from '../utils/display.js';
+import { colorBrandForegroundLink, colorBrandForegroundLinkHover, colorBrandForegroundLinkPressed, colorNeutralForeground2Link, colorNeutralForeground2LinkHover, colorNeutralForeground2LinkPressed, colorStrokeFocus2, fontFamilyBase, fontSizeBase300, fontWeightRegular, strokeWidthThin, } from '../theme/design-tokens.js';
 export const styles = css `
   ${display('inline')}
 
@@ -21,7 +21,7 @@ export const styles = css `
     user-select: text;
   }
 
-  :host(:is(:hover, :focus-visible)) {
+  :host(:hover) {
     outline: none;
     text-decoration-line: underline;
   }
@@ -54,6 +54,15 @@ export const styles = css `
     text-decoration: underline;
   }
 
+  :host(:focus-visible),
+  :host-context(:is(h1, h2, h3, h4, h5, h6, p, fluent-text)):focus-visible,
+  :host([inline]:focus-visible) {
+    outline-style: none;
+    text-decoration-line: underline;
+    text-decoration-style: double;
+    text-decoration-color: ${colorStrokeFocus2};
+  }
+
   :host(:not([href])) {
     color: inherit;
     text-decoration: none;
@@ -63,9 +72,11 @@ export const styles = css `
     position: absolute;
     inset: 0;
   }
-`.withBehaviors(forcedColorsStylesheetBehavior(css `
+
+  @media (forced-colors: active) {
     :host {
       color: LinkText;
     }
-  `));
+  }
+`;
 //# sourceMappingURL=link.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"link.styles.js","sourceRoot":"","sources":["../../../src/link/link.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,8BAA8B,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EACL,wBAAwB,EACxB,6BAA6B,EAC7B,+BAA+B,EAC/B,2BAA2B,EAC3B,gCAAgC,EAChC,kCAAkC,EAClC,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,QAAQ,CAAC;;;;;;aAMR,wBAAwB;;mBAElB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;;;;iCAIH,eAAe;;;;;;;;;;;;eAYjC,6BAA6B;;;;eAI7B,+BAA+B;;;;eAI/B,gCAAgC;;;;eAIhC,kCAAkC;;;;;aAKpC,2BAA2B;;;;;;;;;;;;;;;;;;CAkBvC,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;GAIjC,CAAC,CACH,CAAC"}
+{"version":3,"file":"link.styles.js","sourceRoot":"","sources":["../../../src/link/link.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EACL,wBAAwB,EACxB,6BAA6B,EAC7B,+BAA+B,EAC/B,2BAA2B,EAC3B,gCAAgC,EAChC,kCAAkC,EAClC,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,QAAQ,CAAC;;;;;;aAMR,wBAAwB;;mBAElB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;;;;iCAIH,eAAe;;;;;;;;;;;;eAYjC,6BAA6B;;;;eAI7B,+BAA+B;;;;eAI/B,gCAAgC;;;;eAIhC,kCAAkC;;;;;aAKpC,2BAA2B;;;;;;;;;;;;;;;6BAeX,iBAAiB;;;;;;;;;;;;;;;;;;CAkB7C,CAAC"}

package/dist/esm/link/link.template.html

@@ -0,0 +1,6 @@
+<f-template name="fluent-link" shadowrootmode="open">
+  <template tabindex="0" @click="{clickHandler($e)}" @keydown="{keydownHandler($e)}">
+    {{styles}}
+    <slot></slot>
+  </template>
+</f-template>

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

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

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

@@ -0,0 +1,4 @@
+import { declarativeDefinition } from './listbox.definition-async.js';
+import { Listbox } from './listbox.js';
+Listbox.define(declarativeDefinition);
+//# sourceMappingURL=define-async.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"define-async.js","sourceRoot":"","sources":["../../../src/listbox/define-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC"}

package/dist/esm/listbox/define.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/listbox/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/listbox/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC"}

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

@@ -3,3 +3,4 @@ export { Listbox } from './listbox.js';
 export { isListbox } from './listbox.options.js';
 export { styles as ListboxStyles } from './listbox.styles.js';
 export { template as ListboxTemplate, listboxTemplate } from './listbox.template.js';
+export { tagName as ListboxTagName } from './listbox.options.js';

package/dist/esm/listbox/index.js

@@ -3,4 +3,5 @@ export { Listbox } from './listbox.js';
 export { isListbox } from './listbox.options.js';
 export { styles as ListboxStyles } from './listbox.styles.js';
 export { template as ListboxTemplate, listboxTemplate } from './listbox.template.js';
+export { tagName as ListboxTagName } from './listbox.options.js';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/listbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC1E,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,QAAQ,IAAI,eAAe,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/listbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC1E,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,QAAQ,IAAI,eAAe,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACrF,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/esm/listbox/listbox.d.ts

@@ -17,14 +17,18 @@ import type { DropdownOption } from '../option/option.js';
  */
 export declare class Listbox extends FASTElement {
     /**
-     * Sets the listbox ID to a unique value if one is not provided.
+     * A reference to the default slot element.
      *
-     * @override
-     * @public
-     * @remarks
-     * HTML Attribute: `id`
+     * @internal
+     */
+    defaultSlot: HTMLSlotElement;
+    /**
+     * Calls the `slotchangeHandler` when the `defaultSlot` element is assigned
+     * via the `ref` directive in the template.
+     *
+     * @internal
      */
-    id: string;
+    protected defaultSlotChanged(): void;
     /**
      * Indicates whether the listbox allows multiple selection.
      *
@@ -97,6 +101,7 @@ export declare class Listbox extends FASTElement {
      */
     clickHandler(e: PointerEvent): boolean | void;
     constructor();
+    connectedCallback(): void;
     /**
      * Handles observable subscriptions for the listbox.
      *
@@ -120,5 +125,5 @@ export declare class Listbox extends FASTElement {
      * @param e - The slotchange event
      * @public
      */
-    slotchangeHandler(e: Event): void;
+    slotchangeHandler(e?: Event): void;
 }

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

@@ -0,0 +1,10 @@
+import { type PartialFASTElementDefinition } from '@microsoft/fast-element/declarative.js';
+/**
+ * The async definition configuration for the `<fluent-listbox>` 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 declarativeDefinition: PartialFASTElementDefinition;

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

@@ -0,0 +1,17 @@
+import { declarativeTemplate } from '@microsoft/fast-element/declarative.js';
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { tagName } from './listbox.options.js';
+/**
+ * The async definition configuration for the `<fluent-listbox>` 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 declarativeDefinition = {
+    name: tagName,
+    registry: FluentDesignSystem.registry,
+    template: declarativeTemplate(),
+};
+//# sourceMappingURL=listbox.definition-async.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"listbox.definition-async.js","sourceRoot":"","sources":["../../../src/listbox/listbox.definition-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAqC,MAAM,wCAAwC,CAAC;AAChH,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAiC;IACjE,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,kBAAkB,CAAC,QAAQ;IACrC,QAAQ,EAAE,mBAAmB,EAAE;CAChC,CAAC"}

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

@@ -1,9 +1,7 @@
-import { Listbox } from './listbox.js';
+import type { PartialFASTElementDefinition } from '@microsoft/fast-element';
 /**
- * The Fluent Listbox Element
+ * The definition for the `<fluent-listbox>` element.
  *
  * @public
- * @remarks
- * HTML Element: `<fluent-listbox>`
  */
-export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof Listbox>;
+export declare const definition: PartialFASTElementDefinition;

package/dist/esm/listbox/listbox.definition.js

@@ -1,17 +1,16 @@
 import { FluentDesignSystem } from '../fluent-design-system.js';
-import { Listbox } from './listbox.js';
+import { tagName } from './listbox.options.js';
 import { styles } from './listbox.styles.js';
 import { template } from './listbox.template.js';
 /**
- * The Fluent Listbox Element
+ * The definition for the `<fluent-listbox>` element.
  *
  * @public
- * @remarks
- * HTML Element: `<fluent-listbox>`
  */
-export const definition = Listbox.compose({
-    name: `${FluentDesignSystem.prefix}-listbox`,
-    template,
+export const definition = {
+    name: tagName,
+    registry: FluentDesignSystem.registry,
     styles,
-});
+    template,
+};
 //# sourceMappingURL=listbox.definition.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"listbox.definition.js","sourceRoot":"","sources":["../../../src/listbox/listbox.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,CAAC;IACxC,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,UAAU;IAC5C,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}
+{"version":3,"file":"listbox.definition.js","sourceRoot":"","sources":["../../../src/listbox/listbox.definition.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAiC;IACtD,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,kBAAkB,CAAC,QAAQ;IACrC,MAAM;IACN,QAAQ;CACT,CAAC"}

package/dist/esm/listbox/listbox.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { attr, FASTElement, observable, Updates } from '@microsoft/fast-element';
+import { FASTElement, observable, Updates } from '@microsoft/fast-element';
 import { isDropdownOption } from '../option/option.options.js';
 import { toggleState } from '../utils/element-internals.js';
 import { waitForConnectedDescendants } from '../utils/request-idle-callback.js';
@@ -19,6 +19,15 @@ import { uniqueId } from '../utils/unique-id.js';
  * @public
  */
 export class Listbox extends FASTElement {
+    /**
+     * Calls the `slotchangeHandler` when the `defaultSlot` element is assigned
+     * via the `ref` directive in the template.
+     *
+     * @internal
+     */
+    defaultSlotChanged() {
+        this.slotchangeHandler();
+    }
     /**
      * Updates the multiple selection state of the listbox and its options.
      *
@@ -72,7 +81,9 @@ export class Listbox extends FASTElement {
      * @internal
      */
     get enabledOptions() {
-        return this.options?.filter(x => !x.disabled) ?? [];
+        return (this.options?.filter(x => !x.disabled) ??
+            Array.from(this.querySelectorAll('*')).filter((o) => isDropdownOption(o) && !o.disabled) ??
+            []);
     }
     /**
      * The collection of child options that are selected.
@@ -100,15 +111,6 @@ export class Listbox extends FASTElement {
     }
     constructor() {
         super();
-        /**
-         * Sets the listbox ID to a unique value if one is not provided.
-         *
-         * @override
-         * @public
-         * @remarks
-         * HTML Attribute: `id`
-         */
-        this.id = uniqueId('listbox-');
         /**
          * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
          *
@@ -117,6 +119,15 @@ export class Listbox extends FASTElement {
         this.elementInternals = this.attachInternals();
         this.elementInternals.role = 'listbox';
     }
+    connectedCallback() {
+        super.connectedCallback();
+        // The listbox needs to have an id for the dropdown to reference via
+        // `aria-controls`. If an id is not present on connection, a unique one is
+        // generated and assigned to the element.
+        waitForConnectedDescendants(this, () => {
+            this.id = this.id || uniqueId('listbox-');
+        }, { shallow: true });
+    }
     /**
      * Handles observable subscriptions for the listbox.
      *
@@ -165,18 +176,19 @@ export class Listbox extends FASTElement {
      * @public
      */
     slotchangeHandler(e) {
-        const target = e.target;
         waitForConnectedDescendants(this, () => {
-            const options = target
-                .assignedElements()
-                .filter((option) => isDropdownOption(option));
-            this.options = options;
+            if (this.defaultSlot) {
+                const options = this.defaultSlot
+                    .assignedElements()
+                    .filter((option) => isDropdownOption(option));
+                this.options = options;
+            }
         });
     }
 }
 __decorate([
-    attr({ attribute: 'id', mode: 'fromView' })
-], Listbox.prototype, "id", void 0);
+    observable
+], Listbox.prototype, "defaultSlot", void 0);
 __decorate([
     observable
 ], Listbox.prototype, "multiple", void 0);

package/dist/esm/listbox/listbox.js.map

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

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

@@ -8,3 +8,9 @@ import type { Listbox } from './listbox.js';
  * @public
  */
 export declare function isListbox(element?: Node | null, tagName?: string): element is Listbox;
+/**
+ * The tag name for the listbox element.
+ *
+ * @public
+ */
+export declare const tagName: "fluent-listbox";

package/dist/esm/listbox/listbox.options.js

@@ -1,3 +1,4 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
 /**
  * Predicate function that determines if the element should be considered a listbox.
  *
@@ -12,4 +13,10 @@ export function isListbox(element, tagName = '-listbox') {
     }
     return element.tagName.toLowerCase().endsWith(tagName);
 }
+/**
+ * The tag name for the listbox element.
+ *
+ * @public
+ */
+export const tagName = `${FluentDesignSystem.prefix}-listbox`;
 //# sourceMappingURL=listbox.options.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"listbox.options.js","sourceRoot":"","sources":["../../../src/listbox/listbox.options.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,MAAM,UAAU,SAAS,CAAC,OAAqB,EAAE,UAAkB,UAAU;IAC3E,IAAI,OAAO,EAAE,QAAQ,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC;QAC5C,OAAO,KAAK,CAAC;IACf,CAAC;IAED,OAAQ,OAAmB,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;AACtE,CAAC"}
+{"version":3,"file":"listbox.options.js","sourceRoot":"","sources":["../../../src/listbox/listbox.options.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAGhE;;;;;;;GAOG;AACH,MAAM,UAAU,SAAS,CAAC,OAAqB,EAAE,UAAkB,UAAU;IAC3E,IAAI,OAAO,EAAE,QAAQ,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC;QAC5C,OAAO,KAAK,CAAC;IACf,CAAC;IAED,OAAQ,OAAmB,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;AACtE,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,kBAAkB,CAAC,MAAM,UAAmB,CAAC"}

package/dist/esm/listbox/listbox.styles.css

@@ -0,0 +1,49 @@
+:host([hidden]) {
+  display: none;
+}
+:host {
+  display: inline-flex;
+}
+
+:host {
+  background-color: var(--colorNeutralBackground1);
+  border-radius: var(--borderRadiusMedium);
+  border: var(--strokeWidthThin) solid var(--colorTransparentStroke);
+  box-shadow: var(--shadow16);
+  box-sizing: border-box;
+  flex-direction: column;
+  margin: 0;
+  min-inline-size: 160px;
+  padding: var(--spacingHorizontalXS);
+  row-gap: var(--spacingHorizontalXXS);
+  width: auto;
+}
+
+:host([popover]) {
+  inset: unset;
+  overflow: auto;
+}
+
+@supports (anchor-name: --anchor) {
+  :host([popover]) {
+    position: fixed;
+    max-block-size: var(--listbox-max-height, calc(50vh - anchor-size(self-block)));
+    min-inline-size: anchor-size(inline);
+    inset-block-start: anchor(outside);
+    inset-inline-start: anchor(inside);
+    position-try-fallbacks: flip-block, flip-inline, flip-inline flip-block;
+  }
+}
+
+@supports not (anchor-name: --anchor) {
+  :host([popover]) {
+    margin-block-start: var(--margin-offset, 0);
+    max-block-size: var(--listbox-max-height, 50vh);
+    position: absolute;
+  }
+
+  :host([popover]:state(flip-block)) {
+    margin-block-start: revert;
+    translate: 0 -100%;
+  }
+}

package/dist/esm/listbox/listbox.styles.js

@@ -18,7 +18,7 @@ export const styles = css `
     box-sizing: border-box;
     flex-direction: column;
     margin: 0;
-    min-width: 160px;
+    min-inline-size: 160px;
     padding: ${spacingHorizontalXS};
     row-gap: ${spacingHorizontalXXS};
     width: auto;
@@ -31,26 +31,20 @@ export const styles = css `
 
   @supports (anchor-name: --anchor) {
     :host([popover]) {
-      position: absolute;
-      margin-block-start: 0;
-      max-height: var(--listbox-max-height, calc(50vh - anchor-size(self-block)));
-      min-width: anchor-size(width);
-      position-anchor: --dropdown;
-      position-area: block-end span-inline-end;
-      position-try-fallbacks: flip-inline, flip-block, --flip-block, block-start;
-    }
-
-    @position-try --flip-block {
-      bottom: anchor(top);
-      top: unset;
+      position: fixed;
+      max-block-size: var(--listbox-max-height, calc(50vh - anchor-size(self-block)));
+      min-inline-size: anchor-size(inline);
+      inset-block-start: anchor(outside);
+      inset-inline-start: anchor(inside);
+      position-try-fallbacks: flip-block, flip-inline, flip-inline flip-block;
     }
   }
 
   @supports not (anchor-name: --anchor) {
     :host([popover]) {
       margin-block-start: var(--margin-offset, 0);
-      max-height: var(--listbox-max-height, 50vh);
-      position: fixed;
+      max-block-size: var(--listbox-max-height, 50vh);
+      position: absolute;
     }
 
     :host([popover]${flipBlockState}) {

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

@@ -1 +1 @@
-{"version":3,"file":"listbox.styles.js","sourceRoot":"","sources":["../../../src/listbox/listbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,sBAAsB,EACtB,QAAQ,EACR,mBAAmB,EACnB,oBAAoB,EACpB,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;;;wBAGF,uBAAuB;qBAC1B,kBAAkB;cACzB,eAAe,UAAU,sBAAsB;kBAC3C,QAAQ;;;;;eAKX,mBAAmB;eACnB,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAiCd,cAAc;;;;;CAKlC,CAAC"}
+{"version":3,"file":"listbox.styles.js","sourceRoot":"","sources":["../../../src/listbox/listbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,sBAAsB,EACtB,QAAQ,EACR,mBAAmB,EACnB,oBAAoB,EACpB,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;;;wBAGF,uBAAuB;qBAC1B,kBAAkB;cACzB,eAAe,UAAU,sBAAsB;kBAC3C,QAAQ;;;;;eAKX,mBAAmB;eACnB,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;qBA2Bd,cAAc;;;;;CAKlC,CAAC"}

package/dist/esm/listbox/listbox.template.html

@@ -0,0 +1,6 @@
+<f-template name="fluent-listbox" shadowrootmode="open">
+  <template @beforetoggle="{beforetoggleHandler($e)}" @click="{clickHandler($e)}">
+    {{styles}}
+    <slot f-ref="{defaultSlot}" @slotchange="{slotchangeHandler($e)}"></slot>
+  </template>
+</f-template>

package/dist/esm/listbox/listbox.template.js

@@ -1,4 +1,4 @@
-import { html } from '@microsoft/fast-element';
+import { html, ref } from '@microsoft/fast-element';
 /**
  * Generates a template for the {@link (Dropdown:class)} component.
  *
@@ -9,11 +9,10 @@ import { html } from '@microsoft/fast-element';
 export function listboxTemplate() {
     return html `
     <template
-      id="${x => x.id}"
       @beforetoggle="${(x, c) => x.beforetoggleHandler(c.event)}"
       @click="${(x, c) => x.clickHandler(c.event)}"
     >
-      <slot @slotchange="${(x, c) => x.slotchangeHandler(c.event)}"></slot>
+      <slot ${ref('defaultSlot')} @slotchange="${(x, c) => x.slotchangeHandler(c.event)}"></slot>
     </template>
   `;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"listbox.template.js","sourceRoot":"","sources":["../../../src/listbox/listbox.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGzE;;;;;;GAMG;AACH,MAAM,UAAU,eAAe;IAC7B,OAAO,IAAI,CAAG;;YAEJ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;uBACE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,KAAoB,CAAC;gBAC9D,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAqB,CAAC;;2BAEtC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAK,CAAC;;GAE9D,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAiC,eAAe,EAAE,CAAC"}
+{"version":3,"file":"listbox.template.js","sourceRoot":"","sources":["../../../src/listbox/listbox.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAG9E;;;;;;GAMG;AACH,MAAM,UAAU,eAAe;IAC7B,OAAO,IAAI,CAAG;;uBAEO,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,KAAoB,CAAC;gBAC9D,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAqB,CAAC;;cAEnD,GAAG,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAK,CAAC;;GAEpF,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAiC,eAAe,EAAE,CAAC"}

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

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

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

@@ -0,0 +1,4 @@
+import { declarativeDefinition } from './menu.definition-async.js';
+import { Menu } from './menu.js';
+Menu.define(declarativeDefinition);
+//# sourceMappingURL=define-async.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"define-async.js","sourceRoot":"","sources":["../../../src/menu/define-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,IAAI,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC"}

package/dist/esm/menu/define.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/menu/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/menu/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC"}

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

@@ -2,3 +2,4 @@ export { Menu } from './menu.js';
 export { template as MenuTemplate } from './menu.template.js';
 export { styles as MenuStyles } from './menu.styles.js';
 export { definition as MenuDefinition } from './menu.definition.js';
+export { tagName as MenuTagName } from './menu.options.js';

package/dist/esm/menu/index.js

@@ -2,4 +2,5 @@ export { Menu } from './menu.js';
 export { template as MenuTemplate } from './menu.template.js';
 export { styles as MenuStyles } from './menu.styles.js';
 export { definition as MenuDefinition } from './menu.definition.js';
+export { tagName as MenuTagName } from './menu.options.js';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/esm/menu/menu.bench.d.ts

@@ -1,3 +1,7 @@
+import '../menu-button/define.js';
+import '../menu-item/define.js';
+import '../menu-list/define.js';
+import './define.js';
 declare const itemRenderer: () => HTMLElement;
 export default itemRenderer;
 export { tests } from '../utils/benchmark-wrapper.js';