@tylertech/forge 3.0.0-next.7 → 3.0.0-next.8

package/esm/focus-indicator/focus-indicator-constants.js

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { COMPONENT_NAME_PREFIX } from '../constants';
+const elementName = `${COMPONENT_NAME_PREFIX}focus-indicator`;
+const observedAttributes = {
+    TARGET: 'target',
+    ACTIVE: 'active',
+    INWARD: 'inward',
+    CIRCULAR: 'circular',
+    ALLOW_FOCUS: 'allow-focus'
+};
+const attributes = Object.assign({}, observedAttributes);
+export const FOCUS_INDICATOR_CONSTANTS = {
+    elementName,
+    attributes
+};

package/esm/focus-indicator/focus-indicator-foundation.d.ts

@@ -0,0 +1,43 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { IFocusIndicatorAdapter } from './focus-indicator-adapter';
+export interface IFocusIndicatorFoundation {
+    targetElement: HTMLElement | null;
+    target: string | null;
+    active: boolean;
+    inward: boolean;
+    circular: boolean;
+    allowFocus: boolean;
+    initialize(): void;
+    destroy(): void;
+}
+export declare class FocusIndicatorFoundation implements IFocusIndicatorFoundation {
+    private _adapter;
+    private _target;
+    private _active;
+    private _inward;
+    private _circular;
+    private _allowFocus;
+    private _interactionListener;
+    constructor(_adapter: IFocusIndicatorAdapter);
+    initialize(): void;
+    destroy(): void;
+    private _addListeners;
+    private _removeListeners;
+    private _onInteraction;
+    get targetElement(): HTMLElement | null;
+    set targetElement(value: HTMLElement | null);
+    get target(): string | null;
+    set target(value: string | null);
+    get active(): boolean;
+    set active(value: boolean);
+    get inward(): boolean;
+    set inward(value: boolean);
+    get circular(): boolean;
+    set circular(value: boolean);
+    get allowFocus(): boolean;
+    set allowFocus(value: boolean);
+}

package/esm/focus-indicator/focus-indicator-foundation.js

@@ -0,0 +1,110 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { FOCUS_INDICATOR_CONSTANTS } from './focus-indicator-constants';
+export class FocusIndicatorFoundation {
+    constructor(_adapter) {
+        this._adapter = _adapter;
+        this._target = null;
+        this._active = false;
+        this._inward = false;
+        this._circular = false;
+        this._allowFocus = false;
+        this._interactionListener = evt => this._onInteraction(evt);
+    }
+    initialize() {
+        if (!this._adapter.hasTargetElement()) {
+            this._adapter.trySetTarget(this._target);
+        }
+        this._addListeners();
+    }
+    destroy() {
+        this._adapter.destroy();
+        this._removeListeners();
+    }
+    _addListeners() {
+        this._adapter.addTargetListener('focusin', this._interactionListener);
+        this._adapter.addTargetListener('focusout', this._interactionListener);
+        this._adapter.addTargetListener('pointerdown', this._interactionListener);
+    }
+    _removeListeners() {
+        this._adapter.removeTargetListener('focusin', this._interactionListener);
+        this._adapter.removeTargetListener('focusout', this._interactionListener);
+        this._adapter.removeTargetListener('pointerdown', this._interactionListener);
+    }
+    _onInteraction(evt) {
+        switch (evt.type) {
+            case 'focusin':
+                this.active = this._adapter.isActive(this._allowFocus ? ':focus' : ':focus-visible');
+                break;
+            case 'focusout':
+                this.active = false;
+                break;
+            case 'pointerdown':
+                this.active = this._allowFocus ? this._adapter.isActive(':focus') : false;
+                break;
+        }
+    }
+    get targetElement() {
+        return this._adapter.getTargetElement();
+    }
+    set targetElement(value) {
+        this._removeListeners();
+        this._adapter.setTargetElement(value);
+        this._addListeners();
+    }
+    get target() {
+        return this._adapter.getHostAttribute(FOCUS_INDICATOR_CONSTANTS.attributes.TARGET);
+    }
+    set target(value) {
+        if (this._target !== value) {
+            this._target = value;
+            if (this._adapter.isConnected) {
+                this._adapter.trySetTarget(value);
+            }
+            this._adapter.toggleHostAttribute(FOCUS_INDICATOR_CONSTANTS.attributes.TARGET, Boolean(this._target), this._target);
+        }
+    }
+    get active() {
+        return this._active;
+    }
+    set active(value) {
+        value = Boolean(value);
+        if (this._active !== value) {
+            this._active = value;
+            this._adapter.toggleHostAttribute(FOCUS_INDICATOR_CONSTANTS.attributes.ACTIVE, this._active);
+        }
+    }
+    get inward() {
+        return this._inward;
+    }
+    set inward(value) {
+        value = Boolean(value);
+        if (this._inward !== value) {
+            this._inward = value;
+            this._adapter.toggleHostAttribute(FOCUS_INDICATOR_CONSTANTS.attributes.INWARD, this._inward);
+        }
+    }
+    get circular() {
+        return this._circular;
+    }
+    set circular(value) {
+        value = Boolean(value);
+        if (this._circular !== value) {
+            this._circular = value;
+            this._adapter.toggleHostAttribute(FOCUS_INDICATOR_CONSTANTS.attributes.CIRCULAR, this._circular);
+        }
+    }
+    get allowFocus() {
+        return this._allowFocus;
+    }
+    set allowFocus(value) {
+        value = Boolean(value);
+        if (this._allowFocus !== value) {
+            this._allowFocus = value;
+            this._adapter.toggleHostAttribute(FOCUS_INDICATOR_CONSTANTS.attributes.ALLOW_FOCUS, this._allowFocus);
+        }
+    }
+}

package/esm/focus-indicator/focus-indicator.d.ts

