@kenlo/sds-design-system 0.9.9

package/components/Nav/Nav.css

@@ -0,0 +1,298 @@
+/* SDS Nav.
+   Ported from kdls-design-system v2.5.1 (0f3edf8) components/Nav/Nav.css
+   by scripts/port-css.mjs. Divergences beyond the mechanical rename are noted inline.
+ *//* ============================================================
+   SDS Nav
+   Navigation container — horizontal (top bar) or vertical (sidebar)
+   Items reuse sds-menu__item styles
+   ============================================================ */
+
+/* ── Root ── */
+.sds-nav {
+  display: flex;
+  box-sizing: border-box;
+}
+.sds-nav--horizontal {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--spacing-4);
+  /* Divergence: it wraps rather than pushing the page out. Five items at 375px measured
+     427px wide, which is a horizontal scrollbar under the whole document — and the items
+     that did not fit were unreachable either way. KDLS lets it overflow.
+
+     It wraps rather than scrolls, and that was measured too. `overflow-x: auto` was the
+     first fix and it broke every menu a nav item holds: CSS computes `overflow-y` to
+     `auto` as soon as `overflow-x` is not `visible`, so a 71px nav clipped a 332px menu
+     panel to nothing. Wrapping costs height on a crowded row and hides nothing. */
+  min-width: 0;
+  max-width: 100%;
+  flex-wrap: wrap;
+}
+.sds-nav--vertical {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0;
+  width: 100%;
+}
+/* ── Header / Footer slots ── */
+.sds-nav__header {
+  flex-shrink: 0;
+  padding: var(--spacing-3) var(--spacing-4);
+  border-bottom: 1px solid var(--border-static-color);
+}
+.sds-nav__footer {
+  flex-shrink: 0;
+  margin-top: auto;
+  padding: var(--spacing-3) var(--spacing-4);
+  border-top: 1px solid var(--border-static-color);
+}
+/* ── Item ── */
+.sds-nav__item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  padding: var(--spacing-2) var(--spacing-4);
+  min-height: 40px;
+  cursor: pointer;
+  color: var(--color-neutral-80);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-body-md);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--lh-body-md);
+  border-radius: 11px;  /* soft, the install default — schemes at the end */
+  border: none;
+  background: transparent;
+  text-align: left;
+  text-decoration: none;
+  transition: background-color 120ms ease, color 120ms ease;
+  user-select: none;
+  box-sizing: border-box;
+  white-space: nowrap;
+}
+.sds-nav--vertical .sds-nav__item {
+  width: 100%;
+  margin: 0 var(--spacing-1);
+  width: calc(100% - var(--spacing-2));
+}
+/* `:where(a, button)` rather than `a, button`.
+   These are scoped to the interactive elements on purpose — an item that is neither a link
+   nor a button is not hoverable and should not pretend to be. But naming the element
+   raised the specificity to (0,3,1), which beats every intent rule at (0,3,0) no matter
+   what order they are in: an item with `intent="error"` got the generic grey hover instead
+   of its red one, while its text colour — declared only on the intent rule — did change.
+   Half the style applied, which is worse than none.
+   `:where()` contributes nothing to specificity, so the scoping survives and the intent
+   rules below win on source order, which is what they were written to do. */
+:where(a, button).sds-nav__item:hover:not(.sds-nav__item--disabled) {
+  background-color: var(--color-opacity-05);
+}
+:where(a, button).sds-nav__item:focus-visible {
+  outline: none;
+  background-color: var(--color-opacity-08);
+  box-shadow: var(--focus-ring-inset);
+}
+:where(a, button).sds-nav__item:active {
+  background-color: var(--color-opacity-10);
+}
+.sds-nav__item--active {
+  color: var(--color-neutral-90);
+  font-weight: var(--font-weight-bold);
+}
+.sds-nav__item--active:hover:not(.sds-nav__item--disabled) {
+  background-color: var(--color-opacity-05);
+}
+.sds-nav__item--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+/* ── Intent items ── */
+.sds-nav__item--primary:hover:not(.sds-nav__item--disabled),
+.sds-nav__item--primary:focus-visible {
+  background: var(--color-primary-10);
+  color: var(--color-primary-90-solid);
+}
+.sds-nav__item--primary:active {
+  background: var(--color-primary-30);
+  color: var(--color-primary-90-solid);
+}
+.sds-nav__item--error:hover:not(.sds-nav__item--disabled),
+.sds-nav__item--error:focus-visible {
+  background-color: var(--color-error-10);
+  color: var(--color-error-10-on);
+}
+.sds-nav__item--error:active {
+  background-color: var(--color-error-30);
+  color: var(--color-error-30-on);
+}
+.sds-nav__item--success:hover:not(.sds-nav__item--disabled),
+.sds-nav__item--success:focus-visible {
+  background-color: var(--color-success-10);
+  color: var(--color-success-10-on);
+}
+.sds-nav__item--success:active {
+  background-color: var(--color-success-30);
+  color: var(--color-success-30-on);
+}
+.sds-nav__item--alert:hover:not(.sds-nav__item--disabled),
+.sds-nav__item--alert:focus-visible {
+  background-color: var(--color-alert-10);
+  color: var(--color-alert-10-on);
+}
+.sds-nav__item--alert:active {
+  background-color: var(--color-alert-30);
+  color: var(--color-alert-30-on);
+}
+/* ── Item slots ── */
+.sds-nav__item-icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: inherit;
+}
+.sds-nav__item-label {
+  flex: 1;
+  white-space: nowrap;
+}
+.sds-nav__item-tooltip-icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+/* ── Separator ── */
+.sds-nav__separator {
+  height: 1px;
+  background: var(--color-neutral-20);
+  margin: var(--spacing-1) var(--spacing-3);
+  flex-shrink: 0;
+}
+.sds-nav--horizontal .sds-nav__separator {
+  width: 1px;
+  height: 24px;
+  margin: 0 var(--spacing-2);
+}
+/* ── Dark mode ── */
+[data-theme="dark"] .sds-nav__header {
+  border-bottom-color: var(--border-interactive-color);
+}
+[data-theme="dark"] .sds-nav__footer {
+  border-top-color: var(--border-interactive-color);
+}
+[data-theme="dark"] .sds-nav__separator {
+  background: var(--border-interactive-color);
+}
+
+/* ── List semantics ────────────────────────────────────────────────────────────
+   SDS renders the nav as a real <ul> of <li>, which KDLS did not: it laid the items
+   out as bare elements. The list is the correct structure — a screen reader announces
+   "list, 5 items" and gives the visitor a way to move through them — and these rules
+   are what make it look the way KDLS's did. */
+/* The gap between ITEMS lives here, not on the nav.
+   KDLS has no list element: its items are direct children of the nav, so the nav's own
+   16px gap separated them. Here they sit inside a <ul>, so that gap fell between the
+   header, the list and the footer instead, and the list supplied 4px of its own —
+   measured 4px between two adjacent items where KDLS has 16. Vertical was worse: KDLS
+   stacks its rows flush and here every row gained 4px it never had. */
+.sds-nav__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  gap: var(--spacing-4);
+}
+
+/* The items live on the list, so the list is what has to wrap — putting it on .sds-nav
+   changed nothing, and five items still measured 448px inside a 375px window. */
+.sds-nav--horizontal .sds-nav__list {
+  flex-wrap: wrap;
+  min-width: 0;
+  /* And the items keep their own height. A flex container stretches its children by
+     default, so inside a 56px header the <li> grew to 56 and pulled the row with it — a
+     40px control with a 56px hover box around it. KDLS has no list element here at all;
+     the <ul>/<li> is this port's addition, for the "list, 5 items" a screen reader
+     announces, and it must not change what anything looks like. */
+  align-items: center;
+}
+
+.sds-nav--horizontal .sds-nav__list-item {
+  align-items: center;
+}
+
+.sds-nav--vertical .sds-nav__list {
+  flex-direction: column;
+  /* Flush, as in KDLS: a vertical nav is a list of rows and a gap between them reads as a
+     gap between groups. The rows already have their own padding. */
+  gap: 0;
+}
+
+.sds-nav__list-item {
+  display: flex;
+  min-width: 0;
+}
+
+.sds-nav--vertical .sds-nav__list-item {
+  width: 100%;
+}
+
+/* The separator is a real <hr>, which KDLS draws as a div — so the element's own border has
+   to go before it can be a line. The colour reads --border-static-color rather than
+   --color-neutral-20: the same value today, but this is a border and that is the token for
+   one, so it follows if the border ever stops being neutral-20.
+
+   The horizontal inset stays KDLS's: the base rule insets a vertical nav's line by 12px,
+   and the horizontal variant overrides it anyway. */
+.sds-nav__separator {
+  border: 0;
+  align-self: stretch;
+  background: var(--border-static-color);
+  margin: var(--spacing-1) var(--spacing-3);
+  width: 1px;
+}
+
+.sds-nav--vertical .sds-nav__separator {
+  width: auto;
+  height: 1px;
+  margin: var(--spacing-1) 0;
+  align-self: auto;
+  flex: 1;
+}
+
+/* Native chrome reset.
+   SDS renders these rows as real <button> and <a> elements, which KDLS did not — it used
+   bare <div>s with click handlers. A button brings keyboard activation, focus and the
+   disabled state from the browser, and these lines are the whole price: without them the
+   browser's own button border and background show through the design.
+
+   `width: 100%` was in here and does not belong: a width is layout, not chrome, and the
+   browser supplies no width to reset. KDLS sets it only on a vertical nav, where the row
+   should fill the column. Incondicional, it stretched every horizontal item to the width
+   of its slot, so the hover box was far wider than the label inside it. The same shape of
+   mistake as the ColorPicker's reset erasing a border the design had asked for — a chrome
+   reset names the properties the design is silent about, and nothing else. */
+.sds-nav__item {
+  appearance: none;
+  border: 0;
+  background: none;
+  text-align: left;
+  text-decoration: none;
+}
+
+/* ── Corner radius: the 40px family ───────────────────────────────────────────
+   A row in a menu, a select or a dropdown is 40px tall, which makes it the same control
+   as the Pill and the navButton — so it takes the same four values. Rafael, pointing at
+   the theme bar's own menu: these are reactive, but not in the right way; they should be
+   40px like the navButton and have the radius resolved here.
+
+       height 40px    flat 0    soft 11px    medium 15px    rounded 20px (a capsule)
+       as a fraction  0         0.275        0.375          0.5
+
+   `--radius-sm` was what they had, and it tops out at 16px — so `rounded` drew a rounded
+   rectangle where every other 40px control in the system drew a capsule. See Pill.css for
+   the arithmetic; the numbers are a fraction of the control's own height, which is what
+   keeps the family reading as one thing.
+
+   The bare value is `soft`'s, because an install that never picks a scheme has no
+   attribute at all and falls through to it. */
+[data-radius="flat"] .sds-nav__item { border-radius: 0; }
+[data-radius="soft"] .sds-nav__item { border-radius: 11px; }
+[data-radius="medium"] .sds-nav__item { border-radius: 15px; }
+[data-radius="rounded"] .sds-nav__item { border-radius: var(--radius-full); }

