@jsswift/ui 1.0.54 → 2.0.1

package/src/01-foundation-helpers.js

@@ -1,44 +1,44 @@
-const UI_SHADOW_TOKENS = new Set(["none", "sm", "md", "lg"]);
-const sizeMap = {
-  xxs: { font: "9px", pad: "2px 5px" },
-  xs: { font: "10px", pad: "2px 6px" },
-  sm: { font: "11px", pad: "2px 7px" },
-  md: { font: "12px", pad: "2px 8px" },
-  lg: { font: "13px", pad: "3px 10px" },
-  xl: { font: "14px", pad: "4px 12px" },
-  xxl: { font: "15px", pad: "5px 14px" },
-  xxxl: { font: "16px", pad: "6px 16px" }
-};
-
-// normalize color is RGB | RGBA | HEX | color name
-const isTokenCSS = (value) => {
-  // se la parola contiene un trattino - è un token
-  if (value.indexOf("-") > -1) return true;
-}
-const normalizeState = (value) => {
-  if (!value) return "";
-  const key = String(value).toLowerCase();
-  return UI_STATE_ALIASES[key] || "";
-};
-
-const normalizeRadius = (value) => {
-  if (value == null) return null;
-  const key = String(value).toLowerCase();
-  if (key === "full") return "xxxl";
-  if (UI_RADIUS_TOKENS.has(key)) return key;
-  return null;
-};
-
-const normalizeShadow = (value) => {
-  if (value === true) return "sm";
-  if (value == null || value === false) return null;
-  const key = String(value).toLowerCase();
-  if (UI_SHADOW_TOKENS.has(key)) return key;
-  return null;
-};
-
-const isUIPlainObject = (value) => value && typeof value === "object" && !value.nodeType && !Array.isArray(value) && !(value instanceof Function);
-const isListItemNode = (value) => value && value.nodeType === 1 && String(value.tagName || "").toLowerCase() === "li";
+const UI_SHADOW_TOKENS = new Set(["none", "sm", "md", "lg"]);
+const sizeMap = {
+  xxs: { font: "9px", pad: "2px 5px" },
+  xs: { font: "10px", pad: "2px 6px" },
+  sm: { font: "11px", pad: "2px 7px" },
+  md: { font: "12px", pad: "2px 8px" },
+  lg: { font: "13px", pad: "3px 10px" },
+  xl: { font: "14px", pad: "4px 12px" },
+  xxl: { font: "15px", pad: "5px 14px" },
+  xxxl: { font: "16px", pad: "6px 16px" }
+};
+
+// normalize color is RGB | RGBA | HEX | color name
+const isTokenCSS = (value) => {
+  // se la parola contiene un trattino - è un token
+  if (value.indexOf("-") > -1) return true;
+}
+const normalizeState = (value) => {
+  if (!value) return "";
+  const key = String(value).toLowerCase();
+  return UI_STATE_ALIASES[key] || "";
+};
+
+const normalizeRadius = (value) => {
+  if (value == null) return null;
+  const key = String(value).toLowerCase();
+  if (key === "full") return "xxxl";
+  if (UI_RADIUS_TOKENS.has(key)) return key;
+  return null;
+};
+
+const normalizeShadow = (value) => {
+  if (value === true) return "sm";
+  if (value == null || value === false) return null;
+  const key = String(value).toLowerCase();
+  if (UI_SHADOW_TOKENS.has(key)) return key;
+  return null;
+};
+
+const isUIPlainObject = (value) => value && typeof value === "object" && !value.nodeType && !Array.isArray(value) && !(value instanceof Function);
+const isListItemNode = (value) => value && value.nodeType === 1 && String(value.tagName || "").toLowerCase() === "li";
 const asNodeArray = (value) => {
   if (value == null || value === false || value === "") return [];
   return Array.isArray(value) ? value : [value];
@@ -49,9 +49,9 @@ JSswift.isListItemNode = isListItemNode;
 JSswift.asNodeArray = asNodeArray;
 
 const UI_RESPONSIVE_DEVICES = [
-  { key: "mobile", aliases: ["mobile", "mobil"], prefix: "cms-" },
-  { key: "tablet", aliases: ["tablet"], prefix: "cms-tablet-" },
-  { key: "pc", aliases: ["pc", "desktop"], prefix: "cms-pc-" }
+  { key: "mobile", aliases: ["mobile", "mobil"], prefix: "jss-" },
+  { key: "tablet", aliases: ["tablet"], prefix: "jss-tablet-" },
+  { key: "pc", aliases: ["pc", "desktop"], prefix: "jss-pc-" }
 ];
 const UI_RESPONSIVE_PROP_KEYS = UI_RESPONSIVE_DEVICES.flatMap((device) => device.aliases);
 const uiResponsiveHasOwn = (obj, key) => Object.prototype.hasOwnProperty.call(obj || {}, key);
@@ -96,7 +96,7 @@ const uiResponsiveClassList = (props = {}, rules = []) => {
       const list = Array.isArray(resolved) ? resolved : [resolved];
       for (const suffix of list) {
         if (!suffix) continue;
-        tokens.push(String(suffix).startsWith("cms-") ? suffix : `${device.prefix}${suffix}`);
+        tokens.push(String(suffix).startsWith("jss-") ? suffix : `${device.prefix}${suffix}`);
       }
     }
   }
