@brightspot/ui 1.11.0 → 3.0.1-cms-ui-migration.0

package/dist/storybook/assets/{CombinedEffects.stories-CtKzOUZn.js → CombinedEffects.stories-BIvRmEL2.js}

@@ -1,8 +1,8 @@
-import{x as i}from"./iframe-DloIUNZz.js";import{b as d}from"./celebrate-KwPoF1K3.js";import{b as l}from"./ripple-DQbyyRUw.js";import{B as r}from"./Button-CFLAI1H9.js";import"./preload-helper-PPVm8Dsz.js";import"./position-CFNQy3J6.js";const v={title:"Effects/Combined Effects",tags:["autodocs"],parameters:{docs:{subtitle:"Ripple + Sparkle via Houdini Paint API inside the View Transition",description:{component:"Triggers `btuRipple` with the `sparkle` option. When the CSS Paint API is available (Chrome/Edge), sparkle particles render directly on the View Transition pseudo-element via a paint worklet — synchronized with the ripple ring. Falls back to DOM-based `btuCelebrate` in other browsers."}},controls:{expanded:!0}},argTypes:{rippleDuration:{control:{type:"range",min:500,max:5e3,step:100},description:"Ripple animation duration (ms)"},ringWidth:{control:{type:"range",min:10,max:100,step:5},description:"Width of the hue-shifted band (px)"},feather:{control:{type:"range",min:10,max:120,step:5},description:"Feathered edge transition width (px)"},hueShift:{control:{type:"range",min:0,max:330,step:30},description:"OKLCH hue rotation (degrees)"},contrast:{control:{type:"range",min:.5,max:3,step:.1},description:"Contrast multiplier"},saturate:{control:{type:"range",min:0,max:5,step:.5},description:"Saturation multiplier"},sparkle:{control:"boolean",description:"Enable sparkle particles via CSS Paint API (Chrome/Edge). Falls back to DOM celebrate when off."},sparkleDuration:{control:{type:"range",min:500,max:5e3,step:100},description:"Sparkle animation duration (ms) — independent from ripple duration"},sparkleSize:{control:{type:"range",min:100,max:600,step:50},description:"Sparkle burst area size (px)"}},args:{rippleDuration:1200,ringWidth:40,feather:75,hueShift:0,contrast:1.8,saturate:1.5,sparkle:!0,sparkleDuration:2e3,sparkleSize:300}},s={args:{rippleDuration:1e3,ringWidth:35,hueShift:0,sparkleDuration:1300,sparkleSize:300,contrast:1.5,saturate:2.5,feather:115},render:e=>i`
+import{x as i}from"./iframe-D5Uwm8Zd.js";import{b as d}from"./celebrate-KwPoF1K3.js";import{b as l}from"./ripple-DQbyyRUw.js";import{B as r}from"./Button-CQ2CjiFm.js";import"./preload-helper-PPVm8Dsz.js";import"./position-CFNQy3J6.js";const v={title:"Effects/Combined Effects",tags:["autodocs"],parameters:{docs:{subtitle:"Ripple + Sparkle via Houdini Paint API inside the View Transition",description:{component:"Triggers `btuRipple` with the `sparkle` option. When the CSS Paint API is available (Chrome/Edge), sparkle particles render directly on the View Transition pseudo-element via a paint worklet — synchronized with the ripple ring. Falls back to DOM-based `btuCelebrate` in other browsers."}},controls:{expanded:!0}},argTypes:{rippleDuration:{control:{type:"range",min:500,max:5e3,step:100},description:"Ripple animation duration (ms)"},ringWidth:{control:{type:"range",min:10,max:100,step:5},description:"Width of the hue-shifted band (px)"},feather:{control:{type:"range",min:10,max:120,step:5},description:"Feathered edge transition width (px)"},hueShift:{control:{type:"range",min:0,max:330,step:30},description:"OKLCH hue rotation (degrees)"},contrast:{control:{type:"range",min:.5,max:3,step:.1},description:"Contrast multiplier"},saturate:{control:{type:"range",min:0,max:5,step:.5},description:"Saturation multiplier"},sparkle:{control:"boolean",description:"Enable sparkle particles via CSS Paint API (Chrome/Edge). Falls back to DOM celebrate when off."},sparkleDuration:{control:{type:"range",min:500,max:5e3,step:100},description:"Sparkle animation duration (ms) — independent from ripple duration"},sparkleSize:{control:{type:"range",min:100,max:600,step:50},description:"Sparkle burst area size (px)"}},args:{rippleDuration:1200,ringWidth:40,feather:75,hueShift:0,contrast:1.8,saturate:1.5,sparkle:!0,sparkleDuration:2e3,sparkleSize:300}},s={args:{rippleDuration:1e3,ringWidth:35,hueShift:0,sparkleDuration:1300,sparkleSize:300,contrast:1.5,saturate:2.5,feather:115},render:e=>i`
       <div @click=${async a=>{const{ready:t}=l({position:a,duration:e.rippleDuration,ringWidth:e.ringWidth,feather:e.feather,hueShift:e.hueShift,contrast:e.contrast,saturate:e.saturate,sparkle:e.sparkle?{size:e.sparkleSize,duration:e.sparkleDuration}:!1});e.sparkle||(await t,d({position:a,size:e.sparkleSize}))}} class="flex" style="min-height: 100vh;">
         <!-- Left Nav Rail -->
         <div class="flex w-16 flex-shrink-0 flex-col items-center gap-4 border-r border-gray-200 bg-white py-4">
-          <div class="bg-primary-500 h-8 w-8 rounded-lg"></div>
+          <div class="h-8 w-8 rounded-lg bg-primary-500"></div>
           <div class="mt-2 h-5 w-5 rounded bg-gray-300"></div>
           <div class="h-5 w-5 rounded bg-gray-300"></div>
           <div class="h-5 w-5 rounded bg-gray-300"></div>
@@ -18,7 +18,7 @@ import{x as i}from"./iframe-DloIUNZz.js";import{b as d}from"./celebrate-KwPoF1K3
             <div class="flex items-center gap-3">
               <span class="text-sm font-semibold text-gray-900">Lorem Ipsum</span>
               <div class="h-5 w-5 rounded bg-gray-200"></div>
-              <span class="bg-primary-100 text-primary-700 rounded px-2 py-0.5 text-xs font-medium">EN</span>
+              <span class="rounded bg-primary-100 px-2 py-0.5 text-xs font-medium text-primary-700">EN</span>
             </div>
             <div class="flex items-center gap-3">
               <div class="h-8 w-64 rounded-md bg-gray-100"></div>
@@ -28,7 +28,7 @@ import{x as i}from"./iframe-DloIUNZz.js";import{b as d}from"./celebrate-KwPoF1K3
 
           <!-- Tabs -->
           <div class="flex gap-6 border-b border-gray-200 bg-white px-6">
-            <span class="border-primary-500 text-primary-600 border-b-2 py-3 text-sm font-medium">Dolor</span>
+            <span class="border-b-2 border-primary-500 py-3 text-sm font-medium text-primary-600">Dolor</span>
             <span class="py-3 text-sm text-gray-500">Amet</span>
             <span class="py-3 text-sm text-gray-500">Consectetur</span>
             <span class="py-3 text-sm text-gray-500">Adipiscing</span>
@@ -38,7 +38,7 @@ import{x as i}from"./iframe-DloIUNZz.js";import{b as d}from"./celebrate-KwPoF1K3
           <!-- Page Content -->
           <div class="flex flex-col gap-6 p-6">
             <!-- Warning -->
-            <p class="bg-warning-50 text-warning-700 border-warning-200 rounded-md border px-3 py-2 text-xs">
+            <p class="rounded-md border border-warning-200 bg-warning-50 px-3 py-2 text-xs text-warning-700">
               ⚠ Click anywhere — the hue ripple sweeps outward while sparkles burst from the click point. The UI is
               non-interactive during the view transition.
             </p>
@@ -46,16 +46,16 @@ import{x as i}from"./iframe-DloIUNZz.js";import{b as d}from"./celebrate-KwPoF1K3
             <!-- Quick Start -->
             <div class="flex gap-3">
               <div class="flex w-44 flex-col gap-2 rounded-lg border border-gray-200 bg-white p-4">
-                <div class="bg-primary-100 h-8 w-8 rounded-md"></div>
+                <div class="h-8 w-8 rounded-md bg-primary-100"></div>
                 <span class="text-sm font-medium text-gray-700">Sed Do</span>
-                <div class="bg-primary-500 h-1 w-full rounded"></div>
+                <div class="h-1 w-full rounded bg-primary-500"></div>
               </div>
               <div class="flex w-44 flex-col gap-2 rounded-lg border border-gray-200 bg-white p-4">
-                <div class="bg-primary-100 h-8 w-8 rounded-md"></div>
+                <div class="h-8 w-8 rounded-md bg-primary-100"></div>
                 <span class="text-sm font-medium text-gray-700">Eiusmod</span>
               </div>
               <div class="flex w-44 flex-col gap-2 rounded-lg border border-gray-200 bg-white p-4">
-                <div class="bg-primary-100 h-8 w-8 rounded-md"></div>
+                <div class="h-8 w-8 rounded-md bg-primary-100"></div>
                 <span class="text-sm font-medium text-gray-700">Tempor</span>
               </div>
             </div>
@@ -75,7 +75,7 @@ import{x as i}from"./iframe-DloIUNZz.js";import{b as d}from"./celebrate-KwPoF1K3
                       <div class="h-3 w-3/4 rounded bg-gray-200"></div>
                       <div class="h-2 w-1/3 rounded bg-gray-100"></div>
                     </div>
-                    <span class="bg-success-100 text-success-700 rounded-full px-2 py-0.5 text-xs">Ipsum</span>
+                    <span class="rounded-full bg-success-100 px-2 py-0.5 text-xs text-success-700">Ipsum</span>
                   </div>
                   <div class="flex items-center gap-3 border-b border-gray-50 px-5 py-3">
                     <div class="h-8 w-8 rounded bg-gray-100"></div>
@@ -83,7 +83,7 @@ import{x as i}from"./iframe-DloIUNZz.js";import{b as d}from"./celebrate-KwPoF1K3
                       <div class="h-3 w-2/3 rounded bg-gray-200"></div>
                       <div class="h-2 w-1/4 rounded bg-gray-100"></div>
                     </div>
-                    <span class="bg-warning-100 text-warning-700 rounded-full px-2 py-0.5 text-xs">Dolor</span>
+                    <span class="rounded-full bg-warning-100 px-2 py-0.5 text-xs text-warning-700">Dolor</span>
                   </div>
                   <div class="flex items-center gap-3 border-b border-gray-50 px-5 py-3">
                     <div class="h-8 w-8 rounded bg-gray-100"></div>
@@ -91,7 +91,7 @@ import{x as i}from"./iframe-DloIUNZz.js";import{b as d}from"./celebrate-KwPoF1K3
                       <div class="h-3 w-1/2 rounded bg-gray-200"></div>
                       <div class="h-2 w-1/3 rounded bg-gray-100"></div>
                     </div>
-                    <span class="bg-error-100 text-error-700 rounded-full px-2 py-0.5 text-xs">Amet</span>
+                    <span class="rounded-full bg-error-100 px-2 py-0.5 text-xs text-error-700">Amet</span>
                   </div>
                   <div class="flex items-center gap-3 px-5 py-3">
                     <div class="h-8 w-8 rounded bg-gray-100"></div>
@@ -99,7 +99,7 @@ import{x as i}from"./iframe-DloIUNZz.js";import{b as d}from"./celebrate-KwPoF1K3
                       <div class="h-3 w-3/5 rounded bg-gray-200"></div>
                       <div class="h-2 w-1/4 rounded bg-gray-100"></div>
                     </div>
-                    <span class="bg-success-100 text-success-700 rounded-full px-2 py-0.5 text-xs">Ipsum</span>
+                    <span class="rounded-full bg-success-100 px-2 py-0.5 text-xs text-success-700">Ipsum</span>
                   </div>
                 </div>
               </div>
@@ -114,7 +114,7 @@ import{x as i}from"./iframe-DloIUNZz.js";import{b as d}from"./celebrate-KwPoF1K3
                   <div class="rounded-lg border border-gray-100 p-4">
                     <div class="flex items-center gap-2">
                       <span class="text-xs text-gray-500">Magna Aliqua</span>
-                      <span class="bg-success-100 text-success-700 rounded-full px-2 py-0.5 text-xs">Sit</span>
+                      <span class="rounded-full bg-success-100 px-2 py-0.5 text-xs text-success-700">Sit</span>
                     </div>
                     <p class="mt-1 text-sm font-medium text-gray-900">Ut enim ad minim veniam</p>
                     <p class="mt-0.5 text-xs text-gray-500">Quis nostrud exercitation ullamco...</p>
@@ -122,12 +122,12 @@ import{x as i}from"./iframe-DloIUNZz.js";import{b as d}from"./celebrate-KwPoF1K3
                       <span class="text-xs text-gray-500">60%</span>
                       ${r({color:"primary",fill:!0,contained:!0,size:"sm",label:"View"})}
                     </div>
-                    <div class="bg-primary-500 mt-2 h-1.5 w-3/5 rounded-full"></div>
+                    <div class="mt-2 h-1.5 w-3/5 rounded-full bg-primary-500"></div>
                   </div>
                   <div class="rounded-lg border border-gray-100 p-4">
                     <div class="flex items-center gap-2">
                       <span class="text-xs text-gray-500">Magna Aliqua</span>
-                      <span class="bg-warning-100 text-warning-700 rounded-full px-2 py-0.5 text-xs">Sed</span>
+                      <span class="rounded-full bg-warning-100 px-2 py-0.5 text-xs text-warning-700">Sed</span>
                     </div>
                     <p class="mt-1 text-sm font-medium text-gray-900">Duis aute irure dolor</p>
                     <p class="mt-0.5 text-xs text-gray-500">Excepteur sint occaecat cupidatat...</p>
@@ -135,7 +135,7 @@ import{x as i}from"./iframe-DloIUNZz.js";import{b as d}from"./celebrate-KwPoF1K3
                       <span class="text-xs text-gray-500">30%</span>
                       ${r({color:"primary",fill:!0,contained:!0,size:"sm",label:"View"})}
                     </div>
-                    <div class="bg-primary-500 mt-2 h-1.5 w-1/3 rounded-full"></div>
+                    <div class="mt-2 h-1.5 w-1/3 rounded-full bg-primary-500"></div>
                   </div>
                 </div>
               </div>
@@ -183,7 +183,7 @@ import{x as i}from"./iframe-DloIUNZz.js";import{b as d}from"./celebrate-KwPoF1K3
       <div @click=\${onClick} class="flex" style="min-height: 100vh;">
         <!-- Left Nav Rail -->
         <div class="flex w-16 flex-shrink-0 flex-col items-center gap-4 border-r border-gray-200 bg-white py-4">
-          <div class="bg-primary-500 h-8 w-8 rounded-lg"></div>
+          <div class="h-8 w-8 rounded-lg bg-primary-500"></div>
           <div class="mt-2 h-5 w-5 rounded bg-gray-300"></div>
           <div class="h-5 w-5 rounded bg-gray-300"></div>
           <div class="h-5 w-5 rounded bg-gray-300"></div>
@@ -199,7 +199,7 @@ import{x as i}from"./iframe-DloIUNZz.js";import{b as d}from"./celebrate-KwPoF1K3
             <div class="flex items-center gap-3">
               <span class="text-sm font-semibold text-gray-900">Lorem Ipsum</span>
               <div class="h-5 w-5 rounded bg-gray-200"></div>
-              <span class="bg-primary-100 text-primary-700 rounded px-2 py-0.5 text-xs font-medium">EN</span>
+              <span class="rounded bg-primary-100 px-2 py-0.5 text-xs font-medium text-primary-700">EN</span>
             </div>
             <div class="flex items-center gap-3">
               <div class="h-8 w-64 rounded-md bg-gray-100"></div>
@@ -216,7 +216,7 @@ import{x as i}from"./iframe-DloIUNZz.js";import{b as d}from"./celebrate-KwPoF1K3
 
           <!-- Tabs -->
           <div class="flex gap-6 border-b border-gray-200 bg-white px-6">
-            <span class="border-primary-500 text-primary-600 border-b-2 py-3 text-sm font-medium">Dolor</span>
+            <span class="border-b-2 border-primary-500 py-3 text-sm font-medium text-primary-600">Dolor</span>
             <span class="py-3 text-sm text-gray-500">Amet</span>
             <span class="py-3 text-sm text-gray-500">Consectetur</span>
             <span class="py-3 text-sm text-gray-500">Adipiscing</span>
@@ -226,7 +226,7 @@ import{x as i}from"./iframe-DloIUNZz.js";import{b as d}from"./celebrate-KwPoF1K3
           <!-- Page Content -->
           <div class="flex flex-col gap-6 p-6">
             <!-- Warning -->
-            <p class="bg-warning-50 text-warning-700 border-warning-200 rounded-md border px-3 py-2 text-xs">
+            <p class="rounded-md border border-warning-200 bg-warning-50 px-3 py-2 text-xs text-warning-700">
               ⚠ Click anywhere — the hue ripple sweeps outward while sparkles burst from the click point. The UI is
               non-interactive during the view transition.
             </p>
@@ -234,16 +234,16 @@ import{x as i}from"./iframe-DloIUNZz.js";import{b as d}from"./celebrate-KwPoF1K3
             <!-- Quick Start -->
             <div class="flex gap-3">
               <div class="flex w-44 flex-col gap-2 rounded-lg border border-gray-200 bg-white p-4">
-                <div class="bg-primary-100 h-8 w-8 rounded-md"></div>
+                <div class="h-8 w-8 rounded-md bg-primary-100"></div>
                 <span class="text-sm font-medium text-gray-700">Sed Do</span>
-                <div class="bg-primary-500 h-1 w-full rounded"></div>
+                <div class="h-1 w-full rounded bg-primary-500"></div>
               </div>
               <div class="flex w-44 flex-col gap-2 rounded-lg border border-gray-200 bg-white p-4">
-                <div class="bg-primary-100 h-8 w-8 rounded-md"></div>
+                <div class="h-8 w-8 rounded-md bg-primary-100"></div>
                 <span class="text-sm font-medium text-gray-700">Eiusmod</span>
               </div>
               <div class="flex w-44 flex-col gap-2 rounded-lg border border-gray-200 bg-white p-4">
-                <div class="bg-primary-100 h-8 w-8 rounded-md"></div>
+                <div class="h-8 w-8 rounded-md bg-primary-100"></div>
                 <span class="text-sm font-medium text-gray-700">Tempor</span>
               </div>
             </div>
@@ -263,7 +263,7 @@ import{x as i}from"./iframe-DloIUNZz.js";import{b as d}from"./celebrate-KwPoF1K3
                       <div class="h-3 w-3/4 rounded bg-gray-200"></div>
                       <div class="h-2 w-1/3 rounded bg-gray-100"></div>
                     </div>
-                    <span class="bg-success-100 text-success-700 rounded-full px-2 py-0.5 text-xs">Ipsum</span>
+                    <span class="rounded-full bg-success-100 px-2 py-0.5 text-xs text-success-700">Ipsum</span>
                   </div>
                   <div class="flex items-center gap-3 border-b border-gray-50 px-5 py-3">
                     <div class="h-8 w-8 rounded bg-gray-100"></div>
@@ -271,7 +271,7 @@ import{x as i}from"./iframe-DloIUNZz.js";import{b as d}from"./celebrate-KwPoF1K3
                       <div class="h-3 w-2/3 rounded bg-gray-200"></div>
                       <div class="h-2 w-1/4 rounded bg-gray-100"></div>
                     </div>
-                    <span class="bg-warning-100 text-warning-700 rounded-full px-2 py-0.5 text-xs">Dolor</span>
+                    <span class="rounded-full bg-warning-100 px-2 py-0.5 text-xs text-warning-700">Dolor</span>
                   </div>
                   <div class="flex items-center gap-3 border-b border-gray-50 px-5 py-3">
                     <div class="h-8 w-8 rounded bg-gray-100"></div>
@@ -279,7 +279,7 @@ import{x as i}from"./iframe-DloIUNZz.js";import{b as d}from"./celebrate-KwPoF1K3
                       <div class="h-3 w-1/2 rounded bg-gray-200"></div>
                       <div class="h-2 w-1/3 rounded bg-gray-100"></div>
                     </div>
-                    <span class="bg-error-100 text-error-700 rounded-full px-2 py-0.5 text-xs">Amet</span>
+                    <span class="rounded-full bg-error-100 px-2 py-0.5 text-xs text-error-700">Amet</span>
                   </div>
                   <div class="flex items-center gap-3 px-5 py-3">
                     <div class="h-8 w-8 rounded bg-gray-100"></div>
@@ -287,7 +287,7 @@ import{x as i}from"./iframe-DloIUNZz.js";import{b as d}from"./celebrate-KwPoF1K3
                       <div class="h-3 w-3/5 rounded bg-gray-200"></div>
                       <div class="h-2 w-1/4 rounded bg-gray-100"></div>
                     </div>
-                    <span class="bg-success-100 text-success-700 rounded-full px-2 py-0.5 text-xs">Ipsum</span>
+                    <span class="rounded-full bg-success-100 px-2 py-0.5 text-xs text-success-700">Ipsum</span>
                   </div>
                 </div>
               </div>
@@ -302,7 +302,7 @@ import{x as i}from"./iframe-DloIUNZz.js";import{b as d}from"./celebrate-KwPoF1K3
                   <div class="rounded-lg border border-gray-100 p-4">
                     <div class="flex items-center gap-2">
                       <span class="text-xs text-gray-500">Magna Aliqua</span>
-                      <span class="bg-success-100 text-success-700 rounded-full px-2 py-0.5 text-xs">Sit</span>
+                      <span class="rounded-full bg-success-100 px-2 py-0.5 text-xs text-success-700">Sit</span>
                     </div>
                     <p class="mt-1 text-sm font-medium text-gray-900">Ut enim ad minim veniam</p>
                     <p class="mt-0.5 text-xs text-gray-500">Quis nostrud exercitation ullamco...</p>
@@ -316,12 +316,12 @@ import{x as i}from"./iframe-DloIUNZz.js";import{b as d}from"./celebrate-KwPoF1K3
       label: 'View'
     })}
                     </div>
