webcoreui 0.7.0 → 0.8.0

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.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');
         }
     }
 

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

@@ -27,9 +27,11 @@ 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'
@@ -72,9 +74,11 @@ 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> {}
@@ -116,9 +120,11 @@ 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

package/svelte.js

@@ -26,9 +26,11 @@ import PopoverComponent from './components/Popover/Popover.svelte'
 import ProgressComponent from './components/Progress/Progress.svelte'
 import RadioComponent from './components/Radio/Radio.svelte'
 import RatingComponent from './components/Rating/Rating.svelte'
+import RibbonComponent from './components/Ribbon/Ribbon.svelte'
 import SelectComponent from './components/Select/Select.svelte'
 import SheetComponent from './components/Sheet/Sheet.svelte'
 import SidebarComponent from './components/Sidebar/Sidebar.svelte'
+import SkeletonComponent from './components/Skeleton/Skeleton.svelte'
 import SliderComponent from './components/Slider/Slider.svelte'
 import SpinnerComponent from './components/Spinner/Spinner.svelte'
 import SpoilerComponent from './components/Spoiler/Spoiler.svelte'
@@ -70,9 +72,11 @@ 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