webcoreui 1.3.0 → 1.5.0-0

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

package/components/Carousel/Carousel.tsx

@@ -50,7 +50,7 @@ const Carousel = ({
     const [progressValue, setProgressValue] = useState(0)
     const [updatedSubText, setUpdatedSubText] = useState(subText)
     const [style, setStyle] = useState(getItemsPerSlide() > 1
-        ? { '--w-slide-width': `calc(${100 / getItemsPerSlide()}% - 5px)` } as React.CSSProperties
+        ? { '--width': `calc(${100 / getItemsPerSlide()}% - 5px)` } as React.CSSProperties
         : undefined)
 
     const classes = classNames([
@@ -147,7 +147,7 @@ const Carousel = ({
         totalPages.current = Math.ceil(items / getItemsPerSlide())
         setStyle(prevStyle => ({
             ...prevStyle,
-            '--w-slide-width': `calc(${100 / getItemsPerSlide()}% - 5px)`
+            '--width': `calc(${100 / getItemsPerSlide()}% - 5px)`
         }) as React.CSSProperties)
 
         if (subTextValue) {

package/components/Carousel/carousel.module.scss

@@ -1,10 +1,8 @@
 @use '../../scss/config.scss' as *;
 
-body {
-    --w-slide-width: 100%;
-}
-
 .carousel {
+    --width: 100%;
+
     @include layout(flex, sm, column);
 }
 
@@ -43,7 +41,7 @@ body {
         @include spacing(m0);
         @include layout(flex, h-center);
 
-        min-width: var(--w-slide-width);
+        min-width: var(--width);
     }
 }
 

package/components/Checkbox/Checkbox.svelte

@@ -17,18 +17,20 @@
         color,
         className,
         onClick,
+        onChange,
         ...rest
     }: SvelteCheckboxProps = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.checkbox,
         label && subText && styles.col,
         className
-    ])
+    ]))
 
-    const style = color
+    const style = $derived(color
         ? `--w-checkbox-color: ${color};`
         : null
+    )
 </script>
 
 <label class={classes} style={style}>
@@ -42,6 +44,7 @@
             checked={checked}
             disabled={disabled}
             onclick={onClick}
+            onchange={onChange}
             {...rest}
         />
         <span class={styles.check}>

package/components/Checkbox/Checkbox.tsx

@@ -16,7 +16,6 @@ const Checkbox = ({
     disabled,
     color,
     className,
-    onClick,
     ...rest
 }: ReactCheckboxProps) => {
     const classes = classNames([
@@ -43,7 +42,6 @@ const Checkbox = ({
                     type="checkbox"
                     defaultChecked={checked}
                     disabled={disabled}
-                    onClick={onClick}
                     {...rest}
                 />
                 <span

package/components/Checkbox/checkbox.module.scss

@@ -1,10 +1,8 @@
 @use '../../scss/config.scss' as *;
 
-body {
-    --w-checkbox-color: var(--w-color-primary);
-}
-
 .checkbox {
+    --color: var(--w-checkbox-color, var(--w-color-primary));
+
     @include layout(inline-flex, sm);
     @include typography(hmd);
 
@@ -22,7 +20,7 @@ body {
         display: none;
 
         &:checked + span {
-            @include background(var(--w-checkbox-color));
+            @include background(var(--color));
 
             svg {
                 @include position(absolute, center);
@@ -48,7 +46,7 @@ body {
 
         display: inline-block;
         min-width: 15px;
-        border: 1px solid var(--w-checkbox-color);
+        border: 1px solid var(--color);
 
         svg {
             @include visibility(none);

package/components/Checkbox/checkbox.ts

@@ -1,4 +1,4 @@
-import type { MouseEventHandler } from 'svelte/elements'
+import type { ChangeEventHandler, MouseEventHandler } from 'svelte/elements'
 
 export type CheckboxProps = {
     checked?: boolean
@@ -11,9 +11,11 @@ export type CheckboxProps = {
 }
 
 export type SvelteCheckboxProps = {
+    onChange?: ChangeEventHandler<HTMLInputElement>
     onClick?: MouseEventHandler<HTMLInputElement>
 } & CheckboxProps
 
 export type ReactCheckboxProps = {
+    onChange?: React.ChangeEventHandler<HTMLInputElement>
     onClick?: React.MouseEventHandler<HTMLInputElement>
 } & CheckboxProps

package/components/Collapsible/Collapsible.svelte

@@ -16,16 +16,16 @@
         on
     }: SvelteCollapsibleProps = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.collapsible,
         maxHeight && styles.animated,
         className
-    ])
+    ]))
 
-    const styleVariables = classNames([
+    const styleVariables = $derived(classNames([
         initialHeight && `--w-collapsible-initial-height: ${initialHeight};`,
         maxHeight && `--w-collapsible-max-height: ${maxHeight};`
-    ])
+    ]))
 </script>
 
 <div

package/components/Collapsible/collapsible.module.scss

@@ -1,8 +1,8 @@
 @use '../../scss/config.scss' as *;
 
-body {
-    --w-collapsible-initial-height: 0;
-    --w-collapsible-max-height: 100%;
+.wrapper {
+    --initial-height: var(--w-collapsible-initial-height, 0);
+    --max-height: var(--w-collapsible-max-height, 100%);
 }
 
 .collapsible {
@@ -14,7 +14,7 @@ body {
     }
 
     &[data-toggled="true"] .wrapper {
-        max-height: var(--w-collapsible-max-height);
+        max-height: var(--max-height);
     }
 
     &.animated .wrapper {
@@ -24,6 +24,6 @@ body {
     .wrapper {
         @include visibility(hidden);
 
-        max-height: var(--w-collapsible-initial-height);
+        max-height: var(--initial-height);
     }
 }

package/components/Collapsible/collapsible.ts

@@ -17,6 +17,6 @@ export type SvelteCollapsibleProps = {
 export type ReactCollapsibleProps = {
     on: React.ReactNode
     off: React.ReactNode
-    children?: React.ReactNode
+    children: React.ReactNode
 } & CollapsibleProps
 

package/components/ContextMenu/ContextMenu.svelte

@@ -15,10 +15,10 @@
         ...rest
     }: SvelteContextMenuProps = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.ctx,
         className
-    ])
+    ]))
 
     const showContext = (event: MouseEvent) => {
         event.preventDefault()
@@ -67,10 +67,12 @@
         }
     })
 
-    if (!context) {
-        // eslint-disable-next-line no-console, max-len
-        console.error('Missing "context" slot. Attach slot="context" to one of the children of your <ContextMenu> component.')
-    }
+    $effect(() => {
+        if (!context) {
+            // eslint-disable-next-line no-console, max-len
+            console.error('Missing "context" slot. Attach slot="context" to one of the children of your <ContextMenu> component.')
+        }
+    })
 </script>
 
 <svelte:element {...rest} this={element} class={classes} bind:this={ctx}>

package/components/Copy/Copy.svelte

@@ -20,10 +20,10 @@
         ...rest
     }: SvelteCopyProps = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.copy,
         className
-    ])
+    ]))
 
     let copyButton: HTMLButtonElement | undefined = $state()
     let copiedButton: HTMLSpanElement | undefined = $state()

