@nordcode/ui 1.1.6 → 1.2.0

package/out/complete_configless.css

@@ -136,6 +136,10 @@
   }
 
   :where(body) {
+    -webkit-text-decoration-skip-ink: auto;
+    text-decoration-skip-ink: auto;
+    font-optical-sizing: auto;
+    font-kerning: normal;
     min-block-size: 100vh;
   }
 
@@ -148,8 +152,6 @@
   }
 
   :where(a:not([class])) {
-    -webkit-text-decoration-skip-ink: auto;
-    text-decoration-skip-ink: auto;
     color: currentColor;
   }
 
@@ -190,11 +192,6 @@
     letter-spacing: inherit;
   }
 
-  :where(p) {
-    text-wrap: pretty;
-    max-inline-size: var(--measure-base);
-  }
-
   :where(html):has(dialog:modal) {
     scrollbar-gutter: stable;
     overflow: hidden;
@@ -224,7 +221,7 @@
   }
 
   :where(dl:not([class]), .nc-description-list) {
-    word-break: break-word;
+    overflow-wrap: anywhere;
     grid-template-columns: .25fr .75fr;
     align-items: flex-start;
     row-gap: .5lh;
@@ -280,13 +277,13 @@
   :where(figcaption) {
     color: var(--color-surface-subtle);
     background-color: var(--color-text-base);
-    padding: .3lh 1ch;
+    padding: .25lh 1ch;
     display: block;
   }
 
   :where(details) {
     --p-x-details: 2ch;
-    --p-y-details: .8lh;
+    --p-y-details: .75lh;
     --b-r-details: var(--border-radius-medium);
     background-color: var(--color-surface-muted);
     border-radius: var(--b-r-details);
@@ -442,6 +439,9 @@
   :where(abbr) {
     -webkit-text-decoration-color: var(--color-brand-primary-base);
     text-decoration-color: var(--color-brand-primary-base);
+    font-variant-numeric: oldstyle-nums;
+    font-size: 110%;
+    font-variant-caps: all-small-caps;
   }
 
   :where([aria-disabled="true"], .disabled, :disabled) {
@@ -468,8 +468,7 @@
     tab-size: 4;
     text-align: left;
     word-spacing: normal;
-    word-break: normal;
-    word-wrap: normal;
+    overflow-wrap: normal;
     max-inline-size: fit-content;
     padding-block: .125lh;
     font-style: normal;
@@ -581,6 +580,10 @@
     background-color: var(--color-surface-muted);
   }
 
+  :where(td, math, time[datetime*=":"]) {
+    font-variant-numeric: tabular-nums lining-nums slashed-zero;
+  }
+
   :target {
     scroll-margin-block-start: 2ex;
   }
@@ -613,7 +616,72 @@
   }
 
   :where(li > :is(ul, ol)) {
-    margin-block-start: .3lh;
+    margin-block-start: .25lh;
+  }
+
+  @supports (font-variant-position: sub) {
+    :where(sub) {
+      vertical-align: baseline;
+      font-size: 100%;
+      line-height: inherit;
+      font-variant-position: sub;
+    }
+  }
+
+  @supports (font-variant-position: super) {
+    :where(sup) {
+      vertical-align: baseline;
+      font-size: 100%;
+      line-height: inherit;
+      font-variant-position: super;
+    }
+  }
+
+  :lang(en) > * {
+    quotes: "“" "”" "‘" "’";
+  }
+
+  :lang(de) > * {
+    quotes: "„" "“" "‚" "‘";
+  }
+
+  :where() {
+    content: open-quote;
+    content: close-quote;
+    content: "“";
+    content: "”";
+    margin-inline-start: -.87ch;
+  }
+
+  :where(.quoted p) {
+    hanging-punctuation: first last;
+  }
+
+  @supports (hanging-punctuation: first last) {
+    :where() {
+      margin-inline-start: 0;
+    }
+  }
+
+  :where(.prose) {
+    -webkit-hyphens: auto;
+    hyphens: auto;
+    hyphenate-limit-chars: 7 4 3;
+    hyphenate-limit-lines: 2;
+    hyphenate-limit-zone: 8%;
+    hyphenate-limit-last: always;
+    text-wrap: pretty;
+  }
+
+  :where(.prose p) {
+    text-wrap: pretty;
+    font-variant-numeric: oldstyle-nums proportional-nums;
+    max-inline-size: var(--measure-base);
+  }
+
+  :where(.prose pre, .prose code, .prose var, .prose samp, .prose kbd, .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6) {
+    -webkit-hyphens: manual;
+    hyphens: manual;
   }
 }
 
