@fluentui/web-components 2.5.0 → 2.5.3

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

@@ -0,0 +1,18 @@
+import { __decorate } from "tslib";
+import { customElement } from '@microsoft/fast-element';
+import { ControlPane } from './control-pane';
+import { controlPaneTemplate as template } from './control-pane.template';
+import { controlPaneStyles as styles } from './control-pane.styles';
+let AppControlPane = class AppControlPane extends ControlPane {
+};
+AppControlPane = __decorate([
+    customElement({
+        name: 'app-control-pane',
+        template,
+        styles,
+    })
+], AppControlPane);
+export { AppControlPane };
+export * from './control-pane.template';
+export * from './control-pane.styles';
+export * from './control-pane';

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

@@ -0,0 +1,11 @@
+import { __decorate } from "tslib";
+import { observable } from '@microsoft/fast-element';
+import { FoundationElement } from '@microsoft/fast-foundation';
+export class Gradient extends FoundationElement {
+}
+__decorate([
+    observable
+], Gradient.prototype, "colors", void 0);
+__decorate([
+    observable
+], Gradient.prototype, "markedColor", void 0);

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

@@ -0,0 +1,31 @@
+import { css } from "@microsoft/fast-element";
+import { display } from "@microsoft/fast-foundation";
+export const gradientStyles = css `
+    ${display("flex")} :host {
+        display: flex;
+        width: 100%;
+    }
+
+    a {
+        display: flex;
+        flex: 1;
+        height: 100%;
+    }
+
+    a.marked {
+        position: relative;
+    }
+
+    a.marked::before {
+        width: 6px;
+        height: 6px;
+        margin: 0 auto;
+        content: "";
+        opacity: 0.7;
+        position: relative;
+        border: solid 1px currentcolor;
+        border-radius: 50%;
+        display: block;
+        align-self: center;
+    }
+`;

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

@@ -0,0 +1,21 @@
+import { parseColor } from '@microsoft/fast-colors';
+import { html, repeat } from '@microsoft/fast-element';
+import { isDark, SwatchRGB } from '../../../../../index-rollup';
+function getColor(background) {
+    const bg = parseColor(background);
+    const darkMode = isDark(SwatchRGB.from(bg));
+    return darkMode ? 'white' : 'black';
+}
+export const gradientTemplate = html `
+  <template>
+    ${repeat(x => x.colors, html `
+        <a
+          class="${(x, c) => c.parent.markedColor !== undefined && x.toUpperCase() === c.parent.markedColor.toUpperCase()
+    ? 'marked'
+    : ''}"
+          style="background: ${x => x}; color: ${x => getColor(x)}"
+          title="${(x, c) => c.index.toString().concat(': ', x.toUpperCase())}"
+        ></a>
+      `, { positioning: true })}
+  </template>
+`;

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

@@ -0,0 +1,18 @@
+import { __decorate } from "tslib";
+import { customElement } from '@microsoft/fast-element';
+import { Gradient } from './gradient';
+import { gradientTemplate as template } from './gradient.template';
+import { gradientStyles as styles } from './gradient.styles';
+let AppGradient = class AppGradient extends Gradient {
+};
+AppGradient = __decorate([
+    customElement({
+        name: 'app-gradient',
+        template,
+        styles,
+    })
+], AppGradient);
+export { AppGradient };
+export * from './gradient.template';
+export * from './gradient.styles';
+export * from './gradient';

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

