@expressivecss/mcp-server 0.4.1 → 0.5.0

package/semantics-data.json

@@ -1,14 +1,14 @@
 {
   "schemaVersion": 1,
-  "generatedBy": "mcp/expressivecss/scripts/sync-guides.mjs",
-  "frameworkVersion": "0.15.0",
+  "generatedBy": "scripts/gen-expressivecss-skill.mjs",
+  "frameworkVersion": "0.16.0",
   "semantics": {
     "about": "Normative HTML semantics for ExpressiveCSS. This data file is the single source of truth: SEMANTICS.md is generated from it by scripts/gen-semantics.mjs, and tests/semantics.test.js enforces it. One row per roster entry, each stating its kind - component, foundation or behavior, as CONTEXT.md defines them. CONTEXT.md defines the rest of the vocabulary.",
     "scope": "Element choice, landmark structure, and the ARIA that element choice implies. Keyboard interaction, focus management and colour contrast are deliberately out of scope.",
     "rules": [
       "Static semantics are the page author's; dynamic state is the framework's. See CONTEXT.md for both terms.",
-      "A component may declare a composite role only if its keyboard contract is implemented and tested. Tabs do not qualify: they are navigation (`<nav>` + anchors + `aria-current`), not a `tablist`. Carousel is a different case - its keyboard contract is implemented, and it rejects `tablist` because it follows the ARIA carousel pattern instead.",
-      "Icons are `<span class=\"material-symbols\" aria-hidden=\"true\">`. `<i>` keeps working but is undocumented.",
+      "A component may declare a composite role only if its keyboard contract is implemented and tested. Tabs are navigation (`<nav>` + anchors + `aria-current`) by default; a strip the page marks `role=\"tablist\"` gets the tabs keyboard model and `aria-selected` from the component. Carousel is a different case - its keyboard contract is implemented, and it rejects `tablist` because it follows the ARIA carousel pattern instead.",
+      "Icons are `<span class=\"material-symbols\" aria-hidden=\"true\">`. A bare `<i>` gets no icon styling.",
       "`<nav>` is for genuine navigation only, and every one carries a required `aria-label`. Card action rows and toolbars are not navigation.",
       "Every user-facing string the framework generates has an `i18n` option."
     ],
@@ -46,7 +46,11 @@
     "additional": [
       "autocomplete",
       "character-counter",
-      "landmarks"
+      "currency-input",
+      "hover-card",
+      "input-mask",
+      "landmarks",
+      "tree-select"
     ],
     "notComponents": {
       "table_of_contents": "the list it styles is Scrollspy's markup, taught under Scrollspy in `llm.md` and rendered per page by the docs site's page scaffold. The partial stays in the sheet; `scrollspy` owns its rule."
@@ -128,7 +132,7 @@
           {
             "id": "fab-no-surface-color",
             "kind": "forbid",
-            "selector": ":is(button, a.button, label.button):is(.circle.extra, .circle.large, .extend):is(.surface, .surface-dim, .surface-bright, .surface-variant, .surface-container, .surface-container-lowest, .surface-container-low, .surface-container-high, .surface-container-highest)",
+            "selector": ":is(button, a.button, label.button):is(.circle.extra, .circle.large, .extend):is(.surface, .surface-dim, .surface-bright, .surface-container, .surface-container-lowest, .surface-container-low, .surface-container-high, .surface-container-highest)",
             "fragmentSafe": true,
             "message": "Use a primary, secondary or tertiary container color for a FAB instead of a surface color."
           }
@@ -395,6 +399,45 @@
           }
         ]
       },
+      "cascader": {
+        "status": "enforced",
+        "note": "Added with the cascader component. The author writes a text input, its label and a ul.cascader-options of nested lists with one data-value per option; AutoInit builds the columns, their listbox and option roles and their states in a popover, so the author's lists stay plain lists.",
+        "rejects": {
+          "rejected_role": "listbox",
+          "because": "the author's lists are only the source the script reads and are never shown; the listbox columns it builds in the popover carry the roles, states and arrow-key contract",
+          "rule": "cascader-lists-take-no-roles"
+        },
+        "rules": [
+          {
+            "id": "cascader-lists-take-no-roles",
+            "kind": "forbid",
+            "selector": ".cascader-options[role], .cascader-options [role]",
+            "fragmentSafe": true,
+            "message": "Leave roles off .cascader-options and its items. The lists are the source the script reads; it builds the listbox columns, with their roles and states, itself."
+          },
+          {
+            "id": "cascader-option-has-value",
+            "kind": "forbid",
+            "selector": ".cascader-options li:not([data-value])",
+            "fragmentSafe": true,
+            "message": "Give every option in .cascader-options a data-value. The form submits one value per level of the chosen path, and an option without one submits an empty string."
+          },
+          {
+            "id": "cascader-needs-a-text-field",
+            "kind": "forbid",
+            "selector": ".cascader > input:not(:is(:not([type]), [type=\"text\" i]))",
+            "fragmentSafe": true,
+            "message": "A .cascader shows the chosen path in an <input> of type text, which the script makes read-only. Other input types reject the path's labels."
+          },
+          {
+            "id": "cascader-input-is-named",
+            "kind": "forbid",
+            "selector": ".cascader:not(:has(> label[for])) > input:not([aria-label]):not([aria-labelledby])",
+            "fragmentSafe": true,
+            "message": "Name the cascader's input with a <label for> in the field, or aria-label. The popover and its first column take their name from the same label."
+          }
+        ]
+      },
       "character-counter": {
         "status": "enforced",
         "kind": "behavior",
@@ -460,7 +503,7 @@
           {
             "id": "chip-icon-hidden",
             "kind": "require-attr",
-            "selector": ".chip :is(.material-symbols,.material-symbols-outlined,.material-symbols-rounded,.material-symbols-sharp,.material-icons)",
+            "selector": ".chip :is(.material-symbols,.material-symbols-outlined,.material-symbols-rounded,.material-symbols-sharp)",
             "attr": "aria-hidden",
             "equals": "true",
             "message": "A ligature icon is read aloud verbatim. Decorative icons inside a labelled control must be aria-hidden."
@@ -497,27 +540,33 @@
         "note": "Swept 0.8.0. A behavior, not a component: the picker plugins generate this positioning wrapper, so there is no element an author writes to get one.",
         "rules": []
       },
+      "modal-display": {
+        "status": "enforced",
+        "kind": "behavior",
+        "note": "Added with the modal date and time pickers. A behavior, not a component: the picker plugins generate this <dialog>, named by the input's label, so there is no element an author writes to get one.",
+        "rules": []
+      },
       "drag-handle": {
         "status": "enforced",
-        "note": "The affordance that says a thing can be dragged, added with the drag handle component (#34). Which element it is *is* the whole semantic: a <span aria-hidden=\"true\"> when it is decoration - the usual case, and what a bottom sheet wants, since Escape already dismisses the sheet and the drag is a pointer nicety on top - and a <button> with a name when something is genuinely wired to it. The two rules below hold that split, and the sheet leans on it: `button.drag-handle` is where every interactive state in the partial is scoped, which is only correct because nothing else can be interactive. What no rule can check is the thing this component is most likely to be misused for. Dragging is a pointer gesture, so any outcome reachable only by dragging is unreachable without one; the framework ships no reordering behaviour to hang off this handle, and a page that builds one owes it a keyboard path of its own. The docs say so plainly rather than implying the handle supplies it. Every selector below names `.handle` beside `.drag-handle`: the bottom sheet styles the pre-1.0 spelling too, and an alias the framework blesses is an alias these rules have to reach. The first rule is deliberately not fragmentSafe - what it detects is a *missing* aria-hidden, and a fragment omits by nature.",
+        "note": "The affordance that says a thing can be dragged, added with the drag handle component (#34). Which element it is *is* the whole semantic: a <span aria-hidden=\"true\"> when it is decoration - the usual case, and what a bottom sheet wants, since Escape already dismisses the sheet and the drag is a pointer nicety on top - and a <button> with a name when something is genuinely wired to it. The two rules below hold that split, and the sheet leans on it: `button.drag-handle` is where every interactive state in the partial is scoped, which is only correct because nothing else can be interactive. What no rule can check is the thing this component is most likely to be misused for. Dragging is a pointer gesture, so any outcome reachable only by dragging is unreachable without one; the Sortable behavior, the one reordering the framework ships, pairs a decorative handle with Move up and Move down buttons, and a page that builds its own owes it a keyboard path too. The docs say so plainly rather than implying the handle supplies it. The first rule is deliberately not fragmentSafe - what it detects is a *missing* aria-hidden, and a fragment omits by nature.",
         "rules": [
           {
             "id": "drag-handle-is-hidden-or-a-control",
             "kind": "forbid",
-            "selector": ":is(.handle, .drag-handle):not(button):not([aria-hidden=\"true\"])",
+            "selector": ".drag-handle:not(button):not([aria-hidden=\"true\"])",
             "message": "A drag handle has no text and reports nothing, so on any element but a <button> it is decoration and needs aria-hidden=\"true\". Left exposed it arrives as an unlabelled blank in the reading order. Make it a <button> with a name if it is meant to be operated."
           },
           {
             "id": "drag-handle-button-is-not-hidden",
             "kind": "forbid",
-            "selector": "button:is(.handle, .drag-handle)[aria-hidden=\"true\"]",
+            "selector": "button.drag-handle[aria-hidden=\"true\"]",
             "fragmentSafe": true,
             "message": "aria-hidden on a <button> hides it from assistive technology without taking it out of the tab order, so keyboard focus lands on something that is not there. Decoration is a <span>; a control stays exposed."
           },
           {
             "id": "drag-handle-button-is-named",
             "kind": "require-accessible-name",
-            "selector": "button:is(.handle, .drag-handle)",
+            "selector": "button.drag-handle",
             "message": "The handle is a bar drawn in CSS - there is no text inside it to be named by. A handle worth making a control is worth an aria-label saying what it moves."
           }
         ]
@@ -565,6 +614,32 @@
           }
         ]
       },
