sakana-element 2.1.2 → 2.1.4

package/dist/theme/Select.css

@@ -6,10 +6,12 @@
   --px-select-item-selected-font-color: var(--px-color-primary);
   --px-select-item-selected-bg-color: var(--px-color-primary-light-9);
   --px-select-item-disabled-font-color: var(--px-text-color-disabled);
-  --px-select-input-focus-border-color: var(--px-color-primary);
+  --px-select-input-focus-border-color: var(--px-hover-border-color);
   --px-select-border-color: var(--px-border-color);
   --px-select-shadow-color: var(--px-shadow-color);
-  --px-select-dropdown-bg-color: var(--px-fill-color-blank);
+  --px-select-dropdown-bg-color: var(--px-fill-color-blank);
+  --px-select-item-indicator-color: var(--px-color-primary);
+  --px-select-item-highlighted-border-color: var(--px-color-primary);
 }
 /* Base Select Styles - Pixel Dropdown */
 .px-select[data-v-c5f1823d] {
@@ -95,7 +97,7 @@
         background-color: var(--px-select-item-hover-bg-color);
 }
 .px-select .px-select__menu-item[data-v-c5f1823d]:hover::before {
-        border-color: var(--px-color-primary);
+        border-color: var(--px-hover-border-color);
 }
 /* Selected state with pixel indicator */
 .px-select .px-select__menu-item.is-selected[data-v-c5f1823d] {
@@ -106,15 +108,15 @@
         background-color: var(--px-select-item-selected-bg-color);
 }
 .px-select .px-select__menu-item.is-selected[data-v-c5f1823d]::before {
-        background: var(--px-color-primary);
-        border-color: var(--px-color-primary);
+        background: var(--px-select-item-indicator-color);
+        border-color: var(--px-select-item-indicator-color);
 }
 /* Highlighted (keyboard navigation) */
 .px-select .px-select__menu-item.is-highlighted[data-v-c5f1823d]::after {
         background-color: var(--px-select-item-hover-bg-color);
 }
 .px-select .px-select__menu-item.is-highlighted[data-v-c5f1823d]::before {
-        border-color: var(--px-color-primary);
+        border-color: var(--px-select-item-highlighted-border-color);
 }
 /* Disabled state */
 .px-select .px-select__menu-item.is-disabled[data-v-c5f1823d] {
@@ -162,45 +164,117 @@
 /* Input pointer cursor */
 .px-select[data-v-c5f1823d] .px-input__inner {
     cursor: pointer;
+}
+/* Disabled state */
+.px-select.is-disabled[data-v-c5f1823d] {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+/* Ghost style - transparent at rest, Input handles border/shadow via prop */
+.px-select.is-ghost[data-v-c5f1823d] .px-tooltip__popper::after {
+        background: var(--px-select-dropdown-bg-color);
+}
+/* Size: Large */
+.px-select.px-select--large[data-v-c5f1823d] {
+    line-height: 44px;
+}
+.px-select.px-select--large .px-select__menu-item[data-v-c5f1823d] {
+      height: 44px;
+      line-height: 44px;
+      font-size: var(--px-font-size-large);
+      padding: 0 20px 0 28px;
+}
+.px-select.px-select--large .px-select__menu-item[data-v-c5f1823d]::before {
+        left: 12px;
+        width: 8px;
+        height: 8px;
+}
+/* Size: Small */
+.px-select.px-select--small[data-v-c5f1823d] {
+    line-height: 28px;
+}
+.px-select.px-select--small .px-select__menu-item[data-v-c5f1823d] {
+      height: 28px;
+      line-height: 28px;
+      font-size: var(--px-font-size-small);
+      padding: 0 12px 0 20px;
+}
+.px-select.px-select--small .px-select__menu-item[data-v-c5f1823d]::before {
+        left: 8px;
+        width: 4px;
+        height: 4px;
+}
+/* Color variants */
+.px-select.px-select--primary[data-v-c5f1823d] {
+      --px-select-item-selected-font-color: var(--px-color-primary);
+      --px-select-item-selected-bg-color: var(--px-color-primary-light-9);
+      --px-select-item-indicator-color: var(--px-color-primary);
+      --px-select-item-highlighted-border-color: var(--px-color-primary);
+}
+.px-select.px-select--success[data-v-c5f1823d] {
+      --px-select-item-selected-font-color: var(--px-color-success);
+      --px-select-item-selected-bg-color: var(--px-color-success-light-9);
+      --px-select-item-indicator-color: var(--px-color-success);
+      --px-select-item-highlighted-border-color: var(--px-color-success);
+}
+.px-select.px-select--warning[data-v-c5f1823d] {
+      --px-select-item-selected-font-color: var(--px-color-warning);
+      --px-select-item-selected-bg-color: var(--px-color-warning-light-9);
+      --px-select-item-indicator-color: var(--px-color-warning);
+      --px-select-item-highlighted-border-color: var(--px-color-warning);
+}
+.px-select.px-select--info[data-v-c5f1823d] {
+      --px-select-item-selected-font-color: var(--px-color-info);
+      --px-select-item-selected-bg-color: var(--px-color-info-light-9);
+      --px-select-item-indicator-color: var(--px-color-info);
+      --px-select-item-highlighted-border-color: var(--px-color-info);
+}
+.px-select.px-select--danger[data-v-c5f1823d] {
+      --px-select-item-selected-font-color: var(--px-color-danger);
+      --px-select-item-selected-bg-color: var(--px-color-danger-light-9);
+      --px-select-item-indicator-color: var(--px-color-danger);
+      --px-select-item-highlighted-border-color: var(--px-color-danger);
 }
 /* Select Variables */
-.px-select[data-v-cf32c555] {
+.px-select[data-v-ec41a99d] {
   --px-select-item-hover-bg-color: var(--px-fill-color-light);
   --px-select-item-font-size: var(--px-font-size-base);
   --px-select-item-font-color: var(--px-text-color-primary);
   --px-select-item-selected-font-color: var(--px-color-primary);
   --px-select-item-selected-bg-color: var(--px-color-primary-light-9);
   --px-select-item-disabled-font-color: var(--px-text-color-disabled);
-  --px-select-input-focus-border-color: var(--px-color-primary);
+  --px-select-input-focus-border-color: var(--px-hover-border-color);
   --px-select-border-color: var(--px-border-color);
   --px-select-shadow-color: var(--px-shadow-color);
-  --px-select-dropdown-bg-color: var(--px-fill-color-blank);
+  --px-select-dropdown-bg-color: var(--px-fill-color-blank);
+  --px-select-item-indicator-color: var(--px-color-primary);
+  --px-select-item-highlighted-border-color: var(--px-color-primary);
 }
 /* Base Select Styles - Pixel Dropdown */
-.px-select[data-v-cf32c555] {
+.px-select[data-v-ec41a99d] {
   display: inline-block;
   vertical-align: middle;
   line-height: 32px;
   font-family: var(--px-font-family);
 }
 /* Tooltip popper styling - pixel style inherited from Tooltip */
-.px-select[data-v-cf32c555] .px-tooltip__popper {
+.px-select[data-v-ec41a99d] .px-tooltip__popper {
     padding: 0;
 }
 /* Override tooltip background to match select dropdown */
-.px-select[data-v-cf32c555] .px-tooltip__popper::after {
+.px-select[data-v-ec41a99d] .px-tooltip__popper::after {
       background: var(--px-select-dropdown-bg-color);
 }
 /* Input with dropdown arrow */
-.px-select[data-v-cf32c555] .px-input .header-angle {
+.px-select[data-v-ec41a99d] .px-input .header-angle {
       transition: none;
 }
-.px-select[data-v-cf32c555] .px-input .header-angle.is-active {
+.px-select[data-v-ec41a99d] .px-input .header-angle.is-active {
         transform: rotate(180deg);
 }
 /* No data / Loading states */
-.px-select .px-select__nodata[data-v-cf32c555],
-  .px-select .px-select__loading[data-v-cf32c555] {
+.px-select .px-select__nodata[data-v-ec41a99d],
+  .px-select .px-select__loading[data-v-ec41a99d] {
     padding: 12px 16px;
     margin: 0;
     text-align: center;
@@ -209,14 +283,14 @@
     font-family: var(--px-font-family);
 }
 /* Menu container */
-.px-select .px-select__menu[data-v-cf32c555] {
+.px-select .px-select__menu[data-v-ec41a99d] {
     list-style: none;
     margin: 0;
     padding: 4px 0;
     box-sizing: border-box;
 }
 /* Menu items - Pixel list style */
-.px-select .px-select__menu-item[data-v-cf32c555] {
+.px-select .px-select__menu-item[data-v-ec41a99d] {
     margin: 0;
     font-size: var(--px-select-item-font-size);
     font-family: var(--px-font-family);
@@ -233,7 +307,7 @@
     transition: none;
 }
 /* Pixel selector indicator - small square */
-.px-select .px-select__menu-item[data-v-cf32c555]::before {
+.px-select .px-select__menu-item[data-v-ec41a99d]::before {
       content: '';
       position: absolute;
       left: 10px;
@@ -246,7 +320,7 @@
       z-index: 2;
 }
 /* Background layer for hover/selected states */
-.px-select .px-select__menu-item[data-v-cf32c555]::after {
+.px-select .px-select__menu-item[data-v-ec41a99d]::after {
       content: '';
       position: absolute;
       inset: 0;
@@ -256,45 +330,45 @@
       z-index: -1;
 }
 /* Hover effect */
-.px-select .px-select__menu-item[data-v-cf32c555]:hover::after {
+.px-select .px-select__menu-item[data-v-ec41a99d]:hover::after {
         background-color: var(--px-select-item-hover-bg-color);
 }
-.px-select .px-select__menu-item[data-v-cf32c555]:hover::before {
-        border-color: var(--px-color-primary);
+.px-select .px-select__menu-item[data-v-ec41a99d]:hover::before {
+        border-color: var(--px-hover-border-color);
 }
 /* Selected state with pixel indicator */
-.px-select .px-select__menu-item.is-selected[data-v-cf32c555] {
+.px-select .px-select__menu-item.is-selected[data-v-ec41a99d] {
       color: var(--px-select-item-selected-font-color);
       font-weight: 500;
 }
-.px-select .px-select__menu-item.is-selected[data-v-cf32c555]::after {
+.px-select .px-select__menu-item.is-selected[data-v-ec41a99d]::after {
         background-color: var(--px-select-item-selected-bg-color);
 }
-.px-select .px-select__menu-item.is-selected[data-v-cf32c555]::before {
-        background: var(--px-color-primary);
-        border-color: var(--px-color-primary);
+.px-select .px-select__menu-item.is-selected[data-v-ec41a99d]::before {
+        background: var(--px-select-item-indicator-color);
+        border-color: var(--px-select-item-indicator-color);
 }
 /* Highlighted (keyboard navigation) */
-.px-select .px-select__menu-item.is-highlighted[data-v-cf32c555]::after {
+.px-select .px-select__menu-item.is-highlighted[data-v-ec41a99d]::after {
         background-color: var(--px-select-item-hover-bg-color);
 }
-.px-select .px-select__menu-item.is-highlighted[data-v-cf32c555]::before {
-        border-color: var(--px-color-primary);
+.px-select .px-select__menu-item.is-highlighted[data-v-ec41a99d]::before {
+        border-color: var(--px-select-item-highlighted-border-color);
 }
 /* Disabled state */
-.px-select .px-select__menu-item.is-disabled[data-v-cf32c555] {
+.px-select .px-select__menu-item.is-disabled[data-v-ec41a99d] {
       color: var(--px-select-item-disabled-font-color);
       cursor: not-allowed;
 }
-.px-select .px-select__menu-item.is-disabled[data-v-cf32c555]:hover::after {
+.px-select .px-select__menu-item.is-disabled[data-v-ec41a99d]:hover::after {
           background-color: transparent;
 }
-.px-select .px-select__menu-item.is-disabled[data-v-cf32c555]:hover::before {
+.px-select .px-select__menu-item.is-disabled[data-v-ec41a99d]:hover::before {
           border-color: transparent;
           background: transparent;
 }
 /* First item needs pixel corners on top */
-.px-select .px-select__menu-item[data-v-cf32c555]:first-child::after {
+.px-select .px-select__menu-item[data-v-ec41a99d]:first-child::after {
       top: 2px;
       clip-path: polygon(
         0 2px, 2px 2px, 2px 0, 4px 0,
@@ -304,7 +378,7 @@
       );
 }
 /* Last item needs pixel corners on bottom */
-.px-select .px-select__menu-item[data-v-cf32c555]:last-child::after {
+.px-select .px-select__menu-item[data-v-ec41a99d]:last-child::after {
       bottom: 2px;
       clip-path: polygon(
         0 0,
@@ -314,7 +388,7 @@
       );
 }
 /* If only one item, needs both top and bottom pixel corners */
-.px-select .px-select__menu-item[data-v-cf32c555]:first-child:last-child::after {
+.px-select .px-select__menu-item[data-v-ec41a99d]:first-child:last-child::after {
       top: 2px;
       bottom: 2px;
       clip-path: polygon(
@@ -325,6 +399,76 @@
       );
 }
 /* Input pointer cursor */
-.px-select[data-v-cf32c555] .px-input__inner {
+.px-select[data-v-ec41a99d] .px-input__inner {
     cursor: pointer;
+}
+/* Disabled state */
+.px-select.is-disabled[data-v-ec41a99d] {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+/* Ghost style - transparent at rest, Input handles border/shadow via prop */
+.px-select.is-ghost[data-v-ec41a99d] .px-tooltip__popper::after {
+        background: var(--px-select-dropdown-bg-color);
+}
+/* Size: Large */
+.px-select.px-select--large[data-v-ec41a99d] {
+    line-height: 44px;
+}
+.px-select.px-select--large .px-select__menu-item[data-v-ec41a99d] {
+      height: 44px;
+      line-height: 44px;
+      font-size: var(--px-font-size-large);
+      padding: 0 20px 0 28px;
+}
+.px-select.px-select--large .px-select__menu-item[data-v-ec41a99d]::before {
+        left: 12px;
+        width: 8px;
+        height: 8px;
+}
+/* Size: Small */
+.px-select.px-select--small[data-v-ec41a99d] {
+    line-height: 28px;
+}
+.px-select.px-select--small .px-select__menu-item[data-v-ec41a99d] {
+      height: 28px;
+      line-height: 28px;
+      font-size: var(--px-font-size-small);
+      padding: 0 12px 0 20px;
+}
+.px-select.px-select--small .px-select__menu-item[data-v-ec41a99d]::before {
+        left: 8px;
+        width: 4px;
+        height: 4px;
+}
+/* Color variants */
+.px-select.px-select--primary[data-v-ec41a99d] {
+      --px-select-item-selected-font-color: var(--px-color-primary);
+      --px-select-item-selected-bg-color: var(--px-color-primary-light-9);
+      --px-select-item-indicator-color: var(--px-color-primary);
+      --px-select-item-highlighted-border-color: var(--px-color-primary);
+}
+.px-select.px-select--success[data-v-ec41a99d] {
+      --px-select-item-selected-font-color: var(--px-color-success);
+      --px-select-item-selected-bg-color: var(--px-color-success-light-9);
+      --px-select-item-indicator-color: var(--px-color-success);
+      --px-select-item-highlighted-border-color: var(--px-color-success);
+}
+.px-select.px-select--warning[data-v-ec41a99d] {
+      --px-select-item-selected-font-color: var(--px-color-warning);
+      --px-select-item-selected-bg-color: var(--px-color-warning-light-9);
+      --px-select-item-indicator-color: var(--px-color-warning);
+      --px-select-item-highlighted-border-color: var(--px-color-warning);
+}
+.px-select.px-select--info[data-v-ec41a99d] {
+      --px-select-item-selected-font-color: var(--px-color-info);
+      --px-select-item-selected-bg-color: var(--px-color-info-light-9);
+      --px-select-item-indicator-color: var(--px-color-info);
+      --px-select-item-highlighted-border-color: var(--px-color-info);
+}
+.px-select.px-select--danger[data-v-ec41a99d] {
+      --px-select-item-selected-font-color: var(--px-color-danger);
+      --px-select-item-selected-bg-color: var(--px-color-danger-light-9);
+      --px-select-item-indicator-color: var(--px-color-danger);
+      --px-select-item-highlighted-border-color: var(--px-color-danger);
 }

package/dist/theme/Switch.css

@@ -180,6 +180,9 @@
     background: transparent;
     transition: none;
     z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 /* Handle border layer */
 .px-switch__core .px-switch__core-action::before {
@@ -223,6 +226,13 @@
         0 calc(100% - 2px)
       );
 }
+/* Icon inside thumb */
+.px-switch__core .px-switch__core-action .px-switch__icon {
+    position: relative;
+    z-index: 3;
+    width: 12px !important;
+    height: 12px !important;
+}
 /* Inner text container */
 .px-switch__core .px-switch__core-inner {
     width: 100%;
@@ -246,3 +256,49 @@
       text-transform: uppercase;
       letter-spacing: 1px;
 }
+/* Type variants */
+.px-switch--primary {
+    --px-switch-on-color: var(--px-color-primary);
+    --px-switch-on-border-color: var(--px-color-primary-dark);
+}
+.px-switch--primary.is-checked .px-switch__core {
+    filter: drop-shadow(
+      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-primary-dark)
+    );
+}
+.px-switch--success {
+    --px-switch-on-color: var(--px-color-success);
+    --px-switch-on-border-color: var(--px-color-success-dark);
+}
+.px-switch--success.is-checked .px-switch__core {
+    filter: drop-shadow(
+      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-success-dark)
+    );
+}
+.px-switch--info {
+    --px-switch-on-color: var(--px-color-info);
+    --px-switch-on-border-color: var(--px-color-info-dark);
+}
+.px-switch--info.is-checked .px-switch__core {
+    filter: drop-shadow(
+      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-info-dark)
+    );
+}
+.px-switch--warning {
+    --px-switch-on-color: var(--px-color-warning);
+    --px-switch-on-border-color: var(--px-color-warning-dark);
+}
+.px-switch--warning.is-checked .px-switch__core {
+    filter: drop-shadow(
+      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-warning-dark)
+    );
+}
+.px-switch--danger {
+    --px-switch-on-color: var(--px-color-danger);
+    --px-switch-on-border-color: var(--px-color-danger-dark);
+}
+.px-switch--danger.is-checked .px-switch__core {
+    filter: drop-shadow(
+      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-danger-dark)
+    );
+}

package/dist/theme/Tooltip.css

@@ -1,5 +1,5 @@
 /* Tooltip Variables */
-.px-tooltip[data-v-77c52c17] {
+.px-tooltip[data-v-4e2bfb45] {
   --px-popover-bg-color: var(--px-bg-color);
   --px-popover-font-size: var(--px-font-size-base);
   --px-popover-border-color: var(--px-border-color-dark);
@@ -9,16 +9,16 @@
 }
 /* Base Tooltip Styles - Pixel Game Style */
 /* No smooth transitions for pixel feel */
-.px-tooltip .fade-enter-active[data-v-77c52c17],
-  .px-tooltip .fade-leave-active[data-v-77c52c17] {
+.px-tooltip .fade-enter-active[data-v-4e2bfb45],
+  .px-tooltip .fade-leave-active[data-v-4e2bfb45] {
     transition: none;
 }
-.px-tooltip .fade-enter-from[data-v-77c52c17],
-  .px-tooltip .fade-leave-to[data-v-77c52c17] {
+.px-tooltip .fade-enter-from[data-v-4e2bfb45],
+  .px-tooltip .fade-leave-to[data-v-4e2bfb45] {
     opacity: 0;
 }
 /* Popper container - Pixel style box */
-.px-tooltip .px-tooltip__popper[data-v-77c52c17] {
+.px-tooltip .px-tooltip__popper[data-v-4e2bfb45] {
     background: transparent;
     padding: var(--px-popover-padding);
     color: var(--px-text-color-primary);
@@ -39,7 +39,7 @@
     );
 }
 /* Border layer — filled with border color, clipped to pixel shape */
-.px-tooltip .px-tooltip__popper[data-v-77c52c17]::before {
+.px-tooltip .px-tooltip__popper[data-v-4e2bfb45]::before {
       content: "";
       position: absolute;
       inset: 0;
@@ -69,7 +69,7 @@
       z-index: -1;
 }
 /* Fill layer — inset by border width, filled with bg color */
-.px-tooltip .px-tooltip__popper[data-v-77c52c17]::after {
+.px-tooltip .px-tooltip__popper[data-v-4e2bfb45]::after {
       content: "";
       position: absolute;
       inset: 2px;
@@ -99,11 +99,11 @@
       z-index: -1;
 }
 /* Hide arrow for pixel style - pixel boxes don't need arrows */
-.px-tooltip .px-tooltip__popper #arrow[data-v-77c52c17] {
+.px-tooltip .px-tooltip__popper #arrow[data-v-4e2bfb45] {
       display: none;
 }
 /* Dark tooltip variant */
-.px-tooltip--dark .px-tooltip__popper[data-v-77c52c17] {
+.px-tooltip--dark .px-tooltip__popper[data-v-4e2bfb45] {
     --px-popover-bg-color: var(--px-text-color-primary);
     --px-popover-border-color: var(--px-text-color-primary);
     --px-popover-shadow-color: rgba(0, 0, 0, 0.4);

package/dist/theme/index.css

@@ -80,7 +80,9 @@ hr {
  */
 @font-face {
   font-family: "zpix";
-  src: url("../theme/fonts/zpix.ttf") format("truetype");
+  src:
+    url("../theme/fonts/zpix.woff2") format("woff2"),
+    url("../theme/fonts/zpix.ttf") format("truetype");
   font-weight: normal;
   font-style: normal;
   font-display: swap;
@@ -215,6 +217,14 @@ hr {
   --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);
@@ -256,8 +266,16 @@ hr {
   --px-border-color-darker: #ffffff;
 
   /* Dark shadows */
-  --px-shadow-color: #11111b;
-  --px-shadow-color-dark: #000000;
+  --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);

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/Button/types.d.ts

@@ -15,6 +15,9 @@ export interface ButtonProps {
     round?: boolean;
     dash?: boolean;
     ghost?: boolean;
+    link?: boolean;
+    block?: boolean;
+    responsive?: boolean;
     color?: string;
     loadingIcon?: string;
     ariaLabel?: string;

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

@@ -0,0 +1,26 @@
+export declare const PxCard: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('packages/core').CardProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+        shadow: boolean | import('packages/core').CardShadow;
+    }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLDivElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('packages/core').CardProps> & Readonly<{}>, {}, {}, {}, {}, {
+        shadow: boolean | import('packages/core').CardShadow;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<import('packages/core').CardProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+    shadow: boolean | import('packages/core').CardShadow;
+}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+    $slots: {
+        header?(_: {}): any;
+        default?(_: {}): any;
+        footer?(_: {}): any;
+    };
+}) & import('vue').Plugin;
+export * from './types';

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

@@ -0,0 +1,6 @@
+export type CardShadow = 'always' | 'hover' | 'never';
+export interface CardProps {
+    hoverable?: boolean;
+    shadow?: boolean | CardShadow;
+    size?: 'small' | 'large';
+}

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

@@ -0,0 +1,3 @@
+import { ColorTemplate } from '@sakana-element/utils';
+export declare const PRESET_INPUT_COLORS: Set<string>;
+export declare const INPUT_COLOR_TEMPLATES: Record<string, ColorTemplate>;

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

@@ -4,6 +4,8 @@ export interface InputProps {
     modelValue: string;
     type?: string;
     size?: 'large' | 'small';
+    color?: string;
+    ghost?: boolean;
     disabled?: boolean;
     clearable?: boolean;
     showPassword?: boolean;

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

@@ -1,4 +1,7 @@
+import { ColorTemplate } from '@sakana-element/utils';
 import { InjectionKey } from 'vue';
 import { SelectContext } from './types';
 export declare const SELECT_CTX_KEY: InjectionKey<SelectContext>;
 export declare const POPPER_OPTIONS: any;
+export declare const PRESET_SELECT_COLORS: Set<string>;
+export declare const SELECT_COLOR_TEMPLATES: Record<string, ColorTemplate>;