@kenlo/sds-design-system 0.9.9

package/components/Pagination/Pagination.css

@@ -0,0 +1,78 @@
+/* SDS Pagination.
+   Ported from kdls-design-system v2.5.1 (0f3edf8) components/Pagination/Pagination.css
+   by scripts/port-css.mjs. Divergences beyond the mechanical rename are noted inline.
+ *//* ── Pagination ─────────────────────────────────────────────────────────
+   3-column grid: info (left) | page controls (center) | jump/spacer (right).
+   BEM root: .sds-pagination
+   ─────────────────────────────────────────────────────────────────── */
+
+.sds-pagination {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  gap: var(--spacing-4);
+}
+@media (max-width: 799px) {
+  .sds-pagination {
+    grid-template-columns: 1fr;
+    justify-items: center;
+    gap: var(--spacing-3);
+  }
+  .sds-pagination__spacer {
+    display: none;
+  }
+}
+/* ── Left info ("Showing [10 ▼] of 48 items") ── */
+.sds-pagination__info {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+.sds-pagination__info-text {
+  white-space: nowrap;
+}
+/* ── Center: prev button + pills + next button ── */
+.sds-pagination__controls {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4); /* 16px between arrows and page group */
+  /* Divergence: the arrows stay put and the numbers scroll between them.
+     Ten pages at 44px need 500px before the arrows and the gaps, so on a phone this row
+     did not fit — measured at 375px, it reached 422 and took the whole page sideways
+     with it. KDLS has the same row and says nothing about what happens when it is too
+     wide. Scrolling the numbers keeps prev and next where the thumb expects them. */
+  max-width: 100%;
+  min-width: 0;
+}
+.sds-pagination__pages {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2); /* 8px between pills and ellipsis */
+  min-width: 0;
+  overflow-x: auto;
+  /* Room for the scrollbar so it does not sit on top of the pills. */
+  padding-bottom: var(--spacing-1);
+}
+.sds-pagination__controls > .sds-icon-button,
+.sds-pagination__controls > button {
+  flex-shrink: 0;
+}
+.sds-pagination__controls .sds-pill {
+  width: 44px;
+  padding: 0;
+  justify-content: center;
+}
+/* ── Ellipsis between page groups ── */
+.sds-pagination__ellipsis {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-body-sm);
+  color: var(--body-color);
+  padding: 0 var(--spacing-1);
+  display: inline-flex;
+  align-items: center;
+  height: 40px;
+}
+/* ── Right spacer — mirrors info width to keep controls centered ── */
+.sds-pagination__spacer {
+  /* intentionally empty */
+}

package/components/Pagination/pagination-pages.js

@@ -0,0 +1,66 @@
+/**
+ * Which page numbers a pagination control shows.
+ *
+ * Ported verbatim from kdls-design-system v2.5.1 (0f3edf8) components/Pagination/Pagination.tsx.
+ * Pulled out because it is pure and because the edge cases — the first pages, the last
+ * pages, a total small enough that no gap is needed — are exactly where an off-by-one
+ * hides and nobody notices until a customer cannot reach page 2.
+ */
+
+/** Every page size the component will accept. */
+export const PAGE_SIZES = [10, 20, 50, 500];
+
+/**
+ * The sizes the selector offers, which is not the same list.
+ *
+ * 500 is accepted and never offered — KDLS marks it `@internal`, for a caller that sets it
+ * itself (its own icon catalogue does). Offering it put "500 itens por página" in front of
+ * a visitor as an ordinary choice, and a listing of five hundred property cards is a page
+ * that takes seconds to paint and cannot be scrolled back from.
+ */
+export const PAGE_SIZE_OPTIONS = [10, 20, 50];
+export const SIBLING_COUNTS = [1, 2, 3];
+
+export const GAP = '…';
+
+/** How many pages a total splits into. Always at least one, even with nothing to show. */
+export const pageCount = (totalItems, pageSize) => Math.max(1, Math.ceil(totalItems / pageSize));
+
+/**
+ * The first page, the last page, and `siblingCount` pages either side of the current one.
+ * A gap marker stands wherever the run is broken.
+ */
+export function buildPages(page, totalPages, siblingCount = 1) {
+  const near = new Set(
+    [
+      1,
+      totalPages,
+      ...Array.from({ length: siblingCount * 2 + 1 }, (_, i) => page - siblingCount + i),
+    ].filter((p) => p >= 1 && p <= totalPages),
+  );
+
+  const result = [];
+  let previous = null;
+
+  for (const p of [...near].sort((a, b) => a - b)) {
+    if (previous !== null && p - previous > 1) result.push(GAP);
+    result.push(p);
+    previous = p;
+  }
+
+  return result;
+}
+
+export function assertPageSize(size) {
+  if (!PAGE_SIZES.includes(size)) {
+    throw new Error(`Unknown page size: "${size}". Allowed: ${PAGE_SIZES.join(', ')}`);
+  }
+  return size;
+}
+
+export function assertSiblingCount(count) {
+  if (!SIBLING_COUNTS.includes(count)) {
+    throw new Error(`Unknown sibling count: "${count}". Allowed: ${SIBLING_COUNTS.join(', ')}`);
+  }
+  return count;
+}

