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

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

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

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

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

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

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

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

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

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

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

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

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

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

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