sakana-element 2.3.0 → 2.4.1

package/dist/theme/ChatBubble.css

@@ -0,0 +1,218 @@
+/* ChatBubble Variables */
+.px-chat[data-v-c022026d] {
+  --px-chat-bubble-bg-color: var(--px-fill-color-light);
+  --px-chat-bubble-text-color: var(--px-text-color-primary);
+  --px-chat-bubble-border-color: var(--px-border-color);
+  --px-chat-bubble-shadow-color: var(--px-shadow-color);
+  --px-chat-header-color: var(--px-text-color-secondary);
+  --px-chat-footer-color: var(--px-text-color-placeholder);
+
+  /* Beveled inset for 3D raised-bubble depth */
+  --px-chat-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.2);
+  --px-chat-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.06);
+}
+/* Base ChatBubble Styles - Pixel Game Aesthetic */
+.px-chat[data-v-c022026d] {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  font-family: var(--px-font-family);
+  font-size: var(--px-font-size-base);
+  box-sizing: border-box;
+  transition: none;
+}
+/* Placement variants */
+.px-chat--start[data-v-c022026d] {
+  flex-direction: row;
+}
+.px-chat--start .px-chat__header[data-v-c022026d] {
+    text-align: left;
+}
+.px-chat--start .px-chat__footer[data-v-c022026d] {
+    text-align: left;
+}
+/* Tail pointing left — positioned inside bubble */
+.px-chat--start .px-chat__tail[data-v-c022026d] {
+    left: -6px;
+
+    /* Border layer: 4-step staircase pointing left */
+    background: var(--px-chat-bubble-border-color);
+    clip-path: polygon(
+      6px 0, 8px 0,
+      8px 8px,
+      0 8px, 0 6px,
+      2px 6px, 2px 4px,
+      4px 4px, 4px 2px,
+      6px 2px
+    );
+}
+/* Fill layer */
+.px-chat--start .px-chat__tail[data-v-c022026d]::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: var(--px-chat-bubble-bg-color);
+      clip-path: polygon(
+        6px 2px, 8px 2px,
+        8px 6px,
+        4px 6px, 4px 4px,
+        6px 4px
+      );
+}
+.px-chat--end[data-v-c022026d] {
+  flex-direction: row-reverse;
+}
+.px-chat--end .px-chat__header[data-v-c022026d] {
+    text-align: right;
+}
+.px-chat--end .px-chat__footer[data-v-c022026d] {
+    text-align: right;
+}
+/* Tail pointing right — mirror of left */
+.px-chat--end .px-chat__tail[data-v-c022026d] {
+    right: -6px;
+    left: auto;
+
+    /* Border layer: 4-step staircase pointing right */
+    background: var(--px-chat-bubble-border-color);
+    clip-path: polygon(
+      0 0, 2px 0,
+      2px 2px, 4px 2px,
+      4px 4px, 6px 4px,
+      6px 6px, 8px 6px,
+      8px 8px, 0 8px
+    );
+}
+/* Fill layer */
+.px-chat--end .px-chat__tail[data-v-c022026d]::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: var(--px-chat-bubble-bg-color);
+      clip-path: polygon(
+        0 2px, 2px 2px,
+        2px 4px, 4px 4px,
+        4px 6px, 0 6px
+      );
+}
+/* Avatar */
+.px-chat__avatar[data-v-c022026d] {
+  flex-shrink: 0;
+}
+/* Content wrapper */
+.px-chat__content[data-v-c022026d] {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-width: 80%;
+}
+/* Header */
+.px-chat__header[data-v-c022026d] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: var(--px-font-size-small);
+  color: var(--px-chat-header-color);
+  line-height: 1.2;
+}
+.px-chat__name[data-v-c022026d] {
+  font-weight: 600;
+}
+.px-chat__time[data-v-c022026d] {
+  font-size: var(--px-font-size-extra-small);
+  opacity: 0.7;
+}
+/* Tail — positioned inside bubble (which is position:relative) */
+.px-chat__tail[data-v-c022026d] {
+  position: absolute;
+  top: 8px;
+  width: 8px;
+  height: 8px;
+  z-index: 1;
+}
+/* Bubble — pixel border via pseudo-elements */
+.px-chat__bubble[data-v-c022026d] {
+  position: relative;
+  padding: 8px 12px;
+  color: var(--px-chat-bubble-text-color);
+  background: transparent;
+  border: none;
+  line-height: 1.5;
+  word-break: break-word;
+
+  filter: drop-shadow(2px 2px 0px var(--px-chat-bubble-shadow-color));
+}
+/* Border layer */
+.px-chat__bubble[data-v-c022026d]::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: var(--px-chat-bubble-border-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)
+    );
+    z-index: -1;
+}
+/* Fill layer */
+.px-chat__bubble[data-v-c022026d]::after {
+    content: '';
+    position: absolute;
+    inset: 2px;
+    background: var(--px-chat-bubble-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)
+    );
+    box-shadow: var(--px-chat-inset-highlight), var(--px-chat-inset-shadow);
+    z-index: -1;
+}
+/* Footer */
+.px-chat__footer[data-v-c022026d] {
+  font-size: var(--px-font-size-extra-small);
+  color: var(--px-chat-footer-color);
+  line-height: 1.2;
+}
+/* Type variants */
+.px-chat--primary[data-v-c022026d] {
+    --px-chat-bubble-text-color: var(--px-color-white);
+    --px-chat-bubble-bg-color: var(--px-color-primary);
+    --px-chat-bubble-border-color: var(--px-color-primary-dark);
+    --px-chat-bubble-shadow-color: var(--px-color-primary-dark);
+}
+.px-chat--success[data-v-c022026d] {
+    --px-chat-bubble-text-color: var(--px-color-white);
+    --px-chat-bubble-bg-color: var(--px-color-success);
+    --px-chat-bubble-border-color: var(--px-color-success-dark);
+    --px-chat-bubble-shadow-color: var(--px-color-success-dark);
+}
+.px-chat--info[data-v-c022026d] {
+    --px-chat-bubble-text-color: var(--px-color-white);
+    --px-chat-bubble-bg-color: var(--px-color-info);
+    --px-chat-bubble-border-color: var(--px-color-info-dark);
+    --px-chat-bubble-shadow-color: var(--px-color-info-dark);
+}
+.px-chat--warning[data-v-c022026d] {
+    --px-chat-bubble-text-color: var(--px-color-white);
+    --px-chat-bubble-bg-color: var(--px-color-warning);
+    --px-chat-bubble-border-color: var(--px-color-warning-dark);
+    --px-chat-bubble-shadow-color: var(--px-color-warning-dark);
+}
+.px-chat--danger[data-v-c022026d] {
+    --px-chat-bubble-text-color: var(--px-color-white);
+    --px-chat-bubble-bg-color: var(--px-color-danger);
+    --px-chat-bubble-border-color: var(--px-color-danger-dark);
+    --px-chat-bubble-shadow-color: var(--px-color-danger-dark);
+}
+/* Dark mode */
+html.dark .px-chat[data-v-c022026d],
+.px-dark .px-chat[data-v-c022026d] {
+  --px-chat-bubble-bg-color: var(--px-fill-color-light);
+  --px-chat-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.08);
+  --px-chat-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.15);
+}

