sakana-element 2.3.0 → 2.4.0

package/dist/theme/Kbd.css

@@ -0,0 +1,104 @@
+/* Kbd Variables */
+.px-kbd[data-v-fa07bd0e] {
+  --px-kbd-text-color: var(--px-text-color-primary);
+  --px-kbd-bg-color: var(--px-fill-color-blank);
+  --px-kbd-border-color: var(--px-border-color);
+  --px-kbd-shadow-color: var(--px-shadow-color);
+  --px-kbd-font-size: var(--px-font-size-extra-small);
+  --px-kbd-height: 24px;
+  --px-kbd-padding: 0 6px;
+  --px-kbd-inset-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.08);
+  --px-kbd-inset-highlight: inset -2px -2px 0 0 rgba(255, 255, 255, 0.15);
+}
+/* Base Kbd Styles - Pixel Keycap Aesthetic */
+.px-kbd[data-v-fa07bd0e] {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-family: var(--px-font-family);
+  vertical-align: middle;
+}
+/* Individual key element */
+.px-kbd__key[data-v-fa07bd0e] {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  height: var(--px-kbd-height);
+  min-width: var(--px-kbd-height);
+  padding: var(--px-kbd-padding);
+  font-size: var(--px-kbd-font-size);
+  font-family: var(--px-font-family);
+  font-weight: 500;
+  color: var(--px-kbd-text-color);
+  line-height: 1;
+  white-space: nowrap;
+  box-sizing: border-box;
+  position: relative;
+  background: transparent;
+
+  border: none;
+
+  /* Pixel shadow via drop-shadow */
+  filter: drop-shadow(2px 2px 0px var(--px-kbd-shadow-color));
+
+  transition: none;
+}
+/* Border layer — pixel shape with 2px staircase corners */
+.px-kbd__key[data-v-fa07bd0e]::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: var(--px-kbd-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 — sunken keycap bevel */
+.px-kbd__key[data-v-fa07bd0e]::after {
+    content: '';
+    position: absolute;
+    inset: 2px;
+    background: var(--px-kbd-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)
+    );
+    box-shadow: var(--px-kbd-inset-shadow), var(--px-kbd-inset-highlight);
+    z-index: -1;
+}
+/* Abbr element — remove default underline */
+.px-kbd__abbr[data-v-fa07bd0e] {
+  text-decoration: none;
+  position: relative;
+  z-index: 1;
+}
+/* Icon inside key */
+.px-kbd__key .px-icon[data-v-fa07bd0e] {
+  position: relative;
+  z-index: 1;
+}
+/* Size variants */
+.px-kbd--large[data-v-fa07bd0e] {
+  --px-kbd-height: 30px;
+  --px-kbd-padding: 0 10px;
+  --px-kbd-font-size: var(--px-font-size-base);
+}
+.px-kbd--small[data-v-fa07bd0e] {
+  --px-kbd-height: 20px;
+  --px-kbd-padding: 0 4px;
+  --px-kbd-font-size: 10px;
+}
+.px-kbd--small .px-kbd__key[data-v-fa07bd0e] {
+    filter: drop-shadow(1px 1px 0px var(--px-kbd-shadow-color));
+}
+/* Dark mode */
+html.dark .px-kbd[data-v-fa07bd0e] {
+  --px-kbd-inset-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.2);
+  --px-kbd-inset-highlight: inset -2px -2px 0 0 rgba(255, 255, 255, 0.08);
+}

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

