@kenlo/sds-design-system 0.9.9

package/components/Header/header.marko

@@ -0,0 +1,523 @@
+<!-- sds-header — ported from kdls-design-system v2.5.1 (0f3edf8) components/Header/Header.tsx.
+
+     The bar across the top of a product: a logo, navigation, notifications, a product
+     switcher and a profile menu, collapsing to a single bar with a fullscreen menu on a
+     phone.
+
+     THE DIVERGENCE THAT DEFINES THIS PORT. KDLS's header renders <KenloLogo product={...} />
+     and nothing else can go there. SDS carries no Kenlo logo, by decision — so `product` is
+     gone and the logo is a slot the consumer fills:
+
+         <sds-header>
+           <@logo><img src="/logo.svg" alt="Kenlo"/></@logo>
+         </sds-header>
+
+     Which is what a design system for three different public products needed anyway: Site,
+     Landing Page and Blog do not share one mark, and a header that can only draw one is a
+     header two of them cannot use. `aria-label` on the products button lost the word Kenlo
+     for the same reason.
+
+     Other divergences:
+
+     It closes on Escape, not only on a click outside. KDLS binds mousedown on the document
+     and nothing else, so a dropdown opened from the keyboard cannot be closed from it.
+
+     Each panel is labelled by the button that opened it, and each button reports
+     aria-expanded and aria-haspopup. KDLS sets aria-expanded on the avatar alone, so the
+     notification and product buttons announce nothing about the panels they control.
+
+     The notification list is a <ul> and unread items say so in words. KDLS marks them with
+     a colour and a class, which is nothing at all to a screen reader — and "3 unread" is
+     the one thing a notifications button exists to tell you.
+
+     The mobile breakpoint is the header's own width, matching sds-table's reasoning: a
+     header inside a narrow shell is narrow on any screen. -->
+
+import { isNarrow } from "../../foundations/breakpoints.js";
+import faqIcon from "../../icons/generated/fluent-question-circle-regular.marko";
+import bellIcon from "../../icons/generated/fluent-alert-regular.marko";
+import gridIcon from "../../icons/generated/fluent-grid-regular.marko";
+import dismissIcon from "../../icons/generated/fluent-dismiss-regular.marko";
+import navIcon from "../../icons/generated/fluent-navigation-regular.marko";
+
+class {
+  onCreate() {
+    this.state = { panel: "none", overlay: "none", narrow: false, measured: false };
+  }
+
+  onMount() {
+    const root = this.getEl("root");
+
+    this.onPointerDown = (event) => {
+      if (this.state.panel === "none") return;
+      if (root?.contains(event.target)) return;
+      this.state.panel = "none";
+    };
+    this.onKeyDown = (event) => {
+      if (event.key !== "Escape") return;
+      // KDLS binds mousedown and nothing else: a dropdown opened from the keyboard has no
+      // way to be closed from it.
+      if (this.state.panel !== "none") this.state.panel = "none";
+      if (this.state.overlay !== "none") this.state.overlay = "none";
+    };
+    document.addEventListener("mousedown", this.onPointerDown);
+    document.addEventListener("keydown", this.onKeyDown);
+
+    if (!root) return;
+    const measure = (width) => {
+      this.state.narrow = isNarrow(width);
+      this.state.measured = true;
+    };
+    measure(root.getBoundingClientRect().width);
+    if (typeof ResizeObserver === "undefined") return;
+    this.observer = new ResizeObserver(([entry]) => measure(entry.contentRect.width));
+    this.observer.observe(root);
+  }
+
+  onDestroy() {
+    document.removeEventListener("mousedown", this.onPointerDown);
+    document.removeEventListener("keydown", this.onKeyDown);
+    this.observer?.disconnect();
+  }
+
+  /** On a phone every panel is a fullscreen overlay instead of a dropdown. */
+  openPanel(which) {
+    if (this.state.narrow) {
+      this.state.overlay = which;
+      return;
+    }
+    this.state.panel = this.state.panel === which ? "none" : which;
+  }
+
+  closeOverlay() { this.state.overlay = "none"; }
+}
+
+$ {
+  const {
+    navItems = [],
+    activeNav,
+    notifications = [],
+    onClearNotifications,
+    products = [],
+    user,
+    profileMenuItems = [],
+    onLogout,
+    logoutLabel = "Sair",
+    onFAQs,
+    showFAQs = true,
+    showNotifications = true,
+    label = "Cabeçalho",
+    class: extraClass = "",
+  } = input;
+
+  const renderable = (value) => (value && value.renderBody) || value;
+  const narrow = state.narrow;
+  // Until the measurement lands, render both and let the stylesheet choose; afterwards,
+  // render only the one that was chosen. Rendering both is what makes the no-JavaScript
+  // case work at all, and it lasts one paint.
+  const hideWideNav = state.measured && narrow;
+  const hideNarrowNav = state.measured && !narrow;
+  const panel = state.panel;
+  const showProductsButton = products.length > 1;
+  const unread = notifications.filter((n) => !n.read).length;
+  const initials = user?.initials ?? user?.name?.slice(0, 2).toUpperCase();
+}
+
+<!-- `data-measured` is what lets the stylesheet know whether to trust `data-narrow`.
+
+     Before it is set — the server's render, and the first paint in the browser — neither
+     layout has been chosen yet: the header measures its OWN width and cannot do that until
+     it exists. The server used to resolve that by always sending the desktop row of links.
+     On a phone that is a row of links that does not fit, replaced a moment later; with no
+     JavaScript at all it is a row of links that never gets replaced, on a public site.
+
+     So both are rendered and the stylesheet picks by viewport until the measurement lands.
+     A media query is the best guess available without JS and is right on a plain page; the
+     measured answer then wins, which is what makes a header inside a narrow drawer narrow
+     on a wide screen. -->
+<header
+  key="root"
+  class=`sds-header ${extraClass}`.trim()
+  aria-label=label
+  data-measured=(state.measured ? "true" : null)
+  data-narrow=(state.measured ? String(narrow) : null)
+>
+  <!-- A slot, not a logo. SDS carries no Kenlo mark, and the three public products do not
+       share one anyway. -->
+  <if(input.logo)>
+    <div class="sds-header__logo">
+      <${renderable(input.logo)}/>
+    </div>
+  </if>
+
+  <if(input.contextSelector)>
+    <div class="sds-header__context">
+      <${renderable(input.contextSelector)}/>
+    </div>
+  </if>
+
+  <!-- A consumer that needs more than `navItems` can describe — a menu with a search box
+       in it, say — supplies the whole nav instead. `navItems` still drives the narrow
+       overlay, so the slot replaces what is drawn, not what is navigable. -->
+  <if(!hideWideNav && input.nav)>
+    <div class="sds-header__nav">
+      <${renderable(input.nav)}/>
+    </div>
+  </if>
+  <else-if(!hideWideNav && navItems.length)>
+    <div class="sds-header__nav">
+      <sds-nav orientation="horizontal">
+        <for|item| of=navItems>
+          <if(item.children)>
+            <@item custom>
+              <sds-menu
+                label=item.label
+                triggerActive=(activeNav === item.label)
+                items=item.children.map((child) => ({
+                  label: child.label,
+                  href: child.href,
+                  onClick: child.onClick,
+                }))
+              />
+            </@item>
+          </if>
+          <else>
+            <@item href=item.href active=(activeNav === item.label) onClick=item.onClick>
+              ${item.label}
+              <if(item.isNew)>
+                <span class="sds-header__nav-badge">Novo</span>
+              </if>
+            </@item>
+          </else>
+        </for>
+      </sds-nav>
+    </div>
+  </else-if>
+
+  <!-- Nothing to act on, nothing to render: without a user, notifications or products
+       this bar is an empty flex item that still takes part in the layout. -->
+  <!-- `rightSlot` belongs in this condition: it was left out, so a header given a slot and
+       nothing else — no user, no FAQs, no notifications — dropped the slot on the floor
+       and rendered as if it had never been passed. -->
+  // `!hideNarrowNav && navItems.length` rather than `narrow && …`: before the header has
+  // measured itself the narrow button has to be in the DOM for the stylesheet to choose
+  // it, so this bar has to exist to hold it.
+  <if(user || input.rightSlot || (!hideNarrowNav && navItems.length) || showNotifications && notifications.length || showProductsButton || onFAQs)>
+    <div class="sds-header__actions">
+      <!-- On a narrow header the row of links is not rendered, so something has to open
+           it. KDLS reaches the navigation through the avatar's overlay, which works only
+           because every KDLS product has a signed-in user — with no user there was no
+           avatar, no overlay and no way to reach the navigation at all. Found by putting
+           this header on the portal, where the visitor is nobody. -->
+      <if(!hideNarrowNav && navItems.length)>
+        <sds-icon-button
+          class="sds-header__nav-btn"
+          variant="neutral"
+          aria-label="Abrir navegação"
+          aria-haspopup="dialog"
+          aria-expanded=(state.overlay === "profile" ? "true" : "false")
+          onClick=() => component.openPanel("profile")
+        >
+          <@icon><${navIcon}/></@icon>
+        </sds-icon-button>
+      </if>
+
+      <if(!narrow && showFAQs)>
+        <sds-icon-button aria-label="FAQs" class="sds-header__faqs" onClick=onFAQs>
+          <@icon><${faqIcon}/></@icon>
+        </sds-icon-button>
+      </if>
+
+      <if(showNotifications)>
+        <div class="sds-header__action-wrapper">
+          <sds-icon-button
+            class="sds-header__icon-btn"
+            aria-label=(unread ? `Notificações, ${unread} não lidas` : "Notificações")
+            aria-haspopup="dialog"
+            aria-expanded=(panel === "notifications" ? "true" : "false")
+            onClick=() => component.openPanel("notifications")
+          >
+            <@icon><${bellIcon}/></@icon>
+          </sds-icon-button>
+
+          <if(!narrow && panel === "notifications")>
+            <div class="sds-header__notifications-panel" role="dialog" aria-label="Notificações">
+              <div class="sds-header__notifications-header">
+                <span class="sds-header__notifications-title">Notificações</span>
+                <button type="button" class="sds-header__notifications-clear" on-click(onClearNotifications)>
+                  Limpar
+                </button>
+              </div>
+              <ul class="sds-header__notifications-list sds-scroll sds-scroll--thin">
+                <if(!notifications.length)>
+                  <li>
+                    <sds-text as="div" variant="bodySm" class="sds-header__notifications-empty">
+                      Sem notificações
+                    </sds-text>
+                  </li>
+                </if>
+                <for|item| of=notifications>
+                  <li
+                    key=item.id
+                    class=[
+                      "sds-header__notification-item",
+                      !item.read ? "sds-header__notification-item--unread" : "",
+                    ].filter(Boolean).join(" ")
+                  >
+                    <div class="sds-header__notification-content">
+                      <p class="sds-header__notification-title">
+                        ${item.title}
+                        <!-- KDLS marks unread with a colour and a class, which says nothing
+                             to a screen reader. -->
+                        <if(!item.read)>
+                          <span class="sds-visually-hidden">(não lida)</span>
+                        </if>
+                      </p>
+                      <if(item.description)>
+                        <sds-text as="p" variant="labelRegular" class="sds-header__notification-desc">
+                          ${item.description}
+                        </sds-text>
+                      </if>
+                    </div>
+                    <span class="sds-header__notification-time">${item.time}</span>
+                  </li>
+                </for>
+              </ul>
+            </div>
+          </if>
+        </div>
+      </if>
+
+      <if(showProductsButton)>
+        <div class="sds-header__action-wrapper">
+          <sds-icon-button
+            class="sds-header__icon-btn"
+            aria-label="Produtos"
+            aria-haspopup="menu"
+            aria-expanded=(panel === "products" ? "true" : "false")
+            onClick=() => component.openPanel("products")
+          >
+            <@icon><${gridIcon}/></@icon>
+          </sds-icon-button>
+
+          <if(!narrow && panel === "products")>
+            <div class="sds-header__products-panel" role="menu" aria-label="Produtos">
+              <for|product| of=products>
+                <a
+                  key=product.label
+                  href=product.href
+                  role="menuitem"
+                  aria-current=(product.active ? "true" : null)
+                  class=[
+                    "sds-header__products-item",
+                    product.active ? "sds-header__products-item--active" : "",
+                  ].filter(Boolean).join(" ")
+                  on-click(product.onClick)
+                >
+                  <if(product.icon)>
+                    <sds-icon><${renderable(product.icon)}/></sds-icon>
+                  </if>
+                  <sds-text as="span" variant="bodyMd">${product.label}</sds-text>
+                </a>
+              </for>
+            </div>
+          </if>
+        </div>
+      </if>
+
+      <if(input.rightSlot)>
+        <${renderable(input.rightSlot)}/>
+      </if>
+
+      <!-- No user, no avatar. KDLS is for products you sign in to, so it renders the button
+           unconditionally and an absent user shows up as an avatar with a "?" in it. SDS
+           serves Site, Landing Page and Blog, where a visitor is usually nobody — and a
+           profile menu for nobody is a control that cannot do anything. -->
+      <if(user)>
+      <div class="sds-header__action-wrapper">
+        <button
+          type="button"
+          class="sds-header__avatar-btn"
+          aria-label="Menu do perfil"
+          aria-haspopup="menu"
+          aria-expanded=(panel === "profile" ? "true" : "false")
+          on-click("openPanel", "profile")
+        >
+          <sds-avatar src=user?.avatarSrc initials=initials size="sm"/>
+        </button>
+
+        <if(!narrow && panel === "profile")>
+          <div class="sds-header__profile-panel" role="menu" aria-label="Menu do perfil">
+            <macro|{ }| name="profileInfo">
+              <div class="sds-header__profile-header">
+                <sds-avatar src=user?.avatarSrc initials=initials size="sm"/>
+                <div>
+                  <p class="sds-header__profile-name">${user?.name}</p>
+                  <if(user?.code)>
+                    <p class="sds-header__profile-code">${user.code}</p>
+                  </if>
+                  <if(user?.company)>
+                    <sds-text as="p" variant="labelRegular" class="sds-header__profile-company">
+                      ${user.company}
+                    </sds-text>
+                  </if>
+                </div>
+              </div>
+            </macro>
+
+            <profileInfo/>
+
+            <if(profileMenuItems.length || onLogout)>
+              <div class="sds-header__profile-menu">
+                <for|item| of=profileMenuItems>
+                  <a key=item.label href=item.href role="menuitem"
+                    class="sds-header__profile-item" on-click(item.onClick)>
+                    ${item.label}
+                  </a>
+                </for>
+                <if(onLogout)>
+                  <if(profileMenuItems.length)>
+                    <hr class="sds-header__profile-divider"/>
+                  </if>
+                  <button type="button" role="menuitem"
+                    class="sds-header__profile-item sds-header__profile-item--danger"
+                    on-click(onLogout)>
+                    ${logoutLabel}
+                  </button>
+                </if>
+              </div>
+            </if>
+          </div>
+        </if>
+        </div>
+      </if>
+    </div>
+  </if>
+
+  <!-- On a phone every panel is the same fullscreen overlay, which is KDLS's shape: a
+       dropdown anchored to a 40px button has nowhere to open on an 812px screen. -->
+  <if(narrow && state.overlay !== "none")>
+    <div class="sds-header__mobile-overlay" role="dialog" aria-modal="true" aria-label=label>
+      <sds-icon-button class="sds-header__mobile-overlay-dismiss" variant="neutral"
+        aria-label="Fechar" onClick=() => component.closeOverlay()>
+        <@icon><${dismissIcon}/></@icon>
+      </sds-icon-button>
+
+      <div class="sds-header__mobile-overlay-body sds-scroll sds-scroll--thin">
+        <if(state.overlay === "notifications")>
+          <ul class="sds-header__notifications-list">
+            <if(!notifications.length)>
+              <li>
+                <sds-text as="div" variant="bodySm" class="sds-header__notifications-empty">
+                  Sem notificações
+                </sds-text>
+              </li>
+            </if>
+            <for|item| of=notifications>
+              <li key=item.id class=[
+                "sds-header__notification-item",
+                !item.read ? "sds-header__notification-item--unread" : "",
+              ].filter(Boolean).join(" ")>
+                <div class="sds-header__notification-content">
+                  <p class="sds-header__notification-title">
+                    ${item.title}
+                    <if(!item.read)>
+                      <span class="sds-visually-hidden">(não lida)</span>
+                    </if>
+                  </p>
+                  <if(item.description)>
+                    <sds-text as="p" variant="labelRegular" class="sds-header__notification-desc">
+                      ${item.description}
+                    </sds-text>
+                  </if>
+                </div>
+                <span class="sds-header__notification-time">${item.time}</span>
+              </li>
+            </for>
+          </ul>
+        </if>
+
+        <else-if(state.overlay === "products")>
+          <for|product| of=products>
+            <a key=product.label href=product.href class=[
+              "sds-header__products-item",
+              product.active ? "sds-header__products-item--active" : "",
+            ].filter(Boolean).join(" ") on-click(product.onClick)>
+              <if(product.icon)>
+                <sds-icon><${renderable(product.icon)}/></sds-icon>
+              </if>
+              <sds-text as="span" variant="bodyMd">${product.label}</sds-text>
+            </a>
+          </for>
+        </else-if>
+
+        <else>
+          <div class="sds-header__mobile-menu">
+            <if(user)>
+            <div class="sds-header__mobile-menu-block">
+              <div class="sds-header__profile-header">
+                <sds-avatar src=user?.avatarSrc initials=initials size="sm"/>
+                <div>
+                  <p class="sds-header__profile-name">${user?.name}</p>
+                  <if(user?.company)>
+                    <sds-text as="p" variant="labelRegular" class="sds-header__profile-company">
+                      ${user.company}
+                    </sds-text>
+                  </if>
+                </div>
+              </div>
+            </div>
+            </if>
+
+            <for|item| of=profileMenuItems>
+              <hr class="sds-header__mobile-divider"/>
+              <div class="sds-header__mobile-menu-block">
+                <a href=item.href class="sds-header__mobile-row" on-click(item.onClick)>
+                  <sds-text as="span" variant="bodyMd">${item.label}</sds-text>
+                </a>
+              </div>
+            </for>
+
+            <for|item| of=navItems>
+              <hr class="sds-header__mobile-divider"/>
+              <div class="sds-header__mobile-menu-block">
+                <if(item.children)>
+                  <span class="sds-header__mobile-menu-title">${item.label}</span>
+                  <for|child| of=item.children>
+                    <a href=child.href class="sds-header__mobile-row" on-click(child.onClick)>
+                      <sds-text as="span" variant="bodyMd">${child.label}</sds-text>
+                    </a>
+                  </for>
+                </if>
+                <else>
+                  <a href=item.href class="sds-header__mobile-row" on-click(item.onClick)>
+                    <sds-text as="span" variant="bodyMd">${item.label}</sds-text>
+                  </a>
+                </else>
+              </div>
+            </for>
+
+            <if(showFAQs)>
+              <hr class="sds-header__mobile-divider"/>
+              <div class="sds-header__mobile-menu-block">
+                <button type="button" class="sds-header__mobile-row" on-click(onFAQs)>
+                  <sds-text as="span" variant="bodyMd">FAQs</sds-text>
+                </button>
+              </div>
+            </if>
+
+            <if(onLogout)>
+              <hr class="sds-header__mobile-divider"/>
+              <div class="sds-header__mobile-menu-block">
+                <button type="button" class="sds-header__mobile-row sds-header__mobile-row--danger"
+                  on-click(onLogout)>
+                  <sds-text as="span" variant="bodyMd">${logoutLabel}</sds-text>
+                </button>
+              </div>
+            </if>
+          </div>
+        </else>
+      </div>
+    </div>
+  </if>
+</header>

