@francofantomius/material-components 1.0.2 → 1.1.1

package/dist/chunks/side-sheet-S2w081AK.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-sheet-S2w081AK.js","names":[],"sources":["../../src/components/side-sheet/side-sheet.css.ts","../../src/components/side-sheet/side-sheet.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const sideSheetStyles = css`\n  :host {\n    display: contents;\n    font-family: var(--md-sys-typescale-font-family, inherit);\n  }\n\n  /* Scrim for modal variant */\n  .scrim {\n    position: fixed;\n    inset: 0;\n    background-color: var(--md-side-sheet-scrim-color, var(--md-sys-color-scrim, rgba(0, 0, 0, 0.32)));\n    backdrop-filter: blur(1px);\n    opacity: 0;\n    visibility: hidden;\n    pointer-events: none;\n    transition: opacity 250ms cubic-bezier(0.2, 0, 0, 1),\n                visibility 250ms cubic-bezier(0.2, 0, 0, 1);\n    z-index: 999;\n  }\n\n  :host([open][modal]) .scrim,\n  :host([open][type=\"modal\"]) .scrim {\n    opacity: 1;\n    visibility: visible;\n    pointer-events: auto;\n  }\n\n  /* Side Sheet Container */\n  .sheet {\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    width: var(--md-side-sheet-width, 400px);\n    max-width: calc(100vw - 56px);\n    background-color: var(--md-side-sheet-container-color, var(--md-sys-color-surface-container-low, #F7F2FA));\n    color: var(--md-side-sheet-on-container-color, var(--md-sys-color-on-surface, #1D1B20));\n    overflow: hidden;\n    z-index: 1000;\n  }\n\n  /* Modal Mode (Overlay with scrim) */\n  :host([type=\"modal\"]) .sheet,\n  :host([modal]) .sheet {\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    left: auto;\n    height: 100dvh;\n    border-radius: var(--md-side-sheet-shape, 16px) 0 0 var(--md-side-sheet-shape, 16px);\n    box-shadow: var(--md-side-sheet-elevation, var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15)));\n    transform: translateX(100%);\n    visibility: hidden;\n    transition: transform 300ms cubic-bezier(0.2, 0, 0, 1),\n                visibility 300ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  :host([open][type=\"modal\"]) .sheet,\n  :host([open][modal]) .sheet {\n    transform: translateX(0);\n    visibility: visible;\n  }\n\n  /* Start / Left placement for Modal */\n  :host([type=\"modal\"][side=\"start\"]) .sheet,\n  :host([modal][side=\"start\"]) .sheet,\n  :host([type=\"modal\"][side=\"left\"]) .sheet,\n  :host([modal][side=\"left\"]) .sheet {\n    left: 0;\n    right: auto;\n    border-radius: 0 var(--md-side-sheet-shape, 16px) var(--md-side-sheet-shape, 16px) 0;\n    transform: translateX(-100%);\n  }\n\n  :host([open][type=\"modal\"][side=\"start\"]) .sheet,\n  :host([open][modal][side=\"start\"]) .sheet,\n  :host([open][type=\"modal\"][side=\"left\"]) .sheet,\n  :host([open][modal][side=\"left\"]) .sheet {\n    transform: translateX(0);\n    visibility: visible;\n  }\n\n  /* Standard Mode (In-flow side panel) */\n  :host(:not([type=\"modal\"]):not([modal])),\n  :host([type=\"standard\"]) {\n    display: block;\n    height: 100%;\n    flex-shrink: 0;\n    box-sizing: border-box;\n    overflow: hidden;\n    transition: width 300ms cubic-bezier(0.2, 0, 0, 1),\n                min-width 300ms cubic-bezier(0.2, 0, 0, 1),\n                max-width 300ms cubic-bezier(0.2, 0, 0, 1),\n                opacity 250ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  :host(:not([type=\"modal\"]):not([modal]):not([open])),\n  :host([type=\"standard\"]:not([open])) {\n    width: 0 !important;\n    min-width: 0 !important;\n    max-width: 0 !important;\n    opacity: 0;\n    pointer-events: none;\n    visibility: hidden;\n  }\n\n  :host(:not([type=\"modal\"]):not([modal])[open]),\n  :host([type=\"standard\"][open]) {\n    width: var(--md-side-sheet-width, 400px);\n    opacity: 1;\n    visibility: visible;\n  }\n\n  :host(:not([type=\"modal\"]):not([modal])) .scrim,\n  :host([type=\"standard\"]) .scrim {\n    display: none;\n  }\n\n  :host(:not([type=\"modal\"]):not([modal])) .sheet,\n  :host([type=\"standard\"]) .sheet {\n    position: relative;\n    height: 100%;\n    width: var(--md-side-sheet-width, 400px);\n    min-width: var(--md-side-sheet-width, 400px);\n    transform: none;\n    visibility: visible;\n    box-shadow: none;\n    background-color: var(--md-side-sheet-container-color, var(--md-sys-color-surface, #FEF7FF));\n    border-left: 1px solid var(--md-side-sheet-divider-color, var(--md-sys-color-outline-variant, #CAC4D0));\n    border-right: none;\n  }\n\n  /* Start placement border (Standard) */\n  :host(:not([type=\"modal\"]):not([modal])[side=\"start\"]) .sheet,\n  :host(:not([type=\"modal\"]):not([modal])[side=\"left\"]) .sheet,\n  :host([type=\"standard\"][side=\"start\"]) .sheet,\n  :host([type=\"standard\"][side=\"left\"]) .sheet {\n    border-right: 1px solid var(--md-side-sheet-divider-color, var(--md-sys-color-outline-variant, #CAC4D0));\n    border-left: none;\n  }\n\n  /* Header Section */\n  .header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 16px 16px 24px;\n    min-height: 56px;\n    box-sizing: border-box;\n    gap: 8px;\n    flex-shrink: 0;\n  }\n\n  .header-content {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    min-width: 0;\n    gap: 2px;\n  }\n\n  .headline {\n    margin: 0;\n    font-size: var(--md-sys-typescale-title-large-size, 20px);\n    line-height: 28px;\n    font-weight: 500;\n    color: var(--md-side-sheet-headline-color, var(--md-sys-color-on-surface, #1D1B20));\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .subhead {\n    margin: 0;\n    font-size: var(--md-sys-typescale-body-medium-size, 14px);\n    line-height: 20px;\n    color: var(--md-side-sheet-subhead-color, var(--md-sys-color-on-surface-variant, #49454F));\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .header-actions {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    flex-shrink: 0;\n  }\n\n  .close-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  /* Divider */\n  .divider {\n    height: 1px;\n    background-color: var(--md-side-sheet-divider-color, var(--md-sys-color-outline-variant, #CAC4D0));\n    width: 100%;\n    flex-shrink: 0;\n  }\n\n  /* Content Section */\n  .content {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    overflow-y: auto;\n    overflow-x: hidden;\n    padding: 16px 24px;\n    box-sizing: border-box;\n    gap: 16px;\n  }\n\n  .content::-webkit-scrollbar {\n    width: 6px;\n  }\n\n  .content::-webkit-scrollbar-thumb {\n    background-color: var(--md-sys-color-outline-variant, #CAC4D0);\n    border-radius: 4px;\n  }\n\n  /* Footer Section */\n  .footer {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    padding: 16px 24px;\n    box-sizing: border-box;\n    gap: 8px;\n    flex-shrink: 0;\n  }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport '../icon/icon.js';\nimport '../icon-button/icon-button.js';\nimport { sideSheetStyles } from './side-sheet.css.js';\n\nexport type SideSheetType = 'standard' | 'modal';\nexport type SideSheetPlacement = 'start' | 'end' | 'left' | 'right';\n\n/**\n * Material Design 3 Side Sheet component.\n *\n * Side sheets display secondary content anchored to the side of the screen,\n * supporting standard (in-flow side panel) and modal (overlay with scrim) modes.\n *\n * @slot - Default slot for main sheet body content.\n * @slot header - Full header area replacement.\n * @slot headline - Custom title / headline content.\n * @slot subhead - Custom subtitle / subhead content.\n * @slot header-actions - Additional actions next to the close button in the header.\n * @slot close-button - Custom close button element.\n * @slot footer - Bottom actions / footer area.\n */\n@customElement('md-side-sheet')\nexport class MdSideSheet extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, sideSheetStyles];\n\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  @property({ type: String, reflect: true })\n  type: SideSheetType = 'standard';\n\n  @property({ type: Boolean, reflect: true })\n  modal = false;\n\n  @property({ type: String, reflect: true })\n  side: SideSheetPlacement = 'end';\n\n  @property({ type: String })\n  headline = '';\n\n  @property({ type: String })\n  subhead = '';\n\n  @property({ type: Boolean, reflect: true, attribute: 'hide-close-button' })\n  hideCloseButton = false;\n\n  @property({ type: Boolean, reflect: true })\n  divider = false;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    window.addEventListener('keydown', this.handleKeyDown);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    window.removeEventListener('keydown', this.handleKeyDown);\n  }\n\n  override updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this.emitEvent('open');\n      } else {\n        this.emitEvent('close');\n      }\n    }\n  }\n\n  /**\n   * Returns whether the side sheet is currently functioning in modal mode.\n   */\n  isModalMode(): boolean {\n    return this.modal || this.type === 'modal';\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Escape' && this.open && this.isModalMode()) {\n      this.close();\n      this.emitEvent('cancel');\n    }\n  };\n\n  private handleScrimClick = () => {\n    this.close();\n    this.emitEvent('scrim-click');\n  };\n\n  private handleCloseClick = () => {\n    this.close();\n    this.emitEvent('close-click');\n  };\n\n  /**\n   * Opens the side sheet.\n   */\n  show() {\n    this.open = true;\n  }\n\n  /**\n   * Closes the side sheet.\n   */\n  close() {\n    this.open = false;\n  }\n\n  /**\n   * Toggles the open/closed state of the side sheet.\n   */\n  toggle() {\n    this.open = !this.open;\n  }\n\n  override render() {\n    const isModal = this.isModalMode();\n\n    const headlineContent = this.headline\n      ? html`<h2 class=\"headline\">${this.headline}</h2>`\n      : nothing;\n\n    const subheadContent = this.subhead\n      ? html`<p class=\"subhead\">${this.subhead}</p>`\n      : nothing;\n\n    const closeBtnContent = !this.hideCloseButton\n      ? html`\n          <slot name=\"close-button\">\n            <md-icon-button\n              class=\"close-button\"\n              icon=\"close\"\n              aria-label=\"Close side sheet\"\n              @click=${this.handleCloseClick}\n            ></md-icon-button>\n          </slot>\n        `\n      : nothing;\n\n    return html`\n      <div class=\"scrim\" @click=${this.handleScrimClick}></div>\n\n      <aside\n        class=\"sheet\"\n        role=${isModal ? 'dialog' : 'complementary'}\n        aria-modal=${isModal ? 'true' : nothing}\n        aria-hidden=${this.open ? 'false' : 'true'}\n        aria-label=${this.headline || 'Side sheet'}\n      >\n        <slot name=\"header\">\n          <div class=\"header\">\n            <div class=\"header-content\">\n              <slot name=\"headline\">\n                ${headlineContent}\n              </slot>\n              <slot name=\"subhead\">\n                ${subheadContent}\n              </slot>\n            </div>\n\n            <div class=\"header-actions\">\n              <slot name=\"header-actions\"></slot>\n              ${closeBtnContent}\n            </div>\n          </div>\n        </slot>\n\n        ${this.divider ? html`<div class=\"divider\"></div>` : nothing}\n\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n\n        <slot name=\"footer\">\n          <div class=\"footer\">\n            <slot name=\"actions\"></slot>\n          </div>\n        </slot>\n      </aside>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-side-sheet': MdSideSheet;\n  }\n}\n"],"mappings":";;;;;AAEA,IAAa,IAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GCuBlB,IA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"}

