@stencil/core 4.21.0 → 4.22.0

package/internal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/core/internal",
-  "version": "4.21.0",
+  "version": "4.22.0",
   "description": "Stencil internals only to be imported by the Stencil Compiler. Breaking changes can and will happen at any time.",
   "main": "./index.js",
   "types": "./index.d.ts",

package/internal/stencil-public-compiler.d.ts

@@ -2,6 +2,7 @@ import type { ConfigFlags } from '../cli/config-flags';
 import type { PrerenderUrlResults, PrintLine } from '../internal';
 import type { BuildCtx, CompilerCtx } from './stencil-private';
 import type { JsonDocs } from './stencil-public-docs';
+import type { ResolutionHandler } from './stencil-public-runtime';
 export * from './stencil-public-docs';
 /**
  * https://stenciljs.com/docs/config/
@@ -246,6 +247,7 @@ export interface StencilConfig {
     env?: {
         [prop: string]: string | undefined;
     };
+    docs?: StencilDocsConfig;
     globalScript?: string;
     srcIndexHtml?: string;
     watch?: boolean;
@@ -859,6 +861,11 @@ export interface SerializeDocumentOptions extends HydrateDocumentOptions {
      * @default true
      */
     fullDocument?: boolean;
+    /**
+     * Style modes to render the component in.
+     * @see https://stenciljs.com/docs/styling#style-modes
+     */
+    modes?: ResolutionHandler[];
 }
 export interface HydrateFactoryOptions extends SerializeDocumentOptions {
     serializeToHtml: boolean;
@@ -1558,6 +1565,33 @@ export interface CopyTask {
      */
     keepDirStructure?: boolean;
 }
+/**
+ * Configuration for generating documentation from Stencil components.
+ */
+export interface StencilDocsConfig {
+    /**
+     * Options for processing and rendering Markdown documentation files.
+     */
+    markdown?: {
+        /**
+         * Styling for how the target component will be represented within documentation (e.g., in component diagrams).
+         */
+        targetComponent?: {
+            /**
+             * Background color used for nodes representing the component in diagrams (e.g., Mermaid graphs).
+             * Use standard color names or hex codes.
+             * @example '#f0f0f0' (light gray)
+             */
+            background?: string;
+            /**
+             * Text color used within nodes representing the component in diagrams (e.g., Mermaid graphs).
+             * Use standard color names or hex codes.
+             * @example '#333' (dark gray)
+             */
+            textColor?: string;
+        };
+    };
+}
 export interface BundlingConfig {
     /**
      * @deprecated the `namedExports` field is no longer honored by `@rollup/plugin-commonjs` and is not used by Stencil.

package/internal/stencil-public-runtime.d.ts

@@ -1564,6 +1564,10 @@ export declare namespace JSXBase {
         onSubmitCapture?: (event: Event) => void;
         onInvalid?: (event: Event) => void;
         onInvalidCapture?: (event: Event) => void;
+        onBeforeToggle?: (event: Event) => void;
+        onBeforeToggleCapture?: (event: Event) => void;
+        onToggle?: (event: Event) => void;
+        onToggleCapture?: (event: Event) => void;
         onLoad?: (event: Event) => void;
         onLoadCapture?: (event: Event) => void;
         onError?: (event: Event) => void;

package/internal/testing/index.js

@@ -1017,7 +1017,7 @@ var addStyle = (styleContainerNode, cmpMeta, mode) => {
           if (!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */)) {
             if (styleContainerNode.nodeName === "HEAD") {
               const preconnectLinks = styleContainerNode.querySelectorAll("link[rel=preconnect]");
-              const referenceNode2 = preconnectLinks.length > 0 ? preconnectLinks[preconnectLinks.length - 1].nextSibling : document.querySelector("style");
+              const referenceNode2 = preconnectLinks.length > 0 ? preconnectLinks[preconnectLinks.length - 1].nextSibling : styleContainerNode.querySelector("style");
               styleContainerNode.insertBefore(styleElm, referenceNode2);
             } else if ("host" in styleContainerNode) {
               styleContainerNode.prepend(styleElm);
@@ -2514,6 +2514,11 @@ var patchSlotAppendChild = (HostElementPrototype) => {
     const slotName = newChild["s-sn"] = getSlotName(newChild);
     const slotNode = getHostSlotNode(this.childNodes, slotName, this.tagName);
     if (slotNode) {
+      const slotPlaceholder = document.createTextNode("");
+      slotPlaceholder["s-nr"] = newChild;
+      slotNode["s-cr"].parentNode.__appendChild(slotPlaceholder);
+      newChild["s-ol"] = slotPlaceholder;
+      newChild["s-sh"] = slotNode["s-hn"];
       const slotChildNodes = getHostSlotChildNodes(slotNode, slotName);
       const appendAfter = slotChildNodes[slotChildNodes.length - 1];
       const insertedNode = insertBefore(appendAfter.parentNode, newChild, appendAfter.nextSibling);
@@ -2555,6 +2560,7 @@ var patchSlotPrepend = (HostElementPrototype) => {
         slotPlaceholder["s-nr"] = newChild;
         slotNode["s-cr"].parentNode.__appendChild(slotPlaceholder);
         newChild["s-ol"] = slotPlaceholder;
+        newChild["s-sh"] = slotNode["s-hn"];
         const slotChildNodes = getHostSlotChildNodes(slotNode, slotName);
         const appendAfter = slotChildNodes[0];
         return insertBefore(appendAfter.parentNode, newChild, appendAfter.nextSibling);

package/internal/testing/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/core/internal/testing",
-  "version": "4.21.0",
+  "version": "4.22.0",
   "description": "Stencil internal testing platform to be imported by the Stencil Compiler. Breaking changes can and will happen at any time.",
   "main": "./index.js",
   "private": true

package/mock-doc/index.cjs

@@ -1,5 +1,5 @@
 /*!
- Stencil Mock Doc (CommonJS) v4.21.0 | MIT Licensed | https://stenciljs.com
+ Stencil Mock Doc (CommonJS) v4.22.0 | MIT Licensed | https://stenciljs.com
  */
 "use strict";
 var __defProp = Object.defineProperty;
@@ -60,6 +60,7 @@ var CONTENT_REF_ID = "r";
 var ORG_LOCATION_ID = "o";
 var SLOT_NODE_ID = "s";
 var TEXT_NODE_ID = "t";
+var HYDRATE_ID = "s-id";
 var XLINK_NS = "http://www.w3.org/1999/xlink";
 
 // src/mock-doc/attribute.ts
@@ -6438,6 +6439,13 @@ style="${cssText}">`;
               output.indent = output.indent + ((_h = opts.indentSpaces) != null ? _h : 0);
             }
             for (let i = 0; i < childNodeLength; i++) {
+              const sId = node.attributes.getNamedItem(HYDRATE_ID);
+              const isStencilDeclarativeShadowDOM = childNodes[i].nodeName.toLowerCase() === "template" && sId;
+              if (isStencilDeclarativeShadowDOM) {
+                yield `
+${" ".repeat(output.indent)}<!--r.${sId.value}-->`;
+                continue;
+              }
               yield* streamToHtml(childNodes[i], opts, output);
             }
             if (ignoreTag === false) {
@@ -8926,6 +8934,21 @@ function resetPerformance(perf) {
   }
 }
 
+// src/mock-doc/resize-observer.ts
+var MockResizeObserver = class {
+  constructor() {
+  }
+  disconnect() {
+  }
+  observe() {
+  }
+  takeRecords() {
+    return [];
+  }
+  unobserve() {
+  }
+};
+
 // src/mock-doc/storage.ts
 var MockStorage = class {
   constructor() {
@@ -9165,6 +9188,9 @@ var MockWindow = class {
   get IntersectionObserver() {
     return MockIntersectionObserver;
   }
+  get ResizeObserver() {
+    return MockResizeObserver;
+  }
   get localStorage() {
     if (this.__localStorage == null) {
       this.__localStorage = new MockStorage();

package/mock-doc/index.d.ts

@@ -825,6 +825,13 @@ declare class MockResponse {
   text(): Promise<string>;
   clone(): MockResponse;
 }
+declare class MockResizeObserver {
+  constructor();
+  disconnect(): void;
+  observe(): void;
+  takeRecords(): any[];
+  unobserve(): void;
+}
 /**
  * Check whether an element of interest matches a given selector.
  *
@@ -963,6 +970,7 @@ declare class MockWindow {
   get HTMLElement(): any;
   set HTMLElement(htmlElementCstr: any);
   get IntersectionObserver(): typeof MockIntersectionObserver;
+  get ResizeObserver(): typeof MockResizeObserver;
   get localStorage(): MockStorage;
   set localStorage(locStorage: MockStorage);
   get location(): MockLocation;

package/mock-doc/index.js

@@ -1,5 +1,5 @@
 /*!
- Stencil Mock Doc v4.21.0 | MIT Licensed | https://stenciljs.com
+ Stencil Mock Doc v4.22.0 | MIT Licensed | https://stenciljs.com
  */
 
 // src/runtime/runtime-constants.ts
@@ -7,6 +7,7 @@ var CONTENT_REF_ID = "r";
 var ORG_LOCATION_ID = "o";
 var SLOT_NODE_ID = "s";
 var TEXT_NODE_ID = "t";
+var HYDRATE_ID = "s-id";
 var XLINK_NS = "http://www.w3.org/1999/xlink";
 
 // src/mock-doc/attribute.ts
@@ -6385,6 +6386,13 @@ style="${cssText}">`;
               output.indent = output.indent + ((_h = opts.indentSpaces) != null ? _h : 0);
             }
             for (let i = 0; i < childNodeLength; i++) {
+              const sId = node.attributes.getNamedItem(HYDRATE_ID);
+              const isStencilDeclarativeShadowDOM = childNodes[i].nodeName.toLowerCase() === "template" && sId;
+              if (isStencilDeclarativeShadowDOM) {
+                yield `
+${" ".repeat(output.indent)}<!--r.${sId.value}-->`;
+                continue;
+              }
               yield* streamToHtml(childNodes[i], opts, output);
             }
             if (ignoreTag === false) {
@@ -8873,6 +8881,21 @@ function resetPerformance(perf) {
   }
 }
 
+// src/mock-doc/resize-observer.ts
+var MockResizeObserver = class {
+  constructor() {
+  }
+  disconnect() {
+  }
+  observe() {
+  }
+  takeRecords() {
+    return [];
+  }
+  unobserve() {
+  }
+};
+
 // src/mock-doc/storage.ts
 var MockStorage = class {
   constructor() {
@@ -9112,6 +9135,9 @@ var MockWindow = class {
   get IntersectionObserver() {
     return MockIntersectionObserver;
   }
+  get ResizeObserver() {
+    return MockResizeObserver;
+  }
   get localStorage() {
     if (this.__localStorage == null) {
       this.__localStorage = new MockStorage();

package/mock-doc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/core/mock-doc",
-  "version": "4.21.0",
+  "version": "4.22.0",
   "description": "Mock window, document and DOM outside of a browser environment.",
   "main": "./index.cjs",
   "module": "./index.js",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/core",
-  "version": "4.21.0",
+  "version": "4.22.0",
   "license": "MIT",
   "main": "./internal/stencil-core/index.cjs",
   "module": "./internal/stencil-core/index.js",
@@ -190,7 +190,7 @@
     "semver": "^7.3.7",
     "terser": "5.31.1",
     "tsx": "^4.10.3",
-    "typescript": "~5.5.3",
+    "typescript": "~5.5.4",
     "webpack": "^5.75.0",
     "ws": "8.17.1"
   },

package/screenshot/index.js

@@ -1,5 +1,5 @@
 /*
- Stencil Screenshot v4.21.0 | MIT Licensed | https://stenciljs.com
+ Stencil Screenshot v4.22.0 | MIT Licensed | https://stenciljs.com
  */
 "use strict";
 var __create = Object.create;

package/screenshot/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stencil/core/screenshot",
-  "version": "4.21.0",
+  "version": "4.22.0",
   "description": "Stencil Screenshot.",
   "main": "./index.js",
   "types": "./index.d.ts",

package/screenshot/pixel-match.js

@@ -1,5 +1,5 @@
 /*
- Stencil Screenshot Pixel Match v4.21.0 | MIT Licensed | https://stenciljs.com
+ Stencil Screenshot Pixel Match v4.22.0 | MIT Licensed | https://stenciljs.com
  */
 "use strict";
 var __create = Object.create;