@auvyx/ui 0.0.0-stage → 0.1.0

package/dist/ui/tooltip.css

@@ -0,0 +1,319 @@
+/* @auvyx/ui tooltip | order 37 */
+@layer components {
+  [data-tooltip] {
+      position: relative;
+      &:before {
+        pointer-events: none;
+        visibility: hidden;
+        position: absolute;
+        z-index: 60;
+        display: block;
+        width: fit-content;
+        max-width: var(--container-xs);
+        transform-origin: var(--transform-origin);
+        --tw-scale-x: 95%;
+        --tw-scale-y: 95%;
+        --tw-scale-z: 95%;
+        scale: var(--tw-scale-x) var(--tw-scale-y);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        opacity: 0%;
+        transition-property: all;
+        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+        transition-duration: var(--tw-duration, var(--default-transition-duration));
+        --tw-content: attr(data-tooltip);
+        content: var(--tw-content);
+      }
+      &:hover:before {
+        visibility: visible;
+        --tw-scale-x: 100%;
+        --tw-scale-y: 100%;
+        --tw-scale-z: 100%;
+        scale: var(--tw-scale-x) var(--tw-scale-y);
+        opacity: 100%;
+      }
+      &:focus-visible:not(:hover):before {
+        display: none;
+      }
+      &:not([data-side]), &[data-side='top'] {
+        &::before {
+          content: var(--tw-content);
+          bottom: 100%;
+        }
+        &::before {
+          content: var(--tw-content);
+          margin-bottom: calc(var(--spacing) * 1.5);
+        }
+        &::before {
+          content: var(--tw-content);
+          --tw-translate-y: calc(var(--spacing) * 2);
+          translate: var(--tw-translate-x) var(--tw-translate-y);
+        }
+        &:hover {
+          @media (hover: hover) {
+            &::before {
+              content: var(--tw-content);
+              --tw-translate-y: 0;
+              translate: var(--tw-translate-x) var(--tw-translate-y);
+            }
+          }
+        }
+      }
+      &[data-side='bottom'] {
+        &::before {
+          content: var(--tw-content);
+          top: 100%;
+        }
+        &::before {
+          content: var(--tw-content);
+          margin-top: calc(var(--spacing) * 1.5);
+        }
+        &::before {
+          content: var(--tw-content);
+          --tw-translate-y: calc(var(--spacing) * -2);
+          translate: var(--tw-translate-x) var(--tw-translate-y);
+        }
+        &:hover {
+          @media (hover: hover) {
+            &::before {
+              content: var(--tw-content);
+              --tw-translate-y: 0;
+              translate: var(--tw-translate-x) var(--tw-translate-y);
+            }
+          }
+        }
+      }
+      &:not([data-side]), &[data-side='top'], &[data-side='bottom'] {
+        &[data-align='start'] {
+          &::before {
+            content: var(--tw-content);
+            left: 0;
+          }
+        }
+        &[data-align='end'] {
+          &::before {
+            content: var(--tw-content);
+            right: 0;
+          }
+        }
+        &:not([data-align]), &[data-align='center'] {
+          &::before {
+            content: var(--tw-content);
+            left: calc(1 / 2 * 100%);
+          }
+          &::before {
+            content: var(--tw-content);
+            --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+            translate: var(--tw-translate-x) var(--tw-translate-y);
+          }
+        }
+      }
+      &[data-side='left'] {
+        &::before {
+          content: var(--tw-content);
+          right: 100%;
+        }
+        &::before {
+          content: var(--tw-content);
+          margin-right: calc(var(--spacing) * 1.5);
+        }
+        &::before {
+          content: var(--tw-content);
+          --tw-translate-x: calc(var(--spacing) * 2);
+          translate: var(--tw-translate-x) var(--tw-translate-y);
+        }
+        &:hover {
+          @media (hover: hover) {
+            &::before {
+              content: var(--tw-content);
+              --tw-translate-x: 0;
+              translate: var(--tw-translate-x) var(--tw-translate-y);
+            }
+          }
+        }
+      }
+      &[data-side='right'] {
+        &::before {
+          content: var(--tw-content);
+          left: 100%;
+        }
+        &::before {
+          content: var(--tw-content);
+          margin-left: calc(var(--spacing) * 1.5);
+        }
+        &::before {
+          content: var(--tw-content);
+          --tw-translate-x: calc(var(--spacing) * -2);
+          translate: var(--tw-translate-x) var(--tw-translate-y);
+        }
+        &:hover {
+          @media (hover: hover) {
+            &::before {
+              content: var(--tw-content);
+              --tw-translate-x: 0;
+              translate: var(--tw-translate-x) var(--tw-translate-y);
+            }
+          }
+        }
+      }
+      &[data-side='inline-start'] {
+        &::before {
+          content: var(--tw-content);
+          right: 100%;
+        }
+        &::before {
+          content: var(--tw-content);
+          margin-right: calc(var(--spacing) * 1.5);
+        }
+        &::before {
+          content: var(--tw-content);
+          --tw-translate-x: calc(var(--spacing) * 2);
+          translate: var(--tw-translate-x) var(--tw-translate-y);
+        }
+        &:hover {
+          @media (hover: hover) {
+            &::before {
+              content: var(--tw-content);
+              --tw-translate-x: 0;
+              translate: var(--tw-translate-x) var(--tw-translate-y);
+            }
+          }
+        }
+      }
+      &[data-side='inline-start']:dir(rtl) {
+        &::before {
+          content: var(--tw-content);
+          right: auto;
+        }
+        &::before {
+          content: var(--tw-content);
+          left: 100%;
+        }
+        &::before {
+          content: var(--tw-content);
+          margin-right: 0;
+        }
+        &::before {
+          content: var(--tw-content);
+          margin-left: calc(var(--spacing) * 1.5);
+        }
+        &::before {
+          content: var(--tw-content);
+          --tw-translate-x: calc(var(--spacing) * -2);
+          translate: var(--tw-translate-x) var(--tw-translate-y);
+        }
+        &:hover {
+          @media (hover: hover) {
+            &::before {
+              content: var(--tw-content);
+              --tw-translate-x: 0;
+              translate: var(--tw-translate-x) var(--tw-translate-y);
+            }
+          }
+        }
+      }
+      &[data-side='inline-end'] {
+        &::before {
+          content: var(--tw-content);
+          left: 100%;
+        }
+        &::before {
+          content: var(--tw-content);
+          margin-left: calc(var(--spacing) * 1.5);
+        }
+        &::before {
+          content: var(--tw-content);
+          --tw-translate-x: calc(var(--spacing) * -2);
+          translate: var(--tw-translate-x) var(--tw-translate-y);
+        }
+        &:hover {
+          @media (hover: hover) {
+            &::before {
+              content: var(--tw-content);
+              --tw-translate-x: 0;
+              translate: var(--tw-translate-x) var(--tw-translate-y);
+            }
+          }
+        }
+      }
+      &[data-side='inline-end']:dir(rtl) {
+        &::before {
+          content: var(--tw-content);
+          right: 100%;
+        }
+        &::before {
+          content: var(--tw-content);
+          left: auto;
+        }
+        &::before {
+          content: var(--tw-content);
+          margin-right: calc(var(--spacing) * 1.5);
+        }
+        &::before {
+          content: var(--tw-content);
+          margin-left: 0;
+        }
+        &::before {
+          content: var(--tw-content);
+          --tw-translate-x: calc(var(--spacing) * 2);
+          translate: var(--tw-translate-x) var(--tw-translate-y);
+        }
+        &:hover {
+          @media (hover: hover) {
+            &::before {
+              content: var(--tw-content);
+              --tw-translate-x: 0;
+              translate: var(--tw-translate-x) var(--tw-translate-y);
+            }
+          }
+        }
+      }
+      &[data-side='left'], &[data-side='right'], &[data-side='inline-start'], &[data-side='inline-end'] {
+        &[data-align='start'] {
+          &::before {
+            content: var(--tw-content);
+            top: 0;
+          }
+        }
+        &[data-align='end'] {
+          &::before {
+            content: var(--tw-content);
+            bottom: 0;
+          }
+        }
+        &:not([data-align]), &[data-align='center'] {
+          &::before {
+            content: var(--tw-content);
+            top: calc(1 / 2 * 100%);
+          }
+          &::before {
+            content: var(--tw-content);
+            --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
+            translate: var(--tw-translate-x) var(--tw-translate-y);
+          }
+        }
+      }
+    }
+}
+
+@layer components {
+  [data-tooltip]::before {
+      border-radius: var(--radius-md);
+      background-color: var(--color-foreground);
+      padding-inline: calc(var(--spacing) * 3);
+      padding-block: calc(var(--spacing) * 1.5);
+      font-size: var(--text-xs);
+      line-height: var(--tw-leading, var(--text-xs--line-height));
+      color: var(--color-background);
+    }
+  [data-tooltip][data-arrow]::after {
+      position: absolute;
+      z-index: 60;
+      width: calc(var(--spacing) * 2.5);
+      height: calc(var(--spacing) * 2.5);
+      rotate: 45deg;
+      border-radius: 2px;
+      background-color: var(--color-foreground);
+    }
+}

