@fluentui/web-components 3.0.0-rc.20 → 3.0.0-rc.22

package/dist/esm/avatar/avatar.styles.css

@@ -0,0 +1,475 @@
+
+  :host([hidden]){display:none}:host{display:inline-grid} :host {
+    position: relative;
+    place-items: center;
+    place-content: center;
+    grid-template: 1fr / 1fr;
+    flex-shrink: 0;
+    width: 32px;
+    height: 32px;
+    font-family: var(--fontFamilyBase);
+    font-weight: var(--fontWeightSemibold);
+    font-size: var(--fontSizeBase300);
+    border-radius: var(--borderRadiusCircular);
+    color: var(--colorNeutralForeground3);
+    background-color: var(--colorNeutralBackground6);
+    contain: layout style;
+  }
+
+  .monogram,
+  .default-icon {
+    grid-area: 1 / 1 / -1 / -1;
+  }
+
+  .monogram:empty {
+    display: none;
+  }
+
+  .default-slot:is(.has-slotted, :has-slotted) ~ .default-icon,
+  .default-slot:is(.has-slotted, :has-slotted) ~ .monogram,
+  :host(:is([name]):not([name=''])) .default-icon,
+  :host(:is([initials]):not([initials=''])) .default-icon {
+    display: none;
+  }
+
+  .default-icon,
+  ::slotted(svg) {
+    width: 20px;
+    height: 20px;
+    font-size: 20px;
+  }
+
+  ::slotted(img) {
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    border-radius: var(--borderRadiusCircular);
+  }
+
+  ::slotted([slot='badge']) {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    box-shadow: 0 0 0 var(--strokeWidthThin) var(--colorNeutralBackground1);
+  }
+
+  :host([size='64']) ::slotted([slot='badge']),
+  :host([size='72']) ::slotted([slot='badge']),
+  :host([size='96']) ::slotted([slot='badge']),
+  :host([size='120']) ::slotted([slot='badge']),
+  :host([size='128']) ::slotted([slot='badge']) {
+    box-shadow: 0 0 0 var(--strokeWidthThick) var(--colorNeutralBackground1);
+  }
+
+  :host([size='16']),
+  :host([size='20']),
+  :host([size='24']) {
+    font-size: var(--fontSizeBase100);
+    font-weight: var(--fontWeightRegular);
+  }
+
+  :host([size='16']) {
+    width: 16px;
+    height: 16px;
+  }
+
+  :host([size='20']) {
+    width: 20px;
+    height: 20px;
+  }
+
+  :host([size='24']) {
+    width: 24px;
+    height: 24px;
+  }
+
+  :host([size='16']) .default-icon,
+  :host([size='16']) ::slotted(svg) {
+    width: 12px;
+    height: 12px;
+    font-size: 12px;
+  }
+
+  :host([size='20']) .default-icon,
+  :host([size='24']) .default-icon,
+  :host([size='20']) ::slotted(svg),
+  :host([size='24']) ::slotted(svg) {
+    width: 16px;
+    height: 16px;
+    font-size: 16px;
+  }
+
+  :host([size='28']) {
+    width: 28px;
+    height: 28px;
+    font-size: var(--fontSizeBase200);
+  }
+
+  :host([size='36']) {
+    width: 36px;
+    height: 36px;
+  }
+
+  :host([size='40']) {
+    width: 40px;
+    height: 40px;
+  }
+
+  :host([size='48']),
+  :host([size='56']) {
+    font-size: var(--fontSizeBase400);
+  }
+
+  :host([size='48']) {
+    width: 48px;
+    height: 48px;
+  }
+
+  :host([size='48']) .default-icon,
+  :host([size='48']) ::slotted(svg) {
+    width: 24px;
+    height: 24px;
+    font-size: 24px;
+  }
+
+  :host([size='56']) {
+    width: 56px;
+    height: 56px;
+  }
+
+  :host([size='56']) .default-icon,
+  :host([size='56']) ::slotted(svg) {
+    width: 28px;
+    height: 28px;
+    font-size: 28px;
+  }
+
+  :host([size='64']),
+  :host([size='72']),
+  :host([size='96']) {
+    font-size: var(--fontSizeBase500);
+  }
+
+  :host([size='64']) .default-icon,
+  :host([size='72']) .default-icon,
+  :host([size='64']) ::slotted(svg),
+  :host([size='72']) ::slotted(svg) {
+    width: 32px;
+    height: 32px;
+    font-size: 32px;
+  }
+
+  :host([size='64']) {
+    width: 64px;
+    height: 64px;
+  }
+
+  :host([size='72']) {
+    width: 72px;
+    height: 72px;
+  }
+
+  :host([size='96']) {
+    width: 96px;
+    height: 96px;
+  }
+
+  :host([size='96']) .default-icon,
+  :host([size='120']) .default-icon,
+  :host([size='128']) .default-icon,
+  :host([size='96']) ::slotted(svg),
+  :host([size='120']) ::slotted(svg),
+  :host([size='128']) ::slotted(svg) {
+    width: 48px;
+    height: 48px;
+    font-size: 48px;
+  }
+
+  :host([size='120']),
+  :host([size='128']) {
+    font-size: var(--fontSizeBase600);
+  }
+
+  :host([size='120']) {
+    width: 120px;
+    height: 120px;
+  }
+
+  :host([size='128']) {
+    width: 128px;
+    height: 128px;
+  }
+
+  :host([shape='square']) {
+    border-radius: var(--borderRadiusMedium);
+  }
+
+  :host([shape='square'][size='20']),
+  :host([shape='square'][size='24']) {
+    border-radius: var(--borderRadiusSmall);
+  }
+
+  :host([shape='square'][size='56']),
+  :host([shape='square'][size='64']),
+  :host([shape='square'][size='72']) {
+    border-radius: var(--borderRadiusLarge);
+  }
+  :host([shape='square'][size='96']),
+  :host([shape='square'][size='120']),
+  :host([shape='square'][size='128']) {
+    border-radius: var(--borderRadiusXLarge);
+  }
+
+  :host([data-color='brand']) {
+    color: var(--colorNeutralForegroundStaticInverted);
+    background-color: var(--colorBrandBackgroundStatic);
+  }
+
+  :host([data-color='dark-red']) {
+    color: var(--colorPaletteDarkRedForeground2);
+    background-color: var(--colorPaletteDarkRedBackground2);
+  }
+
+  :host([data-color='cranberry']) {
+    color: var(--colorPaletteCranberryForeground2);
+    background-color: var(--colorPaletteCranberryBackground2);
+  }
+
+  :host([data-color='red']) {
+    color: var(--colorPaletteRedForeground2);
+    background-color: var(--colorPaletteRedBackground2);
+  }
+
+  :host([data-color='pumpkin']) {
+    color: var(--colorPalettePumpkinForeground2);
+    background-color: var(--colorPalettePumpkinBackground2);
+  }
+
+  :host([data-color='peach']) {
+    color: var(--colorPalettePeachForeground2);
+    background-color: var(--colorPalettePeachBackground2);
+  }
+
+  :host([data-color='marigold']) {
+    color: var(--colorPaletteMarigoldForeground2);
+    background-color: var(--colorPaletteMarigoldBackground2);
+  }
+
+  :host([data-color='gold']) {
+    color: var(--colorPaletteGoldForeground2);
+    background-color: var(--colorPaletteGoldBackground2);
+  }
+
+  :host([data-color='brass']) {
+    color: var(--colorPaletteBrassForeground2);
+    background-color: var(--colorPaletteBrassBackground2);
+  }
+
+  :host([data-color='brown']) {
+    color: var(--colorPaletteBrownForeground2);
+    background-color: var(--colorPaletteBrownBackground2);
+  }
+
+  :host([data-color='forest']) {
+    color: var(--colorPaletteForestForeground2);
+    background-color: var(--colorPaletteForestBackground2);
+  }
+
+  :host([data-color='seafoam']) {
+    color: var(--colorPaletteSeafoamForeground2);
+    background-color: var(--colorPaletteSeafoamBackground2);
+  }
+
+  :host([data-color='dark-green']) {
+    color: var(--colorPaletteDarkGreenForeground2);
+    background-color: var(--colorPaletteDarkGreenBackground2);
+  }
+
+  :host([data-color='light-teal']) {
+    color: var(--colorPaletteLightTealForeground2);
+    background-color: var(--colorPaletteLightTealBackground2);
+  }
+
+  :host([data-color='teal']) {
+    color: var(--colorPaletteTealForeground2);
+    background-color: var(--colorPaletteTealBackground2);
+  }
+
+  :host([data-color='steel']) {
+    color: var(--colorPaletteSteelForeground2);
+    background-color: var(--colorPaletteSteelBackground2);
+  }
+
+  :host([data-color='blue']) {
+    color: var(--colorPaletteBlueForeground2);
+    background-color: var(--colorPaletteBlueBackground2);
+  }
+
+  :host([data-color='royal-blue']) {
+    color: var(--colorPaletteRoyalBlueForeground2);
+    background-color: var(--colorPaletteRoyalBlueBackground2);
+  }
+
+  :host([data-color='cornflower']) {
+    color: var(--colorPaletteCornflowerForeground2);
+    background-color: var(--colorPaletteCornflowerBackground2);
+  }
+
+  :host([data-color='navy']) {
+    color: var(--colorPaletteNavyForeground2);
+    background-color: var(--colorPaletteNavyBackground2);
+  }
+
+  :host([data-color='lavender']) {
+    color: var(--colorPaletteLavenderForeground2);
+    background-color: var(--colorPaletteLavenderBackground2);
+  }
+
+  :host([data-color='purple']) {
+    color: var(--colorPalettePurpleForeground2);
+    background-color: var(--colorPalettePurpleBackground2);
+  }
+
+  :host([data-color='grape']) {
+    color: var(--colorPaletteGrapeForeground2);
+    background-color: var(--colorPaletteGrapeBackground2);
+  }
+
+  :host([data-color='lilac']) {
+    color: var(--colorPaletteLilacForeground2);
+    background-color: var(--colorPaletteLilacBackground2);
+  }
+
+  :host([data-color='pink']) {
+    color: var(--colorPalettePinkForeground2);
+    background-color: var(--colorPalettePinkBackground2);
+  }
+
+  :host([data-color='magenta']) {
+    color: var(--colorPaletteMagentaForeground2);
+    background-color: var(--colorPaletteMagentaBackground2);
+  }
+
+  :host([data-color='plum']) {
+    color: var(--colorPalettePlumForeground2);
+    background-color: var(--colorPalettePlumBackground2);
+  }
+
+  :host([data-color='beige']) {
+    color: var(--colorPaletteBeigeForeground2);
+    background-color: var(--colorPaletteBeigeBackground2);
+  }
+
+  :host([data-color='mink']) {
+    color: var(--colorPaletteMinkForeground2);
+    background-color: var(--colorPaletteMinkBackground2);
+  }
+
+  :host([data-color='platinum']) {
+    color: var(--colorPalettePlatinumForeground2);
+    background-color: var(--colorPalettePlatinumBackground2);
+  }
+
+  :host([data-color='anchor']) {
+    color: var(--colorPaletteAnchorForeground2);
+    background-color: var(--colorPaletteAnchorBackground2);
+  }
+
+  :host([active]) {
+    /* Work-around for text pixel snapping at the end of the animation */
+    transform: perspective(1px);
+    transition-property: transform, opacity;
+    transition-duration: var(--durationUltraSlow), var(--durationFaster);
+    transition-delay: var(--curveEasyEaseMax), var(--curveLinear);
+  }
+
+  :host([active])::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    border-radius: inherit;
+    transition-property: margin, opacity;
+    transition-duration: var(--durationUltraSlow), var(--durationSlower);
+    transition-delay: var(--curveEasyEaseMax), var(--curveLinear);
+  }
+  :host([active])::before {
+    box-shadow: var(--shadow8);
+    border-style: solid;
+    border-color: var(--colorBrandBackgroundStatic);
+  }
+
+  :host([active][appearance='shadow'])::before {
+    border-style: none;
+    border-color: none;
+  }
+
+  :host([active]:not([appearance='shadow']))::before {
+    margin: calc(-2 * var(--strokeWidthThick));
+    border-width: var(--strokeWidthThick);
+  }
+
+  :host([size='56'][active]:not([appearance='shadow']))::before,
+  :host([size='64'][active]:not([appearance='shadow']))::before {
+    margin: calc(-2 * var(--strokeWidthThicker));
+    border-width: var(--strokeWidthThicker);
+  }
+
+  :host([size='72'][active]:not([appearance='shadow']))::before,
+  :host([size='96'][active]:not([appearance='shadow']))::before,
+  :host([size='120'][active]:not([appearance='shadow']))::before,
+  :host([size='128'][active]:not([appearance='shadow']))::before {
+    margin: calc(-2 * var(--strokeWidthThickest));
+    border-width: var(--strokeWidthThickest);
+  }
+
+  :host([size='20'][active][appearance])::before,
+  :host([size='24'][active][appearance])::before,
+  :host([size='28'][active][appearance])::before {
+    box-shadow: var(--shadow4);
+  }
+
+  :host([size='56'][active][appearance])::before,
+  :host([size='64'][active][appearance])::before {
+    box-shadow: var(--shadow16);
+  }
+
+  :host([size='72'][active][appearance])::before,
+  :host([size='96'][active][appearance])::before,
+  :host([size='120'][active][appearance])::before,
+  :host([size='128'][active][appearance])::before {
+    box-shadow: var(--shadow28);
+  }
+
+  :host([active][appearance='ring'])::before {
+    box-shadow: none;
+  }
+
+  :host([active='inactive']) {
+    opacity: 0.8;
+    transform: scale(0.875);
+    transition-property: transform, opacity;
+    transition-duration: var(--durationUltraSlow), var(--durationFaster);
+    transition-delay: var(--curveDecelerateMin), var(--curveLinear);
+  }
+
+  :host([active='inactive'])::before {
+    margin: 0;
+    opacity: 0;
+    transition-property: margin, opacity;
+    transition-duration: var(--durationUltraSlow), var(--durationSlower);
+    transition-delay: var(--curveDecelerateMin), var(--curveLinear);
+  }
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    :host([active]) {
+      transition-duration: 0.01ms;
+    }
+
+    :host([active])::before {
+      transition-duration: 0.01ms;
+      transition-delay: 0.01ms;
+    }
+  }

