@maggioli-design-system/mds-paginator 2.0.0 → 2.1.1

package/dist/cjs/{index-90936275.js → index-0a1b6680.js}

@@ -48,7 +48,7 @@ const uniqueTime = (key, measureText) => {
         };
     }
 };
-const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';
+const HYDRATED_CSS = '{visibility:hidden}[hydrated]{visibility:inherit}';
 /**
  * Default style mode id
  */
@@ -63,6 +63,18 @@ const isComplexType = (o) => {
     o = typeof o;
     return o === 'object' || o === 'function';
 };
+/**
+ * Helper method for querying a `meta` tag that contains a nonce value
+ * out of a DOM's head.
+ *
+ * @param doc The DOM containing the `head` to query against
+ * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag
+ * exists or the tag has no content.
+ */
+function queryNonceMetaTagContent(doc) {
+    var _a, _b, _c;
+    return (_c = (_b = (_a = doc.head) === null || _a === void 0 ? void 0 : _a.querySelector('meta[name="csp-nonce"]')) === null || _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined;
+}
 /**
  * Production h() function based on Preact by
  * Jason Miller (@developit)
@@ -71,7 +83,6 @@ const isComplexType = (o) => {
  *
  * Modified for Stencil's compiler and vdom
  */
-// const stack: any[] = [];
 // export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, child?: d.ChildType): d.VNode;
 // export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, ...children: d.ChildType[]): d.VNode;
 const h = (nodeName, vnodeData, ...children) => {
@@ -130,6 +141,14 @@ const h = (nodeName, vnodeData, ...children) => {
     }
     return vnode;
 };
+/**
+ * A utility function for creating a virtual DOM node from a tag and some
+ * possible text content.
+ *
+ * @param tag the tag for this element
+ * @param text possible text content for the node
+ * @returns a newly-minted virtual DOM node
+ */
 const newVNode = (tag, text) => {
     const vnode = {
         $flags$: 0,
@@ -147,6 +166,12 @@ const newVNode = (tag, text) => {
     return vnode;
 };
 const Host = {};
+/**
+ * Check whether a given node is a Host node or not
+ *
+ * @param node the virtual DOM node to check
+ * @returns whether it's a Host node or not
+ */
 const isHost = (node) => node && node.$tag$ === Host;
 /**
  * Parse a new property value for a given property type.
@@ -229,6 +254,7 @@ const registerStyle = (scopeId, cssText, allowCS) => {
     styles.set(scopeId, style);
 };
 const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
+    var _a;
     let scopeId = getScopeId(cmpMeta);
     const style = styles.get(scopeId);
     // if an element is NOT connected then getRootNode() will return the wrong root node
@@ -248,6 +274,11 @@ const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
                         styleElm = doc.createElement('style');
                         styleElm.innerHTML = style;
                     }
+                    // Apply CSP nonce to the style tag if it exists
+                    const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
+                    if (nonce != null) {
+                        styleElm.setAttribute('nonce', nonce);
+                    }
                     styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));
                 }
                 if (appliedStyles) {
@@ -448,6 +479,21 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
     }
     return elm;
 };
+/**
+ * Create DOM nodes corresponding to a list of {@link d.Vnode} objects and
+ * add them to the DOM in the appropriate place.
+ *
+ * @param parentElm the DOM node which should be used as a parent for the new
+ * DOM nodes
+ * @param before a child of the `parentElm` which the new children should be
+ * inserted before (optional)
+ * @param parentVNode the parent virtual DOM node
+ * @param vnodes the new child virtual DOM nodes to produce DOM nodes for
+ * @param startIdx the index in the child virtual DOM nodes at which to start
+ * creating DOM nodes (inclusive)
+ * @param endIdx the index in the child virtual DOM nodes at which to stop
+ * creating DOM nodes (inclusive)
+ */
 const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
     let containerElm = (parentElm);
     let childNode;
@@ -464,6 +510,19 @@ const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) =>
         }
     }
 };
