@nadicodeai/ui 12.1.102 → 12.1.104

package/dist/eslint/rules/option-count.js

@@ -0,0 +1,167 @@
+/*
+ * Standard tool checked first: a `no-restricted-syntax` selector can count the
+ * children of one element, but not follow a renamed import to the part, count
+ * the items below wrappers, or tell a literal list from one that a `map`,
+ * a spread or a condition makes.
+ */
+import { findBelow, renderedImports, walk } from "./rendered-import.js";
+
+const GROUPS = new Map([
+  ["RadioGroup", { item: "RadioGroupItem", min: 2, max: 6 }],
+  ["ChoiceboxGroup", { item: "ChoiceboxGroupItem", max: 6 }],
+  ["MultiSelect", { item: "MultiSelectRow", min: 2 }],
+  ["MultiSelectContent", { item: "MultiSelectRow", min: 2 }],
+]);
+const COMMAND_PROPS = new Map([
+  ["ActionMenu", "commands"],
+  ["ActionContextMenu", "commands"],
+  ["PageActions", "menu"],
+  ["PageActionsRow", "menu"],
+]);
+const MENU_TYPES = new Set(["RecordMenu", "PageMenu"]);
+const MAX_COMMANDS = 10;
+const LIST_CALLBACKS = new Set(["map", "flatMap"]);
+
+const isChildPosition = (node) =>
+  node.parent.type === "JSXElement" || node.parent.type === "JSXFragment";
+
+const withoutTypeAssertion = (node) =>
+  node.type === "TSAsExpression" || node.type === "TSSatisfiesExpression" ? node.expression : node;
+
+const keyName = (property) =>
+  property.key.type === "Identifier" ? property.key.name : property.key.value;
+
+function literalCommands(menu) {
+  const object = withoutTypeAssertion(menu);
+  if (object.type !== "ObjectExpression") return null;
+  const property = object.properties.find(
+    (candidate) =>
+      candidate.type === "Property" && !candidate.computed && keyName(candidate) === "commands",
+  );
+  return property ? literalArray(property.value) : null;
+}
+
+function literalArray(value) {
+  const array = withoutTypeAssertion(value);
+  if (array.type !== "ArrayExpression") return null;
+  return array.elements.every((element) => element && element.type !== "SpreadElement")
+    ? array
+    : null;
+}
+
+export const optionCount = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "A RadioGroup holds 2 to 6 options, a Choicebox at most 6 tiles, a MultiSelect at least 2 rows, a menu about 10 commands.",
+    },
+    schema: [],
+    messages: {
+      "option-count":
+        "Keep the choice readable: a RadioGroup holds 2 to 6 options (7 or more is a Select or Combobox), a Choicebox at most 6 tiles, a MultiSelect at least 2 rows (one is a Checkbox or Switch), a menu about 10 commands (group the rest by job into a second menu or a page).",
+    },
+  },
+  create(context) {
+    const importOf = renderedImports(context);
+    const { visitorKeys } = context.sourceCode;
+
+    const importedName = (element) => importOf(element.openingElement.name)?.name ?? null;
+
+    const hidesItems = (container) =>
+      findBelow(
+        container,
+        visitorKeys,
+        (node) =>
+          node.type === "JSXElement" ||
+          node.type === "JSXFragment" ||
+          (node.type === "CallExpression" &&
+            node.callee.type === "MemberExpression" &&
+            LIST_CALLBACKS.has(node.callee.property.name)),
+      ) !== null;
+
+    function countLiteralItems(group, itemName) {
+      let count = 0;
+      let literal = true;
+      const tally = (node) => {
+        if (node.type === "JSXElement" && importedName(node) === itemName) count += 1;
+        if (
+          (node.type === "JSXExpressionContainer" || node.type === "JSXSpreadChild") &&
+          isChildPosition(node) &&
+          hidesItems(node)
+        ) {
+          literal = false;
+          return "stop";
+        }
+        return true;
+      };
+      for (const child of group.children) {
+        if (child.type === "JSXText" && child.value.trim() === "") continue;
+        if (child.type !== "JSXElement") return null;
+        tally(child);
+        if (walk(child, visitorKeys, tally) === "stop" || !literal) return null;
+      }
+      return count;
+    }
+
+    const ownsContent = (element) =>
+      findBelow(
+        element,
+        visitorKeys,
+        (node) => node.type === "JSXElement" && importedName(node) === "MultiSelectContent",
+      ) !== null;
+
+    function checkGroup(element, name) {
+      const { item, min = 0, max = Infinity } = GROUPS.get(name);
+      if (name === "MultiSelect" && ownsContent(element)) return;
+      const count = countLiteralItems(element, item);
+      if (!count) return;
+      if (count < min || count > max) {
+        context.report({ node: element.openingElement, messageId: "option-count" });
+      }
+    }
+
+    function checkCommands(array) {
+      if (array && array.elements.length > MAX_COMMANDS) {
+        context.report({ node: array, messageId: "option-count" });
+      }
+    }
+
+    function checkMenuAttribute(openingElement, name) {
+      const prop = COMMAND_PROPS.get(name);
+      const attribute = openingElement.attributes.find(
+        (candidate) => candidate.type === "JSXAttribute" && candidate.name.name === prop,
+      );
+      if (attribute?.value?.type !== "JSXExpressionContainer") return;
+      const { expression } = attribute.value;
+      checkCommands(prop === "commands" ? literalArray(expression) : literalCommands(expression));
+    }
+
+    const isMenuType = (annotation) =>
+      annotation?.type === "TSTypeReference" &&
+      annotation.typeName.type === "Identifier" &&
+      MENU_TYPES.has(annotation.typeName.name);
+
+    return {
+      JSXElement(node) {
+        const name = importedName(node);
+        if (GROUPS.has(name)) checkGroup(node, name);
+      },
+      JSXOpeningElement(node) {
+        const name = importOf(node.name)?.name;
+        if (COMMAND_PROPS.has(name)) checkMenuAttribute(node, name);
+      },
+      VariableDeclarator(node) {
+        if (
+          node.init?.type === "ObjectExpression" &&
+          isMenuType(node.id.typeAnnotation?.typeAnnotation)
+        ) {
+          checkCommands(literalCommands(node.init));
+        }
+      },
+      "TSAsExpression, TSSatisfiesExpression"(node) {
+        if (isMenuType(node.typeAnnotation)) checkCommands(literalCommands(node.expression));
+      },
+    };
+  },
+};

