@fluentui/web-components 3.0.0-beta.26 → 3.0.0-beta.27

package/CHANGELOG.md

@@ -1,12 +1,22 @@
 # Change Log - @fluentui/web-components
 
-This log was last generated on Mon, 10 Jun 2024 04:07:51 GMT and should not be manually modified.
+This log was last generated on Tue, 11 Jun 2024 04:06:16 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [3.0.0-beta.27](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.27)
+
+Tue, 11 Jun 2024 04:06:16 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.26..@fluentui/web-components_v3.0.0-beta.27)
+
+### Changes
+
+- feat: update divider to leverage ElementInternals ([PR #31627](https://github.com/microsoft/fluentui/pull/31627) by 13071055+chrisdholt@users.noreply.github.com)
+- fix: show default title action in dialog-body for modal dialogs ([PR #31648](https://github.com/microsoft/fluentui/pull/31648) by 13071055+chrisdholt@users.noreply.github.com)
+
 ## [3.0.0-beta.26](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.26)
 
-Mon, 10 Jun 2024 04:07:51 GMT 
+Mon, 10 Jun 2024 04:07:58 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.25..@fluentui/web-components_v3.0.0-beta.26)
 
 ### Changes

package/dist/dts/divider/divider.d.ts

@@ -7,6 +7,12 @@ import { DividerAlignContent, DividerAppearance, DividerOrientation, DividerRole
  * A divider groups sections of content to create visual rhythm and hierarchy. Use dividers along with spacing and headers to organize content in your layout.
  */
 export declare class Divider extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
     /**
      * The role of the element.
      *
@@ -22,7 +28,7 @@ export declare class Divider extends FASTElement {
      * @remarks
      * HTML Attribute: orientation
      */
-    orientation: DividerOrientation;
+    orientation?: DividerOrientation;
     /**
      * @public
      * @remarks
@@ -41,4 +47,21 @@ export declare class Divider extends FASTElement {
      * Adds padding to the beginning and end of the divider.
      */
     inset?: boolean;
+    connectedCallback(): void;
+    /**
+     * Sets the element's internal role when the role attribute changes.
+     *
+     * @param previous - the previous role value
+     * @param next - the current role value
+     * @internal
+     */
+    roleChanged(previous: string | null, next: string | null): void;
+    /**
+     * Sets the element's internal orientation when the orientation attribute changes.
+     *
+     * @param previous - the previous orientation value
+     * @param next - the current orientation value
+     * @internal
+     */
+    orientationChanged(previous: string | null, next: string | null): void;
 }

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

@@ -23,7 +23,7 @@ export const template = html `
     <slot name="title"></slot>
     <slot name="title-action">
       <fluent-button
-        ?hidden=${x => { var _a; return x.noTitleAction || ((_a = x.parentNode) === null || _a === void 0 ? void 0 : _a.type) !== DialogType.nonModal; }}
+        ?hidden=${x => { var _a; return x.noTitleAction || ((_a = x.parentNode) === null || _a === void 0 ? void 0 : _a.type) === DialogType.alert; }}
         tabindex="0"
         part="title-action"
         class="title-action"

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,EAAuB,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AACzE,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,WAAC,OAAA,CAAC,CAAC,aAAa,IAAI,CAAA,MAAA,CAAC,CAAC,UAAU,0CAAE,IAAI,MAAK,UAAU,CAAC,QAAQ,CAAA,EAAA;;;;;;iBAMnE,CAAC,CAAC,EAAE,WAAC,OAAA,MAAA,CAAC,CAAC,UAAU,0CAAE,IAAI,EAAE,CAAA,EAAA;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,EAAuB,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AACzE,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,WAAC,OAAA,CAAC,CAAC,aAAa,IAAI,CAAA,MAAA,CAAC,CAAC,UAAU,0CAAE,IAAI,MAAK,UAAU,CAAC,KAAK,CAAA,EAAA;;;;;;iBAMhE,CAAC,CAAC,EAAE,WAAC,OAAA,MAAA,CAAC,CAAC,UAAU,0CAAE,IAAI,EAAE,CAAA,EAAA;UAChC,GAAG,CAAC,oBAAoB,CAAC;;UAEzB,kBAAkB;;;;;;CAM3B,CAAC"}

package/dist/esm/divider/divider.js

@@ -11,21 +11,46 @@ export class Divider extends FASTElement {
     constructor() {
         super(...arguments);
         /**
-         * The role of the element.
+         * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
          *
-         * @public
-         * @remarks
-         * HTML Attribute: role
+         * @internal
          */
-        this.role = DividerRole.separator;
-        /**
-         * The orientation of the divider.
-         *
-         * @public
-         * @remarks
-         * HTML Attribute: orientation
-         */
-        this.orientation = DividerOrientation.horizontal;
+        this.elementInternals = this.attachInternals();
+    }
+    connectedCallback() {
+        var _a, _b;
+        super.connectedCallback();
+        this.elementInternals.role = (_a = this.role) !== null && _a !== void 0 ? _a : DividerRole.separator;
+        if (this.role !== DividerRole.presentation) {
+            this.elementInternals.ariaOrientation = (_b = this.orientation) !== null && _b !== void 0 ? _b : DividerOrientation.horizontal;
+        }
+    }
+    /**
+     * Sets the element's internal role when the role attribute changes.
+     *
+     * @param previous - the previous role value
+     * @param next - the current role value
+     * @internal
+     */
+    roleChanged(previous, next) {
+        if (this.$fastController.isConnected) {
+            this.elementInternals.role = `${next !== null && next !== void 0 ? next : DividerRole.separator}`;
+        }
+        if (next === DividerRole.presentation) {
+            this.elementInternals.ariaOrientation = null;
+        }
+    }
+    /**
+     * Sets the element's internal orientation when the orientation attribute changes.
+     *
+     * @param previous - the previous orientation value
+     * @param next - the current orientation value
+     * @internal
+     */
+    orientationChanged(previous, next) {
+        if (this.$fastController.isConnected) {
+            this.elementInternals.ariaOrientation = this.role !== DividerRole.presentation ? next : null;
+        }
     }
 }
 __decorate([

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

@@ -1 +1 @@
-{"version":3,"file":"divider.js","sourceRoot":"","sources":["../../../src/divider/divider.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAA0C,kBAAkB,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAE/G;;;;;GAKG;AACH,MAAM,OAAO,OAAQ,SAAQ,WAAW;IAAxC;;QACE;;;;;;WAMG;QAEI,SAAI,GAAgB,WAAW,CAAC,SAAS,CAAC;QAEjD;;;;;;WAMG;QAEI,gBAAW,GAAuB,kBAAkB,CAAC,UAAU,CAAC;IAyBzE,CAAC;CAAA;AAnCC;IADC,IAAI;qCAC4C;AAUjD;IADC,IAAI;4CACkE;AAQvE;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;6CACK;AAQ1C;IADC,IAAI;2CACiC;AAQtC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;sCACH"}
+{"version":3,"file":"divider.js","sourceRoot":"","sources":["../../../src/divider/divider.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAA0C,kBAAkB,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAE/G;;;;;GAKG;AACH,MAAM,OAAO,OAAQ,SAAQ,WAAW;IAAxC;;QACE;;;;WAIG;QACI,qBAAgB,GAAqB,IAAI,CAAC,eAAe,EAAE,CAAC;IAqFrE,CAAC;IAvCQ,iBAAiB;;QACtB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,gBAAgB,CAAC,IAAI,GAAG,MAAA,IAAI,CAAC,IAAI,mCAAI,WAAW,CAAC,SAAS,CAAC;QAEhE,IAAI,IAAI,CAAC,IAAI,KAAK,WAAW,CAAC,YAAY,EAAE;YAC1C,IAAI,CAAC,gBAAgB,CAAC,eAAe,GAAG,MAAA,IAAI,CAAC,WAAW,mCAAI,kBAAkB,CAAC,UAAU,CAAC;SAC3F;IACH,CAAC;IAED;;;;;;OAMG;IACI,WAAW,CAAC,QAAuB,EAAE,IAAmB;QAC7D,IAAI,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE;YACpC,IAAI,CAAC,gBAAgB,CAAC,IAAI,GAAG,GAAG,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,WAAW,CAAC,SAAS,EAAE,CAAC;SACjE;QAED,IAAI,IAAI,KAAK,WAAW,CAAC,YAAY,EAAE;YACrC,IAAI,CAAC,gBAAgB,CAAC,eAAe,GAAG,IAAI,CAAC;SAC9C;IACH,CAAC;IAED;;;;;;OAMG;IACI,kBAAkB,CAAC,QAAuB,EAAE,IAAmB;QACpE,IAAI,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE;YACpC,IAAI,CAAC,gBAAgB,CAAC,eAAe,GAAG,IAAI,CAAC,IAAI,KAAK,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;SAC9F;IACH,CAAC;CACF;AA3EC;IADC,IAAI;qCACqB;AAU1B;IADC,IAAI;4CACmC;AAQxC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;6CACK;AAQ1C;IADC,IAAI;2CACiC;AAQtC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;sCACH"}

package/dist/esm/divider/divider.template.js

@@ -1,14 +1,6 @@
 import { html } from '@microsoft/fast-element';
-import { DividerRole } from './divider.options.js';
 export function dividerTemplate() {
-    return html `
-    <template
-      role="${x => x.role}"
-      aria-orientation="${x => (x.role !== DividerRole.presentation ? x.orientation : void 0)}"
-    >
-      <slot></slot>
-    </template>
-  `;
+    return html `<slot></slot>`;
 }
 /**
  * Template for the Divider component

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

@@ -1 +1 @@
-{"version":3,"file":"divider.template.js","sourceRoot":"","sources":["../../../src/divider/divider.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAEpE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,MAAM,UAAU,eAAe;IAC7B,OAAO,IAAI,CAAG;;cAEF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;0BACC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;;;;GAI1F,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAiC,eAAe,EAAE,CAAC"}
+{"version":3,"file":"divider.template.js","sourceRoot":"","sources":["../../../src/divider/divider.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGpE,MAAM,UAAU,eAAe;IAC7B,OAAO,IAAI,CAAG,eAAe,CAAC;AAChC,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAiC,eAAe,EAAE,CAAC"}

package/dist/web-components.d.ts

@@ -4566,6 +4566,12 @@ export declare function display(displayValue: CSSDisplayPropertyValue): string;
  * A divider groups sections of content to create visual rhythm and hierarchy. Use dividers along with spacing and headers to organize content in your layout.
  */
 export declare class Divider extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
     /**
      * The role of the element.
      *
@@ -4581,7 +4587,7 @@ export declare class Divider extends FASTElement {
      * @remarks
      * HTML Attribute: orientation
      */
-    orientation: DividerOrientation;
+    orientation?: DividerOrientation;
     /**
      * @public
      * @remarks
@@ -4600,6 +4606,23 @@ export declare class Divider extends FASTElement {
      * Adds padding to the beginning and end of the divider.
      */
     inset?: boolean;
+    connectedCallback(): void;
+    /**
+     * Sets the element's internal role when the role attribute changes.
+     *
+     * @param previous - the previous role value
+     * @param next - the current role value
+     * @internal
+     */
+    roleChanged(previous: string | null, next: string | null): void;
+    /**
+     * Sets the element's internal orientation when the orientation attribute changes.
+     *
+     * @param previous - the previous orientation value
+     * @param next - the current orientation value
+     * @internal
+     */
+    orientationChanged(previous: string | null, next: string | null): void;
 }
 
 /**

package/dist/web-components.js

@@ -5775,7 +5775,7 @@ const dismissed16Regular = html.partial(`
       fill="currentColor"
     ></path>
   </svg>`);
-const template$k = html`<div class="title" part="title"><slot name="title"></slot><slot name="title-action"><fluent-button ?hidden=${x => x.noTitleAction || x.parentNode?.type !== DialogType.nonModal} 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>`;
+const template$k = 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>`;
 
 const styles$j = css`
   ${display("grid")}
@@ -5813,8 +5813,46 @@ var __decorateClass$h = (decorators, target, key, kind) => {
 class Divider extends FASTElement {
   constructor() {
     super(...arguments);
-    this.role = DividerRole.separator;
-    this.orientation = DividerOrientation.horizontal;
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    this.elementInternals = this.attachInternals();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.elementInternals.role = this.role ?? DividerRole.separator;
+    if (this.role !== DividerRole.presentation) {
+      this.elementInternals.ariaOrientation = this.orientation ?? DividerOrientation.horizontal;
+    }
+  }
+  /**
+   * Sets the element's internal role when the role attribute changes.
+   *
+   * @param previous - the previous role value
+   * @param next - the current role value
+   * @internal
+   */
+  roleChanged(previous, next) {
+    if (this.$fastController.isConnected) {
+      this.elementInternals.role = `${next ?? DividerRole.separator}`;
+    }
+    if (next === DividerRole.presentation) {
+      this.elementInternals.ariaOrientation = null;
+    }
+  }
+  /**
+   * Sets the element's internal orientation when the orientation attribute changes.
+   *
+   * @param previous - the previous orientation value
+   * @param next - the current orientation value
+   * @internal
+   */
+  orientationChanged(previous, next) {
+    if (this.$fastController.isConnected) {
+      this.elementInternals.ariaOrientation = this.role !== DividerRole.presentation ? next : null;
+    }
   }
 }
 __decorateClass$h([attr], Divider.prototype, "role", 2);
@@ -5828,7 +5866,7 @@ __decorateClass$h([attr({
 })], Divider.prototype, "inset", 2);
 
 function dividerTemplate() {
-  return html`<template role="${x => x.role}" aria-orientation="${x => x.role !== DividerRole.presentation ? x.orientation : void 0}"><slot></slot></template>`;
+  return html`<slot></slot>`;
 }
 const template$j = dividerTemplate();