FIX, DOCS

.changeset/green-news-crash.md

@@ -0,0 +1,10 @@
+---
+'qwik-ui': patch
+'@qwik-ui/styled': patch
+---
+
+# FIX
+
+# DOCS
+
+Fix global.css for correct Accordion data-open data-closed in animations, fix "leftover" styled Modal inlined tailwind to data-[open] data-[closed] from deprecated data-[state="open"] data=[state="closed"], and reflected the changes to the qwik-ui docs

apps/component-tests/src/global.css

@@ -1367,11 +1367,11 @@ body {
   It would make more sense to supply the user with the animation declaration in the docs.
 */
 @layer utilities {
-  .accordion-animation-1[data-state='open'] {
+  .accordion-animation-1[data-open] {
     animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-open;
   }
 
-  .accordion-animation-1[data-state='closed'] {
+  .accordion-animation-1[data-closed] {
     animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-close;
   }
 }

apps/website/src/global.css

@@ -1362,15 +1362,15 @@ body {
   min-height: 100%;
 }
 
-/* Utilities layer for animations. The current arbitrary & docs tailwind animation guidelines are not maintainable long term. 
+/* Utilities layer for animations. The current arbitrary & docs tailwind animation guidelines are not maintainable long term.
   It would make more sense to supply the user with the animation declaration in the docs.
 */
 @layer utilities {
-  .accordion-animation-1[data-state='open'] {
+  .accordion-animation-1[data-open] {
     animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-open;
   }
 
-  .accordion-animation-1[data-state='closed'] {
+  .accordion-animation-1[data-closed] {
     animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-close;
   }
 }

apps/website/src/routes/docs/headless/install/examples/astro-accordion.tsx

@@ -6,9 +6,9 @@ export default component$(() => {
 
   useStyles$(`
     .accordion-root {
-        box-sizing: border-box; 
-        border-radius: 0.275rem; 
-        color: #ffffff; 
+        box-sizing: border-box;
+        border-radius: 0.275rem;
+        color: #ffffff;
         width: 250px;
         max-width: 500px;
         border: 1px solid #4B5563;
@@ -31,25 +31,25 @@ export default component$(() => {
     .accordion-trigger:hover {
         background-color: #374151;
       }
-      
+
       .accordion-trigger.rounded-t-sm {
         border-top-left-radius: 0.125rem;
         border-top-right-radius: 0.125rem;
       }
-      
+
       .accordion-trigger.rounded-b-sm {
         border-bottom-left-radius: 0.125rem;
         border-bottom-right-radius: 0.125rem;
       }
-      
+
       .accordion-trigger.border-b-0 {
         border-bottom: 0;
       }
 
       .accordion-trigger[aria-expanded="true"] {
         border-radius: 0;
       }
-      
+
       .accordion-trigger svg {
         transition: transform 500ms ease;
       }
@@ -63,19 +63,19 @@ export default component$(() => {
         background-color: #1F2937;
       }
 
-      .accordion-slide[data-state='open'] {
+      .accordion-slide[data-open] {
         animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-open;
       }
-    
-      .accordion-slide[data-state='closed'] {
+
+      .accordion-slide[data-closed] {
         animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-close;
       }
 
       .accordion-content p {
         background: #1F2937;
         padding: 0.5rem 1rem;
       }
-      
+
       .accordion-item:last-of-type .accordion-content {
         border-bottom-left-radius: 0.275rem;
         border-bottom-right-radius: 0.275rem;

apps/website/src/routes/docs/styled/modal/index.mdx

@@ -42,7 +42,7 @@ export const panelVariants = cva(
     variants: {
       position: {
         center:
-          'max-w-lg rounded-base shadow-lg data-[state=closed]:fade-out data-[state=open]:fade-in data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-bottom-2 backdrop:data-[closing]:fade-out backdrop:data-[open]:fade-in',
+          'max-w-lg rounded-base shadow-lg data-[closed]:fade-out data-[open]:fade-in data-[closed]:zoom-out-95 data-[open]:zoom-in-95 data-[open]:slide-in-from-bottom-2 backdrop:data-[closing]:fade-out backdrop:data-[open]:fade-in',
         top: 'inset-x-0 top-0 mt-0 rounded-b-base border-b data-[closing]:slide-out-to-top data-[open]:slide-in-from-top',
         bottom:
           'inset-x-0 bottom-0 mb-0 rounded-t-base border-t data-[closing]:slide-out-to-bottom data-[open]:slide-in-from-bottom',

packages/kit-styled/src/components/modal/modal.tsx

@@ -19,7 +19,7 @@ export const panelVariants = cva(
     variants: {
       position: {
         center:
-          'max-w-lg rounded-base shadow-lg data-[state=closed]:fade-out data-[state=open]:fade-in data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-bottom-2 backdrop:data-[closing]:fade-out backdrop:data-[open]:fade-in',
+          'max-w-lg rounded-base shadow-lg data-[closed]:fade-out data-[open]:fade-in data-[closed]:zoom-out-95 data-[open]:zoom-in-95 data-[open]:slide-in-from-bottom-2 backdrop:data-[closing]:fade-out backdrop:data-[open]:fade-in',
         top: 'inset-x-0 top-0 mt-0 rounded-b-base border-b data-[closing]:slide-out-to-top data-[open]:slide-in-from-top',
         bottom:
           'inset-x-0 bottom-0 mb-0 rounded-t-base border-t data-[closing]:slide-out-to-bottom data-[open]:slide-in-from-bottom',

packages/kit-styled/src/templates/global.css

@@ -1363,15 +1363,15 @@ body {
   min-height: 100%;
 }
 
-/* Utilities layer for animations. The current arbitrary & docs tailwind animation guidelines are not maintainable long term. 
+/* Utilities layer for animations. The current arbitrary & docs tailwind animation guidelines are not maintainable long term.
   It would make more sense to supply the user with the animation declaration in the docs.
 */
 @layer utilities {
-  .accordion-animation-1[data-state='open'] {
+  .accordion-animation-1[data-open] {
     animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-open;
   }
 
-  .accordion-animation-1[data-state='closed'] {
+  .accordion-animation-1[data-closed] {
     animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-close;
   }
 }