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

package/dist/esm/dropdown/dropdown.template.html

@@ -1,21 +1,28 @@
 <f-template name="fluent-dropdown" shadowrootmode="open">
-<template
-      @click="{clickHandler($e)}"
-      @focusout="{focusoutHandler($e)}"
-      @keydown="{keydownHandler($e)}"
-      @mousedown="{mousedownHandler($e)}"
-    >{{styles}}
-      <div class="control">
-        <slot name="control" f-ref="{controlSlot}"></slot>
-        <slot name="indicator" f-ref="{indicatorSlot}">
-  <svg class="chevron-down-20-regular" aria-hidden="true" slot="indicator" viewBox="0 0 20 20" f-ref="{indicator}">
-    <path
-      d="M15.85 7.65a.5.5 0 0 1 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16a.5.5 0 0 1 .7 0"
-      fill="currentColor"
-    />
-  </svg>
-</slot>
-      </div>
-      <slot @slotchange="{slotchangeHandler($e)}"></slot>
-    </template>
+  <template
+    @click="{clickHandler($e)}"
+    @focusout="{focusoutHandler($e)}"
+    @keydown="{keydownHandler($e)}"
+    @mousedown="{mousedownHandler($e)}"
+  >
+    {{styles}}
+    <div class="control">
+      <slot name="control" f-ref="{controlSlot}"></slot>
+      <slot name="indicator" f-ref="{indicatorSlot}">
+        <svg
+          class="chevron-down-20-regular"
+          aria-hidden="true"
+          slot="indicator"
+          viewBox="0 0 20 20"
+          f-ref="{indicator}"
+        >
+          <path
+            d="M15.85 7.65a.5.5 0 0 1 0 .7l-5.46 5.49a.55.55 0 0 1-.78 0L4.15 8.35a.5.5 0 1 1 .7-.7L10 12.8l5.15-5.16a.5.5 0 0 1 .7 0"
+            fill="currentColor"
+          />
+        </svg>
+      </slot>
+    </div>
+    <slot @slotchange="{slotchangeHandler($e)}"></slot>
+  </template>
 </f-template>

package/dist/esm/field/field.styles.css