package/components/Nav/nav-variants.js

@@ -0,0 +1,23 @@
+/**
+ * The Nav vocabulary.
+ *
+ * Ported from kdls-design-system v2.5.1 (0f3edf8) components/Nav/Nav.tsx.
+ * `intent` is shared with Menu — the two use the same set, and a nav item that deletes
+ * something should look like a menu item that deletes something.
+ *
+ * Divergence: `primary` is the slot, as it was. The badge a nav item can carry used
+ * variant="primary" in KDLS, which no longer exists as a Badge colour; it is
+ * `scheme-color` here, which is the same thing under its surviving name.
+ */
+export const NAV_ORIENTATIONS = ['horizontal', 'vertical'];
+export const NAV_INTENTS = ['primary', 'neutral', 'error', 'success', 'alert'];
+
+function assertOneOf(label, value, allowed) {
+  if (!allowed.includes(value)) {
+    throw new Error(`Unknown nav ${label}: "${value}". Allowed: ${allowed.join(', ')}`);
+  }
+  return value;
+}
+
+export const assertOrientation = (v) => assertOneOf('orientation', v, NAV_ORIENTATIONS);
+export const assertIntent = (v) => (v === undefined ? v : assertOneOf('intent', v, NAV_INTENTS));

package/components/Nav/nav.marko

