@goldencomm/create-baseline 0.0.1 → 0.1.0

package/templates/shopify/snippets/accordion.liquid

@@ -0,0 +1,169 @@
+{% doc %}
+  Baseline Accordion as a snippet (spec: components/accordion/spec.md): a list of native <details> items (the
+  `accordion-item` snippet, or Accordion item theme blocks). Items sharing a `name` are one-at-a-time, upstream's default,
+  with no JavaScript; the height animates where the browser can (::details-content with interpolate-size).
+
+  One look per site (ADR-0031): the theme carries only the project's looks, generated into this file by
+  tokens/looks.mjs; the first is the default. The core theme carries all three for the kitchen sink.
+
+  @param {string} items - the items, captured from accordion-item snippets or content_for 'blocks'
+  @param {string} [variant] - one of the installed looks (default, contained, split in core); defaults to the project's
+  @param {string} [class] - extra classes
+  @param {string} [attrs] - extra attributes on the root (block.shopify_attributes)
+
+  @example
+  {%- capture items -%}
+    {% render 'accordion-item', title: 'Shipping', content: shipping_html, name: 'faq', open: true %}
+    {% render 'accordion-item', title: 'Returns', content: returns_html, name: 'faq' %}
+  {%- endcapture -%}
+  {% render 'accordion', items: items %}
+{% enddoc %}
+
+{%- liquid
+  # baseline:looks (generated by tokens/looks.mjs, ADR-0031: the installed looks, the project's first)
+  assign looks = 'default,contained,split' | split: ','
+  # end baseline:looks
+  assign v = variant | default: looks.first
+  unless looks contains v
+    assign v = looks.first
+  endunless
+  assign classes = 'bl-accordion bl-accordion--' | append: v
+  if class
+    assign classes = classes | append: ' ' | append: class
+  endif
+-%}
+<div class="{{ classes }}" data-slot="accordion" data-variant="{{ v }}" {{ attrs }}>
+  {{- items -}}
+</div>
+
+{% stylesheet %}
+  /* Mirrors registry/src/ui/accordion/accordion.tsx. Geometry from the accordion/* tokens; what every look shares is
+     here, the looks below (generated). */
+  .bl-accordion {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+  .bl-accordion__item {
+    margin: 0;
+    interpolate-size: allow-keywords;
+  }
+  .bl-accordion__item::details-content {
+    block-size: 0;
+    overflow-y: clip;
+    transition: block-size 200ms ease-out, content-visibility 200ms allow-discrete;
+  }
+  .bl-accordion__item[open]::details-content {
+    block-size: auto;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .bl-accordion__item::details-content { transition: none; }
+  }
+  .bl-accordion__trigger {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--bl-accordion-trigger-gap);
+    padding: var(--bl-accordion-padding-y) 0;
+    border: 1px solid transparent;
+    border-radius: var(--bl-radius-lg);
+    cursor: pointer;
+    list-style: none;
+    outline: none;
+  }
+  .bl-accordion__trigger::-webkit-details-marker { display: none; }
+  .bl-accordion__trigger::marker { content: ''; }
+  .bl-accordion__trigger:hover .bl-accordion__title { text-decoration: underline; }
+  .bl-accordion__trigger:focus-visible { box-shadow: 0 0 0 var(--bl-control-ring-width) var(--ring); }
+  .bl-accordion__title {
+    flex: 1;
+    margin: 0;
+    font-family: inherit;
+    font-size: var(--bl-accordion-title-font-size);
+    font-weight: var(--bl-accordion-title-font-weight);
+    line-height: var(--bl-accordion-title-line-height);
+    letter-spacing: normal;
+    text-transform: none;
+  }
+  .bl-accordion__icon {
+    flex-shrink: 0;
+    width: var(--bl-accordion-trigger-icon-size);
+    height: var(--bl-accordion-trigger-icon-size);
+    margin-block-start: calc((var(--bl-accordion-title-line-height) - var(--bl-accordion-trigger-icon-size)) / 2);
+    color: var(--muted-foreground);
+  }
+  .bl-accordion__item[open] .bl-accordion__icon--closed,
+  .bl-accordion__item:not([open]) .bl-accordion__icon--open { display: none; }
+  .bl-accordion__content {
+    padding-block-end: var(--bl-accordion-padding-y);
+    font-size: var(--bl-accordion-content-font-size);
+    line-height: var(--bl-accordion-content-line-height);
+  }
+  .bl-accordion__content > * { margin-block: 0; }
+  .bl-accordion__content > :is(p, ul, ol):not(:last-child) { margin-block-end: 1rem; }
+  .bl-accordion__content a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
+  .bl-accordion__content a:hover { color: var(--foreground); }
+
+  /* baseline:looks:start (generated by tokens/looks.mjs from tokens/looks/shopify/accordion-<look>.css; do not edit) */
+  /* accordion, default look (upstream's; registry/src/ui/accordion/accordion.tsx): no box, a rule under every item but the last */
+  .bl-accordion--default > .bl-accordion__item:not(:last-child) { border-bottom: var(--bl-accordion-border-width) solid var(--border); }
+
+  /* accordion, contained look (registry/src/ui/accordion/accordion.contained.tsx): each item a bordered card (card fill,
+     accordion/radius, accordion/padding-x), the cards spaced by accordion/group/gap */
+  .bl-accordion--contained { gap: var(--bl-accordion-group-gap); }
+  .bl-accordion--contained > .bl-accordion__item {
+    padding-inline: var(--bl-accordion-padding-x);
+    border: var(--bl-accordion-border-width) solid var(--border);
+    border-radius: var(--bl-accordion-radius);
+    background-color: var(--card);
+    color: var(--card-foreground);
+  }
+  /* open, then hovered (hover wins): a tint over the card fill, a border and the text colour on the whole card; the title
+     and chevron take the hover colours with the trigger (accordion/{background,border,foreground,icon}-*) */
+  .bl-accordion--contained > .bl-accordion__item[open] {
+    border-color: var(--bl-accordion-border-open);
+    background-image: linear-gradient(var(--bl-accordion-background-open), var(--bl-accordion-background-open));
+    color: var(--bl-accordion-foreground-open);
+  }
+  .bl-accordion--contained > .bl-accordion__item:has(> .bl-accordion__trigger:hover) {
+    border-color: var(--bl-accordion-border-hover);
+    background-image: linear-gradient(var(--bl-accordion-background-hover), var(--bl-accordion-background-hover));
+  }
+  .bl-accordion--contained > .bl-accordion__item > .bl-accordion__trigger:hover { color: var(--bl-accordion-foreground-hover); }
+  .bl-accordion--contained > .bl-accordion__item[open] .bl-accordion__icon { color: var(--bl-accordion-icon-open); }
+  .bl-accordion--contained > .bl-accordion__item > .bl-accordion__trigger:hover .bl-accordion__icon { color: var(--bl-accordion-icon-hover); }
+
+  /* accordion, split look (registry/src/ui/accordion/accordion.split.tsx): each item a bordered card whose header is a
+     bordered box of its own, overlapping the card's edge by the border width, with the content padded below; the cards
+     spaced by accordion/group/gap */
+  .bl-accordion--split { gap: var(--bl-accordion-group-gap); }
+  .bl-accordion--split > .bl-accordion__item {
+    border: var(--bl-accordion-border-width) solid var(--border);
+    border-radius: var(--bl-accordion-radius);
+    background-color: var(--card);
+    color: var(--card-foreground);
+  }
+  .bl-accordion--split .bl-accordion__trigger {
+    margin: calc(var(--bl-accordion-border-width) * -1);
+    padding-inline: var(--bl-accordion-padding-x);
+    border: var(--bl-accordion-border-width) solid var(--border);
+    border-radius: var(--bl-accordion-radius);
+    background-color: var(--card);
+  }
+  .bl-accordion--split .bl-accordion__content { padding: var(--bl-accordion-padding-y) var(--bl-accordion-padding-x); }
+  /* open, then hovered (hover wins): the trigger box alone takes a tint over the card fill, a border and the text colour
+     (accordion/{background,border,foreground,icon}-*) */
+  .bl-accordion--split > .bl-accordion__item[open] > .bl-accordion__trigger {
+    border-color: var(--bl-accordion-border-open);
+    background-image: linear-gradient(var(--bl-accordion-background-open), var(--bl-accordion-background-open));
+    color: var(--bl-accordion-foreground-open);
+  }
+  .bl-accordion--split > .bl-accordion__item > .bl-accordion__trigger:hover {
+    border-color: var(--bl-accordion-border-hover);
+    background-image: linear-gradient(var(--bl-accordion-background-hover), var(--bl-accordion-background-hover));
+    color: var(--bl-accordion-foreground-hover);
+  }
+  .bl-accordion--split > .bl-accordion__item[open] .bl-accordion__icon { color: var(--bl-accordion-icon-open); }
+  .bl-accordion--split > .bl-accordion__item > .bl-accordion__trigger:hover .bl-accordion__icon { color: var(--bl-accordion-icon-hover); }
+  /* baseline:looks:end */
+{% endstylesheet %}

