@phatvu/web-component-poc 1.0.2 → 1.0.4

package/hydrate/index.js

@@ -132,7 +132,7 @@ function hydrateFactory($stencilWindow, $stencilHydrateOpts, $stencilHydrateResu
 
 
 const NAMESPACE = 'web-component-poc';
-const BUILD = /* web-component-poc */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", prop: true, propChangeCallback: false, slotRelocation: true, updatable: true};
+const BUILD = /* web-component-poc */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", prop: true, propChangeCallback: false, shadowDom: false, slotRelocation: true, updatable: true};
 
 /*
  Stencil Hydrate Platform v4.43.2 | MIT Licensed | https://stenciljs.com
@@ -732,21 +732,13 @@ var addStyle = (styleContainerNode, cmpMeta, mode) => {
 var attachStyles = (hostRef) => {
   const cmpMeta = hostRef.$cmpMeta$;
   const elm = hostRef.$hostElement$;
-  const flags = cmpMeta.$flags$;
   const endAttachStyles = createTime("attachStyles", cmpMeta.$tagName$);
-  const scopeId2 = addStyle(
-    elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(),
+  addStyle(
+    elm.getRootNode(),
     cmpMeta);
-  if (flags & 10 /* needsScopedEncapsulation */) {
-    elm["s-sc"] = scopeId2;
-    elm.classList.add(scopeId2 + "-h");
-  }
   endAttachStyles();
 };
 var getScopeId = (cmp, mode) => "sc-" + (cmp.$tagName$);
-
-// src/utils/helpers.ts
-var isDef = (v) => v != null && v !== void 0;
 var isComplexType = (o) => {
   o = typeof o;
   return o === "object" || o === "function";
@@ -840,7 +832,7 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
   const childRenderNodes = [];
   const slotNodes = [];
   const slottedNodes = [];
-  const shadowRootNodes = shadowRoot ? [] : null;
+  const shadowRootNodes = null;
   const vnode = newVNode(tagName, null);
   vnode.$elm$ = hostElm;
   if (win.document && (!plt.$orgLocNodes$ || !plt.$orgLocNodes$.size)) {
@@ -948,27 +940,6 @@ var initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {
       currentPos = (slottedItem.node["s-oo"] || currentPos) + 1;
     }
   }
-  if (shadowRoot && !shadowRoot.childNodes.length) {
-    let rnIdex = 0;
-    const rnLen = shadowRootNodes.length;
-    if (rnLen) {
-      for (rnIdex; rnIdex < rnLen; rnIdex++) {
-        const node = shadowRootNodes[rnIdex];
-        if (node) {
-          shadowRoot.appendChild(node);
-        }
-      }
-      Array.from(hostElm.childNodes).forEach((node) => {
-        if (typeof node["s-en"] !== "string" && typeof node["s-sn"] !== "string") {
-          if (node.nodeType === 1 /* ElementNode */ && node.slot && node.hidden) {
-            node.removeAttribute("hidden");
-          } else if (node.nodeType === 8 /* CommentNode */ && !node.nodeValue) {
-            node.parentNode.removeChild(node);
-          }
-        }
-      });
-    }
-  }
   hostRef.$hostElement$ = hostElm;
   endHydrate();
 };
@@ -1021,9 +992,6 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
           parentVNode.$children$[childVNode.$index$] = childVNode;
         }
         parentVNode = childVNode;
-        if (shadowRootNodes && childVNode.$depth$ === "0") {
-          shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
-        }
       }
     }
     if (node.shadowRoot) {
@@ -1082,9 +1050,6 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
             }
             parentVNode.$children$[childVNode.$index$] = childVNode;
           }
