@vectoriox/iox-ui 5.41.0 → 5.42.0

package/composite-core/index.d.ts

@@ -758,6 +758,8 @@ interface CardOptions extends CardEditOptions {
     parts?: Partial<Record<CardPart, boolean>>;
     words?: Partial<CardWords>;
     badgeTone?: BadgeTone;
+    /** The badge's glyph (else its tone's — `BADGE_TONE_ICONS`): the pricing pattern's "Most popular" sparkle (CC4b). */
+    badgeIcon?: string;
 }
 /** A fresh Card v2: every part a node with its role and element style, laid out by `options.layout`. */
 declare function buildCardRecipe(create: CompositeNodeFactory, options?: CardOptions): CompositeNode;

package/fesm2022/vectoriox-iox-ui-composite-core.mjs

@@ -1690,8 +1690,8 @@ const PART_BUILDERS = {
         media.children = [image];
         return media;
     },
-    [CardPart.Badge]: (create, words, tone) => {
-        const badge = buildBadge(create, { tone, text: words.badge, key: 'badge' });
+    [CardPart.Badge]: (create, words, tone, badgeIcon) => {
+        const badge = buildBadge(create, { tone, text: words.badge, key: 'badge', ...(badgeIcon ? { icon: badgeIcon } : {}) });
         badge.role = CardRole.Badge;
         badge.label = 'Badge';
         return badge;
@@ -1728,7 +1728,7 @@ function buildCardRecipe(create, options = {}) {
     ];
     card.children = [...(on(CardPart.Media) ? [PART_BUILDERS[CardPart.Media](create, words, tone)] : []), content];
     if (on(CardPart.Badge))
-        placeBadge(card, PART_BUILDERS[CardPart.Badge](create, words, tone), true);
+        placeBadge(card, PART_BUILDERS[CardPart.Badge](create, words, tone, options.badgeIcon), true);
     applyCardLayout(card, options.layout ?? CardLayout.Top, options);
     return card;
 }
@@ -3237,10 +3237,12 @@ var Style;
 })(Style || (Style = {}));
 const ZERO_BOX = '0px 0px 0px 0px';
 /** What each part holds — layout only; its LOOK is its element style (the track's fill, border, radius and pad; the
- *  option's ink, pad, radius and 44px target). The options sit in a flex row a gap token apart (board 10). */
+ *  option's ink, pad, radius and 44px target). The options sit in a flex row a gap token apart (board 10); each GROWS,
+ *  which changes nothing while the track hugs them and shares the row when the track is stretched (the pricing
+ *  pattern's phone layer: board 10's full-width control). */
 const PART_BASE = {
     [SegmentedRole.Segmented]: { display: 'inline-flex', flexDirection: 'row', alignItems: 'stretch', gap: 'var(--iox-segmented-gap)', width: 'auto', maxWidth: '100%', height: 'auto' },
-    [SegmentedRole.Option]: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: '8px', width: 'auto', height: 'auto', cursor: 'pointer' },
+    [SegmentedRole.Option]: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: '8px', width: 'auto', height: 'auto', cursor: 'pointer', flexGrow: '1' },
 };
 const LABEL_BASE = { width: 'auto', minHeight: 'auto', padding: ZERO_BOX, margin: ZERO_BOX };
 /** The badge inside an option keeps to the option's row (never its own line). */