@labcat2020/rocketship-svelte 0.1.0 → 0.3.0

package/README.md

@@ -2,7 +2,123 @@
 
 Svelte 5 port of the Rocketship component library. Components reuse the same design system as the Astro package (`@labcat2020/rocketship`): design tokens, the mixin barrel, and the base resets are shared, not duplicated.
 
-This package is scaffolded and exports nothing yet. Components are added as copy-style ports of their Astro originals.
+Components are either copy-style ports of their Astro originals, or Svelte-first components with no Astro original yet. Either way they render the same BEM classes and follow the same props, token, `:global` style, container-query and a11y conventions, so an Astro version can be ported back from a Svelte-first component. A Svelte-first component is provisional — it may change once the matching Astro component's platinum standard lands, and Astro is the source of truth when the two diverge.
+
+## Components
+
+| Component    | Export                                                | Astro original     |
+| ------------ | ----------------------------------------------------- | ------------------ |
+| `Container`  | `@labcat2020/rocketship-svelte/components/Container`  | `Container.astro`  |
+| `Grid`       | `@labcat2020/rocketship-svelte/components/Grid`       | `Grid.astro`       |
+| `Card`       | `@labcat2020/rocketship-svelte/components/Card`       | `Card.astro`       |
+| `Typography` | `@labcat2020/rocketship-svelte/components/Typography` | `Typography.astro` |
+| `Button`     | `@labcat2020/rocketship-svelte/components/Button`     | `Button.astro`     |
+| `Alert`      | `@labcat2020/rocketship-svelte/components/Alert`      | `Alert.astro`      |
+| `Table`      | `@labcat2020/rocketship-svelte/components/Table`      | — (Svelte-first)   |
+| `Field`      | `@labcat2020/rocketship-svelte/components/Field`      | — (Svelte-first)   |
+| `Label`      | `@labcat2020/rocketship-svelte/components/Label`      | — (Svelte-first)   |
+| `Input`      | `@labcat2020/rocketship-svelte/components/Input`      | — (Svelte-first)   |
+| `Textarea`   | `@labcat2020/rocketship-svelte/components/Textarea`   | — (Svelte-first)   |
+| `Select`     | `@labcat2020/rocketship-svelte/components/Select`     | — (Svelte-first)   |
+| `Disclosure` | `@labcat2020/rocketship-svelte/components/Disclosure` | — (Svelte-first)   |
+| `Accordion`  | `@labcat2020/rocketship-svelte/components/Accordion`  | — (Svelte-first)   |
+| `Figure`     | `@labcat2020/rocketship-svelte/components/Figure`     | — (Svelte-first)   |
+
+Import components from their `./components/*` subpaths. Those subpaths are the package's public surface; deep imports such as `@labcat2020/rocketship-svelte/src/components/Container.svelte` are not exported and will not resolve.
+
+```svelte
+<script lang="ts">
+  import Container from '@labcat2020/rocketship-svelte/components/Container'
+  import Grid from '@labcat2020/rocketship-svelte/components/Grid'
+  import Card from '@labcat2020/rocketship-svelte/components/Card'
+  import Typography from '@labcat2020/rocketship-svelte/components/Typography'
+  import Button from '@labcat2020/rocketship-svelte/components/Button'
+</script>
+
+<Container as="main" size="content" padded>
+  <Typography as="article">
+    <h1>Title</h1>
+    <p>Body copy.</p>
+  </Typography>
+  <Grid columns={3}>
+    <Card>…</Card>
+    <Card>…</Card>
+    <Card>…</Card>
+  </Grid>
+  <Button variant="primary">Continue</Button>
+</Container>
+```
+
+Each component spreads unknown attributes onto its rendered element and composes an incoming `class` with its BEM block.
+
+| Component    | Props                                                                                                                                         |
+| ------------ | --------------------------------------------------------------------------------------------------------------------------------------------- |
+| `Container`  | `as` (`div`, `section`, `main`, `article`, `header`, `footer`, `nav`), `size` (`default`, `content`, `wide`, `full`), `padded`, `class`       |
+| `Grid`       | `as` (`div`, `ul`, `ol`), `columns` (`2`, `3`, `4`), `class`                                                                                  |
+| `Card`       | `as` (`article`, `section`, `div`, `li`), `media` snippet, `meta` snippet, `class`                                                            |
+| `Typography` | `as` (`div`, `section`, `article`), `html`, `class`                                                                                           |
+| `Button`     | `as` (`button`, `a`), `href`, `variant` (`primary`, `secondary`, `ghost`), `size` (`small`, `medium`, `large`), `disabled`, `type`, `class`   |
+| `Alert`      | `as` (`div`, `section`, `aside`, `article`), `variant` (`info`, `success`, `warning`, `error`), `title`, `titleSlot` snippet, `role`, `class` |
+| `Input`      | `type` (`text`, `email`, `password`, `number`, `search`, `url`, `tel`), `size` (`sm`, `md`, `lg`), `invalid`, `value` (`bind:value`), `class` |
+| `Textarea`   | `size` (`sm`, `md`, `lg`), `invalid`, `value` (`bind:value`), `class`                                                                         |
+| `Select`     | `size` (`sm`, `md`, `lg`), `invalid`, `placeholder`, `value` (`bind:value`), `children` snippet, `class`                                      |
+| `Figure`     | `as` (`figure`, `div`), `variant` (`default`, `bordered`), `captionAlign` (`start`, `center`), `caption`, `captionSlot` snippet, `class`      |
+
+### `Typography` `html` prop
+
+`Typography` keeps the `html` prop: pass a string and it renders as raw markup inside the wrapper, taking precedence over the `children` snippet. It is the Svelte equivalent of the Astro component's `set:html`.
+
+**Sanitize before you pass it.** The prop renders trusted HTML verbatim and does not sanitize its input, so it is only safe for content you control or content already sanitized at the boundary. Never pass unsanitized user input, request data, or third-party HTML through it — run it through a sanitizer (for example DOMPurify) first, or render structured markup with the `children` snippet instead.
+
+### `Field`, `Input` and `Textarea`
+
+`Field` hands each control its wiring through the `children` snippet: `id`, `aria-describedby`, `aria-invalid`, `required` and `disabled`. Spread that object onto `Input` or `Textarea` so the label, hint and error text stay linked to the control.
+
+```svelte
+<script lang="ts">
+  import Field from '@labcat2020/rocketship-svelte/components/Field'
+  import Input from '@labcat2020/rocketship-svelte/components/Input'
+  import Textarea from '@labcat2020/rocketship-svelte/components/Textarea'
+
+  let email = $state('')
+  let notes = $state('')
+</script>
+
+<Field label="Work email" hint="We send deployment alerts here.">
+  {#snippet children(control)}
+    <Input {...control} type="email" bind:value={email} />
+  {/snippet}
+</Field>
+
+<Field label="Release notes" error="Add at least ten characters.">
+  {#snippet children(control)}
+    <Textarea {...control} rows="3" bind:value={notes} />
+  {/snippet}
+</Field>
+```
+
+Both controls also work standalone. `invalid` raises `aria-invalid` and applies the error styling, and a size modifier (`sm`, `md`, `lg`) sets the type scale and control height. A `Field` error flows into the control's `aria-invalid` and its modifier, so the styling follows the error text Field renders.
+
+### `Select`
+
+`Select` wraps a native `<select>` and takes its options through the `children` snippet, plain `<option>` and `<optgroup>` included. There is no custom listbox, so keyboard, screen-reader and mobile behaviour are the platform's.
+
+```svelte
+<script lang="ts">
+  import Select from '@labcat2020/rocketship-svelte/components/Select'
+
+  let team = $state('')
+</script>
+
+<Select bind:value={team} placeholder="Choose a team" name="team">
+  <optgroup label="Engineering">
+    <option value="frontend">Frontend</option>
+    <option value="backend">Backend</option>
+  </optgroup>
+</Select>
+```
+
+`placeholder` renders a disabled option with an empty value, so it reads as an unset field. Once a real option is chosen the placeholder cannot be selected again; a parent can still reset the field by writing `''`. `size` accepts `sm`, `md` or `lg`; a number is passed through to the native `size` attribute, which renders a listbox instead of a dropdown, in which case no chevron is drawn.
 
 ## Install
 

