webcoreui 1.3.0 → 1.5.0-0

package/README.md

@@ -52,6 +52,7 @@
 
 - Full documentation available on [webcoreui.dev](https://webcoreui.dev).
 - For installation steps, visit our [setup docs](https://webcoreui.dev/docs/setup).
+- To build and test components visually, visit our [builder](https://webcoreui.dev/build).
 
 ## Getting Started
 
@@ -64,15 +65,15 @@ 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.94`
+- [Sass](https://www.npmjs.com/package/sass) - `v1.97`
 - [TypeScript](https://www.npmjs.com/package/typescript) - `v5.9`
 
 Depending on your project setup, you'll also need the following packages:
 
 - **For Astro projects**
-    - [Astro](https://www.npmjs.com/package/astro) - `v5.16`
+    - [Astro](https://www.npmjs.com/package/astro) - `v5.17`
 - **For Svelte projects**
-    - [Svelte](https://www.npmjs.com/package/svelte) - `v5.45`
+    - [Svelte](https://www.npmjs.com/package/svelte) - `v5.53`
 - **For React projects**
     - [React](https://www.npmjs.com/package/react) - `v19.2`
     - [React DOM](https://www.npmjs.com/package/react-dom) -`v19.2`
@@ -122,6 +123,9 @@ export default defineConfig({
 })
 ```
 
+> [!TIP]
+> We also recommend adding [`astro-purgecss`](https://www.npmjs.com/package/astro-purgecss) to improve your CSS bundle size.
+
 Create an empty [`webcore.config.scss`](https://webcoreui.dev/docs/css-configuration#webcoreconfigscss) file at the root of your project to setup CSS configurations. Setup default styles and fonts by calling the following in your global SCSS file:
 
 ```scss
@@ -145,7 +149,9 @@ The `setup` mixin can also accept the following options:
 | `includeUtilities` | `true` | Adds utility classes for CSS. Read more about the available utility classes [here](https://webcoreui.dev/docs/layout). |
 | `includeTooltip` | `true` | Adds styles for using tooltips.
 | `includeScrollbarStyles` | `true` | Adds styles for scrollbars.
-| `includeBreakpoints` | `true` | Exposes breakpoint variables in CSS for JS. Used by components for responsiveness.
+| `includeBreakpoints` | `true` | Exposes breakpoint variables in CSS for JS. Used by components for responsiveness. |
+| `theme` | `dark` | Sets the default theme. Read more about available themes [here](https://webcoreui.dev/docs/themes). |
+| `themes` | `()` | Pass a map to enable multiple themes. Values can be arbitrary CSS selectors that actives the theme. |
 
 Default component styles can be changed by overriding the following CSS variables:
 
@@ -252,6 +258,15 @@ html body {
 }
 ```
 
+Depending on your installed blocks, you can also use the following variables to override default block styles:
+
+```scss
+html body {
+    // Error page
+    --w-error-page-type-color: var(--w-color-info);
+}
+```
+
 ### Using Components
 
 Start using Webcore components in your code by importing them:
@@ -297,6 +312,8 @@ import { Accordion } from 'webcoreui/react'
 - [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)
+- [Image](https://github.com/Frontendland/webcoreui/tree/main/src/components/Image)
+- [ImageLoader](https://github.com/Frontendland/webcoreui/tree/main/src/components/ImageLoader)
 - [Input](https://github.com/Frontendland/webcoreui/tree/main/src/components/Input)
 - [Kbd](https://github.com/Frontendland/webcoreui/tree/main/src/components/Kbd)
 - [List](https://github.com/Frontendland/webcoreui/tree/main/src/components/List)

package/astro.d.ts

@@ -21,6 +21,8 @@ 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 { ImageProps as WImageProps } from './components/Image/image'
+import type { ImageLoaderProps as WImageLoaderProps } from './components/ImageLoader/imageloader'
 import type { InputProps as WInputProps } from './components/Input/input'
 import type { KbdProps as WKbdProps } from './components/Kbd/kbd'
 import type { ListProps as WListProps } from './components/List/list'
@@ -83,6 +85,8 @@ declare module 'webcoreui/astro' {
 	export function Grid(_props: WGridProps): any
 	export function Group(_props: WGroupProps): any
 	export function Icon(_props: WIconProps): any
+	export function Image(_props: WImageProps): any
+	export function ImageLoader(_props: WImageLoaderProps): any
 	export function Input(_props: WInputProps): any
 	export function Kbd(_props: WKbdProps): any
 	export function List(_props: WListProps): any
@@ -138,6 +142,8 @@ declare module 'webcoreui/astro' {
 	export type GridProps = WGridProps
 	export type GroupProps = WGroupProps
 	export type IconProps = WIconProps
+	export type ImageProps = WImageProps
+	export type ImageLoaderProps = WImageLoaderProps
 	export type InputProps = WInputProps
 	export type KbdProps = WKbdProps
 	export type ListProps = WListProps

package/astro.js

@@ -21,6 +21,8 @@ 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 ImageComponent from './components/Image/Image.astro'
+import ImageLoaderComponent from './components/ImageLoader/ImageLoader.astro'
 import InputComponent from './components/Input/Input.astro'
 import KbdComponent from './components/Kbd/Kbd.astro'
 import ListComponent from './components/List/List.astro'
@@ -76,6 +78,8 @@ export const Footer = FooterComponent
 export const Grid = GridComponent
 export const Group = GroupComponent
 export const Icon = IconComponent
+export const Image = ImageComponent
+export const ImageLoader = ImageLoaderComponent
 export const Input = InputComponent
 export const Kbd = KbdComponent
 export const List = ListComponent

package/components/Accordion/Accordion.astro

@@ -29,6 +29,7 @@ const classes = [
             <button
                 class:list={[styles.title, item.reverse && styles.reverse]}
                 data-toggle="true"
+                data-open={item.expanded}
             >
                 {item.title}
                 {icon !== 'none' && (

package/components/Accordion/Accordion.svelte

@@ -15,7 +15,7 @@
         className
     }: AccordionProps = $props()
 
-    let toggleState = $state(Array(items.length).fill(false))
+    let toggleState = $derived(items.map(item => item.expanded ?? false))
 
     const toggle = (index: number) => {
         toggleState = toggleState.map((_, i) => index === i
@@ -24,12 +24,12 @@
         )
     }
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.accordion,
         reverse && styles.reverse,
         icon === 'plus' && styles.plus,
         className
-    ])
+    ]))
 </script>
 
 <ul class={classes}>

package/components/Accordion/Accordion.tsx

@@ -14,7 +14,7 @@ const Accordion = ({
     reverse,
     className
 }: AccordionProps) => {
-    const [state, setState] = useState(Array(items.length).fill(false))
+    const [state, setState] = useState(items.map(item => item.expanded ?? false))
 
     const toggle = (index: number) => {
         setState(state.map((_, i) => index === i

package/components/Accordion/accordion.ts

@@ -3,6 +3,7 @@ export type AccordionProps = {
         title: string
         content: string
         reverse?: boolean
+        expanded?: boolean
     }[]
     icon?: 'plus' | 'none' | undefined | null
     reverse?: boolean

package/components/Alert/Alert.svelte

@@ -30,14 +30,14 @@
         alert
     }
 
-    const hasCustomIcon = icon
+    const hasCustomIcon = $derived(icon)
 
-    const classes = [
+    const classes = $derived([
         styles['w-alert'],
         (!hasCustomIcon && !theme) && styles.col,
         theme && styles[theme],
         className
-    ].filter(Boolean).join(' ')
+    ].filter(Boolean).join(' '))
 </script>
 
 <svelte:element this={element} class={classes} {...rest}>

package/components/AspectRatio/AspectRatio.svelte

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

package/components/Avatar/Avatar.astro

@@ -1,6 +1,8 @@
 ---
 import type { AvatarProps } from './avatar'
 
+import Image from '../Image/Image.astro'
+
 import styles from './avatar.module.scss'
 
 interface Props extends AvatarProps {}
@@ -35,7 +37,7 @@ const groupClasses = [
         style={borderColor ? `--w-avatar-border: ${borderColor};` : null}
     >
         {img.map((img, index) => (
-            <img
+            <Image
                 src={img}
                 alt={Array.isArray(alt) ? alt[index] : alt}
                 width={Array.isArray(size) ? size[index] : size}
@@ -47,7 +49,7 @@ const groupClasses = [
         ))}
     </div>
 ) : (
-    <img
+    <Image
         src={img}
         alt={Array.isArray(alt) ? alt[0] : alt}
         width={Array.isArray(size) ? size[0] : size}

package/components/Avatar/Avatar.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
     import type { AvatarProps } from './avatar'
 
+    import Image from '../Image/Image.svelte'
+
     import { classNames } from '../../utils/classNames'
 
     import styles from './avatar.module.scss'
@@ -17,17 +19,17 @@
         groupClassName
     }: AvatarProps = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.avatar,
         borderless && styles.borderless,
         className
-    ])
+    ]))
 
-    const groupStyles = classNames([
+    const groupStyles = $derived(classNames([
         styles.group,
         reverse && styles.reverse,
         groupClassName
-    ])
+    ]))
 </script>
 
 {#if Array.isArray(img)}
@@ -35,24 +37,24 @@
         style={borderColor ? `--w-avatar-border: ${borderColor};` : null}
     >
         {#each img as img, index}
-            <img
+            <Image
                 src={img}
                 alt={Array.isArray(alt) ? alt[index] : alt}
                 width={Array.isArray(size) ? size[index] : size}
                 height={Array.isArray(size) ? size[index] : size}
                 loading={lazy ? 'lazy' : null}
-                class={classes}
+                className={classes}
                 style={Array.isArray(size) ? `--w-avatar-index: ${size[index]}` : null}
             />
         {/each}
     </div>
 {:else}
-    <img
+    <Image
         src={img}
         alt={Array.isArray(alt) ? alt[0] : alt}
         width={Array.isArray(size) ? size[0] : size}
         height={Array.isArray(size) ? size[0] : size}
-        class={classes}
+        className={classes}
         loading={lazy ? 'lazy' : null}
         style={borderColor ? `--w-avatar-border: ${borderColor};` : null}
     />

package/components/Avatar/Avatar.tsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import type { AvatarProps } from './avatar'
 
+import Image from '../Image/Image.tsx'
+
 import { classNames } from '../../utils/classNames'
 
 import styles from './avatar.module.scss'
@@ -37,7 +39,7 @@ const Avatar = ({
             style={borderColorStyle}
         >
             {img.map((img, index) => (
-                <img
+                <Image
                     key={index}
                     src={img}
                     alt={Array.isArray(alt) ? alt[index] : alt}
@@ -53,7 +55,7 @@ const Avatar = ({
             ))}
         </div>
     ) : (
-        <img
+        <Image
             src={img}
             alt={Array.isArray(alt) ? alt[0] : alt}
             width={Array.isArray(size) ? size[0] : size}

package/components/Avatar/avatar.module.scss

@@ -1,16 +1,14 @@
 @use '../../scss/config.scss' as *;
 
-body {
-    --w-avatar-border: var(--w-color-primary-70);
-}
-
 .avatar {
+    --border: var(--w-avatar-border, var(--w-color-primary-70));
+
     @include border-radius(max);
 
     object-fit: cover;
 
     &:not(.borderless) {
-        border: 3px solid var(--w-avatar-border);
+        border: 3px solid var(--border);
     }
 }
 

package/components/Badge/Badge.svelte

@@ -17,7 +17,7 @@
         ...rest
     }: SvelteBadgeProps = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.badge,
         theme && styles[theme],
         (onClick || hover) && styles.hover,
@@ -25,7 +25,7 @@
         rounded && styles.round,
         transparent && styles.transparent,
         className
-    ])
+    ]))
 </script>
 
 {#if onClick}

package/components/Badge/badge.module.scss

@@ -21,8 +21,7 @@
         }
 
         &.outline:hover {
-            @include typography(primary);
-            @include background(transparent);
+            @include background(primary-60);
             box-shadow: inset 0px 0px 0px 1px var(--w-color-primary);
         }
 
@@ -54,14 +53,14 @@
     }
 
     &.outline {
-        @include typography(primary-20);
-        @include background(primary-70);
-        box-shadow: inset 0px 0px 0px 1px var(--w-color-primary-20);
+        @include typography(primary);
+        @include background(transparent);
+        box-shadow: inset 0px 0px 0px 1px var(--w-color-primary-40);
     }
 
     &.flat {
         @include typography(primary);
-        @include background(primary-70);
+        @include background(transparent);
     }
 
     &.info {

package/components/Banner/Banner.svelte

@@ -19,17 +19,18 @@
         children
     }: SvelteBannerProps = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.banner,
         bottom && styles.bottom,
         padded && styles.padded,
         !sticky && styles.relative,
         className
-    ])
+    ]))
 
-    const style = top
+    const style = $derived(top
         ? `--w-banner-top: ${top}px;`
         : null
+    )
 
     let visible = $state(true)
 </script>

package/components/Banner/banner.module.scss

@@ -1,24 +1,22 @@
 @use '../../scss/config.scss' as *;
 
-body {
-    --w-banner-top: 0;
-}
-
 .banner {
+    --top: var(--w-banner-top, 0);
+
     @include background(primary-60);
     @include spacing(p-default);
     @include position(sticky);
     @include layer(top);
     @include typography(center);
 
-    top: var(--w-banner-top);
+    top: var(--top);
 
     &.padded {
         @include border-radius();
         @include position(l20px);
 
         width: calc(100% - 40px);
-        top: calc(var(--w-banner-top) + 20px);
+        top: calc(var(--top) + 20px);
 
         &.bottom {
             @include position(l20px, b20px);

package/components/BottomNavigation/BottomNavigation.svelte

@@ -13,17 +13,18 @@
         className
     }: BottomNavigationProps = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.nav,
         separated && styles.separated,
         maxWidth && styles.bordered,
         floating && styles.floating,
         className
-    ])
+    ]))
 
