@vectoriox/iox-ui 5.41.0 → 5.41.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/composite-core/index.d.ts +2 -0
  2. package/fesm2022/vectoriox-iox-ui-composite-core.mjs +7 -5
  3. package/fesm2022/vectoriox-iox-ui-composite-core.mjs.map +1 -1
  4. package/fesm2022/vectoriox-iox-ui-generation-core.mjs +69 -24
  5. package/fesm2022/vectoriox-iox-ui-generation-core.mjs.map +1 -1
  6. package/generation-core/index.d.ts +57 -12
  7. package/package.json +1 -1
  8. package/src/composite-core/card.ts +6 -4
  9. package/src/composite-core/segmented.ts +4 -2
  10. package/src/generation-core/compose-site.ts +1 -0
  11. package/src/generation-core/patterns.ts +4 -3
  12. package/src/generation-core/site-spec.generated.ts +68 -24
package/generation-core/index.d.ts CHANGED
@@ -914,6 +914,9 @@ declare const SPEC_SITE_PATTERNS: {
914
914
  readonly slot: "eyebrow";
915
915
  readonly ph: "copy";
916
916
  readonly text: "Pricing";
917
+ readonly lay: {
918
+ readonly textAlign: "center";
919
+ };
917
920
  }, {
918
921
  readonly t: "Heading";
919
922
  readonly es: "h2";
@@ -921,6 +924,9 @@ declare const SPEC_SITE_PATTERNS: {
921
924
  readonly slot: "title";
922
925
  readonly ph: "copy";
923
926
  readonly text: "Plans";
927
+ readonly lay: {
928
+ readonly textAlign: "center";
929
+ };
924
930
  }];
925
931
  }, {
926
932
  readonly t: "Container";
@@ -934,6 +940,7 @@ declare const SPEC_SITE_PATTERNS: {
934
940
  readonly position: "sticky";
935
941
  readonly top: "calc(12px + env(safe-area-inset-top, 0px))";
936
942
  readonly zIndex: "2";
943
+ readonly width: "100%";
937
944
  };
938
945
  };
939
946
  }, {
@@ -982,10 +989,16 @@ declare const SPEC_SITE_PATTERNS: {
982
989
  readonly es: "price";
983
990
  readonly ph: "price";
984
991
  readonly text: "Monthly price";
992
+ readonly lay: {
993
+ readonly width: "auto";
994
+ };
985
995
  }, {
986
996
  readonly t: "Text";
987
997
  readonly es: "small";
988
998
  readonly text: "per month";
999
+ readonly lay: {
1000
+ readonly width: "auto";
1001
+ };
989
1002
  }];
990
1003
  }, {
991
1004
  readonly t: "Container";
@@ -1003,10 +1016,16 @@ declare const SPEC_SITE_PATTERNS: {
1003
1016
  readonly es: "price";
1004
1017
  readonly ph: "price";
1005
1018
  readonly text: "Yearly price";
1019
+ readonly lay: {
1020
+ readonly width: "auto";
1021
+ };
1006
1022
  }, {
1007
1023
  readonly t: "Text";
1008
1024
  readonly es: "small";
1009
1025
  readonly text: "per year";
1026
+ readonly lay: {
1027
+ readonly width: "auto";
1028
+ };
1010
1029
  }];
