sakana-element 2.2.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/theme/Link.css

@@ -15,17 +15,36 @@
   text-decoration: none;
   transition: none;
 }
+.px-link.is-underline[data-v-d754ba7d] {
+    text-decoration: none;
+    background-image: repeating-linear-gradient(
+      to right,
+      var(--px-link-text-color) 0px,
+      var(--px-link-text-color) 4px,
+      transparent 4px,
+      transparent 8px
+    );
+    background-repeat: no-repeat;
+    background-position: bottom 0 left 0;
+    background-size: 100% 2px;
+    padding-bottom: 2px;
+}
 .px-link[data-v-d754ba7d]:hover {
     color: var(--px-link-hover-color);
+    transform: translate(-1px, -1px);
 }
-.px-link.is-underline[data-v-d754ba7d] {
-    text-decoration: underline;
-    text-underline-offset: 3px;
+.px-link[data-v-d754ba7d]:focus-visible {
+    outline: 2px dashed var(--px-color-primary);
+    outline-offset: 2px;
+}
+.px-link[data-v-d754ba7d]:active {
+    transform: translate(1px, 1px);
 }
 .px-link.is-disabled[data-v-d754ba7d] {
     opacity: 0.5;
     cursor: not-allowed;
     pointer-events: none;
+    outline: none;
 }
 /* Type variants */
 .px-link--primary[data-v-d754ba7d] {

package/dist/theme/Loading.css

@@ -43,16 +43,27 @@
 .px-loading-indicator--danger[data-v-1435ecee] {
     --px-loading-indicator-color: var(--px-color-danger);
 }
+/* ─── Pixel-art ring mask (24×24 Bresenham circle with 2×2 blocks) ─── */
+.px-loading-indicator--spinner .px-loading-indicator__inner[data-v-1435ecee],
+.px-loading-indicator--ring .px-loading-indicator__inner[data-v-1435ecee] {
+  --px-ring-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='8' y='2' width='8' height='2' fill='white'/%3E%3Crect x='16' y='4' width='2' height='2' fill='white'/%3E%3Crect x='18' y='6' width='2' height='2' fill='white'/%3E%3Crect x='20' y='8' width='2' height='8' fill='white'/%3E%3Crect x='18' y='16' width='2' height='2' fill='white'/%3E%3Crect x='16' y='18' width='2' height='2' fill='white'/%3E%3Crect x='8' y='20' width='8' height='2' fill='white'/%3E%3Crect x='6' y='18' width='2' height='2' fill='white'/%3E%3Crect x='4' y='16' width='2' height='2' fill='white'/%3E%3Crect x='2' y='8' width='2' height='8' fill='white'/%3E%3Crect x='4' y='6' width='2' height='2' fill='white'/%3E%3Crect x='6' y='4' width='2' height='2' fill='white'/%3E%3C/svg%3E");
+}
 /* ─── Spinner variant ─── */
 .px-loading-indicator--spinner .px-loading-indicator__inner[data-v-1435ecee] {
   display: block;
   width: 100%;
   height: 100%;
-  border: 2px solid transparent;
-  border-top-color: var(--px-loading-indicator-color);
-  border-right-color: var(--px-loading-indicator-color);
-  border-radius: 50%;
   box-sizing: border-box;
+  background: conic-gradient(
+    var(--px-loading-indicator-color) 0deg 180deg,
+    transparent 180deg 360deg
+  );
+  -webkit-mask-image: var(--px-ring-mask);
+  -webkit-mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  mask-image: var(--px-ring-mask);
+  mask-size: contain;
+  mask-repeat: no-repeat;
   animation: px-indicator-spin-1435ecee 0.8s steps(8) infinite;
 }
 @keyframes px-indicator-spin-1435ecee {
@@ -139,14 +150,18 @@
   display: block;
   width: 80%;
   height: 80%;
-  border: 2px solid transparent;
-  border-top-color: var(--px-loading-indicator-color);
-  border-right-color: var(--px-loading-indicator-color);
-  border-bottom-color: transparent;
-  border-left-color: transparent;
-  border-radius: 50%;
   box-sizing: border-box;
-  animation: px-indicator-spin-1435ecee 1s steps(12) infinite;
+  background: conic-gradient(
+    var(--px-loading-indicator-color) 0deg 120deg,
+    transparent 120deg 360deg
+  );
+  -webkit-mask-image: var(--px-ring-mask);
+  -webkit-mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  mask-image: var(--px-ring-mask);
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  animation: px-indicator-spin-1435ecee 1s steps(8) infinite;
 }
 /* Loading Variables */
 .px-loading {
@@ -157,6 +172,7 @@
   --px-loading-font-size: var(--px-font-size-base);
   --px-loading-z-index: 20000;
   --px-loading-bg-color: rgba(255, 255, 255, 0.8);
+  --px-loading-dot-color: rgba(0, 0, 0, 0.02);
 }
 /* Base Loading Styles - Pixel Game Loading */
 .px-loading {
@@ -174,7 +190,15 @@
     height: var(--px-loading-mask-size);
     width: var(--px-loading-mask-size);
     z-index: var(--px-loading-z-index);
-    background: var(--px-loading-bg-color);
+    background:
+      repeating-linear-gradient(
+        to right,
+        var(--px-loading-dot-color) 0px,
+        var(--px-loading-dot-color) 2px,
+        transparent 2px,
+        transparent 4px
+      ),
+      var(--px-loading-bg-color);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -196,6 +220,7 @@
       font-family: var(--px-font-family);
       color: var(--px-text-color-primary);
       letter-spacing: 1px;
+      animation: px-loading-text-pulse 1.5s steps(2) infinite;
 }
 .px-loading .px-loading__spinner i {
       font-size: var(--px-loading-icon-size);
@@ -211,6 +236,18 @@
     transform: rotate(360deg);
 }
 }
+/* Pixel-style text pulse */
+@keyframes px-loading-text-pulse {
+0% {
+    opacity: 1;
+}
+50% {
+    opacity: 0.4;
+}
+100% {
+    opacity: 1;
+}
+}
 /* Parent element states */
 .px-loading-parent--relative {
   position: relative !important;
@@ -221,6 +258,7 @@
 /* Dark mode loading */
 .px-dark .px-loading {
   --px-loading-bg-color: rgba(30, 30, 46, 0.85);
+  --px-loading-dot-color: rgba(255, 255, 255, 0.02);
 }
 .px-loading {
   --px-loading-bg-color: var(--d4003bba) !important;

package/dist/theme/Message.css

@@ -9,7 +9,11 @@
   --px-message-close-icon-color: var(--px-text-color-secondary);
   --px-message-close-hover-color: var(--px-text-color-primary);
   --px-message-icon-size: 16px;
-  --px-message-icon-margin: 10px;
+  --px-message-icon-margin: 10px;
+
+  /* Beveled inset for 3D raised-panel depth */
+  --px-message-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.35);
+  --px-message-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.08);
 }
 /* Base Message Styles - Pixel Game Notification */
 .px-message {
@@ -61,6 +65,7 @@
       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)
     );
