@slotted/angular 0.0.0-stage → 0.1.0-beta.1

package/docs/tabs.examples.md

@@ -0,0 +1,1370 @@
+<!-- index: ./index.md -->
+# tabs
+
+`data-ui="tabs"` · Switches between panels of related content.
+
+## Examples
+
+### Playground
+
+One family with every axis on it, driven by the controls below the canvas. Tab into it once: the list is a single stop, and the arrows move the selection from there.
+
+Excerpt — not a complete module
+
+```html
+<div slTabs defaultValue="summary">
+  <div slTabList aria-label="Order">
+    <div slTab value="summary">Summary</div>
+    <div slTab value="items">Items</div>
+  </div>
+  <div slTabPanel value="summary">Delivery expected on September 12.</div>
+  <div slTabPanel value="items">Three items.</div>
+</div>
+```
+
+### Whether focus selects
+
+Automatic is the APG’s recommendation for panels that are already loaded; manual moves focus and waits for Enter or Space, which is what a panel that fetches needs.
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlStack } from '@slotted/angular/stack';
+import { SlTab, SlTabList, SlTabPanel, SlTabs, type TabsActivation } from '@slotted/angular/tabs';
+import { SlText } from '@slotted/angular/typography';
+
+const MODES: { activation: TabsActivation; caption: string }[] = [
+  { activation: 'automatic', caption: 'Automatic: the arrow keys select as they move.' },
+  { activation: 'manual', caption: 'Manual: the arrow keys move focus; Enter or Space selects.' },
+];
+
+const REPORTS = [
+  { value: 'revenue', label: 'Revenue', panel: 'Revenue this quarter: $412,800.00.' },
+  { value: 'margin', label: 'Margin', panel: 'Gross margin this quarter: 38.4%.' },
+  { value: 'returns', label: 'Returns', panel: 'Return rate this quarter: 2.1%.' },
+];
+
+@Component({
+  selector: 'app-tabs-activation',
+  imports: [SlStack, SlTab, SlTabList, SlTabPanel, SlTabs, SlText],
+  template: `
+    <div slStack [gap]="8">
+      @for (mode of modes; track mode.activation) {
+        <div slStack [gap]="3">
+          <span slText size="sm" tone="muted">{{ mode.caption }}</span>
+          <div slTabs defaultValue="revenue" [activation]="mode.activation">
+            <div slTabList aria-label="Quarterly reports">
+              @for (report of reports; track report.value) {
+                <div slTab [value]="report.value">{{ report.label }}</div>
+              }
+            </div>
+            @for (report of reports; track report.value) {
+              <div slTabPanel [value]="report.value">
+                <span slText size="sm">{{ report.panel }}</span>
+              </div>
+            }
+          </div>
+        </div>
+      }
+    </div>
+  `,
+})
+export class TabsActivationExample {
+  protected readonly modes = MODES;
+  protected readonly reports = REPORTS;
+}
+```
+
+### Which way the list runs
+
+A horizontal list scrolls and refuses the up and down arrows, so the page keeps scrolling with focus inside it; a vertical one stacks, turns the track and the marker, and announces aria-orientation.
+
+Excerpt — not a complete module
+
+```html
+<div slTabs defaultValue="a" orientation="vertical">
+  <div slTabList aria-label="Settings">
+    <div slTab value="a">Profile</div>
+    <div slTab value="b">Notifications</div>
+  </div>
+  <div slTabPanel value="a">Name and photo.</div>
+  <div slTabPanel value="b">Email notices.</div>
+</div>
+```
+
+### The two ways a list is drawn
+
+Line is a row of labels over a hairline; contained is a sunken track holding a surface per tab; and track="none" keeps the labels and drops the hairline, for a list standing on a line the page already drew. All three keep the accent marker, which is what survives the high-contrast scheme after every surface flattens.
+
+Excerpt — not a complete module
+
+```html
+<div slTabs defaultValue="a" variant="line"></div>
+<div slTabs defaultValue="a" variant="contained"></div>
+
+<!-- Standing on a line the page already drew — a card header, a table's rule. -->
+<div slTabs defaultValue="a" track="none"></div>
+```
+
+### The step the list sits at
+
+Height, type, padding and the inner gap all come from the control scales, so switching the toolbar to dense shrinks each step whole rather than in parts.
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlStack } from '@slotted/angular/stack';
+import { SlTab, SlTabList, SlTabPanel, SlTabs, type TabsSize } from '@slotted/angular/tabs';
+import { SlText } from '@slotted/angular/typography';
+
+const SIZES: TabsSize[] = ['sm', 'md', 'lg'];
+
+const VIEWS = [
+  { value: 'stock', label: 'Stock', panel: '1,284 units on hand across 3 warehouses.' },
+  { value: 'movements', label: 'Movements', panel: '46 movements in the last 7 days.' },
+  {
+    value: 'suppliers',
+    label: 'Suppliers',
+    panel: 'Ordered from Brightline Studio and Quill & Co.',
+  },
+];
+
+@Component({
+  selector: 'app-tabs-sizes',
+  imports: [SlStack, SlTab, SlTabList, SlTabPanel, SlTabs, SlText],
+  template: `
+    <div slStack [gap]="8">
+      @for (size of sizes; track size) {
+        <div slTabs defaultValue="stock" [size]="size">
+          <div slTabList aria-label="Product OAK-90">
+            @for (view of views; track view.value) {
+              <div slTab [value]="view.value">{{ view.label }}</div>
+            }
+          </div>
+          @for (view of views; track view.value) {
+            <div slTabPanel [value]="view.value">
+              <span slText size="sm">{{ view.panel }}</span>
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `,
+})
+export class TabsSizes {
+  protected readonly sizes = SIZES;
+  protected readonly views = VIEWS;
+}
+```
+
+### How the line is divided
+
+auto makes each tab as wide as its label and scrolls what does not fit; equal divides the line between them and is the one place a horizontal label is ever truncated.
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlTab, SlTabList, SlTabPanel, SlTabs } from '@slotted/angular/tabs';
+import { SlText } from '@slotted/angular/typography';
+
+const QUEUES = [
+  { value: 'incoming', label: 'Incoming', panel: '14 purchase orders due this week.' },
+  { value: 'outgoing', label: 'Outgoing', panel: '32 sales orders ready to ship.' },
+  {
+    value: 'inspection',
+    label: 'Awaiting inspection',
+    panel: '3 returns wait for a quality check before restocking.',
+  },
+];
+
+@Component({
+  selector: 'app-tabs-fit',
+  imports: [SlTab, SlTabList, SlTabPanel, SlTabs, SlText],
+  template: `
+    <div slTabs defaultValue="incoming" fit="equal" variant="contained">
+      <div slTabList aria-label="Warehouse queues">
+        @for (queue of queues; track queue.value) {
+          <div slTab [value]="queue.value">{{ queue.label }}</div>
+        }
+      </div>
+      @for (queue of queues; track queue.value) {
+        <div slTabPanel [value]="queue.value">
+          <span slText size="sm">{{ queue.panel }}</span>
+        </div>
+      }
+    </div>
+  `,
+})
+export class TabsFit {
+  protected readonly queues = QUEUES;
+}
+```
+
+### Every state the family paints
+
+A tab that is not selected raises its ink on hover. In the line variant a neutral bar appears where the mark would go and darkens on press; in the contained variant the cell fills instead. A selected one does neither, because it is already at full strength. Disabled is the native attribute, which is also what makes the browser skip it.
+
+Excerpt — not a complete module
+
+```html
+<div slTabs defaultValue="a">
+  <div slTabList aria-label="Document">
+    <div slTab value="a">Available</div>
+    <div slTab value="b" disabled>Unavailable</div>
+  </div>
+  <div slTabPanel value="a">…</div>
+</div>
+
+<div slTabs defaultValue="a" disabled></div>
+```
+
+### When a panel exists
+
+active builds the panel on selection and drops it after, lazy keeps it once built, eager builds every one up front. A panel holding a table or a chart is the reason the default is active.
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlField, SlFieldLabel } from '@slotted/angular/field';
+import { SlStack } from '@slotted/angular/stack';
+import {
+  SlTab,
+  SlTabList,
+  SlTabPanel,
+  SlTabPanelContent,
+  SlTabs,
+  type TabsMount,
+} from '@slotted/angular/tabs';
+import { SlTextarea } from '@slotted/angular/textarea';
+import { SlText } from '@slotted/angular/typography';
+
+const MODES: { mount: TabsMount; caption: string }[] = [
+  { mount: 'active', caption: 'mount="active": the note is built again, empty, on return.' },
+  { mount: 'lazy', caption: 'mount="lazy": the note keeps what was typed.' },
+];
+
+@Component({
+  selector: 'app-tabs-mount',
+  imports: [
+    SlField,
+    SlFieldLabel,
+    SlStack,
+    SlTab,
+    SlTabList,
+    SlTabPanel,
+    SlTabPanelContent,
+    SlTabs,
+    SlText,
+    SlTextarea,
+  ],
+  template: `
+    <div slStack [gap]="8">
+      @for (mode of modes; track mode.mount) {
+        <div slStack [gap]="3">
+          <span slText size="sm" tone="muted">{{ mode.caption }}</span>
+          <div slTabs defaultValue="note" [mount]="mode.mount">
+            <div slTabList aria-label="Order SO-1187">
+              <div slTab value="note">Picking note</div>
+              <div slTab value="summary">Summary</div>
+            </div>
+            <div slTabPanel value="note">
+              <ng-template slTabPanelContent>
+                <div slField>
+                  <label slFieldLabel>Note for the picker</label>
+                  <textarea
+                    slTextarea
+                    placeholder="Pack the brackets separately"
+                    rows="2"
+                  ></textarea>
+                </div>
+              </ng-template>
+            </div>
+            <div slTabPanel value="summary">
+              <span slText size="sm">3 lines, picked from zone C at Reno, NV.</span>
+            </div>
+          </div>
+        </div>
+      }
+    </div>
+  `,
+})
+export class TabsMountExample {
+  protected readonly modes = MODES;
+}
+```
+
+### Tabs a reader can close
+
+Delete closes the focused tab and the pointer closes it from the control; the family then asks for the neighbour — the following tab, or the preceding one when the closed tab was last — and removes nothing itself.
+
+Example
+
+```ts
+import { Component, signal } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import { SlStack } from '@slotted/angular/stack';
+import { SlTab, SlTabList, SlTabPanel, SlTabs } from '@slotted/angular/tabs';
+import { SlText } from '@slotted/angular/typography';
+
+const OPEN = [
+  { id: 'SO-1187', customer: 'Harbor & Pine', total: '$1,240.00' },
+  { id: 'SO-1188', customer: 'Brightline Studio', total: '$318.50' },
+  { id: 'SO-1190', customer: 'Northgate Labs', total: '$2,906.10' },
+  { id: 'SO-1191', customer: 'Verde Kitchen', total: '$86.00' },
+];
+
+@Component({
+  selector: 'app-tabs-dismissible',
+  imports: [SlButton, SlStack, SlTab, SlTabList, SlTabPanel, SlTabs, SlText],
+  template: `
+    @if (orders().length === 0) {
+      <div slStack [gap]="3" align="start">
+        <span slText size="sm" tone="muted">No orders open.</span>
+        <button slButton size="sm" variant="outline" (click)="reopen()">Reopen orders</button>
+      </div>
+    } @else {
+      <div
+        slTabs
+        [value]="active()"
+        (valueChange)="active.set($event.value ?? active())"
+        (tabDismiss)="close($event.value)"
+      >
+        <div slTabList aria-label="Open orders">
+          @for (order of orders(); track order.id) {
+            <div slTab dismissible [dismissLabel]="'Close ' + order.id" [value]="order.id">
+              {{ order.id }}
+            </div>
+          }
+        </div>
+        @for (order of orders(); track order.id) {
+          <div slTabPanel [value]="order.id">
+            <span slText size="sm">{{ order.customer }}, {{ order.total }}.</span>
+          </div>
+        }
+      </div>
+    }
+  `,
+})
+export class TabsDismissible {
+  protected readonly orders = signal(OPEN);
+  protected readonly active = signal('SO-1188');
+
+  protected close(id: string) {
+    this.orders.update((open) => open.filter((order) => order.id !== id));
+  }
+
+  protected reopen() {
+    this.orders.set(OPEN);
+    this.active.set('SO-1187');
+  }
+}
+```
+
+### A list that does not fit
+
+The list scrolls rather than wrapping or truncating, two paging controls appear only while there is somewhere to scroll, and the arrow keys bring each tab into view as focus reaches it.
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlTab, SlTabList, SlTabPanel, SlTabs } from '@slotted/angular/tabs';
+import { SlText } from '@slotted/angular/typography';
+
+const WAREHOUSES = [
+  { code: 'RNO', city: 'Reno, NV', open: 42 },
+  { code: 'CMH', city: 'Columbus, OH', open: 37 },
+  { code: 'SAV', city: 'Savannah, GA', open: 18 },
+  { code: 'DFW', city: 'Dallas, TX', open: 51 },
+  { code: 'EWR', city: 'Newark, NJ', open: 29 },
+  { code: 'ONT', city: 'Ontario, CA', open: 64 },
+  { code: 'JOT', city: 'Joliet, IL', open: 23 },
+  { code: 'MEM', city: 'Memphis, TN', open: 46 },
+  { code: 'ABE', city: 'Allentown, PA', open: 12 },
+  { code: 'TIW', city: 'Tacoma, WA', open: 31 },
+  { code: 'SCK', city: 'Stockton, CA', open: 9 },
+  { code: 'IND', city: 'Indianapolis, IN', open: 27 },
+];
+
+@Component({
+  selector: 'app-tabs-overflow',
+  imports: [SlTab, SlTabList, SlTabPanel, SlTabs, SlText],
+  template: `
+    <div slTabs defaultValue="MEM">
+      <div slTabList aria-label="Warehouses">
+        @for (warehouse of warehouses; track warehouse.code) {
+          <div slTab [value]="warehouse.code">{{ warehouse.city }}</div>
+        }
+      </div>
+      @for (warehouse of warehouses; track warehouse.code) {
+        <div slTabPanel [value]="warehouse.code">
+          <span slText size="sm"
+            >{{ warehouse.code }}: {{ warehouse.open }} open orders to ship today.</span
+          >
+        </div>
+      }
+    </div>
+  `,
+})
+export class TabsOverflow {
+  protected readonly warehouses = WAREHOUSES;
+}
+```
+
+### A view a router can deep-link to
+
+href makes the control an anchor, so the destination is real: a plain click selects, and a click carrying a modifier key is left to the browser, which opens the view in a new browser tab.
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlTab, SlTabList, SlTabPanel, SlTabs } from '@slotted/angular/tabs';
+import { SlText } from '@slotted/angular/typography';
+
+const VIEWS = [
+  { value: 'summary', label: 'Summary', panel: 'Harbor & Pine, $1,240.00, Net 30.' },
+  { value: 'items', label: 'Items', panel: '3 lines: shelves, brackets and an assembly kit.' },
+  { value: 'shipments', label: 'Shipments', panel: 'Atlas Freight, expected September 12.' },
+];
+
+@Component({
+  selector: 'app-tabs-links',
+  imports: [SlTab, SlTabList, SlTabPanel, SlTabs, SlText],
+  template: `
+    <div slTabs defaultValue="summary">
+      <div slTabList aria-label="Order SO-1187">
+        @for (view of views; track view.value) {
+          <div slTab [value]="view.value" [href]="'#order-' + view.value">{{ view.label }}</div>
+        }
+      </div>
+      @for (view of views; track view.value) {
+        <div slTabPanel [value]="view.value">
+          <span slText size="sm">{{ view.panel }}</span>
+        </div>
+      }
+    </div>
+  `,
+})
+export class TabsLinks {
+  protected readonly views = VIEWS;
+}
+```
+
+### Content the family did not choose
+
+An unbroken digest breaks inside its own tab instead of setting the list’s width, a right-to-left label reads its own way inside a page that reads the other, and a long label scrolls rather than wrapping.
+
+Excerpt — not a complete module
+
+```html
+<div slTabs defaultValue="a">
+  <div slTabList aria-label="Extreme content">
+    <div slTab value="a">sha256:9f86d081884c7d659a2feaa0c55ad015</div>
+    <div slTab value="b">بيانات التسليم</div>
+  </div>
+</div>
+```
+
+### Setting it once, and reaching past it
+
+The provider carries the seven decisions an application takes once, render substitutes every root so a list can be a real nav, and the actions slot is where a Toolbar goes.
+
+Excerpt — not a complete module
+
+```ts
+// One decision for every family in the application, in the bootstrap file.
+bootstrapApplication(App, {
+  providers: [provideTabsDefaults({ size: 'sm', variant: 'contained' })],
+});
+
+// And in a template, the slot beside the list is where a toolbar goes:
+// <div slTabActions><div slToolbar aria-label="Actions">…</div></div>
+```
+
+### The APG table, and where focus lands
+
+Tab enters on the selected tab and leaves to the panel, the arrows of the flow axis move and wrap, Home and End reach the ends, and Delete closes a dismissible tab and moves focus to its neighbour.
+
+Example
+
+```ts
+import { Component, signal } from '@angular/core';
+import type { ChangeRequest } from '@slotted/core/state';
+import { SlStack } from '@slotted/angular/stack';
+import { SlTab, SlTabList, SlTabPanel, SlTabs } from '@slotted/angular/tabs';
+import { SlText } from '@slotted/angular/typography';
+
+const STEPS = [
+  { value: 'picking', label: 'Picking', panel: '18 lines to pick in zone C.' },
+  { value: 'packing', label: 'Packing', panel: '6 orders waiting at station 2.' },
+  { value: 'loading', label: 'Loading', panel: 'Atlas Freight trailer at dock 4 until 15:30.' },
+];
+
+@Component({
+  selector: 'app-tabs-keyboard',
+  imports: [SlStack, SlTab, SlTabList, SlTabPanel, SlTabs, SlText],
+  template: `
+    <div slStack [gap]="5">
+      <div slTabs defaultValue="picking" (valueChange)="report($event)">
+        <div slTabList aria-label="Outbound shift">
+          @for (step of steps; track step.value) {
+            <div slTab [value]="step.value">{{ step.label }}</div>
+          }
+        </div>
+        @for (step of steps; track step.value) {
+          <div slTabPanel [value]="step.value">
+            <span slText size="sm">{{ step.panel }}</span>
+          </div>
+        }
+      </div>
+      <span slText size="sm" tone="muted">{{ last() }}</span>
+    </div>
+  `,
+})
+export class TabsKeyboard {
+  protected readonly steps = STEPS;
+  protected readonly last = signal('Nothing selected yet.');
+
+  protected report(request: ChangeRequest<string | undefined>) {
+    const step = STEPS.find((item) => item.value === request.value);
+    this.last.set(`${step?.label} selected by ${request.reason}.`);
+  }
+}
+```
+
+### actions.ts
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlButton, SlButtonStart } from '@slotted/angular/button';
+import { SlGlyph } from '@slotted/angular/icon';
+import { SlTab, SlTabActions, SlTabList, SlTabPanel, SlTabs } from '@slotted/angular/tabs';
+import { SlToolbar } from '@slotted/angular/toolbar';
+import { SlText } from '@slotted/angular/typography';
+
+const VIEWS = [
+  { value: 'lines', label: 'Lines', panel: '6 lines from Quill & Co., $4,812.00.' },
+  { value: 'receipts', label: 'Receipts', panel: '4 of 6 lines received at Columbus, OH.' },
+  { value: 'history', label: 'History', panel: 'Approved by Marco Ilić on September 22.' },
+];
+
+@Component({
+  selector: 'app-tabs-actions',
+  imports: [
+    SlButton,
+    SlButtonStart,
+    SlGlyph,
+    SlTab,
+    SlTabActions,
+    SlTabList,
+    SlTabPanel,
+    SlTabs,
+    SlText,
+    SlToolbar,
+  ],
+  template: `
+    <div slTabs defaultValue="lines">
+      <div slTabList aria-label="Purchase order PO-4521">
+        @for (view of views; track view.value) {
+          <div slTab [value]="view.value">{{ view.label }}</div>
+        }
+      </div>
+      <div slTabActions>
+        <div slToolbar aria-label="Purchase order actions" size="sm">
+          <button slButton size="sm" tone="secondary" variant="ghost">
+            <span slButtonStart><svg slGlyph name="upload"></svg></span>
+            Export
+          </button>
+          <button slButton size="sm" tone="secondary" variant="ghost">
+            <span slButtonStart><svg slGlyph name="copy"></svg></span>
+            Duplicate
+          </button>
+        </div>
+      </div>
+      @for (view of views; track view.value) {
+        <div slTabPanel [value]="view.value">
+          <span slText size="sm">{{ view.panel }}</span>
+        </div>
+      }
+    </div>
+  `,
+})
+export class TabsActionsExample {
+  protected readonly views = VIEWS;
+}
+```
+
+### controlled.ts
+
+Example
+
+```ts
+import { Component, signal } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import { SlInline } from '@slotted/angular/inline';
+import { SlStack } from '@slotted/angular/stack';
+import { SlTab, SlTabList, SlTabPanel, SlTabs } from '@slotted/angular/tabs';
+import { SlText } from '@slotted/angular/typography';
+
+const VIEWS = [
+  { value: 'orders', label: 'Orders', panel: '12 open orders, $14,380.00 in total.' },
+  {
+    value: 'invoices',
+    label: 'Invoices',
+    panel: 'INV-20877 and INV-20902 are past due: $2,146.50.',
+  },
+  { value: 'payments', label: 'Payments', panel: 'Last payment: $3,200.00 on September 30.' },
+];
+
+@Component({
+  selector: 'app-tabs-controlled',
+  imports: [SlButton, SlInline, SlStack, SlTab, SlTabList, SlTabPanel, SlTabs, SlText],
+  template: `
+    <div slStack [gap]="5">
+      <div slInline [gap]="3" align="center" justify="between">
+        <span slText size="sm" tone="muted">2 invoices are past due.</span>
+        <button slButton size="sm" variant="outline" (click)="view.set('invoices')">
+          Review invoices
+        </button>
+      </div>
+      <div slTabs [value]="view()" (valueChange)="view.set($event.value ?? view())">
+        <div slTabList aria-label="Account Harbor & Pine">
+          @for (item of views; track item.value) {
+            <div slTab [value]="item.value">{{ item.label }}</div>
+          }
+        </div>
+        @for (item of views; track item.value) {
+          <div slTabPanel [value]="item.value">
+            <span slText size="sm">{{ item.panel }}</span>
+          </div>
+        }
+      </div>
+    </div>
+  `,
+})
+export class TabsControlled {
+  protected readonly views = VIEWS;
+  protected readonly view = signal('orders');
+}
+```
+
+### defaults.ts
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlStack } from '@slotted/angular/stack';
+import { provideTabsDefaults, SlTab, SlTabList, SlTabPanel, SlTabs } from '@slotted/angular/tabs';
+import { SlText } from '@slotted/angular/typography';
+
+@Component({
+  selector: 'app-tabs-defaults',
+  imports: [SlStack, SlTab, SlTabList, SlTabPanel, SlTabs, SlText],
+  providers: [provideTabsDefaults({ size: 'sm', variant: 'contained' })],
+  template: `
+    <div slStack [gap]="8">
+      <div slTabs defaultValue="stock">
+        <div slTabList aria-label="Product OAK-90">
+          <div slTab value="stock">Stock</div>
+          <div slTab value="pricing">Pricing</div>
+        </div>
+        <div slTabPanel value="stock">
+          <span slText size="sm">1,284 units on hand.</span>
+        </div>
+        <div slTabPanel value="pricing">
+          <span slText size="sm">List price $180.00, cost $96.40.</span>
+        </div>
+      </div>
+      <div slTabs defaultValue="open" variant="line">
+        <div slTabList aria-label="Purchase orders">
+          <div slTab value="open">Open</div>
+          <div slTab value="received">Received</div>
+        </div>
+        <div slTabPanel value="open">
+          <span slText size="sm">3 purchase orders for OAK-90 are open.</span>
+        </div>
+        <div slTabPanel value="received">
+          <span slText size="sm">Last received on September 22: 400 units.</span>
+        </div>
+      </div>
+    </div>
+  `,
+})
+export class TabsDefaults {}
+```
+
+### disabled.ts
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlStack } from '@slotted/angular/stack';
+import { SlTab, SlTabList, SlTabPanel, SlTabs } from '@slotted/angular/tabs';
+import { SlText } from '@slotted/angular/typography';
+
+@Component({
+  selector: 'app-tabs-disabled',
+  imports: [SlStack, SlTab, SlTabList, SlTabPanel, SlTabs, SlText],
+  template: `
+    <div slStack [gap]="8">
+      <div slTabs defaultValue="summary">
+        <div slTabList aria-label="Order SO-1192">
+          <div slTab value="summary">Summary</div>
+          <div slTab value="items">Items</div>
+          <div slTab value="invoice" disabled>Invoice</div>
+        </div>
+        <div slTabPanel value="summary">
+          <span slText size="sm">Awaiting pickup. The invoice is issued once the order ships.</span>
+        </div>
+        <div slTabPanel value="items">
+          <span slText size="sm">5 items from the Reno, NV warehouse.</span>
+        </div>
+        <div slTabPanel value="invoice">
+          <span slText size="sm">Invoice INV-20931.</span>
+        </div>
+      </div>
+      <div slTabs defaultValue="summary" disabled>
+        <div slTabList aria-label="Order SO-1188">
+          <div slTab value="summary">Summary</div>
+          <div slTab value="items">Items</div>
+          <div slTab value="invoice">Invoice</div>
+        </div>
+        <div slTabPanel value="summary">
+          <span slText size="sm">Locked while the warehouse recounts this order.</span>
+        </div>
+        <div slTabPanel value="items">
+          <span slText size="sm">2 items from the Columbus, OH warehouse.</span>
+        </div>
+        <div slTabPanel value="invoice">
+          <span slText size="sm">Invoice INV-20917.</span>
+        </div>
+      </div>
+    </div>
+  `,
+})
+export class TabsDisabled {}
+```
+
+### filter.ts
+
+Example
+
+```ts
+import { Component, computed, signal } from '@angular/core';
+import { SlBadge } from '@slotted/angular/badge';
+import { SlStack } from '@slotted/angular/stack';
+import {
+  SlTable,
+  SlTableBody,
+  SlTableCell,
+  SlTableColumnHeader,
+  SlTableContent,
+  SlTableHead,
+  SlTableRow,
+  SlTableRowHeader,
+} from '@slotted/angular/table';
+import { SlTab, SlTabEnd, SlTabList, SlTabs } from '@slotted/angular/tabs';
+
+const ORDERS = [
+  { id: 'SO-1187', customer: 'Harbor & Pine', status: 'open', total: '$1,240.00' },
+  { id: 'SO-1188', customer: 'Brightline Studio', status: 'shipped', total: '$318.50' },
+  { id: 'SO-1190', customer: 'Northgate Labs', status: 'open', total: '$2,906.10' },
+  { id: 'SO-1191', customer: 'Verde Kitchen', status: 'delayed', total: '$86.00' },
+  { id: 'SO-1193', customer: 'Quill & Co.', status: 'shipped', total: '$540.25' },
+];
+
+const FILTERS = [
+  { value: 'all', label: 'All' },
+  { value: 'open', label: 'Open' },
+  { value: 'delayed', label: 'Delayed' },
+  { value: 'shipped', label: 'Shipped' },
+];
+
+const STATUS: Record<string, string> = { open: 'Open', delayed: 'Delayed', shipped: 'Shipped' };
+
+const matching = (filter: string) =>
+  filter === 'all' ? ORDERS : ORDERS.filter((order) => order.status === filter);
+
+@Component({
+  selector: 'app-tabs-filter',
+  imports: [
+    SlBadge,
+    SlStack,
+    SlTab,
+    SlTabEnd,
+    SlTabList,
+    SlTable,
+    SlTableBody,
+    SlTableCell,
+    SlTableColumnHeader,
+    SlTableContent,
+    SlTableHead,
+    SlTableRow,
+    SlTableRowHeader,
+    SlTabs,
+  ],
+  template: `
+    <div slStack [gap]="4">
+      <div slTabs size="sm" [value]="filter()" (valueChange)="filter.set($event.value ?? filter())">
+        <div slTabList aria-label="Orders by status">
+          @for (item of filters; track item.value) {
+            <div slTab controls="orders-by-status" [value]="item.value">
+              {{ item.label }}
+              <span slTabEnd
+                ><span slBadge showZero size="sm" [count]="matching(item.value).length"></span
+              ></span>
+            </div>
+          }
+        </div>
+      </div>
+      <div slTable id="orders-by-status" [columns]="4">
+        <div slTableContent aria-label="Orders">
+          <thead slTableHead>
+            <tr slTableRow>
+              <th slTableColumnHeader>Order</th>
+              <th slTableColumnHeader>Customer</th>
+              <th slTableColumnHeader>Status</th>
+              <th slTableColumnHeader numeric>Total</th>
+            </tr>
+          </thead>
+          <tbody slTableBody>
+            @for (order of rows(); track order.id) {
+              <tr slTableRow [value]="order.id">
+                <th slTableRowHeader>{{ order.id }}</th>
+                <td slTableCell>{{ order.customer }}</td>
+                <td slTableCell>{{ status[order.status] }}</td>
+                <td slTableCell numeric>{{ order.total }}</td>
+              </tr>
+            }
+          </tbody>
+        </div>
+      </div>
+    </div>
+  `,
+})
+export class TabsFilter {
+  protected readonly filters = FILTERS;
+  protected readonly status = STATUS;
+  protected readonly matching = matching;
+  protected readonly filter = signal('all');
+  protected readonly rows = computed(() => matching(this.filter()));
+}
+```
+
+### icons.ts
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlBadge } from '@slotted/angular/badge';
+import { SlGlyph, SlIcon, type GlyphName } from '@slotted/angular/icon';
+import { SlTab, SlTabEnd, SlTabList, SlTabPanel, SlTabs, SlTabStart } from '@slotted/angular/tabs';
+import { SlText } from '@slotted/angular/typography';
+
+const VIEWS: { value: string; label: string; icon: GlyphName; count?: number; panel: string }[] = [
+  {
+    value: 'overview',
+    label: 'Overview',
+    icon: 'file-text',
+    panel: 'Harbor & Pine, customer since 2021. Net 30 terms.',
+  },
+  {
+    value: 'orders',
+    label: 'Orders',
+    icon: 'inbox',
+    count: 12,
+    panel: '12 open orders, $14,380.00 in total.',
+  },
+  {
+    value: 'contacts',
+    label: 'Contacts',
+    icon: 'person',
+    count: 3,
+    panel: 'Dana Whitfield, Marco Ilić and Priya Raman.',
+  },
+  {
+    value: 'files',
+    label: 'Files',
+    icon: 'paperclip',
+    panel: 'Signed credit application and a W-9 form.',
+  },
+];
+
+@Component({
+  selector: 'app-tabs-icons',
+  imports: [
+    SlBadge,
+    SlGlyph,
+    SlIcon,
+    SlTab,
+    SlTabEnd,
+    SlTabList,
+    SlTabPanel,
+    SlTabs,
+    SlTabStart,
+    SlText,
+  ],
+  template: `
+    <div slTabs defaultValue="orders">
+      <div slTabList aria-label="Customer Harbor & Pine">
+        @for (view of views; track view.value) {
+          <div slTab [value]="view.value">
+            <span slTabStart
+              ><span slIcon><svg slGlyph [name]="view.icon"></svg></span
+            ></span>
+            {{ view.label }}
+            @if (view.count !== undefined) {
+              <span slTabEnd><span slBadge size="sm" [count]="view.count"></span></span>
+            }
+          </div>
+        }
+      </div>
+      @for (view of views; track view.value) {
+        <div slTabPanel [value]="view.value">
+          <span slText size="sm">{{ view.panel }}</span>
+        </div>
+      }
+    </div>
+  `,
+})
+export class TabsIcons {
+  protected readonly views = VIEWS;
+}
+```
+
+### record-header.ts
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlBadge } from '@slotted/angular/badge';
+import { SlButton, SlButtonStart } from '@slotted/angular/button';
+import {
+  SlDescriptionList,
+  SlDescriptionListDescription,
+  SlDescriptionListItem,
+  SlDescriptionListTerm,
+} from '@slotted/angular/description-list';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import { SlInline } from '@slotted/angular/inline';
+import { SlStack } from '@slotted/angular/stack';
+import {
+  SlTable,
+  SlTableBody,
+  SlTableCell,
+  SlTableColumnHeader,
+  SlTableContent,
+  SlTableHead,
+  SlTableRow,
+  SlTableRowHeader,
+} from '@slotted/angular/table';
+import { SlTab, SlTabEnd, SlTabList, SlTabPanel, SlTabs, SlTabStart } from '@slotted/angular/tabs';
+import { SlHeading, SlText } from '@slotted/angular/typography';
+
+const FACTS = [
+  ['Customer', 'Harbor & Pine'],
+  ['Placed', 'September 8, 2026'],
+  ['Payment terms', 'Net 30'],
+  ['Ship to', '88 Dock Street, Portland, OR'],
+  ['Carrier', 'Atlas Freight'],
+  ['Total', '$1,240.00'],
+];
+
+const LINES = [
+  { sku: 'OAK-90', item: 'Oak shelf, 90 cm', quantity: 4, amount: '$720.00' },
+  { sku: 'BRK-ST', item: 'Wall bracket, steel', quantity: 8, amount: '$192.00' },
+  { sku: 'KIT-AS', item: 'Assembly kit', quantity: 1, amount: '$328.00' },
+];
+
+const ACTIVITY = [
+  'Sep 9, 14:02 — Picked at Reno, NV by Luis Ortega',
+  'Sep 8, 16:45 — Payment approved',
+  'Sep 8, 16:41 — Order placed by Dana Whitfield',
+];
+
+@Component({
+  selector: 'app-tabs-record-header',
+  imports: [
+    SlBadge,
+    SlButton,
+    SlButtonStart,
+    SlDescriptionList,
+    SlDescriptionListDescription,
+    SlDescriptionListItem,
+    SlDescriptionListTerm,
+    SlGlyph,
+    SlHeading,
+    SlIcon,
+    SlInline,
+    SlStack,
+    SlTab,
+    SlTabEnd,
+    SlTabList,
+    SlTabPanel,
+    SlTable,
+    SlTableBody,
+    SlTableCell,
+    SlTableColumnHeader,
+    SlTableContent,
+    SlTableHead,
+    SlTableRow,
+    SlTableRowHeader,
+    SlTabs,
+    SlTabStart,
+    SlText,
+  ],
+  template: `
+    <div slStack [gap]="6">
+      <div slInline [gap]="4" align="start" justify="between" wrap="wrap">
+        <div slStack [gap]="1">
+          <div slInline [gap]="3" align="center">
+            <h2 slHeading size="xl">Order SO-1187</h2>
+            <span slBadge tone="warning">Awaiting pickup</span>
+          </div>
+          <span slText size="sm" tone="muted">Harbor & Pine · Placed September 8, 2026</span>
+        </div>
+        <div slInline [gap]="2">
+          <button slButton size="sm" tone="secondary" variant="outline">
+            <span slButtonStart><svg slGlyph name="file-text"></svg></span>
+            Packing slip
+          </button>
+          <button slButton size="sm">Mark shipped</button>
+        </div>
+      </div>
+      <div slTabs defaultValue="overview">
+        <div slTabList aria-label="Order SO-1187">
+          <div slTab value="overview">
+            <span slTabStart
+              ><span slIcon><svg slGlyph name="file-text"></svg></span
+            ></span>
+            Overview
+          </div>
+          <div slTab value="items">
+            <span slTabStart
+              ><span slIcon><svg slGlyph name="inbox"></svg></span
+            ></span>
+            Items
+            <span slTabEnd><span slBadge size="sm" [count]="lines.length"></span></span>
+          </div>
+          <div slTab value="activity">
+            <span slTabStart
+              ><span slIcon><svg slGlyph name="clock"></svg></span
+            ></span>
+            Activity
+            <span slTabEnd><span slBadge size="sm" [count]="activity.length"></span></span>
+          </div>
+        </div>
+        <div slTabPanel value="overview">
+          <div slDescriptionList [columns]="2">
+            @for (fact of facts; track fact[0]) {
+              <div slDescriptionListItem>
+                <dt slDescriptionListTerm>{{ fact[0] }}</dt>
+                <dd slDescriptionListDescription>{{ fact[1] }}</dd>
+              </div>
+            }
+          </div>
+        </div>
+        <div slTabPanel value="items">
+          <div slTable [columns]="4">
+            <div slTableContent aria-label="Order lines">
+              <thead slTableHead>
+                <tr slTableRow>
+                  <th slTableColumnHeader>SKU</th>
+                  <th slTableColumnHeader>Item</th>
+                  <th slTableColumnHeader numeric>Quantity</th>
+                  <th slTableColumnHeader numeric>Amount</th>
+                </tr>
+              </thead>
+              <tbody slTableBody>
+                @for (line of lines; track line.sku) {
+                  <tr slTableRow [value]="line.sku">
+                    <th slTableRowHeader>{{ line.sku }}</th>
+                    <td slTableCell>{{ line.item }}</td>
+                    <td slTableCell numeric>{{ line.quantity }}</td>
+                    <td slTableCell numeric>{{ line.amount }}</td>
+                  </tr>
+                }
+              </tbody>
+            </div>
+          </div>
+        </div>
+        <div slTabPanel value="activity">
+          <div slStack [gap]="2">
+            @for (entry of activity; track entry) {
+              <span slText size="sm">{{ entry }}</span>
+            }
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+})
+export class TabsRecordHeader {
+  protected readonly facts = FACTS;
+  protected readonly lines = LINES;
+  protected readonly activity = ACTIVITY;
+}
+```
+
+### settings.ts
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import {
+  SlDescriptionList,
+  SlDescriptionListDescription,
+  SlDescriptionListItem,
+  SlDescriptionListTerm,
+} from '@slotted/angular/description-list';
+import { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import { SlStack } from '@slotted/angular/stack';
+import { SlSwitch } from '@slotted/angular/switch';
+import { SlTab, SlTabList, SlTabPanel, SlTabs, SlTabStart } from '@slotted/angular/tabs';
+import { SlTextField, SlTextFieldInput } from '@slotted/angular/text-field';
+import { SlHeading, SlText } from '@slotted/angular/typography';
+
+const PLAN = [
+  ['Plan', 'Operations, annual'],
+  ['Seats', '24 of 30 in use'],
+  ['Next invoice', 'November 1, 2026: $4,320.00'],
+];
+
+@Component({
+  selector: 'app-tabs-settings',
+  imports: [
+    SlButton,
+    SlDescriptionList,
+    SlDescriptionListDescription,
+    SlDescriptionListItem,
+    SlDescriptionListTerm,
+    SlField,
+    SlFieldDescription,
+    SlFieldLabel,
+    SlGlyph,
+    SlHeading,
+    SlIcon,
+    SlStack,
+    SlSwitch,
+    SlTab,
+    SlTabList,
+    SlTabPanel,
+    SlTabs,
+    SlTabStart,
+    SlText,
+    SlTextField,
+    SlTextFieldInput,
+  ],
+  template: `
+    <div slTabs defaultValue="workspace" orientation="vertical">
+      <div slTabList aria-label="Settings">
+        <div slTab value="workspace">
+          <span slTabStart
+            ><span slIcon><svg slGlyph name="file-text"></svg></span
+          ></span>
+          Workspace
+        </div>
+        <div slTab value="notifications">
+          <span slTabStart
+            ><span slIcon><svg slGlyph name="bell"></svg></span
+          ></span>
+          Notifications
+        </div>
+        <div slTab value="security">
+          <span slTabStart
+            ><span slIcon><svg slGlyph name="lock"></svg></span
+          ></span>
+          Security
+        </div>
+        <div slTab value="billing">
+          <span slTabStart
+            ><span slIcon><svg slGlyph name="calendar"></svg></span
+          ></span>
+          Billing
+        </div>
+      </div>
+      <div slTabPanel value="workspace">
+        <div slStack [gap]="5" align="start">
+          <h3 slHeading size="md">Workspace</h3>
+          <div slField>
+            <label slFieldLabel>Company name</label>
+            <div slTextField>
+              <input slTextFieldInput defaultValue="Northwind Traders" />
+            </div>
+            <span slFieldDescription>Printed on every invoice and packing slip.</span>
+          </div>
+          <div slField>
+            <label slFieldLabel>Support email</label>
+            <div slTextField>
+              <input slTextFieldInput defaultValue="support@northwind.example" type="email" />
+            </div>
+          </div>
+          <button slButton size="sm">Save changes</button>
+        </div>
+      </div>
+      <div slTabPanel value="notifications">
+        <div slStack [gap]="4">
+          <h3 slHeading size="md">Notifications</h3>
+          <span slSwitch defaultChecked>Low stock</span>
+          <span slSwitch defaultChecked>Late pickups</span>
+          <span slSwitch>Cycle count variances</span>
+        </div>
+      </div>
+      <div slTabPanel value="security">
+        <div slStack [gap]="4">
+          <h3 slHeading size="md">Security</h3>
+          <span slSwitch defaultChecked>Require two-factor sign-in</span>
+          <span slText size="sm" tone="muted">Changed by Dana Whitfield on August 14.</span>
+        </div>
+      </div>
+      <div slTabPanel value="billing">
+        <div slStack [gap]="4">
+          <h3 slHeading size="md">Billing</h3>
+          <div slDescriptionList>
+            @for (row of plan; track row[0]) {
+              <div slDescriptionListItem>
+                <dt slDescriptionListTerm>{{ row[0] }}</dt>
+                <dd slDescriptionListDescription>{{ row[1] }}</dd>
+              </div>
+            }
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+})
+export class TabsSettings {
+  protected readonly plan = PLAN;
+}
+```
+
+### variants.ts
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlStack } from '@slotted/angular/stack';
+import {
+  SlTab,
+  SlTabList,
+  SlTabPanel,
+  SlTabs,
+  type TabsTrack,
+  type TabsVariant,
+} from '@slotted/angular/tabs';
+import { SlText } from '@slotted/angular/typography';
+
+const LOOKS: { variant: TabsVariant; track: TabsTrack }[] = [
+  { variant: 'line', track: 'line' },
+  { variant: 'contained', track: 'line' },
+  { variant: 'line', track: 'none' },
+];
+
+const QUEUES = [
+  { value: 'incoming', label: 'Incoming', panel: '14 purchase orders due this week.' },
+  { value: 'outgoing', label: 'Outgoing', panel: '32 sales orders ready to ship.' },
+  { value: 'returns', label: 'Returns', panel: '3 returns awaiting inspection.' },
+];
+
+@Component({
+  selector: 'app-tabs-variants',
+  imports: [SlStack, SlTab, SlTabList, SlTabPanel, SlTabs, SlText],
+  template: `
+    <div slStack [gap]="8">
+      @for (look of looks; track $index) {
+        <div slTabs defaultValue="incoming" [track]="look.track" [variant]="look.variant">
+          <div slTabList aria-label="Warehouse queues">
+            @for (queue of queues; track queue.value) {
+              <div slTab [value]="queue.value">{{ queue.label }}</div>
+            }
+          </div>
+          @for (queue of queues; track queue.value) {
+            <div slTabPanel [value]="queue.value">
+              <span slText size="sm">{{ queue.panel }}</span>
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `,
+})
+export class TabsVariants {
+  protected readonly looks = LOOKS;
+  protected readonly queues = QUEUES;
+}
+```
+
+### vertical.ts
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlStack } from '@slotted/angular/stack';
+import { SlTab, SlTabList, SlTabPanel, SlTabs } from '@slotted/angular/tabs';
+import { SlText } from '@slotted/angular/typography';
+
+const SECTIONS = [
+  {
+    value: 'general',
+    label: 'General',
+    lines: ['Code: RNO', 'Address: 1450 Terminal Way, Reno, NV 89502', 'Time zone: Pacific Time'],
+  },
+  {
+    value: 'receiving',
+    label: 'Receiving',
+    lines: ['Dock hours: 06:00–14:00, Monday to Friday', 'Appointment required for full trucks'],
+  },
+  {
+    value: 'shipping',
+    label: 'Shipping',
+    lines: ['Carriers: Atlas Freight, Ridgeway Parcel', 'Daily cut-off: 15:30'],
+  },
+  {
+    value: 'storage',
+    label: 'Storage',
+    lines: ['Zones: A–F, 1,920 bin locations', 'Cycle count: every 30 days'],
+  },
+];
+
+@Component({
+  selector: 'app-tabs-vertical',
+  imports: [SlStack, SlTab, SlTabList, SlTabPanel, SlTabs, SlText],
+  template: `
+    <div slTabs defaultValue="general" orientation="vertical">
+      <div slTabList aria-label="Warehouse settings">
+        @for (section of sections; track section.value) {
+          <div slTab [value]="section.value">{{ section.label }}</div>
+        }
+      </div>
+      @for (section of sections; track section.value) {
+        <div slTabPanel [value]="section.value">
+          <div slStack [gap]="2">
+            @for (line of section.lines; track line) {
+              <span slText size="sm">{{ line }}</span>
+            }
+          </div>
+        </div>
+      }
+    </div>
+  `,
+})
+export class TabsVertical {
+  protected readonly sections = SECTIONS;
+}
+```