@eunomia/elements 1.0.0-beta.4 → 1.0.0-beta.5

package/dist/mixins/{field-variant.mixin.js → field-appearance.mixin.js}

@@ -6,27 +6,27 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { property } from "lit/decorators.js";
 /**
- * A mixin that adds a `variant` property to a text-like form field
- * component, controlling its visual style: bordered box (`outline`,
- * default), filled background with no border (`fill`), or a bottom-only
- * border (`underline`).
+ * A mixin that adds an `appearance` property to a text-like form field
+ * component, controlling how its surface is drawn: bordered box
+ * (`outline`, default), muted background with no border (`flat`), or a
+ * bottom-only border (`underline`).
  *
  * @param superClass - The base class to extend.
- * @returns A new class extending the base with `variant` behavior.
+ * @returns A new class extending the base with `appearance` behavior.
  */
-export const FieldVariantMixin = (superClass) => {
-    class FieldVariantMixinClass extends superClass {
+export const FieldAppearanceMixin = (superClass) => {
+    class FieldAppearanceMixinClass extends superClass {
         constructor() {
             super(...arguments);
             /**
-             * The visual variant to apply to the field.
+             * How the field's surface is drawn.
              * By default, set to "outline".
              */
-            this.variant = "outline";
+            this.appearance = "outline";
         }
     }
     __decorate([
         property({ reflect: true })
-    ], FieldVariantMixinClass.prototype, "variant", void 0);
-    return FieldVariantMixinClass;
+    ], FieldAppearanceMixinClass.prototype, "appearance", void 0);
+    return FieldAppearanceMixinClass;
 };

package/dist/ssr/animate-ssr.css

@@ -1,84 +1,38 @@
-/**
- * Optional light-DOM stylesheet for `<eun-animate>` in server-rendered
- * pages (Next.js, or any framework/setup without Declarative Shadow DOM
- * for Lit components). It closes the SSR flash described in the eun-animate
- * documentation's Accessibility/SSR notes : server HTML has no Shadow DOM
- * yet, so `<eun-animate>`'s own `:host([animation="fade"]) { opacity: 0 }`
- * (and the other animation variants) can't apply until the element is
- * upgraded client-side, meaning content renders visible first, then snaps
- * hidden the instant the custom element registers, then fades back in.
- *
- * This stylesheet lives in the host document instead, applying the exact
- * same starting state through `:not(:defined)`, which is true from first
- * paint and stops matching permanently the moment the browser upgrades the
- * element — handing off to the component's own Shadow DOM styles at
- * exactly the point they take over, with no gap and no double transition.
- *
- * Usage — link it in the page `<head>`, alongside (not instead of)
- * importing "@eunomia/elements/animate.js" :
- *
- *   <link
- *     rel="stylesheet"
- *     href="node_modules/@eunomia/elements/dist/ssr/animate-ssr.css"
- *   />
- *
- * Requires every server-rendered `<eun-animate>` to write its `animation`
- * attribute explicitly (even when it's the "fade" default), since that
- * default only ever becomes an attribute once Lit initializes the
- * property client-side — invisible to this stylesheet, or any plain CSS,
- * before then :
- *
- *   <eun-animate animation="fade">...</eun-animate>
- */
-
 eun-animate:not(:defined) {
   --_distance: var(--animate-distance, 80px);
 }
 