@@ -0,0 +1,70 @@
+import { __decorate } from "tslib";
+import { attr, css, html, nullableNumberConverter } from '@microsoft/fast-element';
+import { display, FoundationElement } from '@microsoft/fast-foundation';
+import { baseLayerLuminance, fillColor, neutralForegroundRest, neutralLayer1, neutralLayer2, neutralLayer3, neutralLayer4, neutralPalette, } from '../../../../../index-rollup';
+export class LayerBackground extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        this.backgroundLayerRecipe = 'L1';
+    }
+    baseLayerLuminanceChanged(prev, next) {
+        baseLayerLuminance.setValueFor(this, this.baseLayerLuminance);
+        this.updateBackgroundColor();
+    }
+    backgroundLayerRecipeChanged(prev, next) {
+        this.updateBackgroundColor();
+    }
+    updateBackgroundColor() {
+        if (!this.$fastController.isConnected) {
+            return;
+        }
+        if (this.backgroundLayerRecipe !== undefined) {
+            let swatch = null;
+            switch (this.backgroundLayerRecipe) {
+                case 'L1':
+                    swatch = neutralLayer1.getValueFor(this);
+                    break;
+                case 'L2':
+                    swatch = neutralLayer2.getValueFor(this);
+                    break;
+                case 'L3':
+                    swatch = neutralLayer3.getValueFor(this);
+                    break;
+                case 'L4':
+                    swatch = neutralLayer4.getValueFor(this);
+                    break;
+            }
+            if (swatch !== null) {
+                fillColor.setValueFor(this, swatch);
+            }
+        }
+    }
+    handleChange(record) {
+        if (record.token === neutralPalette) {
+            this.updateBackgroundColor();
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        neutralPalette.subscribe(this);
+        this.updateBackgroundColor();
+    }
+}
+__decorate([
+    attr({ attribute: 'base-layer-luminance', converter: nullableNumberConverter })
+], LayerBackground.prototype, "baseLayerLuminance", void 0);
+__decorate([
+    attr({ attribute: 'background-layer-recipe' })
+], LayerBackground.prototype, "backgroundLayerRecipe", void 0);
+export const layerBackgroundTemplate = html ` <slot></slot> `;
+export const layerBackgroundStyles = css `
+  ${display('block')} :host {
+    background: ${fillColor};
+    color: ${neutralForegroundRest};
+  }
+`;
+export const layerBackground = LayerBackground.compose({
+    baseName: 'layer-background',
+    template: layerBackgroundTemplate,
+    styles: layerBackgroundStyles,
+});

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

@@ -0,0 +1,18 @@
+import { __decorate } from "tslib";
+import { customElement } from '@microsoft/fast-element';
+import { SampleApp } from './sample-app';
+import { sampleAppTemplate as template } from './sample-app.template';
+import { sampleAppStyles as styles } from './sample-app.styles';
+let AppSampleApp = class AppSampleApp extends SampleApp {
+};
+AppSampleApp = __decorate([
+    customElement({
+        name: 'app-sample-app',
+        template,
+        styles,
+    })
+], AppSampleApp);
+export { AppSampleApp };
+export * from './sample-app.template';
+export * from './sample-app.styles';
+export * from './sample-app';

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

@@ -0,0 +1,3 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+export class SampleApp extends FoundationElement {
+}

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

