@supersoniks/concorde 5.0.5 → 5.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.claude/launch.json +15 -0
- package/.claude/vite.http.config.mjs +7 -0
- package/.taste-skill/after/desktop-fold.jpg +0 -0
- package/.taste-skill/after/desktop-page-01.jpg +0 -0
- package/.taste-skill/after/desktop-page-02.jpg +0 -0
- package/.taste-skill/after/desktop-page-03.jpg +0 -0
- package/.taste-skill/after/mobile-fold.jpg +0 -0
- package/.taste-skill/after/mobile-page-01.jpg +0 -0
- package/.taste-skill/after/report.json +4103 -0
- package/.taste-skill/after/tablet-fold.jpg +0 -0
- package/.taste-skill/after/tablet-page-01.jpg +0 -0
- package/.taste-skill/after/tablet-page-02.jpg +0 -0
- package/.taste-skill/before/desktop-fold.jpg +0 -0
- package/.taste-skill/before/desktop-page-01.jpg +0 -0
- package/.taste-skill/before/desktop-page-02.jpg +0 -0
- package/.taste-skill/before/mobile-fold.jpg +0 -0
- package/.taste-skill/before/mobile-page-01.jpg +0 -0
- package/.taste-skill/before/report.json +2556 -0
- package/.taste-skill/before/tablet-fold.jpg +0 -0
- package/.taste-skill/before/tablet-page-01.jpg +0 -0
- package/.taste-skill/direction.json +510 -0
- package/.taste-skill/notes.md +84 -0
- package/.taste-skill/prod/desktop-fold.jpg +0 -0
- package/.taste-skill/prod/desktop-page-01.jpg +0 -0
- package/.taste-skill/prod/desktop-page-02.jpg +0 -0
- package/.taste-skill/prod/desktop-page-03.jpg +0 -0
- package/.taste-skill/prod/mobile-fold.jpg +0 -0
- package/.taste-skill/prod/mobile-page-01.jpg +0 -0
- package/.taste-skill/prod/mobile-page-02.jpg +0 -0
- package/.taste-skill/prod/report.json +1973 -0
- package/.taste-skill/prod/tablet-fold.jpg +0 -0
- package/.taste-skill/prod/tablet-page-01.jpg +0 -0
- package/.taste-skill/prod/tablet-page-02.jpg +0 -0
- package/.tmp-cem/custom-elements.json +13705 -0
- package/AUDIT.md +228 -0
- package/PLAN-AMELIORATION.md +220 -0
- package/build-infos.json +1 -1
- package/concorde-core.bundle.js +196 -196
- package/concorde-core.es.js +3854 -3572
- package/custom-elements-manifest.config.mjs +14 -0
- package/dist/concorde-core.bundle.js +196 -196
- package/dist/concorde-core.es.js +3854 -3572
- package/dist/img/archive/concorde-001-2cv.webp +0 -0
- package/dist/img/archive/concorde-red-arrows-2002-poster.jpg +0 -0
- package/dist/img/archive/concorde-red-arrows-2002.webm +0 -0
- package/dist/img/archive/credits.json +28 -0
- package/docs/assets/index-Bb-_LRyY.js +12280 -0
- package/docs/index.html +1 -1
- package/index.html +27 -63
- package/package.json +44 -3
- package/public/img/archive/concorde-001-2cv.webp +0 -0
- package/public/img/archive/concorde-red-arrows-2002-poster.jpg +0 -0
- package/public/img/archive/concorde-red-arrows-2002.webm +0 -0
- package/public/img/archive/credits.json +28 -0
- package/scripts/generate-sdui-catalog.mjs +250 -0
- package/scripts/generate-sdui-catalog.spec.ts +91 -0
- package/scripts/pre-build.mjs +15 -0
- package/src/core/components/functional/fetch/fetch.md +2 -2
- 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/ui/modal/modal.ts +14 -11
- package/src/docs/_getting-started/components.md +5 -0
- package/src/docs/_getting-started/theming.md +2 -2
- package/src/docs/code.ts +88 -75
- package/src/docs/components/docs-demo-sources.ts +16 -8
- package/src/docs/components/docs-lit-demo.ts +19 -37
- package/src/docs/docs.ts +5 -0
- package/src/docs/example/docs-boarding-pass-demo.ts +134 -0
- package/src/docs/example/docs-provider-keys.ts +12 -0
- package/src/docs/header/header.ts +233 -69
- package/src/docs/home/catalog.ts +44 -0
- package/src/docs/home/home.ts +513 -0
- package/src/docs/home/mach-stage.ts +389 -0
- package/src/docs/layout.ts +3 -1
- package/src/docs/navigation/components-index.ts +56 -0
- package/src/docs/navigation/navigation.ts +240 -232
- package/src/docs/navigation/pager.ts +67 -0
- package/src/docs/navigation/toc.ts +98 -0
- package/src/docs/search/docs-search.json +330 -20
- package/src/docs/search/markdown-renderer.ts +11 -3
- package/src/docs/shiki/index.ts +109 -0
- package/src/docs/tailwind/css/base/scrollbar.css +22 -0
- package/src/docs/tailwind/css/base/theme.css +96 -0
- package/src/docs/tailwind/css/base/typography.css +4 -0
- package/src/docs/tailwind/css/docs/boarding-pass.css +65 -0
- package/src/docs/tailwind/css/docs/content.css +32 -0
- package/src/docs/tailwind/css/docs/page.css +10 -0
- package/src/docs/tailwind/css/docs.css +9 -0
- package/src/docs/tailwind/css/home/hero.css +210 -0
- package/src/docs/tailwind/css/home/motion.css +84 -0
- package/src/docs/tailwind/css/home/sections.css +416 -0
- package/src/docs/tailwind/css/tailwind.css +7 -185
- package/src/tsconfig.json +113 -2
- package/src/tsconfig.tsbuildinfo +1 -1
- package/tailwind.config.js +8 -4
- package/docs/assets/index-wVZpLVYW.js +0 -12122
- package/docs/crawl/core/components/functional/date/date.html +0 -190
- package/docs/crawl/core/components/functional/fetch/fetch.html +0 -109
- package/docs/crawl/core/components/functional/if/if.html +0 -27
- package/docs/crawl/core/components/functional/jsonata/jsonata.html +0 -79
- package/docs/crawl/core/components/functional/list/list.html +0 -70
- package/docs/crawl/core/components/functional/mix/mix.html +0 -45
- package/docs/crawl/core/components/functional/queue/queue.html +0 -96
- package/docs/crawl/core/components/functional/router/router.html +0 -106
- package/docs/crawl/core/components/functional/sdui/sdui.html +0 -269
- package/docs/crawl/core/components/functional/states/states.html +0 -66
- package/docs/crawl/core/components/functional/submit/submit.html +0 -160
- package/docs/crawl/core/components/functional/subscriber/subscriber.html +0 -67
- package/docs/crawl/core/components/functional/value/value.html +0 -51
- package/docs/crawl/core/components/ui/alert/alert.html +0 -211
- package/docs/crawl/core/components/ui/alert-messages/alert-messages.html +0 -131
- package/docs/crawl/core/components/ui/badge/badge.html +0 -197
- package/docs/crawl/core/components/ui/button/button.html +0 -150
- package/docs/crawl/core/components/ui/captcha/captcha.html +0 -112
- package/docs/crawl/core/components/ui/card/card.html +0 -253
- package/docs/crawl/core/components/ui/divider/divider.html +0 -144
- package/docs/crawl/core/components/ui/form/checkbox/checkbox.html +0 -73
- package/docs/crawl/core/components/ui/form/fieldset/fieldset.html +0 -266
- package/docs/crawl/core/components/ui/form/form-actions/form-actions.html +0 -122
- package/docs/crawl/core/components/ui/form/form-layout/form-layout.html +0 -121
- package/docs/crawl/core/components/ui/form/input/input.html +0 -109
- package/docs/crawl/core/components/ui/form/input-autocomplete/input-autocomplete.html +0 -38
- package/docs/crawl/core/components/ui/form/radio/radio.html +0 -56
- package/docs/crawl/core/components/ui/form/select/select.html +0 -73
- package/docs/crawl/core/components/ui/form/switch/switch.html +0 -56
- package/docs/crawl/core/components/ui/form/textarea/textarea.html +0 -59
- package/docs/crawl/core/components/ui/group/group.html +0 -104
- package/docs/crawl/core/components/ui/icon/icon.html +0 -222
- package/docs/crawl/core/components/ui/image/image.html +0 -298
- package/docs/crawl/core/components/ui/link/link.html +0 -100
- package/docs/crawl/core/components/ui/loader/loader.html +0 -124
- package/docs/crawl/core/components/ui/menu/menu.html +0 -394
- package/docs/crawl/core/components/ui/modal/modal.html +0 -342
- package/docs/crawl/core/components/ui/pop/pop.html +0 -296
- package/docs/crawl/core/components/ui/progress/progress.html +0 -131
- package/docs/crawl/core/components/ui/table/table.html +0 -545
- package/docs/crawl/core/components/ui/theme/theme.html +0 -131
- package/docs/crawl/core/components/ui/toast/toast.html +0 -233
- package/docs/crawl/core/components/ui/tooltip/tooltip.html +0 -140
- package/docs/crawl/docs/_core-concept/dataFlow.html +0 -177
- package/docs/crawl/docs/_core-concept/overview.html +0 -66
- package/docs/crawl/docs/_core-concept/subscriber.html +0 -75
- package/docs/crawl/docs/_decorators/ancestor-attribute.html +0 -117
- package/docs/crawl/docs/_decorators/auto-subscribe.html +0 -202
- package/docs/crawl/docs/_decorators/bind.html +0 -141
- package/docs/crawl/docs/_decorators/get.html +0 -149
- package/docs/crawl/docs/_decorators/handle.html +0 -165
- package/docs/crawl/docs/_decorators/on-assign.html +0 -355
- package/docs/crawl/docs/_decorators/patch.html +0 -78
- package/docs/crawl/docs/_decorators/post.html +0 -139
- package/docs/crawl/docs/_decorators/publish.html +0 -61
- package/docs/crawl/docs/_decorators/put.html +0 -78
- package/docs/crawl/docs/_decorators/subscribe.html +0 -109
- package/docs/crawl/docs/_decorators/wait-for-ancestors.html +0 -137
- package/docs/crawl/docs/_directives/sub.html +0 -93
- package/docs/crawl/docs/_getting-started/ai-agents.html +0 -173
- package/docs/crawl/docs/_getting-started/concorde-manual-install.html +0 -100
- package/docs/crawl/docs/_getting-started/concorde-outside.html +0 -58
- package/docs/crawl/docs/_getting-started/create-a-component.html +0 -111
- package/docs/crawl/docs/_getting-started/my-first-component.html +0 -189
- package/docs/crawl/docs/_getting-started/my-first-subscriber.html +0 -110
- package/docs/crawl/docs/_getting-started/pubsub.html +0 -62
- package/docs/crawl/docs/_getting-started/start.html +0 -76
- package/docs/crawl/docs/_getting-started/theming.html +0 -333
- package/docs/crawl/docs/_misc/api-configuration.html +0 -149
- package/docs/crawl/docs/_misc/dataProviderKey.html +0 -135
- package/docs/crawl/docs/_misc/docs-mock-api.html +0 -158
- package/docs/crawl/docs/_misc/dynamic-path.html +0 -180
- package/docs/crawl/docs/_misc/endpoint.html +0 -50
- package/docs/crawl/docs/_misc/formelement-subscriber-removal.html +0 -138
- package/docs/crawl/docs/_misc/html-integration.html +0 -48
- package/docs/crawl/hubs/decorators.html +0 -547
- package/docs/crawl/hubs/form-components.html +0 -381
- package/docs/crawl/hubs/remote-data.html +0 -452
- package/docs/crawl/index.html +0 -102
- package/docs/llms-full.txt +0 -7008
- package/docs/llms.txt +0 -97
- package/docs/sitemap.xml +0 -240
- package/docs/src/core/components/functional/date/date.md +0 -290
- package/docs/src/core/components/functional/fetch/fetch.md +0 -125
- package/docs/src/core/components/functional/if/if.md +0 -9
- package/docs/src/core/components/functional/jsonata/jsonata.md +0 -56
- package/docs/src/core/components/functional/list/list.md +0 -65
- package/docs/src/core/components/functional/mix/mix.md +0 -41
- package/docs/src/core/components/functional/queue/queue.md +0 -72
- package/docs/src/core/components/functional/router/router.md +0 -94
- package/docs/src/core/components/functional/sdui/default-library.json +0 -108
- package/docs/src/core/components/functional/sdui/example.json +0 -99
- package/docs/src/core/components/functional/sdui/sdui.md +0 -356
- package/docs/src/core/components/functional/states/states.md +0 -87
- package/docs/src/core/components/functional/submit/submit.md +0 -114
- package/docs/src/core/components/functional/subscriber/subscriber.md +0 -91
- package/docs/src/core/components/functional/value/value.md +0 -35
- package/docs/src/core/components/ui/alert/alert.md +0 -196
- package/docs/src/core/components/ui/alert-messages/alert-messages.md +0 -85
- package/docs/src/core/components/ui/badge/badge.md +0 -188
- package/docs/src/core/components/ui/button/button.md +0 -183
- package/docs/src/core/components/ui/captcha/captcha.md +0 -71
- package/docs/src/core/components/ui/card/card.md +0 -215
- package/docs/src/core/components/ui/divider/divider.md +0 -129
- package/docs/src/core/components/ui/form/checkbox/checkbox.md +0 -77
- package/docs/src/core/components/ui/form/fieldset/fieldset.md +0 -205
- package/docs/src/core/components/ui/form/form-actions/form-actions.md +0 -100
- package/docs/src/core/components/ui/form/form-layout/form-layout.md +0 -119
- package/docs/src/core/components/ui/form/input/input.md +0 -142
- package/docs/src/core/components/ui/form/input-autocomplete/input-autocomplete.md +0 -29
- package/docs/src/core/components/ui/form/radio/radio.md +0 -57
- package/docs/src/core/components/ui/form/select/select.md +0 -71
- package/docs/src/core/components/ui/form/switch/switch.md +0 -57
- package/docs/src/core/components/ui/form/textarea/textarea.md +0 -65
- package/docs/src/core/components/ui/group/group.md +0 -75
- package/docs/src/core/components/ui/icon/icon.md +0 -214
- package/docs/src/core/components/ui/icon/icons.json +0 -1
- package/docs/src/core/components/ui/image/image.md +0 -233
- package/docs/src/core/components/ui/link/link.md +0 -81
- package/docs/src/core/components/ui/loader/loader.md +0 -112
- package/docs/src/core/components/ui/menu/menu.md +0 -370
- package/docs/src/core/components/ui/modal/modal.md +0 -235
- package/docs/src/core/components/ui/pop/pop.md +0 -294
- package/docs/src/core/components/ui/progress/progress.md +0 -109
- package/docs/src/core/components/ui/table/table.md +0 -431
- package/docs/src/core/components/ui/theme/theme.md +0 -122
- package/docs/src/core/components/ui/toast/toast.md +0 -216
- package/docs/src/core/components/ui/tooltip/tooltip.md +0 -124
- package/docs/src/docs/_core-concept/dataFlow.md +0 -88
- package/docs/src/docs/_core-concept/overview.md +0 -57
- package/docs/src/docs/_core-concept/subscriber.md +0 -75
- package/docs/src/docs/_decorators/ancestor-attribute.md +0 -128
- package/docs/src/docs/_decorators/auto-subscribe.md +0 -202
- package/docs/src/docs/_decorators/bind.md +0 -167
- package/docs/src/docs/_decorators/get.md +0 -162
- package/docs/src/docs/_decorators/handle.md +0 -175
- package/docs/src/docs/_decorators/on-assign.md +0 -390
- package/docs/src/docs/_decorators/patch.md +0 -70
- package/docs/src/docs/_decorators/post.md +0 -146
- package/docs/src/docs/_decorators/publish.md +0 -55
- package/docs/src/docs/_decorators/put.md +0 -70
- package/docs/src/docs/_decorators/subscribe.md +0 -100
- package/docs/src/docs/_decorators/wait-for-ancestors.md +0 -163
- package/docs/src/docs/_directives/sub.md +0 -91
- package/docs/src/docs/_getting-started/ai-agents.md +0 -76
- package/docs/src/docs/_getting-started/concorde-manual-install.md +0 -133
- package/docs/src/docs/_getting-started/concorde-outside.md +0 -33
- package/docs/src/docs/_getting-started/create-a-component.md +0 -139
- package/docs/src/docs/_getting-started/my-first-component.md +0 -236
- package/docs/src/docs/_getting-started/my-first-subscriber.md +0 -120
- package/docs/src/docs/_getting-started/pubsub.md +0 -37
- package/docs/src/docs/_getting-started/start.md +0 -47
- package/docs/src/docs/_getting-started/theming.md +0 -253
- package/docs/src/docs/_misc/api-configuration.md +0 -81
- package/docs/src/docs/_misc/dataProviderKey.md +0 -168
- package/docs/src/docs/_misc/docs-mock-api.md +0 -63
- package/docs/src/docs/_misc/dynamic-path.md +0 -71
- package/docs/src/docs/_misc/endpoint.md +0 -45
- package/docs/src/docs/_misc/formelement-subscriber-removal.md +0 -115
- package/docs/src/docs/_misc/html-integration.md +0 -15
- package/docs/src/docs/search/docs-search.json +0 -12242
- package/docs/src/tag-list.json +0 -1
- package/docs/src/tsconfig-model.json +0 -23
- package/docs/src/tsconfig.json +0 -1242
- package/src/docs/prism/index.ts +0 -6
- package/src/docs/prism/prism.css +0 -158
- package/src/docs/prism/prism.js +0 -1022
|
@@ -1,342 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/modal/modal.html" data-doc-id="core/components/ui/modal/modal">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>Modal — Concorde</title>
|
|
7
|
-
<meta name="description" content="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 / s">
|
|
8
|
-
<meta name="keywords" content="Concorde, supersoniks, core/components/ui/modal/modal, modal, Modal, UI component, sonic-modal, web component, , sonic-modal-title, sonic-modal-subtitle, sonic-modal-content, sonic-modal-actions, show(), hideModal, hide(), forceAction">
|
|
9
|
-
<meta name="concorde-doc-id" content="core/components/ui/modal/modal">
|
|
10
|
-
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/modal/modal.html">
|
|
11
|
-
</head>
|
|
12
|
-
<body>
|
|
13
|
-
<header>
|
|
14
|
-
<p><a href="../../../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#core/components/ui/modal/modal.md/modal" rel="nofollow">interactive version</a></p>
|
|
15
|
-
</header>
|
|
16
|
-
<main>
|
|
17
|
-
<article>
|
|
18
|
-
<p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Modal</strong>. 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 / s <span>Doc ID: <code>core/components/ui/modal/modal</code>. Keywords: Concorde, supersoniks, core/components/ui/modal/modal, modal, Modal, UI component, sonic-modal, web component, , sonic-modal-title, sonic-modal-subtitle, sonic-modal-content, sonic-modal-actions, show(), hideModal, hide(), forceAction. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/modal/modal.html">https://concorde.supersoniks.org/crawl/core/components/ui/modal/modal.html</a>.</span></p>
|
|
19
|
-
<h1 id="modal">Modal</h1>
|
|
20
|
-
<p><strong><code>sonic-modal</code></strong> presents focused content in a <code><dialog></code> overlay with backdrop, enter/exit animation, and a built-in close control. Compose <strong><code>sonic-modal-title</code></strong> / <strong><code>sonic-modal-subtitle</code></strong> / <strong><code>sonic-modal-content</code></strong> / <strong><code>sonic-modal-actions</code></strong>, or use the default slot. Call <strong><code>show()</code></strong> on the element to open; use <strong><code>hideModal</code></strong> on action buttons or <strong><code>hide()</code></strong> from script. Set <strong><code>forceAction</code></strong> when dismissal must go through explicit actions only. Imperative dialogs: <strong><code>Modal.create()</code></strong> (also <strong><code>window.SonicModal</code></strong>).</p>
|
|
21
|
-
<h2 id="basic-example">Basic example</h2>
|
|
22
|
-
<p>Click the trigger to open. <strong><code>sonic-modal-actions</code></strong> lays out footer buttons; <strong><code>hideModal</code></strong> closes the modal on click. Scope form state with <strong><code>formDataProvider</code></strong> on <strong><code>sonic-modal-actions</code></strong> so child <strong><code>sonic-button</code></strong> elements share one publisher.</p>
|
|
23
|
-
<pre><code><sonic-button onclick="document.getElementById('modalExample').show()">
|
|
24
|
-
Open modal
|
|
25
|
-
</sonic-button>
|
|
26
|
-
<sonic-modal id="modalExample">
|
|
27
|
-
<sonic-modal-title>
|
|
28
|
-
Export ready
|
|
29
|
-
<sonic-badge type="success" size="sm">New</sonic-badge>
|
|
30
|
-
</sonic-modal-title>
|
|
31
|
-
<sonic-modal-subtitle>Your report finished processing.</sonic-modal-subtitle>
|
|
32
|
-
<sonic-modal-content>
|
|
33
|
-
Download the CSV now or review the summary in your dashboard before sharing.
|
|
34
|
-
</sonic-modal-content>
|
|
35
|
-
<sonic-modal-actions formDataProvider="ModalMiniForm">
|
|
36
|
-
<sonic-button minWidth="8rem" value="true" name="click">
|
|
37
|
-
Save draft
|
|
38
|
-
</sonic-button>
|
|
39
|
-
<sonic-button minWidth="8rem" type="success" hideModal>Download</sonic-button>
|
|
40
|
-
</sonic-modal-actions>
|
|
41
|
-
</sonic-modal>
|
|
42
|
-
</code></pre>
|
|
43
|
-
<h2 id="scrollable-content">Scrollable content</h2>
|
|
44
|
-
<p>Long copy scrolls inside the dialog. Default <strong><code>maxHeight</code></strong> is <code>90vh</code>. Default <strong><code>align</code></strong> is <code>left</code>.</p>
|
|
45
|
-
<pre><code><sonic-button onclick="document.getElementById('modalText').show()">Venue details</sonic-button>
|
|
46
|
-
<sonic-modal align="left" id="modalText">
|
|
47
|
-
<sonic-modal-title>Hours and tickets</sonic-modal-title>
|
|
48
|
-
<sonic-modal-content>
|
|
49
|
-
<div class="prose">
|
|
50
|
-
<p>
|
|
51
|
-
<strong>Opening hours</strong><br />
|
|
52
|
-
Wednesday–Saturday, 1:30 p.m.–7:00 p.m.; Sunday, 1:30 p.m.–6:00 p.m.
|
|
53
|
-
</p>
|
|
54
|
-
<p>
|
|
55
|
-
<strong>Ticketing</strong><br />
|
|
56
|
-
Some events require online or box-office reservations. Prices vary by event; booking ahead is recommended when capacity is limited.
|
|
57
|
-
</p>
|
|
58
|
-
<p>
|
|
59
|
-
<strong>Contact</strong><br />
|
|
60
|
-
tickets@example.com · +33 3 28 33 48 33
|
|
61
|
-
</p>
|
|
62
|
-
<p>
|
|
63
|
-
<strong>Access</strong><br />
|
|
64
|
-
14 Place Faidherbe, 59100 Roubaix<br />
|
|
65
|
-
Metro line 2, Eurotéléport stop
|
|
66
|
-
</p>
|
|
67
|
-
</div>
|
|
68
|
-
</sonic-modal-content>
|
|
69
|
-
</sonic-modal>
|
|
70
|
-
</code></pre>
|
|
71
|
-
<h2 id="force-action">Force action</h2>
|
|
72
|
-
<p>With <strong><code>forceAction</code></strong>, backdrop click, Escape, and the default close button are disabled. Provide <strong><code>sonic-modal-actions</code></strong> (or <strong><code>sonic-modal-close</code></strong>) so users can finish the flow.</p>
|
|
73
|
-
<pre><code><sonic-button onclick="document.getElementById('force').show()">Cookie consent</sonic-button>
|
|
74
|
-
<sonic-modal forceAction id="force">
|
|
75
|
-
<sonic-modal-title>Allow analytics cookies?</sonic-modal-title>
|
|
76
|
-
<sonic-modal-content>
|
|
77
|
-
We use cookies to measure traffic and improve the product. You can change this later in settings.
|
|
78
|
-
</sonic-modal-content>
|
|
79
|
-
<sonic-modal-actions>
|
|
80
|
-
<sonic-button hideModal minWidth="8rem">Decline</sonic-button>
|
|
81
|
-
<sonic-button hideModal minWidth="8rem" type="success">Accept</sonic-button>
|
|
82
|
-
</sonic-modal-actions>
|
|
83
|
-
</sonic-modal>
|
|
84
|
-
</code></pre>
|
|
85
|
-
<h2 id="custom-dimensions">Custom dimensions</h2>
|
|
86
|
-
<p>Set <strong><code>width</code></strong> / <strong><code>height</code></strong> / <strong><code>maxWidth</code></strong> / <strong><code>maxHeight</code></strong> (CSS lengths). On narrow viewports the panel becomes a bottom sheet. Use <strong><code>rounded="none"</code></strong> for edge-to-edge media.</p>
|
|
87
|
-
<pre><code><sonic-button onclick="document.getElementById('CustomWidth').show()">Image preview</sonic-button>
|
|
88
|
-
<sonic-modal
|
|
89
|
-
rounded="none"
|
|
90
|
-
maxHeight="50vh"
|
|
91
|
-
maxWidth="90vw"
|
|
92
|
-
width="100%"
|
|
93
|
-
height="100%"
|
|
94
|
-
id="CustomWidth"
|
|
95
|
-
>
|
|
96
|
-
<sonic-image
|
|
97
|
-
cover
|
|
98
|
-
objectPosition="center 20%"
|
|
99
|
-
src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
|
|
100
|
-
alt="View from an airplane window"
|
|
101
|
-
></sonic-image>
|
|
102
|
-
</sonic-modal>
|
|
103
|
-
</code></pre>
|
|
104
|
-
<h2 id="fullscreen">Fullscreen</h2>
|
|
105
|
-
<p><strong><code>fullscreen</code></strong> fills the viewport and hides the backdrop.</p>
|
|
106
|
-
<pre><code><sonic-button onclick="document.getElementById('Fullscreen').show()">Fullscreen</sonic-button>
|
|
107
|
-
<sonic-modal fullscreen id="Fullscreen">
|
|
108
|
-
<sonic-image
|
|
109
|
-
cover
|
|
110
|
-
src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
|
|
111
|
-
alt="View from an airplane window"
|
|
112
|
-
></sonic-image>
|
|
113
|
-
</sonic-modal>
|
|
114
|
-
</code></pre>
|
|
115
|
-
<h2 id="programmatic-creation">Programmatic creation</h2>
|
|
116
|
-
<p>Use <strong><code>Modal.create(options)</code></strong> 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 <strong><code>sonic-theme</code></strong> pop container (same as declarative modals), opened automatically, and returns the <strong><code>sonic-modal</code></strong> instance. Set <strong><code>removeOnHide: true</code></strong> to detach it from the DOM after close. In the browser, <strong><code>window.SonicModal</code></strong> is the same class after the module loads.</p>
|
|
117
|
-
<p>Pass <strong><code>title</code></strong> / <strong><code>subtitle</code></strong> / <strong><code>content</code></strong> / <strong><code>actions</code></strong> as HTML strings (or Lit template results from application code). Put <strong><code>hideModal</code></strong> on action buttons in the <strong><code>actions</code></strong> string so clicks close the dialog.</p>
|
|
118
|
-
<pre><code><sonic-button
|
|
119
|
-
onclick="window.SonicModal.create({
|
|
120
|
-
title: 'Send invite?',
|
|
121
|
-
subtitle: 'The recipient can join immediately.',
|
|
122
|
-
content: 'We will email an invitation to alex@example.com.',
|
|
123
|
-
actions: '&lt;sonic-button hideModal minWidth=\'8rem\'&gt;Cancel&lt;/sonic-button&gt;&lt;sonic-button hideModal minWidth=\'8rem\' type=\'success\'&gt;Send&lt;/sonic-button&gt;',
|
|
124
|
-
removeOnHide: true
|
|
125
|
-
})"
|
|
126
|
-
>
|
|
127
|
-
Open programmatic modal
|
|
128
|
-
</sonic-button>
|
|
129
|
-
</code></pre>
|
|
130
|
-
<pre><code class="language-javascript">import { Modal } from "@supersoniks/concorde/core/components/ui/modal/modal";
|
|
131
|
-
|
|
132
|
-
const modal = Modal.create({
|
|
133
|
-
title: "Delete project?",
|
|
134
|
-
subtitle: "This cannot be undone.",
|
|
135
|
-
content: "<p>All files in <strong>Acme HQ</strong> will be removed.</p>",
|
|
136
|
-
actions: `
|
|
137
|
-
<sonic-button hideModal minWidth="8rem">Cancel</sonic-button>
|
|
138
|
-
<sonic-button hideModal minWidth="8rem" type="danger">Delete</sonic-button>
|
|
139
|
-
`,
|
|
140
|
-
removeOnHide: true,
|
|
141
|
-
forceAction: false,
|
|
142
|
-
maxWidth: "min(100vw, 28rem)",
|
|
143
|
-
});
|
|
144
|
-
|
|
145
|
-
modal.addEventListener("hidden", () => {
|
|
146
|
-
console.log("Modal removed from the DOM");
|
|
147
|
-
});
|
|
148
|
-
|
|
149
|
-
// Or close from script: await modal.hide(); await modal.dispose();
|
|
150
|
-
</code></pre>
|
|
151
|
-
<h2 id="api-reference">API reference</h2>
|
|
152
|
-
<h3 id="sonic-modal"><code>sonic-modal</code></h3>
|
|
153
|
-
<table>
|
|
154
|
-
<thead>
|
|
155
|
-
<tr>
|
|
156
|
-
<th>Attribute</th>
|
|
157
|
-
<th>Values</th>
|
|
158
|
-
<th>Description</th>
|
|
159
|
-
</tr>
|
|
160
|
-
</thead>
|
|
161
|
-
<tbody><tr>
|
|
162
|
-
<td><code>align</code></td>
|
|
163
|
-
<td><code>left</code> (default) · <code>center</code> · <code>right</code></td>
|
|
164
|
-
<td>Align title and slotted content</td>
|
|
165
|
-
</tr>
|
|
166
|
-
<tr>
|
|
167
|
-
<td><code>maxWidth</code></td>
|
|
168
|
-
<td>CSS length (default <code>min(100vw, 40rem)</code>)</td>
|
|
169
|
-
<td>Dialog max width</td>
|
|
170
|
-
</tr>
|
|
171
|
-
<tr>
|
|
172
|
-
<td><code>maxHeight</code></td>
|
|
173
|
-
<td>CSS length (default <code>90vh</code>)</td>
|
|
174
|
-
<td>Scrollable body max height</td>
|
|
175
|
-
</tr>
|
|
176
|
-
<tr>
|
|
177
|
-
<td><code>width</code></td>
|
|
178
|
-
<td>CSS length (default <code>100%</code>)</td>
|
|
179
|
-
<td>Dialog width</td>
|
|
180
|
-
</tr>
|
|
181
|
-
<tr>
|
|
182
|
-
<td><code>height</code></td>
|
|
183
|
-
<td>CSS length (default <code>fit-content</code>)</td>
|
|
184
|
-
<td>Dialog height</td>
|
|
185
|
-
</tr>
|
|
186
|
-
<tr>
|
|
187
|
-
<td><code>paddingX</code> · <code>paddingY</code></td>
|
|
188
|
-
<td>CSS length</td>
|
|
189
|
-
<td>Override content padding (<code>--sc-modal-px</code> / <code>--sc-modal-py</code>)</td>
|
|
190
|
-
</tr>
|
|
191
|
-
<tr>
|
|
192
|
-
<td><code>zIndex</code></td>
|
|
193
|
-
<td>CSS number</td>
|
|
194
|
-
<td>Stacking order (default <code>990</code>)</td>
|
|
195
|
-
</tr>
|
|
196
|
-
<tr>
|
|
197
|
-
<td><code>effect</code></td>
|
|
198
|
-
<td><code>slide</code> (default) · <code>fade</code> · <code>none</code></td>
|
|
199
|
-
<td>Open/close animation</td>
|
|
200
|
-
</tr>
|
|
201
|
-
<tr>
|
|
202
|
-
<td><code>fullscreen</code></td>
|
|
203
|
-
<td>boolean</td>
|
|
204
|
-
<td>Full viewport; no backdrop</td>
|
|
205
|
-
</tr>
|
|
206
|
-
<tr>
|
|
207
|
-
<td><code>forceAction</code></td>
|
|
208
|
-
<td>boolean</td>
|
|
209
|
-
<td>Disable overlay, Escape, and default close button</td>
|
|
210
|
-
</tr>
|
|
211
|
-
<tr>
|
|
212
|
-
<td><code>noCloseButton</code></td>
|
|
213
|
-
<td>boolean</td>
|
|
214
|
-
<td>Hide built-in close when not <strong><code>forceAction</code></strong></td>
|
|
215
|
-
</tr>
|
|
216
|
-
<tr>
|
|
217
|
-
<td><code>closeButtonType</code></td>
|
|
218
|
-
<td><strong><code>sonic-button</code></strong> <code>type</code></td>
|
|
219
|
-
<td>Style of built-in close</td>
|
|
220
|
-
</tr>
|
|
221
|
-
<tr>
|
|
222
|
-
<td><code>visible</code></td>
|
|
223
|
-
<td>boolean</td>
|
|
224
|
-
<td>When toggled, opens or closes the dialog</td>
|
|
225
|
-
</tr>
|
|
226
|
-
<tr>
|
|
227
|
-
<td><code>removeOnHide</code></td>
|
|
228
|
-
<td>boolean</td>
|
|
229
|
-
<td>Remove element from DOM after close</td>
|
|
230
|
-
</tr>
|
|
231
|
-
<tr>
|
|
232
|
-
<td><code>removeHashOnHide</code></td>
|
|
233
|
-
<td>boolean</td>
|
|
234
|
-
<td>Clear URL hash on close</td>
|
|
235
|
-
</tr>
|
|
236
|
-
<tr>
|
|
237
|
-
<td><code>closeOnLocationChange</code></td>
|
|
238
|
-
<td>boolean</td>
|
|
239
|
-
<td>Close when app location changes</td>
|
|
240
|
-
</tr>
|
|
241
|
-
<tr>
|
|
242
|
-
<td><code>resetDataProviderOnHide</code></td>
|
|
243
|
-
<td>string</td>
|
|
244
|
-
<td>Reset named <strong><code>formDataProvider</code></strong> on close</td>
|
|
245
|
-
</tr>
|
|
246
|
-
<tr>
|
|
247
|
-
<td><code>rounded</code></td>
|
|
248
|
-
<td><code>none</code></td>
|
|
249
|
-
<td>Square dialog corners (useful for full-bleed media)</td>
|
|
250
|
-
</tr>
|
|
251
|
-
</tbody></table>
|
|
252
|
-
<table>
|
|
253
|
-
<thead>
|
|
254
|
-
<tr>
|
|
255
|
-
<th>Slot</th>
|
|
256
|
-
<th>Description</th>
|
|
257
|
-
</tr>
|
|
258
|
-
</thead>
|
|
259
|
-
<tbody><tr>
|
|
260
|
-
<td><em>(default)</em></td>
|
|
261
|
-
<td>Additional markup alongside structured children</td>
|
|
262
|
-
</tr>
|
|
263
|
-
</tbody></table>
|
|
264
|
-
<table>
|
|
265
|
-
<thead>
|
|
266
|
-
<tr>
|
|
267
|
-
<th>Event</th>
|
|
268
|
-
<th>Description</th>
|
|
269
|
-
</tr>
|
|
270
|
-
</thead>
|
|
271
|
-
<tbody><tr>
|
|
272
|
-
<td><code>show</code></td>
|
|
273
|
-
<td>Fired when open animation completes</td>
|
|
274
|
-
</tr>
|
|
275
|
-
<tr>
|
|
276
|
-
<td><code>hide</code></td>
|
|
277
|
-
<td>Fired when close starts</td>
|
|
278
|
-
</tr>
|
|
279
|
-
<tr>
|
|
280
|
-
<td><code>hidden</code></td>
|
|
281
|
-
<td>Fired when close finishes</td>
|
|
282
|
-
</tr>
|
|
283
|
-
</tbody></table>
|
|
284
|
-
<p>Methods: <strong><code>show()</code></strong> · <strong><code>hide()</code></strong> · <strong><code>dispose()</code></strong> (hide and remove). Static <strong><code>Modal.create(options)</code></strong> appends a modal to the theme pop container and opens it. <strong><code>options</code></strong> / <strong><code>styleSheet</code></strong> are JavaScript-only.</p>
|
|
285
|
-
<h3 id="sonic-modal-title--sonic-modal-subtitle--sonic-modal-content"><code>sonic-modal-title</code> · <code>sonic-modal-subtitle</code> · <code>sonic-modal-content</code></h3>
|
|
286
|
-
<table>
|
|
287
|
-
<thead>
|
|
288
|
-
<tr>
|
|
289
|
-
<th>Slot</th>
|
|
290
|
-
<th>Description</th>
|
|
291
|
-
</tr>
|
|
292
|
-
</thead>
|
|
293
|
-
<tbody><tr>
|
|
294
|
-
<td><em>(default)</em></td>
|
|
295
|
-
<td>Title, subtitle, or main body content</td>
|
|
296
|
-
</tr>
|
|
297
|
-
</tbody></table>
|
|
298
|
-
<h3 id="sonic-modal-actions"><code>sonic-modal-actions</code></h3>
|
|
299
|
-
<table>
|
|
300
|
-
<thead>
|
|
301
|
-
<tr>
|
|
302
|
-
<th>Slot</th>
|
|
303
|
-
<th>Description</th>
|
|
304
|
-
</tr>
|
|
305
|
-
</thead>
|
|
306
|
-
<tbody><tr>
|
|
307
|
-
<td><em>(default)</em></td>
|
|
308
|
-
<td>Footer actions (typically <strong><code>sonic-button</code></strong>)</td>
|
|
309
|
-
</tr>
|
|
310
|
-
</tbody></table>
|
|
311
|
-
<p>Put <strong><code>hideModal</code></strong> on a <strong><code>sonic-button</code></strong> to close the parent modal on click. Ancestor <strong><code>formDataProvider</code></strong> on this element is inherited by child form controls.</p>
|
|
312
|
-
<h3 id="sonic-modal-close"><code>sonic-modal-close</code></h3>
|
|
313
|
-
<p>Rendered automatically unless <strong><code>forceAction</code></strong> or <strong><code>noCloseButton</code></strong> is set. Calls <strong><code>hide()</code></strong> on the parent modal.</p>
|
|
314
|
-
<table>
|
|
315
|
-
<thead>
|
|
316
|
-
<tr>
|
|
317
|
-
<th>Attribute</th>
|
|
318
|
-
<th>Values</th>
|
|
319
|
-
<th>Description</th>
|
|
320
|
-
</tr>
|
|
321
|
-
</thead>
|
|
322
|
-
<tbody><tr>
|
|
323
|
-
<td><code>type</code></td>
|
|
324
|
-
<td><strong><code>sonic-button</code></strong> <code>type</code></td>
|
|
325
|
-
<td>Close button color</td>
|
|
326
|
-
</tr>
|
|
327
|
-
<tr>
|
|
328
|
-
<td><code>reset</code></td>
|
|
329
|
-
<td>string</td>
|
|
330
|
-
<td>Passed to inner <strong><code>sonic-button</code></strong> <strong><code>reset</code></strong></td>
|
|
331
|
-
</tr>
|
|
332
|
-
<tr>
|
|
333
|
-
<td><code>translation</code></td>
|
|
334
|
-
<td>UI label object</td>
|
|
335
|
-
<td>Overrides default close <strong><code>aria-label</code></strong></td>
|
|
336
|
-
</tr>
|
|
337
|
-
</tbody></table>
|
|
338
|
-
|
|
339
|
-
</article>
|
|
340
|
-
</main>
|
|
341
|
-
</body>
|
|
342
|
-
</html>
|
|
@@ -1,296 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="fr" data-crawl-url="https://concorde.supersoniks.org/crawl/core/components/ui/pop/pop.html" data-doc-id="core/components/ui/pop/pop">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>Pop — Concorde</title>
|
|
7
|
-
<meta name="description" content="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; defau">
|
|
8
|
-
<meta name="keywords" content="Concorde, supersoniks, core/components/ui/pop/pop, pop, Pop, UI component, sonic-pop, web component, slot="content", manual, placement, bottom, top, left, right, -start">
|
|
9
|
-
<meta name="concorde-doc-id" content="core/components/ui/pop/pop">
|
|
10
|
-
<link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/pop/pop.html">
|
|
11
|
-
</head>
|
|
12
|
-
<body>
|
|
13
|
-
<header>
|
|
14
|
-
<p><a href="../../../../index.html">Concorde documentation (crawl)</a> · <a href="https://concorde.supersoniks.org/#core/components/ui/pop/pop.md/pop" rel="nofollow">interactive version</a></p>
|
|
15
|
-
</header>
|
|
16
|
-
<main>
|
|
17
|
-
<article>
|
|
18
|
-
<p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Pop</strong>. 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; defau <span>Doc ID: <code>core/components/ui/pop/pop</code>. Keywords: Concorde, supersoniks, core/components/ui/pop/pop, pop, Pop, UI component, sonic-pop, web component, slot="content", manual, placement, bottom, top, left, right, -start. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/pop/pop.html">https://concorde.supersoniks.org/crawl/core/components/ui/pop/pop.html</a>.</span></p>
|
|
19
|
-
<h1 id="pop">Pop</h1>
|
|
20
|
-
<p><strong><code>sonic-pop</code></strong> anchors floating panels to a trigger: put the control in the <strong>default slot</strong> and the panel in <strong><code>slot="content"</code></strong> (menus, forms, custom markup). Click toggles open/closed unless <strong><code>manual</code></strong> is set; default <strong><code>placement</code></strong> is <strong><code>bottom</code></strong> (start-aligned). Position updates while open and flips inside the viewport when space is tight.</p>
|
|
21
|
-
<h2 id="basic-example">Basic example</h2>
|
|
22
|
-
<pre><code><sonic-pop class="inline-block">
|
|
23
|
-
<sonic-button>Notifications</sonic-button>
|
|
24
|
-
<sonic-menu slot="content">
|
|
25
|
-
<sonic-menu-item>
|
|
26
|
-
<sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>
|
|
27
|
-
Notifications
|
|
28
|
-
</sonic-menu-item>
|
|
29
|
-
<sonic-menu-item>
|
|
30
|
-
<sonic-icon library="iconoir" name="settings" slot="prefix"></sonic-icon>
|
|
31
|
-
Settings
|
|
32
|
-
</sonic-menu-item>
|
|
33
|
-
</sonic-menu>
|
|
34
|
-
</sonic-pop>
|
|
35
|
-
</code></pre>
|
|
36
|
-
<h2 id="placement">Placement</h2>
|
|
37
|
-
<p>Use <strong><code>top</code></strong> · <strong><code>bottom</code></strong> · <strong><code>left</code></strong> · <strong><code>right</code></strong> for the main axis. Add <strong><code>-start</code></strong> · <strong><code>-center</code></strong> · <strong><code>-end</code></strong> to align along the trigger edge. With no align suffix, content aligns to <strong><code>start</code></strong>. Legacy space syntax (<code>placement="bottom center"</code>) still works but is deprecated—prefer <strong><code>bottom-center</code></strong>.</p>
|
|
38
|
-
<pre><code><div class="flex flex-wrap gap-2">
|
|
39
|
-
<sonic-pop class="inline-block" placement="left">
|
|
40
|
-
<sonic-button>Left</sonic-button>
|
|
41
|
-
<sonic-menu slot="content">
|
|
42
|
-
<sonic-menu-item>
|
|
43
|
-
<sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>
|
|
44
|
-
Notifications
|
|
45
|
-
</sonic-menu-item>
|
|
46
|
-
</sonic-menu>
|
|
47
|
-
</sonic-pop>
|
|
48
|
-
<sonic-pop class="inline-block" placement="right">
|
|
49
|
-
<sonic-button>Right</sonic-button>
|
|
50
|
-
<sonic-menu slot="content">
|
|
51
|
-
<sonic-menu-item>
|
|
52
|
-
<sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>
|
|
53
|
-
Notifications
|
|
54
|
-
</sonic-menu-item>
|
|
55
|
-
</sonic-menu>
|
|
56
|
-
</sonic-pop>
|
|
57
|
-
<sonic-pop class="inline-block" placement="top">
|
|
58
|
-
<sonic-button>Top</sonic-button>
|
|
59
|
-
<sonic-menu slot="content">
|
|
60
|
-
<sonic-menu-item>
|
|
61
|
-
<sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>
|
|
62
|
-
Notifications
|
|
63
|
-
</sonic-menu-item>
|
|
64
|
-
</sonic-menu>
|
|
65
|
-
</sonic-pop>
|
|
66
|
-
<sonic-pop class="inline-block" placement="bottom">
|
|
67
|
-
<sonic-button>Bottom</sonic-button>
|
|
68
|
-
<sonic-menu slot="content">
|
|
69
|
-
<sonic-menu-item>
|
|
70
|
-
<sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>
|
|
71
|
-
Notifications
|
|
72
|
-
</sonic-menu-item>
|
|
73
|
-
</sonic-menu>
|
|
74
|
-
</sonic-pop>
|
|
75
|
-
</div>
|
|
76
|
-
</code></pre>
|
|
77
|
-
<h3 id="center-aligned-sides">Center-aligned sides</h3>
|
|
78
|
-
<pre><code><div class="flex flex-wrap gap-2">
|
|
79
|
-
<sonic-pop class="inline-block" placement="bottom-center">
|
|
80
|
-
<sonic-button>Bottom center</sonic-button>
|
|
81
|
-
<sonic-menu slot="content">
|
|
82
|
-
<sonic-menu-item>
|
|
83
|
-
<sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>
|
|
84
|
-
Notifications
|
|
85
|
-
</sonic-menu-item>
|
|
86
|
-
</sonic-menu>
|
|
87
|
-
</sonic-pop>
|
|
88
|
-
<sonic-pop class="inline-block" placement="top-center">
|
|
89
|
-
<sonic-button>Top center</sonic-button>
|
|
90
|
-
<sonic-menu slot="content">
|
|
91
|
-
<sonic-menu-item>
|
|
92
|
-
<sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>
|
|
93
|
-
Notifications
|
|
94
|
-
</sonic-menu-item>
|
|
95
|
-
</sonic-menu>
|
|
96
|
-
</sonic-pop>
|
|
97
|
-
<sonic-pop class="inline-block" placement="left-center">
|
|
98
|
-
<sonic-button>Left center</sonic-button>
|
|
99
|
-
<sonic-menu slot="content">
|
|
100
|
-
<sonic-menu-item>
|
|
101
|
-
<sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>
|
|
102
|
-
Notifications
|
|
103
|
-
</sonic-menu-item>
|
|
104
|
-
</sonic-menu>
|
|
105
|
-
</sonic-pop>
|
|
106
|
-
<sonic-pop class="inline-block" placement="right-center">
|
|
107
|
-
<sonic-button>Right center</sonic-button>
|
|
108
|
-
<sonic-menu slot="content">
|
|
109
|
-
<sonic-menu-item>
|
|
110
|
-
<sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>
|
|
111
|
-
Notifications
|
|
112
|
-
</sonic-menu-item>
|
|
113
|
-
</sonic-menu>
|
|
114
|
-
</sonic-pop>
|
|
115
|
-
</div>
|
|
116
|
-
</code></pre>
|
|
117
|
-
<h2 id="shadow">Shadow</h2>
|
|
118
|
-
<p>Default <strong><code>shadow</code></strong> is <strong><code>lg</code></strong>. The shadow applies to the floating <strong><code>content</code></strong> panel.</p>
|
|
119
|
-
<pre><code><div class="flex flex-wrap gap-2">
|
|
120
|
-
<sonic-pop class="inline-block" shadow="none" placement="top">
|
|
121
|
-
<sonic-button>None</sonic-button>
|
|
122
|
-
<sonic-menu slot="content">
|
|
123
|
-
<sonic-menu-item>
|
|
124
|
-
<sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>
|
|
125
|
-
Notifications
|
|
126
|
-
</sonic-menu-item>
|
|
127
|
-
</sonic-menu>
|
|
128
|
-
</sonic-pop>
|
|
129
|
-
<sonic-pop class="inline-block" shadow="sm" placement="top">
|
|
130
|
-
<sonic-button>Small</sonic-button>
|
|
131
|
-
<sonic-menu slot="content">
|
|
132
|
-
<sonic-menu-item>
|
|
133
|
-
<sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>
|
|
134
|
-
Notifications
|
|
135
|
-
</sonic-menu-item>
|
|
136
|
-
</sonic-menu>
|
|
137
|
-
</sonic-pop>
|
|
138
|
-
<sonic-pop class="inline-block" shadow="md" placement="top">
|
|
139
|
-
<sonic-button>Medium</sonic-button>
|
|
140
|
-
<sonic-menu slot="content">
|
|
141
|
-
<sonic-menu-item>
|
|
142
|
-
<sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>
|
|
143
|
-
Notifications
|
|
144
|
-
</sonic-menu-item>
|
|
145
|
-
</sonic-menu>
|
|
146
|
-
</sonic-pop>
|
|
147
|
-
<sonic-pop class="inline-block" shadow="lg" placement="top">
|
|
148
|
-
<sonic-button>Large</sonic-button>
|
|
149
|
-
<sonic-menu slot="content">
|
|
150
|
-
<sonic-menu-item>
|
|
151
|
-
<sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>
|
|
152
|
-
Notifications
|
|
153
|
-
</sonic-menu-item>
|
|
154
|
-
</sonic-menu>
|
|
155
|
-
</sonic-pop>
|
|
156
|
-
</div>
|
|
157
|
-
</code></pre>
|
|
158
|
-
<h2 id="inline">Inline</h2>
|
|
159
|
-
<p>By default the host is middle-aligned with siblings. Set <strong><code>inline</code></strong> to baseline-align the trigger inside running text.</p>
|
|
160
|
-
<pre><code><p>
|
|
161
|
-
The Concorde flew from Paris to
|
|
162
|
-
<sonic-pop inline>
|
|
163
|
-
<sonic-button variant="link">New York</sonic-button>
|
|
164
|
-
<sonic-menu slot="content">
|
|
165
|
-
<sonic-menu-item>See flights</sonic-menu-item>
|
|
166
|
-
<sonic-menu-item>Book a seat</sonic-menu-item>
|
|
167
|
-
</sonic-menu>
|
|
168
|
-
</sonic-pop>
|
|
169
|
-
in about 3.5 hours.
|
|
170
|
-
</p>
|
|
171
|
-
</code></pre>
|
|
172
|
-
<h2 id="no-toggle">No toggle</h2>
|
|
173
|
-
<p>With <strong><code>noToggle</code></strong>, a click on the trigger still opens the pop but does not close it when it is already open. Use <strong><code>hide()</code></strong> or an outside click to dismiss.</p>
|
|
174
|
-
<pre><code><div class="flex flex-wrap gap-2">
|
|
175
|
-
<sonic-pop class="inline-block" noToggle>
|
|
176
|
-
<sonic-button>No toggle on click</sonic-button>
|
|
177
|
-
<sonic-menu slot="content">
|
|
178
|
-
<sonic-menu-item>
|
|
179
|
-
<sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>
|
|
180
|
-
Notifications
|
|
181
|
-
</sonic-menu-item>
|
|
182
|
-
</sonic-menu>
|
|
183
|
-
</sonic-pop>
|
|
184
|
-
<sonic-pop class="inline-block">
|
|
185
|
-
<sonic-button>Default toggle on click</sonic-button>
|
|
186
|
-
<sonic-menu slot="content">
|
|
187
|
-
<sonic-menu-item>
|
|
188
|
-
<sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>
|
|
189
|
-
Notifications
|
|
190
|
-
</sonic-menu-item>
|
|
191
|
-
</sonic-menu>
|
|
192
|
-
</sonic-pop>
|
|
193
|
-
</div>
|
|
194
|
-
</code></pre>
|
|
195
|
-
<h2 id="manual-control">Manual control</h2>
|
|
196
|
-
<p>Set <strong><code>manual</code></strong> to disable built-in click and keyboard toggle on the trigger. Call <strong><code>show()</code></strong> and <strong><code>hide()</code></strong> on the element instead. The pop dispatches <strong><code>show</code></strong> when it opens and <strong><code>hide</code></strong> when it closes.</p>
|
|
197
|
-
<p>Click <strong>Click to open pop</strong> to open the panel programmatically.</p>
|
|
198
|
-
<pre><code><sonic-pop class="inline-block" manual id="manualPop">
|
|
199
|
-
<sonic-button onclick="alert('Custom action without opening the pop')">Manual trigger</sonic-button>
|
|
200
|
-
<sonic-menu slot="content">
|
|
201
|
-
<sonic-menu-item>It worked!</sonic-menu-item>
|
|
202
|
-
</sonic-menu>
|
|
203
|
-
</sonic-pop>
|
|
204
|
-
<sonic-button onclick="document.getElementById('manualPop').show()" class="ml-5" variant="outline">
|
|
205
|
-
<sonic-icon name="sparkles" library="custom"></sonic-icon>
|
|
206
|
-
Click to open pop
|
|
207
|
-
</sonic-button>
|
|
208
|
-
</code></pre>
|
|
209
|
-
<h2 id="keep-open-on-select">Keep open on select</h2>
|
|
210
|
-
<p>By default, a click inside <strong><code>content</code></strong> closes the pop (same as an outside click). Set <strong><code>data-on-select="keep"</code></strong> on the panel or a descendant to keep it open while selecting checkboxes, toggles, or menu items.</p>
|
|
211
|
-
<pre><code><div class="flex flex-wrap gap-2">
|
|
212
|
-
<sonic-pop class="inline-block">
|
|
213
|
-
<sonic-button>Closes on select</sonic-button>
|
|
214
|
-
<div slot="content" class="grid gap-2 p-3">
|
|
215
|
-
<sonic-checkbox>Option A</sonic-checkbox>
|
|
216
|
-
<sonic-checkbox>Option B</sonic-checkbox>
|
|
217
|
-
</div>
|
|
218
|
-
</sonic-pop>
|
|
219
|
-
<sonic-pop class="inline-block">
|
|
220
|
-
<sonic-button>Stays open on select</sonic-button>
|
|
221
|
-
<div slot="content" class="grid gap-2 p-3" data-on-select="keep">
|
|
222
|
-
<sonic-checkbox>Option A</sonic-checkbox>
|
|
223
|
-
<sonic-checkbox>Option B</sonic-checkbox>
|
|
224
|
-
</div>
|
|
225
|
-
</sonic-pop>
|
|
226
|
-
</div>
|
|
227
|
-
</code></pre>
|
|
228
|
-
<h2 id="keyboard-and-dismissal">Keyboard and dismissal</h2>
|
|
229
|
-
<p><strong><code>ArrowDown</code></strong> on the trigger opens the pop when it is closed. <strong><code>Escape</code></strong> closes the most recently opened pop (capture phase, before ancestors such as <strong><code>sonic-modal</code></strong>) and returns focus to that trigger. Multiple pops on the page stack in open order for Escape.</p>
|
|
230
|
-
<pre><code><sonic-pop class="inline-block">
|
|
231
|
-
<sonic-button>Focus me — ArrowDown opens, Escape closes</sonic-button>
|
|
232
|
-
<sonic-menu slot="content">
|
|
233
|
-
<sonic-menu-item>First item</sonic-menu-item>
|
|
234
|
-
<sonic-menu-item>Second item</sonic-menu-item>
|
|
235
|
-
</sonic-menu>
|
|
236
|
-
</sonic-pop>
|
|
237
|
-
</code></pre>
|
|
238
|
-
<h2 id="api-reference">API reference</h2>
|
|
239
|
-
<table>
|
|
240
|
-
<thead>
|
|
241
|
-
<tr>
|
|
242
|
-
<th>Attribute</th>
|
|
243
|
-
<th>Values</th>
|
|
244
|
-
<th>Description</th>
|
|
245
|
-
</tr>
|
|
246
|
-
</thead>
|
|
247
|
-
<tbody><tr>
|
|
248
|
-
<td><code>placement</code></td>
|
|
249
|
-
<td><code>bottom</code> (default) · <code>top</code> · <code>left</code> · <code>right</code> · <code>top-start</code> · <code>top-center</code> · <code>top-end</code> · <code>bottom-start</code> · <code>bottom-center</code> · <code>bottom-end</code> · <code>left-start</code> · <code>left-center</code> · <code>left-end</code> · <code>right-start</code> · <code>right-center</code> · <code>right-end</code></td>
|
|
250
|
-
<td>Side and alignment relative to the trigger; repositions while open and flips within the viewport</td>
|
|
251
|
-
</tr>
|
|
252
|
-
<tr>
|
|
253
|
-
<td><code>shadow</code></td>
|
|
254
|
-
<td><code>none</code> · <code>sm</code> · <code>md</code> · <code>lg</code> (default <code>lg</code>)</td>
|
|
255
|
-
<td>Box shadow on the <strong><code>content</code></strong> panel</td>
|
|
256
|
-
</tr>
|
|
257
|
-
<tr>
|
|
258
|
-
<td><code>inline</code></td>
|
|
259
|
-
<td>boolean</td>
|
|
260
|
-
<td>Baseline-align the host for inline triggers</td>
|
|
261
|
-
</tr>
|
|
262
|
-
<tr>
|
|
263
|
-
<td><code>noToggle</code></td>
|
|
264
|
-
<td>boolean</td>
|
|
265
|
-
<td>When open, trigger click does not close the pop</td>
|
|
266
|
-
</tr>
|
|
267
|
-
<tr>
|
|
268
|
-
<td><code>manual</code></td>
|
|
269
|
-
<td>boolean</td>
|
|
270
|
-
<td>Disable default trigger toggle; use <strong><code>show()</code></strong> / <strong><code>hide()</code></strong></td>
|
|
271
|
-
</tr>
|
|
272
|
-
</tbody></table>
|
|
273
|
-
<table>
|
|
274
|
-
<thead>
|
|
275
|
-
<tr>
|
|
276
|
-
<th>Slot</th>
|
|
277
|
-
<th>Description</th>
|
|
278
|
-
</tr>
|
|
279
|
-
</thead>
|
|
280
|
-
<tbody><tr>
|
|
281
|
-
<td><em>(default)</em></td>
|
|
282
|
-
<td>Trigger; listens for <strong><code>click</code></strong> and <strong><code>keydown</code></strong> (<code>ArrowDown</code> opens when closed) unless <strong><code>manual</code></strong></td>
|
|
283
|
-
</tr>
|
|
284
|
-
<tr>
|
|
285
|
-
<td><code>content</code></td>
|
|
286
|
-
<td>Floating panel; receives focus <strong><code>tabindex="0"</code></strong> while open</td>
|
|
287
|
-
</tr>
|
|
288
|
-
</tbody></table>
|
|
289
|
-
<p><strong>Methods:</strong> <strong><code>show()</code></strong> · <strong><code>hide()</code></strong> on the host element.</p>
|
|
290
|
-
<p><strong>Events:</strong> <strong><code>show</code></strong> · <strong><code>hide</code></strong> (non-bubbling <strong><code>CustomEvent</code></strong>).</p>
|
|
291
|
-
<p><strong>Content attribute:</strong> <strong><code>data-on-select="keep"</code></strong> on <strong><code>content</code></strong> or descendants prevents close-on-click inside the panel.</p>
|
|
292
|
-
|
|
293
|
-
</article>
|
|
294
|
-
</main>
|
|
295
|
-
</body>
|
|
296
|
-
</html>
|