+      "back-to-top": {
+        "status": "enforced",
+        "note": "Added with the back-to-top component. An in-page link, so it jumps to its target without the script. BackToTop keeps it inert until the window scrolls past the threshold, then scrolls to the top and focuses the target. Inert is the framework's dynamic state.",
+        "rules": [
+          {
+            "id": "back-to-top-is-an-in-page-link",
+            "kind": "forbid",
+            "selector": ".back-to-top:not(a[href^=\"#\"])",
+            "fragmentSafe": true,
+            "message": "Make .back-to-top an <a> whose href names an element on the page, such as #main. The link works without the script, and the script focuses that element."
+          },
+          {
+            "id": "back-to-top-is-named",
+            "kind": "require-accessible-name",
+            "selector": ".back-to-top",
+            "message": "The link usually holds only an icon. Give it an aria-label such as \"Back to top\"."
+          },
+          {
+            "id": "back-to-top-inert-is-not-authored",
+            "kind": "forbid",
+            "selector": ".back-to-top[inert]",
+            "fragmentSafe": true,
+            "message": "Hidden is dynamic state, so the framework owns it. BackToTop sets inert while the page is above the threshold and removes it past it; authoring it hides the link from a page without the script."
+          }
+        ]
+      },
       "forms/checkboxes": {
         "status": "enforced",
         "note": "Swept 0.8.0.",
@@ -594,6 +669,13 @@
             "selector": ".drop-zone-files:not(ul, ol)",
             "fragmentSafe": true,
             "message": "Write .drop-zone-files as a <ul>. The behavior fills it with one <li> per file, and a list tells assistive technology how many files were chosen."
+          },
+          {
+            "id": "drop-zone-type-error-is-live-status",
+            "kind": "forbid",
+            "selector": ".drop-zone:has(> label input[type=\"file\"]:is([data-validate-types], [data-max-size], [data-max-files])):not(:has(> [data-error])), .drop-zone:has(> label input[type=\"file\"]:is([data-validate-types], [data-max-size], [data-max-files])) > [data-error]:not([role=\"status\"][aria-live=\"polite\"])",
+            "fragmentSafe": true,
+            "message": "An opted-in file-validation zone needs a direct [data-error] area with role=\"status\" and aria-live=\"polite\". The runtime writes real error text there and describes the file input with it."
           }
         ]
       },
@@ -649,7 +731,7 @@
           {
             "id": "field-icon-hidden",
             "kind": "require-attr",
-            "selector": ".field .material-symbols, .field .material-symbols-outlined, .field .material-symbols-rounded, .field .material-symbols-sharp, .field .material-icons",
+            "selector": ".field .material-symbols, .field .material-symbols-outlined, .field .material-symbols-rounded, .field .material-symbols-sharp",
             "attr": "aria-hidden",
             "equals": "true",
             "message": "The ligature is read aloud. A field icon is decoration; the label names the control."
@@ -657,8 +739,8 @@
           {
             "id": "field-icon-side",
             "kind": "forbid",
-            "selector": ".field > :is(.material-symbols,.material-symbols-outlined,.material-symbols-rounded,.material-symbols-sharp,.material-icons):not(.prefix):not(.suffix)",
-            "message": "A field icon must name its side with .prefix or .suffix. The positional fallback counts elements of the same *type*, which only ever worked for <i>."
+            "selector": ".field > :is(.material-symbols,.material-symbols-outlined,.material-symbols-rounded,.material-symbols-sharp):not(.prefix):not(.suffix)",
+            "message": "A field icon must name its side with .prefix or .suffix. Fields have no positional fallback."
           },
           {
             "id": "field-label-for",
@@ -751,7 +833,45 @@
             "kind": "forbid",
             "selector": "fieldset.rating [type=\"radio\"] + span",
             "fragmentSafe": true,
-            "message": "Put a star's visually hidden text before its radio. A span after the radio is the older input + span pattern, which hides the radio and with it the star."
+            "message": "Put a star's visually hidden text before its radio. A span after the radio is the pre-1.0 input + span pattern, which 0.16.0 no longer draws."
+          }
+        ]
+      },
+      "forms/color-swatches": {
+        "status": "enforced",
+        "note": "Added with the color swatches component. A fieldset of native radios in labels with visually hidden names, drawn as round chips of their colors, with an optional native color input for a custom value.",
+        "rules": [
+          {
+            "id": "color-swatches-is-a-fieldset",
+            "kind": "forbid",
+            "selector": ".color-swatches:not(fieldset)",
+            "fragmentSafe": true,
+            "message": "A .color-swatches is a <fieldset> with a <legend>, so the radios read as one named group."
+          },
+          {
+            "id": "color-swatch-is-named",
+            "kind": "require-accessible-name",
+            "selector": ".color-swatches > [type=\"radio\"]",
+            "message": "A swatch shows no text, so name each radio with visually hidden text in its label, such as \"Purple\"."
+          }
+        ]
+      },
+      "forms/color-picker": {
+        "status": "enforced",
+        "note": "Added with the color picker component. A named group around a native color input, which stays the form value; the component adds a saturation and brightness slider, a hue range and a hex field at runtime.",
+        "rules": [
+          {
+            "id": "color-picker-wraps-a-color-input",
+            "kind": "forbid",
+            "selector": ".color-picker:not(:has(> input[type=\"color\"]))",
+            "fragmentSafe": true,
+            "message": "A .color-picker holds an <input type=\"color\"> as a direct child. It is the form value, the preview and the picker without JavaScript."
+          },
+          {
+            "id": "color-picker-is-a-named-group",
+            "kind": "require-accessible-name",
+            "selector": ".color-picker",
+            "message": "Give the .color-picker role=\"group\" and a name, such as aria-label=\"Accent\", so its sliders and hex field read as one control."
           }
         ]
       },
