sakana-element 2.1.4 → 2.2.0

package/dist/theme/FileInput.css

@@ -0,0 +1,365 @@
+/* FileInput Variables */
+.px-file-input {
+  --px-file-input-text-color: var(--px-text-color-primary);
+  --px-file-input-border-color: var(--px-border-color);
+  --px-file-input-hover-border-color: var(--px-hover-border-color);
+  --px-file-input-bg-color: var(--px-fill-color-blank);
+  --px-file-input-placeholder-color: var(--px-text-color-placeholder);
+  --px-file-input-shadow-color: var(--px-shadow-color);
+  --px-file-input-hover-shadow-color: var(--px-shadow-color);
+  --px-file-input-trigger-bg-color: var(--px-fill-color-dark);
+  --px-file-input-trigger-text-color: var(--px-text-color-primary);
+  --px-file-input-trigger-hover-bg-color: var(--px-fill-color-darker);
+  --px-file-input-icon-color: var(--px-text-color-secondary);
+  --px-file-input-clear-hover-color: var(--px-text-color-primary);
+}
+/* Base FileInput Styles */
+.px-file-input {
+  --px-file-input-height: 36px;
+  position: relative;
+  font-size: var(--px-font-size-base);
+  font-family: var(--px-font-family);
+  display: inline-flex;
+  width: 100%;
+  line-height: var(--px-file-input-height);
+  box-sizing: border-box;
+  vertical-align: middle;
+}
+/* Disabled state */
+.px-file-input.is-disabled {
+    cursor: not-allowed;
+}
+.px-file-input.is-disabled .px-file-input__wrapper {
+      opacity: 0.6;
+      cursor: not-allowed;
+}
+.px-file-input.is-disabled .px-file-input__wrapper::before {
+        background: var(--px-disabled-border-color);
+}
+.px-file-input.is-disabled .px-file-input__wrapper::after {
+        background: var(--px-disabled-bg-color);
+}
+.px-file-input.is-disabled .px-file-input__trigger {
+      cursor: not-allowed;
+}
+.px-file-input.is-disabled .px-file-input__name {
+      color: var(--px-disabled-text-color);
+      cursor: not-allowed;
+}
+/* FileInput Wrapper - Main pixel-style container */
+.px-file-input__wrapper {
+  display: inline-flex;
+  flex-grow: 1;
+  align-items: center;
+  background: transparent;
+  border: none;
+  position: relative;
+  transition: none;
+  height: var(--px-file-input-height);
+  padding: 2px;
+  box-sizing: border-box;
+
+  /* Pixel shadow via drop-shadow */
+  filter: drop-shadow(
+    var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-file-input-shadow-color)
+  );
+}
+/* Border layer — filled with border color, clipped to pixel shape */
+.px-file-input__wrapper::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: var(--px-file-input-border-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)
+    );
+    z-index: -1;
+}
+/* Fill layer — inset by border width, filled with bg color */
+.px-file-input__wrapper::after {
+    content: "";
+    position: absolute;
+    inset: 2px;
+    background: var(--px-file-input-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)
+    );
+    z-index: -1;
+}
+.px-file-input__wrapper:hover::before {
+      background: var(--px-file-input-hover-border-color);
+}
+/* Hidden native file input */
+.px-file-input__native {
+  position: absolute;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  opacity: 0;
+  pointer-events: none;
+}
+/* Trigger button */
+.px-file-input__trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  align-self: stretch;
+  padding: 0 12px;
+  background: var(--px-file-input-trigger-bg-color);
+  color: var(--px-file-input-trigger-text-color);
+  font-family: var(--px-font-family);
+  font-size: inherit;
+  cursor: pointer;
+  white-space: nowrap;
+  position: relative;
+  z-index: 1;
+  border-right: 2px solid var(--px-file-input-border-color);
+  user-select: none;
+
+  /* Notch top-left and bottom-left corners to match the pixel staircase border */
+  clip-path: polygon(
+    0 2px,
+    2px 2px,
+    2px 0,
+    100% 0,
+    100% 100%,
+    2px 100%,
+    2px calc(100% - 2px),
+    0 calc(100% - 2px)
+  );
+}
+.px-file-input__trigger:hover {
+    background: var(--px-file-input-trigger-hover-bg-color);
+}
+/* File name display */
+.px-file-input__name {
+  flex: 1;
+  align-self: stretch;
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  color: var(--px-file-input-text-color);
+  font-family: var(--px-font-family);
+  font-size: inherit;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  position: relative;
+  z-index: 1;
+}
+.px-file-input__name:only-of-type {
+    color: var(--px-file-input-placeholder-color);
+}
+/* Clear icon */
+.px-file-input__clear {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: stretch;
+  padding-right: 8px;
+  color: var(--px-file-input-icon-color);
+  cursor: pointer;
+  position: relative;
+  z-index: 1;
+}
+.px-file-input__clear:hover {
+    color: var(--px-file-input-clear-hover-color);
+}
+/* Size variants */
+.px-file-input--large {
+  --px-file-input-height: 44px;
+  font-size: var(--px-font-size-large);
+}
+.px-file-input--large .px-file-input__trigger {
+    padding: 0 16px;
+}
+.px-file-input--small {
+  --px-file-input-height: 28px;
+  font-size: var(--px-font-size-small);
+}
+.px-file-input--small .px-file-input__wrapper {
+    filter: drop-shadow(2px 2px 0px var(--px-file-input-shadow-color));
+}
+.px-file-input--small .px-file-input__trigger {
+    padding: 0 8px;
+}
+.px-file-input--small .px-file-input__name {
+    padding: 0 8px;
+}
+/* Color variants */
+.px-file-input--primary {
+    --px-file-input-border-color: var(--px-color-primary);
+    --px-file-input-hover-border-color: var(--px-color-primary-dark);
+    --px-file-input-shadow-color: var(--px-color-primary-dark);
+}
+.px-file-input--primary .px-file-input__wrapper {
+    filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-primary-dark));
+}
+.px-file-input--primary .px-file-input__trigger {
+    border-right-color: var(--px-color-primary);
+}
+.px-file-input--success {
+    --px-file-input-border-color: var(--px-color-success);
+    --px-file-input-hover-border-color: var(--px-color-success-dark);
+    --px-file-input-shadow-color: var(--px-color-success-dark);
+}
+.px-file-input--success .px-file-input__wrapper {
+    filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-success-dark));
+}
+.px-file-input--success .px-file-input__trigger {
+    border-right-color: var(--px-color-success);
+}
+.px-file-input--warning {
+    --px-file-input-border-color: var(--px-color-warning);
+    --px-file-input-hover-border-color: var(--px-color-warning-dark);
+    --px-file-input-shadow-color: var(--px-color-warning-dark);
+}
+.px-file-input--warning .px-file-input__wrapper {
+    filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-warning-dark));
+}
+.px-file-input--warning .px-file-input__trigger {
+    border-right-color: var(--px-color-warning);
+}
+.px-file-input--info {
+    --px-file-input-border-color: var(--px-color-info);
+    --px-file-input-hover-border-color: var(--px-color-info-dark);
+    --px-file-input-shadow-color: var(--px-color-info-dark);
+}
+.px-file-input--info .px-file-input__wrapper {
+    filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-info-dark));
+}
+.px-file-input--info .px-file-input__trigger {
+    border-right-color: var(--px-color-info);
+}
+.px-file-input--danger {
+    --px-file-input-border-color: var(--px-color-danger);
+    --px-file-input-hover-border-color: var(--px-color-danger-dark);
+    --px-file-input-shadow-color: var(--px-color-danger-dark);
+}
+.px-file-input--danger .px-file-input__wrapper {
+    filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-danger-dark));
+}
+.px-file-input--danger .px-file-input__trigger {
+    border-right-color: var(--px-color-danger);
+}
+/* Ghost variant — no border/shadow at rest */
+.px-file-input.is-ghost .px-file-input__wrapper {
+    filter: none;
+}
+.px-file-input.is-ghost .px-file-input__wrapper::before { background: transparent;
+}
+.px-file-input.is-ghost .px-file-input__wrapper:hover::before { background: var(--px-file-input-hover-border-color);
+}
+.px-file-input.is-ghost .px-file-input__wrapper:hover {
+      filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-file-input-hover-shadow-color));
+}
+.px-file-input.is-ghost .px-file-input__trigger {
+    border-right-color: transparent;
+}
+.px-file-input.is-ghost:hover .px-file-input__trigger {
+    border-right-color: var(--px-file-input-hover-border-color);
+}
+/* Ghost + Color variants */
+.px-file-input--primary.is-ghost {
+    --px-file-input-hover-shadow-color: var(--px-color-primary-dark);
+}
+.px-file-input--primary.is-ghost .px-file-input__wrapper {
+      filter: none;
+}
+.px-file-input--primary.is-ghost .px-file-input__wrapper::before { background: transparent;
+}
+.px-file-input--primary.is-ghost .px-file-input__wrapper:hover::before { background: var(--px-color-primary);
+}
+.px-file-input--primary.is-ghost .px-file-input__wrapper:hover {
+        filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-file-input-hover-shadow-color));
+}
+.px-file-input--success.is-ghost {
+    --px-file-input-hover-shadow-color: var(--px-color-success-dark);
+}
+.px-file-input--success.is-ghost .px-file-input__wrapper {
+      filter: none;
+}
+.px-file-input--success.is-ghost .px-file-input__wrapper::before { background: transparent;
+}
+.px-file-input--success.is-ghost .px-file-input__wrapper:hover::before { background: var(--px-color-success);
+}
+.px-file-input--success.is-ghost .px-file-input__wrapper:hover {
+        filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-file-input-hover-shadow-color));
+}
+.px-file-input--warning.is-ghost {
+    --px-file-input-hover-shadow-color: var(--px-color-warning-dark);
+}
+.px-file-input--warning.is-ghost .px-file-input__wrapper {
+      filter: none;
+}
+.px-file-input--warning.is-ghost .px-file-input__wrapper::before { background: transparent;
+}
+.px-file-input--warning.is-ghost .px-file-input__wrapper:hover::before { background: var(--px-color-warning);
+}
+.px-file-input--warning.is-ghost .px-file-input__wrapper:hover {
+        filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-file-input-hover-shadow-color));
+}
+.px-file-input--info.is-ghost {
+    --px-file-input-hover-shadow-color: var(--px-color-info-dark);
+}
+.px-file-input--info.is-ghost .px-file-input__wrapper {
+      filter: none;
+}
+.px-file-input--info.is-ghost .px-file-input__wrapper::before { background: transparent;
+}
+.px-file-input--info.is-ghost .px-file-input__wrapper:hover::before { background: var(--px-color-info);
+}
+.px-file-input--info.is-ghost .px-file-input__wrapper:hover {
+        filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-file-input-hover-shadow-color));
+}
+.px-file-input--danger.is-ghost {
+    --px-file-input-hover-shadow-color: var(--px-color-danger-dark);
+}
+.px-file-input--danger.is-ghost .px-file-input__wrapper {
+      filter: none;
+}
+.px-file-input--danger.is-ghost .px-file-input__wrapper::before { background: transparent;
+}
+.px-file-input--danger.is-ghost .px-file-input__wrapper:hover::before { background: var(--px-color-danger);
+}
+.px-file-input--danger.is-ghost .px-file-input__wrapper:hover {
+        filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-file-input-hover-shadow-color));
+}