@@ -1,121 +1,125 @@
-
-  :host([hidden]){display:none}:host{display:inline-grid}
-
-  :host {
-    color: var(--colorNeutralForeground1);
-    align-items: center;
-    gap: 0 var(--spacingHorizontalM);
-    justify-items: start;
-  }
-
-  :has([slot='message']) {
-    color: var(--colorNeutralForeground1);
-    row-gap: var(--spacingVerticalS);
-  }
-
-  :not(::slotted([slot='label'])) {
-    gap: 0;
-  }
-
-  :host([label-position='before']) {
-    grid-template-areas: 'label input' 'label message';
-  }
-
-  :host([label-position='after']) {
-    gap: 0;
-    grid-template-areas: 'input label' 'message message';
-    grid-template-columns: auto 1fr;
-  }
-
-  :host([label-position='after']) ::slotted([slot='input']) {
-    margin-inline-end: var(--spacingHorizontalM);
-  }
-
-  :host([label-position='above']) {
-    grid-template-areas: 'label' 'input' 'message';
-    row-gap: var(--spacingVerticalXXS);
-  }
-
-  :host([label-position='below']) {
-    grid-template-areas: 'input' 'label' 'message';
-    justify-items: center;
-  }
-
-  :host([label-position='below']) ::slotted([slot='label']) {
-    margin-block-start: var(--spacingVerticalM);
-  }
-
-  :host(:state(required)) ::slotted([slot='label'])::after {
-    content: '*' / '';
-    color: var(--colorPaletteRedForeground1);
-    margin-inline-start: var(--spacingHorizontalXS);
-  }
-
-  ::slotted([slot='input']) {
-    grid-area: input;
-  }
-
-  ::slotted([slot='message']) {
-    color: var(--colorNeutralForeground3);
-    font-family: var(--fontFamilyBase);
-    font-size: var(--fontSizeBase200);
-    font-weight: var(--fontWeightRegular);
-    grid-area: message;
-    line-height: var(--lineHeightBase200);
-    margin-block-start: var(--spacingVerticalXXS);
-  }
-
-  :host(:state(focus-visible):focus-within) {
-    border-radius: var(--borderRadiusMedium);
-    outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
-  }
-
-  ::slotted(label),
-  ::slotted([slot='label']) {
-    cursor: inherit;
-    display: inline-flex;
-    font-family: var(--fontFamilyBase);
-    font-size: var(--fontSizeBase300);
-    font-weight: var(--fontWeightRegular);
-    grid-area: label;
-    line-height: var(--lineHeightBase300);
-    justify-self: stretch;
-    user-select: none;
-  }
-
-  :host([size='small']) ::slotted(label) {
-    font-size: var(--fontSizeBase200);
-    line-height: var(--lineHeightBase200);
-  }
-
-  :host([size='large']) ::slotted(label) {
-    font-size: var(--fontSizeBase400);
-    line-height: var(--lineHeightBase400);
-  }
-
-  :host([size='large']) ::slotted(label),
-  :host([weight='semibold']) ::slotted(label) {
-    font-weight: var(--fontWeightSemibold);
-  }
-
-  :host(:state(disabled)) {
-    cursor: default;
-  }
-
-  ::slotted([flag]) {
-    display: none;
-  }
-
-  :host(:state(bad-input)) ::slotted([flag='bad-input']),
-  :host(:state(custom-error)) ::slotted([flag='custom-error']),
-  :host(:state(pattern-mismatch)) ::slotted([flag='pattern-mismatch']),
-  :host(:state(range-overflow)) ::slotted([flag='range-overflow']),
-  :host(:state(range-underflow)) ::slotted([flag='range-underflow']),
-  :host(:state(step-mismatch)) ::slotted([flag='step-mismatch']),
-  :host(:state(too-long)) ::slotted([flag='too-long']),
-  :host(:state(too-short)) ::slotted([flag='too-short']),
-  :host(:state(type-mismatch)) ::slotted([flag='type-mismatch']),
-  :host(:state(value-missing)) ::slotted([flag='value-missing']),
-  :host(:state(valid)) ::slotted([flag='valid']) {
-    display: block;
-  }
+:host([hidden]) {
+  display: none;
+}
+:host {
+  display: inline-grid;
+}
+
+:host {
+  color: var(--colorNeutralForeground1);
+  align-items: center;
+  gap: 0 var(--spacingHorizontalM);
+  justify-items: start;
+}
+
+:has([slot='message']) {
+  color: var(--colorNeutralForeground1);
+  row-gap: var(--spacingVerticalS);
+}
+
+:not(::slotted([slot='label'])) {
+  gap: 0;
+}
+
+:host([label-position='before']) {
+  grid-template-areas: 'label input' 'label message';
+}
+
+:host([label-position='after']) {
+  gap: 0;
+  grid-template-areas: 'input label' 'message message';
+  grid-template-columns: auto 1fr;
+}
+
+:host([label-position='after']) ::slotted([slot='input']) {
+  margin-inline-end: var(--spacingHorizontalM);
+}
+
+:host([label-position='above']) {
+  grid-template-areas: 'label' 'input' 'message';
+  row-gap: var(--spacingVerticalXXS);
+}
+
+:host([label-position='below']) {
+  grid-template-areas: 'input' 'label' 'message';
+  justify-items: center;
+}
+
+:host([label-position='below']) ::slotted([slot='label']) {
+  margin-block-start: var(--spacingVerticalM);
+}
+
+:host(:state(required)) ::slotted([slot='label'])::after {
+  content: '*' / '';
+  color: var(--colorPaletteRedForeground1);
+  margin-inline-start: var(--spacingHorizontalXS);
+}
+
+::slotted([slot='input']) {
+  grid-area: input;
+}
+
+::slotted([slot='message']) {
+  color: var(--colorNeutralForeground3);
+  font-family: var(--fontFamilyBase);
+  font-size: var(--fontSizeBase200);
+  font-weight: var(--fontWeightRegular);
+  grid-area: message;
+  line-height: var(--lineHeightBase200);
+  margin-block-start: var(--spacingVerticalXXS);
+}
+
+:host(:state(focus-visible):focus-within) {
+  border-radius: var(--borderRadiusMedium);
+  outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
+}
+
+::slotted(label),
+::slotted([slot='label']) {
+  cursor: inherit;
+  display: inline-flex;
+  font-family: var(--fontFamilyBase);
+  font-size: var(--fontSizeBase300);
+  font-weight: var(--fontWeightRegular);
+  grid-area: label;
+  line-height: var(--lineHeightBase300);
+  justify-self: stretch;
+  user-select: none;
+}
+
+:host([size='small']) ::slotted(label) {
+  font-size: var(--fontSizeBase200);
+  line-height: var(--lineHeightBase200);
+}
+
+:host([size='large']) ::slotted(label) {
+  font-size: var(--fontSizeBase400);
+  line-height: var(--lineHeightBase400);
+}
+
+:host([size='large']) ::slotted(label),
+:host([weight='semibold']) ::slotted(label) {
+  font-weight: var(--fontWeightSemibold);
+}
+
+:host(:state(disabled)) {
+  cursor: default;
+}
+
+::slotted([flag]) {
+  display: none;
+}
+
+:host(:state(bad-input)) ::slotted([flag='bad-input']),
+:host(:state(custom-error)) ::slotted([flag='custom-error']),
+:host(:state(pattern-mismatch)) ::slotted([flag='pattern-mismatch']),
+:host(:state(range-overflow)) ::slotted([flag='range-overflow']),
+:host(:state(range-underflow)) ::slotted([flag='range-underflow']),
+:host(:state(step-mismatch)) ::slotted([flag='step-mismatch']),
+:host(:state(too-long)) ::slotted([flag='too-long']),
+:host(:state(too-short)) ::slotted([flag='too-short']),
+:host(:state(type-mismatch)) ::slotted([flag='type-mismatch']),
+:host(:state(value-missing)) ::slotted([flag='value-missing']),
+:host(:state(valid)) ::slotted([flag='valid']) {
+  display: block;
+}

