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

package/dist/esm/tree-item/tree-item.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 './tree-item.options.js';
+/**
+ * The async definition for the `<fluent-tree-item>` 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=tree-item.definition-async.js.map

package/dist/esm/tree-item/tree-item.definition-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-item.definition-async.js","sourceRoot":"","sources":["../../../src/tree-item/tree-item.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,wBAAwB,CAAC;AAEjD;;;;;;;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/tree-item/tree-item.definition.d.ts

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

package/dist/esm/tree-item/tree-item.definition.js

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

package/dist/esm/tree-item/tree-item.definition.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree-item.definition.js","sourceRoot":"","sources":["../../../src/tree-item/tree-item.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,QAAQ,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEvE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,OAAO,CAAC;IACzC,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,YAAY;IAC9C,QAAQ,EAAE,gBAAgB;IAC1B,MAAM,EAAE,aAAa;CACtB,CAAC,CAAC"}
+{"version":3,"file":"tree-item.definition.js","sourceRoot":"","sources":["../../../src/tree-item/tree-item.definition.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEnD;;;;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/tree-item/tree-item.js

@@ -7,6 +7,21 @@ import { TreeItemAppearance, TreeItemSize } from './tree-item.options.js';
  *
  * @tag fluent-tree-item
  *
+ * @slot - The default slot. Accepts the content of the tree item.
+ * @slot start - Content shown before the item label.
+ * @slot end - Content shown after the item label.
+ * @slot aside - Content shown at the far end of the row.
+ * @slot item - Child tree items.
+ *
+ * @csspart positioning-region - The container for item content and aside regions.
+ * @csspart content - The item content region.
+ * @csspart chevron - The expand/collapse indicator region.
+ * @csspart aside - The trailing aside region.
+ * @csspart items - The child items group region.
+ *
+ * @fires { ToggleEvent } toggle - Fired when expanded state toggles.
+ * @fires { Event } change - Fired when selected state changes.
+ *
  */
 export class TreeItem extends BaseTreeItem {
     constructor() {

package/dist/esm/tree-item/tree-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree-item.js","sourceRoot":"","sources":["../../../src/tree-item/tree-item.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAE1E;;;;;GAKG;AACH,MAAM,OAAO,QAAS,SAAQ,YAAY;IAA1C;;QACE;;;WAGG;QAEI,SAAI,GAAiB,YAAY,CAAC,KAAK,CAAC;QAW/C;;;WAGG;QAEI,eAAU,GAAuB,kBAAkB,CAAC,MAAM,CAAC;IAoCpE,CAAC;IAlDC;;;;OAIG;IACO,WAAW;QACnB,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACjC,CAAC;IASD;;;;OAIG;IACO,iBAAiB;QACzB,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACjC,CAAC;IAED;;;OAGG;IACI,qBAAqB;QAC1B,KAAK,CAAC,qBAAqB,EAAE,CAAC;QAC9B,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACjC,CAAC;IAED;;;;;OAKG;IACI,uBAAuB;QAC5B,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,MAAM,EAAE,CAAC;YACjC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YAChC,IAAiB,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;YACnC,IAAiB,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;QAClD,CAAC,CAAC,CAAC;IACL,CAAC;CACF;AApDQ;IADN,IAAI;sCAC0C;AAgBxC;IADN,IAAI;4CAC6D"}
+{"version":3,"file":"tree-item.js","sourceRoot":"","sources":["../../../src/tree-item/tree-item.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAE1E;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,OAAO,QAAS,SAAQ,YAAY;IAA1C;;QACE;;;WAGG;QAEI,SAAI,GAAiB,YAAY,CAAC,KAAK,CAAC;QAW/C;;;WAGG;QAEI,eAAU,GAAuB,kBAAkB,CAAC,MAAM,CAAC;IAoCpE,CAAC;IAlDC;;;;OAIG;IACO,WAAW;QACnB,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACjC,CAAC;IASD;;;;OAIG;IACO,iBAAiB;QACzB,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACjC,CAAC;IAED;;;OAGG;IACI,qBAAqB;QAC1B,KAAK,CAAC,qBAAqB,EAAE,CAAC;QAC9B,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACjC,CAAC;IAED;;;;;OAKG;IACI,uBAAuB;QAC5B,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,MAAM,EAAE,CAAC;YACjC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YAChC,IAAiB,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;YACnC,IAAiB,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;QAClD,CAAC,CAAC,CAAC;IACL,CAAC;CACF;AApDQ;IADN,IAAI;sCAC0C;AAgBxC;IADN,IAAI;4CAC6D"}

package/dist/esm/tree-item/tree-item.options.d.ts

@@ -20,3 +20,9 @@ export type TreeItemSize = ValuesOf<typeof TreeItemSize>;
  * @public
  */
 export declare function isTreeItem(element?: Node | null, tagName?: string): element is BaseTreeItem;
+/**
+ * The tag name for the tree item element.
+ *
+ * @public
+ */
+export declare const tagName: "fluent-tree-item";

package/dist/esm/tree-item/tree-item.options.js

@@ -1,3 +1,4 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
 export const TreeItemAppearance = {
     subtle: 'subtle',
     subtleAlpha: 'subtle-alpha',
@@ -21,4 +22,10 @@ export function isTreeItem(element, tagName = '-tree-item') {
     }
     return element.tagName.toLowerCase().endsWith(tagName);
 }
+/**
+ * The tag name for the tree item element.
+ *
+ * @public
+ */
+export const tagName = `${FluentDesignSystem.prefix}-tree-item`;
 //# sourceMappingURL=tree-item.options.js.map

package/dist/esm/tree-item/tree-item.options.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree-item.options.js","sourceRoot":"","sources":["../../../src/tree-item/tree-item.options.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,MAAM,EAAE,QAAQ;IAChB,WAAW,EAAE,cAAc;IAC3B,WAAW,EAAE,aAAa;CAClB,CAAC;AAIX,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;CACR,CAAC;AAIX;;;;;;;GAOG;AACH,MAAM,UAAU,UAAU,CAAC,OAAqB,EAAE,UAAkB,YAAY;IAC9E,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":"tree-item.options.js","sourceRoot":"","sources":["../../../src/tree-item/tree-item.options.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAIhE,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,MAAM,EAAE,QAAQ;IAChB,WAAW,EAAE,cAAc;IAC3B,WAAW,EAAE,aAAa;CAClB,CAAC;AAIX,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;CACR,CAAC;AAIX;;;;;;;GAOG;AACH,MAAM,UAAU,UAAU,CAAC,OAAqB,EAAE,UAAkB,YAAY;IAC9E,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,YAAqB,CAAC"}

package/dist/esm/tree-item/tree-item.styles.css

@@ -0,0 +1,161 @@
+:host([hidden]) {
+  display: none;
+}
+:host {
+  display: block;
+}
+
+:host {
+  outline: none;
+  font-size: var(--fontSizeBase300);
+  line-height: var(--lineHeightBase300);
+}
+
+:host(:focus-visible) .positioning-region {
+  box-shadow: var(--spacingVerticalNone) var(--spacingVerticalNone) var(--spacingVerticalNone) var(--spacingVerticalXXS)
+    var(--colorStrokeFocus2) inset;
+}
+
+/**
+   * Default variants:
+   * Size - medium
+   * Appearance - subtle
+   */
+.positioning-region {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  height: var(--spacingVerticalXXXL);
+  padding-inline-start: calc(var(--indent) * var(--spacingHorizontalXXL));
+  padding-inline-end: var(--spacingVerticalS);
+  border-radius: var(--borderRadiusMedium);
+  background-color: var(--colorSubtleBackground);
+  color: var(--colorNeutralForeground2);
+  gap: var(--spacingHorizontalXS);
+}
+
+@media (prefers-contrast: more) {
+  :host(:focus-visible) .positioning-region {
+    outline: 1px solid var(--colorStrokeFocus2);
+  }
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  gap: var(--spacingHorizontalXS);
+}
+
+.chevron {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  justify-content: center;
+  width: var(--spacingHorizontalXXL);
+  height: var(--spacingVerticalXXL);
+  transition: transform var(--durationFaster) var(--curveEasyEaseMax);
+  transform: rotate(0deg);
+}
+
+.chevron:dir(rtl) {
+  transform: rotate(180deg);
+}
+
+.chevron svg {
+  inline-size: 12px;
+  block-size: 12px;
+}
+
+.aside {
+  display: flex;
+  align-items: center;
+}
+
+.positioning-region:hover {
+  background-color: var(--colorSubtleBackgroundHover);
+  color: var(--colorNeutralForeground2Hover);
+}
+
+.positioning-region:active {
+  background-color: var(--colorSubtleBackgroundPressed);
+  color: var(--colorNeutralForeground2Pressed);
+}
+
+::slotted([slot='start']),
+::slotted([slot='end']),
+::slotted(:not([slot])) {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+::slotted([slot='start']) {
+  flex-shrink: 0;
+}
+
+::slotted(:not([slot])) {
+  padding-inline: var(--spacingHorizontalXXS);
+}
+
+.items {
+  display: none;
+}
+
+:host([expanded]) .items {
+  display: block;
+}
+
+:host([empty]) .chevron,
+:host([empty]) .items {
+  visibility: hidden;
+}
+
+:host([selected]) .positioning-region {
+  background-color: var(--colorSubtleBackgroundSelected);
+  color: var(--colorNeutralForeground2Selected);
+}
+
+:host([selected]) .content,
+:host([selected]) .chevron {
+  color: var(--colorNeutralForeground3Selected);
+}
+
+:host([size='small']) .positioning-region {
+  height: var(--spacingVerticalXXL);
+  padding-inline-start: calc(var(--indent) * var(--spacingHorizontalM));
+}
+
+:host([appearance='subtle-alpha']) .positioning-region:hover {
+  background-color: var(--colorSubtleBackgroundLightAlphaHover);
+}
+
+:host([appearance='subtle-alpha']) .positioning-region:active {
+  background-color: var(--colorSubtleBackgroundLightAlphaPressed);
+}
+
+:host([appearance='subtle-alpha'][selected]) .positioning-region {
+  background-color: var(--colorSubtleBackgroundLightAlphaSelected);
+  color: var(--colorNeutralForeground2Selected);
+}
+
+:host([appearance='transparent']) .positioning-region {
+  background-color: var(--colorTransparentBackground);
+}
+
+:host([appearance='transparent']) .positioning-region:hover {
+  background-color: var(--colorTransparentBackgroundHover);
+}
+
+:host([appearance='transparent']) .positioning-region:active {
+  background-color: var(--colorTransparentBackgroundPressed);
+}
+
+:host([appearance='transparent'][selected]) .positioning-region {
+  background-color: var(--colorTransparentBackgroundSelected);
+  color: var(--colorNeutralForeground2Selected);
+}
+
+:host([expanded]) .chevron {
+  transform: rotate(90deg);
+}

package/dist/esm/tree-item/tree-item.template.html

@@ -0,0 +1,27 @@
+<f-template name="fluent-tree-item" shadowrootmode="open">
+  <template tabindex="0" ?focusgroupstart="{{selected}}">
+    {{styles}}
+    <div class="positioning-region" part="positioning-region">
+      <div class="content" part="content">
+        <span class="chevron" part="chevron" aria-hidden="true">
+          <slot name="chevron">
+            <svg viewBox="0 0 12 12" fill="currentColor">
+              <path
+                d="M4.65 2.15a.5.5 0 000 .7L7.79 6 4.65 9.15a.5.5 0 10.7.7l3.5-3.5a.5.5 0 000-.7l-3.5-3.5a.5.5 0 00-.7 0z"
+              ></path>
+            </svg>
+          </slot>
+        </span>
+        <slot name="start"></slot>
+        <slot></slot>
+        <slot name="end"></slot>
+      </div>
+      <div class="aside" part="aside">
+        <slot name="aside"></slot>
+      </div>
+    </div>
+    <div role="group" class="items" part="items">
+      <slot name="item" f-ref="{itemSlot}" @slotchange="{handleItemSlotChange()}"></slot>
+    </div>
+  </template>
+</f-template>

package/dist/esm/tree-item/tree-item.template.js

@@ -7,7 +7,7 @@ const chevronIcon = html `
   </svg>
 `;
 export const template = html `
-  <template slot="${x => (x.isNestedItem ? 'item' : void 0)}">
+  <template tabindex="0" ?focusgroupstart="${x => x.selected}">
     <div class="positioning-region" part="positioning-region">
       <div class="content" part="content">
         <span class="chevron" part="chevron" aria-hidden="true">

package/dist/esm/tree-item/tree-item.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree-item.template.js","sourceRoot":"","sources":["../../../src/tree-item/tree-item.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAGpD,MAAM,WAAW,GAAG,IAAI,CAAA;;;;;;CAMvB,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAU;oBAClB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;;;;iCAI1B,WAAW;;;;;;;;;;;0BAWlB,GAAG,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,oBAAoB,EAAE;;;CAGtF,CAAC"}
+{"version":3,"file":"tree-item.template.js","sourceRoot":"","sources":["../../../src/tree-item/tree-item.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAGpD,MAAM,WAAW,GAAG,IAAI,CAAA;;;;;;CAMvB,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAU;6CACO,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;;;;iCAI3B,WAAW;;;;;;;;;;;0BAWlB,GAAG,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,oBAAoB,EAAE;;;CAGtF,CAAC"}

package/dist/esm/utils/autofocus.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Artificial sets the focus to the given element, if no other element in the
+ * document is currently focused and the given element meets the following
+ * conditions:
+ *
+ * - is connected to DOM
+ * - has `autofocus` attribute
+ * - is visible
+ *
+ * For more details of this issue, see https://codepen.io/editor/marchbox/pen/019e9ab9-cd81-7c21-a3ae-1b7fe2d3458a
+ */
+export declare function maybeSetAutoFocus(element: HTMLElement): void;

package/dist/esm/utils/autofocus.js

@@ -0,0 +1,25 @@
+import { Updates } from '@microsoft/fast-element';
+/**
+ * Artificial sets the focus to the given element, if no other element in the
+ * document is currently focused and the given element meets the following
+ * conditions:
+ *
+ * - is connected to DOM
+ * - has `autofocus` attribute
+ * - is visible
+ *
+ * For more details of this issue, see https://codepen.io/editor/marchbox/pen/019e9ab9-cd81-7c21-a3ae-1b7fe2d3458a
+ */
+export function maybeSetAutoFocus(element) {
+    const doc = element.ownerDocument;
+    if (element?.isConnected &&
+        element?.hasAttribute('autofocus') &&
+        // Note: opacity=0 is considered visible based on the native `autofocus` implementation
+        element?.checkVisibility?.({ contentVisibilityAuto: true, visibilityProperty: true }) &&
+        [null, element, doc.body, doc.documentElement].includes(doc.activeElement)) {
+        Updates.enqueue(() => {
+            element.focus();
+        });
+    }
+}
+//# sourceMappingURL=autofocus.js.map

package/dist/esm/utils/autofocus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"autofocus.js","sourceRoot":"","sources":["../../../src/utils/autofocus.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAElD;;;;;;;;;;GAUG;AACH,MAAM,UAAU,iBAAiB,CAAC,OAAoB;IACpD,MAAM,GAAG,GAAG,OAAO,CAAC,aAAa,CAAC;IAClC,IACE,OAAO,EAAE,WAAW;QACpB,OAAO,EAAE,YAAY,CAAC,WAAW,CAAC;QAClC,uFAAuF;QACvF,OAAO,EAAE,eAAe,EAAE,CAAC,EAAE,qBAAqB,EAAE,IAAI,EAAE,kBAAkB,EAAE,IAAI,EAAE,CAAC;QACrF,CAAC,IAAI,EAAE,OAAO,EAAE,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,aAAmC,CAAC,EAChG,CAAC;QACD,OAAO,CAAC,OAAO,CAAC,GAAG,EAAE;YACnB,OAAO,CAAC,KAAK,EAAE,CAAC;QAClB,CAAC,CAAC,CAAC;IACL,CAAC;AACH,CAAC"}

package/dist/esm/utils/direction.d.ts

@@ -1,4 +1,16 @@
-import { Direction } from '@microsoft/fast-web-utilities';
+/**
+ * Expose ltr and rtl strings
+ * @public
+ */
+export declare const Direction: {
+    readonly ltr: "ltr";
+    readonly rtl: "rtl";
+};
+/**
+ * The direction type
+ * @public
+ */
+export type Direction = (typeof Direction)[keyof typeof Direction];
 /**
  * Determines the current localization direction of an element.
  *

package/dist/esm/utils/direction.js

@@ -1,5 +1,12 @@
 //Copied from @microsoft/fast-foundation
-import { Direction } from '@microsoft/fast-web-utilities';
+/**
+ * Expose ltr and rtl strings
+ * @public
+ */
+export const Direction = {
+    ltr: 'ltr',
+    rtl: 'rtl',
+};
 /**
  * Determines the current localization direction of an element.
  *

package/dist/esm/utils/direction.js.map

@@ -1 +1 @@
-{"version":3,"file":"direction.js","sourceRoot":"","sources":["../../../src/utils/direction.ts"],"names":[],"mappings":"AAAA,wCAAwC;AAExC,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAE1D;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,QAAqB,EAAa,EAAE;IAC/D,OAAO,QAAQ,CAAC,OAAO,CAAc,OAAO,CAAC,EAAE,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC;AAC/F,CAAC,CAAC"}
+{"version":3,"file":"direction.js","sourceRoot":"","sources":["../../../src/utils/direction.ts"],"names":[],"mappings":"AAAA,wCAAwC;AAExC;;;GAGG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,GAAG,EAAE,KAAK;IACV,GAAG,EAAE,KAAK;CACF,CAAC;AAQX;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,QAAqB,EAAa,EAAE;IAC/D,OAAO,QAAQ,CAAC,OAAO,CAAc,OAAO,CAAC,EAAE,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC;AAC/F,CAAC,CAAC"}

package/dist/esm/utils/focusable-element.js

@@ -1,5 +1,6 @@
 export const isARIADisabledElement = (el) => {
-    return el.getAttribute('aria-disabled') === 'true';
+    return (el.getAttribute('aria-disabled') === 'true' ||
+        el.elementInternals?.ariaDisabled === 'true');
 };
 export const isHiddenElement = (el) => {
     return el.hasAttribute('hidden');

package/dist/esm/utils/focusable-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"focusable-element.js","sourceRoot":"","sources":["../../../src/utils/focusable-element.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,EAAW,EAAW,EAAE;IAC5D,OAAO,EAAE,CAAC,YAAY,CAAC,eAAe,CAAC,KAAK,MAAM,CAAC;AACrD,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAW,EAAW,EAAE;IACtD,OAAO,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;AACnC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EAAW,EAAW,EAAE;IACzD,OAAO,CAAC,qBAAqB,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC;AAC5D,CAAC,CAAC"}
+{"version":3,"file":"focusable-element.js","sourceRoot":"","sources":["../../../src/utils/focusable-element.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,EAAW,EAAW,EAAE;IAC5D,OAAO,CACL,EAAE,CAAC,YAAY,CAAC,eAAe,CAAC,KAAK,MAAM;QACzC,EAAU,CAAC,gBAAiD,EAAE,YAAY,KAAK,MAAM,CACxF,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAW,EAAW,EAAE;IACtD,OAAO,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;AACnC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EAAW,EAAW,EAAE;IACzD,OAAO,CAAC,qBAAqB,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC;AAC5D,CAAC,CAAC"}

package/dist/esm/utils/focusgroup.d.ts

@@ -0,0 +1,22 @@
+import type { FocusGroupItemCollection } from '@microsoft/focusgroup-polyfill/shadowless';
+/**
+ * A {@link FocusGroupItemCollection} backed by a host-supplied array of items in DOM order.
+ *
+ * Stateless: every call reads from `getItems()` so the host is the single source of truth.
+ * Suitable for components whose items are flat slotted children (tablist, radio-group, menu-list)
+ * or any component that maintains its own ordered list of focusable descendants.
+ */
+export declare class ArrayItemCollection<T extends HTMLElement> implements FocusGroupItemCollection {
+    private getItems;
+    private getStart?;
+    constructor(getItems: () => readonly T[], getStart?: (() => T | null) | undefined);
+    get start(): HTMLElement | null;
+    first(): HTMLElement | null;
+    last(): HTMLElement | null;
+    next(current: HTMLElement): HTMLElement | null;
+    previous(current: HTMLElement): HTMLElement | null;
+    items(): Iterable<{
+        element: HTMLElement;
+    }>;
+    contains(element: Element): boolean;
+}

package/dist/esm/utils/focusgroup.js

@@ -0,0 +1,42 @@
+/**
+ * A {@link FocusGroupItemCollection} backed by a host-supplied array of items in DOM order.
+ *
+ * Stateless: every call reads from `getItems()` so the host is the single source of truth.
+ * Suitable for components whose items are flat slotted children (tablist, radio-group, menu-list)
+ * or any component that maintains its own ordered list of focusable descendants.
+ */
+export class ArrayItemCollection {
+    constructor(getItems, getStart) {
+        this.getItems = getItems;
+        this.getStart = getStart;
+    }
+    get start() {
+        return this.getStart?.() ?? null;
+    }
+    first() {
+        return this.getItems()[0] ?? null;
+    }
+    last() {
+        const items = this.getItems();
+        return items[items.length - 1] ?? null;
+    }
+    next(current) {
+        const items = this.getItems();
+        const i = items.indexOf(current);
+        return i === -1 ? null : items[i + 1] ?? null;
+    }
+    previous(current) {
+        const items = this.getItems();
+        const i = items.indexOf(current);
+        return i <= 0 ? null : items[i - 1] ?? null;
+    }
+    *items() {
+        for (const element of this.getItems()) {
+            yield { element };
+        }
+    }
+    contains(element) {
+        return this.getItems().includes(element);
+    }
+}
+//# sourceMappingURL=focusgroup.js.map

package/dist/esm/utils/focusgroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focusgroup.js","sourceRoot":"","sources":["../../../src/utils/focusgroup.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,MAAM,OAAO,mBAAmB;IAC9B,YAAoB,QAA4B,EAAU,QAAyB;QAA/D,aAAQ,GAAR,QAAQ,CAAoB;QAAU,aAAQ,GAAR,QAAQ,CAAiB;IAAG,CAAC;IAEvF,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,IAAI,CAAC;IACnC,CAAC;IAED,KAAK;QACH,OAAO,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC;IACpC,CAAC;IAED,IAAI;QACF,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC9B,OAAO,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC;IACzC,CAAC;IAED,IAAI,CAAC,OAAoB;QACvB,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC9B,MAAM,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,OAAY,CAAC,CAAC;QACtC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC;IAChD,CAAC;IAED,QAAQ,CAAC,OAAoB;QAC3B,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC9B,MAAM,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,OAAY,CAAC,CAAC;QACtC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC;IAC9C,CAAC;IAED,CAAC,KAAK;QACJ,KAAK,MAAM,OAAO,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAC;YACtC,MAAM,EAAE,OAAO,EAAE,CAAC;QACpB,CAAC;IACH,CAAC;IAED,QAAQ,CAAC,OAAgB;QACvB,OAAQ,IAAI,CAAC,QAAQ,EAAyB,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IACnE,CAAC;CACF"}

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

@@ -1,8 +1,9 @@
 export * from './converters.js';
 export * from './direction.js';
+export * from './numbers.js';
+export * from './orientation.js';
 export * from './typings.js';
 export * from './template-helpers.js';
 export * from './whitespace-filter.js';
 export * from './display.js';
-export * from './behaviors/match-media-stylesheet-behavior.js';
 export * from './support.js';

package/dist/esm/utils/index.js

@@ -1,9 +1,10 @@
 export * from './converters.js';
 export * from './direction.js';
+export * from './numbers.js';
+export * from './orientation.js';
 export * from './typings.js';
 export * from './template-helpers.js';
 export * from './whitespace-filter.js';
 export * from './display.js';
-export * from './behaviors/match-media-stylesheet-behavior.js';
 export * from './support.js';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC;AAC7B,cAAc,gDAAgD,CAAC;AAC/D,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC"}

package/dist/esm/utils/numbers.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Ensures that a value is between a min and max value. If value is lower than min, min will be returned.
+ * If value is greater than max, max will be returned.
+ */
+export declare function limit(min: number, max: number, value: number): number;

package/dist/esm/utils/numbers.js

@@ -0,0 +1,9 @@
+// Copied from @microsoft/fast-web-utilities
+/**
+ * Ensures that a value is between a min and max value. If value is lower than min, min will be returned.
+ * If value is greater than max, max will be returned.
+ */
+export function limit(min, max, value) {
+    return Math.min(Math.max(value, min), max);
+}
+//# sourceMappingURL=numbers.js.map

package/dist/esm/utils/numbers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"numbers.js","sourceRoot":"","sources":["../../../src/utils/numbers.ts"],"names":[],"mappings":"AAAA,4CAA4C;AAE5C;;;GAGG;AACH,MAAM,UAAU,KAAK,CAAC,GAAW,EAAE,GAAW,EAAE,KAAa;IAC3D,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC;AAC7C,CAAC"}

package/dist/esm/utils/orientation.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Standard orientation values
+ * @public
+ */
+export declare const Orientation: {
+    readonly horizontal: "horizontal";
+    readonly vertical: "vertical";
+};
+/**
+ * The orientation type
+ * @public
+ */
+export type Orientation = (typeof Orientation)[keyof typeof Orientation];

package/dist/esm/utils/orientation.js

@@ -0,0 +1,10 @@
+// Copied from @microsoft/fast-web-utilities
+/**
+ * Standard orientation values
+ * @public
+ */
+export const Orientation = {
+    horizontal: 'horizontal',
+    vertical: 'vertical',
+};
+//# sourceMappingURL=orientation.js.map

package/dist/esm/utils/orientation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"orientation.js","sourceRoot":"","sources":["../../../src/utils/orientation.ts"],"names":[],"mappings":"AAAA,4CAA4C;AAE5C;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,UAAU,EAAE,YAAY;IACxB,QAAQ,EAAE,UAAU;CACZ,CAAC"}

package/dist/esm/utils/request-idle-callback.d.ts

@@ -36,6 +36,21 @@ export declare function cancelIdleCallback(id: ReturnType<typeof globalThis.requ
  * @public
  */
 export declare function waitForConnectedDescendants(target: HTMLElement, callback: () => void, options?: {
+    /**
+     * Whether to only check direct children of the target element, rather than all descendants.
+     * @defaultValue `false`
+     */
     shallow?: boolean;
+    /**
+     * The maximum time to wait for each idle callback before rechecking for connected descendants, in milliseconds.
+     * @defaultValue `50`
+     */
     timeout?: number;
+    /**
+     * Whether to call the callback on the next idle period after descendants are connected, rather than immediately.
+     * This can be used to defer work until after the browser has had a chance to perform any necessary updates
+     * following the connection of the descendants.
+     * @defaultValue `false`
+     */
+    idleCallback?: boolean;
 }): void;