@supersoniks/concorde 5.0.5 → 5.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/workflows/ci.yml +21 -0
- package/.github-export-ignore +30 -0
- package/.tmp-cem/custom-elements.json +13705 -0
- package/CONTRIBUTING.md +59 -0
- package/DEV.md +54 -0
- package/LICENSE +21 -0
- package/OPEN_SOURCE_CHECKPOINT.md +133 -0
- package/build-infos.json +1 -1
- package/concorde-3d.bundle.js +3960 -0
- package/concorde-3d.es.js +33433 -0
- package/concorde-core.bundle.js +196 -196
- package/concorde-core.es.js +3685 -3405
- package/concorde-hugging-face-infer.bundle.js +32 -0
- package/concorde-hugging-face-infer.es.js +2952 -0
- package/concorde-interactive.bundle.js +1157 -0
- package/concorde-interactive.es.js +10734 -0
- package/concorde-shader.bundle.js +116 -0
- package/concorde-shader.es.js +8353 -0
- package/concorde-webgpu.bundle.js +307 -0
- package/concorde-webgpu.es.js +8627 -0
- package/custom-elements-manifest.config.mjs +14 -0
- package/dist/concorde-core.bundle.js +196 -196
- package/dist/concorde-core.es.js +3685 -3405
- package/docs/assets/{index-wVZpLVYW.js → index-D8MVWqY6.js} +1351 -1222
- package/docs/assets/index-DiD0qYvE.css +1 -0
- package/docs/crawl/core/components/ui/alert/alert.html +71 -172
- package/docs/crawl/core/components/ui/alert-messages/alert-messages.html +5 -113
- package/docs/crawl/core/components/ui/badge/badge.html +79 -157
- package/docs/crawl/core/components/ui/button/button.html +0 -1
- package/docs/crawl/core/components/ui/captcha/captcha.html +8 -90
- package/docs/crawl/core/components/ui/card/card.html +68 -222
- package/docs/crawl/core/components/ui/divider/divider.html +31 -117
- package/docs/crawl/core/components/ui/form/fieldset/fieldset.html +101 -232
- package/docs/crawl/core/components/ui/form/form-actions/form-actions.html +52 -95
- package/docs/crawl/core/components/ui/form/form-layout/form-layout.html +38 -97
- package/docs/crawl/core/components/ui/form/input/input.html +3 -3
- package/docs/crawl/core/components/ui/form/textarea/textarea.html +3 -3
- package/docs/crawl/core/components/ui/group/group.html +38 -60
- package/docs/crawl/core/components/ui/icon/icon.html +47 -136
- package/docs/crawl/core/components/ui/image/image.html +56 -244
- package/docs/crawl/core/components/ui/link/link.html +9 -67
- package/docs/crawl/core/components/ui/loader/loader.html +23 -97
- package/docs/crawl/core/components/ui/menu/menu.html +90 -162
- package/docs/crawl/core/components/ui/modal/modal.html +50 -275
- package/docs/crawl/core/components/ui/pop/pop.html +66 -260
- package/docs/crawl/core/components/ui/progress/progress.html +30 -103
- package/docs/crawl/core/components/ui/table/table.html +171 -303
- package/docs/crawl/core/components/ui/toast/toast.html +59 -170
- package/docs/crawl/core/components/ui/tooltip/tooltip.html +29 -90
- package/docs/crawl/docs/_decorators/ancestor-attribute.html +2 -3
- package/docs/crawl/docs/_getting-started/concorde-outside.html +3 -3
- package/docs/crawl/docs/_getting-started/start.html +1 -1
- package/docs/crawl/docs/_getting-started/theming.html +63 -311
- package/docs/crawl/hubs/form-components.html +53 -75
- package/docs/crawl/index.html +6 -7
- package/docs/docs-mock-api-sw.js +0 -2
- package/docs/docs-mock-api-sw.js.map +2 -2
- package/docs/index.html +7 -9
- package/docs/llms-full.txt +456 -1703
- package/docs/llms.txt +32 -25
- package/docs/sitemap.xml +0 -3
- package/docs/src/core/components/functional/fetch/fetch.md +0 -0
- package/docs/src/core/components/functional/if/if.md +0 -0
- package/docs/src/core/components/functional/list/list.md +0 -0
- package/docs/src/core/components/functional/router/router.md +0 -0
- package/docs/src/core/components/functional/sdui/sdui.md +0 -0
- package/docs/src/core/components/functional/states/states.md +0 -0
- package/docs/src/core/components/functional/submit/submit.md +0 -0
- package/docs/src/core/components/ui/alert/alert.md +72 -147
- package/docs/src/core/components/ui/alert-messages/alert-messages.md +0 -85
- package/docs/src/core/components/ui/badge/badge.md +80 -141
- package/docs/src/core/components/ui/button/button.md +0 -1
- package/docs/src/core/components/ui/captcha/captcha.md +6 -65
- package/docs/src/core/components/ui/card/card.md +65 -183
- package/docs/src/core/components/ui/divider/divider.md +13 -107
- package/docs/src/core/components/ui/form/fieldset/fieldset.md +99 -175
- package/docs/src/core/components/ui/form/form-actions/form-actions.md +52 -75
- package/docs/src/core/components/ui/form/form-layout/form-layout.md +34 -109
- package/docs/src/core/components/ui/form/input/input.md +1 -1
- package/docs/src/core/components/ui/form/radio/radio.md +0 -0
- package/docs/src/core/components/ui/form/select/select.md +0 -0
- package/docs/src/core/components/ui/form/switch/switch.md +0 -0
- package/docs/src/core/components/ui/form/textarea/textarea.md +1 -1
- package/docs/src/core/components/ui/group/group.md +36 -36
- package/docs/src/core/components/ui/icon/icon.md +43 -132
- package/docs/src/core/components/ui/image/image.md +53 -179
- package/docs/src/core/components/ui/link/link.md +7 -45
- package/docs/src/core/components/ui/loader/loader.md +22 -79
- package/docs/src/core/components/ui/menu/menu.md +92 -133
- package/docs/src/core/components/ui/modal/modal.md +47 -163
- package/docs/src/core/components/ui/pop/pop.md +64 -262
- package/docs/src/core/components/ui/progress/progress.md +30 -76
- package/docs/src/core/components/ui/table/table.md +171 -147
- package/docs/src/core/components/ui/toast/toast.md +58 -108
- package/docs/src/core/components/ui/tooltip/tooltip.md +26 -68
- package/docs/src/docs/_core-concept/subscriber.md +0 -0
- package/docs/src/docs/_decorators/ancestor-attribute.md +2 -3
- package/docs/src/docs/_getting-started/concorde-outside.md +3 -3
- package/docs/src/docs/_getting-started/my-first-subscriber.md +0 -0
- package/docs/src/docs/_getting-started/pubsub.md +0 -0
- package/docs/src/docs/_getting-started/start.md +1 -1
- package/docs/src/docs/_getting-started/theming.md +61 -223
- package/docs/src/docs/search/docs-search.json +348 -3083
- package/docs/src/tsconfig.declarations.json +22 -0
- package/docs/src/tsconfig.emit.json +23 -0
- package/docs/src/tsconfig.json +3 -63
- package/gitlab/job_github_mirror.sh +39 -0
- package/package.json +36 -2
- package/scripts/generate-sdui-catalog.mjs +250 -0
- package/scripts/generate-sdui-catalog.spec.ts +91 -0
- package/scripts/github-export.mjs +150 -0
- package/scripts/post-build-docs.js +0 -0
- package/scripts/post-build.mjs +0 -0
- package/scripts/pre-build.mjs +15 -0
- package/src/core/components/functional/fetch/fetch.md +0 -0
- package/src/core/components/functional/if/if.md +0 -0
- package/src/core/components/functional/if/if.ts +0 -0
- package/src/core/components/functional/list/list.demo.ts +0 -0
- package/src/core/components/functional/list/list.md +0 -0
- package/src/core/components/functional/router/router.md +0 -0
- package/src/core/components/functional/router/router.ts +0 -0
- package/src/core/components/functional/sdui/SDUIDescriptorTransformer.ts +5 -5
- package/src/core/components/functional/sdui/__fixtures__/descriptors.ts +251 -0
- package/src/core/components/functional/sdui/__snapshots__/sdui-action.spec.ts.snap +73 -0
- package/src/core/components/functional/sdui/__snapshots__/sdui-incremental.spec.ts.snap +50 -0
- package/src/core/components/functional/sdui/__snapshots__/sdui-partial.spec.ts.snap +50 -0
- package/src/core/components/functional/sdui/__snapshots__/sdui.regression.spec.ts.snap +461 -0
- package/src/core/components/functional/sdui/component-catalog.gaps.json +511 -0
- package/src/core/components/functional/sdui/component-catalog.json +3103 -0
- package/src/core/components/functional/sdui/component-catalog.spec.ts +23 -0
- package/src/core/components/functional/sdui/sdui-action.spec.ts +99 -0
- package/src/core/components/functional/sdui/sdui-dom-snapshot.ts +61 -0
- package/src/core/components/functional/sdui/sdui-extension-points.md +94 -0
- package/src/core/components/functional/sdui/sdui-incremental.spec.ts +137 -0
- package/src/core/components/functional/sdui/sdui-partial.spec.ts +83 -0
- package/src/core/components/functional/sdui/sdui-partial.ts +19 -0
- package/src/core/components/functional/sdui/sdui-safe.spec.ts +188 -0
- package/src/core/components/functional/sdui/sdui-safe.ts +100 -0
- package/src/core/components/functional/sdui/sdui.md +122 -0
- package/src/core/components/functional/sdui/sdui.regression.spec.ts +64 -0
- package/src/core/components/functional/sdui/sdui.ts +442 -34
- package/src/core/components/functional/sdui/types.ts +49 -0
- package/src/core/components/functional/states/states.md +0 -0
- package/src/core/components/functional/submit/submit.md +0 -0
- package/src/core/components/functional/subscriber/subscriber.ts +0 -0
- package/src/core/components/functional/value/value.ts +0 -0
- package/src/core/components/ui/_css/size.ts +0 -0
- package/src/core/components/ui/captcha/altchaStyles.ts +0 -0
- package/src/core/components/ui/form/radio/radio.md +0 -0
- package/src/core/components/ui/form/select/select.md +0 -0
- package/src/core/components/ui/form/switch/switch.md +0 -0
- package/src/core/mixins/Subscriber.ts +0 -0
- package/src/core/utils/DataBindObserver.ts +0 -0
- package/src/core/utils/Objects.ts +0 -0
- package/src/core/utils/route.ts +0 -0
- package/src/css.d.ts +19 -0
- package/src/docs/_core-concept/subscriber.md +0 -0
- package/src/docs/_getting-started/my-first-subscriber.md +0 -0
- package/src/docs/_getting-started/pubsub.md +0 -0
- package/src/docs/example/users.ts +0 -0
- package/src/docs/search/page.ts +0 -0
- package/src/tsconfig.declarations.json +22 -0
- package/src/tsconfig.emit.json +23 -0
- package/src/tsconfig.json +90 -0
- package/src/tsconfig.tsbuildinfo +1 -1
- package/docs/assets/index-CD4WyL6o.css +0 -1
- package/docs/crawl/core/components/ui/theme/theme.html +0 -131
- package/docs/src/core/components/ui/theme/theme.md +0 -122
|
@@ -517,12 +517,22 @@
|
|
|
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
|
+
},
|
|
520
530
|
"core/components/ui/loader/loader.md": {
|
|
521
531
|
"title": "Loader",
|
|
522
532
|
"hashes": {
|
|
523
|
-
"mode": {
|
|
533
|
+
"fixed-mode": {
|
|
524
534
|
"count": 1,
|
|
525
|
-
"title": "
|
|
535
|
+
"title": "Fixed mode",
|
|
526
536
|
"type": "paragraph"
|
|
527
537
|
}
|
|
528
538
|
}
|
|
@@ -2405,134 +2415,44 @@
|
|
|
2405
2415
|
}
|
|
2406
2416
|
},
|
|
2407
2417
|
{
|
|
2408
|
-
"search": "
|
|
2418
|
+
"search": "Badge",
|
|
2409
2419
|
"files": {
|
|
2410
|
-
"core/components/ui/
|
|
2411
|
-
"title": "
|
|
2420
|
+
"core/components/ui/badge/badge.md": {
|
|
2421
|
+
"title": "Badge",
|
|
2412
2422
|
"hashes": {
|
|
2413
|
-
"
|
|
2423
|
+
"badge": {
|
|
2414
2424
|
"count": 1,
|
|
2415
2425
|
"title": "",
|
|
2416
|
-
"type": "
|
|
2417
|
-
}
|
|
2418
|
-
}
|
|
2419
|
-
}
|
|
2420
|
-
}
|
|
2421
|
-
},
|
|
2422
|
-
{
|
|
2423
|
-
"search": "Color and icon follow status. With no status, behavior is default.\n",
|
|
2424
|
-
"files": {
|
|
2425
|
-
"core/components/ui/alert/alert.md": {
|
|
2426
|
-
"title": "Alert",
|
|
2427
|
-
"hashes": {
|
|
2428
|
-
"status": {
|
|
2429
|
-
"count": 1,
|
|
2430
|
-
"title": "Status",
|
|
2431
|
-
"type": "paragraph"
|
|
2432
|
-
}
|
|
2433
|
-
}
|
|
2434
|
-
}
|
|
2435
|
-
}
|
|
2436
|
-
},
|
|
2437
|
-
{
|
|
2438
|
-
"search": "By default, an alert already in the DOM is not announced (no role / aria-live). Set announce when the message appears after user action (API response, validation, etc.): screen readers get role="alert" for error, otherwise role="status" and aria-live="polite".\n",
|
|
2439
|
-
"files": {
|
|
2440
|
-
"core/components/ui/alert/alert.md": {
|
|
2441
|
-
"title": "Alert",
|
|
2442
|
-
"hashes": {
|
|
2443
|
-
"accessibility-announce": {
|
|
2444
|
-
"count": 1,
|
|
2445
|
-
"title": "Accessibility (`announce`)",
|
|
2446
|
-
"type": "paragraph"
|
|
2447
|
-
}
|
|
2448
|
-
}
|
|
2449
|
-
}
|
|
2450
|
-
}
|
|
2451
|
-
},
|
|
2452
|
-
{
|
|
2453
|
-
"search": "sonic-alert-messages sets announce on every rendered alert.\n",
|
|
2454
|
-
"files": {
|
|
2455
|
-
"core/components/ui/alert/alert.md": {
|
|
2456
|
-
"title": "Alert",
|
|
2457
|
-
"hashes": {
|
|
2458
|
-
"accessibility-announce": {
|
|
2459
|
-
"count": 1,
|
|
2460
|
-
"title": "Accessibility (`announce`)",
|
|
2461
|
-
"type": "paragraph"
|
|
2462
|
-
}
|
|
2463
|
-
}
|
|
2464
|
-
}
|
|
2465
|
-
}
|
|
2466
|
-
},
|
|
2467
|
-
{
|
|
2468
|
-
"search": "label and text accept plain text only. The default slot is rendered after text. Use the icon slot to replace the default sonic-icon. noIcon hides the icon.\n",
|
|
2469
|
-
"files": {
|
|
2470
|
-
"core/components/ui/alert/alert.md": {
|
|
2471
|
-
"title": "Alert",
|
|
2472
|
-
"hashes": {
|
|
2473
|
-
"content-and-icon": {
|
|
2474
|
-
"count": 1,
|
|
2475
|
-
"title": "Content and icon",
|
|
2476
|
-
"type": "paragraph"
|
|
2477
|
-
}
|
|
2478
|
-
}
|
|
2479
|
-
}
|
|
2480
|
-
}
|
|
2481
|
-
},
|
|
2482
|
-
{
|
|
2483
|
-
"search": "Project any markup into slot="icon" (emoji, image, custom component). Keep it decorative with aria-hidden="true" when the message text already conveys meaning.\n",
|
|
2484
|
-
"files": {
|
|
2485
|
-
"core/components/ui/alert/alert.md": {
|
|
2486
|
-
"title": "Alert",
|
|
2487
|
-
"hashes": {
|
|
2488
|
-
"custom-icon-slot": {
|
|
2489
|
-
"count": 1,
|
|
2490
|
-
"title": "Custom icon slot",
|
|
2491
|
-
"type": "paragraph"
|
|
2492
|
-
}
|
|
2493
|
-
}
|
|
2494
|
-
}
|
|
2495
|
-
}
|
|
2496
|
-
},
|
|
2497
|
-
{
|
|
2498
|
-
"search": "Rich content in the slot (buttons, links).\n",
|
|
2499
|
-
"files": {
|
|
2500
|
-
"core/components/ui/alert/alert.md": {
|
|
2501
|
-
"title": "Alert",
|
|
2502
|
-
"hashes": {
|
|
2503
|
-
"alert-with-link": {
|
|
2504
|
-
"count": 1,
|
|
2505
|
-
"title": "Alert with link",
|
|
2506
|
-
"type": "paragraph"
|
|
2426
|
+
"type": "page"
|
|
2507
2427
|
}
|
|
2508
2428
|
}
|
|
2509
2429
|
}
|
|
2510
2430
|
}
|
|
2511
2431
|
},
|
|
2512
2432
|
{
|
|
2513
|
-
"search": "
|
|
2433
|
+
"search": "Button",
|
|
2514
2434
|
"files": {
|
|
2515
|
-
"core/components/ui/
|
|
2516
|
-
"title": "
|
|
2435
|
+
"core/components/ui/button/button.md": {
|
|
2436
|
+
"title": "Button",
|
|
2517
2437
|
"hashes": {
|
|
2518
|
-
"
|
|
2438
|
+
"button": {
|
|
2519
2439
|
"count": 1,
|
|
2520
|
-
"title": "
|
|
2521
|
-
"type": "
|
|
2440
|
+
"title": "",
|
|
2441
|
+
"type": "page"
|
|
2522
2442
|
}
|
|
2523
2443
|
}
|
|
2524
2444
|
}
|
|
2525
2445
|
}
|
|
2526
2446
|
},
|
|
2527
2447
|
{
|
|
2528
|
-
"search": "
|
|
2448
|
+
"search": "The length of the button depends on the size of its content\n\n",
|
|
2529
2449
|
"files": {
|
|
2530
|
-
"core/components/ui/
|
|
2531
|
-
"title": "
|
|
2450
|
+
"core/components/ui/button/button.md": {
|
|
2451
|
+
"title": "Button",
|
|
2532
2452
|
"hashes": {
|
|
2533
|
-
"
|
|
2453
|
+
"loading": {
|
|
2534
2454
|
"count": 1,
|
|
2535
|
-
"title": "
|
|
2455
|
+
"title": "Loading",
|
|
2536
2456
|
"type": "paragraph"
|
|
2537
2457
|
}
|
|
2538
2458
|
}
|
|
@@ -2540,27 +2460,27 @@
|
|
|
2540
2460
|
}
|
|
2541
2461
|
},
|
|
2542
2462
|
{
|
|
2543
|
-
"search": "
|
|
2463
|
+
"search": "Captcha",
|
|
2544
2464
|
"files": {
|
|
2545
|
-
"core/components/ui/
|
|
2546
|
-
"title": "
|
|
2465
|
+
"core/components/ui/captcha/captcha.md": {
|
|
2466
|
+
"title": "Captcha",
|
|
2547
2467
|
"hashes": {
|
|
2548
|
-
"
|
|
2468
|
+
"captcha": {
|
|
2549
2469
|
"count": 1,
|
|
2550
|
-
"title": "
|
|
2551
|
-
"type": "
|
|
2470
|
+
"title": "",
|
|
2471
|
+
"type": "page"
|
|
2552
2472
|
}
|
|
2553
2473
|
}
|
|
2554
2474
|
}
|
|
2555
2475
|
}
|
|
2556
2476
|
},
|
|
2557
2477
|
{
|
|
2558
|
-
"search": "
|
|
2478
|
+
"search": "Card",
|
|
2559
2479
|
"files": {
|
|
2560
|
-
"core/components/ui/
|
|
2561
|
-
"title": "
|
|
2480
|
+
"core/components/ui/card/card.md": {
|
|
2481
|
+
"title": "Card",
|
|
2562
2482
|
"hashes": {
|
|
2563
|
-
"
|
|
2483
|
+
"card": {
|
|
2564
2484
|
"count": 1,
|
|
2565
2485
|
"title": "",
|
|
2566
2486
|
"type": "page"
|
|
@@ -2570,44 +2490,44 @@
|
|
|
2570
2490
|
}
|
|
2571
2491
|
},
|
|
2572
2492
|
{
|
|
2573
|
-
"search": "
|
|
2493
|
+
"search": "Divider",
|
|
2574
2494
|
"files": {
|
|
2575
|
-
"core/components/ui/
|
|
2576
|
-
"title": "
|
|
2495
|
+
"core/components/ui/divider/divider.md": {
|
|
2496
|
+
"title": "Divider",
|
|
2577
2497
|
"hashes": {
|
|
2578
|
-
"
|
|
2498
|
+
"divider": {
|
|
2579
2499
|
"count": 1,
|
|
2580
2500
|
"title": "",
|
|
2581
|
-
"type": "
|
|
2501
|
+
"type": "page"
|
|
2582
2502
|
}
|
|
2583
2503
|
}
|
|
2584
2504
|
}
|
|
2585
2505
|
}
|
|
2586
2506
|
},
|
|
2587
2507
|
{
|
|
2588
|
-
"search": "
|
|
2508
|
+
"search": "Checkbox",
|
|
2589
2509
|
"files": {
|
|
2590
|
-
"core/components/ui/
|
|
2591
|
-
"title": "
|
|
2510
|
+
"core/components/ui/form/checkbox/checkbox.md": {
|
|
2511
|
+
"title": "Checkbox",
|
|
2592
2512
|
"hashes": {
|
|
2593
|
-
"
|
|
2513
|
+
"checkbox": {
|
|
2594
2514
|
"count": 1,
|
|
2595
|
-
"title": "
|
|
2596
|
-
"type": "
|
|
2515
|
+
"title": "",
|
|
2516
|
+
"type": "page"
|
|
2597
2517
|
}
|
|
2598
2518
|
}
|
|
2599
2519
|
}
|
|
2600
2520
|
}
|
|
2601
2521
|
},
|
|
2602
2522
|
{
|
|
2603
|
-
"search": "
|
|
2523
|
+
"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",
|
|
2604
2524
|
"files": {
|
|
2605
|
-
"core/components/ui/
|
|
2606
|
-
"title": "
|
|
2525
|
+
"core/components/ui/form/checkbox/checkbox.md": {
|
|
2526
|
+
"title": "Checkbox",
|
|
2607
2527
|
"hashes": {
|
|
2608
|
-
"
|
|
2528
|
+
"example-of-use--blacklist--queue": {
|
|
2609
2529
|
"count": 1,
|
|
2610
|
-
"title": "
|
|
2530
|
+
"title": "Example of use — blacklist + queue",
|
|
2611
2531
|
"type": "paragraph"
|
|
2612
2532
|
}
|
|
2613
2533
|
}
|
|
@@ -2615,42 +2535,42 @@
|
|
|
2615
2535
|
}
|
|
2616
2536
|
},
|
|
2617
2537
|
{
|
|
2618
|
-
"search": "
|
|
2538
|
+
"search": "Fieldset",
|
|
2619
2539
|
"files": {
|
|
2620
|
-
"core/components/ui/
|
|
2621
|
-
"title": "
|
|
2540
|
+
"core/components/ui/form/fieldset/fieldset.md": {
|
|
2541
|
+
"title": "Fieldset",
|
|
2622
2542
|
"hashes": {
|
|
2623
|
-
"
|
|
2543
|
+
"fieldset": {
|
|
2624
2544
|
"count": 1,
|
|
2625
|
-
"title": "
|
|
2626
|
-
"type": "
|
|
2545
|
+
"title": "",
|
|
2546
|
+
"type": "page"
|
|
2627
2547
|
}
|
|
2628
2548
|
}
|
|
2629
2549
|
}
|
|
2630
2550
|
}
|
|
2631
2551
|
},
|
|
2632
2552
|
{
|
|
2633
|
-
"search": "
|
|
2553
|
+
"search": "Form-actions",
|
|
2634
2554
|
"files": {
|
|
2635
|
-
"core/components/ui/
|
|
2636
|
-
"title": "
|
|
2555
|
+
"core/components/ui/form/form-actions/form-actions.md": {
|
|
2556
|
+
"title": "Form-actions",
|
|
2637
2557
|
"hashes": {
|
|
2638
|
-
"
|
|
2558
|
+
"form-actions": {
|
|
2639
2559
|
"count": 1,
|
|
2640
|
-
"title": "
|
|
2641
|
-
"type": "
|
|
2560
|
+
"title": "",
|
|
2561
|
+
"type": "page"
|
|
2642
2562
|
}
|
|
2643
2563
|
}
|
|
2644
2564
|
}
|
|
2645
2565
|
}
|
|
2646
2566
|
},
|
|
2647
2567
|
{
|
|
2648
|
-
"search": "
|
|
2568
|
+
"search": "Form-layout",
|
|
2649
2569
|
"files": {
|
|
2650
|
-
"core/components/ui/
|
|
2651
|
-
"title": "
|
|
2570
|
+
"core/components/ui/form/form-layout/form-layout.md": {
|
|
2571
|
+
"title": "Form-layout",
|
|
2652
2572
|
"hashes": {
|
|
2653
|
-
"
|
|
2573
|
+
"form-layout": {
|
|
2654
2574
|
"count": 1,
|
|
2655
2575
|
"title": "",
|
|
2656
2576
|
"type": "page"
|
|
@@ -2660,2669 +2580,29 @@
|
|
|
2660
2580
|
}
|
|
2661
2581
|
},
|
|
2662
2582
|
{
|
|
2663
|
-
"search": "
|
|
2583
|
+
"search": "Input",
|
|
2664
2584
|
"files": {
|
|
2665
|
-
"core/components/ui/
|
|
2666
|
-
"title": "
|
|
2585
|
+
"core/components/ui/form/input/input.md": {
|
|
2586
|
+
"title": "Input",
|
|
2667
2587
|
"hashes": {
|
|
2668
|
-
"
|
|
2588
|
+
"input": {
|
|
2669
2589
|
"count": 1,
|
|
2670
2590
|
"title": "",
|
|
2671
|
-
"type": "
|
|
2591
|
+
"type": "page"
|
|
2672
2592
|
}
|
|
2673
2593
|
}
|
|
2674
2594
|
}
|
|
2675
2595
|
}
|
|
2676
2596
|
},
|
|
2677
2597
|
{
|
|
2678
|
-
"search": "
|
|
2598
|
+
"search": "Liste des types\n",
|
|
2679
2599
|
"files": {
|
|
2680
|
-
"core/components/ui/
|
|
2681
|
-
"title": "
|
|
2600
|
+
"core/components/ui/form/input/input.md": {
|
|
2601
|
+
"title": "Input",
|
|
2682
2602
|
"hashes": {
|
|
2683
2603
|
"type": {
|
|
2684
2604
|
"count": 1,
|
|
2685
|
-
"title": "Type",
|
|
2686
|
-
"type": "paragraph"
|
|
2687
|
-
}
|
|
2688
|
-
}
|
|
2689
|
-
}
|
|
2690
|
-
}
|
|
2691
|
-
},
|
|
2692
|
-
{
|
|
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",
|
|
2694
|
-
"files": {
|
|
2695
|
-
"core/components/ui/badge/badge.md": {
|
|
2696
|
-
"title": "Badge",
|
|
2697
|
-
"hashes": {
|
|
2698
|
-
"variant": {
|
|
2699
|
-
"count": 1,
|
|
2700
|
-
"title": "Variant",
|
|
2701
|
-
"type": "paragraph"
|
|
2702
|
-
}
|
|
2703
|
-
}
|
|
2704
|
-
}
|
|
2705
|
-
}
|
|
2706
|
-
},
|
|
2707
|
-
{
|
|
2708
|
-
"search": "Default size is md (omit the size attribute). Typography and padding follow sonic-button.\n",
|
|
2709
|
-
"files": {
|
|
2710
|
-
"core/components/ui/badge/badge.md": {
|
|
2711
|
-
"title": "Badge",
|
|
2712
|
-
"hashes": {
|
|
2713
|
-
"size": {
|
|
2714
|
-
"count": 1,
|
|
2715
|
-
"title": "Size",
|
|
2716
|
-
"type": "paragraph"
|
|
2717
|
-
}
|
|
2718
|
-
}
|
|
2719
|
-
}
|
|
2720
|
-
}
|
|
2721
|
-
},
|
|
2722
|
-
{
|
|
2723
|
-
"search": "Icons or short text before / after the main label.\n",
|
|
2724
|
-
"files": {
|
|
2725
|
-
"core/components/ui/badge/badge.md": {
|
|
2726
|
-
"title": "Badge",
|
|
2727
|
-
"hashes": {
|
|
2728
|
-
"prefix-and-suffix-slots": {
|
|
2729
|
-
"count": 1,
|
|
2730
|
-
"title": "Prefix and suffix slots",
|
|
2731
|
-
"type": "paragraph"
|
|
2732
|
-
}
|
|
2733
|
-
}
|
|
2734
|
-
}
|
|
2735
|
-
}
|
|
2736
|
-
},
|
|
2737
|
-
{
|
|
2738
|
-
"search": "Badge with no text (visual dot). min-width / min-height keep a readable shape.\n",
|
|
2739
|
-
"files": {
|
|
2740
|
-
"core/components/ui/badge/badge.md": {
|
|
2741
|
-
"title": "Badge",
|
|
2742
|
-
"hashes": {
|
|
2743
|
-
"empty-badges": {
|
|
2744
|
-
"count": 1,
|
|
2745
|
-
"title": "Empty badges",
|
|
2746
|
-
"type": "paragraph"
|
|
2747
|
-
}
|
|
2748
|
-
}
|
|
2749
|
-
}
|
|
2750
|
-
}
|
|
2751
|
-
},
|
|
2752
|
-
{
|
|
2753
|
-
"search": "With ellipsis, long labels truncate. The parent must constrain width (max-width, grid, etc.).\n",
|
|
2754
|
-
"files": {
|
|
2755
|
-
"core/components/ui/badge/badge.md": {
|
|
2756
|
-
"title": "Badge",
|
|
2757
|
-
"hashes": {
|
|
2758
|
-
"ellipsis": {
|
|
2759
|
-
"count": 1,
|
|
2760
|
-
"title": "Ellipsis",
|
|
2761
|
-
"type": "paragraph"
|
|
2762
|
-
}
|
|
2763
|
-
}
|
|
2764
|
-
}
|
|
2765
|
-
}
|
|
2766
|
-
},
|
|
2767
|
-
{
|
|
2768
|
-
"search": "Count inside a button (slot="suffix") or a badge absolutely positioned on a button / icon.\n",
|
|
2769
|
-
"files": {
|
|
2770
|
-
"core/components/ui/badge/badge.md": {
|
|
2771
|
-
"title": "Badge",
|
|
2772
|
-
"hashes": {
|
|
2773
|
-
"badge-in-button": {
|
|
2774
|
-
"count": 1,
|
|
2775
|
-
"title": "Badge in button",
|
|
2776
|
-
"type": "paragraph"
|
|
2777
|
-
}
|
|
2778
|
-
}
|
|
2779
|
-
}
|
|
2780
|
-
}
|
|
2781
|
-
},
|
|
2782
|
-
{
|
|
2783
|
-
"search": "Button",
|
|
2784
|
-
"files": {
|
|
2785
|
-
"core/components/ui/button/button.md": {
|
|
2786
|
-
"title": "Button",
|
|
2787
|
-
"hashes": {
|
|
2788
|
-
"button": {
|
|
2789
|
-
"count": 1,
|
|
2790
|
-
"title": "",
|
|
2791
|
-
"type": "page"
|
|
2792
|
-
}
|
|
2793
|
-
}
|
|
2794
|
-
}
|
|
2795
|
-
}
|
|
2796
|
-
},
|
|
2797
|
-
{
|
|
2798
|
-
"search": "The length of the button depends on the size of its content\n\n",
|
|
2799
|
-
"files": {
|
|
2800
|
-
"core/components/ui/button/button.md": {
|
|
2801
|
-
"title": "Button",
|
|
2802
|
-
"hashes": {
|
|
2803
|
-
"loading": {
|
|
2804
|
-
"count": 1,
|
|
2805
|
-
"title": "Loading",
|
|
2806
|
-
"type": "paragraph"
|
|
2807
|
-
}
|
|
2808
|
-
}
|
|
2809
|
-
}
|
|
2810
|
-
}
|
|
2811
|
-
},
|
|
2812
|
-
{
|
|
2813
|
-
"search": "Captcha",
|
|
2814
|
-
"files": {
|
|
2815
|
-
"core/components/ui/captcha/captcha.md": {
|
|
2816
|
-
"title": "Captcha",
|
|
2817
|
-
"hashes": {
|
|
2818
|
-
"captcha": {
|
|
2819
|
-
"count": 1,
|
|
2820
|
-
"title": "",
|
|
2821
|
-
"type": "page"
|
|
2822
|
-
}
|
|
2823
|
-
}
|
|
2824
|
-
}
|
|
2825
|
-
}
|
|
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
|
-
},
|
|
2917
|
-
{
|
|
2918
|
-
"search": "Card",
|
|
2919
|
-
"files": {
|
|
2920
|
-
"core/components/ui/card/card.md": {
|
|
2921
|
-
"title": "Card",
|
|
2922
|
-
"hashes": {
|
|
2923
|
-
"card": {
|
|
2924
|
-
"count": 1,
|
|
2925
|
-
"title": "",
|
|
2926
|
-
"type": "page"
|
|
2927
|
-
}
|
|
2928
|
-
}
|
|
2929
|
-
}
|
|
2930
|
-
}
|
|
2931
|
-
},
|
|
2932
|
-
{
|
|
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",
|
|
2934
|
-
"files": {
|
|
2935
|
-
"core/components/ui/card/card.md": {
|
|
2936
|
-
"title": "Card",
|
|
2937
|
-
"hashes": {
|
|
2938
|
-
"card": {
|
|
2939
|
-
"count": 1,
|
|
2940
|
-
"title": "",
|
|
2941
|
-
"type": "paragraph"
|
|
2942
|
-
}
|
|
2943
|
-
}
|
|
2944
|
-
}
|
|
2945
|
-
}
|
|
2946
|
-
},
|
|
2947
|
-
{
|
|
2948
|
-
"search": "Default type is base. default and light share the same surface tokens.\n",
|
|
2949
|
-
"files": {
|
|
2950
|
-
"core/components/ui/card/card.md": {
|
|
2951
|
-
"title": "Card",
|
|
2952
|
-
"hashes": {
|
|
2953
|
-
"type": {
|
|
2954
|
-
"count": 1,
|
|
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",
|
|
2971
|
-
"type": "paragraph"
|
|
2972
|
-
}
|
|
2973
|
-
}
|
|
2974
|
-
}
|
|
2975
|
-
}
|
|
2976
|
-
},
|
|
2977
|
-
{
|
|
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",
|
|
2979
|
-
"files": {
|
|
2980
|
-
"core/components/ui/card/card.md": {
|
|
2981
|
-
"title": "Card",
|
|
2982
|
-
"hashes": {
|
|
2983
|
-
"header": {
|
|
2984
|
-
"count": 1,
|
|
2985
|
-
"title": "Header",
|
|
2986
|
-
"type": "paragraph"
|
|
2987
|
-
}
|
|
2988
|
-
}
|
|
2989
|
-
}
|
|
2990
|
-
}
|
|
2991
|
-
},
|
|
2992
|
-
{
|
|
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",
|
|
2994
|
-
"files": {
|
|
2995
|
-
"core/components/ui/card/card.md": {
|
|
2996
|
-
"title": "Card",
|
|
2997
|
-
"hashes": {
|
|
2998
|
-
"header": {
|
|
2999
|
-
"count": 1,
|
|
3000
|
-
"title": "Header",
|
|
3001
|
-
"type": "paragraph"
|
|
3002
|
-
}
|
|
3003
|
-
}
|
|
3004
|
-
}
|
|
3005
|
-
}
|
|
3006
|
-
},
|
|
3007
|
-
{
|
|
3008
|
-
"search": "Optional wrapper for the primary content area (typography, media, forms).\n",
|
|
3009
|
-
"files": {
|
|
3010
|
-
"core/components/ui/card/card.md": {
|
|
3011
|
-
"title": "Card",
|
|
3012
|
-
"hashes": {
|
|
3013
|
-
"main": {
|
|
3014
|
-
"count": 1,
|
|
3015
|
-
"title": "Main",
|
|
3016
|
-
"type": "paragraph"
|
|
3017
|
-
}
|
|
3018
|
-
}
|
|
3019
|
-
}
|
|
3020
|
-
}
|
|
3021
|
-
},
|
|
3022
|
-
{
|
|
3023
|
-
"search": "Optional footer for actions, metadata, or secondary text.\n",
|
|
3024
|
-
"files": {
|
|
3025
|
-
"core/components/ui/card/card.md": {
|
|
3026
|
-
"title": "Card",
|
|
3027
|
-
"hashes": {
|
|
3028
|
-
"footer": {
|
|
3029
|
-
"count": 1,
|
|
3030
|
-
"title": "Footer",
|
|
3031
|
-
"type": "paragraph"
|
|
3032
|
-
}
|
|
3033
|
-
}
|
|
3034
|
-
}
|
|
3035
|
-
}
|
|
3036
|
-
},
|
|
3037
|
-
{
|
|
3038
|
-
"search": "Header, media, body, and footer together.\n",
|
|
3039
|
-
"files": {
|
|
3040
|
-
"core/components/ui/card/card.md": {
|
|
3041
|
-
"title": "Card",
|
|
3042
|
-
"hashes": {
|
|
3043
|
-
"full-example": {
|
|
3044
|
-
"count": 1,
|
|
3045
|
-
"title": "Full example",
|
|
3046
|
-
"type": "paragraph"
|
|
3047
|
-
}
|
|
3048
|
-
}
|
|
3049
|
-
}
|
|
3050
|
-
}
|
|
3051
|
-
},
|
|
3052
|
-
{
|
|
3053
|
-
"search": "Divider",
|
|
3054
|
-
"files": {
|
|
3055
|
-
"core/components/ui/divider/divider.md": {
|
|
3056
|
-
"title": "Divider",
|
|
3057
|
-
"hashes": {
|
|
3058
|
-
"divider": {
|
|
3059
|
-
"count": 1,
|
|
3060
|
-
"title": "",
|
|
3061
|
-
"type": "page"
|
|
3062
|
-
}
|
|
3063
|
-
}
|
|
3064
|
-
}
|
|
3065
|
-
}
|
|
3066
|
-
},
|
|
3067
|
-
{
|
|
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",
|
|
3069
|
-
"files": {
|
|
3070
|
-
"core/components/ui/divider/divider.md": {
|
|
3071
|
-
"title": "Divider",
|
|
3072
|
-
"hashes": {
|
|
3073
|
-
"divider": {
|
|
3074
|
-
"count": 1,
|
|
3075
|
-
"title": "",
|
|
3076
|
-
"type": "paragraph"
|
|
3077
|
-
}
|
|
3078
|
-
}
|
|
3079
|
-
}
|
|
3080
|
-
}
|
|
3081
|
-
},
|
|
3082
|
-
{
|
|
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",
|
|
3084
|
-
"files": {
|
|
3085
|
-
"core/components/ui/divider/divider.md": {
|
|
3086
|
-
"title": "Divider",
|
|
3087
|
-
"hashes": {
|
|
3088
|
-
"basic-example": {
|
|
3089
|
-
"count": 1,
|
|
3090
|
-
"title": "Basic example",
|
|
3091
|
-
"type": "paragraph"
|
|
3092
|
-
}
|
|
3093
|
-
}
|
|
3094
|
-
}
|
|
3095
|
-
}
|
|
3096
|
-
},
|
|
3097
|
-
{
|
|
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",
|
|
3099
|
-
"files": {
|
|
3100
|
-
"core/components/ui/divider/divider.md": {
|
|
3101
|
-
"title": "Divider",
|
|
3102
|
-
"hashes": {
|
|
3103
|
-
"label-and-align": {
|
|
3104
|
-
"count": 1,
|
|
3105
|
-
"title": "Label and align",
|
|
3106
|
-
"type": "paragraph"
|
|
3107
|
-
}
|
|
3108
|
-
}
|
|
3109
|
-
}
|
|
3110
|
-
}
|
|
3111
|
-
},
|
|
3112
|
-
{
|
|
3113
|
-
"search": "size adjusts block margin and label font size. Values follow the shared Concorde scale (2xs … 2xl).\n",
|
|
3114
|
-
"files": {
|
|
3115
|
-
"core/components/ui/divider/divider.md": {
|
|
3116
|
-
"title": "Divider",
|
|
3117
|
-
"hashes": {
|
|
3118
|
-
"size": {
|
|
3119
|
-
"count": 1,
|
|
3120
|
-
"title": "Size",
|
|
3121
|
-
"type": "paragraph"
|
|
3122
|
-
}
|
|
3123
|
-
}
|
|
3124
|
-
}
|
|
3125
|
-
}
|
|
3126
|
-
},
|
|
3127
|
-
{
|
|
3128
|
-
"search": "lineStyle sets the stroke of the rule (solid · dashed · dotted). In HTML use the reflected attribute linestyle (case-insensitive).\n",
|
|
3129
|
-
"files": {
|
|
3130
|
-
"core/components/ui/divider/divider.md": {
|
|
3131
|
-
"title": "Divider",
|
|
3132
|
-
"hashes": {
|
|
3133
|
-
"line-style": {
|
|
3134
|
-
"count": 1,
|
|
3135
|
-
"title": "Line style",
|
|
3136
|
-
"type": "paragraph"
|
|
3137
|
-
}
|
|
3138
|
-
}
|
|
3139
|
-
}
|
|
3140
|
-
}
|
|
3141
|
-
},
|
|
3142
|
-
{
|
|
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",
|
|
3144
|
-
"files": {
|
|
3145
|
-
"core/components/ui/divider/divider.md": {
|
|
3146
|
-
"title": "Divider",
|
|
3147
|
-
"hashes": {
|
|
3148
|
-
"vertical-and-margin": {
|
|
3149
|
-
"count": 1,
|
|
3150
|
-
"title": "Vertical and margin",
|
|
3151
|
-
"type": "paragraph"
|
|
3152
|
-
}
|
|
3153
|
-
}
|
|
3154
|
-
}
|
|
3155
|
-
}
|
|
3156
|
-
},
|
|
3157
|
-
{
|
|
3158
|
-
"search": "Slotted content replaces or augments label. Useful for badges, icons, or mixed markup in menus.\n",
|
|
3159
|
-
"files": {
|
|
3160
|
-
"core/components/ui/divider/divider.md": {
|
|
3161
|
-
"title": "Divider",
|
|
3162
|
-
"hashes": {
|
|
3163
|
-
"default-slot": {
|
|
3164
|
-
"count": 1,
|
|
3165
|
-
"title": "Default slot",
|
|
3166
|
-
"type": "paragraph"
|
|
3167
|
-
}
|
|
3168
|
-
}
|
|
3169
|
-
}
|
|
3170
|
-
}
|
|
3171
|
-
},
|
|
3172
|
-
{
|
|
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",
|
|
3174
|
-
"files": {
|
|
3175
|
-
"core/components/ui/divider/divider.md": {
|
|
3176
|
-
"title": "Divider",
|
|
3177
|
-
"hashes": {
|
|
3178
|
-
"inside-typed-cards": {
|
|
3179
|
-
"count": 1,
|
|
3180
|
-
"title": "Inside typed cards",
|
|
3181
|
-
"type": "paragraph"
|
|
3182
|
-
}
|
|
3183
|
-
}
|
|
3184
|
-
}
|
|
3185
|
-
}
|
|
3186
|
-
},
|
|
3187
|
-
{
|
|
3188
|
-
"search": "The inner flex container exposes part="divider" for theme overrides.\n",
|
|
3189
|
-
"files": {
|
|
3190
|
-
"core/components/ui/divider/divider.md": {
|
|
3191
|
-
"title": "Divider",
|
|
3192
|
-
"hashes": {
|
|
3193
|
-
"api-reference": {
|
|
3194
|
-
"count": 1,
|
|
3195
|
-
"title": "API reference",
|
|
3196
|
-
"type": "paragraph"
|
|
3197
|
-
}
|
|
3198
|
-
}
|
|
3199
|
-
}
|
|
3200
|
-
}
|
|
3201
|
-
},
|
|
3202
|
-
{
|
|
3203
|
-
"search": "Checkbox",
|
|
3204
|
-
"files": {
|
|
3205
|
-
"core/components/ui/form/checkbox/checkbox.md": {
|
|
3206
|
-
"title": "Checkbox",
|
|
3207
|
-
"hashes": {
|
|
3208
|
-
"checkbox": {
|
|
3209
|
-
"count": 1,
|
|
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",
|
|
3226
|
-
"type": "paragraph"
|
|
3227
|
-
}
|
|
3228
|
-
}
|
|
3229
|
-
}
|
|
3230
|
-
}
|
|
3231
|
-
},
|
|
3232
|
-
{
|
|
3233
|
-
"search": "Fieldset",
|
|
3234
|
-
"files": {
|
|
3235
|
-
"core/components/ui/form/fieldset/fieldset.md": {
|
|
3236
|
-
"title": "Fieldset",
|
|
3237
|
-
"hashes": {
|
|
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": {
|
|
3254
|
-
"count": 1,
|
|
3255
|
-
"title": "",
|
|
3256
|
-
"type": "paragraph"
|
|
3257
|
-
}
|
|
3258
|
-
}
|
|
3259
|
-
}
|
|
3260
|
-
}
|
|
3261
|
-
},
|
|
3262
|
-
{
|
|
3263
|
-
"search": "ghost and shadow use a transparent border; shadow also applies --sc-shadow-lg.\n",
|
|
3264
|
-
"files": {
|
|
3265
|
-
"core/components/ui/form/fieldset/fieldset.md": {
|
|
3266
|
-
"title": "Fieldset",
|
|
3267
|
-
"hashes": {
|
|
3268
|
-
"variant": {
|
|
3269
|
-
"count": 1,
|
|
3270
|
-
"title": "Variant",
|
|
3271
|
-
"type": "paragraph"
|
|
3272
|
-
}
|
|
3273
|
-
}
|
|
3274
|
-
}
|
|
3275
|
-
}
|
|
3276
|
-
},
|
|
3277
|
-
{
|
|
3278
|
-
"search": "Set tight to remove horizontal padding and side borders (flat strip inside a parent).\n",
|
|
3279
|
-
"files": {
|
|
3280
|
-
"core/components/ui/form/fieldset/fieldset.md": {
|
|
3281
|
-
"title": "Fieldset",
|
|
3282
|
-
"hashes": {
|
|
3283
|
-
"tight-layout": {
|
|
3284
|
-
"count": 1,
|
|
3285
|
-
"title": "Tight layout",
|
|
3286
|
-
"type": "paragraph"
|
|
3287
|
-
}
|
|
3288
|
-
}
|
|
3289
|
-
}
|
|
3290
|
-
}
|
|
3291
|
-
},
|
|
3292
|
-
{
|
|
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",
|
|
3294
|
-
"files": {
|
|
3295
|
-
"core/components/ui/form/fieldset/fieldset.md": {
|
|
3296
|
-
"title": "Fieldset",
|
|
3297
|
-
"hashes": {
|
|
3298
|
-
"legend": {
|
|
3299
|
-
"count": 1,
|
|
3300
|
-
"title": "Legend",
|
|
3301
|
-
"type": "paragraph"
|
|
3302
|
-
}
|
|
3303
|
-
}
|
|
3304
|
-
}
|
|
3305
|
-
}
|
|
3306
|
-
},
|
|
3307
|
-
{
|
|
3308
|
-
"search": "Attribute values on sonic-legend are rendered as HTML—use only trusted content.\n",
|
|
3309
|
-
"files": {
|
|
3310
|
-
"core/components/ui/form/fieldset/fieldset.md": {
|
|
3311
|
-
"title": "Fieldset",
|
|
3312
|
-
"hashes": {
|
|
3313
|
-
"legend": {
|
|
3314
|
-
"count": 1,
|
|
3315
|
-
"title": "Legend",
|
|
3316
|
-
"type": "paragraph"
|
|
3317
|
-
}
|
|
3318
|
-
}
|
|
3319
|
-
}
|
|
3320
|
-
}
|
|
3321
|
-
},
|
|
3322
|
-
{
|
|
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",
|
|
3324
|
-
"files": {
|
|
3325
|
-
"core/components/ui/form/fieldset/fieldset.md": {
|
|
3326
|
-
"title": "Fieldset",
|
|
3327
|
-
"hashes": {
|
|
3328
|
-
"shorthand-legend-on-the-fieldset": {
|
|
3329
|
-
"count": 1,
|
|
3330
|
-
"title": "Shorthand legend on the fieldset",
|
|
3331
|
-
"type": "paragraph"
|
|
3332
|
-
}
|
|
3333
|
-
}
|
|
3334
|
-
}
|
|
3335
|
-
}
|
|
3336
|
-
},
|
|
3337
|
-
{
|
|
3338
|
-
"search": "Use slot="suffix" on sonic-legend for menus or icon buttons aligned to the end of the legend row.\n",
|
|
3339
|
-
"files": {
|
|
3340
|
-
"core/components/ui/form/fieldset/fieldset.md": {
|
|
3341
|
-
"title": "Fieldset",
|
|
3342
|
-
"hashes": {
|
|
3343
|
-
"legend-actions": {
|
|
3344
|
-
"count": 1,
|
|
3345
|
-
"title": "Legend actions",
|
|
3346
|
-
"type": "paragraph"
|
|
3347
|
-
}
|
|
3348
|
-
}
|
|
3349
|
-
}
|
|
3350
|
-
}
|
|
3351
|
-
},
|
|
3352
|
-
{
|
|
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",
|
|
3354
|
-
"files": {
|
|
3355
|
-
"core/components/ui/form/fieldset/fieldset.md": {
|
|
3356
|
-
"title": "Fieldset",
|
|
3357
|
-
"hashes": {
|
|
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": {
|
|
3419
|
-
"count": 1,
|
|
3420
|
-
"title": "",
|
|
3421
|
-
"type": "page"
|
|
3422
|
-
}
|
|
3423
|
-
}
|
|
3424
|
-
}
|
|
3425
|
-
}
|
|
3426
|
-
},
|
|
3427
|
-
{
|
|
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",
|
|
3429
|
-
"files": {
|
|
3430
|
-
"core/components/ui/form/form-actions/form-actions.md": {
|
|
3431
|
-
"title": "Form actions",
|
|
3432
|
-
"hashes": {
|
|
3433
|
-
"form-actions": {
|
|
3434
|
-
"count": 1,
|
|
3435
|
-
"title": "",
|
|
3436
|
-
"type": "paragraph"
|
|
3437
|
-
}
|
|
3438
|
-
}
|
|
3439
|
-
}
|
|
3440
|
-
}
|
|
3441
|
-
},
|
|
3442
|
-
{
|
|
3443
|
-
"search": "With no attributes, actions align to the start of the row (typical for left-to-right forms).\n",
|
|
3444
|
-
"files": {
|
|
3445
|
-
"core/components/ui/form/form-actions/form-actions.md": {
|
|
3446
|
-
"title": "Form actions",
|
|
3447
|
-
"hashes": {
|
|
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": {
|
|
3524
|
-
"count": 1,
|
|
3525
|
-
"title": "",
|
|
3526
|
-
"type": "page"
|
|
3527
|
-
}
|
|
3528
|
-
}
|
|
3529
|
-
}
|
|
3530
|
-
}
|
|
3531
|
-
},
|
|
3532
|
-
{
|
|
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",
|
|
3534
|
-
"files": {
|
|
3535
|
-
"core/components/ui/form/form-layout/form-layout.md": {
|
|
3536
|
-
"title": "Form layout",
|
|
3537
|
-
"hashes": {
|
|
3538
|
-
"form-layout": {
|
|
3539
|
-
"count": 1,
|
|
3540
|
-
"title": "",
|
|
3541
|
-
"type": "paragraph"
|
|
3542
|
-
}
|
|
3543
|
-
}
|
|
3544
|
-
}
|
|
3545
|
-
}
|
|
3546
|
-
},
|
|
3547
|
-
{
|
|
3548
|
-
"search": "Typical registration-style form: short fields flow in two columns on wide layouts; long or grouped blocks stay full width.\n",
|
|
3549
|
-
"files": {
|
|
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",
|
|
5262
|
-
"hashes": {
|
|
5263
|
-
"invert": {
|
|
5264
|
-
"count": 1,
|
|
5265
|
-
"title": "Invert",
|
|
5266
|
-
"type": "paragraph"
|
|
5267
|
-
}
|
|
5268
|
-
}
|
|
5269
|
-
}
|
|
5270
|
-
}
|
|
5271
|
-
},
|
|
5272
|
-
{
|
|
5273
|
-
"search": "Table",
|
|
5274
|
-
"files": {
|
|
5275
|
-
"core/components/ui/table/table.md": {
|
|
5276
|
-
"title": "Table",
|
|
5277
|
-
"hashes": {
|
|
5278
|
-
"table": {
|
|
5279
|
-
"count": 1,
|
|
5280
|
-
"title": "",
|
|
5281
|
-
"type": "page"
|
|
5282
|
-
}
|
|
5283
|
-
}
|
|
5284
|
-
}
|
|
5285
|
-
}
|
|
5286
|
-
},
|
|
5287
|
-
{
|
|
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",
|
|
5289
|
-
"files": {
|
|
5290
|
-
"core/components/ui/table/table.md": {
|
|
5291
|
-
"title": "Table",
|
|
5292
|
-
"hashes": {
|
|
5293
|
-
"table": {
|
|
5294
|
-
"count": 1,
|
|
5295
|
-
"title": "",
|
|
5296
|
-
"type": "paragraph"
|
|
5297
|
-
}
|
|
5298
|
-
}
|
|
5299
|
-
}
|
|
5300
|
-
}
|
|
5301
|
-
},
|
|
5302
|
-
{
|
|
5303
|
-
"search": "A header row plus body rows is enough for static tables; sonic-thead / sonic-tbody are optional for simple layouts.\n",
|
|
5304
|
-
"files": {
|
|
5305
|
-
"core/components/ui/table/table.md": {
|
|
5306
|
-
"title": "Table",
|
|
5307
|
-
"hashes": {
|
|
5308
|
-
"basic-example": {
|
|
5309
|
-
"count": 1,
|
|
5310
|
-
"title": "Basic example",
|
|
5311
|
-
"type": "paragraph"
|
|
5312
|
-
}
|
|
5313
|
-
}
|
|
5314
|
-
}
|
|
5315
|
-
}
|
|
5316
|
-
},
|
|
5317
|
-
{
|
|
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",
|
|
5319
|
-
"files": {
|
|
5320
|
-
"core/components/ui/table/table.md": {
|
|
5321
|
-
"title": "Table",
|
|
5322
|
-
"hashes": {
|
|
5323
|
-
"list-and-fetch": {
|
|
5324
|
-
"count": 1,
|
|
5325
|
-
"title": "List and fetch",
|
|
2605
|
+
"title": "Type",
|
|
5326
2606
|
"type": "paragraph"
|
|
5327
2607
|
}
|
|
5328
2608
|
}
|
|
@@ -5330,14 +2610,14 @@
|
|
|
5330
2610
|
}
|
|
5331
2611
|
},
|
|
5332
2612
|
{
|
|
5333
|
-
"search": "
|
|
2613
|
+
"search": "Filter with formDataProvider + name="contains" (mock API: substring on joke text). Caption and rows via Lit (@subscribe, .items on sonic-queue):\n",
|
|
5334
2614
|
"files": {
|
|
5335
|
-
"core/components/ui/
|
|
5336
|
-
"title": "
|
|
2615
|
+
"core/components/ui/form/input/input.md": {
|
|
2616
|
+
"title": "Input",
|
|
5337
2617
|
"hashes": {
|
|
5338
|
-
"
|
|
2618
|
+
"example-of-use--search--queue": {
|
|
5339
2619
|
"count": 1,
|
|
5340
|
-
"title": "
|
|
2620
|
+
"title": "Example of use — search + queue",
|
|
5341
2621
|
"type": "paragraph"
|
|
5342
2622
|
}
|
|
5343
2623
|
}
|
|
@@ -5345,29 +2625,29 @@
|
|
|
5345
2625
|
}
|
|
5346
2626
|
},
|
|
5347
2627
|
{
|
|
5348
|
-
"search": "
|
|
2628
|
+
"search": "Input-autocomplete",
|
|
5349
2629
|
"files": {
|
|
5350
|
-
"core/components/ui/
|
|
5351
|
-
"title": "
|
|
2630
|
+
"core/components/ui/form/input-autocomplete/input-autocomplete.md": {
|
|
2631
|
+
"title": "Input-autocomplete",
|
|
5352
2632
|
"hashes": {
|
|
5353
|
-
"
|
|
2633
|
+
"input-autocomplete": {
|
|
5354
2634
|
"count": 1,
|
|
5355
|
-
"title": "
|
|
5356
|
-
"type": "
|
|
2635
|
+
"title": "",
|
|
2636
|
+
"type": "page"
|
|
5357
2637
|
}
|
|
5358
2638
|
}
|
|
5359
2639
|
}
|
|
5360
2640
|
}
|
|
5361
2641
|
},
|
|
5362
2642
|
{
|
|
5363
|
-
"search": "
|
|
2643
|
+
"search": "Champ formulaire + suggestions via queue. Valeur via formDataProvider + name ; la recherche filtre la queue (store interne).\n",
|
|
5364
2644
|
"files": {
|
|
5365
|
-
"core/components/ui/
|
|
5366
|
-
"title": "
|
|
2645
|
+
"core/components/ui/form/input-autocomplete/input-autocomplete.md": {
|
|
2646
|
+
"title": "Input-autocomplete",
|
|
5367
2647
|
"hashes": {
|
|
5368
|
-
"
|
|
2648
|
+
"input-autocomplete": {
|
|
5369
2649
|
"count": 1,
|
|
5370
|
-
"title": "
|
|
2650
|
+
"title": "",
|
|
5371
2651
|
"type": "paragraph"
|
|
5372
2652
|
}
|
|
5373
2653
|
}
|
|
@@ -5375,14 +2655,14 @@
|
|
|
5375
2655
|
}
|
|
5376
2656
|
},
|
|
5377
2657
|
{
|
|
5378
|
-
"search": "
|
|
2658
|
+
"search": "Rendu des lignes : propriété .items (callback Lit) — voir les démos ci-dessous. Mock : serviceURL="/docs-mock-api/geo/".\n",
|
|
5379
2659
|
"files": {
|
|
5380
|
-
"core/components/ui/
|
|
5381
|
-
"title": "
|
|
2660
|
+
"core/components/ui/form/input-autocomplete/input-autocomplete.md": {
|
|
2661
|
+
"title": "Input-autocomplete",
|
|
5382
2662
|
"hashes": {
|
|
5383
|
-
"
|
|
2663
|
+
"input-autocomplete": {
|
|
5384
2664
|
"count": 1,
|
|
5385
|
-
"title": "
|
|
2665
|
+
"title": "",
|
|
5386
2666
|
"type": "paragraph"
|
|
5387
2667
|
}
|
|
5388
2668
|
}
|
|
@@ -5390,14 +2670,14 @@
|
|
|
5390
2670
|
}
|
|
5391
2671
|
},
|
|
5392
2672
|
{
|
|
5393
|
-
"search": "
|
|
2673
|
+
"search": "name = paramètre de recherche = valeur formulaire.\n",
|
|
5394
2674
|
"files": {
|
|
5395
|
-
"core/components/ui/
|
|
5396
|
-
"title": "
|
|
2675
|
+
"core/components/ui/form/input-autocomplete/input-autocomplete.md": {
|
|
2676
|
+
"title": "Input-autocomplete",
|
|
5397
2677
|
"hashes": {
|
|
5398
|
-
"
|
|
2678
|
+
"simple": {
|
|
5399
2679
|
"count": 1,
|
|
5400
|
-
"title": "
|
|
2680
|
+
"title": "Simple",
|
|
5401
2681
|
"type": "paragraph"
|
|
5402
2682
|
}
|
|
5403
2683
|
}
|
|
@@ -5405,14 +2685,14 @@
|
|
|
5405
2685
|
}
|
|
5406
2686
|
},
|
|
5407
2687
|
{
|
|
5408
|
-
"search": "
|
|
2688
|
+
"search": "Recherche sur nom, valeur formulaire = code. Préremplissage via value.\n",
|
|
5409
2689
|
"files": {
|
|
5410
|
-
"core/components/ui/
|
|
5411
|
-
"title": "
|
|
2690
|
+
"core/components/ui/form/input-autocomplete/input-autocomplete.md": {
|
|
2691
|
+
"title": "Input-autocomplete",
|
|
5412
2692
|
"hashes": {
|
|
5413
|
-
"
|
|
2693
|
+
"valeur--paramètre-de-recherche": {
|
|
5414
2694
|
"count": 1,
|
|
5415
|
-
"title": "
|
|
2695
|
+
"title": "Valeur ≠ paramètre de recherche",
|
|
5416
2696
|
"type": "paragraph"
|
|
5417
2697
|
}
|
|
5418
2698
|
}
|
|
@@ -5420,14 +2700,14 @@
|
|
|
5420
2700
|
}
|
|
5421
2701
|
},
|
|
5422
2702
|
{
|
|
5423
|
-
"search": "
|
|
2703
|
+
"search": "À la fermeture du pop, seule une valeur de la liste (ou vide) est conservée.\n",
|
|
5424
2704
|
"files": {
|
|
5425
|
-
"core/components/ui/
|
|
5426
|
-
"title": "
|
|
2705
|
+
"core/components/ui/form/input-autocomplete/input-autocomplete.md": {
|
|
2706
|
+
"title": "Input-autocomplete",
|
|
5427
2707
|
"hashes": {
|
|
5428
|
-
"
|
|
2708
|
+
"mode-select": {
|
|
5429
2709
|
"count": 1,
|
|
5430
|
-
"title": "
|
|
2710
|
+
"title": "Mode select",
|
|
5431
2711
|
"type": "paragraph"
|
|
5432
2712
|
}
|
|
5433
2713
|
}
|
|
@@ -5435,14 +2715,14 @@
|
|
|
5435
2715
|
}
|
|
5436
2716
|
},
|
|
5437
2717
|
{
|
|
5438
|
-
"search": "
|
|
2718
|
+
"search": "data-keyboard-nav sur le champ et les items (flèches haut / bas).\n",
|
|
5439
2719
|
"files": {
|
|
5440
|
-
"core/components/ui/
|
|
5441
|
-
"title": "
|
|
2720
|
+
"core/components/ui/form/input-autocomplete/input-autocomplete.md": {
|
|
2721
|
+
"title": "Input-autocomplete",
|
|
5442
2722
|
"hashes": {
|
|
5443
|
-
"
|
|
2723
|
+
"navigation-clavier": {
|
|
5444
2724
|
"count": 1,
|
|
5445
|
-
"title": "
|
|
2725
|
+
"title": "Navigation clavier",
|
|
5446
2726
|
"type": "paragraph"
|
|
5447
2727
|
}
|
|
5448
2728
|
}
|
|
@@ -5450,59 +2730,59 @@
|
|
|
5450
2730
|
}
|
|
5451
2731
|
},
|
|
5452
2732
|
{
|
|
5453
|
-
"search": "
|
|
2733
|
+
"search": "Radio",
|
|
5454
2734
|
"files": {
|
|
5455
|
-
"core/components/ui/
|
|
5456
|
-
"title": "
|
|
2735
|
+
"core/components/ui/form/radio/radio.md": {
|
|
2736
|
+
"title": "Radio",
|
|
5457
2737
|
"hashes": {
|
|
5458
|
-
"
|
|
2738
|
+
"radio": {
|
|
5459
2739
|
"count": 1,
|
|
5460
|
-
"title": "
|
|
5461
|
-
"type": "
|
|
2740
|
+
"title": "",
|
|
2741
|
+
"type": "page"
|
|
5462
2742
|
}
|
|
5463
2743
|
}
|
|
5464
2744
|
}
|
|
5465
2745
|
}
|
|
5466
2746
|
},
|
|
5467
2747
|
{
|
|
5468
|
-
"search": "
|
|
2748
|
+
"search": "Same mock filter as Checkbox (blacklistFlags query param). Radio sends one flag at a time.\n",
|
|
5469
2749
|
"files": {
|
|
5470
|
-
"core/components/ui/
|
|
5471
|
-
"title": "
|
|
2750
|
+
"core/components/ui/form/radio/radio.md": {
|
|
2751
|
+
"title": "Radio",
|
|
5472
2752
|
"hashes": {
|
|
5473
|
-
"
|
|
2753
|
+
"example-of-use--blacklist--queue": {
|
|
5474
2754
|
"count": 1,
|
|
5475
|
-
"title": "",
|
|
5476
|
-
"type": "
|
|
2755
|
+
"title": "Example of use — blacklist + queue",
|
|
2756
|
+
"type": "paragraph"
|
|
5477
2757
|
}
|
|
5478
2758
|
}
|
|
5479
2759
|
}
|
|
5480
2760
|
}
|
|
5481
2761
|
},
|
|
5482
2762
|
{
|
|
5483
|
-
"search": "
|
|
2763
|
+
"search": "Select",
|
|
5484
2764
|
"files": {
|
|
5485
|
-
"core/components/ui/
|
|
5486
|
-
"title": "
|
|
2765
|
+
"core/components/ui/form/select/select.md": {
|
|
2766
|
+
"title": "Select",
|
|
5487
2767
|
"hashes": {
|
|
5488
|
-
"
|
|
2768
|
+
"select": {
|
|
5489
2769
|
"count": 1,
|
|
5490
2770
|
"title": "",
|
|
5491
|
-
"type": "
|
|
2771
|
+
"type": "page"
|
|
5492
2772
|
}
|
|
5493
2773
|
}
|
|
5494
2774
|
}
|
|
5495
2775
|
}
|
|
5496
2776
|
},
|
|
5497
2777
|
{
|
|
5498
|
-
"search": "
|
|
2778
|
+
"search": "name="lang" is sent as ?lang=fr|en to the doc mock API (filterDocsJokes). Same pattern as Input (contains):\n",
|
|
5499
2779
|
"files": {
|
|
5500
|
-
"core/components/ui/
|
|
5501
|
-
"title": "
|
|
2780
|
+
"core/components/ui/form/select/select.md": {
|
|
2781
|
+
"title": "Select",
|
|
5502
2782
|
"hashes": {
|
|
5503
|
-
"
|
|
2783
|
+
"example-of-use--language-filter--queue": {
|
|
5504
2784
|
"count": 1,
|
|
5505
|
-
"title": "
|
|
2785
|
+
"title": "Example of use — language filter + queue",
|
|
5506
2786
|
"type": "paragraph"
|
|
5507
2787
|
}
|
|
5508
2788
|
}
|
|
@@ -5510,29 +2790,29 @@
|
|
|
5510
2790
|
}
|
|
5511
2791
|
},
|
|
5512
2792
|
{
|
|
5513
|
-
"search": "
|
|
2793
|
+
"search": "Switch",
|
|
5514
2794
|
"files": {
|
|
5515
|
-
"core/components/ui/
|
|
5516
|
-
"title": "
|
|
2795
|
+
"core/components/ui/form/switch/switch.md": {
|
|
2796
|
+
"title": "Switch",
|
|
5517
2797
|
"hashes": {
|
|
5518
|
-
"
|
|
2798
|
+
"switch": {
|
|
5519
2799
|
"count": 1,
|
|
5520
|
-
"title": "
|
|
5521
|
-
"type": "
|
|
2800
|
+
"title": "",
|
|
2801
|
+
"type": "page"
|
|
5522
2802
|
}
|
|
5523
2803
|
}
|
|
5524
2804
|
}
|
|
5525
2805
|
}
|
|
5526
2806
|
},
|
|
5527
2807
|
{
|
|
5528
|
-
"search": "
|
|
2808
|
+
"search": "Same mock filter as Checkbox; switches can enable several flags (comma-separated in the query).\n",
|
|
5529
2809
|
"files": {
|
|
5530
|
-
"core/components/ui/
|
|
5531
|
-
"title": "
|
|
2810
|
+
"core/components/ui/form/switch/switch.md": {
|
|
2811
|
+
"title": "Switch",
|
|
5532
2812
|
"hashes": {
|
|
5533
|
-
"
|
|
2813
|
+
"example-of-use--blacklist--queue": {
|
|
5534
2814
|
"count": 1,
|
|
5535
|
-
"title": "
|
|
2815
|
+
"title": "Example of use — blacklist + queue",
|
|
5536
2816
|
"type": "paragraph"
|
|
5537
2817
|
}
|
|
5538
2818
|
}
|
|
@@ -5540,87 +2820,87 @@
|
|
|
5540
2820
|
}
|
|
5541
2821
|
},
|
|
5542
2822
|
{
|
|
5543
|
-
"search": "
|
|
2823
|
+
"search": "Textarea",
|
|
5544
2824
|
"files": {
|
|
5545
|
-
"core/components/ui/
|
|
5546
|
-
"title": "
|
|
2825
|
+
"core/components/ui/form/textarea/textarea.md": {
|
|
2826
|
+
"title": "Textarea",
|
|
5547
2827
|
"hashes": {
|
|
5548
|
-
"
|
|
2828
|
+
"textarea": {
|
|
5549
2829
|
"count": 1,
|
|
5550
|
-
"title": "
|
|
5551
|
-
"type": "
|
|
2830
|
+
"title": "",
|
|
2831
|
+
"type": "page"
|
|
5552
2832
|
}
|
|
5553
2833
|
}
|
|
5554
2834
|
}
|
|
5555
2835
|
}
|
|
5556
2836
|
},
|
|
5557
2837
|
{
|
|
5558
|
-
"search": "
|
|
2838
|
+
"search": "Group",
|
|
5559
2839
|
"files": {
|
|
5560
|
-
"core/components/ui/
|
|
5561
|
-
"title": "
|
|
2840
|
+
"core/components/ui/group/group.md": {
|
|
2841
|
+
"title": "Group",
|
|
5562
2842
|
"hashes": {
|
|
5563
|
-
"
|
|
2843
|
+
"group": {
|
|
5564
2844
|
"count": 1,
|
|
5565
|
-
"title": "
|
|
5566
|
-
"type": "
|
|
2845
|
+
"title": "",
|
|
2846
|
+
"type": "page"
|
|
5567
2847
|
}
|
|
5568
2848
|
}
|
|
5569
2849
|
}
|
|
5570
2850
|
}
|
|
5571
2851
|
},
|
|
5572
2852
|
{
|
|
5573
|
-
"search": "
|
|
2853
|
+
"search": "Icon",
|
|
5574
2854
|
"files": {
|
|
5575
|
-
"core/components/ui/
|
|
5576
|
-
"title": "
|
|
2855
|
+
"core/components/ui/icon/icon.md": {
|
|
2856
|
+
"title": "Icon",
|
|
5577
2857
|
"hashes": {
|
|
5578
|
-
"
|
|
2858
|
+
"icon": {
|
|
5579
2859
|
"count": 1,
|
|
5580
|
-
"title": "
|
|
5581
|
-
"type": "
|
|
2860
|
+
"title": "",
|
|
2861
|
+
"type": "page"
|
|
5582
2862
|
}
|
|
5583
2863
|
}
|
|
5584
2864
|
}
|
|
5585
2865
|
}
|
|
5586
2866
|
},
|
|
5587
2867
|
{
|
|
5588
|
-
"search": "
|
|
2868
|
+
"search": "Image",
|
|
5589
2869
|
"files": {
|
|
5590
|
-
"core/components/ui/
|
|
5591
|
-
"title": "
|
|
2870
|
+
"core/components/ui/image/image.md": {
|
|
2871
|
+
"title": "Image",
|
|
5592
2872
|
"hashes": {
|
|
5593
|
-
"
|
|
2873
|
+
"image": {
|
|
5594
2874
|
"count": 1,
|
|
5595
|
-
"title": "
|
|
5596
|
-
"type": "
|
|
2875
|
+
"title": "",
|
|
2876
|
+
"type": "page"
|
|
5597
2877
|
}
|
|
5598
2878
|
}
|
|
5599
2879
|
}
|
|
5600
2880
|
}
|
|
5601
2881
|
},
|
|
5602
2882
|
{
|
|
5603
|
-
"search": "
|
|
2883
|
+
"search": "Link",
|
|
5604
2884
|
"files": {
|
|
5605
|
-
"core/components/ui/
|
|
5606
|
-
"title": "
|
|
2885
|
+
"core/components/ui/link/link.md": {
|
|
2886
|
+
"title": "Link",
|
|
5607
2887
|
"hashes": {
|
|
5608
|
-
"
|
|
2888
|
+
"link": {
|
|
5609
2889
|
"count": 1,
|
|
5610
|
-
"title": "
|
|
5611
|
-
"type": "
|
|
2890
|
+
"title": "",
|
|
2891
|
+
"type": "page"
|
|
5612
2892
|
}
|
|
5613
2893
|
}
|
|
5614
2894
|
}
|
|
5615
2895
|
}
|
|
5616
2896
|
},
|
|
5617
2897
|
{
|
|
5618
|
-
"search": "
|
|
2898
|
+
"search": "Loader",
|
|
5619
2899
|
"files": {
|
|
5620
|
-
"core/components/ui/
|
|
5621
|
-
"title": "
|
|
2900
|
+
"core/components/ui/loader/loader.md": {
|
|
2901
|
+
"title": "Loader",
|
|
5622
2902
|
"hashes": {
|
|
5623
|
-
"
|
|
2903
|
+
"loader": {
|
|
5624
2904
|
"count": 1,
|
|
5625
2905
|
"title": "",
|
|
5626
2906
|
"type": "page"
|
|
@@ -5630,74 +2910,74 @@
|
|
|
5630
2910
|
}
|
|
5631
2911
|
},
|
|
5632
2912
|
{
|
|
5633
|
-
"search": "
|
|
2913
|
+
"search": "Menu",
|
|
5634
2914
|
"files": {
|
|
5635
|
-
"core/components/ui/
|
|
5636
|
-
"title": "
|
|
2915
|
+
"core/components/ui/menu/menu.md": {
|
|
2916
|
+
"title": "Menu",
|
|
5637
2917
|
"hashes": {
|
|
5638
|
-
"
|
|
2918
|
+
"menu": {
|
|
5639
2919
|
"count": 1,
|
|
5640
2920
|
"title": "",
|
|
5641
|
-
"type": "
|
|
2921
|
+
"type": "page"
|
|
5642
2922
|
}
|
|
5643
2923
|
}
|
|
5644
2924
|
}
|
|
5645
2925
|
}
|
|
5646
2926
|
},
|
|
5647
2927
|
{
|
|
5648
|
-
"search": "
|
|
2928
|
+
"search": "Modal",
|
|
5649
2929
|
"files": {
|
|
5650
|
-
"core/components/ui/
|
|
5651
|
-
"title": "
|
|
2930
|
+
"core/components/ui/modal/modal.md": {
|
|
2931
|
+
"title": "Modal",
|
|
5652
2932
|
"hashes": {
|
|
5653
|
-
"
|
|
2933
|
+
"modal": {
|
|
5654
2934
|
"count": 1,
|
|
5655
|
-
"title": "
|
|
5656
|
-
"type": "
|
|
2935
|
+
"title": "",
|
|
2936
|
+
"type": "page"
|
|
5657
2937
|
}
|
|
5658
2938
|
}
|
|
5659
2939
|
}
|
|
5660
2940
|
}
|
|
5661
2941
|
},
|
|
5662
2942
|
{
|
|
5663
|
-
"search": "
|
|
2943
|
+
"search": "Pop",
|
|
5664
2944
|
"files": {
|
|
5665
|
-
"core/components/ui/
|
|
5666
|
-
"title": "
|
|
2945
|
+
"core/components/ui/pop/pop.md": {
|
|
2946
|
+
"title": "Pop",
|
|
5667
2947
|
"hashes": {
|
|
5668
|
-
"
|
|
2948
|
+
"pop": {
|
|
5669
2949
|
"count": 1,
|
|
5670
|
-
"title": "
|
|
5671
|
-
"type": "
|
|
2950
|
+
"title": "",
|
|
2951
|
+
"type": "page"
|
|
5672
2952
|
}
|
|
5673
2953
|
}
|
|
5674
2954
|
}
|
|
5675
2955
|
}
|
|
5676
2956
|
},
|
|
5677
2957
|
{
|
|
5678
|
-
"search": "
|
|
2958
|
+
"search": "Progress bar",
|
|
5679
2959
|
"files": {
|
|
5680
|
-
"core/components/ui/
|
|
5681
|
-
"title": "
|
|
2960
|
+
"core/components/ui/progress/progress.md": {
|
|
2961
|
+
"title": "Progress bar",
|
|
5682
2962
|
"hashes": {
|
|
5683
|
-
"
|
|
2963
|
+
"progress-bar": {
|
|
5684
2964
|
"count": 1,
|
|
5685
|
-
"title": "
|
|
5686
|
-
"type": "
|
|
2965
|
+
"title": "",
|
|
2966
|
+
"type": "page"
|
|
5687
2967
|
}
|
|
5688
2968
|
}
|
|
5689
2969
|
}
|
|
5690
2970
|
}
|
|
5691
2971
|
},
|
|
5692
2972
|
{
|
|
5693
|
-
"search": "
|
|
2973
|
+
"search": "Displays an indicator showing the completion progress of a task.\n",
|
|
5694
2974
|
"files": {
|
|
5695
|
-
"core/components/ui/
|
|
5696
|
-
"title": "
|
|
2975
|
+
"core/components/ui/progress/progress.md": {
|
|
2976
|
+
"title": "Progress bar",
|
|
5697
2977
|
"hashes": {
|
|
5698
|
-
"
|
|
2978
|
+
"progress-bar": {
|
|
5699
2979
|
"count": 1,
|
|
5700
|
-
"title": "
|
|
2980
|
+
"title": "",
|
|
5701
2981
|
"type": "paragraph"
|
|
5702
2982
|
}
|
|
5703
2983
|
}
|
|
@@ -5705,29 +2985,29 @@
|
|
|
5705
2985
|
}
|
|
5706
2986
|
},
|
|
5707
2987
|
{
|
|
5708
|
-
"search": "
|
|
2988
|
+
"search": "Table",
|
|
5709
2989
|
"files": {
|
|
5710
|
-
"core/components/ui/
|
|
5711
|
-
"title": "
|
|
2990
|
+
"core/components/ui/table/table.md": {
|
|
2991
|
+
"title": "Table",
|
|
5712
2992
|
"hashes": {
|
|
5713
|
-
"
|
|
2993
|
+
"table": {
|
|
5714
2994
|
"count": 1,
|
|
5715
|
-
"title": "
|
|
5716
|
-
"type": "
|
|
2995
|
+
"title": "",
|
|
2996
|
+
"type": "page"
|
|
5717
2997
|
}
|
|
5718
2998
|
}
|
|
5719
2999
|
}
|
|
5720
3000
|
}
|
|
5721
3001
|
},
|
|
5722
3002
|
{
|
|
5723
|
-
"search": "
|
|
3003
|
+
"search": "Values available : primary, info, success, warning, danger\n",
|
|
5724
3004
|
"files": {
|
|
5725
|
-
"core/components/ui/
|
|
5726
|
-
"title": "
|
|
3005
|
+
"core/components/ui/table/table.md": {
|
|
3006
|
+
"title": "Table",
|
|
5727
3007
|
"hashes": {
|
|
5728
|
-
"
|
|
3008
|
+
"type": {
|
|
5729
3009
|
"count": 1,
|
|
5730
|
-
"title": "
|
|
3010
|
+
"title": "Type",
|
|
5731
3011
|
"type": "paragraph"
|
|
5732
3012
|
}
|
|
5733
3013
|
}
|
|
@@ -5735,14 +3015,14 @@
|
|
|
5735
3015
|
}
|
|
5736
3016
|
},
|
|
5737
3017
|
{
|
|
5738
|
-
"search": "
|
|
3018
|
+
"search": "The following attributes will be used to set the style of the component : \n",
|
|
5739
3019
|
"files": {
|
|
5740
|
-
"core/components/ui/
|
|
5741
|
-
"title": "
|
|
3020
|
+
"core/components/ui/table/table.md": {
|
|
3021
|
+
"title": "Table",
|
|
5742
3022
|
"hashes": {
|
|
5743
|
-
"
|
|
3023
|
+
"cell-style-attributes": {
|
|
5744
3024
|
"count": 1,
|
|
5745
|
-
"title": "
|
|
3025
|
+
"title": "Cell style attributes",
|
|
5746
3026
|
"type": "paragraph"
|
|
5747
3027
|
}
|
|
5748
3028
|
}
|
|
@@ -5750,14 +3030,14 @@
|
|
|
5750
3030
|
}
|
|
5751
3031
|
},
|
|
5752
3032
|
{
|
|
5753
|
-
"search": "
|
|
3033
|
+
"search": "Every table is responsive by default\n",
|
|
5754
3034
|
"files": {
|
|
5755
|
-
"core/components/ui/
|
|
5756
|
-
"title": "
|
|
3035
|
+
"core/components/ui/table/table.md": {
|
|
3036
|
+
"title": "Table",
|
|
5757
3037
|
"hashes": {
|
|
5758
|
-
"
|
|
3038
|
+
"responsive": {
|
|
5759
3039
|
"count": 1,
|
|
5760
|
-
"title": "
|
|
3040
|
+
"title": "Responsive",
|
|
5761
3041
|
"type": "paragraph"
|
|
5762
3042
|
}
|
|
5763
3043
|
}
|
|
@@ -5765,29 +3045,29 @@
|
|
|
5765
3045
|
}
|
|
5766
3046
|
},
|
|
5767
3047
|
{
|
|
5768
|
-
"search": "
|
|
3048
|
+
"search": "Toast",
|
|
5769
3049
|
"files": {
|
|
5770
3050
|
"core/components/ui/toast/toast.md": {
|
|
5771
3051
|
"title": "Toast",
|
|
5772
3052
|
"hashes": {
|
|
5773
|
-
"
|
|
3053
|
+
"toast": {
|
|
5774
3054
|
"count": 1,
|
|
5775
|
-
"title": "
|
|
5776
|
-
"type": "
|
|
3055
|
+
"title": "",
|
|
3056
|
+
"type": "page"
|
|
5777
3057
|
}
|
|
5778
3058
|
}
|
|
5779
3059
|
}
|
|
5780
3060
|
}
|
|
5781
3061
|
},
|
|
5782
3062
|
{
|
|
5783
|
-
"search": "
|
|
3063
|
+
"search": "Les statuts disponibles sont : success, error, warning, info ou vide (par défaut).\n",
|
|
5784
3064
|
"files": {
|
|
5785
3065
|
"core/components/ui/toast/toast.md": {
|
|
5786
3066
|
"title": "Toast",
|
|
5787
3067
|
"hashes": {
|
|
5788
|
-
"
|
|
3068
|
+
"statut": {
|
|
5789
3069
|
"count": 1,
|
|
5790
|
-
"title": "
|
|
3070
|
+
"title": "Statut",
|
|
5791
3071
|
"type": "paragraph"
|
|
5792
3072
|
}
|
|
5793
3073
|
}
|
|
@@ -5795,14 +3075,14 @@
|
|
|
5795
3075
|
}
|
|
5796
3076
|
},
|
|
5797
3077
|
{
|
|
5798
|
-
"search": "
|
|
3078
|
+
"search": "Le contenu du toast peut contenir du HTML.\n",
|
|
5799
3079
|
"files": {
|
|
5800
3080
|
"core/components/ui/toast/toast.md": {
|
|
5801
3081
|
"title": "Toast",
|
|
5802
3082
|
"hashes": {
|
|
5803
|
-
"
|
|
3083
|
+
"avec-contenu-html": {
|
|
5804
3084
|
"count": 1,
|
|
5805
|
-
"title": "
|
|
3085
|
+
"title": "Avec contenu HTML",
|
|
5806
3086
|
"type": "paragraph"
|
|
5807
3087
|
}
|
|
5808
3088
|
}
|
|
@@ -5810,14 +3090,14 @@
|
|
|
5810
3090
|
}
|
|
5811
3091
|
},
|
|
5812
3092
|
{
|
|
5813
|
-
"search": "
|
|
3093
|
+
"search": "Par défaut, les toasts disparaissent automatiquement. Avec preserve: true, le toast reste affiché jusqu'à ce qu'il soit fermé manuellement.\n",
|
|
5814
3094
|
"files": {
|
|
5815
3095
|
"core/components/ui/toast/toast.md": {
|
|
5816
3096
|
"title": "Toast",
|
|
5817
3097
|
"hashes": {
|
|
5818
|
-
"
|
|
3098
|
+
"persistance": {
|
|
5819
3099
|
"count": 1,
|
|
5820
|
-
"title": "
|
|
3100
|
+
"title": "Persistance",
|
|
5821
3101
|
"type": "paragraph"
|
|
5822
3102
|
}
|
|
5823
3103
|
}
|
|
@@ -5825,14 +3105,14 @@
|
|
|
5825
3105
|
}
|
|
5826
3106
|
},
|
|
5827
3107
|
{
|
|
5828
|
-
"search": "
|
|
3108
|
+
"search": "Avec dismissForever: true et un id, le toast peut être masqué définitivement. Une fois fermé, il ne réapparaîtra plus même après rechargement de la page.\n",
|
|
5829
3109
|
"files": {
|
|
5830
3110
|
"core/components/ui/toast/toast.md": {
|
|
5831
3111
|
"title": "Toast",
|
|
5832
3112
|
"hashes": {
|
|
5833
|
-
"
|
|
3113
|
+
"masquer-définitivement": {
|
|
5834
3114
|
"count": 1,
|
|
5835
|
-
"title": "
|
|
3115
|
+
"title": "Masquer définitivement",
|
|
5836
3116
|
"type": "paragraph"
|
|
5837
3117
|
}
|
|
5838
3118
|
}
|
|
@@ -5840,29 +3120,29 @@
|
|
|
5840
3120
|
}
|
|
5841
3121
|
},
|
|
5842
3122
|
{
|
|
5843
|
-
"search": "
|
|
3123
|
+
"search": "Avec ghost: true, le toast devient semi-transparent et non-interactif.\n",
|
|
5844
3124
|
"files": {
|
|
5845
|
-
"core/components/ui/
|
|
5846
|
-
"title": "
|
|
3125
|
+
"core/components/ui/toast/toast.md": {
|
|
3126
|
+
"title": "Toast",
|
|
5847
3127
|
"hashes": {
|
|
5848
|
-
"
|
|
3128
|
+
"fantôme": {
|
|
5849
3129
|
"count": 1,
|
|
5850
|
-
"title": "",
|
|
5851
|
-
"type": "
|
|
3130
|
+
"title": "Fantôme",
|
|
3131
|
+
"type": "paragraph"
|
|
5852
3132
|
}
|
|
5853
3133
|
}
|
|
5854
3134
|
}
|
|
5855
3135
|
}
|
|
5856
3136
|
},
|
|
5857
3137
|
{
|
|
5858
|
-
"search": "
|
|
3138
|
+
"search": "Supprime tous les toasts sauf ceux marqués comme ghost.\n",
|
|
5859
3139
|
"files": {
|
|
5860
|
-
"core/components/ui/
|
|
5861
|
-
"title": "
|
|
3140
|
+
"core/components/ui/toast/toast.md": {
|
|
3141
|
+
"title": "Toast",
|
|
5862
3142
|
"hashes": {
|
|
5863
|
-
"
|
|
3143
|
+
"tout-supprimer": {
|
|
5864
3144
|
"count": 1,
|
|
5865
|
-
"title": "",
|
|
3145
|
+
"title": "Tout supprimer",
|
|
5866
3146
|
"type": "paragraph"
|
|
5867
3147
|
}
|
|
5868
3148
|
}
|
|
@@ -5870,14 +3150,14 @@
|
|
|
5870
3150
|
}
|
|
5871
3151
|
},
|
|
5872
3152
|
{
|
|
5873
|
-
"search": "
|
|
3153
|
+
"search": "Supprime tous les toasts d'un statut spécifique.\n",
|
|
5874
3154
|
"files": {
|
|
5875
|
-
"core/components/ui/
|
|
5876
|
-
"title": "
|
|
3155
|
+
"core/components/ui/toast/toast.md": {
|
|
3156
|
+
"title": "Toast",
|
|
5877
3157
|
"hashes": {
|
|
5878
|
-
"
|
|
3158
|
+
"supprimer-par-statut": {
|
|
5879
3159
|
"count": 1,
|
|
5880
|
-
"title": "
|
|
3160
|
+
"title": "Supprimer par statut",
|
|
5881
3161
|
"type": "paragraph"
|
|
5882
3162
|
}
|
|
5883
3163
|
}
|
|
@@ -5885,14 +3165,14 @@
|
|
|
5885
3165
|
}
|
|
5886
3166
|
},
|
|
5887
3167
|
{
|
|
5888
|
-
"search": "
|
|
3168
|
+
"search": "Supprime tous les toasts qui ne sont pas marqués comme preserve.\n",
|
|
5889
3169
|
"files": {
|
|
5890
|
-
"core/components/ui/
|
|
5891
|
-
"title": "
|
|
3170
|
+
"core/components/ui/toast/toast.md": {
|
|
3171
|
+
"title": "Toast",
|
|
5892
3172
|
"hashes": {
|
|
5893
|
-
"
|
|
3173
|
+
"supprimer-les-éléments-temporaires": {
|
|
5894
3174
|
"count": 1,
|
|
5895
|
-
"title": "
|
|
3175
|
+
"title": "Supprimer les éléments temporaires",
|
|
5896
3176
|
"type": "paragraph"
|
|
5897
3177
|
}
|
|
5898
3178
|
}
|
|
@@ -5900,29 +3180,29 @@
|
|
|
5900
3180
|
}
|
|
5901
3181
|
},
|
|
5902
3182
|
{
|
|
5903
|
-
"search": "
|
|
3183
|
+
"search": "Tooltip",
|
|
5904
3184
|
"files": {
|
|
5905
3185
|
"core/components/ui/tooltip/tooltip.md": {
|
|
5906
3186
|
"title": "Tooltip",
|
|
5907
3187
|
"hashes": {
|
|
5908
|
-
"
|
|
3188
|
+
"tooltip": {
|
|
5909
3189
|
"count": 1,
|
|
5910
|
-
"title": "
|
|
5911
|
-
"type": "
|
|
3190
|
+
"title": "",
|
|
3191
|
+
"type": "page"
|
|
5912
3192
|
}
|
|
5913
3193
|
}
|
|
5914
3194
|
}
|
|
5915
3195
|
}
|
|
5916
3196
|
},
|
|
5917
3197
|
{
|
|
5918
|
-
"search": "
|
|
3198
|
+
"search": "By default, tooltip is centered next to its content\n",
|
|
5919
3199
|
"files": {
|
|
5920
3200
|
"core/components/ui/tooltip/tooltip.md": {
|
|
5921
3201
|
"title": "Tooltip",
|
|
5922
3202
|
"hashes": {
|
|
5923
|
-
"
|
|
3203
|
+
"placement": {
|
|
5924
3204
|
"count": 1,
|
|
5925
|
-
"title": "
|
|
3205
|
+
"title": "Placement",
|
|
5926
3206
|
"type": "paragraph"
|
|
5927
3207
|
}
|
|
5928
3208
|
}
|
|
@@ -11040,7 +8320,7 @@
|
|
|
11040
8320
|
}
|
|
11041
8321
|
},
|
|
11042
8322
|
{
|
|
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
|
|
8323
|
+
"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 a small set of CSS variables.\n",
|
|
11044
8324
|
"files": {
|
|
11045
8325
|
"docs/_getting-started/start.md": {
|
|
11046
8326
|
"title": "Introduction",
|
|
@@ -11100,12 +8380,12 @@
|
|
|
11100
8380
|
}
|
|
11101
8381
|
},
|
|
11102
8382
|
{
|
|
11103
|
-
"search": "
|
|
8383
|
+
"search": "Adding styles",
|
|
11104
8384
|
"files": {
|
|
11105
8385
|
"docs/_getting-started/theming.md": {
|
|
11106
|
-
"title": "
|
|
8386
|
+
"title": "Adding styles",
|
|
11107
8387
|
"hashes": {
|
|
11108
|
-
"
|
|
8388
|
+
"adding-styles": {
|
|
11109
8389
|
"count": 1,
|
|
11110
8390
|
"title": "",
|
|
11111
8391
|
"type": "page"
|
|
@@ -11115,29 +8395,14 @@
|
|
|
11115
8395
|
}
|
|
11116
8396
|
},
|
|
11117
8397
|
{
|
|
11118
|
-
"search": "
|
|
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",
|
|
8398
|
+
"search": "No style crosses the shadow root of a component, except for inheritable properties (which have the "inherit" property possible) and CSS variables.\nProperties integrated via a "slot" remain stylizable in a conventional way.\n",
|
|
11134
8399
|
"files": {
|
|
11135
8400
|
"docs/_getting-started/theming.md": {
|
|
11136
|
-
"title": "
|
|
8401
|
+
"title": "Adding styles",
|
|
11137
8402
|
"hashes": {
|
|
11138
|
-
"
|
|
8403
|
+
"normal-behavior": {
|
|
11139
8404
|
"count": 1,
|
|
11140
|
-
"title": "
|
|
8405
|
+
"title": "Normal Behavior",
|
|
11141
8406
|
"type": "paragraph"
|
|
11142
8407
|
}
|
|
11143
8408
|
}
|
|
@@ -11145,14 +8410,14 @@
|
|
|
11145
8410
|
}
|
|
11146
8411
|
},
|
|
11147
8412
|
{
|
|
11148
|
-
"search": "
|
|
8413
|
+
"search": "The declaration of reactive properties is useful for selecting a particular configuration that mostly affects a set of properties.\n",
|
|
11149
8414
|
"files": {
|
|
11150
8415
|
"docs/_getting-started/theming.md": {
|
|
11151
|
-
"title": "
|
|
8416
|
+
"title": "Adding styles",
|
|
11152
8417
|
"hashes": {
|
|
11153
|
-
"
|
|
8418
|
+
"choosing-style-presets-via-reactive-properties": {
|
|
11154
8419
|
"count": 1,
|
|
11155
|
-
"title": "
|
|
8420
|
+
"title": "Choosing Style Presets via Reactive Properties:",
|
|
11156
8421
|
"type": "paragraph"
|
|
11157
8422
|
}
|
|
11158
8423
|
}
|
|
@@ -11160,14 +8425,14 @@
|
|
|
11160
8425
|
}
|
|
11161
8426
|
},
|
|
11162
8427
|
{
|
|
11163
|
-
"search": "
|
|
8428
|
+
"search": "For example, a size property (xs, sm, md, xl) will affect margins, font, line heights to align them with the corresponding CSS vars, which can be customized using the methods mentioned earlier if necessary.\n",
|
|
11164
8429
|
"files": {
|
|
11165
8430
|
"docs/_getting-started/theming.md": {
|
|
11166
|
-
"title": "
|
|
8431
|
+
"title": "Adding styles",
|
|
11167
8432
|
"hashes": {
|
|
11168
|
-
"
|
|
8433
|
+
"choosing-style-presets-via-reactive-properties": {
|
|
11169
8434
|
"count": 1,
|
|
11170
|
-
"title": "
|
|
8435
|
+
"title": "Choosing Style Presets via Reactive Properties:",
|
|
11171
8436
|
"type": "paragraph"
|
|
11172
8437
|
}
|
|
11173
8438
|
}
|
|
@@ -11175,14 +8440,14 @@
|
|
|
11175
8440
|
}
|
|
11176
8441
|
},
|
|
11177
8442
|
{
|
|
11178
|
-
"search": "
|
|
8443
|
+
"search": "It is recommended to use the {reflect: true} property for reactive properties that have an associated style on the :host(). For example: :host([type='primary']){...}\n",
|
|
11179
8444
|
"files": {
|
|
11180
8445
|
"docs/_getting-started/theming.md": {
|
|
11181
|
-
"title": "
|
|
8446
|
+
"title": "Adding styles",
|
|
11182
8447
|
"hashes": {
|
|
11183
|
-
"
|
|
8448
|
+
"choosing-style-presets-via-reactive-properties": {
|
|
11184
8449
|
"count": 1,
|
|
11185
|
-
"title": "
|
|
8450
|
+
"title": "Choosing Style Presets via Reactive Properties:",
|
|
11186
8451
|
"type": "paragraph"
|
|
11187
8452
|
}
|
|
11188
8453
|
}
|
|
@@ -11190,14 +8455,14 @@
|
|
|
11190
8455
|
}
|
|
11191
8456
|
},
|
|
11192
8457
|
{
|
|
11193
|
-
"search": "
|
|
8458
|
+
"search": "☢️ Caution: Passing class names via reactive properties / HTML attributes of the component should be avoided as it can quickly lead to difficult-to-manage situations.\n",
|
|
11194
8459
|
"files": {
|
|
11195
8460
|
"docs/_getting-started/theming.md": {
|
|
11196
|
-
"title": "
|
|
8461
|
+
"title": "Adding styles",
|
|
11197
8462
|
"hashes": {
|
|
11198
|
-
"
|
|
8463
|
+
"choosing-style-presets-via-reactive-properties": {
|
|
11199
8464
|
"count": 1,
|
|
11200
|
-
"title": "
|
|
8465
|
+
"title": "Choosing Style Presets via Reactive Properties:",
|
|
11201
8466
|
"type": "paragraph"
|
|
11202
8467
|
}
|
|
11203
8468
|
}
|
|
@@ -11205,14 +8470,14 @@
|
|
|
11205
8470
|
}
|
|
11206
8471
|
},
|
|
11207
8472
|
{
|
|
11208
|
-
"search": "
|
|
8473
|
+
"search": "By default, the display property is inline.\nTherefore, be careful to define it according to the needs, as one might mistakenly expect it to be block as with a regular <div>.\n",
|
|
11209
8474
|
"files": {
|
|
11210
8475
|
"docs/_getting-started/theming.md": {
|
|
11211
|
-
"title": "
|
|
8476
|
+
"title": "Adding styles",
|
|
11212
8477
|
"hashes": {
|
|
11213
|
-
"
|
|
8478
|
+
"css-display-property": {
|
|
11214
8479
|
"count": 1,
|
|
11215
|
-
"title": "
|
|
8480
|
+
"title": "CSS \"display\" Property",
|
|
11216
8481
|
"type": "paragraph"
|
|
11217
8482
|
}
|
|
11218
8483
|
}
|
|
@@ -11220,14 +8485,14 @@
|
|
|
11220
8485
|
}
|
|
11221
8486
|
},
|
|
11222
8487
|
{
|
|
11223
|
-
"search": "
|
|
8488
|
+
"search": "☢️ Caution: Defining the display property as contents may seem attractive at first, but:\n",
|
|
11224
8489
|
"files": {
|
|
11225
8490
|
"docs/_getting-started/theming.md": {
|
|
11226
|
-
"title": "
|
|
8491
|
+
"title": "Adding styles",
|
|
11227
8492
|
"hashes": {
|
|
11228
|
-
"
|
|
8493
|
+
"css-display-property": {
|
|
11229
8494
|
"count": 1,
|
|
11230
|
-
"title": "
|
|
8495
|
+
"title": "CSS \"display\" Property",
|
|
11231
8496
|
"type": "paragraph"
|
|
11232
8497
|
}
|
|
11233
8498
|
}
|
|
@@ -11235,14 +8500,14 @@
|
|
|
11235
8500
|
}
|
|
11236
8501
|
},
|
|
11237
8502
|
{
|
|
11238
|
-
"search": "
|
|
8503
|
+
"search": "tailwind has been integrated into Concorde and is available in scoped components (with Shadow DOM).\nTo use it, you need to import the following:\n",
|
|
11239
8504
|
"files": {
|
|
11240
8505
|
"docs/_getting-started/theming.md": {
|
|
11241
|
-
"title": "
|
|
8506
|
+
"title": "Adding styles",
|
|
11242
8507
|
"hashes": {
|
|
11243
|
-
"
|
|
8508
|
+
"tailwind-functional-classes": {
|
|
11244
8509
|
"count": 1,
|
|
11245
|
-
"title": "
|
|
8510
|
+
"title": "TAILWIND Functional Classes",
|
|
11246
8511
|
"type": "paragraph"
|
|
11247
8512
|
}
|
|
11248
8513
|
}
|
|
@@ -11250,14 +8515,14 @@
|
|
|
11250
8515
|
}
|
|
11251
8516
|
},
|
|
11252
8517
|
{
|
|
11253
|
-
"search": "
|
|
8518
|
+
"search": "Then include the tailwind style in the static styles property of the component:\n",
|
|
11254
8519
|
"files": {
|
|
11255
8520
|
"docs/_getting-started/theming.md": {
|
|
11256
|
-
"title": "
|
|
8521
|
+
"title": "Adding styles",
|
|
11257
8522
|
"hashes": {
|
|
11258
|
-
"
|
|
8523
|
+
"tailwind-functional-classes": {
|
|
11259
8524
|
"count": 1,
|
|
11260
|
-
"title": "
|
|
8525
|
+
"title": "TAILWIND Functional Classes",
|
|
11261
8526
|
"type": "paragraph"
|
|
11262
8527
|
}
|
|
11263
8528
|
}
|
|
@@ -11265,14 +8530,14 @@
|
|
|
11265
8530
|
}
|
|
11266
8531
|
},
|
|
11267
8532
|
{
|
|
11268
|
-
"search": "
|
|
8533
|
+
"search": "Finally, use it in the HTML within the render function:\n",
|
|
11269
8534
|
"files": {
|
|
11270
8535
|
"docs/_getting-started/theming.md": {
|
|
11271
|
-
"title": "
|
|
8536
|
+
"title": "Adding styles",
|
|
11272
8537
|
"hashes": {
|
|
11273
|
-
"
|
|
8538
|
+
"tailwind-functional-classes": {
|
|
11274
8539
|
"count": 1,
|
|
11275
|
-
"title": "
|
|
8540
|
+
"title": "TAILWIND Functional Classes",
|
|
11276
8541
|
"type": "paragraph"
|
|
11277
8542
|
}
|
|
11278
8543
|
}
|
|
@@ -11280,14 +8545,14 @@
|
|
|
11280
8545
|
}
|
|
11281
8546
|
},
|
|
11282
8547
|
{
|
|
11283
|
-
"search": "
|
|
8548
|
+
"search": "The colors from Concorde's theme are referenced in Tailwind's theme.\n",
|
|
11284
8549
|
"files": {
|
|
11285
8550
|
"docs/_getting-started/theming.md": {
|
|
11286
|
-
"title": "
|
|
8551
|
+
"title": "Adding styles",
|
|
11287
8552
|
"hashes": {
|
|
11288
|
-
"
|
|
8553
|
+
"tailwind-functional-classes": {
|
|
11289
8554
|
"count": 1,
|
|
11290
|
-
"title": "
|
|
8555
|
+
"title": "TAILWIND Functional Classes",
|
|
11291
8556
|
"type": "paragraph"
|
|
11292
8557
|
}
|
|
11293
8558
|
}
|
|
@@ -11295,14 +8560,14 @@
|
|
|
11295
8560
|
}
|
|
11296
8561
|
},
|
|
11297
8562
|
{
|
|
11298
|
-
"search": "
|
|
8563
|
+
"search": "This operation is particularly useful when it comes to adding behavior to a simple existing element.\nIt may also become necessary to establish compatibility with a traditional JS library.\n",
|
|
11299
8564
|
"files": {
|
|
11300
8565
|
"docs/_getting-started/theming.md": {
|
|
11301
|
-
"title": "
|
|
8566
|
+
"title": "Adding styles",
|
|
11302
8567
|
"hashes": {
|
|
11303
|
-
"
|
|
8568
|
+
"usefulness": {
|
|
11304
8569
|
"count": 1,
|
|
11305
|
-
"title": "
|
|
8570
|
+
"title": "Usefulness",
|
|
11306
8571
|
"type": "paragraph"
|
|
11307
8572
|
}
|
|
11308
8573
|
}
|
|
@@ -11310,14 +8575,14 @@
|
|
|
11310
8575
|
}
|
|
11311
8576
|
},
|
|
11312
8577
|
{
|
|
11313
|
-
"search": "
|
|
8578
|
+
"search": "For example, with a text input:\n",
|
|
11314
8579
|
"files": {
|
|
11315
8580
|
"docs/_getting-started/theming.md": {
|
|
11316
|
-
"title": "
|
|
8581
|
+
"title": "Adding styles",
|
|
11317
8582
|
"hashes": {
|
|
11318
|
-
"
|
|
8583
|
+
"usefulness": {
|
|
11319
8584
|
"count": 1,
|
|
11320
|
-
"title": "
|
|
8585
|
+
"title": "Usefulness",
|
|
11321
8586
|
"type": "paragraph"
|
|
11322
8587
|
}
|
|
11323
8588
|
}
|
|
@@ -11325,14 +8590,14 @@
|
|
|
11325
8590
|
}
|
|
11326
8591
|
},
|
|
11327
8592
|
{
|
|
11328
|
-
"search": "
|
|
8593
|
+
"search": "If there is no shadow DOM (see the noShadowDom property of Subscriber):\n",
|
|
11329
8594
|
"files": {
|
|
11330
8595
|
"docs/_getting-started/theming.md": {
|
|
11331
|
-
"title": "
|
|
8596
|
+
"title": "Adding styles",
|
|
11332
8597
|
"hashes": {
|
|
11333
|
-
"
|
|
8598
|
+
"consequences": {
|
|
11334
8599
|
"count": 1,
|
|
11335
|
-
"title": "
|
|
8600
|
+
"title": "Consequences",
|
|
11336
8601
|
"type": "paragraph"
|
|
11337
8602
|
}
|
|
11338
8603
|
}
|
|
@@ -11340,14 +8605,14 @@
|
|
|
11340
8605
|
}
|
|
11341
8606
|
},
|
|
11342
8607
|
{
|
|
11343
|
-
"search": "
|
|
8608
|
+
"search": "For example, the components queue, list, and fetch do not have a shadow DOM.\n",
|
|
11344
8609
|
"files": {
|
|
11345
8610
|
"docs/_getting-started/theming.md": {
|
|
11346
|
-
"title": "
|
|
8611
|
+
"title": "Adding styles",
|
|
11347
8612
|
"hashes": {
|
|
11348
|
-
"
|
|
8613
|
+
"consequences": {
|
|
11349
8614
|
"count": 1,
|
|
11350
|
-
"title": "
|
|
8615
|
+
"title": "Consequences",
|
|
11351
8616
|
"type": "paragraph"
|
|
11352
8617
|
}
|
|
11353
8618
|
}
|
|
@@ -11355,14 +8620,14 @@
|
|
|
11355
8620
|
}
|
|
11356
8621
|
},
|
|
11357
8622
|
{
|
|
11358
|
-
"search": "
|
|
8623
|
+
"search": "ℹ️ Note: Specifically in this case, it may be useful to set the display property to contents.\n",
|
|
11359
8624
|
"files": {
|
|
11360
8625
|
"docs/_getting-started/theming.md": {
|
|
11361
|
-
"title": "
|
|
8626
|
+
"title": "Adding styles",
|
|
11362
8627
|
"hashes": {
|
|
11363
|
-
"
|
|
8628
|
+
"consequences": {
|
|
11364
8629
|
"count": 1,
|
|
11365
|
-
"title": "
|
|
8630
|
+
"title": "Consequences",
|
|
11366
8631
|
"type": "paragraph"
|
|
11367
8632
|
}
|
|
11368
8633
|
}
|