@paperless/core 3.5.1 → 3.6.1

package/dist/collection/components/atoms/info-panel/info-panel.stories.js

@@ -0,0 +1,43 @@
+import { action } from "@storybook/addon-actions";
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Atoms/Info panel',
+    component: 'p-info-panel',
+    args: {
+        variant: 'feedback',
+        header: 'Info panel',
+        content: 'More information can be put here.',
+        closeable: true,
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ variant, header, content, closeable }) => html `
+		<p-info-panel
+			variant=${variant ?? nothing}
+			header=${header ?? nothing}
+			content=${content ?? nothing}
+			closeable=${closeable ?? nothing}
+			@closed=${action('closed')}
+		/>
+	`,
+};
+export const WithIcons = {
+    render: ({ variant, header, content, closeable }) => html `
+		<p-info-panel
+			variant=${variant ?? nothing}
+			content=${content ?? nothing}
+			closeable=${closeable ?? nothing}
+			@closed=${action('closed')}
+		>
+			<div
+				class="flex items-center gap-2"
+				slot="header"
+			>
+				<p-icon variant="placeholder"></p-icon>
+				${header ?? nothing}
+				<p-icon variant="placeholder"></p-icon>
+			</div>
+		</p-info-panel>
+	`,
+};

package/dist/collection/components/atoms/layout/layout.component.js

@@ -9,10 +9,7 @@ export class Layout {
      */
     scroll;
     render() {
-        return (h(Host, { key: '8f62f5f3f1412e4bb494051d15a064dc0c3263d9', class: `
-      p-layout
-      variant-${this.variant}
-    ` }, h("div", { key: '7f4cd5cbd739fd4ec64cbc065962fe215bd1b33a', class: 'content', onScroll: ev => this.scroll.emit(ev) }, h("div", { key: '1b16574e29b90200b07d3b4d9fad07102eca5ff9', class: 'inner-content' }, h("slot", { key: 'e609a7fa805feee5400356e825cec2b850550fac', name: 'content' }))), h("div", { key: '59bd6420f48ca71728acaf035be6527690534665', class: 'sidebar' }, h("slot", { key: '06844d4224284bd09c96fd7ccd367983cab70254', name: 'sidebar' })), h("div", { key: '002c820da5677f074f48764e9a9f5ecd00920c9e', class: 'topbar' }, h("slot", { key: '1c997e9e8e9ea84809085119bba5b5b2d0f93475', name: 'topbar' }))));
+        return (h(Host, { key: '68c0d8d671ff7758d15b9e5fc3900e83a37b2eaa', class: 'variant-' + this.variant }, h("div", { key: 'eb69411e0da0701d56d75b9806ea30803c3d2ab5', class: 'content', onScroll: ev => this.scroll.emit(ev) }, h("div", { key: 'afa8292a2724d7324241bf1f1e1169dd8a8bb268', class: 'inner-content' }, h("slot", { key: '13c05d1069df30d05e90e67870c0f14226f76496', name: 'content' }))), h("div", { key: 'f4f768d25ef24a2b9bdb88b82b92a33b0b56de8e', class: 'sidebar' }, h("slot", { key: 'd41956627e6e05ba9019b67be36a277e5c7387b2', name: 'sidebar' })), h("div", { key: '4fb25385d7c9178567563e07ce188f0bd70c5083', class: 'topbar' }, h("slot", { key: 'edd613f693d2dc2f216d591368b4a2f656866dc8', name: 'topbar' }))));
     }
     static get is() { return "p-layout"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/atoms/layout/layout.stories.js

@@ -0,0 +1,9 @@
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Atoms/Layout',
+    component: 'p-layout',
+};
+export default meta;
+export const Default = {
+    render: ({ variant }) => html `<p-layout variant=${variant ?? nothing} />`,
+};

package/dist/collection/components/atoms/listing/item/listing-item.stories.js

@@ -0,0 +1,17 @@
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Atoms/Listing/Item',
+    component: 'p-listing-item',
+    args: {
+        content: 'Listing item',
+    },
+    argTypes: {
+        content: {
+            type: 'string',
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ icon, content }) => html `<p-listing-item icon=${icon ?? nothing}>${content}</p-listing-item>`,
+};

