@fluentui/web-components 3.0.0-beta.13 → 3.0.0-beta.131

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

@@ -0,0 +1,150 @@
+import { css } from '@microsoft/fast-element';
+import { display, forcedColorsStylesheetBehavior } from '../utils/index.js';
+import { colorBrandBackground2, colorBrandForeground1, colorNeutralBackground6, colorNeutralForeground1, colorPaletteMarigoldBackground2, colorPaletteMarigoldBorderActive, fontFamilyBase, fontSizeBase200, fontSizeBase300, fontWeightSemibold, lineHeightBase200, lineHeightBase300, spacingHorizontalSNudge, spacingHorizontalXS, spacingHorizontalXXS, } from '../theme/design-tokens.js';
+import { svgToDataURI } from './rating-display.base.js';
+import { defaultIconFilled, defaultIconOutlined } from './rating-display.template.js';
+/**
+ * The styles for the Rating Display component.
+ *
+ * @public
+ */
+export const styles = css `
+  ${display('inline-flex')}
+
+  :host {
+    --_icon-size: 16px;
+    --_icon-gradient-degree: 90deg;
+    --_icon-color-value: ${colorPaletteMarigoldBorderActive};
+    --_icon-color-empty: ${colorPaletteMarigoldBackground2};
+    --_default-value: 0;
+    --_default-max: 5;
+    --_mask-image-filled: url(${svgToDataURI(defaultIconFilled)});
+    --_mask-image-outlined: url(${svgToDataURI(defaultIconOutlined)});
+    --_mask-position-x: left;
+
+    align-items: center;
+    color: ${colorNeutralForeground1};
+    font-family: ${fontFamilyBase};
+    font-size: ${fontSizeBase200};
+    line-height: ${lineHeightBase200};
+    contain: layout style;
+    user-select: none;
+  }
+
+  :host(:dir(rtl)) {
+    --_icon-gradient-degree: -90deg;
+    --_mask-position-x: right;
+  }
+
+  :host([size='small']) {
+    --_icon-size: 12px;
+  }
+
+  :host([size='large']) {
+    --_icon-size: 20px;
+    font-size: ${fontSizeBase300};
+    line-height: ${lineHeightBase300};
+  }
+
+  ::slotted([slot='icon']) {
+    display: none;
+  }
+
+  :host([color='neutral']) {
+    --_icon-color-value: ${colorNeutralForeground1};
+    --_icon-color-empty: ${colorNeutralBackground6};
+  }
+
+  :host([color='brand']) {
+    --_icon-color-value: ${colorBrandForeground1};
+    --_icon-color-empty: ${colorBrandBackground2};
+  }
+
+  @supports (width: attr(value type(<number>))) {
+    :host {
+      --_attr-value: attr(value type(<number>));
+      --_attr-max: attr(max type(<number>));
+    }
+  }
+
+  :host([compact]) .display {
+    --_max: 1;
+  }
+
+  .display {
+    --_value: max(0, round(var(--_attr-value, var(--_default-value)) * 2) / 2);
+    --_max: max(1, var(--_attr-max, var(--_default-max)));
+    --_mask-inline-size: calc(var(--_icon-size) + ${spacingHorizontalXXS});
+    --_icon-gradient-stop-visual-adjustment: 0px;
+    --_icon-gradient-stop: calc(
+      var(--_mask-inline-size) * var(--_value) - var(--_icon-gradient-stop-visual-adjustment)
+    );
+
+    background-image: linear-gradient(
+      var(--_icon-gradient-degree),
+      var(--_icon-color-value) var(--_icon-gradient-stop),
+      var(--_icon-color-empty) calc(var(--_icon-gradient-stop) + 0.5px)
+    );
+    block-size: var(--_icon-size);
+    display: grid;
+    inline-size: calc(var(--_max) * var(--_mask-inline-size) - ${spacingHorizontalXXS} / 2);
+    mask-image: var(--_mask-image-filled);
+    mask-repeat: repeat no-repeat;
+    mask-size: var(--_mask-inline-size) var(--_icon-size);
+    mask-position: var(--_mask-position-x) center;
+  }
+
+  .value-label,
+  ::slotted([slot='value']) {
+    display: block;
+    margin-inline-start: ${spacingHorizontalXS};
+    font-weight: ${fontWeightSemibold};
+  }
+
+  :host([size='small']) .value-label,
+  :host([size='small']) ::slotted([slot='value']) {
+    margin-inline-start: ${spacingHorizontalXXS};
+  }
+
+  :host([size='large']) .value-label,
+  :host([size='large']) ::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([size='small']) .count-label::before,
+  :host([size='small']) ::slotted([slot='count'])::before {
+    margin-inline: ${spacingHorizontalXXS};
+  }
+
+  :host([size='large']) .count-label::before,
+  :host([size='large']) ::slotted([slot='count'])::before {
+    margin-inline: ${spacingHorizontalSNudge};
+  }
+`.withBehaviors(forcedColorsStylesheetBehavior(css `
+    .display {
+      --_icon-color-value: CanvasText;
+      --_icon-color-empty: Canvas;
+      --_icon-gradient-stop-visual-adjustment: 0.5px;
+
+      forced-color-adjust: none;
+    }
+
+    .display::before {
+      background-color: var(--_icon-color-value);
+      content: '';
+      grid-area: 1 / 1 / -1 / -1;
+      mask: inherit;
+      mask-image: var(--_mask-image-outlined);
+    }
+  `));
+//# 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,qBAAqB,EACrB,qBAAqB,EACrB,uBAAuB,EACvB,uBAAuB,EACvB,+BAA+B,EAC/B,gCAAgC,EAChC,cAAc,EACd,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,uBAAuB,EACvB,mBAAmB,EACnB,oBAAoB,GACrB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAEtF;;;;GAIG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;;2BAKC,gCAAgC;2BAChC,+BAA+B;;;gCAG1B,YAAY,CAAC,iBAAiB,CAAC;kCAC7B,YAAY,CAAC,mBAAmB,CAAC;;;;aAItD,uBAAuB;mBACjB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;;;;;;;;;;;;;;;;iBAgBnB,eAAe;mBACb,iBAAiB;;;;;;;;2BAQT,uBAAuB;2BACvB,uBAAuB;;;;2BAIvB,qBAAqB;2BACrB,qBAAqB;;;;;;;;;;;;;;;;;oDAiBI,oBAAoB;;;;;;;;;;;;;iEAaP,oBAAoB;;;;;;;;;;2BAU1D,mBAAmB;mBAC3B,kBAAkB;;;;;2BAKV,oBAAoB;;;;;2BAKpB,uBAAuB;;;;;;;;;;qBAU7B,mBAAmB;;;;;qBAKnB,oBAAoB;;;;;qBAKpB,uBAAuB;;CAE3C,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;GAgBjC,CAAC,CACH,CAAC"}

