@iyulab/components 1.40.3 → 1.41.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/components",
   "description": "web-components library based on lit-element made by iyulab",
-  "version": "1.40.3",
+  "version": "1.41.1",
   "keywords": [
     "iyulab",
     "components",
@@ -86,7 +86,7 @@
     "@eslint/js": "^10.0.1",
     "@types/node": "^26.1.1",
     "@types/react": "^19.2.14",
-    "@vitest/browser-playwright": "^4.1.10",
+    "@vitest/browser-playwright": "^5.0.0",
     "eslint": "^10.1.0",
     "eslint-plugin-lit": "^2.3.1",
     "globals": "^17.7.0",
@@ -97,6 +97,6 @@
     "vite": "^8.1.4",
     "vite-plugin-dts": "^5.0.3",
     "vite-plugin-static-copy": "^4.1.1",
-    "vitest": "^4.1.10"
+    "vitest": "^5.0.0"
   }
 }

package/skills/iyulab-components/references/components/field.md

@@ -23,6 +23,48 @@ Layout wrapper for form controls. Renders label, required marker, description te
 
 ---
 
+## Accessible name
+
+`u-field` does more than draw the label — it **names the control you slot into it**. The label text
+is copied onto the slotted element as `aria-label` (and `description` as `aria-description`), and
+`u-*` form controls pass that through to the native control inside their shadow root.
+`aria-labelledby` is not used: it does not cross shadow boundaries.
+
+**Set the label in one place only.** If the slotted control already carries its own `label`,
+`aria-label`, or `aria-labelledby`, the field leaves it alone — overriding it would make the visible
+label and the accessible name disagree (WCAG SC 2.5.3 Label in Name). Setting `label` on *both*
+renders the label twice; a development-mode console warning points at that spot.
+
+```html
+<!-- label on the field -->
+<u-field label="Email"><u-input type="email" name="email"></u-input></u-field>
+
+<!-- or on the control — not both -->
+<u-input label="Email" type="email" name="email"></u-input>
+
+<!-- native elements work the same way -->
+<u-field label="Notes"><textarea name="notes"></textarea></u-field>
+```
+
+A `u-field` that has a `label` but no form control in its default slot also warns: that label names
+nothing. "Form control" here is a question about **structure**, not about what is on screen — a
+form-associated custom element, a native form or focusable tag, `tabindex`, or `contenteditable`.
+A field that is `disabled`, or rendered inside a container that is currently hidden (a closed
+drawer, an inactive tab panel, a wizard step that is not current), is still correctly built and does
+not warn. The control may sit inside a wrapper element; it does not have to be the slot's direct
+child.
+
+All ten form controls take the field's label this way. Three of them get it slightly differently,
+because their name normally comes from their own content:
+
+| Control | How the field label reaches it |
+|---------|-------------------------------|
+| `u-checkbox`, `u-switch` | Only when they have no label text of their own (own `label`, or content in the default slot). Their own text always wins. |
+| `u-file-input` | Composed into the trigger button's name as `"<button text>, <field label>"`, so the visible text stays part of the accessible name. |
+| everything else | Directly, on the native control inside the shadow root. |
+
+---
+
 ## Slots
 
 | Name | Description |

package/skills/iyulab-components/references/components/switch.md

@@ -25,7 +25,7 @@ Toggle switch (on/off). Supports custom track and thumb content via slots. Form-
 
 | Name | Description |
 |------|-------------|
-| *(default)* | Label text |
+| *(default)* | Label text (falls back to the `label` property) |
 | `track-checked` | Content inside the track when checked |
 | `track-unchecked` | Content inside the track when unchecked |
 | `thumb-checked` | Thumb content when checked |
@@ -35,6 +35,7 @@ Toggle switch (on/off). Supports custom track and thumb content via slots. Form-
 
 | Property | Type | Default | Reflect | Description |
 |----------|------|---------|---------|-------------|
+| `label` | `string` | — | — | Label text — fallback for the default slot |
 | `checked` | `boolean` | `false` | ✓ | On/off state |
 | `disabled` | `boolean` | `false` | ✓ | Disable |
 | `readonly` | `boolean` | `false` | ✓ | Read-only |