package/dist/index.d.ts

@@ -1,2 +1,19 @@
-export declare const rocketshipSvelte: {};
+export { default as Accordion } from './components/Accordion.svelte';
+export { default as Disclosure } from './components/Disclosure.svelte';
+export { default as Field } from './components/Field.svelte';
+export { default as Figure } from './components/Figure.svelte';
+export { default as Input } from './components/Input.svelte';
+export { default as Label } from './components/Label.svelte';
+export { default as Select } from './components/Select.svelte';
+export { default as Table } from './components/Table.svelte';
+export { default as Textarea } from './components/Textarea.svelte';
+export type * from './components/Accordion.svelte';
+export type * from './components/Disclosure.svelte';
+export type * from './components/Field.svelte';
+export type * from './components/Figure.svelte';
+export type * from './components/Input.svelte';
+export type * from './components/Label.svelte';
+export type * from './components/Select.svelte';
+export type * from './components/Table.svelte';
+export type * from './components/Textarea.svelte';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,IAAK,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,+BAA+B,CAAA;AACpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,gCAAgC,CAAA;AACtE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,2BAA2B,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,2BAA2B,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,2BAA2B,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,2BAA2B,CAAA;AAC5D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,8BAA8B,CAAA;AAClE,mBAAmB,+BAA+B,CAAA;AAClD,mBAAmB,gCAAgC,CAAA;AACnD,mBAAmB,2BAA2B,CAAA;AAC9C,mBAAmB,4BAA4B,CAAA;AAC/C,mBAAmB,2BAA2B,CAAA;AAC9C,mBAAmB,2BAA2B,CAAA;AAC9C,mBAAmB,4BAA4B,CAAA;AAC/C,mBAAmB,2BAA2B,CAAA;AAC9C,mBAAmB,8BAA8B,CAAA"}

