@kouji-ui/components 0.1.1

package/src/chat/chat.spec.ts

@@ -0,0 +1,343 @@
+import { Component } from '@angular/core';
+import { render } from '@testing-library/angular';
+import { describe, expect, it } from 'vitest';
+import {
+  KjChatAvatarComponent,
+  KjChatBubbleComponent,
+  KjChatComponent,
+  KjChatFooterComponent,
+  KjChatHeaderComponent,
+  KjChatLogComponent,
+} from './chat';
+
+const imports = [
+  KjChatLogComponent,
+  KjChatComponent,
+  KjChatAvatarComponent,
+  KjChatHeaderComponent,
+  KjChatBubbleComponent,
+  KjChatFooterComponent,
+];
+
+/**
+ * Allow Angular's signal-driven `effect`s and `afterNextRender` group
+ * computation to settle before the assertions read host attributes.
+ */
+async function flush(): Promise<void> {
+  await new Promise<void>((resolve) => setTimeout(resolve, 0));
+  await Promise.resolve();
+  await Promise.resolve();
+}
+
+describe('KjChatLogComponent', () => {
+  it('renders an inner [kjChatLog] with role=log + aria-live=polite', async () => {
+    @Component({
+      standalone: true,
+      imports,
+      template: `<kj-chat-log></kj-chat-log>`,
+    })
+    class Host {}
+
+    const { container } = await render(Host);
+    await flush();
+
+    const log = container.querySelector('.kj-chat-log') as HTMLElement;
+    expect(log).toBeTruthy();
+    expect(log.getAttribute('role')).toBe('log');
+    expect(log.getAttribute('aria-live')).toBe('polite');
+    expect(log.getAttribute('aria-relevant')).toBe('additions');
+    expect(log.getAttribute('aria-atomic')).toBe('false');
+  });
+
+  it('forwards kjChatLogLabel to the directive (aria-label)', async () => {
+    @Component({
+      standalone: true,
+      imports,
+      template: `<kj-chat-log kjChatLogLabel="Conversation with Alice"></kj-chat-log>`,
+    })
+    class Host {}
+
+    const { container } = await render(Host);
+    await flush();
+
+    expect(container.querySelector('.kj-chat-log')?.getAttribute('aria-label')).toBe(
+      'Conversation with Alice',
+    );
+  });
+
+  it('forwards kjChatLogLive=off to the directive', async () => {
+    @Component({
+      standalone: true,
+      imports,
+      template: `<kj-chat-log kjChatLogLive="off"></kj-chat-log>`,
+    })
+    class Host {}
+
+    const { container } = await render(Host);
+    await flush();
+
+    expect(container.querySelector('.kj-chat-log')?.getAttribute('aria-live')).toBe('off');
+  });
+
+  it('renders projected children unchanged', async () => {
+    @Component({
+      standalone: true,
+      imports,
+      template: `
+        <kj-chat-log>
+          <kj-chat data-testid="r1"><kj-chat-bubble>A</kj-chat-bubble></kj-chat>
+          <kj-chat data-testid="r2"><kj-chat-bubble>B</kj-chat-bubble></kj-chat>
+        </kj-chat-log>
+      `,
+    })
+    class Host {}
+
+    const { container } = await render(Host);
+    await flush();
+
+    expect(container.querySelectorAll('kj-chat')).toHaveLength(2);
+    expect(container.querySelectorAll('.kj-chat-bubble')).toHaveLength(2);
+  });
+});
+
+describe('KjChatComponent', () => {
+  it('default role is article on the inner host', async () => {
+    @Component({
+      standalone: true,
+      imports,
+      template: `<kj-chat></kj-chat>`,
+    })
+    class Host {}
+
+    const { container } = await render(Host);
+    await flush();
+
+    expect(container.querySelector('.kj-chat')?.getAttribute('role')).toBe('article');
+  });
+
+  it('reflects kjSide to data-side', async () => {
+    @Component({
+      standalone: true,
+      imports,
+      template: `<kj-chat kjSide="end"></kj-chat>`,
+    })
+    class Host {}
+
+    const { container } = await render(Host);
+    await flush();
+
+    expect(container.querySelector('.kj-chat')?.getAttribute('data-side')).toBe('end');
+  });
+
+  it('default side is start', async () => {
+    @Component({
+      standalone: true,
+      imports,
+      template: `<kj-chat></kj-chat>`,
+    })
+    class Host {}
+
+    const { container } = await render(Host);
+    await flush();
+
+    expect(container.querySelector('.kj-chat')?.getAttribute('data-side')).toBe('start');
+  });
+
+  it('wires aria-labelledby and aria-describedby from projected header / footer', async () => {
+    @Component({
+      standalone: true,
+      imports,
+      template: `
+        <kj-chat>
+          <kj-chat-header>Alice 12:46</kj-chat-header>
+          <kj-chat-bubble>Hi</kj-chat-bubble>
+          <kj-chat-footer>Sent</kj-chat-footer>
+        </kj-chat>
+      `,
+    })
+    class Host {}
+
+    const { container } = await render(Host);
+    await flush();
+
+    const row = container.querySelector('.kj-chat')!;
+    const header = container.querySelector('.kj-chat-header') as HTMLElement;
+    const footer = container.querySelector('.kj-chat-footer') as HTMLElement;
+    expect(header.id).toMatch(/^kj-chat-header-\d+$/);
+    expect(footer.id).toMatch(/^kj-chat-footer-\d+$/);
+    expect(row.getAttribute('aria-labelledby')).toBe(header.id);
+    expect(row.getAttribute('aria-describedby')).toBe(footer.id);
+  });
+});
+
+describe('KjChatAvatarComponent', () => {
+  it('forces aria-hidden=true and role=presentation on the slot', async () => {
+    @Component({
+      standalone: true,
+      imports,
+      template: `<kj-chat-avatar></kj-chat-avatar>`,
+    })
+    class Host {}
+
+    const { container } = await render(Host);
+    await flush();
+
+    const av = container.querySelector('.kj-chat-avatar')!;
+    expect(av.getAttribute('aria-hidden')).toBe('true');
+    expect(av.getAttribute('role')).toBe('presentation');
+  });
+
+  it('renders projected content', async () => {
+    @Component({
+      standalone: true,
+      imports,
+      template: `
+        <kj-chat-avatar>
+          <span class="probe">probe</span>
+        </kj-chat-avatar>
+      `,
+    })
+    class Host {}
+
+    const { container } = await render(Host);
+    await flush();
+
+    expect(container.querySelector('.kj-chat-avatar .probe')?.textContent).toBe('probe');
+  });
+});
+
+describe('KjChatBubbleComponent', () => {
+  it('default variant + size land on the inner host', async () => {
+    @Component({
+      standalone: true,
+      imports,
+      template: `<kj-chat-bubble>Hi</kj-chat-bubble>`,
+    })
+    class Host {}
+
+    const { container } = await render(Host);
+    await flush();
+
+    const b = container.querySelector('.kj-chat-bubble')!;
+    expect(b.getAttribute('data-variant')).toBe('default');
+    expect(b.getAttribute('data-size')).toBe('md');
+  });
+
+  it('forwards kjVariant + kjSize through the typed wrapper inputs', async () => {
+    @Component({
+      standalone: true,
+      imports,
+      template: `<kj-chat-bubble kjVariant="primary" kjSize="lg">Hi</kj-chat-bubble>`,
+    })
+    class Host {}
+
+    const { container } = await render(Host);
+    await flush();
+
+    const b = container.querySelector('.kj-chat-bubble')!;
+    expect(b.getAttribute('data-variant')).toBe('primary');
+    expect(b.getAttribute('data-size')).toBe('lg');
+  });
+
+  it('renders data-tail inside a row by default', async () => {
+    @Component({
+      standalone: true,
+      imports,
+      template: `
+        <kj-chat>
+          <kj-chat-bubble>Hi</kj-chat-bubble>
+        </kj-chat>
+      `,
+    })
+    class Host {}
+
+    const { container } = await render(Host);
+    await flush();
+
+    expect(container.querySelector('.kj-chat-bubble')?.hasAttribute('data-tail')).toBe(true);
+  });
+
+  it('omits data-tail when kjChatBubbleNoTail is true', async () => {
+    @Component({
+      standalone: true,
+      imports,
+      template: `
+        <kj-chat>
+          <kj-chat-bubble [kjChatBubbleNoTail]="true">Hi</kj-chat-bubble>
+        </kj-chat>
+      `,
+    })
+    class Host {}
+
+    const { container } = await render(Host);
+    await flush();
+
+    expect(container.querySelector('.kj-chat-bubble')?.hasAttribute('data-tail')).toBe(false);
+  });
+});
+
+describe('KjChatFooterComponent', () => {
+  it('reflects kjState as data-state and aria-label', async () => {
+    @Component({
+      standalone: true,
+      imports,
+      template: `<kj-chat-footer kjState="read">Read</kj-chat-footer>`,
+    })
+    class Host {}
+
+    const { container } = await render(Host);
+    await flush();
+
+    const f = container.querySelector('.kj-chat-footer')!;
+    expect(f.getAttribute('data-state')).toBe('read');
+    expect(f.getAttribute('aria-label')).toBe('Read');
+  });
+
+  it('omits data-state when kjState is unset', async () => {
+    @Component({
+      standalone: true,
+      imports,
+      template: `<kj-chat-footer>Sent 12:46</kj-chat-footer>`,
+    })
+    class Host {}
+
+    const { container } = await render(Host);
+    await flush();
+
+    const f = container.querySelector('.kj-chat-footer')!;
+    expect(f.hasAttribute('data-state')).toBe(false);
+    expect(f.hasAttribute('aria-label')).toBe(false);
+  });
+});
+
+describe('KjChatHeaderComponent', () => {
+  it('mints unique ids for two adjacent headers', async () => {
+    @Component({
+      standalone: true,
+      imports,
+      template: `
+        <kj-chat-log>
+          <kj-chat>
+            <kj-chat-header data-testid="h1">A</kj-chat-header>
+            <kj-chat-bubble>x</kj-chat-bubble>
+          </kj-chat>
+          <kj-chat>
+            <kj-chat-header data-testid="h2">B</kj-chat-header>
+            <kj-chat-bubble>y</kj-chat-bubble>
+          </kj-chat>
+        </kj-chat-log>
+      `,
+    })
+    class Host {}
+
+    const { container } = await render(Host);
+    await flush();
+
+    const headers = container.querySelectorAll('.kj-chat-header');
+    expect(headers.length).toBe(2);
+    const h1 = (headers[0] as HTMLElement).id;
+    const h2 = (headers[1] as HTMLElement).id;
+    expect(h1).not.toEqual(h2);
+    expect(h1).toMatch(/^kj-chat-header-/);
+  });
+});