package/dist/esm/field/field.template.html

@@ -1,10 +1,11 @@
 <f-template name="fluent-field" shadowrootmode="open" shadowrootdelegatesfocus>
-<template
+  <template
     @click="{clickHandler($e)}"
     @change="{changeHandler($e)}"
     @focusin="{focusinHandler($e)}"
     @focusout="{focusoutHandler($e)}"
-  >{{styles}}
+  >
+    {{styles}}
     <slot name="label" part="label" f-slotted="{labelSlot}"></slot>
     <slot name="input" part="input" f-slotted="{slottedInputs}"></slot>
     <slot name="message" part="message" f-slotted="{messageSlot filter elements([flag])}"></slot>

package/dist/esm/image/image.styles.css

@@ -1,51 +1,50 @@
+:host {
+  contain: content;
+}
 
-  :host {
-    contain: content;
-  }
-
-  :host ::slotted(img) {
-    box-sizing: border-box;
-    min-height: 8px;
-    min-width: 8px;
-    display: inline-block;
-  }
-  :host([block]) ::slotted(img) {
-    width: 100%;
-    height: auto;
-  }
-  :host([bordered]) ::slotted(img) {
-    border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
-  }
-  :host([fit='none']) ::slotted(img) {
-    object-fit: none;
-    object-position: top left;
-    height: 100%;
-    width: 100%;
-  }
-  :host([fit='center']) ::slotted(img) {
-    object-fit: none;
-    object-position: center;
-    height: 100%;
-    width: 100%;
-  }
-  :host([fit='contain']) ::slotted(img) {
-    object-fit: contain;
-    object-position: center;
-    height: 100%;
-    width: 100%;
-  }
-  :host([fit='cover']) ::slotted(img) {
-    object-fit: cover;
-    object-position: center;
-    height: 100%;
-    width: 100%;
-  }
-  :host([shadow]) ::slotted(img) {
-    box-shadow: var(--shadow4);
-  }
-  :host([shape='circular']) ::slotted(img) {
-    border-radius: var(--borderRadiusCircular);
-  }
-  :host([shape='rounded']) ::slotted(img) {
-    border-radius: var(--borderRadiusMedium);
-  }
+:host ::slotted(img) {
+  box-sizing: border-box;
+  min-height: 8px;
+  min-width: 8px;
+  display: inline-block;
+}
+:host([block]) ::slotted(img) {
+  width: 100%;
+  height: auto;
+}
+:host([bordered]) ::slotted(img) {
+  border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
+}
+:host([fit='none']) ::slotted(img) {
+  object-fit: none;
+  object-position: top left;
+  height: 100%;
+  width: 100%;
+}
+:host([fit='center']) ::slotted(img) {
+  object-fit: none;
+  object-position: center;
+  height: 100%;
+  width: 100%;
+}
+:host([fit='contain']) ::slotted(img) {
+  object-fit: contain;
+  object-position: center;
+  height: 100%;
+  width: 100%;
+}
+:host([fit='cover']) ::slotted(img) {
+  object-fit: cover;
+  object-position: center;
+  height: 100%;
+  width: 100%;
+}
+:host([shadow]) ::slotted(img) {
+  box-shadow: var(--shadow4);
+}
+:host([shape='circular']) ::slotted(img) {
+  border-radius: var(--borderRadiusCircular);
+}
+:host([shape='rounded']) ::slotted(img) {
+  border-radius: var(--borderRadiusMedium);
+}

