@alegendstale/holly-components 1.4.0 → 2.0.2

package/README.md

@@ -1,4 +1,4 @@
-# Web Components
+# Holly Components
 
 ## Absolute Container
 
@@ -8,10 +8,18 @@ A container component which can serve as a modal or popup wrapper.
 
 A container component primarily for mobile devices which slides up and down from the bottom of the screen.
 
+## Canvas
+
+Utility component for drawing a canvas.
+
 ## 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.
+
 ## Draw SVG
 
 Draws the path of an SVG
@@ -23,7 +31,3 @@ Responsively sizes SVG based on font-size
 ## Tooltip
 
 A simple tooltip component.
-
-## Color Palette
-
-A color palette component, with editing, menus and more included.

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

@@ -1,28 +1,42 @@
 import { LitElement } from 'lit';
-import { Ref } from 'lit/directives/ref.js';
 import { EventEmitter } from '../../utils/EventEmitter.js';
 type EventMap = {
     visibility: [open: boolean];
 };
+/**
+ * A container component which can serve as a modal or popup wrapper.
+ */
 export declare class AbsoluteContainer extends LitElement {
     static styles: import("lit").CSSResult[];
-    dialogRef: Ref<HTMLDialogElement>;
+    /** @internal */
+    private dialogRef;
+    /** @internal */
     private _open;
+    /**
+     * Whether the container is open (visible) or not.
+     * @type {boolean}
+     * @default false
+     */
     set open(val: boolean);
     get open(): boolean;
+    /** @internal */
     protected left: number;
+    /** @internal */
     protected top: number;
+    /** Public way to subscribe to events. */
     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 whether container is open. */
     toggle(): void;
+    /** Set whether the container is open. */
     setOpen(val: boolean): void;
+    /** Set the x and y position of the container. */
     setPosition(left: number, top: number): void;
 }
 declare global {

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

@@ -1 +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,6BAA6B,CAAC;AAG3D,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"}
+{"version":3,"file":"absolute-container.d.ts","sourceRoot":"","sources":["../../../src/components/absolute-container/absolute-container.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAG3D,KAAK,QAAQ,GAAG;IACf,UAAU,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,CAAA;CAC3B,CAAA;AAED;;GAEG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAChD,MAAM,CAAC,MAAM,4BAAY;IAEzB,gBAAgB;IAChB,OAAO,CAAC,SAAS,CAAuC;IAExD,gBAAgB;IAChB,OAAO,CAAC,KAAK,CAAkB;IAC/B;;;;OAIG;IACH,IACI,IAAI,CAAC,GAAG,EAAE,OAAO,EAYpB;IACD,IAAI,IAAI,IAbM,OAAO,CAepB;IAED,gBAAgB;IAEhB,SAAS,CAAC,IAAI,EAAE,MAAM,CAAK;IAE3B,gBAAgB;IAEhB,SAAS,CAAC,GAAG,EAAE,MAAM,CAAK;IAE1B,yCAAyC;IAClC,OAAO,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAgC;IAEtE;;;OAGG;IAEI,mBAAmB,EAAE,OAAO,CAAS;IAE5C,oBAAoB,IAAI,IAAI;IAM5B,MAAM;IA2BN,wCAAwC;IACjC,MAAM;IAIb,yCAAyC;IAClC,OAAO,CAAC,GAAG,EAAE,OAAO;IAI3B,iDAAiD;IAC1C,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

@@ -4,27 +4,40 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { LitElement, html, css } from 'lit';
-import { property, state } from 'lit/decorators.js';
+import { LitElement, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { EventEmitter } from '../../utils/EventEmitter.js';
-import { condCustomElement } from '../../decorators/condCustomElement.js';
+import styles from './absolute-container.styles.js';
+/**
+ * A container component which can serve as a modal or popup wrapper.
+ */
 let AbsoluteContainer = class AbsoluteContainer extends LitElement {
     constructor() {
         super(...arguments);
+        /** @internal */
         this.dialogRef = createRef();
+        /** @internal */
         this._open = false;
+        /** @internal */
         this.left = 0;
+        /** @internal */
         this.top = 0;
+        /** Public way to subscribe to events. */
         this.emitter = new EventEmitter();
         /**
          * Disables the ContextEvent (right click, or long touch)
-         *
          * Useful for context menus
          */
         this.disableContextEvent = false;
     }
+    static { this.styles = [styles]; }
+    /**
+     * Whether the container is open (visible) or not.
+     * @type {boolean}
+     * @default false
+     */
     set open(val) {
         this._open = val;
         requestAnimationFrame(() => {
@@ -53,7 +66,7 @@ let AbsoluteContainer = class AbsoluteContainer extends LitElement {
         };
         return html `
 			<dialog
-				part='dialog'
+				part='__dialog'
 				style=${styleMap(dialogStyles)}
 				@mousedown=${(e) => {
             if (!(e.target instanceof HTMLElement))
@@ -71,36 +84,20 @@ let AbsoluteContainer = class AbsoluteContainer extends LitElement {
 			</dialog>
 		`;
     }
+    /** Toggle whether container is open. */
     toggle() {
         this.open = !this.open;
     }
+    /** Set whether the container is open. */
     setOpen(val) {
         this.open = val;
     }
+    /** Set the x and y position of the container. */
     setPosition(left, top) {
         this.left = left;
         this.top = top;
     }
 };
-AbsoluteContainer.styles = [
-    css `
-			:host {
-				display: block;
-			}
-
-			dialog {
-				width: min-content;
-				border: 0;
-				padding: 0;
-				background-color: transparent;
-				scrollbar-width: thin;
-
-				&::backdrop {
-					background-color: transparent;
-				}
-			}
-		`
-];
 __decorate([
     property({ type: Boolean, reflect: true })
 ], AbsoluteContainer.prototype, "open", null);
@@ -114,6 +111,6 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], AbsoluteContainer.prototype, "disableContextEvent", void 0);
 AbsoluteContainer = __decorate([
-    condCustomElement('absolute-container')
+    customElement('absolute-container')
 ], AbsoluteContainer);
 export { AbsoluteContainer };

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

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

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

@@ -1 +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"}
+{"version":3,"file":"absolute-container.stories.d.ts","sourceRoot":"","sources":["../../../src/components/absolute-container/absolute-container.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAY,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAW/E,QAAA,MAAM,IAAI,EAAE,IAKX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,mBAAmB,EAAE,OAAO,CAAA;CAAE,CAAC;AAE7D,KAAK,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AA0C7B,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAMpB,CAAA"}

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

@@ -1,13 +1,31 @@
 import { html } from 'lit';
 import { createRef, ref } from 'lit/directives/ref.js';
+const argTypes = {
+    open: { control: 'boolean' },
+    disableContextEvent: { control: 'boolean' },
+    emitter: { control: false }
+};
 const meta = {
-    title: 'Absolute Container',
+    title: 'Containers/Absolute Container',
     tags: ['autodocs'],
     component: 'absolute-container',
+    argTypes
 };
 export default meta;
-const Template = {
-    render: ({ disableContextEvent }) => {
+const template = {
+    render: ({ open, disableContextEvent }) => {
+        return html `
+			<absolute-container
+				?open=${open}
+				?disableContextEvent=${disableContextEvent}
+			>
+				Hello
+			</absolute-container>
+		`;
+    },
+};
+const buttonTemplate = {
+    render: ({ open, disableContextEvent }) => {
         let absoluteRef = createRef();
         return html `
 			<button 
@@ -21,16 +39,26 @@ const Template = {
 				Open Absolute Container
 			</button>
 			<absolute-container
+				?open=${open}
 				?disableContextEvent=${disableContextEvent}
-				open
 				${ref(absoluteRef)}
 			>
-				Hello
+				This absolute container can be toggled with a button.
 			</absolute-container>
 		`;
     },
 };
 export const Example = {
-    ...Template,
-    args: {},
+    ...template,
+    args: {
+        open: false,
+        disableContextEvent: false
+    },
+};
+export const Toggle = {
+    ...buttonTemplate,
+    args: {
+        open: false,
+        disableContextEvent: false
+    }
 };

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

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=absolute-container.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"absolute-container.styles.d.ts","sourceRoot":"","sources":["../../../src/components/absolute-container/absolute-container.styles.ts"],"names":[],"mappings":";AAEA,wBAgBE"}

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

@@ -0,0 +1,18 @@
+import { css } from 'lit';
+export default css `
+	:host {
+		display: block;
+	}
+
+	dialog {
+		width: min-content;
+		border: 0;
+		padding: 0;
+		background-color: transparent;
+		scrollbar-width: thin;
+
+		&::backdrop {
+			background-color: transparent;
+		}
+	}
+`;

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

@@ -3,23 +3,48 @@ import { EventEmitter } from '../../utils/EventEmitter.js';
 type EventMap = {
     snapped: [snapped: boolean, activeElement: Element | null | undefined];
 };
+/**
+ * A container component primarily for mobile devices which slides up and down from the bottom of the screen.
+ *
+ * @cssprop {<length> (dvh)} --height - The height of the sheet.
+ */
 export declare class BottomSheet extends LitElement {
     static styles: import("lit").CSSResult[];
+    /** @internal */
     private dialog;
+    /** @internal */
     private nonModalDialog?;
+    /** @internal */
     private modalDialog?;
+    /** Whether the sheet is open or closed. */
     open: boolean;
+    /** Whether the sheet is nonmodal. */
     nonmodal: boolean;
+    /** Whether the sheet can be dragged. */
     dragging: boolean;
+    /** Whether the sheet can be scrolled. */
     scrolling: boolean;
+    /** An array of percentages that the sheet will stop at or be drawn to after being released. */
     snapPoints: number[];
+    /** The default percentage that the sheet will open to. */
     defaultSnap: number;
+    /**
+     * Sets the height of the sheet.
+     * Infinity can be used to fit content automatically.
+     * @type {number}
+     * @default fit-content
+     */
     set height(val: number);
     get height(): number;
+    /** Public way to subscribe to events. */
     emitter: EventEmitter<EventMap>;
+    /** @internal */
     private startY;
+    /** @internal */
     private startHeight;
+    /** @internal */
     private previousTouch;
+    /** @internal */
     private lastScrollTop;
     connectedCallback(): void;
     disconnectedCallback(): void;

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

@@ -1 +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,6BAA6B,CAAC;AAG3D,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"}
+{"version":3,"file":"bottom-sheet.d.ts","sourceRoot":"","sources":["../../../src/components/bottom-sheet/bottom-sheet.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAEvC,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAG3D,KAAK,QAAQ,GAAG;IACf,OAAO,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;CACvE,CAAC;AAEF;;;;GAIG;AACH,qBACa,WAAY,SAAQ,UAAU;IAC1C,MAAM,CAAC,MAAM,4BAAY;IAEzB,gBAAgB;IAEhB,OAAO,CAAC,MAAM,CAAqB;IAEnC,gBAAgB;IAEhB,OAAO,CAAC,cAAc,CAAC,CAAoB;IAE3C,gBAAgB;IAEhB,OAAO,CAAC,WAAW,CAAC,CAAoB;IAExC,2CAA2C;IAEpC,IAAI,EAAE,OAAO,CAAS;IAE7B,qCAAqC;IAE9B,QAAQ,EAAE,OAAO,CAAS;IAEjC,wCAAwC;IAEjC,QAAQ,EAAE,OAAO,CAAS;IAEjC,yCAAyC;IAElC,SAAS,EAAE,OAAO,CAAS;IAElC,+FAA+F;IAExF,UAAU,EAAE,MAAM,EAAE,CAAM;IAEjC,0DAA0D;IAEnD,WAAW,EAAE,MAAM,CAAO;IAEjC;;;;;OAKG;IACH,IACI,MAAM,CAAC,GAAG,EAAE,MAAM,EAQrB;IACD,IAAI,MAAM,IATM,MAAM,CAWrB;IAED,yCAAyC;IAClC,OAAO,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAgC;IAEtE,gBAAgB;IAChB,OAAO,CAAC,MAAM,CAAa;IAE3B,gBAAgB;IAChB,OAAO,CAAC,WAAW,CAAa;IAEhC,gBAAgB;IAChB,OAAO,CAAC,aAAa,CAAsB;IAE3C,gBAAgB;IAChB,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

@@ -4,25 +4,48 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 { LitElement, html, css } from 'lit';
-import { property, query } from 'lit/decorators.js';
+import { LitElement, html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
 import { EventEmitter } from '../../utils/EventEmitter.js';
-import { condCustomElement } from '../../decorators/condCustomElement.js';
+import styles from './bottom-sheet.styles.js';
+/**
+ * A container component primarily for mobile devices which slides up and down from the bottom of the screen.
+ *
+ * @cssprop {<length> (dvh)} --height - The height of the sheet.
+ */
 let BottomSheet = class BottomSheet extends LitElement {
     constructor() {
         super(...arguments);
+        /** Whether the sheet is open or closed. */
         this.open = false;
+        /** Whether the sheet is nonmodal. */
         this.nonmodal = false;
+        /** Whether the sheet can be dragged. */
         this.dragging = false;
+        /** Whether the sheet can be scrolled. */
         this.scrolling = false;
+        /** An array of percentages that the sheet will stop at or be drawn to after being released. */
         this.snapPoints = [];
+        /** The default percentage that the sheet will open to. */
         this.defaultSnap = NaN;
+        /** Public way to subscribe to events. */
         this.emitter = new EventEmitter();
+        /** @internal */
         this.startY = 0;
+        /** @internal */
         this.startHeight = 0;
+        /** @internal */
         this.previousTouch = null;
+        /** @internal */
         this.lastScrollTop = 0;
     }
+    static { this.styles = [styles]; }
+    /**
+     * Sets the height of the sheet.
+     * Infinity can be used to fit content automatically.
+     * @type {number}
+     * @default fit-content
+     */
     set height(val) {
         const newHeight = Math.min(Math.max(val, 0), 100);
         this.emitter.emit('snapped', this.isSnapped(newHeight), this.shadowRoot?.activeElement);
@@ -63,7 +86,7 @@ let BottomSheet = class BottomSheet extends LitElement {
 			>
 				<button 
 					id="handle"
-					part="handle"
+					part="__handle"
 					@pointerdown=${this.pointerDown}
 					@pointermove=${this.pointerMove}
 					@pointerup=${this.pointerUp}
@@ -77,7 +100,7 @@ let BottomSheet = class BottomSheet extends LitElement {
 				
 				<div
 					id='content'
-					part="content"
+					part="__content"
 					tabindex='0'
 					@touchstart=${this.touchDown}
 					@touchend=${this.touchUp}
@@ -263,122 +286,6 @@ let BottomSheet = class BottomSheet extends LitElement {
             this.scrolling = false;
     }
 };
-BottomSheet.styles = [
-    css `
-			: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; */
-			}
-		`,
-];
 __decorate([
     query('dialog')
 ], BottomSheet.prototype, "dialog", void 0);
@@ -408,13 +315,8 @@ __decorate([
 ], BottomSheet.prototype, "defaultSnap", void 0);
 __decorate([
     property({ type: Number, reflect: true })
-    /**
-     * Sets the height of the sheet
-     * Infinity can be used to fit content automatically
-     * @param height percentage or infinity
-     */
 ], BottomSheet.prototype, "height", null);
 BottomSheet = __decorate([
-    condCustomElement('bottom-sheet')
+    customElement('bottom-sheet')
 ], BottomSheet);
 export { BottomSheet };

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

@@ -1,11 +1,14 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
 declare const meta: Meta;
 export default meta;
 type Props = {
     open: boolean;
-    nonmodal: boolean;
     snapPoints: number[];
+    nonmodal: boolean;
+    dragging: boolean;
+    scrolling: boolean;
     defaultSnap: number;
+    height: number;
 };
 type Story = StoryObj<Props>;
 export declare const Modal: Story;

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

@@ -1 +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"}
+{"version":3,"file":"bottom-sheet.stories.d.ts","sourceRoot":"","sources":["../../../src/components/bottom-sheet/bottom-sheet.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAY,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAe/E,QAAA,MAAM,IAAI,EAAE,IAKX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG;IACZ,IAAI,EAAE,OAAO,CAAA;IACb,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAyB7B,eAAO,MAAM,KAAK,EAAE,KAUnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAMpB,CAAC"}

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

@@ -1,14 +1,34 @@
 import { html } from 'lit';
+const argTypes = {
+    open: { control: 'boolean' },
+    snapPoints: { control: 'object' },
+    nonmodal: { control: 'boolean' },
+    dragging: { control: 'boolean' },
+    scrolling: { control: 'boolean' },
+    defaultSnap: { control: 'number' },
+    height: { control: 'number' },
+    emitter: { control: false },
+    '--height': { control: false }
+};
 const meta = {
-    title: 'Bottom Sheet',
+    title: 'Containers/Bottom Sheet',
     tags: ['autodocs'],
     component: 'bottom-sheet',
+    argTypes
 };
 export default meta;
-const Template = {
-    render: ({ open, nonmodal, snapPoints }) => {
+const template = {
+    render: ({ open, snapPoints, nonmodal, dragging, scrolling, defaultSnap, height }) => {
         return html `
-			<bottom-sheet ?open=${open} .snapPoints=${snapPoints} ?nonmodal=${nonmodal}>
+			<bottom-sheet
+				?open=${open}
+				.snapPoints=${snapPoints}
+				?nonmodal=${nonmodal}
+				?dragging=${dragging}
+				?scrolling=${scrolling}
+				defaultSnap=${defaultSnap}
+				height=${height}
+			>
 				<p>
 					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget dui eros. Nunc vel magna pellentesque, euismod lacus eu, euismod ligula. Nulla porttitor ultrices enim, ac fermentum ligula bibendum nec. Maecenas et volutpat nulla. Donec sit amet dapibus est, ultricies accumsan nunc. Praesent vitae nulla metus. Aenean non posuere lorem, bibendum scelerisque mauris. Praesent arcu dolor, efficitur vel malesuada nec, rhoncus eget eros. Nullam facilisis, diam eu tristique euismod, neque dolor pellentesque purus, id tristique ex quam eget lacus. Pellentesque lacinia consequat ligula. Duis egestas ornare porttitor. Morbi tempus fermentum nulla. Sed eu turpis quis nunc aliquam cursus vitae nec arcu. Nulla nec leo et tellus condimentum commodo mollis in dolor. Vivamus tortor eros, dictum in nulla ac, ultricies posuere ligula. Maecenas elit sem, efficitur et risus sed, placerat imperdiet nisl. Donec nunc ipsum, molestie et elementum a, hendrerit in diam. Vestibulum
 					ullamcorper eu dolor id maximus. Donec in nunc vel dolor vehicula mollis. Mauris elementum, massa vitae condimentum efficitur, nisi massa condimentum dolor, at ultricies nulla ante et tortor. Praesent vitae vestibulum urna. Nunc aliquam aliquam elementum. Nullam facilisis ut ligula in ultrices. Vestibulum et risus ut eros gravida malesuada varius euismod dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean dui nisl, auctor quis laoreet fringilla, aliquam id risus. Pellentesque sit amet neque finibus, pharetra dolor eu, eleifend ante. Vestibulum condimentum urna urna, ut dignissim nibh posuere in. Proin nec tincidunt enim, vel vehicula nunc. In quis pellentesque urna. Curabitur egestas arcu non arcu ullamcorper, at pellentesque lacus varius. Maecenas ac molestie erat. Integer ornare dui vitae turpis porttitor, nec semper mauris ultrices. Quisque eu arcu ipsum. Morbi sed tristique urna. Pellentesque gravida, nisi elementum ultrices condimentum,
@@ -20,14 +40,18 @@ const Template = {
     },
 };
 export const Modal = {
-    ...Template,
+    ...template,
     args: {
         open: false,
         snapPoints: [0, 50, 100],
+        nonmodal: false,
+        dragging: true,
+        scrolling: false,
+        defaultSnap: 50,
     },
 };
 export const NonModal = {
-    ...Template,
+    ...template,
     args: {
         open: false,
         nonmodal: true,
@@ -35,7 +59,7 @@ export const NonModal = {
     },
 };
 export const Thirds = {
-    ...Template,
+    ...template,
     args: {
         open: false,
         snapPoints: [0, 33, 66],

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

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=bottom-sheet.styles.d.ts.map

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

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