@antadesign/anta 0.3.34 → 0.3.35

package/dist/elements/a-card.css

@@ -1 +1 @@
-@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-card{--card-text: var(--text-2);--card-bg-secondary: var(--bg-2);--card-bg-primary: light-dark(var(--bg-1), var(--bg-4));--card-bg: var(--card-bg-primary);--card-border: var(--border-4);--card-border-hover: var(--border-3);--card-selected-ring: var(--border-1);--card-bg-hover-lift: .01;--card-radius: 8px;--card-padding: 12px;--card-content-fs: 15px;--card-content-lh: 20px;--card-icon-size: 40px;--card-icon-bg: light-dark(var(--bg-4), var(--bg-5));--card-header-nudge: 2px;display:block;box-sizing:border-box;position:relative;width:100%;container-type:inline-size;container-name:card;color:var(--card-text);background:var(--card-bg);box-shadow:0 0 0 1px var(--card-border);border-radius:var(--card-radius);overflow:clip;transition:background-color .15s ease,box-shadow .15s ease,opacity .18s ease}a-card[priority=secondary]{--card-bg: var(--card-bg-secondary);--card-icon-blend: multiply}.dark a-card:not([priority=tertiary]){--card-icon-blend: exclusion}a-card[round]{--card-radius: var(--card-round, 999px);@supports (border-radius: attr(probe type(<length>),1px)){--card-round: attr(round type(<length>))}}a-card[priority=tertiary]{--card-bg: color-mix(in oklch, var(--card-bg-primary) 1%, transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}@media(hover:hover)and (pointer:fine){a-card[href]:not([loading]):hover{background:oklch(from var(--card-bg) calc(l + var(--card-bg-hover-lift)) c h)}a-card:not([loading]):hover{box-shadow:0 0 0 1px var(--card-border-hover)}}a-card[href]:not([loading]):active{box-shadow:0 0 0 1px var(--card-border)}@media(prefers-reduced-motion:reduce){a-card{transition:none}}a-card:not(:defined){padding:var(--card-padding);opacity:0}a-card:not(:has(>[slot=media]))::part(media),a-card:not(:has(>[slot=header])):not(:has(>[slot=icon]))::part(header),a-card:not(:has(>[slot=icon]))::part(icon),a-card:not(:has(>[slot=footer]))::part(footer),a-card:not(:has(>:not([slot])))::part(body){display:none}a-card>a-card-icon-chip[slot=icon]{display:grid;place-items:center;width:var(--card-icon-size);height:var(--card-icon-size);border-radius:50%;background:var(--card-icon-bg)}a-card:is(:has(>[slot=header]),:has(>[slot=icon]))::part(body){padding-block-start:0}a-card:has(>[slot=footer])::part(body){padding-block-end:0}a-card :is(h1,h2,h3,h4,h5,h6),a-card a-title[level]{margin-block-start:0}a-card>:is(h1,h2,h3,h4,h5,h6)[slot=header],a-card>a-title[slot=header]{margin-block-end:0}a-card>a-title[slot=header]+a-text[slot=header],a-card>:is(h1,h2,h3,h4,h5,h6)[slot=header]+a-text[slot=header]{margin-block-start:1px}a-card[size=large]>a-title[slot=header]+a-text[slot=header],a-card[size=large]>:is(h1,h2,h3,h4,h5,h6)[slot=header]+a-text[slot=header]{margin-block-start:2px}a-card[tone=brand]{--card-text: var(--text-2-brand);--card-bg-secondary: light-dark(var(--bg-4-brand), var(--bg-2-brand));--card-bg-primary: light-dark(var(--bg-2-brand), var(--bg-4-brand));--card-border: var(--border-4-brand);--card-border-hover: var(--border-3-brand);--card-icon-bg: var(--bg-5-brand);--card-selected-ring: var(--border-1-brand)}a-card[tone=info]{--card-text: var(--text-2-info);--card-bg-secondary: light-dark(var(--bg-4-info), var(--bg-2-info));--card-bg-primary: light-dark(var(--bg-2-info), var(--bg-4-info));--card-border: var(--border-4-info);--card-border-hover: var(--border-3-info);--card-icon-bg: var(--bg-5-info);--card-selected-ring: var(--border-1-info)}a-card[tone=success]{--card-text: var(--text-2-success);--card-bg-secondary: light-dark(var(--bg-4-success), var(--bg-2-success));--card-bg-primary: light-dark(var(--bg-2-success), var(--bg-4-success));--card-border: var(--border-4-success);--card-border-hover: var(--border-3-success);--card-icon-bg: var(--bg-5-success);--card-selected-ring: var(--border-1-success)}a-card[tone=warning]{--card-text: var(--text-2-warning);--card-bg-secondary: light-dark(var(--bg-4-warning), var(--bg-2-warning));--card-bg-primary: light-dark(var(--bg-2-warning), var(--bg-4-warning));--card-border: var(--border-4-warning);--card-border-hover: var(--border-3-warning);--card-icon-bg: var(--bg-5-warning);--card-selected-ring: var(--border-1-warning)}a-card[tone=critical]{--card-text: var(--text-2-critical);--card-bg-secondary: light-dark(var(--bg-4-critical), var(--bg-2-critical));--card-bg-primary: light-dark(var(--bg-2-critical), var(--bg-4-critical));--card-border: var(--border-4-critical);--card-border-hover: var(--border-3-critical);--card-icon-bg: var(--bg-5-critical);--card-selected-ring: var(--border-1-critical)}a-card[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--card-tone-source: currentColor;--card-text: light-dark(oklch(from var(--card-tone-source) .41 .15 h), oklch(from var(--card-tone-source) .75 .11 h));--card-bg-secondary: light-dark(oklch(from var(--card-tone-source) .955 .02 h), oklch(from var(--card-tone-source) .13 .02 h));--card-bg-primary: light-dark(oklch(from var(--card-tone-source) .99 .006 h), oklch(from var(--card-tone-source) .19 .04 h));--card-icon-bg: light-dark(oklch(from var(--card-tone-source) .925 .03 h), oklch(from var(--card-tone-source) .22 .05 h));--card-border: light-dark(oklch(from var(--card-tone-source) .895 .045 h), oklch(from var(--card-tone-source) .26 .07 h));--card-border-hover: light-dark(oklch(from var(--card-tone-source) .85 .06 h), oklch(from var(--card-tone-source) .32 .09 h));--card-selected-ring: light-dark(oklch(from var(--card-tone-source) .6 .15 h), oklch(from var(--card-tone-source) .7 .13 h));@supports (color: attr(probe type(<color>),red)){--card-tone-source: attr(tone type(<color>), currentColor)}}a-card[priority=tertiary]{--card-icon-bg: light-dark(var(--bg-3), color-mix(in oklch, var(--bg-5), white 10%))}a-card[tone=brand][priority=tertiary]{--card-icon-bg: light-dark(var(--bg-3-brand), color-mix(in oklch, var(--bg-5-brand), white 10%))}a-card[tone=info][priority=tertiary]{--card-icon-bg: light-dark(var(--bg-3-info), color-mix(in oklch, var(--bg-5-info), white 10%))}a-card[tone=success][priority=tertiary]{--card-icon-bg: light-dark(var(--bg-3-success), color-mix(in oklch, var(--bg-5-success), white 10%))}a-card[tone=warning][priority=tertiary]{--card-icon-bg: light-dark(var(--bg-3-warning), color-mix(in oklch, var(--bg-5-warning), white 10%))}a-card[tone=critical][priority=tertiary]{--card-icon-bg: light-dark(var(--bg-3-critical), color-mix(in oklch, var(--bg-5-critical), white 10%))}a-card[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=tertiary]{--card-icon-bg: light-dark( oklch(from var(--card-tone-source) .97 .014 h), color-mix(in oklch, oklch(from var(--card-tone-source) .22 .05 h), white 10%) )}@media(forced-colors:active){a-card{border:1px solid CanvasText;box-shadow:none}a-card[href]{border-color:LinkText}a-card>a-card-icon-chip[slot=icon]{box-sizing:border-box;border:1px dotted CanvasText}}a-card[size=small]{--card-padding: 8px;--card-header-nudge: 1px;--card-icon-size: 32px;--card-content-fs: 13px;--card-content-lh: 16px}a-card[size=large]{--card-padding: 16px;--card-header-nudge: 4px;--card-icon-size: 44px;--card-content-fs: 17px;--card-content-lh: 24px}}a-card>p:last-child,a-card>:not([slot])>p:last-child{margin-block-end:0}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-card{--card-text: var(--text-2);--card-bg-secondary: var(--bg-2);--card-bg-primary: light-dark(var(--bg-1), var(--bg-4));--card-bg: var(--card-bg-primary);--card-border: var(--border-4);--card-border-hover: var(--border-3);--card-selected-ring: var(--border-1);--card-bg-hover-lift: .01;--card-direction: column;--card-media-flex: 0 1 auto;--card-content-animation: none;--card-selection-shadow: inset 0 0 0 0 transparent;--card-subtitle-gap: 1px;--card-radius: 8px;--card-padding: 12px;--card-content-fs: 15px;--card-content-lh: 20px;--card-icon-size: 40px;--card-icon-bg: light-dark(var(--bg-4), var(--bg-5));--card-header-nudge: 2px;display:flex;flex-direction:var(--card-direction);box-sizing:border-box;position:relative;width:100%;container-type:inline-size;container-name:card;color:var(--card-text);background:var(--card-bg);box-shadow:0 0 0 1px var(--card-border),var(--card-selection-shadow);border-radius:var(--card-radius);overflow:clip;transition:background-color .15s ease,box-shadow .15s ease}a-card[media-position=bottom]{--card-direction: column-reverse}a-card[media-position=left]{--card-direction: row;--card-media-flex: none}a-card[media-position=right]{--card-direction: row-reverse;--card-media-flex: none}a-card[selected]{--card-selection-shadow: inset 0 0 0 2px var(--card-selected-ring, var(--focus-ring))}a-card[priority=secondary]{--card-bg: var(--card-bg-secondary);--card-icon-blend: multiply}.dark a-card:not([priority=tertiary]){--card-icon-blend: exclusion}a-card[round]{--card-radius: var(--card-round, 999px);@supports (border-radius: attr(probe type(<length>),1px)){--card-round: attr(round type(<length>))}}a-card[priority=tertiary]{--card-bg: color-mix(in oklch, var(--card-bg-primary) 1%, transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}@media(hover:hover)and (pointer:fine){a-card:has(>a[data-anta-card-link]):not([loading]):hover{background:oklch(from var(--card-bg) calc(l + var(--card-bg-hover-lift)) c h)}a-card:not([loading]):hover{box-shadow:0 0 0 1px var(--card-border-hover),var(--card-selection-shadow)}}a-card:has(>a[data-anta-card-link]):not([loading]):active{box-shadow:0 0 0 1px var(--card-border),var(--card-selection-shadow)}@media(prefers-reduced-motion:reduce){a-card{transition:none}}a-card>a[data-anta-card-link]{display:block;flex:1 1 auto;box-sizing:border-box;width:100%;height:100%;min-width:0;border-radius:var(--card-radius, 8px);color:inherit;text-decoration:none;-webkit-user-drag:none;user-select:none}a-card>a[data-anta-card-link]:focus-visible{outline:none;box-shadow:inset 0 0 0 1px transparent,inset 0 0 0 2px var(--focus-ring)}a-card>a[data-anta-card-link]>a-card-layout{display:flex;flex-direction:var(--card-direction, column);box-sizing:border-box;width:100%;height:100%;min-width:0;min-height:0}a-card-media{display:block;flex:var(--card-media-flex, 0 1 auto)}a-card-content{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;min-height:0;animation:var(--card-content-animation, none);font-size:var(--card-content-fs, 15px);line-height:var(--card-content-lh, 20px)}a-card-header{display:flex;align-items:center;gap:1ch;padding:var(--card-padding, 12px);padding-block-start:calc(var(--card-padding, 12px) - var(--card-header-nudge, 1px));padding-block-end:calc(var(--card-padding, 12px) / 2)}a-card-icon{display:flex;flex:none;align-items:center;mix-blend-mode:var(--card-icon-blend, normal)}a-card-title{display:block;flex:1 1 auto;min-width:0}a-card-body{display:block;flex:1 1 auto;min-width:0;min-height:0;padding:var(--card-padding, 12px)}a-card-footer{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-start;padding:var(--card-padding, 12px)}a-card-header+a-card-body{padding-block-start:0}a-card-body:has(+a-card-footer){padding-block-end:0}a-card-icon-chip{display:grid;place-items:center;width:var(--card-icon-size);height:var(--card-icon-size);border-radius:50%;background:var(--card-icon-bg)}a-card[loading]{pointer-events:none}@media(prefers-reduced-motion:no-preference){a-card[loading]{--card-content-animation: card-pulse 1.4s ease-in-out infinite}}@keyframes card-pulse{0%,to{opacity:1}50%{opacity:.55}}a-card-title :is(h1,h2,h3,h4,h5,h6),a-card-title a-title[level]{margin-block:0}a-card-body>:is(h1,h2,h3,h4,h5,h6),a-card-body>a-title[level]{margin-block-start:0}a-card[size=large]{--card-subtitle-gap: 2px}a-card-title>a-title+a-text,a-card-title>:is(h1,h2,h3,h4,h5,h6)+a-text{margin-block-start:var(--card-subtitle-gap, 1px)}a-card[tone=brand]{--card-text: var(--text-2-brand);--card-bg-secondary: light-dark(var(--bg-4-brand), var(--bg-2-brand));--card-bg-primary: light-dark(var(--bg-2-brand), var(--bg-4-brand));--card-border: var(--border-4-brand);--card-border-hover: var(--border-3-brand);--card-icon-bg: var(--bg-5-brand);--card-selected-ring: var(--border-1-brand)}a-card[tone=info]{--card-text: var(--text-2-info);--card-bg-secondary: light-dark(var(--bg-4-info), var(--bg-2-info));--card-bg-primary: light-dark(var(--bg-2-info), var(--bg-4-info));--card-border: var(--border-4-info);--card-border-hover: var(--border-3-info);--card-icon-bg: var(--bg-5-info);--card-selected-ring: var(--border-1-info)}a-card[tone=success]{--card-text: var(--text-2-success);--card-bg-secondary: light-dark(var(--bg-4-success), var(--bg-2-success));--card-bg-primary: light-dark(var(--bg-2-success), var(--bg-4-success));--card-border: var(--border-4-success);--card-border-hover: var(--border-3-success);--card-icon-bg: var(--bg-5-success);--card-selected-ring: var(--border-1-success)}a-card[tone=warning]{--card-text: var(--text-2-warning);--card-bg-secondary: light-dark(var(--bg-4-warning), var(--bg-2-warning));--card-bg-primary: light-dark(var(--bg-2-warning), var(--bg-4-warning));--card-border: var(--border-4-warning);--card-border-hover: var(--border-3-warning);--card-icon-bg: var(--bg-5-warning);--card-selected-ring: var(--border-1-warning)}a-card[tone=critical]{--card-text: var(--text-2-critical);--card-bg-secondary: light-dark(var(--bg-4-critical), var(--bg-2-critical));--card-bg-primary: light-dark(var(--bg-2-critical), var(--bg-4-critical));--card-border: var(--border-4-critical);--card-border-hover: var(--border-3-critical);--card-icon-bg: var(--bg-5-critical);--card-selected-ring: var(--border-1-critical)}a-card[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical]){--card-tone-source: currentColor;--card-text: light-dark(oklch(from var(--card-tone-source) .41 .15 h), oklch(from var(--card-tone-source) .75 .11 h));--card-bg-secondary: light-dark(oklch(from var(--card-tone-source) .955 .02 h), oklch(from var(--card-tone-source) .13 .02 h));--card-bg-primary: light-dark(oklch(from var(--card-tone-source) .99 .006 h), oklch(from var(--card-tone-source) .19 .04 h));--card-icon-bg: light-dark(oklch(from var(--card-tone-source) .925 .03 h), oklch(from var(--card-tone-source) .22 .05 h));--card-border: light-dark(oklch(from var(--card-tone-source) .895 .045 h), oklch(from var(--card-tone-source) .26 .07 h));--card-border-hover: light-dark(oklch(from var(--card-tone-source) .85 .06 h), oklch(from var(--card-tone-source) .32 .09 h));--card-selected-ring: light-dark(oklch(from var(--card-tone-source) .6 .15 h), oklch(from var(--card-tone-source) .7 .13 h));@supports (color: attr(probe type(<color>),red)){--card-tone-source: attr(tone type(<color>), currentColor)}}a-card[priority=tertiary]{--card-icon-bg: light-dark(var(--bg-3), color-mix(in oklch, var(--bg-5), white 10%))}a-card[tone=brand][priority=tertiary]{--card-icon-bg: light-dark(var(--bg-3-brand), color-mix(in oklch, var(--bg-5-brand), white 10%))}a-card[tone=info][priority=tertiary]{--card-icon-bg: light-dark(var(--bg-3-info), color-mix(in oklch, var(--bg-5-info), white 10%))}a-card[tone=success][priority=tertiary]{--card-icon-bg: light-dark(var(--bg-3-success), color-mix(in oklch, var(--bg-5-success), white 10%))}a-card[tone=warning][priority=tertiary]{--card-icon-bg: light-dark(var(--bg-3-warning), color-mix(in oklch, var(--bg-5-warning), white 10%))}a-card[tone=critical][priority=tertiary]{--card-icon-bg: light-dark(var(--bg-3-critical), color-mix(in oklch, var(--bg-5-critical), white 10%))}a-card[tone]:not([tone=neutral],[tone=brand],[tone=info],[tone=success],[tone=warning],[tone=critical])[priority=tertiary]{--card-icon-bg: light-dark( oklch(from var(--card-tone-source) .97 .014 h), color-mix(in oklch, oklch(from var(--card-tone-source) .22 .05 h), white 10%) )}@media(forced-colors:active){a-card{border:1px solid CanvasText;box-shadow:none}a-card:has(>a[data-anta-card-link]){border-color:LinkText}a-card[selected],a-card>a[data-anta-card-link]:focus-visible{outline:2px solid Highlight;outline-offset:-3px;box-shadow:none}a-card-icon-chip{box-sizing:border-box;border:1px dotted CanvasText}}a-card[size=small]{--card-padding: 8px;--card-header-nudge: 1px;--card-icon-size: 32px;--card-content-fs: 13px;--card-content-lh: 16px}a-card[size=large]{--card-padding: 16px;--card-header-nudge: 4px;--card-icon-size: 44px;--card-content-fs: 17px;--card-content-lh: 24px}}a-card-body>p:last-child{margin-block-end:0}

