@lostgradient/cinder 0.5.0 → 0.6.0

package/src/components/bento-grid/bento-grid.types.ts

@@ -1,33 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-
-/** Column definition accepted by BentoGrid. */
-export type BentoGridColumns = number | string;
-
-/** Props for the BentoGrid component. */
-export type BentoGridProps = Omit<HTMLAttributes<HTMLElement>, 'class'> & {
-  /**
-   * Positive integer number of equal-width columns or a full CSS
-   * `grid-template-columns` value.
-   * Numeric values render as `repeat(<columns>, minmax(0, 1fr))`.
-   */
-  columns?: BentoGridColumns;
-  /** Uniform row and column gap. */
-  gap?: string;
-  /** Row gap override. Wins over `gap` for rows. */
-  rowGap?: string;
-  /** Column gap override. Wins over `gap` for columns. */
-  columnGap?: string;
-  /**
-   * Enables a narrow-screen fallback where BentoGrid becomes a single column
-   * and BentoCell placement resets to auto flow.
-   * @default true
-   */
-  collapse?: boolean;
-  /** Rendered HTML tag. */
-  as?: string;
-  /** Custom class merged with `.cinder-bento-grid`. */
-  class?: string;
-  /** Bento grid contents. */
-  children: Snippet;
-};

package/src/components/bento-grid/index.ts

@@ -1,12 +0,0 @@
-import BentoCell from '../bento-cell/bento-cell.svelte';
-import './bento-grid.css';
-import BentoGridRoot from './bento-grid.svelte';
-
-const BentoGrid = Object.assign(BentoGridRoot, {
-  Cell: BentoCell,
-});
-
-export default BentoGrid;
-export type { BentoCellProps } from '../bento-cell/bento-cell.types.ts';
-export type { BentoGridColumns, BentoGridProps } from './bento-grid.types.ts';
-export { BentoGrid };

package/src/components/blog-section/blog-section.svelte

