@vectoriox/iox-ui 5.27.0 → 5.28.0

package/design-core/index.d.ts

@@ -1511,7 +1511,8 @@ declare const SPEC_FIELD_CLASS_BASELINE: {
     readonly ".iox-es-field .iox-field__control:focus-visible": {
         readonly "border-color": "var(--iox-accent-text)";
         readonly "box-shadow": "var(--iox-field-focus)";
-        readonly outline: "none";
+        readonly outline: "2px solid transparent";
+        readonly "outline-offset": "2px";
     };
     readonly ".iox-es-field .iox-field__label": {
         readonly "font-family": "var(--iox-font-body)";
@@ -1519,6 +1520,12 @@ declare const SPEC_FIELD_CLASS_BASELINE: {
         readonly "font-weight": "var(--iox-field-label-weight)";
         readonly color: "var(--iox-text)";
     };
+    readonly ".iox-es-field .iox-field__option": {
+        readonly "font-family": "var(--iox-font-body)";
+        readonly "font-size": "var(--iox-size-body)";
+        readonly color: "var(--iox-text)";
+        readonly cursor: "pointer";
+    };
     readonly ".iox-es-field .iox-field__help": {
         readonly "font-size": "var(--iox-size-small)";
         readonly color: "var(--iox-text-muted)";
@@ -1534,11 +1541,121 @@ declare const SPEC_FIELD_CLASS_BASELINE: {
         readonly color: "var(--iox-text-muted)";
         readonly opacity: "1";
     };
-    readonly ".iox-es-field .iox-field__control:where([type='checkbox'], [type='radio'], [type='range'])": {
+    readonly ".iox-es-field .iox-field__control:disabled": {
+        readonly opacity: "0.55";
+        readonly cursor: "not-allowed";
+    };
+    readonly ".iox-es-field .iox-field__control:where(.iox-field__control--switch, [type='range'])": {
         readonly border: "none";
         readonly padding: "0";
         readonly background: "transparent";
-        readonly "accent-color": "var(--iox-accent-text)";
+    };
+    readonly ".iox-es-field .iox-field__control:where([type='checkbox']:not(.iox-field__control--switch), [type='radio'])": {
+        readonly appearance: "none";
+        readonly "-webkit-appearance": "none";
+        readonly display: "inline-grid";
+        readonly "place-content": "center";
+        readonly "flex-shrink": "0";
+        readonly margin: "0";
+        readonly padding: "0";
+        readonly "inline-size": "1.25em";
+        readonly "block-size": "1.25em";
+        readonly "vertical-align": "middle";
+        readonly cursor: "pointer";
+        readonly background: "var(--iox-surface)";
+        readonly "border-color": "var(--iox-line-strong)";
+        readonly "border-radius": "var(--iox-radius-xs)";
+        readonly transition: "background 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)";
+    };
+    readonly ".iox-es-field .iox-field__control[type='radio']": {
+        readonly "border-radius": "50%";
+    };
+    readonly ".iox-es-field .iox-field__control:where([type='checkbox']:not(.iox-field__control--switch), [type='radio'])::before": {
+        readonly content: "''";
+        readonly "inline-size": "0.28em";
+        readonly "block-size": "0.56em";
+        readonly "border-style": "solid";
+        readonly "border-color": "var(--iox-accent-ink)";
+        readonly "border-width": "0 0.14em 0.14em 0";
+        readonly transform: "translateY(-0.08em) rotate(45deg) scale(0)";
+        readonly transition: "transform var(--iox-dur-fast) var(--iox-ease-standard)";
+    };
+    readonly ".iox-es-field .iox-field__control[type='radio']::before": {
+        readonly "inline-size": "0";
+        readonly "block-size": "0";
+        readonly "border-width": "0.25em";
+        readonly "border-radius": "50%";
+        readonly transform: "scale(0)";
+    };
+    readonly ".iox-es-field .iox-field__control:where([type='checkbox']:not(.iox-field__control--switch), [type='radio']):hover": {
+        readonly "border-color": "var(--iox-accent-text)";
+    };
+    readonly ".iox-es-field .iox-field__control:where([type='checkbox']:not(.iox-field__control--switch), [type='radio']):checked": {
+        readonly background: "var(--iox-accent)";
+        readonly "border-color": "var(--iox-accent-text)";
+    };
+    readonly ".iox-es-field .iox-field__control:where([type='checkbox']:not(.iox-field__control--switch), [type='radio']):checked:hover": {
+        readonly background: "var(--iox-accent-hover)";
+    };
+    readonly ".iox-es-field .iox-field__control:where([type='checkbox']:not(.iox-field__control--switch), [type='radio']):checked::before": {
+        readonly transform: "translateY(-0.08em) rotate(45deg) scale(1)";
+    };
+    readonly ".iox-es-field .iox-field__control[type='radio']:checked::before": {
+        readonly transform: "scale(1)";
+    };
+    readonly ".iox-es-field .iox-field__control:where([type='checkbox']:not(.iox-field__control--switch), [type='radio']):focus-visible": {
+        readonly "box-shadow": "var(--iox-focus-ring)";
+    };
+    readonly ".iox-es-field .iox-field__control:where([type='range'])": {
+        readonly appearance: "none";
+        readonly "-webkit-appearance": "none";
+        readonly "inline-size": "100%";
+        readonly "block-size": "1.25em";
+        readonly cursor: "pointer";
+    };
+    readonly ".iox-es-field .iox-field__control:where([type='range'])::-webkit-slider-runnable-track": {
+        readonly "block-size": "0.25em";
+        readonly "border-radius": "var(--iox-radius-pill)";
+        readonly background: "var(--iox-line-strong)";
+        readonly outline: "1px solid transparent";
+    };
+    readonly ".iox-es-field .iox-field__control:where([type='range'])::-moz-range-track": {
+        readonly "block-size": "0.25em";
+        readonly "border-radius": "var(--iox-radius-pill)";
+        readonly background: "var(--iox-line-strong)";
+        readonly outline: "1px solid transparent";
+    };
+    readonly ".iox-es-field .iox-field__control:where([type='range'])::-webkit-slider-thumb": {
+        readonly appearance: "none";
+        readonly "-webkit-appearance": "none";
+        readonly "inline-size": "1.25em";
+        readonly "block-size": "1.25em";
+        readonly "border-radius": "50%";
+        readonly background: "var(--iox-accent-text)";
+        readonly border: "2px solid var(--iox-bg)";
+        readonly "box-sizing": "border-box";
+        readonly cursor: "pointer";
+        readonly "margin-block-start": "-0.5em";
+    };
+    readonly ".iox-es-field .iox-field__control:where([type='range'])::-moz-range-thumb": {
+        readonly appearance: "none";
+        readonly "-webkit-appearance": "none";
+        readonly "inline-size": "1.25em";
+        readonly "block-size": "1.25em";
+        readonly "border-radius": "50%";
+        readonly background: "var(--iox-accent-text)";
+        readonly border: "2px solid var(--iox-bg)";
+        readonly "box-sizing": "border-box";
+        readonly cursor: "pointer";
+    };
+    readonly ".iox-es-field .iox-field__control:where([type='range']):focus-visible": {
+        readonly "box-shadow": "none";
+    };
+    readonly ".iox-es-field .iox-field__control:where([type='range']):focus-visible::-webkit-slider-thumb": {
+        readonly "box-shadow": "var(--iox-focus-ring)";
+    };
+    readonly ".iox-es-field .iox-field__control:where([type='range']):focus-visible::-moz-range-thumb": {
+        readonly "box-shadow": "var(--iox-focus-ring)";
     };
     readonly ".iox-es-field .iox-field__control--switch": {
         readonly background: "var(--iox-text-muted)";
@@ -1699,9 +1816,32 @@ declare const SPEC_CONTRAST_AUDIT: {
         readonly thumb: "var(--iox-bg)";
         readonly min: 3;
     }, {
-        readonly part: "checkbox · radio · range";
+        readonly part: "checkbox · radio edge";
+        readonly fg: "var(--iox-line-strong)";
+        readonly min: 3;
+    }, {
+        readonly part: "checkbox · radio edge on its fill";
+        readonly fg: "var(--iox-line-strong)";
+        readonly on: "var(--iox-surface)";
+        readonly min: 3;
+    }, {
+        readonly part: "checkbox · radio checked";
+        readonly fg: readonly ["var(--iox-accent-text)", "var(--iox-accent)"];
+        readonly any: true;
+        readonly min: 3;
+    }, {
+        readonly part: "check mark · radio dot";
+        readonly fg: "var(--iox-accent-ink)";
+        readonly on: "var(--iox-accent)";
+        readonly min: 3;
+    }, {
+        readonly part: "hover edge · range thumb";
         readonly fg: "var(--iox-accent-text)";
         readonly min: 3;
+    }, {
+        readonly part: "range track";
+        readonly fg: "var(--iox-line-strong)";
+        readonly min: 3;
     }];
 };
 declare const SPEC_LEGACY_ALIASES: {

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

@@ -1798,7 +1798,8 @@ const SPEC_FIELD_CLASS_BASELINE = {
     ".iox-es-field .iox-field__control:focus-visible": {
         "border-color": "var(--iox-accent-text)",
         "box-shadow": "var(--iox-field-focus)",
-        "outline": "none"
+        "outline": "2px solid transparent",
+        "outline-offset": "2px"
     },
     ".iox-es-field .iox-field__label": {
         "font-family": "var(--iox-font-body)",
@@ -1806,6 +1807,12 @@ const SPEC_FIELD_CLASS_BASELINE = {
         "font-weight": "var(--iox-field-label-weight)",
         "color": "var(--iox-text)"
     },
+    ".iox-es-field .iox-field__option": {
+        "font-family": "var(--iox-font-body)",
+        "font-size": "var(--iox-size-body)",
+        "color": "var(--iox-text)",
+        "cursor": "pointer"
+    },
     ".iox-es-field .iox-field__help": {
         "font-size": "var(--iox-size-small)",
         "color": "var(--iox-text-muted)"
@@ -1821,11 +1828,121 @@ const SPEC_FIELD_CLASS_BASELINE = {
         "color": "var(--iox-text-muted)",
         "opacity": "1"
     },
-    ".iox-es-field .iox-field__control:where([type='checkbox'], [type='radio'], [type='range'])": {
+    ".iox-es-field .iox-field__control:disabled": {
+        "opacity": "0.55",
+        "cursor": "not-allowed"
+    },
+    ".iox-es-field .iox-field__control:where(.iox-field__control--switch, [type='range'])": {
         "border": "none",
         "padding": "0",
-        "background": "transparent",
-        "accent-color": "var(--iox-accent-text)"
+        "background": "transparent"
+    },
+    ".iox-es-field .iox-field__control:where([type='checkbox']:not(.iox-field__control--switch), [type='radio'])": {
+        "appearance": "none",
+        "-webkit-appearance": "none",
+        "display": "inline-grid",
+        "place-content": "center",
+        "flex-shrink": "0",
+        "margin": "0",
+        "padding": "0",
+        "inline-size": "1.25em",
+        "block-size": "1.25em",
+        "vertical-align": "middle",
+        "cursor": "pointer",
+        "background": "var(--iox-surface)",
+        "border-color": "var(--iox-line-strong)",
+        "border-radius": "var(--iox-radius-xs)",
+        "transition": "background 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)"
+    },
+    ".iox-es-field .iox-field__control[type='radio']": {
+        "border-radius": "50%"
+    },
+    ".iox-es-field .iox-field__control:where([type='checkbox']:not(.iox-field__control--switch), [type='radio'])::before": {
+        "content": "''",
+        "inline-size": "0.28em",
+        "block-size": "0.56em",
+        "border-style": "solid",
+        "border-color": "var(--iox-accent-ink)",
+        "border-width": "0 0.14em 0.14em 0",
+        "transform": "translateY(-0.08em) rotate(45deg) scale(0)",
+        "transition": "transform var(--iox-dur-fast) var(--iox-ease-standard)"
+    },
+    ".iox-es-field .iox-field__control[type='radio']::before": {
+        "inline-size": "0",
+        "block-size": "0",
+        "border-width": "0.25em",
+        "border-radius": "50%",
+        "transform": "scale(0)"
+    },
+    ".iox-es-field .iox-field__control:where([type='checkbox']:not(.iox-field__control--switch), [type='radio']):hover": {
+        "border-color": "var(--iox-accent-text)"
+    },
+    ".iox-es-field .iox-field__control:where([type='checkbox']:not(.iox-field__control--switch), [type='radio']):checked": {
+        "background": "var(--iox-accent)",
+        "border-color": "var(--iox-accent-text)"
+    },
+    ".iox-es-field .iox-field__control:where([type='checkbox']:not(.iox-field__control--switch), [type='radio']):checked:hover": {
+        "background": "var(--iox-accent-hover)"
+    },
+    ".iox-es-field .iox-field__control:where([type='checkbox']:not(.iox-field__control--switch), [type='radio']):checked::before": {
+        "transform": "translateY(-0.08em) rotate(45deg) scale(1)"
+    },
+    ".iox-es-field .iox-field__control[type='radio']:checked::before": {
+        "transform": "scale(1)"
+    },
+    ".iox-es-field .iox-field__control:where([type='checkbox']:not(.iox-field__control--switch), [type='radio']):focus-visible": {
+        "box-shadow": "var(--iox-focus-ring)"
+    },
+    ".iox-es-field .iox-field__control:where([type='range'])": {
+        "appearance": "none",
+        "-webkit-appearance": "none",
+        "inline-size": "100%",
+        "block-size": "1.25em",
+        "cursor": "pointer"
+    },
+    ".iox-es-field .iox-field__control:where([type='range'])::-webkit-slider-runnable-track": {
+        "block-size": "0.25em",
+        "border-radius": "var(--iox-radius-pill)",
+        "background": "var(--iox-line-strong)",
+        "outline": "1px solid transparent"
+    },
+    ".iox-es-field .iox-field__control:where([type='range'])::-moz-range-track": {
+        "block-size": "0.25em",
+        "border-radius": "var(--iox-radius-pill)",
+        "background": "var(--iox-line-strong)",
+        "outline": "1px solid transparent"
+    },
+    ".iox-es-field .iox-field__control:where([type='range'])::-webkit-slider-thumb": {
+        "appearance": "none",
+        "-webkit-appearance": "none",
+        "inline-size": "1.25em",
+        "block-size": "1.25em",
+        "border-radius": "50%",
+        "background": "var(--iox-accent-text)",
+        "border": "2px solid var(--iox-bg)",
+        "box-sizing": "border-box",
+        "cursor": "pointer",
+        "margin-block-start": "-0.5em"
+    },
+    ".iox-es-field .iox-field__control:where([type='range'])::-moz-range-thumb": {
+        "appearance": "none",
+        "-webkit-appearance": "none",
+        "inline-size": "1.25em",
+        "block-size": "1.25em",
+        "border-radius": "50%",
+        "background": "var(--iox-accent-text)",
+        "border": "2px solid var(--iox-bg)",
+        "box-sizing": "border-box",
+        "cursor": "pointer"
+    },
+    ".iox-es-field .iox-field__control:where([type='range']):focus-visible": {
+        "box-shadow": "none"
+    },
+    ".iox-es-field .iox-field__control:where([type='range']):focus-visible::-webkit-slider-thumb": {
+        "box-shadow": "var(--iox-focus-ring)"
+    },
+    ".iox-es-field .iox-field__control:where([type='range']):focus-visible::-moz-range-thumb": {
+        "box-shadow": "var(--iox-focus-ring)"
     },
     ".iox-es-field .iox-field__control--switch": {
         "background": "var(--iox-text-muted)",
@@ -2029,9 +2146,40 @@ const SPEC_CONTRAST_AUDIT = {
             "min": 3
         },
         {
-            "part": "checkbox · radio · range",
+            "part": "checkbox · radio edge",
+            "fg": "var(--iox-line-strong)",
+            "min": 3
+        },
+        {
+            "part": "checkbox · radio edge on its fill",
+            "fg": "var(--iox-line-strong)",
+            "on": "var(--iox-surface)",
+            "min": 3
+        },
+        {
+            "part": "checkbox · radio checked",
+            "fg": [
+                "var(--iox-accent-text)",
+                "var(--iox-accent)"
+            ],
+            "any": true,
+            "min": 3
+        },
+        {
+            "part": "check mark · radio dot",
+            "fg": "var(--iox-accent-ink)",
+            "on": "var(--iox-accent)",
+            "min": 3
+        },
+        {
+            "part": "hover edge · range thumb",
             "fg": "var(--iox-accent-text)",
             "min": 3
+        },
+        {
+            "part": "range track",
+            "fg": "var(--iox-line-strong)",
+            "min": 3
         }
     ]
 };