@consent.software/catalog 1.3.5 → 1.4.0

package/dist_ts_web/00_commitinfo_data.js

@@ -3,7 +3,7 @@
  */
 export const commitinfo = {
     name: '@consent.software/catalog',
-    version: '1.3.5',
+    version: '1.4.0',
     description: 'A library of web components designed to integrate robust consent management capabilities into web applications, ensuring compliance with privacy regulations.'
 };
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMDBfY29tbWl0aW5mb19kYXRhLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vdHNfd2ViLzAwX2NvbW1pdGluZm9fZGF0YS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUNILE1BQU0sQ0FBQyxNQUFNLFVBQVUsR0FBRztJQUN4QixJQUFJLEVBQUUsMkJBQTJCO0lBQ2pDLE9BQU8sRUFBRSxPQUFPO0lBQ2hCLFdBQVcsRUFBRSwrSkFBK0o7Q0FDN0ssQ0FBQSJ9

package/dist_ts_web/elements/consentsoftware-toggle.d.ts

@@ -1,13 +1,41 @@
 import { LitElement, type TemplateResult } from 'lit';
 export declare class ConsentsoftwareToggle extends LitElement {
-    static demo: () => TemplateResult<1>;
     required: boolean;
     selected: boolean;
+    /**
+     * We always track the knob’s left offset in `currentX`.
+     * - 0 => fully left
+     * - 30 => fully right
+     */
+    private currentX;
+    /**
+     * Drag state
+     */
+    private isDragging;
+    private hasDragged;
+    private startX;
+    private readonly knobWidth;
+    private readonly trackWidth;
     static styles: import("lit").CSSResult;
     constructor();
     render(): TemplateResult;
-    firstUpdated(_changedProperties: Map<string | number | symbol, unknown>): Promise<void>;
-    handleClick(mouseEvent: any): Promise<void>;
-    syncSelection(): Promise<void>;
-    getText(): string;
+    /**
+     * If required = true on first render, auto-select and set the knob to the right.
+     */
+    firstUpdated(): Promise<void>;
+    /**
+     * CLICK HANDLER
+     */
+    handleClick(event: MouseEvent): Promise<void>;
+    /**
+     * DRAG HANDLERS (pointer events)
+     */
+    private onPointerDown;
+    private onPointerMove;
+    private onPointerUp;
+    /**
+     * If external code sets `selected = true/false`, we also sync the knob position
+     */
+    protected updated(changedProperties: Map<PropertyKey, unknown>): void;
+    getText(): string | null;
 }

package/dist_ts_web/elements/consentsoftware-toggle.js