+/**
+ * Remove the DOM elements corresponding to a list of {@link d.VNode} objects.
+ * This can be used to, for instance, clean up after a list of children which
+ * should no longer be shown.
+ *
+ * This function also handles some of Stencil's slot relocation logic.
+ *
+ * @param vnodes a list of virtual DOM nodes to remove
+ * @param startIdx the index at which to start removing nodes (inclusive)
+ * @param endIdx the index at which to stop removing nodes (inclusive)
+ * @param vnode a VNode
+ * @param elm an element
+ */
 const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
     for (; startIdx <= endIdx; ++startIdx) {
         if ((vnode = vnodes[startIdx])) {
@@ -692,7 +751,8 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
  *
  * So, in other words, if `key` attrs are not set on VNodes which may be
  * changing order within a `children` array or something along those lines then
- * we could obtain a false positive and then have to do needless re-rendering.
+ * we could obtain a false negative and then have to do needless re-rendering
+ * (i.e. we'd say two VNodes aren't equal when in fact they should be).
  *
  * @param leftVNode the first VNode to check
  * @param rightVNode the second VNode to check
@@ -756,6 +816,18 @@ const patch = (oldVNode, newVNode) => {
         elm.data = text;
     }
 };
+/**
+ * The main entry point for Stencil's virtual DOM-based rendering engine
+ *
+ * Given a {@link d.HostRef} container and some virtual DOM nodes, this
+ * function will handle creating a virtual DOM tree with a single root, patching
+ * the current virtual DOM tree onto an old one (if any), dealing with slot
+ * relocation, and reflecting attributes.
+ *
+ * @param hostRef data needed to root and render the virtual DOM tree, such as
+ * the DOM node into which it should be rendered.
+ * @param renderFnResults the virtual DOM nodes to be rendered
+ */
 const renderVdom = (hostRef, renderFnResults) => {
     const hostElm = hostRef.$hostElement$;
     const cmpMeta = hostRef.$cmpMeta$;
@@ -927,8 +999,8 @@ const safeCall = (instance, method, arg) => {
 const then = (promise, thenFn) => {
     return promise && promise.then ? promise.then(thenFn) : thenFn();
 };
-const addHydratedFlag = (elm) => elm.classList.add('hydrated')
-    ;
+const addHydratedFlag = (elm) => elm.setAttribute('hydrated', '')
+        ;
 const getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propName);
 const setValue = (ref, propName, newVal, cmpMeta) => {
     // check our new property value against our internal value
@@ -1173,6 +1245,7 @@ const disconnectedCallback = (elm) => {
     }
 };
 const bootstrapLazy = (lazyBundles, options = {}) => {
+    var _a;
     const endBootstrap = createTime();
     const cmpTags = [];
     const exclude = options.exclude || [];
@@ -1249,6 +1322,11 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
     {
         visibilityStyle.innerHTML = cmpTags + HYDRATED_CSS;
         visibilityStyle.setAttribute('data-styles', '');
+        // Apply CSP nonce to the style tag if it exists
+        const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
+        if (nonce != null) {
+            visibilityStyle.setAttribute('nonce', nonce);
+        }
         head.insertBefore(visibilityStyle, metaCharset ? metaCharset.nextSibling : head.firstChild);
     }
     // Process deferred connectedCallbacks now all components have been registered
@@ -1264,6 +1342,13 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
     // Fallback appLoad event
     endBootstrap();
 };
+/**
+ * Assigns the given value to the nonce property on the runtime platform object.
+ * During runtime, this value is used to set the nonce attribute on all dynamically created script and style tags.
+ * @param nonce The value to be assigned to the platform nonce property.
+ * @returns void
+ */
+const setNonce = (nonce) => (plt.$nonce$ = nonce);
 const hostRefs = /*@__PURE__*/ new WeakMap();
 const getHostRef = (ref) => hostRefs.get(ref);
 const registerInstance = (lazyInstance, hostRef) => hostRefs.set((hostRef.$lazyInstance$ = lazyInstance), hostRef);
@@ -1377,3 +1462,4 @@ exports.getElement = getElement;
 exports.h = h;
 exports.promiseResolve = promiseResolve;
 exports.registerInstance = registerInstance;
+exports.setNonce = setNonce;

package/dist/cjs/loader.cjs.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-90936275.js');
+const index = require('./index-0a1b6680.js');
 
 /*
- Stencil Client Patch Esm v2.20.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.22.2 | MIT Licensed | https://stenciljs.com
  */
 const patchEsm = () => {
     return index.promiseResolve();
@@ -18,4 +18,5 @@ const defineCustomElements = (win, options) => {
   });
 };
 
+exports.setNonce = index.setNonce;
 exports.defineCustomElements = defineCustomElements;

package/dist/cjs/mds-paginator.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-90936275.js');
+const index = require('./index-0a1b6680.js');
 
 const mdsPaginatorCss = ".fixed{position:fixed}.absolute{position:absolute}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--mds-paginator-background:rgb(var(--tone-neutral-09));display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:0.25rem}.pages{margin-left:0.5rem;margin-right:0.5rem;display:-ms-flexbox;display:flex;-ms-flex-negative:1;flex-shrink:1;-ms-flex-align:center;align-items:center;overflow:auto;scroll-behavior:smooth;border-radius:9999px;padding:0.5rem;background-color:var(--mds-paginator-background);gap:2px;}:host() .pages{-ms-overflow-style:none;scrollbar-width:none}.pages::-webkit-scrollbar{display:none}";
 
@@ -31,7 +31,9 @@ const MdsPaginator = class {
         return;
       }
       this.currentPage = selectedPage;
-      this.scrollPage();
+      if (this.pages > 2) {
+        this.scrollPage();
+      }
       this.pageChangedEvent.emit(this.currentPage);
     };
     this.pages = 0;