package/dist/index.js

@@ -1 +1,10 @@
-export const rocketshipSvelte = {};
+/// <reference types="svelte" />
+export { default as Accordion } from './components/Accordion.svelte';
+export { default as Disclosure } from './components/Disclosure.svelte';
+export { default as Field } from './components/Field.svelte';
+export { default as Figure } from './components/Figure.svelte';
+export { default as Input } from './components/Input.svelte';
+export { default as Label } from './components/Label.svelte';
+export { default as Select } from './components/Select.svelte';
+export { default as Table } from './components/Table.svelte';
+export { default as Textarea } from './components/Textarea.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@labcat2020/rocketship-svelte",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "private": false,
   "type": "module",
   "description": "Rocketship Svelte port — Svelte 5 components that reuse the Rocketship design system (tokens, mixins, base resets)",
@@ -18,19 +18,38 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "default": "./dist/index.js"
-    }
+    },
+    "./components/Alert": "./src/components/Alert.svelte",
+    "./components/Accordion": "./src/components/Accordion.svelte",
+    "./components/Button": "./src/components/Button.svelte",
+    "./components/Card": "./src/components/Card.svelte",
+    "./components/Container": "./src/components/Container.svelte",
+    "./components/Disclosure": "./src/components/Disclosure.svelte",
+    "./components/Field": "./src/components/Field.svelte",
+    "./components/Figure": "./src/components/Figure.svelte",
+    "./components/Grid": "./src/components/Grid.svelte",
+    "./components/Input": "./src/components/Input.svelte",
+    "./components/Label": "./src/components/Label.svelte",
+    "./components/Select": "./src/components/Select.svelte",
+    "./components/Table": "./src/components/Table.svelte",
+    "./components/Textarea": "./src/components/Textarea.svelte",
+    "./components/Typography": "./src/components/Typography.svelte"
   },
   "files": [
     "dist",
+    "src/components",
     "README.md"
   ],
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@labcat2020/rocketship": "0.1.0"
+    "@labcat2020/rocketship": "0.2.0"
   },
   "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^7.3.1",
