@fluentui/web-components 3.0.0-beta.7 → 3.0.0-beta.70

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,169 @@
+import { __decorate } from "tslib";
+import { attr, FASTElement, nullableNumberConverter, observable } from '@microsoft/fast-element';
+import { toggleState } from '../utils/element-internals.js';
+/**
+ * The base class used for constructing a fluent-rating-display custom element
+ *
+ * @slot icon - SVG element used as the rating icon
+ *
+ * @public
+ */
+export class BaseRatingDisplay extends FASTElement {
+    /**
+     * @internal
+     */
+    slottedIconChanged() {
+        var _a;
+        if (this.$fastController.isConnected) {
+            this.customIcon = (_a = this.slottedIcon[0]) === null || _a === void 0 ? void 0 : _a.outerHTML;
+        }
+    }
+    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() {
+        var _a, _b, _c;
+        let htmlString = '';
+        let customIcon;
+        if (this.customIcon) {
+            // Extract the SVG element content
+            customIcon = (_b = (_a = /<svg[^>]*>([\s\S]*?)<\/svg>/.exec(this.customIcon)) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : '';
+        }
+        // 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" viewBox="${(_c = this.iconViewBox) !== null && _c !== void 0 ? _c : '0 0 20 20'}" ${iconValue === selectedValue ? 'selected' : ''}>${customIcon !== null && customIcon !== void 0 ? customIcon : '<use href="#star"></use>'}</svg>`;
+        }
+        return htmlString;
+    }
+}
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], BaseRatingDisplay.prototype, "count", void 0);
+__decorate([
+    attr({ attribute: 'icon-view-box' })
+], BaseRatingDisplay.prototype, "iconViewBox", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], BaseRatingDisplay.prototype, "max", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], BaseRatingDisplay.prototype, "value", void 0);
+__decorate([
+    observable
+], BaseRatingDisplay.prototype, "slottedIcon", void 0);
+__decorate([
+    observable
+], BaseRatingDisplay.prototype, "customIcon", void 0);
+/**
+ * A Rating Display 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,126 @@
+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;
+    --icon-color-filled: ${colorPaletteMarigoldBackground3};
+    --icon-color-empty: ${colorPaletteMarigoldBackground2};
+    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};
+  }
+
+  ::slotted([slot='icon']) {
+    display: none;
+  }
+
+  svg {
+    width: var(--icon-size);
+    height: var(--icon-size);
+    fill: var(--icon-color-filled);
+    margin-inline-end: ${spacingHorizontalXXS};
+  }
+
+  svg:nth-child(odd) {
+    clip-path: inset(0 50% 0 0);
+    margin-inline-end: calc(0px - var(--icon-size));
+  }
+
+  :host(${neutralState}) svg {
+    --icon-color-filled: ${colorNeutralForeground1};
+  }
+
+  :host(${brandState}) svg {
+    --icon-color-filled: ${colorBrandBackground};
+  }
+
+  :host(:is([value^='-'], [value='0'])) svg,
+  :host(:not([value])) svg,
+  svg[selected] ~ svg {
+    fill: var(--icon-color-empty);
+  }
+
+  :host(${neutralState}:is([value^='-'], [value='0'])) svg,
+  :host(${neutralState}:not([value])) svg,
+  :host(${neutralState}) svg[selected] ~ svg {
+    --icon-color-empty: ${colorNeutralBackground1Pressed};
+  }
+
+  :host(${brandState}:is([value^='-'], [value='0'])) svg,
+  :host(${brandState}:not([value])) svg,
+  :host(${brandState}) svg[selected] ~ svg {
+    --icon-color-empty: ${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;;;;2BAIC,+BAA+B;0BAChC,+BAA+B;;aAE5C,uBAAuB;mBACjB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;;;;;UAK1B,UAAU;;;;UAIV,UAAU;;iBAEH,eAAe;mBACb,iBAAiB;;;;;;;;;;;yBAWX,oBAAoB;;;;;;;;UAQnC,YAAY;2BACK,uBAAuB;;;UAGxC,UAAU;2BACO,oBAAoB;;;;;;;;;UASrC,YAAY;UACZ,YAAY;UACZ,YAAY;0BACI,8BAA8B;;;UAG9C,UAAU;UACV,UAAU;UACV,UAAU;0BACM,iBAAiB;;;;;;2BAMhB,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,34 @@
+import { elements, html, slotted } from '@microsoft/fast-element';
+import { staticallyCompose } from '../utils/template-helpers.js';
+/**
+ * Reusable star icon symbol
+ */
+const star = html `
+  <svg xmlns="http://www.w3.org/2000/svg" style="display: none">
+    <symbol id="star">
+      <path
+        d="M9.10433 2.89874C9.47114 2.15549 10.531 2.1555 10.8978 2.89874L12.8282 6.81024L17.1448 7.43748C17.9651 7.55666 18.2926 8.56464 17.699 9.14317L14.5755 12.1878L15.3129 16.487C15.453 17.3039 14.5956 17.9269 13.8619 17.5412L10.0011 15.5114L6.14018 17.5412C5.40655 17.9269 4.54913 17.3039 4.68924 16.487L5.4266 12.1878L2.30308 9.14317C1.70956 8.56463 2.03708 7.55666 2.8573 7.43748L7.17389 6.81024L9.10433 2.89874Z"
+      />
+    </symbol>
+  </svg>
+`;
+/**
+ * Generates a template for the Rating Display component.
+ *
+ * @public
+ */
+export function ratingDisplayTemplate() {
+    return html `
+    ${x => html `${staticallyCompose(x.generateIcons())}`}
+    <slot name="icon" ${slotted({ property: 'slottedIcon', filter: elements('svg') })}>${star}</slot>
+    <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,EAAE,QAAQ,EAAuB,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACvF,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAGjE;;GAEG;AACH,MAAM,IAAI,GAAG,IAAI,CAAA;;;;;;;;CAQhB,CAAC;AAEF;;;;GAIG;AACH,MAAM,UAAU,qBAAqB;IACnC,OAAO,IAAI,CAAG;MACV,CAAC,CAAC,EAAE,CAAC,IAAI,CAAA,GAAG,iBAAiB,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC,EAAE;wBAChC,OAAO,CAAC,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,EAAE,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,IAAI;sEACvB,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"}