sakana-element 2.2.0 → 2.3.0

package/dist/es/theme/Indicator.css

@@ -0,0 +1,159 @@
+/* Indicator Variables */
+.px-indicator[data-v-84fa8f8b] {
+  --px-indicator-bg-color: var(--px-color-primary);
+  --px-indicator-border-color: var(--px-color-primary-dark);
+  --px-indicator-shadow-color: var(--px-color-primary-dark);
+  --px-indicator-dot-size: 10px;
+  --px-indicator-offset-x: 0px;
+  --px-indicator-offset-y: 0px;
+}
+/* Base Container */
+.px-indicator[data-v-84fa8f8b] {
+  position: relative;
+  display: inline-block;
+  width: fit-content;
+}
+.px-indicator.is-inline[data-v-84fa8f8b] {
+    display: inline-flex;
+}
+/* Indicator Item — absolutely positioned overlay */
+.px-indicator__item[data-v-84fa8f8b] {
+  position: absolute;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  pointer-events: auto;
+  transition: none;
+}
+/* ─── Shared 9-position grid for item & ping ─── */
+.px-indicator__item--top-start[data-v-84fa8f8b],
+.px-indicator__item--top-center[data-v-84fa8f8b],
+.px-indicator__item--top-end[data-v-84fa8f8b],
+.px-indicator__ping--top-start[data-v-84fa8f8b],
+.px-indicator__ping--top-center[data-v-84fa8f8b],
+.px-indicator__ping--top-end[data-v-84fa8f8b] {
+  top: 0;
+  --px-indicator-ty: -50%;
+}
+.px-indicator__item--middle-start[data-v-84fa8f8b],
+.px-indicator__item--middle-center[data-v-84fa8f8b],
+.px-indicator__item--middle-end[data-v-84fa8f8b],
+.px-indicator__ping--middle-start[data-v-84fa8f8b],
+.px-indicator__ping--middle-center[data-v-84fa8f8b],
+.px-indicator__ping--middle-end[data-v-84fa8f8b] {
+  top: 50%;
+  --px-indicator-ty: -50%;
+}
+.px-indicator__item--bottom-start[data-v-84fa8f8b],
+.px-indicator__item--bottom-center[data-v-84fa8f8b],
+.px-indicator__item--bottom-end[data-v-84fa8f8b],
+.px-indicator__ping--bottom-start[data-v-84fa8f8b],
+.px-indicator__ping--bottom-center[data-v-84fa8f8b],
+.px-indicator__ping--bottom-end[data-v-84fa8f8b] {
+  bottom: 0;
+  --px-indicator-ty: 50%;
+}
+.px-indicator__item--top-start[data-v-84fa8f8b],
+.px-indicator__item--middle-start[data-v-84fa8f8b],
+.px-indicator__item--bottom-start[data-v-84fa8f8b],
+.px-indicator__ping--top-start[data-v-84fa8f8b],
+.px-indicator__ping--middle-start[data-v-84fa8f8b],
+.px-indicator__ping--bottom-start[data-v-84fa8f8b] {
+  left: 0;
+  --px-indicator-tx: -50%;
+}
+.px-indicator__item--top-center[data-v-84fa8f8b],
+.px-indicator__item--middle-center[data-v-84fa8f8b],
+.px-indicator__item--bottom-center[data-v-84fa8f8b],
+.px-indicator__ping--top-center[data-v-84fa8f8b],
+.px-indicator__ping--middle-center[data-v-84fa8f8b],
+.px-indicator__ping--bottom-center[data-v-84fa8f8b] {
+  left: 50%;
+  --px-indicator-tx: -50%;
+}
+.px-indicator__item--top-end[data-v-84fa8f8b],
+.px-indicator__item--middle-end[data-v-84fa8f8b],
+.px-indicator__item--bottom-end[data-v-84fa8f8b],
+.px-indicator__ping--top-end[data-v-84fa8f8b],
+.px-indicator__ping--middle-end[data-v-84fa8f8b],
+.px-indicator__ping--bottom-end[data-v-84fa8f8b] {
+  right: 0;
+  --px-indicator-tx: 50%;
+}
+/* Apply transform with offset */
+.px-indicator__item[data-v-84fa8f8b],
+.px-indicator__ping[data-v-84fa8f8b] {
+  transform: translate(
+    calc(var(--px-indicator-tx, 0%) + var(--px-indicator-offset-x)),
+    calc(var(--px-indicator-ty, 0%) + var(--px-indicator-offset-y))
+  );
+}
+/* ─── Shared pixel staircase clip-path ─── */
+.px-indicator__item.is-dot[data-v-84fa8f8b],
+.px-indicator__ping[data-v-84fa8f8b] {
+  width: var(--px-indicator-dot-size);
+  height: var(--px-indicator-dot-size);
+  background: var(--px-indicator-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)
+  );
+}
+/* ─── Dot mode ─── */
+.px-indicator__item.is-dot[data-v-84fa8f8b] {
+  border: none;
+  filter: drop-shadow(1px 1px 0px var(--px-indicator-shadow-color));
+}
+/* ─── Processing ping animation ─── */
+.px-indicator__ping[data-v-84fa8f8b] {
+  position: absolute;
+  z-index: 0;
+  opacity: 0.75;
+  pointer-events: none;
+  animation: px-indicator-ping-84fa8f8b 1.5s steps(4, end) infinite;
+}
+@keyframes px-indicator-ping-84fa8f8b {
+0% {
+    scale: 1;
+    opacity: 0.75;
+}
+75%, 100% {
+    scale: 2;
+    opacity: 0;
+}
+}
+/* ─── Type color variants ─── */
+.px-indicator__item--primary[data-v-84fa8f8b],
+  .px-indicator__ping--primary[data-v-84fa8f8b] {
+    --px-indicator-bg-color: var(--px-color-primary);
+    --px-indicator-border-color: var(--px-color-primary-dark);
+    --px-indicator-shadow-color: var(--px-color-primary-dark);
+}
+.px-indicator__item--success[data-v-84fa8f8b],
+  .px-indicator__ping--success[data-v-84fa8f8b] {
+    --px-indicator-bg-color: var(--px-color-success);
+    --px-indicator-border-color: var(--px-color-success-dark);
+    --px-indicator-shadow-color: var(--px-color-success-dark);
+}
+.px-indicator__item--info[data-v-84fa8f8b],
+  .px-indicator__ping--info[data-v-84fa8f8b] {
+    --px-indicator-bg-color: var(--px-color-info);
+    --px-indicator-border-color: var(--px-color-info-dark);
+    --px-indicator-shadow-color: var(--px-color-info-dark);
+}
+.px-indicator__item--warning[data-v-84fa8f8b],
+  .px-indicator__ping--warning[data-v-84fa8f8b] {
+    --px-indicator-bg-color: var(--px-color-warning);
+    --px-indicator-border-color: var(--px-color-warning-dark);
+    --px-indicator-shadow-color: var(--px-color-warning-dark);
+}
+.px-indicator__item--danger[data-v-84fa8f8b],
+  .px-indicator__ping--danger[data-v-84fa8f8b] {
+    --px-indicator-bg-color: var(--px-color-danger);
+    --px-indicator-border-color: var(--px-color-danger-dark);
+    --px-indicator-shadow-color: var(--px-color-danger-dark);
+}

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

@@ -464,6 +464,7 @@
 .px-input__prefix,
 .px-input__suffix {
   display: inline-flex;
+  align-items: center;
   white-space: nowrap;
   flex-shrink: 0;
   flex-wrap: nowrap;

package/dist/{theme → es/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 → es/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;