package/dist/eslint/rules/page-command-link-not-render.js

@@ -0,0 +1,43 @@
+/*
+ * Standard tool checked first: a `no-restricted-syntax` selector can match a
+ * `render` property holding a `<Link>`, but not that the same object literal
+ * also has a `label`, which is what tells a command (PageCommand, MenuCommand)
+ * from any other object with a `render` field.
+ */
+import { writtenName } from "./rendered-import.js";
+
+const ADDRESS_ELEMENTS = new Set(["a", "Link", "NextLink"]);
+
+const keyName = (property) => {
+  if (property.type !== "Property" || property.computed) return null;
+  return property.key.type === "Identifier" ? property.key.name : property.key.value;
+};
+
+const goesToAnAddress = (value) =>
+  value.type === "JSXElement" && ADDRESS_ELEMENTS.has(writtenName(value.openingElement.name));
+
+export const pageCommandLinkNotRender = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "A command that goes to an address passes it as `link`, not as `render`.",
+    },
+    schema: [],
+    messages: {
+      "link-in-render":
+        'A command that goes to an address passes it as `link: <Link href="..." />`; `render` is only for an element that is itself a command, such as a component that renders a Button.',
+    },
+  },
+  create(context) {
+    return {
+      ObjectExpression(node) {
+        if (!node.properties.some((property) => keyName(property) === "label")) return;
+        for (const property of node.properties) {
+          if (keyName(property) === "render" && goesToAnAddress(property.value)) {
+            context.report({ node: property.value, messageId: "link-in-render" });
+          }
+        }
+      },
+    };
+  },
+};

package/dist/eslint/rules/progress-needs-name.js