package/dist/elements/a-card.d.ts

@@ -1,10 +1 @@
-import { HTMLElementBase } from '../anta_helpers';
 import './a-card.css';
-export declare class ACardElement extends HTMLElementBase {
-    #private;
-    static observedAttributes: string[];
-    constructor();
-    connectedCallback(): void;
-    attributeChangedCallback(): void;
-}
-export declare function register_a_card(): void;

package/dist/elements/a-card.js

@@ -1,185 +1 @@
-import { HTMLElementBase } from "../anta_helpers";
 import "./a-card.css";
-const SHADOW_STYLE = `
-  .container {
-    display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
-    width: 100%;
-    height: 100%;
-    min-width: 0;
-    color: inherit;
-    text-decoration: none;
-    cursor: default;
-    border-radius: var(--card-radius, 8px);
-    -webkit-user-drag: none;
-  }
-  :host([media-position="bottom"]) .container { flex-direction: column-reverse; }
-  :host([media-position="left"]) .container { flex-direction: row; }
-  :host([media-position="right"]) .container { flex-direction: row-reverse; }
-
-  :host([href]) .container { user-select: none; }
-  :host([href]:not([loading])) .container { cursor: pointer; }
-
-  .container:focus-visible {
-    outline: none;
-    box-shadow: inset 0 0 0 1px transparent, inset 0 0 0 2px var(--focus-ring);
-  }
-
-  [part="media"] { display: block; }
-  :host([media-position="left"]) [part="media"],
-  :host([media-position="right"]) [part="media"] { flex: none; }
-
-  .content {
-    display: flex;
-    flex-direction: column;
-    flex: 1 1 auto;
-    min-width: 0;
-    min-height: 0;
-    /* Base type for the content zone, matching the body <a-text> at this size. The
-       title / subtitle / body all set their own font, so this changes nothing
-       visible \u2014 it defines the em/ch base so the header gap (in ch) resolves against
-       the body's type size. */
-    font-size: var(--card-content-fs, 15px);
-    line-height: var(--card-content-lh, 20px);
-  }
-
-  .header {
-    display: flex;
-    align-items: center;
-    gap: 1ch;
-    padding: var(--card-padding, 12px);
-    padding-block-start: calc(var(--card-padding, 12px) - var(--card-header-nudge, 1px));
-    padding-block-end: calc(var(--card-padding, 12px) / 2);
-  }
-  slot[name="icon"] {
-    flex: none;
-    display: flex;
-    align-items: center;
-    /* Off by default; secondary cards in light multiply the chip into the deeper
-       surface (see --card-icon-blend in the external sheet). */
-    mix-blend-mode: var(--card-icon-blend, normal);
-  }
-  slot[name="header"] {
-    display: block;
-    flex: 1 1 auto;
-    min-width: 0;
-  }
-  slot[part="body"] {
-    display: block;
-    flex: 1 1 auto;
-    min-width: 0;
-    min-height: 0;
-    padding: var(--card-padding, 12px);
-  }
-  slot[name="footer"] {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    padding: var(--card-padding, 12px);
-  }
-
-  :host([selected]) .container { box-shadow: inset 0 0 0 2px var(--card-selected-ring, var(--focus-ring)); }
-  :host([selected]) .container:focus-visible { box-shadow: inset 0 0 0 1px transparent, inset 0 0 0 2px var(--focus-ring); }
-
-  :host([loading]) .container { pointer-events: none; }
-  @media (prefers-reduced-motion: no-preference) {
-    :host([loading]) [part="content"] { animation: card-pulse 1.4s ease-in-out infinite; }
-  }
-  @keyframes card-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
-`;
-class ACardElement extends HTMLElementBase {
-  static observedAttributes = ["href", "target", "rel", "ping", "loading", "aria-label"];
-  #container;
-  #headerSlot;
-  #bodySlot;
-  constructor() {
-    super();
-    const shadow = this.attachShadow({ mode: "open" });
-    const style = document.createElement("style");
-    style.textContent = SHADOW_STYLE;
-    this.#container = document.createElement("a");
-    this.#container.className = "container";
-    this.#container.setAttribute("part", "container");
-    const mediaSlot = document.createElement("slot");
-    mediaSlot.name = "media";
-    mediaSlot.setAttribute("part", "media");
-    const content = document.createElement("div");
-    content.className = "content";
-    content.setAttribute("part", "content");
-    const headerSection = document.createElement("div");
-    headerSection.className = "header";
-    headerSection.setAttribute("part", "header");
-    const iconSlot = document.createElement("slot");
-    iconSlot.name = "icon";
-    iconSlot.setAttribute("part", "icon");
-    this.#headerSlot = document.createElement("slot");
-    this.#headerSlot.name = "header";
-    this.#headerSlot.setAttribute("part", "title");
-    headerSection.append(iconSlot, this.#headerSlot);
-    this.#bodySlot = document.createElement("slot");
-    this.#bodySlot.setAttribute("part", "body");
-    const footerSlot = document.createElement("slot");
-    footerSlot.name = "footer";
-    footerSlot.setAttribute("part", "footer");
-    content.append(headerSection, this.#bodySlot, footerSlot);
-    this.#container.append(mediaSlot, content);
-    shadow.append(style, this.#container);
-    this.#headerSlot.addEventListener("slotchange", () => this.#syncName());
-    this.#bodySlot.addEventListener("slotchange", () => this.#syncName());
-  }
-  connectedCallback() {
-    this.#syncLink();
-  }
-  attributeChangedCallback() {
-    this.#syncLink();
-  }
-  /** Mirror the link attributes onto the shadow anchor — but drop `href` while
-   *  `loading` so a loading card can't navigate. Also reflects `aria-busy`. */
-  #syncLink() {
-    const href = this.getAttribute("href");
-    const loading = this.hasAttribute("loading");
-    if (href != null && !loading) {
-      this.#container.setAttribute("href", href);
-      for (const name of ["target", "rel", "ping"]) {
-        const v = this.getAttribute(name);
-        if (v != null) this.#container.setAttribute(name, v);
-        else this.#container.removeAttribute(name);
-      }
-    } else {
-      for (const name of ["href", "target", "rel", "ping"]) {
-        this.#container.removeAttribute(name);
-      }
-    }
-    if (loading) this.#container.setAttribute("aria-busy", "true");
-    else this.#container.removeAttribute("aria-busy");
-    this.#syncName();
-  }
-  /** Name the anchor (link mode only): explicit aria-label → header → body → href. */
-  #syncName() {
-    if (!this.#container.hasAttribute("href")) {
-      this.#container.removeAttribute("aria-label");
-      return;
-    }
-    const explicit = this.getAttribute("aria-label")?.trim();
-    const name = explicit || this.#slotText(this.#headerSlot) || this.#slotText(this.#bodySlot) || this.getAttribute("href") || "";
-    if (name) this.#container.setAttribute("aria-label", name);
-    else this.#container.removeAttribute("aria-label");
-  }
-  #slotText(slot) {
-    return slot.assignedNodes().map((n) => n.textContent ?? "").join(" ").replace(/\s+/g, " ").trim();
-  }
-}
-function register_a_card() {
-  if (typeof customElements === "undefined") return;
-  if (!customElements.get("a-card")) {
-    customElements.define("a-card", ACardElement);
-  }
-}
-register_a_card();
-export {
-  ACardElement,
-  register_a_card
-};