@@ -767,9 +887,22 @@
           }
         ]
       },
+      "tree-select": {
+        "status": "enforced",
+        "note": "A native <select data-tree> owns single or multiple leaf values. Flat options name their parent value with data-parent. AutoInit builds the named ARIA tree; branches only navigate and never submit. Nesting comes only from data-parent because HTML cannot nest optgroups.",
+        "rules": [
+          {
+            "id": "tree-select-needs-native-options",
+            "kind": "forbid",
+            "selector": "[data-tree]:not(select), select[data-tree] optgroup, select:not([data-tree]) option[data-parent]",
+            "fragmentSafe": true,
+            "message": "Put data-tree on a native <select>, optionally with multiple. Nest flat options only through data-parent naming the parent option value. An <optgroup> cannot nest, and data-parent needs a select with data-tree."
+          }
+        ]
+      },
       "forms/slider": {
         "status": "enforced",
-        "note": "Swept 0.8.0. Renamed from range to the name M3 uses; `.range` stays as an alias.",
+        "note": "Swept 0.8.0. Renamed from range to the name M3 uses; 0.16.0 removed the `.range` and `.range-field` hosts.",
         "rules": [
           {
             "id": "range-labelled",
@@ -793,7 +926,7 @@
           {
             "id": "switch-decorative-text-hidden",
             "kind": "require-attr",
-            "selector": ".switch > span:not(.lever)",
+            "selector": ".switch > span",
             "attr": "aria-hidden",
             "equals": "true",
             "message": "On/off captions inside the label are folded into the accessible name, which then reads \"Off On\". Hide them and let the label text name the switch."
@@ -821,7 +954,7 @@
           {
             "id": "icon-button-icon-hidden",
             "kind": "require-attr",
-            "selector": ".icon-button :is(.material-symbols,.material-symbols-outlined,.material-symbols-rounded,.material-symbols-sharp,.material-icons)",
+            "selector": ".icon-button :is(.material-symbols,.material-symbols-outlined,.material-symbols-rounded,.material-symbols-sharp)",
             "attr": "aria-hidden",
             "equals": "true",
             "message": "The ligature is real text and is read out verbatim. The icon in an icon button is decoration - the control carries the name - so it is aria-hidden=\"true\"."
@@ -841,18 +974,66 @@
           {
             "id": "icon-not-i-element",
             "kind": "forbid",
-            "selector": "i.material-symbols, i.material-symbols-outlined, i.material-symbols-rounded, i.material-symbols-sharp, i.material-icons",
+            "selector": "i.material-symbols, i.material-symbols-outlined, i.material-symbols-rounded, i.material-symbols-sharp",
             "message": "<i> means idiomatic text. The canonical icon element is <span class=\"material-symbols\">.",
             "fragmentSafe": true
           },
           {
             "id": "icon-hidden-or-labelled",
             "kind": "forbid",
-            "selector": ".material-symbols:not([aria-hidden=\"true\"]):not([role=\"img\"][aria-label]):not([role=\"img\"][aria-labelledby]), .material-symbols-outlined:not([aria-hidden=\"true\"]):not([role=\"img\"][aria-label]):not([role=\"img\"][aria-labelledby]), .material-symbols-rounded:not([aria-hidden=\"true\"]):not([role=\"img\"][aria-label]):not([role=\"img\"][aria-labelledby]), .material-symbols-sharp:not([aria-hidden=\"true\"]):not([role=\"img\"][aria-label]):not([role=\"img\"][aria-labelledby]), .material-icons:not([aria-hidden=\"true\"]):not([role=\"img\"][aria-label]):not([role=\"img\"][aria-labelledby])",
+            "selector": ".material-symbols:not([aria-hidden=\"true\"]):not([role=\"img\"][aria-label]):not([role=\"img\"][aria-labelledby]), .material-symbols-outlined:not([aria-hidden=\"true\"]):not([role=\"img\"][aria-label]):not([role=\"img\"][aria-labelledby]), .material-symbols-rounded:not([aria-hidden=\"true\"]):not([role=\"img\"][aria-label]):not([role=\"img\"][aria-labelledby]), .material-symbols-sharp:not([aria-hidden=\"true\"]):not([role=\"img\"][aria-label]):not([role=\"img\"][aria-labelledby]):not([aria-hidden=\"true\"]):not([role=\"img\"][aria-label]):not([role=\"img\"][aria-labelledby])",
             "message": "The ligature is real text and is read out verbatim. An icon is either decoration - aria-hidden=\"true\", with the enclosing control carrying the name - or an image in its own right, role=\"img\" with a label. It is never left as bare text."
           }
         ]
       },
+      "currency-input": {
+        "status": "enforced",
+        "note": "Added with the currency input component. The author writes `data-currency` with an ISO 4217 code on a text field they already had; AutoInit shows the amount in the page's locale and that currency once the field loses focus, and the form submits the plain number. Only a text input can hold the formatted amount. A malformed code is caught at runtime, where the field stays a plain text input, because these rules are selectors.",
+        "rules": [
+          {
+            "id": "currency-input-needs-a-text-field",
+            "kind": "forbid",
+            "selector": "[data-currency]:not(input:is(:not([type]), [type=\"text\" i])), [data-currency=\"\"]",
+            "fragmentSafe": true,
+            "message": "Put data-currency, with a currency code such as EUR, on an <input> of type text. Other input types reject a formatted amount such as 1.234,50 €, and AutoInit skips them; a <textarea> is not formatted."
+          }
+        ]
+      },
+      "hover-card": {
+        "status": "enforced",
+        "note": "Added with the hover card component. The author writes a link with the hover-card-trigger class and points its aria-details at a .popover with popover=\"hint\"; AutoInit shows that card after a delay when the link is hovered or gets keyboard focus. The card is extra detail, so it is not a tooltip and not the link's description.",
+        "rules": [
+          {
+            "id": "hover-card-trigger-is-a-link",
+            "kind": "forbid",
+            "selector": ".hover-card-trigger:not(a[href])",
+            "fragmentSafe": true,
+            "message": "Put hover-card-trigger on an <a href>. The card previews where the link goes, and a tap or click still has to follow it; a button already has a popover that opens on press."
+          },
+          {
+            "id": "hover-card-names-its-card",
+            "kind": "require-idref",
+            "selector": ".hover-card-trigger",
+            "attr": "aria-details",
+            "container": "body",
+            "targetSelector": "[popover]",
+            "message": "Point the trigger's aria-details at the id of its card, a [popover] element in the page. The component finds the card through it, and screen readers use it to reach the card."
+          }
+        ]
+      },
+      "input-mask": {
+        "status": "enforced",
+        "note": "Added with the input mask component. The author writes `data-mask` on a text field they already had; AutoInit formats its value to the pattern as people type, paste or compose, and the form submits the formatted text. The component needs a caret to place, which only the text, tel, search, url and password input types have.",
+        "rules": [
+          {
+            "id": "input-mask-needs-a-caret",
+            "kind": "forbid",
+            "selector": "[data-mask]:not(input:is(:not([type]), [type=\"text\" i], [type=\"tel\" i], [type=\"search\" i], [type=\"url\" i], [type=\"password\" i]))",
+            "fragmentSafe": true,
+            "message": "Put data-mask on an <input> of type text, tel, search, url or password. Other input types have no caret to place and reject a formatted value, and AutoInit skips them; a <textarea> is not masked."
+          }
+        ]
+      },
       "landmarks": {
         "status": "enforced",
         "note": "Swept 0.8.0. Cross-cutting: the landmark budget belongs to no single component.",
@@ -896,6 +1077,19 @@
             "selector": "li[aria-selected]:not([role])",
             "message": "aria-selected is not valid on a listitem. A plain <ul> has nowhere to put it - either give the item a role that takes it (option, tab, row, treeitem) and implement that role’s keyboard contract, or drop the attribute.",
             "fragmentSafe": true
+          },
+          {
+            "id": "sortable-items-move-without-dragging",
+            "kind": "forbid",
+            "selector": ".sortable > li:not(:has([data-move=\"up\"]):has([data-move=\"down\"]))",
+            "message": "Give each .sortable item a [data-move=\"up\"] and a [data-move=\"down\"] button, in the row or in a menu. Dragging is a pointer gesture; the buttons are the keyboard path and the single-pointer alternative WCAG 2.5.7 requires."
+          },
+          {
+            "id": "list-unstyled-has-list-role",
+            "kind": "forbid",
+            "selector": ":is(ul, ol).list-unstyled:not([role])",
+            "fragmentSafe": true,
+            "message": "WebKit drops the list role from a list with no markers, so screen readers stop announcing it as a list. Give a .list-unstyled list role=\"list\", or the role it should have instead."
           }
         ]
       },
@@ -919,6 +1113,18 @@
           }
         ]
       },
