webcoreui 1.4.0 → 1.5.0-0

package/components/Slider/Slider.tsx

@@ -6,9 +6,9 @@ import { classNames } from '../../utils/classNames'
 import styles from './slider.module.scss'
 
 const Slider = ({
-    min,
-    max,
-    value,
+    min = 0,
+    max = 100,
+    value = 0,
     step,
     disabled,
     color,
@@ -16,7 +16,8 @@ const Slider = ({
     thumb,
     id,
     className,
-    onChange
+    onChange,
+    ...rest
 }: ReactSliderProps) => {
     const classes = classNames([
         styles.slider,
@@ -41,6 +42,7 @@ const Slider = ({
             id={id}
             style={styleVariables}
             onChange={onChange}
+            {...rest}
         />
 
     )

package/components/Slider/slider.module.scss

@@ -1,12 +1,10 @@
 @use '../../scss/config.scss' as *;
 
-body {
-    --w-slider-background: var(--w-color-primary-50);
-    --w-slider-color: var(--w-color-primary);
-    --w-slider-thumb: var(--w-color-primary-50);
-}
-
 .slider {
+    --bg: var(--w-slider-background, var(--w-color-primary-50));
+    --color: var(--w-slider-color, var(--w-color-primary));
+    --thumb: var(--w-slider-thumb, var(--w-color-primary-50));
+
     @include border-radius(xl);
     @include size('w100%');
     @include visibility(hidden);
@@ -43,30 +41,30 @@ body {
 }
 
 .slider::-webkit-slider-runnable-track {
-    @include background(var(--w-slider-background));
+    @include background(var(--bg));
 }
 
 .slider::-moz-range-track {
-    @include background(var(--w-slider-background));
+    @include background(var(--bg));
     @include size(h10px);
 }
 
 .slider::-webkit-slider-thumb {
-    @include background(var(--w-slider-thumb));
+    @include background(var(--thumb));
     @include size(10px);
     @include border-radius(max);
-    @include border(var(--w-slider-color));
+    @include border(var(--color));
 
     -webkit-appearance: none;
     appearance: none;
-    box-shadow: -995px 0 0 990px var(--w-slider-color);
+    box-shadow: -995px 0 0 990px var(--color);
 }
 
 .slider::-moz-range-thumb {
-    @include background(var(--w-slider-thumb));
+    @include background(var(--thumb));
     @include size(9px);
     @include border-radius(max);
-    @include border(var(--w-slider-color));
+    @include border(var(--color));
 
-    box-shadow: -995px 0 0 990px var(--w-slider-color);
+    box-shadow: -995px 0 0 990px var(--color);
 }

package/components/Slider/slider.ts

@@ -1,11 +1,12 @@
 import type { InputTarget } from '../Input/input'
 
 export type SliderProps = {
-    min: number
-    max: number
+    min?: number
+    max?: number
     value?: number
     step?: number
     disabled?: boolean
+    required?: boolean
     color?: string
     background?: string
     thumb?: string

package/components/SpeedDial/SpeedDial.svelte

@@ -22,13 +22,13 @@
 
     let show = $state(false)
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.dial,
         position && styles[position],
         horizontal && styles.horizontal,
         circular && styles.circular,
         className
-    ])
+    ]))
 
     const getTooltipPosition = () => {
         const positionMap = {
@@ -51,7 +51,7 @@
         const speedDial = get('[data-id="w-speed-dial"] button') as HTMLButtonElement
 
         const eventListener = (event: Event) => {
-            if (!speedDial.contains((event.target || event.currentTarget) as HTMLElement)) {
+            if (!speedDial?.contains((event.target || event.currentTarget) as HTMLElement)) {
                 show = false
             }
         }

package/components/SpeedDial/SpeedDial.tsx

@@ -51,7 +51,7 @@ const SpeedDial = ({
         const speedDial = get('[data-id="w-speed-dial"] button') as HTMLButtonElement
 
         const eventListener = (event: Event) => {
-            if (!speedDial.contains((event.target || event.currentTarget) as HTMLElement)) {
+            if (!speedDial?.contains((event.target || event.currentTarget) as HTMLElement)) {
                 setShow(false)
             }
         }

package/components/SpeedDial/speeddial.module.scss

@@ -1,10 +1,8 @@
 @use '../../scss/config.scss' as *;
 
-body {
-    --w-speed-dial-size: 40px;
-}
-
 .dial {
+    --size: var(--w-speed-dial-size, 40px);
+
     @include layout(flex, column-reverse, center, xs);
     @include position(fixed, b20px, r20px);
 
@@ -54,7 +52,7 @@ body {
 .trigger {
     @include layout(flex, column);
     @include typography(bold);
-    @include size(var(--w-speed-dial-size));
+    @include size(var(--size));
 
     user-select: none;
 
@@ -85,7 +83,7 @@ body {
 
     .button {
         @include layout(flex, column, xs);
-        @include size(var(--w-speed-dial-size));
+        @include size(var(--size));
     
         svg {
             @include size(16px);

package/components/Spinner/Spinner.svelte

@@ -13,18 +13,18 @@
         dashArray
     }: SpinnerProps = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.spinner,
         dashArray && styles.dashed
-    ])
+    ]))
 
-    const styleVariables = classNames([
+    const styleVariables = $derived(classNames([
         color && `--w-spinner-color: ${color};`,
         width && `--w-spinner-width: ${width}px;`,
         speed && `--w-spinner-speed: ${speed}s;`,
         size && `--w-spinner-size: ${size}px;`,
         dashArray && `--w-spinner-dash: ${dashArray}`
-    ])
+    ]))
 </script>
 
 <svg

package/components/Spinner/spinner.module.scss

@@ -1,28 +1,26 @@
 @use '../../scss/config.scss' as *;
 
-body {
-    --w-spinner-color: var(--w-color-primary);
-    --w-spinner-width: 2px;
-    --w-spinner-speed: 2s;
-    --w-spinner-size: 30px;
-    --w-spinner-dash: 8;
-}
-
 .spinner {
+    --color: var(--w-spinner-color, var(--w-color-primary));
+    --width: var(--w-spinner-width, 2px);
+    --speed: var(--w-spinner-speed, 2s);
+    --size: var(--w-spinner-size, 30px);
+    --dash: var(--w-spinner-dash, 8);
+
     @include spacing(auto-none);
 
-    width: var(--w-spinner-size);
-    height: var(--w-spinner-size);
-    animation: rotate var(--w-spinner-speed) linear infinite;
+    width: var(--size);
+    height: var(--size);
+    animation: rotate var(--speed) linear infinite;
 
     &.dashed .path {
-        stroke-dasharray: var(--w-spinner-dash);
+        stroke-dasharray: var(--dash);
         animation: none;
     }
 
     .path {
-        stroke: var(--w-spinner-color);
-        stroke-width: var(--w-spinner-width);
+        stroke: var(--color);
+        stroke-width: var(--width);
         animation: dash 1.5s ease-in-out infinite;
         stroke-linecap: round;
     }
@@ -48,3 +46,4 @@ body {
         stroke-dashoffset: -124;
     }
 }
+

package/components/Spoiler/Spoiler.svelte

@@ -14,15 +14,16 @@
         children
     }: SvelteSpoilerProps = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.spoiler,
         animated && styles.anim,
         block && styles.block
-    ])
+    ]))
 
-    const style = color
+    const style = $derived(color
         ? `--w-spoiler-color: ${color};`
         : null
+    )
 
     const toggle = (event: MouseEvent | KeyboardEvent) => {
         const target = event.currentTarget as HTMLSpanElement

package/components/Spoiler/spoiler.module.scss

@@ -1,12 +1,10 @@
 @use '../../scss/config.scss' as *;
 
-body {
-    --w-spoiler-color: var(--w-color-primary);
-}
-
 span.spoiler {
+    --color: var(--w-spoiler-color, var(--w-color-primary));
+
     @include border-radius();
-    @include background(var(--w-spoiler-color));
+    @include background(var(--color));
     @include typography(hmd);
     @include visibility(inline);
 

package/components/Stepper/Stepper.svelte

@@ -17,18 +17,18 @@
         className
     }: StepperProps = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.stepper,
         borderless && styles.borderless,
         vertical && styles.vertical,
         className
-    ])
+    ]))
 
