webcoreui 1.0.0 → 1.1.0-beta.0

package/README.md

@@ -289,7 +289,9 @@ import { Accordion } from 'webcoreui/react'
 - [ComponentMap](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/ComponentMap)
 - [DeviceMockup](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/DeviceMockup)
 - [ErrorPage](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/ErrorPage)
+- [ExpandableTable](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/ExpandableTable)
 - [FAQ](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/FAQ)
+- [Form](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/Form)
 - [GridWithIcons](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/GridWithIcons)
 - [Hero](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/Hero)
 - [Icon](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/Icon)
@@ -307,6 +309,7 @@ import { Accordion } from 'webcoreui/react'
 
 ## Templates
 
+- [Authentication](https://github.com/Frontendland/webcoreui/tree/main/src/templates/Authentication)
 - [Blog](https://github.com/Frontendland/webcoreui/tree/main/src/templates/Blog)
 - [Portfolio](https://github.com/Frontendland/webcoreui/tree/main/src/templates/Portfolio)
 - [ProductPage](https://github.com/Frontendland/webcoreui/tree/main/src/templates/ProductPage)

package/components/Carousel/Carousel.svelte

@@ -13,25 +13,28 @@
 
     import type { PaginationEventType } from '../Pagination/pagination'
 
-    export let items: SvelteCarouselProps['items'] = 0
-    export let itemsPerSlide: SvelteCarouselProps['itemsPerSlide'] = 1
-    export let subText: SvelteCarouselProps['subText'] = ''
-    export let scrollSnap: SvelteCarouselProps['scrollSnap'] = true
-    export let progress: SvelteCarouselProps['progress'] = false
-    export let pagination: SvelteCarouselProps['pagination'] = {}
-    export let effect: SvelteCarouselProps['effect'] = null
-    export let debounce: SvelteCarouselProps['debounce'] = 20
-    export let className: SvelteCarouselProps['className'] = ''
-    export let wrapperClassName: SvelteCarouselProps['wrapperClassName'] = ''
-    export let paginationClassName: SvelteCarouselProps['paginationClassName'] = ''
-    export let onScroll: SvelteCarouselProps['onScroll'] = () => {}
+    let {
+        items = 0,
+        itemsPerSlide = 1,
+        subText,
+        scrollSnap = true,
+        progress,
+        pagination,
+        effect,
+        debounce = 20,
+        className,
+        wrapperClassName,
+        paginationClassName,
+        children,
+        onScroll
+    }: SvelteCarouselProps = $props()
 
     let carouselContainer: HTMLDivElement
     let carousel: HTMLUListElement
     let carouselItems: HTMLCollection | NodeListOf<HTMLLIElement>
-    let progressValue = 0
+    let progressValue = $state(0)
     let paginated = false
-    let currentPage = 1
+    let currentPage = $state(1)
 
     const classes = classNames([
         styles.carousel,
@@ -141,7 +144,7 @@
 <section class={classes}>
     <div class={containerClasses} bind:this={carouselContainer}>
         <ul class={wrapperClasses} style={style} bind:this={carousel}>
-            <slot />
+            {@render children?.()}
         </ul>
     </div>
     <ConditionalWrapper

package/components/Pagination/Pagination.svelte

@@ -66,7 +66,7 @@
         })
     }
 
-    let calculatedCurrentPage = $state(
+    let calculatedCurrentPage = $derived(
         currentPage
             || (pages?.findIndex(page => page.active) || -1) + 1
             || 1

package/components/Switch/Switch.astro

@@ -38,5 +38,5 @@ const styleVariables = classNames([
 <label class:list={classes} style={styleVariables}>
     <input type="checkbox" checked={toggled} disabled={disabled} {...rest} />
     <span class={styles.toggle}></span>
-    {label && <span class={styles.label}>{label}</span>}
+    {label && <span class={styles.label} set:html={label} />}
 </label>

package/components/Switch/Switch.svelte

@@ -44,6 +44,6 @@
     />
     <span class={styles.toggle}></span>
     {#if label}
-        <span class={styles.label}>{label}</span>
+        <span class={styles.label}>{@html label}</span>
     {/if}
 </label>

package/components/Switch/Switch.tsx

@@ -42,7 +42,12 @@ const Switch = ({
                 {...rest}
             />
             <span className={styles.toggle}></span>
-            {label && <span className={styles.label}>{label}</span>}
+            {label && (
+                <span
+                    className={styles.label}
+                    dangerouslySetInnerHTML={{ __html: label }}
+                />
+            )}
         </label>
     )
 }

package/index.d.ts

@@ -1,4 +1,6 @@
 
+import type { AstroIntegration } from 'astro'
+
 export type Gap = 'none'
     | 'xxs'
     | 'xs'
@@ -177,4 +179,5 @@ declare module 'webcoreui' {
     export const setDefaultTimeout: (time: number) => number
     export const toast: (config: Toast | string) => void
     export const hideToast: (element: string) => void
+    export const webcore: () => AstroIntegration
 }

package/index.js

@@ -8,4 +8,5 @@ export * from './utils/getLayoutClasses.ts'
 export * from './utils/interpolate.ts'
 export * from './utils/modal.ts'
 export * from './utils/popover.ts'
-export * from './utils/toast.ts'
+export * from './utils/toast.ts'
+export * from './utils/webcore.ts'

package/package.json

@@ -1,14 +1,13 @@
 {
     "name": "webcoreui",
     "type": "module",
-    "version": "1.0.0",
+    "version": "1.1.0-beta.0",
     "scripts": {
         "prepare": "husky",
         "pre-commit": "lint-staged",
         "dev": "astro dev",
         "build": "astro check && astro build",
         "build:package": "node scripts/build.js",
-        "build:local": "node scripts/build.js --local",
         "compile": "node scripts/sass.js",
         "test": "cd .. && vitest run && npm run test:sass",
         "test:dev": "vitest",
@@ -23,6 +22,7 @@
         "@astrojs/react": "4.2.1",
         "@astrojs/svelte": "7.0.7",
         "@eslint/js": "9.23.0",
+        "@types/node": "24.2.1",
         "@typescript-eslint/parser": "8.27.0",
         "astro": "5.5.4",
         "astro-eslint-parser": "1.2.2",

package/scss/config/color-palette.scss

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

package/scss/config/css-values.scss

@@ -1,4 +1,4 @@
-@use '../../../../webcore.config.scss' as *;
+@use 'webcore.config.scss' as *;
 
 $overflowValues: auto,
     hidden,

package/scss/config/layout.scss

@@ -1,4 +1,4 @@
-@use '../../../../webcore.config.scss' as *;
+@use 'webcore.config.scss' as *;
 
 $breakpoints: (
     'xs': 600px,

package/scss/config/mixins.scss

@@ -3,7 +3,7 @@
 @use 'sass:list';
 @use 'sass:string';
 
-@use '../../../../webcore.config.scss' as *;
+@use 'webcore.config.scss' as *;
 @use './color-palette.scss' as *;
 @use './css-values.scss' as *;
 @use './layout.scss' as *;

package/scss/config/typography.scss

@@ -1,4 +1,4 @@
-@use '../../../../webcore.config.scss' as *;
+@use 'webcore.config.scss' as *;
 
 $fontTypes: (
     'regular':  (Regular, sans-serif),

package/scss/config/variables.scss

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

package/scss/config.scss

@@ -1,4 +1,4 @@
-@forward '../../../webcore.config.scss';
+@forward 'webcore.config.scss';
 @forward './config/color-palette';
 @forward './config/css-values';
 @forward './config/typography';

package/scss/resets.scss

@@ -38,6 +38,10 @@
     strong,
     b {
         font-family: Bold, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+
+        @if ($fontBold) {
+            font-weight: normal;
+        }
     }
 
     a {
@@ -117,8 +121,13 @@
     }
 
     thead,
-    tfoot {
+    tfoot,
+    th {
         @include typography(bold);
+
+        @if ($fontBold) {
+            font-weight: normal;
+        }
     }
 
     th,

package/utils/getLayoutClasses.ts

@@ -1,4 +1,4 @@
-import { classNames } from './classNames'
+import { classNames } from './classNames.ts'
 
 export type Gap = 'none'
     | 'xxs'

package/utils/modal.ts

@@ -1,4 +1,4 @@
-import { bodyFreeze } from './bodyFreeze'
+import { bodyFreeze } from './bodyFreeze.ts'
 
 export type ModalCallback = {
     trigger: Element | null

package/utils/popover.ts

@@ -1,5 +1,5 @@
-import { debounce } from './debounce'
-import { closeModal } from './modal'
+import { debounce } from './debounce.ts'
+import { closeModal } from './modal.ts'
 
 export type PopoverPosition = 'top'
     | 'top-start'

package/utils/webcore.ts

@@ -0,0 +1,28 @@
+import type { AstroIntegration } from 'astro'
+import path from 'path'
+
+export const webcore = (): AstroIntegration => {
+    return {
+        name: 'webcoreui',
+        hooks: {
+            'astro:config:setup': ({ updateConfig }) => {
+                updateConfig({
+                    vite: {
+                        ssr: {
+                            noExternal: ['webcoreui']
+                        },
+                        css: {
+                            preprocessorOptions: {
+                                scss: {
+                                    loadPaths: [
+                                        path.resolve(process.cwd())
+                                    ]
+                                }
+                            }
+                        }
+                    }
+                })
+            }
+        }
+    }
+}