feat(version): 3.6.2

CHANGELOG

@@ -1,3 +1,6 @@
+v3.6.2
+* feat: update winduum v0.7.0
+
 v3.6.1
 * feat: update winduum v0.6.0
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newlogic-digital/ui",
-  "version": "3.6.0",
+  "version": "3.6.2",
   "type": "module",
   "main": "vite.config.js",
   "author": "New Logic Studio s.r.o.",
@@ -28,17 +28,17 @@
     "air-datepicker": "^3.4.0",
     "css-has-pseudo": "^6.0.1",
     "naja": "^2.6.1",
-    "swup": "^4.5.0",
+    "swup": "^4.5.2",
     "tippy.js": "^6.3.7",
-    "winduum": "^0.6.0-next.10"
+    "winduum": "^0.7.1"
   },
   "devDependencies": {
     "@newlogic-digital/core": "^2.1.1",
     "@stylistic/stylelint-config": "^1.0.1",
     "@tailwindcss/container-queries": "^0.1.1",
     "@types/grecaptcha": "^3.0.7",
     "eslint-config-standard": "^17.1.0",
-    "npm-check-updates": "^16.14.12",
+    "npm-check-updates": "^16.14.14",
     "postcss-custom-selectors": "^7.1.6",
     "stylelint-config-standard": "^36.0.0"
   },

src/scripts/Libraries/Dialog.js

@@ -1,5 +1,5 @@
 import { Controller, LibStimulus, loadStimulus } from './Stimulus.js'
