@iress-oss/ids-components 6.0.0-beta.1 → 6.0.0-beta.3

package/.ai/components/tag.md

@@ -63,12 +63,46 @@ Use semantic status values (`danger`, `info`, `success`, `warning`) when tags ne
 
 [View "Status" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-tag--status)
 
+### Bordered tags
+
+Set `bordered` to render a tag with a visible border using the tag's current
+colour, without altering its background. This enhances visibility and makes tags
+look more interactive — useful for dropdown filter tags or any context where
+tags need to stand out.
+
+```tsx
+<IressInline gap="sm">
+<IressTag bordered>
+No mode
+</IressTag>
+{BADGE_MODES.map((mode) => (
+<IressTag key={mode} mode={mode} bordered>
+{mode}
+</IressTag>
+))}
+{STATUSES.map((status) => (
+<IressTag key={status} mode={status} bordered>
+{status}
+</IressTag>
+))}
+</IressInline>
+```
+
+[View "Bordered" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-tag--bordered)
+
 ### Clickable tags
 
-Tags can be made clickable by passing an `onClick` handler. This will apply hover styles to the tag to indicate it is clickable.
+Tags can be made clickable by setting `element="button"`. This is the
+recommended, explicit API and renders the tag as a `<button>` with hover
+styles to indicate it is clickable.
+
+For backwards compatibility, passing `onClick` without setting `element` is
+also supported and will automatically render the tag as a `<button>`.
+
+Use `element="a"` to render the tag as a link.
 
 ```tsx
-<IressTag>
+<IressTag bordered>
   Tag
 </IressTag>
 ```
@@ -124,12 +158,18 @@ Query tags by their text content:
 const tag = screen.getByText('Category');
 ```
 
-When `onClick` is provided, the tag renders as a `<button>`:
+When `element="button"` is set, the tag renders as a `<button>`:
 
 ```tsx
 const tag = screen.getByRole('button', { name: 'Category' });
 ```
 
+When `element="a"` is set, the tag renders as a link:
+
+```tsx
+const tag = screen.getByRole('link', { name: 'Category' });
+```
+
 For deletable tags, query the delete button:
 
 ```tsx

package/.ai/skills/figma-to-ids.md

@@ -16,6 +16,7 @@ Translate Figma design properties and structures into IDS (Iress Design System)
 >
 > ```bash
 > npm install @iress-oss/ids-components@beta
+> npm install @iress-oss/ids-tokens@beta  # if using tokens directly (e.g. cssVars or CSS vars import)
 > ```
 
 ## Figma → IDS Mapping
@@ -65,7 +66,7 @@ When mapping Figma components to IDS, read references/component-mapping.md for t
 | Slideout / Drawer  | `IressSlideout`                              |                            |
 | Tabs               | `IressTabSet` + `IressTab`                   |                            |
 | Table              | `IressTable`                                 | Head, Body, Row, Cell      |
-| Tag                | `IressTag`                                   | clickable variant          |
+| Tag                | `IressTag`                                   | `bordered` for visible border; `element="button"` for clickable, `element="a"` for link; `onClick` alone also auto-renders as button |
 | Pill               | `IressPill`                                  |                            |
 | Tooltip            | `IressTooltip`                               |                            |
 | Icon               | `IressIcon name="..."`                       | Material Symbols name      |

package/.ai/skills/ui-translation.md

@@ -67,7 +67,7 @@ Translate natural language UI descriptions into IDS (Iress Design System) compon
 | Progress bar         | `IressProgress`             | `<IressProgress value={75} max={100} />`                                                                    |
 | Image                | `IressImage`                | `<IressImage src="..." alt="..." />`                                                                        |
 | Icon                 | `IressIcon`                 | `<IressIcon name="settings" />`                                                                             |