package/dist/collection/components/atoms/listing/line/listing-line.stories.js

@@ -0,0 +1,9 @@
+import { html } from "lit";
+const meta = {
+    title: 'Design System/Atoms/Listing/Line',
+    component: 'p-listing-line',
+};
+export default meta;
+export const Default = {
+    render: () => html `<p-listing-line />`,
+};

package/dist/collection/components/atoms/loader/loader.stories.js

@@ -0,0 +1,27 @@
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Atoms/Loader',
+    component: 'p-loader',
+    args: {
+        content: 'Loader',
+    },
+    argTypes: {
+        content: {
+            type: 'string',
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ content, show, variant, color, 'modal-title': modalTitle, 'modal-description': modalDescription, }) => html `
+		<p-loader
+			show=${show ?? nothing}
+			variant=${variant ?? nothing}
+			color=${color ?? nothing}
+			modal-title=${modalTitle ?? nothing}
+			modal-description=${modalDescription ?? nothing}
+		>
+			${content}
+		</p-loader>
+	`,
+};

package/dist/collection/components/atoms/modal/body/modal-body.stories.js

@@ -0,0 +1,26 @@
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Atoms/Modal/Body',
+    component: 'p-modal-body',
+    args: {
+        content: 'ModalBody',
+    },
+    argTypes: {
+        content: {
+            type: 'string',
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ content, variant, 'rounded-bottom': roundedBottom, 'rounded-top': roundedTop, padding, }) => html `
+		<p-modal-body
+			variant=${variant ?? nothing}
+			rounded-bottom=${roundedBottom ?? nothing}
+			rounded-top=${roundedTop ?? nothing}
+			padding=${padding ?? nothing}
+		>
+			${content}
+		</p-modal-body>
+	`,
+};

package/dist/collection/components/atoms/modal/container/modal-container.stories.js

@@ -0,0 +1,24 @@
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Atoms/Modal/Container',
+    component: 'p-modal-container',
+    args: {
+        content: 'ModalContainer',
+    },
+    argTypes: {
+        content: {
+            type: 'string',
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ content, size, closing }) => html `
+		<p-modal-container
+			size=${size ?? nothing}
+			closing=${closing ?? nothing}
+		>
+			${content}
+		</p-modal-container>
+	`,
+};

package/dist/collection/components/atoms/modal/footer/modal-footer.stories.js

@@ -0,0 +1,17 @@
+import { html } from "lit";
+const meta = {
+    title: 'Design System/Atoms/Modal/Footer',
+    component: 'p-modal-footer',
+    args: {
+        content: 'ModalFooter',
+    },
+    argTypes: {
+        content: {
+            type: 'string',
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ content }) => html `<p-modal-footer>${content}</p-modal-footer>`,
+};

package/dist/collection/components/atoms/modal/header/modal-header.component.css