-    const styleVariable = maxWidth
+    const styleVariable = $derived(maxWidth
         ? `--w-bottom-navigation-max-width: ${maxWidth};`
         : null
+    )
 </script>
 
 <nav class={classes} style={styleVariable}>

package/components/BottomNavigation/bottomnavigation.module.scss

@@ -1,70 +1,68 @@
-@use '../../scss/config.scss' as *;
-
-body {
-    --w-bottom-navigation-max-width: auto;
-}
-
-.nav {
-    @include background(primary-60);
-    @include position(fixed, b0, l0, r0);
-    @include layer(header);
-    @include border(top, primary-50);
-
-    &.separated ul li:not(:last-child) {
-        @include border(right, primary-50);
-    }
-
-    &.separated.bordered ul {
-        @include border(left, primary-50);
-        @include border(right, primary-50);
-    }
-
-    &.floating {
-        @include position(l20px, r20px, b20px);
-        @include border-radius(xl);
-        @include border(0);
-
-        &:not(.bordered) {
-            li:first-child .item {
-                @include border-radius(xl, left);
-            }
-    
-            li:last-child .item {
-                @include border-radius(xl, right);
-            }
-        }
-    }
-
-    ul {
-        @include spacing(none-auto, p0);
-        @include layout(flex, h-center);
-
-        max-width: var(--w-bottom-navigation-max-width);
-        list-style-type: none;
-
-        li {
-            @include spacing(mb-0);
-
-            flex: 1;
-
-            &.with-icon .item {
-                @include spacing(pt-sm, pb-xs);
-            }
-            
-            .item {
-                @include layout(flex, column, center, xs);
-                @include spacing(py-sm);
-                @include size('h100%');
-                @include transition(background);
-                @include typography(md, primary-10, none);
-
-                user-select: none;
-                cursor: pointer;
-
-                &:hover {
-                    @include background(primary-50);
-                }
-            }
-        }
-    }
-}
+@use '../../scss/config.scss' as *;
+
+.nav {
+    --width: var(--w-bottom-navigation-max-width, auto);
+
+    @include background(primary-60);
+    @include position(fixed, b0, l0, r0);
+    @include layer(header);
+    @include border(top, primary-50);
+
+    &.separated ul li:not(:last-child) {
+        @include border(right, primary-50);
+    }
+
+    &.separated.bordered ul {
+        @include border(left, primary-50);
+        @include border(right, primary-50);
+    }
+
+    &.floating {
+        @include position(l20px, r20px, b20px);
+        @include border-radius(xl);
+        @include border(0);
+
+        &:not(.bordered) {
+            li:first-child .item {
+                @include border-radius(xl, left);
+            }
+    
+            li:last-child .item {
+                @include border-radius(xl, right);
+            }
+        }
+    }
+
+    ul {
+        @include spacing(none-auto, p0);
+        @include layout(flex, h-center);
+
+        max-width: var(--width);
+        list-style-type: none;
+
+        li {
+            @include spacing(mb-0);
+
+            flex: 1;
+
+            &.with-icon .item {
+                @include spacing(pt-sm, pb-xs);
+            }
+            
+            .item {
+                @include layout(flex, column, center, xs);
+                @include spacing(py-sm);
+                @include size('h100%');
+                @include transition(background);
+                @include typography(md, primary-10, none);
+
+                user-select: none;
+                cursor: pointer;
+
+                &:hover {
+                    @include background(primary-50);
+                }
+            }
+        }
+    }
+}

package/components/Breadcrumb/Breadcrumb.svelte

@@ -15,10 +15,10 @@
         className
     }: BreadcrumbProps = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.breadcrumb,
         className
-    ])
+    ]))
 </script>
 
 <ul class={classes}>

package/components/Button/Button.svelte

@@ -14,11 +14,11 @@
         ...rest
     }: SvelteButtonProps = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.button,
         theme && styles[theme],
         className
-    ])
+    ]))
 </script>