@@ -0,0 +1,166 @@
+import { css } from "@microsoft/fast-element";
+import { display, forcedColorsStylesheetBehavior } from "@microsoft/fast-foundation";
+import { SystemColors } from "@microsoft/fast-web-utilities";
+import { bodyFont, controlCornerRadius, designUnit, elevation, fillColor, neutralForegroundHint, neutralForegroundRest, typeRampMinus2FontSize, typeRampPlus3FontSize, typeRampPlus3LineHeight, } from "../../../../../index-rollup";
+export const sampleAppStyles = css `
+    ${display("flex")}
+
+    :host {
+        flex-direction: column;
+        font-family: ${bodyFont};
+        color: ${neutralForegroundRest};
+        box-sizing: border-box;
+        min-height: 650px;
+        min-width: 775px;
+        background: ${fillColor};
+        border-radius: calc(${controlCornerRadius} * 1px);
+        --elevation: 20;
+        ${elevation}
+        --gutter: 20;
+    }
+
+    app-layer-background {
+        display: flex;
+        flex-grow: 1;
+    }
+
+    p {
+        margin: 0;
+    }
+
+    .icon {
+        pointer-events: none;
+    }
+
+    .wrapper {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        position: relative;
+    }
+
+    .toolbar {
+        display: flex;
+        align-items: center;
+        box-sizing: border-box;
+        height: 40px;
+        padding: 0 12px;
+    }
+
+    fast-tabs {
+        flex-grow: 1;
+    }
+
+    fast-tabs::part(tablist) {
+        padding: 0 4px;
+        align-self: start;
+    }
+
+    fast-tabs::part(activeIndicator) {
+        margin: 0;
+    }
+
+    fast-tab {
+        padding: calc(${designUnit} * 5px) calc(${designUnit} * 3px);
+    }
+
+    fast-tab-panel {
+        padding: 0;
+        height: 100%;
+    }
+
+    .content {
+        display: flex;
+        align-items: stretch;
+        width: 100%;
+        text-align: start;
+        box-shadow: none;
+    }
+
+    .pane {
+        width: 240px;
+    }
+
+    .pane > fast-listbox {
+        width: 100%;
+    }
+
+    .details {
+        height: unset;
+        box-shadow: none;
+    }
+
+    /* wrapper, toolbar, content, pane, details */
+
+    .content .heading {
+        font-size: ${typeRampPlus3FontSize};
+        line-height: ${typeRampPlus3LineHeight};
+        margin: 0;
+        margin-bottom: 10px;
+        font-weight: bold;
+    }
+
+    .icon {
+        fill: currentColor;
+    }
+
+    .saturation-slider-track {
+        height: 100%;
+        border-radius: calc(${controlCornerRadius} * 1px);
+    }
+
+    .hue-slider-track {
+        height: 100%;
+        border-radius: calc(${controlCornerRadius} * 1px);
+        background-image:
+            linear-gradient(
+                to right,
+                rgb(255, 0, 0),
+                rgb(255, 77, 0),
+                rgb(255, 153, 0),
+                rgb(255, 230, 0),
+                rgb(204, 255, 0),
+                rgb(128, 255, 0),
+                rgb(51, 255, 0),
+                rgb(0, 255, 26),
+                rgb(0, 255, 102),
+                rgb(0, 255, 179),
+                rgb(0, 255, 255),
+                rgb(0, 179, 255),
+                rgb(0, 102, 255),
+                rgb(0, 26, 255),
+                rgb(51, 0, 255),
+                rgb(128, 0, 255),
+                rgb(204, 0, 255),
+                rgb(255, 0, 230),
+                rgb(255, 0, 153),
+                rgb(255, 0, 76),
+                rgb(255, 0, 4)
+            );"
+    }
+
+    .responsive-expand-flipper {
+        position: absolute;
+        left: -30px;
+        align-self: center;
+        display: none;
+        visibility: hidden;
+    }
+
+    site-color-swatch {
+        margin: 0;
+    }
+
+    fast-slider-label {
+        font-size: ${typeRampMinus2FontSize};
+        color: ${neutralForegroundHint};
+    }
+`.withBehaviors(forcedColorsStylesheetBehavior(css `
+            .text-container {
+                color: ${SystemColors.ButtonText};
+            }
+            fast-tab:hover[aria-selected="true"] {
+                background: ${SystemColors.Highlight};
+                fill: ${SystemColors.HighlightText};
+            }
+        `));

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

