sakana-element 2.4.2 → 2.5.0

package/dist/theme/Validator.css

@@ -1,25 +1 @@
-.px-validator[data-v-9c099378] {
-  display: inline-flex;
-  flex-direction: column;
-  font-family: var(--px-font-family);
-}
-.px-validator__content[data-v-9c099378] {
-  display: contents;
-}
-.px-validator__hint[data-v-9c099378] {
-  min-height: 1.4em;
-  padding-top: 4px;
-  font-size: var(--px-font-size-small);
-  color: var(--px-color-danger);
-  line-height: 1.4;
-  transition: opacity 0.15s ease;
-}
-.px-validator__hint.is-hidden[data-v-9c099378] {
-  opacity: 0;
-  pointer-events: none;
-}
-.px-validator__hint-text[data-v-9c099378] {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-}
+.px-validator[data-v-5d070382]{font-family:var(--px-font-family);flex-direction:column;display:inline-flex}.px-validator__content[data-v-5d070382]{display:contents}.px-validator.is-error .px-validator__content[data-v-5d070382]{position:relative}.px-validator__hint[data-v-5d070382]{min-height:1.4em;font-size:var(--px-font-size-small);color:var(--px-color-danger);padding-top:6px;line-height:1.4;transition:opacity .15s}.px-validator__hint.is-hidden[data-v-5d070382]{opacity:0;pointer-events:none}.px-validator__bubble[data-v-5d070382]{background:var(--px-fill-color-blank);color:var(--px-color-danger);font-family:var(--px-font-family);font-size:var(--px-font-size-small);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:inset 0 0 0 2px var(--px-color-danger);filter:drop-shadow(var(--px-shadow-offset-x,2px) var(--px-shadow-offset-y,2px) 0px var(--px-color-danger-dark));align-items:center;gap:4px;padding:4px 10px;display:inline-flex;position:relative}.px-validator__bubble-arrow[data-v-5d070382]{width:0;height:0;position:absolute;top:-6px;left:12px}.px-validator__bubble-arrow[data-v-5d070382]:before{content:"";background:var(--px-color-danger);width:4px;height:2px;position:absolute;top:0;left:2px}.px-validator__bubble-arrow[data-v-5d070382]:after{content:"";background:var(--px-color-danger);width:8px;height:2px;position:absolute;top:2px;left:0}.px-validator__hint-icon[data-v-5d070382]{flex-shrink:0;width:10px;height:12px;display:inline-block;position:relative}.px-validator__hint-icon[data-v-5d070382]:before{content:"";background:var(--px-color-danger);width:4px;height:6px;position:absolute;top:0;left:50%;transform:translate(-50%)}.px-validator__hint-icon[data-v-5d070382]:after{content:"";background:var(--px-color-danger);width:4px;height:2px;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.px-validator__hint-text[data-v-5d070382]{align-items:center;gap:4px;display:inline-flex}@keyframes pixel-shake-5d070382{0%{transform:translate(0)}20%{transform:translate(-2px)}40%{transform:translate(2px)}60%{transform:translate(-2px)}80%{transform:translate(2px)}to{transform:translate(0)}}.px-validator.is-error .px-validator__hint[data-v-5d070382]{animation:.3s step-end pixel-shake-5d070382}.px-validator__bubble--success[data-v-5d070382]{background:var(--px-color-success-light-9);color:var(--px-color-success);box-shadow:inset 0 0 0 2px var(--px-color-success);filter:drop-shadow(var(--px-shadow-offset-x,2px) var(--px-shadow-offset-y,2px) 0px var(--px-color-success-dark))}.px-validator__bubble--success .px-validator__bubble-arrow[data-v-5d070382]:before,.px-validator__bubble--success .px-validator__bubble-arrow[data-v-5d070382]:after{background:var(--px-color-success)}.px-validator__success-icon[data-v-5d070382]{flex-shrink:0;width:10px;height:12px;display:inline-block;position:relative}.px-validator__success-icon[data-v-5d070382]:before{content:"";border-left:2px solid var(--px-color-success);border-bottom:2px solid var(--px-color-success);width:8px;height:6px;position:absolute;top:2px;left:50%;transform:translate(-50%)rotate(-45deg)}@keyframes pixel-pop-5d070382{0%{opacity:0;transform:scale(0)}50%{opacity:1;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}.px-validator.is-success .px-validator__hint[data-v-5d070382]{color:var(--px-color-success)}.px-validator.is-success .px-validator__bubble[data-v-5d070382]{animation:.25s steps(3,end) pixel-pop-5d070382}

package/dist/theme/index.css

@@ -1,341 +1 @@
-/** reset.css */
-body {
-  font-family: var(--px-font-family);
-  font-weight: 400;
-  font-size: var(--px-font-size-base);
-  line-height: calc(var(--px-font-size-base) * 1.2);
-  color: var(--px-text-color-primary);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-tap-highlight-color: transparent;
-}
-a {
-  color: var(--px-color-primary);
-  text-decoration: none;
-}
-a:hover,
-  a:focus {
-    color: var(--px-color-primary-light-3);
-  }
-a:active {
-    color: var(--px-color-primary-dark-2);
-  }
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  color: var(--px-text-color-regular);
-  font-weight: inherit;
-}
-h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
-    margin-top: 0;
-  }
-h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child {
-    margin-bottom: 0;
-  }
-h1 {
-  font-size: calc(var(--px-font-size-base) + 6px);
-}
-h2 {
-  font-size: calc(var(--px-font-size-base) + 4px);
-}
-h3 {
-  font-size: calc(var(--px-font-size-base) + 2px);
-}
-h4,
-h5,
-h6,
-p {
-  font-size: inherit;
-}
-p {
-  line-height: 1.8;
-}
-p:first-child {
-    margin-top: 0;
-  }
-p:last-child {
-    margin-bottom: 0;
-  }
-sup,
-sub {
-  font-size: calc(var(--px-font-size-base) - 1px);
-}
-small {
-  font-size: calc(var(--px-font-size-base) - 2px);
-}
-hr {
-  margin-top: 20px;
-  margin-bottom: 20px;
-  border: 0;
-  border-top: 1px solid var(--px-border-color-lighter);
-}
-/**
- * zpix - A pixel font for retro UI
- * Source: https://github.com/SolidZORO/zpix-pixel-font
- */
-@font-face {
-  font-family: "zpix";
-  src: url("../theme/fonts/zpix.woff2") format("woff2");
-  font-weight: normal;
-  font-style: normal;
-  font-display: swap;
-}
-/* Fallback for browsers that don't support custom fonts */
-@supports not (font-variation-settings: normal) {
-  .px-pixel-font-fallback {
-    font-family: "Courier New", "Consolas", monospace;
-  }
-}
-:root {
-  /* === TYPOGRAPHY === */
-  --px-font-family: "zpix", "Courier New", "Consolas", monospace;
-  --px-font-size-base: 14px;
-  --px-font-size-large: 16px;
-  --px-font-size-medium: 15px;
-  --px-font-size-small: 12px;
-  --px-font-size-extra-large: 18px;
-  --px-font-size-extra-small: 10px;
-  --px-font-weight-primary: 400;
-
-  /* === PIXEL BORDER SYSTEM === */
-  --px-border-width: 2px;
-  --px-border-width-thick: 3px;
-  --px-border-width-thin: 1px;
-  --px-border-style: solid;
-  --px-border-pixel-size: 2px;
-  --px-border-radius-base: 0px;
-  --px-border-radius-small: 0px;
-  --px-border-radius-round: 0px;
-  --px-border-radius-circle: 0px;
-
-  /* === COLOR PALETTE - Pixelium Style OKlab-inspired === */
-  --px-color-white: #ffffff;
-  --px-color-black: #1e1e2e;
-  --px-color-pure-black: #11111b;
-
-  /* Primary - Soft Lavender Blue (Pixelium style) */
-  --px-color-primary: #7287fd;
-  --px-color-primary-dark: #5c6bc0;
-  --px-color-primary-light-3: #8e9ffe;
-  --px-color-primary-light-5: #a5b4fe;
-  --px-color-primary-light-7: #c7d2fe;
-  --px-color-primary-light-8: #dbe1fe;
-  --px-color-primary-light-9: #eef1fe;
-
-  /* Success - Soft Teal Green */
-  --px-color-success: #40a070;
-  --px-color-success-dark: #2d7a53;
-  --px-color-success-light-3: #5cb88a;
-  --px-color-success-light-5: #7ecfa6;
-  --px-color-success-light-7: #a8e4c3;
-  --px-color-success-light-8: #c4edd6;
-  --px-color-success-light-9: #e2f7eb;
-
-  /* Warning - Warm Peach */
-  --px-color-warning: #fab387;
-  --px-color-warning-dark: #e89a6e;
-  --px-color-warning-light-3: #fbc19e;
-  --px-color-warning-light-5: #fccfb5;
-  --px-color-warning-light-7: #fddccc;
-  --px-color-warning-light-8: #fee9e0;
-  --px-color-warning-light-9: #fef5f0;
-
-  /* Danger - Soft Rose */
-  --px-color-danger: #f38ba8;
-  --px-color-danger-dark: #e06c88;
-  --px-color-danger-light-3: #f5a0b8;
-  --px-color-danger-light-5: #f7b5c8;
-  --px-color-danger-light-7: #f9cad8;
-  --px-color-danger-light-8: #fbdfe6;
-  --px-color-danger-light-9: #fdf0f4;
-
-  /* Info - Muted Sky */
-  --px-color-info: #89b4fa;
-  --px-color-info-dark: #6a9be0;
-  --px-color-info-light-3: #a0c4fb;
-  --px-color-info-light-5: #b6d3fc;
-  --px-color-info-light-7: #cde2fd;
-  --px-color-info-light-8: #e0edfe;
-  --px-color-info-light-9: #f0f6fe;
-
-  /* Light mode backgrounds - Warm cream tones */
-  --px-bg-color: #eff1f5;
-  --px-bg-color-page: #e6e9ef;
-  --px-bg-color-overlay: #ffffff;
-
-  /* Fill colors - Soft grays */
-  --px-fill-color: #dce0e8;
-  --px-fill-color-light: #e6e9ef;
-  --px-fill-color-lighter: #eff1f5;
-  --px-fill-color-extra-light: #f5f6f8;
-  --px-fill-color-dark: #ccd0da;
-  --px-fill-color-darker: #bcc0cc;
-  --px-fill-color-blank: #ffffff;
-
-  /* Light mode text - Rich darks */
-  --px-text-color-primary: #4c4f69;
-  --px-text-color-regular: #5c5f77;
-  --px-text-color-secondary: #6c6f85;
-  --px-text-color-placeholder: #8c8fa1;
-  --px-text-color-disabled: #9ca0b0;
-
-  /* Light mode borders - Clear definition */
-  --px-border-color: #4c4f69;
-  --px-border-color-light: #6c6f85;
-  --px-border-color-lighter: #9ca0b0;
-  --px-border-color-extra-light: #bcc0cc;
-  --px-border-color-dark: #3c3f52;
-  --px-border-color-darker: #1e1e2e;
-  --px-border-color-hover: var(--px-color-primary);
-  --px-border: var(--px-border-width) var(--px-border-style) var(--px-border-color);
-
-  /* === PIXEL SHADOWS - Classic offset shadow === */
-  --px-shadow-offset-x: 3px;
-  --px-shadow-offset-y: 3px;
-  --px-shadow-color: #9ca0b0;
-  --px-shadow-color-dark: #6c6f85;
-  --px-box-shadow: var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0 0 var(--px-shadow-color);
-  --px-box-shadow-hover: 4px 4px 0 0 var(--px-shadow-color);
-  --px-box-shadow-active: 1px 1px 0 0 var(--px-shadow-color);
-  --px-box-shadow-inset-light: inset 1px 1px 0 0 rgba(255, 255, 255, 0.5);
-  --px-box-shadow-inset-dark: inset -1px -1px 0 0 rgba(0, 0, 0, 0.1);
-
-  /* === TRANSITIONS === */
-  --px-transition-duration: 0s;
-  --px-transition-duration-fast: 0s;
-  --px-transition-function: step-end;
-
-  /* === COMPONENT SIZES === */
-  --px-component-size-large: 44px;
-  --px-component-size: 36px;
-  --px-component-size-small: 28px;
-
-  /* === HOVER INVERSION (default / untyped components) === */
-  --px-hover-text-color: var(--px-color-white);
-  --px-hover-bg-color: var(--px-color-black);
-  --px-hover-border-color: var(--px-color-black);
-  --px-active-text-color: var(--px-color-white);
-  --px-active-bg-color: var(--px-border-color-dark);
-  --px-active-border-color: var(--px-border-color-dark);
-
-  /* === DISABLED STATES === */
-  --px-disabled-bg-color: var(--px-fill-color-light);
-  --px-disabled-text-color: var(--px-text-color-placeholder);
-  --px-disabled-border-color: var(--px-border-color-lighter);
-}
-/* === DARK MODE - Mocha Catppuccin inspired === */
-.px-dark,
-.dark {
-  --px-color-black: #11111b;
-  --px-color-pure-black: #000000;
-
-  /* Dark backgrounds */
-  --px-bg-color: #1e1e2e;
-  --px-bg-color-page: #181825;
-  --px-bg-color-overlay: #313244;
-
-  /* Dark fills */
-  --px-fill-color: #313244;
-  --px-fill-color-light: #45475a;
-  --px-fill-color-lighter: #585b70;
-  --px-fill-color-extra-light: #6c7086;
-  --px-fill-color-dark: #181825;
-  --px-fill-color-darker: #11111b;
-  --px-fill-color-blank: #1e1e2e;
-
-  /* Dark mode text */
-  --px-text-color-primary: #cdd6f4;
-  --px-text-color-regular: #bac2de;
-  --px-text-color-secondary: #a6adc8;
-  --px-text-color-placeholder: #7f849c;
-  --px-text-color-disabled: #585b70;
-
-  /* Dark mode borders */
-  --px-border-color: #cdd6f4;
-  --px-border-color-light: #a6adc8;
-  --px-border-color-lighter: #7f849c;
-  --px-border-color-extra-light: #585b70;
-  --px-border-color-dark: #f5e0dc;
-  --px-border-color-darker: #ffffff;
-
-  /* Dark shadows */
-  --px-shadow-color: #585b70;
-  --px-shadow-color-dark: #45475a;
-
-  /* Dark hover inversion */
-  --px-hover-text-color: var(--px-color-black);
-  --px-hover-bg-color: var(--px-text-color-primary);
-  --px-hover-border-color: var(--px-text-color-primary);
-  --px-active-text-color: var(--px-color-black);
-  --px-active-bg-color: var(--px-border-color-light);
-  --px-active-border-color: var(--px-border-color-light);
-
-  /* Dark disabled */
-  --px-disabled-bg-color: var(--px-fill-color-light);
-  --px-disabled-text-color: var(--px-text-color-placeholder);
-  --px-disabled-border-color: var(--px-border-color-lighter);
-
-  /* Dark primary shades */
-  --px-color-primary-light-3: #5c6bc0;
-  --px-color-primary-light-5: #4a5699;
-  --px-color-primary-light-7: #3a4573;
-  --px-color-primary-light-8: #2e365c;
-  --px-color-primary-light-9: #232845;
-
-  /* Dark success shades */
-  --px-color-success-light-3: #2d7a53;
-  --px-color-success-light-5: #245f42;
-  --px-color-success-light-7: #1b4531;
-  --px-color-success-light-8: #153827;
-  --px-color-success-light-9: #0f2b1e;
-
-  /* Dark warning shades */
-  --px-color-warning-light-3: #c8906d;
-  --px-color-warning-light-5: #9a6f54;
-  --px-color-warning-light-7: #6c4e3b;
-  --px-color-warning-light-8: #563e2f;
-  --px-color-warning-light-9: #3f2e23;
-
-  /* Dark danger shades */
-  --px-color-danger-light-3: #c26e87;
-  --px-color-danger-light-5: #965567;
-  --px-color-danger-light-7: #6a3c49;
-  --px-color-danger-light-8: #54303a;
-  --px-color-danger-light-9: #3e242c;
-
-  /* Dark info shades */
-  --px-color-info-light-3: #6e90c8;
-  --px-color-info-light-5: #546f99;
-  --px-color-info-light-7: #3b4e6c;
-  --px-color-info-light-8: #2f3e56;
-  --px-color-info-light-9: #232e40;
-}
-/* === GLOBAL STYLES === */
-* {
-  box-sizing: border-box;
-  image-rendering: pixelated;
-  image-rendering: -moz-crisp-edges;
-  image-rendering: crisp-edges;
-}
-html {
-  font-family: var(--px-font-family);
-  font-size: var(--px-font-size-base);
-  color: var(--px-text-color-primary);
-  background-color: var(--px-bg-color-page);
-  -webkit-font-smoothing: none;
-  -moz-osx-font-smoothing: unset;
-}
-body {
-  margin: 0;
-  padding: 0;
-}
-/* Pixel font rendering optimization */
-[class^="px-"],
-[class*=" px-"] {
-  font-family: var(--px-font-family);
-  -webkit-font-smoothing: none;
-  -moz-osx-font-smoothing: unset;
-}
+body{font-family:var(--px-font-family);font-weight:400;font-size:var(--px-font-size-base);line-height:calc(var(--px-font-size-base) * 1.2);color:var(--px-text-color-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}a{color:var(--px-color-primary);text-decoration:none}a:hover,a:focus{color:var(--px-color-primary-light-3)}a:active{color:var(--px-color-primary-dark-2)}h1,h2,h3,h4,h5,h6{color:var(--px-text-color-regular);font-weight:inherit}h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child{margin-top:0}h1:last-child,h2:last-child,h3:last-child,h4:last-child,h5:last-child,h6:last-child{margin-bottom:0}h1{font-size:calc(var(--px-font-size-base) + 6px)}h2{font-size:calc(var(--px-font-size-base) + 4px)}h3{font-size:calc(var(--px-font-size-base) + 2px)}h4,h5,h6,p{font-size:inherit}p{line-height:1.8}p:first-child{margin-top:0}p:last-child{margin-bottom:0}sup,sub{font-size:calc(var(--px-font-size-base) - 1px)}small{font-size:calc(var(--px-font-size-base) - 2px)}hr{border:0;border-top:1px solid var(--px-border-color-lighter);margin-top:20px;margin-bottom:20px}@font-face{font-family:zpix;src:url("../theme/fonts/zpix.woff2")format("woff2");font-weight:400;font-style:normal;font-display:swap}@supports not (font-variation-settings:normal){.px-pixel-font-fallback{font-family:Courier New,Consolas,monospace}}:root{--px-font-family:"zpix", "Courier New", "Consolas", monospace;--px-font-size-base:14px;--px-font-size-large:16px;--px-font-size-medium:15px;--px-font-size-small:12px;--px-font-size-extra-large:18px;--px-font-size-extra-small:10px;--px-font-weight-primary:400;--px-border-width:2px;--px-border-width-thick:3px;--px-border-width-thin:1px;--px-border-style:solid;--px-border-pixel-size:2px;--px-border-radius-base:0px;--px-border-radius-small:0px;--px-border-radius-round:0px;--px-border-radius-circle:0px;--px-color-white:#fff;--px-color-black:#1e1e2e;--px-color-pure-black:#11111b;--px-color-primary:#7287fd;--px-color-primary-dark:#5c6bc0;--px-color-primary-light-3:#8e9ffe;--px-color-primary-light-5:#a5b4fe;--px-color-primary-light-7:#c7d2fe;--px-color-primary-light-8:#dbe1fe;--px-color-primary-light-9:#eef1fe;--px-color-success:#40a070;--px-color-success-dark:#2d7a53;--px-color-success-light-3:#5cb88a;--px-color-success-light-5:#7ecfa6;--px-color-success-light-7:#a8e4c3;--px-color-success-light-8:#c4edd6;--px-color-success-light-9:#e2f7eb;--px-color-warning:#fab387;--px-color-warning-dark:#e89a6e;--px-color-warning-light-3:#fbc19e;--px-color-warning-light-5:#fccfb5;--px-color-warning-light-7:#fddccc;--px-color-warning-light-8:#fee9e0;--px-color-warning-light-9:#fef5f0;--px-color-danger:#f38ba8;--px-color-danger-dark:#e06c88;--px-color-danger-light-3:#f5a0b8;--px-color-danger-light-5:#f7b5c8;--px-color-danger-light-7:#f9cad8;--px-color-danger-light-8:#fbdfe6;--px-color-danger-light-9:#fdf0f4;--px-color-info:#89b4fa;--px-color-info-dark:#6a9be0;--px-color-info-light-3:#a0c4fb;--px-color-info-light-5:#b6d3fc;--px-color-info-light-7:#cde2fd;--px-color-info-light-8:#e0edfe;--px-color-info-light-9:#f0f6fe;--px-bg-color:#eff1f5;--px-bg-color-page:#e6e9ef;--px-bg-color-overlay:#fff;--px-fill-color:#dce0e8;--px-fill-color-light:#e6e9ef;--px-fill-color-lighter:#eff1f5;--px-fill-color-extra-light:#f5f6f8;--px-fill-color-dark:#ccd0da;--px-fill-color-darker:#bcc0cc;--px-fill-color-blank:#fff;--px-text-color-primary:#4c4f69;--px-text-color-regular:#5c5f77;--px-text-color-secondary:#6c6f85;--px-text-color-placeholder:#8c8fa1;--px-text-color-disabled:#9ca0b0;--px-border-color:#4c4f69;--px-border-color-light:#6c6f85;--px-border-color-lighter:#9ca0b0;--px-border-color-extra-light:#bcc0cc;--px-border-color-dark:#3c3f52;--px-border-color-darker:#1e1e2e;--px-border-color-hover:var(--px-color-primary);--px-border:var(--px-border-width) var(--px-border-style) var(--px-border-color);--px-shadow-offset-x:3px;--px-shadow-offset-y:3px;--px-shadow-color:#9ca0b0;--px-shadow-color-dark:#6c6f85;--px-box-shadow:var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0 0 var(--px-shadow-color);--px-box-shadow-hover:4px 4px 0 0 var(--px-shadow-color);--px-box-shadow-active:1px 1px 0 0 var(--px-shadow-color);--px-box-shadow-inset-light:inset 1px 1px 0 0 #ffffff80;--px-box-shadow-inset-dark:inset -1px -1px 0 0 #0000001a;--px-transition-duration:0s;--px-transition-duration-fast:0s;--px-transition-function:step-end;--px-component-size-large:44px;--px-component-size:36px;--px-component-size-small:28px;--px-hover-text-color:var(--px-color-white);--px-hover-bg-color:var(--px-color-black);--px-hover-border-color:var(--px-color-black);--px-active-text-color:var(--px-color-white);--px-active-bg-color:var(--px-border-color-dark);--px-active-border-color:var(--px-border-color-dark);--px-disabled-bg-color:var(--px-fill-color-light);--px-disabled-text-color:var(--px-text-color-placeholder);--px-disabled-border-color:var(--px-border-color-lighter)}.px-dark,.dark{--px-color-black:#11111b;--px-color-pure-black:#000;--px-bg-color:#1e1e2e;--px-bg-color-page:#181825;--px-bg-color-overlay:#313244;--px-fill-color:#313244;--px-fill-color-light:#45475a;--px-fill-color-lighter:#585b70;--px-fill-color-extra-light:#6c7086;--px-fill-color-dark:#181825;--px-fill-color-darker:#11111b;--px-fill-color-blank:#1e1e2e;--px-text-color-primary:#cdd6f4;--px-text-color-regular:#bac2de;--px-text-color-secondary:#a6adc8;--px-text-color-placeholder:#7f849c;--px-text-color-disabled:#585b70;--px-border-color:#cdd6f4;--px-border-color-light:#a6adc8;--px-border-color-lighter:#7f849c;--px-border-color-extra-light:#585b70;--px-border-color-dark:#f5e0dc;--px-border-color-darker:#fff;--px-shadow-color:#585b70;--px-shadow-color-dark:#45475a;--px-hover-text-color:var(--px-color-black);--px-hover-bg-color:var(--px-text-color-primary);--px-hover-border-color:var(--px-text-color-primary);--px-active-text-color:var(--px-color-black);--px-active-bg-color:var(--px-border-color-light);--px-active-border-color:var(--px-border-color-light);--px-disabled-bg-color:var(--px-fill-color-light);--px-disabled-text-color:var(--px-text-color-placeholder);--px-disabled-border-color:var(--px-border-color-lighter);--px-color-primary-light-3:#5c6bc0;--px-color-primary-light-5:#4a5699;--px-color-primary-light-7:#3a4573;--px-color-primary-light-8:#2e365c;--px-color-primary-light-9:#232845;--px-color-success-light-3:#2d7a53;--px-color-success-light-5:#245f42;--px-color-success-light-7:#1b4531;--px-color-success-light-8:#153827;--px-color-success-light-9:#0f2b1e;--px-color-warning-light-3:#c8906d;--px-color-warning-light-5:#9a6f54;--px-color-warning-light-7:#6c4e3b;--px-color-warning-light-8:#563e2f;--px-color-warning-light-9:#3f2e23;--px-color-danger-light-3:#c26e87;--px-color-danger-light-5:#965567;--px-color-danger-light-7:#6a3c49;--px-color-danger-light-8:#54303a;--px-color-danger-light-9:#3e242c;--px-color-info-light-3:#6e90c8;--px-color-info-light-5:#546f99;--px-color-info-light-7:#3b4e6c;--px-color-info-light-8:#2f3e56;--px-color-info-light-9:#232e40}*{box-sizing:border-box;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges}html{font-family:var(--px-font-family);font-size:var(--px-font-size-base);color:var(--px-text-color-primary);background-color:var(--px-bg-color-page);-webkit-font-smoothing:none;-moz-osx-font-smoothing:unset}body{margin:0;padding:0}[class^=px-],[class*=\ px-]{font-family:var(--px-font-family);-webkit-font-smoothing:none;-moz-osx-font-smoothing:unset}

package/dist/types/components/Badge/types.d.ts

@@ -8,4 +8,6 @@ export interface BadgeProps {
     color?: string;
     round?: boolean;
     icon?: string;
+    shine?: boolean;
+    pixel?: boolean;
 }

package/dist/types/components/Carousel/constants.d.ts

@@ -0,0 +1,6 @@
+import { ColorTemplate } from '@sakana-element/utils';
+import { InjectionKey } from 'vue';
+import { CarouselContext } from './types';
+export declare const CAROUSEL_CTX_KEY: InjectionKey<CarouselContext>;
+export declare const PRESET_CAROUSEL_COLORS: Set<string>;
+export declare const CAROUSEL_COLOR_TEMPLATES: Record<string, ColorTemplate>;

package/dist/types/components/Carousel/index.d.ts

@@ -0,0 +1,77 @@
+export declare const PxCarousel: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('packages/core').CarouselProps> & Readonly<{
+        onChange?: ((current: number, prev: number) => any) | undefined;
+        "onUpdate:modelValue"?: ((index: number) => any) | undefined;
+    }>, {
+        next: () => void;
+        prev: () => void;
+        goTo: (index: number) => void;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+        change: (current: number, prev: number) => any;
+        "update:modelValue": (index: number) => any;
+    }, import('vue').PublicProps, {
+        direction: "horizontal" | "vertical";
+        showArrow: "always" | "hover" | "never";
+        showIndicators: boolean;
+        indicatorTrigger: "click" | "hover";
+    }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLDivElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('packages/core').CarouselProps> & Readonly<{
+        onChange?: ((current: number, prev: number) => any) | undefined;
+        "onUpdate:modelValue"?: ((index: number) => any) | undefined;
+    }>, {
+        next: () => void;
+        prev: () => void;
+        goTo: (index: number) => void;
+    }, {}, {}, {}, {
+        direction: "horizontal" | "vertical";
+        showArrow: "always" | "hover" | "never";
+        showIndicators: boolean;
+        indicatorTrigger: "click" | "hover";
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<import('packages/core').CarouselProps> & Readonly<{
+    onChange?: ((current: number, prev: number) => any) | undefined;
+    "onUpdate:modelValue"?: ((index: number) => any) | undefined;
+}>, {
+    next: () => void;
+    prev: () => void;
+    goTo: (index: number) => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    change: (current: number, prev: number) => any;
+    "update:modelValue": (index: number) => any;
+}, string, {
+    direction: "horizontal" | "vertical";
+    showArrow: "always" | "hover" | "never";
+    showIndicators: boolean;
+    indicatorTrigger: "click" | "hover";
+}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+    $slots: {
+        default?(_: {}): any;
+    };
+}) & import('vue').Plugin;
+export declare const PxCarouselItem: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLDivElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, {}>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+    $slots: {
+        default?(_: {}): any;
+    };
+}) & import('vue').Plugin;
+export * from './types';

