@brightspot/ui 1.9.0 → 1.11.0

package/dist/tailwind-plugin-switch.ts

@@ -0,0 +1,252 @@
+import plugin from 'tailwindcss/plugin'
+import type { CSSRuleObject } from 'tailwindcss/types/config'
+declare let module: any
+
+/**
+ * Switch component — a styled checkbox visually rendered as a sliding switch.
+ *
+ * Class Names:
+ *
+ *  btu-switch              - Wrapper element (use as <label>)
+ *  btu-switch-input        - The hidden <input type="checkbox">
+ *  btu-switch-track        - The pill/track element
+ *  btu-switch-knob         - The sliding circular handle (child of btu-switch-track)
+ *  btu-switch-text         - Optional container for label + description (flex column)
+ *  btu-switch-label        - Primary label text
+ *  btu-switch-description  - Secondary description text
+ *  btu-switch-[md|lg]      - Size variants (default: sm dimensions)
+ *  btu-switch-label-start  - Positions label/text before the track
+ *  btu-switch-track-icon-on      - Icon displayed on the track when checked (sm: 0.5rem, md: 0.625rem, lg: 0.75rem)
+ *  btu-switch-track-icon-off     - Icon displayed on the track when unchecked (sm: 0.5rem, md: 0.625rem, lg: 0.75rem)
+ *
+ * CSS Custom Properties:
+ *
+ *  --switch-color-track-on      - Track background when checked    (default: primary-700)
+ *  --switch-color-track-off     - Track background when unchecked  (default: gray-300)
+ *  --switch-color-knob    - Knob/handle color                (default: white)
+ *  --switch-label-spacing - Gap between track and label text (default: 0.75rem)
+ *
+ * Example Usage:
+ *
+ *  <label class="btu-switch">
+ *    <input type="checkbox" role="switch" class="btu-switch-input">
+ *    <span class="btu-switch-track">
+ *      <btu-icon class="btu-switch-track-icon-on" symbol="check"></btu-icon>
+ *      <span class="btu-switch-knob"></span>
+ *      <btu-icon class="btu-switch-track-icon-off" symbol="x"></btu-icon>
+ *    </span>
+ *    <span class="btu-switch-text">
+ *      <span class="btu-switch-label">Enable notifications</span>
+ *      <span class="btu-switch-description">Receive updates via email</span>
+ *    </span>
+ *  </label>
+ */
+
+module.exports = plugin(function ({ addComponents, config, theme }) {
+  const components: CSSRuleObject = {
+    // -------------------------------------------------------------------------
+    // Wrapper
+    // -------------------------------------------------------------------------
+    '.btu-switch': {
+      '--switch-track-width': '1.75rem',
+      '--switch-track-height': '1rem',
+      '--switch-knob-size': '0.75rem',
+      '--switch-knob-padding': '0.125rem',
+      '--switch-track-icon-size': '0.5rem',
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: 'var(--switch-label-spacing, 0.75rem)',
+      cursor: 'pointer',
+      userSelect: 'none',
+    },
+
+    // -------------------------------------------------------------------------
+    // Hidden input (sr-only pattern)
+    // -------------------------------------------------------------------------
+    '.btu-switch-input': {
+      position: 'absolute',
+      width: '1px',
+      height: '1px',
+      padding: '0',
+      margin: '-1px',
+      overflow: 'hidden',
+      clipPath: 'inset(50%)',
+      whiteSpace: 'nowrap',
+      borderWidth: '0',
+    },
+
+    // -------------------------------------------------------------------------
+    // Track
+    // -------------------------------------------------------------------------
+    '.btu-switch-track': {
+      flexShrink: '0',
+      position: 'relative',
+      display: 'inline-flex',
+      alignItems: 'center',
+      width: 'var(--switch-track-width)',
+      height: 'var(--switch-track-height)',
+      padding: 'var(--switch-knob-padding)',
+      borderRadius: '999px',
+      background: 'var(--switch-color-track-off, oklch(var(--btu-theme-gray-300)))',
+      transition: 'background 150ms ease-in-out',
+    },
+
+    // -------------------------------------------------------------------------
+    // Knob
+    // -------------------------------------------------------------------------
+    '.btu-switch-knob': {
+      flexShrink: '0',
+      width: 'var(--switch-knob-size)',
+      height: 'var(--switch-knob-size)',
+      borderRadius: '50%',
+      background: 'var(--switch-color-knob, var(--btu-theme-white))',
+      boxShadow: theme('boxShadow.sm'),
+      transition: 'transform 170ms cubic-bezier(.895, .03, .685, .22)',
+    },
+
+    // -------------------------------------------------------------------------
+    // Track icons (on/off)
+    // -------------------------------------------------------------------------
+    '.btu-switch-track-icon-on, .btu-switch-track-icon-off': {
+      position: 'absolute',
+      top: '50%',
+      opacity: '0',
+      color: 'var(--switch-color-knob, var(--btu-theme-white))',
+      pointerEvents: 'none',
+      transition: 'opacity 150ms ease-in-out',
+    },
+
+    '.btu-switch-track-icon-on': {
+      left: 'calc((var(--switch-track-width) - var(--switch-knob-size) - var(--switch-knob-padding)) / 2)',
+      transform: 'translate(-50%, -50%)',
+    },
+
+    '.btu-switch-track-icon-off': {
+      right: 'calc((var(--switch-track-width) - var(--switch-knob-size) - var(--switch-knob-padding)) / 2)',
+      transform: 'translate(50%, -50%)',
+    },
+
+    '.btu-switch-input:not(:checked) ~ .btu-switch-track .btu-switch-track-icon-off': {
+      opacity: '1',
+    },
+
+    // -------------------------------------------------------------------------
+    // Checked state
+    // -------------------------------------------------------------------------
+    '.btu-switch-input:checked ~ .btu-switch-track': {
+      background: 'var(--switch-color-track-on, oklch(var(--btu-theme-primary-700)))',
+    },
+
+    '.btu-switch-input:checked ~ .btu-switch-track .btu-switch-track-icon-on': {
+      opacity: '1',
+    },
+
+    '.btu-switch-input:checked ~ .btu-switch-track .btu-switch-knob': {
+      transform:
+        'translateX(calc(var(--switch-track-width) - var(--switch-knob-size) - var(--switch-knob-padding) * 2))',
+    },
+
+    // -------------------------------------------------------------------------
+    // Hover state
+    // -------------------------------------------------------------------------
+    '.btu-switch:hover .btu-switch-input:not(:disabled) ~ .btu-switch-track': {
+      background: 'var(--switch-color-track-off, oklch(var(--btu-theme-gray-400)))',
+    },
+
+    '.btu-switch:hover .btu-switch-input:not(:disabled):checked ~ .btu-switch-track': {
+      background: 'var(--switch-color-track-on, oklch(var(--btu-theme-primary-800)))',
+    },
+
+    // -------------------------------------------------------------------------
+    // Focus visible — ring on the track
+    // -------------------------------------------------------------------------
+    '.btu-switch-input:focus-visible ~ .btu-switch-track': {
+      outline: '3px solid oklch(var(--btu-theme-primary-200))',
+      outlineOffset: '0px',
+    },
+
+    // -------------------------------------------------------------------------
+    // Disabled state
+    // -------------------------------------------------------------------------
+    '.btu-switch-input:disabled ~ .btu-switch-track': {
+      opacity: '0.5',
+      pointerEvents: 'none',
+    },
+
+    '.btu-switch-input:disabled:checked ~ .btu-switch-track': {
+      background: 'oklch(var(--btu-theme-primary-200))',
+      opacity: '1',
+    },
+
+    '.btu-switch-input:disabled ~ .btu-switch-text': {
+      color: 'oklch(var(--btu-theme-gray-300))',
+    },
+
+    '.btu-switch:has(.btu-switch-input:disabled)': {
+      pointerEvents: 'none',
+    },
+
+    // -------------------------------------------------------------------------
+    // Text elements
+    // -------------------------------------------------------------------------
+    '.btu-switch-text': {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '0.125rem',
+    },
+
+    '.btu-switch-label': {
+      fontSize: config('theme.fontSize.sm')?.[0] ?? '0.875rem',
+      lineHeight: config('theme.fontSize.sm')?.[1] ?? '1.25rem',
+      fontWeight: '500',
+      color: 'oklch(var(--btu-theme-gray-700))',
+    },
+
+    '.btu-switch-description': {
+      fontSize: config('theme.fontSize.xs')?.[0] ?? '0.75rem',
+      lineHeight: config('theme.fontSize.xs')?.[1] ?? '1.125rem',
+      color: 'oklch(var(--btu-theme-gray-500))',
+    },
+
+    // -------------------------------------------------------------------------
+    // Label position: start (label/text before track)
+    // -------------------------------------------------------------------------
+    '.btu-switch-label-start': {
+      flexDirection: 'row-reverse',
+    },
+
+    // -------------------------------------------------------------------------
+    // Size variants
+    // -------------------------------------------------------------------------
+    '.btu-switch-md': {
+      '--switch-track-width': '2.25rem',
+      '--switch-track-height': '1.25rem',
+      '--switch-knob-size': '1rem',
+      '--switch-track-icon-size': '0.625rem',
+    },
+
+    '.btu-switch-lg': {
+      '--switch-track-width': '2.75rem',
+      '--switch-track-height': '1.5rem',
+      '--switch-knob-size': '1.25rem',
+      '--switch-track-icon-size': '0.75rem',
+    },
+
+    // -------------------------------------------------------------------------
+    // Reduced motion
+    // -------------------------------------------------------------------------
+    '@media (prefers-reduced-motion: reduce)': {
+      '.btu-switch-track': {
+        transition: 'background 0.01ms ease',
+      },
+      '.btu-switch-knob': {
+        transition: 'transform 0.01ms ease',
+      },
+      '.btu-switch-track-icon-on, .btu-switch-track-icon-off': {
+        transition: 'opacity 0.01ms ease',
+      },
+    },
+  }
+
+  addComponents(components)
+})

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

