@brightspot/ui 1.10.0 → 3.0.0

package/dist/tailwind-plugin-action-bar.js

@@ -0,0 +1,120 @@
+import plugin from 'tailwindcss/plugin';
+/**
+ * ActionBar component styling.
+ *
+ * Class Names:
+ *
+ *  btu-action-bar - Bar container with flex layout and border
+ *  btu-action-bar-start - Left zone for destructive/start actions
+ *  btu-action-bar-end - Right zone for primary/secondary actions
+ *
+ * Attribute selectors:
+ *
+ *  btu-action-bar[position="top"] - Top-positioned bar with border-bottom
+ *  btu-action-bar[sticky] - Sticky-positioned bar
+ *  btu-action-bar[item-alignment="start|center|end"] - Content alignment
+ *  btu-action-bar[shadow] - Box shadow enabled
+ *  btu-action-item[disabled] - Disabled item styling
+ *  btu-action-item[loading] - Loading item styling
+ */
+module.exports = plugin(function ({ addComponents, theme }) {
+    const components = {
+        /* ─── Bar ─── */
+        'btu-action-bar': {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 'var(--action-bar-gap, 0.75rem)',
+            padding: 'var(--action-bar-padding, 1rem 1.5rem)',
+            backgroundColor: 'var(--action-bar-background, var(--btu-theme-white))',
+            borderTop: '1px solid var(--action-bar-border-color, oklch(var(--btu-theme-gray-200)))',
+            zIndex: 'var(--action-bar-z-index, 100)',
+            marginTop: 'auto',
+        },
+        /* ─── Position: top ─── */
+        'btu-action-bar[position="top"]': {
+            borderTop: 'none',
+            borderBottom: '1px solid var(--action-bar-border-color, oklch(var(--btu-theme-gray-200)))',
+            marginTop: '0',
+            marginBottom: 'auto',
+        },
+        /* ─── Sticky positioning ─── */
+        'btu-action-bar[sticky]': {
+            position: 'sticky',
+            bottom: '0',
+        },
+        'btu-action-bar[sticky][position="top"]': {
+            bottom: 'auto',
+            top: '0',
+        },
+        /* ─── Alignment variants ─── */
+        'btu-action-bar[item-alignment="start"]': {
+            justifyContent: 'flex-start',
+        },
+        'btu-action-bar[item-alignment="center"]': {
+            justifyContent: 'center',
+        },
+        'btu-action-bar[item-alignment="end"]': {
+            justifyContent: 'flex-end',
+        },
+        /* ─── Non-default alignment: zones don't grow ─── */
+        'btu-action-bar:not([item-alignment="default"]) .btu-action-bar-start': {
+            flex: '0 0 auto',
+        },
+        'btu-action-bar:not([item-alignment="default"]) .btu-action-bar-end': {
+            flex: '0 0 auto',
+            justifyContent: 'initial',
+        },
+        'btu-action-bar:not([item-alignment="default"]) .btu-action-bar-start:empty': {
+            display: 'none',
+        },
+        /* ─── Shadow ─── */
+        'btu-action-bar[shadow]': {
+            boxShadow: theme('boxShadow.md'),
+        },
+        /* ─── High-contrast border ─── */
+        ':root.is-moreContrast btu-action-bar': {
+            borderColor: 'var(--action-bar-border-color, oklch(var(--btu-theme-gray-400)))',
+        },
+        '@media screen and (prefers-contrast: more) and (forced-colors: none)': {
+            ':root:not(.is-normalContrast) btu-action-bar': {
+                borderColor: 'var(--action-bar-border-color, oklch(var(--btu-theme-gray-400)))',
+            },
+        },
+        /* ─── Inner layout zones ─── */
+        '.btu-action-bar-start': {
+            display: 'flex',
+            alignItems: 'center',
+            flex: '1 0 0',
+            minWidth: '0',
+            gap: 'var(--action-bar-gap, 0.75rem)',
+        },
+        '.btu-action-bar-end': {
+            display: 'flex',
+            alignItems: 'center',
+            flex: '1 0 0',
+            minWidth: '0',
+            justifyContent: 'flex-end',
+            gap: 'var(--action-bar-gap, 0.75rem)',
+        },
+        /* ─── Disabled item ─── */
+        'btu-action-item[disabled]': {
+            opacity: '0.5',
+            cursor: 'default',
+            ':root.is-moreContrast &': {
+                opacity: '0.4',
+            },
+            '@media screen and (prefers-contrast: more) and (forced-colors: none)': {
+                ':root:not(.is-normalContrast) &': {
+                    opacity: '0.4',
+                },
+            },
+        },
+        /* ─── Loading item ─── */
+        'btu-action-item[loading]': {
+            pointerEvents: 'none',
+            cursor: 'default',
+        },
+    };
+    addComponents(components);
+});
+//# sourceMappingURL=tailwind-plugin-action-bar.js.map

