@egose/shadcn-theme-ng-tw 0.1.0 → 0.2.0

package/textarea/README.md

@@ -1,11 +1,288 @@
-# Textarea
+# Textarea (`@egose/shadcn-theme-ng/textarea`)
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli).
+A multi-line text input, equivalent to [shadcn/ui Textarea](https://ui.shadcn.com/docs/components/textarea). This subpath ships a single thin styling directive, `HlmTextarea` (`[hlmTextarea]`), over spartan-ng's `BrnTextarea` primitive (plus `BrnFieldControlDescribedBy` for form-field hint/error wiring). All behavior — value binding, validation, auto-sizing — comes from the Brn primitive and Angular forms; this package only applies shadcn styling (border, focus ring, invalid state, placeholder color).
 
-## Building
+> **Ships as:** `@egose/shadcn-theme-ng/textarea` and `@egose/shadcn-theme-ng-tw/textarea` (the `tw:`-prefixed Tailwind variant). See the [package README](../../README.md) for install steps, peer dependencies, Tailwind setup, and testing/release guidance. Do not publish this project directory independently.
 
-To build the library, run:
+## Installation
 
 ```bash
-ng build textarea
+# Plain Tailwind (no prefix)
+npm install @egose/shadcn-theme-ng
+
+# Or the tw:-prefixed variant
+npm install @egose/shadcn-theme-ng-tw
+```
+
+`@spartan-ng/brain` arrives transitively; `FormsModule`/`ReactiveFormsModule` come from your app when you need form bindings. See the [package README](../../README.md) for the full peer-dependency table.
+
+## Imports
+
+All public symbols are re-exported from `projects/textarea/src/public-api.ts`:
+
+```ts
+import { HlmTextarea, HlmTextareaImports, HlmTextareaModule } from '@egose/shadcn-theme-ng/textarea';
+// tw variant:
+// import { HlmTextarea, HlmTextareaImports, HlmTextareaModule } from '@egose/shadcn-theme-ng-tw/textarea';
+```
+
+Standalone-component usage (preferred):
+
+```ts
+import { Component } from '@angular/core';
+import { HlmTextareaImports } from '@egose/shadcn-theme-ng/textarea';
+
+@Component({
+  selector: 'app-demo',
+  standalone: true,
+  imports: [...HlmTextareaImports],
+  template: `<textarea hlmTextarea placeholder="Type here…"></textarea>`,
+})
+export class DemoComponent {}
+```
+
+NgModule usage:
+
+```ts
+import { NgModule } from '@angular/core';
+import { HlmTextareaModule } from '@egose/shadcn-theme-ng/textarea';
+
+@NgModule({ imports: [HlmTextareaModule] })
+export class FeatureModule {}
+```
+
+| Symbol               | Kind          | Description                                          |
+| -------------------- | ------------- | ---------------------------------------------------- |
+| `HlmTextarea`        | Directive     | `[hlmTextarea]` — shadcn styling over `BrnTextarea`. |
+| `HlmTextareaImports` | `const` array | `[HlmTextarea]` — spread into `imports: [...]`.      |
+| `HlmTextareaModule`  | NgModule      | Imports + re-exports `HlmTextarea`.                  |
+
+## Anatomy / Structure
+
+```html
+<!-- basic -->
+<textarea hlmTextarea placeholder="Tell us about yourself…"></textarea>
+
+<!-- with label + hint -->
+<div class="space-y-2">
+  <label hlmLabel for="bio">Bio</label>
+  <textarea hlmTextarea id="bio" rows="4" placeholder="Short bio…"></textarea>
+  <p class="text-sm text-muted-foreground">Up to 500 characters.</p>
+</div>
+
+<!-- reactive form -->
+<textarea hlmTextarea formControlName="notes" rows="5"></textarea>
+
+<!-- forced invalid state -->
+<textarea hlmTextarea [forceInvalid]="true"></textarea>
+```
+
+## API reference
+
+### `HlmTextarea` — selector `[hlmTextarea]` (directive, hosts `BrnTextarea` + `BrnFieldControlDescribedBy`)
+
+The directive declares **no own inputs/outputs**. All behavior comes from host directives:
+
+| Input          | Source                       | Description                                                                              |
+| -------------- | ---------------------------- | ---------------------------------------------------------------------------------------- |
+| `id`           | `BrnTextarea`                | Element id (pairs with `<label for>` and form-field wiring).                             |
+| `forceInvalid` | `BrnTextarea`                | Force the `data-[matches-spartan-invalid=true]` invalid styles even without form errors. |
+| (described-by) | `BrnFieldControlDescribedBy` | Auto-wires `aria-describedby` to enclosing form-field hint/error.                        |
+
+Standard native attributes (`rows`, `placeholder`, `disabled`, `readonly`, `maxlength`, `name`, …) and Angular form bindings (`formControl`, `formControlName`, `ngModel`) work as usual through the underlying `<textarea>`.
+
+Host: `data-slot="textarea"`. Invalid styling keys off `data-[matches-spartan-invalid=true]` (`border-destructive`, `ring-destructive`). Disabled state renders `cursor-not-allowed` + `opacity-50`. User `class` is preserved and merged via `classes()`.
+
+## Examples
+
+### 1. Basic usage with label
+
+```ts
+// demo-basic.component.ts
+import { Component } from '@angular/core';
+import { HlmTextareaImports } from '@egose/shadcn-theme-ng/textarea';
+import { HlmLabel } from '@egose/shadcn-theme-ng/label';
+
+@Component({
+  selector: 'demo-basic',
+  standalone: true,
+  imports: [...HlmTextareaImports, HlmLabel],
+  template: `
+    <div class="space-y-2">
+      <label hlmLabel for="bio">Bio</label>
+      <textarea hlmTextarea id="bio" rows="4" placeholder="Tell us about yourself…"></textarea>
+    </div>
+  `,
+})
+export class DemoBasic {}
+```
+
+### 2. Reactive form with validation + character count
+
+```ts
+// demo-reactive.component.ts
+import { Component } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { HlmTextareaImports } from '@egose/shadcn-theme-ng/textarea';
+import { HlmLabel } from '@egose/shadcn-theme-ng/label';
+
+@Component({
+  selector: 'demo-reactive',
+  standalone: true,
+  imports: [...HlmTextareaImports, ReactiveFormsModule, HlmLabel],
+  template: `
+    <form [formGroup]="form" class="space-y-2">
+      <label hlmLabel for="feedback">Feedback</label>
+      <textarea
+        hlmTextarea
+        id="feedback"
+        rows="5"
+        maxlength="500"
+        placeholder="What did you think?"
+        formControlName="feedback"
+      ></textarea>
+      <div class="flex justify-between text-sm">
+        <span class="text-destructive">
+          @if (form.controls.feedback.hasError('required') && form.controls.feedback.touched) {
+            Feedback is required.
+          } @else if (form.controls.feedback.hasError('minlength')) {
+            At least 10 characters.
+          }
+        </span>
+        <span class="text-muted-foreground">{{ form.controls.feedback.value?.length ?? 0 }}/500</span>
+      </div>
+    </form>
+  `,
+})
+export class DemoReactive {
+  readonly form = new FormGroup({
+    feedback: new FormControl('', [Validators.required, Validators.minLength(10)]),
+  });
+}
+```
+
+### 3. Template-driven form (`ngModel`)
+
+```ts
+// demo-template.component.ts
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { HlmTextareaImports } from '@egose/shadcn-theme-ng/textarea';
+import { HlmLabel } from '@egose/shadcn-theme-ng/label';
+
+@Component({
+  selector: 'demo-template',
+  standalone: true,
+  imports: [...HlmTextareaImports, FormsModule, HlmLabel],
+  template: `
+    <div class="space-y-2">
+      <label hlmLabel for="notes">Notes</label>
+      <textarea hlmTextarea id="notes" name="notes" rows="3" [(ngModel)]="notes"></textarea>
+      <p class="text-sm text-muted-foreground">Preview: {{ notes || '—' }}</p>
+    </div>
+  `,
+})
+export class DemoTemplate {
+  notes = '';
+}
+```
+
+### 4. Disabled / readonly / error states
+
+```ts
+// demo-states.component.ts
+import { Component } from '@angular/core';
+import { HlmTextareaImports } from '@egose/shadcn-theme-ng/textarea';
+import { HlmLabel } from '@egose/shadcn-theme-ng/label';
+
+@Component({
+  selector: 'demo-states',
+  standalone: true,
+  imports: [...HlmTextareaImports, HlmLabel],
+  template: `
+    <div class="space-y-4">
+      <div class="space-y-2">
+        <label hlmLabel for="t-disabled">Disabled</label>
+        <textarea hlmTextarea id="t-disabled" disabled placeholder="Cannot edit…"></textarea>
+      </div>
+      <div class="space-y-2">
+        <label hlmLabel for="t-readonly">Readonly</label>
+        <textarea hlmTextarea id="t-readonly" readonly rows="2">Submitted value, read only.</textarea>
+      </div>
+      <div class="space-y-2">
+        <label hlmLabel for="t-invalid">Forced invalid</label>
+        <textarea hlmTextarea id="t-invalid" [forceInvalid]="true" rows="2">Fails custom rule.</textarea>
+        <p class="text-sm text-destructive">Custom server error goes here.</p>
+      </div>
+    </div>
+  `,
+})
+export class DemoStates {}
 ```
+
+### 5. Inside a form-field (hint + error wiring)
+
+`BrnFieldControlDescribedBy` auto-links the textarea to the surrounding field's hint/error for screen readers:
+
+```ts
+// demo-field.component.ts
+import { Component } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { HlmTextareaImports } from '@egose/shadcn-theme-ng/textarea';
+import { HlmFormFieldImports } from '@egose/shadcn-theme-ng/form-field';
+
+@Component({
+  selector: 'demo-field',
+  standalone: true,
+  imports: [...HlmTextareaImports, ...HlmFormFieldImports, ReactiveFormsModule],
+  template: `
+    <form [formGroup]="form">
+      <hlm-form-field>
+        <label hlmLabel for="desc">Description</label>
+        <textarea hlmTextarea id="desc" formControlName="description" rows="4"></textarea>
+        <hlm-hint>Describe the issue in a few sentences.</hlm-hint>
+        <hlm-error>Description is required.</hlm-error>
+      </hlm-form-field>
+    </form>
+  `,
+})
+export class DemoField {
+  readonly form = new FormGroup({ description: new FormControl('', Validators.required) });
+}
+```
+
+(Exact `hlm-form-field`/`hlm-hint`/`hlm-error` selector names come from `@egose/shadcn-theme-ng/form-field` — check that subpath for the current API.)
+
+### 6. Autosize / custom sizing
+
+The base styles include `field-sizing-content` + `min-h-16`, so the textarea grows with content in supporting browsers. Combine with `rows` and width utilities:
+
+```html
+<!-- fixed 8 rows, full width (default w-full) -->
+<textarea hlmTextarea rows="8" placeholder="Long-form answer…"></textarea>
+
+<!-- constrained width + no manual resize -->
+<textarea hlmTextarea rows="4" class="max-w-xl resize-none" placeholder="No drag handle…"></textarea>
+
+<!-- tall monospace variant for code -->
+<textarea hlmTextarea rows="10" class="font-mono text-sm" spellcheck="false"></textarea>
+```
+
+## Accessibility notes
+
+- Every textarea needs a visible `<label>` (matching `for`/`id`) — placeholders are not labels.
+- Wire hint/error text with `aria-describedby` (automatic inside `hlm-form-field` via `BrnFieldControlDescribedBy`; manual `aria-describedby="hint-id"` otherwise).
+- Surface validation errors both visually (`forceInvalid` / form errors → `border-destructive`) and as text adjacent to the field; do not rely on color alone.
+- Keep `maxlength` announcements truthful — show a live character count for constrained fields.
+- Disabled textareas are skipped by assistive tech; use `readonly` when the value must remain perceivable but not editable.
+
+## Theming / CSS variables
+
+Keys off theme tokens (`border-input`, `bg-input/30` in dark mode, `ring-ring/50`, `text-muted-foreground` placeholder, `border-destructive`/`ring-destructive` invalid). Follows your shadcn theme automatically; extend via `class` (merged through `classes()`).
+
+## Related subpaths
+
+- `@egose/shadcn-theme-ng/input` — single-line sibling control.
+- `@egose/shadcn-theme-ng/label` — accessible labels.
+- `@egose/shadcn-theme-ng/form-field` / `@egose/shadcn-theme-ng/form-textarea` — labeled field with hint/error wiring.
+- `@egose/shadcn-theme-ng/button` — submit actions for textarea forms.

package/toggle/README.md

@@ -1,11 +1,276 @@
-# Toggle
+# Toggle (`@egose/shadcn-theme-ng/toggle`)
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli).
+A two-state press button, equivalent to [shadcn/ui Toggle](https://ui.shadcn.com/docs/components/toggle). This subpath ships a single thin styling directive, `HlmToggle` (`button[hlmToggle]`), over spartan-ng's `BrnToggle` primitive, with `variant` (`default`/`outline`) and `size` (`default`/`sm`/`lg`) inputs powered by `toggleVariants` (cva). Use it for standalone on/off buttons (bold, italic, mute); use `toggle-group` for sets of related toggles.
 
-## Building
+> **Ships as:** `@egose/shadcn-theme-ng/toggle` and `@egose/shadcn-theme-ng-tw/toggle` (the `tw:`-prefixed Tailwind variant). See the [package README](../../README.md) for install steps, peer dependencies, Tailwind setup, and testing/release guidance. Do not publish this project directory independently.
 
-To build the library, run:
+## Installation
 
 ```bash
-ng build toggle
+# Plain Tailwind (no prefix)
+npm install @egose/shadcn-theme-ng
+
+# Or the tw:-prefixed variant
+npm install @egose/shadcn-theme-ng-tw
+```
+
+`@spartan-ng/brain` and `class-variance-authority` arrive transitively. See the [package README](../../README.md) for the full peer-dependency table.
+
+## Imports
+
+All public symbols are re-exported from `projects/toggle/src/public-api.ts`:
+
+```ts
+import { HlmToggle, HlmToggleImports, HlmToggleModule, toggleVariants } from '@egose/shadcn-theme-ng/toggle';
+import type { ToggleVariants } from '@egose/shadcn-theme-ng/toggle';
+// tw variant: swap to '@egose/shadcn-theme-ng-tw/toggle'
+```
+
+Standalone-component usage (preferred):
+
+```ts
+import { Component } from '@angular/core';
+import { HlmToggleImports } from '@egose/shadcn-theme-ng/toggle';
+
+@Component({
+  selector: 'app-demo',
+  standalone: true,
+  imports: [...HlmToggleImports],
+  template: `<button hlmToggle aria-label="Bold">B</button>`,
+})
+export class DemoComponent {}
+```
+
+NgModule usage:
+
+```ts
+import { NgModule } from '@angular/core';
+import { HlmToggleModule } from '@egose/shadcn-theme-ng/toggle';
+
+@NgModule({ imports: [HlmToggleModule] })
+export class FeatureModule {}
+```
+
+| Symbol             | Kind          | Description                                                                    |
+| ------------------ | ------------- | ------------------------------------------------------------------------------ |
+| `HlmToggle`        | Directive     | `button[hlmToggle]` — styled toggle button over `BrnToggle`.                   |
+| `toggleVariants`   | cva fn        | `toggleVariants({ variant, size })` — class generator, reused by toggle-group. |
+| `ToggleVariants`   | Type          | `VariantProps<typeof toggleVariants>` — `variant`/`size` value types.          |
+| `HlmToggleImports` | `const` array | `[HlmToggle]` — spread into `imports: [...]`.                                  |
+| `HlmToggleModule`  | NgModule      | Imports + re-exports `HlmToggle`.                                              |
+
+## Anatomy / Structure
+
+```html
+<!-- basic (pressed when aria-pressed="true" / state on) -->
+<button hlmToggle aria-label="Toggle bold">B</button>
+
+<!-- variants + sizes -->
+<button hlmToggle variant="outline" size="sm">Toggle</button>
+<button hlmToggle variant="default" size="lg" aria-label="Toggle italic">I</button>
+
+<!-- controlled pressed state -->
+<button hlmToggle [(state)]="bold" aria-label="Bold">B</button>
+
+<!-- disabled -->
+<button hlmToggle disabled aria-label="Unavailable">X</button>
+```
+
+> Only use on `<button>` elements — the selector is `button[hlmToggle]`.
+
+## API reference
+
+### `HlmToggle` — selector `button[hlmToggle]` (directive, hosts `BrnToggle`)
+
+Own styling inputs:
+
+| Input     | Type                                                   | Default     | Description                                                           |
+| --------- | ------------------------------------------------------ | ----------- | --------------------------------------------------------------------- |
+| `variant` | `ToggleVariants['variant']` (`'default' \| 'outline'`) | `'default'` | `default`: transparent; `outline`: bordered + shadow.                 |
+| `size`    | `ToggleVariants['size']` (`'default' \| 'sm' \| 'lg'`) | `'default'` | `default`: `h-9 min-w-9`; `sm`: `h-8 min-w-8`; `lg`: `h-10 min-w-10`. |
+
+Forwarded to `BrnToggle` via `hostDirectives`:
+
+| Input / Output | Direction               | Description                                                    |
+| -------------- | ----------------------- | -------------------------------------------------------------- |
+| `id`           | input                   | Element id.                                                    |
+| `value`        | input                   | Toggle value (used in groups / forms).                         |
+| `disabled`     | input                   | Disabled state.                                                |
+| `state`        | input (two-way capable) | Pressed state (`'on' \| 'off'` per Brn). Supports `[(state)]`. |
+| `aria-label`   | input                   | Accessible name — **required** for icon-only toggles.          |
+| `type`         | input                   | Button `type` (`button` default).                              |
+| `stateChange`  | output                  | Emits when the pressed state changes.                          |
+
+Host: `data-slot="toggle"`. Active styling keys off `aria-pressed`/`data-[state]` (`aria-pressed:bg-muted`). User `class` is preserved and merged via `classes()`.
+
+## Examples
+
+### 1. Basic icon toggles (editor toolbar)
+
+```ts
+// demo-basic.component.ts
+import { Component } from '@angular/core';
+import { HlmToggleImports } from '@egose/shadcn-theme-ng/toggle';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideBold, lucideItalic, lucideUnderline } from '@ng-icons/lucide';
+
+@Component({
+  selector: 'demo-basic',
+  standalone: true,
+  imports: [...HlmToggleImports, NgIcon],
+  providers: [provideIcons({ lucideBold, lucideItalic, lucideUnderline })],
+  template: `
+    <div class="flex gap-1">
+      <button hlmToggle aria-label="Toggle bold"><ng-icon name="lucideBold" /></button>
+      <button hlmToggle aria-label="Toggle italic"><ng-icon name="lucideItalic" /></button>
+      <button hlmToggle aria-label="Toggle underline"><ng-icon name="lucideUnderline" /></button>
+    </div>
+  `,
+})
+export class DemoBasic {}
 ```
+
+### 2. All variants and sizes
+
+```ts
+// demo-variants.component.ts
+import { Component } from '@angular/core';
+import { HlmToggleImports } from '@egose/shadcn-theme-ng/toggle';
+
+@Component({
+  selector: 'demo-variants',
+  standalone: true,
+  imports: [...HlmToggleImports],
+  template: `
+    <div class="flex flex-wrap items-center gap-2">
+      <button hlmToggle variant="default" size="sm">Small</button>
+      <button hlmToggle variant="default" size="default">Default</button>
+      <button hlmToggle variant="default" size="lg">Large</button>
+      <button hlmToggle variant="outline" size="sm">Small outline</button>
+      <button hlmToggle variant="outline" size="default">Outline</button>
+      <button hlmToggle variant="outline" size="lg">Large outline</button>
+    </div>
+  `,
+})
+export class DemoVariants {}
+```
+
+### 3. Controlled state with signals
+
+```ts
+// demo-controlled.component.ts
+import { Component, signal } from '@angular/core';
+import { HlmToggleImports } from '@egose/shadcn-theme-ng/toggle';
+
+@Component({
+  selector: 'demo-controlled',
+  standalone: true,
+  imports: [...HlmToggleImports],
+  template: `
+    <button hlmToggle variant="outline" [(state)]="muted" aria-label="Toggle mute">
+      {{ muted() === 'on' ? 'Muted' : 'Unmuted' }}
+    </button>
+    <p class="text-sm text-muted-foreground">State: {{ muted() }}</p>
+  `,
+})
+export class DemoControlled {
+  readonly muted = signal<'on' | 'off'>('off');
+}
+```
+
+React to changes imperatively with `(stateChange)`:
+
+```html
+<button hlmToggle (stateChange)="onToggle($event)" aria-label="Toggle preview">Preview</button>
+```
+
+```ts
+onToggle(state: unknown) {
+  console.log('toggle state:', state);
+}
+```
+
+### 4. Disabled state
+
+```ts
+// demo-disabled.component.ts
+import { Component } from '@angular/core';
+import { HlmToggleImports } from '@egose/shadcn-theme-ng/toggle';
+
+@Component({
+  selector: 'demo-disabled',
+  standalone: true,
+  imports: [...HlmToggleImports],
+  template: `
+    <div class="flex gap-2">
+      <button hlmToggle disabled aria-label="Unavailable feature">Off</button>
+      <button hlmToggle variant="outline" disabled aria-label="Unavailable outline">Off</button>
+    </div>
+  `,
+})
+export class DemoDisabled {}
+```
+
+### 5. Text toggle + composition with tooltip
+
+```ts
+// demo-composed.component.ts
+import { Component } from '@angular/core';
+import { HlmToggleImports } from '@egose/shadcn-theme-ng/toggle';
+import { HlmTooltipImports } from '@egose/shadcn-theme-ng/tooltip';
+
+@Component({
+  selector: 'demo-composed',
+  standalone: true,
+  imports: [...HlmToggleImports, ...HlmTooltipImports],
+  template: `
+    <button hlmToggle variant="outline" aria-label="Toggle sidebar" [hlmTooltip]="'Toggle sidebar'">☰</button>
+  `,
+})
+export class DemoComposed {}
+```
+
+> `hlmTooltip` attaches to the same `<button>` — see `@egose/shadcn-theme-ng/tooltip` for delay/position options.
+
+### 6. Advanced: reusing `toggleVariants` for custom components
+
+```ts
+// custom-toggle.component.ts
+import { Component, input } from '@angular/core';
+import { hlm } from '@egose/shadcn-theme-ng/utils';
+import { toggleVariants, type ToggleVariants } from '@egose/shadcn-theme-ng/toggle';
+
+@Component({
+  selector: 'custom-toggle',
+  standalone: true,
+  template: `<button [class]="classes()" [attr.aria-pressed]="pressed()"><ng-content /></button>`,
+})
+export class CustomToggle {
+  readonly variant = input<ToggleVariants['variant']>('default');
+  readonly size = input<ToggleVariants['size']>('default');
+  readonly pressed = input(false);
+
+  protected classes() {
+    return hlm(toggleVariants({ variant: this.variant(), size: this.size() }), 'my-extra-class');
+  }
+}
+```
+
+## Accessibility notes
+
+- Icon-only toggles **must** have `aria-label` (e.g. `aria-label="Toggle bold"`); text toggles get their name from content.
+- The pressed state is exposed via `aria-pressed` by the Brn primitive — do not manage `aria-pressed` yourself when using `[(state)]`.
+- Keep toggles keyboard-focusable (native `<button>` behavior); the focus ring (`focus-visible:ring-[3px]`) is built in.
+- Use a toggle for an immediate on/off effect in place; use a switch for settings rows and a checkbox for form-submission choices.
+- Disabled toggles render `pointer-events-none` + `opacity-50`; explain unavailability in nearby text when needed.
+
+## Theming / CSS variables
+
+`toggleVariants` keys off theme tokens (`hover:bg-muted`, `aria-pressed:bg-muted`, `border-input`, `ring-ring/50`, invalid-state `ring-destructive`). Follows your shadcn theme automatically; append overrides via `class` (merged through `classes()`).
+
+## Related subpaths
+
+- `@egose/shadcn-theme-ng/toggle-group` — sets of related toggles (alignment, formatting groups); reuses `toggleVariants`.
+- `@egose/shadcn-theme-ng/switch` — on/off settings switch.
+- `@egose/shadcn-theme-ng/tooltip` — label affordance for icon-only toggles.
+- `@egose/shadcn-theme-ng/button` — action buttons (vs. pressed-state toggles).