@brightspot/ui 1.10.0 → 3.0.0

package/dist/tailwind-plugin-icon.js

@@ -14,10 +14,12 @@ import { addNameSpaceXML, encodeSVG } from './util/svg.js';
  *
  *  btu-icon - Establishes the standard icon styles and font.
  *  btu-icon-{name-of-icon} - Sets the font glyph to the value of the icon you want.
- *  btu-icon-[xs|sm|md|lg|xl|{arbitary value}] - Size of the icon.
- *  btu-icon-gradient-[primary] - Gradient to use for the icon background.
+ *  btu-icon-[xs|sm|md|lg|xl|{arbitrary value}] - Size of the icon.
+ *  btu-icon-gradient-{color} - Gradient to use for the icon background (ai, primary, error, success, warning, gray, purple, rose, teal).
  *  btu-icon-via-mask-{name of icon} - SVG mask to use given a specific icon name.
- *    - exposes a custom property `--Icon-svg` data URI to set the mask.
+ *    - exposes a custom property `--icon-svg` data URI to set the mask.
+ *  btu-icon-emphasize - Tonal circle + ring behind the icon (derives from currentColor, defaults to primary).
+ *  btu-icon-emphasize-pulse - Adds a one-shot ring spring animation to the emphasize circle.
  *
  * Usages:
  *
@@ -25,7 +27,7 @@ import { addNameSpaceXML, encodeSVG } from './util/svg.js';
  * >   before:btu-icon before:btu-icon-heart
  *
  * A heart icon that is 2rem in size:
- * >   before:btu-icon before:btu-icon-heart before:[--Icon-size:2rem]
+ * >   before:btu-icon before:btu-icon-heart before:[--icon-size:2rem]
  * - or -
  * >   before:btu-icon before:btu-icon-heart before:btu-icon-lg
  *
@@ -33,34 +35,33 @@ import { addNameSpaceXML, encodeSVG } from './util/svg.js';
  * >   before:btu-icon-gradient-primary before:btu-icon-via-mask-heart
  */
 const svgs = {};