@@ -0,0 +1,164 @@
+<!-- sds-nav — ported from kdls-design-system v2.5.1 (0f3edf8) components/Nav/Nav.tsx.
+
+Items arrive as attribute tags, not as nested children:
+
+  <sds-nav orientation="vertical">
+    <@item active href="/">Início</@item>
+    <@item separator/>
+    <@item icon=searchIcon badge="3">Buscar</@item>
+  </sds-nav>
+
+A separator is an item that draws a line instead of a label, rather than a tag of its
+own. Marko groups attribute tags by name, so <@item> and <@separator> would arrive as two
+separate arrays and the order between them would be lost — every separator would sink to
+the bottom of the list. One tag keeps the order the author wrote.
+
+KDLS passed orientation down through a React context that Menu also read. Marko 5 has no
+context, so the parent takes its items as data and renders them itself — see
+`.claude/component-rules.md` §2c, where this is decided once for every compound component
+rather than reinvented per component.
+
+Each item is an <a> when it has an href and a <button> otherwise, which is what decides
+whether it lands in the browser's link list or its button list.
+
+`tooltip`, `tooltipIcon` and `tooltipPosition` are here now that Tooltip is. An item can
+explain itself two ways, as in KDLS: the label itself becomes the trigger, or a separate
+info affordance sits beside it. Tooltip's own touch question is still open and is recorded
+there, not repeated here. -->
+
+import { assertOrientation, assertIntent } from "./nav-variants.js";
+
+class {
+  handleItemClick(item, event) {
+    if (item.disabled) {
+      event.preventDefault();
+      return;
+    }
+    item.onClick?.(event);
+  }
+}
+
+$ {
+  const { orientation = "horizontal", header, footer, class: extraClass = "" } = input;
+  assertOrientation(orientation);
+
+  const renderable = (value) => (value && value.renderBody) || value;
+
+  // Attribute tags arrive as a single object when used once and an array when repeated.
+  const asList = (value) => (value === undefined ? [] : [].concat(value));
+  const items = asList(input.item);
+
+  for (const item of items) assertIntent(item.intent);
+
+  // Marko camel-cases a hyphenated attribute on a custom tag, so both spellings arrive
+  // and a consumer should not have to know which.
+  const ariaLabel = input["aria-label"] ?? input.ariaLabel ?? null;
+
+  const classes = ["sds-nav", `sds-nav--${orientation}`, extraClass].filter(Boolean).join(" ");
+
+  const classFor = (item) => [
+    "sds-nav__item",
+    item.active ? "sds-nav__item--active" : "",
+    item.disabled ? "sds-nav__item--disabled" : "",
+    item.intent ? `sds-nav__item--${item.intent}` : "",
+    item.class ?? "",
+  ].filter(Boolean).join(" ");
+}
+
+<nav class=classes aria-label=ariaLabel>
+  <if(header)>
+    <div class="sds-nav__header"><${renderable(header)}/></div>
+  </if>
+
+  <ul class="sds-nav__list">
+    <for|entry| of=items>
+      <li class="sds-nav__list-item">
+        <if(entry.separator)>
+          <hr class="sds-nav__separator"/>
+        </if>
+        <else>
+          <macro|{ }| name="content">
+            <if(entry.icon)>
+              <span class="sds-nav__item-icon" aria-hidden="true">
+                <sds-icon><${renderable(entry.icon)}/></sds-icon>
+              </span>
+            </if>
+            <if(entry.tooltip && !entry.tooltipIcon)>
+              <sds-tooltip content=entry.tooltip placement=(entry.tooltipPosition ?? "top")>
+                <span class="sds-nav__item-label"><${entry.renderBody}/></span>
+              </sds-tooltip>
+            </if>
+            <else>
+              <span class="sds-nav__item-label"><${entry.renderBody}/></span>
+            </else>
+            <if(entry.tooltip && entry.tooltipIcon)>
+              <span class="sds-nav__item-tooltip-icon">
+                <sds-tooltip content=entry.tooltip placement=(entry.tooltipPosition ?? "top")/>
+              </span>
+            </if>
+            <if(entry.badge)>
+              <sds-badge label=entry.badge variant="scheme-color" appearance="tone-50" size="sm"/>
+            </if>
+          </macro>
+
+          <if(entry.href)>
+            <a
+              class=classFor(entry)
+              href=(entry.disabled ? null : entry.href)
+              target=(entry.targetBlank ? "_blank" : null)
+              rel=(entry.targetBlank ? "noopener noreferrer" : null)
+              aria-disabled=(entry.disabled ? "true" : null)
+              aria-current=(entry.active ? "page" : null)
+              on-click("handleItemClick", entry)
+            >
+              <content/>
+            </a>
+          </if>
+          <else-if(entry.onClick)>
+            <button
+              type="button"
+              class=classFor(entry)
+              disabled=(entry.disabled || null)
+              aria-current=(entry.active ? "page" : null)
+              on-click("handleItemClick", entry)
+            >
+              <content/>
+            </button>
+          </else-if>
+          <else-if(entry.custom)>
+            <!-- The item is already a control — a Menu, most often. KDLS does not wrap
+                 those at all: its Header renders <Menu> as a direct child of <Nav>, with
+                 no Nav.Item around it. Wrapping added a second box with its own padding,
+                 so a 40px trigger sat inside a 56px row and the hover area was bigger
+                 than the thing you were pointing at.
+
+                 The <li> stays, because the list semantics are this port's addition and
+                 must not change what anything looks like: it carries no padding of its
+                 own, so it is transparent to layout. -->
+            <content/>
+          </else-if>
+          <else>
+            <!-- Divergence: an item that neither navigates nor acts is not a control.
+                 KDLS makes every item without an href a <button>, and that button is
+                 empty of behaviour — nothing to click, but a tab stop, a hover state and
+                 a focus ring all the same. Worse where the item holds a control of its
+                 own: the Header puts an sds-menu in one, so a <button> ended up inside a
+                 <button>, which is invalid HTML the browser silently rearranges, and it
+                 drew a second hover area around the first. Rafael saw the outer one. -->
+            <div
+              class=classFor(entry)
+              aria-current=(entry.active ? "page" : null)
+              aria-disabled=(entry.disabled ? "true" : null)
+            >
+              <content/>
+            </div>
+          </else>
+        </else>
+      </li>
+    </for>
+  </ul>
+
+  <if(footer)>
+    <div class="sds-nav__footer"><${renderable(footer)}/></div>
+  </if>
+</nav>

