@newlogic-digital/ui 4.0.0 → 4.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newlogic-digital/ui",
-  "version": "4.0.0",
+  "version": "4.2.0",
   "type": "module",
   "main": "vite.config.js",
   "author": "New Logic Studio s.r.o.",
@@ -23,29 +23,27 @@
     "npm-sort": "npm r -S example && npm r -D example"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.6.13",
+    "@floating-ui/dom": "^1.7.0",
     "@hotwired/stimulus": "^3.2.2",
     "@newlogic-digital/cookieconsent-js": "^1.0.0",
-    "@newlogic-digital/naja-extensions": "^1.0.0",
-    "@newlogic-digital/stimulus-components": "^1.0.0",
+    "@newlogic-digital/naja-extensions": "^1.0.3",
+    "@newlogic-digital/stimulus-components": "^1.1.0",
     "@newlogic-digital/swup-plugins": "^1.0.0",
-    "@newlogic-digital/utils-js": "^1.1.1",
+    "@newlogic-digital/utils-js": "^1.1.4",
     "naja": "^3.2.1",
     "slide-element": "^2.3.1",
-    "swup": "^4.8.1",
-    "winduum": "^2.1.0",
-    "winduum-stimulus": "^2.0.9"
+    "swup": "^4.8.2",
+    "winduum": "^2.2.1",
+    "winduum-stimulus": "^2.0.11"
   },
   "devDependencies": {
-    "@newlogic-digital/core": "^3.0.0",
+    "@eslint/js": "^9.26.0",
+    "@newlogic-digital/core": "^3.1.0",
+    "@stylistic/eslint-plugin": "^4.2.0",
     "@stylistic/stylelint-config": "^2.0.0",
-    "@tailwindcss/container-queries": "^0.1.1",
-    "@vituum/vite-plugin-tailwindcss": "^1.2.0",
-    "eslint": "^9.19.0",
-    "neostandard": "^0.12.0",
-    "npm-check-updates": "^17.1.14",
-    "stylelint-config-standard": "^37.0.0",
-    "tailwindcss": "^3.4.17"
+    "eslint": "^9.26.0",
+    "npm-check-updates": "^18.0.1",
+    "stylelint-config-standard": "^38.0.0"
   },
   "browserslist": [
     "> 1%",

package/src/pages/example/popover-autocomplete.json

@@ -0,0 +1,8 @@
+{
+  "title": "Example Popover Autocomplete",
+  "body": [
+    {
+      "src": "components/(example)/PopoverAutocomplete.latte"
+    }
+  ]
+}

package/src/scripts/components/(ui)/+.js

@@ -1,4 +1,5 @@
 import './Button.js'
+import './Carousel.js'
 import './Compare.js'
 import './Control.js'
 import './ControlSelect.js'

package/src/scripts/components/(ui)/Carousel.js

@@ -0,0 +1,4 @@
+import { useStimulus } from '../../composables/stimulus.js'
+import { Carousel } from 'winduum-stimulus/components/carousel/index.js'
+
+useStimulus.register('x-carousel', Carousel)

package/src/scripts/components/(ui)/Control.js

@@ -3,9 +3,9 @@ import { Control } from 'winduum-stimulus/components/control/index.js'
 import { validateField } from 'winduum/src/components/form/index.js'
 
 useStimulus.register('x-control', class extends Control {
-    connect() {
-        validateField(this.element, { validate: false })
+  connect() {
+    validateField(this.element, { validate: false })
 
-        this.element.addEventListener('change', () => validateField(this.element))
-    }
+    this.element.addEventListener('change', () => validateField(this.element))
+  }
 })

package/src/scripts/components/(ui)/Dialog.js

@@ -2,16 +2,16 @@ import { useStimulus } from '../../composables/stimulus.js'
 import { Dialog } from 'winduum-stimulus/components/dialog/index.js'
 
 useStimulus.register('x-dialog', class extends Dialog {
-    connect() {
-        super.connect()
+  connect() {
+    super.connect()
 
-        this.element.addEventListener('x-dialog:show', () => this.appendToaster(this.element))
-        this.element.addEventListener('close', () => this.appendToaster(document.body))
-    }
+    this.element.addEventListener('x-dialog:show', () => this.appendToaster(this.element))
+    this.element.addEventListener('close', () => this.appendToaster(document.body))
+  }
 
-    appendToaster(parentElement) {
-        const toasterElement = document.querySelector('.x-toaster')
+  appendToaster(parentElement) {
+    const toasterElement = document.querySelector('.x-toaster')
 
-        if (toasterElement) parentElement.appendChild(toasterElement)
-    }
+    if (toasterElement) parentElement.appendChild(toasterElement)
+  }
 })

package/src/scripts/components/(ui)/Form.js

@@ -3,13 +3,13 @@ import { Form } from 'winduum-stimulus/components/form/index.js'
 import { validateForm } from 'winduum/src/components/form/index.js'
 
 useStimulus.register('x-form', class extends Form {
-    requestSubmit() {
-        this.element.requestSubmit()
-    }
+  requestSubmit() {
+    this.element.requestSubmit()
+  }
 
-    reset(event) {
-        this.element.reset()
+  reset(event) {
+    this.element.reset()
 
-        validateForm(event, { validateOptions: { validate: false } })
-    }
+    validateForm(event, { validateOptions: { validate: false } })
+  }
 })

package/src/scripts/components/(ui)/Popover.js

@@ -1,4 +1,4 @@
 import { useStimulus } from '../../composables/stimulus.js'
-import { Popover } from 'winduum-stimulus/components/popover/index.js'
+import { Popover } from '@newlogic-digital/stimulus-components'
 
 useStimulus.register('x-popover', Popover)

package/src/scripts/components/App.js

@@ -1,5 +1,5 @@
 import { Controller, useStimulus } from '../composables/stimulus.js'
 
 useStimulus.register('x-app', class extends Controller {
-    // YOUR GLOBAL METHODS
+  // YOUR GLOBAL METHODS
 })

package/src/scripts/composables/naja.js

@@ -1,8 +1,8 @@
 import naja from 'naja'
 import {
-    NajaCoreExtension,
-    NajaInvokeExtension,
-    NajaCheckValidityExtension
+  NajaCoreExtension,
+  NajaInvokeExtension,
+  NajaCheckValidityExtension,
 } from '@newlogic-digital/naja-extensions'
 import { initCookieConsent } from '@newlogic-digital/cookieconsent-js'
 import { initStimulus } from './stimulus.js'
@@ -13,12 +13,12 @@ naja.registerExtension(NajaInvokeExtension())
 naja.registerExtension(NajaCheckValidityExtension())
 
 naja.snippetHandler.addEventListener('afterUpdate', ({ detail }) => {
-    initStimulus(detail.snippet)
-    initCookieConsent(detail.snippet)
+  initStimulus(detail.snippet)
+  initCookieConsent(detail.snippet)
 
-    useSwup.cache.clear()
+  useSwup.cache.clear()
 })
 
 naja.initialize({
-    history: 'replace'
+  history: 'replace',
 })

package/src/scripts/composables/stimulus.js

@@ -4,28 +4,28 @@ import stimulus from 'winduum-stimulus'
 import { initAfter } from '../utils/+.js'
 
 const initConfig = {
-    controllers: ['x-button', 'x-control', 'x-text', 'x-check', 'x-dialog'],
-    actions: [
-        ['.x-button', 'click->x-button#ripple'],
-        ['.x-check', 'change->x-form#validateField'],
-        ['.x-switch', 'change->x-form#validateField'],
-        ['[data-invoke-action]:not([data-naja], [data-action*="invoke#action"])', 'invoke#action']
-    ]
+  controllers: ['x-button', 'x-control', 'x-text', 'x-check', 'x-dialog'],
+  actions: [
+    ['.x-button', 'click->x-button#ripple'],
+    ['.x-check', 'change->x-form#validateField'],
+    ['.x-switch', 'change->x-form#validateField'],
+    ['[data-invoke-action]:not([data-naja], [data-action*="invoke#action"])', 'invoke#action'],
+  ],
 }
 
 const useStimulus = new Application(document.documentElement)
 
 const useController = (controller, target, application = useStimulus) =>
-    stimulus.useController(controller, target, application)
+  stimulus.useController(controller, target, application)
 
 const initStimulus = (element, { controllers, actions } = initConfig) =>
-    stimulus.initStimulus(element, { controllers, actions })
+  stimulus.initStimulus(element, { controllers, actions })
 
 useStimulus.start().then(() => initStimulus(document.body))
 useStimulus.register('invoke', class extends InvokeFetch {
-    onFetchComplete(element) {
-        initAfter(element)
-    }
+  onFetchComplete(element) {
+    initAfter(element)
+  }
 })
 
 export { useStimulus, useController, Controller, initStimulus, initConfig }

package/src/scripts/composables/swup.js

@@ -1,23 +1,23 @@
 import Swup from 'swup'
 import { SwupCorePlugin } from '@newlogic-digital/swup-plugins'
 import initAfter from '../utils/initAfter.js'
-import { useController } from 'winduum-stimulus'
+import { useController } from './stimulus.js'
 
 const useSwup = new Swup({
-    containers: ['.x-main', '.x-header', '.x-toaster'],
-    plugins: [new SwupCorePlugin()]
+  containers: ['.x-main', '.x-header', '.x-toaster'],
+  plugins: [new SwupCorePlugin()],
 })
 
 useSwup.hooks.on('animation:out:start', async () => {
-    useController('x-drawer', '.x-drawer').invoke('close')
-    useController('x-dialog', '.x-dialog').invoke('close')
-    useController('x-popover', '.x-popover:has([data-open])').invoke('hide')
+  useController('x-drawer', '.x-drawer').invoke('close')
+  useController('x-dialog', '.x-dialog').invoke('close')
+  useController('x-popover', '.x-popover:has([data-open])').invoke('hide')
 })
 
 useSwup.hooks.on('content:replace', () => {
-    useSwup.options.containers.forEach((selector) => {
-        initAfter(document.querySelector(selector))
-    })
+  useSwup.options.containers.forEach((selector) => {
+    initAfter(document.querySelector(selector))
+  })
 })
 
 export { useSwup }

package/src/scripts/main.js

@@ -1,3 +1,4 @@
+import './composables/naja.js'
 import './composables/stimulus.js'
 import './composables/swup.js'
 import './components/+.js'

package/src/scripts/utils/initAfter.js

@@ -4,8 +4,8 @@ import { initStimulus } from '../composables/stimulus.js'
 import { initNaja } from '@newlogic-digital/naja-extensions'
 
 export default function initAfter(element) {
-    initStimulus(element)
-    initNaja(element)
-    replaceScripts(element)
-    initCookieConsent(element)
+  initStimulus(element)
+  initNaja(element)
+  replaceScripts(element)
+  initCookieConsent(element)
 }

package/src/styles/base/+.css

@@ -2,3 +2,4 @@
 @import "./defaults.css";
 @import "./keyframes.css";
 @import "./transitions.css";
+@import "./variants.css";

package/src/styles/base/defaults.css

@@ -27,10 +27,16 @@
 }
 
 :where([type="number"]) {
-  -moz-appearance: textfield;
+  appearance: textfield;
 
   &::-webkit-outer-spin-button,
   &::-webkit-inner-spin-button {
-    -webkit-appearance: none;
+    appearance: none;
+  }
+}
+
+:where([type="search"]) {
+  &::-webkit-search-cancel-button {
+    appearance: none;
   }
 }

