From b0207e9e72fe6c90b148aaf1136458999b09de04 Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Fri, 9 Aug 2024 17:05:13 +0200
Subject: [PATCH 01/10] =?UTF-8?q?=E2=AC=86=EF=B8=8F=20Bump=20package=20ver?=
 =?UTF-8?q?sion?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json       | 2 +-
 src/utils/modal.ts | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 0e33220..dfa4113 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "webcoreui",
     "type": "module",
-    "version": "0.1.0",
+    "version": "0.2.0",
     "scripts": {
         "dev": "astro dev",
         "build": "astro check && astro build",
diff --git a/src/utils/modal.ts b/src/utils/modal.ts
index d5aeb10..df394db 100644
--- a/src/utils/modal.ts
+++ b/src/utils/modal.ts
@@ -50,7 +50,6 @@ export const modal = (element: string) => {
     }
 }
 
-
 export const closeModal = (element: string) => {
     const htmlElement = document.querySelector(element) as HTMLElement
 

From 6e029301af48f879c8c34feca3f4e434537f0fd8 Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Mon, 12 Aug 2024 16:56:41 +0200
Subject: [PATCH 02/10] =?UTF-8?q?=E2=9C=A8=20Add=20Textarea=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                    |  1 +
 scripts/buildTypes.js                        |  3 +-
 scripts/createComponent.js                   |  3 +
 src/components/Textarea/Textarea.astro       | 44 ++++++++++
 src/components/Textarea/Textarea.svelte      | 45 ++++++++++
 src/components/Textarea/Textarea.tsx         | 50 +++++++++++
 src/components/Textarea/textarea.module.scss | 36 ++++++++
 src/components/Textarea/textarea.ts          | 18 ++++
 src/pages/index.astro                        |  4 +
 src/pages/textarea.astro                     | 89 ++++++++++++++++++++
 src/playground/ReactPlayground.tsx           | 37 +++++---
 src/playground/SveltePlayground.svelte       | 36 +++++---
 12 files changed, 343 insertions(+), 23 deletions(-)
 create mode 100644 src/components/Textarea/Textarea.astro
 create mode 100644 src/components/Textarea/Textarea.svelte
 create mode 100644 src/components/Textarea/Textarea.tsx
 create mode 100644 src/components/Textarea/textarea.module.scss
 create mode 100644 src/components/Textarea/textarea.ts
 create mode 100644 src/pages/textarea.astro

diff --git a/README.md b/README.md
index 26450f0..107e920 100644
--- a/README.md
+++ b/README.md
@@ -210,6 +210,7 @@ import { Accordion } from 'webcoreui/react'
 - [Switch](https://github.com/Frontendland/webcoreui/tree/main/src/components/Switch)
 - [Table](https://github.com/Frontendland/webcoreui/tree/main/src/components/Table)
 - [Tabs](https://github.com/Frontendland/webcoreui/tree/main/src/components/Tabs)
+- [Textarea](https://github.com/Frontendland/webcoreui/tree/main/src/components/Textarea)
 - [ThemeSwitcher](https://github.com/Frontendland/webcoreui/tree/main/src/components/ThemeSwitcher)
 - [Timeline](https://github.com/Frontendland/webcoreui/blob/main/src/pages/timeline.astro)
 - [Toast](https://github.com/Frontendland/webcoreui/tree/main/src/components/Toast)
diff --git a/scripts/buildTypes.js b/scripts/buildTypes.js
index 75eb0b2..77b55a5 100644
--- a/scripts/buildTypes.js
+++ b/scripts/buildTypes.js
@@ -28,7 +28,8 @@ const buildTypes = type => {
                 'Input',
                 'Radio',
                 'Switch',
-                'Slider'
+                'Slider',
+                'Textarea'
             ]
     
             return componentsWithSvelteSpecificTypes.includes(component)
diff --git a/scripts/createComponent.js b/scripts/createComponent.js
index 701ed62..450d895 100644
--- a/scripts/createComponent.js
+++ b/scripts/createComponent.js
@@ -120,6 +120,9 @@ const templates = {
 
             {sections.map(section => (
                 <h1>{section.title}</h1>
+                <Fragment>
+                    {section.subTitle && <h2 set:html={section.subTitle} />}
+                </Fragment>
                 <div class="grid md-2 lg-3">
                     <ComponentWrapper title="Default">
                         <section.component />
diff --git a/src/components/Textarea/Textarea.astro b/src/components/Textarea/Textarea.astro
new file mode 100644
index 0000000..6a1b8d5
--- /dev/null
+++ b/src/components/Textarea/Textarea.astro
@@ -0,0 +1,44 @@
+---
+import type { TextareaProps } from './textarea'
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro'
+
+import styles from './textarea.module.scss'
+
+interface Props extends TextareaProps {}
+
+const {
+    label,
+    placeholder,
+    subText,
+    value = '',
+    disabled,
+    className
+} = Astro.props
+
+const classes = [
+    styles.textarea,
+    className
+]
+
+const useLabel = !!(label || subText)
+---
+
+<ConditionalWrapper condition={useLabel}>
+    <label slot="wrapper" class={styles['label-wrapper']}>
+        {label && (
+            <div class={styles.label}>{label}</div>
+        )}
+        children
+        {subText && (
+            <div class={styles.subtext}>
+                <Fragment set:html={subText} />
+            </div>
+        )}
+    </label>
+
+    <textarea
+        placeholder={placeholder}
+        disabled={disabled}
+        class:list={classes}
+    >{value}</textarea>
+</ConditionalWrapper>
diff --git a/src/components/Textarea/Textarea.svelte b/src/components/Textarea/Textarea.svelte
new file mode 100644
index 0000000..5057daf
--- /dev/null
+++ b/src/components/Textarea/Textarea.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+    import type { SvelteTextareaProps } from './textarea'
+    import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
+
+    import styles from './textarea.module.scss'
+    import { classNames } from '../../utils/classNames'
+
+    export let label: SvelteTextareaProps['label'] = ''
+    export let placeholder: SvelteTextareaProps['placeholder'] = ''
+    export let subText: SvelteTextareaProps['subText'] = ''
+    export let value: SvelteTextareaProps['value'] = ''
+    export let disabled: SvelteTextareaProps['disabled'] = false
+    export let className: SvelteTextareaProps['className'] = ''
+    export let onChange: SvelteTextareaProps['onChange'] = () => {}
+    export let onKeyUp: SvelteTextareaProps['onKeyUp'] = () => {}
+
+    const classes = classNames([
+        styles.textarea,
+        className
+    ])
+
+    const useLabel = !!(label || subText)
+</script>
+
+<ConditionalWrapper
+    condition={useLabel}
+    element="label"
+    class={styles['label-wrapper']}
+>
+    {#if label}
+        <div class={styles.label}>{label}</div>
+    {/if}
+    <textarea
+        placeholder={placeholder}
+        disabled={disabled}
+        class={classes}
+        on:change={onChange}
+        on:keyup={onKeyUp}
+    >{value}</textarea>
+    {#if subText}
+        <div class={styles.subtext}>
+            {@html subText}
+        </div>
+    {/if}
+</ConditionalWrapper>
diff --git a/src/components/Textarea/Textarea.tsx b/src/components/Textarea/Textarea.tsx
new file mode 100644
index 0000000..626d806
--- /dev/null
+++ b/src/components/Textarea/Textarea.tsx
@@ -0,0 +1,50 @@
+import React from 'react'
+import type { ReactTextareaProps } from './textarea'
+import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
+
+import styles from './textarea.module.scss'
+import { classNames } from '../../utils/classNames'
+
+const Textarea = ({
+    label,
+    placeholder,
+    subText,
+    value = '',
+    disabled,
+    className,
+    ...rest
+}: ReactTextareaProps) => {
+    const classes = classNames([
+        styles.textarea,
+        className
+    ])
+
+    const useLabel = !!(label || subText)
+
+    return (
+        <ConditionalWrapper condition={useLabel} wrapper={children => (
+            <label className={styles['label-wrapper']}>
+                {label && (
+                    <div className={styles.label}>{label}</div>
+                )}
+                {children}
+                {subText && (
+                    <div
+                        className={styles.subtext}
+                        dangerouslySetInnerHTML={{ __html: subText }}
+                    />
+                )}
+            </label>
+        )}>
+            <textarea
+                placeholder={placeholder}
+                disabled={disabled}
+                className={classes}
+                defaultValue={value}
+                {...rest}
+            />
+        </ConditionalWrapper>
+    )
+}
+
+export default Textarea
diff --git a/src/components/Textarea/textarea.module.scss b/src/components/Textarea/textarea.module.scss
new file mode 100644
index 0000000..1b834fb
--- /dev/null
+++ b/src/components/Textarea/textarea.module.scss
@@ -0,0 +1,36 @@
+@import '../../scss/config.scss';
+
+.textarea {
+    @include size('w100%');
+    @include background(transparent);
+    @include border-radius(sm);
+    @include border(primary-50);
+    @include spacing(p-sm);
+    @include typography(regular, primary, hlg);
+
+    min-height: 50px;
+    resize: vertical;
+
+    &[disabled] {
+        @include typography(primary-30);
+        cursor: no-drop;
+    }
+
+    &::placeholder {
+        @include typography(primary-30);
+    }
+}
+
+.label-wrapper {
+    @include layout(flex, column);
+
+    .label {
+        @include typography(primary-20);
+        @include spacing(mb-xs);
+    }
+
+    .subtext {
+        @include typography(md, primary-30);
+        @include spacing(mt-xs);
+    }
+}
diff --git a/src/components/Textarea/textarea.ts b/src/components/Textarea/textarea.ts
new file mode 100644
index 0000000..7451723
--- /dev/null
+++ b/src/components/Textarea/textarea.ts
@@ -0,0 +1,18 @@
+export type TextareaProps = {
+    label?: string
+    placeholder?: string
+    subText?: string
+    value?: string
+    disabled?: boolean
+    className?: string
+}
+
+export type SvelteTextareaProps = {
+    onChange?: (e: any) => any
+    onKeyUp?: (e: any) => any
+} & TextareaProps
+
+export type ReactTextareaProps = {
+    onChange?: (e: any) => any
+    onKeyUp?: (e: any) => any
+} & TextareaProps
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 7f17d3c..06aaa98 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -20,6 +20,7 @@ import Spinner from '@components/Spinner/Spinner.astro'
 import Switch from '@components/Switch/Switch.astro'
 import Table from '@components/Table/Table.astro'
 import Tabs from '@components/Tabs/Tabs.astro'
+import Textarea from '@components/Textarea/Textarea.astro'
 import ThemeSwitcher from '@components/ThemeSwitcher/ThemeSwitcher.astro'
 import Timeline from '@components/Timeline/Timeline.astro'
 import TimelineItem from '@components/TimelineItem/TimelineItem.astro'
@@ -171,6 +172,9 @@ const tabItems = [{
         <CardWrapper title="Tabs" href="/tabs">
             <Tabs items={tabItems} theme="boxed" />
         </CardWrapper>
+        <CardWrapper title="Textarea" href="/textarea">
+            <Textarea placeholder="Get in touch with us" />
+        </CardWrapper>
         <CardWrapper title="ThemeSwitcher" href="/theme-switcher">
             <ThemeSwitcher themes={themes} />
         </CardWrapper>
diff --git a/src/pages/textarea.astro b/src/pages/textarea.astro
new file mode 100644
index 0000000..e885bff
--- /dev/null
+++ b/src/pages/textarea.astro
@@ -0,0 +1,89 @@
+---
+import Layout from '@static/Layout.astro'
+import ComponentWrapper from '@static/ComponentWrapper.astro'
+
+import AstroTextarea from '@components/Textarea/Textarea.astro'
+import SvelteTextarea from '@components/Textarea/Textarea.svelte'
+import ReactTextarea from '@components/Textarea/Textarea.tsx'
+
+import { getSections } from '@helpers'
+
+const sections = getSections({
+    title: 'textareas',
+    components: [AstroTextarea, SvelteTextarea, ReactTextarea],
+    showSubTitle: true
+})
+---
+
+<Layout>
+    <h1>Textarea</h1>
+    <div class="grid md-2 lg-3">
+        <ComponentWrapper type="Astro">
+            <AstroTextarea value="Textarea in Astro" />
+        </ComponentWrapper>
+
+        <ComponentWrapper type="Svelte">
+            <SvelteTextarea value="Textarea in Svelte" />
+        </ComponentWrapper>
+
+        <ComponentWrapper type="React">
+            <ReactTextarea value="Textarea in React" />
+        </ComponentWrapper>
+    </div>
+
+    {sections.map(section => (
+        <h1>{section.title}</h1>
+        <Fragment>
+            {section.subTitle && <h2 set:html={section.subTitle} />}
+        </Fragment>
+        <div class="grid md-2 lg-3">
+            <ComponentWrapper title="Default">
+                <section.component />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="With placeholder">
+                <section.component placeholder="Enter your message here" />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="With label">
+                <section.component
+                    label="Get in touch"
+                    placeholder="Enter your message here"
+                />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="With label & subtext">
+                <section.component
+                    label="Get in touch"
+                    placeholder="Enter your message here"
+                    subText="For business inquiries, please reach out to <a href='#'>sales</a>."
+                />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Disabled">
+                <section.component
+                    label="Get in touch"
+                    placeholder="Enter your message here"
+                    subText="For business inquiries, please reach out to <a href='#'>sales</a>."
+                    disabled={true}
+                    value="Disabled textarea with predefined value"
+                />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="No resize">
+                <section.component
+                    label="Get in touch"
+                    placeholder="Enter your message here"
+                    subText="For business inquiries, please reach out to <a href='#'>sales</a>."
+                    className="no-resize"
+                />
+            </ComponentWrapper>
+        </div>
+    ))}
+</Layout>
+
+<style is:global>
+    .no-resize {
+        resize: none;
+    }
+</style>
diff --git a/src/playground/ReactPlayground.tsx b/src/playground/ReactPlayground.tsx
index 2ee21a8..2ca90a4 100644
--- a/src/playground/ReactPlayground.tsx
+++ b/src/playground/ReactPlayground.tsx
@@ -13,6 +13,7 @@ import Radio from '@components/Radio/Radio.tsx'
 import Slider from '@components/Slider/Slider.tsx'
 import Switch from '@components/Switch/Switch.tsx'
 import Tabs from '@components/Tabs/Tabs.tsx'
+import Textarea from '@components/Textarea/Textarea.tsx'
 import ThemeSwitcher from '@components/ThemeSwitcher/ThemeSwitcher.tsx'
 import Toast from '@components/Toast/Toast.tsx'
 
@@ -28,6 +29,7 @@ const ReactPlayground = () => {
     const [toggle, setToggle] = useState(false)
     const [input, setInput] = useState('')
     const [slider, setSlider] = useState(50)
+    const [wordCount, setWordCount] = useState(0)
 
     return (
         <div className="grid md-2 lg-3">
@@ -101,6 +103,17 @@ const ReactPlayground = () => {
                 <span className={styles.span}>{radio}</span>
             </Card>
 
+            <Card title="Slider">
+                <Slider
+                    min={0}
+                    max={100}
+                    value={slider}
+                    onChange={e => setSlider(e.target.value)}
+                    className={styles.mt}
+                />
+                <span className={styles.span}>{slider}</span>
+            </Card>
+
             <Card title="Switch">
                 <Switch
                     onClick={e => setToggle(e.target.checked)}
@@ -125,6 +138,19 @@ const ReactPlayground = () => {
                 </Tabs>
             </Card>
 
+            <Card title="Textarea">
+                <Textarea
+                    placeholder="Type here to see the word count updated"
+                    onKeyUp={e => {
+                        setWordCount(e.target.value
+                            ? e.target.value.trim().split(/\s+/).length
+                            : 0
+                        )
+                    }}
+                />
+                <span className="muted">{wordCount} words</span>
+            </Card>
+
             <Card title="ThemeSwitcher">
                 <ThemeSwitcher themes={themes} />
             </Card>
@@ -138,17 +164,6 @@ const ReactPlayground = () => {
                 />
             </Card>
 
-            <Card title="Slider">
-                <Slider
-                    min={0}
-                    max={100}
-                    value={slider}
-                    onChange={e => setSlider(e.target.value)}
-                    className={styles.mt}
-                />
-                <span className={styles.span}>{slider}</span>
-            </Card>
-
             <Toast title="Badge toast" id="badgeToast">
                 👋 Clicked on badge toast
             </Toast>
diff --git a/src/playground/SveltePlayground.svelte b/src/playground/SveltePlayground.svelte
index 1d455b9..530b7c6 100644
--- a/src/playground/SveltePlayground.svelte
+++ b/src/playground/SveltePlayground.svelte
@@ -12,6 +12,7 @@
     import Slider from '@components/Slider/Slider.svelte'
     import Switch from '@components/Switch/Switch.svelte'
     import Tabs from '@components/Tabs/Tabs.svelte'
+    import Textarea from '@components/Textarea/Textarea.svelte'
     import ThemeSwitcher from '@components/ThemeSwitcher/ThemeSwitcher.svelte'
     import Toast from '@components/Toast/Toast.svelte'
 
@@ -26,6 +27,7 @@
     let toggle = false
     let input = ''
     let slider = 50
+    let wordCount = 0
 </script>
 
 <div class="playground grid md-2 lg-3">
@@ -99,6 +101,17 @@
         <span class={styles.span}>{radio}</span>
     </Card>
 
+    <Card title="Slider">
+        <Slider
+            min={0}
+            max={100}
+            value={slider}
+            onChange={e => slider = e.target.value}
+            className={styles.mt}
+        />
+        <span class={styles.span}>{slider}</span>
+    </Card>
+
     <Card title="Switch">
         <Switch
             onClick={e => toggle = e.target.checked}
@@ -123,6 +136,18 @@
         </Tabs>
     </Card>
 
+    <Card title="Textarea">
+        <Textarea
+            placeholder="Type here to see the word count updated"
+            onKeyUp={e => {
+                wordCount = e.target.value
+                    ? e.target.value.trim().split(/\s+/).length
+                    : 0
+            }}
+        />
+        <span class="muted">{wordCount} words</span>
+    </Card>
+
     <Card title="ThemeSwitcher">
         <ThemeSwitcher themes={themes} />
     </Card>
@@ -133,17 +158,6 @@
             <Icon type="sun" slot="secondaryIcon" />
         </ThemeSwitcher>
     </Card>
-
-    <Card title="Slider">
-        <Slider
-            min={0}
-            max={100}
-            value={slider}
-            onChange={e => slider = e.target.value}
-            className={styles.mt}
-        />
-        <span class={styles.span}>{slider}</span>
-    </Card>
 </div>
 
 <Toast title="Badge toast" id="badgeToast">

From 484d1e210331e8c205b27b4744bbca9bdea75c3c Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Tue, 13 Aug 2024 16:48:59 +0200
Subject: [PATCH 03/10] =?UTF-8?q?=E2=9C=A8=20Add=20Collapsible=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                     |   5 +
 src/components/Collapsible/Collapsible.astro  |  63 ++++++++
 src/components/Collapsible/Collapsible.svelte |  48 +++++++
 src/components/Collapsible/Collapsible.tsx    |  54 +++++++
 .../Collapsible/collapsible.module.scss       |  29 ++++
 src/components/Collapsible/collapsible.ts     |  14 ++
 src/pages/collapsible.astro                   | 134 ++++++++++++++++++
 src/pages/index.astro                         |   7 +
 src/playground/ReactPlayground.tsx            |  11 ++
 src/playground/SveltePlayground.svelte        |   9 ++
 src/static/CollapsibleTable.astro             |  19 +++
 11 files changed, 393 insertions(+)
 create mode 100644 src/components/Collapsible/Collapsible.astro
 create mode 100644 src/components/Collapsible/Collapsible.svelte
 create mode 100644 src/components/Collapsible/Collapsible.tsx
 create mode 100644 src/components/Collapsible/collapsible.module.scss
 create mode 100644 src/components/Collapsible/collapsible.ts
 create mode 100644 src/pages/collapsible.astro
 create mode 100644 src/static/CollapsibleTable.astro

diff --git a/README.md b/README.md
index 107e920..b684e9f 100644
--- a/README.md
+++ b/README.md
@@ -113,6 +113,10 @@ html body {
     // Checkbox component
     --w-checkbox-color: var(--w-color-primary);
 
+    // Collapsible
+    --w-collapsible-initial-height: 0;
+    --w-collapsible-max-height: 100%;
+
     // Progress component
     --w-progress-color: var(--w-color-primary);
     --w-progress-background: var(--w-color-primary-50);
@@ -197,6 +201,7 @@ import { Accordion } from 'webcoreui/react'
 - [Button](https://github.com/Frontendland/webcoreui/tree/main/src/components/Button)
 - [Card](https://github.com/Frontendland/webcoreui/tree/main/src/components/Card)
 - [Checkbox](https://github.com/Frontendland/webcoreui/tree/main/src/components/Checkbox)
+- [Collapsible](https://github.com/Frontendland/webcoreui/tree/main/src/components/Collapsible)
 - [ConditionalWrapper](https://github.com/Frontendland/webcoreui/tree/main/src/components/ConditionalWrapper)
 - [Icon](https://github.com/Frontendland/webcoreui/tree/main/src/components/Icon)
 - [Input](https://github.com/Frontendland/webcoreui/tree/main/src/components/Input)
diff --git a/src/components/Collapsible/Collapsible.astro b/src/components/Collapsible/Collapsible.astro
new file mode 100644
index 0000000..1596e56
--- /dev/null
+++ b/src/components/Collapsible/Collapsible.astro
@@ -0,0 +1,63 @@
+---
+import type { CollapsibleProps } from './collapsible'
+
+import styles from './collapsible.module.scss'
+import { classNames } from '../../utils/classNames'
+
+interface Props extends CollapsibleProps {}
+
+const {
+    initialHeight,
+    maxHeight,
+    toggled,
+    className,
+    togglesClassName
+} = Astro.props
+
+const classes = [
+    styles.collapsible,
+    maxHeight && styles.animated,
+    className
+]
+
+const styleVariables = classNames([
+    initialHeight && `--w-collapsible-initial-height: ${initialHeight};`,
+    maxHeight && `--w-collapsible-max-height: ${maxHeight};`
+])
+---
+
+<div
+    class:list={classes}
+    data-toggled={toggled ? 'true' : undefined}
+    data-id="w-collapsible"
+>
+    <div
+        class={styles.wrapper}
+        style={styleVariables}
+    >
+        <slot />
+    </div>
+    <div class:list={togglesClassName}>
+        <div data-toggle-on="true"><slot name="on" /></div>
+        <div data-toggle-off="true"><slot name="off" /></div>
+    </div>
+</div>
+
+<script>
+    const collapsibles = document.querySelectorAll('[data-id="w-collapsible"]')
+
+    Array.from(collapsibles).forEach(element => {
+        element.addEventListener('click', event => {
+            const collapsible = event.currentTarget as HTMLDivElement
+            const target = event.target as HTMLDivElement
+
+            if (target.parentElement?.dataset.toggleOn) {
+                collapsible.dataset.toggled = 'true'
+            }
+
+            if (target.parentElement?.dataset.toggleOff) {
+                collapsible.dataset.toggled = 'false'
+            }
+        })
+    })
+</script>
diff --git a/src/components/Collapsible/Collapsible.svelte b/src/components/Collapsible/Collapsible.svelte
new file mode 100644
index 0000000..e483328
--- /dev/null
+++ b/src/components/Collapsible/Collapsible.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+    import type { CollapsibleProps } from './collapsible'
+
+    import styles from './collapsible.module.scss'
+    import { classNames } from '../../utils/classNames'
+
+    export let initialHeight: CollapsibleProps['initialHeight'] = ''
+    export let maxHeight: CollapsibleProps['maxHeight'] = ''
+    export let toggled: CollapsibleProps['toggled'] = false
+    export let className: CollapsibleProps['className'] = ''
+    export let togglesClassName: CollapsibleProps['togglesClassName'] = ''
+
+    const classes = classNames([
+        styles.collapsible,
+        maxHeight && styles.animated,
+        className
+    ])
+
+    const styleVariables = classNames([
+        initialHeight && `--w-collapsible-initial-height: ${initialHeight};`,
+        maxHeight && `--w-collapsible-max-height: ${maxHeight};`
+    ])
+</script>
+
+<div
+    class={classes}
+    data-toggled={toggled ? 'true' : undefined}
+>
+    <div
+        class={styles.wrapper}
+        style={styleVariables}
+    >
+        <slot />
+    </div>
+    <div
+        on:click={() => toggled = !toggled}
+        on:keyup={() => toggled = !toggled}
+        role="button"
+        tabindex={0}
+        class={togglesClassName}
+    >
+        {#if toggled}
+            <slot name="off" />
+        {:else}
+            <slot name="on" />
+        {/if}
+    </div>
+</div>
diff --git a/src/components/Collapsible/Collapsible.tsx b/src/components/Collapsible/Collapsible.tsx
new file mode 100644
index 0000000..89318f6
--- /dev/null
+++ b/src/components/Collapsible/Collapsible.tsx
@@ -0,0 +1,54 @@
+import React, { useState } from 'react'
+import type { ReactCollapsibleProps } from './collapsible'
+
+import styles from './collapsible.module.scss'
+import { classNames } from '../../utils/classNames'
+
+const Collapsible = ({
+    initialHeight,
+    maxHeight,
+    toggled,
+    on,
+    off,
+    children,
+    className,
+    togglesClassName
+}: ReactCollapsibleProps) => {
+    const [toggle, setToggled] = useState(toggled)
+
+    const classes = classNames([
+        styles.collapsible,
+        maxHeight && styles.animated,
+        className
+    ])
+
+    const styleVariables = {
+        ...(initialHeight && { '--w-collapsible-initial-height': initialHeight }),
+        ...(maxHeight && { '--w-collapsible-max-height': maxHeight })
+    } as React.CSSProperties
+
+    return (
+        <div
+            className={classes}
+            data-toggled={toggle ? 'true' : undefined}
+        >
+            <div
+                className={styles.wrapper}
+                style={styleVariables}
+            >
+                {children}
+            </div>
+            <div
+                onClick={() => setToggled(!toggle)}
+                onKeyUp={() => setToggled(!toggle)}
+                role="button"
+                tabIndex={0}
+                className={togglesClassName}
+            >
+                {toggle ? off : on}
+            </div>
+        </div>
+    )
+}
+
+export default Collapsible
diff --git a/src/components/Collapsible/collapsible.module.scss b/src/components/Collapsible/collapsible.module.scss
new file mode 100644
index 0000000..3c5c470
--- /dev/null
+++ b/src/components/Collapsible/collapsible.module.scss
@@ -0,0 +1,29 @@
+@import '../../scss/config.scss';
+
+body {
+    --w-collapsible-initial-height: 0;
+    --w-collapsible-max-height: 100%;
+}
+
+.collapsible {
+    @include layout(flex, column, xs);
+
+    &:not([data-toggled="true"]) [data-toggle-off],
+    &[data-toggled="true"] [data-toggle-on] {
+        @include visibility(none);
+    }
+
+    &[data-toggled="true"] .wrapper {
+        max-height: var(--w-collapsible-max-height);
+    }
+
+    &.animated .wrapper {
+        @include transition(max-height, .5s);
+    }
+
+    .wrapper {
+        @include visibility(hidden);
+
+        max-height: var(--w-collapsible-initial-height);
+    }
+}
diff --git a/src/components/Collapsible/collapsible.ts b/src/components/Collapsible/collapsible.ts
new file mode 100644
index 0000000..e392af0
--- /dev/null
+++ b/src/components/Collapsible/collapsible.ts
@@ -0,0 +1,14 @@
+export type CollapsibleProps = {
+    initialHeight?: string
+    maxHeight?: string
+    toggled?: boolean
+    className?: string
+    togglesClassName?: string
+}
+
+export type ReactCollapsibleProps = {
+    on: React.ReactNode
+    off: React.ReactNode
+    children?: React.ReactNode
+} & CollapsibleProps
+
diff --git a/src/pages/collapsible.astro b/src/pages/collapsible.astro
new file mode 100644
index 0000000..33cb82e
--- /dev/null
+++ b/src/pages/collapsible.astro
@@ -0,0 +1,134 @@
+---
+import Layout from '@static/Layout.astro'
+import ComponentWrapper from '@static/ComponentWrapper.astro'
+import CollapsibleTable from '@static/CollapsibleTable.astro'
+
+import AstroCollapsible from '@components/Collapsible/Collapsible.astro'
+import SvelteCollapsible from '@components/Collapsible/Collapsible.svelte'
+import ReactCollapsible from '@components/Collapsible/Collapsible.tsx'
+
+import Button from '@components/Button/Button.astro'
+
+import { getSections } from '@helpers'
+
+const sections = getSections({
+    title: 'collapsibles',
+    components: [AstroCollapsible, SvelteCollapsible, ReactCollapsible],
+    showSubTitle: true
+})
+---
+
+<Layout>
+    <h1>Collapsible</h1>
+    <div class="grid md-2 lg-3">
+        <ComponentWrapper type="Astro">
+            <AstroCollapsible maxHeight="330px">
+                <CollapsibleTable />
+
+                <Button slot="on">Expand</Button>
+                <Button slot="off">Collapse</Button>
+            </AstroCollapsible>
+        </ComponentWrapper>
+
+        <ComponentWrapper type="Svelte">
+            <SvelteCollapsible maxHeight="330px" client:idle>
+                <CollapsibleTable />
+
+                <Button slot="on">Expand</Button>
+                <Button slot="off">Collapse</Button>
+            </SvelteCollapsible>
+        </ComponentWrapper>
+
+        <ComponentWrapper type="React">
+            <ReactCollapsible
+                on=""
+                off=""
+                maxHeight="330px"
+                client:idle
+            >
+                <CollapsibleTable />
+
+                <Button slot="on">Expand</Button>
+                <Button slot="off">Collapse</Button>
+            </ReactCollapsible>
+        </ComponentWrapper>
+    </div>
+
+    {sections.map(section => (
+        <h1>{section.title}</h1>
+        <Fragment>
+            {section.subTitle && <h2 set:html={section.subTitle} />}
+        </Fragment>
+        <div class="grid md-2 lg-3">
+            <ComponentWrapper title="Default">
+                <section.component>
+                    <CollapsibleTable />
+
+                    <Button slot="on">Expand</Button>
+                    <Button slot="off">Collapse</Button>
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Toggled by default">
+                <section.component toggled={true}>
+                    <CollapsibleTable />
+
+                    <Button slot="on">Expand</Button>
+                    <Button slot="off">Collapse</Button>
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Toggle with same button">
+                <section.component>
+                    <CollapsibleTable />
+
+                    <Button slot="on">Toggle</Button>
+                    <Button slot="off">Toggle</Button>
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Animated">
+                <section.component maxHeight="330px">
+                    <CollapsibleTable />
+
+                    <Button slot="on">Expand</Button>
+                    <Button slot="off">Collapse</Button>
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Animated with partial visibility">
+                <section.component
+                    initialHeight="100px"
+                    maxHeight="330px"
+                >
+                    <CollapsibleTable />
+
+                    <Button slot="on">Expand</Button>
+                    <Button slot="off">Collapse</Button>
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Toggle with custom layout">
+                <section.component
+                    className="collapsible-table"
+                    togglesClassName="center"
+                >
+                    <CollapsibleTable />
+
+                    <Button slot="on">Expand</Button>
+                    <Button slot="off">Collapse</Button>
+                </section.component>
+            </ComponentWrapper>
+        </div>
+    ))}
+</Layout>
+
+<style is:global>
+    .collapsible-table {
+        gap: 20px;
+    }
+
+    .center {
+        align-self: center;
+    }
+</style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 06aaa98..3138fa3 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -9,6 +9,7 @@ import Avatar from '@components/Avatar/Avatar.astro'
 import Badge from '@components/Badge/Badge.astro'
 import Button from '@components/Button/Button.astro'
 import Checkbox from '@components/Checkbox/Checkbox.astro'
+import Collapsible from '@components/Collapsible/Collapsible.astro'
 import Icon from '@components/Icon/Icon.astro'
 import Input from '@components/Input/Input.astro'
 import Menu from '@components/Menu/Menu.astro'
@@ -104,6 +105,12 @@ const tabItems = [{
         <CardWrapper title="Checkbox" href="/checkbox">
             <Checkbox checked={true} label="Accept terms and conditions" />
         </CardWrapper>
+        <CardWrapper title="Collapsible" href="/collapsible">
+            <Collapsible initialHeight="20px">
+                <span>This book has been rated for...</span>
+                <Badge slot="on">Expand</Badge>
+            </Collapsible>
+        </CardWrapper>
         <CardWrapper title="Icon" href="/icon">
             <Icon
                 type="github"
diff --git a/src/playground/ReactPlayground.tsx b/src/playground/ReactPlayground.tsx
index 2ca90a4..2e1afb1 100644
--- a/src/playground/ReactPlayground.tsx
+++ b/src/playground/ReactPlayground.tsx
@@ -6,6 +6,7 @@ import Accordion from '@components/Accordion/Accordion.tsx'
 import Badge from '@components/Badge/Badge.tsx'
 import Button from '@components/Button/Button.tsx'
 import Checkbox from '@components/Checkbox/Checkbox.tsx'
+import Collapsible from '@components/Collapsible/Collapsible.tsx'
 import Icon from '@components/Icon/Icon.tsx'
 import Input from '@components/Input/Input.tsx'
 import Progress from '@components/Progress/Progress.tsx'
@@ -62,6 +63,16 @@ const ReactPlayground = () => {
                 <span className={styles.span}>{`${checkbox}`}</span>
             </Card>
 
+            <Card title="Collapsible">
+                <Collapsible
+                    on={<Button>Show</Button>}
+                    off={<Button>Hide</Button>}
+                    maxHeight="50px"
+                >
+                    <span>This paragraph can be toggled on and off.</span>
+                </Collapsible>
+            </Card>
+
             <Card title="Input">
                 <Input
                     label="Enter a value"
diff --git a/src/playground/SveltePlayground.svelte b/src/playground/SveltePlayground.svelte
index 530b7c6..0266125 100644
--- a/src/playground/SveltePlayground.svelte
+++ b/src/playground/SveltePlayground.svelte
@@ -5,6 +5,7 @@
     import Badge from '@components/Badge/Badge.svelte'
     import Button from '@components/Button/Button.svelte'
     import Checkbox from '@components/Checkbox/Checkbox.svelte'
+    import Collapsible from '@components/Collapsible/Collapsible.svelte'
     import Icon from '@components/Icon/Icon.svelte'
     import Input from '@components/Input/Input.svelte'
     import Progress from '@components/Progress/Progress.svelte'
@@ -60,6 +61,14 @@
         <span class={styles.span}>{checkbox}</span>
     </Card>
 
+    <Card title="Collapsible">
+        <Collapsible maxHeight="50px">
+            <span>This paragraph can be toggled on and off.</span>
+            <Button slot="on">Show</Button>
+            <Button slot="off">Hide</Button>
+        </Collapsible>
+    </Card>
+
     <Card title="Input">
         <Input
             label="Enter a value"
diff --git a/src/static/CollapsibleTable.astro b/src/static/CollapsibleTable.astro
new file mode 100644
index 0000000..2319138
--- /dev/null
+++ b/src/static/CollapsibleTable.astro
@@ -0,0 +1,19 @@
+---
+import Table from '@components/Table/Table.astro'
+
+const scrollTable = {
+    headings: ['Keyword', 'CSS'],
+    data: [
+        ['none', '0'],
+        ['xxs', '2px'],
+        ['xs', '5px'],
+        ['sm', '10px'],
+        ['md', '15px'],
+        ['default', '20px'],
+        ['lg', '25px'],
+        ['xl', '30px']
+    ]
+}
+---
+
+<Table {...scrollTable} />

From 45c945c664abf9f9b6ee2bb023451d81f79fdc07 Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Tue, 13 Aug 2024 17:26:22 +0200
Subject: [PATCH 04/10] =?UTF-8?q?=F0=9F=90=9B=20Fix=20custom=20icon=20show?=
 =?UTF-8?q?ing=20up=20in=20wrong=20place=20for=20Svelte=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Toast/Toast.svelte | 17 +++++++++++------
 src/pages/toast.astro             | 14 ++++++--------
 src/utils/toast.ts                |  6 ------
 3 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/src/components/Toast/Toast.svelte b/src/components/Toast/Toast.svelte
index 899385b..af18c47 100644
--- a/src/components/Toast/Toast.svelte
+++ b/src/components/Toast/Toast.svelte
@@ -24,9 +24,14 @@
     }
 </script>
 
-<Alert {...$$restProps} className={classes} {...additionalProps}>
-    {#if $$slots.icon}
-        <slot name="icon" />
-    {/if}
-    <slot />
-</Alert>
+{#if $$slots.icon}
+    <Alert {...$$restProps} className={classes} {...additionalProps}>
+        <slot slot="icon" name="icon" />
+        <slot />
+    </Alert>
+{:else}
+    <Alert {...$$restProps} className={classes} {...additionalProps}>
+        <slot />
+    </Alert>
+{/if}
+
diff --git a/src/pages/toast.astro b/src/pages/toast.astro
index b0008cc..540c1a8 100644
--- a/src/pages/toast.astro
+++ b/src/pages/toast.astro
@@ -129,7 +129,7 @@ const sections = getSections({
                 </section.component>
             </ComponentWrapper>
 
-            <ComponentWrapper title="Programmatically setting copy, theme & pos">
+            <ComponentWrapper title="Programmatically setting copy & pos">
                 <Button theme="secondary" id={`programmatic-btn-${index}`}>
                     Programmatically setting copy
                 </Button>
@@ -138,11 +138,11 @@ const sections = getSections({
                     Original content
                 </section.component>
 
-                <Button theme="secondary" id={`themed-btn-${index}`}>
+                <Button theme="secondary" id={`pos-btn-${index}`}>
                     Show Toast in top-left corner
                 </Button>
 
-                <section.component title="Original title" id={`themed-toast-${index}`}>
+                <section.component title="Original title" id={`pos-toast-${index}`}>
                     Original content
                 </section.component>
             </ComponentWrapper>
@@ -208,14 +208,12 @@ const sections = getSections({
         })
     });
 
-    // Programmatically setting theme
+    // Programmatically setting position
     [0, 1, 2].forEach(x => {
-        on(`#themed-btn-${x}`, () => {
+        on(`#pos-btn-${x}`, () => {
             toast({
-                element: `#themed-toast-${x}`,
+                element: `#pos-toast-${x}`,
                 title: 'Title set through JS',
-                content: 'Theme set to "success"',
-                theme: 'success',
                 position: 'top-left'
             })
         })
diff --git a/src/utils/toast.ts b/src/utils/toast.ts
index 8ccf6ae..8dff831 100644
--- a/src/utils/toast.ts
+++ b/src/utils/toast.ts
@@ -6,7 +6,6 @@ type Toast = {
     timeout?: number
     title?: AlertProps['title']
     content?: string
-    theme?: AlertProps['theme']
     position?: ToastProps['position']
 }
 
@@ -23,17 +22,12 @@ export const toast = (config: Toast | string) => {
         timeout,
         title,
         content,
-        theme,
         position
     } = (typeof config === 'string' ? {} : config) as Toast
 
     const htmlElement = document.querySelector(element) as HTMLElement
 
     if (htmlElement) {
-        if (theme) {
-            htmlElement.dataset.theme = theme
-        }
-        
         if (position) {
             htmlElement.dataset.position = position
         }

From 36c93874741231d71c8b59226d63b763ca8dc07a Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Tue, 13 Aug 2024 21:56:41 +0200
Subject: [PATCH 05/10] =?UTF-8?q?=E2=9C=A8=20Improve=20Examples?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/static/Examples.astro | 54 +++++++++++++++++++++++++++++++++------
 1 file changed, 46 insertions(+), 8 deletions(-)

diff --git a/src/static/Examples.astro b/src/static/Examples.astro
index 611008a..126a085 100644
--- a/src/static/Examples.astro
+++ b/src/static/Examples.astro
@@ -1,21 +1,23 @@
 ---
 import Alert from '@components/Alert/Alert.astro'
-import Card from '@components/Card/Card.astro'
-import Input from '@components/Input/Input.astro'
-import Icon from '@components/Icon/Icon.astro'
+import Avatar from '@components/Avatar/Avatar.astro'
 import Badge from '@components/Badge/Badge.astro'
 import Button from '@components/Button/Button.astro'
+import Card from '@components/Card/Card.astro'
 import Checkbox from '@components/Checkbox/Checkbox.astro'
+import Input from '@components/Input/Input.astro'
+import Icon from '@components/Icon/Icon.astro'
+import Modal from '@components/Modal/Modal.astro'
+import Progress from '@components/Progress/Progress.astro'
 import Radio from '@components/Radio/Radio.astro'
+import Rating from '@components/Rating/Rating.astro'
+import Spinner from '@components/Spinner/Spinner.astro'
 import Switch from '@components/Switch/Switch.astro'
-import Avatar from '@components/Avatar/Avatar.astro'
 import Tabs from '@components/Tabs/Tabs.astro'
 import Table from '@components/Table/Table.astro'
 import Timeline from '@components/Timeline/Timeline.astro'
-import Progress from '@components/Progress/Progress.astro'
-import Rating from '@components/Rating/Rating.astro'
-import Spinner from '@components/Spinner/Spinner.astro'
 import TimelineItem from '@components/TimelineItem/TimelineItem.astro'
+import Toast from '@components/Toast/Toast.astro'
 
 import { avatarGroup, avatarGroupAlt2 } from '@data'
 
@@ -94,7 +96,7 @@ const tasks = [
                     subText="Enable or disable all of your notification with one click. Previous settings will be overwritten."
                 />
                 <Switch label="Security emails" toggled={true} />
-                <Switch label="Marketing emails" />
+                <Switch label="Marketing emails" className="marketing" />
                 <hr />
                 <strong class="slack">Slack notifications</strong>
                 <Radio
@@ -220,6 +222,16 @@ const tasks = [
             <span>Connect your project to GitHub to start running automatic deployments.</span>
             <Button className="connect">Connect</Button>
         </Alert>
+
+        <Toast theme="success" className="marketing-toast">
+            Marketing emails enabled
+        </Toast>
+
+        <Modal title="Are you sure?" subTitle="Confirm update" className="modal">
+            <p>Automatic deployments will be enabled for your project.</p>
+            <Button className="close-modal">Confirm</Button>
+            <Button theme="secondary" className="close-modal">Cancel</Button>
+        </Modal>
     </div>
 </div>
 
@@ -280,3 +292,29 @@ const tasks = [
         @include typography(md);
     }
 </style>
+
+<script>
+    import { toast } from '@utils/toast'
+    import { modal, closeModal } from '@utils/modal'
+
+    const marketing = document.querySelector('.marketing input')
+    const connect = document.querySelector('.connect')
+    const closeButton = document.querySelectorAll('.close-modal')
+
+    marketing?.addEventListener('change', (e: any) => {
+        toast({
+            element: '.marketing-toast',
+            content: e.target.checked
+                ? 'Marketing emails enabled'
+                : 'Marketing emails disabled'
+        })
+    })
+
+    connect?.addEventListener('click', () => {
+        modal('.modal')
+    })
+
+    Array.from(closeButton).forEach(button => {
+        button?.addEventListener('click', () => closeModal('.modal'))
+    })
+</script>

From fd98d8cfb1c2da35f38da426adaccbccfb596d1a Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Thu, 15 Aug 2024 16:17:45 +0200
Subject: [PATCH 06/10] =?UTF-8?q?=F0=9F=90=9B=20Fix=20distorted=20avatar?=
 =?UTF-8?q?=20images=20when=20aspect=20ratio=20is=20not=201:1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Alert/Alert.tsx           | 5 ++++-
 src/components/Avatar/avatar.module.scss | 2 ++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx
index 11c1ab0..f1e6f7f 100644
--- a/src/components/Alert/Alert.tsx
+++ b/src/components/Alert/Alert.tsx
@@ -38,7 +38,10 @@ const Alert = ({
     return (
         <Element className={classes} {...rest}>
             {icon && icon}
-            {!icon && theme && <div dangerouslySetInnerHTML={{ __html: iconMap[theme] }} />}
+            {!icon && theme && <div
+                dangerouslySetInnerHTML={{ __html: iconMap[theme] }}
+                style={{ height: '20px' }}
+            />}
 
             <ConditionalWrapper condition={!!(icon || theme)} wrapper={children => (
                 <div className={styles.wrapper}>
diff --git a/src/components/Avatar/avatar.module.scss b/src/components/Avatar/avatar.module.scss
index 9d2e90a..7b9c2f2 100644
--- a/src/components/Avatar/avatar.module.scss
+++ b/src/components/Avatar/avatar.module.scss
@@ -7,6 +7,8 @@ body {
 .avatar {
     @include border-radius(max);
 
+    object-fit: cover;
+
     &:not(.borderless) {
         border: 3px solid var(--w-avatar-border);
     }

From 2a5e7eb2d5930d6b754a49d7ae3725cd39e9765d Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Fri, 16 Aug 2024 16:52:40 +0200
Subject: [PATCH 07/10] =?UTF-8?q?=E2=9C=A8=20Add=20Sheet=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                              |   1 +
 src/components/Sheet/Sheet.astro       |  29 +++
 src/components/Sheet/Sheet.svelte      |  24 +++
 src/components/Sheet/Sheet.tsx         |  32 ++++
 src/components/Sheet/sheet.module.scss |  68 +++++++
 src/components/Sheet/sheet.ts          |  10 ++
 src/pages/index.astro                  |   3 +
 src/pages/sheet.astro                  | 239 +++++++++++++++++++++++++
 8 files changed, 406 insertions(+)
 create mode 100644 src/components/Sheet/Sheet.astro
 create mode 100644 src/components/Sheet/Sheet.svelte
 create mode 100644 src/components/Sheet/Sheet.tsx
 create mode 100644 src/components/Sheet/sheet.module.scss
 create mode 100644 src/components/Sheet/sheet.ts
 create mode 100644 src/pages/sheet.astro

diff --git a/README.md b/README.md
index b684e9f..f1deda1 100644
--- a/README.md
+++ b/README.md
@@ -210,6 +210,7 @@ import { Accordion } from 'webcoreui/react'
 - [Progress](https://github.com/Frontendland/webcoreui/tree/main/src/components/Progress)
 - [Radio](https://github.com/Frontendland/webcoreui/tree/main/src/components/Radio)
 - [Rating](https://github.com/Frontendland/webcoreui/tree/main/src/components/Rating)
+- [Sheet](https://github.com/Frontendland/webcoreui/tree/main/src/components/Sheet)
 - [Slider](https://github.com/Frontendland/webcoreui/tree/main/src/components/Slider)
 - [Spinner](https://github.com/Frontendland/webcoreui/tree/main/src/components/Spinner)
 - [Switch](https://github.com/Frontendland/webcoreui/tree/main/src/components/Switch)
diff --git a/src/components/Sheet/Sheet.astro b/src/components/Sheet/Sheet.astro
new file mode 100644
index 0000000..8d86743
--- /dev/null
+++ b/src/components/Sheet/Sheet.astro
@@ -0,0 +1,29 @@
+---
+import type { SheetProps } from './sheet'
+
+import Modal from '../Modal/Modal.astro'
+
+import styles from './sheet.module.scss'
+import { classNames } from '../../utils/classNames'
+
+interface Props extends SheetProps {}
+
+const {
+    position,
+    className,
+    ...rest
+} = Astro.props
+
+const classes = classNames([
+    styles.sheet,
+    position && styles[position],
+    className
+])
+---
+
+<Modal
+    className={classes}
+    {...rest}
+>
+    <slot />
+</Modal>
diff --git a/src/components/Sheet/Sheet.svelte b/src/components/Sheet/Sheet.svelte
new file mode 100644
index 0000000..cae5c3f
--- /dev/null
+++ b/src/components/Sheet/Sheet.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+    import type { SheetProps } from './sheet'
+
+    import Modal from '../Modal/Modal.svelte'
+
+    import styles from './sheet.module.scss'
+    import { classNames } from '../../utils/classNames'
+
+    export let position: SheetProps['position'] = null
+    export let className: SheetProps['className'] = ''
+
+    const classes = classNames([
+        styles.sheet,
+        position && styles[position],
+        className
+    ])
+</script>
+
+<Modal
+    className={classes}
+    {...$$restProps}
+>
+    <slot />
+</Modal>
diff --git a/src/components/Sheet/Sheet.tsx b/src/components/Sheet/Sheet.tsx
new file mode 100644
index 0000000..0cbe7d6
--- /dev/null
+++ b/src/components/Sheet/Sheet.tsx
@@ -0,0 +1,32 @@
+import React from 'react'
+import type { ReactSheetProps } from './sheet'
+
+import Modal from '../Modal/Modal.tsx'
+
+import styles from './sheet.module.scss'
+import { classNames } from '../../utils/classNames'
+
+const Sheet = ({
+    position,
+    className,
+    children,
+    ...rest
+}: ReactSheetProps) => {
+    const classes = classNames([
+        styles.sheet,
+        position && styles[position],
+        className
+    ])
+
+    return (
+        <Modal
+            className={classes}
+            {...rest}
+        >
+            {children}
+        </Modal>
+
+    )
+}
+
+export default Sheet
diff --git a/src/components/Sheet/sheet.module.scss b/src/components/Sheet/sheet.module.scss
new file mode 100644
index 0000000..05572ab
--- /dev/null
+++ b/src/components/Sheet/sheet.module.scss
@@ -0,0 +1,68 @@
+@import '../../scss/config.scss';
+
+.sheet {
+    @include position(t0, 'r-100%', lauto);
+    @include visibility(1);
+    @include border-radius(none);
+    @include size(100%);
+    @include border(0);
+    @include border(left, primary-50);
+
+    transform: none;
+
+    &[data-show="true"] {
+        @include position(r0);
+
+        transform: none;
+    }
+
+    &.left {
+        @include position('l-100%', rauto);
+        @include border(0);
+        @include border(right, primary-50);
+
+        &[data-show="true"] {
+            @include position(l0);
+        }
+    }
+
+    &.top {
+        @include position(t0, l0);
+        @include size(hauto);
+        @include border(0);
+        @include border(bottom, primary-50);
+
+        transform: translateY(-100%);
+        min-width: 100%;
+
+        &[data-show="true"] {
+            transform: translateY(0);
+        }
+    }
+
+    &.bottom {
+        @include position(b0, l0);
+        @include size(hauto);
+        @include border(0);
+        @include border(top, primary-50);
+
+        transform: translateY(100%);
+        top: auto;
+        min-width: 100%;
+
+        &[data-show="true"] {
+            transform: translateY(0);
+        }
+    }
+}
+
+@include media(xs) {
+    .sheet {
+        @include position(r-500px);
+        @include size(w500px);
+
+        &.left {
+            @include position(l-500px);
+        }
+    }
+}
diff --git a/src/components/Sheet/sheet.ts b/src/components/Sheet/sheet.ts
new file mode 100644
index 0000000..1a4ab31
--- /dev/null
+++ b/src/components/Sheet/sheet.ts
@@ -0,0 +1,10 @@
+import type { ModalProps, ReactModalProps } from '../Modal/modal'
+
+export type SheetProps = {
+    position?: 'left'
+        | 'top'
+        | 'bottom'
+        | null
+} & ModalProps
+
+export type ReactSheetProps = SheetProps & ReactModalProps
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 3138fa3..9c1fd1e 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -161,6 +161,9 @@ const tabItems = [{
         <CardWrapper title="Rating" href="/rating">
             <Rating score={4} />
         </CardWrapper>
+        <CardWrapper title="Sheet" href="/sheet">
+            <Button theme="outline">Open Sheet</Button>
+        </CardWrapper>
         <CardWrapper title="Slider" href="/slider">
             <Slider min={0} max={100} value={50} />
         </CardWrapper>
diff --git a/src/pages/sheet.astro b/src/pages/sheet.astro
new file mode 100644
index 0000000..f6c4999
--- /dev/null
+++ b/src/pages/sheet.astro
@@ -0,0 +1,239 @@
+---
+import Layout from '@static/Layout.astro'
+import ComponentWrapper from '@static/ComponentWrapper.astro'
+
+import Button from '@components/Button/Button.astro'
+import AstroSheet from '@components/Sheet/Sheet.astro'
+import SvelteSheet from '@components/Sheet/Sheet.svelte'
+import ReactSheet from '@components/Sheet/Sheet.tsx'
+
+import { getSections } from '@helpers'
+
+const sections = getSections({
+    title: 'sheets',
+    components: [AstroSheet, SvelteSheet, ReactSheet]
+})
+---
+
+<Layout>
+    <h1>Sheet</h1>
+    <div class="grid md-2 lg-3">
+        <ComponentWrapper type="Astro">
+            <Button theme="secondary" id="sheet-btn-astro">
+                Open Astro Sheet
+            </Button>
+
+            <AstroSheet
+                title="Astro Sheet"
+                subTitle="With a subtitle"
+                id="sheet-astro"
+            >
+                <p>
+                    Click on the close icon, close button, overlay, or hit <code>esc</code> to close this sheet.
+                </p>
+
+                <Button id="sheet-close-btn-astro">
+                    Close Sheet
+                </Button>
+            </AstroSheet>
+        </ComponentWrapper>
+
+        <ComponentWrapper type="Svelte">
+            <Button theme="alert" id="sheet-btn-svelte">
+                Open Svelte Sheet
+            </Button>
+
+            <SvelteSheet
+                title="Svelte Sheet"
+                subTitle="With a subtitle"
+                id="sheet-svelte"
+            >
+                <p>
+                    Click on the close icon, close button, overlay, or hit <code>esc</code> to close this sheet.
+                </p>
+
+                <Button id="sheet-close-btn-svelte">
+                    Close Sheet
+                </Button>
+            </SvelteSheet>
+        </ComponentWrapper>
+
+        <ComponentWrapper type="React">
+            <Button theme="info" id="sheet-btn-react">
+                Open React Sheet
+            </Button>
+
+            <ReactSheet
+                title="React Sheet"
+                subTitle="With a subtitle"
+                id="sheet-react"
+            >
+                <p>
+                    Click on the close icon, close button, overlay, or hit <code>esc</code> to close this sheet.
+                </p>
+
+                <Button id="sheet-close-btn-react">
+                    Close Sheet
+                </Button>
+            </ReactSheet>
+        </ComponentWrapper>
+    </div>
+
+    {sections.map((section, index) => (
+        <h1>{section.title}</h1>
+        <div class="grid md-2 lg-3">
+            <ComponentWrapper title="Default sheet with content">
+                <Button theme="secondary" id={`sheet-btn-0${index}`}>
+                    Open
+                </Button>
+                <section.component id={`sheet-0${index}`}>
+                    Sheet with content only
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Sheet with title">
+                <Button theme="secondary" id={`sheet-btn-1${index}`}>
+                    Open
+                </Button>
+                <section.component
+                    id={`sheet-1${index}`}
+                    title="Information"
+                >
+                    Sheet with a title
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Sheet with title & sub title">
+                <Button theme="secondary" id={`sheet-btn-2${index}`}>
+                    Open
+                </Button>
+                <section.component
+                    id={`sheet-2${index}`}
+                    title="Information"
+                    subTitle="Before continuing, please read carefully"
+                >
+                    Sheet with title and sub title
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="No close on Esc">
+                <Button theme="secondary" id={`sheet-btn-3${index}`}>
+                    Open
+                </Button>
+                <section.component
+                    id={`sheet-3${index}`}
+                    title="Sheet"
+                    subTitle="No close on Esc"
+                    closeOnEsc={false}
+                >
+                    This sheet cannot be closed by clicking the <code>esc</code> button.
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="No close on overlay">
+                <Button theme="secondary" id={`sheet-btn-4${index}`}>
+                    Open
+                </Button>
+                <section.component
+                    id={`sheet-4${index}`}
+                    title="Sheet"
+                    subTitle="No close on overlay"
+                    closeOnOverlay={false}
+                >
+                    This sheet cannot be closed by clicking the overlay.
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="No close button">
+                <Button theme="secondary" id={`sheet-btn-5${index}`}>
+                    Open
+                </Button>
+                <section.component
+                    id={`sheet-5${index}`}
+                    title="Sheet"
+                    subTitle="No close button"
+                    showCloseIcon={false}
+                >
+                    This sheet doesn't have a close button. It can only be closed by clicking on the overlay or using the <code>esc</code> button.
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Left sheet">
+                <Button theme="secondary" id={`sheet-btn-6${index}`}>
+                    Open
+                </Button>
+                <section.component
+                    id={`sheet-6${index}`}
+                    title="Left sheet"
+                    subTitle="Before continuing, please read carefully"
+                    position="left"
+                >
+                    This sheet was created using the left position
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Top sheet">
+                <Button theme="secondary" id={`sheet-btn-7${index}`}>
+                    Open
+                </Button>
+                <section.component
+                    id={`sheet-7${index}`}
+                    title="Top sheet"
+                    subTitle="Before continuing, please read carefully"
+                    position="top"
+                >
+                    This sheet was created using the top position
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Bottom sheet">
+                <Button theme="secondary" id={`sheet-btn-8${index}`}>
+                    Open
+                </Button>
+                <section.component
+                    id={`sheet-8${index}`}
+                    title="Bottom sheet"
+                    subTitle="Before continuing, please read carefully"
+                    position="bottom"
+                >
+                    This sheet was created using the bottom position
+                </section.component>
+            </ComponentWrapper>
+        </div>
+    ))}
+</Layout>
+
+<script>
+    import { modal, closeModal } from '@utils/modal'
+
+    const on = (element: string, callback: () => any) => {
+        document
+            .querySelector(element)
+            ?.addEventListener('click', callback)
+    }
+
+    const selectors = [
+        'astro',
+        'svelte',
+        'react'
+    ]
+
+    const ids = Array(9).fill(10).map((x, index) => x * (index + 1))
+    const variants = [
+        '00',
+        '01',
+        '02',
+        ...ids,
+        ...ids.map(x => x + 1),
+        ...ids.map(x => x + 2)
+    ]
+
+    selectors.forEach(selector => {
+        on(`#sheet-btn-${selector}`, () => modal(`#sheet-${selector}`))
+        on(`#sheet-close-btn-${selector}`, () => closeModal(`#sheet-${selector}`))
+    });
+
+    variants.forEach(variant => {
+        on(`#sheet-btn-${variant}`, () => modal(`#sheet-${variant}`))
+    })
+</script>

From 8bc0ac3ac093586a9e2ff26337acde0c3a69b0fb Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Tue, 20 Aug 2024 10:52:38 +0200
Subject: [PATCH 08/10] =?UTF-8?q?=E2=9C=A8=20Add=20Popover=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Modal/modal.module.scss     |   2 +-
 src/components/Popover/Popover.astro       |  23 ++
 src/components/Popover/Popover.svelte      |  21 ++
 src/components/Popover/Popover.tsx         |  27 +++
 src/components/Popover/popover.module.scss |  51 ++++
 src/components/Popover/popover.ts          |   8 +
 src/pages/index.astro                      |   3 +
 src/pages/popover.astro                    | 262 +++++++++++++++++++++
 src/utils/popover.ts                       | 182 ++++++++++++++
 9 files changed, 578 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Popover/Popover.astro
 create mode 100644 src/components/Popover/Popover.svelte
 create mode 100644 src/components/Popover/Popover.tsx
 create mode 100644 src/components/Popover/popover.module.scss
 create mode 100644 src/components/Popover/popover.ts
 create mode 100644 src/pages/popover.astro
 create mode 100644 src/utils/popover.ts

diff --git a/src/components/Modal/modal.module.scss b/src/components/Modal/modal.module.scss
index d799e4c..18ce28c 100644
--- a/src/components/Modal/modal.module.scss
+++ b/src/components/Modal/modal.module.scss
@@ -3,7 +3,7 @@
 .modal {
     @include transition();
     @include position(fixed, 't50%', 'l50%');
-    @include spacing(0, p-default);
+    @include spacing(m0, p-default);
     @include layer(modal);
     @include visibility(block, 0);
     @include border(primary-50);
diff --git a/src/components/Popover/Popover.astro b/src/components/Popover/Popover.astro
new file mode 100644
index 0000000..3d0f663
--- /dev/null
+++ b/src/components/Popover/Popover.astro
@@ -0,0 +1,23 @@
+---
+import type { PopoverProps } from './popover'
+import styles from './popover.module.scss'
+
+interface Props extends PopoverProps {}
+
+const {
+    id,
+    className
+} = Astro.props
+
+const classes = [
+    styles.popover,
+    className
+]
+---
+
+<dialog
+    class:list={classes}
+    id={id}
+>
+    <slot />
+</dialog>
diff --git a/src/components/Popover/Popover.svelte b/src/components/Popover/Popover.svelte
new file mode 100644
index 0000000..51a2a22
--- /dev/null
+++ b/src/components/Popover/Popover.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+    import type { PopoverProps } from './popover'
+
+    import styles from './popover.module.scss'
+    import { classNames } from '../../utils/classNames'
+
+    export let id: PopoverProps['id'] = ''
+    export let className: PopoverProps['className'] = ''
+
+    const classes = classNames([
+        styles.popover,
+        className
+    ])
+</script>
+
+<dialog
+    class={classes}
+    id={id}
+>
+    <slot />
+</dialog>
diff --git a/src/components/Popover/Popover.tsx b/src/components/Popover/Popover.tsx
new file mode 100644
index 0000000..8974961
--- /dev/null
+++ b/src/components/Popover/Popover.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import type { ReactPopoverProps } from './popover'
+
+import styles from './popover.module.scss'
+import { classNames } from '../../utils/classNames'
+
+const Popover = ({
+    id,
+    className,
+    children
+}: ReactPopoverProps) => {
+    const classes = classNames([
+        styles.popover,
+        className
+    ])
+
+    return (
+        <dialog
+            className={classes}
+            id={id}
+        >
+            {children}
+        </dialog>
+    )
+}
+
+export default Popover
diff --git a/src/components/Popover/popover.module.scss b/src/components/Popover/popover.module.scss
new file mode 100644
index 0000000..5871255
--- /dev/null
+++ b/src/components/Popover/popover.module.scss
@@ -0,0 +1,51 @@
+@import '../../scss/config.scss';
+
+.popover {
+    @include spacing(m0, p-default);
+    @include layer(modal);
+    @include visibility(block, 0);
+    @include border(primary-50);
+    @include background(primary-70);
+    @include typography(primary);
+    @include border-radius(md);
+    @include size(w300px);
+
+    transform: translateY(-5px);
+    pointer-events: none;
+
+    &[data-show] {
+        @include transition();
+    }
+
+    &[data-show="true"] {
+        @include visibility(1);
+
+        transform: translateY(0);
+        pointer-events: all;
+    }
+
+    &[data-position="top"] {
+        transform: translateY(5px);
+
+        &[data-show="true"] {
+            transform: translate(0);
+        }
+    }
+
+    &[data-position="left"] {
+        transform: translateY(0) translateX(5px);
+
+        &[data-show="true"] {
+            transform: translate(0);
+        }
+    }
+
+
+    &[data-position="right"] {
+        transform: translateY(0) translateX(-5px);
+
+        &[data-show="true"] {
+            transform: translate(0);
+        }
+    }
+}
diff --git a/src/components/Popover/popover.ts b/src/components/Popover/popover.ts
new file mode 100644
index 0000000..ee57ac6
--- /dev/null
+++ b/src/components/Popover/popover.ts
@@ -0,0 +1,8 @@
+export type PopoverProps = {
+    id?: string
+    className?: string
+}
+
+export type ReactPopoverProps = {
+    children?: React.ReactNode
+} & PopoverProps
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 9c1fd1e..20386d7 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -149,6 +149,9 @@ const tabItems = [{
         <CardWrapper title="Modal" href="/modal">
             <Button theme="outline">Trigger Modal</Button>
         </CardWrapper>
+        <CardWrapper title="Popover" href="/popover">
+            <Button theme="outline">Open Popover</Button>
+        </CardWrapper>
         <CardWrapper title="Progress" href="/progress">
             <Progress value={33} />
         </CardWrapper>
diff --git a/src/pages/popover.astro b/src/pages/popover.astro
new file mode 100644
index 0000000..1c08e9e
--- /dev/null
+++ b/src/pages/popover.astro
@@ -0,0 +1,262 @@
+---
+import Layout from '@static/Layout.astro'
+import ComponentWrapper from '@static/ComponentWrapper.astro'
+
+import Button from '@components/Button/Button.astro'
+import AstroPopover from '@components/Popover/Popover.astro'
+import SveltePopover from '@components/Popover/Popover.svelte'
+import ReactPopover from '@components/Popover/Popover.tsx'
+
+import { getSections } from '@helpers'
+
+const sections = getSections({
+    title: 'popovers',
+    components: [AstroPopover, SveltePopover, ReactPopover]
+})
+---
+
+<Layout>
+    <h1>Popover</h1>
+    <div class="grid md-2 lg-3">
+        <ComponentWrapper type="Astro">
+            <Button theme="secondary" id="popover-btn-astro">
+                Open Astro Popover
+            </Button>
+
+            <AstroPopover id="popover-astro">
+                <span class="a">This is a popover created with an <strong>Astro</strong> component.</span>
+            </AstroPopover>
+        </ComponentWrapper>
+
+        <ComponentWrapper type="Svelte">
+            <Button theme="alert" id="popover-btn-svelte">Open Svelte Popover</Button>
+            <SveltePopover id="popover-svelte">
+                <span class="s">This is a popover created with a <strong>Svelte</strong> component.</span>
+            </SveltePopover>
+        </ComponentWrapper>
+
+        <ComponentWrapper type="React">
+            <Button theme="info" id="popover-btn-react">Open React Popover</Button>
+            <ReactPopover id="popover-react">
+                <span class="r">This is a popover created with a <strong>React</strong> component.</span>
+            </ReactPopover>
+        </ComponentWrapper>
+    </div>
+
+    {sections.map((section, index) => (
+        <h1>{section.title}</h1>
+        <Fragment>
+            {section.subTitle && <h2 set:html={section.subTitle} />}
+        </Fragment>
+        <div class="grid md-2 lg-3">
+            <ComponentWrapper title="Default">
+                <Button theme="secondary" id={`popover-btn-0${index}`}>
+                    Open Popover
+                </Button>
+                <section.component id={`popover-0${index}`}>
+                    <strong>This is a popover</strong>
+                    <div class="muted">With rich content</div>
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Popover with components">
+                <Button theme="secondary" id={`popover-btn-1${index}`}>
+                    Open Popover
+                </Button>
+                <section.component id={`popover-1${index}`}>
+                    popover with component
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Close popover with JS">
+                <Button theme="secondary" id={`popover-btn-2${index}`} data-no-close="true">
+                    Open Popover
+                </Button>
+                <section.component id={`popover-2${index}`}>
+                    <p>
+                        This popover cannot be closed by clicking outside.
+                        Using the button below will close the popover and remove the event listener, so the popover cannot be opened again.
+                    </p>
+                    <Button theme="secondary">
+                        Remove
+                    </Button>
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Popover on top-start">
+                <Button theme="secondary" id={`popover-btn-3${index}`} data-pos="top-start">
+                    Open Popover
+                </Button>
+                <section.component id={`popover-3${index}`}>
+                    <strong>This is a popover</strong>
+                    <div class="muted">With rich content</div>
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Popover on top">
+                <Button theme="secondary" id={`popover-btn-4${index}`} data-pos="top">
+                    Open Popover
+                </Button>
+                <section.component id={`popover-4${index}`}>
+                    <strong>This is a popover</strong>
+                    <div class="muted">With rich content</div>
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Popover on top-end">
+                <Button theme="secondary" id={`popover-btn-5${index}`} data-pos="top-end">
+                    Open Popover
+                </Button>
+                <section.component id={`popover-5${index}`}>
+                    <strong>This is a popover</strong>
+                    <div class="muted">With rich content</div>
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Popover on left-start">
+                <Button theme="secondary" id={`popover-btn-6${index}`} data-pos="left-start">
+                    Open Popover
+                </Button>
+                <section.component id={`popover-6${index}`}>
+                    <strong>This is a popover</strong>
+                    <div class="muted">With rich content</div>
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Popover on left">
+                <Button theme="secondary" id={`popover-btn-7${index}`} data-pos="left">
+                    Open Popover
+                </Button>
+                <section.component id={`popover-7${index}`}>
+                    <strong>This is a popover</strong>
+                    <div class="muted">With rich content</div>
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Popover on left-end">
+                <Button theme="secondary" id={`popover-btn-8${index}`} data-pos="left-end">
+                    Open Popover
+                </Button>
+                <section.component id={`popover-8${index}`}>
+                    <strong>This is a popover</strong>
+                    <div class="muted">With rich content</div>
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Popover on right-start">
+                <Button theme="secondary" id={`popover-btn-9${index}`} data-pos="right-start">
+                    Open Popover
+                </Button>
+                <section.component id={`popover-9${index}`}>
+                    <strong>This is a popover</strong>
+                    <div class="muted">With rich content</div>
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Popover on right">
+                <Button theme="secondary" id={`popover-btn-10${index}`} data-pos="right">
+                    Open Popover
+                </Button>
+                <section.component id={`popover-10${index}`}>
+                    <strong>This is a popover</strong>
+                    <div class="muted">With rich content</div>
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Popover on right-end">
+                <Button theme="secondary" id={`popover-btn-11${index}`} data-pos="right-end">
+                    Open Popover
+                </Button>
+                <section.component id={`popover-11${index}`}>
+                    <strong>This is a popover</strong>
+                    <div class="muted">With rich content</div>
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Popover on bottom-start">
+                <Button theme="secondary" id={`popover-btn-12${index}`} data-pos="bottom-start">
+                    Open Popover
+                </Button>
+                <section.component id={`popover-12${index}`}>
+                    <strong>This is a popover</strong>
+                    <div class="muted">With rich content</div>
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Popover on bottom">
+                <Button theme="secondary" id={`popover-btn-13${index}`} data-pos="bottom">
+                    Open Popover
+                </Button>
+                <section.component id={`popover-13${index}`}>
+                    <strong>This is a popover</strong>
+                    <div class="muted">With rich content</div>
+                </section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="Popover on bottom-end">
+                <Button theme="secondary" id={`popover-btn-14${index}`} data-pos="bottom-end">
+                    Open Popover
+                </Button>
+                <section.component id={`popover-14${index}`}>
+                    <strong>This is a popover</strong>
+                    <div class="muted">With rich content</div>
+                </section.component>
+            </ComponentWrapper>
+        </div>
+    ))}
+</Layout>
+
+<script>
+    import { popover, closePopover } from '@utils/popover'
+
+    const selectors = [
+        'astro',
+        'svelte',
+        'react'
+    ]
+
+    const ids = Array(14).fill(10).map((x, index) => x * (index + 1))
+    const variants = [
+        '00',
+        '01',
+        '02',
+        ...ids,
+        ...ids.map(x => x + 1),
+        ...ids.map(x => x + 2)
+    ]
+
+    selectors.forEach(selector => {
+        const event = popover({
+            trigger: `#popover-btn-${selector}`,
+            popover: `#popover-${selector}`,
+        })
+
+        document.querySelector('#popover-remove')?.addEventListener('click', () => {
+            closePopover(`#popover-${selector}`)
+            event?.remove()
+        })
+    })
+
+    variants.forEach(variant => {
+        const button = document.querySelector(`#popover-btn-${variant}`) as HTMLButtonElement
+        const removeButton = document.querySelector(`#popover-${variant} button`)
+
+        const popoverInstance = popover({
+            trigger: `#popover-btn-${variant}`,
+            popover: `#popover-${variant}`,
+            position: button?.dataset.pos as any || 'bottom',
+            closeOnBlur: button?.dataset.noClose ? false : true
+        })
+
+        if (removeButton) {
+            removeButton.addEventListener('click', () => {
+                closePopover(`#popover-${variant}`)
+                popoverInstance?.remove()
+
+                button.disabled = true
+                button.classList.remove(button.classList.item(1) as string)
+                button.innerText = 'Popover disabled'
+            })
+        }
+    })
+</script>
diff --git a/src/utils/popover.ts b/src/utils/popover.ts
new file mode 100644
index 0000000..d80cbea
--- /dev/null
+++ b/src/utils/popover.ts
@@ -0,0 +1,182 @@
+import { closeModal } from './modal'
+
+type PopoverPosition = 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'left'
+    | 'left-start'
+    | 'left-end'
+    | 'right'
+    | 'right-start'
+    | 'right-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+
+type Popover = {
+    trigger: string
+    popover: string
+    position?: PopoverPosition
+    offset?: number
+    closeOnBlur?: boolean
+}
+
+export const popover = ({
+    trigger,
+    popover,
+    position,
+    offset = 10,
+    closeOnBlur = true
+}: Popover) => {
+    const triggerDOM = document.querySelector(trigger) as HTMLElement
+    const popoverDOM = document.querySelector(popover) as HTMLElement
+
+    if (triggerDOM && popover) {
+        document.body.appendChild(popoverDOM)
+
+        if (position) {
+            popoverDOM.dataset.position = position.split('-')[0]
+        }
+
+        const handleOpen = () => {
+            const triggerPosition = triggerDOM.getBoundingClientRect()
+            const popoverPosition = popoverDOM.getBoundingClientRect()
+
+            const topSide = triggerPosition.top
+                + window.scrollY
+                - popoverPosition.height
+                - offset
+
+            const bottomSide = triggerPosition.top 
+                + window.scrollY
+                + triggerPosition.height
+                + offset
+
+            const leftSide = triggerPosition.left
+                - popoverPosition.width
+                - offset
+
+            const rightSide = triggerPosition.left
+                + triggerPosition.width
+                + offset
+
+            const hcenter = triggerPosition.left
+                - ((popoverPosition.width - triggerPosition.width) / 2)
+
+            const hEnd = triggerPosition.left
+                - (popoverPosition.width - triggerPosition.width)
+
+            const vcenter = triggerPosition.top
+                + window.scrollY
+                - ((popoverPosition.height - triggerPosition.height) / 2)
+
+            const vStart = triggerPosition.top + window.scrollY
+            const vEnd = triggerPosition.top
+                + window.scrollY
+                - (popoverPosition.height - triggerPosition.height)
+
+            const positions = {
+                'top-start': {
+                    top: topSide,
+                    left: triggerPosition.left
+                },
+                'top': {
+                    top: topSide,
+                    left: hcenter
+                },
+                'top-end': {
+                    top: topSide,
+                    left: hEnd
+                },
+                'left-start': {
+                    top: vStart,
+                    left: leftSide
+                },
+                'left': {
+                    top: vcenter,
+                    left: leftSide
+                },
+                'left-end': {
+                    top: vEnd,
+                    left: leftSide
+                },
+                'right-start': {
+                    top: vStart,
+                    left: rightSide
+                },
+                'right': {
+                    top: vcenter,
+                    left: rightSide
+                },
+                'right-end': {
+                    top: vEnd,
+                    left: rightSide
+                },
+                'bottom-start': {
+                    top: bottomSide,
+                    left: triggerPosition.left
+                },
+                'bottom': {
+                    top: bottomSide,
+                    left: hcenter
+                },
+                'bottom-end': {
+                    top: bottomSide,
+                    left: hEnd
+                }
+            }
+
+            const { top, left } = positions[position as keyof typeof positions] || positions.bottom
+    
+            popoverDOM.style.top = `${top}px`
+            popoverDOM.style.left = `${left}px`
+            
+            setTimeout(() => {
+                popoverDOM.dataset.show = popoverDOM.dataset.show === 'true'
+                    ? ''
+                    : 'true'
+            }, 0)
+
+            setTimeout(() => {
+                if (!popoverDOM.dataset.show) {
+                    popoverDOM.removeAttribute('data-show')
+                }
+            }, 300)
+        }
+
+        const handleClose = (event: MouseEvent) => {
+            const target = event.target as HTMLElement
+            const hidePopover = !popoverDOM.contains(target)
+                && !triggerDOM.contains(target)
+                && popoverDOM.dataset.show
+
+            if (hidePopover) {
+                popoverDOM.dataset.show = ''
+            }
+
+            setTimeout(() => {
+                if (!popoverDOM.dataset.show) {
+                    popoverDOM.removeAttribute('data-show')
+                }
+            }, 300)
+        }
+
+        triggerDOM.addEventListener('click', handleOpen)
+
+        if (closeOnBlur) {
+            document.addEventListener('click', handleClose)
+        }
+
+        return {
+            remove() {
+                triggerDOM.removeEventListener('click', handleOpen)
+
+                if (closeOnBlur) {
+                    document.removeEventListener('click', handleClose)
+                }
+            }
+        }
+    }
+}
+
+export const closePopover = closeModal

From 63ce5827b9a1c17b1d893f0b8216ea816a6e2e46 Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Thu, 22 Aug 2024 14:28:15 +0200
Subject: [PATCH 09/10] =?UTF-8?q?=E2=9C=A8=20Add=20debounce=20+=20remove?=
 =?UTF-8?q?=20popover=20on=20resize?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md             |  1 +
 src/utils/debounce.ts | 24 ++++++++++++++++++++++++
 src/utils/popover.ts  | 21 ++++++++++++++++++++-
 3 files changed, 45 insertions(+), 1 deletion(-)
 create mode 100644 src/utils/debounce.ts

diff --git a/README.md b/README.md
index f1deda1..5fce381 100644
--- a/README.md
+++ b/README.md
@@ -207,6 +207,7 @@ import { Accordion } from 'webcoreui/react'
 - [Input](https://github.com/Frontendland/webcoreui/tree/main/src/components/Input)
 - [Menu](https://github.com/Frontendland/webcoreui/tree/main/src/components/Menu)
 - [Modal](https://github.com/Frontendland/webcoreui/tree/main/src/components/Modal)
+- [Popover](https://github.com/Frontendland/webcoreui/tree/main/src/components/Popover)
 - [Progress](https://github.com/Frontendland/webcoreui/tree/main/src/components/Progress)
 - [Radio](https://github.com/Frontendland/webcoreui/tree/main/src/components/Radio)
 - [Rating](https://github.com/Frontendland/webcoreui/tree/main/src/components/Rating)
diff --git a/src/utils/debounce.ts b/src/utils/debounce.ts
new file mode 100644
index 0000000..7d2c544
--- /dev/null
+++ b/src/utils/debounce.ts
@@ -0,0 +1,24 @@
+export const debounce = (fn: any, waitFor = 100) => {
+    let timeout: ReturnType<typeof setTimeout> | null
+
+    const clear = () => {
+        if (timeout !== null) {
+            clearTimeout(timeout)
+            timeout = null
+        }
+    }
+
+    const debouncedFn = (...args: any[]) => {
+        clear()
+    
+        timeout = setTimeout(() => {
+            fn(...args)
+        }, waitFor)
+    }
+
+    debouncedFn.cancel = () => {
+        clear()
+    }
+
+    return debouncedFn
+}
diff --git a/src/utils/popover.ts b/src/utils/popover.ts
index d80cbea..b400e43 100644
--- a/src/utils/popover.ts
+++ b/src/utils/popover.ts
@@ -1,4 +1,5 @@
 import { closeModal } from './modal'
+import { debounce } from './debounce'
 
 type PopoverPosition = 'top'
     | 'top-start'
@@ -161,7 +162,24 @@ export const popover = ({
             }, 300)
         }
 
+        const removeOnResize = debounce(() => {
+            popoverDOM.dataset.show = ''
+
+            setTimeout(() => {
+                if (!popoverDOM.dataset.show) {
+                    popoverDOM.removeAttribute('data-show')
+                }
+            }, 300)
+        })
+
+        const observer = new ResizeObserver(() => {
+            if (popoverDOM.dataset.show) {
+                removeOnResize()
+            }
+        })
+
         triggerDOM.addEventListener('click', handleOpen)
+        observer.observe(document.body)
 
         if (closeOnBlur) {
             document.addEventListener('click', handleClose)
@@ -169,7 +187,8 @@ export const popover = ({
 
         return {
             remove() {
-                triggerDOM.removeEventListener('click', handleOpen)
+                triggerDOM.removeEventListener('click', handleOpen);
+                observer.disconnect()
 
                 if (closeOnBlur) {
                     document.removeEventListener('click', handleClose)

From 25fca4f74bb06bf1c4bbcdf744952b94334ecc74 Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Thu, 22 Aug 2024 16:20:04 +0200
Subject: [PATCH 10/10] =?UTF-8?q?=F0=9F=8F=B7=EF=B8=8F=20Add=20types=20for?=
 =?UTF-8?q?=20utilities?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json          |  1 +
 scripts/build.js      |  1 +
 scripts/buildTypes.js | 74 +++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 76 insertions(+)

diff --git a/package.json b/package.json
index dfa4113..30482c1 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
         "react.d.ts",
         "react.js",
         "index.js",
+        "index.d.ts",
         "README.md",
         "LICENSE"
     ],
diff --git a/scripts/build.js b/scripts/build.js
index e2e35e5..e58d144 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -56,5 +56,6 @@ fs.writeFileSync('dist/astro.d.ts', buildTypes('astro'))
 fs.writeFileSync('dist/svelte.d.ts', buildTypes('svelte'))
 fs.writeFileSync('dist/react.d.ts', buildTypes('react'))
 fs.writeFileSync('dist/icons.d.ts', buildTypes('icons'))
+fs.writeFileSync('dist/index.d.ts', buildTypes('utils'))
 
 console.log('✅ Package built')
diff --git a/scripts/buildTypes.js b/scripts/buildTypes.js
index 77b55a5..47ecfc3 100644
--- a/scripts/buildTypes.js
+++ b/scripts/buildTypes.js
@@ -93,6 +93,80 @@ const buildTypes = type => {
             }
         `)
     }
+
+    if (type === 'utils') {
+        return format(`
+            type PopoverPosition = 'top'
+                | 'top-start'
+                | 'top-end'
+                | 'left'
+                | 'left-start'
+                | 'left-end'
+                | 'right'
+                | 'right-start'
+                | 'right-end'
+                | 'bottom'
+                | 'bottom-start'
+                | 'bottom-end'
+
+            type Popover = {
+                trigger: string
+                popover: string
+                position?: PopoverPosition
+                offset?: number
+                closeOnBlur?: boolean
+            }
+
+            type Toast = {
+                element: string
+                timeout?: number
+                title?: string
+                content?: string
+                theme?: 'info' | 'success' | 'warning' | 'alert' | null
+                position?: 'bottom-left'
+                    | 'top-left'
+                    | 'top-right'
+                    | 'bottom-full'
+                    | 'top-full'
+            }
+
+            declare module 'webcoreui' {
+                export const classNames = (classes: any[]) => string
+                
+                export const setCookie = (name: string, value: string, days: number) => {}
+                export const getCookie = (name: string) => string | null
+                export const removeCookie = (name: string) => {}
+
+                export const debounce = (fn: any, waitFor: number) => any
+
+                export const dispatch = (event: string, detail: any) => {}
+                export const listen = (event: string, callback: (e: any) => any) => {
+                    remove()
+                }
+
+                export const clamp = (num: number, min: number, max: number) => number
+                export const lerp = (start: number, end: number, value: number) => number
+                export const invlerp = (start: number, end: number, value: number) => number
+                export const interpolate = (
+                    value: number,
+                    input: [start: number, end: number],
+                    output: [start: number, end: number],
+                ) => number
+
+                export const modal = (selector: string) => {}
+                export const closeModal = (selector: string) => {}
+
+                export const popover = (config: Popover) => {
+                    remove()
+                }
+                export const closePopover = (selector: string) => {}
+
+                export const setDefaultTimeout = (time: number) => number
+                export const toast = (config: Toast | string) => {}
+                export const hideToast = (element: string) => {}
+            }
+        `)
+    }
 }
 
 export default buildTypes