package/dist/esm/image/image.template.html

@@ -1 +1,6 @@
-<f-template name="fluent-image" shadowrootmode="open"><template>{{styles}}<slot></slot></template></f-template>
+<f-template name="fluent-image" shadowrootmode="open">
+  <template>
+    {{styles}}
+    <slot></slot>
+  </template>
+</f-template>

package/dist/esm/label/label.styles.css

@@ -1,36 +1,40 @@
+:host([hidden]) {
+  display: none;
+}
+:host {
+  display: inline-flex;
+}
 
-  :host([hidden]){display:none}:host{display:inline-flex}
+:host {
+  color: var(--colorNeutralForeground1);
+  cursor: pointer;
+  font-family: var(--fontFamilyBase);
+  font-size: var(--fontSizeBase300);
+  font-weight: var(--fontWeightRegular);
+  line-height: var(--lineHeightBase300);
+  user-select: none;
+}
 
-  :host {
-    color: var(--colorNeutralForeground1);
-    cursor: pointer;
-    font-family: var(--fontFamilyBase);
-    font-size: var(--fontSizeBase300);
-    font-weight: var(--fontWeightRegular);
-    line-height: var(--lineHeightBase300);
-    user-select: none;
-  }
+.asterisk {
+  color: var(--colorPaletteRedForeground1);
+  margin-inline-start: var(--spacingHorizontalXS);
+}
 
-  .asterisk {
-    color: var(--colorPaletteRedForeground1);
-    margin-inline-start: var(--spacingHorizontalXS);
-  }
+:host([size='small']) {
+  font-size: var(--fontSizeBase200);
+  line-height: var(--lineHeightBase200);
+}
 
-  :host([size='small']) {
-    font-size: var(--fontSizeBase200);
-    line-height: var(--lineHeightBase200);
-  }
+:host([size='large']) {
+  font-size: var(--fontSizeBase400);
+  line-height: var(--lineHeightBase400);
+}
 
-  :host([size='large']) {
-    font-size: var(--fontSizeBase400);
-    line-height: var(--lineHeightBase400);
-  }
+:host(:is([size='large'], [weight='semibold'])) {
+  font-weight: var(--fontWeightSemibold);
+}
 
-  :host(:is([size='large'], [weight='semibold'])) {
-    font-weight: var(--fontWeightSemibold);
-  }
-
-  :host([disabled]),
-  :host([disabled]) .asterisk {
-    color: var(--colorNeutralForegroundDisabled);
-  }
+:host([disabled]),
+:host([disabled]) .asterisk {
+  color: var(--colorNeutralForegroundDisabled);
+}

package/dist/esm/label/label.template.html

@@ -1,4 +1,7 @@
 <f-template name="fluent-label" shadowrootmode="open">
-<template>{{styles}}<slot></slot>
-    <span part="asterisk" class="asterisk" aria-hidden="true" ?hidden="{{!required}}">*</span></template>
+  <template>
+    {{styles}}
+    <slot></slot>
+    <span part="asterisk" class="asterisk" aria-hidden="true" ?hidden="{{!required}}">*</span>
+  </template>
 </f-template>

