@supersoniks/concorde 5.0.3 → 5.0.5
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/.agents/skills/concorde-component-docs/SKILL.md +194 -0
- package/.agents/skills/concorde-component-docs/template.md +45 -0
- package/ai/cursor/rules/concorde-theme.mdc +1 -1
- package/ai/cursor/rules/concorde.mdc +1 -1
- package/ai/skills/concorde/SKILL.md +1 -1
- package/ai/skills/concorde-theme/SKILL.md +21 -10
- package/build-infos.json +1 -1
- package/concorde-core.bundle.js +515 -521
- package/concorde-core.es.js +5151 -5056
- package/dist/concorde-core.bundle.js +515 -521
- package/dist/concorde-core.es.js +5151 -5056
- package/dist/docs-mock-api-sw.js +2 -0
- package/dist/docs-mock-api-sw.js.map +2 -2
- package/docs/assets/index-CD4WyL6o.css +1 -0
- package/docs/assets/{index-BnK6OS7w.js → index-wVZpLVYW.js} +815 -808
- package/docs/crawl/core/components/ui/alert/alert.html +76 -5
- package/docs/crawl/core/components/ui/alert-messages/alert-messages.html +113 -5
- package/docs/crawl/core/components/ui/badge/badge.html +57 -8
- package/docs/crawl/core/components/ui/captcha/captcha.html +90 -8
- package/docs/crawl/core/components/ui/card/card.html +122 -12
- package/docs/crawl/core/components/ui/divider/divider.html +117 -31
- package/docs/crawl/core/components/ui/form/fieldset/fieldset.html +232 -101
- package/docs/crawl/core/components/ui/form/form-actions/form-actions.html +95 -52
- package/docs/crawl/core/components/ui/form/form-layout/form-layout.html +97 -38
- package/docs/crawl/core/components/ui/group/group.html +60 -38
- package/docs/crawl/core/components/ui/icon/icon.html +136 -47
- package/docs/crawl/core/components/ui/image/image.html +118 -6
- package/docs/crawl/core/components/ui/link/link.html +65 -7
- package/docs/crawl/core/components/ui/loader/loader.html +97 -23
- package/docs/crawl/core/components/ui/menu/menu.html +162 -90
- package/docs/crawl/core/components/ui/modal/modal.html +275 -50
- package/docs/crawl/core/components/ui/pop/pop.html +242 -124
- package/docs/crawl/core/components/ui/progress/progress.html +103 -30
- package/docs/crawl/core/components/ui/table/table.html +303 -171
- package/docs/crawl/core/components/ui/theme/theme.html +131 -0
- package/docs/crawl/core/components/ui/toast/toast.html +170 -59
- package/docs/crawl/core/components/ui/tooltip/tooltip.html +90 -29
- package/docs/crawl/docs/_decorators/ancestor-attribute.html +3 -2
- package/docs/crawl/docs/_getting-started/start.html +1 -1
- package/docs/crawl/docs/_getting-started/theming.html +311 -63
- package/docs/crawl/hubs/form-components.html +71 -49
- package/docs/crawl/index.html +7 -6
- package/docs/docs-mock-api-sw.js +2 -0
- package/docs/docs-mock-api-sw.js.map +2 -2
- package/docs/index.html +6 -4
- package/docs/llms-full.txt +1468 -405
- package/docs/llms.txt +23 -30
- package/docs/sitemap.xml +3 -0
- package/docs/src/core/components/ui/alert/alert.md +21 -2
- package/docs/src/core/components/ui/alert-messages/alert-messages.md +85 -0
- package/docs/src/core/components/ui/badge/badge.md +19 -6
- package/docs/src/core/components/ui/captcha/captcha.md +65 -6
- package/docs/src/core/components/ui/card/card.md +73 -10
- package/docs/src/core/components/ui/divider/divider.md +107 -13
- package/docs/src/core/components/ui/form/fieldset/fieldset.md +175 -99
- package/docs/src/core/components/ui/form/form-actions/form-actions.md +75 -52
- package/docs/src/core/components/ui/form/form-layout/form-layout.md +109 -34
- package/docs/src/core/components/ui/group/group.md +36 -36
- package/docs/src/core/components/ui/icon/icon.md +132 -43
- package/docs/src/core/components/ui/image/image.md +35 -3
- package/docs/src/core/components/ui/link/link.md +43 -5
- package/docs/src/core/components/ui/loader/loader.md +79 -22
- package/docs/src/core/components/ui/menu/menu.md +133 -92
- package/docs/src/core/components/ui/modal/modal.md +163 -47
- package/docs/src/core/components/ui/pop/pop.md +217 -123
- package/docs/src/core/components/ui/progress/progress.md +76 -30
- package/docs/src/core/components/ui/table/table.md +147 -171
- package/docs/src/core/components/ui/theme/theme.md +122 -0
- package/docs/src/core/components/ui/toast/toast.md +108 -58
- package/docs/src/core/components/ui/tooltip/tooltip.md +68 -26
- package/docs/src/docs/_decorators/ancestor-attribute.md +3 -2
- package/docs/src/docs/_getting-started/start.md +1 -1
- package/docs/src/docs/_getting-started/theming.md +223 -61
- package/docs/src/docs/search/docs-search.json +2504 -399
- package/docs/src/tsconfig.json +18 -0
- package/index.html +4 -2
- package/package.json +7 -1
- package/public/docs-mock-api-sw.js +2 -0
- package/public/docs-mock-api-sw.js.map +2 -2
- package/src/core/components/ui/_css/align.ts +1 -0
- package/src/core/components/ui/_css/type.ts +86 -8
- package/src/core/components/ui/_i18n/ui-aria-labels.ts +8 -0
- package/src/core/components/ui/alert/alert.md +21 -2
- package/src/core/components/ui/alert-messages/alert-messages.md +85 -0
- package/src/core/components/ui/badge/badge.md +19 -6
- package/src/core/components/ui/badge/badge.ts +8 -9
- package/src/core/components/ui/button/button.ts +5 -15
- package/src/core/components/ui/captcha/captcha.md +65 -6
- package/src/core/components/ui/card/card.md +73 -10
- package/src/core/components/ui/card/card.ts +24 -22
- package/src/core/components/ui/divider/divider.md +107 -13
- package/src/core/components/ui/divider/divider.ts +40 -33
- package/src/core/components/ui/form/fieldset/fieldset.md +175 -99
- package/src/core/components/ui/form/fieldset/fieldset.ts +15 -28
- package/src/core/components/ui/form/fieldset/legend.ts +13 -13
- package/src/core/components/ui/form/form-actions/form-actions.md +75 -52
- package/src/core/components/ui/form/form-actions/form-actions.ts +7 -5
- package/src/core/components/ui/form/form-layout/form-layout.md +109 -34
- package/src/core/components/ui/form/form-layout/form-layout.ts +27 -24
- package/src/core/components/ui/form/textarea/textarea.ts +4 -3
- package/src/core/components/ui/group/group.md +36 -36
- package/src/core/components/ui/group/group.ts +5 -10
- package/src/core/components/ui/icon/icon.md +132 -43
- package/src/core/components/ui/image/image.md +35 -3
- package/src/core/components/ui/link/link.md +43 -5
- package/src/core/components/ui/loader/loader.md +79 -22
- package/src/core/components/ui/loader/loader.ts +67 -27
- package/src/core/components/ui/loader/styles/fixed.ts +6 -11
- package/src/core/components/ui/menu/menu.md +133 -92
- package/src/core/components/ui/menu/menu.ts +53 -58
- package/src/core/components/ui/modal/modal.md +163 -47
- package/src/core/components/ui/modal/modal.ts +2 -4
- package/src/core/components/ui/pop/pop.md +217 -123
- package/src/core/components/ui/pop/pop.ts +0 -1
- package/src/core/components/ui/progress/progress.md +76 -30
- package/src/core/components/ui/progress/progress.ts +25 -56
- package/src/core/components/ui/table/table-caption.ts +2 -2
- package/src/core/components/ui/table/table-tbody.ts +3 -3
- package/src/core/components/ui/table/table-td.ts +23 -18
- package/src/core/components/ui/table/table-th.ts +8 -8
- package/src/core/components/ui/table/table-tr.ts +4 -4
- package/src/core/components/ui/table/table.md +147 -171
- package/src/core/components/ui/table/table.ts +20 -19
- package/src/core/components/ui/theme/theme-collection/auto.ts +15 -0
- package/src/core/components/ui/theme/theme-collection/core-variables.ts +8 -31
- package/src/core/components/ui/theme/theme-collection/dark.ts +1 -7
- package/src/core/components/ui/theme/theme-collection/light.ts +30 -26
- package/src/core/components/ui/theme/theme.md +122 -0
- package/src/core/components/ui/theme/theme.ts +30 -7
- package/src/core/components/ui/toast/toast-item.ts +6 -9
- package/src/core/components/ui/toast/toast.md +108 -58
- package/src/core/components/ui/toast/types.ts +1 -1
- package/src/core/components/ui/tooltip/tooltip.md +68 -26
- package/src/core/decorators/subscriber/ancestorAttribute.spec.ts +26 -0
- package/src/core/decorators/subscriber/ancestorAttribute.ts +3 -4
- package/src/core/utils/AncestorAttributeObserver.ts +183 -70
- package/src/docs/_decorators/ancestor-attribute.md +3 -2
- package/src/docs/_getting-started/start.md +1 -1
- package/src/docs/_getting-started/theming.md +223 -61
- package/src/docs/code.ts +125 -58
- package/src/docs/header/header.ts +62 -54
- package/src/docs/mock-api/router.ts +2 -0
- package/src/docs/navigation/navigation.ts +6 -3
- package/src/docs/search/docs-search.json +2504 -399
- package/src/docs/search/markdown-renderer.ts +6 -6
- package/src/docs/search/search.ts +4 -4
- package/src/docs/tailwind/css/tailwind.css +6 -5
- package/src/tsconfig.json +18 -0
- package/src/tsconfig.tsbuildinfo +1 -1
- package/tailwind.config.js +19 -0
- package/docs/assets/index--GpD7R7a.css +0 -1
|
@@ -517,22 +517,12 @@
|
|
|
517
517
|
}
|
|
518
518
|
}
|
|
519
519
|
},
|
|
520
|
-
"core/components/ui/icon/icon.md": {
|
|
521
|
-
"title": "Icon",
|
|
522
|
-
"hashes": {
|
|
523
|
-
"custom": {
|
|
524
|
-
"count": 1,
|
|
525
|
-
"title": "Custom",
|
|
526
|
-
"type": "paragraph"
|
|
527
|
-
}
|
|
528
|
-
}
|
|
529
|
-
},
|
|
530
520
|
"core/components/ui/loader/loader.md": {
|
|
531
521
|
"title": "Loader",
|
|
532
522
|
"hashes": {
|
|
533
|
-
"
|
|
523
|
+
"mode": {
|
|
534
524
|
"count": 1,
|
|
535
|
-
"title": "
|
|
525
|
+
"title": "Mode",
|
|
536
526
|
"type": "paragraph"
|
|
537
527
|
}
|
|
538
528
|
}
|
|
@@ -2415,22 +2405,7 @@
|
|
|
2415
2405
|
}
|
|
2416
2406
|
},
|
|
2417
2407
|
{
|
|
2418
|
-
"search": "
|
|
2419
|
-
"files": {
|
|
2420
|
-
"core/components/ui/alert/alert.md": {
|
|
2421
|
-
"title": "Alert",
|
|
2422
|
-
"hashes": {
|
|
2423
|
-
"alert": {
|
|
2424
|
-
"count": 1,
|
|
2425
|
-
"title": "",
|
|
2426
|
-
"type": "paragraph"
|
|
2427
|
-
}
|
|
2428
|
-
}
|
|
2429
|
-
}
|
|
2430
|
-
}
|
|
2431
|
-
},
|
|
2432
|
-
{
|
|
2433
|
-
"search": "Use status: default, info, success, warning, error.\n",
|
|
2408
|
+
"search": "Alerts surface important feedback inline—errors, confirmations, or contextual help. Use label / text for simple copy, or the default slot for rich content (links, buttons). Set announce when the message appears after an action so screen readers pick it up.\n",
|
|
2434
2409
|
"files": {
|
|
2435
2410
|
"core/components/ui/alert/alert.md": {
|
|
2436
2411
|
"title": "Alert",
|
|
@@ -2580,12 +2555,12 @@
|
|
|
2580
2555
|
}
|
|
2581
2556
|
},
|
|
2582
2557
|
{
|
|
2583
|
-
"search": "
|
|
2558
|
+
"search": "Alert messages",
|
|
2584
2559
|
"files": {
|
|
2585
|
-
"core/components/ui/
|
|
2586
|
-
"title": "
|
|
2560
|
+
"core/components/ui/alert-messages/alert-messages.md": {
|
|
2561
|
+
"title": "Alert messages",
|
|
2587
2562
|
"hashes": {
|
|
2588
|
-
"
|
|
2563
|
+
"alert-messages": {
|
|
2589
2564
|
"count": 1,
|
|
2590
2565
|
"title": "",
|
|
2591
2566
|
"type": "page"
|
|
@@ -2595,7 +2570,82 @@
|
|
|
2595
2570
|
}
|
|
2596
2571
|
},
|
|
2597
2572
|
{
|
|
2598
|
-
"search": "
|
|
2573
|
+
"search": "sonic-alert-messages renders a vertical stack of sonic-alert items from a messages array on a linked data provider (typical pattern: submitResultDataProvider after a form submit). Only entries with type="public" are shown. Each alert gets announce so screen readers pick up feedback after the request.\n",
|
|
2574
|
+
"files": {
|
|
2575
|
+
"core/components/ui/alert-messages/alert-messages.md": {
|
|
2576
|
+
"title": "Alert messages",
|
|
2577
|
+
"hashes": {
|
|
2578
|
+
"alert-messages": {
|
|
2579
|
+
"count": 1,
|
|
2580
|
+
"title": "",
|
|
2581
|
+
"type": "paragraph"
|
|
2582
|
+
}
|
|
2583
|
+
}
|
|
2584
|
+
}
|
|
2585
|
+
}
|
|
2586
|
+
},
|
|
2587
|
+
{
|
|
2588
|
+
"search": "Bind dataProvider to the same publisher as submitResultDataProvider. API messages entries need type: public, plus content and optional status (warning · success · error · info).\n",
|
|
2589
|
+
"files": {
|
|
2590
|
+
"core/components/ui/alert-messages/alert-messages.md": {
|
|
2591
|
+
"title": "Alert messages",
|
|
2592
|
+
"hashes": {
|
|
2593
|
+
"with-submit-result": {
|
|
2594
|
+
"count": 1,
|
|
2595
|
+
"title": "With submit result",
|
|
2596
|
+
"type": "paragraph"
|
|
2597
|
+
}
|
|
2598
|
+
}
|
|
2599
|
+
}
|
|
2600
|
+
}
|
|
2601
|
+
},
|
|
2602
|
+
{
|
|
2603
|
+
"search": "size · background and noIcon apply to every rendered sonic-alert in the list.\n",
|
|
2604
|
+
"files": {
|
|
2605
|
+
"core/components/ui/alert-messages/alert-messages.md": {
|
|
2606
|
+
"title": "Alert messages",
|
|
2607
|
+
"hashes": {
|
|
2608
|
+
"shared-alert-props": {
|
|
2609
|
+
"count": 1,
|
|
2610
|
+
"title": "Shared alert props",
|
|
2611
|
+
"type": "paragraph"
|
|
2612
|
+
}
|
|
2613
|
+
}
|
|
2614
|
+
}
|
|
2615
|
+
}
|
|
2616
|
+
},
|
|
2617
|
+
{
|
|
2618
|
+
"search": "Example JSON on the result publisher (or API response merged into it):\n",
|
|
2619
|
+
"files": {
|
|
2620
|
+
"core/components/ui/alert-messages/alert-messages.md": {
|
|
2621
|
+
"title": "Alert messages",
|
|
2622
|
+
"hashes": {
|
|
2623
|
+
"message-shape": {
|
|
2624
|
+
"count": 1,
|
|
2625
|
+
"title": "Message shape",
|
|
2626
|
+
"type": "paragraph"
|
|
2627
|
+
}
|
|
2628
|
+
}
|
|
2629
|
+
}
|
|
2630
|
+
}
|
|
2631
|
+
},
|
|
2632
|
+
{
|
|
2633
|
+
"search": "No slots — alerts are generated from messages.\n",
|
|
2634
|
+
"files": {
|
|
2635
|
+
"core/components/ui/alert-messages/alert-messages.md": {
|
|
2636
|
+
"title": "Alert messages",
|
|
2637
|
+
"hashes": {
|
|
2638
|
+
"api-reference": {
|
|
2639
|
+
"count": 1,
|
|
2640
|
+
"title": "API reference",
|
|
2641
|
+
"type": "paragraph"
|
|
2642
|
+
}
|
|
2643
|
+
}
|
|
2644
|
+
}
|
|
2645
|
+
}
|
|
2646
|
+
},
|
|
2647
|
+
{
|
|
2648
|
+
"search": "Badge",
|
|
2599
2649
|
"files": {
|
|
2600
2650
|
"core/components/ui/badge/badge.md": {
|
|
2601
2651
|
"title": "Badge",
|
|
@@ -2603,14 +2653,14 @@
|
|
|
2603
2653
|
"badge": {
|
|
2604
2654
|
"count": 1,
|
|
2605
2655
|
"title": "",
|
|
2606
|
-
"type": "
|
|
2656
|
+
"type": "page"
|
|
2607
2657
|
}
|
|
2608
2658
|
}
|
|
2609
2659
|
}
|
|
2610
2660
|
}
|
|
2611
2661
|
},
|
|
2612
2662
|
{
|
|
2613
|
-
"search": "
|
|
2663
|
+
"search": "Badges are compact, non-interactive labels for status, counts, or categories. They mirror sonic-button styling (type, variant, size) without focus rings or click handling—use a button when the control should be actionable.\n",
|
|
2614
2664
|
"files": {
|
|
2615
2665
|
"core/components/ui/badge/badge.md": {
|
|
2616
2666
|
"title": "Badge",
|
|
@@ -2640,7 +2690,7 @@
|
|
|
2640
2690
|
}
|
|
2641
2691
|
},
|
|
2642
2692
|
{
|
|
2643
|
-
"search": "outline — border and text in the type color. ghost — text only, no padding (except in forced-colors mode).\n",
|
|
2693
|
+
"search": "Default variant is filled. outline — border and text in the type color. ghost — text only, no padding (except in forced-colors mode).\n",
|
|
2644
2694
|
"files": {
|
|
2645
2695
|
"core/components/ui/badge/badge.md": {
|
|
2646
2696
|
"title": "Badge",
|
|
@@ -2774,6 +2824,96 @@
|
|
|
2774
2824
|
}
|
|
2775
2825
|
}
|
|
2776
2826
|
},
|
|
2827
|
+
{
|
|
2828
|
+
"search": "sonic-captcha embeds an ALTCHA widget and wires captchaToken / needsCaptchaValidation on the ancestor formDataProvider (or headersDataProvider). sonic-submit waits for a token before sending when validation is required. The widget loads only on HTTPS; on plain HTTP the host renders nothing.\n",
|
|
2829
|
+
"files": {
|
|
2830
|
+
"core/components/ui/captcha/captcha.md": {
|
|
2831
|
+
"title": "Captcha",
|
|
2832
|
+
"hashes": {
|
|
2833
|
+
"captcha": {
|
|
2834
|
+
"count": 1,
|
|
2835
|
+
"title": "",
|
|
2836
|
+
"type": "paragraph"
|
|
2837
|
+
}
|
|
2838
|
+
}
|
|
2839
|
+
}
|
|
2840
|
+
}
|
|
2841
|
+
},
|
|
2842
|
+
{
|
|
2843
|
+
"search": "Live widget calls the Supersoniks challenge service — not part of docs mock API.\n",
|
|
2844
|
+
"files": {
|
|
2845
|
+
"core/components/ui/captcha/captcha.md": {
|
|
2846
|
+
"title": "Captcha",
|
|
2847
|
+
"hashes": {
|
|
2848
|
+
"captcha": {
|
|
2849
|
+
"count": 1,
|
|
2850
|
+
"title": "",
|
|
2851
|
+
"type": "paragraph"
|
|
2852
|
+
}
|
|
2853
|
+
}
|
|
2854
|
+
}
|
|
2855
|
+
}
|
|
2856
|
+
},
|
|
2857
|
+
{
|
|
2858
|
+
"search": "Wrap the form scope and place sonic-submit in the default slot so the challenge appears above the action.\n",
|
|
2859
|
+
"files": {
|
|
2860
|
+
"core/components/ui/captcha/captcha.md": {
|
|
2861
|
+
"title": "Captcha",
|
|
2862
|
+
"hashes": {
|
|
2863
|
+
"basic-example": {
|
|
2864
|
+
"count": 1,
|
|
2865
|
+
"title": "Basic example",
|
|
2866
|
+
"type": "paragraph"
|
|
2867
|
+
}
|
|
2868
|
+
}
|
|
2869
|
+
}
|
|
2870
|
+
}
|
|
2871
|
+
},
|
|
2872
|
+
{
|
|
2873
|
+
"search": "Optional key skips client-side key generation. When omitted, the component derives an encrypted key on connect (after generateEncryptedKey).\n",
|
|
2874
|
+
"files": {
|
|
2875
|
+
"core/components/ui/captcha/captcha.md": {
|
|
2876
|
+
"title": "Captcha",
|
|
2877
|
+
"hashes": {
|
|
2878
|
+
"encrypted-site-key": {
|
|
2879
|
+
"count": 1,
|
|
2880
|
+
"title": "Encrypted site key",
|
|
2881
|
+
"type": "paragraph"
|
|
2882
|
+
}
|
|
2883
|
+
}
|
|
2884
|
+
}
|
|
2885
|
+
}
|
|
2886
|
+
},
|
|
2887
|
+
{
|
|
2888
|
+
"search": "On connect (HTTPS only), needsCaptchaValidation is set to true and captchaToken is cleared. When the ALTCHA widget reaches verified, captchaToken is written on the form publisher and sonic-captcha-validate fires (detail.valid · detail.state · optional detail.token / detail.payload). sonic-submit still listens for request_token to refresh the token immediately before send.\n",
|
|
2889
|
+
"files": {
|
|
2890
|
+
"core/components/ui/captcha/captcha.md": {
|
|
2891
|
+
"title": "Captcha",
|
|
2892
|
+
"hashes": {
|
|
2893
|
+
"form-publisher-fields": {
|
|
2894
|
+
"count": 1,
|
|
2895
|
+
"title": "Form publisher fields",
|
|
2896
|
+
"type": "paragraph"
|
|
2897
|
+
}
|
|
2898
|
+
}
|
|
2899
|
+
}
|
|
2900
|
+
}
|
|
2901
|
+
},
|
|
2902
|
+
{
|
|
2903
|
+
"search": "Related: Submit — needsCaptchaValidation and deferred send.\n",
|
|
2904
|
+
"files": {
|
|
2905
|
+
"core/components/ui/captcha/captcha.md": {
|
|
2906
|
+
"title": "Captcha",
|
|
2907
|
+
"hashes": {
|
|
2908
|
+
"api-reference": {
|
|
2909
|
+
"count": 1,
|
|
2910
|
+
"title": "API reference",
|
|
2911
|
+
"type": "paragraph"
|
|
2912
|
+
}
|
|
2913
|
+
}
|
|
2914
|
+
}
|
|
2915
|
+
}
|
|
2916
|
+
},
|
|
2777
2917
|
{
|
|
2778
2918
|
"search": "Card",
|
|
2779
2919
|
"files": {
|
|
@@ -2790,7 +2930,7 @@
|
|
|
2790
2930
|
}
|
|
2791
2931
|
},
|
|
2792
2932
|
{
|
|
2793
|
-
"search": "
|
|
2933
|
+
"search": "Cards group related content on a padded surface with radius, theme type colors, and elevation. Default shadow is lg. Compose sonic-card-header / sonic-card-main / sonic-card-footer, or place any markup in the default slot.\n",
|
|
2794
2934
|
"files": {
|
|
2795
2935
|
"core/components/ui/card/card.md": {
|
|
2796
2936
|
"title": "Card",
|
|
@@ -2805,14 +2945,29 @@
|
|
|
2805
2945
|
}
|
|
2806
2946
|
},
|
|
2807
2947
|
{
|
|
2808
|
-
"search": "Default type is base
|
|
2948
|
+
"search": "Default type is base. default and light share the same surface tokens.\n",
|
|
2809
2949
|
"files": {
|
|
2810
2950
|
"core/components/ui/card/card.md": {
|
|
2811
2951
|
"title": "Card",
|
|
2812
2952
|
"hashes": {
|
|
2813
|
-
"
|
|
2953
|
+
"type": {
|
|
2814
2954
|
"count": 1,
|
|
2815
|
-
"title": "",
|
|
2955
|
+
"title": "Type",
|
|
2956
|
+
"type": "paragraph"
|
|
2957
|
+
}
|
|
2958
|
+
}
|
|
2959
|
+
}
|
|
2960
|
+
}
|
|
2961
|
+
},
|
|
2962
|
+
{
|
|
2963
|
+
"search": "Set shadow to control elevation. Default is lg.\n",
|
|
2964
|
+
"files": {
|
|
2965
|
+
"core/components/ui/card/card.md": {
|
|
2966
|
+
"title": "Card",
|
|
2967
|
+
"hashes": {
|
|
2968
|
+
"shadow": {
|
|
2969
|
+
"count": 1,
|
|
2970
|
+
"title": "Shadow",
|
|
2816
2971
|
"type": "paragraph"
|
|
2817
2972
|
}
|
|
2818
2973
|
}
|
|
@@ -2820,7 +2975,7 @@
|
|
|
2820
2975
|
}
|
|
2821
2976
|
},
|
|
2822
2977
|
{
|
|
2823
|
-
"search": "Quick titles with label and description
|
|
2978
|
+
"search": "Quick titles with label and description, or full control through the default slot. slot="suffix" aligns badges or actions on the right; suffix content does not shrink when the title wraps.\n",
|
|
2824
2979
|
"files": {
|
|
2825
2980
|
"core/components/ui/card/card.md": {
|
|
2826
2981
|
"title": "Card",
|
|
@@ -2835,7 +2990,7 @@
|
|
|
2835
2990
|
}
|
|
2836
2991
|
},
|
|
2837
2992
|
{
|
|
2838
|
-
"search": "label and description accept HTML (rendered as markup). Prefer plain text when possible; use the slot for structured content.\n",
|
|
2993
|
+
"search": "label and description accept HTML (rendered as markup). Prefer plain text when possible; use sonic-card-header-description or the default slot for structured content.\n",
|
|
2839
2994
|
"files": {
|
|
2840
2995
|
"core/components/ui/card/card.md": {
|
|
2841
2996
|
"title": "Card",
|
|
@@ -2910,29 +3065,29 @@
|
|
|
2910
3065
|
}
|
|
2911
3066
|
},
|
|
2912
3067
|
{
|
|
2913
|
-
"search": "
|
|
3068
|
+
"search": "sonic-divider draws a horizontal or vertical rule with optional centered label copy. Use it to separate sections in forms, cards, and sonic-menu. Set label for simple HTML captions or use the default slot for richer markup; default align is center and default lineStyle is solid.\n",
|
|
2914
3069
|
"files": {
|
|
2915
|
-
"core/components/ui/
|
|
2916
|
-
"title": "
|
|
3070
|
+
"core/components/ui/divider/divider.md": {
|
|
3071
|
+
"title": "Divider",
|
|
2917
3072
|
"hashes": {
|
|
2918
|
-
"
|
|
3073
|
+
"divider": {
|
|
2919
3074
|
"count": 1,
|
|
2920
3075
|
"title": "",
|
|
2921
|
-
"type": "
|
|
3076
|
+
"type": "paragraph"
|
|
2922
3077
|
}
|
|
2923
3078
|
}
|
|
2924
3079
|
}
|
|
2925
3080
|
}
|
|
2926
3081
|
},
|
|
2927
3082
|
{
|
|
2928
|
-
"search": "
|
|
3083
|
+
"search": "A bare divider is a full-width line with vertical margin. Omit size to use the host default spacing (0.5rem block margin).\n",
|
|
2929
3084
|
"files": {
|
|
2930
|
-
"core/components/ui/
|
|
2931
|
-
"title": "
|
|
3085
|
+
"core/components/ui/divider/divider.md": {
|
|
3086
|
+
"title": "Divider",
|
|
2932
3087
|
"hashes": {
|
|
2933
|
-
"example
|
|
3088
|
+
"basic-example": {
|
|
2934
3089
|
"count": 1,
|
|
2935
|
-
"title": "
|
|
3090
|
+
"title": "Basic example",
|
|
2936
3091
|
"type": "paragraph"
|
|
2937
3092
|
}
|
|
2938
3093
|
}
|
|
@@ -2940,74 +3095,74 @@
|
|
|
2940
3095
|
}
|
|
2941
3096
|
},
|
|
2942
3097
|
{
|
|
2943
|
-
"search": "
|
|
3098
|
+
"search": "label renders inside the line (HTML via the same pipeline as other form labels). align controls which side(s) of the line remain visible: left drops the leading segment, right drops the trailing segment, center keeps both.\n",
|
|
2944
3099
|
"files": {
|
|
2945
|
-
"core/components/ui/
|
|
2946
|
-
"title": "
|
|
3100
|
+
"core/components/ui/divider/divider.md": {
|
|
3101
|
+
"title": "Divider",
|
|
2947
3102
|
"hashes": {
|
|
2948
|
-
"
|
|
3103
|
+
"label-and-align": {
|
|
2949
3104
|
"count": 1,
|
|
2950
|
-
"title": "",
|
|
2951
|
-
"type": "
|
|
3105
|
+
"title": "Label and align",
|
|
3106
|
+
"type": "paragraph"
|
|
2952
3107
|
}
|
|
2953
3108
|
}
|
|
2954
3109
|
}
|
|
2955
3110
|
}
|
|
2956
3111
|
},
|
|
2957
3112
|
{
|
|
2958
|
-
"search": "
|
|
3113
|
+
"search": "size adjusts block margin and label font size. Values follow the shared Concorde scale (2xs … 2xl).\n",
|
|
2959
3114
|
"files": {
|
|
2960
|
-
"core/components/ui/
|
|
2961
|
-
"title": "
|
|
3115
|
+
"core/components/ui/divider/divider.md": {
|
|
3116
|
+
"title": "Divider",
|
|
2962
3117
|
"hashes": {
|
|
2963
|
-
"
|
|
3118
|
+
"size": {
|
|
2964
3119
|
"count": 1,
|
|
2965
|
-
"title": "",
|
|
2966
|
-
"type": "
|
|
3120
|
+
"title": "Size",
|
|
3121
|
+
"type": "paragraph"
|
|
2967
3122
|
}
|
|
2968
3123
|
}
|
|
2969
3124
|
}
|
|
2970
3125
|
}
|
|
2971
3126
|
},
|
|
2972
3127
|
{
|
|
2973
|
-
"search": "
|
|
3128
|
+
"search": "lineStyle sets the stroke of the rule (solid · dashed · dotted). In HTML use the reflected attribute linestyle (case-insensitive).\n",
|
|
2974
3129
|
"files": {
|
|
2975
|
-
"core/components/ui/
|
|
2976
|
-
"title": "
|
|
3130
|
+
"core/components/ui/divider/divider.md": {
|
|
3131
|
+
"title": "Divider",
|
|
2977
3132
|
"hashes": {
|
|
2978
|
-
"
|
|
3133
|
+
"line-style": {
|
|
2979
3134
|
"count": 1,
|
|
2980
|
-
"title": "",
|
|
2981
|
-
"type": "
|
|
3135
|
+
"title": "Line style",
|
|
3136
|
+
"type": "paragraph"
|
|
2982
3137
|
}
|
|
2983
3138
|
}
|
|
2984
3139
|
}
|
|
2985
3140
|
}
|
|
2986
3141
|
},
|
|
2987
3142
|
{
|
|
2988
|
-
"search": "
|
|
3143
|
+
"search": "Set vertical for a column rule (for example between toolbar actions). noMargin removes host margin when a parent layout already provides spacing.\n",
|
|
2989
3144
|
"files": {
|
|
2990
|
-
"core/components/ui/
|
|
2991
|
-
"title": "
|
|
3145
|
+
"core/components/ui/divider/divider.md": {
|
|
3146
|
+
"title": "Divider",
|
|
2992
3147
|
"hashes": {
|
|
2993
|
-
"
|
|
3148
|
+
"vertical-and-margin": {
|
|
2994
3149
|
"count": 1,
|
|
2995
|
-
"title": "",
|
|
2996
|
-
"type": "
|
|
3150
|
+
"title": "Vertical and margin",
|
|
3151
|
+
"type": "paragraph"
|
|
2997
3152
|
}
|
|
2998
3153
|
}
|
|
2999
3154
|
}
|
|
3000
3155
|
}
|
|
3001
3156
|
},
|
|
3002
3157
|
{
|
|
3003
|
-
"search": "
|
|
3158
|
+
"search": "Slotted content replaces or augments label. Useful for badges, icons, or mixed markup in menus.\n",
|
|
3004
3159
|
"files": {
|
|
3005
|
-
"core/components/ui/
|
|
3006
|
-
"title": "
|
|
3160
|
+
"core/components/ui/divider/divider.md": {
|
|
3161
|
+
"title": "Divider",
|
|
3007
3162
|
"hashes": {
|
|
3008
|
-
"
|
|
3163
|
+
"default-slot": {
|
|
3009
3164
|
"count": 1,
|
|
3010
|
-
"title": "
|
|
3165
|
+
"title": "Default slot",
|
|
3011
3166
|
"type": "paragraph"
|
|
3012
3167
|
}
|
|
3013
3168
|
}
|
|
@@ -3015,14 +3170,14 @@
|
|
|
3015
3170
|
}
|
|
3016
3171
|
},
|
|
3017
3172
|
{
|
|
3018
|
-
"search": "
|
|
3173
|
+
"search": "On sonic-card with semantic type (primary · warning · danger · info · success), the rule uses the card’s text color at reduced opacity so it stays visible on tinted surfaces. label and slotted captions use the same foreground color as surrounding copy.\n",
|
|
3019
3174
|
"files": {
|
|
3020
|
-
"core/components/ui/
|
|
3021
|
-
"title": "
|
|
3175
|
+
"core/components/ui/divider/divider.md": {
|
|
3176
|
+
"title": "Divider",
|
|
3022
3177
|
"hashes": {
|
|
3023
|
-
"
|
|
3178
|
+
"inside-typed-cards": {
|
|
3024
3179
|
"count": 1,
|
|
3025
|
-
"title": "
|
|
3180
|
+
"title": "Inside typed cards",
|
|
3026
3181
|
"type": "paragraph"
|
|
3027
3182
|
}
|
|
3028
3183
|
}
|
|
@@ -3030,29 +3185,44 @@
|
|
|
3030
3185
|
}
|
|
3031
3186
|
},
|
|
3032
3187
|
{
|
|
3033
|
-
"search": "
|
|
3188
|
+
"search": "The inner flex container exposes part="divider" for theme overrides.\n",
|
|
3034
3189
|
"files": {
|
|
3035
|
-
"core/components/ui/
|
|
3036
|
-
"title": "
|
|
3190
|
+
"core/components/ui/divider/divider.md": {
|
|
3191
|
+
"title": "Divider",
|
|
3037
3192
|
"hashes": {
|
|
3038
|
-
"
|
|
3193
|
+
"api-reference": {
|
|
3039
3194
|
"count": 1,
|
|
3040
|
-
"title": "",
|
|
3041
|
-
"type": "
|
|
3195
|
+
"title": "API reference",
|
|
3196
|
+
"type": "paragraph"
|
|
3042
3197
|
}
|
|
3043
3198
|
}
|
|
3044
3199
|
}
|
|
3045
3200
|
}
|
|
3046
3201
|
},
|
|
3047
3202
|
{
|
|
3048
|
-
"search": "
|
|
3203
|
+
"search": "Checkbox",
|
|
3049
3204
|
"files": {
|
|
3050
|
-
"core/components/ui/form/
|
|
3051
|
-
"title": "
|
|
3052
|
-
"hashes": {
|
|
3053
|
-
"
|
|
3205
|
+
"core/components/ui/form/checkbox/checkbox.md": {
|
|
3206
|
+
"title": "Checkbox",
|
|
3207
|
+
"hashes": {
|
|
3208
|
+
"checkbox": {
|
|
3054
3209
|
"count": 1,
|
|
3055
3210
|
"title": "",
|
|
3211
|
+
"type": "page"
|
|
3212
|
+
}
|
|
3213
|
+
}
|
|
3214
|
+
}
|
|
3215
|
+
}
|
|
3216
|
+
},
|
|
3217
|
+
{
|
|
3218
|
+
"search": "Checked blacklistFlags values are sent to the mock API (?blacklistFlags=racist,sexist,…), which excludes jokes whose flags match (see filterDocsJokes in src/docs/mock-api/fixtures.ts).\n",
|
|
3219
|
+
"files": {
|
|
3220
|
+
"core/components/ui/form/checkbox/checkbox.md": {
|
|
3221
|
+
"title": "Checkbox",
|
|
3222
|
+
"hashes": {
|
|
3223
|
+
"example-of-use--blacklist--queue": {
|
|
3224
|
+
"count": 1,
|
|
3225
|
+
"title": "Example of use — blacklist + queue",
|
|
3056
3226
|
"type": "paragraph"
|
|
3057
3227
|
}
|
|
3058
3228
|
}
|
|
@@ -3060,12 +3230,27 @@
|
|
|
3060
3230
|
}
|
|
3061
3231
|
},
|
|
3062
3232
|
{
|
|
3063
|
-
"search": "
|
|
3233
|
+
"search": "Fieldset",
|
|
3064
3234
|
"files": {
|
|
3065
|
-
"core/components/ui/form/
|
|
3066
|
-
"title": "
|
|
3235
|
+
"core/components/ui/form/fieldset/fieldset.md": {
|
|
3236
|
+
"title": "Fieldset",
|
|
3067
3237
|
"hashes": {
|
|
3068
|
-
"
|
|
3238
|
+
"fieldset": {
|
|
3239
|
+
"count": 1,
|
|
3240
|
+
"title": "",
|
|
3241
|
+
"type": "page"
|
|
3242
|
+
}
|
|
3243
|
+
}
|
|
3244
|
+
}
|
|
3245
|
+
}
|
|
3246
|
+
},
|
|
3247
|
+
{
|
|
3248
|
+
"search": "sonic-fieldset groups related form controls with a bordered container and an accessible <fieldset> semantics layer. Put fields in the default slot; add a title with sonic-legend or the shorthand label / description / iconName attributes. Default variant is default. Pair the body with sonic-form-layout for responsive columns.\n",
|
|
3249
|
+
"files": {
|
|
3250
|
+
"core/components/ui/form/fieldset/fieldset.md": {
|
|
3251
|
+
"title": "Fieldset",
|
|
3252
|
+
"hashes": {
|
|
3253
|
+
"fieldset": {
|
|
3069
3254
|
"count": 1,
|
|
3070
3255
|
"title": "",
|
|
3071
3256
|
"type": "paragraph"
|
|
@@ -3075,14 +3260,14 @@
|
|
|
3075
3260
|
}
|
|
3076
3261
|
},
|
|
3077
3262
|
{
|
|
3078
|
-
"search": "
|
|
3263
|
+
"search": "ghost and shadow use a transparent border; shadow also applies --sc-shadow-lg.\n",
|
|
3079
3264
|
"files": {
|
|
3080
|
-
"core/components/ui/form/
|
|
3081
|
-
"title": "
|
|
3265
|
+
"core/components/ui/form/fieldset/fieldset.md": {
|
|
3266
|
+
"title": "Fieldset",
|
|
3082
3267
|
"hashes": {
|
|
3083
|
-
"
|
|
3268
|
+
"variant": {
|
|
3084
3269
|
"count": 1,
|
|
3085
|
-
"title": "
|
|
3270
|
+
"title": "Variant",
|
|
3086
3271
|
"type": "paragraph"
|
|
3087
3272
|
}
|
|
3088
3273
|
}
|
|
@@ -3090,14 +3275,14 @@
|
|
|
3090
3275
|
}
|
|
3091
3276
|
},
|
|
3092
3277
|
{
|
|
3093
|
-
"search": "
|
|
3278
|
+
"search": "Set tight to remove horizontal padding and side borders (flat strip inside a parent).\n",
|
|
3094
3279
|
"files": {
|
|
3095
|
-
"core/components/ui/form/
|
|
3096
|
-
"title": "
|
|
3280
|
+
"core/components/ui/form/fieldset/fieldset.md": {
|
|
3281
|
+
"title": "Fieldset",
|
|
3097
3282
|
"hashes": {
|
|
3098
|
-
"
|
|
3283
|
+
"tight-layout": {
|
|
3099
3284
|
"count": 1,
|
|
3100
|
-
"title": "
|
|
3285
|
+
"title": "Tight layout",
|
|
3101
3286
|
"type": "paragraph"
|
|
3102
3287
|
}
|
|
3103
3288
|
}
|
|
@@ -3105,14 +3290,14 @@
|
|
|
3105
3290
|
}
|
|
3106
3291
|
},
|
|
3107
3292
|
{
|
|
3108
|
-
"search": "
|
|
3293
|
+
"search": "Use sonic-legend for the group title. Set label and description for simple copy, or use the default slot for custom markup. Add secondary text with sonic-legend-description. Place actions in slot="suffix" on the legend.\n",
|
|
3109
3294
|
"files": {
|
|
3110
|
-
"core/components/ui/form/
|
|
3111
|
-
"title": "
|
|
3295
|
+
"core/components/ui/form/fieldset/fieldset.md": {
|
|
3296
|
+
"title": "Fieldset",
|
|
3112
3297
|
"hashes": {
|
|
3113
|
-
"
|
|
3298
|
+
"legend": {
|
|
3114
3299
|
"count": 1,
|
|
3115
|
-
"title": "
|
|
3300
|
+
"title": "Legend",
|
|
3116
3301
|
"type": "paragraph"
|
|
3117
3302
|
}
|
|
3118
3303
|
}
|
|
@@ -3120,14 +3305,14 @@
|
|
|
3120
3305
|
}
|
|
3121
3306
|
},
|
|
3122
3307
|
{
|
|
3123
|
-
"search": "
|
|
3308
|
+
"search": "Attribute values on sonic-legend are rendered as HTML—use only trusted content.\n",
|
|
3124
3309
|
"files": {
|
|
3125
|
-
"core/components/ui/form/
|
|
3126
|
-
"title": "
|
|
3310
|
+
"core/components/ui/form/fieldset/fieldset.md": {
|
|
3311
|
+
"title": "Fieldset",
|
|
3127
3312
|
"hashes": {
|
|
3128
|
-
"
|
|
3313
|
+
"legend": {
|
|
3129
3314
|
"count": 1,
|
|
3130
|
-
"title": "
|
|
3315
|
+
"title": "Legend",
|
|
3131
3316
|
"type": "paragraph"
|
|
3132
3317
|
}
|
|
3133
3318
|
}
|
|
@@ -3135,29 +3320,29 @@
|
|
|
3135
3320
|
}
|
|
3136
3321
|
},
|
|
3137
3322
|
{
|
|
3138
|
-
"search": "
|
|
3323
|
+
"search": "When label is set on sonic-fieldset, the component renders sonic-legend for you. Pass description iconName iconLibrary and iconPrefix the same way. Do not combine shorthand label with a separate slotted sonic-legend—you will get two legends.\n",
|
|
3139
3324
|
"files": {
|
|
3140
|
-
"core/components/ui/form/
|
|
3141
|
-
"title": "
|
|
3325
|
+
"core/components/ui/form/fieldset/fieldset.md": {
|
|
3326
|
+
"title": "Fieldset",
|
|
3142
3327
|
"hashes": {
|
|
3143
|
-
"
|
|
3328
|
+
"shorthand-legend-on-the-fieldset": {
|
|
3144
3329
|
"count": 1,
|
|
3145
|
-
"title": "",
|
|
3146
|
-
"type": "
|
|
3330
|
+
"title": "Shorthand legend on the fieldset",
|
|
3331
|
+
"type": "paragraph"
|
|
3147
3332
|
}
|
|
3148
3333
|
}
|
|
3149
3334
|
}
|
|
3150
3335
|
}
|
|
3151
3336
|
},
|
|
3152
3337
|
{
|
|
3153
|
-
"search": "
|
|
3338
|
+
"search": "Use slot="suffix" on sonic-legend for menus or icon buttons aligned to the end of the legend row.\n",
|
|
3154
3339
|
"files": {
|
|
3155
|
-
"core/components/ui/form/
|
|
3156
|
-
"title": "
|
|
3340
|
+
"core/components/ui/form/fieldset/fieldset.md": {
|
|
3341
|
+
"title": "Fieldset",
|
|
3157
3342
|
"hashes": {
|
|
3158
|
-
"
|
|
3343
|
+
"legend-actions": {
|
|
3159
3344
|
"count": 1,
|
|
3160
|
-
"title": "
|
|
3345
|
+
"title": "Legend actions",
|
|
3161
3346
|
"type": "paragraph"
|
|
3162
3347
|
}
|
|
3163
3348
|
}
|
|
@@ -3165,12 +3350,72 @@
|
|
|
3165
3350
|
}
|
|
3166
3351
|
},
|
|
3167
3352
|
{
|
|
3168
|
-
"search": "
|
|
3353
|
+
"search": "Set form on sonic-fieldset to the id of a <form> elsewhere in the page (same as the native form attribute on <fieldset>). Named fields in the fieldset then belong to that form for submit and constraint validation—for example a toolbar form and a field group rendered lower on the layout.\n",
|
|
3169
3354
|
"files": {
|
|
3170
|
-
"core/components/ui/form/
|
|
3171
|
-
"title": "
|
|
3355
|
+
"core/components/ui/form/fieldset/fieldset.md": {
|
|
3356
|
+
"title": "Fieldset",
|
|
3172
3357
|
"hashes": {
|
|
3173
|
-
"
|
|
3358
|
+
"associating-a-distant-form": {
|
|
3359
|
+
"count": 1,
|
|
3360
|
+
"title": "Associating a distant `form`",
|
|
3361
|
+
"type": "paragraph"
|
|
3362
|
+
}
|
|
3363
|
+
}
|
|
3364
|
+
}
|
|
3365
|
+
}
|
|
3366
|
+
},
|
|
3367
|
+
{
|
|
3368
|
+
"search": "Set disabled on sonic-fieldset to disable the inner <fieldset> and every control in the group (same as a native fieldset). Use it for read-only steps or sections gated by permissions.\n",
|
|
3369
|
+
"files": {
|
|
3370
|
+
"core/components/ui/form/fieldset/fieldset.md": {
|
|
3371
|
+
"title": "Fieldset",
|
|
3372
|
+
"hashes": {
|
|
3373
|
+
"disabling-a-group": {
|
|
3374
|
+
"count": 1,
|
|
3375
|
+
"title": "Disabling a group",
|
|
3376
|
+
"type": "paragraph"
|
|
3377
|
+
}
|
|
3378
|
+
}
|
|
3379
|
+
}
|
|
3380
|
+
}
|
|
3381
|
+
},
|
|
3382
|
+
{
|
|
3383
|
+
"search": "The inner <fieldset> carries grouping semantics. disabled is applied on that element so nested controls are disabled in the usual way. sonic-legend renders a native <legend> for the group label.\n",
|
|
3384
|
+
"files": {
|
|
3385
|
+
"core/components/ui/form/fieldset/fieldset.md": {
|
|
3386
|
+
"title": "Fieldset",
|
|
3387
|
+
"hashes": {
|
|
3388
|
+
"accessibility": {
|
|
3389
|
+
"count": 1,
|
|
3390
|
+
"title": "Accessibility",
|
|
3391
|
+
"type": "paragraph"
|
|
3392
|
+
}
|
|
3393
|
+
}
|
|
3394
|
+
}
|
|
3395
|
+
}
|
|
3396
|
+
},
|
|
3397
|
+
{
|
|
3398
|
+
"search": "Muted description line below the legend title. No attributes—project content through the default slot.\n",
|
|
3399
|
+
"files": {
|
|
3400
|
+
"core/components/ui/form/fieldset/fieldset.md": {
|
|
3401
|
+
"title": "Fieldset",
|
|
3402
|
+
"hashes": {
|
|
3403
|
+
"sonic-legend-description": {
|
|
3404
|
+
"count": 1,
|
|
3405
|
+
"title": "`sonic-legend-description`",
|
|
3406
|
+
"type": "paragraph"
|
|
3407
|
+
}
|
|
3408
|
+
}
|
|
3409
|
+
}
|
|
3410
|
+
}
|
|
3411
|
+
},
|
|
3412
|
+
{
|
|
3413
|
+
"search": "Form actions",
|
|
3414
|
+
"files": {
|
|
3415
|
+
"core/components/ui/form/form-actions/form-actions.md": {
|
|
3416
|
+
"title": "Form actions",
|
|
3417
|
+
"hashes": {
|
|
3418
|
+
"form-actions": {
|
|
3174
3419
|
"count": 1,
|
|
3175
3420
|
"title": "",
|
|
3176
3421
|
"type": "page"
|
|
@@ -3180,14 +3425,14 @@
|
|
|
3180
3425
|
}
|
|
3181
3426
|
},
|
|
3182
3427
|
{
|
|
3183
|
-
"search": "
|
|
3428
|
+
"search": "sonic-form-actions lays out submit / cancel and other form footer controls in a wrapping flex row with a small fixed gap. Place it inside sonic-form-layout (full-width row) or any block that should end with actions. Defaults: direction row · justify flex-start · alignItems center.\n",
|
|
3184
3429
|
"files": {
|
|
3185
|
-
"core/components/ui/form/
|
|
3186
|
-
"title": "
|
|
3430
|
+
"core/components/ui/form/form-actions/form-actions.md": {
|
|
3431
|
+
"title": "Form actions",
|
|
3187
3432
|
"hashes": {
|
|
3188
|
-
"
|
|
3433
|
+
"form-actions": {
|
|
3189
3434
|
"count": 1,
|
|
3190
|
-
"title": "
|
|
3435
|
+
"title": "",
|
|
3191
3436
|
"type": "paragraph"
|
|
3192
3437
|
}
|
|
3193
3438
|
}
|
|
@@ -3195,12 +3440,87 @@
|
|
|
3195
3440
|
}
|
|
3196
3441
|
},
|
|
3197
3442
|
{
|
|
3198
|
-
"search": "
|
|
3443
|
+
"search": "With no attributes, actions align to the start of the row (typical for left-to-right forms).\n",
|
|
3199
3444
|
"files": {
|
|
3200
|
-
"core/components/ui/form/
|
|
3201
|
-
"title": "
|
|
3445
|
+
"core/components/ui/form/form-actions/form-actions.md": {
|
|
3446
|
+
"title": "Form actions",
|
|
3202
3447
|
"hashes": {
|
|
3203
|
-
"
|
|
3448
|
+
"basic-example": {
|
|
3449
|
+
"count": 1,
|
|
3450
|
+
"title": "Basic example",
|
|
3451
|
+
"type": "paragraph"
|
|
3452
|
+
}
|
|
3453
|
+
}
|
|
3454
|
+
}
|
|
3455
|
+
}
|
|
3456
|
+
},
|
|
3457
|
+
{
|
|
3458
|
+
"search": "justify maps to CSS justify-content. Use flex-end for dialog-style footers or center for balanced toolbars.\n",
|
|
3459
|
+
"files": {
|
|
3460
|
+
"core/components/ui/form/form-actions/form-actions.md": {
|
|
3461
|
+
"title": "Form actions",
|
|
3462
|
+
"hashes": {
|
|
3463
|
+
"justify-content": {
|
|
3464
|
+
"count": 1,
|
|
3465
|
+
"title": "Justify content",
|
|
3466
|
+
"type": "paragraph"
|
|
3467
|
+
}
|
|
3468
|
+
}
|
|
3469
|
+
}
|
|
3470
|
+
}
|
|
3471
|
+
},
|
|
3472
|
+
{
|
|
3473
|
+
"search": "direction maps to flex-direction. row-reverse swaps visual order while keeping DOM order (focus order unchanged).\n",
|
|
3474
|
+
"files": {
|
|
3475
|
+
"core/components/ui/form/form-actions/form-actions.md": {
|
|
3476
|
+
"title": "Form actions",
|
|
3477
|
+
"hashes": {
|
|
3478
|
+
"flex-direction": {
|
|
3479
|
+
"count": 1,
|
|
3480
|
+
"title": "Flex direction",
|
|
3481
|
+
"type": "paragraph"
|
|
3482
|
+
}
|
|
3483
|
+
}
|
|
3484
|
+
}
|
|
3485
|
+
}
|
|
3486
|
+
},
|
|
3487
|
+
{
|
|
3488
|
+
"search": "Combine sonic-button with sonic-divider vertical or other slotted content. Default alignItems center keeps unlike heights aligned on the cross axis.\n",
|
|
3489
|
+
"files": {
|
|
3490
|
+
"core/components/ui/form/form-actions/form-actions.md": {
|
|
3491
|
+
"title": "Form actions",
|
|
3492
|
+
"hashes": {
|
|
3493
|
+
"mixed-controls": {
|
|
3494
|
+
"count": 1,
|
|
3495
|
+
"title": "Mixed controls",
|
|
3496
|
+
"type": "paragraph"
|
|
3497
|
+
}
|
|
3498
|
+
}
|
|
3499
|
+
}
|
|
3500
|
+
}
|
|
3501
|
+
},
|
|
3502
|
+
{
|
|
3503
|
+
"search": "The component exposes a single unnamed slot; there are no named slots. Slotted nodes use the host’s flex gap (0.3rem) and flex-wrap.\n",
|
|
3504
|
+
"files": {
|
|
3505
|
+
"core/components/ui/form/form-actions/form-actions.md": {
|
|
3506
|
+
"title": "Form actions",
|
|
3507
|
+
"hashes": {
|
|
3508
|
+
"api-reference": {
|
|
3509
|
+
"count": 1,
|
|
3510
|
+
"title": "API reference",
|
|
3511
|
+
"type": "paragraph"
|
|
3512
|
+
}
|
|
3513
|
+
}
|
|
3514
|
+
}
|
|
3515
|
+
}
|
|
3516
|
+
},
|
|
3517
|
+
{
|
|
3518
|
+
"search": "Form layout",
|
|
3519
|
+
"files": {
|
|
3520
|
+
"core/components/ui/form/form-layout/form-layout.md": {
|
|
3521
|
+
"title": "Form layout",
|
|
3522
|
+
"hashes": {
|
|
3523
|
+
"form-layout": {
|
|
3204
3524
|
"count": 1,
|
|
3205
3525
|
"title": "",
|
|
3206
3526
|
"type": "page"
|
|
@@ -3210,14 +3530,14 @@
|
|
|
3210
3530
|
}
|
|
3211
3531
|
},
|
|
3212
3532
|
{
|
|
3213
|
-
"search": "
|
|
3533
|
+
"search": "sonic-form-layout arranges slotted form controls in a responsive CSS grid with consistent vertical spacing. Pair sonic-input · sonic-select and sonic-input-autocomplete fields side by side when the host is wider than 440px; textareas, toggles, dividers, and sonic-form-actions span the full width. Wrap a form or sonic-fieldset body—no attributes are required.\n",
|
|
3214
3534
|
"files": {
|
|
3215
|
-
"core/components/ui/form/
|
|
3216
|
-
"title": "
|
|
3535
|
+
"core/components/ui/form/form-layout/form-layout.md": {
|
|
3536
|
+
"title": "Form layout",
|
|
3217
3537
|
"hashes": {
|
|
3218
|
-
"
|
|
3538
|
+
"form-layout": {
|
|
3219
3539
|
"count": 1,
|
|
3220
|
-
"title": "
|
|
3540
|
+
"title": "",
|
|
3221
3541
|
"type": "paragraph"
|
|
3222
3542
|
}
|
|
3223
3543
|
}
|
|
@@ -3225,27 +3545,1737 @@
|
|
|
3225
3545
|
}
|
|
3226
3546
|
},
|
|
3227
3547
|
{
|
|
3228
|
-
"search": "
|
|
3548
|
+
"search": "Typical registration-style form: short fields flow in two columns on wide layouts; long or grouped blocks stay full width.\n",
|
|
3229
3549
|
"files": {
|
|
3230
|
-
"core/components/ui/form/
|
|
3231
|
-
"title": "
|
|
3550
|
+
"core/components/ui/form/form-layout/form-layout.md": {
|
|
3551
|
+
"title": "Form layout",
|
|
3552
|
+
"hashes": {
|
|
3553
|
+
"basic-example": {
|
|
3554
|
+
"count": 1,
|
|
3555
|
+
"title": "Basic example",
|
|
3556
|
+
"type": "paragraph"
|
|
3557
|
+
}
|
|
3558
|
+
}
|
|
3559
|
+
}
|
|
3560
|
+
}
|
|
3561
|
+
},
|
|
3562
|
+
{
|
|
3563
|
+
"search": "When the host offsetWidth is greater than 440px, the grid uses two equal columns with slightly larger gap (1.75rem). Below that breakpoint, fields stack in a single column (1.5rem gap).\n",
|
|
3564
|
+
"files": {
|
|
3565
|
+
"core/components/ui/form/form-layout/form-layout.md": {
|
|
3566
|
+
"title": "Form layout",
|
|
3567
|
+
"hashes": {
|
|
3568
|
+
"responsive-columns": {
|
|
3569
|
+
"count": 1,
|
|
3570
|
+
"title": "Responsive columns",
|
|
3571
|
+
"type": "paragraph"
|
|
3572
|
+
}
|
|
3573
|
+
}
|
|
3574
|
+
}
|
|
3575
|
+
}
|
|
3576
|
+
},
|
|
3577
|
+
{
|
|
3578
|
+
"search": "If the slot contains exactly one direct sonic-input, sonic-select, or sonic-input-autocomplete, the layout stays one column even above the breakpoint so a lone field does not sit in half an empty row.\n",
|
|
3579
|
+
"files": {
|
|
3580
|
+
"core/components/ui/form/form-layout/form-layout.md": {
|
|
3581
|
+
"title": "Form layout",
|
|
3582
|
+
"hashes": {
|
|
3583
|
+
"responsive-columns": {
|
|
3584
|
+
"count": 1,
|
|
3585
|
+
"title": "Responsive columns",
|
|
3586
|
+
"type": "paragraph"
|
|
3587
|
+
}
|
|
3588
|
+
}
|
|
3589
|
+
}
|
|
3590
|
+
}
|
|
3591
|
+
},
|
|
3592
|
+
{
|
|
3593
|
+
"search": "Everything except sonic-input, sonic-select, sonic-input-autocomplete, and slotted elements with class form-item-container is assigned grid-column: 1 / -1. Use this for sonic-textarea, sonic-checkbox, sonic-switch, sonic-form-actions, sonic-divider, and similar blocks.\n",
|
|
3594
|
+
"files": {
|
|
3595
|
+
"core/components/ui/form/form-layout/form-layout.md": {
|
|
3596
|
+
"title": "Form layout",
|
|
3597
|
+
"hashes": {
|
|
3598
|
+
"full-width-slotted-blocks": {
|
|
3599
|
+
"count": 1,
|
|
3600
|
+
"title": "Full-width slotted blocks",
|
|
3601
|
+
"type": "paragraph"
|
|
3602
|
+
}
|
|
3603
|
+
}
|
|
3604
|
+
}
|
|
3605
|
+
}
|
|
3606
|
+
},
|
|
3607
|
+
{
|
|
3608
|
+
"search": "Slotted sonic-divider sets --sc-divider-my: 0 so divider spacing matches the grid rhythm. Slotted sonic-submit uses display: contents so submit controls participate in the grid without an extra wrapper box.\n",
|
|
3609
|
+
"files": {
|
|
3610
|
+
"core/components/ui/form/form-layout/form-layout.md": {
|
|
3611
|
+
"title": "Form layout",
|
|
3612
|
+
"hashes": {
|
|
3613
|
+
"full-width-slotted-blocks": {
|
|
3614
|
+
"count": 1,
|
|
3615
|
+
"title": "Full-width slotted blocks",
|
|
3616
|
+
"type": "paragraph"
|
|
3617
|
+
}
|
|
3618
|
+
}
|
|
3619
|
+
}
|
|
3620
|
+
}
|
|
3621
|
+
},
|
|
3622
|
+
{
|
|
3623
|
+
"search": "Add class form-item-container on a slotted wrapper (for example a div) when a field is not a direct sonic-input / sonic-select / sonic-input-autocomplete but should still share the two-column flow with short inputs.\n",
|
|
3624
|
+
"files": {
|
|
3625
|
+
"core/components/ui/form/form-layout/form-layout.md": {
|
|
3626
|
+
"title": "Form layout",
|
|
3627
|
+
"hashes": {
|
|
3628
|
+
"custom-column-wrapper": {
|
|
3629
|
+
"count": 1,
|
|
3630
|
+
"title": "Custom column wrapper",
|
|
3631
|
+
"type": "paragraph"
|
|
3632
|
+
}
|
|
3633
|
+
}
|
|
3634
|
+
}
|
|
3635
|
+
}
|
|
3636
|
+
},
|
|
3637
|
+
{
|
|
3638
|
+
"search": "No public attributes — layout follows slotted children and host width.\n",
|
|
3639
|
+
"files": {
|
|
3640
|
+
"core/components/ui/form/form-layout/form-layout.md": {
|
|
3641
|
+
"title": "Form layout",
|
|
3642
|
+
"hashes": {
|
|
3643
|
+
"api-reference": {
|
|
3644
|
+
"count": 1,
|
|
3645
|
+
"title": "API reference",
|
|
3646
|
+
"type": "paragraph"
|
|
3647
|
+
}
|
|
3648
|
+
}
|
|
3649
|
+
}
|
|
3650
|
+
}
|
|
3651
|
+
},
|
|
3652
|
+
{
|
|
3653
|
+
"search": "Input",
|
|
3654
|
+
"files": {
|
|
3655
|
+
"core/components/ui/form/input/input.md": {
|
|
3656
|
+
"title": "Input",
|
|
3657
|
+
"hashes": {
|
|
3658
|
+
"input": {
|
|
3659
|
+
"count": 1,
|
|
3660
|
+
"title": "",
|
|
3661
|
+
"type": "page"
|
|
3662
|
+
}
|
|
3663
|
+
}
|
|
3664
|
+
}
|
|
3665
|
+
}
|
|
3666
|
+
},
|
|
3667
|
+
{
|
|
3668
|
+
"search": "Liste des types\n",
|
|
3669
|
+
"files": {
|
|
3670
|
+
"core/components/ui/form/input/input.md": {
|
|
3671
|
+
"title": "Input",
|
|
3672
|
+
"hashes": {
|
|
3673
|
+
"type": {
|
|
3674
|
+
"count": 1,
|
|
3675
|
+
"title": "Type",
|
|
3676
|
+
"type": "paragraph"
|
|
3677
|
+
}
|
|
3678
|
+
}
|
|
3679
|
+
}
|
|
3680
|
+
}
|
|
3681
|
+
},
|
|
3682
|
+
{
|
|
3683
|
+
"search": "Filter with formDataProvider + name="contains" (mock API: substring on joke text). Caption and rows via Lit (@subscribe, .items on sonic-queue):\n",
|
|
3684
|
+
"files": {
|
|
3685
|
+
"core/components/ui/form/input/input.md": {
|
|
3686
|
+
"title": "Input",
|
|
3687
|
+
"hashes": {
|
|
3688
|
+
"example-of-use--search--queue": {
|
|
3689
|
+
"count": 1,
|
|
3690
|
+
"title": "Example of use — search + queue",
|
|
3691
|
+
"type": "paragraph"
|
|
3692
|
+
}
|
|
3693
|
+
}
|
|
3694
|
+
}
|
|
3695
|
+
}
|
|
3696
|
+
},
|
|
3697
|
+
{
|
|
3698
|
+
"search": "Input-autocomplete",
|
|
3699
|
+
"files": {
|
|
3700
|
+
"core/components/ui/form/input-autocomplete/input-autocomplete.md": {
|
|
3701
|
+
"title": "Input-autocomplete",
|
|
3702
|
+
"hashes": {
|
|
3703
|
+
"input-autocomplete": {
|
|
3704
|
+
"count": 1,
|
|
3705
|
+
"title": "",
|
|
3706
|
+
"type": "page"
|
|
3707
|
+
}
|
|
3708
|
+
}
|
|
3709
|
+
}
|
|
3710
|
+
}
|
|
3711
|
+
},
|
|
3712
|
+
{
|
|
3713
|
+
"search": "Champ formulaire + suggestions via queue. Valeur via formDataProvider + name ; la recherche filtre la queue (store interne).\n",
|
|
3714
|
+
"files": {
|
|
3715
|
+
"core/components/ui/form/input-autocomplete/input-autocomplete.md": {
|
|
3716
|
+
"title": "Input-autocomplete",
|
|
3717
|
+
"hashes": {
|
|
3718
|
+
"input-autocomplete": {
|
|
3719
|
+
"count": 1,
|
|
3720
|
+
"title": "",
|
|
3721
|
+
"type": "paragraph"
|
|
3722
|
+
}
|
|
3723
|
+
}
|
|
3724
|
+
}
|
|
3725
|
+
}
|
|
3726
|
+
},
|
|
3727
|
+
{
|
|
3728
|
+
"search": "Rendu des lignes : propriété .items (callback Lit) — voir les démos ci-dessous. Mock : serviceURL="/docs-mock-api/geo/".\n",
|
|
3729
|
+
"files": {
|
|
3730
|
+
"core/components/ui/form/input-autocomplete/input-autocomplete.md": {
|
|
3731
|
+
"title": "Input-autocomplete",
|
|
3732
|
+
"hashes": {
|
|
3733
|
+
"input-autocomplete": {
|
|
3734
|
+
"count": 1,
|
|
3735
|
+
"title": "",
|
|
3736
|
+
"type": "paragraph"
|
|
3737
|
+
}
|
|
3738
|
+
}
|
|
3739
|
+
}
|
|
3740
|
+
}
|
|
3741
|
+
},
|
|
3742
|
+
{
|
|
3743
|
+
"search": "name = paramètre de recherche = valeur formulaire.\n",
|
|
3744
|
+
"files": {
|
|
3745
|
+
"core/components/ui/form/input-autocomplete/input-autocomplete.md": {
|
|
3746
|
+
"title": "Input-autocomplete",
|
|
3747
|
+
"hashes": {
|
|
3748
|
+
"simple": {
|
|
3749
|
+
"count": 1,
|
|
3750
|
+
"title": "Simple",
|
|
3751
|
+
"type": "paragraph"
|
|
3752
|
+
}
|
|
3753
|
+
}
|
|
3754
|
+
}
|
|
3755
|
+
}
|
|
3756
|
+
},
|
|
3757
|
+
{
|
|
3758
|
+
"search": "Recherche sur nom, valeur formulaire = code. Préremplissage via value.\n",
|
|
3759
|
+
"files": {
|
|
3760
|
+
"core/components/ui/form/input-autocomplete/input-autocomplete.md": {
|
|
3761
|
+
"title": "Input-autocomplete",
|
|
3762
|
+
"hashes": {
|
|
3763
|
+
"valeur--paramètre-de-recherche": {
|
|
3764
|
+
"count": 1,
|
|
3765
|
+
"title": "Valeur ≠ paramètre de recherche",
|
|
3766
|
+
"type": "paragraph"
|
|
3767
|
+
}
|
|
3768
|
+
}
|
|
3769
|
+
}
|
|
3770
|
+
}
|
|
3771
|
+
},
|
|
3772
|
+
{
|
|
3773
|
+
"search": "À la fermeture du pop, seule une valeur de la liste (ou vide) est conservée.\n",
|
|
3774
|
+
"files": {
|
|
3775
|
+
"core/components/ui/form/input-autocomplete/input-autocomplete.md": {
|
|
3776
|
+
"title": "Input-autocomplete",
|
|
3777
|
+
"hashes": {
|
|
3778
|
+
"mode-select": {
|
|
3779
|
+
"count": 1,
|
|
3780
|
+
"title": "Mode select",
|
|
3781
|
+
"type": "paragraph"
|
|
3782
|
+
}
|
|
3783
|
+
}
|
|
3784
|
+
}
|
|
3785
|
+
}
|
|
3786
|
+
},
|
|
3787
|
+
{
|
|
3788
|
+
"search": "data-keyboard-nav sur le champ et les items (flèches haut / bas).\n",
|
|
3789
|
+
"files": {
|
|
3790
|
+
"core/components/ui/form/input-autocomplete/input-autocomplete.md": {
|
|
3791
|
+
"title": "Input-autocomplete",
|
|
3792
|
+
"hashes": {
|
|
3793
|
+
"navigation-clavier": {
|
|
3794
|
+
"count": 1,
|
|
3795
|
+
"title": "Navigation clavier",
|
|
3796
|
+
"type": "paragraph"
|
|
3797
|
+
}
|
|
3798
|
+
}
|
|
3799
|
+
}
|
|
3800
|
+
}
|
|
3801
|
+
},
|
|
3802
|
+
{
|
|
3803
|
+
"search": "Radio",
|
|
3804
|
+
"files": {
|
|
3805
|
+
"core/components/ui/form/radio/radio.md": {
|
|
3806
|
+
"title": "Radio",
|
|
3807
|
+
"hashes": {
|
|
3808
|
+
"radio": {
|
|
3809
|
+
"count": 1,
|
|
3810
|
+
"title": "",
|
|
3811
|
+
"type": "page"
|
|
3812
|
+
}
|
|
3813
|
+
}
|
|
3814
|
+
}
|
|
3815
|
+
}
|
|
3816
|
+
},
|
|
3817
|
+
{
|
|
3818
|
+
"search": "Same mock filter as Checkbox (blacklistFlags query param). Radio sends one flag at a time.\n",
|
|
3819
|
+
"files": {
|
|
3820
|
+
"core/components/ui/form/radio/radio.md": {
|
|
3821
|
+
"title": "Radio",
|
|
3822
|
+
"hashes": {
|
|
3823
|
+
"example-of-use--blacklist--queue": {
|
|
3824
|
+
"count": 1,
|
|
3825
|
+
"title": "Example of use — blacklist + queue",
|
|
3826
|
+
"type": "paragraph"
|
|
3827
|
+
}
|
|
3828
|
+
}
|
|
3829
|
+
}
|
|
3830
|
+
}
|
|
3831
|
+
},
|
|
3832
|
+
{
|
|
3833
|
+
"search": "Select",
|
|
3834
|
+
"files": {
|
|
3835
|
+
"core/components/ui/form/select/select.md": {
|
|
3836
|
+
"title": "Select",
|
|
3837
|
+
"hashes": {
|
|
3838
|
+
"select": {
|
|
3839
|
+
"count": 1,
|
|
3840
|
+
"title": "",
|
|
3841
|
+
"type": "page"
|
|
3842
|
+
}
|
|
3843
|
+
}
|
|
3844
|
+
}
|
|
3845
|
+
}
|
|
3846
|
+
},
|
|
3847
|
+
{
|
|
3848
|
+
"search": "name="lang" is sent as ?lang=fr|en to the doc mock API (filterDocsJokes). Same pattern as Input (contains):\n",
|
|
3849
|
+
"files": {
|
|
3850
|
+
"core/components/ui/form/select/select.md": {
|
|
3851
|
+
"title": "Select",
|
|
3852
|
+
"hashes": {
|
|
3853
|
+
"example-of-use--language-filter--queue": {
|
|
3854
|
+
"count": 1,
|
|
3855
|
+
"title": "Example of use — language filter + queue",
|
|
3856
|
+
"type": "paragraph"
|
|
3857
|
+
}
|
|
3858
|
+
}
|
|
3859
|
+
}
|
|
3860
|
+
}
|
|
3861
|
+
},
|
|
3862
|
+
{
|
|
3863
|
+
"search": "Switch",
|
|
3864
|
+
"files": {
|
|
3865
|
+
"core/components/ui/form/switch/switch.md": {
|
|
3866
|
+
"title": "Switch",
|
|
3867
|
+
"hashes": {
|
|
3868
|
+
"switch": {
|
|
3869
|
+
"count": 1,
|
|
3870
|
+
"title": "",
|
|
3871
|
+
"type": "page"
|
|
3872
|
+
}
|
|
3873
|
+
}
|
|
3874
|
+
}
|
|
3875
|
+
}
|
|
3876
|
+
},
|
|
3877
|
+
{
|
|
3878
|
+
"search": "Same mock filter as Checkbox; switches can enable several flags (comma-separated in the query).\n",
|
|
3879
|
+
"files": {
|
|
3880
|
+
"core/components/ui/form/switch/switch.md": {
|
|
3881
|
+
"title": "Switch",
|
|
3882
|
+
"hashes": {
|
|
3883
|
+
"example-of-use--blacklist--queue": {
|
|
3884
|
+
"count": 1,
|
|
3885
|
+
"title": "Example of use — blacklist + queue",
|
|
3886
|
+
"type": "paragraph"
|
|
3887
|
+
}
|
|
3888
|
+
}
|
|
3889
|
+
}
|
|
3890
|
+
}
|
|
3891
|
+
},
|
|
3892
|
+
{
|
|
3893
|
+
"search": "Textarea",
|
|
3894
|
+
"files": {
|
|
3895
|
+
"core/components/ui/form/textarea/textarea.md": {
|
|
3896
|
+
"title": "Textarea",
|
|
3897
|
+
"hashes": {
|
|
3898
|
+
"textarea": {
|
|
3899
|
+
"count": 1,
|
|
3900
|
+
"title": "",
|
|
3901
|
+
"type": "page"
|
|
3902
|
+
}
|
|
3903
|
+
}
|
|
3904
|
+
}
|
|
3905
|
+
}
|
|
3906
|
+
},
|
|
3907
|
+
{
|
|
3908
|
+
"search": "Group",
|
|
3909
|
+
"files": {
|
|
3910
|
+
"core/components/ui/group/group.md": {
|
|
3911
|
+
"title": "Group",
|
|
3912
|
+
"hashes": {
|
|
3913
|
+
"group": {
|
|
3914
|
+
"count": 1,
|
|
3915
|
+
"title": "",
|
|
3916
|
+
"type": "page"
|
|
3917
|
+
}
|
|
3918
|
+
}
|
|
3919
|
+
}
|
|
3920
|
+
}
|
|
3921
|
+
},
|
|
3922
|
+
{
|
|
3923
|
+
"search": "sonic-group lays out slotted sonic-button · sonic-input and sonic-select controls in a single horizontal row with shared corner radius (first / middle / last items). Optional label and description follow form field styling. Use it for button groups, radio rows, or input + action toolbars.\n",
|
|
3924
|
+
"files": {
|
|
3925
|
+
"core/components/ui/group/group.md": {
|
|
3926
|
+
"title": "Group",
|
|
3927
|
+
"hashes": {
|
|
3928
|
+
"group": {
|
|
3929
|
+
"count": 1,
|
|
3930
|
+
"title": "",
|
|
3931
|
+
"type": "paragraph"
|
|
3932
|
+
}
|
|
3933
|
+
}
|
|
3934
|
+
}
|
|
3935
|
+
}
|
|
3936
|
+
},
|
|
3937
|
+
{
|
|
3938
|
+
"search": "Pair with sonic-button radio and a shared name; ancestor formDataProvider stores the selected value.\n",
|
|
3939
|
+
"files": {
|
|
3940
|
+
"core/components/ui/group/group.md": {
|
|
3941
|
+
"title": "Group",
|
|
3942
|
+
"hashes": {
|
|
3943
|
+
"radio-group": {
|
|
3944
|
+
"count": 1,
|
|
3945
|
+
"title": "Radio group",
|
|
3946
|
+
"type": "paragraph"
|
|
3947
|
+
}
|
|
3948
|
+
}
|
|
3949
|
+
}
|
|
3950
|
+
}
|
|
3951
|
+
},
|
|
3952
|
+
{
|
|
3953
|
+
"search": "Adjacent link or action buttons without merging into one control.\n",
|
|
3954
|
+
"files": {
|
|
3955
|
+
"core/components/ui/group/group.md": {
|
|
3956
|
+
"title": "Group",
|
|
3957
|
+
"hashes": {
|
|
3958
|
+
"button-group": {
|
|
3959
|
+
"count": 1,
|
|
3960
|
+
"title": "Button group",
|
|
3961
|
+
"type": "paragraph"
|
|
3962
|
+
}
|
|
3963
|
+
}
|
|
3964
|
+
}
|
|
3965
|
+
}
|
|
3966
|
+
},
|
|
3967
|
+
{
|
|
3968
|
+
"search": "Action control before the field. label or description on sonic-group annotate the row.\n",
|
|
3969
|
+
"files": {
|
|
3970
|
+
"core/components/ui/group/group.md": {
|
|
3971
|
+
"title": "Group",
|
|
3972
|
+
"hashes": {
|
|
3973
|
+
"input-actions-prefix": {
|
|
3974
|
+
"count": 1,
|
|
3975
|
+
"title": "Input actions prefix",
|
|
3976
|
+
"type": "paragraph"
|
|
3977
|
+
}
|
|
3978
|
+
}
|
|
3979
|
+
}
|
|
3980
|
+
}
|
|
3981
|
+
},
|
|
3982
|
+
{
|
|
3983
|
+
"search": "Field first, action after (submit, validate, etc.).\n",
|
|
3984
|
+
"files": {
|
|
3985
|
+
"core/components/ui/group/group.md": {
|
|
3986
|
+
"title": "Group",
|
|
3987
|
+
"hashes": {
|
|
3988
|
+
"input-actions-suffix": {
|
|
3989
|
+
"count": 1,
|
|
3990
|
+
"title": "Input actions suffix",
|
|
3991
|
+
"type": "paragraph"
|
|
3992
|
+
}
|
|
3993
|
+
}
|
|
3994
|
+
}
|
|
3995
|
+
}
|
|
3996
|
+
},
|
|
3997
|
+
{
|
|
3998
|
+
"search": "Icon",
|
|
3999
|
+
"files": {
|
|
4000
|
+
"core/components/ui/icon/icon.md": {
|
|
4001
|
+
"title": "Icon",
|
|
4002
|
+
"hashes": {
|
|
4003
|
+
"icon": {
|
|
4004
|
+
"count": 1,
|
|
4005
|
+
"title": "",
|
|
4006
|
+
"type": "page"
|
|
4007
|
+
}
|
|
4008
|
+
}
|
|
4009
|
+
}
|
|
4010
|
+
}
|
|
4011
|
+
},
|
|
4012
|
+
{
|
|
4013
|
+
"search": "sonic-icon renders inline SVG icons from the bundled core set or from CDN libraries. Set name (and library / prefix when needed); scale with size. Icons inherit currentColor and are aria-hidden by default—keep visible text nearby or label the control that contains them.\n",
|
|
4014
|
+
"files": {
|
|
4015
|
+
"core/components/ui/icon/icon.md": {
|
|
4016
|
+
"title": "Icon",
|
|
4017
|
+
"hashes": {
|
|
4018
|
+
"icon": {
|
|
4019
|
+
"count": 1,
|
|
4020
|
+
"title": "",
|
|
4021
|
+
"type": "paragraph"
|
|
4022
|
+
}
|
|
4023
|
+
}
|
|
4024
|
+
}
|
|
4025
|
+
}
|
|
4026
|
+
},
|
|
4027
|
+
{
|
|
4028
|
+
"search": "Omit library to use the bundled set in icons.json. Available name values: cancel · check · check-circled-outline · emoji-puzzled · info-empty · loader · minus-small · more-horiz · more-vert · nav-arrow-down · warning-circled-outline.\n",
|
|
4029
|
+
"files": {
|
|
4030
|
+
"core/components/ui/icon/icon.md": {
|
|
4031
|
+
"title": "Icon",
|
|
4032
|
+
"hashes": {
|
|
4033
|
+
"core-library": {
|
|
4034
|
+
"count": 1,
|
|
4035
|
+
"title": "Core library",
|
|
4036
|
+
"type": "paragraph"
|
|
4037
|
+
}
|
|
4038
|
+
}
|
|
4039
|
+
}
|
|
4040
|
+
}
|
|
4041
|
+
},
|
|
4042
|
+
{
|
|
4043
|
+
"search": "Set library to load SVGs from a built-in CDN template. prefix falls back to each library’s default when omitted (outline for heroicons, regular for fontAwesome and material, and so on).\n",
|
|
4044
|
+
"files": {
|
|
4045
|
+
"core/components/ui/icon/icon.md": {
|
|
4046
|
+
"title": "Icon",
|
|
4047
|
+
"hashes": {
|
|
4048
|
+
"external-libraries": {
|
|
4049
|
+
"count": 1,
|
|
4050
|
+
"title": "External libraries",
|
|
4051
|
+
"type": "paragraph"
|
|
4052
|
+
}
|
|
4053
|
+
}
|
|
4054
|
+
}
|
|
4055
|
+
}
|
|
4056
|
+
},
|
|
4057
|
+
{
|
|
4058
|
+
"search": "Use library="custom" with SVG files on your origin. On an ancestor (for example sonic-scope or sonic-code), set customIconLibraryPath to a URL template with $prefix and $name placeholders, and optionally customIconDefaultPrefix when prefix is omitted.\n",
|
|
4059
|
+
"files": {
|
|
4060
|
+
"core/components/ui/icon/icon.md": {
|
|
4061
|
+
"title": "Icon",
|
|
4062
|
+
"hashes": {
|
|
4063
|
+
"custom-library": {
|
|
4064
|
+
"count": 1,
|
|
4065
|
+
"title": "Custom library",
|
|
4066
|
+
"type": "paragraph"
|
|
4067
|
+
}
|
|
4068
|
+
}
|
|
4069
|
+
}
|
|
4070
|
+
}
|
|
4071
|
+
},
|
|
4072
|
+
{
|
|
4073
|
+
"search": "<sonic-code\n customIconLibraryPath="/svg/$prefix/$name.svg"\n customIconDefaultPrefix="regular"\n",
|
|
4074
|
+
"files": {
|
|
4075
|
+
"core/components/ui/icon/icon.md": {
|
|
4076
|
+
"title": "Icon",
|
|
4077
|
+
"hashes": {
|
|
4078
|
+
"custom-library": {
|
|
4079
|
+
"count": 1,
|
|
4080
|
+
"title": "Custom library",
|
|
4081
|
+
"type": "paragraph"
|
|
4082
|
+
}
|
|
4083
|
+
}
|
|
4084
|
+
}
|
|
4085
|
+
}
|
|
4086
|
+
},
|
|
4087
|
+
{
|
|
4088
|
+
"search": "Omit size for the default scale (1em height). Larger steps use 3xl.\n",
|
|
4089
|
+
"files": {
|
|
4090
|
+
"core/components/ui/icon/icon.md": {
|
|
4091
|
+
"title": "Icon",
|
|
4092
|
+
"hashes": {
|
|
4093
|
+
"size": {
|
|
4094
|
+
"count": 1,
|
|
4095
|
+
"title": "Size",
|
|
4096
|
+
"type": "paragraph"
|
|
4097
|
+
}
|
|
4098
|
+
}
|
|
4099
|
+
}
|
|
4100
|
+
}
|
|
4101
|
+
},
|
|
4102
|
+
{
|
|
4103
|
+
"search": "On connect, the host sets aria-hidden="true". Treat icons as decorative unless the surrounding control already has an accessible name. Do not rely on sonic-icon alone for meaning—use visible text or aria-label on the parent button / link.\n",
|
|
4104
|
+
"files": {
|
|
4105
|
+
"core/components/ui/icon/icon.md": {
|
|
4106
|
+
"title": "Icon",
|
|
4107
|
+
"hashes": {
|
|
4108
|
+
"accessibility": {
|
|
4109
|
+
"count": 1,
|
|
4110
|
+
"title": "Accessibility",
|
|
4111
|
+
"type": "paragraph"
|
|
4112
|
+
}
|
|
4113
|
+
}
|
|
4114
|
+
}
|
|
4115
|
+
}
|
|
4116
|
+
},
|
|
4117
|
+
{
|
|
4118
|
+
"search": "Ancestor attributes (for library="custom" only): customIconLibraryPath (URL template with $prefix and $name) and customIconDefaultPrefix. May be set on sonic-scope, theme roots, or globally in the document.\n",
|
|
4119
|
+
"files": {
|
|
4120
|
+
"core/components/ui/icon/icon.md": {
|
|
4121
|
+
"title": "Icon",
|
|
4122
|
+
"hashes": {
|
|
4123
|
+
"api-reference": {
|
|
4124
|
+
"count": 1,
|
|
4125
|
+
"title": "API reference",
|
|
4126
|
+
"type": "paragraph"
|
|
4127
|
+
}
|
|
4128
|
+
}
|
|
4129
|
+
}
|
|
4130
|
+
}
|
|
4131
|
+
},
|
|
4132
|
+
{
|
|
4133
|
+
"search": "No slots — the component inlines fetched or bundled SVG markup.\n",
|
|
4134
|
+
"files": {
|
|
4135
|
+
"core/components/ui/icon/icon.md": {
|
|
4136
|
+
"title": "Icon",
|
|
4137
|
+
"hashes": {
|
|
4138
|
+
"api-reference": {
|
|
4139
|
+
"count": 1,
|
|
4140
|
+
"title": "API reference",
|
|
4141
|
+
"type": "paragraph"
|
|
4142
|
+
}
|
|
4143
|
+
}
|
|
4144
|
+
}
|
|
4145
|
+
}
|
|
4146
|
+
},
|
|
4147
|
+
{
|
|
4148
|
+
"search": "Image",
|
|
4149
|
+
"files": {
|
|
4150
|
+
"core/components/ui/image/image.md": {
|
|
4151
|
+
"title": "Image",
|
|
4152
|
+
"hashes": {
|
|
4153
|
+
"image": {
|
|
4154
|
+
"count": 1,
|
|
4155
|
+
"title": "",
|
|
4156
|
+
"type": "page"
|
|
4157
|
+
}
|
|
4158
|
+
}
|
|
4159
|
+
}
|
|
4160
|
+
}
|
|
4161
|
+
},
|
|
4162
|
+
{
|
|
4163
|
+
"search": "sonic-image wraps a responsive <img> with aspect ratio, object-fit: cover, optional rounded corners, and load transitions. The host shows a placeholder background (--sc-placeholder-bg) until the asset loads. Default loading is lazy; use loading="eager" for above-the-fold heroes.\n",
|
|
4164
|
+
"files": {
|
|
4165
|
+
"core/components/ui/image/image.md": {
|
|
4166
|
+
"title": "Image",
|
|
4167
|
+
"hashes": {
|
|
4168
|
+
"image": {
|
|
4169
|
+
"count": 1,
|
|
4170
|
+
"title": "",
|
|
4171
|
+
"type": "paragraph"
|
|
4172
|
+
}
|
|
4173
|
+
}
|
|
4174
|
+
}
|
|
4175
|
+
}
|
|
4176
|
+
},
|
|
4177
|
+
{
|
|
4178
|
+
"search": "Omit rounded for square corners. Boolean rounded uses the theme token --sc-rounded. Sizes: sm, md, lg, xl, full (circle — pair with ratio="1/1"), none (explicit reset).\n",
|
|
4179
|
+
"files": {
|
|
4180
|
+
"core/components/ui/image/image.md": {
|
|
4181
|
+
"title": "Image",
|
|
4182
|
+
"hashes": {
|
|
4183
|
+
"rounded": {
|
|
4184
|
+
"count": 1,
|
|
4185
|
+
"title": "Rounded",
|
|
4186
|
+
"type": "paragraph"
|
|
4187
|
+
}
|
|
4188
|
+
}
|
|
4189
|
+
}
|
|
4190
|
+
}
|
|
4191
|
+
},
|
|
4192
|
+
{
|
|
4193
|
+
"search": "ratio sets CSS aspect-ratio on the image (default auto). The image still fills the host width (width: 100%).\n",
|
|
4194
|
+
"files": {
|
|
4195
|
+
"core/components/ui/image/image.md": {
|
|
4196
|
+
"title": "Image",
|
|
4197
|
+
"hashes": {
|
|
4198
|
+
"aspect-ratio": {
|
|
4199
|
+
"count": 1,
|
|
4200
|
+
"title": "Aspect ratio",
|
|
4201
|
+
"type": "paragraph"
|
|
4202
|
+
}
|
|
4203
|
+
}
|
|
4204
|
+
}
|
|
4205
|
+
}
|
|
4206
|
+
},
|
|
4207
|
+
{
|
|
4208
|
+
"search": "objectPosition maps to CSS object-position (default center center). Useful on wide crops when the subject sits off-center.\n",
|
|
4209
|
+
"files": {
|
|
4210
|
+
"core/components/ui/image/image.md": {
|
|
4211
|
+
"title": "Image",
|
|
4212
|
+
"hashes": {
|
|
4213
|
+
"object-position": {
|
|
4214
|
+
"count": 1,
|
|
4215
|
+
"title": "Object position",
|
|
4216
|
+
"type": "paragraph"
|
|
4217
|
+
}
|
|
4218
|
+
}
|
|
4219
|
+
}
|
|
4220
|
+
}
|
|
4221
|
+
},
|
|
4222
|
+
{
|
|
4223
|
+
"search": "cover stretches the image to fill a positioned parent (position: relative + fixed height or inset). Aspect ratio on the host is ignored while cover is set.\n",
|
|
4224
|
+
"files": {
|
|
4225
|
+
"core/components/ui/image/image.md": {
|
|
4226
|
+
"title": "Image",
|
|
4227
|
+
"hashes": {
|
|
4228
|
+
"cover": {
|
|
4229
|
+
"count": 1,
|
|
4230
|
+
"title": "Cover",
|
|
4231
|
+
"type": "paragraph"
|
|
4232
|
+
}
|
|
4233
|
+
}
|
|
4234
|
+
}
|
|
4235
|
+
}
|
|
4236
|
+
},
|
|
4237
|
+
{
|
|
4238
|
+
"search": "Set transition to fade (default when the attribute is present) or fade-scale-out. The image stays at opacity: 0 until the browser fires load, then the loaded class runs the animation. Changing src on an existing element does not replay the effect — mount a new sonic-image when you need another entrance (galleries, infinite scroll).\n",
|
|
4239
|
+
"files": {
|
|
4240
|
+
"core/components/ui/image/image.md": {
|
|
4241
|
+
"title": "Image",
|
|
4242
|
+
"hashes": {
|
|
4243
|
+
"load-transition": {
|
|
4244
|
+
"count": 1,
|
|
4245
|
+
"title": "Load transition",
|
|
4246
|
+
"type": "paragraph"
|
|
4247
|
+
}
|
|
4248
|
+
}
|
|
4249
|
+
}
|
|
4250
|
+
}
|
|
4251
|
+
},
|
|
4252
|
+
{
|
|
4253
|
+
"search": "Click Add image to append small thumbnails and replay the transition. Clear resets the row.\n",
|
|
4254
|
+
"files": {
|
|
4255
|
+
"core/components/ui/image/image.md": {
|
|
4256
|
+
"title": "Image",
|
|
4257
|
+
"hashes": {
|
|
4258
|
+
"load-transition": {
|
|
4259
|
+
"count": 1,
|
|
4260
|
+
"title": "Load transition",
|
|
4261
|
+
"type": "paragraph"
|
|
4262
|
+
}
|
|
4263
|
+
}
|
|
4264
|
+
}
|
|
4265
|
+
}
|
|
4266
|
+
},
|
|
4267
|
+
{
|
|
4268
|
+
"search": "Always set meaningful alt text (empty string only for decorative images). \n",
|
|
4269
|
+
"files": {
|
|
4270
|
+
"core/components/ui/image/image.md": {
|
|
4271
|
+
"title": "Image",
|
|
4272
|
+
"hashes": {
|
|
4273
|
+
"accessibility-and-parts": {
|
|
4274
|
+
"count": 1,
|
|
4275
|
+
"title": "Accessibility and parts",
|
|
4276
|
+
"type": "paragraph"
|
|
4277
|
+
}
|
|
4278
|
+
}
|
|
4279
|
+
}
|
|
4280
|
+
}
|
|
4281
|
+
},
|
|
4282
|
+
{
|
|
4283
|
+
"search": "No slots — content is driven entirely by attributes on the inner <img>.\n",
|
|
4284
|
+
"files": {
|
|
4285
|
+
"core/components/ui/image/image.md": {
|
|
4286
|
+
"title": "Image",
|
|
4287
|
+
"hashes": {
|
|
4288
|
+
"api-reference": {
|
|
4289
|
+
"count": 2,
|
|
4290
|
+
"title": "API reference",
|
|
4291
|
+
"type": "paragraph"
|
|
4292
|
+
}
|
|
4293
|
+
}
|
|
4294
|
+
}
|
|
4295
|
+
}
|
|
4296
|
+
},
|
|
4297
|
+
{
|
|
4298
|
+
"search": "Link",
|
|
4299
|
+
"files": {
|
|
4300
|
+
"core/components/ui/link/link.md": {
|
|
4301
|
+
"title": "Link",
|
|
4302
|
+
"hashes": {
|
|
4303
|
+
"link": {
|
|
4304
|
+
"count": 1,
|
|
4305
|
+
"title": "",
|
|
4306
|
+
"type": "page"
|
|
4307
|
+
}
|
|
4308
|
+
}
|
|
4309
|
+
}
|
|
4310
|
+
}
|
|
4311
|
+
},
|
|
4312
|
+
{
|
|
4313
|
+
"search": "Links navigate with inherited typography: internal routes, anchors, or external URLs. The default slot is the anchor label. For in-app routing, pair href with pushstate; use autoActive to reflect the current URL on the host (active).\n",
|
|
4314
|
+
"files": {
|
|
4315
|
+
"core/components/ui/link/link.md": {
|
|
4316
|
+
"title": "Link",
|
|
4317
|
+
"hashes": {
|
|
4318
|
+
"link": {
|
|
4319
|
+
"count": 1,
|
|
4320
|
+
"title": "",
|
|
4321
|
+
"type": "paragraph"
|
|
4322
|
+
}
|
|
4323
|
+
}
|
|
4324
|
+
}
|
|
4325
|
+
}
|
|
4326
|
+
},
|
|
4327
|
+
{
|
|
4328
|
+
"search": "target="_blank" opens a new browsing context and sets rel="noopener noreferrer".\n",
|
|
4329
|
+
"files": {
|
|
4330
|
+
"core/components/ui/link/link.md": {
|
|
4331
|
+
"title": "Link",
|
|
4332
|
+
"hashes": {
|
|
4333
|
+
"target": {
|
|
4334
|
+
"count": 1,
|
|
4335
|
+
"title": "Target",
|
|
4336
|
+
"type": "paragraph"
|
|
4337
|
+
}
|
|
4338
|
+
}
|
|
4339
|
+
}
|
|
4340
|
+
}
|
|
4341
|
+
},
|
|
4342
|
+
{
|
|
4343
|
+
"search": "Set pushstate on same-origin href values to intercept clicks and navigate through Concorde’s client router without a full reload.\n",
|
|
4344
|
+
"files": {
|
|
4345
|
+
"core/components/ui/link/link.md": {
|
|
4346
|
+
"title": "Link",
|
|
4347
|
+
"hashes": {
|
|
4348
|
+
"pushstate": {
|
|
4349
|
+
"count": 1,
|
|
4350
|
+
"title": "Pushstate",
|
|
4351
|
+
"type": "paragraph"
|
|
4352
|
+
}
|
|
4353
|
+
}
|
|
4354
|
+
}
|
|
4355
|
+
}
|
|
4356
|
+
},
|
|
4357
|
+
{
|
|
4358
|
+
"search": "Default autoActive is partial: the host gets active when the current URL starts with href. Style with [&[active]]: utilities or host selectors.\n",
|
|
4359
|
+
"files": {
|
|
4360
|
+
"core/components/ui/link/link.md": {
|
|
4361
|
+
"title": "Link",
|
|
4362
|
+
"hashes": {
|
|
4363
|
+
"autoactive": {
|
|
4364
|
+
"count": 1,
|
|
4365
|
+
"title": "AutoActive",
|
|
4366
|
+
"type": "paragraph"
|
|
4367
|
+
}
|
|
4368
|
+
}
|
|
4369
|
+
}
|
|
4370
|
+
}
|
|
4371
|
+
},
|
|
4372
|
+
{
|
|
4373
|
+
"search": "strict requires pathname, search, and hash to match. strict-path-only matches pathname and hash but ignores search.\n",
|
|
4374
|
+
"files": {
|
|
4375
|
+
"core/components/ui/link/link.md": {
|
|
4376
|
+
"title": "Link",
|
|
4377
|
+
"hashes": {
|
|
4378
|
+
"autoactive-strict-vs-partial": {
|
|
4379
|
+
"count": 1,
|
|
4380
|
+
"title": "AutoActive strict vs partial",
|
|
4381
|
+
"type": "paragraph"
|
|
4382
|
+
}
|
|
4383
|
+
}
|
|
4384
|
+
}
|
|
4385
|
+
}
|
|
4386
|
+
},
|
|
4387
|
+
{
|
|
4388
|
+
"search": "The inner <a> uses focus-visible outline styling. Set data-aria-label when the slot text is not sufficient on its own.\n",
|
|
4389
|
+
"files": {
|
|
4390
|
+
"core/components/ui/link/link.md": {
|
|
4391
|
+
"title": "Link",
|
|
4392
|
+
"hashes": {
|
|
4393
|
+
"accessibility": {
|
|
4394
|
+
"count": 1,
|
|
4395
|
+
"title": "Accessibility",
|
|
4396
|
+
"type": "paragraph"
|
|
4397
|
+
}
|
|
4398
|
+
}
|
|
4399
|
+
}
|
|
4400
|
+
}
|
|
4401
|
+
},
|
|
4402
|
+
{
|
|
4403
|
+
"search": "Loader",
|
|
4404
|
+
"files": {
|
|
4405
|
+
"core/components/ui/loader/loader.md": {
|
|
4406
|
+
"title": "Loader",
|
|
4407
|
+
"hashes": {
|
|
4408
|
+
"loader": {
|
|
4409
|
+
"count": 1,
|
|
4410
|
+
"title": "",
|
|
4411
|
+
"type": "page"
|
|
4412
|
+
}
|
|
4413
|
+
}
|
|
4414
|
+
}
|
|
4415
|
+
}
|
|
4416
|
+
},
|
|
4417
|
+
{
|
|
4418
|
+
"search": "sonic-loader shows a loading animation in the page or as a viewport overlay. Default mode is fixed (centered overlay). Use inline inside lists and fetch placeholders. Pair noDelay when the spinner should appear without the default fade-in wait. For sonic-fetch / sonic-list, set the parent loader attribute instead of embedding a tag manually.\n",
|
|
4419
|
+
"files": {
|
|
4420
|
+
"core/components/ui/loader/loader.md": {
|
|
4421
|
+
"title": "Loader",
|
|
4422
|
+
"hashes": {
|
|
4423
|
+
"loader": {
|
|
4424
|
+
"count": 1,
|
|
4425
|
+
"title": "",
|
|
4426
|
+
"type": "paragraph"
|
|
4427
|
+
}
|
|
4428
|
+
}
|
|
4429
|
+
}
|
|
4430
|
+
}
|
|
4431
|
+
},
|
|
4432
|
+
{
|
|
4433
|
+
"search": "Inline loaders fit content areas; they use the theme primary color unless currentColor is set.\n",
|
|
4434
|
+
"files": {
|
|
4435
|
+
"core/components/ui/loader/loader.md": {
|
|
4436
|
+
"title": "Loader",
|
|
4437
|
+
"hashes": {
|
|
4438
|
+
"basic-example": {
|
|
4439
|
+
"count": 1,
|
|
4440
|
+
"title": "Basic example",
|
|
4441
|
+
"type": "paragraph"
|
|
4442
|
+
}
|
|
4443
|
+
}
|
|
4444
|
+
}
|
|
4445
|
+
}
|
|
4446
|
+
},
|
|
4447
|
+
{
|
|
4448
|
+
"search": "inline — ellipsis animation in the document flow. fixed — centered overlay (position: fixed); default when the tag is omitted.\n",
|
|
4449
|
+
"files": {
|
|
4450
|
+
"core/components/ui/loader/loader.md": {
|
|
4451
|
+
"title": "Loader",
|
|
4452
|
+
"hashes": {
|
|
4453
|
+
"mode": {
|
|
4454
|
+
"count": 1,
|
|
4455
|
+
"title": "Mode",
|
|
4456
|
+
"type": "paragraph"
|
|
4457
|
+
}
|
|
4458
|
+
}
|
|
4459
|
+
}
|
|
4460
|
+
}
|
|
4461
|
+
},
|
|
4462
|
+
{
|
|
4463
|
+
"search": "Use the checkbox below to toggle a fixed loader over the page (default mode on sonic-loader).\n",
|
|
4464
|
+
"files": {
|
|
4465
|
+
"core/components/ui/loader/loader.md": {
|
|
4466
|
+
"title": "Loader",
|
|
4467
|
+
"hashes": {
|
|
4468
|
+
"mode": {
|
|
4469
|
+
"count": 1,
|
|
4470
|
+
"title": "Mode",
|
|
4471
|
+
"type": "paragraph"
|
|
4472
|
+
}
|
|
4473
|
+
}
|
|
4474
|
+
}
|
|
4475
|
+
}
|
|
4476
|
+
},
|
|
4477
|
+
{
|
|
4478
|
+
"search": "align only affects mode="inline": left · center (default) · right. Set currentColor so dots follow the host color (for example on a purple parent).\n",
|
|
4479
|
+
"files": {
|
|
4480
|
+
"core/components/ui/loader/loader.md": {
|
|
4481
|
+
"title": "Loader",
|
|
4482
|
+
"hashes": {
|
|
4483
|
+
"inline-alignment-and-color": {
|
|
4484
|
+
"count": 1,
|
|
4485
|
+
"title": "Inline alignment and color",
|
|
4486
|
+
"type": "paragraph"
|
|
4487
|
+
}
|
|
4488
|
+
}
|
|
4489
|
+
}
|
|
4490
|
+
}
|
|
4491
|
+
},
|
|
4492
|
+
{
|
|
4493
|
+
"search": "By default mode="fixed" waits briefly before fading in. mode="inline" already skips that wait. Set noDelay on fixed (or pass noDelay: true to Loader.show()) to appear immediately.\n",
|
|
4494
|
+
"files": {
|
|
4495
|
+
"core/components/ui/loader/loader.md": {
|
|
4496
|
+
"title": "Loader",
|
|
4497
|
+
"hashes": {
|
|
4498
|
+
"nodelay": {
|
|
4499
|
+
"count": 1,
|
|
4500
|
+
"title": "`noDelay`",
|
|
4501
|
+
"type": "paragraph"
|
|
4502
|
+
}
|
|
4503
|
+
}
|
|
4504
|
+
}
|
|
4505
|
+
}
|
|
4506
|
+
},
|
|
4507
|
+
{
|
|
4508
|
+
"search": "The animation is aria-hidden by default so screen readers are not spammed on every fetch. Set announce when the loader is injected after user action (for example a global overlay): the host gets role="status", aria-live="polite", and a localized aria-label (“Loading” / “Chargement en cours”, …). For in-button loading, prefer sonic-button loading and aria-busy on the control—not on the loader.\n",
|
|
4509
|
+
"files": {
|
|
4510
|
+
"core/components/ui/loader/loader.md": {
|
|
4511
|
+
"title": "Loader",
|
|
4512
|
+
"hashes": {
|
|
4513
|
+
"accessibility-announce": {
|
|
4514
|
+
"count": 1,
|
|
4515
|
+
"title": "Accessibility (`announce`)",
|
|
4516
|
+
"type": "paragraph"
|
|
4517
|
+
}
|
|
4518
|
+
}
|
|
4519
|
+
}
|
|
4520
|
+
}
|
|
4521
|
+
},
|
|
4522
|
+
{
|
|
4523
|
+
"search": "Import Loader and call Loader.show() / Loader.hide(). hide() is reference-counted: call it once per show(). With no container, the loader is appended to the theme pop container and mode is always fixed. Pass container and mode: "inline" to mount an inline instance in a specific element.\n",
|
|
4524
|
+
"files": {
|
|
4525
|
+
"core/components/ui/loader/loader.md": {
|
|
4526
|
+
"title": "Loader",
|
|
4527
|
+
"hashes": {
|
|
4528
|
+
"show-and-hide-programmatically": {
|
|
4529
|
+
"count": 1,
|
|
4530
|
+
"title": "Show and hide programmatically",
|
|
4531
|
+
"type": "paragraph"
|
|
4532
|
+
}
|
|
4533
|
+
}
|
|
4534
|
+
}
|
|
4535
|
+
}
|
|
4536
|
+
},
|
|
4537
|
+
{
|
|
4538
|
+
"search": "Loader.show({\n mode: "fixed",\n noDelay: false,\n announce: true,\n container: document.querySelector("#foo"),\n});\n",
|
|
4539
|
+
"files": {
|
|
4540
|
+
"core/components/ui/loader/loader.md": {
|
|
4541
|
+
"title": "Loader",
|
|
4542
|
+
"hashes": {
|
|
4543
|
+
"show-and-hide-programmatically": {
|
|
4544
|
+
"count": 1,
|
|
4545
|
+
"title": "Show and hide programmatically",
|
|
4546
|
+
"type": "paragraph"
|
|
4547
|
+
}
|
|
4548
|
+
}
|
|
4549
|
+
}
|
|
4550
|
+
}
|
|
4551
|
+
},
|
|
4552
|
+
{
|
|
4553
|
+
"search": "Loader.hide();\n \n\n",
|
|
4554
|
+
"files": {
|
|
4555
|
+
"core/components/ui/loader/loader.md": {
|
|
4556
|
+
"title": "Loader",
|
|
4557
|
+
"hashes": {
|
|
4558
|
+
"show-and-hide-programmatically": {
|
|
4559
|
+
"count": 1,
|
|
4560
|
+
"title": "Show and hide programmatically",
|
|
4561
|
+
"type": "paragraph"
|
|
4562
|
+
}
|
|
4563
|
+
}
|
|
4564
|
+
}
|
|
4565
|
+
}
|
|
4566
|
+
},
|
|
4567
|
+
{
|
|
4568
|
+
"search": "sonic-button loading shows an icon spinner and sets aria-busy on the button. sonic-fetch and sonic-list render sonic-loader when their loader attribute is set: true or an empty string maps to fixed; otherwise use inline or fixed.\n",
|
|
4569
|
+
"files": {
|
|
4570
|
+
"core/components/ui/loader/loader.md": {
|
|
4571
|
+
"title": "Loader",
|
|
4572
|
+
"hashes": {
|
|
4573
|
+
"composition": {
|
|
4574
|
+
"count": 1,
|
|
4575
|
+
"title": "Composition",
|
|
4576
|
+
"type": "paragraph"
|
|
4577
|
+
}
|
|
4578
|
+
}
|
|
4579
|
+
}
|
|
4580
|
+
}
|
|
4581
|
+
},
|
|
4582
|
+
{
|
|
4583
|
+
"search": "This component has no slots. The animation markup is internal.\n",
|
|
4584
|
+
"files": {
|
|
4585
|
+
"core/components/ui/loader/loader.md": {
|
|
4586
|
+
"title": "Loader",
|
|
4587
|
+
"hashes": {
|
|
4588
|
+
"api-reference": {
|
|
4589
|
+
"count": 1,
|
|
4590
|
+
"title": "API reference",
|
|
4591
|
+
"type": "paragraph"
|
|
4592
|
+
}
|
|
4593
|
+
}
|
|
4594
|
+
}
|
|
4595
|
+
}
|
|
4596
|
+
},
|
|
4597
|
+
{
|
|
4598
|
+
"search": "Menu",
|
|
4599
|
+
"files": {
|
|
4600
|
+
"core/components/ui/menu/menu.md": {
|
|
4601
|
+
"title": "Menu",
|
|
4602
|
+
"hashes": {
|
|
4603
|
+
"menu": {
|
|
4604
|
+
"count": 1,
|
|
4605
|
+
"title": "",
|
|
4606
|
+
"type": "page"
|
|
4607
|
+
}
|
|
4608
|
+
}
|
|
4609
|
+
}
|
|
4610
|
+
}
|
|
4611
|
+
},
|
|
4612
|
+
{
|
|
4613
|
+
"search": "sonic-menu lays out navigation or actions as a direction row or column of sonic-menu-item entries (ghost variant and block shape by default), optional sonic-divider separators, and overflow content in the more slot (popover “…” trigger). Set href / pushstate / autoActive on each sonic-menu-item—same API as sonic-button—not on the menu host.\n",
|
|
4614
|
+
"files": {
|
|
4615
|
+
"core/components/ui/menu/menu.md": {
|
|
4616
|
+
"title": "Menu",
|
|
4617
|
+
"hashes": {
|
|
4618
|
+
"menu": {
|
|
4619
|
+
"count": 1,
|
|
4620
|
+
"title": "",
|
|
4621
|
+
"type": "paragraph"
|
|
4622
|
+
}
|
|
4623
|
+
}
|
|
4624
|
+
}
|
|
4625
|
+
}
|
|
4626
|
+
},
|
|
4627
|
+
{
|
|
4628
|
+
"search": "Default direction is column. Use row for horizontal toolbars or tabs.\n",
|
|
4629
|
+
"files": {
|
|
4630
|
+
"core/components/ui/menu/menu.md": {
|
|
4631
|
+
"title": "Menu",
|
|
4632
|
+
"hashes": {
|
|
4633
|
+
"direction": {
|
|
4634
|
+
"count": 1,
|
|
4635
|
+
"title": "Direction",
|
|
4636
|
+
"type": "paragraph"
|
|
4637
|
+
}
|
|
4638
|
+
}
|
|
4639
|
+
}
|
|
4640
|
+
}
|
|
4641
|
+
},
|
|
4642
|
+
{
|
|
4643
|
+
"search": "size on the menu propagates to items and the more trigger when they omit their own size.\n",
|
|
4644
|
+
"files": {
|
|
4645
|
+
"core/components/ui/menu/menu.md": {
|
|
4646
|
+
"title": "Menu",
|
|
4647
|
+
"hashes": {
|
|
4648
|
+
"size": {
|
|
4649
|
+
"count": 1,
|
|
4650
|
+
"title": "Size",
|
|
4651
|
+
"type": "paragraph"
|
|
4652
|
+
}
|
|
4653
|
+
}
|
|
4654
|
+
}
|
|
4655
|
+
}
|
|
4656
|
+
},
|
|
4657
|
+
{
|
|
4658
|
+
"search": "Optional shadow wraps the menu surface (no shadow when omitted).\n",
|
|
4659
|
+
"files": {
|
|
4660
|
+
"core/components/ui/menu/menu.md": {
|
|
4661
|
+
"title": "Menu",
|
|
4662
|
+
"hashes": {
|
|
4663
|
+
"shadow": {
|
|
4664
|
+
"count": 1,
|
|
4665
|
+
"title": "Shadow",
|
|
4666
|
+
"type": "paragraph"
|
|
4667
|
+
}
|
|
4668
|
+
}
|
|
4669
|
+
}
|
|
4670
|
+
}
|
|
4671
|
+
},
|
|
4672
|
+
{
|
|
4673
|
+
"search": "align propagates to items except square / circle shape.\n",
|
|
4674
|
+
"files": {
|
|
4675
|
+
"core/components/ui/menu/menu.md": {
|
|
4676
|
+
"title": "Menu",
|
|
4677
|
+
"hashes": {
|
|
4678
|
+
"align": {
|
|
4679
|
+
"count": 1,
|
|
4680
|
+
"title": "Align",
|
|
4681
|
+
"type": "paragraph"
|
|
4682
|
+
}
|
|
4683
|
+
}
|
|
4684
|
+
}
|
|
4685
|
+
}
|
|
4686
|
+
},
|
|
4687
|
+
{
|
|
4688
|
+
"search": "Assign nodes to slot="more" to show the overflow popover. The trigger appears only when the slot has content. Icon orientation follows direction (vertical ellipsis in a row menu).\n",
|
|
4689
|
+
"files": {
|
|
4690
|
+
"core/components/ui/menu/menu.md": {
|
|
4691
|
+
"title": "Menu",
|
|
4692
|
+
"hashes": {
|
|
4693
|
+
"more": {
|
|
4694
|
+
"count": 1,
|
|
4695
|
+
"title": "More",
|
|
4696
|
+
"type": "paragraph"
|
|
4697
|
+
}
|
|
4698
|
+
}
|
|
4699
|
+
}
|
|
4700
|
+
}
|
|
4701
|
+
},
|
|
4702
|
+
{
|
|
4703
|
+
"search": "With scrollable, the main slot scrolls with edge fade masks; drag-to-scroll works on pointer devices. When exactly one item is active, the menu scrolls it into view.\n",
|
|
4704
|
+
"files": {
|
|
4705
|
+
"core/components/ui/menu/menu.md": {
|
|
4706
|
+
"title": "Menu",
|
|
4707
|
+
"hashes": {
|
|
4708
|
+
"scrollable": {
|
|
4709
|
+
"count": 1,
|
|
4710
|
+
"title": "Scrollable",
|
|
4711
|
+
"type": "paragraph"
|
|
4712
|
+
}
|
|
4713
|
+
}
|
|
4714
|
+
}
|
|
4715
|
+
}
|
|
4716
|
+
},
|
|
4717
|
+
{
|
|
4718
|
+
"search": "sonic-menu-item extends sonic-button (defaults: variant="ghost", shape="block"). Use the button docs for type, variant, href, pushstate, autoActive, and item slots.\n",
|
|
4719
|
+
"files": {
|
|
4720
|
+
"core/components/ui/menu/menu.md": {
|
|
4721
|
+
"title": "Menu",
|
|
4722
|
+
"hashes": {
|
|
4723
|
+
"api-reference": {
|
|
4724
|
+
"count": 1,
|
|
4725
|
+
"title": "API reference",
|
|
4726
|
+
"type": "paragraph"
|
|
4727
|
+
}
|
|
4728
|
+
}
|
|
4729
|
+
}
|
|
4730
|
+
}
|
|
4731
|
+
},
|
|
4732
|
+
{
|
|
4733
|
+
"search": "Modal",
|
|
4734
|
+
"files": {
|
|
4735
|
+
"core/components/ui/modal/modal.md": {
|
|
4736
|
+
"title": "Modal",
|
|
4737
|
+
"hashes": {
|
|
4738
|
+
"modal": {
|
|
4739
|
+
"count": 1,
|
|
4740
|
+
"title": "",
|
|
4741
|
+
"type": "page"
|
|
4742
|
+
}
|
|
4743
|
+
}
|
|
4744
|
+
}
|
|
4745
|
+
}
|
|
4746
|
+
},
|
|
4747
|
+
{
|
|
4748
|
+
"search": "sonic-modal presents focused content in a <dialog> overlay with backdrop, enter/exit animation, and a built-in close control. Compose sonic-modal-title / sonic-modal-subtitle / sonic-modal-content / sonic-modal-actions, or use the default slot. Call show() on the element to open; use hideModal on action buttons or hide() from script. Set forceAction when dismissal must go through explicit actions only. Imperative dialogs: Modal.create() (also window.SonicModal).\n",
|
|
4749
|
+
"files": {
|
|
4750
|
+
"core/components/ui/modal/modal.md": {
|
|
4751
|
+
"title": "Modal",
|
|
4752
|
+
"hashes": {
|
|
4753
|
+
"modal": {
|
|
4754
|
+
"count": 1,
|
|
4755
|
+
"title": "",
|
|
4756
|
+
"type": "paragraph"
|
|
4757
|
+
}
|
|
4758
|
+
}
|
|
4759
|
+
}
|
|
4760
|
+
}
|
|
4761
|
+
},
|
|
4762
|
+
{
|
|
4763
|
+
"search": "Click the trigger to open. sonic-modal-actions lays out footer buttons; hideModal closes the modal on click. Scope form state with formDataProvider on sonic-modal-actions so child sonic-button elements share one publisher.\n",
|
|
4764
|
+
"files": {
|
|
4765
|
+
"core/components/ui/modal/modal.md": {
|
|
4766
|
+
"title": "Modal",
|
|
4767
|
+
"hashes": {
|
|
4768
|
+
"basic-example": {
|
|
4769
|
+
"count": 1,
|
|
4770
|
+
"title": "Basic example",
|
|
4771
|
+
"type": "paragraph"
|
|
4772
|
+
}
|
|
4773
|
+
}
|
|
4774
|
+
}
|
|
4775
|
+
}
|
|
4776
|
+
},
|
|
4777
|
+
{
|
|
4778
|
+
"search": "Long copy scrolls inside the dialog. Default maxHeight is 90vh. Default align is left.\n",
|
|
4779
|
+
"files": {
|
|
4780
|
+
"core/components/ui/modal/modal.md": {
|
|
4781
|
+
"title": "Modal",
|
|
4782
|
+
"hashes": {
|
|
4783
|
+
"scrollable-content": {
|
|
4784
|
+
"count": 1,
|
|
4785
|
+
"title": "Scrollable content",
|
|
4786
|
+
"type": "paragraph"
|
|
4787
|
+
}
|
|
4788
|
+
}
|
|
4789
|
+
}
|
|
4790
|
+
}
|
|
4791
|
+
},
|
|
4792
|
+
{
|
|
4793
|
+
"search": "With forceAction, backdrop click, Escape, and the default close button are disabled. Provide sonic-modal-actions (or sonic-modal-close) so users can finish the flow.\n",
|
|
4794
|
+
"files": {
|
|
4795
|
+
"core/components/ui/modal/modal.md": {
|
|
4796
|
+
"title": "Modal",
|
|
4797
|
+
"hashes": {
|
|
4798
|
+
"force-action": {
|
|
4799
|
+
"count": 1,
|
|
4800
|
+
"title": "Force action",
|
|
4801
|
+
"type": "paragraph"
|
|
4802
|
+
}
|
|
4803
|
+
}
|
|
4804
|
+
}
|
|
4805
|
+
}
|
|
4806
|
+
},
|
|
4807
|
+
{
|
|
4808
|
+
"search": "Set width / height / maxWidth / maxHeight (CSS lengths). On narrow viewports the panel becomes a bottom sheet. Use rounded="none" for edge-to-edge media.\n",
|
|
4809
|
+
"files": {
|
|
4810
|
+
"core/components/ui/modal/modal.md": {
|
|
4811
|
+
"title": "Modal",
|
|
4812
|
+
"hashes": {
|
|
4813
|
+
"custom-dimensions": {
|
|
4814
|
+
"count": 1,
|
|
4815
|
+
"title": "Custom dimensions",
|
|
4816
|
+
"type": "paragraph"
|
|
4817
|
+
}
|
|
4818
|
+
}
|
|
4819
|
+
}
|
|
4820
|
+
}
|
|
4821
|
+
},
|
|
4822
|
+
{
|
|
4823
|
+
"search": "fullscreen fills the viewport and hides the backdrop.\n",
|
|
4824
|
+
"files": {
|
|
4825
|
+
"core/components/ui/modal/modal.md": {
|
|
4826
|
+
"title": "Modal",
|
|
4827
|
+
"hashes": {
|
|
4828
|
+
"fullscreen": {
|
|
4829
|
+
"count": 1,
|
|
4830
|
+
"title": "Fullscreen",
|
|
4831
|
+
"type": "paragraph"
|
|
4832
|
+
}
|
|
4833
|
+
}
|
|
4834
|
+
}
|
|
4835
|
+
}
|
|
4836
|
+
},
|
|
4837
|
+
{
|
|
4838
|
+
"search": "Use Modal.create(options) when there is no modal in the template—for confirmations, toasts that need a follow-up, or one-off flows from script. The modal is appended to the nearest sonic-theme pop container (same as declarative modals), opened automatically, and returns the sonic-modal instance. Set removeOnHide: true to detach it from the DOM after close. In the browser, window.SonicModal is the same class after the module loads.\n",
|
|
4839
|
+
"files": {
|
|
4840
|
+
"core/components/ui/modal/modal.md": {
|
|
4841
|
+
"title": "Modal",
|
|
4842
|
+
"hashes": {
|
|
4843
|
+
"programmatic-creation": {
|
|
4844
|
+
"count": 1,
|
|
4845
|
+
"title": "Programmatic creation",
|
|
4846
|
+
"type": "paragraph"
|
|
4847
|
+
}
|
|
4848
|
+
}
|
|
4849
|
+
}
|
|
4850
|
+
}
|
|
4851
|
+
},
|
|
4852
|
+
{
|
|
4853
|
+
"search": "Pass title / subtitle / content / actions as HTML strings (or Lit template results from application code). Put hideModal on action buttons in the actions string so clicks close the dialog.\n",
|
|
4854
|
+
"files": {
|
|
4855
|
+
"core/components/ui/modal/modal.md": {
|
|
4856
|
+
"title": "Modal",
|
|
4857
|
+
"hashes": {
|
|
4858
|
+
"programmatic-creation": {
|
|
4859
|
+
"count": 1,
|
|
4860
|
+
"title": "Programmatic creation",
|
|
4861
|
+
"type": "paragraph"
|
|
4862
|
+
}
|
|
4863
|
+
}
|
|
4864
|
+
}
|
|
4865
|
+
}
|
|
4866
|
+
},
|
|
4867
|
+
{
|
|
4868
|
+
"search": "const modal = Modal.create({\n title: "Delete project?",\n subtitle: "This cannot be undone.",\n content: "All files in Acme HQ will be removed.",\n actions: <sonic-button hideModal minWidth="8rem">Cancel</sonic-button> <sonic-button hideModal minWidth="8rem" type="danger">Delete</sonic-button> ,\n removeOnHide: true,\n forceAction: false,\n maxWidth: "min(100vw, 28rem)",\n});\n",
|
|
4869
|
+
"files": {
|
|
4870
|
+
"core/components/ui/modal/modal.md": {
|
|
4871
|
+
"title": "Modal",
|
|
4872
|
+
"hashes": {
|
|
4873
|
+
"programmatic-creation": {
|
|
4874
|
+
"count": 1,
|
|
4875
|
+
"title": "Programmatic creation",
|
|
4876
|
+
"type": "paragraph"
|
|
4877
|
+
}
|
|
4878
|
+
}
|
|
4879
|
+
}
|
|
4880
|
+
}
|
|
4881
|
+
},
|
|
4882
|
+
{
|
|
4883
|
+
"search": "modal.addEventListener("hidden", () => {\n console.log("Modal removed from the DOM");\n});\n",
|
|
4884
|
+
"files": {
|
|
4885
|
+
"core/components/ui/modal/modal.md": {
|
|
4886
|
+
"title": "Modal",
|
|
4887
|
+
"hashes": {
|
|
4888
|
+
"programmatic-creation": {
|
|
4889
|
+
"count": 1,
|
|
4890
|
+
"title": "Programmatic creation",
|
|
4891
|
+
"type": "paragraph"
|
|
4892
|
+
}
|
|
4893
|
+
}
|
|
4894
|
+
}
|
|
4895
|
+
}
|
|
4896
|
+
},
|
|
4897
|
+
{
|
|
4898
|
+
"search": "// Or close from script: await modal.hide(); await modal.dispose();\n \n\n",
|
|
4899
|
+
"files": {
|
|
4900
|
+
"core/components/ui/modal/modal.md": {
|
|
4901
|
+
"title": "Modal",
|
|
4902
|
+
"hashes": {
|
|
4903
|
+
"programmatic-creation": {
|
|
4904
|
+
"count": 1,
|
|
4905
|
+
"title": "Programmatic creation",
|
|
4906
|
+
"type": "paragraph"
|
|
4907
|
+
}
|
|
4908
|
+
}
|
|
4909
|
+
}
|
|
4910
|
+
}
|
|
4911
|
+
},
|
|
4912
|
+
{
|
|
4913
|
+
"search": "Methods: show() · hide() · dispose() (hide and remove). Static Modal.create(options) appends a modal to the theme pop container and opens it. options / styleSheet are JavaScript-only.\n",
|
|
4914
|
+
"files": {
|
|
4915
|
+
"core/components/ui/modal/modal.md": {
|
|
4916
|
+
"title": "Modal",
|
|
4917
|
+
"hashes": {
|
|
4918
|
+
"sonic-modal": {
|
|
4919
|
+
"count": 1,
|
|
4920
|
+
"title": "`sonic-modal`",
|
|
4921
|
+
"type": "paragraph"
|
|
4922
|
+
}
|
|
4923
|
+
}
|
|
4924
|
+
}
|
|
4925
|
+
}
|
|
4926
|
+
},
|
|
4927
|
+
{
|
|
4928
|
+
"search": "Put hideModal on a sonic-button to close the parent modal on click. Ancestor formDataProvider on this element is inherited by child form controls.\n",
|
|
4929
|
+
"files": {
|
|
4930
|
+
"core/components/ui/modal/modal.md": {
|
|
4931
|
+
"title": "Modal",
|
|
4932
|
+
"hashes": {
|
|
4933
|
+
"sonic-modal-actions": {
|
|
4934
|
+
"count": 1,
|
|
4935
|
+
"title": "`sonic-modal-actions`",
|
|
4936
|
+
"type": "paragraph"
|
|
4937
|
+
}
|
|
4938
|
+
}
|
|
4939
|
+
}
|
|
4940
|
+
}
|
|
4941
|
+
},
|
|
4942
|
+
{
|
|
4943
|
+
"search": "Rendered automatically unless forceAction or noCloseButton is set. Calls hide() on the parent modal.\n",
|
|
4944
|
+
"files": {
|
|
4945
|
+
"core/components/ui/modal/modal.md": {
|
|
4946
|
+
"title": "Modal",
|
|
4947
|
+
"hashes": {
|
|
4948
|
+
"sonic-modal-close": {
|
|
4949
|
+
"count": 1,
|
|
4950
|
+
"title": "`sonic-modal-close`",
|
|
4951
|
+
"type": "paragraph"
|
|
4952
|
+
}
|
|
4953
|
+
}
|
|
4954
|
+
}
|
|
4955
|
+
}
|
|
4956
|
+
},
|
|
4957
|
+
{
|
|
4958
|
+
"search": "Pop",
|
|
4959
|
+
"files": {
|
|
4960
|
+
"core/components/ui/pop/pop.md": {
|
|
4961
|
+
"title": "Pop",
|
|
4962
|
+
"hashes": {
|
|
4963
|
+
"pop": {
|
|
4964
|
+
"count": 1,
|
|
4965
|
+
"title": "",
|
|
4966
|
+
"type": "page"
|
|
4967
|
+
}
|
|
4968
|
+
}
|
|
4969
|
+
}
|
|
4970
|
+
}
|
|
4971
|
+
},
|
|
4972
|
+
{
|
|
4973
|
+
"search": "sonic-pop anchors floating panels to a trigger: put the control in the default slot and the panel in slot="content" (menus, forms, custom markup). Click toggles open/closed unless manual is set; default placement is bottom (start-aligned). Position updates while open and flips inside the viewport when space is tight.\n",
|
|
4974
|
+
"files": {
|
|
4975
|
+
"core/components/ui/pop/pop.md": {
|
|
4976
|
+
"title": "Pop",
|
|
4977
|
+
"hashes": {
|
|
4978
|
+
"pop": {
|
|
4979
|
+
"count": 1,
|
|
4980
|
+
"title": "",
|
|
4981
|
+
"type": "paragraph"
|
|
4982
|
+
}
|
|
4983
|
+
}
|
|
4984
|
+
}
|
|
4985
|
+
}
|
|
4986
|
+
},
|
|
4987
|
+
{
|
|
4988
|
+
"search": "Use top · bottom · left · right for the main axis. Add -start · -center · -end to align along the trigger edge. With no align suffix, content aligns to start. Legacy space syntax (placement="bottom center") still works but is deprecated—prefer bottom-center.\n",
|
|
4989
|
+
"files": {
|
|
4990
|
+
"core/components/ui/pop/pop.md": {
|
|
4991
|
+
"title": "Pop",
|
|
4992
|
+
"hashes": {
|
|
4993
|
+
"placement": {
|
|
4994
|
+
"count": 1,
|
|
4995
|
+
"title": "Placement",
|
|
4996
|
+
"type": "paragraph"
|
|
4997
|
+
}
|
|
4998
|
+
}
|
|
4999
|
+
}
|
|
5000
|
+
}
|
|
5001
|
+
},
|
|
5002
|
+
{
|
|
5003
|
+
"search": "Default shadow is lg. The shadow applies to the floating content panel.\n",
|
|
5004
|
+
"files": {
|
|
5005
|
+
"core/components/ui/pop/pop.md": {
|
|
5006
|
+
"title": "Pop",
|
|
5007
|
+
"hashes": {
|
|
5008
|
+
"shadow": {
|
|
5009
|
+
"count": 1,
|
|
5010
|
+
"title": "Shadow",
|
|
5011
|
+
"type": "paragraph"
|
|
5012
|
+
}
|
|
5013
|
+
}
|
|
5014
|
+
}
|
|
5015
|
+
}
|
|
5016
|
+
},
|
|
5017
|
+
{
|
|
5018
|
+
"search": "By default the host is middle-aligned with siblings. Set inline to baseline-align the trigger inside running text.\n",
|
|
5019
|
+
"files": {
|
|
5020
|
+
"core/components/ui/pop/pop.md": {
|
|
5021
|
+
"title": "Pop",
|
|
5022
|
+
"hashes": {
|
|
5023
|
+
"inline": {
|
|
5024
|
+
"count": 1,
|
|
5025
|
+
"title": "Inline",
|
|
5026
|
+
"type": "paragraph"
|
|
5027
|
+
}
|
|
5028
|
+
}
|
|
5029
|
+
}
|
|
5030
|
+
}
|
|
5031
|
+
},
|
|
5032
|
+
{
|
|
5033
|
+
"search": "With noToggle, a click on the trigger still opens the pop but does not close it when it is already open. Use hide() or an outside click to dismiss.\n",
|
|
5034
|
+
"files": {
|
|
5035
|
+
"core/components/ui/pop/pop.md": {
|
|
5036
|
+
"title": "Pop",
|
|
5037
|
+
"hashes": {
|
|
5038
|
+
"no-toggle": {
|
|
5039
|
+
"count": 1,
|
|
5040
|
+
"title": "No toggle",
|
|
5041
|
+
"type": "paragraph"
|
|
5042
|
+
}
|
|
5043
|
+
}
|
|
5044
|
+
}
|
|
5045
|
+
}
|
|
5046
|
+
},
|
|
5047
|
+
{
|
|
5048
|
+
"search": "Set manual to disable built-in click and keyboard toggle on the trigger. Call show() and hide() on the element instead. The pop dispatches show when it opens and hide when it closes.\n",
|
|
5049
|
+
"files": {
|
|
5050
|
+
"core/components/ui/pop/pop.md": {
|
|
5051
|
+
"title": "Pop",
|
|
5052
|
+
"hashes": {
|
|
5053
|
+
"manual-control": {
|
|
5054
|
+
"count": 1,
|
|
5055
|
+
"title": "Manual control",
|
|
5056
|
+
"type": "paragraph"
|
|
5057
|
+
}
|
|
5058
|
+
}
|
|
5059
|
+
}
|
|
5060
|
+
}
|
|
5061
|
+
},
|
|
5062
|
+
{
|
|
5063
|
+
"search": "Click Click to open pop to open the panel programmatically.\n",
|
|
5064
|
+
"files": {
|
|
5065
|
+
"core/components/ui/pop/pop.md": {
|
|
5066
|
+
"title": "Pop",
|
|
5067
|
+
"hashes": {
|
|
5068
|
+
"manual-control": {
|
|
5069
|
+
"count": 1,
|
|
5070
|
+
"title": "Manual control",
|
|
5071
|
+
"type": "paragraph"
|
|
5072
|
+
}
|
|
5073
|
+
}
|
|
5074
|
+
}
|
|
5075
|
+
}
|
|
5076
|
+
},
|
|
5077
|
+
{
|
|
5078
|
+
"search": "By default, a click inside content closes the pop (same as an outside click). Set data-on-select="keep" on the panel or a descendant to keep it open while selecting checkboxes, toggles, or menu items.\n",
|
|
5079
|
+
"files": {
|
|
5080
|
+
"core/components/ui/pop/pop.md": {
|
|
5081
|
+
"title": "Pop",
|
|
5082
|
+
"hashes": {
|
|
5083
|
+
"keep-open-on-select": {
|
|
5084
|
+
"count": 1,
|
|
5085
|
+
"title": "Keep open on select",
|
|
5086
|
+
"type": "paragraph"
|
|
5087
|
+
}
|
|
5088
|
+
}
|
|
5089
|
+
}
|
|
5090
|
+
}
|
|
5091
|
+
},
|
|
5092
|
+
{
|
|
5093
|
+
"search": "ArrowDown on the trigger opens the pop when it is closed. Escape closes the most recently opened pop (capture phase, before ancestors such as sonic-modal) and returns focus to that trigger. Multiple pops on the page stack in open order for Escape.\n",
|
|
5094
|
+
"files": {
|
|
5095
|
+
"core/components/ui/pop/pop.md": {
|
|
5096
|
+
"title": "Pop",
|
|
5097
|
+
"hashes": {
|
|
5098
|
+
"keyboard-and-dismissal": {
|
|
5099
|
+
"count": 1,
|
|
5100
|
+
"title": "Keyboard and dismissal",
|
|
5101
|
+
"type": "paragraph"
|
|
5102
|
+
}
|
|
5103
|
+
}
|
|
5104
|
+
}
|
|
5105
|
+
}
|
|
5106
|
+
},
|
|
5107
|
+
{
|
|
5108
|
+
"search": "Methods: show() · hide() on the host element.\n",
|
|
5109
|
+
"files": {
|
|
5110
|
+
"core/components/ui/pop/pop.md": {
|
|
5111
|
+
"title": "Pop",
|
|
5112
|
+
"hashes": {
|
|
5113
|
+
"api-reference": {
|
|
5114
|
+
"count": 1,
|
|
5115
|
+
"title": "API reference",
|
|
5116
|
+
"type": "paragraph"
|
|
5117
|
+
}
|
|
5118
|
+
}
|
|
5119
|
+
}
|
|
5120
|
+
}
|
|
5121
|
+
},
|
|
5122
|
+
{
|
|
5123
|
+
"search": "Events: show · hide (non-bubbling CustomEvent).\n",
|
|
5124
|
+
"files": {
|
|
5125
|
+
"core/components/ui/pop/pop.md": {
|
|
5126
|
+
"title": "Pop",
|
|
5127
|
+
"hashes": {
|
|
5128
|
+
"api-reference": {
|
|
5129
|
+
"count": 1,
|
|
5130
|
+
"title": "API reference",
|
|
5131
|
+
"type": "paragraph"
|
|
5132
|
+
}
|
|
5133
|
+
}
|
|
5134
|
+
}
|
|
5135
|
+
}
|
|
5136
|
+
},
|
|
5137
|
+
{
|
|
5138
|
+
"search": "Content attribute: data-on-select="keep" on content or descendants prevents close-on-click inside the panel.\n",
|
|
5139
|
+
"files": {
|
|
5140
|
+
"core/components/ui/pop/pop.md": {
|
|
5141
|
+
"title": "Pop",
|
|
5142
|
+
"hashes": {
|
|
5143
|
+
"api-reference": {
|
|
5144
|
+
"count": 1,
|
|
5145
|
+
"title": "API reference",
|
|
5146
|
+
"type": "paragraph"
|
|
5147
|
+
}
|
|
5148
|
+
}
|
|
5149
|
+
}
|
|
5150
|
+
}
|
|
5151
|
+
},
|
|
5152
|
+
{
|
|
5153
|
+
"search": "Progress",
|
|
5154
|
+
"files": {
|
|
5155
|
+
"core/components/ui/progress/progress.md": {
|
|
5156
|
+
"title": "Progress",
|
|
5157
|
+
"hashes": {
|
|
5158
|
+
"progress": {
|
|
5159
|
+
"count": 1,
|
|
5160
|
+
"title": "",
|
|
5161
|
+
"type": "page"
|
|
5162
|
+
}
|
|
5163
|
+
}
|
|
5164
|
+
}
|
|
5165
|
+
}
|
|
5166
|
+
},
|
|
5167
|
+
{
|
|
5168
|
+
"search": "Shows task completion on a value / max scale via a native <progress> bar. Omit value for an indeterminate loading animation. Put primary copy in the default slot and optional secondary text in remaining; set invert when the bar sits on a colored surface such as sonic-card.\n",
|
|
5169
|
+
"files": {
|
|
5170
|
+
"core/components/ui/progress/progress.md": {
|
|
5171
|
+
"title": "Progress",
|
|
5172
|
+
"hashes": {
|
|
5173
|
+
"progress": {
|
|
5174
|
+
"count": 1,
|
|
5175
|
+
"title": "",
|
|
5176
|
+
"type": "paragraph"
|
|
5177
|
+
}
|
|
5178
|
+
}
|
|
5179
|
+
}
|
|
5180
|
+
}
|
|
5181
|
+
},
|
|
5182
|
+
{
|
|
5183
|
+
"search": "Set value from 0 to max (default 100). Label text uses the type color.\n",
|
|
5184
|
+
"files": {
|
|
5185
|
+
"core/components/ui/progress/progress.md": {
|
|
5186
|
+
"title": "Progress",
|
|
5187
|
+
"hashes": {
|
|
5188
|
+
"basic-example": {
|
|
5189
|
+
"count": 1,
|
|
5190
|
+
"title": "Basic example",
|
|
5191
|
+
"type": "paragraph"
|
|
5192
|
+
}
|
|
5193
|
+
}
|
|
5194
|
+
}
|
|
5195
|
+
}
|
|
5196
|
+
},
|
|
5197
|
+
{
|
|
5198
|
+
"search": "With no value, the bar animates until progress is known.\n",
|
|
5199
|
+
"files": {
|
|
5200
|
+
"core/components/ui/progress/progress.md": {
|
|
5201
|
+
"title": "Progress",
|
|
5202
|
+
"hashes": {
|
|
5203
|
+
"indeterminate": {
|
|
5204
|
+
"count": 1,
|
|
5205
|
+
"title": "Indeterminate",
|
|
5206
|
+
"type": "paragraph"
|
|
5207
|
+
}
|
|
5208
|
+
}
|
|
5209
|
+
}
|
|
5210
|
+
}
|
|
5211
|
+
},
|
|
5212
|
+
{
|
|
5213
|
+
"search": "Semantic color follows type. With no type, behavior is default.\n",
|
|
5214
|
+
"files": {
|
|
5215
|
+
"core/components/ui/progress/progress.md": {
|
|
5216
|
+
"title": "Progress",
|
|
5217
|
+
"hashes": {
|
|
5218
|
+
"type": {
|
|
5219
|
+
"count": 1,
|
|
5220
|
+
"title": "Type",
|
|
5221
|
+
"type": "paragraph"
|
|
5222
|
+
}
|
|
5223
|
+
}
|
|
5224
|
+
}
|
|
5225
|
+
}
|
|
5226
|
+
},
|
|
5227
|
+
{
|
|
5228
|
+
"search": "Bar height scales with typography via size. With no size, font size matches md (1rem).\n",
|
|
5229
|
+
"files": {
|
|
5230
|
+
"core/components/ui/progress/progress.md": {
|
|
5231
|
+
"title": "Progress",
|
|
5232
|
+
"hashes": {
|
|
5233
|
+
"size": {
|
|
5234
|
+
"count": 1,
|
|
5235
|
+
"title": "Size",
|
|
5236
|
+
"type": "paragraph"
|
|
5237
|
+
}
|
|
5238
|
+
}
|
|
5239
|
+
}
|
|
5240
|
+
}
|
|
5241
|
+
},
|
|
5242
|
+
{
|
|
5243
|
+
"search": "The default slot is the main label (left). remaining is right-aligned with lighter weight—use it for “left to complete” copy.\n",
|
|
5244
|
+
"files": {
|
|
5245
|
+
"core/components/ui/progress/progress.md": {
|
|
5246
|
+
"title": "Progress",
|
|
5247
|
+
"hashes": {
|
|
5248
|
+
"default-and-remaining-slots": {
|
|
5249
|
+
"count": 1,
|
|
5250
|
+
"title": "Default and remaining slots",
|
|
5251
|
+
"type": "paragraph"
|
|
5252
|
+
}
|
|
5253
|
+
}
|
|
5254
|
+
}
|
|
5255
|
+
}
|
|
5256
|
+
},
|
|
5257
|
+
{
|
|
5258
|
+
"search": "On tinted backgrounds, invert adjusts track and fill tokens so the bar stays readable (pair with matching type on sonic-card or similar).\n",
|
|
5259
|
+
"files": {
|
|
5260
|
+
"core/components/ui/progress/progress.md": {
|
|
5261
|
+
"title": "Progress",
|
|
3232
5262
|
"hashes": {
|
|
3233
|
-
"
|
|
5263
|
+
"invert": {
|
|
3234
5264
|
"count": 1,
|
|
3235
|
-
"title": "",
|
|
3236
|
-
"type": "
|
|
5265
|
+
"title": "Invert",
|
|
5266
|
+
"type": "paragraph"
|
|
3237
5267
|
}
|
|
3238
5268
|
}
|
|
3239
5269
|
}
|
|
3240
5270
|
}
|
|
3241
5271
|
},
|
|
3242
5272
|
{
|
|
3243
|
-
"search": "
|
|
5273
|
+
"search": "Table",
|
|
3244
5274
|
"files": {
|
|
3245
|
-
"core/components/ui/
|
|
3246
|
-
"title": "
|
|
5275
|
+
"core/components/ui/table/table.md": {
|
|
5276
|
+
"title": "Table",
|
|
3247
5277
|
"hashes": {
|
|
3248
|
-
"
|
|
5278
|
+
"table": {
|
|
3249
5279
|
"count": 1,
|
|
3250
5280
|
"title": "",
|
|
3251
5281
|
"type": "page"
|
|
@@ -3255,44 +5285,44 @@
|
|
|
3255
5285
|
}
|
|
3256
5286
|
},
|
|
3257
5287
|
{
|
|
3258
|
-
"search": "
|
|
5288
|
+
"search": "sonic-table lays out tabular data with composable sonic-tr / sonic-th / sonic-td children. The root applies shared typography via size, scrolls horizontally when content overflows, and optionally caps height with maxHeight. Pair with sonic-thead and sonic-tbody for structure and with sonic-list to render fetched rows.\n",
|
|
3259
5289
|
"files": {
|
|
3260
|
-
"core/components/ui/
|
|
3261
|
-
"title": "
|
|
5290
|
+
"core/components/ui/table/table.md": {
|
|
5291
|
+
"title": "Table",
|
|
3262
5292
|
"hashes": {
|
|
3263
|
-
"
|
|
5293
|
+
"table": {
|
|
3264
5294
|
"count": 1,
|
|
3265
5295
|
"title": "",
|
|
3266
|
-
"type": "
|
|
5296
|
+
"type": "paragraph"
|
|
3267
5297
|
}
|
|
3268
5298
|
}
|
|
3269
5299
|
}
|
|
3270
5300
|
}
|
|
3271
5301
|
},
|
|
3272
5302
|
{
|
|
3273
|
-
"search": "
|
|
5303
|
+
"search": "A header row plus body rows is enough for static tables; sonic-thead / sonic-tbody are optional for simple layouts.\n",
|
|
3274
5304
|
"files": {
|
|
3275
|
-
"core/components/ui/
|
|
3276
|
-
"title": "
|
|
5305
|
+
"core/components/ui/table/table.md": {
|
|
5306
|
+
"title": "Table",
|
|
3277
5307
|
"hashes": {
|
|
3278
|
-
"
|
|
5308
|
+
"basic-example": {
|
|
3279
5309
|
"count": 1,
|
|
3280
|
-
"title": "",
|
|
3281
|
-
"type": "
|
|
5310
|
+
"title": "Basic example",
|
|
5311
|
+
"type": "paragraph"
|
|
3282
5312
|
}
|
|
3283
5313
|
}
|
|
3284
5314
|
}
|
|
3285
5315
|
}
|
|
3286
5316
|
},
|
|
3287
5317
|
{
|
|
3288
|
-
"search": "
|
|
5318
|
+
"search": "Place sonic-list inside sonic-tbody so each item template renders a sonic-tr. sonic-list sets row metadata (even / odd / last) on sonic-tr for striping and borders.\n",
|
|
3289
5319
|
"files": {
|
|
3290
|
-
"core/components/ui/
|
|
3291
|
-
"title": "
|
|
5320
|
+
"core/components/ui/table/table.md": {
|
|
5321
|
+
"title": "Table",
|
|
3292
5322
|
"hashes": {
|
|
3293
|
-
"
|
|
5323
|
+
"list-and-fetch": {
|
|
3294
5324
|
"count": 1,
|
|
3295
|
-
"title": "",
|
|
5325
|
+
"title": "List and fetch",
|
|
3296
5326
|
"type": "paragraph"
|
|
3297
5327
|
}
|
|
3298
5328
|
}
|
|
@@ -3300,14 +5330,14 @@
|
|
|
3300
5330
|
}
|
|
3301
5331
|
},
|
|
3302
5332
|
{
|
|
3303
|
-
"search": "
|
|
5333
|
+
"search": "Default font size is md (omit size). Sizes follow the shared scale (2xs … 2xl).\n",
|
|
3304
5334
|
"files": {
|
|
3305
|
-
"core/components/ui/
|
|
3306
|
-
"title": "
|
|
5335
|
+
"core/components/ui/table/table.md": {
|
|
5336
|
+
"title": "Table",
|
|
3307
5337
|
"hashes": {
|
|
3308
|
-
"
|
|
5338
|
+
"size": {
|
|
3309
5339
|
"count": 1,
|
|
3310
|
-
"title": "
|
|
5340
|
+
"title": "Size",
|
|
3311
5341
|
"type": "paragraph"
|
|
3312
5342
|
}
|
|
3313
5343
|
}
|
|
@@ -3315,14 +5345,14 @@
|
|
|
3315
5345
|
}
|
|
3316
5346
|
},
|
|
3317
5347
|
{
|
|
3318
|
-
"search": "
|
|
5348
|
+
"search": "Set bordered on sonic-table for an outer frame and horizontal rules between rows.\n",
|
|
3319
5349
|
"files": {
|
|
3320
|
-
"core/components/ui/
|
|
3321
|
-
"title": "
|
|
5350
|
+
"core/components/ui/table/table.md": {
|
|
5351
|
+
"title": "Table",
|
|
3322
5352
|
"hashes": {
|
|
3323
|
-
"
|
|
5353
|
+
"bordered": {
|
|
3324
5354
|
"count": 1,
|
|
3325
|
-
"title": "
|
|
5355
|
+
"title": "Bordered",
|
|
3326
5356
|
"type": "paragraph"
|
|
3327
5357
|
}
|
|
3328
5358
|
}
|
|
@@ -3330,14 +5360,14 @@
|
|
|
3330
5360
|
}
|
|
3331
5361
|
},
|
|
3332
5362
|
{
|
|
3333
|
-
"search": "
|
|
5363
|
+
"search": "maxHeight applies to the scroll container (for example 8rem), so the body scrolls vertically while the table can still scroll horizontally.\n",
|
|
3334
5364
|
"files": {
|
|
3335
|
-
"core/components/ui/
|
|
3336
|
-
"title": "
|
|
5365
|
+
"core/components/ui/table/table.md": {
|
|
5366
|
+
"title": "Table",
|
|
3337
5367
|
"hashes": {
|
|
3338
|
-
"
|
|
5368
|
+
"max-height": {
|
|
3339
5369
|
"count": 1,
|
|
3340
|
-
"title": "
|
|
5370
|
+
"title": "Max height",
|
|
3341
5371
|
"type": "paragraph"
|
|
3342
5372
|
}
|
|
3343
5373
|
}
|
|
@@ -3345,14 +5375,14 @@
|
|
|
3345
5375
|
}
|
|
3346
5376
|
},
|
|
3347
5377
|
{
|
|
3348
|
-
"search": "
|
|
5378
|
+
"search": "Set type on sonic-th / sonic-td / sonic-tr for semantic text color (primary · info · success · warning · danger · neutral · default).\n",
|
|
3349
5379
|
"files": {
|
|
3350
|
-
"core/components/ui/
|
|
3351
|
-
"title": "
|
|
5380
|
+
"core/components/ui/table/table.md": {
|
|
5381
|
+
"title": "Table",
|
|
3352
5382
|
"hashes": {
|
|
3353
|
-
"
|
|
5383
|
+
"type": {
|
|
3354
5384
|
"count": 1,
|
|
3355
|
-
"title": "
|
|
5385
|
+
"title": "Type",
|
|
3356
5386
|
"type": "paragraph"
|
|
3357
5387
|
}
|
|
3358
5388
|
}
|
|
@@ -3360,14 +5390,14 @@
|
|
|
3360
5390
|
}
|
|
3361
5391
|
},
|
|
3362
5392
|
{
|
|
3363
|
-
"search": "
|
|
5393
|
+
"search": "Use colSpan and rowSpan on sonic-th or sonic-td (maps to colspan / rowspan on the cell).\n",
|
|
3364
5394
|
"files": {
|
|
3365
|
-
"core/components/ui/
|
|
3366
|
-
"title": "
|
|
5395
|
+
"core/components/ui/table/table.md": {
|
|
5396
|
+
"title": "Table",
|
|
3367
5397
|
"hashes": {
|
|
3368
|
-
"
|
|
5398
|
+
"colspan-and-rowspan": {
|
|
3369
5399
|
"count": 1,
|
|
3370
|
-
"title": "
|
|
5400
|
+
"title": "Colspan and rowspan",
|
|
3371
5401
|
"type": "paragraph"
|
|
3372
5402
|
}
|
|
3373
5403
|
}
|
|
@@ -3375,14 +5405,14 @@
|
|
|
3375
5405
|
}
|
|
3376
5406
|
},
|
|
3377
5407
|
{
|
|
3378
|
-
"search": "
|
|
5408
|
+
"search": "align sets horizontal alignment (left · center · right). minWidth / maxWidth / width set inline dimensions on the cell. vAlign is available on sonic-td only.\n",
|
|
3379
5409
|
"files": {
|
|
3380
|
-
"core/components/ui/
|
|
3381
|
-
"title": "
|
|
5410
|
+
"core/components/ui/table/table.md": {
|
|
5411
|
+
"title": "Table",
|
|
3382
5412
|
"hashes": {
|
|
3383
|
-
"
|
|
5413
|
+
"cell-alignment-and-width": {
|
|
3384
5414
|
"count": 1,
|
|
3385
|
-
"title": "
|
|
5415
|
+
"title": "Cell alignment and width",
|
|
3386
5416
|
"type": "paragraph"
|
|
3387
5417
|
}
|
|
3388
5418
|
}
|
|
@@ -3390,14 +5420,14 @@
|
|
|
3390
5420
|
}
|
|
3391
5421
|
},
|
|
3392
5422
|
{
|
|
3393
|
-
"search": "
|
|
5423
|
+
"search": "Tables scroll horizontally by default when columns exceed the viewport. Use minWidth on wide columns to preserve readable line length.\n",
|
|
3394
5424
|
"files": {
|
|
3395
|
-
"core/components/ui/
|
|
3396
|
-
"title": "
|
|
5425
|
+
"core/components/ui/table/table.md": {
|
|
5426
|
+
"title": "Table",
|
|
3397
5427
|
"hashes": {
|
|
3398
|
-
"
|
|
5428
|
+
"responsive-layout": {
|
|
3399
5429
|
"count": 1,
|
|
3400
|
-
"title": "
|
|
5430
|
+
"title": "Responsive layout",
|
|
3401
5431
|
"type": "paragraph"
|
|
3402
5432
|
}
|
|
3403
5433
|
}
|
|
@@ -3405,42 +5435,42 @@
|
|
|
3405
5435
|
}
|
|
3406
5436
|
},
|
|
3407
5437
|
{
|
|
3408
|
-
"search": "
|
|
5438
|
+
"search": "sonic-th uses position: sticky with top: 0 inside the table. For page-level sticky headers, set noCustomScroll on sonic-table and position sonic-thead (for example class="sticky top-16"). Add sonic-caption for a table title below the grid.\n",
|
|
3409
5439
|
"files": {
|
|
3410
|
-
"core/components/ui/
|
|
3411
|
-
"title": "
|
|
5440
|
+
"core/components/ui/table/table.md": {
|
|
5441
|
+
"title": "Table",
|
|
3412
5442
|
"hashes": {
|
|
3413
|
-
"
|
|
5443
|
+
"sticky-header-and-caption": {
|
|
3414
5444
|
"count": 1,
|
|
3415
|
-
"title": "",
|
|
3416
|
-
"type": "
|
|
5445
|
+
"title": "Sticky header and caption",
|
|
5446
|
+
"type": "paragraph"
|
|
3417
5447
|
}
|
|
3418
5448
|
}
|
|
3419
5449
|
}
|
|
3420
5450
|
}
|
|
3421
5451
|
},
|
|
3422
5452
|
{
|
|
3423
|
-
"search": "
|
|
5453
|
+
"search": "sonic-tbody wraps slotted rows in a native <tbody> and applies zebra / hover backgrounds to sonic-tr children.\n",
|
|
3424
5454
|
"files": {
|
|
3425
|
-
"core/components/ui/
|
|
3426
|
-
"title": "
|
|
5455
|
+
"core/components/ui/table/table.md": {
|
|
5456
|
+
"title": "Table",
|
|
3427
5457
|
"hashes": {
|
|
3428
|
-
"
|
|
5458
|
+
"sonic-thead--sonic-tbody--sonic-tfoot": {
|
|
3429
5459
|
"count": 1,
|
|
3430
|
-
"title": "",
|
|
3431
|
-
"type": "
|
|
5460
|
+
"title": "`sonic-thead` · `sonic-tbody` · `sonic-tfoot`",
|
|
5461
|
+
"type": "paragraph"
|
|
3432
5462
|
}
|
|
3433
5463
|
}
|
|
3434
5464
|
}
|
|
3435
5465
|
}
|
|
3436
5466
|
},
|
|
3437
5467
|
{
|
|
3438
|
-
"search": "
|
|
5468
|
+
"search": "Theme",
|
|
3439
5469
|
"files": {
|
|
3440
|
-
"core/components/ui/
|
|
3441
|
-
"title": "
|
|
5470
|
+
"core/components/ui/theme/theme.md": {
|
|
5471
|
+
"title": "Theme",
|
|
3442
5472
|
"hashes": {
|
|
3443
|
-
"
|
|
5473
|
+
"theme": {
|
|
3444
5474
|
"count": 1,
|
|
3445
5475
|
"title": "",
|
|
3446
5476
|
"type": "page"
|
|
@@ -3450,44 +5480,44 @@
|
|
|
3450
5480
|
}
|
|
3451
5481
|
},
|
|
3452
5482
|
{
|
|
3453
|
-
"search": "
|
|
5483
|
+
"search": "sonic-theme wraps a Concorde UI: it registers --sc-* design tokens and provides the default slot for your app. With no theme attribute (or theme="custom"), only shared primitives and your overrides apply—built-in light / dark / auto palettes are opt-in. Set color and font when the host should carry base text and typography; add Tailwind bg-base and block (or min-h-screen) on the tag for a full surface fill. Popovers, modals, and toasts mount under the nearest connected theme (see Pop container). Import @supersoniks/concorde/theme once at the app entry. For the full public token list and brand overrides, see Customization.\n",
|
|
3454
5484
|
"files": {
|
|
3455
|
-
"core/components/ui/
|
|
3456
|
-
"title": "
|
|
5485
|
+
"core/components/ui/theme/theme.md": {
|
|
5486
|
+
"title": "Theme",
|
|
3457
5487
|
"hashes": {
|
|
3458
|
-
"
|
|
5488
|
+
"theme": {
|
|
3459
5489
|
"count": 1,
|
|
3460
5490
|
"title": "",
|
|
3461
|
-
"type": "
|
|
5491
|
+
"type": "paragraph"
|
|
3462
5492
|
}
|
|
3463
5493
|
}
|
|
3464
5494
|
}
|
|
3465
5495
|
}
|
|
3466
5496
|
},
|
|
3467
5497
|
{
|
|
3468
|
-
"search": "
|
|
5498
|
+
"search": "Wrap interactive components so tokens and overlays resolve from one root.\n",
|
|
3469
5499
|
"files": {
|
|
3470
|
-
"core/components/ui/
|
|
3471
|
-
"title": "
|
|
5500
|
+
"core/components/ui/theme/theme.md": {
|
|
5501
|
+
"title": "Theme",
|
|
3472
5502
|
"hashes": {
|
|
3473
|
-
"
|
|
5503
|
+
"basic-example": {
|
|
3474
5504
|
"count": 1,
|
|
3475
|
-
"title": "",
|
|
3476
|
-
"type": "
|
|
5505
|
+
"title": "Basic example",
|
|
5506
|
+
"type": "paragraph"
|
|
3477
5507
|
}
|
|
3478
5508
|
}
|
|
3479
5509
|
}
|
|
3480
5510
|
}
|
|
3481
5511
|
},
|
|
3482
5512
|
{
|
|
3483
|
-
"search": "Default
|
|
5513
|
+
"search": "Default: omit theme or set theme="custom". The host loads core tokens (--sc-rounded, shadows, form defaults, …) and any --sc-* you set; it does not apply the built-in light or dark palette.\n",
|
|
3484
5514
|
"files": {
|
|
3485
|
-
"core/components/ui/
|
|
3486
|
-
"title": "
|
|
5515
|
+
"core/components/ui/theme/theme.md": {
|
|
5516
|
+
"title": "Theme",
|
|
3487
5517
|
"hashes": {
|
|
3488
|
-
"
|
|
5518
|
+
"theme-mode": {
|
|
3489
5519
|
"count": 1,
|
|
3490
|
-
"title": "
|
|
5520
|
+
"title": "Theme mode",
|
|
3491
5521
|
"type": "paragraph"
|
|
3492
5522
|
}
|
|
3493
5523
|
}
|
|
@@ -3495,14 +5525,14 @@
|
|
|
3495
5525
|
}
|
|
3496
5526
|
},
|
|
3497
5527
|
{
|
|
3498
|
-
"search": "
|
|
5528
|
+
"search": "Set theme to light or dark for Concorde’s preset palettes. Set theme="auto" to follow prefers-color-scheme (light palette until the OS prefers dark).\n",
|
|
3499
5529
|
"files": {
|
|
3500
|
-
"core/components/ui/
|
|
3501
|
-
"title": "
|
|
5530
|
+
"core/components/ui/theme/theme.md": {
|
|
5531
|
+
"title": "Theme",
|
|
3502
5532
|
"hashes": {
|
|
3503
|
-
"
|
|
5533
|
+
"theme-mode": {
|
|
3504
5534
|
"count": 1,
|
|
3505
|
-
"title": "
|
|
5535
|
+
"title": "Theme mode",
|
|
3506
5536
|
"type": "paragraph"
|
|
3507
5537
|
}
|
|
3508
5538
|
}
|
|
@@ -3510,14 +5540,14 @@
|
|
|
3510
5540
|
}
|
|
3511
5541
|
},
|
|
3512
5542
|
{
|
|
3513
|
-
"search": "
|
|
5543
|
+
"search": "color sets text from --sc-base-content. font applies --sc-font-family-base, --sc-font-weight-base, and --sc-font-style-base. For the page or shell background, use bg-base on sonic-theme (maps to --sc-base in Tailwind) with block so the host paints the surface. Components keep their own fallbacks when color / font are omitted.\n",
|
|
3514
5544
|
"files": {
|
|
3515
|
-
"core/components/ui/
|
|
3516
|
-
"title": "
|
|
5545
|
+
"core/components/ui/theme/theme.md": {
|
|
5546
|
+
"title": "Theme",
|
|
3517
5547
|
"hashes": {
|
|
3518
|
-
"
|
|
5548
|
+
"presentation": {
|
|
3519
5549
|
"count": 1,
|
|
3520
|
-
"title": "
|
|
5550
|
+
"title": "Presentation",
|
|
3521
5551
|
"type": "paragraph"
|
|
3522
5552
|
}
|
|
3523
5553
|
}
|
|
@@ -3525,14 +5555,14 @@
|
|
|
3525
5555
|
}
|
|
3526
5556
|
},
|
|
3527
5557
|
{
|
|
3528
|
-
"search": "
|
|
5558
|
+
"search": "Override primitives on sonic-theme (or :root / a project stylesheet). Derived radii, shadows, and control rounding are computed from tokens such as --sc-rounded—avoid copying long lists of internal variables unless you have a specific need.\n",
|
|
3529
5559
|
"files": {
|
|
3530
|
-
"core/components/ui/
|
|
3531
|
-
"title": "
|
|
5560
|
+
"core/components/ui/theme/theme.md": {
|
|
5561
|
+
"title": "Theme",
|
|
3532
5562
|
"hashes": {
|
|
3533
|
-
"
|
|
5563
|
+
"custom-tokens": {
|
|
3534
5564
|
"count": 1,
|
|
3535
|
-
"title": "
|
|
5565
|
+
"title": "Custom tokens",
|
|
3536
5566
|
"type": "paragraph"
|
|
3537
5567
|
}
|
|
3538
5568
|
}
|
|
@@ -3540,14 +5570,14 @@
|
|
|
3540
5570
|
}
|
|
3541
5571
|
},
|
|
3542
5572
|
{
|
|
3543
|
-
"search": "
|
|
5573
|
+
"search": "Theme.getPopContainer() returns the last connected sonic-theme, or document.body if none is connected. When a theme disconnects, the previous connected instance is adopted. Imperative Modal.create() and declarative sonic-modal use the same container.\n",
|
|
3544
5574
|
"files": {
|
|
3545
|
-
"core/components/ui/
|
|
3546
|
-
"title": "
|
|
5575
|
+
"core/components/ui/theme/theme.md": {
|
|
5576
|
+
"title": "Theme",
|
|
3547
5577
|
"hashes": {
|
|
3548
|
-
"
|
|
5578
|
+
"pop-container": {
|
|
3549
5579
|
"count": 1,
|
|
3550
|
-
"title": "
|
|
5580
|
+
"title": "Pop container",
|
|
3551
5581
|
"type": "paragraph"
|
|
3552
5582
|
}
|
|
3553
5583
|
}
|
|
@@ -3555,14 +5585,14 @@
|
|
|
3555
5585
|
}
|
|
3556
5586
|
},
|
|
3557
5587
|
{
|
|
3558
|
-
"search": "
|
|
5588
|
+
"search": "On connect, the theme publishes resolved --sc-* values and linked font stylesheet URLs (Google Fonts / Adobe Fonts) to the sonic-theme data channel and **postMessage**s them to same-page iframes. Iframes can request a refresh by posting { type: "GetSonicTheme" }.\n",
|
|
3559
5589
|
"files": {
|
|
3560
|
-
"core/components/ui/
|
|
3561
|
-
"title": "
|
|
5590
|
+
"core/components/ui/theme/theme.md": {
|
|
5591
|
+
"title": "Theme",
|
|
3562
5592
|
"hashes": {
|
|
3563
|
-
"
|
|
5593
|
+
"embedded-iframes": {
|
|
3564
5594
|
"count": 1,
|
|
3565
|
-
"title": "
|
|
5595
|
+
"title": "Embedded iframes",
|
|
3566
5596
|
"type": "paragraph"
|
|
3567
5597
|
}
|
|
3568
5598
|
}
|
|
@@ -3570,14 +5600,14 @@
|
|
|
3570
5600
|
}
|
|
3571
5601
|
},
|
|
3572
5602
|
{
|
|
3573
|
-
"search": "
|
|
5603
|
+
"search": "Surface background: Tailwind bg-base on sonic-theme (requires Concorde Tailwind color base → --sc-base).\n",
|
|
3574
5604
|
"files": {
|
|
3575
|
-
"core/components/ui/
|
|
3576
|
-
"title": "
|
|
5605
|
+
"core/components/ui/theme/theme.md": {
|
|
5606
|
+
"title": "Theme",
|
|
3577
5607
|
"hashes": {
|
|
3578
|
-
"
|
|
5608
|
+
"api-reference": {
|
|
3579
5609
|
"count": 1,
|
|
3580
|
-
"title": "
|
|
5610
|
+
"title": "API reference",
|
|
3581
5611
|
"type": "paragraph"
|
|
3582
5612
|
}
|
|
3583
5613
|
}
|
|
@@ -3585,12 +5615,12 @@
|
|
|
3585
5615
|
}
|
|
3586
5616
|
},
|
|
3587
5617
|
{
|
|
3588
|
-
"search": "
|
|
5618
|
+
"search": "Toast",
|
|
3589
5619
|
"files": {
|
|
3590
|
-
"core/components/ui/
|
|
3591
|
-
"title": "
|
|
5620
|
+
"core/components/ui/toast/toast.md": {
|
|
5621
|
+
"title": "Toast",
|
|
3592
5622
|
"hashes": {
|
|
3593
|
-
"
|
|
5623
|
+
"toast": {
|
|
3594
5624
|
"count": 1,
|
|
3595
5625
|
"title": "",
|
|
3596
5626
|
"type": "page"
|
|
@@ -3600,12 +5630,12 @@
|
|
|
3600
5630
|
}
|
|
3601
5631
|
},
|
|
3602
5632
|
{
|
|
3603
|
-
"search": "
|
|
5633
|
+
"search": "Toasts surface short-lived feedback in a fixed stack (bottom-right in the main window). Queue messages with SonicToast.add() on the global SonicToast class—the host sonic-toast is created automatically. Prefer label for a heading; use preserve or interactive text when the user must read or act before dismiss.\n",
|
|
3604
5634
|
"files": {
|
|
3605
|
-
"core/components/ui/
|
|
3606
|
-
"title": "
|
|
5635
|
+
"core/components/ui/toast/toast.md": {
|
|
5636
|
+
"title": "Toast",
|
|
3607
5637
|
"hashes": {
|
|
3608
|
-
"
|
|
5638
|
+
"toast": {
|
|
3609
5639
|
"count": 1,
|
|
3610
5640
|
"title": "",
|
|
3611
5641
|
"type": "paragraph"
|
|
@@ -3615,29 +5645,29 @@
|
|
|
3615
5645
|
}
|
|
3616
5646
|
},
|
|
3617
5647
|
{
|
|
3618
|
-
"search": "
|
|
5648
|
+
"search": "Click the button to show a toast.\n",
|
|
3619
5649
|
"files": {
|
|
3620
|
-
"core/components/ui/
|
|
3621
|
-
"title": "
|
|
5650
|
+
"core/components/ui/toast/toast.md": {
|
|
5651
|
+
"title": "Toast",
|
|
3622
5652
|
"hashes": {
|
|
3623
|
-
"
|
|
5653
|
+
"basic-example": {
|
|
3624
5654
|
"count": 1,
|
|
3625
|
-
"title": "",
|
|
3626
|
-
"type": "
|
|
5655
|
+
"title": "Basic example",
|
|
5656
|
+
"type": "paragraph"
|
|
3627
5657
|
}
|
|
3628
5658
|
}
|
|
3629
5659
|
}
|
|
3630
5660
|
}
|
|
3631
5661
|
},
|
|
3632
5662
|
{
|
|
3633
|
-
"search": "
|
|
5663
|
+
"search": "status drives color, icon, and live-region behavior. Omit status or pass an empty string for a neutral toast.\n",
|
|
3634
5664
|
"files": {
|
|
3635
|
-
"core/components/ui/
|
|
3636
|
-
"title": "
|
|
5665
|
+
"core/components/ui/toast/toast.md": {
|
|
5666
|
+
"title": "Toast",
|
|
3637
5667
|
"hashes": {
|
|
3638
|
-
"
|
|
5668
|
+
"status": {
|
|
3639
5669
|
"count": 1,
|
|
3640
|
-
"title": "
|
|
5670
|
+
"title": "Status",
|
|
3641
5671
|
"type": "paragraph"
|
|
3642
5672
|
}
|
|
3643
5673
|
}
|
|
@@ -3645,14 +5675,14 @@
|
|
|
3645
5675
|
}
|
|
3646
5676
|
},
|
|
3647
5677
|
{
|
|
3648
|
-
"search": "
|
|
5678
|
+
"search": "Set label for a bold title above text. title still works but is deprecated—use label in new code.\n",
|
|
3649
5679
|
"files": {
|
|
3650
|
-
"core/components/ui/
|
|
3651
|
-
"title": "
|
|
5680
|
+
"core/components/ui/toast/toast.md": {
|
|
5681
|
+
"title": "Toast",
|
|
3652
5682
|
"hashes": {
|
|
3653
|
-
"
|
|
5683
|
+
"label": {
|
|
3654
5684
|
"count": 1,
|
|
3655
|
-
"title": "
|
|
5685
|
+
"title": "Label",
|
|
3656
5686
|
"type": "paragraph"
|
|
3657
5687
|
}
|
|
3658
5688
|
}
|
|
@@ -3660,14 +5690,14 @@
|
|
|
3660
5690
|
}
|
|
3661
5691
|
},
|
|
3662
5692
|
{
|
|
3663
|
-
"search": "
|
|
5693
|
+
"search": "text (and label) can include HTML strings. Links and controls in text automatically enable preserve so the toast does not auto-hide while the user interacts.\n",
|
|
3664
5694
|
"files": {
|
|
3665
|
-
"core/components/ui/
|
|
3666
|
-
"title": "
|
|
5695
|
+
"core/components/ui/toast/toast.md": {
|
|
5696
|
+
"title": "Toast",
|
|
3667
5697
|
"hashes": {
|
|
3668
|
-
"
|
|
5698
|
+
"html-in-text": {
|
|
3669
5699
|
"count": 1,
|
|
3670
|
-
"title": "
|
|
5700
|
+
"title": "HTML in text",
|
|
3671
5701
|
"type": "paragraph"
|
|
3672
5702
|
}
|
|
3673
5703
|
}
|
|
@@ -3675,29 +5705,29 @@
|
|
|
3675
5705
|
}
|
|
3676
5706
|
},
|
|
3677
5707
|
{
|
|
3678
|
-
"search": "
|
|
5708
|
+
"search": "Without preserve, toasts auto-hide after about six seconds (timer pauses on hover or focus). Set preserve to keep the toast until the user closes it.\n",
|
|
3679
5709
|
"files": {
|
|
3680
5710
|
"core/components/ui/toast/toast.md": {
|
|
3681
5711
|
"title": "Toast",
|
|
3682
5712
|
"hashes": {
|
|
3683
|
-
"
|
|
5713
|
+
"preserve": {
|
|
3684
5714
|
"count": 1,
|
|
3685
|
-
"title": "",
|
|
3686
|
-
"type": "
|
|
5715
|
+
"title": "Preserve",
|
|
5716
|
+
"type": "paragraph"
|
|
3687
5717
|
}
|
|
3688
5718
|
}
|
|
3689
5719
|
}
|
|
3690
5720
|
}
|
|
3691
5721
|
},
|
|
3692
5722
|
{
|
|
3693
|
-
"search": "
|
|
5723
|
+
"search": "With dismissForever and a stable id, closing the toast stores dismissal in localStorage—SonicToast.add skips it on later visits. Duplicate payloads (same fields, ignoring id) are not queued twice.\n",
|
|
3694
5724
|
"files": {
|
|
3695
5725
|
"core/components/ui/toast/toast.md": {
|
|
3696
5726
|
"title": "Toast",
|
|
3697
5727
|
"hashes": {
|
|
3698
|
-
"
|
|
5728
|
+
"dismiss-forever": {
|
|
3699
5729
|
"count": 1,
|
|
3700
|
-
"title": "
|
|
5730
|
+
"title": "Dismiss forever",
|
|
3701
5731
|
"type": "paragraph"
|
|
3702
5732
|
}
|
|
3703
5733
|
}
|
|
@@ -3705,14 +5735,14 @@
|
|
|
3705
5735
|
}
|
|
3706
5736
|
},
|
|
3707
5737
|
{
|
|
3708
|
-
"search": "
|
|
5738
|
+
"search": "ghost renders a semi-transparent, non-interactive toast—useful for loading or background states. SonicToast.removeAll leaves ghost toasts in place.\n",
|
|
3709
5739
|
"files": {
|
|
3710
5740
|
"core/components/ui/toast/toast.md": {
|
|
3711
5741
|
"title": "Toast",
|
|
3712
5742
|
"hashes": {
|
|
3713
|
-
"
|
|
5743
|
+
"ghost": {
|
|
3714
5744
|
"count": 1,
|
|
3715
|
-
"title": "
|
|
5745
|
+
"title": "Ghost",
|
|
3716
5746
|
"type": "paragraph"
|
|
3717
5747
|
}
|
|
3718
5748
|
}
|
|
@@ -3720,14 +5750,14 @@
|
|
|
3720
5750
|
}
|
|
3721
5751
|
},
|
|
3722
5752
|
{
|
|
3723
|
-
"search": "
|
|
5753
|
+
"search": "Use static helpers to clear the stack from app logic (for example after navigation).\n",
|
|
3724
5754
|
"files": {
|
|
3725
5755
|
"core/components/ui/toast/toast.md": {
|
|
3726
5756
|
"title": "Toast",
|
|
3727
5757
|
"hashes": {
|
|
3728
|
-
"
|
|
5758
|
+
"dismissal": {
|
|
3729
5759
|
"count": 1,
|
|
3730
|
-
"title": "
|
|
5760
|
+
"title": "Dismissal",
|
|
3731
5761
|
"type": "paragraph"
|
|
3732
5762
|
}
|
|
3733
5763
|
}
|
|
@@ -3735,14 +5765,14 @@
|
|
|
3735
5765
|
}
|
|
3736
5766
|
},
|
|
3737
5767
|
{
|
|
3738
|
-
"search": "
|
|
5768
|
+
"search": "Removes every toast except ghost items.\n",
|
|
3739
5769
|
"files": {
|
|
3740
5770
|
"core/components/ui/toast/toast.md": {
|
|
3741
5771
|
"title": "Toast",
|
|
3742
5772
|
"hashes": {
|
|
3743
|
-
"
|
|
5773
|
+
"remove-all": {
|
|
3744
5774
|
"count": 1,
|
|
3745
|
-
"title": "
|
|
5775
|
+
"title": "Remove all",
|
|
3746
5776
|
"type": "paragraph"
|
|
3747
5777
|
}
|
|
3748
5778
|
}
|
|
@@ -3750,14 +5780,14 @@
|
|
|
3750
5780
|
}
|
|
3751
5781
|
},
|
|
3752
5782
|
{
|
|
3753
|
-
"search": "
|
|
5783
|
+
"search": "Removes toasts that are not preserve.\n",
|
|
3754
5784
|
"files": {
|
|
3755
5785
|
"core/components/ui/toast/toast.md": {
|
|
3756
5786
|
"title": "Toast",
|
|
3757
5787
|
"hashes": {
|
|
3758
|
-
"
|
|
5788
|
+
"remove-temporary-items": {
|
|
3759
5789
|
"count": 1,
|
|
3760
|
-
"title": "
|
|
5790
|
+
"title": "Remove temporary items",
|
|
3761
5791
|
"type": "paragraph"
|
|
3762
5792
|
}
|
|
3763
5793
|
}
|
|
@@ -3765,14 +5795,14 @@
|
|
|
3765
5795
|
}
|
|
3766
5796
|
},
|
|
3767
5797
|
{
|
|
3768
|
-
"search": "
|
|
5798
|
+
"search": "Each toast uses role="alert" for error and role="status" otherwise (with aria-live="polite" when applicable). Status icons are decorative (aria-hidden). The close control has an i18n aria-label. When there is no label, a truncated string aria-label may be derived from plain text.\n",
|
|
3769
5799
|
"files": {
|
|
3770
5800
|
"core/components/ui/toast/toast.md": {
|
|
3771
5801
|
"title": "Toast",
|
|
3772
5802
|
"hashes": {
|
|
3773
|
-
"
|
|
5803
|
+
"accessibility": {
|
|
3774
5804
|
"count": 1,
|
|
3775
|
-
"title": "
|
|
5805
|
+
"title": "Accessibility",
|
|
3776
5806
|
"type": "paragraph"
|
|
3777
5807
|
}
|
|
3778
5808
|
}
|
|
@@ -3780,14 +5810,14 @@
|
|
|
3780
5810
|
}
|
|
3781
5811
|
},
|
|
3782
5812
|
{
|
|
3783
|
-
"search": "
|
|
5813
|
+
"search": "Options passed to SonicToast.add(conf):\n",
|
|
3784
5814
|
"files": {
|
|
3785
5815
|
"core/components/ui/toast/toast.md": {
|
|
3786
5816
|
"title": "Toast",
|
|
3787
5817
|
"hashes": {
|
|
3788
|
-
"
|
|
5818
|
+
"api-reference": {
|
|
3789
5819
|
"count": 1,
|
|
3790
|
-
"title": "
|
|
5820
|
+
"title": "API reference",
|
|
3791
5821
|
"type": "paragraph"
|
|
3792
5822
|
}
|
|
3793
5823
|
}
|
|
@@ -3795,14 +5825,14 @@
|
|
|
3795
5825
|
}
|
|
3796
5826
|
},
|
|
3797
5827
|
{
|
|
3798
|
-
"search": "
|
|
5828
|
+
"search": "sonic-toast is mounted automatically; sonic-toast-item is internal. In iframes, toasts can delegate to the parent window via postMessage.\n",
|
|
3799
5829
|
"files": {
|
|
3800
5830
|
"core/components/ui/toast/toast.md": {
|
|
3801
5831
|
"title": "Toast",
|
|
3802
5832
|
"hashes": {
|
|
3803
|
-
"
|
|
5833
|
+
"api-reference": {
|
|
3804
5834
|
"count": 1,
|
|
3805
|
-
"title": "
|
|
5835
|
+
"title": "API reference",
|
|
3806
5836
|
"type": "paragraph"
|
|
3807
5837
|
}
|
|
3808
5838
|
}
|
|
@@ -3825,7 +5855,22 @@
|
|
|
3825
5855
|
}
|
|
3826
5856
|
},
|
|
3827
5857
|
{
|
|
3828
|
-
"search": "
|
|
5858
|
+
"search": "Tooltip shows a short label on hover (and on focus when the trigger can receive focus). Wrap the trigger in the default slot—buttons, icons, or plain text. Default placement is top (center-aligned). An empty label hides the bubble the same way as disabled.\n",
|
|
5859
|
+
"files": {
|
|
5860
|
+
"core/components/ui/tooltip/tooltip.md": {
|
|
5861
|
+
"title": "Tooltip",
|
|
5862
|
+
"hashes": {
|
|
5863
|
+
"tooltip": {
|
|
5864
|
+
"count": 1,
|
|
5865
|
+
"title": "",
|
|
5866
|
+
"type": "paragraph"
|
|
5867
|
+
}
|
|
5868
|
+
}
|
|
5869
|
+
}
|
|
5870
|
+
}
|
|
5871
|
+
},
|
|
5872
|
+
{
|
|
5873
|
+
"search": "Use top · bottom · left · right for the main axis. Add -start or -end to align the bubble along the anchor edge.\n",
|
|
3829
5874
|
"files": {
|
|
3830
5875
|
"core/components/ui/tooltip/tooltip.md": {
|
|
3831
5876
|
"title": "Tooltip",
|
|
@@ -3839,6 +5884,51 @@
|
|
|
3839
5884
|
}
|
|
3840
5885
|
}
|
|
3841
5886
|
},
|
|
5887
|
+
{
|
|
5888
|
+
"search": "label supports line breaks (\\n in markup or multiline text). Lines are trimmed; &nbsp; is normalized to spaces. white-space: pre-line preserves breaks in the bubble (max width 18rem).\n",
|
|
5889
|
+
"files": {
|
|
5890
|
+
"core/components/ui/tooltip/tooltip.md": {
|
|
5891
|
+
"title": "Tooltip",
|
|
5892
|
+
"hashes": {
|
|
5893
|
+
"label-formatting": {
|
|
5894
|
+
"count": 1,
|
|
5895
|
+
"title": "Label formatting",
|
|
5896
|
+
"type": "paragraph"
|
|
5897
|
+
}
|
|
5898
|
+
}
|
|
5899
|
+
}
|
|
5900
|
+
}
|
|
5901
|
+
},
|
|
5902
|
+
{
|
|
5903
|
+
"search": "On non-interactive triggers, set focusable so the host gets tabindex="0" and the tooltip opens on keyboard focus as well as hover.\n",
|
|
5904
|
+
"files": {
|
|
5905
|
+
"core/components/ui/tooltip/tooltip.md": {
|
|
5906
|
+
"title": "Tooltip",
|
|
5907
|
+
"hashes": {
|
|
5908
|
+
"focusable": {
|
|
5909
|
+
"count": 1,
|
|
5910
|
+
"title": "Focusable",
|
|
5911
|
+
"type": "paragraph"
|
|
5912
|
+
}
|
|
5913
|
+
}
|
|
5914
|
+
}
|
|
5915
|
+
}
|
|
5916
|
+
},
|
|
5917
|
+
{
|
|
5918
|
+
"search": "The bubble uses popover="hint" (non-modal, no pointer capture). Prefer focusable when the slotted content is not already focusable. When the Popover API is unavailable, the host falls back to the native title attribute with a single-line label. Opacity transitions respect prefers-reduced-motion.\n",
|
|
5919
|
+
"files": {
|
|
5920
|
+
"core/components/ui/tooltip/tooltip.md": {
|
|
5921
|
+
"title": "Tooltip",
|
|
5922
|
+
"hashes": {
|
|
5923
|
+
"accessibility": {
|
|
5924
|
+
"count": 1,
|
|
5925
|
+
"title": "Accessibility",
|
|
5926
|
+
"type": "paragraph"
|
|
5927
|
+
}
|
|
5928
|
+
}
|
|
5929
|
+
}
|
|
5930
|
+
}
|
|
5931
|
+
},
|
|
3842
5932
|
{
|
|
3843
5933
|
"search": "Data flow",
|
|
3844
5934
|
"files": {
|
|
@@ -8950,7 +11040,7 @@
|
|
|
8950
11040
|
}
|
|
8951
11041
|
},
|
|
8952
11042
|
{
|
|
8953
|
-
"search": "Based on lit.dev, Concorde is a collection of web components for shared apps and websites.Build UIs without tying components to a specific host stack, while keeping visual consistency through
|
|
11043
|
+
"search": "Based on lit.dev, Concorde is a collection of web components for shared apps and websites.Build UIs without tying components to a specific host stack, while keeping visual consistency through the smallest set of CSS variables needed to define a theme.\n",
|
|
8954
11044
|
"files": {
|
|
8955
11045
|
"docs/_getting-started/start.md": {
|
|
8956
11046
|
"title": "Introduction",
|
|
@@ -9010,12 +11100,12 @@
|
|
|
9010
11100
|
}
|
|
9011
11101
|
},
|
|
9012
11102
|
{
|
|
9013
|
-
"search": "
|
|
11103
|
+
"search": "Customization",
|
|
9014
11104
|
"files": {
|
|
9015
11105
|
"docs/_getting-started/theming.md": {
|
|
9016
|
-
"title": "
|
|
11106
|
+
"title": "Customization",
|
|
9017
11107
|
"hashes": {
|
|
9018
|
-
"
|
|
11108
|
+
"customization": {
|
|
9019
11109
|
"count": 1,
|
|
9020
11110
|
"title": "",
|
|
9021
11111
|
"type": "page"
|
|
@@ -9025,14 +11115,29 @@
|
|
|
9025
11115
|
}
|
|
9026
11116
|
},
|
|
9027
11117
|
{
|
|
9028
|
-
"search": "
|
|
11118
|
+
"search": "Concorde components ship with default styles (fallback values in each component and in <sonic-theme>).You do not need to define any CSS variables to get a usable UI.\n",
|
|
11119
|
+
"files": {
|
|
11120
|
+
"docs/_getting-started/theming.md": {
|
|
11121
|
+
"title": "Customization",
|
|
11122
|
+
"hashes": {
|
|
11123
|
+
"theme-first-customization": {
|
|
11124
|
+
"count": 1,
|
|
11125
|
+
"title": "Theme-first customization",
|
|
11126
|
+
"type": "paragraph"
|
|
11127
|
+
}
|
|
11128
|
+
}
|
|
11129
|
+
}
|
|
11130
|
+
}
|
|
11131
|
+
},
|
|
11132
|
+
{
|
|
11133
|
+
"search": "To align the kit with your brand, override only the essential theme tokens on <sonic-theme>, on :root, or in a project stylesheet.Concorde derives radius steps, button/input rounding, shadows, and most per-component layout from these primitives—do not copy long lists of derived variables unless you have a specific need.\n",
|
|
9029
11134
|
"files": {
|
|
9030
11135
|
"docs/_getting-started/theming.md": {
|
|
9031
|
-
"title": "
|
|
11136
|
+
"title": "Customization",
|
|
9032
11137
|
"hashes": {
|
|
9033
|
-
"
|
|
11138
|
+
"theme-first-customization": {
|
|
9034
11139
|
"count": 1,
|
|
9035
|
-
"title": "
|
|
11140
|
+
"title": "Theme-first customization",
|
|
9036
11141
|
"type": "paragraph"
|
|
9037
11142
|
}
|
|
9038
11143
|
}
|
|
@@ -9040,14 +11145,14 @@
|
|
|
9040
11145
|
}
|
|
9041
11146
|
},
|
|
9042
11147
|
{
|
|
9043
|
-
"search": "
|
|
11148
|
+
"search": "Popovers, modals, and toasts mount under the nearest <sonic-theme>.\n",
|
|
9044
11149
|
"files": {
|
|
9045
11150
|
"docs/_getting-started/theming.md": {
|
|
9046
|
-
"title": "
|
|
11151
|
+
"title": "Customization",
|
|
9047
11152
|
"hashes": {
|
|
9048
|
-
"
|
|
11153
|
+
"theme-first-customization": {
|
|
9049
11154
|
"count": 1,
|
|
9050
|
-
"title": "
|
|
11155
|
+
"title": "Theme-first customization",
|
|
9051
11156
|
"type": "paragraph"
|
|
9052
11157
|
}
|
|
9053
11158
|
}
|
|
@@ -9055,14 +11160,14 @@
|
|
|
9055
11160
|
}
|
|
9056
11161
|
},
|
|
9057
11162
|
{
|
|
9058
|
-
"search": "
|
|
11163
|
+
"search": "Example (full brand override on <sonic-theme> or :root). Set every essential token below; derived radii and shadows still come from the theme engine—only --sc-rounded is listed here.\n",
|
|
9059
11164
|
"files": {
|
|
9060
11165
|
"docs/_getting-started/theming.md": {
|
|
9061
|
-
"title": "
|
|
11166
|
+
"title": "Customization",
|
|
9062
11167
|
"hashes": {
|
|
9063
|
-
"
|
|
11168
|
+
"customization-example": {
|
|
9064
11169
|
"count": 1,
|
|
9065
|
-
"title": "
|
|
11170
|
+
"title": "Customization example",
|
|
9066
11171
|
"type": "paragraph"
|
|
9067
11172
|
}
|
|
9068
11173
|
}
|
|
@@ -9070,14 +11175,14 @@
|
|
|
9070
11175
|
}
|
|
9071
11176
|
},
|
|
9072
11177
|
{
|
|
9073
|
-
"search": "
|
|
11178
|
+
"search": " /* Text/icons on semantic fills */\n --sc-primary-content: #fff;\n --sc-secondary-content: #fff;\n --sc-info-content: #fff;\n --sc-danger-content: #fff;\n --sc-warning-content: #fff;\n --sc-success-content: #fff;\n --sc-contrast-content: #fff;\n",
|
|
9074
11179
|
"files": {
|
|
9075
11180
|
"docs/_getting-started/theming.md": {
|
|
9076
|
-
"title": "
|
|
11181
|
+
"title": "Customization",
|
|
9077
11182
|
"hashes": {
|
|
9078
|
-
"
|
|
11183
|
+
"customization-example": {
|
|
9079
11184
|
"count": 1,
|
|
9080
|
-
"title": "
|
|
11185
|
+
"title": "Customization example",
|
|
9081
11186
|
"type": "paragraph"
|
|
9082
11187
|
}
|
|
9083
11188
|
}
|
|
@@ -9085,14 +11190,14 @@
|
|
|
9085
11190
|
}
|
|
9086
11191
|
},
|
|
9087
11192
|
{
|
|
9088
|
-
"search": "
|
|
11193
|
+
"search": " /* Neutral fills */\n --sc-base: #fff;\n --sc-base-50: #f6f6f5;\n --sc-base-100: #ededec;\n --sc-base-200: #d7d7d4;\n --sc-base-300: #c8c7c4;\n --sc-base-400: #a8a7a2;\n --sc-base-500: #94938c;\n --sc-base-600: #76756c;\n --sc-base-700: #59584e;\n --sc-base-800: #47463b;\n --sc-base-900: #353429;\n",
|
|
9089
11194
|
"files": {
|
|
9090
11195
|
"docs/_getting-started/theming.md": {
|
|
9091
|
-
"title": "
|
|
11196
|
+
"title": "Customization",
|
|
9092
11197
|
"hashes": {
|
|
9093
|
-
"
|
|
11198
|
+
"customization-example": {
|
|
9094
11199
|
"count": 1,
|
|
9095
|
-
"title": "
|
|
11200
|
+
"title": "Customization example",
|
|
9096
11201
|
"type": "paragraph"
|
|
9097
11202
|
}
|
|
9098
11203
|
}
|
|
@@ -9100,14 +11205,14 @@
|
|
|
9100
11205
|
}
|
|
9101
11206
|
},
|
|
9102
11207
|
{
|
|
9103
|
-
"search": "
|
|
11208
|
+
"search": " /* Text/icons on neutral surfaces */\n --sc-base-content: var(--sc-base-900);\n",
|
|
9104
11209
|
"files": {
|
|
9105
11210
|
"docs/_getting-started/theming.md": {
|
|
9106
|
-
"title": "
|
|
11211
|
+
"title": "Customization",
|
|
9107
11212
|
"hashes": {
|
|
9108
|
-
"
|
|
11213
|
+
"customization-example": {
|
|
9109
11214
|
"count": 1,
|
|
9110
|
-
"title": "
|
|
11215
|
+
"title": "Customization example",
|
|
9111
11216
|
"type": "paragraph"
|
|
9112
11217
|
}
|
|
9113
11218
|
}
|
|
@@ -9115,14 +11220,14 @@
|
|
|
9115
11220
|
}
|
|
9116
11221
|
},
|
|
9117
11222
|
{
|
|
9118
|
-
"search": "
|
|
11223
|
+
"search": " /* Typography */\n --sc-font-family-base: "Oswald", system-ui, -apple-system, "Segoe UI", Roboto,\n "Helvetica Neue", Arial, sans-serif;\n --sc-headings-font-family: "alternate-gothic-compressed", system-ui, sans-serif;\n --sc-headings-line-height: 1.1;\n --sc-headings-font-weight: bold;\n --sc-headings-text-transform: none;\n",
|
|
9119
11224
|
"files": {
|
|
9120
11225
|
"docs/_getting-started/theming.md": {
|
|
9121
|
-
"title": "
|
|
11226
|
+
"title": "Customization",
|
|
9122
11227
|
"hashes": {
|
|
9123
|
-
"
|
|
11228
|
+
"customization-example": {
|
|
9124
11229
|
"count": 1,
|
|
9125
|
-
"title": "
|
|
11230
|
+
"title": "Customization example",
|
|
9126
11231
|
"type": "paragraph"
|
|
9127
11232
|
}
|
|
9128
11233
|
}
|
|
@@ -9130,14 +11235,14 @@
|
|
|
9130
11235
|
}
|
|
9131
11236
|
},
|
|
9132
11237
|
{
|
|
9133
|
-
"search": "
|
|
11238
|
+
"search": " /* Shape (primitive only) */\n --sc-rounded: 0;\n",
|
|
9134
11239
|
"files": {
|
|
9135
11240
|
"docs/_getting-started/theming.md": {
|
|
9136
|
-
"title": "
|
|
11241
|
+
"title": "Customization",
|
|
9137
11242
|
"hashes": {
|
|
9138
|
-
"
|
|
11243
|
+
"customization-example": {
|
|
9139
11244
|
"count": 1,
|
|
9140
|
-
"title": "
|
|
11245
|
+
"title": "Customization example",
|
|
9141
11246
|
"type": "paragraph"
|
|
9142
11247
|
}
|
|
9143
11248
|
}
|
|
@@ -9145,14 +11250,14 @@
|
|
|
9145
11250
|
}
|
|
9146
11251
|
},
|
|
9147
11252
|
{
|
|
9148
|
-
"search": "
|
|
11253
|
+
"search": " /* Forms */\n --sc-border-width: 0.2rem;\n --sc-form-height: 2em;\n --sc-input-bg: var(--sc-base);\n --sc-input-color: var(--sc-base-content);\n --sc-input-border-color: var(--sc-input-color);\n --sc-input-active-bg: var(--sc-primary);\n --sc-input-active-color: var(--sc-primary-content);\n --sc-input-active-border-color: var(--sc-primary);\n}\n \n\n",
|
|
9149
11254
|
"files": {
|
|
9150
11255
|
"docs/_getting-started/theming.md": {
|
|
9151
|
-
"title": "
|
|
11256
|
+
"title": "Customization",
|
|
9152
11257
|
"hashes": {
|
|
9153
|
-
"
|
|
11258
|
+
"customization-example": {
|
|
9154
11259
|
"count": 1,
|
|
9155
|
-
"title": "
|
|
11260
|
+
"title": "Customization example",
|
|
9156
11261
|
"type": "paragraph"
|
|
9157
11262
|
}
|
|
9158
11263
|
}
|
|
@@ -9160,14 +11265,14 @@
|
|
|
9160
11265
|
}
|
|
9161
11266
|
},
|
|
9162
11267
|
{
|
|
9163
|
-
"search": "
|
|
11268
|
+
"search": " Palette generator: concordecolors\n",
|
|
9164
11269
|
"files": {
|
|
9165
11270
|
"docs/_getting-started/theming.md": {
|
|
9166
|
-
"title": "
|
|
11271
|
+
"title": "Customization",
|
|
9167
11272
|
"hashes": {
|
|
9168
|
-
"
|
|
11273
|
+
"customization-example": {
|
|
9169
11274
|
"count": 1,
|
|
9170
|
-
"title": "
|
|
11275
|
+
"title": "Customization example",
|
|
9171
11276
|
"type": "paragraph"
|
|
9172
11277
|
}
|
|
9173
11278
|
}
|
|
@@ -9175,14 +11280,14 @@
|
|
|
9175
11280
|
}
|
|
9176
11281
|
},
|
|
9177
11282
|
{
|
|
9178
|
-
"search": "
|
|
11283
|
+
"search": "Without these overrides, components keep Concorde’s per-component fallbacks. Built-in light/dark palettes apply only when you set theme="light", theme="dark", or theme="auto".\n",
|
|
9179
11284
|
"files": {
|
|
9180
11285
|
"docs/_getting-started/theming.md": {
|
|
9181
|
-
"title": "
|
|
11286
|
+
"title": "Customization",
|
|
9182
11287
|
"hashes": {
|
|
9183
|
-
"
|
|
11288
|
+
"customization-example": {
|
|
9184
11289
|
"count": 1,
|
|
9185
|
-
"title": "
|
|
11290
|
+
"title": "Customization example",
|
|
9186
11291
|
"type": "paragraph"
|
|
9187
11292
|
}
|
|
9188
11293
|
}
|
|
@@ -9190,14 +11295,14 @@
|
|
|
9190
11295
|
}
|
|
9191
11296
|
},
|
|
9192
11297
|
{
|
|
9193
|
-
"search": "
|
|
11298
|
+
"search": "What we intentionally avoid: large public --sc-alert-* / --sc-badge-* APIs or ::part() styling hooks on most components. Prefer attributes (type, status, size, …) and the theme tokens above.\n",
|
|
9194
11299
|
"files": {
|
|
9195
11300
|
"docs/_getting-started/theming.md": {
|
|
9196
|
-
"title": "
|
|
11301
|
+
"title": "Customization",
|
|
9197
11302
|
"hashes": {
|
|
9198
|
-
"
|
|
11303
|
+
"customization-example": {
|
|
9199
11304
|
"count": 1,
|
|
9200
|
-
"title": "
|
|
11305
|
+
"title": "Customization example",
|
|
9201
11306
|
"type": "paragraph"
|
|
9202
11307
|
}
|
|
9203
11308
|
}
|
|
@@ -9205,14 +11310,14 @@
|
|
|
9205
11310
|
}
|
|
9206
11311
|
},
|
|
9207
11312
|
{
|
|
9208
|
-
"search": "
|
|
11313
|
+
"search": "These are the smallest set we recommend customizing. Everything else should stay internal to the theme or to components (--sc_* private variables, attributes like type, size, variant).\n",
|
|
9209
11314
|
"files": {
|
|
9210
11315
|
"docs/_getting-started/theming.md": {
|
|
9211
|
-
"title": "
|
|
11316
|
+
"title": "Customization",
|
|
9212
11317
|
"hashes": {
|
|
9213
|
-
"
|
|
11318
|
+
"only-essential-css-variables-public-theme-api": {
|
|
9214
11319
|
"count": 1,
|
|
9215
|
-
"title": "
|
|
11320
|
+
"title": "Only essential CSS variables (public theme API)",
|
|
9216
11321
|
"type": "paragraph"
|
|
9217
11322
|
}
|
|
9218
11323
|
}
|
|
@@ -9220,14 +11325,14 @@
|
|
|
9220
11325
|
}
|
|
9221
11326
|
},
|
|
9222
11327
|
{
|
|
9223
|
-
"search": "
|
|
11328
|
+
"search": "Tokens without a -content suffix are fill / background colors.Tokens with -content are text and icons on top of the matching fill (solid buttons, badges, alerts, etc.).\n",
|
|
9224
11329
|
"files": {
|
|
9225
11330
|
"docs/_getting-started/theming.md": {
|
|
9226
|
-
"title": "
|
|
11331
|
+
"title": "Customization",
|
|
9227
11332
|
"hashes": {
|
|
9228
|
-
"
|
|
11333
|
+
"surfaces-and-foreground": {
|
|
9229
11334
|
"count": 1,
|
|
9230
|
-
"title": "
|
|
11335
|
+
"title": "Surfaces and foreground",
|
|
9231
11336
|
"type": "paragraph"
|
|
9232
11337
|
}
|
|
9233
11338
|
}
|
|
@@ -9235,14 +11340,14 @@
|
|
|
9235
11340
|
}
|
|
9236
11341
|
},
|
|
9237
11342
|
{
|
|
9238
|
-
"search": "
|
|
11343
|
+
"search": "Interactive controls expose a few extra theme-level tokens; prefer these over styling individual inputs from outside.\n",
|
|
9239
11344
|
"files": {
|
|
9240
11345
|
"docs/_getting-started/theming.md": {
|
|
9241
|
-
"title": "
|
|
11346
|
+
"title": "Customization",
|
|
9242
11347
|
"hashes": {
|
|
9243
|
-
"
|
|
11348
|
+
"forms-only-if-you-customize-inputs-globally": {
|
|
9244
11349
|
"count": 1,
|
|
9245
|
-
"title": "
|
|
11350
|
+
"title": "Forms (only if you customize inputs globally)",
|
|
9246
11351
|
"type": "paragraph"
|
|
9247
11352
|
}
|
|
9248
11353
|
}
|
|
@@ -9250,14 +11355,14 @@
|
|
|
9250
11355
|
}
|
|
9251
11356
|
},
|
|
9252
11357
|
{
|
|
9253
|
-
"search": "
|
|
11358
|
+
"search": "Set tailwind.config.js to match concorde style token in your custom component.\n",
|
|
9254
11359
|
"files": {
|
|
9255
11360
|
"docs/_getting-started/theming.md": {
|
|
9256
|
-
"title": "
|
|
11361
|
+
"title": "Customization",
|
|
9257
11362
|
"hashes": {
|
|
9258
|
-
"
|
|
11363
|
+
"tailwind-in-new-components-": {
|
|
9259
11364
|
"count": 1,
|
|
9260
|
-
"title": "
|
|
11365
|
+
"title": "Tailwind in new components ?",
|
|
9261
11366
|
"type": "paragraph"
|
|
9262
11367
|
}
|
|
9263
11368
|
}
|