Merge pull request #1 from ElegantEngineeringTech/tailwindcss-v4

QuentinGab · web-flow · commit 1ad28c39e735 · 2025-06-01T14:35:04.000+02:00
Tailwindcss v4
diff --git a/resources/views/components/button/base.blade.php b/resources/views/components/button/base.blade.php
@@ -12,11 +12,11 @@
     \Elegantly\Kit\Facades\Kit::button()->size($size)->color($color)->font()->background()->outline()->border()->ring()->spacing()->hover(),
     'shrink-0 relative align-middle',
     'inline-flex items-center',
-    'outline-2 outline-offset-2',
+    'outline-offset-2',
     'transition-colors',
     'cursor-pointer',
     'disabled:cursor-not-allowed disabled:opacity-50',
-    'focus-visible:outline active:outline',
+    'focus-visible:outline-2 active:outline-2',
 ]) !!} @disabled($disabled)
     @if ($tag === 'button') type="{{ $type }}" @endif
     @if ($tooltip) x-tooltip.raw="{{ $tooltip }}" @endif
diff --git a/resources/views/components/button/radio.blade.php b/resources/views/components/button/radio.blade.php
@@ -16,7 +16,7 @@
     });
     $label = $attributes->except(array_keys($input->getAttributes()))->class([
         //
-        // 'has-[:focus-visible]:outline has-[:active]:outline',
+        // 'has-focus-visible:outline has-active:outline',
         \Elegantly\Kit\Facades\Kit::button()->color($colorChecked)->checked(),
     ]);
 @endphp
diff --git a/resources/views/components/container.blade.php b/resources/views/components/container.blade.php
@@ -4,10 +4,10 @@
 
 <div {!! $attributes->class([
     'mx-auto',
-    'max-w-screen-sm' => $size === 'sm',
-    'max-w-screen-md' => $size === 'md',
-    'max-w-screen-lg' => $size === 'lg',
-    'max-w-screen-xl' => $size === 'xl',
+    'max-w-(--breakpoint-sm)' => $size === 'sm',
+    'max-w-(--breakpoint-md)' => $size === 'md',
+    'max-w-(--breakpoint-lg)' => $size === 'lg',
+    'max-w-(--breakpoint-xl)' => $size === 'xl',
 ]) !!}>
     {{ $slot }}
 </div>
diff --git a/resources/views/components/input/base.blade.php b/resources/views/components/input/base.blade.php
@@ -12,7 +12,7 @@
 <input type="{{ $type }}"
     {{ $attributes->class([
         \Elegantly\Kit\Facades\Kit::input()->size($size)->color($color)->font()->spacing()->border()->ring()->background()->outline(),
-        'inline-block w-full ring-inset focus:outline focus-visible:outline outline-2',
+        'inline-block w-full ring-inset focus:outline-2 focus-visible:outline-2',
     ]) }}
     @if ($autofocus) autofocus @endif @disabled($disabled) @required($required)
     @if ($autocomplete) autocomplete="{{ $autocomplete }}" @endif
diff --git a/resources/views/components/input/parent.blade.php b/resources/views/components/input/parent.blade.php
@@ -5,8 +5,8 @@
 <div
     {{ $attributes->class([
         'flex',
-        'outline-2 outline-offset-2',
-        'has-[:focus-visible]:outline',
+        'outline-offset-2',
+        'has-focus-visible:outline-2',
         \Elegantly\Kit\Facades\Kit::input()->color($color)->font()->background()->border()->ring()->outline(),
     ]) }}>
 
diff --git a/resources/views/components/popover/content.blade.php b/resources/views/components/popover/content.blade.php
@@ -1,6 +1,6 @@
 @props([])
 
-<div {{ $attributes->class(['flex items-center justify-center max-sm:!fixed max-sm:!left-0 max-sm:!top-0 max-sm:bottom-0 max-sm:right-0 max-sm:bg-black/30']) }}
+<div {{ $attributes->class(['flex items-center justify-center max-sm:fixed! max-sm:left-0! max-sm:top-0! max-sm:bottom-0 max-sm:right-0 max-sm:bg-black/30']) }}
     x-cloak x-show="open" x-trap="open" x-on:click.outside="open = false" x-on:click.self="open = false"
     x-on:keyup.escape.prevent.stop="open = false">
     {{ $slot }}
diff --git a/resources/views/components/segments/button.blade.php b/resources/views/components/segments/button.blade.php
@@ -6,7 +6,7 @@
 
 <x-kit::button.radio :color-checked="$color" :attributes="$attributes->class([
     'justify-center grow', //