+      "loading-overlay": {
+        "status": "enforced",
+        "note": "Added with the loading overlay component. The page owns aria-busy on the region; while it is \"true\" the script makes the region inert, so nothing inside takes pointer or keyboard input, and announces the start and the finish in a visually hidden role=\"status\" region it adds after the region, because inert content leaves the accessibility tree. The author's loading indicator keeps the role and name it has everywhere else.",
+        "rules": [
+          {
+            "id": "loading-overlay-has-an-indicator",
+            "kind": "forbid",
+            "selector": ".loading-overlay:not(:has(> .loading-indicator))",
+            "message": "Give a .loading-overlay a .loading-indicator as a direct child. It is what shows over the scrim while the region is busy."
+          }
+        ]
+      },
       "menu": {
         "status": "enforced",
         "note": "Swept 0.8.0. A [data-context-menu] trigger is a region: the menu opens at the pointer and the region carries no expanded state.",
@@ -930,6 +1136,13 @@
             "fragmentSafe": true,
             "message": "<menu> is a list: its content model permits only <li>. A bare <hr> between entries is invalid - put the separator inside an <li>, or use role=separator there."
           },
+          {
+            "id": "menu-group-is-named",
+            "kind": "forbid",
+            "selector": "menu ul[role=\"group\"]:not([aria-label]):not([aria-labelledby])",
+            "fragmentSafe": true,
+            "message": "A <ul role=group> in a menu is a set of choices, and its name is what a screen reader announces on entering it. Give it aria-label or aria-labelledby."
+          },
           {
             "id": "context-menu-region-is-not-a-control",
             "kind": "forbid",
@@ -964,6 +1177,24 @@
           }
         ]
       },