package/components/Counter/Counter.svelte

@@ -25,20 +25,21 @@
         ...rest
     }: SvelteCounterProps = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.counter,
         styles[type],
         theme && styles[theme],
         rounded && styles.rounded,
         className
-    ])
+    ]))
 
-    const subtractIcon = minIcon || minusIcon
-    const addIcon = maxIcon || plusIcon
+    const subtractIcon = $derived(minIcon || minusIcon)
+    const addIcon = $derived(maxIcon || plusIcon)
 
-    const styleVariable = width
+    const styleVariable = $derived(width
         ? `--w-counter-width: ${width};`
         : null
+    )
 
     let intervalId: ReturnType<typeof setTimeout>
     let timeoutId: ReturnType<typeof setTimeout>

package/components/Counter/counter.module.scss

@@ -1,10 +1,8 @@
 @use '../../scss/config.scss' as *;
 
-body {
-    --w-counter-width: 10ch;
-}
-
 .counter {
+    --width: var(--w-counter-width, 10ch);
+
     @include layout(inline-flex);
     @include border(primary-50);
     @include border-radius();
@@ -139,7 +137,7 @@ body {
         @include spacing(p-xs);
 
         flex: 1;
-        width: var(--w-counter-width);
+        width: var(--width);
         appearance: none;
         -moz-appearance: textfield;
 

package/components/DataTable/DataTable.astro

@@ -149,7 +149,7 @@ const hasPagination = data?.length && itemsPerPage
             {!!columnFilterItems?.length && (
                 <tfoot data-hidden="true">
                     <tr>
-                        <td colspan={data?.[0].length} class={styles['no-results']}>{noResultsLabel}</td>
+                        <td colspan={headings?.length} class={styles['no-results']}>{noResultsLabel}</td>
                     </tr>
                 </tfoot>
             )}
@@ -251,9 +251,9 @@ const hasPagination = data?.length && itemsPerPage
                 const sortedTableRows = Array.from(
                     table?.querySelectorAll('tbody tr') as NodeListOf<HTMLTableRowElement>
                 ).sort((a, b) => {
-                    let aValue: string | number = (a.querySelector(`[data-name=${sortBy}]`) as HTMLElement)
+                    let aValue: string | number = (a.querySelector(`[data-name="${sortBy}"]`) as HTMLElement)
                         ?.innerText.replace(/\s/g, '')
-                    let bValue: string | number = (b.querySelector(`[data-name=${sortBy}]`) as HTMLElement)
+                    let bValue: string | number = (b.querySelector(`[data-name="${sortBy}"]`) as HTMLElement)
                         ?.innerText.replace(/\s/g, '')
 
                     if (!isNaN(aValue as any)) {
@@ -298,7 +298,7 @@ const hasPagination = data?.length && itemsPerPage
             return
         }
 
-        const affectedTableCells = Array.from(table.querySelectorAll(`[data-name=${eventName}]`)) as HTMLElement[]
+        const affectedTableCells = Array.from(table.querySelectorAll(`[data-name="${eventName}"]`)) as HTMLElement[]
 
         const columnToggleListElement = Array.from(event.list.children)
             .find(child => (child as HTMLLIElement).dataset.name === event.name) as HTMLLIElement

package/components/DataTable/DataTable.svelte

@@ -38,32 +38,32 @@
         children
     }: SvelteDataTableProps = $props()
 
-    let filteredData: any = $state(data)
-    let toggledData: any = $state(data)
-    let filteredHeadings: any = $state(headings)
+    let filteredData: any = $derived(data)
+    let toggledData: any = $derived(data)
+    let filteredHeadings: any = $derived(headings)
     let page: number = $state(1)
     let hasActiveFilter: boolean = $state(false)
     let sortOrder = 1
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.table,
         hover && styles.hover,
         striped && styles[`striped-${striped}s`],
         offsetStripe && styles.offset,
         compact && styles.compact,
         maxHeight && styles.scroll
-    ])
+    ]))
 