package/components/Pagination/pagination.marko

@@ -0,0 +1,141 @@
+<!-- sds-pagination — ported from kdls-design-system v2.5.1 (0f3edf8)
+components/Pagination/Pagination.tsx.
+
+Which page numbers to show is in pagination-pages.js, tested on its own: the edges are
+exactly where an off-by-one hides until a customer cannot reach page 2.
+
+It hydrates, because the buttons have to navigate. It holds no state — the current page
+comes from the caller, which is the thing that knows what it is showing.
+
+Divergences:
+
+It is a <nav> with an aria-label, and the page buttons carry aria-current. KDLS rendered
+loose Pills, so a screen reader met a row of unrelated buttons with no way to tell which
+page it was on.
+
+The gap is aria-hidden. An ellipsis read aloud says nothing useful, and the pages either
+side of it already say what is skipped. -->
+
+import { buildPages, pageCount, GAP, PAGE_SIZES, PAGE_SIZE_OPTIONS, assertPageSize, assertSiblingCount }
+  from "./pagination-pages.js";
+
+class {
+  go(page) {
+    const { currentPage, totalItems, pageSize = 20, disabled, onChange } = this.input;
+    if (disabled) return;
+    const total = pageCount(totalItems, pageSize);
+    if (page < 1 || page > total || page === currentPage) return;
+    onChange?.(page, pageSize);
+  }
+
+  previous() { this.go(this.input.currentPage - 1); }
+  next() { this.go(this.input.currentPage + 1); }
+
+  handleSizeChange(size) {
+    const next = Number(size);
+    // Changing the page size moves the visitor back to the first page: staying on page 9
+    // of a list that now has four is how a "no results" screen appears out of nowhere.
+    this.input.onChange?.(1, next);
+  }
+}
+
+$ {
+  const {
+    currentPage,
+    totalItems,
+    pageSize = 20,
+    siblingCount = 2,
+    showSizeChanger = false,
+    hideOnSinglePage = false,
+    disabled = false,
+    label = "Paginação",
+    class: extraClass = "",
+  } = input;
+
+  if (typeof currentPage !== "number") throw new Error("sds-pagination needs a numeric `currentPage`.");
+  if (typeof totalItems !== "number") throw new Error("sds-pagination needs a numeric `totalItems`.");
+  assertPageSize(pageSize);
+  assertSiblingCount(siblingCount);
+
+  const totalPages = pageCount(totalItems, pageSize);
+  // No items, no page buttons. `pageCount` clamps to 1 so that nothing divides by zero,
+  // and the clamp leaked into the buttons: an empty list rendered an active "1", telling
+  // the visitor they are on page 1 of a list that has nothing on any page. KDLS renders
+  // none, and the info text beside it already says there is nothing.
+  const pages = totalItems === 0 ? [] : buildPages(currentPage, totalPages, siblingCount);
+  const hidden = hideOnSinglePage && totalPages <= 1;
+
+  const first = totalItems === 0 ? 0 : (currentPage - 1) * pageSize + 1;
+  const last = Math.min(currentPage * pageSize, totalItems);
+}
+
+<if(!hidden)>
+  <nav class=`sds-pagination ${extraClass}`.trim() aria-label=label>
+    <div class="sds-pagination__info">
+      <sds-text as="span" variant="labelRegular" class="sds-pagination__info-text">
+        ${first}–${last} de ${totalItems}
+      </sds-text>
+      <if(showSizeChanger)>
+        <sds-select
+          label="Itens por página"
+          trigger="navButton"
+          value=String(pageSize)
+          options=PAGE_SIZE_OPTIONS.map((size) => ({ label: String(size), value: String(size) }))
+          onChange=(size) => component.handleSizeChange(size)
+          disabled=disabled
+          // `clearable={false}`, because sds-select defaults it to true and a page size has
+          // no empty. Clearing reported `null`, which `Number(null)` turned into a page size
+          // of 0 — and `pageCount` divides by it. There is no state of this control that
+          // means "no size": every list has one.
+          clearable=false
+        />
+      </if>
+    </div>
+
+    // The controls come SECOND, and the spacer last.
+    //
+    // The grid is `1fr auto 1fr` and places children in order, so whatever is second takes
+    // the centre column. With the spacer there, the page buttons were pushed into the
+    // trailing 1fr and sat left-aligned inside it rather than centred under the list. KDLS
+    // emits info → controls → spacer for exactly this reason.
+    <div class="sds-pagination__controls">
+      <sds-icon-button
+        variant="neutral"
+        aria-label="Página anterior"
+        disabled=(disabled || currentPage <= 1)
+        onClick=() => component.previous()
+      >
+        <@icon><fluent-chevron-left-regular/></@icon>
+      </sds-icon-button>
+
+      <div class="sds-pagination__pages">
+        <for|entry| of=pages>
+          <if(entry === GAP)>
+            <span class="sds-pagination__ellipsis" aria-hidden="true">${GAP}</span>
+          </if>
+          <else>
+            <sds-pill
+              label=String(entry)
+              active=(entry === currentPage)
+              disabled=disabled
+              aria-label=`Página ${entry}`
+              aria-current=(entry === currentPage ? "page" : null)
+              onClick=() => component.go(entry)
+            />
+          </else>
+        </for>
+      </div>
+
+      <sds-icon-button
+        variant="neutral"
+        aria-label="Próxima página"
+        disabled=(disabled || currentPage >= totalPages)
+        onClick=() => component.next()
+      >
+        <@icon><fluent-chevron-right-regular/></@icon>
+      </sds-icon-button>
+    </div>
+
+    <div class="sds-pagination__spacer" aria-hidden="true"/>
+  </nav>
+</if>

