@fluentui/web-components 3.0.0-beta.6 → 3.0.0-beta.61

package/dist/esm/radio-group/radio-group.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.template.js","sourceRoot":"","sources":["../../../src/radio-group/radio-group.template.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,2CAA2C,CAAC;AAG/E,MAAM,CAAC,MAAM,QAAQ,GAAoC,kBAAkB,EAAE,CAAC"}
+{"version":3,"file":"radio-group.template.js","sourceRoot":"","sources":["../../../src/radio-group/radio-group.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGpE,MAAM,UAAU,kBAAkB;IAChC,OAAO,IAAI,CAAG;;mBAEG,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,KAAoB,CAAC;iBAC1D,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAc,CAAC;gBAC5C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;kBAC7C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAmB,CAAC;mBAChD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAmB,CAAC;kBACnD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAsB,CAAC;;2BAE3C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAc,CAAC;;GAEvE,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAoC,kBAAkB,EAAE,CAAC"}

package/dist/esm/rating-display/define.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/rating-display/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAE5D,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC"}

package/dist/esm/rating-display/index.js

@@ -0,0 +1,6 @@
+export { BaseRatingDisplay, RatingDisplay } from './rating-display.js';
+export { RatingDisplayColor, RatingDisplaySize } from './rating-display.options.js';
+export { template as RatingDisplayTemplate } from './rating-display.template.js';
+export { styles as RatingDisplayStyles } from './rating-display.styles.js';
+export { definition as RatingDisplayDefinition } from './rating-display.definition.js';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/rating-display/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACvE,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AACpF,OAAO,EAAE,QAAQ,IAAI,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AACjF,OAAO,EAAE,MAAM,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAC3E,OAAO,EAAE,UAAU,IAAI,uBAAuB,EAAE,MAAM,gCAAgC,CAAC"}

package/dist/esm/rating-display/rating-display.definition.js

@@ -0,0 +1,17 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { RatingDisplay } from './rating-display.js';
+import { styles } from './rating-display.styles.js';
+import { template } from './rating-display.template.js';
+/**
+ * The definition for the Fluent Rating Display component.
+ *
+ * @public
+ * @remarks
+ * HTML Element: `<fluent-rating-display>`
+ */
+export const definition = RatingDisplay.compose({
+    name: `${FluentDesignSystem.prefix}-rating-display`,
+    template,
+    styles,
+});
+//# sourceMappingURL=rating-display.definition.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rating-display.definition.js","sourceRoot":"","sources":["../../../src/rating-display/rating-display.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAExD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,aAAa,CAAC,OAAO,CAAC;IAC9C,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,iBAAiB;IACnD,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}

package/dist/esm/rating-display/rating-display.js

@@ -0,0 +1,142 @@
+import { __decorate } from "tslib";
+import { attr, FASTElement, nullableNumberConverter } from '@microsoft/fast-element';
+import { toggleState } from '../utils/element-internals.js';
+/**
+ * The base class used for constructing a fluent-rating-display custom element
+ * @public
+ */
+export class BaseRatingDisplay extends FASTElement {
+    constructor() {
+        super();
+        /**
+         * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+         *
+         * @internal
+         */
+        this.elementInternals = this.attachInternals();
+        this.intlNumberFormatter = new Intl.NumberFormat();
+        this.elementInternals.role = 'img';
+    }
+    /**
+     * Returns "count" as string, formatted according to the locale.
+     *
+     * @internal
+     */
+    get formattedCount() {
+        return this.count ? this.intlNumberFormatter.format(this.count) : '';
+    }
+    /**
+     * Gets the selected value
+     *
+     * @protected
+     */
+    getSelectedValue() {
+        var _a;
+        return Math.round(((_a = this.value) !== null && _a !== void 0 ? _a : 0) * 2) / 2;
+    }
+    /**
+     * Gets the maximum icons to render
+     *
+     * @protected
+     */
+    getMaxIcons() {
+        var _a;
+        return ((_a = this.max) !== null && _a !== void 0 ? _a : 5) * 2;
+    }
+    /**
+     * Generates the icon SVG elements based on the "max" attribute.
+     *
+     * @internal
+     */
+    generateIcons() {
+        let htmlString = '';
+        // The value of the selected icon. Based on the "value" attribute, rounded to the nearest half.
+        const selectedValue = this.getSelectedValue();
+        // Render the icons based on the "max" attribute. If "max" is not set, render 5 icons.
+        for (let i = 0; i < this.getMaxIcons(); i++) {
+            const iconValue = (i + 1) / 2;
+            htmlString += `<svg aria-hidden="true" ${iconValue === selectedValue ? 'selected' : ''}><use href="#star"></use></svg>`;
+        }
+        return htmlString;
+    }
+}
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], BaseRatingDisplay.prototype, "count", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], BaseRatingDisplay.prototype, "max", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], BaseRatingDisplay.prototype, "value", void 0);
+/**
+ * A Rating Dislpay Custom HTML Element.
+ * Based on BaseRatingDisplay and includes style and layout specific attributes
+ *
+ * @public
+ */
+export class RatingDisplay extends BaseRatingDisplay {
+    constructor() {
+        super(...arguments);
+        /**
+         * Renders a single filled icon with a label next to it.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: `compact`
+         */
+        this.compact = false;
+    }
+    /**
+     * Handles changes to the color attribute.
+     *
+     * @param prev - The previous state
+     * @param next - The next state
+     */
+    colorChanged(prev, next) {
+        if (prev)
+            toggleState(this.elementInternals, prev, false);
+        if (next)
+            toggleState(this.elementInternals, next, true);
+    }
+    /**
+     * Handles changes to the size attribute.
+     *
+     * @param prev - The previous state
+     * @param next - The next state
+     */
+    sizeChanged(prev, next) {
+        if (prev)
+            toggleState(this.elementInternals, prev, false);
+        if (next)
+            toggleState(this.elementInternals, next, true);
+    }
+    /**
+     * Overrides the selected value and returns 1 if compact is true.
+     *
+     * @override
+     */
+    getSelectedValue() {
+        var _a;
+        return Math.round((this.compact ? 1 : (_a = this.value) !== null && _a !== void 0 ? _a : 0) * 2) / 2;
+    }
+    /**
+     * Overrides the maximum icons and returns a max of 1 if compact is true.
+     *
+     * @override
+     */
+    getMaxIcons() {
+        var _a;
+        return (this.compact ? 1 : (_a = this.max) !== null && _a !== void 0 ? _a : 5) * 2;
+    }
+}
+__decorate([
+    attr
+], RatingDisplay.prototype, "color", void 0);
+__decorate([
+    attr
+], RatingDisplay.prototype, "size", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], RatingDisplay.prototype, "compact", void 0);
+//# sourceMappingURL=rating-display.js.map

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

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