1011
1030
  }, {
1012
1031
  readonly t: "Container";
@@ -1024,7 +1043,7 @@ declare const SPEC_SITE_PATTERNS: {
1024
1043
  readonly display: "flex";
1025
1044
  readonly flexWrap: "nowrap";
1026
1045
  readonly gap: "8px";
1027
- readonly alignItems: "flex-start";
1046
+ readonly alignItems: "center";
1028
1047
  };
1029
1048
  readonly c: readonly [{
1030
1049
  readonly t: "Icon";
@@ -1043,7 +1062,7 @@ declare const SPEC_SITE_PATTERNS: {
1043
1062
  readonly display: "flex";
1044
1063
  readonly flexWrap: "nowrap";
1045
1064
  readonly gap: "8px";
1046
- readonly alignItems: "flex-start";
1065
+ readonly alignItems: "center";
1047
1066
  };
1048
1067
  readonly c: readonly [{
1049
1068
  readonly t: "Icon";
@@ -1062,7 +1081,7 @@ declare const SPEC_SITE_PATTERNS: {
1062
1081
  readonly display: "flex";
1063
1082
  readonly flexWrap: "nowrap";
1064
1083
  readonly gap: "8px";
1065
- readonly alignItems: "flex-start";
1084
+ readonly alignItems: "center";
1066
1085
  };
1067
1086
  readonly c: readonly [{
1068
1087
  readonly t: "Icon";
@@ -1103,6 +1122,7 @@ declare const SPEC_SITE_PATTERNS: {
1103
1122
  readonly ph: "copy";
1104
1123
  readonly scheme: "accent";
1105
1124
  readonly badge: "neutral";
1125
+ readonly icon: "ph ph-sparkle";
1106
1126
  readonly parts: {
1107
1127
  readonly media: false;
1108
1128
  readonly eyebrow: false;
@@ -1130,10 +1150,16 @@ declare const SPEC_SITE_PATTERNS: {
1130
1150
  readonly es: "price";
1131
1151
  readonly ph: "price";
1132
1152
  readonly text: "Monthly price";
1153
+ readonly lay: {
1154
+ readonly width: "auto";
1155
+ };
1133
1156
  }, {
1134
1157
  readonly t: "Text";
1135
1158
  readonly es: "small";
1136
1159
  readonly text: "per month";
1160
+ readonly lay: {
1161
+ readonly width: "auto";
1162
+ };
1137
1163
  }];
1138
1164
  }, {
1139
1165
  readonly t: "Container";
@@ -1151,10 +1177,16 @@ declare const SPEC_SITE_PATTERNS: {
1151
1177
  readonly es: "price";
1152
1178
  readonly ph: "price";
1153
1179
  readonly text: "Yearly price";
1180
+ readonly lay: {
1181
+ readonly width: "auto";
1182
+ };
1154
1183
  }, {
1155
1184
  readonly t: "Text";
1156
1185
  readonly es: "small";
1157
1186
  readonly text: "per year";
1187
+ readonly lay: {
1188
+ readonly width: "auto";
1189
+ };
1158
1190
  }];
1159
1191
  }, {
1160
1192
  readonly t: "Container";
@@ -1172,7 +1204,7 @@ declare const SPEC_SITE_PATTERNS: {
1172
1204
  readonly display: "flex";
1173
1205
  readonly flexWrap: "nowrap";
1174
1206
  readonly gap: "8px";
1175
- readonly alignItems: "flex-start";
1207
+ readonly alignItems: "center";
1176
1208
  };
1177
1209
  readonly c: readonly [{
1178
1210
  readonly t: "Icon";
@@ -1191,7 +1223,7 @@ declare const SPEC_SITE_PATTERNS: {
1191
1223
  readonly display: "flex";
1192
1224
  readonly flexWrap: "nowrap";
1193
1225
  readonly gap: "8px";
1194
- readonly alignItems: "flex-start";
1226
+ readonly alignItems: "center";
1195
1227
  };
1196
1228
  readonly c: readonly [{
1197
1229
  readonly t: "Icon";
@@ -1210,7 +1242,7 @@ declare const SPEC_SITE_PATTERNS: {
1210
1242
  readonly display: "flex";
1211
1243
  readonly flexWrap: "nowrap";
1212
1244
  readonly gap: "8px";
1213
- readonly alignItems: "flex-start";
1245
+ readonly alignItems: "center";
1214
1246
  };
1215
1247
  readonly c: readonly [{
1216
1248
  readonly t: "Icon";
@@ -1275,10 +1307,16 @@ declare const SPEC_SITE_PATTERNS: {
1275
1307
  readonly es: "price";
1276
1308
  readonly ph: "price";
1277
1309
  readonly text: "Monthly price";
1310
+ readonly lay: {
1311
+ readonly width: "auto";
1312
+ };
1278
1313
  }, {
1279
1314
  readonly t: "Text";
1280
1315
  readonly es: "small";
1281
1316
  readonly text: "per month";
1317
+ readonly lay: {
1318
+ readonly width: "auto";
1319
+ };
1282
1320
  }];
1283
1321
  }, {
1284
1322
  readonly t: "Container";
@@ -1296,10 +1334,16 @@ declare const SPEC_SITE_PATTERNS: {
1296
1334
  readonly es: "price";
1297
1335
  readonly ph: "price";
1298
1336
  readonly text: "Yearly price";
1337
+ readonly lay: {
1338
+ readonly width: "auto";
1339
+ };
1299
1340
  }, {
1300
1341
  readonly t: "Text";
1301
1342
  readonly es: "small";
1302
1343
  readonly text: "per year";
1344
+ readonly lay: {
1345
+ readonly width: "auto";
1346
+ };
1303
1347
  }];
1304
1348
  }, {
1305
1349
  readonly t: "Container";
@@ -1317,7 +1361,7 @@ declare const SPEC_SITE_PATTERNS: {
1317
1361
  readonly display: "flex";
1318
1362
  readonly flexWrap: "nowrap";
1319
1363
  readonly gap: "8px";
1320
- readonly alignItems: "flex-start";
1364
+ readonly alignItems: "center";
1321
1365
  };
1322
1366
  readonly c: readonly [{
1323
1367
  readonly t: "Icon";
@@ -1336,7 +1380,7 @@ declare const SPEC_SITE_PATTERNS: {
1336
1380
  readonly display: "flex";
1337
1381
  readonly flexWrap: "nowrap";
1338
1382
  readonly gap: "8px";
1339
- readonly alignItems: "flex-start";
1383
+ readonly alignItems: "center";
1340
1384
  };
1341
1385
  readonly c: readonly [{
1342
1386
  readonly t: "Icon";
@@ -1355,7 +1399,7 @@ declare const SPEC_SITE_PATTERNS: {
1355
1399
  readonly display: "flex";
1356
1400
  readonly flexWrap: "nowrap";
1357
1401
  readonly gap: "8px";
1358
- readonly alignItems: "flex-start";
1402
+ readonly alignItems: "center";
1359
1403
  };
1360
1404
  readonly c: readonly [{
1361
1405
  readonly t: "Icon";
@@ -1905,8 +1949,9 @@ interface SitePlan {
1905
1949
  * CC4b (`pricing.tiers`): `recipe: 'segmented'` stamps a Segmented control (Monthly · Yearly, named by `name`, its own
1906
1950
  * `lay` / `resp`) · `shownWhen` hides a node at base and shows it while the pattern's segmented option of that key is
1907
1951
  * on (the targeted `trigger-on`) · `ph: 'price'` a price the studio types (a publish-blocking placeholder showing its
1908
- * label) · on a card recipe: `words` (title / text / badge), `badge` (the badge's tone), `scheme` (the Brand card), and
1909
- * `c` — nodes joining its Content column · `icon` an Icon's glyph · `layer` the node's name in the layer tree.
1952
+ * label) · on a card recipe: `words` (title / text / badge), `badge` (the badge's tone) and `icon` (its glyph), `scheme`
1953
+ * (the Brand card), and `c` — nodes joining its Content column · `icon` an Icon's glyph · `layer` the node's name in the
1954
+ * layer tree.
1910
1955
  */
1911
1956
  interface PatternNode {
1912
1957
  readonly t: string;
@@ -1951,7 +1996,7 @@ interface PatternNode {
1951
1996
  readonly words?: Readonly<Record<string, string>>;
1952
1997
  /** CC4b: a card recipe's badge tone (`neutral` · `success` · `warning` · `accent`). */
1953
1998
  readonly badge?: string;
1954
- /** CC4b: an Icon's glyph (`ph ph-check`). */
1999
+ /** CC4b: an Icon's glyph (`ph ph-check`) — on a card recipe, its badge's glyph. */
1955
2000
  readonly icon?: string;
1956
2001
  /** CC4b: the node's name in the layer tree (`Price · Monthly`). */
1957
2002
  readonly layer?: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vectoriox/iox-ui",
3
- "version": "5.41.0",
3
+ "version": "5.41.1",
4
4
  "peerDependencies": {
5
5
  "@angular/common": ">=20.0.0",
6
6
  "@angular/core": ">=20.0.0",
package/src/composite-core/card.ts CHANGED
@@ -230,6 +230,8 @@ export interface CardOptions extends CardEditOptions {
230
230
  parts?: Partial<Record<CardPart, boolean>>;
231
231
  words?: Partial<CardWords>;
232
232
  badgeTone?: BadgeTone;
233
+ /** The badge's glyph (else its tone's — `BADGE_TONE_ICONS`): the pricing pattern's "Most popular" sparkle (CC4b). */
234
+ badgeIcon?: string;
233
235
  }
234
236
 
235
237
 
@@ -249,7 +251,7 @@ function buttonLabel(create: CompositeNodeFactory, key: string, words: string):
249
251
  }
250
252
 
251
253
  /** Each optional part (and the locked title) as the recipe builds it. */
252
- const PART_BUILDERS: Readonly<Record<CardPart, (create: CompositeNodeFactory, words: CardWords, tone: BadgeTone) => CompositeNode>> = {
254
+ const PART_BUILDERS: Readonly<Record<CardPart, (create: CompositeNodeFactory, words: CardWords, tone: BadgeTone, badgeIcon?: string) => CompositeNode>> = {
253
255
  [CardPart.Media]: (create) => {
254
256
  const media = make(create, 'media', Type.Container, CardRole.Media, Style.Box, {}, 'Media');
255
257
  const image = make(create, 'image', Type.Image, null, Style.Media, { src: '', alt: '' });
@@ -257,8 +259,8 @@ const PART_BUILDERS: Readonly<Record<CardPart, (create: CompositeNodeFactory, wo
257
259
  media.children = [image];
258
260
  return media;
259
261
  },
260
- [CardPart.Badge]: (create, words, tone) => {
261
- const badge = buildBadge(create, { tone, text: words.badge, key: 'badge' });
262
+ [CardPart.Badge]: (create, words, tone, badgeIcon) => {
263
+ const badge = buildBadge(create, { tone, text: words.badge, key: 'badge', ...(badgeIcon ? { icon: badgeIcon } : {}) });
262
264
  badge.role = CardRole.Badge;
263
265
  badge.label = 'Badge';
264
266
  return badge;
@@ -296,7 +298,7 @@ export function buildCardRecipe(create: CompositeNodeFactory, options: CardOptio
296
298
  ...(on(CardPart.Actions) ? [PART_BUILDERS[CardPart.Actions](create, words, tone)] : []),
297
299
  ];
298
300
  card.children = [...(on(CardPart.Media) ? [PART_BUILDERS[CardPart.Media](create, words, tone)] : []), content];
299
- if (on(CardPart.Badge)) placeBadge(card, PART_BUILDERS[CardPart.Badge](create, words, tone), true);
301
+ if (on(CardPart.Badge)) placeBadge(card, PART_BUILDERS[CardPart.Badge](create, words, tone, options.badgeIcon), true);
300
302
  applyCardLayout(card, options.layout ?? CardLayout.Top, options);
301
303
  return card;
302
304
  }
package/src/composite-core/segmented.ts CHANGED
@@ -68,10 +68,12 @@ enum Style {
68
68
  const ZERO_BOX = '0px 0px 0px 0px';
69
69
 
70
70
  /** What each part holds — layout only; its LOOK is its element style (the track's fill, border, radius and pad; the
71
- * option's ink, pad, radius and 44px target). The options sit in a flex row a gap token apart (board 10). */
71
+ * option's ink, pad, radius and 44px target). The options sit in a flex row a gap token apart (board 10); each GROWS,
72
+ * which changes nothing while the track hugs them and shares the row when the track is stretched (the pricing
73
+ * pattern's phone layer: board 10's full-width control). */
72
74
  const PART_BASE: Readonly<Record<string, Readonly<Record<string, string>>>> = {
73
75
  [SegmentedRole.Segmented]: { display: 'inline-flex', flexDirection: 'row', alignItems: 'stretch', gap: 'var(--iox-segmented-gap)', width: 'auto', maxWidth: '100%', height: 'auto' },
74
- [SegmentedRole.Option]: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: '8px', width: 'auto', height: 'auto', cursor: 'pointer' },
76
+ [SegmentedRole.Option]: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: '8px', width: 'auto', height: 'auto', cursor: 'pointer', flexGrow: '1' },
75
77
  };
76
78
  const LABEL_BASE: Readonly<Record<string, string>> = { width: 'auto', minHeight: 'auto', padding: ZERO_BOX, margin: ZERO_BOX };
77
79
  /** The badge inside an option keeps to the option's row (never its own line). */
package/src/generation-core/compose-site.ts CHANGED
@@ -672,6 +672,7 @@ function composeRecipe(pn: PatternNode, id: string, repeater: RepeaterScope | nu
672
672
  for (const key of Object.keys(pn.words ?? {})) if (!CARD_WORD_KEYS.includes(key)) throw new ComposeError(`${id}: a card has no words "${key}"`);
673
673
  const card = buildCardRecipe(factory, {
674
674
  layout, parts: pn.parts as Partial<Record<CardPart, boolean>>, words: pn.words as Partial<CardWords> | undefined, badgeTone: tone,
675
+ ...(pn.icon ? { badgeIcon: pn.icon } : {}),
675
676
  }) as SerializedNode;
676
677
  if (pn.scheme) {
677
678
  if (!COLOR_SCHEMES.some(c => c.id === pn.scheme)) throw new ComposeError(`${id}: no colour scheme "${pn.scheme}"`);
package/src/generation-core/patterns.ts CHANGED
@@ -25,8 +25,9 @@ import { SPEC_SITE_PATTERNS } from './site-spec.generated';
25
25
  * CC4b (`pricing.tiers`): `recipe: 'segmented'` stamps a Segmented control (Monthly · Yearly, named by `name`, its own
26
26
  * `lay` / `resp`) · `shownWhen` hides a node at base and shows it while the pattern's segmented option of that key is
27
27
  * on (the targeted `trigger-on`) · `ph: 'price'` a price the studio types (a publish-blocking placeholder showing its
28
- * label) · on a card recipe: `words` (title / text / badge), `badge` (the badge's tone), `scheme` (the Brand card), and
29
- * `c` — nodes joining its Content column · `icon` an Icon's glyph · `layer` the node's name in the layer tree.
28
+ * label) · on a card recipe: `words` (title / text / badge), `badge` (the badge's tone) and `icon` (its glyph), `scheme`
29
+ * (the Brand card), and `c` — nodes joining its Content column · `icon` an Icon's glyph · `layer` the node's name in the
30
+ * layer tree.
30
31
  */
31
32
  export interface PatternNode {
32
33
  readonly t: string;
@@ -71,7 +72,7 @@ export interface PatternNode {
71
72
  readonly words?: Readonly<Record<string, string>>;
72
73
  /** CC4b: a card recipe's badge tone (`neutral` · `success` · `warning` · `accent`). */
73
74
  readonly badge?: string;
74
- /** CC4b: an Icon's glyph (`ph ph-check`). */
75
+ /** CC4b: an Icon's glyph (`ph ph-check`) — on a card recipe, its badge's glyph. */
75
76
  readonly icon?: string;
76
77
  /** CC4b: the node's name in the layer tree (`Price · Monthly`). */
77
78
  readonly layer?: string;
package/src/generation-core/site-spec.generated.ts CHANGED
@@ -1048,7 +1048,10 @@ export const SPEC_SITE_PATTERNS = {
1048
1048
  "es": "eyebrow",
1049
1049
  "slot": "eyebrow",
1050
1050
  "ph": "copy",
1051
- "text": "Pricing"
1051
+ "text": "Pricing",
1052
+ "lay": {
1053
+ "textAlign": "center"
1054
+ }
1052
1055
  },
1053
1056
  {
1054
1057
  "t": "Heading",
@@ -1056,7 +1059,10 @@ export const SPEC_SITE_PATTERNS = {
1056
1059
  "level": "h2",
1057
1060
  "slot": "title",
1058
1061
  "ph": "copy",
1059
- "text": "Plans"
1062
+ "text": "Plans",
1063
+ "lay": {
1064
+ "textAlign": "center"
1065
+ }
1060
1066
  }
1061
1067
  ]
1062
1068
  },
@@ -1071,7 +1077,8 @@ export const SPEC_SITE_PATTERNS = {
1071
1077
  "mobile": {
1072
1078
  "position": "sticky",
1073
1079
  "top": "calc(12px + env(safe-area-inset-top, 0px))",
1074
- "zIndex": "2"
1080
+ "zIndex": "2",
1081
+ "width": "100%"
1075
1082
  }
1076
1083
  }
1077
1084
  },
@@ -1123,12 +1130,18 @@ export const SPEC_SITE_PATTERNS = {
1123
1130
  "t": "Text",
1124
1131
  "es": "price",
1125
1132
  "ph": "price",
1126
- "text": "Monthly price"
1133
+ "text": "Monthly price",
1134
+ "lay": {
1135
+ "width": "auto"
1136
+ }
1127
1137
  },
1128
1138
  {
1129
1139
  "t": "Text",
1130
1140
  "es": "small",
1131
- "text": "per month"
1141
+ "text": "per month",
1142
+ "lay": {
1143
+ "width": "auto"
1144
+ }
1132
1145
  }
1133
1146
  ]
1134
1147
  },
@@ -1148,12 +1161,18 @@ export const SPEC_SITE_PATTERNS = {
1148
1161
  "t": "Text",
1149
1162
  "es": "price",
1150
1163
  "ph": "price",
1151
- "text": "Yearly price"
1164
+ "text": "Yearly price",
1165
+ "lay": {
1166
+ "width": "auto"
1167
+ }
1152
1168
  },
1153
1169
  {
1154
1170
  "t": "Text",
1155
1171
  "es": "small",
1156
- "text": "per year"
1172
+ "text": "per year",
1173
+ "lay": {
1174
+ "width": "auto"
1175
+ }
1157
1176
  }
1158
1177
  ]
1159
1178
  },
@@ -1174,7 +1193,7 @@ export const SPEC_SITE_PATTERNS = {
1174
1193
  "display": "flex",
1175
1194
  "flexWrap": "nowrap",
1176
1195
  "gap": "8px",
1177
- "alignItems": "flex-start"
1196
+ "alignItems": "center"
1178
1197
  },
1179
1198
  "c": [
1180
1199
  {
@@ -1197,7 +1216,7 @@ export const SPEC_SITE_PATTERNS = {
1197
1216
  "display": "flex",
1198
1217
  "flexWrap": "nowrap",
1199
1218
  "gap": "8px",
1200
- "alignItems": "flex-start"
1219
+ "alignItems": "center"
1201
1220
  },
1202
1221
  "c": [
1203
1222
  {
@@ -1220,7 +1239,7 @@ export const SPEC_SITE_PATTERNS = {
1220
1239
  "display": "flex",
1221
1240
  "flexWrap": "nowrap",
1222
1241
  "gap": "8px",
1223
- "alignItems": "flex-start"
1242
+ "alignItems": "center"
1224
1243
  },
1225
1244
  "c": [
1226
1245
  {
@@ -1270,6 +1289,7 @@ export const SPEC_SITE_PATTERNS = {
1270
1289
  "ph": "copy",
1271
1290
  "scheme": "accent",
1272
1291
  "badge": "neutral",
1292
+ "icon": "ph ph-sparkle",
1273
1293
  "parts": {
1274
1294
  "media": false,
1275
1295
  "eyebrow": false,
@@ -1298,12 +1318,18 @@ export const SPEC_SITE_PATTERNS = {
1298
1318
  "t": "Text",
1299
1319
  "es": "price",
1300
1320
  "ph": "price",
1301
- "text": "Monthly price"
1321
+ "text": "Monthly price",
1322
+ "lay": {
1323
+ "width": "auto"
1324
+ }
1302
1325
  },
1303
1326
  {
1304
1327
  "t": "Text",
1305
1328
  "es": "small",
1306
- "text": "per month"
1329
+ "text": "per month",
1330
+ "lay": {
1331
+ "width": "auto"
1332
+ }
1307
1333
  }
1308
1334
  ]
1309
1335
  },
@@ -1323,12 +1349,18 @@ export const SPEC_SITE_PATTERNS = {
1323
1349
  "t": "Text",
1324
1350
  "es": "price",
1325
1351
  "ph": "price",
1326
- "text": "Yearly price"
1352
+ "text": "Yearly price",
1353
+ "lay": {
1354
+ "width": "auto"
1355
+ }
1327
1356
  },
1328
1357
  {
1329
1358
  "t": "Text",
1330
1359
  "es": "small",
1331
- "text": "per year"
1360
+ "text": "per year",
1361
+ "lay": {
1362
+ "width": "auto"
1363
+ }
1332
1364
  }
1333
1365
  ]
1334
1366
  },
@@ -1349,7 +1381,7 @@ export const SPEC_SITE_PATTERNS = {
1349
1381
  "display": "flex",
1350
1382
  "flexWrap": "nowrap",
1351
1383
  "gap": "8px",
1352
- "alignItems": "flex-start"
1384
+ "alignItems": "center"
1353
1385
  },
1354
1386
  "c": [
1355
1387
  {
@@ -1372,7 +1404,7 @@ export const SPEC_SITE_PATTERNS = {
1372
1404
  "display": "flex",
1373
1405
  "flexWrap": "nowrap",
1374
1406
  "gap": "8px",
1375
- "alignItems": "flex-start"
1407
+ "alignItems": "center"
1376
1408
  },
1377
1409
  "c": [
1378
1410
  {
@@ -1395,7 +1427,7 @@ export const SPEC_SITE_PATTERNS = {
1395
1427
  "display": "flex",
1396
1428
  "flexWrap": "nowrap",
1397
1429
  "gap": "8px",
1398
- "alignItems": "flex-start"
1430
+ "alignItems": "center"
1399
1431
  },
1400
1432
  "c": [
1401
1433
  {
@@ -1470,12 +1502,18 @@ export const SPEC_SITE_PATTERNS = {
1470
1502
  "t": "Text",
1471
1503
  "es": "price",
1472
1504
  "ph": "price",
1473
- "text": "Monthly price"
1505
+ "text": "Monthly price",
1506
+ "lay": {
1507
+ "width": "auto"
1508
+ }
1474
1509
  },
1475
1510
  {
1476
1511
  "t": "Text",
1477
1512
  "es": "small",
1478
- "text": "per month"
1513
+ "text": "per month",
1514
+ "lay": {
1515
+ "width": "auto"
1516
+ }
1479
1517
  }
1480
1518
  ]
1481
1519
  },
@@ -1495,12 +1533,18 @@ export const SPEC_SITE_PATTERNS = {
1495
1533
  "t": "Text",
1496
1534
  "es": "price",
1497
1535
  "ph": "price",
1498
- "text": "Yearly price"
1536
+ "text": "Yearly price",
1537
+ "lay": {
1538
+ "width": "auto"
1539
+ }
1499
1540
  },
1500
1541
  {
1501
1542
  "t": "Text",
1502
1543
  "es": "small",
1503
- "text": "per year"
1544
+ "text": "per year",
1545
+ "lay": {
1546
+ "width": "auto"
1547
+ }
1504
1548
  }
1505
1549
  ]
1506
1550
  },
@@ -1521,7 +1565,7 @@ export const SPEC_SITE_PATTERNS = {
1521
1565
  "display": "flex",
1522
1566
  "flexWrap": "nowrap",
1523
1567
  "gap": "8px",
1524
- "alignItems": "flex-start"
1568
+ "alignItems": "center"
1525
1569
  },
1526
1570
  "c": [
1527
1571
  {
@@ -1544,7 +1588,7 @@ export const SPEC_SITE_PATTERNS = {
1544
1588
  "display": "flex",
1545
1589
  "flexWrap": "nowrap",
1546
1590
  "gap": "8px",
1547
- "alignItems": "flex-start"
1591
+ "alignItems": "center"
1548
1592
  },
1549
1593
  "c": [
1550
1594
  {
@@ -1567,7 +1611,7 @@ export const SPEC_SITE_PATTERNS = {
1567
1611
  "display": "flex",
1568
1612
  "flexWrap": "nowrap",
1569
1613
  "gap": "8px",
1570
- "alignItems": "flex-start"
1614
+ "alignItems": "center"
1571
1615
  },
1572
1616
  "c": [
1573
1617
  {