-                    <div class="bg-primary-500 mt-2 h-1.5 w-3/5 rounded-full"></div>
+                    <div class="mt-2 h-1.5 w-3/5 rounded-full bg-primary-500"></div>
                   </div>
                   <div class="rounded-lg border border-gray-100 p-4">
                     <div class="flex items-center gap-2">
                       <span class="text-xs text-gray-500">Magna Aliqua</span>
-                      <span class="bg-warning-100 text-warning-700 rounded-full px-2 py-0.5 text-xs">Sed</span>
+                      <span class="rounded-full bg-warning-100 px-2 py-0.5 text-xs text-warning-700">Sed</span>
                     </div>
                     <p class="mt-1 text-sm font-medium text-gray-900">Duis aute irure dolor</p>
                     <p class="mt-0.5 text-xs text-gray-500">Excepteur sint occaecat cupidatat...</p>
@@ -335,7 +335,7 @@ import{x as i}from"./iframe-DloIUNZz.js";import{b as d}from"./celebrate-KwPoF1K3
       label: 'View'
     })}
                     </div>
-                    <div class="bg-primary-500 mt-2 h-1.5 w-1/3 rounded-full"></div>
+                    <div class="mt-2 h-1.5 w-1/3 rounded-full bg-primary-500"></div>
                   </div>
                 </div>
               </div>

