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 `<button class="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.
 *
 * Selectors target the `button` element, not the `.btu-button` class. So an
 * anchor styled as `.btu-button` (`<a class="btu-button">`) slotted directly
 * into a connected group will NOT get the outer-corner radius. Use a real
 * `<button>` (or `<btu-icon-button>`) for grouped controls; for link-styled
 * ones, use the spaced variant.
 *
 * 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 }) {
    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 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 button (for display:contents wrappers like btu-icon-button)
        'btu-button-group[orientation="horizontal"] > [slot="end"], btu-button-group[orientation="horizontal"] > [slot="end"] > button': {
            marginInlineStart: 'auto',
        },
        'btu-button-group[orientation="vertical"] > [slot="end"], btu-button-group[orientation="vertical"] > [slot="end"] > button': {
            marginBlockStart: 'auto',
        },
        // ─── Size propagation via CSS ─────────────────────────────────────
        'btu-button-group[size="small"] button': {
            padding: 'var(--button-padding-sm)',
            width: 'var(--button-size-sm, auto)',
            height: 'var(--button-size-sm, auto)',
        },
        'btu-button-group[size="medium"] button': {
            padding: 'var(--button-padding-md)',
            width: 'var(--button-size-md, auto)',
            height: 'var(--button-size-md, auto)',
        },
        'btu-button-group[size="large"] 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} 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 button:disabled, .btu-button-group 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.
        // Selection colors default to the button's own --button-tint-* shades,
        // overridable via the documented --button-group-* properties.
        '.btu-button-group button[aria-pressed]': {
            '--button-pressed-color': 'initial',
            '--button-pressed-text-color': 'initial',
            isolation: 'isolate',
            transition: 'color 150ms ease-in',
        },
        '.btu-button-group button[aria-pressed]::after': {
            content: '""',
            position: 'absolute',
            inset: '0',
            zIndex: '-1',
            borderRadius: 'inherit',
            background: 'var(--button-group-selection-bg, var(--button-tint-subtle))',
            clipPath: 'circle(0% at center)',
            transition: 'clip-path 150ms ease-in',
        },
        // ─── Selection wipe: active state ─────────────────────────────────
        '.btu-button-group button[aria-pressed="true"]': {
            color: 'var(--button-group-selection-color, var(--button-tint-strong))',
            transition: 'color 200ms ease-out',
        },
        '.btu-button-group 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 button[aria-pressed]': {
                transition: 'color 0.01ms ease',
            },
            '.btu-button-group button[aria-pressed]::after': {
                transition: 'clip-path 0.01ms ease',
            },
            [`${allSelected} button[aria-pressed="true"]`]: {
                animation: 'none',
            },
        },
        // ─── Connected variant — horizontal ───────────────────────────────
        [`${connectedH} button`]: {
            borderRadius: '0',
            marginInlineEnd: '-1px',
            position: 'relative',
            '&:hover, &:focus-visible, &:active, &[aria-pressed="true"]': {
                zIndex: '1',
            },
            '&:focus-visible': {
                zIndex: '2',
            },
        },
        [`${connectedH} > :first-child:is(button), ${connectedH} > :first-child > button`]: {
            borderStartStartRadius: outerRadius,
            borderEndStartRadius: outerRadius,
        },
        [`${connectedH} > :last-child:is(button), ${connectedH} > :last-child > button`]: {
            borderStartEndRadius: outerRadius,
            borderEndEndRadius: outerRadius,
            marginInlineEnd: '0',
        },
        // ─── Connected variant — vertical ─────────────────────────────────
        [`${connectedV} button`]: {
            borderRadius: '0',
            marginBlockEnd: '-1px',
            position: 'relative',
            '&:hover, &:focus-visible, &:active, &[aria-pressed="true"]': {
                zIndex: '1',
            },
            '&:focus-visible': {
                zIndex: '2',
            },
        },
        [`${connectedV} > :first-child:is(button), ${connectedV} > :first-child > button`]: {
            borderStartStartRadius: outerRadius,
            borderStartEndRadius: outerRadius,
        },
        [`${connectedV} > :last-child:is(button), ${connectedV} > :last-child > 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} button[aria-pressed="true"]`] = {
        animation: 'btu-shimmer-all 500ms ease-in-out both',
        animationDelay: 'calc((var(--_btn-index, 1) - 1) * 100ms)',
    };
    // Selection colors come from each button's own --button-tint-* shades
    // (set by the button plugin per color variant). The documented
    // --button-group-selection-* / --button-group-shimmer-highlight properties
    // still override them.
    addComponents(components);
    // Keyframes must be added via addBase (not addComponents)
    addBase({
        '@keyframes btu-shimmer-all': {
            '0%, 100%': {
                color: 'var(--button-group-selection-color, var(--button-tint-strong))',
                borderColor: 'var(--button-group-border-color, oklch(var(--btu-theme-gray-300)))',
            },
            '40%, 60%': {
                color: 'var(--button-group-shimmer-highlight, var(--button-tint-highlight))',
                borderColor: 'var(--button-group-shimmer-highlight, var(--button-tint-highlight))',
            },
        },
    });
});
//# sourceMappingURL=tailwind-plugin-button-group.js.map