@fluentui/web-components 3.0.0-beta.99 → 3.0.0-rc.2

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

@@ -1 +1 @@
-{"version":3,"file":"dialog.options.js","sourceRoot":"","sources":["../../../src/dialog/dialog.options.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,KAAK,EAAE,OAAO;IACd,QAAQ,EAAE,WAAW;IACrB,KAAK,EAAE,OAAO;CACN,CAAC"}
+{"version":3,"file":"dialog.options.js","sourceRoot":"","sources":["../../../src/dialog/dialog.options.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,KAAK,EAAE,OAAO;IACd,QAAQ,EAAE,WAAW;IACrB,KAAK,EAAE,OAAO;CACN,CAAC;AAIX;;;;;;;GAOG;AACH,MAAM,UAAU,QAAQ,CAAC,OAAqB,EAAE,UAAkB,SAAS;IACzE,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/dialog/dialog.styles.js

@@ -21,7 +21,7 @@ export const styles = css `
       border: none;
       box-shadow: ${shadow64};
       color: ${colorNeutralForeground1};
-      max-height: calc(-48px + 100vh);
+      max-height: 100vh;
       padding: 0;
       width: 100%;
       max-width: 600px;
@@ -33,6 +33,12 @@ export const styles = css `
       z-index: 2;
       overflow: auto;
     }
+
+    @supports (max-height: 1dvh) {
+      dialog {
+        max-height: 100dvh;
+      }
+    }
   }
 
   @layer animations {

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

@@ -1 +1 @@
-{"version":3,"file":"dialog.styles.js","sourceRoot":"","sources":["../../../src/dialog/dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,sBAAsB,EACtB,uBAAuB,EACvB,uBAAuB,EACvB,sBAAsB,EACtB,kBAAkB,EAClB,kBAAkB,EAClB,WAAW,EACX,cAAc,EACd,QAAQ,EACR,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,8BAA8B,EAAE,MAAM,uDAAuD,CAAC;AAEvG;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;2BAGE,sBAAsB;;;;;;;;;oBAS7B,uBAAuB;uBACpB,kBAAkB;;oBAErB,QAAQ;eACb,uBAAuB;;;;;;;;;;;;;;;;;;;;;+BAqBP,cAAc;sCACP,kBAAkB;;;;;sCAKlB,WAAW;;;;;;;;;;;;;;sCAcX,kBAAkB;;;;;;;;;;;;;;;CAevD,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;kBAGlB,eAAe,UAAU,sBAAsB;;;GAG9D,CAAC,CACH,CAAC"}
+{"version":3,"file":"dialog.styles.js","sourceRoot":"","sources":["../../../src/dialog/dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,sBAAsB,EACtB,uBAAuB,EACvB,uBAAuB,EACvB,sBAAsB,EACtB,kBAAkB,EAClB,kBAAkB,EAClB,WAAW,EACX,cAAc,EACd,QAAQ,EACR,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,8BAA8B,EAAE,MAAM,uDAAuD,CAAC;AAEvG;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;2BAGE,sBAAsB;;;;;;;;;oBAS7B,uBAAuB;uBACpB,kBAAkB;;oBAErB,QAAQ;eACb,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;+BA2BP,cAAc;sCACP,kBAAkB;;;;;sCAKlB,WAAW;;;;;;;;;;;;;;sCAcX,kBAAkB;;;;;;;;;;;;;;;CAevD,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;kBAGlB,eAAe,UAAU,sBAAsB;;;GAG9D,CAAC,CACH,CAAC"}

package/dist/esm/dialog/dialog.template.js

@@ -1,16 +1,12 @@
 import { html, ref } from '@microsoft/fast-element';
-import { DialogType } from './dialog.options.js';
 /**
  * Template for the Dialog component
  * @public
  */
 export const template = html `
   <dialog
-    role="${x => (x.type === DialogType.alert ? 'alertdialog' : 'dialog')}"
-    type="${x => x.type}"
     class="dialog"
     part="dialog"
-    aria-modal="${x => (x.type === DialogType.modal || x.type === DialogType.alert ? 'true' : void 0)}"
     aria-describedby="${x => x.ariaDescribedby}"
     aria-labelledby="${x => x.ariaLabelledby}"
     aria-label="${x => x.ariaLabel}"

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

@@ -1 +1 @@
-{"version":3,"file":"dialog.template.js","sourceRoot":"","sources":["../../../src/dialog/dialog.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9E,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEjD;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAgC,IAAI,CAAA;;YAE7C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC;YAC7D,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;;;kBAGL,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,UAAU,CAAC,KAAK,IAAI,CAAC,CAAC,IAAI,KAAK,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;wBAC7E,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe;uBACvB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;kBAC1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;cACpB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;eAC9C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE;MACtB,GAAG,CAAC,QAAQ,CAAC;;;;CAIlB,CAAC"}
+{"version":3,"file":"dialog.template.js","sourceRoot":"","sources":["../../../src/dialog/dialog.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAI9E;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAgC,IAAI,CAAA;;;;wBAIjC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe;uBACvB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;kBAC1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;cACpB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;eAC9C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE;MACtB,GAAG,CAAC,QAAQ,CAAC;;;;CAIlB,CAAC"}

package/dist/{dts → esm}/dialog/index.d.ts

@@ -1,5 +1,5 @@
 export { Dialog } from './dialog.js';
-export { DialogType } from './dialog.options.js';
+export { DialogType, isDialog } from './dialog.options.js';
 export { definition as DialogDefinition } from './dialog.definition.js';
 export { template as DialogTemplate } from './dialog.template.js';
 export { styles as DialogStyles } from './dialog.styles.js';

package/dist/esm/dialog/index.js

@@ -1,5 +1,5 @@
 export { Dialog } from './dialog.js';
-export { DialogType } from './dialog.options.js';
+export { DialogType, isDialog } from './dialog.options.js';
 export { definition as DialogDefinition } from './dialog.definition.js';
 export { template as DialogTemplate } from './dialog.template.js';
 export { styles as DialogStyles } from './dialog.styles.js';

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

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

package/dist/{dts → esm}/dialog-body/dialog-body.d.ts

@@ -9,8 +9,10 @@ import { FASTElement } from '@microsoft/fast-element';
  */
 export declare class DialogBody extends FASTElement {
     /**
-     * @public
-     * Indicates whether the dialog has a title action
+     * Handles click event for the close slot
+     *
+     * @param e - the click event
+     * @internal
      */
-    noTitleAction: boolean;
+    clickHandler(event: PointerEvent): boolean | void;
 }

package/dist/esm/dialog-body/dialog-body.js

@@ -1,5 +1,5 @@
-import { __decorate } from "tslib";
-import { attr, FASTElement } from '@microsoft/fast-element';
+import { FASTElement } from '@microsoft/fast-element';
+import { isDialog } from '../dialog/dialog.options';
 /**
  * Dialog Body component that extends the FASTElement class.
  *
@@ -9,16 +9,20 @@ import { attr, FASTElement } from '@microsoft/fast-element';
  * @extends FASTElement
  */
 export class DialogBody extends FASTElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * @public
-         * Indicates whether the dialog has a title action
-         */
-        this.noTitleAction = false;
+    /**
+     * Handles click event for the close slot
+     *
+     * @param e - the click event
+     * @internal
+     */
+    clickHandler(event) {
+        if (!event.defaultPrevented) {
+            const dialog = this.parentElement;
+            if (isDialog(dialog)) {
+                dialog.hide();
+            }
+        }
+        return true;
     }
 }
-__decorate([
-    attr({ mode: 'boolean', attribute: 'no-title-action' })
-], DialogBody.prototype, "noTitleAction", void 0);
 //# sourceMappingURL=dialog-body.js.map

package/dist/esm/dialog-body/dialog-body.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-body.js","sourceRoot":"","sources":["../../../src/dialog-body/dialog-body.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC5D;;;;;;;GAOG;AACH,MAAM,OAAO,UAAW,SAAQ,WAAW;IAA3C;;QACE;;;WAGG;QAEI,kBAAa,GAAY,KAAK,CAAC;IACxC,CAAC;CAAA;AADQ;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;iDAClB"}
+{"version":3,"file":"dialog-body.js","sourceRoot":"","sources":["../../../src/dialog-body/dialog-body.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD;;;;;;;GAOG;AACH,MAAM,OAAO,UAAW,SAAQ,WAAW;IACzC;;;;;OAKG;IACI,YAAY,CAAC,KAAmB;QACrC,IAAI,CAAC,KAAK,CAAC,gBAAgB,EAAE,CAAC;YAC5B,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC;YAElC,IAAI,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;gBACrB,MAAM,CAAC,IAAI,EAAE,CAAC;YAChB,CAAC;QACH,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;CACF"}

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

@@ -32,8 +32,6 @@ export const styles = css `
     margin-block-start: calc(${spacingVerticalXXL} * -1);
     padding-block-end: ${spacingVerticalS};
     padding-block-start: ${spacingVerticalXXL};
-    position: sticky;
-    z-index: 1;
   }
 
   .content {
@@ -56,14 +54,21 @@ export const styles = css `
     margin-block-end: calc(${spacingVerticalXXL} * -1);
     padding-block-end: ${spacingVerticalXXL};
     padding-block-start: ${spacingVerticalL};
-    position: sticky;
-    z-index: 2;
   }
 
-  /* Hide slots if nothing is slotted to remove grid gap */
-  :not(:has(:is([slot='title'], [slot='title-action']))) .title:not(:has(.title-action)),
-  :not(:has([slot='action'])) .actions {
-    display: none;
+  ::slotted([slot='title-action']) {
+    margin-inline-start: auto;
+  }
+
+  ::slotted([slot='title']) {
+    font: inherit;
+    padding: 0;
+    margin: 0;
+  }
+
+  /* align  title content to the end when there is no title*/
+  :not(:has(:is([slot='title'], [slot='title-action']))) .title {
+    justify-content: end;
   }
 
   @container (min-width: 480px) {
@@ -75,5 +80,16 @@ export const styles = css `
       padding-block-start: ${spacingVerticalS};
     }
   }
+
+  /* For a11y, set sticky position for title and actions when the viewport is tall enough */
+  @media (min-height: 480px) {
+    .title {
+      position: sticky;
+      z-index: 1;
+    }
+    .actions {
+      position: sticky;
+      z-index: 2;
+    }
 `;
 //# sourceMappingURL=dialog-body.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"dialog-body.styles.js","sourceRoot":"","sources":["../../../src/dialog-body/dialog-body.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,uBAAuB,EACvB,cAAc,EACd,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,gBAAgB,EAChB,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;kBAGD,uBAAuB;;WAE9B,gBAAgB;eACZ,kBAAkB,IAAI,oBAAoB;;;;;;;kBAOvC,uBAAuB;aAC5B,uBAAuB;;;mBAGjB,cAAc;iBAChB,eAAe;mBACb,kBAAkB;;;mBAGlB,iBAAiB;6BACP,gBAAgB;+BACd,kBAAkB;yBACxB,gBAAgB;2BACd,kBAAkB;;;;;;;aAOhC,uBAAuB;mBACjB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;;;kBAMlB,uBAAuB;;;WAG9B,gBAAgB;;6BAEE,kBAAkB;yBACtB,kBAAkB;2BAChB,gBAAgB;;;;;;;;;;;;;;;;iCAgBV,gBAAgB;6BACpB,gBAAgB;;;CAG5C,CAAC"}
+{"version":3,"file":"dialog-body.styles.js","sourceRoot":"","sources":["../../../src/dialog-body/dialog-body.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,uBAAuB,EACvB,cAAc,EACd,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,gBAAgB,EAChB,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;kBAGD,uBAAuB;;WAE9B,gBAAgB;eACZ,kBAAkB,IAAI,oBAAoB;;;;;;;kBAOvC,uBAAuB;aAC5B,uBAAuB;;;mBAGjB,cAAc;iBAChB,eAAe;mBACb,kBAAkB;;;mBAGlB,iBAAiB;6BACP,gBAAgB;+BACd,kBAAkB;yBACxB,gBAAgB;2BACd,kBAAkB;;;;;aAKhC,uBAAuB;mBACjB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;;;kBAMlB,uBAAuB;;;WAG9B,gBAAgB;;6BAEE,kBAAkB;yBACtB,kBAAkB;2BAChB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;iCAuBV,gBAAgB;6BACpB,gBAAgB;;;;;;;;;;;;;;CAc5C,CAAC"}

package/dist/esm/dialog-body/dialog-body.template.js

@@ -1,42 +1,17 @@
-import { html, ref } from '@microsoft/fast-element';
-import { DialogType } from '../dialog/dialog.options.js';
-const dismissed16Regular = html.partial(`
-  <svg
-    fill="currentColor"
-    aria-hidden="true"
-    width="20"
-    height="20"
-    viewBox="0 0 20 20"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"
-      fill="currentColor"
-    ></path>
-  </svg>`);
+import { html } from '@microsoft/fast-element';
 /**
  * Template for the dialog form
  * @public
  */
 export const template = html `
-  <div class="title" part="title">
-    <slot name="title"></slot>
-    <slot name="title-action">
-      <fluent-button
-        ?hidden=${x => x.noTitleAction || x.parentNode?.type === DialogType.alert}
-        tabindex="0"
-        part="title-action"
-        class="title-action"
-        appearance="transparent"
-        icon-only
-        @click=${x => x.parentNode?.hide()}
-        ${ref('defaultTitleAction')}
-      >
-        ${dismissed16Regular}
-      </fluent-button>
-    </slot>
-  </div>
-  <div class="content" part="content"><slot></slot></div>
-  <div class="actions" part="actions"><slot name="action"></slot></div>
+  <template>
+    <div class="title" part="title">
+      <slot name="title"></slot>
+      <slot name="title-action"></slot>
+      <slot name="close" @click="${(x, c) => x.clickHandler(c.event)}"></slot>
+    </div>
+    <div class="content" part="content"><slot></slot></div>
+    <div class="actions" part="actions"><slot name="action"></slot></div>
+  </template>
 `;
 //# sourceMappingURL=dialog-body.template.js.map

package/dist/esm/dialog-body/dialog-body.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog-body.template.js","sourceRoot":"","sources":["../../../src/dialog-body/dialog-body.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9E,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAEzD,MAAM,kBAAkB,GAAG,IAAI,CAAC,OAAO,CAAC;;;;;;;;;;;;;SAa/B,CAAC,CAAC;AAEX;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAwB,IAAI,CAAA;;;;;kBAK/B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,IAAI,CAAC,CAAC,UAAU,EAAE,IAAI,KAAK,UAAU,CAAC,KAAK;;;;;;iBAMhE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,EAAE,IAAI,EAAE;UAChC,GAAG,CAAC,oBAAoB,CAAC;;UAEzB,kBAAkB;;;;;;CAM3B,CAAC"}
+{"version":3,"file":"dialog-body.template.js","sourceRoot":"","sources":["../../../src/dialog-body/dialog-body.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAO,MAAM,yBAAyB,CAAC;AAE9E;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAwB,IAAI,CAAA;;;;;mCAKd,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAqB,CAAC;;;;;CAKnF,CAAC"}

package/dist/{dts → esm}/divider/divider.options.d.ts

@@ -23,10 +23,7 @@ export type DividerRole = ValuesOf<typeof DividerRole>;
  * @public
  */
 export declare const DividerOrientation: {
-    readonly horizontal: "horizontal"; /**
-     * Divider roles
-     * @public
-     */
+    readonly horizontal: "horizontal";
     readonly vertical: "vertical";
 };
 /**

package/dist/{dts → esm}/drawer/drawer.d.ts

@@ -23,6 +23,7 @@ import { DrawerPosition, DrawerSize, DrawerType } from './drawer.options.js';
  * @method show - Method to show the drawer.
  * @method hide - Method to hide the drawer.
  * @method clickHandler - Handles click events on the drawer.
+ * @method cancelHandler - Handles cancel events on the drawer.
  * @method emitToggle - Emits an event after the dialog's open state changes.
  * @method emitBeforeToggle - Emits an event before the dialog's open state changes.
  *
@@ -31,12 +32,14 @@ import { DrawerPosition, DrawerSize, DrawerType } from './drawer.options.js';
  * @tag fluent-drawer
  */
 export declare class Drawer extends FASTElement {
+    protected roleAttrObserver: MutationObserver;
     /**
      * @public
      * Determines whether the drawer should be displayed as modal or non-modal
      * When rendered as a modal, an overlay is applied over the rest of the view.
      */
     type: DrawerType;
+    protected typeChanged(): void;
     /**
      * @public
      * The ID of the element that labels the drawer.
@@ -64,6 +67,10 @@ export declare class Drawer extends FASTElement {
      * The dialog element.
      */
     dialog: HTMLDialogElement;
+    /** @internal */
+    connectedCallback(): void;
+    /** @internal */
+    disconnectedCallback(): void;
     /**
      * @public
      * Method to emit an event after the dialog's open state changes
@@ -93,4 +100,11 @@ export declare class Drawer extends FASTElement {
      * Handles click events on the drawer.
      */
     clickHandler(event: Event): boolean;
+    /**
+     * @public
+     * Handles cancel events on the drawer.
+     */
+    cancelHandler(): void;
+    protected observeRoleAttr(): void;
+    protected updateDialogRole(): void;
 }

package/dist/esm/drawer/drawer.js

@@ -24,6 +24,7 @@ import { DrawerPosition, DrawerSize, DrawerType } from './drawer.options.js';
  * @method show - Method to show the drawer.
  * @method hide - Method to hide the drawer.
  * @method clickHandler - Handles click events on the drawer.
+ * @method cancelHandler - Handles cancel events on the drawer.
  * @method emitToggle - Emits an event after the dialog's open state changes.
  * @method emitBeforeToggle - Emits an event before the dialog's open state changes.
  *
@@ -75,6 +76,29 @@ export class Drawer extends FASTElement {
             });
         };
     }
+    typeChanged() {
+        if (!this.dialog) {
+            return;
+        }
+        this.updateDialogRole();
+        if (this.type === DrawerType.modal) {
+            this.dialog.setAttribute('aria-modal', 'true');
+        }
+        else {
+            this.dialog.removeAttribute('aria-modal');
+        }
+    }
+    /** @internal */
+    connectedCallback() {
+        super.connectedCallback();
+        this.typeChanged();
+        this.observeRoleAttr();
+    }
+    /** @internal */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.roleAttrObserver.disconnect();
+    }
     /**
      * @public
      * Method to show the drawer
@@ -113,6 +137,32 @@ export class Drawer extends FASTElement {
         }
         return true;
     }
+    /**
+     * @public
+     * Handles cancel events on the drawer.
+     */
+    cancelHandler() {
+        this.hide();
+    }
+    observeRoleAttr() {
+        if (this.roleAttrObserver) {
+            return;
+        }
+        this.roleAttrObserver = new MutationObserver(() => {
+            this.updateDialogRole();
+        });
+        this.roleAttrObserver.observe(this, {
+            attributes: true,
+            attributeFilter: ['role'],
+        });
+    }
+    updateDialogRole() {
+        console.log(this.role);
+        if (!this.dialog) {
+            return;
+        }
+        this.dialog.role = this.type === DrawerType.modal ? 'dialog' : this.role;
+    }
 }
 __decorate([
     attr

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

@@ -1 +1 @@
-{"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../src/drawer/drawer.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACjF,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAE7E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,OAAO,MAAO,SAAQ,WAAW;IAAvC;;QACE;;;;WAIG;QAEI,SAAI,GAAe,UAAU,CAAC,KAAK,CAAC;QAgB3C;;;;WAIG;QAEI,aAAQ,GAAmB,cAAc,CAAC,KAAK,CAAC;QAEvD;;;;WAIG;QAEI,SAAI,GAAe,UAAU,CAAC,MAAM,CAAC;QAS5C;;;;WAIG;QACI,eAAU,GAAG,GAAS,EAAE;YAC7B,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;gBACnB,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM;gBAC9C,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;aAC/C,CAAC,CAAC;QACL,CAAC,CAAC;QAEF;;;;WAIG;QACI,qBAAgB,GAAG,GAAS,EAAE;YACnC,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE;gBACzB,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;gBAC9C,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM;aAC/C,CAAC,CAAC;QACL,CAAC,CAAC;IAyCJ,CAAC;IAvCC;;;OAGG;IACI,IAAI;QACT,OAAO,CAAC,OAAO,CAAC,GAAG,EAAE;YACnB,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACxB,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,QAAQ,EAAE,CAAC;gBACzE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;YACrB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC;YAC1B,CAAC;YACD,IAAI,CAAC,UAAU,EAAE,CAAC;QACpB,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;;OAGG;IACI,IAAI;QACT,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;QACpB,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IAED;;;;;OAKG;IACI,YAAY,CAAC,KAAY;QAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM,EAAE,CAAC;YACrD,IAAI,CAAC,IAAI,EAAE,CAAC;QACd,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC;CACF;AAtGQ;IADN,IAAI;oCACsC;AAOpC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;8CACR;AAOxB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;+CACR;AAQzB;IADN,IAAI;wCACkD;AAQhD;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC;oCACgB;AAOrC;IADN,UAAU;sCACuB"}
+{"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../src/drawer/drawer.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACjF,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAE7E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,OAAO,MAAO,SAAQ,WAAW;IAAvC;;QAGE;;;;WAIG;QAEI,SAAI,GAAe,UAAU,CAAC,KAAK,CAAC;QA6B3C;;;;WAIG;QAEI,aAAQ,GAAmB,cAAc,CAAC,KAAK,CAAC;QAEvD;;;;WAIG;QAEI,SAAI,GAAe,UAAU,CAAC,MAAM,CAAC;QAsB5C;;;;WAIG;QACI,eAAU,GAAG,GAAS,EAAE;YAC7B,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;gBACnB,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM;gBAC9C,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;aAC/C,CAAC,CAAC;QACL,CAAC,CAAC;QAEF;;;;WAIG;QACI,qBAAgB,GAAG,GAAS,EAAE;YACnC,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE;gBACzB,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;gBAC9C,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM;aAC/C,CAAC,CAAC;QACL,CAAC,CAAC;IAuEJ,CAAC;IA7JW,WAAW;QACnB,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YACjB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAExB,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,KAAK,EAAE,CAAC;YACnC,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;QACjD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;QAC5C,CAAC;IACH,CAAC;IAuCD,gBAAgB;IAChB,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAED,gBAAgB;IAChB,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,CAAC;IACrC,CAAC;IA0BD;;;OAGG;IACI,IAAI;QACT,OAAO,CAAC,OAAO,CAAC,GAAG,EAAE;YACnB,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACxB,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,QAAQ,EAAE,CAAC;gBACzE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;YACrB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC;YAC1B,CAAC;YACD,IAAI,CAAC,UAAU,EAAE,CAAC;QACpB,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;;OAGG;IACI,IAAI;QACT,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;QACpB,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IAED;;;;;OAKG;IACI,YAAY,CAAC,KAAY;QAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM,EAAE,CAAC;YACrD,IAAI,CAAC,IAAI,EAAE,CAAC;QACd,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAED;;;OAGG;IACI,aAAa;QAClB,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;IAES,eAAe;QACvB,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC1B,OAAO;QACT,CAAC;QAED,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;YAChD,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC1B,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,EAAE;YAClC,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,MAAM,CAAC;SAC1B,CAAC,CAAC;IACL,CAAC;IAES,gBAAgB;QACxB,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACvB,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YACjB,OAAO;QACT,CAAC;QACD,IAAI,CAAC,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;IAC3E,CAAC;CACF;AA9JQ;IADN,IAAI;oCACsC;AAoBpC;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;8CACR;AAOxB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;+CACR;AAQzB;IADN,IAAI;wCACkD;AAQhD;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC;oCACgB;AAOrC;IADN,UAAU;sCACuB"}

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

@@ -8,16 +8,13 @@ export function drawerTemplate() {
     <dialog
       class="dialog"
       part="dialog"
-      role="${x => (x.type === 'modal' ? 'dialog' : x.role)}"
-      aria-modal="${x => (x.type === 'modal' ? 'true' : void 0)}"
       aria-describedby="${x => x.ariaDescribedby}"
       aria-labelledby="${x => x.ariaLabelledby}"
       aria-label="${x => x.ariaLabel}"
       size="${x => x.size}"
       position="${x => x.position}"
-      type="${x => x.type}"
       @click="${(x, c) => x.clickHandler(c.event)}"
-      @cancel="${(x, c) => x.hide()}"
+      @cancel="${x => x.cancelHandler()}"
       ${ref('dialog')}
     >
       <slot></slot>

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;;;;cAIF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;oBACvC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;0BACrC,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;cACnB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;gBACT,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;iBAC9C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE;QAC3B,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,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"}

package/dist/{dts → esm}/drawer-body/drawer-body.d.ts

@@ -20,4 +20,11 @@ import { FASTElement } from '@microsoft/fast-element';
  * @tag fluent-drawer-body
  */
 export declare class DrawerBody extends FASTElement {
+    /**
+     * Handles click event for the close slot
+     *
+     * @param e - the click event
+     * @internal
+     */
+    clickHandler(event: PointerEvent): boolean | void;
 }

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

@@ -1,4 +1,5 @@
 import { FASTElement } from '@microsoft/fast-element';
+import { isDialog } from '../dialog/dialog.options';
 /**
  * A DrawerBody component to layout drawer content
  *
@@ -20,5 +21,20 @@ import { FASTElement } from '@microsoft/fast-element';
  * @tag fluent-drawer-body
  */
 export class DrawerBody extends FASTElement {
+    /**
+     * Handles click event for the close slot
+     *
+     * @param e - the click event
+     * @internal
+     */
+    clickHandler(event) {
+        if (!event.defaultPrevented) {
+            const dialog = this.parentElement;
+            if (isDialog(dialog, '-drawer')) {
+                dialog.hide();
+            }
+        }
+        return true;
+    }
 }
 //# sourceMappingURL=drawer-body.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"drawer-body.js","sourceRoot":"","sources":["../../../src/drawer-body/drawer-body.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,OAAO,UAAW,SAAQ,WAAW;CAAG"}
+{"version":3,"file":"drawer-body.js","sourceRoot":"","sources":["../../../src/drawer-body/drawer-body.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,OAAO,UAAW,SAAQ,WAAW;IACzC;;;;;OAKG;IACI,YAAY,CAAC,KAAmB;QACrC,IAAI,CAAC,KAAK,CAAC,gBAAgB,EAAE,CAAC;YAC5B,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC;YAElC,IAAI,QAAQ,CAAC,MAAM,EAAE,SAAS,CAAC,EAAE,CAAC;gBAChC,MAAM,CAAC,IAAI,EAAE,CAAC;YAChB,CAAC;QACH,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;CACF"}

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

@@ -7,7 +7,7 @@ export function drawerBodyTemplate() {
     return html `
     <div class="header" part="header">
       <slot name="title"></slot>
-      <slot name="close"></slot>
+      <slot name="close" @click="${(x, c) => x.clickHandler(c.event)}"></slot>
     </div>
     <div class="content" part="content">
       <slot></slot>

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

@@ -1 +1 @@
-{"version":3,"file":"drawer-body.template.js","sourceRoot":"","sources":["../../../src/drawer-body/drawer-body.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGzE;;;GAGG;AACH,MAAM,UAAU,kBAAkB;IAChC,OAAO,IAAI,CAAG;;;;;;;;;;;GAWb,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAoC,kBAAkB,EAAE,CAAC"}
+{"version":3,"file":"drawer-body.template.js","sourceRoot":"","sources":["../../../src/drawer-body/drawer-body.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGzE;;;GAGG;AACH,MAAM,UAAU,kBAAkB;IAChC,OAAO,IAAI,CAAG;;;mCAGmB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAqB,CAAC;;;;;;;;GAQjF,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAoC,kBAAkB,EAAE,CAAC"}

package/dist/{dts → esm}/dropdown/dropdown.base.d.ts

@@ -130,12 +130,6 @@ export declare class BaseDropdown extends FASTElement {
      * The listbox element is assigned to the dropdown via the default slot with manual slot assignment.
      */
     listboxChanged(prev: Listbox | undefined, next: Listbox | undefined): void;
-    /**
-     * Reference to the listbox slot element.
-     *
-     * @internal
-     */
-    listboxSlot: HTMLSlotElement;
     /**
      * Indicates whether the dropdown allows multiple options to be selected.
      *
@@ -228,6 +222,20 @@ export declare class BaseDropdown extends FASTElement {
      * @internal
      */
     controlSlot: HTMLSlotElement;
+    /**
+     * An abort controller to remove scroll and resize event listeners when the dropdown is closed or disconnected. Used
+     * when the browser does not support CSS anchor positioning.
+     *
+     * @internal
+     */
+    private debounceController?;
+    /**
+     * Repositions the listbox to align with the control element. Used when the browser does not support CSS anchor
+     * positioning.
+     *
+     * @internal
+     */
+    private repositionListbox;
     /**
      * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
      *
@@ -247,11 +255,11 @@ export declare class BaseDropdown extends FASTElement {
      */
     static formAssociated: boolean;
     /**
-     * Resets the form value to its initial value when the form is reset.
+     * The ID of the frame used for repositioning the listbox when the browser does not support CSS anchor positioning.
      *
      * @internal
      */
-    formResetCallback(): void;
+    private frameId?;
     /**
      * A reference to the first freeform option, if present.
      *
@@ -387,6 +395,12 @@ export declare class BaseDropdown extends FASTElement {
      * @internal
      */
     focusoutHandler(e: FocusEvent): boolean | void;
+    /**
+     * Resets the form value to its initial value when the form is reset.
+     *
+     * @internal
+     */
+    formResetCallback(): void;
     /**
      * Ensures the active index is within bounds of the enabled options. Out-of-bounds indices are wrapped to the opposite
      * end of the range.
@@ -454,21 +468,21 @@ export declare class BaseDropdown extends FASTElement {
      */
     setValidity(flags?: Partial<ValidityState>, message?: string, anchor?: HTMLElement): void;
     /**
-     * Updates the freeform option with the provided value.
+     * Handles the `slotchange` event for the dropdown.
+     * Sets the `listbox` property when a valid listbox is assigned to the default slot.
      *
-     * @param value - the value to update the freeform option with
+     * @param e - the slot change event
      * @internal
      */
-    protected updateFreeformOption(value?: string): void;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
+    slotchangeHandler(e: Event): boolean | void;
     /**
-     * Handles the connected event for the listbox.
+     * Updates the freeform option with the provided value.
      *
-     * @param e - the event object
+     * @param value - the value to update the freeform option with
      * @internal
      */
-    private listboxConnectedHandler;
+    protected updateFreeformOption(value?: string): void;
+    disconnectedCallback(): void;
     /**
      * When anchor positioning isn't supported, an intersection observer is used to flip the listbox when it hits the
      * viewport bounds. One static observer is used for all dropdowns.