@ixfx/components 0.2.3 → 0.2.4

package/dist/range-input/range-input.js

@@ -0,0 +1,472 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { tooltipValueStyles } from '../styles/tooltip.js';
+function normalize(value, min, max) {
+    return max === min ? 0 : (value - min) / (max - min);
+}
+let RangeInput = class RangeInput extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.min = 0;
+        this.max = 1;
+        this.value = 0;
+        this.step = 0.01;
+        this.orientation = `horizontal`;
+        this.swipeable = false;
+        this.tooltip = false;
+        this.tooltipOrientation = `top`;
+        /** True if this slider changed its value during the current pointer visit. */
+        this._swipeModified = false;
+        this._onPointerDown = (e) => {
+            if (!this.swipeable)
+                return;
+            e.preventDefault();
+            this._swipeModified = false;
+            this._applySwipeValue(this._valueFromPointer(e));
+            window.addEventListener(`pointerup`, this._onWindowPointerUp, { once: true });
+        };
+        this._onPointerMove = (e) => {
+            if (!this.swipeable || e.buttons === 0)
+                return;
+            this._applySwipeValue(this._valueFromPointer(e));
+        };
+        this._onPointerEnter = (e) => {
+            if (!this.swipeable || e.buttons === 0)
+                return;
+            this._swipeModified = false;
+            this._applySwipeValue(this._valueFromPointer(e));
+            window.addEventListener(`pointerup`, this._onWindowPointerUp, { once: true });
+        };
+        this._onPointerLeave = (_e) => {
+            if (!this.swipeable || !this._swipeModified)
+                return;
+            this._swipeModified = false;
+            this.dispatchEvent(new CustomEvent(`change`, { detail: { value: this.value }, bubbles: true, composed: true }));
+        };
+        this._onWindowPointerUp = () => {
+            if (!this._swipeModified)
+                return;
+            this._swipeModified = false;
+            this.dispatchEvent(new CustomEvent(`change`, { detail: { value: this.value }, bubbles: true, composed: true }));
+        };
+        this._handleInput = (e) => {
+            e.preventDefault();
+            e.stopImmediatePropagation();
+            const target = e.target;
+            const value = Number.parseFloat(target.value);
+            this.value = value;
+            this.style.setProperty(`--value`, String(normalize(value, this.min, this.max)));
+            this.dispatchEvent(new CustomEvent(`input`, { detail: { value }, bubbles: true, composed: true }));
+        };
+        this._handleChange = () => {
+            const value = Number.parseFloat(this._inputEl.value);
+            this.dispatchEvent(new CustomEvent(`change`, { detail: { value }, bubbles: true, composed: true }));
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener(`pointerdown`, this._onPointerDown);
+        this.addEventListener(`pointermove`, this._onPointerMove);
+        this.addEventListener(`pointerenter`, this._onPointerEnter);
+        this.addEventListener(`pointerleave`, this._onPointerLeave);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener(`pointerdown`, this._onPointerDown);
+        this.removeEventListener(`pointermove`, this._onPointerMove);
+        this.removeEventListener(`pointerenter`, this._onPointerEnter);
+        this.removeEventListener(`pointerleave`, this._onPointerLeave);
+        window.removeEventListener(`pointerup`, this._onWindowPointerUp);
+    }
+    _valueFromPointer(e) {
+        const rect = this.getBoundingClientRect();
+        // vertical: top = max, bottom = min (writing-mode: vertical-rl; direction: rtl)
+        const normalized = this.orientation === `vertical`
+            ? Math.max(0, Math.min(1, 1 - (e.clientY - rect.top) / rect.height))
+            : Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+        const raw = this.min + normalized * (this.max - this.min);
+        const snapped = Math.round((raw - this.min) / this.step) * this.step + this.min;
+        return Math.max(this.min, Math.min(this.max, snapped));
+    }
+    _applySwipeValue(value) {
+        this.value = value;
+        if (this._inputEl)
+            this._inputEl.value = String(value);
+        this.style.setProperty(`--value`, String(normalize(value, this.min, this.max)));
+        this.dispatchEvent(new CustomEvent(`input`, { detail: { value }, bubbles: true, composed: true }));
+        this._swipeModified = true;
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has(`value`) || changedProperties.has(`min`) || changedProperties.has(`max`)) {
+            this.style.setProperty(`--value`, String(normalize(this.value, this.min, this.max)));
+        }
+        if (this._tooltipEl) {
+            this._tooltipEl.valueFormatTooltip = (v) => {
+                const num = typeof v === `number` ? v : Number(v);
+                if (this.labelFormatter)
+                    return this.labelFormatter(num, normalize(num, this.min, this.max));
+                const decimals = this.step >= 1 ? 0 : this.step >= 0.1 ? 1 : 2;
+                return num.toFixed(decimals);
+            };
+        }
+    }
+    _formatTooltipLabel() {
+        const normalized = normalize(this.value, this.min, this.max);
+        if (this.labelFormatter)
+            return this.labelFormatter(this.value, normalized);
+        const decimals = this.step >= 1 ? 0 : this.step >= 0.1 ? 1 : 2;
+        return this.value.toFixed(decimals);
+    }
+    render() {
+        const tooltipEl = this.tooltip
+            ? html `
+      <ixfx-tooltip
+        style="--tooltip-background: var(--surface-5); --tooltip-color: var(--surface-5-text)"
+        .orientation=${this.tooltipOrientation}
+        anchor="--ixfx-ri-thumb"
+        .value=${this.value}
+      ></ixfx-tooltip>
+    `
+            : nothing;
+        return html `
+      <div class="wrap">
+        <div class="range-bg"></div>
+        <input
+          type="range"
+          .min=${String(this.min)}
+          .max=${String(this.max)}
+          .step=${String(this.step)}
+          .value=${String(this.value)}
+          @input=${this._handleInput}
+          @change=${this._handleChange}
+        >${tooltipEl}
+      </div>
+    `;
+    }
+    static { this.styles = [tooltipValueStyles, css `
+    :host {
+      display: block;
+      container-type: size;
+      user-select: none;
+      touch-action: none;
+      -webkit-touch-action: none;
+      width: var(--width, 200px);
+      height: var(--height, 2em);
+
+      /*
+       * Internal resolved vars — read public vars and apply defaults here.
+       * Public vars are NOT defined in :host {}, only read via fallback.
+       * This lets inherited values from ancestor elements flow through.
+       */
+      --_track-thickness: var(--track-thickness, 100%);
+      --_thumb-thickness: var(--thumb-thickness, 2em);
+      --_thumb-color: var(--thumb-color, var(--surface-2-text));
+      --_thumb-color-active: var(--thumb-color-active, var(--surface-2-text));
+      --_thumb-opacity: var(--thumb-opacity, 0.7);
+      --_thumb-opacity-hover: var(--thumb-opacity-hover, 0.8);
+      --_thumb-opacity-active: var(--thumb-opacity-active, 1); 
+      --_thumb-size: var(--thumb-size, var(--_track-thickness));
+      --_thumb-radius: var(--thumb-radius, 0);
+      --_thumb-border: var(--thumb-border, none);
+      --_thumb-shadow: var(--thumb-shadow, none);
+      --_track-radius: var(--track-radius, none);
+      --_track-corner-shape: var(--track-corner-shape, none);
+      --_bg-track: var(--background-track, var(--surface-4));
+      --_bg-track-hover: var(--background-track-hover, var(--_bg-track));
+      --_bg-track-value: var(--background-track-value, var(--surface-6));
+      --_bg-track-value-hover: var(--background-track-value-hover, var(--accent));
+      --_bg-track-value-active: var(--background-track-value-active, var(--accent));
+
+      --value: 0;
+      --sx1: calc(var(--_thumb-thickness) + var(--value) * (100% - var(--_thumb-thickness)));
+      --track-avail: calc(100% - var(--_thumb-thickness));
+      --sx: calc(var(--_thumb-thickness) + (var(--value) * var(--track-avail)));
+      --track-mask: linear-gradient(to right, rgba(0,0,0,1) var(--sx), rgba(0,0,0,0) var(--sx) 100%);
+      --track-mask-vertical: linear-gradient(to top, rgba(0,0,0,1) var(--sx), rgba(0,0,0,0) var(--sx) 100%);
+    }
+
+    :host([orientation="vertical"]) {
+      width: var(--width, 2em);
+      height: var(--height, 200px);
+    }
+
+    .wrap {
+      display: grid;
+      width: 100%;
+      height: 100%;
+    }
+
+    .wrap > * {
+      grid-area: 1 / 1;
+    }
+
+    .range-bg {
+      background: var(--_bg-track);
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+      border-radius: var(--_track-radius);
+      corner-shape: var(--_track-corner-shape);
+    }
+
+    .wrap:hover .range-bg {
+      background: var(--_bg-track-hover);
+    }
+
+    input[type=range] {
+      margin: 0;
+      padding: 0;
+      -webkit-appearance: none;
+      background: unset;
+      box-shadow: none;
+      width: 100%;
+      height: var(--_track-thickness);
+      align-self: center;
+    }
+
+    input[type=range]:focus {
+      outline: none;
+    }
+
+    /* Vertical layout */
+    :host([orientation="vertical"]) .range-bg {
+      background: var(--background-track-vertical, var(--_bg-track));
+      width: var(--_track-thickness);
+      height: 100%;
+      justify-self: center;
+    }
+
+    :host([orientation="vertical"]) .wrap:hover .range-bg {
+      background: var(--background-track-hover-vertical, var(--_bg-track-hover));
+    }
+
+    :host([orientation="vertical"]) input[type=range] {
+      writing-mode: vertical-rl;
+      direction: rtl;
+      width: var(--_track-thickness);
+      height: 100%;
+      justify-self: center;
+    }
+
+    /* ── Webkit thumb ── */
+    input[type=range]::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      opacity: var(--_thumb-opacity);
+      box-sizing: border-box;
+      anchor-name: --ixfx-ri-thumb;
+      width: var(--_thumb-thickness);
+      height: var(--_thumb-size);
+      border-radius: var(--_thumb-radius);
+      background: var(--_thumb-color);
+      border: var(--_thumb-border);
+      box-shadow: var(--_thumb-shadow);
+      margin-top: calc(max((var(--_thumb-thickness) - 1px - 1px) * 0.5, 0px) - var(--_thumb-thickness) * 0.5);
+    }
+
+    :host([orientation="vertical"]) input[type=range]::-webkit-slider-thumb {
+      width: var(--_thumb-size);
+      height: var(--_thumb-thickness);
+      margin-top: 0;
+      margin-left: calc(max((1em - 1px - 1px) * 0.5, 0px) - 1.2em * 0.5);
+    }
+
+    input[type=range]::-webkit-slider-thumb:hover {
+      opacity: var(--_thumb-opacity-hover);
+    }
+
+    input[type=range]::-webkit-slider-thumb:active {
+      opacity: var(--_thumb-opacity-active);
+    }
+    input[type=range]::-webkit-slider-thumb:hover,
+    input[type=range]::-webkit-slider-thumb:active {
+      background: var(--_thumb-color-active);
+    }
+
+    /* ── Webkit track ── */
+    input[type=range]::-webkit-slider-runnable-track {
+      height: var(--_track-thickness);
+      background: var(--_bg-track-value);
+      mask-image: var(--track-mask);
+      box-shadow: none;
+      margin: 0;
+      padding: 0;
+      border-radius: var(--_track-radius);
+      corner-shape: var(--_track-corner-shape);
+    }
+
+    input[type=range]:hover::-webkit-slider-runnable-track {
+      background: var(--_bg-track-value-hover);
+      mask-image: var(--track-mask);
+    }
+
+    input[type=range]:active::-webkit-slider-runnable-track {
+      background: var(--_bg-track-value-active);
+      mask-image: var(--track-mask);
+    }
+
+    :host([orientation="vertical"]) input[type=range]::-webkit-slider-runnable-track {
+      background: var(--background-track-value-vertical, var(--_bg-track-value));
+      mask-image: var(--track-mask-vertical);
+      width: var(--_track-thickness);
+      height: unset;
+    }
+
+    :host([orientation="vertical"]) input[type=range]:hover::-webkit-slider-runnable-track {
+      background: var(--background-track-value-hover-vertical, var(--_bg-track-value-hover));
+      mask-image: var(--track-mask-vertical);
+    }
+
+    :host([orientation="vertical"]) input[type=range]:active::-webkit-slider-runnable-track {
+      background: var(--background-track-value-active-vertical, var(--_bg-track-value-active));
+      mask-image: var(--track-mask-vertical);
+    }
+
+    /* ── Mozilla thumb ── */
+    input[type=range]::-moz-range-thumb {
+      box-sizing: border-box;
+      width: var(--_thumb-thickness);
+      height: var(--_thumb-size);
+      border-radius: var(--_thumb-radius);
+      background: var(--_thumb-color);
+      border: var(--_thumb-border);
+      box-shadow: var(--_thumb-shadow);
+    }
+
+    :host([orientation="vertical"]) input[type=range]::-moz-range-thumb {
+      width: var(--_thumb-size);
+      height: var(--_thumb-thickness);
+    }
+
+    input[type=range]::-moz-range-thumb:hover,
+    input[type=range]::-moz-range-thumb:active {
+      background: var(--_thumb-color-active);
+    }
+
+    /* ── Mozilla track ── */
+    input[type=range]::-moz-range-track {
+      height: var(--_track-thickness);
+      background: var(--_bg-track-value);
+      mask-image: var(--track-mask);
+      box-shadow: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    input[type=range]:hover::-moz-range-track {
+      background: var(--_bg-track-value-hover);
+      mask-image: var(--track-mask);
+    }
+
+    input[type=range]:active::-moz-range-track {
+      background: var(--_bg-track-value-active);
+      mask-image: var(--track-mask);
+    }
+
+    :host([orientation="vertical"]) input[type=range]::-moz-range-track {
+      background: var(--background-track-value-vertical, var(--_bg-track-value));
+      mask-image: var(--track-mask-vertical);
+      height: unset;
+      width: var(--_track-thickness);
+    }
+
+    :host([orientation="vertical"]) input[type=range]:hover::-moz-range-track {
+      background: var(--background-track-value-hover-vertical, var(--_bg-track-value-hover));
+      mask-image: var(--track-mask-vertical);
+    }
+
+    :host([orientation="vertical"]) input[type=range]:active::-moz-range-track {
+      background: var(--background-track-value-active-vertical, var(--_bg-track-value-active));
+      mask-image: var(--track-mask-vertical);
+    }
+
+    /* ── Swipeable mode ── */
+    /* Disable native pointer capture so the cursor can move freely between sliders */
+    :host([swipeable]) input {
+      pointer-events: none;
+    }
+
+    /* In swipeable mode, disable pointer events on wrap so host receives hover */
+    :host([swipeable]) .wrap {
+      pointer-events: none;
+    }
+
+    /* In swipeable mode, use host hover to trigger track/thumb hover styles */
+    :host([swipeable]):hover input[type=range]::-webkit-slider-runnable-track {
+      background: var(--_bg-track-value-hover);
+    }
+
+    :host([swipeable]):hover input[type=range]::-webkit-slider-thumb {
+      background: var(--_thumb-color-active);
+    }
+
+    :host([swipeable][orientation="vertical"]):hover input[type=range]::-webkit-slider-runnable-track {
+      background: var(--background-track-value-hover-vertical, var(--_bg-track-value-hover));
+    }
+
+    :host([swipeable]):hover input[type=range]::-moz-range-track {
+      background: var(--_bg-track-value-hover);
+    }
+
+    :host([swipeable]):hover input[type=range]::-moz-range-thumb {
+      background: var(--_thumb-color-active);
+    }
+
+    :host([swipeable][orientation="vertical"]):hover input[type=range]::-moz-range-track {
+      background: var(--background-track-value-hover-vertical, var(--_bg-track-value-hover));
+    }
+
+    :host([swipeable]):hover .range-bg {
+      background: var(--_bg-track-hover);
+    }
+
+    :host([swipeable][orientation="vertical"]):hover .range-bg {
+      background: var(--background-track-hover-vertical, var(--_bg-track-hover));
+    }
+  `]; }
+};
+__decorate([
+    property({ type: Number })
+], RangeInput.prototype, "min", void 0);
+__decorate([
+    property({ type: Number })
+], RangeInput.prototype, "max", void 0);
+__decorate([
+    property({ type: Number })
+], RangeInput.prototype, "value", void 0);
+__decorate([
+    property({ type: Number })
+], RangeInput.prototype, "step", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], RangeInput.prototype, "orientation", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], RangeInput.prototype, "swipeable", void 0);
+__decorate([
+    property({ type: Boolean })
+], RangeInput.prototype, "tooltip", void 0);
+__decorate([
+    property({ type: String, attribute: `tooltip-orientation` })
+], RangeInput.prototype, "tooltipOrientation", void 0);
+__decorate([
+    property({ attribute: false })
+], RangeInput.prototype, "labelFormatter", void 0);
+__decorate([
+    query(`input`)
+], RangeInput.prototype, "_inputEl", void 0);
+__decorate([
+    query(`ixfx-tooltip`)
+], RangeInput.prototype, "_tooltipEl", void 0);
+RangeInput = __decorate([
+    customElement(`ixfx-range-input`)
+], RangeInput);
+export { RangeInput };
+//# sourceMappingURL=range-input.js.map