@@ -1 +1 @@
-*{box-sizing:border-box}.static{position:static}.absolute{position:absolute}.relative{position:relative}.left-1\/2{left:50%}.top-1\/2{top:50%}.z-\[1\]{z-index:1}.flex{display:flex}.inline-flex{display:inline-flex}.aspect-\[7\/1\]{aspect-ratio:7/1}.h-12{height:3rem}.max-h-28{max-height:7rem}.w-\[calc\(100\%-7rem\)\]{width:calc(100% - 7rem)}.w-full{width:100%}.flex-1{flex:1 1 0%}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.-translate-y-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y:-50%}.flex-col{flex-direction:column}.justify-end{justify-content:flex-end}.overflow-hidden{overflow:hidden}.rounded-t-2xl{border-top-left-radius:1rem;border-top-right-radius:1rem}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.p-4{padding:1rem}.pb-0{padding-bottom:0}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.font-bold{font-weight:700}.text-storm-500{--tw-text-opacity:1;color:rgb(24 30 41/var(--tw-text-opacity,1))}.dark\:bg-hurricane-600:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-bg-opacity:1;background-color:rgb(46 52 62/var(--tw-bg-opacity,1))}.dark\:text-hurricane-400:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1;color:rgb(70 75 84/var(--tw-text-opacity,1))}.dark\:text-white:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.dark\:bg-hurricane-600:where([data-theme=dark],[data-theme=dark] *){--tw-bg-opacity:1;background-color:rgb(46 52 62/var(--tw-bg-opacity,1))}.dark\:text-hurricane-400:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1;color:rgb(70 75 84/var(--tw-text-opacity,1))}.dark\:text-white:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}
+*{box-sizing:border-box}.static{position:static}.absolute{position:absolute}.relative{position:relative}.left-1\/2{left:50%}.top-1\/2{top:50%}.z-\[1\]{z-index:1}.flex{display:flex}.inline-flex{display:inline-flex}.aspect-\[7\/1\]{aspect-ratio:7/1}.h-12{height:3rem}.max-h-28{max-height:7rem}.w-\[calc\(100\%-7rem\)\]{width:calc(100% - 7rem)}.w-full{width:100%}.flex-1{flex:1 1 0%}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.-translate-y-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y:-50%}.flex-col{flex-direction:column}.justify-end{justify-content:flex-end}.overflow-hidden{overflow:hidden}.rounded-t-2xl{border-top-left-radius:1rem;border-top-right-radius:1rem}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.p-4{padding:1rem}.pb-0{padding-bottom:0}.text-center{text-align:center}.font-ambit{font-family:Ambit,sans-serif}.text-2xl{font-size:1.5rem;line-height:2rem}.font-bold{font-weight:700}.text-storm-500{--tw-text-opacity:1;color:rgb(24 30 41/var(--tw-text-opacity,1))}.dark\:bg-hurricane-600:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-bg-opacity:1;background-color:rgb(46 52 62/var(--tw-bg-opacity,1))}.dark\:text-hurricane-400:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1;color:rgb(70 75 84/var(--tw-text-opacity,1))}.dark\:text-white:where(:host([data-theme=dark]),:host([data-theme=dark]) *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.dark\:bg-hurricane-600:where([data-theme=dark],[data-theme=dark] *){--tw-bg-opacity:1;background-color:rgb(46 52 62/var(--tw-bg-opacity,1))}.dark\:text-hurricane-400:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1;color:rgb(70 75 84/var(--tw-text-opacity,1))}.dark\:text-white:where([data-theme=dark],[data-theme=dark] *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}

package/dist/collection/components/atoms/modal/header/modal-header.component.js

@@ -14,7 +14,7 @@ const title = cva([
     'w-[calc(100%-7rem)]',
     'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2',
     `
-   text-ambit text-2xl font-bold text-storm-500
+   font-ambit text-2xl font-bold text-storm-500
    dark:text-white
  `,
 ]);

package/dist/collection/components/atoms/modal/header/modal-header.stories.js

@@ -0,0 +1,26 @@
+import { action } from "@storybook/addon-actions";
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Atoms/Modal/Header',
+    component: 'p-modal-header',
+    args: {
+        content: 'ModalHeader',
+    },
+    argTypes: {
+        content: {
+            type: 'string',
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ content, size, 'show-close': showClose }) => html `
+		<p-modal-header
+			show-close=${showClose ?? nothing}
+			size=${size ?? nothing}
+			@close=${action('close')}
+		>
+			${content}
+		</p-modal-header>
+	`,
+};

package/dist/collection/components/atoms/navigation-title/navigation-title.stories.js

@@ -0,0 +1,17 @@
+import { html } from "lit";
+const meta = {
+    title: 'Design System/Atoms/Navigation title',
+    component: 'p-navigation-title',
+    args: {
+        content: 'NavigationTitle',
+    },
+    argTypes: {
+        content: {
+            type: 'string',
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ content }) => html `<p-navigation-title>${content}</p-navigation-title>`,
+};

package/dist/collection/components/atoms/pagination/pages-item/pagination-pages-item.stories.js

@@ -0,0 +1,26 @@
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Atoms/Pagination/Pages item',
+    component: 'p-pagination-pages-item',
+    args: {
+        content: 'PaginationPagesItem',
+    },
+    argTypes: {
+        content: {
+            type: 'string',
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ content, variant, active, hover, disabled }) => html `
+		<p-pagination-pages-item
+			variant=${variant ?? nothing}
+			active=${active ?? nothing}
+			hover=${hover ?? nothing}
+			disabled=${disabled ?? nothing}
+		>
+			${content}
+		</p-pagination-pages-item>
+	`,
+};