package/dist/tailwind-plugin-tabs.js

@@ -0,0 +1,151 @@
+import plugin from 'tailwindcss/plugin';
+/**
+ * Tabs component styles.
+ *
+ * Class Names:
+ *
+ *  btu-tabs           - Root container
+ *  btu-tabs-xs        - Extra small container padding
+ *  btu-tabs-sm        - Small container padding
+ *  btu-tabs-md        - Medium container padding (default)
+ *  btu-tabs-lg        - Large container padding
+ *  btu-tab            - Individual tab wrapper
+ *  btu-tab-button     - Inner tab button
+ *  btu-tab-button-xs  - Extra small button height/text
+ *  btu-tab-button-sm  - Small button height/text
+ *  btu-tab-button-md  - Medium button height/text (default)
+ *  btu-tab-button-lg  - Large button height/text
+ *  btu-tab-indicator  - Active tab underline indicator
+ *  btu-tabs-menu-mode - Menu variant overflow override
+ *  btu-tab-menu-wrapper - Menu variant wrapper for label and dropdown
+ *  btu-tab-menu-label - Menu variant active tab label
+ *
+ * CSS Custom Properties:
+ *
+ *  --tabs-active-color          - Text and icon color of the active tab (default: gray-700)
+ *  --tabs-active-indicator-color - Color of the active tab underline indicator (default: primary gradient)
+ *  --tabs-border-color          - Bottom border divider color (default: gray-200)
+ *  --tabs-color                 - Text and icon color for all tabs (default: gray-500)
+ *  --tabs-background            - Background color for all tab buttons (default: transparent)
+ *  --tabs-container-background  - Background color of the tabs container (default: theme white)
+ *  --tabs-hover-background      - Background color of a tab on hover (default: gray-100)
+ *  --tabs-hover-color           - Text and icon color of a tab on hover (default: gray-700)
+ *  --tabs-gap                   - Spacing between tabs (default: 1rem)
+ */
+module.exports = plugin(function ({ addComponents, addBase, config, theme }) {
+    const fontSize_xs = config('theme.fontSize.xs')?.[0] ?? '0.75rem';
+    const fontSize_sm = config('theme.fontSize.sm')?.[0] ?? '0.875rem';
+    const fontSize_base = config('theme.fontSize.base')?.[0] ?? '1rem';
+    addBase({
+        '@keyframes btu-tab-draw': {
+            from: { transform: 'scaleX(0)' },
+            to: { transform: 'scaleX(1)' },
+        },
+    });
+    addComponents({
+        '.btu-tabs': {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 'var(--tabs-gap, 1rem)',
+            position: 'relative',
+            borderBottom: '1px solid var(--tabs-border-color, oklch(var(--btu-theme-gray-200)))',
+            backgroundColor: 'var(--tabs-container-background, var(--btu-theme-white))',
+            overflowX: 'auto',
+            overflowY: 'clip',
+        },
+        // In menu mode, disable scrolling so the dropdown can extend beyond the container
+        '.btu-tabs-menu-mode': {
+            overflowX: 'visible',
+            overflowY: 'visible',
+        },
+        '.btu-tabs-xs': { paddingInline: '1rem' },
+        '.btu-tabs-sm': { paddingInline: '1rem' },
+        '.btu-tabs-md': { paddingInline: '1.5rem' },
+        '.btu-tabs-lg': { paddingInline: '1.5rem' },
+        '.btu-tab': {
+            display: 'inline-flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            flexShrink: '0',
+        },
+        '.btu-tab-button': {
+            position: 'relative',
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: '0.5rem',
+            paddingInline: '0.5rem',
+            cursor: 'pointer',
+            whiteSpace: 'nowrap',
+            boxSizing: 'border-box',
+            backgroundColor: 'var(--tabs-background, transparent)',
+            color: 'var(--tabs-color, oklch(var(--btu-theme-gray-500)))',
+            transitionProperty: 'color, background-color',
+            transitionDuration: '150ms',
+            transitionTimingFunction: 'ease',
+            '&:hover:not([aria-disabled="true"])': {
+                backgroundColor: 'var(--tabs-hover-background, oklch(var(--btu-theme-gray-100)))',
+                color: 'var(--tabs-hover-color, oklch(var(--btu-theme-gray-700)))',
+            },
+            '&[aria-selected="true"]:not([aria-disabled="true"])': {
+                color: 'var(--tabs-active-color, oklch(var(--btu-theme-gray-700)))',
+            },
+            '&[aria-disabled="true"]': {
+                color: 'oklch(var(--btu-theme-gray-300))',
+                cursor: 'not-allowed',
+            },
+            '&:focus-visible': {
+                outline: 'none',
+                boxShadow: 'inset 0 0 0 3px oklch(var(--btu-theme-primary-100)), inset 0 0 0 4px oklch(var(--btu-theme-primary-600))',
+            },
+            '@media (prefers-reduced-motion: reduce)': {
+                transitionDuration: '0.01ms',
+            },
+        },
+        '.btu-tab-button-xs': {
+            height: '2.25rem',
+            fontSize: fontSize_xs,
+            fontWeight: '400',
+        },
+        '.btu-tab-button-sm': {
+            height: '2.75rem',
+            fontSize: fontSize_sm,
+            fontWeight: '500',
+        },
+        '.btu-tab-button-md': {
+            height: '3.25rem',
+            fontSize: fontSize_sm,
+            fontWeight: '500',
+        },
+        '.btu-tab-button-lg': {
+            height: '3.5rem',
+            fontSize: fontSize_base,
+            fontWeight: '500',
+        },
+        '.btu-tab-indicator': {
+            position: 'absolute',
+            bottom: '0',
+            left: '0',
+            right: '0',
+            height: '0.125rem',
+            background: `var(--tabs-active-indicator-color, ${theme('backgroundImage.primary-gradient')})`,
+            transformOrigin: 'left',
+            animation: 'btu-tab-draw 200ms ease-out',
+            '@media (prefers-reduced-motion: reduce)': {
+                animationDuration: '0.01ms',
+            },
+        },
+        '.btu-tab-menu-wrapper': {
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: '0.5rem',
+        },
+        '.btu-tab-menu-label': {
+            fontSize: fontSize_sm,
+            fontWeight: '500',
+            color: 'var(--tabs-active-color, oklch(var(--btu-theme-gray-700)))',
+            whiteSpace: 'nowrap',
+        },
+    });
+});
+//# sourceMappingURL=tailwind-plugin-tabs.js.map

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

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