-| Tag / badge          | `IressTag`                  | `<IressTag>New</IressTag>`                                                                                  |
+| Tag / badge          | `IressTag`                  | `<IressTag>New</IressTag>`; use `bordered` for visible-border style; use `element="button"` for clickable tag, `element="a"` for link tag; `onClick` alone also auto-renders as `<button>` |
 | Pill                 | `IressPill`                 | `<IressPill>Category</IressPill>`                                                                           |
 | Tooltip              | `IressTooltip`              | `<IressTooltip content="Help text"><IressButton>Hover me</IressButton></IressTooltip>`                      |
 
@@ -226,7 +226,7 @@ When you need to find the right IDS component for a UI element, read references/
 | Progress bar         | `IressProgress`             | `<IressProgress value={75} max={100} />`                                                                    |
 | Image                | `IressImage`                | `<IressImage src="..." alt="..." />`                                                                        |
 | Icon                 | `IressIcon`                 | `<IressIcon name="settings" />`                                                                             |
-| Tag / badge          | `IressTag`                  | `<IressTag>New</IressTag>`                                                                                  |
+| Tag / badge          | `IressTag`                  | `<IressTag>New</IressTag>`; use `bordered` for visible-border style; use `element="button"` for clickable tag, `element="a"` for link tag; `onClick` alone also auto-renders as `<button>` |
 | Pill                 | `IressPill`                 | `<IressPill>Category</IressPill>`                                                                           |
 | Tooltip              | `IressTooltip`              | `<IressTooltip content="Help text"><IressButton>Hover me</IressButton></IressTooltip>`                      |
 

package/README.md

@@ -10,11 +10,26 @@ This is the component library for the Iress Design System (IDS). You can use thi
 
 ## Set up the component library
 
-1. Install using: `yarn add @iress-oss/ids-components`
+1. Install using: `yarn add @iress-oss/ids-components@beta`
 2. Import the styles: `import '@iress-oss/ids-components/dist/style.css'`
 3. Import the components: `import { IressButton, IressText } from '@iress-oss/ids-components'`
 4. Use the components: `<IressButton>Click me</IressButton>`
 
+> **Note:** IDS v6 is currently in beta — install with the `@beta` tag as shown above.
+>
+> If you need to use design tokens directly in your application code (for custom CSS or inline styles), also install the tokens package:
+>
+> ```bash
+> yarn add @iress-oss/ids-tokens@beta
+> ```
+>
+> Then import the CSS variables stylesheet and use `cssVars` in your code:
+>
+> ```ts
+> import '@iress-oss/ids-tokens/build/css-vars.css';
+> import { cssVars } from '@iress-oss/ids-tokens';
+> ```
+
 ## Contributing
 
 The component library is part of the Iress Design System (IDS) monorepo. Please refer to the root [README](../../README.md) for more information on contributing to IDS.

package/dist/{Autocomplete-JZcorz66.js → Autocomplete-CuUjmIAw.js}

@@ -9,22 +9,22 @@ import { useResponsiveProps as ee } from "./hooks/useResponsiveProps.js";
 import { IressPopover as te } from "./components/Popover/Popover.js";
 import { IressInputPopover as s } from "./components/Popover/InputPopover/InputPopover.js";
 import { IressAlert as ne } from "./components/Alert/Alert.js";
