sakana-element 2.3.0 → 2.4.0

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

@@ -6,6 +6,10 @@
   --px-radio-border-color: var(--px-border-color);
   --px-radio-bg-color: var(--px-fill-color-blank);
   --px-radio-shadow-color: var(--px-shadow-color);
+
+  /* 3D bevel — sunken look (unchecked) */
+  --px-radio-inset-highlight: inset -2px -2px 0 0 rgba(255, 255, 255, 0.2);
+  --px-radio-inset-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.1);
 }
 /* Base Radio Styles */
 .px-radio {
@@ -26,7 +30,11 @@
 .px-radio.is-disabled .px-radio__inner {
       cursor: not-allowed;
 }
-/* Checked state */
+/* Checked state — raised bevel */
+.px-radio.is-checked {
+    --px-radio-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.2);
+    --px-radio-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.1);
+}
 .px-radio.is-checked .px-radio__inner::before {
         background: var(--px-radio-checked-border-color);
 }
@@ -41,6 +49,15 @@
         var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-radio-checked-border-color)
       );
 }
+/* Hover feedback */
+.px-radio:hover:not(.is-disabled) {
+    --px-radio-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.35);
+}
+/* Active/pressed feedback */
+.px-radio:active:not(.is-disabled) {
+    --px-radio-inset-highlight: inset -2px -2px 0 0 rgba(255, 255, 255, 0.2);
+    --px-radio-inset-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.15);
+}
 /* Size variants */
 .px-radio--large {
   --px-radio-size: 22px;
@@ -90,7 +107,7 @@
     var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-radio-shadow-color)
   );
 }
-/* The pixel-art radio circle — octagonal shape */
+/* The pixel-art radio — diamond shape with 2px stepped edges */
 .px-radio__inner {
   position: relative;
   display: inline-flex;
@@ -101,19 +118,31 @@
   box-sizing: border-box;
   background: transparent;
 
-  /* Pixel-art octagon clip path */
+  /* Pixel diamond clip-path: 2px staircase steps */
   --px-radio-pixel-shape: polygon(
-    30% 0%,
-    70% 0%,
-    100% 30%,
-    100% 70%,
-    70% 100%,
-    30% 100%,
-    0% 70%,
-    0% 30%
+    /* Top point */
+    calc(50% - 2px) 0,
+    calc(50% + 2px) 0,
+    /* Top-right stepped edge */
+    calc(100% - 4px) calc(50% - 4px),
+    calc(100% - 2px) calc(50% - 2px),
+    100% calc(50% - 2px),
+    100% calc(50% + 2px),
+    calc(100% - 2px) calc(50% + 2px),
+    calc(100% - 4px) calc(50% + 4px),
+    /* Bottom point */
+    calc(50% + 2px) 100%,
+    calc(50% - 2px) 100%,
+    /* Bottom-left stepped edge */
+    4px calc(50% + 4px),
+    2px calc(50% + 2px),
+    0 calc(50% + 2px),
+    0 calc(50% - 2px),
+    2px calc(50% - 2px),
+    4px calc(50% - 4px)
   );
 }
-/* Border layer – pixel octagon */
+/* Border layer – pixel diamond */
 .px-radio__inner::before {
     content: "";
     position: absolute;
@@ -122,16 +151,19 @@
     clip-path: var(--px-radio-pixel-shape);
     z-index: 0;
 }
-/* Fill layer – pixel octagon */
+/* Fill layer – pixel diamond with 3D bevel */
 .px-radio__inner::after {
     content: "";
     position: absolute;
     inset: 2px;
     background: var(--px-radio-bg-color);
     clip-path: var(--px-radio-pixel-shape);
+    box-shadow:
+      var(--px-radio-inset-highlight),
+      var(--px-radio-inset-shadow);
     z-index: 0;
 }
-/* Pixel dot indicator */
+/* Pixel dot indicator — small diamond */
 .px-radio__dot {
   position: relative;
   z-index: 1;
@@ -139,16 +171,8 @@
   height: 6px;
   opacity: 0;
   background: var(--px-fill-color-blank);
-  clip-path: polygon(
-    30% 0%,
-    70% 0%,
-    100% 30%,
-    100% 70%,
-    70% 100%,
-    30% 100%,
-    0% 70%,
-    0% 30%
-  );
+  /* Simple 4-point diamond at small size */
+  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
 }
 /* Label */
 .px-radio__label {
@@ -204,6 +228,15 @@
       var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-danger-dark)
     );
 }
+/* Dark mode bevel adjustment */
+html.dark .px-radio {
+  --px-radio-inset-highlight: inset -2px -2px 0 0 rgba(255, 255, 255, 0.08);
+  --px-radio-inset-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.2);
+}
+html.dark .px-radio.is-checked {
+  --px-radio-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.08);
+  --px-radio-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.2);
+}
 /* Radio Group */
 .px-radio-group {
   display: inline-flex;
@@ -219,6 +252,10 @@
   --px-radio-border-color: var(--px-border-color);
   --px-radio-bg-color: var(--px-fill-color-blank);
   --px-radio-shadow-color: var(--px-shadow-color);
+
+  /* 3D bevel — sunken look (unchecked) */
+  --px-radio-inset-highlight: inset -2px -2px 0 0 rgba(255, 255, 255, 0.2);
+  --px-radio-inset-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.1);
 }
 /* Base Radio Styles */
 .px-radio {
@@ -239,7 +276,11 @@
 .px-radio.is-disabled .px-radio__inner {
       cursor: not-allowed;
 }
-/* Checked state */
+/* Checked state — raised bevel */
+.px-radio.is-checked {
+    --px-radio-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.2);
+    --px-radio-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.1);
+}
 .px-radio.is-checked .px-radio__inner::before {
         background: var(--px-radio-checked-border-color);
 }