package/dist/tailwind-plugin-tabs.ts

@@ -0,0 +1,162 @@
+import plugin from 'tailwindcss/plugin'
+declare let module: any
+
+/**
+ * Tabs component styles.
+ *
+ * Class Names:
+ *
+ *  btu-tabs           - Root container
+ *  btu-tabs-xs        - Extra small container padding
+ *  btu-tabs-sm        - Small container padding
+ *  btu-tabs-md        - Medium container padding (default)
+ *  btu-tabs-lg        - Large container padding
+ *  btu-tab            - Individual tab wrapper
+ *  btu-tab-button     - Inner tab button
+ *  btu-tab-button-xs  - Extra small button height/text
+ *  btu-tab-button-sm  - Small button height/text
+ *  btu-tab-button-md  - Medium button height/text (default)
+ *  btu-tab-button-lg  - Large button height/text
+ *  btu-tab-indicator  - Active tab underline indicator
+ *  btu-tabs-menu-mode - Menu variant overflow override
+ *  btu-tab-menu-wrapper - Menu variant wrapper for label and dropdown
+ *  btu-tab-menu-label - Menu variant active tab label
+ *
+ * CSS Custom Properties:
+ *
+ *  --tabs-active-color          - Text and icon color of the active tab (default: gray-700)
+ *  --tabs-active-indicator-color - Color of the active tab underline indicator (default: primary gradient)
+ *  --tabs-border-color          - Bottom border divider color (default: gray-200)
+ *  --tabs-color                 - Text and icon color for all tabs (default: gray-500)
+ *  --tabs-background            - Background color for all tab buttons (default: transparent)
+ *  --tabs-container-background  - Background color of the tabs container (default: theme white)
+ *  --tabs-hover-background      - Background color of a tab on hover (default: gray-100)
+ *  --tabs-hover-color           - Text and icon color of a tab on hover (default: gray-700)
+ *  --tabs-gap                   - Spacing between tabs (default: 1rem)
+ */
+
+module.exports = plugin(function ({ addComponents, addBase, config, theme }) {
+  const fontSize_xs = config('theme.fontSize.xs')?.[0] ?? '0.75rem'
+  const fontSize_sm = config('theme.fontSize.sm')?.[0] ?? '0.875rem'
+  const fontSize_base = config('theme.fontSize.base')?.[0] ?? '1rem'
+
+  addBase({
+    '@keyframes btu-tab-draw': {
+      from: { transform: 'scaleX(0)' },
+      to: { transform: 'scaleX(1)' },
+    },
+  })
+
+  addComponents({
+    '.btu-tabs': {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 'var(--tabs-gap, 1rem)',
+      position: 'relative',
+      borderBottom: '1px solid var(--tabs-border-color, oklch(var(--btu-theme-gray-200)))',
+      backgroundColor: 'var(--tabs-container-background, var(--btu-theme-white))',
+      overflowX: 'auto',
+      overflowY: 'clip',
+    },
+    // In menu mode, disable scrolling so the dropdown can extend beyond the container
+    '.btu-tabs-menu-mode': {
+      overflowX: 'visible',
+      overflowY: 'visible',
+    },
+    '.btu-tabs-xs': { paddingInline: '1rem' },
+    '.btu-tabs-sm': { paddingInline: '1rem' },
+    '.btu-tabs-md': { paddingInline: '1.5rem' },
+    '.btu-tabs-lg': { paddingInline: '1.5rem' },
+
+    '.btu-tab': {
+      display: 'inline-flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      flexShrink: '0',
+    },
+
+    '.btu-tab-button': {
+      position: 'relative',
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: '0.5rem',
+      paddingInline: '0.5rem',
+      cursor: 'pointer',
+      whiteSpace: 'nowrap',
+      boxSizing: 'border-box',
+      backgroundColor: 'var(--tabs-background, transparent)',
+      color: 'var(--tabs-color, oklch(var(--btu-theme-gray-500)))',
+      transitionProperty: 'color, background-color',
+      transitionDuration: '150ms',
+      transitionTimingFunction: 'ease',
+      '&:hover:not([aria-disabled="true"])': {
+        backgroundColor: 'var(--tabs-hover-background, oklch(var(--btu-theme-gray-100)))',
+        color: 'var(--tabs-hover-color, oklch(var(--btu-theme-gray-700)))',
+      },
+      '&[aria-selected="true"]:not([aria-disabled="true"])': {
+        color: 'var(--tabs-active-color, oklch(var(--btu-theme-gray-700)))',
+      },
+      '&[aria-disabled="true"]': {
+        color: 'oklch(var(--btu-theme-gray-300))',
+        cursor: 'not-allowed',
+      },
+      '&:focus-visible': {
+        outline: 'none',
+        boxShadow:
+          'inset 0 0 0 3px oklch(var(--btu-theme-primary-100)), inset 0 0 0 4px oklch(var(--btu-theme-primary-600))',
+      },
+      '@media (prefers-reduced-motion: reduce)': {
+        transitionDuration: '0.01ms',
+      },
+    },
+
+    '.btu-tab-button-xs': {
+      height: '2.25rem',
+      fontSize: fontSize_xs,
+      fontWeight: '400',
+    },
+    '.btu-tab-button-sm': {
+      height: '2.75rem',
+      fontSize: fontSize_sm,
+      fontWeight: '500',
+    },
+    '.btu-tab-button-md': {
+      height: '3.25rem',
+      fontSize: fontSize_sm,
+      fontWeight: '500',
+    },
+    '.btu-tab-button-lg': {
+      height: '3.5rem',
+      fontSize: fontSize_base,
+      fontWeight: '500',
+    },
+
+    '.btu-tab-indicator': {
+      position: 'absolute',
+      bottom: '0',
+      left: '0',
+      right: '0',
+      height: '0.125rem',
+      background: `var(--tabs-active-indicator-color, ${theme('backgroundImage.primary-gradient')})`,
+      transformOrigin: 'left',
+      animation: 'btu-tab-draw 200ms ease-out',
+      '@media (prefers-reduced-motion: reduce)': {
+        animationDuration: '0.01ms',
+      },
+    },
+
+    '.btu-tab-menu-wrapper': {
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: '0.5rem',
+    },
+
+    '.btu-tab-menu-label': {
+      fontSize: fontSize_sm,
+      fontWeight: '500',
+      color: 'var(--tabs-active-color, oklch(var(--btu-theme-gray-700)))',
+      whiteSpace: 'nowrap',
+    },
+  })
+})

