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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"define-async.js","sourceRoot":"","sources":["../../../src/compound-button/define-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,uCAAuC,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,qBAAqB,CAAC,cAAc,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC"}

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

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

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

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

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

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

@@ -0,0 +1,177 @@
+
+  :host([shape='rounded']) {
+    border-radius: var(--borderRadiusMedium);
+  }
+
+  :host([shape='rounded']:is([size='tiny'], [size='extra-small'], [size='small'])) {
+    border-radius: var(--borderRadiusSmall);
+  }
+
+  
+  :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([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([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([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;
+  }
+
+
+  :host(:is([dot], [dot][appearance][size])) {
+    min-width: auto;
+    width: 6px;
+    height: 6px;
+    padding: 0;
+  }

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"define-async.js","sourceRoot":"","sources":["../../../src/counter-badge/define-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD,qBAAqB,CAAC,YAAY,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC"}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.definition-async.js","sourceRoot":"","sources":["../../../src/dialog/dialog.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/dialog/dialog.styles.css

@@ -0,0 +1,86 @@
+
+  @layer base {
+    :host {
+      --dialog-backdrop: var(--colorBackgroundOverlay);
+      --dialog-starting-scale: 0.85;
+    }
+
+    ::backdrop {
+      background: var(--dialog-backdrop, rgba(0, 0, 0, 0.4));
+    }
+
+    dialog {
+      background: var(--colorNeutralBackground1);
+      border-radius: var(--borderRadiusXLarge);
+      border: none;
+      box-shadow: var(--shadow64);
+      color: var(--colorNeutralForeground1);
+      max-height: 100vh;
+      padding: 0;
+      width: 100%;
+      max-width: 600px;
+    }
+
+    :host([type='non-modal']) dialog {
+      inset: 0;
+      position: fixed;
+      z-index: 2;
+      overflow: auto;
+    }
+
+    @supports (max-height: 1dvh) {
+      dialog {
+        max-height: 100dvh;
+      }
+    }
+  }
+
+  @layer animations {
+    /* Disable animations for reduced motion */
+    @media (prefers-reduced-motion: no-preference) {
+      dialog,
+      ::backdrop {
+        transition: display allow-discrete, opacity, overlay allow-discrete, scale;
+        transition-duration: var(--durationGentle);
+        transition-timing-function: var(--curveDecelerateMid);
+        /* Set opacity to 0 when closed */
+        opacity: 0;
+      }
+      ::backdrop {
+        transition-timing-function: var(--curveLinear);
+      }
+
+      /* Set opacity to 1 when open */
+      [open],
+      [open]::backdrop {
+        opacity: 1;
+      }
+
+      /* Exit styles for dialog */
+      dialog:not([open]) {
+        /* Make small when leaving */
+        scale: var(--dialog-starting-scale);
+        /* Faster leaving the stage then entering */
+        transition-timing-function: var(--curveAccelerateMid);
+      }
+    }
+
+    @starting-style {
+      [open],
+      [open]::backdrop {
+        opacity: 0;
+      }
+
+      dialog {
+        scale: var(--dialog-starting-scale);
+      }
+    }
+  }
+
+  @media (forced-colors: active) {
+    @layer base {
+      dialog {
+        border: var(--strokeWidthThin) solid var(--colorTransparentStroke);
+      }
+    }
+  }

package/dist/esm/dialog/dialog.template.html

@@ -0,0 +1,16 @@
+<f-template name="fluent-dialog" shadowrootmode="open">
+<template>{{styles}}<dialog
+    class="dialog"
+    part="dialog"
+    aria-modal="{{dialogModal}}"
+    aria-describedby="{{dialogDescribedby}}"
+    aria-labelledby="{{dialogLabelledby}}"
+    aria-label="{{dialogLabel}}"
+    role="{{dialogRole}}"
+    @click="{clickHandler($e)}"
+    @cancel="{hide()}"
+    f-ref="{dialog}"
+  >
+    <slot></slot>
+  </dialog></template>
+</f-template>

package/dist/esm/dialog-body/define-async.d.ts

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

package/dist/esm/dialog-body/define-async.js

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

package/dist/esm/dialog-body/define-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define-async.js","sourceRoot":"","sources":["../../../src/dialog-body/define-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,qBAAqB,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC"}

package/dist/esm/dialog-body/dialog-body.definition-async.d.ts

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

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

package/dist/esm/dialog-body/dialog-body.definition-async.js.map

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

package/dist/esm/dialog-body/dialog-body.styles.css

@@ -0,0 +1,87 @@
+
+  :host([hidden]){display:none}:host{display:grid}
+
+  :host {
+    background: var(--colorNeutralBackground1);
+    box-sizing: border-box;
+    gap: var(--spacingVerticalS);
+    padding: var(--spacingVerticalXXL) var(--spacingHorizontalXXL);
+    container: dialog-body / inline-size;
+  }
+
+  .title {
+    box-sizing: border-box;
+    align-items: flex-start;
+    background: var(--colorNeutralBackground1);
+    color: var(--colorNeutralForeground1);
+    column-gap: 8px;
+    display: flex;
+    font-family: var(--fontFamilyBase);
+    font-size: var(--fontSizeBase500);
+    font-weight: var(--fontWeightSemibold);
+    inset-block-start: 0;
+    justify-content: space-between;
+    line-height: var(--lineHeightBase500);
+    margin-block-end: calc(var(--spacingVerticalS) * -1);
+    margin-block-start: calc(var(--spacingVerticalXXL) * -1);
+    padding-block-end: var(--spacingVerticalS);
+    padding-block-start: var(--spacingVerticalXXL);
+  }
+
+  .content {
+    box-sizing: border-box;
+    color: var(--colorNeutralForeground1);
+    font-family: var(--fontFamilyBase);
+    font-size: var(--fontSizeBase300);
+    font-weight: var(--fontWeightRegular);
+    line-height: var(--lineHeightBase300);
+    min-height: 32px;
+  }
+
+  .actions {
+    box-sizing: border-box;
+    background: var(--colorNeutralBackground1);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacingVerticalS);
+    inset-block-end: 0;
+    margin-block-end: calc(var(--spacingVerticalXXL) * -1);
+    padding-block-end: var(--spacingVerticalXXL);
+    padding-block-start: var(--spacingVerticalL);
+  }
+
+  ::slotted([slot='title-action']) {
+    margin-inline-start: auto;
+  }
+
+  ::slotted([slot='title']) {
+    font: inherit;
+    padding: 0;
+    margin: 0;
+  }
+
+  /* align  title content to the end when there is no title*/
+  :not(:has(:is([slot='title'], [slot='title-action']))) .title {
+    justify-content: end;
+  }
+
+  @container (min-width: 480px) {
+    .actions {
+      align-items: center;
+      flex-direction: row;
+      justify-content: flex-end;
+      margin-block-start: calc(var(--spacingVerticalS) * -1);
+      padding-block-start: var(--spacingVerticalS);
+    }
+  }
+
+  /* For a11y, set sticky position for title and actions when the viewport is tall enough */
+  @media (min-height: 480px) {
+    .title {
+      position: sticky;
+      z-index: 1;
+    }
+    .actions {
+      position: sticky;
+      z-index: 2;
+    }

package/dist/esm/dialog-body/dialog-body.template.html

@@ -0,0 +1,11 @@
+<f-template name="fluent-dialog-body" shadowrootmode="open">
+<template>{{styles}}
+    <div class="title" part="title">
+      <slot name="title"></slot>
+      <slot name="title-action"></slot>
+      <slot name="close" @click="{clickHandler($e)}"></slot>
+    </div>
+    <div class="content" part="content"><slot></slot></div>
+    <div class="actions" part="actions"><slot name="action"></slot></div>
+  </template>
+</f-template>

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"define-async.js","sourceRoot":"","sources":["../../../src/divider/define-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,qBAAqB,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC"}

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

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

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

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

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