@birdycom/omniaui 0.11.0 → 0.11.1

package/dist/parts/site-fact-list.css

@@ -1,25 +1,25 @@
-/* File: packages/ui/src/parts/site-fact-list.css
-   Map: plain -> compact -> stacked -> accent values -> narrow screens
-   Fact list component: key / value product facts (the marketing sibling of the definition list).
-   The base .oc-fact-list (card with <div><dt><dd> rows) lives in showcase.css. This part ADDS modifiers, plus one safe fix: rows may wrap in very narrow containers. */
-
-/* Plain: no card, only lines between the rows. */
-.oc-fact-list--plain {
-  border: 0;
-  border-radius: 0;
-  background: none;
-}
-.oc-fact-list--plain > div { padding-inline: 0; }
-
-/* Compact rows (sidebars, small cards). */
-.oc-fact-list--compact > div { padding-block: 0.6rem; font-size: 0.9rem; }
-
-/* Stacked: the value goes below the label (long values). */
-.oc-fact-list--stacked > div { flex-direction: column; gap: 0.2rem; }
-.oc-fact-list--stacked dd { text-align: start; }
-
-/* Values in the accent color. */
-.oc-fact-list--accent dd { color: var(--oc-accent-from); }
-
-/* Very narrow containers: wrap instead of squeezing label and value together. */
-.oc-fact-list > div { flex-wrap: wrap; }
+/* File: packages/ui/src/parts/site-fact-list.css
+   Map: plain -> compact -> stacked -> accent values -> narrow screens
+   Fact list component: key / value product facts (the marketing sibling of the definition list).
+   The base .oc-fact-list (card with <div><dt><dd> rows) lives in showcase.css. This part ADDS modifiers, plus one safe fix: rows may wrap in very narrow containers. */
+
+/* Plain: no card, only lines between the rows. */
+.oc-fact-list--plain {
+  border: 0;
+  border-radius: 0;
+  background: none;
+}
+.oc-fact-list--plain > div { padding-inline: 0; }
+
+/* Compact rows (sidebars, small cards). */
+.oc-fact-list--compact > div { padding-block: 0.6rem; font-size: 0.9rem; }
+
+/* Stacked: the value goes below the label (long values). */
+.oc-fact-list--stacked > div { flex-direction: column; gap: 0.2rem; }
+.oc-fact-list--stacked dd { text-align: start; }
+
+/* Values in the accent color. */
+.oc-fact-list--accent dd { color: var(--oc-accent-from); }
+
+/* Very narrow containers: wrap instead of squeezing label and value together. */
+.oc-fact-list > div { flex-wrap: wrap; }

package/dist/parts/site-link-arrow.css