package/dist/chunks/slider-D-mnO8yQ.js

@@ -0,0 +1,450 @@
+import { t as s } from "./decorate-DXuynaiA.js";
+import { t as m } from "./form-associated-Cty_ZaS9.js";
+import "./ripple-squbKHhj.js";
+import "./focus-ring-CuiJuM-y.js";
+import "./icon-DrNqcNEL.js";
+import { css as b, html as h, nothing as c } from "lit";
+import { customElement as f, property as o, query as p, state as v } from "lit/decorators.js";
+var y = b`
+  :host {
+    display: inline-flex;
+    align-items: center;
+    vertical-align: middle;
+    width: 100%;
+    min-width: 200px;
+    height: 48px;
+    box-sizing: border-box;
+    font-family: var(--md-sys-typescale-font-family, 'Roboto', -apple-system, sans-serif);
+    user-select: none;
+    -webkit-user-select: none;
+    touch-action: pan-y;
+  }
+
+  :host([disabled]) {
+    opacity: 0.38;
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+
+  .container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    gap: 16px;
+  }
+
+  .icon-slot {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--md-sys-color-on-surface-variant, #49454F);
+    font-size: 24px;
+    flex-shrink: 0;
+  }
+
+  .slider-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex: 1;
+    height: 100%;
+    cursor: pointer;
+    touch-action: none;
+  }
+
+  :host([disabled]) .slider-wrapper {
+    cursor: not-allowed;
+  }
+
+  /* Track */
+  .track-container {
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 6px;
+    border-radius: var(--md-sys-shape-corner-full, 9999px);
+    overflow: hidden;
+    background-color: var(--md-sys-color-surface-container-highest, #E6E0E9);
+  }
+
+  .track-active {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    background-color: var(--md-sys-color-primary, #6750A4);
+    border-radius: var(--md-sys-shape-corner-full, 9999px);
+    transition: left 50ms linear, width 50ms linear;
+  }
+
+  :host([disabled]) .track-active {
+    background-color: var(--md-sys-color-on-surface, #1D1B20);
+  }
+
+  :host([disabled]) .track-container {
+    background-color: var(--md-sys-color-on-surface, #1D1B20);
+    opacity: 0.12;
+  }
+
+  /* Tick marks */
+  .tick-marks-container {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    pointer-events: none;
+  }
+
+  .tick-mark {
+    position: absolute;
+    top: 50%;
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    background-color: var(--md-sys-color-on-surface-variant, #49454F);
+    opacity: 0.38;
+  }
+
+  .tick-mark.active {
+    background-color: var(--md-sys-color-on-primary, #FFFFFF);
+    opacity: 0.7;
+  }
+
+  /* Thumbs */
+  .thumb-container {
+    position: absolute;
+    top: 50%;
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    outline: none;
+    z-index: 2;
+    cursor: grab;
+    color: var(--md-sys-color-primary, #6750A4);
+  }
+
+  .thumb-container:active,
+  .thumb-container.dragging {
+    cursor: grabbing;
+    z-index: 3;
+  }
+
+  .thumb-handle {
+    position: relative;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background-color: var(--md-sys-color-primary, #6750A4);
+    transition: transform 150ms cubic-bezier(0.2, 0, 0, 1),
+                background-color 150ms ease,
+                box-shadow 150ms ease;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  }
+
+  :host([disabled]) .thumb-handle {
+    background-color: var(--md-sys-color-on-surface, #1D1B20);
+    box-shadow: none;
+  }
+
+  .thumb-container:hover .thumb-handle,
+  .thumb-container:active .thumb-handle,
+  .thumb-container:focus-visible .thumb-handle,
+  .thumb-container.dragging .thumb-handle {
+    transform: scale(1.3);
+  }
+
+  /* Value indicator label (balloon) */
+  .value-label {
+    position: absolute;
+    bottom: calc(50% + 15px);
+    left: 50%;
+    transform: translateX(-50%) translateY(4px) scale(0.6);
+    transform-origin: bottom center;
+    background-color: var(--md-sys-color-primary, #6750A4);
+    color: var(--md-sys-color-on-primary, #FFFFFF);
+    font-size: 12px;
+    font-weight: 500;
+    padding: 4px 8px;
+    min-width: 28px;
+    height: 28px;
+    box-sizing: border-box;
+    border-radius: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+    opacity: 0;
+    pointer-events: none;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    transition: transform 150ms cubic-bezier(0.2, 0, 0, 1),
+                opacity 150ms ease;
+  }
+
+  .value-label::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-top: 5px solid var(--md-sys-color-primary, #6750A4);
+  }
+
+  .thumb-container:hover .value-label,
+  .thumb-container:focus-visible .value-label,
+  .thumb-container.dragging .value-label,
+  .thumb-container.active-label .value-label {
+    transform: translateX(-50%) translateY(0) scale(1);
+    opacity: 1;
+  }
+`, a = class extends m {
+  constructor(...t) {
+    super(...t), this.min = 0, this.max = 100, this.step = 1, this.value = 50, this.valueStart = 0, this.valueEnd = 100, this.range = !1, this.ticks = !1, this.labeled = !1, this.icon = "", this.leadingIcon = "", this.trailingIcon = "", this.nameStart = "", this.nameEnd = "", this.valueText = "", this.valueStartText = "", this.valueEndText = "", this.activeThumb = null, this.isDragging = !1, this.initialValue = 50, this.initialValueStart = 0, this.initialValueEnd = 100, this.handlePointerDown = (e) => {
+      if (this.disabled) return;
+      e.preventDefault(), this.sliderWrapper.setPointerCapture(e.pointerId), this.isDragging = !0;
+      const i = this.getValueFromPosition(e.clientX);
+      if (this.range) {
+        const n = Math.abs(i - this.valueStart), l = Math.abs(i - this.valueEnd);
+        n < l ? (this.activeThumb = "start", this.valueStart = Math.min(i, this.valueEnd)) : l < n ? (this.activeThumb = "end", this.valueEnd = Math.max(i, this.valueStart)) : i < this.valueStart ? (this.activeThumb = "start", this.valueStart = i) : (this.activeThumb = "end", this.valueEnd = i);
+      } else
+        this.activeThumb = "end", this.value = i;
+      this.clampValues(), this.updateFormValue(), this.dispatchInputEvent();
+    }, this.handlePointerMove = (e) => {
+      if (!this.isDragging || this.disabled) return;
+      const i = this.getValueFromPosition(e.clientX);
+      this.range ? this.activeThumb === "start" ? this.valueStart = Math.min(i, this.valueEnd) : this.activeThumb === "end" && (this.valueEnd = Math.max(i, this.valueStart)) : this.value = i, this.clampValues(), this.updateFormValue(), this.dispatchInputEvent();
+    }, this.handlePointerUp = (e) => {
+      if (this.isDragging) {
+        try {
+          this.sliderWrapper.releasePointerCapture(e.pointerId);
+        } catch {
+        }
+        this.isDragging = !1, this.activeThumb = null, this.dispatchChangeEvent();
+      }
+    }, this.handleKeyDown = (e, i) => {
+      if (this.disabled) return;
+      const n = this.step > 0 ? this.step : 1, l = Math.max(n * 10, (this.max - this.min) / 10);
+      let r = 0;
+      switch (e.key) {
+        case "ArrowLeft":
+        case "ArrowDown":
+          r = -n;
+          break;
+        case "ArrowRight":
+        case "ArrowUp":
+          r = n;
+          break;
+        case "PageDown":
+          r = -l;
+          break;
+        case "PageUp":
+          r = l;
+          break;
+        case "Home":
+          this.range ? i === "start" ? this.valueStart = this.min : this.valueEnd = this.valueStart : this.value = this.min, e.preventDefault(), this.clampValues(), this.updateFormValue(), this.dispatchInputEvent(), this.dispatchChangeEvent();
+          return;
+        case "End":
+          this.range ? i === "end" ? this.valueEnd = this.max : this.valueStart = this.valueEnd : this.value = this.max, e.preventDefault(), this.clampValues(), this.updateFormValue(), this.dispatchInputEvent(), this.dispatchChangeEvent();
+          return;
+        default:
+          return;
+      }
+      e.preventDefault(), this.range ? i === "start" ? this.valueStart = Math.min(Math.max(this.valueStart + r, this.min), this.valueEnd) : this.valueEnd = Math.min(Math.max(this.valueEnd + r, this.valueStart), this.max) : this.value = Math.min(Math.max(this.value + r, this.min), this.max), this.clampValues(), this.updateFormValue(), this.dispatchInputEvent(), this.dispatchChangeEvent();
+    };
+  }
+  static {
+    this.styles = [m.styles, y];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.initialValue = this.value, this.initialValueStart = this.valueStart, this.initialValueEnd = this.valueEnd, this.clampValues(), this.updateFormValue();
+  }
+  updated(t) {
+    super.updated(t), (t.has("value") || t.has("valueStart") || t.has("valueEnd") || t.has("min") || t.has("max") || t.has("step") || t.has("range")) && (this.clampValues(), this.updateFormValue());
+  }
+  formResetCallback() {
+    this.value = this.initialValue, this.valueStart = this.initialValueStart, this.valueEnd = this.initialValueEnd, this.clampValues(), this.updateFormValue();
+  }
+  clampValues() {
+    const t = this.min, e = this.max > t ? this.max : t + 1, i = this.step > 0 ? this.step : 1, n = (l) => {
+      const r = Math.round((l - t) / i), u = t + r * i;
+      return Number(Math.min(Math.max(u, t), e).toFixed(6));
+    };
+    if (this.range) {
+      let l = n(this.valueStart ?? t), r = n(this.valueEnd ?? e);
+      l > r && (l = r), this.valueStart = l, this.valueEnd = r;
+    } else this.value = n(this.value ?? t);
+  }
+  updateFormValue() {
+    if (this.range)
+      if (this.nameStart || this.nameEnd) {
+        const t = new FormData();
+        this.nameStart && t.append(this.nameStart, String(this.valueStart)), this.nameEnd && t.append(this.nameEnd, String(this.valueEnd)), this.setFormValue(t);
+      } else this.setFormValue(`${this.valueStart},${this.valueEnd}`);
+    else this.setFormValue(this.value !== null && this.value !== void 0 ? String(this.value) : null);
+    this.required ? (this.range ? this.valueStart === void 0 || this.valueEnd === void 0 : this.value === void 0 || this.value === null) ? this.setValidity({ valueMissing: !0 }, "Please select a value") : this.setValidity({}) : this.setValidity({});
+  }
+  getPercentage(t) {
+    const e = this.max - this.min;
+    return e <= 0 ? 0 : Math.min(Math.max((t - this.min) / e, 0), 1) * 100;
+  }
+  getValueFromPosition(t) {
+    if (!this.sliderWrapper) return this.min;
+    const e = this.sliderWrapper.getBoundingClientRect();
+    if (e.width <= 0) return this.min;
+    const i = (t - e.left) / e.width, n = Math.min(Math.max(i, 0), 1), l = this.min + n * (this.max - this.min), r = this.step > 0 ? this.step : 1, u = Math.round((l - this.min) / r), d = this.min + u * r;
+    return Number(Math.min(Math.max(d, this.min), this.max).toFixed(6));
+  }
+  dispatchInputEvent() {
+    this.emitEvent("input", {
+      value: this.value,
+      valueStart: this.valueStart,
+      valueEnd: this.valueEnd
+    });
+  }
+  dispatchChangeEvent() {
+    this.emitEvent("change", {
+      value: this.value,
+      valueStart: this.valueStart,
+      valueEnd: this.valueEnd
+    });
+  }
+  renderTicks() {
+    if (!this.ticks) return c;
+    const t = this.step > 0 ? this.step : 1, e = Math.floor((this.max - this.min) / t);
+    if (e <= 0 || e > 200) return c;
+    const i = [], n = this.range ? this.getPercentage(this.valueStart) : 0, l = this.range ? this.getPercentage(this.valueEnd) : this.getPercentage(this.value);
+    for (let r = 0; r <= e; r++) {
+      const u = this.min + r * t, d = this.getPercentage(u), g = d >= n && d <= l;
+      i.push(h`
+        <div
+          class="tick-mark ${g ? "active" : ""}"
+          style="left: ${d}%"
+        ></div>
+      `);
+    }
+    return h`<div class="tick-marks-container">${i}</div>`;
+  }
+  renderThumb(t) {
+    const e = t === "start", i = e ? this.valueStart : this.range ? this.valueEnd : this.value, n = this.getPercentage(i), l = e ? this.valueStartText || String(this.valueStart) : this.range ? this.valueEndText || String(this.valueEnd) : this.valueText || String(this.value), r = this.isDragging && this.activeThumb === t;
+    return h`
+      <div
+        class="thumb-container ${e ? "start-thumb" : "end-thumb"} ${r ? "dragging" : ""} ${this.labeled ? "active-label" : ""}"
+        style="left: ${n}%"
+        tabindex=${this.disabled ? -1 : 0}
+        role="slider"
+        aria-valuemin=${e ? this.min : this.range ? this.valueStart : this.min}
+        aria-valuemax=${e ? this.range ? this.valueEnd : this.max : this.max}
+        aria-valuenow=${i}
+        aria-label=${e ? "Start value" : this.range ? "End value" : "Value"}
+        aria-disabled=${this.disabled ? "true" : "false"}
+        @keydown=${(u) => this.handleKeyDown(u, t)}
+      >
+        <md-ripple ?disabled=${this.disabled} unbounded></md-ripple>
+        <md-focus-ring></md-focus-ring>
+        <div class="thumb-handle"></div>
+        ${this.labeled ? h`<div class="value-label">${l}</div>` : c}
+      </div>
+    `;
+  }
+  render() {
+    const t = this.range ? this.getPercentage(this.valueStart) : 0, e = this.range ? this.getPercentage(this.valueEnd) : this.getPercentage(this.value), i = Math.max(e - t, 0), n = this.leadingIcon || this.icon;
+    return h`
+      <div class="container">
+        ${n ? h`<md-icon class="icon-slot">${n}</md-icon>` : h`<slot name="leading-icon"><slot name="icon"></slot></slot>`}
+
+        <div
+          class="slider-wrapper"
+          @pointerdown=${this.handlePointerDown}
+          @pointermove=${this.handlePointerMove}
+          @pointerup=${this.handlePointerUp}
+          @pointercancel=${this.handlePointerUp}
+        >
+          <div class="track-container">
+            <div
+              class="track-active"
+              style="left: ${t}%; width: ${i}%"
+            ></div>
+            ${this.renderTicks()}
+          </div>
+
+          ${this.range ? this.renderThumb("start") : c}
+          ${this.renderThumb("end")}
+        </div>
+
+        ${this.trailingIcon ? h`<md-icon class="icon-slot">${this.trailingIcon}</md-icon>` : h`<slot name="trailing-icon"></slot>`}
+      </div>
+    `;
+  }
+};
+s([o({ type: Number })], a.prototype, "min", void 0);
+s([o({ type: Number })], a.prototype, "max", void 0);
+s([o({ type: Number })], a.prototype, "step", void 0);
+s([o({ type: Number })], a.prototype, "value", void 0);
+s([o({
+  type: Number,
+  attribute: "value-start"
+})], a.prototype, "valueStart", void 0);
+s([o({
+  type: Number,
+  attribute: "value-end"
+})], a.prototype, "valueEnd", void 0);
+s([o({
+  type: Boolean,
+  reflect: !0
+})], a.prototype, "range", void 0);
+s([o({
+  type: Boolean,
+  reflect: !0
+})], a.prototype, "ticks", void 0);
+s([o({
+  type: Boolean,
+  reflect: !0
+})], a.prototype, "labeled", void 0);
+s([o({ type: String })], a.prototype, "icon", void 0);
+s([o({
+  type: String,
+  attribute: "leading-icon"
+})], a.prototype, "leadingIcon", void 0);
+s([o({
+  type: String,
+  attribute: "trailing-icon"
+})], a.prototype, "trailingIcon", void 0);
+s([o({
+  type: String,
+  attribute: "name-start"
+})], a.prototype, "nameStart", void 0);
+s([o({
+  type: String,
+  attribute: "name-end"
+})], a.prototype, "nameEnd", void 0);
+s([o({
+  type: String,
+  attribute: "value-text"
+})], a.prototype, "valueText", void 0);
+s([o({
+  type: String,
+  attribute: "value-start-text"
+})], a.prototype, "valueStartText", void 0);
+s([o({
+  type: String,
+  attribute: "value-end-text"
+})], a.prototype, "valueEndText", void 0);
+s([p(".slider-wrapper")], a.prototype, "sliderWrapper", void 0);
+s([p(".start-thumb")], a.prototype, "startThumb", void 0);
+s([p(".end-thumb")], a.prototype, "endThumb", void 0);
+s([v()], a.prototype, "activeThumb", void 0);
+s([v()], a.prototype, "isDragging", void 0);
+a = s([f("md-slider")], a);
+export {
+  a as t
+};
+
+//# sourceMappingURL=slider-D-mnO8yQ.js.map

