sakana-element 2.2.0 → 2.4.0

package/dist/theme/Radio.css

@@ -0,0 +1,492 @@
+/* Radio Variables */
+.px-radio {
+  --px-radio-size: 18px;
+  --px-radio-checked-color: var(--px-color-primary);
+  --px-radio-checked-border-color: var(--px-color-primary-dark);
+  --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 {
+  display: inline-flex;
+  align-items: center;
+  font-size: var(--px-font-size-base);
+  font-family: var(--px-font-family);
+  line-height: 1;
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+}
+/* Disabled state */
+.px-radio.is-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+.px-radio.is-disabled .px-radio__inner {
+      cursor: not-allowed;
+}
+/* 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);
+}
+.px-radio.is-checked .px-radio__inner::after {
+        background: var(--px-radio-checked-color);
+}
+.px-radio.is-checked .px-radio__inner .px-radio__dot {
+        opacity: 1;
+}
+.px-radio.is-checked .px-radio__input {
+      filter: drop-shadow(
+        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;
+  font-size: var(--px-font-size-base);
+}
+.px-radio--large .px-radio__dot {
+    width: 8px;
+    height: 8px;
+}
+.px-radio--small {
+  --px-radio-size: 14px;
+  font-size: var(--px-font-size-small);
+}
+.px-radio--small .px-radio__input {
+    filter: drop-shadow(2px 2px 0px var(--px-radio-shadow-color));
+}
+.px-radio--small .px-radio__dot {
+    width: 4px;
+    height: 4px;
+}
+.px-radio--small.is-checked .px-radio__input {
+    filter: drop-shadow(2px 2px 0px var(--px-radio-checked-border-color));
+}
+/* Hidden native input */
+.px-radio__original {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  margin: 0;
+  outline: none;
+}
+.px-radio__original:focus-visible ~ .px-radio__inner {
+    outline: 2px dashed var(--px-radio-checked-color);
+    outline-offset: 2px;
+}
+/* Input wrapper */
+.px-radio__input {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  /* Pixel shadow via drop-shadow */
+  filter: drop-shadow(
+    var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-radio-shadow-color)
+  );
+}
+/* The pixel-art radio — diamond shape with 2px stepped edges */
+.px-radio__inner {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--px-radio-size);
+  height: var(--px-radio-size);
+  box-sizing: border-box;
+  background: transparent;
+
+  /* Pixel diamond clip-path: 2px staircase steps */
+  --px-radio-pixel-shape: polygon(
+    /* 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 diamond */
+.px-radio__inner::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: var(--px-radio-border-color);
+    clip-path: var(--px-radio-pixel-shape);
+    z-index: 0;
+}
+/* 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 — small diamond */
+.px-radio__dot {
+  position: relative;
+  z-index: 1;
+  width: 6px;
+  height: 6px;
+  opacity: 0;
+  background: var(--px-fill-color-blank);
+  /* Simple 4-point diamond at small size */
+  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
+}
+/* Label */
+.px-radio__label {
+  padding-left: 8px;
+  font-family: var(--px-font-family);
+  font-size: inherit;
+  line-height: 1.2;
+  color: var(--px-text-color-primary);
+}
+/* Type variants */
+.px-radio--primary {
+    --px-radio-checked-color: var(--px-color-primary);
+    --px-radio-checked-border-color: var(--px-color-primary-dark);
+}
+.px-radio--primary.is-checked .px-radio__input {
+    filter: drop-shadow(
+      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-primary-dark)
+    );
+}
+.px-radio--success {
+    --px-radio-checked-color: var(--px-color-success);
+    --px-radio-checked-border-color: var(--px-color-success-dark);
+}
+.px-radio--success.is-checked .px-radio__input {
+    filter: drop-shadow(
+      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-success-dark)
+    );
+}
+.px-radio--info {
+    --px-radio-checked-color: var(--px-color-info);
+    --px-radio-checked-border-color: var(--px-color-info-dark);
+}
+.px-radio--info.is-checked .px-radio__input {
+    filter: drop-shadow(
+      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-info-dark)
+    );
+}
+.px-radio--warning {
+    --px-radio-checked-color: var(--px-color-warning);
+    --px-radio-checked-border-color: var(--px-color-warning-dark);
+}
+.px-radio--warning.is-checked .px-radio__input {
+    filter: drop-shadow(
+      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-warning-dark)
+    );
+}
+.px-radio--danger {
+    --px-radio-checked-color: var(--px-color-danger);
+    --px-radio-checked-border-color: var(--px-color-danger-dark);
+}
+.px-radio--danger.is-checked .px-radio__input {
+    filter: drop-shadow(
+      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;
+  flex-wrap: wrap;
+  gap: 16px;
+  align-items: center;
+}
+/* Radio Variables */
+.px-radio {
+  --px-radio-size: 18px;
+  --px-radio-checked-color: var(--px-color-primary);
+  --px-radio-checked-border-color: var(--px-color-primary-dark);
+  --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 {
+  display: inline-flex;
+  align-items: center;
+  font-size: var(--px-font-size-base);
+  font-family: var(--px-font-family);
+  line-height: 1;
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+}
+/* Disabled state */
+.px-radio.is-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+.px-radio.is-disabled .px-radio__inner {
+      cursor: not-allowed;
+}
+/* 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);
+}
+.px-radio.is-checked .px-radio__inner::after {
+        background: var(--px-radio-checked-color);
+}
+.px-radio.is-checked .px-radio__inner .px-radio__dot {
+        opacity: 1;
+}
+.px-radio.is-checked .px-radio__input {
+      filter: drop-shadow(
+        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;
+  font-size: var(--px-font-size-base);
+}
+.px-radio--large .px-radio__dot {
+    width: 8px;
+    height: 8px;
+}
+.px-radio--small {
+  --px-radio-size: 14px;
+  font-size: var(--px-font-size-small);
+}
+.px-radio--small .px-radio__input {
+    filter: drop-shadow(2px 2px 0px var(--px-radio-shadow-color));
+}
+.px-radio--small .px-radio__dot {
+    width: 4px;
+    height: 4px;
+}
+.px-radio--small.is-checked .px-radio__input {
+    filter: drop-shadow(2px 2px 0px var(--px-radio-checked-border-color));
+}
+/* Hidden native input */
+.px-radio__original {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  margin: 0;
+  outline: none;
+}
+.px-radio__original:focus-visible ~ .px-radio__inner {
+    outline: 2px dashed var(--px-radio-checked-color);
+    outline-offset: 2px;
+}
+/* Input wrapper */
+.px-radio__input {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  /* Pixel shadow via drop-shadow */
+  filter: drop-shadow(
+    var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-radio-shadow-color)
+  );
+}
+/* The pixel-art radio — diamond shape with 2px stepped edges */
+.px-radio__inner {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--px-radio-size);
+  height: var(--px-radio-size);
+  box-sizing: border-box;
+  background: transparent;
+
+  /* Pixel diamond clip-path: 2px staircase steps */
+  --px-radio-pixel-shape: polygon(
+    /* 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 diamond */
+.px-radio__inner::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: var(--px-radio-border-color);
+    clip-path: var(--px-radio-pixel-shape);
+    z-index: 0;
+}
+/* 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 — small diamond */
+.px-radio__dot {
+  position: relative;
+  z-index: 1;
+  width: 6px;
+  height: 6px;
+  opacity: 0;
+  background: var(--px-fill-color-blank);
+  /* Simple 4-point diamond at small size */
+  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
+}
+/* Label */
+.px-radio__label {
+  padding-left: 8px;
+  font-family: var(--px-font-family);
+  font-size: inherit;
+  line-height: 1.2;
+  color: var(--px-text-color-primary);
+}
+/* Type variants */
+.px-radio--primary {
+    --px-radio-checked-color: var(--px-color-primary);
+    --px-radio-checked-border-color: var(--px-color-primary-dark);
+}
+.px-radio--primary.is-checked .px-radio__input {
+    filter: drop-shadow(
+      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-primary-dark)
+    );
+}
+.px-radio--success {
+    --px-radio-checked-color: var(--px-color-success);
+    --px-radio-checked-border-color: var(--px-color-success-dark);
+}
+.px-radio--success.is-checked .px-radio__input {
+    filter: drop-shadow(
+      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-success-dark)
+    );
+}
+.px-radio--info {
+    --px-radio-checked-color: var(--px-color-info);
+    --px-radio-checked-border-color: var(--px-color-info-dark);
+}
+.px-radio--info.is-checked .px-radio__input {
+    filter: drop-shadow(
+      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-info-dark)
+    );
+}
+.px-radio--warning {
+    --px-radio-checked-color: var(--px-color-warning);
+    --px-radio-checked-border-color: var(--px-color-warning-dark);
+}
+.px-radio--warning.is-checked .px-radio__input {
+    filter: drop-shadow(
+      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-warning-dark)
+    );
+}
+.px-radio--danger {
+    --px-radio-checked-color: var(--px-color-danger);
+    --px-radio-checked-border-color: var(--px-color-danger-dark);
+}
+.px-radio--danger.is-checked .px-radio__input {
+    filter: drop-shadow(
+      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;
+  flex-wrap: wrap;
+  gap: 16px;
+  align-items: center;
+}

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;
+}