@magnit-ce/code-tests 0.0.13 → 0.0.14

package/dist/code-tests.js

@@ -1,217 +1,137 @@
-// src/code-tests.css?raw
-var code_tests_default = `:host
+const style = `:host
 {
-    /*** gray ***/
-    --uchu-light-gray-raw: 95.57% 0.003 286.35;
-    --uchu-light-gray: oklch(var(--uchu-light-gray-raw));
+    --gap: 7px;
+    --gap-small: 3px;
+    --gap-medium: 14px;
+    --gap-large: 24px;
+    
+    --surface-success: oklch(93.96% 0.05 148.74);
+    --primary-success: oklch(58.83% 0.158 145.05);
+    --border-success: solid 1px var(--primary-success);
 
-    --uchu-gray-raw: 84.68% 0.002 197.12;
-    --uchu-gray: oklch(var(--uchu-gray-raw));
+    --surface-fail: oklch(88.98% 0.052 3.28);
+    --primary-fail: oklch(45.8% 0.177 17.7);
+    --border-fail: solid 1px var(--primary-fail);
 
-    --uchu-dark-gray-raw: 63.12% 0.004 219.55;
-    --uchu-dark-gray: oklch(var(--uchu-dark-gray-raw));
+    --surface-process: oklch(89.66% 0.046 260.67);
+    --primary-process: oklch(43.48% 0.17 260.2);
+    --border-process: solid 1px var(--primary-process);
 
-    /*** red ***/
-    --uchu-light-red-raw: 88.98% 0.052 3.28;
-    --uchu-light-red: oklch(var(--uchu-light-red-raw));
 
-    --uchu-dark-red-raw: 45.8% 0.177 17.7;
-    --uchu-dark-red: oklch(var(--uchu-dark-red-raw));
 
-    /*** purple ***/
-    --uchu-light-purple-raw: 89.1% 0.046 305.24;
-    --uchu-light-purple: oklch(var(--uchu-light-purple-raw));
-
-    --uchu-dark-purple-raw: 39.46% 0.164 298.29;
-    --uchu-dark-purple: oklch(var(--uchu-dark-purple-raw));
-
-    /*** blue ***/
-    --uchu-light-blue-raw: 89.66% 0.046 260.67;
-    --uchu-light-blue: oklch(var(--uchu-light-blue-raw));
-
-    --uchu-blue-raw: 62.39% 0.181 258.33;
-    --uchu-blue: oklch(var(--uchu-blue-raw));
-
-    --uchu-dark-blue-raw: 43.48% 0.17 260.2;
-    --uchu-dark-blue: oklch(var(--uchu-dark-blue-raw));
-
-    /*** green ***/
-    --uchu-light-green-raw: 93.96% 0.05 148.74;
-    --uchu-light-green: oklch(var(--uchu-light-green-raw));
-
-    --uchu-green-raw: 79.33% 0.179 145.62;
-    --uchu-green: oklch(var(--uchu-green-raw));
-
-    --uchu-dark-green-raw: 58.83% 0.158 145.05;
-    --uchu-dark-green: oklch(var(--uchu-dark-green-raw));
-
-    /*** general ***/
-    --uchu-yang-raw: 99.4% 0 0;
-    --uchu-yang: oklch(var(--uchu-yang-raw));
-
-    --uchu-yin-raw: 14.38% 0.007 256.88;
-    --uchu-yin: oklch(var(--uchu-yin-raw));
-
-    /*** code-tests vars ***/
-
-    --spacer: calc(1em - 7px);
-    --small-spacer: calc(var(--spacer) / 2);
-
-    --color-success: var(--uchu-green);
-    --color-fail: var(--uchu-red);
-    --color-process: var(--uchu-blue);
-
-    --text-surface: var(--uchu-yin);
-    --text-result: var(--uchu-yang); /* --uchu-yang: #fdfdfd; */
-    --text-collapse-icon: var(--uchu-dark-gray);  /* --uchu-dark-gray: #878a8b; */
-    --text-hook-summary: var(--uchu-dark-purple);
-    --text-success: var(--uchu-dark-green); /* --uchu-dark-green: #2e943a; */
-    --text-fail: var(--uchu-dark-red); /* --uchu-dark-red: #a30d30; */
-    --text-process: var(--uchu-dark-blue); /* --uchu-dark-blue: #0949ac; */
-    --text-button: var(--uchu-yang); /* --uchu-dark-blue: #0949ac; */
-    --text-placeholder: var(--uchu-dark-gray);
-
-    --surface-0: var(--uchu-light-gray);
-    --surface-test: var(--uchu-yang);
     --surface-test-summary: var(--uchu-gray);
     --surface-hook-summary: var(--uchu-light-purple);
-    --surface-success: var(--uchu-light-green);
-    --surface-fail: var(--uchu-light-red);
-    --surface-process: var(--uchu-light-blue);
-    --surface-button: var(--uchu-blue); /* --uchu-blue: #3984f2 */
-    --surface-button-hover: var(--uchu-light-blue);
-    --surface-button-active: var(--uchu-dark-blue);
-    --surface-button-cancel: var(--uchu-dark-blue);
-
+    --surface-hook-any-summary: var(--uchu-light-blue);
+    
     --border-test: solid 1px var(--uchu-dark-gray);
     --border-hook: solid 1px var(--uchu-dark-purple);
-    --border-success: solid 1px var(--uchu-dark-green);
-    --border-fail: solid 1px var(--uchu-dark-red);
-    --border-process: solid 1px var(--uchu-dark-blue);
+    --border-hook-any: solid 1px var(--uchu-dark-blue);
     --border-button: solid 1px var(--uchu-blue);
-
+    
     --success-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%232e943a" d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/></svg>');
     --info-icon: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2022.812714%2022.814663%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Asvg%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20style%3D%22fill%3Atransparent%3Bstroke%3Atransparent%3Bstroke-width%3A0.999999%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A6.3%3Bstroke-dasharray%3Anone%3Bstroke-dashoffset%3A29.2913%3Bstroke-opacity%3A1%22%20d%3D%22M%2022.295505%2C11.407332%20A%2010.889144%2C10.889144%200%200%201%2011.406424%2C22.296479%2010.889144%2C10.889144%200%200%201%200.51720881%2C11.407332%2010.889144%2C10.889144%200%200%201%2011.406424%2C0.51818382%2010.889144%2C10.889144%200%200%201%2022.295505%2C11.407332%20Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22m%2013.945668%2C4.3053761%20c%200.150778%2C-0.96462%20-0.30687%2C-1.43709%20-1.36997%2C-1.43709%20-1.063%2C0%20-1.668452%2C0.47247%20-1.81923%2C1.43709%20-0.150779%2C0.96462%200.306971%2C1.43708%201.369971%2C1.43708%201.004%2C0%201.66845%2C-0.47246%201.819229%2C-1.43708%20z%20M%2011.693889%2C17.829726%2013.373994%2C7.0811161%20h%20-2.9333%20L%208.7605887%2C17.829726%20Z%22%20style%3D%22font-size%3A19.6861px%3Bfont-family%3APassageway%3B-inkscape-font-specification%3APassageway%3Bfill%3A%23a30d30%3Bstroke-width%3A2.5%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A6.3%3Bstroke-dashoffset%3A29.2913%22%20aria-label%3D%22i%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
 
-    --font-text: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-
-    /*** styles ***/
 
-    color-scheme: light dark;
     display: grid;
-    gap: var(--spacer);
-    background-color: var(--surface-0);
-    color: var(--text-surface); 
-    padding: var(--small-spacer);
-    font-family: var(--font-text);
+    gap: var(--gap);
+    grid-auto-rows: max-content;
+    font-family: sans-serif;
+    font-size: 12px;
 }
 
 #header
 {
-    display: grid;
-    grid-template-columns: 1fr auto;
+    flex: 1;
+    display: flex;
     align-items: center;
-    gap: var(--spacer);
-    border-bottom: solid 2px;
-    padding: var(--spacer);
-    margin-bottom: var(--spacer);
-    user-select: none;
+    gap: var(--gap);
+    padding: var(--gap-small) var(--gap);
 }
-
 #title
 {
-    font-weight: bold;
-    font-size: 16px;
-}
-
-.hook
-{
-    display: none;
-}
-:host(.has-before-hook) #before-all-details
-,:host(.has-after-hook) #after-all-details
-{
-    display: initial;
-}
-:host(.has-required-before-hook) #required-before-any-details
-,:host(.has-required-after-hook) #required-after-any-details
-{
-    display: initial;
-}
-
-#required-before-any-summary
-,#required-after-any-summary
-{
-    background: var(--surface-process);
-    color: var(--text-process);
-    border: solid 1px var(--text-process);
-    grid-template-columns: auto auto 1fr;
+    flex: 1;
 }
 
 #tests
+,#component-content
 {
-    margin: 0;
-    padding: 0;
-    list-style: none;
     display: grid;
+    gap: var(--gap);
     grid-auto-rows: max-content;
-    gap: var(--spacer);
 }
 
-summary
+#header button
 {
-    display: grid;
-    gap: var(--spacer);
-    padding: var(--small-spacer) var(--spacer);
+    align-self: stretch;
+    display: inline-flex;
     align-items: center;
+    gap: var(--gap-small);
 }
