@kenlo/sds-design-system 0.9.9

package/components/Alert/Alert.css

@@ -0,0 +1,104 @@
+/* SDS Alert.
+   Ported from kdls-design-system v2.5.1 (0f3edf8) components/Alert/Alert.css
+   by scripts/port-css.mjs. Divergences beyond the mechanical rename are noted inline.
+ */.sds-alert {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  border-radius: var(--radius-md);
+}
+.sds-alert__content {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  padding: var(--spacing-3) var(--spacing-4);
+}
+.sds-alert--hug  { width: fit-content; }
+.sds-alert--fill { width: 100%; }
+.sds-alert__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  font-size: 24px;
+}
+.sds-alert__message {
+  flex: 1;
+}
+.sds-alert__action {
+  margin-left: var(--spacing-1);
+  flex-shrink: 0;
+}
+.sds-alert__dismiss {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  padding-right: var(--spacing-2);
+}
+.sds-alert--sm .sds-alert__dismiss {
+  padding-top: var(--spacing-1);
+  padding-bottom: var(--spacing-1);
+  padding-right: var(--spacing-1);
+}
+/* Alert variants — icon inherits the same text color as the container.
+
+   The background is `--surface-<family>`, not `--color-<family>-10`. They are the same
+   thing in the light theme; in the dark theme the surface stops one step short of the
+   palette's darkest tone, because the darkest tone next to a near-black page reads as a
+   hole rather than a tinted panel. The reasoning is at the token, in foundations. */
+.sds-alert--success {
+  background: var(--surface-success);
+  color: var(--color-success-10-on);
+}
+.sds-alert--alert {
+  background: var(--surface-alert);
+  color: var(--color-alert-10-on);
+}
+.sds-alert--error {
+  background: var(--surface-error);
+  color: var(--color-error-10-on);
+}
+.sds-alert--info {
+  background: var(--surface-info);
+  color: var(--color-primary-90-solid);
+}
+/* Neutral variant (fallback) */
+.sds-alert--neutral {
+  background: var(--surface-neutral);
+  color: var(--color-neutral-10-on);
+}
+/* ── Md size — icon 20px ── */
+.sds-alert--md .sds-alert__icon,
+.sds-alert--md .sds-alert__icon .sds-icon,
+.sds-alert--md .sds-alert__icon svg {
+  width: 20px;
+  height: 20px;
+  font-size: 20px;
+  line-height: 1;
+}
+/* ── Small size ── */
+.sds-alert--sm .sds-alert__content {
+  min-height: unset;
+  padding: var(--spacing-2) var(--spacing-3);
+}
+.sds-alert--sm .sds-alert__icon {
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+}
+.sds-alert--neutral.sds-alert--bordered { border: 1px solid var(--color-neutral-30); }
+.sds-alert--success.sds-alert--bordered { border: 1px solid var(--color-success-30); }
+.sds-alert--alert.sds-alert--bordered   { border: 1px solid var(--color-alert-30);   }
+.sds-alert--error.sds-alert--bordered   { border: 1px solid var(--color-error-30);   }
+.sds-alert--info.sds-alert--bordered    { border: 1px solid var(--color-primary-30-solid); }
+/* ── Dark mode ── */
+
+/* A neutral alert paints itself in the same neutral the page uses, so on a neutral ground
+   the two merge and the alert reads as loose text. The other variants carry their own
+   hue and separate themselves. */
+.sds-alert--neutral:not(.sds-alert--bordered) {
+  border: 1px solid var(--border-static-color);
+}

package/components/Alert/alert-variants.js

