@alegendstale/holly-components 0.2.2

package/README.md

@@ -0,0 +1,21 @@
+# Web Components
+
+## Absolute Container
+
+A container component which can serve as a modal or popup wrapper.
+
+## Bottom Sheet
+
+A container component primarily for mobile devices which slides up and down from the bottom of the screen.
+
+## Carousel Scroller
+
+A component which can have any number of sliders, and rotates circularly.
+
+## Color Palette
+
+A color palette component, with editing, menus and more included.
+
+## Tooltip
+
+A simple tooltip component.

package/dist/components/absolute-container/absolute-container.d.ts

@@ -0,0 +1,34 @@
+import { LitElement } from 'lit';
+import { Ref } from 'lit/directives/ref.js';
+import { EventEmitter } from '../../utils/EventEmitter';
+type EventMap = {
+    visibility: [open: boolean];
+};
+export declare class AbsoluteContainer extends LitElement {
+    static styles: import("lit").CSSResult[];
+    dialogRef: Ref<HTMLDialogElement>;
+    private _open;
+    set open(val: boolean);
+    get open(): boolean;
+    protected left: number;
+    protected top: number;
+    emitter: EventEmitter<EventMap>;
+    /**
+     * Disables the ContextEvent (right click, or long touch)
+     *
+     * Useful for context menus
+     */
+    disableContextEvent: boolean;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    toggle(): void;
+    setOpen(val: boolean): void;
+    setPosition(left: number, top: number): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'absolute-container': AbsoluteContainer;
+    }
+}
+export {};
+//# sourceMappingURL=absolute-container.d.ts.map

package/dist/components/absolute-container/absolute-container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"absolute-container.d.ts","sourceRoot":"","sources":["../../../src/components/absolute-container/absolute-container.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,EAAa,GAAG,EAAO,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,KAAK,QAAQ,GAAG;IACf,UAAU,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,CAAA;CAC3B,CAAA;AAED,qBACa,iBAAkB,SAAQ,UAAU;IAChD,MAAM,CAAC,MAAM,4BAkBX;IAEF,SAAS,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAe;IAEhD,OAAO,CAAC,KAAK,CAAkB;IAC/B,IACI,IAAI,CAAC,GAAG,EAAE,OAAO,EAYpB;IACD,IAAI,IAAI,IAbM,OAAO,CAepB;IAGD,SAAS,CAAC,IAAI,EAAE,MAAM,CAAK;IAG3B,SAAS,CAAC,GAAG,EAAE,MAAM,CAAK;IAE1B,OAAO,EAAE,YAAY,CAAC,QAAQ,CAAC,CAA+B;IAE9D;;;;OAIG;IAEH,mBAAmB,EAAE,OAAO,CAAS;IAErC,oBAAoB,IAAI,IAAI;IAM5B,MAAM;IA2BC,MAAM;IAIN,OAAO,CAAC,GAAG,EAAE,OAAO;IAIpB,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM;CAI5C;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,oBAAoB,EAAE,iBAAiB,CAAC;KACxC;CACD"}

package/dist/components/absolute-container/absolute-container.js