package/dist/elements/a-checkbox.css

@@ -1 +1 @@
-@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-checkbox{--checkbox-gap: 8px;--checkbox-box-size: 16px;--checkbox-bg: var(--bg-1);--checkbox-tone-source: var(--anta-seed-neutral);--checkbox-off-tone-source: var(--anta-seed-neutral);--checkbox-bg-selected: light-dark(oklch(from var(--checkbox-tone-source) .6 c h), oklch(from var(--checkbox-tone-source) .42 c h));--checkbox-bg-selected-hover: oklch(from var(--checkbox-tone-source) .45 c h);--checkbox-bg-selected-active: light-dark(oklch(from var(--checkbox-tone-source) .4 c h), oklch(from var(--checkbox-tone-source) .5 c h));--checkbox-border-neutral: var(--border-3);--checkbox-border: var(--checkbox-border-neutral);--checkbox-border-hover: var(--border-2);--checkbox-border-active: var(--border-1);--checkbox-icon: light-dark(#f6f4f6, #ece9ec);--checkbox-icon-disabled: light-dark(#c1b9c1, #534c57);--checkbox-bg-disabled: light-dark(color-mix(in oklch, #44374b 10%, transparent), color-mix(in oklch, #e4d1ef 10%, transparent));--checkbox-border-disabled: var(--checkbox-bg-disabled);--checkbox-mask-size: 12px;--checkbox-mask-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");--checkbox-mask-indeterminate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");--checkbox-label-color: var(--text-2);--checkbox-label-color-disabled: var(--text-4);--checkbox-hint-color: var(--text-3);--checkbox-label-fs: 15px;--checkbox-label-lh: 20px;--checkbox-hint-fs: 13px;--checkbox-hint-lh: 16px;display:inline-grid;grid-template-columns:auto 1fr;align-items:start;column-gap:var(--checkbox-gap);vertical-align:middle;cursor:pointer;user-select:none;-webkit-user-drag:none;outline:none;color:var(--checkbox-label-color);font-family:var(--sans-serif);font-size:var(--checkbox-label-fs);line-height:var(--checkbox-label-lh);&:before{content:"";grid-column:1;grid-row:1 / -1;align-self:start;margin-block-start:calc((var(--checkbox-label-lh) - var(--checkbox-box-size)) / 2);box-sizing:border-box;inline-size:16px;block-size:16px;border-radius:4px;background:var(--checkbox-bg);border:1.5px solid var(--checkbox-border);transition:background-color .15s ease-out,border-color .15s ease-out}&[round]{--checkbox-round: 999px;@supports (border-radius: attr(probe type(<length>),1px)){--checkbox-round: attr(round type(<length>), 999px)}}&[round]:before{border-radius:var(--checkbox-round, 999px)}&:after{content:"";grid-column:1;grid-row:1 / -1;align-self:start;margin-block-start:calc((var(--checkbox-label-lh) - var(--checkbox-box-size)) / 2);inline-size:16px;block-size:16px;background-color:transparent;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:var(--checkbox-mask-size);mask-size:var(--checkbox-mask-size)}@media(hover:hover)and (pointer:fine){&:not(:disabled):hover:before{border-color:var(--checkbox-border-hover);transition:background-color 75ms ease-in,border-color 75ms ease-in}&:not(:disabled):hover:is(:state(checked),:state(indeterminate)):before{background:var(--checkbox-bg-selected-hover);border-color:var(--checkbox-bg-selected-hover)}}&:not(:disabled):active:before{border-color:var(--checkbox-border-active);transition:background-color 50ms linear,border-color 50ms linear}&:not(:disabled):active:is(:state(checked),:state(indeterminate)):before{background:var(--checkbox-bg-selected-active);border-color:var(--checkbox-bg-selected-active)}&:is(:state(checked),:state(indeterminate)){&:before{background:var(--checkbox-bg-selected);border-color:var(--checkbox-bg-selected)}&:after{background-color:var(--checkbox-icon)}}&:state(checked):after{-webkit-mask-image:var(--checkbox-mask-check);mask-image:var(--checkbox-mask-check)}&:state(indeterminate):after{-webkit-mask-image:var(--checkbox-mask-indeterminate);mask-image:var(--checkbox-mask-indeterminate)}&:focus-visible{outline:none}&:focus-visible:before{outline:1px solid var(--focus-ring);outline-offset:1px}&:disabled{cursor:not-allowed;color:var(--checkbox-label-color-disabled);&:before{background:var(--checkbox-bg-disabled);border-color:var(--checkbox-border-disabled);transition:none}&:is(:state(checked),:state(indeterminate)):after{background-color:var(--checkbox-icon-disabled)}a-checkbox-hint{color:var(--checkbox-label-color-disabled)}}&[size=small]{--checkbox-gap: 6px;--checkbox-box-size: 14px;--checkbox-label-fs: 13px;--checkbox-label-lh: 16px;--checkbox-hint-fs: 12px;--checkbox-hint-lh: 14px;--checkbox-mask-size: 10px;&:before,&:after{inline-size:14px;block-size:14px}}&[size=large]{--checkbox-box-size: 18px;--checkbox-label-fs: 17px;--checkbox-label-lh: 22px;--checkbox-hint-fs: 15px;--checkbox-hint-lh: 19px;--checkbox-mask-size: 14px;&:before,&:after{inline-size:18px;block-size:18px}}}.dark a-checkbox{--checkbox-mask-size: 13px}.dark a-checkbox[size=small]{--checkbox-mask-size: 11px}.dark a-checkbox[size=large]{--checkbox-mask-size: 15px}a-checkbox-label,a-checkbox-hint{display:block;grid-column:2;min-width:0}a-checkbox-hint{color:var(--checkbox-hint-color);font-size:var(--checkbox-hint-fs);line-height:var(--checkbox-hint-lh);margin-block-start:2px}a-checkbox[tone]:not([tone=""],[tone=neutral]){--checkbox-bg-selected: light-dark(oklch(from var(--checkbox-tone-source) .5 c h), oklch(from var(--checkbox-tone-source) .45 c h));--checkbox-bg-selected-hover: light-dark(oklch(from var(--checkbox-tone-source) .45 c h), oklch(from var(--checkbox-tone-source) .5 c h));--checkbox-bg-selected-active: light-dark(oklch(from var(--checkbox-tone-source) .4 c h), oklch(from var(--checkbox-tone-source) .57 c h))}a-checkbox[tone=brand]{--checkbox-tone-source: var(--anta-seed-brand);--checkbox-off-tone-source: var(--anta-seed-brand)}a-checkbox[tone=info]{--checkbox-tone-source: var(--anta-seed-info);--checkbox-off-tone-source: var(--anta-seed-info)}a-checkbox[tone=success]{--checkbox-tone-source: var(--anta-seed-success);--checkbox-off-tone-source: var(--anta-seed-success)}a-checkbox[tone=warning]{--checkbox-tone-source: var(--anta-seed-warning);--checkbox-off-tone-source: var(--anta-seed-warning)}a-checkbox[tone=critical]{--checkbox-tone-source: var(--anta-seed-critical);--checkbox-off-tone-source: var(--anta-seed-critical)}a-checkbox[tone=neutral]{--checkbox-tone-source: var(--anta-seed-neutral);--checkbox-off-tone-source: var(--anta-seed-neutral)}a-checkbox[tone]:not([tone=""],[tone=neutral],[tone-scope=selected]){--checkbox-bg: light-dark(oklch(from var(--checkbox-off-tone-source) .99 calc(c*.03) h), oklch(from var(--checkbox-off-tone-source) .15 calc(c*.18) h));--_checkbox-off-bg-selected: var(--checkbox-bg-selected);--_checkbox-border-base: color-mix(in oklch, var(--_checkbox-off-bg-selected) 70%, var(--checkbox-border-neutral));--checkbox-border: light-dark(oklch(from var(--_checkbox-border-base) calc(l + .17) c h), var(--_checkbox-border-base));--checkbox-border-hover: oklch(from var(--_checkbox-border-base) calc(l + .1) c h);--checkbox-border-active: light-dark(var(--_checkbox-border-base), oklch(from var(--_checkbox-border-base) calc(l + .17) c h))}a-checkbox[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--checkbox-tone-source: transparent;--checkbox-off-tone-source: transparent;@supports (color: attr(probe type(<color>),red)){--checkbox-tone-source: attr(tone type(<color>), transparent);--checkbox-off-tone-source: attr(tone type(<color>), transparent)}}label:has(>input[data-anta][type=checkbox]){display:inline-flex;align-items:center;gap:8px;color:var(--text-2);font-family:var(--sans-serif);font-size:15px;line-height:20px}input[data-anta][type=checkbox]{--checkbox-box-size: 16px;--checkbox-mask-size: 12px;--checkbox-round: 4px;--checkbox-bg: var(--bg-1);--checkbox-border-neutral: var(--border-3);--checkbox-border: var(--checkbox-border-neutral);--checkbox-border-hover: var(--border-2);--checkbox-border-active: var(--border-1);--checkbox-tone-source: var(--anta-seed-neutral);--checkbox-off-tone-source: var(--anta-seed-neutral);--checkbox-bg-selected: light-dark(oklch(from var(--checkbox-tone-source) .6 c h), oklch(from var(--checkbox-tone-source) .42 c h));--checkbox-bg-selected-hover: oklch(from var(--checkbox-tone-source) .45 c h);--checkbox-bg-selected-active: light-dark(oklch(from var(--checkbox-tone-source) .4 c h), oklch(from var(--checkbox-tone-source) .5 c h));box-sizing:border-box;flex:0 0 var(--checkbox-box-size);inline-size:var(--checkbox-box-size);block-size:var(--checkbox-box-size);margin:0;appearance:none;-webkit-appearance:none;border:1.5px solid var(--checkbox-border);border-radius:var(--checkbox-round);background-color:var(--checkbox-bg);background-repeat:no-repeat;background-position:center;background-size:var(--checkbox-mask-size);cursor:pointer;vertical-align:middle;transition:background-color .15s ease-out,border-color .15s ease-out}label:has(>input[data-anta][type=checkbox][size=small]){gap:6px;font-size:13px;line-height:16px}label:has(>input[data-anta][type=checkbox][size=large]){font-size:17px;line-height:22px}input[data-anta][type=checkbox][size=small]{--checkbox-box-size: 14px;--checkbox-mask-size: 10px}input[data-anta][type=checkbox][size=large]{--checkbox-box-size: 18px;--checkbox-mask-size: 14px}input[data-anta][type=checkbox][round]{--checkbox-round: 999px;@supports (border-radius: attr(probe type(<length>),1px)){--checkbox-round: attr(round type(<length>), 999px)}}input[data-anta][type=checkbox][tone]:not([tone=""],[tone=neutral]){--checkbox-bg-selected: light-dark(oklch(from var(--checkbox-tone-source) .5 c h), oklch(from var(--checkbox-tone-source) .45 c h));--checkbox-bg-selected-hover: light-dark(oklch(from var(--checkbox-tone-source) .45 c h), oklch(from var(--checkbox-tone-source) .5 c h));--checkbox-bg-selected-active: light-dark(oklch(from var(--checkbox-tone-source) .4 c h), oklch(from var(--checkbox-tone-source) .57 c h))}input[data-anta][type=checkbox][tone=brand]{--checkbox-tone-source: var(--anta-seed-brand);--checkbox-off-tone-source: var(--anta-seed-brand)}input[data-anta][type=checkbox][tone=info]{--checkbox-tone-source: var(--anta-seed-info);--checkbox-off-tone-source: var(--anta-seed-info)}input[data-anta][type=checkbox][tone=success]{--checkbox-tone-source: var(--anta-seed-success);--checkbox-off-tone-source: var(--anta-seed-success)}input[data-anta][type=checkbox][tone=warning]{--checkbox-tone-source: var(--anta-seed-warning);--checkbox-off-tone-source: var(--anta-seed-warning)}input[data-anta][type=checkbox][tone=critical]{--checkbox-tone-source: var(--anta-seed-critical);--checkbox-off-tone-source: var(--anta-seed-critical)}input[data-anta][type=checkbox][tone=neutral]{--checkbox-tone-source: var(--anta-seed-neutral);--checkbox-off-tone-source: var(--anta-seed-neutral)}input[data-anta][type=checkbox][tone]:not([tone=""],[tone=neutral],[tone-scope=selected]){--checkbox-bg: light-dark(oklch(from var(--checkbox-off-tone-source) .99 calc(c*.03) h), oklch(from var(--checkbox-off-tone-source) .15 calc(c*.18) h));--_checkbox-off-bg-selected: var(--checkbox-bg-selected);--_checkbox-border-base: color-mix(in oklch, var(--_checkbox-off-bg-selected) 70%, var(--checkbox-border-neutral));--checkbox-border: light-dark(oklch(from var(--_checkbox-border-base) calc(l + .17) c h), var(--_checkbox-border-base));--checkbox-border-hover: oklch(from var(--_checkbox-border-base) calc(l + .1) c h);--checkbox-border-active: light-dark(var(--_checkbox-border-base), oklch(from var(--_checkbox-border-base) calc(l + .17) c h))}input[data-anta][type=checkbox][tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--checkbox-tone-source: var(--anta-seed-neutral);--checkbox-off-tone-source: var(--anta-seed-neutral);@supports (color: attr(probe type(<color>),red)){--checkbox-tone-source: attr(tone type(<color>), var(--anta-seed-neutral));--checkbox-off-tone-source: attr(tone type(<color>), var(--anta-seed-neutral))}}@media(hover:hover)and (pointer:fine){input[data-anta][type=checkbox]:not(:disabled):hover{border-color:var(--checkbox-border-hover)}input[data-anta][type=checkbox]:not(:disabled):hover:is(:checked,:indeterminate){background-color:var(--checkbox-bg-selected-hover);border-color:var(--checkbox-bg-selected-hover)}}input[data-anta][type=checkbox]:not(:disabled):active{border-color:var(--checkbox-border-active)}input[data-anta][type=checkbox]:not(:disabled):active:is(:checked,:indeterminate){background-color:var(--checkbox-bg-selected-active);border-color:var(--checkbox-bg-selected-active)}input[data-anta][type=checkbox]:is(:checked,:indeterminate){background-color:var(--checkbox-bg-selected);border-color:var(--checkbox-bg-selected)}input[data-anta][type=checkbox]:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6f4f6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}input[data-anta][type=checkbox]:indeterminate{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6f4f6' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E")}input[data-anta][type=checkbox]:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}input[data-anta][type=checkbox]:disabled{border-color:color-mix(in oklch,var(--text-1) 10%,transparent);background-color:color-mix(in oklch,var(--text-1) 10%,transparent);cursor:not-allowed}input[data-anta][type=checkbox]:disabled:is(:checked,:indeterminate){background-color:color-mix(in oklch,var(--text-1) 10%,transparent)}@media(forced-colors:active){a-checkbox:is(:state(checked),:state(indeterminate)):before{forced-color-adjust:none;background-color:Highlight;border-color:Highlight}a-checkbox:is(:state(checked),:state(indeterminate)):after{forced-color-adjust:none;background-color:HighlightText}a-checkbox:disabled:before{background-color:Canvas;border-color:GrayText}a-checkbox:disabled:is(:state(checked),:state(indeterminate)):after{background-color:GrayText}}}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-checkbox{--checkbox-gap: 8px;--checkbox-box-size: 16px;--checkbox-bg: var(--bg-1);--checkbox-tone-source: var(--anta-seed-neutral);--checkbox-off-tone-source: var(--anta-seed-neutral);--checkbox-bg-selected: light-dark(oklch(from var(--checkbox-tone-source) .6 c h), oklch(from var(--checkbox-tone-source) .42 c h));--checkbox-bg-selected-hover: oklch(from var(--checkbox-tone-source) .45 c h);--checkbox-bg-selected-active: light-dark(oklch(from var(--checkbox-tone-source) .4 c h), oklch(from var(--checkbox-tone-source) .5 c h));--checkbox-border-neutral: var(--border-3);--checkbox-border: var(--checkbox-border-neutral);--checkbox-border-hover: var(--border-2);--checkbox-border-active: var(--border-1);--checkbox-icon: light-dark(#f6f4f6, #ece9ec);--checkbox-icon-disabled: light-dark(#c1b9c1, #534c57);--checkbox-bg-disabled: light-dark(color-mix(in oklch, #44374b 10%, transparent), color-mix(in oklch, #e4d1ef 10%, transparent));--checkbox-border-disabled: var(--checkbox-bg-disabled);--checkbox-mask-size: 13px;--checkbox-mask-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");--checkbox-mask-indeterminate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");--checkbox-label-color: var(--text-2);--checkbox-label-color-disabled: var(--text-4);--checkbox-hint-color: var(--text-3);--checkbox-label-fs: 15px;--checkbox-label-lh: 20px;--checkbox-hint-fs: 13px;--checkbox-hint-lh: 16px;display:inline-grid;grid-template-columns:auto 1fr;align-items:start;column-gap:var(--checkbox-gap);vertical-align:middle;cursor:pointer;user-select:none;-webkit-user-drag:none;outline:none;color:var(--checkbox-label-color);font-family:var(--sans-serif);font-size:var(--checkbox-label-fs);line-height:var(--checkbox-label-lh);&:before{content:"";grid-column:1;grid-row:1 / -1;align-self:start;margin-block-start:calc((var(--checkbox-label-lh) - var(--checkbox-box-size)) / 2);box-sizing:border-box;inline-size:16px;block-size:16px;border-radius:4px;background:var(--checkbox-bg);border:1.5px solid var(--checkbox-border);transition:background-color .15s ease-out,border-color .15s ease-out}&[round]{--checkbox-round: 999px;@supports (border-radius: attr(probe type(<length>),1px)){--checkbox-round: attr(round type(<length>), 999px)}}&[round]:before{border-radius:var(--checkbox-round, 999px)}&:after{content:"";grid-column:1;grid-row:1 / -1;align-self:start;margin-block-start:calc((var(--checkbox-label-lh) - var(--checkbox-box-size)) / 2);inline-size:16px;block-size:16px;background-color:transparent;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:var(--checkbox-mask-size);mask-size:var(--checkbox-mask-size)}@media(hover:hover)and (pointer:fine){&:not(:disabled):hover:before{border-color:var(--checkbox-border-hover);transition:background-color 75ms ease-in,border-color 75ms ease-in}&:not(:disabled):hover:is(:state(checked),:state(indeterminate)):before{background:var(--checkbox-bg-selected-hover);border-color:var(--checkbox-bg-selected-hover)}}&:not(:disabled):active:before{border-color:var(--checkbox-border-active);transition:background-color 50ms linear,border-color 50ms linear}&:not(:disabled):active:is(:state(checked),:state(indeterminate)):before{background:var(--checkbox-bg-selected-active);border-color:var(--checkbox-bg-selected-active)}&:is(:state(checked),:state(indeterminate)){&:before{background:var(--checkbox-bg-selected);border-color:var(--checkbox-bg-selected)}&:after{background-color:var(--checkbox-icon)}}&:state(checked):after{-webkit-mask-image:var(--checkbox-mask-check);mask-image:var(--checkbox-mask-check)}&:state(indeterminate):after{-webkit-mask-image:var(--checkbox-mask-indeterminate);mask-image:var(--checkbox-mask-indeterminate)}&:focus-visible{outline:none}&:focus-visible:before{outline:1px solid var(--focus-ring);outline-offset:1px}&:disabled{cursor:not-allowed;color:var(--checkbox-label-color-disabled);&:before{background:var(--checkbox-bg-disabled);border-color:var(--checkbox-border-disabled);transition:none}&:is(:state(checked),:state(indeterminate)):after{background-color:var(--checkbox-icon-disabled)}a-checkbox-hint{color:var(--checkbox-label-color-disabled)}}&[size=small]{--checkbox-gap: 6px;--checkbox-box-size: 14px;--checkbox-label-fs: 13px;--checkbox-label-lh: 16px;--checkbox-hint-fs: 12px;--checkbox-hint-lh: 14px;--checkbox-mask-size: 11px;&:before,&:after{inline-size:14px;block-size:14px}}&[size=large]{--checkbox-box-size: 18px;--checkbox-label-fs: 17px;--checkbox-label-lh: 22px;--checkbox-hint-fs: 15px;--checkbox-hint-lh: 19px;--checkbox-mask-size: 15px;&:before,&:after{inline-size:18px;block-size:18px}}}a-checkbox-label,a-checkbox-hint{display:block;grid-column:2;min-width:0}a-checkbox-hint{color:var(--checkbox-hint-color);font-size:var(--checkbox-hint-fs);line-height:var(--checkbox-hint-lh);margin-block-start:2px}a-checkbox[tone]:not([tone=""],[tone=neutral]){--checkbox-bg-selected: light-dark(oklch(from var(--checkbox-tone-source) .5 c h), oklch(from var(--checkbox-tone-source) .45 c h));--checkbox-bg-selected-hover: light-dark(oklch(from var(--checkbox-tone-source) .45 c h), oklch(from var(--checkbox-tone-source) .5 c h));--checkbox-bg-selected-active: light-dark(oklch(from var(--checkbox-tone-source) .4 c h), oklch(from var(--checkbox-tone-source) .57 c h))}a-checkbox[tone=brand]{--checkbox-tone-source: var(--anta-seed-brand);--checkbox-off-tone-source: var(--anta-seed-brand)}a-checkbox[tone=info]{--checkbox-tone-source: var(--anta-seed-info);--checkbox-off-tone-source: var(--anta-seed-info)}a-checkbox[tone=success]{--checkbox-tone-source: var(--anta-seed-success);--checkbox-off-tone-source: var(--anta-seed-success)}a-checkbox[tone=warning]{--checkbox-tone-source: var(--anta-seed-warning);--checkbox-off-tone-source: var(--anta-seed-warning)}a-checkbox[tone=critical]{--checkbox-tone-source: var(--anta-seed-critical);--checkbox-off-tone-source: var(--anta-seed-critical)}a-checkbox[tone=neutral]{--checkbox-tone-source: var(--anta-seed-neutral);--checkbox-off-tone-source: var(--anta-seed-neutral)}a-checkbox[tone]:not([tone=""],[tone=neutral],[tone-scope=selected]){--checkbox-bg: light-dark(oklch(from var(--checkbox-off-tone-source) .99 calc(c*.03) h), oklch(from var(--checkbox-off-tone-source) .15 calc(c*.18) h));--_checkbox-off-bg-selected: var(--checkbox-bg-selected);--_checkbox-border-base: color-mix(in oklch, var(--_checkbox-off-bg-selected) 70%, var(--checkbox-border-neutral));--checkbox-border: light-dark(oklch(from var(--_checkbox-border-base) calc(l + .17) c h), var(--_checkbox-border-base));--checkbox-border-hover: oklch(from var(--_checkbox-border-base) calc(l + .1) c h);--checkbox-border-active: light-dark(var(--_checkbox-border-base), oklch(from var(--_checkbox-border-base) calc(l + .17) c h))}a-checkbox[tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--checkbox-tone-source: transparent;--checkbox-off-tone-source: transparent;@supports (color: attr(probe type(<color>),red)){--checkbox-tone-source: attr(tone type(<color>), transparent);--checkbox-off-tone-source: attr(tone type(<color>), transparent)}}label:has(>input[data-anta][type=checkbox]){display:inline-flex;align-items:center;gap:8px;color:var(--text-2);font-family:var(--sans-serif);font-size:15px;line-height:20px}input[data-anta][type=checkbox]{--checkbox-box-size: 16px;--checkbox-mask-size: 13px;--checkbox-round: 4px;--checkbox-bg: var(--bg-1);--checkbox-border-neutral: var(--border-3);--checkbox-border: var(--checkbox-border-neutral);--checkbox-border-hover: var(--border-2);--checkbox-border-active: var(--border-1);--checkbox-tone-source: var(--anta-seed-neutral);--checkbox-off-tone-source: var(--anta-seed-neutral);--checkbox-bg-selected: light-dark(oklch(from var(--checkbox-tone-source) .6 c h), oklch(from var(--checkbox-tone-source) .42 c h));--checkbox-bg-selected-hover: oklch(from var(--checkbox-tone-source) .45 c h);--checkbox-bg-selected-active: light-dark(oklch(from var(--checkbox-tone-source) .4 c h), oklch(from var(--checkbox-tone-source) .5 c h));box-sizing:border-box;flex:0 0 var(--checkbox-box-size);inline-size:var(--checkbox-box-size);block-size:var(--checkbox-box-size);margin:0;appearance:none;-webkit-appearance:none;border:1.5px solid var(--checkbox-border);border-radius:var(--checkbox-round);background-color:var(--checkbox-bg);background-repeat:no-repeat;background-position:center;background-size:var(--checkbox-mask-size);cursor:pointer;vertical-align:middle;transition:background-color .15s ease-out,border-color .15s ease-out}label:has(>input[data-anta][type=checkbox][size=small]){gap:6px;font-size:13px;line-height:16px}label:has(>input[data-anta][type=checkbox][size=large]){font-size:17px;line-height:22px}input[data-anta][type=checkbox][size=small]{--checkbox-box-size: 14px;--checkbox-mask-size: 11px}input[data-anta][type=checkbox][size=large]{--checkbox-box-size: 18px;--checkbox-mask-size: 15px}input[data-anta][type=checkbox][round]{--checkbox-round: 999px;@supports (border-radius: attr(probe type(<length>),1px)){--checkbox-round: attr(round type(<length>), 999px)}}input[data-anta][type=checkbox][tone]:not([tone=""],[tone=neutral]){--checkbox-bg-selected: light-dark(oklch(from var(--checkbox-tone-source) .5 c h), oklch(from var(--checkbox-tone-source) .45 c h));--checkbox-bg-selected-hover: light-dark(oklch(from var(--checkbox-tone-source) .45 c h), oklch(from var(--checkbox-tone-source) .5 c h));--checkbox-bg-selected-active: light-dark(oklch(from var(--checkbox-tone-source) .4 c h), oklch(from var(--checkbox-tone-source) .57 c h))}input[data-anta][type=checkbox][tone=brand]{--checkbox-tone-source: var(--anta-seed-brand);--checkbox-off-tone-source: var(--anta-seed-brand)}input[data-anta][type=checkbox][tone=info]{--checkbox-tone-source: var(--anta-seed-info);--checkbox-off-tone-source: var(--anta-seed-info)}input[data-anta][type=checkbox][tone=success]{--checkbox-tone-source: var(--anta-seed-success);--checkbox-off-tone-source: var(--anta-seed-success)}input[data-anta][type=checkbox][tone=warning]{--checkbox-tone-source: var(--anta-seed-warning);--checkbox-off-tone-source: var(--anta-seed-warning)}input[data-anta][type=checkbox][tone=critical]{--checkbox-tone-source: var(--anta-seed-critical);--checkbox-off-tone-source: var(--anta-seed-critical)}input[data-anta][type=checkbox][tone=neutral]{--checkbox-tone-source: var(--anta-seed-neutral);--checkbox-off-tone-source: var(--anta-seed-neutral)}input[data-anta][type=checkbox][tone]:not([tone=""],[tone=neutral],[tone-scope=selected]){--checkbox-bg: light-dark(oklch(from var(--checkbox-off-tone-source) .99 calc(c*.03) h), oklch(from var(--checkbox-off-tone-source) .15 calc(c*.18) h));--_checkbox-off-bg-selected: var(--checkbox-bg-selected);--_checkbox-border-base: color-mix(in oklch, var(--_checkbox-off-bg-selected) 70%, var(--checkbox-border-neutral));--checkbox-border: light-dark(oklch(from var(--_checkbox-border-base) calc(l + .17) c h), var(--_checkbox-border-base));--checkbox-border-hover: oklch(from var(--_checkbox-border-base) calc(l + .1) c h);--checkbox-border-active: light-dark(var(--_checkbox-border-base), oklch(from var(--_checkbox-border-base) calc(l + .17) c h))}input[data-anta][type=checkbox][tone]:not([tone=""],[tone=brand],[tone=neutral],[tone=info],[tone=success],[tone=warning],[tone=critical]){--checkbox-tone-source: var(--anta-seed-neutral);--checkbox-off-tone-source: var(--anta-seed-neutral);@supports (color: attr(probe type(<color>),red)){--checkbox-tone-source: attr(tone type(<color>), var(--anta-seed-neutral));--checkbox-off-tone-source: attr(tone type(<color>), var(--anta-seed-neutral))}}@media(hover:hover)and (pointer:fine){input[data-anta][type=checkbox]:not(:disabled):hover{border-color:var(--checkbox-border-hover)}input[data-anta][type=checkbox]:not(:disabled):hover:is(:checked,:indeterminate){background-color:var(--checkbox-bg-selected-hover);border-color:var(--checkbox-bg-selected-hover)}}input[data-anta][type=checkbox]:not(:disabled):active{border-color:var(--checkbox-border-active)}input[data-anta][type=checkbox]:not(:disabled):active:is(:checked,:indeterminate){background-color:var(--checkbox-bg-selected-active);border-color:var(--checkbox-bg-selected-active)}input[data-anta][type=checkbox]:is(:checked,:indeterminate){background-color:var(--checkbox-bg-selected);border-color:var(--checkbox-bg-selected)}input[data-anta][type=checkbox]:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6f4f6' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}input[data-anta][type=checkbox]:indeterminate{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6f4f6' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E")}input[data-anta][type=checkbox]:focus-visible{outline:1px solid var(--focus-ring);outline-offset:1px}input[data-anta][type=checkbox]:disabled{border-color:color-mix(in oklch,var(--text-1) 10%,transparent);background-color:color-mix(in oklch,var(--text-1) 10%,transparent);cursor:not-allowed}input[data-anta][type=checkbox]:disabled:is(:checked,:indeterminate){background-color:color-mix(in oklch,var(--text-1) 10%,transparent)}@media(forced-colors:active){a-checkbox:is(:state(checked),:state(indeterminate)):before{forced-color-adjust:none;background-color:Highlight;border-color:Highlight}a-checkbox:is(:state(checked),:state(indeterminate)):after{forced-color-adjust:none;background-color:HighlightText}a-checkbox:disabled:before{background-color:Canvas;border-color:GrayText}a-checkbox:disabled:is(:state(checked),:state(indeterminate)):after{background-color:GrayText}}}

package/dist/elements/a-copy.css

@@ -1 +1 @@
-@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-copy,a-copy:not(:defined){display:contents}}
+@layer base,anta,components,utilities;@layer anta.reset,anta.components,anta.theme;@layer anta.components{a-copy,a-copy:not(:defined){display:contents}a-copy::part(feedback){--_copy-opacity-from: 1;--_copy-opacity-to: 0;--_copy-easing: ease-out;--_copy-above-from: translateY( calc(-100% - 10px) );--_copy-above-to: translateY( calc(-100% - 1.5em) );--_copy-below-from: translateY(10px);--_copy-below-to: translateY(1.5em);position:fixed;margin:0;padding:0;border:0;right:auto;bottom:auto;background:none;overflow:visible;pointer-events:none;align-items:center;gap:4px;box-sizing:border-box;color:var(--text-2-success);font-family:var(--sans-serif);font-size:13px;line-height:16px;font-weight:500;white-space:nowrap}a-copy::part(feedback):popover-open{display:inline-flex}}

package/dist/elements/a-copy.d.ts

@@ -1,16 +1,12 @@
 import { HTMLElementBase } from "../anta_helpers";
 import "./a-copy.css";
-declare global {
-    interface Document {
-        hasCopyDelegation?: boolean;
-    }
-}
 export declare class ACopyElement extends HTMLElementBase {
     #private;
     connectedCallback(): void;
     /** Run the copy for the activated host. Called from the delegated click /
      * menuselect handlers; the confirmation follows a successful `copydone`. */
     activate(): void;
+    adoptedCallback(): void;
     disconnectedCallback(): void;
 }
 export declare function register_a_copy(): void;

package/dist/elements/a-copy.js

@@ -4,104 +4,65 @@ import "./a-copy.css";
 const BUTTON_HOST = "a-button, button, [role=button]";
 const MENU_HOST = "a-menu-item, [role=menuitem]";
 const ANY_HOST = `${BUTTON_HOST}, ${MENU_HOST}`;
-const pointerOrigins = /* @__PURE__ */ new WeakMap();
+const COPY_DELEGATION = /* @__PURE__ */ Symbol.for("anta.copy-delegation");
 function copyChild(host) {
   return host?.querySelector(":scope > a-copy") ?? null;
 }
 function hostBlocked(host) {
   return host.hasAttribute("disabled") || host.hasAttribute("loading") || host.getAttribute("aria-disabled") === "true";
 }
-function installCopyDelegation(doc) {
-  if (!doc || doc.hasCopyDelegation) return;
-  const preRequest = (target, origin) => {
-    const host = target?.closest?.(ANY_HOST);
+function copyDelegation(doc) {
+  if (doc[COPY_DELEGATION]) return doc[COPY_DELEGATION];
+  const origins = /* @__PURE__ */ new WeakMap();
+  const hostFor = (event) => event.target?.closest?.(ANY_HOST);
+  const preRequest = (event, origin) => {
+    const host = hostFor(event);
     if (!host || hostBlocked(host)) return;
     const el = copyChild(host);
     if (!el) return;
-    if (origin) pointerOrigins.set(el, origin);
-    else pointerOrigins.delete(el);
+    if (origin) origins.set(el, origin);
+    else origins.delete(el);
     emitCopyRequest(el);
   };
-  doc.addEventListener(
-    "pointerdown",
-    (e) => preRequest(e.target, { x: e.clientX, y: e.clientY }),
-    true
-  );
-  doc.addEventListener(
-    "keydown",
-    (e) => {
-      if (e.key === "Enter" || e.key === " ")
-        preRequest(e.target);
-    },
-    true
-  );
-  doc.addEventListener(
-    "click",
-    (e) => {
-      const host = e.target?.closest?.(BUTTON_HOST);
-      if (!host || hostBlocked(host)) return;
-      const el = copyChild(host);
-      if (!el) return;
-      if (e.detail)
-        pointerOrigins.set(el, { x: e.clientX, y: e.clientY });
-      else pointerOrigins.delete(el);
-      el.activate();
-    },
-    true
-  );
-  doc.addEventListener(
-    "menuselect",
-    (e) => {
-      const host = e.target?.closest?.(MENU_HOST);
-      if (!host || hostBlocked(host)) return;
-      copyChild(host)?.activate();
-    },
-    true
-  );
-  doc.hasCopyDelegation = true;
+  const pointerdown = (e) => preRequest(e, { x: e.clientX, y: e.clientY });
+  const keydown = (e) => {
+    if (e.key === "Enter" || e.key === " ") preRequest(e);
+  };
+  const click = (e) => {
+    const host = hostFor(e);
+    if (!host?.matches(BUTTON_HOST) || hostBlocked(host)) return;
+    const el = copyChild(host);
+    if (!el) return;
+    if (e.detail) origins.set(el, { x: e.clientX, y: e.clientY });
+    else origins.delete(el);
+    el.activate();
+  };
+  const menuselect = (e) => {
+    const host = hostFor(e);
+    if (!host?.matches(MENU_HOST) || hostBlocked(host)) return;
+    copyChild(host)?.activate();
+  };
+  doc.addEventListener("pointerdown", pointerdown, true);
+  doc.addEventListener("keydown", keydown, true);
+  doc.addEventListener("click", click, true);
+  doc.addEventListener("menuselect", menuselect, true);
+  const delegation = {
+    readers: /* @__PURE__ */ new Set(),
+    origins,
+    dispose: () => {
+      doc.removeEventListener("pointerdown", pointerdown, true);
+      doc.removeEventListener("keydown", keydown, true);
+      doc.removeEventListener("click", click, true);
+      doc.removeEventListener("menuselect", menuselect, true);
+      delete doc[COPY_DELEGATION];
+    }
+  };
+  doc[COPY_DELEGATION] = delegation;
+  return delegation;
 }
 const FEEDBACK_MS = 900;
 const COPY_FEEDBACK_TEMPLATE = typeof document === "undefined" ? void 0 : (() => {
   const template = document.createElement("template");
-  const style = document.createElement("style");
-  style.textContent = `
-    .feedback {
-      position: fixed;
-      margin: 0;
-      padding: 0;
-      border: 0;
-      inset: auto;
-      background: none;
-      overflow: visible;
-      pointer-events: none;
-      display: inline-flex;
-      align-items: center;
-      gap: 4px;
-      box-sizing: border-box;
-      color: var(--text-2-success);
-      font-family: var(--sans-serif);
-      font-size: 13px;
-      line-height: 16px;
-      font-weight: 500;
-      white-space: nowrap;
-      --_feedback-y-from: calc(-100% - 10px);
-      --_feedback-y-to: calc(-100% - 1.5em);
-      transform: translate(var(--_feedback-x), var(--_feedback-y-from));
-    }
-    .feedback[data-placement="below"] {
-      --_feedback-y-from: 10px;
-      --_feedback-y-to: 1.5em;
-    }
-    .feedback[data-measure-end] {
-      transform: translate(var(--_feedback-x), var(--_feedback-y-to));
-    }
-    .feedback:not(:popover-open) { display: none; }
-    .feedback[data-show] { animation: a-copy-feedback-rise ${FEEDBACK_MS}ms ease-out forwards; }
-    @keyframes a-copy-feedback-rise {
-      from { opacity: 1; transform: translate(var(--_feedback-x), var(--_feedback-y-from)); }
-      to { opacity: 0; transform: translate(var(--_feedback-x), var(--_feedback-y-to)); }
-    }
-  `;
   const feedback = document.createElement("div");
   feedback.className = "feedback";
   feedback.part.add("feedback");
@@ -113,25 +74,50 @@ const COPY_FEEDBACK_TEMPLATE = typeof document === "undefined" ? void 0 : (() =>
   const label = document.createElement("span");
   label.className = "label";
   feedback.append(icon, label);
-  template.content.append(style, feedback);
+  template.content.append(feedback);
   return template;
 })();
 class ACopyElement extends HTMLElementBase {
   #feedback;
   #feedbackLabel;
   #feedbackTimer;
+  #timerView;
+  #delegation;
+  #connectedDocument;
+  #generation = 0;
+  #completion;
+  #animation;
+  #motion;
+  #reconnectOrigin;
   connectedCallback() {
-    installCopyDelegation(this.doc);
+    this.#delegation = copyDelegation(this.doc);
+    this.#connectedDocument = this.doc;
+    this.#delegation.readers.add(this);
+    if (this.#reconnectOrigin?.doc === this.doc && this.#reconnectOrigin.origin) {
+      this.#delegation.origins.set(this, this.#reconnectOrigin.origin);
+    }
+    this.#reconnectOrigin = void 0;
     this.addEventListener("copydone", this.#onCopyDone);
   }
   /** Run the copy for the activated host. Called from the delegated click /
    * menuselect handlers; the confirmation follows a successful `copydone`. */
   activate() {
-    runCopy(this);
+    const generation = this.#generation;
+    const origin = this.#delegation?.origins.get(this);
+    this.#delegation?.origins.delete(this);
+    runCopy(this, (ok) => {
+      this.#completion = { current: this.isConnected && generation === this.#generation, origin };
+      try {
+        this.dispatchEvent(new this.view.CustomEvent("copydone", { detail: { ok } }));
+      } finally {
+        this.#completion = void 0;
+      }
+    });
   }
   #onCopyDone = (e) => {
-    const origin = pointerOrigins.get(this);
-    pointerOrigins.delete(this);
+    if (e.target !== this || this.#completion?.current === false || !this.isConnected) return;
+    const origin = this.#completion ? this.#completion.origin : this.#delegation?.origins.get(this);
+    if (!this.#completion) this.#delegation?.origins.delete(this);
     if (!this.hasAttribute("toast")) return;
     if (!e.detail?.ok) return;
     const host = this.closest(ANY_HOST);
@@ -154,38 +140,73 @@ class ACopyElement extends HTMLElementBase {
     if (origin) {
       feedback.style.left = `${origin.x}px`;
       feedback.style.top = `${origin.y}px`;
-      feedback.style.setProperty("--_feedback-x", "8px");
+      feedback.style.translate = "8px 0";
       belowTop = origin.y;
     } else {
       const rect = host.getBoundingClientRect();
       const rtl = this.view.getComputedStyle(host).direction === "rtl";
       feedback.style.left = `${rtl ? rect.right - 12 : rect.left + 12}px`;
       feedback.style.top = `${rect.top}px`;
-      feedback.style.setProperty("--_feedback-x", rtl ? "-100%" : "0");
+      feedback.style.translate = rtl ? "-100% 0" : "0 0";
       belowTop = rect.bottom;
     }
-    clearTimeout(this.#feedbackTimer);
-    feedback.removeAttribute("data-show");
-    feedback.removeAttribute("data-placement");
-    if (feedback.matches(":popover-open")) feedback.hidePopover();
+    if (!this.#motion) {
+      const styles = this.view.getComputedStyle(feedback);
+      const motion = {
+        opacity: [styles.getPropertyValue("--_copy-opacity-from").trim(), styles.getPropertyValue("--_copy-opacity-to").trim()],
+        easing: styles.getPropertyValue("--_copy-easing").trim(),
+        above: [styles.getPropertyValue("--_copy-above-from").trim(), styles.getPropertyValue("--_copy-above-to").trim()],
+        below: [styles.getPropertyValue("--_copy-below-from").trim(), styles.getPropertyValue("--_copy-below-to").trim()]
+      };
+      if (![...motion.opacity, ...motion.above, ...motion.below, motion.easing].every(Boolean)) return;
+      this.#motion = motion;
+    }
+    this.#clearFeedback();
     feedback.showPopover();
-    feedback.setAttribute("data-measure-end", "");
-    const crossesTopEdge = feedback.getBoundingClientRect().top < 0;
-    feedback.removeAttribute("data-measure-end");
-    if (crossesTopEdge) {
-      feedback.setAttribute("data-placement", "below");
-      feedback.style.top = `${belowTop}px`;
+    feedback.style.transform = this.#motion.above[1];
+    const below = feedback.getBoundingClientRect().top < 0;
+    if (below) feedback.style.top = `${belowTop}px`;
+    const transforms = below ? this.#motion.below : this.#motion.above;
+    feedback.style.transform = transforms[0];
+    if (!this.#animation) {
+      this.#animation = feedback.animate({ opacity: this.#motion.opacity, transform: transforms }, {
+        duration: FEEDBACK_MS,
+        easing: this.#motion.easing,
+        fill: "forwards"
+      });
+    } else {
+      this.#animation.effect.setKeyframes({ opacity: this.#motion.opacity, transform: transforms });
+      this.#animation.play();
     }
-    void feedback.offsetWidth;
-    feedback.setAttribute("data-show", "");
-    this.#feedbackTimer = setTimeout(() => {
-      feedback.removeAttribute("data-show");
-      if (feedback.matches(":popover-open")) feedback.hidePopover();
-    }, FEEDBACK_MS);
+    this.#animation.currentTime = 0;
+    this.#timerView = this.view;
+    this.#feedbackTimer = this.#timerView.setTimeout(() => this.#clearFeedback(), FEEDBACK_MS);
+  }
+  #clearFeedback() {
+    if (this.#feedbackTimer != null) this.#timerView?.clearTimeout(this.#feedbackTimer);
+    this.#feedbackTimer = void 0;
+    this.#timerView = void 0;
+    this.#animation?.cancel();
+    if (this.#feedback?.matches(":popover-open")) this.#feedback.hidePopover();
+  }
+  adoptedCallback() {
+    this.#animation?.cancel();
+    this.#animation = void 0;
+    this.#motion = void 0;
+    this.#reconnectOrigin = void 0;
+    this.#connectedDocument = void 0;
   }
   disconnectedCallback() {
-    clearTimeout(this.#feedbackTimer);
-    pointerOrigins.delete(this);
+    this.#generation++;
+    this.#clearFeedback();
+    const pending = this.#reconnectOrigin = { doc: this.#connectedDocument, origin: this.#delegation?.origins.get(this) };
+    queueMicrotask(() => {
+      if (this.#reconnectOrigin === pending) this.#reconnectOrigin = void 0;
+    });
+    this.#delegation?.origins.delete(this);
+    this.#delegation?.readers.delete(this);
+    if (this.#delegation?.readers.size === 0) this.#delegation.dispose();
+    this.#delegation = void 0;
     this.removeEventListener("copydone", this.#onCopyDone);
   }
 }