@iress-oss/ids-components 6.0.0-alpha.17 → 6.0.0-alpha.18

package/dist/components/Badge/Badge.styles.js

@@ -3,6 +3,8 @@ const r = o({
   slots: ["root", "badge", "host"],
   base: {
     root: {
+      // Performance: CSS containment limits style recalculation scope
+      contain: "layout style paint",
       display: "inline-block",
       overflow: "visible",
       textStyle: "typography.body.sm.regular",

package/dist/components/Card/Card.styles.js

@@ -3,6 +3,8 @@ const e = t({
   slots: ["root", "prepend", "heading", "topRight", "media", "body", "footer"],
   base: {
     root: {
+      // Performance: CSS containment (no paint to allow overflow)
+      contain: "layout style",
       position: "relative",
       borderRadius: "radius.system.layout",
       bg: "colour.neutral.10",

package/dist/components/Checkbox/Checkbox.styles.js

@@ -14,6 +14,8 @@ const o = r({
   base: {
     formElement: {},
     root: {
+      // Performance: CSS containment (no paint to allow focus ring/shadow)
+      contain: "layout style",
       color: "colour.primary.fill",
       display: "flex",
       position: "relative",

package/dist/components/Expander/Expander.styles.js

@@ -10,6 +10,8 @@ const r = o({
   ],
   base: {
     root: {
+      // Performance: CSS containment (no paint to allow overflow)
+      contain: "layout style",
       display: "block",
       "&:has([aria-controls]:focus-visible)": {
         layerStyle: "elevation.focusNoBorder"

package/dist/components/Input/Input.styles.js

@@ -3,6 +3,8 @@ const o = r({
   slots: ["root", "wrapper", "inline", "addon", "internal", "formControl"],
   base: {
     wrapper: {
+      // Performance: CSS containment limits style recalculation scope
+      contain: "layout style paint",
       display: "flex",
       alignItems: "stretch",
       borderRadius: "radius.system.form",

package/dist/components/Modal/Modal.styles.js

@@ -7,7 +7,7 @@ const o = [
   "content",
   "footer",
   "pushElement"
-], t = a({
+], i = a({
   slots: o,
   base: {
     backdrop: {
@@ -29,6 +29,8 @@ const o = [
       borderBlockStart: "divider"
     },
     modal: {
+      // Performance: CSS containment (no paint due to fixed positioning)
+      contain: "layout style",
       position: "relative",
       borderRadius: "radius.system.layout",
       padding: "spacing.0",
@@ -153,5 +155,5 @@ const o = [
   }
 });
 export {
-  t as modal
+  i as modal
 };

package/dist/components/Panel/Panel.styles.js

@@ -1,6 +1,8 @@
 import { c as a } from "../../cva-DtPMccE9.js";
 const o = a({
   base: {
+    // Performance: CSS containment (no paint to allow overflow)
+    contain: "layout style",
     display: "block",
     boxSizing: "border-box",
     borderRadius: "radius.system.layout",

package/dist/components/Popover/Popover.styles.js

@@ -9,6 +9,8 @@ const a = t({
       display: "inline-block"
     },
     content: {
+      // Performance: CSS containment (no paint due to floating nature)
+      contain: "layout style",
       bg: "colour.neutral.10",
       border: "divider",
       borderRadius: "radius.system.form",

package/dist/components/Progress/Progress.styles.js

@@ -1,6 +1,8 @@
 import { c as r } from "../../cva-DtPMccE9.js";
 const e = r({
   base: {
+    // Performance: CSS containment limits style recalculation scope
+    contain: "layout style paint",
     appearance: "none",
     bg: "colour.neutral.40",
     color: "colour.neutral.50",

package/dist/components/Radio/Radio.styles.js

@@ -11,6 +11,8 @@ const e = r({
   ],
   base: {
     root: {
+      // Performance: CSS containment (no paint to allow focus ring/shadow)
+      contain: "layout style",
       color: "colour.primary.fill",
       display: "flex",
       position: "relative",

package/dist/components/RichSelect/RichSelect.styles.js

@@ -9,6 +9,8 @@ const i = c({
   ],
   base: {
     richSelect: {
+      // Performance: CSS containment (no paint to allow focus ring/shadow)
+      contain: "layout style",
       display: "block"
     },
     popoverContent: {

package/dist/components/RichSelect/SelectBody/SelectBody.styles.js

@@ -3,6 +3,8 @@ const l = e({
   slots: ["selectBody", "children"],
   base: {
     selectBody: {
+      // Performance: CSS containment (no paint due to overflow)
+      contain: "layout style",
       display: "flex",
       flexDirection: "column",
       maxHeight: "[30rem]",

package/dist/components/RichSelect/SelectMenu/SelectMenu.styles.js

@@ -3,6 +3,8 @@ const o = t({
   slots: ["root"],
   base: {
     root: {
+      // Performance: CSS containment limits style recalculation scope
+      contain: "layout style paint",
       width: "[100%]"
     }
   },

package/dist/components/RichSelect/SelectSearchInput/SelectSearchInput.styles.js

@@ -3,6 +3,8 @@ const t = o({
   slots: ["root"],
   base: {
     root: {
+      // Performance: CSS containment limits style recalculation scope
+      contain: "layout style paint",
       borderWidth: "0px",
       borderBottomWidth: "1px",
       borderBottomStyle: "solid",

package/dist/components/RichSelect/SelectTags/SelectTags.styles.js

@@ -3,6 +3,8 @@ const l = e({
   slots: ["root", "placeholder", "prepend", "append", "tag", "tagsList"],
   base: {
     root: {
+      // Performance: CSS containment limits style recalculation scope
+      contain: "layout style paint",
       display: "flex",
       alignItems: "center",
       width: "[100%]",

package/dist/components/Select/Select.styles.js

@@ -1,8 +1,10 @@
 import { s as e } from "../../sva-B7kca5XO.js";
-const t = ["wrapper", "control", "element"], c = e({
+const t = ["wrapper", "control", "element"], a = e({
   slots: t,
   base: {
     wrapper: {
+      // Performance: CSS containment limits style recalculation scope
+      contain: "layout style",
       display: "block",
       position: "relative",
       lineHeight: 1,
@@ -122,5 +124,5 @@ const t = ["wrapper", "control", "element"], c = e({
   }
 });
 export {
-  c as select
+  a as select
 };

package/dist/components/Slideout/Slideout.styles.js

@@ -3,6 +3,8 @@ const i = t({
   slots: ["root", "content", "footer", "closeButton"],
   base: {
     root: {
+      // Performance: CSS containment (no paint due to fixed positioning)
+      contain: "layout style",
       textStyle: "typography.body.md",
       position: "fixed",
       insetBlockStart: "spacing.0",

package/dist/components/Slider/Slider.styles.js

@@ -10,6 +10,8 @@ const i = e({
   ],
   base: {
     root: {
+      // Performance: CSS containment (no paint to allow focus ring/shadow)
+      contain: "layout style",
       display: "flex",
       flexDirection: "column"
     },

package/dist/components/Spinner/Spinner.styles.js

@@ -1,14 +1,16 @@
-import { c as i } from "../../cva-DtPMccE9.js";
-import { s as t } from "../../sva-B7kca5XO.js";
-const o = i({
+import { c as t } from "../../cva-DtPMccE9.js";
+import { s as a } from "../../sva-B7kca5XO.js";
+const o = t({
   base: {
     boxSizing: "border-box"
   },
   variants: {}
-}), e = t({
+}), e = a({
   slots: ["root", "dot"],
   base: {
     root: {
+      // Performance: CSS containment (no paint to allow animation effects)
+      contain: "layout style",
       display: "inline-flex",
       alignItems: "center",
       gap: "spacing.1"

package/dist/components/TabSet/TabSet.styles.js

@@ -10,6 +10,8 @@ const e = t({
   ],
   base: {
     root: {
+      // Performance: CSS containment (no paint to allow overflow)
+      contain: "layout style",
       bg: "colour.neutral.10",
       borderRadius: "radius.system.layout"
     },

package/dist/components/Tag/Tag.styles.d.ts

@@ -20,6 +20,12 @@ export declare const tag: import('../../styled-system/types').SlotRecipeRuntimeF
                 _active: {
                     boxShadow: "color-mix(in srgb, {colors.colour.primary.surface}, transparent 60%) 0px 0px 0px 3px";
                 };
+                _focus: {
+                    outline: "[none]";
+                };
+                _focusVisible: {
+                    layerStyle: "elevation.focus";
+                };
             };
         };
     };

package/dist/components/Tag/Tag.styles.js

@@ -1,8 +1,10 @@
-import { s as r } from "../../sva-B7kca5XO.js";
-const t = r({
+import { s as o } from "../../sva-B7kca5XO.js";
+const t = o({
   slots: ["root", "content", "deleteButton"],
   base: {
     root: {
+      // Performance: CSS containment limits style recalculation scope
+      contain: "layout style",
       alignItems: "center",
       bg: "colour.neutral.20",
       border: "divider",
@@ -53,6 +55,12 @@ const t = r({
           },
           _active: {
             boxShadow: "color-mix(in srgb, {colors.colour.primary.surface}, transparent 60%) 0px 0px 0px 3px"
+          },
+          _focus: {
+            outline: "[none]"
+          },
+          _focusVisible: {
+            layerStyle: "elevation.focus"
           }
         }
       }

package/dist/components/Toggle/Toggle.styles.js

@@ -10,6 +10,8 @@ const t = e({
   ],
   base: {
     toggleBase: {
+      // Performance: CSS containment (no paint to allow focus ring/shadow)
+      contain: "layout style",
       display: "inline-flex",
       gap: "spacing.1",
       color: "colour.primary.fill",

package/dist/components/Tooltip/Tooltip.styles.js

@@ -1,5 +1,5 @@
-import { s as o } from "../../sva-B7kca5XO.js";
-const a = o({
+import { s as t } from "../../sva-B7kca5XO.js";
+const a = t({
   slots: ["root", "activator", "content"],
   base: {
     root: {
@@ -8,6 +8,8 @@ const a = o({
     },
     activator: {},
     content: {
+      // Performance: CSS containment limits style recalculation scope
+      contain: "layout style paint",
       zIndex: "600",
       width: "[max-content]",
       maxWidth: "[20em]",

package/dist/patterns/Shadow/Shadow.js

@@ -3775,6 +3775,10 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     display: none;
 }
 
+  .contain_layout_style_paint {
+    contain: layout style paint;
+}
+
   .lh_1 {
     line-height: 1;
 }
@@ -3910,6 +3914,10 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     vertical-align: stretch;
 }
 
+  .contain_layout_style {
+    contain: layout style;
+}
+
   .ta_start {
     text-align: start;
 }