@@ -0,0 +1,57 @@
+/*
+ * Standard tool checked first: `jsx-a11y` has no rule for a progressbar's name,
+ * and a `no-restricted-syntax` selector cannot tell that the package's Progress
+ * is meant rather than a local one, nor look for a ProgressLabel anywhere in
+ * its children. Those need the import bindings and the element's subtree read
+ * together.
+ */
+import { findBelow, packageModules, partOf, renderedImports } from "./rendered-import.js";
+
+const partsIn = (module, names) =>
+  names.map((name) => [
+    name,
+    [...packageModules(module), `@/components/${module}`].map((from) => ({ from, part: name })),
+  ]);
+
+const PROGRESS = new Map(partsIn("progress", ["Progress"]));
+const PROGRESS_LABEL = new Map(partsIn("progress", ["ProgressLabel"]));
+
+const NAMING_ATTRIBUTES = new Set(["aria-label", "aria-labelledby"]);
+
+export const progressNeedsName = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "A Progress is named by an aria-label, an aria-labelledby or a ProgressLabel among its children.",
+    },
+    schema: [],
+    messages: {
+      unnamed:
+        "Name the work: add <ProgressLabel> (Uploading files) or aria-label, and print the count in ProgressValue.",
+    },
+  },
+  create(context) {
+    const importOf = renderedImports(context);
+    const isPart = (parts, openingElement) =>
+      Boolean(partOf(importOf(openingElement.name), parts, context.filename));
+
+    return {
+      JSXElement(node) {
+        const { openingElement } = node;
+        if (!isPart(PROGRESS, openingElement)) return;
+        const namedByAttribute = openingElement.attributes.some(
+          (attribute) =>
+            attribute.type === "JSXSpreadAttribute" || NAMING_ATTRIBUTES.has(attribute.name.name),
+        );
+        if (namedByAttribute) return;
+        const label = findBelow(
+          node,
+          context.sourceCode.visitorKeys,
+          (child) => child.type === "JSXElement" && isPart(PROGRESS_LABEL, child.openingElement),
+        );
+        if (!label) context.report({ node: openingElement, messageId: "unnamed" });
+      },
+    };
+  },
+};

package/dist/eslint/rules/settings-limit-in-footer.js

@@ -0,0 +1,94 @@
+/*
+ * Standard tool checked first: a `no-restricted-syntax` selector can find a
+ * `maxLength` inside a `SettingsSection`, but not follow a renamed import to the
+ * component, nor read whether the section's `save` or `apply` object names a hint.
+ */
+import { packageModules, partOf, renderedImports } from "./rendered-import.js";
+
+const SECTION = new Map([
+  [
+    "SettingsSection",
+    packageModules("settings-section").map((from) => ({ from, part: "SettingsSection" })),
+  ],
+]);
+
+const attributeNamed = (openingElement, name) =>
+  openingElement.attributes.find(
+    (attribute) => attribute.type === "JSXAttribute" && attribute.name.name === name,
+  );
+
+/** true: the section shows a footer line; false: it shows none; null: the source does not say. */
+function footerLine(openingElement) {
+  if (openingElement.attributes.some((attribute) => attribute.type === "JSXSpreadAttribute"))
+    return null;
+  if (
+    attributeNamed(openingElement, "footerHint") ||
+    attributeNamed(openingElement, "lockedReason")
+  )
+    return true;
+  const commit = attributeNamed(openingElement, "save") ?? attributeNamed(openingElement, "apply");
+  if (!commit) return false;
+  const value = commit.value?.type === "JSXExpressionContainer" ? commit.value.expression : null;
+  if (value?.type !== "ObjectExpression") return null;
+  if (value.properties.some((property) => property.type === "SpreadElement")) return null;
+  return value.properties.some(
+    (property) =>
+      property.type === "Property" && (property.key.name ?? property.key.value) === "hint",
+  );
+}
+
+function limitsIn(element, isSection) {
+  const found = [];
+  const visit = (node) => {
+    if (node.type === "JSXElement") {
+      if (node !== element && isSection(node.openingElement)) return;
+      const limit = attributeNamed(node.openingElement, "maxLength");
+      if (limit) found.push(limit);
+      node.children.forEach(visit);
+    } else if (node.type === "JSXFragment") {
+      node.children.forEach(visit);
+    } else if (node.type === "JSXExpressionContainer") {
+      visitExpression(node.expression);
+    }
+  };
+  const visitExpression = (expression) => {
+    if (!expression) return;
+    if (expression.type === "JSXElement" || expression.type === "JSXFragment") visit(expression);
+    else if (expression.type === "LogicalExpression") visitExpression(expression.right);
+    else if (expression.type === "ConditionalExpression") {
+      visitExpression(expression.consequent);
+      visitExpression(expression.alternate);
+    }
+  };
+  element.children.forEach(visit);
+  return found;
+}
+
+export const settingsLimitInFooter = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "A SettingsSection whose field takes a maxLength says the limit in its footer line, as Vercel's settings cards do.",
+    },
+    schema: [],
+    messages: {
+      "limit-not-said":
+        "Say this limit in the card's footer line (`save.hint`, `apply.hint` or `footerHint`), worded by the product's catalogue, such as \"Please use 48 characters at maximum.\"",
+    },
+  },
+  create(context) {
+    const importOf = renderedImports(context);
+    const isSection = (openingElement) =>
+      partOf(importOf(openingElement.name), SECTION, context.filename) === "SettingsSection";
+
+    return {
+      JSXElement(node) {
+        if (!isSection(node.openingElement)) return;
+        if (footerLine(node.openingElement) !== false) return;
+        for (const limit of limitsIn(node, isSection))
+          context.report({ node: limit, messageId: "limit-not-said" });
+      },
+    };
+  },
+};

