docs(slider): align documented focus surface with current behavior (#309)

* docs(slider): align documented focus surface with current behavior

* docs(slider): address review feedback

Author: RtlZeroMemory

docs/styling/focus-styles.md

@@ -103,6 +103,7 @@ The following widgets accept `focusConfig`:
 | `input` | Suppresses focused input decoration |
 | `textarea` | Suppresses focused textarea decoration |
 | `select` | Suppresses focused select decoration |
+| `slider` | Suppresses focused slider highlight |
 | `virtualList` | Suppresses focused item highlight |
 | `table` | Suppresses focused row highlight |
 | `commandPalette` | Suppresses focused item highlight |

docs/widgets/catalog.json

@@ -232,9 +232,20 @@
     },
     {
       "name": "slider",
-      "requiredProps": ["id", "value", "onChange"],
-      "commonProps": ["min", "max", "step"],
-      "example": "ui.slider({ id: 'vol', value: 42, onChange: setVol })"
+      "requiredProps": ["id", "value"],
+      "commonProps": [
+        "min",
+        "max",
+        "step",
+        "label",
+        "showValue",
+        "onChange",
+        "readOnly",
+        "focusable",
+        "accessibleLabel",
+        "focusConfig"
+      ],
+      "example": "ui.slider({ id: 'vol', value: 42, min: 0, max: 100, onChange: setVol })"
     },
     {
       "name": "focusAnnouncer",

docs/widgets/slider.md

@@ -23,6 +23,8 @@ ui.slider({
 |---|---|---|---|
 | `id` | `string` | **required** | Unique identifier for focus and routing |
 | `value` | `number` | **required** | Current value |
+| `focusable` | `boolean` | `true` | Remove the slider from Tab order while keeping id-based routing available |
+| `accessibleLabel` | `string` | - | Optional semantic label for focus announcements and debugging |
 | `min` | `number` | `0` | Minimum value |
 | `max` | `number` | `100` | Maximum value |
 | `step` | `number` | `1` | Keyboard increment/decrement step |
@@ -33,6 +35,7 @@ ui.slider({
 | `disabled` | `boolean` | `false` | Disable focus and interaction |
 | `readOnly` | `boolean` | `false` | Keep focusable, but block value changes |
 | `style` | `TextStyle` | - | Optional style override |
+| `focusConfig` | `FocusConfig` | - | Control focus visuals; `{ indicator: "none" }` suppresses the focused slider highlight |
 | `key` | `string` | - | Reconciliation key |
 
 ## Behavior
@@ -42,7 +45,9 @@ ui.slider({
 - **Right/Up** increases by `step`.
 - **PageDown/PageUp** changes by 10 steps.
 - **Home/End** jumps to min/max.
+- `onChange` is optional; without it, the slider still renders and can receive focus, but it behaves as a non-editing control.
 - `readOnly` sliders still receive focus but do not emit `onChange`.
+- `focusConfig: { indicator: "none" }` keeps keyboard focus routing but suppresses the focused slider styling.
 
 ## Related
 

packages/core/src/widgets/__tests__/slider.test.ts

@@ -80,4 +80,17 @@ describe("slider widget API", () => {
     assert.equal(fromUi.kind, "slider");
     assert.deepEqual(fromUi.props, props);
   });
+
+  test("slider accepts focusConfig without requiring onChange", () => {
+    const props: SliderProps = {
+      id: "volume-passive",
+      value: 50,
+      focusable: true,
+      focusConfig: { indicator: "none" },
+    };
+
+    const fromUi = ui.slider(props);
+    assert.equal(fromUi.kind, "slider");
+    assert.deepEqual(fromUi.props, props);
+  });
 });