@fluentui/web-components 2.5.11 → 3.0.0-alpha.1

package/dist/esm/_docs/design-system/color-explorer/components/color-picker/color-picker.form-associated.js

@@ -1,16 +0,0 @@
-import { FormAssociated, FoundationElement } from '@microsoft/fast-foundation';
-/* eslint-disable */
-class _ColorPicker extends FoundationElement {
-}
-/* eslint-enable */
-/**
- * A form-associated base class for the component.
- *
- * @internal
- */
-export class FormAssociatedColorPicker extends FormAssociated(_ColorPicker) {
-    constructor() {
-        super(...arguments);
-        this.proxy = document.createElement('input');
-    }
-}

package/dist/esm/_docs/design-system/color-explorer/components/color-picker/color-picker.js

@@ -1,297 +0,0 @@
-import { __decorate } from "tslib";
-import { ColorHSV, ColorRGBA64, hsvToRGB, parseColor, rgbToHSV } from '@microsoft/fast-colors';
-import { attr, DOM, observable } from '@microsoft/fast-element';
-import { isNullOrWhiteSpace } from '@microsoft/fast-web-utilities';
-import { FormAssociatedColorPicker } from './color-picker.form-associated';
-/**
- * This is currently experimental, any use of the color picker must include the following
- * imports and register with the DesignSystem
- *
- * import { fastTextField } from "@microsoft/fast-components";
- * import { DesignSystem } from "@microsoft/fast-foundation";
- * DesignSystem.getOrCreate().register(fastTextField());
- */
-/**
- * Simple class for storing all of the color picker UI observable values.
- */
-class ColorPickerUI {
-    constructor(rgbColor, hsvColor) {
-        this.RGBColor = rgbColor;
-        this.HSVColor = hsvColor;
-        this.HueCSSColor = hsvToRGB(new ColorHSV(this.HSVColor.h, 1, 1)).toStringHexRGB();
-        this.HuePosition = (this.HSVColor.h / 360) * 100;
-        this.SatValLeftPos = this.HSVColor.s * 100;
-        this.SatValTopPos = 100 - this.HSVColor.v * 100;
-        this.AlphaPos = this.RGBColor.a * 100;
-    }
-}
-/**
- * A Color Picker Custom HTML Element.
- *
- * @public
- */
-export class ColorPicker extends FormAssociatedColorPicker {
-    constructor() {
-        super(...arguments);
-        /**
-         * Flag indicating that the color UI is activily listening for mouse move and up events.
-         */
-        this.mouseActive = false;
-        /**
-         * Object containing all of the properties displayed in the color picker UI.
-         */
-        this.uiValues = new ColorPickerUI(new ColorRGBA64(1, 0, 0), new ColorHSV(0, 1, 1));
-        /**
-         * A reference to the HTMLElement that is the current target of mouse move events.
-         */
-        this.currentMouseTarget = null;
-    }
-    readOnlyChanged() {
-        if (this.proxy instanceof HTMLElement) {
-            this.proxy.readOnly = this.readOnly;
-        }
-    }
-    autofocusChanged() {
-        if (this.proxy instanceof HTMLElement) {
-            this.proxy.autofocus = this.autofocus;
-        }
-    }
-    placeholderChanged() {
-        if (this.proxy instanceof HTMLElement) {
-            this.proxy.placeholder = this.placeholder;
-        }
-    }
-    /**
-     * @internal
-     */
-    connectedCallback() {
-        super.connectedCallback();
-        this.open = false;
-        this.initColorValues();
-        this.proxy.setAttribute('type', 'color');
-        if (this.autofocus) {
-            DOM.queueUpdate(() => {
-                this.focus();
-            });
-        }
-    }
-    /**
-     * Handles the focus event. When the template has focus the color UI will be visable.
-     * @internal
-     */
-    handleFocus() {
-        // Re-init colors in case the value changed externally since the UI was last visible.
-        this.initColorValues();
-        this.open = true;
-    }
-    /**
-     * Handles the blur event. Hides the color UI when the template loses focus.
-     * @internal
-     */
-    handleBlur() {
-        this.open = false;
-    }
-    /**
-     * Handles the internal control's `input` event. This event is fired whenever a user types directly into the primary text field.
-     * @internal
-     */
-    handleTextInput() {
-        this.initialValue = this.control.value;
-        if (this.isValideCSSColor(this.value)) {
-            this.currentRGBColor = parseColor(this.value);
-            this.currentHSVColor = rgbToHSV(this.currentRGBColor);
-            this.updateUIValues(false);
-            this.$emit('change');
-        }
-    }
-    /**
-     * Handles the mouse down event on the Sat/Val square and Hue and Alpha sliders. Sets the current targeted element and begins listening for mouse move events.
-     * @param param ['sv','h','a'] - string specifying which color property is being modified with the mouse.
-     * @param e - A reference to the mouse event.
-     */
-    handleMouseDown(param, e) {
-        this.currentMouseTarget = e.composedPath()[0];
-        this.currentMouseParam = param;
-        this.updateFromMouseEvent(e.pageX, e.pageY);
-        this.mouseActive = true;
-    }
-    /**
-     * Handles the mouse move event within the color UI. Is only called once the mouseActive is set to true.
-     * @param e - Reference to the Mouse Event
-     */
-    handleMouseMove(e) {
-        this.updateFromMouseEvent(e.pageX, e.pageY);
-    }
-    /**
-     * Handles the mouse up event within the color UI. Disables listening for mouse move events.
-     * @param e - Reference to the Mouse Event
-     */
-    handleMouseUp(e) {
-        this.updateFromMouseEvent(e.pageX, e.pageY);
-        this.currentMouseTarget = null;
-        this.currentMouseParam = null;
-        this.mouseActive = false;
-    }
-    /**
-     * Handles changes to any of the color property text inputs typed by the user.
-     * @param param ['r','g','b','a','h','s','v'] - String specifying which color value is being modified.
-     * @param e - Reference to the event.
-     */
-    handleTextValueInput(param, e) {
-        const inputVal = e.composedPath()[0].value;
-        if (isNullOrWhiteSpace(inputVal) || Number.isNaN(inputVal)) {
-            return;
-        }
-        const newVal = parseInt(inputVal, 10);
-        if (['r', 'g', 'b', 'a'].includes(param)) {
-            if ((param !== 'a' && this.isValidRGB(newVal)) || (param === 'a' && this.isValidAlpha(newVal))) {
-                this.currentRGBColor = new ColorRGBA64(param === 'r' ? newVal / 255 : this.currentRGBColor.r, param === 'g' ? newVal / 255 : this.currentRGBColor.g, param === 'b' ? newVal / 255 : this.currentRGBColor.b, param === 'a' ? newVal / 100 : this.currentRGBColor.a);
-                this.currentHSVColor = rgbToHSV(this.currentRGBColor);
-                this.updateUIValues(true);
-            }
-        }
-        else if (['h', 's', 'v'].includes(param)) {
-            if ((param !== 'h' && this.isValidSaturationValue(newVal)) || (param === 'h' && this.isValidHue(newVal))) {
-                this.updateHSV(param === 'h' ? newVal : this.currentHSVColor.h, param === 's' ? newVal / 100 : this.currentHSVColor.s, param === 'v' ? newVal / 100 : this.currentHSVColor.v);
-            }
-        }
-    }
-    /**
-     * Change event handler for inner control.
-     * @remarks
-     * "Change" events are not `composable` so they will not
-     * permeate the shadow DOM boundary. This fn effectively proxies
-     * the change event, emitting a `change` event whenever the internal
-     * control emits a `change` event
-     * @internal
-     */
-    handleChange() {
-        this.$emit('change');
-    }
-    /**
-     * Initialize internal color values based on input value and set the UI elements
-     * to the correct positions / values.
-     */
-    initColorValues() {
-        if (!isNullOrWhiteSpace(this.value)) {
-            this.currentRGBColor = parseColor(this.value);
-        }
-        else {
-            this.currentRGBColor = new ColorRGBA64(1, 0, 0, 1);
-        }
-        this.currentHSVColor = rgbToHSV(this.currentRGBColor);
-        this.updateUIValues(false);
-    }
-    /**
-     * Determines if a number value is within the valid range for an R, G, or B color channel.
-     * @param val - Number to be evaluated.
-     */
-    isValidRGB(val) {
-        return val >= 0 && val <= 255;
-    }
-    /**
-     * Determines if a number value is within the valid range for the alpha channel.
-     * @param val - Number to be evaluated.
-     */
-    isValidAlpha(val) {
-        return val >= 0 && val <= 100;
-    }
-    /**
-     * Determines if a number value is within the valid range for the saturation or value color channels.
-     * @param val - Number to be evaluated.
-     */
-    isValidSaturationValue(val) {
-        return val >= 0 && val <= 100;
-    }
-    /**
-     * Determines if a number value is within the valid range for the hue color channel.
-     * @param val - Number to be evaluated.
-     */
-    isValidHue(val) {
-        return val >= 0 && val <= 359;
-    }
-    /**
-     * Checks if input is a valid CSS color.
-     * After placing an invalid css color value into a color style property the value will be an empty string when read back.
-     * @internal
-     */
-    isValideCSSColor(testValue) {
-        /* Set the background color of the proxy element since it is not visible in the UI. */
-        this.proxy.style.backgroundColor = '';
-        this.proxy.style.backgroundColor = testValue;
-        /* Read the value back out. If it was not a valid color value then it will be an empty string when read back out. */
-        return this.proxy.style.backgroundColor !== '';
-    }
-    /**
-     * Update the current color values to a new HSV color.
-     * @param hue The new Hue value.
-     * @param sat The new saturation value.
-     * @param val The new Value value.
-     */
-    updateHSV(hue, sat, val) {
-        this.currentHSVColor = new ColorHSV(hue, sat, val);
-        this.currentRGBColor = hsvToRGB(this.currentHSVColor, this.currentRGBColor.a);
-        this.updateUIValues(true);
-    }
-    /**
-     * Update the current color values based on the mouse position over one of the three UI elements (hue, saturation/value, or alpha).
-     * @param pageX The pageX position of the mouse.
-     * @param pageY The pageY position of the mouse.
-     */
-    updateFromMouseEvent(pageX, pageY) {
-        const pos = this.currentMouseTarget.getBoundingClientRect();
-        let x = pageX - pos.left;
-        let y = pageY - pos.top;
-        const width = pos.width;
-        const height = pos.height;
-        if (x > width)
-            x = width;
-        if (y > height)
-            y = height;
-        if (x < 0)
-            x = 0;
-        if (y < 0)
-            y = 0;
-        if (this.currentMouseParam === 'h') {
-            this.updateHSV((359 * x) / width, this.currentHSVColor.s, this.currentHSVColor.v);
-        }
-        else if (this.currentMouseParam === 'sv') {
-            this.updateHSV(this.currentHSVColor.h, Math.round((x * 100) / width) / 100, Math.round(100 - (y * 100) / height) / 100);
-        }
-        else if (this.currentMouseParam === 'a') {
-            this.currentRGBColor = new ColorRGBA64(this.currentRGBColor.r, this.currentRGBColor.g, this.currentRGBColor.b, Math.round((x * 100) / width) / 100);
-            this.updateUIValues(true);
-        }
-    }
-    /**
-     * Update the UI values with the current color. This updates the position of the indicators over the Sat/Val, Hue and Alpha elements
-     * and the values in all of the text fields at once.
-     * @param updateValue - Flag to trigger updating of the main text field value and emitting the change event.
-     */
-    updateUIValues(updateValue) {
-        this.uiValues = new ColorPickerUI(this.currentRGBColor, this.currentHSVColor);
-        if (updateValue) {
-            this.initialValue =
-                this.currentRGBColor.a !== 1 ? this.currentRGBColor.toStringWebRGBA() : this.currentRGBColor.toStringHexRGB();
-            this.$emit('change');
-        }
-    }
-}
-__decorate([
-    attr({ attribute: 'readonly', mode: 'boolean' })
-], ColorPicker.prototype, "readOnly", void 0);
-__decorate([
-    attr({ mode: 'boolean' })
-], ColorPicker.prototype, "autofocus", void 0);
-__decorate([
-    attr
-], ColorPicker.prototype, "placeholder", void 0);
-__decorate([
-    observable
-], ColorPicker.prototype, "open", void 0);
-__decorate([
-    observable
-], ColorPicker.prototype, "mouseActive", void 0);
-__decorate([
-    observable
-], ColorPicker.prototype, "uiValues", void 0);

