@supersoniks/concorde 5.0.3 → 5.0.4

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 (106) hide show
  1. package/.github/workflows/ci.yml +21 -0
  2. package/.github-export-ignore +30 -0
  3. package/CONTRIBUTING.md +59 -0
  4. package/DEV.md +54 -0
  5. package/LICENSE +21 -0
  6. package/OPEN_SOURCE_CHECKPOINT.md +133 -0
  7. package/build-infos.json +1 -1
  8. package/concorde-core.bundle.js +66 -66
  9. package/concorde-core.es.js +1368 -1318
  10. package/dist/concorde-core.bundle.js +66 -66
  11. package/dist/concorde-core.es.js +1368 -1318
  12. package/docs/assets/{index-BnK6OS7w.js → index-D8MVWqY6.js} +1144 -1008
  13. package/docs/assets/index-DiD0qYvE.css +1 -0
  14. package/docs/crawl/core/components/ui/alert/alert.html +71 -101
  15. package/docs/crawl/core/components/ui/badge/badge.html +77 -106
  16. package/docs/crawl/core/components/ui/button/button.html +0 -1
  17. package/docs/crawl/core/components/ui/card/card.html +68 -112
  18. package/docs/crawl/core/components/ui/form/input/input.html +3 -3
  19. package/docs/crawl/core/components/ui/form/textarea/textarea.html +3 -3
  20. package/docs/crawl/core/components/ui/image/image.html +56 -132
  21. package/docs/crawl/core/components/ui/link/link.html +4 -4
  22. package/docs/crawl/core/components/ui/pop/pop.html +3 -79
  23. package/docs/crawl/docs/_getting-started/concorde-outside.html +3 -3
  24. package/docs/crawl/hubs/form-components.html +4 -4
  25. package/docs/index.html +5 -5
  26. package/docs/llms-full.txt +97 -281
  27. package/docs/llms.txt +8 -8
  28. package/docs/src/core/components/functional/fetch/fetch.md +0 -0
  29. package/docs/src/core/components/functional/if/if.md +0 -0
  30. package/docs/src/core/components/functional/list/list.md +0 -0
  31. package/docs/src/core/components/functional/router/router.md +0 -0
  32. package/docs/src/core/components/functional/sdui/sdui.md +0 -0
  33. package/docs/src/core/components/functional/states/states.md +0 -0
  34. package/docs/src/core/components/functional/submit/submit.md +0 -0
  35. package/docs/src/core/components/ui/alert/alert.md +72 -128
  36. package/docs/src/core/components/ui/badge/badge.md +78 -126
  37. package/docs/src/core/components/ui/button/button.md +0 -1
  38. package/docs/src/core/components/ui/captcha/captcha.md +0 -0
  39. package/docs/src/core/components/ui/card/card.md +65 -120
  40. package/docs/src/core/components/ui/form/input/input.md +1 -1
  41. package/docs/src/core/components/ui/form/radio/radio.md +0 -0
  42. package/docs/src/core/components/ui/form/select/select.md +0 -0
  43. package/docs/src/core/components/ui/form/switch/switch.md +0 -0
  44. package/docs/src/core/components/ui/form/textarea/textarea.md +1 -1
  45. package/docs/src/core/components/ui/image/image.md +53 -147
  46. package/docs/src/core/components/ui/link/link.md +2 -2
  47. package/docs/src/core/components/ui/loader/loader.md +0 -0
  48. package/docs/src/core/components/ui/menu/menu.md +0 -0
  49. package/docs/src/core/components/ui/modal/modal.md +0 -0
  50. package/docs/src/core/components/ui/pop/pop.md +1 -105
  51. package/docs/src/core/components/ui/table/table.md +0 -0
  52. package/docs/src/docs/_core-concept/subscriber.md +0 -0
  53. package/docs/src/docs/_getting-started/concorde-outside.md +3 -3
  54. package/docs/src/docs/_getting-started/my-first-subscriber.md +0 -0
  55. package/docs/src/docs/_getting-started/pubsub.md +0 -0
  56. package/docs/src/docs/_getting-started/start.md +0 -0
  57. package/docs/src/docs/search/docs-search.json +25 -655
  58. package/docs/src/tsconfig.declarations.json +22 -0
  59. package/docs/src/tsconfig.emit.json +23 -0
  60. package/docs/src/tsconfig.json +3 -45
  61. package/gitlab/job_github_mirror.sh +39 -0
  62. package/gitlab/job_tests.sh +0 -0
  63. package/package.json +1 -1
  64. package/scripts/github-export.mjs +150 -0
  65. package/scripts/post-build-docs.js +0 -0
  66. package/scripts/post-build.mjs +0 -0
  67. package/src/core/components/functional/fetch/fetch.md +0 -0
  68. package/src/core/components/functional/if/if.md +0 -0
  69. package/src/core/components/functional/list/list.demo.ts +0 -0
  70. package/src/core/components/functional/list/list.md +0 -0
  71. package/src/core/components/functional/router/router.md +0 -0
  72. package/src/core/components/functional/router/router.ts +0 -0
  73. package/src/core/components/functional/sdui/sdui.md +0 -0
  74. package/src/core/components/functional/states/states.md +0 -0
  75. package/src/core/components/functional/submit/submit.md +0 -0
  76. package/src/core/components/functional/subscriber/subscriber.ts +0 -0
  77. package/src/core/components/ui/_css/size.ts +0 -0
  78. package/src/core/components/ui/captcha/altchaStyles.ts +0 -0
  79. package/src/core/components/ui/captcha/captcha.md +0 -0
  80. package/src/core/components/ui/form/radio/radio.md +0 -0
  81. package/src/core/components/ui/form/select/select.md +0 -0
  82. package/src/core/components/ui/form/switch/switch.md +0 -0
  83. package/src/core/components/ui/loader/loader.md +0 -0
  84. package/src/core/components/ui/menu/menu.md +0 -0
  85. package/src/core/components/ui/modal/modal.md +0 -0
  86. package/src/core/components/ui/table/table-caption.ts +0 -0
  87. package/src/core/components/ui/table/table.md +0 -0
  88. package/src/core/decorators/subscriber/ancestorAttribute.spec.ts +26 -0
  89. package/src/core/decorators/subscriber/ancestorAttribute.ts +3 -4
  90. package/src/core/mixins/Subscriber.ts +0 -0
  91. package/src/core/utils/AncestorAttributeObserver.ts +183 -70
  92. package/src/core/utils/DataBindObserver.ts +0 -0
  93. package/src/core/utils/Objects.ts +0 -0
  94. package/src/core/utils/route.ts +0 -0
  95. package/src/css.d.ts +19 -0
  96. package/src/docs/_core-concept/subscriber.md +0 -0
  97. package/src/docs/_decorators/ancestor-attribute.md +3 -2
  98. package/src/docs/_getting-started/my-first-subscriber.md +0 -0
  99. package/src/docs/_getting-started/pubsub.md +0 -0
  100. package/src/docs/_getting-started/start.md +0 -0
  101. package/src/docs/example/users.ts +0 -0
  102. package/src/docs/search/page.ts +0 -0
  103. package/src/tsconfig.declarations.json +22 -0
  104. package/src/tsconfig.emit.json +23 -0
  105. package/src/tsconfig.tsbuildinfo +1 -1
  106. package/docs/assets/index--GpD7R7a.css +0 -1