package/dist/chunks/slider-D-mnO8yQ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-D-mnO8yQ.js","names":[],"sources":["../../src/components/slider/slider.css.ts","../../src/components/slider/slider.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const sliderStyles = css`\n  :host {\n    display: inline-flex;\n    align-items: center;\n    vertical-align: middle;\n    width: 100%;\n    min-width: 200px;\n    height: 48px;\n    box-sizing: border-box;\n    font-family: var(--md-sys-typescale-font-family, 'Roboto', -apple-system, sans-serif);\n    user-select: none;\n    -webkit-user-select: none;\n    touch-action: pan-y;\n  }\n\n  :host([disabled]) {\n    opacity: 0.38;\n    pointer-events: none;\n    cursor: not-allowed;\n  }\n\n  .container {\n    position: relative;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    height: 100%;\n    gap: 16px;\n  }\n\n  .icon-slot {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    font-size: 24px;\n    flex-shrink: 0;\n  }\n\n  .slider-wrapper {\n    position: relative;\n    display: flex;\n    align-items: center;\n    flex: 1;\n    height: 100%;\n    cursor: pointer;\n    touch-action: none;\n  }\n\n  :host([disabled]) .slider-wrapper {\n    cursor: not-allowed;\n  }\n\n  /* Track */\n  .track-container {\n    position: absolute;\n    left: 0;\n    right: 0;\n    height: 6px;\n    border-radius: var(--md-sys-shape-corner-full, 9999px);\n    overflow: hidden;\n    background-color: var(--md-sys-color-surface-container-highest, #E6E0E9);\n  }\n\n  .track-active {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    background-color: var(--md-sys-color-primary, #6750A4);\n    border-radius: var(--md-sys-shape-corner-full, 9999px);\n    transition: left 50ms linear, width 50ms linear;\n  }\n\n  :host([disabled]) .track-active {\n    background-color: var(--md-sys-color-on-surface, #1D1B20);\n  }\n\n  :host([disabled]) .track-container {\n    background-color: var(--md-sys-color-on-surface, #1D1B20);\n    opacity: 0.12;\n  }\n\n  /* Tick marks */\n  .tick-marks-container {\n    position: absolute;\n    left: 0;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    pointer-events: none;\n  }\n\n  .tick-mark {\n    position: absolute;\n    top: 50%;\n    width: 4px;\n    height: 4px;\n    border-radius: 50%;\n    transform: translate(-50%, -50%);\n    background-color: var(--md-sys-color-on-surface-variant, #49454F);\n    opacity: 0.38;\n  }\n\n  .tick-mark.active {\n    background-color: var(--md-sys-color-on-primary, #FFFFFF);\n    opacity: 0.7;\n  }\n\n  /* Thumbs */\n  .thumb-container {\n    position: absolute;\n    top: 50%;\n    width: 44px;\n    height: 44px;\n    border-radius: 50%;\n    transform: translate(-50%, -50%);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    outline: none;\n    z-index: 2;\n    cursor: grab;\n    color: var(--md-sys-color-primary, #6750A4);\n  }\n\n  .thumb-container:active,\n  .thumb-container.dragging {\n    cursor: grabbing;\n    z-index: 3;\n  }\n\n  .thumb-handle {\n    position: relative;\n    width: 20px;\n    height: 20px;\n    border-radius: 50%;\n    background-color: var(--md-sys-color-primary, #6750A4);\n    transition: transform 150ms cubic-bezier(0.2, 0, 0, 1),\n                background-color 150ms ease,\n                box-shadow 150ms ease;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n  }\n\n  :host([disabled]) .thumb-handle {\n    background-color: var(--md-sys-color-on-surface, #1D1B20);\n    box-shadow: none;\n  }\n\n  .thumb-container:hover .thumb-handle,\n  .thumb-container:active .thumb-handle,\n  .thumb-container:focus-visible .thumb-handle,\n  .thumb-container.dragging .thumb-handle {\n    transform: scale(1.3);\n  }\n\n  /* Value indicator label (balloon) */\n  .value-label {\n    position: absolute;\n    bottom: calc(50% + 15px);\n    left: 50%;\n    transform: translateX(-50%) translateY(4px) scale(0.6);\n    transform-origin: bottom center;\n    background-color: var(--md-sys-color-primary, #6750A4);\n    color: var(--md-sys-color-on-primary, #FFFFFF);\n    font-size: 12px;\n    font-weight: 500;\n    padding: 4px 8px;\n    min-width: 28px;\n    height: 28px;\n    box-sizing: border-box;\n    border-radius: 14px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    white-space: nowrap;\n    opacity: 0;\n    pointer-events: none;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n    transition: transform 150ms cubic-bezier(0.2, 0, 0, 1),\n                opacity 150ms ease;\n  }\n\n  .value-label::after {\n    content: '';\n    position: absolute;\n    top: 100%;\n    left: 50%;\n    transform: translateX(-50%);\n    border-left: 5px solid transparent;\n    border-right: 5px solid transparent;\n    border-top: 5px solid var(--md-sys-color-primary, #6750A4);\n  }\n\n  .thumb-container:hover .value-label,\n  .thumb-container:focus-visible .value-label,\n  .thumb-container.dragging .value-label,\n  .thumb-container.active-label .value-label {\n    transform: translateX(-50%) translateY(0) scale(1);\n    opacity: 1;\n  }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { MdFormAssociatedElement } from '../../internal/form-associated.js';\nimport '../../internal/ripple/ripple.js';\nimport '../../internal/focus-ring/focus-ring.js';\nimport '../icon/icon.js';\nimport { sliderStyles } from './slider.css.js';\n\n@customElement('md-slider')\nexport class MdSlider extends MdFormAssociatedElement {\n  static override styles = [MdFormAssociatedElement.styles, sliderStyles];\n\n  @property({ type: Number })\n  min = 0;\n\n  @property({ type: Number })\n  max = 100;\n\n  @property({ type: Number })\n  step = 1;\n\n  @property({ type: Number })\n  value = 50;\n\n  @property({ type: Number, attribute: 'value-start' })\n  valueStart = 0;\n\n  @property({ type: Number, attribute: 'value-end' })\n  valueEnd = 100;\n\n  @property({ type: Boolean, reflect: true })\n  range = false;\n\n  @property({ type: Boolean, reflect: true })\n  ticks = false;\n\n  @property({ type: Boolean, reflect: true })\n  labeled = false;\n\n  @property({ type: String })\n  icon = '';\n\n  @property({ type: String, attribute: 'leading-icon' })\n  leadingIcon = '';\n\n  @property({ type: String, attribute: 'trailing-icon' })\n  trailingIcon = '';\n\n  @property({ type: String, attribute: 'name-start' })\n  nameStart = '';\n\n  @property({ type: String, attribute: 'name-end' })\n  nameEnd = '';\n\n  @property({ type: String, attribute: 'value-text' })\n  valueText = '';\n\n  @property({ type: String, attribute: 'value-start-text' })\n  valueStartText = '';\n\n  @property({ type: String, attribute: 'value-end-text' })\n  valueEndText = '';\n\n  @query('.slider-wrapper')\n  private sliderWrapper!: HTMLElement;\n\n  @query('.start-thumb')\n  private startThumb?: HTMLElement;\n\n  @query('.end-thumb')\n  private endThumb?: HTMLElement;\n\n  @state()\n  private activeThumb: 'start' | 'end' | null = null;\n\n  @state()\n  private isDragging = false;\n\n  private initialValue = 50;\n  private initialValueStart = 0;\n  private initialValueEnd = 100;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.initialValue = this.value;\n    this.initialValueStart = this.valueStart;\n    this.initialValueEnd = this.valueEnd;\n    this.clampValues();\n    this.updateFormValue();\n  }\n\n  override updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n    if (\n      changedProperties.has('value') ||\n      changedProperties.has('valueStart') ||\n      changedProperties.has('valueEnd') ||\n      changedProperties.has('min') ||\n      changedProperties.has('max') ||\n      changedProperties.has('step') ||\n      changedProperties.has('range')\n    ) {\n      this.clampValues();\n      this.updateFormValue();\n    }\n  }\n\n  override formResetCallback() {\n    this.value = this.initialValue;\n    this.valueStart = this.initialValueStart;\n    this.valueEnd = this.initialValueEnd;\n    this.clampValues();\n    this.updateFormValue();\n  }\n\n  private clampValues() {\n    const min = this.min;\n    const max = this.max > min ? this.max : min + 1;\n    const step = this.step > 0 ? this.step : 1;\n\n    const roundToStep = (val: number) => {\n      const steps = Math.round((val - min) / step);\n      const rounded = min + steps * step;\n      // Handle floating point inaccuracies\n      return Number(Math.min(Math.max(rounded, min), max).toFixed(6));\n    };\n\n    if (this.range) {\n      let start = roundToStep(this.valueStart ?? min);\n      let end = roundToStep(this.valueEnd ?? max);\n\n      if (start > end) {\n        start = end;\n      }\n      this.valueStart = start;\n      this.valueEnd = end;\n    } else {\n      this.value = roundToStep(this.value ?? min);\n    }\n  }\n\n  private updateFormValue() {\n    if (this.range) {\n      if (this.nameStart || this.nameEnd) {\n        const formData = new FormData();\n        if (this.nameStart) formData.append(this.nameStart, String(this.valueStart));\n        if (this.nameEnd) formData.append(this.nameEnd, String(this.valueEnd));\n        this.setFormValue(formData);\n      } else {\n        this.setFormValue(`${this.valueStart},${this.valueEnd}`);\n      }\n    } else {\n      this.setFormValue(this.value !== null && this.value !== undefined ? String(this.value) : null);\n    }\n\n    if (this.required) {\n      const isMissing = this.range\n        ? this.valueStart === undefined || this.valueEnd === undefined\n        : this.value === undefined || this.value === null;\n      if (isMissing) {\n        this.setValidity({ valueMissing: true }, 'Please select a value');\n      } else {\n        this.setValidity({});\n      }\n    } else {\n      this.setValidity({});\n    }\n  }\n\n  private getPercentage(val: number): number {\n    const range = this.max - this.min;\n    if (range <= 0) return 0;\n    return Math.min(Math.max((val - this.min) / range, 0), 1) * 100;\n  }\n\n  private getValueFromPosition(clientX: number): number {\n    if (!this.sliderWrapper) return this.min;\n    const rect = this.sliderWrapper.getBoundingClientRect();\n    if (rect.width <= 0) return this.min;\n\n    const fraction = (clientX - rect.left) / rect.width;\n    const clampedFraction = Math.min(Math.max(fraction, 0), 1);\n    const rawValue = this.min + clampedFraction * (this.max - this.min);\n\n    const step = this.step > 0 ? this.step : 1;\n    const steps = Math.round((rawValue - this.min) / step);\n    const steppedValue = this.min + steps * step;\n    return Number(Math.min(Math.max(steppedValue, this.min), this.max).toFixed(6));\n  }\n\n  private handlePointerDown = (event: PointerEvent) => {\n    if (this.disabled) return;\n    event.preventDefault();\n    this.sliderWrapper.setPointerCapture(event.pointerId);\n    this.isDragging = true;\n\n    const clickValue = this.getValueFromPosition(event.clientX);\n\n    if (this.range) {\n      const distToStart = Math.abs(clickValue - this.valueStart);\n      const distToEnd = Math.abs(clickValue - this.valueEnd);\n\n      if (distToStart < distToEnd) {\n        this.activeThumb = 'start';\n        this.valueStart = Math.min(clickValue, this.valueEnd);\n      } else if (distToEnd < distToStart) {\n        this.activeThumb = 'end';\n        this.valueEnd = Math.max(clickValue, this.valueStart);\n      } else {\n        // Equal distance - move whichever allows direction of motion\n        if (clickValue < this.valueStart) {\n          this.activeThumb = 'start';\n          this.valueStart = clickValue;\n        } else {\n          this.activeThumb = 'end';\n          this.valueEnd = clickValue;\n        }\n      }\n    } else {\n      this.activeThumb = 'end';\n      this.value = clickValue;\n    }\n\n    this.clampValues();\n    this.updateFormValue();\n    this.dispatchInputEvent();\n  };\n\n  private handlePointerMove = (event: PointerEvent) => {\n    if (!this.isDragging || this.disabled) return;\n    const nextValue = this.getValueFromPosition(event.clientX);\n\n    if (this.range) {\n      if (this.activeThumb === 'start') {\n        this.valueStart = Math.min(nextValue, this.valueEnd);\n      } else if (this.activeThumb === 'end') {\n        this.valueEnd = Math.max(nextValue, this.valueStart);\n      }\n    } else {\n      this.value = nextValue;\n    }\n\n    this.clampValues();\n    this.updateFormValue();\n    this.dispatchInputEvent();\n  };\n\n  private handlePointerUp = (event: PointerEvent) => {\n    if (!this.isDragging) return;\n    try {\n      this.sliderWrapper.releasePointerCapture(event.pointerId);\n    } catch {\n      // Ignore if pointer was not captured\n    }\n    this.isDragging = false;\n    this.activeThumb = null;\n    this.dispatchChangeEvent();\n  };\n\n  private dispatchInputEvent() {\n    this.emitEvent('input', {\n      value: this.value,\n      valueStart: this.valueStart,\n      valueEnd: this.valueEnd,\n    });\n  }\n\n  private dispatchChangeEvent() {\n    this.emitEvent('change', {\n      value: this.value,\n      valueStart: this.valueStart,\n      valueEnd: this.valueEnd,\n    });\n  }\n\n  private handleKeyDown = (event: KeyboardEvent, thumb: 'start' | 'end') => {\n    if (this.disabled) return;\n\n    const step = this.step > 0 ? this.step : 1;\n    const bigStep = Math.max(step * 10, (this.max - this.min) / 10);\n    let delta = 0;\n\n    switch (event.key) {\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        delta = -step;\n        break;\n      case 'ArrowRight':\n      case 'ArrowUp':\n        delta = step;\n        break;\n      case 'PageDown':\n        delta = -bigStep;\n        break;\n      case 'PageUp':\n        delta = bigStep;\n        break;\n      case 'Home':\n        if (this.range) {\n          if (thumb === 'start') this.valueStart = this.min;\n          else this.valueEnd = this.valueStart;\n        } else {\n          this.value = this.min;\n        }\n        event.preventDefault();\n        this.clampValues();\n        this.updateFormValue();\n        this.dispatchInputEvent();\n        this.dispatchChangeEvent();\n        return;\n      case 'End':\n        if (this.range) {\n          if (thumb === 'end') this.valueEnd = this.max;\n          else this.valueStart = this.valueEnd;\n        } else {\n          this.value = this.max;\n        }\n        event.preventDefault();\n        this.clampValues();\n        this.updateFormValue();\n        this.dispatchInputEvent();\n        this.dispatchChangeEvent();\n        return;\n      default:\n        return;\n    }\n\n    event.preventDefault();\n\n    if (this.range) {\n      if (thumb === 'start') {\n        this.valueStart = Math.min(Math.max(this.valueStart + delta, this.min), this.valueEnd);\n      } else {\n        this.valueEnd = Math.min(Math.max(this.valueEnd + delta, this.valueStart), this.max);\n      }\n    } else {\n      this.value = Math.min(Math.max(this.value + delta, this.min), this.max);\n    }\n\n    this.clampValues();\n    this.updateFormValue();\n    this.dispatchInputEvent();\n    this.dispatchChangeEvent();\n  };\n\n  private renderTicks() {\n    if (!this.ticks) return nothing;\n\n    const step = this.step > 0 ? this.step : 1;\n    const count = Math.floor((this.max - this.min) / step);\n    if (count <= 0 || count > 200) return nothing; // Avoid rendering thousands of DOM elements\n\n    const tickElements = [];\n    const startPct = this.range ? this.getPercentage(this.valueStart) : 0;\n    const endPct = this.range ? this.getPercentage(this.valueEnd) : this.getPercentage(this.value);\n\n    for (let i = 0; i <= count; i++) {\n      const val = this.min + i * step;\n      const pct = this.getPercentage(val);\n      const isActive = pct >= startPct && pct <= endPct;\n\n      tickElements.push(html`\n        <div\n          class=\"tick-mark ${isActive ? 'active' : ''}\"\n          style=\"left: ${pct}%\"\n        ></div>\n      `);\n    }\n\n    return html`<div class=\"tick-marks-container\">${tickElements}</div>`;\n  }\n\n  private renderThumb(thumb: 'start' | 'end') {\n    const isStart = thumb === 'start';\n    const val = isStart ? this.valueStart : (this.range ? this.valueEnd : this.value);\n    const pct = this.getPercentage(val);\n    const labelText = isStart\n      ? (this.valueStartText || String(this.valueStart))\n      : (this.range ? (this.valueEndText || String(this.valueEnd)) : (this.valueText || String(this.value)));\n    const isThumbDragging = this.isDragging && this.activeThumb === thumb;\n\n    return html`\n      <div\n        class=\"thumb-container ${isStart ? 'start-thumb' : 'end-thumb'} ${isThumbDragging ? 'dragging' : ''} ${this.labeled ? 'active-label' : ''}\"\n        style=\"left: ${pct}%\"\n        tabindex=${this.disabled ? -1 : 0}\n        role=\"slider\"\n        aria-valuemin=${isStart ? this.min : (this.range ? this.valueStart : this.min)}\n        aria-valuemax=${isStart ? (this.range ? this.valueEnd : this.max) : this.max}\n        aria-valuenow=${val}\n        aria-label=${isStart ? 'Start value' : (this.range ? 'End value' : 'Value')}\n        aria-disabled=${this.disabled ? 'true' : 'false'}\n        @keydown=${(e: KeyboardEvent) => this.handleKeyDown(e, thumb)}\n      >\n        <md-ripple ?disabled=${this.disabled} unbounded></md-ripple>\n        <md-focus-ring></md-focus-ring>\n        <div class=\"thumb-handle\"></div>\n        ${this.labeled\n          ? html`<div class=\"value-label\">${labelText}</div>`\n          : nothing}\n      </div>\n    `;\n  }\n\n  override render() {\n    const startPct = this.range ? this.getPercentage(this.valueStart) : 0;\n    const endPct = this.range ? this.getPercentage(this.valueEnd) : this.getPercentage(this.value);\n    const activeWidth = Math.max(endPct - startPct, 0);\n\n    const leadIcon = this.leadingIcon || this.icon;\n\n    return html`\n      <div class=\"container\">\n        ${leadIcon\n          ? html`<md-icon class=\"icon-slot\">${leadIcon}</md-icon>`\n          : html`<slot name=\"leading-icon\"><slot name=\"icon\"></slot></slot>`}\n\n        <div\n          class=\"slider-wrapper\"\n          @pointerdown=${this.handlePointerDown}\n          @pointermove=${this.handlePointerMove}\n          @pointerup=${this.handlePointerUp}\n          @pointercancel=${this.handlePointerUp}\n        >\n          <div class=\"track-container\">\n            <div\n              class=\"track-active\"\n              style=\"left: ${startPct}%; width: ${activeWidth}%\"\n            ></div>\n            ${this.renderTicks()}\n          </div>\n\n          ${this.range ? this.renderThumb('start') : nothing}\n          ${this.renderThumb('end')}\n        </div>\n\n        ${this.trailingIcon\n          ? html`<md-icon class=\"icon-slot\">${this.trailingIcon}</md-icon>`\n          : html`<slot name=\"trailing-icon\"></slot>`}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-slider': MdSlider;\n  }\n}\n"],"mappings":"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"}