@agentero/design-system 0.26.3 → 0.27.1
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 +428 -83
- package/mcp/manifests/components.json +336 -15
- package/package.json +6 -1
- 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/dropdown-menu/dropdown-menu.js +2 -2
- package/src/hover-card/hover-card.js +1 -1
- package/src/modal/modal.js +2 -2
- package/src/popover/popover.js +1 -1
- package/theme/base.css +24 -6
|
@@ -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">215 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>4.
|
|
597
|
+
Using <code>react-component-meta</code>. Generation took <strong>4.7s</strong>.
|
|
598
598
|
</div>
|
|
599
599
|
<h2 class="section-title">Components</h2>
|
|
600
600
|
<div class="grid" role="list">
|
|
@@ -2410,6 +2410,307 @@ router. In app code, swap the plain `<a>` below for your framework's L
|
|
|
2410
2410
|
</div>
|
|
2411
2411
|
|
|
2412
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
|
+
|
|
2520
|
+
<div class="note ok">
|
|
2521
|
+
<div class="row">
|
|
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>
|
|
2532
|
+
<span class="badge ok">story ok</span>
|
|
2533
|
+
</div>
|
|
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);
|
|
2614
|
+
|
|
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>
|
|
2709
|
+
);</code></pre>
|
|
2710
|
+
</div>
|
|
2711
|
+
</div>
|
|
2712
|
+
|
|
2713
|
+
|
|
2413
2714
|
</div>
|
|
2414
2715
|
</article>
|
|
2415
2716
|
<article
|
|
@@ -2426,7 +2727,7 @@ router. In app code, swap the plain `<a>` below for your framework's L
|
|
|
2426
2727
|
<div class="badges">
|
|
2427
2728
|
|
|
2428
2729
|
|
|
2429
|
-
<label for="c-
|
|
2730
|
+
<label for="c-6-components-checklist-stories" class="badge ok as-toggle">2 stories</label>
|
|
2430
2731
|
|
|
2431
2732
|
|
|
2432
2733
|
</div>
|
|
@@ -2447,7 +2748,7 @@ import { CheckList } from '@agentero/design-system/check-list';
|
|
|
2447
2748
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
2448
2749
|
|
|
2449
2750
|
|
|
2450
|
-
<input id="c-
|
|
2751
|
+
<input id="c-6-components-checklist-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
2451
2752
|
|
|
2452
2753
|
|
|
2453
2754
|
|
|
@@ -2524,9 +2825,9 @@ import { CheckList } from '@agentero/design-system/check-list';
|
|
|
2524
2825
|
<div class="title">
|
|
2525
2826
|
<h2><span class="status-dot dot-ok"></span> Command.Root</h2>
|
|
2526
2827
|
<div class="badges">
|
|
2527
|
-
<label for="c-
|
|
2828
|
+
<label for="c-7-components-command-props" class="badge ok as-toggle">10 prop types</label>
|
|
2528
2829
|
|
|
2529
|
-
<label for="c-
|
|
2830
|
+
<label for="c-7-components-command-stories" class="badge ok as-toggle">6 stories</label>
|
|
2530
2831
|
|
|
2531
2832
|
|
|
2532
2833
|
</div>
|
|
@@ -2559,10 +2860,10 @@ import { Command } from '@agentero/design-system/command';
|
|
|
2559
2860
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
2560
2861
|
|
|
2561
2862
|
|
|
2562
|
-
<input id="c-
|
|
2863
|
+
<input id="c-7-components-command-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
2563
2864
|
|
|
2564
2865
|
|
|
2565
|
-
<input id="c-
|
|
2866
|
+
<input id="c-7-components-command-props" class="tg tg-props" type="checkbox" hidden />
|
|
2566
2867
|
|
|
2567
2868
|
<div class="panels">
|
|
2568
2869
|
|
|
@@ -2776,9 +3077,9 @@ list does not invite the pointer.</div>
|
|
|
2776
3077
|
<div class="title">
|
|
2777
3078
|
<h2><span class="status-dot dot-ok"></span> DataTable.Root</h2>
|
|
2778
3079
|
<div class="badges">
|
|
2779
|
-
<label for="c-
|
|
3080
|
+
<label for="c-8-components-datatable-props" class="badge ok as-toggle">88 prop types</label>
|
|
2780
3081
|
|
|
2781
|
-
<label for="c-
|
|
3082
|
+
<label for="c-8-components-datatable-stories" class="badge ok as-toggle">4 stories</label>
|
|
2782
3083
|
|
|
2783
3084
|
|
|
2784
3085
|
</div>
|
|
@@ -2821,10 +3122,10 @@ const columns = [
|
|
|
2821
3122
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
2822
3123
|
|
|
2823
3124
|
|
|
2824
|
-
<input id="c-
|
|
3125
|
+
<input id="c-8-components-datatable-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
2825
3126
|
|
|
2826
3127
|
|
|
2827
|
-
<input id="c-
|
|
3128
|
+
<input id="c-8-components-datatable-props" class="tg tg-props" type="checkbox" hidden />
|
|
2828
3129
|
|
|
2829
3130
|
<div class="panels">
|
|
2830
3131
|
|
|
@@ -3402,9 +3703,9 @@ in flight.</div>
|
|
|
3402
3703
|
<div class="title">
|
|
3403
3704
|
<h2><span class="status-dot dot-ok"></span> Divider</h2>
|
|
3404
3705
|
<div class="badges">
|
|
3405
|
-
<label for="c-
|
|
3706
|
+
<label for="c-9-components-divider-props" class="badge ok as-toggle">4 prop types</label>
|
|
3406
3707
|
|
|
3407
|
-
<label for="c-
|
|
3708
|
+
<label for="c-9-components-divider-stories" class="badge ok as-toggle">10 stories</label>
|
|
3408
3709
|
|
|
3409
3710
|
|
|
3410
3711
|
</div>
|
|
@@ -3427,10 +3728,10 @@ When omitted, Divider renders a single line.</span><span class="chip">example: &
|
|
|
3427
3728
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3428
3729
|
|
|
3429
3730
|
|
|
3430
|
-
<input id="c-
|
|
3731
|
+
<input id="c-9-components-divider-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3431
3732
|
|
|
3432
3733
|
|
|
3433
|
-
<input id="c-
|
|
3734
|
+
<input id="c-9-components-divider-props" class="tg tg-props" type="checkbox" hidden />
|
|
3434
3735
|
|
|
3435
3736
|
<div class="panels">
|
|
3436
3737
|
|
|
@@ -3733,9 +4034,9 @@ related controls or inline links without visual weight.</div>
|
|
|
3733
4034
|
<div class="title">
|
|
3734
4035
|
<h2><span class="status-dot dot-ok"></span> DropdownMenu.Root</h2>
|
|
3735
4036
|
<div class="badges">
|
|
3736
|
-
<label for="c-
|
|
4037
|
+
<label for="c-10-components-dropdownmenu-props" class="badge ok as-toggle">6 prop types</label>
|
|
3737
4038
|
|
|
3738
|
-
<label for="c-
|
|
4039
|
+
<label for="c-10-components-dropdownmenu-stories" class="badge ok as-toggle">7 stories</label>
|
|
3739
4040
|
|
|
3740
4041
|
|
|
3741
4042
|
</div>
|
|
@@ -3794,10 +4095,10 @@ import { DropdownMenu } from '@agentero/design-system/dropdown-menu';
|
|
|
3794
4095
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3795
4096
|
|
|
3796
4097
|
|
|
3797
|
-
<input id="c-
|
|
4098
|
+
<input id="c-10-components-dropdownmenu-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3798
4099
|
|
|
3799
4100
|
|
|
3800
|
-
<input id="c-
|
|
4101
|
+
<input id="c-10-components-dropdownmenu-props" class="tg tg-props" type="checkbox" hidden />
|
|
3801
4102
|
|
|
3802
4103
|
<div class="panels">
|
|
3803
4104
|
|
|
@@ -4200,9 +4501,9 @@ actions outright unless the user needs to see them and understand why.</div>
|
|
|
4200
4501
|
<div class="title">
|
|
4201
4502
|
<h2><span class="status-dot dot-ok"></span> HoverCard.Root</h2>
|
|
4202
4503
|
<div class="badges">
|
|
4203
|
-
<label for="c-
|
|
4504
|
+
<label for="c-11-components-hovercard-props" class="badge ok as-toggle">6 prop types</label>
|
|
4204
4505
|
|
|
4205
|
-
<label for="c-
|
|
4506
|
+
<label for="c-11-components-hovercard-stories" class="badge ok as-toggle">7 stories</label>
|
|
4206
4507
|
|
|
4207
4508
|
|
|
4208
4509
|
</div>
|
|
@@ -4234,10 +4535,10 @@ import { HoverCard } from '@agentero/design-system/hover-card';
|
|
|
4234
4535
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
4235
4536
|
|
|
4236
4537
|
|
|
4237
|
-
<input id="c-
|
|
4538
|
+
<input id="c-11-components-hovercard-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
4238
4539
|
|
|
4239
4540
|
|
|
4240
|
-
<input id="c-
|
|
4541
|
+
<input id="c-11-components-hovercard-props" class="tg tg-props" type="checkbox" hidden />
|
|
4241
4542
|
|
|
4242
4543
|
<div class="panels">
|
|
4243
4544
|
|
|
@@ -4484,9 +4785,9 @@ trigger-dense UIs where an instant preview reads as more responsive.</div>
|
|
|
4484
4785
|
<div class="title">
|
|
4485
4786
|
<h2><span class="status-dot dot-ok"></span> Input</h2>
|
|
4486
4787
|
<div class="badges">
|
|
4487
|
-
<label for="c-
|
|
4788
|
+
<label for="c-12-components-input-props" class="badge ok as-toggle">7 prop types</label>
|
|
4488
4789
|
|
|
4489
|
-
<label for="c-
|
|
4790
|
+
<label for="c-12-components-input-stories" class="badge ok as-toggle">9 stories</label>
|
|
4490
4791
|
|
|
4491
4792
|
|
|
4492
4793
|
</div>
|
|
@@ -4508,10 +4809,10 @@ assistive technology announces.</div>
|
|
|
4508
4809
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
4509
4810
|
|
|
4510
4811
|
|
|
4511
|
-
<input id="c-
|
|
4812
|
+
<input id="c-12-components-input-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
4512
4813
|
|
|
4513
4814
|
|
|
4514
|
-
<input id="c-
|
|
4815
|
+
<input id="c-12-components-input-props" class="tg tg-props" type="checkbox" hidden />
|
|
4515
4816
|
|
|
4516
4817
|
<div class="panels">
|
|
4517
4818
|
|
|
@@ -4723,9 +5024,9 @@ they cannot change.</div>
|
|
|
4723
5024
|
<div class="title">
|
|
4724
5025
|
<h2><span class="status-dot dot-ok"></span> Label</h2>
|
|
4725
5026
|
<div class="badges">
|
|
4726
|
-
<label for="c-
|
|
5027
|
+
<label for="c-13-components-label-props" class="badge ok as-toggle">3 prop types</label>
|
|
4727
5028
|
|
|
4728
|
-
<label for="c-
|
|
5029
|
+
<label for="c-13-components-label-stories" class="badge ok as-toggle">4 stories</label>
|
|
4729
5030
|
|
|
4730
5031
|
|
|
4731
5032
|
</div>
|
|
@@ -4745,10 +5046,10 @@ still has to carry `required` / `aria-required`.</div>
|
|
|
4745
5046
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
4746
5047
|
|
|
4747
5048
|
|
|
4748
|
-
<input id="c-
|
|
5049
|
+
<input id="c-13-components-label-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
4749
5050
|
|
|
4750
5051
|
|
|
4751
|
-
<input id="c-
|
|
5052
|
+
<input id="c-13-components-label-props" class="tg tg-props" type="checkbox" hidden />
|
|
4752
5053
|
|
|
4753
5054
|
<div class="panels">
|
|
4754
5055
|
|
|
@@ -4846,9 +5147,9 @@ dropped, so a mistake never takes the page down.</div>
|
|
|
4846
5147
|
<div class="title">
|
|
4847
5148
|
<h2><span class="status-dot dot-ok"></span> Loading</h2>
|
|
4848
5149
|
<div class="badges">
|
|
4849
|
-
<label for="c-
|
|
5150
|
+
<label for="c-14-components-loading-props" class="badge ok as-toggle">1 prop type</label>
|
|
4850
5151
|
|
|
4851
|
-
<label for="c-
|
|
5152
|
+
<label for="c-14-components-loading-stories" class="badge ok as-toggle">7 stories</label>
|
|
4852
5153
|
|
|
4853
5154
|
|
|
4854
5155
|
</div>
|
|
@@ -4865,10 +5166,10 @@ parent font size via `em`-based size variants (`sm`, `md`, `lg`).</div>
|
|
|
4865
5166
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
4866
5167
|
|
|
4867
5168
|
|
|
4868
|
-
<input id="c-
|
|
5169
|
+
<input id="c-14-components-loading-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
4869
5170
|
|
|
4870
5171
|
|
|
4871
|
-
<input id="c-
|
|
5172
|
+
<input id="c-14-components-loading-props" class="tg tg-props" type="checkbox" hidden />
|
|
4872
5173
|
|
|
4873
5174
|
<div class="panels">
|
|
4874
5175
|
|
|
@@ -5019,9 +5320,9 @@ against the dark background.</div>
|
|
|
5019
5320
|
<div class="title">
|
|
5020
5321
|
<h2><span class="status-dot dot-ok"></span> Modal.Root</h2>
|
|
5021
5322
|
<div class="badges">
|
|
5022
|
-
<label for="c-
|
|
5323
|
+
<label for="c-15-components-modal-props" class="badge ok as-toggle">5 prop types</label>
|
|
5023
5324
|
|
|
5024
|
-
<label for="c-
|
|
5325
|
+
<label for="c-15-components-modal-stories" class="badge ok as-toggle">6 stories</label>
|
|
5025
5326
|
|
|
5026
5327
|
|
|
5027
5328
|
</div>
|
|
@@ -5067,10 +5368,10 @@ import { Modal } from '@agentero/design-system/modal';
|
|
|
5067
5368
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
5068
5369
|
|
|
5069
5370
|
|
|
5070
|
-
<input id="c-
|
|
5371
|
+
<input id="c-15-components-modal-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
5071
5372
|
|
|
5072
5373
|
|
|
5073
|
-
<input id="c-
|
|
5374
|
+
<input id="c-15-components-modal-props" class="tg tg-props" type="checkbox" hidden />
|
|
5074
5375
|
|
|
5075
5376
|
<div class="panels">
|
|
5076
5377
|
|
|
@@ -5267,9 +5568,9 @@ announced as an `alertdialog`. Only the footer actions close it.</div>
|
|
|
5267
5568
|
<div class="title">
|
|
5268
5569
|
<h2><span class="status-dot dot-ok"></span> Pagination</h2>
|
|
5269
5570
|
<div class="badges">
|
|
5270
|
-
<label for="c-
|
|
5571
|
+
<label for="c-16-components-pagination-props" class="badge ok as-toggle">5 prop types</label>
|
|
5271
5572
|
|
|
5272
|
-
<label for="c-
|
|
5573
|
+
<label for="c-16-components-pagination-stories" class="badge ok as-toggle">7 stories</label>
|
|
5273
5574
|
|
|
5274
5575
|
|
|
5275
5576
|
</div>
|
|
@@ -5299,10 +5600,10 @@ const [page, setPage] = useState(1);
|
|
|
5299
5600
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
5300
5601
|
|
|
5301
5602
|
|
|
5302
|
-
<input id="c-
|
|
5603
|
+
<input id="c-16-components-pagination-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
5303
5604
|
|
|
5304
5605
|
|
|
5305
|
-
<input id="c-
|
|
5606
|
+
<input id="c-16-components-pagination-props" class="tg tg-props" type="checkbox" hidden />
|
|
5306
5607
|
|
|
5307
5608
|
<div class="panels">
|
|
5308
5609
|
|
|
@@ -5457,9 +5758,9 @@ entries summary follow along.</div>
|
|
|
5457
5758
|
<div class="title">
|
|
5458
5759
|
<h2><span class="status-dot dot-ok"></span> Popover.Root</h2>
|
|
5459
5760
|
<div class="badges">
|
|
5460
|
-
<label for="c-
|
|
5761
|
+
<label for="c-17-components-popover-props" class="badge ok as-toggle">5 prop types</label>
|
|
5461
5762
|
|
|
5462
|
-
<label for="c-
|
|
5763
|
+
<label for="c-17-components-popover-stories" class="badge ok as-toggle">5 stories</label>
|
|
5463
5764
|
|
|
5464
5765
|
|
|
5465
5766
|
</div>
|
|
@@ -5488,10 +5789,10 @@ import { Popover } from '@agentero/design-system/popover';
|
|
|
5488
5789
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
5489
5790
|
|
|
5490
5791
|
|
|
5491
|
-
<input id="c-
|
|
5792
|
+
<input id="c-17-components-popover-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
5492
5793
|
|
|
5493
5794
|
|
|
5494
|
-
<input id="c-
|
|
5795
|
+
<input id="c-17-components-popover-props" class="tg tg-props" type="checkbox" hidden />
|
|
5495
5796
|
|
|
5496
5797
|
<div class="panels">
|
|
5497
5798
|
|
|
@@ -5525,7 +5826,7 @@ open?: boolean</code></pre>
|
|
|
5525
5826
|
<div class="row">
|
|
5526
5827
|
<span class="ex-name">Imports</span>
|
|
5527
5828
|
</div>
|
|
5528
|
-
<pre><code>import { Button, Popover } from "@agentero/design-system";</code></pre>
|
|
5829
|
+
<pre><code>import { Button, Modal, Popover } from "@agentero/design-system";</code></pre>
|
|
5529
5830
|
</div>
|
|
5530
5831
|
|
|
5531
5832
|
|
|
@@ -5627,6 +5928,50 @@ useful when the visual anchor differs from the toggle button.</div>
|
|
|
5627
5928
|
<p className="text-sm text-text-default-base-primary">Positioned against the anchor</p>
|
|
5628
5929
|
</Popover.Content>
|
|
5629
5930
|
</Popover.Root>
|
|
5931
|
+
);</code></pre>
|
|
5932
|
+
</div>
|
|
5933
|
+
<div class="note ok">
|
|
5934
|
+
<div class="row">
|
|
5935
|
+
<span class="ex-name">Modal From Inside Popover</span>
|
|
5936
|
+
<span class="badge ok">story ok</span>
|
|
5937
|
+
</div>
|
|
5938
|
+
<div>Modal opened from inside a Popover paints above it</div>
|
|
5939
|
+
<div class="hint">A Modal opened from a button inside the Popover. Both share
|
|
5940
|
+
`--z-index-top-layer`, so the modal opens last and paints over the popover
|
|
5941
|
+
while the overlay dims it. The popover stays mounted underneath, which keeps
|
|
5942
|
+
focus returning to its trigger once the modal closes.</div>
|
|
5943
|
+
<pre><code>const ModalFromInsidePopover = () => (
|
|
5944
|
+
<Popover.Root>
|
|
5945
|
+
<Popover.Trigger asChild>
|
|
5946
|
+
<Button variant="secondary">Renewal 2026</Button>
|
|
5947
|
+
</Popover.Trigger>
|
|
5948
|
+
<Popover.Content align="start">
|
|
5949
|
+
<div className="flex flex-col gap-3">
|
|
5950
|
+
<p className="text-sm text-text-default-base-primary">
|
|
5951
|
+
Applied to 12 contracts across 3 carriers.
|
|
5952
|
+
</p>
|
|
5953
|
+
<Modal.Root>
|
|
5954
|
+
<Modal.Trigger asChild>
|
|
5955
|
+
<Button variant="secondary" size="sm">
|
|
5956
|
+
Delete tag
|
|
5957
|
+
</Button>
|
|
5958
|
+
</Modal.Trigger>
|
|
5959
|
+
<Modal.Content>
|
|
5960
|
+
<Modal.Title>Delete this tag?</Modal.Title>
|
|
5961
|
+
<Modal.Description>
|
|
5962
|
+
It will be removed from the 12 contracts that carry it.
|
|
5963
|
+
</Modal.Description>
|
|
5964
|
+
<Modal.Footer>
|
|
5965
|
+
<Modal.Close asChild>
|
|
5966
|
+
<Button variant="ghost">Cancel</Button>
|
|
5967
|
+
</Modal.Close>
|
|
5968
|
+
<Button variant="primary">Delete</Button>
|
|
5969
|
+
</Modal.Footer>
|
|
5970
|
+
</Modal.Content>
|
|
5971
|
+
</Modal.Root>
|
|
5972
|
+
</div>
|
|
5973
|
+
</Popover.Content>
|
|
5974
|
+
</Popover.Root>
|
|
5630
5975
|
);</code></pre>
|
|
5631
5976
|
</div>
|
|
5632
5977
|
</div>
|
|
@@ -5646,9 +5991,9 @@ useful when the visual anchor differs from the toggle button.</div>
|
|
|
5646
5991
|
<div class="title">
|
|
5647
5992
|
<h2><span class="status-dot dot-ok"></span> Progress</h2>
|
|
5648
5993
|
<div class="badges">
|
|
5649
|
-
<label for="c-
|
|
5994
|
+
<label for="c-18-components-progress-props" class="badge ok as-toggle">4 prop types</label>
|
|
5650
5995
|
|
|
5651
|
-
<label for="c-
|
|
5996
|
+
<label for="c-18-components-progress-stories" class="badge ok as-toggle">4 stories</label>
|
|
5652
5997
|
|
|
5653
5998
|
|
|
5654
5999
|
</div>
|
|
@@ -5667,10 +6012,10 @@ with `currentColor`, so recolor it with a plain text class — e.g.
|
|
|
5667
6012
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
5668
6013
|
|
|
5669
6014
|
|
|
5670
|
-
<input id="c-
|
|
6015
|
+
<input id="c-18-components-progress-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
5671
6016
|
|
|
5672
6017
|
|
|
5673
|
-
<input id="c-
|
|
6018
|
+
<input id="c-18-components-progress-props" class="tg tg-props" type="checkbox" hidden />
|
|
5674
6019
|
|
|
5675
6020
|
<div class="panels">
|
|
5676
6021
|
|
|
@@ -5789,7 +6134,7 @@ percentage: number</code></pre>
|
|
|
5789
6134
|
<div class="badges">
|
|
5790
6135
|
|
|
5791
6136
|
|
|
5792
|
-
<label for="c-
|
|
6137
|
+
<label for="c-19-components-skeleton-stories" class="badge ok as-toggle">4 stories</label>
|
|
5793
6138
|
|
|
5794
6139
|
|
|
5795
6140
|
</div>
|
|
@@ -5806,7 +6151,7 @@ shape it with Tailwind classes to mirror the content it stands in for.</div>
|
|
|
5806
6151
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
5807
6152
|
|
|
5808
6153
|
|
|
5809
|
-
<input id="c-
|
|
6154
|
+
<input id="c-19-components-skeleton-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
5810
6155
|
|
|
5811
6156
|
|
|
5812
6157
|
|
|
@@ -5902,9 +6247,9 @@ shape it with Tailwind classes to mirror the content it stands in for.</div>
|
|
|
5902
6247
|
<div class="title">
|
|
5903
6248
|
<h2><span class="status-dot dot-ok"></span> Switch</h2>
|
|
5904
6249
|
<div class="badges">
|
|
5905
|
-
<label for="c-
|
|
6250
|
+
<label for="c-20-components-switch-props" class="badge ok as-toggle">8 prop types</label>
|
|
5906
6251
|
|
|
5907
|
-
<label for="c-
|
|
6252
|
+
<label for="c-20-components-switch-stories" class="badge ok as-toggle">7 stories</label>
|
|
5908
6253
|
|
|
5909
6254
|
|
|
5910
6255
|
</div>
|
|
@@ -5920,10 +6265,10 @@ a Checkbox for a single boolean that applies instantly, and pair it with a
|
|
|
5920
6265
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
5921
6266
|
|
|
5922
6267
|
|
|
5923
|
-
<input id="c-
|
|
6268
|
+
<input id="c-20-components-switch-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
5924
6269
|
|
|
5925
6270
|
|
|
5926
|
-
<input id="c-
|
|
6271
|
+
<input id="c-20-components-switch-props" class="tg tg-props" type="checkbox" hidden />
|
|
5927
6272
|
|
|
5928
6273
|
<div class="panels">
|
|
5929
6274
|
|
|
@@ -6104,9 +6449,9 @@ size?: "sm" | "md"</code></pre>
|
|
|
6104
6449
|
<div class="title">
|
|
6105
6450
|
<h2><span class="status-dot dot-ok"></span> Table.Root</h2>
|
|
6106
6451
|
<div class="badges">
|
|
6107
|
-
<label for="c-
|
|
6452
|
+
<label for="c-21-components-table-props" class="badge ok as-toggle">6 prop types</label>
|
|
6108
6453
|
|
|
6109
|
-
<label for="c-
|
|
6454
|
+
<label for="c-21-components-table-stories" class="badge ok as-toggle">9 stories</label>
|
|
6110
6455
|
|
|
6111
6456
|
|
|
6112
6457
|
</div>
|
|
@@ -6137,10 +6482,10 @@ import { Table } from '@agentero/design-system/table';
|
|
|
6137
6482
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
6138
6483
|
|
|
6139
6484
|
|
|
6140
|
-
<input id="c-
|
|
6485
|
+
<input id="c-21-components-table-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
6141
6486
|
|
|
6142
6487
|
|
|
6143
|
-
<input id="c-
|
|
6488
|
+
<input id="c-21-components-table-props" class="tg tg-props" type="checkbox" hidden />
|
|
6144
6489
|
|
|
6145
6490
|
<div class="panels">
|
|
6146
6491
|
|
|
@@ -6335,9 +6680,9 @@ import { Fragment } from "react";</code></pre>
|
|
|
6335
6680
|
<div class="title">
|
|
6336
6681
|
<h2><span class="status-dot dot-ok"></span> Tabs.Root</h2>
|
|
6337
6682
|
<div class="badges">
|
|
6338
|
-
<label for="c-
|
|
6683
|
+
<label for="c-22-components-tabs-props" class="badge ok as-toggle">9 prop types</label>
|
|
6339
6684
|
|
|
6340
|
-
<label for="c-
|
|
6685
|
+
<label for="c-22-components-tabs-stories" class="badge ok as-toggle">8 stories</label>
|
|
6341
6686
|
|
|
6342
6687
|
|
|
6343
6688
|
</div>
|
|
@@ -6368,10 +6713,10 @@ import { Tabs } from '@agentero/design-system/tabs';
|
|
|
6368
6713
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
6369
6714
|
|
|
6370
6715
|
|
|
6371
|
-
<input id="c-
|
|
6716
|
+
<input id="c-22-components-tabs-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
6372
6717
|
|
|
6373
6718
|
|
|
6374
|
-
<input id="c-
|
|
6719
|
+
<input id="c-22-components-tabs-props" class="tg tg-props" type="checkbox" hidden />
|
|
6375
6720
|
|
|
6376
6721
|
<div class="panels">
|
|
6377
6722
|
|
|
@@ -6592,9 +6937,9 @@ tablist role is announced.</div>
|
|
|
6592
6937
|
<div class="title">
|
|
6593
6938
|
<h2><span class="status-dot dot-ok"></span> Tag</h2>
|
|
6594
6939
|
<div class="badges">
|
|
6595
|
-
<label for="c-
|
|
6940
|
+
<label for="c-23-components-tag-props" class="badge ok as-toggle">8 prop types</label>
|
|
6596
6941
|
|
|
6597
|
-
<label for="c-
|
|
6942
|
+
<label for="c-23-components-tag-stories" class="badge ok as-toggle">12 stories</label>
|
|
6598
6943
|
|
|
6599
6944
|
|
|
6600
6945
|
</div>
|
|
@@ -6613,10 +6958,10 @@ it an interactive link or button, which adds the pointer cursor and hover fill.<
|
|
|
6613
6958
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
6614
6959
|
|
|
6615
6960
|
|
|
6616
|
-
<input id="c-
|
|
6961
|
+
<input id="c-23-components-tag-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
6617
6962
|
|
|
6618
6963
|
|
|
6619
|
-
<input id="c-
|
|
6964
|
+
<input id="c-23-components-tag-props" class="tg tg-props" type="checkbox" hidden />
|
|
6620
6965
|
|
|
6621
6966
|
<div class="panels">
|
|
6622
6967
|
|
|
@@ -7041,9 +7386,9 @@ leading + trailing icons, and icon-only.</div>
|
|
|
7041
7386
|
<div class="title">
|
|
7042
7387
|
<h2><span class="status-dot dot-ok"></span> Toast</h2>
|
|
7043
7388
|
<div class="badges">
|
|
7044
|
-
<label for="c-
|
|
7389
|
+
<label for="c-24-components-toast-props" class="badge ok as-toggle">11 prop types</label>
|
|
7045
7390
|
|
|
7046
|
-
<label for="c-
|
|
7391
|
+
<label for="c-24-components-toast-stories" class="badge ok as-toggle">11 stories</label>
|
|
7047
7392
|
|
|
7048
7393
|
|
|
7049
7394
|
</div>
|
|
@@ -7062,10 +7407,10 @@ common feedback patterns.</div>
|
|
|
7062
7407
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
7063
7408
|
|
|
7064
7409
|
|
|
7065
|
-
<input id="c-
|
|
7410
|
+
<input id="c-24-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
7066
7411
|
|
|
7067
7412
|
|
|
7068
|
-
<input id="c-
|
|
7413
|
+
<input id="c-24-components-toast-props" class="tg tg-props" type="checkbox" hidden />
|
|
7069
7414
|
|
|
7070
7415
|
<div class="panels">
|
|
7071
7416
|
|
|
@@ -7494,9 +7839,9 @@ action (e.g., a sync icon for a sync-in-progress toast).</div>
|
|
|
7494
7839
|
<div class="title">
|
|
7495
7840
|
<h2><span class="status-dot dot-ok"></span> Tooltip</h2>
|
|
7496
7841
|
<div class="badges">
|
|
7497
|
-
<label for="c-
|
|
7842
|
+
<label for="c-25-components-tooltip-props" class="badge ok as-toggle">12 prop types</label>
|
|
7498
7843
|
|
|
7499
|
-
<label for="c-
|
|
7844
|
+
<label for="c-25-components-tooltip-stories" class="badge ok as-toggle">5 stories</label>
|
|
7500
7845
|
|
|
7501
7846
|
|
|
7502
7847
|
</div>
|
|
@@ -7515,10 +7860,10 @@ on hover or focus.</div>
|
|
|
7515
7860
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
7516
7861
|
|
|
7517
7862
|
|
|
7518
|
-
<input id="c-
|
|
7863
|
+
<input id="c-25-components-tooltip-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
7519
7864
|
|
|
7520
7865
|
|
|
7521
|
-
<input id="c-
|
|
7866
|
+
<input id="c-25-components-tooltip-props" class="tg tg-props" type="checkbox" hidden />
|
|
7522
7867
|
|
|
7523
7868
|
<div class="panels">
|
|
7524
7869
|
|
|
@@ -7690,9 +8035,9 @@ sideOffset?: number = 4</code></pre>
|
|
|
7690
8035
|
<div class="title">
|
|
7691
8036
|
<h2><span class="status-dot dot-ok"></span> ValidationList</h2>
|
|
7692
8037
|
<div class="badges">
|
|
7693
|
-
<label for="c-
|
|
8038
|
+
<label for="c-26-components-validationlist-props" class="badge ok as-toggle">2 prop types</label>
|
|
7694
8039
|
|
|
7695
|
-
<label for="c-
|
|
8040
|
+
<label for="c-26-components-validationlist-stories" class="badge ok as-toggle">4 stories</label>
|
|
7696
8041
|
|
|
7697
8042
|
|
|
7698
8043
|
</div>
|
|
@@ -7713,10 +8058,10 @@ your form validation; it does not own the input or block submission.</div>
|
|
|
7713
8058
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
7714
8059
|
|
|
7715
8060
|
|
|
7716
|
-
<input id="c-
|
|
8061
|
+
<input id="c-26-components-validationlist-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
7717
8062
|
|
|
7718
8063
|
|
|
7719
|
-
<input id="c-
|
|
8064
|
+
<input id="c-26-components-validationlist-props" class="tg tg-props" type="checkbox" hidden />
|
|
7720
8065
|
|
|
7721
8066
|
<div class="panels">
|
|
7722
8067
|
|