@@ -0,0 +1,67 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseComponent, IBaseComponent } from '../core/base/base-component';
+export interface IFocusIndicatorComponent extends IBaseComponent {
+    targetElement: HTMLElement;
+    target: string | null;
+    active: boolean;
+    inward: boolean;
+    circular: boolean;
+    allowFocus: boolean;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-focus-indicator': IFocusIndicatorComponent;
+    }
+}
+/**
+ * @tag forge-focus-indicator
+ *
+ * @summary Renders a focus indicator when an attached element matches `:focus-visible`.
+ *
+ * @property {HTMLElement} targetElement - The element to attach the focus indicator to.
+ * @property {string} target - The id of the element to attach the focus indicator to.
+ * @property {boolean} active - Controls whether the indicator is active.
+ * @property {boolean} inward - Controls whether the indicator renders inward.
+ * @property {boolean} circular - Controls whether the indicator renders circular.
+ * @property {boolean} allowFocus - Controls whether the indicator renders when the target element matches `:focus` instead of `:focus-visible`.
+ *
+ * @attribute {string} target - The id of the element to attach the focus indicator to.
+ * @attribute {boolean} active - Controls whether the indicator is active.
+ * @attribute {boolean} inward - Controls whether the indicator renders inward.
+ * @attribute {boolean} circular - Controls whether the indicator renders circular.
+ * @attribute {boolean} allow-focus - Controls whether the indicator renders when the target element matches `:focus` instead of `:focus-visible`.
+ *
+ * @cssproperty --forge-focus-indicator-active-width - The width of the focus indicator when active. When animating this is the max extent.
+ * @cssproperty --forge-focus-indicator-color - The color of the focus indicator.
+ * @cssproperty --forge-focus-indicator-duration - The animation duration.
+ * @cssproperty --forge-focus-indicator-outward-offset - The offset of the focus indicator when outward.
+ * @cssproperty --forge-focus-indicator-inward-offset - The offset of the focus indicator when inward.
+ * @cssproperty --forge-focus-indicator-shape - The shape of the focus indicator.
+ * @cssproperty --forge-focus-indicator-width - The width of the focus indicator when resting.
+ * @cssproperty --forge-focus-indicator-shape-start-start - The start start shape.
+ * @cssproperty --forge-focus-indicator-shape-start-end - The start end shape.
+ * @cssproperty --forge-focus-indicator-shape-end-start - The end start shape.
+ * @cssproperty --forge-focus-indicator-shape-end-end - The end end shape.
+ * @cssproperty --forge-focus-indicator-offset-block - The block offset.
+ * @cssproperty --forge-focus-indicator-offset-inline - The inline offset.
+ *
+ * @csspart indicator - The focus indicator element.
+ */
+export declare class FocusIndicatorComponent extends BaseComponent implements IFocusIndicatorComponent {
+    static get observedAttributes(): string[];
+    private _foundation;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    targetElement: HTMLElement;
+    target: string | null;
+    active: boolean;
+    inward: boolean;
+    circular: boolean;
+    allowFocus: boolean;
+}

package/esm/focus-indicator/focus-indicator.js