@@ -671,7 +739,7 @@
   }
 
   :where(.nc-flow) > * + * {
-    margin-block-start: var(--flow-gap, .8lh);
+    margin-block-start: var(--flow-gap, 1lh);
   }
 
   :where(.nc-flow) > * {
@@ -680,11 +748,11 @@
 
   :where(.nc-flow) > :is(h1, h2, h3, h4, h5, h6) {
     max-inline-size: var(--flow-headline-meassure, 32ch);
-    --flow-gap: 1.3lh;
+    --flow-gap: 1.5lh;
   }
 
   :where(.nc-flow) > :is(h1, h2, h3, h4, h5, h6) + :not([class]) {
-    --flow-gap: .3lh;
+    --flow-gap: .5lh;
   }
 
   :where(.nc-flow) > figure {
@@ -1082,6 +1150,21 @@
   text-transform: capitalize;
 }
 
+.centered {
+  text-align: center;
+  text-wrap: balance;
+}
+
+.uppercase {
+  text-transform: uppercase;
+  --opentype-case: on;
+}
+
+.smallcaps {
+  font-variant-numeric: oldstyle-nums;
+  font-variant-caps: all-small-caps;
+}
+
 .strong {
   font-weight: var(--font-weight-strong);
 }
@@ -1496,6 +1579,33 @@
   :where(.nc-card):is([href], button):hover {
     border-color: var(--color-brand-primary-base);
   }
+
+  :where(.nc-clickable-card) {
+    cursor: pointer;
+    position: relative;
+  }
+
+  :where(.nc-clickable-card):focus-within, :where(.nc-clickable-card):hover {
+    outline: var(--border-width-medium) solid var(--color-brand-primary-base);
+  }
+
+  :where(.nc-clickable-card) a[data-link="main"] {
+    text-decoration: none;
+  }
+
+  :where(.nc-clickable-card) a[data-link="main"]:focus-within:focus-visible, :where(.nc-clickable-card) a[data-link="main"]:hover {
+    outline: none;
+  }
+
+  :where(.nc-clickable-card) a[data-link="main"]:before {
+    content: "";
+    position: absolute;
+    inset: 0;
+  }
+
+  :where(.nc-clickable-card) a[data-link="extra"] {
+    position: relative;
+  }
 }
 
 @layer components.dialogs {
@@ -1761,7 +1871,7 @@
   }
 
   :where(.nc-icon)[data-size="inline"] {
-    --icon-size: .8lh;
+    --icon-size: .75lh;
   }
 
   :where(.nc-icon)[data-size="button"] {
@@ -1795,7 +1905,7 @@
     color: var(--color-text-base);
     font-size: inherit;
     align-items: center;
-    gap: .15lh;
+    gap: 0;
     display: inline-flex;
   }
 
@@ -1993,7 +2103,7 @@
     --_tag-select-checked-text-color: var(--tag-select-checked-text-color, var(--color-brand-primary-contrast));
     --_tag-select-checked-surface-color: var(--tag-select-checked-surface-color, var(--color-brand-primary-base));
     --_tag-select-border-radius: var(--tag-select-border-radius, var(--_input-border-radius));
