dowel-ui 0.8.0 → 0.9.0

package/README.md

@@ -11,7 +11,7 @@ A dowel is the hidden peg that joins two boards so the seam does not show. That
 **[Documentation](https://lacodda.github.io/dowel/)** — what everything is and why it is that way.
 **[The stand](https://lacodda.github.io/dowel/stand/)** — every component, live, in either theme and in the accent of any product of the line.
 
-**Status:** v0.8.0 - the theme, the scales, an accent per product, sixteen components including the overlays, and the gates each one passes: axe, the keyboard, a dependency budget and a picture in both themes. The first product of the line lives on it. See the [roadmap](#roadmap).
+**Status:** v0.9.0 - the theme, the scales, an accent per product, twenty components including the overlays and the menus, and the gates each one passes: axe, the keyboard, a dependency budget and a picture in both themes. The first product of the line lives on it. See the [roadmap](#roadmap).
 
 ## The theme
 
@@ -83,9 +83,17 @@ your code:
 npx shadcn@latest add https://lacodda.github.io/dowel/r/button.json
 ```
 
-Sixteen of them so far. The everyday ones - Button, Input, Textarea, Panel,
-Badge, Chip, Kbd, Spinner, Truncate and Copyable - and the six that float above
-the page: Dialog, ConfirmDialog, Drawer, Popover, PreviewCard and Tooltip.
+Twenty of them so far. The everyday ones - Button, Input, Textarea, Panel,
+Badge, Chip, Kbd, Spinner, Truncate and Copyable; the six that float above the
+page - Dialog, ConfirmDialog, Drawer, Popover, PreviewCard and Tooltip; and
+four for choosing something: Menu, ContextMenu, Select and Combobox.
+
+`Select` is the one the line's oldest rule is about. It renders
+`<button role="combobox">` and no native `<select>` at all - the browser draws
+that popup in the operating system's own chrome, where no stylesheet reaches
+it, and on a screen of the product's own controls it reads as a foreign object.
+`multiple` is a prop on Select and on Combobox rather than a component of its
+own.
 
 The overlays are built on [Base UI](https://base-ui.com), which supplies the
 part that is genuinely hard and invisible when it works: the focus trap, the
@@ -106,8 +114,10 @@ import dowel from 'dowel-ui/eslint'
 export default [...dowel.configs.recommended]
 ```
 
-It reports a hex, an `rgb()`, a stock Tailwind colour, `bg-white`, and any
-`dark:` utility, in the file that wrote one - see [the guide](https://lacodda.github.io/dowel/guides/linting/).
+Two rules come with it. One reports a hex, an `rgb()`, a stock Tailwind colour,
+`bg-white` and any `dark:` utility, in the file that wrote one. The other
+forbids the native `<select>`, whose popup the browser draws in the operating
+system's own chrome where no CSS reaches it - see [the guide](https://lacodda.github.io/dowel/guides/linting/).
 
 Every primitive also runs a gate of its own before it ships: axe over the
 rendered DOM in every variant, the keyboard over every interactive one, a
@@ -134,7 +144,7 @@ Development goes in versions; each one is a single coherent theme, and ends in a
 ## Documentation
 
 - [The stand](https://lacodda.github.io/dowel/stand/) - every component, live
-- [Getting started](https://lacodda.github.io/dowel/getting-started/) and [the lint rule](https://lacodda.github.io/dowel/guides/linting/)
+- [Getting started](https://lacodda.github.io/dowel/getting-started/), [the lint rules](https://lacodda.github.io/dowel/guides/linting/) and [what a component has to pass](https://lacodda.github.io/dowel/guides/gates/)
 - [Components](https://lacodda.github.io/dowel/components/button/)
 - [Tokens](https://lacodda.github.io/dowel/reference/tokens/), [scales](https://lacodda.github.io/dowel/reference/scales/) and [accents](https://lacodda.github.io/dowel/reference/accents/)
 

package/dist/eslint/index.d.ts

@@ -9,4 +9,5 @@ declare const dowel: ESLint.Plugin & {
 };
 export default dowel;
 export { noRawColor, findRawColor } from './no-raw-color.js';
+export { noNativeSelect } from './no-native-select.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/eslint/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eslint/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AAoC5C;;+EAE+E;AAC/E,QAAA,MAAM,KAAK,EAAE,MAAM,CAAC,MAAM,GAAG;IAAE,OAAO,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,CAAA;KAAE,CAAA;CAEtE,CAAA;AAEF,eAAe,KAAK,CAAA;AACpB,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eslint/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AAyC5C;;+EAE+E;AAC/E,QAAA,MAAM,KAAK,EAAE,MAAM,CAAC,MAAM,GAAG;IAAE,OAAO,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,CAAA;KAAE,CAAA;CAEtE,CAAA;AAEF,eAAe,KAAK,CAAA;AACpB,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA"}

package/dist/eslint/index.js

@@ -1,9 +1,11 @@
+import { noNativeSelect } from './no-native-select.js';
 import { noRawColor } from './no-raw-color.js';
 /*
  * The dowel ESLint plugin.
  *
- * One rule, and it enforces the convention the whole system rests on: a
- * component names colours from the vocabulary and never writes one down.
+ * Two rules, and both enforce a convention the system rests on: a component
+ * names colours from the vocabulary and never writes one down, and no screen
+ * uses a native `<select>`, which the browser draws in its own chrome.
  *
  * It ships from the package rather than the registry because it is not a
  * component - it is not copied into a product and edited there, it is a check
@@ -18,15 +20,18 @@ import { noRawColor } from './no-raw-color.js';
  */
 const plugin = {
     meta: { name: 'dowel' },
-    rules: { 'no-raw-color': noRawColor },
+    rules: { 'no-raw-color': noRawColor, 'no-native-select': noNativeSelect },
 };
-/** The rule, applied where components live. Scoped to TypeScript sources: the
- * theme is CSS and the build tools are Node, and neither is a component. */
+/** The rules, applied where components live. Scoped to TypeScript sources:
+ * the theme is CSS and the build tools are Node, and neither is a component. */
 const recommended = [
     {
         files: ['**/*.{ts,tsx}'],
         plugins: { dowel: plugin },
-        rules: { 'dowel/no-raw-color': 'error' },
+        rules: {
+            'dowel/no-raw-color': 'error',
+            'dowel/no-native-select': 'error',
+        },
     },
 ];
 /** The plugin, with its config bundled on - the shape flat config expects
@@ -37,4 +42,5 @@ const dowel = Object.assign(plugin, {
 });
 export default dowel;
 export { noRawColor, findRawColor } from './no-raw-color.js';
+export { noNativeSelect } from './no-native-select.js';
 //# sourceMappingURL=index.js.map

package/dist/eslint/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/eslint/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAE9C;;;;;;;;;;;;;;;;GAgBG;AAEH,MAAM,MAAM,GAAG;IACb,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;IACvB,KAAK,EAAE,EAAE,cAAc,EAAE,UAAU,EAAE;CACd,CAAA;AAEzB;4EAC4E;AAC5E,MAAM,WAAW,GAAoB;IACnC;QACE,KAAK,EAAE,CAAC,eAAe,CAAC;QACxB,OAAO,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;QAC1B,KAAK,EAAE,EAAE,oBAAoB,EAAE,OAAO,EAAE;KACzC;CACF,CAAA;AAED;;+EAE+E;AAC/E,MAAM,KAAK,GAAkE,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE;IACjG,OAAO,EAAE,EAAE,WAAW,EAAE;CACzB,CAAC,CAAA;AAEF,eAAe,KAAK,CAAA;AACpB,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/eslint/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAE9C;;;;;;;;;;;;;;;;;GAiBG;AAEH,MAAM,MAAM,GAAG;IACb,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;IACvB,KAAK,EAAE,EAAE,cAAc,EAAE,UAAU,EAAE,kBAAkB,EAAE,cAAc,EAAE;CAClD,CAAA;AAEzB;gFACgF;AAChF,MAAM,WAAW,GAAoB;IACnC;QACE,KAAK,EAAE,CAAC,eAAe,CAAC;QACxB,OAAO,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;QAC1B,KAAK,EAAE;YACL,oBAAoB,EAAE,OAAO;YAC7B,wBAAwB,EAAE,OAAO;SAClC;KACF;CACF,CAAA;AAED;;+EAE+E;AAC/E,MAAM,KAAK,GAAkE,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE;IACjG,OAAO,EAAE,EAAE,WAAW,EAAE;CACzB,CAAC,CAAA;AAEF,eAAe,KAAK,CAAA;AACpB,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA"}

package/dist/eslint/no-native-select.d.ts

@@ -0,0 +1,3 @@
+import type { Rule } from 'eslint';
+export declare const noNativeSelect: Rule.RuleModule;
+//# sourceMappingURL=no-native-select.d.ts.map

package/dist/eslint/no-native-select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"no-native-select.d.ts","sourceRoot":"","sources":["../../src/eslint/no-native-select.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AA4BlC,eAAO,MAAM,cAAc,EAAE,IAAI,CAAC,UA2BjC,CAAA"}

package/dist/eslint/no-native-select.js

@@ -0,0 +1,51 @@
+/*
+ * `no-native-select` - the oldest convention in the line, from atlas.
+ *
+ * A `<select>` cannot be made to look like the rest of an application. The
+ * browser draws its popup itself, in the operating system's chrome, with the
+ * operating system's fonts and spacing - and no amount of CSS reaches inside
+ * it. On a screen where every other control is the product's own, the one
+ * native dropdown reads as a foreign object, and on Windows it reads as a
+ * foreign object from 1998.
+ *
+ * So the rule is about the element, not about a name: `Select` from this set
+ * renders `<button role="combobox">` and no `<select>` at all, which is what
+ * the convention was always asking for.
+ *
+ * `<option>` and `<optgroup>` are reported too. They exist only inside a
+ * `<select>`, so one appearing on its own is either a `<select>` being
+ * assembled somewhere else or a misunderstanding - both worth saying out loud.
+ */
+const NATIVE = new Set(['select', 'option', 'optgroup']);
+const MESSAGE = 'A native `<{{name}}>` cannot be styled to match the rest of the application - ' +
+    'the browser draws its popup in the operating system chrome. Use the Select or ' +
+    'Combobox component instead.';
+export const noNativeSelect = {
+    meta: {
+        type: 'problem',
+        docs: {
+            description: 'Forbid the native `<select>` element, which cannot be styled to match the product.',
+            url: 'https://lacodda.github.io/dowel/guides/linting/',
+        },
+        schema: [],
+        messages: { native: MESSAGE },
+    },
+    create(context) {
+        return {
+            // `JSXOpeningElement` is not in ESLint's own AST types - the JSX nodes
+            // come from the TypeScript parser - so the visitor is declared by name
+            // and the node is read structurally.
+            JSXOpeningElement(node) {
+                const name = node.name;
+                // A lower-case identifier is an HTML tag; `<Select>` is a component,
+                // and a member expression like `<Base.Select>` is somebody's namespace.
+                if (name?.type !== 'JSXIdentifier' || typeof name.name !== 'string')
+                    return;
+                if (!NATIVE.has(name.name))
+                    return;
+                context.report({ node, messageId: 'native', data: { name: name.name } });
+            },
+        };
+    },
+};
+//# sourceMappingURL=no-native-select.js.map

package/dist/eslint/no-native-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"no-native-select.js","sourceRoot":"","sources":["../../src/eslint/no-native-select.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;GAiBG;AAEH,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,CAAC,QAAQ,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAA;AAExD,MAAM,OAAO,GACX,gFAAgF;IAChF,gFAAgF;IAChF,6BAA6B,CAAA;AAE/B,MAAM,CAAC,MAAM,cAAc,GAAoB;IAC7C,IAAI,EAAE;QACJ,IAAI,EAAE,SAAS;QACf,IAAI,EAAE;YACJ,WAAW,EACT,oFAAoF;YACtF,GAAG,EAAE,iDAAiD;SACvD;QACD,MAAM,EAAE,EAAE;QACV,QAAQ,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE;KAC9B;IACD,MAAM,CAAC,OAAO;QACZ,OAAO;YACL,uEAAuE;YACvE,uEAAuE;YACvE,qCAAqC;YACrC,iBAAiB,CAAC,IAAe;gBAC/B,MAAM,IAAI,GAAI,IAA+D,CAAC,IAAI,CAAA;gBAClF,qEAAqE;gBACrE,wEAAwE;gBACxE,IAAI,IAAI,EAAE,IAAI,KAAK,eAAe,IAAI,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ;oBAAE,OAAM;gBAC3E,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;oBAAE,OAAM;gBAElC,OAAO,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC,CAAA;YAC1E,CAAC;SACmB,CAAA;IACxB,CAAC;CACF,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dowel-ui",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "The lacodda line design system: theme tokens and React primitives, distributed as a shadcn-compatible registry.",
   "license": "MIT",
   "type": "module",