@@ -44,7 +46,7 @@ const MdsPaginator = class {
   }
   render() {
     return (index.h(index.Host, null, index.h("mds-paginator-item", { icon: "mi/baseline/arrow-back", disabled: this.currentPage === 1, onClick: () => this.goToPage(this.currentPage - 1) }), this.pages > 0 && index.h("mds-paginator-item", { active: this.currentPage === 1, onClick: () => this.goToPage(1) }, "1"), this.pages > 2 &&
-      index.h("div", { class: "pages" }, Array.from(Array(this.pages - 2).keys()).map(i => index.h("mds-paginator-item", { key: i, active: this.currentPage === i + 2, onClick: () => this.goToPage(i + 2) }, i + 2))), this.pages && index.h("mds-paginator-item", { active: this.currentPage === this.pages, onClick: () => this.goToPage(this.pages) }, this.pages), index.h("mds-paginator-item", { icon: "mi/baseline/arrow-forward", disabled: this.currentPage === this.pages, onClick: () => this.goToPage(this.currentPage + 1) })));
+      index.h("div", { class: "pages" }, Array.from(Array(this.pages - 2).keys()).map(i => index.h("mds-paginator-item", { key: i, active: this.currentPage === i + 2, onClick: () => this.goToPage(i + 2) }, i + 2))), this.pages > 1 && index.h("mds-paginator-item", { active: this.currentPage === this.pages, onClick: () => this.goToPage(this.pages) }, this.pages), index.h("mds-paginator-item", { icon: "mi/baseline/arrow-forward", disabled: this.currentPage === this.pages, onClick: () => this.goToPage(this.currentPage + 1) })));
   }
   get element() { return index.getElement(this); }
 };

package/dist/cjs/mds-paginator.cjs.js

@@ -1,9 +1,11 @@
 'use strict';
 
