@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.
Files changed (168) hide show
  1. package/.github/workflows/ci.yml +21 -0
  2. package/.github-export-ignore +30 -0
  3. package/.tmp-cem/custom-elements.json +13705 -0
  4. package/CONTRIBUTING.md +59 -0
  5. package/DEV.md +54 -0
  6. package/LICENSE +21 -0
  7. package/OPEN_SOURCE_CHECKPOINT.md +133 -0
  8. package/build-infos.json +1 -1
  9. package/concorde-3d.bundle.js +3960 -0
  10. package/concorde-3d.es.js +33433 -0
  11. package/concorde-core.bundle.js +196 -196
  12. package/concorde-core.es.js +3685 -3405
  13. package/concorde-hugging-face-infer.bundle.js +32 -0
  14. package/concorde-hugging-face-infer.es.js +2952 -0
  15. package/concorde-interactive.bundle.js +1157 -0
  16. package/concorde-interactive.es.js +10734 -0
  17. package/concorde-shader.bundle.js +116 -0
  18. package/concorde-shader.es.js +8353 -0
  19. package/concorde-webgpu.bundle.js +307 -0
  20. package/concorde-webgpu.es.js +8627 -0
  21. package/custom-elements-manifest.config.mjs +14 -0
  22. package/dist/concorde-core.bundle.js +196 -196
  23. package/dist/concorde-core.es.js +3685 -3405
  24. package/docs/assets/{index-wVZpLVYW.js → index-D8MVWqY6.js} +1351 -1222
  25. package/docs/assets/index-DiD0qYvE.css +1 -0
  26. package/docs/crawl/core/components/ui/alert/alert.html +71 -172
  27. package/docs/crawl/core/components/ui/alert-messages/alert-messages.html +5 -113
  28. package/docs/crawl/core/components/ui/badge/badge.html +79 -157
  29. package/docs/crawl/core/components/ui/button/button.html +0 -1
  30. package/docs/crawl/core/components/ui/captcha/captcha.html +8 -90
  31. package/docs/crawl/core/components/ui/card/card.html +68 -222
  32. package/docs/crawl/core/components/ui/divider/divider.html +31 -117
  33. package/docs/crawl/core/components/ui/form/fieldset/fieldset.html +101 -232
  34. package/docs/crawl/core/components/ui/form/form-actions/form-actions.html +52 -95
  35. package/docs/crawl/core/components/ui/form/form-layout/form-layout.html +38 -97
  36. package/docs/crawl/core/components/ui/form/input/input.html +3 -3
  37. package/docs/crawl/core/components/ui/form/textarea/textarea.html +3 -3
  38. package/docs/crawl/core/components/ui/group/group.html +38 -60
  39. package/docs/crawl/core/components/ui/icon/icon.html +47 -136
  40. package/docs/crawl/core/components/ui/image/image.html +56 -244
  41. package/docs/crawl/core/components/ui/link/link.html +9 -67
  42. package/docs/crawl/core/components/ui/loader/loader.html +23 -97
  43. package/docs/crawl/core/components/ui/menu/menu.html +90 -162
  44. package/docs/crawl/core/components/ui/modal/modal.html +50 -275
  45. package/docs/crawl/core/components/ui/pop/pop.html +66 -260
  46. package/docs/crawl/core/components/ui/progress/progress.html +30 -103
  47. package/docs/crawl/core/components/ui/table/table.html +171 -303
  48. package/docs/crawl/core/components/ui/toast/toast.html +59 -170
  49. package/docs/crawl/core/components/ui/tooltip/tooltip.html +29 -90
  50. package/docs/crawl/docs/_decorators/ancestor-attribute.html +2 -3
  51. package/docs/crawl/docs/_getting-started/concorde-outside.html +3 -3
  52. package/docs/crawl/docs/_getting-started/start.html +1 -1
  53. package/docs/crawl/docs/_getting-started/theming.html +63 -311
  54. package/docs/crawl/hubs/form-components.html +53 -75
  55. package/docs/crawl/index.html +6 -7
  56. package/docs/docs-mock-api-sw.js +0 -2
  57. package/docs/docs-mock-api-sw.js.map +2 -2
  58. package/docs/index.html +7 -9
  59. package/docs/llms-full.txt +456 -1703
  60. package/docs/llms.txt +32 -25
  61. package/docs/sitemap.xml +0 -3
  62. package/docs/src/core/components/functional/fetch/fetch.md +0 -0
  63. package/docs/src/core/components/functional/if/if.md +0 -0
  64. package/docs/src/core/components/functional/list/list.md +0 -0
  65. package/docs/src/core/components/functional/router/router.md +0 -0
  66. package/docs/src/core/components/functional/sdui/sdui.md +0 -0
  67. package/docs/src/core/components/functional/states/states.md +0 -0
  68. package/docs/src/core/components/functional/submit/submit.md +0 -0
  69. package/docs/src/core/components/ui/alert/alert.md +72 -147
  70. package/docs/src/core/components/ui/alert-messages/alert-messages.md +0 -85
  71. package/docs/src/core/components/ui/badge/badge.md +80 -141
  72. package/docs/src/core/components/ui/button/button.md +0 -1
  73. package/docs/src/core/components/ui/captcha/captcha.md +6 -65
  74. package/docs/src/core/components/ui/card/card.md +65 -183
  75. package/docs/src/core/components/ui/divider/divider.md +13 -107
  76. package/docs/src/core/components/ui/form/fieldset/fieldset.md +99 -175
  77. package/docs/src/core/components/ui/form/form-actions/form-actions.md +52 -75
  78. package/docs/src/core/components/ui/form/form-layout/form-layout.md +34 -109
  79. package/docs/src/core/components/ui/form/input/input.md +1 -1
  80. package/docs/src/core/components/ui/form/radio/radio.md +0 -0
  81. package/docs/src/core/components/ui/form/select/select.md +0 -0
  82. package/docs/src/core/components/ui/form/switch/switch.md +0 -0
  83. package/docs/src/core/components/ui/form/textarea/textarea.md +1 -1
  84. package/docs/src/core/components/ui/group/group.md +36 -36
  85. package/docs/src/core/components/ui/icon/icon.md +43 -132
  86. package/docs/src/core/components/ui/image/image.md +53 -179
  87. package/docs/src/core/components/ui/link/link.md +7 -45
  88. package/docs/src/core/components/ui/loader/loader.md +22 -79
  89. package/docs/src/core/components/ui/menu/menu.md +92 -133
  90. package/docs/src/core/components/ui/modal/modal.md +47 -163
  91. package/docs/src/core/components/ui/pop/pop.md +64 -262
  92. package/docs/src/core/components/ui/progress/progress.md +30 -76
  93. package/docs/src/core/components/ui/table/table.md +171 -147
  94. package/docs/src/core/components/ui/toast/toast.md +58 -108
  95. package/docs/src/core/components/ui/tooltip/tooltip.md +26 -68
  96. package/docs/src/docs/_core-concept/subscriber.md +0 -0
  97. package/docs/src/docs/_decorators/ancestor-attribute.md +2 -3
  98. package/docs/src/docs/_getting-started/concorde-outside.md +3 -3
  99. package/docs/src/docs/_getting-started/my-first-subscriber.md +0 -0
  100. package/docs/src/docs/_getting-started/pubsub.md +0 -0
  101. package/docs/src/docs/_getting-started/start.md +1 -1
  102. package/docs/src/docs/_getting-started/theming.md +61 -223
  103. package/docs/src/docs/search/docs-search.json +348 -3083
  104. package/docs/src/tsconfig.declarations.json +22 -0
  105. package/docs/src/tsconfig.emit.json +23 -0
  106. package/docs/src/tsconfig.json +3 -63
  107. package/gitlab/job_github_mirror.sh +39 -0
  108. package/package.json +36 -2
  109. package/scripts/generate-sdui-catalog.mjs +250 -0
  110. package/scripts/generate-sdui-catalog.spec.ts +91 -0
  111. package/scripts/github-export.mjs +150 -0
  112. package/scripts/post-build-docs.js +0 -0
  113. package/scripts/post-build.mjs +0 -0
  114. package/scripts/pre-build.mjs +15 -0
  115. package/src/core/components/functional/fetch/fetch.md +0 -0
  116. package/src/core/components/functional/if/if.md +0 -0
  117. package/src/core/components/functional/if/if.ts +0 -0
  118. package/src/core/components/functional/list/list.demo.ts +0 -0
  119. package/src/core/components/functional/list/list.md +0 -0
  120. package/src/core/components/functional/router/router.md +0 -0
  121. package/src/core/components/functional/router/router.ts +0 -0
  122. package/src/core/components/functional/sdui/SDUIDescriptorTransformer.ts +5 -5
  123. package/src/core/components/functional/sdui/__fixtures__/descriptors.ts +251 -0
  124. package/src/core/components/functional/sdui/__snapshots__/sdui-action.spec.ts.snap +73 -0
  125. package/src/core/components/functional/sdui/__snapshots__/sdui-incremental.spec.ts.snap +50 -0
  126. package/src/core/components/functional/sdui/__snapshots__/sdui-partial.spec.ts.snap +50 -0
  127. package/src/core/components/functional/sdui/__snapshots__/sdui.regression.spec.ts.snap +461 -0
  128. package/src/core/components/functional/sdui/component-catalog.gaps.json +511 -0
  129. package/src/core/components/functional/sdui/component-catalog.json +3103 -0
  130. package/src/core/components/functional/sdui/component-catalog.spec.ts +23 -0
  131. package/src/core/components/functional/sdui/sdui-action.spec.ts +99 -0
  132. package/src/core/components/functional/sdui/sdui-dom-snapshot.ts +61 -0
  133. package/src/core/components/functional/sdui/sdui-extension-points.md +94 -0
  134. package/src/core/components/functional/sdui/sdui-incremental.spec.ts +137 -0
  135. package/src/core/components/functional/sdui/sdui-partial.spec.ts +83 -0
  136. package/src/core/components/functional/sdui/sdui-partial.ts +19 -0
  137. package/src/core/components/functional/sdui/sdui-safe.spec.ts +188 -0
  138. package/src/core/components/functional/sdui/sdui-safe.ts +100 -0
  139. package/src/core/components/functional/sdui/sdui.md +122 -0
  140. package/src/core/components/functional/sdui/sdui.regression.spec.ts +64 -0
  141. package/src/core/components/functional/sdui/sdui.ts +442 -34
  142. package/src/core/components/functional/sdui/types.ts +49 -0
  143. package/src/core/components/functional/states/states.md +0 -0
  144. package/src/core/components/functional/submit/submit.md +0 -0
  145. package/src/core/components/functional/subscriber/subscriber.ts +0 -0
  146. package/src/core/components/functional/value/value.ts +0 -0
  147. package/src/core/components/ui/_css/size.ts +0 -0
  148. package/src/core/components/ui/captcha/altchaStyles.ts +0 -0
  149. package/src/core/components/ui/form/radio/radio.md +0 -0
  150. package/src/core/components/ui/form/select/select.md +0 -0
  151. package/src/core/components/ui/form/switch/switch.md +0 -0
  152. package/src/core/mixins/Subscriber.ts +0 -0
  153. package/src/core/utils/DataBindObserver.ts +0 -0
  154. package/src/core/utils/Objects.ts +0 -0
  155. package/src/core/utils/route.ts +0 -0
  156. package/src/css.d.ts +19 -0
  157. package/src/docs/_core-concept/subscriber.md +0 -0
  158. package/src/docs/_getting-started/my-first-subscriber.md +0 -0
  159. package/src/docs/_getting-started/pubsub.md +0 -0
  160. package/src/docs/example/users.ts +0 -0
  161. package/src/docs/search/page.ts +0 -0
  162. package/src/tsconfig.declarations.json +22 -0
  163. package/src/tsconfig.emit.json +23 -0
  164. package/src/tsconfig.json +90 -0
  165. package/src/tsconfig.tsbuildinfo +1 -1
  166. package/docs/assets/index-CD4WyL6o.css +0 -1
  167. package/docs/crawl/core/components/ui/theme/theme.html +0 -131
  168. package/docs/src/core/components/ui/theme/theme.md +0 -122