@@ -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="Inline message in the page: title (label), body (text or default slot), icon from status. For HTML or actions, use the slot instead of label / text (plain text only).">
8
- <meta name="keywords" content="Concorde, supersoniks, core/components/ui/alert/alert, alert, Alert, UI component, sonic-alert, web component, label, text, status, default, info, success, warning">
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,123 +15,93 @@
15
15
  </header>
16
16
  <main>
17
17
  <article>
18
- <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Alert</strong>. Inline message in the page: title (label), body (text or default slot), icon from status. For HTML or actions, use the slot instead of label / text (plain text only). <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, status, default, info, success, warning. 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>Inline message in the page: title (<code>label</code>), body (<code>text</code> or default slot), icon from <code>status</code>. For HTML or actions, use the slot instead of <code>label</code> / <code>text</code> (plain text only).</p>
21
- <p>Use <strong><code>status</code></strong>: <code>default</code>, <code>info</code>, <code>success</code>, <code>warning</code>, <code>error</code>.</p>
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
106
 
137
107
  </article>
@@ -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>Badge — Concorde</title>
7
- <meta name="description" content="A non-interactive pill for labels, counts, or highlights (counter, status, category). The API mirrors sonic-button (type, variant, size) without focus or click states.">
8
- <meta name="keywords" content="Concorde, supersoniks, core/components/ui/badge/badge, badge, Badge, UI component, sonic-badge, web component, sonic-button, type, variant, size, --sc-primary, --sc-danger, default, base-100, neutral">
7
+ <meta name="description" content="Messages &lt;sonic-badge slot=&quot;suffix&quot; type=&quot;danger&quot; size=&quot;xs&quot;&gt;5&lt;/sonic-badge&gt;">
8
+ <meta name="keywords" content="Concorde, supersoniks, core/components/ui/badge/badge, badge, Badge, UI component, sonic-badge, web component">
9
9
  <meta name="concorde-doc-id" content="core/components/ui/badge/badge">