+      "pull-to-refresh": {
+        "status": "enforced",
+        "note": "Added with the pull-to-refresh component. A touch pull and a [data-refresh] button start the same refresh, so people who cannot pull use the button. The author's loading indicator carries the role and name; the script shows it, sets aria-busy on the container while the refresh runs, and adds a visually hidden role=\"status\" region that announces the start and the finish, because the indicator is hidden once the refresh ends.",
+        "rules": [
+          {
+            "id": "pull-to-refresh-has-a-refresh-button",
+            "kind": "forbid",
+            "selector": ".pull-to-refresh:not(:has(button[data-refresh]))",
+            "message": "Put a <button data-refresh> inside each .pull-to-refresh. Pulling needs a touch screen, and the button is the way to refresh for a keyboard, mouse or switch user."
+          },
+          {
+            "id": "pull-to-refresh-has-an-indicator",
+            "kind": "forbid",
+            "selector": ".pull-to-refresh:not(:has(> .loading-indicator))",
+            "message": "Give a .pull-to-refresh a .loading-indicator as a direct child. It is what comes down with a pull and shows while the refresh runs."
+          }
+        ]
+      },
       "rich-text-editor": {
         "status": "enforced",
         "note": "Added with the rich text editor component. The script hides the textarea and gives the editable element role=\"textbox\" with aria-multiline, copying the textarea's name to it, so the name has to be on the textarea. The toolbar follows the toolbar rules; icon-only buttons are covered by icon-only-control-is-named.",
@@ -1026,7 +1257,7 @@
       },
       "data-table": {
         "status": "enforced",
-        "note": "Added with the data table component. The wrapper is the scroll container so the <table> keeps its table semantics. Sorting and selection are page state: aria-sort on the header cell and a checkbox in the first cell.",
+        "note": "Added with the data table component. The wrapper is the scroll container so the <table> keeps its table semantics. Sorting and selection live in the markup: aria-sort on the header cell and a checkbox in the first cell. With data-sort the framework reorders the rows and moves aria-sort, and it keeps a select-all box in the first header cell in step with the rows.",
         "rules": [
           {
             "id": "data-table-wraps-the-table",
@@ -1062,6 +1293,109 @@
             "kind": "require-accessible-name",
             "selector": ".data-table[tabindex]",
             "message": "Name a focusable scroll wrapper with aria-label, or aria-labelledby pointing at the table caption, so keyboard users know what they are scrolling."
+          },
+          {
+            "id": "data-table-filter-is-named",
+            "kind": "require-accessible-name",
+            "selector": ".data-table input[type=\"search\"][data-table-filter]",
+            "message": "Give the table search input a label identifying the records it filters."
+          },
+          {
+            "id": "data-table-filter-count-is-named",
+            "kind": "require-accessible-name",
+            "selector": ".data-table [data-table-filter-count]",
+            "message": "Name the result count, for example aria-label=\"Matching records\", so its number has context."
+          },
+          {
+            "id": "data-table-filter-count-is-status",
+            "kind": "require-attr",
+            "selector": ".data-table [data-table-filter-count]",
+            "attr": "role",
+            "equals": "status",
+            "message": "Give the table result count role=\"status\" so changes are announced without moving focus."
+          },
+          {
+            "id": "data-table-filter-count-is-polite",
+            "kind": "require-attr",
+            "selector": ".data-table [data-table-filter-count]",
+            "attr": "aria-live",
+            "equals": "polite",
+            "message": "Use aria-live=\"polite\" on the table result count so typing does not interrupt other speech."
+          },
+          {
+            "id": "data-table-page-size-is-select",
+            "kind": "forbid",
+            "selector": ".data-table[data-page-size] [data-table-page-size]:not(select)",
+            "fragmentSafe": true,
+            "message": "Use a native select for an authored table page-size control. The existing FormSelect enhancement reads and updates that same select."
+          },
+          {
+            "id": "data-table-page-size-is-single",
+            "kind": "forbid",
+            "selector": ".data-table[data-page-size] select[data-table-page-size][multiple]",
+            "fragmentSafe": true,
+            "message": "A table has one page size. Omit multiple from its page-size select."
+          },
+          {
+            "id": "data-table-page-size-is-named",
+            "kind": "require-accessible-name",
+            "selector": ".data-table[data-page-size] select[data-table-page-size]",
+            "message": "Label the table page-size select, for example Rows per page. Option values do not name the control."
+          },
+          {
+            "id": "data-table-page-control-is-button",
+            "kind": "forbid",
+            "selector": ".data-table[data-page-size] [data-table-page]:not(button[type=\"button\"])",
+            "fragmentSafe": true,
+            "message": "Use a native button with type=\"button\" for a local table page control. Ordinary pagination links keep their navigation behavior."
+          },
+          {
+            "id": "data-table-page-control-is-named",
+            "kind": "require-accessible-name",
+            "selector": ".data-table[data-page-size] button[data-table-page]",
+            "message": "Name each table page button, for example Previous or Next, using visible text or an accessible label."
+          },
+          {
+            "id": "data-table-page-control-is-in-pagination",
+            "kind": "forbid",
+            "selector": ".data-table[data-page-size] [data-table-page]:not(nav.pagination *)",
+            "fragmentSafe": true,
+            "message": "Put local table page buttons in a named nav.pagination inside their table wrapper."
+          },
+          {
+            "id": "data-table-page-navigation-is-named",
+            "kind": "require-accessible-name",
+            "selector": ".data-table[data-page-size] nav.pagination",
+            "message": "Name the table's pagination navigation so it is distinct from other navigation on the page."
+          },
+          {
+            "id": "data-table-page-direction-is-known",
+            "kind": "forbid",
+            "selector": ".data-table[data-page-size] [data-table-page]:not([data-table-page=\"previous\"], [data-table-page=\"next\"])",
+            "fragmentSafe": true,
+            "message": "Set data-table-page to previous or next. Local table paging does not generate numbered page controls."
+          },
+          {
+            "id": "data-table-page-status-is-named",
+            "kind": "require-accessible-name",
+            "selector": ".data-table [data-table-page-status]",
+            "message": "Name the page status, for example aria-label=\"Pages\", so its numbers have context."
+          },
+          {
+            "id": "data-table-page-status-is-status",
+            "kind": "require-attr",
+            "selector": ".data-table [data-table-page-status]",
+            "attr": "role",
+            "equals": "status",
+            "message": "Give the table page status role=\"status\" so page changes are announced without moving focus."
+          },
+          {
+            "id": "data-table-page-status-is-polite",
+            "kind": "require-attr",
+            "selector": ".data-table [data-table-page-status]",
+            "attr": "aria-live",
+            "equals": "polite",
+            "message": "Use aria-live=\"polite\" on the table page status so page changes do not interrupt other speech."
           }
         ]
       },
@@ -1102,6 +1436,181 @@
           }
         ]
       },