-summary::before
+
+button .reset-icon
 {
-    content: '';
-    width: 16px;
-    height: 16px;
-    background: url("data:image/svg+xml,%3Csvg%20viewBox%3D'0%200%2020%2020'%20width%3D'14px'%20height%3D'14px'%20fill%3D'none'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cg%20stroke-width%3D'0'%3E%3C%2Fg%3E%3Cg%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3C%2Fg%3E%3Cg%3E%3Cpath%20d%3D'M8.72798%2015.795L3.72798%207.795C3.10356%206.79593%203.82183%205.5%204.99998%205.5L15%205.5C16.1781%205.5%2016.8964%206.79593%2016.272%207.795L11.272%2015.795C10.6845%2016.735%209.31549%2016.735%208.72798%2015.795Z'%20fill%3D'%23878a8b'%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+    width: 1em;
+    height: 1em;
+    transform: scaleX(-1);
+    margin-inline: 3px;
+}
+
+/* Run button */
+button .arrow-icon
+{
+    width: .75em;
+    height: .75em;
     transform: rotate(-90deg);
-    transition: transform ease-out 200ms;
+    margin-inline: 3px;
 }
-[open] > summary::before
+:host(.running) .run-all-button-icon
+,:host(.fail) .run-all-button-icon
 {
     transform: rotate(0);
-    /* background: var(--surface-test-summary); */
 }
 
-:host(.running) .run[data-all]
+/* Dropdown Layout */
+summary > .run-test-button
+, #run-all-button
 {
-    color: var(--text-surface);
-    background-color: oklch(89.68% 0.002 197.12);
-    border-color: oklch(63.12% 0.004 219.55);
+    justify-self: flex-end;
+    margin-left: auto;
 }
-:host(.running) .run[data-all]:hover
+
+summary:not(#component-summary)
 {
-    background-color: oklch(95.57% 0.003 286.35);
-    border-color: oklch(63.12% 0.004 219.55);
+    padding: var(--gap-small) var(--gap);
 }
-:host(.running) .run[data-all]:active
+#component-summary
 {
-    background-color: oklch(63.12% 0.004 219.55);
-    border-color: oklch(53.12% 0.004 219.55);
+    padding-block: var(--gap-small);
 }
-:host(.running) .run[data-all]::before
+
+
+/* Dropdown Markers */
+summary
 {
-    display: none;
+    display: flex;
+    align-items: center;
+    gap: var(--gap);
 }
-
-#before-all-summary
-,#after-all-summary
+summary > .arrow-icon
 {
-    background: var(--surface-hook-summary);
-    color: var(--text-hook-summary);
-    grid-template-columns: auto auto 1fr;
+    background: var(--arrow-icon);
+    transform: rotate(-90deg);
+    transition: transform ease-out 90ms;
+    width: .6em;
+    height: .6em;
+}
+details[open] > summary > .arrow-icon
+{
+    transform: rotate(0);
 }
 
+/* Result Icon */
 .result-icon
 {
-    --background-size: 24px;
+    --background-size: 16px;
     width: var(--background-size);
     height: var(--background-size);
 
@@ -224,184 +144,196 @@ summary::before
 }
 .result-icon::before
 {
-    content: '\u22EF';
+    content: '⋯';
+    font-size: 10px;
 }
 
-.hook
-{
-    border: var(--border-hook);
-}
-
-.test
-,#before-all-details
-,#after-all-details
-{
-    border: var(--border-test);
-    border-radius: 2px;
-}
-
-.test summary
-{
-    background: var(--surface-test-summary);
-    grid-template-columns: auto auto 1fr auto;
-}
-
-.test.running .result-icon
+:host(.running) #component-summary .result-icon
+,.test.running .test-summary > .result-icon
 ,.hook.running .result-icon
+,.processing-details.running .processing-result-icon
 {
     border: var(--border-process);
     background: var(--surface-process);
 }
-.test.success .result-icon
+:host(.success) #component-summary .result-icon
+,.test.success .test-summary > .result-icon
 ,.hook.success .result-icon
+,.processing-details.success .processing-result-icon
 {
     border: var(--border-success);
     background: var(--surface-success)
     var(--success-icon);
     background-repeat: no-repeat;
     background-position: center;
-    background-size: var(--icon-size, 16px) var(--icon-size, 16px);
+    background-size: var(--icon-size, 12px) var(--icon-size, 12px);
 }
-.test.fail .result-icon
+:host(.fail) #component-summary .result-icon
+,.test.fail .test-summary > .result-icon
 ,.hook.fail .result-icon
+,.processing-details.fail .processing-result-icon
 {
     border: var(--border-fail);
     background: var(--surface-fail)
     var(--info-icon);
+    background-size: var(--icon-size, 16px) var(--icon-size, 16px);
     background-repeat: no-repeat;
     background-position: center;
     transform: rotate(175deg);
 }
-.test:is(.success,.fail) .result-icon::before
+:host(:is(.success,.fail)) #component-summary .result-icon::before
+,.test:is(.success,.fail) .test-summary > .result-icon::before
 ,.hook:is(.success,.fail) .result-icon::before
+,.processing-details:is(.success,.fail) .processing-result-icon::before
 {
     display: none;
 }
-.test:is(.running) .result-icon::before
+:host(.running) #component-summary .result-icon::before
+,.test:is(.running) .test-summary > .result-icon::before
 ,.hook:is(.running) .result-icon::before
+,.processing-details:is(.running) .processing-result-icon::before
 {
     content: '';
-    --color: var(--text-process);
+    --color: var(--primary-process, currentColor);
     --animation-timing-function: linear;
     --animation-duration: 2s;
-    width: var(--icon-size, 18px);
-    height: var(--icon-size, 18px);
-    mask-image: radial-gradient(circle at 50% 50%, transparent calc(var(--icon-size, 18px) / 3), black calc(var(--icon-size, 18px) / 3));
+    width: var(--icon-size, 14px);
+    height: var(--icon-size, 14px);
+    mask-image: radial-gradient(circle at 50% 50%, transparent calc(var(--icon-size, 14px) / 3), black calc(var(--icon-size, 14px) / 3));
     background-image: conic-gradient(transparent, transparent 135deg, var(--color));
     border-radius: 50%;
     animation: var(--animation-timing-function) var(--animation-duration) infinite spin;
     margin: 2px;
 }
 
-.description
+/* Smaller Result icon settings for sub-test icons */
+.before-each-result-icon
+,.after-each-result-icon
+,.processing-result-icon
 {
-    user-select: none;
+    --background-size: 12px;
 }
-
-.test .result
-,.hook .result
+.before-each-result-icon::before
+,.after-each-result-icon::before
+,.processing-result-icon::before
 {
-    background: var(--surface-test);
-    border: var(--border-test);
-    border-radius: 2px;
-    margin: var(--small-spacer);
+    font-size: 9px;
 }
-
-.test .result:empty::before
-,.results:empty::before
+.hook.success .before-each-result-icon
+,.hook.success .after-each-result-icon
+,.processing-details.success .processing-result-icon
 {
-    content: "[Test has not been run]";
-    font-style: italic;
-    font-size: 11px;
-    color: var(--text-placeholder);
+    --icon-size: 8px;
 }
-.results:empty::before
+.hook.fail .before-each-result-icon
+,.hook.fail .after-each-result-icon
+,.processing-details.fail .processing-result-icon
 {
-    content: "[Tests have not been run]";
+    --icon-size: 12px;
 }
-.before-result:empty
-,.after-result:empty
+.hook:is(.running) .before-each-result-icon::before
+,.hook:is(.running) .after-each-result-icon::before
+,.processing-details:is(.running) .processing-result-icon::before
+{
+    --icon-size: 9px;
+}
+
+/* Hook Display */
+.hook
 {
     display: none;
 }
+:host(.has-before-all-hook) #before-all-details
+,:host(.has-after-all-hook) #after-all-details
+{
+    display: initial;
+}
+:host(.has-before-each-hook) .before-each-details
+,:host(.has-after-each-hook) .after-each-details
+{
+    display: initial;
+}
+:host(.has-required-before-hook) #required-before-any-details
+,:host(.has-required-after-hook) #required-after-any-details
+{
+    display: initial;
+}
 
-.test .result
-,.results
-,.before-result
-,.after-result
+/* Test Display */
+code-test .results
 {
-    padding: var(--small-spacer) var(--spacer);
+    display: grid;
+    gap: var(--gap-small);
+    padding-inline-start: 1em;
 }
 
-pre
+code-test .results details .result
+,.hook > .results
 {
-    margin: var(--small-spacer);
+    margin-inline-start: 1em;
 }
 
-.run
+.result.message:empty
 {
-    width: auto;
-    min-width: auto;
-    max-width: auto;
-    appearance: none;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    padding: 3px 10px 3px 7px;
-    font-size: 11px;
-    gap: var(--small-spacer);
-    border: var(--border-button);
-    background: var(--surface-button);
-    border-radius: 4px;
-    text-shadow: 1px 1px rgb(0 0 0 / .2);
-    color: var(--text-button);
+    padding: .5em 1em;
 }
-.run:hover
+.result.message:empty::before
 {
-    background: oklch(68.39% 0.181 258.33);
+    content: '[ this function has not been run ]';
+    font-family: monospace;
+    font-size: 12px;
+    font-style: italic;
 }
-.run:active
+
+/* Ordered Display */
+#tests
 {
-    background: oklch(50.39% 0.181 258.33);
+    counter-reset: tests;
 }
-.run::before
+code-test
 {
-    content: '';
-    display: block;
-    width: 16px;
-    height: 16px;
-    transform: rotate(-90deg);
-    background: 
-    url("data:image/svg+xml,%3Csvg%20viewBox%3D'0%200%2020%2020'%20width%3D'16px'%20height%3D'16px'%20fill%3D'none'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cg%20stroke-width%3D'0'%3E%3C%2Fg%3E%3Cg%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3C%2Fg%3E%3Cg%3E%3Cpath%20d%3D'M8.72798%2015.795L3.72798%207.795C3.10356%206.79593%203.82183%205.5%204.99998%205.5L15%205.5C16.1781%205.5%2016.8964%206.79593%2016.272%207.795L11.272%2015.795C10.6845%2016.735%209.31549%2016.735%208.72798%2015.795Z'%20fill%3D'%23fdfdfd'%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+    counter-increment: tests;
+}
+code-test > details > summary > .description
+{
+    flex: 1;
+}
+:host(:not([ordered="false"])) code-test > details > summary > .description::before
+{
+    content: counter(tests) ". ";
 }
 
+/* Hook Name */
+.hook-name,.processing-description
+{
+    border-radius: 3px;
+    border: solid 1px;
+    /* background: rgb(0 0 0 / .2); */
+    font-family: monospace;
+    text-transform: uppercase;
+    font-size: 11px;
+    padding: 3px 7px;
+}
 
-@media (prefers-color-scheme: dark) 
+#footer
+{
+    display: flex;
+    justify-content: flex-end;
+}
+#group-results
 {
-    :host
-    {
-        --text-surface: var(--uchu-yang);
-        --text-result: var(--uchu-yang);
+    display: flex;
+    gap: var(--gap);
+    padding: var(--gap);
+}
 
-        --surface-0: var(--uchu-yin);
-        --surface-test: oklch(25.11% 0.006 258.36);
-        --surface-test-summary: oklch(35.02% 0.005 236.66);
-    }
-    :host(.running) .run[data-all]
-    {
-        background-color: oklch(35.02% 0.005 236.66);
-        border-color: oklch(35.02% 0.005 236.66);
-    }
-    :host(.running) .run[data-all]:hover
-    {
-        background-color: oklch(63.12% 0.004 219.55);
-        border-color:oklch(63.12% 0.004 219.55);
-    }
-    :host(.running) .run[data-all]:active
-    {
-        background-color: oklch(25.11% 0.006 258.36);
-        border-color: oklch(25.11% 0.006 258.36);
-    }
+#passed-total-percent::before
+{
+    content: '(';
+}
+#passed-total-percent::after
+{
+    content: ')';
 }
 
 @keyframes spin
@@ -409,856 +341,1090 @@ pre
     from { transform: rotate(0deg); }
     to { transform: rotate(360deg); }
 }`;
-
-// src/code-tests.html?raw
-var code_tests_default2 = '<slot name="header">\n    <header id="header">\n        <span id="title"><slot name="title"><span id="title-text">Tests</span></slot></span>\n        <slot name="play-button">\n            <button type="button" class="run" data-all>\n                <slot name="play-button-label">\n                    <span id="play-button-label" class="button-label label icon">Run Tests</span>\n                </slot>\n            </button>\n        </slot>\n        <slot name="details"></slot>\n    </header>\n</slot>\n<details id="required-before-any-details" class="hook">\n    <summary id="required-before-any-summary">\n        <span id="required-before-any-result-icon" class="result-icon"></span>\n        <span id="required-before-any-description" class="description">Results from Required Before Any Hook</span>\n    </summary>\n    <div id="required-before-any-results" class="results"></div>\n</details>\n<details id="before-all-details" class="hook">\n    <summary id="before-all-summary">\n        <span id="before-all-result-icon" class="result-icon"></span>\n        <span id="before-all-description" class="description">Results from Before All Hook</span>\n    </summary>\n    <div id="before-all-results" class="results"></div>\n</details>\n<ul id="tests"></ul>\n<details id="after-all-details" class="hook">\n    <summary id="after-all-summary">\n        <span id="after-all-result-icon" class="result-icon"></span>\n        <span id="after-all-description" class="description">Results from After All Hook</span>\n    </summary>\n    <div id="after-all-results" class="results"></div>\n</details>\n<details id="required-after-any-details" class="hook">\n    <summary id="required-after-any-summary">\n        <span id="required-after-any-result-icon" class="result-icon"></span>\n        <span id="required-after-any-description" class="description">Results from Required After Any Hook</span>\n    </summary>\n    <div id="required-after-any-results" class="results"></div>\n</details>\n\n<template id="prompt-template">\n    <div class="prompt" part="prompt">\n        <div class="prompt-display">\n            <span class="icon prompt-icon"></span>\n            <span class="label prompt-label"></span>\n        </div>\n        <div class="prompt-actions">\n            <button class="prompt-button accept" type="button">Accept</button>\n            <button class="prompt-button reject" type="button">Reject</button>\n        </div>\n    </div>\n</template>';
-
-// src/api.ts
-var TestPromise = class extends Promise {
-  async toBeDefined(valueName) {
-    const target = await this;
-    if (target == void 0) {
-      throw new Error(`${valueName != null ? valueName : "Value"} is undefined`);
-    }
-  }
-  async toBe(value, exact = false) {
-    const target = await this;
-    const result = exact == true ? target === value : target == value;
-    if (result == false) {
-      throw new Error(`  Value is not equal.
-  Expected: ${value}
-  Result: ${target}`);
-    }
-  }
-  async toContainText(value) {
-    const target = await this;
-  }
-  async toHaveAttribute(value) {
-    const target = await this;
-    if (!(target instanceof HTMLElement)) {
-      throw new Error("Unable to check for attribute on non-HTMLElement target");
-    }
-    if (target.getAttribute(value)) {
-      throw new Error("Taret does not have attribute");
-    }
-  }
+const html = '<details id="component-details" class="details">\n    <summary id="component-summary" class="summary">\n        <svg class="icon arrow-icon"><use href="#icon-definition_arrow"></use></svg>\n        <slot name="header">\n            <header id="header">\n                <span id="component-result-icon" class="result-icon"></span>\n                <span id="title"><slot name="title"><span id="title-text">Tests</span></slot></span>\n                <slot name="reload-button">\n                    <button type="button" id="reload-button" title="Reload">\n                        <slot name="reload-button-content">\n                            <slot name="reload-button-icon"><svg class="icon reset-icon reload-button-icon"><use href="#icon-definition_reset"></use></svg></slot>\n                            <slot name="reload-button-label"><span class="reload-button-label button-label label icon">Reload</span></slot>\n                        </slot>\n                    </button>\n                </slot>\n                <slot name="run-all-button">\n                    <button type="button" id="run-all-button" title="Run All Tests">\n                        <slot name="run-all-button-content">\n                            <slot name="run-all-button-icon"><svg class="icon arrow-icon run-button-icon run-all-button-icon"><use href="#icon-definition_arrow"></use></svg></slot>\n                            <slot name="run-all-button-label"><span class="run-all-button-label run-button-label button-label label icon">Run Tests</span></slot>\n                        </slot>\n                    </button>\n                </slot>\n                <slot name="header-details"></slot>\n            </header>\n        </slot>\n    </summary>\n    <div id="component-content" class="content">\n        <details id="required-before-any-details" class="hook">\n            <summary id="required-before-any-summary">\n                <svg class="icon arrow-icon"><use href="#icon-definition_arrow"></use></svg>\n                <span id="required-before-any-result-icon" class="result-icon"></span>\n                <span id="required-before-any-description" class="description hook-name">Required Before Any Hook</span>\n            </summary>\n            <div class="results">\n                <div id="required-before-any-results" class="result message"></div>\n            </div>\n        </details>\n        <details id="before-all-details" class="hook">\n            <summary id="before-all-summary">\n                <svg class="icon arrow-icon"><use href="#icon-definition_arrow"></use></svg>\n                <span id="before-all-result-icon" class="result-icon"></span>\n                <span id="before-all-description" class="description hook-name">Before All Hook</span>\n            </summary>\n            <div class="results">\n                <div id="before-all-results" class="result message"></div>\n            </div>\n        </details>\n        <div id="tests"></div>\n        <details id="after-all-details" class="hook">\n            <summary id="after-all-summary">\n                <svg class="icon arrow-icon"><use href="#icon-definition_arrow"></use></svg>\n                <span id="after-all-result-icon" class="result-icon"></span>\n                <span id="after-all-description" class="description hook-name">After All Hook</span>\n            </summary>\n            <div class="results">\n                <div id="after-all-results" class="result message"></div>\n            </div>\n        </details>\n        <details id="required-after-any-details" class="hook">\n            <summary id="required-after-any-summary">\n                <svg class="icon arrow-icon"><use href="#icon-definition_arrow"></use></svg>\n                <span id="required-after-any-result-icon" class="result-icon"></span>\n                <span id="required-after-any-description" class="description hook-name">Required After Any Hook</span>\n            </summary>\n            <div class="results">\n                <div id="required-after-any-results" class="result message"></div>\n            </div>\n        </details>\n    </div>\n    \n    <slot name="footer">\n        <foooter id="footer">\n            <span id="group-results">\n                <span id="duration">\n                    <span id="duration-label">Duration</span>\n                    <span id="duration-value"></span>\n                    <span id="duration-unit">ms</span>\n                </span>\n                <span id="results-progress">\n                    <progress id="results-progress-value"></progress>\n                </span>\n                <span id="passed-total-pair">\n                    <span id="total-tests-passed-value"></span>\n                    <span id="passed-total-delimiter">of</span>\n                    <span id="total-tests-count-value"></span>\n                    <span id="total-tests-passed-label">Passed</span>\n                </span>\n                <span id="passed-total-percent">\n                    <span id="passed-total-percent-value"></span>\n                    <span id="passed-total-percent-label">%</span>\n                </span>\n            </span>\n        </foooter>\n    </slot>\n</details>\n<template id="prompt-template">\n    <div class="prompt">\n        <div class="prompt-display">\n            <span class="icon prompt-icon"></span>\n            <span class="label prompt-label"></span>\n        </div>\n        <div class="prompt-actions">\n            <button class="prompt-button accept" type="button">Accept</button>\n            <button class="prompt-button reject" type="button">Reject</button>\n        </div>\n    </div>\n</template>\n<div id="icon-definitions" style="display: none;">\n    <svg id="icon-definition_arrow" viewBox="0 0 8 8" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">\n        <path d="m3.26,6.81l-2.93,-4.69c-0.37,-0.58 0.05,-1.34 0.74,-1.34l5.87,0c0.69,0 1.11,0.76 0.74,1.34l-2.93,4.69c-0.35,0.55 -1.14,0.55 -1.49,0z" fill="var(--fill-color, currentcolor)" />\n    </svg>\n    <svg id="icon-definition_reset" class="icon reset" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">\n        <path\n            style="fill:var(--fill-color, currentcolor);stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none;paint-order:markers stroke fill"\n            d="M 5.484375 0.43359375 A 1.5224222 1.5224222 0 0 0 4.2558594 1.2011719 L 0.99804688 6.9453125 A 1.5224222 1.5224222 0 0 0 2.5488281 9.2011719 L 9.34375 8.171875 A 1.5224222 1.5224222 0 0 0 10.332031 5.7539062 L 9.4746094 4.6113281 C 11.949333 3.8016718 14.718209 4.258351 16.822266 5.9570312 C 19.510764 8.1275534 20.456787 11.785479 19.160156 14.988281 C 17.863527 18.191083 14.6405 20.15873 11.199219 19.847656 C 7.7579362 19.536584 4.9376009 17.022073 4.2363281 13.638672 A 1.5 1.5 0 0 0 2.4628906 12.474609 A 1.5 1.5 0 0 0 1.2988281 14.248047 C 2.2656928 18.912838 6.1831413 22.407052 10.927734 22.835938 C 15.672328 23.264824 20.153706 20.531029 21.941406 16.115234 C 23.729107 11.699441 22.413741 6.6156073 18.707031 3.6230469 C 16.853677 2.1267667 14.61485 1.3255701 12.347656 1.2324219 C 10.738216 1.1662975 9.1150542 1.4598646 7.6035156 2.1132812 L 6.7988281 1.0390625 A 1.5224222 1.5224222 0 0 0 5.484375 0.43359375 z " />\n    </svg>\n    <svg id="icon-definition_cancel" class="icon cancel" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">\n    <path\n        style="fill:var(--fill-color, currentcolor);stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none;paint-order:markers stroke fill"\n        d="M -7.063234 9.5244002 C -5.8135728 7.6769245 -5.0820528 5.453265 -5.0820528 3.0633809 C -5.0820529 -3.3096433 -10.278145 -8.5098163 -16.65117 -8.5098163 C -23.024193 -8.5098163 -28.22385 -3.3110105 -28.22385 3.0620137 C -28.22385 9.4350379 -23.025043 14.634694 -16.65202 14.634694 C -12.668879 14.634694 -9.1460028 12.603526 -7.063234 9.5244002 z M -9.5406311 7.8637601 C -11.076991 10.143147 -13.683157 11.63463 -16.652974 11.63463 C -19.960499 11.63463 -22.814085 9.782061 -24.244824 7.0543029 L -24.236684 7.0527515 L -8.1332524 3.983715 L -8.1305391 3.9831979 C -8.2815631 5.4121635 -8.7798709 6.7350751 -9.5406311 7.8637601 z M -9.0610781 -0.92890828 L -9.069218 -0.92735695 L -25.17265 2.1416796 L -25.175363 2.1421967 C -24.719122 -2.1725739 -21.093311 -5.5092358 -16.652928 -5.5092358 C -13.345403 -5.5092358 -10.491243 -3.6566663 -9.0610781 -0.92890828 z "\n        transform="rotate(-124.20981)" />\n    </svg>\n</div>';
+const CodeTestEvent = {
+  BeforeAll: "beforeall",
+  AfterAll: "afterall",
+  BeforeTest: "beforetest",
+  AfterTest: "aftertest",
+  BeforeHook: "beforehook",
+  AfterHook: "afterhook",
+  Cancel: "cancel",
+  Context: "context",
+  Reset: "reset"
 };
-var CodeTests = class _CodeTests {
-  static timeoutMS = 500;
-  static #expectInterval;
-  static #expectPromise;
-  static expect(value) {
-    const promise = new TestPromise(async (resolve, reject) => {
-      if (value instanceof Promise) {
-        const result = await value;
-        resolve(result);
-        return;
-      }
-      resolve(value);
-    });
-    return promise;
+const COMPONENT_TAG_NAME$1 = "code-test";
+class CodeTestElement extends HTMLElement {
+  state = {
+    testId: "",
+    description: "none",
+    isDisabled: false,
+    testState: void 0,
+    beforeEachState: void 0,
+    afterEachState: void 0
+  };
+  setState(state) {
+    this.state = state;
+    this.#render();
   }
-  static expectSync(value) {
-    const promise = new TestPromise(async (resolve, reject) => {
-      if (value instanceof Promise) {
-        const result = await value;
-        resolve(result);
-        return;
-      }
-      resolve(value);
+  setStateProperties(state) {
+    this.setState({
+      ...this.state,
+      ...state
     });
-    return promise;
   }
-  static expectBefore(value) {
-    const promise = new TestPromise(async (resolve, reject) => {
-      if (value instanceof Promise) {
-        const result = await value;
-        resolve(result);
-        return;
+  setTestStateProperties(key, state) {
+    if (this.state[key] == null) {
+      return;
+    }
+    this.setState({
+      ...this.state,
+      [key]: {
+        ...this.state[key],
+        ...state
       }
-      resolve(value);
     });
-    return promise;
   }
-  static async prompt(host, parent, message, options) {
-    return new Promise((resolve, reject) => {
-      const template = host.findElement("prompt-template");
-      const promptElement = _CodeTests.createElementFromTemplate(template);
-      promptElement.querySelector(".label").textContent = message;
-      const clickHandler = (event) => {
-        const composedPath = event.composedPath();
-        const acceptButton = composedPath.find((item) => item instanceof HTMLButtonElement && item.classList.contains("accept"));
-        if (acceptButton != null) {
-          const result = options?.onAccept?.() ?? true;
-          promptElement.removeEventListener("click", clickHandler);
-          resolve(result);
-          return;
-        }
-        const rejectButton = composedPath.find((item) => item instanceof HTMLButtonElement && item.classList.contains("reject"));
-        if (rejectButton != null) {
-          const result = options?.onReject?.() ?? false;
-          promptElement.removeEventListener("click", clickHandler);
-          resolve(result);
-          return;
-        }
-      };
-      promptElement.addEventListener("click", clickHandler);
-      if (options?.acceptLabel != null) {
-        promptElement.querySelector(".accept").textContent = options.acceptLabel;
-      }
-      if (options?.rejectLabel != null) {
-        promptElement.querySelector(".reject").textContent = options.rejectLabel;
-      }
-      const details = parent instanceof HTMLDetailsElement ? parent : parent.querySelector(".test-details");
-      if (details != null) {
-        details.open = true;
-      }
-      parent.querySelector(".result")?.append(promptElement);
-    });
+  findElement(query) {
+    return this.querySelector(query);
   }
-  static createElementFromTemplate(target, parent) {
-    const templateNode = target instanceof HTMLTemplateElement ? target : document.querySelector(target);
-    if (templateNode == null) {
-      throw new Error(`Unable to find template element from selector: ${target}`);
-    }
-    const firstChild = templateNode.content.cloneNode(true).querySelector("*");
-    if (firstChild == null) {
-      throw new Error(`Unable to find first child of template element`);
-    }
-    parent?.append(firstChild);
-    return firstChild;
+  findElements(query) {
+    return Array.from(this.querySelectorAll(query));
   }
-};
-function expect(value) {
-  return CodeTests.expect(value);
-}
-function prompt(host, parent, message, options) {
-  return CodeTests.prompt(host, parent, message, options);
-}
-
-// node_modules/.pnpm/ce-part-utils@0.0.0/node_modules/ce-part-utils/dist/ce-part-utils.js
-var DEFAULT_ELEMENT_SELECTOR = ":not(slot,defs,g,rect,path,circle,ellipse,line,polygon,text,tspan,use,svg image,svg title,desc,template,template *)";
-function assignClassAndIdToPart(shadowRoot) {
-  const identifiedElements = [...shadowRoot.querySelectorAll(`${DEFAULT_ELEMENT_SELECTOR}[id]`)];
-  for (let i = 0; i < identifiedElements.length; i++) {
-    identifiedElements[i].part.add(identifiedElements[i].id);
+  isRunning() {
+    return this.state.testState?.isRunning == true || this.state.beforeEachState?.isRunning == true || this.state.afterEachState?.isRunning == true;
   }
-  const classedElements = [...shadowRoot.querySelectorAll(`${DEFAULT_ELEMENT_SELECTOR}[class]`)];
-  for (let i = 0; i < classedElements.length; i++) {
-    classedElements[i].part.add(...classedElements[i].classList);
+  hasRun() {
+    return this.state.testState?.hasRun == true || this.state.beforeEachState?.hasRun == true || this.state.afterEachState?.hasRun == true;
   }
-}
-
-// src/code-tests.ts
-var HookType = /* @__PURE__ */ ((HookType2) => {
-  HookType2["BeforeAll"] = "beforeall";
-  HookType2["AfterAll"] = "afterall";
-  HookType2["BeforeEach"] = "beforeeach";
-  HookType2["AfterEach"] = "aftereach";
-  HookType2["RequiredBeforeAny"] = "requiredbeforeany";
-  HookType2["RequiredAfterAny"] = "requiredafterany";
-  return HookType2;
-})(HookType || {});
-var CodeTestEventType = /* @__PURE__ */ ((CodeTestEventType2) => {
-  CodeTestEventType2["BeforeAll"] = "beforeall";
-  CodeTestEventType2["AfterAll"] = "afterall";
-  CodeTestEventType2["BeforeTest"] = "beforetest";
-  CodeTestEventType2["AfterTest"] = "aftertest";
-  CodeTestEventType2["Cancel"] = "cancel";
-  return CodeTestEventType2;
-})(CodeTestEventType || {});
-var NOTESTDEFINED = Symbol("No Test Defined");
-var COMPONENT_STYLESHEET = new CSSStyleSheet();
-COMPONENT_STYLESHEET.replaceSync(code_tests_default);
-var COMPONENT_TAG_NAME = "code-tests";
-var CodeTestsElement = class extends HTMLElement {
-  componentParts = /* @__PURE__ */ new Map();
-  getElement(id) {
-    if (this.componentParts.get(id) == null) {
-      const part = this.findElement(id);
-      if (part != null) {
-        this.componentParts.set(id, part);
+  resultCategory() {
+    const testCategory = this.state.testState?.resultCategory ?? "none";
+    const beforeEachCategory = this.state.beforeEachState?.resultCategory ?? "none";
+    const afterEachCategory = this.state.afterEachState?.resultCategory ?? "none";
+    if (testCategory == "none" && beforeEachCategory == "none" && afterEachCategory == "none") {
+      return "none";
+    }
+    if (this.state.beforeEachState == null && this.state.afterEachState == null) {
+      return testCategory;
+    } else if (this.state.beforeEachState != null && this.state.afterEachState == null) {
+      if (testCategory == "fail" || beforeEachCategory == "fail") {
+        return "fail";
+      }
+      if (testCategory == "success" && beforeEachCategory == "success") {
+        return "success";
+      }
+      return "none";
+    } else if (this.state.beforeEachState == null && this.state.afterEachState != null) {
+      if (testCategory == "fail" || afterEachCategory == "fail") {
+        return "fail";
+      }
+      if (testCategory == "success" && afterEachCategory == "success") {
+        return "success";
       }
+      return "none";
+    } else if (this.state.beforeEachState != null && this.state.afterEachState != null) {
+      if (testCategory == "fail" || beforeEachCategory == "fail" || afterEachCategory == "fail") {
+        return "fail";
+      }
+      if (testCategory == "success" && beforeEachCategory == "success" && afterEachCategory == "success") {
+        return "success";
+      }
+      return "none";
     }
-    return this.componentParts.get(id);
-  }
-  findElement(id) {
-    return this.shadowRoot.getElementById(id);
-  }
-  #hooks = {};
-  #continueRunningTests = true;
-  constructor() {
-    super();
-    this.attachShadow({ mode: "open" });
-    this.shadowRoot.innerHTML = code_tests_default2;
-    this.shadowRoot.adoptedStyleSheets.push(COMPONENT_STYLESHEET);
-    this.#boundClickHandler = this.#onClick.bind(this);
   }
   connectedCallback() {
-    assignClassAndIdToPart(this.shadowRoot);
-    this.addEventListener("click", this.#boundClickHandler);
-    if (this.getAttribute("auto") == "false") {
-      return;
+    this.#render();
+  }
+  #render() {
+    const resultMessage = this.state.testState == null ? "" : typeof this.state.testState.resultContent == "boolean" ? this.state.testState.resultContent == true ? `<code class="code" part="code"><pre class="pre success-message" part="pre success-message">Passed</pre></code>` : `<code class="code" part="code"><pre class="pre error-message" part="pre error-message">Failed</pre></code>` : typeof this.state.testState.resultContent == "number" ? `<code class="code" part="code"><pre class="pre success-message" part="pre success-message">Passed: ${this.state.testState.resultContent.toString()}</pre></code>` : typeof this.state.testState.resultContent == "string" ? this.state.testState.resultContent : "";
+    this.innerHTML = `<details class="test-details" part="test-details" ${this.isRunning() == true || this.hasRun() == true ? " open" : ""}>
+            <summary class="test-summary" part="test-summary">
+                <svg class="icon arrow-icon"><use href="#icon-definition_arrow"></use></svg>
+                <div class="result-icon test-result-icon${this.state.testState?.resultCategory != "none" ? ` ${this.state.testState?.resultCategory}` : ""}" part="result-icon"></div>
+                <span class="test-description description">${this.state.description}</span>
+                ${this.state.testState?.duration != null && this.state.testState.duration > 0 ? `<span class="test-duration duration">
+                        <span class="test-duration-value">${this.state.testState.duration > 10 ? this.state.testState.duration.toFixed(0) : this.state.testState.duration.toFixed(2)}</span>
+                        <span class="test-duration-unit">ms</span>
+                    </span>` : ""}
+                <button type="button" class="run-test-button" part="run-test-button" title="Run Test"${this.state.isDisabled == true ? " disabled" : ""}>
+                    <slot name="run-button-content">
+                        <slot name="run-button-icon"><svg class="icon arrow-icon run-button-icon"><use href="#icon-definition_arrow"></use></svg></slot>
+                        <slot name="run-button-label"><span class="run-button-label button-label label icon">Run Test</span></slot>
+                    </slot>
+                </button>
+            </summary>
+            <div class="results" part="results">
+                ${this.state.beforeEachState == null ? "" : `<details class="before-each-details hook${this.state.beforeEachState.resultCategory == "none" ? "" : ` ${this.state.beforeEachState.resultCategory}`}${this.state.beforeEachState.isRunning == true ? " running" : ""}" part="before-each-details hook">
+                        <summary class="before-each-summary" part="before-each-summary">
+                            <svg class="icon arrow-icon"><use href="#icon-definition_arrow"></use></svg>
+                            <div class="before-each-result-icon result-icon${this.state.beforeEachState.resultCategory != "none" ? ` ${this.state.beforeEachState.resultCategory}` : ""}" part="before-each-result-icon"></div>
+                            <span class="before-each-description description hook-name">Before Each Hook</span>
+                        </summary>
+                        <div class="before-each-result result message" part="before-each-result result message">${typeof this.state.beforeEachState.resultContent != "string" ? "" : this.state.beforeEachState.resultContent}</div>
+                    </details>`}
+                ${this.state.testState == null ? "" : this.state.beforeEachState == null && this.state.afterEachState == null ? `<div class="test-result result message" part="test-result result message">${resultMessage}</div>` : `<details class="processing-details${this.state.testState.resultCategory == "none" ? "" : ` ${this.state.testState.resultCategory}`}${this.state.testState.isRunning == true ? " running" : ""}" part="processing-details"${this.state.testState.hasRun == true ? " open" : ""}>
+                        <summary class="processing-summary" part="processing-summary">
+                            <svg class="icon arrow-icon"><use href="#icon-definition_arrow"></use></svg>
+                            <div class="processing-result-icon result-icon${this.state.testState.resultCategory != "none" ? ` ${this.state.testState.resultCategory}` : ""}" part="processing-result-icon result-icon"></div>
+                            <span class="processing-description description">Test</span>
+                        </summary>
+                        <div class="test-result result message" part="test-result result message">${resultMessage}</div>
+                    </details>`}                
+                ${this.state.afterEachState == null ? "" : `<details class="after-each-details hook${this.state.afterEachState.resultCategory == "none" ? "" : ` ${this.state.afterEachState.resultCategory}`}${this.state.afterEachState.isRunning == true ? " running" : ""}" part="after-each-detail hooks">
+                        <summary class="after-each-summary" part="after-each-summary">
+                            <svg class="icon arrow-icon"><use href="#icon-definition_arrow"></use></svg>
+                            <div class="after-each-result-icon result-icon${this.state.afterEachState.resultCategory != "none" ? ` ${this.state.afterEachState.resultCategory}` : ""}" part="before-each-result-icon"></div>
+                            <span class="after-each-description description hook-name">After Each Hook</span>
+                        </summary>
+                        <div class="after-each-result result message" part="after-each-result result message">${typeof this.state.afterEachState.resultContent != "string" ? "" : this.state.afterEachState.resultContent}</div>
+                    </details>`}
+            </div>
+        </details>`;
+    this.dataset.testId = this.state.testId;
+    this.classList.add("test");
+    this.part.add("test");
+    this.toggleAttribute("success", this.resultCategory() == "success");
+    this.classList.toggle("success", this.resultCategory() == "success");
+    this.part.toggle("success", this.resultCategory() == "success");
+    this.classList.toggle("fail", this.resultCategory() == "fail");
+    this.part.toggle("fail", this.resultCategory() == "fail");
+    this.classList.toggle("running", this.isRunning());
+    this.part.toggle("running", this.isRunning());
+    if (this.state.beforeEachState?.resultContent instanceof HTMLElement) {
+      this.querySelector(".before-each-result").append(this.state.beforeEachState.resultContent);
     }
-    const testsPath = this.#getCurrentTestsPath();
-    if (testsPath == null) {
-      return;
+    if (this.state.testState?.resultContent instanceof HTMLElement) {
+      this.querySelector(".test-result").append(this.state.testState.resultContent);
+    }
+    if (this.state.afterEachState?.resultContent instanceof HTMLElement) {
+      this.querySelector(".after-each-result").append(this.state.afterEachState.resultContent);
     }
-    this.loadTests(testsPath);
   }
-  disconnectedCallback() {
-    this.removeEventListener("click", this.#boundClickHandler);
+  enable() {
+    this.state.isDisabled = false;
+    this.findElement(".run-test-button").toggleAttribute("disabled", false);
   }
-  #boundClickHandler;
-  #onClick(event) {
-    const runButton = event.composedPath().find((item) => item instanceof HTMLButtonElement && item.classList.contains("run"));
-    if (runButton == null) {
+  disable() {
+    this.state.isDisabled = true;
+    this.findElement(".run-test-button").toggleAttribute("disabled", true);
+  }
+  async runTest(contextManager, testContext) {
+    if (this.state.testState?.test == null) {
       return;
     }
-    const parentListItem = runButton.closest("li");
-    if (parentListItem == null) {
-      const isRunAll = runButton.hasAttribute("data-all");
-      if (isRunAll == true) {
-        if (this.classList.contains("running")) {
-          if (this.classList.contains("canceled")) {
-            return;
-          }
-          this.cancel();
-        } else {
-          this.runTests();
-        }
+    this.reset();
+    let testResult;
+    let stateProperties = {};
+    let duration = 0;
+    try {
+      if (contextManager.shouldContinueRunningTests == false) {
+        throw new Error("Tests have been disabled from continuing to run.");
       }
-      return;
+      const allowTest = this.dispatchEvent(new CustomEvent(CodeTestEvent.BeforeTest, { bubbles: true, cancelable: true, composed: true, detail: { testElement: this } }));
+      if (allowTest == false) {
+        throw new Error("Test has been prevented.");
+      }
+      if (testContext.codeTestsElement.state.isCanceled == true) {
+        throw new Error("Testing has been canceled.");
+      }
+      this.setTestStateProperties("testState", { isRunning: true });
+      contextManager.codeTestsElement.setState(contextManager.codeTestsElement.state);
+      const startTime = performance?.now() ?? Date.now();
+      testResult = await this.state.testState.test(testContext);
+      const endTime = performance?.now() ?? Date.now();
+      duration = endTime - startTime;
+      this.setTestStateProperties("testState", { isRunning: false, hasRun: true });
+      contextManager.codeTestsElement.setState(contextManager.codeTestsElement.state);
+      const testParsedResult = contextManager.parseTestResult(testResult, true);
+      stateProperties = {
+        testState: {
+          test: this.state.testState.test,
+          resultContent: testParsedResult.result,
+          resultCategory: testParsedResult.resultCategory,
+          hasRun: this.state.testState.hasRun,
+          isRunning: false,
+          duration
+        }
+      };
+    } catch (error) {
+      const errorParsedResult = contextManager.parseTestResult(testResult, false, error);
+      stateProperties = {
+        testState: {
+          test: this.state.testState.test,
+          resultContent: errorParsedResult.result,
+          resultCategory: errorParsedResult.resultCategory,
+          hasRun: this.state.testState.hasRun,
+          isRunning: false,
+          duration
+        }
+      };
+      console.error(error);
+      contextManager.shouldContinueRunningTests = false;
+    } finally {
+      this.setStateProperties({ ...stateProperties });
+      contextManager.codeTestsElement.setState(contextManager.codeTestsElement.state);
+      this.dispatchEvent(new CustomEvent(CodeTestEvent.AfterTest, { bubbles: true, cancelable: true, composed: true, detail: { testElement: this } }));
     }
-    const testId = parentListItem.dataset.testId;
-    if (testId == null) {
+  }
+  reset() {
+    const testState = this.state.testState != null ? {
+      resultCategory: "none",
+      resultContent: "",
+      test: this.state.testState.test,
+      hasRun: this.state.testState.hasRun,
+      isRunning: this.state.testState.isRunning,
+      duration: 0
+    } : void 0;
+    if (testState == void 0) {
       return;
     }
-    const test = this.#tests.get(testId);
-    if (test == null) {
-      return;
+    this.setTestStateProperties("testState", testState);
+  }
+  getMessageElement() {
+    return this.findElement(".test-result");
+  }
+  static observedAttributes = ["open"];
+  attributeChangedCallback(attributeName, _oldValue, newValue) {
+    if (attributeName == "open") {
+      this.findElement(".test-details").toggleAttribute("open", newValue != void 0);
     }
-    this.isCanceled = false;
-    this.classList.remove("canceled");
-    this.part.remove("canceled");
-    this.#runTest(testId, test);
   }
-  #getCurrentTestsPath() {
-    return this.getAttribute("src") ?? this.getAttribute("test") ?? this.getAttribute("tests") ?? this.getAttribute("run") ?? this.getAttribute("path");
+}
+if (customElements.get(COMPONENT_TAG_NAME$1) == null) {
+  customElements.define(COMPONENT_TAG_NAME$1, CodeTestElement);
+}
+const NOTESTDEFINED = /* @__PURE__ */ Symbol("No Test Defined");
+class ContextManager {
+  codeTestsElement;
+  // testContext?: TestContext;
+  constructor(parent) {
+    this.codeTestsElement = parent;
   }
-  async loadTests(testsPath) {
-    const path = testsPath ?? this.#getCurrentTestsPath();
+  //#region Loading
+  async loadTests(path) {
     if (path == null) {
       return;
     }
     try {
-      this.getElement("tests").innerHTML = "";
-      this.#tests.clear();
-      this.classList.remove("has-before-hook");
-      this.classList.remove("has-after-hook");
-      const lastSlashIndexInCurrentPath = window.location.href.lastIndexOf("/");
-      const currentPathHasExtension = window.location.href.substring(lastSlashIndexInCurrentPath).indexOf(".") != -1;
-      const currentPath = currentPathHasExtension == true ? window.location.href.substring(0, lastSlashIndexInCurrentPath + 1) : window.location.href;
-      const moduleDirectory = currentPath + path.substring(0, path.lastIndexOf("/") + 1);
-      const modulePath = currentPath + path;
-      let moduleContent = await (await fetch(modulePath)).text();
-      moduleContent = moduleContent.replaceAll(/['"`](((\.\/)|(\.\.\/))+(.*))['"`]/g, `'${moduleDirectory}$1'`);
-      const moduleFile = new File([moduleContent], path.substring(path.lastIndexOf("/")), { type: "text/javascript" });
-      const moduleURL = URL.createObjectURL(moduleFile);
-      const module = await import(moduleURL);
-      const tests = module.tests ?? module.default;
-      if (tests == void 0) {
-        throw new Error(`Unable to find tests definition in file at path: ${path}`);
-      }
-      const beforeAll = tests["beforeall" /* BeforeAll */];
-      if (beforeAll != null) {
-        this.#hooks["beforeall" /* BeforeAll */] = beforeAll;
-        delete tests["beforeall" /* BeforeAll */];
-        this.classList.add("has-before-hook");
-      }
-      const afterAll = tests["afterall" /* AfterAll */];
-      if (afterAll != null) {
-        this.#hooks["afterall" /* AfterAll */] = afterAll;
-        delete tests["afterall" /* AfterAll */];
-        this.classList.add("has-after-hook");
-      }
-      const beforeEach = tests["beforeeach" /* BeforeEach */];
-      if (beforeEach != null) {
-        this.#hooks["beforeeach" /* BeforeEach */] = beforeEach;
-        delete tests["beforeeach" /* BeforeEach */];
-      }
-      const afterEach = tests["aftereach" /* AfterEach */];
-      if (afterEach != null) {
-        this.#hooks["aftereach" /* AfterEach */] = afterEach;
-        delete tests["aftereach" /* AfterEach */];
-      }
-      const requiredBeforeAny = tests["requiredbeforeany" /* RequiredBeforeAny */];
-      if (requiredBeforeAny != null) {
-        this.#hooks["requiredbeforeany" /* RequiredBeforeAny */] = requiredBeforeAny;
-        delete tests["requiredbeforeany" /* RequiredBeforeAny */];
-        this.classList.add("has-required-before-hook");
-        this.part.add("has-required-before-hook");
-      }
-      const requiredAfterAny = tests["requiredafterany" /* RequiredAfterAny */];
-      if (requiredAfterAny != null) {
-        this.#hooks["requiredafterany" /* RequiredAfterAny */] = requiredAfterAny;
-        delete tests["requiredafterany" /* RequiredAfterAny */];
-        this.classList.add("has-required-after-hook");
-        this.part.add("has-required-after-hook");
-      }
+      const { tests, hooks } = await this.#loadTests(path);
+      const beforeAll = hooks[Hook.BeforeAll];
+      const afterAll = hooks[Hook.AfterAll];
+      const beforeEach = hooks[Hook.BeforeEach];
+      const afterEach = hooks[Hook.AfterEach];
+      const requiredBeforeAny = hooks[Hook.RequiredBeforeAny];
+      const requiredAfterAny = hooks[Hook.RequiredAfterAny];
+      const beforeAllState = beforeAll == null ? void 0 : { resultCategory: "none", resultContent: "", test: beforeAll, hasRun: false, isRunning: false, duration: 0 };
+      const afterAllState = afterAll == null ? void 0 : { resultCategory: "none", resultContent: "", test: afterAll, hasRun: false, isRunning: false, duration: 0 };
+      const beforeEachState = beforeEach == null ? void 0 : { resultCategory: "none", resultContent: "", test: beforeEach, hasRun: false, isRunning: false, duration: 0 };
+      const afterEachState = afterEach == null ? void 0 : { resultCategory: "none", resultContent: "", test: afterEach, hasRun: false, isRunning: false, duration: 0 };
+      const requiredBeforeAnyState = requiredBeforeAny == null ? void 0 : { resultCategory: "none", resultContent: "", test: requiredBeforeAny, hasRun: false, isRunning: false, duration: 0 };
+      const requiredAfterAnyState = requiredAfterAny == null ? void 0 : { resultCategory: "none", resultContent: "", test: requiredAfterAny, hasRun: false, isRunning: false, duration: 0 };
+      this.codeTestsElement.state.beforeEachState = beforeEachState;
+      this.codeTestsElement.state.afterEachState = afterEachState;
       for (const [description, test] of Object.entries(tests)) {
         this.#addTest(description, test);
       }
+      this.codeTestsElement.setStateProperties({
+        beforeAllState,
+        afterAllState,
+        beforeEachState,
+        afterEachState,
+        requiredBeforeAnyState,
+        requiredAfterAnyState,
+        resetHook: hooks.reset,
+        contextHook: hooks.context
+      });
     } catch (error) {
-      this.#addProcessError("An error occurred while loading the tasks:", error);
+      console.error(error);
     }
   }