@@ -0,0 +1,97 @@
+import { html } from '@microsoft/fast-element';
+import { AppSamplePage } from '../sample-page';
+// import DataAreaIcon from "@fluentui/svg-icons/icons/data_area_24_regular.svg";
+// import DataHistogramIcon from "@fluentui/svg-icons/icons/data_histogram_24_regular.svg";
+// import DataScatterIcon from "@fluentui/svg-icons/icons/data_scatter_24_regular.svg";
+AppSamplePage;
+export const sampleAppTemplate = html `
+  <template>
+    <app-layer-background background-layer-recipe="L3">
+      <div class="wrapper">
+        <div class="toolbar">
+          <p>Adaptive sample app</p>
+        </div>
+        <fluent-tabs orientation="vertical">
+          <fluent-tab id="tab-1" title="Area">
+            <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M3 3.75a.75.75 0 011.5 0v6.26l3.65-1.92c.23-.12.5-.12.73.01l3.82 2.25 5.6-4.2a.75.75 0 011.2.6V19.5h.75a.75.75 0 010 1.5H3.75a.75.75 0 01-.75-.75v-8.99-7.51zm1.5 7.95v7.8H18V8.25l-4.8 3.6a.75.75 0 01-.83.05L8.48 9.6 4.5 11.7z"
+              />
+            </svg>
+          </fluent-tab>
+          <fluent-tab id="tab-2" title="Histogram">
+            <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M8.5 5.23c0-1.24 1-2.25 2.25-2.25h2.5c1.24 0 2.25 1 2.25 2.25V7h3.25C19.99 7 21 8 21 9.25v11c0 .41-.34.75-.75.75H3.75a.75.75 0 01-.75-.75v-8C3 11.01 4 10 5.25 10H8.5V5.23zM10 19.5h4V5.23a.75.75 0 00-.75-.75h-2.5a.75.75 0 00-.75.75V19.5zm-1.5-8H5.25a.75.75 0 00-.75.75v7.25h4v-8zm7 8h4V9.25a.75.75 0 00-.75-.75H15.5v11z"
+              />
+            </svg>
+          </fluent-tab>
+          <fluent-tab id="tab-3" title="Scatter">
+            <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M3 3.75a.75.75 0 011.5 0V19.5h15.75a.75.75 0 010 1.5H3.75a.75.75 0 01-.75-.75V3.75zM17 4a3 3 0 100 6 3 3 0 000-6zm-1.5 3a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM6 9a3 3 0 116 0 3 3 0 01-6 0zm3-1.5a1.5 1.5 0 100 3 1.5 1.5 0 000-3zm6 4.5a3 3 0 100 6 3 3 0 000-6zm-1.5 3a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"
+              />
+            </svg>
+          </fluent-tab>
+          <fluent-tab-panel id="tab-panel-1">
+            <fluent-card class="content">
+              <div class="pane">
+                <fluent-tree-view render-collapsed-nodes="false">
+                  <fluent-tree-item>
+                    Root item 1
+                    <fluent-divider></fluent-divider>
+                    <fluent-tree-item expanded>
+                      Flowers
+                      <fluent-tree-item>Daisy</fluent-tree-item>
+                      <fluent-tree-item disabled> Sunflower </fluent-tree-item>
+                      <fluent-tree-item expanded>
+                        Rose
+                        <fluent-divider role="presentation"></fluent-divider>
+                        <fluent-tree-item>Pink</fluent-tree-item>
+                        <fluent-tree-item>Red</fluent-tree-item>
+                        <fluent-tree-item>White</fluent-tree-item>
+                      </fluent-tree-item>
+                    </fluent-tree-item>
+                    <fluent-tree-item>Nested item 2</fluent-tree-item>
+                    <fluent-tree-item>Nested item 3</fluent-tree-item>
+                  </fluent-tree-item>
+                  <fluent-tree-item>
+                    Root item 2
+                    <fluent-tree-item>
+                      Flowers
+                      <fluent-divider></fluent-divider>
+                      <fluent-tree-item disabled> Daisy </fluent-tree-item>
+                      <fluent-tree-item>Sunflower</fluent-tree-item>
+                      <fluent-tree-item>Rose</fluent-tree-item>
+                    </fluent-tree-item>
+                    <fluent-tree-item>Nested item 2</fluent-tree-item>
+                    <fluent-tree-item>Nested item 3</fluent-tree-item>
+                  </fluent-tree-item>
+                  <fluent-tree-item> Root item 3 </fluent-tree-item>
+                </fluent-tree-view>
+              </div>
+              <fluent-card class="details"></fluent-card>
+            </fluent-card>
+          </fluent-tab-panel>
+          <fluent-tab-panel id="tab-panel-2">
+            <fluent-card class="content">
+              <div class="pane">
+                <fluent-listbox>
+                  <fluent-option>Item 1</fluent-option>
+                  <fluent-option>Item 2</fluent-option>
+                  <fluent-option>Item 3</fluent-option>
+                </fluent-listbox>
+              </div>
+              <fluent-card class="details"></fluent-card>
+            </fluent-card>
+          </fluent-tab-panel>
+          <fluent-tab-panel id="tab-panel-3">
+            <fluent-card class="content">
+              <app-sample-page></app-sample-page>
+            </fluent-card>
+          </fluent-tab-panel>
+        </fluent-tabs>
+      </div>
+    </app-layer-background>
+  </template>
+`;

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