10
10
  <link rel="canonical" href="https://concorde.supersoniks.org/crawl/core/components/ui/badge/badge.html">
11
11
  </head>
@@ -15,131 +15,102 @@
15
15
  </header>
16
16
  <main>
17
17
  <article>
18
- <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Badge</strong>. A non-interactive pill for labels, counts, or highlights (counter, status, category). The API mirrors sonic-button (type, variant, size) without focus or click states. <span>Doc ID: <code>core/components/ui/badge/badge</code>. Keywords: Concorde, supersoniks, core/components/ui/badge/badge, badge, Badge, UI component, sonic-badge, web component, sonic-button, type, variant, size, --sc-primary, --sc-danger, default, base-100, neutral. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/badge/badge.html">https://concorde.supersoniks.org/crawl/core/components/ui/badge/badge.html</a>.</span></p>
18
+ <p class="doc-lead" id="doc-summary"><strong>Concorde UI component — Badge</strong>. Messages &lt;sonic-badge slot=&quot;suffix&quot; type=&quot;danger&quot; size=&quot;xs&quot;&gt;5&lt;/sonic-badge&gt; <span>Doc ID: <code>core/components/ui/badge/badge</code>. Keywords: Concorde, supersoniks, core/components/ui/badge/badge, badge, Badge, UI component, sonic-badge, web component. URL: <a href="https://concorde.supersoniks.org/crawl/core/components/ui/badge/badge.html">https://concorde.supersoniks.org/crawl/core/components/ui/badge/badge.html</a>.</span></p>
19
19
  <h1 id="badge">Badge</h1>
20
- <p>A <strong>non-interactive</strong> pill for labels, counts, or highlights (counter, status, category). The API mirrors <code>sonic-button</code> (<code>type</code>, <code>variant</code>, <code>size</code>) without focus or click states.</p>
21
- <p>Colors come from theme tokens (<code>--sc-primary</code>, <code>--sc-danger</code>, …) or the semantic <code>type</code> values below. </p>
22
20
  <h2 id="type">Type</h2>
