@pie-lib/text-select 4.0.1-next.20261005000911 → 4.0.1-next.20261005003301

package/dist/__tests__/token-select-keyboard.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/text-select.d.ts

@@ -20,6 +20,7 @@ export default class TextSelect extends React.Component {
         highlightChoices: PropTypes.Requireable<boolean>;
         animationsDisabled: PropTypes.Requireable<boolean>;
         maxNoOfSelections: PropTypes.Requireable<number>;
+        language: PropTypes.Requireable<string>;
     };
     change: any;
     render(): React.JSX.Element;

package/dist/text-select.js

@@ -16,7 +16,8 @@ var s = o("@pie-lib:text-select"), c = class extends r.Component {
 		className: i.string,
 		highlightChoices: i.bool,
 		animationsDisabled: i.bool,
-		maxNoOfSelections: i.number
+		maxNoOfSelections: i.number,
+		language: i.string
 	};
 	change = (e) => {
 		let { onChange: t } = this.props;
@@ -26,9 +27,9 @@ var s = o("@pie-lib:text-select"), c = class extends r.Component {
 		})));
 	};
 	render() {
-		let { text: t, disabled: r, tokens: i, selectedTokens: o, className: c, highlightChoices: l, maxNoOfSelections: u, animationsDisabled: d } = this.props, f = e(t, i);
-		s("normalized: ", f);
-		let p = f.map((e) => {
+		let { text: t, disabled: r, tokens: i, selectedTokens: o, className: c, highlightChoices: l, maxNoOfSelections: u, animationsDisabled: d, language: f } = this.props, p = e(t, i);
+		s("normalized: ", p);
+		let m = p.map((e) => {
 			let t = o.findIndex((t) => t.start === e.start && t.end === e.end) !== -1, n = t ? e.correct : void 0, i = e.isMissing;
 			return {
 				...e,
@@ -41,11 +42,12 @@ var s = o("@pie-lib:text-select"), c = class extends r.Component {
 		return /* @__PURE__ */ a(n, {
 			highlightChoices: !r && l,
 			className: c,
-			tokens: p,
+			tokens: m,
 			disabled: r,
 			onChange: this.change,
 			maxNoOfSelections: u,
-			animationsDisabled: d
+			animationsDisabled: d,
+			language: f
 		});
 	}
 };

package/dist/token-select/index.d.ts

@@ -13,21 +13,39 @@ export declare class TokenSelect extends React.Component {
         highlightChoices: PropTypes.Requireable<boolean>;
         animationsDisabled: PropTypes.Requireable<boolean>;
         maxNoOfSelections: PropTypes.Requireable<number>;
+        language: PropTypes.Requireable<string>;
     };
     static defaultProps: {
         highlightChoices: boolean;
         maxNoOfSelections: number;
         tokens: never[];
     };
+    containerRef: React.RefObject<unknown>;
+    idPrefix: string;
+    activeIndex: undefined;
+    keyboardToggle: boolean;
+    operable: () => boolean;
     selectedCount: () => any;
     canSelectMore: any;
     toggleToken: any;
+    toggleAt: any;
+    sequence: () => unknown[];
+    focusedToken: () => any;
+    syncTabStop: () => unknown;
+    onFocus: any;
+    onKeyDown: any;
+    componentDidMount(): void;
+    getSnapshotBeforeUpdate(): number | null | undefined;
+    componentDidUpdate(prevProps: any, prevState: any, focusedIndex: any): void;
+    groupName: () => string;
     /**
      * Build an HTML string so that non-selectable token text (which may contain arbitrary or even
      * *partial* HTML — e.g. just an opening <table><tbody><tr><td> in one token and the matching
      * closing tags in another) is preserved exactly as-is.  Selectable Token components are
      * serialised via renderToString; their Emotion class names are stable hashes so they match the
      * CSS that the HiddenCssPrimer forces Emotion to inject into the document.
+     *
+     * Returns the descriptions the tokens reference alongside the HTML.
      */
     generateTokensInHtml: any;
     render(): React.JSX.Element;

package/dist/token-select/index.js

@@ -2,23 +2,29 @@ import { Token as e, TokenTypes as t } from "./token.js";
 import n from "react";
 import r from "prop-types";
 import { styled as i } from "@mui/material/styles";
-import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
-import { clone as c, isEqual as l } from "@pie-element/shared-lodash";
-import { noSelect as u } from "@pie-lib/style-utils";
-import d from "debug";
-import { renderToString as f } from "react-dom/server";
+import { createUniqueId as a } from "@pie-lib/render-ui";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { clone as l, isEqual as u } from "@pie-element/shared-lodash";
+import { noSelect as d } from "@pie-lib/style-utils";
+import f from "debug";
+import { renderToString as p } from "react-dom/server";
+import m from "@pie-lib/translator";
 //#region src/token-select/index.tsx
-var p = d("@pie-lib:text-select:token-select"), m = i("div")(() => ({
+var { translator: h } = m, g = f("@pie-lib:text-select:token-select"), _ = i("div")(() => ({
 	backgroundColor: "none",
 	whiteSpace: "pre",
-	...u(),
+	...d(),
 	"& p": { whiteSpace: "break-spaces" }
-})), h = i("div")(() => ({
+})), v = i("div")(() => ({
 	display: "none",
 	position: "absolute",
 	visibility: "hidden",
 	pointerEvents: "none"
-})), g = (e = "") => e.replace(/&nbsp;/gi, "\xA0"), _ = (e = "") => g(e).replace(/<\/p>\s*<p[^>]*>/gi, "\n\n").replace(/<br\s*\/?>/gi, "\n").replace(/<\/?(table|tbody|tr|td|p)[^>]*>/gi, ""), v = class extends n.Component {
+})), y = (e = "") => e.replace(/&nbsp;/gi, "\xA0"), b = (e = "") => y(e).replace(/<\/p>\s*<p[^>]*>/gi, "\n\n").replace(/<br\s*\/?>/gi, "\n").replace(/<\/?(table|tbody|tr|td|p)[^>]*>/gi, ""), x = {
+	correct: "selectText.correctAnswerSelected",
+	incorrect: "selectText.incorrectSelection",
+	missing: "selectText.correctAnswerNotSelected"
+}, S = (e) => e.correct === void 0 ? e.isMissing ? "missing" : void 0 : e.correct ? "correct" : "incorrect", C = (e) => e.text === "\n\n" || e.text === "\n", w = "[data-indexkey][tabindex]", T = (e) => e ? Number(e.dataset.indexkey) : void 0, E = class extends n.Component {
 	static propTypes = {
 		tokens: r.arrayOf(r.shape(t)).isRequired,
 		className: r.string,
@@ -26,145 +32,248 @@ var p = d("@pie-lib:text-select:token-select"), m = i("div")(() => ({
 		disabled: r.bool,
 		highlightChoices: r.bool,
 		animationsDisabled: r.bool,
-		maxNoOfSelections: r.number
+		maxNoOfSelections: r.number,
+		language: r.string
 	};
 	static defaultProps = {
 		highlightChoices: !1,
 		maxNoOfSelections: 0,
 		tokens: []
 	};
+	containerRef = n.createRef();
+	idPrefix = a("text-select");
+	activeIndex = void 0;
+	keyboardToggle = !1;
+	operable = () => !this.props.disabled && !this.props.animationsDisabled;
 	selectedCount = () => this.props.tokens.filter((e) => e.selected).length;
 	canSelectMore = (e) => {
 		let { maxNoOfSelections: t } = this.props;
-		return t === 1 ? !0 : (p("[canSelectMore] maxNoOfSelections: ", t, "selectedCount: ", e), t <= 0 || isFinite(t) && e < t);
+		return t === 1 ? !0 : (g("[canSelectMore] maxNoOfSelections: ", t, "selectedCount: ", e), t <= 0 || isFinite(t) && e < t);
 	};
 	toggleToken = (t) => {
-		let { target: n } = t, { tokens: r, animationsDisabled: i } = this.props, a = c(r), o = (n.closest?.(`.${e.rootClassName}`))?.dataset?.indexkey, s = o === void 0 ? void 0 : a[o];
-		if (s && s.correct === void 0 && !i && !s.isMissing) {
-			let { onChange: e, maxNoOfSelections: t } = this.props, n = !s.selected;
-			if (t === 1 && this.selectedCount() === 1) {
-				let t = (r || []).filter((e) => e.selected), i = a.map((e) => l(e, t[0]) ? {
+		let n = (t.target.closest?.(`.${e.rootClassName}`))?.dataset?.indexkey;
+		n !== void 0 && (this.keyboardToggle = !1, this.toggleAt(Number(n)));
+	};
+	toggleAt = (e) => {
+		let { tokens: t, animationsDisabled: n } = this.props, r = l(t), i = r[e];
+		if (this.operable() && i && i.correct === void 0 && !n && !i.isMissing) {
+			let { onChange: n, maxNoOfSelections: a } = this.props, o = !i.selected;
+			if (a === 1 && this.selectedCount() === 1) {
+				let a = (t || []).filter((e) => e.selected), s = r.map((e) => u(e, a[0]) ? {
 					...e,
 					selected: !1
 				} : {
 					...e,
 					selectable: !0
 				}), c = {
-					...s,
-					selected: n
+					...i,
+					selected: o
 				};
-				i.splice(o, 1, c), e(i);
+				s.splice(e, 1, c), n(s);
 			} else {
-				if (n && t > 0 && this.selectedCount() >= t) {
-					p("skip toggle max reached");
+				if (o && a > 0 && this.selectedCount() >= a) {
+					g("skip toggle max reached");
 					return;
 				}
-				let r = {
-					...s,
-					selected: n
+				let t = {
+					...i,
+					selected: o
 				};
-				a.splice(o, 1, r), e(a);
+				r.splice(e, 1, t), n(r);
 			}
 		}
 	};
+	sequence = () => Array.from(this.containerRef.current?.querySelectorAll(w) || []);
+	focusedToken = () => {
+		let e = this.containerRef.current, t = e?.getRootNode().activeElement;
+		return t && e.contains(t) ? t.closest(w) : null;
+	};
+	syncTabStop = () => {
+		let e = this.sequence(), t = e.find((e) => T(e) === this.activeIndex) || e.find((e) => e.getAttribute("aria-pressed") === "true") || e[0];
+		return e.forEach((e) => {
+			let n = e === t ? "0" : "-1";
+			e.getAttribute("tabindex") !== n && e.setAttribute("tabindex", n);
+		}), t;
+	};
+	onFocus = (e) => {
+		let t = e.target.closest?.(w);
+		t && (this.activeIndex = T(t), this.syncTabStop());
+	};
+	onKeyDown = (e) => {
+		if (!this.operable() || e.altKey || e.ctrlKey || e.metaKey) return;
+		let t = e.target.closest?.(w);
+		if (!t) return;
+		if (e.key === " " || e.key === "Enter") {
+			e.preventDefault(), !e.repeat && t.getAttribute("aria-disabled") !== "true" && (this.keyboardToggle = !0, this.toggleAt(T(t)));
+			return;
+		}
+		let n = this.sequence(), r = n.indexOf(t), i = n.length - 1, a = {
+			ArrowRight: Math.min(r + 1, i),
+			ArrowDown: Math.min(r + 1, i),
+			ArrowLeft: Math.max(r - 1, 0),
+			ArrowUp: Math.max(r - 1, 0),
+			Home: 0,
+			End: i
+		}[e.key];
+		a !== void 0 && (e.preventDefault(), n[a].focus());
+	};
+	componentDidMount() {
+		this.syncTabStop();
+	}
+	getSnapshotBeforeUpdate() {
+		let e = this.focusedToken();
+		return e ? T(e) : null;
+	}
+	componentDidUpdate(e, t, n) {
+		let r = this.syncTabStop();
+		n == null || this.focusedToken() || (this.sequence().find((e) => T(e) === n) || r)?.focus({
+			preventScroll: !0,
+			focusVisible: this.keyboardToggle
+		});
+	}
+	groupName = () => {
+		let { maxNoOfSelections: e, language: t } = this.props;
+		return e > 0 ? h.t("selectText.textGroupWithLimit", {
+			lng: t,
+			max: e
+		}) : h.t("selectText.textGroup", { lng: t });
+	};
 	generateTokensInHtml = () => {
-		let { tokens: t, disabled: n, highlightChoices: r, animationsDisabled: i } = this.props, a = this.selectedCount();
-		return (t || []).reduce((t, s, c) => {
-			let l = s.selected || s.selectable && this.canSelectMore(a), u = s.correct !== void 0 && (s.selectable || s.selected);
-			return s.text === "\n\n" ? `${t}</p><p>` : s.text === "\n" ? `${t}<br>` : l && !n || u || s.selected || s.isMissing || i && s.predefined ? t + f(/* @__PURE__ */ o(e, {
-				disabled: n,
-				index: c,
-				...s,
-				text: _(s.text),
-				selectable: l,
-				highlight: r,
-				animationsDisabled: i
-			}, c)) : t + g(s.text);
-		}, "<p>") + "</p>";
+		let { tokens: t, disabled: n, highlightChoices: r, animationsDisabled: i, language: a } = this.props, o = this.selectedCount(), c = this.operable(), l = {}, u = (e) => c && !C(e) && (e.selected || e.selectable), d = (t || []).filter(u).length, f = 0, m = (e, t) => {
+			let n = `${this.idPrefix}-${e}`;
+			return l[n] = t, n;
+		};
+		return {
+			html: (t || []).reduce((t, c, l) => {
+				let g = c.selected || c.selectable && this.canSelectMore(o), _ = c.correct !== void 0 && (c.selectable || c.selected);
+				if (c.text === "\n\n") return `${t}</p><p>`;
+				if (c.text === "\n") return `${t}<br>`;
+				if (u(c) || g && !n || _ || c.selected || c.isMissing || i && c.predefined) {
+					let o = u(c), _;
+					if (o) f += 1, _ = m(`position-${f}`, h.t("selectText.tokenPosition", {
+						lng: a,
+						index: f,
+						total: d
+					}));
+					else {
+						let e = S(c);
+						e && (_ = m(e, h.t(x[e], { lng: a })));
+					}
+					return t + p(/* @__PURE__ */ s(e, {
+						disabled: n,
+						index: l,
+						...c,
+						text: b(c.text),
+						selectable: g,
+						highlight: r,
+						animationsDisabled: i,
+						operable: o,
+						describedBy: _
+					}, l));
+				}
+				return t + y(c.text);
+			}, "<p>") + "</p>",
+			descriptions: l
+		};
 	};
 	render() {
-		let { className: t } = this.props, n = this.generateTokensInHtml();
-		return /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ s(h, {
-			"aria-hidden": "true",
-			children: [
-				/* @__PURE__ */ o(e, {
-					text: " ",
-					index: -1,
-					selectable: !0,
-					disabled: !1,
-					highlight: !1,
-					animationsDisabled: !1
-				}),
-				/* @__PURE__ */ o(e, {
-					text: " ",
-					index: -1,
-					selectable: !0,
-					disabled: !1,
-					highlight: !0,
-					animationsDisabled: !1
-				}),
-				/* @__PURE__ */ o(e, {
-					text: " ",
-					index: -1,
-					selectable: !0,
-					selected: !0,
-					disabled: !1,
-					highlight: !1,
-					animationsDisabled: !1
-				}),
-				/* @__PURE__ */ o(e, {
-					text: " ",
-					index: -1,
-					selectable: !0,
-					selected: !0,
-					disabled: !0,
-					highlight: !1,
-					animationsDisabled: !1
-				}),
-				/* @__PURE__ */ o(e, {
-					text: " ",
-					index: -1,
-					selectable: !0,
-					disabled: !1,
-					highlight: !1,
-					animationsDisabled: !0,
-					predefined: !0
-				}),
-				/* @__PURE__ */ o(e, {
-					text: " ",
-					index: -1,
-					selectable: !0,
-					selected: !0,
-					correct: !0,
-					disabled: !1,
-					highlight: !1,
-					animationsDisabled: !1
-				}),
-				/* @__PURE__ */ o(e, {
-					text: " ",
-					index: -1,
-					selectable: !0,
-					selected: !0,
-					correct: !1,
-					disabled: !1,
-					highlight: !1,
-					animationsDisabled: !1
-				}),
-				/* @__PURE__ */ o(e, {
-					text: " ",
-					index: -1,
-					isMissing: !0,
-					disabled: !1,
-					highlight: !1,
-					animationsDisabled: !1
-				})
-			]
-		}), /* @__PURE__ */ o(m, {
-			className: t,
-			onClick: this.toggleToken,
-			dangerouslySetInnerHTML: { __html: n }
-		})] });
+		let { className: t } = this.props, { html: n, descriptions: r } = this.generateTokensInHtml();
+		return /* @__PURE__ */ c(o, { children: [
+			/* @__PURE__ */ c(v, {
+				"aria-hidden": "true",
+				children: [
+					/* @__PURE__ */ s(e, {
+						text: " ",
+						index: -1,
+						selectable: !0,
+						disabled: !1,
+						highlight: !1,
+						animationsDisabled: !1
+					}),
+					/* @__PURE__ */ s(e, {
+						text: " ",
+						index: -1,
+						selectable: !0,
+						disabled: !1,
+						highlight: !0,
+						animationsDisabled: !1
+					}),
+					/* @__PURE__ */ s(e, {
+						text: " ",
+						index: -1,
+						selectable: !0,
+						selected: !0,
+						disabled: !1,
+						highlight: !1,
+						animationsDisabled: !1
+					}),
+					/* @__PURE__ */ s(e, {
+						text: " ",
+						index: -1,
+						selectable: !0,
+						selected: !0,
+						disabled: !0,
+						highlight: !1,
+						animationsDisabled: !1
+					}),
+					/* @__PURE__ */ s(e, {
+						text: " ",
+						index: -1,
+						selectable: !0,
+						disabled: !1,
+						highlight: !1,
+						animationsDisabled: !0,
+						predefined: !0
+					}),
+					/* @__PURE__ */ s(e, {
+						text: " ",
+						index: -1,
+						selectable: !0,
+						selected: !0,
+						correct: !0,
+						disabled: !1,
+						highlight: !1,
+						animationsDisabled: !1
+					}),
+					/* @__PURE__ */ s(e, {
+						text: " ",
+						index: -1,
+						selectable: !0,
+						selected: !0,
+						correct: !1,
+						disabled: !1,
+						highlight: !1,
+						animationsDisabled: !1
+					}),
+					/* @__PURE__ */ s(e, {
+						text: " ",
+						index: -1,
+						isMissing: !0,
+						disabled: !1,
+						highlight: !1,
+						animationsDisabled: !1
+					})
+				]
+			}),
+			/* @__PURE__ */ s(_, {
+				ref: this.containerRef,
+				className: t,
+				role: "group",
+				"aria-label": this.groupName(),
+				onClick: this.toggleToken,
+				onKeyDown: this.onKeyDown,
+				onFocus: this.onFocus,
+				dangerouslySetInnerHTML: { __html: n }
+			}),
+			Object.keys(r).length > 0 && /* @__PURE__ */ s("div", {
+				hidden: !0,
+				children: Object.entries(r).map(([e, t]) => /* @__PURE__ */ s("span", {
+					id: e,
+					children: t
+				}, e))
+			})
+		] });
 	}
 };
 //#endregion
-export { v as TokenSelect, v as default, t as TokenTypes };
+export { E as TokenSelect, E as default, t as TokenTypes };

package/dist/token-select/token.d.ts

@@ -12,10 +12,13 @@ export declare class Token extends React.Component {
         disabled: PropTypes.Requireable<boolean>;
         highlight: PropTypes.Requireable<boolean>;
         correct: PropTypes.Requireable<boolean>;
+        operable: PropTypes.Requireable<boolean>;
+        describedBy: PropTypes.Requireable<string>;
         selectable: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {
         selectable: boolean;
+        operable: boolean;
         text: string;
     };
     getClassAndIconConfig: any;

package/dist/token-select/token.js

@@ -7,9 +7,16 @@ import { jsx as a, jsxs as o } from "react/jsx-runtime";
 import s from "@mui/icons-material/Check";
 import c from "@mui/icons-material/Close";
 //#region src/token-select/token.tsx
-var l = 3.2, u = 3.4, d = 2, f = r("span")(({ theme: e }) => ({
+var l = 3.2, u = 3.4, d = 2, f = () => i.v("pie")("focus-outline", "button-focus-outline", "focus-checked-border", i.defaults.FOCUS_CHECKED_BORDER), p = r("span")(({ theme: e }) => ({
 	cursor: "pointer",
 	textIndent: 0,
+	"&:focus:not(:focus-visible)": { outline: "none" },
+	"&:focus-visible": {
+		outline: `3px solid ${f()}`,
+		outlineOffset: "2px",
+		borderRadius: "4px"
+	},
+	"&.unavailable": { cursor: "inherit" },
 	"&.disabled": {
 		cursor: "inherit",
 		color: i.disabled()
@@ -44,13 +51,13 @@ var l = 3.2, u = 3.4, d = 2, f = r("span")(({ theme: e }) => ({
 		color: i.text()
 	},
 	"&.custom": { display: "initial" }
-})), p = r("span")(({ theme: e }) => ({
+})), m = r("span")(({ theme: e }) => ({
 	position: "relative",
 	borderRadius: "4px",
 	color: i.text(),
 	lineHeight: `${parseFloat(e.spacing(1)) * u + d}px`,
 	padding: `${d}px`
-})), m = r(p)(() => ({ border: `${i.correctTertiary()} solid 2px` })), h = r(p)(() => ({ border: `${i.incorrectWithIcon()} solid 2px` })), g = r(p)(() => ({ border: `${i.incorrectWithIcon()} dashed 2px` })), _ = {
+})), h = r(m)(() => ({ border: `${i.correctTertiary()} solid 2px` })), g = r(m)(() => ({ border: `${i.incorrectWithIcon()} solid 2px` })), _ = r(m)(() => ({ border: `${i.incorrectWithIcon()} dashed 2px` })), v = {
 	color: i.white(),
 	position: "absolute",
 	top: "-8px",
@@ -59,76 +66,84 @@ var l = 3.2, u = 3.4, d = 2, f = r("span")(({ theme: e }) => ({
 	fontSize: "12px",
 	padding: "2px",
 	display: "inline-block"
-}, v = r(s)(() => ({
-	..._,
+}, y = r(s)(() => ({
+	...v,
 	backgroundColor: i.correctTertiary()
-})), y = r(c)(() => ({
-	..._,
+})), b = r(c)(() => ({
+	...v,
 	backgroundColor: i.incorrectWithIcon()
-})), b = ({ useWrapper: e, children: t, Container: n, Icon: r }) => e ? /* @__PURE__ */ o(n, { children: [t, r ? /* @__PURE__ */ a(r, {}) : null] }) : t;
-b.propTypes = {
+})), x = ({ useWrapper: e, children: t, Container: n, Icon: r }) => e ? /* @__PURE__ */ o(n, { children: [t, r ? /* @__PURE__ */ a(r, {}) : null] }) : t;
+x.propTypes = {
 	useWrapper: n.bool,
 	Container: n.elementType,
 	Icon: n.elementType,
 	children: n.node
 };
-var x = {
+var S = {
 	text: n.string,
 	selectable: n.bool
-}, S = class r extends t.Component {
+}, C = class r extends t.Component {
 	static rootClassName = "tokenRootClass";
 	static propTypes = {
-		...x,
+		...S,
 		text: n.string.isRequired,
 		className: n.string,
 		disabled: n.bool,
 		highlight: n.bool,
-		correct: n.bool
+		correct: n.bool,
+		operable: n.bool,
+		describedBy: n.string
 	};
 	static defaultProps = {
 		selectable: !1,
+		operable: !1,
 		text: ""
 	};
 	getClassAndIconConfig = () => {
-		let { selectable: t, selected: n, className: i, disabled: a, highlight: o, correct: s, animationsDisabled: c, isMissing: l } = this.props, u = "ontouchstart" in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0, d = r.rootClassName;
+		let { selectable: t, selected: n, className: i, disabled: a, highlight: o, correct: s, animationsDisabled: c, isMissing: l, operable: u } = this.props, d = "ontouchstart" in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0, f = r.rootClassName;
 		if (s === void 0 && n && a) return {
-			className: e(d, "selectedToken", "disabledBlack", i),
-			Component: f
+			className: e(f, "selectedToken", "disabledBlack", i),
+			Component: p
 		};
 		if (s !== void 0) {
 			let t = s === !0;
 			return {
-				className: e(d, "custom", i),
-				Component: f,
-				Container: t ? m : h,
-				Icon: t ? v : y
+				className: e(f, "custom", i),
+				Component: p,
+				Container: t ? h : g,
+				Icon: t ? y : b
 			};
 		}
 		return l ? {
-			className: e(d, "custom", "missing", i),
-			Component: f,
-			Container: g,
-			Icon: y
+			className: e(f, "custom", "missing", i),
+			Component: p,
+			Container: _,
+			Icon: b
 		} : {
-			className: e(d, a && "disabled", t && !a && !u && "selectableToken", n && !a && "selectedToken", n && a && "disabledAndSelected", o && t && !a && !n && "highlight", c && "print", i),
-			Component: f,
+			className: e(f, a && "disabled", t && !a && !d && "selectableToken", n && !a && "selectedToken", n && a && "disabledAndSelected", o && t && !a && !n && "highlight", u && !t && !n && "unavailable", c && "print", i),
+			Component: p,
 			Container: void 0,
 			Icon: void 0
 		};
 	};
 	render() {
-		let { text: e, index: t, correct: n, isMissing: r } = this.props, { className: i, Component: o, Container: s, Icon: c } = this.getClassAndIconConfig();
-		return /* @__PURE__ */ a(b, {
+		let { text: e, index: t, correct: n, isMissing: r, selected: i, selectable: o, operable: s, describedBy: c } = this.props, { className: l, Component: u, Container: d, Icon: f } = this.getClassAndIconConfig(), m = u || p, h = s && (o || i);
+		return /* @__PURE__ */ a(x, {
 			useWrapper: n !== void 0 || r,
-			Container: s,
-			Icon: c,
-			children: /* @__PURE__ */ a(o || f, {
-				className: i,
+			Container: d,
+			Icon: f,
+			children: /* @__PURE__ */ a(m, {
+				className: l,
 				dangerouslySetInnerHTML: { __html: (e || "").replace(/\n/g, "<br>") },
-				"data-indexkey": t
+				"data-indexkey": t,
+				role: "button",
+				"aria-pressed": !!i,
+				"aria-disabled": !h || void 0,
+				"aria-describedby": c || void 0,
+				tabIndex: s ? -1 : void 0
 			})
 		});
 	}
 };
 //#endregion
-export { S as Token, S as default, x as TokenTypes };
+export { C as Token, C as default, S as TokenTypes };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/text-select",
-  "version": "4.0.1-next.20261005000911",
+  "version": "4.0.1-next.20261005003301",
   "description": "Some react components for text selection",
   "repository": {
     "type": "git",
@@ -13,9 +13,9 @@
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
     "@pie-framework/parse-english": "^1.0.0",
-    "@pie-lib/render-ui": "8.0.1-next.20261005000911",
+    "@pie-lib/render-ui": "8.0.1-next.20261005003301",
     "@pie-lib/style-utils": "3.0.1-next.20261002233132",
-    "@pie-lib/translator": "5.0.1-next.20261005000911",
+    "@pie-lib/translator": "5.0.1-next.20261005003301",
     "debug": "^4.1.1",
     "prop-types": "^15.6.2",
     "@pie-element/shared-lodash": "0.1.2-next.20261002215153",