+      "alert": {
+        "status": "enforced",
+        "note": "Added with the alert component, which replaces the removed banner. A static alert is plain content and needs no role. A live region must hold only the message, because a screen reader reads every button label inside it as part of the announcement.",
+        "rules": [
+          {
+            "id": "alert-is-not-the-banner-landmark",
+            "kind": "forbid",
+            "selector": ".alert[role=\"banner\"]",
+            "fragmentSafe": true,
+            "message": "role=\"banner\" is the page header landmark, not a message. Remove it: a static alert needs no role, and a changing one puts role=\"status\" or role=\"alert\" on its text."
+          },
+          {
+            "id": "alert-live-region-holds-no-controls",
+            "kind": "forbid",
+            "selector": ".alert:is([role=\"alert\"], [role=\"status\"], [aria-live]):has(button, a[href], input, select, textarea)",
+            "fragmentSafe": true,
+            "message": "Put role=\"status\" or role=\"alert\" on the alert's text, not on an alert that holds buttons or links. A live region reads its controls' labels as part of the message."
+          },
+          {
+            "id": "error-summary-form-is-novalidate",
+            "kind": "forbid",
+            "selector": "form:not([novalidate]):has(.error-summary)",
+            "message": "Add novalidate to a form with an .error-summary. Without it the browser stops an invalid submit before the submit event, so the summary never fills and only the first field's bubble shows."
+          },
+          {
+            "id": "error-summary-has-a-list",
+            "kind": "forbid",
+            "selector": ".error-summary:not(:has(ul, ol))",
+            "message": "Give the .error-summary an empty <ul>. The Forms behavior writes one link per invalid field into it."
+          }
+        ]
+      },
+      "description-list": {
+        "status": "enforced",
+        "note": "Added with the description list component. The native <dl> is what pairs each value with its label for assistive technology, so the class only works on one.",
+        "rules": [
+          {
+            "id": "description-list-is-a-dl",
+            "kind": "forbid",
+            "selector": ".description-list:not(dl)",
+            "fragmentSafe": true,
+            "message": "Write .description-list as a <dl> with <dt> labels and <dd> values. Divs drawn as two columns read as an unpaired run of text."
+          }
+        ]
+      },
+      "mega-menu": {
+        "status": "enforced",
+        "note": "Added with the mega menu component. A named nav of links and disclosure buttons whose panels are native popovers; the browser owns the expanded state, so no menu role is promised.",
+        "rejects": {
+          "rejected_role": "menu",
+          "because": "its items are links and disclosure buttons reached with Tab in reading order - a menu role promises arrow-key navigation and menuitems that site navigation does not have, and the menubar component is the place for that contract",
+          "rule": "mega-menu-is-not-a-composite-widget"
+        },
+        "rules": [
+          {
+            "id": "mega-menu-is-a-named-nav",
+            "kind": "forbid",
+            "selector": ".mega-menu:not(nav)",
+            "fragmentSafe": true,
+            "message": "Write .mega-menu as a <nav> with an aria-label. It is site navigation: a landmark people jump to, not a generic row."
+          },
+          {
+            "id": "mega-menu-panel-is-a-popover",
+            "kind": "forbid",
+            "selector": ".mega-menu-panel:not([popover])",
+            "fragmentSafe": true,
+            "message": "Give .mega-menu-panel the popover attribute and open it with popovertarget on its button. The browser then owns opening, Escape, light dismiss and the button's expanded state."
+          },
+          {
+            "id": "mega-menu-is-not-a-composite-widget",
+            "kind": "forbid-composite-roles",
+            "selector": ".mega-menu",
+            "fragmentSafe": true,
+            "message": "A mega menu is links and disclosure buttons reached with Tab. A menu, menubar or any other composite role promises arrow-key navigation it does not have; use a menubar for application commands."
+          },
+          {
+            "id": "mega-menu-items-are-not-menuitems",
+            "kind": "forbid",
+            "selector": ".mega-menu :is([role=\"menu\"], [role=\"menuitem\"])",
+            "fragmentSafe": true,
+            "message": "Leave the bar's links, buttons and panels without menu or menuitem roles. They are reached with Tab, and those roles promise arrow keys and typeahead the mega menu does not have."
+          }
+        ]
+      },
+      "menubar": {
+        "status": "enforced",
+        "note": "Added with the menubar component. The Menubar component sets role=menubar on the bar and role=menuitem on each trigger at runtime and implements the menubar keyboard contract over Menu; tests/menubar-browser.test.js checks it.",
+        "rules": [
+          {
+            "id": "menubar-is-named",
+            "kind": "require-accessible-name",
+            "selector": ".menubar",
+            "message": "Name the menubar with aria-label, such as \"Editor\". A page can hold several, and the name says which commands they are."
+          },
+          {
+            "id": "menubar-holds-only-triggers",
+            "kind": "forbid",
+            "selector": ".menubar > :not(.menu-trigger)",
+            "fragmentSafe": true,
+            "message": "A .menubar holds only .menu-trigger buttons. Anything else breaks the menubar's arrow-key order; put the menus themselves after the bar."
+          }
+        ]
+      },
+      "calendar": {
+        "status": "enforced",
+        "note": "Added with the calendar component. A native table the page renders; its caption and column headers are what tell a screen reader the month and weekday of each day.",
+        "rules": [
+          {
+            "id": "calendar-is-a-table",
+            "kind": "forbid",
+            "selector": ".calendar:not(table)",
+            "fragmentSafe": true,
+            "message": "Write .calendar as a <table> with a <caption> and a header row of weekdays. A grid of divs loses the day-to-weekday relationship."
+          },
+          {
+            "id": "calendar-has-a-caption",
+            "kind": "forbid",
+            "selector": "table.calendar:not(:has(> caption))",
+            "message": "Give the calendar a <caption> naming the month, such as \"October 2026\". Without it nothing says which month the days belong to."
+          }
+        ]
+      },
+      "tour": {
+        "status": "enforced",
+        "note": "Added with the tour component. A manual popover the Tour behavior shows one section at a time; the author writes it as a dialog so the step heading names it when focus arrives.",
+        "rules": [
+          {
+            "id": "tour-is-a-manual-popover",
+            "kind": "forbid",
+            "selector": ".tour:not([popover=\"manual\"])",
+            "fragmentSafe": true,
+            "message": "Write the .tour with popover=\"manual\". An auto popover closes on any outside click, which ends the tour while the user looks at the target."
+          },
+          {
+            "id": "tour-is-a-dialog",
+            "kind": "require-attr",
+            "selector": ".tour",
+            "attr": "role",
+            "equals": "dialog",
+            "message": "Give the .tour role=\"dialog\". The behavior labels it with the current step's heading and moves focus to it, and the dialog role is what makes that name announced."
+          },
+          {
+            "id": "tour-steps-name-a-target",
+            "kind": "forbid",
+            "selector": ".tour > section:not([data-tour-target])",
+            "fragmentSafe": true,
+            "message": "Each step <section> needs data-tour-target with the id of the element it explains. A step without one is never shown."
+          }
+        ]
+      },
+      "image-compare": {
+        "status": "enforced",
+        "note": "Added with the image compare component. A native range input is the control, so its slider semantics are the browser's; both images need alt text that says which is which.",
+        "rules": [
+          {
+            "id": "image-compare-has-a-range",
+            "kind": "forbid",
+            "selector": ".image-compare:not(:has(> input[type=\"range\"]))",
+            "message": "Put an <input type=\"range\"> in the .image-compare. It is the control people use, by pointer or keyboard; without it the divider cannot move."
+          },
+          {
+            "id": "image-compare-range-is-named",
+            "kind": "require-accessible-name",
+            "selector": ".image-compare > input[type=\"range\"]",
+            "message": "Name the range, such as aria-label=\"Compare before and after\". It is the only control and has no visible label."
+          },
+          {
+            "id": "image-compare-images-have-alt",
+            "kind": "forbid",
+            "selector": ".image-compare > img:not([alt])",
+            "fragmentSafe": true,
+            "message": "Give each image alt text that says which it is, such as \"Before: faded photo\". The comparison means nothing if neither image is described."
+          }
+        ]
+      },
       "countdown": {
         "status": "enforced",
         "note": "Added with the countdown component. The digits are generated content hidden from assistive technology, so the element's text is the value a screen reader reads.",
@@ -1318,6 +1827,31 @@
           }
         ]
       },
+      "org-chart": {
+        "status": "enforced",
+        "note": "Added with the org chart component. Nested lists of native disclosures: each manager's card is a summary that folds the team away, so no tree role is promised.",
+        "rejects": {
+          "rejected_role": "tree",
+          "because": "its managers are native disclosures reached with Tab - a tree role promises arrow-key navigation, type-ahead and expanded states on treeitems that the markup does not have and that native details would fight",
+          "rule": "org-chart-is-not-a-tree-widget"
+        },
+        "rules": [
+          {
+            "id": "org-chart-is-not-a-tree-widget",
+            "kind": "forbid",
+            "selector": ".org-chart[role], .org-chart [role=\"treeitem\"], .org-chart [role=\"group\"]",
+            "fragmentSafe": true,
+            "message": "A .org-chart takes no ARIA tree roles. It is lists of disclosures, which keep their own roles and keyboard behavior."
+          },
+          {
+            "id": "org-chart-manager-holds-no-link",
+            "kind": "forbid",
+            "selector": ".org-chart summary :is(a[href], button)",
+            "fragmentSafe": true,
+            "message": "A manager's card is the summary that opens the team, so a link or button inside it competes with that. Link the profile elsewhere; only a card without reports can be an <a class=\"org-chart-node\">."
+          }
+        ]
+      },
       "command-palette": {
         "status": "enforced",
         "note": "Added with the command palette component. A native modal dialog; the component makes the input a combobox and the list a listbox of options at runtime and owns the active option.",
@@ -1459,6 +1993,78 @@
           }
         ]
       },