23
- <p><code>default</code> — subtle background (<code>base-100</code>). <code>neutral</code> — dark fill (<code>base-content</code>) with light text, useful on light backgrounds.</p>
24
- <pre><code>&lt;div class=&quot;flex flex-wrap gap-2&quot;&gt;
25
- &lt;sonic-badge&gt;Default&lt;/sonic-badge&gt;
26
- &lt;sonic-badge type=&quot;primary&quot;&gt;Primary&lt;/sonic-badge&gt;
27
- &lt;sonic-badge type=&quot;neutral&quot;&gt;Neutral&lt;/sonic-badge&gt;
28
- &lt;sonic-badge type=&quot;warning&quot;&gt;Warning&lt;/sonic-badge&gt;
29
- &lt;sonic-badge type=&quot;info&quot;&gt;Info&lt;/sonic-badge&gt;
30
- &lt;sonic-badge type=&quot;success&quot;&gt;Success&lt;/sonic-badge&gt;
31
- &lt;sonic-badge type=&quot;danger&quot;&gt;Danger&lt;/sonic-badge&gt;
32
- &lt;/div&gt;
21
+ <pre><code>&lt;sonic-badge&gt;Default&lt;/sonic-badge&gt;
22
+ &lt;sonic-badge type=&quot;primary&quot;&gt;Primary&lt;/sonic-badge&gt;
23
+ &lt;sonic-badge type=&quot;neutral&quot;&gt;Neutral&lt;/sonic-badge&gt;
24
+ &lt;sonic-badge type=&quot;warning&quot;&gt;Warning&lt;/sonic-badge&gt;
25
+ &lt;sonic-badge type=&quot;info&quot;&gt;Info&lt;/sonic-badge&gt;
26
+ &lt;sonic-badge type=&quot;success&quot;&gt;Success&lt;/sonic-badge&gt;
27
+ &lt;sonic-badge type=&quot;danger&quot;&gt;Danger&lt;/sonic-badge&gt;
28
+ &lt;sonic-badge type=&quot;contrast&quot;&gt;Contrast&lt;/sonic-badge&gt;
33
29
  </code></pre>
34
- <h2 id="variant">Variant</h2>
35
- <p><code>outline</code> — border and text in the <code>type</code> color. <code>ghost</code> — text only, no padding (except in forced-colors mode).</p>
36
30
  <h2 id="outline">Outline</h2>
37
31
  <pre><code>&lt;div class=&quot;flex items-center flex-wrap gap-3&quot;&gt;
38
- &lt;sonic-badge variant=&quot;outline&quot;&gt;Default&lt;/sonic-badge&gt;
39
- &lt;sonic-badge variant=&quot;outline&quot; type=&quot;primary&quot;&gt;Primary&lt;/sonic-badge&gt;
40
- &lt;sonic-badge variant=&quot;outline&quot; type=&quot;neutral&quot;&gt;Neutral&lt;/sonic-badge&gt;
41
- &lt;sonic-badge variant=&quot;outline&quot; type=&quot;warning&quot;&gt;Warning&lt;/sonic-badge&gt;
42
- &lt;sonic-badge variant=&quot;outline&quot; type=&quot;info&quot;&gt;Info&lt;/sonic-badge&gt;
43
- &lt;sonic-badge variant=&quot;outline&quot; type=&quot;success&quot;&gt;Success&lt;/sonic-badge&gt;
44
- &lt;sonic-badge variant=&quot;outline&quot; type=&quot;danger&quot;&gt;Danger&lt;/sonic-badge&gt;
45
- &lt;/div&gt;
32
+ &lt;sonic-badge variant=&quot;outline&quot;&gt;Default&lt;/sonic-badge&gt;
33
+ &lt;sonic-badge variant=&quot;outline&quot; type=&quot;primary&quot;&gt;Primary&lt;/sonic-badge&gt;
34
+ &lt;sonic-badge variant=&quot;outline&quot; type=&quot;neutral&quot;&gt;Neutral&lt;/sonic-badge&gt;
35
+ &lt;sonic-badge variant=&quot;outline&quot; type=&quot;warning&quot;&gt;Warning&lt;/sonic-badge&gt;
36
+ &lt;sonic-badge variant=&quot;outline&quot; type=&quot;info&quot;&gt;Info&lt;/sonic-badge&gt;
37
+ &lt;sonic-badge variant=&quot;outline&quot; type=&quot;success&quot;&gt;Success&lt;/sonic-badge&gt;
38
+ &lt;sonic-badge variant=&quot;outline&quot; type=&quot;danger&quot;&gt;Danger&lt;/sonic-badge&gt;
39
+ &lt;sonic-badge variant=&quot;outline&quot; type=&quot;contrast&quot;&gt;Contrast&lt;/sonic-badge&gt;
40
+ &lt;/div&gt;
46
41
  </code></pre>