package/components/Icon/Icon.css

@@ -0,0 +1,44 @@
+/* SDS icon wrapper.
+   Ported from kdls-design-system v2.5.1 (0f3edf8) components/Icon/Icon.css.
+
+   Divergence: the .kdls-icon--lya rule is removed. It filled glyphs with
+   url(#kdls-icon-lya-gradient), a <linearGradient> whose third stop read
+   --color-tertiary-50 — a family SDS does not carry. A gradient reaches the icon
+   through applyCustomGradient and --color-primary-* now, like everything else. */
+
+.sds-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+/* The generated glyphs carry width="24" height="24" as presentation attributes;
+   these rules win over them, which is how one 24px source serves all three sizes. */
+.sds-icon--xs,
+.sds-icon--xs > svg {
+  width: var(--icon-size-xs);
+  height: var(--icon-size-xs);
+  font-size: var(--icon-size-xs);
+}
+
+.sds-icon--sm,
+.sds-icon--sm > svg {
+  width: var(--icon-size-sm);
+  height: var(--icon-size-sm);
+  font-size: var(--icon-size-sm);
+}
+
+.sds-icon--md,
+.sds-icon--md > svg {
+  width: var(--icon-size-md);
+  height: var(--icon-size-md);
+  font-size: var(--icon-size-md);
+}
+
+.sds-icon--lg,
+.sds-icon--lg > svg {
+  width: var(--icon-size-lg);
+  height: var(--icon-size-lg);
+  font-size: var(--icon-size-lg);
+}

