@fluentui/web-components 3.0.0-rc.26 → 3.0.0-rc.28

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

@@ -1,13 +1,11 @@
 <f-template name="fluent-compound-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>
-        <slot name="description"></slot>
-      </span>
-       <slot name="end" f-ref="{end}"></slot> 
-    </template>
+  <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>
+      <slot name="description"></slot>
+    </span>
+    <slot name="end" f-ref="{end}"></slot>
+  </template>
 </f-template>

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

@@ -1,177 +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;
-  }
+: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

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

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

@@ -1,85 +1,84 @@
+@layer base {
+  :host {
+    --dialog-backdrop: var(--colorBackgroundOverlay);
+    --dialog-starting-scale: 0.85;
+  }
 
-  @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;
+    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 {
-      background: var(--dialog-backdrop, rgba(0, 0, 0, 0.4));
+      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;
     }
-
-    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;
+    ::backdrop {
+      transition-timing-function: var(--curveLinear);
     }
 
-    :host([type='non-modal']) dialog {
-      inset: 0;
-      z-index: 2;
-      overflow: auto;
+    /* Set opacity to 1 when open */
+    [open],
+    [open]::backdrop {
+      opacity: 1;
     }
 
-    @supports (max-height: 1dvh) {
-      dialog {
-        max-height: 100dvh;
-      }
+    /* 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);
     }
   }
 
-  @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;
     }
 
-    @starting-style {
-      [open],
-      [open]::backdrop {
-        opacity: 0;
-      }
-
-      dialog {
-        scale: var(--dialog-starting-scale);
-      }
+    dialog {
+      scale: var(--dialog-starting-scale);
     }
   }
+}
 
-  @media (forced-colors: active) {
-    @layer base {
-      dialog {
-        border: var(--strokeWidthThin) solid var(--colorTransparentStroke);
-      }
+@media (forced-colors: active) {
+  @layer base {
+    dialog {
+      border: var(--strokeWidthThin) solid var(--colorTransparentStroke);
     }
   }
+}

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

@@ -1,17 +1,20 @@
 <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}"
-  >
-    <div tabindex="-1"></div>
-    <slot></slot>
-  </dialog></template>
+  <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}"
+    >
+      <div tabindex="-1"></div>
+      <slot></slot>
+    </dialog>
+  </template>
 </f-template>