package/dist/collection/components/atoms/radio/radio.component.js

@@ -5,7 +5,7 @@ import { asBoolean } from "../../../utils/as-boolean";
 import { nonce } from "../../../utils/nonce";
 const radio = cva([
     'peer m-0 flex-shrink-0 appearance-none outline-none',
-    'border-inset rounded-full border border-solid',
+    'rounded-full border border-solid',
     'h-4 w-4',
 ], {
     variants: {
@@ -118,11 +118,11 @@ export class Radio {
     }
     render() {
         const id = this.id?.length ? this.id : this._nonce;
-        return (h(ThemedHost, { key: '6d6c70b28586db5068f33308fff1c3a35bce641c' }, h("label", { key: 'd6741f15e337174a3576163e6b27b65dd54773f4', class: 'flex items-center justify-start gap-2', htmlFor: id }, h("div", { key: 'c82520956d1f16cc1a7b6740ab4e03299d5f2039', class: 'relative flex flex-shrink-0 items-center' }, h("input", { key: '80a7c6b02ff323e646a739cfcfee1652f2ec4df2', checked: this.checked, class: radio({
+        return (h(ThemedHost, { key: 'a025b6f97c4108930c0838a19182adfed4eba8ee' }, h("label", { key: '03276b35d1c84c26ca072a913c55379050f11562', class: 'flex items-center justify-start gap-2', htmlFor: id }, h("div", { key: '120eae5ce9ef7518d3c03c6f66ebdf05f7e436e4', class: 'relative flex flex-shrink-0 items-center' }, h("input", { key: 'aa26f35acabd82de06afc0db1728f19b4806ec3d', checked: this.checked, class: radio({
                 disabled: asBoolean(this.disabled),
-            }), disabled: asBoolean(this.disabled), id: id, name: this.name, required: this.required, type: 'radio', value: this.value, onChange: ev => this._onChange(ev) }), h("div", { key: 'a46921d80daadde9058060754c65b11d17b47b71', class: circle({
+            }), disabled: asBoolean(this.disabled), id: id, name: this.name, required: this.required, type: 'radio', value: this.value, onChange: ev => this._onChange(ev) }), h("div", { key: 'ae58f21ad97d3073a5c782b0ad57250d1b9d7c77', class: circle({
                 disabled: asBoolean(this.disabled),
-            }) })), h("div", { key: 'cd295853a620d74ece3521b96daac11a871cad1d', class: '\n        flex-1 overflow-hidden text-ellipsis\n        empty:hidden\n        dark:text-white\n      ' }, h("slot", { key: '7775f245e2652c7b010c34d52376908f2b4a2f99' })))));
+            }) })), h("div", { key: '9a562a2180ed71d3ed454111510e293bacc77fae', class: '\n        flex-1 overflow-hidden text-ellipsis\n        empty:hidden\n        dark:text-white\n      ' }, h("slot", { key: 'c44f22182c19509aeafd753392421ae74efd5c34' })))));
     }
     _onChange(ev) {
         if (asBoolean(this.disabled)) {

package/dist/collection/components/atoms/radio/radio.stories.js

@@ -0,0 +1,30 @@
+import { action } from "@storybook/addon-actions";
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Atoms/Radio',
+    component: 'p-radio',
+    args: {
+        content: 'Radio',
+    },
+    argTypes: {
+        content: {
+            type: 'string',
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ content, value, disabled, required, id, name, checked }) => html `
+		<p-radio
+			value=${value ?? nothing}
+			disabled=${disabled ?? nothing}
+			required=${required ?? nothing}
+			id=${id ?? nothing}
+			name=${name ?? nothing}
+			checked=${checked ?? nothing}
+			@checkedChange=${action('checkedChange')}
+		>
+			${content}
+		</p-radio>
+	`,
+};

package/dist/collection/components/atoms/segment/container/segment-container.stories.js

@@ -0,0 +1,47 @@
+import { html } from "lit";
+const meta = {
+    title: 'Design System/Atoms/Segment/Container',
+    component: 'p-segment-container',
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Default = {
+    render: () => html `
+		<p-segment-container>
+			<p-segment-item>Item 1</p-segment-item>
+			<p-segment-item>Item 2</p-segment-item>
+			<p-segment-item active>Item 3</p-segment-item>
+			<p-segment-item>Item 4</p-segment-item>
+			<p-segment-item>Item 5</p-segment-item>
+		</p-segment-container>
+	`,
+};
+export const Block = {
+    render: () => html `
+		<div class="h-32 max-w-[17.5rem]">
+			<p-segment-container>
+				<p-segment-item
+					variant="block"
+					icon="company"
+					active
+				>
+					<span slot="title">Kantoor</span>
+					<span slot="description">
+						Ik voeg de klant toe en doe de verloning namens de klant
+					</span>
+				</p-segment-item>
+				<p-segment-item
+					variant="block"
+					icon="envelope"
+				>
+					<span slot="title">Klant</span>
+					<span slot="description">
+						Ik nodig de klant uit om de verloning via Employes te doen
+					</span>
+				</p-segment-item>
+			</p-segment-container>
+		</div>
+	`,
+};

package/dist/collection/components/atoms/segment/item/segment-item.stories.js

@@ -0,0 +1,42 @@
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Atoms/Segment/Item',
+    component: 'p-segment-item',
+    args: {
+        content: 'SegmentItem',
+        blockTitle: 'Title',
+        blockDescription: 'Description',
+    },
+    argTypes: {
+        content: {
+            type: 'string',
+        },
+        blockTitle: {
+            type: 'string',
+        },
+        blockDescription: {
+            type: 'string',
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ content, variant, active, 'icon-only': iconOnly, icon, 'icon-flip': iconFlip, 'icon-rotate': iconRotate, blockTitle, blockDescription, }) => html `
+		<p-segment-item
+			variant=${variant ?? nothing}
+			active=${active ?? nothing}
+			icon-only=${iconOnly ?? nothing}
+			icon=${icon ?? nothing}
+			icon-flip=${iconFlip ?? nothing}
+			icon-rotate=${iconRotate ?? nothing}
+		>
+			${content}
+			${variant === 'block'
+        ? html `
+					<span slot="title">${blockTitle}</span>
+					<span slot="description">${blockDescription}</span>
+				`
+        : nothing}
+		</p-segment-item>
+	`,
+};

package/dist/collection/components/atoms/smile/smile.stories.js

@@ -0,0 +1,9 @@
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Atoms/Smile',
+    component: 'p-smile',
+};
+export default meta;
+export const Default = {
+    render: ({ variant }) => html `<p-smile variant=${variant ?? nothing} />`,
+};

package/dist/collection/components/atoms/stepper/item/stepper-item.stories.js

@@ -0,0 +1,26 @@
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Atoms/Stepper/Item',
+    component: 'p-stepper-item',
+    args: {
+        content: 'Stepper item',
+    },
+    argTypes: {
+        content: {
+            type: 'string',
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ align, direction, 'content-position': contentPosition, finished, active, content, }) => html `
+		<p-stepper-item
+			align=${align ?? nothing}
+			direction=${direction ?? nothing}
+			content-position=${contentPosition ?? nothing}
+			finished=${finished ?? nothing}
+			active=${active ?? nothing}
+			>${content}</p-stepper-item
+		>
+	`,
+};

package/dist/collection/components/atoms/stepper/line/stepper-line.stories.js

@@ -0,0 +1,14 @@
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Atoms/Stepper/Line',
+    component: 'p-stepper-line',
+};
+export default meta;
+export const Default = {
+    render: ({ active, direction }) => html `
+		<p-stepper-line
+			active=${active ?? nothing}
+			direction=${direction ?? nothing}
+		/>
+	`,
+};

package/dist/collection/components/atoms/tab/container/tab-container.stories.js

@@ -0,0 +1,20 @@
+import { html } from "lit";
+const meta = {
+    title: 'Design System/Atoms/Tab/Container',
+    component: 'p-tab-container',
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Default = {
+    render: () => html `
+		<p-tab-container>
+			<p-tab-item>Item 1</p-tab-item>
+			<p-tab-item>Item 2</p-tab-item>
+			<p-tab-item active>Item 3</p-tab-item>
+			<p-tab-item>Item 4</p-tab-item>
+			<p-tab-item>Item 5</p-tab-item>
+		</p-tab-container>
+	`,
+};

package/dist/collection/components/atoms/tab/item/tab-item.stories.js

@@ -0,0 +1,20 @@
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Atoms/Tab/Item',
+    component: 'p-tab-item',
+    args: {
+        content: 'TabItem',
+    },
+    argTypes: {
+        content: {
+            type: 'string',
+        },
+    },
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ content, active }) => html `<p-tab-item active=${active ?? nothing}> ${content} </p-tab-item>`,
+};