@@ -0,0 +1,35 @@
+/**
+ * The Alert vocabulary.
+ * Ported from kdls-design-system v2.5.1 (0f3edf8) components/Alert/Alert.tsx.
+ */
+export const ALERT_VARIANTS = ['info', 'success', 'alert', 'error', 'neutral'];
+export const ALERT_SIZES = ['sm', 'md', 'lg'];
+export const ALERT_WIDTHS = ['hug', 'fill'];
+
+/** The Text variant each alert size reads at, so the scale lives in one place. */
+export const ALERT_TEXT_VARIANT = { lg: 'bodyMd', md: 'bodySm', sm: 'labelRegular' };
+
+function assertOneOf(label, value, allowed) {
+  if (!allowed.includes(value)) {
+    throw new Error(`Unknown alert ${label}: "${value}". Allowed: ${allowed.join(', ')}`);
+  }
+  return value;
+}
+
+export const assertAlertVariant = (v) => assertOneOf('variant', v, ALERT_VARIANTS);
+export const assertAlertSize = (v) => assertOneOf('size', v, ALERT_SIZES);
+export const assertAlertWidth = (v) => assertOneOf('width', v, ALERT_WIDTHS);
+
+/**
+ * Which live region an alert belongs in.
+ *
+ * KDLS put role="alert" on every one. That is right for an error — it interrupts a screen
+ * reader immediately — and wrong for an informational notice, which then also interrupts.
+ * Anything that is not a problem is announced politely instead, when the user is between
+ * things.
+ */
+export function liveRegionFor(variant) {
+  return variant === 'error' || variant === 'alert'
+    ? { role: 'alert', 'aria-live': 'assertive' }
+    : { role: 'status', 'aria-live': 'polite' };
+}

package/components/Alert/alert.marko

@@ -0,0 +1,94 @@
+<!-- sds-alert — ported from kdls-design-system v2.5.1 (0f3edf8) components/Alert/Alert.tsx.
+
+No state. KDLS held useState for one thing: a spinner on the action button while an async
+onAction resolved. That is the Badge's case again — the base component stays markup and
+the caller, which is the thing that knows about its own async work, drives `actionLoading`
+from outside.
+
+Divergences:
+
+Only an error or a warning takes role="alert". KDLS put it on every variant, so an
+informational notice interrupted a screen reader mid-sentence exactly as an error does.
+Anything that is not a problem is announced politely instead — see liveRegionFor.
+
+`actionDisabledTooltip` and `actionDisabledTooltipPosition` are here now that Tooltip is.
+They reach sds-button, which does the wrapping — a disabled button dispatches no mouse
+events, so the tooltip has to sit outside it. -->
+
+import { assertPlacement } from "../Floating/floating-position.js";
+import { assertAlertVariant, assertAlertSize, assertAlertWidth, ALERT_TEXT_VARIANT,
+  liveRegionFor } from "./alert-variants.js";
+
+$ {
+  const {
+    message,
+    variant = "info",
+    size = "lg",
+    width = "fill",
+    bordered = false,
+    icon,
+    actionLabel,
+    onAction,
+    actionLoading = false,
+    actionDisabled = false,
+    actionDisabledTooltip,
+    actionDisabledTooltipPosition = "top",
+    onDismiss,
+    dismissLabel = "Fechar",
+    class: extraClass = "",
+  } = input;
+
+  assertPlacement(actionDisabledTooltipPosition);
+
+  if (!message) throw new Error("sds-alert needs a `message`.");
+  assertAlertVariant(variant);
+  assertAlertSize(size);
+  assertAlertWidth(width);
+
+  const renderable = (value) => (value && value.renderBody) || value;
+  const live = liveRegionFor(variant);
+
+  const classes = [
+    "sds-alert",
+    `sds-alert--${variant}`,
+    size !== "lg" ? `sds-alert--${size}` : "",
+    `sds-alert--${width}`,
+    bordered ? "sds-alert--bordered" : "",
+    extraClass,
+  ].filter(Boolean).join(" ");
+}
+
+<div class=classes role=live.role aria-live=live["aria-live"]>
+  <div class="sds-alert__content">
+    <if(icon)>
+      <span class="sds-alert__icon" aria-hidden="true">
+        <sds-icon size=(size === "sm" ? "sm" : "md")><${renderable(icon)}/></sds-icon>
+      </span>
+    </if>
+
+    <sds-text as="span" class="sds-alert__message" color="inherit" variant=ALERT_TEXT_VARIANT[size]>
+      ${message}
+    </sds-text>
+
+    <if(actionLabel)>
+      <sds-button
+        variant="link"
+        label=actionLabel
+        onClick=onAction
+        isLoading=actionLoading
+        disabled=actionDisabled
+        disabledTooltip=actionDisabledTooltip
+        disabledTooltipPosition=actionDisabledTooltipPosition
+        class="sds-alert__action"
+      />
+    </if>
+  </div>
+
+  <if(onDismiss)>
+    <div class="sds-alert__dismiss">
+      <sds-icon-button variant="neutral" aria-label=dismissLabel onClick=onDismiss>
+        <@icon><fluent-dismiss-regular/></@icon>
+      </sds-icon-button>
+    </div>
+  </if>
+</div>