-          if (shadowRootNodes && childVNode.$depth$ === "0") {
-            shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
-          }
         }
       } else if (childNodeType === COMMENT_NODE_ID) {
         childVNode.$elm$ = findCorrespondingNode(node, 8 /* CommentNode */);
@@ -1107,9 +1072,7 @@ var clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes,
             slottedNodes
           );
         } else if (childNodeType === CONTENT_REF_ID) {
-          if (shadowRootNodes) {
-            node.remove();
-          } else {
+          {
             hostElm["s-cr"] = node;
             node["s-cn"] = true;
           }
@@ -1171,22 +1134,7 @@ function addSlot(slotName, slotId, childVNode, node, parentVNode, childRenderNod
   childVNode.$name$ = slotName || null;
   childVNode.$tag$ = "slot";
   const parentNodeId = (parentVNode == null ? void 0 : parentVNode.$elm$) ? parentVNode.$elm$["s-id"] || parentVNode.$elm$.getAttribute("s-id") : "";
-  if (shadowRootNodes && win.document) {
-    const slot = childVNode.$elm$ = win.document.createElement(childVNode.$tag$);
-    if (childVNode.$name$) {
-      childVNode.$elm$.setAttribute("name", slotName);
-    }
-    if (parentVNode.$elm$.shadowRoot && parentNodeId && parentNodeId !== childVNode.$hostId$) {
-      internalCall(parentVNode.$elm$, "insertBefore")(slot, internalCall(parentVNode.$elm$, "children")[0]);
-    } else {
-      internalCall(internalCall(node, "parentNode"), "insertBefore")(slot, node);
-    }
-    addSlottedNodes(slottedNodes, slotId, slotName, node, childVNode.$hostId$);
-    node.remove();
-    if (childVNode.$depth$ === "0") {
-      shadowRootNodes[childVNode.$index$] = childVNode.$elm$;
-    }
-  } else {
+  {
     const slot = childVNode.$elm$;
     const shouldMove = parentNodeId && parentNodeId !== childVNode.$hostId$ && parentVNode.$elm$.shadowRoot;
     addSlottedNodes(slottedNodes, slotId, slotName, node, shouldMove ? parentNodeId : childVNode.$hostId$);
@@ -1223,417 +1171,6 @@ var findCorrespondingNode = (node, type) => {
   return sibling;
 };
 
-// src/utils/regular-expression.ts
-var escapeRegExpSpecialCharacters = (text) => {
-  return text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-};
-
-// src/utils/shadow-css.ts
-/**
- * @license
- * Copyright Google Inc. All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- *
- * This file is a port of shadowCSS from `webcomponents.js` to TypeScript.
- * https://github.com/webcomponents/webcomponentsjs/blob/4efecd7e0e/src/ShadowCSS/ShadowCSS.js
- * https://github.com/angular/angular/blob/master/packages/compiler/src/shadow_css.ts
- */
-var safeSelector = (selector) => {
-  const placeholders = [];
-  let index = 0;
-  selector = selector.replace(/(\[\s*part~=\s*("[^"]*"|'[^']*')\s*\])/g, (_, keep) => {
-    const replaceBy = `__part-${index}__`;
-    placeholders.push(keep);
-    index++;
-    return replaceBy;
-  });
-  selector = selector.replace(/(\[[^\]]*\])/g, (_, keep) => {
-    const replaceBy = `__ph-${index}__`;
-    placeholders.push(keep);
-    index++;
-    return replaceBy;
-  });
-  const content = selector.replace(/(:nth-[-\w]+)(\([^)]+\))/g, (_, pseudo, exp) => {
-    const replaceBy = `__ph-${index}__`;
-    placeholders.push(exp);
-    index++;
-    return pseudo + replaceBy;
-  });
-  const ss = {
-    content,
-    placeholders
-  };
-  return ss;
-};
-var restoreSafeSelector = (placeholders, content) => {
-  content = content.replace(/__part-(\d+)__/g, (_, index) => placeholders[+index]);
-  return content.replace(/__ph-(\d+)__/g, (_, index) => placeholders[+index]);
-};
-var _polyfillHost = "-shadowcsshost";
-var _polyfillSlotted = "-shadowcssslotted";
-var _polyfillHostContext = "-shadowcsscontext";
-var _parenSuffix = ")(?:\\(((?:\\([^)(]*\\)|[^)(]*)+?)\\))?([^,{]*)";
-var _cssColonHostRe = new RegExp("(" + _polyfillHost + _parenSuffix, "gim");
-var _cssColonHostContextRe = new RegExp("(" + _polyfillHostContext + _parenSuffix, "gim");
-var _cssColonSlottedRe = new RegExp("(" + _polyfillSlotted + _parenSuffix, "gim");
-var _polyfillHostNoCombinator = _polyfillHost + "-no-combinator";
-var _polyfillHostNoCombinatorRe = /-shadowcsshost-no-combinator([^\s]*)/;
-var _shadowDOMSelectorsRe = [/::shadow/g, /::content/g];
-var _safePartRe = /__part-(\d+)__/g;
-var _selectorReSuffix = "([>\\s~+[.,{:][\\s\\S]*)?$";
-var _polyfillHostRe = /-shadowcsshost/gim;
-var createSupportsRuleRe = (selector) => {
-  const safeSelector2 = escapeRegExpSpecialCharacters(selector);
-  return new RegExp(
-    // First capture group: match any context before the selector that's not inside @supports selector()
-    // Using negative lookahead to avoid matching inside @supports selector(...) condition
-    `(^|[^@]|@(?!supports\\s+selector\\s*\\([^{]*?${safeSelector2}))(${safeSelector2}\\b)`,
-    "g"
-  );
-};
-var _commentRe = /\/\*\s*[\s\S]*?\*\//g;
-var stripComments = (input) => {
-  return input.replace(_commentRe, "");
-};
-var _commentWithHashRe = /\/\*\s*#\s*source(Mapping)?URL=[\s\S]+?\*\//g;
-var extractCommentsWithHash = (input) => {
-  return input.match(_commentWithHashRe) || [];
-};
-var _ruleRe = /(\s*)([^;\{\}]+?)(\s*)((?:{%BLOCK%}?\s*;?)|(?:\s*;))/g;
-var _curlyRe = /([{}])/g;
-var _selectorPartsRe = /(^.*?[^\\])??((:+)(.*)|$)/;
-var OPEN_CURLY = "{";
-var CLOSE_CURLY = "}";
-var BLOCK_PLACEHOLDER = "%BLOCK%";
-var processRules = (input, ruleCallback) => {
-  const inputWithEscapedBlocks = escapeBlocks(input);
-  let nextBlockIndex = 0;
-  return inputWithEscapedBlocks.escapedString.replace(_ruleRe, (...m) => {
-    const selector = m[2];
-    let content = "";
-    let suffix = m[4];
-    let contentPrefix = "";
-    if (suffix && suffix.startsWith("{" + BLOCK_PLACEHOLDER)) {
-      content = inputWithEscapedBlocks.blocks[nextBlockIndex++];
-      suffix = suffix.substring(BLOCK_PLACEHOLDER.length + 1);
-      contentPrefix = "{";
-    }
-    const cssRule = {
-      selector,
-      content
-    };
-    const rule = ruleCallback(cssRule);
-    return `${m[1]}${rule.selector}${m[3]}${contentPrefix}${rule.content}${suffix}`;
-  });
-};
-var escapeBlocks = (input) => {
-  const inputParts = input.split(_curlyRe);
-  const resultParts = [];
-  const escapedBlocks = [];
-  let bracketCount = 0;
-  let currentBlockParts = [];
-  for (let partIndex = 0; partIndex < inputParts.length; partIndex++) {
-    const part = inputParts[partIndex];
-    if (part === CLOSE_CURLY) {
-      bracketCount--;
-    }
-    if (bracketCount > 0) {
-      currentBlockParts.push(part);
-    } else {
-      if (currentBlockParts.length > 0) {
-        escapedBlocks.push(currentBlockParts.join(""));
-        resultParts.push(BLOCK_PLACEHOLDER);
-        currentBlockParts = [];
-      }
-      resultParts.push(part);
-    }
-    if (part === OPEN_CURLY) {
-      bracketCount++;
-    }
-  }
-  if (currentBlockParts.length > 0) {
-    escapedBlocks.push(currentBlockParts.join(""));
-    resultParts.push(BLOCK_PLACEHOLDER);
-  }
-  const strEscapedBlocks = {
-    escapedString: resultParts.join(""),
-    blocks: escapedBlocks
-  };
-  return strEscapedBlocks;
-};
-var insertPolyfillHostInCssText = (cssText) => {
-  const supportsBlocks = [];
-  cssText = cssText.replace(/@supports\s+selector\s*\(\s*([^)]*)\s*\)/g, (_, selectorContent) => {
-    const placeholder = `__supports_${supportsBlocks.length}__`;
-    supportsBlocks.push(selectorContent);
-    return `@supports selector(${placeholder})`;
-  });
-  const _colonSlottedRe = createSupportsRuleRe("::slotted");
-  const _colonHostRe = createSupportsRuleRe(":host");
-  const _colonHostContextRe = createSupportsRuleRe(":host-context");
-  cssText = cssText.replace(_colonHostContextRe, `$1${_polyfillHostContext}`).replace(_colonHostRe, `$1${_polyfillHost}`).replace(_colonSlottedRe, `$1${_polyfillSlotted}`);
-  supportsBlocks.forEach((originalSelector, index) => {
-    cssText = cssText.replace(`__supports_${index}__`, originalSelector);
-  });
-  return cssText;
-};
-var convertColonRule = (cssText, regExp, partReplacer) => {
-  return cssText.replace(regExp, (...m) => {
-    if (m[2]) {
-      const parts = m[2].split(",");
-      const r = [];
-      for (let i2 = 0; i2 < parts.length; i2++) {
-        const p = parts[i2].trim();
-        if (!p) break;
-        r.push(partReplacer(_polyfillHostNoCombinator, p, m[3]));
-      }
-      return r.join(",");
-    } else {
-      return _polyfillHostNoCombinator + m[3];
-    }
-  });
-};
-var colonHostPartReplacer = (host, part, suffix) => {
-  return host + part.replace(_polyfillHost, "") + suffix;
-};
-var convertColonHost = (cssText) => {
-  return convertColonRule(cssText, _cssColonHostRe, colonHostPartReplacer);
-};
-var colonHostContextPartReplacer = (host, part, suffix) => {
-  if (part.indexOf(_polyfillHost) > -1) {
-    return colonHostPartReplacer(host, part, suffix);
-  } else {
-    return host + part + suffix + ", " + part + " " + host + suffix;
-  }
-};
-var convertColonSlotted = (cssText, slotScopeId) => {
-  const slotClass = "." + slotScopeId + " > ";
-  const selectors = [];
-  cssText = cssText.replace(_cssColonSlottedRe, (...m) => {
-    if (m[2]) {
-      const compound = m[2].trim();
-      const suffix = m[3];
-      const slottedSelector = slotClass + compound + suffix;
-      let prefixSelector = "";
-      for (let i2 = m[4] - 1; i2 >= 0; i2--) {
-        const char = m[5][i2];
-        if (char === "}" || char === ",") {
-          break;
-        }
-        prefixSelector = char + prefixSelector;
-      }
-      const orgSelector = (prefixSelector + slottedSelector).trim();
-      const addedSelector = `${prefixSelector.trimEnd()}${slottedSelector.trim()}`.trim();
-      if (orgSelector !== addedSelector) {
-        const updatedSelector = `${addedSelector}, ${orgSelector}`;
-        selectors.push({
-          orgSelector,
-          updatedSelector
-        });
-      }
-      return slottedSelector;
-    } else {
-      return _polyfillHostNoCombinator + m[3];
-    }
-  });
-  return {
-    selectors,
-    cssText
-  };
-};
-var convertColonHostContext = (cssText) => {
-  return convertColonRule(cssText, _cssColonHostContextRe, colonHostContextPartReplacer);
-};
-var convertShadowDOMSelectors = (cssText) => {
-  return _shadowDOMSelectorsRe.reduce((result, pattern) => result.replace(pattern, " "), cssText);
-};
-var makeScopeMatcher = (scopeSelector2) => {
-  const lre = /\[/g;
-  const rre = /\]/g;
-  scopeSelector2 = scopeSelector2.replace(lre, "\\[").replace(rre, "\\]");
-  return new RegExp("^(" + scopeSelector2 + ")" + _selectorReSuffix, "m");
-};
-var selectorNeedsScoping = (selector, scopeSelector2) => {
-  const re = makeScopeMatcher(scopeSelector2);
-  return !re.test(selector);
-};
-var injectScopingSelector = (selector, scopingSelector) => {
-  return selector.replace(_selectorPartsRe, (_, before = "", _colonGroup, colon = "", after = "") => {
-    return before + scopingSelector + colon + after;
-  });
-};
-var applySimpleSelectorScope = (selector, scopeSelector2, hostSelector) => {
-  _polyfillHostRe.lastIndex = 0;
-  if (_polyfillHostRe.test(selector)) {
-    const replaceBy = `.${hostSelector}`;
-    return selector.replace(_polyfillHostNoCombinatorRe, (_, selector2) => injectScopingSelector(selector2, replaceBy)).replace(_polyfillHostRe, replaceBy + " ");
-  }
-  return scopeSelector2 + " " + selector;
-};
-var applyStrictSelectorScope = (selector, scopeSelector2, hostSelector) => {
-  const isRe = /\[is=([^\]]*)\]/g;
-  scopeSelector2 = scopeSelector2.replace(isRe, (_, ...parts) => parts[0]);
-  const className = "." + scopeSelector2;
-  const _scopeSelectorPart = (p) => {
-    let scopedP = p.trim();
-    if (!scopedP) {
-      return "";
-    }
-    if (p.indexOf(_polyfillHostNoCombinator) > -1) {
-      scopedP = applySimpleSelectorScope(p, scopeSelector2, hostSelector);
-    } else {
-      const t = p.replace(_polyfillHostRe, "");
-      if (t.length > 0) {
-        scopedP = injectScopingSelector(t, className);
-      }
-    }
-    return scopedP;
-  };
-  const safeContent = safeSelector(selector);
-  selector = safeContent.content;
-  let scopedSelector = "";
-  let startIndex = 0;
-  let res;
-  const sep2 = /( |>|\+|~(?!=))(?=(?:[^()]*\([^()]*\))*[^()]*$)\s*/g;
-  const hasHost = selector.indexOf(_polyfillHostNoCombinator) > -1;
-  let shouldScope = !hasHost;
-  while ((res = sep2.exec(selector)) !== null) {
-    const separator = res[1];
-    const part2 = selector.slice(startIndex, res.index).trim();
-    shouldScope = shouldScope || part2.indexOf(_polyfillHostNoCombinator) > -1;
-    const scopedPart = shouldScope ? _scopeSelectorPart(part2) : part2;
-    scopedSelector += `${scopedPart} ${separator} `;
-    startIndex = sep2.lastIndex;
-  }
-  const part = selector.substring(startIndex);
-  shouldScope = !part.match(_safePartRe) && (shouldScope || part.indexOf(_polyfillHostNoCombinator) > -1);
-  scopedSelector += shouldScope ? _scopeSelectorPart(part) : part;
-  return restoreSafeSelector(safeContent.placeholders, scopedSelector);
-};
-var scopeSelector = (selector, scopeSelectorText, hostSelector, slotSelector) => {
-  return selector.split(",").map((shallowPart) => {
-    if (slotSelector && shallowPart.indexOf("." + slotSelector) > -1) {
-      return shallowPart.trim();
-    }
-    if (selectorNeedsScoping(shallowPart, scopeSelectorText)) {
-      return applyStrictSelectorScope(shallowPart, scopeSelectorText, hostSelector).trim();
-    } else {
-      return shallowPart.trim();
-    }
-  }).join(", ");
-};
-var scopeSelectors = (cssText, scopeSelectorText, hostSelector, slotSelector, commentOriginalSelector) => {
-  return processRules(cssText, (rule) => {
-    let selector = rule.selector;
-    let content = rule.content;
-    if (rule.selector[0] !== "@") {
-      selector = scopeSelector(rule.selector, scopeSelectorText, hostSelector, slotSelector);
-    } else if (rule.selector.startsWith("@media") || rule.selector.startsWith("@supports") || rule.selector.startsWith("@page") || rule.selector.startsWith("@document")) {
-      content = scopeSelectors(rule.content, scopeSelectorText, hostSelector, slotSelector);
-    }
-    const cssRule = {
-      selector: selector.replace(/\s{2,}/g, " ").trim(),
-      content
-    };
-    return cssRule;
-  });
-};
-var scopeCssText = (cssText, scopeId2, hostScopeId, slotScopeId, commentOriginalSelector) => {
-  cssText = insertPolyfillHostInCssText(cssText);
-  cssText = convertColonHost(cssText);
-  cssText = convertColonHostContext(cssText);
-  const slotted = convertColonSlotted(cssText, slotScopeId);
-  cssText = slotted.cssText;
-  cssText = convertShadowDOMSelectors(cssText);
-  if (scopeId2) {
-    cssText = scopeSelectors(cssText, scopeId2, hostScopeId, slotScopeId);
-  }
-  cssText = replaceShadowCssHost(cssText, hostScopeId);
-  cssText = cssText.replace(/>\s*\*\s+([^{, ]+)/gm, " $1 ");
-  return {
-    cssText: cssText.trim(),
-    // We need to replace the shadow CSS host string in each of these selectors since we created
-    // them prior to the replacement happening in the components CSS text.
-    slottedSelectors: slotted.selectors.map((ref) => ({
-      orgSelector: replaceShadowCssHost(ref.orgSelector, hostScopeId),
-      updatedSelector: replaceShadowCssHost(ref.updatedSelector, hostScopeId)
-    }))
-  };
-};
-var replaceShadowCssHost = (cssText, hostScopeId) => {
-  return cssText.replace(/-shadowcsshost-no-combinator/g, `.${hostScopeId}`);
-};
-var expandPartSelectors = (cssText) => {
-  const partSelectorRe = /([^\s,{][^,{]*?)::part\(\s*([^)]+?)\s*\)((?:[:.][^,{]*)*)/g;
-  return processRules(cssText, (rule) => {
-    if (rule.selector[0] === "@") {
-      return rule;
-    }
-    const selectors = rule.selector.split(",").map((sel) => {
-      const out = [sel.trim()];
-      let m;
-      while ((m = partSelectorRe.exec(sel)) !== null) {
-        const before = m[1].trimEnd();
-        const partNames = m[2].trim().split(/\s+/);
-        const after = m[3] || "";
-        const partAttr = partNames.flatMap((p) => {
-          if (!rule.selector.includes(`[part~="${p}"]`)) {
-            return [`[part~="${p}"]`];
-          }
-          return [];
-        }).join("");
-        const expanded = `${before} ${partAttr}${after}`;
-        if (!!partAttr && expanded !== sel.trim()) {
-          out.push(expanded);
-        }
-      }
-      return out.join(", ");
-    });
-    rule.selector = selectors.join(", ");
-    return rule;
-  });
-};
-var scopeCss = (cssText, scopeId2, commentOriginalSelector) => {
-  const hostScopeId = scopeId2 + "-h";
-  const slotScopeId = scopeId2 + "-s";
-  const commentsWithHash = extractCommentsWithHash(cssText);
-  cssText = stripComments(cssText);
-  const orgSelectors = [];
-  {
-    const processCommentedSelector = (rule) => {
-      const placeholder = `/*!@___${orgSelectors.length}___*/`;
-      const comment = `/*!@${rule.selector}*/`;
-      orgSelectors.push({ placeholder, comment });
-      rule.selector = placeholder + rule.selector;
-      return rule;
-    };
-    cssText = processRules(cssText, (rule) => {
-      if (rule.selector[0] !== "@") {
-        return processCommentedSelector(rule);
-      } else if (rule.selector.startsWith("@media") || rule.selector.startsWith("@supports") || rule.selector.startsWith("@page") || rule.selector.startsWith("@document")) {
-        rule.content = processRules(rule.content, processCommentedSelector);
-        return rule;
-      }
-      return rule;
-    });
-  }
-  const scoped = scopeCssText(cssText, scopeId2, hostScopeId, slotScopeId);
-  cssText = [scoped.cssText, ...commentsWithHash].join("\n");
-  {
-    orgSelectors.forEach(({ placeholder, comment }) => {
-      cssText = cssText.replace(placeholder, comment);
-    });
-  }
-  scoped.slottedSelectors.forEach((slottedSelector) => {
-    const regex = new RegExp(escapeRegExpSpecialCharacters(slottedSelector.orgSelector) + "(?=\\s*[,{]|$)", "g");
-    cssText = cssText.replace(regex, slottedSelector.updatedSelector);
-  });
-  cssText = expandPartSelectors(cssText);
-  return cssText;
-};
-
 // src/utils/remote-value.ts
 var RemoteValue = class _RemoteValue {
   /**
@@ -1963,9 +1500,6 @@ function sortedAttrNames(attrNames) {
     attrNames
   );
 }
-
-// src/runtime/vdom/vdom-render.ts
-var scopeId;
 var contentRef;
 var hostTagName;
 var useNativeShadowDom = false;
@@ -2020,9 +1554,6 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
     {
       updateElement(null, newVNode2, isSvgMode);
     }
-    if (isDef(scopeId) && elm["s-si"] !== scopeId) {
-      elm.classList.add(elm["s-si"] = scopeId);
-    }
     if (newVNode2.$children$) {
       const appendTarget = newVNode2.$tag$ === "template" ? elm.content : elm;
       for (i2 = 0; i2 < newVNode2.$children$.length; ++i2) {
@@ -2108,9 +1639,6 @@ var putBackInOriginalLocation = (parentElm, recursive) => {
 var addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
   let containerElm = parentElm["s-cr"] && parentElm["s-cr"].parentNode || parentElm;
   let childNode;
-  if (containerElm.shadowRoot && containerElm.tagName === hostTagName) {
-    containerElm = containerElm.shadowRoot;
-  }
   if (parentVNode.$tag$ === "template") {
     containerElm = containerElm.content;
   }
@@ -2424,11 +1952,8 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
   rootVnode.$tag$ = null;
   rootVnode.$flags$ |= 4 /* isHost */;
   hostRef.$vnode$ = rootVnode;
-  rootVnode.$elm$ = oldVNode.$elm$ = hostElm.shadowRoot || hostElm ;
-  {
-    scopeId = hostElm["s-sc"];
-  }
-  useNativeShadowDom = !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) && !(cmpMeta.$flags$ & 128 /* shadowNeedsScopedCss */);
+  rootVnode.$elm$ = oldVNode.$elm$ = hostElm;
+  useNativeShadowDom = supportsShadow;
   {
     contentRef = hostElm["s-cr"];
     checkSlotFallbackVisibility = false;
@@ -2886,13 +2411,6 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
         const scopeId2 = getScopeId(cmpMeta);
         if (!styles.has(scopeId2) || BUILD.hotModuleReplacement) {
           const endRegisterStyles = createTime("registerStyles", cmpMeta.$tagName$);
-          {
-            if (cmpMeta.$flags$ & 128 /* shadowNeedsScopedCss */) {
-              style = scopeCss(style, scopeId2);
-            } else if (needsScopedSSR()) {
-              style = expandPartSelectors(style);
-            }
-          }
           registerStyle(scopeId2, style);
           endRegisterStyles();
         }
@@ -2937,10 +2455,6 @@ var connectedCallback = (elm) => {
       {
         hostId = elm.getAttribute(HYDRATE_ID);
         if (hostId) {
-          if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
-            const scopeId2 = addStyle(elm.shadowRoot, cmpMeta);
-            elm.classList.remove(scopeId2 + "-h", scopeId2 + "-s");
-          }
           initializeClientHydrate(elm, cmpMeta.$tagName$, hostId, hostRef);
         }
       }
@@ -4653,7 +4167,6 @@ function hydrateApp(win2, opts, results, afterHydrate, resolve) {
   const orgDocumentCreateElement = win2.document.createElement;
   const orgDocumentCreateElementNS = win2.document.createElementNS;
   const resolved2 = Promise.resolve();
-  setScopedSSR(opts);
   let tmrId;
   let ranCompleted = false;
   function hydratedComplete() {
@@ -4983,6 +4496,7 @@ var plt = {
   rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
   ce: (eventName, opts) => new win.CustomEvent(eventName, opts)
 };
+var supportsShadow = BUILD.shadowDom;
 var getHostRef = (ref) => {
   if (ref.__stencil__getHostRef) {
     return ref.__stencil__getHostRef();
@@ -5016,11 +4530,6 @@ var registerHost = (elm, cmpMeta) => {
   return hostRef;
 };
 var styles = /* @__PURE__ */ new Map();
-var setScopedSSR = (opts) => {
-  scopedSSR = opts.serializeShadowRoot !== false && opts.serializeShadowRoot !== "declarative-shadow-dom";
-};
-var needsScopedSSR = () => scopedSSR;
-var scopedSSR = false;
 
 function isNumber(subject) {
   return typeof subject === 'number';
@@ -6915,17 +6424,17 @@ class AppCarousel {
     render() {
         const itemsArray = this.getItemsArray();
         const useItems = itemsArray !== undefined && itemsArray.length > 0;
-        return (hAsync("div", { key: '313c58e9c1ea3b9c0d0fd4b9d6354336682d9353', class: `carousel ${this.class || ''}`.trim() }, hAsync("div", { key: '14ad75526a24ed38df053fa221e2fafef6d532ed', class: `carousel__viewport ${this.slideClass || ''}`.trim(), ref: (el) => (this.viewportRef = el) }, hAsync("div", { key: '1d3a771598c382592b789289494f2439fea56918', class: "carousel__container", ref: (el) => (this.containerRef = el) }, useItems && itemsArray
+        return (hAsync("div", { key: '3a2ea6c339bf0fe656e5a333789df7a37156b5dc', class: `carousel ${this.class || ''}`.trim() }, hAsync("div", { key: '0a73b925095ae3188e5e40b024bc250e4c183894', class: `carousel__viewport ${this.slideClass || ''}`.trim(), ref: (el) => (this.viewportRef = el) }, hAsync("div", { key: '7fc3b5a72e386f7fa21702aeb363e08da1b728cf', class: "carousel__container", ref: (el) => (this.containerRef = el) }, useItems && itemsArray
             ? itemsArray.map((item, i) => (hAsync("div", { key: i, class: `carousel__slide ${this.itemClass || ''}`.trim() }, typeof item === 'object' &&
                 item !== null &&
                 'content' in item
                 ? item.content
                 : String(item))))
-            : null)), !useItems && (hAsync("div", { key: 'cdecd3275ac3c5ffe7a0f46153d3e59ad0d4ba9d', style: { display: 'none' }, "aria-hidden": "true" }, hAsync("slot", { key: '450dd5b90f20166a4d6ef4a0d46d208ad47bbf4b', ref: (el) => (this.slotRef = el) }))), hAsync("div", { key: 'ad4eab3f45204170308d8021799d227eaff36d71', class: `carousel__controls ${this.controlClass || ''}`.trim() }, hAsync("button", { key: '1a4ef7209ea768a55892f4d928da3f6100faab4b', type: "button", "aria-label": "Previous", class: "carousel__prev", ref: (el) => (this.prevBtnRef = el) }, hAsync("svg", { key: '7d579cb030149947791db565bc1520ef2707c360', class: "carousel__icon", "stroke-width": "1.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true" }, hAsync("path", { key: 'fdca1a876d4967c39286bddba6122351fbf0d925', "stroke-linecap": "round", "stroke-linejoin": "round", d: "M15.75 19.5L8.25 12l7.5-7.5" }))), hAsync("div", { key: '4d9a30f1988f2ce04f271967f1dd39c5287273f2', class: "carousel__dots", ref: (el) => (this.dotsRef = el) }), hAsync("button", { key: 'c8bc7787821f3277c6d038e3ff1240b3ce936825', type: "button", "aria-label": "Next", class: "carousel__next", ref: (el) => (this.nextBtnRef = el) }, hAsync("svg", { key: 'e6e4eff954b1b08711cc843de558e00a8257e9f8', class: "carousel__icon", "stroke-width": "1.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true" }, hAsync("path", { key: '37b394093f327bdc46f8da1dcf78ec609a585a0a', "stroke-linecap": "round", "stroke-linejoin": "round", d: "M8.25 4.5l7.5 7.5-7.5 7.5" }))))));
+            : null)), !useItems && (hAsync("div", { key: 'dee2fc91470728c136c9853cd74ae350ad3c5676', style: { display: 'none' }, "aria-hidden": "true" }, hAsync("slot", { key: '35dd47c03a1b9b6b73d845252c3d0482590f7da2', ref: (el) => (this.slotRef = el) }))), hAsync("div", { key: 'df639ad86ae8533f1dc15eed30afb70d99e36e1a', class: `carousel__controls ${this.controlClass || ''}`.trim() }, hAsync("button", { key: 'c17c0ea9bf023b5d2621e558c957d92b13425584', type: "button", "aria-label": "Previous", class: "carousel__prev", ref: (el) => (this.prevBtnRef = el) }, hAsync("svg", { key: '5125abcae0b08ee72106d511b4c24c2d0f24187b', class: "carousel__icon", "stroke-width": "1.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true" }, hAsync("path", { key: '9b7f28be56f451ad14de226d7163a5587a1cd9e6', "stroke-linecap": "round", "stroke-linejoin": "round", d: "M15.75 19.5L8.25 12l7.5-7.5" }))), hAsync("div", { key: '9939d3496092a3f319efac9132cec8097c83b497', class: "carousel__dots", ref: (el) => (this.dotsRef = el) }), hAsync("button", { key: 'a0b1228f6df0065885f1d272386283926e78464b', type: "button", "aria-label": "Next", class: "carousel__next", ref: (el) => (this.nextBtnRef = el) }, hAsync("svg", { key: 'e00c92cc0485f41a30e97d5d0466aaee48a64998', class: "carousel__icon", "stroke-width": "1.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true" }, hAsync("path", { key: 'a35c46fdbd1cd333d3e6f76590f45dd837546165', "stroke-linecap": "round", "stroke-linejoin": "round", d: "M8.25 4.5l7.5 7.5-7.5 7.5" }))))));
     }
     static get style() { return carouselCss(); }
     static get cmpMeta() { return {
-        "$flags$": 777,
+        "$flags$": 772,
         "$tagName$": "fast-carousel",
         "$members$": {
             "items": [1],
@@ -6977,15 +6486,15 @@ class CustomButton {
         this.buttonClick.emit(e);
     };
     render() {
-        return (hAsync("button", { key: 'b373f44e11e651d0371ce3cade98b4650ccdd727', type: this.type, class: {
+        return (hAsync("button", { key: '3b74909afe4e305dfd38f0b07657202e3d5bfccd', type: this.type, class: {
                 'custom-button': true,
                 [`custom-button--${this.variant}`]: true,
                 'custom-button--disabled': this.disabled,
-            }, disabled: this.disabled, onClick: this.handleClick }, hAsync("slot", { key: '2a046bc70af051c04f4549def87dac7044b41e04' })));
+            }, disabled: this.disabled, onClick: this.handleClick }, hAsync("slot", { key: '49845d350e4665c5c66e30bd9262f788eaaa1e20' })));
     }
     static get style() { return buttonCss(); }
     static get cmpMeta() { return {
-        "$flags$": 777,
+        "$flags$": 772,
         "$tagName$": "fast-button",
         "$members$": {
             "variant": [1],
@@ -6998,6 +6507,84 @@ class CustomButton {
     }; }
 }
 
+const jobsItemCss = () => `.results-list__item{list-style:none;padding:10px 0;border-bottom:1px solid #ddd;margin:15px 0;display:inline-block;width:100%;position:relative}.results-list__item:last-child{border-bottom:none}.results-list__item-header{margin:10px 0;font-size:18px;font-weight:700;display:flex;flex-direction:column}.results-list__item-title{margin:0}.results-list__item-title--link{text-decoration:none;color:#1f9755}.results-list__item-title--link:hover{text-decoration:underline}.reference{margin-left:8px;font-size:0.9em;color:#666}.reference.empty{display:none}.remote{background:#f3f3f3;color:#808285;border-radius:100px;padding:6px 16px;text-transform:uppercase;font-size:12px;font-weight:700;line-height:24px;margin-left:8px}.remote--empty{display:none}.results-list__item-distance{display:inline-flex;align-items:center;gap:4px;margin-top:4px;font-size:14px;font-weight:400}.results-list__item-distance--icon{display:inline-flex}.results-list__item-distance--icon svg{width:16px;height:16px}.results-list__item-content{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-top:8px}.results-list__item-info{flex:1}.results-list__item-street,.results-list__item-brand,.results-list__item-employment-type{margin:10px 0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}.results-list__item-street--empty,.results-list__item-brand--empty,.results-list__item-employment-type--empty{color:#999}.results-list__item-street--icon,.results-list__item-brand--icon,.results-list__item-employment-type--icon{margin-right:6px;display:inline-flex}.results-list__item-street--icon svg,.results-list__item-brand--icon svg,.results-list__item-employment-type--icon svg{width:16px;height:16px}.results-list__item-street--more-locations__wrapper{margin-left:8px}.results-list__item-street--amount{font-weight:600}.results-list__item-apply{margin:10px 0;padding:10px 20px;display:inline-flex;align-items:center;gap:8px;background-color:#198754;color:#fff;border-radius:3px;text-decoration:none;font-weight:600;flex-shrink:0}.results-list__item-apply:hover{background-color:#1f9755;color:#fff}.results-list__item-apply--icon svg{width:14px;height:14px}`;
+
+function getLocationLabel(loc) {
+    if (loc.cityStateAbbr)
+        return loc.cityStateAbbr;
+    const parts = [loc.streetAddress, loc.city, loc.stateAbbr || loc.state, loc.countryAbbr || loc.country].filter(Boolean);
+    return parts.join(', ') || loc.locationText || '';
+}
+function getFirstLocation(job) {
+    const locs = job.locations;
+    if (!locs?.length)
+        return undefined;
+    return locs[0];
+}
+class JobsItem {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    job;
+    index = 0;
+    applyButtonText = 'Apply Now';
+    showBrand = true;
+    showReference = false;
+    showEmploymentType = true;
+    multiLocationText = 'More locations';
+    remoteLocationText = 'Remote';
+    enableKilometers = false;
+    formatDistance(distance) {
+        const value = this.enableKilometers ? distance * 1.60934 : distance;
+        const unit = this.enableKilometers ? 'Km' : 'Miles';
+        const str = `${value.toFixed(1)} ${unit}`.replace('.0', '');
+        return str;
+    }
+    render() {
+        if (!this.job)
+            return null;
+        const firstLoc = getFirstLocation(this.job);
+        const locationLabel = firstLoc ? getLocationLabel(firstLoc) : '';
+        const distance = firstLoc?.distance ?? 0;
+        const distanceLabel = distance > 0 ? this.formatDistance(distance) : '';
+        const applyHref = this.job.applyURL ||
+            (this.job.originalURL ? `${typeof window !== 'undefined' ? window.location.origin : ''}${this.job.originalURL}` : '#');
+        const applyLabel = `${this.applyButtonText}, ${this.job.title || ''}`;
+        const locs = this.job.locations ?? [];
+        const hasMultipleLocations = locs.length > 1;
+        return (hAsync("li", { class: "results-list__item" }, hAsync("div", { class: "results-list__item-header" }, hAsync("h3", { class: "results-list__item-title" }, hAsync("a", { class: "results-list__item-title--link", href: applyHref, target: "_blank", rel: "noopener noreferrer" }, this.job.title || ''), this.showReference && (hAsync("span", { class: `reference ${this.job.reference ? '' : 'empty'}` }, this.job.reference || '')), this.job.isRemote && (hAsync("span", { class: this.remoteLocationText ? 'remote' : 'remote remote--empty' }, this.remoteLocationText))), distanceLabel && (hAsync("div", { class: "results-list__item-distance" }, hAsync("span", { class: "results-list__item-distance--icon" }, hAsync("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5" }, hAsync("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z" }), hAsync("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M12 8v4l2 2" }))), hAsync("span", { class: "results-list__item-distance--label" }, distanceLabel)))), hAsync("div", { class: "results-list__item-content" }, hAsync("div", { class: "results-list__item-info" }, hAsync("div", { class: locs.length
+                ? 'results-list__item-street'
+                : 'results-list__item-street results-list__item-street--empty' }, hAsync("div", { class: "results-list__item-street--label__wrapper" }, hAsync("span", { class: "results-list__item-street--icon" }, hAsync("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5" }, hAsync("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0z" }), hAsync("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0z" }))), hAsync("span", { class: "results-list__item-street--label" }, locationLabel || '—')), hasMultipleLocations && (hAsync("div", { class: "results-list__item-street--more-locations__wrapper" }, hAsync("span", { class: "results-list__item-street--amount" }, "+", locs.length - 1), hAsync("span", { class: "results-list__item-street--more-locations" }, this.multiLocationText)))), this.showBrand && (hAsync("div", { class: this.job.brandName
+                ? 'results-list__item-brand'
+                : 'results-list__item-brand results-list__item-brand--empty' }, hAsync("span", { class: "results-list__item-brand--icon" }, hAsync("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5" }, hAsync("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008z" }))), hAsync("span", { class: "results-list__item-brand--label" }, this.job.brandName || '—'))), this.showEmploymentType && (hAsync("div", { class: this.job.employmentType?.length
+                ? 'results-list__item-employment-type'
+                : 'results-list__item-employment-type results-list__item-employment-type--empty' }, hAsync("span", { class: "results-list__item-employment-type--icon" }, hAsync("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5" }, hAsync("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0z" }))), (this.job.employmentType?.length ? this.job.employmentType : ['—']).map((type) => (hAsync("span", { key: type, class: "results-list__item-employment-type--label" }, type))))), (this.job.jobCardExtraFields ?? []).map((field, i) => (hAsync("div", { key: i, class: (Array.isArray(field.value) ? field.value.length : field.value)
+                ? field.classname
+                : `${field.classname}--empty` }, Array.isArray(field.value)
+            ? field.value.map((v, j) => (hAsync("span", { key: j, class: `${field.classname}--label` }, v)))
+            : (hAsync("span", { class: `${field.classname}--label` }, String(field.value))))))), hAsync("a", { class: "results-list__item-apply", href: applyHref, target: "_blank", rel: "noopener noreferrer", "aria-label": applyLabel }, hAsync("span", { class: "results-list__item-apply--label" }, this.applyButtonText), hAsync("span", { class: "results-list__item-apply--icon" }, hAsync("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, hAsync("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M13 7l5 5m0 0l-5 5m5-5H6" })))))));
+    }
+    static get style() { return jobsItemCss(); }
+    static get cmpMeta() { return {
+        "$flags$": 512,
+        "$tagName$": "jobs-item",
+        "$members$": {
+            "job": [16],
+            "index": [2],
+            "applyButtonText": [1, "apply-button-text"],
+            "showBrand": [4, "show-brand"],
+            "showReference": [4, "show-reference"],
+            "showEmploymentType": [4, "show-employment-type"],
+            "multiLocationText": [1, "multi-location-text"],
+            "remoteLocationText": [1, "remote-location-text"],
+            "enableKilometers": [4, "enable-kilometers"]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
 /**
  * Mock jobs for local development and docs.
  * Use in www or static HTML: jobs='...' (JSON.stringify(mockJobs)).
@@ -7056,23 +6643,11 @@ const mockJobsListOnly = [
     },
 ];
 
-const jobsListOnlyUiCss = () => `:host{display:block}.jobs-list-root{list-style:none}.results-container{position:relative}.loader{display:inline-block;width:24px;height:24px;border:2px solid #ddd;border-top-color:#1f9755;border-radius:50%;animation:jobs-list-spin 0.8s linear infinite}.loader.hide{display:none}@keyframes jobs-list-spin{to{transform:rotate(360deg)}}.card{border:0}.results-list{list-style:none;margin:0;padding:0;display:block}.results-list.front{margin:3px 0}.results-list__item{list-style:none;padding:10px 0;border-bottom:1px solid #ddd;margin:15px 0;display:inline-block;width:100%;position:relative}.results-list__item:last-child{border-bottom:none}.results-list__item-header{margin:10px 0;font-size:18px;font-weight:700;display:flex;flex-direction:column}.results-list__item-title{margin:0}.results-list__item-title--link{text-decoration:none;color:#1f9755}.results-list__item-title--link:hover{text-decoration:underline}.reference{margin-left:8px;font-size:0.9em;color:#666}.reference.empty{display:none}.remote{background:#f3f3f3;color:#808285;border-radius:100px;padding:6px 16px;text-transform:uppercase;font-size:12px;font-weight:700;line-height:24px;margin-left:8px}.remote--empty{display:none}.results-list__item-distance{display:inline-flex;align-items:center;gap:4px;margin-top:4px;font-size:14px;font-weight:400}.results-list__item-distance--icon{display:inline-flex}.results-list__item-distance--icon svg{width:16px;height:16px}.results-list__item-content{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-top:8px}.results-list__item-info{flex:1}.results-list__item-street,.results-list__item-brand,.results-list__item-employment-type{margin:10px 0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}.results-list__item-street--empty,.results-list__item-brand--empty,.results-list__item-employment-type--empty{color:#999}.results-list__item-street--icon,.results-list__item-brand--icon,.results-list__item-employment-type--icon{margin-right:6px;display:inline-flex}.results-list__item-street--icon svg,.results-list__item-brand--icon svg,.results-list__item-employment-type--icon svg{width:16px;height:16px}.results-list__item-street--more-locations__wrapper{margin-left:8px}.results-list__item-street--amount{font-weight:600}.results-list__item-apply{margin:10px 0;padding:10px 20px;display:inline-flex;align-items:center;gap:8px;background-color:#198754;color:#fff;border-radius:3px;text-decoration:none;font-weight:600;flex-shrink:0}.results-list__item-apply:hover{background-color:#1f9755;color:#fff}.results-list__item-apply--icon svg{width:14px;height:14px}.share-jobs__no-results{padding:24px;text-align:center}.share-jobs__no-results h2,.share-jobs__no-results h3{margin:8px 0;font-weight:600}.card.primary-color{padding:16px;border-radius:4px;background:#f8f9fa}.result-suggestions-title{margin:0 0 12px 0;font-size:16px}.results-list .result-suggestions-line{list-style:none;margin:4px 0}`;
+const jobsListOnlyCss = () => `:host{display:block}.jobs-list-root{list-style:none}.results-container{position:relative}.loader{display:inline-block;width:24px;height:24px;border:2px solid #ddd;border-top-color:#1f9755;border-radius:50%;animation:jobs-list-spin 0.8s linear infinite}.loader.hide{display:none}@keyframes jobs-list-spin{to{transform:rotate(360deg)}}.card{border:0}.results-list{list-style:none;margin:0;padding:0;display:block}.results-list.front{margin:3px 0}.share-jobs__no-results{padding:24px;text-align:center}.share-jobs__no-results h2,.share-jobs__no-results h3{margin:8px 0;font-weight:600}.card.primary-color{padding:16px;border-radius:4px;background:#f8f9fa}.result-suggestions-title{margin:0 0 12px 0;font-size:16px}.results-list .result-suggestions-line{list-style:none;margin:4px 0}`;
 
 const defaultNoResultsLine1 = "Sorry, we're not able to load results for your search.";
 const defaultNoResultsLine2 = 'Please refine your keywords in the search bar above and try again.';
-function getLocationLabel(loc) {
-    if (loc.cityStateAbbr)
-        return loc.cityStateAbbr;
-    const parts = [loc.streetAddress, loc.city, loc.stateAbbr || loc.state, loc.countryAbbr || loc.country].filter(Boolean);
-    return parts.join(', ') || loc.locationText || '';
-}
-function getFirstLocation(job) {
-    const locs = job.locations;
-    if (!locs?.length)
-        return undefined;
-    return locs[0];
-}
-class JobsListOnlyUI {
+class JobsListOnly {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
@@ -7122,34 +6697,8 @@ class JobsListOnlyUI {
         }
         return [];
     }
-    formatDistance(distance) {
-        const value = this.enableKilometers ? distance * 1.60934 : distance;
-        const unit = this.enableKilometers ? 'Km' : 'Miles';
-        const str = `${value.toFixed(1)} ${unit}`.replace('.0', '');
-        return str;
-    }
-    renderJobItem(job, _index) {
-        const firstLoc = getFirstLocation(job);
-        const locationLabel = firstLoc ? getLocationLabel(firstLoc) : '';
-        const distance = firstLoc?.distance ?? 0;
-        const distanceLabel = distance > 0 ? this.formatDistance(distance) : '';
-        const applyHref = job.applyURL || (job.originalURL ? `${typeof window !== 'undefined' ? window.location.origin : ''}${job.originalURL}` : '#');
-        const applyLabel = `${this.applyButtonText}, ${job.title || ''}`;
-        const locs = job.locations ?? [];
-        const hasMultipleLocations = locs.length > 1;
-        return (hAsync("li", { class: "results-list__item" }, hAsync("div", { class: "results-list__item-header" }, hAsync("h3", { class: "results-list__item-title" }, hAsync("a", { class: "results-list__item-title--link", href: applyHref, target: "_blank", rel: "noopener noreferrer" }, job.title || ''), this.showReference && (hAsync("span", { class: `reference ${job.reference ? '' : 'empty'}` }, job.reference || '')), job.isRemote && (hAsync("span", { class: this.remoteLocationText ? 'remote' : 'remote remote--empty' }, this.remoteLocationText))), distanceLabel && (hAsync("div", { class: "results-list__item-distance" }, hAsync("span", { class: "results-list__item-distance--icon" }, hAsync("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5" }, hAsync("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z" }), hAsync("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M12 8v4l2 2" }))), hAsync("span", { class: "results-list__item-distance--label" }, distanceLabel)))), hAsync("div", { class: "results-list__item-content" }, hAsync("div", { class: "results-list__item-info" }, hAsync("div", { class: locs.length
-                ? 'results-list__item-street'
-                : 'results-list__item-street results-list__item-street--empty' }, hAsync("div", { class: "results-list__item-street--label__wrapper" }, hAsync("span", { class: "results-list__item-street--icon" }, hAsync("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5" }, hAsync("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0z" }), hAsync("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0z" }))), hAsync("span", { class: "results-list__item-street--label" }, locationLabel || '—')), hasMultipleLocations && (hAsync("div", { class: "results-list__item-street--more-locations__wrapper" }, hAsync("span", { class: "results-list__item-street--amount" }, "+", locs.length - 1), hAsync("span", { class: "results-list__item-street--more-locations" }, this.multiLocationText)))), this.showBrand && (hAsync("div", { class: job.brandName
-                ? 'results-list__item-brand'
-                : 'results-list__item-brand results-list__item-brand--empty' }, hAsync("span", { class: "results-list__item-brand--icon" }, hAsync("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5" }, hAsync("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008z" }))), hAsync("span", { class: "results-list__item-brand--label" }, job.brandName || '—'))), this.showEmploymentType && (hAsync("div", { class: job.employmentType?.length
-                ? 'results-list__item-employment-type'
-                : 'results-list__item-employment-type results-list__item-employment-type--empty' }, hAsync("span", { class: "results-list__item-employment-type--icon" }, hAsync("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5" }, hAsync("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0z" }))), (job.employmentType?.length
-            ? job.employmentType
-            : ['—']).map((type) => (hAsync("span", { key: type, class: "results-list__item-employment-type--label" }, type))))), (job.jobCardExtraFields ?? []).map((field, i) => (hAsync("div", { key: i, class: (Array.isArray(field.value) ? field.value.length : field.value)
-                ? field.classname
-                : `${field.classname}--empty` }, Array.isArray(field.value)
-            ? field.value.map((v, j) => (hAsync("span", { key: j, class: `${field.classname}--label` }, v)))
-            : (hAsync("span", { class: `${field.classname}--label` }, String(field.value))))))), hAsync("a", { class: "results-list__item-apply", href: applyHref, target: "_blank", rel: "noopener noreferrer", "aria-label": applyLabel }, hAsync("span", { class: "results-list__item-apply--label" }, this.applyButtonText), hAsync("span", { class: "results-list__item-apply--icon" }, hAsync("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, hAsync("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M13 7l5 5m0 0l-5 5m5-5H6" })))))));
+    renderJobItem(job, index) {
+        return (hAsync("jobs-item", { job: job, index: index, applyButtonText: this.applyButtonText, showBrand: this.showBrand, showReference: this.showReference, showEmploymentType: this.showEmploymentType, multiLocationText: this.multiLocationText, remoteLocationText: this.remoteLocationText, enableKilometers: this.enableKilometers }));
     }
     render() {
         const jobsArray = this.getJobsArray();
@@ -7157,12 +6706,12 @@ class JobsListOnlyUI {
         const totalJob = this.mockData ? jobsArray.length : (this.totalJob || jobsArray.length);
         const showNoResults = !loading && totalJob === 0 && !this.showSuggestions;
         const showSuggestionsBlock = !loading && totalJob === 0 && this.showSuggestions;
-        return (hAsync("div", { key: 'c2e9c9146a24f0869cbd75588b2718c94f62bbbc', class: `jobs-list-root ${this.rootClass}`.trim() }, hAsync("div", { key: 'b2f3dffe7e17797b378bd648f54e46bb31e2d374', class: "results-container" }, hAsync("div", { key: '4733870b035ec307b6e691f1d62ed8568e93fd1f', class: loading ? 'loader' : 'loader hide', "aria-hidden": !loading }), totalJob > 0 && (hAsync("div", { key: 'a9438f079041e0121fafdcb42089f27482475491', class: "card" }, hAsync("ul", { key: '3bd7dcc64f46aec24945a25df7345766606a51bd', class: "results-list front" }, jobsArray.map((job, index) => this.renderJobItem(job, index))))), showNoResults && (hAsync("div", { key: '1996476568c745e0ada31b47bb1a1be2efaf6917', class: "share-jobs__no-results" }, hAsync("h2", { key: '8d2a79881428d89d783b05f26d06abbef94f5c2e' }, this.noResultsLine1), hAsync("h3", { key: '855704ea47b06a701c0e59a8bb43fb405ad3bb96' }, this.noResultsLine2))), showSuggestionsBlock && (hAsync("div", { key: '74da6e8243423dc9770f4dc67f46f5627c352349', class: "card primary-color" }, hAsync("h4", { key: 'd3fb2ef03a656331f97afe3692b05bbe064ed124', class: "result-suggestions-title" }, this.clearResultSuggestionsTitleText, ":"), hAsync("ul", { key: '63914647653930e6c686a38d779af20e7e5c17d5', class: "results-list front" }, hAsync("li", { key: '82063c023701d0c42ca2787f382d42a80f569b6a', class: "result-suggestions-line" }, this.clearResultSuggestionsLine1), hAsync("li", { key: '7645d7a7435f76854b8eeb0d693a883fc341764e', class: "result-suggestions-line" }, this.clearResultSuggestionsLine2), hAsync("li", { key: '060675d017137e8b23342c92efadc769e2bae1c2', class: "result-suggestions-line" }, this.clearResultSuggestionsLine3), this.clearResultSuggestionsLine4 && (hAsync("li", { key: '0f6ef00a4f6267dc9ad2441e16f02c82b0994d03', class: "result-suggestions-line" }, this.clearResultSuggestionsLine4))))))));
+        return (hAsync("div", { key: '9e69d40c649b4f16617f522c89bc87d4cbffe1e3', class: `jobs-list-root ${this.rootClass}`.trim() }, hAsync("div", { key: '7daf1c09dd1d5553a335f3c81c894a331964ee96', class: "results-container" }, hAsync("div", { key: '9ab3db2b834359a64faee61f8c3dc2daca8211d9', class: loading ? 'loader' : 'loader hide', "aria-hidden": !loading }), totalJob > 0 && (hAsync("div", { key: 'c729ccdf715105b9fbc7af0a1f148c82535772c1', class: "card" }, hAsync("ul", { key: 'b0c5b6baccf7b94819cc2ad9ab970981a5294b42', class: "results-list front" }, jobsArray.map((job, index) => this.renderJobItem(job, index))))), showNoResults && (hAsync("div", { key: '8f1684ddde51474e9c1699f93fb01c56e5406a51', class: "share-jobs__no-results" }, hAsync("h2", { key: '2e3bc4b6b7647e3939588102d659e777207e46e9' }, this.noResultsLine1), hAsync("h3", { key: 'f4881f19ad5db8fdd47aa4d31e1e0435f08da1ab' }, this.noResultsLine2))), showSuggestionsBlock && (hAsync("div", { key: 'ed34907fd90f28571786045f21525895cef6e98a', class: "card primary-color" }, hAsync("h4", { key: '33e96147f1b427df874656c1e0647af1d97fea29', class: "result-suggestions-title" }, this.clearResultSuggestionsTitleText, ":"), hAsync("ul", { key: '570fd8e5068f1a7c809fad47347fe5f469da8bc6', class: "results-list front" }, hAsync("li", { key: 'b5d22dfb448d2888dc010d6e494d1834d3d60034', class: "result-suggestions-line" }, this.clearResultSuggestionsLine1), hAsync("li", { key: '77c1e8bbe9ab238e4f05fdbaf43551aef4f2a36e', class: "result-suggestions-line" }, this.clearResultSuggestionsLine2), hAsync("li", { key: '0bd9503bf686213ae087f74a7b5f2cc62f9c96b7', class: "result-suggestions-line" }, this.clearResultSuggestionsLine3), this.clearResultSuggestionsLine4 && (hAsync("li", { key: '961b2904347e1c5fc6b355a069790f0f2997917f', class: "result-suggestions-line" }, this.clearResultSuggestionsLine4))))))));
     }
-    static get style() { return jobsListOnlyUiCss(); }
+    static get style() { return jobsListOnlyCss(); }
     static get cmpMeta() { return {
         "$flags$": 512,
-        "$tagName$": "jobs-list-only-ui",
+        "$tagName$": "jobs-list-only",
         "$members$": {
             "mockData": [4, "mock-data"],
             "jobs": [1],
@@ -7195,7 +6744,8 @@ class JobsListOnlyUI {
 registerComponents([
   AppCarousel,
   CustomButton,
-  JobsListOnlyUI,
+  JobsItem,
+  JobsListOnly,
 ]);
 
 exports.hydrateApp = hydrateApp;