package/dist/collection/components/atoms/table/actions-container/table-container.stories.js

@@ -0,0 +1,21 @@
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Atoms/Table/Container',
+    component: 'p-table-container',
+    args: {
+        content: 'TableContainer',
+    },
+    argTypes: {
+        content: {
+            type: 'string',
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ content, shadow }) => html `
+		<p-table-container shadow=${shadow ?? nothing}>
+			${content}
+		</p-table-container>
+	`,
+};

package/dist/collection/components/atoms/table/container/table-row-actions-container.stories.js

@@ -0,0 +1,21 @@
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Atoms/Table/Row Actions Container',
+    component: 'p-table-row-actions-container',
+    args: {
+        content: 'Table Row Actions Container',
+    },
+    argTypes: {
+        content: {
+            type: 'string',
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ content, shadow }) => html `
+		<p-table-row-actions-container shadow=${shadow ?? nothing}>
+			${content}
+		</p-table-row-actions-container>
+	`,
+};

package/dist/collection/components/atoms/toast-container/toast-container.stories.js

@@ -0,0 +1,21 @@
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Atoms/Toast container',
+    component: 'p-toast-container',
+    args: {
+        content: 'ToastContainer',
+    },
+    argTypes: {
+        content: {
+            type: 'string',
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ content, placement }) => html `
+		<p-toast-container placement=${placement ?? nothing}>
+			${content}
+		</p-toast-container>
+	`,
+};