package/dist/util/EventEmitterMixin.d.ts

@@ -60,12 +60,33 @@ export interface CustomEventMap {
     'btu-dropdown-item-ready': CustomEvent<unknown>;
     'btu-dropdown-item-select': CustomEvent<{
         label: string;
+        value: string;
         selected: boolean;
     }>;
     'btu-dropdown-item-favorite': CustomEvent<{
         label: string;
         favorited: boolean;
     }>;
+    'btu-tabs-ready': CustomEvent<unknown>;
+    'btu-tab-ready': CustomEvent<unknown>;
+    'btu-tab-change': CustomEvent<{
+        name: string;
+    }>;
+    'btu-tabs-show': CustomEvent<{
+        name: string;
+    }>;
+    'btu-tabs-hide': CustomEvent<{
+        name: string;
+    }>;
+    'btu-switch-ready': CustomEvent<unknown>;
+    'btu-switch-change': CustomEvent<{
+        checked: boolean;
+    }>;
+    'btu-switch-focus': CustomEvent<unknown>;
+    'btu-action-bar-ready': CustomEvent<unknown>;
+    'btu-action-item-click': CustomEvent<{
+        label: string;
+    }>;
 }
 interface CombinedEventMap extends HTMLElementEventMap, CustomEventMap {
 }

