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

package/dist/components/Badge/Badge.d.ts

@@ -1,14 +1,10 @@
-import { ReactElement, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { IressStyledProps, Statuses } from '../../types';
 export interface IressBadgeProps extends IressStyledProps<'span'> {
     /**
      * Content of the badge.
      */
     children?: ReactNode;
-    /**
-     * Element to attach the badge to.
-     */
-    host?: ReactElement;
     /**
      * Style of the badge.
      */
@@ -19,6 +15,6 @@ export interface IressBadgeProps extends IressStyledProps<'span'> {
     pill?: boolean;
 }
 export declare const IressBadge: {
-    ({ children, mode, pill, className, host, ...restProps }: IressBadgeProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, mode, pill, className, ...restProps }: IressBadgeProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/components/Badge/Badge.js

@@ -1,48 +1,35 @@
-import { jsx as c, jsxs as n } from "react/jsx-runtime";
-import { propagateTestid as f } from "../../helpers/utility/propagateTestid.js";
-import { c as r } from "../../css-DNdLYQld.js";
-import { c as g } from "../../cx-DN21T1EH.js";
-import { badge as b } from "./Badge.styles.js";
-import { s as x } from "../../factory-CsinCTPr.js";
-import { s as y } from "../../is-valid-prop-DweT-eOL.js";
-import { GlobalCSSClass as B } from "../../enums.js";
-const C = ({
-  children: e,
-  mode: m = "neutral",
-  pill: p,
-  className: d,
-  host: s,
-  ...a
+import { jsx as l } from "react/jsx-runtime";
+import { c } from "../../css-DNdLYQld.js";
+import { c as i } from "../../cx-DN21T1EH.js";
+import { badge as n } from "./Badge.styles.js";
+import { s as d } from "../../factory-CsinCTPr.js";
+import { s as f } from "../../is-valid-prop-DweT-eOL.js";
+import { GlobalCSSClass as g } from "../../enums.js";
+const y = ({
+  children: o,
+  mode: r = "neutral",
+  pill: a,
+  className: t,
+  ...e
 }) => {
-  const o = b.raw({
-    mode: m,
-    pill: p,
-    host: !!s
-  }), [i, l] = y(a), t = /* @__PURE__ */ c(
-    x.span,
+  const s = n.raw({
+    mode: r,
+    pill: a
+  }), [m, p] = f(e);
+  return /* @__PURE__ */ l(
+    d.span,
     {
-      ...l,
-      className: g(
-        r(o.root, o.badge, i),
-        d,
-        B.Badge
+      ...p,
+      className: i(
+        c(s.root, s.badge, m),
+        t,
+        g.Badge
       ),
-      children: e
+      children: o
     }
   );
-  return s ? /* @__PURE__ */ n(
-    "div",
-    {
-      className: r(o.host),
-      "data-testid": f(a["data-testid"], "host"),
-      children: [
-        s,
-        t
-      ]
-    }
-  ) : t;
 };
-C.displayName = "IressBadge";
+y.displayName = "IressBadge";
 export {
-  C as IressBadge
+  y as IressBadge
 };

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

@@ -1,20 +1,4 @@
-export declare const badge: import('../../styled-system/types').SlotRecipeRuntimeFn<"badge" | "root" | "host", {
-    host: {
-        true: {
-            badge: {
-                position: "absolute";
-                insetBlockStart: "spacing.0";
-                insetInlineEnd: "spacing.0";
-                zIndex: "100";
-                transformOrigin: "100% 0";
-                borderRadius: "radius.100";
-                transform: {
-                    base: "translate(50%, -50%)";
-                    _rtl: "translate(-50%, -50%)";
-                };
-            };
-        };
-    };
+export declare const badge: import('../../styled-system/types').SlotRecipeRuntimeFn<"badge" | "root", {
     pill: {
         true: {
             badge: {

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

@@ -1,8 +1,10 @@
 import { s as o } from "../../sva-B7kca5XO.js";
 const r = o({
-  slots: ["root", "badge", "host"],
+  slots: ["root", "badge"],
   base: {
     root: {
+      // Performance: CSS containment limits style recalculation scope
+      contain: "layout style paint",
       display: "inline-block",
       overflow: "visible",
       textStyle: "typography.body.sm.regular",
@@ -12,7 +14,7 @@ const r = o({
       whiteSpace: "nowrap",
       textDecoration: "none",
       minHeight: "[1.35em]",
-      minWidth: "[1.35em]"
+      minWidth: "[1.5em]"
     },
     badge: {
       alignItems: "center",
@@ -24,29 +26,9 @@ const r = o({
         lineHeight: 1,
         display: "inline-block"
       }
-    },
-    host: {
-      position: "relative",
-      height: "auto"
     }
   },
   variants: {
-    host: {
-      true: {
-        badge: {
-          position: "absolute",
-          insetBlockStart: "spacing.0",
-          insetInlineEnd: "spacing.0",
-          zIndex: "100",
-          transformOrigin: "100% 0",
-          borderRadius: "radius.100",
-          transform: {
-            base: "translate(50%, -50%)",
-            _rtl: "translate(-50%, -50%)"
-          }
-        }
-      }
-    },
     pill: {
       true: {
         badge: {
@@ -149,8 +131,7 @@ const r = o({
   },
   defaultVariants: {
     mode: "neutral",
-    pill: !1,
-    host: !1
+    pill: !1
   }
 });
 export {

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.d.ts

@@ -22,6 +22,9 @@ export declare const input: import('../../styled-system/types').SlotRecipeRuntim
     };
     isTextarea: {
         true: {
+            wrapper: {
+                alignItems: "end";
+            };
             formControl: {
                 lineHeight: number;
                 height: "auto";

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",
@@ -104,6 +106,9 @@ const o = r({
     },
     isTextarea: {
       true: {
+        wrapper: {
+          alignItems: "end"
+        },
         formControl: {
           lineHeight: 1.5,
           height: "auto",

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.js

@@ -6,7 +6,7 @@ import { progress as b } from "./Progress.styles.js";
 import { s as p } from "../../factory-CsinCTPr.js";
 import { s as x } from "../../is-valid-prop-DweT-eOL.js";
 import { GlobalCSSClass as C } from "../../enums.js";
-import { t as N } from "../../index-Bm5rQqn5.js";
+import { t as N } from "../../index-0AvnPY9d.js";
 const h = ({
   backgroundImage: e,
   borderRadius: t,

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/Slideout/hooks/usePushElement.js

@@ -1,6 +1,6 @@
 import { useRef as m, useEffect as y } from "react";
 import { GlobalCSSClass as e } from "../../../enums.js";
-import { t as p } from "../../../index-Bm5rQqn5.js";
+import { t as p } from "../../../index-0AvnPY9d.js";
 import { useBreakpoint as S } from "../../../hooks/useBreakpoint.js";
 function h({
   element: r,

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"