@fluentui/web-components 2.5.12 → 3.0.0-alpha.10

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;
-  }
-`;

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

@@ -1,82 +0,0 @@
-import { html } from '@microsoft/fast-element';
-// import MoreIcon from "@fluentui/svg-icons/icons/more_horizontal_20_regular.svg";
-// import DownloadIcon from "@fluentui/svg-icons/icons/arrow_download_20_regular.svg";
-// import PlayIcon from "@fluentui/svg-icons/icons/play_20_regular.svg";
-export const samplePageTemplate = html `
-  <template>
-    <fluent-card>
-      <div class="image-container">
-        <fluent-badge fill="primary" color="primary" class="badge"> Badge </fluent-badge>
-      </div>
-      <div class="text-container">
-        <h3>Example card</h3>
-        <p>
-          At purus lectus quis habitant commodo, cras. Aliquam malesuada velit a tortor. Felis orci tellus netus risus
-          et ultricies augue aliquet. Suscipit mattis mus amet nibh...
-        </p>
-        <fluent-divider></fluent-divider>
-        <div class="sample-control">
-          <span class="sample-control-icon"></span>
-          <span class="sample-control-text">Label</span>
-          <div class="sample-control-actions">
-            <fluent-button appearance="stealth" aria-label="Example 'more' button">
-              <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-                <path
-                  d="M6.25 10a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0zm5 0a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0zM15 11.25a1.25 1.25 0 100-2.5 1.25 1.25 0 000 2.5z"
-                />
-              </svg>
-            </fluent-button>
-          </div>
-        </div>
-      </div>
-    </fluent-card>
-    <div class="preview-controls">
-      <fluent-progress aria-label="Example progress bar"></fluent-progress>
-      <fluent-menu aria-label="Example menu">
-        <fluent-menu-item role="menuitem" aria-label="Example menu item"> Menu item 1 </fluent-menu-item>
-        <fluent-menu-item role="menuitem" aria-label="Example menu item"> Menu item 2 </fluent-menu-item>
-        <fluent-menu-item role="menuitem" aria-label="Example menu item"> Menu item 3 </fluent-menu-item>
-        <fluent-divider></fluent-divider>
-        <fluent-menu-item role="menuitem" aria-label="Example menu item"> Menu item 4 </fluent-menu-item>
-      </fluent-menu>
-      <div class="control-container">
-        <fluent-radio-group class="example-radios" name="example radio group" orientation="vertical">
-          <fluent-radio aria-label="Example radio 1">Radio 1</fluent-radio>
-          <fluent-radio aria-label="Example radio 2">Radio 2</fluent-radio>
-        </fluent-radio-group>
-        <div class="control-container-grid">
-          <fluent-switch aria-label="Example toggle">Toggle</fluent-switch>
-          <fluent-checkbox class="checkbox" aria-label="Example checkbox"> Checkbox </fluent-checkbox>
-        </div>
-      </div>
-      <fluent-text-field placeholder="Text field" aria-label="Example text field"></fluent-text-field>
-      <div class="control-container-2">
-        <fluent-slider aria-label="Example slider"></fluent-slider>
-        <fluent-flipper></fluent-flipper>
-        <fluent-flipper disabled></fluent-flipper>
-      </div>
-      <div class="control-container">
-        <fluent-button appearance="accent" aria-label="Example 'download' button">
-          Button
-          <span slot="start">
-            <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-              <path
-                d="M15.5 17a.5.5 0 01.09 1H4.5a.5.5 0 01-.09-1H15.5zM10 2a.5.5 0 01.5.41V14.3l3.64-3.65a.5.5 0 01.64-.06l.07.06c.17.17.2.44.06.63l-.06.07-4.5 4.5a.5.5 0 01-.25.14L10 16a.5.5 0 01-.4-.2l-4.46-4.45a.5.5 0 01.64-.76l.07.06 3.65 3.64V2.5c0-.27.22-.5.5-.5z"
-              />
-            </svg>
-          </span>
-        </fluent-button>
-        <fluent-button appearance="neutral" aria-label="Example 'play' button">
-          Button
-          <span slot="start">
-            <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-              <path
-                d="M17.22 8.69a1.5 1.5 0 010 2.62l-10 5.5A1.5 1.5 0 015 15.5v-11A1.5 1.5 0 017.22 3.2l10 5.5zm-.48 1.75a.5.5 0 000-.88l-10-5.5A.5.5 0 006 4.5v11c0 .38.4.62.74.44l10-5.5z"
-              />
-            </svg>
-          </span>
-        </fluent-button>
-      </div>
-    </div>
-  </template>
-`;