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

package/CHANGELOG.md

@@ -1,12 +1,32 @@
 # 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 Wed, 12 Jun 2024 04:06:02 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [3.0.0-beta.28](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.28)
+
+Wed, 12 Jun 2024 04:06:02 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.27..@fluentui/web-components_v3.0.0-beta.28)
+
+### Changes
+
+- refactor anchor-button to use ElementInternals, remove disabled and disabledFocusable ([PR #31653](https://github.com/microsoft/fluentui/pull/31653) by 13071055+chrisdholt@users.noreply.github.com)
+- refactor progress bar to use ElementInternals ([PR #31652](https://github.com/microsoft/fluentui/pull/31652) by 13071055+chrisdholt@users.noreply.github.com)
+
+## [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:29 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/anchor-button/anchor-button.d.ts

@@ -1,7 +1,7 @@
 import { FASTElement } from '@microsoft/fast-element';
-import { ARIAGlobalStatesAndProperties, StartEnd } from '../patterns/index.js';
+import { StartEnd } from '../patterns/index.js';
 import type { StartEndOptions } from '../patterns/index.js';
-import type { AnchorButtonAppearance, AnchorButtonShape, AnchorButtonSize, AnchorTarget } from './anchor-button.options.js';
+import { type AnchorButtonAppearance, type AnchorButtonShape, type AnchorButtonSize, type AnchorTarget } from './anchor-button.options.js';
 /**
  * Anchor configuration options
  * @public
@@ -21,78 +21,95 @@ export type AnchorOptions = StartEndOptions<AnchorButton>;
  */
 export declare class AnchorButton extends FASTElement {
     /**
-     * Prompts the user to save the linked URL. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element } for more information.
-     * @public
-     * @remarks
-     * HTML Attribute: download
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
      */
-    download: string;
+    protected elementInternals: ElementInternals;
     /**
-     * The URL the hyperlink references. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element } for more information.
-     * @public
-     * @remarks
-     * HTML Attribute: href
+     * The proxy anchor element
+     * @internal
      */
-    href: string;
+    private internalProxyAnchor;
     /**
-     * Hints at the language of the referenced resource. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element } for more information.
+     * Prompts the user to save the linked URL.
+     *
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/a#download | `download`} attribute
+     *
      * @public
      * @remarks
-     * HTML Attribute: hreflang
+     * HTML Attribute: `download`
      */
-    hreflang: string;
+    download?: string;
     /**
-     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element } for more information.
+     * The URL the hyperlink references.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/a#href | `href`} attribute
+     *
      * @public
      * @remarks
-     * HTML Attribute: ping
+     * HTML Attribute: `href`
      */
-    ping: string;
+    href?: string;
     /**
-     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element } for more information.
+     * Hints at the language of the referenced resource.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/a#hreflang | `hreflang`} attribute
+     *
      * @public
      * @remarks
-     * HTML Attribute: referrerpolicy
+     * HTML Attribute: `hreflang`
      */
-    referrerpolicy: string;
+    hreflang?: string;
     /**
-     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element } for more information.
+     * The ping attribute.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/a#ping | `ping`} attribute
+     *
      * @public
      * @remarks
-     * HTML Attribute: rel
+     * HTML Attribute: `ping`
      */
-    rel: string;
+    ping?: string;
     /**
-     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element } for more information.
+     * The referrerpolicy attribute.
+     * See The {@link https://developer.mozilla.org/docs/Web/HTML/Element/a#referrerpolicy | `referrerpolicy`} attribute
+     *
      * @public
      * @remarks
-     * HTML Attribute: target
+     * HTML Attribute: `referrerpolicy`
      */
-    target: AnchorTarget;
+    referrerpolicy?: string;
     /**
-     * See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element } for more information.
+     * The rel attribute.
+     * See The {@link https://developer.mozilla.org/docs/Web/HTML/Element/a#rel | `rel`} attribute
+     *
      * @public
      * @remarks
-     * HTML Attribute: type
+     * HTML Attribute: `rel`
      */
-    type: string;
+    rel: string;
     /**
+     * The target attribute.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/a#target | `target`} attribute
      *
-     * Default slotted content
-     *
-     * @internal
+     * @public
+     * @remarks
+     * HTML Attribute: `target`
      */
-    defaultSlottedContent: HTMLElement[];
+    target?: AnchorTarget;
     /**
-     * References the root element
+     * The type attribute.
+     * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/a#type | `type`} attribute
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `type`
      */
-    control: HTMLAnchorElement;
+    type?: string;
     /**
      * The appearance the anchor button should have.
      *
      * @public
      * @remarks
-     * HTML Attribute: appearance
+     * HTML Attribute: `appearance`
      */
     appearance?: AnchorButtonAppearance | undefined;
     /**
@@ -100,7 +117,7 @@ export declare class AnchorButton extends FASTElement {
      *
      * @public
      * @remarks
-     * HTML Attribute: shape
+     * HTML Attribute: `shape`
      */
     shape?: AnchorButtonShape | undefined;
     /**
@@ -108,7 +125,7 @@ export declare class AnchorButton extends FASTElement {
      *
      * @public
      * @remarks
-     * HTML Attribute: size
+     * HTML Attribute: `size`
      */
     size?: AnchorButtonSize;
     /**
@@ -116,55 +133,42 @@ export declare class AnchorButton extends FASTElement {
      *
      * @public
      * @remarks
-     * HTML Attribute: icon-only
+     * HTML Attribute: `icon-only`
      */
     iconOnly: boolean;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     /**
-     * The anchor button is disabled
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: disabled-focusable
+     * Handles changes to observable properties
+     * @internal
+     * @param source
+     * @param propertyName
      */
-    disabled?: boolean;
-    protected disabledChanged(prev: boolean, next: boolean): void;
+    handleChange(source: any, propertyName: string): void;
     /**
-     * The anchor button is disabled but focusable
+     * Handles the anchor click event.
      *
-     * @public
-     * @remarks
-     * HTML Attribute: disabled-focusable
+     * @param e - The event object
+     * @internal
      */
-    disabledFocusable?: boolean;
-    protected disabledFocusableChanged(prev: boolean, next: boolean): void;
+    clickHandler(): boolean;
     /**
-     * Prevents disabledFocusable click events
+     * Handles keypress events for the anchor.
+     *
+     * @param e - the keyboard event
+     * @returns - the return value of the click handler
+     * @public
      */
-    private handleDisabledFocusableClick;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-}
-/**
- * Includes ARIA states and properties relating to the ARIA link role
- *
- * @public
- */
-export declare class DelegatesARIALink {
+    keypressHandler(e: KeyboardEvent): boolean | void;
     /**
-     * See {@link https://www.w3.org/WAI/PF/aria/roles#link} for more information
-     * @public
-     * @remarks
-     * HTML Attribute: aria-expanded
+     * A method for updating proxy attributes when attributes have changed
+     * @internal
+     * @param attribute
+     * @param value
      */
-    ariaExpanded: 'true' | 'false' | string | null;
-}
-/**
- * Mark internal because exporting class and interface of the same name
- * confuses API documenter.
- * TODO: https://github.com/microsoft/fast/issues/3317
- * @internal
- */
-export interface DelegatesARIALink extends ARIAGlobalStatesAndProperties {
+    private handleProxyAttributeChange;
+    private createProxyElement;
 }
 /**
  * Mark internal because exporting class and interface of the same name
@@ -172,5 +176,5 @@ export interface DelegatesARIALink extends ARIAGlobalStatesAndProperties {
  * TODO: https://github.com/microsoft/fast/issues/3317
  * @internal
  */
-export interface AnchorButton extends StartEnd, DelegatesARIALink {
+export interface AnchorButton extends StartEnd {
 }

package/dist/dts/anchor-button/anchor-button.options.d.ts

@@ -62,3 +62,24 @@ export declare const AnchorTarget: {
  * @public
  */
 export type AnchorTarget = ValuesOf<typeof AnchorTarget>;
+/**
+ * Reflected anchor attributes.
+ *
+ * @public
+ */
+export declare const AnchorAttributes: {
+    readonly download: "download";
+    readonly href: "href";
+    readonly hreflang: "hreflang";
+    readonly ping: "ping";
+    readonly referrerpolicy: "referrerpolicy";
+    readonly rel: "rel";
+    readonly target: "target";
+    readonly type: "type";
+};
+/**
+ * Type for anchor attributes.
+ *
+ * @public
+ */
+export type AnchorAttributes = ValuesOf<typeof AnchorAttributes>;

package/dist/dts/button/button.styles.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @internal
+ */
+export declare const baseButtonStyles: import("@microsoft/fast-element").ElementStyles;
 /**
  * The styles for the Button component.
  *

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/dts/index.d.ts

@@ -26,7 +26,6 @@ export type { MenuItemColumnCount, MenuItemOptions } from './menu-item/index.js'
 export { MenuList, MenuListDefinition, MenuListStyles, MenuListTemplate } from './menu-list/index.js';
 export { Menu, MenuDefinition, MenuStyles, MenuTemplate } from './menu/index.js';
 export { ProgressBar, ProgressBarDefinition, ProgressBarShape, ProgressBarStyles, ProgressBarTemplate, ProgressBarThickness, ProgressBarValidationState, } from './progress-bar/index.js';
-export type { ProgressOptions } from './progress-bar/index.js';
 export { RadioGroup, RadioGroupDefinition, RadioGroupOrientation, RadioGroupStyles, RadioGroupTemplate, } from './radio-group/index.js';
 export { Radio, RadioDefinition, RadioStyles, RadioTemplate } from './radio/index.js';
 export type { RadioControl, RadioOptions } from './radio/index.js';

package/dist/dts/progress-bar/index.d.ts

@@ -1,6 +1,5 @@
 export { definition as ProgressBarDefinition } from './progress-bar.definition.js';
 export { ProgressBar } from './progress-bar.js';
 export { ProgressBarShape, ProgressBarThickness, ProgressBarValidationState } from './progress-bar.options.js';
-export type { ProgressOptions } from './progress-bar.options.js';
 export { styles as ProgressBarStyles } from './progress-bar.styles.js';
 export { template as ProgressBarTemplate } from './progress-bar.template.js';

package/dist/dts/progress-bar/progress-bar.d.ts

@@ -1,37 +1,80 @@
-import { BaseProgress } from './base-progress.js';
+import { FASTElement } from '@microsoft/fast-element';
 import { ProgressBarShape, ProgressBarThickness, ProgressBarValidationState } from './progress-bar.options.js';
 /**
  * An Progress HTML Element.
  * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
  *
- * @slot indeterminate - The slot for a custom indeterminate indicator
- * @csspart progress - Represents the progress element
- * @csspart determinate - The determinate indicator
- * @csspart indeterminate - The indeterminate indicator
- *
  * @public
  */
-export declare class ProgressBar extends BaseProgress {
+export declare class ProgressBar extends FASTElement {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
     /**
      * The thickness of the progress bar
      *
      * @public
-     * @remarks
-     * HTML Attribute: thickness
+     * HTML Attribute: `thickness`
      */
     thickness?: ProgressBarThickness;
     /**
      * The shape of the progress bar
      * @public
-     * @remarks
-     * HTML Attribute: shape
+     * HTML Attribute: `shape`
      */
     shape?: ProgressBarShape;
     /**
      * The validation state of the progress bar
      * @public
-     * @remarks
-     * HTML Attribute: validation-state
+     * HTML Attribute: `validation-state`
      */
     validationState: ProgressBarValidationState | null;
+    /**
+     * The value of the progress
+     * @internal
+     * HTML Attribute: `value`
+     */
+    value?: number;
+    /**
+     * Updates the percent complete when the `value` property changes.
+     *
+     * @internal
+     */
+    protected valueChanged(prev: number | undefined, next: number | undefined): void;
+    /**
+     * The minimum value
+     * @internal
+     * HTML Attribute: `min`
+     */
+    min?: number;
+    /**
+     * Updates the percent complete when the `min` property changes.
+     *
+     * @param prev - The previous min value
+     * @param next - The current min value
+     */
+    protected minChanged(prev: number | undefined, next: number | undefined): void;
+    /**
+     * The maximum value
+     * @internal
+     * HTML Attribute: `max`
+     */
+    max?: number;
+    /**
+     * Updates the percent complete when the `max` property changes.
+     *
+     * @param prev - The previous max value
+     * @param next - The current max value
+     * @internal
+     */
+    protected maxChanged(prev: number | undefined, next: number | undefined): void;
+    /**
+     * Indicates progress in %
+     * @internal
+     */
+    get percentComplete(): number;
+    constructor();
 }

package/dist/dts/progress-bar/progress-bar.options.d.ts

@@ -1,5 +1,4 @@
-import type { StaticallyComposableHTML, ValuesOf } from '../utils/index.js';
-import { ProgressBar } from './progress-bar.js';
+import type { ValuesOf } from '../utils/index.js';
 /**
  * ProgressBarThickness Constants
  * @public
@@ -40,11 +39,3 @@ export declare const ProgressBarValidationState: {
  * @public
  */
 export type ProgressBarValidationState = ValuesOf<typeof ProgressBarValidationState>;
-/**
- * Progress configuration options
- * @public
- */
-export type ProgressOptions = {
-    indeterminateIndicator1?: StaticallyComposableHTML<ProgressBar>;
-    indeterminateIndicator2?: StaticallyComposableHTML<ProgressBar>;
-};

package/dist/dts/progress-bar/progress-bar.template.d.ts

@@ -1,5 +1,4 @@
 import type { ElementViewTemplate } from '@microsoft/fast-element';
-import type { ProgressOptions } from './progress-bar.options.js';
 import type { ProgressBar } from './progress-bar.js';
-export declare function progressTemplate<T extends ProgressBar>(options?: ProgressOptions): ElementViewTemplate<T>;
+export declare function progressTemplate<T extends ProgressBar>(): ElementViewTemplate<T>;
 export declare const template: ElementViewTemplate<ProgressBar>;

package/dist/esm/anchor-button/anchor-button.definition.js

@@ -11,8 +11,5 @@ export const definition = AnchorButton.compose({
     name: `${FluentDesignSystem.prefix}-anchor-button`,
     template,
     styles,
-    shadowOptions: {
-        delegatesFocus: true,
-    },
 });
 //# sourceMappingURL=anchor-button.definition.js.map

package/dist/esm/anchor-button/anchor-button.definition.js.map

@@ -1 +1 @@
-{"version":3,"file":"anchor-button.definition.js","sourceRoot":"","sources":["../../../src/anchor-button/anchor-button.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,OAAO,CAAC;IAC7C,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,gBAAgB;IAClD,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACb,cAAc,EAAE,IAAI;KACrB;CACF,CAAC,CAAC"}
+{"version":3,"file":"anchor-button.definition.js","sourceRoot":"","sources":["../../../src/anchor-button/anchor-button.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,OAAO,CAAC;IAC7C,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,gBAAgB;IAClD,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}