+    box-shadow: var(--px-message-inset-highlight), var(--px-message-inset-shadow);
     z-index: -1;
 }
 /* Icon styling */
@@ -104,6 +109,13 @@
 .px-message .px-message__close .px-icon:active {
         transform: translate(1px, 1px);
 }
+/* Map error type to danger color palette so @each loops handle both */
+.px-message--error {
+  --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 pixel styling */
 .px-message--info {
     --px-message-bg-color: var(--px-color-info-light-9);
@@ -152,19 +164,122 @@
 }
 .px-message--danger .px-message__close .px-icon:hover {
         color: var(--px-color-danger-dark);
-}
-/* Error variant (alias for danger) */
+}
 .px-message--error {
-  --px-message-bg-color: var(--px-color-danger-light-9);
-  --px-message-border-color: var(--px-color-danger);
-  --px-message-text-color: var(--px-color-danger-dark);
-  --px-message-shadow-color: var(--px-color-danger-dark);
+    --px-message-bg-color: var(--px-color-error-light-9);
+    --px-message-border-color: var(--px-color-error);
+    --px-message-text-color: var(--px-color-error-dark);
+    --px-message-shadow-color: var(--px-color-error-dark);
 }
 .px-message--error .px-message__close .px-icon {
-    color: var(--px-color-danger);
+      color: var(--px-color-error);
 }
 .px-message--error .px-message__close .px-icon:hover {
-      color: var(--px-color-danger-dark);
+        color: var(--px-color-error-dark);
+}
+/* ─── Plain variant ─── */
+.px-message.is-plain {
+  --px-message-bg-color: var(--px-fill-color-blank);
+  --px-message-border-color: var(--px-border-color-light);
+  --px-message-shadow-color: var(--px-border-color-light);
+}
+.px-message--info.is-plain {
+    --px-message-bg-color: var(--px-color-info-light-9);
+    --px-message-border-color: var(--px-color-info-light-5, var(--px-color-info));
+    --px-message-text-color: var(--px-color-info);
+    --px-message-shadow-color: var(--px-color-info-light-5, var(--px-color-info));
+}
+.px-message--success.is-plain {
+    --px-message-bg-color: var(--px-color-success-light-9);
+    --px-message-border-color: var(--px-color-success-light-5, var(--px-color-success));
+    --px-message-text-color: var(--px-color-success);
+    --px-message-shadow-color: var(--px-color-success-light-5, var(--px-color-success));
+}
+.px-message--warning.is-plain {
+    --px-message-bg-color: var(--px-color-warning-light-9);
+    --px-message-border-color: var(--px-color-warning-light-5, var(--px-color-warning));
+    --px-message-text-color: var(--px-color-warning);
+    --px-message-shadow-color: var(--px-color-warning-light-5, var(--px-color-warning));
+}
+.px-message--danger.is-plain {
+    --px-message-bg-color: var(--px-color-danger-light-9);
+    --px-message-border-color: var(--px-color-danger-light-5, var(--px-color-danger));
+    --px-message-text-color: var(--px-color-danger);
+    --px-message-shadow-color: var(--px-color-danger-light-5, var(--px-color-danger));
+}
+.px-message--error.is-plain {
+    --px-message-bg-color: var(--px-color-error-light-9);
+    --px-message-border-color: var(--px-color-error-light-5, var(--px-color-error));
+    --px-message-text-color: var(--px-color-error);
+    --px-message-shadow-color: var(--px-color-error-light-5, var(--px-color-error));
+}
+/* ─── Ghost variant ─── */
+.px-message.is-ghost {
+  --px-message-bg-color: var(--px-fill-color-blank);
+  --px-message-shadow-color: transparent;
+  filter: none;
+}
+.px-message--info.is-ghost {
+    --px-message-bg-color: var(--px-fill-color-blank);
+    --px-message-border-color: var(--px-color-info);
+    --px-message-text-color: var(--px-color-info);
+    --px-message-shadow-color: transparent;
+    filter: none;
+}
+.px-message--success.is-ghost {
+    --px-message-bg-color: var(--px-fill-color-blank);
+    --px-message-border-color: var(--px-color-success);
+    --px-message-text-color: var(--px-color-success);
+    --px-message-shadow-color: transparent;
+    filter: none;
+}
+.px-message--warning.is-ghost {
+    --px-message-bg-color: var(--px-fill-color-blank);
+    --px-message-border-color: var(--px-color-warning);
+    --px-message-text-color: var(--px-color-warning);
+    --px-message-shadow-color: transparent;
+    filter: none;
+}
+.px-message--danger.is-ghost {
+    --px-message-bg-color: var(--px-fill-color-blank);
+    --px-message-border-color: var(--px-color-danger);
+    --px-message-text-color: var(--px-color-danger);
+    --px-message-shadow-color: transparent;
+    filter: none;
+}
+.px-message--error.is-ghost {
+    --px-message-bg-color: var(--px-fill-color-blank);
+    --px-message-border-color: var(--px-color-error);
+    --px-message-text-color: var(--px-color-error);
+    --px-message-shadow-color: transparent;
+    filter: none;
+}
+/* ─── Timer bar ─── */
+.px-message__timer {
+  position: absolute;
+  bottom: 2px;
+  left: 4px;
+  right: 4px;
+  height: 2px;
+  background: var(--px-message-text-color);
+  opacity: 0.5;
+  animation: px-message-timer linear forwards;
+  transform-origin: left;
+}
+/* Pause timer bar animation when message is hovered (matches JS timer pause) */
+.px-message:hover .px-message__timer {
+  animation-play-state: paused;
+}
+@keyframes px-message-timer {
+0% { transform: scaleX(1);
+}
+100% { transform: scaleX(0);
+}
+}
+/* Dark mode — invert bevel highlights */
+.px-dark .px-message {
+  --px-message-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.10);
+  --px-message-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.25);
 }
 /* Animation - Pixel style instant appear/disappear */
 .px-message.fade-up-enter-from,
