@vectoriox/iox-ui 5.37.0 → 5.39.0

package/src/design-core/flavor-spec.generated.ts

@@ -1019,6 +1019,41 @@ export const SPEC_TIERS = {
       "type": "spacing",
       "default": "0px 0px 20px 0px"
     },
+    {
+      "name": "tab-list-border",
+      "type": "color",
+      "default": "var(--iox-line)"
+    },
+    {
+      "name": "tab-ink",
+      "type": "color",
+      "default": "var(--iox-text-muted)"
+    },
+    {
+      "name": "tab-on-ink",
+      "type": "color",
+      "default": "var(--iox-text)"
+    },
+    {
+      "name": "tab-on-mark",
+      "type": "color",
+      "default": "var(--iox-accent-text)"
+    },
+    {
+      "name": "tab-pad",
+      "type": "spacing",
+      "default": "10px 16px"
+    },
+    {
+      "name": "tab-list-border-width",
+      "type": "size",
+      "default": "0px 0px var(--iox-border-width) 0px"
+    },
+    {
+      "name": "tab-mark-width",
+      "type": "size",
+      "default": "0px 0px 2px 0px"
+    },
     {
       "name": "heading-color",
       "type": "color",
@@ -1108,6 +1143,21 @@ export const SPEC_TIERS = {
       "name": "media-scrim-ink",
       "type": "color",
       "default": "#FFFFFF"
+    },
+    {
+      "name": "video-play-bg",
+      "type": "color",
+      "default": "var(--iox-button-primary-bg)"
+    },
+    {
+      "name": "video-play-ink",
+      "type": "color",
+      "default": "var(--iox-button-primary-ink)"
+    },
+    {
+      "name": "video-play-size",
+      "type": "size",
+      "default": "64px"
     }
   ]
 } as const;
