nwl-components 1.8.0 → 2.0.0

package/README.md

@@ -193,6 +193,58 @@ Loading the tokens twice on a page (e.g. `tokens.css` and `dist/style.css`) is h
 `npm run lint` fails on a hex colour in `src/**/*.{vue,css}` outside `tokens.css`, and on a
 `var(--nwl-…)` that `tokens.css` doesn't define. Since 1.8.0.
 
+## Base styles and cascade layers
+
+Since 2.0.0 all the library's CSS is in three cascade layers, declared in this order at the
+top of each stylesheet it ships (`dist/style.css`, `nwl-components/base.css`,
+`nwl-components/sort/style.css`):
+
+```css
+@layer nwl.base, nwl.widgets, nwl.components;
+```
+
+- `nwl.base`: `src/styles/base.css` (below);
+- `nwl.widgets`: empty for now (plain-CSS widget classes, later);
+- `nwl.components`: the components' styles (scoped or not), `sortable.css`, and the CSS of
+  bundled dependencies (splitpanes).
+
+The tokens (`tokens.css`) stay outside the layers: they only define custom properties.
+**An app's own CSS, which is not in a layer, always wins over the library's**, whatever the
+load order or the selectors' specificity: `button { … }` in an app overrides `Button`'s scoped
+rules. No `!important` and no `html …` prefix are needed. (An app that puts its own CSS in
+layers must declare them after `nwl.components` to keep this.)
+
+`base.css` replaces 1.x's global `* { box-sizing: border-box; font-size: 14px; color: white }`
+rule, which is gone. Its selectors are wrapped in `:where()` (no specificity), and they apply
+inside the wrapper (`.app`, the root of `Wrapper`) only, except two:
+
+- `html`: `font-size: var(--nwl-text-md)` (1rem = 14px, as in 1.x), and `body`: `margin: 0`;
+- `.app`: font (`--nwl-font-body`, `--nwl-text-md`) and colour (`--nwl-text`), inherited by
+  everything inside; `box-sizing: border-box`, inherited by every element and pseudo-element;
+- headings, `small`, `sub`, `sup`, `code`, `pre` and form controls take their parent's font
+  size; form controls and `<dialog>` their parent's colour (the controls' font family stays
+  the browser's); links `--nwl-link`;
+- keyboard focus: `:focus-visible` gets a 2px solid `--nwl-focus` outline, 2px away
+  (`--nwl-focus` is `--nwl-text`, white). Mouse focus shows nothing on buttons; browsers
+  show it on text fields and Chromium on `<select>`, as they decide what is `:focus-visible`.
+
+`dist/style.css` includes `base.css`. A page without the Vue components (e.g. a Mustache page
+that wants the same font, colour and focus style) can load it alone, after the tokens:
+
+```js
+import 'nwl-components/tokens.css';
+import 'nwl-components/base.css'; // webpack 4 too (a copy at the package root)
+```
+
+```html
+<link rel="stylesheet" href="/lib/nwl-components/tokens.css">
+<link rel="stylesheet" href="/lib/nwl-components/base.css">
+<div class="app">…</div>
+```
+
+Outside `.app`, nothing sets font, colour or box-sizing any more: an app's own markup on a
+page that loads `dist/style.css` gets them from the app's CSS (or from being inside `.app`).
+
 ## Single File Components
 
 This project makes use of Vue SFCs: _Single File Components_, that have the `.vue` extension.

package/base.css

@@ -0,0 +1,58 @@
+@layer nwl.base, nwl.widgets, nwl.components;
+@layer nwl.base {
+/* nwl-components base styles: `import 'nwl-components/base.css'` (after `nwl-components/tokens.css`,
+   whose tokens it reads). dist/style.css includes it.
+
+   The build puts this file in `@layer nwl.base`, the lowest of the library's layers
+   (`@layer nwl.base, nwl.widgets, nwl.components`), so any app rule wins over it. Selectors are
+   wrapped in :where(), so they add no specificity.
+
+   Font and colour are set once, on the wrapper (`.app`, the root of `Wrapper`), and inherited:
+   there is no `*` rule setting them on every element. */
+
+/* 1rem = 14px, as in 1.x (where the `*` rule set it on <html>): the components' rem sizes */
+:where(html) {
+  font-size: var(--nwl-text-md);
+}
+
+:where(body) {
+  margin: 0;
+}
+
+:where(.app) {
+  box-sizing: border-box;
+  font-family: var(--nwl-font-body);
+  font-size: var(--nwl-text-md);
+  color: var(--nwl-text);
+}
+
+:where(.app) *,
+:where(.app) *::before,
+:where(.app) *::after {
+  box-sizing: inherit;
+}
+
+/* Elements the browser gives a size of their own (headings, small print, code, form controls)
+   take their parent's, as 1.x's `*` rule made them do. */
+:where(.app) :where(h1, h2, h3, h4, h5, h6, small, sub, sup, big, code, kbd, samp, pre, tt, button, input, select, textarea) {
+  font-size: inherit;
+}
+
+/* Form controls and dialogs don't inherit the colour by default either. The controls' font
+   family stays the browser's, as it was in 1.x. */
+:where(.app) :where(button, input, select, textarea, dialog) {
+  color: inherit;
+}
+
+/* links: the link colour, not the browser's blue */
+:where(.app a) {
+  color: var(--nwl-link);
+}
+
+/* Keyboard focus: a 2px outline in --nwl-focus. Mouse focus shows nothing (browsers match
+   :focus-visible on a mouse click only for text fields). */
+:where(.app :focus-visible) {
+  outline: 2px solid var(--nwl-focus);
+  outline-offset: 2px;
+}
+}

