seblify 0.2.1 → 0.4.0

package/dist/components/action/button/timed-button/TimedButton.svelte

@@ -0,0 +1,1143 @@
+<script lang="ts">
+  import type { CustomCssSize, SeblifyProps } from 'seblify';
+  import type { Snippet } from 'svelte';
+
+  type TimedButtonCompleteAction = 'none' | 'click';
+  type TimedButtonDirection = 'empty' | 'fill';
+  type TimedButtonRadius = 'none' | 'sm' | 'md' | 'lg' | 'full' | CustomCssSize;
+  type TimedButtonSize = 'sm' | 'md' | 'lg' | 'xl' | CustomCssSize;
+  type TimedButtonTone =
+    | 'neutral'
+    | 'strong'
+    | 'primary'
+    | 'secondary'
+    | 'success'
+    | 'danger'
+    | 'warning'
+    | 'info';
+  type TimedButtonType = 'button' | 'submit' | 'reset';
+  type TimedButtonVariant = 'solid' | 'soft' | 'tint' | 'outline' | 'plain';
+
+  type Props = SeblifyProps<{
+    [key: string]: unknown;
+    ariaLabel?: string;
+    children?: Snippet;
+    class?: string;
+    completeAction?: TimedButtonCompleteAction;
+    direction?: TimedButtonDirection;
+    disabled?: boolean;
+    duration?: number;
+    end?: Snippet;
+    fullWidth?: boolean;
+    label?: string;
+    loading?: boolean;
+    loadingLabel?: string;
+    onComplete?: () => void;
+    radius?: TimedButtonRadius;
+    running?: boolean;
+    size?: TimedButtonSize;
+    start?: Snippet;
+    tone?: TimedButtonTone;
+    type?: TimedButtonType;
+    variant?: TimedButtonVariant;
+  }>;
+
+  const TIMED_BUTTON_SIZE_MAP: Record<
+    Exclude<TimedButtonSize, CustomCssSize>,
+    { gap: string; height: string; icon: string; padding: string }
+  > = {
+    sm: {
+      gap: '0.375rem',
+      height: '2rem',
+      icon: '1rem',
+      padding: '0.75rem',
+    },
+    md: {
+      gap: '0.5rem',
+      height: '2.25rem',
+      icon: '1.125rem',
+      padding: '0.875rem',
+    },
+    lg: {
+      gap: '0.625rem',
+      height: '2.75rem',
+      icon: '1.25rem',
+      padding: '1rem',
+    },
+    xl: {
+      gap: '0.75rem',
+      height: '3.25rem',
+      icon: '1.375rem',
+      padding: '1.125rem',
+    },
+  };
+  const TIMED_BUTTON_RADIUS_MAP: Record<
+    Exclude<TimedButtonRadius, CustomCssSize>,
+    string
+  > = {
+    none: '0',
+    sm: '0.25rem',
+    md: '0.375rem',
+    lg: '0.5rem',
+    full: '999px',
+  };
+
+  let {
+    ariaLabel,
+    children,
+    class: className,
+    completeAction = 'none',
+    direction = 'empty',
+    disabled = false,
+    duration = 5000,
+    end,
+    fullWidth = false,
+    label,
+    loading = false,
+    loadingLabel,
+    onComplete,
+    radius = 'md',
+    running = $bindable(true),
+    size = 'md',
+    start,
+    tone = 'primary',
+    type = 'button',
+    variant = 'solid',
+    ...restProps
+  }: Props = $props();
+
+  let buttonElement: HTMLButtonElement | undefined;
+
+  function cssSize(value: CustomCssSize): string {
+    return typeof value === 'number' ? `${value}px` : value;
+  }
+
+  function resolveSizeConfig(value: TimedButtonSize) {
+    if (typeof value === 'number') {
+      const resolvedSize = cssSize(value);
+
+      return {
+        gap: '0.5rem',
+        height: resolvedSize,
+        icon: `max(1rem, calc(${resolvedSize} * 0.46))`,
+        padding: `max(0.75rem, calc(${resolvedSize} * 0.42))`,
+      };
+    }
+
+    const namedConfig =
+      TIMED_BUTTON_SIZE_MAP[value as keyof typeof TIMED_BUTTON_SIZE_MAP];
+
+    if (namedConfig) {
+      return namedConfig;
+    }
+
+    return {
+      gap: '0.5rem',
+      height: value,
+      icon: `max(1rem, calc(${value} * 0.46))`,
+      padding: `max(0.75rem, calc(${value} * 0.42))`,
+    };
+  }
+
+  function resolveRadiusValue(value: TimedButtonRadius): string {
+    if (typeof value === 'number') {
+      return cssSize(value);
+    }
+
+    return (
+      TIMED_BUTTON_RADIUS_MAP[value as keyof typeof TIMED_BUTTON_RADIUS_MAP] ??
+      value
+    );
+  }
+
+  function resolveDurationValue(value: number): number {
+    return Number.isFinite(value) ? Math.max(0, value) : 0;
+  }
+
+  const sizeConfig = $derived(resolveSizeConfig(size));
+  const radiusValue = $derived(resolveRadiusValue(radius));
+  const resolvedDuration = $derived(resolveDurationValue(duration));
+  const durationValue = $derived(`${resolvedDuration}ms`);
+  const isDisabled = $derived(disabled || loading);
+  const progressKey = $derived(
+    `${running}-${isDisabled}-${resolvedDuration}-${direction}`,
+  );
+  const accessibleLabel = $derived(
+    loading && loadingLabel ? loadingLabel : ariaLabel,
+  );
+
+  $effect(() => {
+    const active = running && !isDisabled;
+    const activeDuration = resolvedDuration;
+    const activeCompleteAction = completeAction;
+    const activeOnComplete = onComplete;
+
+    if (!active) {
+      return;
+    }
+
+    const timeout = window.setTimeout(() => {
+      running = false;
+      activeOnComplete?.();
+
+      if (activeCompleteAction === 'click') {
+        buttonElement?.click();
+      }
+    }, activeDuration);
+
+    return () => {
+      window.clearTimeout(timeout);
+    };
+  });
+</script>
+
+<button
+  {...restProps}
+  aria-busy={loading || undefined}
+  aria-label={accessibleLabel}
+  bind:this={buttonElement}
+  class={`timed-button seblify-tone-context${className ? ` ${className}` : ''}`}
+  class:full-width={fullWidth}
+  data-direction={direction}
+  data-loading={loading}
+  data-running={running}
+  data-seblify-tone={tone}
+  data-variant={variant}
+  disabled={isDisabled}
+  style:--timed-button-duration={durationValue}
+  style:--timed-button-gap={sizeConfig.gap}
+  style:--timed-button-height={sizeConfig.height}
+  style:--timed-button-icon-size={sizeConfig.icon}
+  style:--timed-button-padding-inline={sizeConfig.padding}
+  style:--timed-button-radius={radiusValue}
+  {type}
+>
+  {#if running && !isDisabled}
+    {#key progressKey}
+      <span class="timed-button__progress" aria-hidden="true"></span>
+    {/key}
+  {/if}
+
+  <span class="timed-button__inner seblify-tone-publisher">
+    {#if loading}
+      <span class="timed-button__spinner" aria-hidden="true"></span>
+    {:else if start}
+      <span class="timed-button__media" aria-hidden="true">
+        {@render start()}
+      </span>
+    {/if}
+
+    <span class="timed-button__content">
+      {#if children}
+        {@render children()}
+      {:else}
+        {label}
+      {/if}
+    </span>
+
+    {#if end}
+      <span class="timed-button__media" aria-hidden="true">
+        {@render end()}
+      </span>
+    {/if}
+  </span>
+</button>
+
+<style>:where(.seblify-tone-context) {
+  --seblify-tone-fill: var(--seblify-color-neutral-fill, #6f5f55);
+  --seblify-tone-fill-hover: var(--seblify-color-neutral-fill-hover, #5b4d45);
+  --seblify-tone-fill-text: var(--seblify-color-neutral-fill-text, #fff4e7);
+  --seblify-tone-surface: var(--seblify-color-neutral-surface, #f2ebe4);
+  --seblify-tone-surface-hover: var(
+    --seblify-color-neutral-surface-hover,
+    #ebe1d8
+  );
+  --seblify-tone-text: var(--seblify-color-neutral-text, #6f5f55);
+  --seblify-tone-border: var(--seblify-color-neutral-border, #ded0c4);
+  --seblify-tone-derived-surface: var(
+    --seblify-color-neutral-derived-surface,
+    var(--seblify-color-surface-muted, #f2ebe4)
+  );
+  --seblify-tone-derived-border: var(
+    --seblify-color-neutral-derived-border,
+    color-mix(
+      in srgb,
+      var(--seblify-color-neutral-fill, #6f5f55) 22%,
+      var(--seblify-color-border-strong, #c5afa0) 78%
+    )
+  );
+  --seblify-tone-derived-text: var(
+    --seblify-color-neutral-derived-text,
+    var(--seblify-color-text-subtle, #8b7a70)
+  );
+  --seblify-tone-on-inverse-surface: var(
+    --seblify-color-neutral-on-inverse-surface,
+    color-mix(
+      in srgb,
+      var(--seblify-color-text-inverse, #fff4e7) 10%,
+      var(--seblify-color-surface-inverse, #15110f) 90%
+    )
+  );
+  --seblify-tone-on-inverse-surface-hover: var(
+    --seblify-color-neutral-on-inverse-surface-hover,
+    color-mix(
+      in srgb,
+      var(--seblify-color-text-inverse, #fff4e7) 16%,
+      var(--seblify-color-surface-inverse, #15110f) 84%
+    )
+  );
+  --seblify-tone-on-inverse-text: var(
+    --seblify-color-neutral-on-inverse-text,
+    var(--seblify-color-text-inverse, #fff4e7)
+  );
+  --seblify-tone-on-inverse-border: var(
+    --seblify-color-neutral-on-inverse-border,
+    var(--seblify-color-border-inverse, #4a3b32)
+  );
+  --seblify-tone-control-fill: var(--seblify-tone-fill);
+  --seblify-tone-control-fill-hover: var(--seblify-tone-fill-hover);
+  --seblify-tone-control-fill-text: var(--seblify-tone-fill-text);
+  --seblify-tone-control-surface: var(--seblify-tone-surface);
+  --seblify-tone-control-surface-hover: var(--seblify-tone-surface-hover);
+  --seblify-tone-control-default-text: var(--seblify-color-text, #211916);
+  --seblify-tone-control-text: var(--seblify-tone-text);
+  --seblify-tone-control-border: var(--seblify-tone-border);
+  --seblify-tone-control-derived-surface: var(--seblify-tone-derived-surface);
+  --seblify-tone-control-derived-border: var(--seblify-tone-derived-border);
+  --seblify-tone-control-derived-text: var(--seblify-tone-derived-text);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='inherit']) {
+  --seblify-tone-fill: var(
+    --seblify-current-tone-fill,
+    var(--seblify-color-neutral-fill, #6f5f55)
+  );
+  --seblify-tone-fill-hover: var(
+    --seblify-current-tone-fill-hover,
+    var(--seblify-color-neutral-fill-hover, #5b4d45)
+  );
+  --seblify-tone-fill-text: var(
+    --seblify-current-tone-fill-text,
+    var(--seblify-color-neutral-fill-text, #fff4e7)
+  );
+  --seblify-tone-surface: var(
+    --seblify-current-tone-surface,
+    var(--seblify-color-neutral-surface, #f2ebe4)
+  );
+  --seblify-tone-surface-hover: var(
+    --seblify-current-tone-surface-hover,
+    var(--seblify-color-neutral-surface-hover, #ebe1d8)
+  );
+  --seblify-tone-text: var(
+    --seblify-current-tone-text,
+    var(--seblify-color-neutral-text, #6f5f55)
+  );
+  --seblify-tone-border: var(
+    --seblify-current-tone-border,
+    var(--seblify-color-neutral-border, #ded0c4)
+  );
+  --seblify-tone-derived-surface: var(
+    --seblify-current-tone-derived-surface,
+    var(
+      --seblify-color-neutral-derived-surface,
+      var(--seblify-color-surface-muted, #f2ebe4)
+    )
+  );
+  --seblify-tone-derived-border: var(
+    --seblify-current-tone-derived-border,
+    var(
+      --seblify-color-neutral-derived-border,
+      color-mix(
+        in srgb,
+        var(--seblify-color-neutral-fill, #6f5f55) 22%,
+        var(--seblify-color-border-strong, #c5afa0) 78%
+      )
+    )
+  );
+  --seblify-tone-derived-text: var(
+    --seblify-current-tone-derived-text,
+    var(
+      --seblify-color-neutral-derived-text,
+      var(--seblify-color-text-subtle, #8b7a70)
+    )
+  );
+  --seblify-tone-on-inverse-surface: var(
+    --seblify-current-tone-on-inverse-surface,
+    var(
+      --seblify-color-neutral-on-inverse-surface,
+      color-mix(
+        in srgb,
+        var(--seblify-color-text-inverse, #fff4e7) 10%,
+        var(--seblify-color-surface-inverse, #15110f) 90%
+      )
+    )
+  );
+  --seblify-tone-on-inverse-surface-hover: var(
+    --seblify-current-tone-on-inverse-surface-hover,
+    var(
+      --seblify-color-neutral-on-inverse-surface-hover,
+      color-mix(
+        in srgb,
+        var(--seblify-color-text-inverse, #fff4e7) 16%,
+        var(--seblify-color-surface-inverse, #15110f) 84%
+      )
+    )
+  );
+  --seblify-tone-on-inverse-text: var(
+    --seblify-current-tone-on-inverse-text,
+    var(
+      --seblify-color-neutral-on-inverse-text,
+      var(--seblify-color-text-inverse, #fff4e7)
+    )
+  );
+  --seblify-tone-on-inverse-border: var(
+    --seblify-current-tone-on-inverse-border,
+    var(
+      --seblify-color-neutral-on-inverse-border,
+      var(--seblify-color-border-inverse, #4a3b32)
+    )
+  );
+}
+
+:where(.seblify-tone-context[data-seblify-tone='neutral']) {
+  --seblify-tone-fill: var(--seblify-color-neutral-fill, #6f5f55);
+  --seblify-tone-fill-hover: var(--seblify-color-neutral-fill-hover, #5b4d45);
+  --seblify-tone-fill-text: var(--seblify-color-neutral-fill-text, #fff4e7);
+  --seblify-tone-surface: var(--seblify-color-neutral-surface, #f2ebe4);
+  --seblify-tone-surface-hover: var(
+    --seblify-color-neutral-surface-hover,
+    #ebe1d8
+  );
+  --seblify-tone-text: var(--seblify-color-neutral-text, #6f5f55);
+  --seblify-tone-border: var(--seblify-color-neutral-border, #ded0c4);
+  --seblify-tone-derived-surface: var(
+    --seblify-color-neutral-derived-surface,
+    var(--seblify-color-surface-muted, #f2ebe4)
+  );
+  --seblify-tone-derived-border: var(
+    --seblify-color-neutral-derived-border,
+    color-mix(
+      in srgb,
+      var(--seblify-color-neutral-fill, #6f5f55) 22%,
+      var(--seblify-color-border-strong, #c5afa0) 78%
+    )
+  );
+  --seblify-tone-derived-text: var(
+    --seblify-color-neutral-derived-text,
+    var(--seblify-color-text-subtle, #8b7a70)
+  );
+  --seblify-tone-on-inverse-surface: var(
+    --seblify-color-neutral-on-inverse-surface,
+    color-mix(
+      in srgb,
+      var(--seblify-color-text-inverse, #fff4e7) 10%,
+      var(--seblify-color-surface-inverse, #15110f) 90%
+    )
+  );
+  --seblify-tone-on-inverse-surface-hover: var(
+    --seblify-color-neutral-on-inverse-surface-hover,
+    color-mix(
+      in srgb,
+      var(--seblify-color-text-inverse, #fff4e7) 16%,
+      var(--seblify-color-surface-inverse, #15110f) 84%
+    )
+  );
+  --seblify-tone-on-inverse-text: var(
+    --seblify-color-neutral-on-inverse-text,
+    var(--seblify-color-text-inverse, #fff4e7)
+  );
+  --seblify-tone-on-inverse-border: var(
+    --seblify-color-neutral-on-inverse-border,
+    var(--seblify-color-border-inverse, #4a3b32)
+  );
+}
+
+:where(.seblify-tone-context[data-seblify-tone='strong']) {
+  --seblify-tone-fill: var(--seblify-color-strong-fill, #211916);
+  --seblify-tone-fill-hover: var(--seblify-color-strong-fill-hover, #080706);
+  --seblify-tone-fill-text: var(--seblify-color-strong-fill-text, #fff4e7);
+  --seblify-tone-surface: var(--seblify-color-strong-surface, #ffffff);
+  --seblify-tone-surface-hover: var(
+    --seblify-color-strong-surface-hover,
+    #f2ebe4
+  );
+  --seblify-tone-text: var(--seblify-color-strong-text, #211916);
+  --seblify-tone-border: var(--seblify-color-strong-border, #c5afa0);
+  --seblify-tone-derived-surface: var(
+    --seblify-color-strong-derived-surface,
+    color-mix(
+      in srgb,
+      var(--seblify-tone-fill) 10%,
+      var(--seblify-color-surface, #fffdf9) 90%
+    )
+  );
+  --seblify-tone-derived-border: var(
+    --seblify-color-strong-derived-border,
+    color-mix(
+      in srgb,
+      var(--seblify-tone-fill) 26%,
+      var(--seblify-color-border-strong, #c5afa0) 74%
+    )
+  );
+  --seblify-tone-derived-text: var(
+    --seblify-color-strong-derived-text,
+    color-mix(
+      in srgb,
+      var(--seblify-tone-fill) 66%,
+      var(--seblify-color-text-muted, #6f5f55) 34%
+    )
+  );
+  --seblify-tone-on-inverse-surface: var(
+    --seblify-color-strong-on-inverse-surface,
+    color-mix(
+      in srgb,
+      var(--seblify-color-text-inverse, #fff4e7) 14%,
+      var(--seblify-color-surface-inverse, #15110f) 86%
+    )
+  );
+  --seblify-tone-on-inverse-surface-hover: var(
+    --seblify-color-strong-on-inverse-surface-hover,
+    color-mix(
+      in srgb,
+      var(--seblify-color-text-inverse, #fff4e7) 22%,
+      var(--seblify-color-surface-inverse, #15110f) 78%
+    )
+  );
+  --seblify-tone-on-inverse-text: var(
+    --seblify-color-strong-on-inverse-text,
+    var(--seblify-color-text-inverse, #fff4e7)
+  );
+  --seblify-tone-on-inverse-border: var(
+    --seblify-color-strong-on-inverse-border,
+    color-mix(
+      in srgb,
+      var(--seblify-color-text-inverse, #fff4e7) 42%,
+      var(--seblify-color-border-inverse, #4a3b32) 58%
+    )
+  );
+}
+
+:where(.seblify-tone-context[data-seblify-tone='primary']) {
+  --seblify-tone-fill: var(--seblify-color-primary-fill, #b43f5a);
+  --seblify-tone-fill-hover: var(--seblify-color-primary-fill-hover, #9f334d);
+  --seblify-tone-fill-text: var(--seblify-color-primary-fill-text, #fff4e7);
+  --seblify-tone-surface: var(--seblify-color-primary-surface, #fae8ed);
+  --seblify-tone-surface-hover: var(
+    --seblify-color-primary-surface-hover,
+    #f5d5dd
+  );
+  --seblify-tone-text: var(--seblify-color-primary-text, #8f2b43);
+  --seblify-tone-border: var(--seblify-color-primary-border, #e6a6b5);
+  --seblify-tone-derived-surface: var(
+    --seblify-color-primary-derived-surface,
+    var(
+      --seblify-color-neutral-derived-surface,
+      var(--seblify-color-surface-muted, #f2ebe4)
+    )
+  );
+  --seblify-tone-derived-border: var(
+    --seblify-color-primary-derived-border,
+    var(
+      --seblify-color-neutral-derived-border,
+      color-mix(
+        in srgb,
+        var(--seblify-color-neutral-fill, #6f5f55) 22%,
+        var(--seblify-color-border-strong, #c5afa0) 78%
+      )
+    )
+  );
+  --seblify-tone-derived-text: var(
+    --seblify-color-primary-derived-text,
+    var(
+      --seblify-color-neutral-derived-text,
+      var(--seblify-color-text-subtle, #8b7a70)
+    )
+  );
+  --seblify-tone-on-inverse-surface: var(
+    --seblify-color-primary-on-inverse-surface,
+    color-mix(
+      in srgb,
+      var(--seblify-color-primary-fill, #b43f5a) 22%,
+      var(--seblify-color-surface-inverse, #15110f) 78%
+    )
+  );
+  --seblify-tone-on-inverse-surface-hover: var(
+    --seblify-color-primary-on-inverse-surface-hover,
+    color-mix(
+      in srgb,
+      var(--seblify-color-primary-fill, #b43f5a) 32%,
+      var(--seblify-color-surface-inverse, #15110f) 68%
+    )
+  );
+  --seblify-tone-on-inverse-text: var(
+    --seblify-color-primary-on-inverse-text,
+    var(--seblify-color-primary-fill, #b43f5a)
+  );
+  --seblify-tone-on-inverse-border: var(
+    --seblify-color-primary-on-inverse-border,
+    var(--seblify-color-primary-border, #e6a6b5)
+  );
+}
+
+:where(.seblify-tone-context[data-seblify-tone='secondary']) {
+  --seblify-tone-fill: var(--seblify-color-secondary-fill, #6f3a55);
+  --seblify-tone-fill-hover: var(--seblify-color-secondary-fill-hover, #5e2f47);
+  --seblify-tone-fill-text: var(--seblify-color-secondary-fill-text, #fff4e7);
+  --seblify-tone-surface: var(--seblify-color-secondary-surface, #f4e5ee);
+  --seblify-tone-surface-hover: var(
+    --seblify-color-secondary-surface-hover,
+    #ecd3e0
+  );
+  --seblify-tone-text: var(--seblify-color-secondary-text, #6f3a55);
+  --seblify-tone-border: var(--seblify-color-secondary-border, #d7a6bf);
+  --seblify-tone-derived-surface: var(
+    --seblify-color-secondary-derived-surface,
+    var(
+      --seblify-color-neutral-derived-surface,
+      var(--seblify-color-surface-muted, #f2ebe4)
+    )
+  );
+  --seblify-tone-derived-border: var(
+    --seblify-color-secondary-derived-border,
+    var(
+      --seblify-color-neutral-derived-border,
+      color-mix(
+        in srgb,
+        var(--seblify-color-neutral-fill, #6f5f55) 22%,
+        var(--seblify-color-border-strong, #c5afa0) 78%
+      )
+    )
+  );
+  --seblify-tone-derived-text: var(
+    --seblify-color-secondary-derived-text,
+    var(
+      --seblify-color-neutral-derived-text,
+      var(--seblify-color-text-subtle, #8b7a70)
+    )
+  );
+  --seblify-tone-on-inverse-surface: var(
+    --seblify-color-secondary-on-inverse-surface,
+    color-mix(
+      in srgb,
+      var(--seblify-color-secondary-fill, #6f3a55) 22%,
+      var(--seblify-color-surface-inverse, #15110f) 78%
+    )
+  );
+  --seblify-tone-on-inverse-surface-hover: var(
+    --seblify-color-secondary-on-inverse-surface-hover,
+    color-mix(
+      in srgb,
+      var(--seblify-color-secondary-fill, #6f3a55) 32%,
+      var(--seblify-color-surface-inverse, #15110f) 68%
+    )
+  );
+  --seblify-tone-on-inverse-text: var(
+    --seblify-color-secondary-on-inverse-text,
+    var(--seblify-color-secondary-fill, #6f3a55)
+  );
+  --seblify-tone-on-inverse-border: var(
+    --seblify-color-secondary-on-inverse-border,
+    var(--seblify-color-secondary-border, #d7a6bf)
+  );
+}
+
+:where(.seblify-tone-context[data-seblify-tone='success']) {
+  --seblify-tone-fill: var(--seblify-color-success-fill, #777447);
+  --seblify-tone-fill-hover: var(--seblify-color-success-fill-hover, #66633c);
+  --seblify-tone-fill-text: var(--seblify-color-success-fill-text, #fff4e7);
+  --seblify-tone-surface: var(--seblify-color-success-surface, #eeeddf);
+  --seblify-tone-surface-hover: var(
+    --seblify-color-success-surface-hover,
+    #e1dfc4
+  );
+  --seblify-tone-text: var(--seblify-color-success-text, #5d5b34);
+  --seblify-tone-border: var(--seblify-color-success-border, #cbc790);
+  --seblify-tone-derived-surface: var(
+    --seblify-color-success-derived-surface,
+    var(
+      --seblify-color-neutral-derived-surface,
+      var(--seblify-color-surface-muted, #f2ebe4)
+    )
+  );
+  --seblify-tone-derived-border: var(
+    --seblify-color-success-derived-border,
+    var(
+      --seblify-color-neutral-derived-border,
+      color-mix(
+        in srgb,
+        var(--seblify-color-neutral-fill, #6f5f55) 22%,
+        var(--seblify-color-border-strong, #c5afa0) 78%
+      )
+    )
+  );
+  --seblify-tone-derived-text: var(
+    --seblify-color-success-derived-text,
+    var(
+      --seblify-color-neutral-derived-text,
+      var(--seblify-color-text-subtle, #8b7a70)
+    )
+  );
+  --seblify-tone-on-inverse-surface: var(
+    --seblify-color-success-on-inverse-surface,
+    color-mix(
+      in srgb,
+      var(--seblify-color-success-fill, #777447) 22%,
+      var(--seblify-color-surface-inverse, #15110f) 78%
+    )
+  );
+  --seblify-tone-on-inverse-surface-hover: var(
+    --seblify-color-success-on-inverse-surface-hover,
+    color-mix(
+      in srgb,
+      var(--seblify-color-success-fill, #777447) 32%,
+      var(--seblify-color-surface-inverse, #15110f) 68%
+    )
+  );
+  --seblify-tone-on-inverse-text: var(
+    --seblify-color-success-on-inverse-text,
+    var(--seblify-color-success-fill, #777447)
+  );
+  --seblify-tone-on-inverse-border: var(
+    --seblify-color-success-on-inverse-border,
+    var(--seblify-color-success-border, #cbc790)
+  );
+}
+
+:where(.seblify-tone-context[data-seblify-tone='danger']) {
+  --seblify-tone-fill: var(--seblify-color-danger-fill, #b83d45);
+  --seblify-tone-fill-hover: var(--seblify-color-danger-fill-hover, #9f3239);
+  --seblify-tone-fill-text: var(--seblify-color-danger-fill-text, #fff4e7);
+  --seblify-tone-surface: var(--seblify-color-danger-surface, #fae7e8);
+  --seblify-tone-surface-hover: var(
+    --seblify-color-danger-surface-hover,
+    #f3d2d4
+  );
+  --seblify-tone-text: var(--seblify-color-danger-text, #923038);
+  --seblify-tone-border: var(--seblify-color-danger-border, #e2a2a7);
+  --seblify-tone-derived-surface: var(
+    --seblify-color-danger-derived-surface,
+    var(
+      --seblify-color-neutral-derived-surface,
+      var(--seblify-color-surface-muted, #f2ebe4)
+    )
+  );
+  --seblify-tone-derived-border: var(
+    --seblify-color-danger-derived-border,
+    var(
+      --seblify-color-neutral-derived-border,
+      color-mix(
+        in srgb,
+        var(--seblify-color-neutral-fill, #6f5f55) 22%,
+        var(--seblify-color-border-strong, #c5afa0) 78%
+      )
+    )
+  );
+  --seblify-tone-derived-text: var(
+    --seblify-color-danger-derived-text,
+    var(
+      --seblify-color-neutral-derived-text,
+      var(--seblify-color-text-subtle, #8b7a70)
+    )
+  );
+  --seblify-tone-on-inverse-surface: var(
+    --seblify-color-danger-on-inverse-surface,
+    color-mix(
+      in srgb,
+      var(--seblify-color-danger-fill, #b83d45) 22%,
+      var(--seblify-color-surface-inverse, #15110f) 78%
+    )
+  );
+  --seblify-tone-on-inverse-surface-hover: var(
+    --seblify-color-danger-on-inverse-surface-hover,
+    color-mix(
+      in srgb,
+      var(--seblify-color-danger-fill, #b83d45) 32%,
+      var(--seblify-color-surface-inverse, #15110f) 68%
+    )
+  );
+  --seblify-tone-on-inverse-text: var(
+    --seblify-color-danger-on-inverse-text,
+    var(--seblify-color-danger-fill, #b83d45)
+  );
+  --seblify-tone-on-inverse-border: var(
+    --seblify-color-danger-on-inverse-border,
+    var(--seblify-color-danger-border, #e2a2a7)
+  );
+}
+
+:where(.seblify-tone-context[data-seblify-tone='warning']) {
+  --seblify-tone-fill: var(--seblify-color-warning-fill, #9a6d24);
+  --seblify-tone-fill-hover: var(--seblify-color-warning-fill-hover, #805918);
+  --seblify-tone-fill-text: var(--seblify-color-warning-fill-text, #fff4e7);
+  --seblify-tone-surface: var(--seblify-color-warning-surface, #f8edd8);
+  --seblify-tone-surface-hover: var(
+    --seblify-color-warning-surface-hover,
+    #efddbd
+  );
+  --seblify-tone-text: var(--seblify-color-warning-text, #7a5418);
+  --seblify-tone-border: var(--seblify-color-warning-border, #d8b46c);
+  --seblify-tone-derived-surface: var(
+    --seblify-color-warning-derived-surface,
+    var(
+      --seblify-color-neutral-derived-surface,
+      var(--seblify-color-surface-muted, #f2ebe4)
+    )
+  );
+  --seblify-tone-derived-border: var(
+    --seblify-color-warning-derived-border,
+    var(
+      --seblify-color-neutral-derived-border,
+      color-mix(
+        in srgb,
+        var(--seblify-color-neutral-fill, #6f5f55) 22%,
+        var(--seblify-color-border-strong, #c5afa0) 78%
+      )
+    )
+  );
+  --seblify-tone-derived-text: var(
+    --seblify-color-warning-derived-text,
+    var(
+      --seblify-color-neutral-derived-text,
+      var(--seblify-color-text-subtle, #8b7a70)
+    )
+  );
+  --seblify-tone-on-inverse-surface: var(
+    --seblify-color-warning-on-inverse-surface,
+    color-mix(
+      in srgb,
+      var(--seblify-color-warning-fill, #9a6d24) 22%,
+      var(--seblify-color-surface-inverse, #15110f) 78%
+    )
+  );
+  --seblify-tone-on-inverse-surface-hover: var(
+    --seblify-color-warning-on-inverse-surface-hover,
+    color-mix(
+      in srgb,
+      var(--seblify-color-warning-fill, #9a6d24) 32%,
+      var(--seblify-color-surface-inverse, #15110f) 68%
+    )
+  );
+  --seblify-tone-on-inverse-text: var(
+    --seblify-color-warning-on-inverse-text,
+    var(--seblify-color-warning-fill, #9a6d24)
+  );
+  --seblify-tone-on-inverse-border: var(
+    --seblify-color-warning-on-inverse-border,
+    var(--seblify-color-warning-border, #d8b46c)
+  );
+}
+
+:where(.seblify-tone-context[data-seblify-tone='info']) {
+  --seblify-tone-fill: var(--seblify-color-info-fill, #a5664a);
+  --seblify-tone-fill-hover: var(--seblify-color-info-fill-hover, #8f543b);
+  --seblify-tone-fill-text: var(--seblify-color-info-fill-text, #fff4e7);
+  --seblify-tone-surface: var(--seblify-color-info-surface, #f6e6de);
+  --seblify-tone-surface-hover: var(
+    --seblify-color-info-surface-hover,
+    #edd3c6
+  );
+  --seblify-tone-text: var(--seblify-color-info-text, #844932);
+  --seblify-tone-border: var(--seblify-color-info-border, #d49d85);
+  --seblify-tone-derived-surface: var(
+    --seblify-color-info-derived-surface,
+    var(
+      --seblify-color-neutral-derived-surface,
+      var(--seblify-color-surface-muted, #f2ebe4)
+    )
+  );
+  --seblify-tone-derived-border: var(
+    --seblify-color-info-derived-border,
+    var(
+      --seblify-color-neutral-derived-border,
+      color-mix(
+        in srgb,
+        var(--seblify-color-neutral-fill, #6f5f55) 22%,
+        var(--seblify-color-border-strong, #c5afa0) 78%
+      )
+    )
+  );
+  --seblify-tone-derived-text: var(
+    --seblify-color-info-derived-text,
+    var(
+      --seblify-color-neutral-derived-text,
+      var(--seblify-color-text-subtle, #8b7a70)
+    )
+  );
+  --seblify-tone-on-inverse-surface: var(
+    --seblify-color-info-on-inverse-surface,
+    color-mix(
+      in srgb,
+      var(--seblify-color-info-fill, #a5664a) 22%,
+      var(--seblify-color-surface-inverse, #15110f) 78%
+    )
+  );
+  --seblify-tone-on-inverse-surface-hover: var(
+    --seblify-color-info-on-inverse-surface-hover,
+    color-mix(
+      in srgb,
+      var(--seblify-color-info-fill, #a5664a) 32%,
+      var(--seblify-color-surface-inverse, #15110f) 68%
+    )
+  );
+  --seblify-tone-on-inverse-text: var(
+    --seblify-color-info-on-inverse-text,
+    var(--seblify-color-info-fill, #a5664a)
+  );
+  --seblify-tone-on-inverse-border: var(
+    --seblify-color-info-on-inverse-border,
+    var(--seblify-color-info-border, #d49d85)
+  );
+}
+
+:where(.seblify-tone-context[data-seblify-surface='inverse']) {
+  --seblify-tone-control-surface: var(--seblify-tone-on-inverse-surface);
+  --seblify-tone-control-surface-hover: var(
+    --seblify-tone-on-inverse-surface-hover
+  );
+  --seblify-tone-control-default-text: var(
+    --seblify-color-text-inverse,
+    #fff4e7
+  );
+  --seblify-tone-control-text: var(--seblify-tone-on-inverse-text);
+  --seblify-tone-control-border: var(--seblify-tone-on-inverse-border);
+  --seblify-tone-control-derived-surface: color-mix(
+    in srgb,
+    var(--seblify-tone-on-inverse-surface) 70%,
+    var(--seblify-color-surface-inverse, #15110f) 30%
+  );
+  --seblify-tone-control-derived-border: color-mix(
+    in srgb,
+    var(--seblify-tone-on-inverse-border) 72%,
+    var(--seblify-color-border-inverse, #4a3b32) 28%
+  );
+  --seblify-tone-control-derived-text: var(--seblify-tone-on-inverse-text);
+}
+
+:where(
+  .seblify-tone-context[data-seblify-surface='inverse'][data-seblify-tone='strong']
+) {
+  --seblify-tone-control-fill: var(--seblify-color-text-inverse, #fff4e7);
+  --seblify-tone-control-fill-hover: color-mix(
+    in srgb,
+    var(--seblify-color-text-inverse, #fff4e7) 88%,
+    var(--seblify-color-surface-inverse, #15110f) 12%
+  );
+  --seblify-tone-control-fill-text: var(--seblify-color-text, #211916);
+}
+
+:where(.seblify-tone-publisher) {
+  --seblify-current-tone-fill: var(--seblify-tone-fill);
+  --seblify-current-tone-fill-hover: var(--seblify-tone-fill-hover);
+  --seblify-current-tone-fill-text: var(--seblify-tone-fill-text);
+  --seblify-current-tone-surface: var(--seblify-tone-surface);
+  --seblify-current-tone-surface-hover: var(--seblify-tone-surface-hover);
+  --seblify-current-tone-text: var(--seblify-tone-text);
+  --seblify-current-tone-border: var(--seblify-tone-border);
+  --seblify-current-tone-derived-surface: var(--seblify-tone-derived-surface);
+  --seblify-current-tone-derived-border: var(--seblify-tone-derived-border);
+  --seblify-current-tone-derived-text: var(--seblify-tone-derived-text);
+  --seblify-current-tone-on-inverse-surface: var(
+    --seblify-tone-on-inverse-surface
+  );
+  --seblify-current-tone-on-inverse-surface-hover: var(
+    --seblify-tone-on-inverse-surface-hover
+  );
+  --seblify-current-tone-on-inverse-text: var(--seblify-tone-on-inverse-text);
+  --seblify-current-tone-on-inverse-border: var(
+    --seblify-tone-on-inverse-border
+  );
+}
+
+.timed-button {
+    --timed-button-fill: var(--seblify-tone-fill);
+    --timed-button-fill-hover: var(--seblify-tone-fill-hover);
+    --timed-button-fill-text: var(--seblify-tone-fill-text);
+    --timed-button-surface: var(--seblify-tone-surface);
+    --timed-button-surface-hover: var(--seblify-tone-surface-hover);
+    --timed-button-default-text: var(--seblify-color-text, #211916);
+    --timed-button-text: var(--seblify-tone-text);
+    --timed-button-border: var(--seblify-tone-border);
+    --timed-button-progress-color: color-mix(
+      in srgb,
+      currentColor 18%,
+      transparent
+    );
+
+    position: relative;
+    display: inline-flex;
+    width: fit-content;
+    max-width: 100%;
+    min-height: var(--timed-button-height);
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    border: 1px solid transparent;
+    border-radius: var(--timed-button-radius);
+    padding-block: 0;
+    padding-inline: var(--timed-button-padding-inline);
+    background: transparent;
+    box-sizing: border-box;
+    color: var(--timed-button-text);
+    cursor: pointer;
+    font: inherit;
+    font-size: 0.875rem;
+    font-weight: 800;
+    line-height: 1.2;
+    text-align: center;
+    text-decoration: none;
+    vertical-align: middle;
+    transition:
+      background-color 140ms ease,
+      border-color 140ms ease,
+      color 140ms ease,
+      box-shadow 140ms ease,
+      transform 120ms ease;
+  }
+
+.full-width {
+    width: 100%;
+  }
+
+.timed-button__inner {
+    --seblify-current-size: var(--timed-button-icon-size);
+
+    position: relative;
+    z-index: 1;
+    display: inline-flex;
+    min-width: 0;
+    align-items: center;
+    justify-content: center;
+    gap: var(--timed-button-gap);
+  }
+
+.timed-button__content {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+.timed-button__media,
+  .timed-button__spinner {
+    display: inline-flex;
+    width: var(--timed-button-icon-size);
+    height: var(--timed-button-icon-size);
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    line-height: 0;
+  }
+
+.timed-button__progress {
+    position: absolute;
+    z-index: 0;
+    inset: 0;
+    background: var(--timed-button-progress-color);
+    pointer-events: none;
+    transform-origin: left center;
+  }
+
+.timed-button[data-direction='empty'] .timed-button__progress {
+    animation: timed-button-empty var(--timed-button-duration) linear forwards;
+  }
+
+.timed-button[data-direction='fill'] .timed-button__progress {
+    animation: timed-button-fill var(--timed-button-duration) linear forwards;
+  }
+
+.timed-button[data-variant='solid'] {
+    border-color: var(--timed-button-fill);
+    background: var(--timed-button-fill);
+    color: var(--timed-button-fill-text);
+    box-shadow: var(--seblify-shadow-control, 0 1px 3px rgb(16 24 40 / 24%));
+  }
+
+.timed-button[data-variant='soft'] {
+    background: var(--timed-button-surface);
+    color: var(--timed-button-default-text);
+  }
+
+.timed-button[data-variant='tint'] {
+    background: var(--timed-button-surface);
+    color: var(--timed-button-text);
+  }
+
+.timed-button[data-variant='outline'] {
+    border-color: var(--timed-button-border);
+    color: var(--timed-button-text);
+  }
+
+.timed-button[data-variant='plain'] {
+    color: var(--timed-button-text);
+  }
+
+.timed-button:not(:disabled):hover {
+    background: var(--timed-button-surface-hover);
+  }
+
+.timed-button[data-variant='solid']:not(:disabled):hover {
+    border-color: var(--timed-button-fill-hover);
+    background: var(--timed-button-fill-hover);
+  }
+
+.timed-button:not(:disabled):active {
+    transform: translateY(1px);
+  }
+
+.timed-button:focus-visible {
+    outline: 3px solid var(--seblify-color-focus-ring, #b43f5a);
+    outline-offset: 2px;
+  }
+
+.timed-button:disabled {
+    cursor: not-allowed;
+    opacity: var(--seblify-opacity-disabled, 0.56);
+  }
+
+.timed-button[data-loading='true'] {
+    cursor: progress;
+  }
+
+.timed-button__spinner {
+    border: max(2px, calc(var(--timed-button-icon-size) / 8)) solid currentColor;
+    border-block-start-color: transparent;
+    border-radius: 999px;
+    animation: timed-button-spin 800ms linear infinite;
+  }
+
+@keyframes timed-button-empty {
+    from {
+      transform: scaleX(1);
+    }
+
+    to {
+      transform: scaleX(0);
+    }
+  }
+
+@keyframes timed-button-fill {
+    from {
+      transform: scaleX(0);
+    }
+
+    to {
+      transform: scaleX(1);
+    }
+  }
+
+@keyframes timed-button-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+@media (prefers-reduced-motion: reduce) {
+    .timed-button {
+      transition-duration: 0ms;
+    }
+
+    .timed-button__spinner {
+      animation-duration: 1400ms;
+    }
+  }
+</style>