@uh-design-system/component-library 0.4.1 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (102) hide show
  1. package/dist/cjs/component-library.cjs.js +3 -3
  2. package/dist/cjs/ds-accordion_3.cjs.entry.js +10 -10
  3. package/dist/cjs/ds-checkbox-group.cjs.entry.js +16 -17
  4. package/dist/cjs/ds-checkbox.cjs.entry.js +42 -35
  5. package/dist/cjs/ds-input-validity.cjs.entry.js +4 -6
  6. package/dist/cjs/ds-link-with-arrow.cjs.entry.js +5 -5
  7. package/dist/cjs/ds-link.cjs.entry.js +5 -5
  8. package/dist/cjs/ds-text-input.cjs.entry.js +51 -23
  9. package/dist/cjs/ds-visually-hidden.cjs.entry.js +2 -2
  10. package/dist/cjs/{index-b1d61146.js → index-bf84b124.js} +237 -134
  11. package/dist/cjs/index.cjs.js +8 -0
  12. package/dist/cjs/{linkUtils-e911e899.js → linkUtils-695da37c.js} +0 -10
  13. package/dist/cjs/loader.cjs.js +2 -2
  14. package/dist/cjs/store-9bd20f3c.js +207 -0
  15. package/dist/cjs/{utils-c9113835.js → utils-2ba5e075.js} +10 -0
  16. package/dist/collection/collection-manifest.json +2 -2
  17. package/dist/collection/components/00-foundations/types.js +1 -0
  18. package/dist/collection/components/01-base-components/ds-accordion/ds-accordion.js +6 -6
  19. package/dist/collection/components/01-base-components/ds-button/ds-button.js +1 -1
  20. package/dist/collection/components/01-base-components/ds-checkbox/ds-checkbox.css +1 -172
  21. package/dist/collection/components/01-base-components/ds-checkbox/ds-checkbox.js +68 -56
  22. package/dist/collection/components/01-base-components/ds-checkbox/stories/ds-checkbox.stories.js +1 -0
  23. package/dist/collection/components/01-base-components/ds-checkbox-group/ds-checkbox-group.css +1 -1
  24. package/dist/collection/components/01-base-components/ds-checkbox-group/ds-checkbox-group.js +27 -67
  25. package/dist/collection/components/01-base-components/ds-icon/ds-icon.js +1 -1
  26. package/dist/collection/components/01-base-components/ds-input-validity/ds-input-validity.js +6 -9
  27. package/dist/collection/components/01-base-components/ds-input-validity/stories/ds-input-validity.stories.js +1 -0
  28. package/dist/collection/components/01-base-components/ds-link/ds-link.css +0 -138
  29. package/dist/collection/components/01-base-components/ds-link/ds-link.js +4 -4
  30. package/dist/collection/components/01-base-components/ds-link/stories/ds-link.stories.js +4 -1
  31. package/dist/collection/components/01-base-components/ds-link-with-arrow/ds-link-with-arrow.css +0 -138
  32. package/dist/collection/components/01-base-components/ds-link-with-arrow/ds-link-with-arrow.js +4 -4
  33. package/dist/collection/components/01-base-components/ds-link-with-arrow/stories/ds-link-with-arrow.stories.js +4 -1
  34. package/dist/collection/components/01-base-components/ds-text-input/ds-text-input.js +73 -27
  35. package/dist/collection/components/01-base-components/ds-text-input/stories/ds-text-input.examples.stories.js +82 -13
  36. package/dist/collection/components/01-base-components/ds-text-input/stories/ds-text-input.stories.js +6 -7
  37. package/dist/collection/components/01-base-components/ds-text-input/utils.js +1 -10
  38. package/dist/collection/components/01-base-components/ds-visually-hidden/ds-visually-hidden.js +1 -1
  39. package/dist/collection/index.js +1 -1
  40. package/dist/collection/store.js +13 -0
  41. package/dist/collection/utils/link/linkUtils.js +0 -9
  42. package/dist/collection/utils/utils.js +9 -0
  43. package/dist/component-library/component-library.esm.js +1 -1
  44. package/dist/component-library/ds-accordion_3.entry.js +1 -1
  45. package/dist/component-library/ds-checkbox-group.entry.js +1 -1
  46. package/dist/component-library/ds-checkbox.entry.js +1 -1
  47. package/dist/component-library/ds-input-validity.entry.js +1 -1
  48. package/dist/component-library/ds-link-with-arrow.entry.js +1 -1
  49. package/dist/component-library/ds-link.entry.js +1 -1
  50. package/dist/component-library/ds-text-input.entry.js +1 -1
  51. package/dist/component-library/ds-visually-hidden.entry.js +1 -1
  52. package/dist/component-library/index-434995e1.js +2 -0
  53. package/dist/component-library/index.esm.js +1 -0
  54. package/dist/component-library/{linkUtils-fe63ff72.js → linkUtils-3d1b28cf.js} +1 -1
  55. package/dist/component-library/store-b8d17c10.js +1 -0
  56. package/dist/component-library/utils-5daa5bc0.js +1 -0
  57. package/dist/components/ds-accordion.js +6 -6
  58. package/dist/components/ds-button2.js +1 -1
  59. package/dist/components/ds-checkbox-group.js +22 -24
  60. package/dist/components/ds-checkbox2.js +44 -37
  61. package/dist/components/ds-icon2.js +11 -2
  62. package/dist/components/ds-input-validity2.js +5 -7
  63. package/dist/components/ds-link-with-arrow.js +4 -4
  64. package/dist/components/ds-link.js +4 -4
  65. package/dist/components/ds-text-input.js +57 -28
  66. package/dist/components/ds-visually-hidden2.js +1 -1
  67. package/dist/components/index.js +1 -0
  68. package/dist/components/index2.js +218 -136
  69. package/dist/components/linkUtils.js +1 -10
  70. package/dist/components/store.js +204 -0
  71. package/dist/esm/component-library.js +4 -4
  72. package/dist/esm/ds-accordion_3.entry.js +10 -10
  73. package/dist/esm/ds-checkbox-group.entry.js +16 -17
  74. package/dist/esm/ds-checkbox.entry.js +42 -35
  75. package/dist/esm/ds-input-validity.entry.js +4 -6
  76. package/dist/esm/ds-link-with-arrow.entry.js +5 -5
  77. package/dist/esm/ds-link.entry.js +5 -5
  78. package/dist/esm/ds-text-input.entry.js +51 -23
  79. package/dist/esm/ds-visually-hidden.entry.js +2 -2
  80. package/dist/esm/{index-aaccd233.js → index-434995e1.js} +236 -135
  81. package/dist/esm/index.js +2 -1
  82. package/dist/esm/{linkUtils-fe63ff72.js → linkUtils-3d1b28cf.js} +1 -10
  83. package/dist/esm/loader.js +3 -3
  84. package/dist/esm/store-b8d17c10.js +204 -0
  85. package/dist/esm/{utils-b5843ae1.js → utils-5daa5bc0.js} +10 -1
  86. package/dist/types/components/00-foundations/types.d.ts +3 -0
  87. package/dist/types/components/01-base-components/ds-checkbox/ds-checkbox.d.ts +14 -14
  88. package/dist/types/components/01-base-components/ds-checkbox-group/ds-checkbox-group.d.ts +14 -16
  89. package/dist/types/components/01-base-components/ds-input-validity/ds-input-validity.d.ts +1 -1
  90. package/dist/types/components/01-base-components/ds-link/ds-link.d.ts +1 -1
  91. package/dist/types/components/01-base-components/ds-link-with-arrow/ds-link-with-arrow.d.ts +1 -1
  92. package/dist/types/components/01-base-components/ds-text-input/ds-text-input.d.ts +17 -8
  93. package/dist/types/components/01-base-components/ds-text-input/stories/ds-text-input.examples.stories.d.ts +1 -0
  94. package/dist/types/components/01-base-components/ds-text-input/utils.d.ts +1 -1
  95. package/dist/types/components.d.ts +42 -28
  96. package/dist/types/index.d.ts +1 -0
  97. package/dist/types/store.d.ts +10 -0
  98. package/dist/types/utils/link/linkUtils.d.ts +0 -1
  99. package/dist/types/utils/utils.d.ts +1 -0
  100. package/package.json +19 -18
  101. package/dist/component-library/index-aaccd233.js +0 -2
  102. package/dist/component-library/utils-b5843ae1.js +0 -1
