@descope-ui/descope-badge 3.1.13 → 3.2.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [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/e2e/descope-badge.spec.ts

@@ -7,7 +7,9 @@ const componentAttributes = {
   bordered: ['true', 'false'],
   mode: ['default', 'primary', 'secondary', 'success', 'error'],
   size: ['xs', 'sm', 'md', 'lg'],
+  variant: ['contained'],
   'full-width': ['true', 'false'],
+  'shrink-to-indicator': ['true'],
 };
 
 const storyName = 'descope-badge';
@@ -24,6 +26,16 @@ test.describe('theme', () => {
     });
   });
 
+  ['sm', 'md', 'lg', 'xl'].forEach((shadow) => {
+    test(`shadow: ${shadow}`, async ({ page }) => {
+      await page.goto(getStoryUrl(storyName, { shadow }), {
+        waitUntil: 'networkidle',
+      });
+      const component = createBadgeTestDriver(page.locator(componentName));
+      expect(await component.screenshot({ padding: 20 })).toMatchSnapshot();
+    });
+  });
+
   test(`direction: rtl`, async ({ page }) => {
     await page.goto(
       getStoryUrl(storyName, { direction: 'rtl', text: `-Label` }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope-ui/descope-badge",
-  "version": "3.1.13",
+  "version": "3.2.0",
   "exports": {
     ".": {
       "import": "./src/component/index.js"
@@ -14,13 +14,13 @@
   },
   "devDependencies": {
     "@playwright/test": "1.58.2",
-    "e2e-utils": "3.1.13",
-    "test-assets": "3.1.13",
-    "test-drivers": "3.1.13"
+    "e2e-utils": "3.2.0",
+    "test-assets": "3.2.0",
+    "test-drivers": "3.2.0"
   },
   "dependencies": {
-    "@descope-ui/common": "3.1.13",
-    "@descope-ui/theme-globals": "3.1.13"
+    "@descope-ui/common": "3.2.0",
+    "@descope-ui/theme-globals": "3.2.0"
   },
   "publishConfig": {
     "link-workspace-packages": false

package/src/component/BadgeClass.js

@@ -4,9 +4,11 @@ import {
   draggableMixin,
 } from '@descope-ui/common/components-mixins';
 import { createBaseClass } from '@descope-ui/common/base-classes';
-import { getComponentName } from '@descope-ui/common/components-helpers';
+import {
+  getComponentName,
+  injectStyle,
+} from '@descope-ui/common/components-helpers';
 import { compose } from '@descope-ui/common/utils';
-import { injectStyle } from '@descope-ui/common/components-helpers';
 
 export const componentName = getComponentName('badge');
 
@@ -29,6 +31,7 @@ class RawBadge extends createBaseClass({
         display: inline-flex;
       }
       :host > div {
+        position: relative;
         width: 100%;
         text-overflow: ellipsis;
         overflow: hidden;
@@ -44,6 +47,7 @@ export const BadgeClass = compose(
   createStyleMixin({
     mappings: {
       hostWidth: [{ selector: () => ':host', property: 'width' }],
+      hostHeight: [{ selector: () => ':host', property: 'height' }],
       hostDirection: { property: 'direction' },
 
       fontFamily: {},
@@ -68,6 +72,8 @@ export const BadgeClass = compose(
 
       textColor: { property: 'color' },
       textAlign: {},
+      boxShadow: {},
+      textIndent: {},
     },
   }),
   draggableMixin,

package/src/theme.js

@@ -1,12 +1,26 @@
 import globals from '@descope-ui/theme-globals';
-import { getThemeRefs } from '@descope-ui/common/theme-helpers';
-import { BadgeClass } from './component/BadgeClass';
+import {
+  getThemeRefs,
+  createHelperVars,
+} from '@descope-ui/common/theme-helpers';
+import { BadgeClass, componentName } from './component/BadgeClass';
 
 const globalRefs = getThemeRefs(globals);
 
+const [helperTheme, helperRefs] = createHelperVars(
+  {
+    shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
+  },
+  componentName,
+);
+
+const { shadowColor } = helperRefs;
+
 const vars = BadgeClass.cssVarList;
 
 const badge = {
+  ...helperTheme,
+
   [vars.hostWidth]: 'fit-content',
   [vars.hostDirection]: globalRefs.direction,
 
@@ -34,6 +48,26 @@ const badge = {
     lg: { [vars.fontSize]: '18px' },
   },
 
+  variant: {
+    contained: {
+      [vars.backgroundColor]: globalRefs.colors.surface.main,
+    },
+  },
+
+  $breakpoints: {
+    indicator: '(max-width: 65px)',
+  },
+
+  _shrinkToIndicator: {
+    '$breakpoints.indicator': {
+      [vars.hostWidth]: '13px',
+      [vars.hostHeight]: '13px',
+      [vars.borderRadius]: '50%',
+      [vars.fontSize]: '0',
+      [vars.textIndent]: '-9999px',
+    },
+  },
+
   mode: {
     default: {
       [vars.textColor]: globalRefs.colors.surface.dark,
@@ -66,6 +100,21 @@ const badge = {
       },
     },
   },
+
+  shadow: {
+    sm: {
+      [vars.boxShadow]: `${globalRefs.shadow.wide.sm} ${shadowColor}, ${globalRefs.shadow.narrow.sm} ${shadowColor}`,
+    },
+    md: {
+      [vars.boxShadow]: `${globalRefs.shadow.wide.md} ${shadowColor}, ${globalRefs.shadow.narrow.md} ${shadowColor}`,
+    },
+    lg: {
+      [vars.boxShadow]: `${globalRefs.shadow.wide.lg} ${shadowColor}, ${globalRefs.shadow.narrow.lg} ${shadowColor}`,
+    },
+    xl: {
+      [vars.boxShadow]: `${globalRefs.shadow.wide.xl} ${shadowColor}, ${globalRefs.shadow.narrow.xl} ${shadowColor}`,
+    },
+  },
 };
 
 export default badge;

package/stories/descope-badge.stories.js

@@ -7,6 +7,7 @@ import {
   sizeControl,
   borderedControl,
   directionControl,
+  boxShadowControl,
 } from '@descope-ui/common/sb-controls';
 
 const Template = ({
@@ -16,13 +17,19 @@ const Template = ({
   bordered,
   text,
   direction,
+  shadow,
+  variant,
+  'shrink-to-indicator': shrinkToIndicator,
 }) => `
   <descope-badge
     mode="${mode}"
     size="${size}"
     bordered="${bordered}"
+    shadow="${shadow ?? ''}"
     full-width="${fullWidth || false}"
     st-host-direction="${direction ?? ''}"
+    variant="${variant ?? ''}"
+    shrink-to-indicator="${shrinkToIndicator || false}"
   >
     ${text}
   </descope-badge>
@@ -35,6 +42,22 @@ export default {
     panelPosition: 'right',
     controls: { expanded: true },
   },
+  decorators: [
+    (story, { args }) => {
+      if (!args['shrink-to-indicator']) return story(args);
+      return `
+        <style nonce="${window.DESCOPE_NONCE}">
+          .wrapper {
+            width: 20px; overflow: hidden;
+            container-type: inline-size;
+          }
+        </style>
+        <div class="wrapper">
+          ${story(args)}
+        </div>
+      `;
+    },
+  ],
   argTypes: {
     ...textContentControl,
     ...modeControl,
@@ -42,10 +65,18 @@ export default {
     ...sizeControl,
     ...directionControl,
     ...borderedControl,
+    ...boxShadowControl,
     mode: {
       ...modeControl.mode,
       options: ['none', 'default', 'primary', 'secondary', 'success', 'error'],
     },
+    variant: {
+      control: { type: 'select' },
+      options: ['none', 'contained'],
+    },
+    'shrink-to-indicator': {
+      control: 'boolean',
+    },
   },
 };
 
@@ -57,4 +88,5 @@ Default.args = {
   size: 'md',
   bordered: 'true',
   'full-width': 'false',
+  'shrink-to-indicator': false,
 };