-    'has-[:checked]:shadow-sm has-[:focus-visible]:outline',
+    'has-checked:shadow-sm has-focus-visible:outline',
 ])">
     @if ($icon?->hasActualContent())
         <x-slot:icon :attributes="$icon?->attributes"> {{ $icon }} </x-slot:icon>
diff --git a/resources/views/components/switch/base.blade.php b/resources/views/components/switch/base.blade.php
@@ -13,20 +13,19 @@
     'focus:ring-transparent dark:focus:ring-transparent',
     'focus-within:ring-0 dark:focus-within:ring-0',
     'focus:shadow-none dark:focus:shadow-none',
-    'focus:before:outline before:outline-2 before:outline-offset-2',
+    'focus:before:outline-2 before:outline-offset-2',
     'after:absolute before:absolute',
     'after:top-0 before:top-0',
     'after:block before:inline-block',
     'before:rounded-full after:rounded-full',
-    "after:content-[''] after:w-5 after:h-5 after:mt-0.5 after:ml-0.5",
+    'after:w-5 after:h-5 after:mt-0.5 after:ml-0.5',
     'after:shadow-md after:duration-100',
-    "before:content-[''] before:w-10 before:h-full",
+    'before:w-10 before:h-full',
     'before:shadow-[inset_0_0_#000]',
     'after:bg-white dark:after:bg-gray-50',
     'dark:before:bg-gray-600',
     'checked:after:duration-300 checked:after:translate-x-4',
-    'disabled:after:bg-opacity-75 disabled:cursor-not-allowed',
-    'disabled:checked:before:bg-opacity-40',
+    'disabled:cursor-not-allowed disabled:opacity-50',
     \Elegantly\Kit\Facades\Kit::switch()->color($color)->background()->outline(),
 ]) !!} type="checkbox" @disabled($disabled) @checked($checked)
     @required($required)>
diff --git a/resources/views/components/tag/icon.blade.php b/resources/views/components/tag/icon.blade.php
@@ -4,7 +4,7 @@
     {{ $attributes->class([
         \Elegantly\Kit\Facades\Kit::tag()->size($size)->icon(),
         '-mx-1' => !$unoffset,
-        'flex-shrink-0 inline-block leading-none',
+        'shrink-0 inline-block leading-none',
     ]) }}>
     @if (is_string($icon))
         @svg($icon)
diff --git a/resources/views/components/tag/index.blade.php b/resources/views/components/tag/index.blade.php
@@ -9,7 +9,7 @@
 ])
 
 <x-kit::tag.base :attributes="$attributes->class([
-    'flex-shrink-0' => !$truncate,
+    'shrink-0' => !$truncate,
 ])" :size="$size">
     @if ($icon)
         @php
diff --git a/src/Ui/Button.php b/src/Ui/Button.php
@@ -47,11 +47,11 @@ public function icon(): static
     public function checked(): string
     {
         return $this->append(match ($this->color) {
-            'white' => 'has-[:checked]:bg-white has-[:checked]:text-black',
-            'black' => 'has-[:checked]:bg-black has-[:checked]:text-white',
-            'emerald' => 'has-[:checked]:bg-emerald-500 has-[:checked]:text-white',
-            'rose' => 'has-[:checked]:bg-rose-500 has-[:checked]:text-white',
-            'amber' => 'has-[:checked]:bg-amber-500 has-[:checked]:text-white',
+            'white' => 'has-checked:bg-white has-checked:text-black',
+            'black' => 'has-checked:bg-black has-checked:text-white',
+            'emerald' => 'has-checked:bg-emerald-500 has-checked:text-white',
+            'rose' => 'has-checked:bg-rose-500 has-checked:text-white',
+            'amber' => 'has-checked:bg-amber-500 has-checked:text-white',
             default => ''
         });
     }
diff --git a/src/Ui/Select.php b/src/Ui/Select.php
@@ -26,10 +26,10 @@ public function font(): static
     public function spacing(): static
     {
         return $this->append(match ($this->size) {
-            '2xs' => 'pl-2 pr-6 py-1 min-w-5 bg-[length:1rem] bg-[right_0.25rem_center]',
-            'xs' => 'pl-2.5 pr-8 py-1.5 min-w-7 bg-[length:1rem] bg-[right_0.5rem_center]',
-            'sm' => 'pl-2.5 pr-10 py-1.5 min-w-8 bg-[length:1.5rem] bg-[right_0.5rem_center]',
-            'base', 'md', 'lg', 'xl' => 'pl-3 pr-10 py-2 min-w-9 bg-[length:1.5rem] bg-[right_0.5rem_center]',
+            '2xs' => 'pl-2 pr-6 py-1 min-w-5 bg-size-[1rem] bg-position-[right_0.25rem_center]',
+            'xs' => 'pl-2.5 pr-8 py-1.5 min-w-7 bg-size-[1rem] bg-position-[right_0.5rem_center]',
+            'sm' => 'pl-2.5 pr-10 py-1.5 min-w-8 bg-size-[1.5rem] bg-position-[right_0.5rem_center]',
+            'base', 'md', 'lg', 'xl' => 'pl-3 pr-10 py-2 min-w-9 bg-size-[1.5rem] bg-position-[right_0.5rem_center]',
             default => ''
         });
     }