package/dist/theme/Form.css

@@ -1,52 +1,83 @@
 /* Form Component Styles */
-.px-form[data-v-b1c8aebb] {
+.px-form[data-v-0e2bbb22] {
   /* Form container styles */
+}
+
+/* Inline layout */
+.px-form.is-inline[data-v-0e2bbb22] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0 16px;
 }
-.px-form-item[data-v-b1c8aebb] {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
+.px-form.is-inline .px-form-item[data-v-0e2bbb22] {
+  margin-bottom: 12px;
+}
+.px-form-item[data-v-0e2bbb22] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
   margin-bottom: 18px;
 }
-.px-form-item__label[data-v-b1c8aebb] {
-  display: inline-block;
-  vertical-align: middle;
-  font-size: var(--px-font-size-base);
-  color: var(--px-text-color-regular);
-  line-height: 32px;
-  padding: 0 12px 0 0;
-  box-sizing: border-box;
-  width: var(--px-form-lebel-width, 150px);
-  flex-shrink: 0;
+.px-form-item__label[data-v-0e2bbb22] {
+  display: inline-block;
+  vertical-align: middle;
+  font-size: var(--px-font-size-base);
+  color: var(--px-text-color-regular);
+  line-height: 32px;
+  padding: 0 12px 0 0;
+  box-sizing: border-box;
+  width: var(--px-form-label-width, 150px);
+  flex-shrink: 0;
   text-align: right;
 }
-.px-form-item__content[data-v-b1c8aebb] {
-  line-height: 32px;
-  position: relative;
-  font-size: var(--px-font-size-base);
-  flex: 1;
+.px-form-item__content[data-v-0e2bbb22] {
+  line-height: 32px;
+  position: relative;
+  font-size: var(--px-font-size-base);
+  flex: 1;
   min-width: 0;
 }
-.px-form-item__error[data-v-b1c8aebb] {
-  color: var(--px-color-danger);
-  font-size: var(--px-font-size-small);
-  line-height: 1;
-  padding-top: 4px;
-  position: absolute;
-  top: 100%;
+.px-form-item__error-msg[data-v-0e2bbb22] {
+  color: var(--px-color-danger);
+  font-size: var(--px-font-size-small);
+  line-height: 1;
+  padding-top: 4px;
+  position: absolute;
+  top: 100%;
   left: 0;
 }
-.px-form-item.is-error .px-input__wrapper[data-v-b1c8aebb] {
+.px-form-item.is-error .px-input__wrapper[data-v-0e2bbb22] {
   border-color: var(--px-color-danger);
 }
-.px-form-item.is-success .px-input__wrapper[data-v-b1c8aebb] {
+.px-form-item.is-success .px-input__wrapper[data-v-0e2bbb22] {
   border-color: var(--px-color-success);
 }
-.px-form-item.is-required .px-form-item__label[data-v-b1c8aebb]::before {
-  content: "*";
-  color: var(--px-color-danger);
+.px-form-item.is-required .px-form-item__label[data-v-0e2bbb22]::before {
+  content: "*";
+  color: var(--px-color-danger);
   margin-right: 4px;
+}
+
+/* Input wrapper for status icon alignment */
+.px-form-item__input-wrap[data-v-0e2bbb22] {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+}
+
+/* Status icon */
+.px-form-item__status-icon[data-v-0e2bbb22] {
+  position: absolute;
+  right: 8px;
+  z-index: 1;
+}
+.px-form-item__status-icon.is-success[data-v-0e2bbb22] {
+  color: var(--px-color-success);
+}
+.px-form-item__status-icon.is-error[data-v-0e2bbb22] {
+  color: var(--px-color-danger);
 }
-.px-form-item[data-v-b1c8aebb] {
-  --px-form-lebel-width: var(--f6756cfe) !important;
+.px-form-item[data-v-0e2bbb22] {
+  --px-form-label-width: var(--ac9c6e38) !important;
 }

package/dist/theme/Link.css

@@ -0,0 +1,50 @@
+/* Link Variables */
+.px-link[data-v-d754ba7d] {
+  --px-link-text-color: var(--px-text-color-regular);
+  --px-link-hover-color: var(--px-text-color-primary);
+}
+/* Base Link Styles */
+.px-link[data-v-d754ba7d] {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-family: var(--px-font-family);
+  font-size: var(--px-font-size-base);
+  color: var(--px-link-text-color);
+  cursor: pointer;
+  text-decoration: none;
+  transition: none;
+}
+.px-link[data-v-d754ba7d]:hover {
+    color: var(--px-link-hover-color);
+}
+.px-link.is-underline[data-v-d754ba7d] {
+    text-decoration: underline;
+    text-underline-offset: 3px;
+}
+.px-link.is-disabled[data-v-d754ba7d] {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+}
+/* Type variants */
+.px-link--primary[data-v-d754ba7d] {
+    --px-link-text-color: var(--px-color-primary);
+    --px-link-hover-color: var(--px-color-primary-dark);
+}
+.px-link--success[data-v-d754ba7d] {
+    --px-link-text-color: var(--px-color-success);
+    --px-link-hover-color: var(--px-color-success-dark);
+}
+.px-link--info[data-v-d754ba7d] {
+    --px-link-text-color: var(--px-color-info);
+    --px-link-hover-color: var(--px-color-info-dark);
+}
+.px-link--warning[data-v-d754ba7d] {
+    --px-link-text-color: var(--px-color-warning);
+    --px-link-hover-color: var(--px-color-warning-dark);
+}
+.px-link--danger[data-v-d754ba7d] {
+    --px-link-text-color: var(--px-color-danger);
+    --px-link-hover-color: var(--px-color-danger-dark);
+}

package/dist/theme/Loading.css

@@ -1,3 +1,153 @@
+/* LoadingIndicator Variables */
+.px-loading-indicator[data-v-1435ecee] {
+  --px-loading-indicator-color: var(--px-color-primary);
+  --px-loading-indicator-size: 24px;
+}
+/* Base */
+.px-loading-indicator[data-v-1435ecee] {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: var(--px-loading-indicator-size);
+  height: var(--px-loading-indicator-size);
+  color: var(--px-loading-indicator-color);
+  font-family: var(--px-font-family);
+  vertical-align: middle;
+}
+/* Size variants */
+.px-loading-indicator--xs[data-v-1435ecee] {
+  --px-loading-indicator-size: 16px;
+}
+.px-loading-indicator--sm[data-v-1435ecee] {
+  --px-loading-indicator-size: 20px;
+}
+.px-loading-indicator--md[data-v-1435ecee] {
+  --px-loading-indicator-size: 24px;
+}
+.px-loading-indicator--lg[data-v-1435ecee] {
+  --px-loading-indicator-size: 32px;
+}
+/* Type variants */
+.px-loading-indicator--primary[data-v-1435ecee] {
+    --px-loading-indicator-color: var(--px-color-primary);
+}
+.px-loading-indicator--success[data-v-1435ecee] {
+    --px-loading-indicator-color: var(--px-color-success);
+}
+.px-loading-indicator--info[data-v-1435ecee] {
+    --px-loading-indicator-color: var(--px-color-info);
+}
+.px-loading-indicator--warning[data-v-1435ecee] {
+    --px-loading-indicator-color: var(--px-color-warning);
+}
+.px-loading-indicator--danger[data-v-1435ecee] {
+    --px-loading-indicator-color: var(--px-color-danger);
+}
+/* ─── 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;
+  animation: px-indicator-spin-1435ecee 0.8s steps(8) infinite;
+}
+@keyframes px-indicator-spin-1435ecee {
+0% { transform: rotate(0deg);
+}
+100% { transform: rotate(360deg);
+}
+}
+/* ─── Dots variant ─── */
+.px-loading-indicator--dots[data-v-1435ecee] {
+  gap: 3px;
+}
+.px-loading-indicator--dots .px-loading-indicator__inner[data-v-1435ecee] {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+}
+.px-loading-indicator--dots .px-loading-indicator__inner[data-v-1435ecee]::before,
+.px-loading-indicator--dots .px-loading-indicator__inner[data-v-1435ecee]::after {
+  content: '';
+  display: block;
+  width: calc(var(--px-loading-indicator-size) * 0.2);
+  height: calc(var(--px-loading-indicator-size) * 0.2);
+  background: var(--px-loading-indicator-color);
+}
+.px-loading-indicator--dots .px-loading-indicator__inner[data-v-1435ecee]::before {
+  animation: px-indicator-dot-1435ecee 0.9s steps(3) infinite;
+}
+.px-loading-indicator--dots .px-loading-indicator__inner[data-v-1435ecee] {
+  background: var(--px-loading-indicator-color);
+  width: calc(var(--px-loading-indicator-size) * 0.2);
+  height: calc(var(--px-loading-indicator-size) * 0.2);
+  animation: px-indicator-dot-1435ecee 0.9s steps(3) 0.15s infinite;
+}
+.px-loading-indicator--dots .px-loading-indicator__inner[data-v-1435ecee]::after {
+  animation: px-indicator-dot-1435ecee 0.9s steps(3) 0.3s infinite;
+}
+@keyframes px-indicator-dot-1435ecee {
+0%, 100% { opacity: 0.2;
+}
+50% { opacity: 1;
+}
+}
+/* ─── Bars variant ─── */
+.px-loading-indicator--bars .px-loading-indicator__inner[data-v-1435ecee] {
+  display: flex;
+  align-items: flex-end;
+  gap: 2px;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+}
+.px-loading-indicator--bars .px-loading-indicator__inner[data-v-1435ecee]::before,
+.px-loading-indicator--bars .px-loading-indicator__inner[data-v-1435ecee]::after {
+  content: '';
+  display: block;
+  width: calc(var(--px-loading-indicator-size) * 0.18);
+  background: var(--px-loading-indicator-color);
+}
+.px-loading-indicator--bars .px-loading-indicator__inner[data-v-1435ecee]::before {
+  height: 40%;
+  animation: px-indicator-bar-1435ecee 0.8s steps(4) infinite;
+}
+.px-loading-indicator--bars .px-loading-indicator__inner[data-v-1435ecee] {
+  background: var(--px-loading-indicator-color);
+  width: calc(var(--px-loading-indicator-size) * 0.18);
+  animation: px-indicator-bar-1435ecee 0.8s steps(4) 0.15s infinite;
+}
+.px-loading-indicator--bars .px-loading-indicator__inner[data-v-1435ecee]::after {
+  height: 60%;
+  animation: px-indicator-bar-1435ecee 0.8s steps(4) 0.3s infinite;
+}
+@keyframes px-indicator-bar-1435ecee {
+0%, 100% { height: 30%;
+}
+50% { height: 100%;
+}
+}
+/* ─── Ring variant ─── */
+.px-loading-indicator--ring .px-loading-indicator__inner[data-v-1435ecee] {
+  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;
+}
 /* Loading Variables */
 .px-loading {
   --px-loading-icon-color: var(--px-color-primary);
@@ -72,7 +222,7 @@
 .px-dark .px-loading {
   --px-loading-bg-color: rgba(30, 30, 46, 0.85);
 }
-.px-loading {
-  --px-loading-bg-color: var(--c7e915b4) !important; /* !important 表示强制覆盖内联样式  v-bind(background) 表示绑定background属性 */
-  --px-loading-z-index: var(--24995070) !important; /* !important 表示强制覆盖内联样式  v-bind(zIndex) 表示绑定zIndex属性 */
-}
+.px-loading {
+  --px-loading-bg-color: var(--d4003bba) !important;
+  --px-loading-z-index: var(--b5c47826) !important;
+}