package/dist/esm/_docs/design-system/color-explorer/components/color-picker/color-picker.styles.js

@@ -1,124 +0,0 @@
-import { css } from "@microsoft/fast-element";
-export const colorPickerStyles = () => css `
-    .popup,
-    .popup__open {
-        display: none;
-        padding: 2px;
-        flex-direction: row;
-        background-color: var(--neutral-layer-floating);
-        border: calc(var(--outline-width) * 1px) solid var(--neutral-outline-rest);
-        border-radius: calc(var(--corner-radius) * 1px);
-    }
-    .popup__open {
-        display: flex;
-        position: absolute;
-        z-index: 1;
-        margin-left: -32px;
-    }
-    .pickers {
-        margin: 4px 6px 4px 4px;
-    }
-    .inputs {
-        width: 65px;
-        margin: 0 4px 4px 0;
-    }
-    .pickers-saturation {
-        position: relative;
-        width: 200px;
-        height: 200px;
-        margin-bottom: 17px;
-        background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%),
-            linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
-        background-color: #f00;
-        border: 1px solid #fff;
-    }
-    .saturation-indicator {
-        position: absolute;
-        top: 0;
-        left: 0;
-        border: 1px solid #fff;
-        border-radius: 3px;
-        width: 4px;
-        height: 4px;
-        pointer-events: none;
-    }
-    .pickers-hue {
-        position: relative;
-        width: 200px;
-        height: 30px;
-        margin-bottom: 17px;
-        border: 1px solid #fff;
-        background: linear-gradient(
-            to right,
-            #f00 0%,
-            #ff0 16.66%,
-            #0f0 33.33%,
-            #0ff 50%,
-            #00f 66.66%,
-            #f0f 83.33%,
-            #f00 100%
-        );
-    }
-    .hue-indicator,
-    .alpha-indicator {
-        position: absolute;
-        left: 0;
-        top: -2px;
-        border: 1px solid #fff;
-        width: 1px;
-        height: 32px;
-        pointer-events: none;
-        margin-left: 1px;
-    }
-    .pickers-alpha {
-        position: relative;
-        width: 200px;
-        height: 30px;
-        border: 1px solid #fff;
-        background-image: linear-gradient(45deg, #999 25%, transparent 25%),
-            linear-gradient(-45deg, #999 25%, transparent 25%),
-            linear-gradient(45deg, transparent 75%, #999 75%),
-            linear-gradient(-45deg, transparent 75%, #999 75%);
-        background-size: 20px 20px;
-        background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
-        background-color: #fff;
-    }
-    .alpha-mask {
-        width: 100%;
-        height: 100%;
-        background-image: linear-gradient(to right, transparent, #f00);
-        margin-bottom: 5px;
-    }
-    .control-color {
-        position: relative;
-        display: inline-block;
-        width: 25px;
-        height: 25px;
-        margin-top: auto;
-        margin-bottom: auto;
-        border: 1px solid var(--fast-tooling-l1-color, #333333);
-    }
-    .control-color::before {
-        position: absolute;
-        content: "";
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
-        background-image: linear-gradient(
-            to bottom left,
-            transparent calc(50% - 1px),
-            var(--fast-tooling-l1-color, #333333),
-            transparent calc(50% + 1px)
-        );
-    }
-    .control-color::after {
-        position: absolute;
-        content: "";
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
-        background-color: var(--selected-color-value);
-    }
-`;