-import { autoComplete as c } from "./components/Autocomplete/Autocomplete.styles.js";
-import { getFormControlValueAsStringIfDefined as l } from "./helpers/form/getFormControlValueAsStringIfDefined.js";
-import { useNoDefaultValueInForms as re } from "./patterns/Form/hooks/useNoDefaultValueInForms.js";
-import { IressReadonly as ie } from "./components/Readonly/Readonly.js";
-import { IressInput as ae } from "./components/Input/Input.js";
-import { getValueAsEvent as u } from "./helpers/form/getValueAsEvent.js";
-import { t as oe } from "./useAutocompleteSearch-Dl1-OeQy.js";
-import { AutocompleteInstructions as d } from "./components/Autocomplete/components/AutocompleteInstructions.js";
-import { select as f } from "./components/Select/Select.styles.js";
-import { SelectActivator as p } from "./components/Select/components/SelectActivator.js";
-import { IressSelectMenu as m } from "./components/Select/SelectMenu/SelectMenu.js";
-import { SelectOptions as h } from "./components/Select/components/SelectOptions.js";
-import { SelectHiddenInput as se } from "./components/Select/components/SelectHiddenInput.js";
-import { NativeSelect as ce } from "./components/Select/components/NativeSelect.js";
-import { useSelectState as le } from "./components/Select/hooks/useSelectState.js";
-import { forwardRef as g, useCallback as ue, useEffect as _, useImperativeHandle as de, useMemo as v, useRef as y, useState as b } from "react";
+import { autoComplete as re } from "./components/Autocomplete/Autocomplete.styles.js";
+import { getFormControlValueAsStringIfDefined as c } from "./helpers/form/getFormControlValueAsStringIfDefined.js";
+import { useNoDefaultValueInForms as ie } from "./patterns/Form/hooks/useNoDefaultValueInForms.js";
+import { IressReadonly as ae } from "./components/Readonly/Readonly.js";
+import { IressInput as oe } from "./components/Input/Input.js";
+import { getValueAsEvent as l } from "./helpers/form/getValueAsEvent.js";
+import { t as se } from "./useAutocompleteSearch-BJ_hhoKp.js";
+import { AutocompleteInstructions as u } from "./components/Autocomplete/components/AutocompleteInstructions.js";
+import { select as d } from "./components/Select/Select.styles.js";
+import { SelectActivator as f } from "./components/Select/components/SelectActivator.js";
+import { IressSelectMenu as p } from "./components/Select/SelectMenu/SelectMenu.js";
+import { SelectOptions as m } from "./components/Select/components/SelectOptions.js";
+import { SelectHiddenInput as ce } from "./components/Select/components/SelectHiddenInput.js";
+import { NativeSelect as le } from "./components/Select/components/NativeSelect.js";
+import { useSelectState as ue } from "./components/Select/hooks/useSelectState.js";
+import { forwardRef as h, useCallback as g, useEffect as _, useImperativeHandle as de, useMemo as v, useRef as y, useState as b } from "react";
 import { Fragment as fe, jsx as x, jsxs as S } from "react/jsx-runtime";
 //#region src/components/Select/Select.tsx
 var C = (e) => typeof e == "object" && !!e && "label" in e, w = (e, t) => {
@@ -43,8 +43,8 @@ var C = (e) => typeof e == "object" && !!e && "label" in e, w = (e, t) => {
 		}
 		return T(e, t);
 	}