diff --git a/src/Ui/SwitchUi.php b/src/Ui/SwitchUi.php
@@ -10,15 +10,15 @@ class SwitchUi extends Base
     public function background(): static
     {
         return $this->append(match ($this->color) {
-            'white' => 'before:bg-gray-300 before:checked:bg-white dark:before:bg-gray-600 dark:before:checked:bg-black',
-            'black' => 'before:bg-gray-300 before:checked:bg-black dark:before:bg-gray-600 dark:before:checked:bg-white',
-            'gray' => 'before:bg-gray-300 before:checked:bg-gray-500 dark:before:bg-gray-600 dark:before:checked:bg-white',
-            'emerald' => 'before:bg-gray-300 before:checked:bg-emerald-500 dark:before:bg-gray-600 dark:before:checked:bg-emerald-700',
-            'sky' => 'before:bg-gray-300 before:checked:bg-sky-500 dark:before:bg-gray-600 dark:before:checked:bg-sky-700',
-            'rose' => 'before:bg-gray-300 before:checked:bg-rose-500 dark:before:bg-gray-600 dark:before:checked:bg-rose-700',
-            'purple' => 'before:bg-gray-300 before:checked:bg-purple-500 dark:before:bg-gray-600 dark:before:checked:bg-purple-700',
-            'yellow' => 'before:bg-gray-300 before:checked:bg-yellow-500 dark:before:bg-gray-600 dark:before:checked:bg-yellow-700',
-            'amber' => 'before:bg-gray-300 before:checked:bg-amber-500 dark:before:bg-gray-600 dark:before:checked:bg-amber-700',
+            'white' => 'before:bg-gray-300 checked:before:bg-white dark:before:bg-gray-600 dark:checked:before:bg-black',
+            'black' => 'before:bg-gray-300 checked:before:bg-black dark:before:bg-gray-600 dark:checked:before:bg-white',
+            'gray' => 'before:bg-gray-300 checked:before:bg-gray-500 dark:before:bg-gray-600 dark:checked:before:bg-white',
+            'emerald' => 'before:bg-gray-300 checked:before:bg-emerald-500 dark:before:bg-gray-600 dark:checked:before:bg-emerald-700',
+            'sky' => 'before:bg-gray-300 checked:before:bg-sky-500 dark:before:bg-gray-600 dark:checked:before:bg-sky-700',
+            'rose' => 'before:bg-gray-300 checked:before:bg-rose-500 dark:before:bg-gray-600 dark:checked:before:bg-rose-700',
+            'purple' => 'before:bg-gray-300 checked:before:bg-purple-500 dark:before:bg-gray-600 dark:checked:before:bg-purple-700',
+            'yellow' => 'before:bg-gray-300 checked:before:bg-yellow-500 dark:before:bg-gray-600 dark:checked:before:bg-yellow-700',
+            'amber' => 'before:bg-gray-300 checked:before:bg-amber-500 dark:before:bg-gray-600 dark:checked:before:bg-amber-700',
             default => ''
         });
     }
diff --git a/workbench/resources/views/demo.blade.php b/workbench/resources/views/demo.blade.php
@@ -4,7 +4,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
     <script defer src="https://cdn.jsdelivr.net/npm/@ryangjchandler/alpine-tooltip@1.x.x/dist/cdn.min.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tippy.js@6/dist/tippy.min.css" />
@@ -26,13 +26,13 @@
 
 <body class="">
 
-    <div class="grid grid-cols-1 divide-x md:grid-cols-3 [&>*]:h-60">
+    <div class="grid grid-cols-1 divide-x divide-gray-200 *:h-60 md:grid-cols-3">
 
         <div class="isolate flex flex-col">
             <div class="p-3">
                 <h1 class="font-semibold">Button</h1>
             </div>
-            <div class="flex grow items-center justify-center border-b">
+            <div class="flex grow items-center justify-center border-b border-gray-200">
                 <x-kit::button color="white" class="rounded-md ring-1 ring-inset">
                     Button
                 </x-kit::button>
@@ -43,7 +43,7 @@
             <div class="p-3">
                 <h1 class="font-semibold">Button File</h1>
             </div>