@@ -119,7 +119,7 @@ const uiResponsiveDefaultValue = (value, rule = {}) => {
   if (typeof rule.mapValue === "function") return rule.mapValue(value, rule);
   if (typeof value === "number") return rule.number === "raw" ? String(value) : `${value}px`;
   if (rule.token && typeof value === "string" && JSswift.uiSizes?.includes(value)) {
-    return `var(--cms-${rule.token}-${value})`;
+    return `var(--jss-${rule.token}-${value})`;
   }
   return String(value);
 };
@@ -129,7 +129,7 @@ const uiResponsiveSetStyle = (style, name, value) => {
   else style[name] = value;
 };
 const uiResponsiveVarClass = (deviceKey, varName) => {
-  return deviceKey === "mobile" ? `cms-rsp-${varName}` : `cms-rsp-${deviceKey}-${varName}`;
+  return deviceKey === "mobile" ? `jss-rsp-${varName}` : `jss-rsp-${deviceKey}-${varName}`;
 };
 const uiResponsiveAddClass = (target, className) => {
   if (!target || !className) return;
@@ -140,7 +140,13 @@ const uiResponsiveAddClass = (target, className) => {
   target.class = uiClass([target.class, className]);
 };
 const uiApplyResponsiveProps = (target, props = {}, rules = []) => {
-  if (!target || !props || !uiResponsiveHasConfig(props)) return target;
+  if (!target || !props) return target;
+  const configurations = [];
+  for (const device of UI_RESPONSIVE_DEVICES) {
+    const deviceProps = uiResponsivePropsFor(props, device);
+    if (deviceProps) configurations.push([device.key, deviceProps]);
+  }
+  if (!configurations.length) return target;
   const style = target.style || {};
   let hasResponsiveVars = false;
 
@@ -151,22 +157,19 @@ const uiApplyResponsiveProps = (target, props = {}, rules = []) => {
       const value = uiResponsiveDefaultValue(rawValue, rule);
       if (!value) return;
       const varName = rule.var || rule.css;
-      const prefix = deviceKey === "mobile" ? "--cms-rsp-" : `--cms-rsp-${deviceKey}-`;
+      const prefix = deviceKey === "mobile" ? "--jss-rsp-" : `--jss-rsp-${deviceKey}-`;
       uiResponsiveSetStyle(style, `${prefix}${varName}`, value);
       uiResponsiveAddClass(target, uiResponsiveVarClass(deviceKey, varName));
       hasResponsiveVars = true;
     };
 
     setVar("mobile", props);
-    for (const device of UI_RESPONSIVE_DEVICES) {
-      const deviceProps = uiResponsivePropsFor(props, device);
-      if (deviceProps) setVar(device.key, deviceProps);
-    }
+    for (const [deviceKey, deviceProps] of configurations) setVar(deviceKey, deviceProps);
   }
 
   if (hasResponsiveVars) {
     if (!target.nodeType) target.style = style;
-    uiResponsiveAddClass(target, "cms-rsp");
+    uiResponsiveAddClass(target, "jss-rsp");
   }
   return target;
 };