@@ -254,6 +295,15 @@
         var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-radio-checked-border-color)
       );
 }
+/* Hover feedback */
+.px-radio:hover:not(.is-disabled) {
+    --px-radio-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.35);
+}
+/* Active/pressed feedback */
+.px-radio:active:not(.is-disabled) {
+    --px-radio-inset-highlight: inset -2px -2px 0 0 rgba(255, 255, 255, 0.2);
+    --px-radio-inset-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.15);
+}
 /* Size variants */
 .px-radio--large {
   --px-radio-size: 22px;
@@ -303,7 +353,7 @@
     var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-radio-shadow-color)
   );
 }
-/* The pixel-art radio circle — octagonal shape */
+/* The pixel-art radio — diamond shape with 2px stepped edges */
 .px-radio__inner {
   position: relative;
   display: inline-flex;
@@ -314,19 +364,31 @@
   box-sizing: border-box;
   background: transparent;
 
-  /* Pixel-art octagon clip path */
+  /* Pixel diamond clip-path: 2px staircase steps */
   --px-radio-pixel-shape: polygon(
-    30% 0%,
-    70% 0%,
-    100% 30%,
-    100% 70%,
-    70% 100%,
-    30% 100%,
-    0% 70%,
-    0% 30%
+    /* Top point */
+    calc(50% - 2px) 0,
+    calc(50% + 2px) 0,
+    /* Top-right stepped edge */
+    calc(100% - 4px) calc(50% - 4px),
+    calc(100% - 2px) calc(50% - 2px),
+    100% calc(50% - 2px),
+    100% calc(50% + 2px),
+    calc(100% - 2px) calc(50% + 2px),
+    calc(100% - 4px) calc(50% + 4px),
+    /* Bottom point */
+    calc(50% + 2px) 100%,
+    calc(50% - 2px) 100%,
+    /* Bottom-left stepped edge */
+    4px calc(50% + 4px),
+    2px calc(50% + 2px),
+    0 calc(50% + 2px),
+    0 calc(50% - 2px),
+    2px calc(50% - 2px),
+    4px calc(50% - 4px)
   );
 }
-/* Border layer – pixel octagon */
+/* Border layer – pixel diamond */
 .px-radio__inner::before {
     content: "";
     position: absolute;
@@ -335,16 +397,19 @@
     clip-path: var(--px-radio-pixel-shape);
     z-index: 0;
 }
-/* Fill layer – pixel octagon */
+/* Fill layer – pixel diamond with 3D bevel */
 .px-radio__inner::after {
     content: "";
     position: absolute;
     inset: 2px;
     background: var(--px-radio-bg-color);
     clip-path: var(--px-radio-pixel-shape);
+    box-shadow:
+      var(--px-radio-inset-highlight),
+      var(--px-radio-inset-shadow);
     z-index: 0;
 }
-/* Pixel dot indicator */
+/* Pixel dot indicator — small diamond */
 .px-radio__dot {
   position: relative;
   z-index: 1;
@@ -352,16 +417,8 @@
   height: 6px;
   opacity: 0;
   background: var(--px-fill-color-blank);
-  clip-path: polygon(
-    30% 0%,
-    70% 0%,
-    100% 30%,
-    100% 70%,
-    70% 100%,
-    30% 100%,
-    0% 70%,
-    0% 30%
-  );
+  /* Simple 4-point diamond at small size */
+  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
 }
 /* Label */
 .px-radio__label {
@@ -417,6 +474,15 @@
       var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-danger-dark)
     );
 }
+/* Dark mode bevel adjustment */
+html.dark .px-radio {
+  --px-radio-inset-highlight: inset -2px -2px 0 0 rgba(255, 255, 255, 0.08);
+  --px-radio-inset-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.2);
+}
+html.dark .px-radio.is-checked {
+  --px-radio-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.08);
+  --px-radio-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.2);
+}
 /* Radio Group */
 .px-radio-group {
   display: inline-flex;

package/dist/theme/Resizable.css

@@ -0,0 +1,95 @@
+/* Resizable Group */
+.px-resizable-group {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+.px-resizable-group.is-horizontal {
+  flex-direction: row;
+}
+.px-resizable-group.is-vertical {
+  flex-direction: column;
+}
+/* Resizable Panel */
+.px-resizable-panel {
+  overflow: auto;
+  position: relative;
+  box-sizing: border-box;
+}
+.px-resizable-panel.is-collapsed {
+  overflow: hidden;
+}
+/* Resizable Handle */
+.px-resizable-handle {
+  flex: 0 0 8px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+  z-index: 1;
+  cursor: col-resize;
+  transition: none;
+  background: var(--px-border-color);
+  box-sizing: border-box;
+
+  /* Pixel border effect via clip-path */
+  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)
+  );
+}
+.px-resizable-handle:hover {
+    background: var(--px-hover-border-color);
+}
+.px-resizable-handle:focus-visible {
+    outline: 2px solid var(--px-color-primary);
+    outline-offset: -2px;
+}
+/* Expanded hit area via ::before pseudo-element (not clipped by clip-path) */
+.px-resizable-handle.has-hit-area::before {
+  content: '';
+  position: absolute;
+  inset: calc(-1 * var(--px-handle-hit-area, 0px));
+  z-index: -1;
+}
+/* Vertical handle */
+.px-resizable-handle.is-vertical {
+  flex: 0 0 8px;
+  cursor: row-resize;
+  clip-path: polygon(
+    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),
+    0 2px,
+    2px 2px
+  );
+}
+/* Dragging state */
+.px-resizable-handle.is-dragging {
+  background: var(--px-color-primary);
+}
+/* Disabled state */
+.px-resizable-handle.is-disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}