@kouji-ui/components 0.1.1 → 0.1.2

package/src/button/button.ts

@@ -1,150 +0,0 @@
-import { Component, ChangeDetectionStrategy, ModelSignal, ViewEncapsulation, input, model } from '@angular/core';
-import { KjButton } from '@kouji-ui/core';
-
-/**
- * Styled wrapper around the headless KjButton directive.
- *
- * Variant and size are user-configurable strings. Configure the allowed values
- * and defaults via `provideKjButton(…)` at the application or component scope.
- *
- * @example
- * ```html
- * <kj-button kjVariant="destructive" kjSize="lg" [kjLoading]="busy()">
- *   Delete
- * </kj-button>
- * ```
- * @doc-example Default
- *   The default playground — variant `secondary`, size `md`, no states.
- *   @doc-file button.example.ts
- * @doc-example Usage
- *   A walkthrough of the most common button usages — variants, sizes,
- *   loading / disabled / pressed states, and a click handler. Use this as the
- *   copy-paste starting point for new screens.
- *   @doc-file button.usage.example.ts
- * @doc-example Variants
- *   Primary / secondary / ghost / destructive — pick the visual weight that
- *   matches the action's importance.
- *   @doc-file button.variants.example.ts
- * @doc-example Sizes
- *   `sm`, `md`, `lg` — `md` is the default. `sm` keeps a 44px touch target via
- *   padding so it stays WCAG 2.5.5 compliant.
- *   @doc-file button.sizes.example.ts
- * @doc-example Disabled
- *   `[disabled]="true"` removes the button from the tab order and dims it. Use
- *   for forms where validation hasn't passed.
- *   @doc-file button.disabled.example.ts
- * @doc-example Loading
- *   Toggle `[loading]="true"` while a request is in-flight. Implies disabled —
- *   don't set both.
- *   @doc-file button.loading.example.ts
- * @doc-example Pressed (toggle)
- *   Stateful toggle via `[kjPressed]`. `aria-pressed` is wired automatically.
- *   @doc-file button.pressed.example.ts
- * @doc-example Icon-only
- *   Provide `[kjAriaLabel]` for screen readers — dev-mode enforces it.
- *   @doc-file button.icon.example.ts
- * @doc-example Anchor as button
- *   Render as `<a>` while keeping button visuals — handy for navigation that
- *   needs to look like an action.
- *   @doc-file button.anchor.example.ts
- * @doc-example Configured presets
- *   `provideKjButton({ variant: 'primary' })` sets the default for every
- *   button in the injection scope.
- *   @doc-file button.configured.example.ts
- *
- * @doc-keyboard
- *   Enter|Space — Activates the button (native click on the underlying
- *     <button>; for [kjPressed] toggles this also flips the pressed state)
- *   Tab          — Moves focus to the next focusable element
- *
- * @doc-aria
- *   aria-disabled — Reflected when [kjDisabled] or [kjLoading] is true
- *   aria-busy     — Reflected when [kjLoading] is true
- *   aria-pressed  — Reflected when used as a toggle (kjPressed is bound)
- *   aria-label    — Wired through to the inner <button>; required for icon-only
- *   data-variant  — Mirrors the resolved variant for theme/scope hooks
- *   data-size     — Mirrors the resolved size for theme/scope hooks
- *
- * @doc-css-var
- *   --kj-button-bg              — Background fill. Variant rules set this; override to brand-paint a one-off.
- *   --kj-button-fg              — Foreground (label + icon) color. Resolved per variant.
- *   --kj-button-bg-hover        — Hover background. Defaults to an 8% black mix on the variant fill.
- *   --kj-button-fg-hover        — Hover foreground (default variant only).
- *   --kj-button-border-color    — Border color. Outline/destructive set this per variant.
- *   --kj-button-border-width    — Border thickness. Inherits the theme's --kj-border.
- *   --kj-button-radius          — Corner radius. Inherits --kj-radius-field.
- *   --kj-button-padding-x       — Horizontal padding. Sizes override.
- *   --kj-button-padding-y       — Vertical padding. Sizes override.
- *   --kj-button-gap             — Gap between icon and label.
- *   --kj-button-font            — Font family. Defaults to --kj-font-sans.
- *   --kj-button-font-size       — Font size. Sizes override.
- *   --kj-button-font-weight     — Font weight. Default 600; brutalist themes bump it.
- *   --kj-button-letter-spacing  — Letter tracking. Default -0.01em.
- *   --kj-button-height          — Explicit height. Sizes (sm/md/lg/icon) set this.
- *   --kj-button-min-width       — Minimum width. Defaults to auto.
- *   --kj-button-hover-translate — Y translation on hover (lift). -2px default; bauhaus -4px.
- *   --kj-button-translate-active — Transform on press. Defaults to none.
- *   --kj-button-shadow          — Box shadow on the `default` variant. Unset by default — opt in at the page/scope where you want the brutalist offset (e.g. landing hero, docs playground stage).
- *   --kj-button-shadow-hover    — Box shadow on hover (default variant). Falls back to --kj-button-shadow.
- *   --kj-button-shadow-active   — Box shadow on press (default variant). Falls back to --kj-button-shadow.
- *
- * @doc-touch
- *   `size="lg"` and `size="icon"` meet WCAG 2.5.5 ≥ 44×44 by default.
- *   `sm` and `md` rely on the inline-text-link exception — embed in text only.
- *
- * @doc-a11y
- *   Renders a real <button type="..."> (defaults to "button"), so the
- *   native focus ring, click semantics, and form-submission behaviour
- *   are preserved. `KjFocusRing` (from kjButton) shows the outline on
- *   `:focus-visible` only — never on mouse-down. When used as an anchor
- *   via `[routerLink]`, Enter activates per native anchor semantics.
- *
- * @doc-related button-group,link,icon
- *
- * @doc-category Library/Actions
- * @doc
- * @doc-name button
- * @doc-is-main
- * @doc-description Themed button with variants, sizes, and built-in disabled, loading, and pressed states.
- */
-@Component({
-  selector: 'kj-button',
-  standalone: true,
-  imports: [KjButton],
-  template: `
-    <button
-      [type]="kjType()"
-      kjButton
-      class="kj-button"
-      [kjVariant]="kjVariant()"
-      [kjSize]="kjSize()"
-      [kjDisabled]="kjDisabled()"
-      [kjLoading]="kjLoading()"
-      [kjFullWidth]="kjFullWidth()"
-      [(kjPressed)]="kjPressed"
-      [attr.aria-label]="kjAriaLabel()"
-    >
-      @if (kjLoading()) {
-        <span class="kj-button__spinner" aria-hidden="true"></span>
-      } @else {
-        <ng-content />
-      }
-    </button>
-  `,
-  styleUrl: './button.css',
-  encapsulation: ViewEncapsulation.None,
-  host: { style: 'display: contents;' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjButtonComponent {
-  readonly kjVariant = input('default');
-  readonly kjSize = input('md');
-  readonly kjDisabled = input(false);
-  readonly kjLoading = input(false);
-  readonly kjFullWidth = input(false);
-  // Field annotation matches the directive's — ng-packagr otherwise narrows
-  // both sides to ModelSignal<boolean>, breaking the [(kjPressed)] binding.
-  readonly kjPressed: ModelSignal<boolean | undefined> = model<boolean | undefined>(undefined);
-  readonly kjType = input<'button' | 'submit' | 'reset'>('button');
-  readonly kjAriaLabel = input<string | undefined>(undefined);
-}

package/src/button/index.ts

@@ -1 +0,0 @@
-export * from './button';

package/src/button-group/_examples/button-group.example.ts

@@ -1,30 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { KjButtonGroupComponent } from '../button-group';
-import { KjButtonComponent } from '../../button/button';
-
-/**
- * Default usage example for KjButtonGroupComponent.
- * Three joined buttons with the group's defaults
- * (`kjOrientation="horizontal"`).
- */
-@Component({
-  selector: 'kj-button-group-example',
-  standalone: true,
-  imports: [KjButtonGroupComponent, KjButtonComponent],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-button-group kjAriaLabel="Document actions">
-      <kj-button kjVariant="outline">Save</kj-button>
-      <kj-button kjVariant="outline">Cancel</kj-button>
-      <kj-button kjVariant="outline">Delete</kj-button>
-    </kj-button-group>
-  `,
-})
-export class KjButtonGroupExample {}

package/src/button-group/_examples/button-group.icon-only.example.ts

@@ -1,30 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { KjButtonGroupComponent } from '../button-group';
-import { KjButtonComponent } from '../../button/button';
-
-/**
- * Icon-only segmented control. `kjSize="icon"` enforces the 44×44 touch
- * target on each child (per `KjButton`'s WCAG 2.5.5 rule), and the group
- * collapses the inner edges into a tight cluster suitable for a toolbar.
- */
-@Component({
-  selector: 'kj-button-group-icon-only-example',
-  standalone: true,
-  imports: [KjButtonGroupComponent, KjButtonComponent],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-button-group kjAriaLabel="Alignment">
-      <kj-button kjVariant="outline" kjSize="icon" kjAriaLabel="Align left">⟸</kj-button>
-      <kj-button kjVariant="outline" kjSize="icon" kjAriaLabel="Align center">≡</kj-button>
-      <kj-button kjVariant="outline" kjSize="icon" kjAriaLabel="Align right">⟹</kj-button>
-    </kj-button-group>
-  `,
-})
-export class KjButtonGroupIconOnlyExample {}

package/src/button-group/_examples/button-group.toggle.example.ts

@@ -1,36 +0,0 @@
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import { KjButtonGroupComponent } from '../button-group';
-import { KjButtonComponent } from '../../button/button';
-
-/**
- * Toggle-style group using `KjButton`'s built-in `kjPressed` model on each
- * child. The group itself is purely presentational here — it provides the
- * segmented visual and the `role="group"` host. Per-child `[(kjPressed)]`
- * gives `aria-pressed` semantics without coupling the group to selection
- * state.
- */
-@Component({
-  selector: 'kj-button-group-toggle-example',
-  standalone: true,
-  imports: [KjButtonGroupComponent, KjButtonComponent],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-button-group kjAriaLabel="Text formatting">
-      <kj-button kjVariant="outline" [(kjPressed)]="bold">Bold</kj-button>
-      <kj-button kjVariant="outline" [(kjPressed)]="italic">Italic</kj-button>
-      <kj-button kjVariant="outline" [(kjPressed)]="underline">Underline</kj-button>
-    </kj-button-group>
-  `,
-})
-export class KjButtonGroupToggleExample {
-  readonly bold = signal<boolean | undefined>(true);
-  readonly italic = signal<boolean | undefined>(false);
-  readonly underline = signal<boolean | undefined>(false);
-}

package/src/button-group/_examples/button-group.variants.example.ts

@@ -1,40 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { KjButtonGroupComponent } from '../button-group';
-import { KjButtonComponent } from '../../button/button';
-
-/**
- * Group-level variant propagation. The group sets `kjVariant="outline"` —
- * children that don't override read it as a fallback through the
- * `KJ_BUTTON_GROUP` context. Each child still applies the same variant
- * explicitly here so the styled wrapper picks it up; the group context is
- * the integration point for future variant-aware children.
- */
-@Component({
-  selector: 'kj-button-group-variants-example',
-  standalone: true,
-  imports: [KjButtonGroupComponent, KjButtonComponent],
-  styles: [
-    `
-      :host {
-        display: flex;
-        flex-direction: column;
-        gap: var(--kj-space-md);
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-button-group kjVariant="outline" kjAriaLabel="Outline group">
-      <kj-button kjVariant="outline">Day</kj-button>
-      <kj-button kjVariant="outline">Week</kj-button>
-      <kj-button kjVariant="outline">Month</kj-button>
-    </kj-button-group>
-
-    <kj-button-group kjVariant="ghost" kjAriaLabel="Ghost group">
-      <kj-button kjVariant="ghost">Cut</kj-button>
-      <kj-button kjVariant="ghost">Copy</kj-button>
-      <kj-button kjVariant="ghost">Paste</kj-button>
-    </kj-button-group>
-  `,
-})
-export class KjButtonGroupVariantsExample {}

package/src/button-group/_examples/button-group.vertical.example.ts

@@ -1,29 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { KjButtonGroupComponent } from '../button-group';
-import { KjButtonComponent } from '../../button/button';
-
-/**
- * Vertical orientation: the group stacks its children top-to-bottom and
- * collapses the touching top/bottom edges into a single segmented column.
- */
-@Component({
-  selector: 'kj-button-group-vertical-example',
-  standalone: true,
-  imports: [KjButtonGroupComponent, KjButtonComponent],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-button-group kjOrientation="vertical" kjAriaLabel="View options">
-      <kj-button kjVariant="outline">Top</kj-button>
-      <kj-button kjVariant="outline">Middle</kj-button>
-      <kj-button kjVariant="outline">Bottom</kj-button>
-    </kj-button-group>
-  `,
-})
-export class KjButtonGroupVerticalExample {}

package/src/button-group/_examples/index.ts

@@ -1,7 +0,0 @@
-// AUTO-GENERATED by scripts/migrate-examples.mjs
-// One barrel per component folder — used by the docs app as a lazy chunk.
-export { KjButtonGroupExample } from './button-group.example';
-export { KjButtonGroupIconOnlyExample } from './button-group.icon-only.example';
-export { KjButtonGroupToggleExample } from './button-group.toggle.example';
-export { KjButtonGroupVariantsExample } from './button-group.variants.example';
-export { KjButtonGroupVerticalExample } from './button-group.vertical.example';

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

@@ -1,80 +0,0 @@
-/* ─────────────────────────────────────────────────────────────
-   .kj-button-group — segmented cluster of <kj-button> children.
-   The wrapper itself is a flex container with no padding/bg of
-   its own; segmented "chunky" feel comes from collapsing the
-   inner borders between adjacent buttons and squaring their
-   touching edges while keeping the group's outer corners
-   rounded.
-   ──────────────────────────────────────────────────────────── */
-
-@layer kj.component {
-  .kj-button-group {
-    --kj-button-group-gap: 0;
-    display: inline-flex;
-    flex-direction: row;
-    align-items: stretch;
-    gap: var(--kj-button-group-gap);
-    border-radius: var(--kj-radius-field);
-    /* Hide pseudo-overflow from collapsed-corner siblings. Children also
-       inherit display:contents semantics from <kj-button>, so the inner
-       <button> is the actual flex item. */
-    isolation: isolate;
-  }
-
-  .kj-button-group[data-orientation='vertical'] {
-    flex-direction: column;
-  }
-
-  /* Each <kj-button> sets `display: contents` on its host (see button.ts);
-     the styled element is the inner `.kj-button`. Squarish inner edges +
-     rounded outer edges fall out of :first-child / :last-child rules on
-     those inner buttons. */
-
-  /* ── Horizontal: collapse left/right radii on middle items ─────────── */
-  .kj-button-group:not([data-orientation='vertical']) > kj-button > .kj-button {
-    border-radius: 0;
-    /* Pull adjacent borders into a single visual line. */
-    margin-left: calc(-1 * var(--kj-border));
-  }
-  .kj-button-group:not([data-orientation='vertical']) > kj-button:first-child > .kj-button {
-    border-top-left-radius: var(--kj-radius-field);
-    border-bottom-left-radius: var(--kj-radius-field);
-    margin-left: 0;
-  }
-  .kj-button-group:not([data-orientation='vertical']) > kj-button:last-child > .kj-button {
-    border-top-right-radius: var(--kj-radius-field);
-    border-bottom-right-radius: var(--kj-radius-field);
-  }
-
-  /* ── Vertical: collapse top/bottom radii on middle items ───────────── */
-  .kj-button-group[data-orientation='vertical'] > kj-button > .kj-button {
-    border-radius: 0;
-    margin-top: calc(-1 * var(--kj-border));
-    width: 100%;
-  }
-  .kj-button-group[data-orientation='vertical'] > kj-button:first-child > .kj-button {
-    border-top-left-radius: var(--kj-radius-field);
-    border-top-right-radius: var(--kj-radius-field);
-    margin-top: 0;
-  }
-  .kj-button-group[data-orientation='vertical'] > kj-button:last-child > .kj-button {
-    border-bottom-left-radius: var(--kj-radius-field);
-    border-bottom-right-radius: var(--kj-radius-field);
-  }
-
-  /* Lift the focused / hovered / pressed button above its neighbours so its
-     border isn't clipped by the negative-margin overlap. */
-  .kj-button-group > kj-button > .kj-button:hover,
-  .kj-button-group > kj-button > .kj-button:focus-visible,
-  .kj-button-group > kj-button > .kj-button[aria-pressed='true'] {
-    z-index: 1;
-  }
-
-  /* Group-level disabled: visually muted when the directive flags it. The
-     individual <kj-button>s still render their own aria-disabled when their
-     own kjDisabled is true; consumers wiring the group context as a fallback
-     will get aria-disabled on every child. */
-  .kj-button-group[data-disabled] {
-    opacity: 0.7;
-  }
-}

package/src/button-group/button-group.playground.ts

@@ -1,94 +0,0 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { KjButtonGroupComponent } from './button-group';
-import { KjButtonComponent } from '../button/button';
-import type { PlaygroundFile } from '@kouji-ui/components/playground-types';
-
-/**
- * Playground state — module-scope signals. Tunes orientation, the cascaded
- * variant / size for member buttons, disabled state, and the button count so
- * the segmented joining can be verified visually.
- */
-const orientation = signal<'horizontal' | 'vertical'>('horizontal');
-const variant = signal<'default' | 'outline' | 'ghost' | 'destructive'>('outline');
-const size = signal<'sm' | 'md' | 'lg'>('md');
-const count = signal<2 | 3 | 4>(3);
-const disabled = signal(false);
-
-const LABELS = ['Save', 'Cancel', 'Delete', 'Archive'] as const;
-
-@Component({
-  selector: 'kj-button-group-playground',
-  standalone: true,
-  imports: [KjButtonGroupComponent, KjButtonComponent],
-  template: `
-    <kj-button-group
-      [kjOrientation]="orientation()"
-      [kjVariant]="variant()"
-      [kjSize]="size()"
-      [kjDisabled]="disabled()"
-    >
-      @for (label of buttons(); track label) {
-        <kj-button>{{ label }}</kj-button>
-      }
-    </kj-button-group>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjButtonGroupPlaygroundDemo {
-  protected readonly orientation = orientation;
-  protected readonly variant = variant;
-  protected readonly size = size;
-  protected readonly count = count;
-  protected readonly disabled = disabled;
-
-  protected buttons(): readonly string[] {
-    return LABELS.slice(0, count());
-  }
-}
-
-export const PLAYGROUND: PlaygroundFile = {
-  component: KjButtonGroupPlaygroundDemo,
-  state: {
-    orientation: orientation as unknown as ReturnType<typeof signal>,
-    variant: variant as unknown as ReturnType<typeof signal>,
-    size: size as unknown as ReturnType<typeof signal>,
-    count: count as unknown as ReturnType<typeof signal>,
-    disabled: disabled as unknown as ReturnType<typeof signal>,
-  },
-  controls: [
-    {
-      kind: 'chips',
-      name: 'orientation',
-      label: 'orientation',
-      options: ['horizontal', 'vertical'],
-    },
-    {
-      kind: 'chips',
-      name: 'variant',
-      label: 'variant',
-      options: ['default', 'outline', 'ghost', 'destructive'],
-    },
-    { kind: 'chips', name: 'size', label: 'size', options: ['sm', 'md', 'lg'] },
-    { kind: 'chips', name: 'count', label: 'buttons', options: [2, 3, 4] },
-    { kind: 'toggle', name: 'disabled', label: 'disabled' },
-  ],
-  snippet: (values) => {
-    const s = values as {
-      orientation: string;
-      variant: string;
-      size: string;
-      count: number;
-      disabled: boolean;
-    };
-    const attrs: string[] = [
-      `kjOrientation="${s.orientation}"`,
-      `kjVariant="${s.variant}"`,
-      `kjSize="${s.size}"`,
-    ];
-    if (s.disabled) attrs.push('[kjDisabled]="true"');
-    const children = LABELS.slice(0, s.count)
-      .map((label) => `  <kj-button>${label}</kj-button>`)
-      .join('\n');
-    return `<kj-button-group\n  ${attrs.join('\n  ')}\n>\n${children}\n</kj-button-group>`;
-  },
-};

package/src/button-group/button-group.spec.ts

@@ -1,119 +0,0 @@
-import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
-import { describe, expect, test, beforeEach } from 'vitest';
-import { KJ_BUTTON_GROUP } from '@kouji-ui/core';
-import { KjButtonGroupComponent } from './button-group';
-import { KjButtonComponent } from '../button/button';
-
-@Component({
-  standalone: true,
-  imports: [KjButtonGroupComponent, KjButtonComponent],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-button-group
-      [kjOrientation]="orientation"
-      [kjVariant]="variant"
-      [kjSize]="size"
-      [kjDisabled]="disabled"
-      [kjAriaLabel]="ariaLabel"
-    >
-      <kj-button>One</kj-button>
-      <kj-button>Two</kj-button>
-      <kj-button>Three</kj-button>
-    </kj-button-group>
-  `,
-})
-class HostComponent {
-  orientation: 'horizontal' | 'vertical' = 'horizontal';
-  variant: string | undefined = undefined;
-  size: string | undefined = undefined;
-  disabled = false;
-  ariaLabel: string | undefined = undefined;
-}
-
-describe('KjButtonGroupComponent', () => {
-  beforeEach(() => {
-    TestBed.configureTestingModule({ imports: [HostComponent] });
-  });
-
-  test('renders host with .kj-button-group class and role="group"', () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.detectChanges();
-    const host = fixture.nativeElement.querySelector('kj-button-group');
-    expect(host).not.toBeNull();
-    expect(host.classList.contains('kj-button-group')).toBe(true);
-    expect(host.getAttribute('role')).toBe('group');
-  });
-
-  test('reflects kjOrientation to data-orientation', () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.componentInstance.orientation = 'vertical';
-    fixture.detectChanges();
-    const host = fixture.nativeElement.querySelector('kj-button-group');
-    expect(host.getAttribute('data-orientation')).toBe('vertical');
-  });
-
-  test('forwards kjAriaLabel to host', () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.componentInstance.ariaLabel = 'Toolbar';
-    fixture.detectChanges();
-    const host = fixture.nativeElement.querySelector('kj-button-group');
-    expect(host.getAttribute('aria-label')).toBe('Toolbar');
-  });
-
-  test('writes data-disabled when kjDisabled is true', () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.componentInstance.disabled = true;
-    fixture.detectChanges();
-    const host = fixture.nativeElement.querySelector('kj-button-group');
-    expect(host.getAttribute('data-disabled')).toBe('');
-  });
-
-  test('omits data-disabled when not disabled', () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.detectChanges();
-    const host = fixture.nativeElement.querySelector('kj-button-group');
-    expect(host.hasAttribute('data-disabled')).toBe(false);
-  });
-
-  test('projects child <kj-button> elements', () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.detectChanges();
-    const host = fixture.nativeElement.querySelector('kj-button-group');
-    expect(host.querySelectorAll('button.kj-button').length).toBe(3);
-  });
-
-  test('exposes KJ_BUTTON_GROUP context with forwarded variant/size', () => {
-    let captured: ReturnType<typeof inject<typeof KJ_BUTTON_GROUP>> | undefined;
-
-    @Component({
-      selector: 'kj-bg-probe',
-      standalone: true,
-      template: '',
-    })
-    class Probe {
-      constructor() {
-        captured = inject(KJ_BUTTON_GROUP);
-      }
-    }
-
-    @Component({
-      standalone: true,
-      imports: [KjButtonGroupComponent, Probe],
-      template: `
-        <kj-button-group kjVariant="ghost" kjSize="lg">
-          <kj-bg-probe />
-        </kj-button-group>
-      `,
-    })
-    class HostWithProbe {}
-
-    TestBed.configureTestingModule({ imports: [HostWithProbe] });
-    const fixture = TestBed.createComponent(HostWithProbe);
-    fixture.detectChanges();
-
-    expect(captured).toBeDefined();
-    expect(captured!.variant()).toBe('ghost');
-    expect(captured!.size()).toBe('lg');
-  });
-});