package/components/Notification/Notification.css

@@ -0,0 +1,78 @@
+/* SDS Notification.
+   Ported from kdls-design-system v2.5.1 (0f3edf8) components/Notification/Notification.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-notification--primary
+ */.sds-notification {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-family-base);
+  font-weight: var(--font-weight-semibold);
+  white-space: nowrap;
+  user-select: none;
+  flex-shrink: 0;
+}
+/* ── Fill: primary ── */
+.sds-notification--primary {
+  background: var(--color-primary-50);
+  color: var(--color-on-primary);
+}
+/* ── Fill: neutral ── */
+.sds-notification--neutral {
+  background-color: var(--color-neutral-80);
+  color: var(--color-white);
+}
+/* ── Fill: error ── */
+.sds-notification--error {
+  background-color: var(--color-error-50);
+  color: var(--color-white);
+}
+/* ── Fill: alert ── */
+.sds-notification--alert {
+  background-color: var(--color-alert-50);
+  color: var(--color-white);
+}
+/* ── Fill: success ── */
+.sds-notification--success {
+  background-color: var(--color-success-50);
+  color: var(--color-white);
+}
+/* ── Dot (size 8) ── */
+.sds-notification--dot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-full);
+}
+/* ── Size 16 ── */
+.sds-notification--16 {
+  height: 16px;
+  min-width: 16px;
+  padding: 0 var(--spacing-1);
+  border-radius: var(--radius-full);
+  font-size: 10px;
+  line-height: var(--lh-label-sm);
+}
+/* ── Size 20 ── */
+.sds-notification--20 {
+  height: 20px;
+  min-width: 20px;
+  padding: 0 5px;
+  border-radius: var(--radius-full);
+  font-size: 11px;
+  line-height: var(--lh-body-sm);
+}
+/* ── Size 24 ── */
+.sds-notification--24 {
+  height: 24px;
+  min-width: 24px;
+  padding: 0 6px;
+  border-radius: var(--radius-full);
+  font-size: 12px;
+  line-height: var(--lh-body-sm);
+}
+/* ── Variant: square (fixed radius proportional to size) ── */
+.sds-notification--16.sds-notification--square { border-radius: 4px; }
+.sds-notification--20.sds-notification--square { border-radius: 6px; }
+.sds-notification--24.sds-notification--square { border-radius: 8px; }

