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

package/dist/esm/option/option.styles.css

@@ -1,131 +1,134 @@
+:host([hidden]) {
+  display: none;
+}
+:host {
+  display: inline-grid;
+}
 
-  :host([hidden]){display:none}:host{display:inline-grid}
+:host {
+  -webkit-tap-highlight-color: transparent;
 
-  :host {
-    -webkit-tap-highlight-color: transparent;
-    
   font-family: var(--fontFamilyBase);
   font-size: var(--fontSizeBase300);
   line-height: var(--lineHeightBase300);
   font-weight: var(--fontWeightRegular);
 
-    align-items: center;
-    background-color: var(--colorNeutralBackground1);
-    border-radius: var(--borderRadiusMedium);
-    box-sizing: border-box;
-    color: var(--colorNeutralForeground2);
-    column-gap: var(--spacingHorizontalXS);
-    cursor: pointer;
-    grid-template-areas: 'indicator start content';
-    grid-template-columns: auto auto 1fr;
-    min-height: 32px;
-    padding: var(--spacingHorizontalSNudge);
-    text-align: start;
-  }
-
-  .content {
-    grid-area: content;
-    line-height: 1;
-  }
-
-  ::slotted([slot='start']) {
-    grid-area: start;
-  }
-
-  :host(:hover) {
-    background-color: var(--colorNeutralBackground1Hover);
-    color: var(--colorNeutralForeground2Hover);
-  }
-
-  :host(:active) {
-    background-color: var(--colorNeutralBackground1Pressed);
-    color: var(--colorNeutralForeground2Pressed);
-  }
-
-  :host(:disabled) {
-    background-color: var(--colorNeutralBackground1);
-    color: var(--colorNeutralForegroundDisabled);
-    cursor: default;
-  }
-
-  .checkmark-16-filled {
-    fill: currentColor;
-    width: 16px;
-  }
-
-  slot[name='checked-indicator'] > *,
-  ::slotted([slot='checked-indicator']) {
-    aspect-ratio: 1;
-    flex: 0 0 auto;
-    grid-area: indicator;
-    visibility: hidden;
-  }
-
-  :host(:state(selected)) :is(slot[name='checked-indicator'] > *, ::slotted([slot='checked-indicator'])) {
-    visibility: visible;
-  }
-
-  :host(:state(multiple)) .checkmark-16-filled,
-  :host(:not(:state(multiple))) .checkmark-12-regular {
-    display: none;
-  }
-
-  :host(:state(multiple)) .checkmark-12-regular {
-    background-color: var(--colorNeutralBackground1);
-    border-radius: var(--borderRadiusSmall);
-    border: var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);
-    box-sizing: border-box;
-    cursor: pointer;
-    fill: transparent;
-    position: relative;
-    visibility: visible;
-    width: 16px;
-  }
-
-  :host(:state(multiple):state(selected)) .checkmark-12-regular {
-    background-color: var(--colorCompoundBrandBackground);
-    border-color: var(--colorCompoundBrandStroke);
-    fill: var(--colorNeutralForegroundInverted);
-  }
-
-  :host(:disabled:state(multiple)) .checkmark-12-regular {
-    border-color: var(--colorNeutralStrokeDisabled);
-  }
-
-  :host(:disabled:state(multiple):state(selected)) .checkmark-12-regular {
-    background-color: var(--colorNeutralBackgroundDisabled);
+  align-items: center;
+  background-color: var(--colorNeutralBackground1);
+  border-radius: var(--borderRadiusMedium);
+  box-sizing: border-box;
+  color: var(--colorNeutralForeground2);
+  column-gap: var(--spacingHorizontalXS);
+  cursor: pointer;
+  grid-template-areas: 'indicator start content';
+  grid-template-columns: auto auto 1fr;
+  min-height: 32px;
+  padding: var(--spacingHorizontalSNudge);
+  text-align: start;
+}
+
+.content {
+  grid-area: content;
+  line-height: 1;
+}
+
+::slotted([slot='start']) {
+  grid-area: start;
+}
+
+:host(:hover) {
+  background-color: var(--colorNeutralBackground1Hover);
+  color: var(--colorNeutralForeground2Hover);
+}
+
+:host(:active) {
+  background-color: var(--colorNeutralBackground1Pressed);
+  color: var(--colorNeutralForeground2Pressed);
+}
+
+:host(:disabled) {
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForegroundDisabled);
+  cursor: default;
+}
+
+.checkmark-16-filled {
+  fill: currentColor;
+  width: 16px;
+}
+
+slot[name='checked-indicator'] > *,
+::slotted([slot='checked-indicator']) {
+  aspect-ratio: 1;
+  flex: 0 0 auto;
+  grid-area: indicator;
+  visibility: hidden;
+}
+
+:host(:state(selected)) :is(slot[name='checked-indicator'] > *, ::slotted([slot='checked-indicator'])) {
+  visibility: visible;
+}
+
+:host(:state(multiple)) .checkmark-16-filled,
+:host(:not(:state(multiple))) .checkmark-12-regular {
+  display: none;
+}
+
+:host(:state(multiple)) .checkmark-12-regular {
+  background-color: var(--colorNeutralBackground1);
+  border-radius: var(--borderRadiusSmall);
+  border: var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);
+  box-sizing: border-box;
+  cursor: pointer;
+  fill: transparent;
+  position: relative;
+  visibility: visible;
+  width: 16px;
+}
+
+:host(:state(multiple):state(selected)) .checkmark-12-regular {
+  background-color: var(--colorCompoundBrandBackground);
+  border-color: var(--colorCompoundBrandStroke);
+  fill: var(--colorNeutralForegroundInverted);
+}
+
+:host(:disabled:state(multiple)) .checkmark-12-regular {
+  border-color: var(--colorNeutralStrokeDisabled);
+}
+
+:host(:disabled:state(multiple):state(selected)) .checkmark-12-regular {
+  background-color: var(--colorNeutralBackgroundDisabled);
+}
+
+:host(:state(active)) {
+  border: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
+}
+
+@supports (selector(:host(:has(*)))) {
+  :host(:has([slot='start']:not([size='16']))) {
+    column-gap: var(--spacingHorizontalSNudge);
   }
+}
 