package/dist/esm/avatar/avatar.template.html

@@ -0,0 +1,17 @@
+<f-template name="fluent-avatar" shadowrootmode="open">
+<template>{{styles}}<slot class="default-slot" f-slotted="{slottedDefaults}" f-ref="{defaultSlot}"></slot>
+    <span class="monogram" f-ref="{monogram}">{{initials}}</span>
+    <svg
+  width="1em"
+  height="1em"
+  viewBox="0 0 20 20"
+  class="default-icon"
+  fill="currentcolor"
+  aria-hidden="true"
+>
+  <path
+    d="M10 2a4 4 0 100 8 4 4 0 000-8zM7 6a3 3 0 116 0 3 3 0 01-6 0zm-2 5a2 2 0 00-2 2c0 1.7.83 2.97 2.13 3.8A9.14 9.14 0 0010 18c1.85 0 3.58-.39 4.87-1.2A4.35 4.35 0 0017 13a2 2 0 00-2-2H5zm-1 2a1 1 0 011-1h10a1 1 0 011 1c0 1.3-.62 2.28-1.67 2.95A8.16 8.16 0 0110 17a8.16 8.16 0 01-4.33-1.05A3.36 3.36 0 014 13z"
+  ></path>
+</svg>
+    <slot name="badge"></slot></template>
+</f-template>