package/dist/esm/rating-display/rating-display.template.d.ts

@@ -0,0 +1,17 @@
+import { type ElementViewTemplate } from '@microsoft/fast-element';
+import type { RatingDisplay } from './rating-display.js';
+export declare const defaultIconPath = "<path d=\"M5.28347 1.54605C5.57692 0.951448 6.42479 0.951449 6.71825 1.54605L7.82997 3.79866L10.3159 4.15988C10.9721 4.25523 11.2341 5.0616 10.7592 5.52443L8.96043 7.27785L9.38507 9.7537C9.49716 10.4072 8.81122 10.9056 8.22431 10.597L6.00086 9.4281L3.7774 10.597C3.19049 10.9056 2.50455 10.4072 2.61664 9.7537L3.04128 7.27784L1.24246 5.52443C0.767651 5.0616 1.02966 4.25523 1.68584 4.15988L4.17174 3.79865L5.28347 1.54605Z\" />";
+export declare const defaultIconFilled = "\n<svg viewBox=\"0 0 12 12\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.28347 1.54605C5.57692 0.951448 6.42479 0.951449 6.71825 1.54605L7.82997 3.79866L10.3159 4.15988C10.9721 4.25523 11.2341 5.0616 10.7592 5.52443L8.96043 7.27785L9.38507 9.7537C9.49716 10.4072 8.81122 10.9056 8.22431 10.597L6.00086 9.4281L3.7774 10.597C3.19049 10.9056 2.50455 10.4072 2.61664 9.7537L3.04128 7.27784L1.24246 5.52443C0.767651 5.0616 1.02966 4.25523 1.68584 4.15988L4.17174 3.79865L5.28347 1.54605Z\" /></svg>\n";
+export declare const defaultIconOutlined = "\n<svg viewBox=\"0 0 12 12\" xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\" stroke=\"black\" stroke-width=\"2\"\n><path d=\"M5.28347 1.54605C5.57692 0.951448 6.42479 0.951449 6.71825 1.54605L7.82997 3.79866L10.3159 4.15988C10.9721 4.25523 11.2341 5.0616 10.7592 5.52443L8.96043 7.27785L9.38507 9.7537C9.49716 10.4072 8.81122 10.9056 8.22431 10.597L6.00086 9.4281L3.7774 10.597C3.19049 10.9056 2.50455 10.4072 2.61664 9.7537L3.04128 7.27784L1.24246 5.52443C0.767651 5.0616 1.02966 4.25523 1.68584 4.15988L4.17174 3.79865L5.28347 1.54605Z\" /></svg>\n";
+/**
+ * Generates a template for the Rating Display component.
+ *
+ * @public
+ */
+export declare function ratingDisplayTemplate<T extends RatingDisplay>(): ElementViewTemplate<T>;
+/**
+ * The template for the Rating Display component.
+ *
+ * @public
+ */
+export declare const template: ElementViewTemplate<RatingDisplay>;

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

