@fluentui/web-components 1.6.3 → 2.1.0

package/dist/esm/color/recipes/gradient-swatch.js

@@ -0,0 +1,36 @@
+import { ColorRGBA64, rgbToRelativeLuminance } from '@microsoft/fast-colors';
+import { contrast } from '../utilities/relative-luminance';
+/**
+ * An implementation of {@link Swatch} that produces a gradient.
+ * This assumes a subtle gradient such that `relativeLuminance` is still meaningful,
+ * either with consistent luminance across the steps or a small edge of larger change.
+ * @internal
+ */
+export class GradientSwatchRGB {
+    /**
+     *
+     * @param red Red channel expressed as a number between 0 and 1
+     * @param green Green channel expressed as a number between 0 and 1
+     * @param blue Blue channel expressed as a number between 0 and 1
+     */
+    constructor(red, green, blue, cssGradient) {
+        this.toColorString = () => this.cssGradient;
+        this.contrast = contrast.bind(null, this);
+        this.createCSS = this.toColorString;
+        this.color = new ColorRGBA64(red, green, blue);
+        this.cssGradient = cssGradient;
+        this.relativeLuminance = rgbToRelativeLuminance(this.color);
+        this.r = red;
+        this.g = green;
+        this.b = blue;
+    }
+    /**
+     * Creates a GradientSwatch from a base color and gradient definition
+     * @param obj The base color object, used for relative luminance
+     * @param cssGradient The actual gradient to be rendered
+     * @returns New GradientSwatch object
+     */
+    static fromObject(obj, cssGradient) {
+        return new GradientSwatchRGB(obj.r, obj.g, obj.b, cssGradient);
+    }
+}

package/dist/esm/color/recipes/neutral-layer-1.js

@@ -1,7 +1,13 @@
 import { baseLayerLuminanceSwatch } from '../utilities/base-layer-luminance';
+/**
+ * @internal
+ */
+export function neutralLayer1Index(palette, baseLayerLuminance) {
+    return palette.closestIndexOf(baseLayerLuminanceSwatch(baseLayerLuminance));
+}
 /**
  * @internal
  */
 export function neutralLayer1(palette, baseLayerLuminance) {
-    return palette.get(palette.closestIndexOf(baseLayerLuminanceSwatch(baseLayerLuminance)));
+    return palette.get(neutralLayer1Index(palette, baseLayerLuminance));
 }

package/dist/esm/color/recipes/neutral-layer-2.js

@@ -1,13 +1,7 @@
-import { baseLayerLuminanceSwatch } from '../utilities/base-layer-luminance';
+import { neutralLayer1Index } from './neutral-layer-1';
 /**
  * @internal
  */
