@design.estate/dees-domtools 3.0.0 → 3.0.1

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.1',
     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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-domtools",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "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": "^4.5.1",
+    "@git.zone/tsbundle": "^2.14.0",
+    "@git.zone/tstest": "^6.1.5",
+    "@types/node": "^26.6.1"
   },
   "dependencies": {
     "@api.global/typedrequest": "^8.0.3",

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.1',
   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 @@
-