@fabric-msft/fabric-web 5.0.1 → 7.2.0

package/esm/components/radio-group/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../../src/components/radio-group/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,UAAU,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC"}

package/esm/components/radio-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/radio-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EACL,sBAAsB,EACtB,oBAAoB,EACrB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,UAAU,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC"}

package/esm/components/radio-group/radio-group.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.definition.js","sourceRoot":"","sources":["../../../../src/components/radio-group/radio-group.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAChF,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAAC,OAAO,CAAC;IAC3C,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,cAAc;IAC1C,QAAQ,EAAE,kBAAkB;IAC5B,MAAM,EAAE,gBAAgB;IACxB,aAAa,EAAE;QACb,IAAI,EAAE,YAAY,CAAC,cAAc;KAClC;CACF,CAAC,CAAC"}

package/esm/components/radio-group/radio-group.js

@@ -0,0 +1,65 @@
+import { RadioGroup as RadioGroup$1 } from '@fluentui/web-components';
+import { Radio } from '../radio/radio.js';
+
+/**
+ * RadioGroup
+ * @summary A custom Radio Group element based on Fluent UI's RadioGroup with custom styling and behavior.
+ *
+ * @example
+ * ```html
+ * <fabric-radio-group name="group1" orientation="horizontal">
+ *   <fabric-radio value="option1">Option 1</fabric-radio>
+ *   <fabric-radio value="option2">Option 2</fabric-radio>
+ *   <fabric-radio value="option3">Option 3</fabric-radio>
+ * </fabric-radio-group>
+ * ```
+ *
+ * @attr {boolean} disabled - Disables the radio group and child radios.
+ * @attr {string} value - The value of the checked radio.
+ * @attr {string} name - The name of the radio group.
+ * @attr {RadioGroupOrientation} orientation - The orientation of the group.
+ * @attr {boolean} required - Indicates whether the radio group is required.
+ *
+ * @prop {boolean} disabled - Disables the radio group and child radios.
+ * @prop {string} value - The value of the checked radio.
+ * @prop {string} name - The name of the radio group.
+ * @prop {RadioGroupOrientation} orientation - The orientation of the group.
+ * @prop {boolean} required - Indicates whether the radio group is required.
+ *
+ * @slot - The default slot for the radio group.
+ *
+ * @method initialValueChanged - Sets the matching radio to checked when the value changes.
+ * @method radiosChanged - Updates the enabled radios collection when properties on the child radios change.
+ * @method requiredChanged - Called when the required property changes.
+ * @method changeHandler - Sets the checked state of all radios when any radio emits a `change` event.
+ * @method checkValidity - Checks the validity of the element and returns the result.
+ * @method formResetCallback - Resets the radio group to its initial state during a form reset.
+ * @method reportValidity - Reports the validity of the element.
+ *
+ * @fires change - Emits when the checked radio changes.
+ *
+ * @extends FASTElement
+ * @tagname fabric-radio-group
+ * @public
+ */
+class RadioGroup extends RadioGroup$1 {
+  /**
+   * Re-collects `this.radios` from slotted children, restricted to elements
+   * that have already upgraded to the `Radio` class.
+   *
+   * @remarks
+   * The upstream implementation collects every descendant whose tag name
+   * ends in `-radio` (via `isRadio`), which matches bare `HTMLElement`s
+   * that haven't been upgraded yet.
+   *
+   * Filtering with `instanceof Radio` excludes pre-upgrade elements, so we
+   * never write through their shadowed accessors.
+   *
+   * @internal
+   */
+  slottedRadiosChanged() {
+    this.radios = [...this.querySelectorAll("*")].filter(x => x instanceof Radio);
+  }
+}
+
+export { RadioGroup };

package/esm/components/radio-group/radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.js","sourceRoot":"","sources":["../../../../src/components/radio-group/radio-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC1E,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,MAAM,OAAO,UAAW,SAAQ,gBAAgB;IAC9C;;;;;;;;;;;;;OAaG;IACa,oBAAoB;QAClC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAClD,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,YAAY,KAAK,CACf,CAAC;IACf,CAAC;CACF"}

package/esm/components/radio-group/radio-group.options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.options.js","sourceRoot":"","sources":["../../../../src/components/radio-group/radio-group.options.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,IAAI,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AAGhG,iDAAiD;AACjD,MAAM,CAAC,MAAM,sBAAsB,GAAG;IACpC,GAAG,2BAA2B;CACtB,CAAC;AAKX;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,MAAM,EAAE,QAAQ;CACR,CAAC"}

package/esm/components/rating-display/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../../src/components/rating-display/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,UAAU,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC"}

package/esm/components/rating-display/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/rating-display/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,UAAU,IAAI,uBAAuB,EAAE,MAAM,gCAAgC,CAAC;AACvF,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EACnB,MAAM,6BAA6B,CAAC"}

package/esm/components/rating-display/rating-display.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rating-display.definition.js","sourceRoot":"","sources":["../../../../src/components/rating-display/rating-display.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EACL,mBAAmB,EACnB,qBAAqB,EACtB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,aAAa,CAAC,OAAO,CAAC;IAC9C,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,iBAAiB;IAC7C,QAAQ,EAAE,qBAAqB;IAC/B,MAAM,EAAE,mBAAmB;IAC3B,aAAa,EAAE;QACb,IAAI,EAAE,YAAY,CAAC,cAAc;KAClC;CACF,CAAC,CAAC"}

package/esm/components/rating-display/rating-display.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rating-display.js","sourceRoot":"","sources":["../../../../src/components/rating-display/rating-display.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAEhF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,MAAM,OAAO,aAAc,SAAQ,mBAAmB;CAAG"}

