seblify 0.2.1 → 0.4.0

package/dist/components/action/button/toggle-button/ToggleButton.svelte

@@ -0,0 +1,1109 @@
+<script lang="ts">
+  import type { CustomCssSize, SeblifyProps } from 'seblify';
+  import type { Snippet } from 'svelte';
+  import { onMount } from 'svelte';
+  import { getToggleButtonGroupContext } from '../toggle-button-group/context';
+
+  type ToggleButtonRadius =
+    | 'none'
+    | 'sm'
+    | 'md'
+    | 'lg'
+    | 'full'
+    | CustomCssSize;
+  type ToggleButtonSize = 'sm' | 'md' | 'lg' | 'xl' | CustomCssSize;
+  type ToggleButtonTone =
+    | 'neutral'
+    | 'strong'
+    | 'primary'
+    | 'secondary'
+    | 'success'
+    | 'danger'
+    | 'warning'
+    | 'info';
+  type ToggleButtonType = 'button' | 'submit' | 'reset';
+  type ToggleButtonVariant = 'solid' | 'soft' | 'tint' | 'outline' | 'plain';
+
+  type Props = SeblifyProps<{
+    [key: string]: unknown;
+    ariaLabel?: string;
+    children?: Snippet;
+    class?: string;
+    disabled?: boolean;
+    end?: Snippet;
+    fullWidth?: boolean;
+    iconOnly?: boolean;
+    label?: string;
+    onclick?: (event: MouseEvent) => void;
+    pressed?: boolean;
+    radius?: ToggleButtonRadius;
+    size?: ToggleButtonSize;
+    start?: Snippet;
+    tone?: ToggleButtonTone;
+    type?: ToggleButtonType;
+    value?: string;
+    variant?: ToggleButtonVariant;
+  }>;
+
+  const TOGGLE_BUTTON_SIZE_MAP: Record<
+    Exclude<ToggleButtonSize, 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 TOGGLE_BUTTON_RADIUS_MAP: Record<
+    Exclude<ToggleButtonRadius, CustomCssSize>,
+    string
+  > = {
+    none: '0',
+    sm: '0.25rem',
+    md: '0.375rem',
+    lg: '0.5rem',
+    full: '999px',
+  };
+
+  let {
+    ariaLabel,
+    children,
+    class: className,
+    disabled = false,
+    end,
+    fullWidth = false,
+    iconOnly = false,
+    label,
+    onclick,
+    pressed = $bindable(false),
+    radius = 'md',
+    size = 'md',
+    start,
+    tone = 'primary',
+    type = 'button',
+    value,
+    variant = 'soft',
+    ...restProps
+  }: Props = $props();
+
+  const group = getToggleButtonGroupContext();
+  let isRegisteredWithGroup = $state(false);
+
+  function cssSize(value: CustomCssSize): string {
+    return typeof value === 'number' ? `${value}px` : value;
+  }
+
+  function resolveSizeConfig(value: ToggleButtonSize) {
+    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 =
+      TOGGLE_BUTTON_SIZE_MAP[value as keyof typeof TOGGLE_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: ToggleButtonRadius): string {
+    if (typeof value === 'number') {
+      return cssSize(value);
+    }
+
+    return (
+      TOGGLE_BUTTON_RADIUS_MAP[
+        value as keyof typeof TOGGLE_BUTTON_RADIUS_MAP
+      ] ?? value
+    );
+  }
+
+  function handleClick(event: MouseEvent) {
+    onclick?.(event);
+
+    if (event.defaultPrevented) {
+      return;
+    }
+
+    if (group && value) {
+      group.toggle(value);
+      pressed = group.isPressed(value);
+      return;
+    }
+
+    pressed = !pressed;
+  }
+
+  const sizeConfig = $derived(resolveSizeConfig(size));
+  const radiusValue = $derived(resolveRadiusValue(radius));
+  const accessibleLabel = $derived(ariaLabel ?? (iconOnly ? label : undefined));
+
+  onMount(() => {
+    if (!group || !value) {
+      return;
+    }
+
+    group.register(value, pressed);
+    pressed = group.isPressed(value);
+    isRegisteredWithGroup = true;
+
+    return () => {
+      isRegisteredWithGroup = false;
+      group.unregister(value);
+    };
+  });
+
+  $effect(() => {
+    if (!group || !value || !isRegisteredWithGroup) {
+      return;
+    }
+
+    const groupPressed = group.isPressed(value);
+
+    if (pressed !== groupPressed) {
+      pressed = groupPressed;
+    }
+  });
+</script>
+
+<button
+  {...restProps}
+  aria-label={accessibleLabel}
+  aria-pressed={pressed}
+  class={`toggle-button seblify-tone-context${className ? ` ${className}` : ''}`}
+  class:full-width={fullWidth}
+  class:icon-only={iconOnly}
+  data-pressed={pressed}
+  data-seblify-tone={tone}
+  data-variant={variant}
+  {disabled}
+  onclick={handleClick}
+  style:--toggle-button-gap={sizeConfig.gap}
+  style:--toggle-button-height={sizeConfig.height}
+  style:--toggle-button-icon-size={sizeConfig.icon}
+  style:--toggle-button-padding-inline={sizeConfig.padding}
+  style:--toggle-button-radius={radiusValue}
+  {type}
+>
+  <span class="toggle-button__inner seblify-tone-publisher">
+    {#if start}
+      <span class="toggle-button__media" aria-hidden="true">
+        {@render start()}
+      </span>
+    {/if}
+
+    {#if children}
+      <span class="toggle-button__content">
+        {@render children()}
+      </span>
+    {:else if !iconOnly}
+      <span class="toggle-button__content">
+        {label}
+      </span>
+    {/if}
+
+    {#if end}
+      <span class="toggle-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
+  );
+}
+
+.toggle-button {
+    --toggle-button-fill: var(--seblify-tone-fill);
+    --toggle-button-fill-hover: var(--seblify-tone-fill-hover);
+    --toggle-button-fill-text: var(--seblify-tone-fill-text);
+    --toggle-button-surface: var(--seblify-tone-surface);
+    --toggle-button-surface-hover: var(--seblify-tone-surface-hover);
+    --toggle-button-default-surface: var(
+      --seblify-color-surface-muted,
+      #f2ebe4
+    );
+    --toggle-button-default-surface-hover: var(
+      --seblify-color-surface-hover,
+      #ebe1d8
+    );
+    --toggle-button-default-text: var(--seblify-color-text, #211916);
+    --toggle-button-text: var(--seblify-tone-text);
+    --toggle-button-border: var(--seblify-tone-border);
+    --toggle-button-default-border: var(--seblify-color-border-strong, #c5afa0);
+
+    display: inline-flex;
+    width: fit-content;
+    max-width: 100%;
+    min-height: var(--toggle-button-height);
+    align-items: center;
+    justify-content: center;
+    border: 1px solid transparent;
+    border-radius: var(--toggle-button-radius);
+    padding-block: 0;
+    padding-inline: var(--toggle-button-padding-inline);
+    background: transparent;
+    box-sizing: border-box;
+    color: var(--toggle-button-default-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%;
+  }
+
+.icon-only {
+    width: var(--toggle-button-height);
+    padding-inline: 0;
+  }
+
+.toggle-button__inner {
+    --seblify-current-size: var(--toggle-button-icon-size);
+
+    display: inline-flex;
+    min-width: 0;
+    align-items: center;
+    justify-content: center;
+    gap: var(--toggle-button-gap);
+  }
+
+.toggle-button__content {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+.toggle-button__media {
+    display: inline-flex;
+    width: var(--toggle-button-icon-size);
+    height: var(--toggle-button-icon-size);
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    line-height: 0;
+  }
+
+.toggle-button[data-variant='solid'] {
+    background: var(--toggle-button-default-surface);
+    color: var(--toggle-button-default-text);
+  }
+
+.toggle-button[data-variant='solid'][data-pressed='true'] {
+    border-color: var(--toggle-button-fill);
+    background: var(--toggle-button-fill);
+    color: var(--toggle-button-fill-text);
+    box-shadow: var(--seblify-shadow-control, 0 1px 3px rgb(16 24 40 / 24%));
+  }
+
+.toggle-button[data-variant='soft'] {
+    background: var(--toggle-button-default-surface);
+    color: var(--toggle-button-default-text);
+  }
+
+.toggle-button[data-variant='soft'][data-pressed='true'],
+  .toggle-button[data-variant='tint'][data-pressed='true'] {
+    background: var(--toggle-button-surface);
+    color: var(--toggle-button-text);
+  }
+
+.toggle-button[data-variant='outline'] {
+    border-color: var(--toggle-button-default-border);
+    color: var(--toggle-button-default-text);
+  }
+
+.toggle-button[data-variant='outline'][data-pressed='true'] {
+    border-color: var(--toggle-button-border);
+    background: var(--toggle-button-surface);
+    color: var(--toggle-button-text);
+  }
+
+.toggle-button[data-variant='plain'][data-pressed='true'] {
+    background: var(--toggle-button-surface);
+    color: var(--toggle-button-text);
+  }
+
+.toggle-button:not(:disabled):hover {
+    background: var(--toggle-button-default-surface-hover);
+  }
+
+.toggle-button[data-pressed='true']:not(:disabled):hover {
+    background: var(--toggle-button-surface-hover);
+  }
+
+.toggle-button[data-variant='solid'][data-pressed='true']:not(
+      :disabled
+    ):hover {
+    border-color: var(--toggle-button-fill-hover);
+    background: var(--toggle-button-fill-hover);
+  }
+
+.toggle-button:not(:disabled):active {
+    transform: translateY(1px);
+  }
+
+.toggle-button:focus-visible {
+    outline: 3px solid var(--seblify-color-focus-ring, #b43f5a);
+    outline-offset: 2px;
+  }
+
+.toggle-button:disabled {
+    cursor: not-allowed;
+    opacity: var(--seblify-opacity-disabled, 0.56);
+  }
+
+@media (prefers-reduced-motion: reduce) {
+    .toggle-button {
+      transition-duration: 0ms;
+    }
+  }
+</style>