@@ -12,7 +12,6 @@ import { customElement } from 'lit/decorators.js';
 import { property } from 'lit/decorators/property.js';
 import { delayFor } from '@push.rocks/smartdelay';
 let ConsentsoftwareToggle = class ConsentsoftwareToggle extends LitElement {
-    static { this.demo = () => html `<consentsoftware-toggle></consentsoftware-toggle>`; }
     static { this.styles = css `
     :host {
       display: block;
@@ -23,17 +22,21 @@ let ConsentsoftwareToggle = class ConsentsoftwareToggle extends LitElement {
       margin-bottom: 16px;
     }
 
+    .toggle {
+      user-select: none; /* helps avoid text selection on drag */
+    }
+
     .toggleKnobArea {
-      cursor: pointer;
+      position: relative;
       margin: auto;
       height: 30px;
       width: 60px;
       border-radius: 20px;
       background: rgba(255, 255, 255, 0.1);
-      position: relative;
-      overflow: hidden;
-      transition: all 0.2s;
       border: 1px solid rgba(255, 255, 255, 0);
+      overflow: hidden;
+      transition: background 0.2s ease;
+      cursor: pointer;
     }
 
     :host([selected]) .toggleKnobArea {
@@ -41,19 +44,27 @@ let ConsentsoftwareToggle = class ConsentsoftwareToggle extends LitElement {
     }
 
     .toggleKnobMover {
-      transition: all 0.2s;
+      position: relative;
+      height: 100%;
+      width: 100%;
     }
 
     .toggleKnobInner {
-      height: 30px;
-      width: 30px;
-      border-radius: 15px;
-      background: rgba(255, 255, 255, 0.5);
       position: absolute;
       top: 0;
       left: 0;
-      transition: all 0.2s;
+      width: 30px;
+      height: 30px;
+      border-radius: 15px;
+      background: rgba(255, 255, 255, 0.5);
+      transition: left 0.2s ease, background 0.2s ease;
       transform: scale(0.7);
+      /* Prevent scroll gestures on mobile */
+      touch-action: none;
+    }
+
+    .toggleKnobInner.dragging {
+      transition: background 0.2s ease;
     }
 
     :host([selected]) .toggleKnobInner {
@@ -73,49 +84,149 @@ let ConsentsoftwareToggle = class ConsentsoftwareToggle extends LitElement {
         super();
         this.required = false;
         this.selected = false;
+        /**
+         * We always track the knob’s left offset in `currentX`.
+         * - 0 => fully left
+         * - 30 => fully right
+         */
+        this.currentX = 0;
+        /**
+         * Drag state
+         */
+        this.isDragging = false;
+        this.hasDragged = false;
+        this.startX = 0; // pointerdown offset
+        this.knobWidth = 30;
+        this.trackWidth = 60;
     }
     render() {
         return html `
       <div class="label">${this.getText()}</div>
+      <!-- A user can click anywhere in this toggle area. -->
       <div class="toggle" @click=${this.handleClick}>
         <div class="toggleKnobArea">
           <div class="toggleKnobMover">
-            <div class="toggleKnobInner"></div>
+            <!-- The knob itself, with pointer events for dragging. -->
+            <div
+              class="toggleKnobInner"
+              style="left: ${this.currentX}px;"
+              @pointerdown=${this.onPointerDown}
+              @pointermove=${this.onPointerMove}
+              @pointerup=${this.onPointerUp}
+              @pointercancel=${this.onPointerUp}
+            ></div>
           </div>
         </div>
       </div>
     `;
     }
-    async firstUpdated(_changedProperties) {
-        super.firstUpdated(_changedProperties);
+    /**
+     * If required = true on first render, auto-select and set the knob to the right.
+     */
+    async firstUpdated() {
         if (this.required) {
+            // If "required" => always selected
             this.selected = true;
-            this.syncSelection();
+            this.currentX = this.knobWidth; // 30
+            this.requestUpdate();
+        }
+        else {
+            // If not required, set knob to 0 or 30 depending on `selected`
+            this.currentX = this.selected ? this.knobWidth : 0;
+            this.requestUpdate();
         }
     }
-    async handleClick(mouseEvent) {
+    /**
+     * CLICK HANDLER
+     */
+    async handleClick(event) {
+        // If the user truly dragged the knob, skip the normal click toggle.
+        if (this.isDragging || this.hasDragged) {
+            event.stopPropagation();
+            event.preventDefault();
+            return;
+        }
         if (this.required) {
-            const moverElement = this.shadowRoot.querySelector('.toggleKnobMover');
-            moverElement.style.transform = 'translateX(20px)';
-            await delayFor(250);
-            moverElement.style.transform = 'translateX(30px)';
+            // small bounce from 30 -> 20 -> 30
+            this.currentX = this.knobWidth; // ensure at 30
+            this.requestUpdate();
+            await new Promise((r) => setTimeout(r, 10));
+            this.currentX = 20; // small bounce left
+            this.requestUpdate();
+            await delayFor(200);
+            this.currentX = this.knobWidth; // back to 30
+            this.requestUpdate();
             return;
         }
+        // Normal toggle if no drag & not required
+        event.stopPropagation();
+        event.preventDefault();
         this.selected = !this.selected;
-        mouseEvent.stopPropagation();
-        mouseEvent.preventDefault();
-        this.syncSelection();
+        this.currentX = this.selected ? this.knobWidth : 0; // snap knob left(0) or right(30)
+        this.requestUpdate();
         this.dispatchEvent(new CustomEvent('toggle', { detail: { selected: this.selected } }));
+        delayFor(0).then(() => {
+            this.hasDragged = false;
+        });
     }
-    async syncSelection() {
-        console.log(`Selected ${this.selected}`);
-        const moverElement = this.shadowRoot.querySelector('.toggleKnobMover');
-        if (this.selected) {
-            moverElement.style.transform = 'translateX(30px)';
+    /**
+     * DRAG HANDLERS (pointer events)
+     */
+    onPointerDown(event) {
+        if (this.required) {
+            // If "required", disallow manual dragging
+            return;
         }
-        else {
-            moverElement.style.transform = 'translateX(0px)';
+        // Start dragging
+        this.isDragging = true;
+        this.hasDragged = false;
+        // The difference between the pointer’s X and the knob’s current position
+        this.startX = event.clientX - this.currentX;
+        // capture pointer so we keep receiving pointermove/pointerup
+        event.target.setPointerCapture(event.pointerId);
+    }
+    onPointerMove(event) {
+        if (!this.isDragging)
+            return;
+        const newX = event.clientX - this.startX;
+        this.hasDragged = true;
+        const toggleKnobInner = this.shadowRoot.querySelector('.toggleKnobInner');
+        toggleKnobInner.classList.add('dragging');
+        // Clamp
+        this.currentX = Math.max(0, Math.min(newX, this.trackWidth - this.knobWidth));
+        this.requestUpdate();
+    }
+    onPointerUp(event) {
+        if (!this.isDragging)
+            return;
+        event.target.releasePointerCapture(event.pointerId);
+        this.isDragging = false;
+        // If we didn’t truly drag, pointerup does nothing; click handler handles toggling.
+        if (!this.hasDragged) {
+            return;
+        }
+        const toggleKnobInner = this.shadowRoot.querySelector('.toggleKnobInner');
+        toggleKnobInner.classList.remove('dragging');
+        // Real drag => decide final side
+        const midpoint = (this.trackWidth - this.knobWidth) / 2; // 15
+        this.selected = this.currentX > midpoint;
+        this.currentX = this.selected ? this.knobWidth : 0; // snap to edge
+        this.requestUpdate();
+        // Dispatch toggle event
+        this.dispatchEvent(new CustomEvent('toggle', { detail: { selected: this.selected } }));
+    }
+    /**
+     * If external code sets `selected = true/false`, we also sync the knob position
+     */
+    updated(changedProperties) {
+        if (changedProperties.has('selected') &&
+            !this.isDragging &&
+            !this.hasDragged &&
+            !this.required) {
+            this.currentX = this.selected ? this.knobWidth : 0;
+            this.requestUpdate();
         }
+        super.updated(changedProperties);
     }
     getText() {
         return this.textContent;
@@ -134,4 +245,4 @@ ConsentsoftwareToggle = __decorate([
     __metadata("design:paramtypes", [])
 ], ConsentsoftwareToggle);
 export { ConsentsoftwareToggle };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29uc2VudHNvZnR3YXJlLXRvZ2dsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9lbGVtZW50cy9jb25zZW50c29mdHdhcmUtdG9nZ2xlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7OztBQUFBLE9BQU8sRUFBRSxVQUFVLEVBQUUsSUFBSSxFQUFFLEdBQUcsRUFBdUIsTUFBTSxLQUFLLENBQUM7QUFDakUsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLG1CQUFtQixDQUFDO0FBQ2xELE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUV0RCxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFHM0MsSUFBTSxxQkFBcUIsR0FBM0IsTUFBTSxxQkFBc0IsU0FBUSxVQUFVO2FBQ3JDLFNBQUksR0FBRyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUEsbURBQW1ELEFBQWhFLENBQWlFO2FBUXJFLFdBQU0sR0FBRyxHQUFHLENBQUE7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0F1RHpCLEFBdkRtQixDQXVEbEI7SUFFRjtRQUNFLEtBQUssRUFBRSxDQUFDO1FBL0RILGFBQVEsR0FBRyxLQUFLLENBQUM7UUFHakIsYUFBUSxHQUFHLEtBQUssQ0FBQztJQTZEeEIsQ0FBQztJQUVNLE1BQU07UUFDWCxPQUFPLElBQUksQ0FBQTsyQkFDWSxJQUFJLENBQUMsT0FBTyxFQUFFO21DQUNOLElBQUksQ0FBQyxXQUFXOzs7Ozs7O0tBTzlDLENBQUM7SUFDSixDQUFDO0lBRU0sS0FBSyxDQUFDLFlBQVksQ0FBQyxrQkFBMEQ7UUFDbEYsS0FBSyxDQUFDLFlBQVksQ0FBQyxrQkFBa0IsQ0FBQyxDQUFDO1FBQ3ZDLElBQUksSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDO1lBQ2xCLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDO1lBQ3JCLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQztRQUN2QixDQUFDO0lBQ0gsQ0FBQztJQUVNLEtBQUssQ0FBQyxXQUFXLENBQUMsVUFBVTtRQUNqQyxJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztZQUNsQixNQUFNLFlBQVksR0FBbUIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLENBQUMsa0JBQWtCLENBQUMsQ0FBQztZQUN2RixZQUFZLENBQUMsS0FBSyxDQUFDLFNBQVMsR0FBRyxrQkFBa0IsQ0FBQztZQUNsRCxNQUFNLFFBQVEsQ0FBQyxHQUFHLENBQUMsQ0FBQztZQUNwQixZQUFZLENBQUMsS0FBSyxDQUFDLFNBQVMsR0FBRyxrQkFBa0IsQ0FBQztZQUNsRCxPQUFPO1FBQ1QsQ0FBQztRQUNELElBQUksQ0FBQyxRQUFRLEdBQUcsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDO1FBQy9CLFVBQVUsQ0FBQyxlQUFlLEVBQUUsQ0FBQztRQUM3QixVQUFVLENBQUMsY0FBYyxFQUFFLENBQUM7UUFDNUIsSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDO1FBQ3JCLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxXQUFXLENBQUMsUUFBUSxFQUFFLEVBQUUsTUFBTSxFQUFFLEVBQUUsUUFBUSxFQUFFLElBQUksQ0FBQyxRQUFRLEVBQUUsRUFBRSxDQUFDLENBQUMsQ0FBQztJQUN6RixDQUFDO0lBRU0sS0FBSyxDQUFDLGFBQWE7UUFDeEIsT0FBTyxDQUFDLEdBQUcsQ0FBQyxZQUFZLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQyxDQUFDO1FBQ3pDLE1BQU0sWUFBWSxHQUFtQixJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQyxrQkFBa0IsQ0FBQyxDQUFDO1FBQ3ZGLElBQUksSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDO1lBQ2xCLFlBQVksQ0FBQyxLQUFLLENBQUMsU0FBUyxHQUFHLGtCQUFrQixDQUFDO1FBQ3BELENBQUM7YUFBTSxDQUFDO1lBQ04sWUFBWSxDQUFDLEtBQUssQ0FBQyxTQUFTLEdBQUcsaUJBQWlCLENBQUM7UUFDbkQsQ0FBQztJQUNILENBQUM7SUFFTSxPQUFPO1FBQ1osT0FBTyxJQUFJLENBQUMsV0FBVyxDQUFDO0lBQzFCLENBQUM7O0FBbEhNO0lBRE4sUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE9BQU8sRUFBRSxDQUFDOzt1REFDSjtBQUdqQjtJQUROLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxPQUFPLEVBQUUsT0FBTyxFQUFFLElBQUksRUFBRSxDQUFDOzt1REFDbkI7QUFQYixxQkFBcUI7SUFEakMsYUFBYSxDQUFDLHdCQUF3QixDQUFDOztHQUMzQixxQkFBcUIsQ0F1SGpDIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29uc2VudHNvZnR3YXJlLXRvZ2dsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9lbGVtZW50cy9jb25zZW50c29mdHdhcmUtdG9nZ2xlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7OztBQUFBLE9BQU8sRUFBRSxVQUFVLEVBQUUsSUFBSSxFQUFFLEdBQUcsRUFBdUIsTUFBTSxLQUFLLENBQUM7QUFDakUsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLG1CQUFtQixDQUFDO0FBQ2xELE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUN0RCxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFHM0MsSUFBTSxxQkFBcUIsR0FBM0IsTUFBTSxxQkFBc0IsU0FBUSxVQUFVO2FBdUJyQyxXQUFNLEdBQUcsR0FBRyxDQUFBOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBbUV6QixBQW5FbUIsQ0FtRWxCO0lBRUY7UUFDRSxLQUFLLEVBQUUsQ0FBQztRQTNGSCxhQUFRLEdBQUcsS0FBSyxDQUFDO1FBR2pCLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFFeEI7Ozs7V0FJRztRQUNLLGFBQVEsR0FBRyxDQUFDLENBQUM7UUFFckI7O1dBRUc7UUFDSyxlQUFVLEdBQUcsS0FBSyxDQUFDO1FBQ25CLGVBQVUsR0FBRyxLQUFLLENBQUM7UUFDbkIsV0FBTSxHQUFHLENBQUMsQ0FBQyxDQUFDLHFCQUFxQjtRQUN4QixjQUFTLEdBQUcsRUFBRSxDQUFDO1FBQ2YsZUFBVSxHQUFHLEVBQUUsQ0FBQztJQXlFakMsQ0FBQztJQUVNLE1BQU07UUFDWCxPQUFPLElBQUksQ0FBQTsyQkFDWSxJQUFJLENBQUMsT0FBTyxFQUFFOzttQ0FFTixJQUFJLENBQUMsV0FBVzs7Ozs7OzZCQU10QixJQUFJLENBQUMsUUFBUTs2QkFDYixJ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

package/dist_watch/bundle.js

@@ -42675,54 +42675,136 @@ var ConsentsoftwareToggle = class extends r4 {
     super();
     this.required = false;
     this.selected = false;
+    /**
+     * We always track the knob’s left offset in `currentX`.
+     * - 0 => fully left
+     * - 30 => fully right
+     */
+    this.currentX = 0;
+    /**
+     * Drag state
+     */
+    this.isDragging = false;
+    this.hasDragged = false;
+    this.startX = 0;
+    // pointerdown offset
+    this.knobWidth = 30;
+    this.trackWidth = 60;
   }
   render() {
     return x`
       <div class="label">${this.getText()}</div>
+      <!-- A user can click anywhere in this toggle area. -->
       <div class="toggle" @click=${this.handleClick}>
         <div class="toggleKnobArea">
           <div class="toggleKnobMover">
-            <div class="toggleKnobInner"></div>
+            <!-- The knob itself, with pointer events for dragging. -->
+            <div
+              class="toggleKnobInner"
+              style="left: ${this.currentX}px;"
+              @pointerdown=${this.onPointerDown}
+              @pointermove=${this.onPointerMove}
+              @pointerup=${this.onPointerUp}
+              @pointercancel=${this.onPointerUp}
+            ></div>
           </div>
         </div>
       </div>
     `;
   }
-  async firstUpdated(_changedProperties) {
-    super.firstUpdated(_changedProperties);
+  /**
+   * If required = true on first render, auto-select and set the knob to the right.
+   */
+  async firstUpdated() {
     if (this.required) {
       this.selected = true;
-      this.syncSelection();
+      this.currentX = this.knobWidth;
+      this.requestUpdate();
+    } else {
+      this.currentX = this.selected ? this.knobWidth : 0;
+      this.requestUpdate();
     }
   }
-  async handleClick(mouseEvent) {
+  /**
+   * CLICK HANDLER
+   */
+  async handleClick(event) {
+    if (this.isDragging || this.hasDragged) {
+      event.stopPropagation();
+      event.preventDefault();
+      return;
+    }
     if (this.required) {
-      const moverElement = this.shadowRoot.querySelector(".toggleKnobMover");
-      moverElement.style.transform = "translateX(20px)";
-      await delayFor(250);
-      moverElement.style.transform = "translateX(30px)";
+      this.currentX = this.knobWidth;
+      this.requestUpdate();
+      await new Promise((r11) => setTimeout(r11, 10));
+      this.currentX = 20;
+      this.requestUpdate();
+      await delayFor(200);
+      this.currentX = this.knobWidth;
+      this.requestUpdate();
       return;
     }
+    event.stopPropagation();
+    event.preventDefault();
     this.selected = !this.selected;
-    mouseEvent.stopPropagation();
-    mouseEvent.preventDefault();
-    this.syncSelection();
+    this.currentX = this.selected ? this.knobWidth : 0;
+    this.requestUpdate();
     this.dispatchEvent(new CustomEvent("toggle", { detail: { selected: this.selected } }));
+    delayFor(0).then(() => {
+      this.hasDragged = false;
+    });
   }
-  async syncSelection() {
-    console.log(`Selected ${this.selected}`);
-    const moverElement = this.shadowRoot.querySelector(".toggleKnobMover");
-    if (this.selected) {
-      moverElement.style.transform = "translateX(30px)";
-    } else {
-      moverElement.style.transform = "translateX(0px)";
+  /**
+   * DRAG HANDLERS (pointer events)
+   */
+  onPointerDown(event) {
+    if (this.required) {
+      return;
+    }
+    this.isDragging = true;
+    this.hasDragged = false;
+    this.startX = event.clientX - this.currentX;
+    event.target.setPointerCapture(event.pointerId);
+  }
+  onPointerMove(event) {
+    if (!this.isDragging) return;
+    const newX = event.clientX - this.startX;
+    this.hasDragged = true;
+    const toggleKnobInner = this.shadowRoot.querySelector(".toggleKnobInner");
+    toggleKnobInner.classList.add("dragging");
+    this.currentX = Math.max(0, Math.min(newX, this.trackWidth - this.knobWidth));
+    this.requestUpdate();
+  }
+  onPointerUp(event) {
+    if (!this.isDragging) return;
+    event.target.releasePointerCapture(event.pointerId);
+    this.isDragging = false;
+    if (!this.hasDragged) {
+      return;
+    }
+    const toggleKnobInner = this.shadowRoot.querySelector(".toggleKnobInner");
+    toggleKnobInner.classList.remove("dragging");
+    const midpoint = (this.trackWidth - this.knobWidth) / 2;
+    this.selected = this.currentX > midpoint;
+    this.currentX = this.selected ? this.knobWidth : 0;
+    this.requestUpdate();
+    this.dispatchEvent(new CustomEvent("toggle", { detail: { selected: this.selected } }));
+  }
+  /**
+   * If external code sets `selected = true/false`, we also sync the knob position
+   */
+  updated(changedProperties) {
+    if (changedProperties.has("selected") && !this.isDragging && !this.hasDragged && !this.required) {
+      this.currentX = this.selected ? this.knobWidth : 0;
+      this.requestUpdate();
     }
+    super.updated(changedProperties);
   }
   getText() {
     return this.textContent;
   }
 };
-ConsentsoftwareToggle.demo = () => x`<consentsoftware-toggle></consentsoftware-toggle>`;
 ConsentsoftwareToggle.styles = i`
     :host {
       display: block;
@@ -42733,17 +42815,21 @@ ConsentsoftwareToggle.styles = i`
       margin-bottom: 16px;
     }
 
+    .toggle {
+      user-select: none; /* helps avoid text selection on drag */
+    }
+
     .toggleKnobArea {
-      cursor: pointer;
+      position: relative;
       margin: auto;
       height: 30px;
       width: 60px;
       border-radius: 20px;
       background: rgba(255, 255, 255, 0.1);
-      position: relative;
-      overflow: hidden;
-      transition: all 0.2s;
       border: 1px solid rgba(255, 255, 255, 0);
+      overflow: hidden;
+      transition: background 0.2s ease;
+      cursor: pointer;
     }
 
     :host([selected]) .toggleKnobArea {
@@ -42751,19 +42837,27 @@ ConsentsoftwareToggle.styles = i`
     }
 
     .toggleKnobMover {
-      transition: all 0.2s;
+      position: relative;
+      height: 100%;
+      width: 100%;
     }
 
     .toggleKnobInner {
-      height: 30px;
-      width: 30px;
-      border-radius: 15px;
-      background: rgba(255, 255, 255, 0.5);
       position: absolute;
       top: 0;
       left: 0;
-      transition: all 0.2s;
+      width: 30px;
+      height: 30px;
+      border-radius: 15px;
+      background: rgba(255, 255, 255, 0.5);
+      transition: left 0.2s ease, background 0.2s ease;
       transform: scale(0.7);
+      /* Prevent scroll gestures on mobile */
+      touch-action: none;
+    }
+
+    .toggleKnobInner.dragging {
+      transition: background 0.2s ease;
     }
 
     :host([selected]) .toggleKnobInner {