package/esm/components/rating-display/rating-display.options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rating-display.options.js","sourceRoot":"","sources":["../../../../src/components/rating-display/rating-display.options.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,IAAI,wBAAwB,EAC9C,iBAAiB,IAAI,uBAAuB,EAC7C,MAAM,0BAA0B,CAAC;AAGlC,8CAA8C;AAC9C,MAAM,CAAC,MAAM,mBAAmB,GAAG,EAAE,GAAG,wBAAwB,EAAW,CAAC;AAK5E,6CAA6C;AAC7C,MAAM,CAAC,MAAM,kBAAkB,GAAG,EAAE,GAAG,uBAAuB,EAAW,CAAC"}

package/esm/components/search-box/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../../src/components/search-box/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,UAAU,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAC/E,mBAAmB,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC"}

package/esm/components/search-box/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/search-box/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,UAAU,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAC/E,OAAO,EACL,+BAA+B,EAC/B,oBAAoB,EACpB,qBAAqB,EACrB,mBAAmB,EACnB,cAAc,EACf,MAAM,yBAAyB,CAAC"}

package/esm/components/search-box/search-box.definition.js

@@ -0,0 +1,27 @@
+import { definition as definition$1 } from '../button/button.definition.js';
+import { DesignSystem } from '../design-system.js';
+import { composeDefinitions, fromFAST } from '../../util/element-definition.js';
+import { SearchBox } from './search-box.js';
+import { styles } from './search-box.styles.js';
+import { template } from './search-box.template.js';
+
+/** @internal */
+const SearchBoxDefinition = SearchBox.compose({
+  name: `${DesignSystem.prefix}-search-box`,
+  template,
+  styles,
+  shadowOptions: {
+    mode: DesignSystem.shadowRootMode
+  }
+});
+/**
+ * Composed element definition for `<fabric-search-box>`, registering the
+ * `fabric-button` dependency before the element itself.
+ *
+ * @public
+ * @remarks
+ * HTML Element: `<fabric-search-box>`
+ */
+const definition = composeDefinitions(fromFAST(SearchBoxDefinition), fromFAST(definition$1));
+
+export { definition };

package/esm/components/search-box/search-box.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-box.definition.js","sourceRoot":"","sources":["../../../../src/components/search-box/search-box.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAChF,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAChF,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAEpD,gBAAgB;AAChB,MAAM,mBAAmB,GAAG,SAAS,CAAC,OAAO,CAAC;IAC5C,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,aAAa;IACzC,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACb,IAAI,EAAE,YAAY,CAAC,cAAc;KAClC;CACF,CAAC,CAAC;AAEH;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,kBAAkB,CAC1C,QAAQ,CAAC,mBAAmB,CAAC,EAC7B,QAAQ,CAAC,gBAAgB,CAAC,CAC3B,CAAC"}

package/esm/components/search-box/search-box.js