package/templates/shopify/snippets/alert.figma.ts

@@ -0,0 +1,31 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=4356-14021
+// source=platforms/shopify/theme/snippets/alert.liquid
+// component=alert (snippet)
+// Shopify Code Connect template (label "Shopify (Liquid)"): the alert snippet. The icon is a vocabulary name; an action
+// is a captured button snippet passed as `action`.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+const variant = instance.getEnum("Variant", { default: "default", destructive: "destructive" });
+const title = instance.getString("Title");
+const description = instance.getString("Description");
+const showIcon = instance.getBoolean("Show Icon");
+const showTitle = instance.getBoolean("Show Title");
+const showDescription = instance.getBoolean("Show Description");
+const showAction = instance.getBoolean("Show Action");
+const args = [
+  variant !== "default" ? `variant: '${variant}'` : "",
+  showIcon ? `icon: '${variant === "destructive" ? "error" : "info"}'` : "",
+  showTitle ? `title: '${title}'` : "",
+  showDescription ? `description: '${description}'` : "",
+  showAction ? "action: alert_action" : "",
+].filter(Boolean).join(", ");
+
+export default {
+  example: showAction
+    ? figma.code`{%- capture alert_action -%}{% render 'button', label: 'Action', variant: 'outline', size: 'xs' %}{%- endcapture -%}
+{% render 'alert', ${args} %}`
+    : figma.code`{% render 'alert', ${args} %}`,
+  id: "shopify-alert",
+  metadata: { nestable: true },
+};