@@ -290,7 +290,7 @@
 .px-message.fade-up-enter-active,
 .px-message.fade-up-leave-active {
   transition: opacity 0.15s steps(3), transform 0.15s steps(3);
-}
+}
 /* MessageBox Variables */
 .px-message-box {
   --px-message-box-title-color: var(--px-text-color-primary);

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

@@ -1,5 +1,5 @@
 /* Notification Variables */
-.px-notification[data-v-4191d2e2] {
+.px-notification[data-v-5c4c1be5] {
   --px-notification-width: 330px;
   --px-notification-padding: 14px 20px;
   --px-notification-border-color: var(--px-border-color);
@@ -20,7 +20,7 @@
   --px-notification-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.08);
 }
 /* Base Notification Styles - Pixel Game Aesthetic */
-.px-notification[data-v-4191d2e2] {
+.px-notification[data-v-5c4c1be5] {
   display: flex;
   width: var(--px-notification-width);
   padding: var(--px-notification-padding);
@@ -42,7 +42,7 @@
   transition: none;
 }
 /* Border layer — 3-step staircase clip (8px corners) */
-.px-notification[data-v-4191d2e2]::before {
+.px-notification[data-v-5c4c1be5]::before {
     content: '';
     position: absolute;
     inset: 0;
@@ -56,7 +56,7 @@
     z-index: 0;
 }
 /* Fill layer — 4px inset, 2-step staircase chamfer, beveled */
-.px-notification[data-v-4191d2e2]::after {
+.px-notification[data-v-5c4c1be5]::after {
     content: '';
     position: absolute;
     inset: 4px;
@@ -70,19 +70,19 @@
     box-shadow: var(--px-notification-inset-highlight), var(--px-notification-inset-shadow);
     z-index: 0;
 }
-.px-notification.right[data-v-4191d2e2] {
+.px-notification.right[data-v-5c4c1be5] {
     right: 16px;
 }
-.px-notification.left[data-v-4191d2e2] {
+.px-notification.left[data-v-5c4c1be5] {
     left: 16px;
 }
-.px-notification .px-notification__text[data-v-4191d2e2] {
+.px-notification .px-notification__text[data-v-5c4c1be5] {
     position: relative;
     z-index: 1;
     margin: 0 10px;
     flex: 1;
 }
-.px-notification .px-notification__icon[data-v-4191d2e2] {
+.px-notification .px-notification__icon[data-v-5c4c1be5] {
     position: relative;
     z-index: 1;
     height: var(--px-notification-icon-size);
@@ -91,7 +91,7 @@
     color: var(--px-notification-icon-color);
     flex-shrink: 0;
 }
-.px-notification .px-notification__title[data-v-4191d2e2] {
+.px-notification .px-notification__title[data-v-5c4c1be5] {
     position: relative;
     z-index: 1;
     font-weight: 500;
@@ -103,7 +103,7 @@
     padding-bottom: 8px;
 }
 /* Pixel-dashed divider at bottom */
-.px-notification .px-notification__title[data-v-4191d2e2]::after {
+.px-notification .px-notification__title[data-v-5c4c1be5]::after {
       content: "";
       position: absolute;
       bottom: 0;
@@ -118,7 +118,7 @@
         transparent 12px
       );
 }
-.px-notification .px-notification__content[data-v-4191d2e2] {
+.px-notification .px-notification__content[data-v-5c4c1be5] {
     position: relative;
     z-index: 1;
     font-size: var(--px-notification-content-font-size);
@@ -128,7 +128,7 @@
     color: var(--px-notification-content-color);
     text-align: left;
 }
-.px-notification .px-notification__close[data-v-4191d2e2] {
+.px-notification .px-notification__close[data-v-5c4c1be5] {
     position: absolute;
     top: 14px;
     right: 14px;
@@ -138,61 +138,61 @@
     z-index: 1;
     transition: none;
 }
-.px-notification .px-notification__close .px-icon[data-v-4191d2e2] {
+.px-notification .px-notification__close .px-icon[data-v-5c4c1be5] {
       cursor: pointer;
       transition: none;
 }
-.px-notification .px-notification__close .px-icon[data-v-4191d2e2]:hover {
+.px-notification .px-notification__close .px-icon[data-v-5c4c1be5]:hover {
         color: var(--px-notification-close-hover-color);
         transform: translate(-1px, -1px);
 }
-.px-notification .px-notification__close .px-icon[data-v-4191d2e2]:active {
+.px-notification .px-notification__close .px-icon[data-v-5c4c1be5]:active {
         transform: translate(1px, 1px);
 }
 /* Map error type to danger color palette so @each loops handle both */
-.px-notification--error[data-v-4191d2e2] {
+.px-notification--error[data-v-5c4c1be5] {
   --px-color-error: var(--px-color-danger);
   --px-color-error-dark: var(--px-color-danger-dark);
   --px-color-error-light-5: var(--px-color-danger-light-5);
   --px-color-error-light-9: var(--px-color-danger-light-9);
 }
 /* Type variants with colored borders and shadows */
-.px-notification--info[data-v-4191d2e2] {
+.px-notification--info[data-v-5c4c1be5] {
     --px-notification-icon-color: var(--px-color-info);
     --px-notification-border-color: var(--px-color-info);
     --px-notification-shadow-color: var(--px-color-info-dark);
     --px-notification-divider-color: var(--px-color-info-light-5, var(--px-color-info));
 }
-.px-notification--success[data-v-4191d2e2] {
+.px-notification--success[data-v-5c4c1be5] {
     --px-notification-icon-color: var(--px-color-success);
     --px-notification-border-color: var(--px-color-success);
     --px-notification-shadow-color: var(--px-color-success-dark);
     --px-notification-divider-color: var(--px-color-success-light-5, var(--px-color-success));
 }
-.px-notification--warning[data-v-4191d2e2] {
+.px-notification--warning[data-v-5c4c1be5] {
     --px-notification-icon-color: var(--px-color-warning);
     --px-notification-border-color: var(--px-color-warning);
     --px-notification-shadow-color: var(--px-color-warning-dark);
     --px-notification-divider-color: var(--px-color-warning-light-5, var(--px-color-warning));
 }
-.px-notification--danger[data-v-4191d2e2] {
+.px-notification--danger[data-v-5c4c1be5] {
     --px-notification-icon-color: var(--px-color-danger);
     --px-notification-border-color: var(--px-color-danger);
     --px-notification-shadow-color: var(--px-color-danger-dark);
     --px-notification-divider-color: var(--px-color-danger-light-5, var(--px-color-danger));
 }
-.px-notification--error[data-v-4191d2e2] {
+.px-notification--error[data-v-5c4c1be5] {
     --px-notification-icon-color: var(--px-color-error);
     --px-notification-border-color: var(--px-color-error);
     --px-notification-shadow-color: var(--px-color-error-dark);
     --px-notification-divider-color: var(--px-color-error-light-5, var(--px-color-error));
 }
 /* ─── Plain variant ─── */
-.px-notification.is-plain[data-v-4191d2e2] {
+.px-notification.is-plain[data-v-5c4c1be5] {
   --px-notification-shadow-color: var(--px-border-color-light);
   --px-notification-bg-color: var(--px-fill-color-blank);
 }
-.px-notification--info.is-plain[data-v-4191d2e2] {
+.px-notification--info.is-plain[data-v-5c4c1be5] {
     --px-notification-bg-color: var(--px-color-info-light-9);
     --px-notification-border-color: var(--px-color-info-light-5, var(--px-color-info));
     --px-notification-icon-color: var(--px-color-info);
@@ -201,7 +201,7 @@
     --px-notification-shadow-color: var(--px-color-info-light-5, var(--px-color-info));
     --px-notification-divider-color: var(--px-color-info-light-5, var(--px-color-info));
 }
-.px-notification--success.is-plain[data-v-4191d2e2] {
+.px-notification--success.is-plain[data-v-5c4c1be5] {
     --px-notification-bg-color: var(--px-color-success-light-9);
     --px-notification-border-color: var(--px-color-success-light-5, var(--px-color-success));
     --px-notification-icon-color: var(--px-color-success);
@@ -210,7 +210,7 @@
     --px-notification-shadow-color: var(--px-color-success-light-5, var(--px-color-success));
     --px-notification-divider-color: var(--px-color-success-light-5, var(--px-color-success));
 }
-.px-notification--warning.is-plain[data-v-4191d2e2] {
+.px-notification--warning.is-plain[data-v-5c4c1be5] {
     --px-notification-bg-color: var(--px-color-warning-light-9);
     --px-notification-border-color: var(--px-color-warning-light-5, var(--px-color-warning));
     --px-notification-icon-color: var(--px-color-warning);
@@ -219,7 +219,7 @@
     --px-notification-shadow-color: var(--px-color-warning-light-5, var(--px-color-warning));
     --px-notification-divider-color: var(--px-color-warning-light-5, var(--px-color-warning));
 }
-.px-notification--danger.is-plain[data-v-4191d2e2] {
+.px-notification--danger.is-plain[data-v-5c4c1be5] {
     --px-notification-bg-color: var(--px-color-danger-light-9);
     --px-notification-border-color: var(--px-color-danger-light-5, var(--px-color-danger));
     --px-notification-icon-color: var(--px-color-danger);
@@ -228,7 +228,7 @@
     --px-notification-shadow-color: var(--px-color-danger-light-5, var(--px-color-danger));
     --px-notification-divider-color: var(--px-color-danger-light-5, var(--px-color-danger));
 }
-.px-notification--error.is-plain[data-v-4191d2e2] {
+.px-notification--error.is-plain[data-v-5c4c1be5] {
     --px-notification-bg-color: var(--px-color-error-light-9);
     --px-notification-border-color: var(--px-color-error-light-5, var(--px-color-error));
     --px-notification-icon-color: var(--px-color-error);
@@ -238,40 +238,40 @@
     --px-notification-divider-color: var(--px-color-error-light-5, var(--px-color-error));
 }
 /* ─── Ghost variant ─── */
-.px-notification.is-ghost[data-v-4191d2e2] {
+.px-notification.is-ghost[data-v-5c4c1be5] {
   --px-notification-bg-color: var(--px-fill-color-blank);
   --px-notification-shadow-color: transparent;
   filter: none;
 }
-.px-notification.is-ghost[data-v-4191d2e2]::before, .px-notification.is-ghost[data-v-4191d2e2]::after { display: none;
+.px-notification.is-ghost[data-v-5c4c1be5]::before, .px-notification.is-ghost[data-v-5c4c1be5]::after { display: none;
 }
-.px-notification--info.is-ghost[data-v-4191d2e2] {
+.px-notification--info.is-ghost[data-v-5c4c1be5] {
     --px-notification-icon-color: var(--px-color-info);
     --px-notification-title-color: var(--px-color-info-dark);
     --px-notification-content-color: var(--px-color-info);
 }
-.px-notification--success.is-ghost[data-v-4191d2e2] {
+.px-notification--success.is-ghost[data-v-5c4c1be5] {
     --px-notification-icon-color: var(--px-color-success);
     --px-notification-title-color: var(--px-color-success-dark);
     --px-notification-content-color: var(--px-color-success);
 }
-.px-notification--warning.is-ghost[data-v-4191d2e2] {
+.px-notification--warning.is-ghost[data-v-5c4c1be5] {
     --px-notification-icon-color: var(--px-color-warning);
     --px-notification-title-color: var(--px-color-warning-dark);
     --px-notification-content-color: var(--px-color-warning);
 }
-.px-notification--danger.is-ghost[data-v-4191d2e2] {
+.px-notification--danger.is-ghost[data-v-5c4c1be5] {
     --px-notification-icon-color: var(--px-color-danger);
     --px-notification-title-color: var(--px-color-danger-dark);
     --px-notification-content-color: var(--px-color-danger);
 }
-.px-notification--error.is-ghost[data-v-4191d2e2] {
+.px-notification--error.is-ghost[data-v-5c4c1be5] {
     --px-notification-icon-color: var(--px-color-error);
     --px-notification-title-color: var(--px-color-error-dark);
     --px-notification-content-color: var(--px-color-error);
 }
 /* ─── Timer bar ─── */
-.px-notification__timer[data-v-4191d2e2] {
+.px-notification__timer[data-v-5c4c1be5] {
   position: absolute;
   bottom: 4px;
   left: 8px;
@@ -280,37 +280,37 @@
   z-index: 1;
   background: var(--px-notification-icon-color, var(--px-text-color-secondary));
   opacity: 0.5;
-  animation: px-notification-timer-4191d2e2 linear forwards;
+  animation: px-notification-timer-5c4c1be5 linear forwards;
   transform-origin: left;
 }
 /* Pause timer bar animation when notification is hovered (matches JS timer pause) */
-.px-notification:hover .px-notification__timer[data-v-4191d2e2] {
+.px-notification:hover .px-notification__timer[data-v-5c4c1be5] {
   animation-play-state: paused;
 }
-@keyframes px-notification-timer-4191d2e2 {
+@keyframes px-notification-timer-5c4c1be5 {
 0% { transform: scaleX(1);
 }
 100% { transform: scaleX(0);
 }
 }
 /* Dark mode — invert bevel highlights */
-.px-dark .px-notification[data-v-4191d2e2] {
+.px-dark .px-notification[data-v-5c4c1be5] {
   --px-notification-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.10);
   --px-notification-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.25);
 }
 /* Animation */
-.px-notification-fade-enter-from.right[data-v-4191d2e2] {
+.px-notification-fade-enter-from.right[data-v-5c4c1be5] {
     right: 0;
     transform: translateX(100%);
 }
-.px-notification-fade-enter-from.left[data-v-4191d2e2] {
+.px-notification-fade-enter-from.left[data-v-5c4c1be5] {
     left: 0;
     transform: translateX(-100%);
 }
-.px-notification-fade-leave-to[data-v-4191d2e2] {
+.px-notification-fade-leave-to[data-v-5c4c1be5] {
   opacity: 0;
 }
-.px-notification-fade-enter-active[data-v-4191d2e2],
-.px-notification-fade-leave-active[data-v-4191d2e2] {
+.px-notification-fade-enter-active[data-v-5c4c1be5],
+.px-notification-fade-leave-active[data-v-5c4c1be5] {
   transition: opacity 0.15s steps(3), transform 0.15s steps(3);
 }