package/dist/collection/components/atoms/toggle/toggle.stories.js

@@ -0,0 +1,31 @@
+import { action } from "@storybook/addon-actions";
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Atoms/Toggle',
+    component: 'p-toggle',
+    args: {
+        content: 'Toggle',
+    },
+    argTypes: {
+        content: {
+            type: 'string',
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ content, checked, indeterminate, disabled, required, id, name, }) => html `
+		<p-toggle
+			checked=${checked ?? nothing}
+			indeterminate=${indeterminate ?? nothing}
+			disabled=${disabled ?? nothing}
+			required=${required ?? nothing}
+			id=${id ?? nothing}
+			name=${name ?? nothing}
+			@checkedChange=${action('checkedChange')}
+			@indeterminateChange=${action('indeterminateChange')}
+		>
+			${content}
+		</p-toggle>
+	`,
+};

package/dist/collection/components/atoms/tooltip/tooltip.stories.js

@@ -0,0 +1,24 @@
+import { action } from "@storybook/addon-actions";
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Atoms/Tooltip',
+    component: 'p-tooltip',
+};
+export default meta;
+export const Default = {
+    render: ({ variant, content, placement, offset, strategy, 'enable-user-input': enableUserInput, show, 'can-manually-close': canManuallyClose, }) => html `
+		<p-tooltip
+			variant=${variant ?? nothing}
+			content=${content ?? nothing}
+			placement=${placement ?? nothing}
+			offset=${offset ?? nothing}
+			strategy=${strategy ?? nothing}
+			enable-user-input=${enableUserInput ?? nothing}
+			show=${show ?? nothing}
+			can-manually-close=${canManuallyClose ?? nothing}
+			@isOpen=${action('isOpen')}
+		>
+			<div slot="trigger">Hover/click me</div>
+		</p-tooltip>
+	`,
+};