@brightspot/ui 1.0.1-wc.2 → 1.0.1-wc.4

package/dist/storybook/assets/{Loader.stories-D0mnY_Z0.js → Loader.stories-D7Bl-LN9.js}

@@ -1,3 +1,3 @@
-import{x as r}from"./iframe-C5bTYo4K.js";import"./preload-helper-PPVm8Dsz.js";const o=()=>r` <div class=${["before:btu-loader","before:size-[--Loader-size]"].join(" ")}></div> `,d={title:"Components/Loader",component:"btu-loader",tags:["autodocs"],parameters:{docs:{subtitle:`To avoid changing the markup, btu-loaders work by assigning the "--tw-content" property of a pseudo element the SVG data as a URI for it's background image. Loaders come with light & dark styles and are extrinsically sized. If you need to reference the default loader size for your container, you can do so with: var(--Loader-size)`},controls:{expanded:!0}},render:a=>o(),argTypes:{},args:{}},e={args:{}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
+import{x as r}from"./iframe-mIh0R_Av.js";import"./preload-helper-PPVm8Dsz.js";const o=()=>r` <div class=${["before:btu-loader","before:size-[--Loader-size]"].join(" ")}></div> `,d={title:"Components/Loader",component:"btu-loader",tags:["autodocs"],parameters:{docs:{subtitle:`To avoid changing the markup, btu-loaders work by assigning the "--tw-content" property of a pseudo element the SVG data as a URI for it's background image. Loaders come with light & dark styles and are extrinsically sized. If you need to reference the default loader size for your container, you can do so with: var(--Loader-size)`},controls:{expanded:!0}},render:a=>o(),argTypes:{},args:{}},e={args:{}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
   args: {}
 }`,...e.parameters?.docs?.source}}};const n=["Default"];export{e as Default,n as __namedExportsOrder,d as default};

package/dist/storybook/assets/{ScrollShadow.stories-BB4wF3c9.js → ScrollShadow.stories-CWKYDYLk.js}

@@ -1,4 +1,4 @@
-import{x as a}from"./iframe-C5bTYo4K.js";import"./preload-helper-PPVm8Dsz.js";const l=({theme:e="btu-scrollshadow-25"})=>{const r=new Array(100).fill(0).map((s,t)=>`Item ${t+1}`);return a`
+import{x as a}from"./iframe-mIh0R_Av.js";import"./preload-helper-PPVm8Dsz.js";const l=({theme:e="btu-scrollshadow-25"})=>{const r=new Array(100).fill(0).map((s,t)=>`Item ${t+1}`);return a`
     <style>
       :root {
         --can-scroll:   ;

package/dist/storybook/assets/{Widget.stories-yw3AloF5.js → Widget.stories-CcjywoYR.js}

@@ -1,31 +1,8 @@
-import{f as E,u as C,x as g,i as $,g as S}from"./iframe-C5bTYo4K.js";import"./preload-helper-PPVm8Dsz.js";const T=e=>(t,i)=>{i!==void 0?i.addInitializer((()=>{customElements.define(e,t)})):customElements.define(e,t)};const M={attribute:!0,type:String,converter:C,reflect:!1,hasChanged:E},W=(e=M,t,i)=>{const{kind:n,metadata:s}=i;let a=globalThis.litPropertyMetadata.get(s);if(a===void 0&&globalThis.litPropertyMetadata.set(s,a=new Map),n==="setter"&&((e=Object.create(e)).wrapped=!0),a.set(i.name,e),n==="accessor"){const{name:r}=i;return{set(l){const d=t.get.call(this);t.set.call(this,l),this.requestUpdate(r,d,e)},init(l){return l!==void 0&&this.C(r,void 0,e,l),l}}}if(n==="setter"){const{name:r}=i;return function(l){const d=this[r];t.call(this,l),this.requestUpdate(r,d,e)}}throw Error("Unsupported decorator location: "+n)};function p(e){return(t,i)=>typeof i=="object"?W(e,t,i):((n,s,a)=>{const r=s.hasOwnProperty(a);return s.constructor.createProperty(a,n),r?Object.getOwnPropertyDescriptor(s,a):void 0})(e,t,i)}function I(e){return p({...e,state:!0,attribute:!1})}const L=e=>{class t extends e{connectedCallback(){super.connectedCallback(),Promise.resolve().then(()=>this.emit("btu-brightspot-element-connected",{}),n=>this.emit("btu-brightspot-element-error",{error:n}))}disconnectedCallback(){super.disconnectedCallback(),this.emit("btu-brightspot-element-disconnected")}emit(n,s){return this.dispatchEvent(new CustomEvent(n,{bubbles:!0,cancelable:!1,composed:!0,detail:s}))}}return t};function v(e,t){const i=e.closest(".ContentEdit")||e.closest("btu-widget");if(!i)return null;let n,s;if(i.classList.contains("ContentEdit")){if(n=i.getAttribute("data-type-id"),s=e.getAttribute(t),!n||!s)return null}else if(i instanceof HTMLElement&&(n=i.getAttribute("widgetid"),s=i.getAttribute("internalname"),!n||!s))return null;return n&&s?`BSP.ContentEdit.widgetCollapsed.${n}.${s}`:null}function O(e){return function(...t){if(t[0]instanceof KeyboardEvent){const i=t[0];!i.ctrlKey&&!i.shiftKey&&!i.altKey&&!i.metaKey&&e.apply(i.target,t)}}}var k=Object.defineProperty,D=Object.getOwnPropertyDescriptor,c=(e,t,i,n)=>{for(var s=n>1?void 0:n?D(t,i):t,a=e.length-1,r;a>=0;a--)(r=e[a])&&(s=(n?r(t,i,s):r(s))||s);return n&&s&&k(t,i,s),s};const y=window.localStorage,f=window.BRIGHTSPOT?.ui?.tooltips?.collapse||"Collapse",x=window.BRIGHTSPOT?.ui?.tooltips?.expand||"Expand";let o=class extends L($){constructor(){super(...arguments),this._collapsed=!1,this.collapsible=!1,this.invalid=!1}set collapsed(e){this._collapsed=e;const t=v(this,"data-internal-name");t&&(e?y.setItem(t,"1"):y.removeItem(t)),this.requestUpdate(),this.emit("btu-widget-toggle")}get collapsed(){return this._collapsed}connectedCallback(){super.connectedCallback();const e=v(this,"data-internal-name");this.collapsed=!!(e&&y.getItem(e))}createRenderRoot(){return this}firstUpdated(){this.emit("btu-widget-ready"),this.invalid=this.querySelector(".Message.is-error")!=null,(!this.collapsible||this.invalid)&&(this.collapsed=!1);const e=this.querySelector(".Widget-title"),t=this.firstChild;t instanceof Element&&!t.classList.contains("Widget-title")&&e&&this.insertBefore(e,t),this.querySelectorAll(":scope > :not(.Widget-title, script, select)").forEach(i=>{i.toggleAttribute("hidden",this.collapsed&&!this.invalid)})}_collapsibleTemplate(){return g`<h2
-      class="Widget-title ${this.invalid?"text-error-600":""} btu-heading-5 sticky top-0 z-10 cursor-pointer overflow-x-clip text-ellipsis whitespace-nowrap border-b border-b-gray-200 bg-white px-[--space] py-3.5 text-gray-900 [grid-column:fullbleed-start_/_fullbleed-end] hover:bg-gray-100 focus:ring-0"
-      @click="${()=>this.collapsed=!this.collapsed}"
-    >
-      <div
-        class="Widget-expand ${this.invalid?"after:btu-icon after:btu-icon-circle-alert after:text-error-600":""} relative inline-flex w-full items-center gap-2 focus:ring-0"
-        role="button"
-        tabindex="0"
-        aria-expanded=${!this.collapsed}
-        title=${this.collapsed?x:f}
-        @keydown=${O(e=>{e instanceof KeyboardEvent&&(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this.collapsed=!this.collapsed)})}
-      >
-        ${this.heading}
-        <ul
-          class="Widget-controls sticky top-0 z-[11] order-2 ms-auto flex items-center gap-2 border-b-0 border-b-gray-200 bg-inherit empty:hidden"
-          aria-hidden="true"
-        >
-          <li
-            class="Widget-collapse btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-sm before:btu-icon before:btu-icon-chevron-up ${this.collapsed?"before:rotate-180":""} before:transition-transform"
-            title="${this.collapsed?x:f}"
-          ></li>
-        </ul>
-      </div>
-    </h2>`}render(){return this.classList.add("widget","Widget","relative","grid","bg-white"),this.classList.toggle("is-collapsible",this.collapsible),this.classList.toggle("is-collapsed",this.collapsed),this.collapsed&&this.classList.add("overflow-clip","border-b-0","pb-0"),this.classList.toggle("is-error",this.invalid),this.querySelectorAll(":scope > :not(.Widget-title, script, select)").forEach(e=>{e.toggleAttribute("hidden",this.collapsed)}),this.collapsible?(this.classList.add("h-[min-content]"),this._collapsibleTemplate()):g`<h2 class="Widget-title ${this.invalid?"text-error-600":""}">${this.heading}</h2>`}};c([p({type:Boolean})],o.prototype,"collapsible",2);c([p({type:String})],o.prototype,"heading",2);c([p({type:String})],o.prototype,"internalname",2);c([I()],o.prototype,"invalid",2);c([p({type:String})],o.prototype,"widgetid",2);c([p({type:Boolean})],o.prototype,"collapsed",1);o=c([T("btu-widget")],o);const{events:P,args:_,argTypes:B,template:q}=S("btu-widget"),N={title:"Components/Widget",component:"btu-widget",tags:["autodocs"],parameters:{actions:{handles:P}},args:{..._,heading:"Widget Title",internalname:"example",widgetid:"demo"},argTypes:B,render:e=>q(e,g`
+import{g as u,x as o}from"./iframe-mIh0R_Av.js";import"./preload-helper-PPVm8Dsz.js";const{events:w,args:h,argTypes:v,template:y}=u("btu-widget"),E={title:"Components/Widget",component:"btu-widget",tags:["autodocs"],parameters:{actions:{handles:w}},args:{...h,heading:"Widget Title",internalname:"example",widgetid:"demo"},argTypes:v,render:e=>y(e,o`
         <div class="p-6">
           <p class="text-gray-700">This is the widget content. It can contain any HTML elements.</p>
         </div>
-      `)},u={args:{},parameters:{docs:{description:{story:"Basic widget with a title. Non-collapsible by default, displays content statically."}}}},b={args:{collapsible:!0,heading:"Collapsible Widget"},parameters:{docs:{description:{story:"Collapsible widget with expand/collapse button. Click the title or press Enter/Space on the expand button to toggle. State persists in localStorage."}}}},m={args:{collapsible:!0,heading:"Widget with Error",internalname:"errorWidget",widgetid:"error-001"},render:e=>g`
+      `)},s={args:{},parameters:{docs:{description:{story:"Basic widget with a title. Non-collapsible by default, displays content statically."}}}},a={args:{collapsible:!0,heading:"Collapsible Widget"},parameters:{docs:{description:{story:"Collapsible widget with expand/collapse button. Click the title or press Enter/Space on the expand button to toggle. State persists in localStorage."}}}},r={args:{collapsible:!0,heading:"Widget with Error",internalname:"errorWidget",widgetid:"error-001"},render:e=>o`
     <btu-widget
       ?collapsible=${e.collapsible}
       .heading=${e.heading}
@@ -45,7 +22,7 @@ import{f as E,u as C,x as g,i as $,g as S}from"./iframe-C5bTYo4K.js";import"./pr
         </div>
       </div>
     </btu-widget>
-  `,parameters:{docs:{description:{story:"Widget automatically expands when it contains error messages (elements with `.Message.is-error` class). The title text turns red and displays an error icon."}}}},h={args:{collapsible:!0,heading:"Publishing Tools"},render:()=>g`
+  `,parameters:{docs:{description:{story:"Widget automatically expands when it contains error messages (elements with `.Message.is-error` class). The title text turns red and displays an error icon."}}}},d={args:{collapsible:!0,heading:"Publishing Tools"},render:()=>o`
     <div class="space-y-4">
       <btu-widget collapsible heading="Metadata" internalname="metadata" widgetid="pub-001">
         <div class="p-6">
@@ -71,20 +48,20 @@ import{f as E,u as C,x as g,i as $,g as S}from"./iframe-C5bTYo4K.js";import"./pr
         </div>
       </btu-widget>
     </div>
-  `,parameters:{docs:{description:{story:"Multiple collapsible widgets stacked vertically, simulating a right rail or sidebar layout. Each widget maintains independent collapse state."}}}},w={args:{collapsible:!0,heading:"Widget with Event Monitoring",internalname:"eventDemo",widgetid:"events-001"},render:e=>{const t=`widget-${Math.random().toString(36).substr(2,9)}`,i=`log-${t}`,n=(s,a)=>{const r=document.getElementById(i);if(!r)return;const l=new Date().toLocaleTimeString(),d=document.createElement("div");for(d.className="border-l-4 border-primary-500 bg-primary-50 px-4 py-2 mb-2",d.innerHTML=`
+  `,parameters:{docs:{description:{story:"Multiple collapsible widgets stacked vertically, simulating a right rail or sidebar layout. Each widget maintains independent collapse state."}}}},l={args:{collapsible:!0,heading:"Widget with Event Monitoring",internalname:"eventDemo",widgetid:"events-001"},render:e=>{const g=`widget-${Math.random().toString(36).substr(2,9)}`,p=`log-${g}`,m=(n,i)=>{const t=document.getElementById(p);if(!t)return;const b=new Date().toLocaleTimeString(),c=document.createElement("div");for(c.className="border-l-4 border-primary-500 bg-primary-50 px-4 py-2 mb-2",c.innerHTML=`
         <div class="flex items-center justify-between">
-          <span class="font-semibold text-primary-900">${s}</span>
-          <span class="text-xs text-primary-700">${l}</span>
+          <span class="font-semibold text-primary-900">${n}</span>
+          <span class="text-xs text-primary-700">${b}</span>
         </div>
-        ${a?`<pre class="text-xs text-primary-800 mt-1">${JSON.stringify(a,null,2)}</pre>`:""}
-      `,r.insertBefore(d,r.firstChild);r.children.length>10;)r.removeChild(r.lastChild)};return setTimeout(()=>{const s=document.getElementById(t);s&&(s.addEventListener("btu-widget-ready",(a=>{n("btu-widget-ready",{timestamp:new Date().toISOString()})})),s.addEventListener("btu-widget-toggle",(a=>{const r=a.target;n("btu-widget-toggle",{collapsed:r.collapsed,timestamp:new Date().toISOString()})})))},0),g`
+        ${i?`<pre class="text-xs text-primary-800 mt-1">${JSON.stringify(i,null,2)}</pre>`:""}
+      `,t.insertBefore(c,t.firstChild);t.children.length>10;)t.removeChild(t.lastChild)};return setTimeout(()=>{const n=document.getElementById(g);n&&(n.addEventListener("btu-widget-ready",(i=>{m("btu-widget-ready",{timestamp:new Date().toISOString()})})),n.addEventListener("btu-widget-toggle",(i=>{const t=i.target;m("btu-widget-toggle",{collapsed:t.collapsed,timestamp:new Date().toISOString()})})))},0),o`
       <div class="space-y-4">
         <div class="rounded-lg border border-gray-200 bg-gray-50 p-4">
           <h3 class="mb-2 text-sm font-semibold text-gray-900">Event Log</h3>
           <p class="mb-3 text-xs text-gray-600">
             Events emitted by the widget will appear here in real-time. Try collapsing/expanding the widget below.
           </p>
-          <div id="${i}" class="max-h-96 space-y-2 overflow-y-auto"></div>
+          <div id="${p}" class="max-h-96 space-y-2 overflow-y-auto"></div>
           <div class="mt-3 text-xs text-gray-500">
             <strong>Events:</strong>
             <ul class="ml-2 mt-1 list-inside list-disc">
@@ -95,7 +72,7 @@ import{f as E,u as C,x as g,i as $,g as S}from"./iframe-C5bTYo4K.js";import"./pr
         </div>
 
         <btu-widget
-          id="${t}"
+          id="${g}"
           ?collapsible=${e.collapsible}
           .heading=${e.heading}
           .internalname=${e.internalname}
@@ -123,7 +100,7 @@ Widget event emission demonstration. The widget emits two custom events:
 - **btu-widget-toggle**: Fired whenever the collapse state changes (only for collapsible widgets)
 
 All events bubble up through the DOM and can be listened to on the widget element or any parent element.
-        `}}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
+        `}}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
   args: {},
   parameters: {
     docs: {
@@ -132,7 +109,7 @@ All events bubble up through the DOM and can be listened to on the widget elemen
       }
     }
   }
-}`,...u.parameters?.docs?.source}}};b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
+}`,...s.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
   args: {
     collapsible: true,
     heading: 'Collapsible Widget'
@@ -144,7 +121,7 @@ All events bubble up through the DOM and can be listened to on the widget elemen
       }
     }
   }
-}`,...b.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+}`,...a.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
   args: {
     collapsible: true,
     heading: 'Widget with Error',
@@ -179,7 +156,7 @@ All events bubble up through the DOM and can be listened to on the widget elemen
       }
     }
   }
-}`,...m.parameters?.docs?.source}}};h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
+}`,...r.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
   args: {
     collapsible: true,
     heading: 'Publishing Tools'
@@ -218,7 +195,7 @@ All events bubble up through the DOM and can be listened to on the widget elemen
       }
     }
   }
-}`,...h.parameters?.docs?.source}}};w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:`{
+}`,...d.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
   args: {
     collapsible: true,
     heading: 'Widget with Event Monitoring',
@@ -320,4 +297,4 @@ All events bubble up through the DOM and can be listened to on the widget elemen
       }
     }
   }
-}`,...w.parameters?.docs?.source}}};const K=["Default","Collapsible","WithErrorMessage","MultipleWidgets","EventEmission"];export{b as Collapsible,u as Default,w as EventEmission,h as MultipleWidgets,m as WithErrorMessage,K as __namedExportsOrder,N as default};
+}`,...l.parameters?.docs?.source}}};const C=["Default","Collapsible","WithErrorMessage","MultipleWidgets","EventEmission"];export{a as Collapsible,s as Default,l as EventEmission,d as MultipleWidgets,r as WithErrorMessage,C as __namedExportsOrder,E as default};