webcoreui 0.9.0 → 0.10.0

package/README.md

@@ -26,6 +26,12 @@
             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]
@@ -58,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
 
@@ -284,9 +290,17 @@ import { Accordion } from 'webcoreui/react'
 - [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/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/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'] = null
+    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
@@ -18,6 +18,7 @@ export type BadgeProps = {
 
 export type SvelteBadgeProps = {
     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>

package/components/Banner/Banner.tsx

@@ -45,6 +45,7 @@ const Banner = ({
                     className={styles.close}
                     dangerouslySetInnerHTML={{ __html: closeIcon }}
                     onClick={() => setVisible(false)}
+                    aria-label="close"
                 />
             )}
         </div>

package/components/Banner/banner.ts

@@ -1,3 +1,5 @@
+import type { Snippet } from 'svelte'
+
 export type BannerProps = {
     top?: number
     bottom?: boolean
@@ -7,6 +9,10 @@ export type BannerProps = {
     className?: string
 }
 
+export type SvelteBannerProps = {
+    children: Snippet
+} & BannerProps
+
 export type ReactBannerProps = {
     children: React.ReactNode
 } & BannerProps

package/components/BottomNavigation/BottomNavigation.svelte

@@ -5,11 +5,13 @@
 
     import styles from './bottomnavigation.module.scss'
 
-    export let items: BottomNavigationProps['items'] = []
-    export let separated: BottomNavigationProps['separated'] = false
-    export let floating: BottomNavigationProps['floating'] = false
-    export let maxWidth: BottomNavigationProps['maxWidth'] = ''
-    export let className: BottomNavigationProps['className'] = ''
+    const {
+        items,
+        separated,
+        floating,
+        maxWidth,
+        className
+    }: BottomNavigationProps = $props()
 
     const classes = classNames([
         styles.nav,

package/components/Breadcrumb/Breadcrumb.astro

@@ -43,7 +43,7 @@ const classes = [
         <Fragment>
             {index < items.length - 1 && (
                 <li>
-                    {separator || <Icon type="arrow-right" />}
+                    {separator || <Icon type="chevron-right" />}
                 </li>
             )}
         </Fragment>

package/components/Breadcrumb/Breadcrumb.svelte

@@ -5,13 +5,15 @@
 
     import { classNames } from '../../utils/classNames'
 
-    import ArrowRight from '../../icons/arrow-right.svg?raw'
+    import ChevronRight from '../../icons/chevron-right.svg?raw'
 
     import styles from './breadcrumb.module.scss'
 
-    export let items: BreadcrumbProps['items'] = []
-    export let separator: BreadcrumbProps['separator'] = ''
-    export let className: BreadcrumbProps['className'] = ''
+    const {
+        items,
+        separator,
+        className
+    }: BreadcrumbProps = $props()
 
     const classes = classNames([
         styles.breadcrumb,
@@ -36,9 +38,9 @@
                 {/if}
             </ConditionalWrapper>
         </li>
-        {#if index < items.length - 1 }
+        {#if index < items.length - 1}
             <li>
-                {@html separator || ArrowRight}
+                {@html separator || ChevronRight}
             </li>
         {/if}
     {/each}

package/components/Breadcrumb/Breadcrumb.tsx

@@ -5,7 +5,7 @@ import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
 
 import { classNames } from '../../utils/classNames'
 
-import ArrowRight from '../../icons/arrow-right.svg?raw'
+import ChevronRight from '../../icons/chevron-right.svg?raw'
 
 import styles from './breadcrumb.module.scss'
 
@@ -38,7 +38,7 @@ const Breadcrumb = ({
                         <li>
                             {separator
                                 ? separator
-                                : <span dangerouslySetInnerHTML={{ __html: ArrowRight }} />
+                                : <span dangerouslySetInnerHTML={{ __html: ChevronRight }} />
                             }
                         </li>
                     )}

package/components/Button/Button.svelte

@@ -5,10 +5,14 @@
 
     import styles from './button.module.scss'
 
-    export let theme: SvelteButtonProps['theme'] = null
-    export let href: SvelteButtonProps['href'] = ''
-    export let className: SvelteButtonProps['className'] = ''
-    export let onClick: SvelteButtonProps['onClick'] = () => {}
+    const {
+        theme,
+        href,
+        className,
+        onClick,
+        children,
+        ...rest
+    }: SvelteButtonProps = $props()
 
     const classes = classNames([
         styles.button,
@@ -19,11 +23,11 @@
 
 
 {#if href}
-    <a {...$$restProps} href={href} class={classes || null}>
-        <slot />
+    <a {...rest} href={href} class={classes}>
+        {@render children?.()}
     </a>
 {:else}
-    <button {...$$restProps} class={classes || null} on:click={onClick}>
-        <slot />
+    <button {...rest} class={classes} onclick={onClick}>
+        {@render children?.()}
     </button>
 {/if}

package/components/Button/Button.tsx

@@ -21,14 +21,14 @@ const Button = ({
 
     if (href) {
         return (
-            <a {...rest} href={href} className={classes || undefined}>
+            <a {...rest} href={href} className={classes}>
                 {children}
             </a>
         )
     }
 
     return (
-        <button {...rest} className={classes || undefined} onClick={onClick}>
+        <button {...rest} className={classes} onClick={onClick}>
             {children}
         </button>
     )