webcoreui 1.4.0 → 1.5.0-0

package/README.md

@@ -123,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
@@ -146,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:
 
@@ -253,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:

package/components/Accordion/Accordion.svelte

@@ -15,7 +15,7 @@
         className
     }: AccordionProps = $props()
 
-    let toggleState = $state(items.map(item => item.expanded ?? 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/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.svelte

@@ -19,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)}

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>
 
 

package/components/Button/button.module.scss

@@ -12,14 +12,16 @@
     cursor: pointer;
 
     &[disabled] {
-        cursor: no-drop;
-        @include background(primary-20);
+        @include visibility(.5);
+
+        pointer-events: none;
+        cursor: not-allowed;
     }
 
     &:hover {
         @include background(primary-20);
     }
-    
+
     &.secondary {
         @include typography(primary);
         @include background(primary-50);
@@ -30,19 +32,14 @@
     }
 
     &.outline {
-        @include typography(primary-20);
+        @include typography(primary);
         @include background(transparent);
-        box-shadow: inset 0px 0px 0px 1px var(--w-color-primary-20);
-        
+        box-shadow: inset 0px 0px 0px 1px var(--w-color-primary-40);
+
         &:hover {
-            @include typography(primary);
+            @include background(primary-60);
             box-shadow: inset 0px 0px 0px 1px var(--w-color-primary);
         }
-
-        &[disabled] {
-            @include typography(primary-30);
-            box-shadow: inset 0px 0px 0px 1px var(--w-color-primary-30);
-        }
     }
 
     &.flat {

package/components/Card/Card.svelte

@@ -17,17 +17,17 @@
         ...rest
     }: SvelteCardProps = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.card,
         secondary && styles.secondary,
         className
-    ])
+    ]))
 
-    const bodyClasses = classNames([
+    const bodyClasses = $derived(classNames([
         styles.body,
         compact && styles.compact,
         bodyClassName
-    ])
+    ]))
 </script>
 
 <svelte:element this={element} class={classes} {...rest}>

package/components/Card/card.module.scss

@@ -5,19 +5,16 @@
     @include border-radius(md);
     @include layout(flex, column);
     @include background(primary-70);
+    @include visibility(hidden);
 
-    &.secondary {
+    &.secondary .body {
         @include background(primary-60);
-
-        .title {
-            @include background(primary-70);
-        }
     }
 
     .title {
         @include spacing(p-default);
         @include border(primary-50, bottom);
-        display: block;
+        @include visibility(block);
     }
 
     .body {
@@ -28,7 +25,6 @@
         &.compact {
             @include border(20px, primary-60);
             @include spacing(p-3xl);
-            @include background(primary-70);
         }
     }
 }

package/components/Carousel/Carousel.astro

@@ -59,7 +59,7 @@ const paginationClasses = classNames([
 const totalPages = Math.ceil(items / getItemsPerSlide())
 const subTextValue = subText?.match(/\{0\}|\{1\}/g) ? subText : undefined
 const style = getItemsPerSlide() > 1
-    ? `--w-slide-width: calc(${100 / getItemsPerSlide()}% - 5px);`
+    ? `--width: calc(${100 / getItemsPerSlide()}% - 5px);`
     : null
 ---
 
@@ -172,7 +172,7 @@ const style = getItemsPerSlide() > 1
             carousel.dataset.currentBreakpoint = breakpoint
             carousel.dataset.visibleItems = itemsPerSlide
             carousel.children[0].scrollIntoView({ behavior: 'smooth', block: 'nearest' })
-            carousel.style.setProperty('--w-slide-width', `calc(${100 / itemsPerSlide}% - 5px)`)
+            carousel.style.setProperty('--width', `calc(${100 / itemsPerSlide}% - 5px)`)
 
             pagination.dataset.totalPages = String(totalPages)
 

package/components/Carousel/Carousel.svelte

@@ -48,39 +48,39 @@
     let progressValue = $state(0)
     let paginated = false
     let currentPage = $state(1)
-    let totalPages = $state(Math.ceil(items / getItemsPerSlide()))
+    let totalPages = $derived(Math.ceil(items / getItemsPerSlide()))
     let style = $state(getItemsPerSlide() > 1
-        ? `--w-slide-width: calc(${100 / getItemsPerSlide()}% - 5px);`
+        ? `--width: calc(${100 / getItemsPerSlide()}% - 5px);`
         : null)
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.carousel,
         className
-    ])
+    ]))
 
-    const containerClasses = classNames([
+    const containerClasses = $derived(classNames([
         styles.container,
         scrollSnap && styles.snap
-    ])
+    ]))
 
-    const wrapperClasses = classNames([
+    const wrapperClasses = $derived(classNames([
         styles.wrapper,
         effect && styles[effect],
         getItemsPerSlide() > 1 && styles['no-snap'],
         wrapperClassName
-    ])
+    ]))
 
-    const paginationWrapperClasses = classNames([
+    const paginationWrapperClasses = $derived(classNames([
         styles['pagination-wrapper'],
         paginationClassName
-    ])
+    ]))
 
-    const paginationClasses = classNames([
+    const paginationClasses = $derived(classNames([
         styles.pagination,
         !subText && paginationClassName
-    ])
+    ]))
 
-    const subTextValue = subText?.match(/\{0\}|\{1\}/g) ? subText : undefined
+    const subTextValue = $derived(subText?.match(/\{0\}|\{1\}/g) ? subText : undefined)
 
     const updateValues = () => {
         const activeElement = carouselItems[currentPage - 1] as HTMLLIElement
@@ -103,7 +103,7 @@
         onScroll?.(currentPage)
     }
 
-    const scroll = debounceScroll((event: Event) => {
+    const scroll = $derived(debounceScroll((event: Event) => {
         if (!paginated) {
             const target = event.target as HTMLDivElement
             const scrollLeft = target.scrollLeft
@@ -114,7 +114,7 @@
 
             updateValues()
         }
-    }, debounce)
+    }, debounce))
 
     const paginate = (event: PaginationEventType) => {
         const indexes = Array.from({ length: Math.ceil(items / getItemsPerSlide()) }, (_, i) => {
@@ -143,7 +143,7 @@
         currentPage = 1
         progressValue = 0
         totalPages = Math.ceil(items / getItemsPerSlide())
-        style = `--w-slide-width: calc(${100 / getItemsPerSlide()}% - 5px);`
+        style = `--width: calc(${100 / getItemsPerSlide()}% - 5px);`
 
         if (subTextValue) {
             subText = subTextValue