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

package/dist/esm/accordion-item/accordion-item.template.html

@@ -1,5 +1,7 @@
 <f-template name="fluent-accordion-item" shadowrootmode="open">
-<template>{{styles}}<div class="heading" part="heading" role="heading" aria-level="{{headinglevel}}">
+  <template>
+    {{styles}}
+    <div class="heading" part="heading" role="heading" aria-level="{{headinglevel}}">
       <button
         class="button"
         part="button"
@@ -11,37 +13,42 @@
       >
         <slot name="heading"></slot>
       </button>
-       <slot name="start" f-ref="{start}"></slot> 
-      <slot name="marker-expanded"> <svg
-  width="20"
-  height="20"
-  viewBox="0 0 20 20"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
-  class="default-marker-expanded"
-  aria-hidden="true"
->
-  <path
-    d="M15.794 7.73271C16.0797 8.03263 16.0681 8.50737 15.7682 8.79306L10.5178 13.7944C10.2281 14.0703 9.77285 14.0703 9.48318 13.7944L4.23271 8.79306C3.93279 8.50737 3.92125 8.03263 4.20694 7.73271C4.49264 7.43279 4.96737 7.42125 5.26729 7.70694L10.0005 12.2155L14.7336 7.70694C15.0336 7.42125 15.5083 7.43279 15.794 7.73271Z"
-    fill="currentColor"
-  />
-</svg> </slot>
-      <slot name="marker-collapsed"> <svg
-  width="20"
-  height="20"
-  viewBox="0 0 20 20"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
-  class="default-marker-collapsed"
-  aria-hidden="true"
->
-  <path
-    d="M7.73271 4.20694C8.03263 3.92125 8.50737 3.93279 8.79306 4.23271L13.7944 9.48318C14.0703 9.77285 14.0703 10.2281 13.7944 10.5178L8.79306 15.7682C8.50737 16.0681 8.03263 16.0797 7.73271 15.794C7.43279 15.5083 7.42125 15.0336 7.70694 14.7336L12.2155 10.0005L7.70694 5.26729C7.42125 4.96737 7.43279 4.49264 7.73271 4.20694Z"
-    fill="currentColor"
-  />
-</svg> </slot>
+      <slot name="start" f-ref="{start}"></slot>
+      <slot name="marker-expanded">
+        <svg
+          width="20"
+          height="20"
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          class="default-marker-expanded"
+          aria-hidden="true"
+        >
+          <path
+            d="M15.794 7.73271C16.0797 8.03263 16.0681 8.50737 15.7682 8.79306L10.5178 13.7944C10.2281 14.0703 9.77285 14.0703 9.48318 13.7944L4.23271 8.79306C3.93279 8.50737 3.92125 8.03263 4.20694 7.73271C4.49264 7.43279 4.96737 7.42125 5.26729 7.70694L10.0005 12.2155L14.7336 7.70694C15.0336 7.42125 15.5083 7.43279 15.794 7.73271Z"
+            fill="currentColor"
+          />
+        </svg>
+      </slot>
+      <slot name="marker-collapsed">
+        <svg
+          width="20"
+          height="20"
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          class="default-marker-collapsed"
+          aria-hidden="true"
+        >
+          <path
+            d="M7.73271 4.20694C8.03263 3.92125 8.50737 3.93279 8.79306 4.23271L13.7944 9.48318C14.0703 9.77285 14.0703 10.2281 13.7944 10.5178L8.79306 15.7682C8.50737 16.0681 8.03263 16.0797 7.73271 15.794C7.43279 15.5083 7.42125 15.0336 7.70694 14.7336L12.2155 10.0005L7.70694 5.26729C7.42125 4.96737 7.43279 4.49264 7.73271 4.20694Z"
+            fill="currentColor"
+          />
+        </svg>
+      </slot>
     </div>
     <div class="content" part="content" id="panel" role="region" aria-labelledby="control">
       <slot></slot>
-    </div></template>
+    </div>
+  </template>
 </f-template>

package/dist/esm/anchor-button/anchor-button.styles.css

