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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-body.options.js","sourceRoot":"","sources":["../../../src/dialog-body/dialog-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/dialog-body/dialog-body.styles.css

@@ -0,0 +1,92 @@
+:host([hidden]) {
+  display: none;
+}
+:host {
+  display: grid;
+}
+
+:host {
+  background: var(--colorNeutralBackground1);
+  box-sizing: border-box;
+  gap: var(--spacingVerticalS);
+  padding: var(--spacingVerticalXXL) var(--spacingHorizontalXXL);
+  container: dialog-body / inline-size;
+}
+
+.title {
+  box-sizing: border-box;
+  align-items: flex-start;
+  background: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
+  column-gap: 8px;
+  display: flex;
+  font-family: var(--fontFamilyBase);
+  font-size: var(--fontSizeBase500);
+  font-weight: var(--fontWeightSemibold);
+  inset-block-start: 0;
+  justify-content: space-between;
+  line-height: var(--lineHeightBase500);
+  margin-block-end: calc(var(--spacingVerticalS) * -1);
+  margin-block-start: calc(var(--spacingVerticalXXL) * -1);
+  padding-block-end: var(--spacingVerticalS);
+  padding-block-start: var(--spacingVerticalXXL);
+}
+
+.content {
+  box-sizing: border-box;
+  color: var(--colorNeutralForeground1);
+  font-family: var(--fontFamilyBase);
+  font-size: var(--fontSizeBase300);
+  font-weight: var(--fontWeightRegular);
+  line-height: var(--lineHeightBase300);
+  min-height: 32px;
+}
+
+.actions {
+  box-sizing: border-box;
+  background: var(--colorNeutralBackground1);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacingVerticalS);
+  inset-block-end: 0;
+  margin-block-end: calc(var(--spacingVerticalXXL) * -1);
+  padding-block-end: var(--spacingVerticalXXL);
+  padding-block-start: var(--spacingVerticalL);
+}
+
+::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) {
+  .actions {
+    align-items: center;
+    flex-direction: row;
+    justify-content: flex-end;
+    margin-block-start: calc(var(--spacingVerticalS) * -1);
+    padding-block-start: var(--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;
+  }
+}

package/dist/esm/dialog-body/dialog-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 { colorNeutralBackground1, colorNeutralForeground1, fontFamilyBase, fontSizeBase300, fontSizeBase500, fontWeightRegular, fontWeightSemibold, lineHeightBase300, lineHeightBase500, spacingHorizontalXXL, spacingVerticalL, spacingVerticalS, spacingVerticalXXL, } from '../theme/design-tokens.js';
 /** Dialog Body styles
  * @public
@@ -91,5 +91,6 @@ export const styles = css `
       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;;;;;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"}
+{"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,qBAAqB,CAAC;AAC9C,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;;;;;;;;;;;;;;;CAe5C,CAAC"}

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

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

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

@@ -2,3 +2,4 @@ export { DialogBody } from './dialog-body.js';
 export { definition as DialogBodyDefinition } from './dialog-body.definition.js';
 export { template as DialogBodyTemplate } from './dialog-body.template.js';
 export { styles as DialogBodyStyles } from './dialog-body.styles.js';
+export { tagName as DialogBodyTagName } from './dialog-body.options.js';

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

@@ -2,4 +2,5 @@ export { DialogBody } from './dialog-body.js';
 export { definition as DialogBodyDefinition } from './dialog-body.definition.js';
 export { template as DialogBodyTemplate } from './dialog-body.template.js';
 export { styles as DialogBodyStyles } from './dialog-body.styles.js';
+export { tagName as DialogBodyTagName } from './dialog-body.options.js';
 //# sourceMappingURL=index.js.map

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"define-async.js","sourceRoot":"","sources":["../../../src/divider/define-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC"}

package/dist/esm/divider/define.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/divider/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/divider/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC"}

package/dist/esm/divider/divider.bench.d.ts

@@ -1,3 +1,4 @@
+import './define.js';
 declare const itemRenderer: () => HTMLElement;
 export default itemRenderer;
 export { tests } from '../utils/benchmark-wrapper.js';

package/dist/esm/divider/divider.bench.js

@@ -1,6 +1,4 @@
-import { FluentDesignSystem } from '../fluent-design-system.js';
-import { definition } from './divider.definition.js';
-definition.define(FluentDesignSystem.registry);
+import './define.js';
 const itemRenderer = () => {
     const divider = document.createElement('fluent-divider');
     return divider;

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

@@ -1 +1 @@
-{"version":3,"file":"divider.bench.js","sourceRoot":"","sources":["../../../src/divider/divider.bench.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;AAE/C,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACzD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}
+{"version":3,"file":"divider.bench.js","sourceRoot":"","sources":["../../../src/divider/divider.bench.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAErB,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACzD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/esm/divider/divider.definition-async.d.ts

@@ -0,0 +1,10 @@
+import { type PartialFASTElementDefinition } from '@microsoft/fast-element/declarative.js';
+/**
+ * The async definition configuration for the `<fluent-divider>` 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/divider/divider.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 './divider.options.js';
+/**
+ * The async definition configuration for the `<fluent-divider>` 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=divider.definition-async.js.map

package/dist/esm/divider/divider.definition-async.js.map

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

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

package/dist/esm/divider/divider.definition.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"divider.definition.js","sourceRoot":"","sources":["../../../src/divider/divider.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,CAAC;IACxC,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,UAAU;IAC5C,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}
+{"version":3,"file":"divider.definition.js","sourceRoot":"","sources":["../../../src/divider/divider.definition.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD;;;;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/divider/divider.options.d.ts

@@ -1,4 +1,4 @@
-import type { ValuesOf } from '../utils/index.js';
+import type { ValuesOf } from '../utils/typings.js';
 /**
  * Divider roles
  * @public
@@ -59,3 +59,9 @@ export declare const DividerAppearance: {
  * @public
  */
 export type DividerAppearance = ValuesOf<typeof DividerAppearance>;
+/**
+ * The tag name for the divider element.
+ *
+ * @public
+ */
+export declare const tagName: "fluent-divider";

package/dist/esm/divider/divider.options.js

@@ -1,4 +1,5 @@
-import { Orientation } from '@microsoft/fast-web-utilities';
+import { Orientation } from '../utils/orientation.js';
+import { FluentDesignSystem } from '../fluent-design-system.js';
 /**
  * Divider roles
  * @public
@@ -36,4 +37,10 @@ export const DividerAppearance = {
     brand: 'brand',
     subtle: 'subtle',
 };
+/**
+ * The tag name for the divider element.
+ *
+ * @public
+ */
+export const tagName = `${FluentDesignSystem.prefix}-divider`;
 //# sourceMappingURL=divider.options.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"divider.options.js","sourceRoot":"","sources":["../../../src/divider/divider.options.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAG5D;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB;;OAEG;IACH,SAAS,EAAE,WAAW;IAEtB;;OAEG;IACH,YAAY,EAAE,cAAc;CACpB,CAAC;AAQX;;;GAGG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,WAAW,CAAC;AAQ9C;;;GAGG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;IACd,GAAG,EAAE,KAAK;CACF,CAAC;AAQX;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;CACR,CAAC"}
+{"version":3,"file":"divider.options.js","sourceRoot":"","sources":["../../../src/divider/divider.options.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB;;OAEG;IACH,SAAS,EAAE,WAAW;IAEtB;;OAEG;IACH,YAAY,EAAE,cAAc;CACpB,CAAC;AAQX;;;GAGG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,WAAW,CAAC;AAQ9C;;;GAGG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;IACd,GAAG,EAAE,KAAK;CACF,CAAC;AAQX;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;CACR,CAAC;AAQX;;;;GAIG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,kBAAkB,CAAC,MAAM,UAAmB,CAAC"}

package/dist/esm/divider/divider.styles.css

@@ -0,0 +1,123 @@
+:host([hidden]) {
+  display: none;
+}
+:host {
+  display: flex;
+}
+
+:host {
+  contain: content;
+}
+
+:host::after,
+:host::before {
+  align-self: center;
+  background: var(--colorNeutralStroke2);
+  box-sizing: border-box;
+  content: '';
+  display: flex;
+  flex-grow: 1;
+  height: var(--strokeWidthThin);
+}
+
+:host([inset]) {
+  padding: 0 12px;
+}
+
+:host ::slotted(*) {
+  color: var(--colorNeutralForeground2);
+  font-family: var(--fontFamilyBase);
+  font-size: var(--fontSizeBase200);
+  font-weight: var(--fontWeightRegular);
+  margin: 0;
+  padding: 0 12px;
+}
+
+:host([align-content='start'])::before,
+:host([align-content='end'])::after {
+  flex-basis: 12px;
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+:host([orientation='vertical']) {
+  align-items: center;
+  flex-direction: column;
+  height: 100%;
+  min-height: 84px;
+}
+
+:host([orientation='vertical']):empty {
+  min-height: 20px;
+}
+
+:host([orientation='vertical'][inset])::before {
+  margin-top: 12px;
+}
+:host([orientation='vertical'][inset])::after {
+  margin-bottom: 12px;
+}
+
+:host([orientation='vertical']):empty::before,
+:host([orientation='vertical']):empty::after {
+  height: 10px;
+  min-height: 10px;
+  flex-grow: 0;
+}
+
+:host([orientation='vertical'])::before,
+:host([orientation='vertical'])::after {
+  width: var(--strokeWidthThin);
+  min-height: 20px;
+  height: 100%;
+}
+
+:host([orientation='vertical']) ::slotted(*) {
+  display: flex;
+  flex-direction: column;
+  padding: 12px 0;
+  line-height: 20px;
+}
+
+:host([orientation='vertical'][align-content='start'])::before {
+  min-height: 8px;
+}
+:host([orientation='vertical'][align-content='end'])::after {
+  min-height: 8px;
+}
+
+:host([appearance='strong'])::before,
+:host([appearance='strong'])::after {
+  background: var(--colorNeutralStroke1);
+}
+:host([appearance='strong']) ::slotted(*) {
+  color: var(--colorNeutralForeground1);
+}
+:host([appearance='brand'])::before,
+:host([appearance='brand'])::after {
+  background: var(--colorBrandStroke1);
+}
+:host([appearance='brand']) ::slotted(*) {
+  color: var(--colorBrandForeground1);
+}
+:host([appearance='subtle'])::before,
+:host([appearance='subtle'])::after {
+  background: var(--colorNeutralStroke3);
+}
+:host([appearance='subtle']) ::slotted(*) {
+  color: var(--colorNeutralForeground3);
+}
+
+@media (forced-colors: active) {
+  :host([appearance='strong'])::before,
+  :host([appearance='strong'])::after,
+  :host([appearance='brand'])::before,
+  :host([appearance='brand'])::after,
+  :host([appearance='subtle'])::before,
+  :host([appearance='subtle'])::after,
+  :host::after,
+  :host::before {
+    background: WindowText;
+    color: WindowText;
+  }
+}

package/dist/esm/divider/divider.styles.js

@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display, forcedColorsStylesheetBehavior } from '../utils/index.js';
+import { display } from '../utils/display.js';
 import { colorBrandForeground1, colorBrandStroke1, colorNeutralForeground1, colorNeutralForeground2, colorNeutralForeground3, colorNeutralStroke1, colorNeutralStroke2, colorNeutralStroke3, fontFamilyBase, fontSizeBase200, fontWeightRegular, strokeWidthThin, } from '../theme/design-tokens.js';
 /** Divider styles
  * @public
@@ -109,7 +109,8 @@ export const styles = css `
   :host([appearance='subtle']) ::slotted(*) {
     color: ${colorNeutralForeground3};
   }
-`.withBehaviors(forcedColorsStylesheetBehavior(css `
+
+  @media (forced-colors: active) {
     :host([appearance='strong'])::before,
     :host([appearance='strong'])::after,
     :host([appearance='brand'])::before,
@@ -121,5 +122,6 @@ export const styles = css `
       background: WindowText;
       color: WindowText;
     }
-  `));
+  }
+`;
 //# sourceMappingURL=divider.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"divider.styles.js","sourceRoot":"","sources":["../../../src/divider/divider.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,8BAA8B,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EACL,qBAAqB,EACrB,iBAAiB,EACjB,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,EACnB,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;kBASD,mBAAmB;;;;;cAKvB,eAAe;;;;;;;;aAQhB,uBAAuB;mBACjB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAuCvB,eAAe;;;;;;;;;;;;;;;;;;;;;kBAqBV,mBAAmB;;;aAGxB,uBAAuB;;;;kBAIlB,iBAAiB;;;aAGtB,qBAAqB;;;;kBAIhB,mBAAmB;;;aAGxB,uBAAuB;;CAEnC,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;;;;GAYjC,CAAC,CACH,CAAC"}
+{"version":3,"file":"divider.styles.js","sourceRoot":"","sources":["../../../src/divider/divider.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EACL,qBAAqB,EACrB,iBAAiB,EACjB,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,EACnB,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;kBASD,mBAAmB;;;;;cAKvB,eAAe;;;;;;;;aAQhB,uBAAuB;mBACjB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAuCvB,eAAe;;;;;;;;;;;;;;;;;;;;;kBAqBV,mBAAmB;;;aAGxB,uBAAuB;;;;kBAIlB,iBAAiB;;;aAGtB,qBAAqB;;;;kBAIhB,mBAAmB;;;aAGxB,uBAAuB;;;;;;;;;;;;;;;;CAgBnC,CAAC"}

package/dist/esm/divider/divider.template.html

@@ -0,0 +1,6 @@
+<f-template name="fluent-divider" shadowrootmode="open">
+  <template>
+    {{styles}}
+    <slot></slot>
+  </template>
+</f-template>

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

@@ -4,3 +4,4 @@ export { DividerAlignContent, DividerAppearance, DividerOrientation, DividerRole
 export { definition as DividerDefinition } from './divider.definition.js';
 export { template as DividerTemplate } from './divider.template.js';
 export { styles as DividerStyles } from './divider.styles.js';
+export { tagName as DividerTagName } from './divider.options.js';

package/dist/esm/divider/index.js

@@ -4,4 +4,5 @@ export { DividerAlignContent, DividerAppearance, DividerOrientation, DividerRole
 export { definition as DividerDefinition } from './divider.definition.js';
 export { template as DividerTemplate } from './divider.template.js';
 export { styles as DividerStyles } from './divider.styles.js';
+export { tagName as DividerTagName } from './divider.options.js';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/divider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC/G,OAAO,EAAE,UAAU,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC1E,OAAO,EAAE,QAAQ,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACpE,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/divider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC/G,OAAO,EAAE,UAAU,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC1E,OAAO,EAAE,QAAQ,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACpE,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC"}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"define-async.js","sourceRoot":"","sources":["../../../src/drawer/define-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,MAAM,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC"}

package/dist/esm/drawer/define.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/drawer/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/drawer/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC"}