@@ -1,8 +1,8 @@
1
1
  const NAMESPACE = 'component-library';
2
- const BUILD = /* component-library */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: true, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: false, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: true, hasRenderFn: true, hostListener: true, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: false, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, modernPropertyDecls: true, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: false, scoped: true, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: false, taskQueue: true, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
2
+ const BUILD = /* component-library */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, constructableCSS: true, cssAnnotations: true, devTools: false, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: true, hasRenderFn: true, hostListener: true, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: false, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, modernPropertyDecls: true, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: false, scoped: true, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: false, taskQueue: true, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
3
3
 
4
4
  /*
5
- Stencil Client Platform v4.26.0 | MIT Licensed | https://stenciljs.com
5
+ Stencil Client Platform v4.27.2 | MIT Licensed | https://stenciljs.com
6
6
  */
7
7
  var __defProp = Object.defineProperty;
8
8
  var __export = (target, all) => {
@@ -35,9 +35,12 @@ var reWireGetterSetter = (instance, hostRef) => {
35
35
  };
36
36
 
37
37
  // src/client/client-host-ref.ts
38
- var hostRefs = /* @__PURE__ */ new WeakMap();
39
- var deleteHostRef = (ref) => hostRefs.delete(ref);
40
- var getHostRef = (ref) => hostRefs.get(ref);
38
+ var getHostRef = (ref) => {
39
+ if (ref.__stencil__getHostRef) {
40
+ return ref.__stencil__getHostRef();
41
+ }
42
+ return void 0;
43
+ };
41
44
  var registerHost = (hostElement, cmpMeta) => {
42
45
  const hostRef = {
43
46
  $flags$: 0,
@@ -50,7 +53,8 @@ var registerHost = (hostElement, cmpMeta) => {
50
53
  hostElement["s-p"] = [];
51
54
  hostElement["s-rc"] = [];
52
55
  }
53
- const ref = hostRefs.set(hostElement, hostRef);
56
+ const ref = hostRef;
57
+ hostElement.__stencil__getHostRef = () => ref;
54
58
  {
55
59
  reWireGetterSetter(hostElement, hostRef);
56
60
  }
@@ -71,7 +75,6 @@ var FORM_ASSOCIATED_CUSTOM_ELEMENT_CALLBACKS = [
71
75
  "formStateRestoreCallback"
72
76
  ];
73
77
  var win = typeof window !== "undefined" ? window : {};
74
- var doc = win.document || { head: {} };
75
78
  var H = win.HTMLElement || class {
76
79
  };
77
80
  var plt = {
@@ -84,9 +87,10 @@ var plt = {
84
87
  ce: (eventName, opts) => new CustomEvent(eventName, opts)
85
88
  };
86
89
  var supportsListenerOptions = /* @__PURE__ */ (() => {
90
+ var _a;
87
91
  let supportsListenerOptions2 = false;
88
92
  try {
89
- doc.addEventListener(
93
+ (_a = win.document) == null ? void 0 : _a.addEventListener(
90
94
  "e",
91
95
  null,
92
96
  Object.defineProperty({}, "passive", {
@@ -159,9 +163,9 @@ var isComplexType = (o) => {
159
163
  };
160
164
 
161
165
  // src/utils/query-nonce-meta-tag-content.ts
162
- function queryNonceMetaTagContent(doc2) {
166
+ function queryNonceMetaTagContent(doc) {
163
167
  var _a, _b, _c;
164
- return (_c = (_b = (_a = doc2.head) == null ? void 0 : _a.querySelector('meta[name="csp-nonce"]')) == null ? void 0 : _b.getAttribute("content")) != null ? _c : void 0;
168
+ return (_c = (_b = (_a = doc.head) == null ? void 0 : _a.querySelector('meta[name="csp-nonce"]')) == null ? void 0 : _b.getAttribute("content")) != null ? _c : void 0;
165
169
  }
166
170
 
167
171
  // src/utils/result.ts
@@ -213,12 +217,11 @@ var unwrapErr = (result) => {
213
217
  }
214
218
  };
215
219
  var updateFallbackSlotVisibility = (elm) => {
216
- const childNodes = elm.__childNodes || elm.childNodes;
220
+ const childNodes = internalCall(elm, "childNodes");
217
221
  if (elm.tagName && elm.tagName.includes("-") && elm["s-cr"] && elm.tagName !== "SLOT-FB") {
218
222
  getHostSlotNodes(childNodes, elm.tagName).forEach((slotNode) => {
219
- var _a;
220
223
  if (slotNode.nodeType === 1 /* ElementNode */ && slotNode.tagName === "SLOT-FB") {
221
- if ((_a = getHostSlotChildNodes(slotNode, slotNode["s-sn"], false)) == null ? void 0 : _a.length) {
224
+ if (getSlotChildSiblings(slotNode, getSlotName(slotNode), false).length) {
222
225
  slotNode.hidden = true;
223
226
  } else {
224
227
  slotNode.hidden = false;
@@ -226,19 +229,31 @@ var updateFallbackSlotVisibility = (elm) => {
226
229
  }
227
230
  });
228
231
  }
229
- for (const childNode of childNodes) {
230
- if (childNode.nodeType === 1 /* ElementNode */ && (childNode.__childNodes || childNode.childNodes).length) {
232
+ let i2 = 0;
233
+ for (i2 = 0; i2 < childNodes.length; i2++) {
234
+ const childNode = childNodes[i2];
235
+ if (childNode.nodeType === 1 /* ElementNode */ && internalCall(childNode, "childNodes").length) {
231
236
  updateFallbackSlotVisibility(childNode);
232
237
  }
233
238
  }
234
239
  };
240
+ var getSlottedChildNodes = (childNodes) => {
241
+ const result = [];
242
+ for (let i2 = 0; i2 < childNodes.length; i2++) {
243
+ const slottedNode = childNodes[i2]["s-nr"] || void 0;
244
+ if (slottedNode && slottedNode.isConnected) {
245
+ result.push(slottedNode);
246
+ }
247
+ }
248
+ return result;
249
+ };
235
250
  function getHostSlotNodes(childNodes, hostName, slotName) {
236
251
  let i2 = 0;
237
252
  let slottedNodes = [];
238
253
  let childNode;
239
254
  for (; i2 < childNodes.length; i2++) {
240
255
  childNode = childNodes[i2];
241
- if (childNode["s-sr"] && childNode["s-hn"] === hostName && (slotName === void 0 || childNode["s-sn"] === slotName)) {
256
+ if (childNode["s-sr"] && (!hostName || childNode["s-hn"] === hostName) && (slotName === void 0 || getSlotName(childNode) === slotName)) {
242
257
  slottedNodes.push(childNode);
243
258
  if (typeof slotName !== "undefined") return slottedNodes;
244
259
  }
@@ -246,11 +261,12 @@ function getHostSlotNodes(childNodes, hostName, slotName) {
246
261
  }
247
262
  return slottedNodes;
248
263
  }
249
- var getHostSlotChildNodes = (node, slotName, includeSlot = true) => {
264
+ var getSlotChildSiblings = (slot, slotName, includeSlot = true) => {
250
265
  const childNodes = [];
251
- if (includeSlot && node["s-sr"] || !node["s-sr"]) childNodes.push(node);
252
- while ((node = node.nextSibling) && node["s-sn"] === slotName) {
253
- childNodes.push(node);
266
+ if (includeSlot && slot["s-sr"] || !slot["s-sr"]) childNodes.push(slot);
267
+ let node = slot;
268
+ while (node = node.nextSibling) {
269
+ if (getSlotName(node) === slotName && (includeSlot || !node["s-sr"])) childNodes.push(node);
254
270
  }
255
271
  return childNodes;
256
272
  };
@@ -269,6 +285,44 @@ var isNodeLocatedInSlot = (nodeToRelocate, slotName) => {
269
285
  }
270
286
  return slotName === "";
271
287
  };
288
+ var getSlotName = (node) => typeof node["s-sn"] === "string" ? node["s-sn"] : node.nodeType === 1 && node.getAttribute("slot") || void 0;
289
+ function patchSlotNode(node) {
290
+ if (node.assignedElements || node.assignedNodes || !node["s-sr"]) return;
291
+ const assignedFactory = (elementsOnly) => (function(opts) {
292
+ const toReturn = [];
293
+ const slotName = this["s-sn"];
294
+ if (opts == null ? void 0 : opts.flatten) {
295
+ console.error(`
296
+ Flattening is not supported for Stencil non-shadow slots.
297
+ You can use \`.childNodes\` to nested slot fallback content.
298
+ If you have a particular use case, please open an issue on the Stencil repo.
299
+ `);
300
+ }
301
+ const parent = this["s-cr"].parentElement;
302
+ const slottedNodes = parent.__childNodes ? parent.childNodes : getSlottedChildNodes(parent.childNodes);
303
+ slottedNodes.forEach((n) => {
304
+ if (slotName === getSlotName(n)) {
305
+ toReturn.push(n);
306
+ }
307
+ });
308
+ if (elementsOnly) {
309
+ return toReturn.filter((n) => n.nodeType === 1 /* ElementNode */);
310
+ }
311
+ return toReturn;
312
+ }).bind(node);
313
+ node.assignedElements = assignedFactory(true);
314
+ node.assignedNodes = assignedFactory(false);
315
+ }
316
+ function internalCall(node, method) {
317
+ if ("__" + method in node) {
318
+ const toReturn = node["__" + method];
319
+ if (typeof toReturn !== "function") return toReturn;
320
+ return toReturn.bind(node);
321
+ } else {
322
+ if (typeof node[method] !== "function") return node[method];
323
+ return node[method].bind(node);
324
+ }
325
+ }
272
326
  var createTime = (fnName, tagName = "") => {
273
327
  {
274
328
  return () => {
@@ -442,7 +496,10 @@ var addStyle = (styleContainerNode, cmpMeta, mode) => {
442
496
  var _a;
443
497
  const scopeId2 = getScopeId(cmpMeta);
444
498
  const style = styles.get(scopeId2);
445
- styleContainerNode = styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : doc;
499
+ if (!win.document) {
500
+ return scopeId2;
501
+ }
502
+ styleContainerNode = styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : win.document;
446
503
  if (style) {
447
504
  if (typeof style === "string") {
448
505
  styleContainerNode = styleContainerNode.head || styleContainerNode;
@@ -453,9 +510,9 @@ var addStyle = (styleContainerNode, cmpMeta, mode) => {
453
510
  }
454
511
  if (!appliedStyles.has(scopeId2)) {
455
512
  {
456
- styleElm = document.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId2}"]`) || doc.createElement("style");
513
+ styleElm = document.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId2}"]`) || win.document.createElement("style");
457
514
  styleElm.innerHTML = style;
458
- const nonce = (_a = plt.$nonce$) != null ? _a : queryNonceMetaTagContent(doc);
515
+ const nonce = (_a = plt.$nonce$) != null ? _a : queryNonceMetaTagContent(win.document);
459
516
  if (nonce != null) {
460
517
  styleElm.setAttribute("nonce", nonce);
461
518
  }
@@ -517,104 +574,105 @@ var attachStyles = (hostRef) => {
517
574
  };
518
575
  var getScopeId = (cmp, mode) => "sc-" + (cmp.$tagName$);
519
576
  var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRender) => {
520
- if (oldValue !== newValue) {
521
- let isProp = isMemberInElement(elm, memberName);
522
- let ln = memberName.toLowerCase();
523
- if (memberName === "class") {
524
- const classList = elm.classList;
525
- const oldClasses = parseClassList(oldValue);
526
- let newClasses = parseClassList(newValue);
527
- {
528
- classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
529
- classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
530
- }
531
- } else if (memberName === "style") {
532
- {
533
- for (const prop in oldValue) {
534
- if (!newValue || newValue[prop] == null) {
535
- if (prop.includes("-")) {
536
- elm.style.removeProperty(prop);
537
- } else {
538
- elm.style[prop] = "";
539
- }
540
- }
541
- }
542
- }
543
- for (const prop in newValue) {
544
- if (!oldValue || newValue[prop] !== oldValue[prop]) {
577
+ if (oldValue === newValue) {
578
+ return;
579
+ }
580
+ let isProp = isMemberInElement(elm, memberName);
581
+ let ln = memberName.toLowerCase();
582
+ if (memberName === "class") {
583
+ const classList = elm.classList;
584
+ const oldClasses = parseClassList(oldValue);
585
+ let newClasses = parseClassList(newValue);
586
+ {
587
+ classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
588
+ classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
589
+ }
590
+ } else if (memberName === "style") {
591
+ {
592
+ for (const prop in oldValue) {
593
+ if (!newValue || newValue[prop] == null) {
545
594
  if (prop.includes("-")) {
546
- elm.style.setProperty(prop, newValue[prop]);
595
+ elm.style.removeProperty(prop);
547
596
  } else {
548
- elm.style[prop] = newValue[prop];
597
+ elm.style[prop] = "";
549
598
  }
550
599
  }
551
600
  }
552
- } else if (memberName === "key") ; else if (memberName === "ref") {
553
- if (newValue) {
554
- newValue(elm);
555
- }
556
- } else if ((!elm.__lookupSetter__(memberName)) && memberName[0] === "o" && memberName[1] === "n") {
557
- if (memberName[2] === "-") {
558
- memberName = memberName.slice(3);
559
- } else if (isMemberInElement(win, ln)) {
560
- memberName = ln.slice(2);
561
- } else {
562
- memberName = ln[2] + memberName.slice(3);
563
- }
564
- if (oldValue || newValue) {
565
- const capture = memberName.endsWith(CAPTURE_EVENT_SUFFIX);
566
- memberName = memberName.replace(CAPTURE_EVENT_REGEX, "");
567
- if (oldValue) {
568
- plt.rel(elm, memberName, oldValue, capture);
569
- }
570
- if (newValue) {
571
- plt.ael(elm, memberName, newValue, capture);
601
+ }
602
+ for (const prop in newValue) {
603
+ if (!oldValue || newValue[prop] !== oldValue[prop]) {
604
+ if (prop.includes("-")) {
605
+ elm.style.setProperty(prop, newValue[prop]);
606
+ } else {
607
+ elm.style[prop] = newValue[prop];
572
608
  }
573
609
  }
610
+ }
611
+ } else if (memberName === "key") ; else if (memberName === "ref") {
612
+ if (newValue) {
613
+ newValue(elm);
614
+ }
615
+ } else if ((!elm.__lookupSetter__(memberName)) && memberName[0] === "o" && memberName[1] === "n") {
616
+ if (memberName[2] === "-") {
617
+ memberName = memberName.slice(3);
618
+ } else if (isMemberInElement(win, ln)) {
619
+ memberName = ln.slice(2);
574
620
  } else {
575
- const isComplex = isComplexType(newValue);
576
- if ((isProp || isComplex && newValue !== null) && !isSvg) {
577
- try {
578
- if (!elm.tagName.includes("-")) {
579
- const n = newValue == null ? "" : newValue;
580
- if (memberName === "list") {
581
- isProp = false;
582
- } else if (oldValue == null || elm[memberName] != n) {
583
- if (typeof elm.__lookupSetter__(memberName) === "function") {
584
- elm[memberName] = n;
585
- } else {
586
- elm.setAttribute(memberName, n);
587
- }
621
+ memberName = ln[2] + memberName.slice(3);
622
+ }
623
+ if (oldValue || newValue) {
624
+ const capture = memberName.endsWith(CAPTURE_EVENT_SUFFIX);
625
+ memberName = memberName.replace(CAPTURE_EVENT_REGEX, "");
626
+ if (oldValue) {
627
+ plt.rel(elm, memberName, oldValue, capture);
628
+ }
629
+ if (newValue) {
630
+ plt.ael(elm, memberName, newValue, capture);
631
+ }
632
+ }
633
+ } else {
634
+ const isComplex = isComplexType(newValue);
635
+ if ((isProp || isComplex && newValue !== null) && !isSvg) {
636
+ try {
637
+ if (!elm.tagName.includes("-")) {
638
+ const n = newValue == null ? "" : newValue;
639
+ if (memberName === "list") {
640
+ isProp = false;
641
+ } else if (oldValue == null || elm[memberName] != n) {
642
+ if (typeof elm.__lookupSetter__(memberName) === "function") {
643
+ elm[memberName] = n;
644
+ } else {
645
+ elm.setAttribute(memberName, n);
588
646
  }
589
- } else if (elm[memberName] !== newValue) {
590
- elm[memberName] = newValue;
591
647
  }
592
- } catch (e) {
648
+ } else if (elm[memberName] !== newValue) {
649
+ elm[memberName] = newValue;
593
650
  }
651
+ } catch (e) {
594
652
  }
595
- let xlink = false;
596
- {
597
- if (ln !== (ln = ln.replace(/^xlink\:?/, ""))) {
598
- memberName = ln;
599
- xlink = true;
600
- }
653
+ }
654
+ let xlink = false;
655
+ {
656
+ if (ln !== (ln = ln.replace(/^xlink\:?/, ""))) {
657
+ memberName = ln;
658
+ xlink = true;
601
659
  }
602
- if (newValue == null || newValue === false) {
603
- if (newValue !== false || elm.getAttribute(memberName) === "") {
604
- if (xlink) {
605
- elm.removeAttributeNS(XLINK_NS, memberName);
606
- } else {
607
- elm.removeAttribute(memberName);
608
- }
609
- }
610
- } else if ((!isProp || flags & 4 /* isHost */ || isSvg) && !isComplex) {
611
- newValue = newValue === true ? "" : newValue;
660
+ }
661
+ if (newValue == null || newValue === false) {
662
+ if (newValue !== false || elm.getAttribute(memberName) === "") {
612
663
  if (xlink) {
613
- elm.setAttributeNS(XLINK_NS, memberName, newValue);
664
+ elm.removeAttributeNS(XLINK_NS, memberName);
614
665
  } else {
615
- elm.setAttribute(memberName, newValue);
666
+ elm.removeAttribute(memberName);
616
667
  }
617
668
  }
669
+ } else if ((!isProp || flags & 4 /* isHost */ || isSvg) && !isComplex && elm.nodeType === 1 /* ElementNode */) {
670
+ newValue = newValue === true ? "" : newValue;
671
+ if (xlink) {
672
+ elm.setAttributeNS(XLINK_NS, memberName, newValue);
673
+ } else {
674
+ elm.setAttribute(memberName, newValue);
675
+ }
618
676
  }
619
677
  }
620
678
  };
@@ -700,11 +758,19 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
700
758
  }
701
759
  }
702
760
  if (newVNode2.$text$ !== null) {
703
- elm = newVNode2.$elm$ = doc.createTextNode(newVNode2.$text$);
761
+ elm = newVNode2.$elm$ = win.document.createTextNode(newVNode2.$text$);
704
762
  } else if (newVNode2.$flags$ & 1 /* isSlotReference */) {
705
- elm = newVNode2.$elm$ = doc.createTextNode("");
763
+ elm = newVNode2.$elm$ = win.document.createTextNode("");
764
+ {
765
+ updateElement(null, newVNode2, isSvgMode);
766
+ }
706
767
  } else {
707
- elm = newVNode2.$elm$ = doc.createElement(
768
+ if (!win.document) {
769
+ throw new Error(
770
+ "You are trying to render a Stencil component in an environment that doesn't support the DOM. Make sure to populate the [`window`](https://developer.mozilla.org/en-US/docs/Web/API/Window/window) object before rendering a component."
771
+ );
772
+ }
773
+ elm = newVNode2.$elm$ = win.document.createElement(
708
774
  !useNativeShadowDom && BUILD.slotRelocation && newVNode2.$flags$ & 2 /* isSlotFallback */ ? "slot-fb" : newVNode2.$tag$
709
775
  );
710
776
  {
@@ -729,6 +795,7 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
729
795
  elm["s-cr"] = contentRef;
730
796
  elm["s-sn"] = newVNode2.$name$ || "";
731
797
  elm["s-rf"] = (_a = newVNode2.$attrs$) == null ? void 0 : _a.ref;
798
+ patchSlotNode(elm);
732
799
  oldVNode = oldParentVNode && oldParentVNode.$children$ && oldParentVNode.$children$[childIndex];
733
800
  if (oldVNode && oldVNode.$tag$ === newVNode2.$tag$ && oldParentVNode.$elm$) {
734
801
  {
@@ -918,14 +985,11 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
918
985
  const elm = newVNode2.$elm$ = oldVNode.$elm$;
919
986
  const oldChildren = oldVNode.$children$;
920
987
  const newChildren = newVNode2.$children$;
921
- const tag = newVNode2.$tag$;
922
988
  const text = newVNode2.$text$;
923
989
  let defaultHolder;
924
990
  if (text === null) {
925
991
  {
926
- if (tag === "slot" && !useNativeShadowDom) ; else {
927
- updateElement(oldVNode, newVNode2, isSvgMode);
928
- }
992
+ updateElement(oldVNode, newVNode2, isSvgMode);
929
993
  }
930
994
  if (oldChildren !== null && newChildren !== null) {
931
995
  updateChildren(elm, oldChildren, newVNode2, newChildren, isInitialRender);
@@ -1064,8 +1128,8 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
1064
1128
  markSlotContentForRelocation(rootVnode.$elm$);
1065
1129
  for (const relocateData of relocateNodes) {
1066
1130
  const nodeToRelocate = relocateData.$nodeToRelocate$;
1067
- if (!nodeToRelocate["s-ol"]) {
1068
- const orgLocationNode = doc.createTextNode("");
1131
+ if (!nodeToRelocate["s-ol"] && win.document) {
1132
+ const orgLocationNode = win.document.createTextNode("");
1069
1133
  orgLocationNode["s-nr"] = nodeToRelocate;
1070
1134
  insertBefore(nodeToRelocate.parentNode, nodeToRelocate["s-ol"] = orgLocationNode, nodeToRelocate);
1071
1135
  }
@@ -1106,7 +1170,7 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
1106
1170
  }
1107
1171
  }
1108
1172
  }
1109
- nodeToRelocate && typeof slotRefNode["s-rf"] === "function" && slotRefNode["s-rf"](nodeToRelocate);
1173
+ nodeToRelocate && typeof slotRefNode["s-rf"] === "function" && slotRefNode["s-rf"](slotRefNode);
1110
1174
  } else {
1111
1175
  if (nodeToRelocate.nodeType === 1 /* ElementNode */) {
1112
1176
  if (isInitialLoad) {
@@ -1162,10 +1226,11 @@ var dispatchHooks = (hostRef, isInitialLoad) => {
1162
1226
  }
1163
1227
  let maybePromise;
1164
1228
  if (isInitialLoad) {
1165
- {
1166
- maybePromise = safeCall(instance, "componentWillLoad", void 0, elm);
1167
- }
1229
+ maybePromise = safeCall(instance, "componentWillLoad", void 0, elm);
1230
+ } else {
1231
+ maybePromise = safeCall(instance, "componentWillUpdate", void 0, elm);
1168
1232
  }
1233
+ maybePromise = enqueue(maybePromise, () => safeCall(instance, "componentWillRender", void 0, elm));
1169
1234
  endSchedule();
1170
1235
  return enqueue(maybePromise, () => updateComponent(hostRef, instance, isInitialLoad));
1171
1236
  };
@@ -1204,8 +1269,10 @@ var updateComponent = async (hostRef, instance, isInitialLoad) => {
1204
1269
  }
1205
1270
  }
1206
1271
  };
1272
+ var renderingRef = null;
1207
1273
  var callRender = (hostRef, instance, elm, isInitialLoad) => {
1208
1274
  try {
1275
+ renderingRef = instance;
1209
1276
  instance = instance.render() ;
1210
1277
  {
1211
1278
  hostRef.$flags$ &= ~16 /* isQueuedForUpdate */;
@@ -1223,22 +1290,23 @@ var callRender = (hostRef, instance, elm, isInitialLoad) => {
1223
1290
  } catch (e) {
1224
1291
  consoleError(e, hostRef.$hostElement$);
1225
1292
  }
1293
+ renderingRef = null;
1226
1294
  return null;
1227
1295
  };
1296
+ var getRenderingRef = () => renderingRef;
1228
1297
  var postUpdateComponent = (hostRef) => {
1229
1298
  const tagName = hostRef.$cmpMeta$.$tagName$;
1230
1299
  const elm = hostRef.$hostElement$;
1231
1300
  const endPostUpdate = createTime("postUpdate", tagName);
1232
1301
  const instance = elm;
1233
1302
  const ancestorComponent = hostRef.$ancestorComponent$;
1303
+ safeCall(instance, "componentDidRender", void 0, elm);
1234
1304
  if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
1235
1305
  hostRef.$flags$ |= 64 /* hasLoadedComponent */;
1236
1306
  {
1237
1307
  addHydratedFlag(elm);
1238
1308
  }
1239
- {
1240
- safeCall(instance, "componentDidLoad", void 0, elm);
1241
- }
1309
+ safeCall(instance, "componentDidLoad", void 0, elm);
1242
1310
  endPostUpdate();
1243
1311
  {
1244
1312
  hostRef.$onReadyResolve$(elm);
@@ -1247,9 +1315,7 @@ var postUpdateComponent = (hostRef) => {
1247
1315
  }
1248
1316
  }
1249
1317
  } else {
1250
- {
1251
- safeCall(instance, "componentDidUpdate", void 0, elm);
1252
- }
1318
+ safeCall(instance, "componentDidUpdate", void 0, elm);
1253
1319
  endPostUpdate();
1254
1320
  }
1255
1321
  {
@@ -1263,6 +1329,16 @@ var postUpdateComponent = (hostRef) => {
1263
1329
  hostRef.$flags$ &= ~(4 /* isWaitingForChildren */ | 512 /* needsRerender */);
1264
1330
  }
1265
1331
  };
1332
+ var forceUpdate = (ref) => {
1333
+ {
1334
+ const hostRef = getHostRef(ref);
1335
+ const isConnected = hostRef.$hostElement$.isConnected;
1336
+ if (isConnected && (hostRef.$flags$ & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
1337
+ scheduleUpdate(hostRef, false);
1338
+ }
1339
+ return isConnected;
1340
+ }
1341
+ };
1266
1342
  var appDidLoad = (who) => {
1267
1343
  nextTick(() => emitEvent(win, "appload", { detail: { namespace: NAMESPACE } }));
1268
1344
  };
@@ -1308,6 +1384,11 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
1308
1384
  }
1309
1385
  }
1310
1386
  if ((flags & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
1387
+ if (instance.componentShouldUpdate) {
1388
+ if (instance.componentShouldUpdate(newVal, oldVal, propName) === false) {
1389
+ return;
1390
+ }
1391
+ }
1311
1392
  scheduleUpdate(hostRef, false);
1312
1393
  }
1313
1394
  }
@@ -1510,7 +1591,10 @@ var connectedCallback = (elm) => {
1510
1591
  }
1511
1592
  };
1512
1593
  var setContentReference = (elm) => {
1513
- const contentRefElm = elm["s-cr"] = doc.createComment(
1594
+ if (!win.document) {
1595
+ return;
1596
+ }
1597
+ const contentRefElm = elm["s-cr"] = win.document.createComment(
1514
1598
  ""
1515
1599
  );
1516
1600
  contentRefElm["s-cn"] = true;
@@ -1547,6 +1631,8 @@ var proxyCustomElement = (Cstr, compactMeta) => {
1547
1631
  {
1548
1632
  cmpMeta.$watchers$ = Cstr.$watchers$;
1549
1633
  }
1634
+ const originalConnectedCallback = Cstr.prototype.connectedCallback;
1635
+ const originalDisconnectedCallback = Cstr.prototype.disconnectedCallback;
1550
1636
  Object.assign(Cstr.prototype, {
1551
1637
  __hasHostListenerAttached: false,
1552
1638
  __registerHost() {
@@ -1559,19 +1645,15 @@ var proxyCustomElement = (Cstr, compactMeta) => {
1559
1645
  this.__hasHostListenerAttached = true;
1560
1646
  }
1561
1647
  connectedCallback(this);
1648
+ if (originalConnectedCallback) {
1649
+ originalConnectedCallback.call(this);
1650
+ }
1562
1651
  },
1563
1652
  disconnectedCallback() {
1564
1653
  disconnectedCallback(this);
1565
- plt.raf(() => {
1566
- var _a;
1567
- const hostRef = getHostRef(this);
1568
- if (((_a = hostRef == null ? void 0 : hostRef.$vnode$) == null ? void 0 : _a.$elm$) instanceof Node && !hostRef.$vnode$.$elm$.isConnected) {
1569
- delete hostRef.$vnode$;
1570
- }
1571
- if (this instanceof Node && !this.isConnected) {
1572
- deleteHostRef(this);
1573
- }
1574
- });
1654
+ if (originalDisconnectedCallback) {
1655
+ originalDisconnectedCallback.call(this);
1656
+ }
1575
1657
  },
1576
1658
  __attachShadow() {
1577
1659
  {
@@ -1596,7 +1678,7 @@ var proxyCustomElement = (Cstr, compactMeta) => {
1596
1678
  // src/runtime/fragment.ts
1597
1679
  var Fragment = (_, children) => children;
1598
1680
  var addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
1599
- if (listeners) {
1681
+ if (listeners && win.document) {
1600
1682
  listeners.map(([flags, name, method]) => {
1601
1683
  const target = elm;
1602
1684
  const handler = hostListenerProxy(hostRef, method);
@@ -1626,4 +1708,4 @@ var setNonce = (nonce) => plt.$nonce$ = nonce;
1626
1708
  // src/runtime/platform-options.ts
1627
1709
  var setPlatformOptions = (opts) => Object.assign(plt, opts);
1628
1710
 
1629
- export { Fragment as F, H, setNonce as a, setPlatformOptions as b, createEvent as c, getAssetPath as g, h, proxyCustomElement as p, setAssetPath as s };
1711
+ export { Fragment as F, H, setNonce as a, setPlatformOptions as b, getRenderingRef as c, createEvent as d, forceUpdate as f, getAssetPath as g, h, proxyCustomElement as p, setAssetPath as s };
@@ -9,14 +9,5 @@ const visuallyHiddenAssistiveText = (lang) => {
9
9
  return 'Opens in a new tab';
10
10
  }
11
11
  };
12
- const getAriaLabel = (text, ariaLabel) => {
13
- if (!ariaLabel) {
14
- return undefined;
15
- }
16
- if (ariaLabel.startsWith(text)) {
17
- return ariaLabel;
18
- }
19
- return [text, ariaLabel].join(' ');
20
- };
21
12
 
22
- export { getAriaLabel as g, opensInNewTab as o, visuallyHiddenAssistiveText as v };
13
+ export { opensInNewTab as o, visuallyHiddenAssistiveText as v };