@@ -1,225 +1,226 @@
-
-  :host([hidden]){display:none}:host{display:inline-flex}
-
+:host([hidden]) {
+  display: none;
+}
+:host {
+  display: inline-flex;
+}
+
+:host {
+  --icon-spacing: var(--spacingHorizontalSNudge);
+  position: relative;
+  contain: layout style;
+  vertical-align: middle;
+  align-items: center;
+  box-sizing: border-box;
+  justify-content: center;
+  text-align: center;
+  text-decoration-line: none;
+  margin: 0;
+  min-height: 32px;
+  outline-style: none;
+  background-color: var(--colorNeutralBackground1);
+  color: var(--colorNeutralForeground1);
+  border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
+  padding: 0 var(--spacingHorizontalM);
+  min-width: 96px;
+  border-radius: var(--borderRadiusMedium);
+  font-size: var(--fontSizeBase300);
+  font-family: var(--fontFamilyBase);
+  font-weight: var(--fontWeightSemibold);
+  line-height: var(--lineHeightBase300);
+  transition-duration: var(--durationFaster);
+  transition-property: background, border, color;
+  transition-timing-function: var(--curveEasyEase);
+  cursor: pointer;
+  user-select: none;
+}
+
+.content {
+  display: inherit;
+}
+
+:host(:hover) {
+  background-color: var(--colorNeutralBackground1Hover);
+  color: var(--colorNeutralForeground1Hover);
+  border-color: var(--colorNeutralStroke1Hover);
+}
+
+:host(:hover:active) {
+  background-color: var(--colorNeutralBackground1Pressed);
+  border-color: var(--colorNeutralStroke1Pressed);
+  color: var(--colorNeutralForeground1Pressed);
+  outline-style: none;
+}
+
+:host(:focus-visible) {
+  border-color: var(--colorTransparentStroke);
+  outline: var(--strokeWidthThick) solid var(--colorTransparentStroke);
+  box-shadow: var(--shadow4), 0 0 0 2px var(--colorStrokeFocus2);
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
   :host {
-    --icon-spacing: var(--spacingHorizontalSNudge);
-    position: relative;
-    contain: layout style;
-    vertical-align: middle;
-    align-items: center;
-    box-sizing: border-box;
-    justify-content: center;
-    text-align: center;
-    text-decoration-line: none;
-    margin: 0;
-    min-height: 32px;
-    outline-style: none;
-    background-color: var(--colorNeutralBackground1);
-    color: var(--colorNeutralForeground1);
-    border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
-    padding: 0 var(--spacingHorizontalM);
-    min-width: 96px;
-    border-radius: var(--borderRadiusMedium);
-    font-size: var(--fontSizeBase300);
-    font-family: var(--fontFamilyBase);
-    font-weight: var(--fontWeightSemibold);
-    line-height: var(--lineHeightBase300);
-    transition-duration: var(--durationFaster);
-    transition-property: background, border, color;
-    transition-timing-function: var(--curveEasyEase);
-    cursor: pointer;
-    user-select: none;
-  }
-
-  .content {
-    display: inherit;
-  }
-
-  :host(:hover) {
-    background-color: var(--colorNeutralBackground1Hover);
-    color: var(--colorNeutralForeground1Hover);
-    border-color: var(--colorNeutralStroke1Hover);
-  }
-
-  :host(:hover:active) {
-    background-color: var(--colorNeutralBackground1Pressed);
-    border-color: var(--colorNeutralStroke1Pressed);
-    color: var(--colorNeutralForeground1Pressed);
-    outline-style: none;
-  }
-
-  :host(:focus-visible) {
-    border-color: var(--colorTransparentStroke);
-    outline: var(--strokeWidthThick) solid var(--colorTransparentStroke);
-    box-shadow: var(--shadow4), 0 0 0 2px var(--colorStrokeFocus2);
-  }
-
-  @media screen and (prefers-reduced-motion: reduce) {
-    :host {
-      transition-duration: 0.01ms;
-    }
-  }
-
-  ::slotted(svg) {
-    font-size: 20px;
-    height: 20px;
-    width: 20px;
-    fill: currentColor;
-  }
-
-  ::slotted([slot='start']) {
-    margin-inline-end: var(--icon-spacing);
-  }
-
-  ::slotted([slot='end']),
-  [slot='end'] {
-    flex-shrink: 0;
-    margin-inline-start: var(--icon-spacing);
-  }
-
-  :host([icon-only]) {
-    min-width: 32px;
-    max-width: 32px;
-  }
-
-  :host([size='small']) {
-    --icon-spacing: var(--spacingHorizontalXS);
-    min-height: 24px;
-    min-width: 64px;
-    padding: 0 var(--spacingHorizontalS);
-    border-radius: var(--borderRadiusSmall);
-    font-size: var(--fontSizeBase200);
-    line-height: var(--lineHeightBase200);
-    font-weight: var(--fontWeightRegular);
-  }
-
-  :host([size='small'][icon-only]) {
-    min-width: 24px;
-    max-width: 24px;
-  }
-
-  :host([size='large']) {
-    min-height: 40px;
-    border-radius: var(--borderRadiusLarge);
-    padding: 0 var(--spacingHorizontalL);
-    font-size: var(--fontSizeBase400);
-    line-height: var(--lineHeightBase400);
-  }
-
-  :host([size='large'][icon-only]) {
-    min-width: 40px;
-    max-width: 40px;
-  }
-
-  :host([size='large']) ::slotted(svg) {
-    font-size: 24px;
-    height: 24px;
-    width: 24px;
-  }
-
-  :host(:is([shape='circular'], [shape='circular']:focus-visible)) {
-    border-radius: var(--borderRadiusCircular);
-  }
-
-  :host(:is([shape='square'], [shape='square']:focus-visible)) {
-    border-radius: var(--borderRadiusNone);
-  }
-
-  :host([appearance='primary']) {
-    background-color: var(--colorBrandBackground);
-    color: var(--colorNeutralForegroundOnBrand);
-    border-color: transparent;
-  }
-
-  :host([appearance='primary']:hover) {
-    background-color: var(--colorBrandBackgroundHover);
-  }
-
-  :host([appearance='primary']:is(:hover, :hover:active):not(:focus-visible)) {
-    border-color: transparent;
-  }
-
-  :host([appearance='primary']:is(:hover, :hover:active)) {
-    color: var(--colorNeutralForegroundOnBrand);
-  }
-
-  :host([appearance='primary']:hover:active) {
-    background-color: var(--colorBrandBackgroundPressed);
-  }
-
-  :host([appearance='primary']:focus-visible) {
-    border-color: var(--colorNeutralForegroundOnBrand);
-    box-shadow: var(--shadow2), 0 0 0 2px var(--colorStrokeFocus2);
-  }
-
-  :host([appearance='outline']) {
-    background-color: var(--colorTransparentBackground);
-  }
-
-  :host([appearance='outline']:hover) {
-    background-color: var(--colorTransparentBackgroundHover);
-  }
-
-  :host([appearance='outline']:hover:active) {
-    background-color: var(--colorTransparentBackgroundPressed);
-  }
-
-  :host([appearance='subtle']) {
-    background-color: var(--colorSubtleBackground);
-    color: var(--colorNeutralForeground2);
-    border-color: transparent;
-  }
-
-  :host([appearance='subtle']:hover) {
-    background-color: var(--colorSubtleBackgroundHover);
-    color: var(--colorNeutralForeground2Hover);
-    border-color: transparent;
-  }
-
-  :host([appearance='subtle']:hover:active) {
-    background-color: var(--colorSubtleBackgroundPressed);
-    color: var(--colorNeutralForeground2Pressed);
-    border-color: transparent;
-  }
-
-  :host([appearance='subtle']:hover) ::slotted(svg) {
-    fill: var(--colorNeutralForeground2BrandHover);
-  }
-
-  :host([appearance='subtle']:hover:active) ::slotted(svg) {
-    fill: var(--colorNeutralForeground2BrandPressed);
-  }
-
-  :host([appearance='transparent']) {
-    background-color: var(--colorTransparentBackground);
-    color: var(--colorNeutralForeground2);
-  }
-
-  :host([appearance='transparent']:hover) {
-    background-color: var(--colorTransparentBackgroundHover);
-    color: var(--colorNeutralForeground2BrandHover);
-  }
-
-  :host([appearance='transparent']:hover:active) {
-    background-color: var(--colorTransparentBackgroundPressed);
-    color: var(--colorNeutralForeground2BrandPressed);
-  }
-
-  :host(:is([appearance='transparent'], [appearance='transparent']:is(:hover, :active))) {
-    border-color: transparent;
-  }
-
-
-  
-
-  ::slotted(a) {
-    position: absolute;
-    inset: 0;
-  }
-
-  @media (forced-colors: active) {
-    :host {
-      border-color: LinkText;
-      color: LinkText;
-    }
+    transition-duration: 0.01ms;
+  }
+}
+
+::slotted(svg) {
+  font-size: 20px;
+  height: 20px;
+  width: 20px;
+  fill: currentColor;
+}
+
+::slotted([slot='start']) {
+  margin-inline-end: var(--icon-spacing);
+}
+
+::slotted([slot='end']),
+[slot='end'] {
+  flex-shrink: 0;
+  margin-inline-start: var(--icon-spacing);
+}
+
+:host([icon-only]) {
+  min-width: 32px;
+  max-width: 32px;
+}
+
+:host([size='small']) {
+  --icon-spacing: var(--spacingHorizontalXS);
+  min-height: 24px;
+  min-width: 64px;
+  padding: 0 var(--spacingHorizontalS);
+  border-radius: var(--borderRadiusSmall);
+  font-size: var(--fontSizeBase200);
+  line-height: var(--lineHeightBase200);
+  font-weight: var(--fontWeightRegular);
+}
+
+:host([size='small'][icon-only]) {
+  min-width: 24px;
+  max-width: 24px;
+}
+
+:host([size='large']) {
+  min-height: 40px;
+  border-radius: var(--borderRadiusLarge);
+  padding: 0 var(--spacingHorizontalL);
+  font-size: var(--fontSizeBase400);
+  line-height: var(--lineHeightBase400);
+}
+
+:host([size='large'][icon-only]) {
+  min-width: 40px;
+  max-width: 40px;
+}
+
+:host([size='large']) ::slotted(svg) {
+  font-size: 24px;
+  height: 24px;
+  width: 24px;
+}
+
+:host(:is([shape='circular'], [shape='circular']:focus-visible)) {
+  border-radius: var(--borderRadiusCircular);
+}
+
+:host(:is([shape='square'], [shape='square']:focus-visible)) {
+  border-radius: var(--borderRadiusNone);
+}
+
+:host([appearance='primary']) {
+  background-color: var(--colorBrandBackground);
+  color: var(--colorNeutralForegroundOnBrand);
+  border-color: transparent;
+}
+
+:host([appearance='primary']:hover) {
+  background-color: var(--colorBrandBackgroundHover);
+}
+
+:host([appearance='primary']:is(:hover, :hover:active):not(:focus-visible)) {
+  border-color: transparent;
+}
+
+:host([appearance='primary']:is(:hover, :hover:active)) {
+  color: var(--colorNeutralForegroundOnBrand);
+}
+
+:host([appearance='primary']:hover:active) {
+  background-color: var(--colorBrandBackgroundPressed);
+}
+
+:host([appearance='primary']:focus-visible) {
+  border-color: var(--colorNeutralForegroundOnBrand);
+  box-shadow: var(--shadow2), 0 0 0 2px var(--colorStrokeFocus2);
+}
+
+:host([appearance='outline']) {
+  background-color: var(--colorTransparentBackground);
+}
+
+:host([appearance='outline']:hover) {
+  background-color: var(--colorTransparentBackgroundHover);
+}
+
+:host([appearance='outline']:hover:active) {
+  background-color: var(--colorTransparentBackgroundPressed);
+}
+
+:host([appearance='subtle']) {
+  background-color: var(--colorSubtleBackground);
+  color: var(--colorNeutralForeground2);
+  border-color: transparent;
+}
+
+:host([appearance='subtle']:hover) {
+  background-color: var(--colorSubtleBackgroundHover);
+  color: var(--colorNeutralForeground2Hover);
+  border-color: transparent;
+}
+
+:host([appearance='subtle']:hover:active) {
+  background-color: var(--colorSubtleBackgroundPressed);
+  color: var(--colorNeutralForeground2Pressed);
+  border-color: transparent;
+}
+
+:host([appearance='subtle']:hover) ::slotted(svg) {
+  fill: var(--colorNeutralForeground2BrandHover);
+}
+
+:host([appearance='subtle']:hover:active) ::slotted(svg) {
+  fill: var(--colorNeutralForeground2BrandPressed);
+}
+
+:host([appearance='transparent']) {
+  background-color: var(--colorTransparentBackground);
+  color: var(--colorNeutralForeground2);
+}
+
+:host([appearance='transparent']:hover) {
+  background-color: var(--colorTransparentBackgroundHover);
+  color: var(--colorNeutralForeground2BrandHover);
+}
+
+:host([appearance='transparent']:hover:active) {
+  background-color: var(--colorTransparentBackgroundPressed);
+  color: var(--colorNeutralForeground2BrandPressed);
+}
+
+:host(:is([appearance='transparent'], [appearance='transparent']:is(:hover, :active))) {
+  border-color: transparent;
+}
+
+::slotted(a) {
+  position: absolute;
+  inset: 0;
+}
+
+@media (forced-colors: active) {
+  :host {
+    border-color: LinkText;
+    color: LinkText;
   }
+}

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

@@ -1,13 +1,10 @@
 <f-template name="fluent-anchor-button" shadowrootmode="open">
-<template
-      tabindex="0"
-      @click="{clickHandler($e)}"
-      @keydown="{keydownHandler($e)}"
-    >{{styles}}
-       <slot name="start" f-ref="{start}"></slot> 
-      <span class="content" part="content">
-        <slot></slot>
-      </span>
-       <slot name="end" f-ref="{end}"></slot> 
-    </template>
+  <template tabindex="0" @click="{clickHandler($e)}" @keydown="{keydownHandler($e)}">
+    {{styles}}
+    <slot name="start" f-ref="{start}"></slot>
+    <span class="content" part="content">
+      <slot></slot>
+    </span>
+    <slot name="end" f-ref="{end}"></slot>
+  </template>
 </f-template>