47
42
  <h2 id="ghost">Ghost</h2>
48
43
  <pre><code>&lt;div class=&quot;flex items-center flex-wrap gap-3&quot;&gt;
49
- &lt;sonic-badge variant=&quot;ghost&quot;&gt;Default&lt;/sonic-badge&gt;
50
- &lt;sonic-badge variant=&quot;ghost&quot; type=&quot;primary&quot;&gt;Primary&lt;/sonic-badge&gt;
51
- &lt;sonic-badge variant=&quot;ghost&quot; type=&quot;neutral&quot;&gt;Neutral&lt;/sonic-badge&gt;
52
- &lt;sonic-badge variant=&quot;ghost&quot; type=&quot;warning&quot;&gt;Warning&lt;/sonic-badge&gt;
53
- &lt;sonic-badge variant=&quot;ghost&quot; type=&quot;info&quot;&gt;Info&lt;/sonic-badge&gt;
54
- &lt;sonic-badge variant=&quot;ghost&quot; type=&quot;success&quot;&gt;Success&lt;/sonic-badge&gt;
55
- &lt;sonic-badge variant=&quot;ghost&quot; type=&quot;danger&quot;&gt;Danger&lt;/sonic-badge&gt;
56
- &lt;/div&gt;
44
+ &lt;sonic-badge variant=&quot;ghost&quot;&gt;Default&lt;/sonic-badge&gt;
45
+ &lt;sonic-badge variant=&quot;ghost&quot; type=&quot;primary&quot;&gt;Primary&lt;/sonic-badge&gt;
46
+ &lt;sonic-badge variant=&quot;ghost&quot; type=&quot;neutral&quot;&gt;Neutral&lt;/sonic-badge&gt;
47
+ &lt;sonic-badge variant=&quot;ghost&quot; type=&quot;warning&quot;&gt;Warning&lt;/sonic-badge&gt;
48
+ &lt;sonic-badge variant=&quot;ghost&quot; type=&quot;info&quot;&gt;Info&lt;/sonic-badge&gt;
49
+ &lt;sonic-badge variant=&quot;ghost&quot; type=&quot;success&quot;&gt;Success&lt;/sonic-badge&gt;
50
+ &lt;sonic-badge variant=&quot;ghost&quot; type=&quot;danger&quot;&gt;Danger&lt;/sonic-badge&gt;
51
+ &lt;sonic-badge variant=&quot;ghost&quot; type=&quot;contrast&quot;&gt;Contrast&lt;/sonic-badge&gt;
52
+ &lt;/div&gt;
57
53
  </code></pre>
58
54
  <h2 id="size">Size</h2>