package/dist/ui/trace.css

@@ -0,0 +1,142 @@
+/* @auvyx/ui trace | order 50 */
+@layer components {
+  .trace {
+      margin: 0;
+      display: flex;
+      width: 100%;
+      min-width: 0;
+      list-style-type: none;
+      flex-direction: column;
+      padding: 0;
+      :is(li, summary)[data-status], > li:not(:has(> details)), summary {
+        display: flex;
+        width: fit-content;
+        max-width: 100%;
+        min-width: 0;
+        align-items: center;
+        transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+        transition-duration: var(--tw-duration, var(--default-transition-duration));
+      }
+      > li > :is(a, button) {
+        display: flex;
+        width: fit-content;
+        max-width: 100%;
+        min-width: 0;
+        cursor: pointer;
+        align-items: center;
+        text-align: start;
+        --tw-outline-style: none;
+        outline-style: none;
+      }
+      :is(li, summary) > svg {
+        pointer-events: none;
+        display: flex;
+        flex-shrink: 0;
+      }
+      :is(li, summary) > span {
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      :is(li, summary) > small {
+        flex-shrink: 0;
+        --tw-numeric-spacing: tabular-nums;
+        font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
+      }
+      [data-status='pending'] {
+        opacity: 60%;
+      }
+      details {
+        display: flex;
+        width: 100%;
+        min-width: 0;
+        flex-direction: column;
+        > summary {
+          cursor: pointer;
+          list-style-type: none;
+          --tw-outline-style: none;
+          outline-style: none;
+          &::-webkit-details-marker {
+            display: none;
+          }
+          > svg:first-child {
+            transition-property: transform, translate, scale, rotate;
+            transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+            transition-duration: var(--tw-duration, var(--default-transition-duration));
+          }
+        }
+        &[open] > summary > svg:first-child {
+          rotate: 90deg;
+          &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+            rotate: calc(90deg * -1);
+          }
+        }
+        > :not(summary) {
+          min-width: 0;
+          overflow-wrap: break-word;
+        }
+      }
+    }
+}
+
+@layer components {
+  .trace {
+      gap: calc(var(--spacing) * 2);
+    }
+  .trace :is(li, summary) {
+      gap: calc(var(--spacing) * 2);
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+      color: var(--color-muted-foreground);
+    }
+  .trace > li > :is(a, button), .trace summary {
+      gap: var(--spacing);
+      border-radius: var(--auvyx-r-control);
+      &:hover {
+        @media (hover: hover) {
+          color: var(--color-foreground);
+        }
+      }
+      &:focus-visible {
+        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+      &:focus-visible {
+        --tw-ring-color: var(--color-ring);
+        @supports (color: color-mix(in lab, red, red)) {
+          --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
+        }
+      }
+    }
+  .trace [data-status='error'] {
+      color: var(--color-destructive);
+    }
+  .trace :is(li, summary) > svg {
+      width: calc(var(--spacing) * 4);
+      height: calc(var(--spacing) * 4);
+    }
+  .trace :is(li, summary) > small {
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+      color: var(--color-muted-foreground);
+      @supports (color: color-mix(in lab, red, red)) {
+        color: color-mix(in oklab, var(--color-muted-foreground) 70%, transparent);
+      }
+    }
+  .trace details > :not(summary) {
+      margin-inline-start: calc(calc(var(--spacing) * 2) - 1px);
+      margin-top: calc(var(--spacing) * 2);
+      margin-bottom: var(--spacing);
+      border-inline-start-style: var(--tw-border-style);
+      border-inline-start-width: 1px;
+      padding-inline-start: calc(var(--spacing) * 4);
+      padding-inline-end: var(--spacing);
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+      --tw-leading: var(--leading-relaxed);
+      line-height: var(--leading-relaxed);
+      color: var(--color-muted-foreground);
+    }
+}

package/dist/ui/typography.css

@@ -0,0 +1,184 @@
+/* @auvyx/ui typography | order 60 */
+@layer components {
+  .typography {
+      color: var(--color-foreground);
+      :is(h1) {
+        scroll-margin: calc(var(--spacing) * 20);
+        font-size: var(--text-4xl);
+        line-height: var(--tw-leading, var(--text-4xl--line-height));
+        --tw-font-weight: var(--font-weight-extrabold);
+        font-weight: var(--font-weight-extrabold);
+        --tw-tracking: var(--tracking-tight);
+        letter-spacing: var(--tracking-tight);
+        text-wrap: balance;
+      }
+      :is(h2) {
+        margin-top: calc(var(--spacing) * 10);
+        scroll-margin: calc(var(--spacing) * 20);
+        border-bottom-style: var(--tw-border-style);
+        border-bottom-width: 1px;
+        padding-bottom: calc(var(--spacing) * 2);
+        font-size: var(--text-3xl);
+        line-height: var(--tw-leading, var(--text-3xl--line-height));
+        --tw-font-weight: var(--font-weight-semibold);
+        font-weight: var(--font-weight-semibold);
+        --tw-tracking: var(--tracking-tight);
+        letter-spacing: var(--tracking-tight);
+        &:first-child {
+          margin-top: 0;
+        }
+      }
+      :is(h3) {
+        margin-top: calc(var(--spacing) * 8);
+        scroll-margin: calc(var(--spacing) * 20);
+        font-size: var(--text-2xl);
+        line-height: var(--tw-leading, var(--text-2xl--line-height));
+        --tw-font-weight: var(--font-weight-semibold);
+        font-weight: var(--font-weight-semibold);
+        --tw-tracking: var(--tracking-tight);
+        letter-spacing: var(--tracking-tight);
+      }
+      :is(h4) {
+        margin-top: calc(var(--spacing) * 6);
+        scroll-margin: calc(var(--spacing) * 20);
+        font-size: var(--text-xl);
+        line-height: var(--tw-leading, var(--text-xl--line-height));
+        --tw-font-weight: var(--font-weight-semibold);
+        font-weight: var(--font-weight-semibold);
+        --tw-tracking: var(--tracking-tight);
+        letter-spacing: var(--tracking-tight);
+      }
+      p {
+        --tw-leading: calc(var(--spacing) * 7);
+        line-height: calc(var(--spacing) * 7);
+        &:not(:first-child) {
+          margin-top: calc(var(--spacing) * 6);
+        }
+      }
+      blockquote {
+        margin-top: calc(var(--spacing) * 6);
+        border-inline-start-style: var(--tw-border-style);
+        border-inline-start-width: 2px;
+        padding-inline-start: calc(var(--spacing) * 6);
+        font-style: italic;
+      }
+      ul {
+        margin-block: calc(var(--spacing) * 6);
+        margin-inline-start: calc(var(--spacing) * 6);
+        list-style-type: disc;
+        &>li {
+          margin-top: calc(var(--spacing) * 2);
+        }
+      }
+      ol {
+        margin-block: calc(var(--spacing) * 6);
+        margin-inline-start: calc(var(--spacing) * 6);
+        list-style-type: decimal;
+        &>li {
+          margin-top: calc(var(--spacing) * 2);
+        }
+      }
+      a {
+        --tw-font-weight: var(--font-weight-medium);
+        font-weight: var(--font-weight-medium);
+        color: var(--color-primary);
+        text-decoration-line: underline;
+        text-underline-offset: 4px;
+      }
+      :not(pre) > code {
+        position: relative;
+        border-radius: 0.25rem;
+        background-color: var(--color-muted);
+        padding-inline: 0.3rem;
+        padding-block: 0.2rem;
+        font-family: var(--font-mono);
+        font-size: var(--text-sm);
+        line-height: var(--tw-leading, var(--text-sm--line-height));
+        --tw-font-weight: var(--font-weight-semibold);
+        font-weight: var(--font-weight-semibold);
+      }
+      pre {
+        margin-block: calc(var(--spacing) * 6);
+        overflow-x: auto;
+        border-radius: var(--auvyx-r-surface);
+        background-color: var(--color-muted);
+        padding: calc(var(--spacing) * 4);
+        font-family: var(--font-mono);
+        font-size: var(--text-sm);
+        line-height: var(--tw-leading, var(--text-sm--line-height));
+      }
+      hr {
+        margin-block: calc(var(--spacing) * 8);
+      }
+      table {
+        margin-block: calc(var(--spacing) * 6);
+        width: 100%;
+        font-size: var(--text-sm);
+        line-height: var(--tw-leading, var(--text-sm--line-height));
+      }
+      th {
+        border-style: var(--tw-border-style);
+        border-width: 1px;
+        padding-inline: calc(var(--spacing) * 4);
+        padding-block: calc(var(--spacing) * 2);
+        text-align: start;
+        --tw-font-weight: var(--font-weight-bold);
+        font-weight: var(--font-weight-bold);
+        &[align=center] {
+          text-align: center;
+        }
+        &[align=right] {
+          text-align: end;
+        }
+      }
+      td {
+        border-style: var(--tw-border-style);
+        border-width: 1px;
+        padding-inline: calc(var(--spacing) * 4);
+        padding-block: calc(var(--spacing) * 2);
+        text-align: start;
+        &[align=center] {
+          text-align: center;
+        }
+        &[align=right] {
+          text-align: end;
+        }
+      }
+      tr {
+        margin: 0;
+        border-top-style: var(--tw-border-style);
+        border-top-width: 1px;
+        padding: 0;
+        &:nth-child(even) {
+          background-color: var(--color-muted);
+        }
+      }
+      p[data-variant='lead'] {
+        font-size: var(--text-xl);
+        line-height: var(--tw-leading, var(--text-xl--line-height));
+        color: var(--color-muted-foreground);
+      }
+      p[data-variant='large'] {
+        font-size: var(--text-lg);
+        line-height: var(--tw-leading, var(--text-lg--line-height));
+        --tw-font-weight: var(--font-weight-semibold);
+        font-weight: var(--font-weight-semibold);
+      }
+      p[data-variant='muted'] {
+        font-size: var(--text-sm);
+        line-height: var(--tw-leading, var(--text-sm--line-height));
+        color: var(--color-muted-foreground);
+      }
+      small {
+        font-size: var(--text-sm);
+        line-height: var(--tw-leading, var(--text-sm--line-height));
+        --tw-leading: 1;
+        line-height: 1;
+        --tw-font-weight: var(--font-weight-medium);
+        font-weight: var(--font-weight-medium);
+      }
+      > :is(h1, h2, h3, h4):first-child {
+        margin-top: 0;
+      }
+    }
+}

package/dist/wc/accordion.min.js

@@ -0,0 +1,2 @@
+/*! @auvyx/ui v0.1.0 | MIT | based on Basecoat (MIT) */
+window.basecoat||(()=>{const l={};let a=null;const m=(t,o,i)=>{const n=typeof o=="object"?o:{selector:o,init:i};l[t]={selector:n.selector,init:n.init,refresh:n.refresh}},e=(t,o)=>{const i=l[o];if(i)try{i.init(t),t.hasAttribute(`data-${o}-initialized`)&&(t.dataset.basecoatComponent=o)}catch(n){if(console.error(`Failed to initialize ${o}:`,n),typeof t._destroy=="function")try{t._destroy()}catch(d){console.error(`Failed to clean up ${o} after initialization error:`,d)}delete t._destroy,t.removeAttribute(`data-${o}-initialized`),delete t.dataset.basecoatComponent}},r=t=>{if(!t||t.nodeType!==Node.ELEMENT_NODE)return;const o=t.dataset?.basecoatComponent;if(typeof t._destroy=="function")try{t._destroy()}catch(i){console.error("Failed to destroy Basecoat component:",i)}delete t._destroy,o&&t.removeAttribute(`data-${o}-initialized`),delete t.dataset.basecoatComponent},s=t=>{t.nodeType===Node.ELEMENT_NODE&&(t.isConnected||(t.dataset?.basecoatComponent&&r(t),t.querySelectorAll("[data-basecoat-component]").forEach(r)))},u=t=>Array.from(new Set(t)),f=(t,o,i=!1)=>{const n=Array.from(document.querySelectorAll(o));return i&&n.push(...document.querySelectorAll(`[data-basecoat-component="${t}"]`)),u(n)},y=(t={})=>{const o=t.force===!0;Object.entries(l).forEach(([i,{selector:n}])=>{f(i,n,o).forEach(d=>{const g=d.dataset?.basecoatComponent===i;o&&r(d),(g||d.matches(n))&&e(d,i)})})},c=t=>{t.nodeType===Node.ELEMENT_NODE&&Object.entries(l).forEach(([o,{selector:i}])=>{t.matches(i)&&e(t,o),t.querySelectorAll(i).forEach(n=>e(n,o))})},p=t=>{if(!t)return;if(typeof t.refresh=="function"){t.refresh();return}const o=t.dataset?.basecoatComponent,i=o?l[o]:null;i?.refresh&&i.refresh(t)},h=()=>{a||(a=new MutationObserver(t=>{t.forEach(o=>{o.addedNodes.forEach(c),o.removedNodes.forEach(s)})}),a.observe(document.body,{childList:!0,subtree:!0}))},b=()=>{a&&(a.disconnect(),a=null)},C=(t,o={})=>{const i=l[t];if(!i){console.warn(`Component '${t}' not found in registry`);return}const n=o.force===!0;f(t,i.selector,n).forEach(d=>{const g=d.dataset?.basecoatComponent===t;n&&r(d),(g||d.matches(i.selector))&&e(d,t)})},_=(t={})=>{y(t)},v=t=>{const o=t==="dark";document.documentElement.classList.toggle("dark",o);try{localStorage.setItem("themeMode",o?"dark":"light")}catch{}document.dispatchEvent(new CustomEvent("basecoat:themechange",{detail:{mode:o?"dark":"light"}}))},E=()=>document.documentElement.classList.contains("dark")?"dark":"light";window.basecoat={register:m,init:C,initAll:_,refresh:p,start:h,stop:b,theme:{get:E,set:v,toggle:()=>v(E()==="dark"?"light":"dark")}},document.addEventListener("DOMContentLoaded",()=>{y(),h()})})(),(()=>{const l=new WeakMap,a=s=>{const u=s.querySelector(":scope > summary");return s.getAttribute("aria-disabled")==="true"||s.dataset.disabled==="true"||u?.getAttribute("aria-disabled")==="true"},m=s=>s.hasAttribute("data-multiple"),e=(s,u)=>{m(s)||!u.open||s.querySelectorAll(":scope > details[open]").forEach(f=>{f!==u&&(f.open=!1)})},r=s=>{if(s.dataset.accordionInitialized)return;const u=c=>{const h=c.target.closest("summary")?.closest("details");!h||h.parentElement!==s||!a(h)||c.preventDefault()},f=c=>{if(c.key!=="Enter"&&c.key!==" ")return;const h=c.target.closest("summary")?.closest("details");!h||h.parentElement!==s||!a(h)||c.preventDefault()},y=c=>{const p=c.target;if(p.parentElement===s){if(a(p)){p.open=!1;return}e(s,p)}};s.addEventListener("click",u),s.addEventListener("keydown",f),s.addEventListener("toggle",y,!0),s.querySelectorAll(":scope > details[open]").forEach(c=>e(s,c)),l.set(s,{handleClick:u,handleToggle:y}),s._destroy=()=>{s.removeEventListener("click",u),s.removeEventListener("keydown",f),s.removeEventListener("toggle",y,!0),l.delete(s)},s.dataset.accordionInitialized="true",s.dispatchEvent(new CustomEvent("basecoat:initialized"))};window.basecoat&&window.basecoat.register("accordion",".accordion:not([data-accordion-initialized])",r)})(),(()=>{var l=class extends HTMLElement{static observedAttributes=["value"];static relayed=["change"];static relayNative=!1;connectedCallback(){if(document.readyState==="loading"){document.addEventListener("DOMContentLoaded",()=>this.isConnected&&this.connectedCallback(),{once:!0});return}this.setup(),this._children=new MutationObserver(()=>{if(this.querySelector(`:scope > ${this.constructor.rootSelector}`)===this.root)return;const e=this.root?this.snapshot():void 0;this.teardown(),this.setup(e)}),this._children.observe(this,{childList:!0})}disconnectedCallback(){this._children?.disconnect(),this.teardown()}setup(e){if(this.root=this.querySelector(`:scope > ${this.constructor.rootSelector}`),!!this.root){window.basecoat?.init(this.constructor.component),this._relay=r=>{r.target!==this.root||!this.constructor.relayNative&&!(r instanceof CustomEvent)||(r.stopPropagation(),this._silent||this.emit(r.type,{value:this.value}))};for(const r of this.constructor.relayed)this.root.addEventListener(r,this._relay);this.attach?.(),e!==void 0?this.restore(e):this.applyInitial()}}teardown(){if(this.detach?.(),!!this.root){for(const e of this.constructor.relayed)this.root.removeEventListener(e,this._relay);this.root._destroy?.(),delete this.root.dataset[`${this.constructor.component.replace(/-(\w)/g,(e,r)=>r.toUpperCase())}Initialized`],this.root=null}}applyInitial(){const e=this._pending!==void 0?this._pending:this.getAttribute("value");this._pending=void 0,e!==null&&(this.value=e)}snapshot(){return this.value}restore(e){e!==null&&(this.value=e)}attributeChangedCallback(e,r,s){e==="value"&&this.root&&s!==null&&s!==this.value&&(this.value=s)}defer(e){return this.root?!1:(this._pending=e,!0)}silently(e){this._silent=!0;try{e()}finally{this._silent=!1}}emit(e,r){this.dispatchEvent(new CustomEvent(e,{detail:r,bubbles:!0}))}reportValue(){const e=this.value;JSON.stringify(e)!==JSON.stringify(this._last)&&(this._last=e,this._silent||this.emit("change",{value:e}))}},a=e=>e.dataset.value??(e.id||String([...e.parentElement.children].filter(r=>r.localName==="details").indexOf(e))),m=class extends l{static component="accordion";static rootSelector=".accordion";static relayed=[];get items(){return this.root?[...this.root.querySelectorAll(":scope > details")]:[]}get multiple(){return this.root?.hasAttribute("data-multiple")??!1}attach(){this._last=this.value,this._onToggle=e=>{e.target.parentElement===this.root&&this.reportValue()},this.root.addEventListener("toggle",this._onToggle,!0)}detach(){this.root?.removeEventListener("toggle",this._onToggle,!0)}get value(){const e=this.items.filter(r=>r.open).map(a);return this.multiple?e:e[0]??null}set value(e){if(this.defer(e))return;const r=new Set((Array.isArray(e)?e:[e]).filter(s=>s!=null).map(String));for(const s of this.items)s.open=r.has(a(s));this._last=this.value}};customElements.get("auvyx-accordion")||customElements.define("auvyx-accordion",m)})();