-}, D = g(({ align: r = "bottom-start", autoHighlight: i = !0, className: a, defaultValue: o, disabled: s, footer: ne, header: c, id: l, matchActivatorWidth: ae = !0, multiSelect: u, multiSelectLimit: d, name: m, onChange: g, onBlur: w, options: T, native: D, placeholder: O, readOnly: k, renderHiddenInput: A, renderLabel: j, renderOptions: pe, required: M, type: me, value: N, virtualFocus: P, width: F, ...I }, L) => {
-	re({
+}, D = h(({ align: r = "bottom-start", autoHighlight: i = !0, className: a, defaultValue: o, disabled: s, footer: ne, header: re, id: c, matchActivatorWidth: oe = !0, multiSelect: l, multiSelectLimit: u, name: p, onChange: h, onBlur: w, options: T, native: D, placeholder: O, readOnly: k, renderHiddenInput: A, renderLabel: j, renderOptions: pe, required: M, type: me, value: N, virtualFocus: P, width: F, ...I }, L) => {
+	ie({
 		component: "IressSelect",
 		defaultValue: o
 	});
@@ -56,15 +56,15 @@ var C = (e) => typeof e == "object" && !!e && "label" in e, w = (e, t) => {
 		H,
 		T
 	]);
-	let { value: U, setValue: W, getValuesString: G, getLabelsString: _e } = le({
+	let { value: U, setValue: W, getValuesString: G, getLabelsString: _e } = ue({
 		component: "IressSelect",
 		defaultValue: ge,
-		multiple: u,
+		multiple: l,
 		value: H
 	}), K = y(null), q = y(null), J = y(null), { value: Y } = ee(typeof D == "string" ? {
 		xs: !0,
 		[D]: !1
-	} : { xs: D }, { disabled: !D }), { append: ve, debounceThreshold: X, initialOptions: ye, minSearchLength: be, onActivated: xe, onDeactivated: Se, prepend: Ce, selectedOptionsText: we, ...Z } = I, { debouncedQuery: Te, error: Ee, results: De, stopSearch: Oe, loading: ke, shouldShowInstructions: Ae, shouldShowNoResults: je } = oe({
+	} : { xs: D }, { disabled: !D }), { append: ve, debounceThreshold: X, initialOptions: ye, minSearchLength: be, onActivated: xe, onDeactivated: Se, prepend: Ce, selectedOptionsText: we, ...Z } = I, { debouncedQuery: Te, error: Ee, results: De, stopSearch: Oe, loading: ke, shouldShowInstructions: Ae, shouldShowNoResults: je } = se({
 		debounceThreshold: X,
 		disabled: !R || !!Y,
 		initialOptions: ye,
@@ -94,28 +94,31 @@ var C = (e) => typeof e == "object" && !!e && "label" in e, w = (e, t) => {
 		Se,
 		R
 	]);
-	let Me = ue((e) => {
+	let Me = g((e) => {
 		if (!w) return;
 		let t = e.currentTarget, n = e.relatedTarget;
 		!R && (!n || !t.contains(n)) && w(e), e.stopPropagation();
 	}, [w, R]);
-	if (k) return /* @__PURE__ */ x(ie, {
+	if (k) return /* @__PURE__ */ x(ae, {
 		value: G(),
 		ref: J,
 		variant: k,
+		name: p,
+		disabled: s,
+		required: M,
 		children: _e(", ")
 	});
 	if (Y) {
 		if (T instanceof Function) throw Error("[IressSelect] The native select does not support asynchronous options. Please provide options as an array.");
-		if (u) throw Error("[IressSelect] The native select does not support multiple selection. Please remove the multiSelect prop or use the non-native select.");
-		return /* @__PURE__ */ x(ce, {
+		if (l) throw Error("[IressSelect] The native select does not support multiple selection. Please remove the multiSelect prop or use the non-native select.");
+		return /* @__PURE__ */ x(le, {
 			className: e(a, t.Select),
 			"data-testid": Z["data-testid"],
 			disabled: s,
-			id: l,
-			name: m,
+			id: c,
+			name: p,
 			onChange: (e, t) => {
-				g?.(e, t?.value ?? null, t), W(t);
+				h?.(e, t?.value ?? null, t), W(t);
 			},
 			options: T,
 			placeholder: typeof D == "string" ? O ?? "" : O,
@@ -125,15 +128,15 @@ var C = (e) => typeof e == "object" && !!e && "label" in e, w = (e, t) => {
 			ref: q
 		});
 	}
-	let Q = typeof T == "function", Ne = P ?? !Q, Pe = me ?? (Q ? void 0 : "listbox"), $ = f({ width: F }), Fe = () => {
+	let Q = typeof T == "function", Ne = P ?? !Q, Pe = me ?? (Q ? void 0 : "listbox"), $ = d({ width: F }), Fe = () => {
 		z(!0);
 	}, Ie = () => {
 		z(!1), Oe();
 	};
-	return /* @__PURE__ */ S(fe, { children: [/* @__PURE__ */ x(se, {
+	return /* @__PURE__ */ S(fe, { children: [/* @__PURE__ */ x(ce, {
 		"data-testid": Z["data-testid"],
 		getValuesString: G,
-		name: m,
+		name: p,
 		renderHiddenInput: A,
 		required: M,
 		value: U,
@@ -141,16 +144,16 @@ var C = (e) => typeof e == "object" && !!e && "label" in e, w = (e, t) => {
 		ref: J
 	}), /* @__PURE__ */ x(te, {
 		...Z,
-		activator: /* @__PURE__ */ x(p, {
+		activator: /* @__PURE__ */ x(f, {
 			append: ve,
 			async: Q,
 			disabled: s,
 			error: Ee,
-			id: l,
+			id: c,
 			loading: ke,
-			multiSelect: u,
-			multiSelectLimit: d,
-			onChange: g,
+			multiSelect: l,
+			multiSelectLimit: u,
+			onChange: h,
 			placeholder: O,
 			prepend: Ce,
 			renderLabel: j,
@@ -167,7 +170,7 @@ var C = (e) => typeof e == "object" && !!e && "label" in e, w = (e, t) => {
 			...Z.contentStyle,
 			p: "none"
 		},
-		matchActivatorWidth: ae,
+		matchActivatorWidth: oe,
 		onActivated: Fe,
 		onDeactivated: Ie,
 		ref: K,
@@ -178,16 +181,16 @@ var C = (e) => typeof e == "object" && !!e && "label" in e, w = (e, t) => {
 		children: /* @__PURE__ */ S("div", {
 			className: $.wrapper,
 			children: [
-				c,
-				/* @__PURE__ */ x(h, {
+				re,
+				/* @__PURE__ */ x(m, {
 					autoHighlight: i,
 					debouncedQuery: Te,
 					error: Ee,
 					initialOptions: ye,
 					loading: ke,
 					minSearchLength: be,
-					multiSelect: u,
-					onChange: g,
+					multiSelect: l,
+					onChange: h,
 					options: T,
 					query: V,
 					renderOptions: pe,
@@ -208,22 +211,22 @@ var C = (e) => typeof e == "object" && !!e && "label" in e, w = (e, t) => {
 D.displayName = "IressSelect";
 //#endregion
 //#region src/components/Autocomplete/Autocomplete.tsx
-var O = g(({ alwaysShowOnFocus: n, append: ee = /* @__PURE__ */ x(r, { name: "search" }), autoComplete: te = "off", autoSelect: re = !0, className: f, clearable: p = !0, "data-testid": h, debounceThreshold: se, defaultValue: ce, errorText: le = /* @__PURE__ */ x(ne, {
+var O = h(({ alwaysShowOnFocus: n, append: ee = /* @__PURE__ */ x(r, { name: "search" }), autoComplete: te = "off", autoSelect: ie = !0, className: d, clearable: f = !0, "data-testid": m, debounceThreshold: ce, defaultValue: le, errorText: ue = /* @__PURE__ */ x(ne, {
 	status: "danger",
 	mb: "none",
 	borderRadius: "radius.system.form",
 	children: "An unknown error occurred. Please contact support if the error persists."
-}), initialOptions: g, limitDesktop: ue = 12, limitMobile: de = 6, minSearchLength: v, noResultsText: y, onChange: C, onClear: w, onFocus: T, options: E, popoverProps: { autoHighlight: D = !1, append: O, prepend: k, ...A } = {}, readOnly: j, value: pe, ...M }, me) => {
+}), initialOptions: h, limitDesktop: g = 12, limitMobile: de = 6, minSearchLength: v, noResultsText: y, onChange: C, onClear: w, onFocus: T, options: E, popoverProps: { autoHighlight: D = !1, append: O, prepend: k, ...A } = {}, readOnly: j, value: pe, ...M }, me) => {
 	let [N, P] = b(!1), { value: F, setValue: I } = o({
 		component: "IressAutocomplete",
-		defaultValue: ce,
+		defaultValue: le,
 		value: pe
-	}), [L, R] = b(!1), { clearError: z, debouncedQuery: B, error: V, loading: he, results: H, startSearch: ge, stopSearch: U, shouldShowInstructions: W, shouldShowNoResults: G } = oe({
-		debounceThreshold: se,
-		initialOptions: g,
+	}), [L, R] = b(!1), { clearError: z, debouncedQuery: B, error: V, loading: he, results: H, startSearch: ge, stopSearch: U, shouldShowInstructions: W, shouldShowNoResults: G } = se({
+		debounceThreshold: ce,
+		initialOptions: h,
 		minSearchLength: v,
 		options: E,
-		query: l(F)
+		query: c(F)
 	});
 	if (_(() => {
 		L && !N && H.length > 0 && F && P(!0);
@@ -234,7 +237,7 @@ var O = g(({ alwaysShowOnFocus: n, append: ee = /* @__PURE__ */ x(r, { name: "se
 		F
 	]), _(() => {
 		V && P(!0);
-	}, [V]), j) return /* @__PURE__ */ x(ie, {
+	}, [V]), j) return /* @__PURE__ */ x(ae, {
 		value: F,
 		variant: j
 	});
@@ -243,23 +246,23 @@ var O = g(({ alwaysShowOnFocus: n, append: ee = /* @__PURE__ */ x(r, { name: "se
 	}, K = (e) => {
 		w?.(e), I("");
 	}, q = (e) => {
-		T?.(e), g?.length && P(!0);
+		T?.(e), h?.length && P(!0);
 	}, J = (e) => {
 		let t = a(e)?.[0];
-		C?.(u(t?.label), t?.label, t), I(t?.label), P(!1), R(!1);
+		C?.(l(t?.label), t?.label, t), I(t?.label), P(!1), R(!1);
 	}, Y = () => {
 		(!n || !F) && U(), z(), P(!1), F && R(!1);
 	}, ve = (e) => {
 		M.onKeyDown?.(e), e.key === "ArrowDown" && (!N || !L) && (H.length || ge(!0), R(!0), P(!0));
-	}, X = c({ isEmpty: H.length === 0 && !V && !W && !G });
+	}, X = re({ isEmpty: H.length === 0 && !V && !W && !G });
 	return /* @__PURE__ */ S(s, {
 		...A,
-		activator: /* @__PURE__ */ x(ae, {
+		activator: /* @__PURE__ */ x(oe, {
 			...M,
 			append: ee,
 			autoComplete: te,
-			clearable: p,
-			"data-testid": i(h, "input"),
+			clearable: f,
+			"data-testid": i(m, "input"),
 			loading: he,
 			onChange: _e,
 			onClear: K,
@@ -269,10 +272,10 @@ var O = g(({ alwaysShowOnFocus: n, append: ee = /* @__PURE__ */ x(r, { name: "se
 			ref: me
 		}),
 		autoHighlight: D,
-		className: e(f, A.className, X.root, t.Autocomplete),
+		className: e(d, A.className, X.root, t.Autocomplete),
 		contentClassName: e(A.contentClassName, X.popoverContent),
 		contentStyle: A.contentStyle,
-		"data-testid": h,
+		"data-testid": m,
 		minLength: 0,
 		onActivated: () => (L || n) && P(!0),
 		onDeactivated: Y,
@@ -282,20 +285,20 @@ var O = g(({ alwaysShowOnFocus: n, append: ee = /* @__PURE__ */ x(r, { name: "se
 		children: [
 			H.length > 0 && /* @__PURE__ */ S(fe, { children: [
 				k,
-				/* @__PURE__ */ x(m, {
-					changeOnBlur: re,
+				/* @__PURE__ */ x(p, {
+					changeOnBlur: ie,
 					className: e(X.optionList),
-					"data-testid": i(h, "menu"),
+					"data-testid": i(m, "menu"),
 					items: H,
-					limitDesktop: ue,
+					limitDesktop: g,
 					limitMobile: de,
 					onChange: J,
 					selected: { label: B }
 				}),
 				O
 			] }),
-			V && le,
-			W && !V && /* @__PURE__ */ x(d, { minSearchLength: v ?? 1 }),
+			V && ue,
+			W && !V && /* @__PURE__ */ x(u, { minSearchLength: v ?? 1 }),
 			G && !V && y
 		]
 	});