-    --nc-legend-spacing: .3lh;
+    --nc-legend-spacing: .25lh;
   }
 
   :where(.nc-tag-select-field):focus-within:has(:focus-visible) {
@@ -2034,12 +2144,12 @@
     max-inline-size: var(--input-field-max-inline-size);
     grid-template-columns: minmax(0, 1fr);
     place-items: start;
-    gap: .3lh;
+    gap: .25lh;
     display: grid;
   }
 
   :where(.nc-input-field) > label, :where(.nc-input-field) > .nc-stack {
-    gap: .15lh;
+    gap: 0;
   }
 
   :where(.nc-input-field) > .nc-cluster {
@@ -2107,7 +2217,7 @@
     --_segmented-control-border-radius: var(--segmented-control-border-radius, var(--_input-border-radius));
     --_segmented-control-checked-text-color: var(--segmented-control-checked-text-color, var(--color-brand-primary-contrast));
     --_segmented-control-checked-surface-color: var(--segmented-control-checked-surface-color, var(--color-brand-primary-base));
-    --nc-legend-spacing: .3lh;
+    --nc-legend-spacing: .25lh;
     container: segmented-control / inline-size;
   }
 

package/out/src/assets/fonts/fonts.css

@@ -0,0 +1,7 @@
+@font-face {
+    font-family: "DMMono";
+    src: url("./DMMono-Regular.woff2") format("woff2"), url("./DMMono-Regular.woff") format("woff");
+    font-display: optional;
+    font-style: normal;
+    font-weight: 400;
+}

package/out/src/assets/icons/ArrowRightSolid.svelte

@@ -0,0 +1 @@
+<svg class="nc-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor"><path d="M 18.71875 6.78125 L 17.28125 8.21875 L 24.0625 15 L 4 15 L 4 17 L 24.0625 17 L 17.28125 23.78125 L 18.71875 25.21875 L 27.21875 16.71875 L 27.90625 16 L 27.21875 15.28125 Z"/></svg>

package/out/src/assets/icons/arrow-right-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor"><path d="M 18.71875 6.78125 L 17.28125 8.21875 L 24.0625 15 L 4 15 L 4 17 L 24.0625 17 L 17.28125 23.78125 L 18.71875 25.21875 L 27.21875 16.71875 L 27.90625 16 L 27.21875 15.28125 Z"/></svg>