package/components/AttachmentList/AttachmentList.css

@@ -0,0 +1,92 @@
+/* SDS AttachmentList.
+   Ported from kdls-design-system v2.5.1 (0f3edf8) components/AttachmentList/AttachmentList.css
+   by scripts/port-css.mjs. Divergences beyond the mechanical rename are noted inline.
+ *//* ── AttachmentList ─────────────────────────────────────────────────────────
+   List of uploaded/attached files with icon, name+meta, and action buttons.
+   BEM root: .sds-attachment-list / .sds-attachment-row
+   ─────────────────────────────────────────────────────────────────────────── */
+
+/* Divergence from KDLS: the surface is declared.
+
+   KDLS draws the stroke and the radius and leaves the fill to whatever is behind, which
+   works only while the thing behind is the component surface. Dropped on a page ground,
+   or on a stage with an alternate background, the list takes that colour and the frame
+   reads as an empty outline rather than a panel. A bordered container states its own
+   fill. */
+.sds-attachment-list {
+  width: 100%;
+  background: var(--component-bg-color);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+/* The frame is a choice, not a fixture: a bordered container separates itself from a
+   ground of its own colour, and on a different ground the stroke is one line of noise.
+   Same rule the Card and the Accordion follow. */
+.sds-attachment-list--bordered {
+  border: 1px solid var(--border-static-color);
+}
+/* ── Row ── */
+.sds-attachment-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  padding: var(--spacing-3) var(--spacing-4);
+  min-height: var(--spacing-16);
+}
+/* The divider. It is written against the <li>, not the row: KDLS stacks bare divs, so
+   `.row + .row` was adjacent there — here every row is wrapped in its own list item, and
+   two rows are never siblings. The selector matched nothing and the lines ran together. */
+.sds-attachment-list > li + li > .sds-attachment-row {
+  border-top: 1px solid var(--border-static-color);
+}
+/* ── File type icon ── */
+.sds-attachment-row__icon {
+  display: inline-flex;
+  font-size: 24px;
+  flex-shrink: 0;
+}
+/* ── File info ── */
+.sds-attachment-row__info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-0-5);
+  min-width: 0;
+}
+.sds-attachment-row__name {
+  min-width: 200px;
+}
+.sds-attachment-row__name--truncate {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+/* Tooltip.wrapper is inline-flex by default (shrinks to content) — force it to take up
+   the available width so the name truncates correctly inside it */
+.sds-attachment-row__name-tooltip {
+  display: block;
+  width: 100%;
+  min-width: 0;
+}
+/* No real overflow on the name — turns off the tooltip hover via CSS (without unmounting) */
+.sds-attachment-row__name-tooltip--inactive {
+  pointer-events: none;
+  cursor: default;
+}
+/* ── Actions ── */
+.sds-attachment-row__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  flex-shrink: 0;
+}
+
+/* The list is a <ul>, which brings bullets and indentation the design does not want —
+   these four lines are the whole price of a screen reader saying "list, 4 items". */
+.sds-attachment-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}

package/components/AttachmentList/attachment-list.marko