@@ -175,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);
@@ -187,7 +302,12 @@
   --px-message-box-font-line-height: 1.5;
   --px-message-box-close-size: var(--px-font-size-base);
   --px-message-box-border-color: var(--px-border-color);
-  --px-message-box-shadow-color: var(--px-shadow-color);
+  --px-message-box-shadow-color: var(--px-shadow-color);
+  --px-message-box-divider-color: var(--px-border-color-light);
+
+  /* Beveled inset for 3D raised-panel depth */
+  --px-message-box-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.35);
+  --px-message-box-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.08);
 }
 /* Overlay */
 .px-overlay-message-box {
@@ -216,7 +336,6 @@
   width: 100%;
   padding: var(--px-message-box-padding-primary);
   vertical-align: middle;
-  background-color: var(--px-bg-color);
   font-size: var(--px-message-box-font-size);
   font-family: var(--px-font-family);
   text-align: left;
@@ -225,14 +344,45 @@
   box-sizing: border-box;
   overflow-wrap: break-word;
 
-  /* Pixel-style border */
-  border: var(--px-border-width) solid var(--px-message-box-border-color);
+  /* Remove traditional styling — pseudo-elements handle visuals */
+  background: transparent;
+  border: none;
   border-radius: 0;
 
-  /* Pixel shadow */
-  box-shadow:
-    var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0 0 var(--px-message-box-shadow-color),
-    var(--px-box-shadow-inset-light);
+  /* Pixel shadow via drop-shadow (respects clip-path shape) */
+  filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-message-box-shadow-color));
+
+  /* No smooth transitions for pixel feel */
+  transition: none;
+}
+/* Border layer — 3-step staircase clip (8px corners) */
+.px-message-box::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: var(--px-message-box-border-color);
+    clip-path: polygon(
+      0 8px, 2px 8px, 2px 4px, 4px 4px, 4px 2px, 8px 2px, 8px 0,
+      calc(100% - 8px) 0, calc(100% - 8px) 2px, calc(100% - 4px) 2px, calc(100% - 4px) 4px, calc(100% - 2px) 4px, calc(100% - 2px) 8px, 100% 8px,
+      100% calc(100% - 8px), calc(100% - 2px) calc(100% - 8px), calc(100% - 2px) calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) calc(100% - 2px), calc(100% - 8px) calc(100% - 2px), calc(100% - 8px) 100%,
+      8px 100%, 8px calc(100% - 2px), 4px calc(100% - 2px), 4px calc(100% - 4px), 2px calc(100% - 4px), 2px calc(100% - 8px), 0 calc(100% - 8px)
+    );
+    z-index: 0;
+}
+/* Fill layer — 4px inset, 2-step staircase chamfer, beveled */
+.px-message-box::after {
+    content: '';
+    position: absolute;
+    inset: 4px;
+    background: var(--px-bg-color);
+    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)
+    );
+    box-shadow: var(--px-message-box-inset-highlight), var(--px-message-box-inset-shadow);
+    z-index: 0;
 }
 .px-message-box:focus {
     outline: none !important;
@@ -246,6 +396,11 @@
 .px-message-box.is-center .px-message-box__footer,
     .px-message-box.is-center .px-message-box__content {
       justify-content: center;
+}
+/* Draggable cursor */
+.px-message-box.is-draggable .px-message-box__header {
+    cursor: move;
+    user-select: none;
 }
 .px-message-box :deep(.px-icon).px-icon-info {
         color: var(--px-color-info) !important;
@@ -263,29 +418,47 @@
       color: var(--px-color-danger) !important;
 }
 .px-message-box .px-message-box__header {
-    padding-bottom: var(--px-message-box-padding-primary);
-    border-bottom: var(--px-border-width-thin) dashed var(--px-message-box-border-color);
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    padding-bottom: var(--px-message-box-padding-primary);
 }
 .px-message-box .px-message-box__header .px-message-box__title {
+      flex: 1;
       color: var(--px-message-box-title-color);
       font-size: var(--px-message-box-font-size);
       font-family: var(--px-font-family);
       font-weight: 500;
       line-height: var(--px-message-box-font-line-height);
+}
+/* Pixel-dashed divider at bottom */
+.px-message-box .px-message-box__header::after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 2px;
+      background-image: repeating-linear-gradient(
+        to right,
+        var(--px-message-box-divider-color) 0px,
+        var(--px-message-box-divider-color) 6px,
+        transparent 6px,
+        transparent 12px
+      );
 }
 .px-message-box .px-message-box__header .px-message-box__header-btn {
-      position: absolute;
-      top: 8px;
-      right: 8px;
-      padding: 4px;
-      width: 28px;
-      height: 28px;
-      border: var(--px-border-width-thin) solid var(--px-border-color);
+      flex-shrink: 0;
+      margin-left: 8px;
+      padding: 0;
+      border: none;
       outline: none;
-      background: var(--px-fill-color-blank);
+      background: transparent;
       font-size: var(--px-message-box-close-size);
       cursor: pointer;
-      box-shadow: 2px 2px 0 0 var(--px-shadow-color);
+      z-index: 1;
       transition: none;
       display: flex;
       align-items: center;
@@ -295,22 +468,20 @@
         color: var(--px-text-color-secondary);
         font-size: inherit;
 }
