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

package/dist/esm/badge/badge.styles.css

@@ -0,0 +1,268 @@
+
+  :host([shape='square']) {
+    border-radius: var(--borderRadiusNone);
+  }
+
+  :host([shape='rounded']) {
+    border-radius: var(--borderRadiusMedium);
+  }
+
+  :host([shape='rounded']:is([size='tiny'], [size='extra-small'], [size='small'])) {
+    border-radius: var(--borderRadiusSmall);
+  }
+
+  
+  :host([appearance='tint']) {
+    background-color: var(--colorBrandBackground2);
+    color: var(--colorBrandForeground2);
+    border-color: var(--colorBrandStroke2);
+  }
+
+  :host([appearance='tint'][color='danger']) {
+    background-color: var(--colorPaletteRedBackground1);
+    color: var(--colorPaletteRedForeground1);
+    border-color: var(--colorPaletteRedBorder1);
+  }
+
+  :host([appearance='tint'][color='important']) {
+    background-color: var(--colorNeutralForeground3);
+    color: var(--colorNeutralBackground1);
+    border-color: var(--colorTransparentStroke);
+  }
+
+  :host([appearance='tint'][color='informative']) {
+    background-color: var(--colorNeutralBackground4);
+    color: var(--colorNeutralForeground3);
+    border-color: var(--colorNeutralStroke2);
+  }
+
+  :host([appearance='tint'][color='severe']) {
+    background-color: var(--colorPaletteDarkOrangeBackground1);
+    color: var(--colorPaletteDarkOrangeForeground1);
+    border-color: var(--colorPaletteDarkOrangeBorder1);
+  }
+
+  :host([appearance='tint'][color='subtle']) {
+    background-color: var(--colorNeutralBackground1);
+    color: var(--colorNeutralForeground3);
+    border-color: var(--colorNeutralStroke2);
+  }
+
+  :host([appearance='tint'][color='success']) {
+    background-color: var(--colorPaletteGreenBackground1);
+    color: var(--colorPaletteGreenForeground1);
+    border-color: var(--colorPaletteGreenBorder2);
+  }
+
+  :host([appearance='tint'][color='warning']) {
+    background-color: var(--colorPaletteYellowBackground1);
+    color: var(--colorPaletteYellowForeground2);
+    border-color: var(--colorPaletteYellowBorder1);
+  }
+
+  
+  :host([appearance='outline']) {
+    border-color: currentColor;
+    color: var(--colorBrandForeground1);
+    background-color: initial;
+  }
+
+  :host([appearance='outline'][color='danger']) {
+    color: var(--colorPaletteRedForeground3);
+  }
+
+  :host([appearance='outline'][color='important']) {
+    color: var(--colorNeutralForeground3);
+    border-color: var(--colorNeutralStrokeAccessible);
+  }
+
+  :host([appearance='outline'][color='informative']) {
+    color: var(--colorNeutralForeground3);
+    border-color: var(--colorNeutralStroke2);
+  }
+
+  :host([appearance='outline'][color='severe']) {
+    color: var(--colorPaletteDarkOrangeForeground3);
+  }
+
+  :host([appearance='outline'][color='subtle']) {
+    color: var(--colorNeutralForegroundStaticInverted);
+  }
+
+  :host([appearance='outline'][color='success']) {
+    color: var(--colorPaletteGreenForeground2);
+  }
+
+  :host([appearance='outline'][color='warning']) {
+    color: var(--colorPaletteYellowForeground2);
+  }
+
+  
+  :host([appearance='ghost']) {
+    color: var(--colorBrandForeground1);
+    background-color: initial;
+  }
+
+  :host([appearance='ghost'][color='danger']) {
+    color: var(--colorPaletteRedForeground3);
+  }
+
+  :host([appearance='ghost'][color='important']) {
+    color: var(--colorNeutralForeground1);
+  }
+
+  :host([appearance='ghost'][color='informative']) {
+    color: var(--colorNeutralForeground3);
+  }
+
+  :host([appearance='ghost'][color='severe']) {
+    color: var(--colorPaletteDarkOrangeForeground3);
+  }
+
+  :host([appearance='ghost'][color='subtle']) {
+    color: var(--colorNeutralForegroundInverted);
+  }
+
+  :host([appearance='ghost'][color='success']) {
+    color: var(--colorPaletteGreenForeground3);
+  }
+
+  :host([appearance='ghost'][color='warning']) {
+    color: var(--colorPaletteYellowForeground2);
+  }
+
+  
+  :host([color='danger']) {
+    background-color: var(--colorPaletteRedBackground3);
+    color: var(--colorNeutralForegroundOnBrand);
+  }
+
+  :host([color='important']) {
+    background-color: var(--colorNeutralForeground1);
+    color: var(--colorNeutralBackground1);
+  }
+
+  :host([color='informative']) {
+    background-color: var(--colorNeutralBackground5);
+    color: var(--colorNeutralForeground3);
+  }
+
+  :host([color='severe']) {
+    background-color: var(--colorPaletteDarkOrangeBackground3);
+    color: var(--colorNeutralForegroundOnBrand);
+  }
+
+  :host([color='subtle']) {
+    background-color: var(--colorNeutralBackground1);
+    color: var(--colorNeutralForeground1);
+  }
+
+  :host([color='success']) {
+    background-color: var(--colorPaletteGreenBackground3);
+    color: var(--colorNeutralForegroundOnBrand);
+  }
+
+  :host([color='warning']) {
+    background-color: var(--colorPaletteYellowBackground3);
+    color: var(--colorNeutralForeground1Static);
+  }
+
+  
+  :host([size='tiny']) {
+    width: 6px;
+    height: 6px;
+    font-size: 4px;
+    line-height: 4px;
+    padding-inline: 0;
+    min-width: unset;
+  }
+  :host([size='tiny']) ::slotted(svg) {
+    font-size: 6px;
+  }
+  :host([size='extra-small']) {
+    width: 10px;
+    height: 10px;
+    font-size: 6px;
+    line-height: 6px;
+    padding-inline: 0;
+    min-width: unset;
+  }
+  :host([size='extra-small']) ::slotted(svg) {
+    font-size: 10px;
+  }
+  :host([size='small']) {
+    min-width: 16px;
+    height: 16px;
+    font-size: var(--fontSizeBase100);
+    line-height: var(--lineHeightBase100);
+    padding-inline: calc(var(--spacingHorizontalXXS) + var(--spacingHorizontalXXS));
+  }
+  :host([size='small']) ::slotted(svg) {
+    font-size: 12px;
+  }
+  :host([size='large']) {
+    min-width: 24px;
+    height: 24px;
+    font-size: var(--fontSizeBase200);
+    line-height: var(--lineHeightBase200);
+    padding-inline: calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));
+  }
+  :host([size='large']) ::slotted(svg) {
+    font-size: 16px;
+  }
+  :host([size='extra-large']) {
+    min-width: 32px;
+    height: 32px;
+    font-size: var(--fontSizeBase200);
+    line-height: var(--lineHeightBase200);
+    padding-inline: calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));
+  }
+  :host([size='extra-large']) ::slotted(svg) {
+    font-size: 20px;
+  }
+
+  
+  :host([hidden]){display:none}:host{display:inline-flex} :host {
+    position: relative;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--fontFamilyBase);
+    font-weight: var(--fontWeightSemibold);
+    font-size: var(--fontSizeBase200);
+    line-height: var(--lineHeightBase200);
+    min-width: 20px;
+    height: 20px;
+    padding-inline: calc(var(--spacingHorizontalXS) + var(--spacingHorizontalXXS));
+    border-radius: var(--borderRadiusCircular);
+    border-color: var(--colorTransparentStroke);
+    background-color: var(--colorBrandBackground);
+    color: var(--colorNeutralForegroundOnBrand);
+    contain: content;
+  }
+
+  ::slotted(svg) {
+    font-size: 12px;
+  }
+
+  :host(:not([appearance='ghost']))::after {
+    position: absolute;
+    content: '';
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    border-style: solid;
+    border-width: var(--strokeWidthThin);
+    border-color: inherit;
+    border-radius: inherit;
+  }
+
+
+  @media (forced-colors: active) {
+    :host,
+    :host([appearance='outline']),
+    :host([appearance='tint']) {
+      border-color: CanvasText;
+    }
+  }