59
- <p>Default size is <code>md</code> (omit the <code>size</code> attribute). Typography and padding follow <code>sonic-button</code>.</p>
60
- <pre><code>&lt;div class=&quot;flex flex-wrap items-center gap-2&quot;&gt;
61
- &lt;sonic-badge size=&quot;2xs&quot;&gt;2Xs&lt;/sonic-badge&gt;
62
- &lt;sonic-badge size=&quot;xs&quot;&gt;Xs&lt;/sonic-badge&gt;
63
- &lt;sonic-badge size=&quot;sm&quot;&gt;Sm&lt;/sonic-badge&gt;
64
- &lt;sonic-badge&gt;Md&lt;/sonic-badge&gt;
65
- &lt;sonic-badge size=&quot;lg&quot;&gt;Lg&lt;/sonic-badge&gt;
66
- &lt;sonic-badge size=&quot;xl&quot;&gt;Xl&lt;/sonic-badge&gt;
67
- &lt;sonic-badge size=&quot;2xl&quot;&gt;2Xl&lt;/sonic-badge&gt;
68
- &lt;/div&gt;
69
- </code></pre>
70
- <h2 id="prefix-and-suffix-slots">Prefix and suffix slots</h2>
71
- <p>Icons or short text before / after the main label.</p>
72
- <pre><code>&lt;sonic-badge type=&quot;info&quot; size=&quot;sm&quot;&gt;
73
- &lt;sonic-icon slot=&quot;prefix&quot; name=&quot;info-empty&quot; library=&quot;iconoir&quot;&gt;&lt;/sonic-icon&gt;
74
- Info
75
- &lt;/sonic-badge&gt;
76
- &lt;sonic-badge type=&quot;success&quot;&gt;
77
- Verified
78
- &lt;sonic-icon slot=&quot;suffix&quot; name=&quot;check&quot; library=&quot;iconoir&quot;&gt;&lt;/sonic-icon&gt;
79
- &lt;/sonic-badge&gt;
55
+ <pre><code>&lt;sonic-badge size=&quot;2xs&quot;&gt;2Xs badge&lt;/sonic-badge&gt;
56
+ &lt;sonic-badge size=&quot;xs&quot;&gt;Xs badge&lt;/sonic-badge&gt;
57
+ &lt;sonic-badge size=&quot;sm&quot;&gt;Sm badge&lt;/sonic-badge&gt;
58
+ &lt;sonic-badge&gt;Md badge&lt;/sonic-badge&gt;
59
+ &lt;sonic-badge size=&quot;lg&quot;&gt;Lg badge&lt;/sonic-badge&gt;
60
+ &lt;sonic-badge size=&quot;xl&quot;&gt;Xl badge&lt;/sonic-badge&gt;
61
+ &lt;sonic-badge size=&quot;2xl&quot;&gt;2Xl badge&lt;/sonic-badge&gt;
80
62
  </code></pre>
81
63
  <h2 id="empty-badges">Empty badges</h2>
82
- <p>Badge with no text (visual dot). <code>min-width</code> / <code>min-height</code> keep a readable shape.</p>
83
64
  <pre><code>&lt;div class=&quot;flex items-center flex-wrap gap-3&quot;&gt;
84
- &lt;sonic-badge type=&quot;danger&quot; size=&quot;2xs&quot;&gt;&lt;/sonic-badge&gt;
85
- &lt;sonic-badge type=&quot;danger&quot; size=&quot;xs&quot;&gt;&lt;/sonic-badge&gt;
86
- &lt;sonic-badge type=&quot;danger&quot; size=&quot;sm&quot;&gt;&lt;/sonic-badge&gt;
87
- &lt;sonic-badge type=&quot;danger&quot;&gt;&lt;/sonic-badge&gt;
88
- &lt;sonic-badge type=&quot;danger&quot; size=&quot;lg&quot;&gt;&lt;/sonic-badge&gt;
89
- &lt;sonic-badge type=&quot;danger&quot; size=&quot;xl&quot;&gt;&lt;/sonic-badge&gt;
90
- &lt;sonic-badge type=&quot;danger&quot; size=&quot;2xl&quot;&gt;&lt;/sonic-badge&gt;
91
- &lt;/div&gt;
65
+ &lt;sonic-badge type=&quot;danger&quot; size=&quot;2xs&quot;&gt;&lt;/sonic-badge&gt;
66
+ &lt;sonic-badge type=&quot;danger&quot; size=&quot;xs&quot;&gt;&lt;/sonic-badge&gt;
67
+ &lt;sonic-badge type=&quot;danger&quot; size=&quot;sm&quot;&gt;&lt;/sonic-badge&gt;
68
+ &lt;sonic-badge type=&quot;danger&quot;&gt;&lt;/sonic-badge&gt;
69
+ &lt;sonic-badge type=&quot;danger&quot; size=&quot;lg&quot;&gt;&lt;/sonic-badge&gt;
70
+ &lt;sonic-badge type=&quot;danger&quot; size=&quot;xl&quot;&gt;&lt;/sonic-badge&gt;
71
+ &lt;sonic-badge type=&quot;danger&quot; size=&quot;2xl&quot;&gt;&lt;/sonic-badge&gt;
72
+ &lt;/div&gt;
92
73
  </code></pre>