@@ -1785,7 +1835,8 @@ export const SPEC_ELEMENT_STYLES = [
     "appliesTo": [
       "Container",
       "LinkedContainer",
-      "Card"
+      "Card",
+      "SliderSlide"
     ],
     "base": {
       "color": "inherit",
@@ -1933,6 +1984,48 @@ export const SPEC_ELEMENT_STYLES = [
       "color": "var(--iox-text-muted)"
     }
   },
+  {
+    "id": "tab-list",
+    "label": "Tab list",
+    "group": "Layout",
+    "appliesTo": [
+      "Container",
+      "Repeater"
+    ],
+    "base": {
+      "color": "inherit",
+      "borderStyle": "solid",
+      "borderWidth": "var(--iox-tab-list-border-width)",
+      "borderColor": "var(--iox-tab-list-border)"
+    }
+  },
+  {
+    "id": "tab",
+    "label": "Tab",
+    "group": "Buttons",
+    "appliesTo": [
+      "ButtonBlock"
+    ],
+    "base": {
+      "color": "var(--iox-tab-ink)",
+      "padding": "var(--iox-tab-pad)",
+      "fontFamily": "var(--iox-button-font)",
+      "fontWeight": "var(--iox-button-weight)",
+      "backgroundColor": "transparent",
+      "borderStyle": "solid",
+      "borderWidth": "var(--iox-tab-mark-width)",
+      "borderColor": "transparent",
+      "transitionDuration": "var(--iox-dur-fast)",
+      "transitionTimingFunction": "var(--iox-ease-standard)"
+    },
+    "on": {
+      "color": "var(--iox-tab-on-ink)",
+      "borderColor": "var(--iox-tab-on-mark)"
+    },
+    "focus": {
+      "boxShadow": "var(--iox-focus-ring)"
+    }
+  },
   {
     "id": "media",
     "label": "Image",
@@ -1940,7 +2033,8 @@ export const SPEC_ELEMENT_STYLES = [
     "appliesTo": [
       "Image",
       "SliderSlide",
-      "Gallery"
+      "Gallery",
+      "Video"
     ],
     "base": {
       "borderRadius": "var(--iox-image-radius)",
@@ -2186,6 +2280,7 @@ export const SPEC_DEFAULT_ELEMENT_STYLE = {
   "Link": "link",
   "Image": "media",
   "SliderSlide": "media",
+  "Video": "media",
   "Divider": "rule",
   "Icon": "icon",
   "Dialog": "dialog",
@@ -4163,6 +4258,55 @@ export const SPEC_FLAVOR_PACKS = [
         "group": "components",
         "value": "0px 0px 20px 0px"
       },
+      {
+        "name": "tab-list-border",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-line)"
+      },
+      {
+        "name": "tab-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-text-muted)"
+      },
+      {
+        "name": "tab-on-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-text)"
+      },
+      {
+        "name": "tab-on-mark",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-accent-text)"
+      },
+      {
+        "name": "tab-pad",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "10px 16px"
+      },
+      {
+        "name": "tab-list-border-width",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "0px 0px var(--iox-border-width) 0px"
+      },
+      {
+        "name": "tab-mark-width",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "0px 0px 2px 0px"
+      },
       {
         "name": "heading-color",
         "tier": "component",
@@ -4288,6 +4432,27 @@ export const SPEC_FLAVOR_PACKS = [
         "type": "color",
         "group": "components",
         "value": "#FFFFFF"
+      },
+      {
+        "name": "video-play-bg",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-button-primary-bg)"
+      },
+      {
+        "name": "video-play-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-button-primary-ink)"
+      },
+      {
+        "name": "video-play-size",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "64px"
       }
     ]
   },
@@ -5784,6 +5949,55 @@ export const SPEC_FLAVOR_PACKS = [
         "group": "components",
         "value": "0px 0px 20px 0px"
       },
+      {
+        "name": "tab-list-border",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-line)"
+      },
+      {
+        "name": "tab-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-text-muted)"
+      },
+      {
+        "name": "tab-on-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-text)"
+      },
+      {
+        "name": "tab-on-mark",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-accent-text)"
+      },
+      {
+        "name": "tab-pad",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "10px 16px"
+      },
+      {
+        "name": "tab-list-border-width",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "0px 0px var(--iox-border-width) 0px"
+      },
+      {
+        "name": "tab-mark-width",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "0px 0px 2px 0px"
+      },
       {
         "name": "heading-color",
         "tier": "component",
@@ -5910,6 +6124,27 @@ export const SPEC_FLAVOR_PACKS = [
         "type": "color",
         "group": "components",
         "value": "#FFFFFF"
+      },
+      {
+        "name": "video-play-bg",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-button-primary-bg)"
+      },
+      {
+        "name": "video-play-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-button-primary-ink)"
+      },
+      {
+        "name": "video-play-size",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "64px"
       }
     ]
   },
@@ -7399,6 +7634,55 @@ export const SPEC_FLAVOR_PACKS = [
         "group": "components",
         "value": "0px 0px 20px 0px"
       },
+      {
+        "name": "tab-list-border",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-line)"
+      },
+      {
+        "name": "tab-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-text-muted)"
+      },
+      {
+        "name": "tab-on-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-text)"
+      },
+      {
+        "name": "tab-on-mark",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-accent-text)"
+      },
+      {
+        "name": "tab-pad",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "10px 16px"
+      },
+      {
+        "name": "tab-list-border-width",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "0px 0px var(--iox-border-width) 0px"
+      },
+      {
+        "name": "tab-mark-width",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "0px 0px 2px 0px"
+      },
       {
         "name": "heading-color",
         "tier": "component",
@@ -7524,6 +7808,27 @@ export const SPEC_FLAVOR_PACKS = [
         "type": "color",
         "group": "components",
         "value": "#FFFFFF"
+      },
+      {
+        "name": "video-play-bg",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-button-primary-bg)"
+      },
+      {
+        "name": "video-play-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-button-primary-ink)"
+      },
+      {
+        "name": "video-play-size",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "64px"
       }
     ]
   },
@@ -9055,6 +9360,55 @@ export const SPEC_FLAVOR_PACKS = [
         "group": "components",
         "value": "0px 0px 20px 0px"
       },
