@fabric-msft/fabric-web 4.0.0-beta.1 → 5.0.0

package/dist/esm/components/toggle-button/define.js

@@ -1,4 +1,4 @@
-import { definition } from "./toggle-button.definition";
-import { DesignSystem } from "../design-system";
+import { definition } from "./toggle-button.definition.js";
+import { DesignSystem } from "../design-system.js";
 definition.define(DesignSystem.registry);
 //# sourceMappingURL=define.js.map

package/dist/esm/components/toggle-button/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../../../../../src/components/toggle-button/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,UAAU,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../../../../../src/components/toggle-button/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,UAAU,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC"}

package/dist/esm/components/toggle-button/index.js

@@ -1,4 +1,4 @@
-export { ToggleButton } from "./toggle-button";
-export { ToggleButtonAppearance, ToggleButtonShape, ToggleButtonSize } from "@fluentui/web-components";
-export { definition as ToggleButtonDefinition } from "./toggle-button.definition";
+export { ToggleButton } from "./toggle-button.js";
+export { ToggleButtonAppearances, ToggleButtonShapes, ToggleButtonSizes, ToggleButtonTypes, ToggleButtonFormTargets } from "./toggle-button.options.js";
+export { definition as ToggleButtonDefinition } from "./toggle-button.definition.js";
 //# sourceMappingURL=index.js.map

package/dist/esm/components/toggle-button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/components/toggle-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EACL,sBAAsB,EACtB,iBAAiB,EACjB,gBAAgB,EACjB,MAAM,0BAA0B,CAAC;AAMlC,OAAO,EAAE,UAAU,IAAI,sBAAsB,EAAE,MAAM,4BAA4B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/components/toggle-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EACL,uBAAuB,EACvB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,uBAAuB,EACxB,MAAM,4BAA4B,CAAC;AAQpC,OAAO,EAAE,UAAU,IAAI,sBAAsB,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/esm/components/toggle-button/toggle-button.definition.js

@@ -1,16 +1,19 @@
-import { ToggleButton, ToggleButtonStyles, ToggleButtonTemplate } from "@fluentui/web-components";
-import { DesignSystem } from "../design-system";
+import { ToggleButtonStyles, ToggleButtonTemplate } from '@fluentui/web-components';
+import { DesignSystem } from '../design-system.js';
+import { ToggleButton } from './toggle-button.js';
+
 /**
  * The Fabric Toggle Button component.
  *
  * @public
  */