@@ -0,0 +1,112 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { attachShadowTemplate, coerceBoolean, CustomElement, FoundationProperty } from '@tylertech/forge-core';
+import { BaseComponent } from '../core/base/base-component';
+import { FocusIndicatorAdapter } from './focus-indicator-adapter';
+import { FOCUS_INDICATOR_CONSTANTS } from './focus-indicator-constants';
+import { FocusIndicatorFoundation } from './focus-indicator-foundation';
+const template = '<template><div class=\"forge-focus-indicator\" part=\"indicator\"></div></template>';
+const styles = '.forge-focus-indicator{--_active-width:var(--forge-focus-indicator-active-width, 6px);--_color:var(--forge-focus-indicator-color, var(--mdc-theme-primary, #3f51b5));--_duration:var(--forge-focus-indicator-duration, 600ms);--_outward-offset:var(--forge-focus-indicator-outward-offset, 4px);--_inward-offset:var(--forge-focus-indicator-inward-offset, 0px);--_shape:var(--forge-focus-indicator-shape, 1px);--_width:var(--forge-focus-indicator-width, 3px);--_easing:var(--forge-focus-indicator-easing, cubic-bezier(0.2, 0, 0, 1));--_shape-start-start:var(--forge-focus-indicator-shape-start-start, var(--_shape));--_shape-start-end:var(--forge-focus-indicator-shape-start-end, var(--_shape));--_shape-end-start:var(--forge-focus-indicator-shape-end-start, var(--_shape));--_shape-end-end:var(--forge-focus-indicator-shape-end-end, var(--_shape));--_margin-block:var(--forge-focus-indicator-offset-block, 0);--_margin-inline:var(--forge-focus-indicator-offset-inline, 0);-webkit-animation-delay:0s,calc(var(--_duration) * .25);animation-delay:0s,calc(var(--_duration) * .25);-webkit-animation-duration:calc(var(--_duration) * .25),calc(var(--_duration) * .75);animation-duration:calc(var(--_duration) * .25),calc(var(--_duration) * .75);-webkit-animation-timing-function:var(--_easing);animation-timing-function:var(--_easing);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--_color);display:none;pointer-events:none;position:absolute;margin-block:var(--_margin-block);margin-inline:var(--_margin-inline)}@media (prefers-reduced-motion){.forge-focus-indicator{-webkit-animation:none;animation:none}}@-webkit-keyframes outward-grow{from{outline-width:0}to{outline-width:var(--_active-width)}}@keyframes outward-grow{from{outline-width:0}to{outline-width:var(--_active-width)}}@-webkit-keyframes outward-shrink{from{outline-width:var(--_active-width)}}@keyframes outward-shrink{from{outline-width:var(--_active-width)}}@-webkit-keyframes inward-grow{from{border-width:0}to{border-width:var(--_active-width)}}@keyframes inward-grow{from{border-width:0}to{border-width:var(--_active-width)}}@-webkit-keyframes inward-shrink{from{border-width:var(--_active-width)}}@keyframes inward-shrink{from{border-width:var(--_active-width)}}:host{display:contents}:host([hidden]){display:none}:host([active]) .forge-focus-indicator{display:-webkit-box;display:flex}:host(:not([inward])) .forge-focus-indicator{-webkit-animation-name:outward-grow,outward-shrink;animation-name:outward-grow,outward-shrink;border-end-end-radius:calc(var(--_shape-end-end) + var(--_outward-offset));border-end-start-radius:calc(var(--_shape-end-start) + var(--_outward-offset));border-start-end-radius:calc(var(--_shape-start-end) + var(--_outward-offset));border-start-start-radius:calc(var(--_shape-start-start) + var(--_outward-offset));inset:calc(-1 * var(--_outward-offset));outline:var(--_width) solid currentColor}:host([inward]) .forge-focus-indicator{-webkit-animation-name:inward-grow,inward-shrink;animation-name:inward-grow,inward-shrink;border-end-end-radius:calc(var(--_shape-end-end) - var(--_inward-offset));border-end-start-radius:calc(var(--_shape-end-start) - var(--_inward-offset));border-start-end-radius:calc(var(--_shape-start-end) - var(--_inward-offset));border-start-start-radius:calc(var(--_shape-start-start) - var(--_inward-offset));border:var(--_width) solid currentColor;inset:var(--_inward-offset)}:host([circular]) .forge-focus-indicator{--_shape:50%}';
+/**
+ * @tag forge-focus-indicator
+ *
+ * @summary Renders a focus indicator when an attached element matches `:focus-visible`.
+ *
+ * @property {HTMLElement} targetElement - The element to attach the focus indicator to.
+ * @property {string} target - The id of the element to attach the focus indicator to.
+ * @property {boolean} active - Controls whether the indicator is active.
+ * @property {boolean} inward - Controls whether the indicator renders inward.
+ * @property {boolean} circular - Controls whether the indicator renders circular.
+ * @property {boolean} allowFocus - Controls whether the indicator renders when the target element matches `:focus` instead of `:focus-visible`.
+ *
+ * @attribute {string} target - The id of the element to attach the focus indicator to.
+ * @attribute {boolean} active - Controls whether the indicator is active.
+ * @attribute {boolean} inward - Controls whether the indicator renders inward.
+ * @attribute {boolean} circular - Controls whether the indicator renders circular.
+ * @attribute {boolean} allow-focus - Controls whether the indicator renders when the target element matches `:focus` instead of `:focus-visible`.
+ *
+ * @cssproperty --forge-focus-indicator-active-width - The width of the focus indicator when active. When animating this is the max extent.
+ * @cssproperty --forge-focus-indicator-color - The color of the focus indicator.
+ * @cssproperty --forge-focus-indicator-duration - The animation duration.
+ * @cssproperty --forge-focus-indicator-outward-offset - The offset of the focus indicator when outward.
+ * @cssproperty --forge-focus-indicator-inward-offset - The offset of the focus indicator when inward.
+ * @cssproperty --forge-focus-indicator-shape - The shape of the focus indicator.
+ * @cssproperty --forge-focus-indicator-width - The width of the focus indicator when resting.
+ * @cssproperty --forge-focus-indicator-shape-start-start - The start start shape.
+ * @cssproperty --forge-focus-indicator-shape-start-end - The start end shape.
+ * @cssproperty --forge-focus-indicator-shape-end-start - The end start shape.
+ * @cssproperty --forge-focus-indicator-shape-end-end - The end end shape.
+ * @cssproperty --forge-focus-indicator-offset-block - The block offset.
+ * @cssproperty --forge-focus-indicator-offset-inline - The inline offset.
+ *
+ * @csspart indicator - The focus indicator element.
+ */
+let FocusIndicatorComponent = class FocusIndicatorComponent extends BaseComponent {
+    static get observedAttributes() {
+        return [
+            FOCUS_INDICATOR_CONSTANTS.attributes.TARGET,
+            FOCUS_INDICATOR_CONSTANTS.attributes.ACTIVE,
+            FOCUS_INDICATOR_CONSTANTS.attributes.INWARD,
+            FOCUS_INDICATOR_CONSTANTS.attributes.CIRCULAR,
+            FOCUS_INDICATOR_CONSTANTS.attributes.ALLOW_FOCUS
+        ];
+    }
+    constructor() {
+        super();
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new FocusIndicatorFoundation(new FocusIndicatorAdapter(this));
+    }
+    connectedCallback() {
+        this._foundation.initialize();
+    }
+    disconnectedCallback() {
+        this._foundation.destroy();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case FOCUS_INDICATOR_CONSTANTS.attributes.TARGET:
+                this.target = newValue;
+                break;
+            case FOCUS_INDICATOR_CONSTANTS.attributes.ACTIVE:
+                this.active = coerceBoolean(newValue);
+                break;
+            case FOCUS_INDICATOR_CONSTANTS.attributes.INWARD:
+                this.inward = coerceBoolean(newValue);
+                break;
+            case FOCUS_INDICATOR_CONSTANTS.attributes.CIRCULAR:
+                this.circular = coerceBoolean(newValue);
+                break;
+            case FOCUS_INDICATOR_CONSTANTS.attributes.ALLOW_FOCUS:
+                this.allowFocus = coerceBoolean(newValue);
+                break;
+        }
+    }
+};
+__decorate([
+    FoundationProperty()
+], FocusIndicatorComponent.prototype, "targetElement", void 0);
+__decorate([
+    FoundationProperty()
+], FocusIndicatorComponent.prototype, "target", void 0);
+__decorate([
+    FoundationProperty()
+], FocusIndicatorComponent.prototype, "active", void 0);
+__decorate([
+    FoundationProperty()
+], FocusIndicatorComponent.prototype, "inward", void 0);
+__decorate([
+    FoundationProperty()
+], FocusIndicatorComponent.prototype, "circular", void 0);
+__decorate([
+    FoundationProperty()
+], FocusIndicatorComponent.prototype, "allowFocus", void 0);
+FocusIndicatorComponent = __decorate([
+    CustomElement({
+        name: FOCUS_INDICATOR_CONSTANTS.elementName
+    })
+], FocusIndicatorComponent);
+export { FocusIndicatorComponent };

package/esm/focus-indicator/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './focus-indicator-adapter';
+export * from './focus-indicator-constants';
+export * from './focus-indicator-foundation';
+export * from './focus-indicator';
+export declare function defineFocusIndicatorComponent(): void;

package/esm/focus-indicator/index.js

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { defineCustomElement } from '@tylertech/forge-core';
+import { FocusIndicatorComponent } from './focus-indicator';
+export * from './focus-indicator-adapter';
+export * from './focus-indicator-constants';
+export * from './focus-indicator-foundation';
+export * from './focus-indicator';
+export function defineFocusIndicatorComponent() {
+    defineCustomElement(FocusIndicatorComponent);
+}

package/esm/index.d.ts

@@ -32,6 +32,7 @@ export * from './expansion-panel';
 export * from './file-picker';
 export * from './floating-action-button';
 export * from './floating-label';
+export * from './focus-indicator';
 export * from './icon-button';
 export * from './inline-message';
 export * from './keyboard-shortcut';

package/esm/index.js

@@ -35,6 +35,7 @@ import { DrawerComponent, MiniDrawerComponent, ModalDrawerComponent } from './dr
 import { ExpansionPanelComponent } from './expansion-panel';
 import { FilePickerComponent } from './file-picker';
 import { FloatingActionButton } from './floating-action-button';
+import { FocusIndicatorComponent } from './focus-indicator';
 import { IconButtonComponent } from './icon-button';
 import { InlineMessageComponent } from './inline-message';
 import { KeyboardShortcutComponent } from './keyboard-shortcut';