@@ -1,34 +1,34 @@
-/* File: packages/ui/src/parts/site-link-arrow.css
-   Map: focus ring -> back arrow -> external arrow -> color modifiers -> sizes -> reduced motion
-   Link arrow component. The base .oc-link-arrow (text + "→" that moves on hover) lives in showcase.css.
-   This part only ADDS modifiers. */
-
-.oc-link-arrow:focus-visible {
-  border-radius: 4px;
-  outline: 2px solid var(--oc-ring);
-  outline-offset: 3px;
-}
-.oc-link-arrow:focus-visible::after { translate: 4px 0; }
-
-/* Back link: the arrow points left, sits before the text and moves left on hover. */
-.oc-link-arrow--back::after { content: none; }
-.oc-link-arrow--back::before { content: "←"; transition: translate 0.2s var(--oc-ease-out); }
-.oc-link-arrow--back:is(:hover, :focus-visible)::before { translate: -4px 0; }
-
-/* External link: diagonal arrow that moves up-right. */
-.oc-link-arrow--external::after { content: "↗"; }
-.oc-link-arrow--external:is(:hover, :focus-visible)::after { translate: 3px -3px; }
-
-/* Colors: accent of the element, or muted text that turns to the foreground color on hover. */
-.oc-link-arrow--accent { color: var(--oc-accent-from); }
-.oc-link-arrow--muted { color: var(--oc-muted-foreground); font-weight: 500; transition: color 0.2s; }
-.oc-link-arrow--muted:hover { color: var(--oc-foreground); }
-
-/* Sizes */
-.oc-link-arrow--sm { font-size: 0.85rem; }
-.oc-link-arrow--lg { font-size: 1.15rem; }
-
-@media (prefers-reduced-motion: reduce) {
-  .oc-link-arrow::after,
-  .oc-link-arrow::before { transition: none; }
-}
+/* File: packages/ui/src/parts/site-link-arrow.css
+   Map: focus ring -> back arrow -> external arrow -> color modifiers -> sizes -> reduced motion
+   Link arrow component. The base .oc-link-arrow (text + "→" that moves on hover) lives in showcase.css.
+   This part only ADDS modifiers. */
+
+.oc-link-arrow:focus-visible {
+  border-radius: 4px;
+  outline: 2px solid var(--oc-ring);
+  outline-offset: 3px;
+}
+.oc-link-arrow:focus-visible::after { translate: 4px 0; }
+
+/* Back link: the arrow points left, sits before the text and moves left on hover. */
+.oc-link-arrow--back::after { content: none; }
+.oc-link-arrow--back::before { content: "←"; transition: translate 0.2s var(--oc-ease-out); }
+.oc-link-arrow--back:is(:hover, :focus-visible)::before { translate: -4px 0; }
+
+/* External link: diagonal arrow that moves up-right. */
+.oc-link-arrow--external::after { content: "↗"; }
+.oc-link-arrow--external:is(:hover, :focus-visible)::after { translate: 3px -3px; }
+
+/* Colors: accent of the element, or muted text that turns to the foreground color on hover. */
+.oc-link-arrow--accent { color: var(--oc-accent-from); }
+.oc-link-arrow--muted { color: var(--oc-muted-foreground); font-weight: 500; transition: color 0.2s; }
+.oc-link-arrow--muted:hover { color: var(--oc-foreground); }
+
+/* Sizes */
+.oc-link-arrow--sm { font-size: 0.85rem; }
+.oc-link-arrow--lg { font-size: 1.15rem; }
+
+@media (prefers-reduced-motion: reduce) {
+  .oc-link-arrow::after,
+  .oc-link-arrow::before { transition: none; }
+}

package/dist/parts/site-marquee.css

@@ -1,34 +1,34 @@
-/* File: packages/ui/src/parts/site-marquee.css
-   Map: pause on focus -> direction / speed modifiers -> plain items -> no fade -> reduced motion
-   Marquee component. The base .oc-marquee (endless track, pause on hover) lives in showcase.css.
-   This part only ADDS modifiers and a reduced-motion fallback that shows every item without movement. */
-
-/* Keyboard users: pause too when a link inside the strip has focus. */
-.oc-marquee:focus-within .oc-marquee__track { animation-play-state: paused; }
-
-/* Scroll the other way (nice for a second row). */
-.oc-marquee--reverse .oc-marquee__track { animation-direction: reverse; }
-
-/* Speed presets. You can also set --oc-marquee-duration yourself. */
-.oc-marquee--slow { --oc-marquee-duration: 70s; }
-.oc-marquee--fast { --oc-marquee-duration: 20s; }
-
-/* Plain items: no pill, just text (logo or name strips). */
-.oc-marquee--plain .oc-marquee__item {
-  padding-inline: 0.5rem;
-  border-color: transparent;
-  background: none;
-  font-family: inherit;
-  font-size: 1.05rem;
-  font-weight: 600;
-}
-
-/* No soft fade at both edges. */
-.oc-marquee--no-fade { mask-image: none; }
-
-/* Reduced motion: no animation (showcase.css), no fade, the items wrap and the duplicates hide. */
-@media (prefers-reduced-motion: reduce) {
-  .oc-marquee { mask-image: none; }
-  .oc-marquee__track { flex-wrap: wrap; inline-size: auto; }
-  .oc-marquee__item[aria-hidden="true"] { display: none; }
-}
+/* File: packages/ui/src/parts/site-marquee.css
+   Map: pause on focus -> direction / speed modifiers -> plain items -> no fade -> reduced motion
+   Marquee component. The base .oc-marquee (endless track, pause on hover) lives in showcase.css.
+   This part only ADDS modifiers and a reduced-motion fallback that shows every item without movement. */
+
+/* Keyboard users: pause too when a link inside the strip has focus. */
+.oc-marquee:focus-within .oc-marquee__track { animation-play-state: paused; }
+
+/* Scroll the other way (nice for a second row). */
+.oc-marquee--reverse .oc-marquee__track { animation-direction: reverse; }
+
+/* Speed presets. You can also set --oc-marquee-duration yourself. */
+.oc-marquee--slow { --oc-marquee-duration: 70s; }
+.oc-marquee--fast { --oc-marquee-duration: 20s; }
+
+/* Plain items: no pill, just text (logo or name strips). */
+.oc-marquee--plain .oc-marquee__item {
+  padding-inline: 0.5rem;
+  border-color: transparent;
+  background: none;
+  font-family: inherit;
+  font-size: 1.05rem;
+  font-weight: 600;
+}
+
+/* No soft fade at both edges. */
+.oc-marquee--no-fade { mask-image: none; }
+
+/* Reduced motion: no animation (showcase.css), no fade, the items wrap and the duplicates hide. */
+@media (prefers-reduced-motion: reduce) {
+  .oc-marquee { mask-image: none; }
+  .oc-marquee__track { flex-wrap: wrap; inline-size: auto; }
+  .oc-marquee__item[aria-hidden="true"] { display: none; }
+}