-export const definition = ToggleButton.compose({
-    name: `${DesignSystem.prefix}-toggle-button`,
-    template: ToggleButtonTemplate,
-    styles: ToggleButtonStyles,
-    shadowOptions: {
-        delegatesFocus: true
-    }
+const definition = ToggleButton.compose({
+  name: `${DesignSystem.prefix}-toggle-button`,
+  template: ToggleButtonTemplate,
+  styles: ToggleButtonStyles,
+  shadowOptions: {
+    mode: DesignSystem.shadowRootMode
+  }
 });
-//# sourceMappingURL=toggle-button.definition.js.map
+
+export { definition };

package/dist/esm/components/toggle-button/toggle-button.definition.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-button.definition.js","sourceRoot":"","sources":["../../../../../../../src/components/toggle-button/toggle-button.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,oBAAoB,EACrB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,OAAO,CAAC;IAC7C,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,gBAAgB;IAC5C,QAAQ,EAAE,oBAAoB;IAC9B,MAAM,EAAE,kBAAkB;IAC1B,aAAa,EAAE;QACb,cAAc,EAAE,IAAI;KACrB;CACF,CAAC,CAAC"}
+{"version":3,"file":"toggle-button.definition.js","sourceRoot":"","sources":["../../../../../../../src/components/toggle-button/toggle-button.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,oBAAoB,EACrB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,OAAO,CAAC;IAC7C,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,gBAAgB;IAC5C,QAAQ,EAAE,oBAAoB;IAC9B,MAAM,EAAE,kBAAkB;IAC1B,aAAa,EAAE;QACb,IAAI,EAAE,YAAY,CAAC,cAAc;KAClC;CACF,CAAC,CAAC"}

package/dist/esm/components/toggle-button/toggle-button.js

@@ -1,4 +1,5 @@
-import { ToggleButton as FluentToggleButton } from "@fluentui/web-components";
+import { ToggleButton as ToggleButton$1 } from '@fluentui/web-components';
+
 /**
  * ToggleButton
  * @summary A ToggleButton Custom HTML Element based on Fluent UI's ToggleButton with custom styling and behavior.
@@ -27,9 +28,9 @@ import { ToggleButton as FluentToggleButton } from "@fluentui/web-components";
  * @attr {string | undefined} formenctype - The encoding type for the form submission.
  * @attr {string | undefined} formmethod - The HTTP method that the browser uses to submit the form.
  * @attr {boolean | undefined} formnovalidate - Indicates that the form will not be validated when submitted.
- * @attr {string | undefined} formtarget - The target frame or window to open the form submission in.
+ * @attr {ToggleButtonFormTarget | undefined} formtarget - The target frame or window to open the form submission in.
  * @attr {string | undefined} name - The name of the element. This element's value will be surfaced during form submission under the provided name.
- * @attr {string | undefined} type - The button type.
+ * @attr {ToggleButtonType | undefined} type - The button type.
  * @attr {string | undefined} value - The value attribute.
  *
  * @prop {boolean} pressed - Indicates the pressed state of the control.
@@ -47,9 +48,9 @@ import { ToggleButton as FluentToggleButton } from "@fluentui/web-components";
  * @prop {string} formenctype - The encoding type for the form submission.
  * @prop {string} formmethod - The HTTP method that the browser uses to submit the form.
  * @prop {boolean} formnovalidate - Indicates that the form will not be validated when submitted.
- * @prop {string} formtarget - The target frame or window to open the form submission in.
+ * @prop {ToggleButtonFormTarget} formtarget - The target frame or window to open the form submission in.
  * @prop {string} name - The name of the element. This element's value will be surfaced during form submission under the provided name.
- * @prop {string} type - The button type.
+ * @prop {ToggleButtonType} type - The button type.
  * @prop {string} value - The value attribute.
  *
  * @slot start - Content which can be provided before the button content.
@@ -66,6 +67,6 @@ import { ToggleButton as FluentToggleButton } from "@fluentui/web-components";
  * @tagname fabric-toggle-button
  * @public
  */
-export class ToggleButton extends FluentToggleButton {
-}
-//# sourceMappingURL=toggle-button.js.map
+class ToggleButton extends ToggleButton$1 {}
+
+export { ToggleButton };

package/dist/esm/components/toggle-button/toggle-button.options.js

@@ -0,0 +1,24 @@
+import { ToggleButtonAppearance, ToggleButtonShape, ToggleButtonSize, ButtonType, ButtonFormTarget } from '@fluentui/web-components';
+
+/** Appearance values for {@link ToggleButton}. */
+const ToggleButtonAppearances = {
+  ...ToggleButtonAppearance
+};
+/** Shape values for {@link ToggleButton}. */
+const ToggleButtonShapes = {
+  ...ToggleButtonShape
+};
+/** Size values for {@link ToggleButton}. */
+const ToggleButtonSizes = {
+  ...ToggleButtonSize
+};
+/** Type values for {@link ToggleButton}. */
+const ToggleButtonTypes = {
+  ...ButtonType
+};
+/** Type values for {@link ToggleButton}. */
+const ToggleButtonFormTargets = {
+  ...ButtonFormTarget
+};
+
+export { ToggleButtonAppearances, ToggleButtonFormTargets, ToggleButtonShapes, ToggleButtonSizes, ToggleButtonTypes };

package/dist/esm/components/toggle-button/toggle-button.options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-button.options.js","sourceRoot":"","sources":["../../../../../../../src/components/toggle-button/toggle-button.options.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,sBAAsB,IAAI,sBAAsB,EAChD,iBAAiB,IAAI,iBAAiB,EACtC,gBAAgB,IAAI,gBAAgB,EACpC,gBAAgB,IAAI,sBAAsB,EAC1C,UAAU,IAAI,gBAAgB,EAC/B,MAAM,0BAA0B,CAAC;AAGlC,kDAAkD;AAClD,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,GAAG,sBAAsB;CACjB,CAAC;AAKX,6CAA6C;AAC7C,MAAM,CAAC,MAAM,kBAAkB,GAAG,EAAE,GAAG,iBAAiB,EAAW,CAAC;AAKpE,4CAA4C;AAC5C,MAAM,CAAC,MAAM,iBAAiB,GAAG,EAAE,GAAG,gBAAgB,EAAW,CAAC;AAKlE,4CAA4C;AAC5C,MAAM,CAAC,MAAM,iBAAiB,GAAG,EAAE,GAAG,gBAAgB,EAAW,CAAC;AAKlE,4CAA4C;AAC5C,MAAM,CAAC,MAAM,uBAAuB,GAAG,EAAE,GAAG,sBAAsB,EAAW,CAAC"}

package/dist/esm/components/tooltip/define.js

@@ -1,4 +1,4 @@
-import { definition } from "./tooltip.definition";
-import { DesignSystem } from "../design-system";
+import { definition } from "./tooltip.definition.js";
+import { DesignSystem } from "../design-system.js";
 definition.define(DesignSystem.registry);
 //# sourceMappingURL=define.js.map

package/dist/esm/components/tooltip/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../../../../../src/components/tooltip/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,UAAU,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../../../../../src/components/tooltip/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,UAAU,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC"}

package/dist/esm/components/tooltip/index.js

@@ -1,6 +1,4 @@
-export { Tooltip } from "./tooltip";
-// Re-export Fluent types/enums directly
-export { TooltipPositioningOption, TooltipStyles, TooltipTemplate } from "@fluentui/web-components";
-// Export the definition, which creates the custom element
-export { definition as TooltipDefinition } from "./tooltip.definition";
+export { Tooltip } from "./tooltip.js";
+export { definition as TooltipDefinition } from "./tooltip.definition.js";
+export { TooltipPositioningOptions } from "./tooltip.options.js";
 //# sourceMappingURL=index.js.map

package/dist/esm/components/tooltip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/components/tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,wCAAwC;AACxC,OAAO,EACL,wBAAwB,EACxB,aAAa,EACb,eAAe,EAChB,MAAM,0BAA0B,CAAC;AAElC,0DAA0D;AAC1D,OAAO,EAAE,UAAU,IAAI,iBAAiB,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/components/tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,UAAU,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC1E,OAAO,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/esm/components/tooltip/tooltip.definition.js

@@ -1,16 +1,19 @@
-import { Tooltip, TooltipStyles, TooltipTemplate } from "@fluentui/web-components";
-import { DesignSystem } from "../design-system";
+import { Tooltip } from './tooltip.js';
+import { TooltipStyles, TooltipTemplate } from '@fluentui/web-components';
+import { DesignSystem } from '../design-system.js';
+
 /**
  * The Fabric Tooltip component.
  *
  * @public
  */
-export const definition = Tooltip.compose({
-    name: `${DesignSystem.prefix}-tooltip`,
-    template: TooltipTemplate,
-    styles: TooltipStyles,
-    shadowOptions: {
-        delegatesFocus: true
-    }
+const definition = Tooltip.compose({
+  name: `${DesignSystem.prefix}-tooltip`,
+  template: TooltipTemplate,
+  styles: TooltipStyles,
+  shadowOptions: {
+    mode: DesignSystem.shadowRootMode
+  }
 });
-//# sourceMappingURL=tooltip.definition.js.map
+
+export { definition };

package/dist/esm/components/tooltip/tooltip.definition.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.definition.js","sourceRoot":"","sources":["../../../../../../../src/components/tooltip/tooltip.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,EACP,aAAa,EACb,eAAe,EAChB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,CAAC;IACxC,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,UAAU;IACtC,QAAQ,EAAE,eAAe;IACzB,MAAM,EAAE,aAAa;IACrB,aAAa,EAAE;QACb,cAAc,EAAE,IAAI;KACrB;CACF,CAAC,CAAC"}
+{"version":3,"file":"tooltip.definition.js","sourceRoot":"","sources":["../../../../../../../src/components/tooltip/tooltip.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,CAAC;IACxC,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,UAAU;IACtC,QAAQ,EAAE,eAAe;IACzB,MAAM,EAAE,aAAa;IACrB,aAAa,EAAE;QACb,IAAI,EAAE,YAAY,CAAC,cAAc;KAClC;CACF,CAAC,CAAC"}

package/dist/esm/components/tooltip/tooltip.js

@@ -1,4 +1,5 @@
-import { Tooltip as FluentTooltip } from "@fluentui/web-components";
+import { Tooltip as Tooltip$1 } from '@fluentui/web-components';
+
 /**
  * Tooltip
  * @summary A custom HTML Tooltip element based on Fluent UI's Tooltip, enhanced with custom styling and behavior.
@@ -22,10 +23,73 @@ import { Tooltip as FluentTooltip } from "@fluentui/web-components";
  *
  * @slot - The default slot for the tooltip content.
  *
+ * @cssprop --block-offset - Offset applied along the block axis for tooltip positioning.
+ * @cssprop --inline-offset - Offset applied along the inline axis for tooltip positioning.
+ * @cssprop --position-area - CSS position area used to place the tooltip.
+ * @cssprop --position-try-options - CSS position-try options for tooltip fallback placement.
+ *
  * @extends FluentTooltip
  * @tagname fabric-tooltip
  * @public
  */
-export class Tooltip extends FluentTooltip {
+class Tooltip extends Tooltip$1 {
+  /**
+   * Resolves the anchor element from the DOM.
+   */
+  get resolvedAnchorElement() {
+    var _a;
+    const rootNode = this.getRootNode();
+    return (rootNode instanceof ShadowRoot || rootNode instanceof Document ? rootNode : document).getElementById((_a = this.anchor) !== null && _a !== void 0 ? _a : "");
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    clearTimeout(this.showTimer);
+    this.showTimer = undefined;
+    clearTimeout(this.hideTimer);
+    this.hideTimer = undefined;
+  }
+  /**
+   * Shows the tooltip after the specified delay.
+   * Cancels any pending hide timer to prevent conflicts.
+   * @param delay - Number of milliseconds to delay showing the tooltip
+   * @internal
+   */
+  showTooltip(delay) {
+    var _a;
+    clearTimeout(this.hideTimer);
+    this.hideTimer = undefined;
+    clearTimeout(this.showTimer);
+    const resolvedDelay = (_a = delay !== null && delay !== void 0 ? delay : this.delay) !== null && _a !== void 0 ? _a : Tooltip.DEFAULT_DELAY;
+    this.showTimer = setTimeout(() => {
+      this.showTimer = undefined;
+      this.setAttribute("aria-hidden", "false");
+      this.showPopover();
+    }, resolvedDelay);
+  }
+  /**
+   * Hides the tooltip after the specified delay.
+   * Cancels any pending show timer so the tooltip won't appear after the mouse leaves.
+   * @param delay - Number of milliseconds to delay hiding the tooltip
+   * @internal
+   */
+  hideTooltip(delay) {
+    var _a;
+    clearTimeout(this.showTimer);
+    this.showTimer = undefined;
+    clearTimeout(this.hideTimer);
+    const resolvedDelay = (_a = delay !== null && delay !== void 0 ? delay : this.delay) !== null && _a !== void 0 ? _a : Tooltip.DEFAULT_DELAY;
+    this.hideTimer = setTimeout(() => {
+      var _a;
+      this.hideTimer = undefined;
+      if (this.matches(":hover") || ((_a = this.resolvedAnchorElement) === null || _a === void 0 ? void 0 : _a.matches(":hover"))) {
+        this.hideTooltip(resolvedDelay);
+        return;
+      }
+      this.setAttribute("aria-hidden", "true");
+      this.hidePopover();
+    }, resolvedDelay);
+  }
 }
-//# sourceMappingURL=tooltip.js.map
+Tooltip.DEFAULT_DELAY = 250;
+
+export { Tooltip };

package/dist/esm/components/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../../../../../src/components/tooltip/tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEpE;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,OAAO,OAAQ,SAAQ,aAAa;CAAG"}
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../../../../../src/components/tooltip/tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,OAAO,OAAQ,SAAQ,aAAa;IAKxC;;OAEG;IACH,IAAY,qBAAqB;;QAC/B,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QACpC,OAAO,CACL,QAAQ,YAAY,UAAU,IAAI,QAAQ,YAAY,QAAQ;YAC5D,CAAC,CAAC,QAAQ;YACV,CAAC,CAAC,QAAQ,CACb,CAAC,cAAc,CAAC,MAAA,IAAI,CAAC,MAAM,mCAAI,EAAE,CAAC,CAAC;IACtC,CAAC;IAEe,oBAAoB;QAClC,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC7B,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC3B,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC7B,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;IAC7B,CAAC;IAED;;;;;OAKG;IACa,WAAW,CAAC,KAAc;;QACxC,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC7B,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAE3B,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC7B,MAAM,aAAa,GAAG,MAAA,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,IAAI,CAAC,KAAK,mCAAI,OAAO,CAAC,aAAa,CAAC;QACnE,IAAI,CAAC,SAAS,GAAG,UAAU,CAAC,GAAG,EAAE;YAC/B,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;YAC3B,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;YAC1C,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC,EAAE,aAAa,CAAC,CAAC;IACpB,CAAC;IAED;;;;;OAKG;IACa,WAAW,CAAC,KAAc;;QACxC,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC7B,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAE3B,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC7B,MAAM,aAAa,GAAG,MAAA,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,IAAI,CAAC,KAAK,mCAAI,OAAO,CAAC,aAAa,CAAC;QACnE,IAAI,CAAC,SAAS,GAAG,UAAU,CAAC,GAAG,EAAE;;YAC/B,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;YAC3B,IACE,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC;iBACtB,MAAA,IAAI,CAAC,qBAAqB,0CAAE,OAAO,CAAC,QAAQ,CAAC,CAAA,EAC7C,CAAC;gBACD,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC;gBAChC,OAAO;YACT,CAAC;YACD,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;YACzC,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC,EAAE,aAAa,CAAC,CAAC;IACpB,CAAC;;AAjEuB,qBAAa,GAAG,GAAG,CAAC"}

package/dist/esm/components/tooltip/tooltip.options.js

@@ -0,0 +1,8 @@
+import { TooltipPositioningOption } from '@fluentui/web-components';
+
+/** Positioning values for {@link Tooltip}. */
+const TooltipPositioningOptions = {
+  ...TooltipPositioningOption
+};
+
+export { TooltipPositioningOptions };

package/dist/esm/components/tooltip/tooltip.options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.options.js","sourceRoot":"","sources":["../../../../../../../src/components/tooltip/tooltip.options.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,IAAI,8BAA8B,EAAE,MAAM,0BAA0B,CAAC;AAGtG,8CAA8C;AAC9C,MAAM,CAAC,MAAM,yBAAyB,GAAG;IACvC,GAAG,8BAA8B;CACzB,CAAC"}

package/dist/esm/components/{tabs → tree}/define.js

@@ -1,4 +1,4 @@
-import { definition } from "./tabs.definition";
+import { definition } from "./tree.definition";
 import { DesignSystem } from "../design-system";
 definition.define(DesignSystem.registry);
 //# sourceMappingURL=define.js.map

package/dist/esm/components/{tabs → tree}/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../../../../../src/components/tabs/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,UAAU,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../../../../../src/components/tree/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,UAAU,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC"}

package/dist/esm/components/tree/index.js

@@ -0,0 +1,4 @@
+export { Tree } from "./tree";
+export { TreeStyles, TreeTemplate } from "@fluentui/web-components";
+export { definition as TreeDefinition } from "./tree.definition";
+//# sourceMappingURL=index.js.map

package/dist/esm/components/tree/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/components/tree/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAEpE,OAAO,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/esm/components/tree/tree.definition.js

@@ -0,0 +1,19 @@
+import { TreeStyles, TreeTemplate } from '@fluentui/web-components';
+import { Tree } from './tree.js';
+import { DesignSystem } from '../design-system.js';
+
+/**
+ * The Fabric Tree component.
+ *
+ * @public
+ */
+const definition = Tree.compose({
+  name: `${DesignSystem.prefix}-tree`,
+  template: TreeTemplate,
+  styles: TreeStyles,
+  shadowOptions: {
+    mode: DesignSystem.shadowRootMode
+  }
+});
+
+export { definition };

package/dist/esm/components/tree/tree.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.definition.js","sourceRoot":"","sources":["../../../../../../../src/components/tree/tree.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACpE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC;IACrC,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,OAAO;IACnC,QAAQ,EAAE,YAAY;IACtB,MAAM,EAAE,UAAU;IAClB,aAAa,EAAE;QACb,IAAI,EAAE,YAAY,CAAC,cAAc;KAClC;CACF,CAAC,CAAC"}

package/dist/esm/components/tree/tree.js

@@ -0,0 +1,45 @@
+import { Tree as Tree$1 } from '@fluentui/web-components';
+
+/**
+ * Tree
+ * @summary A Fabric UI Tree component that extends Fluent UI's Tree with custom styling and behavior.
+ *
+ * @example
+ * ```html
+ * <fabric-tree size="medium" appearance="subtle">
+ *   <fabric-tree-item expanded>
+ *     Root Item
+ *     <fabric-tree-item>Child Item 1</fabric-tree-item>
+ *     <fabric-tree-item selected>Child Item 2</fabric-tree-item>
+ *   </fabric-tree-item>
+ * </fabric-tree>
+ * ```
+ *
+ * @attr {string | undefined} size - The size of tree items within this tree (small, medium).
+ * @attr {string | undefined} appearance - The appearance variant of tree items (subtle, subtleAlpha, transparent).
+ *
+ * @prop {string} size - The size of tree items within this tree.
+ * @prop {string} appearance - The appearance variant of tree items.
+ * @prop {HTMLElement | null} currentSelected - The currently selected tree item.
+ * @prop {Array} childTreeItems - Array of immediate child tree items.
+ *
+ * @slot default - Container for tree-item elements that make up the tree structure.
+ *
+ * @csspart root - The component's outermost element.
+ *
+ * @method keydownHandler - Handles keyboard navigation (arrow keys, home, end, enter, space).
+ * @method focusHandler - Manages focus behavior when tree receives focus.
+ * @method blurHandler - Manages focus behavior when tree loses focus.
+ * @method clickHandler - Handles click events from child tree items.
+ * @method changeHandler - Handles selection change events from child tree items.
+ * @method updateSizeAndAppearance - Updates size and appearance of all child tree items.
+ *
+ * @fires change - Fired when a tree item selection changes.
+ *
+ * @extends FluentTree
+ * @tagname fabric-tree
+ * @public
+ */
+class Tree extends Tree$1 {}
+
+export { Tree };

package/dist/esm/components/tree/tree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.js","sourceRoot":"","sources":["../../../../../../../src/components/tree/tree.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAE9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,MAAM,OAAO,IAAK,SAAQ,UAAU;CAAG"}

package/dist/esm/components/{tab-panel → tree-item}/define.js

@@ -1,4 +1,4 @@
-import { definition } from "./tab-panel.definition";
+import { definition } from "./tree-item.definition";
 import { DesignSystem } from "../design-system";
 definition.define(DesignSystem.registry);
 //# sourceMappingURL=define.js.map

package/dist/esm/components/{tab-panel → tree-item}/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../../../../../src/components/tab-panel/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,UAAU,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../../../../../src/components/tree-item/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,UAAU,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC"}

package/dist/esm/components/tree-item/index.js

@@ -0,0 +1,4 @@
+export { TreeItem } from "./tree-item";
+export { TreeItemStyles, TreeItemTemplate } from "@fluentui/web-components";
+export { definition as TreeItemDefinition } from "./tree-item.definition";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/components/tree-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAE5E,OAAO,EAAE,UAAU,IAAI,kBAAkB,EAAE,MAAM,wBAAwB,CAAC"}

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

@@ -0,0 +1,19 @@
+import { TreeItem } from './tree-item.js';
+import { TreeItemStyles, TreeItemTemplate } from '@fluentui/web-components';
+import { DesignSystem } from '../design-system.js';
+
+/**
+ * The Fabric TreeItem component.
+ *
+ * @public
+ */
+const definition = TreeItem.compose({
+  name: `${DesignSystem.prefix}-tree-item`,
+  template: TreeItemTemplate,
+  styles: TreeItemStyles,
+  shadowOptions: {
+    mode: DesignSystem.shadowRootMode
+  }
+});
+
+export { definition };

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree-item.definition.js","sourceRoot":"","sources":["../../../../../../../src/components/tree-item/tree-item.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5E,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,OAAO,CAAC;IACzC,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,YAAY;IACxC,QAAQ,EAAE,gBAAgB;IAC1B,MAAM,EAAE,cAAc;IACtB,aAAa,EAAE;QACb,IAAI,EAAE,YAAY,CAAC,cAAc;KAClC;CACF,CAAC,CAAC"}

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

@@ -0,0 +1,59 @@
+import { TreeItem as TreeItem$1 } from '@fluentui/web-components';
+
+/**
+ * TreeItem
+ * @summary A Fabric UI TreeItem component that extends Fluent UI's TreeItem with custom styling and behavior.
+ *
+ * @example
+ * ```html
+ * <fabric-tree-item expanded selected>
+ *   <span slot="start">📁</span>
+ *   Folder Name
+ *   <span slot="end">🔔</span>
+ *   <fabric-tree-item>Child Item</fabric-tree-item>
+ * </fabric-tree-item>
+ * ```
+ *
+ * @attr {boolean | undefined} expanded - Whether the tree item is expanded to show child items.
+ * @attr {boolean | undefined} selected - Whether the tree item is selected.
+ * @attr {boolean | undefined} empty - Whether the tree item has no child items.
+ * @attr {string | undefined} size - The size of the tree item (small, medium).
+ * @attr {string | undefined} appearance - The appearance variant (subtle, subtleAlpha, transparent).
+ * @attr {number | undefined} data-indent - The indentation level for nested items.
+ *
+ * @prop {boolean} expanded - Whether the tree item is expanded.
+ * @prop {boolean} selected - Whether the tree item is selected.
+ * @prop {boolean} empty - Whether the tree item has no child items.
+ * @prop {string} size - The size of the tree item.
+ * @prop {string} appearance - The appearance variant.
+ * @prop {number} dataIndent - The indentation level.
+ * @prop {Array} childTreeItems - Array of child tree items.
+ * @prop {boolean} isNestedItem - Whether this item is nested within another tree item.
+ *
+ * @slot default - The main content of the tree item.
+ * @slot start - Content displayed before the main content (typically icons).
+ * @slot end - Content displayed after the main content.
+ * @slot aside - Content displayed at the far end of the tree item.
+ * @slot chevron - Custom expand/collapse indicator (defaults to built-in chevron).
+ * @slot item - Container where child tree items are automatically placed.
+ *
+ * @csspart positioning-region - Container for the tree item content and aside sections.
+ * @csspart content - Container for the main tree item content (chevron, start, default, end slots).
+ * @csspart chevron - The expand/collapse indicator.
+ * @csspart aside - Container for the aside slot content.
+ * @csspart items - Container for nested child tree items.
+ *
+ * @method toggleExpansion - Toggles the expanded state if the item has children.
+ * @method updateChildTreeItems - Updates the indentation and appearance of child items.
+ * @method updateSizeAndAppearance - Updates size and appearance of all child tree items.
+ *
+ * @fires toggle - Fired when the expanded state changes. Detail: {oldState: string, newState: string}
+ * @fires change - Fired when the selected state changes.
+ *
+ * @extends FluentTreeItem
+ * @tagname fabric-tree-item
+ * @public
+ */
+class TreeItem extends TreeItem$1 {}
+
+export { TreeItem };

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree-item.js","sourceRoot":"","sources":["../../../../../../../src/components/tree-item/tree-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAEtE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,MAAM,OAAO,QAAS,SAAQ,cAAc;CAAG"}

package/dist/esm/components/wizard/define.js

@@ -1,4 +1,4 @@
-import { definition } from "./wizard.definition";
-import { DesignSystem } from "../design-system";
+import { definition } from "./wizard.definition.js";
+import { DesignSystem } from "../design-system.js";
 definition.define(DesignSystem.registry);
 //# sourceMappingURL=define.js.map

package/dist/esm/components/wizard/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../../../../../src/components/wizard/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,UAAU,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../../../../../src/components/wizard/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,UAAU,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC"}

package/dist/esm/components/wizard/index.js

@@ -1,5 +1,4 @@
-export * from "./wizard";
-export { definition as WizardDefinition } from "./wizard.definition";
-export { styles as WizardStyles } from "./wizard.styles";
-export { template as WizardTemplate } from "./wizard.template";
+export { Wizard } from "./wizard.js";
+export { definition as WizardDefinition } from "./wizard.definition.js";
+export { WizardEvents } from "./wizard.options.js";
 //# sourceMappingURL=index.js.map

package/dist/esm/components/wizard/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/components/wizard/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACrE,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/components/wizard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,EAAoB,YAAY,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/esm/components/wizard/wizard.definition.js

@@ -1,19 +1,21 @@
-import { DesignSystem } from "../design-system";
-import { Wizard } from "./wizard";
-import { styles } from "./wizard.styles";
-import { template } from "./wizard.template";
+import { DesignSystem } from '../design-system.js';
+import { Wizard } from './wizard.js';
+import { styles } from './wizard.styles.js';
+import { template } from './wizard.template.js';
+
 /**
  *
  * @public
  * @remarks
  * HTML Element: <fabric-wizard>
  */
-export const definition = Wizard.compose({
-    name: `${DesignSystem.prefix}-wizard`,
-    template,
-    styles,
-    shadowOptions: {
-        mode: DesignSystem.shadowRootMode
-    }
+const definition = Wizard.compose({
+  name: `${DesignSystem.prefix}-wizard`,
+  template,
+  styles,
+  shadowOptions: {
+    mode: DesignSystem.shadowRootMode
+  }
 });
-//# sourceMappingURL=wizard.definition.js.map
+
+export { definition };

package/dist/esm/components/wizard/wizard.definition.js.map

@@ -1 +1 @@
-{"version":3,"file":"wizard.definition.js","sourceRoot":"","sources":["../../../../../../../src/components/wizard/wizard.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C;;;;;GAKG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC;IACvC,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,SAAS;IACrC,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACb,IAAI,EAAE,YAAY,CAAC,cAAc;KAClC;CACF,CAAC,CAAC"}
+{"version":3,"file":"wizard.definition.js","sourceRoot":"","sources":["../../../../../../../src/components/wizard/wizard.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC;IACvC,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,SAAS;IACrC,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACb,IAAI,EAAE,YAAY,CAAC,cAAc;KAClC;CACF,CAAC,CAAC"}