@design.estate/dees-domtools 3.0.0 → 3.0.2

package/dist_ts/00_commitinfo_data.js

@@ -3,7 +3,7 @@
  */
 export const commitinfo = {
     name: '@design.estate/dees-domtools',
-    version: '3.0.0',
+    version: '3.0.2',
     description: 'A package providing tools to simplify complex CSS structures and web development tasks, featuring TypeScript support and integration with various web technologies.'
 };
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMDBfY29tbWl0aW5mb19kYXRhLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vdHMvMDBfY29tbWl0aW5mb19kYXRhLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBQ0gsTUFBTSxDQUFDLE1BQU0sVUFBVSxHQUFHO0lBQ3hCLElBQUksRUFBRSw4QkFBOEI7SUFDcEMsT0FBTyxFQUFFLE9BQU87SUFDaEIsV0FBVyxFQUFFLHFLQUFxSztDQUNuTCxDQUFBIn0=

package/dist_ts/domtools.elementbasic.js

@@ -1,12 +1,70 @@
 import { DomTools } from './domtools.classes.domtools.js';
 import { scrollBarStyles, globalBaseStyles } from './domtools.css.basestyles.js';
 import { html, LitElement, css, unsafeCSS } from 'lit';
-export const staticStyles = css `
+/**
+ * The elements of the HTML standard, as TypeScript's DOM library lists them. A custom element's
+ * name always contains a hyphen, so no custom element can appear here.
+ */
+const standardHtmlElementNames = [
+    'a', 'abbr', 'address', 'area', 'article', 'aside', 'audio',
+    'b', 'base', 'bdi', 'bdo', 'blockquote', 'body', 'br', 'button',
+    'canvas', 'caption', 'cite', 'code', 'col', 'colgroup',
+    'data', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt',
+    'em', 'embed',
+    'fieldset', 'figcaption', 'figure', 'footer', 'form',
+    'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html',
+    'i', 'iframe', 'img', 'input', 'ins',
+    'kbd',
+    'label', 'legend', 'li', 'link',
+    'main', 'map', 'mark', 'menu', 'meta', 'meter',
+    'nav', 'noscript',
+    'object', 'ol', 'optgroup', 'option', 'output',
+    'p', 'picture', 'pre', 'progress',
+    'q',
+    'rp', 'rt', 'ruby',
+    's', 'samp', 'script', 'search', 'section', 'select', 'slot', 'small', 'source', 'span',
+    'strong', 'style', 'sub', 'summary', 'sup',
+    'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title',
+    'tr', 'track',
+    'u', 'ul',
+    'var', 'video',
+    'wbr',
+];
+/**
+ * Every built-in element: the standard HTML elements, and everything outside the HTML namespace
+ * (SVG, MathML), where no custom element can exist. `:where()` keeps the zero specificity of `*`,
+ * so any rule of a component still overrides a default given through this selector.
+ *
+ * Each entry gets its own `:where()` instead of sharing one list: the browser can then index every
+ * entry by its tag name rather than test each element against the whole list, which keeps style
+ * recalculation as fast as it is with `*`.
+ */
+const builtInElementSelector = [...standardHtmlElementNames, ':not(xhtml|*)']
+    .map((selector) => `:where(${selector})`)
+    .join(', ');
+/**
+ * The defaults for the elements a component renders into its shadow tree, shared by both exports.
+ * Each export opens with them because the `@namespace` rule that `builtInElementSelector` relies
+ * on is only valid ahead of every other rule.
+ *
+ * The fade is limited to built-in elements. `*` would also match the hosts of the custom elements
+ * nested in the shadow tree, and the outer tree's declarations beat a nested element's own `:host`
+ * rules whatever their specificity or layer, so no nested element could animate its own host.
+ */
+const shadowTreeElementStyles = css `
+  @namespace xhtml url('http://www.w3.org/1999/xhtml');
+
   * {
-    transition: background 0.1s, color 0.1s;
     box-sizing: border-box;
   }
 
