@birdycom/omniaui 0.12.3 → 0.12.4

package/dist/oc-theme.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.4. 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 {

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

@@ -1,7 +1,7 @@
 /* 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;
@@ -31,9 +31,12 @@
 }
 .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;
@@ -41,9 +44,12 @@
   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; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@birdycom/omniaui",
-  "version": "0.12.3",
+  "version": "0.12.4",
   "description": "OmniaUI components: CSS-first UI built on native HTML (dialog, popover, details) with light-dark() theming — no JavaScript required. Includes the omniaui CLI (add/list).",
   "type": "module",
   "license": "MIT",
@@ -57,7 +57,7 @@
     "omniaui": "./bin/omniaui.mjs"
   },
   "peerDependencies": {
-    "@birdycom/omniacss": "^0.12.3"
+    "@birdycom/omniacss": "^0.12.4"
   },
   "peerDependenciesMeta": {
     "@birdycom/omniacss": {