@@ -0,0 +1,18 @@
+import { __decorate } from "tslib";
+import { customElement } from '@microsoft/fast-element';
+import { SamplePage } from './sample-page';
+import { samplePageStyles as styles } from './sample-page.styles';
+import { samplePageTemplate as template } from './sample-page.template';
+let AppSamplePage = class AppSamplePage extends SamplePage {
+};
+AppSamplePage = __decorate([
+    customElement({
+        name: 'app-sample-page',
+        template,
+        styles,
+    })
+], AppSamplePage);
+export { AppSamplePage };
+export * from './sample-page.template';
+export * from './sample-page.styles';
+export * from './sample-page';

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

@@ -0,0 +1,3 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+export class SamplePage extends FoundationElement {
+}

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

@@ -0,0 +1,130 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { accentFillRest, controlCornerRadius, designUnit, neutralForegroundRest } from '../../../../../index-rollup';
+export const samplePageStyles = css `
+  ${display('flex')} :host {
+    display: grid;
+    grid-gap: calc(var(--gutter) * 2px);
+    grid-template-columns: auto 300px;
+    padding: calc(var(--gutter) * 2px);
+    position: relative;
+    border-radius: 0 calc(${controlCornerRadius} * 1px) calc(${controlCornerRadius} * 1px) 0;
+  }
+
+  .image-container {
+    /** Temp background */
+    background: #d6d6d6;
+    width: 100%;
+    height: 215px;
+    display: flex;
+  }
+
+  .badge {
+    align-self: flex-end;
+    margin: calc(var(--gutter) * 1px);
+  }
+
+  .text-container {
+    display: flex;
+    flex-direction: column;
+    padding: calc(var(--gutter) * 1px);
+    text-align: start;
+    color: ${neutralForegroundRest};
+  }
+
+  .sample-control {
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+
+  .sample-control-actions {
+    margin-inline-start: auto;
+  }
+
+  .sample-control-text {
+    margin-inline-start: calc(${designUnit} * 2px + 2px);
+  }
+
+  .sample-control-icon {
+    width: 21px;
+    height: 21px;
+    background-color: ${accentFillRest};
+    border-radius: calc(${controlCornerRadius} * 1px);
+  }
+
+  .preview-controls {
+    display: grid;
+    grid-auto-rows: max-content;
+    grid-gap: 20px;
+  }
+
+  .control-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 20px;
+  }
+
+  .control-container-2 {
+    display: grid;
+    grid-template-columns: 1fr auto auto;
+    grid-gap: 20px;
+  }
+
+  .control-container p {
+    margin-inline-start: calc(${designUnit} * 2px + 2px);
+  }
+
+  .control-container-grid {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    text-align: start;
+    color: ${neutralForegroundRest};
+  }
+
+  .checkbox {
+    grid-row: 2;
+  }
+
+  .checkbox-label {
+    grid-row: 2;
+    grid-column: 2;
+  }
+
+  fast-card {
+    width: 280px;
+  }
+
+  fast-badge {
+    --badge-fill-primary: #e4bc11;
+    --badge-color-primary: #000000;
+  }
+
+  fast-slider {
+    min-width: unset;
+  }
+
+  fast-tab-panel {
+    height: 100%;
+  }
+
+  fast-tab[aria-selected='true'] {
+    background: transparent;
+  }
+
+  fast-radio-group.example-radios {
+    margin: 0;
+  }
+
+  fast-radio-group.example-radios::part(positioning-region) {
+    display: grid;
+    grid-template-columns: auto;
+    height: 100%;
+  }
+
+  fast-radio-group.swatches::part(positioning-region) {
+    display: grid;
+    grid-gap: 10px;
+    grid-auto-flow: column;
+  }
+`;