@birdycom/omniaui 0.12.3 → 0.12.5

package/dist/components.css

@@ -1,4 +1,4 @@
-/* File: oc-theme.css — generated from tokens/semantic.json by @birdycom/omniacss 0.12.3. Do not edit. */
+/* File: oc-theme.css — generated from tokens/semantic.json by @birdycom/omniacss 0.12.5. Do not edit. */
 /* Semantic theme tokens: every color is light-dark() of an Omnia palette token (oc-colors.css). */
 /* Same source as the desktop export: npx omniacss tokens --format json|dtcg|python */
 :root {
@@ -3880,19 +3880,20 @@ details.oc-collapsible[open]::details-content { block-size: auto; }
   background: oklch(from var(--oc-accent-from) l c h / 0.14);
   color: light-dark(var(--oc-accent-from), oklch(from var(--oc-accent-from) max(l, 0.72) c h));
 }
-/* Pulse: the ring starts at --oc-status-dot-pulse-alpha of the accent and grows to --oc-status-dot-pulse-size.
+/* Live dot in a pill (.oc-pill > .oc-status-dot): the ring starts at --oc-status-dot-pulse-alpha of the accent and grows
+   to --oc-status-dot-pulse-size. Scoped to the pill: a plain .oc-status-dot is the status light (parts/app-status-dot.css).
    --strong starts at the full accent with a wider ring. */
-.oc-status-dot {
+.oc-pill .oc-status-dot {
   --oc-status-dot-pulse-alpha: 0.6;
   --oc-status-dot-pulse-size: 8px;
   inline-size: 0.5rem;
   aspect-ratio: 1;
   border-radius: 50%;
   background: var(--oc-accent-from);
-  animation: oc-pulse 2s infinite;
+  animation: oc-status-dot-ring 2s infinite;
 }
-.oc-status-dot--strong { --oc-status-dot-pulse-alpha: 1; --oc-status-dot-pulse-size: 10px; }
-@keyframes oc-pulse {
+.oc-pill .oc-status-dot--strong { --oc-status-dot-pulse-alpha: 1; --oc-status-dot-pulse-size: 10px; }
+@keyframes oc-status-dot-ring {
   0% { box-shadow: 0 0 0 0 oklch(from var(--oc-accent-from) l c h / var(--oc-status-dot-pulse-alpha)); }
   70%, 100% { box-shadow: 0 0 0 var(--oc-status-dot-pulse-size) transparent; }
 }
@@ -4053,7 +4054,7 @@ details.oc-collapsible[open]::details-content { block-size: auto; }
 
 @media (prefers-reduced-motion: reduce) {
   .oc-backdrop::before, .oc-backdrop::after, .oc-backdrop > .oc-backdrop__blob,
-  .oc-icon-tile--float, .oc-marquee__track, .oc-status-dot, .oc-reveal, .oc-site-header { animation: none; }
+  .oc-icon-tile--float, .oc-marquee__track, .oc-pill .oc-status-dot, .oc-reveal, .oc-site-header { animation: none; }
 }
 
 /* ===================================================================
@@ -10113,9 +10114,9 @@ a.oc-message__quote:focus-visible { outline: 2px solid var(--oc-ring); outline-o
 
 /* parts/site-price-card.css */
 /* 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. */
+   Map: card -> head + discount badge -> period toggle -> monthly / yearly / lifetime price (:has) -> features -> featured
+   Price card: one plan with a monthly / yearly switch, optionally a third "lifetime" option (radio inputs + :has(),
+   no JavaScript). The toggle is the segmented component; give every card its own radio name. */
 
 .oc-price-card {
   display: flex;
@@ -10145,9 +10146,12 @@ a.oc-message__quote:focus-visible { outline: 2px solid var(--oc-ring); outline-o
 }
 .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; }
+.oc-price-card__toggle { align-self: flex-start; max-inline-size: 100%; }
+/* Three options (monthly / yearly / lifetime) take the full card width, in equal parts, so they fit a narrow card. */
+.oc-price-card__toggle:has(> :nth-child(3)) { align-self: stretch; }
+.oc-price-card__toggle:has(> :nth-child(3)) .oc-segmented-item { flex: 1; min-inline-size: 0; padding-inline: 0.25rem; letter-spacing: 0; text-align: center; }
 
-/* Price rows: monthly shows by default, yearly when its radio is checked. */
+/* Price rows: monthly shows by default, yearly or lifetime when its radio is checked. */
 .oc-price-card__price {
   display: flex;
   flex-wrap: wrap;
@@ -10155,9 +10159,12 @@ a.oc-message__quote:focus-visible { outline: 2px solid var(--oc-ring); outline-o
   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__price--yearly,
+.oc-price-card__price--lifetime { display: none; }
+.oc-price-card:has(.oc-price-card__toggle input[value="yearly"]:checked) .oc-price-card__price--yearly,
+.oc-price-card:has(.oc-price-card__toggle input[value="lifetime"]:checked) .oc-price-card__price--lifetime { display: flex; }
+.oc-price-card:has(.oc-price-card__toggle input:is([value="yearly"], [value="lifetime"]):checked) .oc-price-card__price--monthly,
+.oc-price-card:has(.oc-price-card__toggle input[value="lifetime"]:checked) .oc-price-card__price--yearly { 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; }