@fluentui/web-components 3.0.0-beta.102 → 3.0.0-beta.103

package/CHANGELOG.md

@@ -1,12 +1,22 @@
 # Change Log - @fluentui/web-components
 
-This log was last generated on Wed, 21 May 2025 04:07:14 GMT and should not be manually modified.
+This log was last generated on Thu, 22 May 2025 04:06:39 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [3.0.0-beta.103](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.103)
+
+Thu, 22 May 2025 04:06:39 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.102..@fluentui/web-components_v3.0.0-beta.103)
+
+### Changes
+
+- Fixed compound-button high contrast text colors. ([PR #34490](https://github.com/microsoft/fluentui/pull/34490) by 601470+mlijanto@users.noreply.github.com)
+- Adds click event to close slot of drawer ([PR #34479](https://github.com/microsoft/fluentui/pull/34479) by jes@microsoft.com)
+
 ## [3.0.0-beta.102](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.102)
 
-Wed, 21 May 2025 04:07:14 GMT 
+Wed, 21 May 2025 04:07:25 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.101..@fluentui/web-components_v3.0.0-beta.102)
 
 ### Changes

package/dist/dts/dialog-body/dialog-body.d.ts

@@ -14,5 +14,5 @@ export declare class DialogBody extends FASTElement {
      * @param e - the click event
      * @internal
      */
-    clickHandler(event: MouseEvent): boolean | void;
+    clickHandler(event: PointerEvent): boolean | void;
 }

package/dist/dts/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/compound-button/compound-button.styles.js

@@ -1,6 +1,7 @@
 import { css } from '@microsoft/fast-element';
 import { styles as ButtonStyles } from '../button/button.styles.js';
 import { colorNeutralForeground2, colorNeutralForeground2BrandHover, colorNeutralForeground2BrandPressed, colorNeutralForeground2Hover, colorNeutralForeground2Pressed, colorNeutralForegroundDisabled, colorNeutralForegroundOnBrand, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontWeightRegular, lineHeightBase300, lineHeightBase400, spacingHorizontalS, spacingHorizontalSNudge, spacingHorizontalXS, } from '../theme/design-tokens.js';
+import { forcedColorsStylesheetBehavior } from '../utils/index';
 // Need to support icon hover styles
 export const styles = css `
   ${ButtonStyles}
@@ -99,5 +100,10 @@ export const styles = css `
   :host([size='large']) ::slotted([slot='description']) {
     font-size: ${fontSizeBase300};
   }
-`;
+`.withBehaviors(forcedColorsStylesheetBehavior(css `
+    :host([appearance='primary']:not(:hover, :focus-visible, :disabled, [disabled-focusable]))
+      ::slotted([slot='description']) {
+      color: HighlightText;
+    }
+  `));
 //# sourceMappingURL=compound-button.styles.js.map

package/dist/esm/compound-button/compound-button.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"compound-button.styles.js","sourceRoot":"","sources":["../../../src/compound-button/compound-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EACL,uBAAuB,EACvB,iCAAiC,EACjC,mCAAmC,EACnC,4BAA4B,EAC5B,8BAA8B,EAC9B,8BAA8B,EAC9B,6BAA6B,EAC7B,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,GACpB,MAAM,2BAA2B,CAAC;AAEnC,oCAAoC;AACpC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,YAAY;;;;;;;;;iBASC,eAAe;mBACb,iBAAiB;;;;;;;;;;aAUvB,uBAAuB;;iBAEnB,eAAe;mBACb,iBAAiB;;;;;;;;;;;aAWvB,4BAA4B;;;;aAI5B,8BAA8B;;;;aAI9B,6BAA6B;;;;;aAK7B,uBAAuB;;;;aAIvB,iCAAiC;;;;aAIjC,mCAAmC;;;;;aAKnC,8BAA8B;;;;;;;;;;;eAW5B,uBAAuB;;;;;;eAMvB,mBAAmB;;;;;;eAMnB,kBAAkB;;;;;;;iBAOhB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;;CAE/B,CAAC"}
+{"version":3,"file":"compound-button.styles.js","sourceRoot":"","sources":["../../../src/compound-button/compound-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EACL,uBAAuB,EACvB,iCAAiC,EACjC,mCAAmC,EACnC,4BAA4B,EAC5B,8BAA8B,EAC9B,8BAA8B,EAC9B,6BAA6B,EAC7B,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,GACpB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,8BAA8B,EAAE,MAAM,gBAAgB,CAAC;AAEhE,oCAAoC;AACpC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,YAAY;;;;;;;;;iBASC,eAAe;mBACb,iBAAiB;;;;;;;;;;aAUvB,uBAAuB;;iBAEnB,eAAe;mBACb,iBAAiB;;;;;;;;;;;aAWvB,4BAA4B;;;;aAI5B,8BAA8B;;;;aAI9B,6BAA6B;;;;;aAK7B,uBAAuB;;;;aAIvB,iCAAiC;;;;aAIjC,mCAAmC;;;;;aAKnC,8BAA8B;;;;;;;;;;;eAW5B,uBAAuB;;;;;;eAMvB,mBAAmB;;;;;;eAMnB,kBAAkB;;;;;;;iBAOhB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;;CAE/B,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;GAKjC,CAAC,CACH,CAAC"}

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,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,KAAiB;QACnC,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"}
+{"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/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/web-components.d.ts

@@ -6228,7 +6228,7 @@ export declare class DialogBody extends FASTElement {
      * @param e - the click event
      * @internal
      */
-    clickHandler(event: MouseEvent): boolean | void;
+    clickHandler(event: PointerEvent): boolean | void;
 }
 
 /**
@@ -6527,6 +6527,13 @@ export declare class Drawer extends FASTElement {
  * @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/web-components.js

@@ -6546,7 +6546,9 @@ const styles$z = css`
 
   :host,:host(:is([size])){gap:12px;height:auto;padding-top:14px;padding-inline:12px;padding-bottom:16px;font-size:${fontSizeBase300};line-height:${lineHeightBase300}}.content{display:flex;flex-direction:column;text-align:start}::slotted([slot='description']){color:${colorNeutralForeground2};line-height:100%;font-size:${fontSizeBase200};font-weight:${fontWeightRegular}}::slotted(svg),:host([size='large']) ::slotted(svg){font-size:40px;height:40px;width:40px}:host(:hover) ::slotted([slot='description']){color:${colorNeutralForeground2Hover}}:host(:active) ::slotted([slot='description']){color:${colorNeutralForeground2Pressed}}:host(:is([appearance='primary'],[appearance='primary']:is(:hover,:active))) ::slotted([slot='description']){color:${colorNeutralForegroundOnBrand}}:host(:is([appearance='transparent'],[appearance='subtle'],[appearance='subtle']:is(:hover,:active)))
     ::slotted([slot='description']){color:${colorNeutralForeground2}}:host([appearance='transparent']:hover) ::slotted([slot='description']){color:${colorNeutralForeground2BrandHover}}:host([appearance='transparent']:active) ::slotted([slot='description']){color:${colorNeutralForeground2BrandPressed}}:host(:is(:disabled,:disabled[appearance],[disabled-focusable],[disabled-focusable][appearance]))
-    ::slotted([slot='description']){color:${colorNeutralForegroundDisabled}}:host([size='small']){padding:8px;padding-bottom:10px}:host([icon-only]){min-width:52px;max-width:52px;padding:${spacingHorizontalSNudge}}:host([icon-only][size='small']){min-width:48px;max-width:48px;padding:${spacingHorizontalXS}}:host([icon-only][size='large']){min-width:56px;max-width:56px;padding:${spacingHorizontalS}}:host([size='large']){padding-top:18px;padding-inline:16px;padding-bottom:20px;font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large']) ::slotted([slot='description']){font-size:${fontSizeBase300}}`;
+    ::slotted([slot='description']){color:${colorNeutralForegroundDisabled}}:host([size='small']){padding:8px;padding-bottom:10px}:host([icon-only]){min-width:52px;max-width:52px;padding:${spacingHorizontalSNudge}}:host([icon-only][size='small']){min-width:48px;max-width:48px;padding:${spacingHorizontalXS}}:host([icon-only][size='large']){min-width:56px;max-width:56px;padding:${spacingHorizontalS}}:host([size='large']){padding-top:18px;padding-inline:16px;padding-bottom:20px;font-size:${fontSizeBase400};line-height:${lineHeightBase400}}:host([size='large']) ::slotted([slot='description']){font-size:${fontSizeBase300}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    :host([appearance='primary']:not(:hover,:focus-visible,:disabled,[disabled-focusable]))
+      ::slotted([slot='description']){color:HighlightText}`));
 
 function buttonTemplate(options = {}) {
   return html`<template ?disabled="${x => x.disabled}" tabindex="${x => x.disabled ? null : x.tabIndex ?? 0}">${startSlotTemplate(options)}<span class="content" part="content"><slot ${slotted("defaultSlottedContent")}></slot><slot name="description"></slot></span>${endSlotTemplate(options)}</template>`;
@@ -7012,14 +7014,30 @@ const definition$v = Drawer.compose({
 
 definition$v.define(FluentDesignSystem.registry);
 
-class DrawerBody extends FASTElement {}
+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;
+  }
+}
 
 const styles$t = css`
   ${display("grid")}
   :host{box-sizing:border-box;grid-template-rows:min-content auto min-content;position:relative;height:100%;padding:${spacingHorizontalXL};max-height:100svh}.header{display:flex;justify-content:space-between;align-items:center;${typographySubtitle1Styles}}.footer{display:flex;justify-content:flex-start;gap:${spacingHorizontalM}}::slotted([slot='title']){font:inherit;padding:0;margin:0}`;
 
 function drawerBodyTemplate() {
-  return html`<div class="header" part="header"><slot name="title"></slot><slot name="close"></slot></div><div class="content" part="content"><slot></slot></div><div class="footer" part="footer"><slot name="footer"></slot></div>`;
+  return html`<div class="header" part="header"><slot name="title"></slot><slot name="close" @click="${(x, c) => x.clickHandler(c.event)}"></slot></div><div class="content" part="content"><slot></slot></div><div class="footer" part="footer"><slot name="footer"></slot></div>`;
 }
 const template$u = drawerBodyTemplate();