sakana-element 2.1.5 → 2.3.0

package/dist/es/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/es/theme/Form.css

@@ -0,0 +1,83 @@
+/* Form Component Styles */
+.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.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-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-0e2bbb22] {
+  line-height: 32px;
+  position: relative;
+  font-size: var(--px-font-size-base);
+  flex: 1;
+  min-width: 0;
+}
+.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-0e2bbb22] {
+  border-color: var(--px-color-danger);
+}
+.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-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-0e2bbb22] {
+  --px-form-label-width: var(--ac9c6e38) !important;
+}

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/es/theme/Link.css

@@ -0,0 +1,69 @@
+/* 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.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[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] {
+    --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);
+}