+      "sankey-chart": {
+        "status": "enforced",
+        "note": "Added with the sankey chart component. The <table> is the chart's text alternative and its no-JavaScript fallback; the drawn nodes, links and names are aria-hidden.",
+        "rules": [
+          {
+            "id": "sankey-chart-is-a-figure-with-a-table",
+            "kind": "forbid",
+            "selector": ".sankey-chart:not(figure:has(> table))",
+            "message": "Write .sankey-chart as a <figure> holding a <table> of the flows. The drawn chart is hidden from assistive technology, so the table is all a screen reader reads, and it is what shows without JavaScript."
+          },
+          {
+            "id": "sankey-chart-has-a-caption",
+            "kind": "forbid",
+            "selector": ".sankey-chart:not(:has(> figcaption))",
+            "message": "Name a .sankey-chart with a <figcaption>. It names the focusable plot as well as the figure; hide it with .visually-hidden when nearby text already names the chart."
+          }
+        ]
+      },
+      "treemap-chart": {
+        "status": "enforced",
+        "note": "Added with the treemap chart component. The <table> is the chart's text alternative and its no-JavaScript fallback; the drawn rectangles and their text are aria-hidden.",
+        "rules": [
+          {
+            "id": "treemap-chart-is-a-figure-with-a-table",
+            "kind": "forbid",
+            "selector": ".treemap-chart:not(figure:has(> table))",
+            "message": "Write .treemap-chart as a <figure> holding a <table> of the data. The drawn chart is hidden from assistive technology, so the table is all a screen reader reads, and it is what shows without JavaScript."
+          },
+          {
+            "id": "treemap-chart-has-a-caption",
+            "kind": "forbid",
+            "selector": ".treemap-chart:not(:has(> figcaption))",
+            "message": "Name a .treemap-chart with a <figcaption>. It names the focusable plot as well as the figure; hide it with .visually-hidden when nearby text already names the chart."
+          }
+        ]
+      },
+      "scatter-chart": {
+        "status": "enforced",
+        "note": "Added with the scatter chart component. The <table> is the chart's text alternative and its no-JavaScript fallback; the drawn points, axes and legend are aria-hidden.",
+        "rules": [
+          {
+            "id": "scatter-chart-is-a-figure-with-a-table",
+            "kind": "forbid",
+            "selector": ".scatter-chart:not(figure:has(> table))",
+            "message": "Write .scatter-chart as a <figure> holding a <table> of the data. The drawn chart is hidden from assistive technology, so the table is all a screen reader reads, and it is what shows without JavaScript."
+          },
+          {
+            "id": "scatter-chart-has-a-caption",
+            "kind": "forbid",
+            "selector": ".scatter-chart:not(:has(> figcaption))",
+            "message": "Name a .scatter-chart with a <figcaption>. It names the focusable plot as well as the figure; hide it with .visually-hidden when nearby text already names the chart."
+          }
+        ]
+      },
+      "funnel-chart": {
+        "status": "enforced",
+        "note": "Added with the funnel chart component. The <table> is the chart's text alternative and its no-JavaScript fallback; the drawn stages and labels are aria-hidden.",
+        "rules": [
+          {
+            "id": "funnel-chart-is-a-figure-with-a-table",
+            "kind": "forbid",
+            "selector": ".funnel-chart:not(figure:has(> table))",
+            "message": "Write .funnel-chart as a <figure> holding a <table> of the data. The drawn chart is hidden from assistive technology, so the table is all a screen reader reads, and it is what shows without JavaScript."
+          },
+          {
+            "id": "funnel-chart-has-a-caption",
+            "kind": "forbid",
+            "selector": ".funnel-chart:not(:has(> figcaption))",
+            "message": "Name a .funnel-chart with a <figcaption>. It names the focusable plot as well as the figure; hide it with .visually-hidden when nearby text already names the chart."
+          }
+        ]
+      },
       "bar-chart": {
         "status": "enforced",
         "note": "Added with the bar chart component. The <table> is the chart's text alternative and its no-JavaScript fallback; the drawn bars, values, labels and legend are aria-hidden.",
@@ -1554,6 +2160,13 @@
             "selector": ".navigation-rail a.active:not([aria-current])",
             "fragmentSafe": false,
             "message": "The active destination needs aria-current=\"page\"."
+          },
+          {
+            "id": "navigation-rail-panel-is-a-popover",
+            "kind": "forbid",
+            "selector": ".navigation-rail-panel:not([popover])",
+            "fragmentSafe": true,
+            "message": "Give .navigation-rail-panel the popover attribute and put it right after the destination button that names it with popovertarget. The browser then owns opening, Escape, light dismiss and the button's expanded state."
           }
         ]
       },
@@ -1655,7 +2268,7 @@
             "kind": "forbid",
             "selector": ".search-bar input:not([type=\"search\"])",
             "fragmentSafe": true,
-            "message": "The bar's control is a search input. `type=\"search\"` is what tells assistive technology, the UA and the on-screen keyboard what the field is for, and it is static semantics, so the author states it. The selector names `.search-bar` and deliberately not the `.searchbar` alias: pre-1.0 markup of that shape predates the requirement, and holding old markup to a rule it could not have known is how a promise of an additive rename gets broken."
+            "message": "The bar's control is a search input. `type=\"search\"` is what tells assistive technology, the UA and the on-screen keyboard what the field is for, and it is static semantics, so the author states it."
           }
         ]
       },
@@ -1677,6 +2290,26 @@
         "note": "Swept 0.8.0. A <dialog>, so the dialog rules carry it.",
         "rules": []
       },