@@ -0,0 +1,51 @@
+<!-- sds-attachment-list — ported from kdls-design-system v2.5.1 (0f3edf8)
+     components/AttachmentList/AttachmentList.tsx.
+
+     A list of files, each an sds-attachment-row. It holds no state of its own: the handlers
+     are the caller's and it only binds the document's id into them.
+
+     Divergence: it is a <ul> of <li>, not a stack of divs. A screen reader then says "list,
+     4 items" and can move between them; KDLS's divs are four unrelated rows, and a visitor
+     who cannot see the page has no way to know how many attachments there are or when the
+     list ends. -->
+
+$ {
+  const {
+    documents = [],
+    onDelete,
+    onDownload,
+    onViewDetails,
+    truncateName = true,
+    // Default true: the list draws a surface, and a bordered container is what it has
+    // always looked like. A caller dropping it on a different ground turns it off.
+    bordered = true,
+    label = "Anexos",
+    class: extraClass = "",
+  } = input;
+
+  const classes = [
+    "sds-attachment-list",
+    bordered ? "sds-attachment-list--bordered" : "",
+    extraClass,
+  ].filter(Boolean).join(" ");
+}
+
+<ul class=classes aria-label=label>
+  <for|doc| of=documents>
+    <li key=doc.id>
+      <sds-attachment-row
+        name=doc.name
+        icon=doc.icon
+        meta=doc.meta
+        badge=doc.badge
+        truncateName=truncateName
+        onDelete=(onDelete ? () => onDelete(doc.id) : undefined)
+        onDownload=(onDownload ? () => onDownload(doc.id) : undefined)
+        onViewDetails=(onViewDetails ? () => onViewDetails(doc.id) : undefined)
+        disabledDelete=doc.disabledDelete
+        disabledDownload=doc.disabledDownload
+        disabledViewDetails=doc.disabledViewDetails
+      />
+    </li>
+  </for>
+</ul>

package/components/AttachmentList/attachment-row.marko