@@ -0,0 +1,96 @@
+import { css as h, LitElement as d, html as c } from "lit";
+import { property as a, state as f, customElement as u } from "lit/decorators.js";
+import { createRef as m, ref as g } from "lit/directives/ref.js";
+import { styleMap as b } from "lit/directives/style-map.js";
+import { EventEmitter as v } from "../../utils/EventEmitter.js";
+var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, n = (e, t, r, i) => {
+  for (var o = i > 1 ? void 0 : i ? _(t, r) : t, l = e.length - 1, p; l >= 0; l--)
+    (p = e[l]) && (o = (i ? p(t, r, o) : p(o)) || o);
+  return i && o && y(t, r, o), o;
+};
+let s = class extends d {
+  constructor() {
+    super(...arguments), this.dialogRef = m(), this._open = !1, this.left = 0, this.top = 0, this.emitter = new v(), this.disableContextEvent = !1;
+  }
+  set open(e) {
+    this._open = e, requestAnimationFrame(() => {
+      if (!this.dialogRef.value) return;
+      let t = this.dialogRef.value;
+      t.open ? t.close() : t.showModal();
+    }), this.emitter.emit("visibility", e);
+  }
+  get open() {
+    return this._open;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.emitter.clear();
+  }
+  render() {
+    const e = {
+      inset: this.left === 0 && this.top === 0 ? 0 : "unset",
+      left: `${this.left}px`,
+      top: `${this.top}px`
+    };
+    return c`
+			<dialog
+				part='dialog'
+				style=${b(e)}
+				@mousedown=${(t) => {
+      if (!(t.target instanceof HTMLElement)) return;
+      const r = t.offsetX < 0 || t.offsetX > t.target.offsetWidth, i = t.offsetY < 0 || t.offsetY > t.target.offsetHeight;
+      (r || i) && (this.open = !1);
+    }}
+				@contextmenu=${(t) => this.disableContextEvent && t.preventDefault()}
+				${g(this.dialogRef)}
+			>
+				<slot></slot>
+			</dialog>
+		`;
+  }
+  toggle() {
+    this.open = !this.open;
+  }
+  setOpen(e) {
+    this.open = e;
+  }
+  setPosition(e, t) {
+    this.left = e, this.top = t;
+  }
+};
+s.styles = [
+  h`
+			:host {
+				display: block;
+			}
+
+			dialog {
+				width: min-content;
+				border: 0;
+				padding: 0;
+				background-color: transparent;
+				scrollbar-width: thin;
+
+				&::backdrop {
+					background-color: transparent;
+				}
+			}
+		`
+];
+n([
+  a({ type: Boolean, reflect: !0 })
+], s.prototype, "open", 1);
+n([
+  f()
+], s.prototype, "left", 2);
+n([
+  f()
+], s.prototype, "top", 2);
+n([
+  a({ type: Boolean, reflect: !0 })
+], s.prototype, "disableContextEvent", 2);
+s = n([
+  u("absolute-container")
+], s);
+export {
+  s as AbsoluteContainer
+};

package/dist/components/absolute-container/absolute-container.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+declare const meta: Meta;
+export default meta;
+type Props = {
+    disableContextEvent: boolean;
+};
+type Story = StoryObj<Props>;
+export declare const Example: Story;
+//# sourceMappingURL=absolute-container.stories.d.ts.map

package/dist/components/absolute-container/absolute-container.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"absolute-container.stories.d.ts","sourceRoot":"","sources":["../../../src/components/absolute-container/absolute-container.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAKhE,QAAA,MAAM,IAAI,EAAE,IAIX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG;IAAE,mBAAmB,EAAE,OAAO,CAAA;CAAE,CAAC;AAE9C,KAAK,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AA6B7B,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC"}

package/dist/components/absolute-container/index.d.ts

@@ -0,0 +1,2 @@
+import './absolute-container';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/absolute-container/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/absolute-container/index.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA"}

package/dist/components/bottom-sheet/bottom-sheet.d.ts