package/src/styles/base/transitions.css

@@ -1,6 +1,6 @@
 @import "winduum/src/base/transitions.css";
 
-.view-transition-main {
+@utility view-transition-main {
   html.swup-enabled & {
     transition: opacity var(--view-transition-main-duration);
     opacity: 1;

package/src/styles/base/variants.css

@@ -0,0 +1,11 @@
+@variant hocus {
+  @media (hover: hover) {
+    &:hover {
+      @slot;
+    }
+  }
+
+  &:focus-visible {
+    @slot;
+  }
+}

package/src/styles/components/(layout)/Header.css

@@ -1,11 +1,13 @@
-:root {
+@theme {
   --x-header-height: 4rem;
   --scroll-padding-top: calc(var(--x-header-height) + 1rem);
 }
 
-.x-header {
-  position: sticky;
-  top: 0;
-  z-index: var(--z-index-20);
-  height: var(--x-header-height);
+@layer utilities {
+  .x-header {
+    position: sticky;
+    top: 0;
+    z-index: var(--z-index-20);
+    height: var(--x-header-height);
+  }
 }

package/src/styles/components/(layout)/Main.css

@@ -1,20 +1,24 @@
-html {
-  scroll-padding-top: var(--scroll-padding-top);
+@layer base {
+  html {
+    scroll-padding-top: var(--scroll-padding-top);
 
-  @media (min-width: 60em) and (max-width: 75.9375rem) {
-    font-size: 87.5%;
+    @media (min-width: 60em) and (max-width: 75.9375rem) {
+      font-size: 87.5%;
+    }
   }
-}
 
-body {
-  background-color: var(--color-body);
-  display: flex;
-  flex-direction: column;
-  overflow-x: clip;
+  body {
+    background-color: var(--color-body);
+    display: flex;
+    flex-direction: column;
+    overflow-x: clip;
+  }
 }
 
-.x-main {
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
+@layer utilities {
+  .x-main {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+  }
 }

package/src/styles/components/(ui)/+.css

@@ -1,5 +1,6 @@
 @import "./Badge.css";
 @import "./Button.css";
+@import "./Carousel.css";
 @import "./Check.css";
 @import "./Compare.css";
 @import "./Control.css";
@@ -19,5 +20,6 @@
 @import "./Switch.css";
 @import "./Text.css";
 @import "./Title.css";
+@import "./Toast.css";
 @import "./Toaster.css";
 @import "./dialog/+.css";

package/src/styles/components/(ui)/Badge.css

@@ -1,8 +1,8 @@
-@import "winduum/src/components/badge/props/default.css";
-@import "winduum/src/components/badge/default.css";
-@import "winduum/src/components/badge/sm.css";
-@import "winduum/src/components/badge/lg.css";
-@import "winduum/src/components/badge/bordered.css";
-@import "winduum/src/components/badge/muted.css";
-@import "winduum/src/components/badge/square.css";
-@import "winduum/src/components/badge/circle.css";
+@import "winduum/src/components/badge/props/default.css" layer(theme);
+@import "winduum/src/components/badge/default.css" layer(utilities);
+@import "winduum/src/components/badge/sm.css" layer(utilities);
+@import "winduum/src/components/badge/lg.css" layer(utilities);
+@import "winduum/src/components/badge/bordered.css" layer(utilities);
+@import "winduum/src/components/badge/muted.css" layer(utilities);
+@import "winduum/src/components/badge/square.css" layer(utilities);
+@import "winduum/src/components/badge/circle.css" layer(utilities);

package/src/styles/components/(ui)/Button.css

@@ -1,12 +1,12 @@
-@import "winduum/src/components/button/props/default.css";
-@import "winduum/src/components/button/props/interactive.css";
-@import "winduum/src/components/button/default.css";
-@import "winduum/src/components/button/lg.css";
-@import "winduum/src/components/button/sm.css";
-@import "winduum/src/components/button/interactive.css";
-@import "winduum/src/components/button/bordered.css";
-@import "winduum/src/components/button/ghosted.css";
-@import "winduum/src/components/button/muted.css";
-@import "winduum/src/components/button/square.css";
-@import "winduum/src/components/button/circle.css";
-@import "winduum/src/components/button/spinner.css";
+@import "winduum/src/components/button/props/default.css" layer(theme);
+@import "winduum/src/components/button/props/interactive.css" layer(theme);
+@import "winduum/src/components/button/default.css" layer(utilities);
+@import "winduum/src/components/button/lg.css" layer(utilities);
+@import "winduum/src/components/button/sm.css" layer(utilities);
+@import "winduum/src/components/button/interactive.css" layer(utilities);
+@import "winduum/src/components/button/bordered.css" layer(utilities);
+@import "winduum/src/components/button/ghosted.css" layer(utilities);
+@import "winduum/src/components/button/muted.css" layer(utilities);
+@import "winduum/src/components/button/square.css" layer(utilities);
+@import "winduum/src/components/button/circle.css" layer(utilities);
+@import "winduum/src/components/button/spinner.css" layer(utilities);

package/src/styles/components/(ui)/Carousel.css

@@ -0,0 +1,2 @@
+@import "winduum/src/components/carousel/default.css" layer(utilities);
+@import "winduum/src/components/carousel/content.css" layer(utilities);

package/src/styles/components/(ui)/Check.css

@@ -1 +1,4 @@
-@import "winduum/src/components/check/index.css";
+@import "winduum/src/components/check/props/default.css" layer(theme);
+@import "winduum/src/components/check/default.css" layer(utilities);
+@import "winduum/src/components/check/interactive.css" layer(utilities);
+@import "winduum/src/components/check/invalid.css" layer(utilities);

package/src/styles/components/(ui)/Compare.css

@@ -1 +1 @@
-@import "winduum/src/components/compare/index.css";
+@import "winduum/src/components/compare/default.css" layer(utilities);

package/src/styles/components/(ui)/Control.css

@@ -1,29 +1,31 @@
-@import "winduum/src/components/control/props/default.css";
-@import "winduum/src/components/control/props/floating.css";
-@import "winduum/src/components/control/props/select.css";
-@import "winduum/src/components/control/props/icon.css";
-@import "winduum/src/components/control/default.css";
-@import "winduum/src/components/control/interactive.css";
-@import "winduum/src/components/control/file.css";
-@import "winduum/src/components/control/select.css";
-@import "winduum/src/components/control/icon.css";
-@import "winduum/src/components/control/floating.css";
-@import "winduum/src/components/control/invalid.css";
+@import "winduum/src/components/control/props/default.css" layer(theme);
+@import "winduum/src/components/control/props/floating.css" layer(theme);
+@import "winduum/src/components/control/props/select.css" layer(theme);
+@import "winduum/src/components/control/props/icon.css" layer(theme);
+@import "winduum/src/components/control/default.css" layer(utilities);
+@import "winduum/src/components/control/interactive.css" layer(utilities);
+@import "winduum/src/components/control/file.css" layer(utilities);
+@import "winduum/src/components/control/select.css" layer(utilities);
+@import "winduum/src/components/control/icon.css" layer(utilities);
+@import "winduum/src/components/control/floating.css" layer(utilities);
+@import "winduum/src/components/control/invalid.css" layer(utilities);
 
-.x-control {
-  &[data-active] label,
-  :where(input, textarea):is(:focus, [placeholder]) ~ label,
-  :where(select):is([data-placeholder]) ~ label {
-    transform: translateY(calc(var(--x-control-label-translate-y) * -1)) scale(var(--x-control-label-scale));
-    opacity: var(--x-control-label-focus-opacity, 0.5);
-  }
+@layer utilities {
+  .x-control {
+    &[data-active] label,
+    :where(input, textarea):is(:focus, [placeholder]) ~ label,
+    :where(select):is([data-placeholder]) ~ label {
+      transform: translateY(calc(var(--x-control-label-translate-y) * -1)) scale(var(--x-control-label-scale));
+      opacity: var(--x-control-label-focus-opacity, 0.5);
+    }
 
-  &:has(label):not([data-active]) select:not([data-placeholder]) {
-    font-size: 0;
-    height: inherit;
+    &:has(label):not([data-active]) select:not([data-placeholder]) {
+      font-size: 0;
+      height: inherit;
 
-    & option {
-      font-size: var(--x-control-font-size);
+      & option {
+        font-size: var(--x-control-font-size);
+      }
     }
   }
 }

package/src/styles/components/(ui)/ControlSelect.css

@@ -1 +1 @@
-@import "@newlogic-digital/stimulus-components/src/control-select/index.css";
+@import "@newlogic-digital/stimulus-components/src/control-select/index.css" layer(utilities);

package/src/styles/components/(ui)/Drawer.css

@@ -1,14 +1,16 @@
-@import "winduum/src/components/drawer/props/default.css";
-@import "winduum/src/components/drawer/props/content.css";
-@import "winduum/src/components/drawer/default.css";
-@import "winduum/src/components/drawer/content.css";
+@import "winduum/src/components/drawer/props/default.css" layer(theme);
+@import "winduum/src/components/drawer/props/content.css" layer(theme);
+@import "winduum/src/components/drawer/default.css" layer(utilities);
+@import "winduum/src/components/drawer/content.css" layer(utilities);
 
-.x-drawer {
-  --x-drawer-content-inline-size: min(calc(100vw - 2rem), 22rem);
-  --x-drawer-content-block-size: 100dvh;
-}
+@layer utilities {
+  .x-drawer {
+    --x-drawer-content-inline-size: min(calc(100vw - 2rem), 22rem);
+    --x-drawer-content-block-size: 100dvh;
+  }
 
-.x-drawer-content {
-  overflow-y: auto;
-  overscroll-behavior: contain;
+  .x-drawer-content {
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
 }

package/src/styles/components/(ui)/Field.css

@@ -1 +1 @@
-@import "winduum/src/components/field/index.css";
+@import "winduum/src/components/field/default.css" layer(utilities);

package/src/styles/components/(ui)/Group.css

@@ -1 +1,2 @@
-@import "winduum/src/components/group/index.css";
+@import "winduum/src/components/group/default.css" layer(utilities);
+@import "winduum/src/components/group/vertical.css" layer(utilities);

package/src/styles/components/(ui)/Heading.css

@@ -1,4 +1,14 @@
-@import "winduum/src/components/heading/props/default.css";
-@import "winduum/src/components/heading/default.css";
-@import "winduum/src/components/heading/sm.css";
-@import "winduum/src/components/heading/lg.css";
+@import "winduum/src/components/heading/props/default.css" layer(theme);
+@import "winduum/src/components/heading/default.css" layer(utilities);
+
+@utility sm {
+  .x-heading:is(&) {
+    --x-heading-font-size: var(--text-lg);
+  }
+}
+
+@utility lg {
+  .x-heading:is(&) {
+    --x-heading-font-size: var(--text-3xl);
+  }
+}

package/src/styles/components/(ui)/Image.css

@@ -1 +1,2 @@
-@import "winduum/src/components/image/index.css";
+@import "winduum/src/components/image/default.css" layer(utilities);
+@import "winduum/src/components/image/avatar.css" layer(utilities);

package/src/styles/components/(ui)/Info.css

@@ -1 +1,2 @@
-@import "winduum/src/components/info/index.css";
+@import "winduum/src/components/info/props/default.css" layer(theme);
+@import "winduum/src/components/info/default.css" layer(utilities);

package/src/styles/components/(ui)/Label.css

@@ -1 +1,2 @@
-@import "winduum/src/components/label/index.css";
+@import "winduum/src/components/label/props/default.css" layer(theme);
+@import "winduum/src/components/label/default.css" layer(utilities);

package/src/styles/components/(ui)/Link.css

@@ -1,2 +1,2 @@
-@import "winduum/src/components/link/default.css";
-@import "winduum/src/components/link/interactive.css";
+@import "winduum/src/components/link/default.css" layer(utilities);
+@import "winduum/src/components/link/interactive.css" layer(utilities);

package/src/styles/components/(ui)/Notice.css

@@ -1 +1,2 @@
-@import "winduum/src/components/notice/index.css";
+@import "winduum/src/components/notice/props/default.css" layer(theme);
+@import "winduum/src/components/notice/default.css" layer(utilities);

package/src/styles/components/(ui)/Popover.css

@@ -1 +1,13 @@
-@import "winduum/src/components/popover/index.css";
+@import "winduum/src/components/popover/props/content.css" layer(theme);
+@import "winduum/src/components/popover/default.css" layer(utilities);
+@import "winduum/src/components/popover/content.css" layer(utilities);
+
+@utility closed {
+  .x-popover-content:is(&) {
+    --tw-scale-x: var(--x-popover-content-scale-x);
+    --tw-scale-y: var(--x-popover-content-scale-y);
+
+    opacity: 0;
+    visibility: hidden;
+  }
+}

package/src/styles/components/(ui)/Progress.css

@@ -1 +1,6 @@
-@import "winduum/src/components/progress/index.css";
+@import "winduum/src/components/progress/props/default.css" layer(theme);
+@import "winduum/src/components/progress/keyframes/default.css";
+@import "winduum/src/components/progress/default.css" layer(utilities);
+@import "winduum/src/components/progress/meter.css" layer(utilities);
+@import "winduum/src/components/progress/sm.css" layer(utilities);
+@import "winduum/src/components/progress/lg.css" layer(utilities);

package/src/styles/components/(ui)/Range.css

@@ -1 +1,4 @@
-@import "winduum/src/components/range/index.css";
+@import "winduum/src/components/range/props/default.css" layer(theme);
+@import "winduum/src/components/range/default.css" layer(utilities);
+@import "winduum/src/components/range/multi.css" layer(utilities);
+@import "winduum/src/components/range/vertical.css" layer(utilities);

package/src/styles/components/(ui)/Switch.css

@@ -1 +1,4 @@
-@import "winduum/src/components/switch/index.css";
+@import "winduum/src/components/switch/props/default.css" layer(theme);
+@import "winduum/src/components/switch/default.css" layer(utilities);
+@import "winduum/src/components/switch/interactive.css" layer(utilities);
+@import "winduum/src/components/switch/invalid.css" layer(utilities);

package/src/styles/components/(ui)/Text.css

@@ -1 +1,2 @@
-@import "winduum/src/components/text/index.css";
+@import "winduum/src/components/text/props/default.css" layer(theme);
+@import "winduum/src/components/text/default.css" layer(utilities);

package/src/styles/components/(ui)/Title.css

@@ -1,4 +1,14 @@
-@import "winduum/src/components/title/props/default.css";
-@import "winduum/src/components/title/default.css";
-@import "winduum/src/components/title/sm.css";
-@import "winduum/src/components/title/lg.css";
+@import "winduum/src/components/title/props/default.css" layer(theme);
+@import "winduum/src/components/title/default.css" layer(utilities);
+
+@utility sm {
+  .x-title:is(&) {
+    --x-title-font-size: var(--text-xs);
+  }
+}
+
+@utility lg {
+  .x-title:is(&) {
+    --x-title-font-size: var(--text-base);
+  }
+}

package/src/styles/components/(ui)/Toast.css

@@ -0,0 +1,4 @@
+@import "winduum/src/components/toast/props/default.css" layer(theme);
+@import "winduum/src/components/toast/props/content.css" layer(theme);
+@import "winduum/src/components/toast/default.css" layer(utilities);
+@import "winduum/src/components/toast/content.css" layer(utilities);

package/src/styles/components/(ui)/Toaster.css

@@ -1,2 +1,2 @@
-@import "winduum/src/components/toaster/index.css";
-@import "winduum/src/components/toast/index.css";
+@import "winduum/src/components/toaster/props/default.css" layer(theme);
+@import "winduum/src/components/toaster/default.css" layer(utilities);

package/src/styles/components/(ui)/dialog/Dialog.css

@@ -1,2 +1,2 @@
-@import "winduum/src/components/dialog/props/default.css";
-@import "winduum/src/components/dialog/default.css";
+@import "winduum/src/components/dialog/props/default.css" layer(theme);
+@import "winduum/src/components/dialog/default.css" layer(utilities);

package/src/styles/components/(ui)/dialog/DialogContent.css

@@ -1,2 +1,2 @@
-@import "winduum/src/components/dialog/props/content.css";
-@import "winduum/src/components/dialog/content.css";
+@import "winduum/src/components/dialog/props/content.css" layer(theme);
+@import "winduum/src/components/dialog/content.css" layer(utilities);

package/src/styles/components/cookieconsent/CookieConsentDialog.css

@@ -1,16 +1,18 @@
-.x-cookieconsent-dialog {
-  .x-dialog-content {
-    max-width: 32rem;
-  }
-
-  &.center {
+@layer utilities {
+  .x-cookieconsent-dialog {
     .x-dialog-content {
-      max-width: 26rem;
-      text-align: center;
+      max-width: 32rem;
+    }
+
+    &.center {
+      .x-dialog-content {
+        max-width: 26rem;
+        text-align: center;
 
-      & .x-image {
-        margin-left: auto;
-        margin-right: auto;
+        & .x-image {
+          margin-left: auto;
+          margin-right: auto;
+        }
       }
     }
   }

package/src/styles/emails/base/defaults.css

@@ -11,7 +11,8 @@ img {
 a {
   transition: color 0.15s;
 
-  &, img {
+  &,
+  img {
     text-decoration: none;
     color: var(--color-main);
   }

package/src/styles/emails/components/Button.css

@@ -9,7 +9,8 @@
     font-size: 14px;
     font-weight: 700;
 
-    &, span {
+    &,
+    span {
       text-decoration: none;
       color: var(--color-primary-foreground);
     }

package/src/styles/emails/components/Heading.css

@@ -3,5 +3,5 @@
   line-height: 28px;
   font-weight: 700;
   mso-line-height-rule: exactly;
-  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: var(--default-font-family);
 }

package/src/styles/emails/components/Main.css

@@ -1,5 +1,5 @@
 .x-main {
-  font-family: Roboto, Tahoma, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: var(--default-font-family);
   background-color: var(--color-body);
   color: var(--color-main);
   color-scheme: light;

package/src/styles/emails/components/Text.css

@@ -3,7 +3,8 @@
   line-height: 24px;
   mso-line-height-rule: exactly;
 
-  b, strong {
+  b,
+  strong {
     font-weight: 700;
   }
 

package/src/styles/emails/main.css

@@ -1,9 +1,8 @@
-@import "tailwindcss/base.css";
-@import "tailwindcss/components.css";
-@import "tailwindcss/utilities.css";
-@import "tailwindcss/variants.css";
+@import "tailwindcss/utilities" source(none);
 @import "./base/+.css";
 @import "./theme/config.css";
 @import "./theme/default.css";
 @import "./components/+.css";
 @import "./utils/+.css";
+
+@source "../../templates/emails";

package/src/styles/emails/theme/config.css

@@ -1,4 +1,15 @@
-:root {
+@theme {
+  --default-font-family:
+    "Roboto",
+    -apple-system,
+    "BlinkMacSystemFont",
+    "Segoe UI",
+    "Helvetica",
+    "Arial",
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol";
   --spacing-container: 24px;
   --radius: 12px;
   --container: 600px;

package/src/styles/emails/theme/default.css

@@ -1,4 +1,4 @@
-:root {
+@theme {
   --color-primary: #83cd4f;
   --color-primary-hover: #73b346;
   --color-primary-foreground: #000;

package/src/styles/emails/utils/common.css

@@ -1,4 +1,4 @@
-.container {
+@utility container {
   min-width: var(--container);
   width: var(--container);
 
@@ -8,22 +8,22 @@
   }
 }
 
-.underline {
+@utility underline {
   text-decoration: underline;
 }
 
-.border-r {
+@utility border-r {
   border-right: 1px solid;
 }
 
-.border-l {
+@utility border-l {
   border-left: 1px solid;
 }
 
-.border-b {
+@utility border-b {
   border-bottom: 1px solid;
 }
 
-.border-t {
+@utility border-t {
   border-top: 1px solid;
 }

package/src/styles/main.css

@@ -1,10 +1,17 @@
-@import "winduum/src/base/reset.css";
-@import "tailwindcss/base.css";
-@import "winduum/tailwindcss/base/defaults.css";
-@import "./base/+.css";
-@import "./theme/main.css";
-@import "./components/+.css" layer(components);
-@import "./utils/+.css" layer(components);
-@import "tailwindcss/components.css";
-@import "tailwindcss/utilities.css";
-@import "tailwindcss/variants.css";
+@import "tailwindcss/theme.css" layer(theme);
+@import "winduum/tailwindcss/theme/config/index.css" layer(theme);
+@import "./theme/main.css" layer(theme);
+@import "winduum/src/base/reset.css" layer(base);
+@import "./base/defaults.css" layer(base);
+@import "./components/+.css";
+@import "./utils/+.css";
+@import "tailwindcss/utilities" layer(utilities);
+@import "winduum/tailwindcss/variants/dark.css";
+@import "./base/breakpoints.css";
+@import "./base/keyframes.css";
+@import "./base/transitions.css";
+@import "./base/variants.css";
+
+@source "../../node_modules/winduum/src";
+@source not "../templates/emails";
+@source not "../views/emails";

package/src/styles/theme/dark.css

@@ -1,4 +1,5 @@
-:root.dark, :host.dark {
+:root.dark,
+:host.dark {
   --default-color-scheme: dark;
   --color-main: #c9d1d9;
   --color-body: #0e1116;

package/src/styles/theme/main.css

@@ -1,12 +1,6 @@
-@import "winduum/src/theme/config/font.css";
-@import "winduum/src/theme/config/mask.css";
-@import "winduum/src/theme/config/radius.css";
-@import "winduum/src/theme/config/spacing.css";
-@import "winduum/src/theme/config/transition.css";
-@import "winduum/src/theme/config/z.css";
 @import "./dark.css";
 
-:root, :host {
+@theme {
   --default-font-family: "Poppins", sans-serif;
   --default-color-space: srgb;
   --default-color-scheme: inherit;
@@ -32,4 +26,5 @@
   --color-error: #dc2626;
   --color-warning: #eab308;
   --color-info: #0ea5e9;
+  --container-width: 80rem;
 }

package/src/styles/utils/+.css

@@ -1,4 +1,3 @@
-@import "./container.css";
 @import "./index.css";
 @import "./reveal.css";
 @import "./scrollbar.css";

package/src/styles/utils/index.css

@@ -1,8 +1,5 @@
-@import "winduum/src/utilities/animation.css";
-@import "winduum/src/utilities/ripple/index.css";
-@import "winduum/src/utilities/skeleton/index.css";
-@import "winduum/src/utilities/underline.css";
-@import "winduum/src/utilities/swap/index.css";
-@import "winduum/src/utilities/spinner/default.css";
-@import "winduum/src/utilities/dot.css";
-@import "./+.css";
+@import "winduum/src/utilities/container/props/default.css" layer(theme);
+@import "winduum/src/utilities/ripple/keyframes/default.css";
+@import "winduum/src/utilities/skeleton/props/default.css" layer(theme);
+@import "winduum/src/utilities/spinner/keyframes/ring.css";
+@import "winduum/tailwindcss/utilities/index.css";

package/src/styles/utils/reveal.css

@@ -1,22 +1,21 @@
-.reveal {
+@utility reveal {
   opacity: 0;
   transition-property: var(--default-transition-property);
   transition-timing-function: var(--ease-in-out);
   transition-duration: 0.75s;
   will-change: transform;
 
-  @media (prefers-reduced-motion) {
+  @media (prefers-reduced-motion), (scripting: none), print {
     opacity: 1;
-    transform: none;
+    scale: none;
+    translate: none;
+    rotate: none;
   }
 
-  @media print {
+  &:is([data-in]) {
     opacity: 1;
-    transform: none;
-  }
-
-  &:is([data-in]), .no-js & {
-    opacity: 1;
-    transform: none;
+    scale: none;
+    translate: none;
+    rotate: none;
   }
 }

package/src/styles/utils/scrollbar.css

@@ -1,4 +1,4 @@
-.no-scrollbar {
+@utility no-scrollbar {
   scrollbar-width: none;
 
   &::-webkit-scrollbar {
@@ -6,7 +6,7 @@
   }
 }
 
-.scrollbar {
+@utility scrollbar {
   scrollbar-width: thin;
   scrollbar-color: var(--color-primary) var(--color-body-primary);
   overscroll-behavior: contain;

package/src/templates/components/(example)/PopoverAutocomplete.latte

@@ -0,0 +1,27 @@
+<div class="x-popover trigger-focus group mx-auto w-80" data-controller="x-popover">
+    <div class="x-control w-full">
+        <input
+            data-action="input->x-popover#autocomplete"
+            data-x-popover-target="autocomplete"
+            type="search"
+            placeholder="Vyhledávání ..."
+            autocomplete="off"
+            role="combobox"
+            aria-autocomplete="list"
+            aria-controls="popoverContent"
+            aria-haspopup="listbox"
+            aria-expanded="true"
+            value="Volba"
+        >
+    </div>
+    <div
+        class="x-popover-content center flex flex-col shadow dark:bg-body-secondary mt-2 p-2 gap-2 w-full empty:closed group-not-has-aria-expanded:closed"
+        data-x-popover-target="content"
+        role="listbox"
+        id="popoverContent"
+    >
+        <button id="option-1" class="x-button ghosted justify-start" role="option" data-action="click->x-popover#selectDescendant">Volba 1</button>
+        <button id="option-2" class="x-button ghosted justify-start" role="option" data-action="click->x-popover#selectDescendant">Volba 2</button>
+        <button id="option-3" class="x-button ghosted justify-start" role="option" data-action="click->x-popover#selectDescendant">Volba 3</button>
+    </div>
+</div>

package/src/templates/components/Example.latte

@@ -1,15 +1,15 @@
 <div class="grid grid-cols-container">
     <div class="p-4 bg-body-secondary rounded w-full max-w-xl mx-auto">
-        <h1 class="x-heading mb-4">Hello world!</h1>
+        <h1 class="x-heading lg mb-4">Hello world!</h1>
         <div class="x-text mb-4">Want to dig deeper into Newlogic UI?</div>
 
         <a href="https://ui.newlogic.cz/" class="x-link underline">Read the docs &rarr;</a>
     </div>
     <div class="flex justify-center mt-4">
         <button
-                class="x-button"
-                data-invoke-action="x-dialog#show"
-                data-invoke-url="/dialog/basic.json"
+            class="x-button"
+            data-invoke-action="x-dialog#show"
+            data-invoke-url="/dialog/basic.json"
         >
             Dialog Fetch Example
         </button>

package/src/templates/emails/layouts/default.latte

@@ -16,9 +16,18 @@
         <meta name="supported-color-schemes" content="light dark">
     {/if}
 
-    <style type="text/css" n:syntax="off">
-      @import '/src/styles/emails/main.css';
-    </style>
+    <link rel="stylesheet" href="/src/styles/emails/main.css">
+
+    <script type="module" n:if="VITE_SERVER">
+        if (import.meta.hot && window.location.search === '?send') {
+            import.meta.hot.send('my:send', {
+                filename: window.location.href,
+                content:
+                    new XMLSerializer().serializeToString(document.doctype) +
+                    document.documentElement.outerHTML.replace(/<script\b[^>]*>[\s\S]*?<\/script>/gi, "")
+            })
+        }
+    </script>
 </head>
 <body>
     <table class="x-main w-full" align="center">

package/src/templates/layouts/default.latte

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="no-js" lang="en">
+<html lang="en">
     <head>
         <meta charset="utf-8">
         <title>{$title}</title>
@@ -40,12 +40,12 @@
 
         <script>
             (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) && document.documentElement.classList.add('dark')
-            document.documentElement.classList.remove('no-js')
         </script>
 
         <script src="{$assets->js->main|asset}" type="module"></script>
 
         <link rel="icon" type="image/svg+xml" href="/favicons/favicon.svg">
+        <link rel="icon" type="image/webp" href="/favicons/favicon-512.webp">
         <link rel="apple-touch-icon" type="image/webp" href="/favicons/favicon-512.webp">
         <link rel="manifest" href="/favicons/manifest.webmanifest">
     </head>

package/vite.config.js

@@ -3,6 +3,10 @@ import core from '@newlogic-digital/core'
 
 export default defineConfig({
     plugins: [
-        core()
+        core({
+            css: {
+                transformer: 'lightningcss'
+            }
+        })
     ]
 })

package/src/styles/emails/+.css

@@ -1,5 +0,0 @@
-@import "./base/+.css";
-@import "./components/+.css";
-@import "./main.css";
-@import "./theme/+.css";
-@import "./utils/+.css";

package/src/styles/utils/container.css

@@ -1,5 +0,0 @@
-@import "winduum/src/utilities/container/index.css";
-
-:root, :host {
-  --container-width: 80rem;
-}