93
74
  <h2 id="ellipsis">Ellipsis</h2>
94
- <p>With <code>ellipsis</code>, long labels truncate. The parent must constrain width (<code>max-width</code>, grid, etc.).</p>
95
- <pre><code>&lt;div class=&quot;grid grid-cols-2 gap-4 max-w-xl&quot;&gt;
96
- &lt;sonic-badge ellipsis size=&quot;sm&quot; variant=&quot;outline&quot;&gt;
97
- &lt;sonic-icon slot=&quot;prefix&quot; name=&quot;info-empty&quot; library=&quot;iconoir&quot;&gt;&lt;/sonic-icon&gt;
98
- Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod.
99
- &lt;/sonic-badge&gt;
100
- &lt;sonic-badge ellipsis size=&quot;sm&quot;&gt;
101
- &lt;sonic-icon slot=&quot;prefix&quot; name=&quot;info-empty&quot; library=&quot;iconoir&quot;&gt;&lt;/sonic-icon&gt;
102
- Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod.
103
- &lt;/sonic-badge&gt;
75
+ <pre><code>&lt;div class=&quot;grid grid-cols-3 gap-4&quot; &gt;
76
+ &lt;sonic-badge ellipsis size=&quot;sm&quot; variant=&quot;outline&quot; &gt;
77
+ &lt;sonic-icon slot=&quot;prefix&quot; name=&quot;info-empty&quot; library=&quot;iconoir&quot;&gt;&lt;/sonic-icon&gt; Lorem ipsum dolor sit consectetur adipiscing elit. Lorem ipsum dolor sit consectetur adipiscing elit.&lt;/sonic-badge&gt;
78
+ &lt;sonic-badge ellipsis size=&quot;sm&quot; &gt; &lt;sonic-icon slot=&quot;prefix&quot; name=&quot;info-empty&quot; library=&quot;iconoir&quot;&gt;&lt;/sonic-icon&gt; Lorem ipsum dolor sit consectetur adipiscing elit. Lorem ipsum dolor sit consectetur adipiscing elit.&lt;/sonic-badge&gt;
104
79
  &lt;/div&gt;
105
80
  </code></pre>
106
81
  <h2 id="badge-in-button">Badge in button</h2>
107
- <p>Count inside a button (<code>slot=&quot;suffix&quot;</code>) or a badge absolutely positioned on a button / icon.</p>
108
82
  <pre><code>&lt;div class=&quot;flex flex-wrap gap-4 items-center&quot;&gt;
109
- &lt;sonic-button type=&quot;default&quot;&gt;
110
- Messages &lt;sonic-badge slot=&quot;suffix&quot; type=&quot;danger&quot; size=&quot;xs&quot;&gt;5&lt;/sonic-badge&gt;
83
+ &lt;sonic-button type=&quot;default&quot;&gt;
84
+ Messages &lt;sonic-badge slot=&quot;suffix&quot; type=&quot;danger&quot; size=&quot;xs&quot;&gt;5&lt;/sonic-badge&gt;
85
+ &lt;/sonic-button&gt;
86
+ &lt;div class=&quot;relative inline-block&quot;&gt;
87
+ &lt;sonic-button type=&quot;success&quot; class=&quot;relative&quot;&gt; Mon compte &lt;/sonic-button&gt;
88
+ &lt;sonic-badge type=&quot;danger&quot; size=&quot;xs&quot; class=&quot;absolute right-1 top-0 pe-none transform -translate-y-1/2&quot;
89
+ &gt;12&lt;/sonic-badge
90
+ &gt;
91
+ &lt;/div&gt;
92
+ &lt;div class=&quot;relative inline-block&quot;&gt;
93
+ &lt;sonic-button type=&quot;neutral&quot; shape=&quot;circle&quot; variant=&quot;outline&quot;
94
+ &gt;&lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot;&gt;&lt;/sonic-icon&gt;
95
+ &lt;/sonic-button&gt;
96
+ &lt;sonic-badge
97
+ type=&quot;danger&quot;
98
+ size=&quot;xs&quot;
99
+ class=&quot;absolute right-1 bottom-1 pe-none transform translate-y-1/2 translate-x-1/2&quot;
100
+ &gt;33&lt;/sonic-badge
101
+ &gt;
102
+ &lt;/div&gt;
103
+ &lt;div class=&quot;relative inline-block&quot;&gt;
104
+ &lt;sonic-button type=&quot;neutral&quot; shape=&quot;circle&quot; variant=&quot;outline&quot;
105
+ &gt;&lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot;&gt;&lt;/sonic-icon&gt;
111
106
  &lt;/sonic-button&gt;