package/dist/storybook/assets/{ComponentStatesMixin-DMLCk9fE.js → ComponentStatesMixin-BeLIKOsg.js}

@@ -1 +1 @@
-import"./iframe-DloIUNZz.js";const a=t=>{class s extends t{constructor(){super(...arguments),this.internals=this.attachInternals(),this.states=this.internals.states}}return s};export{a as C};
+import"./iframe-D5Uwm8Zd.js";const a=t=>{class s extends t{constructor(){super(...arguments),this.internals=this.attachInternals(),this.states=this.internals.states}}return s};export{a as C};

package/dist/storybook/assets/{ComponentStatesMixin.stories-D8UI9o-d.js → ComponentStatesMixin.stories-u03jgLUU.js}

@@ -1,4 +1,4 @@
-import{x as c,i as g}from"./iframe-DloIUNZz.js";import{t as m}from"./custom-element-UsVr97OX.js";import{C as u}from"./ComponentStatesMixin-DMLCk9fE.js";import"./preload-helper-PPVm8Dsz.js";var r=Object.freeze,b=Object.defineProperty,h=Object.getOwnPropertyDescriptor,x=(e,o,p,d)=>{for(var t=d>1?void 0:d?h(o,p):o,s=e.length-1,n;s>=0;s--)(n=e[s])&&(t=n(t)||t);return t},f=(e,o)=>r(b(e,"raw",{value:r(e.slice())})),l;const C={title:"Mixins/Component States",tags:["autodocs"],parameters:{docs:{description:{component:`
+import{x as c,i as g}from"./iframe-D5Uwm8Zd.js";import{t as m}from"./custom-element-UsVr97OX.js";import{C as u}from"./ComponentStatesMixin-BeLIKOsg.js";import"./preload-helper-PPVm8Dsz.js";var r=Object.freeze,b=Object.defineProperty,h=Object.getOwnPropertyDescriptor,x=(e,o,p,d)=>{for(var t=d>1?void 0:d?h(o,p):o,s=e.length-1,n;s>=0;s--)(n=e[s])&&(t=n(t)||t);return t},f=(e,o)=>r(b(e,"raw",{value:r(e.slice())})),l;const C={title:"Mixins/Component States",tags:["autodocs"],parameters:{docs:{description:{component:`
 \`ComponentStatesMixin\` provides access to the **Custom State API** for managing component-specific states that can be styled with the \`:state()\` pseudo-class in CSS.
 
 Uses \`ElementInternals.states\` (\`CustomStateSet\`) to manage component states that are separate from attributes, providing better encapsulation and performance.
@@ -138,7 +138,7 @@ my-component:state(btu-expanded) {
           <input type="checkbox" id="toggle-expanded" />
           <span>Expanded State</span>
         </label>
-        <button id="clear-states" class="btu-button btu-button-gray btu-button-md">Clear All States</button>
+        <button id="clear-states" class="btu-button-gray btu-button-md btu-button">Clear All States</button>
       </div>
 
       <style>
@@ -236,7 +236,7 @@ my-component:state(btu-expanded) {
           <input type="checkbox" id="toggle-expanded" />
           <span>Expanded State</span>
         </label>
-        <button id="clear-states" class="btu-button btu-button-gray btu-button-md">Clear All States</button>
+        <button id="clear-states" class="btu-button-gray btu-button-md btu-button">Clear All States</button>
       </div>
 
       <style>

package/dist/storybook/assets/{CopyToClipboard.stories-ti6CpJNp.js → CopyToClipboard.stories-D23guAYu.js}

@@ -1,4 +1,4 @@
-import{g as s,x as i}from"./iframe-DloIUNZz.js";import"./preload-helper-PPVm8Dsz.js";var r=Object.freeze,c=Object.defineProperty,p=(e,l)=>r(c(e,"raw",{value:r(l||e.slice())})),d;const{events:b,args:u,argTypes:a}=s("btu-copy-to-clipboard"),f={title:"Components/Copy to Clipboard",component:"btu-copy-to-clipboard",tags:["autodocs"],parameters:{docs:{subtitle:"btu-copy-to-clipboard",description:{component:`
+import{g as s,x as i}from"./iframe-D5Uwm8Zd.js";import"./preload-helper-PPVm8Dsz.js";var r=Object.freeze,c=Object.defineProperty,p=(e,l)=>r(c(e,"raw",{value:r(l||e.slice())})),d;const{events:b,args:u,argTypes:a}=s("btu-copy-to-clipboard"),f={title:"Components/Copy to Clipboard",component:"btu-copy-to-clipboard",tags:["autodocs"],parameters:{docs:{subtitle:"btu-copy-to-clipboard",description:{component:`
 A button component for copying text to the clipboard. The button becomes disabled and displays a success state for 3 seconds after copying.
 
 <h3>When to use:</h3>
@@ -23,7 +23,7 @@ A button component for copying text to the clipboard. The button becomes disable
 <h3>Behavior Notes:</h3>
 <ul>
   <li>The button is disabled when there is no text to copy (<code>copydata</code> is empty or not set)</li>
-  <li>Success styles are dependent on the <code>btu-clipboard-copied</code> state, which can be styled using the <code>:state()</code> pseudo-class</li>
+  <li>Success styles are dependent on the <code>btu-copy-to-clipboard-copied</code> state, which can be styled using the <code>:state()</code> pseudo-class</li>
 </ul>
         `}},actions:{handles:b},controls:{expanded:!0}},args:{...u,copydata:"https://example.com/cms/content/edit",buttonClasses:""},argTypes:{...a,copydata:{...a.copydata,control:{type:"text"},description:"The text to copy to clipboard"},buttonClasses:{...a.buttonClasses,control:{type:"text"},description:"Custom CSS classes for the button. If provided, replaces the default classes."}},render:e=>i`
       <div style="display: flex; flex-direction: column; gap: 1rem;">
@@ -65,9 +65,9 @@ A button component for copying text to the clipboard. The button becomes disable
             const button = document.getElementById('event-demo-button')
             const log = document.getElementById('event-log')
             if (button && log) {
-              button.addEventListener('btu-clipboard-copied', e => {
+              button.addEventListener('btu-copy-to-clipboard-copied', e => {
                 const timestamp = new Date().toLocaleTimeString()
-                log.textContent = \`Event Log: btu-clipboard-copied fired at \${timestamp}\`
+                log.textContent = \`Event Log: btu-copy-to-clipboard-copied fired at \${timestamp}\`
                 console.log('Event fired:', e)
               })
             }
@@ -98,16 +98,16 @@ A button component for copying text to the clipboard. The button becomes disable
             const button = document.getElementById('event-demo-button')
             const log = document.getElementById('event-log')
             if (button && log) {
-              button.addEventListener('btu-clipboard-copied', e => {
+              button.addEventListener('btu-copy-to-clipboard-copied', e => {
                 const timestamp = new Date().toLocaleTimeString()
-                log.textContent = \\\`Event Log: btu-clipboard-copied fired at \\\${timestamp}\\\`
+                log.textContent = \\\`Event Log: btu-copy-to-clipboard-copied fired at \\\${timestamp}\\\`
                 console.log('Event fired:', e)
               })
             }
           })()
         <\/script>
       </div>
-    `]))),parameters:{docs:{description:{story:"You can listen for the `btu-clipboard-copied` event to perform custom actions when text is copied. This example displays an event log that updates with a timestamp each time the button is clicked."}}}},n={render:()=>i`
+    `]))),parameters:{docs:{description:{story:"You can listen for the `btu-copy-to-clipboard-copied` event to perform custom actions when text is copied. This example displays an event log that updates with a timestamp each time the button is clicked."}}}},n={render:()=>i`
       <div class="flex flex-col gap-6">
         <div class="flex flex-col gap-2">
           <strong>Custom Button Styling:</strong>
@@ -151,16 +151,16 @@ A button component for copying text to the clipboard. The button becomes disable
             style="padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 4px; font-family: monospace; font-size: 0.875rem;"
           ></textarea>
           <style>
-            #icon-only-demo:state(btu-clipboard-copied) button {
+            #icon-only-demo:state(btu-copy-to-clipboard-copied) button {
               background-color: oklch(68.59% 0.167 157);
             }
-            #icon-only-demo:state(btu-clipboard-copied) button::before {
+            #icon-only-demo:state(btu-copy-to-clipboard-copied) button::before {
               content: '\\e168';
             }
           </style>
         </div>
       </div>
-    `,parameters:{docs:{description:{story:"\n**Custom Button Styling:** Use the `buttonClasses` attribute to override default button classes with your own styling.\n\n**Icon-Only Button:** An icon-only button for a minimal style. Uses `buttonClasses` for initial styles, notably `btu-button-text-hidden` to hide the text. The `aria-label` attribute is passed from the host element to the inner button for accessibility. CSS `:state(btu-clipboard-copied)` is used to change styles when copied.\n        "}}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
+    `,parameters:{docs:{description:{story:"\n**Custom Button Styling:** Use the `buttonClasses` attribute to override default button classes with your own styling.\n\n**Icon-Only Button:** An icon-only button for a minimal style. Uses `buttonClasses` for initial styles, notably `btu-button-text-hidden` to hide the text. The `aria-label` attribute is passed from the host element to the inner button for accessibility. CSS `:state(btu-copy-to-clipboard-copied)` is used to change styles when copied.\n        "}}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
   args: {}
 }`,...t.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
   render: () => {
@@ -188,9 +188,9 @@ A button component for copying text to the clipboard. The button becomes disable
             const button = document.getElementById('event-demo-button')
             const log = document.getElementById('event-log')
             if (button && log) {
-              button.addEventListener('btu-clipboard-copied', e => {
+              button.addEventListener('btu-copy-to-clipboard-copied', e => {
                 const timestamp = new Date().toLocaleTimeString()
-                log.textContent = \\\`Event Log: btu-clipboard-copied fired at \\\${timestamp}\\\`
+                log.textContent = \\\`Event Log: btu-copy-to-clipboard-copied fired at \\\${timestamp}\\\`
                 console.log('Event fired:', e)
               })
             }
@@ -202,7 +202,7 @@ A button component for copying text to the clipboard. The button becomes disable
   parameters: {
     docs: {
       description: {
-        story: \`You can listen for the \\\`btu-clipboard-copied\\\` event to perform custom actions when text is copied. This example displays an event log that updates with a timestamp each time the button is clicked.\`
+        story: \`You can listen for the \\\`btu-copy-to-clipboard-copied\\\` event to perform custom actions when text is copied. This example displays an event log that updates with a timestamp each time the button is clicked.\`
       }
     }
   }
@@ -252,10 +252,10 @@ A button component for copying text to the clipboard. The button becomes disable
             style="padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 4px; font-family: monospace; font-size: 0.875rem;"
           ></textarea>
           <style>
-            #icon-only-demo:state(btu-clipboard-copied) button {
+            #icon-only-demo:state(btu-copy-to-clipboard-copied) button {
               background-color: oklch(68.59% 0.167 157);
             }
-            #icon-only-demo:state(btu-clipboard-copied) button::before {
+            #icon-only-demo:state(btu-copy-to-clipboard-copied) button::before {
               content: '\\\\e168';
             }
           </style>
@@ -269,7 +269,7 @@ A button component for copying text to the clipboard. The button becomes disable
         story: \`
 **Custom Button Styling:** Use the \\\`buttonClasses\\\` attribute to override default button classes with your own styling.
 
-**Icon-Only Button:** An icon-only button for a minimal style. Uses \\\`buttonClasses\\\` for initial styles, notably \\\`btu-button-text-hidden\\\` to hide the text. The \\\`aria-label\\\` attribute is passed from the host element to the inner button for accessibility. CSS \\\`:state(btu-clipboard-copied)\\\` is used to change styles when copied.
+**Icon-Only Button:** An icon-only button for a minimal style. Uses \\\`buttonClasses\\\` for initial styles, notably \\\`btu-button-text-hidden\\\` to hide the text. The \\\`aria-label\\\` attribute is passed from the host element to the inner button for accessibility. CSS \\\`:state(btu-copy-to-clipboard-copied)\\\` is used to change styles when copied.
         \`
       }
     }

package/dist/storybook/assets/{Debounce.stories-DzZUSvbk.js → Debounce.stories-Bz3JaQJY.js}

@@ -1,4 +1,4 @@
-import{x as c}from"./iframe-DloIUNZz.js";import"./preload-helper-PPVm8Dsz.js";function p(n,e){if(n<=0)return e;let t;return function(){clearTimeout(t),t=setTimeout(()=>{t=void 0,e.apply(this,[...arguments])},n)}}const g={title:"Utilities/Debounce",tags:["autodocs"],parameters:{docs:{subtitle:"The `debounce` utility delays function execution until a specified wait period has elapsed since the last invocation. Useful for search inputs, form validation, and window resize handlers."},controls:{expanded:!0}},argTypes:{wait:{control:{type:"number",min:0,max:2e3,step:50},description:"Debounce wait time in milliseconds"}},args:{wait:300}},o={render:n=>{const e=`debounce-${Math.random().toString(36).substring(2,9)}`;let t=0,i=0;const d=()=>{const a=document.getElementById(`${e}-normal-count`),r=document.getElementById(`${e}-debounced-count`);a&&(a.textContent=String(t)),r&&(r.textContent=String(i))},l=p(n.wait,()=>{i++,d()}),u=()=>{t++,d(),l()};return c`
+import{x as c}from"./iframe-D5Uwm8Zd.js";import"./preload-helper-PPVm8Dsz.js";function p(n,e){if(n<=0)return e;let t;return function(){clearTimeout(t),t=setTimeout(()=>{t=void 0,e.apply(this,[...arguments])},n)}}const h={title:"Utilities/Debounce",tags:["autodocs"],parameters:{docs:{subtitle:"The `debounce` utility delays function execution until a specified wait period has elapsed since the last invocation. Useful for search inputs, form validation, and window resize handlers."},controls:{expanded:!0}},argTypes:{wait:{control:{type:"number",min:0,max:2e3,step:50},description:"Debounce wait time in milliseconds"}},args:{wait:300}},o={render:n=>{const e=`debounce-${Math.random().toString(36).substring(2,9)}`;let t=0,i=0;const a=()=>{const d=document.getElementById(`${e}-normal-count`),r=document.getElementById(`${e}-debounced-count`);d&&(d.textContent=String(t)),r&&(r.textContent=String(i))},l=p(n.wait,()=>{i++,a()}),u=()=>{t++,a(),l()};return c`
       <div class="space-y-4">
         <div class="text-base">
           <p class="mb-2">
@@ -11,7 +11,7 @@ import{x as c}from"./iframe-DloIUNZz.js";import"./preload-helper-PPVm8Dsz.js";fu
           @input=${u}
           type="text"
           placeholder="Start typing..."
-          class="w-full rounded border-2 border-gray-300 px-4 py-2 focus:border-blue-500 focus:outline-none"
+          class="focus:border-blue-500 w-full rounded border-2 border-gray-300 px-4 py-2 focus:outline-none"
         />
 
         <div class="flex justify-around">
@@ -21,13 +21,13 @@ import{x as c}from"./iframe-DloIUNZz.js";import"./preload-helper-PPVm8Dsz.js";fu
           </div>
           <div>
             <div class="text-xs text-gray-500">Debounced calls (${n.wait}ms)</div>
-            <div id="${e}-debounced-count" class="text-primary-600 text-2xl font-bold">0</div>
+            <div id="${e}-debounced-count" class="text-2xl font-bold text-primary-600">0</div>
           </div>
         </div>
 
         <button
-          @click=${()=>{t=0,i=0,d()}}
-          class="rounded bg-gray-200 px-4 py-2 hover:bg-gray-300"
+          @click=${()=>{t=0,i=0,a()}}
+          class="btu-button-gray btu-button-sm btu-button"
         >
           Reset Counters
         </button>
@@ -109,7 +109,7 @@ input.addEventListener('input', handleSearch)</code></pre>
           @input=\${handleInput}
           type="text"
           placeholder="Start typing..."
-          class="w-full rounded border-2 border-gray-300 px-4 py-2 focus:border-blue-500 focus:outline-none"
+          class="focus:border-blue-500 w-full rounded border-2 border-gray-300 px-4 py-2 focus:outline-none"
         />
 
         <div class="flex justify-around">
@@ -119,7 +119,7 @@ input.addEventListener('input', handleSearch)</code></pre>
           </div>
           <div>
             <div class="text-xs text-gray-500">Debounced calls (\${args.wait}ms)</div>
-            <div id="\${instanceId}-debounced-count" class="text-primary-600 text-2xl font-bold">0</div>
+            <div id="\${instanceId}-debounced-count" class="text-2xl font-bold text-primary-600">0</div>
           </div>
         </div>
 
@@ -129,7 +129,7 @@ input.addEventListener('input', handleSearch)</code></pre>
       debouncedCount = 0;
       updateCounts();
     }}
-          class="rounded bg-gray-200 px-4 py-2 hover:bg-gray-300"
+          class="btu-button-gray btu-button-sm btu-button"
         >
           Reset Counters
         </button>
@@ -196,4 +196,4 @@ input.addEventListener('input', handleSearch)</code></pre>
       }
     }
   }
-}`,...s.parameters?.docs?.source}}};const h=["Interactive","UsageExample"];export{o as Interactive,s as UsageExample,h as __namedExportsOrder,g as default};
+}`,...s.parameters?.docs?.source}}};const g=["Interactive","UsageExample"];export{o as Interactive,s as UsageExample,g as __namedExportsOrder,h as default};