package/dist/esm/_docs/design-system/color-explorer/components/color-picker/color-picker.template.js

@@ -1,130 +0,0 @@
-import { html, ref } from '@microsoft/fast-element';
-import { TextField } from '@microsoft/fast-foundation';
-/**
- * The template for the color picker component.
- * @public
- */
-export const colorPickerTemplate = context => {
-    return html `
-        <template
-            @focus="${x => x.handleFocus()}"
-            @blur="${x => x.handleBlur()}"
-            @mousemove="${(x, c) => (x.mouseActive ? x.handleMouseMove(c.event) : null)}"
-            @mouseup="${(x, c) => (x.mouseActive ? x.handleMouseUp(c.event) : null)}"
-            style="--selected-color-value: ${x => (x.value ? x.value : 'transparent')}"
-        >
-            <div class="root" part="root">
-                <${context.tagFor(TextField)}
-                    class="root-control"
-                    part="control"
-                    id="control"
-                    @input="${x => x.handleTextInput()}"
-                    @change="${x => x.handleChange()}"
-                    ?autofocus="${x => x.autofocus}"
-                    ?disabled="${x => x.disabled}"
-                    placeholder="${x => x.placeholder}"
-                    ?readonly="${x => x.readOnly}"
-                    ?required="${x => x.required}"
-                    :value="${x => x.value}"
-                    ${ref('control')}
-                >
-                    <div slot="start" class="control-color"></div>
-                </${context.tagFor(TextField)}>
-                <div class="${x => (x.open ? 'popup__open' : 'popup')}">
-                    <div class="pickers">
-                        <div
-                            class="pickers-saturation"
-                            style="background-color:${x => x.uiValues.HueCSSColor}"
-                            @mousedown="${(x, c) => x.handleMouseDown('sv', c.event)}"
-                        >
-                            <div
-                                class="saturation-indicator"
-                                style="left: ${x => x.uiValues.SatValLeftPos - 2}%; top: ${x => x.uiValues.SatValTopPos - 2}%"
-                            ></div>
-                        </div>
-                        <div
-                            class="pickers-hue"
-                            @mousedown="${(x, c) => x.handleMouseDown('h', c.event)}"
-                        >
-                            <div
-                                class="hue-indicator"
-                                style="left: ${x => x.uiValues.HuePosition - 1}%"
-                            ></div>
-                        </div>
-                        <div
-                            class="pickers-alpha"
-                            @mousedown="${(x, c) => x.handleMouseDown('a', c.event)}"
-                        >
-                            <div
-                                class="alpha-mask"
-                                style="background-image: linear-gradient(to right, transparent, ${x => x.uiValues.HueCSSColor})"
-                            ></div>
-                            <div
-                                class="alpha-indicator"
-                                style="left: ${x => x.uiValues.AlphaPos - 1}%"
-                            ></div>
-                        </div>
-                    </div>
-                    <div class="inputs">
-                        <${context.tagFor(TextField)}
-                            maxlength="3"
-                            size="3"
-                            @input="${(x, c) => x.handleTextValueInput('r', c.event)}"
-                            :value="${x => Math.round(x.uiValues.RGBColor.r * 255)}"
-                        >
-                            <span slot="start">R:</span>
-                        </${context.tagFor(TextField)}>
-                        <${context.tagFor(TextField)}
-                            maxlength="3"
-                            size="3"
-                            @input="${(x, c) => x.handleTextValueInput('g', c.event)}"
-                            :value="${x => Math.round(x.uiValues.RGBColor.g * 255)}"
-                        >
-                            <span slot="start">G:</span>
-                        </${context.tagFor(TextField)}>
-                        <${context.tagFor(TextField)}
-                            maxlength="3"
-                            size="3"
-                            @input="${(x, c) => x.handleTextValueInput('b', c.event)}"
-                            :value="${x => Math.round(x.uiValues.RGBColor.b * 255)}"
-                        >
-                            <span slot="start">B:</span>
-                        </${context.tagFor(TextField)}>
-                        <${context.tagFor(TextField)}
-                            maxlength="3"
-                            size="3"
-                            @input="${(x, c) => x.handleTextValueInput('h', c.event)}"
-                            :value="${x => Math.round(x.uiValues.HSVColor.h)}"
-                        >
-                            <span slot="start">H:</span>
-                        </${context.tagFor(TextField)}>
-                        <${context.tagFor(TextField)}
-                            maxlength="3"
-                            size="3"
-                            @input="${(x, c) => x.handleTextValueInput('s', c.event)}"
-                            :value="${x => Math.round(x.uiValues.HSVColor.s * 100)}"
-                        >
-                            <span slot="start">S:</span>
-                        </${context.tagFor(TextField)}>
-                        <${context.tagFor(TextField)}
-                            maxlength="3"
-                            size="3"
-                            @input="${(x, c) => x.handleTextValueInput('v', c.event)}"
-                            :value="${x => Math.round(x.uiValues.HSVColor.v * 100)}"
-                        >
-                            <span slot="start">V:</span>
-                        </${context.tagFor(TextField)}>
-                        <${context.tagFor(TextField)}
-                            maxlength="3"
-                            size="3"
-                            @input="${(x, c) => x.handleTextValueInput('a', c.event)}"
-                            :value="${x => Math.round(x.uiValues.RGBColor.a * 100)}"
-                        >
-                            <span slot="start">A:</span>
-                        </${context.tagFor(TextField)}>
-                    </div>
-                </div>
-            </div>
-        </template>
-    `;
-};

