@fluentui/web-components 3.0.0-beta.54 → 3.0.0-beta.56

package/CHANGELOG.md

@@ -1,12 +1,31 @@
 # Change Log - @fluentui/web-components
 
-This log was last generated on Tue, 06 Aug 2024 04:07:00 GMT and should not be manually modified.
+This log was last generated on Wed, 14 Aug 2024 04:07:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [3.0.0-beta.56](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.56)
+
+Wed, 14 Aug 2024 04:07:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.55..@fluentui/web-components_v3.0.0-beta.56)
+
+### Changes
+
+- feat(web-components): add fluent-textarea component ([PR #32037](https://github.com/microsoft/fluentui/pull/32037) by machi@microsoft.com)
+- export BaseAnchor class ([PR #32295](https://github.com/microsoft/fluentui/pull/32295) by rupertdavid@microsoft.com)
+
+## [3.0.0-beta.55](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.55)
+
+Thu, 08 Aug 2024 04:07:16 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.54..@fluentui/web-components_v3.0.0-beta.55)
+
+### Changes
+
+- [chore]: [rating-display] move size, color and generate icons out of base class ([PR #32239](https://github.com/microsoft/fluentui/pull/32239) by jes@microsoft.com)
+
 ## [3.0.0-beta.54](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.54)
 
-Tue, 06 Aug 2024 04:07:00 GMT 
+Tue, 06 Aug 2024 04:07:08 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.53..@fluentui/web-components_v3.0.0-beta.54)
 
 ### Changes

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

@@ -1,5 +1,5 @@
 export { definition as AnchorButtonDefinition } from './anchor-button.definition.js';
-export { AnchorButton } from './anchor-button.js';
+export { BaseAnchor, AnchorButton } from './anchor-button.js';
 export { AnchorButtonAppearance, AnchorButtonShape, AnchorButtonSize, AnchorTarget } from './anchor-button.options.js';
 export type { AnchorButtonOptions } from './anchor-button.options.js';
 export { template as AnchorButtonTemplate } from './anchor-button.template.js';

package/dist/dts/helpers.tests.d.ts

@@ -1,3 +1,4 @@
+import { type ExpectMatcherState, type Locator } from '@playwright/test';
 /**
  * Returns a formatted URL for a given Storybook fixture.
  *
@@ -6,3 +7,24 @@
  * @returns - the local URL for the Storybook fixture iframe
  */
 export declare function fixtureURL(id?: string, args?: Record<string, any>): string;
+/**
+ * Evaluate whether an element has the given state or not on its `elementInternals` property.
+ *
+ * @param locator - The Playwright locator for the element.
+ * @param state - The name of the state.
+ * @param expected - Whether the given state is expected to exist.
+ * @param has - Whether the element is expected to have or not have the given state, defaults to `true`.
+ */
+declare function toHaveCustomState(this: ExpectMatcherState, locator: Locator, state: string, options?: {
+    timeout?: number;
+}): Promise<{
+    name: string;
+    message: () => string;
+    pass: boolean;
+    expected: boolean;
+    actual: any;
+}>;
+export declare const expect: import("@playwright/test").Expect<{
+    toHaveCustomState: typeof toHaveCustomState;
+}>;
+export {};

package/dist/dts/index-rollup.d.ts

@@ -32,6 +32,7 @@ import './tab-panel/define.js';
 import './tab/define.js';
 import './tabs/define.js';
 import './tablist/define.js';
+import './textarea/define.js';
 import './text-input/define.js';
 import './text/define.js';
 import './toggle-button/define.js';

package/dist/dts/index.d.ts

@@ -20,7 +20,7 @@ export type { SlottableInput } from './field/index.js';
 export { FluentDesignSystem } from './fluent-design-system.js';
 export { Image, ImageDefinition, ImageFit, ImageShape, ImageStyles, ImageTemplate } from './image/index.js';
 export { Label, LabelDefinition, LabelSize, LabelStyles, LabelTemplate, LabelWeight } from './label/index.js';
-export { AnchorButton, AnchorButtonAppearance, AnchorButtonDefinition, AnchorButtonShape, AnchorButtonSize, AnchorButtonTemplate, AnchorTarget, } from './anchor-button/index.js';
+export { BaseAnchor, AnchorButton, AnchorButtonAppearance, AnchorButtonDefinition, AnchorButtonShape, AnchorButtonSize, AnchorButtonTemplate, AnchorTarget, } from './anchor-button/index.js';
 export { MenuButton, MenuButtonAppearance, MenuButtonDefinition, MenuButtonShape, MenuButtonSize, MenuButtonStyles, MenuButtonTemplate, } from './menu-button/index.js';
 export type { MenuButtonOptions } from './menu-button/index.js';
 export { MenuItem, MenuItemDefinition, MenuItemRole, MenuItemStyles, MenuItemTemplate, roleForMenuItem, } from './menu-item/index.js';
@@ -33,7 +33,7 @@ export { BaseProgressBar, ProgressBar, ProgressBarDefinition, ProgressBarShape,
 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';
-export { RatingDisplay, RatingDisplayColor, RatingDisplayDefinition, RatingDisplaySize, RatingDisplayStyles, RatingDisplayTemplate, } from './rating-display/index.js';
+export { BaseRatingDisplay, RatingDisplay, RatingDisplayColor, RatingDisplayDefinition, RatingDisplaySize, RatingDisplayStyles, RatingDisplayTemplate, } from './rating-display/index.js';
 export { Slider, SliderDefinition, SliderMode, SliderOrientation, SliderSize, SliderStyles, SliderTemplate, } from './slider/index.js';
 export type { SliderConfiguration, SliderOptions } from './slider/index.js';
 export { BaseSpinner, Spinner, SpinnerAppearance, SpinnerDefinition, SpinnerSize, SpinnerStyles, SpinnerTemplate, } from './spinner/index.js';
@@ -46,6 +46,7 @@ export type { TabOptions } from './tab/index.js';
 export { Tabs, TabsAppearance, TabsDefinition, TabsOrientation, TabsSize, TabsStyles, TabsTemplate, } from './tabs/index.js';
 export { BaseTablist, Tablist, TablistAppearance, TablistDefinition, TablistOrientation, TablistSize, TablistStyles, TablistTemplate, } from './tablist/index.js';
 export type { TabsOptions } from './tabs/index.js';
+export { BaseTextArea, TextArea, TextAreaAppearance, TextAreaAutocomplete, TextAreaDefinition, TextAreaResize, TextAreaSize, TextAreaStyles, TextAreaTemplate, } from './textarea/index.js';
 export { BaseTextInput, TextInput, TextInputAppearance, TextInputControlSize, TextInputDefinition, TextInputStyles, TextInputTemplate, TextInputType, } from './text-input/index.js';
 export type { TextInputOptions } from './text-input/index.js';
 export { Text, TextAlign, TextDefinition, TextFont, TextSize, TextStyles, TextTemplate, TextWeight, } from './text/index.js';

package/dist/dts/rating-display/index.d.ts

@@ -1,4 +1,4 @@
-export { RatingDisplay } from './rating-display.js';
+export { BaseRatingDisplay, RatingDisplay } from './rating-display.js';
 export { RatingDisplayColor, RatingDisplaySize } from './rating-display.options.js';
 export { template as RatingDisplayTemplate } from './rating-display.template.js';
 export { styles as RatingDisplayStyles } from './rating-display.styles.js';

package/dist/dts/rating-display/rating-display.d.ts

@@ -4,7 +4,7 @@ import { RatingDisplayColor, RatingDisplaySize } from './rating-display.options.
  * The base class used for constructing a fluent-rating-display custom element
  * @public
  */
-export declare class RatingDisplay extends FASTElement {
+export declare class BaseRatingDisplay extends FASTElement {
     /**
      * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
      *
@@ -12,47 +12,81 @@ export declare class RatingDisplay extends FASTElement {
      */
     elementInternals: ElementInternals;
     /**
-     * The color of the rating display icons.
+     * The number of ratings.
      *
      * @public
-     * @default `marigold`
      * @remarks
-     * HTML Attribute: `color`
+     * HTML Attribute: `count`
      */
-    color?: RatingDisplayColor;
+    count?: number;
     /**
-     * Handles changes to the color attribute.
+     * The maximum possible value of the rating.
+     * This attribute determines the number of icons displayed.
+     * Must be a whole number greater than 1.
      *
-     * @param prev - The previous state
-     * @param next - The next state
+     * @public
+     * @remarks
+     * HTML Attribute: `max`
      */
-    colorChanged(prev: RatingDisplayColor | undefined, next: RatingDisplayColor | undefined): void;
+    max?: number;
     /**
-     * Renders a single filled icon with a label next to it.
+     * The value of the rating.
      *
      * @public
      * @remarks
-     * HTML Attribute: `compact`
+     * HTML Attribute: `value`
      */
-    compact: boolean;
+    value?: number;
+    private intlNumberFormatter;
+    constructor();
     /**
-     * The number of ratings.
+     * Returns "count" as string, formatted according to the locale.
      *
-     * @public
-     * @remarks
-     * HTML Attribute: `count`
+     * @internal
      */
-    count?: number;
+    get formattedCount(): string;
     /**
-     * The maximum possible value of the rating.
-     * This attribute determines the number of icons displayed.
-     * Must be a whole number greater than 1.
+     * Gets the selected value
+     *
+     * @protected
+     */
+    protected getSelectedValue(): number;
+    /**
+     * Gets the maximum icons to render
+     *
+     * @protected
+     */
+    protected getMaxIcons(): number;
+    /**
+     * Generates the icon SVG elements based on the "max" attribute.
+     *
+     * @internal
+     */
+    generateIcons(): string;
+}
+/**
+ * A Rating Dislpay Custom HTML Element.
+ * Based on BaseRatingDisplay and includes style and layout specific attributes
+ *
+ * @public
+ */
+export declare class RatingDisplay extends BaseRatingDisplay {
+    /**
+     * The color of the rating display icons.
      *
      * @public
+     * @default `marigold`
      * @remarks
-     * HTML Attribute: `max`
+     * HTML Attribute: `color`
      */
-    max?: number;
+    color?: RatingDisplayColor;
+    /**
+     * Handles changes to the color attribute.
+     *
+     * @param prev - The previous state
+     * @param next - The next state
+     */
+    colorChanged(prev: RatingDisplayColor | undefined, next: RatingDisplayColor | undefined): void;
     /**
      * The size of the component.
      *
@@ -70,25 +104,23 @@ export declare class RatingDisplay extends FASTElement {
      */
     sizeChanged(prev: RatingDisplaySize | undefined, next: RatingDisplaySize | undefined): void;
     /**
-     * The value of the rating.
+     * Renders a single filled icon with a label next to it.
      *
      * @public
      * @remarks
-     * HTML Attribute: `value`
+     * HTML Attribute: `compact`
      */
-    value?: number;
-    private intlNumberFormatter;
-    constructor();
+    compact: boolean;
     /**
-     * Returns "count" as string, formatted according to the locale.
+     * Overrides the selected value and returns 1 if compact is true.
      *
-     * @internal
+     * @override
      */
-    get formattedCount(): string;
+    protected getSelectedValue(): number;
     /**
-     * Generates the icon SVG elements based on the "max" attribute.
+     * Overrides the maximum icons and returns a max of 1 if compact is true.
      *
-     * @internal
+     * @override
      */
-    generateIcons(): string;
+    protected getMaxIcons(): number;
 }

package/dist/dts/slider/slider.d.ts

@@ -7,7 +7,7 @@ import { SliderConfiguration, SliderMode, SliderSize } from './slider.options.js
  * @slot thumb - The slot for a custom thumb element.
  * @csspart thumb-container - The container element of the thumb.
  * @csspart track-container - The container element of the track.
- * @fire change - Fires a custom 'change' event when the value changes.
+ * @fires change - Fires a custom 'change' event when the value changes.
  *
  * @public
  */

package/dist/dts/styles/states/index.d.ts

@@ -218,3 +218,39 @@ export declare const expandedState: import("@microsoft/fast-element").CSSDirecti
  * @public
  */
 export declare const blockState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `resize` state. This indicates the element is resizable.
+ * @public
+ */
+export declare const resizeState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `resize-horizontal` state.
+ * @public
+ */
+export declare const resizeHorizontalState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `resize-vertical` state.
+ * @public
+ */
+export declare const resizeVerticalState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `resize-both` state.
+ * @public
+ */
+export declare const resizeBothState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `auto-resize` state.
+ * @public
+ */
+export declare const autoResizeState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `display-shadow` state.
+ * @public
+ */
+export declare const displayShadowState: import("@microsoft/fast-element").CSSDirective;
+export declare const userInvalidState: import("@microsoft/fast-element").CSSDirective;
+/**
+ * Selector for the `user-valid` state.
+ * @public
+ */
+export declare const userValidState: import("@microsoft/fast-element").CSSDirective;

package/dist/dts/textarea/define.d.ts

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

package/dist/dts/textarea/index.d.ts

@@ -0,0 +1,5 @@
+export { definition as TextAreaDefinition } from './textarea.definition.js';
+export { BaseTextArea, TextArea } from './textarea.js';
+export { TextAreaAppearance, TextAreaAppearancesForDisplayShadow, TextAreaAutocomplete, TextAreaResizableResize, TextAreaHorizontallyResizableResize, TextAreaVerticallyResizableResize, TextAreaResize, TextAreaSize, } from './textarea.options.js';
+export { styles as TextAreaStyles } from './textarea.styles.js';
+export { template as TextAreaTemplate } from './textarea.template.js';

package/dist/dts/textarea/textarea.bench.d.ts

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