package/components/Pill/Pill.css

@@ -0,0 +1,193 @@
+/* SDS Pill.
+   Ported from kdls-design-system v2.5.1 (0f3edf8) components/Pill/Pill.css
+   by scripts/port-css.mjs. Divergences beyond the mechanical rename are noted inline.
+
+   Rules removed with the brand families they targeted:
+     [data-color-scheme="lya"] .sds-pill--off:hover:not(:disabled):not(.sds-pill--loading)
+     [data-color-scheme="lya"] .sds-pill--on
+     [data-color-scheme="lya"] .sds-pill--on:hover:not(:disabled):not(.sds-pill--loading)
+     [data-color-scheme="lya"] .sds-pill--on:active:not(:disabled):not(.sds-pill--loading)
+ *//* ============================================================
+   SDS Pill — Filter Chip
+   Height:  40px (equal to Toggle)
+   Status:  off (outlined) | on (filled primary)
+   States:  enabled | hover | pressed | focused | disabled
+   Icons:   left icon | chevron | filter | notification badge
+   ============================================================ */
+
+.sds-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  height: 40px;
+
+  padding: 0 var(--spacing-4);
+  /* soft, the install default — see the note by the scheme overrides below */
+  border-radius: 11px;
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-body-md);      /* 16px */
+  font-weight: var(--font-weight-medium);
+  line-height: var(--lh-body-md);     /* 24px */
+  cursor: pointer;
+  white-space: nowrap;
+  border: 1px solid transparent;
+  transition:
+    background-color 120ms ease,
+    color 120ms ease,
+    border-color 120ms ease,
+    box-shadow 120ms ease;
+  position: relative;
+  outline: none;
+  -webkit-font-smoothing: antialiased;
+  user-select: none;
+}
+/* ──────────────────────────────────────────────
+   STATUS: OFF — outlined / ghost
+────────────────────────────────────────────── */
+.sds-pill--off {
+  background-color: var(--component-bg-color);
+  color: var(--color-neutral-80);
+  border-color: var(--border-interactive-color);
+}
+.sds-pill--off:hover:not(:disabled):not(.sds-pill--loading) {
+  background-color: var(--component-bg-color);
+  border-color: var(--color-primary-50-solid);
+}
+.sds-pill--off:active:not(:disabled):not(.sds-pill--loading) {
+  background-color: var(--color-neutral-20);
+  border-color: var(--color-neutral-60);
+  color: var(--color-neutral-90);
+}
+.sds-pill--off:focus-visible {
+  box-shadow: var(--focus-ring);
+}
+/* ──────────────────────────────────────────────
+   STATUS: ON — filled primary
+────────────────────────────────────────────── */
+.sds-pill--on {
+  background: var(--color-primary-50);
+  color: var(--color-on-primary);
+  border-color: var(--color-primary-50-solid);
+}
+.sds-pill--on:hover:not(:disabled):not(.sds-pill--loading) {
+  background: var(--color-primary-60);
+  border-color: var(--color-primary-60-solid);
+}
+.sds-pill--on:active:not(:disabled):not(.sds-pill--loading) {
+  background: var(--color-primary-70);
+  border-color: var(--color-primary-70-solid);
+}
+.sds-pill--on:focus-visible {
+  box-shadow: var(--focus-ring);
+}
+/* ──────────────────────────────────────────────
+   DISABLED
+────────────────────────────────────────────── */
+.sds-pill:disabled,
+.sds-pill[aria-disabled="true"] {
+  background-color: var(--color-neutral-20) !important;
+  border-color: var(--border-static-color) !important;
+  color: var(--color-neutral-40) !important;
+  cursor: not-allowed;
+}
+.sds-pill--loading {
+  cursor: wait;
+}
+.sds-pill--off:disabled,
+.sds-pill--off[aria-disabled="true"] {
+  background-color: transparent !important;
+}
+[data-theme="dark"] .sds-pill:disabled,
+[data-theme="dark"] .sds-pill[aria-disabled="true"] {
+  background-color: var(--color-neutral-30) !important;
+  border-color: var(--border-interactive-color) !important;
+  color: var(--color-neutral-40) !important;
+}
+[data-theme="dark"] .sds-pill--off:disabled,
+[data-theme="dark"] .sds-pill--off[aria-disabled="true"] {
+  background-color: transparent !important;
+}
+/* ──────────────────────────────────────────────
+   INNER ELEMENTS
+────────────────────────────────────────────── */
+.sds-pill__icon,
+.sds-pill__icon-right {
+  display: inline-flex;
+  align-items: center;
+  font-size: 24px;
+  flex-shrink: 0;
+}
+.sds-pill__label {
+  text-align: left;
+}
+/* ── Width ── */
+.sds-pill--fill  { width: 100%; justify-content: flex-start; }
+.sds-pill--fill .sds-pill__label { flex: 1; }
+/* ── Clickable icon-right (dismiss) ── */
+.sds-pill__icon-right--clickable {
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  transition: background-color 120ms ease;
+  padding: var(--spacing-0-5);
+}
+.sds-pill__icon-right--clickable:hover  { background-color: var(--color-opacity-05); }
+.sds-pill__icon-right--clickable:active { background-color: var(--color-opacity-10); }
+/* ── Corner Radius Scheme overrides ──
+   Carried from KDLS unchanged, including the numbers, which are not arbitrary: they are a
+   proportion of the control's own height, and that is what keeps the four schemes reading
+   as one family rather than four unrelated shapes.
+
+       height 40px    flat 0    soft 11px    medium 15px    rounded 20px (a capsule)
+       as a fraction  0         0.275        0.375          0.5
+
+   The same fractions give the Toggle's 32px item 9px and 12px — see Toggle.css. A radius
+   taken from --radius-md instead would be 16px and 24px here, and 24px on a 40px control
+   is past half its height, so the medium scheme would draw the same capsule as rounded and
+   two of the four schemes would collapse into one.
+
+   (Briefly changed to --radius-md - 2px on 2026-09-10 and changed back the same day:
+   Rafael pointed out that KDLS gets soft, medium and rounded right as they stand.)
+
+   The base value is `soft`, because `soft` is what an install without a data-radius
+   attribute gets.
+
+   KDLS's default scheme was `default`, Kenlo's own, and it lived unnamed in :root — so
+   KDLS's base rule here is `default`'s value and the four named schemes override it. SDS
+   removed `default` and promoted `soft`, and foundations/theme-server.js deliberately does
+   not stamp an attribute for the value that is already the default. The base rule was
+   therefore still answering for a scheme that no longer exists: with the install defaults
+   this control rendered as a capsule instead of 11px.
+
+   tokens.css already solves this the same way — :root carries soft's values and each
+   [data-radius] block overrides them. The named rules below stay for when the attribute is
+   stamped, and `rounded` is now explicit because it can no longer fall through to the base.
+ */
+[data-radius="flat"] .sds-pill { border-radius: 0; }
+/* Kept in parity with Toggle's outer container, which is the same 40px tall */
+[data-radius="soft"] .sds-pill { border-radius: 11px; }
+[data-radius="medium"] .sds-pill { border-radius: 15px; }
+[data-radius="rounded"] .sds-pill { border-radius: var(--radius-full); }
+/* ── Notification inside active Pill — inverted colors ── */
+.sds-pill--on .sds-notification {
+  background-color: var(--color-on-primary);
+  color: var(--color-primary-50-solid);
+}
+/* ── Notification inside disabled Pill ── */
+.sds-pill:disabled .sds-notification,
+.sds-pill[aria-disabled="true"] .sds-notification {
+  background-color: var(--color-neutral-40);
+  color: var(--color-neutral-20);
+}
+[data-theme="dark"] .sds-pill:disabled .sds-notification,
+[data-theme="dark"] .sds-pill[aria-disabled="true"] .sds-notification {
+  color: var(--color-neutral-30);
+}
+/* ──────────────────────────────────────────────
+   DARK MODE
+────────────────────────────────────────────── */
+[data-theme="dark"] .sds-pill--off:hover:not(:disabled):not(.sds-pill--loading) {
+  background-color: transparent;
+}
+[data-theme="dark"] .sds-pill--off:active:not(:disabled):not(.sds-pill--loading) {
+  background-color: var(--color-neutral-30);
+}

