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

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

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

package/dist/esm/drawer/drawer.styles.js

@@ -1,6 +1,6 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '../utils/index.js';
-import { colorBackgroundOverlay, colorNeutralBackground1, colorNeutralForeground1, colorTransparentStroke, curveAccelerateMid, curveDecelerateMid, curveLinear, durationGentle, fontFamilyBase, fontSizeBase300, fontWeightRegular, lineHeightBase300, shadow64, strokeWidthThin, } from '../theme/design-tokens.js';
+import { display } from '../utils/display.js';
+import { colorBackgroundOverlay, colorNeutralBackground1, colorNeutralForeground1, colorTransparentStroke, curveAccelerateMid, curveDecelerateMid, curveLinear, durationGentle, fontFamilyBase, fontSizeBase300, fontWeightRegular, lineHeightBase300, shadow64, spacingHorizontalXXL, strokeWidthThin, } from '../theme/design-tokens.js';
 /** Drawer styles
  * @public
  */
@@ -52,30 +52,29 @@ export const styles = css `
   }
 
   dialog {
+    background: ${colorNeutralBackground1};
+    border-radius: 0;
+    border: ${strokeWidthThin} solid ${colorTransparentStroke};
+    border-inline-end-color: ${colorTransparentStroke};
+    border-inline-start-color: var(--drawer-separator, ${colorTransparentStroke});
+    box-shadow: ${shadow64};
     box-sizing: border-box;
-    z-index: var(--drawer-elevation, 1000);
-    font-size: ${fontSizeBase300};
-    line-height: ${lineHeightBase300};
+    color: ${colorNeutralForeground1};
     font-family: ${fontFamilyBase};
+    font-size: ${fontSizeBase300};
     font-weight: ${fontWeightRegular};
-    color: ${colorNeutralForeground1};
-    max-width: var(--drawer-width, 592px);
-    max-height: 100vh;
     height: 100%;
-    margin-inline-start: 0;
+    line-height: ${lineHeightBase300};
     margin-inline-end: auto;
-    border-inline-end-color: ${colorTransparentStroke};
-    border-inline-start-color: var(--drawer-separator, ${colorTransparentStroke});
+    margin-inline-start: 0;
+    max-height: 100vh;
+    max-width: calc(100vw - ${spacingHorizontalXXL});
     outline: none;
-    top: 0;
+    padding: 0;
     bottom: 0;
+    top: 0;
     width: var(--drawer-width, 592px);
-    border-radius: 0;
-    padding: 0;
-    max-width: var(--drawer-width, 592px);
-    box-shadow: ${shadow64};
-    border: ${strokeWidthThin} solid ${colorTransparentStroke};
-    background: ${colorNeutralBackground1};
+    z-index: var(--drawer-elevation, 1000);
   }
 
   dialog::backdrop {

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

@@ -1 +1 @@
-{"version":3,"file":"drawer.styles.js","sourceRoot":"","sources":["../../../src/drawer/drawer.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EACL,sBAAsB,EACtB,uBAAuB,EACvB,uBAAuB,EACvB,sBAAsB,EACtB,kBAAkB,EAClB,kBAAkB,EAClB,WAAW,EACX,cAAc,EACd,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,QAAQ,EACR,eAAe,GAChB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,OAAO,CAAC;;;yBAGK,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA8C9B,eAAe;mBACb,iBAAiB;mBACjB,cAAc;mBACd,iBAAiB;aACvB,uBAAuB;;;;;;+BAML,sBAAsB;yDACI,sBAAsB;;;;;;;;kBAQ7D,QAAQ;cACZ,eAAe,UAAU,sBAAsB;kBAC3C,uBAAuB;;;;;;;;;;;;+BAYV,cAAc;sCACP,kBAAkB;;;;;;sCAMlB,kBAAkB;;;;sCAIlB,kBAAkB;;;;;;;;;+BASzB,cAAc;sCACP,kBAAkB;6CACX,sBAAsB;;;;;;;;;sCAS7B,WAAW;;;;;;;;;;;;;;;;CAgBhD,CAAC"}
+{"version":3,"file":"drawer.styles.js","sourceRoot":"","sources":["../../../src/drawer/drawer.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EACL,sBAAsB,EACtB,uBAAuB,EACvB,uBAAuB,EACvB,sBAAsB,EACtB,kBAAkB,EAClB,kBAAkB,EAClB,WAAW,EACX,cAAc,EACd,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,QAAQ,EACR,oBAAoB,EACpB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,OAAO,CAAC;;;yBAGK,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBA4C7B,uBAAuB;;cAE3B,eAAe,UAAU,sBAAsB;+BAC9B,sBAAsB;yDACI,sBAAsB;kBAC7D,QAAQ;;aAEb,uBAAuB;mBACjB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;;mBAEjB,iBAAiB;;;;8BAIN,oBAAoB;;;;;;;;;;;;;;;;;;+BAkBnB,cAAc;sCACP,kBAAkB;;;;;;sCAMlB,kBAAkB;;;;sCAIlB,kBAAkB;;;;;;;;;+BASzB,cAAc;sCACP,kBAAkB;6CACX,sBAAsB;;;;;;;;;sCAS7B,WAAW;;;;;;;;;;;;;;;;CAgBhD,CAAC"}

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

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

package/dist/esm/drawer/drawer.template.js

@@ -8,9 +8,11 @@ export function drawerTemplate() {
     <dialog
       class="dialog"
       part="dialog"
-      aria-describedby="${x => x.ariaDescribedby}"
-      aria-labelledby="${x => x.ariaLabelledby}"
-      aria-label="${x => x.ariaLabel}"
+      aria-describedby="${x => x.dialogDescribedby}"
+      aria-labelledby="${x => x.dialogLabelledby}"
+      aria-label="${x => x.dialogLabel}"
+      aria-modal="${x => x.dialogModal}"
+      role="${x => x.dialogRole}"
       size="${x => x.size}"
       position="${x => x.position}"
       @click="${(x, c) => x.clickHandler(c.event)}"

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

@@ -1 +1 @@
-{"version":3,"file":"drawer.template.js","sourceRoot":"","sources":["../../../src/drawer/drawer.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAG9E;;;GAGG;AACH,MAAM,UAAU,cAAc;IAC5B,OAAO,IAAI,CAAG;;;;0BAIU,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe;yBACvB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;oBAC1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;cACtB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;kBACP,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;gBACjB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;iBAC9C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,EAAE;QAC/B,GAAG,CAAC,QAAQ,CAAC;;;;GAIlB,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAgC,cAAc,EAAE,CAAC"}
+{"version":3,"file":"drawer.template.js","sourceRoot":"","sources":["../../../src/drawer/drawer.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAG9E;;;GAGG;AACH,MAAM,UAAU,cAAc;IAC5B,OAAO,IAAI,CAAG;;;;0BAIU,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB;yBACzB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB;oBAC5B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;oBAClB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;cACxB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;cACjB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;kBACP,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;gBACjB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;iBAC9C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,EAAE;QAC/B,GAAG,CAAC,QAAQ,CAAC;;;;GAIlB,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAgC,cAAc,EAAE,CAAC"}

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

@@ -3,3 +3,4 @@ export * from './drawer.options.js';
 export { definition as DrawerDefinition } from './drawer.definition.js';
 export { styles as DrawerStyles } from './drawer.styles.js';
 export { template as DrawerTemplate } from './drawer.template.js';
+export { tagName as DrawerTagName } from './drawer.options.js';

package/dist/esm/drawer/index.js

@@ -3,4 +3,5 @@ export * from './drawer.options.js';
 export { definition as DrawerDefinition } from './drawer.definition.js';
 export { styles as DrawerStyles } from './drawer.styles.js';
 export { template as DrawerTemplate } from './drawer.template.js';
+export { tagName as DrawerTagName } from './drawer.options.js';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/drawer/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/drawer/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC"}

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

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

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/drawer-body/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAEzD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/drawer-body/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,UAAU,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC"}

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

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

package/dist/esm/drawer-body/drawer-body.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 './drawer-body.options.js';
+/**
+ * The async definition configuration for the `<fluent-drawer-body>` element.
+ *
+ * @public
+ * @remarks
+ * This is used in server-side rendering (SSR) scenarios where the template
+ * is provided as a deferred option to be hydrated later.
+ */
+export const declarativeDefinition = {
+    name: tagName,
+    registry: FluentDesignSystem.registry,
+    template: declarativeTemplate(),
+};
+//# sourceMappingURL=drawer-body.definition-async.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-body.definition-async.js","sourceRoot":"","sources":["../../../src/drawer-body/drawer-body.definition-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAqC,MAAM,wCAAwC,CAAC;AAChH,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAEnD;;;;;;;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/drawer-body/drawer-body.definition.d.ts

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"drawer-body.definition.js","sourceRoot":"","sources":["../../../src/drawer-body/drawer-body.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAErD;;;;;GAKG;AAEH,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAAC,OAAO,CAAC;IAC3C,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,cAAc;IAChD,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}
+{"version":3,"file":"drawer-body.definition.js","sourceRoot":"","sources":["../../../src/drawer-body/drawer-body.definition.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAErD;;;;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/drawer-body/drawer-body.options.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The tag name for the drawer body element.
+ *
+ * @public
+ */
+export declare const tagName: "fluent-drawer-body";

package/dist/esm/drawer-body/drawer-body.options.js

@@ -0,0 +1,8 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+/**
+ * The tag name for the drawer body element.
+ *
+ * @public
+ */
+export const tagName = `${FluentDesignSystem.prefix}-drawer-body`;
+//# sourceMappingURL=drawer-body.options.js.map

package/dist/esm/drawer-body/drawer-body.options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-body.options.js","sourceRoot":"","sources":["../../../src/drawer-body/drawer-body.options.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE;;;;GAIG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,kBAAkB,CAAC,MAAM,cAAuB,CAAC"}

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

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

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

@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '../utils/index.js';
+import { display } from '../utils/display.js';
 import { spacingHorizontalM, spacingHorizontalXL } from '../theme/design-tokens.js';
 import { typographySubtitle1Styles } from '../styles/partials/typography.partials.js';
 /** Drawer styles

package/dist/esm/drawer-body/drawer-body.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-body.styles.js","sourceRoot":"","sources":["../../../src/drawer-body/drawer-body.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AACpF,OAAO,EAAE,yBAAyB,EAAE,MAAM,2CAA2C,CAAC;AAEtF;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;;eAMJ,mBAAmB;;;;;;;MAO5B,yBAAyB;;;;;;WAMpB,kBAAkB;;;;;;;;CAQ5B,CAAC"}
+{"version":3,"file":"drawer-body.styles.js","sourceRoot":"","sources":["../../../src/drawer-body/drawer-body.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AACpF,OAAO,EAAE,yBAAyB,EAAE,MAAM,2CAA2C,CAAC;AAEtF;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;;eAMJ,mBAAmB;;;;;;;MAO5B,yBAAyB;;;;;;WAMpB,kBAAkB;;;;;;;;CAQ5B,CAAC"}

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

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

package/dist/esm/drawer-body/index.d.ts

@@ -2,3 +2,4 @@ export * from './drawer-body.js';
 export { definition as DrawerBodyDefinition } from './drawer-body.definition.js';
 export { styles as DrawerBodyStyles } from './drawer-body.styles.js';
 export { template as DrawerBodyTemplate } from './drawer-body.template.js';
+export { tagName as DrawerBodyTagName } from './drawer-body.options.js';

package/dist/esm/drawer-body/index.js

@@ -2,4 +2,5 @@ export * from './drawer-body.js';
 export { definition as DrawerBodyDefinition } from './drawer-body.definition.js';
 export { styles as DrawerBodyStyles } from './drawer-body.styles.js';
 export { template as DrawerBodyTemplate } from './drawer-body.template.js';
+export { tagName as DrawerBodyTagName } from './drawer-body.options.js';
 //# sourceMappingURL=index.js.map

package/dist/esm/drawer-body/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/drawer-body/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,UAAU,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACjF,OAAO,EAAE,MAAM,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,QAAQ,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/drawer-body/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,UAAU,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AACjF,OAAO,EAAE,MAAM,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,QAAQ,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,0BAA0B,CAAC"}

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

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

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

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

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

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

package/dist/esm/dropdown/define.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/dropdown/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/dropdown/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,QAAQ,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC"}

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

@@ -15,6 +15,8 @@ import { DropdownType } from './dropdown.options.js';
  * @slot indicator - The indicator slot.
  * @slot control - The control slot. This slot is automatically populated and should not be manually manipulated.
  *
+ * @fires { Event } change - Fires a custom 'change' event when the selected option changes
+ *
  * @public
  */
 export declare class BaseDropdown extends FASTElement {
@@ -418,6 +420,11 @@ export declare class BaseDropdown extends FASTElement {
      * @public
      */
     inputHandler(e: InputEvent): boolean | void;
+    /**
+     * Guard flag to prevent reentrant calls to `insertControl`.
+     * @internal
+     */
+    private _insertingControl;
     /**
      * Inserts the control element based on the dropdown type.
      *
@@ -426,6 +433,31 @@ export declare class BaseDropdown extends FASTElement {
      * This method can be overridden in derived classes to provide custom control elements, though this is not recommended.
      */
     protected insertControl(): void;
+    /**
+     * The duration in milliseconds after the last character search keystroke before the search string is cleared.
+     */
+    protected searchTimeoutMs: number;
+    /**
+     * The accumulated search string used to match option labels by prefix when printable characters are typed.
+     *
+     * @internal
+     */
+    private searchString;
+    /**
+     * The timeout id used to reset the search string.
+     *
+     * @internal
+     */
+    private searchTimeout?;
+    /**
+     * Handles printable character input by moving {@link Dropdown#activeIndex} to the next option whose label matches the
+     * accumulated search string. When the string is a single character (or the same character repeated), matching
+     * options are cycled through; otherwise the string is treated as a prefix match.
+     *
+     * @param char - the printable character that was pressed
+     * @internal
+     */
+    private handleSearchCharacter;
     /**
      * Handles the keydown events for the dropdown.
      *
@@ -482,6 +514,7 @@ export declare class BaseDropdown extends FASTElement {
      * @internal
      */
     protected updateFreeformOption(value?: string): void;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     /**
      * When anchor positioning isn't supported, an intersection observer is used to flip the listbox when it hits the