@@ -0,0 +1 @@
1
+ *,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.\!container{width:100%!important}.container{width:100%}@media (min-width: 640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width: 768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width: 1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width: 1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width: 1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}.prose{color:var(--tw-prose-body);max-width:65ch}.prose :where(p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1em;margin-bottom:1em}.prose :where([class~=lead]):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-lead);font-size:1.25em;line-height:1.6;margin-top:1.2em;margin-bottom:1.2em}.prose :where(a):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-links);text-decoration:underline;font-weight:500}.prose :where(strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-bold);font-weight:600}.prose :where(a strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(blockquote strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(thead th strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal;padding-inline-start:1.625em;margin-top:1em;margin-bottom:1em}.prose :where(ol[type=A]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=A s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=I]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type=I s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type="1"]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal}.prose :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:disc;padding-inline-start:1.625em;margin-top:1em;margin-bottom:1em}.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{font-weight:400;color:var(--tw-prose-counters)}.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{color:var(--tw-prose-bullets)}.prose :where(dt):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.25em}.prose :where(hr):not(:where([class~=not-prose],[class~=not-prose] *)){border-color:var(--tw-prose-hr);border-top-width:1px;margin-top:3em;margin-bottom:3em}.prose :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:500;font-style:italic;color:var(--tw-prose-quotes);border-inline-start-width:.25rem;border-inline-start-color:var(--tw-prose-quote-borders);quotes:"“""”""‘""’";margin-top:1.6em;margin-bottom:1.6em;padding-inline-start:1em}.prose :where(blockquote p:first-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:open-quote}.prose :where(blockquote p:last-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:close-quote}.prose :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:800;font-size:2.25em;margin-top:0;margin-bottom:.8888889em;line-height:1.1111111}.prose :where(h1 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:900;color:inherit}.prose :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:700;font-size:1.5em;margin-top:2em;margin-bottom:1em;line-height:1.3333333}.prose :where(h2 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:800;color:inherit}.prose :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;font-size:1.25em;margin-top:1.6em;margin-bottom:.6em;line-height:1.6}.prose :where(h3 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.5em;margin-bottom:.5em;line-height:1.5}.prose :where(h4 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(picture):not(:where([class~=not-prose],[class~=not-prose] *)){display:block;margin-top:2em;margin-bottom:2em}.prose :where(video):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:500;font-family:inherit;color:var(--tw-prose-kbd);box-shadow:0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%),0 3px rgb(var(--tw-prose-kbd-shadows) / 10%);font-size:.875em;border-radius:.3125rem;padding-top:.1875em;padding-inline-end:.375em;padding-bottom:.1875em;padding-inline-start:.375em}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-code);font-weight:600;font-size:.875em}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:"`"}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:"`"}.prose :where(a code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(h1 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(h2 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.875em}.prose :where(h3 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.9em}.prose :where(h4 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(blockquote code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(thead th code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(pre):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-pre-code);background-color:var(--tw-prose-pre-bg);overflow-x:auto;font-weight:400;font-size:.875em;line-height:1.7142857;margin-top:1.7142857em;margin-bottom:1.7142857em;border-radius:.375rem;padding-top:.8571429em;padding-inline-end:1.1428571em;padding-bottom:.8571429em;padding-inline-start:1.1428571em}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)){background-color:transparent;border-width:0;border-radius:0;padding:0;font-weight:inherit;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:none}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:none}.prose :where(table):not(:where([class~=not-prose],[class~=not-prose] *)){width:100%;table-layout:auto;margin-top:2em;margin-bottom:2em;font-size:.875em;line-height:1.7142857}.prose :where(thead):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-th-borders)}.prose :where(thead th):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;vertical-align:bottom;padding-inline-end:.5714286em;padding-bottom:.5714286em;padding-inline-start:.5714286em}.prose :where(tbody tr):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:var(--tw-prose-td-borders)}.prose :where(tbody tr:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:0}.prose :where(tbody td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:baseline}.prose :where(tfoot):not(:where([class~=not-prose],[class~=not-prose] *)){border-top-width:1px;border-top-color:var(--tw-prose-th-borders)}.prose :where(tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:top}.prose :where(th,td):not(:where([class~=not-prose],[class~=not-prose] *)){text-align:start}.prose :where(figure>*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(figcaption):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-captions);font-size:.875em;line-height:1.4285714;margin-top:.8571429em}.prose{--tw-prose-body: var(--sc-base-content);--tw-prose-headings: var(--sc-base-900);--tw-prose-lead: var(--sc-base-content);--tw-prose-links: var(--sc-base-900);--tw-prose-bold: var(--sc-base-content);--tw-prose-counters: var(--sc-base-500);--tw-prose-bullets: var(--sc-base-300);--tw-prose-hr: var(--sc-base-200);--tw-prose-quotes: var(--sc-base-content);--tw-prose-quote-borders: var(--sc-base-200);--tw-prose-captions: var(--sc-base-500);--tw-prose-kbd: #111827;--tw-prose-kbd-shadows: 17 24 39;--tw-prose-code: var(--sc-info);--tw-prose-pre-code: var(--sc-base-200);--tw-prose-pre-bg: var(--sc-base-800);--tw-prose-th-borders: var(--sc-base-300);--tw-prose-td-borders: var(--sc-base-200);--tw-prose-invert-body: var(--sc-base-300);--tw-prose-invert-headings: var(--sc-base);--tw-prose-invert-lead: var(--sc-base-400);--tw-prose-invert-links: var(--sc-base);--tw-prose-invert-bold: var(--sc-base);--tw-prose-invert-counters: var(--sc-base-400);--tw-prose-invert-bullets: var(--sc-base-600);--tw-prose-invert-hr: var(--sc-base-700);--tw-prose-invert-quotes: var(--sc-base-100);--tw-prose-invert-quote-borders: var(--sc-base-700);--tw-prose-invert-captions: var(--sc-base-400);--tw-prose-invert-kbd: #fff;--tw-prose-invert-kbd-shadows: 255 255 255;--tw-prose-invert-code: var(--sc-base);--tw-prose-invert-pre-code: var(--sc-base-300);--tw-prose-invert-pre-bg: var(--sc-base-900);--tw-prose-invert-th-borders: var(--sc-base-600);--tw-prose-invert-td-borders: var(--sc-base-700);font-size:1rem;line-height:1.75}.prose :where(picture>img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(li):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5em;margin-bottom:.5em;list-style-type:disc}.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.375em}.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.375em}.prose :where(.prose>ul>li p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(.prose>ul>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ul>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.prose :where(.prose>ol>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ol>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.prose :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(dl):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where(dd):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5em;padding-inline-start:1.625em}.prose :where(hr+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h2+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h3+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h4+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(thead th:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.prose :where(thead th:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.prose :where(tbody td,tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){padding-top:.5714286em;padding-inline-end:.5714286em;padding-bottom:.5714286em;padding-inline-start:.5714286em}.prose :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.prose :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.prose :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(.prose>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(.prose>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:0}.prose{line-height:1.5}.prose :where(strong a):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:bolder}.prose :where(iframe[src*=youtu]):not(:where([class~=not-prose],[class~=not-prose] *)){border-radius:var(--sc-rounded-md)}.visible{visibility:visible}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.\!relative{position:relative!important}.relative{position:relative}.sticky{position:sticky}.\!left-0{left:0!important}.\!top-0{top:0!important}.-top-1{top:-.25rem}.bottom-1{bottom:.25rem}.bottom-2{bottom:.5rem}.left-0{left:0}.right-1{right:.25rem}.right-2{right:.5rem}.top-0{top:0}.top-16{top:4rem}.top-\[4\.2rem\]{top:4.2rem}.z-10{z-index:10}.z-20{z-index:20}.z-40{z-index:40}.z-\[3000\]{z-index:3000}.col-span-2{grid-column:span 2 / span 2}.col-span-full{grid-column:1 / -1}.m-2{margin:.5rem}.-mx-2{margin-left:-.5rem;margin-right:-.5rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.my-3{margin-top:.75rem;margin-bottom:.75rem}.my-4{margin-top:1rem;margin-bottom:1rem}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-10{margin-bottom:2.5rem}.mb-2{margin-bottom:.5rem}.mb-20{margin-bottom:5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-40{margin-bottom:10rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-3{margin-left:.75rem}.ml-5{margin-left:1.25rem}.ml-auto{margin-left:auto}.mr-1{margin-right:.25rem}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.mr-4{margin-right:1rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-9{margin-top:2.25rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.size-40{width:10rem;height:10rem}.size-\[2\.4rem\]{width:2.4rem;height:2.4rem}.h-1\/2{height:50%}.h-10{height:2.5rem}.h-12{height:3rem}.h-24{height:6rem}.h-3{height:.75rem}.h-4{height:1rem}.h-96{height:24rem}.h-full{height:100%}.max-h-96{max-height:24rem}.max-h-\[50vh\]{max-height:50vh}.max-h-\[calc\(100vh_-_4\.2rem\)\]{max-height:calc(100vh - 4.2rem)}.min-h-\[100vh\]{min-height:100vh}.w-1\/2{width:50%}.w-1\/3{width:33.333333%}.w-12{width:3rem}.w-16{width:4rem}.w-20{width:5rem}.w-24{width:6rem}.w-3{width:.75rem}.w-64{width:16rem}.w-\[5rem\]{width:5rem}.w-full{width:100%}.min-w-\[8rem\]{min-width:8rem}.max-w-\[29ch\]{max-width:29ch}.max-w-\[40rem\]{max-width:40rem}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.max-w-prose{max-width:70ch}.max-w-xl{max-width:36rem}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.flex-shrink{flex-shrink:1}.flex-grow{flex-grow:1}.-translate-y-1\/2{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-1\/2{--tw-translate-x: 50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-1\/2{--tw-translate-y: 50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-90{--tw-rotate: 90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-\[55deg\]{--tw-rotate: 55deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.resize{resize:both}.list-disc{list-style-type:disc}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-\[minmax\(10rem\,15rem\)_minmax\(0\,1fr\)\]{grid-template-columns:minmax(10rem,15rem) minmax(0,1fr)}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-x-1{-moz-column-gap:.25rem;column-gap:.25rem}.gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.gap-y-1{row-gap:.25rem}.gap-y-2{row-gap:.5rem}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.self-center{align-self:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.break-all{word-break:break-all}.rounded{border-radius:var(--sc-rounded)}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:var(--sc-rounded-lg)}.rounded-md{border-radius:var(--sc-rounded-md)}.rounded-xl{border-radius:var(--sc-rounded-xl)}.border{border-width:var(--sc-border-width)}.border-0{border-width:0px}.border-b{border-bottom-width:var(--sc-border-width)}.border-b-\[\.18rem\]{border-bottom-width:.18rem}.border-t{border-top-width:var(--sc-border-width)}.border-dashed{border-style:dashed}.border-dotted{border-style:dotted}.border-current{border-color:currentColor}.border-danger{border-color:var(--sc-danger)}.border-info{border-color:var(--sc-info)}.border-neutral-100{border-color:var(--sc-base-100)}.border-neutral-200{border-color:var(--sc-base-200)}.border-neutral-300{border-color:var(--sc-base-300)}.border-success{border-color:var(--sc-success)}.bg-info{background-color:var(--sc-info)}.bg-neutral-0{background-color:var(--sc-base)}.bg-neutral-100{background-color:var(--sc-base-100)}.bg-neutral-200{background-color:var(--sc-base-200)}.bg-neutral-50{background-color:var(--sc-base-50)}.bg-neutral-900{background-color:var(--sc-base-900)}.bg-success{background-color:var(--sc-success)}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.from-\[rgba\(0\,0\,10\,\.2\)\]{--tw-gradient-from: rgba(0,0,10,.2) var(--tw-gradient-from-position);--tw-gradient-to: rgba(0, 0, 10, 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-3{padding-bottom:.75rem}.pl-5{padding-left:1.25rem}.pl-\[\.75rem\]{padding-left:.75rem}.pt-3{padding-top:.75rem}.pt-\[20vh\]{padding-top:20vh}.text-center{text-align:center}.font-headings{font-family:var(--sc-headings-font-family, var(--sc-font-family-base, sans-serif))}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-2xl{font-size:1.5rem}.text-3xl{font-size:1.875rem}.text-4xl{font-size:2.25rem}.text-base{font-size:1rem}.text-lg{font-size:1.125rem}.text-sm{font-size:.875rem}.text-xl{font-size:1.25rem}.text-xs{font-size:.75rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.italic{font-style:italic}.tabular-nums{--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-\[1\.5\]{line-height:1.5}.leading-none{line-height:1}.leading-tight{line-height:1.25}.tracking-wide{letter-spacing:.025em}.text-content{color:var(--sc-base-content)}.text-contrast-content{color:var(--sc-contrast-content)}.text-danger{color:var(--sc-danger)}.text-info{color:var(--sc-info)}.text-neutral-0{color:var(--sc-base)}.text-neutral-300{color:var(--sc-base-300)}.text-neutral-400{color:var(--sc-base-400)}.text-neutral-500{color:var(--sc-base-500)}.text-neutral-600{color:var(--sc-base-600)}.text-neutral-700{color:var(--sc-base-700)}.text-neutral-900{color:var(--sc-base-900)}.text-success{color:var(--sc-success)}.underline{text-decoration-line:underline}.opacity-40{opacity:.4}.opacity-70{opacity:.7}.opacity-90{opacity:.9}.shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.outline{outline-style:solid}.blur{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow{--tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / .1)) drop-shadow(0 1px 1px rgb(0 0 0 / .06));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow-lg{--tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / .04)) drop-shadow(0 4px 3px rgb(0 0 0 / .1));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.invert{--tw-invert: invert(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}@font-face{font-family:ClashGrotesk-Variable;src:url(../fonts/ClashGrotesk-Variable.woff2) format("woff2"),url(../fonts/ClashGrotesk-Variable.woff) format("woff"),url(../fonts/ClashGrotesk-Variable.ttf) format("truetype");font-weight:200 700;font-display:swap;font-style:normal}:root{--sc-headings-font-family: "ClashGrotesk-Variable", sans-serif;--sc-font-family-base: "ClashGrotesk-Variable", sans-serif;--sc-headings-font-weight: 400;--sc-rounded: .5rem;--sc-border-width: max(2px, .18rem)}[data-concorde-theme=light]{--sc-base: #fffcf0;--sc-base-content: #111111;--sc-primary: #111111;--sc-primary-content: #fffcf0;--sc-base-50: #f4f1e6;--sc-base-100: #e9e6dc;--sc-base-200: #ceccc3;--sc-base-300: #bcbab1;--sc-base-400: #96948e;--sc-base-500: #7d7c77;--sc-base-600: #5a5956;--sc-base-700: #393937;--sc-base-800: #252524;--sc-base-900: #111111;--sc-info: #3b82f6;--sc-info-content: #ffffff;--sc-success: #10b981;--sc-success-content: #ffffff;--sc-warning: #fb923c;--sc-warning-content: #111827;--sc-danger: #dc2626;--sc-danger-content: #ffffff}[data-concorde-theme=dark]{--sc-base: #0a0a0a;--sc-base-content: #dadad9;--sc-primary: #ffef8a;--sc-primary-content: #111827;--sc-base-50: #141414;--sc-base-100: #1c1c1c;--sc-base-200: #2f2f2f;--sc-base-300: #3e3e3e;--sc-base-400: #5f5f5f;--sc-base-500: #767676;--sc-base-600: #9a9a9a;--sc-base-700: #c0c0bf;--sc-base-800: #dadad9;--sc-base-900: #f5f5f4;--sc-info: #3a85f7;--sc-info-content: #ffffff;--sc-success: #0fba7f;--sc-success-content: #ffffff;--sc-warning: #fc8f3b;--sc-warning-content: #111827;--sc-danger: #dd2528;--sc-danger-content: #ffffff}[data-concorde-theme=light],[data-concorde-theme=dark]{--sc-input-bg: var(--sc-base-100);--sc-input-border-color: var(--sc-base-100)}html{font-family:var(--sc-font-family-base, sans-serif)}h2{border-bottom:var(--sc-border-width) solid;padding-bottom:.1em}p,ul,ol{font-family:Arial,Helvetica,sans-serif}body{background:var(--sc-base);color:var(--sc-base-content)}html{scroll-behavior:smooth}.animated-text{display:block;position:relative;overflow:hidden}.animated-text span{display:block;position:absolute;width:100%;height:100%;top:0;left:0;transform:translateY(108%);animation:slideUp 4.5s cubic-bezier(.17,.67,.61,1.13) infinite}.animated-text span:nth-child(2){animation-delay:1.5s}.animated-text span:nth-child(3){animation-delay:3s}@keyframes slideUp{0%{transform:translateY(108%)}7%{transform:translateY(0)}33%{transform:translateY(0)}40%{transform:translateY(-108%)}to{transform:translateY(-108%)}}.custom-scroll{overflow:auto!important}.custom-scroll:hover::-webkit-scrollbar-thumb{box-shadow:inset 0 0 2rem 2rem var(--sc-base-900)}.custom-scroll::-webkit-scrollbar{width:.5rem;height:.5rem;border:solid .15rem transparent;border-radius:var(--sc-rounded);background:transparent}.custom-scroll::-webkit-scrollbar-thumb{opacity:0;-webkit-transition:box-shadow .2s;transition:box-shadow .2s;border:solid .15rem transparent}@media (min-width: 1024px){.lg\:prose-lg{font-size:1.125rem;line-height:1.7777778}.lg\:prose-lg :where(p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.3333333em;margin-bottom:1.3333333em}.lg\:prose-lg :where([class~=lead]):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:1.2222222em;line-height:1.4545455;margin-top:1.0909091em;margin-bottom:1.0909091em}.lg\:prose-lg :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.6666667em;margin-bottom:1.6666667em;padding-inline-start:1em}.lg\:prose-lg :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:2.6666667em;margin-top:0;margin-bottom:.8333333em;line-height:1}.lg\:prose-lg :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:1.6666667em;margin-top:1.8666667em;margin-bottom:1.0666667em;line-height:1.3333333}.lg\:prose-lg :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:1.3333333em;margin-top:1.6666667em;margin-bottom:.6666667em;line-height:1.5}.lg\:prose-lg :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.7777778em;margin-bottom:.4444444em;line-height:1.5555556}.lg\:prose-lg :where(img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.7777778em;margin-bottom:1.7777778em}.lg\:prose-lg :where(picture):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.7777778em;margin-bottom:1.7777778em}.lg\:prose-lg :where(picture>img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.lg\:prose-lg :where(video):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.7777778em;margin-bottom:1.7777778em}.lg\:prose-lg :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.8888889em;border-radius:.3125rem;padding-top:.2222222em;padding-inline-end:.4444444em;padding-bottom:.2222222em;padding-inline-start:.4444444em}.lg\:prose-lg :where(code):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.8888889em}.lg\:prose-lg :where(h2 code):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.8666667em}.lg\:prose-lg :where(h3 code):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.875em}.lg\:prose-lg :where(pre):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.8888889em;line-height:1.75;margin-top:2em;margin-bottom:2em;border-radius:.375rem;padding-top:1em;padding-inline-end:1.5em;padding-bottom:1em;padding-inline-start:1.5em}.lg\:prose-lg :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.3333333em;margin-bottom:1.3333333em;padding-inline-start:1.5555556em}.lg\:prose-lg :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.3333333em;margin-bottom:1.3333333em;padding-inline-start:1.5555556em}.lg\:prose-lg :where(li):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.6666667em;margin-bottom:.6666667em}.lg\:prose-lg :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.4444444em}.lg\:prose-lg :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:.4444444em}.lg\:prose-lg :where(.lg\:prose-lg>ul>li p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.8888889em;margin-bottom:.8888889em}.lg\:prose-lg :where(.lg\:prose-lg>ul>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.3333333em}.lg\:prose-lg :where(.lg\:prose-lg>ul>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.3333333em}.lg\:prose-lg :where(.lg\:prose-lg>ol>li>p:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.3333333em}.lg\:prose-lg :where(.lg\:prose-lg>ol>li>p:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.3333333em}.lg\:prose-lg :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.8888889em;margin-bottom:.8888889em}.lg\:prose-lg :where(dl):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.3333333em;margin-bottom:1.3333333em}.lg\:prose-lg :where(dt):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.3333333em}.lg\:prose-lg :where(dd):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.6666667em;padding-inline-start:1.5555556em}.lg\:prose-lg :where(hr):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:3.1111111em;margin-bottom:3.1111111em}.lg\:prose-lg :where(hr+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.lg\:prose-lg :where(h2+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.lg\:prose-lg :where(h3+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.lg\:prose-lg :where(h4+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.lg\:prose-lg :where(table):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.8888889em;line-height:1.5}.lg\:prose-lg :where(thead th):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:.75em;padding-bottom:.75em;padding-inline-start:.75em}.lg\:prose-lg :where(thead th:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.lg\:prose-lg :where(thead th:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.lg\:prose-lg :where(tbody td,tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){padding-top:.75em;padding-inline-end:.75em;padding-bottom:.75em;padding-inline-start:.75em}.lg\:prose-lg :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-start:0}.lg\:prose-lg :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-inline-end:0}.lg\:prose-lg :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.7777778em;margin-bottom:1.7777778em}.lg\:prose-lg :where(figure>*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.lg\:prose-lg :where(figcaption):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.8888889em;line-height:1.5;margin-top:1em}.lg\:prose-lg :where(.lg\:prose-lg>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.lg\:prose-lg :where(.lg\:prose-lg>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:0}}.hover\:bg-neutral-50:hover{background-color:var(--sc-base-50)}.prose-h1\:text-\[4\.2em\] :is(:where(h1):not(:where([class~=not-prose],[class~=not-prose] *))){font-size:4.2em}.prose-h1\:font-normal :is(:where(h1):not(:where([class~=not-prose],[class~=not-prose] *))){font-weight:400}.prose-li\:my-\[\.2em\] :is(:where(li):not(:where([class~=not-prose],[class~=not-prose] *))){margin-top:.2em;margin-bottom:.2em}@media (min-width: 640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width: 768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:text-5xl{font-size:3rem}}@media (min-width: 1024px){.lg\:min-w-\[19rem\]{min-width:19rem}.lg\:max-w-\[19ch\]{max-width:19ch}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:px-20{padding-left:5rem;padding-right:5rem}.lg\:text-7xl{font-size:4.5rem}.lg\:leading-\[1\.5\]{line-height:1.5}}@media (min-width: 1280px){.xl\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.xl\:text-8xl{font-size:6rem}}.dark\:block:where(.dark,.dark *){display:block}.dark\:hidden:where(.dark,.dark *){display:none}.dark\:border-neutral-600:where(.dark,.dark *){border-color:var(--sc-base-600)}.dark\:border-neutral-700:where(.dark,.dark *){border-color:var(--sc-base-700)}.dark\:bg-neutral-300:where(.dark,.dark *){background-color:var(--sc-base-300)}.dark\:text-neutral-400:where(.dark,.dark *){color:var(--sc-base-400)}.dark\:text-neutral-600:where(.dark,.dark *){color:var(--sc-base-600)}.dark\:opacity-60:where(.dark,.dark *){opacity:.6}.\[\&\[active\]\]\:min-w-\[13rem\][active]{min-width:13rem}.\[\&\[active\]\]\:rounded-full[active]{border-radius:9999px}.\[\&\[active\]\]\:bg-danger[active]{background-color:var(--sc-danger)}.\[\&\[active\]\]\:font-black[active]{font-weight:900}.\[\&\[active\]\]\:text-danger-content[active]{color:var(--sc-danger-content)}.\[\&\[active\]\]\:text-success[active]{color:var(--sc-success)}[data-home] .\[\[data-home\]_\&\]\:hidden{display:none}
@@ -4,8 +4,8 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>Alert — Concorde</title>
7
- <meta name="description" content="Alerts surface important feedback inline—errors, confirmations, or contextual help. Use label / text for simple copy, or the default slot for rich content (links, buttons). Set announce when the messa">
8
- <meta name="keywords" content="Concorde, supersoniks, core/components/ui/alert/alert, alert, Alert, UI component, sonic-alert, web component, label, text, announce, status, default, role, aria-live">
7
+ <meta name="description" content="This address is already in use. Lorem ipsum dolor sit amet.">
8
+ <meta name="keywords" content="Concorde, supersoniks, core/components/ui/alert/alert, alert, Alert, UI component, sonic-alert, web component">
9
9
  <meta name="concorde-doc-id" content="core/components/ui/alert/alert">
10
10
  <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/alert/alert.html">
11
11
  </head>
@@ -15,195 +15,94 @@
15
15
  </header>
16
16
  <main>
17
17
  <article>
18
- <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Alert</strong>. Alerts surface important feedback inline—errors, confirmations, or contextual help. Use label / text for simple copy, or the default slot for rich content (links, buttons). Set announce when the messa <span>Doc ID: <code>core/components/ui/alert/alert</code>. Keywords: Concorde, supersoniks, core/components/ui/alert/alert, alert, Alert, UI component, sonic-alert, web component, label, text, announce, status, default, role, aria-live. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/alert/alert.html">https://concorde.supersoniks.org/crawl/core/components/ui/alert/alert.html</a>.</span></p>
18
+ <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Alert</strong>. This address is already in use. Lorem ipsum dolor sit amet. <span>Doc ID: <code>core/components/ui/alert/alert</code>. Keywords: Concorde, supersoniks, core/components/ui/alert/alert, alert, Alert, UI component, sonic-alert, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/alert/alert.html">https://concorde.supersoniks.org/crawl/core/components/ui/alert/alert.html</a>.</span></p>
19
19
  <h1 id="alert">Alert</h1>
20
- <p>Alerts <strong>surface important feedback</strong> inline—errors, confirmations, or contextual help. Use <strong><code>label</code></strong> / <strong><code>text</code></strong> for simple copy, or the <strong>default slot</strong> for rich content (links, buttons). Set <strong><code>announce</code></strong> when the message appears after an action so screen readers pick it up.</p>
21
- <h2 id="basic-example">Basic example</h2>
22
20
  <pre><code>&lt;sonic-alert status=&quot;error&quot; label=&quot;Email error&quot; text=&quot;This address is already in use&quot; background&gt;&lt;/sonic-alert&gt;
23
21
  </code></pre>
24
22
  <h2 id="status">Status</h2>
25
- <p>Color and icon follow <code>status</code>. With no <code>status</code>, behavior is <code>default</code>.</p>
26
23
  <pre><code>&lt;div class=&quot;grid gap-4&quot;&gt;
27
- &lt;sonic-alert label=&quot;Default&quot;&gt;This address is already in use.&lt;/sonic-alert&gt;
28
- &lt;sonic-alert status=&quot;success&quot; label=&quot;Success&quot;&gt;This address is already in use.&lt;/sonic-alert&gt;
29
- &lt;sonic-alert status=&quot;error&quot; label=&quot;Error&quot;&gt;This address is already in use.&lt;/sonic-alert&gt;
30
- &lt;sonic-alert status=&quot;warning&quot; label=&quot;Warning&quot;&gt;This address is already in use.&lt;/sonic-alert&gt;
31
- &lt;sonic-alert status=&quot;info&quot; label=&quot;Info&quot;&gt;This address is already in use.&lt;/sonic-alert&gt;
32
- &lt;/div&gt;
33
- </code></pre>
34
- <h2 id="accessibility-announce">Accessibility (<code>announce</code>)</h2>
35
- <p>By default, an alert already in the DOM is <strong>not</strong> announced (no <code>role</code> / <code>aria-live</code>). Set <strong><code>announce</code></strong> when the message appears <strong>after</strong> user action (API response, validation, etc.): screen readers get <code>role=&quot;alert&quot;</code> for <code>error</code>, otherwise <code>role=&quot;status&quot;</code> and <code>aria-live=&quot;polite&quot;</code>.</p>
36
- <p><code>sonic-alert-messages</code> sets <code>announce</code> on every rendered alert.</p>
37
- <pre><code>&lt;sonic-alert announce status=&quot;success&quot; label=&quot;Saved&quot; text=&quot;Your changes were saved.&quot;&gt;&lt;/sonic-alert&gt;
38
- </code></pre>
39
- <h2 id="content-and-icon">Content and icon</h2>
40
- <p><code>label</code> and <code>text</code> accept plain text only. The default slot is rendered after <code>text</code>. Use the <strong><code>icon</code></strong> slot to replace the default <code>sonic-icon</code>. <strong><code>noIcon</code></strong> hides the icon.</p>
41
- <pre><code>&lt;sonic-alert status=&quot;info&quot; noIcon label=&quot;No icon&quot; text=&quot;Informational message.&quot;&gt;&lt;/sonic-alert&gt;
42
- </code></pre>
43
- <h2 id="custom-icon-slot">Custom icon slot</h2>
44
- <p>Project any markup into <strong><code>slot=&quot;icon&quot;</code></strong> (emoji, image, custom component). Keep it decorative with <code>aria-hidden=&quot;true&quot;</code> when the message text already conveys meaning.</p>
45
- <pre><code>&lt;sonic-alert status=&quot;success&quot; label=&quot;Achievement unlocked&quot; background&gt;
46
- &lt;span slot=&quot;icon&quot; aria-hidden=&quot;true&quot; class=&quot;text-lg leading-none&quot;&gt;🎉&lt;/span&gt;
47
- You unlocked a new badge.
48
- &lt;/sonic-alert&gt;
24
+ &lt;sonic-alert label=&quot;Default&quot;&gt; This address is already in use. &lt;/sonic-alert&gt;
25
+ &lt;sonic-alert status=&quot;success&quot; label=&quot;Success&quot;&gt; This address is already in use. &lt;/sonic-alert&gt;
26
+ &lt;sonic-alert status=&quot;error&quot; label=&quot;Error&quot;&gt; This address is already in use. &lt;/sonic-alert&gt;
27
+ &lt;sonic-alert status=&quot;warning&quot; label=&quot;Warning&quot;&gt; This address is already in use. &lt;/sonic-alert&gt;
28
+ &lt;sonic-alert status=&quot;info&quot; label=&quot;Info&quot;&gt; This address is already in use. &lt;/sonic-alert&gt;
29
+ &lt;/div&gt;
49
30
  </code></pre>
50
31
  <h2 id="sizes">Sizes</h2>
51
32
  <pre><code>&lt;div class=&quot;grid gap-4&quot;&gt;
52
- &lt;sonic-alert status=&quot;error&quot; label=&quot;Email error&quot; size=&quot;2xs&quot;&gt;
53
- This address is already in use. Lorem ipsum dolor sit amet.
54
- &lt;/sonic-alert&gt;
55
- &lt;sonic-alert status=&quot;error&quot; label=&quot;Email error&quot; size=&quot;xs&quot;&gt;
56
- This address is already in use. Lorem ipsum dolor sit amet.
57
- &lt;/sonic-alert&gt;
58
- &lt;sonic-alert status=&quot;error&quot; label=&quot;Email error&quot; size=&quot;sm&quot;&gt;
59
- This address is already in use. Lorem ipsum dolor sit amet.
60
- &lt;/sonic-alert&gt;
61
- &lt;sonic-alert status=&quot;error&quot; label=&quot;Email error&quot;&gt;
62
- This address is already in use. Lorem ipsum dolor sit amet.
63
- &lt;/sonic-alert&gt;
64
- &lt;sonic-alert status=&quot;error&quot; label=&quot;Email error&quot; size=&quot;lg&quot;&gt;
65
- This address is already in use. Lorem ipsum dolor sit amet.
66
- &lt;/sonic-alert&gt;
67
- &lt;sonic-alert status=&quot;error&quot; label=&quot;Email error&quot; size=&quot;xl&quot;&gt;
68
- This address is already in use. Lorem ipsum dolor sit amet.
69
- &lt;/sonic-alert&gt;
70
- &lt;sonic-alert status=&quot;error&quot; label=&quot;Email error&quot; size=&quot;2xl&quot;&gt;
71
- This address is already in use. Lorem ipsum dolor sit amet.
72
- &lt;/sonic-alert&gt;
73
- &lt;/div&gt;
33
+ &lt;sonic-alert status=&quot;error&quot; label=&quot;Email error&quot; size=&quot;2xs&quot;&gt;
34
+ This address is already in use. Lorem ipsum dolor sit amet.
35
+ &lt;/sonic-alert&gt;
36
+ &lt;sonic-alert status=&quot;error&quot; label=&quot;Email error&quot; size=&quot;xs&quot;&gt;
37
+ This address is already in use. Lorem ipsum dolor sit amet.
38
+ &lt;/sonic-alert&gt;
39
+ &lt;sonic-alert status=&quot;error&quot; label=&quot;Email error&quot; size=&quot;sm&quot;&gt;
40
+ This address is already in use. Lorem ipsum dolor sit amet.
41
+ &lt;/sonic-alert&gt;
42
+ &lt;sonic-alert status=&quot;error&quot; label=&quot;Email error&quot;&gt;
43
+ This address is already in use. Lorem ipsum dolor sit amet.
44
+ &lt;/sonic-alert&gt;
45
+ &lt;sonic-alert status=&quot;error&quot; label=&quot;Email error&quot; size=&quot;lg&quot;&gt;
46
+ This address is already in use. Lorem ipsum dolor sit amet.
47
+ &lt;/sonic-alert&gt;
48
+ &lt;sonic-alert status=&quot;error&quot; label=&quot;Email error&quot; size=&quot;xl&quot;&gt;
49
+ This address is already in use. Lorem ipsum dolor sit amet.
50
+ &lt;/sonic-alert&gt;
51
+ &lt;sonic-alert status=&quot;error&quot; label=&quot;Email error&quot; size=&quot;2xl&quot;&gt;
52
+ This address is already in use. Lorem ipsum dolor sit amet.
53
+ &lt;/sonic-alert&gt;
54
+ &lt;/div&gt;
74
55
  </code></pre>
75
56
  <h2 id="alert-with-link">Alert with link</h2>
76
- <p>Rich content in the slot (buttons, links).</p>
77
57
  <pre><code>&lt;sonic-alert status=&quot;info&quot; label=&quot;New messages !&quot;&gt;
78
- You have 2 unread messages&lt;br /&gt;
79
- &lt;div class=&quot;flex gap-2 mt-1&quot;&gt;
80
- &lt;sonic-button variant=&quot;outline&quot; type=&quot;info&quot; size=&quot;xs&quot;&gt;See messages&lt;/sonic-button&gt;
81
- &lt;sonic-button variant=&quot;ghost&quot; type=&quot;info&quot; size=&quot;xs&quot;&gt;Dismiss&lt;/sonic-button&gt;
82
- &lt;/div&gt;
83
- &lt;/sonic-alert&gt;
58
+ You have 2 unread messages&lt;br /&gt;
59
+ &lt;div class=&quot;flex gap-2 mt-1&quot;&gt;
60
+ &lt;sonic-button variant=&quot;outline&quot; type=&quot;info&quot; size=&quot;xs&quot;&gt;See messages&lt;/sonic-button&gt;
61
+ &lt;sonic-button variant=&quot;ghost&quot; type=&quot;info&quot; size=&quot;xs&quot;&gt;dismiss&lt;/sonic-button&gt;
62
+ &lt;/div&gt;
63
+ &lt;/sonic-alert&gt;
84
64
  </code></pre>
85
65
  <h2 id="background">Background</h2>
86
- <p>Tinted background from the <code>status</code> color (<code>color-mix</code> on <code>currentColor</code>).</p>
87
66
  <pre><code>&lt;div class=&quot;grid gap-4&quot;&gt;
88
- &lt;sonic-alert background label=&quot;Lorem ipsum dolor&quot;&gt;This address is already in use.&lt;/sonic-alert&gt;
89
- &lt;sonic-alert status=&quot;success&quot; background label=&quot;Lorem ipsum dolor&quot;&gt;
90
- This address is already in use.
91
- &lt;/sonic-alert&gt;
92
- &lt;sonic-alert status=&quot;error&quot; background label=&quot;Lorem ipsum dolor&quot;&gt;
93
- This address is already in use.
94
- &lt;/sonic-alert&gt;
95
- &lt;sonic-alert status=&quot;warning&quot; background label=&quot;Lorem ipsum dolor&quot;&gt;
96
- This address is already in use.
97
- &lt;/sonic-alert&gt;
98
- &lt;sonic-alert status=&quot;info&quot; background label=&quot;Lorem ipsum dolor&quot;&gt;
99
- This address is already in use.
100
- &lt;/sonic-alert&gt;
101
- &lt;/div&gt;
67
+ &lt;sonic-alert background label=&quot;Lorem ipsum dolor&quot;&gt;
68
+ This address is already in use.
69
+ &lt;/sonic-alert&gt;
70
+ &lt;sonic-alert status=&quot;success&quot; background label=&quot;Lorem ipsum dolor&quot;&gt;
71
+ This address is already in use.
72
+ &lt;/sonic-alert&gt;
73
+ &lt;sonic-alert status=&quot;error&quot; background label=&quot;Lorem ipsum dolor&quot;&gt;
74
+ This address is already in use.
75
+ &lt;/sonic-alert&gt;
76
+ &lt;sonic-alert status=&quot;warning&quot; background label=&quot;Lorem ipsum dolor&quot;&gt;
77
+ This address is already in use.
78
+ &lt;/sonic-alert&gt;
79
+ &lt;sonic-alert status=&quot;info&quot; background label=&quot;Lorem ipsum dolor&quot;&gt;
80
+ This address is already in use.
81
+ &lt;/sonic-alert&gt;
82
+ &lt;/div&gt;
102
83
  </code></pre>
103
84
  <h2 id="dismissible">Dismissible</h2>
104
- <p><code>dismissible</code> removes the alert from the DOM when the close control is clicked (i18n aria label). <strong><code>dismissible</code></strong> and <strong><code>background</code></strong> are independent: without <code>background</code>, close sits at the end of the row; with <code>background</code>, top-right.</p>
105
- <pre><code>&lt;sonic-alert status=&quot;info&quot; class=&quot;mb-3&quot; dismissible label=&quot;This address is already in use.&quot;&gt;
106
- &lt;/sonic-alert&gt;
107
- &lt;sonic-alert class=&quot;mb-3&quot; dismissible background label=&quot;Lorem ipsum dolor&quot;&gt;
108
- This address is already in use.
109
- &lt;/sonic-alert&gt;
110
- &lt;sonic-alert status=&quot;success&quot; class=&quot;mb-3&quot; dismissible background label=&quot;Lorem ipsum dolor&quot;&gt;
111
- This address is already in use.
112
- &lt;/sonic-alert&gt;
113
- &lt;sonic-alert status=&quot;error&quot; class=&quot;mb-3&quot; dismissible background label=&quot;Lorem ipsum dolor&quot;&gt;
114
- This address is already in use.
115
- &lt;/sonic-alert&gt;
116
- &lt;sonic-alert status=&quot;warning&quot; class=&quot;mb-3&quot; dismissible background label=&quot;Lorem ipsum dolor&quot;&gt;
117
- This address is already in use.
118
- &lt;/sonic-alert&gt;
119
- &lt;sonic-alert status=&quot;info&quot; class=&quot;mb-3&quot; dismissible background label=&quot;Lorem ipsum dolor&quot;&gt;
120
- This address is already in use.
121
- &lt;/sonic-alert&gt;
85
+ <pre><code>&lt;sonic-alert class=&quot;mb-3&quot; dismissible label=&quot;Lorem ipsum dolor&quot;&gt;
86
+ This address is already in use.
87
+ &lt;/sonic-alert&gt;
88
+ &lt;sonic-alert status=&quot;success&quot; class=&quot;mb-3&quot; dismissible label=&quot;Lorem ipsum dolor&quot;&gt;
89
+ This address is already in use.
90
+ &lt;/sonic-alert&gt;
91
+ &lt;sonic-alert status=&quot;error&quot; class=&quot;mb-3&quot; dismissible label=&quot;Lorem ipsum dolor&quot;&gt;
92
+ This address is already in use.
93
+ &lt;/sonic-alert&gt;
94
+ &lt;sonic-alert status=&quot;warning&quot; class=&quot;mb-3&quot; dismissible label=&quot;Lorem ipsum dolor&quot;&gt;
95
+ This address is already in use.
96
+ &lt;/sonic-alert&gt;
97
+ &lt;sonic-alert status=&quot;info&quot; class=&quot;mb-3&quot; dismissible label=&quot;Lorem ipsum dolor&quot;&gt;
98
+ This address is already in use.
99
+ &lt;/sonic-alert&gt;
122
100
  </code></pre>
123
101
  <h2 id="dismiss-forever">Dismiss forever</h2>
124
- <p>With <strong><code>dismissForever</code></strong>, dismissal is stored in <code>localStorage</code> (key <code>sonic-alert-dismissed</code>). A stable <strong><code>id</code></strong> on the element is <strong>required</strong>; without <code>id</code>, a warning is logged and nothing is persisted.</p>
125
- <pre><code>&lt;sonic-alert
126
- class=&quot;mb-3&quot;
127
- dismissible
128
- background
129
- dismissForever
130
- label=&quot;Lorem ipsum dolor&quot;
131
- id=&quot;addressUniqueId&quot;
132
- &gt;
133
- This address is already in use.
134
- &lt;/sonic-alert&gt;
102
+ <pre><code>&lt;sonic-alert class=&quot;mb-3&quot; dismissible dismissForever label=&quot;Lorem ipsum dolor&quot; id=&quot;addressUniqueId&quot;&gt;
103
+ This address is already in use.
104
+ &lt;/sonic-alert&gt;
135
105
  </code></pre>
136
- <h2 id="api-reference">API reference</h2>
137
- <table>
138
- <thead>
139
- <tr>
140
- <th>Attribute</th>
141
- <th>Values</th>
142
- <th>Description</th>
143
- </tr>
144
- </thead>
145
- <tbody><tr>
146
- <td><code>status</code></td>
147
- <td><code>default</code> · <code>info</code> · <code>success</code> · <code>warning</code> · <code>error</code></td>
148
- <td>Color and default icon</td>
149
- </tr>
150
- <tr>
151
- <td><code>label</code></td>
152
- <td>string</td>
153
- <td>Title (plain text)</td>
154
- </tr>
155
- <tr>
156
- <td><code>text</code></td>
157
- <td>string</td>
158
- <td>Short body (plain text), rendered before the slot</td>
159
- </tr>
160
- <tr>
161
- <td><code>size</code></td>
162
- <td><code>2xs</code> … <code>2xl</code></td>
163
- <td>Corner radius and typography</td>
164
- </tr>
165
- <tr>
166
- <td><code>background</code></td>
167
- <td>boolean</td>
168
- <td>Tinted background (<code>color-mix</code> on status color)</td>
169
- </tr>
170
- <tr>
171
- <td><code>dismissible</code></td>
172
- <td>boolean</td>
173
- <td>Close control; removes the element from the DOM</td>
174
- </tr>
175
- <tr>
176
- <td><code>dismissForever</code></td>
177
- <td>boolean</td>
178
- <td>Persists dismissal in <code>localStorage</code>; requires <strong><code>id</code></strong></td>
179
- </tr>
180
- <tr>
181
- <td><code>noIcon</code></td>
182
- <td>boolean</td>
183
- <td>Hides the icon (including custom <code>icon</code> slot content)</td>
184
- </tr>
185
- <tr>
186
- <td><code>announce</code></td>
187
- <td>boolean</td>
188
- <td><code>role=&quot;alert&quot;</code> / <code>aria-live</code> for dynamically injected content</td>
189
- </tr>
190
- </tbody></table>
191
- <table>
192
- <thead>
193
- <tr>
194
- <th>Slot</th>
195
- <th>Description</th>
196
- </tr>
197
- </thead>
198
- <tbody><tr>
199
- <td><em>(default)</em></td>
200
- <td>Message body (HTML, actions); rendered after <code>text</code></td>
201
- </tr>
202
- <tr>
203
- <td><code>icon</code></td>
204
- <td>Replaces the default <code>sonic-icon</code></td>
205
- </tr>
206
- </tbody></table>
207
106
 
208
107
  </article>
209
108
  </main>
@@ -3,9 +3,9 @@
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Alert messages — Concorde</title>
7
- <meta name="description" content="sonic-alert-messages renders a vertical stack of sonic-alert items from a messages array on a linked data provider (typical pattern: submitResultDataProvider after a form submit). Only entries with ty">
8
- <meta name="keywords" content="Concorde, supersoniks, core/components/ui/alert-messages/alert-messages, alert-messages, Alert messages, UI component, sonic-alert-messages, web component, sonic-alert, messages, submitResultDataProvider, type=&quot;public&quot;, announce, dataProvider, type">
6
+ <title>Concorde — Concorde</title>
7
+ <meta name="description" content="Concorde documentation: Concorde">
8
+ <meta name="keywords" content="Concorde, supersoniks, core/components/ui/alert-messages/alert-messages, alert-messages, UI component, sonic-alert-messages, web component">
9
9
  <meta name="concorde-doc-id" content="core/components/ui/alert-messages/alert-messages">
10
10
  <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/alert-messages/alert-messages.html">
11
11
  </head>
@@ -15,116 +15,8 @@
15
15
  </header>
16
16
  <main>
17
17
  <article>
18
- <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Alert messages</strong>. sonic-alert-messages renders a vertical stack of sonic-alert items from a messages array on a linked data provider (typical pattern: submitResultDataProvider after a form submit). Only entries with ty <span>Doc ID: <code>core/components/ui/alert-messages/alert-messages</code>. Keywords: Concorde, supersoniks, core/components/ui/alert-messages/alert-messages, alert-messages, Alert messages, UI component, sonic-alert-messages, web component, sonic-alert, messages, submitResultDataProvider, type=&quot;public&quot;, announce, dataProvider, type. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/alert-messages/alert-messages.html">https://concorde.supersoniks.org/crawl/core/components/ui/alert-messages/alert-messages.html</a>.</span></p>
19
- <h1 id="alert-messages">Alert messages</h1>
20
- <p><strong><code>sonic-alert-messages</code></strong> renders a vertical stack of <strong><code>sonic-alert</code></strong> items from a <strong><code>messages</code></strong> array on a linked <strong>data provider</strong> (typical pattern: <strong><code>submitResultDataProvider</code></strong> after a form submit). Only entries with <strong><code>type=&quot;public&quot;</code></strong> are shown. Each alert gets <strong><code>announce</code></strong> so screen readers pick up feedback after the request.</p>
21
- <h2 id="with-submit-result">With submit result</h2>
22
- <p>Bind <strong><code>dataProvider</code></strong> to the same publisher as <strong><code>submitResultDataProvider</code></strong>. API <strong><code>messages</code></strong> entries need <strong><code>type</code></strong>: <strong><code>public</code></strong>, plus <strong><code>content</code></strong> and optional <strong><code>status</code></strong> (<code>warning</code> · <code>success</code> · <code>error</code> · <code>info</code>).</p>
23
- <pre><code>&lt;sonic-scope
24
- serviceURL=&quot;/docs-mock-api&quot;
25
- formDataProvider=&quot;submit-example&quot;
26
- submitResultDataProvider=&quot;submit-example-result&quot;
27
- &gt;
28
- &lt;sonic-alert-messages dataProvider=&quot;submit-example-result&quot; background class=&quot;mb-4&quot;&gt;&lt;/sonic-alert-messages&gt;
29
- &lt;div class=&quot;grid gap-4 max-w-md&quot;&gt;
30
- &lt;sonic-input name=&quot;email&quot; type=&quot;email&quot; label=&quot;Email&quot; value=&quot;&quot;&gt;&lt;/sonic-input&gt;
31
- &lt;sonic-input name=&quot;password&quot; type=&quot;password&quot; label=&quot;Password&quot; value=&quot;&quot;&gt;&lt;/sonic-input&gt;
32
- &lt;sonic-submit endPoint=&quot;api/register&quot; onClick&gt;
33
- &lt;sonic-button type=&quot;primary&quot;&gt;Submit (empty fields → error messages)&lt;/sonic-button&gt;
34
- &lt;/sonic-submit&gt;
35
- &lt;/div&gt;
36
- &lt;/sonic-scope&gt;
37
- </code></pre>
38
- <h2 id="shared-alert-props">Shared alert props</h2>
39
- <p><strong><code>size</code></strong> · <strong><code>background</code></strong> and <strong><code>noIcon</code></strong> apply to every rendered <strong><code>sonic-alert</code></strong> in the list.</p>
40
- <pre><code>&lt;sonic-button
41
- size=&quot;sm&quot;
42
- variant=&quot;outline&quot;
43
- class=&quot;mb-3&quot;
44
- onclick=&quot;SonicPublisherManager.get(&#39;submit-example-result&#39;).set({ messages: [{ type: &#39;public&#39;, content: &#39;Compact inline feedback without icons.&#39;, status: &#39;info&#39; }] })&quot;
45
- &gt;
46
- Load sample messages
47
- &lt;/sonic-button&gt;
48
- &lt;sonic-alert-messages
49
- dataProvider=&quot;submit-example-result&quot;
50
- size=&quot;sm&quot;
51
- background
52
- noIcon
53
- &gt;&lt;/sonic-alert-messages&gt;
54
- </code></pre>
55
- <h2 id="message-shape">Message shape</h2>
56
- <p>Example JSON on the result publisher (or API response merged into it):</p>
57
- <pre><code class="language-typescript">{
58
- &quot;messages&quot;: [
59
- {
60
- &quot;type&quot;: &quot;public&quot;,
61
- &quot;content&quot;: &quot;The product has been added to your cart&quot;,
62
- &quot;status&quot;: &quot;success&quot;
63
- }
64
- ]
65
- }
66
- </code></pre>
67
- <h2 id="api-reference">API reference</h2>
68
- <table>
69
- <thead>
70
- <tr>
71
- <th>Attribute</th>
72
- <th>Values</th>
73
- <th>Description</th>
74
- </tr>
75
- </thead>
76
- <tbody><tr>
77
- <td><code>dataProvider</code></td>
78
- <td>publisher id</td>
79
- <td>Source object; <strong><code>messages</code></strong> array is auto-filled via <strong>Subscriber</strong></td>
80
- </tr>
81
- <tr>
82
- <td><code>size</code></td>
83
- <td><code>2xs</code> … <code>2xl</code> (default <code>md</code>)</td>
84
- <td>Passed to each <strong><code>sonic-alert</code></strong></td>
85
- </tr>
86
- <tr>
87
- <td><code>background</code></td>
88
- <td>boolean</td>
89
- <td>Tinted background on each alert</td>
90
- </tr>
91
- <tr>
92
- <td><code>noIcon</code></td>
93
- <td>boolean</td>
94
- <td>Hides icons on each alert</td>
95
- </tr>
96
- <tr>
97
- <td><code>messages</code></td>
98
- <td><code>Message[]</code></td>
99
- <td>Usually set by the publisher; each item uses <strong><code>content</code></strong> as alert <strong><code>text</code></strong></td>
100
- </tr>
101
- </tbody></table>
102
- <table>
103
- <thead>
104
- <tr>
105
- <th>Message field</th>
106
- <th>Values</th>
107
- <th>Description</th>
108
- </tr>
109
- </thead>
110
- <tbody><tr>
111
- <td><code>type</code></td>
112
- <td><code>public</code></td>
113
- <td>Required for the message to render</td>
114
- </tr>
115
- <tr>
116
- <td><code>content</code></td>
117
- <td>string</td>
118
- <td>Alert body (<strong><code>text</code></strong> on <strong><code>sonic-alert</code></strong>)</td>
119
- </tr>
120
- <tr>
121
- <td><code>status</code></td>
122
- <td><code>warning</code> · <code>success</code> · <code>error</code> · <code>info</code></td>
123
- <td>Alert <strong><code>status</code></strong>; defaults to <strong><code>default</code></strong> when omitted</td>
124
- </tr>
125
- </tbody></table>
126
- <p>No slots — alerts are generated from <strong><code>messages</code></strong>.</p>
127
-
18
+ <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Concorde</strong>. Concorde documentation: Concorde <span>Doc ID: <code>core/components/ui/alert-messages/alert-messages</code>. Keywords: Concorde, supersoniks, core/components/ui/alert-messages/alert-messages, alert-messages, UI component, sonic-alert-messages, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/alert-messages/alert-messages.html">https://concorde.supersoniks.org/crawl/core/components/ui/alert-messages/alert-messages.html</a>.</span></p>
19
+
128
20
  </article>
129
21
  </main>
130
22
  </body>