webcoreui 1.4.0 → 1.5.0-beta.1

package/components/Skeleton/skeleton.module.scss

@@ -1,12 +1,10 @@
 @use '../../scss/config.scss' as *;
 
-body {
-    --w-skeleton-color: var(--w-color-primary-60);
-    --w-skeleton-wave-color: var(--w-color-primary-50);
-}
-
 .skeleton {
-    @include background(var(--w-skeleton-color));
+    --color: var(--w-skeleton-color, var(--w-color-primary-60));
+    --wave-color: var(--w-skeleton-wave-color, var(--w-color-primary-50));
+
+    @include background(var(--color));
     @include size(100%);
 
     text-indent: -9999px;
@@ -26,7 +24,7 @@ body {
             background: linear-gradient(
                 to right,
                 transparent 0%,
-                var(--w-skeleton-wave-color) 50%,
+                var(--wave-color) 50%,
                 transparent 100%
             );
         }
@@ -49,12 +47,11 @@ body {
     from {
         left: -200px;
     }
-    to   {
+    to {
         left: 100%;
     }
 }
 
-
 @keyframes pulse {
     0% {
         @include visibility(1);

package/components/Slider/Slider.astro

@@ -5,19 +5,20 @@ import { classNames } from '../../utils/classNames'
 
 import styles from './slider.module.scss'
 
-interface Props extends SliderProps {}
+export type Props = SliderProps
 
 const {
-    min,
-    max,
-    value,
+    min = 0,
+    max = 100,
+    value = 0,
     step,
     disabled,
     color,
     background,
     thumb,
     id,
-    className
+    className,
+    ...rest
 } = Astro.props
 
 const classes = [
@@ -42,4 +43,5 @@ const styleVariables = classNames([
     class:list={classes}
     id={id}
     style={styleVariables}
+    {...rest}
 />

package/components/Slider/Slider.svelte

@@ -1,14 +1,20 @@
 <script lang="ts">
-    import type { SvelteSliderProps } from './slider'
+    import type { SliderProps } from './slider'
 
     import { classNames } from '../../utils/classNames'
 
     import styles from './slider.module.scss'
 
+    import type { InputTarget } from '../Input/input'
+
+    export type Props = SliderProps & {
+        onChange?: (event: Event & InputTarget) => void
+    }
+
     const {
-        min,
-        max,
-        value,
+        min = 0,
+        max = 100,
+        value = 0,
         step,
         disabled,
         color,
@@ -16,19 +22,20 @@
         thumb,
         id,
         className,
-        onChange
-    }: SvelteSliderProps = $props()
+        onChange,
+        ...rest
+    }: Props = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.slider,
         className
-    ])
+    ]))
 
-    const styleVariables = classNames([
+    const styleVariables = $derived(classNames([
         color && `--w-slider-color: ${color};`,
         background && `--w-slider-background: ${background};`,
         thumb && `--w-slider-thumb: ${thumb};`
-    ])
+    ]))
 </script>
 
 <input
@@ -42,4 +49,5 @@
     id={id}
     style={styleVariables || null}
     onchange={onChange}
+    {...rest}
 />

package/components/Slider/Slider.tsx

@@ -1,14 +1,18 @@
 import React from 'react'
-import type { ReactSliderProps } from './slider'
+import type { SliderProps } from './slider'
 
 import { classNames } from '../../utils/classNames'
 
 import styles from './slider.module.scss'
 
+export type Props = SliderProps & {
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
+}
+
 const Slider = ({
-    min,
-    max,
-    value,
+    min = 0,
+    max = 100,
+    value = 0,
     step,
     disabled,
     color,
@@ -16,8 +20,9 @@ const Slider = ({
     thumb,
     id,
     className,
-    onChange
-}: ReactSliderProps) => {
+    onChange,
+    ...rest
+}: Props) => {
     const classes = classNames([
         styles.slider,
         className
@@ -41,6 +46,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,22 +1,13 @@
-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
     id?: string
     className?: string
 }
-
-export type SvelteSliderProps = {
-    onChange?: (event: Event & InputTarget) => void
-} & SliderProps
-
-export type ReactSliderProps = {
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
-} & SliderProps

package/components/SpeedDial/SpeedDial.astro

@@ -6,7 +6,7 @@ import Icon from '../Icon/Icon.astro'
 
 import styles from './speeddial.module.scss'
 
-interface Props extends SpeedDialProps {}
+export type Props = SpeedDialProps
 
 const {
     items,

package/components/SpeedDial/SpeedDial.svelte

@@ -9,6 +9,8 @@
 
     import styles from './speeddial.module.scss'
 
+    export type Props = SpeedDialProps
+
     const {
         items,
         position,
@@ -18,17 +20,17 @@
         icon,
         triggerOnClick,
         className
-    }: SpeedDialProps = $props()
+    }: Props = $props()
 
     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 +53,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

@@ -8,6 +8,8 @@ import { get, on } from '../../utils/DOMUtils'
 
 import styles from './speeddial.module.scss'
 
+export type Props = SpeedDialProps
+
 const SpeedDial = ({
     items,
     position,
@@ -17,7 +19,7 @@ const SpeedDial = ({
     icon,
     triggerOnClick,
     className
-}: SpeedDialProps) => {
+}: Props) => {
     const [show, setShow] = useState(false)
 
     const classes = classNames([
@@ -51,7 +53,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.astro

@@ -5,7 +5,7 @@ import { classNames } from '../../utils/classNames'
 
 import styles from './spinner.module.scss'
 
-interface Props extends SpinnerProps {}
+export type Props = SpinnerProps
 
 const {
     color,

package/components/Spinner/Spinner.svelte

@@ -4,6 +4,8 @@
     import { classNames } from '../../utils/classNames'
 
     import styles from './spinner.module.scss'
+
+    export type Props = SpinnerProps
 
     const {
         color,
@@ -11,20 +13,20 @@
         speed,
         size,
         dashArray
-    }: SpinnerProps = $props()
+    }: Props = $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.tsx

@@ -4,6 +4,8 @@ import type { SpinnerProps } from './spinner'
 import { classNames } from '../../utils/classNames'
 
 import styles from './spinner.module.scss'
+
+export type Props = SpinnerProps
 
 const Spinner = ({
     color,
@@ -11,7 +13,7 @@ const Spinner = ({
     speed,
     size,
     dashArray
-}: SpinnerProps) => {
+}: Props) => {
     const classes = classNames([
         styles.spinner,
         dashArray && styles.dashed

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.astro

@@ -3,7 +3,7 @@ import type { SpoilerProps } from './spoiler'
 
 import styles from './spoiler.module.scss'
 
-interface Props extends SpoilerProps {}
+export type Props = SpoilerProps
 
 const {
     color,

package/components/Spoiler/Spoiler.svelte

@@ -1,10 +1,15 @@
 <script lang="ts">
-    import type { SvelteSpoilerProps } from './spoiler'
+    import type { Snippet } from 'svelte'
+    import type { SpoilerProps } from './spoiler'
 
     import { classNames } from '../../utils/classNames'
 
     import styles from './spoiler.module.scss'
 
+    export type Props = SpoilerProps & {
+        children: Snippet
+    }
+
     const {
         color,
         animated = true,
@@ -12,17 +17,18 @@
         tooltip,
         tooltipPosition,
         children
-    }: SvelteSpoilerProps = $props()
+    }: Props = $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.tsx

@@ -1,10 +1,14 @@
 import React from 'react'
-import type { ReactSpoilerProps } from './spoiler'
+import type { SpoilerProps } from './spoiler'
 
 import { classNames } from '../../utils/classNames'
 
 import styles from './spoiler.module.scss'
 
+export type Props = SpoilerProps & {
+    children: React.ReactNode
+}
+
 const Spoiler = ({
     color,
     animated = true,
@@ -12,7 +16,7 @@ const Spoiler = ({
     tooltip,
     tooltipPosition,
     children
-}: ReactSpoilerProps) => {
+}: Props) => {
     const classes = classNames([
         styles.spoiler,
         animated && styles.anim,

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/Spoiler/spoiler.ts

@@ -1,5 +1,3 @@
-import type { Snippet } from 'svelte'
-
 export type SpoilerProps = {
     color?: string
     animated?: boolean
@@ -7,11 +5,3 @@ export type SpoilerProps = {
     tooltip?: string
     tooltipPosition?: 'bottom' | null
 }
-
-export type SvelteSpoilerProps = {
-    children: Snippet
-} & SpoilerProps
-
-export type ReactSpoilerProps = {
-    children: React.ReactNode
-} & SpoilerProps

package/components/Stepper/Stepper.astro

@@ -6,7 +6,7 @@ import Icon from '../Icon/Icon.astro'
 
 import styles from './stepper.module.scss'
 
-interface Props extends StepperProps {}
+export type Props = StepperProps
 
 const {
     items,

package/components/Stepper/Stepper.svelte

@@ -7,6 +7,8 @@
 
     import styles from './stepper.module.scss'
 
+    export type Props = StepperProps
+
     const {
         items,
         color,
@@ -15,20 +17,20 @@
         borderless,
         vertical,
         className
-    }: StepperProps = $props()
+    }: Props = $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.tsx

@@ -7,6 +7,8 @@ import { classNames } from '../../utils/classNames'
 
 import styles from './stepper.module.scss'
 
+export type Props = StepperProps
+
 const Stepper = ({
     items,
     color,
@@ -15,7 +17,7 @@ const Stepper = ({
     borderless,
     vertical,
     className
-}: StepperProps) => {
+}: Props) => {
     const classes = classNames([
         styles.stepper,
         borderless && styles.borderless,

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);
+}