@antadesign/anta 0.2.0 → 0.2.2

package/dist/elements/a-tooltip.js

@@ -8,6 +8,9 @@ const DEFAULT_DELAY = 250;
 const FADE_MS = 150;
 const GRACE_MS = 300;
 const CLOSE_DELAY = 120;
+const PROX_NEAR = 10;
+const PROX_FAR = 100;
+const PROX_FADE_MS = 60;
 const ENTER_TOUCH_DELAY = 500;
 const LEAVE_TOUCH_DELAY = 1500;
 const TOUCH_SLOP = 10;
@@ -26,7 +29,10 @@ function clearGrace() {
   }
 }
 function claimOpen(el) {
-  if (currentOpen && currentOpen !== el) currentOpen.hide();
+  if (currentOpen && currentOpen !== el) {
+    if (currentOpen.isConnected) currentOpen.hide();
+    else currentOpen.cleanup();
+  }
   currentOpen = el;
   clearGrace();
 }
@@ -58,6 +64,10 @@ class ATooltipElement extends HTMLElementBase {
   static observedAttributes = ["delay"];
   /** Shadow-internal popover surface — the only thing we ever mutate. */
   container;
+  /** Inner bubble inside `.container`. Holds the slot + all visual chrome and
+   *  carries the proximity (distance-from-anchor) opacity, kept separate from
+   *  the container's enter/exit/cross-fade opacity. */
+  bubble;
   anchor = null;
   listening = false;
   shown = false;
@@ -81,38 +91,47 @@ class ATooltipElement extends HTMLElementBase {
 
       .container {
         --_dur: ${FADE_MS}ms;
-
         position: fixed;
         left: 0;
         top: 0;
         margin: 0;
+        padding: 0;
+        border: 0;
+        background: transparent;
+        color: inherit;
+        overflow: visible;
+        box-sizing: border-box;
+        width: fit-content;
+        pointer-events: none;
+        opacity: 0;
+        transition:
+          opacity var(--_dur) ease,
+          overlay var(--_dur) ease allow-discrete,
+          display var(--_dur) ease allow-discrete;
+      }
+
+      .container:popover-open { opacity: 1; }
+
+      @starting-style {
+        .container:popover-open { opacity: 0; }
+      }
+
+      .bubble {
         box-sizing: border-box;
         width: fit-content;
         max-width: var(--tooltip-max-width, min(calc(100vw - 20px), 80ch));
         max-height: calc(100vh - 20px);
         overflow: clip;
-        pointer-events: none;
         text-align: left;
-
         background: var(--tooltip-bg, Canvas);
         color: var(--text-3, CanvasText);
         box-shadow: var(--tooltip-shadow, 0 1px 8px rgba(0, 0, 0, 0.2));
         -webkit-backdrop-filter: var(--tooltip-backdrop-filter, blur(8px));
         backdrop-filter: var(--tooltip-backdrop-filter, blur(8px));
-        padding: 5px 8px;
+        padding: var(--tooltip-padding, 4px 8px);
         border: var(--tooltip-border, none);
         border-radius: var(--tooltip-radius, 3px);
         outline: none;
-
-        /* The bubble establishes its own text baseline so inheritable text
-           properties from the anchor (e.g. a Button's condensed "wdth" 88
-           axis, its 0.05ch letter-spacing, an uppercase transform, a custom
-           font) don't bleed into the slotted content. The content is slotted
-           light DOM, so it inherits these *from this container* \u2014 making this
-           the single choke point. Values mirror Anta's body text. Consumers
-           still customise a single tooltip by styling their own content
-           element directly (a class on the content overrides what it inherits
-           \u2014 see the Tooltip docs). */
         font-family: var(--sans-serif, system-ui, sans-serif);
         font-size: 14px;
         font-weight: 400;
@@ -126,34 +145,21 @@ class ATooltipElement extends HTMLElementBase {
         white-space: break-spaces;
         word-break: break-word;
         overflow-wrap: break-word;
-
-        /* Clean enter/exit fade. allow-discrete keeps the bubble rendered
-           through its fade-out after hidePopover(), and @starting-style
-           gives every open a from-opacity:0 \u2014 so the first paint at a
-           not-yet-computed transform is invisible (no flash at a stale
-           spot), and re-appearing is always clean. */
-        opacity: 0;
-        transition:
-          opacity var(--_dur) ease,
-          overlay var(--_dur) ease allow-discrete,
-          display var(--_dur) ease allow-discrete;
+        opacity: 1;
+        transition: opacity ${PROX_FADE_MS}ms linear;
       }
 
-      .container:popover-open { opacity: 1; }
-
-      @starting-style {
-        .container:popover-open { opacity: 0; }
-      }
-
-      /* Interactive tooltips accept pointer events so their content (links,
-         buttons) is clickable; the default click-through bubble does not. */
       :host([interactive]) .container { pointer-events: auto; }
     `;
     this.container = document.createElement("div");
     this.container.className = "container";
     this.container.setAttribute("popover", "manual");
     this.container.setAttribute("role", "tooltip");
-    this.container.append(document.createElement("slot"));
+    this.bubble = document.createElement("div");
+    this.bubble.className = "bubble";
+    this.bubble.setAttribute("part", "bubble");
+    this.bubble.append(document.createElement("slot"));
+    this.container.append(this.bubble);
     this.container.addEventListener("mouseenter", () => {
       if (this.isInteractive) this.cancelHide();
     });
@@ -170,17 +176,7 @@ class ATooltipElement extends HTMLElementBase {
     lazyObserver?.observe(parent);
   }
   disconnectedCallback() {
-    this.hide();
-    if (this.fadeTimer !== void 0) {
-      clearTimeout(this.fadeTimer);
-      this.fadeTimer = void 0;
-    }
-    this.fading = false;
-    if (this.docMoveBound) {
-      this.doc.removeEventListener("mousemove", this.onDocMove);
-      this.docMoveBound = false;
-    }
-    this.teardownListeners();
+    this.cleanup();
     if (this.anchor) {
       if (anchorToTooltip.get(this.anchor) === this) {
         anchorToTooltip.delete(this.anchor);
@@ -215,15 +211,13 @@ class ATooltipElement extends HTMLElementBase {
   get isInteractive() {
     return this.hasAttribute("interactive");
   }
-  /** Pinned under the anchor (no cursor-following). Interactive implies this —
-   *  you can't move into a bubble that's chasing the cursor. */
-  get isStatic() {
-    return this.hasAttribute("static") || this.isInteractive;
-  }
-  /** Pinned to the anchor for any reason: the `static`/`interactive` attrs, or
-   *  a touch long-press (a finger can't track a following bubble). */
+  /** Pinned under the anchor (no cursor-following) — the DEFAULT. Following the
+   *  cursor is opt-in via the `follow` attribute. `interactive` (you can't move
+   *  into a bubble that chases the cursor) and a touch long-press (a finger
+   *  can't track one) force pinned regardless of `follow`. */
   get isPinned() {
-    return this.isStatic || this.touchOpen;
+    if (this.isInteractive || this.touchOpen) return true;
+    return !this.hasAttribute("follow");
   }
   get prefersTop() {
     return this.getAttribute("placement") === "top";
@@ -284,6 +278,19 @@ class ATooltipElement extends HTMLElementBase {
     if (!this.isPinned && e) this.positionToMouse(e);
     else this.positionToTarget();
   }
+  /** Opacity for the inner bubble from the cursor's distance to the anchor rect
+   *  (0 inside the rect): 1 within PROX_NEAR, a linear ramp to 0 at PROX_FAR.
+   *  Cursor-follow only — drives the "fade as you move away" behaviour. */
+  proximityOpacity(e) {
+    if (!this.anchor) return 1;
+    const r = this.anchor.getBoundingClientRect();
+    const dx = Math.max(r.left - e.clientX, 0, e.clientX - r.right);
+    const dy = Math.max(r.top - e.clientY, 0, e.clientY - r.bottom);
+    const dist = Math.hypot(dx, dy);
+    if (dist <= PROX_NEAR) return 1;
+    if (dist >= PROX_FAR) return 0;
+    return 1 - (dist - PROX_NEAR) / (PROX_FAR - PROX_NEAR);
+  }
   // --- show / hide ---
   show = (e) => {
     if (!this.anchor) return;
@@ -295,6 +302,7 @@ class ATooltipElement extends HTMLElementBase {
     if (!this.shown) {
       this.shown = true;
       this.fading = false;
+      this.bubble.style.opacity = "1";
       if (this.fadeTimer !== void 0) {
         clearTimeout(this.fadeTimer);
         this.fadeTimer = void 0;
@@ -315,28 +323,65 @@ class ATooltipElement extends HTMLElementBase {
     this.shown = false;
     this.touchOpen = false;
     this.container.hidePopover();
-    this.view.removeEventListener("scroll", this.hide, { capture: true });
-    this.doc.removeEventListener("keydown", this.onKeyDown, true);
     this.fading = true;
     if (this.fadeTimer !== void 0) clearTimeout(this.fadeTimer);
-    this.fadeTimer = setTimeout(() => {
-      this.fading = false;
-      this.fadeTimer = void 0;
-      if (this.docMoveBound) {
-        this.doc.removeEventListener("mousemove", this.onDocMove);
-        this.docMoveBound = false;
-      }
-    }, FADE_MS);
+    this.fadeTimer = setTimeout(() => this.detachGlobals(), FADE_MS);
     releaseOpen(this);
   };
+  /** Remove every document / window listener this element binds and stop the
+   *  fade timer. Used by hide() (after the exit fade) and by cleanup()
+   *  (immediately). Idempotent. */
+  detachGlobals() {
+    if (this.fadeTimer !== void 0) {
+      clearTimeout(this.fadeTimer);
+      this.fadeTimer = void 0;
+    }
+    this.fading = false;
+    this.view.removeEventListener("scroll", this.hide, { capture: true });
+    this.doc.removeEventListener("keydown", this.onKeyDown, true);
+    if (this.docMoveBound) {
+      this.doc.removeEventListener("mousemove", this.onDocMove);
+      this.docMoveBound = false;
+    }
+  }
+  /** Full, immediate teardown: close the popover now (no fade), detach every
+   *  listener, clear all timers, release the coordinator slot, reset state.
+   *  Idempotent. Called from disconnectedCallback, and from the orphan safety
+   *  net (claimOpen / onDocMove) when the element is gone but
+   *  disconnectedCallback didn't fire. Not `private` — the module coordinator
+   *  calls it. */
+  cleanup() {
+    this.cancelHide();
+    if (this.shown) {
+      this.shown = false;
+      this.touchOpen = false;
+      if (this.container.matches(":popover-open")) this.container.hidePopover();
+    }
+    this.detachGlobals();
+    this.teardownListeners();
+    releaseOpen(this);
+    this.bubble.style.opacity = "";
+  }
   /** While shown, track the cursor even after it has left the anchor (during
-   *  the close delay). Cursor-following only — static/interactive bubbles
-   *  stay pinned. */
+   *  the close delay). Only runs for `follow` tooltips — pinned bubbles
+   *  (the default, `interactive`, touch) stay put. */
   onDocMove = (e) => {
-    if ((this.shown || this.fading) && !this.isPinned) {
-      this.lastMouse = e;
-      this.positionToMouse(e);
+    if (!this.isConnected) {
+      this.cleanup();
+      return;
+    }
+    if (!(this.shown || this.fading) || this.isPinned) return;
+    this.lastMouse = e;
+    const o = this.proximityOpacity(e);
+    if (o === 0) {
+      this.bubble.style.transition = "none";
+      this.bubble.style.opacity = "0";
+      if (this.shown) this.hide();
+      return;
     }
+    this.positionToMouse(e);
+    this.bubble.style.transition = "";
+    this.bubble.style.opacity = String(o);
   };
   /** Hide after CLOSE_DELAY unless something cancels it first (re-enter, or
    *  another tooltip claiming the slot). Lets the bubble bridge the gap to a

package/dist/general_types.d.ts

@@ -163,11 +163,11 @@ export interface ATooltipAttributes extends BaseAttributes {
     delay?: number | string;
     /** Preferred side; auto-flips when there's no room. Defaults to `'bottom'`. */
     placement?: 'top' | 'bottom';
-    /** Pin under the anchor instead of following the cursor. Presence-based
-     *  (`''` on, omit off). */
-    static?: boolean | '';
+    /** Follow the cursor instead of pinning under the anchor (pinned is the
+     *  default). Presence-based (`''` on, omit off). */
+    follow?: boolean | '';
     /** Make the bubble hoverable/clickable (pointer events on, stays open while
-     *  hovered). Implies `static`. Presence-based (`''` on, omit off). */
+     *  hovered). Always pinned. Presence-based (`''` on, omit off). */
     interactive?: boolean | '';
     /** HTML `id`. */
     id?: string;

package/dist/index.d.ts

@@ -33,6 +33,7 @@ export { Tooltip } from './components/Tooltip';
 export type { TooltipProps } from './components/Tooltip';
 export type { BaseProps, BaseAttributes } from './general_types';
 export { configure } from './jsx-runtime';
+export type { AntaIntrinsicElements } from './jsx-runtime';
 /**
  * Seed interface for the icon shape registry. The generated
  * `a-icon.shapes.d.ts` augments this interface with one key per

package/dist/jsx-runtime.d.ts

@@ -24,20 +24,22 @@ export declare function jsxs(type: ComponentType, props: Record<string, unknown>
 export { _Fragment as Fragment };
 import type { AProgressAttributes, ATextAttributes, ATitleAttributes, ATagAttributes, AIconAttributes, AButtonAttributes, ATooltipAttributes, BaseAttributes } from './general_types';
 export declare namespace JSX {
-    interface IntrinsicElements extends React.JSX.IntrinsicElements {
-        'a-progress': AProgressAttributes;
-        'a-progress-label': BaseAttributes;
-        'a-progress-number': BaseAttributes;
-        'a-progress-text': BaseAttributes;
-        'a-progress-hint': BaseAttributes;
-        'a-text': ATextAttributes;
-        'a-title': ATitleAttributes;
-        'a-tag': ATagAttributes;
-        'a-tag-label': BaseAttributes;
-        'a-tag-value': BaseAttributes;
-        'a-icon': AIconAttributes;
-        'a-button': AButtonAttributes;
-        'a-button-label': BaseAttributes;
-        'a-tooltip': ATooltipAttributes;
+    interface IntrinsicElements extends React.JSX.IntrinsicElements, AntaIntrinsicElements {
     }
 }
+export interface AntaIntrinsicElements {
+    'a-progress': AProgressAttributes;
+    'a-progress-label': BaseAttributes;
+    'a-progress-number': BaseAttributes;
+    'a-progress-text': BaseAttributes;
+    'a-progress-hint': BaseAttributes;
+    'a-text': ATextAttributes;
+    'a-title': ATitleAttributes;
+    'a-tag': ATagAttributes;
+    'a-tag-label': BaseAttributes;
+    'a-tag-value': BaseAttributes;
+    'a-icon': AIconAttributes;
+    'a-button': AButtonAttributes;
+    'a-button-label': BaseAttributes;
+    'a-tooltip': ATooltipAttributes;
+}

package/dist/reset.css

@@ -1,209 +1 @@
-/* Anta's reset + typography defaults. All rules live in `@layer anta`
-   so consumer-owned components (in `@layer components`) and utility
-   frameworks (in `@layer utilities`) can override on demand. The
-   layer-order declaration in `tokens.css` (`@layer base, anta,
-   components, utilities;`) keeps Anta above any preflight resets in
-   `@layer base` so a Tailwind import doesn't wipe Anta's typography. */
-
-@layer anta {
-  /* ───── Structural reset ─────────────────────────────────────── */
-
-  /* Modern box-sizing — pads and borders count inside the declared
-     width/height. Universal selectors so `::before` / `::after`
-     pseudo-elements follow the host. */
-  *, *::before, *::after {
-    box-sizing: border-box;
-  }
-
-  /* Zero out browser-default margins on every element. Apps build
-     up their own spacing from explicit values rather than fighting
-     the user-agent stylesheet. */
-  * {
-    margin: 0;
-  }
-
-  /* Replaced elements as block-level by default + cap to their
-     container so a misplaced large image doesn't blow out the
-     layout. Consumers re-inline them with `display: inline-block`
-     where needed. */
-  img, picture, video, canvas, svg {
-    display: block;
-    max-width: 100%;
-  }
-
-  /* Inherit typography into form controls — by default browsers
-     reset font on these. */
-  input, button, textarea, select {
-    font: inherit;
-  }
-
-  /* Wrap long words rather than overflow; `text-wrap: pretty`
-     balances widows on paragraphs, `text-wrap: balance` evens
-     headlines across lines. */
-  p, h1, h2, h3, h4, h5, h6 {
-    overflow-wrap: break-word;
-  }
-  p {
-    text-wrap: pretty;
-  }
-  h1, h2, h3, h4, h5, h6 {
-    text-wrap: balance;
-  }
-
-  /* ───── Typography defaults — Anta opinion ───────────────────── */
-
-  /* Raw headings adopt the same visual scale as `<Title level={n}>`
-     so plain markup matches the component. Values are duplicated in
-     `src/elements/a-title.css`; keep the two in lockstep. */
-  h1, h2, h3, h4, h5, h6 {
-    color: var(--text-1);
-    font-weight: 584.62;
-    letter-spacing: 0;
-  }
-
-  h1 { font-size: 28px; line-height: 32px; margin-block: 0    16px; }
-  h2 { font-size: 24px; line-height: 28px; margin-block: 32px 12px; }
-  h3 { font-size: 20px; line-height: 24px; margin-block: 24px 12px; }
-  h4 { font-size: 17px; line-height: 20px; margin-block: 20px 8px;  }
-  h5 { font-size: 15px; line-height: 20px; margin-block: 16px 8px;  }
-  h6 { font-size: 13px; line-height: 16px; margin-block: 16px 4px;  }
-
-  strong {
-    font-weight: 600;
-  }
-
-  /* Keep inline `<code>` from inflating the line box of the prose it
-     sits in — `1em` pins its line height to its own font size. */
-  code {
-    line-height: 1em;
-  }
-
-  /* Prose lists (ul, ol) get a tight 3ch left padding so markers
-     hug the text, and items get a small bottom margin so
-     consecutive ones breathe. Markers are toned all the way down
-     to --text-5 since they are visual scaffolding, not content. */
-  ul, ol {
-    padding-left: 3ch;
-  }
-  :is(ul, ol) > li {
-    margin-bottom: 0.5em;
-  }
-  :is(ul, ol) > li::marker {
-    color: var(--text-5);
-  }
-
-  /* `<menu>` is for command/option lists, not prose. By default
-     browsers render it like a `<ul>` (disc markers, 40px padding);
-     strip all of that so it's a clean semantic container ready to
-     be styled. */
-  menu {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
-  menu > li {
-    margin: 0;
-  }
-
-  /* Global link defaults. Hairline underline at 75% alpha;
-     underline goes to currentColor (100%) and 1px on hover. Color
-     comes from --link-color tokens, which auto-flip in dark mode.
-     `:not(:where([role="button"]))` excludes anchor-buttons (`<a role="button">`,
-     e.g. `<Button href>`): `a:link`/`a:visited` are pseudo-classes with the
-     same (0,1,1) specificity as `a[role="button"]`, so without the exclusion
-     they'd tie and win on source order, giving buttons link colour +
-     underline. The `:where()` keeps the exclusion specificity-neutral so this
-     base rule stays at (0,0,1)/(0,1,1) — a bare `:not([role="button"])` would
-     add an attribute selector's weight and out-specify prose-link overrides
-     like `a-text a` / the <Button> prose-link rule, leaving their links stuck
-     on the global blue. Other contexts (nav, headings) still override as needed. */
-  a:not(:where([role="button"])),
-  a:not(:where([role="button"])):link,
-  a:not(:where([role="button"])):visited {
-    color: var(--link-color);
-    text-decoration: underline;
-    text-decoration-style: solid;
-    text-decoration-color: color-mix(in srgb, currentColor 75%, transparent);
-    text-decoration-thickness: 0.5px;
-    text-underline-offset: 3px;
-  }
-  /* Hover only on real-pointer devices — gating avoids the sticky hover
-     color that lingers after a tap on touch screens. */
-  @media (hover: hover) and (pointer: fine) {
-    a:not(:where([role="button"])):hover {
-      color: var(--link-color-hover);
-      /* Underline color is left as the resting hairline (the base rule's
-         `currentColor` mix) — only the thickness grows on hover. */
-      text-decoration-thickness: 1px;
-    }
-  }
-  a:not(:where([role="button"])):active {
-    text-decoration-color: color-mix(in srgb, currentColor 75%, transparent);
-  }
-
-  /* Text selection — brand color at 15% alpha. */
-  ::selection {
-    background: color-mix(in srgb, var(--text-1-brand), transparent 85%);
-  }
-
-  /* ───── Tables ───────────────────────────────────────────────── */
-
-  /* Polite, element-level baseline. Rules live in `@layer anta`, so
-     any consumer rule outside a layer — or in `components` /
-     `utilities` — overrides without effort. Width is intentionally
-     left untouched so app tables stay inline-sized; full-bleed is a
-     decision for the surrounding page. */
-  table {
-    border-collapse: collapse;
-    font-variant-numeric: tabular-nums;
-  }
-
-  caption {
-    text-align: left;
-    color: var(--text-3);
-    padding-left: 10px;
-    margin-bottom: 0.25em;
-  }
-
-  th, td {
-    padding: 5px 10px;
-    text-align: left;
-    vertical-align: top;
-    border-bottom: 1px solid var(--border-5);
-  }
-
-  thead th {
-    font-weight: 600;
-  }
-
-  /* Drop the trailing hairline under the table's last row so the
-     table doesn't end with an orphan line. Handles both "tbody is
-     the final section" and "tfoot is the final section". */
-  tfoot tr:last-child > :is(th, td),
-  table:not(:has(tfoot)) tbody tr:last-child > :is(th, td) {
-    border-bottom: none;
-  }
-
-  /* Opt-in: outer frame + vertical column dividers + 3px rounded
-     corners. Switches to separate borders because `border-radius`
-     doesn't render reliably under `border-collapse: collapse` — the
-     collapsed borders override the radius. Cells draw their own
-     right edges to build the internal grid; the last cell in each
-     row drops its right border so the table's own border supplies
-     the outer frame. Row separators come from the baseline
-     `border-bottom` and continue to work under separate-collapse. */
-  table[data-bordered] {
-    border-collapse: separate;
-    border-spacing: 0;
-    border: 1px solid var(--border-5);
-    border-radius: 3px;
-  }
-
-  table[data-bordered] :is(th, td) {
-    border-right: 1px solid var(--border-5);
-  }
-
-  table[data-bordered] tr > :is(th, td):last-child {
-    border-right: 0;
-  }
-}
+@layer anta{*,*:before,*:after{box-sizing:border-box}*{margin:0}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}h1,h2,h3,h4,h5,h6{color:var(--text-1);font-weight:584.62;letter-spacing:0}h1{font-size:28px;line-height:32px;margin-block:0 16px}h2{font-size:24px;line-height:28px;margin-block:32px 12px}h3{font-size:20px;line-height:24px;margin-block:24px 12px}h4{font-size:17px;line-height:20px;margin-block:20px 8px}h5{font-size:15px;line-height:20px;margin-block:16px 8px}h6{font-size:13px;line-height:16px;margin-block:16px 4px}strong{font-weight:600}code{line-height:1em}code,kbd,samp,pre{letter-spacing:0}ul,ol{padding-left:3ch}:is(ul,ol)>li{margin-bottom:.5em}:is(ul,ol)>li::marker{color:var(--text-5)}menu{list-style:none;padding:0;margin:0}menu>li{margin:0}a:not(:where([role=button])),a:not(:where([role=button])):link,a:not(:where([role=button])):visited{color:var(--link-color);text-decoration:underline;text-decoration-style:solid;text-decoration-color:color-mix(in srgb,currentColor 75%,transparent);text-decoration-thickness:.5px;text-underline-offset:3px}@media(hover:hover)and (pointer:fine){a:not(:where([role=button])):hover{color:var(--link-color-hover);text-decoration-thickness:1px}}a:not(:where([role=button])):active{text-decoration-color:color-mix(in srgb,currentColor 75%,transparent)}::selection{background:color-mix(in srgb,var(--text-1-brand),transparent 85%)}table{border-collapse:collapse;font-variant-numeric:tabular-nums}caption{text-align:left;color:var(--text-3);padding-left:10px;margin-bottom:.25em}th,td{padding:5px 10px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border-4)}thead th{font-weight:600}tfoot tr:last-child>:is(th,td),table:not(:has(tfoot)) tbody tr:last-child>:is(th,td){border-bottom:none}table[data-bordered]{border-collapse:separate;border-spacing:0;border:1px solid var(--border-4);border-radius:3px}table[data-bordered] :is(th,td){border-right:1px solid var(--border-4)}table[data-bordered] tr>:is(th,td):last-child{border-right:0}}