@fluentui/web-components 3.0.0-beta.121 → 3.0.0-beta.122

package/dist/esm/rating-display/rating-display.styles.js

@@ -1,6 +1,8 @@
 import { css } from '@microsoft/fast-element';
 import { display, forcedColorsStylesheetBehavior } from '../utils/index.js';
 import { colorBrandBackground2, colorBrandForeground1, colorNeutralBackground6, colorNeutralForeground1, colorPaletteMarigoldBackground2, colorPaletteMarigoldBorderActive, fontFamilyBase, fontSizeBase200, fontSizeBase300, fontWeightSemibold, lineHeightBase200, lineHeightBase300, spacingHorizontalSNudge, spacingHorizontalXS, spacingHorizontalXXS, } from '../theme/design-tokens.js';
+import { svgToDataURI } from './rating-display.base.js';
+import { defaultIconFilled, defaultIconOutlined } from './rating-display.template.js';
 /**
  * The styles for the Rating Display component.
  *
@@ -10,9 +12,16 @@ export const styles = css `
   ${display('inline-flex')}
 
   :host {
-    --icon-size: 16px;
-    --icon-color-filled: ${colorPaletteMarigoldBorderActive};
-    --icon-color-empty: ${colorPaletteMarigoldBackground2};
+    --_icon-size: 16px;
+    --_icon-gradient-degree: 90deg;
+    --_icon-color-value: ${colorPaletteMarigoldBorderActive};
+    --_icon-color-empty: ${colorPaletteMarigoldBackground2};
+    --_default-value: 0;
+    --_default-max: 5;
+    --_mask-image-filled: url(${svgToDataURI(defaultIconFilled)});
+    --_mask-image-outlined: url(${svgToDataURI(defaultIconOutlined)});
+    --_mask-position-x: left;
+
     align-items: center;
     color: ${colorNeutralForeground1};
     font-family: ${fontFamilyBase};
@@ -22,12 +31,17 @@ export const styles = css `
     user-select: none;
   }
 
+  :host(:dir(rtl)) {
+    --_icon-gradient-degree: -90deg;
+    --_mask-position-x: right;
+  }
+
   :host([size='small']) {
-    --icon-size: 12px;
+    --_icon-size: 12px;
   }
 
   :host([size='large']) {
-    --icon-size: 20px;
+    --_icon-size: 20px;
     font-size: ${fontSizeBase300};
     line-height: ${lineHeightBase300};
   }
@@ -36,40 +50,48 @@ export const styles = css `
     display: none;
   }
 
-  svg {
-    width: var(--icon-size);
-    height: var(--icon-size);
-    fill: var(--icon-color-filled);
-    margin-inline-end: ${spacingHorizontalXXS};
-  }
-
-  svg:nth-child(odd) {
-    clip-path: inset(0 50% 0 0);
-    margin-inline-end: calc(0px - var(--icon-size));
+  :host([color='neutral']) {
+    --_icon-color-value: ${colorNeutralForeground1};
+    --_icon-color-empty: ${colorNeutralBackground6};
   }
 
-  :host([color='neutral']) svg {
-    --icon-color-filled: ${colorNeutralForeground1};
+  :host([color='brand']) {
+    --_icon-color-value: ${colorBrandForeground1};
+    --_icon-color-empty: ${colorBrandBackground2};
   }
 
-  :host([color='brand']) svg {
-    --icon-color-filled: ${colorBrandForeground1};
+  @supports (width: attr(value type(<number>))) {
+    :host {
+      --_attr-value: attr(value type(<number>));
+      --_attr-max: attr(max type(<number>));
+    }
   }
 
-  :host(:is([value^='-'], [value='0'])) svg,
-  :host(:not([value])) svg,
-  svg[selected] ~ svg {
-    fill: var(--icon-color-empty);
+  :host([compact]) .display {
+    --_max: 1;
   }
 
-  :host([color='neutral']:is([value^='-'], [value='0'], :not([value]))) svg,
-  :host([color='neutral']) svg[selected] ~ svg {
-    --icon-color-empty: ${colorNeutralBackground6};
-  }
+  .display {
+    --_value: max(0, round(var(--_attr-value, var(--_default-value)) * 2) / 2);
+    --_max: max(1, var(--_attr-max, var(--_default-max)));
+    --_mask-inline-size: calc(var(--_icon-size) + ${spacingHorizontalXXS});
+    --_icon-gradient-stop-visual-adjustment: 0px;
+    --_icon-gradient-stop: calc(
+      var(--_mask-inline-size) * var(--_value) - var(--_icon-gradient-stop-visual-adjustment)
+    );
 
-  :host([color='brand']:is([value^='-'], [value='0'], :not([value]))) svg,
-  :host([color='brand']) svg[selected] ~ svg {
-    --icon-color-empty: ${colorBrandBackground2};
+    background-image: linear-gradient(
+      var(--_icon-gradient-degree),
+      var(--_icon-color-value) var(--_icon-gradient-stop),
+      var(--_icon-color-empty) calc(var(--_icon-gradient-stop) + 0.5px)
+    );
+    block-size: var(--_icon-size);
+    display: grid;
+    inline-size: calc(var(--_max) * var(--_mask-inline-size) - ${spacingHorizontalXXS} / 2);
+    mask-image: var(--_mask-image-filled);
+    mask-repeat: repeat no-repeat;
+    mask-size: var(--_mask-inline-size) var(--_icon-size);
+    mask-position: var(--_mask-position-x) center;
   }
 
   .value-label,
@@ -109,15 +131,20 @@ export const styles = css `
     margin-inline: ${spacingHorizontalSNudge};
   }
 `.withBehaviors(forcedColorsStylesheetBehavior(css `
-    :host([color]) svg {
-      fill: CanvasText;
+    .display {
+      --_icon-color-value: CanvasText;
+      --_icon-color-empty: Canvas;
+      --_icon-gradient-stop-visual-adjustment: 0.5px;
+
+      forced-color-adjust: none;
     }
 
-    :host([color]:is([value^='-'], [value='0'])) svg,
-    :host(:not([value])) svg,
-    :host([color]) svg[selected] ~ svg {
-      fill: Canvas;
-      stroke: CanvasText;
+    .display::before {
+      background-color: var(--_icon-color-value);
+      content: '';
+      grid-area: 1 / 1 / -1 / -1;
+      mask: inherit;
+      mask-image: var(--_mask-image-outlined);
     }
   `));
 //# sourceMappingURL=rating-display.styles.js.map

package/dist/esm/rating-display/rating-display.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"rating-display.styles.js","sourceRoot":"","sources":["../../../src/rating-display/rating-display.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,qBAAqB,EACrB,uBAAuB,EACvB,uBAAuB,EACvB,+BAA+B,EAC/B,gCAAgC,EAChC,cAAc,EACd,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,uBAAuB,EACvB,mBAAmB,EACnB,oBAAoB,GACrB,MAAM,2BAA2B,CAAC;AAEnC;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;2BAIC,gCAAgC;0BACjC,+BAA+B;;aAE5C,uBAAuB;mBACjB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;;;;;;;;;;;iBAWnB,eAAe;mBACb,iBAAiB;;;;;;;;;;;yBAWX,oBAAoB;;;;;;;;;2BASlB,uBAAuB;;;;2BAIvB,qBAAqB;;;;;;;;;;;0BAWtB,uBAAuB;;;;;0BAKvB,qBAAqB;;;;;;2BAMpB,mBAAmB;mBAC3B,kBAAkB;;;;;2BAKV,oBAAoB;;;;;2BAKpB,uBAAuB;;;;;;;;;;qBAU7B,mBAAmB;;;;;qBAKnB,oBAAoB;;;;;qBAKpB,uBAAuB;;CAE3C,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;;;GAWjC,CAAC,CACH,CAAC"}
+{"version":3,"file":"rating-display.styles.js","sourceRoot":"","sources":["../../../src/rating-display/rating-display.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,qBAAqB,EACrB,uBAAuB,EACvB,uBAAuB,EACvB,+BAA+B,EAC/B,gCAAgC,EAChC,cAAc,EACd,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,uBAAuB,EACvB,mBAAmB,EACnB,oBAAoB,GACrB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAEtF;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;;2BAKC,gCAAgC;2BAChC,+BAA+B;;;gCAG1B,YAAY,CAAC,iBAAiB,CAAC;kCAC7B,YAAY,CAAC,mBAAmB,CAAC;;;;aAItD,uBAAuB;mBACjB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;;;;;;;;;;;;;;;;iBAgBnB,eAAe;mBACb,iBAAiB;;;;;;;;2BAQT,uBAAuB;2BACvB,uBAAuB;;;;2BAIvB,qBAAqB;2BACrB,qBAAqB;;;;;;;;;;;;;;;;;oDAiBI,oBAAoB;;;;;;;;;;;;;iEAaP,oBAAoB;;;;;;;;;;2BAU1D,mBAAmB;mBAC3B,kBAAkB;;;;;2BAKV,oBAAoB;;;;;2BAKpB,uBAAuB;;;;;;;;;;qBAU7B,mBAAmB;;;;;qBAKnB,oBAAoB;;;;;qBAKpB,uBAAuB;;CAE3C,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;GAgBjC,CAAC,CACH,CAAC"}

package/dist/esm/rating-display/rating-display.template.d.ts

@@ -1,5 +1,8 @@
 import { type ElementViewTemplate } from '@microsoft/fast-element';
 import type { RatingDisplay } from './rating-display.js';
+export declare const defaultIconPath = "<path d=\"M5.28347 1.54605C5.57692 0.951448 6.42479 0.951449 6.71825 1.54605L7.82997 3.79866L10.3159 4.15988C10.9721 4.25523 11.2341 5.0616 10.7592 5.52443L8.96043 7.27785L9.38507 9.7537C9.49716 10.4072 8.81122 10.9056 8.22431 10.597L6.00086 9.4281L3.7774 10.597C3.19049 10.9056 2.50455 10.4072 2.61664 9.7537L3.04128 7.27784L1.24246 5.52443C0.767651 5.0616 1.02966 4.25523 1.68584 4.15988L4.17174 3.79865L5.28347 1.54605Z\" />";
+export declare const defaultIconFilled = "\n<svg viewBox=\"0 0 12 12\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.28347 1.54605C5.57692 0.951448 6.42479 0.951449 6.71825 1.54605L7.82997 3.79866L10.3159 4.15988C10.9721 4.25523 11.2341 5.0616 10.7592 5.52443L8.96043 7.27785L9.38507 9.7537C9.49716 10.4072 8.81122 10.9056 8.22431 10.597L6.00086 9.4281L3.7774 10.597C3.19049 10.9056 2.50455 10.4072 2.61664 9.7537L3.04128 7.27784L1.24246 5.52443C0.767651 5.0616 1.02966 4.25523 1.68584 4.15988L4.17174 3.79865L5.28347 1.54605Z\" /></svg>\n";
+export declare const defaultIconOutlined = "\n<svg viewBox=\"0 0 12 12\" xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\" stroke=\"black\" stroke-width=\"2\"\n><path d=\"M5.28347 1.54605C5.57692 0.951448 6.42479 0.951449 6.71825 1.54605L7.82997 3.79866L10.3159 4.15988C10.9721 4.25523 11.2341 5.0616 10.7592 5.52443L8.96043 7.27785L9.38507 9.7537C9.49716 10.4072 8.81122 10.9056 8.22431 10.597L6.00086 9.4281L3.7774 10.597C3.19049 10.9056 2.50455 10.4072 2.61664 9.7537L3.04128 7.27784L1.24246 5.52443C0.767651 5.0616 1.02966 4.25523 1.68584 4.15988L4.17174 3.79865L5.28347 1.54605Z\" /></svg>\n";
 /**
  * Generates a template for the Rating Display component.
  *

package/dist/esm/rating-display/rating-display.template.js

@@ -1,16 +1,12 @@
-import { elements, html, slotted } from '@microsoft/fast-element';
-import { staticallyCompose } from '../utils/template-helpers.js';
-/**
- * Reusable star icon symbol
- */
-const star = html `
-  <svg xmlns="http://www.w3.org/2000/svg" style="display: none">
-    <symbol id="star">
-      <path
-        d="M9.10433 2.89874C9.47114 2.15549 10.531 2.1555 10.8978 2.89874L12.8282 6.81024L17.1448 7.43748C17.9651 7.55666 18.2926 8.56464 17.699 9.14317L14.5755 12.1878L15.3129 16.487C15.453 17.3039 14.5956 17.9269 13.8619 17.5412L10.0011 15.5114L6.14018 17.5412C5.40655 17.9269 4.54913 17.3039 4.68924 16.487L5.4266 12.1878L2.30308 9.14317C1.70956 8.56463 2.03708 7.55666 2.8573 7.43748L7.17389 6.81024L9.10433 2.89874Z"
-      />
-    </symbol>
-  </svg>
+import { html, ref } from '@microsoft/fast-element';
+export const defaultIconPath = `<path d="M5.28347 1.54605C5.57692 0.951448 6.42479 0.951449 6.71825 1.54605L7.82997 3.79866L10.3159 4.15988C10.9721 4.25523 11.2341 5.0616 10.7592 5.52443L8.96043 7.27785L9.38507 9.7537C9.49716 10.4072 8.81122 10.9056 8.22431 10.597L6.00086 9.4281L3.7774 10.597C3.19049 10.9056 2.50455 10.4072 2.61664 9.7537L3.04128 7.27784L1.24246 5.52443C0.767651 5.0616 1.02966 4.25523 1.68584 4.15988L4.17174 3.79865L5.28347 1.54605Z" />`;
+export const defaultIconFilled = `
+<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">${defaultIconPath}</svg>
+`;
+export const defaultIconOutlined = `
+<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"
+    fill="none" stroke="black" stroke-width="2"
+>${defaultIconPath}</svg>
 `;
 /**
  * Generates a template for the Rating Display component.
@@ -19,8 +15,8 @@ const star = html `
  */
 export function ratingDisplayTemplate() {
     return html `
-    ${x => html `${staticallyCompose(x.generateIcons())}`}
-    <slot name="icon" ${slotted({ property: 'slottedIcon', filter: elements('svg') })}>${star}</slot>
+    <div ${ref('display')} class="display" aria-hidden="true"></div>
+    <slot name="icon" ${ref('iconSlot')} @slotchange="${x => x.handleSlotChange()}"></slot>
     <slot name="value"><span class="value-label" aria-hidden="true">${x => x.value}</span></slot>
     <slot name="count"><span class="count-label" aria-hidden="true">${x => x.formattedCount}</span></slot>
   `;

package/dist/esm/rating-display/rating-display.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"rating-display.template.js","sourceRoot":"","sources":["../../../src/rating-display/rating-display.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAA4B,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAC5F,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAGjE;;GAEG;AACH,MAAM,IAAI,GAAG,IAAI,CAAA;;;;;;;;CAQhB,CAAC;AAEF;;;;GAIG;AACH,MAAM,UAAU,qBAAqB;IACnC,OAAO,IAAI,CAAG;MACV,CAAC,CAAC,EAAE,CAAC,IAAI,CAAA,GAAG,iBAAiB,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC,EAAE;wBAChC,OAAO,CAAC,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,EAAE,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,IAAI;sEACvB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;sEACZ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;GACxF,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAuC,qBAAqB,EAAE,CAAC"}
+{"version":3,"file":"rating-display.template.js","sourceRoot":"","sources":["../../../src/rating-display/rating-display.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAG9E,MAAM,CAAC,MAAM,eAAe,GAAG,2aAA2a,CAAC;AAE3c,MAAM,CAAC,MAAM,iBAAiB,GAAG;8DAC6B,eAAe;CAC5E,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG;;;GAGhC,eAAe;CACjB,CAAC;AAEF;;;;GAIG;AACH,MAAM,UAAU,qBAAqB;IACnC,OAAO,IAAI,CAAG;WACL,GAAG,CAAC,SAAS,CAAC;wBACD,GAAG,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB,EAAE;sEACX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;sEACZ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;GACxF,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAuC,qBAAqB,EAAE,CAAC"}

package/dist/web-components.d.ts

@@ -2274,12 +2274,21 @@ export declare class BaseProgressBar extends FASTElement {
  * @public
  */
 export declare class BaseRatingDisplay extends FASTElement {
+    private numberFormatter;
     /**
      * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
      *
      * @internal
      */
     elementInternals: ElementInternals;
+    /** @internal */
+    iconSlot: HTMLSlotElement;
+    protected defaultCustomIconViewBox: string;
+    /**
+     * The element that displays the rating icons.
+     * @internal
+     */
+    display: HTMLElement;
     /**
      * The number of ratings.
      *
@@ -2292,9 +2301,9 @@ export declare class BaseRatingDisplay extends FASTElement {
      * The `viewBox` attribute of the icon <svg> element.
      *
      * @public
-     * @default `0 0 20 20`
      * @remarks
      * HTML Attribute: `icon-view-box`
+     * @deprecated Add `viewBox` attribute on the custom SVG directly.
      */
     iconViewBox?: string;
     /**
@@ -2307,6 +2316,7 @@ export declare class BaseRatingDisplay extends FASTElement {
      * HTML Attribute: `max`
      */
     max?: number;
+    protected maxChanged(): void;
     /**
      * The value of the rating.
      *
@@ -2315,44 +2325,19 @@ export declare class BaseRatingDisplay extends FASTElement {
      * HTML Attribute: `value`
      */
     value?: number;
-    /**
-     * @internal
-     */
-    slottedIcon: HTMLElement[];
-    /**
-     * @internal
-     */
-    slottedIconChanged(): void;
-    /**
-     * @internal
-     */
-    private customIcon?;
-    private intlNumberFormatter;
+    protected valueChanged(): void;
     constructor();
+    connectedCallback(): void;
     /**
      * Returns "count" as string, formatted according to the locale.
      *
      * @internal
      */
     get formattedCount(): string;
-    /**
-     * 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;
+    /** @internal */
+    handleSlotChange(): void;
+    protected renderSlottedIcon(svg: SVGSVGElement | null): void;
+    protected setCustomPropertyValue(propertyName: PropertyNameForCalculation): void;
 }
 
 /**
@@ -8776,6 +8761,8 @@ export declare const ProgressBarValidationState: {
  */
 export declare type ProgressBarValidationState = ValuesOf<typeof ProgressBarValidationState>;
 
+declare type PropertyNameForCalculation = 'max' | 'value';
+
 /**
  * A Radio Custom HTML Element.
  * Implements the {@link https://w3c.github.io/aria/#radio | ARIA `radio` role}.
@@ -9208,18 +9195,6 @@ export declare class RatingDisplay extends BaseRatingDisplay {
      * HTML Attribute: `compact`
      */
     compact: boolean;
-    /**
-     * Overrides the selected value and returns 1 if compact is true.
-     *
-     * @override
-     */
-    protected getSelectedValue(): number;
-    /**
-     * Overrides the maximum icons and returns a max of 1 if compact is true.
-     *
-     * @override
-     */
-    protected getMaxIcons(): number;
 }
 
 /**

package/dist/web-components.js

@@ -10396,6 +10396,19 @@ var __decorateClass$j = (decorators, target, key, kind) => {
   if (kind && result) __defProp$j(target, key, result);
   return result;
 };
+const SUPPORTS_ATTR_TYPE = CSS.supports("width: attr(value type(<number>))");
+const CUSTOM_PROPERTY_NAME = {
+  max: "--_attr-max",
+  value: "--_attr-value",
+  maskImageFilled: "--_mask-image-filled",
+  maskImageOutlined: "--_mask-image-outlined"
+};
+function svgToDataURI(svg) {
+  if (!svg) {
+    return "";
+  }
+  return ["data:image/svg+xml", encodeURIComponent(svg.replace(/\n/g, "").replace(/\s+/g, " "))].join(",");
+}
 class BaseRatingDisplay extends FASTElement {
   constructor() {
     super();
@@ -10405,16 +10418,20 @@ class BaseRatingDisplay extends FASTElement {
      * @internal
      */
     this.elementInternals = this.attachInternals();
-    this.intlNumberFormatter = new Intl.NumberFormat();
+    this.defaultCustomIconViewBox = "0 0 20 20";
     this.elementInternals.role = "img";
+    this.numberFormatter = new Intl.NumberFormat();
   }
-  /**
-   * @internal
-   */
-  slottedIconChanged() {
-    if (this.$fastController.isConnected) {
-      this.customIcon = this.slottedIcon[0]?.outerHTML;
-    }
+  maxChanged() {
+    this.setCustomPropertyValue("max");
+  }
+  valueChanged() {
+    this.setCustomPropertyValue("value");
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setCustomPropertyValue("value");
+    this.setCustomPropertyValue("max");
   }
   /**
    * Returns "count" as string, formatted according to the locale.
@@ -10422,41 +10439,47 @@ class BaseRatingDisplay extends FASTElement {
    * @internal
    */
   get formattedCount() {
-    return this.count ? this.intlNumberFormatter.format(this.count) : "";
+    return this.count ? this.numberFormatter.format(this.count) : "";
   }
-  /**
-   * Gets the selected value
-   *
-   * @protected
-   */
-  getSelectedValue() {
-    return Math.round((this.value ?? 0) * 2) / 2;
-  }
-  /**
-   * Gets the maximum icons to render
-   *
-   * @protected
-   */
-  getMaxIcons() {
-    return (this.max ?? 5) * 2;
-  }
-  /**
-   * Generates the icon SVG elements based on the "max" attribute.
-   *
-   * @internal
-   */
-  generateIcons() {
-    let htmlString = "";
-    let customIcon;
-    if (this.customIcon) {
-      customIcon = /<svg[^>]*>([\s\S]*?)<\/svg>/.exec(this.customIcon)?.[1] ?? "";
+  /** @internal */
+  handleSlotChange() {
+    const icon = this.iconSlot.assignedElements()?.find(el => el.nodeName.toLowerCase() === "svg");
+    this.renderSlottedIcon(icon ?? null);
+  }
+  renderSlottedIcon(svg) {
+    if (!svg) {
+      this.display.style.removeProperty(CUSTOM_PROPERTY_NAME.maskImageFilled);
+      this.display.style.removeProperty(CUSTOM_PROPERTY_NAME.maskImageOutlined);
+      return;
     }
-    const selectedValue = this.getSelectedValue();
-    for (let i = 0; i < this.getMaxIcons(); i++) {
-      const iconValue = (i + 1) / 2;
-      htmlString += `<svg aria-hidden="true" viewBox="${this.iconViewBox ?? "0 0 20 20"}" ${iconValue === selectedValue ? "selected" : ""}>${customIcon ?? '<use href="#star"></use>'}</svg>`;
+    const innerSvg = svg.innerHTML;
+    const viewBox = svg.getAttribute("viewBox") ?? this.iconViewBox ?? this.defaultCustomIconViewBox;
+    const customSvgFilled = `
+            <svg
+                viewBox="${viewBox}"
+                xmlns="http://www.w3.org/2000/svg"
+            >${innerSvg}</svg>`;
+    const customSvgOutlined = `
+            <svg
+                viewBox="${viewBox}"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                stroke="black"
+                stroke-width="2"
+            >${innerSvg}</svg>`;
+    this.display.style.setProperty(CUSTOM_PROPERTY_NAME.maskImageFilled, `url(${svgToDataURI(customSvgFilled)})`);
+    this.display.style.setProperty(CUSTOM_PROPERTY_NAME.maskImageOutlined, `url(${svgToDataURI(customSvgOutlined)})`);
+  }
+  setCustomPropertyValue(propertyName) {
+    if (!this.display || SUPPORTS_ATTR_TYPE) {
+      return;
+    }
+    const propertyValue = this[propertyName];
+    if (typeof propertyValue !== "number" || Number.isNaN(propertyValue)) {
+      this.display.style.removeProperty(CUSTOM_PROPERTY_NAME[propertyName]);
+    } else {
+      this.display.style.setProperty(CUSTOM_PROPERTY_NAME[propertyName], `${propertyValue}`);
     }
-    return htmlString;
   }
 }
 __decorateClass$j([attr({
@@ -10471,8 +10494,6 @@ __decorateClass$j([attr({
 __decorateClass$j([attr({
   converter: nullableNumberConverter
 })], BaseRatingDisplay.prototype, "value", 2);
-__decorateClass$j([observable], BaseRatingDisplay.prototype, "slottedIcon", 2);
-__decorateClass$j([observable], BaseRatingDisplay.prototype, "customIcon", 2);
 
 var __defProp$i = Object.defineProperty;
 var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
@@ -10487,22 +10508,6 @@ class RatingDisplay extends BaseRatingDisplay {
     super(...arguments);
     this.compact = false;
   }
-  /**
-   * Overrides the selected value and returns 1 if compact is true.
-   *
-   * @override
-   */
-  getSelectedValue() {
-    return Math.round((this.compact ? 1 : this.value ?? 0) * 2) / 2;
-  }
-  /**
-   * Overrides the maximum icons and returns a max of 1 if compact is true.
-   *
-   * @override
-   */
-  getMaxIcons() {
-    return (this.compact ? 1 : this.max ?? 5) * 2;
-  }
 }
 __decorateClass$i([attr], RatingDisplay.prototype, "color", 2);
 __decorateClass$i([attr], RatingDisplay.prototype, "size", 2);
@@ -10510,21 +10515,30 @@ __decorateClass$i([attr({
   mode: "boolean"
 })], RatingDisplay.prototype, "compact", 2);
 
-const styles$e = css`
-  ${display("inline-flex")}
-
-  :host{--icon-size:16px;--icon-color-filled:${colorPaletteMarigoldBorderActive};--icon-color-empty:${colorPaletteMarigoldBackground2};align-items:center;color:${colorNeutralForeground1};font-family:${fontFamilyBase};font-size:${fontSizeBase200};line-height:${lineHeightBase200};contain:layout style;user-select:none}:host([size='small']){--icon-size:12px}:host([size='large']){--icon-size:20px;font-size:${fontSizeBase300};line-height:${lineHeightBase300}}::slotted([slot='icon']){display:none}svg{width:var(--icon-size);height:var(--icon-size);fill:var(--icon-color-filled);margin-inline-end:${spacingHorizontalXXS}}svg:nth-child(odd){clip-path:inset(0 50% 0 0);margin-inline-end:calc(0px - var(--icon-size))}:host([color='neutral']) svg{--icon-color-filled:${colorNeutralForeground1}}:host([color='brand']) svg{--icon-color-filled:${colorBrandForeground1}}:host(:is([value^='-'],[value='0'])) svg,:host(:not([value])) svg,svg[selected] ~ svg{fill:var(--icon-color-empty)}:host([color='neutral']:is([value^='-'],[value='0'],:not([value]))) svg,:host([color='neutral']) svg[selected] ~ svg{--icon-color-empty:${colorNeutralBackground6}}:host([color='brand']:is([value^='-'],[value='0'],:not([value]))) svg,:host([color='brand']) svg[selected] ~ svg{--icon-color-empty:${colorBrandBackground2}}.value-label,::slotted([slot='value']){display:block;margin-inline-start:${spacingHorizontalXS};font-weight:${fontWeightSemibold}}:host([size='small']) .value-label,:host([size='small']) ::slotted([slot='value']){margin-inline-start:${spacingHorizontalXXS}}:host([size='large']) .value-label,:host([size='large']) ::slotted([slot='value']){margin-inline-start:${spacingHorizontalSNudge}}:host(:not([count])) .count-label{display:none}.count-label::before,::slotted([slot='count'])::before{content:'·';margin-inline:${spacingHorizontalXS}}:host([size='small']) .count-label::before,:host([size='small']) ::slotted([slot='count'])::before{margin-inline:${spacingHorizontalXXS}}:host([size='large']) .count-label::before,:host([size='large']) ::slotted([slot='count'])::before{margin-inline:${spacingHorizontalSNudge}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
-    :host([color]) svg{fill:CanvasText}:host([color]:is([value^='-'],[value='0'])) svg,:host(:not([value])) svg,:host([color]) svg[selected] ~ svg{fill:Canvas;stroke:CanvasText}`));
-
-const star = html`<svg xmlns="http://www.w3.org/2000/svg" style="display: none"><symbol id="star"><path d="M9.10433 2.89874C9.47114 2.15549 10.531 2.1555 10.8978 2.89874L12.8282 6.81024L17.1448 7.43748C17.9651 7.55666 18.2926 8.56464 17.699 9.14317L14.5755 12.1878L15.3129 16.487C15.453 17.3039 14.5956 17.9269 13.8619 17.5412L10.0011 15.5114L6.14018 17.5412C5.40655 17.9269 4.54913 17.3039 4.68924 16.487L5.4266 12.1878L2.30308 9.14317C1.70956 8.56463 2.03708 7.55666 2.8573 7.43748L7.17389 6.81024L9.10433 2.89874Z" /></symbol></svg>`;
+const defaultIconPath = `<path d="M5.28347 1.54605C5.57692 0.951448 6.42479 0.951449 6.71825 1.54605L7.82997 3.79866L10.3159 4.15988C10.9721 4.25523 11.2341 5.0616 10.7592 5.52443L8.96043 7.27785L9.38507 9.7537C9.49716 10.4072 8.81122 10.9056 8.22431 10.597L6.00086 9.4281L3.7774 10.597C3.19049 10.9056 2.50455 10.4072 2.61664 9.7537L3.04128 7.27784L1.24246 5.52443C0.767651 5.0616 1.02966 4.25523 1.68584 4.15988L4.17174 3.79865L5.28347 1.54605Z" />`;
+const defaultIconFilled = `
+<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">${defaultIconPath}</svg>
+`;
+const defaultIconOutlined = `
+<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"
+    fill="none" stroke="black" stroke-width="2"
+>${defaultIconPath}</svg>
+`;
 function ratingDisplayTemplate() {
-  return html` ${x => html`${staticallyCompose(x.generateIcons())}`}<slot name="icon" ${slotted({
-    property: "slottedIcon",
-    filter: elements("svg")
-  })}>${star}</slot><slot name="value"><span class="value-label" aria-hidden="true">${x => x.value}</span></slot><slot name="count"><span class="count-label" aria-hidden="true">${x => x.formattedCount}</span></slot>`;
+  return html`<div ${ref("display")} class="display" aria-hidden="true"></div><slot name="icon" ${ref("iconSlot")} @slotchange="${x => x.handleSlotChange()}"></slot><slot name="value"><span class="value-label" aria-hidden="true">${x => x.value}</span></slot><slot name="count"><span class="count-label" aria-hidden="true">${x => x.formattedCount}</span></slot>`;
 }
 const template$e = ratingDisplayTemplate();
 
+const styles$e = css`
+  ${display("inline-flex")}
+
+  :host{--_icon-size:16px;--_icon-gradient-degree:90deg;--_icon-color-value:${colorPaletteMarigoldBorderActive};--_icon-color-empty:${colorPaletteMarigoldBackground2};--_default-value:0;--_default-max:5;--_mask-image-filled:url(${svgToDataURI(defaultIconFilled)});--_mask-image-outlined:url(${svgToDataURI(defaultIconOutlined)});--_mask-position-x:left;align-items:center;color:${colorNeutralForeground1};font-family:${fontFamilyBase};font-size:${fontSizeBase200};line-height:${lineHeightBase200};contain:layout style;user-select:none}:host(:dir(rtl)){--_icon-gradient-degree:-90deg;--_mask-position-x:right}:host([size='small']){--_icon-size:12px}:host([size='large']){--_icon-size:20px;font-size:${fontSizeBase300};line-height:${lineHeightBase300}}::slotted([slot='icon']){display:none}:host([color='neutral']){--_icon-color-value:${colorNeutralForeground1};--_icon-color-empty:${colorNeutralBackground6}}:host([color='brand']){--_icon-color-value:${colorBrandForeground1};--_icon-color-empty:${colorBrandBackground2}}@supports (width:attr(value type(<number>))){:host{--_attr-value:attr(value type(<number>));--_attr-max:attr(max type(<number>))}}:host([compact]) .display{--_max:1}.display{--_value:max(0,round(var(--_attr-value,var(--_default-value)) * 2) / 2);--_max:max(1,var(--_attr-max,var(--_default-max)));--_mask-inline-size:calc(var(--_icon-size) + ${spacingHorizontalXXS});--_icon-gradient-stop-visual-adjustment:0px;--_icon-gradient-stop:calc(
+      var(--_mask-inline-size) * var(--_value) - var(--_icon-gradient-stop-visual-adjustment)
+    );background-image:linear-gradient(
+      var(--_icon-gradient-degree),var(--_icon-color-value) var(--_icon-gradient-stop),var(--_icon-color-empty) calc(var(--_icon-gradient-stop) + 0.5px)
+    );block-size:var(--_icon-size);display:grid;inline-size:calc(var(--_max) * var(--_mask-inline-size) - ${spacingHorizontalXXS} / 2);mask-image:var(--_mask-image-filled);mask-repeat:repeat no-repeat;mask-size:var(--_mask-inline-size) var(--_icon-size);mask-position:var(--_mask-position-x) center}.value-label,::slotted([slot='value']){display:block;margin-inline-start:${spacingHorizontalXS};font-weight:${fontWeightSemibold}}:host([size='small']) .value-label,:host([size='small']) ::slotted([slot='value']){margin-inline-start:${spacingHorizontalXXS}}:host([size='large']) .value-label,:host([size='large']) ::slotted([slot='value']){margin-inline-start:${spacingHorizontalSNudge}}:host(:not([count])) .count-label{display:none}.count-label::before,::slotted([slot='count'])::before{content:'·';margin-inline:${spacingHorizontalXS}}:host([size='small']) .count-label::before,:host([size='small']) ::slotted([slot='count'])::before{margin-inline:${spacingHorizontalXXS}}:host([size='large']) .count-label::before,:host([size='large']) ::slotted([slot='count'])::before{margin-inline:${spacingHorizontalSNudge}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    .display{--_icon-color-value:CanvasText;--_icon-color-empty:Canvas;--_icon-gradient-stop-visual-adjustment:0.5px;forced-color-adjust:none}.display::before{background-color:var(--_icon-color-value);content:'';grid-area:1 / 1 / -1 / -1;mask:inherit;mask-image:var(--_mask-image-outlined)}`));
+
 const definition$e = RatingDisplay.compose({
   name: `${FluentDesignSystem.prefix}-rating-display`,
   template: template$e,