112
- &lt;div class=&quot;relative inline-block&quot;&gt;
113
- &lt;sonic-button type=&quot;success&quot; class=&quot;relative&quot;&gt;My account&lt;/sonic-button&gt;
114
- &lt;sonic-badge
115
- type=&quot;danger&quot;
116
- size=&quot;xs&quot;
117
- class=&quot;absolute right-1 top-0 pe-none transform -translate-y-1/2&quot;
118
- &gt;12&lt;/sonic-badge
119
- &gt;
120
- &lt;/div&gt;
121
- &lt;div class=&quot;relative inline-block&quot;&gt;
122
- &lt;sonic-button type=&quot;neutral&quot; shape=&quot;circle&quot; variant=&quot;outline&quot;&gt;
123
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot;&gt;&lt;/sonic-icon&gt;
124
- &lt;/sonic-button&gt;
125
- &lt;sonic-badge
126
- type=&quot;danger&quot;
127
- size=&quot;xs&quot;
128
- class=&quot;absolute right-1 bottom-1 pe-none transform translate-y-1/2 translate-x-1/2&quot;
129
- &gt;33&lt;/sonic-badge
130
- &gt;
131
- &lt;/div&gt;
132
- &lt;div class=&quot;relative inline-block&quot;&gt;
133
- &lt;sonic-button type=&quot;neutral&quot; shape=&quot;circle&quot; variant=&quot;outline&quot;&gt;
134
- &lt;sonic-icon library=&quot;iconoir&quot; name=&quot;user&quot;&gt;&lt;/sonic-icon&gt;
135
- &lt;/sonic-button&gt;
136
- &lt;sonic-badge
137
- type=&quot;danger&quot;
138
- size=&quot;xs&quot;
139
- class=&quot;absolute right-2 bottom-2 pe-none transform translate-y-1/2 translate-x-1/2&quot;
140
- &gt;&lt;/sonic-badge&gt;
141
- &lt;/div&gt;
107
+ &lt;sonic-badge
108
+ type=&quot;danger&quot;
109
+ size=&quot;xs&quot;
110
+ class=&quot;absolute right-2 bottom-2 pe-none transform translate-y-1/2 translate-x-1/2&quot;
111
+ &gt;&lt;/sonic-badge&gt;
142
112
  &lt;/div&gt;
113
+ &lt;/div&gt;
143
114
  </code></pre>
144
115
 
145
116
  </article>
@@ -66,7 +66,6 @@
66
66
  <p>The length of the button depends on the size of its content</p>
67
67
  <pre><code>&lt;sonic-button loading&gt;&lt;/sonic-button&gt;
68
68
  &lt;sonic-button loading&gt;Loading button&lt;/sonic-button&gt;
69
- &lt;sonic-button loading&gt;&lt;span slot=&quot;prefix&quot;&gt;🚀&lt;/span&gt;Loading with prefix&lt;span slot=&quot;suffix&quot;&gt;😂&lt;/span&gt;&lt;/sonic-button&gt;
70
69
  </code></pre>
71
70
  <h2 id="swap">Swap</h2>
72
71
  <pre><code>&lt;sonic-button formDataProvider=&quot;button_swap_example&quot; name=&quot;youpi&quot; value=&quot;youpla&quot; type=&quot;primary&quot; shape=&quot;circle&quot; variant=&quot;outline&quot; class=&quot;mr-4&quot;&gt;