@@ -99,6 +100,7 @@ export * from './expansion-panel';
 export * from './file-picker';
 export * from './floating-action-button';
 export * from './floating-label';
+export * from './focus-indicator';
 export * from './icon-button';
 export * from './inline-message';
 export * from './keyboard-shortcut';
@@ -162,6 +164,7 @@ const CUSTOM_ELEMENTS = [
     ExpansionPanelComponent,
     FilePickerComponent,
     FloatingActionButton,
+    FocusIndicatorComponent,
     ProductIconComponent,
     IconComponent,
     IconButtonComponent,

package/esm/slider/slider-utils.js

@@ -24,6 +24,9 @@ export function createStartHandleElement(thumbLabel) {
     const startHandle = document.createElement('div');
     startHandle.classList.add(SLIDER_CONSTANTS.classes.HANDLE, SLIDER_CONSTANTS.classes.HANDLE_START);
     startHandle.setAttribute('part', 'handle-start');
+    const startHandleFocusIndicator = document.createElement('forge-focus-indicator');
+    startHandleFocusIndicator.target = 'start';
+    startHandle.appendChild(startHandleFocusIndicator);
     const startHandleThumb = document.createElement('div');
     startHandleThumb.classList.add(SLIDER_CONSTANTS.classes.HANDLE_THUMB);
     startHandleThumb.setAttribute('part', 'handle-start-thumb');

package/esm/slider/slider.d.ts

@@ -127,7 +127,6 @@ declare global {
  * @csspart handle-start-thumb - Styles the start handle thumb element.
  * @csspart handle-start-label - Styles the start handle label element.
  * @csspart handle-start-label-content - Styles the start handle label content element.
- *
  */
 export declare class SliderComponent extends BaseComponent implements ISliderComponent {
     static get observedAttributes(): string[];

package/esm/slider/slider.js

@@ -6,11 +6,12 @@
 import { __decorate } from "tslib";
 import { attachShadowTemplate, coerceBoolean, coerceNumber, CustomElement, FoundationProperty, toggleAttribute } from '@tylertech/forge-core';
 import { BaseComponent } from '../core/base/base-component';
+import { FocusIndicatorComponent } from '../focus-indicator/focus-indicator';
 import { SliderAdapter } from './slider-adapter';
 import { SLIDER_CONSTANTS } from './slider-constants';
 import { SliderFoundation } from './slider-foundation';
-const template = '<template><div part=\"root\" class=\"forge-slider\"><input type=\"range\" class=\"end\" id=\"end\" min=\"0\" max=\"100\" step=\"1\" aria-valuetext=\"0\"><div class=\"track\" part=\"track\"></div><div class=\"handle-container-padded\"><div class=\"handle-container-block\"><div class=\"handle-container\"><div class=\"handle end\" part=\"handle-end\"><div class=\"handle-thumb\" part=\"handle-end-thumb\"></div><span class=\"handle-ripple\"></span><div class=\"handle-label\" part=\"handle-end-label\"><span class=\"handle-label-content\" part=\"handle-end-label-content\"></span></div></div></div></div></div></div></template>';
-const styles = ':host{display:-webkit-inline-box;display:inline-flex;vertical-align:middle;min-inline-size:100%}:host([hidden]){display:none}@-webkit-keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@-webkit-keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@-webkit-keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}@keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.forge-slider{--_start-fraction:0;--_end-fraction:0;--_tick-count:100;--_track-height:var(--forge-slider-track-height, 4px);--_active-track-color:var(--forge-slider-active-track-color, var(--mdc-theme-primary, #3f51b5));--_active-track-height:var(--forge-slider-active-track-height, var(--_track-height));--_active-track-shape:var(--forge-slider-active-track-shape, 9999px);--_disabled-active-track-color:var(--forge-slider-disabled-active-track-color, #9e9e9e);--_disabled-active-track-opacity:var(--forge-slider-disabled-active-track-opacity, 0.38);--_disabled-handle-color:var(--forge-slider-disabled-handle-color, #9e9e9e);--_disabled-inactive-track-color:var(--forge-slider-disabled-inactive-track-color, #9e9e9e);--_disabled-inactive-track-opacity:var(--forge-slider-disabled-inactive-track-opacity, 0.12);--_focus-handle-color:var(--forge-slider-focus-handle-color, var(--mdc-theme-primary, #3f51b5));--_handle-color:var(--forge-slider-handle-color, var(--mdc-theme-primary, #3f51b5));--_handle-height:var(--forge-slider-handle-height, 20px);--_handle-shape:var(--forge-slider-handle-shape, 9999px);--_handle-width:var(--forge-slider-handle-width, 20px);--_hover-handle-color:var(--forge-slider-hover-handle-color, var(--mdc-theme-primary, #3f51b5));--_inactive-track-color-fallback:var(--forge-slider-inactive-track-color, #d5d8ee);--_inactive-track-color:var(--forge-slider-inactive-track-color, color-mix(in srgb, var(--mdc-theme-primary, #3f51b5) 24%, transparent));--_inactive-track-height:var(--forge-slider-inactive-track-height, var(--_track-height));--_inactive-track-shape:var(--forge-slider-inactive-track-shape, 9999px);--_label-container-color:var(--forge-slider-label-container-color, var(--mdc-theme-primary, #3f51b5));--_label-container-height:var(--forge-slider-label-container-height, 28px);--_label-label-text-color:var(--forge-slider-label-label-text-color, var(--mdc-theme-on-primary, #ffffff));--_pressed-handle-color:var(--forge-slider-pressed-handle-color, var(--mdc-theme-primary, #3f51b5));--_state-layer-size:var(--forge-slider-state-layer-size, 40px);--_with-overlap-handle-outline-color:var(--forge-slider-with-overlap-handle-outline-color, var(--mdc-theme-on-primary, #ffffff));--_with-overlap-handle-outline-width:var(--forge-slider-with-overlap-handle-outline-width, 1px);--_with-tick-marks-active-container-color:var(--forge-slider-with-tick-marks-active-container-color, var(--mdc-theme-on-primary, #ffffff));--_with-tick-marks-container-size:var(--forge-slider-with-tick-marks-container-size, 2px);--_with-tick-marks-disabled-active-container-color:var(--forge-slider-with-tick-marks-disabled-active-container-color, var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87)));--_with-tick-marks-disabled-inactive-container-color:var(--forge-slider-with-tick-marks-disabled-inactive-container-color, color-mix(in srgb, var(--mdc-theme-on-primary, #ffffff) 50%, transparent));--_with-tick-marks-inactive-container-color:var(--forge-slider-with-tick-marks-inactive-container-color, var(--mdc-theme-primary, #3f51b5));-webkit-box-flex:1;flex:1;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;position:relative;block-size:var(--_state-layer-size);pointer-events:none;touch-action:none}.forge-slider.range :host-context([dir=rtl]) input.start{-webkit-clip-path:inset(0 0 0 calc(100% - (var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2))));clip-path:inset(0 0 0 calc(100% - (var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2))))}.forge-slider.range :host([dir=rtl]) input.start{-webkit-clip-path:inset(0 0 0 calc(100% - (var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2))));clip-path:inset(0 0 0 calc(100% - (var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2))))}.forge-slider.range input.start:dir(rtl){-webkit-clip-path:inset(0 0 0 calc(100% - (var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2))));clip-path:inset(0 0 0 calc(100% - (var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2))))}.forge-slider.range input.start{-webkit-clip-path:inset(0 calc(100% - (var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2))) 0 0);clip-path:inset(0 calc(100% - (var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2))) 0 0)}.forge-slider.range input.end{-webkit-clip-path:inset(0 0 0 calc(var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2)));clip-path:inset(0 0 0 calc(var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2)))}.forge-slider.range :host-context([dir=rtl]) input.end{-webkit-clip-path:inset(0 calc(var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2)) 0 0);clip-path:inset(0 calc(var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2)) 0 0)}.forge-slider.range :host([dir=rtl]) input.end{-webkit-clip-path:inset(0 calc(var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2)) 0 0);clip-path:inset(0 calc(var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2)) 0 0)}.forge-slider.range input.end:dir(rtl){-webkit-clip-path:inset(0 calc(var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2)) 0 0);clip-path:inset(0 calc(var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2)) 0 0)}.track{position:absolute;inset:0;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}.track::after,.track::before{content:\"\";position:absolute;inset-inline-start:calc(var(--_state-layer-size)/ 2 - var(--_with-tick-marks-container-size));inset-inline-end:calc(var(--_state-layer-size)/ 2 - var(--_with-tick-marks-container-size));background-size:calc((100% - var(--_with-tick-marks-container-size) * 2)/ var(--_tick-count)) 100%}.track::before{block-size:var(--_inactive-track-height);border-radius:var(--_inactive-track-shape);background-color:var(--_inactive-track-color-fallback)}@supports (background-color:color-mix(in srgb,red 50%,transparent)){.track::before{background-color:var(--_inactive-track-color)}}.track::after{block-size:var(--_active-track-height);border-radius:var(--_active-track-shape);-webkit-clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))) 0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)));clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))) 0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)));background-color:var(--_active-track-color)}.track.tickmarks::before{background-image:radial-gradient(circle at var(--_with-tick-marks-container-size) center,var(--_with-tick-marks-inactive-container-color) 0,var(--_with-tick-marks-inactive-container-color) calc(var(--_with-tick-marks-container-size)/ 2),transparent calc(var(--_with-tick-marks-container-size)/ 2))}.track.tickmarks::after{background-image:radial-gradient(circle at var(--_with-tick-marks-container-size) center,var(--_with-tick-marks-active-container-color) 0,var(--_with-tick-marks-active-container-color) calc(var(--_with-tick-marks-container-size)/ 2),transparent calc(var(--_with-tick-marks-container-size)/ 2))}.handle-container-block,.handle-container-padded{position:relative;block-size:100%;inline-size:100%}.handle-container-padded{padding-inline:calc(var(--_state-layer-size)/ 2)}.handle-container{position:absolute;inset-block-start:0;inset-block-end:0;inset-inline-start:calc(100% * var(--_start-fraction));inline-size:calc(100% * (var(--_end-fraction) - var(--_start-fraction)))}.handle{position:absolute;block-size:var(--_state-layer-size);inline-size:var(--_state-layer-size);border-radius:var(--_handle-shape);display:grid;place-items:center}.handle.start{inset-inline-start:calc(0px - var(--_state-layer-size)/ 2)}.handle.end{inset-inline-end:calc(0px - var(--_state-layer-size)/ 2)}.handle-thumb{position:absolute;height:var(--_handle-height);width:var(--_handle-width);border-radius:var(--_handle-shape);background:var(--_handle-color);-webkit-box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12)}.handle-label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size, .75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);position:absolute;-webkit-box-sizing:border-box;box-sizing:border-box;display:grid;padding:4px;place-items:center;border-radius:9999px;color:var(--_label-label-text-color);font-weight:500;white-space:nowrap;inset-block-end:100%;min-inline-size:var(--_label-container-height);min-block-size:var(--_label-container-height);background:var(--_label-container-color);-webkit-transition:-webkit-transform .1s cubic-bezier(.2, 0, 0, 1);transition:-webkit-transform .1s cubic-bezier(.2, 0, 0, 1);transition:transform .1s cubic-bezier(.2, 0, 0, 1);transition:transform .1s cubic-bezier(.2, 0, 0, 1),-webkit-transform .1s cubic-bezier(.2, 0, 0, 1);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-transform:scale(0);transform:scale(0)}.handle-label::after,.handle-label::before{content:\"\";position:absolute;display:block;background:inherit}.handle-label::before{inline-size:calc(var(--_label-container-height)/ 2);block-size:calc(var(--_label-container-height)/ 2);bottom:calc(var(--_label-container-height)/ -10);-webkit-transform:rotate(45deg);transform:rotate(45deg)}.handle-label::after{inset:0;border-radius:inherit}.handle-label-content{z-index:1}.handle-ripple{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:transparent;will-change:transform,opacity;-webkit-box-sizing:content-box;box-sizing:content-box;width:100%;height:100%}.handle-ripple::after,.handle-ripple::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.handle-ripple::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.handle-ripple::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.handle-ripple.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.handle-ripple.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.handle-ripple.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.handle-ripple.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.handle-ripple.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.handle-ripple::after,.handle-ripple::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.handle-ripple.mdc-ripple-upgraded::after,.handle-ripple.mdc-ripple-upgraded::before{top:var(--mdc-ripple-top,calc(50% - 50%));left:var(--mdc-ripple-left,calc(50% - 50%));width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.handle-ripple.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.handle-ripple::after,.handle-ripple::before{background-color:#3f51b5;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#3f51b5))}.handle-ripple.mdc-ripple-surface--hover::before,.handle-ripple:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.handle-ripple.mdc-ripple-upgraded--background-focused::before,.handle-ripple:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.handle-ripple:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.handle-ripple:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.handle-ripple.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.handle-container.hover .handle-thumb{background:var(--_hover-handle-color)}:host(:not([disabled])) input.end:active~.handle-container-padded .handle.end>.handle-thumb,:host(:not([disabled])) input.start:active~.handle-container-padded .handle.start>.handle-thumb{background:var(--_pressed-handle-color)}:host([disabled]) .handle-thumb{background:var(--_disabled-handle-color);-webkit-box-shadow:0 0 0 0 rgba(0,0,0,.2),0 0 0 0 rgba(0,0,0,.14),0 0 0 0 rgba(0,0,0,.12);box-shadow:0 0 0 0 rgba(0,0,0,.2),0 0 0 0 rgba(0,0,0,.14),0 0 0 0 rgba(0,0,0,.12)}:host([disabled]) .handle-label{background:var(--_disabled-handle-color)}:host([disabled]) .track::before{opacity:calc(1 / var(--_disabled-active-track-opacity) * var(--_disabled-inactive-track-opacity));background-color:var(--_disabled-inactive-track-color)}:host([disabled]) .track::after{background-color:var(--_disabled-active-track-color)}:host([disabled]) .track.tickmarks::before{background-image:radial-gradient(circle at var(--_with-tick-marks-container-size) center,var(--_with-tick-marks-disabled-active-container-color) 0,var(--_with-tick-marks-disabled-active-container-color) calc(var(--_with-tick-marks-container-size)/ 2),transparent calc(var(--_with-tick-marks-container-size)/ 2))}:host([disabled]) .track.tickmarks::after{background-image:radial-gradient(circle at var(--_with-tick-marks-container-size) center,var(--_with-tick-marks-disabled-inactive-container-color) 0,var(--_with-tick-marks-disabled-inactive-container-color) calc(var(--_with-tick-marks-container-size)/ 2),transparent calc(var(--_with-tick-marks-container-size)/ 2))}:host([disabled]) input[type=range]{cursor:not-allowed}:host-context([dir=rtl]) .track::after{-webkit-clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))));clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))))}:host([dir=rtl]) .track::after{-webkit-clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))));clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))))}.track:dir(rtl)::after{-webkit-clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))));clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))))}input.end:focus~.handle-container-padded .handle.end>.handle-thumb,input.start:focus~.handle-container-padded .handle.start>.handle-thumb{background:var(--_focus-handle-color)}.on-top.overlapping .handle-label,.on-top.overlapping .handle-label::before,.on-top.overlapping .handle-thumb{border:var(--_with-overlap-handle-outline-color) solid var(--_with-overlap-handle-outline-width)}.handle-container.hover .handle-label,:host(:focus-within) .handle-label,:where(:has(input:active)) .handle-label{-webkit-transform:scale(1);transform:scale(1)}input[type=range]{opacity:0;-webkit-tap-highlight-color:transparent;position:absolute;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;width:100%;margin:0;background:0 0;cursor:pointer;pointer-events:auto;-webkit-appearance:none;-moz-appearance:none;appearance:none}input[type=range]:focus{outline:0}input[type=range]::-webkit-slider-runnable-track{-webkit-appearance:none}input[type=range]::-moz-range-track{-moz-appearance:none;appearance:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;block-size:var(--_state-layer-size);inline-size:var(--_state-layer-size);-webkit-transform:scaleX(0);transform:scaleX(0);opacity:0;z-index:2}input[type=range]::-moz-range-thumb{-moz-appearance:none;appearance:none;block-size:var(--_state-layer-size);inline-size:var(--_state-layer-size);transform:scaleX(0);opacity:0;z-index:2}.on-top{z-index:1}@media (prefers-reduced-motion){.handle-label{-webkit-transition-duration:0;transition-duration:0}}';
+const template = '<template><div part=\"root\" class=\"forge-slider\"><input type=\"range\" class=\"end\" id=\"end\" min=\"0\" max=\"100\" step=\"1\" aria-valuetext=\"0\"><div class=\"track\" part=\"track\"></div><div class=\"handle-container-padded\"><div class=\"handle-container-block\"><div class=\"handle-container\"><div class=\"handle end\" part=\"handle-end\"><forge-focus-indicator target=\"end\"></forge-focus-indicator><div class=\"handle-thumb\" part=\"handle-end-thumb\"></div><span class=\"handle-ripple\"></span><div class=\"handle-label\" part=\"handle-end-label\"><span class=\"handle-label-content\" part=\"handle-end-label-content\"></span></div></div></div></div></div></div></template>';
+const styles = ':host{display:-webkit-inline-box;display:inline-flex;vertical-align:middle;min-inline-size:100%}:host([hidden]){display:none}@-webkit-keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@-webkit-keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@-webkit-keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}@keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.forge-slider{--_start-fraction:0;--_end-fraction:0;--_tick-count:100;--_track-height:var(--forge-slider-track-height, 4px);--_active-track-color:var(--forge-slider-active-track-color, var(--mdc-theme-primary, #3f51b5));--_active-track-height:var(--forge-slider-active-track-height, var(--_track-height));--_active-track-shape:var(--forge-slider-active-track-shape, 9999px);--_disabled-active-track-color:var(--forge-slider-disabled-active-track-color, #9e9e9e);--_disabled-active-track-opacity:var(--forge-slider-disabled-active-track-opacity, 0.38);--_disabled-handle-color:var(--forge-slider-disabled-handle-color, #9e9e9e);--_disabled-inactive-track-color:var(--forge-slider-disabled-inactive-track-color, #9e9e9e);--_disabled-inactive-track-opacity:var(--forge-slider-disabled-inactive-track-opacity, 0.12);--_focus-handle-color:var(--forge-slider-focus-handle-color, var(--mdc-theme-primary, #3f51b5));--_handle-color:var(--forge-slider-handle-color, var(--mdc-theme-primary, #3f51b5));--_handle-height:var(--forge-slider-handle-height, 20px);--_handle-shape:var(--forge-slider-handle-shape, 9999px);--_handle-width:var(--forge-slider-handle-width, 20px);--_hover-handle-color:var(--forge-slider-hover-handle-color, var(--mdc-theme-primary, #3f51b5));--_inactive-track-color-fallback:var(--forge-slider-inactive-track-color, #d5d8ee);--_inactive-track-color:var(--forge-slider-inactive-track-color, color-mix(in srgb, var(--mdc-theme-primary, #3f51b5) 24%, transparent));--_inactive-track-height:var(--forge-slider-inactive-track-height, var(--_track-height));--_inactive-track-shape:var(--forge-slider-inactive-track-shape, 9999px);--_label-container-color:var(--forge-slider-label-container-color, var(--mdc-theme-primary, #3f51b5));--_label-container-height:var(--forge-slider-label-container-height, 28px);--_label-label-text-color:var(--forge-slider-label-label-text-color, var(--mdc-theme-on-primary, #ffffff));--_pressed-handle-color:var(--forge-slider-pressed-handle-color, var(--mdc-theme-primary, #3f51b5));--_state-layer-size:var(--forge-slider-state-layer-size, 40px);--_with-overlap-handle-outline-color:var(--forge-slider-with-overlap-handle-outline-color, var(--mdc-theme-on-primary, #ffffff));--_with-overlap-handle-outline-width:var(--forge-slider-with-overlap-handle-outline-width, 1px);--_with-tick-marks-active-container-color:var(--forge-slider-with-tick-marks-active-container-color, var(--mdc-theme-on-primary, #ffffff));--_with-tick-marks-container-size:var(--forge-slider-with-tick-marks-container-size, 2px);--_with-tick-marks-disabled-active-container-color:var(--forge-slider-with-tick-marks-disabled-active-container-color, var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87)));--_with-tick-marks-disabled-inactive-container-color:var(--forge-slider-with-tick-marks-disabled-inactive-container-color, color-mix(in srgb, var(--mdc-theme-on-primary, #ffffff) 50%, transparent));--_with-tick-marks-inactive-container-color:var(--forge-slider-with-tick-marks-inactive-container-color, var(--mdc-theme-primary, #3f51b5));-webkit-box-flex:1;flex:1;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;position:relative;block-size:var(--_state-layer-size);pointer-events:none;touch-action:none}.forge-slider.range :host-context([dir=rtl]) input.start{-webkit-clip-path:inset(0 0 0 calc(100% - (var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2))));clip-path:inset(0 0 0 calc(100% - (var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2))))}.forge-slider.range :host([dir=rtl]) input.start{-webkit-clip-path:inset(0 0 0 calc(100% - (var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2))));clip-path:inset(0 0 0 calc(100% - (var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2))))}.forge-slider.range input.start:dir(rtl){-webkit-clip-path:inset(0 0 0 calc(100% - (var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2))));clip-path:inset(0 0 0 calc(100% - (var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2))))}.forge-slider.range input.start{-webkit-clip-path:inset(0 calc(100% - (var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2))) 0 0);clip-path:inset(0 calc(100% - (var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2))) 0 0)}.forge-slider.range input.end{-webkit-clip-path:inset(0 0 0 calc(var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2)));clip-path:inset(0 0 0 calc(var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2)))}.forge-slider.range :host-context([dir=rtl]) input.end{-webkit-clip-path:inset(0 calc(var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2)) 0 0);clip-path:inset(0 calc(var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2)) 0 0)}.forge-slider.range :host([dir=rtl]) input.end{-webkit-clip-path:inset(0 calc(var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2)) 0 0);clip-path:inset(0 calc(var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2)) 0 0)}.forge-slider.range input.end:dir(rtl){-webkit-clip-path:inset(0 calc(var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2)) 0 0);clip-path:inset(0 calc(var(--_state-layer-size)/ 2 + (100% - var(--_state-layer-size)) * (var(--_start-fraction) + (var(--_end-fraction) - var(--_start-fraction))/ 2)) 0 0)}.track{position:absolute;inset:0;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}.track::after,.track::before{content:\"\";position:absolute;inset-inline-start:calc(var(--_state-layer-size)/ 2 - var(--_with-tick-marks-container-size));inset-inline-end:calc(var(--_state-layer-size)/ 2 - var(--_with-tick-marks-container-size));background-size:calc((100% - var(--_with-tick-marks-container-size) * 2)/ var(--_tick-count)) 100%}.track::before{block-size:var(--_inactive-track-height);border-radius:var(--_inactive-track-shape);background-color:var(--_inactive-track-color-fallback)}@supports (background-color:color-mix(in srgb,red 50%,transparent)){.track::before{background-color:var(--_inactive-track-color)}}.track::after{block-size:var(--_active-track-height);border-radius:var(--_active-track-shape);-webkit-clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))) 0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)));clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))) 0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)));background-color:var(--_active-track-color)}.track.tickmarks::before{background-image:radial-gradient(circle at var(--_with-tick-marks-container-size) center,var(--_with-tick-marks-inactive-container-color) 0,var(--_with-tick-marks-inactive-container-color) calc(var(--_with-tick-marks-container-size)/ 2),transparent calc(var(--_with-tick-marks-container-size)/ 2))}.track.tickmarks::after{background-image:radial-gradient(circle at var(--_with-tick-marks-container-size) center,var(--_with-tick-marks-active-container-color) 0,var(--_with-tick-marks-active-container-color) calc(var(--_with-tick-marks-container-size)/ 2),transparent calc(var(--_with-tick-marks-container-size)/ 2))}.handle-container-block,.handle-container-padded{position:relative;block-size:100%;inline-size:100%}.handle-container-padded{padding-inline:calc(var(--_state-layer-size)/ 2)}.handle-container{position:absolute;inset-block-start:0;inset-block-end:0;inset-inline-start:calc(100% * var(--_start-fraction));inline-size:calc(100% * (var(--_end-fraction) - var(--_start-fraction)))}.handle{position:absolute;block-size:var(--_state-layer-size);inline-size:var(--_state-layer-size);border-radius:var(--_handle-shape);display:grid;place-items:center}.handle.start{inset-inline-start:calc(0px - var(--_state-layer-size)/ 2)}.handle.end{inset-inline-end:calc(0px - var(--_state-layer-size)/ 2)}.handle-thumb{position:absolute;height:var(--_handle-height);width:var(--_handle-width);border-radius:var(--_handle-shape);background:var(--_handle-color);-webkit-box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12)}.handle-label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size, .75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height, 1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing, .0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);position:absolute;-webkit-box-sizing:border-box;box-sizing:border-box;display:grid;padding:4px;place-items:center;border-radius:9999px;color:var(--_label-label-text-color);font-weight:500;white-space:nowrap;inset-block-end:100%;min-inline-size:var(--_label-container-height);min-block-size:var(--_label-container-height);background:var(--_label-container-color);-webkit-transition:-webkit-transform .1s cubic-bezier(.2, 0, 0, 1);transition:-webkit-transform .1s cubic-bezier(.2, 0, 0, 1);transition:transform .1s cubic-bezier(.2, 0, 0, 1);transition:transform .1s cubic-bezier(.2, 0, 0, 1),-webkit-transform .1s cubic-bezier(.2, 0, 0, 1);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-transform:scale(0);transform:scale(0)}.handle-label::after,.handle-label::before{content:\"\";position:absolute;display:block;background:inherit}.handle-label::before{inline-size:calc(var(--_label-container-height)/ 2);block-size:calc(var(--_label-container-height)/ 2);bottom:calc(var(--_label-container-height)/ -10);-webkit-transform:rotate(45deg);transform:rotate(45deg)}.handle-label::after{inset:0;border-radius:inherit}.handle-label-content{z-index:1}.handle-ripple{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:transparent;will-change:transform,opacity;-webkit-box-sizing:content-box;box-sizing:content-box;width:100%;height:100%}.handle-ripple::after,.handle-ripple::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.handle-ripple::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.handle-ripple::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.handle-ripple.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.handle-ripple.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.handle-ripple.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.handle-ripple.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.handle-ripple.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.handle-ripple::after,.handle-ripple::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.handle-ripple.mdc-ripple-upgraded::after,.handle-ripple.mdc-ripple-upgraded::before{top:var(--mdc-ripple-top,calc(50% - 50%));left:var(--mdc-ripple-left,calc(50% - 50%));width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.handle-ripple.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.handle-ripple::after,.handle-ripple::before{background-color:#3f51b5;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#3f51b5))}.handle-ripple.mdc-ripple-surface--hover::before,.handle-ripple:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.handle-ripple.mdc-ripple-upgraded--background-focused::before,.handle-ripple:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.handle-ripple:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.handle-ripple:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.handle-ripple.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.handle-container.hover .handle-thumb{background:var(--_hover-handle-color)}:host(:not([disabled])) input.end:active~.handle-container-padded .handle.end>.handle-thumb,:host(:not([disabled])) input.start:active~.handle-container-padded .handle.start>.handle-thumb{background:var(--_pressed-handle-color)}:host([disabled]) .handle-thumb{background:var(--_disabled-handle-color);-webkit-box-shadow:0 0 0 0 rgba(0,0,0,.2),0 0 0 0 rgba(0,0,0,.14),0 0 0 0 rgba(0,0,0,.12);box-shadow:0 0 0 0 rgba(0,0,0,.2),0 0 0 0 rgba(0,0,0,.14),0 0 0 0 rgba(0,0,0,.12)}:host([disabled]) .handle-label{background:var(--_disabled-handle-color)}:host([disabled]) .track::before{opacity:calc(1 / var(--_disabled-active-track-opacity) * var(--_disabled-inactive-track-opacity));background-color:var(--_disabled-inactive-track-color)}:host([disabled]) .track::after{background-color:var(--_disabled-active-track-color)}:host([disabled]) .track.tickmarks::before{background-image:radial-gradient(circle at var(--_with-tick-marks-container-size) center,var(--_with-tick-marks-disabled-active-container-color) 0,var(--_with-tick-marks-disabled-active-container-color) calc(var(--_with-tick-marks-container-size)/ 2),transparent calc(var(--_with-tick-marks-container-size)/ 2))}:host([disabled]) .track.tickmarks::after{background-image:radial-gradient(circle at var(--_with-tick-marks-container-size) center,var(--_with-tick-marks-disabled-inactive-container-color) 0,var(--_with-tick-marks-disabled-inactive-container-color) calc(var(--_with-tick-marks-container-size)/ 2),transparent calc(var(--_with-tick-marks-container-size)/ 2))}:host([disabled]) input[type=range]{cursor:not-allowed}:host-context([dir=rtl]) .track::after{-webkit-clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))));clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))))}:host([dir=rtl]) .track::after{-webkit-clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))));clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))))}.track:dir(rtl)::after{-webkit-clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))));clip-path:inset(0 calc(var(--_with-tick-marks-container-size) * min(var(--_start-fraction) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * var(--_start-fraction)) 0 calc(var(--_with-tick-marks-container-size) * min((1 - var(--_end-fraction)) * 1000000000,1) + (100% - var(--_with-tick-marks-container-size) * 2) * (1 - var(--_end-fraction))))}input.end:focus~.handle-container-padded .handle.end>.handle-thumb,input.start:focus~.handle-container-padded .handle.start>.handle-thumb{background:var(--_focus-handle-color)}.on-top.overlapping .handle-label,.on-top.overlapping .handle-label::before,.on-top.overlapping .handle-thumb{border:var(--_with-overlap-handle-outline-color) solid var(--_with-overlap-handle-outline-width)}.handle-container.hover .handle-label,:host(:focus-within) .handle-label,:where(:has(input:active)) .handle-label{-webkit-transform:scale(1);transform:scale(1)}input[type=range]{opacity:0;-webkit-tap-highlight-color:transparent;position:absolute;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;width:100%;margin:0;background:0 0;cursor:pointer;pointer-events:auto;-webkit-appearance:none;-moz-appearance:none;appearance:none}input[type=range]:focus{outline:0}input[type=range]::-webkit-slider-runnable-track{-webkit-appearance:none}input[type=range]::-moz-range-track{-moz-appearance:none;appearance:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;block-size:var(--_state-layer-size);inline-size:var(--_state-layer-size);-webkit-transform:scaleX(0);transform:scaleX(0);opacity:0;z-index:2}input[type=range]::-moz-range-thumb{-moz-appearance:none;appearance:none;block-size:var(--_state-layer-size);inline-size:var(--_state-layer-size);transform:scaleX(0);opacity:0;z-index:2}.on-top{z-index:1}@media (prefers-reduced-motion){.handle-label{-webkit-transition-duration:0;transition-duration:0}}forge-focus-indicator{--forge-focus-indicator-shape:50%;--forge-focus-indicator-outward-offset:0px}';
 /**
  * @tag forge-slider
  *
@@ -101,7 +102,6 @@ const styles = ':host{display:-webkit-inline-box;display:inline-flex;vertical-al
  * @csspart handle-start-thumb - Styles the start handle thumb element.
  * @csspart handle-start-label - Styles the start handle label element.
  * @csspart handle-start-label-content - Styles the start handle label content element.
- *
  */
 let SliderComponent = class SliderComponent extends BaseComponent {
     static get observedAttributes() {
@@ -291,7 +291,10 @@ __decorate([
 ], SliderComponent.prototype, "readonly", void 0);
 SliderComponent = __decorate([
     CustomElement({
-        name: SLIDER_CONSTANTS.elementName
+        name: SLIDER_CONSTANTS.elementName,
+        dependencies: [
+            FocusIndicatorComponent
+        ]
     })
 ], SliderComponent);
 export { SliderComponent };