-const index = require('./index-90936275.js');
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-0a1b6680.js');
 
 /*
- Stencil Client Patch Browser v2.20.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.22.2 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('mds-paginator.cjs.js', document.baseURI).href));
@@ -17,3 +19,5 @@ const patchBrowser = () => {
 patchBrowser().then(options => {
   return index.bootstrapLazy([["mds-paginator.cjs",[[1,"mds-paginator",{"pages":[2],"currentPage":[1538,"current-page"]}]]]], options);
 });
+
+exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -4,8 +4,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.20.0",
-    "typescriptVersion": "4.8.4"
+    "version": "2.22.2",
+    "typescriptVersion": "4.9.4"
   },
   "collections": [],
   "bundles": []

package/dist/collection/components/mds-paginator/mds-paginator.js

@@ -22,7 +22,9 @@ export class MdsPaginator {
         return;
       }
       this.currentPage = selectedPage;
-      this.scrollPage();
+      if (this.pages > 2) {
+        this.scrollPage();
+      }
       this.pageChangedEvent.emit(this.currentPage);
     };
     this.pages = 0;
@@ -35,7 +37,7 @@ export class MdsPaginator {
   }
   render() {
     return (h(Host, null, h("mds-paginator-item", { icon: "mi/baseline/arrow-back", disabled: this.currentPage === 1, onClick: () => this.goToPage(this.currentPage - 1) }), this.pages > 0 && h("mds-paginator-item", { active: this.currentPage === 1, onClick: () => this.goToPage(1) }, "1"), this.pages > 2 &&
-      h("div", { class: "pages" }, Array.from(Array(this.pages - 2).keys()).map(i => h("mds-paginator-item", { key: i, active: this.currentPage === i + 2, onClick: () => this.goToPage(i + 2) }, i + 2))), this.pages && h("mds-paginator-item", { active: this.currentPage === this.pages, onClick: () => this.goToPage(this.pages) }, this.pages), h("mds-paginator-item", { icon: "mi/baseline/arrow-forward", disabled: this.currentPage === this.pages, onClick: () => this.goToPage(this.currentPage + 1) })));
+      h("div", { class: "pages" }, Array.from(Array(this.pages - 2).keys()).map(i => h("mds-paginator-item", { key: i, active: this.currentPage === i + 2, onClick: () => this.goToPage(i + 2) }, i + 2))), this.pages > 1 && h("mds-paginator-item", { active: this.currentPage === this.pages, onClick: () => this.goToPage(this.pages) }, this.pages), h("mds-paginator-item", { icon: "mi/baseline/arrow-forward", disabled: this.currentPage === this.pages, onClick: () => this.goToPage(this.currentPage + 1) })));
   }
   static get is() { return "mds-paginator"; }
   static get encapsulation() { return "shadow"; }

package/dist/components/index.d.ts

@@ -13,6 +13,15 @@ export { MdsPaginator as MdsPaginator } from '../types/components/mds-paginator/
  */
 export declare const setAssetPath: (path: string) => void;
 
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare const setNonce: (nonce: string) => void
+
 export interface SetPlatformOptions {
   raf?: (c: FrameRequestCallback) => number;
   ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;

package/dist/components/index.js

@@ -1,2 +1,2 @@
-export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
+export { setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
 export { MdsPaginator, defineCustomElement as defineCustomElementMdsPaginator } from './mds-paginator.js';

package/dist/components/mds-paginator.js

@@ -29,7 +29,9 @@ const MdsPaginator$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
         return;
       }
       this.currentPage = selectedPage;
-      this.scrollPage();
+      if (this.pages > 2) {
+        this.scrollPage();
+      }
       this.pageChangedEvent.emit(this.currentPage);
     };
     this.pages = 0;
@@ -42,7 +44,7 @@ const MdsPaginator$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   }
   render() {
     return (h(Host, null, h("mds-paginator-item", { icon: "mi/baseline/arrow-back", disabled: this.currentPage === 1, onClick: () => this.goToPage(this.currentPage - 1) }), this.pages > 0 && h("mds-paginator-item", { active: this.currentPage === 1, onClick: () => this.goToPage(1) }, "1"), this.pages > 2 &&
-      h("div", { class: "pages" }, Array.from(Array(this.pages - 2).keys()).map(i => h("mds-paginator-item", { key: i, active: this.currentPage === i + 2, onClick: () => this.goToPage(i + 2) }, i + 2))), this.pages && h("mds-paginator-item", { active: this.currentPage === this.pages, onClick: () => this.goToPage(this.pages) }, this.pages), h("mds-paginator-item", { icon: "mi/baseline/arrow-forward", disabled: this.currentPage === this.pages, onClick: () => this.goToPage(this.currentPage + 1) })));
+      h("div", { class: "pages" }, Array.from(Array(this.pages - 2).keys()).map(i => h("mds-paginator-item", { key: i, active: this.currentPage === i + 2, onClick: () => this.goToPage(i + 2) }, i + 2))), this.pages > 1 && h("mds-paginator-item", { active: this.currentPage === this.pages, onClick: () => this.goToPage(this.pages) }, this.pages), h("mds-paginator-item", { icon: "mi/baseline/arrow-forward", disabled: this.currentPage === this.pages, onClick: () => this.goToPage(this.currentPage + 1) })));
   }
   get element() { return this; }
   static get style() { return mdsPaginatorCss; }