@@ -0,0 +1,176 @@
+import { TextInput } from '../text-input/text-input.js';
+import { SearchBoxTypes, SearchBoxEventNames } from './search-box.options.js';
+import { observable } from '@microsoft/fast-element';
+
+var __decorate = globalThis && globalThis.__decorate || function (decorators, target, key, desc) {
+  var c = arguments.length,
+    r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+    d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * SearchBox
+ * @summary A SearchBox custom HTML input element based on Fluent UI's SearchBox. Inherits from fabric UX TextInput.
+ *
+ * @example
+ * ```html
+ * <fabric-search-box aria-label="Search Box" placeholder="Search..."></fabric-search-box>
+ * ```
+ *
+ * @attr {string | undefined} appearance - Indicates the styled appearance of the element.
+ * @attr {string | undefined} control-size - Sets the size of the control.
+ * @attr {string | undefined} autocomplete - Indicates the element's autocomplete state.
+ * @attr {boolean | undefined} autofocus - Indicates that the element should get focus after the page finishes loading.
+ * @attr {string} current-value - The current value of the input.
+ * @attr {string | undefined} dirname - Sets the directionality of the element to be submitted with form data.
+ * @attr {boolean | undefined} disabled - Sets the element's disabled state.
+ * @attr {string | undefined} form - The id of a form to associate the element to.
+ * @attr {string | undefined} list - Allows associating a `<datalist>` to the element by ID.
+ * @attr {number | undefined} maxlength - The maximum number of characters a user can enter.
+ * @attr {number | undefined} minlength - The minimum number of characters a user can enter.
+ * @attr {string | undefined} name - The name of the element. This element's value will be surfaced during form submission under the provided name.
+ * @attr {string | undefined} pattern - A regular expression that the value must match to pass validation.
+ * @attr {string | undefined} placeholder - Sets the placeholder value of the element, generally used to provide a hint to the user.
+ * @attr {boolean | undefined} readonly - When true, the control will be immutable by user interaction.
+ * @attr {boolean | undefined} required - The element's required attribute.
+ * @attr {number | undefined} size - Sets the width of the element to a specified number of characters.
+ * @attr {string | boolean | undefined} spellcheck - Controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used.
+ * @attr {string | undefined} type - Allows setting a type or mode of text.
+ * @attr {string} value - The initial value of the input.
+ *
+ * @prop {string | undefined} appearance - Indicates the styled appearance of the element.
+ * @prop {string | undefined} controlSize - Sets the size of the control.
+ * @prop {string | undefined} autocomplete - Indicates the element's autocomplete state.
+ * @prop {boolean | undefined} autofocus - Indicates that the element should get focus after the page finishes loading.
+ * @prop {string} currentValue - The current value of the input.
+ * @prop {string | undefined} dirname - Sets the directionality of the element to be submitted with form data.
+ * @prop {boolean | undefined} disabled - Sets the element's disabled state.
+ * @prop {string | undefined} form - The id of a form to associate the element to.
+ * @prop {string | undefined} list - Allows associating a `<datalist>` to the element by ID.
+ * @prop {number | undefined} maxlength - The maximum number of characters a user can enter.
+ * @prop {number | undefined} minlength - The minimum number of characters a user can enter.
+ * @prop {string | undefined} name - The name of the element. This element's value will be surfaced during form submission under the provided name.
+ * @prop {string | undefined} pattern - A regular expression that the value must match to pass validation.
+ * @prop {string | undefined} placeholder - Sets the placeholder value of the element, generally used to provide a hint to the user.
+ * @prop {boolean | undefined} readOnly - When true, the control will be immutable by user interaction.
+ * @prop {boolean | undefined} required - The element's required attribute.
+ * @prop {number | undefined} size - Sets the width of the element to a specified number of characters.
+ * @prop {string | boolean | undefined} spellcheck - Controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used.
+ * @prop {string | undefined} type - Allows setting a type or mode of text.
+ * @prop {string} value - The initial value of the input.
+ * @prop {HTMLElement | undefined} clearButton - The clear button element.
+ *
+ * @slot start - Content which can be provided before the input.
+ * @slot end - Content which can be provided after the input.
+ * @slot - The default slot for input content.
+ *
+ * @csspart root - The root container for the internal control.
+ * @csspart control - The internal `<input>` control.
+ *
+ * @fires change - Fires a custom 'change' event when the value has changed.
+ * @fires input - Fires a custom 'input' event when the value has changed.
+ * @fires search - Fires a custom 'submit' event when the search is submitted.
+ * @fires select - Fired when text is selected in the input.
+ *
+ * @method clear - Clears the search box value and focuses the input.
+ * @method currentValueChanged - Tracks the current value of the input and shows/hides the clear button.
+ * @method checkValidity - Checks the validity of the element and returns the result.
+ * @method select - Selects all the text in the text field.
+ * @method setCustomValidity - Sets the custom validity message.
+ * @method reportValidity - Reports the validity of the element.
+ *
+ * @extends TextInput
+ * @tagname fabric-search-box
+ * @public
+ */
+class SearchBox extends TextInput {
+  constructor() {
+    super(...arguments);
+    this.type = SearchBoxTypes.text;
+    /**
+     * The clear button element.
+     */
+    this.clearButton = undefined;
+  }
+  /** Focuses the input element */
+  focus() {
+    this.control.focus();
+  }
+  /** Blurs the input element */
+  blur() {
+    this.control.blur();
+  }
+  /** Show the clear button */
+  showClearButton() {
+    if (this.clearButton) {
+      this.clearButton.style.display = "inline-flex";
+      this.clearButton.setAttribute("aria-hidden", "false");
+    }
+  }
+  /** Hide the clear button */
+  hideClearButton() {
+    if (this.clearButton) {
+      this.clearButton.style.display = "none";
+      this.clearButton.setAttribute("aria-hidden", "true");
+    }
+  }
+  /**
+   * Tracks the current value of the input.
+   *
+   * @param prev - the previous value
+   * @param next - the next value
+   *
+   * @internal
+   */
+  currentValueChanged(_prev, next) {
+    this.value = next;
+    if (this.clearButton && this.value.length > 0) {
+      this.showClearButton();
+    } else {
+      this.hideClearButton();
+    }
+  }
+  /**
+   * Clear the search box value
+   * @method
+   */
+  clear() {
+    this.value = "";
+    this.control.focus();
+  }
+  /** Handle the submit action */
+  handleSubmit() {
+    this.emitSearch();
+  }
+  /**
+   * Emits the search event.
+   *
+   * @fires search - Fired when a search is submitted.
+   */
+  emitSearch() {
+    this.dispatchEvent(new CustomEvent(SearchBoxEventNames.search, {
+      bubbles: true,
+      composed: true,
+      detail: {
+        query: this.value
+      }
+    }));
+  }
+  handleKeydown(event) {
+    if (event.key === "Enter" && !!this.currentValue) {
+      this.handleSubmit();
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("keydown", this.handleKeydown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("keydown", this.handleKeydown);
+  }
+}
+__decorate([observable], SearchBox.prototype, "clearButton", void 0);
+
+export { SearchBox };

package/esm/components/search-box/search-box.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-box.js","sourceRoot":"","sources":["../../../../src/components/search-box/search-box.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAC9E,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0EG;AACH,MAAM,OAAO,SAAU,SAAQ,SAAS;IAAxC;;QACE,SAAI,GAAG,cAAc,CAAC,IAAI,CAAC;QAE3B;;WAEG;QAEI,gBAAW,GAA4B,SAAS,CAAC;IA4F1D,CAAC;IA1FC,gCAAgC;IACzB,KAAK;QACV,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IACvB,CAAC;IAED,8BAA8B;IACvB,IAAI;QACT,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;IACtB,CAAC;IAED,4BAA4B;IACpB,eAAe;QACrB,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,OAAO,GAAG,aAAa,CAAC;YAC/C,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;QACxD,CAAC;IACH,CAAC;IAED,4BAA4B;IACpB,eAAe;QACrB,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;YACxC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;QACvD,CAAC;IACH,CAAC;IAED;;;;;;;OAOG;IACH,mBAAmB,CAAC,KAAa,EAAE,IAAY;QAC7C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAElB,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC9C,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC;IACH,CAAC;IAED;;;OAGG;IACI,KAAK;QACV,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IACvB,CAAC;IAED,+BAA+B;IACvB,YAAY;QAClB,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IAED;;;;OAIG;IACK,UAAU;QAChB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,mBAAmB,CAAC,MAAM,EAAE;YAC1C,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;SAC9B,CAAC,CACH,CAAC;IACJ,CAAC;IAEO,aAAa,CAAC,KAAoB;QACxC,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;YACjD,IAAI,CAAC,YAAY,EAAE,CAAC;QACtB,CAAC;IACH,CAAC;IAEM,iBAAiB;QACtB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IACvD,CAAC;IAEM,oBAAoB;QACzB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAE7B,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IAC1D,CAAC;CACF;AA5FQ;IADN,UAAU;8CAC6C"}

package/esm/components/search-box/search-box.options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-box.options.js","sourceRoot":"","sources":["../../../../src/components/search-box/search-box.options.ts"],"names":[],"mappings":"AACA,OAAO,EACL,oBAAoB,EACpB,qBAAqB,EACrB,cAAc,EACd,+BAA+B,IAAI,wCAAwC,EAC5E,MAAM,qCAAqC,CAAC;AAE7C;;;;GAIG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC,GAAG,qBAAqB;CAChB,CAAC;AAIX;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,GAAG,oBAAoB;CACf,CAAC;AAIX;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,GAAG,cAAc;CACT,CAAC;AAIX;;;;GAIG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAAG;IAC7C,GAAG,wCAAwC;CAC5C,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,MAAM,EAAE,QAAQ;CACR,CAAC"}

package/esm/components/search-box/search-box.styles.js

@@ -0,0 +1,11 @@
+import { css } from '@microsoft/fast-element';
+import { styles as styles$1 } from '../text-input/text-input.styles.js';
+import { spacingHorizontalS, spacingHorizontalMNudge, colorNeutralForeground3, spacingHorizontalXS } from '@fluentui/web-components';
+import { sizeHorizontalXL } from '@fabric-msft/theme';
+
+const styles = css`
+  ${styles$1}
+
+  .root{padding-inline:${spacingHorizontalS};padding-inline-end:0px}:host([control-size="small"]) .root{padding-inline-end:0px}:host([control-size="large"]) .root{padding-inline:${spacingHorizontalMNudge};padding-inline-end:0px}.search-icon{display:flex;box-sizing:border-box;color:${colorNeutralForeground3}}fabric-button.clear-button{min-width:${sizeHorizontalXL};min-height:${sizeHorizontalXL};margin-inline-end:${spacingHorizontalXS};padding:0px 2px;display:none}`;
+
+export { styles };

package/esm/components/search-box/search-box.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-box.styles.js","sourceRoot":"","sources":["../../../../src/components/search-box/search-box.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAC/E,OAAO,EACL,uBAAuB,EACvB,uBAAuB,EACvB,kBAAkB,EAClB,mBAAmB,EACpB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,eAAe;;;sBAGG,kBAAkB;;;;;;;;;sBASlB,uBAAuB;;;;;;;aAOhC,uBAAuB;;;;iBAInB,gBAAgB;kBACf,gBAAgB;yBACT,mBAAmB;;;;CAI3C,CAAC"}

package/esm/components/search-box/search-box.template.js

@@ -0,0 +1,18 @@
+import { ref, slotted, oneTime, html } from '@microsoft/fast-element';
+import { whitespaceFilter } from '../../util/whitespace-filter.js';
+import { searchIcon, dismissIcon } from '../../static/component-svgs.js';
+import { getString } from '@fabric-msft/localization';
+
+/**
+ * The template for the {@link @fabric-msft/fabric-web#(SearchBox:class)} component.
+ * @public
+ */
+function searchBoxTemplate() {
+  return html`<template @beforeinput="${(x, c) => x.beforeinputHandler(c.event)}" @focusin="${(x, c) => x.focusinHandler(c.event)}" @keydown="${(x, c) => x.keydownHandler(c.event)}"><label for="control" class="label" ${ref("controlLabel")}><slot ${slotted({
+    property: "defaultSlottedNodes",
+    filter: whitespaceFilter
+  })}></slot></label><span class="root"><span class="search-icon">${searchIcon}</span><input aria-label="${x => x.ariaLabel}" class="control" id="control" @change="${(x, c) => x.changeHandler(c.event)}" @input="${(x, c) => x.inputHandler(c.event)}" ?autofocus="${x => x.autofocus}" autocomplete="${x => x.autocomplete}" ?disabled="${x => x.disabled}" list="${x => x.list}" maxlength="${x => x.maxlength}" minlength="${x => x.minlength}" ?multiple="${x => x.multiple}" name="${x => x.name}" pattern="${x => x.pattern}" placeholder="${x => x.placeholder}" ?readonly="${x => x.readOnly}" ?required="${x => x.required}" size="${x => x.size}" spellcheck="${x => x.spellcheck}" type="${x => x.type}" value="${x => x.initialValue}" ${ref("control")} /><fabric-button aria-label="${oneTime(() => getString("SearchBox_Clear"))}" appearance="transparent" class="clear-button" aria-hidden="true" ${ref("clearButton")} @click="${x => x.clear()}">${dismissIcon}</fabric-button><slot name="end"></slot></span></template>`;
+}
+const template = searchBoxTemplate();
+
+export { searchBoxTemplate, template };

package/esm/components/search-box/search-box.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-box.template.js","sourceRoot":"","sources":["../../../../src/components/search-box/search-box.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAGtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AACzE,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD;;;GAGG;AACH,MAAM,UAAU,iBAAiB;IAG/B,OAAO,IAAI,CAAG;;sBAEM,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,KAAmB,CAAC;kBACzD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAmB,CAAC;kBACjD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAsB,CAAC;;2CAE3B,GAAG,CAAC,cAAc,CAAC;;YAElD,OAAO,CAAC;QACR,QAAQ,EAAE,qBAAqB;QAC/B,MAAM,EAAE,gBAAgB;KACzB,CAAC;;;;oCAIwB,UAAU;;wBAEtB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS;;;qBAGrB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAmB,CAAC;oBACjD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;wBAC3C,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS;0BAChB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY;uBACxB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ;kBACtB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI;uBACR,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS;uBAClB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS;uBAClB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ;kBACtB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI;qBACV,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO;yBACZ,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW;uBACtB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ;uBACjB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ;kBACtB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI;wBACP,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,UAAU;kBACzB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI;mBACZ,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY;YAC5B,GAAG,CAAC,SAAS,CAAC;;;wBAGF,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;;;;YAIvD,GAAG,CAAC,aAAa,CAAC;oBACV,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE;;YAExB,WAAW;;;;;GAKpB,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAmC,iBAAiB,EAAE,CAAC"}

package/esm/components/simple-table/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../../src/components/simple-table/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,UAAU,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC"}

package/esm/components/simple-table/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/simple-table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,UAAU,IAAI,qBAAqB,EAAE,MAAM,8BAA8B,CAAC"}

package/esm/components/simple-table/simple-table.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"simple-table.definition.js","sourceRoot":"","sources":["../../../../src/components/simple-table/simple-table.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAEvE;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,WAAW,CAAC,OAAO,CAAC;IAC5C,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,eAAe;IAC3C,MAAM,EAAE,iBAAiB;IACzB,mFAAmF;IACnF,qFAAqF;IACrF,mFAAmF;IACnF,sFAAsF;IACtF,aAAa,EAAE,IAAI;CACpB,CAAC,CAAC"}

package/esm/components/simple-table/simple-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"simple-table.js","sourceRoot":"","sources":["../../../../src/components/simple-table/simple-table.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,OAAO,WAAY,SAAQ,WAAW;IAC1C;;;;OAIG;IACH,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAED;;;OAGG;IACI,eAAe;QACpB,gEAAgE;QAChE,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAC1D,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,OAAO,CAAC,IAAI,CACV,kHAAkH,CACnH,CAAC;YACF,OAAO;QACT,CAAC;QACD,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,yCAAyC,CAAC,CAAC;IACxE,CAAC;CACF"}

package/esm/components/simple-table/simple-table.styles.js

@@ -0,0 +1,14 @@
+import { fontFamilyBase, fontSizeBase300, lineHeightBase300, colorNeutralForeground1, strokeWidthThin, colorNeutralStroke2, fontWeightSemibold, spacingVerticalM, spacingHorizontalS } from '@fluentui/web-components';
+import { css } from '@microsoft/fast-element';
+import '../../util/debug.js';
+import '@microsoft/fast-web-utilities';
+import '../../util/support.js';
+import '../../util/icons.js';
+import { forcedColorsStylesheetBehavior } from '../../util/match-media-stylesheet-behaviors.js';
+import '../../util/platform.js';
+
+const styles = css`
+  fabric-simple-table{display:block;font-family:${fontFamilyBase}}.microsoft-fabric-ux-fabric-simple-table{border-collapse:collapse;width:100%;font-size:${fontSizeBase300};line-height:${lineHeightBase300}}.microsoft-fabric-ux-fabric-simple-table tr{box-sizing:border-box;color:${colorNeutralForeground1}}.microsoft-fabric-ux-fabric-simple-table tbody tr{border-block-end:${strokeWidthThin} solid ${colorNeutralStroke2}}.microsoft-fabric-ux-fabric-simple-table th{color:${colorNeutralForeground1};text-align:start;font-weight:${fontWeightSemibold};vertical-align:middle;padding-block:${spacingVerticalM};padding-inline:${spacingHorizontalS}}.microsoft-fabric-ux-fabric-simple-table td{padding-block:${spacingVerticalM};padding-inline:${spacingHorizontalS};vertical-align:middle;color:${colorNeutralForeground1}}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+    .microsoft-fabric-ux-fabric-simple-table{color:CanvasText;background-color:Canvas}.microsoft-fabric-ux-fabric-simple-table tr{border-color:CanvasText}.microsoft-fabric-ux-fabric-simple-table th{color:CanvasText;border-color:CanvasText}.microsoft-fabric-ux-fabric-simple-table td{color:CanvasText}`));
+
+export { styles };

package/esm/components/simple-table/simple-table.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"simple-table.styles.js","sourceRoot":"","sources":["../../../../src/components/simple-table/simple-table.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,mBAAmB,EACnB,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,EAClB,eAAe,EACf,kBAAkB,EACnB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,8BAA8B,EAAE,MAAM,qBAAqB,CAAC;AAErE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;mBAGN,cAAc;;;;;;iBAMhB,eAAe;mBACb,iBAAiB;;;;;aAKvB,uBAAuB;;;;wBAIZ,eAAe,UAAU,mBAAmB;;;;aAIvD,uBAAuB;;mBAEjB,kBAAkB;;qBAEhB,gBAAgB;sBACf,kBAAkB;;;;qBAInB,gBAAgB;sBACf,kBAAkB;;aAE3B,uBAAuB;;CAEnC,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;GAkBjC,CAAC,CACH,CAAC"}

package/esm/components/slider/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../../src/components/slider/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,UAAU,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC"}

package/esm/components/slider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/slider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EACL,gBAAgB,EAChB,WAAW,EACX,kBAAkB,EAClB,WAAW,EACZ,MAAM,qBAAqB,CAAC;AAW7B,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC"}

package/esm/components/slider/slider.definition.js

@@ -0,0 +1,20 @@
+import { Slider } from './slider.js';
+import { template } from './slider.template.js';
+import { styles } from './slider.styles.js';
+import { DesignSystem } from '../design-system.js';
+
+/**
+ * The Fabric Slider component.
+ *
+ * @public
+ */
+const definition = Slider.compose({
+  name: `${DesignSystem.prefix}-slider`,
+  template,
+  styles,
+  shadowOptions: {
+    mode: DesignSystem.shadowRootMode
+  }
+});
+
+export { definition };

package/esm/components/slider/slider.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.definition.js","sourceRoot":"","sources":["../../../../src/components/slider/slider.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC;IACvC,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,SAAS;IACrC,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACb,IAAI,EAAE,YAAY,CAAC,cAAc;KAClC;CACF,CAAC,CAAC"}

package/esm/components/slider/slider.js

@@ -0,0 +1,74 @@
+import { Slider as Slider$1 } from '@fluentui/web-components';
+
+/**
+ * Slider
+ * @summary A Slider Custom HTML Element based on Fluent UI's Slider with custom styling and behavior.
+ *
+ * @example
+ * ```html
+ * <fabric-slider min="0" max="10" step="1" value="5" orientation="horizontal">
+ *   <div slot="thumb" class="custom-thumb"></div>
+ * </fabric-slider>
+ * ```
+ *
+ * @attr {SliderSize | undefined} size - The size of the slider.
+ * @attr {string} value - The initial value of the input.
+ * @attr {boolean} disabled - The element's disabled state.
+ * @attr {number} min - The minimum allowed value.
+ * @attr {number} max - The maximum allowed value.
+ * @attr {number} step - Value to increment or decrement via arrow keys, mouse click or drag.
+ * @attr {SliderOrientation | undefined} orientation - The orientation of the slider.
+ * @attr {SliderMode | undefined} mode - The selection mode.
+ *
+ * @prop {SliderSize | undefined} size - The size of the slider.
+ * @prop {string} value - The initial value of the input.
+ * @prop {boolean} disabled - The element's disabled state.
+ * @prop {number} min - The minimum allowed value.
+ * @prop {number} max - The maximum allowed value.
+ * @prop {number} step - Value to increment or decrement via arrow keys, mouse click or drag.
+ * @prop {SliderOrientation | undefined} orientation - The orientation of the slider.
+ * @prop {SliderMode | undefined} mode - The selection mode.
+ *
+ * @slot thumb - The slot for a custom thumb element.
+ * @slot start-label - The slot for a label at the start (min) end of the track.
+ * @slot end-label - The slot for a label at the end (max) end of the track.
+ *
+ * @csspart track-container - The container element of the track.
+ * @csspart thumb-container - The container element of the thumb.
+ *
+ * @cssprop --border-radius - Sets the border radius for the track and thumb.
+ * @cssprop --rail-color - Sets the color of the unfilled rail.
+ * @cssprop --slider-direction - Defines the direction used to calculate the track styling.
+ * @cssprop --slider-progress - Represents the current progress for styling the track.
+ * @cssprop --slider-thumb - Defines the thumb styling for the slider.
+ * @cssprop --step-marker-inset - Offsets step markers relative to the track.
+ * @cssprop --step-rate - Defines the spacing rate for step markers.
+ * @cssprop --thumb-size - Sets the size of the slider thumb.
+ * @cssprop --track-color - Sets the color of the filled track.
+ * @cssprop --track-margin-inline - Sets the inline margin for the track.
+ * @cssprop --track-overhang - Controls how far the track extends past the thumb.
+ * @cssprop --track-size - Sets the thickness of the track.
+ *
+ * @method handleChange - Handles changes to the slider's value.
+ * @method handleStepStyles - Handles changes to step styling based on the step value.
+ * @method checkValidity - Checks the element's validity.
+ * @method reportValidity - Reports the element's validity.
+ * @method setCustomValidity - Sets a custom validity message.
+ * @method directionChanged - Called when the direction changes.
+ * @method increment - Increment the value by the step.
+ * @method decrement - Decrement the value by the step.
+ * @method handleKeydown - Handles keydown events for the slider.
+ * @method setSliderPosition - Places the thumb based on the current value.
+ * @method updateStepMultiplier - Update the step multiplier used to ensure rounding errors from steps that are not whole numbers.
+ * @method convertToConstrainedValue - Converts a given value to a constrained value within the slider's min and max.
+ * @method setDisabledSideEffect - Makes sure the side effects are set up when the disabled state changes.
+ *
+ * @fires change - Fires a custom 'change' event when the value changes.
+ *
+ * @extends FluentSlider
+ * @tagname fabric-slider
+ * @public
+ */
+class Slider extends Slider$1 {}
+
+export { Slider };

package/esm/components/slider/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../../src/components/slider/slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEG;AACH,MAAM,OAAO,MAAO,SAAQ,YAAY;CAAG"}

package/esm/components/slider/slider.options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.options.js","sourceRoot":"","sources":["../../../../src/components/slider/slider.options.ts"],"names":[],"mappings":"AACA,OAAO,EACL,UAAU,IAAI,gBAAgB,EAC9B,iBAAiB,IAAI,uBAAuB,EAC5C,UAAU,IAAI,gBAAgB,EAC/B,MAAM,0BAA0B,CAAC;AAElC,gDAAgD;AAChD,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,GAAG,gBAAgB;CACX,CAAC;AAKX,6CAA6C;AAC7C,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,GAAG,uBAAuB;CAClB,CAAC;AAKX,sCAAsC;AACtC,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,GAAG,gBAAgB;CACX,CAAC;AAKX,sCAAsC;AACtC,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,MAAM,EAAE,QAAQ;CACR,CAAC"}

package/esm/components/slider/slider.styles.js

@@ -0,0 +1,24 @@
+import { css } from '@microsoft/fast-element';
+import { colorCompoundBrandBackground, colorNeutralStrokeAccessible, borderRadiusMedium, spacingHorizontalS, colorCompoundBrandBackgroundHover, colorCompoundBrandBackgroundPressed, colorNeutralForegroundDisabled, colorNeutralBackgroundDisabled, borderRadiusSmall, colorStrokeFocus2, colorStrokeFocus1, colorTransparentBackground, colorNeutralBackground1, borderRadiusCircular, colorNeutralStroke1, fontSizeBase200, lineHeightBase200, colorNeutralForeground3, forcedColorsStylesheetBehavior } from '@fluentui/web-components';
+import { sizeVerticalXL, sizeVerticalXXXL, sizeVerticalL, sizeVerticalXXL } from '@fabric-msft/theme';
+
+/**
+ * Styles for the {@link @fabric-msft/fabric-web#(Slider:class)} component.
+ *
+ * Grid layout lives on `.root` instead of `:host` so external display
+ * overrides (`fabric-slider { display: block }`) cannot break thumb positioning.
+ *
+ * @public
+ */
+const styles = css`
+  :host([hidden]){display:none}:host{--thumb-size:${sizeVerticalXL};--track-margin-inline:calc(var(--thumb-size) / 2);--track-size:4px;--track-overhang:calc(var(--track-size) / -2);--rail-color:${colorCompoundBrandBackground};--track-color:${colorNeutralStrokeAccessible};--slider-direction:90deg;--border-radius:${borderRadiusMedium};--step-marker-inset:var(--track-overhang) -1px;display:inline-flex;align-items:center;gap:${spacingHorizontalS};position:relative;box-sizing:border-box;outline:none;user-select:none;touch-action:none;min-width:calc(${sizeVerticalXL} * 6);min-height:${sizeVerticalXXXL}}:host(:hover){--rail-color:${colorCompoundBrandBackgroundHover}}:host(:active){--rail-color:${colorCompoundBrandBackgroundPressed}}:host(:disabled){--rail-color:${colorNeutralForegroundDisabled};--track-color:${colorNeutralBackgroundDisabled}}:host(:not(:disabled)){cursor:pointer}:host(:dir(rtl)){--slider-direction:-90deg}:host([size="small"]){--thumb-size:${sizeVerticalL};--track-overhang:-1px;--track-size:2px;--border-radius:${borderRadiusSmall};min-height:${sizeVerticalXXL}}:host([orientation="vertical"]){--slider-direction:0deg;--step-marker-inset:-1px var(--track-overhang);flex-direction:column;min-height:unset;min-width:${sizeVerticalXXXL}}:host(:not([slot="input"]):focus-visible){box-shadow:0 0 0 2pt ${colorStrokeFocus2};outline:1px solid ${colorStrokeFocus1}}.root{display:inline-grid;position:relative;align-items:center;justify-content:center;flex:1 1 auto;min-width:calc(${sizeVerticalXL} * 6);min-height:${sizeVerticalXXXL};grid-template-rows:1fr var(--thumb-size) 1fr;grid-template-columns:var(--track-margin-inline) 1fr
+      var(--track-margin-inline)}:host([orientation="vertical"]) .root{min-height:calc(${sizeVerticalXL} * 6);min-width:${sizeVerticalXXXL};grid-template-rows:var(--track-margin-inline) 1fr
+      var(--track-margin-inline);grid-template-columns:1fr var(--thumb-size) 1fr;justify-items:center;flex:1 1 auto;width:unset}:host([size="small"]) .root{min-height:${sizeVerticalXXL}}.root::after{background-image:linear-gradient(
+      var(--slider-direction),var(--rail-color) 0%,var(--rail-color) 50%,var(--track-color) 50.1%,var(--track-color) 100%
+    );border-radius:var(--border-radius);content:"";grid-row:1 / -1;grid-column:1 / -1}.root::after,.track{height:var(--track-size);width:100%}:host([orientation="vertical"]) .root::after,:host([orientation="vertical"]) .track{height:100%;width:var(--track-size)}.track{position:relative;background-color:var(--track-color);grid-row:2 / 2;grid-column:2 / 2;forced-color-adjust:none;overflow:hidden}.track::before{content:"";position:absolute;height:100%;border-radius:inherit;inset-inline-start:0;width:var(--slider-progress)}:host(:dir(rtl)) .track::before{width:calc(100% - var(--slider-progress))}:host([orientation="vertical"]) .track::before{width:100%;bottom:0;height:var(--slider-progress)}:host([step]) .track::after{content:"";position:absolute;border-radius:inherit;inset:var(--step-marker-inset);background-image:repeating-linear-gradient(
+      var(--slider-direction),${colorTransparentBackground} 0%,${colorTransparentBackground} calc(var(--step-rate) - 1px),${colorNeutralBackground1} calc(var(--step-rate) - 1px),${colorNeutralBackground1} var(--step-rate)
+    )}.thumb-container{position:absolute;grid-row:2 / 2;grid-column:2 / 2;transform:translateX(-50%);inset-inline-start:var(--slider-thumb)}:host([orientation="vertical"]) .thumb-container{transform:translateY(50%);inset-inline-start:unset;bottom:var(--slider-thumb)}:host(:not(:active)) :is(.thumb-container,.track::before){transition:all 0.2s ease}@media (prefers-reduced-motion:reduce){:host(:not(:active)) :is(.thumb-container,.track::before){transition:none}}.thumb{width:var(--thumb-size);height:var(--thumb-size);border-radius:${borderRadiusCircular};box-shadow:0 0 0 calc(var(--thumb-size) * 0.2) ${colorNeutralBackground1}
+      inset;border:calc(var(--thumb-size) * 0.05) solid ${colorNeutralStroke1};box-sizing:border-box}.thumb,.track::before{background-color:var(--rail-color)}::slotted([slot="start-label"]),::slotted([slot="end-label"]){font-size:${fontSizeBase200};line-height:${lineHeightBase200};color:${colorNeutralForeground3};flex:0 0 auto;user-select:none}`.withBehaviors(forcedColorsStylesheetBehavior(css`
+      .track:hover,.track:active,.track{background:WindowText}.thumb:hover,.thumb:active,.thumb{background:ButtonText}:host(:hover) .track::before,:host(:active) .track::before,.track::before{background:Highlight}`));
+
+export { styles };

package/esm/components/slider/slider.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.styles.js","sourceRoot":"","sources":["../../../../src/components/slider/slider.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,oBAAoB,EACpB,kBAAkB,EAClB,iBAAiB,EACjB,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,uBAAuB,EACvB,8BAA8B,EAC9B,8BAA8B,EAC9B,uBAAuB,EACvB,mBAAmB,EACnB,4BAA4B,EAC5B,iBAAiB,EACjB,iBAAiB,EACjB,0BAA0B,EAC1B,eAAe,EACf,8BAA8B,EAC9B,iBAAiB,EACjB,kBAAkB,EACnB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,aAAa,EACb,cAAc,EACd,eAAe,EACf,gBAAgB,EACjB,MAAM,oBAAoB,CAAC;AAE5B;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;oBAML,cAAc;;;;oBAId,4BAA4B;qBAC3B,4BAA4B;;uBAE1B,kBAAkB;;;;;WAK9B,kBAAkB;;;;;;sBAMP,cAAc;kBAClB,gBAAgB;;;;oBAId,iCAAiC;;;;oBAIjC,mCAAmC;;;;oBAInC,8BAA8B;qBAC7B,8BAA8B;;;;;;;;;;;;oBAY/B,aAAa;;;uBAGV,iBAAiB;kBACtB,eAAe;;;;;;;;iBAQhB,gBAAgB;;;;4BAIL,iBAAiB;yBACpB,iBAAiB;;;;;;;;;;;sBAWpB,cAAc;kBAClB,gBAAgB;;;;;;;;uBAQX,cAAc;iBACpB,gBAAgB;;;;;;;;;;;kBAWf,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAoEzB,0BAA0B;QAC1B,0BAA0B;QAC1B,uBAAuB;QACvB,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAiCV,oBAAoB;sDACa,uBAAuB;;mDAE1B,mBAAmB;;;;;;;;;;;;;iBAarD,eAAe;mBACb,iBAAiB;aACvB,uBAAuB;;;;CAInC,CAAC,aAAa,CACb,8BAA8B,CAC5B,GAAG,CAAA;;;;;;;;;;;;;;;;;KAiBF,CACF,CACF,CAAC"}

package/esm/components/slider/slider.template.js

@@ -0,0 +1,17 @@
+import { ref, html } from '@microsoft/fast-element';
+
+/**
+ * Generates a template for the {@link @fabric-msft/fabric-web#(Slider:class)} component.
+ *
+ * Wraps the track and thumb in an internal `.root` container so that the grid
+ * layout is decoupled from the `:host` display value. External stylesheets can
+ * safely set `fabric-slider { display: block }` without breaking thumb positioning.
+ *
+ * @public
+ */
+function sliderTemplate() {
+  return html`<template @pointerdown="${(x, c) => x.handlePointerDown(c.event)}" @keydown="${(x, c) => x.handleKeydown(c.event)}"><slot name="start-label"></slot><div class="root"><div ${ref("track")} part="track-container" class="track" style="${x => x.position}"></div><div ${ref("thumb")} part="thumb-container" class="thumb-container" style="${x => x.position}" @pointerdown="${(x, c) => x.handleThumbPointerDown(c.event)}"><slot name="thumb"><div class="thumb"></div></slot></div></div><slot name="end-label"></slot></template>`;
+}
+const template = sliderTemplate();
+
+export { template };

package/esm/components/slider/slider.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.template.js","sourceRoot":"","sources":["../../../../src/components/slider/slider.template.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAGpD;;;;;;;;GAQG;AACH,SAAS,cAAc;IACrB,OAAO,IAAI,CAAG;;sBAEM,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAqB,CAAC;kBAC1D,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAsB,CAAC;;;;;YAKzD,GAAG,CAAC,OAAO,CAAC;;;mBAGL,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ;;;YAGxB,GAAG,CAAC,OAAO,CAAC;;;mBAGL,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ;0BACV,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CACvB,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,KAAqB,CAAC;;;;;;;GAO1D,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAgC,cAAc,EAAE,CAAC"}

package/esm/components/spin-button/define.js

@@ -0,0 +1,4 @@
+import { definition } from "./spin-button.definition.js";
+import { DesignSystem } from "../design-system.js";
+definition.define(DesignSystem.registry);
+//# sourceMappingURL=define.js.map

package/esm/components/spin-button/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../../src/components/spin-button/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,UAAU,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC"}

package/esm/components/spin-button/index.js

@@ -0,0 +1,8 @@
+export { SpinButton } from "./spin-button.js";
+export { clamp, precisionRound } from "../../util/math.js";
+export { styles as SpinButtonStyles } from "./spin-button.styles.js";
+export { template as SpinButtonTemplate } from "./spin-button.template.js";
+export { SpinButtonAppearances, SpinButtonBounds, SpinButtonControlSizes, SpinButtonSpinStates } from "./spin-button.options.js";
+export { SpinButtonEventNames } from "./spin-button.events.js";
+export { definition as SpinButtonDefinition } from "./spin-button.definition.js";
+//# sourceMappingURL=index.js.map

package/esm/components/spin-button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/spin-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EAAE,MAAM,IAAI,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,QAAQ,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC3E,OAAO,EACL,qBAAqB,EACrB,gBAAgB,EAChB,sBAAsB,EACtB,oBAAoB,EACrB,MAAM,0BAA0B,CAAC;AAOlC,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,UAAU,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC"}