sakana-element 2.2.0 → 2.3.0

package/dist/es/theme/Checkbox.css

@@ -0,0 +1,484 @@
+/* Checkbox Variables */
+.px-checkbox {
+  --px-checkbox-size: 18px;
+  --px-checkbox-checked-color: var(--px-color-primary);
+  --px-checkbox-checked-border-color: var(--px-color-primary-dark);
+  --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);
+}
+/* Base Checkbox Styles */
+.px-checkbox {
+  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-checkbox.is-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+.px-checkbox.is-disabled .px-checkbox__inner {
+      cursor: not-allowed;
+}
+/* Checked & Indeterminate shared styles */
+.px-checkbox.is-checked .px-checkbox__inner::before, .px-checkbox.is-indeterminate .px-checkbox__inner::before {
+        background: var(--px-checkbox-checked-border-color);
+}
+.px-checkbox.is-checked .px-checkbox__inner::after, .px-checkbox.is-indeterminate .px-checkbox__inner::after {
+        background: var(--px-checkbox-checked-color);
+}
+.px-checkbox.is-checked .px-checkbox__inner .px-checkbox__tick, .px-checkbox.is-indeterminate .px-checkbox__inner .px-checkbox__tick {
+        opacity: 1;
+}
+/* Checked state */
+.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)
+      );
+}
+/* Indeterminate state */
+.px-checkbox.is-indeterminate .px-checkbox__inner .px-checkbox__tick {
+      /* Override checkmark with a pixel-art horizontal dash */
+      clip-path: none;
+      position: absolute;
+      width: 8px;
+      height: 2px;
+      background: var(--px-fill-color-blank);
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+}
+.px-checkbox.is-indeterminate .px-checkbox__input {
+      filter: none;
+}
+/* Size variants */
+.px-checkbox--large {
+  --px-checkbox-size: 22px;
+  font-size: var(--px-font-size-base);
+}
+.px-checkbox--large .px-checkbox__tick {
+    width: 12px;
+    height: 12px;
+}
+.px-checkbox--large.is-indeterminate .px-checkbox__inner .px-checkbox__tick {
+    width: 10px;
+    height: 2px;
+}
+.px-checkbox--small {
+  --px-checkbox-size: 14px;
+  font-size: var(--px-font-size-small);
+}
+.px-checkbox--small .px-checkbox__input {
+    filter: drop-shadow(2px 2px 0px var(--px-checkbox-shadow-color));
+}
+.px-checkbox--small .px-checkbox__tick {
+    width: 8px;
+    height: 8px;
+}
+.px-checkbox--small.is-checked .px-checkbox__input {
+    filter: drop-shadow(2px 2px 0px var(--px-checkbox-checked-border-color));
+}
+.px-checkbox--small.is-indeterminate .px-checkbox__input {
+    filter: none;
+}
+.px-checkbox--small.is-indeterminate .px-checkbox__inner .px-checkbox__tick {
+    width: 6px;
+    height: 2px;
+}
+/* Hidden native input */
+.px-checkbox__original {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  margin: 0;
+  outline: none;
+}
+.px-checkbox__original:focus-visible ~ .px-checkbox__inner {
+    outline: 2px dashed var(--px-checkbox-checked-color);
+    outline-offset: 2px;
+}
+/* Input wrapper */
+.px-checkbox__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-checkbox-shadow-color)
+  );
+}
+/* The pixel-art checkbox box */
+.px-checkbox__inner {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--px-checkbox-size);
+  height: var(--px-checkbox-size);
+  box-sizing: border-box;
+  background: transparent;
+
+  --px-checkbox-pixel-corners: 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)
+  );
+}
+/* Border layer - pixel shape */
+.px-checkbox__inner::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: var(--px-checkbox-border-color);
+    clip-path: var(--px-checkbox-pixel-corners);
+    z-index: 0;
+}
+/* Fill layer - pixel shape */
+.px-checkbox__inner::after {
+    content: "";
+    position: absolute;
+    inset: 2px;
+    background: var(--px-checkbox-bg-color);
+    clip-path: var(--px-checkbox-pixel-corners);
+    z-index: 0;
+}
+/* Pixel checkmark */
+.px-checkbox__tick {
+  position: relative;
+  z-index: 1;
+  width: 10px;
+  height: 10px;
+  opacity: 0;
+  /* Pixel-art checkmark (✓) via clip-path */
+  clip-path: polygon(
+    15% 50%,
+    35% 70%,
+    85% 20%,
+    85% 40%,
+    35% 90%,
+    15% 70%
+  );
+  background: var(--px-fill-color-blank);
+}
+/* Label */
+.px-checkbox__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-checkbox--primary {
+    --px-checkbox-checked-color: var(--px-color-primary);
+    --px-checkbox-checked-border-color: var(--px-color-primary-dark);
+}
+.px-checkbox--primary.is-checked .px-checkbox__input {
+    filter: drop-shadow(
+      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-primary-dark)
+    );
+}
+.px-checkbox--success {
+    --px-checkbox-checked-color: var(--px-color-success);
+    --px-checkbox-checked-border-color: var(--px-color-success-dark);
+}
+.px-checkbox--success.is-checked .px-checkbox__input {
+    filter: drop-shadow(
+      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-success-dark)
+    );
+}
+.px-checkbox--info {
+    --px-checkbox-checked-color: var(--px-color-info);
+    --px-checkbox-checked-border-color: var(--px-color-info-dark);
+}
+.px-checkbox--info.is-checked .px-checkbox__input {
+    filter: drop-shadow(
+      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-info-dark)
+    );
+}
+.px-checkbox--warning {
+    --px-checkbox-checked-color: var(--px-color-warning);
+    --px-checkbox-checked-border-color: var(--px-color-warning-dark);
+}
+.px-checkbox--warning.is-checked .px-checkbox__input {
+    filter: drop-shadow(
+      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-warning-dark)
+    );
+}
+.px-checkbox--danger {
+    --px-checkbox-checked-color: var(--px-color-danger);
+    --px-checkbox-checked-border-color: var(--px-color-danger-dark);
+}
+.px-checkbox--danger.is-checked .px-checkbox__input {
+    filter: drop-shadow(
+      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-danger-dark)
+    );
+}
+/* Checkbox Group */
+.px-checkbox-group {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  align-items: center;
+}
+/* Checkbox Variables */
+.px-checkbox {
+  --px-checkbox-size: 18px;
+  --px-checkbox-checked-color: var(--px-color-primary);
+  --px-checkbox-checked-border-color: var(--px-color-primary-dark);
+  --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);
+}
+/* Base Checkbox Styles */
+.px-checkbox {
+  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-checkbox.is-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+.px-checkbox.is-disabled .px-checkbox__inner {
+      cursor: not-allowed;
+}
+/* Checked & Indeterminate shared styles */
+.px-checkbox.is-checked .px-checkbox__inner::before, .px-checkbox.is-indeterminate .px-checkbox__inner::before {
+        background: var(--px-checkbox-checked-border-color);
+}
+.px-checkbox.is-checked .px-checkbox__inner::after, .px-checkbox.is-indeterminate .px-checkbox__inner::after {
+        background: var(--px-checkbox-checked-color);
+}
+.px-checkbox.is-checked .px-checkbox__inner .px-checkbox__tick, .px-checkbox.is-indeterminate .px-checkbox__inner .px-checkbox__tick {
+        opacity: 1;
+}
+/* Checked state */
+.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)
+      );
+}
+/* Indeterminate state */
+.px-checkbox.is-indeterminate .px-checkbox__inner .px-checkbox__tick {
+      /* Override checkmark with a pixel-art horizontal dash */
+      clip-path: none;
+      position: absolute;
+      width: 8px;
+      height: 2px;
+      background: var(--px-fill-color-blank);
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+}
+.px-checkbox.is-indeterminate .px-checkbox__input {
+      filter: none;
+}
+/* Size variants */
+.px-checkbox--large {
+  --px-checkbox-size: 22px;
+  font-size: var(--px-font-size-base);
+}
+.px-checkbox--large .px-checkbox__tick {
+    width: 12px;
+    height: 12px;
+}
+.px-checkbox--large.is-indeterminate .px-checkbox__inner .px-checkbox__tick {
+    width: 10px;
+    height: 2px;
+}
+.px-checkbox--small {
+  --px-checkbox-size: 14px;
+  font-size: var(--px-font-size-small);
+}
+.px-checkbox--small .px-checkbox__input {
+    filter: drop-shadow(2px 2px 0px var(--px-checkbox-shadow-color));
+}
+.px-checkbox--small .px-checkbox__tick {
+    width: 8px;
+    height: 8px;
+}
+.px-checkbox--small.is-checked .px-checkbox__input {
+    filter: drop-shadow(2px 2px 0px var(--px-checkbox-checked-border-color));
+}
+.px-checkbox--small.is-indeterminate .px-checkbox__input {
+    filter: none;
+}
+.px-checkbox--small.is-indeterminate .px-checkbox__inner .px-checkbox__tick {
+    width: 6px;
+    height: 2px;
+}
+/* Hidden native input */
+.px-checkbox__original {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  margin: 0;
+  outline: none;
+}
+.px-checkbox__original:focus-visible ~ .px-checkbox__inner {
+    outline: 2px dashed var(--px-checkbox-checked-color);
+    outline-offset: 2px;
+}
+/* Input wrapper */
+.px-checkbox__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-checkbox-shadow-color)
+  );
+}
+/* The pixel-art checkbox box */
+.px-checkbox__inner {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--px-checkbox-size);
+  height: var(--px-checkbox-size);
+  box-sizing: border-box;
+  background: transparent;
+
+  --px-checkbox-pixel-corners: 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)
+  );
+}
+/* Border layer - pixel shape */
+.px-checkbox__inner::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: var(--px-checkbox-border-color);
+    clip-path: var(--px-checkbox-pixel-corners);
+    z-index: 0;
+}
+/* Fill layer - pixel shape */
+.px-checkbox__inner::after {
+    content: "";
+    position: absolute;
+    inset: 2px;
+    background: var(--px-checkbox-bg-color);
+    clip-path: var(--px-checkbox-pixel-corners);
+    z-index: 0;
+}
+/* Pixel checkmark */
+.px-checkbox__tick {
+  position: relative;
+  z-index: 1;
+  width: 10px;
+  height: 10px;
+  opacity: 0;
+  /* Pixel-art checkmark (✓) via clip-path */
+  clip-path: polygon(
+    15% 50%,
+    35% 70%,
+    85% 20%,
+    85% 40%,
+    35% 90%,
+    15% 70%
+  );
+  background: var(--px-fill-color-blank);
+}
+/* Label */
+.px-checkbox__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-checkbox--primary {
+    --px-checkbox-checked-color: var(--px-color-primary);
+    --px-checkbox-checked-border-color: var(--px-color-primary-dark);
+}
+.px-checkbox--primary.is-checked .px-checkbox__input {
+    filter: drop-shadow(
+      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-primary-dark)
+    );
+}
+.px-checkbox--success {
+    --px-checkbox-checked-color: var(--px-color-success);
+    --px-checkbox-checked-border-color: var(--px-color-success-dark);
+}
+.px-checkbox--success.is-checked .px-checkbox__input {
+    filter: drop-shadow(
+      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-success-dark)
+    );
+}
+.px-checkbox--info {
+    --px-checkbox-checked-color: var(--px-color-info);
+    --px-checkbox-checked-border-color: var(--px-color-info-dark);
+}
+.px-checkbox--info.is-checked .px-checkbox__input {
+    filter: drop-shadow(
+      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-info-dark)
+    );
+}
+.px-checkbox--warning {
+    --px-checkbox-checked-color: var(--px-color-warning);
+    --px-checkbox-checked-border-color: var(--px-color-warning-dark);
+}
+.px-checkbox--warning.is-checked .px-checkbox__input {
+    filter: drop-shadow(
+      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-warning-dark)
+    );
+}
+.px-checkbox--danger {
+    --px-checkbox-checked-color: var(--px-color-danger);
+    --px-checkbox-checked-border-color: var(--px-color-danger-dark);
+}
+.px-checkbox--danger.is-checked .px-checkbox__input {
+    filter: drop-shadow(
+      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-danger-dark)
+    );
+}
+/* Checkbox Group */
+.px-checkbox-group {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  align-items: center;
+}