@@ -0,0 +1,167 @@
+<!-- sds-attachment-row — ported from kdls-design-system v2.5.1 (0f3edf8)
+     components/AttachmentList/AttachmentList.tsx.
+
+     One file in a list: an icon, a name, a line of metadata, and up to three actions.
+
+     Divergences:
+
+     The name's tooltip only exists when the name is actually cut off. KDLS renders it
+     always and hides it with a class when it is not needed — which leaves a `cursor: help`
+     and a tooltip trigger on every row whose name fits, promising an explanation there is
+     no need for. The measurement is the same ResizeObserver; what changes is that the
+     result decides whether to render rather than how to style.
+
+     `onDelete` and `onDownload` follow a promise when the caller returns one, as KDLS
+     does, which is what lets a row show its own spinner without being told to. -->
+
+import deleteIcon from "../../icons/generated/fluent-delete-regular.marko";
+import downloadIcon from "../../icons/generated/fluent-arrow-download-regular.marko";
+import detailsIcon from "../../icons/generated/fluent-chevron-right-regular.marko";
+
+class {
+  onCreate() {
+    this.state = { deleting: false, downloading: false, truncated: false };
+  }
+
+  /**
+   * Is the name actually cut off? Only then is it worth a tooltip.
+   *
+   * This used to live entirely inside `onMount`, which made it a one-time answer to a
+   * question that changes: renaming a file left the tooltip showing the old name, and
+   * turning `truncateName` on after mount applied the ellipsis with no tooltip behind it,
+   * so the cut-off name became unreadable with no way to see it.
+   */
+  measure() {
+    const name = this.getEl("name");
+    if (!name) return;
+    this.state.truncated = this.input.truncateName !== false
+      && name.scrollWidth > name.clientWidth;
+  }
+
+  onMount() {
+    this.measure();
+    this.watched = this.input.name;
+    // The measurement above is the answer for a row that never changes width. The observer
+    // keeps it true when the column is resized — and is guarded because it does not exist
+    // in jsdom, or in a browser old enough to matter to nobody but which would otherwise
+    // take the whole row down with it.
+    if (typeof ResizeObserver === "undefined") return;
+    const name = this.getEl("name");
+    if (!name) return;
+    this.observer = new ResizeObserver(() => this.measure());
+    this.observer.observe(name);
+  }
+
+  onUpdate() {
+    // Re-measure when the thing being measured changed. Guarded on the name so that the
+    // state write inside `measure` does not re-enter this on every render.
+    if (this.watched === this.input.name) return;
+    this.watched = this.input.name;
+    this.measure();
+  }
+
+  onDestroy() {
+    this.observer?.disconnect();
+  }
+
+  async run(which, handler) {
+    const result = handler?.();
+    if (!(result instanceof Promise)) return;
+    this.state[which] = true;
+    try {
+      await result;
+    } finally {
+      this.state[which] = false;
+    }
+  }
+
+  handleDelete() { return this.run("deleting", this.input.onDelete); }
+  handleDownload() { return this.run("downloading", this.input.onDownload); }
+}
+
+$ {
+  const {
+    name,
+    icon,
+    meta,
+    badge,
+    onDelete,
+    onDownload,
+    onViewDetails,
+    disabledDelete = false,
+    disabledDownload = false,
+    disabledViewDetails = false,
+    truncateName = true,
+    deleteLabel = "Excluir",
+    downloadLabel = "Baixar",
+    detailsLabel = "Ver detalhes",
+    class: extraClass = "",
+  } = input;
+
+  if (!name) throw new Error("sds-attachment-row needs a `name`.");
+
+  const renderable = (value) => (value && value.renderBody) || value;
+  const hasActions = Boolean(badge || onDelete || onDownload || onViewDetails);
+
+  const nameClass = [
+    "sds-attachment-row__name",
+    truncateName ? "sds-attachment-row__name--truncate" : "",
+  ].filter(Boolean).join(" ");
+}
+
+<div class=`sds-attachment-row ${extraClass}`.trim()>
+  <if(icon)>
+    <span class="sds-attachment-row__icon" aria-hidden="true">
+      <sds-icon><${renderable(icon)}/></sds-icon>
+    </span>
+  </if>
+
+  <div class="sds-attachment-row__info">
+    <macro|{ }| name="theName">
+      <sds-text key="name" as="span" variant="bodyMd" class=nameClass>${name}</sds-text>
+    </macro>
+
+    <if(truncateName && state.truncated)>
+      <sds-tooltip content=name class="sds-attachment-row__name-tooltip">
+        <theName/>
+      </sds-tooltip>
+    </if>
+    <else>
+      <theName/>
+    </else>
+
+    <if(meta)>
+      <sds-text as="span" variant="bodySm" class="sds-attachment-row__meta">${meta}</sds-text>
+    </if>
+  </div>
+
+  <if(hasActions)>
+    <div class="sds-attachment-row__actions">
+      <if(badge)>
+        // A badge arrives two ways: as content to render, or as a plain status word like
+        // "Enviado". A string handed to `<${...}/>` is read as a TAG NAME, so the word
+        // vanished with no error — the same guard Popover and Table already apply.
+        <if(typeof badge === "string")>${badge}</if>
+        <else><${renderable(badge)}/></else>
+      </if>
+      <if(onDelete)>
+        <sds-icon-button aria-label=deleteLabel onClick=() => component.handleDelete()
+          isLoading=state.deleting disabled=disabledDelete>
+          <@icon><${deleteIcon}/></@icon>
+        </sds-icon-button>
+      </if>
+      <if(onDownload)>
+        <sds-icon-button aria-label=downloadLabel onClick=() => component.handleDownload()
+          isLoading=state.downloading disabled=disabledDownload>
+          <@icon><${downloadIcon}/></@icon>
+        </sds-icon-button>
+      </if>
+      <if(onViewDetails)>
+        <sds-icon-button variant="neutral" aria-label=detailsLabel onClick=onViewDetails
+          disabled=disabledViewDetails>
+          <@icon><${detailsIcon}/></@icon>
+        </sds-icon-button>
+      </if>
+    </div>
+  </if>
+</div>

package/components/Avatar/Avatar.css

