@agentero/design-system 0.26.3 → 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 +383 -82
- package/mcp/manifests/components.json +328 -14
- 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/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">
|
|
@@ -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">4 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
|
|
|
@@ -5646,9 +5947,9 @@ useful when the visual anchor differs from the toggle button.</div>
|
|
|
5646
5947
|
<div class="title">
|
|
5647
5948
|
<h2><span class="status-dot dot-ok"></span> Progress</h2>
|
|
5648
5949
|
<div class="badges">
|
|
5649
|
-
<label for="c-
|
|
5950
|
+
<label for="c-18-components-progress-props" class="badge ok as-toggle">4 prop types</label>
|
|
5650
5951
|
|
|
5651
|
-
<label for="c-
|
|
5952
|
+
<label for="c-18-components-progress-stories" class="badge ok as-toggle">4 stories</label>
|
|
5652
5953
|
|
|
5653
5954
|
|
|
5654
5955
|
</div>
|
|
@@ -5667,10 +5968,10 @@ with `currentColor`, so recolor it with a plain text class — e.g.
|
|
|
5667
5968
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
5668
5969
|
|
|
5669
5970
|
|
|
5670
|
-
<input id="c-
|
|
5971
|
+
<input id="c-18-components-progress-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
5671
5972
|
|
|
5672
5973
|
|
|
5673
|
-
<input id="c-
|
|
5974
|
+
<input id="c-18-components-progress-props" class="tg tg-props" type="checkbox" hidden />
|
|
5674
5975
|
|
|
5675
5976
|
<div class="panels">
|
|
5676
5977
|
|
|
@@ -5789,7 +6090,7 @@ percentage: number</code></pre>
|
|
|
5789
6090
|
<div class="badges">
|
|
5790
6091
|
|
|
5791
6092
|
|
|
5792
|
-
<label for="c-
|
|
6093
|
+
<label for="c-19-components-skeleton-stories" class="badge ok as-toggle">4 stories</label>
|
|
5793
6094
|
|
|
5794
6095
|
|
|
5795
6096
|
</div>
|
|
@@ -5806,7 +6107,7 @@ shape it with Tailwind classes to mirror the content it stands in for.</div>
|
|
|
5806
6107
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
5807
6108
|
|
|
5808
6109
|
|
|
5809
|
-
<input id="c-
|
|
6110
|
+
<input id="c-19-components-skeleton-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
5810
6111
|
|
|
5811
6112
|
|
|
5812
6113
|
|
|
@@ -5902,9 +6203,9 @@ shape it with Tailwind classes to mirror the content it stands in for.</div>
|
|
|
5902
6203
|
<div class="title">
|
|
5903
6204
|
<h2><span class="status-dot dot-ok"></span> Switch</h2>
|
|
5904
6205
|
<div class="badges">
|
|
5905
|
-
<label for="c-
|
|
6206
|
+
<label for="c-20-components-switch-props" class="badge ok as-toggle">8 prop types</label>
|
|
5906
6207
|
|
|
5907
|
-
<label for="c-
|
|
6208
|
+
<label for="c-20-components-switch-stories" class="badge ok as-toggle">7 stories</label>
|
|
5908
6209
|
|
|
5909
6210
|
|
|
5910
6211
|
</div>
|
|
@@ -5920,10 +6221,10 @@ a Checkbox for a single boolean that applies instantly, and pair it with a
|
|
|
5920
6221
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
5921
6222
|
|
|
5922
6223
|
|
|
5923
|
-
<input id="c-
|
|
6224
|
+
<input id="c-20-components-switch-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
5924
6225
|
|
|
5925
6226
|
|
|
5926
|
-
<input id="c-
|
|
6227
|
+
<input id="c-20-components-switch-props" class="tg tg-props" type="checkbox" hidden />
|
|
5927
6228
|
|
|
5928
6229
|
<div class="panels">
|
|
5929
6230
|
|
|
@@ -6104,9 +6405,9 @@ size?: "sm" | "md"</code></pre>
|
|
|
6104
6405
|
<div class="title">
|
|
6105
6406
|
<h2><span class="status-dot dot-ok"></span> Table.Root</h2>
|
|
6106
6407
|
<div class="badges">
|
|
6107
|
-
<label for="c-
|
|
6408
|
+
<label for="c-21-components-table-props" class="badge ok as-toggle">6 prop types</label>
|
|
6108
6409
|
|
|
6109
|
-
<label for="c-
|
|
6410
|
+
<label for="c-21-components-table-stories" class="badge ok as-toggle">9 stories</label>
|
|
6110
6411
|
|
|
6111
6412
|
|
|
6112
6413
|
</div>
|
|
@@ -6137,10 +6438,10 @@ import { Table } from '@agentero/design-system/table';
|
|
|
6137
6438
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
6138
6439
|
|
|
6139
6440
|
|
|
6140
|
-
<input id="c-
|
|
6441
|
+
<input id="c-21-components-table-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
6141
6442
|
|
|
6142
6443
|
|
|
6143
|
-
<input id="c-
|
|
6444
|
+
<input id="c-21-components-table-props" class="tg tg-props" type="checkbox" hidden />
|
|
6144
6445
|
|
|
6145
6446
|
<div class="panels">
|
|
6146
6447
|
|
|
@@ -6335,9 +6636,9 @@ import { Fragment } from "react";</code></pre>
|
|
|
6335
6636
|
<div class="title">
|
|
6336
6637
|
<h2><span class="status-dot dot-ok"></span> Tabs.Root</h2>
|
|
6337
6638
|
<div class="badges">
|
|
6338
|
-
<label for="c-
|
|
6639
|
+
<label for="c-22-components-tabs-props" class="badge ok as-toggle">9 prop types</label>
|
|
6339
6640
|
|
|
6340
|
-
<label for="c-
|
|
6641
|
+
<label for="c-22-components-tabs-stories" class="badge ok as-toggle">8 stories</label>
|
|
6341
6642
|
|
|
6342
6643
|
|
|
6343
6644
|
</div>
|
|
@@ -6368,10 +6669,10 @@ import { Tabs } from '@agentero/design-system/tabs';
|
|
|
6368
6669
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
6369
6670
|
|
|
6370
6671
|
|
|
6371
|
-
<input id="c-
|
|
6672
|
+
<input id="c-22-components-tabs-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
6372
6673
|
|
|
6373
6674
|
|
|
6374
|
-
<input id="c-
|
|
6675
|
+
<input id="c-22-components-tabs-props" class="tg tg-props" type="checkbox" hidden />
|
|
6375
6676
|
|
|
6376
6677
|
<div class="panels">
|
|
6377
6678
|
|
|
@@ -6592,9 +6893,9 @@ tablist role is announced.</div>
|
|
|
6592
6893
|
<div class="title">
|
|
6593
6894
|
<h2><span class="status-dot dot-ok"></span> Tag</h2>
|
|
6594
6895
|
<div class="badges">
|
|
6595
|
-
<label for="c-
|
|
6896
|
+
<label for="c-23-components-tag-props" class="badge ok as-toggle">8 prop types</label>
|
|
6596
6897
|
|
|
6597
|
-
<label for="c-
|
|
6898
|
+
<label for="c-23-components-tag-stories" class="badge ok as-toggle">12 stories</label>
|
|
6598
6899
|
|
|
6599
6900
|
|
|
6600
6901
|
</div>
|
|
@@ -6613,10 +6914,10 @@ it an interactive link or button, which adds the pointer cursor and hover fill.<
|
|
|
6613
6914
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
6614
6915
|
|
|
6615
6916
|
|
|
6616
|
-
<input id="c-
|
|
6917
|
+
<input id="c-23-components-tag-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
6617
6918
|
|
|
6618
6919
|
|
|
6619
|
-
<input id="c-
|
|
6920
|
+
<input id="c-23-components-tag-props" class="tg tg-props" type="checkbox" hidden />
|
|
6620
6921
|
|
|
6621
6922
|
<div class="panels">
|
|
6622
6923
|
|
|
@@ -7041,9 +7342,9 @@ leading + trailing icons, and icon-only.</div>
|
|
|
7041
7342
|
<div class="title">
|
|
7042
7343
|
<h2><span class="status-dot dot-ok"></span> Toast</h2>
|
|
7043
7344
|
<div class="badges">
|
|
7044
|
-
<label for="c-
|
|
7345
|
+
<label for="c-24-components-toast-props" class="badge ok as-toggle">11 prop types</label>
|
|
7045
7346
|
|
|
7046
|
-
<label for="c-
|
|
7347
|
+
<label for="c-24-components-toast-stories" class="badge ok as-toggle">11 stories</label>
|
|
7047
7348
|
|
|
7048
7349
|
|
|
7049
7350
|
</div>
|
|
@@ -7062,10 +7363,10 @@ common feedback patterns.</div>
|
|
|
7062
7363
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
7063
7364
|
|
|
7064
7365
|
|
|
7065
|
-
<input id="c-
|
|
7366
|
+
<input id="c-24-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
7066
7367
|
|
|
7067
7368
|
|
|
7068
|
-
<input id="c-
|
|
7369
|
+
<input id="c-24-components-toast-props" class="tg tg-props" type="checkbox" hidden />
|
|
7069
7370
|
|
|
7070
7371
|
<div class="panels">
|
|
7071
7372
|
|
|
@@ -7494,9 +7795,9 @@ action (e.g., a sync icon for a sync-in-progress toast).</div>
|
|
|
7494
7795
|
<div class="title">
|
|
7495
7796
|
<h2><span class="status-dot dot-ok"></span> Tooltip</h2>
|
|
7496
7797
|
<div class="badges">
|
|
7497
|
-
<label for="c-
|
|
7798
|
+
<label for="c-25-components-tooltip-props" class="badge ok as-toggle">12 prop types</label>
|
|
7498
7799
|
|
|
7499
|
-
<label for="c-
|
|
7800
|
+
<label for="c-25-components-tooltip-stories" class="badge ok as-toggle">5 stories</label>
|
|
7500
7801
|
|
|
7501
7802
|
|
|
7502
7803
|
</div>
|
|
@@ -7515,10 +7816,10 @@ on hover or focus.</div>
|
|
|
7515
7816
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
7516
7817
|
|
|
7517
7818
|
|
|
7518
|
-
<input id="c-
|
|
7819
|
+
<input id="c-25-components-tooltip-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
7519
7820
|
|
|
7520
7821
|
|
|
7521
|
-
<input id="c-
|
|
7822
|
+
<input id="c-25-components-tooltip-props" class="tg tg-props" type="checkbox" hidden />
|
|
7522
7823
|
|
|
7523
7824
|
<div class="panels">
|
|
7524
7825
|
|
|
@@ -7690,9 +7991,9 @@ sideOffset?: number = 4</code></pre>
|
|
|
7690
7991
|
<div class="title">
|
|
7691
7992
|
<h2><span class="status-dot dot-ok"></span> ValidationList</h2>
|
|
7692
7993
|
<div class="badges">
|
|
7693
|
-
<label for="c-
|
|
7994
|
+
<label for="c-26-components-validationlist-props" class="badge ok as-toggle">2 prop types</label>
|
|
7694
7995
|
|
|
7695
|
-
<label for="c-
|
|
7996
|
+
<label for="c-26-components-validationlist-stories" class="badge ok as-toggle">4 stories</label>
|
|
7696
7997
|
|
|
7697
7998
|
|
|
7698
7999
|
</div>
|
|
@@ -7713,10 +8014,10 @@ your form validation; it does not own the input or block submission.</div>
|
|
|
7713
8014
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
7714
8015
|
|
|
7715
8016
|
|
|
7716
|
-
<input id="c-
|
|
8017
|
+
<input id="c-26-components-validationlist-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
7717
8018
|
|
|
7718
8019
|
|
|
7719
|
-
<input id="c-
|
|
8020
|
+
<input id="c-26-components-validationlist-props" class="tg tg-props" type="checkbox" hidden />
|
|
7720
8021
|
|
|
7721
8022
|
<div class="panels">
|
|
7722
8023
|
|