package/components/Notification/notification-variants.js

@@ -0,0 +1,30 @@
+/**
+ * The Notification vocabulary.
+ *
+ * Ported from kdls-design-system v2.5.1 (0f3edf8) components/Notification/Notification.tsx.
+ * Divergence: none. `primary` was already the slot.
+ */
+export const NOTIFICATION_SIZES = [8, 16, 20, 24];
+export const NOTIFICATION_VARIANTS = ['primary', 'neutral', 'error', 'alert', 'success'];
+export const NOTIFICATION_SHAPES = ['circle', 'square'];
+
+function assertOneOf(label, value, allowed) {
+  if (!allowed.includes(value)) {
+    throw new Error(`Unknown notification ${label}: "${value}". Allowed: ${allowed.join(', ')}`);
+  }
+  return value;
+}
+
+export const assertNotificationSize = (v) => assertOneOf('size', v, NOTIFICATION_SIZES);
+export const assertNotificationVariant = (v) => assertOneOf('variant', v, NOTIFICATION_VARIANTS);
+export const assertNotificationShape = (v) => assertOneOf('shape', v, NOTIFICATION_SHAPES);
+
+/**
+ * What the badge reads out. Undefined when there is no count — a dot carries no number,
+ * and a badge that shows nothing should not announce anything either.
+ */
+export function notificationLabel({ count, max = 99, showPlus = false }) {
+  if (count === undefined) return '';
+  if (count > max) return `+${max}`;
+  return showPlus ? `+${count}` : String(count);
+}