package/dist/esm/badge/badge.template.html

@@ -0,0 +1,5 @@
+<f-template name="fluent-badge" shadowrootmode="open">
+<template>{{styles}}<slot name="start" f-ref="{start}"></slot> 
+    <slot></slot>
+     <slot name="end" f-ref="{end}"></slot></template>
+</f-template>

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"define-async.js","sourceRoot":"","sources":["../../../src/badge/define-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,qBAAqB,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC"}

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

@@ -0,0 +1,10 @@
+import type { PartialFASTElementDefinition } from '@microsoft/fast-element';
+/**
+ * The async definition configuration for the fluent-button 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/button/button.definition-async.js

@@ -0,0 +1,14 @@
+import { tagName } from './button.options.js';
+/**
+ * The async definition configuration for the fluent-button 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=button.definition-async.js.map

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

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

package/dist/esm/button/button.styles.css

@@ -0,0 +1,267 @@
+
+  :host([hidden]){display:none}:host{display:inline-flex}
+
+  :host {
+    --icon-spacing: var(--spacingHorizontalSNudge);
+    position: relative;
+    contain: layout style;
+    vertical-align: middle;
+    align-items: center;
+    box-sizing: border-box;
+    justify-content: center;
+    text-align: center;
+    text-decoration-line: none;
+    margin: 0;
+    min-height: 32px;
+    outline-style: none;
+    background-color: var(--colorNeutralBackground1);
+    color: var(--colorNeutralForeground1);
+    border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
+    padding: 0 var(--spacingHorizontalM);
+    min-width: 96px;
+    border-radius: var(--borderRadiusMedium);
+    font-size: var(--fontSizeBase300);
+    font-family: var(--fontFamilyBase);
+    font-weight: var(--fontWeightSemibold);
+    line-height: var(--lineHeightBase300);
+    transition-duration: var(--durationFaster);
+    transition-property: background, border, color;
+    transition-timing-function: var(--curveEasyEase);
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .content {
+    display: inherit;
+  }
+
+  :host(:hover) {
+    background-color: var(--colorNeutralBackground1Hover);
+    color: var(--colorNeutralForeground1Hover);
+    border-color: var(--colorNeutralStroke1Hover);
+  }
+
+  :host(:hover:active) {
+    background-color: var(--colorNeutralBackground1Pressed);
+    border-color: var(--colorNeutralStroke1Pressed);
+    color: var(--colorNeutralForeground1Pressed);
+    outline-style: none;
+  }
+
+  :host(:focus-visible) {
+    border-color: var(--colorTransparentStroke);
+    outline: var(--strokeWidthThick) solid var(--colorTransparentStroke);
+    box-shadow: var(--shadow4), 0 0 0 2px var(--colorStrokeFocus2);
+  }
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    :host {
+      transition-duration: 0.01ms;
+    }
+  }
+
+  ::slotted(svg) {
+    font-size: 20px;
+    height: 20px;
+    width: 20px;
+    fill: currentColor;
+  }
+
+  ::slotted([slot='start']) {
+    margin-inline-end: var(--icon-spacing);
+  }
+
+  ::slotted([slot='end']),
+  [slot='end'] {
+    flex-shrink: 0;
+    margin-inline-start: var(--icon-spacing);
+  }
+
+  :host([icon-only]) {
+    min-width: 32px;
+    max-width: 32px;
+  }
+
+  :host([size='small']) {
+    --icon-spacing: var(--spacingHorizontalXS);
+    min-height: 24px;
+    min-width: 64px;
+    padding: 0 var(--spacingHorizontalS);
+    border-radius: var(--borderRadiusSmall);
+    font-size: var(--fontSizeBase200);
+    line-height: var(--lineHeightBase200);
+    font-weight: var(--fontWeightRegular);
+  }
+
+  :host([size='small'][icon-only]) {
+    min-width: 24px;
+    max-width: 24px;
+  }
+
+  :host([size='large']) {
+    min-height: 40px;
+    border-radius: var(--borderRadiusLarge);
+    padding: 0 var(--spacingHorizontalL);
+    font-size: var(--fontSizeBase400);
+    line-height: var(--lineHeightBase400);
+  }
+
+  :host([size='large'][icon-only]) {
+    min-width: 40px;
+    max-width: 40px;
+  }
+
+  :host([size='large']) ::slotted(svg) {
+    font-size: 24px;
+    height: 24px;
+    width: 24px;
+  }
+
+  :host(:is([shape='circular'], [shape='circular']:focus-visible)) {
+    border-radius: var(--borderRadiusCircular);
+  }
+
+  :host(:is([shape='square'], [shape='square']:focus-visible)) {
+    border-radius: var(--borderRadiusNone);
+  }
+
+  :host([appearance='primary']) {
+    background-color: var(--colorBrandBackground);
+    color: var(--colorNeutralForegroundOnBrand);
+    border-color: transparent;
+  }
+
+  :host([appearance='primary']:hover) {
+    background-color: var(--colorBrandBackgroundHover);
+  }
+
+  :host([appearance='primary']:is(:hover, :hover:active):not(:focus-visible)) {
+    border-color: transparent;
+  }
+
+  :host([appearance='primary']:is(:hover, :hover:active)) {
+    color: var(--colorNeutralForegroundOnBrand);
+  }
+
+  :host([appearance='primary']:hover:active) {
+    background-color: var(--colorBrandBackgroundPressed);
+  }
+
+  :host([appearance='primary']:focus-visible) {
+    border-color: var(--colorNeutralForegroundOnBrand);
+    box-shadow: var(--shadow2), 0 0 0 2px var(--colorStrokeFocus2);
+  }
+
+  :host([appearance='outline']) {
+    background-color: var(--colorTransparentBackground);
+  }
+
+  :host([appearance='outline']:hover) {
+    background-color: var(--colorTransparentBackgroundHover);
+  }
+
+  :host([appearance='outline']:hover:active) {
+    background-color: var(--colorTransparentBackgroundPressed);
+  }
+
+  :host([appearance='subtle']) {
+    background-color: var(--colorSubtleBackground);
+    color: var(--colorNeutralForeground2);
+    border-color: transparent;
+  }
+
+  :host([appearance='subtle']:hover) {
+    background-color: var(--colorSubtleBackgroundHover);
+    color: var(--colorNeutralForeground2Hover);
+    border-color: transparent;
+  }
+
+  :host([appearance='subtle']:hover:active) {
+    background-color: var(--colorSubtleBackgroundPressed);
+    color: var(--colorNeutralForeground2Pressed);
+    border-color: transparent;
+  }
+
+  :host([appearance='subtle']:hover) ::slotted(svg) {
+    fill: var(--colorNeutralForeground2BrandHover);
+  }
+
+  :host([appearance='subtle']:hover:active) ::slotted(svg) {
+    fill: var(--colorNeutralForeground2BrandPressed);
+  }
+
+  :host([appearance='transparent']) {
+    background-color: var(--colorTransparentBackground);
+    color: var(--colorNeutralForeground2);
+  }
+
+  :host([appearance='transparent']:hover) {
+    background-color: var(--colorTransparentBackgroundHover);
+    color: var(--colorNeutralForeground2BrandHover);
+  }
+
+  :host([appearance='transparent']:hover:active) {
+    background-color: var(--colorTransparentBackgroundPressed);
+    color: var(--colorNeutralForeground2BrandPressed);
+  }
+
+  :host(:is([appearance='transparent'], [appearance='transparent']:is(:hover, :active))) {
+    border-color: transparent;
+  }
+
+
+  
+
+  :host(:is(:disabled, [disabled-focusable], [appearance]:disabled, [appearance][disabled-focusable])),
+  :host(:is(:disabled, [disabled-focusable], [appearance]:disabled, [appearance][disabled-focusable]):hover),
+  :host(:is(:disabled, [disabled-focusable], [appearance]:disabled, [appearance][disabled-focusable]):hover:active) {
+    background-color: var(--colorNeutralBackgroundDisabled);
+    border-color: var(--colorNeutralStrokeDisabled);
+    color: var(--colorNeutralForegroundDisabled);
+    cursor: not-allowed;
+  }
+
+  :host([appearance='primary']:is(:disabled, [disabled-focusable])),
+  :host([appearance='primary']:is(:disabled, [disabled-focusable]):is(:hover, :hover:active)) {
+    border-color: transparent;
+  }
+
+  :host([appearance='outline']:is(:disabled, [disabled-focusable])),
+  :host([appearance='outline']:is(:disabled, [disabled-focusable]):is(:hover, :hover:active)) {
+    background-color: var(--colorTransparentBackground);
+  }
+
+  :host([appearance='subtle']:is(:disabled, [disabled-focusable])),
+  :host([appearance='subtle']:is(:disabled, [disabled-focusable]):is(:hover, :hover:active)) {
+    background-color: var(--colorTransparentBackground);
+    border-color: transparent;
+  }
+
+  :host([appearance='transparent']:is(:disabled, [disabled-focusable])),
+  :host([appearance='transparent']:is(:disabled, [disabled-focusable]):is(:hover, :hover:active)) {
+    border-color: transparent;
+    background-color: var(--colorTransparentBackground);
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      background-color: ButtonFace;
+      color: ButtonText;
+    }
+
+    :host(:is(:hover, :focus-visible)) {
+      border-color: Highlight !important;
+    }
+
+    :host([appearance='primary']:not(:is(:hover, :focus-visible))) {
+      background-color: Highlight;
+      color: HighlightText;
+      forced-color-adjust: none;
+    }
+
+    :host(:is(:disabled, [disabled-focusable], [appearance]:disabled, [appearance][disabled-focusable])) {
+      background-color: ButtonFace;
+      color: GrayText;
+      border-color: ButtonText;
+    }
+  }

package/dist/esm/button/button.template.html

@@ -0,0 +1,12 @@
+<f-template name="fluent-button" shadowrootmode="open">
+<template
+      @click="{clickHandler($e)}"
+      @keypress="{keypressHandler($e)}"
+    >{{styles}}
+       <slot name="start" f-ref="{start}"></slot> 
+      <span class="content" part="content">
+        <slot f-slotted="{defaultSlottedContent}"></slot>
+      </span>
+       <slot name="end" f-ref="{end}"></slot> 
+    </template>
+</f-template>

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"define-async.js","sourceRoot":"","sources":["../../../src/button/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/checkbox/checkbox.base.js

@@ -126,7 +126,7 @@ export class BaseCheckbox extends FASTElement {
      * @internal
      */
     requiredChanged(prev, next) {
-        if (this.$fastController.isConnected) {
+        if (this.elementInternals) {
             this.setValidity();
             this.elementInternals.ariaRequired = this.required ? 'true' : 'false';
         }
@@ -165,7 +165,7 @@ export class BaseCheckbox extends FASTElement {
      * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validationMessage | `ElementInternals.validationMessage`} property.
      */
     get validationMessage() {
-        if (this.elementInternals.validationMessage) {
+        if (this.elementInternals?.validationMessage) {
             return this.elementInternals.validationMessage;
         }
         if (!this._validationFallbackMessage) {
@@ -198,11 +198,11 @@ export class BaseCheckbox extends FASTElement {
     }
     set value(value) {
         this._value = value;
-        if (this.$fastController.isConnected) {
+        if (this.elementInternals) {
             this.setFormValue(value);
             this.setValidity();
-            Observable.notify(this, 'value');
         }
+        Observable.notify(this, 'value');
     }
     /**
      * Determines if the control can be submitted for constraint validation.
@@ -313,7 +313,9 @@ export class BaseCheckbox extends FASTElement {
      * @internal
      */
     setAriaChecked(value = this.checked) {
-        this.elementInternals.ariaChecked = value ? 'true' : 'false';
+        if (this.elementInternals) {
+            this.elementInternals.ariaChecked = value ? 'true' : 'false';
+        }
     }
     /**
      * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/setFormValue | `ElementInternals.setFormValue()`} method.
@@ -321,7 +323,7 @@ export class BaseCheckbox extends FASTElement {
      * @internal
      */
     setFormValue(value, state) {
-        this.elementInternals.setFormValue(value, value ?? state);
+        this.elementInternals?.setFormValue(value, value ?? state);
     }
     /**
      * Sets a custom validity message.
@@ -343,7 +345,7 @@ export class BaseCheckbox extends FASTElement {
      * @internal
      */
     setValidity(flags, message, anchor) {
-        if (this.$fastController.isConnected) {
+        if (this.elementInternals) {
             if (this.disabled || !this.required) {
                 this.elementInternals.setValidity({});
                 return;