package/dist/range-input/range-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"range-input.js","sourceRoot":"","sources":["../../src/range-input/range-input.ts"],"names":[],"mappings":"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"}

package/dist/selecthorizontal.d.ts

@@ -1,7 +1,7 @@
 import { LitElement } from "lit";
 export declare class SelectHorizontalElement extends LitElement {
     editMode: boolean;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     static styles: import("lit").CSSResult;
 }
 declare global {

package/dist/selecthorizontal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"selecthorizontal.d.ts","sourceRoot":"","sources":["../src/selecthorizontal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,qBACa,uBAAwB,SAAQ,UAAU;IAErD,QAAQ,UAAS;IAGjB,MAAM;IASN,MAAM,CAAC,MAAM,0BAed;CACA;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,+BAA+B,EAAE,uBAAuB,CAAC;KAC1D;CACF"}
+{"version":3,"file":"selecthorizontal.d.ts","sourceRoot":"","sources":["../src/selecthorizontal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,qBACa,uBAAwB,SAAQ,UAAU;IAErD,QAAQ,UAAS;IAEjB,MAAM;IASN,MAAM,CAAC,MAAM,0BAeb;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,+BAA+B,EAAE,uBAAuB,CAAC;KAC1D;CACF"}

package/dist/selecthorizontal.js

@@ -31,8 +31,8 @@ let SelectHorizontalElement = class SelectHorizontalElement extends LitElement {
   ::slotted(*),option {
     user-select: none;
     scroll-snap-align: start;
-    border: 1px solid silver;
-    color:red;
+    border: var(--border);
+    color: var(--accent);
   }
 `; }
 };
@@ -40,7 +40,7 @@ __decorate([
     property({ type: Boolean })
 ], SelectHorizontalElement.prototype, "editMode", void 0);
 SelectHorizontalElement = __decorate([
-    customElement('ixfx-selecthorizontal-element')
+    customElement(`ixfx-selecthorizontal-element`)
 ], SelectHorizontalElement);
 export { SelectHorizontalElement };
 //# sourceMappingURL=selecthorizontal.js.map

package/dist/selecthorizontal.js.map

@@ -1 +1 @@
-{"version":3,"file":"selecthorizontal.js","sourceRoot":"","sources":["../src/selecthorizontal.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGrD,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,UAAU;IAAhD;;QAEL,aAAQ,GAAG,KAAK,CAAC;IA4BnB,CAAC;IAzBC,MAAM;QACJ,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QACtB,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;aAEM,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;CAepB,AAfc,CAed;;AA3BC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yDACX;AAFN,uBAAuB;IADnC,aAAa,CAAC,+BAA+B,CAAC;GAClC,uBAAuB,CA8BnC"}
+{"version":3,"file":"selecthorizontal.js","sourceRoot":"","sources":["../src/selecthorizontal.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGrD,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,UAAU;IAAhD;;QAEL,aAAQ,GAAG,KAAK,CAAC;IA2BnB,CAAC;IAzBC,MAAM;QACJ,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QACtB,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;aAEM,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;CAepB,AAfc,CAeb;;AA1BA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yDACX;AAFN,uBAAuB;IADnC,aAAa,CAAC,+BAA+B,CAAC;GAClC,uBAAuB,CA6BnC"}

package/dist/snap-container/snap-container.d.ts

@@ -0,0 +1,45 @@
+import { html, LitElement } from 'lit';
+export type SnapLogic = `centre` | `balanced`;
+export type ClickSnapMode = `closest` | `step`;
+export declare class SnapContainer extends LitElement {
+    static styles: import("lit").CSSResult;
+    orientation: `horizontal` | `vertical`;
+    snapPositions: number;
+    snapLogic: SnapLogic;
+    clickSnap: `closest` | `step`;
+    snap: number;
+    private _dragging;
+    private _dragStart;
+    private _dragThreshold;
+    private _thresholdReached;
+    private _currentDragIndex;
+    private _child;
+    private get _isHorizontal();
+    private _getChild;
+    private _computeSnapPositions;
+    private _getSnapIndex;
+    private _clampChildPosition;
+    private _updateChildPosition;
+    private _onPointerDown;
+    private _onPointerMove;
+    private _onPointerUp;
+    private _onKeyDown;
+    firstUpdated(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    render(): ReturnType<typeof html>;
+}
+export type SnapChangeDetail = {
+    readonly previousSnap: number;
+    readonly newSnap: number;
+};
+export type SnapChangeEvent = CustomEvent<SnapChangeDetail>;
+export type SnapInputDetail = {
+    readonly index: number;
+};
+export type SnapInputEvent = CustomEvent<SnapInputDetail>;
+declare global {
+    interface HTMLElementTagNameMap {
+        'ixfx-snap-container': SnapContainer;
+    }
+}
+//# sourceMappingURL=snap-container.d.ts.map

package/dist/snap-container/snap-container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"snap-container.d.ts","sourceRoot":"","sources":["../../src/snap-container/snap-container.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAC;AAC9C,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,MAAM,CAAC;AAE/C,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,0BAuDpB;IAGF,WAAW,EAAE,YAAY,GAAG,UAAU,CAAgB;IAGtD,aAAa,SAAK;IAGlB,SAAS,EAAE,SAAS,CAAc;IAGlC,SAAS,EAAE,SAAS,GAAG,MAAM,CAAa;IAG1C,IAAI,SAAK;IAGT,OAAO,CAAC,SAAS,CAAS;IAE1B,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,cAAc,CAAM;IAC5B,OAAO,CAAC,iBAAiB,CAAS;IAClC,OAAO,CAAC,iBAAiB,CAAK;IAC9B,OAAO,CAAC,MAAM,CAA4B;IAE1C,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,qBAAqB;IAwC7B,OAAO,CAAC,aAAa;IA8BrB,OAAO,CAAC,mBAAmB;IAW3B,OAAO,CAAC,oBAAoB;IAwB5B,OAAO,CAAC,cAAc,CAwDpB;IAEF,OAAO,CAAC,cAAc,CAuBpB;IAEF,OAAO,CAAC,YAAY,CAyBlB;IAEF,OAAO,CAAC,UAAU,CAkChB;IAEO,YAAY,IAAI,IAAI;IAKpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAMtD,MAAM,IAAI,UAAU,CAAC,OAAO,IAAI,CAAC;CAY3C;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,WAAW,CAAC,gBAAgB,CAAC,CAAC;AAE5D,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,WAAW,CAAC,eAAe,CAAC,CAAC;AAE1D,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,aAAa,CAAC;KACtC;CACF"}