package/components/Notification/notification.marko

@@ -0,0 +1,55 @@
+<!-- sds-notification — ported from kdls-design-system v2.5.1 (0f3edf8)
+components/Notification/Notification.tsx.
+
+A count badge. At size 8 it is a bare dot with no number, and is hidden from assistive
+tech: the thing it marks carries the meaning, and "notification" announced next to it
+says nothing a screen reader user can act on.
+
+Divergences: the [data-color-scheme="lya"] override on the primary variant is gone with
+the scheme; primary reads the slot, as it already did. Validation throws on an unknown
+size, variant or shape rather than rendering an unstyled badge. -->
+
+import { assertNotificationSize, assertNotificationVariant, assertNotificationShape,
+  notificationLabel } from "./notification-variants.js";
+
+$ {
+  const {
+    size = 20,
+    variant = "primary",
+    shape = "circle",
+    count,
+    max = 99,
+    showPlus = false,
+    showZero = false,
+    class: extraClass = "",
+  } = input;
+
+  assertNotificationSize(size);
+  assertNotificationVariant(variant);
+  assertNotificationShape(shape);
+
+  // At zero the badge disappears unless the caller says otherwise — a "0" badge is
+  // usually noise, but a counter that must show it exists is a real case.
+  const hidden = size !== 8 && count === 0 && !showZero;
+
+  const label = notificationLabel({ count, max, showPlus });
+
+  const classes = [
+    "sds-notification",
+    size === 8 ? "sds-notification--dot" : `sds-notification--${size}`,
+    `sds-notification--${variant}`,
+    shape === "square" && size !== 8 ? "sds-notification--square" : "",
+    extraClass,
+  ].filter(Boolean).join(" ");
+}
+
+<if(!hidden)>
+  <if(size === 8)>
+    <span class=classes aria-hidden="true"/>
+  </if>
+  <else>
+    <span class=classes aria-label=(count !== undefined ? `${label} notificações` : null)>
+      ${label}
+    </span>
+  </else>
+</if>