package/dist/esm/rating-display/rating-display.options.js

@@ -0,0 +1,19 @@
+/**
+ * The color of the Rating Display items can be `neutral`, `brand`, or `marigold`.
+ * @public
+ */
+export const RatingDisplayColor = {
+    neutral: 'neutral',
+    brand: 'brand',
+    marigold: 'marigold',
+};
+/**
+ * The size of a Rating Display can be `small`, `medium`, or `large`.
+ * @public
+ */
+export const RatingDisplaySize = {
+    small: 'small',
+    medium: 'medium',
+    large: 'large',
+};
+//# sourceMappingURL=rating-display.options.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rating-display.options.js","sourceRoot":"","sources":["../../../src/rating-display/rating-display.options.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;IACd,QAAQ,EAAE,UAAU;CACZ,CAAC;AAEX;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC"}

package/dist/esm/rating-display/rating-display.styles.js

@@ -0,0 +1,120 @@
+import { css } from '@microsoft/fast-element';
+import { display, forcedColorsStylesheetBehavior } from '../utils/index.js';
+import { colorBrandBackground, colorBrandStroke2, colorNeutralBackground1Pressed, colorNeutralForeground1, colorPaletteMarigoldBackground2, colorPaletteMarigoldBackground3, fontFamilyBase, fontSizeBase200, fontSizeBase300, fontWeightSemibold, lineHeightBase200, lineHeightBase300, spacingHorizontalSNudge, spacingHorizontalXS, spacingHorizontalXXS, } from '../theme/design-tokens.js';
+import { brandState, largeState, neutralState, smallState } from '../styles/states/index.js';
+/**
+ * The styles for the Rating Display component.
+ *
+ * @public
+ */
+export const styles = css `
+  ${display('inline-flex')}
+
+  :host {
+    --icon-size: 16px;
+    align-items: center;
+    color: ${colorNeutralForeground1};
+    font-family: ${fontFamilyBase};
+    font-size: ${fontSizeBase200};
+    line-height: ${lineHeightBase200};
+    contain: layout style;
+    user-select: none;
+  }
+
+  :host(${smallState}) {
+    --icon-size: 12px;
+  }
+
+  :host(${largeState}) {
+    --icon-size: 20px;
+    font-size: ${fontSizeBase300};
+    line-height: ${lineHeightBase300};
+  }
+
+  svg {
+    width: var(--icon-size);
+    height: var(--icon-size);
+    fill: ${colorPaletteMarigoldBackground3};
+    margin-inline-end: ${spacingHorizontalXXS};
+  }
+
+  svg:nth-child(even) {
+    clip-path: inset(0 50% 0 0);
+    margin-inline-end: calc(0px - var(--icon-size));
+  }
+
+  :host(${neutralState}) svg {
+    fill: ${colorNeutralForeground1};
+  }
+
+  :host(${brandState}) svg {
+    fill: ${colorBrandBackground};
+  }
+
+  :host(:is([value^='-'], [value='0'])) svg,
+  :host(:not([value])) svg,
+  svg[selected] ~ svg {
+    fill: ${colorPaletteMarigoldBackground2};
+  }
+
+  :host(${neutralState}:is([value^='-'], [value='0'])) svg,
+  :host(${neutralState}:not([value])) svg,
+  :host(${neutralState}) svg[selected] ~ svg {
+    fill: ${colorNeutralBackground1Pressed};
+  }
+
+  :host(${brandState}:is([value^='-'], [value='0'])) svg,
+  :host(${brandState}:not([value])) svg,
+  :host(${brandState}) svg[selected] ~ svg {
+    fill: ${colorBrandStroke2};
+  }
+
+  .value-label,
+  ::slotted([slot='value']) {
+    display: block;
+    margin-inline-start: ${spacingHorizontalXS};
+    font-weight: ${fontWeightSemibold};
+  }
+
+  :host(${smallState}) .value-label,
+  :host(${smallState}) ::slotted([slot='value']) {
+    margin-inline-start: ${spacingHorizontalXXS};
+  }
+
+  :host(${largeState}) .value-label,
+  :host(${largeState}) ::slotted([slot='value']) {
+    margin-inline-start: ${spacingHorizontalSNudge};
+  }
+
+  :host(:not([count])) .count-label {
+    display: none;
+  }
+
+  .count-label::before,
+  ::slotted([slot='count'])::before {
+    content: '·';
+    margin-inline: ${spacingHorizontalXS};
+  }
+
+  :host(${smallState}) .count-label::before,
+  :host(${smallState}) ::slotted([slot='count'])::before {
+    margin-inline: ${spacingHorizontalXXS};
+  }
+
+  :host(${largeState}) .count-label::before,
+  :host(${largeState}) ::slotted([slot='count'])::before {
+    margin-inline: ${spacingHorizontalSNudge};
+  }
+`.withBehaviors(forcedColorsStylesheetBehavior(css `
+    :host([color]) svg {
+      fill: CanvasText;
+    }
+
+    :host([color]:is([value^='-'], [value='0'])) svg,
+    :host(:not([value])) svg,
+    :host([color]) svg[selected] ~ svg {
+      fill: Canvas;
+      stroke: CanvasText;
+    }
+  `));
+//# sourceMappingURL=rating-display.styles.js.map