@@ -0,0 +1,110 @@
+/* SDS Avatar.
+   Ported from kdls-design-system v2.5.1 (0f3edf8) components/Avatar/Avatar.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-avatar--clickable
+     [data-color-scheme="lya"] .sds-avatar--clickable::before
+     [data-color-scheme="lya"] .sds-avatar--clickable:hover
+     [data-color-scheme="lya"] .sds-avatar--clickable:hover::before
+     [data-color-scheme="lya"] .sds-avatar--clickable:active
+     [data-color-scheme="lya"] .sds-avatar--clickable:active::before
+     [data-color-scheme="lya"] .sds-avatar__placeholder
+ */.sds-avatar {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-full);
+  overflow: visible;
+  flex-shrink: 0;
+  width: var(--avatar-size, 40px);
+  height: var(--avatar-size, 40px);
+  /* The root is a <button> whenever it has a click handler, and SDS ships no element
+     reset — so a clickable avatar was wearing the browser's button chrome: a 2px outset
+     border, a #efefef ButtonFace ground and 1px/6px of padding, measured in Chrome. That
+     squeezes the photo inside the circle and paints a grey ring around it. IconButton and
+     Badge already reset this; Avatar did not. */
+  appearance: none;
+  border: none;
+  padding: 0;
+  background: transparent;
+  font: inherit;
+  color: inherit;
+}
+/* ── Sizes ── */
+.sds-avatar--sm { --avatar-size: var(--spacing-10); }
+.sds-avatar--md { --avatar-size: var(--spacing-12); }
+.sds-avatar--lg { --avatar-size: var(--spacing-14); }
+.sds-avatar__image {
+  position: relative; /* stays above the lya gradient ring ::before (position:absolute
+     always stacks above static content, even when it comes first in the DOM) */
+  width: 100%;
+  height: 100%;
+  border-radius: var(--radius-full);
+  object-fit: cover;
+  display: block;
+}
+.sds-avatar__placeholder {
+  position: relative; /* same reason as __image above */
+  width: 100%;
+  height: 100%;
+  border-radius: var(--radius-full);
+  background: var(--color-primary-50);
+  color: var(--color-on-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-family-base);
+  font-weight: var(--font-weight-semibold);
+  font-size: calc(var(--avatar-size) * 0.46);   /* proporcional ao size */
+  user-select: none;
+}
+/* ── Interactive states (onClick provided) ── */
+.sds-avatar--clickable {
+  cursor: pointer;
+  outline: none;
+  transition: filter 120ms ease, box-shadow 120ms ease;
+}
+.sds-avatar--clickable:hover {
+  filter: brightness(0.92);
+  box-shadow: 0 0 0 2px var(--component-bg-color), 0 0 0 4px var(--color-primary-40-solid);
+}
+.sds-avatar--clickable:active {
+  filter: brightness(0.78);
+  box-shadow: 0 0 0 2px var(--component-bg-color), 0 0 0 4px var(--color-primary-50-solid);
+}
+.sds-avatar--clickable:focus-visible {
+  box-shadow: var(--focus-ring);
+}
+/* Eleven rules used to sit here (and in ten other stylesheets) guarding on
+   `[data-color-scheme="neutral"][data-theme="dark"]`, repainting the text on a filled
+   primary surface. Not one of them could ever match: `neutral` is the install default, and
+   a value equal to the default is written by REMOVING the attribute, never by setting it.
+   They were the patch for `--color-on-primary` being a fixed white while
+   `--color-primary-50` inverts — which is fixed at the token now, so the patch is gone. */
+/* ── Image and fallback, without JavaScript ────────────────────────────────────
+   KDLS tracked a broken image in component state: an onError handler set imgFailed and
+   the initials rendered instead. That is one serialised component per avatar — and an
+   avatar list is exactly the place that repeats.
+
+   Both are rendered here instead, the initials underneath and the image over them. A
+   broken <img> paints nothing, so the initials show through on their own. No handler, no
+   state, and it works before any JavaScript arrives — which is also when a slow image is
+   most likely to be missing. */
+.sds-avatar__placeholder {
+  position: absolute;
+  inset: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sds-avatar__image {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: inherit;
+}

package/components/Avatar/avatar-variants.js

@@ -0,0 +1,12 @@
+/**
+ * The Avatar vocabulary.
+ * Ported from kdls-design-system v2.5.1 (0f3edf8) components/Avatar/Avatar.tsx.
+ */
+export const AVATAR_SIZES = ['sm', 'md', 'lg'];
+
+export function assertAvatarSize(size) {
+  if (!AVATAR_SIZES.includes(size)) {
+    throw new Error(`Unknown avatar size: "${size}". Allowed: ${AVATAR_SIZES.join(', ')}`);
+  }
+  return size;
+}