@@ -1,107 +0,0 @@
-<script lang="ts" module>
-  /**
-   * @cinder
-   * @category domain
-   * @status stable
-   * @purpose Blog/article listing section that renders post cards with metadata, excerpt text, and author attribution.
-   * @tag marketing
-   * @tag blog
-   * @tag content
-   * @useWhen Showing recent posts or resources on a landing page.
-   * @useWhen Building a featured-articles grid with author and publish metadata.
-   * @avoidWhen Rendering partner logos or brand marks only. | logo-cloud
-   * @avoidWhen Presenting customer testimonials in quote format. | testimonial-section
-   * @related logo-cloud, testimonial-section, card, avatar, container
-   */
-  export type { BlogSectionPost, BlogSectionProps } from './blog-section.types.ts';
-</script>
-
-<script lang="ts">
-  import Avatar from '../avatar/avatar.svelte';
-  import Container from '../container/container.svelte';
-  import { classNames } from '../../utilities/class-names.ts';
-
-  import type { BlogSectionProps } from './blog-section.types.ts';
-
-  let {
-    as = 'section',
-    title,
-    description,
-    posts,
-    columns = 3,
-    maxWidth = 'wide',
-    class: className,
-    ...rest
-  }: BlogSectionProps = $props();
-
-  function avatarProps(name: string, src: string | undefined): { name: string; src?: string } {
-    return src ? { name, src } : { name };
-  }
-
-  function postMetadata(category: string | undefined, publishedAt: string | undefined): string {
-    return [category, publishedAt].filter(Boolean).join(' · ');
-  }
-</script>
-
-<svelte:element
-  this={as}
-  class={classNames('cinder-blog-section', className)}
-  data-cinder-columns={String(columns)}
-  {...rest}
->
-  <Container {maxWidth}>
-    <div class="cinder-blog-section__inner">
-      {#if title || description}
-        <header class="cinder-blog-section__header">
-          {#if title}
-            <h2 class="cinder-blog-section__title">{title}</h2>
-          {/if}
-          {#if description}
-            <p class="cinder-blog-section__description">{description}</p>
-          {/if}
-        </header>
-      {/if}
-
-      <ul class="cinder-blog-section__list">
-        {#each posts as post, index (`${post.title}-${index}`)}
-          <li class="cinder-blog-section__item">
-            <article class="cinder-card" data-cinder-variant="card">
-              <div
-                class="cinder-card__body"
-                data-cinder-tone="default"
-                data-cinder-padding="default"
-              >
-                {#if post.imageSrc}
-                  <img
-                    class="cinder-blog-section__image"
-                    src={post.imageSrc}
-                    alt=""
-                    loading="lazy"
-                  />
-                {/if}
-                {#if post.category || post.publishedAt}
-                  <p class="cinder-blog-section__meta">
-                    {postMetadata(post.category, post.publishedAt)}
-                  </p>
-                {/if}
-                <h3 class="cinder-blog-section__post-title">
-                  <a href={post.href} class="cinder-blog-section__link">{post.title}</a>
-                </h3>
-                <p class="cinder-blog-section__excerpt">{post.excerpt}</p>
-                <div class="cinder-blog-section__author">
-                  <Avatar {...avatarProps(post.authorName, post.authorAvatarSrc)} size="sm" />
-                  <div class="cinder-blog-section__author-meta">
-                    <p class="cinder-blog-section__author-name">{post.authorName}</p>
-                    {#if post.authorRole}
-                      <p class="cinder-blog-section__author-role">{post.authorRole}</p>
-                    {/if}
-                  </div>
-                </div>
-              </div>
-            </article>
-          </li>
-        {/each}
-      </ul>
-    </div>
-  </Container>
-</svelte:element>

package/src/components/blog-section/blog-section.types.ts

@@ -1,59 +0,0 @@
-import type { HTMLAttributes } from 'svelte/elements';
-import type { ContainerMaxWidth } from '../container/container.types.ts';
-
-/** @schemaObject */
-export type BlogSectionPost = {
-  /** Post title text. */
-  title: string;
-  /** Summary/excerpt text. */
-  excerpt: string;
-  /** URL to the full article. */
-  href: string;
-  /** Optional category label. */
-  category?: string;
-  /** Optional thumbnail image source. */
-  imageSrc?: string;
-  /** Optional publish date string. */
-  publishedAt?: string;
-  /** Author display name. */
-  authorName: string;
-  /** Optional author role/title text. */
-  authorRole?: string;
-  /** Optional author avatar image source. */
-  authorAvatarSrc?: string;
-};
-
-/** Props for the BlogSection component. */
-export type BlogSectionProps = Omit<HTMLAttributes<HTMLElement>, 'children' | 'class'> & {
-  /** Wrapper element tag. @default "section" */
-  as?: 'section' | 'div';
-  /** Optional section heading text. */
-  title?: string;
-  /** Optional section description text. */
-  description?: string;
-  /** Posts to render in the section. */
-  posts: BlogSectionPost[];
-  /** Grid column count. @default 3 */
-  columns?: 1 | 2 | 3;
-  /** Max width token forwarded to Container. @default "wide" */
-  maxWidth?: ContainerMaxWidth;
-  /** Custom class merged with `.cinder-blog-section`. */
-  class?: string;
-};
-
-export interface BlogSectionSchemaProps {
-  /** Wrapper element tag. @default "section" */
-  as?: 'section' | 'div';
-  /** Optional section heading text. */
-  title?: string;
-  /** Optional section description text. */
-  description?: string;
-  /** Posts to render in the section. */
-  posts: BlogSectionPost[];
-  /** Grid column count. @default 3 */
-  columns?: 1 | 2 | 3;
-  /** Max width token forwarded to Container. @default "wide" */
-  maxWidth?: ContainerMaxWidth;
-  /** Custom class merged with `.cinder-blog-section`. */
-  class?: string;
-}

package/src/components/blog-section/index.ts

@@ -1,6 +0,0 @@
-import './blog-section.css';
-import BlogSection from './blog-section.svelte';
-
-export default BlogSection;
-export type { BlogSectionPost, BlogSectionProps } from './blog-section.types.ts';
-export { BlogSection };

package/src/components/breadcrumbs/breadcrumbs.svelte

@@ -1,51 +0,0 @@
-<script lang="ts" module>
-  /**
-   * @cinder
-   * @category navigation
-   * @status stable
-   * @purpose Hierarchical wayfinding trail showing the ancestor path of the current page with the final entry marked as aria-current.
-   * @tag navigation
-   * @tag wayfinding
-   * @useWhen Surfacing where the user sits inside a deep, nested hierarchy.
-   * @useWhen Letting the user jump back to any ancestor view in one click.
-   * @avoidWhen Switching between sibling sections at the same level — use navigation-bar or tabs.
-   * @avoidWhen Showing an ordered task progression — use steps instead.
-   * @related navigation-bar, side-navigation, steps
-   */
-  export type { BreadcrumbItem, BreadcrumbsProps } from './breadcrumbs.types.ts';
-</script>
-
-<script lang="ts">
-  import { classNames } from '../../utilities/class-names.ts';
-  import type { BreadcrumbsProps } from './breadcrumbs.types.ts';
-
-  let {
-    items,
-    separator = '/',
-    label = 'Breadcrumb',
-    class: className,
-  }: BreadcrumbsProps = $props();
-</script>
-
-<nav class={classNames('cinder-breadcrumbs', className)} aria-label={label}>
-  <ol class="cinder-breadcrumbs__list">
-    {#each items as item, index (index)}
-      {@const isLast = index === items.length - 1}
-      <li class="cinder-breadcrumbs__item">
-        {#if isLast}
-          <!-- Current page: rendered as plain text, not a link. -->
-          <span aria-current="page" class="cinder-breadcrumbs__current">{item.label}</span>
-        {:else}
-          <a class="cinder-breadcrumbs__link" href={item.href}>{item.label}</a>
-          <span class="cinder-breadcrumbs__separator" aria-hidden="true">
-            {#if typeof separator === 'string'}
-              {separator}
-            {:else}
-              {@render separator()}
-            {/if}
-          </span>
-        {/if}
-      </li>
-    {/each}
-  </ol>
-</nav>

package/src/components/breadcrumbs/breadcrumbs.types.ts

@@ -1,43 +0,0 @@
-import type { Snippet } from 'svelte';
-
-/**
- * One breadcrumb entry. The current page entry omits `href` so it renders
- * as plain text with `aria-current="page"`.
- */
-export type BreadcrumbItem = {
-  /** Visible label for the entry. */
-  label: string;
-  /** Link target. Omit for the current page (last entry). */
-  href?: string;
-};
-
-export type BreadcrumbsProps = {
-  /** Ordered list of breadcrumb entries from root to current page. */
-  items: BreadcrumbItem[];
-  /** Custom separator between entries. Defaults to "/". */
-  separator?: Snippet | string;
-  /** Accessible name for the nav landmark. Defaults to "Breadcrumb". */
-  label?: string;
-  /** Additional class names merged with `.cinder-breadcrumbs`. */
-  class?: string;
-};
-
-/**
- * Cinder-specific props for the Breadcrumbs component, used by the schema generator.
- * Excludes non-JSON-schemable props such as snippet render functions and structured
- * item arrays that are documented by the component itself.
- */
-export interface BreadcrumbsSchemaProps {
-  /**
-   * Custom string separator between entries.
-   * @default "/"
-   */
-  separator?: string;
-  /**
-   * Accessible name for the nav landmark.
-   * @default "Breadcrumb"
-   */
-  label?: string;
-  /** Additional class names merged with `.cinder-breadcrumbs`. */
-  class?: string;
-}

package/src/components/breadcrumbs/index.ts

@@ -1,6 +0,0 @@
-import './breadcrumbs.css';
-import Breadcrumbs from './breadcrumbs.svelte';
-
-export default Breadcrumbs;
-export type { BreadcrumbItem, BreadcrumbsProps } from './breadcrumbs.types.ts';
-export { Breadcrumbs };

package/src/components/button/button.constraints.ts

@@ -1,102 +0,0 @@
-import { defineConstraints } from '../../_internal/constraints.ts';
-
-export default defineConstraints({
-  component: 'button',
-  summary:
-    'Button requires exactly one visual content source and, when rendered icon-only, an accessible name from aria-label, aria-labelledby, or a non-empty label prop.',
-  rules: [
-    {
-      id: 'visual-content-source',
-      severity: 'error',
-      description:
-        'Button must have exactly one visual content source: a visible label (label + iconOnly false), children content (children + iconOnly false), or icon-only mode (iconOnly true with at least one icon or children)',
-      kind: 'exactlyOne',
-      of: [
-        // Branch 1: visible label text; iconOnly is false (default). Callers normalize the
-        // default value to false before evaluation — absent iconOnly is treated as false.
-        {
-          allOf: [
-            { prop: 'label', nonEmpty: true },
-            { prop: 'iconOnly', equals: false },
-          ],
-        },
-        // Branch 2: children snippet; iconOnly is false (default).
-        {
-          allOf: [{ snippet: 'children' }, { prop: 'iconOnly', equals: false }],
-        },
-        // Branch 3: icon-only mode — iconOnly must be true and at least one visual source present.
-        {
-          allOf: [
-            { prop: 'iconOnly', equals: true },
-            {
-              anyOf: [
-                { prop: 'leadingIcon', exists: true },
-                { prop: 'trailingIcon', exists: true },
-                { snippet: 'children' },
-              ],
-            },
-          ],
-        },
-      ],
-    },
-    {
-      id: 'accessible-name',
-      severity: 'error',
-      description:
-        'Icon-only buttons must have an accessible name via aria-label, aria-labelledby, or a non-empty label prop',
-      kind: 'anyOf',
-      when: { prop: 'iconOnly', equals: true },
-      of: [
-        { prop: 'aria-label', nonEmpty: true },
-        { prop: 'aria-labelledby', nonEmpty: true },
-        { prop: 'label', nonEmpty: true },
-      ],
-    },
-  ],
-  examples: {
-    valid: [
-      {
-        title: 'Visible label',
-        code: '<Button label="Save" />',
-      },
-      {
-        title: 'Children as content',
-        code: '<Button><span>Save</span></Button>',
-      },
-      {
-        title: 'Icon-only with label as accessible name',
-        code: '<Button iconOnly={true} label="Close">{@render closeIcon()}</Button>',
-      },
-      {
-        title: 'Icon-only with aria-label',
-        code: '<Button iconOnly={true} aria-label="Close">{@render closeIcon()}</Button>',
-      },
-      {
-        title: 'Icon-only with leadingIcon and label',
-        code: '<Button iconOnly={true} label="Settings">{@render settingsIcon()}</Button>',
-      },
-    ],
-    invalid: [
-      {
-        title: 'Icon-only with no accessible name',
-        code: '<Button iconOnly={true}>{@render closeIcon()}</Button>',
-        violates: 'accessible-name',
-      },
-      {
-        title: 'Both label and children as visual content',
-        code: '<Button label="Save"><span>Also save</span></Button>',
-        violates: 'visual-content-source',
-      },
-      {
-        title: 'No visual content at all',
-        code: '<Button />',
-        violates: 'visual-content-source',
-      },
-      {
-        title: 'Icon-only with no icon source',
-        code: '<Button iconOnly={true} label="Close" />',
-        violates: 'visual-content-source',
-      },
-    ],
-  },
-});

package/src/components/button/button.svelte

@@ -1,249 +0,0 @@
-<script lang="ts" module>
-  /**
-   * @cinder
-   * @category action
-   * @status stable
-   * @purpose Primary interactive control for triggering actions or rendering an anchor styled as a button via href.
-   * @tag action
-   * @tag cta
-   * @useWhen Triggering a discrete action such as submit, save, or delete.
-   * @useWhen Rendering a link that should look and behave like a button by passing href.
-   * @avoidWhen Toggling a binary on or off state — use toggle instead.
-   * @avoidWhen Selecting one of a small fixed set of options — use segmented-control instead.
-   * @related button-group, copy-button
-   */
-  export type { ButtonProps, ButtonSize, ButtonVariant } from './button.types.ts';
-</script>
-
-<script lang="ts">
-  import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
-
-  import { classNames } from '../../utilities/class-names.ts';
-  import { devWarn } from '../../utilities/dev-warn.ts';
-  import type { ButtonProps } from './button.types.ts';
-
-  // Destructured props let the Phase 4 analyzer read names + defaults straight off the AST.
-  // `...rest` carries the remaining native HTML attributes through to the underlying element.
-  //
-  // ARIA + onclick are destructured explicitly because:
-  //  - Leaving them in `rest` would cause Svelte's spread to render our internally-computed
-  //    values LAST, clobbering any consumer-provided aria-disabled / aria-busy. Destructuring
-  //    gives us control of the resolved value per attribute.
-  //  - `onclick` must be wrapped during `loading` so the consumer handler doesn't fire — just
-  //    stripping `href` blocks navigation but the click event still bubbles.
-  const {
-    variant = 'secondary',
-    size = 'md',
-    fullWidth = false,
-    loading = false,
-    iconOnly = false,
-    leadingIcon,
-    trailingIcon,
-    children,
-    label,
-    class: customClassName,
-    href,
-    onclick: consumerOnClick,
-    'aria-disabled': consumerAriaDisabled,
-    'aria-busy': consumerAriaBusy,
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy,
-    'aria-expanded': ariaExpanded,
-    'aria-controls': ariaControls,
-    'aria-haspopup': ariaHaspopup,
-    ...rest
-  }: ButtonProps = $props();
-
-  // Prop-derived values must use `$derived` so they update when the consumer flips a prop
-  // (most importantly `loading`) after the initial render.
-  const mergedClassName = $derived(classNames('cinder-button', customClassName));
-  const dataAttributes = $derived({
-    'data-cinder-variant': variant,
-    'data-cinder-size': size,
-    'data-cinder-full-width': fullWidth ? '' : undefined,
-    'data-cinder-loading': loading ? '' : undefined,
-    'data-cinder-icon-only': iconOnly ? '' : undefined,
-  });
-
-  // When loading, force aria-disabled/aria-busy to 'true' so assistive tech always hears the
-  // loading state. When not loading, preserve whatever the consumer passed so the component
-  // doesn't silently erase their intent.
-  const resolvedAriaDisabled = $derived(loading ? 'true' : consumerAriaDisabled);
-  const resolvedAriaBusy = $derived(loading ? 'true' : consumerAriaBusy);
-
-  // Normalize ARIA label props: an empty string `aria-label=""` suppresses text-content fallback
-  // in the accessible-name computation (ARIA spec §4.3) without providing a name. Convert empty
-  // strings to `undefined` so the DOM attribute is omitted and the fallback (sr-only label text,
-  // or button text content) remains the accessible name. Guards and sr-only suppression use the
-  // normalized values for consistency.
-  const resolvedAriaLabel = $derived(
-    typeof ariaLabel === 'string' && ariaLabel.trim().length > 0 ? ariaLabel : undefined,
-  );
-  const resolvedAriaLabelledBy = $derived(
-    typeof ariaLabelledBy === 'string' && ariaLabelledBy.trim().length > 0
-      ? ariaLabelledBy
-      : undefined,
-  );
-
-  // `rest` is typed as the union of both branches' attribute sets minus the keys we
-  // destructured. TypeScript can't narrow a destructured remainder per branch, so each
-  // template arm casts `rest` to the attribute shape its element actually accepts. The cast
-  // is safe because the `#if href !== undefined` discriminant has already chosen the branch.
-  // These are plain `const` casts — `rest` from `$props()` is already reactive, so the
-  // template spread re-reads consumer prop changes without an intermediate `$derived` node.
-  const anchorAttributes = rest as Omit<
-    HTMLAnchorAttributes,
-    | 'class'
-    | 'href'
-    | 'tabindex'
-    | 'onclick'
-    | 'aria-disabled'
-    | 'aria-busy'
-    | 'aria-label'
-    | 'aria-labelledby'
-    | 'aria-expanded'
-    | 'aria-controls'
-    | 'aria-haspopup'
-  >;
-  const buttonAttributes = rest as Omit<
-    HTMLButtonAttributes,
-    | 'class'
-    | 'type'
-    | 'disabled'
-    | 'onclick'
-    | 'aria-disabled'
-    | 'aria-busy'
-    | 'aria-label'
-    | 'aria-labelledby'
-    | 'aria-expanded'
-    | 'aria-controls'
-    | 'aria-haspopup'
-  >;
-
-  // Branch-specific prop reads stay `$derived` because they extract a *value* off `rest`
-  // (a property access snapshots, unlike the spread of `rest` itself which re-reads the
-  // reactive proxy). Keeping these derived ensures consumer `tabindex` / `type` / `disabled`
-  // changes after mount still propagate to the rendered attributes.
-  const anchorTabIndex = $derived(
-    (rest as { tabindex?: HTMLAnchorAttributes['tabindex'] }).tabindex,
-  );
-  const buttonType = $derived((rest as { type?: HTMLButtonAttributes['type'] }).type);
-  const buttonDisabled = $derived((rest as { disabled?: boolean }).disabled ?? false);
-
-  type ButtonOrAnchorClickHandler = (
-    event: MouseEvent & {
-      currentTarget: EventTarget & (HTMLButtonElement | HTMLAnchorElement);
-    },
-  ) => void;
-
-  /**
-   * Wrap the consumer's onclick so it doesn't fire during loading. `preventDefault()` blocks
-   * the browser's default navigation on anchor left-clicks; stripping `href` in the template
-   * handles middle-click / Ctrl-click new-tab paths. Not calling `stopPropagation()` on
-   * purpose — unrelated ancestor handlers (analytics, form listeners) should still see the
-   * event; only the consumer's own button handler is skipped.
-   */
-  function handleClick(
-    event: MouseEvent & {
-      currentTarget: EventTarget & (HTMLButtonElement | HTMLAnchorElement);
-    },
-  ): void {
-    if (loading) {
-      event.preventDefault();
-      return;
-    }
-    if (typeof consumerOnClick === 'function') {
-      (consumerOnClick as ButtonOrAnchorClickHandler)(event);
-    }
-  }
-
-  // Dev-mode guards. devWarn no-ops in production (bundler DCE strips the call when DEV=false).
-  // Guards run reactively so prop changes after mount also surface issues.
-  $effect(() => {
-    // Guard 1 — Updated baseline: warn when the button has no accessible name at all.
-    // Use the normalized resolved values so an empty aria-label="" doesn't falsely satisfy the check.
-    const hasLabel = typeof label === 'string' && label.trim().length > 0;
-    const hasChildren = Boolean(children);
-    const hasAriaLabel = resolvedAriaLabel !== undefined;
-    const hasAriaLabelledBy = resolvedAriaLabelledBy !== undefined;
-    if (!hasLabel && !hasChildren && !hasAriaLabel && !hasAriaLabelledBy) {
-      devWarn(
-        '[cinder/Button] rendered without an accessible name — pass a non-empty `label`, `children`, `aria-label`, or `aria-labelledby`.',
-      );
-    }
-
-    // Guard 2 — icon-only accessible name: children alone does not count because it may be a
-    // non-text SVG. Requires aria-label, aria-labelledby, or a non-empty label string.
-    if (iconOnly && !hasAriaLabel && !hasAriaLabelledBy && !hasLabel) {
-      devWarn(
-        '[cinder/Button] iconOnly=true requires aria-label, aria-labelledby, or a non-empty label.',
-      );
-    }
-
-    // Guard 3 — icon-only visual: a blank square is a real UI failure, not just an a11y issue.
-    if (iconOnly && !leadingIcon && !trailingIcon && !children) {
-      devWarn(
-        '[cinder/Button] iconOnly=true requires a visible icon — pass leadingIcon, trailingIcon, or children.',
-      );
-    }
-  });
-</script>
-
-{#snippet buttonContent()}
-  {#if leadingIcon}
-    <span class="cinder-button__icon" aria-hidden="true">{@render leadingIcon()}</span>
-  {/if}
-  {#if iconOnly}
-    {#if !resolvedAriaLabel && !resolvedAriaLabelledBy && label}
-      <span class="cinder-sr-only">{label}</span>
-    {/if}
-    {#if children}
-      <span class="cinder-button__icon" aria-hidden="true">{@render children()}</span>
-    {/if}
-  {:else if children}
-    {@render children()}
-  {:else}
-    {label}
-  {/if}
-  {#if trailingIcon}
-    <span class="cinder-button__icon" aria-hidden="true">{@render trailingIcon()}</span>
-  {/if}
-{/snippet}
-
-{#if href !== undefined}
-  <a
-    {...anchorAttributes}
-    href={loading ? undefined : href}
-    tabindex={loading ? -1 : anchorTabIndex}
-    class={mergedClassName}
-    {...dataAttributes}
-    aria-disabled={resolvedAriaDisabled}
-    aria-busy={resolvedAriaBusy}
-    aria-label={resolvedAriaLabel}
-    aria-labelledby={resolvedAriaLabelledBy}
-    aria-expanded={ariaExpanded}
-    aria-controls={ariaControls}
-    aria-haspopup={ariaHaspopup}
-    onclick={handleClick}
-  >
-    {@render buttonContent()}
-  </a>
-{:else}
-  <button
-    {...buttonAttributes}
-    type={buttonType ?? 'button'}
-    class={mergedClassName}
-    {...dataAttributes}
-    disabled={buttonDisabled || loading}
-    aria-disabled={resolvedAriaDisabled}
-    aria-busy={resolvedAriaBusy}
-    aria-label={resolvedAriaLabel}
-    aria-labelledby={resolvedAriaLabelledBy}
-    aria-expanded={ariaExpanded}
-    aria-controls={ariaControls}
-    aria-haspopup={ariaHaspopup}
-    onclick={handleClick}
-  >
-    {@render buttonContent()}
-  </button>
-{/if}