@vectoriox/iox-ui 5.38.0 → 5.39.0

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

@@ -1017,6 +1017,41 @@ 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",
@@ -1939,6 +1974,48 @@ 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",
@@ -4163,6 +4240,55 @@ 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",
@@ -5805,6 +5931,55 @@ 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",
@@ -7441,6 +7616,55 @@ 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",
@@ -9118,6 +9342,55 @@ 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",
@@ -10757,6 +11030,55 @@ 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",
@@ -12402,6 +12724,55 @@ 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",
@@ -12894,8 +13265,11 @@ var ElementStyleState;
     ElementStyleState["Focus"] = "focus";
     /** The page you're on (CC1 N2): compiles to `[aria-current="page"]`, never a pseudo-class. */
     ElementStyleState["Current"] = "current";
+    /** A composite part that is ON — the active tab (CC4a "Active"): compiles to `[data-iox-on]`, the attribute every
+     *  composite runtime writes. */
+    ElementStyleState["On"] = "on";
 })(ElementStyleState || (ElementStyleState = {}));
-const ELEMENT_STYLE_STATES = [ElementStyleState.Hover, ElementStyleState.Active, ElementStyleState.Focus, ElementStyleState.Current];
+const ELEMENT_STYLE_STATES = [ElementStyleState.Hover, ElementStyleState.Active, ElementStyleState.Focus, ElementStyleState.Current, ElementStyleState.On];
 const ELEMENT_STYLES = SPEC_ELEMENT_STYLES;
 /** Legacy `Button.variant` → the element style it maps to (adopt, DS7). */
 const BUTTON_VARIANT_TO_STYLE = SPEC_BUTTON_VARIANT_TO_STYLE;
@@ -12972,7 +13346,7 @@ function ownedEntries(style) {
     }
     return out;
 }
-/** Every trait the style owns with the value it writes — base first, then hover/active/focus/current. */
+/** Every trait the style owns with the value it writes — base first, then hover/active/focus/current/on. */
 function ownedTraitsOf(style) {
     return ownedEntries(style);
 }
@@ -13001,7 +13375,7 @@ function writeEntries(target, style, skip = []) {
     target.elementStyle = style.id;
     return unknown;
 }
-/** Write the style's exact base map and its hover/active/focus/current maps into the target. */
+/** Write the style's exact base map and its hover/active/focus/current/on maps into the target. */
 function applyElementStyle(target, id) {
     const style = elementStyleById(id);
     if (!style)
@@ -14657,6 +15031,8 @@ function auditDesignContrast(rows, mode) {
                     ['base', ownStyle(e)],
                     ...(e.hover ? [['hover', { ...ownStyle(e), ...e.hover }]] : []),
                     ...(e.current ? [['current', { ...ownStyle(e), ...e.current }]] : []),
+                    // `on` (CC4a): the active tab, on every ground it can sit on.
+                    ...(e.on ? [['on', { ...ownStyle(e), ...e.on }]] : []),
                 ];
                 const glyph = e.group === GLYPH_GROUP;
                 for (const [state, s] of states) {
@@ -14664,6 +15040,10 @@ function auditDesignContrast(rows, mode) {
                     const under = fill.length && opaque(fill) ? overAll(fill, bgs) : bgs;
                     const ink = s['color'] ? parseCssColour(resolveIn(values, s['color']), boxInk) : boxInk;
                     check(e.id, state === 'base' ? (glyph ? 'glyph' : 'text') : `${state} text`, ink, under, glyph ? WCAG_AA_UI : WCAG_AA_TEXT);
+                    // The active tab's mark is the selected state's indicator (WCAG 1.4.11) — the contract's audit, 1:1.
+                    const mark = state === 'on' ? e.on?.['borderColor'] : undefined;
+                    if (mark)
+                        check(e.id, 'on mark', parseCssColour(resolveIn(values, mark), ink), bgs, WCAG_AA_UI);
                     // What a filled element HOLDS (inkScopes): a button's or a badge's icon reads its ink.
                     if (state === 'base' && INK_SCOPES.some(sc => sc.styles.includes(e.id))) {
                         check(e.id, 'icon', parseCssColour(resolveIn(inkScoped(values, e.id), iconColour), ink), under, WCAG_AA_UI);