@@ -0,0 +1,68 @@
+import { LitElement } from 'lit';
+import { EventEmitter } from '../../utils/EventEmitter';
+type EventMap = {
+    snapped: [snapped: boolean, activeElement: Element | null | undefined];
+};
+export declare class BottomSheet extends LitElement {
+    static styles: import("lit").CSSResult[];
+    private dialog;
+    private nonModalDialog?;
+    private modalDialog?;
+    open: boolean;
+    nonmodal: boolean;
+    dragging: boolean;
+    scrolling: boolean;
+    snapPoints: number[];
+    defaultSnap: number;
+    set height(val: number);
+    get height(): number;
+    emitter: EventEmitter<EventMap>;
+    private startY;
+    private startHeight;
+    private previousTouch;
+    private lastScrollTop;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    /**
+     * Find closest point index to target in array
+     */
+    private closestSnapPointIndex;
+    /**
+     * Sets sheet height to the closest snap
+     * @param height percentage
+     */
+    private setSnap;
+    /**
+     * @returns Whether sheet is snapped to a snap point
+     */
+    private isSnapped;
+    /**
+     * Sets the display state of the sheet
+     */
+    showSheet(open: boolean): void;
+    /**
+     * Toggles the display state of the sheet
+     */
+    toggleSheet(): void;
+    /**
+     * Remove overscroll to prevent mobile browsers from refreshing during drag
+     */
+    private setOverscroll;
+    private setDialog;
+    private touchDown;
+    private touchMove;
+    private touchUp;
+    private pointerDown;
+    private pointerMove;
+    private pointerUp;
+    private onSnapped;
+    private contentScroll;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bottom-sheet': BottomSheet;
+    }
+}
+export {};
+//# sourceMappingURL=bottom-sheet.d.ts.map

package/dist/components/bottom-sheet/bottom-sheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bottom-sheet.d.ts","sourceRoot":"","sources":["../../../src/components/bottom-sheet/bottom-sheet.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,KAAK,QAAQ,GAAG;IACf,OAAO,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;CACvE,CAAC;AAEF,qBACa,WAAY,SAAQ,UAAU;IAC1C,MAAM,CAAC,MAAM,4BAmHX;IAGF,OAAO,CAAC,MAAM,CAAqB;IAGnC,OAAO,CAAC,cAAc,CAAC,CAAoB;IAG3C,OAAO,CAAC,WAAW,CAAC,CAAoB;IAGjC,IAAI,EAAE,OAAO,CAAS;IAGtB,QAAQ,EAAE,OAAO,CAAS;IAG1B,QAAQ,EAAE,OAAO,CAAS;IAG1B,SAAS,EAAE,OAAO,CAAS;IAG3B,UAAU,EAAE,MAAM,EAAE,CAAM;IAG1B,WAAW,EAAE,MAAM,CAAO;IAEjC,IAMI,MAAM,CAAC,GAAG,EAAE,MAAM,EAQrB;IACD,IAAI,MAAM,IATM,MAAM,CAWrB;IAEM,OAAO,yBAA+B;IAE7C,OAAO,CAAC,MAAM,CAAa;IAC3B,OAAO,CAAC,WAAW,CAAa;IAChC,OAAO,CAAC,aAAa,CAAsB;IAC3C,OAAO,CAAC,aAAa,CAAa;IAElC,iBAAiB,IAAI,IAAI;IAczB,oBAAoB,IAAI,IAAI;IAK5B,MAAM;IAqDN;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAI7B;;;OAGG;IACH,OAAO,CAAC,OAAO;IAUf;;OAEG;IACH,OAAO,CAAC,SAAS;IAIjB;;OAEG;IACI,SAAS,CAAC,IAAI,EAAE,OAAO;IAO9B;;OAEG;IACI,WAAW;IAIlB;;OAEG;IACH,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,SAAS;IAsBjB,OAAO,CAAC,SAAS;IAOjB,OAAO,CAAC,SAAS;IAwCjB,OAAO,CAAC,OAAO;IAQf,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,WAAW;IAgBnB,OAAO,CAAC,SAAS;IAQjB,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,aAAa;CAUrB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,cAAc,EAAE,WAAW,CAAC;KAC5B;CACD"}

package/dist/components/bottom-sheet/bottom-sheet.js

