sakana-element 2.4.2 → 2.5.0

package/dist/theme/Skeleton.css

@@ -1,192 +1 @@
-/* ─── Skeleton Variables ─── */
-.px-skeleton {
-  --px-skeleton-bg-color: var(--px-fill-color-darker, #e0e0e0);
-  --px-skeleton-shimmer-color: var(--px-fill-color-light, #f5f5f5);
-  --px-skeleton-border-color: var(--px-border-color, #c0c0c0);
-  --px-skeleton-shadow-color: var(--px-shadow-color, rgba(0, 0, 0, 0.15));
-
-  /* Inset bevels (sunken look — opposite of Button's raised look) */
-  --px-skeleton-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.3);
-  --px-skeleton-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.12);
-
-  /* Dither overlay color */
-  --px-skeleton-dither-color: rgba(255, 255, 255, 0.15);
-}
-/* ─── Base bone / row — positioned container ─── */
-.px-skeleton__bone,
-.px-skeleton__row {
-  display: block;
-  position: relative;
-  background: transparent;
-
-  /* Pixel drop-shadow traces the pseudo-element shapes */
-  filter: drop-shadow(2px 2px 0 var(--px-skeleton-shadow-color));
-}
-/* Border layer */
-.px-skeleton__bone::before, .px-skeleton__row::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: var(--px-skeleton-border-color);
-    z-index: -1;
-}
-/* Fill layer — inset by border width */
-.px-skeleton__bone::after, .px-skeleton__row::after {
-    content: '';
-    position: absolute;
-    inset: 2px;
-    background: var(--px-skeleton-bg-color);
-    box-shadow:
-      var(--px-skeleton-inset-highlight),
-      var(--px-skeleton-inset-shadow);
-    z-index: -1;
-}
-.px-skeleton__bone {
-  width: 100%;
-  height: 16px;
-}
-/* ─── Clip-paths per variant ─── */
-/* Rectangular / Text — 2px chamfered pixel corners */
-.px-skeleton--rectangular .px-skeleton__bone::before,
-  .px-skeleton--rectangular .px-skeleton__bone::after,
-  .px-skeleton--rectangular .px-skeleton__row::before,
-  .px-skeleton--rectangular .px-skeleton__row::after,
-  .px-skeleton--text .px-skeleton__bone::before,
-  .px-skeleton--text .px-skeleton__bone::after,
-  .px-skeleton--text .px-skeleton__row::before,
-  .px-skeleton--text .px-skeleton__row::after {
-    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)
-    );
-}
-/* Rounded — 4px staircase corners */
-.px-skeleton--rounded .px-skeleton__bone::before,
-  .px-skeleton--rounded .px-skeleton__bone::after {
-    clip-path: polygon(
-      0 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0,
-      calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px,
-      100% calc(100% - 4px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px), calc(100% - 4px) 100%,
-      4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px)
-    );
-}
-/* Circular — 4-step staircase pixel circle (matching Avatar/Button) */
-.px-skeleton--circular .px-skeleton__bone::before,
-  .px-skeleton--circular .px-skeleton__bone::after {
-    clip-path: polygon(
-      0 10px, 2px 10px, 2px 6px, 4px 6px, 4px 4px, 6px 4px, 6px 2px, 10px 2px, 10px 0,
-      calc(100% - 10px) 0, calc(100% - 10px) 2px, calc(100% - 6px) 2px, calc(100% - 6px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 6px, calc(100% - 2px) 6px, calc(100% - 2px) 10px, 100% 10px,
-      100% calc(100% - 10px), calc(100% - 2px) calc(100% - 10px), calc(100% - 2px) calc(100% - 6px), calc(100% - 4px) calc(100% - 6px), calc(100% - 4px) calc(100% - 4px), calc(100% - 6px) calc(100% - 4px), calc(100% - 6px) calc(100% - 2px), calc(100% - 10px) calc(100% - 2px), calc(100% - 10px) 100%,
-      10px 100%, 10px calc(100% - 2px), 6px calc(100% - 2px), 6px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 6px), 2px calc(100% - 6px), 2px calc(100% - 10px), 0 calc(100% - 10px)
-    );
-}
-/* ─── Animation: Shimmer — Scanline sweep ─── */
-@keyframes px-skeleton-shimmer {
-0%   { background-position: -30% 0, 0 0;
-}
-100% { background-position: 130% 0, 0 0;
-}
-}
-.px-skeleton.is-animated.is-animation-shimmer .px-skeleton__bone::after,
-  .px-skeleton.is-animated.is-animation-shimmer .px-skeleton__row::after {
-    background:
-      /* Narrow hard-edged highlight band — scanline-like */
-      linear-gradient(
-        90deg,
-        transparent 0%,
-        transparent 40%,
-        var(--px-skeleton-shimmer-color) 45%,
-        var(--px-skeleton-shimmer-color) 55%,
-        transparent 60%,
-        transparent 100%
-      ),
-      var(--px-skeleton-bg-color);
-    background-size: 200% 100%, 100% 100%;
-    animation: px-skeleton-shimmer 1.5s steps(12, jump-none) infinite;
-}
-/* ─── Animation: Pulse — Two-frame blink ─── */
-@keyframes px-skeleton-pulse {
-0%, 100% { opacity: 1;
-}
-50%      { opacity: 0.5;
-}
-}
-.px-skeleton.is-animated.is-animation-pulse .px-skeleton__bone::after,
-  .px-skeleton.is-animated.is-animation-pulse .px-skeleton__row::after {
-    animation: px-skeleton-pulse 1.2s steps(2, jump-none) infinite;
-}
-/* ─── Animation: Dither — Checkerboard dissolve ─── */
-@keyframes px-skeleton-dither {
-0%   { background-position: 0 0, 0 0;
-}
-25%  { background-position: 2px 0, 0 0;
-}
-50%  { background-position: 2px 2px, 0 0;
-}
-75%  { background-position: 0 2px, 0 0;
-}
-100% { background-position: 0 0, 0 0;
-}
-}
-.px-skeleton.is-animated.is-animation-dither .px-skeleton__bone::after,
-  .px-skeleton.is-animated.is-animation-dither .px-skeleton__row::after {
-    background:
-      /* 2×2 pixel checkerboard dither pattern */
-      repeating-conic-gradient(
-        var(--px-skeleton-dither-color) 0% 25%,
-        transparent 0% 50%
-      ) 0 0 / 4px 4px,
-      var(--px-skeleton-bg-color);
-    animation: px-skeleton-dither 1.6s steps(4, jump-none) infinite;
-}
-/* ─── Text variant — thin horizontal bars ─── */
-.px-skeleton--text .px-skeleton__bone {
-    height: 12px;
-}
-.px-skeleton--text .px-skeleton__row {
-    height: 12px;
-    margin-bottom: 8px;
-}
-.px-skeleton--text .px-skeleton__row:last-child {
-      margin-bottom: 0;
-}
-/* ─── Circular variant ─── */
-.px-skeleton--circular .px-skeleton__bone {
-    width: 40px;
-    height: 40px;
-}
-/* ─── Size: Large ─── */
-.px-skeleton--large .px-skeleton__bone {
-    height: 24px;
-}
-.px-skeleton--large .px-skeleton__row {
-    height: 18px;
-}
-.px-skeleton--large.px-skeleton--circular .px-skeleton__bone {
-    width: 56px;
-    height: 56px;
-}
-/* ─── Size: Small ─── */
-.px-skeleton--small .px-skeleton__bone {
-    height: 12px;
-}
-.px-skeleton--small .px-skeleton__row {
-    height: 10px;
-    margin-bottom: 6px;
-}
-.px-skeleton--small.px-skeleton--circular .px-skeleton__bone {
-    width: 28px;
-    height: 28px;
-}
-/* ─── Dark mode ─── */
-.px-dark .px-skeleton {
-  --px-skeleton-bg-color: var(--px-fill-color-darker, #3a3a3a);
-  --px-skeleton-shimmer-color: var(--px-fill-color, #4a4a4a);
-  --px-skeleton-border-color: var(--px-border-color, #555);
-  --px-skeleton-shadow-color: rgba(0, 0, 0, 0.3);
-  --px-skeleton-inset-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.08);
-  --px-skeleton-inset-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.2);
-  --px-skeleton-dither-color: rgba(255, 255, 255, 0.08);
-}
+.px-skeleton{--px-skeleton-bg-color:var(--px-fill-color-darker,#e0e0e0);--px-skeleton-shimmer-color:var(--px-fill-color-light,#f5f5f5);--px-skeleton-border-color:var(--px-border-color,silver);--px-skeleton-shadow-color:var(--px-shadow-color,#00000026);--px-skeleton-inset-highlight:inset 2px 2px 0 0 #ffffff4d;--px-skeleton-inset-shadow:inset -2px -2px 0 0 #0000001f;--px-skeleton-dither-color:#ffffff26}.px-skeleton__bone,.px-skeleton__row{filter:drop-shadow(2px 2px 0 var(--px-skeleton-shadow-color));background:0 0;display:block;position:relative}.px-skeleton__bone:before,.px-skeleton__row:before{content:"";background:var(--px-skeleton-border-color);z-index:-1;position:absolute;inset:0}.px-skeleton__bone:after,.px-skeleton__row:after{content:"";background:var(--px-skeleton-bg-color);box-shadow:var(--px-skeleton-inset-highlight), var(--px-skeleton-inset-shadow);z-index:-1;position:absolute;inset:2px}.px-skeleton__bone{width:100%;height:16px}.px-skeleton--rectangular .px-skeleton__bone:before,.px-skeleton--rectangular .px-skeleton__bone:after,.px-skeleton--rectangular .px-skeleton__row:before,.px-skeleton--rectangular .px-skeleton__row:after,.px-skeleton--text .px-skeleton__bone:before,.px-skeleton--text .px-skeleton__bone:after,.px-skeleton--text .px-skeleton__row:before,.px-skeleton--text .px-skeleton__row:after{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-skeleton--rounded .px-skeleton__bone:before,.px-skeleton--rounded .px-skeleton__bone:after{clip-path:polygon(0 4px,2px 4px,2px 2px,4px 2px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 2px,calc(100% - 2px) 2px,calc(100% - 2px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 2px) calc(100% - 4px),calc(100% - 2px) calc(100% - 2px),calc(100% - 4px) calc(100% - 2px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 2px),2px calc(100% - 2px),2px calc(100% - 4px),0 calc(100% - 4px))}.px-skeleton--circular .px-skeleton__bone:before,.px-skeleton--circular .px-skeleton__bone:after{clip-path:polygon(0 10px,2px 10px,2px 6px,4px 6px,4px 4px,6px 4px,6px 2px,10px 2px,10px 0,calc(100% - 10px) 0,calc(100% - 10px) 2px,calc(100% - 6px) 2px,calc(100% - 6px) 4px,calc(100% - 4px) 4px,calc(100% - 4px) 6px,calc(100% - 2px) 6px,calc(100% - 2px) 10px,100% 10px,100% calc(100% - 10px),calc(100% - 2px) calc(100% - 10px),calc(100% - 2px) calc(100% - 6px),calc(100% - 4px) calc(100% - 6px),calc(100% - 4px) calc(100% - 4px),calc(100% - 6px) calc(100% - 4px),calc(100% - 6px) calc(100% - 2px),calc(100% - 10px) calc(100% - 2px),calc(100% - 10px) 100%,10px 100%,10px calc(100% - 2px),6px calc(100% - 2px),6px calc(100% - 4px),4px calc(100% - 4px),4px calc(100% - 6px),2px calc(100% - 6px),2px calc(100% - 10px),0 calc(100% - 10px))}@keyframes px-skeleton-shimmer{0%{background-position:-30% 0,0 0}to{background-position:130% 0,0 0}}.px-skeleton.is-animated.is-animation-shimmer .px-skeleton__bone:after,.px-skeleton.is-animated.is-animation-shimmer .px-skeleton__row:after{background: linear-gradient(90deg, transparent 0%, transparent 40%, var(--px-skeleton-shimmer-color) 45%, var(--px-skeleton-shimmer-color) 55%, transparent 60%, transparent 100%), var(--px-skeleton-bg-color);background-size:200% 100%,100% 100%;animation:1.5s steps(12,jump-none) infinite px-skeleton-shimmer}@keyframes px-skeleton-pulse{0%,to{opacity:1}50%{opacity:.5}}.px-skeleton.is-animated.is-animation-pulse .px-skeleton__bone:after,.px-skeleton.is-animated.is-animation-pulse .px-skeleton__row:after{animation:1.2s steps(2,jump-none) infinite px-skeleton-pulse}@keyframes px-skeleton-dither{0%{background-position:0 0,0 0}25%{background-position:2px 0,0 0}50%{background-position:2px 2px,0 0}75%{background-position:0 2px,0 0}to{background-position:0 0,0 0}}.px-skeleton.is-animated.is-animation-dither .px-skeleton__bone:after,.px-skeleton.is-animated.is-animation-dither .px-skeleton__row:after{background: repeating-conic-gradient(var(--px-skeleton-dither-color) 0% 25%, transparent 0% 50%) 0 0 / 4px 4px, var(--px-skeleton-bg-color);animation:1.6s steps(4,jump-none) infinite px-skeleton-dither}.px-skeleton--text .px-skeleton__bone{height:12px}.px-skeleton--text .px-skeleton__row{height:12px;margin-bottom:8px}.px-skeleton--text .px-skeleton__row:last-child{margin-bottom:0}.px-skeleton--circular .px-skeleton__bone{width:40px;height:40px}.px-skeleton--large .px-skeleton__bone{height:24px}.px-skeleton--large .px-skeleton__row{height:18px}.px-skeleton--large.px-skeleton--circular .px-skeleton__bone{width:56px;height:56px}.px-skeleton--small .px-skeleton__bone{height:12px}.px-skeleton--small .px-skeleton__row{height:10px;margin-bottom:6px}.px-skeleton--small.px-skeleton--circular .px-skeleton__bone{width:28px;height:28px}.px-dark .px-skeleton{--px-skeleton-bg-color:var(--px-fill-color-darker,#3a3a3a);--px-skeleton-shimmer-color:var(--px-fill-color,#4a4a4a);--px-skeleton-border-color:var(--px-border-color,#555);--px-skeleton-shadow-color:#0000004d;--px-skeleton-inset-highlight:inset 2px 2px 0 0 #ffffff14;--px-skeleton-inset-shadow:inset -2px -2px 0 0 #0003;--px-skeleton-dither-color:#ffffff14}

package/dist/theme/Switch.css

@@ -1,323 +1 @@
-/* Switch Variables */
-.px-switch {
-  --px-switch-on-color: var(--px-color-primary);
-  --px-switch-off-color: var(--px-fill-color-darker);
-  --px-switch-on-border-color: var(--px-color-primary-dark);
-  --px-switch-off-border-color: var(--px-border-color);
-  --px-switch-shadow-color: var(--px-shadow-color);
-  --px-switch-handle-color: var(--px-color-white);
-
-  /* Track groove (sunken bevel) */
-  --px-switch-inset-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.12);
-  --px-switch-inset-highlight: inset -2px -2px 0 0 rgba(255, 255, 255, 0.1);
-
-  /* Handle (raised bevel) */
-  --px-switch-handle-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.3);
-  --px-switch-handle-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.12);
-}
-/* Base Switch Styles - Pixel Toggle */
-.px-switch {
-  display: inline-flex;
-  align-items: center;
-  font-size: var(--px-font-size-base);
-  font-family: var(--px-font-family);
-  line-height: 20px;
-  height: 32px;
-}
-.px-switch .px-switch__input {
-    position: absolute;
-    width: 0;
-    height: 0;
-    opacity: 0;
-    margin: 0;
-}
-.px-switch .px-switch__input:focus-visible ~ .px-switch__core {
-      outline: 2px dashed var(--px-switch-on-color);
-      outline-offset: 2px;
-}
-/* Disabled state */
-.px-switch.is-disabled {
-    opacity: 0.5;
-}
-.px-switch.is-disabled .px-switch__core {
-      cursor: not-allowed;
-}
-/* Checked state */
-.px-switch.is-checked .px-switch__core::before {
-        background: var(--px-switch-on-border-color);
-}
-.px-switch.is-checked .px-switch__core::after {
-        background: var(--px-switch-on-color);
-        box-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.06),
-                    inset -2px -2px 0 0 rgba(255, 255, 255, 0.15);
-}
-.px-switch.is-checked .px-switch__core {
-
-      filter: drop-shadow(
-        var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-switch-on-border-color)
-      );
-}
-.px-switch.is-checked .px-switch__core .px-switch__core-action {
-        left: calc(100% - 20px);
-}
-.px-switch.is-checked .px-switch__core .px-switch__core-inner {
-        padding: 0 22px 0 6px;
-}
-/* Size variants */
-.px-switch--large {
-  font-size: var(--px-font-size-base);
-  line-height: 24px;
-  height: 40px;
-}
-.px-switch--large .px-switch__core {
-    min-width: 60px;
-    height: 32px;
-}
-.px-switch--large .px-switch__core .px-switch__core-action {
-      width: 24px;
-      height: 24px;
-}
-.px-switch--large.is-checked .px-switch__core .px-switch__core-action {
-    left: calc(100% - 28px);
-}
-.px-switch--small {
-  font-size: var(--px-font-size-small);
-  line-height: 16px;
-  height: 24px;
-}
-.px-switch--small .px-switch__core {
-    min-width: 40px;
-    height: 20px;
-    filter: drop-shadow(2px 2px 0px var(--px-switch-shadow-color));
-}
-.px-switch--small .px-switch__core .px-switch__core-action {
-      width: 14px;
-      height: 14px;
-}
-.px-switch--small.is-checked .px-switch__core {
-    filter: drop-shadow(2px 2px 0px var(--px-switch-on-border-color));
-}
-.px-switch--small.is-checked .px-switch__core .px-switch__core-action {
-      left: calc(100% - 16px);
-}
-/* Core element - The actual toggle with pixel style */
-.px-switch__core {
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  position: relative;
-  height: 26px;
-  min-width: 50px;
-  box-sizing: border-box;
-  outline: none;
-  background: transparent;
-  border: none;
-
-  /* Pixel shadow via drop-shadow */
-  filter: drop-shadow(
-    var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-switch-shadow-color)
-  );
-
-  /* No smooth transitions */
-  transition: none;
-}
-/* Border layer — pixel shape */
-.px-switch__core::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background: var(--px-switch-off-border-color);
-    clip-path: polygon(
-      0 4px,
-      2px 4px,
-      2px 2px,
-      4px 2px,
-      4px 0,
-      calc(100% - 4px) 0,
-      calc(100% - 4px) 2px,
-      calc(100% - 2px) 2px,
-      calc(100% - 2px) 4px,
-      100% 4px,
-      100% calc(100% - 4px),
-      calc(100% - 2px) calc(100% - 4px),
-      calc(100% - 2px) calc(100% - 2px),
-      calc(100% - 4px) calc(100% - 2px),
-      calc(100% - 4px) 100%,
-      4px 100%,
-      4px calc(100% - 2px),
-      2px calc(100% - 2px),
-      2px calc(100% - 4px),
-      0 calc(100% - 4px)
-    );
-    z-index: 0;
-}
-/* Fill layer — pixel shape with sunken groove bevel */
-.px-switch__core::after {
-    content: "";
-    position: absolute;
-    inset: 2px;
-    background: var(--px-switch-off-color);
-    clip-path: polygon(
-      0 4px,
-      2px 4px,
-      2px 2px,
-      4px 2px,
-      4px 0,
-      calc(100% - 4px) 0,
-      calc(100% - 4px) 2px,
-      calc(100% - 2px) 2px,
-      calc(100% - 2px) 4px,
-      100% 4px,
-      100% calc(100% - 4px),
-      calc(100% - 2px) calc(100% - 4px),
-      calc(100% - 2px) calc(100% - 2px),
-      calc(100% - 4px) calc(100% - 2px),
-      calc(100% - 4px) 100%,
-      4px 100%,
-      4px calc(100% - 2px),
-      2px calc(100% - 2px),
-      2px calc(100% - 4px),
-      0 calc(100% - 4px)
-    );
-    box-shadow: var(--px-switch-inset-shadow), var(--px-switch-inset-highlight);
-    z-index: 0;
-}
-/* The toggle handle - pixel square */
-.px-switch__core .px-switch__core-action {
-    position: absolute;
-    left: 4px;
-    width: 18px;
-    height: 18px;
-    background: transparent;
-    transition: left 0.15s steps(3);
-    z-index: 2;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-/* Handle border layer */
-.px-switch__core .px-switch__core-action::before {
-      content: "";
-      position: absolute;
-      inset: 0;
-      background: var(--px-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)
-      );
-}
-/* Handle fill layer — raised bevel like a game D-pad button */
-.px-switch__core .px-switch__core-action::after {
-      content: "";
-      position: absolute;
-      inset: 2px;
-      background: var(--px-switch-handle-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-switch-handle-highlight), var(--px-switch-handle-shadow);
-}
-/* Icon inside thumb */
-.px-switch__core .px-switch__core-action .px-switch__icon {
-    position: relative;
-    z-index: 3;
-    width: 12px !important;
-    height: 12px !important;
-}
-/* Inner text container */
-.px-switch__core .px-switch__core-inner {
-    width: 100%;
-    height: 16px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    overflow: hidden;
-    padding: 0 6px 0 22px;
-    z-index: 1;
-    position: relative;
-}
-.px-switch__core .px-switch__core-inner .px-switch__core-inner-text {
-      font-size: var(--px-font-size-extra-small);
-      font-family: var(--px-font-family);
-      color: var(--px-color-white);
-      user-select: none;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      text-transform: uppercase;
-      letter-spacing: 1px;
-}
-/* Type variants */
-.px-switch--primary {
-    --px-switch-on-color: var(--px-color-primary);
-    --px-switch-on-border-color: var(--px-color-primary-dark);
-}
-.px-switch--primary.is-checked .px-switch__core {
-    filter: drop-shadow(
-      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-primary-dark)
-    );
-}
-.px-switch--success {
-    --px-switch-on-color: var(--px-color-success);
-    --px-switch-on-border-color: var(--px-color-success-dark);
-}
-.px-switch--success.is-checked .px-switch__core {
-    filter: drop-shadow(
-      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-success-dark)
-    );
-}
-.px-switch--info {
-    --px-switch-on-color: var(--px-color-info);
-    --px-switch-on-border-color: var(--px-color-info-dark);
-}
-.px-switch--info.is-checked .px-switch__core {
-    filter: drop-shadow(
-      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-info-dark)
-    );
-}
-.px-switch--warning {
-    --px-switch-on-color: var(--px-color-warning);
-    --px-switch-on-border-color: var(--px-color-warning-dark);
-}
-.px-switch--warning.is-checked .px-switch__core {
-    filter: drop-shadow(
-      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-warning-dark)
-    );
-}
-.px-switch--danger {
-    --px-switch-on-color: var(--px-color-danger);
-    --px-switch-on-border-color: var(--px-color-danger-dark);
-}
-.px-switch--danger.is-checked .px-switch__core {
-    filter: drop-shadow(
-      var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-danger-dark)
-    );
-}
-/* Dark mode bevel adjustments */
-html.dark .px-switch {
-  --px-switch-inset-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.25);
-  --px-switch-inset-highlight: inset -2px -2px 0 0 rgba(255, 255, 255, 0.05);
-  --px-switch-handle-highlight: inset 2px 2px 0 0 rgba(255, 255, 255, 0.15);
-  --px-switch-handle-shadow: inset -2px -2px 0 0 rgba(0, 0, 0, 0.2);
-}
+.px-switch{--px-switch-on-color:var(--px-color-primary);--px-switch-off-color:var(--px-fill-color-darker);--px-switch-on-border-color:var(--px-color-primary-dark);--px-switch-off-border-color:var(--px-border-color);--px-switch-shadow-color:var(--px-shadow-color);--px-switch-handle-color:var(--px-color-white);--px-switch-inset-shadow:inset 2px 2px 0 0 #0000001f;--px-switch-inset-highlight:inset -2px -2px 0 0 #ffffff1a;--px-switch-handle-highlight:inset 2px 2px 0 0 #ffffff4d;--px-switch-handle-shadow:inset -2px -2px 0 0 #0000001f;font-size:var(--px-font-size-base);font-family:var(--px-font-family);align-items:center;height:32px;line-height:20px;display:inline-flex}.px-switch .px-switch__input{opacity:0;width:0;height:0;margin:0;position:absolute}.px-switch .px-switch__input:focus-visible~.px-switch__core{outline:2px dashed var(--px-switch-on-color);outline-offset:2px}.px-switch.is-disabled{opacity:.5}.px-switch.is-disabled .px-switch__core{cursor:not-allowed}.px-switch.is-checked .px-switch__core:before{background:var(--px-switch-on-border-color)}.px-switch.is-checked .px-switch__core:after{background:var(--px-switch-on-color);box-shadow:inset 2px 2px #0000000f,inset -2px -2px #ffffff26}.px-switch.is-checked .px-switch__core{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-switch-on-border-color))}.px-switch.is-checked .px-switch__core .px-switch__core-action{left:calc(100% - 20px)}.px-switch.is-checked .px-switch__core .px-switch__core-inner{padding:0 22px 0 6px}.px-switch--large{font-size:var(--px-font-size-base);height:40px;line-height:24px}.px-switch--large .px-switch__core{min-width:60px;height:32px}.px-switch--large .px-switch__core .px-switch__core-action{width:24px;height:24px}.px-switch--large.is-checked .px-switch__core .px-switch__core-action{left:calc(100% - 28px)}.px-switch--small{font-size:var(--px-font-size-small);height:24px;line-height:16px}.px-switch--small .px-switch__core{min-width:40px;height:20px;filter:drop-shadow(2px 2px 0px var(--px-switch-shadow-color))}.px-switch--small .px-switch__core .px-switch__core-action{width:14px;height:14px}.px-switch--small.is-checked .px-switch__core{filter:drop-shadow(2px 2px 0px var(--px-switch-on-border-color))}.px-switch--small.is-checked .px-switch__core .px-switch__core-action{left:calc(100% - 16px)}.px-switch__core{cursor:pointer;box-sizing:border-box;min-width:50px;height:26px;filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-switch-shadow-color));background:0 0;border:none;outline:none;align-items:center;transition:none;display:inline-flex;position:relative}.px-switch__core:before{content:"";background:var(--px-switch-off-border-color);clip-path:polygon(0 4px,2px 4px,2px 2px,4px 2px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 2px,calc(100% - 2px) 2px,calc(100% - 2px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 2px) calc(100% - 4px),calc(100% - 2px) calc(100% - 2px),calc(100% - 4px) calc(100% - 2px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 2px),2px calc(100% - 2px),2px calc(100% - 4px),0 calc(100% - 4px));z-index:0;position:absolute;inset:0}.px-switch__core:after{content:"";background:var(--px-switch-off-color);clip-path:polygon(0 4px,2px 4px,2px 2px,4px 2px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 2px,calc(100% - 2px) 2px,calc(100% - 2px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 2px) calc(100% - 4px),calc(100% - 2px) calc(100% - 2px),calc(100% - 4px) calc(100% - 2px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 2px),2px calc(100% - 2px),2px calc(100% - 4px),0 calc(100% - 4px));box-shadow:var(--px-switch-inset-shadow), var(--px-switch-inset-highlight);z-index:0;position:absolute;inset:2px}.px-switch__core .px-switch__core-action{z-index:2;background:0 0;justify-content:center;align-items:center;width:18px;height:18px;transition:left .15s steps(3,end);display:flex;position:absolute;left:4px}.px-switch__core .px-switch__core-action:before{content:"";background:var(--px-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));position:absolute;inset:0}.px-switch__core .px-switch__core-action:after{content:"";background:var(--px-switch-handle-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-switch-handle-highlight), var(--px-switch-handle-shadow);position:absolute;inset:2px}.px-switch__core .px-switch__core-action .px-switch__icon{z-index:3;position:relative;width:12px!important;height:12px!important}.px-switch__core .px-switch__core-inner{z-index:1;justify-content:center;align-items:center;width:100%;height:16px;padding:0 6px 0 22px;display:flex;position:relative;overflow:hidden}.px-switch__core .px-switch__core-inner .px-switch__core-inner-text{font-size:var(--px-font-size-extra-small);font-family:var(--px-font-family);color:var(--px-color-white);-webkit-user-select:none;user-select:none;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase;letter-spacing:1px;overflow:hidden}.px-switch--primary{--px-switch-on-color:var(--px-color-primary);--px-switch-on-border-color:var(--px-color-primary-dark)}.px-switch--primary.is-checked .px-switch__core{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-primary-dark))}.px-switch--success{--px-switch-on-color:var(--px-color-success);--px-switch-on-border-color:var(--px-color-success-dark)}.px-switch--success.is-checked .px-switch__core{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-success-dark))}.px-switch--info{--px-switch-on-color:var(--px-color-info);--px-switch-on-border-color:var(--px-color-info-dark)}.px-switch--info.is-checked .px-switch__core{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-info-dark))}.px-switch--warning{--px-switch-on-color:var(--px-color-warning);--px-switch-on-border-color:var(--px-color-warning-dark)}.px-switch--warning.is-checked .px-switch__core{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-warning-dark))}.px-switch--danger{--px-switch-on-color:var(--px-color-danger);--px-switch-on-border-color:var(--px-color-danger-dark)}.px-switch--danger.is-checked .px-switch__core{filter:drop-shadow(var(--px-shadow-offset-x) var(--px-shadow-offset-y) 0px var(--px-color-danger-dark))}html.dark .px-switch{--px-switch-inset-shadow:inset 2px 2px 0 0 #00000040;--px-switch-inset-highlight:inset -2px -2px 0 0 #ffffff0d;--px-switch-handle-highlight:inset 2px 2px 0 0 #ffffff26;--px-switch-handle-shadow:inset -2px -2px 0 0 #0003}