package/components/Pill/pill-variants.js

@@ -0,0 +1,16 @@
+/**
+ * The Pill's vocabulary.
+ *
+ * Ported from kdls-design-system v2.5.1 (0f3edf8) components/Pill/Pill.tsx.
+ *
+ * Only `width` is a closed set: everything else about a pill is a boolean or a label.
+ * It was read as `width === "fill" ? … : ""`, which silently treated every typo as hug.
+ */
+export const PILL_WIDTHS = ['hug', 'fill'];
+
+export function assertPillWidth(width) {
+  if (!PILL_WIDTHS.includes(width)) {
+    throw new Error(`Unknown pill width: "${width}". Allowed: ${PILL_WIDTHS.join(', ')}`);
+  }
+  return width;
+}

package/components/Pill/pill.marko

@@ -0,0 +1,165 @@
+<!-- sds-pill — ported from kdls-design-system v2.5.1 (0f3edf8) components/Pill/Pill.tsx.
+
+A toggle shaped like a chip: a filter that is on or off. It is a real <button> with
+aria-pressed, which is what tells a screen reader this is a toggle and not a link — and it
+hydrates, for the same reason every button does.
+
+A known limitation, carried over rather than fixed: when the right icon has its own
+action it is a <span role="button">, not a real button. A <button> cannot contain another
+<button> — that is invalid HTML — and the pill itself is the button. Making the icon
+properly focusable means the pill stops being a <button> and becomes a container with two
+of them inside, which changes its whole keyboard and ARIA story. That is a design decision,
+not a port decision, so it is left as KDLS had it and recorded here.
+
+Divergence: notification renders through sds-notification instead of being drawn inline. -->
+import { assertPillWidth } from "./pill-variants.js";
+
+
+class {
+  handleClick(event) {
+    const { disabled, isLoading, onClick } = this.input;
+    if (disabled || isLoading) {
+      event.preventDefault();
+      return;
+    }
+    onClick?.(event);
+  }
+
+  /**
+   * Enter and Space on the right icon.
+   *
+   * It carries `role="button"` and `tabindex="0"`, so the keyboard can reach it and a
+   * screen reader announces it as a button — and then nothing happened, because only
+   * `click` was wired. A control that takes focus, says it is a button and does nothing
+   * when you press it is worse than one you cannot reach: you are told it works.
+   *
+   * KDLS has this handler; the port dropped it. `stopPropagation` matters as much as the
+   * call: without it the key reaches the pill it sits inside and opens what you were
+   * trying to clear.
+   */
+  iconRightKey(event) {
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    this.handleIconRight(event);
+  }
+
+  handleIconRight(event) {
+    event.stopPropagation();
+    const { disabled, isLoading, onClickIconRight } = this.input;
+    if (disabled || isLoading) {
+      event.preventDefault();
+      return;
+    }
+    onClickIconRight?.(event);
+  }
+}
+
+$ {
+  const {
+    label,
+    active = false,
+    width = "hug",
+    iconLeft,
+    iconRight,
+    onClickIconRight,
+    iconRightLabel = "Remover",
+    showNotification = false,
+    notificationCount,
+    isLoading = false,
+    disabled = false,
+    class: extraClass = "",
+  } = input;
+
+  assertPillWidth(width);
+
+  // Marko camelCases a hyphenated attribute written on a component tag, capitalising only
+  // the letter after the hyphen: aria-haspopup arrives as `ariaHaspopup`, not
+  // `ariaHasPopup`. Guessing that spelling by hand is how an attribute silently goes
+  // missing — the pill announced itself as a pressed switch for exactly that reason. So
+  // the rule is applied rather than remembered, and both forms are read: a template writes
+  // the first, a test or a loop passes the second.
+  const aria = (name) => input[`aria-${name}`]
+    ?? input[`aria${name[0].toUpperCase()}${name.slice(1)}`]
+    ?? null;
+
+  const ariaLabel = aria("label");
+  // A pill is a toggle by default, and aria-pressed is what says so. Two callers need it
+  // to be something else, and a control cannot be two things at once:
+  //
+  //   aria-current   a navigation marker — the page you are on, in Pagination
+  //   aria-haspopup  a disclosure — the trigger of a Select, which opens a listbox
+  //
+  // Either one takes over the announcement. A button claiming to be a pressed switch *and*
+  // the current page, or a pressed switch that also opens a menu, tells a screen reader two
+  // stories about itself and the visitor hears the wrong one.
+  const ariaCurrent = aria("current");
+  const ariaHasPopup = aria("haspopup");
+  const ariaExpanded = aria("expanded");
+  const ariaControls = aria("controls");
+  if (!label && !ariaLabel) {
+    throw new Error("sds-pill needs a `label`, or an `aria-label` when it shows only an icon.");
+  }
+
+  const renderable = (value) => (value && value.renderBody) || value;
+  const loading = isLoading && !disabled;
+
+  const classes = [
+    "sds-pill",
+    active ? "sds-pill--on" : "sds-pill--off",
+    disabled ? "sds-pill--disabled" : "",
+    loading ? "sds-pill--loading" : "",
+    width === "fill" ? "sds-pill--fill" : "",
+    extraClass,
+  ].filter(Boolean).join(" ");
+}
+
+<button
+  type="button"
+  class=classes
+  aria-pressed=(ariaCurrent || ariaHasPopup ? null : (active ? "true" : "false"))
+  aria-current=ariaCurrent
+  aria-haspopup=ariaHasPopup
+  aria-expanded=ariaExpanded
+  aria-controls=ariaControls
+  aria-busy=(loading ? "true" : null)
+  aria-label=ariaLabel
+  disabled=(disabled || null)
+  on-click("handleClick")
+>
+  <if(loading)>
+    <sds-spinner size="sm" decorative/>
+  </if>
+  <else-if(iconLeft)>
+    <span class="sds-pill__icon" aria-hidden="true">
+      <sds-icon size="sm"><${renderable(iconLeft)}/></sds-icon>
+    </span>
+  </else-if>
+
+  <if(label)>
+    <span class="sds-pill__label">${label}</span>
+  </if>
+
+  <if(showNotification || notificationCount !== undefined)>
+    <!-- No wrapper: KDLS renders it as a direct flex child, and a wrapper with no rule
+         behind it is an unstyled block in the middle of a row. -->
+    <sds-notification count=notificationCount size=(notificationCount === undefined ? 8 : 16)/>
+  </if>
+
+  <if(iconRight && onClickIconRight)>
+    <span
+      class="sds-pill__icon-right sds-pill__icon-right--clickable"
+      role="button"
+      tabindex="0"
+      aria-label=iconRightLabel
+      on-click("handleIconRight")
+      on-keydown("iconRightKey")
+    >
+      <sds-icon size="sm"><${renderable(iconRight)}/></sds-icon>
+    </span>
+  </if>
+  <else-if(iconRight)>
+    <span class="sds-pill__icon-right" aria-hidden="true">
+      <sds-icon size="sm"><${renderable(iconRight)}/></sds-icon>
+    </span>
+  </else-if>
+</button>