@fluentui/web-components 3.0.0-rc.25 → 3.0.0-rc.27

package/dist/esm/option/option.js.map

@@ -1 +1 @@
-{"version":3,"file":"option.js","sourceRoot":"","sources":["../../../src/option/option.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"option.js","sourceRoot":"","sources":["../../../src/option/option.ts"],"names":[],"mappings":"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"}

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.base.d.ts

@@ -45,7 +45,7 @@ export declare class BaseProgressBar extends FASTElement {
      *
      * HTML Attribute: `value`
      *
-     * @internal
+     * @public
      */
     value?: number;
     /**
@@ -60,7 +60,7 @@ export declare class BaseProgressBar extends FASTElement {
      *
      * HTML Attribute: `min`
      *
-     * @internal
+     * @public
      */
     min?: number;
     /**
@@ -76,7 +76,7 @@ export declare class BaseProgressBar extends FASTElement {
      *
      * HTML Attribute: `max`
      *
-     * @internal
+     * @public
      */
     max?: number;
     /**

package/dist/esm/progress-bar/progress-bar.d.ts

@@ -5,6 +5,7 @@ import type { ProgressBarShape, ProgressBarThickness } from './progress-bar.opti
  * Based on BaseProgressBar and includes style and layout specific attributes
  *
  * @tag fluent-progress-bar
+ * @csspart indicator - The internal progress indicator element.
  *
  * @public
  */

package/dist/esm/progress-bar/progress-bar.js

@@ -6,6 +6,7 @@ import { BaseProgressBar } from './progress-bar.base.js';
  * Based on BaseProgressBar and includes style and layout specific attributes
  *
  * @tag fluent-progress-bar
+ * @csspart indicator - The internal progress indicator element.
  *
  * @public
  */

package/dist/esm/progress-bar/progress-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.js","sourceRoot":"","sources":["../../../src/progress-bar/progress-bar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAGzD;;;;;;;GAOG;AACH,MAAM,OAAO,WAAY,SAAQ,eAAe;CAuB/C;AAZQ;IADN,IAAI;8CACmC;AAWjC;IADN,IAAI;0CAC2B"}
+{"version":3,"file":"progress-bar.js","sourceRoot":"","sources":["../../../src/progress-bar/progress-bar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAGzD;;;;;;;;GAQG;AACH,MAAM,OAAO,WAAY,SAAQ,eAAe;CAuB/C;AAZQ;IADN,IAAI;8CACmC;AAWjC;IADN,IAAI;0CAC2B"}

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>

package/dist/esm/radio/radio.d.ts

@@ -6,8 +6,9 @@ import { BaseCheckbox } from '../checkbox/checkbox.base.js';
  * @tag fluent-radio
  *
  * @slot checked-indicator - The checked indicator slot
- * @fires change - Emits a custom change event when the checked state changes
- * @fires input - Emits a custom input event when the checked state changes
+ * @fires {Event} change - Emits a custom change event when the checked state changes
+ * @fires {Event} input - Emits a custom input event when the checked state changes
+ * @fires {CustomEvent} disabled - Emits a custom disabled event when the disabled state changes
  *
  * @public
  */

package/dist/esm/radio/radio.js

@@ -6,8 +6,9 @@ import { BaseCheckbox } from '../checkbox/checkbox.base.js';
  * @tag fluent-radio
  *
  * @slot checked-indicator - The checked indicator slot
- * @fires change - Emits a custom change event when the checked state changes
- * @fires input - Emits a custom input event when the checked state changes
+ * @fires {Event} change - Emits a custom change event when the checked state changes
+ * @fires {Event} input - Emits a custom input event when the checked state changes
+ * @fires {CustomEvent} disabled - Emits a custom disabled event when the disabled state changes
  *
  * @public
  */

package/dist/esm/radio/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/radio/radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAE5D;;;;;;;;;;;GAWG;AACH,MAAM,OAAO,KAAM,SAAQ,YAAY;IACrC;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,gBAAgB,CAAC,IAAI,GAAG,OAAO,CAAC;IACvC,CAAC;IAED;;;;;;;OAOG;IACO,eAAe,CAAC,IAAyB,EAAE,IAAyB;QAC5E,KAAK,CAAC,eAAe,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QAClC,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;IAClD,CAAC;IAED;;;;;;;OAOG;IACO,eAAe;QACvB,OAAO;IACT,CAAC;IAED;;;;;;;OAOG;IACI,YAAY;QACjB,OAAO;IACT,CAAC;IAED;;;;;;;OAOG;IACI,WAAW;QAChB,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;IACxC,CAAC;IAED;;;;;;;;OAQG;IACI,aAAa,CAAC,QAAiB,IAAI;QACxC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC;CACF"}
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/radio/radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAE5D;;;;;;;;;;;;GAYG;AACH,MAAM,OAAO,KAAM,SAAQ,YAAY;IACrC;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,gBAAgB,CAAC,IAAI,GAAG,OAAO,CAAC;IACvC,CAAC;IAED;;;;;;;OAOG;IACO,eAAe,CAAC,IAAyB,EAAE,IAAyB;QAC5E,KAAK,CAAC,eAAe,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QAClC,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;IAClD,CAAC;IAED;;;;;;;OAOG;IACO,eAAe;QACvB,OAAO;IACT,CAAC;IAED;;;;;;;OAOG;IACI,YAAY;QACjB,OAAO;IACT,CAAC;IAED;;;;;;;OAOG;IACI,WAAW;QAChB,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;IACxC,CAAC;IAED;;;;;;;;OAQG;IACI,aAAa,CAAC,QAAiB,IAAI;QACxC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC;CACF"}