package/dist/base.css

@@ -0,0 +1,58 @@
+@layer nwl.base, nwl.widgets, nwl.components;
+@layer nwl.base {
+/* nwl-components base styles: `import 'nwl-components/base.css'` (after `nwl-components/tokens.css`,
+   whose tokens it reads). dist/style.css includes it.
+
+   The build puts this file in `@layer nwl.base`, the lowest of the library's layers
+   (`@layer nwl.base, nwl.widgets, nwl.components`), so any app rule wins over it. Selectors are
+   wrapped in :where(), so they add no specificity.
+
+   Font and colour are set once, on the wrapper (`.app`, the root of `Wrapper`), and inherited:
+   there is no `*` rule setting them on every element. */
+
+/* 1rem = 14px, as in 1.x (where the `*` rule set it on <html>): the components' rem sizes */
+:where(html) {
+  font-size: var(--nwl-text-md);
+}
+
+:where(body) {
+  margin: 0;
+}
+
+:where(.app) {
+  box-sizing: border-box;
+  font-family: var(--nwl-font-body);
+  font-size: var(--nwl-text-md);
+  color: var(--nwl-text);
+}
+
+:where(.app) *,
+:where(.app) *::before,
+:where(.app) *::after {
+  box-sizing: inherit;
+}
+
+/* Elements the browser gives a size of their own (headings, small print, code, form controls)
+   take their parent's, as 1.x's `*` rule made them do. */
+:where(.app) :where(h1, h2, h3, h4, h5, h6, small, sub, sup, big, code, kbd, samp, pre, tt, button, input, select, textarea) {
+  font-size: inherit;
+}
+
+/* Form controls and dialogs don't inherit the colour by default either. The controls' font
+   family stays the browser's, as it was in 1.x. */
+:where(.app) :where(button, input, select, textarea, dialog) {
+  color: inherit;
+}
+
+/* links: the link colour, not the browser's blue */
+:where(.app a) {
+  color: var(--nwl-link);
+}
+
+/* Keyboard focus: a 2px outline in --nwl-focus. Mouse focus shows nothing (browsers match
+   :focus-visible on a mouse click only for text fields). */
+:where(.app :focus-visible) {
+  outline: 2px solid var(--nwl-focus);
+  outline-offset: 2px;
+}
+}

package/dist/nwl-components.es.js

@@ -210,7 +210,7 @@ const Ci = ["title", "disabled"], Oi = {
       nt(o.$slots, "default", {}, void 0, !0)
     ], 8, Ci));
   }
-}, tt = /* @__PURE__ */ R(Oi, [["__scopeId", "data-v-cdb86915"]]);
+}, tt = /* @__PURE__ */ R(Oi, [["__scopeId", "data-v-1f31a043"]]);
 const xi = ["value"], Si = {
   __name: "Select",
   props: {
@@ -232,7 +232,7 @@ const xi = ["value"], Si = {
       nt(i.$slots, "default", {}, void 0, !0)
     ], 16, xi));
   }
-}, Eo = /* @__PURE__ */ R(Si, [["__scopeId", "data-v-7fa9b441"]]);
+}, Eo = /* @__PURE__ */ R(Si, [["__scopeId", "data-v-0064a5e5"]]);
 const vi = {
   __name: "TextArea",
   props: /* @__PURE__ */ Yt({
@@ -2703,7 +2703,7 @@ function Pu(t, e) {
     ], -1)
   ])]);
 }
-const Vn = /* @__PURE__ */ R(Ru, [["render", Pu], ["__scopeId", "data-v-76749026"]]), _M = {
+const Vn = /* @__PURE__ */ R(Ru, [["render", Pu], ["__scopeId", "data-v-98407041"]]), _M = {
   __name: "SettingsPage",
   props: {
     project: {
@@ -5297,7 +5297,7 @@ const Vc = { class: "range-slider" }, Xc = ["max", "value"], Jc = {
       })) : st("", !0)
     ]));
   }
-}, Qn = /* @__PURE__ */ R(Jc, [["__scopeId", "data-v-47c32c5c"]]);
+}, Qn = /* @__PURE__ */ R(Jc, [["__scopeId", "data-v-1cc1f8e9"]]);
 const Kc = {
   __name: "Row",
   props: {
@@ -5504,7 +5504,7 @@ const aM = { id: "labels-name" }, rM = { class: "label-list" }, lM = ["onClick"]
       ])) : st("", !0)
     ], 544)) : st("", !0);
   }
-}, GM = /* @__PURE__ */ R(MM, [["__scopeId", "data-v-db99ef8d"]]);
+}, GM = /* @__PURE__ */ R(MM, [["__scopeId", "data-v-c07b1205"]]);
 const dM = { class: "chat" }, NM = { class: "overlay" }, gM = { class: "notifications" }, IM = ["innerHTML"], TM = {
   __name: "Chat",
   props: {