Pre Release New Changes

2026-07-31 16:30:13 +05:30
parent 358a520bc5
commit 3e565e8d03
189 changed files with 36727 additions and 17249 deletions
@@ -8,9 +8,12 @@ component BackToTop {
    offset = "md"
    behavior = "smooth"
    showProgress = false
+    showLabel = false
+    alwaysVisible = false
    size = "default"
    color = "primary"
    variant = "solid"
+    shape = "round"
    class = ""
  }

@@ -19,51 +22,316 @@ component BackToTop {

  view {
    <button
+      {...attrs}
      data-ui-component="BackToTop"
      type="button"
      aria-label='{ariaLabel}'
      title='{label}'
-      data-show='visible'
-      class='fixed z-50 inline-flex items-center justify-center rounded-full border border-[var(--wire-color-border)] shadow-xl backdrop-blur transition duration-200 hover:-translate-y-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--wire-color-background)] {class}'
-      class:bottom-4='offset === "sm"'
-      class:bottom-6='offset === "md"'
-      class:bottom-8='offset === "lg"'
-      class:right-4='position === "right" && offset === "sm"'
-      class:right-6='position === "right" && offset === "md"'
-      class:right-8='position === "right" && offset === "lg"'
-      class:left-4='position === "left" && offset === "sm"'
-      class:left-6='position === "left" && offset === "md"'
-      class:left-8='position === "left" && offset === "lg"'
-      class:left-1/2='position === "center"'
-      class:-translate-x-1/2='position === "center"'
-      class:size-10='size === "sm"'
-      class:size-12='size === "default" || size === "md"'
-      class:size-14='size === "lg"'
-      class:bg-[var(--wire-color-primary)]='variant === "solid" && color === "primary"'
-      class:text-[var(--wire-color-on-primary)]='variant === "solid" && color === "primary"'
-      class:bg-[var(--wire-color-danger)]='variant === "solid" && color === "danger"'
-      class:text-[var(--wire-color-on-danger)]='variant === "solid" && color === "danger"'
-      class:bg-[var(--wire-color-surface-raised)]='variant === "outline" || variant === "soft"'
-      class:text-[var(--wire-color-primary)]='variant === "outline" || variant === "soft"'
+      data-position='{position}'
+      data-offset='{offset}'
+      data-size='{size}'
+      data-color='{color}'
+      data-variant='{variant}'
+      data-shape='{shape}'
+      data-show-label='{showLabel ? "true" : "false"}'
+      data-progress='{showProgress ? "true" : "false"}'
+      data-show='{alwaysVisible || visible}'
+      class='wire-back-to-top {class}'
      style='--wire-back-to-top-progress: {progress}%;'
-      @window:scroll='visible = window.scrollY >= threshold; progress = Math.min(100, Math.round((window.scrollY / Math.max(1, document.documentElement.scrollHeight - window.innerHeight)) * 100))'
+      @window:scroll='visible = window.scrollY >= threshold; progress = Math.min(100, Math.max(0, Math.round((window.scrollY / Math.max(1, document.documentElement.scrollHeight - window.innerHeight)) * 100)))'
      @click='window.scrollTo({ top: 0, behavior: behavior })'
    >
      {#if showProgress}
-        <span class="wire-back-to-top-progress absolute inset-0 rounded-full" aria-hidden="true"></span>
+        <span class="wire-back-to-top__progress" aria-hidden="true"></span>
      {/if}
-      <span class='{icon + " relative z-10 size-5"}' aria-hidden="true"></span>
-      <span class="sr-only">{label}</span>
+
+      <span class="wire-back-to-top__surface">
+        <span class='wire-back-to-top__icon {icon}' aria-hidden="true"></span>
+
+        {#if showLabel}
+          <span class="wire-back-to-top__label">{label}</span>
+        {/if}
+      </span>
+
+      <span class="wire-back-to-top__sr">{label}</span>
    </button>
  }

  style {
-    .wire-back-to-top-progress {
+    .wire-back-to-top {
+      --back-accent: var(--wire-color-primary);
+      --back-accent-hover: var(--wire-color-primary-hover);
+      --back-accent-soft: var(--wire-color-primary-soft);
+      --back-contrast: var(--wire-color-primary-contrast);
+
+      position: fixed;
+      z-index: 70;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 3rem;
+      min-height: 3rem;
+      padding: 0;
+      color: var(--back-contrast);
+      background: transparent;
+      border: 0;
+      border-radius: 999px;
+      cursor: pointer;
+      filter: drop-shadow(0 14px 30px color-mix(in srgb, black 22%, transparent));
+      transition:
+        transform 180ms ease,
+        opacity 180ms ease,
+        filter 180ms ease;
+    }
+
+    .wire-back-to-top[data-color="secondary"] {
+      --back-accent: var(--wire-color-secondary);
+      --back-accent-hover: var(--wire-color-secondary-hover);
+      --back-accent-soft: var(--wire-color-secondary-soft);
+      --back-contrast: var(--wire-color-secondary-contrast);
+    }
+
+    .wire-back-to-top[data-color="info"] {
+      --back-accent: var(--wire-color-info);
+      --back-accent-hover: var(--wire-color-info-hover);
+      --back-accent-soft: var(--wire-color-info-soft);
+      --back-contrast: var(--wire-color-info-contrast);
+    }
+
+    .wire-back-to-top[data-color="success"] {
+      --back-accent: var(--wire-color-success);
+      --back-accent-hover: var(--wire-color-success-hover);
+      --back-accent-soft: var(--wire-color-success-soft);
+      --back-contrast: var(--wire-color-success-contrast);
+    }
+
+    .wire-back-to-top[data-color="warning"] {
+      --back-accent: var(--wire-color-warning);
+      --back-accent-hover: var(--wire-color-warning-hover);
+      --back-accent-soft: var(--wire-color-warning-soft);
+      --back-contrast: var(--wire-color-warning-contrast);
+    }
+
+    .wire-back-to-top[data-color="danger"] {
+      --back-accent: var(--wire-color-danger);
+      --back-accent-hover: var(--wire-color-danger-hover);
+      --back-accent-soft: var(--wire-color-danger-soft);
+      --back-contrast: var(--wire-color-danger-contrast);
+    }
+
+    .wire-back-to-top[data-position="right"] {
+      right: 1.5rem;
+    }
+
+    .wire-back-to-top[data-position="left"] {
+      left: 1.5rem;
+    }
+
+    .wire-back-to-top[data-position="center"] {
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    .wire-back-to-top[data-position="center"]:hover {
+      transform: translateX(-50%) translateY(-3px);
+    }
+
+    .wire-back-to-top[data-offset="sm"] {
+      bottom: 1rem;
+    }
+
+    .wire-back-to-top[data-offset="md"] {
+      bottom: 1.5rem;
+    }
+
+    .wire-back-to-top[data-offset="lg"] {
+      bottom: 2rem;
+    }
+
+    .wire-back-to-top[data-offset="xl"] {
+      bottom: 3rem;
+    }
+
+    .wire-back-to-top[data-size="sm"] {
+      min-width: 2.5rem;
+      min-height: 2.5rem;
+    }
+
+    .wire-back-to-top[data-size="lg"] {
+      min-width: 3.5rem;
+      min-height: 3.5rem;
+    }
+
+    .wire-back-to-top[data-show-label="true"] {
+      min-width: 0;
+    }
+
+    .wire-back-to-top:hover {
+      transform: translateY(-3px);
+      filter: drop-shadow(0 18px 36px color-mix(in srgb, var(--back-accent) 24%, transparent));
+    }
+
+    .wire-back-to-top:active {
+      transform: translateY(-1px) scale(0.98);
+    }
+
+    .wire-back-to-top__surface {
+      position: relative;
+      z-index: 2;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.55rem;
+      min-width: 3rem;
+      min-height: 3rem;
+      padding: 0.75rem;
+      color: var(--back-contrast);
+      background:
+        linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 56%),
+        var(--back-accent);
+      border: 1px solid color-mix(in srgb, white 18%, transparent);
+      border-radius: inherit;
+      box-shadow:
+        0 1px 0 color-mix(in srgb, white 20%, transparent) inset,
+        0 10px 24px color-mix(in srgb, black 18%, transparent);
+      backdrop-filter: blur(12px);
+      transition:
+        background-color 160ms ease,
+        border-color 160ms ease,
+        color 160ms ease;
+    }
+
+    .wire-back-to-top[data-size="sm"] .wire-back-to-top__surface {
+      min-width: 2.5rem;
+      min-height: 2.5rem;
+      padding: 0.58rem;
+    }
+
+    .wire-back-to-top[data-size="lg"] .wire-back-to-top__surface {
+      min-width: 3.5rem;
+      min-height: 3.5rem;
+      padding: 0.9rem;
+    }
+
+    .wire-back-to-top[data-show-label="true"] .wire-back-to-top__surface {
+      min-width: 0;
+      padding-inline: 1rem;
+    }
+
+    .wire-back-to-top[data-variant="outline"] .wire-back-to-top__surface {
+      color: var(--back-accent);
+      background: color-mix(in srgb, var(--wire-color-surface-raised) 88%, transparent);
+      border-color: color-mix(in srgb, var(--back-accent) 46%, var(--wire-color-border));
+    }
+
+    .wire-back-to-top[data-variant="soft"] .wire-back-to-top__surface {
+      color: var(--back-accent);
+      background: color-mix(in srgb, var(--back-accent-soft) 88%, var(--wire-color-surface-raised));
+      border-color: color-mix(in srgb, var(--back-accent) 22%, var(--wire-color-border));
+    }
+
+    .wire-back-to-top[data-variant="ghost"] .wire-back-to-top__surface {
+      color: var(--back-accent);
+      background: color-mix(in srgb, var(--wire-color-surface-raised) 68%, transparent);
+      border-color: transparent;
+      box-shadow: none;
+    }
+
+    .wire-back-to-top[data-variant="minimal"] .wire-back-to-top__surface {
+      color: var(--back-accent);
+      background: transparent;
+      border-color: transparent;
+      box-shadow: none;
+      backdrop-filter: none;
+    }
+
+    .wire-back-to-top[data-shape="rounded"] {
+      border-radius: 0.9rem;
+    }
+
+    .wire-back-to-top[data-shape="pill"] {
+      border-radius: 999px;
+    }
+
+    .wire-back-to-top__progress {
+      position: absolute;
+      inset: -0.22rem;
+      z-index: 1;
+      border-radius: inherit;
      background: conic-gradient(
-        currentColor var(--wire-back-to-top-progress),
-        transparent var(--wire-back-to-top-progress)
+        var(--back-accent) var(--wire-back-to-top-progress),
+        color-mix(in srgb, var(--wire-color-border) 72%, transparent) var(--wire-back-to-top-progress)
      );
-      opacity: 0.22;
+      mask: radial-gradient(farthest-side, transparent calc(100% - 0.18rem), #000 calc(100% - 0.17rem));
+      -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 0.18rem), #000 calc(100% - 0.17rem));
+      pointer-events: none;
+    }
+
+    .wire-back-to-top__icon {
+      width: 1.1rem;
+      height: 1.1rem;
+      flex: 0 0 auto;
+    }
+
+    .wire-back-to-top[data-size="sm"] .wire-back-to-top__icon {
+      width: 0.95rem;
+      height: 0.95rem;
+    }
+
+    .wire-back-to-top[data-size="lg"] .wire-back-to-top__icon {
+      width: 1.25rem;
+      height: 1.25rem;
+    }
+
+    .wire-back-to-top__label {
+      white-space: nowrap;
+      font-size: 0.78rem;
+      font-weight: 700;
+      line-height: 1;
+    }
+
+    .wire-back-to-top__sr {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+
+    .wire-back-to-top:focus-visible {
+      outline: 2px solid var(--wire-color-focus);
+      outline-offset: 4px;
+    }
+
+    @media (max-width: 639px) {
+      .wire-back-to-top[data-position="right"] {
+        right: 1rem;
+      }
+
+      .wire-back-to-top[data-position="left"] {
+        left: 1rem;
+      }
+
+      .wire-back-to-top[data-offset="lg"],
+      .wire-back-to-top[data-offset="xl"] {
+        bottom: 1.25rem;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .wire-back-to-top,
+      .wire-back-to-top__surface {
+        transition: none;
+      }
+
+      .wire-back-to-top:hover,
+      .wire-back-to-top[data-position="center"]:hover {
+        transform: none;
+      }
    }
  }
 }