package/templates/shopify/snippets/alert.liquid

@@ -0,0 +1,104 @@
+{% doc %}
+  Baseline Alert as a snippet (spec: components/alert/spec.md). An inline, persistent callout: an optional icon, title,
+  description and action.
+
+  Success and warning are schemes, not variants: `scheme` adds the scheme class (color-success ...), ADR-0007.
+  An alert rendered with the page is there when it loads, so it is role="status" (announced politely) unless `urgent`.
+
+  @param {string} [title] - the title
+  @param {string} [description] - the description; HTML is allowed (paragraphs, links, form.errors | default_errors)
+  @param {string} [variant] - default | destructive
+  @param {string} [icon] - Baseline system icon name (snippets/icon.liquid)
+  @param {string} [scheme] - success | warning | error
+  @param {boolean} [urgent] - role="alert": interrupts screen readers; for errors that block what the visitor is doing
+  @param {string} [action] - ready markup for the action beside the text, e.g. a captured button snippet
+  @param {string} [class] - extra classes
+
+  @example
+  {%- capture errors -%}{{ form.errors | default_errors }}{%- endcapture -%}
+  {% render 'alert', variant: 'destructive', icon: 'error', description: errors, urgent: true %}
+{% enddoc %}
+
+{%- liquid
+  assign v = variant | default: 'default'
+  unless v == 'destructive'
+    assign v = 'default'
+  endunless
+  assign classes = 'bl-alert bl-alert--' | append: v
+  if icon != blank
+    assign classes = classes | append: ' bl-alert--has-icon'
+  endif
+  if action != blank
+    assign classes = classes | append: ' bl-alert--has-action'
+  endif
+  case scheme
+    when 'success', 'warning', 'error'
+      assign classes = classes | append: ' color-' | append: scheme
+  endcase
+  if class
+    assign classes = classes | append: ' ' | append: class
+  endif
+-%}
+<div class="{{ classes }}" data-slot="alert" role="{% if urgent %}alert{% else %}status{% endif %}">
+  {%- if icon != blank -%}{% render 'icon', name: icon %}{%- endif -%}
+  {%- if title != blank -%}<div class="bl-alert__title" data-slot="alert-title">{{ title | escape }}</div>{%- endif -%}
+  {%- if description != blank -%}<div class="bl-alert__description" data-slot="alert-description">{{ description }}</div>{%- endif -%}
+  {%- if action != blank -%}<div class="bl-alert__action" data-slot="alert-action">{{ action }}</div>{%- endif -%}
+</div>
+
+{% stylesheet %}
+  /* Mirrors registry/src/ui/alert/alert.tsx. Colours from the scheme; geometry from the alert/* tokens (ADR-0017);
+     the destructive description is the alert/destructive/description-foreground tint (destructive at 90 %). */
+  .bl-alert {
+    position: relative;
+    display: grid;
+    width: 100%;
+    gap: var(--bl-alert-content-gap);
+    text-align: start;
+    border: var(--bl-alert-border-width) solid var(--border);
+    border-radius: var(--bl-alert-radius);
+    padding: var(--bl-alert-padding-y) var(--bl-alert-padding-x);
+    font-size: var(--bl-alert-description-font-size);
+    line-height: var(--bl-alert-description-line-height);
+    background-color: var(--card);
+    color: var(--card-foreground);
+  }
+  .bl-alert--destructive { color: var(--destructive); }
+  .bl-alert--destructive .bl-alert__description { color: var(--bl-alert-destructive-description-foreground); }
+  /* an icon takes the first column and spans both text rows, nudged onto the title's first line */
+  .bl-alert--has-icon { grid-template-columns: auto 1fr; column-gap: var(--bl-alert-gap); }
+  .bl-alert--has-icon > svg {
+    grid-row: span 2;
+    width: var(--bl-alert-icon-size);
+    height: var(--bl-alert-icon-size);
+    translate: 0 2px;
+    color: currentColor;
+  }
+  .bl-alert--has-icon > .bl-alert__title,
+  .bl-alert--has-icon > .bl-alert__description { grid-column-start: 2; }
+  /* the action is the grid's last column, beside the text, so the row makes room for it (Baseline deviation from
+     upstream's absolute top-right box over a fixed padding, user 2026-10-02) */
+  .bl-alert--has-action { grid-template-columns: 1fr auto; column-gap: var(--bl-alert-gap); }
+  .bl-alert--has-icon.bl-alert--has-action { grid-template-columns: auto 1fr auto; }
+  .bl-alert__title {
+    font-size: var(--bl-alert-title-font-size);
+    line-height: var(--bl-alert-title-line-height);
+    font-weight: var(--bl-alert-title-font-weight);
+  }
+  .bl-alert__description {
+    color: var(--muted-foreground);
+    text-wrap: balance;
+  }
+  .bl-alert__description p,
+  .bl-alert__description ul { margin: 0; }
+  .bl-alert__description p:not(:last-child) { margin-bottom: 1rem; }
+  .bl-alert__title a,
+  .bl-alert__description a { text-decoration: underline; text-underline-offset: 3px; color: inherit; }
+  .bl-alert__title a:hover,
+  .bl-alert__description a:hover { color: var(--foreground); }
+  .bl-alert__action {
+    grid-column-end: -1;
+    grid-row: 1 / span 2;
+    align-self: start;
+  }
+{% endstylesheet %}