+  ${unsafeCSS(builtInElementSelector)} {
+    transition: background 0.1s, color 0.1s;
+  }
+`.cssText;
+export const staticStyles = css `
+  ${unsafeCSS(shadowTreeElementStyles)}
+
   :host {
     box-sizing: border-box;
     font-family: 'Geist Sans', 'Inter', sans-serif;
@@ -19,10 +77,7 @@ export const staticStyles = css `
  */
 export const styles = html `
   <style>
-    * {
-      transition: background 0.1s, color 0.1s;
-      box-sizing: border-box;
-    }
+    ${shadowTreeElementStyles}
 
     :host {
       font-family: 'Geist Sans', 'Inter', sans-serif;
@@ -51,4 +106,4 @@ export const setup = async (elementArg, optionsArg = {}) => {
     await domTools.globalStylesReady.promise;
     return domTools;
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZG9tdG9vbHMuZWxlbWVudGJhc2ljLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vdHMvZG9tdG9vbHMuZWxlbWVudGJhc2ljLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxRQUFRLEVBQW1DLE1BQU0sZ0NBQWdDLENBQUM7QUFDM0YsT0FBTyxFQUFFLGVBQWUsRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLDhCQUE4QixDQUFDO0FBRWpGLE9BQU8sRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFLEdBQUcsRUFBRSxTQUFTLEVBQUUsTUFBTSxLQUFLLENBQUM7QUFFdkQsTUFBTSxDQUFDLE1BQU0sWUFBWSxHQUFHLEdBQUcsQ0FBQTs7Ozs7Ozs7Ozs7SUFXM0IsU0FBUyxDQUFDLGVBQWUsQ0FBQztDQUM3QixDQUFDO0FBRUY7O0dBRUc7QUFDSCxNQUFNLENBQUMsTUFBTSxNQUFNLEdBQUcsSUFBSSxDQUFBOzs7Ozs7Ozs7OztNQVdwQixlQUFlOztDQUVwQixDQUFDO0FBRUY7OztHQUdHO0FBQ0gsTUFBTSxDQUFDLE1BQU0sS0FBSyxHQUFHLEtBQUssRUFDeEIsVUFBdUIsRUFDdkIsYUFBeUMsRUFBRSxFQUN4QixFQUFFO0lBQ3JCLE1BQU0sUUFBUSxHQUFHLE1BQU0sUUFBUSxDQUFDLGFBQWEsQ0FBQyxVQUFVLENBQUMsQ0FBQztJQUUxRCxJQUFJLFVBQVUsRUFBRSxDQUFDO1FBQ2YscUNBQXFDO1FBQ3JDLHFCQUFxQjtJQUN2QixDQUFDO0lBRUQsTUFBTSxRQUFRLENBQUMsT0FBTyxDQUFDLG1CQUFtQixFQUFFLEtBQUssSUFBSSxFQUFFO1FBQ3JELGFBQWE7UUFDYixNQUFNLFFBQVEsQ0FBQyxlQUFlLENBQUMsZ0JBQWdCLENBQUMsQ0FBQztJQUNuRCxDQUFDLENBQUMsQ0FBQztJQUNILElBQUksUUFBUSxDQUFDLGlCQUFpQixDQUFDLE1BQU0sS0FBSyxTQUFTLEVBQUUsQ0FBQztRQUNwRCxRQUFRLENBQUMsaUJBQWlCLENBQUMsT0FBTyxFQUFFLENBQUM7SUFDdkMsQ0FBQztJQUNELE1BQU0sUUFBUSxDQUFDLGlCQUFpQixDQUFDLE9BQU8sQ0FBQztJQUN6QyxPQUFPLFFBQVEsQ0FBQztBQUNsQixDQUFDLENBQUMifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZG9tdG9vbHMuZWxlbWVudGJhc2ljLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vdHMvZG9tdG9vbHMuZWxlbWVudGJhc2ljLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxRQUFRLEVBQW1DLE1BQU0sZ0NBQWdDLENBQUM7QUFDM0YsT0FBTyxFQUFFLGVBQWUsRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLDhCQUE4QixDQUFDO0FBRWpGLE9BQU8sRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFLEdBQUcsRUFBRSxTQUFTLEVBQUUsTUFBTSxLQUFLLENBQUM7QUFFdkQ7OztHQUdHO0FBQ0gsTUFBTSx3QkFBd0IsR0FBRztJQUMvQixHQUFHLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBRSxNQUFNLEVBQUUsU0FBUyxFQUFFLE9BQU8sRUFBRSxPQUFPO0lBQzNELEdBQUcsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBRSxZQUFZLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRSxRQUFRO0lBQy9ELFFBQVEsRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUsVUFBVTtJQUN0RCxNQUFNLEVBQUUsVUFBVSxFQUFFLElBQUksRUFBRSxLQUFLLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxRQUFRLEVBQUUsS0FBSyxFQUFFLElBQUksRUFBRSxJQUFJO0lBQzlFLElBQUksRUFBRSxPQUFPO0lBQ2IsVUFBVSxFQUFFLFlBQVksRUFBRSxRQUFRLEVBQUUsUUFBUSxFQUFFLE1BQU07SUFDcEQsSUFBSSxFQUFFLElBQUksRUFBRSxJQUFJLEVBQUUsSUFBSSxFQUFFLElBQUksRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLFFBQVEsRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFLE1BQU07SUFDNUUsR0FBRyxFQUFFLFFBQVEsRUFBRSxLQUFLLEVBQUUsT0FBTyxFQUFFLEtBQUs7SUFDcEMsS0FBSztJQUNMLE9B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

package/licenses/SOURCES.md

@@ -0,0 +1,12 @@
+# Sources of the license texts in this directory
+
+These files supply license texts for dependencies that declare a license in `package.json`
+but publish no license file. They are declared in `.smartconfig.json` under
+`"@git.zone/tsbundle".thirdPartyNotices.supplements`, so tsbundle bundles and tsdeno
+executables that contain dees-domtools carry them in their third-party notices.
+
+| File | Covers | Source |
+|------|--------|--------|
+| `lit-labs-ssr-dom-shim.txt` | `@lit-labs/ssr-dom-shim` (BSD-3-Clause), taken at 1.6.0. It reaches dees-domtools through `lit` (`@lit/reactive-element`, `lit-element`); Node.js and Deno load it where browsers do not, so it appears in server bundles and `deno compile` executables. | `LICENSE` of https://github.com/lit/lit at tag `@lit-labs/ssr-dom-shim@1.6.0` (commit `20afabd3c5bfd49fdcdf1b8518e05c7f99a46db6`): https://raw.githubusercontent.com/lit/lit/20afabd3c5bfd49fdcdf1b8518e05c7f99a46db6/LICENSE. `packages/labs/ssr-dom-shim` has no license file of its own at that tag, so the repository license applies. The file last changed before that tag in commit `a53b8475abcee9919b039a86742f1d6a2f1ebd2f` (2021), so it also covers 1.5.1, which the repository does not tag; it is byte-identical to the `LICENSE` that `lit` 3.3.3 publishes. |
+
+The file is a byte-for-byte copy of the file named.

package/licenses/lit-labs-ssr-dom-shim.txt

@@ -0,0 +1,28 @@
+BSD 3-Clause License
+
+Copyright (c) 2017 Google LLC. All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-domtools",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "private": false,
   "description": "A package providing tools to simplify complex CSS structures and web development tasks, featuring TypeScript support and integration with various web technologies.",
   "main": "dist_ts/index.js",
@@ -9,10 +9,10 @@
   "author": "Lossless GmbH",
   "license": "MIT",
   "devDependencies": {
-    "@git.zone/tsbuild": "^4.4.0",
-    "@git.zone/tsbundle": "^2.13.0",
-    "@git.zone/tstest": "^3.6.3",
-    "@types/node": "^25.6.0"
+    "@git.zone/tsbuild": "^5.0.0",
+    "@git.zone/tsbundle": "^3.1.0",
+    "@git.zone/tstest": "^6.3.2",
+    "@types/node": "^26.6.2"
   },
   "dependencies": {
     "@api.global/typedrequest": "^8.0.3",
@@ -20,15 +20,15 @@
     "@push.rocks/lik": "^6.4.0",
     "@push.rocks/smartdelay": "^3.0.5",
     "@push.rocks/smartjson": "^6.0.0",
-    "@push.rocks/smartmarkdown": "^3.0.3",
+    "@push.rocks/smartmarkdown": "^3.2.3",
     "@push.rocks/smartpromise": "^4.2.3",
     "@push.rocks/smartrouter": "^1.3.3",
     "@push.rocks/smartrx": "^3.0.10",
-    "@push.rocks/smartstate": "^2.3.0",
+    "@push.rocks/smartstate": "^2.3.3",
     "@push.rocks/smartstring": "^4.1.0",
     "@push.rocks/smarturl": "^3.1.0",
     "@push.rocks/webrequest": "^4.0.5",
-    "@push.rocks/websetup": "^3.0.19",
+    "@push.rocks/websetup": "^3.0.20",
     "@push.rocks/webstore": "^2.0.21",
     "@tempfix/lenis": "^1.3.20",
     "lit": "^3.3.2",
@@ -44,6 +44,7 @@
     "assets/**/*",
     "cli.js",
     ".smartconfig.json",
+    "licenses/**/*",
     "readme.md"
   ],
   "browserslist": [

package/readme.md

@@ -271,6 +271,8 @@ class DemoElement extends LitElement {
 }
 ```
 
+`elementBasic.staticStyles` is the base stylesheet for a component, and `elementBasic.styles` renders the same element defaults as a `<style>` element inside a template. Every element of the component's shadow tree gets `box-sizing: border-box`, and every built-in element (HTML, SVG, MathML) fades `background` and `color` over 0.1s. The fade never reaches the host of a custom element nested in the component: that host keeps the transition its own styles declare, so a nested component can still animate its host, such as a sidebar collapsing its width. The defaults carry zero specificity, so any rule of the component overrides them.
+
 `elementBasic.setup()` performs the shared `DomTools` setup and injects the package's global base styles once.
 
 The returned promise resolves after the shared base styles have been injected, and `domtools.globalStylesReady` resolves at the same point.

package/ts/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-domtools',
-  version: '3.0.0',
+  version: '3.0.2',
   description: 'A package providing tools to simplify complex CSS structures and web development tasks, featuring TypeScript support and integration with various web technologies.'
 }

package/ts/domtools.elementbasic.ts

@@ -3,12 +3,73 @@ import { scrollBarStyles, globalBaseStyles } from './domtools.css.basestyles.js'
 
 import { html, LitElement, css, unsafeCSS } from 'lit';
 
-export const staticStyles = css`
+/**
+ * The elements of the HTML standard, as TypeScript's DOM library lists them. A custom element's
+ * name always contains a hyphen, so no custom element can appear here.
+ */
+const standardHtmlElementNames = [
+  'a', 'abbr', 'address', 'area', 'article', 'aside', 'audio',
+  'b', 'base', 'bdi', 'bdo', 'blockquote', 'body', 'br', 'button',
+  'canvas', 'caption', 'cite', 'code', 'col', 'colgroup',
+  'data', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt',
+  'em', 'embed',
+  'fieldset', 'figcaption', 'figure', 'footer', 'form',
+  'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html',
+  'i', 'iframe', 'img', 'input', 'ins',
+  'kbd',
+  'label', 'legend', 'li', 'link',
+  'main', 'map', 'mark', 'menu', 'meta', 'meter',
+  'nav', 'noscript',
+  'object', 'ol', 'optgroup', 'option', 'output',
+  'p', 'picture', 'pre', 'progress',
+  'q',
+  'rp', 'rt', 'ruby',
+  's', 'samp', 'script', 'search', 'section', 'select', 'slot', 'small', 'source', 'span',
+  'strong', 'style', 'sub', 'summary', 'sup',
+  'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title',
+  'tr', 'track',
+  'u', 'ul',
+  'var', 'video',
+  'wbr',
+] as const satisfies readonly (keyof HTMLElementTagNameMap)[];
+
+/**
+ * Every built-in element: the standard HTML elements, and everything outside the HTML namespace
+ * (SVG, MathML), where no custom element can exist. `:where()` keeps the zero specificity of `*`,
+ * so any rule of a component still overrides a default given through this selector.
+ *
+ * Each entry gets its own `:where()` instead of sharing one list: the browser can then index every
+ * entry by its tag name rather than test each element against the whole list, which keeps style
+ * recalculation as fast as it is with `*`.
+ */
+const builtInElementSelector = [...standardHtmlElementNames, ':not(xhtml|*)']
+  .map((selector) => `:where(${selector})`)
+  .join(', ');
+
+/**
+ * The defaults for the elements a component renders into its shadow tree, shared by both exports.
+ * Each export opens with them because the `@namespace` rule that `builtInElementSelector` relies
+ * on is only valid ahead of every other rule.
+ *
+ * The fade is limited to built-in elements. `*` would also match the hosts of the custom elements
+ * nested in the shadow tree, and the outer tree's declarations beat a nested element's own `:host`
+ * rules whatever their specificity or layer, so no nested element could animate its own host.
+ */
+const shadowTreeElementStyles: string = css`
+  @namespace xhtml url('http://www.w3.org/1999/xhtml');
+
   * {
-    transition: background 0.1s, color 0.1s;
     box-sizing: border-box;
   }
 
+  ${unsafeCSS(builtInElementSelector)} {
+    transition: background 0.1s, color 0.1s;
+  }
+`.cssText;
+
+export const staticStyles = css`
+  ${unsafeCSS(shadowTreeElementStyles)}
+
   :host {
     box-sizing: border-box;
     font-family: 'Geist Sans', 'Inter', sans-serif;
@@ -22,10 +83,7 @@ export const staticStyles = css`
  */
 export const styles = html`
   <style>
-    * {
-      transition: background 0.1s, color 0.1s;
-      box-sizing: border-box;
-    }
+    ${shadowTreeElementStyles}
 
     :host {
       font-family: 'Geist Sans', 'Inter', sans-serif;

package/readme.hints.md

@@ -1 +0,0 @@
-