@brightspot/ui 1.9.0 → 1.10.0

package/dist/tailwind-plugin-switch.js

@@ -0,0 +1,223 @@
+import plugin from 'tailwindcss/plugin';
+/**
+ * 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 = {
+        // -------------------------------------------------------------------------
+        // 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);
+});
+//# sourceMappingURL=tailwind-plugin-switch.js.map

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

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

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/util/EventEmitterMixin.d.ts

@@ -66,6 +66,11 @@ export interface CustomEventMap {
         label: string;
         favorited: boolean;
     }>;
+    'btu-switch-ready': CustomEvent<unknown>;
+    'btu-switch-change': CustomEvent<{
+        checked: boolean;
+    }>;
+    'btu-switch-focus': CustomEvent<unknown>;
 }
 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;AAoEhC;;;;;;;;;;;;;;;;;;;;;;;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"}

package/dist/util/position.d.ts

@@ -0,0 +1,9 @@
+export type EffectPosition = {
+    x: number;
+    y: number;
+} | MouseEvent | Element;
+export declare function resolvePosition(position: EffectPosition): {
+    x: number;
+    y: number;
+};
+//# sourceMappingURL=position.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"position.d.ts","sourceRoot":"","sources":["../../src/util/position.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,UAAU,GAAG,OAAO,CAAA;AAE5E,wBAAgB,eAAe,CAAC,QAAQ,EAAE,cAAc,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CASlF"}

package/dist/util/position.js

@@ -0,0 +1,11 @@
+export function resolvePosition(position) {
+    if (position instanceof MouseEvent) {
+        return { x: position.clientX, y: position.clientY };
+    }
+    if (position instanceof Element) {
+        const rect = position.getBoundingClientRect();
+        return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
+    }
+    return position;
+}
+//# sourceMappingURL=position.js.map

package/dist/util/position.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"position.js","sourceRoot":"","sources":["../../src/util/position.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,eAAe,CAAC,QAAwB;IACtD,IAAI,QAAQ,YAAY,UAAU,EAAE,CAAC;QACnC,OAAO,EAAE,CAAC,EAAE,QAAQ,CAAC,OAAO,EAAE,CAAC,EAAE,QAAQ,CAAC,OAAO,EAAE,CAAA;IACrD,CAAC;IACD,IAAI,QAAQ,YAAY,OAAO,EAAE,CAAC;QAChC,MAAM,IAAI,GAAG,QAAQ,CAAC,qBAAqB,EAAE,CAAA;QAC7C,OAAO,EAAE,CAAC,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAA;IACzE,CAAC;IACD,OAAO,QAAQ,CAAA;AACjB,CAAC"}

package/docs/components/README.md

@@ -17,6 +17,7 @@ This directory contains auto-generated API documentation for all Brightspot UI w
 - [`<btu-linear-progress>` - LinearProgress](LinearProgress.md)
 - [`<btu-pagination>` - Pagination](Pagination.md)
 - [`<btu-popover>` - Popover](Popover.md)
+- [`<btu-switch>` - Switch](Switch.md)
 - [`<btu-widget>` - Widget](Widget.md)
 
 ---

package/docs/components/Switch.md

@@ -0,0 +1,79 @@
+# `src/components/switch/Switch.ts`:
+
+## class: `Switch`, `btu-switch`
+
+### Superclass
+
+| Name         | Module | Package |
+| ------------ | ------ | ------- |
+| `LitElement` |        | lit     |
+
+### Mixins
+
+| Name                | Module                         | Package |
+| ------------------- | ------------------------------ | ------- |
+| `EventEmitterMixin` | /src/util/EventEmitterMixin.js |         |
+| `ReadyMixin`        | /src/util/ReadyMixin.js        |         |
+
+### Fields
+
+| Name            | Privacy | Type                             | Default   | Description                                                                         | Inherited From |
+| --------------- | ------- | -------------------------------- | --------- | ----------------------------------------------------------------------------------- | -------------- |
+| `size`          |         | `'small' \| 'medium' \| 'large'` | `'small'` | Controls the physical dimensions of the switch and the associated label typography. |                |
+| `label`         |         | `string \| undefined`            |           | The primary text displayed next to the toggle.                                      |                |
+| `description`   |         | `string \| undefined`            |           | Optional helper text or secondary information displayed below the label.            |                |
+| `checked`       |         | `boolean`                        | `false`   | The current state of the switch (on/off).                                           |                |
+| `disabled`      |         | `boolean`                        | `false`   | If true, the toggle is non-interactive and visually muted.                          |                |
+| `name`          |         | `string \| undefined`            |           | Name of the control for form participation.                                         |                |
+| `labelPosition` |         | `'start' \| 'end'`               | `'end'`   | Determines if the label appears to the left or right of the switch.                 |                |
+| `onIcon`        |         | `string \| undefined`            |           | Lucide icon name shown on the track when the switch is checked (on).                |                |
+| `offIcon`       |         | `string \| undefined`            |           | Lucide icon name shown on the track when the switch is unchecked (off).             |                |
+
+### Methods
+
+| Name             | Privacy | Description | Parameters | Return | Inherited From |
+| ---------------- | ------- | ----------- | ---------- | ------ | -------------- |
+| `_onInputChange` | private |             | `e: Event` | `void` |                |
+| `_onFocus`       | private |             |            | `void` |                |
+| `_toggleInput`   | private |             |            | `void` |                |
+
+### Events
+
+| Name                | Type                                | Description                                              | Inherited From |
+| ------------------- | ----------------------------------- | -------------------------------------------------------- | -------------- |
+| `btu-switch-ready`  | `CustomEvent`                       | Fired after the toggle is first rendered and initialized |                |
+| `btu-switch-change` | `CustomEvent<{ checked: boolean }>` | Fired when the user toggles the switch                   |                |
+| `btu-switch-focus`  | `CustomEvent`                       | Fired when the component gains focus                     |                |
+
+### Attributes
+
+| Name             | Field         | Inherited From |
+| ---------------- | ------------- | -------------- |
+| `size`           | size          |                |
+| `label`          | label         |                |
+| `description`    | description   |                |
+| `checked`        | checked       |                |
+| `disabled`       | disabled      |                |
+| `name`           | name          |                |
+| `label-position` | labelPosition |                |
+| `on-icon`        | onIcon        |                |
+| `off-icon`       | offIcon       |                |
+
+### CSS Properties
+
+| Name                       | Default | Description                                                                         |
+| -------------------------- | ------- | ----------------------------------------------------------------------------------- |
+| `--switch-color-track-on`  |         | Background color when the toggle is checked (default: var(--btu-theme-primary-700)) |
+| `--switch-color-track-off` |         | Background color when the toggle is unchecked (default: var(--btu-theme-gray-300))  |
+| `--switch-color-knob`      |         | Color of the sliding circular handle (default: var(--btu-theme-white))              |
+| `--switch-label-spacing`   |         | Distance between the switch and the text label (default: 0.75rem)                   |
+| `--switch-track-icon-size` |         | Size of the track icons (default: sm 0.5rem, md 0.625rem, lg 0.75rem)               |
+
+<hr/>
+
+## Exports
+
+| Kind                        | Name         | Declaration | Module                          | Package |
+| --------------------------- | ------------ | ----------- | ------------------------------- | ------- |
+| `js`                        | `default`    | Switch      | src/components/switch/Switch.ts |         |
+| `custom-element-definition` | `btu-switch` | Switch      | src/components/switch/Switch.ts |         |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspot/ui",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "type": "module",
   "license": "UNLICENSED",
   "description": "A UI library for building Brightspot CMS components.",
@@ -10,6 +10,7 @@
     ".": "./dist/tailwind.config.js",
     "./components/*": "./dist/components/*",
     "./util/*": "./dist/util/*",
+    "./effects/*": "./dist/effects/*",
     "./dist/*": "./dist/*",
     "./custom-elements.json": "./dist/custom-elements.json"
   },