-import { insertDialog, closeDialog, fetchDialog, dialogSelector } from 'winduum/src/components/dialog.js'
+import { insertDialog, closeDialog, fetchDialog, dialogSelector } from 'winduum/src/components/dialog/index.js'
 import { replaceScript } from '../Utils/Functions/+.js'
 
 LibStimulus.register('lib-dialog', class extends Controller {

src/scripts/Libraries/Ripple.js

@@ -1,5 +1,5 @@
 import { Controller, LibStimulus } from './Stimulus.js'
-import { showRipple } from 'winduum/src/utilities/ripple.js'
+import { showRipple } from 'winduum/src/utilities/ripple/index.js'
 
 LibStimulus.register('lib-ripple', class extends Controller {
     async show (e) {

src/scripts/Libraries/Swup.js

@@ -1,4 +1,4 @@
-import { closeDialog } from 'winduum/src/components/dialog.js'
+import { closeDialog } from 'winduum/src/components/dialog/index.js'
 import { hideTippy } from './Tippy.js'
 import { getController, loadStimulus } from './Stimulus.js'
 import LibCookieConsent from './CookieConsent.js'

src/scripts/Ui/Control.js

@@ -121,7 +121,7 @@ LibStimulus.register('ui-control', class extends Controller {
             input.setAttribute('maxlength', '9')
             input.setAttribute('pattern', '^#?([a-fA-F0-9]{8}|[a-fA-F0-9]{6}|[a-fA-F0-9]{3})$')
 
-            this.element.insertAdjacentHTML('afterbegin', '<div class="start"><div class="color"></div></div>')
+            this.element.insertAdjacentHTML('afterbegin', '<div class="me-auto"><div class="color"></div></div>')
 
             const pickr = new Pickr({
                 el: input,
@@ -156,11 +156,11 @@ LibStimulus.register('ui-control', class extends Controller {
 
     typeNumber () {
         if (this.element.querySelector('[type="number"]') && !this.hasNumberTarget) {
-            if (!this.element.querySelector('.end')) {
-                this.element.insertAdjacentHTML('beforeend', '<div class="end"></div>')
+            if (!this.element.querySelector('.ms-auto')) {
+                this.element.insertAdjacentHTML('beforeend', '<div class="ms-auto"></div>')
             }
 
-            this.element.querySelector('.end').insertAdjacentHTML('beforeend', `
+            this.element.querySelector('.ms-auto').insertAdjacentHTML('beforeend', `
                 <div class="flex flex-col gap-0 justify-center -space-y-1 -me-0.5" data-ui-control-target="number">
                     <button class="focus-visible:text-accent" type="button" data-action="click->ui-control#stepUp">
                         <svg class="size-4"><use href="#icon-angle-up-solid"></use></svg>

src/scripts/Utils/Functions/inputValidity.js

@@ -37,11 +37,11 @@ export default function inputValidity (element, options = {}) {
                 }
 
                 if (element.closest(iconElements) && element.querySelector('[class^="icon"] [class*="valid"]') === null) {
-                    if (!element.querySelector('.end')) {
-                        element.insertAdjacentHTML('beforeend', '<div class="end"></div>')
+                    if (!element.querySelector('.ms-auto')) {
+                        element.insertAdjacentHTML('beforeend', '<div class="ms-auto"></div>')
                     }
 
-                    element.querySelector('.end').insertAdjacentHTML('afterbegin', `
+                    element.querySelector('.ms-auto').insertAdjacentHTML('afterbegin', `
                         <div class="invalid lib-hint-top" tabindex="0" aria-label="${validationMessage}">
                             <svg class="text-error"><use href="#icon-exclamation-circle"></use></svg>
                         </div>

src/styles/Components/Dialog/Content.css

@@ -1,4 +1,5 @@
 @import "winduum/src/components/dialog/content.css";
+@import "winduum/src/components/dialog/content-props.css";
 
 .c-dialog-content {
   --c-dialog-py: 1.5rem;

src/styles/Components/Field.css

@@ -1 +1 @@
-@import "winduum/src/components/field.css";
+@import "winduum/src/components/field/index.css";

src/styles/Layout/Header.css

@@ -4,16 +4,14 @@
 }
 
 #l-header {
-  --color-current: var(--color-light);
-
   z-index: var(--z-20);
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   padding-inline: 2rem calc(2rem + var(--lib-dialog-scrollbar-width, 0rem));
   background-color: var(--color-dark);
-  color: var(--color-current);
+  color: var(--color-light);
 
   .dark & {
     background-color: var(--color-body-secondary);

src/styles/Libraries/Hint.css

@@ -1,6 +1,5 @@
 [class*="lib-hint-"] {
   --color-accent: var(--color-body);
-  --color-current: var(--color-body-fg);
   --lib-hint-font-size: 0.75rem;
   --lib-hint-font-weight: var(--font-normal);
 
@@ -29,7 +28,7 @@
   &::after {
     border-radius: var(--rounded);
     background-color: var(--color-accent);
-    color: var(--color-current);
+    color: currentcolor;
     padding: 0.75rem;
     font-size: var(--lib-hint-font-size);
     font-family: inherit;

src/styles/Ui/Btn.css

@@ -1,9 +1,11 @@
 @import "winduum/src/ui/btn/default.css";
 @import "winduum/src/ui/btn/default-props.css";
 @import "winduum/src/ui/btn/interactive.css";
+@import "winduum/src/ui/btn/interactive-props.css";
 @import "winduum/src/ui/btn/sm.css";
 @import "winduum/src/ui/btn/lg.css";
 @import "winduum/src/ui/btn/loading.css";
+@import "winduum/src/ui/btn/loading-props.css";
 @import "winduum/src/ui/btn/wide.css";
 @import "winduum/src/ui/btn/bordered.css";
 @import "winduum/src/ui/btn/ghosted.css";

src/styles/Ui/Check.css

@@ -1 +1 @@
-@import "winduum/src/ui/check.css";
+@import "winduum/src/ui/check/index.css";

src/styles/Ui/Control.css

@@ -1,12 +1,15 @@
 @import "winduum/src/ui/control/default.css";
 @import "winduum/src/ui/control/default-props.css";
+@import "winduum/src/ui/control/interactive.css";
+@import "winduum/src/ui/control/interactive-props.css";
 @import "winduum/src/ui/control/file.css";
 @import "winduum/src/ui/control/select.css";
 @import "winduum/src/ui/control/select-props.css";
 @import "winduum/src/ui/control/icon.css";
 @import "winduum/src/ui/control/icon-props.css";
 @import "winduum/src/ui/control/floating.css";
 @import "winduum/src/ui/control/floating-props.css";
+@import "winduum/src/ui/control/invalid.css";
 
 .ui-control {
   --ui-control-font-size: var(--text-sm);

src/styles/Ui/ControlSelect.css

@@ -16,7 +16,7 @@
     inset-inline: 0;
     top: 100%;
     margin-top: 0.5rem;
-    border: 1px solid color-mix(in srgb, var(--color-current) 10%, transparent);
+    border: 1px solid color-mix(in srgb, currentcolor 10%, transparent);
     transform: scaleY(0);
     opacity: 0;
     transition: var(--transition-opacity), var(--transition-transform);
@@ -29,7 +29,7 @@
     overflow-y: auto;
     box-shadow: 0 0.15em 1.5em 0 color-mix(in srgb, var(--color-dark) 5%, transparent), 0 0 1em 0 color-mix(in srgb, var(--color-dark) 5%, transparent);
     padding: 0.375rem;
-    color: var(--color-current);
+    color: currentcolor;
     cursor: default;
 
     & [data-option] {

src/styles/Ui/Group.css

@@ -1 +1 @@
-@import "winduum/src/ui/group.css";
+@import "winduum/src/ui/group/index.css";

src/styles/Ui/Heading.css

@@ -1,3 +1,4 @@
 @import "winduum/src/ui/heading/default.css";
+@import "winduum/src/ui/heading/default-props.css";
 @import "winduum/src/ui/heading/sm.css";
 @import "winduum/src/ui/heading/lg.css";

src/styles/Ui/Image.css

@@ -1 +1 @@
-@import "winduum/src/ui/image.css";
+@import "winduum/src/ui/image/index.css";

src/styles/Ui/Info.css

@@ -1 +1 @@
-@import "winduum/src/ui/info.css";
+@import "winduum/src/ui/info/index.css";

src/styles/Ui/Label.css

@@ -1 +1 @@
-@import "winduum/src/ui/label.css";
+@import "winduum/src/ui/label/index.css";

src/styles/Ui/Notice.css

@@ -1,4 +1,4 @@
-@import "winduum/src/ui/notice.css";
+@import "winduum/src/ui/notice/index.css";
 
 .ui-notice {
   align-items: flex-start;

src/styles/Ui/Progress.css

@@ -1 +1 @@
-@import "winduum/src/ui/progress.css";
+@import "winduum/src/ui/progress/index.css";

src/styles/Ui/Switch.css

@@ -1 +1 @@
-@import "winduum/src/ui/switch.css";
+@import "winduum/src/ui/switch/index.css";

src/styles/Ui/Text.css

@@ -1,4 +1,4 @@
-@import "winduum/src/ui/text.css";
+@import "winduum/src/ui/text/index.css";
 
 .ui-text {
   .c_text_table {

src/styles/Ui/Title.css

@@ -1,3 +1,4 @@
 @import "winduum/src/ui/title/default.css";
+@import "winduum/src/ui/title/default-props.css";
 @import "winduum/src/ui/title/sm.css";
 @import "winduum/src/ui/title/lg.css";

src/styles/Utils/theme/main.css

@@ -8,7 +8,6 @@
   --color-main-rgb: 17 19 21;
   --color-dark-rgb: 17 19 21;
   --color-accent-rgb: var(--color-primary-rgb);
-  --color-current-rgb: var(--color-main-rgb);
   --color-body-secondary-foreground: var(--color-main);
 
   &.dark {

src/styles/main.css

@@ -14,6 +14,5 @@
 @import "./Utils/tailwind.css";
 @import "tailwindcss/base.css";
 @import "tailwindcss/components.css";
-@import "winduum/src/main-rgb.css" supports(not (color: color-mix(in srgb, red 0%, red)));
 @import "tailwindcss/utilities.css";
 @import "tailwindcss/variants.css";

src/templates/Sections/Site.latte

@@ -53,7 +53,7 @@
             <div class="c-field">
                 {embed UiControl}
                     <input n:block=body type="number" min="0" step="1" max="99" required>
-                    <div n:block=iconr class="end">
+                    <div n:block=iconr class="ms-auto">
                         <div>Kč</div>
                     </div>
                 {/embed}

src/templates/Sections/Ui/Docs/Default.latte

@@ -207,7 +207,7 @@
                                     <option value="3">Option 3</option>
                                 </select>
                                 <label>With icon</label>
-                                <svg class="start">
+                                <svg class="me-auto">
                                     <use href="#icon-at-symbol"></use>
                                 </svg>
                             </div>
@@ -264,7 +264,7 @@
                             <div class="ui-control">
                                 <input type="text" required placeholder="Please fill">
                                 <label>Amount</label>
-                                <span class="end">Kč</span>
+                                <span class="ms-auto">Kč</span>
                             </div>
                         {/capture}{$code|code('html', true)|noescape}
                         {capture $code}
@@ -299,7 +299,7 @@
                             <div class="ui-control">
                                 <input type="datetime-local">
                                 <label>Select date and time</label>
-                                <div class="end">
+                                <div class="ms-auto">
                                     <svg data-action="click->ui-control#showDatepicker">
                                         <use href="#icon-calendar"></use>
                                     </svg>
@@ -315,15 +315,15 @@
                         {capture $code}
                             <div class="ui-control w-28">
                                 <input type="number" placeholder="" value="1" min="1" max="99" step="1">
-                                <div class="end">
+                                <div class="ms-auto">
                                     <div>Kč</div>
                                 </div>
                             </div>
                         {/capture}{$code|code('html', true)|noescape}
                         {capture $code}
                             <div class="ui-control">
                                 <input type="time" placeholder="Select time">
-                                <div class="end">
+                                <div class="ms-auto">
                                     <svg data-action="click->ui-control#showPicker">
                                         <use href="#icon-clock"></use>
                                     </svg>
@@ -415,7 +415,7 @@
                             </div>
                         {/capture}{$code|code('html', true)|noescape}
                         {capture $code}
-                            <div class="ui-notice accent-error">
+                            <div class="ui-notice accent-error flex-col gap-4">
                                 Error notice
                                 <hr>
                                 <button class="ui-btn">
@@ -424,7 +424,7 @@
                             </div>
                         {/capture}{$code|code('html', true)|noescape}
                         {capture $code}
-                            <div class="ui-notice accent-success">
+                            <div class="ui-notice accent-success flex-col gap-4">
                                 <div class="ui-text">
                                     <h4>Nicely done!</h4>
                                     <p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>. Nullam in elit iaculis, tristique nisi ut, mollis tellus. Nunc venenatis elit vel placerat commodo. Vestibulum odio neque, hendrerit nec venenatis at, tincidunt ut magna. Etiam hendrerit ultrices pharetra.</p>
@@ -436,7 +436,7 @@
                             </div>
                         {/capture}{$code|code('html', true)|noescape}
                         {capture $code}
-                            <div class="ui-notice accent-info">
+                            <div class="ui-notice accent-info flex-col gap-4">
                                 Info notice
                                 <hr>
                                 <button class="ui-btn">
@@ -445,7 +445,7 @@
                             </div>
                         {/capture}{$code|code('html', true)|noescape}
                         {capture $code}
-                            <div class="ui-notice accent-warning">
+                            <div class="ui-notice accent-warning flex-col gap-4">
                                 Warning notice
                                 <hr>
                                 <button class="ui-btn">
@@ -454,7 +454,7 @@
                             </div>
                         {/capture}{$code|code('html', true)|noescape}
                         {capture $code}
-                            <div class="ui-notice bg-error accent-light">
+                            <div class="ui-notice bg-error accent-light flex-col gap-4">
                                 <div class="ui-text">
                                     <h4>Badly done!</h4>
                                     <p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>. Nullam in elit iaculis, tristique nisi ut, mollis tellus. Nunc venenatis elit vel placerat commodo. Vestibulum odio neque, hendrerit nec venenatis at, tincidunt ut magna. Etiam hendrerit ultrices pharetra.</p>

src/templates/Ui/ControlDate.latte

@@ -4,7 +4,7 @@
 >
     {block iconl}{/block}
     {block body}{/block}
-    <div class="end">
+    <div class="ms-auto">
         {block iconr}{/block}
         <svg data-action="click->ui-control#showDatepicker">
             <use href="#icon-calendar"></use>

src/templates/Ui/ControlTime.latte

@@ -4,7 +4,7 @@
 >
     {block iconl}{/block}
     {block body}{/block}
-    <div class="end">
+    <div class="ms-auto">
         {block iconr}{/block}
         <svg data-action="click->ui-control#showPicker">
             <use href="#icon-clock"></use>