sakana-element 2.3.0 → 2.4.0

package/dist/{es/theme → theme}/Collapse.css

@@ -1,5 +1,5 @@
 /* Collapse Variables */
-.px-collapse[data-v-dc792000] {
+.px-collapse[data-v-7f3e3aa8] {
   --px-collapse-border-color: var(--px-border-color);
   --px-collapse-header-height: 48px;
   --px-collapse-header-bg-color: var(--px-fill-color-blank);
@@ -25,7 +25,7 @@
   );
 }
 /* Border layer — pixel shape */
-.px-collapse[data-v-dc792000]::before {
+.px-collapse[data-v-7f3e3aa8]::before {
     content: "";
     position: absolute;
     inset: 0;
@@ -55,7 +55,7 @@
     z-index: 0;
 }
 /* Fill layer — pixel shape */
-.px-collapse[data-v-dc792000]::after {
+.px-collapse[data-v-7f3e3aa8]::after {
     content: "";
     position: absolute;
     inset: 2px;
@@ -85,19 +85,19 @@
     z-index: 0;
 }
 /* Collapse Item */
-.px-collapse-item[data-v-dc792000] {
+.px-collapse-item[data-v-7f3e3aa8] {
   position: relative;
   z-index: 1;
 }
-.px-collapse-item[data-v-dc792000]:not(:last-child) {
+.px-collapse-item[data-v-7f3e3aa8]:not(:last-child) {
     border-bottom: 2px solid var(--px-collapse-border-color);
 }
 /* Disabled state */
-.px-collapse-item.is-disabled[data-v-dc792000] {
+.px-collapse-item.is-disabled[data-v-7f3e3aa8] {
     opacity: 0.6;
 }
 /* Collapse Header */
-.px-collapse-item__header[data-v-dc792000] {
+.px-collapse-item__header[data-v-7f3e3aa8] {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -115,7 +115,7 @@
   position: relative;
 }
 /* Pixel selector indicator - small square */
-.px-collapse-item__header[data-v-dc792000]::before {
+.px-collapse-item__header[data-v-7f3e3aa8]::before {
     content: "";
     position: absolute;
     left: 10px;
@@ -128,7 +128,7 @@
     z-index: 2;
 }
 /* Background layer with pixel corners for first item */
-.px-collapse-item__header[data-v-dc792000]::after {
+.px-collapse-item__header[data-v-7f3e3aa8]::after {
     content: "";
     position: absolute;
     inset: 0;
@@ -136,53 +136,53 @@
     z-index: -1;
 }
 /* Hover effect */
-.px-collapse-item__header[data-v-dc792000]:hover:not(.is-disabled)::after {
+.px-collapse-item__header[data-v-7f3e3aa8]:hover:not(.is-disabled)::after {
       background-color: var(--px-fill-color-light);
 }
-.px-collapse-item__header[data-v-dc792000]:hover:not(.is-disabled)::before {
+.px-collapse-item__header[data-v-7f3e3aa8]:hover:not(.is-disabled)::before {
       border-color: var(--px-hover-border-color);
 }
 /* Disabled state */
-.px-collapse-item__header.is-disabled[data-v-dc792000] {
+.px-collapse-item__header.is-disabled[data-v-7f3e3aa8] {
     color: var(--px-collapse-disabled-text-color);
     cursor: not-allowed;
     background-image: none;
 }
 /* Active state */
-.px-collapse-item__header.is-active[data-v-dc792000]::after {
+.px-collapse-item__header.is-active[data-v-7f3e3aa8]::after {
       background-color: var(--px-collapse-active-bg-color);
 }
 /* Pixel indicator - filled square */
-.px-collapse-item__header.is-active[data-v-dc792000]::before {
+.px-collapse-item__header.is-active[data-v-7f3e3aa8]::before {
       background: var(--px-color-primary);
       border-color: var(--px-color-primary);
 }
 /* Arrow rotates down */
-.px-collapse-item__header.is-active .header-angle[data-v-dc792000] {
+.px-collapse-item__header.is-active .header-angle[data-v-7f3e3aa8] {
       transform: rotate(90deg);
 }
 /* Title section */
-.px-collapse-item__header .px-collapse-item__title[data-v-dc792000] {
+.px-collapse-item__header .px-collapse-item__title[data-v-7f3e3aa8] {
     flex: 1;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 /* Arrow icon */
-.px-collapse-item__header .header-angle[data-v-dc792000] {
+.px-collapse-item__header .header-angle[data-v-7f3e3aa8] {
     transition: none;
     color: var(--px-text-color-secondary);
 }
 /* Hidden arrow — remove extra right padding */
-.px-collapse-item__header.is-hidden-arrow[data-v-dc792000] {
+.px-collapse-item__header.is-hidden-arrow[data-v-7f3e3aa8] {
     padding-right: 24px;
 }
 /* Toggle icon (plus/minus) — no rotation on active */
-.px-collapse-item__header.is-active .header-angle.is-toggle-icon[data-v-dc792000] {
+.px-collapse-item__header.is-active .header-angle.is-toggle-icon[data-v-7f3e3aa8] {
     transform: none;
 }
 /* First item header needs pixel corners on top */
-.px-collapse-item:first-child .px-collapse-item__header[data-v-dc792000]::after {
+.px-collapse-item:first-child .px-collapse-item__header[data-v-7f3e3aa8]::after {
     top: 2px;
     left: 2px;
     right: 2px;
@@ -201,12 +201,12 @@
     );
 }
 /* Middle items need left/right inset */
-.px-collapse-item:not(:first-child):not(:last-child) .px-collapse-item__header[data-v-dc792000]::after {
+.px-collapse-item:not(:first-child):not(:last-child) .px-collapse-item__header[data-v-7f3e3aa8]::after {
     left: 2px;
     right: 2px;
 }
 /* Last item needs pixel corners on bottom */
-.px-collapse-item:last-child .px-collapse-item__header[data-v-dc792000]::after {
+.px-collapse-item:last-child .px-collapse-item__header[data-v-7f3e3aa8]::after {
     bottom: 2px;
     left: 2px;
     right: 2px;
@@ -224,7 +224,7 @@
     );
 }
 /* Last item content also needs pixel corners on bottom */
-.px-collapse-item:last-child .px-collapse-item__content[data-v-dc792000]::after {
+.px-collapse-item:last-child .px-collapse-item__content[data-v-7f3e3aa8]::after {
     content: "";
     position: absolute;
     top: 0;
@@ -247,7 +247,7 @@
     z-index: -1;
 }
 /* If only one item, needs both top and bottom pixel corners */
-.px-collapse-item:first-child:last-child .px-collapse-item__header[data-v-dc792000]::after {
+.px-collapse-item:first-child:last-child .px-collapse-item__header[data-v-7f3e3aa8]::after {
     top: 2px;
     bottom: 2px;
     left: 2px;
@@ -272,11 +272,11 @@
     );
 }
 /* Collapse Content Wrapper */
-.px-collapse-item__wapper[data-v-dc792000] {
+.px-collapse-item__wapper[data-v-7f3e3aa8] {
   overflow: hidden;
 }
 /* Collapse Content */
-.px-collapse-item__content[data-v-dc792000] {
+.px-collapse-item__content[data-v-7f3e3aa8] {
   will-change: height;
   background-color: var(--px-collapse-content-bg-color);
   overflow: hidden;
@@ -288,7 +288,7 @@
   position: relative;
 }
 /* Pixel-style dashed border at top using repeating squares */
-.px-collapse-item__content[data-v-dc792000]::before {
+.px-collapse-item__content[data-v-7f3e3aa8]::before {
     content: "";
     position: absolute;
     top: 0;
@@ -304,84 +304,84 @@
     );
 }
 /* Ghost variant — no pixel border/shadow, borderless style */
-.px-collapse.is-ghost[data-v-dc792000] {
+.px-collapse.is-ghost[data-v-7f3e3aa8] {
   filter: none;
 }
-.px-collapse.is-ghost[data-v-dc792000]::before,
-  .px-collapse.is-ghost[data-v-dc792000]::after {
+.px-collapse.is-ghost[data-v-7f3e3aa8]::before,
+  .px-collapse.is-ghost[data-v-7f3e3aa8]::after {
     display: none;
 }
-.px-collapse.is-ghost .px-collapse-item[data-v-dc792000] {
+.px-collapse.is-ghost .px-collapse-item[data-v-7f3e3aa8] {
   border-bottom: none;
 }
-.px-collapse.is-ghost .px-collapse-item__header[data-v-dc792000]::before {
+.px-collapse.is-ghost .px-collapse-item__header[data-v-7f3e3aa8]::before {
     display: none;
 }
-.px-collapse.is-ghost .px-collapse-item__header[data-v-dc792000]::after {
+.px-collapse.is-ghost .px-collapse-item__header[data-v-7f3e3aa8]::after {
     background: transparent;
 }
-.px-collapse.is-ghost .px-collapse-item__content[data-v-dc792000]::before {
+.px-collapse.is-ghost .px-collapse-item__content[data-v-7f3e3aa8]::before {
   display: none;
 }
 /* Preset color variants */
-.px-collapse--primary[data-v-dc792000] {
+.px-collapse--primary[data-v-7f3e3aa8] {
     --px-collapse-border-color: var(--px-color-primary-dark);
     --px-collapse-shadow-color: var(--px-color-primary-dark);
     --px-collapse-active-bg-color: var(--px-color-primary-light-9);
 }
-.px-collapse--primary .px-collapse-item__header.is-active[data-v-dc792000]::before {
+.px-collapse--primary .px-collapse-item__header.is-active[data-v-7f3e3aa8]::before {
     background: var(--px-color-primary);
     border-color: var(--px-color-primary);
 }
-.px-collapse--success[data-v-dc792000] {
+.px-collapse--success[data-v-7f3e3aa8] {
     --px-collapse-border-color: var(--px-color-success-dark);
     --px-collapse-shadow-color: var(--px-color-success-dark);
     --px-collapse-active-bg-color: var(--px-color-success-light-9);
 }
-.px-collapse--success .px-collapse-item__header.is-active[data-v-dc792000]::before {
+.px-collapse--success .px-collapse-item__header.is-active[data-v-7f3e3aa8]::before {
     background: var(--px-color-success);
     border-color: var(--px-color-success);
 }
-.px-collapse--warning[data-v-dc792000] {
+.px-collapse--warning[data-v-7f3e3aa8] {
     --px-collapse-border-color: var(--px-color-warning-dark);
     --px-collapse-shadow-color: var(--px-color-warning-dark);
     --px-collapse-active-bg-color: var(--px-color-warning-light-9);
 }
-.px-collapse--warning .px-collapse-item__header.is-active[data-v-dc792000]::before {
+.px-collapse--warning .px-collapse-item__header.is-active[data-v-7f3e3aa8]::before {
     background: var(--px-color-warning);
     border-color: var(--px-color-warning);
 }
-.px-collapse--info[data-v-dc792000] {
+.px-collapse--info[data-v-7f3e3aa8] {
     --px-collapse-border-color: var(--px-color-info-dark);
     --px-collapse-shadow-color: var(--px-color-info-dark);
     --px-collapse-active-bg-color: var(--px-color-info-light-9);
 }
-.px-collapse--info .px-collapse-item__header.is-active[data-v-dc792000]::before {
+.px-collapse--info .px-collapse-item__header.is-active[data-v-7f3e3aa8]::before {
     background: var(--px-color-info);
     border-color: var(--px-color-info);
 }
-.px-collapse--danger[data-v-dc792000] {
+.px-collapse--danger[data-v-7f3e3aa8] {
     --px-collapse-border-color: var(--px-color-danger-dark);
     --px-collapse-shadow-color: var(--px-color-danger-dark);
     --px-collapse-active-bg-color: var(--px-color-danger-light-9);
 }
-.px-collapse--danger .px-collapse-item__header.is-active[data-v-dc792000]::before {
+.px-collapse--danger .px-collapse-item__header.is-active[data-v-7f3e3aa8]::before {
     background: var(--px-color-danger);
     border-color: var(--px-color-danger);
 }
 /* Icon at start position */
-.px-collapse-item__header.is-icon-start .header-angle[data-v-dc792000] {
+.px-collapse-item__header.is-icon-start .header-angle[data-v-7f3e3aa8] {
     order: -1;
     margin-right: 8px;
     margin-left: 0;
 }
 /* Animation - instant for pixel feel */
-.slide-enter-active[data-v-dc792000],
-.slide-leave-active[data-v-dc792000] {
+.slide-enter-active[data-v-7f3e3aa8],
+.slide-leave-active[data-v-7f3e3aa8] {
   transition: none;
-}
+}
 /* Collapse Variables */
-.px-collapse[data-v-47d8126b] {
+.px-collapse[data-v-f3406cbb] {
   --px-collapse-border-color: var(--px-border-color);
   --px-collapse-header-height: 48px;
   --px-collapse-header-bg-color: var(--px-fill-color-blank);
@@ -407,7 +407,7 @@
   );
 }
 /* Border layer — pixel shape */
-.px-collapse[data-v-47d8126b]::before {
+.px-collapse[data-v-f3406cbb]::before {
     content: "";
     position: absolute;
     inset: 0;
@@ -437,7 +437,7 @@
     z-index: 0;
 }
 /* Fill layer — pixel shape */
-.px-collapse[data-v-47d8126b]::after {
+.px-collapse[data-v-f3406cbb]::after {
     content: "";
     position: absolute;
     inset: 2px;
@@ -467,19 +467,19 @@
     z-index: 0;
 }
 /* Collapse Item */
-.px-collapse-item[data-v-47d8126b] {
+.px-collapse-item[data-v-f3406cbb] {
   position: relative;
   z-index: 1;
 }
-.px-collapse-item[data-v-47d8126b]:not(:last-child) {
+.px-collapse-item[data-v-f3406cbb]:not(:last-child) {
     border-bottom: 2px solid var(--px-collapse-border-color);
 }
 /* Disabled state */
-.px-collapse-item.is-disabled[data-v-47d8126b] {
+.px-collapse-item.is-disabled[data-v-f3406cbb] {
     opacity: 0.6;
 }
 /* Collapse Header */
-.px-collapse-item__header[data-v-47d8126b] {
+.px-collapse-item__header[data-v-f3406cbb] {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -497,7 +497,7 @@
   position: relative;
 }
 /* Pixel selector indicator - small square */
-.px-collapse-item__header[data-v-47d8126b]::before {
+.px-collapse-item__header[data-v-f3406cbb]::before {
     content: "";
     position: absolute;
     left: 10px;
@@ -510,7 +510,7 @@
     z-index: 2;
 }
 /* Background layer with pixel corners for first item */
-.px-collapse-item__header[data-v-47d8126b]::after {
+.px-collapse-item__header[data-v-f3406cbb]::after {
     content: "";
     position: absolute;
     inset: 0;
@@ -518,53 +518,53 @@
     z-index: -1;
 }
 /* Hover effect */
-.px-collapse-item__header[data-v-47d8126b]:hover:not(.is-disabled)::after {
+.px-collapse-item__header[data-v-f3406cbb]:hover:not(.is-disabled)::after {
       background-color: var(--px-fill-color-light);
 }
-.px-collapse-item__header[data-v-47d8126b]:hover:not(.is-disabled)::before {
+.px-collapse-item__header[data-v-f3406cbb]:hover:not(.is-disabled)::before {
       border-color: var(--px-hover-border-color);
 }
 /* Disabled state */
-.px-collapse-item__header.is-disabled[data-v-47d8126b] {
+.px-collapse-item__header.is-disabled[data-v-f3406cbb] {
     color: var(--px-collapse-disabled-text-color);
     cursor: not-allowed;
     background-image: none;
 }
 /* Active state */
-.px-collapse-item__header.is-active[data-v-47d8126b]::after {
+.px-collapse-item__header.is-active[data-v-f3406cbb]::after {
       background-color: var(--px-collapse-active-bg-color);
 }
 /* Pixel indicator - filled square */
-.px-collapse-item__header.is-active[data-v-47d8126b]::before {
+.px-collapse-item__header.is-active[data-v-f3406cbb]::before {
       background: var(--px-color-primary);
       border-color: var(--px-color-primary);
 }
 /* Arrow rotates down */
-.px-collapse-item__header.is-active .header-angle[data-v-47d8126b] {
+.px-collapse-item__header.is-active .header-angle[data-v-f3406cbb] {
       transform: rotate(90deg);
 }
 /* Title section */
-.px-collapse-item__header .px-collapse-item__title[data-v-47d8126b] {
+.px-collapse-item__header .px-collapse-item__title[data-v-f3406cbb] {
     flex: 1;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 /* Arrow icon */
-.px-collapse-item__header .header-angle[data-v-47d8126b] {
+.px-collapse-item__header .header-angle[data-v-f3406cbb] {
     transition: none;
     color: var(--px-text-color-secondary);
 }
 /* Hidden arrow — remove extra right padding */
-.px-collapse-item__header.is-hidden-arrow[data-v-47d8126b] {
+.px-collapse-item__header.is-hidden-arrow[data-v-f3406cbb] {
     padding-right: 24px;
 }
 /* Toggle icon (plus/minus) — no rotation on active */
-.px-collapse-item__header.is-active .header-angle.is-toggle-icon[data-v-47d8126b] {
+.px-collapse-item__header.is-active .header-angle.is-toggle-icon[data-v-f3406cbb] {
     transform: none;
 }
 /* First item header needs pixel corners on top */
-.px-collapse-item:first-child .px-collapse-item__header[data-v-47d8126b]::after {
+.px-collapse-item:first-child .px-collapse-item__header[data-v-f3406cbb]::after {
     top: 2px;
     left: 2px;
     right: 2px;
@@ -583,12 +583,12 @@
     );
 }
 /* Middle items need left/right inset */
-.px-collapse-item:not(:first-child):not(:last-child) .px-collapse-item__header[data-v-47d8126b]::after {
+.px-collapse-item:not(:first-child):not(:last-child) .px-collapse-item__header[data-v-f3406cbb]::after {
     left: 2px;
     right: 2px;
 }
 /* Last item needs pixel corners on bottom */
-.px-collapse-item:last-child .px-collapse-item__header[data-v-47d8126b]::after {
+.px-collapse-item:last-child .px-collapse-item__header[data-v-f3406cbb]::after {
     bottom: 2px;
     left: 2px;
     right: 2px;
@@ -606,7 +606,7 @@
     );
 }
 /* Last item content also needs pixel corners on bottom */
-.px-collapse-item:last-child .px-collapse-item__content[data-v-47d8126b]::after {
+.px-collapse-item:last-child .px-collapse-item__content[data-v-f3406cbb]::after {
     content: "";
     position: absolute;
     top: 0;
@@ -629,7 +629,7 @@
     z-index: -1;
 }
 /* If only one item, needs both top and bottom pixel corners */
-.px-collapse-item:first-child:last-child .px-collapse-item__header[data-v-47d8126b]::after {
+.px-collapse-item:first-child:last-child .px-collapse-item__header[data-v-f3406cbb]::after {
     top: 2px;
     bottom: 2px;
     left: 2px;
@@ -654,11 +654,11 @@
     );
 }
 /* Collapse Content Wrapper */
-.px-collapse-item__wapper[data-v-47d8126b] {
+.px-collapse-item__wapper[data-v-f3406cbb] {
   overflow: hidden;
 }
 /* Collapse Content */
-.px-collapse-item__content[data-v-47d8126b] {
+.px-collapse-item__content[data-v-f3406cbb] {
   will-change: height;
   background-color: var(--px-collapse-content-bg-color);
   overflow: hidden;
@@ -670,7 +670,7 @@
   position: relative;
 }
 /* Pixel-style dashed border at top using repeating squares */
-.px-collapse-item__content[data-v-47d8126b]::before {
+.px-collapse-item__content[data-v-f3406cbb]::before {
     content: "";
     position: absolute;
     top: 0;
@@ -686,79 +686,79 @@
     );
 }
 /* Ghost variant — no pixel border/shadow, borderless style */
-.px-collapse.is-ghost[data-v-47d8126b] {
+.px-collapse.is-ghost[data-v-f3406cbb] {
   filter: none;
 }
-.px-collapse.is-ghost[data-v-47d8126b]::before,
-  .px-collapse.is-ghost[data-v-47d8126b]::after {
+.px-collapse.is-ghost[data-v-f3406cbb]::before,
+  .px-collapse.is-ghost[data-v-f3406cbb]::after {
     display: none;
 }
-.px-collapse.is-ghost .px-collapse-item[data-v-47d8126b] {
+.px-collapse.is-ghost .px-collapse-item[data-v-f3406cbb] {
   border-bottom: none;
 }
-.px-collapse.is-ghost .px-collapse-item__header[data-v-47d8126b]::before {
+.px-collapse.is-ghost .px-collapse-item__header[data-v-f3406cbb]::before {
     display: none;
 }
-.px-collapse.is-ghost .px-collapse-item__header[data-v-47d8126b]::after {
+.px-collapse.is-ghost .px-collapse-item__header[data-v-f3406cbb]::after {
     background: transparent;
 }
-.px-collapse.is-ghost .px-collapse-item__content[data-v-47d8126b]::before {
+.px-collapse.is-ghost .px-collapse-item__content[data-v-f3406cbb]::before {
   display: none;
 }
 /* Preset color variants */
-.px-collapse--primary[data-v-47d8126b] {
+.px-collapse--primary[data-v-f3406cbb] {
     --px-collapse-border-color: var(--px-color-primary-dark);
     --px-collapse-shadow-color: var(--px-color-primary-dark);
     --px-collapse-active-bg-color: var(--px-color-primary-light-9);
 }
-.px-collapse--primary .px-collapse-item__header.is-active[data-v-47d8126b]::before {
+.px-collapse--primary .px-collapse-item__header.is-active[data-v-f3406cbb]::before {
     background: var(--px-color-primary);
     border-color: var(--px-color-primary);
 }
-.px-collapse--success[data-v-47d8126b] {
+.px-collapse--success[data-v-f3406cbb] {
     --px-collapse-border-color: var(--px-color-success-dark);
     --px-collapse-shadow-color: var(--px-color-success-dark);
     --px-collapse-active-bg-color: var(--px-color-success-light-9);
 }
-.px-collapse--success .px-collapse-item__header.is-active[data-v-47d8126b]::before {
+.px-collapse--success .px-collapse-item__header.is-active[data-v-f3406cbb]::before {
     background: var(--px-color-success);
     border-color: var(--px-color-success);
 }
-.px-collapse--warning[data-v-47d8126b] {
+.px-collapse--warning[data-v-f3406cbb] {
     --px-collapse-border-color: var(--px-color-warning-dark);
     --px-collapse-shadow-color: var(--px-color-warning-dark);
     --px-collapse-active-bg-color: var(--px-color-warning-light-9);
 }
-.px-collapse--warning .px-collapse-item__header.is-active[data-v-47d8126b]::before {
+.px-collapse--warning .px-collapse-item__header.is-active[data-v-f3406cbb]::before {
     background: var(--px-color-warning);
     border-color: var(--px-color-warning);
 }
-.px-collapse--info[data-v-47d8126b] {
+.px-collapse--info[data-v-f3406cbb] {
     --px-collapse-border-color: var(--px-color-info-dark);
     --px-collapse-shadow-color: var(--px-color-info-dark);
     --px-collapse-active-bg-color: var(--px-color-info-light-9);
 }
-.px-collapse--info .px-collapse-item__header.is-active[data-v-47d8126b]::before {
+.px-collapse--info .px-collapse-item__header.is-active[data-v-f3406cbb]::before {
     background: var(--px-color-info);
     border-color: var(--px-color-info);
 }
-.px-collapse--danger[data-v-47d8126b] {
+.px-collapse--danger[data-v-f3406cbb] {
     --px-collapse-border-color: var(--px-color-danger-dark);
     --px-collapse-shadow-color: var(--px-color-danger-dark);
     --px-collapse-active-bg-color: var(--px-color-danger-light-9);
 }
-.px-collapse--danger .px-collapse-item__header.is-active[data-v-47d8126b]::before {
+.px-collapse--danger .px-collapse-item__header.is-active[data-v-f3406cbb]::before {
     background: var(--px-color-danger);
     border-color: var(--px-color-danger);
 }
 /* Icon at start position */
-.px-collapse-item__header.is-icon-start .header-angle[data-v-47d8126b] {
+.px-collapse-item__header.is-icon-start .header-angle[data-v-f3406cbb] {
     order: -1;
     margin-right: 8px;
     margin-left: 0;
 }
 /* Animation - instant for pixel feel */
-.slide-enter-active[data-v-47d8126b],
-.slide-leave-active[data-v-47d8126b] {
+.slide-enter-active[data-v-f3406cbb],
+.slide-leave-active[data-v-f3406cbb] {
   transition: none;
-}
+}

package/dist/theme/Diff.css

@@ -0,0 +1,110 @@
+/* Diff Variables */
+.px-diff {
+  --px-diff-handle-color: var(--px-text-color-primary);
+  --px-diff-handle-bg: var(--px-fill-color-blank);
+}
+/* Base Diff Container */
+.px-diff {
+  position: relative;
+  overflow: hidden;
+  display: inline-block;
+  width: 100%;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: none;
+  font-size: 0;
+  line-height: 0;
+  box-sizing: border-box;
+}
+/* After panel flows normally — establishes container height */
+.px-diff__after {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
+/* Before panel overlays — clipped to show left side */
+.px-diff__before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+}
+/* Images fill the container */
+.px-diff__img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.px-diff__canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  image-rendering: pixelated;
+}
+/* Handle — centers the grip vertically */
+.px-diff__handle {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: translateX(-50%);
+  outline: none;
+  pointer-events: none;
+}
+/* Vertical divider line */
+.px-diff__handle::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    width: 2px;
+    transform: translateX(-50%);
+    background: var(--px-diff-handle-bg);
+    box-shadow: 0 0 4px rgba(0, 0, 0, 0.12);
+    pointer-events: none;
+}
+/* Grip button — circular pill shape (daisyUI-style) */
+.px-diff__handle-grip {
+  width: 20px;
+  height: 32px;
+  border-radius: 10px;
+  background: var(--px-diff-handle-bg);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
+  cursor: ew-resize;
+  pointer-events: auto;
+  flex-shrink: 0;
+}
+/* Focus ring */
+.px-diff__handle:focus-visible .px-diff__handle-grip {
+  box-shadow: 0 0 0 2px var(--px-diff-handle-color), 0 1px 4px rgba(0, 0, 0, 0.18);
+}
+/* Color variants */
+.px-diff--primary {
+    --px-diff-handle-color: var(--px-color-primary);
+}
+.px-diff--success {
+    --px-diff-handle-color: var(--px-color-success);
+}
+.px-diff--warning {
+    --px-diff-handle-color: var(--px-color-warning);
+}
+.px-diff--info {
+    --px-diff-handle-color: var(--px-color-info);
+}
+.px-diff--danger {
+    --px-diff-handle-color: var(--px-color-danger);
+}
+/* Dark mode */
+html.dark .px-diff,
+.px-dark .px-diff {
+  --px-diff-handle-bg: var(--px-fill-color-light);
+}