sakana-element 2.1.4 → 2.2.0

package/dist/theme/Collapse.css

@@ -1,5 +1,5 @@
 /* Collapse Variables */
-.px-collapse[data-v-4f9f8081] {
+.px-collapse[data-v-dc792000] {
   --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-4f9f8081]::before {
+.px-collapse[data-v-dc792000]::before {
     content: "";
     position: absolute;
     inset: 0;
@@ -55,7 +55,7 @@
     z-index: 0;
 }
 /* Fill layer — pixel shape */
-.px-collapse[data-v-4f9f8081]::after {
+.px-collapse[data-v-dc792000]::after {
     content: "";
     position: absolute;
     inset: 2px;
@@ -85,19 +85,19 @@
     z-index: 0;
 }
 /* Collapse Item */
-.px-collapse-item[data-v-4f9f8081] {
+.px-collapse-item[data-v-dc792000] {
   position: relative;
   z-index: 1;
 }
-.px-collapse-item[data-v-4f9f8081]:not(:last-child) {
+.px-collapse-item[data-v-dc792000]:not(:last-child) {
     border-bottom: 2px solid var(--px-collapse-border-color);
 }
 /* Disabled state */
-.px-collapse-item.is-disabled[data-v-4f9f8081] {
+.px-collapse-item.is-disabled[data-v-dc792000] {
     opacity: 0.6;
 }
 /* Collapse Header */
-.px-collapse-item__header[data-v-4f9f8081] {
+.px-collapse-item__header[data-v-dc792000] {
   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-4f9f8081]::before {
+.px-collapse-item__header[data-v-dc792000]::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-4f9f8081]::after {
+.px-collapse-item__header[data-v-dc792000]::after {
     content: "";
     position: absolute;
     inset: 0;
@@ -136,45 +136,53 @@
     z-index: -1;
 }
 /* Hover effect */
-.px-collapse-item__header[data-v-4f9f8081]:hover:not(.is-disabled)::after {
+.px-collapse-item__header[data-v-dc792000]:hover:not(.is-disabled)::after {
       background-color: var(--px-fill-color-light);
 }
-.px-collapse-item__header[data-v-4f9f8081]:hover:not(.is-disabled)::before {
+.px-collapse-item__header[data-v-dc792000]:hover:not(.is-disabled)::before {
       border-color: var(--px-hover-border-color);
 }
 /* Disabled state */
-.px-collapse-item__header.is-disabled[data-v-4f9f8081] {
+.px-collapse-item__header.is-disabled[data-v-dc792000] {
     color: var(--px-collapse-disabled-text-color);
     cursor: not-allowed;
     background-image: none;
 }
 /* Active state */
-.px-collapse-item__header.is-active[data-v-4f9f8081]::after {
+.px-collapse-item__header.is-active[data-v-dc792000]::after {
       background-color: var(--px-collapse-active-bg-color);
 }
 /* Pixel indicator - filled square */
-.px-collapse-item__header.is-active[data-v-4f9f8081]::before {
+.px-collapse-item__header.is-active[data-v-dc792000]::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-4f9f8081] {
+.px-collapse-item__header.is-active .header-angle[data-v-dc792000] {
       transform: rotate(90deg);
 }
 /* Title section */
-.px-collapse-item__header .px-collapse-item__title[data-v-4f9f8081] {
+.px-collapse-item__header .px-collapse-item__title[data-v-dc792000] {
     flex: 1;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 /* Arrow icon */
-.px-collapse-item__header .header-angle[data-v-4f9f8081] {
+.px-collapse-item__header .header-angle[data-v-dc792000] {
     transition: none;
     color: var(--px-text-color-secondary);
 }
+/* Hidden arrow — remove extra right padding */
+.px-collapse-item__header.is-hidden-arrow[data-v-dc792000] {
+    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] {
+    transform: none;
+}
 /* First item header needs pixel corners on top */
-.px-collapse-item:first-child .px-collapse-item__header[data-v-4f9f8081]::after {
+.px-collapse-item:first-child .px-collapse-item__header[data-v-dc792000]::after {
     top: 2px;
     left: 2px;
     right: 2px;
@@ -193,12 +201,12 @@
     );
 }
 /* Middle items need left/right inset */
-.px-collapse-item:not(:first-child):not(:last-child) .px-collapse-item__header[data-v-4f9f8081]::after {
+.px-collapse-item:not(:first-child):not(:last-child) .px-collapse-item__header[data-v-dc792000]::after {
     left: 2px;
     right: 2px;
 }
 /* Last item needs pixel corners on bottom */
-.px-collapse-item:last-child .px-collapse-item__header[data-v-4f9f8081]::after {
+.px-collapse-item:last-child .px-collapse-item__header[data-v-dc792000]::after {
     bottom: 2px;
     left: 2px;
     right: 2px;
@@ -216,7 +224,7 @@
     );
 }
 /* Last item content also needs pixel corners on bottom */
-.px-collapse-item:last-child .px-collapse-item__content[data-v-4f9f8081]::after {
+.px-collapse-item:last-child .px-collapse-item__content[data-v-dc792000]::after {
     content: "";
     position: absolute;
     top: 0;
@@ -239,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-4f9f8081]::after {
+.px-collapse-item:first-child:last-child .px-collapse-item__header[data-v-dc792000]::after {
     top: 2px;
     bottom: 2px;
     left: 2px;
@@ -264,11 +272,11 @@
     );
 }
 /* Collapse Content Wrapper */
-.px-collapse-item__wapper[data-v-4f9f8081] {
+.px-collapse-item__wapper[data-v-dc792000] {
   overflow: hidden;
 }
 /* Collapse Content */
-.px-collapse-item__content[data-v-4f9f8081] {
+.px-collapse-item__content[data-v-dc792000] {
   will-change: height;
   background-color: var(--px-collapse-content-bg-color);
   overflow: hidden;
@@ -280,7 +288,7 @@
   position: relative;
 }
 /* Pixel-style dashed border at top using repeating squares */
-.px-collapse-item__content[data-v-4f9f8081]::before {
+.px-collapse-item__content[data-v-dc792000]::before {
     content: "";
     position: absolute;
     top: 0;
@@ -295,13 +303,85 @@
       transparent 12px
     );
 }
+/* Ghost variant — no pixel border/shadow, borderless style */
+.px-collapse.is-ghost[data-v-dc792000] {
+  filter: none;
+}
+.px-collapse.is-ghost[data-v-dc792000]::before,
+  .px-collapse.is-ghost[data-v-dc792000]::after {
+    display: none;
+}
+.px-collapse.is-ghost .px-collapse-item[data-v-dc792000] {
+  border-bottom: none;
+}
+.px-collapse.is-ghost .px-collapse-item__header[data-v-dc792000]::before {
+    display: none;
+}
+.px-collapse.is-ghost .px-collapse-item__header[data-v-dc792000]::after {
+    background: transparent;
+}
+.px-collapse.is-ghost .px-collapse-item__content[data-v-dc792000]::before {
+  display: none;
+}
+/* Preset color variants */
+.px-collapse--primary[data-v-dc792000] {
+    --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 {
+    background: var(--px-color-primary);
+    border-color: var(--px-color-primary);
+}
+.px-collapse--success[data-v-dc792000] {
+    --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 {
+    background: var(--px-color-success);
+    border-color: var(--px-color-success);
+}
+.px-collapse--warning[data-v-dc792000] {
+    --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 {
+    background: var(--px-color-warning);
+    border-color: var(--px-color-warning);
+}
+.px-collapse--info[data-v-dc792000] {
+    --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 {
+    background: var(--px-color-info);
+    border-color: var(--px-color-info);
+}
+.px-collapse--danger[data-v-dc792000] {
+    --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 {
+    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] {
+    order: -1;
+    margin-right: 8px;
+    margin-left: 0;
+}
 /* Animation - instant for pixel feel */
-.slide-enter-active[data-v-4f9f8081],
-.slide-leave-active[data-v-4f9f8081] {
+.slide-enter-active[data-v-dc792000],
+.slide-leave-active[data-v-dc792000] {
   transition: none;
 }
 /* Collapse Variables */
-.px-collapse[data-v-9af3f092] {
+.px-collapse[data-v-47d8126b] {
   --px-collapse-border-color: var(--px-border-color);
   --px-collapse-header-height: 48px;
   --px-collapse-header-bg-color: var(--px-fill-color-blank);
@@ -327,7 +407,7 @@
   );
 }
 /* Border layer — pixel shape */
-.px-collapse[data-v-9af3f092]::before {
+.px-collapse[data-v-47d8126b]::before {
     content: "";
     position: absolute;
     inset: 0;
@@ -357,7 +437,7 @@
     z-index: 0;
 }
 /* Fill layer — pixel shape */
-.px-collapse[data-v-9af3f092]::after {
+.px-collapse[data-v-47d8126b]::after {
     content: "";
     position: absolute;
     inset: 2px;
@@ -387,19 +467,19 @@
     z-index: 0;
 }
 /* Collapse Item */
-.px-collapse-item[data-v-9af3f092] {
+.px-collapse-item[data-v-47d8126b] {
   position: relative;
   z-index: 1;
 }
-.px-collapse-item[data-v-9af3f092]:not(:last-child) {
+.px-collapse-item[data-v-47d8126b]:not(:last-child) {
     border-bottom: 2px solid var(--px-collapse-border-color);
 }
 /* Disabled state */
-.px-collapse-item.is-disabled[data-v-9af3f092] {
+.px-collapse-item.is-disabled[data-v-47d8126b] {
     opacity: 0.6;
 }
 /* Collapse Header */
-.px-collapse-item__header[data-v-9af3f092] {
+.px-collapse-item__header[data-v-47d8126b] {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -417,7 +497,7 @@
   position: relative;
 }
 /* Pixel selector indicator - small square */
-.px-collapse-item__header[data-v-9af3f092]::before {
+.px-collapse-item__header[data-v-47d8126b]::before {
     content: "";
     position: absolute;
     left: 10px;
@@ -430,7 +510,7 @@
     z-index: 2;
 }
 /* Background layer with pixel corners for first item */
-.px-collapse-item__header[data-v-9af3f092]::after {
+.px-collapse-item__header[data-v-47d8126b]::after {
     content: "";
     position: absolute;
     inset: 0;
@@ -438,45 +518,53 @@
     z-index: -1;
 }
 /* Hover effect */
-.px-collapse-item__header[data-v-9af3f092]:hover:not(.is-disabled)::after {
+.px-collapse-item__header[data-v-47d8126b]:hover:not(.is-disabled)::after {
       background-color: var(--px-fill-color-light);
 }
-.px-collapse-item__header[data-v-9af3f092]:hover:not(.is-disabled)::before {
+.px-collapse-item__header[data-v-47d8126b]:hover:not(.is-disabled)::before {
       border-color: var(--px-hover-border-color);
 }
 /* Disabled state */
-.px-collapse-item__header.is-disabled[data-v-9af3f092] {
+.px-collapse-item__header.is-disabled[data-v-47d8126b] {
     color: var(--px-collapse-disabled-text-color);
     cursor: not-allowed;
     background-image: none;
 }
 /* Active state */
-.px-collapse-item__header.is-active[data-v-9af3f092]::after {
+.px-collapse-item__header.is-active[data-v-47d8126b]::after {
       background-color: var(--px-collapse-active-bg-color);
 }
 /* Pixel indicator - filled square */
-.px-collapse-item__header.is-active[data-v-9af3f092]::before {
+.px-collapse-item__header.is-active[data-v-47d8126b]::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-9af3f092] {
+.px-collapse-item__header.is-active .header-angle[data-v-47d8126b] {
       transform: rotate(90deg);
 }
 /* Title section */
-.px-collapse-item__header .px-collapse-item__title[data-v-9af3f092] {
+.px-collapse-item__header .px-collapse-item__title[data-v-47d8126b] {
     flex: 1;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 /* Arrow icon */
-.px-collapse-item__header .header-angle[data-v-9af3f092] {
+.px-collapse-item__header .header-angle[data-v-47d8126b] {
     transition: none;
     color: var(--px-text-color-secondary);
 }
+/* Hidden arrow — remove extra right padding */
+.px-collapse-item__header.is-hidden-arrow[data-v-47d8126b] {
+    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] {
+    transform: none;
+}
 /* First item header needs pixel corners on top */
-.px-collapse-item:first-child .px-collapse-item__header[data-v-9af3f092]::after {
+.px-collapse-item:first-child .px-collapse-item__header[data-v-47d8126b]::after {
     top: 2px;
     left: 2px;
     right: 2px;
@@ -495,12 +583,12 @@
     );
 }
 /* Middle items need left/right inset */
-.px-collapse-item:not(:first-child):not(:last-child) .px-collapse-item__header[data-v-9af3f092]::after {
+.px-collapse-item:not(:first-child):not(:last-child) .px-collapse-item__header[data-v-47d8126b]::after {
     left: 2px;
     right: 2px;
 }
 /* Last item needs pixel corners on bottom */
-.px-collapse-item:last-child .px-collapse-item__header[data-v-9af3f092]::after {
+.px-collapse-item:last-child .px-collapse-item__header[data-v-47d8126b]::after {
     bottom: 2px;
     left: 2px;
     right: 2px;
@@ -518,7 +606,7 @@
     );
 }
 /* Last item content also needs pixel corners on bottom */
-.px-collapse-item:last-child .px-collapse-item__content[data-v-9af3f092]::after {
+.px-collapse-item:last-child .px-collapse-item__content[data-v-47d8126b]::after {
     content: "";
     position: absolute;
     top: 0;
@@ -541,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-9af3f092]::after {
+.px-collapse-item:first-child:last-child .px-collapse-item__header[data-v-47d8126b]::after {
     top: 2px;
     bottom: 2px;
     left: 2px;
@@ -566,11 +654,11 @@
     );
 }
 /* Collapse Content Wrapper */
-.px-collapse-item__wapper[data-v-9af3f092] {
+.px-collapse-item__wapper[data-v-47d8126b] {
   overflow: hidden;
 }
 /* Collapse Content */
-.px-collapse-item__content[data-v-9af3f092] {
+.px-collapse-item__content[data-v-47d8126b] {
   will-change: height;
   background-color: var(--px-collapse-content-bg-color);
   overflow: hidden;
@@ -582,7 +670,7 @@
   position: relative;
 }
 /* Pixel-style dashed border at top using repeating squares */
-.px-collapse-item__content[data-v-9af3f092]::before {
+.px-collapse-item__content[data-v-47d8126b]::before {
     content: "";
     position: absolute;
     top: 0;
@@ -597,8 +685,80 @@
       transparent 12px
     );
 }
+/* Ghost variant — no pixel border/shadow, borderless style */
+.px-collapse.is-ghost[data-v-47d8126b] {
+  filter: none;
+}
+.px-collapse.is-ghost[data-v-47d8126b]::before,
+  .px-collapse.is-ghost[data-v-47d8126b]::after {
+    display: none;
+}
+.px-collapse.is-ghost .px-collapse-item[data-v-47d8126b] {
+  border-bottom: none;
+}
+.px-collapse.is-ghost .px-collapse-item__header[data-v-47d8126b]::before {
+    display: none;
+}
+.px-collapse.is-ghost .px-collapse-item__header[data-v-47d8126b]::after {
+    background: transparent;
+}
+.px-collapse.is-ghost .px-collapse-item__content[data-v-47d8126b]::before {
+  display: none;
+}
+/* Preset color variants */
+.px-collapse--primary[data-v-47d8126b] {
+    --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 {
+    background: var(--px-color-primary);
+    border-color: var(--px-color-primary);
+}
+.px-collapse--success[data-v-47d8126b] {
+    --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 {
+    background: var(--px-color-success);
+    border-color: var(--px-color-success);
+}
+.px-collapse--warning[data-v-47d8126b] {
+    --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 {
+    background: var(--px-color-warning);
+    border-color: var(--px-color-warning);
+}
+.px-collapse--info[data-v-47d8126b] {
+    --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 {
+    background: var(--px-color-info);
+    border-color: var(--px-color-info);
+}
+.px-collapse--danger[data-v-47d8126b] {
+    --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 {
+    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] {
+    order: -1;
+    margin-right: 8px;
+    margin-left: 0;
+}
 /* Animation - instant for pixel feel */
-.slide-enter-active[data-v-9af3f092],
-.slide-leave-active[data-v-9af3f092] {
+.slide-enter-active[data-v-47d8126b],
+.slide-leave-active[data-v-47d8126b] {
   transition: none;
 }