package/dist/types/components/Carousel/types.d.ts

@@ -0,0 +1,27 @@
+import { ComputedRef, Ref } from 'vue';
+export interface CarouselProps {
+    modelValue?: number;
+    direction?: 'horizontal' | 'vertical';
+    showArrow?: 'always' | 'hover' | 'never';
+    showIndicators?: boolean;
+    indicatorTrigger?: 'click' | 'hover';
+    color?: string;
+    height?: string;
+}
+export interface CarouselEmits {
+    (e: 'update:modelValue', index: number): void;
+    (e: 'change', current: number, prev: number): void;
+}
+export interface CarouselContext {
+    currentIndex: Ref<number>;
+    direction: Readonly<Ref<'horizontal' | 'vertical'>>;
+    registerItem: (uid: symbol) => void;
+    unregisterItem: (uid: symbol) => void;
+    totalItems: ComputedRef<number>;
+    items: Ref<symbol[]>;
+}
+export interface CarouselInstance {
+    next: () => void;
+    prev: () => void;
+    goTo: (index: number) => void;
+}

package/dist/types/components/Collapsible/constants.d.ts

@@ -0,0 +1,6 @@
+import { ColorTemplate } from '@sakana-element/utils';
+import { InjectionKey } from 'vue';
+import { CollapsibleContext } from './types';
+export declare const COLLAPSIBLE_CTX_KEY: InjectionKey<CollapsibleContext>;
+export declare const PRESET_COLLAPSIBLE_COLORS: Set<string>;
+export declare const COLLAPSIBLE_COLOR_TEMPLATES: Record<string, ColorTemplate>;

