webcoreui 0.6.1 → 0.8.0

package/components/Stepper/stepper.ts

@@ -0,0 +1,17 @@
+import type { IconProps } from '../Icon/icon'
+
+export type StepperProps = {
+    items: {
+        icon?: IconProps['type'] | string
+        title?: string
+        subTitle?: string
+        completed?: boolean
+        active?: boolean
+    }[]
+    color?: string
+    completedColor?: string
+    activeColor?: string
+    borderless?: boolean
+    vertical?: boolean
+    className?: string
+}

package/components/Table/Table.tsx

@@ -27,7 +27,7 @@ const Table = ({
     ])
 
     const styleVariables = {
-        ...(maxHeight && { 'max-height': maxHeight })
+        ...(maxHeight && { maxHeight })
     } as React.CSSProperties
 
     return (

package/components/Textarea/textarea.module.scss

@@ -1,36 +1,36 @@
-@import '../../scss/config.scss';
-
-.textarea {
-    @include size('w100%');
-    @include background(transparent);
-    @include border-radius(sm);
-    @include border(primary-50);
-    @include spacing(p-sm);
-    @include typography(regular, primary, hlg);
-
-    min-height: 50px;
-    resize: vertical;
-
-    &[disabled] {
-        @include typography(primary-30);
-        cursor: no-drop;
-    }
-
-    &::placeholder {
-        @include typography(primary-30);
-    }
-}
-
-.label-wrapper {
-    @include layout(flex, column);
-
-    .label {
-        @include typography(primary-20);
-        @include spacing(mb-xs);
-    }
-
-    .subtext {
-        @include typography(md, primary-30);
-        @include spacing(mt-xs);
-    }
-}
+@use '../../scss/config.scss' as *;
+
+.textarea {
+    @include size('w100%');
+    @include background(transparent);
+    @include border-radius(sm);
+    @include border(primary-50);
+    @include spacing(p-sm);
+    @include typography(regular, primary, hlg);
+
+    min-height: 50px;
+    resize: vertical;
+
+    &[disabled] {
+        @include typography(primary-30);
+        cursor: no-drop;
+    }
+
+    &::placeholder {
+        @include typography(primary-30);
+    }
+}
+
+.label-wrapper {
+    @include layout(flex, column);
+
+    .label {
+        @include typography(primary-20);
+        @include spacing(mb-xs);
+    }
+
+    .subtext {
+        @include typography(md, primary-30);
+        @include spacing(mt-xs);
+    }
+}

package/icons/close.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0.390524 0.390524C0.911223 -0.130175 1.75544 -0.130175 2.27614 0.390524L12 10.1144L21.7239 0.390524C22.2446 -0.130175 23.0888 -0.130175 23.6095 0.390524C24.1302 0.911223 24.1302 1.75544 23.6095 2.27614L13.8856 12L23.6095 21.7239C24.1302 22.2446 24.1302 23.0888 23.6095 23.6095C23.0888 24.1302 22.2446 24.1302 21.7239 23.6095L12 13.8856L2.27614 23.6095C1.75544 24.1302 0.911223 24.1302 0.390524 23.6095C-0.130175 23.0888 -0.130175 22.2446 0.390524 21.7239L10.1144 12L0.390524 2.27614C-0.130175 1.75544 -0.130175 0.911223 0.390524 0.390524Z" fill="currentColor"/>
+<path d="M23 1L1 23M1 1L23 23" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

package/icons/plus.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M23 12H12M12 12H1M12 12V1M12 12V23" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/icons.d.ts

@@ -14,6 +14,7 @@ declare module 'webcoreui/icons' {
 	export const info: string
 	export const moon: string
 	export const order: string
+	export const plus: string
 	export const search: string
 	export const sun: string
 	export const warning: string

package/icons.js

@@ -13,6 +13,7 @@ export { default as home } from './icons/home.svg?raw'
 export { default as info } from './icons/info.svg?raw'
 export { default as moon } from './icons/moon.svg?raw'
 export { default as order } from './icons/order.svg?raw'
+export { default as plus } from './icons/plus.svg?raw'
 export { default as search } from './icons/search.svg?raw'
 export { default as sun } from './icons/sun.svg?raw'
 export { default as warning } from './icons/warning.svg?raw'

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "webcoreui",
     "type": "module",
-    "version": "0.6.1",
+    "version": "0.8.0",
     "scripts": {
         "prepare": "husky",
         "pre-commit": "lint-staged",
@@ -13,13 +13,13 @@
         "lint": "eslint src/**/* --fix"
     },
     "devDependencies": {
-        "@astrojs/check": "0.7.0",
+        "@astrojs/check": "0.9.4",
         "@astrojs/node": "8.3.4",
-        "@astrojs/react": "3.5.0",
+        "@astrojs/react": "3.6.2",
         "@astrojs/svelte": "5.5.0",
         "@eslint/js": "9.9.1",
         "@typescript-eslint/parser": "8.3.0",
-        "astro": "4.15.11",
+        "astro": "4.16.7",
         "astro-eslint-parser": "1.0.2",
         "eslint": "9.9.1",
         "eslint-plugin-astro": "1.2.3",
@@ -30,7 +30,7 @@
         "lint-staged": "15.2.9",
         "react": "18.3.1",
         "react-dom": "18.3.1",
-        "sass": "1.77.5",
+        "sass": "1.80.6",
         "svelte": "4.2.19",
         "svelte-eslint-parser": "0.41.0",
         "typescript": "5.4.5",

package/react.d.ts

@@ -1,8 +1,10 @@
 import { FC } from 'react'
 import type { AccordionProps as WAccordionProps } from './components/Accordion/accordion'
 import type { ReactAlertProps as WReactAlertProps } from './components/Alert/alert'
+import type { ReactAspectRatioProps as WReactAspectRatioProps } from './components/AspectRatio/aspectratio'
 import type { AvatarProps as WAvatarProps } from './components/Avatar/avatar'
 import type { ReactBadgeProps as WReactBadgeProps } from './components/Badge/badge'
+import type { ReactBannerProps as WReactBannerProps } from './components/Banner/banner'
 import type { BreadcrumbProps as WBreadcrumbProps } from './components/Breadcrumb/breadcrumb'
 import type { ReactButtonProps as WReactButtonProps } from './components/Button/button'
 import type { ReactCardProps as WReactCardProps } from './components/Card/card'
@@ -15,6 +17,7 @@ import type { ReactFooterProps as WReactFooterProps } from './components/Footer/
 import type { ReactGroupProps as WReactGroupProps } from './components/Group/group'
 import type { IconProps as WIconProps } from './components/Icon/icon'
 import type { ReactInputProps as WReactInputProps } from './components/Input/input'
+import type { ReactKbdProps as WReactKbdProps } from './components/Kbd/kbd'
 import type { ReactListProps as WReactListProps } from './components/List/list'
 import type { ReactMasonryProps as WReactMasonryProps } from './components/Masonry/masonry'
 import type { ReactMenuProps as WReactMenuProps } from './components/Menu/menu'
@@ -24,11 +27,15 @@ import type { ReactPopoverProps as WReactPopoverProps } from './components/Popov
 import type { ProgressProps as WProgressProps } from './components/Progress/progress'
 import type { ReactRadioProps as WReactRadioProps } from './components/Radio/radio'
 import type { RatingProps as WRatingProps } from './components/Rating/rating'
+import type { ReactRibbonProps as WReactRibbonProps } from './components/Ribbon/ribbon'
 import type { ReactSelectProps as WReactSelectProps } from './components/Select/select'
 import type { ReactSheetProps as WReactSheetProps } from './components/Sheet/sheet'
 import type { ReactSidebarProps as WReactSidebarProps } from './components/Sidebar/sidebar'
+import type { SkeletonProps as WSkeletonProps } from './components/Skeleton/skeleton'
 import type { ReactSliderProps as WReactSliderProps } from './components/Slider/slider'
 import type { SpinnerProps as WSpinnerProps } from './components/Spinner/spinner'
+import type { ReactSpoilerProps as WReactSpoilerProps } from './components/Spoiler/spoiler'
+import type { StepperProps as WStepperProps } from './components/Stepper/stepper'
 import type { ReactSwitchProps as WReactSwitchProps } from './components/Switch/switch'
 import type { TableProps as WTableProps } from './components/Table/table'
 import type { ReactTabsProps as WReactTabsProps } from './components/Tabs/tabs'
@@ -41,8 +48,10 @@ import type { ReactToastProps as WReactToastProps } from './components/Toast/toa
 declare module 'webcoreui/react' {
     export const Accordion: FC<WAccordionProps>
 	export const Alert: FC<WReactAlertProps>
+	export const AspectRatio: FC<WReactAspectRatioProps>
 	export const Avatar: FC<WAvatarProps>
 	export const Badge: FC<WReactBadgeProps>
+	export const Banner: FC<WReactBannerProps>
 	export const Breadcrumb: FC<WBreadcrumbProps>
 	export const Button: FC<WReactButtonProps>
 	export const Card: FC<WReactCardProps>
@@ -55,6 +64,7 @@ declare module 'webcoreui/react' {
 	export const Group: FC<WReactGroupProps>
 	export const Icon: FC<WIconProps>
 	export const Input: FC<WReactInputProps>
+	export const Kbd: FC<WReactKbdProps>
 	export const List: FC<WReactListProps>
 	export const Masonry: FC<WReactMasonryProps>
 	export const Menu: FC<WReactMenuProps>
@@ -64,11 +74,15 @@ declare module 'webcoreui/react' {
 	export const Progress: FC<WProgressProps>
 	export const Radio: FC<WReactRadioProps>
 	export const Rating: FC<WRatingProps>
+	export const Ribbon: FC<WReactRibbonProps>
 	export const Select: FC<WReactSelectProps>
 	export const Sheet: FC<WReactSheetProps>
 	export const Sidebar: FC<WReactSidebarProps>
+	export const Skeleton: FC<WSkeletonProps>
 	export const Slider: FC<WReactSliderProps>
 	export const Spinner: FC<WSpinnerProps>
+	export const Spoiler: FC<WReactSpoilerProps>
+	export const Stepper: FC<WStepperProps>
 	export const Switch: FC<WReactSwitchProps>
 	export const Table: FC<WTableProps>
 	export const Tabs: FC<WReactTabsProps>
@@ -80,8 +94,10 @@ declare module 'webcoreui/react' {
 
     export type AccordionProps = WAccordionProps
 	export type AlertProps = WReactAlertProps
+	export type AspectRatioProps = WReactAspectRatioProps
 	export type AvatarProps = WAvatarProps
 	export type BadgeProps = WReactBadgeProps
+	export type BannerProps = WReactBannerProps
 	export type BreadcrumbProps = WBreadcrumbProps
 	export type ButtonProps = WReactButtonProps
 	export type CardProps = WReactCardProps
@@ -94,6 +110,7 @@ declare module 'webcoreui/react' {
 	export type GroupProps = WReactGroupProps
 	export type IconProps = WIconProps
 	export type InputProps = WReactInputProps
+	export type KbdProps = WReactKbdProps
 	export type ListProps = WReactListProps
 	export type MasonryProps = WReactMasonryProps
 	export type MenuProps = WReactMenuProps
@@ -103,11 +120,15 @@ declare module 'webcoreui/react' {
 	export type ProgressProps = WProgressProps
 	export type RadioProps = WReactRadioProps
 	export type RatingProps = WRatingProps
+	export type RibbonProps = WReactRibbonProps
 	export type SelectProps = WReactSelectProps
 	export type SheetProps = WReactSheetProps
 	export type SidebarProps = WReactSidebarProps
+	export type SkeletonProps = WSkeletonProps
 	export type SliderProps = WReactSliderProps
 	export type SpinnerProps = WSpinnerProps
+	export type SpoilerProps = WReactSpoilerProps
+	export type StepperProps = WStepperProps
 	export type SwitchProps = WReactSwitchProps
 	export type TableProps = WTableProps
 	export type TabsProps = WReactTabsProps

package/react.js

@@ -1,7 +1,9 @@
 import AccordionComponent from './components/Accordion/Accordion.tsx'
 import AlertComponent from './components/Alert/Alert.tsx'
+import AspectRatioComponent from './components/AspectRatio/AspectRatio.tsx'
 import AvatarComponent from './components/Avatar/Avatar.tsx'
 import BadgeComponent from './components/Badge/Badge.tsx'
+import BannerComponent from './components/Banner/Banner.tsx'
 import BreadcrumbComponent from './components/Breadcrumb/Breadcrumb.tsx'
 import ButtonComponent from './components/Button/Button.tsx'
 import CardComponent from './components/Card/Card.tsx'
@@ -14,6 +16,7 @@ import FooterComponent from './components/Footer/Footer.tsx'
 import GroupComponent from './components/Group/Group.tsx'
 import IconComponent from './components/Icon/Icon.tsx'
 import InputComponent from './components/Input/Input.tsx'
+import KbdComponent from './components/Kbd/Kbd.tsx'
 import ListComponent from './components/List/List.tsx'
 import MasonryComponent from './components/Masonry/Masonry.tsx'
 import MenuComponent from './components/Menu/Menu.tsx'
@@ -23,11 +26,15 @@ import PopoverComponent from './components/Popover/Popover.tsx'
 import ProgressComponent from './components/Progress/Progress.tsx'
 import RadioComponent from './components/Radio/Radio.tsx'
 import RatingComponent from './components/Rating/Rating.tsx'
+import RibbonComponent from './components/Ribbon/Ribbon.tsx'
 import SelectComponent from './components/Select/Select.tsx'
 import SheetComponent from './components/Sheet/Sheet.tsx'
 import SidebarComponent from './components/Sidebar/Sidebar.tsx'
+import SkeletonComponent from './components/Skeleton/Skeleton.tsx'
 import SliderComponent from './components/Slider/Slider.tsx'
 import SpinnerComponent from './components/Spinner/Spinner.tsx'
+import SpoilerComponent from './components/Spoiler/Spoiler.tsx'
+import StepperComponent from './components/Stepper/Stepper.tsx'
 import SwitchComponent from './components/Switch/Switch.tsx'
 import TableComponent from './components/Table/Table.tsx'
 import TabsComponent from './components/Tabs/Tabs.tsx'
@@ -39,8 +46,10 @@ import ToastComponent from './components/Toast/Toast.tsx'
 
 export const Accordion = AccordionComponent
 export const Alert = AlertComponent
+export const AspectRatio = AspectRatioComponent
 export const Avatar = AvatarComponent
 export const Badge = BadgeComponent
+export const Banner = BannerComponent
 export const Breadcrumb = BreadcrumbComponent
 export const Button = ButtonComponent
 export const Card = CardComponent
@@ -53,6 +62,7 @@ export const Footer = FooterComponent
 export const Group = GroupComponent
 export const Icon = IconComponent
 export const Input = InputComponent
+export const Kbd = KbdComponent
 export const List = ListComponent
 export const Masonry = MasonryComponent
 export const Menu = MenuComponent
@@ -62,11 +72,15 @@ export const Popover = PopoverComponent
 export const Progress = ProgressComponent
 export const Radio = RadioComponent
 export const Rating = RatingComponent
+export const Ribbon = RibbonComponent
 export const Select = SelectComponent
 export const Sheet = SheetComponent
 export const Sidebar = SidebarComponent
+export const Skeleton = SkeletonComponent
 export const Slider = SliderComponent
 export const Spinner = SpinnerComponent
+export const Spoiler = SpoilerComponent
+export const Stepper = StepperComponent
 export const Switch = SwitchComponent
 export const Table = TableComponent
 export const Tabs = TabsComponent

package/scss/config/color-palette.scss

@@ -1,3 +1,5 @@
+@use 'webcore.config.scss' as *;
+
 $colorPalette: (
     'primary': var(--w-color-primary),
     'primary-10': var(--w-color-primary-10),

package/scss/config/css-values.scss

@@ -1,3 +1,5 @@
+@use 'webcore.config.scss' as *;
+
 $overflowValues: auto,
     hidden,
     overlay,

package/scss/config/layout.scss

@@ -1,3 +1,5 @@
+@use 'webcore.config.scss' as *;
+
 $breakpoints: (
     'xs': 600px,
     'sm': 800px,

package/scss/config/mixins.scss

@@ -3,6 +3,13 @@
 @use 'sass:list';
 @use 'sass:string';
 
+@use 'webcore.config.scss' as *;
+@use './color-palette.scss' as *;
+@use './css-values.scss' as *;
+@use './layout.scss' as *;
+@use './typography.scss' as *;
+@use './variables.scss' as *;
+
 @mixin background($arg) {
     background: map.get($colorPalette, '#{$arg}') or $arg;
 }

package/scss/config/typography.scss

@@ -1,3 +1,5 @@
+@use 'webcore.config.scss' as *;
+
 $fontTypes: (
     'regular':  (Regular, sans-serif),
     'bold':     (Bold, sans-serif)

package/scss/config/variables.scss

@@ -1 +1,3 @@
+@use 'webcore.config.scss' as *;
+
 $disableAnimations: false !default;

package/scss/config.scss

@@ -1,7 +1,7 @@
-@import '../webcore.config.scss';
-@import './config/color-palette';
-@import './config/css-values';
-@import './config/typography';
-@import './config/variables';
-@import './config/layout';
-@import './config/mixins';
+@forward 'webcore.config.scss';
+@forward './config/color-palette';
+@forward './config/css-values';
+@forward './config/typography';
+@forward './config/variables';
+@forward './config/layout';
+@forward './config/mixins';

package/scss/global/utility.scss

@@ -33,6 +33,10 @@ $alignments: (
         max-width: 1200px;
     }
 
+    .muted {
+        @include typography(primary-20, md);
+    }
+
     // Gaps
     .flex, .grid {
         @each $key, $value in $spacing {

package/scss/global.scss

@@ -1,4 +1,4 @@
-@import './global/scrollbar.scss';
-@import './global/theme.scss';
-@import './global/tooltip.scss';
-@import './global/utility.scss';
+@use './global/scrollbar.scss';
+@use './global/theme.scss';
+@use './global/tooltip.scss';
+@use './global/utility.scss';

package/scss/index.scss

@@ -1,3 +1,3 @@
-@import './setup';
-@import './resets';
-@import './global';
+@forward './setup';
+@forward './resets';
+@forward './global';

package/scss/resets.scss

@@ -1,19 +1,19 @@
 @use './config.scss' as *;
 
-@mixin resets() {
-    @if (config('fontRegular')) {
+@mixin resets($fontRegular, $fontBold) {
+    @if ($fontRegular) {
         @font-face {
             font-family: Regular;
             font-display: swap;
-            src: url(#{config('fontRegular')}) format('woff2');
+            src: url(#{$fontRegular}) format('woff2');
         }
     }
 
-    @if (config('fontBold')) {
+    @if ($fontBold) {
         @font-face {
             font-family: Bold;
             font-display: swap;
-            src: url(#{config('fontBold')}) format('woff2');
+            src: url(#{$fontBold}) format('woff2');
         }
     }
 
@@ -67,6 +67,11 @@
 
     }
 
+    img {
+        @include border-radius();
+        object-fit: cover;
+    }
+
     figure {
         @include spacing(my-default);
         @include layout(inline-flex, column, v-center, xs);

package/scss/setup.scss

@@ -1,5 +1,11 @@
 @use 'sass:map';
 
+@use './resets.scss' as *;
+@use './global/scrollbar.scss' as *;
+@use './global/theme.scss' as *;
+@use './global/tooltip.scss' as *;
+@use './global/utility.scss' as *;
+
 $config: (
     includeResets: true,
     includeUtilities: true,
@@ -22,7 +28,7 @@ body {
     $config: map.merge($config, $customConfig) !global;
 
     @if (config('includeResets')) {
-        @include resets();
+        @include resets(config('fontRegular'), config('fontBold'));
     }
 
     @if (config('includeUtilities')) {

package/svelte.d.ts

@@ -1,8 +1,10 @@
 import type { SvelteComponent } from 'svelte'
 import type { AccordionProps as WAccordionProps } from './components/Accordion/accordion'
 import type { AlertProps as WAlertProps } from './components/Alert/alert'
+import type { AspectRatioProps as WAspectRatioProps } from './components/AspectRatio/aspectratio'
 import type { AvatarProps as WAvatarProps } from './components/Avatar/avatar'
 import type { SvelteBadgeProps as WSvelteBadgeProps } from './components/Badge/badge'
+import type { BannerProps as WBannerProps } from './components/Banner/banner'
 import type { BreadcrumbProps as WBreadcrumbProps } from './components/Breadcrumb/breadcrumb'
 import type { SvelteButtonProps as WSvelteButtonProps } from './components/Button/button'
 import type { CardProps as WCardProps } from './components/Card/card'
@@ -15,6 +17,7 @@ import type { FooterProps as WFooterProps } from './components/Footer/footer'
 import type { GroupProps as WGroupProps } from './components/Group/group'
 import type { IconProps as WIconProps } from './components/Icon/icon'
 import type { SvelteInputProps as WSvelteInputProps } from './components/Input/input'
+import type { KbdProps as WKbdProps } from './components/Kbd/kbd'
 import type { SvelteListProps as WSvelteListProps } from './components/List/list'
 import type { SvelteMasonryProps as WSvelteMasonryProps } from './components/Masonry/masonry'
 import type { MenuProps as WMenuProps } from './components/Menu/menu'
@@ -24,11 +27,15 @@ import type { PopoverProps as WPopoverProps } from './components/Popover/popover
 import type { ProgressProps as WProgressProps } from './components/Progress/progress'
 import type { SvelteRadioProps as WSvelteRadioProps } from './components/Radio/radio'
 import type { RatingProps as WRatingProps } from './components/Rating/rating'
+import type { RibbonProps as WRibbonProps } from './components/Ribbon/ribbon'
 import type { SvelteSelectProps as WSvelteSelectProps } from './components/Select/select'
 import type { SheetProps as WSheetProps } from './components/Sheet/sheet'
 import type { SidebarProps as WSidebarProps } from './components/Sidebar/sidebar'
+import type { SkeletonProps as WSkeletonProps } from './components/Skeleton/skeleton'
 import type { SvelteSliderProps as WSvelteSliderProps } from './components/Slider/slider'
 import type { SpinnerProps as WSpinnerProps } from './components/Spinner/spinner'
+import type { SpoilerProps as WSpoilerProps } from './components/Spoiler/spoiler'
+import type { StepperProps as WStepperProps } from './components/Stepper/stepper'
 import type { SvelteSwitchProps as WSvelteSwitchProps } from './components/Switch/switch'
 import type { TableProps as WTableProps } from './components/Table/table'
 import type { TabsProps as WTabsProps } from './components/Tabs/tabs'
@@ -41,8 +48,10 @@ import type { ToastProps as WToastProps } from './components/Toast/toast'
 declare module 'webcoreui/svelte' {
     export class Accordion extends SvelteComponent<WAccordionProps> {}
 	export class Alert extends SvelteComponent<WAlertProps> {}
+	export class AspectRatio extends SvelteComponent<WAspectRatioProps> {}
 	export class Avatar extends SvelteComponent<WAvatarProps> {}
 	export class Badge extends SvelteComponent<WSvelteBadgeProps> {}
+	export class Banner extends SvelteComponent<WBannerProps> {}
 	export class Breadcrumb extends SvelteComponent<WBreadcrumbProps> {}
 	export class Button extends SvelteComponent<WSvelteButtonProps> {}
 	export class Card extends SvelteComponent<WCardProps> {}
@@ -55,6 +64,7 @@ declare module 'webcoreui/svelte' {
 	export class Group extends SvelteComponent<WGroupProps> {}
 	export class Icon extends SvelteComponent<WIconProps> {}
 	export class Input extends SvelteComponent<WSvelteInputProps> {}
+	export class Kbd extends SvelteComponent<WKbdProps> {}
 	export class List extends SvelteComponent<WSvelteListProps> {}
 	export class Masonry extends SvelteComponent<WSvelteMasonryProps> {}
 	export class Menu extends SvelteComponent<WMenuProps> {}
@@ -64,11 +74,15 @@ declare module 'webcoreui/svelte' {
 	export class Progress extends SvelteComponent<WProgressProps> {}
 	export class Radio extends SvelteComponent<WSvelteRadioProps> {}
 	export class Rating extends SvelteComponent<WRatingProps> {}
+	export class Ribbon extends SvelteComponent<WRibbonProps> {}
 	export class Select extends SvelteComponent<WSvelteSelectProps> {}
 	export class Sheet extends SvelteComponent<WSheetProps> {}
 	export class Sidebar extends SvelteComponent<WSidebarProps> {}
+	export class Skeleton extends SvelteComponent<WSkeletonProps> {}
 	export class Slider extends SvelteComponent<WSvelteSliderProps> {}
 	export class Spinner extends SvelteComponent<WSpinnerProps> {}
+	export class Spoiler extends SvelteComponent<WSpoilerProps> {}
+	export class Stepper extends SvelteComponent<WStepperProps> {}
 	export class Switch extends SvelteComponent<WSvelteSwitchProps> {}
 	export class Table extends SvelteComponent<WTableProps> {}
 	export class Tabs extends SvelteComponent<WTabsProps> {}
@@ -80,8 +94,10 @@ declare module 'webcoreui/svelte' {
 
     export type AccordionProps = WAccordionProps
 	export type AlertProps = WAlertProps
+	export type AspectRatioProps = WAspectRatioProps
 	export type AvatarProps = WAvatarProps
 	export type BadgeProps = WSvelteBadgeProps
+	export type BannerProps = WBannerProps
 	export type BreadcrumbProps = WBreadcrumbProps
 	export type ButtonProps = WSvelteButtonProps
 	export type CardProps = WCardProps
@@ -94,6 +110,7 @@ declare module 'webcoreui/svelte' {
 	export type GroupProps = WGroupProps
 	export type IconProps = WIconProps
 	export type InputProps = WSvelteInputProps
+	export type KbdProps = WKbdProps
 	export type ListProps = WSvelteListProps
 	export type MasonryProps = WSvelteMasonryProps
 	export type MenuProps = WMenuProps
@@ -103,11 +120,15 @@ declare module 'webcoreui/svelte' {
 	export type ProgressProps = WProgressProps
 	export type RadioProps = WSvelteRadioProps
 	export type RatingProps = WRatingProps
+	export type RibbonProps = WRibbonProps
 	export type SelectProps = WSvelteSelectProps
 	export type SheetProps = WSheetProps
 	export type SidebarProps = WSidebarProps
+	export type SkeletonProps = WSkeletonProps
 	export type SliderProps = WSvelteSliderProps
 	export type SpinnerProps = WSpinnerProps
+	export type SpoilerProps = WSpoilerProps
+	export type StepperProps = WStepperProps
 	export type SwitchProps = WSvelteSwitchProps
 	export type TableProps = WTableProps
 	export type TabsProps = WTabsProps