sveltekit-ui 1.1.15 → 1.1.17

package/dist/Components/Button/index.svelte

@@ -1,721 +0,0 @@
-<script>
-  import LoadingWheel from "../LoadingWheel/index.svelte"
-  import SuccessCheck from "../SuccessCheck/index.svelte"
-  import ErrorX from "../ErrorX/index.svelte"
-  import Icon from "../Icon/index.svelte"
-
-  let { manager, content } = $props()
-</script>
-
-<svelte:window onpointerup={(e) => manager?.pointer_up(e)} />
-
-{#if !manager}
-  Error
-{:else}
-  <div
-    style="--ml: {manager?.ml}rem; --mr: {manager?.mr}rem; --mt: {manager?.mt}rem; --mb: {manager?.mb}rem; --br: {manager?.border_radius}rem; --br_icon: {manager?.is_pill
-      ? 50
-      : manager?.border_radius - manager?.pt}rem;"
-    class="container"
-  >
-    <button
-      id={`button_${manager?.id}`}
-      style="
-    --min_width: {manager?.min_width ? manager?.min_width + 'rem' : 0};
-    --base_width: {manager?.fixed_width ? manager?.fixed_width + 'rem' : '100%'};
-    --min_height: {manager?.min_height}rem; 
-    --pl:{manager?.pl}rem; 
-    --pr:{manager?.pr}rem; 
-    --pt:{manager?.pt}rem; 
-    --pb:{manager?.pb}rem;
-    --br:{manager?.border_radius}rem;
-    --text_align: {manager?.text_align};
-    --gradient_turn: {manager?.gradient_turn}turn;
-    --color: {manager?.color};
-    --border_color: {manager?.border_color};
-    --gradient_to_color: {manager?.gradient_to_color};
-    --contrast_color: {manager?.contrast_color};
-    font-weight: {manager?.font_weight}; 
-    font-size: {manager?.font_size}rem;
-    line-height: {manager?.line_height};
-    "
-      class="base"
-      class:is_no_wrap={manager?.is_no_wrap}
-      class:is_word_break_all={manager?.is_word_break_all}
-      class:text_align_center={manager?.text_align === "center"}
-      class:cursor_move={manager?.cursor === "move"}
-      class:is_compressed={manager?.is_compressed}
-      class:is_pill={manager?.is_pill}
-      class:is_uniform={manager?.is_uniform}
-      class:primary={manager?.type == "primary" && !manager?.selected_type}
-      class:primary_simulate_active={manager?.type == "primary" &&
-        !manager?.selected_type &&
-        manager?.is_simulated_active}
-      class:primary_selected={manager?.type == "primary" && manager?.selected_type == "selected"}
-      class:primary_selected_simulate_active={manager?.type == "primary" &&
-        !manager?.selected_type &&
-        manager?.selected_type == "selected"}
-      class:primary_half_selected={manager?.type == "primary" && manager?.selected_type == "half_selected"}
-      class:primary_half_selected_simulate_active={manager?.type == "primary" &&
-        !manager?.selected_type &&
-        manager?.selected_type == "half_selected"}
-      class:outlined={manager?.type == "outlined" && !manager?.selected_type}
-      class:outlined_simulate_active={manager?.type == "outlined" &&
-        !manager?.selected_type &&
-        manager?.is_simulated_active}
-      class:outlined_selected={manager?.type == "outlined" && manager?.selected_type == "selected"}
-      class:outlined_selected_simulate_active={manager?.type == "outlined" &&
-        !manager?.selected_type &&
-        manager?.selected_type == "selected"}
-      class:outlined_half_selected={manager?.type == "outlined" && manager?.selected_type == "half_selected"}
-      class:outlined_half_selected_simulate_active={manager?.type == "outlined" &&
-        !manager?.selected_type &&
-        manager?.selected_type == "half_selected"}
-      class:soft={manager?.type == "soft" && !manager?.selected_type}
-      class:soft_simulate_active={manager?.type == "soft" && !manager?.selected_type && manager?.is_simulated_active}
-      class:soft_selected={manager?.type == "soft" && manager?.selected_type == "selected"}
-      class:soft_selected_simulate_active={manager?.type == "soft" &&
-        !manager?.selected_type &&
-        manager?.selected_type == "selected"}
-      class:soft_half_selected={manager?.type == "soft" && manager?.selected_type == "half_selected"}
-      class:soft_half_selected_simulate_active={manager?.type == "soft" &&
-        !manager?.selected_type &&
-        manager?.selected_type == "half_selected"}
-      class:plain={manager?.type == "plain" && !manager?.selected_type}
-      class:plain_simulate_active={manager?.type == "plain" && !manager?.selected_type && manager?.is_simulated_active}
-      class:plain_selected={manager?.type == "plain" && manager?.selected_type == "selected"}
-      class:plain_selected_simulate_active={manager?.type == "plain" &&
-        !manager?.selected_type &&
-        manager?.selected_type == "selected"}
-      class:plain_half_selected={manager?.type == "plain" && manager?.selected_type == "half_selected"}
-      class:plain_half_selected_simulate_active={manager?.type == "plain" &&
-        !manager?.selected_type &&
-        manager?.selected_type == "half_selected"}
-      class:border={!!manager?.border_color}
-      popovertarget={manager?.popover_target}
-      tabindex={manager?.tabindex}
-      disabled={manager?.is_disabled || manager?.is_loading || manager?.is_success || manager?.is_error}
-      onclick={(e) => manager?.handle_click(e)}
-      onpointerdown={(e) => manager?.pointer_down(e)}
-      onpointerenter={(e) => manager?.pointer_enter(e)}
-      onpointerleave={(e) => manager?.pointer_leave(e)}
-      aria-label={manager?.aria_label}
-    >
-      {#if manager?.support_icon && manager?.icon_pos == "left" && !manager?.is_uniform}
-        <div
-          class="icon_spacer"
-          style="--room_for_icon:{manager?.min_height > 0
-            ? manager?.min_height - manager?.pt * 2
-            : manager?.icon_size + manager?.pt * 2}rem; --icon_size: {manager?.icon_size + manager?.pt * 2}rem;"
-        ></div>
-      {/if}
-      {#if content}
-        {@render content()}
-      {:else if manager?.text != null}
-        {manager?.text}
-      {/if}
-      {#if manager?.support_icon}
-        <div
-          class="supporting_icon"
-          class:supporting_icon_left={manager?.icon_pos == "left" && !manager?.is_uniform}
-          class:supporting_icon_right={manager?.icon_pos == "right" && !manager?.is_uniform}
-          style="margin-left: {manager?.icon_ml}rem; margin-right: {manager?.icon_mr}rem; --is_icon_bg_tint: {manager?.is_icon_bg_tint
-            ? 'var(--tint2-t)'
-            : '#00000000'}; --h: {manager?.min_height > 0
-            ? manager?.min_height - 2 * manager?.pt
-            : manager?.icon_size}rem;"
-        >
-          {#if manager?.is_loading}
-            <div class="load">
-              <LoadingWheel
-                color="color-mix(in oklab, {manager?.color}, var(--g{manager?.type == 'primary' ? 20 : 8}-t) 93%)"
-                sw={0.2}
-              />
-            </div>
-          {:else if manager?.is_success}
-            <div class="icon">
-              <SuccessCheck
-                sw={35}
-                color="oklch(var(--l{manager?.type == 'primary' ? 20 : 8}-t) var(--c24) var(--h9))"
-              />
-            </div>
-          {:else if manager?.is_error}
-            <div class="icon">
-              <ErrorX sw={50} color="oklch(var(--l{manager?.type == 'primary' ? 20 : 8}-t) var(--c24) var(--h2))" />
-            </div>
-          {:else}
-            <Icon manager={manager?.icon_manager} />
-          {/if}
-        </div>
-        {#if manager?.icon_pos !== "left"}
-          <div
-            class="icon_spacer"
-            style="--room_for_icon:{manager?.min_height > 0
-              ? manager?.min_height - manager?.pt * 2
-              : manager?.icon_size + manager?.pt * 2}rem; --icon_size: {manager?.icon_size + manager?.pt * 2}rem;"
-          ></div>
-        {/if}
-      {:else if manager?.is_loading}
-        <div class="load">
-          <LoadingWheel
-            color="color-mix(in oklab, {manager?.color}, var(--g{manager?.type == 'primary' ? 20 : 8}-t) 93%)"
-            sw={0.2}
-          />
-        </div>
-      {:else if manager?.is_success}
-        <div class="icon">
-          <SuccessCheck sw={50} color="oklch(var(--l{manager?.type == 'primary' ? 20 : 8}-t) var(--c24) var(--h9))" />
-        </div>
-      {:else if manager?.is_error}
-        <div class="icon">
-          <ErrorX sw={50} color="oklch(var(--l{manager?.type == 'primary' ? 20 : 8}-t) var(--c24) var(--h2))" />
-        </div>
-      {/if}
-    </button>
-  </div>
-{/if}
-
-<style>
-  .container {
-    margin-left: var(--ml);
-    margin-right: var(--mr);
-    margin-top: var(--mt);
-    margin-bottom: var(--mb);
-  }
-  .base {
-    position: relative;
-    display: flex;
-    align-items: center;
-    outline: none;
-    border: none;
-    min-height: var(--min_height);
-    padding: var(--pt) var(--pr) var(--pb) var(--pl);
-    justify-content: var(--text_align);
-    text-align: var(--text_align);
-    border-radius: var(--br);
-    min-width: var(--min_width);
-    width: var(--base_width);
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .base:not(:disabled) {
-    cursor: pointer;
-  }
-  .base:focus-visible {
-    outline: 1px solid var(--selected-t);
-    outline-offset: -1px;
-    box-shadow:
-      inset 0 0 0 1px var(--selected-t),
-      inset 0 0 0 2px var(--g1-t) !important;
-    -webkit-box-shadow:
-      inset 0 0 0 1px var(--selected-t),
-      inset 0 0 0 2px var(--g1-t) !important;
-  }
-  .is_no_wrap {
-    white-space: nowrap;
-  }
-  .is_word_break_all {
-    word-break: break-all;
-  }
-  .icon_spacer {
-    width: var(--room_for_icon);
-    height: var(--icon_size);
-  }
-  .supporting_icon {
-    position: absolute;
-    background-color: var(--is_icon_bg_tint);
-    top: 50%;
-    transform: translateY(-50%);
-    height: var(--h);
-    aspect-ratio: 1;
-    border-radius: var(--br_icon);
-    display: grid;
-    place-items: center;
-  }
-  .supporting_icon_left {
-    left: var(--pt);
-  }
-  .supporting_icon_right {
-    right: var(--pt);
-  }
-  .cursor_move {
-    cursor: move;
-  }
-  .text_align_center {
-    justify-content: center;
-    text-align: center;
-  }
-  .is_pill {
-    border-radius: 50rem;
-  }
-  .is_compressed {
-    width: auto;
-  }
-  .is_uniform {
-    width: var(--min_height) !important;
-    height: var(--min_height);
-  }
-  .load {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    margin: auto;
-    width: 1.6rem;
-    height: 1.6rem;
-  }
-  .icon {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    margin: auto;
-    width: 2rem;
-    height: 2rem;
-  }
-  .border {
-    border: 1px solid var(--border_color);
-  }
-  .primary {
-    background: linear-gradient(var(--gradient_turn), var(--color), var(--gradient_to_color));
-    box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
-    color: var(--contrast_color);
-  }
-  .primary:hover:enabled:not(:active) {
-    background: linear-gradient(
-      var(--gradient_turn),
-      oklch(from var(--color) calc(l + var(--l-shift-t)) calc(c + 0.02) h),
-      oklch(from var(--gradient_to_color) calc(l + var(--l-shift-t)) calc(c + 0.02) h)
-    );
-    box-shadow:
-      inset 0 0 0 1px color-mix(in oklab, var(--color) 50%, var(--gradient_to_color) 50%),
-      0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
-    color: oklch(from var(--contrast_color) calc(l + var(--l-shift-t)) calc(c + 0.02) h);
-  }
-  .primary:active {
-    background: linear-gradient(
-      var(--gradient_turn),
-      oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h),
-      oklch(from var(--gradient_to_color) calc(l - var(--l-shift-t)) calc(c + 0.02) h)
-    );
-    color: oklch(from var(--contrast_color) calc(l - var(--l-shift-t)) calc(c - 0.02) h);
-  }
-  .primary_simulate_active {
-    background: linear-gradient(
-      var(--gradient_turn),
-      oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h),
-      oklch(from var(--gradient_to_color) calc(l - var(--l-shift-t)) calc(c + 0.02) h)
-    );
-    color: oklch(from var(--contrast_color) calc(l - var(--l-shift-t)) calc(c - 0.02) h);
-  }
-  .primary:disabled {
-    background: linear-gradient(
-      var(--gradient_turn),
-      color-mix(in oklab, var(--color), var(--g8-t) 93%),
-      color-mix(in oklab, var(--gradient_to_color), var(--g8-t) 93%)
-    );
-    color: color-mix(in oklab, var(--contrast_color), var(--g10-t) 80%);
-  }
-
-  .primary_selected {
-    background: linear-gradient(
-      var(--gradient_turn),
-      oklch(from var(--color) calc(l + 2 * var(--l-shift-t)) calc(c + 0.02) h),
-      oklch(from var(--gradient_to_color) calc(l + 2 * var(--l-shift-t)) calc(c + 0.02) h)
-    );
-    color: oklch(from var(--contrast_color) calc(l + 2 * var(--l-shift-t)) calc(c + 0.02) h);
-    box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
-  }
-  .primary_selected:hover:enabled:not(:active) {
-    background: linear-gradient(
-      var(--gradient_turn),
-      oklch(from var(--color) calc(l + 3 * var(--l-shift-t)) calc(c + 0.05) h),
-      oklch(from var(--gradient_to_color) calc(l + 3 * var(--l-shift-t)) calc(c + 0.05) h)
-    );
-    box-shadow:
-      inset 0 0 0 1px color-mix(in oklab, var(--color) 50%, var(--gradient_to_color) 50%),
-      0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
-    color: oklch(from var(--contrast_color) calc(l + var(--l-shift-t)) calc(c + 0.02) h);
-  }
-  .primary_selected:active {
-    background: linear-gradient(
-      var(--gradient_turn),
-      oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h),
-      oklch(from var(--gradient_to_color) calc(l - var(--l-shift-t)) calc(c + 0.02) h)
-    );
-    color: oklch(from var(--contrast_color) calc(l - var(--l-shift-t)) calc(c - 0.02) h);
-  }
-  .primary_selected_simulate_active {
-    background: linear-gradient(
-      var(--gradient_turn),
-      oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h),
-      oklch(from var(--gradient_to_color) calc(l - var(--l-shift-t)) calc(c + 0.02) h)
-    );
-    color: oklch(from var(--contrast_color) calc(l - var(--l-shift-t)) calc(c - 0.02) h);
-  }
-  .primary_selected:disabled {
-    background: linear-gradient(
-      var(--gradient_turn),
-      color-mix(in oklab, var(--color), var(--g14-t) 95%),
-      color-mix(in oklab, var(--gradient_to_color), var(--g14-t) 95%)
-    );
-    color: color-mix(in oklab, var(--contrast_color), var(--g10-t) 80%);
-  }
-
-  .primary_half_selected {
-    background: linear-gradient(
-      var(--gradient_turn),
-      oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h),
-      oklch(from var(--gradient_to_color) calc(l - var(--l-shift-t)) calc(c + 0.02) h)
-    );
-    color: oklch(from var(--contrast_color) calc(l - var(--l-shift-t)) calc(c + 0.02) h);
-    box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
-  }
-  .primary_half_selected:hover:enabled:not(:active) {
-    background: linear-gradient(
-      var(--gradient_turn),
-      oklch(from var(--color) calc(l + var(--l-shift-t)) calc(c + 0.05) h),
-      oklch(from var(--gradient_to_color) calc(l + var(--l-shift-t)) calc(c + 0.05) h)
-    );
-    box-shadow:
-      inset 0 0 0 1px color-mix(in oklab, var(--color) 50%, var(--gradient_to_color) 50%),
-      0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
-    color: oklch(from var(--contrast_color) calc(l + var(--l-shift-t)) calc(c + 0.02) h);
-  }
-  .primary_half_selected:active {
-    background: linear-gradient(
-      var(--gradient_turn),
-      oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h),
-      oklch(from var(--gradient_to_color) calc(l - var(--l-shift-t)) calc(c + 0.02) h)
-    );
-    color: oklch(from var(--contrast_color) calc(l - var(--l-shift-t)) calc(c - 0.02) h);
-  }
-  .primary_half_selected_simulate_active {
-    background: linear-gradient(
-      var(--gradient_turn),
-      oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h),
-      oklch(from var(--gradient_to_color) calc(l - var(--l-shift-t)) calc(c + 0.02) h)
-    );
-    color: oklch(from var(--contrast_color) calc(l - var(--l-shift-t)) calc(c - 0.02) h);
-  }
-  .primary_half_selected:disabled {
-    background: linear-gradient(
-      var(--gradient_turn),
-      color-mix(in oklab, var(--color), var(--g8-t) 93%),
-      color-mix(in oklab, var(--gradient_to_color), var(--g8-t) 93%)
-    );
-    color: color-mix(in oklab, var(--contrast_color), var(--g10-t) 80%);
-  }
-
-  .outlined {
-    background: transparent;
-    border: 1px solid var(--color);
-    box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
-    color: var(--color);
-  }
-  .outlined:hover:enabled:not(:active) {
-    background: linear-gradient(
-      var(--gradient_turn),
-      oklch(from var(--color) calc(l + var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t))),
-      oklch(from var(--gradient_to_color) calc(l + var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t)))
-    );
-    box-shadow:
-      inset 0 0 0 1px color-mix(in oklab, var(--color) 50%, var(--gradient_to_color) 50%),
-      0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
-    color: oklch(from var(--color) calc(l + var(--l-shift-t)) calc(c + 0.02) h);
-  }
-  .outlined:active {
-    background: linear-gradient(
-      var(--gradient_turn),
-      oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.4 + var(--l-shift-t))),
-      oklch(from var(--gradient_to_color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.4 + var(--l-shift-t)))
-    );
-    color: oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c - 0.02) h);
-  }
-  .outlined_simulate_active {
-    background: linear-gradient(
-      var(--gradient_turn),
-      oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.4 + var(--l-shift-t))),
-      oklch(from var(--gradient_to_color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.4 + var(--l-shift-t)))
-    );
-    color: oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c - 0.02) h);
-  }
-  .outlined:disabled {
-    background: linear-gradient(
-      var(--gradient_turn),
-      oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c - 0.5) h / calc(0.4 + var(--l-shift-t))),
-      oklch(from var(--gradient_to_color) calc(l - var(--l-shift-t)) calc(c - 0.5) h / calc(0.4 + var(--l-shift-t)))
-    );
-    border: 1px solid color-mix(in oklab, var(--color), var(--g11-t) 93%);
-    color: oklch(from var(--color) l calc(c - 0.5) h / calc(0.4 + var(--l-shift-t)));
-  }
-
-  .outlined_selected {
-    background: linear-gradient(var(--gradient_turn), var(--color), var(--gradient_to_color));
-    box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
-    color: var(--contrast_color);
-  }
-  .outlined_selected:hover:enabled:not(:active) {
-    background: linear-gradient(
-      var(--gradient_turn),
-      oklch(from var(--color) calc(l + 2 * var(--l-shift-t)) calc(c + 0.02) h / calc(0.9 + var(--l-shift-t))),
-      oklch(from var(--gradient_to_color) calc(l + var(--l-shift-t)) calc(c + 0.02) h / calc(0.9 + var(--l-shift-t)))
-    );
-    box-shadow:
-      inset 0 0 0 1px color-mix(in oklab, var(--color) 50%, var(--gradient_to_color) 50%),
-      0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
-    color: oklch(from var(--contrast_color) calc(l + var(--l-shift-t)) calc(c + 0.02) h);
-  }
-  .outlined_selected:active {
-    background: linear-gradient(
-      var(--gradient_turn),
-      oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.8 + var(--l-shift-t))),
-      oklch(from var(--gradient_to_color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.8 + var(--l-shift-t)))
-    );
-    color: oklch(from var(--contrast_color) calc(l - var(--l-shift-t)) calc(c - 0.02) h);
-  }
-  .outlined_selected_simulate_active {
-    background: linear-gradient(
-      var(--gradient_turn),
-      oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.8 + var(--l-shift-t))),
-      oklch(from var(--gradient_to_color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.8 + var(--l-shift-t)))
-    );
-    color: oklch(from var(--contrast_color) calc(l - var(--l-shift-t)) calc(c - 0.02) h);
-  }
-  .outlined_selected:disabled {
-    background: linear-gradient(
-      var(--gradient_turn),
-      oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c - 0.5) h / calc(0.4 + var(--l-shift-t))),
-      oklch(from var(--gradient_to_color) calc(l - var(--l-shift-t)) calc(c - 0.5) h / calc(0.4 + var(--l-shift-t)))
-    );
-    border: 1px solid color-mix(in oklab, var(--color), var(--g11-t) 93%);
-    color: oklch(from var(--color) l calc(c - 0.5) h / calc(0.2 + var(--l-shift-t)));
-  }
-
-  .outlined_half_selected {
-    background: linear-gradient(
-      var(--gradient_turn),
-      oklch(from var(--color) calc(l + var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t))),
-      oklch(from var(--gradient_to_color) calc(l + var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t)))
-    );
-    border: 1px solid var(--color);
-    box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
-    color: var(--color);
-  }
-  .outlined_half_selected:hover:enabled:not(:active) {
-    background: linear-gradient(
-      var(--gradient_turn),
-      oklch(from var(--color) calc(l + var(--l-shift-t)) calc(c + 0.02) h / calc(0.3 + var(--l-shift-t))),
-      oklch(from var(--gradient_to_color) calc(l + var(--l-shift-t)) calc(c + 0.02) h / calc(0.3 + var(--l-shift-t)))
-    );
-    box-shadow:
-      inset 0 0 0 1px color-mix(in oklab, var(--color) 50%, var(--gradient_to_color) 50%),
-      0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
-    color: oklch(from var(--color) calc(l + var(--l-shift-t)) calc(c + 0.02) h);
-  }
-  .outlined_half_selected:active {
-    background: linear-gradient(
-      var(--gradient_turn),
-      oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.4 + var(--l-shift-t))),
-      oklch(from var(--gradient_to_color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.4 + var(--l-shift-t)))
-    );
-    color: oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c - 0.02) h);
-  }
-  .outlined_half_selected_simulate_active {
-    background: linear-gradient(
-      var(--gradient_turn),
-      oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.4 + var(--l-shift-t))),
-      oklch(from var(--gradient_to_color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.4 + var(--l-shift-t)))
-    );
-    color: oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c - 0.02) h);
-  }
-  .outlined_half_selected:disabled {
-    background: linear-gradient(
-      var(--gradient_turn),
-      oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c - 0.5) h / calc(0.4 + var(--l-shift-t))),
-      oklch(from var(--gradient_to_color) calc(l - var(--l-shift-t)) calc(c - 0.5) h / calc(0.4 + var(--l-shift-t)))
-    );
-    border: 1px solid color-mix(in oklab, var(--color), var(--g11-t) 93%);
-    color: oklch(from var(--color) l calc(c - 0.5) h / calc(0.2 + var(--l-shift-t)));
-  }
-
-  .soft {
-    background: transparent;
-    box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
-    color: var(--color);
-  }
-  .soft:hover:enabled:not(:active) {
-    background: linear-gradient(
-      var(--gradient_turn),
-      oklch(from var(--color) calc(l + var(--l-shift-t)) calc(c + 0.02) h / calc(0.12 + var(--l-shift-t))),
-      oklch(from var(--gradient_to_color) calc(l + var(--l-shift-t)) calc(c + 0.02) h / calc(0.12 + var(--l-shift-t)))
-    );
-    box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
-    color: oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.01) h);
-  }
-  .soft:active {
-    background: linear-gradient(
-      var(--gradient_turn),
-      oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t))),
-      oklch(from var(--gradient_to_color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t)))
-    );
-    color: oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c - 0.01) h);
-  }
-  .soft_simulate_active {
-    background: linear-gradient(
-      var(--gradient_turn),
-      oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t))),
-      oklch(from var(--gradient_to_color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t)))
-    );
-    color: oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c - 0.01) h);
-  }
-  .soft:disabled {
-    background: color-mix(in oklab, var(--color), var(--shadow1-t) 95%);
-    color: oklch(from var(--color) l calc(c - 0.5) h / calc(0.2 + var(--l-shift-t)));
-  }
-
-  .soft_selected {
-    background: linear-gradient(
-      var(--gradient_turn),
-      oklch(from var(--color) calc(l + var(--l-shift-t)) calc(c + 0.02) h / calc(0.25 + var(--l-shift-t))),
-      oklch(from var(--gradient_to_color) calc(l + var(--l-shift-t)) calc(c + 0.02) h / calc(0.25 + var(--l-shift-t)))
-    );
-    box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
-    color: oklch(from var(--color) calc(l + var(--l-shift-t)) calc(c + 0.01) h);
-  }
-  .soft_selected:hover:enabled:not(:active) {
-    background: linear-gradient(
-      var(--gradient_turn),
-      oklch(from var(--color) calc(l + var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t))),
-      oklch(from var(--gradient_to_color) calc(l + var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t)))
-    );
-    box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
-    color: oklch(from var(--color) calc(l + var(--l-shift-t)) calc(c + 0.01) h);
-  }
-  .soft_selected:active {
-    background: linear-gradient(
-      var(--gradient_turn),
-      oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t))),
-      oklch(from var(--gradient_to_color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t)))
-    );
-    color: oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c - 0.01) h);
-  }
-  .soft_selected_simulate_active {
-    background: linear-gradient(
-      var(--gradient_turn),
-      oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t))),
-      oklch(from var(--gradient_to_color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t)))
-    );
-    color: oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c - 0.01) h);
-  }
-  .soft_selected:disabled {
-    background: color-mix(in oklab, var(--color), var(--shadow1-t) 95%);
-    color: oklch(from var(--color) l calc(c - 0.5) h / calc(0.2 + var(--l-shift-t)));
-  }
-
-  .soft_half_selected {
-    background: linear-gradient(
-      var(--gradient_turn),
-      oklch(from var(--color) calc(l + var(--l-shift-t)) calc(c + 0.02) h / calc(0.1 + var(--l-shift-t))),
-      oklch(from var(--gradient_to_color) calc(l + var(--l-shift-t)) calc(c + 0.02) h / calc(0.1 + var(--l-shift-t)))
-    );
-    box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
-    color: var(--color);
-  }
-  .soft_half_selected:hover:enabled:not(:active) {
-    background: linear-gradient(
-      var(--gradient_turn),
-      oklch(from var(--color) calc(l + var(--l-shift-t)) calc(c + 0.02) h / calc(0.15 + var(--l-shift-t))),
-      oklch(from var(--gradient_to_color) calc(l + var(--l-shift-t)) calc(c + 0.02) h / calc(0.15 + var(--l-shift-t)))
-    );
-    box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
-    color: oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.1) h);
-  }
-  .soft_half_selected:active {
-    background: linear-gradient(
-      var(--gradient_turn),
-      oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t))),
-      oklch(from var(--gradient_to_color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t)))
-    );
-    color: oklch(from var(--color) calc(l - 2 * var(--l-shift-t)) calc(c + 0.1) h);
-  }
-  .soft_half_selected_simulate_active {
-    background: linear-gradient(
-      var(--gradient_turn),
-      oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t))),
-      oklch(from var(--gradient_to_color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t)))
-    );
-    color: oklch(from var(--color) calc(l - 2 * var(--l-shift-t)) calc(c + 0.1) h);
-  }
-  .soft_half_selected:disabled {
-    background: color-mix(in oklab, var(--color), var(--shadow1-t) 95%);
-    color: oklch(from var(--color) l calc(c - 0.5) h / calc(0.2 + var(--l-shift-t)));
-  }
-
-  .plain {
-    background: transparent;
-    box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
-    color: var(--color);
-  }
-  .plain:hover:enabled:not(:active) {
-    box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
-    color: oklch(from var(--color) calc(l - 3 * var(--l-shift-t)) calc(c + 0.1) h);
-  }
-  .plain:active {
-    color: oklch(from var(--color) calc(l - 2 * var(--l-shift-t)) calc(c + 0.1) h);
-  }
-  .plain_simulate_active {
-    color: oklch(from var(--color) calc(l - 2 * var(--l-shift-t)) calc(c + 0.1) h);
-  }
-  .plain:disabled {
-    color: oklch(from var(--color) calc(l - 2 * var(--l-shift-t)) calc(c - 0.5) h);
-  }
-
-  .plain_selected {
-    background: transparent;
-    box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
-    color: oklch(from var(--color) calc(l - 2 * var(--l-shift-t)) calc(c + 0.1) h);
-  }
-  .plain_selected:hover:enabled:not(:active) {
-    box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
-    color: oklch(from var(--color) calc(l - 1 * var(--l-shift-t)) calc(c + 0.1) h);
-  }
-  .plain_selected:active {
-    background: linear-gradient(
-      var(--gradient_turn),
-      oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t))),
-      oklch(from var(--gradient_to_color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t)))
-    );
-    color: oklch(from var(--color) calc(l - 4 * var(--l-shift-t)) calc(c + 0.1) h);
-  }
-  .plain_selected_simulate_active {
-    background: linear-gradient(
-      var(--gradient_turn),
-      oklch(from var(--color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t))),
-      oklch(from var(--gradient_to_color) calc(l - var(--l-shift-t)) calc(c + 0.02) h / calc(0.2 + var(--l-shift-t)))
-    );
-    color: oklch(from var(--color) calc(l - 4 * var(--l-shift-t)) calc(c + 0.1) h);
-  }
-  .plain_selected:disabled {
-    color: oklch(from var(--color) calc(l - 2 * var(--l-shift-t)) calc(c - 0.5) h);
-  }
-
-  .plain_half_selected {
-    background: transparent;
-    box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
-    color: oklch(from var(--color) calc(l + 3 * var(--l-shift-t)) calc(c + 0.05) h);
-  }
-  .plain_half_selected:hover:enabled:not(:active) {
-    box-shadow: 0 var(--hover_shadow_short_size) var(--hover_shadow_size) var(--hover_shadow_color);
-    color: oklch(from var(--color) calc(l + 4 * var(--l-shift-t)) calc(c + 0.05) h);
-  }
-  .plain_half_selected:active {
-    color: oklch(from var(--color) calc(l - 2 * var(--l-shift-t)) calc(c - 0.02) h);
-  }
-  .plain_half_selected_simulate_active {
-    color: oklch(from var(--color) calc(l - 2 * var(--l-shift-t)) calc(c - 0.02) h);
-  }
-  .plain_half_selected:disabled {
-    color: oklch(from var(--color) calc(l - 2 * var(--l-shift-t)) calc(c - 0.5) h);
-  }
-</style>