-eun-animate[animation="fade"]:not(:defined),
-eun-animate[animation="faded-scroll-right"]:not(:defined),
-eun-animate[animation="faded-scroll-left"]:not(:defined),
-eun-animate[animation="faded-scroll-top"]:not(:defined),
-eun-animate[animation="faded-scroll-bottom"]:not(:defined) {
-  opacity: 0;
-}
+@media (scripting: enabled) {
+  eun-animate[animation="fade"]:not(:defined),
+  eun-animate[animation="faded-scroll-right"]:not(:defined),
+  eun-animate[animation="faded-scroll-left"]:not(:defined),
+  eun-animate[animation="faded-scroll-top"]:not(:defined),
+  eun-animate[animation="faded-scroll-bottom"]:not(:defined) {
+    opacity: 0;
+  }
 
-eun-animate[animation="scroll-right"]:not(:defined),
-eun-animate[animation="faded-scroll-right"]:not(:defined) {
-  transform: translateX(calc(-1 * var(--_distance)));
-}
+  eun-animate[animation="scroll-right"]:not(:defined),
+  eun-animate[animation="faded-scroll-right"]:not(:defined) {
+    transform: translateX(calc(-1 * var(--_distance)));
+  }
 
-eun-animate[animation="scroll-left"]:not(:defined),
-eun-animate[animation="faded-scroll-left"]:not(:defined) {
-  transform: translateX(var(--_distance));
-}
+  eun-animate[animation="scroll-left"]:not(:defined),
+  eun-animate[animation="faded-scroll-left"]:not(:defined) {
+    transform: translateX(var(--_distance));
+  }
 
-eun-animate[animation="scroll-top"]:not(:defined),
-eun-animate[animation="faded-scroll-top"]:not(:defined) {
-  transform: translateY(var(--_distance));
-}
+  eun-animate[animation="scroll-top"]:not(:defined),
+  eun-animate[animation="faded-scroll-top"]:not(:defined) {
+    transform: translateY(var(--_distance));
+  }
 
-eun-animate[animation="scroll-bottom"]:not(:defined),
-eun-animate[animation="faded-scroll-bottom"]:not(:defined) {
-  transform: translateY(calc(-1 * var(--_distance)));
+  eun-animate[animation="scroll-bottom"]:not(:defined),
+  eun-animate[animation="faded-scroll-bottom"]:not(:defined) {
+    transform: translateY(calc(-1 * var(--_distance)));
+  }
 }
 
-/**
- * `tablet-animation`/`mobile-animation` overrides, mirroring the rules
- * above and the same-named `@media` blocks in the component's own
- * `animate.styles.ts` — kept in sync by hand, since this file has to
- * duplicate the shadow DOM's styles for the light-DOM pre-hydration
- * window regardless. Placed after the unscoped rules above so an
- * equal-specificity tie (e.g. both `animation="fade"` and
- * `tablet-animation="none"` set at once) resolves in the narrower
- * breakpoint's favor, once its `@media` condition is true — same
- * source-order reasoning as `animate.styles.ts`.
- *
- * `max-width` values match `EUNOMIA_BREAKPOINTS.tablet`/`.mobile`
- * (`breakpoints.ts`) — hardcoded here since plain CSS can't read a JS
- * constant.
- */
-@media (max-width: 768px) {
+@media (scripting: enabled) and (max-width: 768px) {
   eun-animate[tablet-animation="none"]:not(:defined) {
     opacity: 1;
     transform: none;
@@ -113,7 +67,7 @@ eun-animate[animation="faded-scroll-bottom"]:not(:defined) {
   }
 }
 
-@media (max-width: 600px) {
+@media (scripting: enabled) and (max-width: 600px) {
   eun-animate[mobile-animation="none"]:not(:defined) {
     opacity: 1;
     transform: none;

package/dist/ssr/links-ssr.css

@@ -0,0 +1,35 @@
+:is(eun-link, eun-button, eun-card):not(:defined) > a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.eun-new-tab-hint {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+:is(eun-link, eun-button):not(:defined) > a[target="_blank"]::after {
+  content: "";
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  margin-inline-start: 4px;
+  vertical-align: middle;
+  background: currentColor;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13h11.17l-4.88 4.88c-.39.39-.39 1.03 0 1.42.39.39 1.02.39 1.41 0l6.59-6.59c.39-.39.39-1.02 0-1.41l-6.58-6.6c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L16.17 11H5c-.55 0-1 .45-1 1s.45 1 1 1z'/%3E%3C/svg%3E")
+    center / contain no-repeat;
+  rotate: -45deg;
+}
+
+eun-button:not(:defined) > a[target="_blank"]::after {
+  width: 12px;
+  height: 12px;
+  margin-inline-start: 8px;
+}

package/dist/ssr/overlay-ssr.css

@@ -1,44 +1,3 @@
-/**
- * Optional light-DOM stylesheet for server-rendered pages (Next.js, or
- * any framework/setup without Declarative Shadow DOM for Lit
- * components), covering every closed-by-default overlay/disclosure
- * component in one file : `eun-collapse`, `eun-drawer`, `eun-modal`,
- * `eun-dropdown-button`, and `eun-tooltip`. Each hides its own slotted
- * content only through its own Shadow DOM (a `grid-template-rows: 0fr`
- * panel for collapse, a `popover="manual"`/`popover="auto"` surface for
- * the rest), which doesn't exist yet in server-rendered HTML. That
- * content renders as plain, unstyled light-DOM children instead, on top
- * of everything else on the page, until the element upgrades — the same
- * SSR flash `animate-ssr.css`/`toolbar-ssr.css`/`sidebar-ssr.css`
- * document for their own components, just for content that's meant to
- * stay hidden until something opens it, rather than a starting animation
- * state or a persistent, always-visible layout piece.
- *
- * This stylesheet lives in the host document instead, hiding that exact
- * content through `:not(:defined)`, which is true from first paint and
- * stops matching permanently the moment the browser upgrades the
- * element — handing off to each component's own Shadow DOM at exactly
- * the point it takes over, with no gap.
- *
- * Usage — link it in the page `<head>`, alongside (not instead of)
- * importing whichever of these components the page actually uses :
- *
- *   <link
- *     rel="stylesheet"
- *     href="node_modules/@eunomia/elements/dist/ssr/overlay-ssr.css"
- *   />
- *
- * `eun-drawer`/`eun-modal` are skipped whenever `open` is written
- * explicitly in the server-rendered markup, so a dialog meant to be
- * visible on first paint (a startup announcement, for instance) still
- * renders — see the `open` attribute on the component's own doc page for
- * the same requirement `animate-ssr.css` documents for `animation`, and
- * `eun-collapse`'s own `open` attribute for the same reasoning there.
- * `eun-dropdown-button`'s own trigger label (its default slot) and
- * `eun-tooltip`'s own trigger (`slot="anchor"`) are never hidden, only
- * their menu/panel content is.
- */
-
 eun-collapse:not(:defined):not([open]) > :not([slot]) {
   display: none;
 }

package/dist/ssr/rich-text.css

@@ -0,0 +1,38 @@
+.eun-rich-text p,
+.eun-rich-text ul {
+  margin-block: 1em;
+}
+
+.eun-rich-text ul {
+  padding-inline-start: 40px;
+  list-style: disc;
+}
+
+.eun-rich-text li {
+  display: list-item;
+}
+
+.eun-rich-text :first-child {
+  margin-block-start: 0;
+}
+
+.eun-rich-text :last-child {
+  margin-block-end: 0;
+}
+
+.eun-rich-text strong {
+  font-weight: bold;
+}
+
+.eun-rich-text em {
+  font-style: italic;
+}
+
+.eun-rich-text u {
+  text-decoration: underline;
+}
+
+.eun-rich-text a {
+  color: var(--rich-text-link-color, var(--eun-color-primary-500, #3d6fff));
+  text-decoration: underline;
+}

package/dist/ssr/sidebar-ssr.css

@@ -1,41 +1,3 @@
-/**
- * Optional light-DOM stylesheet for `<eun-sidebar>` in server-rendered
- * pages (Next.js, or any framework/setup without Declarative Shadow DOM
- * for Lit components). Closes the same SSR flash described in
- * eun-toolbar's own SSR notes (see `toolbar-ssr.css`), but here it hits
- * every instance, not just a mobile-only panel : `display: flex` and the
- * sidebar's own width live in eun-sidebar's Shadow DOM, which doesn't
- * exist yet in server-rendered HTML. An unregistered custom element
- * defaults to `display: inline` with no layout of its own, so a
- * server-rendered sidebar renders as a plain run of unstyled inline
- * content (header, body, footer flowing one after another) first, then
- * snaps into a proper flex column the instant the element upgrades. A
- * sidebar meant to start `collapsed` (mini or fully hidden) makes this
- * worse : that state lives in the same Shadow DOM too, so it renders at
- * full width first, then shrinks down on upgrade instead of the other
- * way around.
- *
- * This stylesheet lives in the host document instead, mirroring
- * eun-sidebar's own resting layout through `:not(:defined)`, which is
- * true from first paint and stops matching permanently the moment the
- * browser upgrades the element — handing off to eun-sidebar's own Shadow
- * DOM styles at exactly the point they take over, with no gap.
- *
- * Usage — link it in the page `<head>`, alongside (not instead of)
- * importing "@eunomia/elements/sidebar.js" :
- *
- *   <link
- *     rel="stylesheet"
- *     href="node_modules/@eunomia/elements/dist/ssr/sidebar-ssr.css"
- *   />
- *
- * `collapsed`/`collapse-mode`/`dragged-hidden` only take effect here when
- * written explicitly in the server-rendered markup, same requirement
- * `animate-ssr.css` documents for `animation` :
- *
- *   <eun-sidebar collapsed collapse-mode="mini">...</eun-sidebar>
- */
-
 eun-sidebar:not(:defined) {
   display: flex;
   position: sticky;

package/dist/ssr/toolbar-ssr.css

@@ -1,41 +1,75 @@
-/**
- * Optional light-DOM stylesheet for `<eun-toolbar>` in server-rendered
- * pages (Next.js, or any framework/setup without Declarative Shadow DOM
- * for Lit components). It closes the SSR flash described in the
- * eun-toolbar documentation's Server-side rendering notes : the default
- * slot (the mobile panel's own content, everything slotted in without a
- * `slot` attribute) is only ever hidden by eun-toolbar's own Shadow DOM,
- * either tucked inside a closed native popover once the element is
- * upgraded and `mobile` is true, or simply never projected anywhere once
- * upgraded and it's false. Server-rendered HTML has no Shadow DOM yet,
- * so that content renders as plain, unstyled light-DOM children instead —
- * visible, unpositioned, and often full-width/height, on top of
- * everything else on the page, until the element upgrades.
- *
- * This stylesheet lives in the host document instead, hiding that exact
- * content through `:not(:defined)`, which is true from first paint and
- * stops matching permanently the moment the browser upgrades the
- * element — handing off to eun-toolbar's own Shadow DOM at exactly the
- * point it takes over, with no gap. Safe regardless of viewport : the
- * content stays exactly as hidden post-upgrade whether `mobile` ends up
- * true (closed popover) or false (never rendered at all), so this never
- * has to guess at the breakpoint.
- *
- * Usage — link it in the page `<head>`, alongside (not instead of)
- * importing "@eunomia/elements/toolbar.js" :
- *
- *   <link
- *     rel="stylesheet"
- *     href="node_modules/@eunomia/elements/dist/ssr/toolbar-ssr.css"
- *   />
- *
- * The `start`/`center`/`end` slots aren't covered here : that content is
- * meant to stay visible (and stay part of LCP) before upgrade too, same
- * as after, so hiding it isn't this stylesheet's job. Style its own
- * pre-upgrade layout, if needed, directly with `eun-toolbar:not(:defined)`
- * in the host page's own CSS.
- */
-
-eun-toolbar:not(:defined) > :not([slot]) {
+eun-toolbar:not(:defined) > :not([slot]),
+eun-toolbar:not(:defined) > [slot="skip-links"],
+eun-toolbar:not(:defined) > [slot="menu-icon"],
+eun-toolbar:not(:defined) > [slot="close-icon"] {
   display: none;
 }
+
+eun-toolbar:not(:defined) {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--toolbar-gap, 16px);
+  width: 100%;
+  height: var(--toolbar-height, 72px);
+  padding: var(--toolbar-padding, 0 24px);
+  position: sticky;
+  top: 0;
+  z-index: var(--toolbar-z-index, 100);
+}
+
+eun-toolbar[position="fixed"]:not(:defined) {
+  position: fixed;
+  inset-inline: 0;
+}
+
+eun-toolbar[position="static"]:not(:defined) {
+  position: static;
+}
+
+eun-toolbar:not(:defined) > [slot="start"] {
+  order: 1;
+}
+
+eun-toolbar:not(:defined) > [slot="center"] {
+  order: 2;
+}
+
+eun-toolbar:not(:defined) > [slot="end"] {
+  order: 3;
+}
+
+eun-toolbar:not(:defined)
+  > [slot="center"]:where(:nth-child(1 of [slot="center"])) {
+  margin-inline-start: auto;
+}
+
+eun-toolbar:not(:defined)
+  > [slot="center"]:where(:nth-last-child(1 of [slot="center"])) {
+  margin-inline-end: auto;
+}
+
+eun-toolbar:not(:defined):where(:not(:has(> [slot="center"])))
+  > [slot="end"]:where(:nth-child(1 of [slot="end"])) {
+  margin-inline-start: auto;
+}
+
+eun-toolbar:not(:defined):where(
+    :has(> [slot="start"]):has(> [slot="end"]):not(
+        :has(> :nth-child(2 of [slot="start"]), > :nth-child(2 of [slot="end"]))
+      )
+  )
+  > :is([slot="start"], [slot="end"]) {
+  flex: 1 1 0;
+}
+
+eun-toolbar:not(:defined):where(
+    :has(> [slot="start"]):has(> [slot="end"]):not(
+        :has(> :nth-child(2 of [slot="start"]), > :nth-child(2 of [slot="end"]))
+      )
+  )
+  > [slot="end"] {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}

package/dist/types/variant.type.d.ts

@@ -3,7 +3,7 @@
  * independent of whether that something is an action being taken or a
  * state being observed. Shared by feedback/display components (alert,
  * toast, chip, tag, tooltip, progress-bar), and partly borrowed by
- * {@link EunomiaActionVariant} : a "critical" button and a "critical" alert
+ * {@link EunomiaActionColor} : a "critical" button and a "critical" alert
  * mean the same thing and must share the same red, or the app ends up with
  * two unrelated definitions of "critical" depending on whether the thing
  * wearing the color is clickable.
@@ -12,7 +12,9 @@ export type EunomiaSeverity = "info" | "success" | "warning" | "critical" | "neu
 /**
  * Canonical color union for interactive/action components (button, fab,
  * dropdown-button, toggle-group/-item, badge, modal's confirm/cancel
- * buttons). Composed of two genuinely different things sharing one visual
+ * buttons), always exposed as `color`, like tag, chip and tooltip's own
+ * {@link EunomiaTone} palette. `variant` stays reserved for a shape or
+ * style (a field's outline/fill/underline, a loader's dots, ...). Composed of two genuinely different things sharing one visual
  * slot — an action only ever needs one color, never both at once, so they
  * live in a single prop rather than two independently-precedenced ones :
  * - `"primary"` / `"secondary"` : pure emphasis/hierarchy, meaningless
@@ -26,18 +28,18 @@ export type EunomiaSeverity = "info" | "success" | "warning" | "critical" | "neu
  *   three do.
  *
  * Most components expose this union as-is ; only a genuine subset (see
- * {@link EunomiaModalConfirmVariant}) needs a further narrowing on top of it.
+ * {@link EunomiaModalConfirmColor}) needs a further narrowing on top of it.
  */
-export type EunomiaActionVariant = "primary" | "secondary" | Extract<EunomiaSeverity, "critical" | "success" | "warning">;
+export type EunomiaActionColor = "primary" | "secondary" | Extract<EunomiaSeverity, "critical" | "success" | "warning">;
 /**
- * The two-value {@link EunomiaActionVariant} subset `eun-modal`'s
- * `confirmVariant` uses — a confirm button is only ever the modal's default
+ * The two-value {@link EunomiaActionColor} subset `eun-modal`'s
+ * `confirmColor` uses — a confirm button is only ever the modal's default
  * emphasis or a destructive warning, never `secondary`/`success`/`warning`.
  */
-export type EunomiaModalConfirmVariant = Extract<EunomiaActionVariant, "primary" | "critical">;
+export type EunomiaModalConfirmColor = Extract<EunomiaActionColor, "primary" | "critical">;
 /**
  * Canonical surface-treatment union : how a component's background/border is
- * rendered, independent of its `variant`/`severity`/`color`. Always named
+ * rendered, independent of its `severity`/`color`. Always named
  * `appearance` on the components that expose it — never `type`, which stays
  * reserved for a native HTML mechanism (e.g. `eun-button`'s `type="submit"`)
  * wherever it appears.
@@ -53,8 +55,16 @@ export type EunomiaModalConfirmVariant = Extract<EunomiaActionVariant, "primary"
  * (elevated, drop shadow) doesn't share that constraint : it's a static
  * effect, not one gated behind interaction, so `eun-card` also exposes it
  * (see {@link EunomiaCardAppearance}) despite being a passive container.
+ * `underline` (a bottom border only) is a form field's own look, and
+ * `transparent` (the pale tint, see-through instead of opaque) a scheduler
+ * event chip's : each belongs to a single family, like `ghost`.
+ *
+ * `appearance` only ever paints the surface (background, border, shadow)
+ * and combines with `color`/`severity`. A property changing what is drawn
+ * (a loader's dots or bar, a skeleton's shape) is a `variant` instead,
+ * with values of its own that mean nothing outside that component.
  */
-export type EunomiaAppearance = "default" | "fill" | "outline" | "flat" | "raised" | "ghost";
+export type EunomiaAppearance = "default" | "fill" | "outline" | "flat" | "raised" | "ghost" | "underline" | "transparent";
 /**
  * The four-value {@link EunomiaAppearance} subset feedback/display components
  * (alert, toast, chip, tag, tooltip) actually use — no `raised`/`ghost`,
@@ -82,9 +92,15 @@ export type EunomiaToggleAppearance = Extract<EunomiaAppearance, "default" | "ou
  * share `ghost`'s constraint.
  */
 export type EunomiaCardAppearance = Extract<EunomiaAppearance, "default" | "fill" | "raised">;
+/**
+ * The three-value {@link EunomiaAppearance} subset text-like form fields
+ * use : a bordered box (`outline`, their default), a muted background with
+ * no border (`flat`), or a bottom border only (`underline`).
+ */
+export type EunomiaFieldAppearance = Extract<EunomiaAppearance, "outline" | "flat" | "underline">;
 /**
  * Canonical decorative, non-semantic palette : a plain brand/neutral color
- * pick with no status meaning, as opposed to {@link EunomiaActionVariant}/
+ * pick with no status meaning, as opposed to {@link EunomiaActionColor}/
  * {@link EunomiaSeverity}. Always named `color` on the components that expose
  * it.
  */

package/dist/utils/navigation.utils.d.ts

@@ -15,3 +15,17 @@
  * @param target the anchor's target, if any.
  */
 export declare function handleLinkNavigation(host: HTMLElement, event: MouseEvent, href: string | undefined, target?: string | null): void;
+/**
+ * Warns once when a host in slotted anchor mode (a native `<a>` as a direct
+ * child, `href` unset) still carries link attributes of its own. The
+ * anchor is the link in that mode, so `aria-label`, `target`, `rel` and
+ * `download` left on the host are ignored without any visible sign : a
+ * forgotten `aria-label` ends up on an element with no role, and the link
+ * loses its accessible name.
+ *
+ * @param host the link, button or card whose anchor is slotted.
+ */
+export declare function warnIgnoredHostLinkAttributes(host: HTMLElement & {
+    target?: string;
+    download?: string;
+}): void;

package/dist/utils/navigation.utils.js

@@ -42,3 +42,36 @@ export function handleLinkNavigation(host, event, href, target) {
         event.preventDefault();
     }
 }
+/**
+ * Hosts already warned by {@link warnIgnoredHostLinkAttributes}, so each
+ * one only logs once however often it updates.
+ */
+const warnedHosts = new WeakSet();
+/**
+ * Warns once when a host in slotted anchor mode (a native `<a>` as a direct
+ * child, `href` unset) still carries link attributes of its own. The
+ * anchor is the link in that mode, so `aria-label`, `target`, `rel` and
+ * `download` left on the host are ignored without any visible sign : a
+ * forgotten `aria-label` ends up on an element with no role, and the link
+ * loses its accessible name.
+ *
+ * @param host the link, button or card whose anchor is slotted.
+ */
+export function warnIgnoredHostLinkAttributes(host) {
+    if (warnedHosts.has(host)) {
+        return;
+    }
+    const ignored = ['aria-label', 'target', 'rel', 'download'].filter((name) => host.hasAttribute(name));
+    if (!ignored.includes('target') && host.target && host.target !== '_self') {
+        ignored.push('target');
+    }
+    if (!ignored.includes('download') && host.download) {
+        ignored.push('download');
+    }
+    if (!ignored.length) {
+        return;
+    }
+    warnedHosts.add(host);
+    console.warn(`<${host.localName}>: ${ignored.join(', ')} ignored on the host, since ` +
+        'the slotted <a> is the link. Move them onto the <a> itself.', host);
+}

package/dist/utils/new-tab-anchor.controller.d.ts

@@ -0,0 +1,44 @@
+import { ReactiveController, ReactiveControllerHost } from "lit";
+/**
+ * Class of a visually-hidden "opens in a new tab" text the consumer writes
+ * inside the slotted anchor, hidden by `links-ssr.css`. It's part of the
+ * anchor's accessible name and of the server-rendered HTML, so it's
+ * announced everywhere, links lists and no-JS pages included, and the
+ * controller then leaves the anchor's `aria-description` alone.
+ */
+export declare const NEW_TAB_HINT_CLASS = "eun-new-tab-hint";
+/**
+ * Announces a slotted anchor opening in a new tab, for a link, button or
+ * card whose native `<a>` is slotted as a direct child. The anchor belongs
+ * to the consumer (and to their framework, which would undo or trip over an
+ * injected child during hydration), so the hint goes on its
+ * `aria-description` rather than into its content, leaving its text and
+ * `aria-label` untouched. A description the consumer set themselves is
+ * never overwritten, and only the one this controller wrote is ever removed.
+ * A description only reaches some assistive technology, so an anchor
+ * holding a {@link NEW_TAB_HINT_CLASS} text of its own gets none.
+ *
+ * The anchor's `target` and content can change after the first render (a
+ * framework re-render), which no `slotchange` reports, so they're observed
+ * directly and re-render the host, whose visible new-tab icon keys off
+ * {@link isBlank}.
+ */
+export declare class NewTabAnchorController implements ReactiveController {
+    #private;
+    private readonly host;
+    private readonly getAnchor;
+    private readonly getHint;
+    /**
+     * @param host the link, button or card.
+     * @param getAnchor returns the slotted anchor, or null outside that mode.
+     * @param getHint returns the localized "opens in a new tab" wording.
+     */
+    constructor(host: ReactiveControllerHost & HTMLElement, getAnchor: () => HTMLAnchorElement | null, getHint: () => string);
+    /**
+     * Whether the slotted anchor, if any, opens in a new tab.
+     */
+    get isBlank(): boolean;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    hostUpdated(): void;
+}