+      {
+        "name": "tab-list-border",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-line)"
+      },
+      {
+        "name": "tab-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-text-muted)"
+      },
+      {
+        "name": "tab-on-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-text)"
+      },
+      {
+        "name": "tab-on-mark",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-accent-text)"
+      },
+      {
+        "name": "tab-pad",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "10px 16px"
+      },
+      {
+        "name": "tab-list-border-width",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "0px 0px var(--iox-border-width) 0px"
+      },
+      {
+        "name": "tab-mark-width",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "0px 0px 2px 0px"
+      },
       {
         "name": "heading-color",
         "tier": "component",
@@ -9180,6 +9534,27 @@ export const SPEC_FLAVOR_PACKS = [
         "type": "color",
         "group": "components",
         "value": "#FFFFFF"
+      },
+      {
+        "name": "video-play-bg",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-button-primary-bg)"
+      },
+      {
+        "name": "video-play-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-button-primary-ink)"
+      },
+      {
+        "name": "video-play-size",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "64px"
       }
     ]
   },
@@ -10673,6 +11048,55 @@ export const SPEC_FLAVOR_PACKS = [
         "group": "components",
         "value": "0px 0px 20px 0px"
       },
+      {
+        "name": "tab-list-border",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-line)"
+      },
+      {
+        "name": "tab-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-text-muted)"
+      },
+      {
+        "name": "tab-on-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-text)"
+      },
+      {
+        "name": "tab-on-mark",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-accent-text)"
+      },
+      {
+        "name": "tab-pad",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "10px 16px"
+      },
+      {
+        "name": "tab-list-border-width",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "0px 0px var(--iox-border-width) 0px"
+      },
+      {
+        "name": "tab-mark-width",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "0px 0px 2px 0px"
+      },
       {
         "name": "heading-color",
         "tier": "component",
@@ -10798,6 +11222,27 @@ export const SPEC_FLAVOR_PACKS = [
         "type": "color",
         "group": "components",
         "value": "#FFFFFF"
+      },
+      {
+        "name": "video-play-bg",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-button-primary-bg)"
+      },
+      {
+        "name": "video-play-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-button-primary-ink)"
+      },
+      {
+        "name": "video-play-size",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "64px"
       }
     ]
   },
@@ -12297,6 +12742,55 @@ export const SPEC_FLAVOR_PACKS = [
         "group": "components",
         "value": "0px 0px 20px 0px"
       },
+      {
+        "name": "tab-list-border",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-line)"
+      },
+      {
+        "name": "tab-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-text-muted)"
+      },
+      {
+        "name": "tab-on-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-text)"
+      },
+      {
+        "name": "tab-on-mark",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-accent-text)"
+      },
+      {
+        "name": "tab-pad",
+        "tier": "component",
+        "type": "spacing",
+        "group": "components",
+        "value": "10px 16px"
+      },
+      {
+        "name": "tab-list-border-width",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "0px 0px var(--iox-border-width) 0px"
+      },
+      {
+        "name": "tab-mark-width",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "0px 0px 2px 0px"
+      },
       {
         "name": "heading-color",
         "tier": "component",
@@ -12423,6 +12917,27 @@ export const SPEC_FLAVOR_PACKS = [
         "type": "color",
         "group": "components",
         "value": "#FFFFFF"
+      },
+      {
+        "name": "video-play-bg",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-button-primary-bg)"
+      },
+      {
+        "name": "video-play-ink",
+        "tier": "component",
+        "type": "color",
+        "group": "components",
+        "value": "var(--iox-button-primary-ink)"
+      },
+      {
+        "name": "video-play-size",
+        "tier": "component",
+        "type": "size",
+        "group": "components",
+        "value": "64px"
       }
     ]
   }

package/src/generation-core/baseline-roles.ts

@@ -61,6 +61,8 @@ export const BASELINE_ROLES: Readonly<Record<string, Readonly<Record<string, Bas
     FormSuccess: { width: Behaviour, color: Look, padding: Look, borderRadius: Look, backgroundColor: Look },
     FormError: { width: Behaviour, color: Look, padding: Look, borderRadius: Look, backgroundColor: Look },
     Dialog: { width: Behaviour, padding: Look, borderRadius: Look, backgroundColor: Look, boxShadow: Look },
+    // CC3: a Video fills its column at 16 / 9 — the shape the poster and the player take.
+    Video: { width: Behaviour, aspectRatio: Behaviour },
 };
 
 /** The style values a type's constructor sets for an empty palette drop, each mapped to the value the