package/dist/types/components/Collapsible/index.d.ts

@@ -0,0 +1,85 @@
+export declare const PxCollapsible: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('packages/core').CollapsibleProps> & Readonly<{
+        onChange?: ((value: boolean) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    }>, {
+        open: import('vue').Ref<boolean>;
+        toggle: () => void;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+        change: (value: boolean) => any;
+        "update:modelValue": (value: boolean) => any;
+    }, import('vue').PublicProps, {
+        disabled: boolean;
+        defaultOpen: boolean;
+    }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLDivElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('packages/core').CollapsibleProps> & Readonly<{
+        onChange?: ((value: boolean) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    }>, {
+        open: import('vue').Ref<boolean>;
+        toggle: () => void;
+    }, {}, {}, {}, {
+        disabled: boolean;
+        defaultOpen: boolean;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<import('packages/core').CollapsibleProps> & Readonly<{
+    onChange?: ((value: boolean) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    open: import('vue').Ref<boolean>;
+    toggle: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    change: (value: boolean) => any;
+    "update:modelValue": (value: boolean) => any;
+}, string, {
+    disabled: boolean;
+    defaultOpen: boolean;
+}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+    $slots: {
+        default?(_: {}): any;
+    };
+}) & import('vue').Plugin;
+export declare const PxCollapsibleTrigger: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLDivElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, {}>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+    $slots: {
+        default?(_: {}): any;
+    };
+}) & import('vue').Plugin;
+export declare const PxCollapsibleContent: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, {}>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+    $slots: {
+        default?(_: {}): any;
+    };
+}) & import('vue').Plugin;
+export * from './types';

package/dist/types/components/Collapsible/types.d.ts

@@ -0,0 +1,22 @@
+import { ComputedRef, Ref } from 'vue';
+export interface CollapsibleProps {
+    modelValue?: boolean;
+    defaultOpen?: boolean;
+    disabled?: boolean;
+    color?: string;
+    ghost?: boolean;
+}
+export interface CollapsibleEmits {
+    (e: 'update:modelValue', value: boolean): void;
+    (e: 'change', value: boolean): void;
+}
+export interface CollapsibleContext {
+    open: Ref<boolean>;
+    toggle: () => void;
+    disabled: ComputedRef<boolean>;
+    id: string;
+}
+export interface CollapsibleInstance {
+    open: Ref<boolean>;
+    toggle: () => void;
+}

package/dist/types/components/Command/constants.d.ts

@@ -0,0 +1,4 @@
+import { InjectionKey } from 'vue';
+import { CommandContext } from './types';
+export declare const COMMAND_CTX_KEY: InjectionKey<CommandContext>;
+export declare const COMMAND_GROUP_KEY: InjectionKey<string>;