+    "axe-core": "4.11.1",
+    "jsdom": "^30.1.2",
     "sass": "^1.105.1",
     "svelte": "^5.57.2",
     "svelte-check": "^4.7.6",

package/src/components/Accordion.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+  import { untrack } from 'svelte'
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+  import { setAccordion, type AccordionItem } from './Disclosure.svelte'
+
+  export type AccordionMode = 'multiple' | 'single'
+  export type AccordionTag = 'div' | 'section' | 'article' | 'ul'
+
+  type Props = {
+    as?: AccordionTag
+    mode?: AccordionMode
+    class?: string
+    children?: Snippet
+  } & HTMLAttributes<HTMLElement>
+
+  let {
+    as = 'div',
+    mode = 'multiple',
+    class: className = '',
+    children,
+    ...attrs
+  }: Props = $props()
+
+  const items = new Set<AccordionItem>()
+  let lastOpened: AccordionItem | undefined
+
+  const closeSiblings = (item: AccordionItem) => {
+    if (mode !== 'single') return
+    for (const other of items) {
+      if (other !== item) other.close()
+    }
+  }
+
+  setAccordion({
+    register: (item) => {
+      items.add(item)
+    },
+    unregister: (item) => {
+      items.delete(item)
+      if (lastOpened === item) lastOpened = undefined
+    },
+    opened: (item) => {
+      lastOpened = item
+      closeSiblings(item)
+    },
+  })
+
+  // Switching to single mode at runtime must reconcile panels that are already open,
+  // keeping the most recently opened one. `untrack` avoids subscribing to child state.
+  $effect(() => {
+    if (mode !== 'single') return
+    untrack(() => {
+      const open = [...items].filter((item) => item.isOpen())
+      if (open.length <= 1) return
+      const keep = lastOpened && open.includes(lastOpened) ? lastOpened : open[open.length - 1]
+      for (const item of open) {
+        if (item !== keep) item.close()
+      }
+    })
+  })
+
+  const classes = $derived(
+    ['rs-accordion', mode === 'single' ? 'rs-accordion--single' : undefined, className]
+      .filter(Boolean)
+      .join(' '),
+  )
+</script>
+
+<svelte:element this={as} {...attrs} class={classes}>
+  {@render children?.()}
+</svelte:element>
+
+<style lang="scss">
+  @use '@labcat2020/rocketship/styles/mixins' as *;
+
+  :global {
+    .rs-accordion {
+      --rs-accordion-gap: var(--rs-space-2, 8px);
+      display: flex;
+      flex-direction: column;
+      gap: var(--rs-accordion-gap);
+
+      &--single {
+        --rs-accordion-gap: 0;
+      }
+    }
+  }
+</style>