package/dist/esm/rating-display/rating-display.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rating-display.styles.js","sourceRoot":"","sources":["../../../src/rating-display/rating-display.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,8BAA8B,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,8BAA8B,EAC9B,uBAAuB,EACvB,+BAA+B,EAC/B,+BAA+B,EAC/B,cAAc,EACd,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,uBAAuB,EACvB,mBAAmB,EACnB,oBAAoB,GACrB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAE7F;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;;aAKb,uBAAuB;mBACjB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;;;;;UAK1B,UAAU;;;;UAIV,UAAU;;iBAEH,eAAe;mBACb,iBAAiB;;;;;;YAMxB,+BAA+B;yBAClB,oBAAoB;;;;;;;;UAQnC,YAAY;YACV,uBAAuB;;;UAGzB,UAAU;YACR,oBAAoB;;;;;;YAMpB,+BAA+B;;;UAGjC,YAAY;UACZ,YAAY;UACZ,YAAY;YACV,8BAA8B;;;UAGhC,UAAU;UACV,UAAU;UACV,UAAU;YACR,iBAAiB;;;;;;2BAMF,mBAAmB;mBAC3B,kBAAkB;;;UAG3B,UAAU;UACV,UAAU;2BACO,oBAAoB;;;UAGrC,UAAU;UACV,UAAU;2BACO,uBAAuB;;;;;;;;;;qBAU7B,mBAAmB;;;UAG9B,UAAU;UACV,UAAU;qBACC,oBAAoB;;;UAG/B,UAAU;UACV,UAAU;qBACC,uBAAuB;;CAE3C,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;;;GAWjC,CAAC,CACH,CAAC"}

