@lostgradient/cinder 0.1.0

package/src/components/button/button.svelte

@@ -0,0 +1,234 @@
+<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,
+    ...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'
+  >;
+  const buttonAttributes = rest as Omit<
+    HTMLButtonAttributes,
+    | 'class'
+    | 'type'
+    | 'disabled'
+    | 'onclick'
+    | 'aria-disabled'
+    | 'aria-busy'
+    | 'aria-label'
+    | 'aria-labelledby'
+  >;
+
+  // 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}
+    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}
+    onclick={handleClick}
+  >
+    {@render buttonContent()}
+  </button>
+{/if}

package/src/components/button/button.types.ts

@@ -0,0 +1,120 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+
+/**
+ * Visual style of the button.
+ *
+ * `secondary` is an outline-style button (filled surface + border). It is kept as `secondary`
+ * rather than `outline` because: (a) today's `secondary` is already outline-flavored, (b) `ghost`
+ * covers the transparent-background case, and (c) 27+ call sites depend on `secondary` today.
+ *
+ * `soft` / `soft-danger` use a tinted fill with no border — mid-emphasis between `ghost` and
+ * `primary`/`danger`. Background is `color-mix(in oklch, accent, transparent 88%)` so it
+ * resolves against the current theme's accent/danger color in both light and dark modes.
+ *
+ * @default `"secondary"`
+ */
+export type ButtonVariant =
+  | 'primary'
+  | 'secondary'
+  | 'soft'
+  | 'danger'
+  | 'soft-danger'
+  | 'ghost'
+  | 'ghost-danger';
+
+/**
+ * Size of the button. All sizes use compact visual heights; see button.a11y.md for touch-target guidance.
+ *
+ * @default `"md"`
+ */
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+type SharedBase = {
+  /** Visual style. */
+  variant?: ButtonVariant;
+  /** Size of the button. */
+  size?: ButtonSize;
+  /** Expand to container width. */
+  fullWidth?: boolean;
+  /** Disable the button and show a spinner. */
+  loading?: boolean;
+  /** DECORATIVE icon rendered before the label/children. Always wrapped in aria-hidden.
+   *  If the icon conveys meaning, supply accessible text via `label`/`aria-label` instead. */
+  leadingIcon?: Snippet;
+  /** DECORATIVE icon rendered after the label/children. Always wrapped in aria-hidden.
+   *  Same accessible-name guidance as `leadingIcon`. */
+  trailingIcon?: Snippet;
+  /** Custom class merged with `.cinder-button`. */
+  class?: string;
+};
+
+// At least one of `label` or `children` must be provided so the button has an accessible name.
+//
+// The union shape (rather than `label?: string; children?: Snippet`) gives TypeScript a
+// compile-time guarantee that a consumer can't write `<Button />` with neither. The Phase 4
+// analyzer reads this two-variant shape to generate correct prop-control UI for each branch.
+// Runtime limitation: `string` includes `""`, so a literal empty label still satisfies
+// `WithLabel`. The dev-mode guard in the instance script catches that case.
+//
+// `iconOnly` lives only in the union branches (not SharedBase) so the discriminant is real:
+// `WithChildren` genuinely forbids `iconOnly={true}`, and `WithIconOnly` requires it.
+type WithLabel = { label: string; children?: Snippet; iconOnly?: false };
+type WithChildren = { label?: string; children: Snippet; iconOnly?: false };
+type IconOnlyAccessibleName =
+  | { label: string; 'aria-label'?: string; 'aria-labelledby'?: string }
+  | { label?: string; 'aria-label': string; 'aria-labelledby'?: string }
+  | { label?: string; 'aria-label'?: string; 'aria-labelledby': string };
+type IconOnlyVisual =
+  | { children: Snippet; leadingIcon?: Snippet; trailingIcon?: Snippet }
+  | { children?: Snippet; leadingIcon: Snippet; trailingIcon?: Snippet }
+  | { children?: Snippet; leadingIcon?: Snippet; trailingIcon: Snippet };
+// Icon-only buttons require a name source and a visual icon source at compile time.
+// `children` is accepted as the visual icon only; it is not a name source in this mode.
+type WithIconOnly = { iconOnly: true } & IconOnlyAccessibleName & IconOnlyVisual;
+type SharedProps = SharedBase & (WithLabel | WithChildren | WithIconOnly);
+
+type ButtonOnlyProps = SharedProps & Omit<HTMLButtonAttributes, 'class'> & { href?: undefined };
+type LinkButtonProps = SharedProps & Omit<HTMLAnchorAttributes, 'class'> & { href: string };
+
+/** Props for the Button component. */
+export type ButtonProps = ButtonOnlyProps | LinkButtonProps;
+
+/**
+ * Cinder-specific props for the Button component, used by the schema generator.
+ * Excludes the inherited HTML attribute surface that consumers can spread via
+ * `...rest` — those are documented in the underlying element's MDN reference.
+ */
+export interface ButtonSchemaProps {
+  /**
+   * Visual style.
+   * @default "secondary"
+   */
+  variant?: ButtonVariant;
+  /**
+   * Size of the button.
+   * @default "md"
+   */
+  size?: ButtonSize;
+  /**
+   * Expand to container width.
+   * @default false
+   */
+  fullWidth?: boolean;
+  /**
+   * Disable the button and show a spinner.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Render the button with only an icon. Requires an accessible name source.
+   * @default false
+   */
+  iconOnly?: boolean;
+  /** Render as an anchor `<a>` element with this href. */
+  href?: string;
+  /** Visible text label. Must be non-empty if provided. */
+  label?: string;
+  /** Custom class merged with `.cinder-button`. */
+  class?: string;
+}

