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

package/dist/esm/accordion-item/accordion-item.styles.css

@@ -1,170 +1,174 @@
-
-  :host([hidden]){display:none}:host{display:block}
-
-  :host {
-    max-width: fit-content;
-    contain: content;
-  }
-
-  .heading {
-    height: 44px;
-    display: grid;
-    position: relative;
-    padding-inline: var(--spacingHorizontalM) var(--spacingHorizontalMNudge);
-    border-radius: var(--borderRadiusMedium);
-    font-family: var(--fontFamilyBase);
-    font-size: var(--fontSizeBase300);
-    font-weight: var(--fontWeightRegular);
-    line-height: var(--lineHeightBase300);
-    grid-template-columns: auto auto 1fr auto;
-  }
-
-  .button {
-    appearance: none;
-    background: var(--colorTransparentBackground);
-    border: none;
-    box-sizing: border-box;
-    color: var(--colorNeutralForeground1);
-    cursor: pointer;
-    font: inherit;
-    grid-column: auto / span 2;
-    grid-row: 1;
-    height: 44px;
-    outline: none;
-    padding: 0;
-    text-align: start;
-  }
-
-  .button::before {
-    content: '';
-    position: absolute;
-    inset: 0px;
-    cursor: pointer;
-    border-radius: var(--borderRadiusSmall);
-  }
-
-  :where(.default-marker-collapsed, .default-marker-expanded),
-  ::slotted(:is([slot='marker-collapsed'], [slot='marker-expanded'])) {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    pointer-events: none;
-    position: relative;
-    height: 100%;
-    padding-inline-end: var(--spacingHorizontalS);
-    grid-column: 1 / span 1;
-    grid-row: 1;
-  }
-
-  .content {
-    margin: 0 var(--spacingHorizontalM);
-  }
-
-  ::slotted([slot='start']) {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding-right: var(--spacingHorizontalS);
-    grid-column: 2 / span 1;
-    grid-row: 1;
-  }
-
-  button:focus-visible::after {
-    content: '';
-    position: absolute;
-    inset: 0px;
-    cursor: pointer;
-    border-radius: var(--borderRadiusSmall);
-    outline: none;
-    border: 2px solid var(--colorStrokeFocus1);
-    box-shadow: inset 0 0 0 1px var(--colorStrokeFocus2);
-  }
-
-  /* --- Disabled attr styles --- */
-
-  :host([disabled]) .button {
-    color: var(--colorNeutralForegroundDisabled);
-  }
-
-  :host([disabled]) svg {
-    filter: invert(89%) sepia(0%) saturate(569%) hue-rotate(155deg) brightness(88%) contrast(87%);
-  }
-
-  /* --- Expanded attr styles --- */
-
-  :host([expanded]) .content {
-    display: block;
-  }
-
-  :host([expanded]) .default-marker-collapsed,
-  :host([expanded]) ::slotted([slot='marker-collapsed']),
-  :host(:not([expanded])) :is(.default-marker-expanded, .content),
-  :host(:not([expanded])) ::slotted([slot='marker-expanded']) {
-    display: none;
-  }
-
-  :host([expanded]) ::slotted([slot='marker-expanded']),
-  :host(:not([expanded])) ::slotted([slot='marker-collapsed']) {
-    display: flex;
-  }
-
-  /* --- Appearance attr styles --- */
-
-  .heading {
-    font-size: var(--fontSizeBase300);
-    line-height: var(--lineHeightBase300);
-  }
-
-  :host([size='small']) .heading {
-    font-size: var(--fontSizeBase200);
-    line-height: var(--lineHeightBase200);
-  }
-
-  :host([size='large']) .heading {
-    font-size: var(--fontSizeBase400);
-    line-height: var(--lineHeightBase400);
-  }
-
-  :host([size='extra-large']) .heading {
-    font-size: var(--fontSizeBase500);
-    line-height: var(--lineHeightBase500);
-  }
-
-  /* --- marker-position attr styles --- */
-
-  :host([marker-position='end']) ::slotted([slot='start']) {
-    grid-column: 1 / span 1;
-  }
-
-  :host([marker-position='end']) :is(.default-marker-collapsed, .default-marker-expanded) {
-    grid-column: 4 / span 1;
-    padding-inline-start: var(--spacingHorizontalS);
-    padding-inline-end: 0;
-  }
-
-  :host([marker-position='end']) .button {
-    grid-column: 2 / span 3;
-  }
-
-  /* --- Block attr styles --- */
-
-  :host([block]) {
-    max-width: 100%;
-  }
-
-  :host([marker-position='end']) .heading {
-    grid-template-columns: auto auto 28px;
-    padding-inline: var(--spacingHorizontalM);
-  }
-
-  :host([marker-position='end']:has([slot='start'])) .heading {
-    padding-inline: var(--spacingHorizontalMNudge) var(--spacingHorizontalM);
-  }
-
-  :host([block][marker-position='end']) .heading {
-    grid-template-columns: auto 1fr;
-  }
-
-  :host([marker-position='end']) :is(.default-marker-collapsed, .default-marker-expanded) {
-    grid-column: 5 / span 1;
-  }
+:host([hidden]) {
+  display: none;
+}
+:host {
+  display: block;
+}
+
+:host {
+  max-width: fit-content;
+  contain: content;
+}
+
+.heading {
+  height: 44px;
+  display: grid;
+  position: relative;
+  padding-inline: var(--spacingHorizontalM) var(--spacingHorizontalMNudge);
+  border-radius: var(--borderRadiusMedium);
+  font-family: var(--fontFamilyBase);
+  font-size: var(--fontSizeBase300);
+  font-weight: var(--fontWeightRegular);
+  line-height: var(--lineHeightBase300);
+  grid-template-columns: auto auto 1fr auto;
+}
+
+.button {
+  appearance: none;
+  background: var(--colorTransparentBackground);
+  border: none;
+  box-sizing: border-box;
+  color: var(--colorNeutralForeground1);
+  cursor: pointer;
+  font: inherit;
+  grid-column: auto / span 2;
+  grid-row: 1;
+  height: 44px;
+  outline: none;
+  padding: 0;
+  text-align: start;
+}
+
+.button::before {
+  content: '';
+  position: absolute;
+  inset: 0px;
+  cursor: pointer;
+  border-radius: var(--borderRadiusSmall);
+}
+
+:where(.default-marker-collapsed, .default-marker-expanded),
+::slotted(:is([slot='marker-collapsed'], [slot='marker-expanded'])) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  position: relative;
+  height: 100%;
+  padding-inline-end: var(--spacingHorizontalS);
+  grid-column: 1 / span 1;
+  grid-row: 1;
+}
+
+.content {
+  margin: 0 var(--spacingHorizontalM);
+}
+
+::slotted([slot='start']) {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-right: var(--spacingHorizontalS);
+  grid-column: 2 / span 1;
+  grid-row: 1;
+}
+
+button:focus-visible::after {
+  content: '';
+  position: absolute;
+  inset: 0px;
+  cursor: pointer;
+  border-radius: var(--borderRadiusSmall);
+  outline: none;
+  border: 2px solid var(--colorStrokeFocus1);
+  box-shadow: inset 0 0 0 1px var(--colorStrokeFocus2);
+}
+
+/* --- Disabled attr styles --- */
+
+:host([disabled]) .button {
+  color: var(--colorNeutralForegroundDisabled);
+}
+
+:host([disabled]) svg {
+  filter: invert(89%) sepia(0%) saturate(569%) hue-rotate(155deg) brightness(88%) contrast(87%);
+}
+
+/* --- Expanded attr styles --- */
+
+:host([expanded]) .content {
+  display: block;
+}
+
+:host([expanded]) .default-marker-collapsed,
+:host([expanded]) ::slotted([slot='marker-collapsed']),
+:host(:not([expanded])) :is(.default-marker-expanded, .content),
+:host(:not([expanded])) ::slotted([slot='marker-expanded']) {
+  display: none;
+}
+
+:host([expanded]) ::slotted([slot='marker-expanded']),
+:host(:not([expanded])) ::slotted([slot='marker-collapsed']) {
+  display: flex;
+}
+
+/* --- Appearance attr styles --- */
+
+.heading {
+  font-size: var(--fontSizeBase300);
+  line-height: var(--lineHeightBase300);
+}
+
+:host([size='small']) .heading {
+  font-size: var(--fontSizeBase200);
+  line-height: var(--lineHeightBase200);
+}
+
+:host([size='large']) .heading {
+  font-size: var(--fontSizeBase400);
+  line-height: var(--lineHeightBase400);
+}
+
+:host([size='extra-large']) .heading {
+  font-size: var(--fontSizeBase500);
+  line-height: var(--lineHeightBase500);
+}
+
+/* --- marker-position attr styles --- */
+
+:host([marker-position='end']) ::slotted([slot='start']) {
+  grid-column: 1 / span 1;
+}
+
+:host([marker-position='end']) :is(.default-marker-collapsed, .default-marker-expanded) {
+  grid-column: 4 / span 1;
+  padding-inline-start: var(--spacingHorizontalS);
+  padding-inline-end: 0;
+}
+
+:host([marker-position='end']) .button {
+  grid-column: 2 / span 3;
+}
+
+/* --- Block attr styles --- */
+
+:host([block]) {
+  max-width: 100%;
+}
+
+:host([marker-position='end']) .heading {
+  grid-template-columns: auto auto 28px;
+  padding-inline: var(--spacingHorizontalM);
+}
+
+:host([marker-position='end']:has([slot='start'])) .heading {
+  padding-inline: var(--spacingHorizontalMNudge) var(--spacingHorizontalM);
+}
+
+:host([block][marker-position='end']) .heading {
+  grid-template-columns: auto 1fr;
+}
+
+:host([marker-position='end']) :is(.default-marker-collapsed, .default-marker-expanded) {
+  grid-column: 5 / span 1;
+}

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>