@@ -0,0 +1,312 @@
+import { css as p, LitElement as g, html as d } from "lit";
+import { query as c, property as a, customElement as u } from "lit/decorators.js";
+import { EventEmitter as m } from "../../utils/EventEmitter.js";
+var f = Object.defineProperty, v = Object.getOwnPropertyDescriptor, r = (t, e, o, s) => {
+  for (var n = s > 1 ? void 0 : s ? v(e, o) : e, h = t.length - 1, l; h >= 0; h--)
+    (l = t[h]) && (n = (s ? l(e, o, n) : l(n)) || n);
+  return s && n && f(e, o, n), n;
+};
+let i = class extends g {
+  constructor() {
+    super(...arguments), this.open = !1, this.nonmodal = !1, this.dragging = !1, this.scrolling = !1, this.snapPoints = [], this.defaultSnap = NaN, this.emitter = new m(), this.startY = 0, this.startHeight = 0, this.previousTouch = null, this.lastScrollTop = 0;
+  }
+  /**
+   * Sets the height of the sheet
+   * Infinity can be used to fit content automatically
+   * @param height percentage or infinity
+   */
+  set height(t) {
+    var o;
+    const e = Math.min(Math.max(t, 0), 100);
+    this.emitter.emit("snapped", this.isSnapped(e), (o = this.shadowRoot) == null ? void 0 : o.activeElement), isFinite(t) ? this.style.setProperty("--height", `${Math.round(e)}dvh`) : this.style.setProperty("--height", "fit-content");
+  }
+  get height() {
+    return parseInt(this.style.getPropertyValue("--height"));
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const t = this.snapPoints.length === 2 ? 0 : 1;
+    this.defaultSnap = this.snapPoints.length > 0 ? isNaN(this.defaultSnap) ? this.snapPoints[Math.round(this.snapPoints.length / 2) - t] : this.defaultSnap : NaN, this.emitter.on("snapped", this.onSnapped.bind(this)), requestAnimationFrame(() => {
+      this.showSheet(this.open);
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.emitter.clear();
+  }
+  render() {
+    return requestAnimationFrame(() => {
+      this.setDialog(this.open);
+    }), d`
+			<dialog
+				@click=${(t) => {
+      t.stopPropagation(), this.toggleSheet();
+    }}
+			>
+				<button 
+					id="handle"
+					part="handle"
+					@pointerdown=${this.pointerDown}
+					@pointermove=${this.pointerMove}
+					@pointerup=${this.pointerUp}
+					@click=${(t) => {
+      t.stopPropagation();
+    }}
+				>
+					⸻
+				</button>
+				
+				<div
+					id='content'
+					part="content"
+					tabindex='0'
+					@touchstart=${this.touchDown}
+					@touchend=${this.touchUp}
+					@touchmove=${this.touchMove}
+					@scroll=${this.contentScroll}
+					@touchcancel=${(t) => {
+      console.warn("User Agent touchcancelled the event.", t.target);
+    }}
+					@dragstart=${(t) => {
+      t.preventDefault();
+    }}
+					@click=${(t) => {
+      t.stopPropagation();
+    }}
+				>
+					<slot></slot>
+				</div>
+			</dialog>
+		`;
+  }
+  /**
+   * Find closest point index to target in array
+   */
+  closestSnapPointIndex(t, e) {
+    return t.reduce((o, s, n) => Math.abs(s - e) < Math.abs(t[o] - e) ? n : o, 0);
+  }
+  /**
+   * Sets sheet height to the closest snap
+   * @param height percentage
+   */
+  setSnap(t) {
+    if (this.snapPoints.length === 0) return;
+    const e = this.snapPoints[this.closestSnapPointIndex(this.snapPoints, t)];
+    e === this.snapPoints[0] && this.showSheet(!1), this.height = e;
+  }
+  /**
+   * @returns Whether sheet is snapped to a snap point
+   */
+  isSnapped(t) {
+    return this.snapPoints.some((e) => e === Math.round(t));
+  }
+  /**
+   * Sets the display state of the sheet
+   */
+  showSheet(t) {
+    this.open = t, this.height = isNaN(this.defaultSnap) ? 1 / 0 : this.defaultSnap, this.setOverscroll(t), this.setDialog(t);
+  }
+  /**
+   * Toggles the display state of the sheet
+   */
+  toggleSheet() {
+    this.showSheet(!this.open);
+  }
+  /**
+   * Remove overscroll to prevent mobile browsers from refreshing during drag
+   */
+  setOverscroll(t) {
+    const e = document.querySelector("html"), o = document.querySelector("body"), s = t ? "none" : "unset";
+    e && e.style.setProperty("overscroll-behavior-block", s), o && o.style.setProperty("overscroll-behavior-block", s);
+  }
+  setDialog(t) {
+    t && !this.dialog.open ? this.nonmodal ? this.dialog.show() : this.dialog.showModal() : t && this.dialog.open ? this.nonmodal && this.modalDialog ? (this.dialog.close(), this.dialog.show()) : !this.nonmodal && this.nonModalDialog && (this.dialog.close(), this.dialog.showModal()) : this.dialog.close();
+  }
+  touchDown(t) {
+    t.target instanceof HTMLElement && (this.startY = t.touches[0].pageY, this.startHeight = this.height);
+  }
+  touchMove(t) {
+    if (!(t.target instanceof HTMLElement)) return;
+    const e = t.touches[0];
+    let o = NaN;
+    this.previousTouch && (o = e.pageY - this.previousTouch.pageY), this.previousTouch = e;
+    let s = this.startY - t.touches[0].pageY;
+    const n = this.startHeight + s / window.innerHeight * 100;
+    !this.scrolling && this.dragging ? this.height = n : this.scrolling && this.dragging || this.scrolling && !this.dragging ? t.target.focus({ preventScroll: !0 }) : !this.scrolling && !this.dragging && (o >= 0 ? this.height = Math.min(n, this.defaultSnap || this.snapPoints[this.snapPoints.length - 1]) : t.target.focus({ preventScroll: !0 }));
+  }
+  touchUp(t) {
+    t.target instanceof HTMLElement && (this.previousTouch = null, this.setSnap(this.height));
+  }
+  pointerDown(t) {
+    t.target instanceof HTMLElement && (t.target.setPointerCapture(t.pointerId), this.startY = t.pageY, this.startHeight = this.height);
+  }
+  pointerMove(t) {
+    if (!(t.target instanceof HTMLElement && t.target.hasPointerCapture(t.pointerId)) || !t.isPrimary) return;
+    t.preventDefault();
+    let e = this.startY - t.pageY;
+    const o = this.startHeight + e / window.innerHeight * 100;
+    t.target.id === "handle" && (this.height = o);
+  }
+  pointerUp(t) {
+    t.target instanceof HTMLElement && (t.target.releasePointerCapture(t.pointerId), this.setSnap(this.height));
+  }
+  onSnapped(t, e) {
+    this.dragging = !t;
+  }
+  contentScroll(t) {
+    if (!(t.target instanceof HTMLElement && t.target.id === "content")) return;
+    const e = t.target.scrollTop;
+    this.scrolling = e !== this.lastScrollTop, this.lastScrollTop = e, e === 0 && (this.scrolling = !1);
+  }
+};
+i.styles = [
+  p`
+			:host {
+				contain: content;
+				overscroll-behavior-block: none;
+				--height: fit-content;
+			}
+
+			:host([dragging]) dialog {
+				#content {
+					cursor: grabbing;
+					/* Important! Prevents mobile browsers from reclaiming PointerMove event on touch devices */
+					touch-action: none;
+					/* Prevent weird scrollbar movement on mobile when dragging */
+					overflow-y: hidden;
+				}
+			}
+
+			:host(:not([dragging])) dialog {
+				/* Only animate if not dragging */
+				transition-property: overlay opacity display;
+				transition-duration: 0.25s;
+				transition-behavior: allow-discrete;
+
+				&::backdrop {
+					transition-property: overlay opacity display;
+					transition-duration: 0.25s;
+					transition-behavior: allow-discrete;
+				}
+
+				#content {
+					/* Allow scroll */
+					touch-action: pan-y;
+				}
+			}
+
+			dialog {
+				display: none;
+				opacity: 0;
+				translate: 0 var(--height);
+
+				height: var(--height);
+				min-height: 0;
+				max-height: 100%;
+				min-width: 100%;
+				max-width: 100%;
+				flex-direction: column;
+				box-sizing: border-box;
+				padding: 0;
+				border: 0;
+				background-color: light-dark(#d9d9d9, #1c1c1c);
+				/* Important! Removes default browser styling, allowing bottom to work */
+				inset: unset;
+				bottom: 0;
+				left: 0;
+				overflow-y: hidden;
+
+				/* Important! Prevents mobile browsers from reclaiming PointerMove event on touch devices */
+				touch-action: none;
+				/* Prevent weird scrollbar movement on mobile when dragging */
+				overflow-y: hidden;
+
+				&[open] {
+					display: flex;
+					opacity: 1;
+					translate: 0 0;
+
+					&::backdrop {
+						opacity: 0.8;
+					}
+				}
+
+				&::backdrop {
+					background: black;
+					opacity: 0;
+				}
+			}
+
+			@starting-style {
+				dialog[open] {
+					opacity: 0;
+					translate: 0 var(--height);
+
+					&::backdrop {
+						opacity: 0;
+					}
+				}
+			}
+
+			#handle {
+				display: block;
+				position: sticky;
+				top: 0;
+				background: transparent;
+				border: 0;
+				cursor: grabbing;
+				min-height: 35px;
+				user-select: none;
+				touch-action: none;
+			}
+
+			div {
+				/* display: contents; */
+				overflow-y: auto;
+				scrollbar-width: none;
+				box-sizing: border-box;
+				min-height: 100%;
+				min-width: 100%;
+			}
+
+			::slotted(*) {
+				/* Prevent slotted items from taking pointer events */
+				/* pointer-events: none; */
+			}
+		`
+];
+r([
+  c("dialog")
+], i.prototype, "dialog", 2);
+r([
+  c("dialog:not(:modal)")
+], i.prototype, "nonModalDialog", 2);
+r([
+  c("dialog:modal")
+], i.prototype, "modalDialog", 2);
+r([
+  a({ type: Boolean, reflect: !0 })
+], i.prototype, "open", 2);
+r([
+  a({ type: Boolean, reflect: !0 })
+], i.prototype, "nonmodal", 2);
+r([
+  a({ type: Boolean, reflect: !0 })
+], i.prototype, "dragging", 2);
+r([
+  a({ type: Boolean, reflect: !0 })
+], i.prototype, "scrolling", 2);
+r([
+  a({ type: Array })
+], i.prototype, "snapPoints", 2);
+r([
+  a({ type: Number })
+], i.prototype, "defaultSnap", 2);
+r([
+  a({ type: Number, reflect: !0 })
+], i.prototype, "height", 1);
+i = r([
+  u("bottom-sheet")
+], i);
+export {
+  i as BottomSheet
+};

package/dist/components/bottom-sheet/bottom-sheet.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+declare const meta: Meta;
+export default meta;
+type Props = {
+    open: boolean;
+    nonmodal: boolean;
+    snapPoints: number[];
+    defaultSnap: number;
+};
+type Story = StoryObj<Props>;
+export declare const Modal: Story;
+export declare const NonModal: Story;
+export declare const Thirds: Story;
+//# sourceMappingURL=bottom-sheet.stories.d.ts.map

package/dist/components/bottom-sheet/bottom-sheet.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bottom-sheet.stories.d.ts","sourceRoot":"","sources":["../../../src/components/bottom-sheet/bottom-sheet.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAGhE,QAAA,MAAM,IAAI,EAAE,IAIX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAC;IAAC,UAAU,EAAE,MAAM,EAAE,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,CAAC;AAE7F,KAAK,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAiB7B,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAMpB,CAAC"}

package/dist/components/bottom-sheet/bottom-sheet.test.d.ts

@@ -0,0 +1,2 @@
+import './bottom-sheet';
+//# sourceMappingURL=bottom-sheet.test.d.ts.map

package/dist/components/bottom-sheet/bottom-sheet.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bottom-sheet.test.d.ts","sourceRoot":"","sources":["../../../src/components/bottom-sheet/bottom-sheet.test.ts"],"names":[],"mappings":"AAEA,OAAO,gBAAgB,CAAA"}

package/dist/components/bottom-sheet/index.d.ts

@@ -0,0 +1,2 @@
+import './bottom-sheet';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/bottom-sheet/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/bottom-sheet/index.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,CAAA"}

package/dist/components/canvas/canvas-base.d.ts

@@ -0,0 +1,16 @@
+import { EventEmitter } from '../../utils/EventEmitter';
+type EventMap = {
+    click: [hex: string];
+    move: [e: client];
+};
+import { LitElement } from 'lit';
+export declare class CanvasBase extends LitElement {
+    canvas: HTMLCanvasElement;
+    protected context: CanvasRenderingContext2D;
+    emitter: EventEmitter<EventMap>;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    getCanvasHex(clientX: number, clientY: number): string;
+}
+export {};
+//# sourceMappingURL=canvas-base.d.ts.map

package/dist/components/canvas/canvas-base.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-base.d.ts","sourceRoot":"","sources":["../../../src/components/canvas/canvas-base.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGxD,KAAK,QAAQ,GAAG;IACf,KAAK,EAAE,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC;IACrB,IAAI,EAAE,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;CAClB,CAAC;AAEF,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,qBACa,UAAW,SAAQ,UAAU;IAEzC,MAAM,EAAG,iBAAiB,CAAC;IAE3B,SAAS,CAAC,OAAO,EAAG,wBAAwB,CAAC;IAEtC,OAAO,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAgC;IAEtE,oBAAoB,IAAI,IAAI;IAK5B,MAAM;IAsBC,YAAY,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM;CAWpD"}

package/dist/components/canvas/canvas-base.js

@@ -0,0 +1,48 @@
+import m from "colorsea";
+import { EventEmitter as u } from "../../utils/EventEmitter.js";
+import { ref as f } from "lit/directives/ref.js";
+import { LitElement as h, html as x } from "lit";
+import { query as d, customElement as g } from "lit/decorators.js";
+var C = Object.defineProperty, b = Object.getOwnPropertyDescriptor, v = (i, e, r, a) => {
+  for (var t = a > 1 ? void 0 : a ? b(e, r) : e, n = i.length - 1, s; n >= 0; n--)
+    (s = i[n]) && (t = (a ? s(e, r, t) : s(t)) || t);
+  return a && t && C(e, r, t), t;
+};
+let c = class extends h {
+  constructor() {
+    super(...arguments), this.emitter = new u();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.emitter.clear();
+  }
+  render() {
+    return x`
+			<canvas
+				@click=${(e) => this.emitter.emit("click", this.getCanvasHex(e.clientX, e.clientY))}
+				@pointermove=${(e) => {
+      e.isPrimary && this.emitter.emit("move", { x: e.clientX, y: e.clientY });
+    }}
+				${f((e) => {
+      e instanceof HTMLCanvasElement && (this.context = e.getContext("2d", { willReadFrequently: !0, alpha: !0 }));
+    })}
+			>
+			</canvas>
+		`;
+  }
+  // Retrieves the hex from the mouse position
+  getCanvasHex(i, e) {
+    const r = this.canvas.getBoundingClientRect();
+    let a = i - r.left, t = e - r.top, [n, s, o, p] = this.context.getImageData(a, t, 1, 1).data;
+    const l = Math.round(p / 255 * 100);
+    return l !== 255 ? m([n, s, o, l]).hex() : m([n, s, o]).hex();
+  }
+};
+v([
+  d("canvas")
+], c.prototype, "canvas", 2);
+c = v([
+  g("canvas-base")
+], c);
+export {
+  c as CanvasBase
+};