package/src/components/button/button.variables.json

@@ -0,0 +1 @@
+[]

package/src/components/button/button.variables.ts

@@ -0,0 +1,3 @@
+const variables: readonly string[] = [];
+
+export default variables;

package/src/components/button/index.ts

@@ -0,0 +1,6 @@
+import './button.css';
+import Button from './button.svelte';
+
+export default Button;
+export type { ButtonProps, ButtonSize, ButtonVariant } from './button.types.ts';
+export { Button };

package/src/components/button-group/README.md

@@ -0,0 +1,43 @@
+# ButtonGroup
+
+Clusters related action buttons into a unified visual group with shared borders.
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import ButtonGroup from '@lostgradient/cinder/button-group';
+</script>
+
+<ButtonGroup />
+```
+
+## Props
+
+<!-- generated:props:start -->
+
+| Prop          | Type                           | Required | Default | Description                                                                                                                |
+| ------------- | ------------------------------ | -------- | ------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `class`       | `string`                       | no       | —       | Additional class merged with `.cinder-button-group`.                                                                       |
+| `label`       | `string`                       | no       | —       |                                                                                                                            |
+| `labelledBy`  | `string`                       | no       | —       |                                                                                                                            |
+| `orientation` | `"horizontal"` \| `"vertical"` | no       | —       | Orientation of the visual collapse. Default: 'horizontal'.                                                                 |
+| `children`    | `(opaque)`                     | no       | —       | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+
+<!-- generated:props:end -->
+
+## CSS Variables
+
+<!-- generated:variables:start -->
+
+This component does not declare any local CSS variables.
+
+<!-- generated:variables:end -->
+
+## Subcomponents
+
+<!-- generated:subcomponents:start -->
+
+None.
+
+<!-- generated:subcomponents:end -->

package/src/components/button-group/button-group.css

@@ -0,0 +1,265 @@
+@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
+@layer cinder.components {
+  /* =========================================================
+   ButtonGroup — layout-only barrel for related action buttons
+   ========================================================= */
+
+  .cinder-button-group {
+    display: inline-flex;
+    align-items: stretch;
+    /* New stacking context keeps focus-ring z-index elevation local to this
+     group — a focused child in one group never paints over a sibling group. */
+    isolation: isolate;
+  }
+
+  .cinder-button-group[data-cinder-orientation='horizontal'] {
+    flex-direction: row;
+  }
+
+  .cinder-button-group[data-cinder-orientation='vertical'] {
+    flex-direction: column;
+  }
+
+  /* Position context so the focused-child z-index elevation works. */
+  .cinder-button-group > [data-cinder-button-group-item] {
+    position: relative;
+    z-index: 0;
+  }
+
+  /* Split buttons use Dropdown as the direct group participant, with the actual
+   trigger button nested inside it. Make the wrapper behave like a button-shaped
+   flex item so the trigger fills the grouped control instead of floating inside
+   a stretched inline-block. */
+  .cinder-button-group > .cinder-dropdown[data-cinder-button-group-item] {
+    display: inline-flex;
+  }
+
+  .cinder-button-group
+    > .cinder-dropdown[data-cinder-button-group-item]
+    > .cinder-dropdown-trigger {
+    min-block-size: 100%;
+  }
+
+  /* Elevate the highlighted participant so its focus ring paints over adjacent
+   buttons' borders and is never clipped. Kept in sync with the seam-suppression
+   selectors below — every state that suppresses a seam (:hover, :active,
+   :focus-within) also elevates, so the highlighted surface is never cut or
+   under-painted by a neighbor. */
+  .cinder-button-group > [data-cinder-button-group-item]:where(:hover, :active, :focus-within) {
+    z-index: 1;
+  }
+
+  /* ── Border collapse via seam on the group-item pseudo-element ────────── */
+  /* Negative-margin overlap let a transparent-bordered variant (primary/danger)
+ * notch the shared hairline against a bordered one (secondary). Instead each
+ * non-first item paints one deterministic 1px seam on its inner edge via a
+ * ::before pseudo-element owned by the group. Drawn on the item wrapper, not
+ * the button, so it never competes with the button's focus-ring box-shadow and
+ * never doubles with the button's own border. */
+  .cinder-button-group > [data-cinder-button-group-item]:not(:first-child)::before {
+    content: '';
+    position: absolute;
+    z-index: 1;
+    background: var(--cinder-border);
+    pointer-events: none;
+  }
+
+  .cinder-button-group[data-cinder-orientation='horizontal']
+    > [data-cinder-button-group-item]:not(:first-child)::before {
+    inset-block: 0;
+    inset-inline-start: 0;
+    inline-size: 1px;
+  }
+
+  .cinder-button-group[data-cinder-orientation='vertical']
+    > [data-cinder-button-group-item]:not(:first-child)::before {
+    inset-inline: 0;
+    inset-block-start: 0;
+    block-size: 1px;
+  }
+
+  /* Suppress the seam for the highlighted (hovered, active, or focused) participant
+ * and the seam that sits immediately at its far boundary (owned by the next sibling).
+ *
+ * WHY TWO RULES:
+ * Each non-first group item paints its own ::before seam on its near edge. When item B
+ * is highlighted, two seams become problematic:
+ *   1. B's own ::before — sits at B's near (left/top) edge inside the highlight area.
+ *   2. The next sibling C's ::before — sits at B's far (right/bottom) edge, also
+ *      hugging the highlighted surface.
+ * Suppressing only (1) leaves (2) as a visible divider cutting through the far edge of
+ * the highlight. Both must be hidden so the highlighted button reads as one clean shape.
+ *
+ * THE FAR-EDGE SEAM IS THE NEXT SIBLING'S ::before:
+ * The seam at the highlighted item's far edge is owned by the item that immediately
+ * FOLLOWS it (that next item's near-edge ::before sits on the shared boundary). So we
+ * target it with the adjacent-sibling combinator: highlighted-item + next-item::before.
+ * (No :has() / previous-sibling trickery needed — the seam lives on the later item.)
+ *
+ * VERTICAL ORIENTATION:
+ * The same ::before mechanism is used for vertical groups (block axis), so the same
+ * suppression selectors apply unchanged — orientation only affects the seam's
+ * inset/inline placement, not its ownership or z-index model.
+ *
+ * FORCED COLORS:
+ * The forced-colors @media rule further below remaps the seam to CanvasText. These
+ * opacity:0 rules run inside the same stacking context, so forced-colors highlight
+ * feedback (system Highlight background) replaces the seam visually. The seam
+ * suppression is safe: the system highlight is already a visible indicator.
+ *
+ * FOCUS RING PROTECTION:
+ * The focused participant is additionally lifted to z-index:1 by the
+ * :where(:hover,:focus-within) rule above, so its focus ring also paints over any
+ * seam on the far side. The opacity:0 here is a belt-and-suspenders complement. */
+
+  /* 1. Drop the highlighted item's own near-edge seam. */
+  .cinder-button-group
+    > [data-cinder-button-group-item]:where(:hover, :active, :focus-within):not(
+      :first-child
+    )::before {
+    opacity: 0;
+  }
+
+  /* 2. Drop the seam at the highlighted item's far edge — owned by the NEXT item's
+   *    near-edge ::before. The adjacent-sibling combinator targets that following item
+   *    directly; it is necessarily non-first, so it always has a ::before. */
+  .cinder-button-group
+    > [data-cinder-button-group-item]:where(:hover, :active, :focus-within)
+    + [data-cinder-button-group-item]::before {
+    opacity: 0;
+  }
+
+  /* Zero BOTH borders that meet at each junction so the pseudo-element line is the
+ * only thing between two buttons. Uses -color: transparent (not border-width: 0)
+ * to preserve box geometry so the radius-flattening rules and heights are
+ * unaffected.
+ *
+ * Both sides matter: with the negative-margin overlap gone, adjacent buttons no
+ * longer share a hairline, so a bordered variant (e.g. secondary) would render
+ * its own end border AND the next item's seam — a doubled 2px divider. Each
+ * non-first item drops its seam-facing START border, and each non-last item
+ * drops its seam-facing END border, leaving exactly the one `::before` seam.
+ *
+ * The two-arm `:is(.cinder-button, button)` selector intentionally mirrors the
+ * radius-flattening rules below: a grouped item is contractually a `<Button>`,
+ * a toggle `<button>`, or a `<Dropdown>` whose trigger is a button (see
+ * button-group.a11y.md — the group is a visual container for button-shaped
+ * actions, never a form input). So the seam and the transparent borders land on
+ * the same elements that already get their corners flattened; if a future
+ * non-button item type is supported, update both rule sets together. The
+ * `:not([role='menu'] *):not([role='menuitem'])` guard keeps a split-button's
+ * dropdown menu items from being touched. */
+  .cinder-button-group[data-cinder-orientation='horizontal']
+    > [data-cinder-button-group-item]:not(:first-child)
+    :is(.cinder-button, button):not([role='menu'] *):not([role='menuitem']),
+  .cinder-button-group[data-cinder-orientation='horizontal']
+    > [data-cinder-button-group-item]:is(.cinder-button, button):not(:first-child) {
+    border-inline-start-color: transparent;
+  }
+
+  .cinder-button-group[data-cinder-orientation='horizontal']
+    > [data-cinder-button-group-item]:not(:last-child)
+    :is(.cinder-button, button):not([role='menu'] *):not([role='menuitem']),
+  .cinder-button-group[data-cinder-orientation='horizontal']
+    > [data-cinder-button-group-item]:is(.cinder-button, button):not(:last-child) {
+    border-inline-end-color: transparent;
+  }
+
+  .cinder-button-group[data-cinder-orientation='vertical']
+    > [data-cinder-button-group-item]:not(:first-child)
+    :is(.cinder-button, button):not([role='menu'] *):not([role='menuitem']),
+  .cinder-button-group[data-cinder-orientation='vertical']
+    > [data-cinder-button-group-item]:is(.cinder-button, button):not(:first-child) {
+    border-block-start-color: transparent;
+  }
+
+  .cinder-button-group[data-cinder-orientation='vertical']
+    > [data-cinder-button-group-item]:not(:last-child)
+    :is(.cinder-button, button):not([role='menu'] *):not([role='menuitem']),
+  .cinder-button-group[data-cinder-orientation='vertical']
+    > [data-cinder-button-group-item]:is(.cinder-button, button):not(:last-child) {
+    border-block-end-color: transparent;
+  }
+
+  /* Forced colors: the pseudo-element background may not map to a system color,
+ * so remap to CanvasText. The seam-facing border stays transparent (not
+ * restored) so exactly one separator renders — the pseudo-element line. */
+  @media (forced-colors: active) {
+    .cinder-button-group > [data-cinder-button-group-item]:not(:first-child)::before {
+      background: CanvasText;
+    }
+  }
+
+  /* ── Border-radius flattening ─────────────────────────────────────────── */
+  /*
+ * Every selector targets the visible button via :is(.cinder-button, button).
+ * The :not([role='menu'] *):not([role='menuitem']) guard prevents dropdown
+ * menu items from having their corners zeroed.
+ *
+ * When the participant *is* the button (no nesting), the second comma-arm of
+ * each rule matches it directly without the guard — a direct child of
+ * button-group can never be a menu item.
+ */
+
+  /* Horizontal — middle children: zero all corners. */
+  .cinder-button-group[data-cinder-orientation='horizontal']
+    > [data-cinder-button-group-item]:not(:first-child):not(:last-child)
+    :is(.cinder-button, button):not([role='menu'] *):not([role='menuitem']),
+  .cinder-button-group[data-cinder-orientation='horizontal']
+    > [data-cinder-button-group-item]:is(.cinder-button, button):not(:first-child):not(
+      :last-child
+    ) {
+    border-radius: 0;
+  }
+
+  /* Horizontal — first child: zero the inline-end corners. */
+  .cinder-button-group[data-cinder-orientation='horizontal']
+    > [data-cinder-button-group-item]:first-child:not(:only-child)
+    :is(.cinder-button, button):not([role='menu'] *):not([role='menuitem']),
+  .cinder-button-group[data-cinder-orientation='horizontal']
+    > [data-cinder-button-group-item]:is(.cinder-button, button):first-child:not(:only-child) {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  /* Horizontal — last child: zero the inline-start corners. */
+  .cinder-button-group[data-cinder-orientation='horizontal']
+    > [data-cinder-button-group-item]:last-child:not(:only-child)
+    :is(.cinder-button, button):not([role='menu'] *):not([role='menuitem']),
+  .cinder-button-group[data-cinder-orientation='horizontal']
+    > [data-cinder-button-group-item]:is(.cinder-button, button):last-child:not(:only-child) {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+
+  /* Vertical — middle children: zero all corners. */
+  .cinder-button-group[data-cinder-orientation='vertical']
+    > [data-cinder-button-group-item]:not(:first-child):not(:last-child)
+    :is(.cinder-button, button):not([role='menu'] *):not([role='menuitem']),
+  .cinder-button-group[data-cinder-orientation='vertical']
+    > [data-cinder-button-group-item]:is(.cinder-button, button):not(:first-child):not(
+      :last-child
+    ) {
+    border-radius: 0;
+  }
+
+  /* Vertical — first child: zero the block-end corners. */
+  .cinder-button-group[data-cinder-orientation='vertical']
+    > [data-cinder-button-group-item]:first-child:not(:only-child)
+    :is(.cinder-button, button):not([role='menu'] *):not([role='menuitem']),
+  .cinder-button-group[data-cinder-orientation='vertical']
+    > [data-cinder-button-group-item]:is(.cinder-button, button):first-child:not(:only-child) {
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  /* Vertical — last child: zero the block-start corners. */
+  .cinder-button-group[data-cinder-orientation='vertical']
+    > [data-cinder-button-group-item]:last-child:not(:only-child)
+    :is(.cinder-button, button):not([role='menu'] *):not([role='menuitem']),
+  .cinder-button-group[data-cinder-orientation='vertical']
+    > [data-cinder-button-group-item]:is(.cinder-button, button):last-child:not(:only-child) {
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+  }
+}