-const symbols = /[\r\n%#()<>?[\\\]^`{|}]/g;
 for (const [key, value] of Object.entries(LucideExports)) {
     if (typeof value === 'string') {
         svgs[key] = value;
     }
 }
-module.exports = plugin(function ({ addComponents, matchUtilities, theme }) {
-    const size = 'var(--Icon-size)';
+module.exports = plugin(function ({ addBase, addComponents, matchUtilities, theme }) {
+    const size = 'var(--icon-size)';
     const prefix = '.btu-icon-';
     Object.entries(svgs).forEach(([key, svg]) => {
         addComponents({
             [`${prefix}via-mask`]: {
                 '--size': '1.25rem',
-                mask: 'var(--mask-url, var(--Icon-svg, var(--compat-icon-via-mask))) center / contain no-repeat',
+                mask: 'var(--mask-url, var(--icon-svg, var(--compat-icon-via-mask))) center / contain no-repeat',
                 'mask-mode': 'alpha',
                 'aspect-ratio': '1',
-                'inline-size': 'var(--Icon-size, var(--size))',
-                'block-size': 'var(--Icon-size, var(--size))',
+                'inline-size': 'var(--icon-size, var(--size))',
+                'block-size': 'var(--icon-size, var(--size))',
                 display: 'inline-block',
             },
             [`${prefix}via-mask-${pascalToKebab(key)}`]: {
                 '--size': '1.25rem',
-                '--Icon-svg': `url("data:image/svg+xml,${encodeSVG(addNameSpaceXML(svg))}")`,
-                mask: 'var(--Icon-svg) center / contain no-repeat',
+                '--icon-svg': `url("data:image/svg+xml,${encodeSVG(addNameSpaceXML(svg))}")`,
+                mask: 'var(--icon-svg) center / contain no-repeat',
                 'mask-mode': 'alpha',
                 'aspect-ratio': '1',
-                'inline-size': 'var(--Icon-size, var(--size))',
-                'block-size': 'var(--Icon-size, var(--size))',
+                'inline-size': 'var(--icon-size, var(--size))',
+                'block-size': 'var(--icon-size, var(--size))',
                 display: 'inline-block',
             },
         });
@@ -96,9 +97,9 @@ module.exports = plugin(function ({ addComponents, matchUtilities, theme }) {
             'background-image': value,
             'background-repeat': 'no-repeat',
             'background-position': 'center',
-            'background-size': 'var(--Icon-size, 1.5rem) var(--Icon-size, 1.5rem)',
-            width: 'var(--Icon-size, 1.5rem)',
-            height: 'var(--Icon-size, 1.5rem)',
+            'background-size': 'var(--icon-size, 1.5rem) var(--icon-size, 1.5rem)',
+            width: 'var(--icon-size, 1.5rem)',
+            height: 'var(--icon-size, 1.5rem)',
             display: 'inline-block',
         }),
     }, {
@@ -116,9 +117,112 @@ module.exports = plugin(function ({ addComponents, matchUtilities, theme }) {
     });
     matchUtilities({
         'btu-icon': value => ({
-            '--Icon-size': value,
+            '--icon-size': value,
         }),
     }, { values: theme('iconSize') });
+    /* ─── Emphasize: tonal circle + ring behind icon ─── */
+    function oklch(l, cMul, cMin) {
+        const chroma = cMin != null ? `max(calc(c * ${cMul}), ${cMin})` : `calc(c * ${cMul})`;
+        return `oklch(from currentColor ${l} ${chroma} h)`;
+    }
+    const lightColors = {
+        '--_ring-color': oklch(0.8, 0.5),
+        backgroundColor: oklch(0.93, 0.22),
+        borderColor: oklch(0.97, 0.1),
+    };
+    const darkColors = {
+        '--_ring-color': oklch(0.65, 1.5, 0.08),
+        backgroundColor: oklch(0.69, 1.6, 0.08),
+        borderColor: oklch(0.6, 1.4, 0.06),
+    };
+    const highContrastColors = {
+        '--_ring-color': oklch(0.75, 0.5),
+        backgroundColor: oklch(0.9, 0.35),
+        borderColor: oklch(0.95, 0.2),
+    };
+    /* Pulse ring animation keyframes (pseudo-element scale + fade) */
+    addBase({
+        '@keyframes btu-icon-ring-spring': {
+            '0%': { transform: 'scale(1)', opacity: '0.6' },
+            '35%': { transform: 'scale(var(--_ring-scale))', opacity: '0.4' },
+            '100%': { transform: 'scale(var(--_ring-scale))', opacity: '0' },
+        },
+    });
+    addComponents({
+        '.btu-icon-emphasize': {
+            position: 'relative',
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: '9999px',
+            borderStyle: 'solid',
+            color: 'oklch(var(--btu-theme-primary-600))',
+            ...lightColors,
+        },
+        /* Per-size circle dimensions (border width scales with size per Figma spec) */
+        '.btu-icon-emphasize.btu-icon-xs': {
+            width: '1.5rem',
+            height: '1.5rem',
+            borderWidth: '2px',
+            '--_ring-scale': '1.25',
+        },
+        '.btu-icon-emphasize.btu-icon-sm': {
+            width: '2rem',
+            height: '2rem',
+            borderWidth: '4px',
+            '--_ring-scale': '1.35',
+        },
+        '.btu-icon-emphasize.btu-icon-md': {
+            width: '2.25rem',
+            height: '2.25rem',
+            borderWidth: '6px',
+            '--_ring-scale': '1.4',
+        },
+        '.btu-icon-emphasize.btu-icon-lg': {
+            width: '3rem',
+            height: '3rem',
+            borderWidth: '8px',
+            '--_ring-scale': '1.45',
+        },
+        '.btu-icon-emphasize.btu-icon-xl': {
+            width: '3.5rem',
+            height: '3.5rem',
+            borderWidth: '10px',
+            '--_ring-scale': '1.5',
+        },
+        /* Pulse animation — pseudo-element ring that scales out and fades */
+        '.btu-icon-emphasize-pulse::before': {
+            content: '""',
+            position: 'absolute',
+            inset: '0',
+            borderRadius: '9999px',
+            backgroundColor: 'var(--_ring-color)',
+            opacity: '0',
+            animation: 'btu-icon-ring-spring 1200ms ease-out 200ms both',
+            pointerEvents: 'none',
+        },
+        /* ─── Dark mode ─── */
+        '.is-dark .btu-icon-emphasize': darkColors,
+        '.is-dark .btu-icon-emphasize svg': { color: 'oklch(0.95 0 0)' },
+        '@media (prefers-color-scheme: dark)': {
+            ':root:not([data-theme*=\'"appearance":"light"\']):not(.is-dark) .btu-icon-emphasize': darkColors,
+            ':root:not([data-theme*=\'"appearance":"light"\']):not(.is-dark) .btu-icon-emphasize svg': {
+                color: 'oklch(0.95 0 0)',
+            },
+        },
+        /* ─── High contrast ─── */
+        ':root.is-moreContrast .btu-icon-emphasize': highContrastColors,
+        '@media screen and (prefers-contrast: more) and (forced-colors: none)': {
+            ':root:not(.is-normalContrast) .btu-icon-emphasize': highContrastColors,
+        },
+        /* ─── Reduced motion ─── */
+        '@media (prefers-reduced-motion: reduce)': {
+            '.btu-icon-emphasize-pulse::before': {
+                animationDuration: '0.01ms',
+                animationDelay: '0ms',
+            },
+        },
+    });
 }, {
     theme: {
         iconSize: {

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

@@ -1 +1 @@
-{"version":3,"file":"tailwind-plugin-icon.js","sourceRoot":"","sources":["../src/tailwind-plugin-icon.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"tailwind-plugin-icon.js","sourceRoot":"","sources":["../src/tailwind-plugin-icon.ts"],"names":[],"mappings":"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"}

package/dist/tailwind-plugin-icon.ts

@@ -16,10 +16,12 @@ declare let module: any
  *
  *  btu-icon - Establishes the standard icon styles and font.
  *  btu-icon-{name-of-icon} - Sets the font glyph to the value of the icon you want.
- *  btu-icon-[xs|sm|md|lg|xl|{arbitary value}] - Size of the icon.
- *  btu-icon-gradient-[primary] - Gradient to use for the icon background.
+ *  btu-icon-[xs|sm|md|lg|xl|{arbitrary value}] - Size of the icon.
+ *  btu-icon-gradient-{color} - Gradient to use for the icon background (ai, primary, error, success, warning, gray, purple, rose, teal).
  *  btu-icon-via-mask-{name of icon} - SVG mask to use given a specific icon name.
- *    - exposes a custom property `--Icon-svg` data URI to set the mask.
+ *    - exposes a custom property `--icon-svg` data URI to set the mask.
+ *  btu-icon-emphasize - Tonal circle + ring behind the icon (derives from currentColor, defaults to primary).
+ *  btu-icon-emphasize-pulse - Adds a one-shot ring spring animation to the emphasize circle.
  *
  * Usages:
  *
@@ -27,7 +29,7 @@ declare let module: any
  * >   before:btu-icon before:btu-icon-heart
  *
  * A heart icon that is 2rem in size:
- * >   before:btu-icon before:btu-icon-heart before:[--Icon-size:2rem]
+ * >   before:btu-icon before:btu-icon-heart before:[--icon-size:2rem]
  * - or -
  * >   before:btu-icon before:btu-icon-heart before:btu-icon-lg
  *
@@ -36,7 +38,6 @@ declare let module: any
  */
 
 const svgs: Record<string, string> = {}
-const symbols = /[\r\n%#()<>?[\\\]^`{|}]/g
 for (const [key, value] of Object.entries(LucideExports)) {
   if (typeof value === 'string') {
     svgs[key] = value
@@ -44,29 +45,29 @@ for (const [key, value] of Object.entries(LucideExports)) {
 }
 
 module.exports = plugin(
-  function ({ addComponents, matchUtilities, theme }) {
-    const size = 'var(--Icon-size)'
+  function ({ addBase, addComponents, matchUtilities, theme }) {
+    const size = 'var(--icon-size)'
     const prefix = '.btu-icon-'
 
     Object.entries(svgs).forEach(([key, svg]) => {
       addComponents({
         [`${prefix}via-mask`]: {
           '--size': '1.25rem',
-          mask: 'var(--mask-url, var(--Icon-svg, var(--compat-icon-via-mask))) center / contain no-repeat',
+          mask: 'var(--mask-url, var(--icon-svg, var(--compat-icon-via-mask))) center / contain no-repeat',
           'mask-mode': 'alpha',
           'aspect-ratio': '1',
-          'inline-size': 'var(--Icon-size, var(--size))',
-          'block-size': 'var(--Icon-size, var(--size))',
+          'inline-size': 'var(--icon-size, var(--size))',
+          'block-size': 'var(--icon-size, var(--size))',
           display: 'inline-block',
         },
         [`${prefix}via-mask-${pascalToKebab(key)}`]: {
           '--size': '1.25rem',
-          '--Icon-svg': `url("data:image/svg+xml,${encodeSVG(addNameSpaceXML(svg))}")`,
-          mask: 'var(--Icon-svg) center / contain no-repeat',
+          '--icon-svg': `url("data:image/svg+xml,${encodeSVG(addNameSpaceXML(svg))}")`,
+          mask: 'var(--icon-svg) center / contain no-repeat',
           'mask-mode': 'alpha',
           'aspect-ratio': '1',
-          'inline-size': 'var(--Icon-size, var(--size))',
-          'block-size': 'var(--Icon-size, var(--size))',
+          'inline-size': 'var(--icon-size, var(--size))',
+          'block-size': 'var(--icon-size, var(--size))',
           display: 'inline-block',
         },
       })
@@ -107,9 +108,9 @@ module.exports = plugin(
           'background-image': value,
           'background-repeat': 'no-repeat',
           'background-position': 'center',
-          'background-size': 'var(--Icon-size, 1.5rem) var(--Icon-size, 1.5rem)',
-          width: 'var(--Icon-size, 1.5rem)',
-          height: 'var(--Icon-size, 1.5rem)',
+          'background-size': 'var(--icon-size, 1.5rem) var(--icon-size, 1.5rem)',
+          width: 'var(--icon-size, 1.5rem)',
+          height: 'var(--icon-size, 1.5rem)',
           display: 'inline-block',
         }),
       },
@@ -130,11 +131,123 @@ module.exports = plugin(
     matchUtilities(
       {
         'btu-icon': value => ({
-          '--Icon-size': value,
+          '--icon-size': value,
         }),
       },
       { values: theme('iconSize') },
     )
+
+    /* ─── Emphasize: tonal circle + ring behind icon ─── */
+    function oklch(l: number, cMul: number, cMin?: number): string {
+      const chroma = cMin != null ? `max(calc(c * ${cMul}), ${cMin})` : `calc(c * ${cMul})`
+      return `oklch(from currentColor ${l} ${chroma} h)`
+    }
+
+    const lightColors = {
+      '--_ring-color': oklch(0.8, 0.5),
+      backgroundColor: oklch(0.93, 0.22),
+      borderColor: oklch(0.97, 0.1),
+    }
+    const darkColors = {
+      '--_ring-color': oklch(0.65, 1.5, 0.08),
+      backgroundColor: oklch(0.69, 1.6, 0.08),
+      borderColor: oklch(0.6, 1.4, 0.06),
+    }
+    const highContrastColors = {
+      '--_ring-color': oklch(0.75, 0.5),
+      backgroundColor: oklch(0.9, 0.35),
+      borderColor: oklch(0.95, 0.2),
+    }
+
+    /* Pulse ring animation keyframes (pseudo-element scale + fade) */
+    addBase({
+      '@keyframes btu-icon-ring-spring': {
+        '0%': { transform: 'scale(1)', opacity: '0.6' },
+        '35%': { transform: 'scale(var(--_ring-scale))', opacity: '0.4' },
+        '100%': { transform: 'scale(var(--_ring-scale))', opacity: '0' },
+      },
+    })
+
+    addComponents({
+      '.btu-icon-emphasize': {
+        position: 'relative',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: '9999px',
+        borderStyle: 'solid',
+        color: 'oklch(var(--btu-theme-primary-600))',
+        ...lightColors,
+      },
+
+      /* Per-size circle dimensions (border width scales with size per Figma spec) */
+      '.btu-icon-emphasize.btu-icon-xs': {
+        width: '1.5rem',
+        height: '1.5rem',
+        borderWidth: '2px',
+        '--_ring-scale': '1.25',
+      },
+      '.btu-icon-emphasize.btu-icon-sm': {
+        width: '2rem',
+        height: '2rem',
+        borderWidth: '4px',
+        '--_ring-scale': '1.35',
+      },
+      '.btu-icon-emphasize.btu-icon-md': {
+        width: '2.25rem',
+        height: '2.25rem',
+        borderWidth: '6px',
+        '--_ring-scale': '1.4',
+      },
+      '.btu-icon-emphasize.btu-icon-lg': {
+        width: '3rem',
+        height: '3rem',
+        borderWidth: '8px',
+        '--_ring-scale': '1.45',
+      },
+      '.btu-icon-emphasize.btu-icon-xl': {
+        width: '3.5rem',
+        height: '3.5rem',
+        borderWidth: '10px',
+        '--_ring-scale': '1.5',
+      },
+
+      /* Pulse animation — pseudo-element ring that scales out and fades */
+      '.btu-icon-emphasize-pulse::before': {
+        content: '""',
+        position: 'absolute',
+        inset: '0',
+        borderRadius: '9999px',
+        backgroundColor: 'var(--_ring-color)',
+        opacity: '0',
+        animation: 'btu-icon-ring-spring 1200ms ease-out 200ms both',
+        pointerEvents: 'none',
+      },
+
+      /* ─── Dark mode ─── */
+      '.is-dark .btu-icon-emphasize': darkColors,
+      '.is-dark .btu-icon-emphasize svg': { color: 'oklch(0.95 0 0)' },
+      '@media (prefers-color-scheme: dark)': {
+        ':root:not([data-theme*=\'"appearance":"light"\']):not(.is-dark) .btu-icon-emphasize': darkColors,
+        ':root:not([data-theme*=\'"appearance":"light"\']):not(.is-dark) .btu-icon-emphasize svg': {
+          color: 'oklch(0.95 0 0)',
+        },
+      },
+
+      /* ─── High contrast ─── */
+      ':root.is-moreContrast .btu-icon-emphasize': highContrastColors,
+      '@media screen and (prefers-contrast: more) and (forced-colors: none)': {
+        ':root:not(.is-normalContrast) .btu-icon-emphasize': highContrastColors,
+      },
+
+      /* ─── Reduced motion ─── */
+      '@media (prefers-reduced-motion: reduce)': {
+        '.btu-icon-emphasize-pulse::before': {
+          animationDuration: '0.01ms',
+          animationDelay: '0ms',
+        },
+      },
+    })
   },
   {
     theme: {

package/dist/tailwind-plugin-loader.js

@@ -11,7 +11,7 @@ import plugin from 'tailwindcss/plugin';
  * Loaders come with light and dark styles.
  *
  * If you need to reference the loader size, you can do so with:
- * --Loader-size
+ * --loader-size
  *
  * Class Name: btu-loader
  *
@@ -20,10 +20,10 @@ import plugin from 'tailwindcss/plugin';
  */
 module.exports = plugin(function ({ addComponents, theme }) {
     const loader = {
-        '--Loader-size': '2rem',
+        '--loader-size': '2rem',
         display: 'block',
         content: 'var(--tw-content)',
-        '--tw-content': `url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 50 50%27%3E %3Cstyle%3E :root %7B --Loader-bg-color: oklch%28${encodeURIComponent(theme('colors.gray.light.200'))}%29; --Loader-fg-color: oklch%28${encodeURIComponent(theme('colors.primary.light.600'))}%29; --btu-theme-primary-hue: 264; %7D @media %28prefers-color-scheme: dark%29 %7B :root %7B --Loader-bg-color: oklch%28${encodeURIComponent(theme('colors.gray.dark.100'))}%29; --Loader-fg-color: oklch%28${encodeURIComponent(theme('colors.primary.dark.700'))}%29; %7D %7D @keyframes rotate%7B100%25%7Btransform:rotate%28360deg%29;%7D%7D @keyframes dash%7B0%25%7Bstroke-dasharray:1,200;stroke-dashoffset:0;%7D50%25%7Bstroke-dasharray:89,200;stroke-dashoffset:-35;%7D100%25%7Bstroke-dasharray:89,200;stroke-dashoffset:-124;%7D%7D svg %7Bwill-change:transform;position:relative;animation:rotate 1.6s linear infinite;%7D .Loader-bg %7Bwill-change:transform;fill:none;transform-origin:center;%7D .Loader-fg %7Bwill-change:transform;animation:dash 1s infinite ease-in-out;animation-fill-mode:both;fill:none;transform-origin:center;stroke-linecap:round;stroke-dasharray:1,200;stroke-dashoffset:0;%7D %3C/style%3E %3Ccircle cx=%2725%27 cy=%2725%27 r=%2720%27 stroke-width=%274%27 class=%27Loader-bg%27 stroke=%27var%28--Loader-bg-color%29%27/%3E %3Ccircle cx=%2725%27 cy=%2725%27 r=%2720%27 stroke-width=%274%27 class=%27Loader-fg%27 stroke=%27var%28--Loader-fg-color%29%27/%3E %3C/svg%3E")`,
+        '--tw-content': `url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 50 50%27%3E %3Cstyle%3E :root %7B --loader-bg-color: oklch%28${encodeURIComponent(theme('colors.gray.light.200'))}%29; --loader-fg-color: oklch%28${encodeURIComponent(theme('colors.primary.light.600'))}%29; --btu-theme-primary-hue: 264; %7D @media %28prefers-color-scheme: dark%29 %7B :root %7B --loader-bg-color: oklch%28${encodeURIComponent(theme('colors.gray.dark.100'))}%29; --loader-fg-color: oklch%28${encodeURIComponent(theme('colors.primary.dark.700'))}%29; %7D %7D @keyframes rotate%7B100%25%7Btransform:rotate%28360deg%29;%7D%7D @keyframes dash%7B0%25%7Bstroke-dasharray:1,200;stroke-dashoffset:0;%7D50%25%7Bstroke-dasharray:89,200;stroke-dashoffset:-35;%7D100%25%7Bstroke-dasharray:89,200;stroke-dashoffset:-124;%7D%7D svg %7Bwill-change:transform;position:relative;animation:rotate 1.6s linear infinite;%7D .Loader-bg %7Bwill-change:transform;fill:none;transform-origin:center;%7D .Loader-fg %7Bwill-change:transform;animation:dash 1s infinite ease-in-out;animation-fill-mode:both;fill:none;transform-origin:center;stroke-linecap:round;stroke-dasharray:1,200;stroke-dashoffset:0;%7D %3C/style%3E %3Ccircle cx=%2725%27 cy=%2725%27 r=%2720%27 stroke-width=%274%27 class=%27Loader-bg%27 stroke=%27var%28--loader-bg-color%29%27/%3E %3Ccircle cx=%2725%27 cy=%2725%27 r=%2720%27 stroke-width=%274%27 class=%27Loader-fg%27 stroke=%27var%28--loader-fg-color%29%27/%3E %3C/svg%3E")`,
     };
     addComponents({
         '.btu-loader': loader,

package/dist/tailwind-plugin-loader.ts

@@ -13,7 +13,7 @@ declare let module: any
  * Loaders come with light and dark styles.
  *
  * If you need to reference the loader size, you can do so with:
- * --Loader-size
+ * --loader-size
  *
  * Class Name: btu-loader
  *
@@ -23,10 +23,10 @@ declare let module: any
 
 module.exports = plugin(function ({ addComponents, theme }) {
   const loader = {
-    '--Loader-size': '2rem',
+    '--loader-size': '2rem',
     display: 'block',
     content: 'var(--tw-content)',
-    '--tw-content': `url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 50 50%27%3E %3Cstyle%3E :root %7B --Loader-bg-color: oklch%28${encodeURIComponent(theme('colors.gray.light.200'))}%29; --Loader-fg-color: oklch%28${encodeURIComponent(theme('colors.primary.light.600'))}%29; --btu-theme-primary-hue: 264; %7D @media %28prefers-color-scheme: dark%29 %7B :root %7B --Loader-bg-color: oklch%28${encodeURIComponent(theme('colors.gray.dark.100'))}%29; --Loader-fg-color: oklch%28${encodeURIComponent(theme('colors.primary.dark.700'))}%29; %7D %7D @keyframes rotate%7B100%25%7Btransform:rotate%28360deg%29;%7D%7D @keyframes dash%7B0%25%7Bstroke-dasharray:1,200;stroke-dashoffset:0;%7D50%25%7Bstroke-dasharray:89,200;stroke-dashoffset:-35;%7D100%25%7Bstroke-dasharray:89,200;stroke-dashoffset:-124;%7D%7D svg %7Bwill-change:transform;position:relative;animation:rotate 1.6s linear infinite;%7D .Loader-bg %7Bwill-change:transform;fill:none;transform-origin:center;%7D .Loader-fg %7Bwill-change:transform;animation:dash 1s infinite ease-in-out;animation-fill-mode:both;fill:none;transform-origin:center;stroke-linecap:round;stroke-dasharray:1,200;stroke-dashoffset:0;%7D %3C/style%3E %3Ccircle cx=%2725%27 cy=%2725%27 r=%2720%27 stroke-width=%274%27 class=%27Loader-bg%27 stroke=%27var%28--Loader-bg-color%29%27/%3E %3Ccircle cx=%2725%27 cy=%2725%27 r=%2720%27 stroke-width=%274%27 class=%27Loader-fg%27 stroke=%27var%28--Loader-fg-color%29%27/%3E %3C/svg%3E")`,
+    '--tw-content': `url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 50 50%27%3E %3Cstyle%3E :root %7B --loader-bg-color: oklch%28${encodeURIComponent(theme('colors.gray.light.200'))}%29; --loader-fg-color: oklch%28${encodeURIComponent(theme('colors.primary.light.600'))}%29; --btu-theme-primary-hue: 264; %7D @media %28prefers-color-scheme: dark%29 %7B :root %7B --loader-bg-color: oklch%28${encodeURIComponent(theme('colors.gray.dark.100'))}%29; --loader-fg-color: oklch%28${encodeURIComponent(theme('colors.primary.dark.700'))}%29; %7D %7D @keyframes rotate%7B100%25%7Btransform:rotate%28360deg%29;%7D%7D @keyframes dash%7B0%25%7Bstroke-dasharray:1,200;stroke-dashoffset:0;%7D50%25%7Bstroke-dasharray:89,200;stroke-dashoffset:-35;%7D100%25%7Bstroke-dasharray:89,200;stroke-dashoffset:-124;%7D%7D svg %7Bwill-change:transform;position:relative;animation:rotate 1.6s linear infinite;%7D .Loader-bg %7Bwill-change:transform;fill:none;transform-origin:center;%7D .Loader-fg %7Bwill-change:transform;animation:dash 1s infinite ease-in-out;animation-fill-mode:both;fill:none;transform-origin:center;stroke-linecap:round;stroke-dasharray:1,200;stroke-dashoffset:0;%7D %3C/style%3E %3Ccircle cx=%2725%27 cy=%2725%27 r=%2720%27 stroke-width=%274%27 class=%27Loader-bg%27 stroke=%27var%28--loader-bg-color%29%27/%3E %3Ccircle cx=%2725%27 cy=%2725%27 r=%2720%27 stroke-width=%274%27 class=%27Loader-fg%27 stroke=%27var%28--loader-fg-color%29%27/%3E %3C/svg%3E")`,
   }
   addComponents({
     '.btu-loader': loader,

package/dist/tailwind-plugin-pagination.js

@@ -9,8 +9,7 @@ import plugin from 'tailwindcss/plugin';
  *  btu-pagination-disabled  - Disabled state
  *  btu-pagination-loading   - Loading state with dimmed controls
  *  btu-pagination-nav       - Inner nav wrapper
- *  btu-pagination-size-changer - Page size select area
- *  btu-pagination-select    - Native select element
+ *  btu-pagination-size-changer - Page size dropdown area
  *  btu-pagination-total     - "1-10 of 200" display
  *  btu-pagination-controls  - Button group container
  *  btu-pagination-jumper    - Slot area for custom jumper content
@@ -21,11 +20,9 @@ import plugin from 'tailwindcss/plugin';
  *
  * CSS Custom Properties:
  *
- *  --pagination-color-background  - Select background
+ *  --pagination-color-background  - Dropdown/button background
  *  --pagination-color-foreground  - Text/icon color
  */
-// Inline chevron-down SVG for select background
-const chevronDownSvg = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")`;
 module.exports = plugin(function ({ addComponents, config }) {
     const fontSize_sm = config('theme.fontSize.sm')?.[0] ?? '0.875rem';
     const fontSize_xs = config('theme.fontSize.xs')?.[0] ?? '0.75rem';
@@ -77,24 +74,6 @@ module.exports = plugin(function ({ addComponents, config }) {
                 display: 'none',
             },
         },
-        '.btu-pagination-select': {
-            appearance: 'none',
-            background: 'var(--pagination-color-background, var(--btu-theme-white, #fff))',
-            border: '1px solid oklch(var(--btu-theme-gray-300))',
-            borderRadius: '0.5rem',
-            padding: '0.375rem 1.75rem 0.375rem 0.5rem',
-            fontSize: fontSize_sm,
-            color: 'inherit',
-            cursor: 'pointer',
-            backgroundImage: chevronDownSvg,
-            backgroundRepeat: 'no-repeat',
-            backgroundPosition: 'right 0.5rem center',
-            backgroundSize: '1rem',
-            '&:focus-visible': {
-                outline: '2px solid oklch(var(--btu-theme-primary-400))',
-                outlineOffset: '-1px',
-            },
-        },
         '.btu-pagination-total': {
             fontSize: fontSize_xs,
             color: 'oklch(var(--btu-theme-gray-500))',
@@ -147,6 +126,17 @@ module.exports = plugin(function ({ addComponents, config }) {
                 borderRight: '1px solid oklch(var(--btu-theme-gray-200))',
             },
         },
+        // Dropdown integration: page size changer
+        '.btu-pagination-size-changer > btu-dropdown > .btu-button': {
+            '--button-color': 'var(--pagination-color-background, var(--btu-theme-white, #fff))',
+            '--button-text-color': 'var(--pagination-color-foreground, oklch(var(--btu-theme-gray-700)))',
+        },
+        // Dropdown integration: jumper (blends into button group)
+        '.btu-pagination-jumper > btu-dropdown > .btu-button': {
+            '--button-border-radius': '0',
+            '--button-color': 'var(--pagination-color-background, var(--btu-theme-white, #fff))',
+            '--button-text-color': 'var(--pagination-color-foreground, oklch(var(--btu-theme-gray-700)))',
+        },
     });
 });
 //# sourceMappingURL=tailwind-plugin-pagination.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tailwind-plugin-pagination.js","sourceRoot":"","sources":["../src/tailwind-plugin-pagination.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"tailwind-plugin-pagination.js","sourceRoot":"","sources":["../src/tailwind-plugin-pagination.ts"],"names":[],"mappings":"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"}

package/dist/tailwind-plugin-pagination.ts

@@ -11,8 +11,7 @@ declare let module: any
  *  btu-pagination-disabled  - Disabled state
  *  btu-pagination-loading   - Loading state with dimmed controls
  *  btu-pagination-nav       - Inner nav wrapper
- *  btu-pagination-size-changer - Page size select area
- *  btu-pagination-select    - Native select element
+ *  btu-pagination-size-changer - Page size dropdown area
  *  btu-pagination-total     - "1-10 of 200" display
  *  btu-pagination-controls  - Button group container
  *  btu-pagination-jumper    - Slot area for custom jumper content
@@ -23,13 +22,10 @@ declare let module: any
  *
  * CSS Custom Properties:
  *
- *  --pagination-color-background  - Select background
+ *  --pagination-color-background  - Dropdown/button background
  *  --pagination-color-foreground  - Text/icon color
  */
 
-// Inline chevron-down SVG for select background
-const chevronDownSvg = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")`
-
 module.exports = plugin(function ({ addComponents, config }) {
   const fontSize_sm = config('theme.fontSize.sm')?.[0] ?? '0.875rem'
   const fontSize_xs = config('theme.fontSize.xs')?.[0] ?? '0.75rem'
@@ -88,25 +84,6 @@ module.exports = plugin(function ({ addComponents, config }) {
       },
     },
 
-    '.btu-pagination-select': {
-      appearance: 'none',
-      background: 'var(--pagination-color-background, var(--btu-theme-white, #fff))',
-      border: '1px solid oklch(var(--btu-theme-gray-300))',
-      borderRadius: '0.5rem',
-      padding: '0.375rem 1.75rem 0.375rem 0.5rem',
-      fontSize: fontSize_sm,
-      color: 'inherit',
-      cursor: 'pointer',
-      backgroundImage: chevronDownSvg,
-      backgroundRepeat: 'no-repeat',
-      backgroundPosition: 'right 0.5rem center',
-      backgroundSize: '1rem',
-      '&:focus-visible': {
-        outline: '2px solid oklch(var(--btu-theme-primary-400))',
-        outlineOffset: '-1px',
-      },
-    },
-
     '.btu-pagination-total': {
       fontSize: fontSize_xs,
       color: 'oklch(var(--btu-theme-gray-500))',
@@ -164,5 +141,18 @@ module.exports = plugin(function ({ addComponents, config }) {
         borderRight: '1px solid oklch(var(--btu-theme-gray-200))',
       },
     },
+
+    // Dropdown integration: page size changer
+    '.btu-pagination-size-changer > btu-dropdown > .btu-button': {
+      '--button-color': 'var(--pagination-color-background, var(--btu-theme-white, #fff))',
+      '--button-text-color': 'var(--pagination-color-foreground, oklch(var(--btu-theme-gray-700)))',
+    },
+
+    // Dropdown integration: jumper (blends into button group)
+    '.btu-pagination-jumper > btu-dropdown > .btu-button': {
+      '--button-border-radius': '0',
+      '--button-color': 'var(--pagination-color-background, var(--btu-theme-white, #fff))',
+      '--button-text-color': 'var(--pagination-color-foreground, oklch(var(--btu-theme-gray-700)))',
+    },
   })
 })

package/dist/tailwind-plugin-tabs.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=tailwind-plugin-tabs.d.ts.map

package/dist/tailwind-plugin-tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tailwind-plugin-tabs.d.ts","sourceRoot":"","sources":["../src/tailwind-plugin-tabs.ts"],"names":[],"mappings":""}