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

package/dist/storybook/assets/Loader.stories-D0mnY_Z0.js

@@ -0,0 +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:`{
+  args: {}
+}`,...e.parameters?.docs?.source}}};const n=["Default"];export{e as Default,n as __namedExportsOrder,d as default};

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

@@ -1,4 +1,4 @@
-import{x as a}from"./iframe-KLSeZXhG.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-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`
     <style>
       :root {
         --can-scroll:   ;

package/dist/storybook/assets/Widget-CRTwFkFc.css

@@ -0,0 +1 @@
+.Widget{--Widget-padding: var(--gap-l);--space: 1.5rem;grid-template-columns:[fullbleed-start] var(--space) [content-start] 1fr auto [content-end] var(--space) [fullbleed-end]}.Widget>*:not(.ContentEdit-preview){grid-column:content-start / content-end}.Widget-title .Label{display:inline-flex}.Widget-controls.is-locked{display:none!important}.Widget:not(.is-collapsible):has(.Widget-controls:not(:empty))>.Widget-title{padding-inline-end:.5rem;grid-column:fullbleed-start / span 2}.Widget:not(.is-collapsible) .Widget-controls{padding-inline-end:var(--space);grid-column:span 2 / fullbleed-end;grid-row:1}.Admin-main .Widget:not(.is-collapsible) .Widget-controls:has(>button:not(.FormFilter-icon)){margin-top:-3.35rem;background-color:var(--btu-theme-white)}.Widget-actionsToggle{--button-bg-gradient: none;--button-color: ;--button-text-color: ;--button-pressed: initial;--button-fill-none: initial;--button-padding-xs: .25rem .5rem;--button-padding-sm: .5rem .875rem;--button-padding-md: .625rem 1rem;--button-padding-lg: .625rem 1.125rem;--button-padding-xl: .75rem 1.25rem;--button-padding-2xl: 1rem 1.75rem;--button-font-size: .875rem;--button-line-height: 1.25rem;display:inline-flex;cursor:pointer;align-items:center;justify-content:center;gap:.5rem;background:var(--button-bg-gradient),var(--button-pressed-color, var(--button-disabled-color, var(--button-color)));border-radius:var(--button-border-radius, .5rem);color:var(--button-pressed-text-color, var(--button-disabled-text-color, var(--button-text-color)));padding:var(--button-padding-sm);font-size:var(--button-font-size);line-height:var(--button-line-height);font-weight:600;position:relative;height:var(--button-size-sm, auto);width:var(--button-size-sm, auto)}.Widget-actionsToggle[aria-pressed=true]{--button-pressed: }.Widget-actionsToggle:disabled{--button-bg-gradient: none;--button-disabled-color: var(--button-disabled-color-fill-none, var(--button-disabled-color-fill, oklch(var(--btu-theme-gray-100))));--button-disabled-text-color: var(--button-disabled-text-color-fill-none, var(--button-text-color, oklch(var(--btu-theme-gray-400))));pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.Widget-actionsToggle[disabled]{--button-bg-gradient: none;--button-disabled-color: var(--button-disabled-color-fill-none, var(--button-disabled-color-fill, oklch(var(--btu-theme-gray-100))));--button-disabled-text-color: var(--button-disabled-text-color-fill-none, var(--button-text-color, oklch(var(--btu-theme-gray-400))));pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.Widget-actionsToggle{text-decoration:none}.Widget-actionsToggle:focus{color:var(--button-pressed-text-color, var(--button-disabled-text-color, var(--button-text-color)))}.Widget-actionsToggle:hover{color:var(--button-pressed-text-color, var(--button-disabled-text-color, var(--button-text-color)))}.Widget-actionsToggle{--button-padding-xs: .25rem;--button-padding-sm: .5rem;--button-padding-md: .625rem;--button-padding-lg: .75rem;--button-padding-xl: .875rem;--button-padding-2xl: 1rem;--button-icon-font-size: 0px;--button-icon-line-height: 1;--button-font-size: var(--button-icon-font-size);--button-line-height: var(--button-icon-line-height);--button-size-xs: 1.75rem;--button-size-sm: 2.25rem;--button-size-md: 2.5rem;--button-size-lg: 2.75rem;--button-size-xl: 3rem;--button-size-2xl: 3.5rem;overflow:hidden;gap:0;--button-fill-none: ;background-color:var(--button-pressed-color, var(--button-fill-none-color));color:var(--button-pressed-text-color, var(--button-disabled-text-color, var(--button-fill-none-text-color)))}.Widget-actionsToggle:focus{color:var(--button-pressed-text-color, var(--button-disabled-text-color, var(--button-fill-none-text-color)))}.Widget-actionsToggle:hover{color:var(--button-pressed-text-color, var(--button-disabled-text-color, var(--button-fill-none-text-color)))}.Widget-actionsToggle{--button-bg-gradient: var(--button-fill-none, none);--button-color: oklch(var(--btu-theme-gray-100));--button-text-color: oklch(var(--btu-theme-gray-700));--button-fill-none-color: transparent;--button-fill-none-text-color: oklch(var(--btu-theme-gray-700));--button-outline-color: oklch(var(--btu-theme-gray-300));--button-disabled-color-fill: oklch(var(--btu-theme-gray-100));--button-disabled-color-fill-none: var(--button-fill-none) oklch(var(--btu-theme-white));--button-disabled-text-color-fill-none: var(--button-fill-none) oklch(var(--btu-theme-gray-400));--button-pressed-color: var(--button-pressed) var(--button-disabled-color, oklch(var(--btu-theme-primary-50)));--button-pressed-text-color: var(--button-pressed) var(--button-disabled-text-color, oklch(var(--btu-theme-primary-800)))}.Widget-actionsToggle:hover{--button-color: oklch(var(--btu-theme-gray-200));--button-fill-none-color: oklch(var(--btu-theme-gray-200));--button-fill-none-text-color: oklch(var(--btu-theme-gray-900))}.Widget-actionsToggle:focus{--button-color: oklch(var(--btu-theme-gray-100));--button-fill-none-color: transparent;--button-fill-none-text-color: oklch(var(--btu-theme-gray-700));--tw-ring-opacity: 1;--tw-ring-color: oklch(var(--btu-theme-primary-100));--tw-ring-offset-width: 1px;--tw-ring-offset-color: oklch(var(--btu-theme-primary-800))}.Widget-actionsToggle.is-focused{--button-color: oklch(var(--btu-theme-gray-100));--button-fill-none-color: transparent;--button-fill-none-text-color: oklch(var(--btu-theme-gray-700));--tw-ring-opacity: 1;--tw-ring-color: oklch(var(--btu-theme-primary-100));--tw-ring-offset-width: 1px;--tw-ring-offset-color: oklch(var(--btu-theme-primary-800))}.Widget-actionsToggle{font-size:var(--button-icon-font-size, .875rem);line-height:var(--button-icon-line-height, 1.25rem);padding:var(--button-padding-sm);width:var(--button-size-sm, auto);height:var(--button-size-sm, auto)}.Widget-actionsToggle:before{font-family:lucide;direction:ltr;display:inline-flex;font-feature-settings:"liga" 0;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:var(--Icon-size);font-style:normal;font-weight:400;letter-spacing:normal;line-height:var(--Icon-size);text-transform:none;white-space:nowrap;word-wrap:normal;vertical-align:top;--tw-content: "";content:var(--tw-content);--Icon-size: 1.25rem}.Widget-actionsList{z-index:10000}.Widget-actions.is-open .Widget-actionsToggle{--button-pressed: }.Widget :is(.widget-urls.is-readOnly,.widget-urlsRepeatable.is-readOnly,.ContentEditSites-owner.is-readOnly,.ContentEditSites-access.is-readOnly){pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:.75}.Widget .is-readOnly .UrlsWidget-itemLabel a,.widget .is-readOnly .RCIG-title:after,.widget .is-readOnly .ContentSummary-info,.widget .is-readOnly .ContentSelector-edit{pointer-events:auto;cursor:pointer}.Widget.is-collapsible .Widget-title:has(.Widget-expand:focus-visible){--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-inset: inset;--tw-ring-opacity: 1;--tw-ring-color: oklch(var(--btu-theme-primary-600) / var(--tw-ring-opacity, 1));--tw-ring-offset-width: 4px;--tw-ring-offset-color: oklch(var(--btu-theme-primary-100) / 1)}.Widget-heading{padding-top:.5rem;padding-bottom:.5rem;font-size:.875rem;line-height:1.25rem;font-weight:600;--tw-text-opacity: 1;color:oklch(var(--btu-theme-gray-900) / var(--tw-text-opacity, 1))}.Widget-restoreButton{--button-bg-gradient: none;--button-color: ;--button-text-color: ;--button-pressed: initial;--button-fill-none: initial;--button-padding-xs: .25rem .5rem;--button-padding-sm: .5rem .875rem;--button-padding-md: .625rem 1rem;--button-padding-lg: .625rem 1.125rem;--button-padding-xl: .75rem 1.25rem;--button-padding-2xl: 1rem 1.75rem;--button-font-size: .875rem;--button-line-height: 1.25rem;display:inline-flex;cursor:pointer;align-items:center;justify-content:center;gap:.5rem;background:var(--button-bg-gradient),var(--button-pressed-color, var(--button-disabled-color, var(--button-color)));border-radius:var(--button-border-radius, .5rem);color:var(--button-pressed-text-color, var(--button-disabled-text-color, var(--button-text-color)));padding:var(--button-padding-sm);font-size:var(--button-font-size);line-height:var(--button-line-height);font-weight:600;position:relative;height:var(--button-size-sm, auto);width:var(--button-size-sm, auto)}.Widget-restoreButton[aria-pressed=true]{--button-pressed: }.Widget-restoreButton:disabled{--button-bg-gradient: none;--button-disabled-color: var(--button-disabled-color-fill-none, var(--button-disabled-color-fill, oklch(var(--btu-theme-gray-100))));--button-disabled-text-color: var(--button-disabled-text-color-fill-none, var(--button-text-color, oklch(var(--btu-theme-gray-400))));pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.Widget-restoreButton[disabled]{--button-bg-gradient: none;--button-disabled-color: var(--button-disabled-color-fill-none, var(--button-disabled-color-fill, oklch(var(--btu-theme-gray-100))));--button-disabled-text-color: var(--button-disabled-text-color-fill-none, var(--button-text-color, oklch(var(--btu-theme-gray-400))));pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.Widget-restoreButton{text-decoration:none}.Widget-restoreButton:focus{color:var(--button-pressed-text-color, var(--button-disabled-text-color, var(--button-text-color)))}.Widget-restoreButton:hover{color:var(--button-pressed-text-color, var(--button-disabled-text-color, var(--button-text-color)))}.Widget-restoreButton{--button-padding-xs: .25rem;--button-padding-sm: .5rem;--button-padding-md: .625rem;--button-padding-lg: .75rem;--button-padding-xl: .875rem;--button-padding-2xl: 1rem;--button-icon-font-size: 0px;--button-icon-line-height: 1;--button-font-size: var(--button-icon-font-size);--button-line-height: var(--button-icon-line-height);--button-size-xs: 1.75rem;--button-size-sm: 2.25rem;--button-size-md: 2.5rem;--button-size-lg: 2.75rem;--button-size-xl: 3rem;--button-size-2xl: 3.5rem;overflow:hidden;gap:0;--button-bg-gradient: var(--button-fill-none, none);--button-color: oklch(var(--btu-theme-gray-100));--button-text-color: oklch(var(--btu-theme-gray-700));--button-fill-none-color: transparent;--button-fill-none-text-color: oklch(var(--btu-theme-gray-700));--button-outline-color: oklch(var(--btu-theme-gray-300));--button-disabled-color-fill: oklch(var(--btu-theme-gray-100));--button-disabled-color-fill-none: var(--button-fill-none) oklch(var(--btu-theme-white));--button-disabled-text-color-fill-none: var(--button-fill-none) oklch(var(--btu-theme-gray-400));--button-pressed-color: var(--button-pressed) var(--button-disabled-color, oklch(var(--btu-theme-primary-50)));--button-pressed-text-color: var(--button-pressed) var(--button-disabled-text-color, oklch(var(--btu-theme-primary-800)))}.Widget-restoreButton:hover{--button-color: oklch(var(--btu-theme-gray-200));--button-fill-none-color: oklch(var(--btu-theme-gray-200));--button-fill-none-text-color: oklch(var(--btu-theme-gray-900))}.Widget-restoreButton:focus{--button-color: oklch(var(--btu-theme-gray-100));--button-fill-none-color: transparent;--button-fill-none-text-color: oklch(var(--btu-theme-gray-700));--tw-ring-opacity: 1;--tw-ring-color: oklch(var(--btu-theme-primary-100));--tw-ring-offset-width: 1px;--tw-ring-offset-color: oklch(var(--btu-theme-primary-800))}.Widget-restoreButton.is-focused{--button-color: oklch(var(--btu-theme-gray-100));--button-fill-none-color: transparent;--button-fill-none-text-color: oklch(var(--btu-theme-gray-700));--tw-ring-opacity: 1;--tw-ring-color: oklch(var(--btu-theme-primary-100));--tw-ring-offset-width: 1px;--tw-ring-offset-color: oklch(var(--btu-theme-primary-800))}.Widget-restoreButton:before{font-family:lucide;direction:ltr;display:inline-flex;font-feature-settings:"liga" 0;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:var(--Icon-size);font-style:normal;font-weight:400;letter-spacing:normal;line-height:var(--Icon-size);text-transform:none;white-space:nowrap;word-wrap:normal;vertical-align:top;--tw-content: "";content:var(--tw-content);--Icon-size: 1.25rem}.Widget-filters,.Widget-filter{display:flex;align-items:center;justify-content:space-between}.Widget-filters{position:relative;padding-top:.75rem}.Widget-filters:before{position:absolute;inset:-.75rem -1rem;border-bottom-width:1px;--tw-border-opacity: 1;border-bottom-color:oklch(var(--btu-theme-gray-200) / var(--tw-border-opacity, 1));content:var(--tw-content);--tw-bg-opacity: 1;background-color:oklch(var(--btu-theme-gray-50) / var(--tw-bg-opacity, 1))}.Widget-filter{z-index:0;flex-direction:row-reverse}.Widget-filterLabel{font-size:.875rem;line-height:1.25rem;font-weight:500}.Widget.is-collapsed>div,.Widget.is-collapsed>table{display:none}

package/dist/storybook/assets/Widget.stories-yw3AloF5.js

@@ -0,0 +1,323 @@
+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`
+        <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`
+    <btu-widget
+      ?collapsible=${e.collapsible}
+      .heading=${e.heading}
+      .internalname=${e.internalname}
+      .widgetid=${e.widgetid}
+    >
+      <div class="space-y-4 p-6">
+        <div class="Message is-error bg-error-50 border-error-200 rounded border p-4">
+          <p class="text-error-700 font-medium">Error: This field is required</p>
+        </div>
+        <div>
+          <label class="mb-1 block text-sm font-medium text-gray-700">Required Field</label>
+          <input
+            type="text"
+            class="border-error-600 focus:ring-error focus:border-error w-full rounded border px-3 py-2 focus:ring-2"
+          />
+        </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`
+    <div class="space-y-4">
+      <btu-widget collapsible heading="Metadata" internalname="metadata" widgetid="pub-001">
+        <div class="p-6">
+          <p class="text-gray-700">Edit page metadata and SEO settings.</p>
+        </div>
+      </btu-widget>
+
+      <btu-widget collapsible heading="Tags & Categories" internalname="tags" widgetid="pub-002">
+        <div class="p-6">
+          <p class="text-gray-700">Manage content tags and categories.</p>
+        </div>
+      </btu-widget>
+
+      <btu-widget collapsible heading="Scheduling" internalname="scheduling" widgetid="pub-003">
+        <div class="p-6">
+          <p class="text-gray-700">Set publish date and expiration settings.</p>
+        </div>
+      </btu-widget>
+
+      <btu-widget collapsible heading="Permissions" internalname="permissions" widgetid="pub-004">
+        <div class="p-6">
+          <p class="text-gray-700">Configure access control and permissions.</p>
+        </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=`
+        <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>
+        </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`
+      <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 class="mt-3 text-xs text-gray-500">
+            <strong>Events:</strong>
+            <ul class="ml-2 mt-1 list-inside list-disc">
+              <li><code>btu-widget-ready</code> - Fired after widget first render</li>
+              <li><code>btu-widget-toggle</code> - Fired when collapse state changes</li>
+            </ul>
+          </div>
+        </div>
+
+        <btu-widget
+          id="${t}"
+          ?collapsible=${e.collapsible}
+          .heading=${e.heading}
+          .internalname=${e.internalname}
+          .widgetid=${e.widgetid}
+        >
+          <div class="p-6">
+            <p class="mb-4 text-gray-700">
+              This widget demonstrates event emission. Open the browser console to see all events, or watch the event
+              log above.
+            </p>
+            <div class="rounded border border-blue-200 bg-blue-50 p-3">
+              <p class="text-sm text-blue-900">
+                <strong>Try this:</strong> Click the collapse/expand button multiple times and watch the
+                <code class="rounded bg-blue-100 px-1">btu-widget-toggle</code>
+                events appear in the log above.
+              </p>
+            </div>
+          </div>
+        </btu-widget>
+      </div>
+    `},parameters:{docs:{description:{story:`
+Widget event emission demonstration. The widget emits two custom events:
+
+- **btu-widget-ready**: Fired once after the widget's first render and initialization
+- **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:`{
+  args: {},
+  parameters: {
+    docs: {
+      description: {
+        story: 'Basic widget with a title. Non-collapsible by default, displays content statically.'
+      }
+    }
+  }
+}`,...u.parameters?.docs?.source}}};b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
+  args: {
+    collapsible: true,
+    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.'
+      }
+    }
+  }
+}`,...b.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+  args: {
+    collapsible: true,
+    heading: 'Widget with Error',
+    internalname: 'errorWidget',
+    widgetid: 'error-001'
+  },
+  render: args => html\`
+    <btu-widget
+      ?collapsible=\${args.collapsible}
+      .heading=\${args.heading}
+      .internalname=\${args.internalname}
+      .widgetid=\${args.widgetid}
+    >
+      <div class="space-y-4 p-6">
+        <div class="Message is-error bg-error-50 border-error-200 rounded border p-4">
+          <p class="text-error-700 font-medium">Error: This field is required</p>
+        </div>
+        <div>
+          <label class="mb-1 block text-sm font-medium text-gray-700">Required Field</label>
+          <input
+            type="text"
+            class="border-error-600 focus:ring-error focus:border-error w-full rounded border px-3 py-2 focus:ring-2"
+          />
+        </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.'
+      }
+    }
+  }
+}`,...m.parameters?.docs?.source}}};h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
+  args: {
+    collapsible: true,
+    heading: 'Publishing Tools'
+  },
+  render: () => html\`
+    <div class="space-y-4">
+      <btu-widget collapsible heading="Metadata" internalname="metadata" widgetid="pub-001">
+        <div class="p-6">
+          <p class="text-gray-700">Edit page metadata and SEO settings.</p>
+        </div>
+      </btu-widget>
+
+      <btu-widget collapsible heading="Tags & Categories" internalname="tags" widgetid="pub-002">
+        <div class="p-6">
+          <p class="text-gray-700">Manage content tags and categories.</p>
+        </div>
+      </btu-widget>
+
+      <btu-widget collapsible heading="Scheduling" internalname="scheduling" widgetid="pub-003">
+        <div class="p-6">
+          <p class="text-gray-700">Set publish date and expiration settings.</p>
+        </div>
+      </btu-widget>
+
+      <btu-widget collapsible heading="Permissions" internalname="permissions" widgetid="pub-004">
+        <div class="p-6">
+          <p class="text-gray-700">Configure access control and permissions.</p>
+        </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.'
+      }
+    }
+  }
+}`,...h.parameters?.docs?.source}}};w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:`{
+  args: {
+    collapsible: true,
+    heading: 'Widget with Event Monitoring',
+    internalname: 'eventDemo',
+    widgetid: 'events-001'
+  },
+  render: args => {
+    // Create a unique ID for this story instance
+    const widgetId = \`widget-\${Math.random().toString(36).substr(2, 9)}\`;
+    const logId = \`log-\${widgetId}\`;
+    const addLogEntry = (eventName: string, detail?: any) => {
+      const logContainer = document.getElementById(logId);
+      if (!logContainer) return;
+      const timestamp = new Date().toLocaleTimeString();
+      const entry = document.createElement('div');
+      entry.className = 'border-l-4 border-primary-500 bg-primary-50 px-4 py-2 mb-2';
+      entry.innerHTML = \`
+        <div class="flex items-center justify-between">
+          <span class="font-semibold text-primary-900">\${eventName}</span>
+          <span class="text-xs text-primary-700">\${timestamp}</span>
+        </div>
+        \${detail ? \`<pre class="text-xs text-primary-800 mt-1">\${JSON.stringify(detail, null, 2)}</pre>\` : ''}
+      \`;
+      logContainer.insertBefore(entry, logContainer.firstChild);
+
+      // Keep only last 10 entries
+      while (logContainer.children.length > 10) {
+        logContainer.removeChild(logContainer.lastChild!);
+      }
+    };
+    setTimeout(() => {
+      const widget = document.getElementById(widgetId);
+      if (!widget) return;
+      widget.addEventListener('btu-widget-ready', ((e: CustomEvent) => {
+        addLogEntry('btu-widget-ready', {
+          timestamp: new Date().toISOString()
+        });
+      }) as EventListener);
+      widget.addEventListener('btu-widget-toggle', ((e: CustomEvent) => {
+        const widgetElement = e.target as any;
+        addLogEntry('btu-widget-toggle', {
+          collapsed: widgetElement.collapsed,
+          timestamp: new Date().toISOString()
+        });
+      }) as EventListener);
+    }, 0);
+    return html\`
+      <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="\${logId}" 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">
+              <li><code>btu-widget-ready</code> - Fired after widget first render</li>
+              <li><code>btu-widget-toggle</code> - Fired when collapse state changes</li>
+            </ul>
+          </div>
+        </div>
+
+        <btu-widget
+          id="\${widgetId}"
+          ?collapsible=\${args.collapsible}
+          .heading=\${args.heading}
+          .internalname=\${args.internalname}
+          .widgetid=\${args.widgetid}
+        >
+          <div class="p-6">
+            <p class="mb-4 text-gray-700">
+              This widget demonstrates event emission. Open the browser console to see all events, or watch the event
+              log above.
+            </p>
+            <div class="rounded border border-blue-200 bg-blue-50 p-3">
+              <p class="text-sm text-blue-900">
+                <strong>Try this:</strong> Click the collapse/expand button multiple times and watch the
+                <code class="rounded bg-blue-100 px-1">btu-widget-toggle</code>
+                events appear in the log above.
+              </p>
+            </div>
+          </div>
+        </btu-widget>
+      </div>
+    \`;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: \`
+Widget event emission demonstration. The widget emits two custom events:
+
+- **btu-widget-ready**: Fired once after the widget's first render and initialization
+- **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.
+        \`
+      }
+    }
+  }
+}`,...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};