sakana-element 2.2.0 → 2.3.0

package/dist/es/theme/Radio.css

@@ -0,0 +1,426 @@
+/* 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);
+}
+/* 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 */
+.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)
+      );
+}
+/* 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 circle — octagonal shape */
+.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-art octagon clip path */
+  --px-radio-pixel-shape: polygon(
+    30% 0%,
+    70% 0%,
+    100% 30%,
+    100% 70%,
+    70% 100%,
+    30% 100%,
+    0% 70%,
+    0% 30%
+  );
+}
+/* Border layer – pixel octagon */
+.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 octagon */
+.px-radio__inner::after {
+    content: "";
+    position: absolute;
+    inset: 2px;
+    background: var(--px-radio-bg-color);
+    clip-path: var(--px-radio-pixel-shape);
+    z-index: 0;
+}
+/* Pixel dot indicator */
+.px-radio__dot {
+  position: relative;
+  z-index: 1;
+  width: 6px;
+  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%
+  );
+}
+/* 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)
+    );
+}
+/* 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);
+}
+/* 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 */
+.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)
+      );
+}
+/* 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 circle — octagonal shape */
+.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-art octagon clip path */
+  --px-radio-pixel-shape: polygon(
+    30% 0%,
+    70% 0%,
+    100% 30%,
+    100% 70%,
+    70% 100%,
+    30% 100%,
+    0% 70%,
+    0% 30%
+  );
+}
+/* Border layer – pixel octagon */
+.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 octagon */
+.px-radio__inner::after {
+    content: "";
+    position: absolute;
+    inset: 2px;
+    background: var(--px-radio-bg-color);
+    clip-path: var(--px-radio-pixel-shape);
+    z-index: 0;
+}
+/* Pixel dot indicator */
+.px-radio__dot {
+  position: relative;
+  z-index: 1;
+  width: 6px;
+  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%
+  );
+}
+/* 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)
+    );
+}
+/* Radio Group */
+.px-radio-group {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  align-items: center;
+}