package/templates/shopify/snippets/avatar-group.figma.ts

@@ -0,0 +1,17 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=1870-301
+// source=platforms/shopify/theme/snippets/avatar-group.liquid
+// component=avatar-group (snippet)
+// Shopify Code Connect template (label "Shopify (Liquid)"): captured avatar snippets passed to avatar-group, with the
+// "+N" as `count`.
+import figma from "figma";
+
+export default {
+  example: figma.code`{%- capture people -%}
+  {% render 'avatar', fallback: 'AB' %}
+  {% render 'avatar', fallback: 'CD' %}
+  {% render 'avatar', fallback: 'EF' %}
+{%- endcapture -%}
+{% render 'avatar-group', content: people, count: 3 %}`,
+  id: "shopify-avatar-group",
+  metadata: { nestable: false },
+};

package/templates/shopify/snippets/avatar-group.liquid

@@ -0,0 +1,66 @@
+{% doc %}
+  Baseline Avatar Group as a snippet (spec: components/avatar/spec.md). Overlapping avatars and an optional "+N":
+  each avatar after the first moves in by avatar/group/gap and gets the shared overlap ring; the count takes the size
+  of the group's avatars, as React's AvatarGroupCount does.
+
+  @param {string} content - the avatars, captured from the avatar snippet (required)
+  @param {number} [count] - people not shown, rendered as "+N"
+  @param {string} [class] - extra classes
+
+  @example
+  {%- capture people -%}
+    {% render 'avatar', fallback: 'AB' %}
+    {% render 'avatar', fallback: 'CD' %}
+    {% render 'avatar', fallback: 'EF' %}
+  {%- endcapture -%}
+  {% render 'avatar-group', content: people, count: 3 %}
+{% enddoc %}
+
+<div class="bl-avatar-group{% if class %} {{ class }}{% endif %}" data-slot="avatar-group">
+  {{- content -}}
+  {%- if count > 0 -%}
+    <div class="bl-avatar-group__count" data-slot="avatar-group-count">+{{ count }}</div>
+  {%- endif -%}
+</div>
+
+{% stylesheet %}
+  /* Mirrors AvatarGroup / AvatarGroupCount in registry/src/ui/avatar/avatar.tsx. */
+  .bl-avatar-group {
+    display: flex;
+    align-items: center;
+  }
+  .bl-avatar-group > * + * { margin-inline-start: var(--bl-avatar-group-gap); }
+  .bl-avatar-group > .bl-avatar { box-shadow: 0 0 0 var(--bl-overlap-ring-width) var(--background); }
+  .bl-avatar-group__count {
+    position: relative;
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    border-radius: 9999px;
+    background-color: var(--muted);
+    color: var(--muted-foreground);
+    box-shadow: 0 0 0 var(--bl-overlap-ring-width) var(--background);
+    font-family: var(--bl-avatar-font-family);
+    font-weight: var(--bl-avatar-font-weight);
+    width: var(--bl-avatar-md-size);
+    height: var(--bl-avatar-md-size);
+    font-size: var(--bl-avatar-md-font-size);
+    line-height: var(--bl-avatar-md-line-height);
+  }
+  /* the avatars' blended outline too (user decision 2026-10-01; upstream's count has the ring only) */
+  .bl-avatar-group__count::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    border: var(--bl-avatar-border-width) solid var(--border);
+    mix-blend-mode: darken;
+    pointer-events: none;
+  }
+  /* the count takes the size of the group's avatars */
+  .bl-avatar-group:has(.bl-avatar--xs) .bl-avatar-group__count { width: var(--bl-avatar-xs-size); height: var(--bl-avatar-xs-size); font-size: var(--bl-avatar-xs-font-size); line-height: var(--bl-avatar-xs-line-height); }
+  .bl-avatar-group:has(.bl-avatar--sm) .bl-avatar-group__count { width: var(--bl-avatar-sm-size); height: var(--bl-avatar-sm-size); font-size: var(--bl-avatar-sm-font-size); line-height: var(--bl-avatar-sm-line-height); }
+  .bl-avatar-group:has(.bl-avatar--lg) .bl-avatar-group__count { width: var(--bl-avatar-lg-size); height: var(--bl-avatar-lg-size); font-size: var(--bl-avatar-lg-font-size); line-height: var(--bl-avatar-lg-line-height); }
+  .bl-avatar-group:has(.bl-avatar--xl) .bl-avatar-group__count { width: var(--bl-avatar-xl-size); height: var(--bl-avatar-xl-size); font-size: var(--bl-avatar-xl-font-size); line-height: var(--bl-avatar-xl-line-height); }
+{% endstylesheet %}