package/dist/es/theme/Divider.css

@@ -0,0 +1,111 @@
+/* Divider Variables */
+.px-divider {
+  --px-divider-line-color: var(--px-border-color);
+  --px-divider-text-color: var(--px-text-color-regular);
+}
+/* Base Divider – Horizontal */
+.px-divider {
+  display: flex;
+  align-items: center;
+  margin: 16px 0;
+  font-family: var(--px-font-family);
+  font-size: var(--px-font-size-small);
+  color: var(--px-divider-text-color);
+}
+.px-divider::before,
+  .px-divider::after {
+    content: "";
+    flex: 1;
+    height: 2px;
+    background: var(--px-divider-line-color);
+}
+/* Vertical mode */
+.px-divider.is-vertical {
+    display: inline-flex;
+    flex-direction: column;
+    height: 1em;
+    margin: 0 8px;
+    vertical-align: middle;
+}
+.px-divider.is-vertical::before,
+    .px-divider.is-vertical::after {
+      flex: 1;
+      width: 2px;
+      height: auto;
+}
+/* Content text */
+.px-divider__text {
+  padding: 0 12px;
+  white-space: nowrap;
+  line-height: 1;
+}
+/* Content position */
+.px-divider--left::before {
+    flex: 0 0 5%;
+}
+.px-divider--right::after {
+    flex: 0 0 5%;
+}
+/* Border style – dashed (pixel pattern) */
+.px-divider--dashed::before,
+  .px-divider--dashed::after {
+    background: repeating-linear-gradient(
+      to right,
+      var(--px-divider-line-color) 0px,
+      var(--px-divider-line-color) 6px,
+      transparent 6px,
+      transparent 12px
+    );
+}
+.px-divider--dashed.is-vertical::before,
+    .px-divider--dashed.is-vertical::after {
+      background: repeating-linear-gradient(
+        to bottom,
+        var(--px-divider-line-color) 0px,
+        var(--px-divider-line-color) 6px,
+        transparent 6px,
+        transparent 12px
+      );
+}
+/* Border style – dotted (pixel pattern) */
+.px-divider--dotted::before,
+  .px-divider--dotted::after {
+    background: repeating-linear-gradient(
+      to right,
+      var(--px-divider-line-color) 0px,
+      var(--px-divider-line-color) 2px,
+      transparent 2px,
+      transparent 6px
+    );
+}
+.px-divider--dotted.is-vertical::before,
+    .px-divider--dotted.is-vertical::after {
+      background: repeating-linear-gradient(
+        to bottom,
+        var(--px-divider-line-color) 0px,
+        var(--px-divider-line-color) 2px,
+        transparent 2px,
+        transparent 6px
+      );
+}
+/* Type variants */
+.px-divider--primary {
+    --px-divider-line-color: var(--px-color-primary);
+    --px-divider-text-color: var(--px-color-primary);
+}
+.px-divider--success {
+    --px-divider-line-color: var(--px-color-success);
+    --px-divider-text-color: var(--px-color-success);
+}
+.px-divider--info {
+    --px-divider-line-color: var(--px-color-info);
+    --px-divider-text-color: var(--px-color-info);
+}
+.px-divider--warning {
+    --px-divider-line-color: var(--px-color-warning);
+    --px-divider-text-color: var(--px-color-warning);
+}
+.px-divider--danger {
+    --px-divider-line-color: var(--px-color-danger);
+    --px-divider-text-color: var(--px-color-danger);
+}