-    const styleVariables = [
+    const styleVariables = $derived([
         color && `--w-stepper-color-border: ${color}`,
         completedColor && `--w-stepper-color-complete: ${completedColor}`,
         activeColor && `--w-stepper-color-active: ${activeColor}`
-    ].filter(Boolean).join(';')
+    ].filter(Boolean).join(';'))
 </script>
 
 <ol class={classes} style={styleVariables || null}>

package/components/Stepper/stepper.defaults.scss

@@ -0,0 +1,5 @@
+body {
+    --w-stepper-color-border: var(--w-color-primary-50);
+    --w-stepper-color-active: var(--w-color-info);
+    --w-stepper-color-complete: var(--w-color-success);
+}

package/components/Stepper/stepper.module.scss

@@ -1,14 +1,12 @@
 @use '../../scss/config.scss' as *;
 
-body {
-    --w-stepper-color-border: var(--w-color-primary-50);
-    --w-stepper-color-active: var(--w-color-info);
-    --w-stepper-color-complete: var(--w-color-success);
-}
-
 $size: 20px;
 
 .stepper {
+    --border: var(--w-stepper-color-border, var(--w-color-primary-50));
+    --active: var(--w-stepper-color-active, var(--w-color-info));
+    --complete: var(--w-stepper-color-complete, var(--w-color-success));
+
     @include layout(flex, default, column);
     @include spacing(0);
     @include size('w100%');
@@ -16,7 +14,7 @@ $size: 20px;
     list-style-type: none;
 
     &:not(.borderless) .number {
-        border: 2px solid var(--w-stepper-color-border);
+        border: 2px solid var(--border);
     }
 
     li {
@@ -31,7 +29,7 @@ $size: 20px;
 
             &::before {
                 @include position(absolute, l16px);
-                @include background(var(--w-stepper-color-border));
+                @include background(var(--border));
                 @include size(w2px);
 
                 top: -50%;
@@ -42,18 +40,18 @@ $size: 20px;
 
             &.completed::before,
             &.active::before {
-                @include background(var(--w-stepper-color-complete));
+                @include background(var(--complete));
             }
         }
 
         &.active .number {
-            border-color: var(--w-stepper-color-active);
-            color: var(--w-stepper-color-active);
+            border-color: var(--active);
+            color: var(--active);
         }
 
         &.completed .number {
-            border-color: var(--w-stepper-color-complete);
-            color: var(--w-stepper-color-complete);
+            border-color: var(--complete);
+            color: var(--complete);
         }
 
         .number {

package/components/Switch/Switch.svelte

@@ -20,19 +20,19 @@
         ...rest
     }: SvelteSwitchProps = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.switch,
         reverse && styles.reverse,
         small && styles.small,
         square && styles.square,
         disabled && styles.disabled,
         className
-    ])
+    ]))
 