package/dist/esm/rating-display/rating-display.template.js

@@ -0,0 +1,32 @@
+import { html } from '@microsoft/fast-element';
+/**
+ * Reusable star icon symbol
+ */
+const star = html `
+  <svg xmlns="http://www.w3.org/2000/svg" style="display: none">
+    <symbol id="star" viewBox="0 0 12 12">
+      <path
+        d="M5.28347 1.54556C5.57692 0.95096 6.42479 0.950961 6.71825 1.54556L7.82997 3.79817L10.3159 4.15939C10.9721 4.25474 11.2341 5.06112 10.7592 5.52394L8.96043 7.27736L9.38507 9.75321C9.49716 10.4067 8.81122 10.9051 8.22431 10.5966L6.00086 9.42761L3.7774 10.5966C3.19049 10.9051 2.50455 10.4067 2.61664 9.75321L3.04128 7.27736L1.24246 5.52394C0.767651 5.06111 1.02966 4.25474 1.68584 4.15939L4.17174 3.79817L5.28347 1.54556Z"
+      />
+    </symbol>
+  </svg>
+`;
+/**
+ * Generates a template for the Rating Display component.
+ *
+ * @public
+ */
+export function ratingDisplayTemplate() {
+    return html `
+    ${star} ${x => html `${html.partial(x.generateIcons())}`}
+    <slot name="value"><span class="value-label" aria-hidden="true">${x => x.value}</span></slot>
+    <slot name="count"><span class="count-label" aria-hidden="true">${x => x.formattedCount}</span></slot>
+  `;
+}
+/**
+ * The template for the Rating Display component.
+ *
+ * @public
+ */
+export const template = ratingDisplayTemplate();
+//# sourceMappingURL=rating-display.template.js.map

