@fluentui/web-components 3.0.0-beta.9 → 3.0.0-beta.91

package/dist/esm/label/label.js.map

@@ -1 +1 @@
-{"version":3,"file":"label.js","sourceRoot":"","sources":["../../../src/label/label.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG5D;;;GAGG;AACH,MAAM,OAAO,KAAM,SAAQ,WAAW;IAAtC;;QAuBE;;;;;;WAMG;QAEI,aAAQ,GAAY,KAAK,CAAC;QAEjC;;;;;;WAMG;QAEI,aAAQ,GAAY,KAAK,CAAC;IACnC,CAAC;CAAA;AAhCC;IADC,IAAI;mCACmB;AAWxB;IADC,IAAI;qCACuB;AAU5B;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;uCACO;AAUjC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;uCACO"}
+{"version":3,"file":"label.js","sourceRoot":"","sources":["../../../src/label/label.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG5D;;;GAGG;AACH,MAAM,OAAO,KAAM,SAAQ,WAAW;IAAtC;;QAqBE;;;;;;WAMG;QAEI,aAAQ,GAAY,KAAK,CAAC;QAEjC;;;;;;WAMG;QAEI,aAAQ,GAAY,KAAK,CAAC;IACnC,CAAC;CAAA;AA/BQ;IADN,IAAI;mCACmB;AAUjB;IADN,IAAI;qCACuB;AAUrB;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;uCACO;AAU1B;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;uCACO"}

package/dist/esm/label/label.styles.js

@@ -1,38 +1,44 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation/utilities.js';
+import { display } from '../utils/index.js';
 import { colorNeutralForeground1, colorNeutralForegroundDisabled, colorPaletteRedForeground1, fontFamilyBase, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontWeightRegular, fontWeightSemibold, lineHeightBase200, lineHeightBase300, lineHeightBase400, spacingHorizontalXS, } from '../theme/design-tokens.js';
 /** Label styles
  * @public
  */
 export const styles = css `
-  ${display('flex')}
+  ${display('inline-flex')}
 
   :host {
-    font-family: var(${fontFamilyBase});
-    font-size: var(${fontSizeBase300});
-    line-height: var(${lineHeightBase300});
-    font-weight: var(${fontWeightRegular});
-    color: var(${colorNeutralForeground1});
+    color: ${colorNeutralForeground1};
+    cursor: pointer;
+    font-family: ${fontFamilyBase};
+    font-size: ${fontSizeBase300};
+    font-weight: ${fontWeightRegular};
+    line-height: ${lineHeightBase300};
+    user-select: none;
   }
+
   .asterisk {
-    color: var(${colorPaletteRedForeground1});
-    margin-left: var(${spacingHorizontalXS});
+    color: ${colorPaletteRedForeground1};
+    margin-inline-start: ${spacingHorizontalXS};
   }
+
   :host([size='small']) {
-    font-size: var(${fontSizeBase200});
-    line-height: var(${lineHeightBase200});
+    font-size: ${fontSizeBase200};
+    line-height: ${lineHeightBase200};
   }
+
   :host([size='large']) {
-    font-size: var(${fontSizeBase400});
-    line-height: var(${lineHeightBase400});
-    font-weight: var(${fontWeightSemibold});
+    font-size: ${fontSizeBase400};
+    line-height: ${lineHeightBase400};
   }
-  :host([weight='semibold']) {
-    font-weight: var(${fontWeightSemibold});
+
+  :host(:is([size='large'], [weight='semibold'])) {
+    font-weight: ${fontWeightSemibold};
   }
+
   :host([disabled]),
   :host([disabled]) .asterisk {
-    color: var(${colorNeutralForegroundDisabled});
+    color: ${colorNeutralForegroundDisabled};
   }
 `;
 //# sourceMappingURL=label.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"label.styles.js","sourceRoot":"","sources":["../../../src/label/label.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,yCAAyC,CAAC;AAClE,OAAO,EACL,uBAAuB,EACvB,8BAA8B,EAC9B,0BAA0B,EAC1B,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,mBAAmB,GACpB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;uBAGI,cAAc;qBAChB,eAAe;uBACb,iBAAiB;uBACjB,iBAAiB;iBACvB,uBAAuB;;;iBAGvB,0BAA0B;uBACpB,mBAAmB;;;qBAGrB,eAAe;uBACb,iBAAiB;;;qBAGnB,eAAe;uBACb,iBAAiB;uBACjB,kBAAkB;;;uBAGlB,kBAAkB;;;;iBAIxB,8BAA8B;;CAE9C,CAAC"}
+{"version":3,"file":"label.styles.js","sourceRoot":"","sources":["../../../src/label/label.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EACL,uBAAuB,EACvB,8BAA8B,EAC9B,0BAA0B,EAC1B,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,mBAAmB,GACpB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;aAGb,uBAAuB;;mBAEjB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;;aAKvB,0BAA0B;2BACZ,mBAAmB;;;;iBAI7B,eAAe;mBACb,iBAAiB;;;;iBAInB,eAAe;mBACb,iBAAiB;;;;mBAIjB,kBAAkB;;;;;aAKxB,8BAA8B;;CAE1C,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"label.template.js","sourceRoot":"","sources":["../../../src/label/label.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGpE;;;GAGG;AACH,MAAM,UAAU,aAAa;IAC3B,OAAO,IAAI,CAAG;;sDAEsC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ;GACnE,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAA+B,aAAa,EAAE,CAAC"}
+{"version":3,"file":"label.template.js","sourceRoot":"","sources":["../../../src/label/label.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGzE;;;GAGG;AACH,MAAM,UAAU,aAAa;IAC3B,OAAO,IAAI,CAAG;;sDAEsC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ;GACnE,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAA+B,aAAa,EAAE,CAAC"}

package/dist/esm/link/define.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/link/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"}

package/dist/esm/link/index.js

@@ -0,0 +1,6 @@
+export { definition as LinkDefinition } from './link.definition.js';
+export { Link } from './link.js';
+export { LinkAppearance, LinkTarget } from './link.options.js';
+export { styles as LinkStyles } from './link.styles.js';
+export { template as LinkTemplate } from './link.template.js';
+//# sourceMappingURL=index.js.map

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

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

package/dist/esm/link/link.bench.js

@@ -0,0 +1,11 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './link.definition.js';
+definition.define(FluentDesignSystem.registry);
+const itemRenderer = () => {
+    const btn = document.createElement('fluent-link');
+    btn.appendChild(document.createTextNode('Link'));
+    return btn;
+};
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';
+//# sourceMappingURL=link.bench.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"link.bench.js","sourceRoot":"","sources":["../../../src/link/link.bench.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;AAE/C,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IAClD,GAAG,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;IACjD,OAAO,GAAG,CAAC;AACb,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/esm/link/link.definition.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"link.definition.js","sourceRoot":"","sources":["../../../src/link/link.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC;IACrC,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,OAAO;IACzC,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}

package/dist/esm/link/link.js

@@ -0,0 +1,36 @@
+import { __decorate } from "tslib";
+import { attr } from '@microsoft/fast-element';
+import { BaseAnchor } from '../anchor-button/anchor-button.base.js';
+/**
+ * An Anchor Custom HTML Element.
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element }.
+ *
+ * @slot start - Content which can be provided before the link content
+ * @slot end - Content which can be provided after the link content
+ * @slot - The default slot for link content
+ *
+ * @public
+ */
+export class Link extends BaseAnchor {
+    constructor() {
+        super(...arguments);
+        /**
+         * The link is inline with text
+         * In chromium browsers, if the link is contained within a semantic
+         * text element (`h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `p`) or `fluent-text`,
+         * `:host-context()` ensures inline links are styled appropriately.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: `inline`
+         */
+        this.inline = false;
+    }
+}
+__decorate([
+    attr
+], Link.prototype, "appearance", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], Link.prototype, "inline", void 0);
+//# sourceMappingURL=link.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"link.js","sourceRoot":"","sources":["../../../src/link/link.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,wCAAwC,CAAC;AAGpE;;;;;;;;;GASG;AACH,MAAM,OAAO,IAAK,SAAQ,UAAU;IAApC;;QAWE;;;;;;;;;WASG;QAEI,WAAM,GAAY,KAAK,CAAC;IACjC,CAAC;CAAA;AAdQ;IADN,IAAI;wCAC0C;AAaxC;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;oCACK"}

package/dist/esm/link/link.options.js

@@ -0,0 +1,21 @@
+import { AnchorAttributes, AnchorTarget } from '../anchor-button/anchor-button.options.js';
+/**
+ * Link Appearance constants
+ * @public
+ */
+export const LinkAppearance = {
+    subtle: 'subtle',
+};
+/**
+ * Link target values.
+ *
+ * @public
+ */
+export const LinkTarget = AnchorTarget;
+/**
+ * Reflected link attributes.
+ *
+ * @public
+ */
+export const LinkAttributes = AnchorAttributes;
+//# sourceMappingURL=link.options.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"link.options.js","sourceRoot":"","sources":["../../../src/link/link.options.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,2CAA2C,CAAC;AAG3F;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,MAAM,EAAE,QAAQ;CACR,CAAC;AAQX;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC;AASvC;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,gBAAgB,CAAC"}

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

@@ -0,0 +1,71 @@
+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';
+export const styles = css `
+  ${display('inline')}
+
+  :host {
+    position: relative;
+    box-sizing: border-box;
+    background-color: transparent;
+    color: ${colorBrandForegroundLink};
+    cursor: pointer;
+    font-family: ${fontFamilyBase};
+    font-size: ${fontSizeBase300};
+    font-weight: ${fontWeightRegular};
+    overflow: inherit;
+    text-align: start;
+    text-decoration: none;
+    text-decoration-thickness: ${strokeWidthThin};
+    text-overflow: inherit;
+    user-select: text;
+  }
+
+  :host(:is(:hover, :focus-visible)) {
+    outline: none;
+    text-decoration-line: underline;
+  }
+
+  @media (hover: hover) {
+    :host(:hover) {
+      color: ${colorBrandForegroundLinkHover};
+    }
+
+    :host(:active) {
+      color: ${colorBrandForegroundLinkPressed};
+    }
+
+    :host([appearance='subtle']:hover) {
+      color: ${colorNeutralForeground2LinkHover};
+    }
+
+    :host([appearance='subtle']:active) {
+      color: ${colorNeutralForeground2LinkPressed};
+    }
+  }
+
+  :host([appearance='subtle']) {
+    color: ${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;
+  }
+`.withBehaviors(forcedColorsStylesheetBehavior(css `
+    :host {
+      color: LinkText;
+    }
+  `));
+//# sourceMappingURL=link.styles.js.map

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

@@ -0,0 +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"}

package/dist/esm/link/link.template.js

@@ -0,0 +1,22 @@
+import { html } from '@microsoft/fast-element';
+/**
+ * The template for the Link component.
+ * @public
+ */
+export function anchorTemplate() {
+    return html `
+    <template
+      tabindex="0"
+      @click="${(x, c) => x.clickHandler(c.event)}"
+      @keydown="${(x, c) => x.keydownHandler(c.event)}"
+    >
+      <slot></slot>
+    </template>
+  `;
+}
+/**
+ * The template for the Link component.
+ * @public
+ */
+export const template = anchorTemplate();
+//# sourceMappingURL=link.template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"link.template.js","sourceRoot":"","sources":["../../../src/link/link.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAgB,MAAM,yBAAyB,CAAC;AAGvF;;;GAGG;AACH,MAAM,UAAU,cAAc;IAC5B,OAAO,IAAI,CAAG;;;gBAGA,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAqB,CAAC;kBAC/C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAsB,CAAC;;;;GAInE,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA8B,cAAc,EAAE,CAAC"}

package/dist/esm/listbox/define.js

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

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

@@ -0,0 +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"}

package/dist/esm/listbox/index.js

@@ -0,0 +1,6 @@
+export { definition as ListboxDefinition } from './listbox.definition.js';
+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';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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"}

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

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

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

@@ -0,0 +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"}

package/dist/esm/listbox/listbox.js

@@ -0,0 +1,178 @@
+import { __decorate } from "tslib";
+import { attr, FASTElement, observable, Updates } from '@microsoft/fast-element';
+import { isDropdownOption } from '../option/option.options.js';
+import { toggleState } from '../utils/element-internals.js';
+import { uniqueId } from '../utils/unique-id.js';
+/**
+ * A Listbox Custom HTML Element.
+ * Implements the {@link https://w3c.github.io/aria/#listbox | ARIA listbox } role.
+ *
+ * @slot - The default slot for the options.
+ * @emits connected - Dispatched when the element is connected to the DOM.
+ *
+ * @remarks
+ * The listbox component represents a list of options that can be selected.
+ * It is intended to be used in conjunction with the {@link BaseDropdown | Dropdown} component.
+ *
+ * @public
+ */
+export class Listbox extends FASTElement {
+    /**
+     * Updates the multiple selection state of the listbox and its options.
+     *
+     * @param prev - the previous multiple value
+     * @param next - the current multiple value
+     */
+    multipleChanged(prev, next) {
+        this.elementInternals.ariaMultiSelectable = next ? 'true' : 'false';
+        toggleState(this.elementInternals, 'multiple', next);
+        Updates.enqueue(() => {
+            this.options.forEach(x => {
+                x.multiple = !!next;
+            });
+        });
+    }
+    /**
+     * Updates the enabled options collection when properties on the child options change.
+     *
+     * @param prev - the previous options
+     * @param next - the current options
+     *
+     * @internal
+     */
+    optionsChanged(prev, next) {
+        next?.forEach((option, index) => {
+            option.elementInternals.ariaPosInSet = `${index + 1}`;
+            option.elementInternals.ariaSetSize = `${next.length}`;
+        });
+    }
+    /**
+     * Handles the `beforetoggle` event on the listbox.
+     *
+     * @param e - the toggle event
+     * @returns true to allow the default popover behavior, undefined to prevent it
+     * @internal
+     */
+    beforetoggleHandler(e) {
+        if (!this.dropdown) {
+            return true;
+        }
+        if (this.dropdown.disabled) {
+            this.dropdown.open = false;
+            return;
+        }
+        this.dropdown.open = e.newState === 'open';
+        return true;
+    }
+    /**
+     * The collection of child options that are not disabled.
+     *
+     * @internal
+     */
+    get enabledOptions() {
+        return this.options?.filter(x => !x.disabled) ?? [];
+    }
+    /**
+     * The collection of child options that are selected.
+     *
+     * @public
+     */
+    get selectedOptions() {
+        return this.options?.filter(x => x.selected) ?? [];
+    }
+    /**
+     * Sets the `selected` state on a target option when clicked.
+     *
+     * @param e - The pointer event
+     * @public
+     */
+    clickHandler(e) {
+        if (this.dropdown) {
+            return true;
+        }
+        const target = e.target;
+        if (isDropdownOption(target)) {
+            this.selectOption(this.enabledOptions.indexOf(target));
+        }
+        return true;
+    }
+    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.
+         *
+         * @internal
+         */
+        this.elementInternals = this.attachInternals();
+        this.elementInternals.role = 'listbox';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.$emit('connected');
+    }
+    /**
+     * Handles observable subscriptions for the listbox.
+     *
+     * @param source - The source of the observed change
+     * @param propertyName - The name of the property that changed
+     *
+     * @internal
+     */
+    handleChange(source, propertyName) {
+        if (propertyName === 'multiple') {
+            this.multiple = source.multiple;
+            return;
+        }
+    }
+    /**
+     * Selects an option by index.
+     *
+     * @param index - The index of the option to select.
+     * @public
+     */
+    selectOption(index = this.selectedIndex) {
+        let selectedIndex = this.selectedIndex;
+        if (!this.multiple) {
+            this.enabledOptions.forEach((item, i) => {
+                const shouldCheck = i === index;
+                item.selected = shouldCheck;
+                if (shouldCheck) {
+                    selectedIndex = i;
+                }
+            });
+        }
+        else {
+            const option = this.enabledOptions[index];
+            if (option) {
+                option.selected = !option.selected;
+            }
+            selectedIndex = index;
+        }
+        this.selectedIndex = selectedIndex;
+    }
+}
+__decorate([
+    attr({ attribute: 'id', mode: 'fromView' })
+], Listbox.prototype, "id", void 0);
+__decorate([
+    observable
+], Listbox.prototype, "multiple", void 0);
+__decorate([
+    observable
+], Listbox.prototype, "options", void 0);
+__decorate([
+    observable
+], Listbox.prototype, "selectedIndex", void 0);
+__decorate([
+    observable
+], Listbox.prototype, "dropdown", void 0);
+//# sourceMappingURL=listbox.js.map

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

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

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

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

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

@@ -0,0 +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"}

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

@@ -0,0 +1,26 @@
+import { css } from '@microsoft/fast-element';
+import { borderRadiusMedium, colorNeutralBackground1, shadow16, spacingHorizontalXS, spacingHorizontalXXS, } from '../theme/design-tokens.js';
+import { display } from '../utils/display.js';
+/**
+ * Styles for the {@link (Listbox:class)} component.
+ *
+ * @public
+ */
+export const styles = css `
+  ${display('inline-flex')}
+
+  :host {
+    background-color: ${colorNeutralBackground1};
+    border-radius: ${borderRadiusMedium};
+    border: none;
+    box-shadow: ${shadow16};
+    box-sizing: border-box;
+    flex-direction: column;
+    margin: 0;
+    min-width: 160px;
+    padding: ${spacingHorizontalXS};
+    row-gap: ${spacingHorizontalXXS};
+    width: auto;
+  }
+`;
+//# sourceMappingURL=listbox.styles.js.map

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

@@ -0,0 +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,EACL,kBAAkB,EAClB,uBAAuB,EACvB,QAAQ,EACR,mBAAmB,EACnB,oBAAoB,GACrB,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;;kBAErB,QAAQ;;;;;eAKX,mBAAmB;eACnB,oBAAoB;;;CAGlC,CAAC"}

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

@@ -0,0 +1,33 @@
+import { html, slotted } from '@microsoft/fast-element';
+import { isDropdownOption } from '../option/option.options.js';
+/**
+ * Generates a template for the {@link (Dropdown:class)} component.
+ *
+ * @param options - The {@link (DropdownOptions:interface)} to use for generating the template.
+ * @returns The template object.
+ *
+ * @public
+ */
+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
+        ${slotted({
+        property: 'options',
+        filter: node => isDropdownOption(node),
+    })}
+      ></slot>
+    </template>
+  `;
+}
+/**
+ * Template for the Listbox component.
+ *
+ * @public
+ */
+export const template = listboxTemplate();
+//# sourceMappingURL=listbox.template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"listbox.template.js","sourceRoot":"","sources":["../../../src/listbox/listbox.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAC7E,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAG/D;;;;;;;GAOG;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;;;UAGvD,OAAO,CAAC;QACR,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC;KACvC,CAAC;;;GAGP,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAiC,eAAe,EAAE,CAAC"}

package/dist/esm/menu/index.js

@@ -1,4 +1,4 @@
-export * from './menu.js';
+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';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/menu/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,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"}