-.px-message-box .px-message-box__header .px-message-box__header-btn:hover {
-        background: var(--px-fill-color-light);
-        transform: translate(-1px, -1px);
-        box-shadow: 3px 3px 0 0 var(--px-shadow-color);
-}
-.px-message-box .px-message-box__header .px-message-box__header-btn:hover i {
-          color: var(--px-color-danger);
+.px-message-box .px-message-box__header .px-message-box__header-btn .px-icon {
+        cursor: pointer;
+        transition: none;
 }
-.px-message-box .px-message-box__header .px-message-box__header-btn:active {
-        transform: translate(1px, 1px);
-        box-shadow: 1px 1px 0 0 var(--px-shadow-color);
+.px-message-box .px-message-box__header .px-message-box__header-btn .px-icon:hover {
+          color: var(--px-color-danger);
+          transform: translate(-1px, -1px);
 }
-.px-message-box .px-message-box__header.show-close {
-      padding-right: calc(var(--px-message-box-padding-primary) + 32px);
+.px-message-box .px-message-box__header .px-message-box__header-btn .px-icon:active {
+          transform: translate(1px, 1px);
 }
 .px-message-box .px-message-box__content {
+    position: relative;
+    z-index: 1;
     display: flex;
     align-items: center;
     gap: 12px;
@@ -327,9 +498,21 @@
         line-height: var(--px-message-box-font-line-height);
 }
 .px-message-box .px-message-box__input {
+    position: relative;
+    z-index: 1;
     padding-top: 12px;
 }
+.px-message-box .px-message-box__error {
+    position: relative;
+    z-index: 1;
+    color: var(--px-color-danger);
+    font-size: 12px;
+    font-family: var(--px-font-family);
+    margin-top: 4px;
+}
 .px-message-box .px-message-box__footer {
+    position: relative;
+    z-index: 1;
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-end;
@@ -337,6 +520,32 @@
     padding-top: var(--px-message-box-padding-primary);
     gap: 8px;
 }
+/* Type-colored borders */
+.px-message-box.px-message-box--info {
+    --px-message-box-border-color: var(--px-color-info);
+    --px-message-box-shadow-color: var(--px-color-info-dark);
+    --px-message-box-divider-color: var(--px-color-info-light-5, var(--px-color-info));
+}
+.px-message-box.px-message-box--success {
+    --px-message-box-border-color: var(--px-color-success);
+    --px-message-box-shadow-color: var(--px-color-success-dark);
+    --px-message-box-divider-color: var(--px-color-success-light-5, var(--px-color-success));
+}
+.px-message-box.px-message-box--warning {
+    --px-message-box-border-color: var(--px-color-warning);
+    --px-message-box-shadow-color: var(--px-color-warning-dark);
+    --px-message-box-divider-color: var(--px-color-warning-light-5, var(--px-color-warning));
+}
+.px-message-box.px-message-box--danger {
+    --px-message-box-border-color: var(--px-color-danger);
+    --px-message-box-shadow-color: var(--px-color-danger-dark);
+    --px-message-box-divider-color: var(--px-color-danger-light-5, var(--px-color-danger));
+}
+/* Dark mode — invert bevel highlights */
+.px-dark .px-message-box {
+  --px-message-box-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.10);
+  --px-message-box-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.25);
+}
 /* Animation */
 .fade-in-linear-enter-active .px-overlay-message-box {
     animation: msgbox-fade-in 0.15s steps(3);