-    const styleVariables = classNames([
+    const styleVariables = $derived(classNames([
         offColor && `--w-switch-off-color: ${offColor};`,
         onColor && `--w-switch-on-color: ${onColor};`
-    ])
+    ]))
 </script>
 
 <label class={classes} style={styleVariables || null}>

package/components/Switch/switch.module.scss

@@ -1,11 +1,9 @@
 @use '../../scss/config.scss' as *;
 
-body {
-    --w-switch-off-color: var(--w-color-primary-50);
-    --w-switch-on-color: var(--w-color-primary);
-}
-
 .switch {
+    --off-color: var(--w-switch-off-color, var(--w-color-primary-50));
+    --on-color: var(--w-switch-on-color, var(--w-color-primary));
+
     @include layout(inline-flex, v-center, sm);
     cursor: pointer;
     user-select: none;
@@ -53,7 +51,7 @@ body {
         @include visibility(none);
 
         &:checked + span {
-            @include background(var(--w-switch-on-color));
+            @include background(var(--on-color));
     
             &::before {
                 transform: translateX(30px);
@@ -66,7 +64,7 @@ body {
         @include position(relative);
         @include size(w60px, h30px);
         @include border-radius(xl);
-        @include background(var(--w-switch-off-color));
+        @include background(var(--off-color));
 
         &::before {
             @include transition(transform);

package/components/Table/Table.svelte

@@ -17,7 +17,7 @@
         className
     }: TableProps = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.table,
         hover && styles.hover,
         striped && styles[`striped-${striped}s`],
@@ -25,7 +25,7 @@
         compact && styles.compact,
         maxHeight && styles.scroll,
         className
-    ])
+    ]))
 </script>
 
 <div class={classes} style={maxHeight ? `max-height:${maxHeight}` : null}>

package/components/Tabs/Tabs.svelte

@@ -17,13 +17,13 @@
     let active = $state('')
     let tabContainer: HTMLDivElement | undefined = $state()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.tabs,
         theme && styles[theme],
         vertical && styles.vertical,
         even && styles.even,
         className
-    ])
+    ]))
 
     const setTab = (tab: string) => {
         const tabs = tabContainer!.querySelectorAll('[data-tab]')

package/components/Textarea/Textarea.svelte

@@ -20,12 +20,12 @@
         ...rest
     }: SvelteTextareaProps = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.textarea,
         className
-    ])
+    ]))
 
-    const useLabel = !!(label || subText)
+    const useLabel = $derived(!!(label || subText))
 </script>
 
 <ConditionalWrapper

package/components/ThemeSwitcher/ThemeSwitcher.svelte

@@ -20,15 +20,15 @@
     let currentTheme = $state('')
     let toggled = false
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.switcher,
         toggle && styles.toggle,
         className
-    ])
+    ]))
 