-  :host(:state(active)) {
-    border: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
-  }
+:host(:state(description)) {
+  column-gap: var(--spacingHorizontalSNudge);
+  grid-template-areas:
+    'indicator start content'
+    'indicator start description';
+}
 
-  @supports (selector(:host(:has(*)))) {
-    :host(:has([slot='start']:not([size='16']))) {
-      column-gap: var(--spacingHorizontalSNudge);
-    }
-  }
+::slotted([slot='description']) {
+  color: var(--colorNeutralForeground3);
+  grid-area: description;
 
-  :host(:state(description)) {
-    column-gap: var(--spacingHorizontalSNudge);
-    grid-template-areas:
-      'indicator start content'
-      'indicator start description';
-  }
-
-  ::slotted([slot='description']) {
-    color: var(--colorNeutralForeground3);
-    grid-area: description;
-    
   font-family: var(--fontFamilyBase);
   font-size: var(--fontSizeBase200);
   line-height: var(--lineHeightBase200);
   font-weight: var(--fontWeightRegular);
+}
 
+@media (forced-colors: active) {
+  :host(:disabled) {
+    color: GrayText;
   }
-
-  @media (forced-colors: active) {
-    :host(:disabled) {
-      color: GrayText;
-    }
-  }
+}

package/dist/esm/option/option.template.html

@@ -1,21 +1,24 @@
 <f-template name="fluent-option" shadowrootmode="open">
-<template>{{styles}}<slot name="checked-indicator">
-  <svg aria-hidden="true" class="checkmark-16-filled" viewBox="0 0 16 16">
-    <path
-      d="M14.046 3.486a.75.75 0 0 1-.032 1.06l-7.93 7.474a.85.85 0 0 1-1.188-.022l-2.68-2.72a.75.75 0 1 1 1.068-1.053l2.234 2.267l7.468-7.038a.75.75 0 0 1 1.06.032"
-    />
-  </svg>
-  <svg aria-hidden="true" class="checkmark-12-regular" viewBox="0 0 12 12">
-    <path
-      d="M9.854 3.146a.5.5 0 0 1 0 .708l-4.5 4.5a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L5 7.293l4.146-4.147a.5.5 0 0 1 .708 0"
-    />
-  </svg>
-</slot>
-     <slot name="start" f-ref="{start}"></slot> 
+  <template>
+    {{styles}}
+    <slot name="checked-indicator">
+      <svg aria-hidden="true" class="checkmark-16-filled" viewBox="0 0 16 16">
+        <path
+          d="M14.046 3.486a.75.75 0 0 1-.032 1.06l-7.93 7.474a.85.85 0 0 1-1.188-.022l-2.68-2.72a.75.75 0 1 1 1.068-1.053l2.234 2.267l7.468-7.038a.75.75 0 0 1 1.06.032"
+        />
+      </svg>
+      <svg aria-hidden="true" class="checkmark-12-regular" viewBox="0 0 12 12">
+        <path
+          d="M9.854 3.146a.5.5 0 0 1 0 .708l-4.5 4.5a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L5 7.293l4.146-4.147a.5.5 0 0 1 .708 0"
+        />
+      </svg>
+    </slot>
+    <slot name="start" f-ref="{start}"></slot>
     <div class="content" part="content">
       <slot f-slotted="{freeformOutputs filter elements(output)}"></slot>
     </div>
     <div class="description" part="description">
       <slot name="description" f-slotted="{descriptionSlot}"></slot>
-    </div></template>
+    </div>
+  </template>
 </f-template>

package/dist/esm/progress-bar/progress-bar.styles.css

@@ -1,99 +1,103 @@
+:host([hidden]) {
+  display: none;
+}
+:host {
+  display: block;
+}
 
-  :host([hidden]){display:none}:host{display:block}
+:host {
+  width: 100%;
+  height: 2px;
+  overflow-x: hidden;
+  background-color: var(--colorNeutralBackground6);
+  border-radius: var(--borderRadiusMedium);
+  contain: content;
 
-  :host {
-    width: 100%;
-    height: 2px;
-    overflow-x: hidden;
-    background-color: var(--colorNeutralBackground6);
-    border-radius: var(--borderRadiusMedium);
-    contain: content;
-
-    @supports (width: attr(value type(<number>))) {
-      --max: attr(max type(<number>), 100);
-      --min: attr(min type(<number>), 0);
-      --value: attr(value type(<number>), 0);
-      --indicator-width: clamp(0%, calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%), 100%);
-    }
+  @supports (width: attr(value type(<number>))) {
+    --max: attr(max type(<number>), 100);
+    --min: attr(min type(<number>), 0);
+    --value: attr(value type(<number>), 0);
+    --indicator-width: clamp(0%, calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100%), 100%);
   }
+}
 