package/dist/esm/avatar/define-async.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/avatar/define-async.js

@@ -0,0 +1,5 @@
+import { RenderableFASTElement } from '@microsoft/fast-html';
+import { definition } from './avatar.definition-async.js';
+import { Avatar } from './avatar.js';
+RenderableFASTElement(Avatar).defineAsync(definition);
+//# sourceMappingURL=define-async.js.map

package/dist/esm/avatar/define-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define-async.js","sourceRoot":"","sources":["../../../src/avatar/define-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,qBAAqB,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC"}

package/dist/esm/badge/badge.definition-async.d.ts

@@ -0,0 +1,10 @@
+import type { PartialFASTElementDefinition } from '@microsoft/fast-element';
+/**
+ * The async definition configuration for the fluent-badge element.
+ *
+ * @public
+ * @remarks
+ * This is used in server-side rendering (SSR) scenarios where the template
+ * is provided as a deferred option to be hydrated later.
+ */
+export declare const definition: PartialFASTElementDefinition;

package/dist/esm/badge/badge.definition-async.js

@@ -0,0 +1,14 @@
+import { tagName } from './badge.options.js';
+/**
+ * The async definition configuration for the fluent-badge element.
+ *
+ * @public
+ * @remarks
+ * This is used in server-side rendering (SSR) scenarios where the template
+ * is provided as a deferred option to be hydrated later.
+ */
+export const definition = {
+    name: tagName,
+    templateOptions: 'defer-and-hydrate',
+};
+//# sourceMappingURL=badge.definition-async.js.map

package/dist/esm/badge/badge.definition-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.definition-async.js","sourceRoot":"","sources":["../../../src/badge/badge.definition-async.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAE7C;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,UAAU,GAAiC;IACtD,IAAI,EAAE,OAAO;IACb,eAAe,EAAE,mBAAmB;CACrC,CAAC"}