@agentero/design-system 0.26.2 → 0.27.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/mcp/manifests/components.html +381 -134
- package/mcp/manifests/components.json +330 -42
- package/package.json +6 -1
- package/src/button/button.d.ts +3 -24
- package/src/button/button.js +17 -21
- package/src/checkbox/checkbox.d.ts +74 -0
- package/src/checkbox/checkbox.js +43 -0
- package/src/checkbox/icons.d.ts +5 -0
- package/src/checkbox/icons.js +28 -0
- package/src/checkbox/index.d.ts +2 -0
- package/src/checkbox/index.js +2 -0
- package/src/table/index.d.ts +0 -1
- package/theme/base.css +5 -0
|
@@ -588,13 +588,13 @@
|
|
|
588
588
|
<header>
|
|
589
589
|
<div class="wrap">
|
|
590
590
|
<h1>Manifest Debugger</h1>
|
|
591
|
-
<div class="summary"><a class="filter-pill all" data-k="all" href="#filter-all">All</a><span class="filter-pill ok" aria-disabled="true">
|
|
591
|
+
<div class="summary"><a class="filter-pill all" data-k="all" href="#filter-all">All</a><span class="filter-pill ok" aria-disabled="true">27 components ok</span><span class="filter-pill ok" aria-disabled="true">214 stories ok</span></div>
|
|
592
592
|
</div>
|
|
593
593
|
</header>
|
|
594
594
|
<main>
|
|
595
595
|
<div class="wrap">
|
|
596
596
|
<div class="note ok" style="margin-bottom: 16px;">
|
|
597
|
-
Using <code>react-component-meta</code>. Generation took <strong>
|
|
597
|
+
Using <code>react-component-meta</code>. Generation took <strong>3.0s</strong>.
|
|
598
598
|
</div>
|
|
599
599
|
<h2 class="section-title">Components</h2>
|
|
600
600
|
<div class="grid" role="list">
|
|
@@ -2019,9 +2019,9 @@ variant?: "circle" | "square" | "pillow" | "p
|
|
|
2019
2019
|
<div class="title">
|
|
2020
2020
|
<h2><span class="status-dot dot-ok"></span> Button</h2>
|
|
2021
2021
|
<div class="badges">
|
|
2022
|
-
<label for="c-4-components-button-props" class="badge ok as-toggle">
|
|
2022
|
+
<label for="c-4-components-button-props" class="badge ok as-toggle">12 prop types</label>
|
|
2023
2023
|
|
|
2024
|
-
<label for="c-4-components-button-stories" class="badge ok as-toggle">
|
|
2024
|
+
<label for="c-4-components-button-stories" class="badge ok as-toggle">10 stories</label>
|
|
2025
2025
|
|
|
2026
2026
|
|
|
2027
2027
|
</div>
|
|
@@ -2061,7 +2061,7 @@ without Button binding to any particular framework.</div>
|
|
|
2061
2061
|
<div class="note ok">
|
|
2062
2062
|
<div class="row">
|
|
2063
2063
|
<span class="ex-name">Prop types <small>(react-component-meta)</small></span>
|
|
2064
|
-
<span class="badge ok">
|
|
2064
|
+
<span class="badge ok">12 prop types</span>
|
|
2065
2065
|
</div>
|
|
2066
2066
|
<pre><code>Component: src/button/button.tsx::Button</code></pre>
|
|
2067
2067
|
<pre><code>Props:</code></pre>
|
|
@@ -2139,18 +2139,6 @@ ref?: Ref<HTMLButtonElement | HTMLAnchorElement> | undefined
|
|
|
2139
2139
|
*/
|
|
2140
2140
|
rounded?: boolean
|
|
2141
2141
|
|
|
2142
|
-
/**
|
|
2143
|
-
* When `true`, the button dips to 97% while held so the control answers the
|
|
2144
|
-
* pointer instead of only changing color. Defaults to `false`.
|
|
2145
|
-
*
|
|
2146
|
-
* Has no effect with `variant="link"` (scaling bare text with no padding or
|
|
2147
|
-
* background reads as a wobble) or while the button is disabled or loading,
|
|
2148
|
-
* including the `asChild` anchor form, which stays keyboard-focusable and
|
|
2149
|
-
* would otherwise dip on Enter. The dip is gated behind `motion-safe`, so it
|
|
2150
|
-
* disappears under `prefers-reduced-motion`.
|
|
2151
|
-
*/
|
|
2152
|
-
scaleOnPress?: boolean
|
|
2153
|
-
|
|
2154
2142
|
/**
|
|
2155
2143
|
* Control size. Defaults to `'sm'`.
|
|
2156
2144
|
* - `xs` (24px) — dense toolbars, compact inline actions.
|
|
@@ -2198,8 +2186,8 @@ variant?: "link" | "ghost" | "primary" | "sec
|
|
|
2198
2186
|
</div>
|
|
2199
2187
|
<div>Default args playground for Button</div>
|
|
2200
2188
|
<div class="hint">Args-controlled playground. Toggle `variant`, `size`, `status`, `loading`,
|
|
2201
|
-
`disabled`,
|
|
2202
|
-
|
|
2189
|
+
`disabled`, and `rounded` from the Controls panel to explore every visual
|
|
2190
|
+
combination of the Button.</div>
|
|
2203
2191
|
<pre><code>const Default = () => <Button variant="primary" size="sm">{TEXT}</Button>;</code></pre>
|
|
2204
2192
|
</div>
|
|
2205
2193
|
<div class="note ok">
|
|
@@ -2419,46 +2407,305 @@ router. In app code, swap the plain `<a>` below for your framework's L
|
|
|
2419
2407
|
</Row>
|
|
2420
2408
|
);</code></pre>
|
|
2421
2409
|
</div>
|
|
2410
|
+
</div>
|
|
2411
|
+
|
|
2412
|
+
|
|
2413
|
+
</div>
|
|
2414
|
+
</article>
|
|
2415
|
+
<article
|
|
2416
|
+
class="card
|
|
2417
|
+
no-error
|
|
2418
|
+
no-info
|
|
2419
|
+
no-story-error
|
|
2420
|
+
no-doc-error"
|
|
2421
|
+
role="listitem"
|
|
2422
|
+
aria-label="Checkbox">
|
|
2423
|
+
<div class="head">
|
|
2424
|
+
<div class="title">
|
|
2425
|
+
<h2><span class="status-dot dot-ok"></span> Checkbox</h2>
|
|
2426
|
+
<div class="badges">
|
|
2427
|
+
<label for="c-5-components-checkbox-props" class="badge ok as-toggle">9 prop types</label>
|
|
2428
|
+
|
|
2429
|
+
<label for="c-5-components-checkbox-stories" class="badge ok as-toggle">11 stories</label>
|
|
2430
|
+
|
|
2431
|
+
|
|
2432
|
+
</div>
|
|
2433
|
+
</div>
|
|
2434
|
+
<div class="meta" title="./src/checkbox/checkbox.stories.tsx">components-checkbox · ./src/checkbox/checkbox.stories.tsx</div>
|
|
2435
|
+
<div>Base checkbox control, with mixed state, unaware of form libraries</div>
|
|
2436
|
+
<div class="hint">Base control for a boolean the user confirms later. Headless: pair it with
|
|
2437
|
+
a `Label` and `htmlFor`, or give it an `aria-label`. There is no `status`
|
|
2438
|
+
prop — set `aria-invalid` and the destructive treatment follows.</div>
|
|
2439
|
+
<div class="kv"><span class="chip">summary: Base checkbox control, with mixed state, unaware of form libraries</span><span class="chip">example: <Label htmlFor="terms">I accept the terms</Label>
|
|
2440
|
+
<Checkbox id="terms" name="terms" required /></span></div>
|
|
2441
|
+
</div>
|
|
2442
|
+
|
|
2443
|
+
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
2444
|
+
|
|
2445
|
+
|
|
2446
|
+
<input id="c-5-components-checkbox-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
2447
|
+
|
|
2448
|
+
|
|
2449
|
+
<input id="c-5-components-checkbox-props" class="tg tg-props" type="checkbox" hidden />
|
|
2450
|
+
|
|
2451
|
+
<div class="panels">
|
|
2452
|
+
|
|
2453
|
+
|
|
2454
|
+
|
|
2455
|
+
<div class="panel panel-props">
|
|
2456
|
+
<div class="note ok">
|
|
2457
|
+
<div class="row">
|
|
2458
|
+
<span class="ex-name">Prop types <small>(react-component-meta)</small></span>
|
|
2459
|
+
<span class="badge ok">9 prop types</span>
|
|
2460
|
+
</div>
|
|
2461
|
+
<pre><code>Component: src/checkbox/checkbox.tsx::Checkbox</code></pre>
|
|
2462
|
+
<pre><code>Props:</code></pre>
|
|
2463
|
+
<pre><code>/**
|
|
2464
|
+
* Indicates the entered value does not conform to the format expected by the application.
|
|
2465
|
+
* Drives the destructive border and fill. Point `aria-describedby` at the error message.
|
|
2466
|
+
*/
|
|
2467
|
+
aria-invalid?: boolean | "true" | "false" | "grammar" | "spelling" | undefined
|
|
2468
|
+
|
|
2469
|
+
asChild?: boolean
|
|
2470
|
+
|
|
2471
|
+
/**
|
|
2472
|
+
* Controlled state. `'indeterminate'` renders a dash and announces `aria-checked="mixed"`.
|
|
2473
|
+
*/
|
|
2474
|
+
checked?: CheckedState | undefined
|
|
2475
|
+
|
|
2476
|
+
/**
|
|
2477
|
+
* Initial state for an uncontrolled checkbox.
|
|
2478
|
+
*/
|
|
2479
|
+
defaultChecked?: CheckedState | undefined
|
|
2480
|
+
|
|
2481
|
+
/**
|
|
2482
|
+
* Blocks interaction and greys the box out; the value is not submitted.
|
|
2483
|
+
*/
|
|
2484
|
+
disabled?: boolean
|
|
2485
|
+
|
|
2486
|
+
/**
|
|
2487
|
+
* Form field name. Needed for uncontrolled form usage.
|
|
2488
|
+
*/
|
|
2489
|
+
name?: string
|
|
2490
|
+
|
|
2491
|
+
/**
|
|
2492
|
+
* Fires with the next state (`true`, `false` or `'indeterminate'`) on click and on Space.
|
|
2493
|
+
*/
|
|
2494
|
+
onCheckedChange?: (checked: CheckedState) => void
|
|
2495
|
+
|
|
2496
|
+
/**
|
|
2497
|
+
* Marks the control required for the browser and assistive technology.
|
|
2498
|
+
*/
|
|
2499
|
+
required?: boolean
|
|
2500
|
+
|
|
2501
|
+
/**
|
|
2502
|
+
* Value submitted when checked. Defaults to `'on'`.
|
|
2503
|
+
*/
|
|
2504
|
+
value?: string | (readonly string[] & string) | undefined</code></pre>
|
|
2505
|
+
</div>
|
|
2506
|
+
</div>
|
|
2507
|
+
|
|
2508
|
+
<div class="panel panel-stories">
|
|
2509
|
+
|
|
2510
|
+
|
|
2511
|
+
|
|
2512
|
+
<div class="note ok">
|
|
2513
|
+
<div class="row">
|
|
2514
|
+
<span class="ex-name">Imports</span>
|
|
2515
|
+
</div>
|
|
2516
|
+
<pre><code>import { Checkbox, Label } from "@agentero/design-system";</code></pre>
|
|
2517
|
+
</div>
|
|
2518
|
+
|
|
2519
|
+
|
|
2422
2520
|
<div class="note ok">
|
|
2423
2521
|
<div class="row">
|
|
2424
|
-
<span class="ex-name">
|
|
2522
|
+
<span class="ex-name">Default</span>
|
|
2523
|
+
<span class="badge ok">story ok</span>
|
|
2524
|
+
</div>
|
|
2525
|
+
<div>Default standalone checkbox</div>
|
|
2526
|
+
|
|
2527
|
+
<pre><code>const Default = () => <Checkbox disabled={false} aria-label="Select row" />;</code></pre>
|
|
2528
|
+
</div>
|
|
2529
|
+
<div class="note ok">
|
|
2530
|
+
<div class="row">
|
|
2531
|
+
<span class="ex-name">Checked</span>
|
|
2425
2532
|
<span class="badge ok">story ok</span>
|
|
2426
2533
|
</div>
|
|
2427
|
-
<div>
|
|
2428
|
-
|
|
2429
|
-
|
|
2430
|
-
|
|
2431
|
-
|
|
2432
|
-
|
|
2534
|
+
<div>Checked state</div>
|
|
2535
|
+
|
|
2536
|
+
<pre><code>const Checked = () => <Checkbox disabled={false} aria-label="Select row" defaultChecked />;</code></pre>
|
|
2537
|
+
</div>
|
|
2538
|
+
<div class="note ok">
|
|
2539
|
+
<div class="row">
|
|
2540
|
+
<span class="ex-name">Indeterminate</span>
|
|
2541
|
+
<span class="badge ok">story ok</span>
|
|
2542
|
+
</div>
|
|
2543
|
+
<div>Mixed state for a partially selected group</div>
|
|
2544
|
+
<div class="hint">A state you set, never one the user clicks into: use it for a parent that
|
|
2545
|
+
governs a partially selected group.</div>
|
|
2546
|
+
<pre><code>const Indeterminate = () => <Checkbox disabled={false} aria-label="Select row" checked="indeterminate" />;</code></pre>
|
|
2547
|
+
</div>
|
|
2548
|
+
<div class="note ok">
|
|
2549
|
+
<div class="row">
|
|
2550
|
+
<span class="ex-name">Uncontrolled Indeterminate</span>
|
|
2551
|
+
<span class="badge ok">story ok</span>
|
|
2552
|
+
</div>
|
|
2553
|
+
<div>Uncontrolled checkbox starting in the mixed state</div>
|
|
2554
|
+
<div class="hint">Starts mixed without a controlled value, then toggles through checked and unchecked.</div>
|
|
2555
|
+
<pre><code>const UncontrolledIndeterminate = () => <Checkbox disabled={false} aria-label="Select row" defaultChecked="indeterminate" />;</code></pre>
|
|
2556
|
+
</div>
|
|
2557
|
+
<div class="note ok">
|
|
2558
|
+
<div class="row">
|
|
2559
|
+
<span class="ex-name">Disabled</span>
|
|
2560
|
+
<span class="badge ok">story ok</span>
|
|
2561
|
+
</div>
|
|
2562
|
+
<div>Disabled in every state</div>
|
|
2563
|
+
|
|
2564
|
+
<pre><code>const Disabled = () => (
|
|
2565
|
+
<div className="flex items-center gap-6">
|
|
2566
|
+
<Checkbox disabled aria-label="Disabled unchecked" />
|
|
2567
|
+
<Checkbox disabled defaultChecked aria-label="Disabled checked" />
|
|
2568
|
+
<Checkbox disabled checked="indeterminate" aria-label="Disabled mixed" />
|
|
2569
|
+
</div>
|
|
2570
|
+
);</code></pre>
|
|
2571
|
+
</div>
|
|
2572
|
+
<div class="note ok">
|
|
2573
|
+
<div class="row">
|
|
2574
|
+
<span class="ex-name">Invalid</span>
|
|
2575
|
+
<span class="badge ok">story ok</span>
|
|
2576
|
+
</div>
|
|
2577
|
+
<div>Failed validation, driven by aria-invalid</div>
|
|
2578
|
+
|
|
2579
|
+
<pre><code>const Invalid = () => (
|
|
2580
|
+
<div className="flex flex-col gap-2">
|
|
2581
|
+
<div className="flex items-center gap-2">
|
|
2582
|
+
<Checkbox id="terms" aria-invalid aria-describedby="terms-error" required />
|
|
2583
|
+
<Label htmlFor="terms">I accept the terms of service</Label>
|
|
2584
|
+
</div>
|
|
2585
|
+
<p id="terms-error" className="text-sm text-text-input-destructive">
|
|
2586
|
+
You must accept the terms to continue.
|
|
2587
|
+
</p>
|
|
2588
|
+
</div>
|
|
2589
|
+
);</code></pre>
|
|
2590
|
+
</div>
|
|
2591
|
+
<div class="note ok">
|
|
2592
|
+
<div class="row">
|
|
2593
|
+
<span class="ex-name">With Label</span>
|
|
2594
|
+
<span class="badge ok">story ok</span>
|
|
2595
|
+
</div>
|
|
2596
|
+
<div>Labelled checkbox with the text in the hit target</div>
|
|
2597
|
+
|
|
2598
|
+
<pre><code>const WithLabel = () => (
|
|
2599
|
+
<div className="flex items-center gap-2">
|
|
2600
|
+
<Checkbox id="newsletter" name="newsletter" />
|
|
2601
|
+
<Label htmlFor="newsletter">Email me product updates</Label>
|
|
2602
|
+
</div>
|
|
2603
|
+
);</code></pre>
|
|
2604
|
+
</div>
|
|
2605
|
+
<div class="note ok">
|
|
2606
|
+
<div class="row">
|
|
2607
|
+
<span class="ex-name">Controlled</span>
|
|
2608
|
+
<span class="badge ok">story ok</span>
|
|
2609
|
+
</div>
|
|
2610
|
+
<div>Controlled checkbox driven by component state</div>
|
|
2611
|
+
|
|
2612
|
+
<pre><code>const Controlled = () => {
|
|
2613
|
+
const [accepted, setAccepted] = useState(false);
|
|
2433
2614
|
|
|
2434
|
-
|
|
2435
|
-
|
|
2436
|
-
|
|
2437
|
-
|
|
2438
|
-
|
|
2439
|
-
|
|
2440
|
-
|
|
2441
|
-
|
|
2442
|
-
<
|
|
2443
|
-
|
|
2444
|
-
|
|
2445
|
-
|
|
2446
|
-
|
|
2447
|
-
|
|
2448
|
-
|
|
2449
|
-
|
|
2450
|
-
|
|
2451
|
-
|
|
2452
|
-
|
|
2453
|
-
|
|
2454
|
-
|
|
2455
|
-
|
|
2456
|
-
|
|
2457
|
-
|
|
2458
|
-
|
|
2459
|
-
|
|
2460
|
-
|
|
2461
|
-
|
|
2615
|
+
return (
|
|
2616
|
+
<div className="flex items-center gap-2">
|
|
2617
|
+
<Checkbox
|
|
2618
|
+
id="controlled"
|
|
2619
|
+
checked={accepted}
|
|
2620
|
+
onCheckedChange={value => setAccepted(value === true)}
|
|
2621
|
+
/>
|
|
2622
|
+
<Label htmlFor="controlled">Auto-renew policy {accepted ? '(on)' : '(off)'}</Label>
|
|
2623
|
+
</div>
|
|
2624
|
+
);
|
|
2625
|
+
};</code></pre>
|
|
2626
|
+
</div>
|
|
2627
|
+
<div class="note ok">
|
|
2628
|
+
<div class="row">
|
|
2629
|
+
<span class="ex-name">Select All</span>
|
|
2630
|
+
<span class="badge ok">story ok</span>
|
|
2631
|
+
</div>
|
|
2632
|
+
<div>Parent select-all checkbox governing a group</div>
|
|
2633
|
+
|
|
2634
|
+
<pre><code>const SelectAll = () => {
|
|
2635
|
+
const carriers = ['Openly', 'Lemonade', 'Bamboo'];
|
|
2636
|
+
const [selected, setSelected] = useState<string[]>(['Openly']);
|
|
2637
|
+
const allSelected = selected.length === carriers.length;
|
|
2638
|
+
|
|
2639
|
+
return (
|
|
2640
|
+
<div className="flex flex-col gap-3">
|
|
2641
|
+
<div className="flex items-center gap-2">
|
|
2642
|
+
<Checkbox
|
|
2643
|
+
id="select-all"
|
|
2644
|
+
checked={allSelected ? true : selected.length > 0 ? 'indeterminate' : false}
|
|
2645
|
+
onCheckedChange={value => setSelected(value === true ? carriers : [])}
|
|
2646
|
+
/>
|
|
2647
|
+
<Label htmlFor="select-all">Select all carriers</Label>
|
|
2648
|
+
</div>
|
|
2649
|
+
<div className="ms-6 flex flex-col gap-2">
|
|
2650
|
+
{carriers.map(carrier => (
|
|
2651
|
+
<div key={carrier} className="flex items-center gap-2">
|
|
2652
|
+
<Checkbox
|
|
2653
|
+
id={carrier}
|
|
2654
|
+
checked={selected.includes(carrier)}
|
|
2655
|
+
onCheckedChange={value =>
|
|
2656
|
+
setSelected(prev =>
|
|
2657
|
+
value === true ? [...prev, carrier] : prev.filter(name => name !== carrier)
|
|
2658
|
+
)
|
|
2659
|
+
}
|
|
2660
|
+
/>
|
|
2661
|
+
<Label htmlFor={carrier}>{carrier}</Label>
|
|
2662
|
+
</div>
|
|
2663
|
+
))}
|
|
2664
|
+
</div>
|
|
2665
|
+
</div>
|
|
2666
|
+
);
|
|
2667
|
+
};</code></pre>
|
|
2668
|
+
</div>
|
|
2669
|
+
<div class="note ok">
|
|
2670
|
+
<div class="row">
|
|
2671
|
+
<span class="ex-name">Inside Selected Group</span>
|
|
2672
|
+
<span class="badge ok">story ok</span>
|
|
2673
|
+
</div>
|
|
2674
|
+
<div>Mixed checkbox inside another selected group</div>
|
|
2675
|
+
<div class="hint">A surrounding selection container must not change the checkbox's own glyph.</div>
|
|
2676
|
+
<pre><code>const InsideSelectedGroup = () => (
|
|
2677
|
+
<div className="group" data-state="checked">
|
|
2678
|
+
<Checkbox aria-label="Select carriers" defaultChecked="indeterminate" />
|
|
2679
|
+
</div>
|
|
2680
|
+
);</code></pre>
|
|
2681
|
+
</div>
|
|
2682
|
+
<div class="note ok">
|
|
2683
|
+
<div class="row">
|
|
2684
|
+
<span class="ex-name">Legacy States</span>
|
|
2685
|
+
<span class="badge ok">story ok</span>
|
|
2686
|
+
</div>
|
|
2687
|
+
<div>Legacy checkbox colours across all interaction states</div>
|
|
2688
|
+
<div class="hint">Preserves the legacy palette and 16px footprint for every value and validation state.</div>
|
|
2689
|
+
<pre><code>const LegacyStates = () => (
|
|
2690
|
+
<div className="flex flex-col gap-6">
|
|
2691
|
+
{[false, true].map(invalid => (
|
|
2692
|
+
<div key={String(invalid)} className="flex flex-col gap-4">
|
|
2693
|
+
{[false, true].map(disabled => (
|
|
2694
|
+
<div key={String(disabled)} className="flex items-center gap-6">
|
|
2695
|
+
{([false, true, 'indeterminate'] as const).map(checked => (
|
|
2696
|
+
<Checkbox
|
|
2697
|
+
key={String(checked)}
|
|
2698
|
+
aria-label={`${invalid ? 'Invalid' : 'Valid'} ${disabled ? 'disabled' : 'enabled'} ${checked}`}
|
|
2699
|
+
checked={checked}
|
|
2700
|
+
disabled={disabled}
|
|
2701
|
+
aria-invalid={invalid}
|
|
2702
|
+
/>
|
|
2703
|
+
))}
|
|
2704
|
+
</div>
|
|
2705
|
+
))}
|
|
2706
|
+
</div>
|
|
2707
|
+
))}
|
|
2708
|
+
</div>
|
|
2462
2709
|
);</code></pre>
|
|
2463
2710
|
</div>
|
|
2464
2711
|
</div>
|
|
@@ -2480,7 +2727,7 @@ under `prefers-reduced-motion`.</div>
|
|
|
2480
2727
|
<div class="badges">
|
|
2481
2728
|
|
|
2482
2729
|
|
|
2483
|
-
<label for="c-
|
|
2730
|
+
<label for="c-6-components-checklist-stories" class="badge ok as-toggle">2 stories</label>
|
|
2484
2731
|
|
|
2485
2732
|
|
|
2486
2733
|
</div>
|
|
@@ -2501,7 +2748,7 @@ import { CheckList } from '@agentero/design-system/check-list';
|
|
|
2501
2748
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
2502
2749
|
|
|
2503
2750
|
|
|
2504
|
-
<input id="c-
|
|
2751
|
+
<input id="c-6-components-checklist-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
2505
2752
|
|
|
2506
2753
|
|
|
2507
2754
|
|
|
@@ -2578,9 +2825,9 @@ import { CheckList } from '@agentero/design-system/check-list';
|
|
|
2578
2825
|
<div class="title">
|
|
2579
2826
|
<h2><span class="status-dot dot-ok"></span> Command.Root</h2>
|
|
2580
2827
|
<div class="badges">
|
|
2581
|
-
<label for="c-
|
|
2828
|
+
<label for="c-7-components-command-props" class="badge ok as-toggle">10 prop types</label>
|
|
2582
2829
|
|
|
2583
|
-
<label for="c-
|
|
2830
|
+
<label for="c-7-components-command-stories" class="badge ok as-toggle">6 stories</label>
|
|
2584
2831
|
|
|
2585
2832
|
|
|
2586
2833
|
</div>
|
|
@@ -2613,10 +2860,10 @@ import { Command } from '@agentero/design-system/command';
|
|
|
2613
2860
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
2614
2861
|
|
|
2615
2862
|
|
|
2616
|
-
<input id="c-
|
|
2863
|
+
<input id="c-7-components-command-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
2617
2864
|
|
|
2618
2865
|
|
|
2619
|
-
<input id="c-
|
|
2866
|
+
<input id="c-7-components-command-props" class="tg tg-props" type="checkbox" hidden />
|
|
2620
2867
|
|
|
2621
2868
|
<div class="panels">
|
|
2622
2869
|
|
|
@@ -2830,9 +3077,9 @@ list does not invite the pointer.</div>
|
|
|
2830
3077
|
<div class="title">
|
|
2831
3078
|
<h2><span class="status-dot dot-ok"></span> DataTable.Root</h2>
|
|
2832
3079
|
<div class="badges">
|
|
2833
|
-
<label for="c-
|
|
3080
|
+
<label for="c-8-components-datatable-props" class="badge ok as-toggle">88 prop types</label>
|
|
2834
3081
|
|
|
2835
|
-
<label for="c-
|
|
3082
|
+
<label for="c-8-components-datatable-stories" class="badge ok as-toggle">4 stories</label>
|
|
2836
3083
|
|
|
2837
3084
|
|
|
2838
3085
|
</div>
|
|
@@ -2875,10 +3122,10 @@ const columns = [
|
|
|
2875
3122
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
2876
3123
|
|
|
2877
3124
|
|
|
2878
|
-
<input id="c-
|
|
3125
|
+
<input id="c-8-components-datatable-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
2879
3126
|
|
|
2880
3127
|
|
|
2881
|
-
<input id="c-
|
|
3128
|
+
<input id="c-8-components-datatable-props" class="tg tg-props" type="checkbox" hidden />
|
|
2882
3129
|
|
|
2883
3130
|
<div class="panels">
|
|
2884
3131
|
|
|
@@ -3456,9 +3703,9 @@ in flight.</div>
|
|
|
3456
3703
|
<div class="title">
|
|
3457
3704
|
<h2><span class="status-dot dot-ok"></span> Divider</h2>
|
|
3458
3705
|
<div class="badges">
|
|
3459
|
-
<label for="c-
|
|
3706
|
+
<label for="c-9-components-divider-props" class="badge ok as-toggle">4 prop types</label>
|
|
3460
3707
|
|
|
3461
|
-
<label for="c-
|
|
3708
|
+
<label for="c-9-components-divider-stories" class="badge ok as-toggle">10 stories</label>
|
|
3462
3709
|
|
|
3463
3710
|
|
|
3464
3711
|
</div>
|
|
@@ -3481,10 +3728,10 @@ When omitted, Divider renders a single line.</span><span class="chip">example: &
|
|
|
3481
3728
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3482
3729
|
|
|
3483
3730
|
|
|
3484
|
-
<input id="c-
|
|
3731
|
+
<input id="c-9-components-divider-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3485
3732
|
|
|
3486
3733
|
|
|
3487
|
-
<input id="c-
|
|
3734
|
+
<input id="c-9-components-divider-props" class="tg tg-props" type="checkbox" hidden />
|
|
3488
3735
|
|
|
3489
3736
|
<div class="panels">
|
|
3490
3737
|
|
|
@@ -3787,9 +4034,9 @@ related controls or inline links without visual weight.</div>
|
|
|
3787
4034
|
<div class="title">
|
|
3788
4035
|
<h2><span class="status-dot dot-ok"></span> DropdownMenu.Root</h2>
|
|
3789
4036
|
<div class="badges">
|
|
3790
|
-
<label for="c-
|
|
4037
|
+
<label for="c-10-components-dropdownmenu-props" class="badge ok as-toggle">6 prop types</label>
|
|
3791
4038
|
|
|
3792
|
-
<label for="c-
|
|
4039
|
+
<label for="c-10-components-dropdownmenu-stories" class="badge ok as-toggle">7 stories</label>
|
|
3793
4040
|
|
|
3794
4041
|
|
|
3795
4042
|
</div>
|
|
@@ -3848,10 +4095,10 @@ import { DropdownMenu } from '@agentero/design-system/dropdown-menu';
|
|
|
3848
4095
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3849
4096
|
|
|
3850
4097
|
|
|
3851
|
-
<input id="c-
|
|
4098
|
+
<input id="c-10-components-dropdownmenu-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3852
4099
|
|
|
3853
4100
|
|
|
3854
|
-
<input id="c-
|
|
4101
|
+
<input id="c-10-components-dropdownmenu-props" class="tg tg-props" type="checkbox" hidden />
|
|
3855
4102
|
|
|
3856
4103
|
<div class="panels">
|
|
3857
4104
|
|
|
@@ -4254,9 +4501,9 @@ actions outright unless the user needs to see them and understand why.</div>
|
|
|
4254
4501
|
<div class="title">
|
|
4255
4502
|
<h2><span class="status-dot dot-ok"></span> HoverCard.Root</h2>
|
|
4256
4503
|
<div class="badges">
|
|
4257
|
-
<label for="c-
|
|
4504
|
+
<label for="c-11-components-hovercard-props" class="badge ok as-toggle">6 prop types</label>
|
|
4258
4505
|
|
|
4259
|
-
<label for="c-
|
|
4506
|
+
<label for="c-11-components-hovercard-stories" class="badge ok as-toggle">7 stories</label>
|
|
4260
4507
|
|
|
4261
4508
|
|
|
4262
4509
|
</div>
|
|
@@ -4288,10 +4535,10 @@ import { HoverCard } from '@agentero/design-system/hover-card';
|
|
|
4288
4535
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
4289
4536
|
|
|
4290
4537
|
|
|
4291
|
-
<input id="c-
|
|
4538
|
+
<input id="c-11-components-hovercard-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
4292
4539
|
|
|
4293
4540
|
|
|
4294
|
-
<input id="c-
|
|
4541
|
+
<input id="c-11-components-hovercard-props" class="tg tg-props" type="checkbox" hidden />
|
|
4295
4542
|
|
|
4296
4543
|
<div class="panels">
|
|
4297
4544
|
|
|
@@ -4538,9 +4785,9 @@ trigger-dense UIs where an instant preview reads as more responsive.</div>
|
|
|
4538
4785
|
<div class="title">
|
|
4539
4786
|
<h2><span class="status-dot dot-ok"></span> Input</h2>
|
|
4540
4787
|
<div class="badges">
|
|
4541
|
-
<label for="c-
|
|
4788
|
+
<label for="c-12-components-input-props" class="badge ok as-toggle">7 prop types</label>
|
|
4542
4789
|
|
|
4543
|
-
<label for="c-
|
|
4790
|
+
<label for="c-12-components-input-stories" class="badge ok as-toggle">9 stories</label>
|
|
4544
4791
|
|
|
4545
4792
|
|
|
4546
4793
|
</div>
|
|
@@ -4562,10 +4809,10 @@ assistive technology announces.</div>
|
|
|
4562
4809
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
4563
4810
|
|
|
4564
4811
|
|
|
4565
|
-
<input id="c-
|
|
4812
|
+
<input id="c-12-components-input-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
4566
4813
|
|
|
4567
4814
|
|
|
4568
|
-
<input id="c-
|
|
4815
|
+
<input id="c-12-components-input-props" class="tg tg-props" type="checkbox" hidden />
|
|
4569
4816
|
|
|
4570
4817
|
<div class="panels">
|
|
4571
4818
|
|
|
@@ -4777,9 +5024,9 @@ they cannot change.</div>
|
|
|
4777
5024
|
<div class="title">
|
|
4778
5025
|
<h2><span class="status-dot dot-ok"></span> Label</h2>
|
|
4779
5026
|
<div class="badges">
|
|
4780
|
-
<label for="c-
|
|
5027
|
+
<label for="c-13-components-label-props" class="badge ok as-toggle">3 prop types</label>
|
|
4781
5028
|
|
|
4782
|
-
<label for="c-
|
|
5029
|
+
<label for="c-13-components-label-stories" class="badge ok as-toggle">4 stories</label>
|
|
4783
5030
|
|
|
4784
5031
|
|
|
4785
5032
|
</div>
|
|
@@ -4799,10 +5046,10 @@ still has to carry `required` / `aria-required`.</div>
|
|
|
4799
5046
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
4800
5047
|
|
|
4801
5048
|
|
|
4802
|
-
<input id="c-
|
|
5049
|
+
<input id="c-13-components-label-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
4803
5050
|
|
|
4804
5051
|
|
|
4805
|
-
<input id="c-
|
|
5052
|
+
<input id="c-13-components-label-props" class="tg tg-props" type="checkbox" hidden />
|
|
4806
5053
|
|
|
4807
5054
|
<div class="panels">
|
|
4808
5055
|
|
|
@@ -4900,9 +5147,9 @@ dropped, so a mistake never takes the page down.</div>
|
|
|
4900
5147
|
<div class="title">
|
|
4901
5148
|
<h2><span class="status-dot dot-ok"></span> Loading</h2>
|
|
4902
5149
|
<div class="badges">
|
|
4903
|
-
<label for="c-
|
|
5150
|
+
<label for="c-14-components-loading-props" class="badge ok as-toggle">1 prop type</label>
|
|
4904
5151
|
|
|
4905
|
-
<label for="c-
|
|
5152
|
+
<label for="c-14-components-loading-stories" class="badge ok as-toggle">7 stories</label>
|
|
4906
5153
|
|
|
4907
5154
|
|
|
4908
5155
|
</div>
|
|
@@ -4919,10 +5166,10 @@ parent font size via `em`-based size variants (`sm`, `md`, `lg`).</div>
|
|
|
4919
5166
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
4920
5167
|
|
|
4921
5168
|
|
|
4922
|
-
<input id="c-
|
|
5169
|
+
<input id="c-14-components-loading-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
4923
5170
|
|
|
4924
5171
|
|
|
4925
|
-
<input id="c-
|
|
5172
|
+
<input id="c-14-components-loading-props" class="tg tg-props" type="checkbox" hidden />
|
|
4926
5173
|
|
|
4927
5174
|
<div class="panels">
|
|
4928
5175
|
|
|
@@ -5073,9 +5320,9 @@ against the dark background.</div>
|
|
|
5073
5320
|
<div class="title">
|
|
5074
5321
|
<h2><span class="status-dot dot-ok"></span> Modal.Root</h2>
|
|
5075
5322
|
<div class="badges">
|
|
5076
|
-
<label for="c-
|
|
5323
|
+
<label for="c-15-components-modal-props" class="badge ok as-toggle">5 prop types</label>
|
|
5077
5324
|
|
|
5078
|
-
<label for="c-
|
|
5325
|
+
<label for="c-15-components-modal-stories" class="badge ok as-toggle">6 stories</label>
|
|
5079
5326
|
|
|
5080
5327
|
|
|
5081
5328
|
</div>
|
|
@@ -5121,10 +5368,10 @@ import { Modal } from '@agentero/design-system/modal';
|
|
|
5121
5368
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
5122
5369
|
|
|
5123
5370
|
|
|
5124
|
-
<input id="c-
|
|
5371
|
+
<input id="c-15-components-modal-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
5125
5372
|
|
|
5126
5373
|
|
|
5127
|
-
<input id="c-
|
|
5374
|
+
<input id="c-15-components-modal-props" class="tg tg-props" type="checkbox" hidden />
|
|
5128
5375
|
|
|
5129
5376
|
<div class="panels">
|
|
5130
5377
|
|
|
@@ -5321,9 +5568,9 @@ announced as an `alertdialog`. Only the footer actions close it.</div>
|
|
|
5321
5568
|
<div class="title">
|
|
5322
5569
|
<h2><span class="status-dot dot-ok"></span> Pagination</h2>
|
|
5323
5570
|
<div class="badges">
|
|
5324
|
-
<label for="c-
|
|
5571
|
+
<label for="c-16-components-pagination-props" class="badge ok as-toggle">5 prop types</label>
|
|
5325
5572
|
|
|
5326
|
-
<label for="c-
|
|
5573
|
+
<label for="c-16-components-pagination-stories" class="badge ok as-toggle">7 stories</label>
|
|
5327
5574
|
|
|
5328
5575
|
|
|
5329
5576
|
</div>
|
|
@@ -5353,10 +5600,10 @@ const [page, setPage] = useState(1);
|
|
|
5353
5600
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
5354
5601
|
|
|
5355
5602
|
|
|
5356
|
-
<input id="c-
|
|
5603
|
+
<input id="c-16-components-pagination-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
5357
5604
|
|
|
5358
5605
|
|
|
5359
|
-
<input id="c-
|
|
5606
|
+
<input id="c-16-components-pagination-props" class="tg tg-props" type="checkbox" hidden />
|
|
5360
5607
|
|
|
5361
5608
|
<div class="panels">
|
|
5362
5609
|
|
|
@@ -5511,9 +5758,9 @@ entries summary follow along.</div>
|
|
|
5511
5758
|
<div class="title">
|
|
5512
5759
|
<h2><span class="status-dot dot-ok"></span> Popover.Root</h2>
|
|
5513
5760
|
<div class="badges">
|
|
5514
|
-
<label for="c-
|
|
5761
|
+
<label for="c-17-components-popover-props" class="badge ok as-toggle">5 prop types</label>
|
|
5515
5762
|
|
|
5516
|
-
<label for="c-
|
|
5763
|
+
<label for="c-17-components-popover-stories" class="badge ok as-toggle">4 stories</label>
|
|
5517
5764
|
|
|
5518
5765
|
|
|
5519
5766
|
</div>
|
|
@@ -5542,10 +5789,10 @@ import { Popover } from '@agentero/design-system/popover';
|
|
|
5542
5789
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
5543
5790
|
|
|
5544
5791
|
|
|
5545
|
-
<input id="c-
|
|
5792
|
+
<input id="c-17-components-popover-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
5546
5793
|
|
|
5547
5794
|
|
|
5548
|
-
<input id="c-
|
|
5795
|
+
<input id="c-17-components-popover-props" class="tg tg-props" type="checkbox" hidden />
|
|
5549
5796
|
|
|
5550
5797
|
<div class="panels">
|
|
5551
5798
|
|
|
@@ -5700,9 +5947,9 @@ useful when the visual anchor differs from the toggle button.</div>
|
|
|
5700
5947
|
<div class="title">
|
|
5701
5948
|
<h2><span class="status-dot dot-ok"></span> Progress</h2>
|
|
5702
5949
|
<div class="badges">
|
|
5703
|
-
<label for="c-
|
|
5950
|
+
<label for="c-18-components-progress-props" class="badge ok as-toggle">4 prop types</label>
|
|
5704
5951
|
|
|
5705
|
-
<label for="c-
|
|
5952
|
+
<label for="c-18-components-progress-stories" class="badge ok as-toggle">4 stories</label>
|
|
5706
5953
|
|
|
5707
5954
|
|
|
5708
5955
|
</div>
|
|
@@ -5721,10 +5968,10 @@ with `currentColor`, so recolor it with a plain text class — e.g.
|
|
|
5721
5968
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
5722
5969
|
|
|
5723
5970
|
|
|
5724
|
-
<input id="c-
|
|
5971
|
+
<input id="c-18-components-progress-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
5725
5972
|
|
|
5726
5973
|
|
|
5727
|
-
<input id="c-
|
|
5974
|
+
<input id="c-18-components-progress-props" class="tg tg-props" type="checkbox" hidden />
|
|
5728
5975
|
|
|
5729
5976
|
<div class="panels">
|
|
5730
5977
|
|
|
@@ -5843,7 +6090,7 @@ percentage: number</code></pre>
|
|
|
5843
6090
|
<div class="badges">
|
|
5844
6091
|
|
|
5845
6092
|
|
|
5846
|
-
<label for="c-
|
|
6093
|
+
<label for="c-19-components-skeleton-stories" class="badge ok as-toggle">4 stories</label>
|
|
5847
6094
|
|
|
5848
6095
|
|
|
5849
6096
|
</div>
|
|
@@ -5860,7 +6107,7 @@ shape it with Tailwind classes to mirror the content it stands in for.</div>
|
|
|
5860
6107
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
5861
6108
|
|
|
5862
6109
|
|
|
5863
|
-
<input id="c-
|
|
6110
|
+
<input id="c-19-components-skeleton-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
5864
6111
|
|
|
5865
6112
|
|
|
5866
6113
|
|
|
@@ -5956,9 +6203,9 @@ shape it with Tailwind classes to mirror the content it stands in for.</div>
|
|
|
5956
6203
|
<div class="title">
|
|
5957
6204
|
<h2><span class="status-dot dot-ok"></span> Switch</h2>
|
|
5958
6205
|
<div class="badges">
|
|
5959
|
-
<label for="c-
|
|
6206
|
+
<label for="c-20-components-switch-props" class="badge ok as-toggle">8 prop types</label>
|
|
5960
6207
|
|
|
5961
|
-
<label for="c-
|
|
6208
|
+
<label for="c-20-components-switch-stories" class="badge ok as-toggle">7 stories</label>
|
|
5962
6209
|
|
|
5963
6210
|
|
|
5964
6211
|
</div>
|
|
@@ -5974,10 +6221,10 @@ a Checkbox for a single boolean that applies instantly, and pair it with a
|
|
|
5974
6221
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
5975
6222
|
|
|
5976
6223
|
|
|
5977
|
-
<input id="c-
|
|
6224
|
+
<input id="c-20-components-switch-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
5978
6225
|
|
|
5979
6226
|
|
|
5980
|
-
<input id="c-
|
|
6227
|
+
<input id="c-20-components-switch-props" class="tg tg-props" type="checkbox" hidden />
|
|
5981
6228
|
|
|
5982
6229
|
<div class="panels">
|
|
5983
6230
|
|
|
@@ -6158,9 +6405,9 @@ size?: "sm" | "md"</code></pre>
|
|
|
6158
6405
|
<div class="title">
|
|
6159
6406
|
<h2><span class="status-dot dot-ok"></span> Table.Root</h2>
|
|
6160
6407
|
<div class="badges">
|
|
6161
|
-
<label for="c-
|
|
6408
|
+
<label for="c-21-components-table-props" class="badge ok as-toggle">6 prop types</label>
|
|
6162
6409
|
|
|
6163
|
-
<label for="c-
|
|
6410
|
+
<label for="c-21-components-table-stories" class="badge ok as-toggle">9 stories</label>
|
|
6164
6411
|
|
|
6165
6412
|
|
|
6166
6413
|
</div>
|
|
@@ -6191,10 +6438,10 @@ import { Table } from '@agentero/design-system/table';
|
|
|
6191
6438
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
6192
6439
|
|
|
6193
6440
|
|
|
6194
|
-
<input id="c-
|
|
6441
|
+
<input id="c-21-components-table-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
6195
6442
|
|
|
6196
6443
|
|
|
6197
|
-
<input id="c-
|
|
6444
|
+
<input id="c-21-components-table-props" class="tg tg-props" type="checkbox" hidden />
|
|
6198
6445
|
|
|
6199
6446
|
<div class="panels">
|
|
6200
6447
|
|
|
@@ -6389,9 +6636,9 @@ import { Fragment } from "react";</code></pre>
|
|
|
6389
6636
|
<div class="title">
|
|
6390
6637
|
<h2><span class="status-dot dot-ok"></span> Tabs.Root</h2>
|
|
6391
6638
|
<div class="badges">
|
|
6392
|
-
<label for="c-
|
|
6639
|
+
<label for="c-22-components-tabs-props" class="badge ok as-toggle">9 prop types</label>
|
|
6393
6640
|
|
|
6394
|
-
<label for="c-
|
|
6641
|
+
<label for="c-22-components-tabs-stories" class="badge ok as-toggle">8 stories</label>
|
|
6395
6642
|
|
|
6396
6643
|
|
|
6397
6644
|
</div>
|
|
@@ -6422,10 +6669,10 @@ import { Tabs } from '@agentero/design-system/tabs';
|
|
|
6422
6669
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
6423
6670
|
|
|
6424
6671
|
|
|
6425
|
-
<input id="c-
|
|
6672
|
+
<input id="c-22-components-tabs-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
6426
6673
|
|
|
6427
6674
|
|
|
6428
|
-
<input id="c-
|
|
6675
|
+
<input id="c-22-components-tabs-props" class="tg tg-props" type="checkbox" hidden />
|
|
6429
6676
|
|
|
6430
6677
|
<div class="panels">
|
|
6431
6678
|
|
|
@@ -6646,9 +6893,9 @@ tablist role is announced.</div>
|
|
|
6646
6893
|
<div class="title">
|
|
6647
6894
|
<h2><span class="status-dot dot-ok"></span> Tag</h2>
|
|
6648
6895
|
<div class="badges">
|
|
6649
|
-
<label for="c-
|
|
6896
|
+
<label for="c-23-components-tag-props" class="badge ok as-toggle">8 prop types</label>
|
|
6650
6897
|
|
|
6651
|
-
<label for="c-
|
|
6898
|
+
<label for="c-23-components-tag-stories" class="badge ok as-toggle">12 stories</label>
|
|
6652
6899
|
|
|
6653
6900
|
|
|
6654
6901
|
</div>
|
|
@@ -6667,10 +6914,10 @@ it an interactive link or button, which adds the pointer cursor and hover fill.<
|
|
|
6667
6914
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
6668
6915
|
|
|
6669
6916
|
|
|
6670
|
-
<input id="c-
|
|
6917
|
+
<input id="c-23-components-tag-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
6671
6918
|
|
|
6672
6919
|
|
|
6673
|
-
<input id="c-
|
|
6920
|
+
<input id="c-23-components-tag-props" class="tg tg-props" type="checkbox" hidden />
|
|
6674
6921
|
|
|
6675
6922
|
<div class="panels">
|
|
6676
6923
|
|
|
@@ -7095,9 +7342,9 @@ leading + trailing icons, and icon-only.</div>
|
|
|
7095
7342
|
<div class="title">
|
|
7096
7343
|
<h2><span class="status-dot dot-ok"></span> Toast</h2>
|
|
7097
7344
|
<div class="badges">
|
|
7098
|
-
<label for="c-
|
|
7345
|
+
<label for="c-24-components-toast-props" class="badge ok as-toggle">11 prop types</label>
|
|
7099
7346
|
|
|
7100
|
-
<label for="c-
|
|
7347
|
+
<label for="c-24-components-toast-stories" class="badge ok as-toggle">11 stories</label>
|
|
7101
7348
|
|
|
7102
7349
|
|
|
7103
7350
|
</div>
|
|
@@ -7116,10 +7363,10 @@ common feedback patterns.</div>
|
|
|
7116
7363
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
7117
7364
|
|
|
7118
7365
|
|
|
7119
|
-
<input id="c-
|
|
7366
|
+
<input id="c-24-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
7120
7367
|
|
|
7121
7368
|
|
|
7122
|
-
<input id="c-
|
|
7369
|
+
<input id="c-24-components-toast-props" class="tg tg-props" type="checkbox" hidden />
|
|
7123
7370
|
|
|
7124
7371
|
<div class="panels">
|
|
7125
7372
|
|
|
@@ -7548,9 +7795,9 @@ action (e.g., a sync icon for a sync-in-progress toast).</div>
|
|
|
7548
7795
|
<div class="title">
|
|
7549
7796
|
<h2><span class="status-dot dot-ok"></span> Tooltip</h2>
|
|
7550
7797
|
<div class="badges">
|
|
7551
|
-
<label for="c-
|
|
7798
|
+
<label for="c-25-components-tooltip-props" class="badge ok as-toggle">12 prop types</label>
|
|
7552
7799
|
|
|
7553
|
-
<label for="c-
|
|
7800
|
+
<label for="c-25-components-tooltip-stories" class="badge ok as-toggle">5 stories</label>
|
|
7554
7801
|
|
|
7555
7802
|
|
|
7556
7803
|
</div>
|
|
@@ -7569,10 +7816,10 @@ on hover or focus.</div>
|
|
|
7569
7816
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
7570
7817
|
|
|
7571
7818
|
|
|
7572
|
-
<input id="c-
|
|
7819
|
+
<input id="c-25-components-tooltip-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
7573
7820
|
|
|
7574
7821
|
|
|
7575
|
-
<input id="c-
|
|
7822
|
+
<input id="c-25-components-tooltip-props" class="tg tg-props" type="checkbox" hidden />
|
|
7576
7823
|
|
|
7577
7824
|
<div class="panels">
|
|
7578
7825
|
|
|
@@ -7744,9 +7991,9 @@ sideOffset?: number = 4</code></pre>
|
|
|
7744
7991
|
<div class="title">
|
|
7745
7992
|
<h2><span class="status-dot dot-ok"></span> ValidationList</h2>
|
|
7746
7993
|
<div class="badges">
|
|
7747
|
-
<label for="c-
|
|
7994
|
+
<label for="c-26-components-validationlist-props" class="badge ok as-toggle">2 prop types</label>
|
|
7748
7995
|
|
|
7749
|
-
<label for="c-
|
|
7996
|
+
<label for="c-26-components-validationlist-stories" class="badge ok as-toggle">4 stories</label>
|
|
7750
7997
|
|
|
7751
7998
|
|
|
7752
7999
|
</div>
|
|
@@ -7767,10 +8014,10 @@ your form validation; it does not own the input or block submission.</div>
|
|
|
7767
8014
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
7768
8015
|
|
|
7769
8016
|
|
|
7770
|
-
<input id="c-
|
|
8017
|
+
<input id="c-26-components-validationlist-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
7771
8018
|
|
|
7772
8019
|
|
|
7773
|
-
<input id="c-
|
|
8020
|
+
<input id="c-26-components-validationlist-props" class="tg tg-props" type="checkbox" hidden />
|
|
7774
8021
|
|
|
7775
8022
|
<div class="panels">
|
|
7776
8023
|
|