@@ -188,209 +191,209 @@ JSswift.omit = (obj, keys = []) => {
 };
 
 const applyCommonProps = (props = {}) => {
-  const classTokens = [];
-  const style = {};
-
-  classTokens.push(
-    uiWhen(props.clickable, "cms-clickable"),
-    uiWhen(props.dense, "cms-dense"),
-    uiWhen(props.flat, "cms-flat"),
-    uiWhen(props.border, "cms-border"),
-    uiWhen(props.glossy, "cms-glossy"),
-    uiWhen(props.glow, "cms-glow"),
-    uiWhen(props.glass, "cms-glass"),
-    uiWhen(props.shadow, "cms-shadow"),
-    uiWhen(props.outline, "cms-outline"),
-    uiWhen(props.rounded, "cms-rounded"),
-    uiWhen(props.gradient, "cms-gradient"),
-    uiWhen(props.textGradient, "cms-text-gradient"),
-    uiWhen(props.lightShadow, "cms-light-shadow")
-  );
-
-  if (uiIsReactive(props.color)) {
-    classTokens.push(() => {
-      const v = uiUnwrap(props.color);
-      const state = normalizeState(v);
-      return state ? `cms-state-${state}` : "";
-    });
-    style.backgroundColor = () => {
-      const v = uiUnwrap(props.color);
-      const state = normalizeState(v);
-      if (state) return "";
-      if (v && isTokenCSS(String(v))) return `var(--cms-${v})`;
-      return v || "";
-    };
-  } else {
-    const state = normalizeState(props.color);
-    if (state) {
-      classTokens.push(`cms-state-${state}`);
-    } else if (props.color && isTokenCSS(props.color)) {
-      style.backgroundColor = `var(--cms-${props.color})`;
-    } else if (props.color) {
-      style.backgroundColor = props.color;
-    }
-  }
-
-  // facciamo text color per i token
-  if (uiIsReactive(props.textColor)) {
-    style.color = () => {
-      const v = uiUnwrap(props.textColor);
-      if (v && isTokenCSS(String(v))) return `var(--cms-${v})`;
-      return v || "";
-    };
-  } else if (props.textColor && isTokenCSS(props.textColor)) {
-    style.color = `var(--cms-${props.textColor})`;
-  } else if (props.textColor) {
-    style.color = props.textColor;
-  }
-
-  if (uiIsReactive(props.size)) {
-    classTokens.push(() => {
-      const v = uiUnwrap(props.size);
-      if (typeof v === "string" && JSswift.uiSizes?.includes(v)) return `cms-size-${v}`;
-      return "";
-    });
-  } else {
-    const size = props.size;
-    if (typeof size === "string" && JSswift.uiSizes?.includes(size)) {
-      classTokens.push(`cms-size-${size}`);
-    }
-  }
-
-  if (uiIsReactive(props.shadow)) {
-    classTokens.push(() => {
-      const v = uiUnwrap(props.shadow);
-      const shadow = normalizeShadow(v);
-      return shadow ? `cms-shadow-${shadow}` : "";
-    });
-    style.boxShadow = () => {
-      const v = uiUnwrap(props.shadow);
-      const shadow = normalizeShadow(v);
-      if (shadow || v == null || v === false) return "";
-      return typeof v === "string" ? v : "";
-    };
-  } else {
-    const shadow = normalizeShadow(props.shadow);
-    if (shadow) classTokens.push(`cms-shadow-${shadow}`);
-    else if (props.shadow && typeof props.shadow === "string") {
-      style.boxShadow = props.shadow;
-    }
-  }
-
-  if (classTokens.length) {
-    props.class = uiClass([props.class, ...classTokens]);
-  }
-  if (Object.keys(style).length) {
-    props.style = { ...style, ...(props.style || {}) };
-  }
-};
-
-const normalizeArgsBase = JSswift.uiNormalizeArgs;
-JSswift.uiNormalizeArgs = function (args) {
-  const out = normalizeArgsBase(args);
-  const props = out.props || {};
-  if (props && Object.prototype.hasOwnProperty.call(props, "children")) {
-    const propChildren = props.children;
-    if (!out.children || out.children.length === 0) {
-      out.children = Array.isArray(propChildren) ? propChildren : [propChildren];
-    }
-    delete props.children;
-  }
-  applyCommonProps(props);
-  return out;
-};
-
-// --------------------------------
-// 2) UI PRIMITIVES (layout + atoms)
-// --------------------------------
-const UI = window._;
-
-/*
-UI.Row
-UI.Col
-UI.Spacer
-UI.Container
-UI.Card
-UI.Btn
-UI.Input
-UI.Select
-UI.Layout
-UI.Footer
-UI.Toolbar
-UI.Grid
-UI.GridCol
-UI.Icon
-UI.Badge
-UI.Avatar
-UI.Chip
-UI.Tooltip
-UI.List
-UI.Item
-UI.Separator
-UI.Checkbox
-UI.Radio
-UI.Toggle
-UI.Slider
-UI.Rating
+  const classTokens = [];
+  const style = {};
+
+  classTokens.push(
+    uiWhen(props.clickable, "jss-clickable"),
+    uiWhen(props.dense, "jss-dense"),
+    uiWhen(props.flat, "jss-flat"),
+    uiWhen(props.border, "jss-border"),
+    uiWhen(props.glossy, "jss-glossy"),
+    uiWhen(props.glow, "jss-glow"),
+    uiWhen(props.glass, "jss-glass"),
+    uiWhen(props.shadow, "jss-shadow"),
+    uiWhen(props.outline, "jss-outline"),
+    uiWhen(props.rounded, "jss-rounded"),
+    uiWhen(props.gradient, "jss-gradient"),
+    uiWhen(props.textGradient, "jss-text-gradient"),
+    uiWhen(props.lightShadow, "jss-light-shadow")
+  );
+
+  if (uiIsReactive(props.color)) {
+    classTokens.push(() => {
+      const v = uiUnwrap(props.color);
+      const state = normalizeState(v);
+      return state ? `jss-state-${state}` : "";
+    });
+    style.backgroundColor = () => {
+      const v = uiUnwrap(props.color);
+      const state = normalizeState(v);
+      if (state) return "";
+      if (v && isTokenCSS(String(v))) return `var(--jss-${v})`;
+      return v || "";
+    };
+  } else {
+    const state = normalizeState(props.color);
+    if (state) {
+      classTokens.push(`jss-state-${state}`);
+    } else if (props.color && isTokenCSS(props.color)) {
+      style.backgroundColor = `var(--jss-${props.color})`;
+    } else if (props.color) {
+      style.backgroundColor = props.color;
+    }
+  }
+
+  // facciamo text color per i token
+  if (uiIsReactive(props.textColor)) {
+    style.color = () => {
+      const v = uiUnwrap(props.textColor);
+      if (v && isTokenCSS(String(v))) return `var(--jss-${v})`;
+      return v || "";
+    };
+  } else if (props.textColor && isTokenCSS(props.textColor)) {
+    style.color = `var(--jss-${props.textColor})`;
+  } else if (props.textColor) {
+    style.color = props.textColor;
+  }
+
+  if (uiIsReactive(props.size)) {
+    classTokens.push(() => {
+      const v = uiUnwrap(props.size);
+      if (typeof v === "string" && JSswift.uiSizes?.includes(v)) return `jss-size-${v}`;
+      return "";
+    });
+  } else {
+    const size = props.size;
+    if (typeof size === "string" && JSswift.uiSizes?.includes(size)) {
+      classTokens.push(`jss-size-${size}`);
+    }
+  }
+
+  if (uiIsReactive(props.shadow)) {
+    classTokens.push(() => {
+      const v = uiUnwrap(props.shadow);
+      const shadow = normalizeShadow(v);
+      return shadow ? `jss-shadow-${shadow}` : "";
+    });
+    style.boxShadow = () => {
+      const v = uiUnwrap(props.shadow);
+      const shadow = normalizeShadow(v);
+      if (shadow || v == null || v === false) return "";
+      return typeof v === "string" ? v : "";
+    };
+  } else {
+    const shadow = normalizeShadow(props.shadow);
+    if (shadow) classTokens.push(`jss-shadow-${shadow}`);
+    else if (props.shadow && typeof props.shadow === "string") {
+      style.boxShadow = props.shadow;
+    }
+  }
+
+  if (classTokens.length) {
+    props.class = uiClass([props.class, ...classTokens]);
+  }
+  if (Object.keys(style).length) {
+    props.style = { ...style, ...(props.style || {}) };
+  }
+};
+
+const normalizeArgsBase = JSswift.uiNormalizeArgs;
+JSswift.uiNormalizeArgs = function (args) {
+  const out = normalizeArgsBase(args);
+  const props = out.props || {};
+  if (props && Object.prototype.hasOwnProperty.call(props, "children")) {
+    const propChildren = props.children;
+    if (!out.children || out.children.length === 0) {
+      out.children = Array.isArray(propChildren) ? propChildren : [propChildren];
+    }
+    delete props.children;
+  }
+  applyCommonProps(props);
+  return out;
+};
+
+// --------------------------------
+// 2) UI PRIMITIVES (layout + atoms)
+// --------------------------------
+const UI = window._;
+
+/*
+UI.Row
+UI.Col
+UI.Spacer
+UI.Container
+UI.Card
+UI.Btn
+UI.Input
+UI.Select
+UI.Layout
+UI.Footer
+UI.Toolbar
+UI.Grid
+UI.GridCol
+UI.Icon
+UI.Badge
+UI.Avatar
+UI.Chip
+UI.Tooltip
+UI.List
+UI.Item
+UI.Separator
+UI.Checkbox
+UI.Radio
+UI.Toggle
+UI.Slider
+UI.Rating
 UI.Datepicker
 UI.Calendar
 UI.Date
-UI.Time
-UI.Tabs
-UI.RouteTab
-UI.Breadcrumbs
-UI.Pagination
-UI.Spinner
-UI.Progress
-UI.LoadingBar
-UI.Banner
-UI.Header
-UI.Drawer
-UI.Page
-UI.AppShell
-UI.Parallax
-*/
-
-function flattenSlotValue(value) {
-  if (!value) return null;
-  if (!Array.isArray(value)) return value;
-  const out = [];
-  const stack = value.slice();
-  while (stack.length) {
-    const item = stack.shift();
-    if (!item) continue;
-    if (Array.isArray(item)) stack.unshift(...item);
-    else out.push(item);
-  }
-  return out.length ? out : null;
-}
+UI.Time
+UI.Tabs
+UI.RouteTab
+UI.Breadcrumbs
+UI.Pagination
+UI.Spinner
+UI.Progress
+UI.LoadingBar
+UI.Banner
+UI.Header
+UI.Drawer
+UI.Page
+UI.AppShell
+UI.Parallax
+*/
+
+function flattenSlotValue(value) {
+  if (!value) return null;
+  if (!Array.isArray(value)) return value;
+  const out = [];
+  const stack = value.slice();
+  while (stack.length) {
+    const item = stack.shift();
+    if (!item) continue;
+    if (Array.isArray(item)) stack.unshift(...item);
+    else out.push(item);
+  }
+  return out.length ? out : null;
+}
 const STYLE_PROP_TOKEN_MAP = {
-  padding: "p",
-  paddingTop: "p",
-  paddingRight: "p",
-  paddingBottom: "p",
-  paddingLeft: "p",
-  paddingInline: "p",
-  paddingInlineStart: "p",
-  paddingInlineEnd: "p",
-  paddingBlock: "p",
-  paddingBlockStart: "p",
-  paddingBlockEnd: "p",
-  margin: "m",
-  marginTop: "m",
-  marginRight: "m",
-  marginBottom: "m",
-  marginLeft: "m",
-  marginInline: "m",
-  marginInlineStart: "m",
-  marginInlineEnd: "m",
-  marginBlock: "m",
-  marginBlockStart: "m",
-  marginBlockEnd: "m",
-  width: "w",
-  minWidth: "w",
-  maxWidth: "w",
-  height: "h",
+  padding: "p",
+  paddingTop: "p",
+  paddingRight: "p",
+  paddingBottom: "p",
+  paddingLeft: "p",
+  paddingInline: "p",
+  paddingInlineStart: "p",
+  paddingInlineEnd: "p",
+  paddingBlock: "p",
+  paddingBlockStart: "p",
+  paddingBlockEnd: "p",
+  margin: "m",
+  marginTop: "m",
+  marginRight: "m",
+  marginBottom: "m",
+  marginLeft: "m",
+  marginInline: "m",
+  marginInlineStart: "m",
+  marginInlineEnd: "m",
+  marginBlock: "m",
+  marginBlockStart: "m",
+  marginBlockEnd: "m",
+  width: "w",
+  minWidth: "w",
+  maxWidth: "w",
+  height: "h",
   minHeight: "h",
   maxHeight: "h"
 };
