@descope-ui/common 3.1.13 → 3.2.1

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [3.2.1](https://github.com/descope/web-components-ui/compare/web-components-ui-3.2.0...web-components-ui-3.2.1) (2026-04-16)
+
+## [3.2.0](https://github.com/descope/web-components-ui/compare/web-components-ui-3.1.13...web-components-ui-3.2.0) (2026-04-16)
+
+
+### Features
+
+* add descope-last-auth-badge component ([#982](https://github.com/descope/web-components-ui/issues/982)) ([055b461](https://github.com/descope/web-components-ui/commit/055b4618abbdf518494a2984e56d66e58fdb4809))
+
 ## [3.1.13](https://github.com/descope/web-components-ui/compare/web-components-ui-3.1.12...web-components-ui-3.1.13) (2026-04-15)
 
 ## [3.1.12](https://github.com/descope/web-components-ui/compare/web-components-ui-3.1.11...web-components-ui-3.1.12) (2026-04-15)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope-ui/common",
-  "version": "3.1.13",
+  "version": "3.2.1",
   "dependencies": {
     "element-internals-polyfill": "^1.3.9",
     "color": "^4.2.3",

package/src/constants.js

@@ -1,4 +1,3 @@
 export const DESCOPE_PREFIX = 'descope';
 export const CSS_SELECTOR_SPECIFIER_MULTIPLY = 5;
 export const BASE_THEME_SECTION = 'host';
-export const PORTAL_THEME_PREFIX = '@';

package/src/themeHelpers/index.js

@@ -1,9 +1,5 @@
 import merge from 'lodash.merge';
-import {
-  BASE_THEME_SECTION,
-  DESCOPE_PREFIX,
-  PORTAL_THEME_PREFIX,
-} from '../constants';
+import { BASE_THEME_SECTION, DESCOPE_PREFIX } from '../constants';
 import { isUrl, kebabCase } from '../utils';
 import { getComponentName, getCssVarName } from '../componentsHelpers';
 
@@ -73,9 +69,16 @@ export const globalsThemeToStyle = (theme, themeName = '') => {
 
 function splitAmpersands(str) {
   const match = str.match(/^(&+)?(.*)$/);
-  return [match[1] || "", (match[2] || "")];
+  return [match[1] || '', match[2] || ''];
 }
 
+const CONTAINER_QUERY_PREFIX = '@container';
+const isContainerQuery = (key) => key.startsWith(CONTAINER_QUERY_PREFIX);
+
+const BREAKPOINTS_KEY = '$breakpoints';
+const BREAKPOINTS_REF_PREFIX = '$breakpoints.';
+const isBreakpointRef = (key) => key.startsWith(BREAKPOINTS_REF_PREFIX);
+
 // st attributes are also using selector multiplication
 // so we need to limit the multiplication
 const MAX_SELECTOR_MULTIPLY = 3;
@@ -83,70 +86,114 @@ const MAX_SELECTOR_MULTIPLY = 3;
 const componentsThemeToStyleObj = (componentsTheme) =>
   transformTheme(componentsTheme, [], (path, val) => {
     const [component, ...restPath] = path;
+
+    // skip $breakpoints definitions — they are metadata, not CSS output
+    if (restPath[0] === BREAKPOINTS_KEY) return {};
+
     const property = restPath.pop();
     const componentName = getComponentName(component);
 
     if (property === 'undefined') {
-      // eslint-disable-next-line no-console
-      console.warn(componentName, `theme value: "${val}" is mapped to an invalid property`);
+      console.warn(
+        componentName,
+        `theme value: "${val}" is mapped to an invalid property`,
+      );
     }
 
-    // we need a support for portal components theme (e.g. overlay)
-    // this allows us to generate those themes under different sections
-    // if the theme has root level attribute that starts with #
-    // we are generating a new theme
     let themeName = BASE_THEME_SECTION;
 
-    if (restPath[0] && restPath[0].startsWith(PORTAL_THEME_PREFIX)) {
-      themeName = restPath.shift();
+    // extract @container queries from restPath at any position,
+    // resolving breakpoints.X references via the component's $breakpoints map
+    const componentBreakpoints =
+      componentsTheme[component]?.[BREAKPOINTS_KEY] || {};
+    const resolveKey = (key) =>
+      isBreakpointRef(key)
+        ? `${CONTAINER_QUERY_PREFIX} ${componentBreakpoints[key.slice(BREAKPOINTS_REF_PREFIX.length)]}`
+        : key;
+    const breakpointRefs = restPath.filter(isBreakpointRef);
+    const missingRef = breakpointRefs.find(
+      (key) => !componentBreakpoints[key.slice(BREAKPOINTS_REF_PREFIX.length)],
+    );
+    if (missingRef) {
+      console.warn(
+        componentName,
+        `theme references undefined breakpoint "${missingRef}"`,
+      );
+      return {};
     }
+    const containerQueries = breakpointRefs.map(resolveKey);
+    // remove breakpoint refs from restPath so the remaining parts are processed as attribute selectors
+    restPath.splice(
+      0,
+      restPath.length,
+      ...restPath.filter((s) => !isBreakpointRef(s)),
+    );
 
     // do not start with underscore -> key:value, must have 2 no underscore attrs in a row
     // starts with underscore -> attribute selector
     const attrsSelector = restPath.reduce((acc, section, idx) => {
       const [ampersands, content] = splitAmpersands(section);
       const selectorMultiplier = Math.min(
-        ampersands.length + 1,  // if there are no & we need to multiply by 1
-        MAX_SELECTOR_MULTIPLY
+        ampersands.length + 1, // if there are no & we need to multiply by 1
+        MAX_SELECTOR_MULTIPLY,
       );
 
-      if (content.startsWith('_')) return acc + `[${kebabCase(content.replace(/^_/, ''))}="true"]`.repeat(selectorMultiplier);
+      if (content.startsWith('_'))
+        return (
+          acc +
+          `[${kebabCase(content.replace(/^_/, ''))}="true"]`.repeat(
+            selectorMultiplier,
+          )
+        );
 
       const nextSection = restPath[idx + 1];
 
-      if (typeof nextSection !== 'string' || nextSection.startsWith('_') || nextSection.startsWith('&')) {
-        // eslint-disable-next-line no-console
+      if (
+        typeof nextSection !== 'string' ||
+        nextSection.startsWith('_') ||
+        nextSection.startsWith('&')
+      ) {
         console.error(
           'theme generator',
-          `your theme structure is invalid, attribute "${section}" is followed by "${nextSection}" which is not allowed`
+          `your theme structure is invalid, attribute "${section}" is followed by "${nextSection}" which is not allowed`,
         );
         return acc;
       }
 
-      return acc + `[${kebabCase(content)}="${restPath.splice(idx + 1, 1).join('')}"]`.repeat(selectorMultiplier);
+      return (
+        acc +
+        `[${kebabCase(content)}="${restPath.splice(idx + 1, 1).join('')}"]`.repeat(
+          selectorMultiplier,
+        )
+      );
     }, '');
 
     const selector = `:host${attrsSelector ? `(${attrsSelector})` : ''}`;
 
+    // wrap the selector rule in container queries from innermost to outermost
+    // e.g. ['@container (max-width: 80px)'] + { ':host': { prop: val } }
+    //   => { '@container (max-width: 80px)': { ':host': { prop: val } } }
+    const leaf = containerQueries.reduceRight(
+      (acc, query) => ({ [query]: acc }),
+      { [selector]: { [property]: getCssVarValue(val) } },
+    );
+
     return {
       [componentName]: {
-        [themeName]: {
-          [selector]: {
-            [property]: getCssVarValue(val),
-          },
-        },
+        [themeName]: leaf,
       },
     };
   });
 
 const componentsThemeToStyle = (componentsTheme) =>
-  Object.entries(componentsTheme).reduce(
-    (acc, [selector, vars]) =>
-      `${acc}${selector} { \n${Object.entries(vars)
-        .map(([key, val]) => `${key}: ${val}`)
-        .join(';\n')} \n}\n\n`,
-    '',
-  );
+  Object.entries(componentsTheme).reduce((acc, [key, value]) => {
+    if (isContainerQuery(key)) {
+      return `${acc}${key} {\n${componentsThemeToStyle(value)}}\n\n`;
+    }
+    return `${acc}${key} { \n${Object.entries(value)
+      .map(([prop, val]) => `${prop}: ${val}`)
+      .join(';\n')} \n}\n\n`;
+  }, '');
 
 export const createComponentsTheme = (componentsTheme) => {
   const styleObj = componentsThemeToStyleObj(componentsTheme);