@fluentui/web-components 2.4.0 → 2.5.2

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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,297 @@
+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

@@ -0,0 +1,124 @@
+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

@@ -0,0 +1,130 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,52 @@
+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>
+`;