-    const footerClasses = classNames([
+    const footerClasses = $derived(classNames([
         styles.footer,
         subText && styles.between
-    ])
+    ]))
 
-    const showColumnToggle = headings?.some(heading => {
+    const showColumnToggle = $derived(headings?.some(heading => {
         return typeof heading === 'string' ? false : heading.toggleable
-    })
+    }))
 
-    const columnToggleItems = [{
+    const columnToggleItems = $derived([{
         items: headings?.length ? headings
             .filter(heading => typeof heading !== 'string' && heading.toggleable)
             .map(heading => ({
@@ -73,15 +73,17 @@
                     return (h as HeadingObject).name === (heading as HeadingObject).name
                 }))
             })) : []
-    }]
+    }])
 
-    const columnFilterIndexes = headings?.map(heading => (heading as HeadingObject).filterable)
+    const columnFilterIndexes = $derived(headings?.map(heading => (heading as HeadingObject).filterable)
         .map((heading, index) => heading ? index : null)
         .filter(heading => heading !== null) || []
+    )
 
-    const hasPagination = data?.length && itemsPerPage
+    const hasPagination = $derived(data?.length && itemsPerPage
         ? data.length > itemsPerPage
         : false
+    )
 
     const filter = debounce((event: Event) => {
         const target = event.target as HTMLInputElement
@@ -250,7 +252,7 @@
             {#if columnFilterIndexes?.length && !filteredData.length}
                 <tfoot>
                     <tr>
-                        <td colspan={data?.[0].length} class={styles['no-results']}>
+                        <td colspan={headings?.length} class={styles['no-results']}>
                             {noResultsLabel}
                         </td>
                     </tr>

package/components/DataTable/DataTable.tsx

@@ -255,7 +255,7 @@ const DataTable = ({
                         <tfoot>
                             <tr>
                                 <td
-                                    colSpan={data?.[0].length}
+                                    colSpan={headings?.length}
                                     className={styles['no-results']}
                                 >
                                     {noResultsLabel}

package/components/Flex/Flex.svelte

@@ -15,15 +15,15 @@
         ...rest
     }: SvelteFlexProps = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         'flex',
         getLayoutClasses({ gap, alignment, direction, wrap }),
         className
-    ])
+    ]))
 
-    const componentProps = {
+    const componentProps = $derived({
         class: classes
-    }
+    })
 </script>
 
 <svelte:element this={element} {...componentProps} {...rest}>

package/components/Footer/Footer.svelte

@@ -17,20 +17,20 @@
         children
     }: SvelteFooterProps = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.footer,
         className
-    ])
+    ]))
 
-    const containerClasses = classNames([
+    const containerClasses = $derived(classNames([
         styles.container,
         wrapperClassName
-    ])
+    ]))
 
-    const subTextClasses = classNames([
+    const subTextClasses = $derived(classNames([
         styles.subtext,
         subTextClassName
-    ])
+    ]))
 </script>
 
 <footer class={classes}>

package/components/Grid/Grid.svelte

@@ -13,15 +13,15 @@
         ...rest
     }: SvelteGridProps = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         'grid',
         getLayoutClasses({ gap, column }),
         className
-    ])
+    ]))
 
-    const componentProps = {
+    const componentProps = $derived({
         class: classes
-    }
+    })
 </script>
 
 <svelte:element this={element} {...componentProps} {...rest}>