+      "show-more": {
+        "status": "enforced",
+        "note": "Added with the show-more component. The author writes clamped text and the button that expands it; AutoInit sets the button's aria-expanded and aria-controls, swaps its label while the text is open, and hides it when the text already fits.",
+        "rules": [
+          {
+            "id": "show-more-needs-a-button",
+            "kind": "forbid",
+            "selector": ".show-more:not(:has(> button[type=\"button\" i]))",
+            "fragmentSafe": true,
+            "message": "Give a .show-more a <button type=\"button\"> child. A <span> or <div> with role=\"button\" is not operable from the keyboard without script, and a <button> without type=\"button\" submits the form it sits in."
+          },
+          {
+            "id": "show-more-needs-clamped-text",
+            "kind": "forbid",
+            "selector": ".show-more:not(:has(> :is(.line-clamp-1, .line-clamp-2, .line-clamp-3)))",
+            "fragmentSafe": true,
+            "message": "Give a .show-more a child with line-clamp-1, line-clamp-2 or line-clamp-3. That is the text the button expands; without it the component does nothing."
+          }
+        ]
+      },
       "split-button": {
         "status": "enforced",
         "note": "Added with the split button component (#42). A lead action and a trailing half that opens a menu, drawn as one shape with a 2dp seam. Two halves, two Tab stops, two different jobs - so the container declares no role at all. `toolbar` is rejected rather than withheld: there is no arrow-key model to write, because the only composite widget here is the <menu> the trailing half opens, and Menu implements and owns that contract. The trailing half *is* the menu trigger - `.menu-trigger` with a target is the JS contract Menu claims, and a split button whose trailing half opened nothing would be a lone button with a decoration glued to it. That is also what lets the expanded shape be drawn from a selector with no script of this component's own: Menu stamps `aria-expanded` on the trigger and rewrites it on every open and close, which is rule 1 working exactly as written. Two things the container cannot enforce for itself and the rules do. An `.icon-button` is not a half - it is its own component, setting its height, insets, colours and icon sizing on the element, so it reaches none of the split button's geometry; button groups refuse it for the same reason. The two-control contract is held from both ends - a third control gets the leading half's rules as well, and a container holding only the trigger leaves it squared off along a seam with nothing beside it. And the halves are told apart by *role* rather than by position, which keeps an authored <menu> from breaking the selectors - so nothing in the sheet notices a trigger written first, and a rule has to hold the order instead.",
@@ -1743,7 +2376,7 @@
           {
             "id": "split-button-trailing-icon-hidden",
             "kind": "require-attr",
-            "selector": ".split-button > .menu-trigger :is(.material-symbols,.material-symbols-outlined,.material-symbols-rounded,.material-symbols-sharp,.material-icons)",
+            "selector": ".split-button > .menu-trigger :is(.material-symbols,.material-symbols-outlined,.material-symbols-rounded,.material-symbols-sharp)",
             "attr": "aria-hidden",
             "equals": "true",
             "message": "The ligature is real text and is read out verbatim, so an unhidden chevron names the trailing half \"arrow_drop_down\". It is decoration - the control carries the name - so it is aria-hidden=\"true\", and `icon-only-control-is-named` then requires the aria-label."
@@ -1762,26 +2395,75 @@
         "note": "Swept 0.8.0. Generated markup: role=\"status\" and the labelled dismiss button are checked at runtime in tests/forms-generated.test.js and teardown.test.js.",
         "rules": []
       },
+      "swipe-actions": {
+        "status": "enforced",
+        "note": "Added with the swipe actions component. A touch swipe, the row's [data-swipe-toggle] button and focus on an action all open the same row, so people who cannot swipe use the toggle or the keyboard. The action buttons are named in markup and stay in the accessibility tree while the row is closed; the script keeps aria-expanded on the toggle in step with the row.",
+        "rules": [
+          {
+            "id": "swipeable-rows-open-without-swiping",
+            "kind": "forbid",
+            "selector": ".swipeable > li:has(> .swipe-actions):not(:has([data-swipe-toggle]))",
+            "message": "Give each .swipeable row with .swipe-actions a [data-swipe-toggle] button. Swiping is a path-based gesture; the toggle is the single-pointer alternative WCAG 2.5.1 requires, and focus on an action opens the row for keyboard users."
+          }
+        ]
+      },
       "tabs": {
         "status": "enforced",
-        "note": "Swept 0.8.0. Anchor navigation, not a tablist - see rule 2.",
-        "conformance": {
-          "withheld_role": "tablist",
-          "blocked_on": "keyboard model",
-          "rule": "tabs-not-a-tablist"
-        },
+        "note": "Swept 0.8.0. Anchor navigation by default: Left, Right, Home and End move focus between the links as a shortcut, each link stays a Tab stop, and aria-current marks the one shown. A strip the page writes as role=\"tablist\", with role=\"tab\" links that name their panel in aria-controls, takes the ARIA tabs pattern instead - the component keeps aria-selected and a roving tabindex, and the arrow keys select as they move. The roles are the author's; the keyboard model and the state are the component's, implemented and tested, so rule 2 allows the role.",
         "rules": [
           {
-            "id": "tabs-not-a-tablist",
+            "id": "tabs-role-is-tablist",
+            "kind": "forbid",
+            "selector": ".tabs[role]:not([role=\"tablist\"])",
+            "fragmentSafe": true,
+            "message": "A tab strip takes no role, or role=\"tablist\" for the tabs pattern. Any other role promises a keyboard model it does not have."
+          },
+          {
+            "id": "tabs-tab-needs-tablist",
+            "kind": "forbid",
+            "selector": ".tabs:not([role=\"tablist\"]) [role=\"tab\"]",
+            "fragmentSafe": true,
+            "message": "role=\"tab\" belongs in a strip marked role=\"tablist\". Link tabs take no role."
+          },
+          {
+            "id": "tablist-on-a-div",
+            "kind": "forbid",
+            "selector": ".tabs[role=\"tablist\"]:not(div)",
+            "fragmentSafe": true,
+            "message": "Write a tablist on a <div>. A tablist is not navigation, so <nav> stays for link tabs."
+          },
+          {
+            "id": "tablist-has-a-name",
+            "kind": "forbid",
+            "selector": ".tabs[role=\"tablist\"]:not([aria-label], [aria-labelledby])",
+            "fragmentSafe": true,
+            "message": "A tablist needs a name: aria-label or aria-labelledby."
+          },
+          {
+            "id": "tablist-tabs-are-tabs",
             "kind": "forbid",
-            "selector": ".tabs[role], .tabs [role=\"tab\"], .tabs [role=\"tabpanel\"]",
+            "selector": ".tabs[role=\"tablist\"] > a:not([role=\"tab\"])",
             "fragmentSafe": true,
-            "message": "A tab strip takes no ARIA role here; these are links to in-page sections."
+            "message": "In a tablist every tab takes role=\"tab\"."
+          },
+          {
+            "id": "tablist-tab-names-panel",
+            "kind": "forbid",
+            "selector": ".tabs[role=\"tablist\"] > a[role=\"tab\"]:not([aria-controls])",
+            "fragmentSafe": true,
+            "message": "A tab names the panel it shows in aria-controls."
+          },
+          {
+            "id": "tablist-no-current",
+            "kind": "forbid",
+            "selector": ".tabs[role=\"tablist\"]:has([aria-current])",
+            "fragmentSafe": true,
+            "message": "A tablist marks its tab with aria-selected, which the component keeps; aria-current belongs to link tabs."
           },
           {
             "id": "tabs-marks-current",
             "kind": "forbid",
-            "selector": ".tabs a.active:not([aria-current])",
+            "selector": ".tabs:not([role=\"tablist\"]) a.active:not([aria-current])",
             "fragmentSafe": false,
             "message": "The active tab is the section you are on; aria-current says so where a class cannot."
           }
@@ -1829,6 +2511,37 @@
           }
         ]
       },
+      "transfer-list": {
+        "status": "enforced",
+        "note": "Added with the transfer list behavior. The rows are native checkboxes in .list label rows, so Tab reaches each one and Space checks it; the [data-transfer] buttons move the checked rows, and no listbox role or arrow-key contract is involved. The checkboxes carry no name: when the form builds its data, the script adds each chosen row's value under the container's data-name, in the chosen list's order.",
+        "rules": [
+          {
+            "id": "transfer-list-needs-a-name",
+            "kind": "forbid",
+            "selector": ".transfer-list:not([data-name]), .transfer-list[data-name=\"\"]",
+            "message": "Give each .transfer-list a data-name. The chosen rows submit their values under it; without one the form gets nothing."
+          },
+          {
+            "id": "transfer-list-checkbox-unnamed",
+            "kind": "forbid",
+            "selector": ".transfer-list input[type=\"checkbox\"][name]",
+            "fragmentSafe": true,
+            "message": "Leave the name off a transfer list's checkboxes. A checkbox's name submits whether it is checked, which only says what is selected to move; the script submits the chosen rows under the container's data-name."
+          },
+          {
+            "id": "transfer-list-lists-labelled",
+            "kind": "forbid",
+            "selector": ":is(.transfer-available, .transfer-chosen):not([aria-label], [aria-labelledby])",
+            "message": "Name each transfer list with aria-label or aria-labelledby, such as \"Available toppings\" and \"Chosen toppings\". The name tells people which list a row is in, and the move announcement reads it."
+          },
+          {
+            "id": "transfer-list-buttons-typed",
+            "kind": "forbid",
+            "selector": ".transfer-list [data-transfer]:not([type=\"button\" i])",
+            "message": "Give each [data-transfer] button type=\"button\". A button in a form submits it by default, so an untyped move button would also send the form."
+          }
+        ]
+      },
       "transitions": {
         "status": "enforced",
         "kind": "foundation",