sakana-element 2.1.2 → 2.1.3

package/dist/theme/Button.css

@@ -1,9 +1,9 @@
 /* Button Group Variables */
-.px-button-group[data-v-7044e22a] {
+.px-button-group[data-v-6be339e2] {
   --px-button-group-border-color: var(--px-border-color-lighter);
 }
 /* Button Base Variables */
-.px-button[data-v-7044e22a] {
+.px-button[data-v-6be339e2] {
   --px-button-font-weight: var(--px-font-weight-primary);
   --px-button-border-color: var(--px-border-color);
   --px-button-bg-color: var(--px-fill-color-blank);
@@ -21,7 +21,7 @@
   --px-button-shadow-color: var(--px-shadow-color);
 }
 /* Base Button Styles - Pixel Game Aesthetic */
-.px-button[data-v-7044e22a] {
+.px-button[data-v-6be339e2] {
   display: inline-flex;
   justify-content: center;
   align-items: center;
@@ -53,7 +53,7 @@
   transition: none;
 }
 /* Border layer — filled with border color, clipped to pixel shape */
-.px-button[data-v-7044e22a]::before {
+.px-button[data-v-6be339e2]::before {
     content: '';
     position: absolute;
     inset: 0;
@@ -67,7 +67,7 @@
     z-index: -1;
 }
 /* Fill layer — inset by border width, filled with bg color */
-.px-button[data-v-7044e22a]::after {
+.px-button[data-v-6be339e2]::after {
     content: '';
     position: absolute;
     inset: 2px;
@@ -80,110 +80,110 @@
     );
     z-index: -1;
 }
-.px-button + .px-button[data-v-7044e22a] {
+.px-button + .px-button[data-v-6be339e2] {
     margin-left: 12px;
 }
 /* Hover - Lift effect */
-.px-button[data-v-7044e22a]:hover:not(.is-disabled):not(.is-loading) {
+.px-button[data-v-6be339e2]:hover:not(.is-disabled):not(.is-loading) {
     color: var(--px-button-hover-text-color);
     transform: translate(-1px, -1px);
     filter: drop-shadow(4px 4px 0px var(--px-button-shadow-color));
 }
-.px-button[data-v-7044e22a]:hover:not(.is-disabled):not(.is-loading)::before {
+.px-button[data-v-6be339e2]:hover:not(.is-disabled):not(.is-loading)::before {
       background: var(--px-button-hover-border-color);
 }
-.px-button[data-v-7044e22a]:hover:not(.is-disabled):not(.is-loading)::after {
+.px-button[data-v-6be339e2]:hover:not(.is-disabled):not(.is-loading)::after {
       background: var(--px-button-hover-bg-color);
 }
 /* Active - Press down effect */
-.px-button[data-v-7044e22a]:active:not(.is-disabled):not(.is-loading) {
+.px-button[data-v-6be339e2]:active:not(.is-disabled):not(.is-loading) {
     color: var(--px-button-active-text-color);
     transform: translate(1px, 1px);
     filter: drop-shadow(1px 1px 0px var(--px-button-shadow-color));
 }
-.px-button[data-v-7044e22a]:active:not(.is-disabled):not(.is-loading)::before {
+.px-button[data-v-6be339e2]:active:not(.is-disabled):not(.is-loading)::before {
       background: var(--px-button-active-border-color);
 }
-.px-button[data-v-7044e22a]:active:not(.is-disabled):not(.is-loading)::after {
+.px-button[data-v-6be339e2]:active:not(.is-disabled):not(.is-loading)::after {
       background: var(--px-button-active-bg-color);
 }
 /* Focus outline */
-.px-button[data-v-7044e22a]:focus-visible {
+.px-button[data-v-6be339e2]:focus-visible {
     outline: 2px dashed var(--px-color-primary);
     outline-offset: 2px;
 }
 /* Plain variant */
-.px-button.is-plain[data-v-7044e22a] {
+.px-button.is-plain[data-v-6be339e2] {
     --px-button-bg-color: var(--px-fill-color-blank);
     --px-button-hover-bg-color: var(--px-fill-color-light);
     --px-button-hover-border-color: var(--px-color-primary);
 }
 /* Dash variant - Dashed border on the button itself, no pixel shadow */
-.px-button.is-dash[data-v-7044e22a] {
+.px-button.is-dash[data-v-6be339e2] {
     border: 2px dashed var(--px-button-border-color);
     filter: none;
 }
-.px-button.is-dash[data-v-7044e22a]::before {
+.px-button.is-dash[data-v-6be339e2]::before {
       display: none;
 }
-.px-button.is-dash[data-v-7044e22a]::after {
+.px-button.is-dash[data-v-6be339e2]::after {
       clip-path: none;
       inset: 0;
       background: var(--px-button-bg-color);
 }
-.px-button.is-dash[data-v-7044e22a]:hover:not(.is-disabled):not(.is-loading) {
+.px-button.is-dash[data-v-6be339e2]:hover:not(.is-disabled):not(.is-loading) {
       transform: none;
       filter: none;
       border-color: var(--px-button-hover-border-color);
 }
-.px-button.is-dash[data-v-7044e22a]:hover:not(.is-disabled):not(.is-loading)::after {
+.px-button.is-dash[data-v-6be339e2]:hover:not(.is-disabled):not(.is-loading)::after {
         background: var(--px-button-hover-bg-color);
 }
-.px-button.is-dash[data-v-7044e22a]:active:not(.is-disabled):not(.is-loading) {
+.px-button.is-dash[data-v-6be339e2]:active:not(.is-disabled):not(.is-loading) {
       transform: none;
       filter: none;
       border-color: var(--px-button-active-border-color);
 }
-.px-button.is-dash[data-v-7044e22a]:active:not(.is-disabled):not(.is-loading)::after {
+.px-button.is-dash[data-v-6be339e2]:active:not(.is-disabled):not(.is-loading)::after {
         background: var(--px-button-active-bg-color);
 }
 /* Ghost variant - No border/background, subtle hover fill */
-.px-button.is-ghost[data-v-7044e22a] {
+.px-button.is-ghost[data-v-6be339e2] {
     filter: none;
     --px-button-shadow-color: transparent;
 }
-.px-button.is-ghost[data-v-7044e22a]::before {
+.px-button.is-ghost[data-v-6be339e2]::before {
       display: none;
 }
-.px-button.is-ghost[data-v-7044e22a]::after {
+.px-button.is-ghost[data-v-6be339e2]::after {
       clip-path: none;
       inset: 0;
       background: transparent;
 }
-.px-button.is-ghost[data-v-7044e22a]:hover:not(.is-disabled):not(.is-loading) {
+.px-button.is-ghost[data-v-6be339e2]:hover:not(.is-disabled):not(.is-loading) {
       transform: none;
       filter: none;
       color: var(--px-button-hover-text-color);
 }
-.px-button.is-ghost[data-v-7044e22a]:hover:not(.is-disabled):not(.is-loading)::after {
+.px-button.is-ghost[data-v-6be339e2]:hover:not(.is-disabled):not(.is-loading)::after {
         background: var(--px-button-hover-bg-color, var(--px-fill-color-light));
 }
-.px-button.is-ghost[data-v-7044e22a]:active:not(.is-disabled):not(.is-loading) {
+.px-button.is-ghost[data-v-6be339e2]:active:not(.is-disabled):not(.is-loading) {
       transform: none;
       filter: none;
       color: var(--px-button-active-text-color);
 }
-.px-button.is-ghost[data-v-7044e22a]:active:not(.is-disabled):not(.is-loading)::after {
+.px-button.is-ghost[data-v-6be339e2]:active:not(.is-disabled):not(.is-loading)::after {
         background: var(--px-button-active-bg-color, var(--px-fill-color));
 }
-.px-button.is-ghost.is-loading[data-v-7044e22a]::after, .px-button.is-ghost.is-disabled[data-v-7044e22a]::after, .px-button.is-ghost.is-disabled[data-v-7044e22a]:hover::after, .px-button.is-ghost.is-disabled[data-v-7044e22a]:focus::after, .px-button.is-ghost[disabled][data-v-7044e22a]::after, .px-button.is-ghost[disabled][data-v-7044e22a]:hover::after, .px-button.is-ghost[disabled][data-v-7044e22a]:focus::after {
+.px-button.is-ghost.is-loading[data-v-6be339e2]::after, .px-button.is-ghost.is-disabled[data-v-6be339e2]::after, .px-button.is-ghost.is-disabled[data-v-6be339e2]:hover::after, .px-button.is-ghost.is-disabled[data-v-6be339e2]:focus::after, .px-button.is-ghost[disabled][data-v-6be339e2]::after, .px-button.is-ghost[disabled][data-v-6be339e2]:hover::after, .px-button.is-ghost[disabled][data-v-6be339e2]:focus::after {
         background: transparent;
 }
 /* Round - Pixel-style rounded with 3-step staircase corners */
-.px-button.is-round[data-v-7044e22a] {
+.px-button.is-round[data-v-6be339e2] {
     padding: 8px 20px;
 }
-.px-button.is-round[data-v-7044e22a]::before, .px-button.is-round[data-v-7044e22a]::after {
+.px-button.is-round[data-v-6be339e2]::before, .px-button.is-round[data-v-6be339e2]::after {
       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,
@@ -192,12 +192,12 @@
       );
 }
 /* Circle - Pixel circle approximation with 4-step staircase */
-.px-button.is-circle[data-v-7044e22a] {
+.px-button.is-circle[data-v-6be339e2] {
     padding: 8px;
     width: 36px;
     height: 36px;
 }
-.px-button.is-circle[data-v-7044e22a]::before, .px-button.is-circle[data-v-7044e22a]::after {
+.px-button.is-circle[data-v-6be339e2]::before, .px-button.is-circle[data-v-6be339e2]::after {
       clip-path: polygon(
         0 10px, 2px 10px, 2px 6px, 4px 6px, 4px 4px, 6px 4px, 6px 2px, 10px 2px, 10px 0,
         calc(100% - 10px) 0, calc(100% - 10px) 2px, calc(100% - 6px) 2px, calc(100% - 6px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 6px, calc(100% - 2px) 6px, calc(100% - 2px) 10px, 100% 10px,
@@ -206,32 +206,32 @@
       );
 }
 /* Disabled state */
-.px-button.is-loading[data-v-7044e22a],
-  .px-button.is-disabled[data-v-7044e22a],
-  .px-button.is-disabled[data-v-7044e22a]:hover,
-  .px-button.is-disabled[data-v-7044e22a]:focus,
-  .px-button[disabled][data-v-7044e22a],
-  .px-button[disabled][data-v-7044e22a]:hover,
-  .px-button[disabled][data-v-7044e22a]:focus {
+.px-button.is-loading[data-v-6be339e2],
+  .px-button.is-disabled[data-v-6be339e2],
+  .px-button.is-disabled[data-v-6be339e2]:hover,
+  .px-button.is-disabled[data-v-6be339e2]:focus,
+  .px-button[disabled][data-v-6be339e2],
+  .px-button[disabled][data-v-6be339e2]:hover,
+  .px-button[disabled][data-v-6be339e2]:focus {
     color: var(--px-button-disabled-text-color);
     cursor: not-allowed;
     filter: drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.1));
     transform: none;
     opacity: 0.6;
 }
-.px-button.is-loading[data-v-7044e22a]::before, .px-button.is-disabled[data-v-7044e22a]::before, .px-button.is-disabled[data-v-7044e22a]:hover::before, .px-button.is-disabled[data-v-7044e22a]:focus::before, .px-button[disabled][data-v-7044e22a]::before, .px-button[disabled][data-v-7044e22a]:hover::before, .px-button[disabled][data-v-7044e22a]:focus::before {
+.px-button.is-loading[data-v-6be339e2]::before, .px-button.is-disabled[data-v-6be339e2]::before, .px-button.is-disabled[data-v-6be339e2]:hover::before, .px-button.is-disabled[data-v-6be339e2]:focus::before, .px-button[disabled][data-v-6be339e2]::before, .px-button[disabled][data-v-6be339e2]:hover::before, .px-button[disabled][data-v-6be339e2]:focus::before {
       background: var(--px-button-disabled-border-color);
 }
-.px-button.is-loading[data-v-7044e22a]::after, .px-button.is-disabled[data-v-7044e22a]::after, .px-button.is-disabled[data-v-7044e22a]:hover::after, .px-button.is-disabled[data-v-7044e22a]:focus::after, .px-button[disabled][data-v-7044e22a]::after, .px-button[disabled][data-v-7044e22a]:hover::after, .px-button[disabled][data-v-7044e22a]:focus::after {
+.px-button.is-loading[data-v-6be339e2]::after, .px-button.is-disabled[data-v-6be339e2]::after, .px-button.is-disabled[data-v-6be339e2]:hover::after, .px-button.is-disabled[data-v-6be339e2]:focus::after, .px-button[disabled][data-v-6be339e2]::after, .px-button[disabled][data-v-6be339e2]:hover::after, .px-button[disabled][data-v-6be339e2]:focus::after {
       background: var(--px-button-disabled-bg-color);
 }
 /* Icon sizing */
-.px-button [class*='px-icon'][data-v-7044e22a] {
+.px-button [class*='px-icon'][data-v-6be339e2] {
     width: 1em;
     height: 1em;
 }
 /* Type variants - Colored buttons */
-.px-button--primary[data-v-7044e22a] {
+.px-button--primary[data-v-6be339e2] {
     --px-button-text-color: var(--px-color-white);
     --px-button-bg-color: var(--px-color-primary);
     --px-button-border-color: var(--px-color-primary-dark);
@@ -247,7 +247,7 @@
     --px-button-disabled-border-color: var(--px-color-primary-light-5);
 }
 /* Dash variant for type buttons */
-.px-button--primary.is-dash[data-v-7044e22a] {
+.px-button--primary.is-dash[data-v-6be339e2] {
     --px-button-text-color: var(--px-color-primary);
     --px-button-bg-color: var(--px-color-primary-light-9);
     --px-button-border-color: var(--px-color-primary);
@@ -263,7 +263,7 @@
     --px-button-disabled-border-color: var(--px-color-primary-light-5);
 }
 /* Ghost variant for type buttons */
-.px-button--primary.is-ghost[data-v-7044e22a] {
+.px-button--primary.is-ghost[data-v-6be339e2] {
     --px-button-text-color: var(--px-color-primary);
     --px-button-shadow-color: transparent;
     --px-button-hover-text-color: var(--px-color-primary-dark);
@@ -274,7 +274,7 @@
     --px-button-disabled-bg-color: transparent;
 }
 /* Plain variant for type buttons */
-.px-button--primary.is-plain[data-v-7044e22a] {
+.px-button--primary.is-plain[data-v-6be339e2] {
     --px-button-text-color: var(--px-color-primary);
     --px-button-bg-color: var(--px-color-primary-light-9);
     --px-button-border-color: var(--px-color-primary);
@@ -288,10 +288,10 @@
     --px-button-disabled-bg-color: var(--px-color-primary-light-9);
     --px-button-disabled-border-color: var(--px-color-primary-light-7);
 }
-.px-button--primary.is-plain[data-v-7044e22a]:hover:not(.is-disabled):not(.is-loading) {
+.px-button--primary.is-plain[data-v-6be339e2]:hover:not(.is-disabled):not(.is-loading) {
       --px-button-shadow-color: var(--px-color-primary-dark);
 }
-.px-button--success[data-v-7044e22a] {
+.px-button--success[data-v-6be339e2] {
     --px-button-text-color: var(--px-color-white);
     --px-button-bg-color: var(--px-color-success);
     --px-button-border-color: var(--px-color-success-dark);
@@ -307,7 +307,7 @@
     --px-button-disabled-border-color: var(--px-color-success-light-5);
 }
 /* Dash variant for type buttons */
-.px-button--success.is-dash[data-v-7044e22a] {
+.px-button--success.is-dash[data-v-6be339e2] {
     --px-button-text-color: var(--px-color-success);
     --px-button-bg-color: var(--px-color-success-light-9);
     --px-button-border-color: var(--px-color-success);
@@ -323,7 +323,7 @@
     --px-button-disabled-border-color: var(--px-color-success-light-5);
 }
 /* Ghost variant for type buttons */
-.px-button--success.is-ghost[data-v-7044e22a] {
+.px-button--success.is-ghost[data-v-6be339e2] {
     --px-button-text-color: var(--px-color-success);
     --px-button-shadow-color: transparent;
     --px-button-hover-text-color: var(--px-color-success-dark);
@@ -334,7 +334,7 @@
     --px-button-disabled-bg-color: transparent;
 }
 /* Plain variant for type buttons */
-.px-button--success.is-plain[data-v-7044e22a] {
+.px-button--success.is-plain[data-v-6be339e2] {
     --px-button-text-color: var(--px-color-success);
     --px-button-bg-color: var(--px-color-success-light-9);
     --px-button-border-color: var(--px-color-success);
@@ -348,10 +348,10 @@
     --px-button-disabled-bg-color: var(--px-color-success-light-9);
     --px-button-disabled-border-color: var(--px-color-success-light-7);
 }
-.px-button--success.is-plain[data-v-7044e22a]:hover:not(.is-disabled):not(.is-loading) {
+.px-button--success.is-plain[data-v-6be339e2]:hover:not(.is-disabled):not(.is-loading) {
       --px-button-shadow-color: var(--px-color-success-dark);
 }
-.px-button--warning[data-v-7044e22a] {
+.px-button--warning[data-v-6be339e2] {
     --px-button-text-color: var(--px-color-white);
     --px-button-bg-color: var(--px-color-warning);
     --px-button-border-color: var(--px-color-warning-dark);
@@ -367,7 +367,7 @@
     --px-button-disabled-border-color: var(--px-color-warning-light-5);
 }
 /* Dash variant for type buttons */
-.px-button--warning.is-dash[data-v-7044e22a] {
+.px-button--warning.is-dash[data-v-6be339e2] {
     --px-button-text-color: var(--px-color-warning);
     --px-button-bg-color: var(--px-color-warning-light-9);
     --px-button-border-color: var(--px-color-warning);
@@ -383,7 +383,7 @@
     --px-button-disabled-border-color: var(--px-color-warning-light-5);
 }
 /* Ghost variant for type buttons */
-.px-button--warning.is-ghost[data-v-7044e22a] {
+.px-button--warning.is-ghost[data-v-6be339e2] {
     --px-button-text-color: var(--px-color-warning);
     --px-button-shadow-color: transparent;
     --px-button-hover-text-color: var(--px-color-warning-dark);
@@ -394,7 +394,7 @@
     --px-button-disabled-bg-color: transparent;
 }
 /* Plain variant for type buttons */
-.px-button--warning.is-plain[data-v-7044e22a] {
+.px-button--warning.is-plain[data-v-6be339e2] {
     --px-button-text-color: var(--px-color-warning);
     --px-button-bg-color: var(--px-color-warning-light-9);
     --px-button-border-color: var(--px-color-warning);
@@ -408,10 +408,10 @@
     --px-button-disabled-bg-color: var(--px-color-warning-light-9);
     --px-button-disabled-border-color: var(--px-color-warning-light-7);
 }
-.px-button--warning.is-plain[data-v-7044e22a]:hover:not(.is-disabled):not(.is-loading) {
+.px-button--warning.is-plain[data-v-6be339e2]:hover:not(.is-disabled):not(.is-loading) {
       --px-button-shadow-color: var(--px-color-warning-dark);
 }
-.px-button--info[data-v-7044e22a] {
+.px-button--info[data-v-6be339e2] {
     --px-button-text-color: var(--px-color-white);
     --px-button-bg-color: var(--px-color-info);
     --px-button-border-color: var(--px-color-info-dark);
@@ -427,7 +427,7 @@
     --px-button-disabled-border-color: var(--px-color-info-light-5);
 }
 /* Dash variant for type buttons */
-.px-button--info.is-dash[data-v-7044e22a] {
+.px-button--info.is-dash[data-v-6be339e2] {
     --px-button-text-color: var(--px-color-info);
     --px-button-bg-color: var(--px-color-info-light-9);
     --px-button-border-color: var(--px-color-info);
@@ -443,7 +443,7 @@
     --px-button-disabled-border-color: var(--px-color-info-light-5);
 }
 /* Ghost variant for type buttons */
-.px-button--info.is-ghost[data-v-7044e22a] {
+.px-button--info.is-ghost[data-v-6be339e2] {
     --px-button-text-color: var(--px-color-info);
     --px-button-shadow-color: transparent;
     --px-button-hover-text-color: var(--px-color-info-dark);
@@ -454,7 +454,7 @@
     --px-button-disabled-bg-color: transparent;
 }
 /* Plain variant for type buttons */
-.px-button--info.is-plain[data-v-7044e22a] {
+.px-button--info.is-plain[data-v-6be339e2] {
     --px-button-text-color: var(--px-color-info);
     --px-button-bg-color: var(--px-color-info-light-9);
     --px-button-border-color: var(--px-color-info);
@@ -468,10 +468,10 @@
     --px-button-disabled-bg-color: var(--px-color-info-light-9);
     --px-button-disabled-border-color: var(--px-color-info-light-7);
 }
-.px-button--info.is-plain[data-v-7044e22a]:hover:not(.is-disabled):not(.is-loading) {
+.px-button--info.is-plain[data-v-6be339e2]:hover:not(.is-disabled):not(.is-loading) {
       --px-button-shadow-color: var(--px-color-info-dark);
 }
-.px-button--danger[data-v-7044e22a] {
+.px-button--danger[data-v-6be339e2] {
     --px-button-text-color: var(--px-color-white);
     --px-button-bg-color: var(--px-color-danger);
     --px-button-border-color: var(--px-color-danger-dark);
@@ -487,7 +487,7 @@
     --px-button-disabled-border-color: var(--px-color-danger-light-5);
 }
 /* Dash variant for type buttons */
-.px-button--danger.is-dash[data-v-7044e22a] {
+.px-button--danger.is-dash[data-v-6be339e2] {
     --px-button-text-color: var(--px-color-danger);
     --px-button-bg-color: var(--px-color-danger-light-9);
     --px-button-border-color: var(--px-color-danger);
@@ -503,7 +503,7 @@
     --px-button-disabled-border-color: var(--px-color-danger-light-5);
 }
 /* Ghost variant for type buttons */
-.px-button--danger.is-ghost[data-v-7044e22a] {
+.px-button--danger.is-ghost[data-v-6be339e2] {
     --px-button-text-color: var(--px-color-danger);
     --px-button-shadow-color: transparent;
     --px-button-hover-text-color: var(--px-color-danger-dark);
@@ -514,7 +514,7 @@
     --px-button-disabled-bg-color: transparent;
 }
 /* Plain variant for type buttons */
-.px-button--danger.is-plain[data-v-7044e22a] {
+.px-button--danger.is-plain[data-v-6be339e2] {
     --px-button-text-color: var(--px-color-danger);
     --px-button-bg-color: var(--px-color-danger-light-9);
     --px-button-border-color: var(--px-color-danger);
@@ -528,69 +528,69 @@
     --px-button-disabled-bg-color: var(--px-color-danger-light-9);
     --px-button-disabled-border-color: var(--px-color-danger-light-7);
 }
-.px-button--danger.is-plain[data-v-7044e22a]:hover:not(.is-disabled):not(.is-loading) {
+.px-button--danger.is-plain[data-v-6be339e2]:hover:not(.is-disabled):not(.is-loading) {
       --px-button-shadow-color: var(--px-color-danger-dark);
 }
 /* Size variants */
-.px-button--large[data-v-7044e22a] {
+.px-button--large[data-v-6be339e2] {
   --px-button-size: 44px;
   height: var(--px-button-size);
   padding: 12px 24px;
   font-size: var(--px-font-size-large);
 }
-.px-button--large.is-circle[data-v-7044e22a] {
+.px-button--large.is-circle[data-v-6be339e2] {
     padding: 12px;
     width: 44px;
 }
-.px-button--small[data-v-7044e22a] {
+.px-button--small[data-v-6be339e2] {
   --px-button-size: 28px;
   height: var(--px-button-size);
   padding: 4px 12px;
   font-size: var(--px-font-size-small);
   filter: drop-shadow(2px 2px 0px var(--px-button-shadow-color));
 }
-.px-button--small[data-v-7044e22a]:hover:not(.is-disabled):not(.is-loading) {
+.px-button--small[data-v-6be339e2]:hover:not(.is-disabled):not(.is-loading) {
     transform: translate(-1px, -1px);
     filter: drop-shadow(3px 3px 0px var(--px-button-shadow-color));
 }
-.px-button--small[data-v-7044e22a]:active:not(.is-disabled):not(.is-loading) {
+.px-button--small[data-v-6be339e2]:active:not(.is-disabled):not(.is-loading) {
     transform: translate(1px, 1px);
     filter: drop-shadow(1px 1px 0px var(--px-button-shadow-color));
 }
-.px-button--small.is-circle[data-v-7044e22a] {
+.px-button--small.is-circle[data-v-6be339e2] {
     padding: 4px;
     width: 28px;
 }
-.px-button--small [class*='px-icon'][data-v-7044e22a] {
+.px-button--small [class*='px-icon'][data-v-6be339e2] {
     width: 12px;
     height: 12px;
 }
 /* Button Group */
-.px-button-group[data-v-7044e22a] {
+.px-button-group[data-v-6be339e2] {
   display: inline-flex;
   vertical-align: middle;
   /* Unified shadow for the whole group — traces all buttons' pixel shapes */
   filter: drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-shadow-color));
 }
 /* Buttons keep their pseudo-element borders, group provides unified shadow */
-.px-button-group[data-v-7044e22a] >  .px-button {
+.px-button-group[data-v-6be339e2] >  .px-button {
     filter: none;
     margin-left: 0;
 }
-.px-button-group[data-v-7044e22a] >  .px-button:not(:first-child) {
+.px-button-group[data-v-6be339e2] >  .px-button:not(:first-child) {
       margin-left: -2px;
 }
-.px-button-group[data-v-7044e22a] >  .px-button:hover:not(.is-disabled):not(.is-loading) {
+.px-button-group[data-v-6be339e2] >  .px-button:hover:not(.is-disabled):not(.is-loading) {
       transform: none;
       filter: none;
       z-index: 1;
 }
-.px-button-group[data-v-7044e22a] >  .px-button:active:not(.is-disabled):not(.is-loading) {
+.px-button-group[data-v-6be339e2] >  .px-button:active:not(.is-disabled):not(.is-loading) {
       transform: none;
       filter: none;
 }
 /* First button (multi): notched left, straight right */
-.px-button-group[data-v-7044e22a] >  .px-button:first-child:not(:last-child)::before, .px-button-group[data-v-7044e22a] >  .px-button:first-child:not(:last-child)::after {
+.px-button-group[data-v-6be339e2] >  .px-button:first-child:not(:last-child)::before, .px-button-group[data-v-6be339e2] >  .px-button:first-child:not(:last-child)::after {
       clip-path: polygon(
         0 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0,
         100% 0,
@@ -599,7 +599,7 @@
       );
 }
 /* Last button (multi): straight left, notched right */
-.px-button-group[data-v-7044e22a] >  .px-button:last-child:not(:first-child)::before, .px-button-group[data-v-7044e22a] >  .px-button:last-child:not(:first-child)::after {
+.px-button-group[data-v-6be339e2] >  .px-button:last-child:not(:first-child)::before, .px-button-group[data-v-6be339e2] >  .px-button:last-child:not(:first-child)::after {
       clip-path: polygon(
         0 0,
         calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px,
@@ -608,7 +608,7 @@
       );
 }
 /* Middle buttons: straight rectangle, no notches */
-.px-button-group[data-v-7044e22a] >  .px-button:not(:first-child):not(:last-child)::before, .px-button-group[data-v-7044e22a] >  .px-button:not(:first-child):not(:last-child)::after {
+.px-button-group[data-v-6be339e2] >  .px-button:not(:first-child):not(:last-child)::before, .px-button-group[data-v-6be339e2] >  .px-button:not(:first-child):not(:last-child)::after {
       clip-path: none;
 }
 /* Button Group Variables */

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

@@ -7,6 +7,9 @@ export interface AlertProps {
     closable?: boolean;
     center?: boolean;
     showIcon?: boolean;
+    outline?: boolean;
+    dash?: boolean;
+    color?: string;
 }
 export type AlertEmits = (e: 'close') => void;
 export interface AlertInstance {

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

@@ -0,0 +1,27 @@
+export declare const PxBadge: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('packages/core').BadgeProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+        size: import('packages/core').BadgeSize;
+        type: import('packages/core').BadgeType;
+    }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLSpanElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('packages/core').BadgeProps> & Readonly<{}>, {}, {}, {}, {}, {
+        size: import('packages/core').BadgeSize;
+        type: import('packages/core').BadgeType;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<import('packages/core').BadgeProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+    size: import('packages/core').BadgeSize;
+    type: import('packages/core').BadgeType;
+}, {}, 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/Badge/types.d.ts

@@ -0,0 +1,10 @@
+export type BadgeType = 'primary' | 'success' | 'info' | 'warning' | 'danger';
+export type BadgeSize = 'large' | 'default' | 'small';
+export interface BadgeProps {
+    type?: BadgeType;
+    size?: BadgeSize;
+    outline?: boolean;
+    dash?: boolean;
+    color?: string;
+    round?: boolean;
+}

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

@@ -1,3 +1,5 @@
+import { ColorTemplate } from '@sakana-element/utils';
 import { InjectionKey } from 'vue';
 import { ButtonGroupContext } from './types';
 export declare const BUTTON_GROUP_CTX_KEY: InjectionKey<ButtonGroupContext>;
+export declare const BUTTON_COLOR_TEMPLATES: Record<string, ColorTemplate>;

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

@@ -1,4 +1,5 @@
 export * from './Alert';
+export * from './Badge';
 export * from './Button';
 export * from './Collapse';
 export * from './ConfigProvider';

package/dist/types/hooks/useSystemTheme.d.ts

@@ -21,5 +21,5 @@ export declare function useSystemTheme(): {
     /** Whether system prefers dark mode */
     prefersDark: Ref<boolean, boolean>;
     /** System color scheme preference */
-    prefers: Ref<"light" | "dark", "light" | "dark">;
+    prefers: Ref<"dark" | "light", "dark" | "light">;
 };

package/dist/types/utils/color.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Darken a hex color by a percentage (0-100)
+ */
+export declare function darken(hex: string, amount: number): string;
+/**
+ * Lighten a hex color by a percentage (0-100)
+ */
+export declare function lighten(hex: string, amount: number): string;
+/**
+ * Determine if text should be white or dark based on background luminance
+ */
+export declare function getTextColor(hex: string): string;
+/** Mapping from CSS variable suffix → palette key */
+export type ColorTemplate = Record<string, string>;
+/**
+ * Build a standard color palette from a hex color.
+ * Components can extend this with additional derived colors.
+ */
+export declare function createColorPalette(hex: string): Record<string, string>;
+/**
+ * Resolve a color template into CSS custom properties.
+ *
+ * @param palette  - Pre-computed color values (e.g. from createColorPalette)
+ * @param prefix   - CSS variable prefix (e.g. 'px-alert', 'px-badge')
+ * @param template - Maps CSS variable suffix → palette key
+ * @returns Record to bind via :style
+ */
+export declare function resolveColorVars(palette: Record<string, string>, prefix: string, template: ColorTemplate): Record<string, string>;
+/**
+ * Shared variant templates for simple components (Alert, Badge).
+ * Each key maps a CSS variable suffix to a palette color key.
+ */
+export declare const SIMPLE_COLOR_TEMPLATES: Record<string, ColorTemplate>;

package/dist/types/utils/index.d.ts

@@ -10,6 +10,7 @@ export declare const RenderVnode: import('vue').DefineComponent<import('vue').Ex
         required: true;
     };
 }>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export * from './color';
 export * from './error';
 export * from './icon-map';
 export * from './icon-registry';