package/dist/{es/theme → theme}/Checkbox.css

@@ -6,6 +6,10 @@
   --px-checkbox-border-color: var(--px-border-color);
   --px-checkbox-bg-color: var(--px-fill-color-blank);
   --px-checkbox-shadow-color: var(--px-shadow-color);
+
+  /* 3D bevel — sunken look (unchecked) */
+  --px-checkbox-inset-highlight: inset -2px -2px 0 0 rgba(255, 255, 255, 0.2);
+  --px-checkbox-inset-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.1);
 }
 /* Base Checkbox Styles */
 .px-checkbox {
@@ -36,12 +40,25 @@
 .px-checkbox.is-checked .px-checkbox__inner .px-checkbox__tick, .px-checkbox.is-indeterminate .px-checkbox__inner .px-checkbox__tick {
         opacity: 1;
 }
-/* Checked state */
+/* Checked state — raised bevel */
+.px-checkbox.is-checked {
+    --px-checkbox-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.2);
+    --px-checkbox-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.1);
+}
 .px-checkbox.is-checked .px-checkbox__input {
       filter: drop-shadow(
         var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-checkbox-checked-border-color)
       );
 }
+/* Hover feedback */
+.px-checkbox:hover:not(.is-disabled) .px-checkbox__inner::after {
+      --px-checkbox-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.35);
+}
+/* Active/pressed feedback */
+.px-checkbox:active:not(.is-disabled) .px-checkbox__inner::after {
+      --px-checkbox-inset-highlight: inset -2px -2px 0 0 rgba(255, 255, 255, 0.2);
+      --px-checkbox-inset-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.15);
+}
 /* Indeterminate state */
 .px-checkbox.is-indeterminate .px-checkbox__inner .px-checkbox__tick {
       /* Override checkmark with a pixel-art horizontal dash */
@@ -152,13 +169,16 @@
     clip-path: var(--px-checkbox-pixel-corners);
     z-index: 0;
 }
