@fluentui/web-components 3.0.0-rc.3 → 3.0.0-rc.31

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

@@ -0,0 +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;
+
+  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);
+
+  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);
+
+  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);
+}
+
+/**
+  * 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([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([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

@@ -12,7 +12,6 @@ export const styles = css `
   ${display('inline-flex')}
 
   :host {
-    anchor-name: --dropdown-trigger;
     box-sizing: border-box;
     color: ${colorNeutralForeground1};
     cursor: pointer;
@@ -36,6 +35,7 @@ export const styles = css `
     min-width: 160px;
     overflow: hidden;
     padding: ${spacingVerticalSNudge} ${spacingHorizontalMNudge};
+    white-space: normal;
     position: relative;
     text-align: start;
     width: 100%;
@@ -186,6 +186,7 @@ export const styles = css `
     color: ${colorNeutralForegroundDisabled};
   }
 
+  ::slotted(:not([slot]):not([popover])),
   ::slotted([popover]:not(:popover-open)) {
     display: none;
   }
@@ -212,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,EAAkB,SAAS,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAC7F,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;;;;;aAKb,uBAAuB;;;;UAI1B,qBAAqB;aAClB,uBAAuB;;;;;wBAKZ,uBAAuB;qBAC1B,kBAAkB;cACzB,eAAe,UAAU,sBAAsB;8BAC/B,eAAe;;;kBAG3B,oBAAoB;;;;;eAKvB,qBAAqB,IAAI,uBAAuB;;;;;MAKzD,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;;;;;;;;;;8BAUb,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

@@ -0,0 +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>
+</f-template>

package/dist/esm/dropdown/index.d.ts

@@ -4,3 +4,4 @@ export { Dropdown } from './dropdown.js';
 export { DropdownAppearance, DropdownSize, DropdownType, isDropdown, type DropdownOptions, } from './dropdown.options.js';
 export { styles as DropdownStyles } from './dropdown.styles.js';
 export { dropdownButtonTemplate, dropdownInputTemplate, template as DropdownTemplate, dropdownTemplate, } from './dropdown.template.js';
+export { tagName as DropdownTagName } from './dropdown.options.js';

package/dist/esm/dropdown/index.js

@@ -4,4 +4,5 @@ export { Dropdown } from './dropdown.js';
 export { DropdownAppearance, DropdownSize, DropdownType, isDropdown, } from './dropdown.options.js';
 export { styles as DropdownStyles } from './dropdown.styles.js';
 export { dropdownButtonTemplate, dropdownInputTemplate, template as DropdownTemplate, dropdownTemplate, } from './dropdown.template.js';
+export { tagName as DropdownTagName } from './dropdown.options.js';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/dropdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC5E,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EACL,kBAAkB,EAClB,YAAY,EACZ,YAAY,EACZ,UAAU,GAEX,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EACL,sBAAsB,EACtB,qBAAqB,EACrB,QAAQ,IAAI,gBAAgB,EAC5B,gBAAgB,GACjB,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/dropdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC5E,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EACL,kBAAkB,EAClB,YAAY,EACZ,YAAY,EACZ,UAAU,GAEX,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EACL,sBAAsB,EACtB,qBAAqB,EACrB,QAAQ,IAAI,gBAAgB,EAC5B,gBAAgB,GACjB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/esm/field/define-async.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/field/define-async.js

@@ -0,0 +1,4 @@
+import { declarativeDefinition } from './field.definition-async.js';
+import { Field } from './field.js';
+Field.define(declarativeDefinition);
+//# sourceMappingURL=define-async.js.map

package/dist/esm/field/define-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define-async.js","sourceRoot":"","sources":["../../../src/field/define-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AACpE,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,KAAK,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC"}

package/dist/esm/field/define.js

@@ -1,4 +1,4 @@
-import { FluentDesignSystem } from '../fluent-design-system.js';
 import { definition } from './field.definition.js';
-definition.define(FluentDesignSystem.registry);
+import { Field } from './field.js';
+Field.define(definition);
 //# sourceMappingURL=define.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/field/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/field/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC"}

package/dist/esm/field/field.base.d.ts

@@ -6,7 +6,18 @@ import { type SlottableInput } from './field.options.js';
  * @public
  */
 export declare class BaseField extends FASTElement {
-    private slottedInputObserver;
+    /**
+     * The mutation observer for the slotted input.
+     *
+     * @internal
+     */
+    private _slottedInputObserver?;
+    /**
+     * Gets the mutation observer for the slotted input, creating it if it doesn't exist.
+     *
+     * @internal
+     */
+    protected get slottedInputObserver(): MutationObserver;
     /**
      * The slotted label elements.
      *

package/dist/esm/field/field.base.js

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
 import { FASTElement, observable } from '@microsoft/fast-element';
-import { uniqueId } from '@microsoft/fast-web-utilities';
+import { uniqueId } from '../utils/unique-id.js';
 import { toggleState } from '../utils/element-internals.js';
 import { ValidationFlags } from './field.options.js';
 /**
@@ -9,6 +9,17 @@ import { ValidationFlags } from './field.options.js';
  * @public
  */
 export class BaseField extends FASTElement {
+    /**
+     * Gets the mutation observer for the slotted input, creating it if it doesn't exist.
+     *
+     * @internal
+     */
+    get slottedInputObserver() {
+        this._slottedInputObserver ??= new MutationObserver(() => {
+            this.setStates();
+        });
+        return this._slottedInputObserver;
+    }
     /**
      * Updates attributes on the slotted label elements.
      *
@@ -54,7 +65,7 @@ export class BaseField extends FASTElement {
         if (next) {
             this.setStates();
             this.setLabelProperties();
-            this.slottedInputObserver.observe(this.input, {
+            this.slottedInputObserver.observe(next, {
                 attributes: true,
                 attributeFilter: ['disabled', 'required', 'readonly'],
                 subtree: true,
@@ -103,9 +114,6 @@ export class BaseField extends FASTElement {
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('invalid', this.invalidHandler, { capture: true });
-        this.slottedInputObserver = new MutationObserver(() => {
-            this.setStates();
-        });
     }
     disconnectedCallback() {
         this.slottedInputObserver.disconnect();

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

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

package/dist/esm/field/field.bench.d.ts

@@ -1,3 +1,4 @@
+import './define.js';
 declare const itemRenderer: () => HTMLElement;
 export default itemRenderer;
 export { tests } from '../utils/benchmark-wrapper.js';

package/dist/esm/field/field.bench.js

@@ -1,6 +1,4 @@
-import { FluentDesignSystem } from '../fluent-design-system.js';
-import { definition } from './field.definition.js';
-definition.define(FluentDesignSystem.registry);
+import './define.js';
 const itemRenderer = () => {
     const field = document.createElement('fluent-field');
     return field;

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

@@ -1 +1 @@
-{"version":3,"file":"field.bench.js","sourceRoot":"","sources":["../../../src/field/field.bench.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;AAE/C,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IACrD,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}
+{"version":3,"file":"field.bench.js","sourceRoot":"","sources":["../../../src/field/field.bench.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAErB,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IACrD,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}

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

@@ -0,0 +1,10 @@
+import { type PartialFASTElementDefinition } from '@microsoft/fast-element/declarative.js';
+/**
+ * The async definition configuration for the `<fluent-field>` element.
+ *
+ * @public
+ * @remarks
+ * This is used in server-side rendering (SSR) scenarios where the template
+ * is provided as a deferred option to be hydrated later.
+ */
+export declare const declarativeDefinition: PartialFASTElementDefinition;

package/dist/esm/field/field.definition-async.js

@@ -0,0 +1,20 @@
+import { declarativeTemplate } from '@microsoft/fast-element/declarative.js';
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { tagName } from './field.options.js';
+/**
+ * The async definition configuration for the `<fluent-field>` element.
+ *
+ * @public
+ * @remarks
+ * This is used in server-side rendering (SSR) scenarios where the template
+ * is provided as a deferred option to be hydrated later.
+ */
+export const declarativeDefinition = {
+    name: tagName,
+    registry: FluentDesignSystem.registry,
+    shadowOptions: {
+        delegatesFocus: true,
+    },
+    template: declarativeTemplate(),
+};
+//# sourceMappingURL=field.definition-async.js.map

package/dist/esm/field/field.definition-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.definition-async.js","sourceRoot":"","sources":["../../../src/field/field.definition-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAqC,MAAM,wCAAwC,CAAC;AAChH,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAE7C;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAiC;IACjE,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,kBAAkB,CAAC,QAAQ;IACrC,aAAa,EAAE;QACb,cAAc,EAAE,IAAI;KACrB;IACD,QAAQ,EAAE,mBAAmB,EAAE;CAChC,CAAC"}

package/dist/esm/field/field.definition.d.ts

@@ -1,9 +1,7 @@
-import { Field } from './field.js';
+import type { PartialFASTElementDefinition } from '@microsoft/fast-element';
 /**
- * The Fluent Field Element
+ * The definition for the `<fluent-field>` element.
  *
  * @public
- * @remarks
- * HTML Element: `<fluent-field>`
  */
-export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof Field>;
+export declare const definition: PartialFASTElementDefinition;

package/dist/esm/field/field.definition.js

@@ -1,20 +1,19 @@
 import { FluentDesignSystem } from '../fluent-design-system.js';
-import { Field } from './field.js';
+import { tagName } from './field.options.js';
 import { styles } from './field.styles.js';
 import { template } from './field.template.js';
 /**
- * The Fluent Field Element
+ * The definition for the `<fluent-field>` element.
  *
  * @public
- * @remarks
- * HTML Element: `<fluent-field>`
  */
-export const definition = Field.compose({
-    name: `${FluentDesignSystem.prefix}-field`,
-    template,
-    styles,
+export const definition = {
+    name: tagName,
+    registry: FluentDesignSystem.registry,
     shadowOptions: {
         delegatesFocus: true,
     },
-});
+    styles,
+    template,
+};
 //# sourceMappingURL=field.definition.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"field.definition.js","sourceRoot":"","sources":["../../../src/field/field.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE/C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC;IACtC,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,QAAQ;IAC1C,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACb,cAAc,EAAE,IAAI;KACrB;CACF,CAAC,CAAC"}
+{"version":3,"file":"field.definition.js","sourceRoot":"","sources":["../../../src/field/field.definition.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE/C;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAiC;IACtD,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,kBAAkB,CAAC,QAAQ;IACrC,aAAa,EAAE;QACb,cAAc,EAAE,IAAI;KACrB;IACD,MAAM;IACN,QAAQ;CACT,CAAC"}

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"}

package/dist/esm/field/field.options.d.ts

@@ -41,3 +41,9 @@ export declare const ValidationFlags: {
 };
 /** @public */
 export type ValidationFlags = ValuesOf<typeof ValidationFlags>;
+/**
+ * The tag name for the field element.
+ *
+ * @public
+ */
+export declare const tagName: "fluent-field";

package/dist/esm/field/field.options.js

@@ -1,3 +1,4 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
 /**
  * Label position values
  * @public
@@ -24,4 +25,10 @@ export const ValidationFlags = {
     valueMissing: 'value-missing',
     valid: 'valid',
 };
+/**
+ * The tag name for the field element.
+ *
+ * @public
+ */
+export const tagName = `${FluentDesignSystem.prefix}-field`;
 //# sourceMappingURL=field.options.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"field.options.js","sourceRoot":"","sources":["../../../src/field/field.options.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;CACR,CAAC;AAmBX;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,QAAQ,EAAE,WAAW;IACrB,WAAW,EAAE,cAAc;IAC3B,eAAe,EAAE,kBAAkB;IACnC,aAAa,EAAE,gBAAgB;IAC/B,cAAc,EAAE,iBAAiB;IACjC,YAAY,EAAE,eAAe;IAC7B,OAAO,EAAE,UAAU;IACnB,QAAQ,EAAE,WAAW;IACrB,YAAY,EAAE,eAAe;IAC7B,YAAY,EAAE,eAAe;IAC7B,KAAK,EAAE,OAAO;CACN,CAAC"}
+{"version":3,"file":"field.options.js","sourceRoot":"","sources":["../../../src/field/field.options.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAGhE;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;CACR,CAAC;AAmBX;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,QAAQ,EAAE,WAAW;IACrB,WAAW,EAAE,cAAc;IAC3B,eAAe,EAAE,kBAAkB;IACnC,aAAa,EAAE,gBAAgB;IAC/B,cAAc,EAAE,iBAAiB;IACjC,YAAY,EAAE,eAAe;IAC7B,OAAO,EAAE,UAAU;IACnB,QAAQ,EAAE,WAAW;IACrB,YAAY,EAAE,eAAe;IAC7B,YAAY,EAAE,eAAe;IAC7B,KAAK,EAAE,OAAO;CACN,CAAC;AAKX;;;;GAIG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,kBAAkB,CAAC,MAAM,QAAiB,CAAC"}