package/dist/tailwind-plugin-action-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tailwind-plugin-action-bar.js","sourceRoot":"","sources":["../src/tailwind-plugin-action-bar.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAIvC;;;;;;;;;;;;;;;;;GAiBG;AAEH,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,EAAE,aAAa,EAAE,KAAK,EAAE;IACxD,MAAM,UAAU,GAAkB;QAChC,iBAAiB;QACjB,gBAAgB,EAAE;YAChB,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,GAAG,EAAE,gCAAgC;YACrC,OAAO,EAAE,wCAAwC;YACjD,eAAe,EAAE,sDAAsD;YACvE,SAAS,EAAE,4EAA4E;YACvF,MAAM,EAAE,gCAAgC;YACxC,SAAS,EAAE,MAAM;SAClB;QAED,2BAA2B;QAC3B,gCAAgC,EAAE;YAChC,SAAS,EAAE,MAAM;YACjB,YAAY,EAAE,4EAA4E;YAC1F,SAAS,EAAE,GAAG;YACd,YAAY,EAAE,MAAM;SACrB;QAED,gCAAgC;QAChC,wBAAwB,EAAE;YACxB,QAAQ,EAAE,QAAQ;YAClB,MAAM,EAAE,GAAG;SACZ;QACD,wCAAwC,EAAE;YACxC,MAAM,EAAE,MAAM;YACd,GAAG,EAAE,GAAG;SACT;QAED,gCAAgC;QAChC,wCAAwC,EAAE;YACxC,cAAc,EAAE,YAAY;SAC7B;QACD,yCAAyC,EAAE;YACzC,cAAc,EAAE,QAAQ;SACzB;QACD,sCAAsC,EAAE;YACtC,cAAc,EAAE,UAAU;SAC3B;QAED,qDAAqD;QACrD,sEAAsE,EAAE;YACtE,IAAI,EAAE,UAAU;SACjB;QACD,oEAAoE,EAAE;YACpE,IAAI,EAAE,UAAU;YAChB,cAAc,EAAE,SAAS;SAC1B;QACD,4EAA4E,EAAE;YAC5E,OAAO,EAAE,MAAM;SAChB;QAED,oBAAoB;QACpB,wBAAwB,EAAE;YACxB,SAAS,EAAE,KAAK,CAAC,cAAc,CAAC;SACjC;QAED,kCAAkC;QAClC,sCAAsC,EAAE;YACtC,WAAW,EAAE,kEAAkE;SAChF;QACD,sEAAsE,EAAE;YACtE,8CAA8C,EAAE;gBAC9C,WAAW,EAAE,kEAAkE;aAChF;SACF;QAED,gCAAgC;QAChC,uBAAuB,EAAE;YACvB,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,IAAI,EAAE,OAAO;YACb,QAAQ,EAAE,GAAG;YACb,GAAG,EAAE,gCAAgC;SACtC;QACD,qBAAqB,EAAE;YACrB,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,IAAI,EAAE,OAAO;YACb,QAAQ,EAAE,GAAG;YACb,cAAc,EAAE,UAAU;YAC1B,GAAG,EAAE,gCAAgC;SACtC;QAED,2BAA2B;QAC3B,2BAA2B,EAAE;YAC3B,OAAO,EAAE,KAAK;YACd,MAAM,EAAE,SAAS;YAEjB,yBAAyB,EAAE;gBACzB,OAAO,EAAE,KAAK;aACf;YACD,sEAAsE,EAAE;gBACtE,iCAAiC,EAAE;oBACjC,OAAO,EAAE,KAAK;iBACf;aACF;SACF;QAED,0BAA0B;QAC1B,0BAA0B,EAAE;YAC1B,aAAa,EAAE,MAAM;YACrB,MAAM,EAAE,SAAS;SAClB;KACF,CAAA;IAED,aAAa,CAAC,UAAU,CAAC,CAAA;AAC3B,CAAC,CAAC,CAAA"}

package/dist/tailwind-plugin-action-bar.ts

