@xsolla/xui-supporting-text 0.174.3 → 0.176.0

package/README.md

@@ -1,6 +1,59 @@
 # SupportingText
 
 A small, accessible text component for labels, helpers, descriptions, and error messages around form fields.
+<!-- BEGIN:xui-mcp-instructions:supporting-text -->
+Label is the short, descriptive caption that titles a form control — the text shown above an input, select, slider, or other control — telling the user what value is expected. It can include an optional info icon that reveals extra guidance on demand.
+
+### When to use
+
+When you need to name a form control so users know what to enter or choose (above an input, select, slider, etc.)
+
+When a control needs a persistent, always-visible name rather than a hint that disappears
+
+When a field benefits from supplementary help, exposed through the optional info icon
+
+### When not to use
+
+As a substitute for the placeholder inside a field — the label should stay visible and sit outside the control
+
+For long instructions or help text — use helper / description text below the field instead
+- As a heading for a whole section or page — use a Heading text instead
+- For decorative or body text unrelated to a control — use plain Text instead
+
+### Content guidelines
+
+Keep the label short and noun-based (*"Email"*, *"Country"*), and use consistent casing across all fields.
+
+Describe what the field is, not the action the user takes.
+
+Mark required or optional fields consistently across the product, and never by color alone.
+
+Use Primary for the main, default field label and Tertiary for secondary or de-emphasized labels; apply Accent (Primary only) when a label needs extra emphasis.
+
+Keep the label itself concise and move any longer explanation behind the info icon rather than into the label text.
+
+### Behaviour guidelines
+
+Type — Primary is the strong default treatment; Tertiary is muted for secondary contexts. The Accent variant exists for Primary only, so a Tertiary label has no accent state.
+
+Size — XL, L, M, S, and XS scale the label to match the control it titles and the surrounding density; pair the label size with its field consistently.
+
+Info icon — reveals supplementary guidance on hover, focus, or click; keep it optional and only for genuinely helpful context, not essential instructions.
+
+Association — the label must sit directly above or beside its control and stay visually tied to it even when the layout wraps or scrolls.
+
+### Accessibility
+
+Programmatically associate the label with its control (e.g. for / id or by wrapping) so screen readers announce it when the field receives focus.
+
+Clicking or tapping the label should move focus to — or activate — its associated control.
+
+The info icon's content must be reachable and readable by keyboard and screen reader, not available on hover alone.
+
+Ensure contrast meets minimums for every type and size, including the muted Tertiary treatment.
+
+Never communicate required, optional, or error state through color alone — pair it with text or an icon.
+<!-- END:xui-mcp-instructions:supporting-text -->
 
 ## Installation
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-supporting-text",
-  "version": "0.174.3",
+  "version": "0.176.0",
   "main": "./web/index.js",
   "module": "./web/index.mjs",
   "types": "./web/index.d.ts",
@@ -10,9 +10,9 @@
     "build:native": "PLATFORM=native tsup"
   },
   "dependencies": {
-    "@xsolla/xui-core": "0.174.3",
-    "@xsolla/xui-icons": "0.174.3",
-    "@xsolla/xui-primitives-core": "0.174.3"
+    "@xsolla/xui-core": "0.176.0",
+    "@xsolla/xui-icons": "0.176.0",
+    "@xsolla/xui-primitives-core": "0.176.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",