package/src/chat/chat.ts

@@ -0,0 +1,269 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ViewEncapsulation,
+  input,
+} from '@angular/core';
+import {
+  KjChat,
+  KjChatAvatar,
+  KjChatBubble,
+  KjChatFooter,
+  KjChatHeader,
+  KjChatLog,
+  type KjChatRole,
+  type KjChatSide,
+  type KjChatState,
+} from '@kouji-ui/core';
+
+/**
+ * Typed bubble variant set. Mirrors the analysis preset list so consumer
+ * templates get IDE autocomplete; the underlying `KjVariant` widens to
+ * `string` and is validated against `KJ_CHAT_BUBBLE_CONFIG` in dev mode.
+ */
+export type KjChatBubbleVariant =
+  | 'default'
+  | 'primary'
+  | 'secondary'
+  | 'accent'
+  | 'info'
+  | 'success'
+  | 'warning'
+  | 'error';
+
+/** Typed bubble size set. Backed by `KjSize` host directive. */
+export type KjChatBubbleSize = 'sm' | 'md' | 'lg';
+
+/** Live-region politeness for the log container. */
+export type KjChatLogLive = 'polite' | 'off';
+
+/**
+ * Chat log container. Composes `KjChatLog` via `hostDirectives` so the
+ * `role="log"` / `aria-live` / `aria-relevant` host bindings land on the
+ * `<kj-chat-log>` custom element itself — that element IS the live region
+ * announced by APG's Log pattern, AND the `KJ_CHAT_LOG` provider lives
+ * here so projected `<kj-chat>` children find it through their consumer-
+ * declared injector chain (content projection preserves the original
+ * injection context).
+ *
+ * Per the analysis we ship `aria-live="polite"` by default and deliberately
+ * do not expose `'assertive'` — interrupting the user mid-typing on every
+ * inbound message is the canonical chat-app a11y bug.
+ *
+ * @doc-example Default
+ *   The default playground — a four-message conversation between two senders.
+ *   @doc-file chat-bubble.example.ts
+ * @doc-example Usage
+ *   The common shape — start/end sides, primary variant for self, footer
+ *   read-state. Use this as the copy-paste starting point.
+ *   @doc-file chat.usage.example.ts
+ * @doc-example Sides
+ *   `kjSide="start"` (theirs) vs `"end"` (mine) — drives bubble tail and alignment.
+ *   @doc-file chat-bubble.sides.example.ts
+ * @doc-example Variants
+ *   default / primary / success / warning / error — pick the visual register.
+ *   @doc-file chat-bubble.variants.example.ts
+ * @doc-example With state
+ *   Footer `kjState` reflects delivery / read / failed glyphs with an `aria-label`.
+ *   @doc-file chat-bubble.with-state.example.ts
+ * @doc-example Grouped
+ *   Consecutive rows from the same `kjChatAuthor` collapse their headers and tails.
+ *   @doc-file chat-bubble.grouped.example.ts
+ *
+ * @doc-keyboard
+ *   Tab           — Moves focus through interactive elements inside the log (links, action buttons)
+ *
+ * @doc-aria
+ *   role             — `log` on `<kj-chat-log>`; `article` on each `<kj-chat>` row
+ *   aria-live        — `"polite"` on the log (assertive is deliberately not exposed)
+ *   aria-relevant    — `"additions"` on the log so removed messages don't re-announce
+ *   aria-labelledby  — Row references its header id
+ *   aria-describedby — Row references its footer (state) id
+ *   data-side        — Mirrors `kjSide` for theme/scope hooks
+ *   data-grouped     — Reflected when consecutive rows share an author
+ *
+ * @doc-touch
+ *   Bubbles are reading surfaces, not tap targets. When wiring in action
+ *   buttons (reply, react, copy) inside a row, size them to ≥ 44×44 and
+ *   reveal them on hover/focus rather than packing them inline.
+ *
+ * @doc-a11y
+ *   Follows the WAI-ARIA APG Log pattern. The log defaults to `aria-live="polite"`
+ *   so AT users hear inbound messages without interruption — we deliberately
+ *   do not expose `"assertive"`. Avatars are forced `aria-hidden` because the
+ *   row's header conveys sender identity. Footer state glyphs carry an
+ *   `aria-label` so "✓✓" reads as "Read".
+ *
+ * @doc-related dialog,toast,popover
+ *
+ * @doc-css-var
+ *   --kj-chat-gap                — Column gap between avatar and bubble in the row grid.
+ *   --kj-chat-col-gap            — Row gap between header, bubble, and footer cells.
+ *   --kj-chat-bubble-bg          — Bubble background fill. Variant rules set this; override per side or sender.
+ *   --kj-chat-bubble-fg          — Bubble foreground (text) color. Resolved per variant.
+ *   --kj-chat-bubble-radius      — Bubble corner radius. Inherits --kj-radius-box.
+ *   --kj-chat-bubble-padding-x   — Horizontal padding inside the bubble. Sizes override.
+ *   --kj-chat-bubble-padding-y   — Vertical padding inside the bubble. Sizes override.
+ *   --kj-chat-bubble-font-size   — Bubble font size. Sizes override.
+ *
+ * @doc-category Library/Data display
+ * @doc
+ * @doc-name chat
+ * @doc-description Themed chat message log with bubble variants, avatars, and accessible inbound-message announcements.
+ * @doc-is-main
+ */
+@Component({
+  selector: 'kj-chat-log',
+  standalone: true,
+  hostDirectives: [
+    {
+      directive: KjChatLog,
+      inputs: ['kjChatLogLive', 'kjChatLogLabel'],
+    },
+  ],
+  template: `<ng-content />`,
+  styleUrl: './chat.css',
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'kj-chat-log' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjChatLogComponent {}
+
+/**
+ * Chat row. Composes `KjChat` via `hostDirectives` so `role="article"` (or
+ * the consumer's `kjRole` override), `data-side`, `data-grouped`, and the
+ * `aria-labelledby` / `aria-describedby` wiring all land on the `<kj-chat>`
+ * host. The `KJ_CHAT` provider lives on the host so projected
+ * `<kj-chat-header>`, `<kj-chat-bubble>`, `<kj-chat-footer>` children find
+ * it through their original consumer-declared injector chain.
+ *
+ * Group-by-sender uses `previousElementSibling` traversal — that walk stays
+ * deterministic even with the wrapper because the grouping `KjChat`
+ * instances live on the visible custom elements that ARE physical DOM
+ * siblings inside the log.
+ * @doc
+ * @doc-name chat
+ */
+@Component({
+  selector: 'kj-chat',
+  standalone: true,
+  hostDirectives: [
+    {
+      directive: KjChat,
+      inputs: ['kjSide', 'kjChatAuthor', 'kjChatGrouped', 'kjRole'],
+    },
+  ],
+  template: `<ng-content />`,
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'kj-chat' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjChatComponent {}
+
+/**
+ * Sender face slot. Composes `KjChatAvatar` so the slot is forced
+ * `aria-hidden="true"` (the row's accessible name comes from the header;
+ * letting the avatar's `<img alt>` re-announce the name causes AT users
+ * to hear "Jane Doe, Jane Doe, [message]"). Project a decorative
+ * `<kj-avatar>` (or any ornamental marker) inside.
+ * @doc
+ * @doc-name chat
+ */
+@Component({
+  selector: 'kj-chat-avatar',
+  standalone: true,
+  hostDirectives: [KjChatAvatar],
+  template: `<ng-content />`,
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'kj-chat-avatar' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjChatAvatarComponent {}
+
+/**
+ * Sender name + time header. The directive mints a stable id and registers
+ * it with the parent row for `aria-labelledby`; the wrapper supplies the
+ * `<ng-content>` slot. Per the analysis the header should contain a
+ * `<time datetime="…">` element; the directive does not enforce this — the
+ * consumer renders it.
+ * @doc
+ * @doc-name chat
+ */
+@Component({
+  selector: 'kj-chat-header',
+  standalone: true,
+  hostDirectives: [KjChatHeader],
+  template: `<ng-content />`,
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'kj-chat-header' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjChatHeaderComponent {}
+
+/**
+ * Rounded message body. Renders an inner `[kjChatBubble]` host (which
+ * itself composes `KjVariant` + `KjSize` via `hostDirectives`) so
+ * `data-variant`, `data-size`, and `data-tail` land on the visible bubble
+ * element where the CSS expects them. The bubble does not provide DI
+ * tokens to descendants, so projecting through an inner template does not
+ * break any injection chain.
+ *
+ * Variant / size are typed at the wrapper layer for IDE autocomplete; they
+ * widen to `string` at the directive layer where they are validated against
+ * `KJ_CHAT_BUBBLE_CONFIG` in dev mode.
+ * @doc
+ * @doc-name chat
+ */
+@Component({
+  selector: 'kj-chat-bubble',
+  standalone: true,
+  imports: [KjChatBubble],
+  template: `
+    <p
+      kjChatBubble
+      class="kj-chat-bubble"
+      [kjVariant]="kjVariant()"
+      [kjSize]="kjSize()"
+      [kjChatBubbleNoTail]="kjChatBubbleNoTail()"
+    >
+      <ng-content />
+    </p>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  host: { style: 'display: contents;' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjChatBubbleComponent {
+  /** Visual register. Validated against `KJ_CHAT_BUBBLE_CONFIG`. */
+  readonly kjVariant = input<KjChatBubbleVariant>('default');
+  /** Density preset. Drives padding + font-size on the bubble. */
+  readonly kjSize = input<KjChatBubbleSize>('md');
+  /** Suppresses the tail unconditionally. Auto-suppression on grouped rows is independent. */
+  readonly kjChatBubbleNoTail = input(false);
+}
+
+/**
+ * Read-state footer. Composes `KjChatFooter` so the directive mints an id,
+ * registers it with the parent row for `aria-describedby`, reflects
+ * `kjState` to `data-state`, and injects an `aria-label` so the glyph is
+ * intelligible to AT.
+ * @doc
+ * @doc-name chat
+ */
+@Component({
+  selector: 'kj-chat-footer',
+  standalone: true,
+  hostDirectives: [
+    {
+      directive: KjChatFooter,
+      inputs: ['kjState'],
+    },
+  ],
+  template: `<ng-content />`,
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'kj-chat-footer' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjChatFooterComponent {}
+
+export type { KjChatRole, KjChatSide, KjChatState };

package/src/chat/chat.usage.example.ts

@@ -0,0 +1,49 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { KjAvatarComponent } from '../avatar/avatar';
+import {
+  KjChatAvatarComponent,
+  KjChatBubbleComponent,
+  KjChatComponent,
+  KjChatFooterComponent,
+  KjChatHeaderComponent,
+  KjChatLogComponent,
+} from './chat';
+
+/**
+ * Common chat-log shape — labelled log, two senders, sides, a primary
+ * variant for self, and a footer read-state. Use this as the copy-paste
+ * starting point for new screens.
+ */
+@Component({
+  selector: 'kj-chat-usage-example',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    KjChatLogComponent,
+    KjChatComponent,
+    KjChatAvatarComponent,
+    KjChatHeaderComponent,
+    KjChatBubbleComponent,
+    KjChatFooterComponent,
+    KjAvatarComponent,
+  ],
+  styles: [`
+    :host { display: block; }
+    kj-chat-log { max-height: 20rem; }
+  `],
+  template: `
+    <kj-chat-log kjChatLogLabel="Conversation with Maya">
+      <kj-chat kjSide="start" kjChatAuthor="maya">
+        <kj-chat-avatar><kj-avatar content="MA" alt="Maya" /></kj-chat-avatar>
+        <kj-chat-header>Maya <time datetime="2025-05-06T09:12">09:12</time></kj-chat-header>
+        <kj-chat-bubble>Want to ship the token system this week?</kj-chat-bubble>
+      </kj-chat>
+
+      <kj-chat kjSide="end" kjChatAuthor="me">
+        <kj-chat-bubble kjVariant="primary">Yes — PR's open, waiting on review.</kj-chat-bubble>
+        <kj-chat-footer kjState="read">Read</kj-chat-footer>
+      </kj-chat>
+    </kj-chat-log>
+  `,
+})
+export class KjChatUsageExample {}

package/src/chat/index.ts

@@ -0,0 +1,13 @@
+export {
+  KjChatAvatarComponent,
+  KjChatBubbleComponent,
+  KjChatComponent,
+  KjChatFooterComponent,
+  KjChatHeaderComponent,
+  KjChatLogComponent,
+  type KjChatBubbleSize,
+  type KjChatBubbleVariant,
+  type KjChatRole,
+  type KjChatSide,
+  type KjChatState,
+} from './chat';

package/src/checkbox/_examples/checkbox.checked.example.ts

@@ -0,0 +1,20 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { KjCheckboxComponent } from '../checkbox';
+
+@Component({
+  selector: 'kj-checkbox-checked-example',
+  standalone: true,
+  imports: [KjCheckboxComponent],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `<kj-checkbox [(checked)]="value">Subscribed</kj-checkbox>`,
+})
+export class KjCheckboxCheckedExample {
+  readonly value = signal(true);
+}