@@ -0,0 +1,134 @@
+import plugin from 'tailwindcss/plugin'
+import type { CSSRuleObject } from 'tailwindcss/types/config'
+declare let module: any
+
+/**
+ * ActionBar component styling.
+ *
+ * Class Names:
+ *
+ *  btu-action-bar - Bar container with flex layout and border
+ *  btu-action-bar-start - Left zone for destructive/start actions
+ *  btu-action-bar-end - Right zone for primary/secondary actions
+ *
+ * Attribute selectors:
+ *
+ *  btu-action-bar[position="top"] - Top-positioned bar with border-bottom
+ *  btu-action-bar[sticky] - Sticky-positioned bar
+ *  btu-action-bar[item-alignment="start|center|end"] - Content alignment
+ *  btu-action-bar[shadow] - Box shadow enabled
+ *  btu-action-item[disabled] - Disabled item styling
+ *  btu-action-item[loading] - Loading item styling
+ */
+
+module.exports = plugin(function ({ addComponents, theme }) {
+  const components: CSSRuleObject = {
+    /* ─── Bar ─── */
+    'btu-action-bar': {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 'var(--action-bar-gap, 0.75rem)',
+      padding: 'var(--action-bar-padding, 1rem 1.5rem)',
+      backgroundColor: 'var(--action-bar-background, var(--btu-theme-white))',
+      borderTop: '1px solid var(--action-bar-border-color, oklch(var(--btu-theme-gray-200)))',
+      zIndex: 'var(--action-bar-z-index, 100)',
+      marginTop: 'auto',
+    },
+
+    /* ─── Position: top ─── */
+    'btu-action-bar[position="top"]': {
+      borderTop: 'none',
+      borderBottom: '1px solid var(--action-bar-border-color, oklch(var(--btu-theme-gray-200)))',
+      marginTop: '0',
+      marginBottom: 'auto',
+    },
+
+    /* ─── Sticky positioning ─── */
+    'btu-action-bar[sticky]': {
+      position: 'sticky',
+      bottom: '0',
+    },
+    'btu-action-bar[sticky][position="top"]': {
+      bottom: 'auto',
+      top: '0',
+    },
+
+    /* ─── Alignment variants ─── */
+    'btu-action-bar[item-alignment="start"]': {
+      justifyContent: 'flex-start',
+    },
+    'btu-action-bar[item-alignment="center"]': {
+      justifyContent: 'center',
+    },
+    'btu-action-bar[item-alignment="end"]': {
+      justifyContent: 'flex-end',
+    },
+
+    /* ─── Non-default alignment: zones don't grow ─── */
+    'btu-action-bar:not([item-alignment="default"]) .btu-action-bar-start': {
+      flex: '0 0 auto',
+    },
+    'btu-action-bar:not([item-alignment="default"]) .btu-action-bar-end': {
+      flex: '0 0 auto',
+      justifyContent: 'initial',
+    },
+    'btu-action-bar:not([item-alignment="default"]) .btu-action-bar-start:empty': {
+      display: 'none',
+    },
+
+    /* ─── Shadow ─── */
+    'btu-action-bar[shadow]': {
+      boxShadow: theme('boxShadow.md'),
+    },
+
+    /* ─── High-contrast border ─── */
+    ':root.is-moreContrast btu-action-bar': {
+      borderColor: 'var(--action-bar-border-color, oklch(var(--btu-theme-gray-400)))',
+    },
+    '@media screen and (prefers-contrast: more) and (forced-colors: none)': {
+      ':root:not(.is-normalContrast) btu-action-bar': {
+        borderColor: 'var(--action-bar-border-color, oklch(var(--btu-theme-gray-400)))',
+      },
+    },
+
+    /* ─── Inner layout zones ─── */
+    '.btu-action-bar-start': {
+      display: 'flex',
+      alignItems: 'center',
+      flex: '1 0 0',
+      minWidth: '0',
+      gap: 'var(--action-bar-gap, 0.75rem)',
+    },
+    '.btu-action-bar-end': {
+      display: 'flex',
+      alignItems: 'center',
+      flex: '1 0 0',
+      minWidth: '0',
+      justifyContent: 'flex-end',
+      gap: 'var(--action-bar-gap, 0.75rem)',
+    },
+
+    /* ─── Disabled item ─── */
+    'btu-action-item[disabled]': {
+      opacity: '0.5',
+      cursor: 'default',
+
+      ':root.is-moreContrast &': {
+        opacity: '0.4',
+      },
+      '@media screen and (prefers-contrast: more) and (forced-colors: none)': {
+        ':root:not(.is-normalContrast) &': {
+          opacity: '0.4',
+        },
+      },
+    },
+
+    /* ─── Loading item ─── */
+    'btu-action-item[loading]': {
+      pointerEvents: 'none',
+      cursor: 'default',
+    },
+  }
+
+  addComponents(components)
+})