package/dist/esm/link/link.styles.css

@@ -1,68 +1,72 @@
+:host([hidden]) {
+  display: none;
+}
+:host {
+  display: inline;
+}
 
-  :host([hidden]){display:none}:host{display:inline}
+:host {
+  position: relative;
+  box-sizing: border-box;
+  background-color: transparent;
+  color: var(--colorBrandForegroundLink);
+  cursor: pointer;
+  font-family: var(--fontFamilyBase);
+  font-size: var(--fontSizeBase300);
+  font-weight: var(--fontWeightRegular);
+  overflow: inherit;
+  text-align: start;
+  text-decoration: none;
+  text-decoration-thickness: var(--strokeWidthThin);
+  text-overflow: inherit;
+  user-select: text;
+}
 
-  :host {
-    position: relative;
-    box-sizing: border-box;
-    background-color: transparent;
-    color: var(--colorBrandForegroundLink);
-    cursor: pointer;
-    font-family: var(--fontFamilyBase);
-    font-size: var(--fontSizeBase300);
-    font-weight: var(--fontWeightRegular);
-    overflow: inherit;
-    text-align: start;
-    text-decoration: none;
-    text-decoration-thickness: var(--strokeWidthThin);
-    text-overflow: inherit;
-    user-select: text;
-  }
+:host(:is(:hover, :focus-visible)) {
+  outline: none;
+  text-decoration-line: underline;
+}
 
-  :host(:is(:hover, :focus-visible)) {
-    outline: none;
-    text-decoration-line: underline;
+@media (hover: hover) {
+  :host(:hover) {
+    color: var(--colorBrandForegroundLinkHover);
   }
 
-  @media (hover: hover) {
-    :host(:hover) {
-      color: var(--colorBrandForegroundLinkHover);
-    }
-
-    :host(:active) {
-      color: var(--colorBrandForegroundLinkPressed);
-    }
-
-    :host([appearance='subtle']:hover) {
-      color: var(--colorNeutralForeground2LinkHover);
-    }
-
-    :host([appearance='subtle']:active) {
-      color: var(--colorNeutralForeground2LinkPressed);
-    }
+  :host(:active) {
+    color: var(--colorBrandForegroundLinkPressed);
   }
 
-  :host([appearance='subtle']) {
-    color: var(--colorNeutralForeground2Link);
+  :host([appearance='subtle']:hover) {
+    color: var(--colorNeutralForeground2LinkHover);
   }
 
-  :host-context(:is(h1, h2, h3, h4, h5, h6, p, fluent-text)),
-  :host([inline]) {
-    font: inherit;
-    text-decoration: underline;
+  :host([appearance='subtle']:active) {
+    color: var(--colorNeutralForeground2LinkPressed);
   }
+}
 
-  :host(:not([href])) {
-    color: inherit;
-    text-decoration: none;
-  }
+:host([appearance='subtle']) {
+  color: var(--colorNeutralForeground2Link);
+}
 
-  ::slotted(a) {
-    position: absolute;
-    inset: 0;
-  }
+:host-context(:is(h1, h2, h3, h4, h5, h6, p, fluent-text)),
+:host([inline]) {
+  font: inherit;
+  text-decoration: underline;
+}
+
+:host(:not([href])) {
+  color: inherit;
+  text-decoration: none;
+}
 
-  @media (forced-colors: active) {
-    :host {
-      color: LinkText;
-    }
+::slotted(a) {
+  position: absolute;
+  inset: 0;
+}
+
+@media (forced-colors: active) {
+  :host {
+    color: LinkText;
   }
+}

package/dist/esm/link/link.template.html

@@ -1,9 +1,6 @@
 <f-template name="fluent-link" shadowrootmode="open">
-<template
-      tabindex="0"
-      @click="{clickHandler($e)}"
-      @keydown="{keydownHandler($e)}"
-    >{{styles}}
-      <slot></slot>
-    </template>
+  <template tabindex="0" @click="{clickHandler($e)}" @keydown="{keydownHandler($e)}">
+    {{styles}}
+    <slot></slot>
+  </template>
 </f-template>