-/* Fill layer - pixel shape */
+/* Fill layer - pixel shape with 3D bevel */
 .px-checkbox__inner::after {
     content: "";
     position: absolute;
     inset: 2px;
     background: var(--px-checkbox-bg-color);
     clip-path: var(--px-checkbox-pixel-corners);
+    box-shadow:
+      var(--px-checkbox-inset-highlight),
+      var(--px-checkbox-inset-shadow);
     z-index: 0;
 }
 /* Pixel checkmark */
@@ -168,14 +188,45 @@
   width: 10px;
   height: 10px;
   opacity: 0;
-  /* Pixel-art checkmark (✓) via clip-path */
+  /* Pixel staircase checkmark (✓) — stepped 2px increments */
   clip-path: polygon(
-    15% 50%,
-    35% 70%,
-    85% 20%,
-    85% 40%,
-    35% 90%,
-    15% 70%
+    /* Left arm descending */
+    10% 40%,
+    10% 60%,
+    20% 60%,
+    20% 70%,
+    30% 70%,
+    30% 80%,
+    /* Bottom vertex */
+    40% 80%,
+    40% 90%,
+    50% 90%,
+    50% 80%,
+    /* Right arm ascending */
+    60% 80%,
+    60% 70%,
+    70% 70%,
+    70% 60%,
+    80% 60%,
+    80% 50%,
+    90% 50%,
+    90% 30%,
+    /* Top of right arm */
+    80% 30%,
+    80% 40%,
+    70% 40%,
+    70% 50%,
+    60% 50%,
+    60% 60%,
+    50% 60%,
+    50% 70%,
+    /* Return along inner edge */
+    40% 70%,
+    40% 60%,
+    30% 60%,
+    30% 50%,
+    20% 50%,
+    20% 40%
   );
   background: var(--px-fill-color-blank);
 }
@@ -233,6 +284,15 @@
       var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-danger-dark)
     );
 }