package/dist/tailwind-plugin-badge.js

@@ -34,13 +34,11 @@ module.exports = plugin(function ({ addComponents, theme, e, matchUtilities, add
         for (const key in colors) {
             badgeColors.push({
                 [`${className}-${e(key)}`]: {
-                    '--Icon-size': iconSizes['xs'],
-                    '--badge-color-background': `oklch(var(--btu-theme-${key}-50))`,
-                    '--badge-color-foreground': `oklch(var(--btu-theme-${key}-700))`,
-                    backgroundColor: 'var(--badge-color-background)',
-                    color: 'var(--badge-color-foreground)',
+                    '--icon-size': iconSizes['xs'],
+                    backgroundColor: `var(--badge-color-background, oklch(var(--btu-theme-${key}-50)))`,
+                    color: `var(--badge-color-foreground, oklch(var(--btu-theme-${key}-700)))`,
                     textDecoration: 'underline',
-                    textDecorationColor: 'var(--badge-color-background)',
+                    textDecorationColor: `var(--badge-color-background, oklch(var(--btu-theme-${key}-50)))`,
                 },
             });
         }
@@ -61,6 +59,7 @@ module.exports = plugin(function ({ addComponents, theme, e, matchUtilities, add
                         '--badge-px': size.px,
                         '--badge-py': size.py,
                         alignItems: 'center',
+                        justifyContent: 'center',
                         gap: '0.38rem',
                         ...fontSizeStyles,
                         fontSize: fontSize[0],

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":"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"}
+{"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

@@ -76,13 +76,11 @@ module.exports = plugin(
       for (const key in colors) {
         badgeColors.push({
           [`${className}-${e(key)}`]: {
-            '--Icon-size': iconSizes['xs'],
-            '--badge-color-background': `oklch(var(--btu-theme-${key}-50))`,
-            '--badge-color-foreground': `oklch(var(--btu-theme-${key}-700))`,
-            backgroundColor: 'var(--badge-color-background)',
-            color: 'var(--badge-color-foreground)',
+            '--icon-size': iconSizes['xs'],
+            backgroundColor: `var(--badge-color-background, oklch(var(--btu-theme-${key}-50)))`,
+            color: `var(--badge-color-foreground, oklch(var(--btu-theme-${key}-700)))`,
             textDecoration: 'underline',
-            textDecorationColor: 'var(--badge-color-background)',
+            textDecorationColor: `var(--badge-color-background, oklch(var(--btu-theme-${key}-50)))`,
           },
         })
       }
@@ -106,6 +104,7 @@ module.exports = plugin(
               '--badge-px': size.px,
               '--badge-py': size.py,
               alignItems: 'center',
+              justifyContent: 'center',
               gap: '0.38rem',
               ...fontSizeStyles,
               fontSize: fontSize[0],

package/dist/tailwind-plugin-button-group.d.ts

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

package/dist/tailwind-plugin-button-group.d.ts.map

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

package/dist/tailwind-plugin-button-group.js

@@ -0,0 +1,215 @@
+import plugin from 'tailwindcss/plugin';
+/**
+ * Button Group — Tailwind CSS plugin for grouping related buttons.
+ *
+ * Provides connected (joined) and spaced layouts with horizontal/vertical orientation.
+ * Supports both direct `.btu-button` children and `btu-icon-button` children.
+ * `btu-icon-button` uses `display: contents` so its inner button participates
+ * directly in the group's flex layout.
+ *
+ * Selection uses a circular wipe transition: a `::after` pseudo-element with
+ * `clip-path: circle()` reveals the selection color from the center outward.
+ *
+ * Class Names:
+ *
+ *  btu-button-group - Base group container
+ *
+ * CSS Custom Properties:
+ *
+ *  --button-group-gap             - Gap between buttons in spaced variant (default: spacing.sm)
+ *  --button-group-border-radius   - Outer corner radius in connected variant (default: 0.5rem)
+ *  --button-group-border-color    - Internal divider color in connected variant (default: gray-300)
+ *  --button-group-selection-bg    - Selection background color (auto-set per color variant)
+ *  --button-group-selection-color - Selection text color (auto-set per color variant)
+ */
+module.exports = plugin(function ({ addComponents, addBase, theme }) {
+    const connected = 'btu-button-group[variant="connected"]';
+    const connectedH = `${connected}[orientation="horizontal"]`;
+    const connectedV = `${connected}[orientation="vertical"]`;
+    const allSelected = `${connected}[data-all-selected]`;
+    const borderColor = 'var(--button-group-border-color, oklch(var(--btu-theme-gray-300)))';
+    const outerRadius = 'var(--button-group-border-radius, 0.5rem)';
+    const skipColors = new Set(['currentColor', 'transparent', 'white', 'black', 'ai']);
+    const colors = theme('colors') || {};
+    const components = {
+        // ─── Base ─────────────────────────────────────────────────────────
+        '.btu-button-group': {
+            display: 'inline-flex',
+            alignItems: 'stretch',
+            flexWrap: 'nowrap',
+            flexShrink: '0',
+        },
+        // ─── Icon-button: remove wrapper box so inner button is the flex item ──
+        '.btu-button-group > btu-icon-button': {
+            display: 'contents',
+        },
+        // ─── Orientation ──────────────────────────────────────────────────
+        'btu-button-group[orientation="vertical"]': {
+            flexDirection: 'column',
+        },
+        // ─── Spaced variant ───────────────────────────────────────────────
+        'btu-button-group[variant="spaced"]': {
+            gap: 'var(--button-group-gap, var(--gap-s, 0.5rem))',
+        },
+        // ─── slot="end" auto-margin ──────────────────────────────────────
+        // Direct children and inner .btu-button (for display:contents wrappers like btu-icon-button)
+        'btu-button-group[orientation="horizontal"] > [slot="end"], btu-button-group[orientation="horizontal"] > [slot="end"] > .btu-button': {
+            marginInlineStart: 'auto',
+        },
+        'btu-button-group[orientation="vertical"] > [slot="end"], btu-button-group[orientation="vertical"] > [slot="end"] > .btu-button': {
+            marginBlockStart: 'auto',
+        },
+        // ─── Size propagation via CSS ─────────────────────────────────────
+        'btu-button-group[size="small"] .btu-button': {
+            padding: 'var(--button-padding-sm)',
+            width: 'var(--button-size-sm, auto)',
+            height: 'var(--button-size-sm, auto)',
+        },
+        'btu-button-group[size="medium"] .btu-button': {
+            padding: 'var(--button-padding-md)',
+            width: 'var(--button-size-md, auto)',
+            height: 'var(--button-size-md, auto)',
+        },
+        'btu-button-group[size="large"] .btu-button': {
+            padding: 'var(--button-padding-lg)',
+            width: 'var(--button-size-lg, auto)',
+            height: 'var(--button-size-lg, auto)',
+        },
+        // ─── Connected: convert outline buttons to border-based ───────────
+        [`${connected} .btu-button`]: {
+            outline: 'none',
+            border: `1px solid ${borderColor}`,
+            transition: 'box-shadow 100ms ease, filter 100ms ease',
+            '&:active': {
+                scale: '1',
+                boxShadow: 'inset 0 2px 4px oklch(0 0 0 / 10%)',
+                filter: 'brightness(0.92)',
+            },
+        },
+        // ─── Disabled buttons ─────────────────────────────────────────────
+        '.btu-button-group .btu-button:disabled, .btu-button-group .btu-button[disabled]': {
+            opacity: '0.5',
+            cursor: 'default',
+        },
+        // ─── Selection wipe: disable button plugin's instant pressed toggle ─
+        // The ::after pseudo handles the pressed background via clip-path wipe,
+        // so the button itself must stay at its normal (non-pressed) color.
+        '.btu-button-group .btu-button[aria-pressed]': {
+            '--button-pressed-color': 'initial',
+            '--button-pressed-text-color': 'initial',
+            isolation: 'isolate',
+            transition: 'color 150ms ease-in',
+        },
+        '.btu-button-group .btu-button[aria-pressed]::after': {
+            content: '""',
+            position: 'absolute',
+            inset: '0',
+            zIndex: '-1',
+            borderRadius: 'inherit',
+            background: 'var(--button-group-selection-bg)',
+            clipPath: 'circle(0% at center)',
+            transition: 'clip-path 150ms ease-in',
+        },
+        // ─── Selection wipe: active state ─────────────────────────────────
+        '.btu-button-group .btu-button[aria-pressed="true"]': {
+            color: 'var(--button-group-selection-color)',
+            transition: 'color 200ms ease-out',
+        },
+        '.btu-button-group .btu-button[aria-pressed="true"]::after': {
+            clipPath: 'circle(75% at center)',
+            transition: 'clip-path 200ms ease-out',
+        },
+        // ─── Reduced motion ─────────────────────────────────────────────────
+        '@media (prefers-reduced-motion: reduce)': {
+            '.btu-button-group .btu-button[aria-pressed]': {
+                transition: 'color 0.01ms ease',
+            },
+            '.btu-button-group .btu-button[aria-pressed]::after': {
+                transition: 'clip-path 0.01ms ease',
+            },
+            [`${allSelected} .btu-button[aria-pressed="true"]`]: {
+                animation: 'none',
+            },
+        },
+        // ─── Connected variant — horizontal ───────────────────────────────
+        [`${connectedH} .btu-button`]: {
+            borderRadius: '0',
+            marginInlineEnd: '-1px',
+            position: 'relative',
+            '&:hover, &:focus-visible, &:active, &[aria-pressed="true"]': {
+                zIndex: '1',
+            },
+            '&:focus-visible': {
+                zIndex: '2',
+            },
+        },
+        [`${connectedH} > :first-child:is(.btu-button), ${connectedH} > :first-child > .btu-button`]: {
+            borderStartStartRadius: outerRadius,
+            borderEndStartRadius: outerRadius,
+        },
+        [`${connectedH} > :last-child:is(.btu-button), ${connectedH} > :last-child > .btu-button`]: {
+            borderStartEndRadius: outerRadius,
+            borderEndEndRadius: outerRadius,
+            marginInlineEnd: '0',
+        },
+        // ─── Connected variant — vertical ─────────────────────────────────
+        [`${connectedV} .btu-button`]: {
+            borderRadius: '0',
+            marginBlockEnd: '-1px',
+            position: 'relative',
+            '&:hover, &:focus-visible, &:active, &[aria-pressed="true"]': {
+                zIndex: '1',
+            },
+            '&:focus-visible': {
+                zIndex: '2',
+            },
+        },
+        [`${connectedV} > :first-child:is(.btu-button), ${connectedV} > :first-child > .btu-button`]: {
+            borderStartStartRadius: outerRadius,
+            borderStartEndRadius: outerRadius,
+        },
+        [`${connectedV} > :last-child:is(.btu-button), ${connectedV} > :last-child > .btu-button`]: {
+            borderEndStartRadius: outerRadius,
+            borderEndEndRadius: outerRadius,
+            marginBlockEnd: '0',
+        },
+    };
+    // ─── Sibling index for staggered animations ─────────────────────────
+    // CSS sibling-index() has limited browser support (Chrome 133+).
+    // When unsupported, the fallback of 1 means all buttons animate simultaneously.
+    components[`${connected} > *`] = {
+        '--_btn-index': 'sibling-index()',
+    };
+    // ─── All-selected shimmer (connected only) ─────────────────────────
+    // Text color pulse + border color pulse on each button, staggered.
+    components[`${allSelected} .btu-button[aria-pressed="true"]`] = {
+        animation: 'btu-shimmer-all 500ms ease-in-out both',
+        animationDelay: 'calc((var(--_btn-index, 1) - 1) * 100ms)',
+    };
+    // ─── Selection color variants ─────────────────────────────────────
+    for (const key in colors) {
+        if (skipColors.has(key))
+            continue;
+        const pressedKey = key === 'gray' ? 'primary' : key;
+        components[`.btu-button-group .btu-button-${key}`] = {
+            '--button-group-selection-bg': `oklch(var(--btu-theme-${pressedKey}-50))`,
+            '--button-group-selection-color': `oklch(var(--btu-theme-${pressedKey}-800))`,
+            '--button-group-shimmer-highlight': `oklch(var(--btu-theme-${pressedKey}-200))`,
+        };
+    }
+    addComponents(components);
+    // Keyframes must be added via addBase (not addComponents)
+    addBase({
+        '@keyframes btu-shimmer-all': {
+            '0%, 100%': {
+                color: 'var(--button-group-selection-color)',
+                borderColor: 'var(--button-group-border-color, oklch(var(--btu-theme-gray-300)))',
+            },
+            '40%, 60%': {
+                color: 'var(--button-group-shimmer-highlight)',
+                borderColor: 'var(--button-group-shimmer-highlight)',
+            },
+        },
+    });
+});
+//# sourceMappingURL=tailwind-plugin-button-group.js.map

package/dist/tailwind-plugin-button-group.js.map

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