@brightspot/ui 1.0.1-pr18.0 → 1.0.1-pr18.2

package/dist/storybook/assets/Events.stories-fiOqLEev.js

@@ -0,0 +1,108 @@
+import{x as d}from"./iframe-BSmF2RM6.js";import"./preload-helper-PPVm8Dsz.js";var n=Object.freeze,r=Object.defineProperty,s=(t,i)=>n(r(t,"raw",{value:n(t.slice())})),o;const l={title:"Components/Events",tags:["autodocs"],parameters:{docs:{subtitle:"Events inherited from EventEmitterMixin",description:{component:`
+<h3>EventEmitterMixin Events</h3>
+
+<p>All Brightspot UI components that extend EventEmitterMixin emit the following lifecycle events in addition to those inherited from LitElement. These events use CustomEvent and bubble through the DOM with <code>composed: true</code>, meaning they cross shadow DOM boundaries.</p>
+
+<h4>Standard Lifecycle Events</h4>
+
+<table>
+  <thead>
+    <tr>
+      <th>Event Name</th>
+      <th>Type</th>
+      <th>Description</th>
+      <th>Detail</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>btu-element-connected</code></td>
+      <td>CustomEvent</td>
+      <td>Fired when element connects to DOM</td>
+      <td><code>{}</code></td>
+    </tr>
+    <tr>
+      <td><code>btu-element-disconnected</code></td>
+      <td>CustomEvent</td>
+      <td>Fired when element disconnects from DOM</td>
+      <td><code>undefined</code></td>
+    </tr>
+    <tr>
+      <td><code>btu-element-error</code></td>
+      <td>CustomEvent&lt;{error: Error}&gt;</td>
+      <td>Fired on connection error</td>
+      <td><code>{ error: Error }</code></td>
+    </tr>
+  </tbody>
+</table>
+
+<h3>Event Configuration</h3>
+
+<p>All events are dispatched with the following configuration:</p>
+<ul>
+  <li><strong>bubbles:</strong> <code>true</code> - Event propagates up the DOM tree</li>
+  <li><strong>cancelable:</strong> <code>false</code> - Event cannot be cancelled</li>
+  <li><strong>composed:</strong> <code>true</code> - Event crosses shadow DOM boundaries</li>
+</ul>
+        `}}}},e={render:()=>d(o||(o=s([`<div class="flex flex-col gap-4">
+      <div>
+        <h4 class="mb-2 font-bold">Example Component with Events</h4>
+        <btu-badge variant="info" size="md" id="event-demo">Event Demo</btu-badge>
+      </div>
+      <div>
+        <p class="text-sm text-gray-600">
+          Check your browser console to see events fired when this badge connects to the DOM.
+        </p>
+      </div>
+      <script>
+        ;(() => {
+          const badge = document.getElementById('event-demo')
+          if (badge) {
+            badge.addEventListener('btu-element-connected', e => {
+              console.log('✅ btu-element-connected', e.detail)
+            })
+            badge.addEventListener('btu-element-disconnected', () => {
+              console.log('🔌 btu-element-disconnected')
+            })
+            badge.addEventListener('btu-element-error', e => {
+              console.error('❌ btu-element-error', e.detail.error)
+            })
+          }
+        })()
+      <\/script>
+    </div>`]))),parameters:{docs:{description:{story:"This example demonstrates the EventEmitterMixin events. Open your browser console to see the connection event fired when the badge element connects to the DOM."}}}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
+  render: () => html\`<div class="flex flex-col gap-4">
+      <div>
+        <h4 class="mb-2 font-bold">Example Component with Events</h4>
+        <btu-badge variant="info" size="md" id="event-demo">Event Demo</btu-badge>
+      </div>
+      <div>
+        <p class="text-sm text-gray-600">
+          Check your browser console to see events fired when this badge connects to the DOM.
+        </p>
+      </div>
+      <script>
+        ;(() => {
+          const badge = document.getElementById('event-demo')
+          if (badge) {
+            badge.addEventListener('btu-element-connected', e => {
+              console.log('✅ btu-element-connected', e.detail)
+            })
+            badge.addEventListener('btu-element-disconnected', () => {
+              console.log('🔌 btu-element-disconnected')
+            })
+            badge.addEventListener('btu-element-error', e => {
+              console.error('❌ btu-element-error', e.detail.error)
+            })
+          }
+        })()
+      <\/script>
+    </div>\`,
+  parameters: {
+    docs: {
+      description: {
+        story: \`This example demonstrates the EventEmitterMixin events. Open your browser console to see the connection event fired when the badge element connects to the DOM.\`
+      }
+    }
+  }
+}`,...e.parameters?.docs?.source}}};const m=["EventEmitterMixin"];export{e as EventEmitterMixin,m as __namedExportsOrder,l as default};

package/dist/storybook/assets/{Heading.stories-CuxV5Ha4.js → Heading.stories-BJvBkb_o.js}

@@ -1,3 +1,3 @@
-import{x as s}from"./iframe-zcxd989B.js";import"./preload-helper-PPVm8Dsz.js";const a=({size:t})=>s` <div class=${[`btu-heading-${t}`].join(" ")}>Heading</div> `,n={title:"Components/Heading",component:"btu-heading",tags:["autodocs"],parameters:{docs:{subtitle:"btu-heading"},controls:{expanded:!0}},render:t=>a(t),argTypes:{size:{control:{type:"range",min:1,max:5,step:1},description:"Heading size from 1 to 5, where 1 is the largest and 5 is the smallest."}},args:{size:1}},e={args:{}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
+import{x as s}from"./iframe-BSmF2RM6.js";import"./preload-helper-PPVm8Dsz.js";const a=({size:t})=>s` <div class=${[`btu-heading-${t}`].join(" ")}>Heading</div> `,n={title:"Components/Heading",component:"btu-heading",tags:["autodocs"],parameters:{docs:{subtitle:"btu-heading"},controls:{expanded:!0}},render:t=>a(t),argTypes:{size:{control:{type:"range",min:1,max:5,step:1},description:"Heading size from 1 to 5, where 1 is the largest and 5 is the smallest."}},args:{size:1}},e={args:{}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
   args: {}
 }`,...e.parameters?.docs?.source}}};const i=["Default"];export{e as Default,i as __namedExportsOrder,n as default};