+/* Dark mode bevel adjustment */
+html.dark .px-checkbox {
+  --px-checkbox-inset-highlight: inset -2px -2px 0 0 rgba(255, 255, 255, 0.08);
+  --px-checkbox-inset-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.2);
+}
+html.dark .px-checkbox.is-checked {
+  --px-checkbox-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.08);
+  --px-checkbox-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.2);
+}
 /* Checkbox Group */
 .px-checkbox-group {
   display: inline-flex;
@@ -248,6 +308,10 @@
   --px-checkbox-border-color: var(--px-border-color);
   --px-checkbox-bg-color: var(--px-fill-color-blank);
   --px-checkbox-shadow-color: var(--px-shadow-color);
+
+  /* 3D bevel — sunken look (unchecked) */
+  --px-checkbox-inset-highlight: inset -2px -2px 0 0 rgba(255, 255, 255, 0.2);
+  --px-checkbox-inset-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.1);
 }
 /* Base Checkbox Styles */
 .px-checkbox {
@@ -278,12 +342,25 @@
 .px-checkbox.is-checked .px-checkbox__inner .px-checkbox__tick, .px-checkbox.is-indeterminate .px-checkbox__inner .px-checkbox__tick {
         opacity: 1;
 }
-/* Checked state */
+/* Checked state — raised bevel */
+.px-checkbox.is-checked {
+    --px-checkbox-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.2);
+    --px-checkbox-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.1);
+}
 .px-checkbox.is-checked .px-checkbox__input {
       filter: drop-shadow(
         var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-checkbox-checked-border-color)
       );
 }
+/* Hover feedback */
+.px-checkbox:hover:not(.is-disabled) .px-checkbox__inner::after {
+      --px-checkbox-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.35);
+}
+/* Active/pressed feedback */
+.px-checkbox:active:not(.is-disabled) .px-checkbox__inner::after {
+      --px-checkbox-inset-highlight: inset -2px -2px 0 0 rgba(255, 255, 255, 0.2);
+      --px-checkbox-inset-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.15);
+}
 /* Indeterminate state */
 .px-checkbox.is-indeterminate .px-checkbox__inner .px-checkbox__tick {
       /* Override checkmark with a pixel-art horizontal dash */
@@ -394,13 +471,16 @@
     clip-path: var(--px-checkbox-pixel-corners);
     z-index: 0;
 }
-/* Fill layer - pixel shape */
+/* Fill layer - pixel shape with 3D bevel */
 .px-checkbox__inner::after {
     content: "";
     position: absolute;
     inset: 2px;
     background: var(--px-checkbox-bg-color);
     clip-path: var(--px-checkbox-pixel-corners);
+    box-shadow:
+      var(--px-checkbox-inset-highlight),
+      var(--px-checkbox-inset-shadow);
     z-index: 0;
 }
 /* Pixel checkmark */
@@ -410,14 +490,45 @@
   width: 10px;
   height: 10px;
   opacity: 0;
-  /* Pixel-art checkmark (✓) via clip-path */
+  /* Pixel staircase checkmark (✓) — stepped 2px increments */
   clip-path: polygon(
-    15% 50%,
-    35% 70%,
-    85% 20%,
-    85% 40%,
-    35% 90%,
-    15% 70%
+    /* Left arm descending */
+    10% 40%,
+    10% 60%,
+    20% 60%,
+    20% 70%,
+    30% 70%,
+    30% 80%,
+    /* Bottom vertex */
+    40% 80%,
+    40% 90%,
+    50% 90%,
+    50% 80%,
+    /* Right arm ascending */
+    60% 80%,
+    60% 70%,
+    70% 70%,
+    70% 60%,
+    80% 60%,
+    80% 50%,
+    90% 50%,
+    90% 30%,
+    /* Top of right arm */
+    80% 30%,
+    80% 40%,
+    70% 40%,
+    70% 50%,
+    60% 50%,
+    60% 60%,
+    50% 60%,
+    50% 70%,
+    /* Return along inner edge */
+    40% 70%,
+    40% 60%,
+    30% 60%,
+    30% 50%,
+    20% 50%,
+    20% 40%
   );
   background: var(--px-fill-color-blank);
 }
@@ -475,6 +586,15 @@
       var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-danger-dark)
     );
 }
+/* Dark mode bevel adjustment */
+html.dark .px-checkbox {
+  --px-checkbox-inset-highlight: inset -2px -2px 0 0 rgba(255, 255, 255, 0.08);
+  --px-checkbox-inset-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.2);
+}
+html.dark .px-checkbox.is-checked {
+  --px-checkbox-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.08);
+  --px-checkbox-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.2);
+}
 /* Checkbox Group */
 .px-checkbox-group {
   display: inline-flex;