@alegendstale/holly-components 1.4.0 → 2.0.2

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

@@ -4,35 +4,55 @@ 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 { html, css } from 'lit';
-import { property, query } from 'lit/decorators.js';
+import { html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
 import quantize from 'quantize';
 import { CanvasBase } from './canvas-base.js';
-import { condCustomElement } from '../../decorators/condCustomElement.js';
+import styles from './canvas-image.styles.js';
+const imageStatus = ['idle', 'loading', 'success', 'error'];
+/**
+ * Utility component to make creating and retrieving image colors easier based on canvas coordinates.
+ *
+ * @dependency canvas-base
+ */
 let CanvasImage = class CanvasImage extends CanvasBase {
     constructor() {
         super(...arguments);
+        /** The image URL. */
         this.imageURL = '';
+        /** Whether to apply smoothing to the image generated by the canvas. */
         this.smoothing = false;
-        this.loading = true;
+        /** The canvas width. */
         this.width = 0;
+        /** The canvas height. */
         this.height = 0;
-        /**
-         * Waits for loading variable to equal true
-         */
-        this.waitForLoading = () => new Promise((resolve) => {
-            const checkLoading = setInterval(() => {
-                if (!this.loading) {
-                    clearInterval(checkLoading);
-                    resolve(true);
-                }
-            }, 100);
-        });
+        /** @readonly Used to style the canvas based on its current state. */
+        this.status = 'idle';
     }
-    firstUpdated(_changedProperties) {
-        super.firstUpdated(_changedProperties);
-        this.canvas.classList.add('image');
-        this.context.imageSmoothingEnabled = this.smoothing;
+    static { this.styles = [...CanvasBase.styles, styles]; }
+    updated(_changedProperties) {
+        super.updated(_changedProperties);
+        if (_changedProperties.has('imageURL')) {
+            this.status = this.imageURL ? 'loading' : 'idle';
+        }
+        else if ((_changedProperties.has('width') || _changedProperties.has('height')) && this.status === 'success') {
+            this._performDraw();
+        }
+    }
+    get updateComplete() {
+        const _waitForImage = async () => {
+            await super.updateComplete;
+            if (this.status === 'loading') {
+                await new Promise((resolve) => {
+                    this.addEventListener('canvas-ready', resolve, { once: true });
+                });
+            }
+            if (this.status === 'error') {
+                throw new Error(`canvas-image failed to load ${this.imageURL}`);
+            }
+            return true;
+        };
+        return _waitForImage();
     }
     render() {
         // Allows CORS requests for images from different domains
@@ -41,42 +61,44 @@ let CanvasImage = class CanvasImage extends CanvasBase {
 			<img
 				src=${this.imageURL}
 				crossorigin='anonymous'
-				@load=${() => this.loading = false}
+				@load=${() => this._performDraw()}
+				@error=${() => this._handleLoadError()}
 			>
 		`;
     }
     /**
      * Updates & loads the canvas image.
      * Attempts to preserve aspect ratio based on width.
-     * @param width The canvas width
-     * @param height The canvas height
      */
-    updateImage(imageURL, width, height) {
-        if (!this.image)
+    _performDraw() {
+        const img = this.image;
+        if (!img || !this.context)
             return;
-        // Set URL
-        this.image.src = imageURL;
-        // Wait for image to load before calculating dimensions & drawing image to canvas
-        this.waitForLoading().then(() => {
-            if (!this.image)
-                return;
-            // Calculate the new height based on the aspect ratio
-            const aspectRatio = this.image.naturalHeight / this.image.naturalWidth;
-            let newWidth = width;
-            let newHeight = newWidth * aspectRatio;
-            // Ensure the new height fits within the canvas height
-            if (newHeight > height) {
-                // Adjust width if height exceeds canvas height
-                newWidth = height / aspectRatio;
-                newHeight = height;
-            }
-            this.width = this.canvas.width = newWidth;
-            this.height = this.canvas.height = newHeight;
-            this.context.drawImage(this.image, 0, 0, newWidth, newHeight);
-        });
+        // Calculate the new height based on the aspect ratio
+        const aspectRatio = img.naturalHeight / img.naturalWidth;
+        let drawWidth = this.width;
+        let drawHeight = drawWidth * aspectRatio;
+        // Ensure the new height fits within the canvas height
+        if (drawHeight > this.height) {
+            // Adjust width if height exceeds canvas height
+            drawWidth = this.height / aspectRatio;
+            drawHeight = this.height;
+        }
+        this.canvas.width = drawWidth;
+        this.canvas.height = drawHeight;
+        this.context.imageSmoothingEnabled = this.smoothing;
+        this.context.drawImage(img, 0, 0, drawWidth, drawHeight);
+        this.status = 'success';
+        this.dispatchEvent(new CustomEvent('canvas-ready'));
+    }
+    /** @internal Handle errors when the image fails to load. */
+    _handleLoadError() {
+        // Return to idle state if there is no URL.
+        this.status = this.imageURL === '' ? 'idle' : 'error';
+        this.dispatchEvent(new CustomEvent('canvas-ready'));
     }
     /**
-     * Gets the most frequent colors in an image
+     * Gets the most frequent colors in an image.
      * @param numColors Number of colors to return
      * @param quality Artificially reduce number of pixels (higher = less accurate but faster)
      * @returns Most frequent colors
@@ -88,7 +110,7 @@ let CanvasImage = class CanvasImage extends CanvasBase {
         */
         const nColors = numColors <= 7 ? numColors : numColors + 1;
         // Wait for image to load
-        await this.waitForLoading();
+        await this.updateComplete;
         // Get an array of pixels
         const pixels = await this.createPixelArray(quality);
         if (!pixels)
@@ -99,13 +121,13 @@ let CanvasImage = class CanvasImage extends CanvasBase {
         return colorMap ? colorMap.palette() : [];
     }
     /**
-     * Creates an array of pixels from the image
+     * Creates an array of pixels from the image.
      * Inspired by colorthief
      * @param quality Artificially reduce number of pixels (higher = less accurate but faster)
-     * @returns
+     * @returns Array of pixels
      */
     async createPixelArray(quality) {
-        await this.waitForLoading();
+        await this.updateComplete;
         const pixelArray = [];
         const imageData = (await this.getImageData())?.data;
         if (!imageData)
@@ -125,36 +147,17 @@ let CanvasImage = class CanvasImage extends CanvasBase {
         }
         return pixelArray;
     }
-    /**
-     * Gets the image data from the canvas
-     */
+    /** Gets the image data from the canvas. */
     async getImageData(x = 0, y = 0) {
         try {
-            await this.waitForLoading();
-            return this.context.getImageData(x, y, this.width, this.height);
+            await this.updateComplete;
+            return this.context.getImageData(x, y, this.canvas.width, this.canvas.height);
         }
         catch (e) {
             throw new Error('Failed to get image data.');
         }
     }
 };
-CanvasImage.styles = [
-    ...CanvasBase.styles,
-    css `
-			:host {
-				display: block;
-			}
-			
-			/* Hide when width hasn't been set */
-			canvas:not([width]) {
-				display: none;
-			}
-
-			img {
-				display: none;
-			}
-		`,
-];
 __decorate([
     query('img')
 ], CanvasImage.prototype, "image", void 0);
@@ -164,7 +167,16 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], CanvasImage.prototype, "smoothing", void 0);
+__decorate([
+    property({ type: Number })
+], CanvasImage.prototype, "width", void 0);
+__decorate([
+    property({ type: Number })
+], CanvasImage.prototype, "height", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'data-status' })
+], CanvasImage.prototype, "status", void 0);
 CanvasImage = __decorate([
-    condCustomElement('canvas-image')
+    customElement('canvas-image')
 ], CanvasImage);
 export { CanvasImage };

package/dist/components/canvas/canvas-image.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+export type Props = {
+    imageURL: string;
+    smoothing: boolean;
+    width: number;
+    height: number;
+};
+type Story = StoryObj<Props>;
+export declare const Example: Story;
+export declare const Error: Story;
+//# sourceMappingURL=canvas-image.stories.d.ts.map

package/dist/components/canvas/canvas-image.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-image.stories.d.ts","sourceRoot":"","sources":["../../../src/components/canvas/canvas-image.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAY,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAc/E,QAAA,MAAM,IAAI,EAAE,IAKX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,MAAM,MAAM,KAAK,GAAG;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAA;CACd,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAgB7B,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC"}

package/dist/components/canvas/canvas-image.stories.js

@@ -0,0 +1,49 @@
+import { html } from 'lit';
+import CanvasBaseStory from './canvas-base.stories.js';
+const argTypes = {
+    ...CanvasBaseStory.argTypes,
+    image: { control: false },
+    imageURL: { control: 'text' },
+    smoothing: { control: 'boolean' },
+    width: { control: 'number' },
+    height: { control: 'number' },
+    'data-status': { control: false }
+};
+const meta = {
+    title: 'Canvas/Image',
+    tags: ['autodocs'],
+    component: 'canvas-image',
+    argTypes,
+};
+export default meta;
+const template = {
+    render: ({ imageURL, smoothing, width, height }) => {
+        return html `
+			<canvas-image
+				imageURL=${imageURL}
+				?smoothing=${smoothing}
+				width=${width}
+				height=${height}
+			>
+			</canvas-image>
+		`;
+    },
+};
+export const Example = {
+    ...template,
+    args: {
+        imageURL: 'https://jollybandit.com/GreekzCaricature-md.webp',
+        smoothing: false,
+        width: 500,
+        height: 500
+    },
+};
+export const Error = {
+    ...template,
+    args: {
+        imageURL: 'hello',
+        smoothing: false,
+        width: 500,
+        height: 500
+    },
+};

package/dist/components/canvas/canvas-image.styles.d.ts

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

package/dist/components/canvas/canvas-image.styles.d.ts.map

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

package/dist/components/canvas/canvas-image.styles.js

@@ -0,0 +1,21 @@
+import { css } from 'lit';
+export default css `
+	:host {
+		display: block;
+	}
+
+	:host([data-status='error']) {
+		width: 100px;
+		height: 100px;
+		border: 2px solid red;
+	}
+
+	/* Hide when width hasn't been set */
+	canvas:not([width]) {
+		display: none;
+	}
+
+	img {
+		display: none;
+	}
+`;

package/dist/components/carousel-scroller/carousel-scroller.d.ts

@@ -5,20 +5,37 @@ type EventMap = {
 };
 export interface CarouselContainerProps {
 }
+/**
+ * A carousel which can have any number of slides, and rotates circularly.
+ *
+ * @cssprop {<length>} --padding - The size of the scroller padding.
+ * @cssprop {<length>} --margin - The size of the scroller margin.
+ */
 export declare class CarouselScroller extends LitElement {
-    static styles: import("lit").CSSResult;
-    slotEl: HTMLSlotElement;
-    slotChildren: HTMLElement[];
+    static styles: import("lit").CSSResult[];
+    /** The items that will be used as slides. */
+    protected slotEl: HTMLSlotElement;
+    /** The slides being used. */
+    protected slotChildren: HTMLElement[];
+    /** Public way to subscribe to events. */
     emitter: EventEmitter<EventMap>;
-    currentSlide: number;
-    debouncers: WeakMap<object, any>;
+    /** @internal */
+    private _currentSlide;
+    /** @internal */
+    private debouncers;
     constructor();
     disconnectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
+    /** Gets the current slide.
+     * @returns HTMLElement
+     */
     getCurrentSlide(): HTMLElement;
+    /** Scrolls to the slide before the current slide. */
     scrollToPrevSlide(): void;
+    /** Scrolls to the slide after the current slide. */
     scrollToNextSlide(): void;
-    slotChange(): void;
+    /** @internal */
+    protected slotChange(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/carousel-scroller/carousel-scroller.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"carousel-scroller.d.ts","sourceRoot":"","sources":["../../../src/components/carousel-scroller/carousel-scroller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAE5C,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAG3D,KAAK,QAAQ,GAAG;IACf,WAAW,EAAE,CAAC,YAAY,EAAE,WAAW,EAAE,CAAC,CAAC;CAC3C,CAAC;AAEF,MAAM,WAAW,sBAAsB;CAAG;AAE1C,qBACa,gBAAiB,SAAQ,UAAU;IAC/C,MAAM,CAAC,MAAM,0BAgEX;IAGF,MAAM,EAAG,eAAe,CAAC;IAEzB,YAAY,EAAE,WAAW,EAAE,CAAM;IAC1B,OAAO,yBAAgC;IAC9C,YAAY,SAAK;IACjB,UAAU,uBAAiB;;IAU3B,oBAAoB,IAAI,IAAI;IAK5B,MAAM;IAYN,eAAe;IAIf,iBAAiB;IAUjB,iBAAiB;IAUjB,UAAU;CAaV;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,gBAAgB,CAAA;KACrC;CACD"}
+{"version":3,"file":"carousel-scroller.d.ts","sourceRoot":"","sources":["../../../src/components/carousel-scroller/carousel-scroller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAEvC,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAG3D,KAAK,QAAQ,GAAG;IACf,WAAW,EAAE,CAAC,YAAY,EAAE,WAAW,EAAE,CAAC,CAAC;CAC3C,CAAC;AAEF,MAAM,WAAW,sBAAsB;CAAG;AAE1C;;;;;GAKG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IAC/C,MAAM,CAAC,MAAM,4BAAY;IAEzB,6CAA6C;IAE7C,SAAS,CAAC,MAAM,EAAG,eAAe,CAAC;IAEnC,6BAA6B;IAC7B,SAAS,CAAC,YAAY,EAAE,WAAW,EAAE,CAAM;IAE3C,yCAAyC;IAClC,OAAO,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAgC;IAEtE,gBAAgB;IAChB,OAAO,CAAC,aAAa,CAAa;IAElC,gBAAgB;IAChB,OAAO,CAAC,UAAU,CAAiB;;IAUnC,oBAAoB,IAAI,IAAI;IAK5B,MAAM;IAYN;;OAEG;IACI,eAAe;IAItB,qDAAqD;IAC9C,iBAAiB;IAUxB,oDAAoD;IAC7C,iBAAiB;IAUxB,gBAAgB;IAChB,SAAS,CAAC,UAAU;CAapB;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,gBAAgB,CAAA;KACrC;CACD"}

package/dist/components/carousel-scroller/carousel-scroller.js

@@ -4,16 +4,27 @@ 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 { css, html, LitElement } from 'lit';
-import { query } from 'lit/decorators.js';
+import { html, LitElement } from 'lit';
+import { customElement, query } from 'lit/decorators.js';
 import { EventEmitter } from '../../utils/EventEmitter.js';
-import { condCustomElement } from '../../decorators/condCustomElement.js';
+import styles from './carousel-scroller.styles.js';
+/**
+ * A carousel which can have any number of slides, and rotates circularly.
+ *
+ * @cssprop {<length>} --padding - The size of the scroller padding.
+ * @cssprop {<length>} --margin - The size of the scroller margin.
+ */
 let CarouselScroller = class CarouselScroller extends LitElement {
+    static { this.styles = [styles]; }
     constructor() {
         super();
+        /** The slides being used. */
         this.slotChildren = [];
+        /** Public way to subscribe to events. */
         this.emitter = new EventEmitter();
-        this.currentSlide = 0;
+        /** @internal */
+        this._currentSlide = 0;
+        /** @internal */
         this.debouncers = new WeakMap();
         this.emitter.on('slotsLoaded', (slotChildren) => {
             this.slotChildren = slotChildren;
@@ -34,27 +45,33 @@ let CarouselScroller = class CarouselScroller extends LitElement {
 			</div>
 		`;
     }
+    /** Gets the current slide.
+     * @returns HTMLElement
+     */
     getCurrentSlide() {
-        return this.slotChildren[this.currentSlide - 1];
+        return this.slotChildren[this._currentSlide - 1];
     }
+    /** Scrolls to the slide before the current slide. */
     scrollToPrevSlide() {
-        this.currentSlide =
-            this.currentSlide === 0
-                ? (this.currentSlide = this.slotChildren.length - 1)
-                : this.currentSlide - 1;
+        this._currentSlide =
+            this._currentSlide === 0
+                ? (this._currentSlide = this.slotChildren.length - 1)
+                : this._currentSlide - 1;
         this.slotChildren
-            .at(this.currentSlide)
+            .at(this._currentSlide)
             ?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
     }
+    /** Scrolls to the slide after the current slide. */
     scrollToNextSlide() {
-        this.currentSlide =
-            this.currentSlide === this.slotChildren.length - 1
+        this._currentSlide =
+            this._currentSlide === this.slotChildren.length - 1
                 ? 0
-                : this.currentSlide + 1;
+                : this._currentSlide + 1;
         this.slotChildren
-            .at(this.currentSlide)
+            .at(this._currentSlide)
             ?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
     }
+    /** @internal */
     slotChange() {
         const slotElements = Array.from(this.slotEl
             .assignedElements()
@@ -64,75 +81,10 @@ let CarouselScroller = class CarouselScroller extends LitElement {
         this.debouncers.set(this.slotEl, timeoutId);
     }
 };
-CarouselScroller.styles = css `
-		:host {
-			--padding: 40px;
-			--margin: 80px;
-		}
-
-		.container {
-			width: 600px;
-			height: 400px;
-			margin: 20px;
-			border-radius: 20px;
-			overflow: hidden;
-			position: relative;
-
-			& > button {
-				position: absolute;
-				width: var(--padding);
-				height: calc(var(--padding) * 2);
-				z-index: 1;
-				background-color: #00000080;
-				border: none;
-				bottom: calc(50% - var(--padding));
-				font-size: 32px;
-
-				&:hover {
-					background-color: #6352b880;
-				}
-
-				&:nth-child(1) {
-					left: 0;
-					border-top-right-radius: 314px;
-					border-bottom-right-radius: 314px;
-				}
-
-				&:nth-child(2) {
-					right: 0;
-					border-top-left-radius: 314px;
-					border-bottom-left-radius: 314px;
-				}
-			}
-
-			& > div {
-				display: flex;
-				overflow-x: scroll;
-				position: relative;
-				scroll-behavior: smooth;
-				scroll-snap-type: x mandatory;
-				scrollbar-width: none;
-				padding: 0 var(--padding);
-			}
-
-			::slotted(*) {
-				display: flex;
-				flex-direction: column;
-				justify-content: center;
-				min-height: calc(400px - var(--margin));
-				min-width: calc(600px - var(--margin));
-				max-height: calc(400px - var(--margin));
-				max-width: calc(600px - var(--margin));
-				background: white;
-				scroll-snap-align: center;
-				padding: calc(var(--margin) / 2);
-			}
-		}
-	`;
 __decorate([
     query('slot')
 ], CarouselScroller.prototype, "slotEl", void 0);
 CarouselScroller = __decorate([
-    condCustomElement('carousel-scroller')
+    customElement('carousel-scroller')
 ], CarouselScroller);
 export { CarouselScroller };

package/dist/components/carousel-scroller/carousel-scroller.stories.d.ts

@@ -1,8 +1,10 @@
-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 = {
-    items: any[];
+    items: string[];
+    '--padding': string;
+    '--margin': string;
 };
 type Story = StoryObj<Props>;
 export declare const Empty: Story;

package/dist/components/carousel-scroller/carousel-scroller.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"carousel-scroller.stories.d.ts","sourceRoot":"","sources":["../../../src/components/carousel-scroller/carousel-scroller.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAIhE,QAAA,MAAM,IAAI,EAAE,IAIX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG;IAAE,KAAK,EAAE,GAAG,EAAE,CAAA;CAAE,CAAC;AAE9B,KAAK,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAkB7B,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC"}
+{"version":3,"file":"carousel-scroller.stories.d.ts","sourceRoot":"","sources":["../../../src/components/carousel-scroller/carousel-scroller.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAY,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAc/E,QAAA,MAAM,IAAI,EAAE,IAKX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG;IAAE,KAAK,EAAE,MAAM,EAAE,CAAC;IAAC,WAAW,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAA;CAAE,CAAC;AAE1E,KAAK,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAyB7B,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC"}

package/dist/components/carousel-scroller/carousel-scroller.stories.js

@@ -1,15 +1,31 @@
 import { html } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
+import { styleMap } from 'lit/directives/style-map.js';
+const argTypes = {
+    items: { control: 'object' },
+    slotEl: { control: false },
+    slotChildren: { control: false },
+    emitter: { control: false },
+    '--padding': { control: 'text' },
+    '--margin': { control: 'text' }
+};
 const meta = {
     title: 'Carousel Scroller',
     tags: ['autodocs'],
     component: 'carousel-scroller',
+    argTypes
 };
 export default meta;
-const Template = {
-    render: ({ items }) => {
+const template = {
+    render: ({ items, '--padding': padding, '--margin': margin }) => {
+        const styles = {
+            '--padding': padding,
+            '--margin': margin
+        };
         return html `
-			<carousel-scroller>
+			<carousel-scroller
+				style=${styleMap(styles)}
+			>
 				${repeat(items, (item) => html `<div>${item}</div>`)}
 			</carousel-scroller>
 		`;
@@ -21,19 +37,19 @@ const items = [
     'three'
 ];
 export const Empty = {
-    ...Template,
+    ...template,
     args: {
         items: [],
     },
 };
 export const OneItem = {
-    ...Template,
+    ...template,
     args: {
         items: [items[0]],
     },
 };
 export const ManyItems = {
-    ...Template,
+    ...template,
     args: {
         items,
     },

package/dist/components/carousel-scroller/carousel-scroller.styles.d.ts

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

package/dist/components/carousel-scroller/carousel-scroller.styles.d.ts.map

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