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

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

@@ -7,7 +7,7 @@ const o = [
   "content",
   "footer",
   "pushElement"
-], t = a({
+], i = a({
   slots: o,
   base: {
     backdrop: {
@@ -19,6 +19,9 @@ const o = [
       top: "spacing.2",
       right: "spacing.2"
     },
+    content: {
+      scrollable: "y"
+    },
     header: {
       mb: "spacing.4"
     },
@@ -26,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",
@@ -62,7 +67,6 @@ const o = [
         content: {
           flex: "[1]",
           overflowX: "hidden",
-          scrollable: "y",
           maxHeight: "[calc(100vh - ({spacing.spacing.7} * 2))]",
           "@media (min-height: 600px)": {
             maxHeight: "[calc(100vh - (100px * 2))]"
@@ -151,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.d.ts

@@ -11,6 +11,10 @@ type ProgressElement<TMin extends number | undefined = undefined> = TMin extends
  * - `IressProgressProps<0>` will use the attributes of a `<meter />` element.
  */
 export type IressProgressProps<TMin extends number | undefined = undefined> = Omit<IressStyledProps<ProgressElement<TMin>>, 'borderRadius' | 'value'> & {
+    /**
+     * A background image URL to be used as the background of the progress bar.
+     */
+    backgroundImage?: string;
     /**
      * The **`border-radius`** CSS property rounds the corners of an element's outer border edge using the radius tokens in the design system.
      * @see https://developer.mozilla.org/docs/Web/CSS/border-radius
@@ -39,9 +43,10 @@ export type IressProgressProps<TMin extends number | undefined = undefined> = Om
 };
 export interface ProgressCustomCSSProperties extends CSSProperties {
     '--iress-border-radius'?: string;
+    '--iress-background-image'?: string;
 }
 export declare const IressProgress: {
-    <TMin extends number | undefined = undefined>({ borderRadius, className: classNameProp, max, min, sectionTitle, style: styleProp, value, ...restProps }: IressProgressProps<TMin>): import("react/jsx-runtime").JSX.Element;
+    <TMin extends number | undefined = undefined>({ backgroundImage, borderRadius, className: classNameProp, max, min, sectionTitle, style: styleProp, value, ...restProps }: IressProgressProps<TMin>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/dist/components/Progress/Progress.js

@@ -1,57 +1,59 @@
-import { jsx as m } from "react/jsx-runtime";
+import { jsx as n } from "react/jsx-runtime";
 import { stringReplacer as P } from "../../helpers/formatting/stringReplacer.js";
-import { c as v } from "../../css-DNdLYQld.js";
-import { c as y } from "../../cx-DN21T1EH.js";
-import { progress as S } from "./Progress.styles.js";
-import { s as n } from "../../factory-CsinCTPr.js";
-import { s as b } from "../../is-valid-prop-DweT-eOL.js";
-import { GlobalCSSClass as x } from "../../enums.js";
-import { t as C } from "../../index-Bm5rQqn5.js";
-const N = ({
-  borderRadius: e,
-  className: p,
+import { c as y } from "../../css-DNdLYQld.js";
+import { c as S } from "../../cx-DN21T1EH.js";
+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";
+const h = ({
+  backgroundImage: e,
+  borderRadius: t,
+  className: c,
   max: r = 100,
   min: s,
-  sectionTitle: c = "Progress is {{current}} of {{max}}",
-  style: f,
+  sectionTitle: f = "Progress is {{current}} of {{max}}",
+  style: u,
   value: g = 0,
-  ...u
+  ...d
 }) => {
-  const [d, t] = b(u), a = y(
-    p,
-    v(S.raw(), d),
-    x.Progress
-  ), o = Math.min(Math.max(g, s ?? 0), r), i = () => P(c, [
+  const [v, a] = x(d), i = S(
+    c,
+    y(b.raw(), v),
+    C.Progress
+  ), o = Math.min(Math.max(g, s ?? 0), r), l = () => P(f, [
     { name: "{{current}}", value: String(o) },
     { name: "{{max}}", value: r.toString() }
-  ]), l = {
-    "--iress-border-radius": e ? C(`radii.${e}`) : void 0,
-    ...f
+  ]), m = {
+    "--iress-border-radius": t ? N(`radii.${t}`) : void 0,
+    "--iress-background-image": e ? `url(${e})` : void 0,
+    ...u
   };
-  return s !== void 0 ? /* @__PURE__ */ m(
-    n.meter,
+  return s !== void 0 ? /* @__PURE__ */ n(
+    p.meter,
     {
-      "aria-label": i(),
-      className: a,
+      "aria-label": l(),
+      className: i,
       max: r,
       min: s,
       value: o,
-      ...t,
-      style: l
+      ...a,
+      style: m
     }
-  ) : /* @__PURE__ */ m(
-    n.progress,
+  ) : /* @__PURE__ */ n(
+    p.progress,
     {
-      "aria-label": i(),
-      className: a,
+      "aria-label": l(),
+      className: i,
       max: r,
       value: o,
-      ...t,
-      style: l
+      ...a,
+      style: m
     }
   );
 };
-N.displayName = "IressProgress";
+h.displayName = "IressProgress";
 export {
-  N as IressProgress
+  h as IressProgress
 };

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",
@@ -18,6 +20,9 @@ const e = r({
     _progressValue: {
       appearance: "none",
       bg: "[currentColor]",
+      backgroundImage: "var(--iress-background-image)",
+      backgroundSize: "cover",
+      backgroundPosition: "center",
       borderRadius: "var(--iress-border-radius)",
       margin: "spacing.0",
       transition: "all"
@@ -25,6 +30,9 @@ const e = r({
     _mozProgressValue: {
       appearance: "none",
       bg: "[currentColor]",
+      backgroundImage: "var(--iress-background-image)",
+      backgroundSize: "cover",
+      backgroundPosition: "center",
       borderRadius: "var(--iress-border-radius)",
       margin: "spacing.0",
       transition: "all"

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

@@ -230,7 +230,7 @@ const xe = ({
     ...H.getFloatingProps(Y),
     onTransitionEnd: K
   };
-  return /* @__PURE__ */ _(ie, { root: t, children: /* @__PURE__ */ _(
+  return /* @__PURE__ */ _(ie, { root: t ?? E?.container, children: /* @__PURE__ */ _(
     fe,
     {
       ...Z,

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",
@@ -24,7 +26,8 @@ const i = t({
     },
     content: {
       overflow: "auto",
-      flex: "[1 1 auto]"
+      flex: "[1 1 auto]",
+      scrollable: "y"
     },
     footer: {
       borderBlockStart: "divider"

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

@@ -1,12 +1,31 @@
 import { IressIconProps } from '../Icon';
-export interface IressSpinnerProps extends Omit<IressIconProps, 'name'> {
+import { IressStyledProps } from '../../types';
+type IressSpinnerDefaultProps = Omit<IressIconProps, 'name'> & {
     /**
      * Spin speed of spinner.
      * @default half
      **/
     spin?: IressIconProps['spin'];
-}
+    /**
+     * Variant of spinner.
+     * - 'default': Standard rotating spinner
+     **/
+    variant?: 'default';
+};
+type IressSpinnerChattyProps = IressStyledProps<'span'> & {
+    /**
+     * Variant of spinner.
+     * - 'chatty': Animated dots for chatting/typing indicator
+     **/
+    variant: 'chatty';
+    /**
+     * Screen reader text for the chatty spinner.
+     */
+    screenreaderText: string;
+};
+export type IressSpinnerProps = IressSpinnerDefaultProps | IressSpinnerChattyProps;
 export declare const IressSpinner: {
-    ({ className, spin, ...restProps }: IressSpinnerProps): import("react/jsx-runtime").JSX.Element;
+    (props: IressSpinnerProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
+export {};

package/dist/components/Spinner/Spinner.js

@@ -1,23 +1,39 @@
-import { jsx as m } from "react/jsx-runtime";
-import { GlobalCSSClass as n } from "../../enums.js";
-import { IressIcon as e } from "../Icon/Icon.js";
+import { jsxs as p, jsx as a } from "react/jsx-runtime";
+import { GlobalCSSClass as e } from "../../enums.js";
+import { IressIcon as N } from "../Icon/Icon.js";
 import "../Icon/Icon.styles.js";
-import { spinner as i } from "./Spinner.styles.js";
-import { c as p } from "../../cx-DN21T1EH.js";
-const t = ({
-  className: r,
-  spin: s = "half",
-  ...o
-}) => /* @__PURE__ */ m(
-  e,
-  {
-    ...o,
-    className: p(r, i(), n.Spinner),
-    name: "spinner-third",
-    spin: s
+import { chatty as d, spinner as f } from "./Spinner.styles.js";
+import { c as n } from "../../cx-DN21T1EH.js";
+const S = (r) => {
+  if (r.variant === "chatty") {
+    const { className: c, screenreaderText: i, ...l } = r, s = d();
+    return /* @__PURE__ */ p(
+      "span",
+      {
+        className: n(c, s.root, e.Spinner),
+        "aria-label": i,
+        role: "status",
+        ...l,
+        children: [
+          /* @__PURE__ */ a("span", { className: s.dot }),
+          /* @__PURE__ */ a("span", { className: s.dot }),
+          /* @__PURE__ */ a("span", { className: s.dot })
+        ]
+      }
+    );
   }
-);
-t.displayName = "IressSpinner";
+  const { className: t, spin: o = "half", ...m } = r;
+  return /* @__PURE__ */ a(
+    N,
+    {
+      ...m,
+      className: n(t, f(), e.Spinner),
+      name: "spinner-third",
+      spin: o
+    }
+  );
+};
+S.displayName = "IressSpinner";
 export {
-  t as IressSpinner
+  S as IressSpinner
 };

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

@@ -1 +1,2 @@
 export declare const spinner: import('../../styled-system/types').RecipeRuntimeFn<{}>;
+export declare const chatty: import('../../styled-system/types').SlotRecipeRuntimeFn<"root" | "dot", import('../../styled-system/types').SlotRecipeVariantRecord<"root" | "dot">>;

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

@@ -1,11 +1,39 @@
-import { c as a } from "../../cva-DtPMccE9.js";
-const o = a({
+import { c as t } from "../../cva-DtPMccE9.js";
+import { s as a } from "../../sva-B7kca5XO.js";
+const o = t({
   base: {
     boxSizing: "border-box"
   },
-  variants: {},
-  defaultVariants: {}
+  variants: {}
+}), 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"
+    },
+    dot: {
+      width: "[0.5em]",
+      height: "[0.5em]",
+      borderRadius: "50%",
+      bg: "colour.neutral.50",
+      animation: "chatty 1.4s infinite ease-in-out",
+      "&:nth-child(1)": {
+        animationDelay: "0s"
+      },
+      "&:nth-child(2)": {
+        animationDelay: "0.2s"
+      },
+      "&:nth-child(3)": {
+        animationDelay: "0.4s"
+      }
+    }
+  }
 });
 export {
+  e as chatty,
   o as spinner
 };

package/dist/components/Spinner/index.js

@@ -1,6 +1,7 @@
 import { IressSpinner as n } from "./Spinner.js";
-import { spinner as p } from "./Spinner.styles.js";
+import { chatty as p, spinner as t } from "./Spinner.styles.js";
 export {
   n as IressSpinner,
-  p as spinner
+  p as chatty,
+  t as spinner
 };

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]",