sakana-element 2.1.2 → 2.1.4

package/dist/theme/Alert.css

@@ -1,5 +1,5 @@
 /* Alert Variables */
-.px-alert[data-v-9f432773] {
+.px-alert[data-v-772da9f8] {
   --px-alert-padding: 12px 16px;
   --px-alert-bg-color: var(--px-fill-color-blank);
   --px-alert-border-color: var(--px-border-color-dark);
@@ -15,7 +15,7 @@
   --px-alert-shadow-color: var(--px-shadow-color);
 }
 /* Base Alert Styles - Pixel Game Notification */
-.px-alert[data-v-9f432773] {
+.px-alert[data-v-772da9f8] {
   padding: var(--px-alert-padding);
   margin: 0;
   box-sizing: border-box;
@@ -38,7 +38,7 @@
   transition: none;
 }
 /* Border layer — filled with border color, clipped to pixel shape */
-.px-alert[data-v-9f432773]::before {
+.px-alert[data-v-772da9f8]::before {
     content: '';
     position: absolute;
     inset: 0;
@@ -52,7 +52,7 @@
     z-index: -1;
 }
 /* Fill layer — inset by border width, filled with bg color */
-.px-alert[data-v-9f432773]::after {
+.px-alert[data-v-772da9f8]::after {
     content: '';
     position: absolute;
     inset: 2px;
@@ -66,42 +66,44 @@
     z-index: -1;
 }
 /* Icon styling */
-.px-alert .px-alert__icon[data-v-9f432773] {
+.px-alert .px-alert__icon[data-v-772da9f8] {
     color: var(--px-alert-text-color);
     font-size: var(--px-alert-icon-size);
     width: var(--px-alert-icon-size);
     margin-right: var(--px-alert-icon-margin);
     flex-shrink: 0;
 }
-.px-alert .px-alert__icon.big-icon[data-v-9f432773] {
+.px-alert .px-alert__icon.big-icon[data-v-772da9f8] {
       font-size: var(--px-alert-big-icon-size);
       width: var(--px-alert-big-icon-size);
       margin-right: var(--px-alert-big-icon-margin);
 }
 /* Content area */
-.px-alert .px-alert__content[data-v-9f432773] {
+.px-alert .px-alert__content[data-v-772da9f8] {
     color: var(--px-alert-text-color);
-    vertical-align: text-top;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
     flex: 1;
 }
-.px-alert .px-alert__content .px-alert__title[data-v-9f432773] {
+.px-alert .px-alert__content .px-alert__title[data-v-772da9f8] {
       font-size: var(--px-alert-title-font-size);
       line-height: 1.5;
       font-weight: 400;
 }
-.px-alert .px-alert__content .px-alert__title.with-desc[data-v-9f432773] {
+.px-alert .px-alert__content .px-alert__title.with-desc[data-v-772da9f8] {
         font-size: var(--px-alert-title-font-size-with-desc);
         font-weight: 500;
         margin-bottom: 4px;
 }
-.px-alert .px-alert__content .px-alert__description[data-v-9f432773] {
+.px-alert .px-alert__content .px-alert__description[data-v-772da9f8] {
       font-size: var(--px-alert-desc-font-size);
       margin: 0;
       line-height: 1.4;
       opacity: 0.9;
 }
 /* Close button - pixel style */
-.px-alert .px-alert__content .px-alert__close[data-v-9f432773] {
+.px-alert .px-alert__content .px-alert__close[data-v-772da9f8] {
       font-size: var(--px-font-size-large);
       opacity: 1;
       position: absolute;
@@ -111,109 +113,183 @@
       padding: 2px;
       transition: none;
 }
-.px-alert .px-alert__content .px-alert__close[data-v-9f432773]:hover {
+.px-alert .px-alert__content .px-alert__close[data-v-772da9f8]:hover {
         transform: translate(-1px, -1px);
 }
-.px-alert .px-alert__content .px-alert__close[data-v-9f432773]:active {
+.px-alert .px-alert__content .px-alert__close[data-v-772da9f8]:active {
         transform: translate(1px, 1px);
 }
-.px-alert .px-alert__content .px-alert__close[data-v-9f432773] .px-icon {
+.px-alert .px-alert__content .px-alert__close[data-v-772da9f8] .px-icon {
         vertical-align: top;
 }
 /* Light theme close button */
-.px-alert .px-alert__content.px-alert__light .px-alert__close[data-v-9f432773] {
+.px-alert .px-alert__content.px-alert__light .px-alert__close[data-v-772da9f8] {
       color: var(--px-text-color-secondary);
 }
-.px-alert .px-alert__content.px-alert__light .px-alert__close[data-v-9f432773]:hover {
+.px-alert .px-alert__content.px-alert__light .px-alert__close[data-v-772da9f8]:hover {
         color: var(--px-text-color-primary);
 }
 /* Dark theme close button */
-.px-alert .px-alert__content.px-alert__dark .px-alert__close[data-v-9f432773] {
+.px-alert .px-alert__content.px-alert__dark .px-alert__close[data-v-772da9f8] {
       color: rgba(255, 255, 255, 0.7);
 }
-.px-alert .px-alert__content.px-alert__dark .px-alert__close[data-v-9f432773]:hover {
+.px-alert .px-alert__content.px-alert__dark .px-alert__close[data-v-772da9f8]:hover {
         color: var(--px-color-white);
 }
 /* Center text alignment */
-.px-alert.text-center[data-v-9f432773] {
+.px-alert.text-center[data-v-772da9f8] {
     justify-content: center;
 }
-.px-alert.text-center span[data-v-9f432773],
-    .px-alert.text-center p[data-v-9f432773] {
+.px-alert.text-center span[data-v-772da9f8],
+    .px-alert.text-center p[data-v-772da9f8] {
       text-align: center;
 }
+/* Outline variant - solid border, transparent bg, no pixel shadow */
+.px-alert.is-outline[data-v-772da9f8] {
+    border: 2px solid var(--px-alert-border-color);
+    filter: none;
+}
+.px-alert.is-outline[data-v-772da9f8]::before {
+      display: none;
+}
+.px-alert.is-outline[data-v-772da9f8]::after {
+      clip-path: none;
+      inset: 0;
+      background: var(--px-alert-bg-color);
+}
+/* Dash variant - dashed border, light bg, no pixel shadow */
+.px-alert.is-dash[data-v-772da9f8] {
+    border: 2px dashed var(--px-alert-border-color);
+    filter: none;
+}
+.px-alert.is-dash[data-v-772da9f8]::before {
+      display: none;
+}
+.px-alert.is-dash[data-v-772da9f8]::after {
+      clip-path: none;
+      inset: 0;
+      background: var(--px-alert-bg-color);
+}
 /* Animation - instant for pixel feel */
-.px-alert-fade-enter-from[data-v-9f432773],
-.px-alert-fade-leave-to[data-v-9f432773] {
+.px-alert-fade-enter-from[data-v-772da9f8],
+.px-alert-fade-leave-to[data-v-772da9f8] {
   opacity: 0;
   transform: translateY(-8px);
 }
-.px-alert-fade-enter-active[data-v-9f432773],
-.px-alert-fade-leave-active[data-v-9f432773] {
+.px-alert-fade-enter-active[data-v-772da9f8],
+.px-alert-fade-leave-active[data-v-772da9f8] {
   transition: opacity 0.15s, transform 0.15s;
 }
 /* Type variants - Light theme */
-.px-alert__success.px-alert__light[data-v-9f432773] {
+.px-alert__success.px-alert__light[data-v-772da9f8] {
     --px-alert-text-color: var(--px-color-success-dark);
     --px-alert-bg-color: var(--px-color-success-light-9);
     --px-alert-border-color: var(--px-color-success);
     --px-alert-shadow-color: var(--px-color-success-dark);
 }
-.px-alert__success.px-alert__dark[data-v-9f432773] {
+.px-alert__success.px-alert__dark[data-v-772da9f8] {
     --px-alert-text-color: var(--px-color-white);
     --px-alert-bg-color: var(--px-color-success);
     --px-alert-border-color: var(--px-color-success-dark);
     --px-alert-shadow-color: var(--px-color-success-dark);
 }
 /* Pixel highlight effect for dark theme */
-.px-alert__success.px-alert__dark[data-v-9f432773]::after {
+.px-alert__success.px-alert__dark[data-v-772da9f8]::after {
       box-shadow: inset 2px 2px 0 0 rgba(255, 255, 255, 0.15);
+}
+/* Outline variant for type */
+.px-alert__success.is-outline[data-v-772da9f8] {
+    --px-alert-text-color: var(--px-color-success);
+    --px-alert-bg-color: transparent;
+    --px-alert-border-color: var(--px-color-success);
+}
+/* Dash variant for type */
+.px-alert__success.is-dash[data-v-772da9f8] {
+    --px-alert-text-color: var(--px-color-success);
+    --px-alert-bg-color: var(--px-color-success-light-9);
+    --px-alert-border-color: var(--px-color-success);
 }
-.px-alert__warning.px-alert__light[data-v-9f432773] {
+.px-alert__warning.px-alert__light[data-v-772da9f8] {
     --px-alert-text-color: var(--px-color-warning-dark);
     --px-alert-bg-color: var(--px-color-warning-light-9);
     --px-alert-border-color: var(--px-color-warning);
     --px-alert-shadow-color: var(--px-color-warning-dark);
 }
-.px-alert__warning.px-alert__dark[data-v-9f432773] {
+.px-alert__warning.px-alert__dark[data-v-772da9f8] {
     --px-alert-text-color: var(--px-color-white);
     --px-alert-bg-color: var(--px-color-warning);
     --px-alert-border-color: var(--px-color-warning-dark);
     --px-alert-shadow-color: var(--px-color-warning-dark);
 }
 /* Pixel highlight effect for dark theme */
-.px-alert__warning.px-alert__dark[data-v-9f432773]::after {
+.px-alert__warning.px-alert__dark[data-v-772da9f8]::after {
       box-shadow: inset 2px 2px 0 0 rgba(255, 255, 255, 0.15);
+}
+/* Outline variant for type */
+.px-alert__warning.is-outline[data-v-772da9f8] {
+    --px-alert-text-color: var(--px-color-warning);
+    --px-alert-bg-color: transparent;
+    --px-alert-border-color: var(--px-color-warning);
+}
+/* Dash variant for type */
+.px-alert__warning.is-dash[data-v-772da9f8] {
+    --px-alert-text-color: var(--px-color-warning);
+    --px-alert-bg-color: var(--px-color-warning-light-9);
+    --px-alert-border-color: var(--px-color-warning);
 }
-.px-alert__info.px-alert__light[data-v-9f432773] {
+.px-alert__info.px-alert__light[data-v-772da9f8] {
     --px-alert-text-color: var(--px-color-info-dark);
     --px-alert-bg-color: var(--px-color-info-light-9);
     --px-alert-border-color: var(--px-color-info);
     --px-alert-shadow-color: var(--px-color-info-dark);
 }
-.px-alert__info.px-alert__dark[data-v-9f432773] {
+.px-alert__info.px-alert__dark[data-v-772da9f8] {
     --px-alert-text-color: var(--px-color-white);
     --px-alert-bg-color: var(--px-color-info);
     --px-alert-border-color: var(--px-color-info-dark);
     --px-alert-shadow-color: var(--px-color-info-dark);
 }
 /* Pixel highlight effect for dark theme */
-.px-alert__info.px-alert__dark[data-v-9f432773]::after {
+.px-alert__info.px-alert__dark[data-v-772da9f8]::after {
       box-shadow: inset 2px 2px 0 0 rgba(255, 255, 255, 0.15);
+}
+/* Outline variant for type */
+.px-alert__info.is-outline[data-v-772da9f8] {
+    --px-alert-text-color: var(--px-color-info);
+    --px-alert-bg-color: transparent;
+    --px-alert-border-color: var(--px-color-info);
+}
+/* Dash variant for type */
+.px-alert__info.is-dash[data-v-772da9f8] {
+    --px-alert-text-color: var(--px-color-info);
+    --px-alert-bg-color: var(--px-color-info-light-9);
+    --px-alert-border-color: var(--px-color-info);
 }
-.px-alert__danger.px-alert__light[data-v-9f432773] {
+.px-alert__danger.px-alert__light[data-v-772da9f8] {
     --px-alert-text-color: var(--px-color-danger-dark);
     --px-alert-bg-color: var(--px-color-danger-light-9);
     --px-alert-border-color: var(--px-color-danger);
     --px-alert-shadow-color: var(--px-color-danger-dark);
 }
-.px-alert__danger.px-alert__dark[data-v-9f432773] {
+.px-alert__danger.px-alert__dark[data-v-772da9f8] {
     --px-alert-text-color: var(--px-color-white);
     --px-alert-bg-color: var(--px-color-danger);
     --px-alert-border-color: var(--px-color-danger-dark);
     --px-alert-shadow-color: var(--px-color-danger-dark);
 }
 /* Pixel highlight effect for dark theme */
-.px-alert__danger.px-alert__dark[data-v-9f432773]::after {
+.px-alert__danger.px-alert__dark[data-v-772da9f8]::after {
       box-shadow: inset 2px 2px 0 0 rgba(255, 255, 255, 0.15);
+}
+/* Outline variant for type */
+.px-alert__danger.is-outline[data-v-772da9f8] {
+    --px-alert-text-color: var(--px-color-danger);
+    --px-alert-bg-color: transparent;
+    --px-alert-border-color: var(--px-color-danger);
+}
+/* Dash variant for type */
+.px-alert__danger.is-dash[data-v-772da9f8] {
+    --px-alert-text-color: var(--px-color-danger);
+    --px-alert-bg-color: var(--px-color-danger-light-9);
+    --px-alert-border-color: var(--px-color-danger);
 }

package/dist/theme/Badge.css

@@ -0,0 +1,208 @@
+/* Badge Variables */
+.px-badge[data-v-c5a490ec] {
+  --px-badge-text-color: var(--px-color-white);
+  --px-badge-bg-color: var(--px-color-primary);
+  --px-badge-border-color: var(--px-color-primary-dark);
+  --px-badge-shadow-color: var(--px-color-primary-dark);
+  --px-badge-font-size: var(--px-font-size-extra-small);
+  --px-badge-height: 22px;
+  --px-badge-padding: 0 8px;
+}
+/* Base Badge Styles - Pixel Game Aesthetic */
+.px-badge[data-v-c5a490ec] {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  height: var(--px-badge-height);
+  padding: var(--px-badge-padding);
+  font-size: var(--px-badge-font-size);
+  font-family: var(--px-font-family);
+  font-weight: 500;
+  color: var(--px-badge-text-color);
+  line-height: 1;
+  white-space: nowrap;
+  box-sizing: border-box;
+  position: relative;
+  background: transparent;
+  vertical-align: middle;
+
+  /* Remove traditional border — pixel border via pseudo-elements */
+  border: none;
+
+  /* Pixel shadow via drop-shadow */
+  filter: drop-shadow(2px 2px 0px var(--px-badge-shadow-color));
+
+  transition: none;
+}
+/* Border layer — filled with border color, clipped to pixel shape */
+.px-badge[data-v-c5a490ec]::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: var(--px-badge-border-color);
+    clip-path: polygon(
+      0 2px, 2px 2px, 2px 0,
+      calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px,
+      100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%,
+      2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px)
+    );
+    z-index: -1;
+}
+/* Fill layer — inset by border width, filled with bg color */
+.px-badge[data-v-c5a490ec]::after {
+    content: '';
+    position: absolute;
+    inset: 2px;
+    background: var(--px-badge-bg-color);
+    clip-path: polygon(
+      0 2px, 2px 2px, 2px 0,
+      calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px,
+      100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%,
+      2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px)
+    );
+    z-index: -1;
+}
+.px-badge + .px-badge[data-v-c5a490ec] {
+    margin-left: 8px;
+}
+/* Outline variant */
+.px-badge.is-outline[data-v-c5a490ec] {
+    border: 2px solid var(--px-badge-border-color);
+    filter: none;
+}
+.px-badge.is-outline[data-v-c5a490ec]::before {
+      display: none;
+}
+.px-badge.is-outline[data-v-c5a490ec]::after {
+      clip-path: none;
+      inset: 0;
+      background: var(--px-badge-bg-color);
+}
+/* Dash variant */
+.px-badge.is-dash[data-v-c5a490ec] {
+    border: 2px dashed var(--px-badge-border-color);
+    filter: none;
+}
+.px-badge.is-dash[data-v-c5a490ec]::before {
+      display: none;
+}
+.px-badge.is-dash[data-v-c5a490ec]::after {
+      clip-path: none;
+      inset: 0;
+      background: var(--px-badge-bg-color);
+}
+/* Round - Pixel-style rounded corners */
+.px-badge.is-round[data-v-c5a490ec] {
+    padding: 0 10px;
+}
+.px-badge.is-round[data-v-c5a490ec]::before, .px-badge.is-round[data-v-c5a490ec]::after {
+      clip-path: polygon(
+        0 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0,
+        calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px,
+        100% calc(100% - 4px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px), calc(100% - 4px) 100%,
+        4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px)
+      );
+}
+/* Type variants */
+.px-badge--primary[data-v-c5a490ec] {
+    --px-badge-text-color: var(--px-color-white);
+    --px-badge-bg-color: var(--px-color-primary);
+    --px-badge-border-color: var(--px-color-primary-dark);
+    --px-badge-shadow-color: var(--px-color-primary-dark);
+}
+/* Outline variant for type */
+.px-badge--primary.is-outline[data-v-c5a490ec] {
+    --px-badge-text-color: var(--px-color-primary);
+    --px-badge-bg-color: transparent;
+    --px-badge-border-color: var(--px-color-primary);
+}
+/* Dash variant for type */
+.px-badge--primary.is-dash[data-v-c5a490ec] {
+    --px-badge-text-color: var(--px-color-primary);
+    --px-badge-bg-color: var(--px-color-primary-light-9);
+    --px-badge-border-color: var(--px-color-primary);
+}
+.px-badge--success[data-v-c5a490ec] {
+    --px-badge-text-color: var(--px-color-white);
+    --px-badge-bg-color: var(--px-color-success);
+    --px-badge-border-color: var(--px-color-success-dark);
+    --px-badge-shadow-color: var(--px-color-success-dark);
+}
+/* Outline variant for type */
+.px-badge--success.is-outline[data-v-c5a490ec] {
+    --px-badge-text-color: var(--px-color-success);
+    --px-badge-bg-color: transparent;
+    --px-badge-border-color: var(--px-color-success);
+}
+/* Dash variant for type */
+.px-badge--success.is-dash[data-v-c5a490ec] {
+    --px-badge-text-color: var(--px-color-success);
+    --px-badge-bg-color: var(--px-color-success-light-9);
+    --px-badge-border-color: var(--px-color-success);
+}
+.px-badge--info[data-v-c5a490ec] {
+    --px-badge-text-color: var(--px-color-white);
+    --px-badge-bg-color: var(--px-color-info);
+    --px-badge-border-color: var(--px-color-info-dark);
+    --px-badge-shadow-color: var(--px-color-info-dark);
+}
+/* Outline variant for type */
+.px-badge--info.is-outline[data-v-c5a490ec] {
+    --px-badge-text-color: var(--px-color-info);
+    --px-badge-bg-color: transparent;
+    --px-badge-border-color: var(--px-color-info);
+}
+/* Dash variant for type */
+.px-badge--info.is-dash[data-v-c5a490ec] {
+    --px-badge-text-color: var(--px-color-info);
+    --px-badge-bg-color: var(--px-color-info-light-9);
+    --px-badge-border-color: var(--px-color-info);
+}
+.px-badge--warning[data-v-c5a490ec] {
+    --px-badge-text-color: var(--px-color-white);
+    --px-badge-bg-color: var(--px-color-warning);
+    --px-badge-border-color: var(--px-color-warning-dark);
+    --px-badge-shadow-color: var(--px-color-warning-dark);
+}
+/* Outline variant for type */
+.px-badge--warning.is-outline[data-v-c5a490ec] {
+    --px-badge-text-color: var(--px-color-warning);
+    --px-badge-bg-color: transparent;
+    --px-badge-border-color: var(--px-color-warning);
+}
+/* Dash variant for type */
+.px-badge--warning.is-dash[data-v-c5a490ec] {
+    --px-badge-text-color: var(--px-color-warning);
+    --px-badge-bg-color: var(--px-color-warning-light-9);
+    --px-badge-border-color: var(--px-color-warning);
+}
+.px-badge--danger[data-v-c5a490ec] {
+    --px-badge-text-color: var(--px-color-white);
+    --px-badge-bg-color: var(--px-color-danger);
+    --px-badge-border-color: var(--px-color-danger-dark);
+    --px-badge-shadow-color: var(--px-color-danger-dark);
+}
+/* Outline variant for type */
+.px-badge--danger.is-outline[data-v-c5a490ec] {
+    --px-badge-text-color: var(--px-color-danger);
+    --px-badge-bg-color: transparent;
+    --px-badge-border-color: var(--px-color-danger);
+}
+/* Dash variant for type */
+.px-badge--danger.is-dash[data-v-c5a490ec] {
+    --px-badge-text-color: var(--px-color-danger);
+    --px-badge-bg-color: var(--px-color-danger-light-9);
+    --px-badge-border-color: var(--px-color-danger);
+}
+/* Size variants */
+.px-badge--large[data-v-c5a490ec] {
+  --px-badge-height: 28px;
+  --px-badge-padding: 0 12px;
+  --px-badge-font-size: var(--px-font-size-small);
+}
+.px-badge--small[data-v-c5a490ec] {
+  --px-badge-height: 18px;
+  --px-badge-padding: 0 6px;
+  --px-badge-font-size: 10px;
+  filter: drop-shadow(1px 1px 0px var(--px-badge-shadow-color));
+}