package/components/Icon/icon-colors.js

@@ -0,0 +1,31 @@
+/**
+ * Colour families an <sds-icon> accepts. Each resolves to that family's -50 step.
+ *
+ * Ported from kdls-design-system v2.5.1 (0f3edf8) components/Icon/Icon.tsx (IconColor).
+ * Divergence: `secondary`, `tertiary` and `lya` are gone — the first two are Kenlo
+ * brand families SDS does not carry, and `lya` was not a family at all but a special
+ * case that swapped the solid fill for a gradient. That capability now belongs to
+ * applyCustomGradient, which fills --color-primary-* for every component at once.
+ */
+export const ICON_COLORS = [
+  'neutral', 'primary',
+  'success', 'alert', 'error',
+  'leaf', 'sand', 'wood', 'clay', 'flower', 'dusk', 'sky', 'sea', 'lake',
+];
+
+export const ICON_SIZES = ['xs', 'sm', 'md', 'lg'];
+
+export function assertIconColor(color) {
+  if (color === undefined || color === null) return null;
+  if (!ICON_COLORS.includes(color)) {
+    throw new Error(`Unknown icon color: "${color}". Allowed: ${ICON_COLORS.join(', ')}`);
+  }
+  return color;
+}
+
+export function assertIconSize(size) {
+  if (!ICON_SIZES.includes(size)) {
+    throw new Error(`Unknown icon size: "${size}". Allowed: ${ICON_SIZES.join(', ')}`);
+  }
+  return size;
+}