package/dist/eslint/rules/skeleton-in-region.js

@@ -0,0 +1,80 @@
+/*
+ * Standard tool checked first: `no-restricted-syntax` selects a JSX element by
+ * name and ancestors, but not the one the import renders under another name,
+ * nor "this file or this function is a loading view", which depends on the
+ * file name and the enclosing function's name together.
+ */
+import { renderedImports } from "./rendered-import.js";
+
+const SKELETON = "Skeleton";
+const REGION = "SkeletonRegion";
+const PLACEHOLDER_FILE = /(?:^|\/)(?:loading|[^/]+-skeleton)\.[jt]sx$/;
+const PLACEHOLDER_FUNCTION = /Skeleton$/;
+const FUNCTIONS = new Set(["FunctionDeclaration", "FunctionExpression", "ArrowFunctionExpression"]);
+
+const hasContent = (child) => {
+  if (child.type === "JSXText") return child.value.trim() !== "";
+  if (child.type === "JSXExpressionContainer")
+    return child.expression.type !== "JSXEmptyExpression";
+  return true;
+};
+
+const marksBusy = (openingElement) =>
+  openingElement.attributes.some(
+    (attribute) => attribute.type === "JSXAttribute" && attribute.name.name === "aria-busy",
+  );
+
+function functionName(fn) {
+  if (fn.id) return fn.id.name;
+  const owner = fn.parent;
+  return owner.type === "VariableDeclarator" && owner.id.type === "Identifier"
+    ? owner.id.name
+    : null;
+}
+
+export const skeletonInRegion = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Placeholders of a loading view sit in a SkeletonRegion, or under an element marked aria-busy.",
+    },
+    schema: [],
+    messages: {
+      "placeholder-outside-region":
+        "Wrap these placeholders in <SkeletonRegion busy> from @nadicodeai/ui/components/skeleton so the loading view is aria-busy; a component that renders both the placeholders and the data passes busy={isPending}.",
+    },
+  },
+  create(context) {
+    const filename = context.filename.replaceAll("\\", "/");
+    const loadingFile = PLACEHOLDER_FILE.test(filename);
+    const importOf = renderedImports(context);
+
+    function loadingView(element) {
+      if (loadingFile) return true;
+      for (let current = element.parent; current; current = current.parent) {
+        if (!FUNCTIONS.has(current.type)) continue;
+        if (PLACEHOLDER_FUNCTION.test(functionName(current) ?? "")) return true;
+      }
+      return false;
+    }
+
+    function inABusyRegion(element) {
+      for (let current = element.parent; current; current = current.parent) {
+        if (current.type !== "JSXElement") continue;
+        if (importOf(current.openingElement.name)?.name === REGION) return true;
+        if (marksBusy(current.openingElement)) return true;
+      }
+      return false;
+    }
+
+    return {
+      JSXElement(node) {
+        if (importOf(node.openingElement.name)?.name !== SKELETON) return;
+        if (node.children.some(hasContent)) return;
+        if (!loadingView(node) || inABusyRegion(node)) return;
+        context.report({ node: node.openingElement, messageId: "placeholder-outside-region" });
+      },
+    };
+  },
+};

package/dist/eslint/rules/sortable-heading-uses-sort.js

