webcoreui 0.8.1 → 0.10.0

package/README.md

@@ -20,6 +20,18 @@
             alt="License"
         />
     </a>
+    <a href="https://github.com/Frontendland/webcoreui/actions">
+        <img
+            src="https://img.shields.io/github/actions/workflow/status/Frontendland/webcoreui/checks.yml"
+            alt="Build"
+        />
+    </a>
+    <a href="https://www.npmjs.com/package/webcoreui">
+        <img
+            src="https://img.shields.io/npm/d18m/webcoreui.svg?color=black"
+            alt="NPM"
+        />
+    </a>
 </p>
 
 > [!IMPORTANT]
@@ -52,18 +64,18 @@ Webcore can be used as a standalone project, or it can be integrated into your e
 
 Webcore components use Sass for styling. To use the component library, you must have the following packages installed:
 
-- [Sass](https://www.npmjs.com/package/sass) - `v1.80`
-- [TypeScript](https://www.npmjs.com/package/typescript) - `v5.4`
+- [Sass](https://www.npmjs.com/package/sass) - `v1.83`
+- [TypeScript](https://www.npmjs.com/package/typescript) - `v5.7`
 
 Depending on your project setup, you'll also need the following packages:
 
 - **For Astro projects**
-    - [Astro](https://www.npmjs.com/package/astro) - `v4.16`
+    - [Astro](https://www.npmjs.com/package/astro) - `v5.1`
 - **For Svelte projects**
-    - [Svelte](https://www.npmjs.com/package/svelte) - `v4.2`
+    - [Svelte](https://www.npmjs.com/package/svelte) - `v5.19`
 - **For React projects**
-    - [React](https://www.npmjs.com/package/react) - `v18.3`
-    - [React DOM](https://www.npmjs.com/package/react-dom) -`v18.3`
+    - [React](https://www.npmjs.com/package/react) - `v19.0`
+    - [React DOM](https://www.npmjs.com/package/react-dom) -`v19.0`
 
 ### Installation
 
@@ -113,6 +125,9 @@ html body {
     // Banner component
     --w-banner-top: 0;
 
+    // BottomNavigation component
+    --w-bottom-navigation-max-width: auto;
+
     // Checkbox component
     --w-checkbox-color: var(--w-color-primary);
 
@@ -222,6 +237,7 @@ import { Accordion } from 'webcoreui/react'
 - [Avatar](https://github.com/Frontendland/webcoreui/tree/main/src/components/Avatar)
 - [Badge](https://github.com/Frontendland/webcoreui/tree/main/src/components/Badge)
 - [Banner](https://github.com/Frontendland/webcoreui/tree/main/src/components/Banner)
+- [BottomNavigation](https://github.com/Frontendland/webcoreui/tree/main/src/components/BottomNavigation)
 - [Breadcrumb](https://github.com/Frontendland/webcoreui/tree/main/src/components/Breadcrumb)
 - [Button](https://github.com/Frontendland/webcoreui/tree/main/src/components/Button)
 - [Card](https://github.com/Frontendland/webcoreui/tree/main/src/components/Card)
@@ -229,8 +245,11 @@ import { Accordion } from 'webcoreui/react'
 - [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)
+- [Copy](https://github.com/Frontendland/webcoreui/tree/main/src/components/Copy)
 - [DataTable](https://github.com/Frontendland/webcoreui/tree/main/src/components/DataTable)
+- [Flex](https://github.com/Frontendland/webcoreui/tree/main/src/components/Flex)
 - [Footer](https://github.com/Frontendland/webcoreui/tree/main/src/components/Footer)
+- [Grid](https://github.com/Frontendland/webcoreui/tree/main/src/components/Grid)
 - [Group](https://github.com/Frontendland/webcoreui/tree/main/src/components/Group)
 - [Icon](https://github.com/Frontendland/webcoreui/tree/main/src/components/Icon)
 - [Input](https://github.com/Frontendland/webcoreui/tree/main/src/components/Input)
@@ -265,12 +284,23 @@ import { Accordion } from 'webcoreui/react'
 ## Blocks
 
 - [BlogCard](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/BlogCard)
+- [ComponentMap](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/ComponentMap)
+- [DeviceMockup](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/DeviceMockup)
 - [ErrorPage](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/ErrorPage)
 - [FAQ](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/FAQ)
+- [GridWithIcons](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/GridWithIcons)
 - [Hero](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/Hero)
+- [Icon](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/Icon)
 - [IconList](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/IconList)
+- [Layout](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/Layout)
+- [SEO](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/SEO)
 - [SettingCard](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/SettingCard)
 - [SignUp](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/SignUp)
 - [SocialProof](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/SocialProof)
 - [Tiles](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/Tiles)
 - [User](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/User)
+
+## Templates
+
+- [Portfolio](https://github.com/Frontendland/webcoreui/tree/main/src/templates/Portfolio)
+- [ProductPage](https://github.com/Frontendland/webcoreui/tree/main/src/templates/ProductPage)

package/astro.d.ts

@@ -4,6 +4,7 @@ import type { AspectRatioProps as WAspectRatioProps } from './components/AspectR
 import type { AvatarProps as WAvatarProps } from './components/Avatar/avatar'
 import type { BadgeProps as WBadgeProps } from './components/Badge/badge'
 import type { BannerProps as WBannerProps } from './components/Banner/banner'
+import type { BottomNavigationProps as WBottomNavigationProps } from './components/BottomNavigation/bottomnavigation'
 import type { BreadcrumbProps as WBreadcrumbProps } from './components/Breadcrumb/breadcrumb'
 import type { ButtonProps as WButtonProps } from './components/Button/button'
 import type { CardProps as WCardProps } from './components/Card/card'
@@ -11,8 +12,11 @@ import type { CarouselProps as WCarouselProps } from './components/Carousel/caro
 import type { CheckboxProps as WCheckboxProps } from './components/Checkbox/checkbox'
 import type { CollapsibleProps as WCollapsibleProps } from './components/Collapsible/collapsible'
 import type { ConditionalWrapperProps as WConditionalWrapperProps } from './components/ConditionalWrapper/conditionalwrapper'
+import type { CopyProps as WCopyProps } from './components/Copy/copy'
 import type { DataTableProps as WDataTableProps } from './components/DataTable/datatable'
+import type { FlexProps as WFlexProps } from './components/Flex/flex'
 import type { FooterProps as WFooterProps } from './components/Footer/footer'
+import type { GridProps as WGridProps } from './components/Grid/grid'
 import type { GroupProps as WGroupProps } from './components/Group/group'
 import type { IconProps as WIconProps } from './components/Icon/icon'
 import type { InputProps as WInputProps } from './components/Input/input'
@@ -44,6 +48,11 @@ import type { TimelineProps as WTimelineProps } from './components/Timeline/time
 import type { TimelineItemProps as WTimelineItemProps } from './components/TimelineItem/timelineitem'
 import type { ToastProps as WToastProps } from './components/Toast/toast'
 
+import type { DataTableEventType as WDataTableEventType, HeadingObject as WHeadingObject } from './components/DataTable/datatable.ts'
+import type { ListEventType as WListEventType } from './components/List/list.ts'
+import type { PaginationEventType as WPaginationEventType } from './components/Pagination/pagination.ts'
+import type { SelectEventType as WSelectEventType } from './components/Select/select.ts'
+
 declare module 'webcoreui/astro' {
     export function Accordion(_props: WAccordionProps): any
 	export function Alert(_props: WAlertProps): any
@@ -51,6 +60,7 @@ declare module 'webcoreui/astro' {
 	export function Avatar(_props: WAvatarProps): any
 	export function Badge(_props: WBadgeProps): any
 	export function Banner(_props: WBannerProps): any
+	export function BottomNavigation(_props: WBottomNavigationProps): any
 	export function Breadcrumb(_props: WBreadcrumbProps): any
 	export function Button(_props: WButtonProps): any
 	export function Card(_props: WCardProps): any
@@ -58,8 +68,11 @@ declare module 'webcoreui/astro' {
 	export function Checkbox(_props: WCheckboxProps): any
 	export function Collapsible(_props: WCollapsibleProps): any
 	export function ConditionalWrapper(_props: WConditionalWrapperProps): any
+	export function Copy(_props: WCopyProps): any
 	export function DataTable(_props: WDataTableProps): any
+	export function Flex(_props: WFlexProps): any
 	export function Footer(_props: WFooterProps): any
+	export function Grid(_props: WGridProps): any
 	export function Group(_props: WGroupProps): any
 	export function Icon(_props: WIconProps): any
 	export function Input(_props: WInputProps): any
@@ -97,6 +110,7 @@ declare module 'webcoreui/astro' {
 	export type AvatarProps = WAvatarProps
 	export type BadgeProps = WBadgeProps
 	export type BannerProps = WBannerProps
+	export type BottomNavigationProps = WBottomNavigationProps
 	export type BreadcrumbProps = WBreadcrumbProps
 	export type ButtonProps = WButtonProps
 	export type CardProps = WCardProps
@@ -104,8 +118,11 @@ declare module 'webcoreui/astro' {
 	export type CheckboxProps = WCheckboxProps
 	export type CollapsibleProps = WCollapsibleProps
 	export type ConditionalWrapperProps = WConditionalWrapperProps
+	export type CopyProps = WCopyProps
 	export type DataTableProps = WDataTableProps
+	export type FlexProps = WFlexProps
 	export type FooterProps = WFooterProps
+	export type GridProps = WGridProps
 	export type GroupProps = WGroupProps
 	export type IconProps = WIconProps
 	export type InputProps = WInputProps
@@ -136,4 +153,10 @@ declare module 'webcoreui/astro' {
 	export type TimelineProps = WTimelineProps
 	export type TimelineItemProps = WTimelineItemProps
 	export type ToastProps = WToastProps
+
+    export type DataTableEventType = WDataTableEventType
+	export type HeadingObject = WHeadingObject
+	export type ListEventType = WListEventType
+	export type PaginationEventType = WPaginationEventType
+	export type SelectEventType = WSelectEventType
 }

package/astro.js

@@ -4,6 +4,7 @@ import AspectRatioComponent from './components/AspectRatio/AspectRatio.astro'
 import AvatarComponent from './components/Avatar/Avatar.astro'
 import BadgeComponent from './components/Badge/Badge.astro'
 import BannerComponent from './components/Banner/Banner.astro'
+import BottomNavigationComponent from './components/BottomNavigation/BottomNavigation.astro'
 import BreadcrumbComponent from './components/Breadcrumb/Breadcrumb.astro'
 import ButtonComponent from './components/Button/Button.astro'
 import CardComponent from './components/Card/Card.astro'
@@ -11,8 +12,11 @@ import CarouselComponent from './components/Carousel/Carousel.astro'
 import CheckboxComponent from './components/Checkbox/Checkbox.astro'
 import CollapsibleComponent from './components/Collapsible/Collapsible.astro'
 import ConditionalWrapperComponent from './components/ConditionalWrapper/ConditionalWrapper.astro'
+import CopyComponent from './components/Copy/Copy.astro'
 import DataTableComponent from './components/DataTable/DataTable.astro'
+import FlexComponent from './components/Flex/Flex.astro'
 import FooterComponent from './components/Footer/Footer.astro'
+import GridComponent from './components/Grid/Grid.astro'
 import GroupComponent from './components/Group/Group.astro'
 import IconComponent from './components/Icon/Icon.astro'
 import InputComponent from './components/Input/Input.astro'
@@ -50,6 +54,7 @@ export const AspectRatio = AspectRatioComponent
 export const Avatar = AvatarComponent
 export const Badge = BadgeComponent
 export const Banner = BannerComponent
+export const BottomNavigation = BottomNavigationComponent
 export const Breadcrumb = BreadcrumbComponent
 export const Button = ButtonComponent
 export const Card = CardComponent
@@ -57,8 +62,11 @@ export const Carousel = CarouselComponent
 export const Checkbox = CheckboxComponent
 export const Collapsible = CollapsibleComponent
 export const ConditionalWrapper = ConditionalWrapperComponent
+export const Copy = CopyComponent
 export const DataTable = DataTableComponent
+export const Flex = FlexComponent
 export const Footer = FooterComponent
+export const Grid = GridComponent
 export const Group = GroupComponent
 export const Icon = IconComponent
 export const Input = InputComponent

package/components/Accordion/Accordion.astro

@@ -1,7 +1,7 @@
 ---
 import type { AccordionProps } from './accordion'
 
-import ArrowDown from '../../icons/arrow-down.svg?raw'
+import ChevronDown from '../../icons/chevron-down.svg?raw'
 import Plus from '../../icons/plus.svg?raw'
 
 import styles from './accordion.module.scss'
@@ -32,7 +32,7 @@ const classes = [
             >
                 {item.title}
                 {icon !== 'none' && (
-                    <Fragment set:html={icon === 'plus' ? Plus : ArrowDown} />
+                    <Fragment set:html={icon === 'plus' ? Plus : ChevronDown} />
                 )}
             </button>
             <div class={styles.wrapper}>
@@ -45,13 +45,18 @@ const classes = [
 <script>
     import { on } from '../../utils/DOMUtils'
 
-    on('[data-id="w-accordion"]', 'click', (event: Event) => {
-        const target = event.target as HTMLDivElement
+    const addEventListeners = () => {
+        on('[data-id="w-accordion"]', 'click', (event: Event) => {
+            const target = event.target as HTMLDivElement
 
-        if (target.dataset.toggle) {
-            target.dataset.open = target.dataset.open === 'true'
-                ? 'false'
-                : 'true'
-        }
-    }, true)
+            if (target.dataset.toggle) {
+                target.dataset.open = target.dataset.open === 'true'
+                    ? 'false'
+                    : 'true'
+            }
+        }, true)
+    }
+
+    on(document, 'astro:after-swap', addEventListeners)
+    addEventListeners()
 </script>

package/components/Accordion/Accordion.svelte

@@ -3,22 +3,24 @@
 
     import { classNames } from '../../utils/classNames'
 
-    import ArrowDown from '../../icons/arrow-down.svg?raw'
+    import ChevronDown from '../../icons/chevron-down.svg?raw'
     import Plus from '../../icons/plus.svg?raw'
 
     import styles from './accordion.module.scss'
 
-    export let items: AccordionProps['items'] = []
-    export let icon: AccordionProps['icon'] = null
-    export let reverse: AccordionProps['reverse'] = false
-    export let className: AccordionProps['className'] = ''
+    const {
+        items,
+        icon,
+        reverse,
+        className
+    }: AccordionProps = $props()
 
-    let state = Array(items.length).fill(false)
+    let toggleState = $state(Array(items.length).fill(false))
 
     const toggle = (index: number) => {
-        state = state.map((_, i) => index === i
-            ? !state[i]
-            : state[i]
+        toggleState = toggleState.map((_, i) => index === i
+            ? !toggleState[i]
+            : toggleState[i]
         )
     }
 
@@ -38,12 +40,12 @@
                     styles.title,
                     item.reverse && styles.reverse
                 ])}
-                data-open={state[index]}
-                on:click={() => toggle(index)}
+                data-open={toggleState[index]}
+                onclick={() => toggle(index)}
             >
                 {item.title}
                 {#if icon !== 'none'}
-                    {@html icon === 'plus' ? Plus : ArrowDown}
+                    {@html icon === 'plus' ? Plus : ChevronDown}
                 {/if}
             </button>
             <div class={styles.wrapper}>

package/components/Accordion/Accordion.tsx

@@ -3,7 +3,7 @@ import type { AccordionProps } from './accordion'
 
 import { classNames } from '../../utils/classNames'
 
-import ArrowDown from '../../icons/arrow-down.svg?raw'
+import ChevronDown from '../../icons/chevron-down.svg?raw'
 import Plus from '../../icons/plus.svg?raw'
 
 import styles from './accordion.module.scss'
@@ -43,7 +43,7 @@ const Accordion = ({
                         ])}
                         dangerouslySetInnerHTML={{ __html: icon === 'none'
                             ? item.title
-                            : `${item.title} ${icon === 'plus' ? Plus : ArrowDown}`
+                            : `${item.title} ${icon === 'plus' ? Plus : ChevronDown}`
                         }}
                     />
                     <div className={styles.wrapper}>

package/components/Accordion/accordion.module.scss

@@ -44,6 +44,7 @@
                 @include size(15px);
                 @include typography(primary-20);
                 pointer-events: none;
+                min-width: 15px;
             }
 
             &[data-open="true"] {

package/components/Alert/Alert.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type { AlertProps } from './alert'
+    import type { SvelteAlertProps } from './alert'
 
     import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
 
@@ -10,13 +10,18 @@
 
     import styles from './alert.module.scss'
 
-    export let element: AlertProps['element'] = 'section'
-    export let title: AlertProps['title'] = null
-    export let titleTag: AlertProps['title'] = 'strong'
-    export let titleProps: AlertProps['titleProps'] = null
-    export let bodyProps: AlertProps['bodyProps'] = null
-    export let className: AlertProps['className'] = null
-    export let theme: AlertProps['theme'] = null
+    const {
+        element = 'section',
+        title,
+        titleTag = 'strong',
+        titleProps,
+        bodyProps,
+        className,
+        theme,
+        icon,
+        children,
+        ...rest
+    }: SvelteAlertProps = $props()
 
     const iconMap = {
         info,
@@ -25,7 +30,7 @@
         alert
     }
 
-    const hasCustomIcon = $$slots.icon
+    const hasCustomIcon = icon
 
     const classes = [
         styles['w-alert'],
@@ -35,8 +40,8 @@
     ].filter(Boolean).join(' ')
 </script>
 
-<svelte:element this={element} class={classes} {...$$restProps}>
-    <slot name="icon" />
+<svelte:element this={element} class={classes} {...rest}>
+    {@render icon?.()}
 
     {#if !hasCustomIcon && theme}
         {@html iconMap[theme]}
@@ -53,7 +58,7 @@
             </svelte:element>
         {/if}
         <div class={styles.body} {...bodyProps}>
-            <slot />
+            {@render children?.()}
         </div>
     </ConditionalWrapper>
 </svelte:element>

package/components/Alert/Alert.tsx

@@ -40,7 +40,7 @@ const Alert = ({
         <Element className={classes} {...rest}>
             {icon && icon}
             {!icon && theme && <div
-                dangerouslySetInnerHTML={{ __html: iconMap[theme] }}
+                dangerouslySetInnerHTML={{ __html: iconMap[theme as keyof typeof iconMap] }}
                 style={{ height: '20px' }}
             />}
 

package/components/Alert/alert.ts

@@ -1,17 +1,24 @@
+import type { Snippet } from 'svelte'
+
 export type AlertProps = {
     element?: string
-    title?: string | null
+    title?: string
     titleTag?: string
     titleProps?: any
     bodyProps?: any
-    className?: string | null
+    className?: string
     theme?: 'info'
         | 'success'
         | 'warning'
         | 'alert'
-        | null
+    [key: string]: any
 }
 
+export type SvelteAlertProps = {
+    icon?: Snippet
+    children: Snippet
+} & AlertProps
+
 export type ReactAlertProps = {
     Element?: keyof JSX.IntrinsicElements
     TitleTag?: keyof JSX.IntrinsicElements

package/components/AspectRatio/AspectRatio.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
-    import type { AspectRatioProps } from './aspectratio'
+    import type { SvelteAspectRatioProps } from './aspectratio'
 
     import { classNames } from '../../utils/classNames'
 
     import styles from './aspect-ratio.module.scss'
 
-    export let ratio: AspectRatioProps['ratio'] = ''
-    export let className: AspectRatioProps['className'] = ''
+    const {
+        ratio,
+        className,
+        children
+    }: SvelteAspectRatioProps = $props()
 
     const classes = classNames([
         styles.ratio,
@@ -15,5 +18,5 @@
 </script>
 
 <div class={classes} style={`aspect-ratio: ${ratio.replace(':', '/')};`}>
-    <slot />
+    {@render children?.()}
 </div>

package/components/AspectRatio/aspectratio.ts

@@ -1,8 +1,14 @@
+import type { Snippet } from 'svelte'
+
 export type AspectRatioProps = {
     ratio: string
     className?: string
 }
 
+export type SvelteAspectRatioProps = {
+    children: Snippet
+} & AspectRatioProps
+
 export type ReactAspectRatioProps = {
     children: React.ReactNode
 } & AspectRatioProps

package/components/Avatar/Avatar.svelte

@@ -5,15 +5,17 @@
 
     import styles from './avatar.module.scss'
 
-    export let img: AvatarProps['img'] = ''
-    export let alt: AvatarProps['alt'] = 'Avatar'
-    export let size: AvatarProps['size'] = 40
-    export let lazy: AvatarProps['lazy'] = true
-    export let borderColor: AvatarProps['borderColor'] = ''
-    export let borderless: AvatarProps['borderless'] = false
-    export let reverse: AvatarProps['reverse'] = false
-    export let className: AvatarProps['className'] = ''
-    export let groupClassName: AvatarProps['groupClassName'] = ''
+    const {
+        img,
+        alt = 'Avatar',
+        size = 40,
+        lazy = true,
+        borderColor,
+        borderless,
+        reverse,
+        className,
+        groupClassName
+    }: AvatarProps = $props()
 
     const classes = classNames([
         styles.avatar,

package/components/Badge/Badge.svelte

@@ -5,12 +5,16 @@
 
     import styles from './badge.module.scss'
 
-    export let theme: SvelteBadgeProps['theme'] = null
-    export let hover: SvelteBadgeProps['hover'] = false
-    export let small: SvelteBadgeProps['small'] = false
-    export let rounded: SvelteBadgeProps['rounded'] = false
-    export let className: SvelteBadgeProps['className'] = ''
-    export let onClick: SvelteBadgeProps['onClick'] = () => {}
+    const {
+        theme,
+        hover,
+        small,
+        rounded,
+        className,
+        onClick,
+        children,
+        ...rest
+    }: SvelteBadgeProps = $props()
 
     const classes = classNames([
         styles.badge,
@@ -23,12 +27,12 @@
 </script>
 
 {#if onClick}
-    <button class={classes} on:click={onClick} {...$$restProps}>
-        <slot />
+    <button class={classes} onclick={onClick} {...rest}>
+        {@render children?.()}
     </button>
 {:else}
-    <span class={classes} {...$$restProps}>
-        <slot />
+    <span class={classes} {...rest}>
+        {@render children?.()}
     </span>
 {/if}
 

package/components/Badge/badge.ts

@@ -1,3 +1,4 @@
+import type { Snippet } from 'svelte'
 import type { MouseEventHandler } from 'svelte/elements'
 
 export type BadgeProps = {
@@ -8,7 +9,6 @@ export type BadgeProps = {
         | 'success'
         | 'warning'
         | 'alert'
-        | null
     hover?: boolean
     small?: boolean
     rounded?: boolean
@@ -17,7 +17,8 @@ export type BadgeProps = {
 }
 
 export type SvelteBadgeProps = {
-    onClick?: MouseEventHandler<HTMLButtonElement>
+    onClick?: MouseEventHandler<HTMLButtonElement> | null
+    children?: Snippet
 } & BadgeProps
 
 export type ReactBadgeProps = {

package/components/Banner/Banner.astro

@@ -39,6 +39,7 @@ const style = top
             theme="flat"
             className={styles.close}
             data-id="w-banner-close"
+            aria-label="close"
         >
             <Fragment set:html={closeIcon} />
         </Button>
@@ -48,9 +49,14 @@ const style = top
 <script>
     import { on } from '../../utils/DOMUtils'
 
-    on('[data-id="w-banner-close"]', 'click', (event: Event) => {
-        const target = event.currentTarget as HTMLDivElement
+    const addEventListeners = () => {
+        on('[data-id="w-banner-close"]', 'click', (event: Event) => {
+            const target = event.currentTarget as HTMLDivElement
 
-        target.parentElement?.remove()
-    }, true)
+            target.parentElement?.remove()
+        }, true)
+    }
+
+    on(document, 'astro:after-swap', addEventListeners)
+    addEventListeners()
 </script>

package/components/Banner/Banner.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type { BannerProps } from './banner'
+    import type { SvelteBannerProps } from './banner'
 
     import Button from '../Button/Button.svelte'
 
@@ -9,14 +9,15 @@
 
     import styles from './banner.module.scss'
 
-    export let top: BannerProps['top'] = 0
-    export let bottom: BannerProps['bottom'] = false
-    export let closeable: BannerProps['closeable'] = false
-    export let padded: BannerProps['padded'] = false
-    export let sticky: BannerProps['sticky'] = true
-    export let className: BannerProps['className'] = ''
-
-    let visible = true
+    const {
+        top,
+        bottom,
+        closeable,
+        padded,
+        sticky = true,
+        className,
+        children
+    }: SvelteBannerProps = $props()
 
     const classes = classNames([
         styles.banner,
@@ -29,16 +30,19 @@
     const style = top
         ? `--w-banner-top: ${top}px;`
         : null
+
+    let visible = $state(true)
 </script>
 
 {#if visible}
     <div class={classes} style={style}>
-        <slot />
+        {@render children?.()}
         {#if closeable}
             <Button
                 theme="flat"
                 className={styles.close}
                 onClick={() => visible = false}
+                aria-label="close"
             >
                 {@html closeIcon}
             </Button>