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

package/dist/esm/dropdown/dropdown.styles.css

@@ -1,220 +1,222 @@
+:host([hidden]) {
+  display: none;
+}
+:host {
+  display: inline-flex;
+}
+
+:host {
+  box-sizing: border-box;
+  color: var(--colorNeutralForeground1);
+  cursor: pointer;
+}
+
+:host(:state(placeholder-shown)) {
+  color: var(--colorNeutralForeground4);
+}
+
+.control {
+  appearance: none;
+  background-color: var(--colorNeutralBackground1);
+  border-radius: var(--borderRadiusMedium);
+  border: var(--strokeWidthThin) solid var(--colorTransparentStroke);
+  box-shadow: inset 0 0 0 var(--strokeWidthThin) var(--control-border-color);
+  box-sizing: border-box;
+  color: inherit;
+  column-gap: var(--spacingHorizontalXXS);
+  display: inline-flex;
+  justify-content: space-between;
+  min-width: 160px;
+  overflow: hidden;
+  padding: var(--spacingVerticalSNudge) var(--spacingHorizontalMNudge);
+  white-space: normal;
+  position: relative;
+  text-align: start;
+  width: 100%;
+  z-index: 1;
 
-  :host([hidden]){display:none}:host{display:inline-flex}
-
-  :host {
-    box-sizing: border-box;
-    color: var(--colorNeutralForeground1);
-    cursor: pointer;
-  }
-
-  :host(:state(placeholder-shown)) {
-    color: var(--colorNeutralForeground4);
-  }
-
-  .control {
-    appearance: none;
-    background-color: var(--colorNeutralBackground1);
-    border-radius: var(--borderRadiusMedium);
-    border: var(--strokeWidthThin) solid var(--colorTransparentStroke);
-    box-shadow: inset 0 0 0 var(--strokeWidthThin) var(--control-border-color);
-    box-sizing: border-box;
-    color: inherit;
-    column-gap: var(--spacingHorizontalXXS);
-    display: inline-flex;
-    justify-content: space-between;
-    min-width: 160px;
-    overflow: hidden;
-    padding: var(--spacingVerticalSNudge) var(--spacingHorizontalMNudge);
-    white-space: normal;
-    position: relative;
-    text-align: start;
-    width: 100%;
-    z-index: 1;
-    
   font-family: var(--fontFamilyBase);
   font-size: var(--fontSizeBase300);
   line-height: var(--lineHeightBase300);
   font-weight: var(--fontWeightRegular);
+}
 
-  }
+:host([size='small']) .control {
+  column-gap: var(--spacingHorizontalXXS);
+  padding: var(--spacingVerticalXS) var(--spacingHorizontalSNudge);
 
-  :host([size='small']) .control {
-    column-gap: var(--spacingHorizontalXXS);
-    padding: var(--spacingVerticalXS) var(--spacingHorizontalSNudge);
-    
   font-family: var(--fontFamilyBase);
   font-size: var(--fontSizeBase200);
   line-height: var(--lineHeightBase200);
   font-weight: var(--fontWeightRegular);
+}
 
-  }
+:host([size='large']) .control {
+  column-gap: var(--spacingHorizontalS);
+  padding: var(--spacingVerticalS) var(--spacingHorizontalM);
 
-  :host([size='large']) .control {
-    column-gap: var(--spacingHorizontalS);
-    padding: var(--spacingVerticalS) var(--spacingHorizontalM);
-    
   font-family: var(--fontFamilyBase);
   font-size: var(--fontSizeBase400);
   line-height: var(--lineHeightBase400);
   font-weight: var(--fontWeightRegular);
-
-  }
-
-  ::slotted(:is(input, button)) {
-    all: unset;
-    flex: 1 1 auto;
-  }
-
-  ::slotted(button) {
-    cursor: pointer;
-  }
-
-  ::slotted(input) {
-    cursor: text;
-  }
-
-  :where(slot[name='indicator'] > *, ::slotted([slot='indicator'])) {
-    all: unset;
-    align-items: center;
-    appearance: none;
-    aspect-ratio: 1;
-    color: var(--colorNeutralForeground3);
-    display: inline-flex;
-    justify-content: center;
-    width: 20px;
-  }
-
-  :host([size='small']) :where(slot[name='indicator'] > *, ::slotted([slot='indicator'])) {
-    width: 16px;
-  }
-
-  :host([size='large']) :where(slot[name='indicator'] > *, ::slotted([slot='indicator'])) {
-    width: 24px;
-  }
-
-  .control::after,
-  .control::before {
-    content: '' / '';
-    inset: auto 0 0;
-    pointer-events: none;
-    position: absolute;
-  }
-
-  .control::before {
-    height: var(--strokeWidthThin);
-  }
-
-  .control::after {
-    background-color: var(--colorCompoundBrandStroke);
-    height: var(--strokeWidthThick);
-    scale: 0 1;
-    transition: scale var(--durationUltraFast) var(--curveDecelerateMid);
-  }
-
-  /**
+}
+
+::slotted(:is(input, button)) {
+  all: unset;
+  flex: 1 1 auto;
+}
+
+::slotted(button) {
+  cursor: pointer;
+}
+
+::slotted(input) {
+  cursor: text;
+}
+
+:where(slot[name='indicator'] > *, ::slotted([slot='indicator'])) {
+  all: unset;
+  align-items: center;
+  appearance: none;
+  aspect-ratio: 1;
+  color: var(--colorNeutralForeground3);
+  display: inline-flex;
+  justify-content: center;
+  width: 20px;
+}
+
+:host([size='small']) :where(slot[name='indicator'] > *, ::slotted([slot='indicator'])) {
+  width: 16px;
+}
+
+:host([size='large']) :where(slot[name='indicator'] > *, ::slotted([slot='indicator'])) {
+  width: 24px;
+}
+
+.control::after,
+.control::before {
+  content: '' / '';
+  inset: auto 0 0;
+  pointer-events: none;
+  position: absolute;
+}
+
+.control::before {
+  height: var(--strokeWidthThin);
+}
+
+.control::after {
+  background-color: var(--colorCompoundBrandStroke);
+  height: var(--strokeWidthThick);
+  scale: 0 1;
+  transition: scale var(--durationUltraFast) var(--curveDecelerateMid);
+}
+
+/**
   * focus-ring style uses lingering :focus-within selector due to platform limitations
   * TODO: Convert selector to `:host(:has(:focus-visible)) .control` when browser support increases
   * ISSUE: https://issues.chromium.org/issues/40062355
   */
-  :host(:where(:focus-within)) .control {
-    border-radius: var(--borderRadiusMedium);
-    box-shadow: inset 0 0 0 1px var(--colorStrokeFocus1);
-    outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
-  }
-
-  :host(:where(:state(open), :focus-within)) .control::after {
-    scale: 1 1;
-    transition-duration: var(--durationNormal);
-    transition-timing-function: var(--curveAccelerateMid);
-  }
-
-  :host(:where([appearance='outline'], [appearance='transparent'])) .control::before {
-    background-color: var(--colorNeutralStrokeAccessible);
-  }
-
-  :host([appearance='transparent']) .control {
-    --control-border-color: var(--colorTransparentStrokeInteractive);
-    background-color: var(--colorTransparentBackground);
-    border-radius: var(--borderRadiusNone);
-  }
-
-  :host([appearance='outline']) .control {
-    --control-border-color: var(--colorNeutralStroke1);
-  }
-
-  :host([appearance='outline']) .control:hover {
-    --control-border-color: var(--colorNeutralStroke1Hover);
-  }
-
-  :host(:where([appearance='outline'], [appearance='transparent'])) .control:hover::before {
-    background-color: var(--colorNeutralStrokeAccessibleHover);
-  }
-
-  :host([appearance='outline']) .control:hover::after {
-    background-color: var(--colorCompoundBrandBackgroundHover);
-  }
-
-  :host([appearance='outline']) .control:active {
-    --control-border-color: var(--colorNeutralStroke1Pressed);
-  }
-
-  :host(:where([appearance='outline'], [appearance='transparent'])) .control:active::before {
-    background-color: var(--colorNeutralStrokeAccessiblePressed);
-  }
-
-  :host(:where([appearance='outline'], [appearance='transparent'])) .control:active::after {
-    background-color: var(--colorCompoundBrandBackgroundPressed);
-  }
-
-  :host([appearance='filled-darker']) .control {
-    background-color: var(--colorNeutralBackground3);
+:host(:where(:focus-within)) .control {
+  border-radius: var(--borderRadiusMedium);
+  box-shadow: inset 0 0 0 1px var(--colorStrokeFocus1);
+  outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
+}
+
+:host(:where(:state(open), :focus-within)) .control::after {
+  scale: 1 1;
+  transition-duration: var(--durationNormal);
+  transition-timing-function: var(--curveAccelerateMid);
+}
+
+:host(:where([appearance='outline'], [appearance='transparent'])) .control::before {
+  background-color: var(--colorNeutralStrokeAccessible);
+}
+
+:host([appearance='transparent']) .control {
+  --control-border-color: var(--colorTransparentStrokeInteractive);
+  background-color: var(--colorTransparentBackground);
+  border-radius: var(--borderRadiusNone);
+}
+
+:host([appearance='outline']) .control {
+  --control-border-color: var(--colorNeutralStroke1);
+}
+
+:host([appearance='outline']) .control:hover {
+  --control-border-color: var(--colorNeutralStroke1Hover);
+}
+
+:host(:where([appearance='outline'], [appearance='transparent'])) .control:hover::before {
+  background-color: var(--colorNeutralStrokeAccessibleHover);
+}
+
+:host([appearance='outline']) .control:hover::after {
+  background-color: var(--colorCompoundBrandBackgroundHover);
+}
+
+:host([appearance='outline']) .control:active {
+  --control-border-color: var(--colorNeutralStroke1Pressed);
+}
+
+:host(:where([appearance='outline'], [appearance='transparent'])) .control:active::before {
+  background-color: var(--colorNeutralStrokeAccessiblePressed);
+}
+
+:host(:where([appearance='outline'], [appearance='transparent'])) .control:active::after {
+  background-color: var(--colorCompoundBrandBackgroundPressed);
+}
+
+:host([appearance='filled-darker']) .control {
+  background-color: var(--colorNeutralBackground3);
+}
+
+:host(:where([appearance='filled-lighter'], [appearance='filled-darker'])) .control {
+  --control-border-color: var(--colorTransparentStroke);
+}
+
+:host(:disabled),
+:host(:disabled) ::slotted(:where(button, input)) {
+  cursor: not-allowed;
+}
+
+:host(:disabled) .control::before,
+:host(:disabled) .control::after {
+  content: none;
+}
+
+:host(:disabled) .control:is(*, :active, :hover),
+:host(:disabled) :where(slot[name='indicator'] > *, ::slotted([slot='indicator'])) {
+  --control-border-color: var(--colorNeutralStrokeDisabled);
+  background-color: var(--colorNeutralBackgroundDisabled);
+  color: var(--colorNeutralForegroundDisabled);
+}
+
+::slotted(:not([slot]):not([popover])),
+::slotted([popover]:not(:popover-open)) {
+  display: none;
+}
+
+@supports not (anchor-name: --anchor) {
+  :host {
+    --listbox-max-height: 50vh;
+    --margin-offset: calc(var(--lineHeightBase300) + (var(--spacingVerticalSNudge) * 2) + var(--strokeWidthThin));
   }
 
-  :host(:where([appearance='filled-lighter'], [appearance='filled-darker'])) .control {
-    --control-border-color: var(--colorTransparentStroke);
+  :host([size='small']) {
+    --margin-offset: calc(var(--lineHeightBase200) + (var(--spacingVerticalXS) * 2) + var(--strokeWidthThin));
   }
 
-  :host(:disabled),
-  :host(:disabled) ::slotted(:where(button, input)) {
-    cursor: not-allowed;
+  :host([size='large']) {
+    --margin-offset: calc(var(--lineHeightBase400) + (var(--spacingVerticalS) * 2) + var(--strokeWidthThin));
   }
+}
 
-  :host(:disabled) .control::before,
-  :host(:disabled) .control::after {
-    content: none;
+@media (forced-colors: active) {
+  :host(:disabled) .control {
+    border-color: GrayText;
   }
-
-  :host(:disabled) .control:is(*, :active, :hover),
   :host(:disabled) :where(slot[name='indicator'] > *, ::slotted([slot='indicator'])) {
-    --control-border-color: var(--colorNeutralStrokeDisabled);
-    background-color: var(--colorNeutralBackgroundDisabled);
-    color: var(--colorNeutralForegroundDisabled);
+    color: GrayText;
   }
-
-  ::slotted(:not([slot]):not([popover])),
-  ::slotted([popover]:not(:popover-open)) {
-    display: none;
-  }
-
-  @supports not (anchor-name: --anchor) {
-    :host {
-      --listbox-max-height: 50vh;
-      --margin-offset: calc(var(--lineHeightBase300) + (var(--spacingVerticalSNudge) * 2) + var(--strokeWidthThin));
-    }
-
-    :host([size='small']) {
-      --margin-offset: calc(var(--lineHeightBase200) + (var(--spacingVerticalXS) * 2) + var(--strokeWidthThin));
-    }
-
-    :host([size='large']) {
-      --margin-offset: calc(var(--lineHeightBase400) + (var(--spacingVerticalS) * 2) + var(--strokeWidthThin));
-    }
-  }
-
-  @media (forced-colors: active) {
-    :host(:disabled) .control {
-      border-color: GrayText;
-    }
-    :host(:disabled) :where(slot[name='indicator'] > *, ::slotted([slot='indicator'])) {
-      color: GrayText;
-    }
+}

package/dist/esm/dropdown/dropdown.styles.js

@@ -213,5 +213,6 @@ export const styles = css `
     :host(:disabled) :where(slot[name='indicator'] > *, ::slotted([slot='indicator'])) {
       color: GrayText;
     }
+  }
 `;
 //# sourceMappingURL=dropdown.styles.js.map

package/dist/esm/dropdown/dropdown.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.styles.js","sourceRoot":"","sources":["../../../src/dropdown/dropdown.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,qBAAqB,EACrB,qBAAqB,EACrB,wBAAwB,GACzB,MAAM,2CAA2C,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAC7E,OAAO,EACL,kBAAkB,EAClB,gBAAgB,EAChB,iCAAiC,EACjC,mCAAmC,EACnC,wBAAwB,EACxB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,0BAA0B,EAC1B,iBAAiB,EACjB,iBAAiB,EACjB,0BAA0B,EAC1B,sBAAsB,EACtB,iCAAiC,EACjC,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,EACvB,kBAAkB,EAClB,uBAAuB,EACvB,oBAAoB,EACpB,gBAAgB,EAChB,qBAAqB,EACrB,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;aAIb,uBAAuB;;;;UAI1B,qBAAqB;aAClB,uBAAuB;;;;;wBAKZ,uBAAuB;qBAC1B,kBAAkB;cACzB,eAAe,UAAU,sBAAsB;8BAC/B,eAAe;;;kBAG3B,oBAAoB;;;;;eAKvB,qBAAqB,IAAI,uBAAuB;;;;;;MAMzD,qBAAqB;;;;kBAIT,oBAAoB;eACvB,iBAAiB,IAAI,uBAAuB;MACrD,wBAAwB;;;;kBAIZ,kBAAkB;eACrB,gBAAgB,IAAI,kBAAkB;MAC/C,qBAAqB;;;;;;;;;;;;;;;;;;;;;aAqBd,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;cAuBtB,eAAe;;;;wBAIL,wBAAwB;cAClC,gBAAgB;;wBAEN,iBAAiB,IAAI,kBAAkB;;;;;;;;;qBAS1C,kBAAkB;kCACL,iBAAiB;eACpC,gBAAgB,UAAU,iBAAiB;;;iBAGzC,SAAS;;2BAEC,cAAc;kCACP,kBAAkB;;;;wBAI5B,4BAA4B;;;;8BAItB,iCAAiC;wBACvC,0BAA0B;qBAC7B,gBAAgB;;;;8BAIP,mBAAmB;;;;8BAInB,wBAAwB;;;;wBAI9B,iCAAiC;;;;wBAIjC,iCAAiC;;;;8BAI3B,0BAA0B;;;;wBAIhC,mCAAmC;;;;wBAInC,mCAAmC;;;;wBAInC,uBAAuB;;;;8BAIjB,sBAAsB;;;;;;;;;;;;;;;8BAetB,0BAA0B;wBAChC,8BAA8B;aACzC,8BAA8B;;;;;;;;;;;8BAWb,iBAAiB,OAAO,qBAAqB,WAAW,eAAe;;;;8BAIvE,iBAAiB,OAAO,iBAAiB,WAAW,eAAe;;;;8BAInE,iBAAiB,OAAO,gBAAgB,WAAW,eAAe;;;;;;;;;;;CAW/F,CAAC"}
+{"version":3,"file":"dropdown.styles.js","sourceRoot":"","sources":["../../../src/dropdown/dropdown.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,qBAAqB,EACrB,qBAAqB,EACrB,wBAAwB,GACzB,MAAM,2CAA2C,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAC7E,OAAO,EACL,kBAAkB,EAClB,gBAAgB,EAChB,iCAAiC,EACjC,mCAAmC,EACnC,wBAAwB,EACxB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,0BAA0B,EAC1B,iBAAiB,EACjB,iBAAiB,EACjB,0BAA0B,EAC1B,sBAAsB,EACtB,iCAAiC,EACjC,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,EACvB,kBAAkB,EAClB,uBAAuB,EACvB,oBAAoB,EACpB,gBAAgB,EAChB,qBAAqB,EACrB,iBAAiB,EACjB,gBAAgB,EAChB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;aAIb,uBAAuB;;;;UAI1B,qBAAqB;aAClB,uBAAuB;;;;;wBAKZ,uBAAuB;qBAC1B,kBAAkB;cACzB,eAAe,UAAU,sBAAsB;8BAC/B,eAAe;;;kBAG3B,oBAAoB;;;;;eAKvB,qBAAqB,IAAI,uBAAuB;;;;;;MAMzD,qBAAqB;;;;kBAIT,oBAAoB;eACvB,iBAAiB,IAAI,uBAAuB;MACrD,wBAAwB;;;;kBAIZ,kBAAkB;eACrB,gBAAgB,IAAI,kBAAkB;MAC/C,qBAAqB;;;;;;;;;;;;;;;;;;;;;aAqBd,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;cAuBtB,eAAe;;;;wBAIL,wBAAwB;cAClC,gBAAgB;;wBAEN,iBAAiB,IAAI,kBAAkB;;;;;;;;;qBAS1C,kBAAkB;kCACL,iBAAiB;eACpC,gBAAgB,UAAU,iBAAiB;;;iBAGzC,SAAS;;2BAEC,cAAc;kCACP,kBAAkB;;;;wBAI5B,4BAA4B;;;;8BAItB,iCAAiC;wBACvC,0BAA0B;qBAC7B,gBAAgB;;;;8BAIP,mBAAmB;;;;8BAInB,wBAAwB;;;;wBAI9B,iCAAiC;;;;wBAIjC,iCAAiC;;;;8BAI3B,0BAA0B;;;;wBAIhC,mCAAmC;;;;wBAInC,mCAAmC;;;;wBAInC,uBAAuB;;;;8BAIjB,sBAAsB;;;;;;;;;;;;;;;8BAetB,0BAA0B;wBAChC,8BAA8B;aACzC,8BAA8B;;;;;;;;;;;8BAWb,iBAAiB,OAAO,qBAAqB,WAAW,eAAe;;;;8BAIvE,iBAAiB,OAAO,iBAAiB,WAAW,eAAe;;;;8BAInE,iBAAiB,OAAO,gBAAgB,WAAW,eAAe;;;;;;;;;;;;CAY/F,CAAC"}

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

@@ -6,6 +6,13 @@ import { LabelPosition } from './field.options.js';
  *
  * @tag fluent-field
  *
+ * @slot label - Label content associated with the control.
+ * @slot input - Input control content.
+ * @slot message - Validation and helper message content.
+ * @csspart label - The label slot container.
+ * @csspart input - The input slot container.
+ * @csspart message - The message slot container.
+ *
  * @public
  */
 export declare class Field extends BaseField {

package/dist/esm/field/field.js

@@ -8,6 +8,13 @@ import { LabelPosition } from './field.options.js';
  *
  * @tag fluent-field
  *
+ * @slot label - Label content associated with the control.
+ * @slot input - Input control content.
+ * @slot message - Validation and helper message content.
+ * @csspart label - The label slot container.
+ * @csspart input - The input slot container.
+ * @csspart message - The message slot container.
+ *
  * @public
  */
 export class Field extends BaseField {

package/dist/esm/field/field.js.map

@@ -1 +1 @@
-{"version":3,"file":"field.js","sourceRoot":"","sources":["../../../src/field/field.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD;;;;;;;GAOG;AACH,MAAM,OAAO,KAAM,SAAQ,SAAS;IAApC;;QACE;;;;;;WAMG;QAEI,kBAAa,GAAkB,aAAa,CAAC,KAAK,CAAC;IAC5D,CAAC;CAAA;AADQ;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;4CACoB"}
+{"version":3,"file":"field.js","sourceRoot":"","sources":["../../../src/field/field.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD;;;;;;;;;;;;;;GAcG;AACH,MAAM,OAAO,KAAM,SAAQ,SAAS;IAApC;;QACE;;;;;;WAMG;QAEI,kBAAa,GAAkB,aAAa,CAAC,KAAK,CAAC;IAC5D,CAAC;CAAA;AADQ;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;4CACoB"}