@brightspot/ui 1.5.0 → 1.7.0

package/dist/storybook/assets/Tooltip.stories-CsxXkztr.js

@@ -1,143 +0,0 @@
-import{f as v,u as x,x as c,a as w}from"./iframe-CcloOV09.js";import{t as E}from"./custom-element-UsVr97OX.js";import{o as T}from"./if-defined-COHr0XBn.js";import{E as k,R as C}from"./ReadyMixin-BHiHoIbr.js";import"./preload-helper-PPVm8Dsz.js";const S={attribute:!0,type:String,converter:x,reflect:!1,hasChanged:v},L=(o=S,i,s)=>{const{kind:t,metadata:e}=s;let l=globalThis.litPropertyMetadata.get(e);if(l===void 0&&globalThis.litPropertyMetadata.set(e,l=new Map),t==="setter"&&((o=Object.create(o)).wrapped=!0),l.set(s.name,o),t==="accessor"){const{name:r}=s;return{set(n){const g=i.get.call(this);i.set.call(this,n),this.requestUpdate(r,g,o)},init(n){return n!==void 0&&this.C(r,void 0,o,n),n}}}if(t==="setter"){const{name:r}=s;return function(n){const g=this[r];i.call(this,n),this.requestUpdate(r,g,o)}}throw Error("Unsupported decorator location: "+t)};function p(o){return(i,s)=>typeof s=="object"?L(o,i,s):((t,e,l)=>{const r=e.hasOwnProperty(l);return e.constructor.createProperty(l,t),r?Object.getOwnPropertyDescriptor(e,l):void 0})(o,i,s)}var D=Object.defineProperty,a=(o,i,s,t)=>{for(var e=void 0,l=o.length-1,r;l>=0;l--)(r=o[l])&&(e=r(i,s,e)||e);return e&&D(i,s,e),e};const A={top:"btu-tooltip-top",bottom:"btu-tooltip-bottom",left:"btu-tooltip-left",right:"btu-tooltip-right"},_={sm:"btu-tooltip-offset-sm",md:"btu-tooltip-offset-md",lg:"btu-tooltip-offset-lg",xl:"btu-tooltip-offset-xl"},M=o=>{class i extends o{constructor(){super(...arguments),this.tooltip="",this.tooltipPosition="top",this.tooltipDelay=300,this.tooltipOffset=null,this.tooltipNoArrow=!1,this.tooltipTrigger="hover focus",this._tooltipEl=null,this._tooltipId=`btu-tooltip-${crypto.randomUUID()}`,this._anchorName=`--btu-trigger-${crypto.randomUUID()}`,this._showTimer=null,this._isVisible=!1,this._activeTriggers=new Set,this._onMouseEnter=this._handleMouseEnter.bind(this),this._onMouseLeave=this._handleMouseLeave.bind(this),this._onFocusIn=this._handleFocusIn.bind(this),this._onFocusOut=this._handleFocusOut.bind(this),this._onClick=this._handleClick.bind(this),this._onNativeToggle=this._handleNativeToggle.bind(this),this._onKeyDown=this._handleKeyDown.bind(this),this._onDocumentClick=null}connectedCallback(){super.connectedCallback(),this._bindTriggerListeners()}disconnectedCallback(){if(this._clearShowTimer(),this._removeDocumentClickListener(),this._unbindTriggerListeners(),this._tooltipEl){try{this._tooltipEl.hidePopover()}catch(t){t instanceof DOMException&&t.name==="InvalidStateError"||console.warn("[btu-tooltip] Failed to hide tooltip during disconnect:",t)}this._tooltipEl.removeEventListener("toggle",this._onNativeToggle),this._tooltipEl.remove(),this._tooltipEl=null}this._removeAriaDescribedBy(),this.style.removeProperty("anchor-name"),this._isVisible=!1,super.disconnectedCallback()}updated(t){super.updated(t),t.has("tooltipTrigger")&&(this._unbindTriggerListeners(),this._bindTriggerListeners(),this._tooltipEl&&(this._isVisible&&this._hide(),this._tooltipEl.setAttribute("popover",this._getPopoverMode()))),(t.has("tooltip")||t.has("tooltipPosition")||t.has("tooltipDelay")||t.has("tooltipOffset")||t.has("tooltipNoArrow"))&&this._syncTooltipElement()}_getPopoverMode(){return"manual"}_syncTooltipElement(){if(!this.tooltip){this._tooltipEl&&(this._hide(),this._tooltipEl.removeEventListener("toggle",this._onNativeToggle),this._tooltipEl.remove(),this._tooltipEl=null,this._removeAriaDescribedBy(),this.style.removeProperty("anchor-name"),document.removeEventListener("keydown",this._onKeyDown));return}this.style.setProperty("anchor-name",this._anchorName),this._tooltipEl||(this._tooltipEl=this._createTooltipElement(),this.appendChild(this._tooltipEl),this._appendAriaDescribedBy(),document.addEventListener("keydown",this._onKeyDown)),this._tooltipEl.textContent=this.tooltip,this._tooltipEl.className=this._buildTooltipClasses()}_createTooltipElement(){const t=document.createElement("div");return t.id=this._tooltipId,t.className=this._buildTooltipClasses(),t.setAttribute("role","tooltip"),t.setAttribute("data-tooltip-internal",""),t.setAttribute("popover",this._getPopoverMode()),t.style.setProperty("position-anchor",this._anchorName),t.textContent=this.tooltip,t.addEventListener("toggle",this._onNativeToggle),t}_buildTooltipClasses(){const t=["btu-tooltip",A[this.tooltipPosition]];return this.tooltipOffset&&_[this.tooltipOffset]&&t.push(_[this.tooltipOffset]),this.tooltipNoArrow&&t.push("btu-tooltip-no-arrow"),t.join(" ")}_hasTrigger(t){return this._activeTriggers.has(t)}_bindTriggerListeners(){const t=new Set(["hover","focus","click"]);this._activeTriggers=new Set(this.tooltipTrigger.trim().split(/\s+/));for(const e of this._activeTriggers)t.has(e)||console.warn(`[btu-tooltip] Unrecognized tooltip-trigger value: "${e}". Valid values: hover, focus, click.`);this._hasTrigger("hover")&&(this.addEventListener("mouseenter",this._onMouseEnter),this.addEventListener("mouseleave",this._onMouseLeave)),this._hasTrigger("focus")&&(this.addEventListener("focusin",this._onFocusIn),this.addEventListener("focusout",this._onFocusOut)),this._hasTrigger("click")&&this.addEventListener("click",this._onClick)}_unbindTriggerListeners(){this.removeEventListener("mouseenter",this._onMouseEnter),this.removeEventListener("mouseleave",this._onMouseLeave),this.removeEventListener("focusin",this._onFocusIn),this.removeEventListener("focusout",this._onFocusOut),this.removeEventListener("click",this._onClick),document.removeEventListener("keydown",this._onKeyDown)}_show(){if(!(this._isVisible||!this._tooltipEl)){try{this._tooltipEl.showPopover()}catch(t){t instanceof DOMException&&t.name==="InvalidStateError"||console.warn("[btu-tooltip] Failed to show tooltip:",t)}this._hasTrigger("click")&&setTimeout(()=>{this._removeDocumentClickListener(),this._onDocumentClick=t=>{const e=t.composedPath();!e.includes(this)&&(!this._tooltipEl||!e.includes(this._tooltipEl))&&this._hide()},document.addEventListener("click",this._onDocumentClick)},0)}}_hide(){if(this._clearShowTimer(),this._removeDocumentClickListener(),!(!this._isVisible||!this._tooltipEl))try{this._tooltipEl.hidePopover()}catch(t){t instanceof DOMException&&t.name==="InvalidStateError"||console.warn("[btu-tooltip] Failed to hide tooltip:",t)}}_removeDocumentClickListener(){this._onDocumentClick&&(document.removeEventListener("click",this._onDocumentClick),this._onDocumentClick=null)}_handleNativeToggle(t){const{newState:e}=t;this._isVisible=e==="open",this.dispatchEvent(new CustomEvent(this._isVisible?"btu-tooltip-show":"btu-tooltip-hide",{bubbles:!0,composed:!0}))}_handleKeyDown(t){t.key==="Escape"&&(this._clearShowTimer(),this._hide())}_clearShowTimer(){this._showTimer!==null&&(clearTimeout(this._showTimer),this._showTimer=null)}_handleMouseEnter(){this._clearShowTimer(),this._showTimer=setTimeout(()=>{this._show()},this.tooltipDelay)}_handleMouseLeave(){this._clearShowTimer(),this._hide()}_handleFocusIn(){this._clearShowTimer(),this._show()}_handleFocusOut(){this._clearShowTimer(),this._hide()}_handleClick(){this._clearShowTimer(),this._isVisible?this._hide():this._show()}_appendAriaDescribedBy(){const t=this.getAttribute("aria-describedby");t?t.includes(this._tooltipId)||this.setAttribute("aria-describedby",`${t} ${this._tooltipId}`):this.setAttribute("aria-describedby",this._tooltipId)}_removeAriaDescribedBy(){const t=this.getAttribute("aria-describedby");if(!t)return;const e=t.split(/\s+/).filter(l=>l!==this._tooltipId).join(" ").trim();e?this.setAttribute("aria-describedby",e):this.removeAttribute("aria-describedby")}}return a([p({attribute:"tooltip"})],i.prototype,"tooltip"),a([p({attribute:"tooltip-position"})],i.prototype,"tooltipPosition"),a([p({attribute:"tooltip-delay",type:Number})],i.prototype,"tooltipDelay"),a([p({attribute:"tooltip-offset"})],i.prototype,"tooltipOffset"),a([p({attribute:"tooltip-no-arrow",type:Boolean})],i.prototype,"tooltipNoArrow"),a([p({attribute:"tooltip-trigger"})],i.prototype,"tooltipTrigger"),i};var O=Object.defineProperty,P=Object.getOwnPropertyDescriptor,y=(o,i,s,t)=>{for(var e=t>1?void 0:t?P(i,s):i,l=o.length-1,r;l>=0;l--)(r=o[l])&&(e=(t?r(i,s,e):r(e))||e);return t&&e&&O(i,s,e),e};let b=class extends M(k(C(w))){constructor(){super(...arguments),this.label="Hover me",this.initialClasses=[]}connectedCallback(){super.connectedCallback(),this.className&&(this.initialClasses=this.className.split(" ").filter(o=>o.trim()))}createRenderRoot(){return this}willUpdate(){const o=[...this.initialClasses,"tooltip-demo"];this.className=o.filter(Boolean).join(" ")}render(){return c`${this.label}`}};y([p({type:String})],b.prototype,"label",2);b=y([E("tooltip-demo")],b);const f=`
-  .tooltip-demo {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0.5rem 1rem;
-    border-radius: 0.375rem;
-    background-color: oklch(var(--btu-theme-gray-100));
-    color: oklch(var(--btu-theme-gray-700));
-    font-weight: 500;
-    font-size: 0.875rem;
-    cursor: default;
-    user-select: none;
-  }
-`,F={title:"Mixins/Tooltip",tags:["autodocs"],parameters:{docs:{subtitle:"Declarative tooltip support for any LitElement component",description:{component:`
-\`TooltipMixin\` adds declarative tooltip support to any LitElement component using CSS anchor positioning and the Popover API.
-
-<h3>Opt-in Pattern</h3>
-
-\`\`\`typescript
-class MyComponent extends TooltipMixin(EventEmitterMixin(ReadyMixin(LitElement))) {
-  // Component now supports tooltip attributes
-}
-\`\`\`
-
-\`\`\`html
-<my-component tooltip="Hello!" tooltip-position="bottom"></my-component>
-\`\`\`
-
-<h3>Accessibility</h3>
-<ul>
-  <li><code>role="tooltip"</code> on tooltip element</li>
-  <li><code>aria-describedby</code> on host links to tooltip (appends to existing value)</li>
-  <li>Shows on <code>focusin</code>, hides on <code>focusout</code> and <code>Escape</code></li>
-  <li><code>prefers-reduced-motion: reduce</code> disables slide animation</li>
-</ul>
-        `}},controls:{expanded:!0}},args:{tooltip:"This is a tooltip","tooltip-position":"top","tooltip-delay":300,"tooltip-no-arrow":!1,"tooltip-trigger":"hover focus",label:"Hover me"},argTypes:{tooltip:{control:{type:"text"},description:"Tooltip text. No tooltip rendered when empty.",table:{category:"Attributes"}},"tooltip-position":{control:{type:"select"},options:["top","bottom","left","right"],description:"Preferred placement (auto-flips if viewport constrained)",table:{category:"Attributes"}},"tooltip-delay":{control:{type:"number"},description:"Delay before showing tooltip on hover (ms)",table:{category:"Attributes"}},"tooltip-offset":{control:{type:"select"},options:["sm","md","lg","xl"],description:"Gap between trigger and tooltip (sm=4px, md=8px, lg=12px, xl=16px)",table:{category:"Attributes"}},"tooltip-no-arrow":{control:{type:"boolean"},description:"Hide the arrow pseudo-element",table:{category:"Attributes"}},"tooltip-trigger":{control:{type:"select"},options:["hover focus","hover","focus","click","hover click"],description:"How the tooltip is activated (combinable triggers)",table:{category:"Attributes"}},label:{control:{type:"text"},description:"Demo button label text",table:{category:"Demo"}},customBg:{name:"--tooltip-color-background",control:{type:"color"},description:"Background color",table:{category:"CSS Custom Properties",defaultValue:{summary:"white"}}},customTextColor:{name:"--tooltip-color-text",control:{type:"color"},description:"Text color",table:{category:"CSS Custom Properties",defaultValue:{summary:"oklch(var(--btu-theme-gray-900))"}}},customRadius:{name:"--tooltip-border-radius",control:{type:"select"},options:["0px","0.125rem","0.25rem","0.375rem","0.5rem","0.75rem","1rem","1.5rem","9999px"],labels:{"0px":"none (0px)","0.125rem":"sm (0.125rem)","0.25rem":"DEFAULT (0.25rem)","0.375rem":"md (0.375rem)","0.5rem":"lg (0.5rem)","0.75rem":"xl (0.75rem)","1rem":"2xl (1rem)","1.5rem":"3xl (1.5rem)","9999px":"full (9999px)"},description:"Border radius",table:{category:"CSS Custom Properties",defaultValue:{summary:"0.5rem (lg)"}}}},render:o=>{const i=[];o.customBg&&i.push(`--tooltip-color-background: ${o.customBg}`),o.customTextColor&&i.push(`--tooltip-color-text: ${o.customTextColor}`),o.customRadius&&i.push(`--tooltip-border-radius: ${o.customRadius}`);const s=i.length>0?i.join("; "):"";return c`
-      <style>
-        ${f}
-      </style>
-      <div style="display: flex; justify-content: center; padding: 6rem 2rem;">
-        <div style="${s}">
-          <tooltip-demo
-            tooltip="${o.tooltip}"
-            tooltip-position="${o["tooltip-position"]}"
-            tooltip-delay="${o["tooltip-delay"]}"
-            tooltip-offset="${T(o["tooltip-offset"])}"
-            ?tooltip-no-arrow="${o["tooltip-no-arrow"]}"
-            tooltip-trigger="${o["tooltip-trigger"]}"
-            label="${o.label}"
-          ></tooltip-demo>
-        </div>
-      </div>
-    `}},d={args:{}},h={render:()=>c`
-    <style>
-      ${f}
-    </style>
-    <div style="display: flex; gap: 2rem; justify-content: center; padding: 6rem 2rem; flex-wrap: wrap;">
-      <tooltip-demo tooltip="Top tooltip" tooltip-position="top" label="Top"></tooltip-demo>
-      <tooltip-demo tooltip="Bottom tooltip" tooltip-position="bottom" label="Bottom"></tooltip-demo>
-      <tooltip-demo tooltip="Left tooltip" tooltip-position="left" label="Left"></tooltip-demo>
-      <tooltip-demo tooltip="Right tooltip" tooltip-position="right" label="Right"></tooltip-demo>
-    </div>
-  `,parameters:{docs:{description:{story:"Tooltips support four positions: `top`, `bottom`, `left`, and `right`. Each position auto-flips to the opposite side if constrained by the viewport."},story:{inline:!1,iframeHeight:300}}}},m={render:()=>c`
-    <style>
-      ${f}
-    </style>
-    <div style="display: flex; gap: 2rem; justify-content: center; padding: 4rem 2rem; flex-wrap: wrap;">
-      <tooltip-demo tooltip="Small offset (4px)" tooltip-offset="sm" label="sm"></tooltip-demo>
-      <tooltip-demo tooltip="Medium offset (8px)" tooltip-offset="md" label="md"></tooltip-demo>
-      <tooltip-demo tooltip="Large offset (12px)" tooltip-offset="lg" label="lg"></tooltip-demo>
-      <tooltip-demo tooltip="Extra large offset (16px)" tooltip-offset="xl" label="xl"></tooltip-demo>
-    </div>
-  `,parameters:{docs:{description:{story:"The `tooltip-offset` attribute controls the gap between trigger and tooltip using named sizes: `sm` (4px), `md` (8px), `lg` (12px), `xl` (16px)."}}}},u={render:()=>c`
-    <style>
-      ${f}
-    </style>
-    <div style="display: flex; gap: 2rem; justify-content: center; padding: 4rem 2rem; flex-wrap: wrap;">
-      <tooltip-demo tooltip="Click-triggered tooltip" tooltip-trigger="click" label="Click me"></tooltip-demo>
-      <tooltip-demo tooltip="Hover or click" tooltip-trigger="hover click" label="Hover or click"></tooltip-demo>
-    </div>
-  `,parameters:{docs:{description:{story:"The `tooltip-trigger` attribute controls how the tooltip is activated. `click` toggles on click and dismisses on Escape. Triggers can be combined with spaces."}}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
-  args: {}
-}`,...d.parameters?.docs?.source}}};h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
-  render: () => html\`
-    <style>
-      \${demoStyle}
-    </style>
-    <div style="display: flex; gap: 2rem; justify-content: center; padding: 6rem 2rem; flex-wrap: wrap;">
-      <tooltip-demo tooltip="Top tooltip" tooltip-position="top" label="Top"></tooltip-demo>
-      <tooltip-demo tooltip="Bottom tooltip" tooltip-position="bottom" label="Bottom"></tooltip-demo>
-      <tooltip-demo tooltip="Left tooltip" tooltip-position="left" label="Left"></tooltip-demo>
-      <tooltip-demo tooltip="Right tooltip" tooltip-position="right" label="Right"></tooltip-demo>
-    </div>
-  \`,
-  parameters: {
-    docs: {
-      description: {
-        story: 'Tooltips support four positions: \`top\`, \`bottom\`, \`left\`, and \`right\`. Each position auto-flips to the opposite side if constrained by the viewport.'
-      },
-      story: {
-        inline: false,
-        iframeHeight: 300
-      }
-    }
-  }
-}`,...h.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
-  render: () => html\`
-    <style>
-      \${demoStyle}
-    </style>
-    <div style="display: flex; gap: 2rem; justify-content: center; padding: 4rem 2rem; flex-wrap: wrap;">
-      <tooltip-demo tooltip="Small offset (4px)" tooltip-offset="sm" label="sm"></tooltip-demo>
-      <tooltip-demo tooltip="Medium offset (8px)" tooltip-offset="md" label="md"></tooltip-demo>
-      <tooltip-demo tooltip="Large offset (12px)" tooltip-offset="lg" label="lg"></tooltip-demo>
-      <tooltip-demo tooltip="Extra large offset (16px)" tooltip-offset="xl" label="xl"></tooltip-demo>
-    </div>
-  \`,
-  parameters: {
-    docs: {
-      description: {
-        story: 'The \`tooltip-offset\` attribute controls the gap between trigger and tooltip using named sizes: \`sm\` (4px), \`md\` (8px), \`lg\` (12px), \`xl\` (16px).'
-      }
-    }
-  }
-}`,...m.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
-  render: () => html\`
-    <style>
-      \${demoStyle}
-    </style>
-    <div style="display: flex; gap: 2rem; justify-content: center; padding: 4rem 2rem; flex-wrap: wrap;">
-      <tooltip-demo tooltip="Click-triggered tooltip" tooltip-trigger="click" label="Click me"></tooltip-demo>
-      <tooltip-demo tooltip="Hover or click" tooltip-trigger="hover click" label="Hover or click"></tooltip-demo>
-    </div>
-  \`,
-  parameters: {
-    docs: {
-      description: {
-        story: 'The \`tooltip-trigger\` attribute controls how the tooltip is activated. \`click\` toggles on click and dismisses on Escape. Triggers can be combined with spaces.'
-      }
-    }
-  }
-}`,...u.parameters?.docs?.source}}};const R=["Default","Positions","Offset","ClickTrigger"];export{u as ClickTrigger,d as Default,m as Offset,h as Positions,R as __namedExportsOrder,F as default};

package/dist/storybook/assets/if-defined-COHr0XBn.js

@@ -1 +0,0 @@
-import{E as r}from"./iframe-CcloOV09.js";const m=o=>o??r;export{m as o};