-            <div class="flex grow items-center justify-center border-b">
+            <div class="flex grow items-center justify-center border-b border-gray-200">
                 <x-kit::button.file name="upload" color="white" class="rounded-md ring-1 ring-inset">
                     <x-slot:icon>
                         <iconify-icon icon="heroicons:arrow-up-tray"></iconify-icon>
@@ -57,7 +57,7 @@
             <div class="p-3">
                 <h1 class="font-semibold">Button Copy</h1>
             </div>
-            <div class="flex grow items-center justify-center border-b">
+            <div class="flex grow items-center justify-center border-b border-gray-200">
                 <x-kit::button.copy tooltip="Copy" tooltip-checked="Copied" copy="Foo" color="white"
                     class="rounded-md ring-1 ring-inset">
                     <x-slot:icon>
@@ -75,7 +75,7 @@ class="rounded-md ring-1 ring-inset">
             <div class="p-3">
                 <h1 class="font-semibold">Tag</h1>
             </div>
-            <div class="flex grow items-center justify-center border-b">
+            <div class="flex grow items-center justify-center border-b border-gray-200">
                 <x-kit::tag color="white" class="rounded-full ring-1 ring-inset">
                     Tag
                     <x-slot:button>
@@ -93,7 +93,7 @@ class="rounded-md ring-1 ring-inset">
             <div class="p-3">
                 <h1 class="font-semibold">Popover</h1>
             </div>
-            <div class="flex grow items-center justify-center border-b">
+            <div class="flex grow items-center justify-center border-b border-gray-200">
                 <x-kit::popover class="">
                     <x-kit::button class="rounded-md ring-1 ring-inset" color="white" x-ref="trigger"
                         x-on:click.stop="open = !open">
@@ -105,10 +105,11 @@ class="rounded-md ring-1 ring-inset">
 
                     <x-kit::popover.content class="z-20 p-3 md:p-0" x-anchor.bottom-end.offset.5="$refs.trigger"
                         x-transition.origin.top="">
-                        <div class="mt-auto flex w-full flex-col rounded-lg border bg-white shadow-lg md:max-w-72">
+                        <div
+                            class="mt-auto flex w-full flex-col rounded-lg border border-gray-200 bg-white shadow-lg md:max-w-72">
 
                             <div class="p-1">
-                                <x-kit::input.parent color="gray" class="rounded-md !outline-0 ring-1 ring-inset">
+                                <x-kit::input.parent color="gray" class="outline-0! rounded-md ring-1 ring-inset">
                                     <x-kit::input size="sm" color="transparent" placeholder="Search">
                                         <x-slot:icon>
                                             <iconify-icon icon="heroicons:magnifying-glass"></iconify-icon>
@@ -141,7 +142,7 @@ class="rounded-md ring-1 ring-inset">
                                 <p class="px-2.5 py-0.5 text-sm font-semibold">
                                     Recent
                                 </p>
-                                <span class="grow border-b"></span>
+                                <span class="grow border-b border-gray-200"></span>
                             </div>
 
                             <div class="flex max-h-full flex-col gap-0.5 overflow-auto p-1 md:max-h-56">
@@ -179,7 +180,7 @@ class="rounded-md ring-1 ring-inset">
             <div class="p-3">
                 <h1 class="font-semibold">Select</h1>
             </div>
-            <div class="flex grow items-center justify-center border-b">
+            <div class="flex grow items-center justify-center border-b border-gray-200">
                 <x-kit::select color="white" class="rounded ring-1 ring-inset">
                     <option>
                         Option 1
@@ -192,8 +193,19 @@ class="rounded-md ring-1 ring-inset">
             <div class="p-3">
                 <h1 class="font-semibold">Switch</h1>
             </div>
-            <div class="flex grow items-center justify-center border-b">
-                <x-kit::switch color="white">
+            <div class="flex grow items-center justify-center border-b border-gray-200">
+                <x-kit::switch>
+                    Switch
+                </x-kit::switch>
+            </div>
+        </div>
+
+        <div class="isolate flex flex-col">
+            <div class="p-3">
+                <h1 class="font-semibold">Disabled Switch</h1>
+            </div>
+            <div class="flex grow items-center justify-center border-b border-gray-200">
+                <x-kit::switch disabled checked>
                     Switch
                 </x-kit::switch>
             </div>
@@ -203,7 +215,7 @@ class="rounded-md ring-1 ring-inset">
             <div class="p-3">
                 <h1 class="font-semibold">Input</h1>
             </div>
-            <div class="flex grow items-center justify-center border-b">
+            <div class="flex grow items-center justify-center border-b border-gray-200">
                 <x-kit::input.parent color="gray" class="rounded-md ring-1 ring-inset">
                     <x-kit::input color="transparent" placeholder="Search">
                         <x-slot:icon>