-  isCanceled = false;
-  cancel() {
-    this.isCanceled = true;
-    this.classList.add("canceled");
-    this.part.add("canceled");
-    this.dispatchEvent(new CustomEvent("cancel" /* Cancel */, { bubbles: true, composed: true }));
+  async #loadTests(path) {
+    const module = await this.#loadModule(path);
+    const tests = module.tests ?? module.default;
+    if (tests == void 0) {
+      throw new Error(`Unable to find tests definition in file at path: ${path}`);
+    }
+    const hooks = {};
+    const beforeAll = tests[Hook.BeforeAll];
+    if (beforeAll != null) {
+      hooks[Hook.BeforeAll] = beforeAll;
+      delete tests[Hook.BeforeAll];
+    }
+    const afterAll = tests[Hook.AfterAll];
+    if (afterAll != null) {
+      hooks[Hook.AfterAll] = afterAll;
+      delete tests[Hook.AfterAll];
+    }
+    const beforeEach = tests[Hook.BeforeEach];
+    if (beforeEach != null) {
+      hooks[Hook.BeforeEach] = beforeEach;
+      delete tests[Hook.BeforeEach];
+    }
+    const afterEach = tests[Hook.AfterEach];
+    if (afterEach != null) {
+      hooks[Hook.AfterEach] = afterEach;
+      delete tests[Hook.AfterEach];
+    }
+    const requiredBeforeAny = tests[Hook.RequiredBeforeAny];
+    if (requiredBeforeAny != null) {
+      hooks[Hook.RequiredBeforeAny] = requiredBeforeAny;
+      delete tests[Hook.RequiredBeforeAny];
+    }
+    const requiredAfterAny = tests[Hook.RequiredAfterAny];
+    if (requiredAfterAny != null) {
+      hooks[Hook.RequiredAfterAny] = requiredAfterAny;
+      delete tests[Hook.RequiredAfterAny];
+    }
+    const resetHook = tests[Hook.Reset];
+    if (resetHook != null) {
+      hooks[Hook.Reset] = resetHook;
+      delete tests[Hook.Reset];
+    }
+    const contextHook = tests[Hook.Context];
+    if (contextHook != null) {
+      hooks[Hook.Context] = contextHook;
+      delete tests[Hook.Context];
+    }
+    return { tests, hooks };
   }