package/dist/util/EventEmitterMixin.d.ts.map

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

package/dist/util/EventEmitterMixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"EventEmitterMixin.js","sourceRoot":"","sources":["../../src/util/EventEmitterMixin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAiEhC;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAoC,UAAa,EAAE,EAAE;IACpF,MAAM,sBAAuB,SAAQ,UAAU;QAC7C;;;;WAIG;QACH,iBAAiB;YACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;YACzB,OAAO,CAAC,OAAO,EAAE,CAAC,IAAI,CACpB,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,uBAAuB,EAAE,EAAE,CAAC,EAC5C,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE,EAAE,KAAK,EAAE,CAAC,CACnD,CAAA;QACH,CAAC;QAED;;;;WAIG;QACH,oBAAoB;YAClB,KAAK,CAAC,oBAAoB,EAAE,CAAA;YAC5B,IAAI,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAA;QACvC,CAAC;QAED;;;;;;;;;;;;;;;;WAgBG;QACH,IAAI,CAAiC,IAAO,EAAE,MAA6C;YACzF,OAAO,IAAI,CAAC,aAAa,CACvB,IAAI,WAAW,CAAC,IAAI,EAAE;gBACpB,OAAO,EAAE,IAAI;gBACb,UAAU,EAAE,KAAK;gBACjB,QAAQ,EAAE,IAAI;gBACd,MAAM;aACP,CAAC,CACH,CAAA;QACH,CAAC;KACF;IACD,OAAO,sBAAqE,CAAA;AAC9E,CAAC,CAAA"}
+{"version":3,"file":"EventEmitterMixin.js","sourceRoot":"","sources":["../../src/util/EventEmitterMixin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AA2EhC;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAoC,UAAa,EAAE,EAAE;IACpF,MAAM,sBAAuB,SAAQ,UAAU;QAC7C;;;;WAIG;QACH,iBAAiB;YACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;YACzB,OAAO,CAAC,OAAO,EAAE,CAAC,IAAI,CACpB,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,uBAAuB,EAAE,EAAE,CAAC,EAC5C,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE,EAAE,KAAK,EAAE,CAAC,CACnD,CAAA;QACH,CAAC;QAED;;;;WAIG;QACH,oBAAoB;YAClB,KAAK,CAAC,oBAAoB,EAAE,CAAA;YAC5B,IAAI,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAA;QACvC,CAAC;QAED;;;;;;;;;;;;;;;;WAgBG;QACH,IAAI,CAAiC,IAAO,EAAE,MAA6C;YACzF,OAAO,IAAI,CAAC,aAAa,CACvB,IAAI,WAAW,CAAC,IAAI,EAAE;gBACpB,OAAO,EAAE,IAAI;gBACb,UAAU,EAAE,KAAK;gBACjB,QAAQ,EAAE,IAAI;gBACd,MAAM;aACP,CAAC,CACH,CAAA;QACH,CAAC;KACF;IACD,OAAO,sBAAqE,CAAA;AAC9E,CAAC,CAAA"}