package/dist/esm/_docs/design-system/color-explorer/components/color-picker/index.js

@@ -1,15 +0,0 @@
-import { ColorPicker } from './color-picker';
-import { colorPickerTemplate as template } from './color-picker.template';
-import { colorPickerStyles as styles } from './color-picker.styles';
-/**
- * A web component used for updating color values.
- *
- * @alpha
- * @remarks
- * HTML Element: \<color-picker\>
- */
-export const fastToolingColorPicker = ColorPicker.compose({
-    baseName: 'color-picker',
-    template,
-    styles,
-});

package/dist/esm/_docs/design-system/color-explorer/components/control-pane/control-pane.js

@@ -1,24 +0,0 @@
-import { __decorate } from "tslib";
-import { observable } from '@microsoft/fast-element';
-import { FoundationElement } from '@microsoft/fast-foundation';
-export class ControlPane extends FoundationElement {
-    constructor() {
-        super(...arguments);
-        this.showOnlyLayerBackgrounds = true;
-    }
-    updateFormValue(field, value) {
-        this.$emit('formvaluechange', { field: field, value: value });
-    }
-}
-__decorate([
-    observable
-], ControlPane.prototype, "componentType", void 0);
-__decorate([
-    observable
-], ControlPane.prototype, "accentColor", void 0);
-__decorate([
-    observable
-], ControlPane.prototype, "neutralColor", void 0);
-__decorate([
-    observable
-], ControlPane.prototype, "showOnlyLayerBackgrounds", void 0);

