@brightspot/ui 5.4.2 → 5.4.3-pr.192

package/dist/storybook/project.json

@@ -1 +1 @@
-{"generatedAt":1784580333470,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":true,"refCount":0,"knownPackages":{"testPackages":{"@storybook/addon-vitest":"10.2.12","@vitest/browser-playwright":"4.0.18","playwright":"1.58.2","vitest":"4.0.18"},"stylingPackages":{"tailwindcss":"^3.4.13","autoprefixer":"10.4.21"}},"hasRouterPackage":false,"packageManager":{"type":"yarn","agent":"yarn","nodeLinker":"undefined"},"preview":{"usesGlobals":true},"framework":{"name":"@storybook/web-components-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/web-components","portableStoriesFileCount":0,"applicationFileCount":6,"storybookVersion":"10.2.12","storybookVersionSpecifier":"10.2.12","language":"typescript","storybookPackages":{"@storybook/addon-themes":{"version":"10.2.12"},"@storybook/web-components-vite":{"version":"10.2.12"},"@wc-toolkit/storybook-helpers":{"version":"10.0.0"},"eslint-plugin-storybook":{"version":"10.0.7"},"storybook":{}},"addons":{"@storybook/addon-docs":{"version":"10.2.12"},"@storybook/addon-vitest":{"version":"10.2.12"}},"packageJsonType":"module"}
+{"generatedAt":1784655174620,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":true,"refCount":0,"knownPackages":{"testPackages":{"@storybook/addon-vitest":"10.2.12","@vitest/browser-playwright":"4.0.18","playwright":"1.58.2","vitest":"4.0.18"},"stylingPackages":{"tailwindcss":"^3.4.13","autoprefixer":"10.4.21"}},"hasRouterPackage":false,"packageManager":{"type":"yarn","agent":"yarn","nodeLinker":"undefined"},"preview":{"usesGlobals":true},"framework":{"name":"@storybook/web-components-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/web-components","portableStoriesFileCount":0,"applicationFileCount":6,"storybookVersion":"10.2.12","storybookVersionSpecifier":"10.2.12","language":"typescript","storybookPackages":{"@storybook/addon-themes":{"version":"10.2.12"},"@storybook/web-components-vite":{"version":"10.2.12"},"@wc-toolkit/storybook-helpers":{"version":"10.0.0"},"eslint-plugin-storybook":{"version":"10.0.7"},"storybook":{}},"addons":{"@storybook/addon-docs":{"version":"10.2.12"},"@storybook/addon-vitest":{"version":"10.2.12"}},"packageJsonType":"module"}

package/dist/tailwind-plugin-badge.js

@@ -1,6 +1,6 @@
 import plugin from 'tailwindcss/plugin';
 const className = '.btu-badge';
-module.exports = plugin(function ({ addComponents, theme, e, matchUtilities, addUtilities }) {
+module.exports = plugin(function ({ addBase, addComponents, theme, e, matchUtilities, addUtilities }) {
     const sizes = theme('badgeSize');
     const colors = theme('colors');
     const fontSizes = theme('fontSize');
@@ -31,18 +31,53 @@ module.exports = plugin(function ({ addComponents, theme, e, matchUtilities, add
     }, {});
     if (colors) {
         const badgeColors = [];
+        // The `busy` activity renders as a text shimmer: a lighter glint sweeps
+        // across the label while the pill fill stays put. The gradient + text
+        // clip live on the per-color compound (`.btu-badge-<color>.btu-badge-
+        // activity-busy`), NOT the bare `.btu-badge-activity-busy` — so the class
+        // can never clip a non-existent background to invisible glyphs on its own.
+        // Dark mode swaps the glint for a lighter, highly saturated version of the
+        // badge's OWN background (pale dark-mode text has no lightness headroom, so
+        // it pops via saturation); chroma is bumped past the gamut edge on purpose
+        // and the browser maps it back to the most saturated in-gamut value.
+        const lightGlint = 'oklch(from currentColor calc(l + 0.38) calc(c * 0.5) h)';
+        const darkGlint = (bg) => `oklch(from ${bg} calc(l + 0.35) calc(c + 0.1) h)`;
+        const darkBusyMedia = {};
         for (const key in colors) {
+            const fill = `var(--badge-color-background, oklch(var(--btu-theme-${key}-50)))`;
+            const busySel = `${className}-${e(key)}${className}-activity-busy`;
+            // layer 0 (gradient) clips to the glyphs; layer 1 (solid fill) is the
+            // pill — its own layer so the two-value background-clip sticks (Chrome
+            // truncates the clip list to the number of background layers).
+            const busyGradient = (glint) => `linear-gradient(100deg, currentColor 0 40%, ${glint} 50%, currentColor 60% 100%), linear-gradient(${fill}, ${fill})`;
             badgeColors.push({
                 [`${className}-${e(key)}`]: {
                     '--icon-size': iconSizes['xs'],
-                    backgroundColor: `var(--badge-color-background, oklch(var(--btu-theme-${key}-50)))`,
+                    backgroundColor: fill,
                     color: `var(--badge-color-foreground, oklch(var(--btu-theme-${key}-700)))`,
                     textDecoration: 'underline',
                     textDecorationColor: `var(--badge-color-background, oklch(var(--btu-theme-${key}-50)))`,
                 },
+                [busySel]: {
+                    backgroundImage: busyGradient(lightGlint),
+                    backgroundSize: '300% 100%, 100% 100%',
+                    backgroundRepeat: 'no-repeat',
+                    backgroundClip: 'text, border-box',
+                    WebkitBackgroundClip: 'text, border-box',
+                    WebkitTextFillColor: 'transparent',
+                },
+                // Dark mode (explicit .is-dark): swap in the saturated background glint.
+                [`.is-dark ${busySel}`]: {
+                    backgroundImage: busyGradient(darkGlint(fill)),
+                },
             });
+            darkBusyMedia[`:root:not([data-theme*='"appearance":"light"']):not(.is-dark) ${busySel}`] = {
+                backgroundImage: busyGradient(darkGlint(fill)),
+            };
         }
         addComponents(badgeColors);
+        // Dark mode via system preference (unless the CMS forced light).
+        addComponents({ '@media (prefers-color-scheme: dark)': darkBusyMedia });
     }
     if (sizes && fontSizes) {
         const badgeSizes = [];
@@ -74,6 +109,87 @@ module.exports = plugin(function ({ addComponents, theme, e, matchUtilities, add
         }
         addComponents(badgeSizes);
     }
+    // ─── Attention: activity="busy" (shimmer) + activity="live" (ping dot) ──
+    // Classes are intent-named (`btu-badge-activity-<state>`); the effect each
+    // maps to is decided here, and the timing/scale literals are internal (no
+    // effect-named public knobs, so the visual can change without a breaking
+    // API change). `busy` keeps the text at its full foreground colour and
+    // sweeps a lighter glint through it — `color` is left intact so
+    // `currentColor` still resolves for the child `<btu-icon>` SVG stroke; the
+    // gradient + clip that reveal the glint live on the per-color compound above.
+    addComponents({
+        // Bare class carries only the (color-agnostic) animation; the gradient
+        // and text-clip are on the per-color compound, so this alone is a no-op.
+        '.btu-badge-activity-busy': {
+            animation: 'btu-badge-shimmer 2.2s linear infinite',
+        },
+        // Only the label text shimmers — keep child icons at their normal
+        // colour (reset the inherited transparent text-fill so glyph-font icons
+        // don't disappear; SVG icons are unaffected either way).
+        '.btu-badge-activity-busy :is(btu-icon, svg)': {
+            WebkitTextFillColor: 'currentColor',
+        },
+        // Solid dot (::before) plus a clone (::after) that starts at the dot's
+        // size and scales up + fades out — a ping rippling from the centre.
+        // flex-start anchors the dot at the padding edge where the ::after ping
+        // is positioned; without it, the size rules' justify-content:center +
+        // min-width would recenter short content and offset the ping from the dot.
+        '.btu-badge-activity-live': {
+            position: 'relative',
+            justifyContent: 'flex-start',
+        },
+        '.btu-badge-activity-live::after': {
+            content: "''",
+            position: 'absolute',
+            // Overlay the leading dot: its left edge sits at the badge's
+            // padding-inline-start, vertically centred.
+            insetInlineStart: 'var(--badge-px)',
+            top: '50%',
+            marginTop: 'calc(var(--badge-dot-size, 6px) / -2)',
+            width: 'var(--badge-dot-size, 6px)',
+            height: 'var(--badge-dot-size, 6px)',
+            borderRadius: '9999px',
+            backgroundColor: 'currentColor',
+            transformOrigin: 'center',
+            pointerEvents: 'none',
+            animation: 'btu-badge-dot-ping 1.6s ease-out infinite',
+        },
+        // ── Reduced motion: settle to the resting state, no looping ──
+        // animation-fill-mode: forwards holds the final keyframe (ping: opacity 0
+        // / invisible; shimmer: band off the glyphs) instead of reverting to the
+        // base — otherwise the ping ::after snaps back to a static opaque dot.
+        '@media (prefers-reduced-motion: reduce)': {
+            '.btu-badge-activity-live::after': {
+                animationIterationCount: '1',
+                animationDuration: '0.01ms',
+                animationFillMode: 'forwards',
+            },
+            '.btu-badge-activity-busy': {
+                animationIterationCount: '1',
+                animationDuration: '0.01ms',
+                animationFillMode: 'forwards',
+            },
+        },
+    });
+    // Keyframes must be registered via addBase (not addComponents).
+    addBase({
+        '@keyframes btu-badge-shimmer': {
+            // Continuous sweep of layer 0 across the glyphs; layer 1 fill stays put.
+            // background-position MUST stay within [0%, 100%]: a 300%-wide no-repeat
+            // gradient only fully covers the element in that range, and the text is
+            // painted solely by this layer — any position outside it exposes bare
+            // glyphs (transparent text-fill) and wipes the label. Within [0%,100%]
+            // the highlight band still travels fully across and off both edges, so
+            // the ends read as a natural rest without ever uncovering the text.
+            '0%': { backgroundPosition: '100% 0, 0 0' },
+            '100%': { backgroundPosition: '0% 0, 0 0' },
+        },
+        '@keyframes btu-badge-dot-ping': {
+            // Start exactly at the dot's size, scale out and fade, then rest.
+            '0%': { transform: 'scale(1)', opacity: '0.6' },
+            '70%, 100%': { transform: 'scale(3)', opacity: '0' },
+        },
+    });
 }, {
     theme: {
         badgeSize: {

package/dist/tailwind-plugin-badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"tailwind-plugin-badge.js","sourceRoot":"","sources":["../src/tailwind-plugin-badge.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,oBAAoB,CAAA;AA4BvC,MAAM,SAAS,GAAG,YAAY,CAAA;AAE9B,MAAM,CAAC,OAAO,GAAG,MAAM,CACrB,UAAU,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC,EAAE,cAAc,EAAE,YAAY,EAAE;IACjE,MAAM,KAAK,GAAG,KAAK,CAAC,WAAW,CAAC,CAAA;IAChC,MAAM,MAAM,GAAoB,KAAK,CAAC,QAAQ,CAAC,CAAA;IAC/C,MAAM,SAAS,GAAkC,KAAK,CAAC,UAAU,CAAC,CAAA;IAClE,MAAM,SAAS,GAAkB,KAAK,CAAC,UAAU,CAAC,IAAI,EAAE,CAAA;IAExD,6DAA6D;IAC7D,cAAc,CACZ;QACE,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC;YAChC,0BAA0B,EAAE,KAAK;SAClC,CAAC;KACH,EACD,EAAE,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,EAAE,CACpD,CAAA;IAED,cAAc,CACZ;QACE,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC;YAChC,0BAA0B,EAAE,KAAK;SAClC,CAAC;KACH,EACD,EAAE,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,EAAE,CACpD,CAAA;IAED,YAAY,CACV;QACE,gBAAgB,EAAE;YAChB,kBAAkB,EAAE,KAAK;YACzB,WAAW,EAAE;gBACX,OAAO,EAAE,IAAI;gBACb,OAAO,EAAE,cAAc;gBACvB,KAAK,EAAE,uBAAuB;gBAC9B,MAAM,EAAE,uBAAuB;gBAC/B,eAAe,EAAE,cAAc;gBAC/B,QAAQ,EAAE,uBAAuB;aAClC;SACF;KACF,EACD,EAAE,CACH,CAAA;IAED,IAAI,MAAM,EAAE,CAAC;QACX,MAAM,WAAW,GAAoB,EAAE,CAAA;QACvC,KAAK,MAAM,GAAG,IAAI,MAAM,EAAE,CAAC;YACzB,WAAW,CAAC,IAAI,CAAC;gBACf,CAAC,GAAG,SAAS,IAAI,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE;oBAC1B,aAAa,EAAE,SAAS,CAAC,IAAI,CAAC;oBAC9B,eAAe,EAAE,uDAAuD,GAAG,QAAQ;oBACnF,KAAK,EAAE,uDAAuD,GAAG,SAAS;oBAC1E,cAAc,EAAE,WAAW;oBAC3B,mBAAmB,EAAE,uDAAuD,GAAG,QAAQ;iBACxF;aACF,CAAC,CAAA;QACJ,CAAC;QACD,aAAa,CAAC,WAAW,CAAC,CAAA;IAC5B,CAAC;IAED,IAAI,KAAK,IAAI,SAAS,EAAE,CAAC;QACvB,MAAM,UAAU,GAAoB,EAAE,CAAA;QACtC,MAAM,cAAc,GAAG;YACrB,OAAO,EAAE,cAAc;YACvB,YAAY,EAAE,iCAAiC;SAChD,CAAA;QAED,KAAK,MAAM,GAAG,IAAI,KAAK,EAAE,CAAC;YACxB,MAAM,IAAI,GAAS,KAAK,CAAC,GAAG,CAAC,CAAA;YAC7B,MAAM,QAAQ,GAAG,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;YAEzC,IAAI,QAAQ,EAAE,CAAC;gBACb,UAAU,CAAC,IAAI,CAAC;oBACd,CAAC,GAAG,SAAS,IAAI,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE;wBAC1B,YAAY,EAAE,IAAI,CAAC,EAAE;wBACrB,YAAY,EAAE,IAAI,CAAC,EAAE;wBACrB,UAAU,EAAE,QAAQ;wBACpB,cAAc,EAAE,QAAQ;wBACxB,GAAG,EAAE,SAAS;wBACd,GAAG,cAAc;wBACjB,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;wBACrB,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC;wBACvB,OAAO,EAAE,iCAAiC;wBAC1C,QAAQ,EAAE,IAAI,CAAC,QAAQ;wBACvB,QAAQ,EAAE,aAAa;wBACvB,OAAO,EAAE,aAAa;qBACvB;iBACF,CAAC,CAAA;YACJ,CAAC;QACH,CAAC;QACD,aAAa,CAAC,UAAU,CAAC,CAAA;IAC3B,CAAC;AACH,CAAC,EACD;IACE,KAAK,EAAE;QACL,SAAS,EAAE;YACT,EAAE,EAAE;gBACF,EAAE,EAAE,QAAQ;gBACZ,EAAE,EAAE,QAAQ;gBACZ,QAAQ,EAAE,IAAI;gBACd,QAAQ,EAAE,UAAU;aACrB;YACD,EAAE,EAAE;gBACF,EAAE,EAAE,SAAS;gBACb,EAAE,EAAE,QAAQ;gBACZ,QAAQ,EAAE,IAAI;gBACd,QAAQ,EAAE,UAAU;aACrB;YACD,EAAE,EAAE;gBACF,EAAE,EAAE,SAAS;gBACb,EAAE,EAAE,QAAQ;gBACZ,QAAQ,EAAE,IAAI;gBACd,QAAQ,EAAE,UAAU;aACrB;SACF;KACF;CACF,CACF,CAAA"}
+{"version":3,"file":"tailwind-plugin-badge.js","sourceRoot":"","sources":["../src/tailwind-plugin-badge.ts"],"names":[],"mappings":"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"}

package/dist/tailwind-plugin-badge.ts

@@ -17,6 +17,17 @@ declare let module: any
  *  Base   ->  btu-badge-lg btu-badge-purple
  *  Dot    ->  btu-badge-lg btu-badge-primary before:size-2 before:rounded-lg before:bg-[currentColor] before:[content:'']
  *  Close  ->  btu-badge-lg btu-badge-error after:btu-icon after:btu-icon-x
+ *
+ * Attention (draw the eye). Classes are named by intent, not by effect, so the
+ * visual can change without touching callers (see the `activity` attribute):
+ *
+ *  btu-badge-activity-busy   - In-progress. A glint of the badge's own foreground
+ *                              color sweeps across the label text (gradient clipped
+ *                              to the glyphs; pill fill preserved; icons/dot unaffected).
+ *                              Combine with a btu-badge-<color> class — that compound
+ *                              carries the gradient; the bare class alone is a no-op.
+ *  btu-badge-activity-live   - Live/active. A ring ripples outward from the leading
+ *                              dot (implies btu-badge-dot).
  */
 
 type Size = {
@@ -29,7 +40,7 @@ type Size = {
 const className = '.btu-badge'
 
 module.exports = plugin(
-  function ({ addComponents, theme, e, matchUtilities, addUtilities }) {
+  function ({ addBase, addComponents, theme, e, matchUtilities, addUtilities }) {
     const sizes = theme('badgeSize')
     const colors: [CSSRuleObject] = theme('colors')
     const fontSizes: Record<string, CSSRuleObject> = theme('fontSize')
@@ -73,18 +84,54 @@ module.exports = plugin(
 
     if (colors) {
       const badgeColors: CSSRuleObject[] = []
+      // The `busy` activity renders as a text shimmer: a lighter glint sweeps
+      // across the label while the pill fill stays put. The gradient + text
+      // clip live on the per-color compound (`.btu-badge-<color>.btu-badge-
+      // activity-busy`), NOT the bare `.btu-badge-activity-busy` — so the class
+      // can never clip a non-existent background to invisible glyphs on its own.
+      // Dark mode swaps the glint for a lighter, highly saturated version of the
+      // badge's OWN background (pale dark-mode text has no lightness headroom, so
+      // it pops via saturation); chroma is bumped past the gamut edge on purpose
+      // and the browser maps it back to the most saturated in-gamut value.
+      const lightGlint = 'oklch(from currentColor calc(l + 0.38) calc(c * 0.5) h)'
+      const darkGlint = (bg: string) => `oklch(from ${bg} calc(l + 0.35) calc(c + 0.1) h)`
+      const darkBusyMedia: CSSRuleObject = {}
       for (const key in colors) {
+        const fill = `var(--badge-color-background, oklch(var(--btu-theme-${key}-50)))`
+        const busySel = `${className}-${e(key)}${className}-activity-busy`
+        // layer 0 (gradient) clips to the glyphs; layer 1 (solid fill) is the
+        // pill — its own layer so the two-value background-clip sticks (Chrome
+        // truncates the clip list to the number of background layers).
+        const busyGradient = (glint: string) =>
+          `linear-gradient(100deg, currentColor 0 40%, ${glint} 50%, currentColor 60% 100%), linear-gradient(${fill}, ${fill})`
         badgeColors.push({
           [`${className}-${e(key)}`]: {
             '--icon-size': iconSizes['xs'],
-            backgroundColor: `var(--badge-color-background, oklch(var(--btu-theme-${key}-50)))`,
+            backgroundColor: fill,
             color: `var(--badge-color-foreground, oklch(var(--btu-theme-${key}-700)))`,
             textDecoration: 'underline',
             textDecorationColor: `var(--badge-color-background, oklch(var(--btu-theme-${key}-50)))`,
           },
+          [busySel]: {
+            backgroundImage: busyGradient(lightGlint),
+            backgroundSize: '300% 100%, 100% 100%',
+            backgroundRepeat: 'no-repeat',
+            backgroundClip: 'text, border-box',
+            WebkitBackgroundClip: 'text, border-box',
+            WebkitTextFillColor: 'transparent',
+          },
+          // Dark mode (explicit .is-dark): swap in the saturated background glint.
+          [`.is-dark ${busySel}`]: {
+            backgroundImage: busyGradient(darkGlint(fill)),
+          },
         })
+        darkBusyMedia[`:root:not([data-theme*='"appearance":"light"']):not(.is-dark) ${busySel}`] = {
+          backgroundImage: busyGradient(darkGlint(fill)),
+        }
       }
       addComponents(badgeColors)
+      // Dark mode via system preference (unless the CMS forced light).
+      addComponents({ '@media (prefers-color-scheme: dark)': darkBusyMedia })
     }
 
     if (sizes && fontSizes) {
@@ -119,6 +166,91 @@ module.exports = plugin(
       }
       addComponents(badgeSizes)
     }
+
+    // ─── Attention: activity="busy" (shimmer) + activity="live" (ping dot) ──
+    // Classes are intent-named (`btu-badge-activity-<state>`); the effect each
+    // maps to is decided here, and the timing/scale literals are internal (no
+    // effect-named public knobs, so the visual can change without a breaking
+    // API change). `busy` keeps the text at its full foreground colour and
+    // sweeps a lighter glint through it — `color` is left intact so
+    // `currentColor` still resolves for the child `<btu-icon>` SVG stroke; the
+    // gradient + clip that reveal the glint live on the per-color compound above.
+    addComponents({
+      // Bare class carries only the (color-agnostic) animation; the gradient
+      // and text-clip are on the per-color compound, so this alone is a no-op.
+      '.btu-badge-activity-busy': {
+        animation: 'btu-badge-shimmer 2.2s linear infinite',
+      },
+      // Only the label text shimmers — keep child icons at their normal
+      // colour (reset the inherited transparent text-fill so glyph-font icons
+      // don't disappear; SVG icons are unaffected either way).
+      '.btu-badge-activity-busy :is(btu-icon, svg)': {
+        WebkitTextFillColor: 'currentColor',
+      },
+
+      // Solid dot (::before) plus a clone (::after) that starts at the dot's
+      // size and scales up + fades out — a ping rippling from the centre.
+      // flex-start anchors the dot at the padding edge where the ::after ping
+      // is positioned; without it, the size rules' justify-content:center +
+      // min-width would recenter short content and offset the ping from the dot.
+      '.btu-badge-activity-live': {
+        position: 'relative',
+        justifyContent: 'flex-start',
+      },
+      '.btu-badge-activity-live::after': {
+        content: "''",
+        position: 'absolute',
+        // Overlay the leading dot: its left edge sits at the badge's
+        // padding-inline-start, vertically centred.
+        insetInlineStart: 'var(--badge-px)',
+        top: '50%',
+        marginTop: 'calc(var(--badge-dot-size, 6px) / -2)',
+        width: 'var(--badge-dot-size, 6px)',
+        height: 'var(--badge-dot-size, 6px)',
+        borderRadius: '9999px',
+        backgroundColor: 'currentColor',
+        transformOrigin: 'center',
+        pointerEvents: 'none',
+        animation: 'btu-badge-dot-ping 1.6s ease-out infinite',
+      },
+
+      // ── Reduced motion: settle to the resting state, no looping ──
+      // animation-fill-mode: forwards holds the final keyframe (ping: opacity 0
+      // / invisible; shimmer: band off the glyphs) instead of reverting to the
+      // base — otherwise the ping ::after snaps back to a static opaque dot.
+      '@media (prefers-reduced-motion: reduce)': {
+        '.btu-badge-activity-live::after': {
+          animationIterationCount: '1',
+          animationDuration: '0.01ms',
+          animationFillMode: 'forwards',
+        },
+        '.btu-badge-activity-busy': {
+          animationIterationCount: '1',
+          animationDuration: '0.01ms',
+          animationFillMode: 'forwards',
+        },
+      },
+    })
+
+    // Keyframes must be registered via addBase (not addComponents).
+    addBase({
+      '@keyframes btu-badge-shimmer': {
+        // Continuous sweep of layer 0 across the glyphs; layer 1 fill stays put.
+        // background-position MUST stay within [0%, 100%]: a 300%-wide no-repeat
+        // gradient only fully covers the element in that range, and the text is
+        // painted solely by this layer — any position outside it exposes bare
+        // glyphs (transparent text-fill) and wipes the label. Within [0%,100%]
+        // the highlight band still travels fully across and off both edges, so
+        // the ends read as a natural rest without ever uncovering the text.
+        '0%': { backgroundPosition: '100% 0, 0 0' },
+        '100%': { backgroundPosition: '0% 0, 0 0' },
+      },
+      '@keyframes btu-badge-dot-ping': {
+        // Start exactly at the dot's size, scale out and fade, then rest.
+        '0%': { transform: 'scale(1)', opacity: '0.6' },
+        '70%, 100%': { transform: 'scale(3)', opacity: '0' },
+      },
+    })
   },
   {
     theme: {

package/docs/components/Badge.md

@@ -17,11 +17,12 @@
 
 ### Fields
 
-| Name      | Privacy | Type                                                       | Default  | Description                                                                                                                                                                                                                       | Inherited From |
-| --------- | ------- | ---------------------------------------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
-| `variant` |         | `'info' \| 'primary' \| 'error' \| 'success' \| 'warning'` | `'info'` | Style of the badge.
- 'info': Informational (default)
- 'primary': Primary action or emphasis
- 'error': Error or danger state
- 'success': Success or completion state
- 'warning': Warning or caution state |                |
-| `dot`     |         | `boolean`                                                  | `false`  | Should a dot be displayed before the label?                                                                                                                                                                                       |                |
-| `size`    |         | `'sm' \| 'md' \| 'lg'`                                     | `'sm'`   | Size variant.
- 'sm': Small (default)
- 'md': Medium
- 'lg': Large                                                                                                                                                    |                |
+| Name       | Privacy | Type                                                       | Default  | Description                                                                                                                                                                                                                                                                                                                            | Inherited From |
+| ---------- | ------- | ---------------------------------------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
+| `variant`  |         | `'info' \| 'primary' \| 'error' \| 'success' \| 'warning'` | `'info'` | Style of the badge.
- 'info': Informational (default)
- 'primary': Primary action or emphasis
- 'error': Error or danger state
- 'success': Success or completion state
- 'warning': Warning or caution state                                                                                                      |                |
+| `dot`      |         | `boolean`                                                  | `false`  | Should a dot be displayed before the label?                                                                                                                                                                                                                                                                                            |                |
+| `size`     |         | `'sm' \| 'md' \| 'lg'`                                     | `'sm'`   | Size variant.
- 'sm': Small (default)
- 'md': Medium
- 'lg': Large                                                                                                                                                                                                                                                         |                |
+| `activity` |         | `'busy' \| 'live' \| undefined`                            |          | Attention state that draws the eye to the badge. Names the \*intent\*; the
component owns the visual treatment (so it can change without callers).
- 'busy': an in-progress state — a glint shimmers across the label text
- 'live': a live/active state — a ring ripples out from the leading dot
  (implies \`dot\`) |                |
 
 ### Methods
 
@@ -37,11 +38,12 @@
 
 ### Attributes
 
-| Name      | Field   | Inherited From |
-| --------- | ------- | -------------- |
-| `variant` | variant |                |
-| `dot`     | dot     |                |
-| `size`    | size    |                |
+| Name       | Field    | Inherited From |
+| ---------- | -------- | -------------- |
+| `variant`  | variant  |                |
+| `dot`      | dot      |                |
+| `size`     | size     |                |
+| `activity` | activity |                |
 
 ### CSS Properties
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspot/ui",
-  "version": "5.4.2",
+  "version": "5.4.3-pr.192",
   "type": "module",
   "license": "UNLICENSED",
   "description": "A UI library for building Brightspot CMS components.",

package/src/legacy/tool-ui/src/DashboardWidget.css

@@ -230,7 +230,7 @@ button.DashboardWidget-maximize {
 .DashboardWidget-filters {
   --Input-focusBackground: var(--color-gray2);
 
-  @apply relative flex w-full items-center gap-2 overflow-auto overscroll-x-contain px-[--margin] py-4 transition-opacity [grid-column:fullbleed-start/fullbleed-end];
+  @apply btu-scrollshadow-25 flex w-full items-center gap-2 overflow-auto overscroll-x-contain px-[--margin] py-4 transition-opacity [grid-column:fullbleed-start/fullbleed-end] before:absolute before:row-start-2 before:content-[--whitespace] after:absolute after:row-start-2 after:content-[--whitespace];
 
   form {
     @apply flex w-full min-w-max items-center justify-end gap-2 transition-opacity;

package/src/legacy/tool-ui/src/Entry.ts

@@ -844,6 +844,7 @@ onFind(
     '.Popup[name="AddEmbeddedContent"] .frame',
     '.Popup[name^="conversation-"] .frame',
     '.Popup[name^="_copy"] > .Popup-content > .frame',
+    '.Popup[name="DateStringCalendarFrame"] .frame',
   ],
   (frame: HTMLElement) => {
     const config = { attributeFilter: ['class'] }