@vectoriox/iox-ui 5.82.2 → 5.83.1

package/design-core/index.d.ts

@@ -2705,6 +2705,22 @@ declare const SPEC_ELEMENT_STYLES: readonly [{
         readonly fontFamily: "var(--iox-font-label)";
         readonly fontSize: "var(--iox-badge-size)";
         readonly fontWeight: "var(--iox-weight-label)";
+        readonly transitionDuration: "var(--iox-dur-fast)";
+        readonly transitionTimingFunction: "var(--iox-ease-standard)";
+    };
+    readonly hover: {
+        readonly borderColor: "var(--iox-text)";
+    };
+    readonly selected: {
+        readonly backgroundColor: "var(--iox-accent-text)";
+        readonly color: "var(--iox-bg)";
+        readonly borderColor: "var(--iox-accent-text)";
+    };
+    readonly focus: {
+        readonly boxShadow: "var(--iox-focus-ring)";
+    };
+    readonly disabled: {
+        readonly opacity: "0.55";
     };
 }, {
     readonly id: "badge-label";
@@ -2729,6 +2745,54 @@ declare const SPEC_ELEMENT_STYLES: readonly [{
         readonly backgroundColor: "linear-gradient(180deg, transparent 0%, var(--iox-media-scrim) 45%)";
         readonly color: "var(--iox-media-scrim-ink)";
     };
+}, {
+    readonly id: "calendar";
+    readonly label: "Calendar";
+    readonly group: "Forms";
+    readonly appliesTo: readonly [];
+    readonly base: {
+        readonly backgroundColor: "var(--iox-surface)";
+        readonly color: "var(--iox-text)";
+        readonly borderRadius: "var(--iox-dialog-radius)";
+        readonly boxShadow: "var(--iox-dialog-shadow)";
+        readonly fontFamily: "var(--iox-font-body)";
+    };
+}, {
+    readonly id: "calendar-day";
+    readonly label: "Calendar day";
+    readonly group: "Forms";
+    readonly appliesTo: readonly [];
+    readonly base: {
+        readonly backgroundColor: "transparent";
+        readonly color: "var(--iox-text)";
+        readonly borderStyle: "solid";
+        readonly borderWidth: "var(--iox-border-width)";
+        readonly borderColor: "transparent";
+        readonly borderRadius: "var(--iox-radius-pill)";
+        readonly fontFamily: "var(--iox-font-body)";
+        readonly fontSize: "var(--iox-size-body)";
+        readonly fontVariantNumeric: "tabular-nums";
+        readonly transitionDuration: "var(--iox-dur-fast)";
+        readonly transitionTimingFunction: "var(--iox-ease-standard)";
+    };
+    readonly hover: {
+        readonly backgroundColor: "var(--iox-surface-2)";
+    };
+    readonly current: {
+        readonly borderColor: "var(--iox-line-strong)";
+    };
+    readonly selected: {
+        readonly backgroundColor: "var(--iox-accent-text)";
+        readonly color: "var(--iox-bg)";
+        readonly borderColor: "var(--iox-accent-text)";
+    };
+    readonly focus: {
+        readonly boxShadow: "var(--iox-focus-ring)";
+    };
+    readonly disabled: {
+        readonly color: "var(--iox-text-muted)";
+        readonly opacity: "0.4";
+    };
 }, {
     readonly id: "notice-success";
     readonly label: "Success message";
@@ -2980,6 +3044,112 @@ declare const SPEC_FIELD_CLASS_BASELINE: {
     readonly ".iox-es-field .iox-field__control--switch:checked": {
         readonly background: "var(--iox-accent-text)";
     };
+    readonly ".iox-es-field .iox-field__chip": {
+        readonly "background-color": "transparent";
+        readonly color: "var(--iox-text)";
+        readonly "border-style": "solid";
+        readonly "border-width": "var(--iox-border-width)";
+        readonly "border-color": "var(--iox-chip-border)";
+        readonly "border-radius": "var(--iox-badge-radius)";
+        readonly padding: "var(--iox-badge-pad)";
+        readonly "font-family": "var(--iox-font-label)";
+        readonly "font-size": "var(--iox-badge-size)";
+        readonly "font-weight": "var(--iox-weight-label)";
+        readonly transition: "border-color var(--iox-dur-fast) var(--iox-ease-standard), background-color var(--iox-dur-fast) var(--iox-ease-standard), color var(--iox-dur-fast) var(--iox-ease-standard), box-shadow var(--iox-dur-fast) var(--iox-ease-standard), opacity var(--iox-dur-fast) var(--iox-ease-standard), transform var(--iox-dur-fast) var(--iox-ease-standard)";
+    };
+    readonly ".iox-es-field .iox-field__chip:active:not(:has(:disabled))": {
+        readonly transform: "scale(var(--iox-press-scale))";
+    };
+    readonly ".iox-es-field .iox-field__chip:hover:not(:has(:disabled))": {
+        readonly "border-color": "var(--iox-text)";
+    };
+    readonly ".iox-es-field .iox-field__chip:has(:checked)": {
+        readonly "background-color": "var(--iox-accent-text)";
+        readonly color: "var(--iox-bg)";
+        readonly "border-color": "var(--iox-accent-text)";
+    };
+    readonly ".iox-es-field .iox-field__chip:has(:focus-visible)": {
+        readonly "box-shadow": "var(--iox-focus-ring)";
+        readonly outline: "2px solid transparent";
+        readonly "outline-offset": "2px";
+    };
+    readonly ".iox-es-field .iox-field__chip:has(:disabled)": {
+        readonly opacity: "0.55";
+    };
+    readonly ".iox-es-field .iox-field__date-value[data-iox-empty]": {
+        readonly color: "var(--iox-text-muted)";
+    };
+    readonly ".iox-es-field .iox-field__date-icon": {
+        readonly color: "var(--iox-text-muted)";
+    };
+    readonly ".iox-es-field .iox-field__control--date[aria-expanded='true']": {
+        readonly "border-color": "var(--iox-accent-text)";
+        readonly "box-shadow": "var(--iox-field-focus)";
+    };
+    readonly ".iox-es-field .iox-cal": {
+        readonly "background-color": "var(--iox-surface)";
+        readonly color: "var(--iox-text)";
+        readonly "border-radius": "var(--iox-dialog-radius)";
+        readonly "box-shadow": "var(--iox-dialog-shadow), 0 0 0 var(--iox-border-width) var(--iox-line)";
+        readonly "font-family": "var(--iox-font-body)";
+    };
+    readonly ".iox-es-field .iox-cal .iox-cal__title": {
+        readonly "font-family": "var(--iox-font-display)";
+        readonly "font-weight": "var(--iox-weight-heading)";
+        readonly color: "var(--iox-text)";
+    };
+    readonly ".iox-es-field .iox-cal .iox-cal__weekday": {
+        readonly "font-family": "var(--iox-font-label)";
+        readonly "font-size": "var(--iox-size-label)";
+        readonly "font-weight": "var(--iox-weight-label)";
+        readonly color: "var(--iox-text-muted)";
+    };
+    readonly ".iox-es-field .iox-cal .iox-cal__grab": {
+        readonly background: "var(--iox-line-strong)";
+    };
+    readonly ".iox-es-field .iox-cal .iox-cal__nav button:hover:not(:disabled)": {
+        readonly "background-color": "var(--iox-surface-2)";
+    };
+    readonly ".iox-es-field .iox-cal .iox-cal__nav button:focus-visible": {
+        readonly "box-shadow": "var(--iox-focus-ring)";
+        readonly outline: "2px solid transparent";
+        readonly "outline-offset": "2px";
+    };
+    readonly ".iox-es-field .iox-cal .iox-cal__day": {
+        readonly "background-color": "transparent";
+        readonly color: "var(--iox-text)";
+        readonly "border-style": "solid";
+        readonly "border-width": "var(--iox-border-width)";
+        readonly "border-color": "transparent";
+        readonly "border-radius": "var(--iox-radius-pill)";
+        readonly "font-family": "var(--iox-font-body)";
+        readonly "font-size": "var(--iox-size-body)";
+        readonly "font-variant-numeric": "tabular-nums";
+        readonly transition: "background-color var(--iox-dur-fast) var(--iox-ease-standard), color var(--iox-dur-fast) var(--iox-ease-standard), border-color var(--iox-dur-fast) var(--iox-ease-standard), box-shadow var(--iox-dur-fast) var(--iox-ease-standard), opacity var(--iox-dur-fast) var(--iox-ease-standard), transform var(--iox-dur-fast) var(--iox-ease-standard)";
+    };
+    readonly ".iox-es-field .iox-cal .iox-cal__day:active:not([aria-disabled='true'])": {
+        readonly transform: "scale(var(--iox-press-scale))";
+    };
+    readonly ".iox-es-field .iox-cal .iox-cal__day:hover:not([aria-disabled='true'])": {
+        readonly "background-color": "var(--iox-surface-2)";
+    };
+    readonly ".iox-es-field .iox-cal .iox-cal__day[aria-current='date']": {
+        readonly "border-color": "var(--iox-line-strong)";
+    };
+    readonly ".iox-es-field .iox-cal .iox-cal__cell[aria-selected='true'] > .iox-cal__day": {
+        readonly "background-color": "var(--iox-accent-text)";
+        readonly color: "var(--iox-bg)";
+        readonly "border-color": "var(--iox-accent-text)";
+    };
+    readonly ".iox-es-field .iox-cal .iox-cal__day[aria-disabled='true']": {
+        readonly color: "var(--iox-text-muted)";
+        readonly opacity: "0.4";
+    };
+    readonly ".iox-es-field .iox-cal .iox-cal__day:focus-visible": {
+        readonly "box-shadow": "var(--iox-focus-ring)";
+        readonly outline: "2px solid transparent";
+        readonly "outline-offset": "2px";
+    };
 };
 declare const SPEC_INK_SCOPES: readonly [{
     readonly styles: readonly ["button-primary", "button-secondary", "button-ghost"];
@@ -3164,6 +3334,36 @@ declare const SPEC_CONTRAST_AUDIT: {
         readonly fg: "var(--iox-line-strong)";
         readonly on: "var(--iox-surface)";
         readonly min: 3;
+    }, {
+        readonly part: "calendar text";
+        readonly fg: "var(--iox-text)";
+        readonly on: "var(--iox-surface)";
+        readonly min: 4.5;
+    }, {
+        readonly part: "calendar weekday";
+        readonly fg: "var(--iox-text-muted)";
+        readonly on: "var(--iox-surface)";
+        readonly min: 4.5;
+    }, {
+        readonly part: "calendar today ring";
+        readonly fg: "var(--iox-line-strong)";
+        readonly on: "var(--iox-surface)";
+        readonly min: 3;
+    }, {
+        readonly part: "calendar chosen day";
+        readonly fg: "var(--iox-accent-text)";
+        readonly on: "var(--iox-surface)";
+        readonly min: 3;
+    }, {
+        readonly part: "calendar chosen day number";
+        readonly fg: "var(--iox-bg)";
+        readonly on: "var(--iox-accent-text)";
+        readonly min: 4.5;
+    }, {
+        readonly part: "calendar day hover";
+        readonly fg: "var(--iox-text)";
+        readonly on: "var(--iox-surface-2)";
+        readonly min: 4.5;
     }, {
         readonly part: "checkbox · radio checked";
         readonly fg: readonly ["var(--iox-accent-text)", "var(--iox-accent)"];

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

@@ -3389,7 +3389,23 @@ const SPEC_ELEMENT_STYLES = [
             "padding": "var(--iox-badge-pad)",
             "fontFamily": "var(--iox-font-label)",
             "fontSize": "var(--iox-badge-size)",
-            "fontWeight": "var(--iox-weight-label)"
+            "fontWeight": "var(--iox-weight-label)",
+            "transitionDuration": "var(--iox-dur-fast)",
+            "transitionTimingFunction": "var(--iox-ease-standard)"
+        },
+        "hover": {
+            "borderColor": "var(--iox-text)"
+        },
+        "selected": {
+            "backgroundColor": "var(--iox-accent-text)",
+            "color": "var(--iox-bg)",
+            "borderColor": "var(--iox-accent-text)"
+        },
+        "focus": {
+            "boxShadow": "var(--iox-focus-ring)"
+        },
+        "disabled": {
+            "opacity": "0.55"
         }
     },
     {
@@ -3421,6 +3437,56 @@ const SPEC_ELEMENT_STYLES = [
             "color": "var(--iox-media-scrim-ink)"
         }
     },
+    {
+        "id": "calendar",
+        "label": "Calendar",
+        "group": "Forms",
+        "appliesTo": [],
+        "base": {
+            "backgroundColor": "var(--iox-surface)",
+            "color": "var(--iox-text)",
+            "borderRadius": "var(--iox-dialog-radius)",
+            "boxShadow": "var(--iox-dialog-shadow)",
+            "fontFamily": "var(--iox-font-body)"
+        }
+    },
+    {
+        "id": "calendar-day",
+        "label": "Calendar day",
+        "group": "Forms",
+        "appliesTo": [],
+        "base": {
+            "backgroundColor": "transparent",
+            "color": "var(--iox-text)",
+            "borderStyle": "solid",
+            "borderWidth": "var(--iox-border-width)",
+            "borderColor": "transparent",
+            "borderRadius": "var(--iox-radius-pill)",
+            "fontFamily": "var(--iox-font-body)",
+            "fontSize": "var(--iox-size-body)",
+            "fontVariantNumeric": "tabular-nums",
+            "transitionDuration": "var(--iox-dur-fast)",
+            "transitionTimingFunction": "var(--iox-ease-standard)"
+        },
+        "hover": {
+            "backgroundColor": "var(--iox-surface-2)"
+        },
+        "current": {
+            "borderColor": "var(--iox-line-strong)"
+        },
+        "selected": {
+            "backgroundColor": "var(--iox-accent-text)",
+            "color": "var(--iox-bg)",
+            "borderColor": "var(--iox-accent-text)"
+        },
+        "focus": {
+            "boxShadow": "var(--iox-focus-ring)"
+        },
+        "disabled": {
+            "color": "var(--iox-text-muted)",
+            "opacity": "0.4"
+        }
+    },
     {
         "id": "notice-success",
         "label": "Success message",
@@ -3680,6 +3746,112 @@ const SPEC_FIELD_CLASS_BASELINE = {
     },
     ".iox-es-field .iox-field__control--switch:checked": {
         "background": "var(--iox-accent-text)"
+    },
+    ".iox-es-field .iox-field__chip": {
+        "background-color": "transparent",
+        "color": "var(--iox-text)",
+        "border-style": "solid",
+        "border-width": "var(--iox-border-width)",
+        "border-color": "var(--iox-chip-border)",
+        "border-radius": "var(--iox-badge-radius)",
+        "padding": "var(--iox-badge-pad)",
+        "font-family": "var(--iox-font-label)",
+        "font-size": "var(--iox-badge-size)",
+        "font-weight": "var(--iox-weight-label)",
+        "transition": "border-color var(--iox-dur-fast) var(--iox-ease-standard), background-color var(--iox-dur-fast) var(--iox-ease-standard), color var(--iox-dur-fast) var(--iox-ease-standard), box-shadow var(--iox-dur-fast) var(--iox-ease-standard), opacity var(--iox-dur-fast) var(--iox-ease-standard), transform var(--iox-dur-fast) var(--iox-ease-standard)"
+    },
+    ".iox-es-field .iox-field__chip:active:not(:has(:disabled))": {
+        "transform": "scale(var(--iox-press-scale))"
+    },
+    ".iox-es-field .iox-field__chip:hover:not(:has(:disabled))": {
+        "border-color": "var(--iox-text)"
+    },
+    ".iox-es-field .iox-field__chip:has(:checked)": {
+        "background-color": "var(--iox-accent-text)",
+        "color": "var(--iox-bg)",
+        "border-color": "var(--iox-accent-text)"
+    },
+    ".iox-es-field .iox-field__chip:has(:focus-visible)": {
+        "box-shadow": "var(--iox-focus-ring)",
+        "outline": "2px solid transparent",
+        "outline-offset": "2px"
+    },
+    ".iox-es-field .iox-field__chip:has(:disabled)": {
+        "opacity": "0.55"
+    },
+    ".iox-es-field .iox-field__date-value[data-iox-empty]": {
+        "color": "var(--iox-text-muted)"
+    },
+    ".iox-es-field .iox-field__date-icon": {
+        "color": "var(--iox-text-muted)"
+    },
+    ".iox-es-field .iox-field__control--date[aria-expanded='true']": {
+        "border-color": "var(--iox-accent-text)",
+        "box-shadow": "var(--iox-field-focus)"
+    },
+    ".iox-es-field .iox-cal": {
+        "background-color": "var(--iox-surface)",
+        "color": "var(--iox-text)",
+        "border-radius": "var(--iox-dialog-radius)",
+        "box-shadow": "var(--iox-dialog-shadow), 0 0 0 var(--iox-border-width) var(--iox-line)",
+        "font-family": "var(--iox-font-body)"
+    },
+    ".iox-es-field .iox-cal .iox-cal__title": {
+        "font-family": "var(--iox-font-display)",
+        "font-weight": "var(--iox-weight-heading)",
+        "color": "var(--iox-text)"
+    },
+    ".iox-es-field .iox-cal .iox-cal__weekday": {
+        "font-family": "var(--iox-font-label)",
+        "font-size": "var(--iox-size-label)",
+        "font-weight": "var(--iox-weight-label)",
+        "color": "var(--iox-text-muted)"
+    },
+    ".iox-es-field .iox-cal .iox-cal__grab": {
+        "background": "var(--iox-line-strong)"
+    },
+    ".iox-es-field .iox-cal .iox-cal__nav button:hover:not(:disabled)": {
+        "background-color": "var(--iox-surface-2)"
+    },
+    ".iox-es-field .iox-cal .iox-cal__nav button:focus-visible": {
+        "box-shadow": "var(--iox-focus-ring)",
+        "outline": "2px solid transparent",
+        "outline-offset": "2px"
+    },
+    ".iox-es-field .iox-cal .iox-cal__day": {
+        "background-color": "transparent",
+        "color": "var(--iox-text)",
+        "border-style": "solid",
+        "border-width": "var(--iox-border-width)",
+        "border-color": "transparent",
+        "border-radius": "var(--iox-radius-pill)",
+        "font-family": "var(--iox-font-body)",
+        "font-size": "var(--iox-size-body)",
+        "font-variant-numeric": "tabular-nums",
+        "transition": "background-color var(--iox-dur-fast) var(--iox-ease-standard), color var(--iox-dur-fast) var(--iox-ease-standard), border-color var(--iox-dur-fast) var(--iox-ease-standard), box-shadow var(--iox-dur-fast) var(--iox-ease-standard), opacity var(--iox-dur-fast) var(--iox-ease-standard), transform var(--iox-dur-fast) var(--iox-ease-standard)"
+    },
+    ".iox-es-field .iox-cal .iox-cal__day:active:not([aria-disabled='true'])": {
+        "transform": "scale(var(--iox-press-scale))"
+    },
+    ".iox-es-field .iox-cal .iox-cal__day:hover:not([aria-disabled='true'])": {
+        "background-color": "var(--iox-surface-2)"
+    },
+    ".iox-es-field .iox-cal .iox-cal__day[aria-current='date']": {
+        "border-color": "var(--iox-line-strong)"
+    },
+    ".iox-es-field .iox-cal .iox-cal__cell[aria-selected='true'] > .iox-cal__day": {
+        "background-color": "var(--iox-accent-text)",
+        "color": "var(--iox-bg)",
+        "border-color": "var(--iox-accent-text)"
+    },
+    ".iox-es-field .iox-cal .iox-cal__day[aria-disabled='true']": {
+        "color": "var(--iox-text-muted)",
+        "opacity": "0.4"
+    },
+    ".iox-es-field .iox-cal .iox-cal__day:focus-visible": {
+        "box-shadow": "var(--iox-focus-ring)",
+        "outline": "2px solid transparent",
+        "outline-offset": "2px"
     }
 };
 const SPEC_INK_SCOPES = [
@@ -3924,6 +4096,42 @@ const SPEC_CONTRAST_AUDIT = {
             "on": "var(--iox-surface)",
             "min": 3
         },
+        {
+            "part": "calendar text",
+            "fg": "var(--iox-text)",
+            "on": "var(--iox-surface)",
+            "min": 4.5
+        },
+        {
+            "part": "calendar weekday",
+            "fg": "var(--iox-text-muted)",
+            "on": "var(--iox-surface)",
+            "min": 4.5
+        },
+        {
+            "part": "calendar today ring",
+            "fg": "var(--iox-line-strong)",
+            "on": "var(--iox-surface)",
+            "min": 3
+        },
+        {
+            "part": "calendar chosen day",
+            "fg": "var(--iox-accent-text)",
+            "on": "var(--iox-surface)",
+            "min": 3
+        },
+        {
+            "part": "calendar chosen day number",
+            "fg": "var(--iox-bg)",
+            "on": "var(--iox-accent-text)",
+            "min": 4.5
+        },
+        {
+            "part": "calendar day hover",
+            "fg": "var(--iox-text)",
+            "on": "var(--iox-surface-2)",
+            "min": 4.5
+        },
         {
             "part": "checkbox · radio checked",
             "fg": [
@@ -17007,6 +17215,8 @@ function auditDesignContrast(rows, mode) {
                     ...(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 }]] : []),
+                    // `selected` (premium N1): a chosen chip — its ink on its fill, its fill as its mark.
+                    ...(e.selected ? [['selected', { ...ownStyle(e), ...e.selected }]] : []),
                 ];
                 const glyph = e.group === GLYPH_GROUP;
                 for (const [state, s] of states) {
@@ -17023,6 +17233,10 @@ function auditDesignContrast(rows, mode) {
                     else if (on?.['backgroundColor'])
                         for (const f of fill)
                             check(e.id, 'on mark', f, bgs, WCAG_AA_UI);
+                    // A chosen chip's mark is its fill (its border is the same colour) — the contract's audit, 1:1.
+                    if (state === 'selected' && e.selected?.['backgroundColor'])
+                        for (const f of fill)
+                            check(e.id, 'selected mark', f, 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);