@@ -0,0 +1,79 @@
+/*
+ * Standard tool checked first: a `no-restricted-syntax` selector cannot follow
+ * a renamed `TableHead` or `Button` import, nor tell a column definition's
+ * `header` from any other property of that name.
+ */
+import { packageModules, partOf, renderedImports, walk } from "./rendered-import.js";
+
+const exporters = (module, part) =>
+  new Map([
+    [part, [...packageModules(module), `@/components/${module}`].map((from) => ({ from, part }))],
+  ]);
+
+const TABLE_HEAD = exporters("table", "TableHead");
+const BUTTON = exporters("button", "Button");
+
+const FUNCTIONS = new Set(["FunctionExpression", "ArrowFunctionExpression"]);
+const COLUMN_KEYS = new Set(["accessorKey", "accessorFn", "id", "cell"]);
+
+const keyName = (property) => {
+  if (property.computed) return null;
+  return property.key.name ?? property.key.value ?? null;
+};
+
+const isColumnHeader = (property) =>
+  property.type === "Property" &&
+  keyName(property) === "header" &&
+  FUNCTIONS.has(property.value.type) &&
+  property.parent.properties.some(
+    (sibling) => sibling.type === "Property" && COLUMN_KEYS.has(keyName(sibling)),
+  );
+
+export const sortableHeadingUsesSort = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "A sortable heading is TableHead's sort prop, not a button drawn inside it.",
+    },
+    schema: [],
+    messages: {
+      "drawn-sort-button":
+        "A sortable heading is TableHead's sort prop (order, next, onSort), not a button you draw. The sort prop gives the heading aria-sort and names the next sort.",
+    },
+  },
+  create(context) {
+    const importOf = renderedImports(context);
+    const { visitorKeys } = context.sourceCode;
+
+    const drawsAControl = (opening) =>
+      opening.attributes.some(
+        (attribute) => attribute.type === "JSXAttribute" && attribute.name.name === "onClick",
+      ) || partOf(importOf(opening.name), BUTTON, context.filename) === "Button";
+
+    const reported = new Set();
+
+    function reportControlsBelow(root, skipped) {
+      walk(root, visitorKeys, (child) => {
+        if (child === skipped) return false;
+        if (child.type === "JSXOpeningElement" && !reported.has(child) && drawsAControl(child)) {
+          reported.add(child);
+          context.report({ node: child, messageId: "drawn-sort-button" });
+        }
+        return true;
+      });
+    }
+
+    return {
+      JSXElement(node) {
+        const { openingElement } = node;
+        if (partOf(importOf(openingElement.name), TABLE_HEAD, context.filename) !== "TableHead") {
+          return;
+        }
+        reportControlsBelow(node, openingElement);
+      },
+      Property(node) {
+        if (isColumnHeader(node)) reportControlsBelow(node.value, null);
+      },
+    };
+  },
+};

package/dist/eslint/rules/table-cell-inset-owner.js