-  async runTests() {
-    this.dispatchEvent(new CustomEvent("beforeall" /* BeforeAll */, { bubbles: true, composed: true }));
-    this.#continueRunningTests = true;
-    this.classList.add("running");
-    this.isCanceled = false;
-    this.classList.remove("canceled");
-    this.part.remove("canceled");
-    this.toggleAttribute("success", false);
-    const playButtonLabel = this.findElement("play-button-label");
-    if (playButtonLabel != null) {
-      playButtonLabel.textContent = "Cancel";
-    }
-    this.#clearTestStatuses();
-    const inOrder = this.hasAttribute("in-order");
-    const requiredBeforeHook = this.#hooks["requiredbeforeany" /* RequiredBeforeAny */];
-    if (requiredBeforeHook != null) {
-      let hookResult;
-      try {
-        const requiredBeforeAnyHookElement = this.getElement(`required-before-any-details`);
-        requiredBeforeAnyHookElement.classList.add("running");
-        requiredBeforeAnyHookElement.part.add("running");
-        if (this.isCanceled == true) {
-          throw new Error("Test has been cancelled");
-        }
-        hookResult = await requiredBeforeHook(this, requiredBeforeAnyHookElement);
-        this.#handleHookResult(hookResult, true, "before", true);
-        requiredBeforeAnyHookElement.part.remove("running");
-        requiredBeforeAnyHookElement.classList.remove("running");
-      } catch (error) {
-        this.#handleHookResult(hookResult, false, "before", true, error);
-        console.error(error);
-        this.#continueRunningTests = false;
-        this.classList.remove("running");
-        this.part.remove("running");
-        if (playButtonLabel != null) {
-          playButtonLabel.textContent = "Run Tests";
-        }
-        this.dispatchEvent(new CustomEvent("afterall" /* AfterAll */, { bubbles: true, composed: true }));
-        return;
+  async #loadModule(path) {
+    const lastSlashIndexInCurrentPath = window.location.href.lastIndexOf("/");
+    const currentPathHasExtension = window.location.href.substring(lastSlashIndexInCurrentPath).indexOf(".") != -1;
+    const currentPath = currentPathHasExtension == true ? window.location.href.substring(0, lastSlashIndexInCurrentPath + 1) : window.location.href;
+    const moduleDirectory = currentPath + path.substring(0, path.lastIndexOf("/") + 1);
+    const modulePath = currentPath + path;
+    let moduleContent = await (await fetch(modulePath)).text();
+    moduleContent = moduleContent.replaceAll(/['"`](((\.\/)|(\.\.\/))+(.*))['"`]/g, `'${moduleDirectory}$1'`);
+    const moduleFile = new File([moduleContent], path.substring(path.lastIndexOf("/")), { type: "text/javascript" });
+    const moduleURL = URL.createObjectURL(moduleFile);
+    const module = await import(
+      /* @vite-ignore */
+      moduleURL
+    );
+    return module;
+  }
+  #addTest(description, test) {
+    const testId = generateId();
+    const testElement = new CodeTestElement();
+    testElement.setStateProperties({
+      testId,
+      description,
+      testState: { test, resultCategory: "none", resultContent: "", isRunning: false, hasRun: false, duration: 0 },
+      beforeEachState: this.codeTestsElement.state.beforeEachState == null ? void 0 : {
+        isRunning: this.codeTestsElement.state.beforeEachState.isRunning,
+        hasRun: this.codeTestsElement.state.beforeEachState.hasRun,
+        resultCategory: this.codeTestsElement.state.beforeEachState.resultCategory,
+        resultContent: this.codeTestsElement.state.beforeEachState.resultContent,
+        duration: 0
+      },
+      afterEachState: this.codeTestsElement.state.afterEachState == null ? void 0 : {
+        isRunning: this.codeTestsElement.state.afterEachState.isRunning,
+        hasRun: this.codeTestsElement.state.afterEachState.hasRun,
+        resultCategory: this.codeTestsElement.state.afterEachState.resultCategory,
+        resultContent: this.codeTestsElement.state.afterEachState.resultContent,
+        duration: 0
       }
+    });
+    this.codeTestsElement.findElement("#tests").append(testElement);
+    return testId;
+  }
+  //#endregion Loading
+  //#region Running
+  shouldContinueRunningTests = true;
+  async runTests(tests) {
+    const allowTests = this.codeTestsElement.dispatchEvent(new CustomEvent(CodeTestEvent.BeforeAll, { bubbles: true, composed: true, cancelable: true }));
+    if (allowTests == false) {
+      throw new Error("Tests have been prevented.");
     }
-    const beforeHook = this.#hooks["beforeall" /* BeforeAll */];
-    if (beforeHook != null) {
-      let hookResult;
-      try {
-        const beforeAllHookElement = this.getElement(`before-all-details`);
-        beforeAllHookElement.classList.add("running");
-        beforeAllHookElement.part.add("running");
-        if (this.isCanceled == true) {
-          throw new Error("Test has been cancelled");
-        }
-        hookResult = await beforeHook(this, beforeAllHookElement);
-        this.#handleHookResult(hookResult, true, "before", false);
-        beforeAllHookElement.part.remove("running");
-        beforeAllHookElement.classList.remove("running");
-      } catch (error) {
-        this.#handleHookResult(hookResult, false, "before", false, error);
-        console.error(error);
-        this.#continueRunningTests = false;
-        this.classList.remove("running");
-        this.part.remove("running");
-        if (playButtonLabel != null) {
-          playButtonLabel.textContent = "Run Tests";
-        }
-        this.dispatchEvent(new CustomEvent("afterall" /* AfterAll */, { bubbles: true, composed: true }));
-        return;
-      }
+    await this.codeTestsElement.reset();
+    for (let i = 0; i < tests.length; i++) {
+      tests[i].disable();
+    }
+    const context = await this.createTestContext();
+    await this.runHook("requiredBeforeAnyState", void 0, context);
+    if (this.shouldContinueRunningTests == false) {
+      await this.#endTests(tests, context);
+      return;
+    }
+    await this.runHook("beforeAllState", void 0, context);
+    if (this.shouldContinueRunningTests == false) {
+      await this.#endTests(tests, context);
+      return;
     }
+    const inOrder = this.codeTestsElement.getAttribute("ordered") != "false";
     if (inOrder == false) {
-      const promises = [];
-      for (const [id, test] of this.#tests) {
-        promises.push(this.#runTest(id, test));
-      }
+      const promises = tests.map((item) => this.runTest(item, true, context));
       await Promise.all(promises);
     } else {
-      for (const [id, test] of this.#tests) {
-        if (this.#continueRunningTests == false) {
+      for (let i = 0; i < tests.length; i++) {
+        const test = tests[i];
+        if (this.shouldContinueRunningTests == false) {
           break;
         }
-        await this.#runTest(id, test, false);
+        await this.runTest(test, true, context);
       }
     }
-    if (this.#continueRunningTests == false) {
-      this.classList.remove("running");
-      this.part.remove("running");
-      if (playButtonLabel != null) {
-        playButtonLabel.textContent = "Run Tests";
-      }
-      this.dispatchEvent(new CustomEvent("afterall" /* AfterAll */, { bubbles: true, composed: true }));
+    if (this.shouldContinueRunningTests == false) {
+      await this.#endTests(tests, context);
       return;
     }
-    const afterHook = this.#hooks["afterall" /* AfterAll */];
-    if (afterHook != null) {
-      let hookResult;
-      try {
-        const afterAllHookElement = this.getElement(`after-all-details`);
-        afterAllHookElement.classList.add("running");
-        afterAllHookElement.part.add("running");
-        if (this.isCanceled == true) {
-          throw new Error("Test has been cancelled");
-        }
-        hookResult = await afterHook(this, afterAllHookElement);
-        this.#handleHookResult(hookResult, true, "after", false);
-        afterAllHookElement.part.remove("running");
-        afterAllHookElement.classList.remove("running");
-      } catch (error) {
-        this.#handleHookResult(hookResult, false, "after", false, error);
-        console.error(error);
-        const requiredAfterHook2 = this.#hooks["requiredafterany" /* RequiredAfterAny */];
-        if (requiredAfterHook2 != null) {
-          let hookResult2;
-          try {
-            const requiredAfterAnyHookElement = this.getElement(`required-after-any-details`);
-            requiredAfterAnyHookElement.classList.add("running");
-            requiredAfterAnyHookElement.part.add("running");
-            if (this.isCanceled == true) {
-              throw new Error("Test has been cancelled");
-            }
-            hookResult2 = await requiredAfterHook2(this, requiredAfterAnyHookElement);
-            this.#handleHookResult(hookResult2, true, "after", true);
-            requiredAfterAnyHookElement.part.remove("running");
-            requiredAfterAnyHookElement.classList.remove("running");
-          } catch (error2) {
-            this.#handleHookResult(hookResult2, false, "after", true, error2);
-            console.error(error2);
-          }
-        }
-        this.#continueRunningTests = false;
-        this.classList.remove("running");
-        this.part.remove("running");
-        if (playButtonLabel != null) {
-          playButtonLabel.textContent = "Run Tests";
-        }
-        this.dispatchEvent(new CustomEvent("afterall" /* AfterAll */, { bubbles: true, composed: true }));
-        return;
-      }
+    await this.runHook("afterAllState", void 0, context);
+    await this.#endTests(tests, context);
+  }
+  async #endTests(tests, context) {
+    await this.runHook("requiredAfterAnyState", void 0, context);
+    for (let i = 0; i < tests.length; i++) {
+      tests[i].enable();
     }
-    const requiredAfterHook = this.#hooks["requiredafterany" /* RequiredAfterAny */];
-    if (requiredAfterHook != null) {
-      let hookResult;
-      try {
-        const requiredAfterAnyHookElement = this.getElement(`required-after-any-details`);
-        requiredAfterAnyHookElement.classList.add("running");
-        requiredAfterAnyHookElement.part.add("running");
-        if (this.isCanceled == true) {
-          throw new Error("Test has been cancelled");
-        }
-        hookResult = await requiredAfterHook(this, requiredAfterAnyHookElement);
-        this.#handleHookResult(hookResult, true, "after", true);
-        requiredAfterAnyHookElement.part.remove("running");
-        requiredAfterAnyHookElement.classList.remove("running");
-      } catch (error) {
-        this.#handleHookResult(hookResult, false, "after", true, error);
-        console.error(error);
-        this.#continueRunningTests = false;
-      }
+    this.codeTestsElement.dispatchEvent(new CustomEvent(CodeTestEvent.AfterAll, { bubbles: true, composed: true }));
+  }
+  async runTest(test, inLoop, testContext) {
+    if (test == null) {
+      return;
     }
-    const failedTests = this.shadowRoot.querySelectorAll('[success="false"]');
-    this.setAttribute("success", failedTests.length == 0 ? "true" : "false");
-    this.classList.remove("running");
-    this.part.remove("running");
-    if (playButtonLabel != null) {
-      playButtonLabel.textContent = "Run Tests";
+    if (inLoop == false) {
+      const tests = this.codeTestsElement.findElements("code-test");
+      for (let i = 0; i < tests.length; i++) {
+        tests[i].disable();
+      }
     }
-    this.dispatchEvent(new CustomEvent("afterall" /* AfterAll */, { bubbles: true, composed: true }));
-  }
-  #clearTestStatuses() {
-    for (const [testId, test] of this.#tests) {
-      const testElement = this.getElement("tests").querySelector(`[data-test-id="${testId}"]`);
-      if (testElement == null) {
-        this.#addProcessError(`Unable to find test element for test: ${testId}`);
+    testContext = testContext ?? await this.createTestContext(test);
+    if (inLoop == false) {
+      await this.runHook("requiredBeforeAnyState", void 0, testContext);
+      if (this.shouldContinueRunningTests == false) {
+        await this.#endTest(testContext, inLoop);
         return;
       }
-      testElement.toggleAttribute("success", false);
-      testElement.classList.remove("success", "fail");
-      testElement.part.remove("success", "fail");
-    }
-    const beforeAllHookElement = this.getElement(`before-all-details`);
-    beforeAllHookElement.toggleAttribute("success", false);
-    beforeAllHookElement.classList.remove("success", "fail");
-    beforeAllHookElement.part.remove("success", "fail");
-    const afterAllHookElement = this.getElement(`after-all-details`);
-    afterAllHookElement.toggleAttribute("success", false);
-    afterAllHookElement.classList.remove("success", "fail");
-    afterAllHookElement.part.remove("success", "fail");
+    }
+    await this.runHook("beforeEachState", test, testContext);
+    if (this.shouldContinueRunningTests == false) {
+      await this.#endTest(testContext, inLoop);
+      return;
+    }
+    await test.runTest(this, testContext);
+    if (this.shouldContinueRunningTests == false) {
+      await this.#endTest(testContext, inLoop);
+      return;
+    }
+    await this.runHook("afterEachState", test, testContext);
+    await this.#endTest(testContext, inLoop);
   }
-  async #runTest(testId, test, handleRequiredTests = true) {
-    const testElement = this.getElement("tests").querySelector(`[data-test-id="${testId}"]`);
-    if (testElement == null) {
-      this.#addProcessError(`Unable to find test element for test: ${testId}`);
+  async #endTest(context, inLoop) {
+    if (inLoop == true) {
       return;
     }
-    testElement.toggleAttribute("success", false);
-    testElement.classList.add("running");
-    testElement.part.add("running");
-    testElement.classList.remove("success", "fail");
-    testElement.part.remove("success", "fail");
-    const iconElement = testElement.querySelector(".result-icon");
-    iconElement?.classList.remove("success", "fail");
-    iconElement?.part.remove("success", "fail");
-    iconElement?.classList.add("running");
-    iconElement?.part.add("running");
-    const errorMessageElement = testElement.querySelector(".error-message");
-    if (errorMessageElement != null) {
-      errorMessageElement.textContent = "";
-    }
-    const detailsElement = testElement.querySelector("details");
-    if (detailsElement != null) {
-      detailsElement.open = false;
-    }
-    let beforeResult = NOTESTDEFINED;
-    let testResult;
-    let afterResult = NOTESTDEFINED;
-    let testType;
+    await this.runHook("requiredAfterAnyState", void 0, context);
+    const tests = this.codeTestsElement.findElements("code-test");
+    for (let i = 0; i < tests.length; i++) {
+      tests[i].enable();
+    }
+  }
+  async runHook(testStateName, test, testContext) {
+    const testState = this.codeTestsElement.state[testStateName];
+    if (testState == null) {
+      return NOTESTDEFINED;
+    }
+    if (this.codeTestsElement.state.isCanceled == true) {
+      return { success: false, value: "Testing has been canceled." };
+    }
+    let hookResult;
     try {
-      const allowTest = this.dispatchEvent(new CustomEvent("beforetest" /* BeforeTest */, { bubbles: true, cancelable: true, composed: true, detail: { testElement } }));
-      if (handleRequiredTests == true) {
-        const requiredBeforeHook = this.#hooks["requiredbeforeany" /* RequiredBeforeAny */];
-        if (requiredBeforeHook != null) {
-          let hookResult;
-          try {
-            const requiredBeforeAnyHookElement = this.getElement(`required-before-any-details`);
-            requiredBeforeAnyHookElement.classList.add("running");
-            requiredBeforeAnyHookElement.part.add("running");
-            if (this.isCanceled == true) {
-              throw new Error("Test has been cancelled");
-            }
-            hookResult = await requiredBeforeHook(this, requiredBeforeAnyHookElement);
-            this.#handleHookResult(hookResult, true, "before", true);
-            requiredBeforeAnyHookElement.part.remove("running");
-            requiredBeforeAnyHookElement.classList.remove("running");
-          } catch (error) {
-            this.#handleHookResult(hookResult, true, "before", true, error);
-            console.error(error);
-            this.#continueRunningTests = false;
-            return;
-          }
-        }
-      }
-      if (this.#continueRunningTests == false) {
+      if (this.shouldContinueRunningTests == false && (testStateName != "requiredAfterAnyState" || this.codeTestsElement.getAttribute("required-after") == "error")) {
         throw new Error("Tests have been disabled from continuing to run.");
       }
-      if (allowTest == false || this.isCanceled == true) {
-        throw new Error("Test has been cancelled");
-      }
-      const beforeHook = this.#hooks["beforeeach" /* BeforeEach */];
-      if (beforeHook != null) {
-        beforeResult = await beforeHook(this, testElement);
-      }
-      if (this.isCanceled == true) {
-        throw new Error("Test has been cancelled");
-      }
-      testResult = await test(this, testElement);
-      if (this.isCanceled == true) {
-        throw new Error("Test has been cancelled");
-      }
-      const afterHook = this.#hooks["aftereach" /* AfterEach */];
-      if (afterHook != null) {
-        afterResult = await afterHook(this, testElement);
-      }
-      if (handleRequiredTests == true) {
-        const requiredAfterHook = this.#hooks["requiredafterany" /* RequiredAfterAny */];
-        if (requiredAfterHook != null) {
-          let hookResult;
-          try {
-            const requiredBeforeAnyHookElement = this.getElement(`required-before-any-details`);
-            requiredBeforeAnyHookElement.classList.add("running");
-            requiredBeforeAnyHookElement.part.add("running");
-            if (this.isCanceled == true) {
-              throw new Error("Test has been cancelled");
-            }
-            hookResult = await requiredAfterHook(this, requiredBeforeAnyHookElement);
-            this.#handleHookResult(hookResult, true, "after", true);
-            requiredBeforeAnyHookElement.part.remove("running");
-            requiredBeforeAnyHookElement.classList.remove("running");
-          } catch (error) {
-            this.#handleHookResult(hookResult, true, "after", true, error);
-            console.error(error);
-            this.#continueRunningTests = false;
-            return;
-          }
-        }
+      if (test != null) {
+        test.setTestStateProperties(testStateName, { isRunning: true });
       }
-      testType = "before";
-      if (beforeResult != NOTESTDEFINED) {
-        this.#handleTestResult(testElement, beforeResult, true, void 0, testType);
+      this.codeTestsElement.setTestStateProperties(testStateName, { isRunning: true });
+      hookResult = await testState.test(testContext);
+      if (test != null) {
+        test.setTestStateProperties(testStateName, { isRunning: false, hasRun: true });
       }
-      testType = void 0;
-      this.#handleTestResult(testElement, testResult, true, void 0, testType);
-      testType = "after";
-      if (afterResult != NOTESTDEFINED) {
-        this.#handleTestResult(testElement, afterResult, true, void 0, testType);
+      this.codeTestsElement.setTestStateProperties(testStateName, { isRunning: false, hasRun: true });
+      const hookParsedResult = this.parseTestResult(hookResult, true, void 0);
+      if (test != null) {
+        test.setTestStateProperties(testStateName, {
+          resultCategory: hookParsedResult.resultCategory,
+          resultContent: hookParsedResult.result
+        });
       }
+      this.codeTestsElement.setTestStateProperties(testStateName, {
+        resultCategory: hookParsedResult.resultCategory,
+        resultContent: hookParsedResult.result
+      });
     } catch (error) {
-      this.#handleTestResult(testElement, testResult, false, error, testType);
       console.error(error);
-      this.#continueRunningTests = false;
+      this.shouldContinueRunningTests = false;
+      hookResult = { success: false, value: `Failed: ${error.message}` };
+      const errorParsedResult = this.parseTestResult(hookResult, false, error);
+      if (test != null) {
+        test.setTestStateProperties(
+          testStateName,
+          {
+            isRunning: false,
+            hasRun: true,
+            resultContent: errorParsedResult.result,
+            resultCategory: errorParsedResult.resultCategory
+          }
+        );
+      }
+      this.codeTestsElement.setTestStateProperties(testStateName, {
+        isRunning: false,
+        hasRun: true,
+        resultCategory: errorParsedResult.resultCategory,
+        resultContent: errorParsedResult.result
+      });
     } finally {
-      testElement?.classList.remove("running");
-      testElement?.part.remove("running");
-      iconElement?.classList.remove("running");
-      iconElement?.part.remove("running");
-      this.dispatchEvent(new CustomEvent("aftertest" /* AfterTest */, { bubbles: true, cancelable: true, composed: true, detail: { testElement } }));
+      this.codeTestsElement.dispatchEvent(new CustomEvent(CodeTestEvent.AfterHook, { bubbles: true, composed: true, detail: hookResult }));
+      return hookResult;
     }
   }
-  #handleTestResult(testElement, result, finishedTest, error, beforeOrAfter) {
-    if (result instanceof HTMLElement) {
-      this.#setTestResult(testElement, result, finishedTest, beforeOrAfter);
-    } else if (result == void 0) {
-      const trueMessage = beforeOrAfter == void 0 ? "Passed" : "Hook Ran Successfully";
-      const defaultResult = this.#createDefaultResult(finishedTest == true ? `${trueMessage}` : `Failed${error != null ? `:
-${error.message}` : ""}`, finishedTest, beforeOrAfter);
-      this.#setTestResult(testElement, defaultResult, finishedTest, beforeOrAfter);
-    } else if (typeof result == "string") {
-      const defaultResult = this.#createDefaultResult(`${result}${error == null ? "" : `:
-${error.message}`}`, finishedTest, beforeOrAfter);
-      this.#setTestResult(testElement, defaultResult, finishedTest, beforeOrAfter);
+  //#endregion Running
+  //#region Utils
+  parseTestResult(result, finishedTest, error) {
+    if (result == NOTESTDEFINED) {
+      return { result: "", resultCategory: "none" };
+    }
+    if (result == void 0) {
+      const message = finishedTest == true ? "Passed" : `Failed${error != null ? `:
+${error.message}` : ""}`;
+      const className = finishedTest == true ? "success-message" : "error-message";
+      return {
+        result: `<code class="code" part="code">
+                    <pre class="pre ${className}" part="pre ${className}">${message}</pre>
+                </code>`,
+        resultCategory: finishedTest == true ? "success" : "fail"
+      };
+    } else if (typeof result == "boolean") {
+      return { result, resultCategory: result == true ? "success" : "fail" };
+    } else if (typeof result == "function") {
+      console.log("function");
+      return { result: `[A function was returned]`, resultCategory: "none" };
+    } else if (result instanceof HTMLElement || typeof result == "string") {
+      return { result, resultCategory: "none" };
     } else if (typeof result == "object") {
       const objectResult = result;
+      const className = finishedTest == true ? "success-message" : "error-message";
       if (objectResult.success != void 0 && objectResult.expected != void 0 && objectResult.value != void 0) {
-        const trueMessage = beforeOrAfter == void 0 ? "Passed" : "Success";
-        const falseMessage = beforeOrAfter == void 0 ? "Failed" : "Fail";
-        const defaultResult = this.#createDefaultResult(
-          `${objectResult.success == true ? `${trueMessage}:` : `${falseMessage}:`}
+        return {
+          result: `<code class="code" part="code">
+                        <pre class="pre ${className}" part="pre ${className}">${objectResult.success == true ? "Passed" : "Failed"}
 Expected:${objectResult.expected}
-Result:${objectResult.value}`,
-          objectResult.success,
-          beforeOrAfter
-        );
-        this.#setTestResult(testElement, defaultResult, finishedTest, beforeOrAfter);
+Result:${objectResult.value}</pre>
+                    </code>`,
+          resultCategory: objectResult.success == true ? "success" : "fail"
+        };
+      } else if (objectResult.success != void 0) {
+        return {
+          result: `<code class="code" part="code">
+                        <pre class="pre ${className}" part="pre ${className}">${JSON.stringify(result, void 0, 2)}</pre>
+                    </code>`,
+          resultCategory: objectResult.success == true ? "success" : "fail"
+        };
+      } else {
+        const className2 = finishedTest == true ? "success-message" : "error-message";
+        return {
+          result: `<code class="code" part="code">
+                        <pre class="pre ${className2}" part="pre ${className2}">${JSON.stringify(result, void 0, 2)}</pre>
+                    </code>`,
+          resultCategory: finishedTest == true ? "success" : "fail"
+        };
       }
     }
-    const detailsElement = testElement.querySelector("details");
-    if (detailsElement != null) {
-      detailsElement.open = true;
+    throw new Error("Unable to parse result type: Unknown result type");
+  }
+  async createTestContext(testElement) {
+    const context = {
+      detail: {},
+      codeTestsElement: this.codeTestsElement,
+      testElement,
+      messageElement: testElement?.findElement(".message")
+    };
+    if (this.codeTestsElement.state.contextHook != null) {
+      await this.codeTestsElement.state.contextHook(context);
     }
+    this.codeTestsElement.dispatchEvent(new CustomEvent(CodeTestEvent.Context, { bubbles: true, composed: true, detail: { context } }));
+    return context;
   }
-  #handleHookResult(result, finishedTest, beforeOrAfter, required, error) {
-    if (result instanceof HTMLElement) {
-      this.#setHookResult(result, finishedTest, beforeOrAfter, required);
-    } else {
-      let defaultResult;
-      if (result == void 0) {
-        defaultResult = this.#createDefaultResult(finishedTest == true ? "Hook Ran Successfully" : `Failed${error != null ? `:
-${error.message}` : ""}`, finishedTest);
-        this.#setHookResult(defaultResult, finishedTest, beforeOrAfter, required);
-      } else if (typeof result == "string") {
-        defaultResult = this.#createDefaultResult(`${result}${error == null ? "" : `:
-${error.message}`}`, finishedTest);
-        this.#setHookResult(defaultResult, finishedTest, beforeOrAfter, required);
-      } else if (typeof result == "object") {
-        const objectResult = result;
-        if (objectResult.success != void 0 && objectResult.expected != void 0 && objectResult.value != void 0) {
-          defaultResult = this.#createDefaultResult(
-            `${objectResult.success == true ? "Success:" : "Fail:"}
-Expected:${objectResult.expected}
-Result:${objectResult.value}`,
-            objectResult.success
-          );
-          this.#setHookResult(defaultResult, finishedTest, beforeOrAfter, required);
-        }
-      }
+  //#endregion Utils
+}
+function generateId() {
+  const rnd = new Uint8Array(20);
+  crypto.getRandomValues(rnd);
+  const b64 = [].slice.apply(rnd).map(function(ch) {
+    return String.fromCharCode(ch);
+  }).join("");
+  const secret = btoa(b64).replace(/\//g, "_").replace(/\+/g, "-").replace(/=/g, "");
+  return secret;
+}
+class TestPromise extends Promise {
+  async toBeDefined(valueName) {
+    const target = await this;
+    if (target == void 0) {
+      throw new Error(`${valueName != null ? valueName : "Value"} is undefined`);
     }
-    const detailsElement = this.getElement(`${beforeOrAfter}-all-details`);
-    if (detailsElement != null) {
-      detailsElement.open = true;
+  }
+  async toBe(value, exact = false) {
+    const target = await this;
+    const result = exact == true ? target === value : target == value;
+    if (result == false) {
+      throw new Error(`  Value is not equal.
+  Expected: ${value}
+  Result: ${target}`);
     }
   }
-  static create(properties) {
-    const element = document.createElement("code-tests");
-    return element;
+  async toContainText(value) {
+    const target = await this;
+    if (target instanceof HTMLElement) {
+      return { success: target.textContent.includes(value), index: target.textContent.indexOf(value) };
+    }
+    if (typeof target != "string") {
+      return false;
+    }
+    return { success: target.includes(value), index: target.indexOf(value) };
   }
-  #tests = /* @__PURE__ */ new Map();
-  #addTest(description, test) {
-    const testId = generateId();
-    this.#tests.set(testId, test);
-    const testElement = this.#createTest(testId, description);
-    this.getElement("tests").append(testElement);
-    return testId;
+  async toHaveAttribute(value) {
+    const target = await this;
+    if (!(target instanceof HTMLElement)) {
+      throw new Error("Unable to check for attribute on non-HTMLElement target");
+    }
+    if (target.getAttribute(value)) {
+      throw new Error("Target does not have attribute");
+    }
   }
-  #createTest(testId, description) {
-    const testElement = document.createElement("li");
-    testElement.dataset.testId = testId;
-    testElement.classList.add("test");
-    testElement.part.add("test");
-    const detailsElement = document.createElement("details");
-    detailsElement.classList.add("test-details");
-    detailsElement.part.add("test-details");
-    const summaryElement = document.createElement("summary");
-    summaryElement.classList.add("test-summary");
-    summaryElement.part.add("test-summary");
-    const resultIcon = document.createElement("div");
-    resultIcon.classList.add("result-icon");
-    resultIcon.part.add("result-icon");
-    summaryElement.append(resultIcon);
-    const descriptionElement = document.createElement("span");
-    descriptionElement.classList.add("description", "test-description");
-    descriptionElement.textContent = description;
-    summaryElement.append(descriptionElement);
-    const runButton = document.createElement("button");
-    runButton.classList.add("run", "test-run");
-    runButton.part.add("run", "test-run");
-    runButton.textContent = "Run Test";
-    runButton.title = "Run Test";
-    summaryElement.append(runButton);
-    const beforeResultElement = document.createElement("div");
-    beforeResultElement.classList.add("before-result", "test-before-result");
-    beforeResultElement.part.add("before-result", "test-before-result");
-    const resultElement = document.createElement("div");
-    resultElement.classList.add("result", "test-result");
-    resultElement.part.add("result", "test-result");
-    const afterResultElement = document.createElement("div");
-    afterResultElement.classList.add("after-result", "test-after-result");
-    afterResultElement.part.add("after-result", "test-after-result");
-    detailsElement.append(summaryElement);
-    detailsElement.append(beforeResultElement);
-    detailsElement.append(resultElement);
-    detailsElement.append(afterResultElement);
-    testElement.append(detailsElement);
-    return testElement;
+}
+const DEFAULT_ELEMENT_SELECTOR = ":not(slot,defs,g,rect,path,circle,ellipse,line,polygon,text,tspan,use,svg image,svg title,desc,template,template *)";
+function assignClassAndIdToPart(shadowRoot) {
+  assignIdToPart(shadowRoot);
+  assignClassToPart(shadowRoot);
+}
+function assignIdToPart(shadowRoot) {
+  const identifiedElements = [...shadowRoot.querySelectorAll(`${DEFAULT_ELEMENT_SELECTOR}[id]`)];
+  for (let i = 0; i < identifiedElements.length; i++) {
+    identifiedElements[i].part.add(identifiedElements[i].id);
   }
-  #setTestResult(testElement, valueElement, success, beforeOrAfter) {
-    testElement.setAttribute("success", success == true ? "true" : "false");
-    testElement.classList.toggle("success", success);
-    testElement.part.toggle("success", success);
-    testElement.classList.toggle("fail", !success);
-    testElement.part.toggle("fail", !success);
-    const iconElement = testElement.querySelector(".result-icon");
-    iconElement?.classList.toggle("success", success);
-    iconElement?.part.toggle("success", success);
-    iconElement?.classList.toggle("fail", !success);
-    iconElement?.part.toggle("fail", !success);
-    const resultElement = testElement.querySelector(`.${beforeOrAfter == void 0 ? "result" : beforeOrAfter == "before" ? "before-result" : "after-result"}`);
-    if (resultElement == null) {
-      this.#addProcessError(`Unable to find result element`);
+}
+function assignClassToPart(shadowRoot) {
+  const classedElements = [...shadowRoot.querySelectorAll(`${DEFAULT_ELEMENT_SELECTOR}[class]`)];
+  for (let i = 0; i < classedElements.length; i++) {
+    classedElements[i].part.add(...classedElements[i].classList);
+  }
+}
+const Hook = {
+  BeforeAll: "beforeall",
+  AfterAll: "afterall",
+  BeforeEach: "beforeeach",
+  AfterEach: "aftereach",
+  RequiredBeforeAny: "requiredbeforeany",
+  RequiredAfterAny: "requiredafterany",
+  Reset: "reset",
+  Context: "context"
+};
+const COMPONENT_STYLESHEET = new CSSStyleSheet();
+COMPONENT_STYLESHEET.replaceSync(style);
+const COMPONENT_TAG_NAME = "code-tests";
+class CodeTestsElement extends HTMLElement {
+  state = {
+    isCanceled: false,
+    beforeAllState: void 0,
+    afterAllState: void 0,
+    beforeEachState: void 0,
+    afterEachState: void 0,
+    requiredBeforeAnyState: void 0,
+    requiredAfterAnyState: void 0,
+    resetHook: void 0,
+    contextHook: void 0
+  };
+  setState(state) {
+    this.state = state;
+    this.#render();
+  }
+  setStateProperties(state) {
+    this.setState({
+      ...this.state,
+      ...state
+    });
+  }
+  setTestStateProperties(key, state) {
+    if (this.state[key] == null) {
       return;
     }
-    resultElement.innerHTML = "";
-    resultElement.appendChild(valueElement);
+    this.setState({
+      ...this.state,
+      [key]: {
+        ...this.state[key],
+        ...state
+      }
+    });
   }
-  #createDefaultResult(message, success, beforeOrAfter) {
-    const codeElement = document.createElement("code");
-    codeElement.classList.add("code");
-    codeElement.part.add("code");
-    const preElement = document.createElement("pre");
-    preElement.textContent = message;
-    const className = success == true ? "success-message" : "error-message";
-    preElement.classList.add("pre", className);
-    preElement.part.add("pre", className);
-    codeElement.appendChild(preElement);
-    return codeElement;
+  findElement(query) {
+    return this.shadowRoot.querySelector(query);
   }
-  #setHookResult(valueElement, success, beforeOrAfter, required) {
-    const selector = required == true ? `required-${beforeOrAfter}-any` : `${beforeOrAfter}-all`;
-    const detailsElement = this.getElement(`${selector}-details`);
-    const resultsElement = this.getElement(`${selector}-results`);
-    detailsElement.setAttribute("success", success == true ? "true" : "false");
-    detailsElement.classList.toggle("success", success);
-    detailsElement.part.toggle("success", success);
-    detailsElement.classList.toggle("fail", !success);
-    detailsElement.part.toggle("fail", !success);
-    resultsElement.innerHTML = "";
-    resultsElement.appendChild(valueElement);
+  findElements(query) {
+    return Array.from(this.shadowRoot.querySelectorAll(query));
   }
-  #addProcessError(message, error) {
-    if (error instanceof Error) {
-      message += `
-${error.message}`;
-      console.error(error);
-    }
-    const errorElement = document.createElement("li");
-    errorElement.classList.add("error", "process-error");
-    errorElement.part.add("error", "process-error");
-    const codeElement = document.createElement("code");
-    codeElement.classList.add("code", "process-error-code");
-    codeElement.part.add("code", "process-error-code");
-    const preElement = document.createElement("pre");
-    preElement.classList.add("pre", "process-error-pre");
-    preElement.part.add("pre", "process-error-pre");
-    preElement.textContent = message;
-    codeElement.append(preElement);
-    errorElement.append(codeElement);
-    this.getElement("tests").append(errorElement);
+  getIsRunning() {
+    const testsAreRunning = this.findElements("code-test").find((item) => item.isRunning() == true) != null;
+    return testsAreRunning == true || this.state.requiredBeforeAnyState?.isRunning == true || this.state.requiredAfterAnyState?.isRunning == true || this.state.beforeAllState?.isRunning == true || this.state.afterAllState?.isRunning == true;
   }
-  #updateListType(type) {
-    if (type == "ordered") {
-      const list = this.shadowRoot.querySelector("ul");
-      if (list == null) {
-        return;
+  getResultCategory() {
+    const testCategory = this.findElements("code-test").reduce((result, item, _index) => {
+      const category = item.resultCategory();
+      if (result == "fail" || category == "fail") {
+        return "fail";
       }
-      const items = this.shadowRoot?.querySelectorAll("li");
-      const newList = document.createElement("ol");
-      if (items != null) {
-        newList.append(...items);
+      if ((result == "success" || result == "") && category == "success") {
+        return "success";
       }
-      newList.id = "tests";
-      list.replaceWith(newList);
-    } else {
-      const list = this.shadowRoot.querySelector("ol");
-      if (list == null) {
-        return;
+      if (category == "none") {
+        return "none";
       }
-      const items = this.shadowRoot?.querySelectorAll("li");
-      const newList = document.createElement("ul");
-      newList.id = "tests";
-      if (items != null) {
-        newList.append(...items);
+      return "none";
+    }, "");
+    const states = [
+      this.state.requiredBeforeAnyState,
+      this.state.requiredAfterAnyState,
+      this.state.beforeAllState,
+      this.state.afterAllState
+    ];
+    const statesCategory = states.reduce((result, item, _index) => {
+      if (item == null) {
+        return null;
       }
-      list.replaceWith(newList);
+      const category = item?.resultCategory;
+      if (result == "fail" || category == "fail") {
+        return "fail";
+      }
+      if ((result == "success" || result == "") && category == "success") {
+        return "success";
+      }
+      if (category == "none") {
+        return "none";
+      }
+      return "none";
+    }, "");
+    if (testCategory == "none" && statesCategory == null) {
+      return "none";
+    } else if (testCategory == "fail" || statesCategory == "fail") {
+      return "fail";
+    } else if (testCategory == "success" && statesCategory == "success") {
+      return "success";
+    }
+    return "none";
+  }
+  #contextManager;
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.innerHTML = html;
+    this.shadowRoot.adoptedStyleSheets.push(COMPONENT_STYLESHEET);
+  }
+  connectedCallback() {
+    this.#init();
+  }
+  disconnectedCallback() {
+    this.#destroy();
+  }
+  #isInitialized = false;
+  async #init() {
+    if (this.#isInitialized == true) {
+      return;
     }
+    assignClassAndIdToPart(this.shadowRoot);
+    this.addEventListener("click", this.#boundClickHandler);
+    await new Promise((resolve) => requestAnimationFrame(() => {
+      this.#contextManager = new ContextManager(this);
+      resolve();
+    }));
+    this.#isInitialized = true;
+    if (this.getAttribute("auto") == "false") {
+      return;
+    }
+    this.reloadTests();
+  }
+  #destroy() {
+    this.removeEventListener("click", this.#boundClickHandler);
   }
-  static observedAttributes = ["in-order"];
-  attributeChangedCallback(attributeName, oldValue, newValue) {
-    if (attributeName == "in-order") {
-      if (newValue == void 0) {
-        this.#updateListType("unordered");
+  #boundClickHandler = this.#onClick.bind(this);
+  #onClick(event) {
+    const runAllButton = event.composedPath().find((item) => item instanceof HTMLButtonElement && item.id == "run-all-button");
+    if (runAllButton != null) {
+      if (this.classList.contains("running")) {
+        this.cancel();
+      } else if (this.classList.contains("fail") || this.classList.contains("success")) {
+        this.reset();
       } else {
-        this.#updateListType("ordered");
+        this.runTests();
+      }
+      return;
+    }
+    const reloadButton = event.composedPath().find((item) => item instanceof HTMLButtonElement && item.id == "reload-button");
+    if (reloadButton != null) {
+      this.reloadTests();
+    }
+    const runButton = event.composedPath().find((item) => item instanceof HTMLButtonElement && item.classList.contains("run-test-button"));
+    if (runButton == null) {
+      return;
+    }
+    const test = runButton.closest("code-test") ?? void 0;
+    this.#contextManager.runTest(test, false);
+  }
+  #getCurrentTestsPath() {
+    return this.getAttribute("src") ?? this.getAttribute("test") ?? this.getAttribute("tests") ?? this.getAttribute("run") ?? this.getAttribute("path") ?? void 0;
+  }
+  #render() {
+    const isRunning = this.getIsRunning();
+    const resultCategory = this.getResultCategory();
+    const hasBeforeAllState = this.state.beforeAllState != null;
+    const hasBeforeEachState = this.state.beforeEachState != null;
+    const hasRequiredBeforeAnyState = this.state.requiredAfterAnyState != null;
+    const hasAfterAllState = this.state.beforeAllState != null;
+    const hasAfterEachState = this.state.beforeEachState != null;
+    const hasRequiredAfterAnyState = this.state.requiredAfterAnyState != null;
+    const hasBeforeHook = hasRequiredBeforeAnyState == true || hasBeforeAllState == true || hasBeforeEachState == true;
+    const hasAfterHook = hasRequiredAfterAnyState == true || hasAfterAllState == true || hasAfterEachState == true;
+    this.classList.toggle("canceled", this.state.isCanceled);
+    this.part.toggle("canceled", this.state.isCanceled);
+    this.classList.toggle("running", isRunning == true);
+    this.part.toggle("running", isRunning == true);
+    this.toggleAttribute("success", resultCategory == "success");
+    this.classList.toggle("success", resultCategory == "success");
+    this.part.toggle("success", resultCategory == "success");
+    this.classList.toggle("fail", resultCategory == "fail");
+    this.part.toggle("fail", resultCategory == "fail");
+    this.classList.toggle("has-before-hook", hasBeforeHook);
+    this.part.toggle("has-before-hook", hasBeforeHook);
+    this.classList.toggle("has-after-hook", hasAfterHook);
+    this.part.toggle("has-after-hook", hasAfterHook);
+    this.classList.toggle("has-before-all-hook", hasBeforeAllState);
+    this.part.toggle("has-before-all-hook", hasBeforeAllState);
+    this.classList.toggle("has-after-all-hook", hasAfterAllState);
+    this.part.toggle("has-after-all-hook", hasAfterAllState);
+    this.classList.toggle("has-before-each-hook", hasBeforeEachState);
+    this.part.toggle("has-before-each-hook", hasBeforeEachState);
+    this.classList.toggle("has-after-each-hook", hasAfterEachState);
+    this.part.toggle("has-after-each-hook", hasAfterEachState);
+    this.classList.toggle("has-required-before-hook", hasRequiredBeforeAnyState);
+    this.part.toggle("has-required-before-hook", hasRequiredBeforeAnyState);
+    this.classList.toggle("has-required-after-hook", hasRequiredAfterAnyState);
+    this.part.toggle("has-required-after-hook", hasRequiredAfterAnyState);
+    const runAllButtonLabel = this.findElement(".run-all-button-label");
+    if (runAllButtonLabel != null) {
+      runAllButtonLabel.textContent = isRunning == true ? "Cancel" : resultCategory == "fail" ? "Reset" : "Run Tests";
+      runAllButtonLabel.title = isRunning == true ? "Cancel the testing" : resultCategory == "fail" ? "Reset the tests so they can be run again" : "Run the tests";
+    }
+    const runAllIcon = this.findElement(".run-all-button-icon");
+    if (runAllIcon != null) {
+      runAllIcon.innerHTML = isRunning == true ? '<use href="#icon-definition_cancel"></use>' : resultCategory == "fail" ? '<use href="#icon-definition_reset"></use>' : '<use href="#icon-definition_arrow"></use>';
+    }
+    this.#renderHook(this.state.beforeAllState, "#before-all-results");
+    this.#renderHook(this.state.afterAllState, "#after-all-results");
+    this.#renderHook(this.state.requiredBeforeAnyState, "#required-before-any-results");
+    this.#renderHook(this.state.requiredAfterAnyState, "#required-after-any-results");
+    const title = this.findElement("#title");
+    if (title != null) {
+      title.textContent = this.getAttribute("label") ?? "Tests";
+    }
+    this.#renderGroupResults();
+  }
+  #renderHook(hookState, elementSelector) {
+    const resultsElement = this.findElement(elementSelector);
+    if (hookState?.resultContent instanceof HTMLElement) {
+      resultsElement.append(hookState.resultContent);
+    } else if (typeof hookState?.resultContent == "string") {
+      resultsElement.innerHTML = hookState.resultContent;
+    }
+    const detailsElement = resultsElement.closest("details");
+    detailsElement.toggleAttribute("open", hookState != void 0 && hookState.resultCategory != "none");
+    detailsElement.classList.toggle("running", hookState?.isRunning == true);
+    detailsElement.part.toggle("running", hookState?.isRunning == true);
+    detailsElement.toggleAttribute("success", hookState?.resultCategory == "success");
+    detailsElement.classList.toggle("success", hookState?.resultCategory == "success");
+    detailsElement.part.toggle("success", hookState?.resultCategory == "success");
+    detailsElement.classList.toggle("fail", hookState?.resultCategory == "fail");
+    detailsElement.part.toggle("fail", hookState?.resultCategory == "fail");
+  }
+  #renderGroupResults() {
+    const results = this.collectTestResults();
+    const progress = this.findElement("#results-progress-value");
+    if (progress != null) {
+      progress.max = results.totalTests;
+      progress.value = results.totalPassed;
+    }
+    const totalPassedElement = this.findElement("#total-tests-passed-value");
+    if (totalPassedElement != null) {
+      totalPassedElement.textContent = results.totalPassed.toString();
+    }
+    const totalTestsElement = this.findElement("#total-tests-count-value");
+    if (totalTestsElement != null) {
+      totalTestsElement.textContent = results.totalTests.toString();
+    }
+    const totalPercentElement = this.findElement("#passed-total-percent-value");
+    if (totalPercentElement != null) {
+      totalPercentElement.textContent = results.totalPercentage.toFixed(1);
+    }
+    const durationElement = this.findElement("#duration-value");
+    if (durationElement != null) {
+      durationElement.textContent = results.duration > 10 ? results.duration.toFixed(0) : results.duration.toFixed(2);
+    }
+  }
+  collectTestResults() {
+    const tests = this.findElements("code-test");
+    const totalTests = tests.length;
+    const totalPassed = tests.filter((item) => item.state.testState?.resultCategory == "success").length;
+    const totalPercentage = totalTests == 0 ? 0 : totalPassed / totalTests * 100;
+    const duration = tests.reduce((result, item, _index) => {
+      return result + (item.state.testState?.duration ?? 0);
+    }, 0);
+    const results = {
+      totalTests,
+      totalPassed,
+      totalPercentage,
+      duration
+    };
+    return results;
+  }
+  async runTests() {
+    const tests = this.findElements("code-test");
+    return this.#contextManager.runTests(tests);
+  }
+  async reloadTests() {
+    this.findElement("#tests").innerHTML = "";
+    await this.reset();
+    const testsPath = this.#getCurrentTestsPath();
+    this.#contextManager.loadTests(testsPath);
+  }
+  async reset() {
+    const tests = this.findElements("code-test");
+    for (let i = 0; i < tests.length; i++) {
+      const test = tests[i];
+      const beforeEachState2 = this.state.beforeEachState != null ? {
+        resultCategory: "none",
+        resultContent: "",
+        hasRun: this.state.beforeEachState.hasRun,
+        isRunning: this.state.beforeEachState.isRunning,
+        duration: 0
+      } : void 0;
+      const afterEachState2 = this.state.afterEachState != null ? {
+        resultCategory: "none",
+        resultContent: "",
+        hasRun: this.state.afterEachState.hasRun,
+        isRunning: this.state.afterEachState.isRunning,
+        duration: 0
+      } : void 0;
+      if (beforeEachState2 != null) {
+        test.state.beforeEachState = beforeEachState2;
+      }
+      if (afterEachState2 != null) {
+        test.state.afterEachState = afterEachState2;
+      }
+      test.reset();
+    }
+    const beforeAllState = this.state.beforeAllState == void 0 ? void 0 : { resultContent: "", resultCategory: "none", test: this.state.beforeAllState.test, isRunning: false, hasRun: false, duration: 0 };
+    const afterAllState = this.state.afterAllState == void 0 ? void 0 : { resultContent: "", resultCategory: "none", test: this.state.afterAllState.test, isRunning: false, hasRun: false, duration: 0 };
+    const beforeEachState = this.state.beforeEachState == void 0 ? void 0 : { resultContent: "", resultCategory: "none", test: this.state.beforeEachState.test, isRunning: false, hasRun: false, duration: 0 };
+    const afterEachState = this.state.afterEachState == void 0 ? void 0 : { resultContent: "", resultCategory: "none", test: this.state.afterEachState.test, isRunning: false, hasRun: false, duration: 0 };
+    const requiredBeforeAnyState = this.state.requiredBeforeAnyState == void 0 ? void 0 : { resultContent: "", resultCategory: "none", test: this.state.requiredBeforeAnyState.test, isRunning: false, hasRun: false, duration: 0 };
+    const requiredAfterAnyState = this.state.requiredAfterAnyState == void 0 ? void 0 : { resultContent: "", resultCategory: "none", test: this.state.requiredAfterAnyState.test, isRunning: false, hasRun: false, duration: 0 };
+    this.setStateProperties({
+      isCanceled: false,
+      beforeAllState,
+      afterAllState,
+      beforeEachState,
+      afterEachState,
+      requiredAfterAnyState,
+      requiredBeforeAnyState
+    });
+    this.#contextManager.shouldContinueRunningTests = true;
+    if (this.state.resetHook != null) {
+      await this.state.resetHook(await this.#contextManager.createTestContext());
+    }
+    this.dispatchEvent(new CustomEvent(CodeTestEvent.Reset, { bubbles: true, composed: true }));
+  }
+  cancel() {
+    this.state.isCanceled = true;
+    this.#contextManager.shouldContinueRunningTests = false;
+    this.classList.add("canceled");
+    this.part.add("canceled");
+    this.dispatchEvent(new CustomEvent(CodeTestEvent.Cancel, { bubbles: true, composed: true }));
+  }
+  static observedAttributes = ["open", "label"];
+  attributeChangedCallback(attributeName, _oldValue, newValue) {
+    if (attributeName == "open") {
+      this.findElement("#component-details").toggleAttribute("open", newValue != void 0);
+    } else if (attributeName == "label") {
+      const title = this.findElement("#title");
+      if (title != null) {
+        title.textContent = newValue ?? "Tests";
       }
     }
   }
-};
-function generateId() {
-  const rnd = new Uint8Array(20);
-  crypto.getRandomValues(rnd);
-  const b64 = [].slice.apply(rnd).map(function(ch) {
-    return String.fromCharCode(ch);
-  }).join("");
-  const secret = btoa(b64).replace(/\//g, "_").replace(/\+/g, "-").replace(/=/g, "");
-  return secret;
 }
 if (customElements.get(COMPONENT_TAG_NAME) == null) {
   customElements.define(COMPONENT_TAG_NAME, CodeTestsElement);
 }
+function expect(value) {
+  const promise = new TestPromise(async (resolve, _reject) => {
+    if (value instanceof Promise) {
+      const result = await value;
+      resolve(result);
+      return;
+    }
+    resolve(value);
+  });
+  return promise;
+}
+async function prompt(host, parentElement, message, options) {
+  return new Promise((resolve, _reject) => {
+    const template = options?.template ?? host.querySelector(".prompt-template") ?? host.findElement("#prompt-template");
+    const promptElement = createElementFromTemplate(template);
+    promptElement.querySelector(".label").textContent = message;
+    const clickHandler = (event) => {
+      const composedPath = event.composedPath();
+      const acceptButton = composedPath.find((item) => item instanceof HTMLButtonElement && item.classList.contains("accept"));
+      if (acceptButton != null) {
+        const result = options?.onAccept?.() ?? true;
+        promptElement.removeEventListener("click", clickHandler);
+        resolve(result);
+        return;
+      }
+      const rejectButton = composedPath.find((item) => item instanceof HTMLButtonElement && item.classList.contains("reject"));
+      if (rejectButton != null) {
+        const result = options?.onReject?.() ?? false;
+        promptElement.removeEventListener("click", clickHandler);
+        resolve(result);
+        return;
+      }
+    };
+    promptElement.addEventListener("click", clickHandler);
+    if (options?.acceptLabel != null) {
+      promptElement.querySelector(".accept").textContent = options.acceptLabel;
+    }
+    if (options?.rejectLabel != null) {
+      promptElement.querySelector(".reject").textContent = options.rejectLabel;
+    }
+    parentElement.append(promptElement);
+  });
+}
+function createElementFromTemplate(target, parent) {
+  const templateNode = target instanceof HTMLTemplateElement ? target : document.querySelector(target);
+  if (templateNode == null) {
+    throw new Error(`Unable to find template element from selector: ${target}`);
+  }
+  const firstChild = templateNode.content.cloneNode(true).firstElementChild;
+  if (firstChild == null) {
+    throw new Error(`Unable to find first child of template element`);
+  }
+  parent?.append(firstChild);
+  return firstChild;
+}
 export {
-  CodeTestEventType,
-  CodeTests,
+  CodeTestElement,
+  CodeTestEvent,
   CodeTestsElement,
-  HookType,
+  Hook,
+  TestPromise,
+  createElementFromTemplate,
   expect,
   prompt
 };