package/dist/esm/_docs/design-system/color-explorer/components/control-pane/control-pane.styles.js

@@ -1,19 +0,0 @@
-import { css } from "@microsoft/fast-element";
-import { display } from "@microsoft/fast-foundation";
-import { typeRampPlus1FontSize, typeRampPlus1LineHeight } from "../../../../../index-rollup";
-export const controlPaneStyles = css `
-    ${display("flex")} :host {
-        flex: 0 1 auto;
-        flex-direction: column;
-        gap: 24px;
-    }
-
-    .title {
-        font-size: ${typeRampPlus1FontSize};
-        line-height: ${typeRampPlus1LineHeight};
-    }
-
-    fluent-radio-group::part(positioning-region) {
-        gap: 8px;
-    }
-`;

package/dist/esm/_docs/design-system/color-explorer/components/control-pane/control-pane.template.js

@@ -1,52 +0,0 @@
-import { html, repeat } from '@microsoft/fast-element';
-import { ComponentTypes } from '../../component-types';
-function titleCase(str) {
-    return str.split('').reduce((accumulated, value, index) => {
-        return accumulated.concat(index === 0 ? value.toUpperCase() : value);
-    }, '');
-}
-export const controlPaneTemplate = html `
-  <template>
-    <p class="title">Settings</p>
-    <fluent-radio-group
-      name="componentType"
-      orientation="vertical"
-      @change="${(x, c) => {
-    x.updateFormValue('componentType', c.event.target.value);
-}}"
-    >
-      <label slot="label">Component type</label>
-      ${repeat(x => Object.keys(ComponentTypes), html `
-          <fluent-radio value="${x => x}" ?checked="${(x, c) => c.parent.componentType === x}">
-            ${x => titleCase(x)}
-          </fluent-radio>
-        `)}
-    </fluent-radio-group>
-    <div>
-      <label>Neutral base color</label>
-      <fast-tooling-color-picker
-        value="${x => x.neutralColor}"
-        @change="${(x, c) => {
-    x.updateFormValue('neutralColor', c.event.target.value);
-}}"
-      ></fast-tooling-color-picker>
-    </div>
-    <fluent-checkbox
-      checked="${x => x.showOnlyLayerBackgrounds}"
-      @change="${(x, c) => {
-    x.updateFormValue('showOnlyLayerBackgrounds', c.event.target.checked);
-}}"
-    >
-      Show layer backgrounds only
-    </fluent-checkbox>
-    <div>
-      <label>Accent base color</label>
-      <fast-tooling-color-picker
-        value="${x => x.accentColor}"
-        @change="${(x, c) => {
-    x.updateFormValue('accentColor', c.event.target.value);
-}}"
-      ></fast-tooling-color-picker>
-    </div>
-  </template>
-`;