package/out/src/assets/icons/favicon.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 1234 1234"><path fill-rule="evenodd" d="M717 217c0 112.561-37.194 216.434-99.963 300H1017v200.164C855.944 722.438 727 854.661 727 1017H517c0-112.561 37.194-216.434 99.963-300H217V516.836c3.32.109 6.654.164 10 .164 165.685 0 300-134.315 300-300h190Z" clip-rule="evenodd"/>
+    <style>
+        path { fill: #000; }
+        @media (prefers-color-scheme: dark) {
+            path { fill: #FFF; }
+        }
+    </style>
+</svg>

package/out/src/assets/logos/nordcode-logo-icon.svg

@@ -0,0 +1,3 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.5 0C22.5 5.06523 20.8262 9.73953 18.0016 13.5H36V22.5V22.5074C28.7525 22.7447 22.95 28.6947 22.95 36H13.5C13.5 30.9348 15.1738 26.2605 17.9984 22.5H0V13.5V13.4926C0.149399 13.4975 0.299411 13.5 0.45 13.5C7.90584 13.5 13.95 7.45584 13.95 0H22.5Z" fill="black"/>
+</svg>

package/out/src/assets/logos/nordcode-logo.svg

@@ -0,0 +1,17 @@
+<svg width="240" height="37" viewBox="0 0 240 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M56.9893 30.0889V9.36099H60.834L61.2101 12.4535H61.419C61.9762 11.4505 62.8399 10.6008 64.01 9.90427C65.1801 9.20776 66.5313 8.85951 68.0637 8.85951C70.5989 8.85951 72.5073 9.62567 73.7889 11.158C75.0705 12.6903 75.7112 14.9469 75.7112 17.928V30.0889H71.2815V18.4712C71.2815 16.7439 70.9193 15.4066 70.1949 14.4594C69.4706 13.5122 68.3283 13.0385 66.7682 13.0385C65.2358 13.0385 63.9543 13.5539 62.9235 14.5848C61.9205 15.6156 61.419 17.1061 61.419 19.0563V30.0889H56.9893Z" fill="black"/>
+<path d="M89.6528 30.5904C87.6748 30.5904 85.9057 30.1446 84.3455 29.2531C82.7853 28.3616 81.5595 27.1079 80.668 25.492C79.7764 23.8482 79.3307 21.9259 79.3307 19.725C79.3307 17.524 79.7764 15.6156 80.668 13.9997C81.5595 12.356 82.7853 11.0883 84.3455 10.1968C85.9057 9.30528 87.6887 8.85951 89.6946 8.85951C91.7006 8.85951 93.4697 9.30528 95.002 10.1968C96.5621 11.0883 97.7741 12.356 98.6377 13.9997C99.5293 15.6156 99.975 17.524 99.975 19.725C99.975 21.9259 99.5293 23.8482 98.6377 25.492C97.7462 27.1079 96.5204 28.3616 94.9602 29.2531C93.4279 30.1446 91.6588 30.5904 89.6528 30.5904ZM89.6528 26.3696C90.7115 26.3696 91.6866 26.1328 92.5781 25.6592C93.4697 25.1855 94.1801 24.4612 94.7095 23.4861C95.2667 22.4831 95.5453 21.2294 95.5453 19.725C95.5453 18.1926 95.2667 16.9389 94.7095 15.9638C94.1801 14.9887 93.4697 14.2644 92.5781 13.7908C91.7145 13.3171 90.7533 13.0803 89.6946 13.0803C88.6359 13.0803 87.6608 13.3171 86.7693 13.7908C85.8778 14.2644 85.1534 14.9887 84.5962 15.9638C84.0669 16.9389 83.8022 18.1926 83.8022 19.725C83.8022 22.0095 84.3733 23.695 85.5156 24.7816C86.6857 25.8402 88.0648 26.3696 89.6528 26.3696Z" fill="black"/>
+<path d="M103.72 30.0889V26.2442H108.776V14.5848C108.776 13.6654 108.331 13.2057 107.439 13.2057H104.138V9.36099H109.111C110.253 9.36099 111.186 9.69532 111.911 10.364C112.635 11.0047 112.997 11.9102 112.997 13.0803V13.5818H113.206C113.513 12.0216 114.167 10.8515 115.17 10.0714C116.201 9.26348 117.692 8.85951 119.642 8.85951H122.86V13.54H118.346C116.703 13.54 115.435 14.1111 114.543 15.2534C113.652 16.3957 113.206 17.7608 113.206 19.3488V26.2442H119.642V30.0889H103.72Z" fill="black"/>
+<path d="M135.297 30.5904C133.569 30.5904 132.023 30.1864 130.658 29.3785C129.293 28.5427 128.206 27.3168 127.398 25.7009C126.618 24.0851 126.228 22.0931 126.228 19.725C126.228 17.3568 126.632 15.3648 127.44 13.749C128.248 12.1331 129.335 10.9212 130.7 10.1132C132.093 9.27741 133.639 8.85951 135.339 8.85951C136.927 8.85951 138.236 9.16597 139.267 9.7789C140.298 10.364 141.064 11.1162 141.565 12.0356V0H145.995V30.0889H142.192L141.816 27.0382H141.565C141.008 28.1248 140.214 28.9884 139.183 29.6292C138.18 30.27 136.885 30.5904 135.297 30.5904ZM136.216 26.3696C137.804 26.3696 139.114 25.8124 140.144 24.698C141.203 23.5836 141.733 21.9259 141.733 19.725C141.733 17.4961 141.203 15.8385 140.144 14.7519C139.114 13.6375 137.804 13.0803 136.216 13.0803C134.628 13.0803 133.305 13.6375 132.246 14.7519C131.215 15.8663 130.7 17.5379 130.7 19.7667C130.7 21.9677 131.215 23.6254 132.246 24.7398C133.305 25.8263 134.628 26.3696 136.216 26.3696Z" fill="black"/>
+<path d="M160.104 30.5904C158.182 30.5904 156.454 30.1446 154.922 29.2531C153.417 28.3616 152.233 27.1079 151.37 25.492C150.506 23.8482 150.074 21.9259 150.074 19.725C150.074 17.524 150.506 15.6156 151.37 13.9997C152.261 12.3838 153.459 11.1301 154.964 10.2386C156.468 9.31921 158.182 8.85951 160.104 8.85951C162.751 8.85951 164.882 9.52816 166.498 10.8654C168.142 12.1749 169.186 13.9858 169.632 16.2982H164.993C164.715 15.2952 164.144 14.5012 163.28 13.9161C162.444 13.3311 161.371 13.0385 160.062 13.0385C159.115 13.0385 158.209 13.2893 157.346 13.7908C156.51 14.2922 155.827 15.0445 155.298 16.0474C154.797 17.0225 154.546 18.2484 154.546 19.725C154.546 21.1737 154.797 22.3995 155.298 23.4025C155.827 24.4055 156.51 25.1716 157.346 25.7009C158.209 26.2024 159.115 26.4532 160.062 26.4532C161.399 26.4532 162.472 26.1606 163.28 25.5756C164.088 24.9905 164.659 24.1826 164.993 23.1517H169.632C169.075 25.4363 167.988 27.2472 166.372 28.5845C164.757 29.9218 162.667 30.5904 160.104 30.5904Z" fill="black"/>
+<path d="M183.197 30.5904C181.219 30.5904 179.45 30.1446 177.89 29.2531C176.33 28.3616 175.104 27.1079 174.213 25.492C173.321 23.8482 172.875 21.9259 172.875 19.725C172.875 17.524 173.321 15.6156 174.213 13.9997C175.104 12.356 176.33 11.0883 177.89 10.1968C179.45 9.30528 181.233 8.85951 183.239 8.85951C185.245 8.85951 187.014 9.30528 188.547 10.1968C190.107 11.0883 191.319 12.356 192.182 13.9997C193.074 15.6156 193.52 17.524 193.52 19.725C193.52 21.9259 193.074 23.8482 192.182 25.492C191.291 27.1079 190.065 28.3616 188.505 29.2531C186.973 30.1446 185.203 30.5904 183.197 30.5904ZM183.197 26.3696C184.256 26.3696 185.231 26.1328 186.123 25.6592C187.014 25.1855 187.725 24.4612 188.254 23.4861C188.811 22.4831 189.09 21.2294 189.09 19.725C189.09 18.1926 188.811 16.9389 188.254 15.9638C187.725 14.9887 187.014 14.2644 186.123 13.7908C185.259 13.3171 184.298 13.0803 183.239 13.0803C182.181 13.0803 181.205 13.3171 180.314 13.7908C179.422 14.2644 178.698 14.9887 178.141 15.9638C177.612 16.9389 177.347 18.1926 177.347 19.725C177.347 22.0095 177.918 23.695 179.06 24.7816C180.23 25.8402 181.609 26.3696 183.197 26.3696Z" fill="black"/>
+<path d="M205.455 30.5904C203.728 30.5904 202.182 30.1864 200.817 29.3785C199.451 28.5427 198.365 27.3168 197.557 25.7009C196.777 24.0851 196.387 22.0931 196.387 19.725C196.387 17.3568 196.791 15.3648 197.599 13.749C198.407 12.1331 199.493 10.9212 200.858 10.1132C202.251 9.27741 203.798 8.85951 205.497 8.85951C207.085 8.85951 208.395 9.16597 209.425 9.7789C210.456 10.364 211.222 11.1162 211.724 12.0356V0H216.154V30.0889H212.351L211.975 27.0382H211.724C211.167 28.1248 210.373 28.9884 209.342 29.6292C208.339 30.27 207.043 30.5904 205.455 30.5904ZM206.375 26.3696C207.963 26.3696 209.272 25.8124 210.303 24.698C211.362 23.5836 211.891 21.9259 211.891 19.725C211.891 17.4961 211.362 15.8385 210.303 14.7519C209.272 13.6375 207.963 13.0803 206.375 13.0803C204.787 13.0803 203.463 13.6375 202.405 14.7519C201.374 15.8663 200.858 17.5379 200.858 19.7667C200.858 21.9677 201.374 23.6254 202.405 24.7398C203.463 25.8263 204.787 26.3696 206.375 26.3696Z" fill="black"/>
+<path d="M230.221 30.5904C228.215 30.5904 226.446 30.1446 224.913 29.2531C223.381 28.3337 222.183 27.0661 221.319 25.4502C220.456 23.8343 220.024 21.9538 220.024 19.8085C220.024 17.6354 220.442 15.727 221.277 14.0833C222.141 12.4395 223.339 11.158 224.871 10.2386C226.432 9.31921 228.229 8.85951 230.262 8.85951C232.268 8.85951 233.996 9.31921 235.444 10.2386C236.893 11.1301 238.007 12.3281 238.788 13.8325C239.595 15.337 239.999 16.9947 239.999 18.8056C239.999 19.0842 239.999 19.3906 239.999 19.725C239.999 20.0314 239.986 20.3797 239.958 20.7697H224.37C224.509 22.6921 225.136 24.1547 226.25 25.1577C227.365 26.1328 228.674 26.6203 230.179 26.6203C231.488 26.6203 232.519 26.3557 233.271 25.8263C234.051 25.2691 234.622 24.5169 234.985 23.5696H239.456C238.955 25.5477 237.91 27.2193 236.322 28.5845C234.734 29.9218 232.7 30.5904 230.221 30.5904ZM230.221 12.7042C228.855 12.7042 227.643 13.1221 226.585 13.9579C225.526 14.7659 224.844 15.9081 224.537 17.3847H235.57C235.458 15.9917 234.915 14.8634 233.94 13.9997C232.965 13.136 231.725 12.7042 230.221 12.7042Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.3876 0.835938C22.3876 5.87586 20.7222 10.5268 17.9117 14.2685H35.8201V23.2235V23.2308C28.6088 23.467 22.8353 29.3873 22.8353 36.6561H13.4325C13.4325 31.6162 15.0979 26.9652 17.9084 23.2235H0V14.2685V14.2612C0.148652 14.266 0.297915 14.2685 0.447752 14.2685C7.86634 14.2685 13.8803 8.25453 13.8803 0.835938H22.3876Z" fill="black"/>
+  <style>
+    path { fill: #000; }
+    @media (prefers-color-scheme: dark) {
+        path { fill: #FFF; }
+    }
+  </style>
+</svg>

package/out/src/modules/copyButtons/ts/copyButtons.ts

@@ -0,0 +1,9 @@
+const htmlEl = document.documentElement;
+htmlEl?.addEventListener('click', (e: MouseEvent) => {
+    const el = e.target as HTMLElement;
+
+    if (el.hasAttribute('data-copy-target')) {
+        const copyTarget = el.dataset.copyTarget;
+        navigator.clipboard.writeText(copyTarget);
+    }
+});

package/out/src/modules/dialogs/svelte/dialog.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+interface DialogProps {
+    heading: string;
+    id: string;
+}
+
+let { heading, id }: DialogProps = $props();
+</script>
+
+
+<dialog
+  class="nc-dialog"
+  {id}
+  data-level="1"
+  inert
+>
+  <form method="dialog" class="dialog-container">
+    <div class="dialog-header">
+      <h2 class="dialog-title">{heading}</h2>
+      <button data-closes-dialog>×</button>
+    </div>
+    <div class="dialog-content">
+      <slot />
+      <button data-opens-dialog="dialog-2">Show me the next dialog</button>
+    </div>
+  </form>
+</dialog>

package/out/src/modules/dialogs/ts/LICENCE

@@ -0,0 +1,171 @@
+Copyright 2023 Adam Argyle
+
+Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+   1. Definitions.
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+   END OF TERMS AND CONDITIONS
+   APPENDIX: How to apply the Apache License to your work.
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+   Copyright [yyyy] [name of copyright owner]
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+       http://www.apache.org/licenses/LICENSE-2.0
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/out/src/modules/dialogs/ts/dialogs.ts

@@ -0,0 +1,111 @@
+// custom events to be added to <dialog>
+const dialogClosingEvent = new Event('closing')
+const dialogClosedEvent  = new Event('closed')
+const dialogOpeningEvent = new Event('opening')
+const dialogOpenedEvent  = new Event('opened')
+const dialogRemovedEvent = new Event('removed')
+
+// track opening
+const dialogAttrObserver = new MutationObserver((mutations, observer) => {
+  mutations.forEach(async mutation => {
+    if (mutation.attributeName === 'open') {
+      const dialog = mutation.target as HTMLDialogElement;
+
+      const isOpen = dialog.hasAttribute('open')
+      if (!isOpen) return
+
+      dialog.removeAttribute('inert')
+
+      // set focus
+      const focusTarget = dialog.querySelector('[autofocus]') as HTMLDialogElement;
+      focusTarget
+        ? focusTarget?.focus()
+        : dialog?.querySelector('button')?.focus()
+
+      dialog.dispatchEvent(dialogOpeningEvent)
+      await animationsComplete(dialog)
+      dialog.dispatchEvent(dialogOpenedEvent)
+    }
+  })
+})
+
+// track deletion
+const dialogDeleteObserver = new MutationObserver((mutations, observer) => {
+  mutations.forEach(mutation => {
+    mutation.removedNodes.forEach(removedNode => {
+      if (removedNode.nodeName === 'DIALOG') {
+        removedNode.removeEventListener('click', lightDismiss)
+        removedNode.removeEventListener('close', dialogClose)
+        removedNode.dispatchEvent(dialogRemovedEvent)
+      }
+    })
+  })
+})
+
+// wait for all dialog animations to complete their promises
+const animationsComplete = (element: HTMLDialogElement) =>
+  Promise.allSettled(
+    element.getAnimations().map((animation: Animation) => 
+      animation.finished))
+
+// click outside the dialog handler
+const lightDismiss = ({ target: dialog }) => {
+  if (dialog.nodeName === 'DIALOG')
+    dialog.close('dismiss')
+}
+
+const dialogClose = async ({target:dialog}) => {
+  dialog.setAttribute('inert', '')
+  dialog.dispatchEvent(dialogClosingEvent)
+
+  await animationsComplete(dialog)
+
+  dialog.dispatchEvent(dialogClosedEvent)
+}
+
+// page load dialogs setup
+export async function initDialog(dialog: HTMLDialogElement) {
+  dialog.addEventListener('click', lightDismiss)
+  dialog.addEventListener('close', dialogClose)
+
+  dialogAttrObserver.observe(dialog, { 
+    attributes: true,
+  })
+
+  dialogDeleteObserver.observe(document.body, {
+    attributes: false,
+    subtree: false,
+    childList: true,
+  })
+
+  // remove visibility:hidden style
+  // prevent page load @keyframes playing
+  await animationsComplete(dialog);
+  // dialog.style.removeProperty('visibility');
+}
+
+const dialogRemoved = ({ target: dialog }) => {
+  dialog.removeEventListener('removed', dialogRemoved)
+}
+
+// SETUP
+document.querySelectorAll('dialog').forEach((dialog: HTMLDialogElement) => {
+  // sugar up <dialog> elements
+  initDialog(dialog);
+
+  dialog.addEventListener('removed', dialogRemoved, { once: true });
+});
+
+const htmlEl = document.documentElement;
+htmlEl?.addEventListener('click', (e: MouseEvent) => {
+  const el = e.target as HTMLElement;
+
+  if (el.hasAttribute('data-dialogtarget')) {
+    const dialogId = el.getAttribute('data-dialogtarget');
+    if (dialogId) window[dialogId].showModal();
+  }
+
+  if (el.hasAttribute('data-closes-dialog')) {
+    (el as HTMLButtonElement)?.closest('dialog')?.close('close');
+  }
+});