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

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,
@@ -13463,6 +13477,7 @@ class BaseTree extends FASTElement {
     this.childTreeItems = [];
     this.elementInternals.role = "tree";
   }
+  /** @internal */
   childTreeItemsChanged() {
     this.updateCurrentSelected();
   }
@@ -13649,6 +13664,10 @@ class BaseTree extends FASTElement {
       focusItem.focus();
     }
   }
+  /** @internal */
+  handleDefaultSlotChange() {
+    this.childTreeItems = this.defaultSlot.assignedElements().filter(el => isTreeItem(el));
+  }
 }
 __decorateClass$3([observable], BaseTree.prototype, "currentSelected", 2);
 __decorateClass$3([observable], BaseTree.prototype, "childTreeItems", 2);
@@ -13703,10 +13722,7 @@ const styles$1 = css`
 
   :host{outline:none}`;
 
-const template$1 = html`<template tabindex="0" @click="${(x, c) => x.clickHandler(c.event)}" @focusin="${(x, c) => x.focusHandler(c.event)}" @focusout="${(x, c) => x.blurHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}" @change="${(x, c) => x.changeHandler(c.event)}"><slot ${slotted({
-  property: "childTreeItems",
-  filter: elements(`${FluentDesignSystem.prefix}-tree-item`)
-})}></slot></template>`;
+const template$1 = html`<template tabindex="0" @click="${(x, c) => x.clickHandler(c.event)}" @focusin="${(x, c) => x.focusHandler(c.event)}" @focusout="${(x, c) => x.blurHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}" @change="${(x, c) => x.changeHandler(c.event)}"><slot ${ref("defaultSlot")} @slotchange="${x => x.handleDefaultSlotChange()}"></slot></template>`;
 
 const definition$1 = Tree.compose({
   name: `${FluentDesignSystem.prefix}-tree`,
@@ -13835,7 +13851,12 @@ class BaseTreeItem extends FASTElement {
       this.tabIndex = this.selected ? 0 : -1;
     }
   }
+  /** @internal */
+  handleItemSlotChange() {
+    this.childTreeItems = this.itemSlot.assignedElements().filter(el => isTreeItem(el));
+  }
 }
+__decorateClass$1([observable], BaseTreeItem.prototype, "itemSlot", 2);
 __decorateClass$1([attr({
   mode: "boolean"
 })], BaseTreeItem.prototype, "expanded", 2);
@@ -13914,10 +13935,7 @@ const styles = css`
       ${colorStrokeFocus2} inset}.positioning-region{display:flex;align-items:center;justify-content:space-between;cursor:pointer;height:${spacingVerticalXXXL};padding-inline-start:calc(var(--indent) * ${spacingHorizontalXXL});padding-inline-end:${spacingVerticalS};border-radius:${borderRadiusMedium};background-color:${colorSubtleBackground};color:${colorNeutralForeground2};gap:${spacingHorizontalXS}}@media (prefers-contrast:more){:host(:focus-visible) .positioning-region{outline:1px solid ${colorStrokeFocus2}}}.content{display:flex;align-items:center;gap:${spacingHorizontalXS}}.chevron{display:flex;align-items:center;flex-shrink:0;justify-content:center;width:${spacingHorizontalXXL};height:${spacingVerticalXXL};transition:transform ${durationFaster} ${curveEasyEaseMax};transform:rotate(0deg)}.chevron:dir(rtl){transform:rotate(180deg)}.chevron svg{inline-size:12px;block-size:12px}.aside{display:flex;align-items:center}.positioning-region:hover{background-color:${colorSubtleBackgroundHover};color:${colorNeutralForeground2Hover}}.positioning-region:active{background-color:${colorSubtleBackgroundPressed};color:${colorNeutralForeground2Pressed}}::slotted([slot='start']),::slotted([slot='end']),::slotted(:not([slot])){display:flex;align-items:center;min-width:0}::slotted([slot='start']){flex-shrink:0}::slotted(:not([slot])){padding-inline:${spacingHorizontalXXS}}.items{display:none}:host([expanded]) .items{display:block}:host([empty]) .chevron,:host([empty]) .items{visibility:hidden}:host([selected]) .positioning-region{background-color:${colorSubtleBackgroundSelected};color:${colorNeutralForeground2Selected}}:host([selected]) .content,:host([selected]) .chevron{color:${colorNeutralForeground3Selected}}:host([size='small']) .positioning-region{height:${spacingVerticalXXL};padding-inline-start:calc(var(--indent) * ${spacingHorizontalM})}:host([appearance='subtle-alpha']) .positioning-region:hover{background-color:${colorSubtleBackgroundLightAlphaHover}}:host([appearance='subtle-alpha']) .positioning-region:active{background-color:${colorSubtleBackgroundLightAlphaPressed}}:host([appearance='subtle-alpha'][selected]) .positioning-region{background-color:${colorSubtleBackgroundLightAlphaSelected};color:${colorNeutralForeground2Selected}}:host([appearance='transparent']) .positioning-region{background-color:${colorTransparentBackground}}:host([appearance='transparent']) .positioning-region:hover{background-color:${colorTransparentBackgroundHover}}:host([appearance='transparent']) .positioning-region:active{background-color:${colorTransparentBackgroundPressed}}:host([appearance='transparent'][selected]) .positioning-region{background-color:${colorTransparentBackgroundSelected};color:${colorNeutralForeground2Selected}}:host([expanded]) .chevron{transform:rotate(90deg)}`;
 
 const chevronIcon = html`<svg viewBox="0 0 12 12" fill="currentColor"><path d="M4.65 2.15a.5.5 0 000 .7L7.79 6 4.65 9.15a.5.5 0 10.7.7l3.5-3.5a.5.5 0 000-.7l-3.5-3.5a.5.5 0 00-.7 0z"></path></svg>`;
-const template = html`<template slot="${x => x.isNestedItem ? "item" : void 0}"><div class="positioning-region" part="positioning-region"><div class="content" part="content"><span class="chevron" part="chevron" aria-hidden="true"><slot name="chevron">${chevronIcon}</slot></span><slot name="start"></slot><slot></slot><slot name="end"></slot></div><div class="aside" part="aside"><slot name="aside"></slot></div></div><div role="group" class="items" part="items"><slot name="item" ${slotted({
-  property: "childTreeItems",
-  filter: elements(`${FluentDesignSystem.prefix}-tree-item`)
-})}></slot></div></template>`;
+const template = html`<template slot="${x => x.isNestedItem ? "item" : void 0}"><div class="positioning-region" part="positioning-region"><div class="content" part="content"><span class="chevron" part="chevron" aria-hidden="true"><slot name="chevron">${chevronIcon}</slot></span><slot name="start"></slot><slot></slot><slot name="end"></slot></div><div class="aside" part="aside"><slot name="aside"></slot></div></div><div role="group" class="items" part="items"><slot name="item" ${ref("itemSlot")} @slotchange="${x => x.handleItemSlotChange()}"></slot></div></template>`;
 
 const definition = TreeItem.compose({
   name: `${FluentDesignSystem.prefix}-tree-item`,