-    const primaryTheme = themes[Object.keys(themes)[0]]
-    const secondaryTheme = themes[Object.keys(themes)[1]]
-    const useIcons = primaryIcon && secondaryIcon
+    const primaryTheme = $derived(themes[Object.keys(themes)[0]])
+    const secondaryTheme = $derived(themes[Object.keys(themes)[1]])
+    const useIcons = $derived(primaryIcon && secondaryIcon)
 
     const setTheme = (theme: string | number) => {
         if (typeof theme === 'number') {

package/components/ThemeSwitcher/themeswitcher.module.scss

@@ -1,16 +1,14 @@
 @use '../../scss/config.scss' as *;
 
-body {
-    --w-theme-switcher-size: 20px;
-}
-
 .switcher {
+    --size: var(--w-theme-switcher-size, 20px);
+
     @include layout(flex, sm);
 
     &.toggle {
         @include position(relative);
-        width: var(--w-theme-switcher-size);
-        height: var(--w-theme-switcher-size);
+        width: var(--size);
+        height: var(--size);
 
         .switch {
             position: absolute;
@@ -35,8 +33,8 @@ body {
     @include border-radius(max);
     @include position(relative);
 
-    width: var(--w-theme-switcher-size);
-    height: var(--w-theme-switcher-size);
+    width: var(--size);
+    height: var(--size);
     cursor: pointer;
     user-select: none;
 
@@ -53,8 +51,8 @@ body {
 
         svg, img {
             pointer-events: none;
-            width: var(--w-theme-switcher-size);
-            height: var(--w-theme-switcher-size);
+            width: var(--size);
+            height: var(--size);
         }
     }
 
@@ -71,7 +69,7 @@ body {
 
     &[data-active="true"]::after {
         @include layer(default);
-        width: calc(var(--w-theme-switcher-size) + 5px);
-        height: calc(var(--w-theme-switcher-size) + 5px);
+        width: calc(var(--size) + 5px);
+        height: calc(var(--size) + 5px);
     }
 }

package/components/Timeline/Timeline.svelte

@@ -16,19 +16,19 @@
         children
     }: SvelteTimelineProps = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.timeline,
         theme && theme.split(' ').map(style => styles[style]),
         alternate && styles.alternate,
         centered && styles.centered,
         className
-    ])
+    ]))
 
-    const styleVariables = classNames([
+    const styleVariables = $derived(classNames([
         color && `--w-timeline-color: ${color};`,
         textColor && `--w-timeline-text-color: ${textColor};`,
         counter && `--w-timeline-counter: ${counter};`
-    ])
+    ]))
 </script>
 
 <ul class={classes} style={styleVariables || null}>

package/components/Timeline/timeline.module.scss

@@ -4,13 +4,11 @@
 $leftOffset: calc(((25px + 4px) / 2) - 1px);
 $rightOffset: calc((((25px + 4px) / 2) - 1px) * -1);
 
-body {
-    --w-timeline-color: var(--w-color-primary-50);
-    --w-timeline-text-color: var(--w-color-primary);
-    --w-timeline-counter: decimal;
-}
-
 .timeline {
+    --color: var(--w-timeline-color, var(--w-color-primary-50));
+    --text-color: var(--w-timeline-text-color, var(--w-color-primary));
+    --counter: var(--w-timeline-counter, decimal);
+
     @include layout(flex, default, column);
     @include spacing(pl-3xl, m0);
     @include position(relative);
@@ -22,7 +20,7 @@ body {
     &::before {
         @include position(absolute);
         @include size(w2px, 'h100%');
-        @include background(var(--w-timeline-color));
+        @include background(var(--color));
 
         content: '';
         left: $leftOffset
@@ -34,7 +32,7 @@ body {
 
     &.stroke > li::before {
         @include background(primary-70);
-        border: 2px solid var(--w-timeline-color);
+        border: 2px solid var(--color);
     }
 }
 

package/components/TimelineItem/TimelineItem.svelte

@@ -13,11 +13,11 @@
         children
     }: SvelteTimelineItemProps = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.item,
         icon && styles['with-icon'],
         className
-    ])
+    ]))
 </script>
 
 <li class={classes}>

package/components/TimelineItem/timelineitem.module.scss

@@ -8,14 +8,14 @@
         @include position(absolute, t-5px);
         @include size(25px);
         @include border-radius(max);
-        @include background(var(--w-timeline-color));
+        @include background(var(--color));
         @include typography(md);
         @include layout(inline-flex, center);
         @include border(2px, primary-70);
 
-        content: counter(item, var(--w-timeline-counter));
+        content: counter(item, var(--counter));
         counter-increment: item;
-        color: var(--w-timeline-text-color);
+        color: var(--text-color);
         margin-left: -40px;
     }
 
@@ -25,7 +25,7 @@
         @include border(6px, primary-70);
         @include layout(flex);
         
-        color: var(--w-timeline-text-color);
+        color: var(--text-color);
         margin-left: -40px;
         margin-top: -4px;