package/dist/esm/{index-43f8698e.js → index-af99740b.js}

@@ -26,7 +26,7 @@ const uniqueTime = (key, measureText) => {
         };
     }
 };
-const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';
+const HYDRATED_CSS = '{visibility:hidden}[hydrated]{visibility:inherit}';
 /**
  * Default style mode id
  */
@@ -41,6 +41,18 @@ const isComplexType = (o) => {
     o = typeof o;
     return o === 'object' || o === 'function';
 };
+/**
+ * Helper method for querying a `meta` tag that contains a nonce value
+ * out of a DOM's head.
+ *
+ * @param doc The DOM containing the `head` to query against
+ * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag
+ * exists or the tag has no content.
+ */
+function queryNonceMetaTagContent(doc) {
+    var _a, _b, _c;
+    return (_c = (_b = (_a = doc.head) === null || _a === void 0 ? void 0 : _a.querySelector('meta[name="csp-nonce"]')) === null || _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined;
+}
 /**
  * Production h() function based on Preact by
  * Jason Miller (@developit)
@@ -49,7 +61,6 @@ const isComplexType = (o) => {
  *
  * Modified for Stencil's compiler and vdom
  */
-// const stack: any[] = [];
 // export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, child?: d.ChildType): d.VNode;
 // export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, ...children: d.ChildType[]): d.VNode;
 const h = (nodeName, vnodeData, ...children) => {
@@ -108,6 +119,14 @@ const h = (nodeName, vnodeData, ...children) => {
     }
     return vnode;
 };
+/**
+ * A utility function for creating a virtual DOM node from a tag and some
+ * possible text content.
+ *
+ * @param tag the tag for this element
+ * @param text possible text content for the node
+ * @returns a newly-minted virtual DOM node
+ */
 const newVNode = (tag, text) => {
     const vnode = {
         $flags$: 0,
@@ -125,6 +144,12 @@ const newVNode = (tag, text) => {
     return vnode;
 };
 const Host = {};
+/**
+ * Check whether a given node is a Host node or not
+ *
+ * @param node the virtual DOM node to check
+ * @returns whether it's a Host node or not
+ */
 const isHost = (node) => node && node.$tag$ === Host;
 /**
  * Parse a new property value for a given property type.
@@ -207,6 +232,7 @@ const registerStyle = (scopeId, cssText, allowCS) => {
     styles.set(scopeId, style);
 };
 const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
+    var _a;
     let scopeId = getScopeId(cmpMeta);
     const style = styles.get(scopeId);
     // if an element is NOT connected then getRootNode() will return the wrong root node
@@ -226,6 +252,11 @@ const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
                         styleElm = doc.createElement('style');
                         styleElm.innerHTML = style;
                     }
+                    // Apply CSP nonce to the style tag if it exists
+                    const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
+                    if (nonce != null) {
+                        styleElm.setAttribute('nonce', nonce);
+                    }
                     styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));
                 }
                 if (appliedStyles) {
@@ -426,6 +457,21 @@ const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
     }
     return elm;
 };
+/**
+ * Create DOM nodes corresponding to a list of {@link d.Vnode} objects and
+ * add them to the DOM in the appropriate place.
+ *
+ * @param parentElm the DOM node which should be used as a parent for the new
+ * DOM nodes
+ * @param before a child of the `parentElm` which the new children should be
+ * inserted before (optional)
+ * @param parentVNode the parent virtual DOM node
+ * @param vnodes the new child virtual DOM nodes to produce DOM nodes for
+ * @param startIdx the index in the child virtual DOM nodes at which to start
+ * creating DOM nodes (inclusive)
+ * @param endIdx the index in the child virtual DOM nodes at which to stop
+ * creating DOM nodes (inclusive)
+ */
 const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
     let containerElm = (parentElm);
     let childNode;
@@ -442,6 +488,19 @@ const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) =>
         }
     }
 };