@@ -465,78 +468,78 @@ JSswift.uiResponsiveStyleRules = UI_RESPONSIVE_STYLE_RULES;
 JSswift.uiResponsiveCommonStyleRules = UI_RESPONSIVE_COMMON_STYLE_RULES;
 const camelToCssProperty = (name) => name.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
 const applyStyleProp = (obj, value, name, tokenName) => {
-  if (value == null || value === false || value === "") return;
-  obj.style.setProperty(camelToCssProperty(name), unitCover(value, tokenName));
-};
-function setPropertyProps(obj, props) {
-  if (props.size) {
-    if (typeof props.size === "number") {
-      obj.style.setProperty("--cms-font-size", `${props.size}px`);
-    } else if (JSswift.uiSizes.includes(props.size)) {
-      obj.style.setProperty("--cms-font-size", `var(--cms-font-size-${props.size})`);
-    }
-  }
-
+  if (value == null || value === false || value === "") return;
+  obj.style.setProperty(camelToCssProperty(name), unitCover(value, tokenName));
+};
+function setPropertyProps(obj, props) {
+  if (props.size) {
+    if (typeof props.size === "number") {
+      obj.style.setProperty("--jss-font-size", `${props.size}px`);
+    } else if (JSswift.uiSizes.includes(props.size)) {
+      obj.style.setProperty("--jss-font-size", `var(--jss-font-size-${props.size})`);
+    }
+  }
+
   Object.entries(STYLE_PROP_TOKEN_MAP).forEach(([name, tokenName]) => {
     if (uiResponsiveHasProp(props, name)) return;
     applyStyleProp(obj, props[name], name, tokenName);
   });
   uiApplyResponsiveProps(obj, props, UI_RESPONSIVE_COMMON_STYLE_RULES);
-
-  // gradient
-  if (props.gradient) {
-    if (typeof props.gradient == "number") {
-      obj.style.setProperty("--set-gradient-deg", `${props.gradient}deg`);
-    }
-  }
-  // radius
-  if (props.radius) {
-    if (typeof props.radius == "number") {
-      obj.style.setProperty("--set-border-radius", `${props.radius}px`);
-    } else if (JSswift.uiSizes.includes(props.radius)) {
-      obj.style.setProperty("--set-border-radius", `var(--cms-r-${props.radius})`);
-    } else {
-      obj.style.setProperty("--set-border-radius", `${props.radius}`);
-    }
-  }
-
-}
-
-function uiOptionNode(props = {}, ...children) {
-  const el = document.createElement("option");
-  if (props && typeof props === "object") {
-    if (props.value != null) el.value = String(props.value);
-    if (props.label != null) el.label = String(props.label);
-    if (props.disabled != null) el.disabled = !!props.disabled;
-    if (props.selected != null) el.selected = !!props.selected;
-    if (props.class != null) el.className = String(props.class);
-  }
-  const content = children.flat ? children.flat(Infinity) : children;
-  if (content.length) {
-    content.forEach((child) => {
-      if (child == null || child === false) return;
-      if (child instanceof Node) el.appendChild(child);
-      else el.appendChild(document.createTextNode(String(child)));
-    });
-  } else if (props && props.text != null) {
-    el.textContent = String(props.text);
-  }
-  return el;
-}
-
-JSswift.ui.getSlot = (slots, name) => {
-  if (!slots) return null;
-  return Object.prototype.hasOwnProperty.call(slots, name) ? slots[name] : null;
-};
-
-JSswift.ui.renderSlot = (slots, name, ctx, fallback) => {
-  const slot = JSswift.ui.getSlot(slots, name);
-  const hasSlot = slot !== null && slot !== undefined;
-  const raw = hasSlot ? (typeof slot === "function" ? slot(ctx || {}) : slot) : fallback;
-  if (raw == null) return null;
-  return flattenSlotValue(JSswift.ui.slot(raw));
-};
-
+
+  // gradient
+  if (props.gradient) {
+    if (typeof props.gradient == "number") {
+      obj.style.setProperty("--set-gradient-deg", `${props.gradient}deg`);
+    }
+  }
+  // radius
+  if (props.radius) {
+    if (typeof props.radius == "number") {
+      obj.style.setProperty("--set-border-radius", `${props.radius}px`);
+    } else if (JSswift.uiSizes.includes(props.radius)) {
+      obj.style.setProperty("--set-border-radius", `var(--jss-r-${props.radius})`);
+    } else {
+      obj.style.setProperty("--set-border-radius", `${props.radius}`);
+    }
+  }
+
+}
+
+function uiOptionNode(props = {}, ...children) {
+  const el = document.createElement("option");
+  if (props && typeof props === "object") {
+    if (props.value != null) el.value = String(props.value);
+    if (props.label != null) el.label = String(props.label);
+    if (props.disabled != null) el.disabled = !!props.disabled;
+    if (props.selected != null) el.selected = !!props.selected;
+    if (props.class != null) el.className = String(props.class);
+  }
+  const content = children.flat ? children.flat(Infinity) : children;
+  if (content.length) {
+    content.forEach((child) => {
+      if (child == null || child === false) return;
+      if (child instanceof Node) el.appendChild(child);
+      else el.appendChild(document.createTextNode(String(child)));
+    });
+  } else if (props && props.text != null) {
+    el.textContent = String(props.text);
+  }
+  return el;
+}
+
+JSswift.ui.getSlot = (slots, name) => {
+  if (!slots) return null;
+  return Object.prototype.hasOwnProperty.call(slots, name) ? slots[name] : null;
+};
+
+JSswift.ui.renderSlot = (slots, name, ctx, fallback) => {
+  const slot = JSswift.ui.getSlot(slots, name);
+  const hasSlot = slot !== null && slot !== undefined;
+  const raw = hasSlot ? (typeof slot === "function" ? slot(ctx || {}) : slot) : fallback;
+  if (raw == null) return null;
+  return flattenSlotValue(JSswift.ui.slot(raw));
+};
+
 const renderSlotToArray = (slots, name, ctx, fallback) => {
   const v = JSswift.ui.renderSlot(slots, name, ctx, fallback);
   if (!v) return [];
@@ -688,7 +691,7 @@ const uiCreateShortcodeHint = (props = {}, options = {}) => {
   const specs = uiResolveShortcodeList(props);
   if (!uiIsShortcodeVisible(props) || !specs.length || typeof document === "undefined") return null;
   const node = document.createElement("span");
-  node.className = options.className || "cms-shortcode";
+  node.className = options.className || "jss-shortcode";
   node.setAttribute("aria-hidden", "true");
   node.textContent = uiFormatShortcodeList(specs);
   return node;
@@ -799,8 +802,8 @@ const uiFocusShortcutTarget = (target, options = {}) => {
 
 const unitCover = (v, name = 'size') => {
   if (typeof v === "number") return v + "px";
-  if (JSswift.uiSizes.includes(v)) return `var(--cms-${name}-${v})`;
+  if (JSswift.uiSizes.includes(v)) return `var(--jss-${name}-${v})`;
   if (typeof v === "string") return v;
-  return v;
-};
-
+  return v;
+};
+