-  :host([thickness='large']) {
-    height: 4px;
-  }
+:host([thickness='large']) {
+  height: 4px;
+}
 
-  :host([shape='square']) {
-    border-radius: var(--borderRadiusNone);
-  }
+:host([shape='square']) {
+  border-radius: var(--borderRadiusNone);
+}
 
-  .indicator {
-    background-color: var(--colorCompoundBrandBackground);
-    border-radius: inherit;
-    height: 100%;
-  }
+.indicator {
+  background-color: var(--colorCompoundBrandBackground);
+  border-radius: inherit;
+  height: 100%;
+}
 
-  :host([value]) .indicator {
-    transition: all 0.2s ease-in-out;
+:host([value]) .indicator {
+  transition: all 0.2s ease-in-out;
 
-    @supports (width: attr(value type(<number>))) {
-      width: var(--indicator-width);
-    }
+  @supports (width: attr(value type(<number>))) {
+    width: var(--indicator-width);
   }
+}
 
-  :host(:not([value])) .indicator {
-    position: relative;
-    width: 33%;
-    background-image: linear-gradient(
-      to right,
-      var(--colorNeutralBackground6) 0%,
-      var(--colorTransparentBackground) 50%,
-      var(--colorNeutralBackground6) 100%
-    );
-    animation-name: indeterminate;
-    animation-duration: 3s;
-    animation-timing-function: linear;
-    animation-iteration-count: infinite;
-  }
+:host(:not([value])) .indicator {
+  position: relative;
+  width: 33%;
+  background-image: linear-gradient(
+    to right,
+    var(--colorNeutralBackground6) 0%,
+    var(--colorTransparentBackground) 50%,
+    var(--colorNeutralBackground6) 100%
+  );
+  animation-name: indeterminate;
+  animation-duration: 3s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
 
-  :host([validation-state='error']) .indicator {
-    background-color: var(--colorPaletteRedBackground3);
-  }
+:host([validation-state='error']) .indicator {
+  background-color: var(--colorPaletteRedBackground3);
+}
 
-  :host([validation-state='warning']) .indicator {
-    background-color: var(--colorPaletteDarkOrangeBackground3);
-  }
+:host([validation-state='warning']) .indicator {
+  background-color: var(--colorPaletteDarkOrangeBackground3);
+}
 
-  :host([validation-state='success']) .indicator {
-    background-color: var(--colorPaletteGreenBackground3);
-  }
+:host([validation-state='success']) .indicator {
+  background-color: var(--colorPaletteGreenBackground3);
+}
 
-  @layer animations {
-    /* Disable animations for reduced motion */
-    @media (prefers-reduced-motion: no-preference) {
-      :host([value]) {
-        transition: none;
-      }
-      :host(:not([value])) .indicator {
-        animation-duration: 0.01ms;
-        animation-iteration-count: 1;
-      }
+@layer animations {
+  /* Disable animations for reduced motion */
+  @media (prefers-reduced-motion: no-preference) {
+    :host([value]) {
+      transition: none;
+    }
+    :host(:not([value])) .indicator {
+      animation-duration: 0.01ms;
+      animation-iteration-count: 1;
     }
   }
+}
 
-  @keyframes indeterminate {
-    0% {
-      inset-inline-start: -33%;
-    }
-    100% {
-      inset-inline-start: 100%;
-    }
+@keyframes indeterminate {
+  0% {
+    inset-inline-start: -33%;
+  }
+  100% {
+    inset-inline-start: 100%;
   }
+}
 
-  @media (forced-colors: active) {
-    :host {
-      background-color: CanvasText;
-    }
-    .indicator,
-    :host(:is([validation-state='success'], [validation-state='warning'], [validation-state='error'])) .indicator {
-      background-color: Highlight;
-    }
+@media (forced-colors: active) {
+  :host {
+    background-color: CanvasText;
+  }
+  .indicator,
+  :host(:is([validation-state='success'], [validation-state='warning'], [validation-state='error'])) .indicator {
+    background-color: Highlight;
   }
+}

package/dist/esm/progress-bar/progress-bar.template.html

@@ -1,3 +1,6 @@
 <f-template name="fluent-progress-bar" shadowrootmode="open">
-<template>{{styles}}<div class="indicator" part="indicator" f-ref="{indicator}"></div></template>
+  <template>
+    {{styles}}
+    <div class="indicator" part="indicator" f-ref="{indicator}"></div>
+  </template>
 </f-template>