package/templates/shopify/snippets/avatar.figma.ts

@@ -0,0 +1,24 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=1870-229
+// source=platforms/shopify/theme/snippets/avatar.liquid
+// component=avatar (snippet)
+// Shopify Code Connect template (label "Shopify (Liquid)"): the avatar snippet. On a storefront the person is usually the
+// signed-in customer, so an image avatar maps to `customer: customer` (Shopify's customer | avatar); initials and icon
+// map to `fallback` / `icon`.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+const size = instance.getEnum("Size", { xs: "xs", sm: "sm", md: "md", lg: "lg", xl: "xl" });
+const type = instance.getEnum("Type", { image: "image", fallback: "fallback", icon: "icon" });
+const initials = instance.getString("Fallback");
+const badge = instance.getBoolean("Badge");
+const args = [
+  type === "image" ? "customer: customer" : type === "icon" ? "icon: 'user'" : `fallback: '${initials}'`,
+  size !== "md" ? `size: '${size}'` : "",
+  badge ? "badge: 'dot'" : "",
+].filter(Boolean).join(", ");
+
+export default {
+  example: figma.code`{% render 'avatar', ${args} %}`,
+  id: "shopify-avatar",
+  metadata: { nestable: true },
+};

package/templates/shopify/snippets/avatar.liquid

