sakana-element 2.2.0 → 2.4.0

package/dist/theme/Notification.css

@@ -1,8 +1,9 @@
 /* Notification Variables */
-.px-notification[data-v-ff3aeca4] {
+.px-notification[data-v-5c4c1be5] {
   --px-notification-width: 330px;
   --px-notification-padding: 14px 20px;
   --px-notification-border-color: var(--px-border-color);
+  --px-notification-bg-color: var(--px-bg-color-overlay);
   --px-notification-icon-size: 24px;
   --px-notification-close-font-size: var(--px-font-size-base);
   --px-notification-content-font-size: var(--px-font-size-base);
@@ -11,59 +12,115 @@
   --px-notification-title-color: var(--px-text-color-primary);
   --px-notification-close-color: var(--px-text-color-secondary);
   --px-notification-close-hover-color: var(--px-text-color-primary);
-  --px-notification-shadow-color: var(--px-shadow-color);
+  --px-notification-shadow-color: var(--px-shadow-color);
+  --px-notification-divider-color: var(--px-border-color-light);
+
+  /* Beveled inset for 3D raised-panel depth */
+  --px-notification-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.35);
+  --px-notification-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.08);
 }
-/* Base Notification Styles - Pixel Game Style */
-.px-notification[data-v-ff3aeca4] {
+/* Base Notification Styles - Pixel Game Aesthetic */
+.px-notification[data-v-5c4c1be5] {
   display: flex;
   width: var(--px-notification-width);
   padding: var(--px-notification-padding);
   box-sizing: border-box;
   position: fixed;
-  background-color: var(--px-bg-color-overlay);
   overflow-wrap: anywhere;
   overflow: hidden;
   z-index: 9999;
   font-family: var(--px-font-family);
 
-  /* Pixel-style border */
-  border: var(--px-border-width) solid var(--px-notification-border-color);
-  border-radius: 0;
+  /* Remove traditional styling — pseudo-elements handle visuals */
+  background: transparent;
+  border: none;
 
-  /* Pixel shadow */
-  box-shadow:
-    var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0 0 var(--px-notification-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-notification-shadow-color));
 
-  /* No smooth transitions */
+  /* No smooth transitions for pixel feel */
   transition: none;
+}
+/* Border layer — 3-step staircase clip (8px corners) */
+.px-notification[data-v-5c4c1be5]::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: var(--px-notification-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-notification[data-v-5c4c1be5]::after {
+    content: '';
+    position: absolute;
+    inset: 4px;
+    background: var(--px-notification-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-notification-inset-highlight), var(--px-notification-inset-shadow);
+    z-index: 0;
 }
-.px-notification.right[data-v-ff3aeca4] {
+.px-notification.right[data-v-5c4c1be5] {
     right: 16px;
 }
-.px-notification.left[data-v-ff3aeca4] {
+.px-notification.left[data-v-5c4c1be5] {
     left: 16px;
 }
-.px-notification .px-notification__text[data-v-ff3aeca4] {
+.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-ff3aeca4] {
+.px-notification .px-notification__icon[data-v-5c4c1be5] {
+    position: relative;
+    z-index: 1;
     height: var(--px-notification-icon-size);
     width: var(--px-notification-icon-size);
     font-size: var(--px-notification-icon-size);
     color: var(--px-notification-icon-color);
     flex-shrink: 0;
 }
-.px-notification .px-notification__title[data-v-ff3aeca4] {
+.px-notification .px-notification__title[data-v-5c4c1be5] {
+    position: relative;
+    z-index: 1;
     font-weight: 500;
     font-size: var(--px-notification-title-font-size);
     font-family: var(--px-font-family);
     line-height: var(--px-notification-icon-size);
     color: var(--px-notification-title-color);
-    margin: 0;
+    margin: 0;
+    padding-bottom: 8px;
+}
+/* Pixel-dashed divider at bottom */
+.px-notification .px-notification__title[data-v-5c4c1be5]::after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 2px;
+      background-image: repeating-linear-gradient(
+        to right,
+        var(--px-notification-divider-color) 0px,
+        var(--px-notification-divider-color) 6px,
+        transparent 6px,
+        transparent 12px
+      );
 }
-.px-notification .px-notification__content[data-v-ff3aeca4] {
+.px-notification .px-notification__content[data-v-5c4c1be5] {
+    position: relative;
+    z-index: 1;
     font-size: var(--px-notification-content-font-size);
     font-family: var(--px-font-family);
     line-height: 1.5;
@@ -71,56 +128,189 @@
     color: var(--px-notification-content-color);
     text-align: left;
 }
-.px-notification .px-notification__close[data-v-ff3aeca4] {
+.px-notification .px-notification__close[data-v-5c4c1be5] {
     position: absolute;
     top: 14px;
     right: 14px;
     cursor: pointer;
     color: var(--px-notification-close-color);
-    font-size: var(--px-notification-close-font-size);
+    font-size: var(--px-notification-close-font-size);
+    z-index: 1;
+    transition: none;
+}
+.px-notification .px-notification__close .px-icon[data-v-5c4c1be5] {
+      cursor: pointer;
+      transition: none;
 }
-.px-notification .px-notification__close[data-v-ff3aeca4]:hover {
-      color: var(--px-notification-close-hover-color);
+.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-5c4c1be5]:active {
+        transform: translate(1px, 1px);
+}
+/* Map error type to danger color palette so @each loops handle both */
+.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 shadows */
-.px-notification--info[data-v-ff3aeca4] {
+/* Type variants with colored borders and shadows */
+.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-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-ff3aeca4] {
+.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-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-ff3aeca4] {
+.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-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-ff3aeca4] {
+.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-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-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-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-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);
+    --px-notification-title-color: var(--px-color-info-dark);
+    --px-notification-content-color: var(--px-color-info);
+    --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-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);
+    --px-notification-title-color: var(--px-color-success-dark);
+    --px-notification-content-color: var(--px-color-success);
+    --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-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);
+    --px-notification-title-color: var(--px-color-warning-dark);
+    --px-notification-content-color: var(--px-color-warning);
+    --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-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);
+    --px-notification-title-color: var(--px-color-danger-dark);
+    --px-notification-content-color: var(--px-color-danger);
+    --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-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);
+    --px-notification-title-color: var(--px-color-error-dark);
+    --px-notification-content-color: var(--px-color-error);
+    --px-notification-shadow-color: var(--px-color-error-light-5, var(--px-color-error));
+    --px-notification-divider-color: var(--px-color-error-light-5, var(--px-color-error));
+}
+/* ─── Ghost variant ─── */
+.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-5c4c1be5]::before, .px-notification.is-ghost[data-v-5c4c1be5]::after { display: none;
+}
+.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-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-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-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[data-v-ff3aeca4] {
-  --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--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-5c4c1be5] {
+  position: absolute;
+  bottom: 4px;
+  left: 8px;
+  right: 8px;
+  height: 2px;
+  z-index: 1;
+  background: var(--px-notification-icon-color, var(--px-text-color-secondary));
+  opacity: 0.5;
+  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-5c4c1be5] {
+  animation-play-state: paused;
+}
+@keyframes px-notification-timer-5c4c1be5 {
+0% { transform: scaleX(1);
+}
+100% { transform: scaleX(0);
+}
+}
+/* Dark mode — invert bevel highlights */
+.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-ff3aeca4] {
+.px-notification-fade-enter-from.right[data-v-5c4c1be5] {
     right: 0;
     transform: translateX(100%);
 }
-.px-notification-fade-enter-from.left[data-v-ff3aeca4] {
+.px-notification-fade-enter-from.left[data-v-5c4c1be5] {
     left: 0;
     transform: translateX(-100%);
 }
-.px-notification-fade-leave-to[data-v-ff3aeca4] {
+.px-notification-fade-leave-to[data-v-5c4c1be5] {
   opacity: 0;
 }
-.px-notification-fade-enter-active[data-v-ff3aeca4],
-.px-notification-fade-leave-active[data-v-ff3aeca4] {
+.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);
 }

package/dist/theme/Popconfirm.css

@@ -1,30 +1,46 @@
 /* Popconfirm Variables */
-.px-popconfirm[data-v-fd6e7d1d] {
+.px-popconfirm[data-v-68772965] {
   --px-popconfirm-icon-size: 16px;
   --px-popconfirm-font-size: var(--px-font-size-base);
 }
 /* Base Popconfirm Styles - Pixel Dialog */
-.px-popconfirm[data-v-fd6e7d1d] {
+.px-popconfirm[data-v-68772965] {
   font-family: var(--px-font-family);
 }
-.px-popconfirm .px-popconfirm__main[data-v-fd6e7d1d] {
+.px-popconfirm .px-popconfirm__main[data-v-68772965] {
     display: flex;
     align-items: flex-start;
     gap: 8px;
     font-size: var(--px-popconfirm-font-size);
-    color: var(--px-text-color-primary);
+    color: inherit;
     line-height: 1.5;
 }
-.px-popconfirm .px-popconfirm__main i[data-v-fd6e7d1d] {
+.px-popconfirm .px-popconfirm__main i[data-v-68772965] {
       font-size: var(--px-popconfirm-icon-size);
       flex-shrink: 0;
       margin-top: 2px;
 }
-.px-popconfirm .px-popconfirm__action[data-v-fd6e7d1d] {
+.px-popconfirm .px-popconfirm__action[data-v-68772965] {
     display: flex;
     justify-content: flex-end;
     gap: 8px;
     margin-top: 12px;
     padding-top: 12px;
-    border-top: var(--px-border-width-thin) dashed var(--px-border-color-lighter);
+    position: relative;
+}
+/* Pixel-dashed divider */
+.px-popconfirm .px-popconfirm__action[data-v-68772965]::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 2px;
+      background-image: repeating-linear-gradient(
+        to right,
+        var(--px-border-color-lighter) 0px,
+        var(--px-border-color-lighter) 6px,
+        transparent 6px,
+        transparent 12px
+      );
 }

package/dist/theme/Progress.css

@@ -0,0 +1,278 @@
+/* Progress Variables */
+.px-progress {
+  --px-progress-height: 14px;
+  --px-progress-fill-color: var(--px-color-primary);
+  --px-progress-fill-border-color: var(--px-color-primary-dark);
+  --px-progress-track-bg-color: var(--px-fill-color-blank);
+  --px-progress-track-border-color: var(--px-border-color-dark);
+  --px-progress-text-color: var(--px-text-color-primary);
+  --px-progress-shadow-color: var(--px-color-primary-dark);
+  --px-progress-text-size: var(--px-font-size-small);
+  --px-progress-text-gap: 10px;
+
+  /* Pixel-art chunked fill */
+  --px-progress-chunk-width: 8px;
+  --px-progress-chunk-gap: 2px;
+
+  /* Beveled 3D depth on fill bar */
+  --px-progress-fill-highlight: inset 1px 1px 0 0 rgba(255, 255, 255, 0.35);
+  --px-progress-fill-shadow: inset -1px -1px 0 0 rgba(0, 0, 0, 0.15);
+}
+/* Base Progress Styles */
+.px-progress {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  line-height: 1;
+  font-family: var(--px-font-family);
+}
+/* Track — the outer container */
+.px-progress__track {
+  flex: 1;
+  height: var(--px-progress-height);
+  position: relative;
+  background: transparent;
+  border: none;
+  overflow: hidden;
+  padding: 2px;
+  box-sizing: border-box;
+
+  /* Clip all children (including fill bar) to the pixel-art border shape */
+  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)
+  );
+
+  /* Pixel shadow via drop-shadow */
+  filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-progress-shadow-color));
+}
+/* Border layer — filled with border color, clipped to pixel shape */
+.px-progress__track::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: var(--px-progress-track-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: 0;
+}
+/* Fill layer — recessed pixel container with subtle grid texture */
+.px-progress__track::after {
+    content: '';
+    position: absolute;
+    inset: 2px;
+    background:
+      /* Simulated inset shadow — top edge darker */
+      linear-gradient(to bottom, rgba(0, 0, 0, 0.10) 0, transparent 2px),
+      /* Simulated inset shadow — left edge darker */
+      linear-gradient(to right, rgba(0, 0, 0, 0.10) 0, transparent 2px),
+      /* Simulated inset shadow — bottom edge lighter */
+      linear-gradient(to top, rgba(255, 255, 255, 0.06) 0, transparent 2px),
+      /* Simulated inset shadow — right edge lighter */
+      linear-gradient(to left, rgba(255, 255, 255, 0.06) 0, transparent 2px),
+      /* Subtle vertical pixel-dot pattern */
+      repeating-linear-gradient(
+        to right,
+        rgba(0, 0, 0, 0.04) 0,
+        rgba(0, 0, 0, 0.04) 2px,
+        transparent 2px,
+        transparent 4px
+      ),
+      /* Base track color */
+      var(--px-progress-track-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: 0;
+}
+/* Fill bar — chunked pixel-block inner bar */
+.px-progress__fill {
+  height: 100%;
+  position: relative;
+  z-index: 1;
+  transition: none;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  box-sizing: border-box;
+
+  /* Segmented chunked fill using repeating gradient */
+  background: repeating-linear-gradient(
+    to right,
+    var(--px-progress-fill-color) 0,
+    var(--px-progress-fill-color) var(--px-progress-chunk-width),
+    transparent var(--px-progress-chunk-width),
+    transparent calc(var(--px-progress-chunk-width) + var(--px-progress-chunk-gap))
+  );
+
+  /* Beveled 3D depth — raised-panel highlight/shadow */
+  box-shadow:
+    var(--px-progress-fill-highlight),
+    var(--px-progress-fill-shadow);
+}
+/* Inner text */
+.px-progress__inner-text {
+  padding: 0 4px;
+  font-size: 10px;
+  font-family: var(--px-font-family);
+  color: var(--px-color-white);
+  white-space: nowrap;
+  line-height: var(--px-progress-height);
+  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
+}
+/* External text */
+.px-progress__text {
+  flex-shrink: 0;
+  margin-left: var(--px-progress-text-gap);
+  font-size: var(--px-progress-text-size);
+  font-family: var(--px-font-family);
+  color: var(--px-progress-text-color);
+  white-space: nowrap;
+  min-width: 36px;
+}
+/* ─── Type variants ─── */
+.px-progress--primary {
+    --px-progress-fill-color: var(--px-color-primary);
+    --px-progress-fill-border-color: var(--px-color-primary-dark);
+    --px-progress-shadow-color: var(--px-color-primary-dark);
+    --px-progress-text-color: var(--px-color-primary-dark);
+}
+.px-progress--success {
+    --px-progress-fill-color: var(--px-color-success);
+    --px-progress-fill-border-color: var(--px-color-success-dark);
+    --px-progress-shadow-color: var(--px-color-success-dark);
+    --px-progress-text-color: var(--px-color-success-dark);
+}
+.px-progress--info {
+    --px-progress-fill-color: var(--px-color-info);
+    --px-progress-fill-border-color: var(--px-color-info-dark);
+    --px-progress-shadow-color: var(--px-color-info-dark);
+    --px-progress-text-color: var(--px-color-info-dark);
+}
+.px-progress--warning {
+    --px-progress-fill-color: var(--px-color-warning);
+    --px-progress-fill-border-color: var(--px-color-warning-dark);
+    --px-progress-shadow-color: var(--px-color-warning-dark);
+    --px-progress-text-color: var(--px-color-warning-dark);
+}
+.px-progress--danger {
+    --px-progress-fill-color: var(--px-color-danger);
+    --px-progress-fill-border-color: var(--px-color-danger-dark);
+    --px-progress-shadow-color: var(--px-color-danger-dark);
+    --px-progress-text-color: var(--px-color-danger-dark);
+}
+/* ─── Status overrides (override type) ─── */
+.px-progress--success.px-progress--success {
+  --px-progress-fill-color: var(--px-color-success);
+  --px-progress-fill-border-color: var(--px-color-success-dark);
+  --px-progress-shadow-color: var(--px-color-success-dark);
+  --px-progress-text-color: var(--px-color-success-dark);
+}
+.px-progress--warning.px-progress--warning {
+  --px-progress-fill-color: var(--px-color-warning);
+  --px-progress-fill-border-color: var(--px-color-warning-dark);
+  --px-progress-shadow-color: var(--px-color-warning-dark);
+  --px-progress-text-color: var(--px-color-warning-dark);
+}
+.px-progress--danger.px-progress--danger {
+  --px-progress-fill-color: var(--px-color-danger);
+  --px-progress-fill-border-color: var(--px-color-danger-dark);
+  --px-progress-shadow-color: var(--px-color-danger-dark);
+  --px-progress-text-color: var(--px-color-danger-dark);
+}
+/* ─── Size variants ─── */
+.px-progress--large {
+  --px-progress-height: 20px;
+  --px-progress-text-size: var(--px-font-size-base);
+  --px-progress-chunk-width: 10px;
+}
+.px-progress--small {
+  --px-progress-height: 8px;
+  --px-progress-text-size: var(--px-font-size-extra-small);
+  --px-progress-chunk-width: 6px;
+}
+/* ─── Striped variant ─── */
+.px-progress--striped .px-progress__fill {
+  background:
+    /* Diagonal stripe overlay (top layer) */
+    repeating-linear-gradient(
+      -45deg,
+      transparent,
+      transparent 4px,
+      rgba(255, 255, 255, 0.25) 4px,
+      rgba(255, 255, 255, 0.25) 8px
+    ),
+    /* Chunked fill underneath (bottom layer) */
+    repeating-linear-gradient(
+      to right,
+      var(--px-progress-fill-color) 0,
+      var(--px-progress-fill-color) var(--px-progress-chunk-width),
+      transparent var(--px-progress-chunk-width),
+      transparent calc(var(--px-progress-chunk-width) + var(--px-progress-chunk-gap))
+    );
+  background-size: 16px 16px, auto;
+}
+/* Striped flow animation */
+.px-progress.is-striped-flow .px-progress__fill {
+  animation: px-progress-striped-flow 0.6s steps(4) infinite;
+}
+@keyframes px-progress-striped-flow {
+0% { background-position: 0 0, 0 0;
+}
+100% { background-position: 16px 0, 0 0;
+}
+}
+/* ─── Checkered variant ─── */
+.px-progress--checkered .px-progress__fill {
+  background:
+    /* Checkerboard overlay (4 gradient layers) */
+    linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%),
+    linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.2) 75%),
+    linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.2) 75%),
+    /* Chunked fill (bottom layer) */
+    repeating-linear-gradient(
+      to right,
+      var(--px-progress-fill-color) 0,
+      var(--px-progress-fill-color) var(--px-progress-chunk-width),
+      transparent var(--px-progress-chunk-width),
+      transparent calc(var(--px-progress-chunk-width) + var(--px-progress-chunk-gap))
+    );
+  background-size: 4px 4px, 4px 4px, 4px 4px, 4px 4px, auto;
+  background-position: 0 0, 0 2px, 2px -2px, -2px 0px, 0 0;
+}
+/* ─── Indeterminate animation ─── */
+.px-progress.is-indeterminate .px-progress__fill {
+  width: 30% !important;
+  animation:
+    px-progress-indeterminate 1.2s steps(8) infinite,
+    px-progress-chunk-pulse 0.6s steps(2) infinite;
+}
+@keyframes px-progress-indeterminate {
+0% { margin-left: 0;
+}
+50% { margin-left: 70%;
+}
+100% { margin-left: 0;
+}
+}
+@keyframes px-progress-chunk-pulse {
+0%, 100% { opacity: 1;
+}
+50% { opacity: 0.7;
+}
+}
+/* ─── Text inside ─── */
+.px-progress.is-text-inside {
+  --px-progress-height: 20px;
+  --px-progress-chunk-width: 10px;
+}