-export function neutralLayer2Index(palette, luminance, layerDelta, fillRestDelta, fillHoverDelta, fillActiveDelta) {
-    return Math.max(palette.closestIndexOf(baseLayerLuminanceSwatch(luminance)) + layerDelta, fillRestDelta, fillHoverDelta, fillActiveDelta);
-}
-/**
- * @internal
- */
-export function neutralLayer2(palette, luminance, layerDelta, fillRestDelta, fillHoverDelta, fillActiveDelta) {
-    return palette.get(neutralLayer2Index(palette, luminance, layerDelta, fillRestDelta, fillHoverDelta, fillActiveDelta));
+export function neutralLayer2(palette, baseLayerLuminance, layerDelta) {
+    return palette.get(neutralLayer1Index(palette, baseLayerLuminance) + layerDelta * -1);
 }

package/dist/esm/color/recipes/neutral-layer-3.js

@@ -1,7 +1,7 @@
-import { neutralLayer2Index } from './neutral-layer-2';
+import { neutralLayer1Index } from './neutral-layer-1';
 /**
  * @internal
  */
-export function neutralLayer3(palette, luminance, layerDelta, fillRestDelta, fillHoverDelta, fillActiveDelta) {
-    return palette.get(neutralLayer2Index(palette, luminance, layerDelta, fillRestDelta, fillHoverDelta, fillActiveDelta) + layerDelta);
+export function neutralLayer3(palette, baseLayerLuminance, layerDelta) {
+    return palette.get(neutralLayer1Index(palette, baseLayerLuminance) + layerDelta * -1 * 2);
 }

package/dist/esm/color/recipes/neutral-layer-4.js

@@ -1,7 +1,7 @@
-import { neutralLayer2Index } from './neutral-layer-2';
+import { neutralLayer1Index } from './neutral-layer-1';
 /**
  * @internal
  */
-export function neutralLayer4(palette, luminance, layerDelta, fillRestDelta, fillHoverDelta, fillActiveDelta) {
-    return palette.get(neutralLayer2Index(palette, luminance, layerDelta, fillRestDelta, fillHoverDelta, fillActiveDelta) + layerDelta * 2);
+export function neutralLayer4(palette, baseLayerLuminance, layerDelta) {
+    return palette.get(neutralLayer1Index(palette, baseLayerLuminance) + layerDelta * -1 * 3);
 }

package/dist/esm/color/recipes/neutral-layer-floating.js

@@ -1,8 +1,7 @@
-import { baseLayerLuminanceSwatch } from '../utilities/base-layer-luminance';
+import { neutralLayer1Index } from './neutral-layer-1';
 /**
  * @internal
  */
-export function neutralLayerFloating(palette, relativeLuminance, layerDelta) {
-    const cardIndex = palette.closestIndexOf(baseLayerLuminanceSwatch(relativeLuminance)) - layerDelta;
-    return palette.get(cardIndex - layerDelta);
+export function neutralLayerFloating(palette, baseLayerLuminance, layerDelta) {
+    return palette.get(neutralLayer1Index(palette, baseLayerLuminance) + layerDelta);
 }

package/dist/esm/color/recipes/underline-stroke.js

@@ -0,0 +1,31 @@
+import { directionByIsDark } from '../utilities/direction-by-is-dark';
+import { GradientSwatchRGB } from './gradient-swatch';
+/**
+ * @internal
+ */
+export function underlineStroke(palette, reference, restDelta, hoverDelta, activeDelta, focusDelta, shadowDelta, width) {
+    const referenceIndex = palette.closestIndexOf(reference);
+    const direction = directionByIsDark(reference);
+    const restIndex = referenceIndex + direction * restDelta;
+    const hoverIndex = restIndex + direction * (hoverDelta - restDelta);
+    const activeIndex = restIndex + direction * (activeDelta - restDelta);
+    const focusIndex = restIndex + direction * (focusDelta - restDelta);
+    const midPosition = `calc(100% - ${width})`;
+    function gradientHelper(index, applyShadow) {
+        const color = palette.get(index);
+        if (applyShadow) {
+            const underlineColor = palette.get(index + direction * shadowDelta);
+            const g = `linear-gradient(${color.toColorString()} ${midPosition}, ${underlineColor.toColorString()} ${midPosition}, ${underlineColor.toColorString()})`;
+            return GradientSwatchRGB.fromObject(color, g);
+        }
+        else {
+            return color;
+        }
+    }
+    return {
+        rest: gradientHelper(restIndex, true),
+        hover: gradientHelper(hoverIndex, true),
+        active: gradientHelper(activeIndex, false),
+        focus: gradientHelper(focusIndex, true),
+    };
+}

package/dist/esm/color/swatch.js

@@ -10,8 +10,28 @@ export const SwatchRGB = Object.freeze({
     },
 });
 /**
- * A RGB implementation of {@link Swatch}
- * @public
+ * Runtime test for an objects conformance with the SwatchRGB interface.
+ * @internal
+ */
+export function isSwatchRGB(value) {
+    const test = {
+        r: 0,
+        g: 0,
+        b: 0,
+        toColorString: () => '',
+        contrast: () => 0,
+        relativeLuminance: 0,
+    };
+    for (const key in test) {
+        if (typeof test[key] !== typeof value[key]) {
+            return false;
+        }
+    }
+    return true;
+}
+/**
+ * An RGB implementation of {@link Swatch}
+ * @internal
  */
 class SwatchRGBImpl extends ColorRGBA64 {
     /**

package/dist/esm/color/utilities/base-layer-luminance.js

@@ -9,6 +9,6 @@ export function baseLayerLuminanceSwatch(luminance) {
  */
 export var StandardLuminance;
 (function (StandardLuminance) {
-    StandardLuminance[StandardLuminance["LightMode"] = 1] = "LightMode";
-    StandardLuminance[StandardLuminance["DarkMode"] = 0.23] = "DarkMode";
+    StandardLuminance[StandardLuminance["LightMode"] = 0.98] = "LightMode";
+    StandardLuminance[StandardLuminance["DarkMode"] = 0.15] = "DarkMode";
 })(StandardLuminance || (StandardLuminance = {}));

package/dist/esm/combobox/combobox.stories.js

@@ -31,6 +31,7 @@ const ComboboxTemplate = ({ appearance, autocomplete, position, required }) => `
     ${appearance ? `autocomplete="${autocomplete}"` : ''}
     ${required ? 'required' : ''}
     ${position ? `position="${position}"` : ''}
+    style="margin-bottom: 500px;"
   >
     <fluent-option>Please Please Me</fluent-option>
     <fluent-option>With The Beatles</fluent-option>

package/dist/esm/combobox/index.js

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import { attr } from '@microsoft/fast-element';
 import { Combobox as FoundationCombobox, comboboxTemplate as template, } from '@microsoft/fast-foundation';
+import { fillColor, neutralLayerFloating } from '../design-tokens';
 import { comboboxStyles as styles } from './combobox.styles';
 /**
  * The Fluent combobox class
@@ -24,6 +25,9 @@ export class Combobox extends FoundationCombobox {
         if (!this.appearance) {
             this.appearance = 'outline';
         }
+        if (this.listbox) {
+            fillColor.setValueFor(this.listbox, neutralLayerFloating);
+        }
     }
 }
 __decorate([
@@ -44,15 +48,8 @@ export const fluentCombobox = Combobox.compose({
     template,
     styles,
     indicator: `
-    <svg
-        class="select-indicator"
-        part="select-indicator"
-        viewBox="0 0 12 7"
-        xmlns="http://www.w3.org/2000/svg"
-    >
-        <path
-            d="M11.85.65c.2.2.2.5 0 .7L6.4 6.84a.55.55 0 01-.78 0L.14 1.35a.5.5 0 11.71-.7L6 5.8 11.15.65c.2-.2.5-.2.7 0z"
-        />
+    <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
+      <path d="M2.15 4.65c.2-.2.5-.2.7 0L6 7.79l3.15-3.14a.5.5 0 11.7.7l-3.5 3.5a.5.5 0 01-.7 0l-3.5-3.5a.5.5 0 010-.7z"/>
     </svg>
   `,
 });

package/dist/esm/custom-elements.js

@@ -5,6 +5,7 @@ import { fluentBadge } from './badge/index';
 import { fluentBreadcrumb } from './breadcrumb/index';
 import { fluentBreadcrumbItem } from './breadcrumb-item/index';
 import { fluentButton } from './button/index';
+import { fluentCalendar } from './calendar/index';
 import { fluentCard } from './card/index';
 import { fluentCheckbox } from './checkbox/index';
 import { fluentCombobox } from './combobox/index';
@@ -34,7 +35,7 @@ import { fluentToolbar } from './toolbar/index';
 import { fluentTooltip } from './tooltip/index';
 import { fluentTreeView } from './tree-view/index';
 import { fluentTreeItem } from './tree-item/index';
-export { fluentAccordion, fluentAccordionItem, fluentAnchor, fluentAnchoredRegion, fluentBadge, fluentBreadcrumb, fluentBreadcrumbItem, fluentButton, fluentCard, fluentCheckbox, fluentCombobox, fluentDataGrid, fluentDataGridCell, fluentDataGridRow, fluentDesignSystemProvider, fluentDialog, fluentDivider, fluentFlipper, fluentHorizontalScroll, fluentListbox, fluentOption, fluentMenu, fluentMenuItem, fluentNumberField, fluentProgress, fluentProgressRing, fluentRadio, fluentRadioGroup, fluentSelect, fluentSkeleton, fluentSlider, fluentSliderLabel, fluentSwitch, fluentTabs, fluentTab, fluentTabPanel, fluentTextArea, fluentTextField, fluentToolbar, fluentTooltip, fluentTreeView, fluentTreeItem, };
+export { fluentAccordion, fluentAccordionItem, fluentAnchor, fluentAnchoredRegion, fluentBadge, fluentBreadcrumb, fluentBreadcrumbItem, fluentButton, fluentCard, fluentCalendar, fluentCheckbox, fluentCombobox, fluentDataGrid, fluentDataGridCell, fluentDataGridRow, fluentDesignSystemProvider, fluentDialog, fluentDivider, fluentFlipper, fluentHorizontalScroll, fluentListbox, fluentOption, fluentMenu, fluentMenuItem, fluentNumberField, fluentProgress, fluentProgressRing, fluentRadio, fluentRadioGroup, fluentSelect, fluentSkeleton, fluentSlider, fluentSliderLabel, fluentSwitch, fluentTabs, fluentTab, fluentTabPanel, fluentTextArea, fluentTextField, fluentToolbar, fluentTooltip, fluentTreeView, fluentTreeItem, };
 /**
  * All Fluent UI Web Components
  * @public
@@ -48,6 +49,7 @@ export const allComponents = {
     fluentBreadcrumb,
     fluentBreadcrumbItem,
     fluentButton,
+    fluentCalendar,
     fluentCard,
     fluentCheckbox,
     fluentCombobox,

package/dist/esm/data-grid/data-grid-cell.styles.js

@@ -1,7 +1,7 @@
 import { css } from '@microsoft/fast-element';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
-import { bodyFont, controlCornerRadius, designUnit, focusStrokeOuter, neutralForegroundRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
+import { bodyFont, controlCornerRadius, designUnit, focusStrokeOuter, focusStrokeWidth, neutralForegroundRest, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
 export const dataGridCellStyles = (context, definition) => css `
     :host {
       padding: calc(${designUnit} * 1px) calc(${designUnit} * 3px);
@@ -11,8 +11,9 @@ export const dataGridCellStyles = (context, definition) => css `
       font-size: ${typeRampBaseFontSize};
       line-height: ${typeRampBaseLineHeight};
       font-weight: 400;
-      border: transparent calc(${strokeWidth} * 1px) solid;
+      border: transparent calc(${focusStrokeWidth} * 1px) solid;
       overflow: hidden;
+      outline: none;
       white-space: nowrap;
       border-radius: calc(${controlCornerRadius} * 1px);
     }
@@ -22,8 +23,7 @@ export const dataGridCellStyles = (context, definition) => css `
     }
 
     :host(:${focusVisible}) {
-      border: ${focusStrokeOuter} calc(${strokeWidth} * 1px) solid;
-      color: ${neutralForegroundRest};
+      border-color: ${focusStrokeOuter};
     }
   `.withBehaviors(forcedColorsStylesheetBehavior(css `
         :host {

package/dist/esm/data-grid/data-grid-row.styles.js

@@ -1,7 +1,7 @@
 import { css } from '@microsoft/fast-element';
 import { forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
-import { neutralFillRest, neutralStrokeDividerRest, strokeWidth } from '../design-tokens';
-export const dataGridRowStyles = (context, defintion) => css `
+import { fillColor, neutralStrokeDividerRest, strokeWidth } from '../design-tokens';
+export const dataGridRowStyles = (context, definition) => css `
     :host {
       display: grid;
       padding: 1px 0;
@@ -14,7 +14,7 @@ export const dataGridRowStyles = (context, defintion) => css `
     }
 
     :host(.sticky-header) {
-      background: ${neutralFillRest};
+      background: ${fillColor};
       position: sticky;
       top: 0;
     }

package/dist/esm/design-system-provider/design-system-provider.vscode.definition.json

@@ -30,6 +30,14 @@
                     "default": "#0078D4",
                     "required": false
                 },
+                {
+                    "name": "neutral-base-color",
+                    "title": "Neutral base color",
+                    "description": "The neutral palette base color",
+                    "type": "string",
+                    "default": "#808080",
+                    "required": false
+                },
                 {
                     "name": "density",
                     "title": "Density",
@@ -86,6 +94,14 @@
                     "default": 4,
                     "required": false
                 },
+                {
+                    "name": "layer-corner-radius",
+                    "title": "Layer Corner radius",
+                    "description": "The corner radius value for layer components",
+                    "type": "number",
+                    "default": 8,
+                    "required": false
+                },
                 {
                     "name": "stroke-width",
                     "title": "Stroke width",
@@ -110,14 +126,6 @@
                     "default": 0.3,
                     "required": false
                 },
-                {
-                    "name": "neutral-base-color",
-                    "title": "Neutral base color",
-                    "description": "The neutral palette base color",
-                    "type": "string",
-                    "default": "#808080",
-                    "required": false
-                },
                 {
                     "name": "type-ramp-minus-2-font-size",
                     "title": "Font size (-2)",
@@ -417,7 +425,7 @@
                     "title": "Base layer luminance",
                     "description": "When set to a number between 0 and 1, this values controls the output of layer and card recipes",
                     "type": "number",
-                    "default": 1,
+                    "default": 0.98,
                     "required": false
                 },
                 {

package/dist/esm/design-system-provider/index.js

@@ -1,11 +1,10 @@
 import { __decorate } from "tslib";
 import { parseColorHexRGB } from '@microsoft/fast-colors';
-import { attr, css, html, nullableNumberConverter, Observable, observable, } from '@microsoft/fast-element';
+import { attr, css, html, nullableNumberConverter, Observable } from '@microsoft/fast-element';
 import { display, forcedColorsStylesheetBehavior, FoundationElement, } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
-import { PaletteRGB } from '../color/palette';
 import { SwatchRGB } from '../color/swatch';
-import { accentFillActiveDelta, accentFillFocusDelta, accentFillHoverDelta, accentFillRestDelta, accentForegroundActiveDelta, accentForegroundFocusDelta, accentForegroundHoverDelta, accentForegroundRestDelta, accentPalette, baseHeightMultiplier, baseHorizontalSpacingMultiplier, baseLayerLuminance, controlCornerRadius, density, designUnit, direction, disabledOpacity, fillColor, focusStrokeWidth, neutralFillActiveDelta, neutralFillFocusDelta, neutralFillHoverDelta, neutralFillInputActiveDelta, neutralFillInputFocusDelta, neutralFillInputHoverDelta, neutralFillInputRestDelta, neutralFillLayerRestDelta, neutralFillRestDelta, neutralFillStealthActiveDelta, neutralFillStealthFocusDelta, neutralFillStealthHoverDelta, neutralFillStealthRestDelta, neutralFillStrongActiveDelta, neutralFillStrongFocusDelta, neutralFillStrongHoverDelta, neutralForegroundRest, neutralPalette, neutralStrokeActiveDelta, neutralStrokeDividerRestDelta, neutralStrokeFocusDelta, neutralStrokeHoverDelta, neutralStrokeRestDelta, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, typeRampMinus1FontSize, typeRampMinus1LineHeight, typeRampMinus2FontSize, typeRampMinus2LineHeight, typeRampPlus1FontSize, typeRampPlus1LineHeight, typeRampPlus2FontSize, typeRampPlus2LineHeight, typeRampPlus3FontSize, typeRampPlus3LineHeight, typeRampPlus4FontSize, typeRampPlus4LineHeight, typeRampPlus5FontSize, typeRampPlus5LineHeight, typeRampPlus6FontSize, typeRampPlus6LineHeight, } from '../design-tokens';
+import { accentBaseColor, accentFillActiveDelta, accentFillFocusDelta, accentFillHoverDelta, accentFillRestDelta, accentForegroundActiveDelta, accentForegroundFocusDelta, accentForegroundHoverDelta, accentForegroundRestDelta, baseHeightMultiplier, baseHorizontalSpacingMultiplier, baseLayerLuminance, controlCornerRadius, density, designUnit, direction, disabledOpacity, fillColor, focusStrokeWidth, layerCornerRadius, neutralBaseColor, neutralFillActiveDelta, neutralFillFocusDelta, neutralFillHoverDelta, neutralFillInputActiveDelta, neutralFillInputFocusDelta, neutralFillInputHoverDelta, neutralFillInputRestDelta, neutralFillLayerRestDelta, neutralFillRestDelta, neutralFillStealthActiveDelta, neutralFillStealthFocusDelta, neutralFillStealthHoverDelta, neutralFillStealthRestDelta, neutralFillStrongActiveDelta, neutralFillStrongFocusDelta, neutralFillStrongHoverDelta, neutralForegroundRest, neutralStrokeActiveDelta, neutralStrokeDividerRestDelta, neutralStrokeFocusDelta, neutralStrokeHoverDelta, neutralStrokeRestDelta, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, typeRampMinus1FontSize, typeRampMinus1LineHeight, typeRampMinus2FontSize, typeRampMinus2LineHeight, typeRampPlus1FontSize, typeRampPlus1LineHeight, typeRampPlus2FontSize, typeRampPlus2LineHeight, typeRampPlus3FontSize, typeRampPlus3LineHeight, typeRampPlus4FontSize, typeRampPlus4LineHeight, typeRampPlus5FontSize, typeRampPlus5LineHeight, typeRampPlus6FontSize, typeRampPlus6LineHeight, } from '../design-tokens';
 /**
  * A {@link ValueConverter} that converts to and from `Swatch` values.
  * @remarks
@@ -69,42 +68,26 @@ export class DesignSystemProvider extends FoundationElement {
          * HTML boolean attribute: no-paint
          */
         this.noPaint = false;
-        // If fillColor changes or is removed, we need to
+        // If fillColor or baseLayerLuminance change, we need to
         // re-evaluate whether we should have paint styles applied
-        Observable.getNotifier(this).subscribe({
+        const subscriber = {
             handleChange: this.noPaintChanged.bind(this),
-        }, 'fillColor');
+        };
+        Observable.getNotifier(this).subscribe(subscriber, 'fillColor');
+        Observable.getNotifier(this).subscribe(subscriber, 'baseLayerLuminance');
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.noPaintChanged();
     }
     noPaintChanged() {
-        if (!this.noPaint && this.fillColor !== void 0) {
+        if (!this.noPaint && (this.fillColor !== void 0 || this.baseLayerLuminance)) {
             this.$fastController.addStyles(backgroundStyles);
         }
         else {
             this.$fastController.removeStyles(backgroundStyles);
         }
     }
-    /**
-     * @internal
-     */
-    accentBaseColorChanged(prev, next) {
-        if (next !== undefined && next !== null) {
-            accentPalette.setValueFor(this, PaletteRGB.create(next));
-        }
-        else {
-            accentPalette.deleteValueFor(this);
-        }
-    }
-    /**
-     * @internal
-     */
-    neutralBaseColorChanged(prev, next) {
-        if (next !== undefined && next !== null) {
-            neutralPalette.setValueFor(this, PaletteRGB.create(next));
-        }
-        else {
-            neutralPalette.deleteValueFor(this);
-        }
-    }
 }
 __decorate([
     attr({ attribute: 'no-paint', mode: 'boolean' })
@@ -113,6 +96,7 @@ __decorate([
     attr({
         attribute: 'fill-color',
         converter: swatchConverter,
+        mode: 'fromView',
     }),
     designToken(fillColor)
 ], DesignSystemProvider.prototype, "fillColor", void 0);
@@ -121,23 +105,17 @@ __decorate([
         attribute: 'accent-base-color',
         converter: swatchConverter,
         mode: 'fromView',
-    })
+    }),
+    designToken(accentBaseColor)
 ], DesignSystemProvider.prototype, "accentBaseColor", void 0);
 __decorate([
     attr({
         attribute: 'neutral-base-color',
         converter: swatchConverter,
         mode: 'fromView',
-    })
+    }),
+    designToken(neutralBaseColor)
 ], DesignSystemProvider.prototype, "neutralBaseColor", void 0);
-__decorate([
-    observable,
-    designToken(neutralPalette)
-], DesignSystemProvider.prototype, "neutralPalette", void 0);
-__decorate([
-    observable,
-    designToken(accentPalette)
-], DesignSystemProvider.prototype, "accentPalette", void 0);
 __decorate([
     attr({
         converter: nullableNumberConverter,
@@ -178,6 +156,13 @@ __decorate([
     }),
     designToken(controlCornerRadius)
 ], DesignSystemProvider.prototype, "controlCornerRadius", void 0);
+__decorate([
+    attr({
+        attribute: 'layer-corner-radius',
+        converter: nullableNumberConverter,
+    }),
+    designToken(layerCornerRadius)
+], DesignSystemProvider.prototype, "layerCornerRadius", void 0);
 __decorate([
     attr({
         attribute: 'stroke-width',