@@ -0,0 +1,143 @@
+{% doc %}
+  Baseline Avatar as a snippet (spec: components/avatar/spec.md). A person as a round picture, with initials or an icon
+  when there is none.
+
+  For a customer it renders Shopify's own `{{ customer | avatar }}` when `customer.has_avatar?` (the avatar needs the
+  Shop channel and Shop Pay on the store), and the customer's initials otherwise. The filter's HTML is not documented,
+  so the stylesheet sizes and clips whatever single element it returns rather than assuming its tag.
+
+  @param {object} [customer] - a customer object: its avatar, or its initials as the fallback
+  @param {object} [image] - an image object for a non-customer avatar (a review author, a team member)
+  @param {string} [alt] - the person's name; empty when the same name is next to the avatar in text
+  @param {string} [fallback] - initials, when there is no picture
+  @param {string} [icon] - a Baseline system icon as the fallback instead of initials (e.g. 'user')
+  @param {string} [size] - xs | sm | md (default) | lg | xl
+  @param {string} [badge] - 'dot' for a plain status dot, or a status scheme: success | warning | error
+  @param {string} [badge_label] - visually hidden text for the status ("online")
+  @param {string} [class] - extra classes
+
+  @example
+  {% render 'avatar', customer: customer, size: 'sm' %}
+  {% render 'avatar', image: block.settings.photo, alt: block.settings.name, fallback: 'JD', size: 'lg' %}
+{% enddoc %}
+
+{%- liquid
+  assign s = size | default: 'md'
+  case s
+    when 'xs', 'sm', 'md', 'lg', 'xl'
+    else
+      assign s = 'md'
+  endcase
+  assign classes = 'bl-avatar bl-avatar--' | append: s
+  if class
+    assign classes = classes | append: ' ' | append: class
+  endif
+
+  assign initials = fallback
+  if initials == blank and customer
+    assign first = customer.first_name | slice: 0
+    assign last = customer.last_name | slice: 0
+    assign initials = first | append: last | upcase
+  endif
+  assign name = alt
+  if name == blank and customer
+    assign name = customer.name
+  endif
+
+  assign badge_class = ''
+  case badge
+    when 'success', 'warning', 'error'
+      assign badge_class = ' color-' | append: badge
+  endcase
+-%}
+<span class="{{ classes }}" data-slot="avatar" data-size="{{ s }}">
+  {%- if customer and customer.has_avatar? -%}
+    <span class="bl-avatar__image">{{ customer | avatar }}</span>
+  {%- elsif image -%}
+    {{ image | image_url: width: 160 | image_tag: class: 'bl-avatar__image', alt: name, loading: 'lazy' }}
+  {%- else -%}
+    <span class="bl-avatar__fallback"{% if name != blank and icon == blank %} role="img" aria-label="{{ name | escape }}"{% endif %}>
+      {%- if icon != blank -%}{% render 'icon', name: icon %}{%- else -%}<span aria-hidden="true">{{ initials | escape }}</span>{%- endif -%}
+    </span>
+  {%- endif -%}
+  {%- if badge != blank -%}
+    <span class="bl-avatar__badge{{ badge_class }}" data-slot="avatar-badge">
+      {%- if badge_label != blank -%}<span class="bl-avatar__label">{{ badge_label | escape }}</span>{%- endif -%}
+    </span>
+  {%- endif -%}
+</span>
+
+{% stylesheet %}
+  /* Mirrors registry/src/ui/avatar/avatar.tsx. Geometry from the avatar/<size>/* tokens (ADR-0017); the ring around the
+     status dot is the shared overlap/ring-width (ADR-0019). Status adds the color-<id> scheme class (ADR-0007). */
+  .bl-avatar {
+    position: relative;
+    display: inline-flex;
+    flex-shrink: 0;
+    border-radius: 9999px;
+    user-select: none;
+    vertical-align: middle;
+  }
+  /* upstream's outline: a border ring blended with `darken`, visible on light photos and gone on dark ones */
+  .bl-avatar::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    border: var(--bl-avatar-border-width) solid var(--border);
+    mix-blend-mode: darken;
+    pointer-events: none;
+  }
+  /* the picture: an <img> from image_tag, or whatever single element the avatar filter returns */
+  .bl-avatar .bl-avatar__image,
+  .bl-avatar .bl-avatar__image > *,
+  .bl-avatar .bl-avatar__image img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: 9999px;
+    object-fit: cover;
+    overflow: hidden;
+  }
+  .bl-avatar__fallback {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    border-radius: 9999px;
+    background-color: var(--muted);
+    color: var(--muted-foreground);
+    font-family: var(--bl-avatar-font-family);
+    font-weight: var(--bl-avatar-font-weight);
+  }
+  .bl-avatar__badge {
+    position: absolute;
+    inset-inline-end: 0;
+    bottom: 0;
+    z-index: 1;
+    border-radius: 9999px;
+    background-color: var(--primary);
+    box-shadow: 0 0 0 var(--bl-overlap-ring-width) var(--background);
+  }
+
+  /* the status text: visually hidden, still announced */
+  .bl-avatar__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+
+  /* sizes: one rule per Figma Size, every value an avatar/<size>/* variable; the fallback text steps with the circle */
+  .bl-avatar--xs { width: var(--bl-avatar-xs-size); height: var(--bl-avatar-xs-size); font-size: var(--bl-avatar-xs-font-size); line-height: var(--bl-avatar-xs-line-height); }
+  .bl-avatar--sm { width: var(--bl-avatar-sm-size); height: var(--bl-avatar-sm-size); font-size: var(--bl-avatar-sm-font-size); line-height: var(--bl-avatar-sm-line-height); }
+  .bl-avatar--md { width: var(--bl-avatar-md-size); height: var(--bl-avatar-md-size); font-size: var(--bl-avatar-md-font-size); line-height: var(--bl-avatar-md-line-height); }
+  .bl-avatar--lg { width: var(--bl-avatar-lg-size); height: var(--bl-avatar-lg-size); font-size: var(--bl-avatar-lg-font-size); line-height: var(--bl-avatar-lg-line-height); }
+  .bl-avatar--xl { width: var(--bl-avatar-xl-size); height: var(--bl-avatar-xl-size); font-size: var(--bl-avatar-xl-font-size); line-height: var(--bl-avatar-xl-line-height); }
+  .bl-avatar--xs .bl-avatar__fallback svg { width: var(--bl-avatar-xs-icon-size); height: var(--bl-avatar-xs-icon-size); }
+  .bl-avatar--sm .bl-avatar__fallback svg { width: var(--bl-avatar-sm-icon-size); height: var(--bl-avatar-sm-icon-size); }
+  .bl-avatar--md .bl-avatar__fallback svg { width: var(--bl-avatar-md-icon-size); height: var(--bl-avatar-md-icon-size); }
+  .bl-avatar--lg .bl-avatar__fallback svg { width: var(--bl-avatar-lg-icon-size); height: var(--bl-avatar-lg-icon-size); }
+  .bl-avatar--xl .bl-avatar__fallback svg { width: var(--bl-avatar-xl-icon-size); height: var(--bl-avatar-xl-icon-size); }
+  .bl-avatar--xs .bl-avatar__badge { width: var(--bl-avatar-xs-badge-size); height: var(--bl-avatar-xs-badge-size); }
+  .bl-avatar--sm .bl-avatar__badge { width: var(--bl-avatar-sm-badge-size); height: var(--bl-avatar-sm-badge-size); }
+  .bl-avatar--md .bl-avatar__badge { width: var(--bl-avatar-md-badge-size); height: var(--bl-avatar-md-badge-size); }
+  .bl-avatar--lg .bl-avatar__badge { width: var(--bl-avatar-lg-badge-size); height: var(--bl-avatar-lg-badge-size); }
+  .bl-avatar--xl .bl-avatar__badge { width: var(--bl-avatar-xl-badge-size); height: var(--bl-avatar-xl-badge-size); }
+{% endstylesheet %}