@@ -0,0 +1,107 @@
+/*
+ * Standard tool checked first: a `no-restricted-syntax` selector can match a
+ * padding class written as a literal on `<TableCell>`, but not one composed
+ * through `cn(...)` or a conditional, not which JSX name is the table's part
+ * once the import is renamed, and not which object literal is a column
+ * definition rather than any other object with a `className`.
+ */
+import { PACKAGE_BARREL, partOf, renderedImports, walk } from "./rendered-import.js";
+
+const CELL_PARTS = new Set(["TableHead", "TableCell"]);
+
+const TABLE_PARTS = new Map(
+  [...CELL_PARTS].map((name) => [
+    name,
+    ["@nadicodeai/ui/components/table", PACKAGE_BARREL, "@/components/table"].map((from) => ({
+      from,
+      part: name,
+    })),
+  ]),
+);
+
+const COLUMN_KEYS = new Set(["accessorKey", "accessorFn", "header", "cell"]);
+const SIDEWAYS_PADDING = /^-?(?:px|ps|pe|pl|pr)-(?<step>.+?)!?$/;
+
+const keyName = (property) => {
+  if (property.computed) return null;
+  return property.key.type === "Identifier" ? property.key.name : property.key.value;
+};
+
+const propertyNamed = (objectExpression, name) =>
+  objectExpression.properties.find(
+    (property) => property.type === "Property" && keyName(property) === name,
+  );
+
+function withoutVariants(utility) {
+  let depth = 0;
+  let start = 0;
+  for (let index = 0; index < utility.length; index += 1) {
+    const character = utility[index];
+    if (character === "[") depth += 1;
+    else if (character === "]") depth -= 1;
+    else if (character === ":" && depth === 0) start = index + 1;
+  }
+  return utility.slice(start).replace(/^!/, "");
+}
+
+const insetsSideways = (utility) => {
+  const step = SIDEWAYS_PADDING.exec(withoutVariants(utility))?.groups.step;
+  return step !== undefined && step !== "0";
+};
+
+export const tableCellInsetOwner = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "The table insets its cells sideways; a cell or a column never sets it.",
+    },
+    schema: [],
+    messages: {
+      "cell-inset":
+        "Table cells are inset 8 px sideways at every width by the table. Remove the class; set the width with the column's `size`.",
+    },
+  },
+  create(context) {
+    const importOf = renderedImports(context);
+    const { visitorKeys } = context.sourceCode;
+
+    function checkClasses(value) {
+      const fragments = [];
+      const read = (node) => {
+        // oxlint-disable-next-line anti-slop/no-runtime-typeof -- ESTree types Literal.value as string | number | boolean | RegExp | bigint | null; only typeof picks the string.
+        if (node.type === "Literal" && typeof node.value === "string") fragments.push(node.value);
+        if (node.type === "TemplateElement") fragments.push(node.value.cooked ?? node.value.raw);
+      };
+      read(value);
+      walk(value, visitorKeys, read);
+      const refused = fragments
+        .flatMap((fragment) => fragment.split(/\s+/).filter(Boolean))
+        .some(insetsSideways);
+      if (refused) context.report({ node: value, messageId: "cell-inset" });
+    }
+
+    return {
+      JSXOpeningElement(node) {
+        if (!CELL_PARTS.has(partOf(importOf(node.name), TABLE_PARTS, context.filename) ?? "")) {
+          return;
+        }
+        for (const attribute of node.attributes) {
+          if (attribute.type === "JSXAttribute" && attribute.name.name === "className") {
+            if (attribute.value) checkClasses(attribute.value);
+          }
+        }
+      },
+      ObjectExpression(node) {
+        const isColumn = node.properties.some(
+          (property) => property.type === "Property" && COLUMN_KEYS.has(keyName(property)),
+        );
+        if (!isColumn) return;
+        const own = propertyNamed(node, "className");
+        if (own) checkClasses(own.value);
+        const meta = propertyNamed(node, "meta")?.value;
+        const metaOwn = meta?.type === "ObjectExpression" && propertyNamed(meta, "className");
+        if (metaOwn) checkClasses(metaOwn.value);
+      },
+    };
+  },
+};

package/dist/eslint/rules/tabs-selection-is-controlled.js

@@ -0,0 +1,47 @@
+/*
+ * Standard tool checked first: a `no-restricted-syntax` selector can match a
+ * `JSXAttribute[name.name='defaultValue']`, but not that the element is the
+ * package's Tabs rather than TabsNav or a local component, nor that a missing
+ * `value` is covered by a spread. Those need the import binding and the
+ * attribute list read together.
+ */
+import { packageModules, partOf, renderedImports } from "./rendered-import.js";
+
+const TABS = new Map([["Tabs", packageModules("tabs").map((from) => ({ from, part: "Tabs" }))]]);
+
+const hasAttribute = (openingElement, attributeName) =>
+  openingElement.attributes.some(
+    (attribute) => attribute.type === "JSXAttribute" && attribute.name.name === attributeName,
+  );
+
+const hasSpread = (openingElement) =>
+  openingElement.attributes.some((attribute) => attribute.type === "JSXSpreadAttribute");
+
+export const tabsSelectionIsControlled = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "Tabs is controlled by a `value` read from the address, never `defaultValue`.",
+    },
+    schema: [],
+    messages: {
+      "chosen-tab-in-address":
+        "The chosen tab lives in the address: control Tabs with `value` read from the route or ?tab=, so a reload, Back and a shared link restore it.",
+    },
+  },
+  create(context) {
+    const importOf = renderedImports(context);
+    return {
+      JSXElement(node) {
+        const { openingElement } = node;
+        if (!partOf(importOf(openingElement.name), TABS, context.filename)) return;
+        const uncontrolled =
+          hasAttribute(openingElement, "defaultValue") ||
+          (!hasAttribute(openingElement, "value") && !hasSpread(openingElement));
+        if (uncontrolled) {
+          context.report({ node: openingElement, messageId: "chosen-tab-in-address" });
+        }
+      },
+    };
+  },
+};