package/components/Icon/icon.marko

@@ -0,0 +1,56 @@
+<!-- sds-icon — ported from kdls-design-system v2.5.1 (0f3edf8) components/Icon/Icon.tsx.
+
+     Divergences:
+       - the glyph arrives as tag content, not as an `icon` prop holding an already
+         instantiated element. React can pass <SearchRegular /> as a value; Marko passes
+         markup as a body. The consumer still imports only the glyphs it uses, so the
+         tree-shaking property that made the KDLS shape worth keeping is preserved.
+       - color="lya" is gone, along with the inline <linearGradient> it rendered. Its
+         third stop read --color-tertiary-50, a family SDS does not carry. A gradient
+         reaches the icon through applyCustomGradient and --color-primary-* now.
+       - an unknown colour or size throws instead of rendering an unstyled glyph.
+       - no state: an icon is markup.
+       - KDLS's Icon takes an onClick. SDS's does not, and this is not a small point:
+         `on-click` bound to a template value makes Marko serialise the component, and
+         Icon is on every button, every menu row and every field. Measured on a page of
+         fifty: 1,485 bytes of payload, 190 after Brotli, for icons that were never
+         clicked. A clickable <span> was also unreachable by keyboard and unnamed to a
+         screen reader — so the case it served belongs to sds-icon-button, which has
+         focus, Enter and Space and a required label. -->
+import { rehyphenate } from "../../foundations/attrs.js";
+import { assertIconColor, assertIconSize } from "./icon-colors.js";
+
+$ {
+  const { size = "md", color, class: extraClass = "" } = input;
+  assertIconSize(size);
+  assertIconColor(color);
+  if (input.onClick) {
+    throw new Error("sds-icon takes no onClick — a clickable icon is <sds-icon-button>, which is focusable and named.");
+  }
+  const classes = ["sds-icon", `sds-icon--${size}`, extraClass].filter(Boolean).join(" ");
+
+  // The `-solid` companion, not the slot. `--color-primary-50` may hold a gradient — that
+  // is the whole point of the slot — and a gradient is an <image>: `color` does not accept
+  // one, so the declaration is dropped and the glyph silently falls back to whatever it
+  // inherited. Every other place that paints with the slot was moved to `-solid` in the
+  // gradient sweep; this one was built by string interpolation and the sweep did not see
+  // it. Only the primary family has a companion; the rest are plain colours already.
+  const paint = color === "primary" ? "--color-primary-50-solid" : `--color-${color}-50`;
+
+  // Whatever else the caller wrote, forwarded — `aria-label`, `role`, `aria-hidden`,
+  // `style`, every `data-*`. The icon used to read them into `input` and drop them, so a
+  // decorative icon could not be hidden from a screen reader and a meaningful one could
+  // not be named. KDLS forwards its rest props; the port listed four and lost the rest.
+  const OWN = new Set(["size", "color", "class", "style", "renderBody", "onClick"]);
+  const forwarded = rehyphenate(Object.fromEntries(
+    Object.entries(input).filter(([key]) => !OWN.has(key)),
+  ));
+
+  // The caller's own inline style comes last, so it can override the family colour.
+  const style = [color ? `color: var(${paint})` : "", input.style ?? ""]
+    .filter(Boolean).join("; ") || null;
+}
+
+<span ...forwarded class=classes style=style>
+  <${input.renderBody}/>
+</span>