package/dist/esm/rating-display/rating-display.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rating-display.template.js","sourceRoot":"","sources":["../../../src/rating-display/rating-display.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGpE;;GAEG;AACH,MAAM,IAAI,GAAG,IAAI,CAAA;;;;;;;;CAQhB,CAAC;AAEF;;;;GAIG;AACH,MAAM,UAAU,qBAAqB;IACnC,OAAO,IAAI,CAAG;MACV,IAAI,IAAI,CAAC,CAAC,EAAE,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC,EAAE;sEACW,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;sEACZ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;GACxF,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAuC,qBAAqB,EAAE,CAAC"}

package/dist/esm/slider/index.js

@@ -1,6 +1,6 @@
-export * from './slider.js';
-export * from './slider.options.js';
 export { definition as SliderDefinition } from './slider.definition.js';
+export { Slider } from './slider.js';
+export { SliderMode, SliderOrientation, SliderSize } from './slider.options.js';
 export { styles as SliderStyles } from './slider.styles.js';
 export { template as SliderTemplate } from './slider.template.js';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/slider/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/slider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEhF,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/esm/slider/slider-utilities.js

@@ -0,0 +1,12 @@
+import { Direction, limit } from '@microsoft/fast-web-utilities';
+/**
+ * Converts a pixel coordinate on the track to a percent of the track's range
+ */
+export function convertPixelToPercent(pixelPos, minPosition, maxPosition, direction) {
+    let pct = limit(0, 1, (pixelPos - minPosition) / (maxPosition - minPosition));
+    if (direction === Direction.rtl) {
+        pct = 1 - pct;
+    }
+    return pct;
+}
+//# sourceMappingURL=slider-utilities.js.map

package/dist/esm/slider/slider-utilities.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-utilities.js","sourceRoot":"","sources":["../../../src/slider/slider-utilities.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAEjE;;GAEG;AACH,MAAM,UAAU,qBAAqB,CACnC,QAAgB,EAChB,WAAmB,EACnB,WAAmB,EACnB,SAAqB;IAErB,IAAI,GAAG,GAAW,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,QAAQ,GAAG,WAAW,CAAC,GAAG,CAAC,WAAW,GAAG,WAAW,CAAC,CAAC,CAAC;IACtF,IAAI,SAAS,KAAK,SAAS,CAAC,GAAG,EAAE;QAC/B,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;KACf;IACD,OAAO,GAAG,CAAC;AACb,CAAC"}

package/dist/esm/slider/slider.bench.js

@@ -0,0 +1,10 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './slider.definition.js';
+definition.define(FluentDesignSystem.registry);
+const itemRenderer = () => {
+    const slider = document.createElement('fluent-slider');
+    return slider;
+};
+export default itemRenderer;
+export { tests } from '../utils/benchmark-wrapper.js';
+//# sourceMappingURL=slider.bench.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slider.bench.js","sourceRoot":"","sources":["../../../src/slider/slider.bench.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;AAE/C,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IACvD,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/esm/slider/slider.form-associated.js

@@ -0,0 +1,14 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { FormAssociated } from '../form-associated/form-associated.js';
+class _Slider extends FASTElement {
+}
+/**
+ * @beta
+ */
+export class FormAssociatedSlider extends FormAssociated(_Slider) {
+    constructor() {
+        super(...arguments);
+        this.proxy = document.createElement('input');
+    }
+}
+//# sourceMappingURL=slider.form-associated.js.map

package/dist/esm/slider/slider.form-associated.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.form-associated.js","sourceRoot":"","sources":["../../../src/slider/slider.form-associated.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AAEvE,MAAM,OAAQ,SAAQ,WAAW;CAAG;AAIpC;;GAEG;AACH,MAAM,OAAO,oBAAqB,SAAQ,cAAc,CAAC,OAAO,CAAC;IAAjE;;QACE,UAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC1C,CAAC;CAAA"}