@@ -0,0 +1,30 @@
+import { html, ref } from '@microsoft/fast-element';
+export const defaultIconPath = `<path d="M5.28347 1.54605C5.57692 0.951448 6.42479 0.951449 6.71825 1.54605L7.82997 3.79866L10.3159 4.15988C10.9721 4.25523 11.2341 5.0616 10.7592 5.52443L8.96043 7.27785L9.38507 9.7537C9.49716 10.4072 8.81122 10.9056 8.22431 10.597L6.00086 9.4281L3.7774 10.597C3.19049 10.9056 2.50455 10.4072 2.61664 9.7537L3.04128 7.27784L1.24246 5.52443C0.767651 5.0616 1.02966 4.25523 1.68584 4.15988L4.17174 3.79865L5.28347 1.54605Z" />`;
+export const defaultIconFilled = `
+<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">${defaultIconPath}</svg>
+`;
+export const defaultIconOutlined = `
+<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"
+    fill="none" stroke="black" stroke-width="2"
+>${defaultIconPath}</svg>
+`;
+/**
+ * Generates a template for the Rating Display component.
+ *
+ * @public
+ */
+export function ratingDisplayTemplate() {
+    return html `
+    <div ${ref('display')} class="display" aria-hidden="true"></div>
+    <slot name="icon" ${ref('iconSlot')} @slotchange="${x => x.handleSlotChange()}"></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,EAA4B,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAG9E,MAAM,CAAC,MAAM,eAAe,GAAG,2aAA2a,CAAC;AAE3c,MAAM,CAAC,MAAM,iBAAiB,GAAG;8DAC6B,eAAe;CAC5E,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG;;;GAGhC,eAAe;CACjB,CAAC;AAEF;;;;GAIG;AACH,MAAM,UAAU,qBAAqB;IACnC,OAAO,IAAI,CAAG;WACL,GAAG,CAAC,SAAS,CAAC;wBACD,GAAG,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB,EAAE;sEACX,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/define.d.ts

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

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

@@ -0,0 +1,6 @@
+export { definition as SliderDefinition } from './slider.definition.js';
+export { Slider } from './slider.js';
+export { SliderMode, SliderOrientation, SliderSize } from './slider.options.js';
+export type { SliderConfiguration, SliderOptions } from './slider.options.js';
+export { styles as SliderStyles } from './slider.styles.js';
+export { template as SliderTemplate } from './slider.template.js';

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.map

@@ -1 +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"}
+{"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,CAAC;QAChC,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;IAChB,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC"}

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

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

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

@@ -0,0 +1,358 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { Direction, Orientation } from '@microsoft/fast-web-utilities';
+import { type SliderConfiguration, SliderMode, SliderSize } from './slider.options.js';
+/**
+ * The base class used for constructing a fluent-slider custom element
+ *
+ * @tag fluent-slider
+ *
+ * @slot thumb - The slot for a custom thumb element.
+ * @csspart thumb-container - The container element of the thumb.
+ * @csspart track-container - The container element of the track.
+ * @fires change - Fires a custom 'change' event when the value changes.
+ *
+ * @public
+ */
+export declare class Slider extends FASTElement implements SliderConfiguration {
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    /**
+     * The form-associated flag.
+     * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | Form-associated custom elements}
+     *
+     * @public
+     */
+    static formAssociated: boolean;
+    /**
+     * A reference to all associated `<label>` elements.
+     *
+     * @public
+     */
+    get labels(): ReadonlyArray<Node>;
+    /**
+     * The size of the slider
+     * @public
+     * @remarks
+     * HTML Attribute: size
+     */
+    size?: SliderSize;
+    handleChange(_: any, propertyName: string): void;
+    private stepStyles?;
+    /**
+     * Handles changes to step styling based on the step value
+     * NOTE: This function is not a changed callback, stepStyles is not observable
+     */
+    private handleStepStyles;
+    /**
+     * The initial value of the input.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: `value`
+     */
+    initialValue: string;
+    /**
+     * Sets the value of the input when the value attribute changes.
+     *
+     * @param prev - The previous value
+     * @param next - The current value
+     * @internal
+     */
+    protected initialValueChanged(_: string, next: string): void;
+    /**
+     * The element's validity state.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/validity | `ElementInternals.validity`} property.
+     */
+    get validity(): ValidityState;
+    /**
+     * The element's validation message.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/validationMessage | `ElemenentInternals.validationMessage`} property.
+     */
+    get validationMessage(): string;
+    /**
+     * Whether the element is a candidate for its owning form's constraint validation.
+     *
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/willValidate | `ElemenentInternals.willValidate`} property.
+     */
+    get willValidate(): boolean;
+    /**
+     * Checks the element's validity.
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/checkValidity | `ElemenentInternals.checkValidity`} method.
+     */
+    checkValidity(): boolean;
+    /**
+     * Reports the element's validity.
+     * @public
+     * @remarks
+     * Reflects the {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/reportValidity | `ElemenentInternals.reportValidity`} method.
+     */
+    reportValidity(): boolean;
+    /**
+     * Sets a custom validity message.
+     * @public
+     */
+    setCustomValidity(message: string): void;
+    /**
+     * Sets the validity of the control.
+     *
+     * @param flags - Validity flags to set.
+     * @param message - Optional message to supply. If not provided, the control's `validationMessage` will be used.
+     * @param anchor - Optional anchor to use for the validation message.
+     *
+     * @internal
+     */
+    setValidity(flags?: Partial<ValidityState>, message?: string, anchor?: HTMLElement): void;
+    /**
+     * The internal value of the input.
+     *
+     * @internal
+     */
+    private _value;
+    /**
+     * The current value of the input.
+     *
+     * @public
+     */
+    get value(): string;
+    set value(value: string);
+    /**
+     * Resets the form value to its initial value when the form is reset.
+     *
+     * @internal
+     */
+    formResetCallback(): void;
+    /**
+     * Disabled the component when its associated form is disabled.
+     *
+     * @internal
+     *
+     * @privateRemarks
+     * DO NOT change the `disabled` property or attribute here, because if the
+     * `disabled` attribute is present, reenabling an ancestor `<fieldset>`
+     * element will not reenabling this component.
+     */
+    formDisabledCallback(disabled: boolean): void;
+    /**
+     * Reflects the {@link https://developer.mozilla.org/docs/Web/API/ElementInternals/setFormValue | `ElementInternals.setFormValue()`} method.
+     *
+     * @internal
+     */
+    setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
+    /**
+     * @internal
+     */
+    track: HTMLDivElement;
+    /**
+     * @internal
+     */
+    thumb: HTMLDivElement;
+    /**
+     * @internal
+     */
+    stepMultiplier: number;
+    /**
+     * @internal
+     */
+    direction: Direction;
+    directionChanged(): void;
+    /**
+     * @internal
+     */
+    isDragging: boolean;
+    /**
+     * @internal
+     */
+    position: string;
+    /**
+     * @internal
+     */
+    trackWidth: number;
+    /**
+     * @internal
+     */
+    trackMinWidth: number;
+    /**
+     * @internal
+     */
+    trackHeight: number;
+    /**
+     * @internal
+     */
+    trackLeft: number;
+    /**
+     * @internal
+     */
+    trackMinHeight: number;
+    /**
+     * The value property, typed as a number.
+     *
+     * @public
+     */
+    get valueAsNumber(): number;
+    set valueAsNumber(next: number);
+    /**
+     * Custom function that generates a string for the component's "ariaValueText" on element internals based on the current value.
+     *
+     * @public
+     */
+    valueTextFormatter: (value: string) => string;
+    protected valueTextFormatterChanged(): void;
+    /**
+     * The element's disabled state.
+     * @public
+     * @remarks
+     * HTML Attribute: `disabled`
+     */
+    disabled: boolean;
+    protected disabledChanged(): void;
+    /**
+     * The minimum allowed value.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: min
+     */
+    min: string;
+    protected minChanged(): void;
+    /**
+     * Returns the min property or the default value
+     *
+     * @internal
+     */
+    private get minAsNumber();
+    /**
+     * The maximum allowed value.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: max
+     */
+    max: string;
+    protected maxChanged(): void;
+    /**
+     * Returns the max property or the default value
+     *
+     * @internal
+     */
+    private get maxAsNumber();
+    /**
+     * Value to increment or decrement via arrow keys, mouse click or drag.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: step
+     */
+    step: string;
+    protected stepChanged(): void;
+    /**
+     * Returns the step property as a number.
+     *
+     * @internal
+     */
+    private get stepAsNumber();
+    /**
+     * The orientation of the slider.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: orientation
+     *
+     * @privateRemarks
+     * When checking the value of `this.orientation`, always compare it to
+     * `Orientation.vertical`, never to `Orientation.horizontal`, it’s because
+     * this property is optional, so it could be `undefined`. So any
+     * orientation-related behavior should consider horizontal as default, and
+     * apply different behavior when it’s vertical.
+     */
+    orientation?: Orientation;
+    protected orientationChanged(prev: Orientation | undefined, next: Orientation | undefined): void;
+    /**
+     * The selection mode.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: mode
+     */
+    mode: SliderMode;
+    constructor();
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    /**
+     * @internal
+     */
+    disconnectedCallback(): void;
+    /**
+     * Increment the value by the step
+     *
+     * @public
+     */
+    increment(): void;
+    /**
+     * Decrement the value by the step
+     *
+     * @public
+     */
+    decrement(): void;
+    handleKeydown(event: KeyboardEvent): boolean;
+    /**
+     * Places the thumb based on the current value
+     */
+    private setSliderPosition;
+    /**
+     * Update the step multiplier used to ensure rounding errors from steps that
+     * are not whole numbers
+     */
+    private updateStepMultiplier;
+    private setupTrackConstraints;
+    private get midpoint();
+    private setupDefaultValue;
+    /**
+     *  Handle mouse moves during a thumb drag operation
+     *  If the event handler is null it removes the events
+     */
+    handleThumbPointerDown: (event: PointerEvent | null) => boolean;
+    /**
+     *  Handle mouse moves during a thumb drag operation
+     */
+    private handlePointerMove;
+    /**
+     * Calculate the new value based on the given raw pixel value.
+     *
+     * @param rawValue - the value to be converted to a constrained value
+     * @returns the constrained value
+     *
+     * @internal
+     */
+    calculateNewValue(rawValue: number): number;
+    /**
+     * Handle a window mouse up during a drag operation
+     */
+    private handleWindowPointerUp;
+    private stopDragging;
+    /**
+     *
+     * @param event - PointerEvent or null. If there is no event handler it will remove the events
+     */
+    handlePointerDown: (event: PointerEvent | null) => boolean;
+    private convertToConstrainedValue;
+    /**
+     * Makes sure the side effects of set up when the disabled state changes.
+     */
+    private setDisabledSideEffect;
+}