package/src/components/Alert.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  export type AlertVariant = 'info' | 'success' | 'warning' | 'error'
+  export type AlertTag = 'div' | 'section' | 'aside' | 'article'
+
+  type Props = {
+    as?: AlertTag
+    variant?: AlertVariant
+    title?: string
+    role?: 'alert' | 'status'
+    class?: string
+    titleSlot?: Snippet
+    children?: Snippet
+  } & HTMLAttributes<HTMLElement>
+
+  let {
+    as = 'div',
+    variant = 'info',
+    title,
+    role: roleProp,
+    class: className = '',
+    titleSlot,
+    children,
+    ...attrs
+  }: Props = $props()
+
+  const role = $derived(roleProp ?? (variant === 'error' || variant === 'warning' ? 'alert' : 'status'))
+
+  const classes = $derived(['rs-alert', `rs-alert--${variant}`, className].filter(Boolean).join(' '))
+</script>
+
+<svelte:element this={as} {...attrs} class={classes} role={role}>
+  {#if title}
+    <h4 class="rs-alert__title">{title}</h4>
+  {:else if titleSlot}
+    <h4 class="rs-alert__title">
+      {@render titleSlot()}
+    </h4>
+  {/if}
+  <div class="rs-alert__body">
+    {@render children?.()}
+  </div>
+</svelte:element>
+
+<style lang="scss">
+  @use '@labcat2020/rocketship/styles/mixins' as *;
+
+  :global {
+    .rs-alert {
+      --rs-alert-bg: var(--rs-color-surface-elevated, #eef2ff);
+      --rs-alert-color: var(--rs-color-fg, #131a2f);
+      --rs-alert-border-color: var(--rs-color-border, #c8d2eb);
+      --rs-alert-accent-color: var(--rs-color-accent, #2f5bdb);
+      display: flex;
+      flex-direction: column;
+      gap: var(--rs-alert-gap, var(--rs-space-2, 8px));
+      font-family: var(
+        --rs-font-family-sans,
+        'Inter',
+        'Segoe UI',
+        Roboto,
+        Helvetica,
+        Arial,
+        sans-serif
+      );
+      background: var(--rs-alert-bg);
+      border: var(--rs-alert-border-width, var(--rs-border-width-sm, 1px)) solid
+        var(--rs-alert-border-color);
+      border-inline-start: var(--rs-alert-accent-width, var(--rs-border-width-lg, 4px)) solid
+        var(--rs-alert-accent-color);
+      border-radius: var(--rs-alert-border-radius, var(--rs-radius-md, 10px));
+      color: var(--rs-alert-color);
+      padding-block: var(--rs-alert-padding-block, var(--rs-space-3, 12px));
+      padding-inline: var(--rs-alert-padding-inline, var(--rs-space-4, 16px));
+
+      @include container-query-up($rs-cq-sm) {
+        gap: var(--rs-alert-gap, var(--rs-space-3, 12px));
+        padding-block: var(--rs-alert-padding-block, var(--rs-space-4, 16px));
+        padding-inline: var(--rs-alert-padding-inline, var(--rs-space-5, 20px));
+      }
+
+      &--success {
+        --rs-alert-bg: var(--rs-color-success-bg, #e6f4ea);
+        --rs-alert-border-color: var(--rs-color-success-border, #a7d8b5);
+        --rs-alert-accent-color: var(--rs-color-success-accent, #1a7a32);
+        --rs-alert-color: var(--rs-color-success-fg, #0f2a18);
+      }
+
+      &--warning {
+        --rs-alert-bg: var(--rs-color-warning-bg, #fff8e1);
+        --rs-alert-border-color: var(--rs-color-warning-border, #f0c36a);
+        --rs-alert-accent-color: var(--rs-color-warning-accent, #9a5d00);
+        --rs-alert-color: var(--rs-color-warning-fg, #3d2800);
+      }
+
+      &--error {
+        --rs-alert-bg: var(--rs-color-danger-bg, #ffeef0);
+        --rs-alert-border-color: var(--rs-color-danger-border, #f0a8b0);
+        --rs-alert-accent-color: var(--rs-color-danger-accent, #c5221f);
+        --rs-alert-color: var(--rs-color-danger-fg, #3d0a08);
+      }
+
+      &__title {
+        color: var(--rs-alert-color);
+        font-size: var(--rs-alert-title-font-size, var(--rs-font-size-md, #{to-rem(16)}));
+        font-weight: var(--rs-alert-title-font-weight, var(--rs-font-weight-semibold, 600));
+        line-height: var(--rs-alert-title-line-height, var(--rs-line-height-tight, 1.2));
+        margin: 0;
+
+        @include container-query-up($rs-cq-sm) {
+          font-size: var(--rs-alert-title-font-size, var(--rs-font-size-lg, #{to-rem(18)}));
+        }
+      }
+
+      &__body {
+        color: var(--rs-alert-color);
+        font-size: var(--rs-alert-body-font-size, var(--rs-font-size-sm, #{to-rem(14)}));
+        line-height: var(--rs-alert-body-line-height, var(--rs-line-height-base, 1.45));
+        margin: 0;
+
+        @include container-query-up($rs-cq-sm) {
+          font-size: var(--rs-alert-body-font-size, var(--rs-font-size-md, #{to-rem(16)}));
+        }
+      }
+    }
+  }
+</style>

package/src/components/Button.svelte

@@ -0,0 +1,187 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements'
+
+  export type ButtonVariant = 'primary' | 'secondary' | 'ghost'
+  export type ButtonSize = 'small' | 'medium' | 'large'
+  export type ButtonTag = 'button' | 'a'
+
+  type NativeButtonType = 'button' | 'submit' | 'reset'
+
+  type Props = {
+    as?: ButtonTag
+    href?: string
+    variant?: ButtonVariant
+    size?: ButtonSize
+    disabled?: boolean
+    type?: NativeButtonType
+    class?: string
+    children?: Snippet
+  } & HTMLButtonAttributes &
+    HTMLAnchorAttributes
+
+  let {
+    as = 'button',
+    href,
+    variant = 'primary',
+    size = 'medium',
+    disabled = false,
+    type = 'button',
+    class: className = '',
+    children,
+    ...attrs
+  }: Props = $props()
+
+  const classes = $derived(
+    ['rs-button', `rs-button--${variant}`, `rs-button--${size}`, className].filter(Boolean).join(' '),
+  )
+
+  const shouldRenderAsLink = $derived(as === 'a' || Boolean(href))
+</script>
+
+{#if shouldRenderAsLink}
+  <a
+    {...attrs}
+    aria-disabled={disabled || undefined}
+    class={classes}
+    href={disabled ? undefined : (href ?? '#')}
+    role={disabled ? 'link' : undefined}
+    tabindex={disabled ? -1 : undefined}
+  >
+    {@render children?.()}
+  </a>
+{:else}
+  <button {...attrs} class={classes} disabled={disabled} type={type}>
+    {@render children?.()}
+  </button>
+{/if}
+
+<style lang="scss">
+  @use '@labcat2020/rocketship/styles/mixins' as *;
+
+  :global {
+    .rs-button {
+      all: unset;
+      --rs-button-bg: var(--rs-color-accent, #2f5bdb);
+      --rs-button-color: var(--rs-color-accent-contrast, #ffffff);
+      --rs-button-border-color: var(--rs-color-accent, #2f5bdb);
+      --rs-button-border-width: var(--rs-border-width, 1px);
+      --rs-button-border-radius: var(--rs-radius-pill, 999px);
+      --rs-button-font-size: var(--rs-font-size-sm, #{to-rem(14)});
+      --rs-button-font-weight: var(--rs-font-weight-semibold, 600);
+      --rs-button-line-height: var(--rs-line-height-tight, 1.2);
+      --rs-button-padding-inline: var(--rs-space-3, 12px);
+      --rs-button-min-height: 36px;
+      --rs-button-gap: var(--rs-space-2, 8px);
+      --rs-button-focus-ring-color: var(--rs-color-focus-ring, #296dff);
+      box-sizing: border-box;
+      align-items: center;
+      background: var(--rs-button-bg);
+      border: var(--rs-button-border-width) solid var(--rs-button-border-color);
+      border-radius: var(--rs-button-border-radius);
+      color: var(--rs-button-color);
+      cursor: pointer;
+      display: inline-flex;
+      font-family: var(
+        --rs-font-family-sans,
+        'Inter',
+        'Segoe UI',
+        Roboto,
+        Helvetica,
+        Arial,
+        sans-serif
+      );
+      font-size: var(--rs-button-font-size);
+      font-weight: var(--rs-button-font-weight);
+      gap: var(--rs-button-gap);
+      justify-content: center;
+      line-height: var(--rs-button-line-height);
+      min-height: var(--rs-button-min-height);
+      padding-block: 8px;
+      padding-inline: var(--rs-button-padding-inline);
+      text-decoration: none;
+      transition:
+        background-color var(--rs-transition-fast, 140ms) ease,
+        border-color var(--rs-transition-fast, 140ms) ease,
+        color var(--rs-transition-fast, 140ms) ease,
+        opacity var(--rs-transition-fast, 140ms) ease;
+      white-space: nowrap;
+
+      &:hover {
+        filter: brightness(1.08);
+      }
+
+      &:active {
+        filter: brightness(0.94);
+      }
+
+      &:focus-visible {
+        outline: 2px solid var(--rs-button-focus-ring-color);
+        outline-offset: 2px;
+      }
+
+      &:disabled,
+      &[aria-disabled='true'] {
+        cursor: not-allowed;
+        opacity: 0.55;
+        pointer-events: none;
+      }
+
+      &--secondary {
+        --rs-button-bg: var(--rs-color-surface, #ffffff);
+        --rs-button-border-color: var(--rs-color-accent, #2f5bdb);
+        --rs-button-border-width: var(--rs-border-width-md, 2px);
+        --rs-button-color: var(--rs-color-accent, #2f5bdb);
+
+        &:hover {
+          filter: none;
+          --rs-button-bg: var(--rs-color-surface-elevated, #eef2ff);
+          --rs-button-border-color: var(--rs-color-link-hover, #173ea8);
+          --rs-button-color: var(--rs-color-link-hover, #173ea8);
+        }
+      }
+
+      &--ghost {
+        --rs-button-bg: transparent;
+        --rs-button-border-color: transparent;
+        --rs-button-border-width: var(--rs-border-width-md, 2px);
+        --rs-button-color: var(--rs-color-accent, #2f5bdb);
+
+        &:hover {
+          filter: none;
+          --rs-button-bg: var(--rs-color-surface-elevated, #eef2ff);
+        }
+      }
+
+      &--small {
+        --rs-button-font-size: var(--rs-button-font-size-sm);
+        --rs-button-min-height: var(--rs-button-min-height-sm);
+        --rs-button-padding-inline: var(--rs-button-padding-inline-sm);
+      }
+
+      &--medium {
+        --rs-button-font-size: var(--rs-button-font-size-md);
+        --rs-button-min-height: var(--rs-button-min-height-md);
+        --rs-button-padding-inline: var(--rs-button-padding-inline-md);
+      }
+
+      &--large {
+        --rs-button-font-size: var(--rs-button-font-size-lg);
+        --rs-button-min-height: var(--rs-button-min-height-lg);
+        --rs-button-padding-inline: var(--rs-button-padding-inline-lg);
+      }
+
+      @include container-query-up($rs-cq-sm) {
+        --rs-button-font-size-sm: var(--rs-button-font-size-sm-cq);
+        --rs-button-font-size-md: var(--rs-button-font-size-md-cq);
+        --rs-button-font-size-lg: var(--rs-button-font-size-lg-cq);
+        --rs-button-min-height-sm: var(--rs-button-min-height-sm-cq);
+        --rs-button-min-height-md: var(--rs-button-min-height-md-cq);
+        --rs-button-min-height-lg: var(--rs-button-min-height-lg-cq);
+        --rs-button-padding-inline-sm: var(--rs-button-padding-inline-sm-cq);
+        --rs-button-padding-inline-md: var(--rs-button-padding-inline-md-cq);
+        --rs-button-padding-inline-lg: var(--rs-button-padding-inline-lg-cq);
+      }
+    }
+  }
+</style>