+/**
+ * Remove the DOM elements corresponding to a list of {@link d.VNode} objects.
+ * This can be used to, for instance, clean up after a list of children which
+ * should no longer be shown.
+ *
+ * This function also handles some of Stencil's slot relocation logic.
+ *
+ * @param vnodes a list of virtual DOM nodes to remove
+ * @param startIdx the index at which to start removing nodes (inclusive)
+ * @param endIdx the index at which to stop removing nodes (inclusive)
+ * @param vnode a VNode
+ * @param elm an element
+ */
 const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
     for (; startIdx <= endIdx; ++startIdx) {
         if ((vnode = vnodes[startIdx])) {
@@ -670,7 +729,8 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
  *
  * So, in other words, if `key` attrs are not set on VNodes which may be
  * changing order within a `children` array or something along those lines then
- * we could obtain a false positive and then have to do needless re-rendering.
+ * we could obtain a false negative and then have to do needless re-rendering
+ * (i.e. we'd say two VNodes aren't equal when in fact they should be).
  *
  * @param leftVNode the first VNode to check
  * @param rightVNode the second VNode to check
@@ -734,6 +794,18 @@ const patch = (oldVNode, newVNode) => {
         elm.data = text;
     }
 };
+/**
+ * The main entry point for Stencil's virtual DOM-based rendering engine
+ *
+ * Given a {@link d.HostRef} container and some virtual DOM nodes, this
+ * function will handle creating a virtual DOM tree with a single root, patching
+ * the current virtual DOM tree onto an old one (if any), dealing with slot
+ * relocation, and reflecting attributes.
+ *
+ * @param hostRef data needed to root and render the virtual DOM tree, such as
+ * the DOM node into which it should be rendered.
+ * @param renderFnResults the virtual DOM nodes to be rendered
+ */
 const renderVdom = (hostRef, renderFnResults) => {
     const hostElm = hostRef.$hostElement$;
     const cmpMeta = hostRef.$cmpMeta$;
@@ -905,8 +977,8 @@ const safeCall = (instance, method, arg) => {
 const then = (promise, thenFn) => {
     return promise && promise.then ? promise.then(thenFn) : thenFn();
 };
-const addHydratedFlag = (elm) => elm.classList.add('hydrated')
-    ;
+const addHydratedFlag = (elm) => elm.setAttribute('hydrated', '')
+        ;
 const getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propName);
 const setValue = (ref, propName, newVal, cmpMeta) => {
     // check our new property value against our internal value
@@ -1151,6 +1223,7 @@ const disconnectedCallback = (elm) => {
     }
 };
 const bootstrapLazy = (lazyBundles, options = {}) => {
+    var _a;
     const endBootstrap = createTime();
     const cmpTags = [];
     const exclude = options.exclude || [];
@@ -1227,6 +1300,11 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
     {
         visibilityStyle.innerHTML = cmpTags + HYDRATED_CSS;
         visibilityStyle.setAttribute('data-styles', '');
+        // Apply CSP nonce to the style tag if it exists
+        const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
+        if (nonce != null) {
+            visibilityStyle.setAttribute('nonce', nonce);
+        }
         head.insertBefore(visibilityStyle, metaCharset ? metaCharset.nextSibling : head.firstChild);
     }
     // Process deferred connectedCallbacks now all components have been registered
@@ -1242,6 +1320,13 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
     // Fallback appLoad event
     endBootstrap();
 };
+/**
+ * Assigns the given value to the nonce property on the runtime platform object.
+ * During runtime, this value is used to set the nonce attribute on all dynamically created script and style tags.
+ * @param nonce The value to be assigned to the platform nonce property.
+ * @returns void
+ */
+const setNonce = (nonce) => (plt.$nonce$ = nonce);
 const hostRefs = /*@__PURE__*/ new WeakMap();
 const getHostRef = (ref) => hostRefs.get(ref);
 const registerInstance = (lazyInstance, hostRef) => hostRefs.set((hostRef.$lazyInstance$ = lazyInstance), hostRef);
@@ -1348,4 +1433,4 @@ const flush = () => {
 const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
 const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 
-export { Host as H, bootstrapLazy as b, createEvent as c, getElement as g, h, promiseResolve as p, registerInstance as r };
+export { Host as H, bootstrapLazy as b, createEvent as c, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };

package/dist/esm/loader.js

@@ -1,7 +1,8 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-43f8698e.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-af99740b.js';
+export { s as setNonce } from './index-af99740b.js';
 
 /*
- Stencil Client Patch Esm v2.20.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.22.2 | MIT Licensed | https://stenciljs.com
  */
 const patchEsm = () => {
     return promiseResolve();

package/dist/esm/mds-paginator.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-43f8698e.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-af99740b.js';
 
 const mdsPaginatorCss = ".fixed{position:fixed}.absolute{position:absolute}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--mds-paginator-background:rgb(var(--tone-neutral-09));display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:0.25rem}.pages{margin-left:0.5rem;margin-right:0.5rem;display:-ms-flexbox;display:flex;-ms-flex-negative:1;flex-shrink:1;-ms-flex-align:center;align-items:center;overflow:auto;scroll-behavior:smooth;border-radius:9999px;padding:0.5rem;background-color:var(--mds-paginator-background);gap:2px;}:host() .pages{-ms-overflow-style:none;scrollbar-width:none}.pages::-webkit-scrollbar{display:none}";
 
@@ -27,7 +27,9 @@ const MdsPaginator = class {
         return;
       }
       this.currentPage = selectedPage;
-      this.scrollPage();
+      if (this.pages > 2) {
+        this.scrollPage();
+      }
       this.pageChangedEvent.emit(this.currentPage);
     };
     this.pages = 0;
@@ -40,7 +42,7 @@ const MdsPaginator = class {
   }
   render() {
     return (h(Host, null, h("mds-paginator-item", { icon: "mi/baseline/arrow-back", disabled: this.currentPage === 1, onClick: () => this.goToPage(this.currentPage - 1) }), this.pages > 0 && h("mds-paginator-item", { active: this.currentPage === 1, onClick: () => this.goToPage(1) }, "1"), this.pages > 2 &&
-      h("div", { class: "pages" }, Array.from(Array(this.pages - 2).keys()).map(i => h("mds-paginator-item", { key: i, active: this.currentPage === i + 2, onClick: () => this.goToPage(i + 2) }, i + 2))), this.pages && h("mds-paginator-item", { active: this.currentPage === this.pages, onClick: () => this.goToPage(this.pages) }, this.pages), h("mds-paginator-item", { icon: "mi/baseline/arrow-forward", disabled: this.currentPage === this.pages, onClick: () => this.goToPage(this.currentPage + 1) })));
+      h("div", { class: "pages" }, Array.from(Array(this.pages - 2).keys()).map(i => h("mds-paginator-item", { key: i, active: this.currentPage === i + 2, onClick: () => this.goToPage(i + 2) }, i + 2))), this.pages > 1 && h("mds-paginator-item", { active: this.currentPage === this.pages, onClick: () => this.goToPage(this.pages) }, this.pages), h("mds-paginator-item", { icon: "mi/baseline/arrow-forward", disabled: this.currentPage === this.pages, onClick: () => this.goToPage(this.currentPage + 1) })));
   }
   get element() { return getElement(this); }
 };

package/dist/esm/mds-paginator.js

@@ -1,7 +1,8 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-43f8698e.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-af99740b.js';
+export { s as setNonce } from './index-af99740b.js';
 
 /*
- Stencil Client Patch Browser v2.20.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.22.2 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = import.meta.url;