package/dist/parts/site-next-teaser.css

@@ -1,75 +1,75 @@
-/* File: packages/ui/src/parts/site-next-teaser.css
-   Map: card -> label -> name (+ mark) -> tagline with arrow -> previous variant -> hover -> reduced motion
-   Next teaser: a "Next product / Next project" card at the end of a detail page.
-   Accent: --oc-accent-from, or an .oc-accent--* preset on the card. */
-
-.oc-next-teaser {
-  display: grid;
-  gap: 0.45rem;
-  padding: 2rem;
-  border: 1px solid var(--oc-border);
-  border-radius: var(--oc-radius-lg);
-  background:
-    radial-gradient(28rem circle at 100% 0%, color-mix(in oklch, var(--oc-accent-from) 12%, transparent), transparent 60%),
-    var(--oc-surface);
-  color: var(--oc-foreground);
-  text-decoration: none;
-  transition: transform 0.3s var(--oc-ease-out), border-color 0.3s;
-}
-
-/* Small uppercase label ("Next product"). */
-.oc-next-teaser__label {
-  color: var(--oc-muted-foreground);
-  font-size: 0.78rem;
-  font-weight: 600;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-}
-
-/* Name with an optional product mark in front. */
-.oc-next-teaser__name {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  margin: 0;
-  font-size: clamp(1.4rem, 3vw, 1.85rem);
-  font-weight: 700;
-  letter-spacing: -0.02em;
-}
-
-/* Tagline + arrow that moves on hover. */
-.oc-next-teaser__tagline {
-  display: flex;
-  align-items: center;
-  gap: 0.4rem;
-  margin: 0;
-  color: var(--oc-muted-foreground);
-}
-.oc-next-teaser__tagline::after {
-  content: "→";
-  color: var(--oc-accent-from);
-  transition: translate 0.25s var(--oc-ease-out);
-}
-
-/* Previous: the arrow points left and sits before the tagline. */
-.oc-next-teaser--prev .oc-next-teaser__tagline::after { content: none; }
-.oc-next-teaser--prev .oc-next-teaser__tagline::before {
-  content: "←";
-  color: var(--oc-accent-from);
-  transition: translate 0.25s var(--oc-ease-out);
-}
-
-/* Hover / focus */
-.oc-next-teaser:is(a):hover {
-  transform: translateY(-4px);
-  border-color: color-mix(in oklch, var(--oc-accent-from) 55%, transparent);
-}
-.oc-next-teaser:hover .oc-next-teaser__tagline::after { translate: 4px 0; }
-.oc-next-teaser--prev:hover .oc-next-teaser__tagline::before { translate: -4px 0; }
-.oc-next-teaser:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 3px; }
-
-@media (prefers-reduced-motion: reduce) {
-  .oc-next-teaser,
-  .oc-next-teaser__tagline::after,
-  .oc-next-teaser__tagline::before { transition: none; }
-}
+/* File: packages/ui/src/parts/site-next-teaser.css
+   Map: card -> label -> name (+ mark) -> tagline with arrow -> previous variant -> hover -> reduced motion
+   Next teaser: a "Next product / Next project" card at the end of a detail page.
+   Accent: --oc-accent-from, or an .oc-accent--* preset on the card. */
+
+.oc-next-teaser {
+  display: grid;
+  gap: 0.45rem;
+  padding: 2rem;
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius-lg);
+  background:
+    radial-gradient(28rem circle at 100% 0%, color-mix(in oklch, var(--oc-accent-from) 12%, transparent), transparent 60%),
+    var(--oc-surface);
+  color: var(--oc-foreground);
+  text-decoration: none;
+  transition: transform 0.3s var(--oc-ease-out), border-color 0.3s;
+}
+
+/* Small uppercase label ("Next product"). */
+.oc-next-teaser__label {
+  color: var(--oc-muted-foreground);
+  font-size: 0.78rem;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+/* Name with an optional product mark in front. */
+.oc-next-teaser__name {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin: 0;
+  font-size: clamp(1.4rem, 3vw, 1.85rem);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
+/* Tagline + arrow that moves on hover. */
+.oc-next-teaser__tagline {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin: 0;
+  color: var(--oc-muted-foreground);
+}
+.oc-next-teaser__tagline::after {
+  content: "→";
+  color: var(--oc-accent-from);
+  transition: translate 0.25s var(--oc-ease-out);
+}
+
+/* Previous: the arrow points left and sits before the tagline. */
+.oc-next-teaser--prev .oc-next-teaser__tagline::after { content: none; }
+.oc-next-teaser--prev .oc-next-teaser__tagline::before {
+  content: "←";
+  color: var(--oc-accent-from);
+  transition: translate 0.25s var(--oc-ease-out);
+}
+
+/* Hover / focus */
+.oc-next-teaser:is(a):hover {
+  transform: translateY(-4px);
+  border-color: color-mix(in oklch, var(--oc-accent-from) 55%, transparent);
+}
+.oc-next-teaser:hover .oc-next-teaser__tagline::after { translate: 4px 0; }
+.oc-next-teaser--prev:hover .oc-next-teaser__tagline::before { translate: -4px 0; }
+.oc-next-teaser:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 3px; }
+
+@media (prefers-reduced-motion: reduce) {
+  .oc-next-teaser,
+  .oc-next-teaser__tagline::after,
+  .oc-next-teaser__tagline::before { transition: none; }
+}

package/dist/parts/site-price-card.css

@@ -1,75 +1,91 @@
-/* File: packages/ui/src/parts/site-price-card.css
-   Map: card -> head + discount badge -> period toggle -> monthly / yearly price (:has) -> features -> featured
-   Price card: one plan with a monthly / yearly switch (radio inputs + :has(), no JavaScript).
-   The toggle is the segmented component; give every card its own radio name. */
-
-.oc-price-card {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  padding: 1.75rem;
-  border: 1px solid var(--oc-border);
-  border-radius: var(--oc-radius-lg);
-  background: var(--oc-card);
-  color: var(--oc-foreground);
-}
-
-.oc-price-card__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
-.oc-price-card__name { margin: 0; font-size: 1.2rem; font-weight: 700; }
-.oc-price-card__desc { margin: 0; color: var(--oc-muted-foreground); font-size: 0.92rem; }
-
-/* Discount badge ("Save 20%"). It is dimmed while the monthly price shows. */
-.oc-price-card__discount {
-  padding: 0.2rem 0.6rem;
-  border-radius: 999px;
-  background: color-mix(in oklch, var(--oc-success) 16%, transparent);
-  color: var(--oc-success);
-  font-size: 0.75rem;
-  font-weight: 700;
-  white-space: nowrap;
-  transition: opacity 0.2s;
-}
-.oc-price-card:has(.oc-price-card__toggle input[value="monthly"]:checked) .oc-price-card__discount { opacity: 0.55; }
-
-.oc-price-card__toggle { align-self: flex-start; }
-
-/* Price rows: monthly shows by default, yearly when its radio is checked. */
-.oc-price-card__price {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  gap: 0.35rem;
-  margin: 0;
-}
-.oc-price-card__price--yearly { display: none; }
-.oc-price-card:has(.oc-price-card__toggle input[value="yearly"]:checked) .oc-price-card__price--yearly { display: flex; }
-.oc-price-card:has(.oc-price-card__toggle input[value="yearly"]:checked) .oc-price-card__price--monthly { display: none; }
-
-.oc-price-card__amount { font-size: 2.5rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
-.oc-price-card__period { color: var(--oc-muted-foreground); font-size: 0.9rem; }
-/* Old price, struck through. */
-.oc-price-card__was { color: var(--oc-muted-foreground); font-size: 0.95rem; }
-.oc-price-card__note { flex-basis: 100%; color: var(--oc-muted-foreground); font-size: 0.8rem; }
-
-/* Features: a check for included, a cross + muted text for excluded. */
-.oc-price-card__features {
-  display: grid;
-  gap: 0.55rem;
-  flex-grow: 1;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  font-size: 0.92rem;
-}
-.oc-price-card__feature { display: flex; align-items: baseline; gap: 0.55rem; }
-.oc-price-card__feature::before { content: "✓"; flex-shrink: 0; color: var(--oc-success); font-weight: 700; }
-.oc-price-card__feature--excluded { color: var(--oc-muted-foreground); }
-.oc-price-card__feature--excluded::before { content: "✕"; color: var(--oc-muted-foreground); font-weight: 400; }
-
-.oc-price-card__cta { inline-size: 100%; }
-
-/* Featured plan: accent border + soft glow. */
-.oc-price-card--featured {
-  border-color: color-mix(in oklch, var(--oc-accent-from) 60%, transparent);
-  box-shadow: 0 24px 60px -30px var(--oc-accent-from);
-}
+/* File: packages/ui/src/parts/site-price-card.css
+   Map: card -> head + discount badge -> period toggle -> monthly / yearly price (:has) -> features -> featured
+   Price card: one plan with a monthly / yearly switch (radio inputs + :has(), no JavaScript).
+   The toggle is the segmented component; give every card its own radio name. */
+
+.oc-price-card {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1.75rem;
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius-lg);
+  background: var(--oc-card);
+  color: var(--oc-foreground);
+}
+
+.oc-price-card__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
+.oc-price-card__name { margin: 0; font-size: 1.2rem; font-weight: 700; }
+.oc-price-card__desc { margin: 0; color: var(--oc-muted-foreground); font-size: 0.92rem; }
+
+/* Discount badge ("Save 20%"). It is dimmed while the monthly price shows. */
+.oc-price-card__discount {
+  padding: 0.2rem 0.6rem;
+  border-radius: 999px;
+  background: color-mix(in oklch, var(--oc-success) 16%, transparent);
+  color: var(--oc-success);
+  font-size: 0.75rem;
+  font-weight: 700;
+  white-space: nowrap;
+  transition: opacity 0.2s;
+}
+.oc-price-card:has(.oc-price-card__toggle input[value="monthly"]:checked) .oc-price-card__discount { opacity: 0.55; }
+
+.oc-price-card__toggle { align-self: flex-start; }
+
+/* Price rows: monthly shows by default, yearly when its radio is checked. */
+.oc-price-card__price {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0.35rem;
+  margin: 0;
+}
+.oc-price-card__price--yearly { display: none; }
+.oc-price-card:has(.oc-price-card__toggle input[value="yearly"]:checked) .oc-price-card__price--yearly { display: flex; }
+.oc-price-card:has(.oc-price-card__toggle input[value="yearly"]:checked) .oc-price-card__price--monthly { display: none; }
+
+.oc-price-card__amount { font-size: 2.5rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
+.oc-price-card__period { color: var(--oc-muted-foreground); font-size: 0.9rem; }
+/* Old price, struck through. */
+.oc-price-card__was { color: var(--oc-muted-foreground); font-size: 0.95rem; }
+.oc-price-card__note { flex-basis: 100%; color: var(--oc-muted-foreground); font-size: 0.8rem; }
+
+/* Features: a check for included, a cross + muted text for excluded. */
+.oc-price-card__features {
+  display: grid;
+  gap: 0.55rem;
+  flex-grow: 1;
+  align-content: start; /* the list grows to push the button down, its rows stay together */
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: 0.92rem;
+}
+.oc-price-card__feature { display: flex; align-items: baseline; gap: 0.55rem; }
+.oc-price-card__feature::before { content: "✓"; flex-shrink: 0; color: var(--oc-success); font-weight: 700; }
+.oc-price-card__feature--excluded { color: var(--oc-muted-foreground); }
+.oc-price-card__feature--excluded::before { content: "✕"; color: var(--oc-muted-foreground); font-weight: 400; }
+
+.oc-price-card__cta { inline-size: 100%; }
+
+/* Featured plan: accent border + soft glow. The glow follows the pointer: the card you hover or tab into gets it,
+   and the featured card gives it up while another card in the same row is hovered. */
+.oc-price-card {
+  transition: border-color 0.25s var(--oc-ease-out), box-shadow 0.25s var(--oc-ease-out), translate 0.25s var(--oc-ease-out);
+}
+.oc-price-card--featured,
+.oc-price-card:hover,
+.oc-price-card:focus-within {
+  border-color: color-mix(in oklch, var(--oc-accent-from) 60%, transparent);
+  box-shadow: 0 24px 60px -30px var(--oc-accent-from);
+}
+.oc-price-card:hover { translate: 0 -2px; }
+:has(> .oc-price-card:hover) > .oc-price-card--featured:not(:hover, :focus-within) {
+  border-color: var(--oc-border);
+  box-shadow: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .oc-price-card { transition: none; }
+  .oc-price-card:hover { translate: none; }
+}

package/dist/parts/site-product-mark.css

@@ -1,66 +1,66 @@
-/* File: packages/ui/src/parts/site-product-mark.css
-   Map: base tile -> squircle (corner-shape) -> image / svg -> sizes -> soft variant -> glow
-   Product mark: a filled app-icon tile in the accent gradient (logo, glyph or SVG).
-   Accent: --oc-accent-from / --oc-accent-to, or an .oc-accent--* preset on the element. */
-
-.oc-product-mark {
-  --oc-mark-size: 3rem;
-  display: inline-grid;
-  place-items: center;
-  inline-size: var(--oc-mark-size);
-  aspect-ratio: 1;
-  flex-shrink: 0;
-  /* Fallback shape: a rounded square close to an app icon. */
-  border-radius: 26%;
-  background: linear-gradient(135deg, var(--oc-accent-from), var(--oc-accent-to));
-  color: var(--color-white-50);
-  font-size: calc(var(--oc-mark-size) * 0.45);
-  line-height: 1;
-  /* Light edge on top + a soft drop shadow in the accent color. */
-  box-shadow:
-    inset 0 1px 0 color-mix(in oklch, var(--color-white-50) 35%, transparent),
-    0 10px 24px -12px var(--oc-accent-to);
-  overflow: hidden;
-}
-
-/* Real squircle where the browser supports corner-shape (a larger radius looks right with it). */
-@supports (corner-shape: squircle) {
-  .oc-product-mark {
-    border-radius: 50%;
-    corner-shape: squircle;
-  }
-}
-
-/* Logo image or inline SVG inside the tile. */
-.oc-product-mark > :is(img, svg) {
-  inline-size: 58%;
-  block-size: 58%;
-  object-fit: contain;
-}
-/* Full-bleed image (the logo already is a tile). */
-.oc-product-mark--cover > img {
-  inline-size: 100%;
-  block-size: 100%;
-  object-fit: cover;
-}
-
-/* Sizes */
-.oc-product-mark--sm { --oc-mark-size: 2.25rem; }
-.oc-product-mark--lg { --oc-mark-size: 4rem; }
-.oc-product-mark--xl {
-  --oc-mark-size: clamp(6rem, 18vw, 10rem);
-  box-shadow:
-    inset 0 2px 0 color-mix(in oklch, var(--color-white-50) 35%, transparent),
-    0 0 80px -20px var(--oc-accent-from);
-}
-
-/* Soft variant: tinted background, accent glyph (quieter, for lists). */
-.oc-product-mark--soft {
-  border: 1px solid color-mix(in oklch, var(--oc-accent-from) 40%, transparent);
-  background: color-mix(in oklch, var(--oc-accent-from) 16%, var(--oc-card));
-  color: var(--oc-accent-from);
-  box-shadow: none;
-}
-
-/* Extra glow (hero visuals). */
-.oc-product-mark--glow { box-shadow: 0 0 48px -8px var(--oc-accent-from); }
+/* File: packages/ui/src/parts/site-product-mark.css
+   Map: base tile -> squircle (corner-shape) -> image / svg -> sizes -> soft variant -> glow
+   Product mark: a filled app-icon tile in the accent gradient (logo, glyph or SVG).
+   Accent: --oc-accent-from / --oc-accent-to, or an .oc-accent--* preset on the element. */
+
+.oc-product-mark {
+  --oc-mark-size: 3rem;
+  display: inline-grid;
+  place-items: center;
+  inline-size: var(--oc-mark-size);
+  aspect-ratio: 1;
+  flex-shrink: 0;
+  /* Fallback shape: a rounded square close to an app icon. */
+  border-radius: 26%;
+  background: linear-gradient(135deg, var(--oc-accent-from), var(--oc-accent-to));
+  color: var(--color-white-50);
+  font-size: calc(var(--oc-mark-size) * 0.45);
+  line-height: 1;
+  /* Light edge on top + a soft drop shadow in the accent color. */
+  box-shadow:
+    inset 0 1px 0 color-mix(in oklch, var(--color-white-50) 35%, transparent),
+    0 10px 24px -12px var(--oc-accent-to);
+  overflow: hidden;
+}
+
+/* Real squircle where the browser supports corner-shape (a larger radius looks right with it). */
+@supports (corner-shape: squircle) {
+  .oc-product-mark {
+    border-radius: 50%;
+    corner-shape: squircle;
+  }
+}
+
+/* Logo image or inline SVG inside the tile. */
+.oc-product-mark > :is(img, svg) {
+  inline-size: 58%;
+  block-size: 58%;
+  object-fit: contain;
+}
+/* Full-bleed image (the logo already is a tile). */
+.oc-product-mark--cover > img {
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+}
+
+/* Sizes */
+.oc-product-mark--sm { --oc-mark-size: 2.25rem; }
+.oc-product-mark--lg { --oc-mark-size: 4rem; }
+.oc-product-mark--xl {
+  --oc-mark-size: clamp(6rem, 18vw, 10rem);
+  box-shadow:
+    inset 0 2px 0 color-mix(in oklch, var(--color-white-50) 35%, transparent),
+    0 0 80px -20px var(--oc-accent-from);
+}
+
+/* Soft variant: tinted background, accent glyph (quieter, for lists). */
+.oc-product-mark--soft {
+  border: 1px solid color-mix(in oklch, var(--oc-accent-from) 40%, transparent);
+  background: color-mix(in oklch, var(--oc-accent-from) 16%, var(--oc-card));
+  color: var(--oc-accent-from);
+  box-shadow: none;
+}
+
+/* Extra glow (hero visuals). */
+.oc-product-mark--glow { box-shadow: 0 0 48px -8px var(--oc-accent-from); }