@mcp-b/web-components 0.2.0

package/dist/slide-activator-DlxQt9R9.js

@@ -0,0 +1,798 @@
+import { Localize } from "./utilities/localize.js";
+import "./icon-BPVkNsY4.js";
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { css, html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import hostStyles from "@mcp-b/wc-support/styles/host.styles";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { DraggableElement } from "@mcp-b/wc-support/utilities/drag";
+import { clamp } from "@mcp-b/wc-support/utilities/math";
+import { SigveloActivateEvent, SigveloBeforeActivateEvent, SigveloBeforeDeactivateEvent, SigveloDeactivateEvent } from "@mcp-b/wc-support/events/activate";
+import { SigveloProgressEvent } from "@mcp-b/wc-support/events/progress";
+//#region src/components/slide-activator/slide-activator.styles.ts
+var slide_activator_styles_default = css`
+  :host {
+    --border-radius: var(--sigvelo-radius-lg);
+    --thumb-width: 4em;
+    --thumb-inset: 0.125em;
+    --shimmer-color: color-mix(in oklab, light-dark(black, white) 12.5%, transparent) 50%;
+
+    display: flex;
+    position: relative;
+    width: 100%;
+    min-width: calc(
+      var(--thumb-width) * 3
+    ); /* three thumb widths to ensure space for a small label */
+    height: 3em;
+    border-radius: var(--border-radius);
+    background: var(--sigvelo-color-neutral-bg-muted);
+    color: var(--sigvelo-color-neutral-text-on-subtle);
+    transition:
+      var(--sigvelo-motion-duration-presence) background-color,
+      var(--sigvelo-motion-duration-presence) color;
+    user-select: none;
+  }
+
+  /* Disabled */
+  :host(:state(disabled)) {
+    cursor: not-allowed;
+    opacity: 0.5;
+
+    #thumb {
+      cursor: inherit;
+    }
+  }
+
+  /* Activated */
+  :host(:state(activated)) {
+    background-color: var(--sigvelo-color-primary-bg);
+    color: var(--sigvelo-color-primary-text-on-bg);
+    animation: activated 0.3s ease-out;
+  }
+
+  /* Label */
+  #label {
+    display: flex;
+    position: relative;
+    position: relative;
+    flex: 1 1 auto;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    overflow: hidden;
+    border-radius: inherit;
+
+    sigvelo-icon,
+    ::slotted(sigvelo-icon) {
+      font-size: 1.25em;
+    }
+  }
+
+  /* Shimmer */
+  :host(:not(:state(disabled), :state(activated))) #label.shimmer::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    flex: 1 1 auto;
+    width: 100%;
+    height: 100%;
+    transform: translateX(-100%);
+    background: linear-gradient(90deg, transparent 0%, var(--shimmer-color), transparent 100%);
+    content: "";
+    animation: shimmer 3s var(--sigvelo-ease-standard) infinite;
+  }
+
+  :host(:not(:state(disabled))) #label.shimmer.rtl::before {
+    animation-direction: reverse;
+  }
+
+  /* Thumb */
+  #thumb {
+    display: flex;
+    position: absolute;
+    align-items: center;
+    justify-content: center;
+    width: var(--thumb-width);
+    height: calc(100% - var(--thumb-inset) * 2);
+    inset: var(--thumb-inset);
+    left: calc(
+      clamp(
+        var(--thumb-inset),
+        calc((100% - var(--thumb-width)) * var(--thumb-position) + var(--thumb-inset)),
+        calc(100% - var(--thumb-width) - var(--thumb-inset))
+      )
+    );
+    border-radius: calc(var(--border-radius) - var(--thumb-inset));
+    background-color: var(
+      --sigvelo-color-primary-text-on-bg
+    ); /* always white, same as checkbox icons */
+    color: black;
+    cursor: grab;
+    touch-action: none;
+    transition: left 0.3s ease-out;
+
+    &.rtl {
+      right: calc(
+        clamp(
+          var(--thumb-inset),
+          calc((100% - var(--thumb-width)) * var(--thumb-position) + var(--thumb-inset)),
+          calc(100% - var(--thumb-width) - var(--thumb-inset))
+        )
+      );
+      left: auto;
+      transition: right 0.3s ease-out;
+    }
+
+    &:active {
+      cursor: grabbing;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible {
+      outline: var(--sigvelo-border-style) calc(var(--sigvelo-border-width) + 1px)
+        var(--sigvelo-color-focus);
+      outline-offset: var(--sigvelo-border-width);
+    }
+
+    &.activated {
+      cursor: not-allowed;
+    }
+
+    &.dragging {
+      transition: none;
+    }
+
+    &.pressing:not(.is-press-stale) {
+      left: calc(
+        clamp(
+          var(--thumb-inset),
+          calc((100% - var(--thumb-width)) * 1 + var(--thumb-inset)),
+          calc(100% - var(--thumb-width) - var(--thumb-inset))
+        )
+      );
+      transition-duration: 1s;
+      transition-timing-function: linear;
+
+      &.rtl {
+        right: calc(
+          clamp(
+            var(--thumb-inset),
+            calc((100% - var(--thumb-width)) * 1 + var(--thumb-inset)),
+            calc(100% - var(--thumb-width) - var(--thumb-inset))
+          )
+        );
+      }
+    }
+
+    sigvelo-icon,
+    ::slotted(sigvelo-icon) {
+      font-size: 1.25em;
+    }
+
+    &.activated sigvelo-icon[name="chevrons-right"] {
+      display: none;
+    }
+
+    &:not(.activated) sigvelo-icon[name="check"] {
+      display: none;
+    }
+
+    &.rtl sigvelo-icon[name="chevrons-right"] {
+      scale: -1;
+    }
+  }
+
+  @keyframes shimmer {
+    100% {
+      transform: translateX(100%);
+    }
+  }
+
+  @keyframes activated {
+    0% {
+      scale: 1;
+      opacity: 1;
+    }
+    25% {
+      scale: 1.015;
+      opacity: 0.9;
+    }
+    50% {
+      scale: 1.02;
+      opacity: 0.8;
+    }
+    75% {
+      scale: 1.015;
+      opacity: 0.9;
+    }
+    100% {
+      scale: 1;
+      opacity: 1;
+    }
+  }
+`;
+//#endregion
+//#region src/components/slide-activator/slide-activator.ts
+/**
+* <sigvelo-slide-activator>
+*
+* @summary Gives users a draggable thumb that must be moved to the end of its track to trigger an action.
+* @tag sigvelo-slide-activator
+* @documentation https://design-system.sigvelo.com/docs/components/slide-activator
+* @status stable
+* @since 1.0
+*
+* @dependency sigvelo-icon
+*
+* @slot label - The slide activator's label. For plain-text labels, you can use the `label` attribute instead.
+* @slot activated-label - The label to show when activated. For plain-text labels, you can use the `activated-label`
+*  attribute instead.
+* @slot thumb - The thumb element that users drag. Defaults to a double chevron icon if not provided.
+*
+* @event sigvelo-before-activate - Emitted when the control will activate. Calling `event.preventDefault()` will prevent
+*  the activation from occurring.
+* @event sigvelo-activate - Emitted immediately after the control is activated.
+* @event sigvelo-before-deactivate - Emitted when the control will deactivate. Calling `event.preventDefault()` will
+*  prevent the deactivation from occurring.
+* @event sigvelo-deactivate - Emitted immediately after the control is deactivated.
+* @event sigvelo-progress - Emitted as the slider progresses. Use `event.details.percent` to see how far along it is.
+*
+* @csspart thumb - The slide activator's thumb.
+* @csspart label - The slide activator's label.
+*
+* @cssproperty [--border-radius=var(--sigvelo-radius-lg)] - The control's border radius. We use a CSS custom
+*  property so we can properly calculate the inset border radius for the thumb.
+* @cssproperty [--thumb-width=4em] - The thumb's width.
+* @cssproperty [--thumb-inset=0.125em] - The thumb's inset from the host element.
+* @cssproperty [--shimmer-color] - The color to use as a base for the shimmer animation.
+* @cssproperty [--thumb-position=(read-only)] - A read-only property that moves from 0 to 1 as the user slides the
+*  thumb to activate the control. Useful as a hook to transition background styles based on the thumb's position.
+*
+* @cssstate activated - Applied briefly when the slide activator has been activated.
+* @cssstate dragging - Applied when the slide activator is dragging.
+* @cssstate pressing - Applied when the user is pressing a key to activate the slide activator.
+* @cssstate disabled - Applied when the slide activator is disabled.
+*
+* @example Default
+* Slide activators are unidirectional. Once activated by the user, they can only be reset programmatically. The deliberate friction in activation, followed by a locked state, helps prevent accidental triggering and ensures intentional actions are committed.
+*
+* ```html
+* <sigvelo-slide-activator
+*   label="Slide to activate"
+*   activated-label="Activated"
+*   attention="shimmer"
+*   id="slide-activator__overview"
+*   style="max-width: 340px;"
+* >
+* </sigvelo-slide-activator>
+*
+* <script>
+*   const slideActivator = document.getElementById('slide-activator__overview');
+*
+*   // When the component is activated
+*   slideActivator.addEventListener('sigvelo-activate', () => {
+*     // Deactivate it for the demo after two seconds
+*     setTimeout(() => slideActivator.activated = false, 2000);
+*   });
+* <\/script>
+* ```
+*
+* **Note:** For demonstration purposes, most of the examples on this page reset themselves shortly after activation.
+*
+* @example Handling activation
+* You should always provide a label using the `label` attribute to describe the control to users. In most cases, you'll also want to show a separate label when the control is activated. Use the `activated-label` attribute to do this. For labels that require HTML, use the respective slots instead.
+*
+* When the control is activated, a `sigvelo-before-activate` event will be emitted. You can call `event.preventDefault()` to prevent the activation if needed. Once the control is finally activated, a subsequent `sigvelo-activate` event will be emitted. If you deactivate the control programmatically, the corresponding `sigvelo-before-deactivate` and `sigvelo-deactivate` events will be emitted.
+*
+* You can use these events to execute code to run on activation and deactivation.
+*
+* ```html
+* <div id="slide-activator__activation">
+*   <sigvelo-slide-activator
+*     label="Slide to activate"
+*     activated-label="Activated"
+*   ></sigvelo-slide-activator>
+*
+*   <sigvelo-button disabled>Deactivate</sigvelo-button>
+* </div>
+*
+* <script>
+*   const container = document.getElementById('slide-activator__activation');
+*   const slideActivator = container.querySelector('sigvelo-slide-activator');
+*   const button = container.querySelector('sigvelo-button');
+*
+*   // Deactivate it
+*   button.addEventListener('click', () => {
+*     slideActivator.activated = false;
+*   });
+*
+*   // Update the button state when activated
+*   slideActivator.addEventListener('sigvelo-activate', () => {
+*     button.disabled = false;
+*   });
+*
+*   // Update the button state when deactivated
+*   slideActivator.addEventListener('sigvelo-deactivate', () => {
+*     button.disabled = true;
+*   });
+* <\/script>
+*
+* <style>
+*   #slide-activator__activation {
+*     sigvelo-slide-activator {
+*       max-width: 340px;
+*       margin-bottom: 1rem;
+*     }
+*   }
+* </style>
+* ```
+*
+* @example Tracking slide progress
+* The readonly `--thumb-position` custom property will be set to a value between 0 and 1 on the host element, representing how far the user has slid the thumb toward activation. You can use this to transition styles at different thresholds.
+*
+* Additionally, a `sigvelo-progress` event will be emitted while the user slides the thumb. This event contains an `event.detail.percent` payload with a corresponding number between 0 and 1.
+*
+* ```html
+* <div id="slide-activator__progress">
+*   <sigvelo-slide-activator
+*     label="Slide to place order"
+*     activated-label="Order received"
+*   ></sigvelo-slide-activator>
+*   Progress: <sigvelo-number number="0" type="percent"></sigvelo-number>
+* </div>
+*
+* <script>
+*   const container = document.getElementById('slide-activator__progress');
+*   const slideActivator = container.querySelector('sigvelo-slide-activator');
+*   const progress = container.querySelector('sigvelo-number');
+*
+*   // Update progress as the user drags
+*   slideActivator.addEventListener('sigvelo-progress', event => {
+*     progress.number = event.detail.percent * 100;
+*   });
+*
+*   // Update the label and reset the demo when component is activated
+*   slideActivator.addEventListener('sigvelo-activate', () => {
+*     // Deactivate it for the demo after two seconds
+*     setTimeout(() => slideActivator.activated = false, 2000);
+*   });
+* <\/script>
+*
+* <style>
+*   #slide-activator__progress {
+*     sigvelo-slide-activator {
+*       max-width: 340px;
+*       margin-bottom: 1rem;
+*       transition: none;
+*
+*       <!-- Change the background color as the user slides the thumb -->
+*       background-color:
+*         color-mix(
+*           in oklab,
+*           var(--sigvelo-color-neutral-bg-muted) calc((1 - var(--thumb-position)) * 100%),
+*           var(--sigvelo-color-success-bg) calc(var(--thumb-position) * 100%)
+*         );
+*
+*       <!-- Change the text color when activated -->
+*       &:state(activated) {
+*         color: var(--sigvelo-color-success-text-on-bg);
+*       }
+*     }
+*   }
+* </style>
+* ```
+*
+* @example Customizing icons
+* Use the `thumb` slot to provide your own icon(s) for the thumb. If you want to change the icon depending on the activation state, use the `:state(activated)` selector to show/hide the respective icons with CSS.
+*
+* ```html
+* <sigvelo-slide-activator
+*   label="Slide to unlock"
+*   activated-label="Unlocked"
+*   id="slide-activator__icons"
+* >
+*   <sigvelo-icon slot="thumb" name="lock"></sigvelo-icon>
+*   <sigvelo-icon slot="thumb" name="lock-open-2"></sigvelo-icon>
+* </sigvelo-slide-activator>
+*
+* <script>
+*   const slideActivator = document.getElementById('slide-activator__icons');
+*
+*   // When the component is activated
+*   slideActivator.addEventListener('sigvelo-activate', () => {
+*     // Deactivate it for the demo after two seconds
+*     setTimeout(() => slideActivator.activated = false, 2000);
+*   });
+* <\/script>
+*
+* <style>
+*   sigvelo-slide-activator#slide-activator__icons {
+*     max-width: 340px;
+*
+*     <!-- Show locked until activated, then show unlocked -->
+*     &:state(activated) sigvelo-icon[name="lock"],
+*     &:not(:state(activated)) sigvelo-icon[name="lock-open-2"] {
+*       display: none;
+*     }
+*   }
+* </style>
+* ```
+*
+* @example Drawing attention
+* Set the `attention` attribute to `shimmer` to provide a subtle visual hint via animation. The animation pauses when the slide activator is activated.
+*
+* ```html
+* <sigvelo-slide-activator
+*   label="Slide to release cats"
+*   activated-label="Releasing cats…"
+*   attention="shimmer"
+*   id="slide-activator__attention"
+* >
+*   <sigvelo-icon slot="thumb" name="cat"></sigvelo-icon>
+* </sigvelo-slide-activator>
+*
+* <script>
+*   const slideActivator = document.getElementById('slide-activator__attention');
+*
+*   // When the component is activated
+*   slideActivator.addEventListener('sigvelo-activate', () => {
+*     // Deactivate it for the demo after two seconds
+*     setTimeout(() => slideActivator.activated = false, 2000);
+*   });
+* <\/script>
+*
+* <style>
+*   sigvelo-slide-activator#slide-activator__attention {
+*     max-width: 340px;
+*
+*     <!-- Head tilt-->
+*     sigvelo-icon {
+*       transition: 300ms rotate ease-out;
+*     }
+*
+*     &:state(activated) sigvelo-icon {
+*       rotate: 20deg;
+*     }
+*   }
+* </style>
+* ```
+*
+* @example Disabling
+* Use the `disabled` attribute to disable the slide activator. The control cannot be activated or focused while disabled.
+*
+* ```html
+* <sigvelo-slide-activator
+*   label="Slide to activate"
+*   disabled
+*   style="max-width: 340px;"
+* ></sigvelo-slide-activator>
+* ```
+*
+* @example Styling slide activators
+* Slide activators come with a simple, minimal appearance. Feel free to customize them with your own styles, icons, and animations.
+*
+* ```html
+* <sigvelo-slide-activator
+*   label="Empty the box"
+*   activated-label="Emptying…"
+*   attention="shimmer"
+*   id="slide-activator__styling"
+* >
+*   <sigvelo-icon slot="thumb" name="arrow-right"></sigvelo-icon>
+*   <sigvelo-spinner slot="thumb"></sigvelo-spinner>
+* </sigvelo-slide-activator>
+*
+* <script>
+*   const slideActivator = document.getElementById('slide-activator__styling');
+*
+*   // When the component is activated
+*   slideActivator.addEventListener('sigvelo-activate', () => {
+*     // Deactivate it for the demo after two seconds
+*     setTimeout(() => slideActivator.activated = false, 2000);
+*   });
+* <\/script>
+*
+* <style>
+*   sigvelo-slide-activator#slide-activator__styling {
+*     --border-radius: var(--sigvelo-radius-full);
+*     --thumb-width: 5rem;
+*     --thumb-inset: 0.25rem;
+*     --shimmer-color: #fff2;
+*     --current-color:
+*       color-mix(
+*         in oklab,
+*         firebrick calc(var(--thumb-position) * 100%),
+*         #0284c7 calc((1 - var(--thumb-position)) * 100%)
+*       );
+*     height: 4rem;
+*     max-width: 340px;
+*     background-color: var(--current-color);
+*     font-weight: var(--sigvelo-font-weight-semibold);
+*     color: white;
+*
+*     &:focus-within {
+*       outline-color: var(--current-color) !important;
+*     }
+*
+*     <!-- Animate when activated -->
+*     &:state(activated) {
+*       animation: pulse 0.6s ease-out forwards;
+*     }
+*
+*     <!-- Slightly bigger icons -->
+*     sigvelo-icon {
+*       font-size: 1.5rem;
+*     }
+*
+*     sigvelo-spinner {
+*       --indicator-color: firebrick;
+*       --track-color: color-mix(in oklab, firebrick, transparent 80%);
+*     }
+*
+*     <!-- Show arrow icon until activated, then show trash -->
+*     &:state(activated) sigvelo-icon[name="arrow-right"],
+*     &:not(:state(activated)) sigvelo-spinner {
+*       display: none;
+*     }
+*
+*     <!-- Bounce animation for fun -->
+*     sigvelo-icon[name="arrow-right"] {
+*       animation: bounce-right 1s infinite;
+*
+*       <!-- Flip for RTL -->
+*       &:dir(rtl) {
+*         scale: -1;
+*       }
+*     }
+*   }
+*
+*   @keyframes bounce-right {
+*     0%, 100% {
+*       transform: translateX(0);
+*     }
+*     50% {
+*       transform: translateX(6px);
+*     }
+*   }
+*
+*   @keyframes pulse {
+*     0% {
+*       transform: scale(1);
+*       filter: brightness(1);
+*     }
+*     20% {
+*       transform: scale(1.05);
+*       filter: brightness(1.2);
+*     }
+*     40% {
+*       transform: scale(0.95);
+*       filter: brightness(0.9);
+*     }
+*     60% {
+*       transform: scale(1.02);
+*       filter: brightness(1.1);
+*     }
+*     80% {
+*       transform: scale(0.98);
+*       filter: brightness(0.95);
+*     }
+*     100% {
+*       transform: scale(1);
+*       filter: brightness(1);
+*     }
+*   }
+* </style>
+* ```
+*/
+var SigveloSlideActivator = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.localize = new Localize(this);
+		this.isKeyPressStale = false;
+		this.isDragging = false;
+		this.isPressing = false;
+		this.thumbPosition = 0;
+		this.label = "";
+		this.activatedLabel = "";
+		this.activated = false;
+		this.disabled = false;
+	}
+	static {
+		this.observeSlots = true;
+	}
+	static {
+		this.styles = [hostStyles, slide_activator_styles_default];
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.cleanupTimers();
+	}
+	firstUpdated() {
+		this.draggableThumb = new DraggableElement(this.thumb, {
+			start: (x) => {
+				this.isDragging = true;
+				this.dragStartX = x;
+				this.hostBoundingClientRect = this.getBoundingClientRect();
+				this.handleDrag(x);
+			},
+			move: (x) => {
+				this.handleDrag(x);
+			},
+			stop: (x) => {
+				this.handleDrag(x);
+				this.isDragging = false;
+				if (!this.activated) this.setThumbPosition(0);
+			}
+		});
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("activated")) {
+			if (this.activated) this.activate();
+			else if (changedProperties.get("activated") === true) this.deactivate();
+		}
+		if (changedProperties.has("disabled")) {
+			this.customStates.set("disabled", this.disabled);
+			if (this.disabled) {
+				this.cleanupTimers();
+				this.draggableThumb.stop();
+			} else this.draggableThumb.start();
+		}
+		if (changedProperties.has("isDragging")) this.customStates.set("dragging", this.isDragging);
+		if (changedProperties.has("isPressing")) this.customStates.set("pressing", this.isPressing);
+		if (changedProperties.has("thumbPosition")) {
+			this.style.setProperty("--thumb-position", `${this.thumbPosition}`);
+			if (this.thumbPosition >= 1) this.activated = true;
+		}
+	}
+	/** Attempts to activate the component. */
+	activate() {
+		const beforeActivateEvent = new SigveloBeforeActivateEvent();
+		this.dispatchEvent(beforeActivateEvent);
+		if (beforeActivateEvent.defaultPrevented) {
+			this.activated = false;
+			return;
+		}
+		clearInterval(this.keyPressInterval);
+		if (this.isPressing) this.isKeyPressStale = true;
+		this.setThumbPosition(1);
+		this.activated = true;
+		this.customStates.set("activated", true);
+		requestAnimationFrame(() => {
+			this.dispatchEvent(new SigveloActivateEvent());
+		});
+	}
+	/** Restores the control to its original deactivated state. */
+	deactivate() {
+		const beforeDeactivateEvent = new SigveloBeforeDeactivateEvent();
+		this.dispatchEvent(beforeDeactivateEvent);
+		if (beforeDeactivateEvent.defaultPrevented) {
+			this.activated = true;
+			return;
+		}
+		this.setThumbPosition(0);
+		this.activated = false;
+		this.customStates.set("activated", false);
+		this.isKeyPressStale = false;
+		this.isPressing = false;
+		requestAnimationFrame(() => {
+			this.dispatchEvent(new SigveloDeactivateEvent());
+		});
+	}
+	cleanupTimers() {
+		if (this.keyPressInterval) {
+			clearInterval(this.keyPressInterval);
+			this.keyPressInterval = void 0;
+		}
+		if (this.keyPressTimeout) {
+			clearTimeout(this.keyPressTimeout);
+			this.keyPressTimeout = void 0;
+		}
+	}
+	/** Updates the thumb position from a pointer's x coordinate */
+	handleDrag(x) {
+		if (this.disabled || this.activated) return;
+		const isRtl = this.localize.dir() === "rtl";
+		const hostWidth = this.hostBoundingClientRect.width - this.thumb.clientWidth;
+		const percentage = clamp((isRtl ? this.dragStartX - x : x - this.dragStartX) / hostWidth, 0, 1);
+		this.setThumbPosition(percentage);
+	}
+	handleKeyDown(event) {
+		const arrowKey = this.localize.dir() === "rtl" ? "ArrowLeft" : "ArrowRight";
+		if (event.key === " " || event.key === arrowKey) {
+			event.preventDefault();
+			if (this.activated || this.disabled) return;
+			if (this.isKeyPressStale) return;
+			if (!this.isPressing) {
+				this.isPressing = true;
+				this.cleanupTimers();
+				this.setThumbPosition(0);
+				this.keyPressInterval = setInterval(() => {
+					this.setThumbPosition(this.thumbPosition + .1);
+				}, 100);
+			}
+		}
+	}
+	handleKeyUp(event) {
+		const arrowKey = this.localize.dir() === "rtl" ? "ArrowLeft" : "ArrowRight";
+		if (this.activated || this.disabled) return;
+		if (event.key === " " || event.key === arrowKey) {
+			event.preventDefault();
+			this.isKeyPressStale = false;
+			this.isPressing = false;
+			this.setThumbPosition(0);
+			this.cleanupTimers();
+		}
+	}
+	/** Updates the thumb position and dispatches the `sigvelo-progress` event. */
+	setThumbPosition(value) {
+		if (this.disabled) return;
+		if (value !== this.thumbPosition) {
+			this.thumbPosition = value;
+			const percentage = value / 100;
+			if (percentage !== this.lastDispatchedPercentage) this.dispatchEvent(new SigveloProgressEvent({ percent: percentage }));
+		}
+	}
+	render() {
+		const isRtl = this.localize.dir() === "rtl";
+		return html`
+      <div
+        id="label"
+        part="label"
+        class=${classMap({
+			rtl: isRtl,
+			shimmer: this.attention === "shimmer"
+		})}
+      >
+        ${this.activated && (this.activatedLabel || this.slotsWithContent.has("activated-label")) ? html`<slot name="activated-label">${this.activatedLabel}</slot>` : html`<slot name="label">${this.label}</slot>`}
+      </div>
+
+      <div
+        id="thumb"
+        part="thumb"
+        tabindex=${this.disabled ? "-1" : "0"}
+        role="button"
+        aria-pressed=${this.activated}
+        aria-labelledby="label"
+        aria-description=${ifDefined(this.activated ? void 0 : this.localize.term("pressSpaceForOneSecondToActivate"))}
+        aria-disabled=${this.disabled ? "true" : "false"}
+        class=${classMap({
+			activated: this.activated,
+			dragging: this.isDragging,
+			"is-press-stale": this.isKeyPressStale,
+			pressing: this.isPressing,
+			rtl: isRtl
+		})}
+        @keydown=${this.handleKeyDown}
+        @keyup=${this.handleKeyUp}
+      >
+        <slot name="thumb">
+          <sigvelo-icon library="default" name="chevrons-right"></sigvelo-icon>
+          <sigvelo-icon library="default" name="check"></sigvelo-icon>
+        </slot>
+      </div>
+    `;
+	}
+};
+__decorate([query("#thumb")], SigveloSlideActivator.prototype, "thumb", void 0);
+__decorate([state()], SigveloSlideActivator.prototype, "isDragging", void 0);
+__decorate([state()], SigveloSlideActivator.prototype, "isPressing", void 0);
+__decorate([state()], SigveloSlideActivator.prototype, "thumbPosition", void 0);
+__decorate([property()], SigveloSlideActivator.prototype, "label", void 0);
+__decorate([property({ attribute: "activated-label" })], SigveloSlideActivator.prototype, "activatedLabel", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloSlideActivator.prototype, "activated", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloSlideActivator.prototype, "disabled", void 0);
+__decorate([property({ reflect: true })], SigveloSlideActivator.prototype, "attention", void 0);
+customElements.define("sigvelo-slide-activator", SigveloSlideActivator);
+//#endregion
+export { SigveloSlideActivator as t };