@webority/ui-elements 0.137.2 → 0.139.0

package/dist/ui-elements.js

@@ -1 +1 @@
-import{n as e}from"./elementBase-DV9IZZCu.js";import{n as ee}from"./filterPopover-C8MVAfyI.js";import{c as t}from"./kanban-D-ljbA4A.js";import{n}from"./statusIcons-Dt2ZVJyk.js";import{t as r}from"./WuiAutocomplete-178HkRe4.js";import{t as i}from"./WuiCarousel-C2NWcFxr.js";import{t as a}from"./WuiCodeBlock-vV4v7-c7.js";import{t as o}from"./WuiCommandPalette-CtF31Bbo.js";import{i as s}from"./WuiCommentThread-ZXxBt71o.js";import{t as c}from"./WuiConsentBanner-CYOU67bp.js";import{t as l}from"./WuiContextMenu-BvDHn1cP.js";import{t as u}from"./WuiCountrySelect-Df9BRrCI.js";import{t as d}from"./WuiDataTable-XscBy1ct.js";import{t as f}from"./WuiDatePicker-sq_13WUI.js";import{t as p}from"./WuiDateRange-D0JjHJpa.js";import{t as m}from"./WuiDock-Bd2ijOaJ.js";import{t as h}from"./WuiDrawer-BJ8zqtQ2.js";import{t as g}from"./WuiHoverCard-sq6EZZYD.js";import{t as _}from"./WuiImageCrop-DzzzPagi.js";import{i as v}from"./WuiInlineEdit-CBw0bupF.js";import{t as y}from"./WuiLeadPopup-CWv93qlo.js";import{t as b}from"./WuiLightbox-CDcqNQun.js";import{t as x}from"./WuiMarkdown-DmgLFkB-.js";import{i as S}from"./WuiMentionInput-9iC7Tur2.js";import{t as C}from"./WuiMultiSelect-nHensvLa.js";import{t as w}from"./WuiNavigationMenu-CGqTADvr.js";import{t as T}from"./WuiNotificationCenter-CClYbyQ2.js";import{t as E}from"./WuiOnboardingChecklist-DXUETu1h.js";import{t as D}from"./WuiOrgTree-DuaBtFl9.js";import{t as O}from"./WuiOtp-BqWijfNj.js";import{t as k}from"./WuiOverflow-Bn68qgAQ.js";import{t as A}from"./WuiPhone-C1t2nZvd.js";import{t as j}from"./WuiRating-DhhqYj5Z.js";import{t as M}from"./WuiRecordPager-BOaFcs_W.js";import{t as N}from"./WuiRelativeTime-BG6rgUhw.js";import{t as P}from"./WuiResizable-mt9EMhjQ.js";import{t as F}from"./WuiRollingNumber-CF3H6l7t.js";import{t as I}from"./WuiSavedViews-KUVaYmGJ.js";import{t as L}from"./WuiSelect-1TmFVLek.js";import{t as R}from"./WuiShortcuts-Cerbe67I.js";import{t as z}from"./WuiShowMore-D3VHRZJg.js";import{t as B}from"./WuiSlider-2kB__6zU.js";import{t as V}from"./WuiSortable-r5iZtzM1.js";import{t as H}from"./WuiTagInput-Dkw2q0KS.js";import{t as U}from"./WuiTimePicker-BcH9_gEm.js";import{t as W}from"./WuiTour-ClCXfOtI.js";import{t as G}from"./WuiTree-BFm_hpSK.js";import{t as K}from"./WuiTruncate-DyDQWMBu.js";import{n as q,t as J}from"./WuiWhatsNew-Biolggw8.js";import{n as Y,t as X}from"./WuiWizardStep-LecF3VY7.js";import{c as Z,f as Q,l as te,m as ne,p as re,s as ie,u as ae}from"./formatters-Ba0CvsTs.js";import{_ as oe,r as se}from"./themeTransition-rHRVbhHB.js";import{t as ce}from"./drawerDiscard-8StN3xcZ.js";import{i as le}from"./shortcutKeys-CvxSh3bV.js";function $(){ee(),e(`wui-select`,L),e(`wui-saved-views`,I),e(`wui-country-select`,u),e(`wui-phone`,A),e(`wui-datepicker`,f),e(`wui-date-range`,p),e(`wui-dock`,m),e(`wui-image-crop`,_),e(`wui-kanban`,t),e(`wui-lead-popup`,y),e(`wui-inline-edit`,v),e(`wui-consent-banner`,c),e(`wui-slider`,B),e(`wui-sortable`,V),e(`wui-timepicker`,U),e(`wui-tour`,W),e(`wui-tree`,G),e(`wui-org-tree`,D),e(`wui-autocomplete`,r),e(`wui-command-palette`,o),e(`wui-context-menu`,l),e(`wui-multiselect`,C),e(`wui-taginput`,H),e(`wui-otp`,O),e(`wui-status-icon`,n),e(`wui-shortcuts`,R),e(`wui-record-pager`,M),e(`wui-carousel`,i),e(`wui-code-block`,a),e(`wui-markdown`,x),e(`wui-data-table`,d),e(`wui-drawer`,h),e(`wui-hover-card`,g),e(`wui-lightbox`,b),e(`wui-navigation-menu`,w),e(`wui-notification-center`,T),e(`wui-onboarding-checklist`,E),e(`wui-overflow`,k),e(`wui-rating`,j),e(`wui-relative-time`,N),e(`wui-resizable`,P),e(`wui-rolling-number`,F),e(`wui-show-more`,z),e(`wui-truncate`,K),e(`wui-whats-new`,q),e(`wui-mention-input`,S),e(`wui-comment-thread`,s),e(`wui-wizard-step`,X),e(`wui-wizard`,Y)}$();export{ce as DISCARD_EVENT,oe as ROW_DROP_EVENT,le as SHORTCUT_EVENT,se as THEME_CHANGE_EVENT,J as WHATS_NEW_READ_EVENT,r as WuiAutocomplete,i as WuiCarousel,a as WuiCodeBlock,o as WuiCommandPalette,s as WuiCommentThread,c as WuiConsentBanner,l as WuiContextMenu,u as WuiCountrySelect,d as WuiDataTable,f as WuiDatePicker,p as WuiDateRange,m as WuiDock,h as WuiDrawer,g as WuiHoverCard,_ as WuiImageCrop,v as WuiInlineEdit,t as WuiKanban,y as WuiLeadPopup,b as WuiLightbox,x as WuiMarkdown,S as WuiMentionInput,C as WuiMultiSelect,w as WuiNavigationMenu,T as WuiNotificationCenter,E as WuiOnboardingChecklist,D as WuiOrgTree,O as WuiOtp,k as WuiOverflow,A as WuiPhone,j as WuiRating,M as WuiRecordPager,N as WuiRelativeTime,P as WuiResizable,F as WuiRollingNumber,I as WuiSavedViews,L as WuiSelect,R as WuiShortcuts,z as WuiShowMore,B as WuiSlider,V as WuiSortable,n as WuiStatusIcon,H as WuiTagInput,U as WuiTimePicker,W as WuiTour,G as WuiTree,K as WuiTruncate,q as WuiWhatsNew,Y as WuiWizard,X as WuiWizardStep,$ as defineWeborityElements,ie as formatCompact,Z as formatCurrency,te as formatDate,ae as formatDateTime,Q as formatNumber,re as formatPercent,ne as formatValue};
+import{n as e}from"./elementBase-DV9IZZCu.js";import{n as t}from"./filterPopover-DrwHiZiL.js";import{c as n}from"./kanban-D-ljbA4A.js";import{n as r}from"./statusIcons-Dt2ZVJyk.js";import{t as i}from"./WuiCarousel-C2NWcFxr.js";import{t as a}from"./WuiCodeBlock-vV4v7-c7.js";import{t as o}from"./WuiCommandPalette-CtF31Bbo.js";import{i as s}from"./WuiCommentThread-ZXxBt71o.js";import{t as c}from"./WuiConsentBanner-CYOU67bp.js";import{t as l}from"./WuiContextMenu-BvDHn1cP.js";import{t as u}from"./WuiDataTable-XscBy1ct.js";import{t as d}from"./WuiDatePicker-D6x670lh.js";import{t as f}from"./WuiDateRange-DUkF9FYe.js";import{t as p}from"./WuiDock-Bd2ijOaJ.js";import{t as m}from"./WuiDrawer-BJ8zqtQ2.js";import{t as h}from"./WuiHoverCard-sq6EZZYD.js";import{t as g}from"./WuiImageCrop-DzzzPagi.js";import{i as _}from"./WuiInlineEdit-CBw0bupF.js";import{t as v}from"./WuiLeadPopup-CWv93qlo.js";import{t as y}from"./WuiLightbox-CDcqNQun.js";import{t as b}from"./WuiMarkdown-DmgLFkB-.js";import{i as x}from"./WuiMentionInput-9iC7Tur2.js";import{t as S}from"./WuiNavigationMenu-CGqTADvr.js";import{t as C}from"./WuiNotificationCenter-CClYbyQ2.js";import{t as w}from"./WuiOnboardingChecklist-DXUETu1h.js";import{t as T}from"./WuiOrgTree-DuaBtFl9.js";import{t as E}from"./WuiOtp-BqWijfNj.js";import{t as D}from"./WuiOverflow-Bn68qgAQ.js";import{t as O}from"./WuiPhone-C1t2nZvd.js";import{t as k}from"./WuiRating-DhhqYj5Z.js";import{t as A}from"./WuiRecordPager-BOaFcs_W.js";import{t as j}from"./WuiRelativeTime-BG6rgUhw.js";import{t as M}from"./WuiResizable-mt9EMhjQ.js";import{t as N}from"./WuiRollingNumber-CF3H6l7t.js";import{t as P}from"./WuiSavedViews-KUVaYmGJ.js";import{t as F}from"./WuiSelect-Doosf5WD.js";import{t as I}from"./WuiShortcuts-Cerbe67I.js";import{t as L}from"./WuiShowMore-D3VHRZJg.js";import{t as R}from"./WuiSlider-2kB__6zU.js";import{t as z}from"./WuiSortable-r5iZtzM1.js";import{t as B}from"./WuiTimePicker-BcH9_gEm.js";import{t as V}from"./WuiTour-D18C-wQP.js";import{t as H}from"./WuiTree-BFm_hpSK.js";import{t as U}from"./WuiTruncate-DyDQWMBu.js";import{n as W,t as ee}from"./WuiWhatsNew-Biolggw8.js";import{n as G,t as K}from"./WuiWizardStep-BI6ClNdF.js";import{c as q,f as J,l as Y,m as X,p as Z,s as Q,u as te}from"./formatters-Ba0CvsTs.js";import{_ as ne,r as re}from"./themeTransition-rHRVbhHB.js";import{t as ie}from"./drawerDiscard-BFrHUxca.js";import{i as ae}from"./shortcutKeys-CvxSh3bV.js";function $(){t(),e(`wui-select`,F),e(`wui-saved-views`,P),e(`wui-phone`,O),e(`wui-datepicker`,d),e(`wui-date-range`,f),e(`wui-dock`,p),e(`wui-image-crop`,g),e(`wui-kanban`,n),e(`wui-lead-popup`,v),e(`wui-inline-edit`,_),e(`wui-consent-banner`,c),e(`wui-slider`,R),e(`wui-sortable`,z),e(`wui-timepicker`,B),e(`wui-tour`,V),e(`wui-tree`,H),e(`wui-org-tree`,T),e(`wui-command-palette`,o),e(`wui-context-menu`,l),e(`wui-otp`,E),e(`wui-status-icon`,r),e(`wui-shortcuts`,I),e(`wui-record-pager`,A),e(`wui-carousel`,i),e(`wui-code-block`,a),e(`wui-markdown`,b),e(`wui-data-table`,u),e(`wui-drawer`,m),e(`wui-hover-card`,h),e(`wui-lightbox`,y),e(`wui-navigation-menu`,S),e(`wui-notification-center`,C),e(`wui-onboarding-checklist`,w),e(`wui-overflow`,D),e(`wui-rating`,k),e(`wui-relative-time`,j),e(`wui-resizable`,M),e(`wui-rolling-number`,N),e(`wui-show-more`,L),e(`wui-truncate`,U),e(`wui-whats-new`,W),e(`wui-mention-input`,x),e(`wui-comment-thread`,s),e(`wui-wizard-step`,K),e(`wui-wizard`,G)}$();export{ie as DISCARD_EVENT,ne as ROW_DROP_EVENT,ae as SHORTCUT_EVENT,re as THEME_CHANGE_EVENT,ee as WHATS_NEW_READ_EVENT,i as WuiCarousel,a as WuiCodeBlock,o as WuiCommandPalette,s as WuiCommentThread,c as WuiConsentBanner,l as WuiContextMenu,u as WuiDataTable,d as WuiDatePicker,f as WuiDateRange,p as WuiDock,m as WuiDrawer,h as WuiHoverCard,g as WuiImageCrop,_ as WuiInlineEdit,n as WuiKanban,v as WuiLeadPopup,y as WuiLightbox,b as WuiMarkdown,x as WuiMentionInput,S as WuiNavigationMenu,C as WuiNotificationCenter,w as WuiOnboardingChecklist,T as WuiOrgTree,E as WuiOtp,D as WuiOverflow,O as WuiPhone,k as WuiRating,A as WuiRecordPager,j as WuiRelativeTime,M as WuiResizable,N as WuiRollingNumber,P as WuiSavedViews,F as WuiSelect,I as WuiShortcuts,L as WuiShowMore,R as WuiSlider,z as WuiSortable,r as WuiStatusIcon,B as WuiTimePicker,V as WuiTour,H as WuiTree,U as WuiTruncate,W as WuiWhatsNew,G as WuiWizard,K as WuiWizardStep,$ as defineWeborityElements,Q as formatCompact,q as formatCurrency,Y as formatDate,te as formatDateTime,J as formatNumber,Z as formatPercent,X as formatValue};

package/dist/ui-tour.global.js

@@ -1 +1 @@
-(function(){function e(e,t){if(typeof customElements>`u`||customElements.get(e))return;let n=[];if(typeof document<`u`)for(let r of document.querySelectorAll(e))for(let e of Object.keys(r)){let i=Object.getOwnPropertyDescriptor(t.prototype,e);i&&(i.set||i.get)&&(n.push([r,e,r[e]]),delete r[e])}customElements.define(e,t);for(let[e,t,r]of n)e[t]=r}var t=typeof HTMLElement>`u`?class{}:HTMLElement;function n(e,t){r(e),e._reanchor=t,e._reanchorScroll=n=>{n.target instanceof Node&&typeof e.contains==`function`&&e.contains(n.target)||t()},window.addEventListener(`resize`,e._reanchor),window.addEventListener(`scroll`,e._reanchorScroll,!0)}function r(e){e?._reanchor&&(window.removeEventListener(`resize`,e._reanchor),window.removeEventListener(`scroll`,e._reanchorScroll,!0),e._reanchor=null,e._reanchorScroll=null)}var i=`AppButton`,a={primary:`btn-primary`,soft:`btn-soft-primary`,outline:`btn-outline-primary`,ghost:`btn-ghost-primary`,text:`btn-link-primary`,danger:`btn-danger`,success:`btn-success`,"outline-danger":`btn-outline-danger`,light:`btn-neutral`,warning:`btn-warning`,neutral:`btn-soft-neutral`,"outline-light":`btn-glass`,"outline-secondary":`btn-outline-neutral`};function o(e=`primary`,t=`md`){let n=a[e];if(!n)throw Error(`buttonClass: unknown variant "${e}"`);return t===`md`?`btn ${n}`:`btn ${n} btn-${t}`}var s=`data-advance`,c=`wui-tour-hint`,l=`Click {actionName} to continue.`,u=`a[href], button, input, select, textarea, summary, [tabindex], [contenteditable]`,d=(e,t)=>e?.advanceOn===`click`&&!!t,f=e=>(e??``).replace(/\s+/g,` `).trim();function p(e){let t=e.ownerDocument,n=(e.getAttribute(`aria-labelledby`)||``).split(/\s+/).filter(Boolean),r=e.tagName===`INPUT`&&/^(button|submit|reset)$/.test(e.type)?e.value:``,i=[n.map(e=>t.getElementById(e)?.textContent??``).join(` `),e.getAttribute(`aria-label`),Array.from(e.labels??[],e=>e.textContent).join(` `),e.getAttribute(`alt`),r,e.textContent,e.getAttribute(`title`)];for(let e of i){let t=f(e);if(t)return t}return``}function m(e){for(let t of[e,...e.querySelectorAll(u)])if(t.tabIndex>=0&&!t.disabled)return t;return null}function h(e,t,n){let r=(e.getAttribute(`aria-describedby`)||``).split(/\s+/).filter(e=>e&&e!==t);n&&r.push(t),r.length>0?e.setAttribute(`aria-describedby`,r.join(` `)):e.removeAttribute(`aria-describedby`)}function ee(e,t){let n=e.querySelector(`.${c}`),r=e.querySelector(`.wui-tour-text`)?.id,i=r?`${r.replace(/-text$/,``)}-hint`:``;t?(n||(n=e.ownerDocument.createElement(`p`),n.className=c,i&&(n.id=i),e.querySelector(`.wui-tour-actions`).before(n)),n.textContent=t,i&&h(e,i,!0)):(n?.remove(),i&&h(e,i,!1))}var te=e=>getComputedStyle(e).animationName;function g(e,{layer:t,spot:n,card:r},i,a){let o=d(i,a);t.toggleAttribute(s,o&&!(t.getRootNode()instanceof ShadowRoot)),n.hasAttribute(s)&&(n.removeAttribute(s),o&&te(n)),o&&n.setAttribute(s,``);let c=r.querySelector(`.wui-tour-next`);c.classList.toggle(`btn-primary`,!o),c.classList.toggle(`btn-link`,o);let u=o?f(i.actionLabel)||p(a):``,m=e.getAttribute(`advance-label`)||l,h=u?m.replace(/\{actionName\}/g,()=>u):``;return ee(r,h),h}function ne(e,t,n){if(!d(e,t))return()=>{};let r=null,i=()=>{r??=setTimeout(n,0)};return t.addEventListener(`click`,i),()=>{t.removeEventListener(`click`,i),clearTimeout(r)}}function _(e,t,n,r){return e.contains(r)||d(t,n)&&n.contains(r)}function v(e,{card:t,active:n,step:r,target:i}){let a=Array.from(t.querySelectorAll(`button`)).filter(e=>!e.hidden),o=d(r,i)?m(i):null;o&&a.push(o);let s=a.findIndex(e=>e===n||e===o&&i.contains(n));e.preventDefault(),a[s===-1?e.shiftKey?a.length-1:0:(s+(e.shiftKey?-1:1)+a.length)%a.length].focus()}var re=2/3,ie=1e3,ae=new Set([`top`,`left`,`width`,`height`]),y=new WeakMap,b=(e,t)=>typeof e.getAnimations==`function`?e.getAnimations().filter(t):[],x=e=>e.transitionProperty===`opacity`,S=e=>ae.has(e.transitionProperty),C=e=>typeof e.animationName==`string`&&e.animationName.startsWith(`wui-tour-`);function w(e){return e.length===0?null:new Promise(t=>{let n=setTimeout(t,ie);Promise.allSettled(e.map(e=>e.finished)).then(()=>{clearTimeout(n),t()})})}function T(e){let t=e.parentElement?.querySelector(`:scope > .wui-tour-spot`),n=0;for(let e of t?b(t,S):[]){let t=e.effect?.getComputedTiming?.();if(typeof t?.duration!=`number`)continue;let r=typeof e.currentTime==`number`?e.currentTime:0;n=Math.max(n,(t.delay??0)+t.duration*re-r)}return n}function E(e){let t=T(e);t>0?e.style.setProperty(`--wui-tour-card-delay`,`${Math.round(t)}ms`):e.style.removeProperty(`--wui-tour-card-delay`),e.dataset.state=`entering`;let n={};y.set(e,n);let r=()=>{y.get(e)===n&&e.dataset.state===`entering`&&(e.dataset.state=`shown`)},i=b(e,C);i.length===0?r():Promise.allSettled(i.map(e=>e.finished)).then(r)}function D(e){return e.dataset.state=`leaving`,w(b(e,x))}function oe(e){let t=e.classList.contains(`wui-tour-layer`)?e:e.shadowRoot?.querySelector(`.wui-tour-layer`);t&&(t.dataset.state=`leaving`);let n=t?w(b(t,x)):null;n?(e.setAttribute(`inert`,``),n.then(()=>e.remove())):e.remove()}var se=2,O=12,k=8,A=4,j=20,ce=`(max-width: 575.98px)`,le=[`bottom`,`top`,`right`,`left`],M=[`top-left`,`top-right`,`bottom-right`,`bottom-left`],N,P=(e,t,n)=>Math.max(t,Math.min(e,n)),F=(e,t,n,r)=>(Math.max(e,n)+Math.min(t,r))/2;function I(e,t){if(!t?.scrollIntoView)return;e.style.maxHeight=``;let n=H(e),r=e.offsetHeight+O;if(t.getBoundingClientRect().height+4+r*2<=n.bottom-n.top){t.scrollIntoView({block:`center`,inline:`nearest`});return}let i=t.style.scrollMarginTop;t.style.scrollMarginTop=`${n.top+r+se}px`,t.scrollIntoView({block:`start`,inline:`nearest`}),t.style.scrollMarginTop=i}function L(e,t,n){let r=e.style,i=t.style,a=U(t);if(!n){r.top=`50%`,r.left=`50%`,r.width=`0px`,r.height=`0px`,r.boxShadow=`0 0 0 100vmax var(--color-scrim-strong)`;for(let e of M)r.removeProperty(`border-${e}-radius`),r.removeProperty(`corner-${e}-shape`);t.dataset.placement=`center`,a.hidden=!0,i.position=`fixed`,i.top=`50%`,i.left=`50%`,i.transform=`translate(-50%, -50%)`,i.maxHeight=`calc(100vh - 16px)`;return}r.boxShadow=``,i.transform=``,i.position=`fixed`;let o=n.getBoundingClientRect();r.top=`${o.top}px`,r.left=`${o.left}px`,r.width=`${o.width}px`,r.height=`${o.height}px`,R(r,n);let s=t.scrollTop;i.maxHeight=``;let c={width:t.offsetWidth,height:t.offsetHeight},l=H(t),u=l.bottom-l.top,d={bottom:l.bottom-o.bottom-O,top:o.top-O-l.top,right:l.right-o.right-O,left:o.left-O-l.left},f=window.matchMedia(ce).matches,p=le.find(e=>e===`top`||e===`bottom`?c.height<=d[e]+1:!f&&c.width<=d[e]+1&&c.height<=u+1),m=Math.min(o.bottom,l.bottom+k)-Math.max(o.top,l.top-k);p?z(t,a,p,o,l,c):m>=Math.min(c.height,u)+8?B(t,a,o,l,c):V(t,a,d.bottom>=d.top?`bottom`:`top`,o,l,c,d),t.scrollTop=s}function R(e,t){N??=CSS.supports(`corner-top-left-shape`,`squircle`);let n=getComputedStyle(t);for(let t of M)e.setProperty(`border-${t}-radius`,n.getPropertyValue(`border-${t}-radius`)),N&&e.setProperty(`corner-${t}-shape`,n.getPropertyValue(`corner-${t}-shape`))}function z(e,t,n,r,i,a){let o=n===`top`||n===`bottom`,s,c,l;if(o){let e=F(r.left,r.right,i.left,i.right);s=P(e-a.width/2,i.left,i.right-a.width),c=n===`bottom`?r.bottom+O:r.top-O-a.height,l=P(e-s,j,a.width-j)}else{let e=F(r.top,r.bottom,i.top,i.bottom);c=P(e-a.height/2,i.top,i.bottom-a.height),s=n===`right`?r.right+O:r.left-O-a.width,l=P(e-c,j,a.height-j)}e.dataset.placement=n,e.style.top=`${c}px`,e.style.left=`${s}px`,t.hidden=!1,t.style.left=o?`${l-e.clientLeft-t.offsetWidth/2}px`:``,t.style.top=o?``:`${l-e.clientTop-t.offsetHeight/2}px`}function B(e,t,n,r,i){let a=r.bottom-r.top;e.dataset.placement=`overlap`,t.hidden=!0,e.style.maxHeight=i.height>a?`${Math.max(a,0)}px`:``;let o=Math.min(n.bottom,r.bottom)-A;e.style.top=`${Math.max(r.top,o-Math.min(i.height,a))}px`,e.style.left=`${P(n.left+A,r.left,r.right-i.width)}px`}function V(e,t,n,r,i,a,o){let s=Math.max(o[n],0),c=Math.min(a.height,s);e.dataset.placement=n,t.hidden=!0,e.style.maxHeight=a.height>s?`${s}px`:``,e.style.top=`${n===`bottom`?r.bottom+O:r.top-O-c}px`;let l=F(r.left,r.right,i.left,i.right);e.style.left=`${P(l-a.width/2,i.left,i.right-a.width)}px`}function H(e){let t=e.parentElement,n=t?getComputedStyle(t):null,r=e=>Number.parseFloat(n?.[e])||0;return{top:r(`paddingTop`)+k,bottom:window.innerHeight-r(`paddingBottom`)-k,left:r(`paddingLeft`)+k,right:window.innerWidth-r(`paddingRight`)-k}}function U(e){let t=e.querySelector(`:scope > .wui-tour-arrow`);return t||(t=document.createElement(`span`),t.className=`wui-tour-arrow`,t.setAttribute(`aria-hidden`,`true`),t.hidden=!0,e.append(t)),t}var W=0;function ue(e,t,n){let r=`wui-tour-end-${++W}`,a=e.createElement(`div`);return a.className=`wui-tour-card wui-tour-end`,a.dataset.layout=`center`,a.setAttribute(`role`,`dialog`),n&&a.setAttribute(`aria-modal`,`true`),a.tabIndex=-1,a.setAttribute(`aria-labelledby`,`${r}-title`),a.setAttribute(`aria-describedby`,`${r}-message`),a.innerHTML=` <div class="wui-tour-end-mark" aria-hidden="true"><svg viewBox="0 0 24 24" focusable="false"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></div> <h2 class="wui-tour-title wui-tour-end-title" id="${r}-title"></h2> <p class="wui-tour-text wui-tour-end-message" id="${r}-message"></p> <div class="wui-tour-actions"><button type="button" class="${o(`primary`,`sm`)} wui-tour-end-button" data-wui="${i}"></button></div>`,a.querySelector(`.wui-tour-end-title`).textContent=t.title,a.querySelector(`.wui-tour-end-message`).textContent=t.message,a.querySelector(`.wui-tour-end-button`).textContent=t.button,a}function de(e,t,n){let r=e.ownerDocument,i=e.getRootNode()===r,a=e.querySelector(`.wui-tour-card:not(.wui-tour-end)`),o=e.querySelector(`.wui-tour-spot`),s=e.querySelector(`[role=status]`),c=ue(r,t,i),l=c.querySelector(`.wui-tour-end-button`),u=new AbortController;return new Promise(d=>{let f=()=>{u.abort(),d()};if(n?.aborted){f();return}let p={signal:u.signal};n?.addEventListener(`abort`,f,p),l.addEventListener(`click`,f,p),r.addEventListener(`keydown`,e=>{e.altKey||e.ctrlKey||e.metaKey||(e.key===`Escape`?(e.preventDefault(),e.stopPropagation(),f()):e.key===`Tab`&&i&&(e.preventDefault(),l.focus()))},{capture:!0,signal:u.signal}),i&&r.addEventListener(`focusin`,e=>{c.contains(e.target)||l.focus()},p);let m=()=>{u.signal.aborted||(a.hidden=!0,L(o,a,null),e.append(c),E(c),s.textContent=[t.title,t.message].filter(Boolean).join(`. `),l.focus())},h=D(a);h?h.then(m):m()})}var fe=` :host { all: initial; ${Object.entries({"--wui-z-tour":`1550`,"--wui-radius-sm":`8px`,"--wui-radius-lg":`14px`,"--wui-shadow-popover":`0px 8px 28px -6px rgba(7, 20, 55, 0.14)`,"--wui-ease-out":`cubic-bezier(0.22, 1, 0.36, 1)`,"--wui-tour-motion-duration":`200ms`,"--wui-tour-motion-ease":`cubic-bezier(0.22, 1, 0.36, 1)`,"--wui-tour-spot-duration":`240ms`,"--wui-tour-spot-ease":`cubic-bezier(0.32, 0.72, 0, 1)`,"--color-primary":`#4F46E5`,"--color-primary-hover":`#4338CA`,"--color-primary-text":`#4F46E5`,"--color-focus-ring":`#4F46E5`,"--wui-focus-ring-width":`2px`,"--wui-focus-ring-offset":`2px`,"--color-on-primary":`#FFFFFF`,"--color-success-soft":`#E8FAEE`,"--color-success-text":`#0e7531`,"--color-on-scrim":`#FFFFFF`,"--color-scrim-strong":`color-mix(in srgb, #071437 62%, transparent)`,"--color-surface":`#FFFFFF`,"--color-text":`#071437`,"--color-text-muted":`#4B5675`,"--color-border":`#EBEDF3`,"--color-bg-muted":`#F5F6FA`}).map(([e,t])=>`    ${e}: ${t};`).join(` `)} } *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .btn { display: inline-block; margin: 0; padding: 0.25rem 0.5rem; border: 1px solid transparent; border-radius: 0.375rem; background: transparent; font: inherit; font-size: 0.875rem; font-weight: 500; line-height: 1.5; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; } .btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); } .btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); } .btn-outline-neutral { border-color: var(--color-text-muted); color: var(--color-text-muted); } .btn-outline-neutral:hover { background: var(--color-bg-muted); color: var(--color-text); } .btn-link { font-weight: 400; color: var(--color-primary-text); text-decoration: underline; } .btn-link:hover { color: var(--color-primary-hover); } .wui-tour-layer { pointer-events: none; font-family: "Webority Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--color-text); text-align: start; } .wui-tour-card { pointer-events: auto; } .wui-tour-layer { position: fixed; inset: 0; z-index: var(--wui-z-tour); } .wui-tour-spot { position: fixed; box-shadow: 0 0 0 2px var(--color-primary), 0 0 0 100vmax var(--color-scrim-strong); pointer-events: none; } .wui-tour-card { display: flex; flex-direction: column; gap: 8px; width: min(360px, 100vw - 16px); padding: 16px; overflow-y: auto; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--wui-radius-lg); corner-shape: squircle; box-shadow: var(--wui-shadow-popover); } .wui-tour-card:focus { outline: none; } .wui-tour-card:focus-visible { outline: var(--wui-focus-ring-width) solid var(--color-focus-ring); outline-offset: var(--wui-focus-ring-offset); } .wui-tour-title { margin: 0; font-size: 16px; font-weight: 600; } .wui-tour-text { margin: 0; font-size: 14px; color: var(--color-text-muted); } .wui-tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; } .wui-tour-nav { display: flex; gap: 8px; } .wui-tour-skip { color: var(--color-text-muted); } .wui-tour-back, .wui-tour-next { min-width: 64px; } @keyframes wui-tour-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes wui-tour-card-enter { from { opacity: 0; scale: 0.96; translate: var(--wui-tour-card-lift, 0 6px); } to { opacity: 1; scale: 1; translate: 0 0; } } .wui-tour-layer[data-state=leaving], .wui-tour-card[data-state=leaving] { opacity: 0; } .wui-tour-layer[data-state=leaving], .wui-tour-layer[data-state=leaving] * { pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .wui-tour-layer { animation: wui-tour-fade-in var(--wui-tour-motion-duration) var(--wui-tour-motion-ease); } .wui-tour-layer[data-state=leaving] { transition: opacity var(--wui-tour-motion-duration) var(--wui-tour-motion-ease); } .wui-tour-spot { transition: top var(--wui-tour-spot-duration) var(--wui-tour-spot-ease), left var(--wui-tour-spot-duration) var(--wui-tour-spot-ease), width var(--wui-tour-spot-duration) var(--wui-tour-spot-ease), height var(--wui-tour-spot-duration) var(--wui-tour-spot-ease), border-radius var(--wui-tour-spot-duration) var(--wui-tour-spot-ease); } .wui-tour-spot[data-tracking] { transition: none; } .wui-tour-card { --wui-tour-card-lift: 0 6px; transform-origin: top center; } .wui-tour-card[data-placement=top] { --wui-tour-card-lift: 0 -6px; transform-origin: bottom center; } .wui-tour-card[data-placement=bottom] { --wui-tour-card-lift: 0 6px; transform-origin: top center; } .wui-tour-card[data-placement=left] { --wui-tour-card-lift: -6px 0; transform-origin: right center; } .wui-tour-card[data-placement=right] { --wui-tour-card-lift: 6px 0; transform-origin: left center; } .wui-tour-card[data-placement=overlap], .wui-tour-card[data-placement=center] { --wui-tour-card-lift: 0 0; transform-origin: center; } .wui-tour-card[data-state=entering] { animation: wui-tour-card-enter var(--wui-tour-motion-duration) var(--wui-tour-motion-ease) var(--wui-tour-card-delay, 0ms) both; } .wui-tour-card[data-state=leaving] { transition: opacity calc(var(--wui-tour-motion-duration) / 2) var(--wui-tour-motion-ease); } } @media (prefers-reduced-motion: reduce) { .wui-tour-layer { animation: wui-tour-fade-in 120ms linear; } .wui-tour-layer[data-state=leaving] { transition: opacity 120ms linear; } .wui-tour-card[data-state=entering] { animation: wui-tour-fade-in 120ms linear both; } } .wui-tour-progress-bar { display: flex; gap: 4px; } .wui-tour-progress-segment { flex: 1 1 0; height: 4px; border-radius: 999px; background: var(--color-border); } .wui-tour-progress-segment[data-filled] { background: var(--color-primary); } .wui-tour-position { margin: 0; font-size: 12px; color: var(--color-text-muted); } .wui-tour-layer { padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); } .wui-tour-card:has(.wui-tour-arrow:not([hidden])) { overflow: visible; } .wui-tour-arrow { position: absolute; width: 8px; height: 8px; background: var(--color-surface); border: 1px solid var(--color-border); rotate: 45deg; pointer-events: none; } .wui-tour-card[data-placement=bottom] .wui-tour-arrow { top: -5px; border-right-color: rgba(0, 0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0); } .wui-tour-card[data-placement=top] .wui-tour-arrow { bottom: -5px; border-top-color: rgba(0, 0, 0, 0); border-left-color: rgba(0, 0, 0, 0); } .wui-tour-card[data-placement=right] .wui-tour-arrow { left: -5px; border-top-color: rgba(0, 0, 0, 0); border-right-color: rgba(0, 0, 0, 0); } .wui-tour-card[data-placement=left] .wui-tour-arrow { right: -5px; border-bottom-color: rgba(0, 0, 0, 0); border-left-color: rgba(0, 0, 0, 0); } @media (max-width: 575.98px) { .wui-tour-card { width: calc(100vw - 16px); } .wui-tour-actions .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; } } .wui-tour-media { position: relative; order: -1; flex: none; aspect-ratio: 16/9; margin: -16px -16px 4px; overflow: hidden; background: var(--color-border); } .wui-tour-media>img, .wui-tour-media>video { display: block; width: 100%; height: 100%; object-fit: cover; } .wui-tour-card[data-media=welcome] { width: min(420px, 100vw - 16px); } .wui-tour-media-toggle { position: absolute; inset-block-end: 8px; inset-inline-end: 8px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--color-scrim-strong); color: var(--color-on-scrim); cursor: pointer; } .wui-tour-media-toggle>svg { width: 20px; height: 20px; fill: currentColor; } .wui-tour-media-toggle:focus-visible { outline: 2px solid var(--color-on-scrim); outline-offset: 2px; } .wui-tour-layer[data-advance] { pointer-events: none; } .wui-tour-layer[data-advance]:not([data-state=leaving]) .wui-tour-card { pointer-events: auto; } .wui-tour-layer[data-advance]:not([data-state=leaving]) .wui-tour-spot::before { content: ""; position: absolute; inset: -100vmax; pointer-events: auto; clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 100vmax 100vmax, calc(100% - 100vmax) 100vmax, calc(100% - 100vmax) calc(100% - 100vmax), 100vmax calc(100% - 100vmax), 100vmax 100vmax); } .wui-tour-hint { margin: 0; font-size: 14px; font-weight: 600; color: var(--color-text); } @keyframes wui-tour-pulse { from { box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 85%, transparent); } to { box-shadow: 0 0 0 14px color-mix(in srgb, var(--color-primary) 0%, transparent); } } @media (prefers-reduced-motion: no-preference) { .wui-tour-spot[data-advance]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; corner-shape: inherit; pointer-events: none; animation: wui-tour-pulse 600ms var(--wui-ease-out) var(--wui-tour-spot-duration); } } @keyframes wui-tour-check { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } } .wui-tour-end[data-layout=center] { --wui-tour-card-lift: 0 0; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); transform-origin: center; align-items: center; gap: 8px; width: min(420px, 100vw - 16px); max-height: calc(100vh - 16px); padding: 24px; text-align: center; } .wui-tour-end[data-layout=center] .wui-tour-actions { justify-content: center; margin-top: 8px; } .wui-tour-end-mark { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--color-success-soft); color: var(--color-success-text); } .wui-tour-end-mark>svg { width: 26px; height: 26px; } .wui-tour-end-mark path { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; } .wui-tour-end-title { font-size: 18px; } .wui-tour-end-message { text-wrap: balance; } .wui-tour-end-button { min-width: 120px; } @media (prefers-reduced-motion: no-preference) { .wui-tour-end-mark path { animation: wui-tour-check 300ms var(--wui-ease-out) calc(var(--wui-tour-card-delay, 0ms) + 120ms) both; } } `,G=`wui-tour-media`,pe=`wui-tour-media-toggle`,K=`http://www.w3.org/2000/svg`,me=`M6 5h4v14H6zM14 5h4v14h-4z`,he=`M8 5v14l11-7z`,ge={pause:`Pause animation`,play:`Play animation`},_e=()=>globalThis.matchMedia?.(`(prefers-reduced-motion: reduce)`)?.matches===!0;function ve(e){let t=document.createElementNS(K,`svg`);t.setAttribute(`viewBox`,`0 0 24 24`),t.setAttribute(`aria-hidden`,`true`),t.setAttribute(`focusable`,`false`);let n=document.createElementNS(K,`path`);return n.setAttribute(`d`,e),t.appendChild(n),t}function ye(e){let t=document.createElement(`img`);return t.setAttribute(`alt`,e.mediaAlt??``),t.setAttribute(`width`,`1280`),t.setAttribute(`height`,`720`),t.setAttribute(`loading`,`lazy`),t.setAttribute(`decoding`,`async`),t.setAttribute(`src`,e.media),t}function be(e,t){let n=document.createElement(`video`);return n.muted=!0,n.setAttribute(`muted`,``),n.loop=!0,n.setAttribute(`playsinline`,``),t&&n.setAttribute(`autoplay`,``),n.setAttribute(`preload`,t?`auto`:`metadata`),e.mediaAlt&&n.setAttribute(`aria-label`,e.mediaAlt),e.mediaPoster&&n.setAttribute(`poster`,e.mediaPoster),n.setAttribute(`src`,e.media),n}function xe(e,t){let n=document.createElement(`button`);n.type=`button`,n.className=pe;let r=(r=!e.paused)=>{n.setAttribute(`aria-label`,r?t.pause:t.play),n.replaceChildren(ve(r?me:he))};return e.addEventListener(`play`,()=>r()),e.addEventListener(`pause`,()=>r()),n.addEventListener(`click`,()=>{e.paused?e.play()?.catch(()=>r()):e.pause()}),r(e.hasAttribute(`autoplay`)),n}function Se(e){let t=e.querySelector(`:scope > .${G}`);if(!t)return;let n=t.querySelector(`video`);n&&(n.pause(),n.removeAttribute(`src`),n.load()),t.remove()}function Ce(e,t,n=ge){if(Se(e),!t.media){e.removeAttribute(`data-media`);return}let r=document.createElement(`div`);if(r.className=G,t.mediaType===`video`){let e=be(t,!_e());r.append(e,xe(e,n))}else r.appendChild(ye(t));e.prepend(r),e.setAttribute(`data-media`,t.target?`step`:`welcome`)}var q=`data-wui-tour-open`,we=`Step {current} of {total}`;function Te(e){let t=new Set;return{drop:e=>{t.add(e)},position:e=>{t.delete(e);let n=0;for(let r of t)r<e&&n++;return e+1-n},total:()=>e-t.size}}function Ee(e,t,n){return(e.getAttribute(`progress-label`)||we).replace(/\{(current|total)\}/g,(e,r)=>String(r===`current`?t:n))}function De(e,{text:t,position:n,total:r}){let i=e.querySelector(`.wui-tour-position`);i.textContent=t;let a=e.querySelector(`.wui-tour-progress-bar`);if(!a){let t=e.ownerDocument,n=t.createElement(`div`);n.className=`wui-tour-progress`,n.setAttribute(`aria-hidden`,`true`),a=t.createElement(`div`),a.className=`wui-tour-progress-bar`,n.append(a),i.before(n)}let o=a.children;for(;o.length<r;){let t=e.ownerDocument.createElement(`span`);t.className=`wui-tour-progress-segment`,a.append(t)}for(;o.length>r;)a.lastElementChild.remove();for(let e=0;e<o.length;e++)o[e].toggleAttribute(`data-filled`,e<n)}var Oe=`wui-tour-step`,ke=`wui-tour-host`,Ae=`wui-tour-seen:`,J=`data-tracking`,je={back:`Back`,next:`Next`,skip:`Skip`,done:`Done`,mediaPause:`Pause animation`,mediaPlay:`Play animation`,endTitle:`You're all set`,endMessage:`You know your way around now. Enjoy exploring.`,endButton:`Done`},Y={back:`back-label`,next:`next-label`,skip:`skip-label`,done:`done-label`,mediaPause:`media-pause-label`,mediaPlay:`media-play-label`,endTitle:`end-title`,endMessage:`end-message`,endButton:`end-button`},Me=[[`media`,`media`],[`mediaAlt`,`media-alt`],[`mediaPoster`,`media-poster`],[`mediaType`,`media-type`],[`advanceOn`,`advance-on`],[`actionLabel`,`action-label`]],X={index:null,position:null,total:null},Ne=0;function Pe(e=Ae,t=globalThis.localStorage){return{isSeen:async n=>t.getItem(e+n)===`1`,markSeen:async n=>{t.setItem(e+n,`1`)}}}var Z=e=>!e?.isConnected||getComputedStyle(e).visibility===`hidden`?!1:e.getClientRects().length>0,Q=e=>!!e&&(e.isContentEditable||/^(INPUT|TEXTAREA|SELECT)$/.test(e.tagName)),Fe=()=>{let e=document.activeElement;for(;e?.shadowRoot?.activeElement;)e=e.shadowRoot.activeElement;return e},$=null;function Ie(e){$||($=new CSSStyleSheet,$.replaceSync(fe)),e.adoptedStyleSheets=[$]}var Le=class extends t{static get observedAttributes(){return[`open`]}constructor(){super(),this.seenStore=null,this.onBeforeStep=null,this._run=0,this._running=!1,this._layer=null,this._outer=null,this._shadow=null,this._unbindAdvance=null,this._ending=null,this._seenMark=null}connectedCallback(){this.hasAttribute(`open`)&&this.start()}disconnectedCallback(){this.stop()}attributeChangedCallback(e,t,n){e===`open`&&this.isConnected&&(n===null?this.stop():this.start())}get tourId(){return this.getAttribute(`tour-id`)||``}set tourId(e){e==null||e===``?this.removeAttribute(`tour-id`):this.setAttribute(`tour-id`,String(e))}get isolated(){return this.hasAttribute(`isolated`)}set isolated(e){this.toggleAttribute(`isolated`,e===!0||e===``||e===`true`)}_stepList(){return Array.from(this.querySelectorAll(`:scope > ${Oe}`),e=>{let t={target:e.getAttribute(`target`)||``,title:e.getAttribute(`title`)||void 0,description:e.textContent.trim()};for(let[n,r]of Me)e.hasAttribute(r)&&(t[n]=e.getAttribute(r));return t})}_store(){return this.seenStore?this.seenStore:this.getAttribute(`seen-store`)===`local`?Pe():globalThis.window?.WUI?.tour?.seenStore||null}_label(e){return this.getAttribute(Y[e])||je[e]}_endDialogText(){return this.getAttribute(`end-dialog`)===`false`?null:{title:this._label(`endTitle`),message:this._label(`endMessage`),button:this._label(`endButton`)}}_markSeen(e){let t=this._store();return t?t.markSeen(this.tourId,e):null}async start(){if(this._running)return;this._running=!0;let e=++this._run;this.hasAttribute(`open`)||this.setAttribute(`open`,``);try{await this._start(e)}catch(t){throw e===this._run&&(this._running=!1),t}}async _start(e){this._steps=this._stepList(),this._progress=Te(this._steps.length);let t=this._store();if(t&&!this.tourId)throw Error(`<wui-tour> needs a tour-id to use a seen store.`);if(t&&await t.isSeen(this.tourId)){e===this._run&&this._finish(`alreadySeen`);return}for(let[e,t]of this._steps.entries())t.target&&!Z(document.querySelector(t.target))&&this._progress.drop(e);this._returnFocus=document.activeElement;let n=await this._locate(0,1,e);e===this._run&&(n?(this._firstIndex=n.index,this.dispatchEvent(new CustomEvent(`wui-tour:start`,{bubbles:!0,detail:{total:this._progress.total()}})),e===this._run&&(this._build(),this._show(n))):this._finish(`noTargets`))}next(){return this._move(1)}back(){return!this._current||this._current.index<=this._firstIndex?Promise.resolve():this._move(-1)}async goTo(e){if(this._current){if(!Number.isInteger(e)||e<0||e>=this._steps.length)throw RangeError(`<wui-tour> has no step ${e}; it has ${this._steps.length}.`);await this._go(e,1)}}stop(){this._running&&(this._run++,this._teardown(),this._running=!1,this.hasAttribute(`open`)&&this.removeAttribute(`open`))}async _locate(e,t,n){let r=this._steps;for(let i=e;i>=0&&i<r.length;i+=t){let e=r[i];if(await this._beforeStep(e,i),n!==this._run)return null;if(!e.target)return{index:i,target:null};let t=document.querySelector(e.target);if(Z(t))return this._progress.position(i),{index:i,target:t};this._progress.drop(i)}return null}async _beforeStep(e,t){let n=[];this.dispatchEvent(new CustomEvent(`wui-tour:beforestep`,{bubbles:!0,detail:{step:e,index:t,wait:e=>n.push(e)}})),await Promise.all(n),typeof this.onBeforeStep==`function`&&await this.onBeforeStep(e,t)}_build(){let e=`wui-tour-${++Ne}`,t=document.createElement(`div`);t.className=`wui-tour-layer`,t.innerHTML=` <div class="wui-tour-spot" aria-hidden="true"></div> <div class="wui-tour-card" role="dialog" aria-modal="true" tabindex="-1" aria-labelledby="${e}-title" aria-describedby="${e}-text"> <p class="wui-tour-position"></p> <h2 class="wui-tour-title" id="${e}-title"></h2> <p class="wui-tour-text" id="${e}-text"></p> <div class="wui-tour-actions"> <button type="button" class="btn btn-sm btn-link wui-tour-skip"></button> <div class="wui-tour-nav"> <button type="button" class="${o(`outline-secondary`,`sm`)} wui-tour-back" data-wui="${i}"></button> <button type="button" class="${o(`primary`,`sm`)} wui-tour-next" data-wui="${i}"></button> </div> </div> </div> <div class="visually-hidden" role="status" aria-live="polite"></div>`;let r=t;this._shadow=null,this.isolated&&(r=document.createElement(ke),this._shadow=r.attachShadow({mode:`open`}),Ie(this._shadow),this._shadow.appendChild(t)),document.body.appendChild(r),document.documentElement.setAttribute(q,``),this._outer=r,this._layer=t,this._spot=t.querySelector(`.wui-tour-spot`),this._card=t.querySelector(`.wui-tour-card`),this._live=t.querySelector(`[role=status]`),this._card.querySelector(`.wui-tour-skip`).addEventListener(`click`,()=>this._close(`skipped`,`button`)),this._card.querySelector(`.wui-tour-back`).addEventListener(`click`,()=>this._move(-1)),this._card.querySelector(`.wui-tour-next`).addEventListener(`click`,()=>this._move(1)),this._shadow&&this._card.removeAttribute(`aria-modal`),this._onKey=e=>this._key(e),this._onFocusIn=e=>{if(!this._layer||this._ending)return;let t=this._current,n=t?this._steps[t.index]:null;_(this._layer,n,t?.target??null,e.target)||this._card.focus()},document.addEventListener(`keydown`,this._onKey,!0),this._shadow||document.addEventListener(`focusin`,this._onFocusIn),n(r,()=>this._follow())}_active(){return this._shadow?this._shadow.activeElement:document.activeElement}_show(e){this._current=e;let{index:t,target:n}=e,r=this._steps[t],i=this._card,a=this._progress.position(t),o=this._progress.total(),s=a===o&&!this._endDialogText(),c=Ee(this,a,o);De(i,{text:c,position:a,total:o}),Ce(i,r,{pause:this._label(`mediaPause`),play:this._label(`mediaPlay`)});let l=g(this,{layer:this._layer,spot:this._spot,card:i},r,n),u=i.querySelector(`.wui-tour-title`);u.textContent=r.title||``,u.hidden=!r.title,i.querySelector(`.wui-tour-text`).textContent=r.description||``,i.querySelector(`.wui-tour-skip`).textContent=this._label(`skip`),i.querySelector(`.wui-tour-back`).textContent=this._label(`back`),i.querySelector(`.wui-tour-back`).hidden=t<=this._firstIndex,i.querySelector(`.wui-tour-next`).textContent=this._label(s?`done`:`next`);let d=[c,r.title,r.description].filter(Boolean).join(`. `);this._live.textContent=l?[d,l].join(/[.!?]$/.test(d)?` `:`. `):d,I(i,n),this._spot.removeAttribute(J),this._place(),E(i),this._unbindAdvance?.(),this._unbindAdvance=ne(r,n,()=>this._move(1));let f=this._active();(i.contains(f)?!f.hidden:this._shadow!==null&&Q(Fe()))||i.focus(),this.dispatchEvent(new CustomEvent(`wui-tour:step`,{bubbles:!0,detail:{step:r,index:t,position:a,total:o}}))}_place(){this._current&&this._layer&&L(this._spot,this._card,this._current.target)}_follow(){if(!this._current||!this._layer||this._ending)return;let e=this._spot.style.cssText;this._place(),this._spot.style.cssText!==e&&this._spot.setAttribute(J,``)}async _move(e){this._current&&await this._go(this._current.index+e,e)}async _go(e,t){if(!this._current||this._moving)return;this._moving=!0;let n=this._run;try{let r=await this._locate(e,t,n);if(n!==this._run)return;if(r){let e=D(this._card);if(e&&await e,n!==this._run)return;this._show(r)}else if(t>0){let e=this._endDialogText();if(e&&await this._showEnd(e),n!==this._run)return;await this._close(`finished`)}}finally{this._moving=!1}}_showEnd(e){return this._unbindAdvance?.(),this._unbindAdvance=null,g(this,{layer:this._layer,spot:this._spot,card:this._card},null,null),this._spot.removeAttribute(J),this._ending=new AbortController,this._seenMark=this._markSeen(`finished`),de(this._layer,e,this._ending.signal)}_key(e){if(!(!this._layer||this._ending||e.altKey||e.ctrlKey||e.metaKey)){if(e.key===`Escape`)e.preventDefault(),e.stopPropagation(),this._close(`skipped`,`escape`);else if(e.key===`ArrowRight`||e.key===`ArrowLeft`){if(Q(e.composedPath?.()[0]??e.target))return;e.preventDefault(),e.key===`ArrowRight`?this._move(1):this._current.index>this._firstIndex&&this._move(-1)}else if(e.key===`Tab`&&!this._shadow){let{index:t,target:n}=this._current;v(e,{card:this._card,active:this._active(),step:this._steps[t],target:n})}}}_teardown(){if(!this._layer)return;document.removeEventListener(`keydown`,this._onKey,!0),document.removeEventListener(`focusin`,this._onFocusIn);let e=!this._shadow||this._shadow.activeElement!==null||!document.activeElement||document.activeElement===document.body;this._unbindAdvance?.(),this._unbindAdvance=null,this._ending?.abort(),this._ending=null,this._seenMark=null,r(this._outer),oe(this._outer),document.documentElement.removeAttribute(q),this._outer=null,this._shadow=null,this._layer=null,this._current=null;let t=this._returnFocus;this._returnFocus=null,e&&t?.isConnected&&t.focus?.()}async _close(e,t=null){let n=this._run,r=this._current,i=r?{index:r.index,position:this._progress.position(r.index),total:this._progress.total()}:X,a=this._seenMark;this._teardown();try{n===this._run&&await(a??this._markSeen(e))}finally{this._finish(e,i,t)}}_finish(e,t=X,n=null){this._run++,this._running=!1,this.hasAttribute(`open`)&&this.removeAttribute(`open`),this.dispatchEvent(new CustomEvent(`wui-tour:close`,{bubbles:!0,detail:{reason:e,...t,via:n}}))}},Re=class extends t{constructor(){super(),this.shadowRoot||this.attachShadow({mode:`open`})}};e(`wui-tour`,Le),e(`wui-tour-step`,Re)})();
+(function(){function e(e,t){if(typeof customElements>`u`||customElements.get(e))return;let n=[];if(typeof document<`u`)for(let r of document.querySelectorAll(e))for(let e of Object.keys(r)){let i=Object.getOwnPropertyDescriptor(t.prototype,e);i&&(i.set||i.get)&&(n.push([r,e,r[e]]),delete r[e])}customElements.define(e,t);for(let[e,t,r]of n)e[t]=r}var t=typeof HTMLElement>`u`?class{}:HTMLElement;function n(e,t){r(e),e._reanchor=t,e._reanchorScroll=n=>{n.target instanceof Node&&typeof e.contains==`function`&&e.contains(n.target)||t()},window.addEventListener(`resize`,e._reanchor),window.addEventListener(`scroll`,e._reanchorScroll,!0)}function r(e){e?._reanchor&&(window.removeEventListener(`resize`,e._reanchor),window.removeEventListener(`scroll`,e._reanchorScroll,!0),e._reanchor=null,e._reanchorScroll=null)}var i=`AppButton`,a={primary:`btn-primary`,soft:`btn-soft-primary`,outline:`btn-outline-primary`,ghost:`btn-ghost-primary`,text:`btn-link-primary`,danger:`btn-danger`,success:`btn-success`,"outline-danger":`btn-outline-danger`,light:`btn-neutral`,warning:`btn-warning`,neutral:`btn-soft-neutral`,"outline-light":`btn-glass`,"outline-secondary":`btn-outline-neutral`};function o(e=`primary`,t=`md`){let n=a[e];if(!n)throw Error(`buttonClass: unknown variant "${e}"`);return t===`md`?`btn ${n}`:`btn ${n} btn-${t}`}var s=`data-advance`,c=`wui-tour-hint`,l=`wui-tour-pointer`,u=`Click {actionName} to continue.`,d=`a[href], button, input, select, textarea, summary, [tabindex], [contenteditable]`,f=(e,t)=>e?.advanceOn===`click`&&!!t,p=e=>(e??``).replace(/\s+/g,` `).trim();function m(e){let t=e.ownerDocument,n=(e.getAttribute(`aria-labelledby`)||``).split(/\s+/).filter(Boolean),r=e.tagName===`INPUT`&&/^(button|submit|reset)$/.test(e.type)?e.value:``,i=[n.map(e=>t.getElementById(e)?.textContent??``).join(` `),e.getAttribute(`aria-label`),Array.from(e.labels??[],e=>e.textContent).join(` `),e.getAttribute(`alt`),r,e.textContent,e.getAttribute(`title`)];for(let e of i){let t=p(e);if(t)return t}return``}function h(e){for(let t of[e,...e.querySelectorAll(d)])if(t.tabIndex>=0&&!t.disabled)return t;return null}function g(e,t,n){let r=(e.getAttribute(`aria-describedby`)||``).split(/\s+/).filter(e=>e&&e!==t);n&&r.push(t),r.length>0?e.setAttribute(`aria-describedby`,r.join(` `)):e.removeAttribute(`aria-describedby`)}function _(e,t){let n=e.querySelector(`.${c}`),r=e.querySelector(`.wui-tour-text`)?.id,i=r?`${r.replace(/-text$/,``)}-hint`:``;t?(n||(n=e.ownerDocument.createElement(`p`),n.className=c,i&&(n.id=i),e.querySelector(`.wui-tour-actions`).before(n)),n.textContent=t,i&&g(e,i,!0)):(n?.remove(),i&&g(e,i,!1))}function ee(e,t){let n=e.querySelector(`.${l}`);if(!t){n?.remove();return}if(n)return;let r=e.ownerDocument.createElement(`span`);r.className=l,r.setAttribute(`aria-hidden`,`true`),e.append(r)}var te=e=>getComputedStyle(e).animationName;function v(e,{layer:t,spot:n,card:r},i,a){let o=f(i,a);t.toggleAttribute(s,o&&!(t.getRootNode()instanceof ShadowRoot)),n.hasAttribute(s)&&(n.removeAttribute(s),o&&te(n)),o&&n.setAttribute(s,``),ee(n,o);let c=r.querySelector(`.wui-tour-next`);c.classList.toggle(`btn-primary`,!o),c.classList.toggle(`btn-link`,o);let l=o?p(i.actionLabel)||m(a):``,d=e.getAttribute(`advance-label`)||u,h=l?d.replace(/\{actionName\}/g,()=>l):``;return _(r,h),h}function ne(e,t,n){if(!f(e,t))return()=>{};let r=null,i=()=>{r??=setTimeout(n,0)};return t.addEventListener(`click`,i),()=>{t.removeEventListener(`click`,i),clearTimeout(r)}}function y(e,t,n,r){return e.contains(r)||f(t,n)&&n.contains(r)}function b(e,{card:t,active:n,step:r,target:i}){let a=Array.from(t.querySelectorAll(`button`)).filter(e=>!e.hidden),o=f(r,i)?h(i):null;o&&a.push(o);let s=a.findIndex(e=>e===n||e===o&&i.contains(n));e.preventDefault(),a[s===-1?e.shiftKey?a.length-1:0:(s+(e.shiftKey?-1:1)+a.length)%a.length].focus()}var re=2/3,ie=1e3,ae=new Set([`top`,`left`,`width`,`height`]),x=new WeakMap,S=(e,t)=>typeof e.getAnimations==`function`?e.getAnimations().filter(t):[],C=e=>e.transitionProperty===`opacity`,w=e=>ae.has(e.transitionProperty),T=e=>typeof e.animationName==`string`&&e.animationName.startsWith(`wui-tour-`);function E(e){return e.length===0?null:new Promise(t=>{let n=setTimeout(t,ie);Promise.allSettled(e.map(e=>e.finished)).then(()=>{clearTimeout(n),t()})})}function D(e){let t=e.parentElement?.querySelector(`:scope > .wui-tour-spot`),n=0;for(let e of t?S(t,w):[]){let t=e.effect?.getComputedTiming?.();if(typeof t?.duration!=`number`)continue;let r=typeof e.currentTime==`number`?e.currentTime:0;n=Math.max(n,(t.delay??0)+t.duration*re-r)}return n}function O(e){let t=D(e);t>0?e.style.setProperty(`--wui-tour-card-delay`,`${Math.round(t)}ms`):e.style.removeProperty(`--wui-tour-card-delay`),e.dataset.state=`entering`;let n={};x.set(e,n);let r=()=>{x.get(e)===n&&e.dataset.state===`entering`&&(e.dataset.state=`shown`)},i=S(e,T);i.length===0?r():Promise.allSettled(i.map(e=>e.finished)).then(r)}function k(e){return e.dataset.state=`leaving`,E(S(e,C))}function oe(e){let t=e.classList.contains(`wui-tour-layer`)?e:e.shadowRoot?.querySelector(`.wui-tour-layer`);t&&(t.dataset.state=`leaving`);let n=t?E(S(t,C)):null;n?(e.setAttribute(`inert`,``),n.then(()=>e.remove())):e.remove()}var se=2,A=12,j=8,M=4,N=20,ce=`(max-width: 575.98px)`,le=[`bottom`,`top`,`right`,`left`],P=[`top-left`,`top-right`,`bottom-right`,`bottom-left`],F,I=(e,t,n)=>Math.max(t,Math.min(e,n)),L=(e,t,n,r)=>(Math.max(e,n)+Math.min(t,r))/2;function R(e,t){if(!t?.scrollIntoView)return;e.style.maxHeight=``;let n=W(e),r=e.offsetHeight+A;if(t.getBoundingClientRect().height+4+r*2<=n.bottom-n.top){t.scrollIntoView({block:`center`,inline:`nearest`});return}let i=t.style.scrollMarginTop;t.style.scrollMarginTop=`${n.top+r+se}px`,t.scrollIntoView({block:`start`,inline:`nearest`}),t.style.scrollMarginTop=i}function z(e,t,n){let r=e.style,i=t.style,a=ue(t);if(!n){r.top=`50%`,r.left=`50%`,r.width=`0px`,r.height=`0px`,r.boxShadow=`0 0 0 100vmax var(--color-scrim-strong)`;for(let e of P)r.removeProperty(`border-${e}-radius`),r.removeProperty(`corner-${e}-shape`);t.dataset.placement=`center`,a.hidden=!0,i.position=`fixed`,i.top=`50%`,i.left=`50%`,i.transform=`translate(-50%, -50%)`,i.maxHeight=`calc(100vh - 16px)`;return}r.boxShadow=``,i.transform=``,i.position=`fixed`;let o=n.getBoundingClientRect();r.top=`${o.top}px`,r.left=`${o.left}px`,r.width=`${o.width}px`,r.height=`${o.height}px`,B(r,n);let s=t.scrollTop;i.maxHeight=``;let c={width:t.offsetWidth,height:t.offsetHeight},l=W(t),u=l.bottom-l.top,d={bottom:l.bottom-o.bottom-A,top:o.top-A-l.top,right:l.right-o.right-A,left:o.left-A-l.left},f=window.matchMedia(ce).matches,p=le.find(e=>e===`top`||e===`bottom`?c.height<=d[e]+1:!f&&c.width<=d[e]+1&&c.height<=u+1),m=Math.min(o.bottom,l.bottom+j)-Math.max(o.top,l.top-j);p?V(t,a,p,o,l,c):m>=Math.min(c.height,u)+8?H(t,a,o,l,c):U(t,a,d.bottom>=d.top?`bottom`:`top`,o,l,c,d),t.scrollTop=s}function B(e,t){F??=CSS.supports(`corner-top-left-shape`,`squircle`);let n=getComputedStyle(t);for(let t of P)e.setProperty(`border-${t}-radius`,n.getPropertyValue(`border-${t}-radius`)),F&&e.setProperty(`corner-${t}-shape`,n.getPropertyValue(`corner-${t}-shape`))}function V(e,t,n,r,i,a){let o=n===`top`||n===`bottom`,s,c,l;if(o){let e=L(r.left,r.right,i.left,i.right);s=I(e-a.width/2,i.left,i.right-a.width),c=n===`bottom`?r.bottom+A:r.top-A-a.height,l=I(e-s,N,a.width-N)}else{let e=L(r.top,r.bottom,i.top,i.bottom);c=I(e-a.height/2,i.top,i.bottom-a.height),s=n===`right`?r.right+A:r.left-A-a.width,l=I(e-c,N,a.height-N)}e.dataset.placement=n,e.style.top=`${c}px`,e.style.left=`${s}px`,t.hidden=!1,t.style.left=o?`${l-e.clientLeft-t.offsetWidth/2}px`:``,t.style.top=o?``:`${l-e.clientTop-t.offsetHeight/2}px`}function H(e,t,n,r,i){let a=r.bottom-r.top;e.dataset.placement=`overlap`,t.hidden=!0,e.style.maxHeight=i.height>a?`${Math.max(a,0)}px`:``;let o=Math.min(n.bottom,r.bottom)-M;e.style.top=`${Math.max(r.top,o-Math.min(i.height,a))}px`,e.style.left=`${I(n.left+M,r.left,r.right-i.width)}px`}function U(e,t,n,r,i,a,o){let s=Math.max(o[n],0),c=Math.min(a.height,s);e.dataset.placement=n,t.hidden=!0,e.style.maxHeight=a.height>s?`${s}px`:``,e.style.top=`${n===`bottom`?r.bottom+A:r.top-A-c}px`;let l=L(r.left,r.right,i.left,i.right);e.style.left=`${I(l-a.width/2,i.left,i.right-a.width)}px`}function W(e){let t=e.parentElement,n=t?getComputedStyle(t):null,r=e=>Number.parseFloat(n?.[e])||0;return{top:r(`paddingTop`)+j,bottom:window.innerHeight-r(`paddingBottom`)-j,left:r(`paddingLeft`)+j,right:window.innerWidth-r(`paddingRight`)-j}}function ue(e){let t=e.querySelector(`:scope > .wui-tour-arrow`);return t||(t=document.createElement(`span`),t.className=`wui-tour-arrow`,t.setAttribute(`aria-hidden`,`true`),t.hidden=!0,e.append(t)),t}var de=0,fe=`btn btn-sm btn-link`;function pe(e,t,n){let r=`wui-tour-end-${++de}`,a=!!(t.nextLabel&&t.nextHref),s=e.createElement(`div`);if(s.className=`wui-tour-card wui-tour-end`,s.dataset.layout=`center`,a&&(s.dataset.next=``),s.setAttribute(`role`,`dialog`),n&&s.setAttribute(`aria-modal`,`true`),s.tabIndex=-1,s.setAttribute(`aria-labelledby`,`${r}-title`),s.setAttribute(`aria-describedby`,`${r}-message`),s.innerHTML=` <div class="wui-tour-end-mark" aria-hidden="true"><svg viewBox="0 0 24 24" focusable="false"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></div> <h2 class="wui-tour-title wui-tour-end-title" id="${r}-title"></h2> <p class="wui-tour-text wui-tour-end-message" id="${r}-message"></p> <div class="wui-tour-actions">${a?`<a class="${o(`primary`,`sm`)} wui-tour-end-next" data-wui="${i}"></a>`:``}<button type="button" class="${a?fe:o(`primary`,`sm`)} wui-tour-end-button" data-wui="${i}"></button></div>`,s.querySelector(`.wui-tour-end-title`).textContent=t.title,s.querySelector(`.wui-tour-end-message`).textContent=t.message,s.querySelector(`.wui-tour-end-button`).textContent=t.button,a){let e=s.querySelector(`.wui-tour-end-next`);e.textContent=t.nextLabel,e.setAttribute(`href`,t.nextHref)}return s}var me=e=>e.button===0&&!e.ctrlKey&&!e.metaKey&&!e.shiftKey&&!e.altKey;function he(e,t,n){let r=e.ownerDocument,i=e.getRootNode()===r,a=e.querySelector(`.wui-tour-card:not(.wui-tour-end)`),o=e.querySelector(`.wui-tour-spot`),s=e.querySelector(`[role=status]`),c=pe(r,t,i),l=c.querySelector(`.wui-tour-end-button`),u=c.querySelector(`.wui-tour-end-next`),d=u?[u,l]:[l],f=new AbortController;return new Promise(p=>{let m=e=>{f.abort(),p(e)};if(n?.aborted){m(`done`);return}let h={signal:f.signal};n?.addEventListener(`abort`,()=>m(`done`),h),l.addEventListener(`click`,()=>m(`done`),h),u&&u.addEventListener(`click`,e=>{me(e)&&(e.preventDefault(),m(`next`))},h),r.addEventListener(`keydown`,e=>{if(!(e.altKey||e.ctrlKey||e.metaKey)){if(e.key===`Escape`)e.preventDefault(),e.stopPropagation(),m(`done`);else if(e.key===`Enter`&&u&&!e.shiftKey&&(e.composedPath?.()[0]??e.target)===u)e.preventDefault(),m(`next`);else if(e.key===`Tab`&&i){e.preventDefault();let t=d.indexOf(r.activeElement),n=t===-1?e.shiftKey?d.length-1:0:(t+(e.shiftKey?-1:1)+d.length)%d.length;d[n].focus()}}},{capture:!0,signal:f.signal}),i&&r.addEventListener(`focusin`,e=>{c.contains(e.target)||d[0].focus()},h);let g=()=>{f.signal.aborted||(a.hidden=!0,z(o,a,null),e.append(c),O(c),s.textContent=[t.title,t.message].filter(Boolean).join(`. `),d[0].focus())},_=k(a);_?_.then(g):g()})}var ge=` :host { all: initial; ${Object.entries({"--wui-z-tour":`1550`,"--wui-radius-sm":`8px`,"--wui-radius-lg":`14px`,"--wui-shadow-popover":`0px 8px 28px -6px rgba(7, 20, 55, 0.14)`,"--wui-ease-out":`cubic-bezier(0.22, 1, 0.36, 1)`,"--wui-tour-motion-duration":`200ms`,"--wui-tour-motion-ease":`cubic-bezier(0.22, 1, 0.36, 1)`,"--wui-tour-spot-duration":`240ms`,"--wui-tour-spot-ease":`cubic-bezier(0.32, 0.72, 0, 1)`,"--color-primary":`#4F46E5`,"--color-primary-hover":`#4338CA`,"--color-primary-text":`#4F46E5`,"--color-focus-ring":`#4F46E5`,"--wui-focus-ring-width":`2px`,"--wui-focus-ring-offset":`2px`,"--color-on-primary":`#FFFFFF`,"--color-success-soft":`#E8FAEE`,"--color-success-text":`#0e7531`,"--color-on-scrim":`#FFFFFF`,"--color-scrim-strong":`color-mix(in srgb, #071437 62%, transparent)`,"--color-surface":`#FFFFFF`,"--color-text":`#071437`,"--color-text-muted":`#4B5675`,"--color-border":`#EBEDF3`,"--color-bg-muted":`#F5F6FA`}).map(([e,t])=>`    ${e}: ${t};`).join(` `)} } *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .btn { display: inline-block; margin: 0; padding: 0.25rem 0.5rem; border: 1px solid transparent; border-radius: 0.375rem; background: transparent; font: inherit; font-size: 0.875rem; font-weight: 500; line-height: 1.5; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; } .btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); } .btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); } .btn-outline-neutral { border-color: var(--color-text-muted); color: var(--color-text-muted); } .btn-outline-neutral:hover { background: var(--color-bg-muted); color: var(--color-text); } .btn-link { font-weight: 400; color: var(--color-primary-text); text-decoration: underline; } .btn-link:hover { color: var(--color-primary-hover); } .wui-tour-layer { pointer-events: none; font-family: "Webority Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--color-text); text-align: start; } .wui-tour-card { pointer-events: auto; } .wui-tour-layer { position: fixed; inset: 0; z-index: var(--wui-z-tour); } .wui-tour-spot { position: fixed; box-shadow: 0 0 0 2px var(--color-primary), 0 0 4px 2px color-mix(in srgb, var(--color-primary) 30%, transparent), 0 0 0 100vmax var(--color-scrim-strong); pointer-events: none; } .wui-tour-card { display: flex; flex-direction: column; gap: 8px; width: min(360px, 100vw - 16px); padding: 16px; overflow-y: auto; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--wui-radius-lg); corner-shape: squircle; box-shadow: var(--wui-shadow-popover); } .wui-tour-card:focus { outline: none; } .wui-tour-card:focus-visible { outline: var(--wui-focus-ring-width) solid var(--color-focus-ring); outline-offset: var(--wui-focus-ring-offset); } .wui-tour-title { margin: 0; font-size: 16px; font-weight: 600; } .wui-tour-text { margin: 0; font-size: 14px; color: var(--color-text-muted); } .wui-tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; } .wui-tour-nav { display: flex; gap: 8px; } .wui-tour-skip { color: var(--color-text-muted); } .wui-tour-back, .wui-tour-next { min-width: 64px; } @keyframes wui-tour-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes wui-tour-card-enter { from { opacity: 0; scale: 0.96; translate: var(--wui-tour-card-lift, 0 6px); } to { opacity: 1; scale: 1; translate: 0 0; } } .wui-tour-layer[data-state=leaving], .wui-tour-card[data-state=leaving] { opacity: 0; } .wui-tour-layer[data-state=leaving], .wui-tour-layer[data-state=leaving] * { pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .wui-tour-layer { animation: wui-tour-fade-in var(--wui-tour-motion-duration) var(--wui-tour-motion-ease); } .wui-tour-layer[data-state=leaving] { transition: opacity var(--wui-tour-motion-duration) var(--wui-tour-motion-ease); } .wui-tour-spot { transition: top var(--wui-tour-spot-duration) var(--wui-tour-spot-ease), left var(--wui-tour-spot-duration) var(--wui-tour-spot-ease), width var(--wui-tour-spot-duration) var(--wui-tour-spot-ease), height var(--wui-tour-spot-duration) var(--wui-tour-spot-ease), border-radius var(--wui-tour-spot-duration) var(--wui-tour-spot-ease); } .wui-tour-spot[data-tracking] { transition: none; } .wui-tour-card { --wui-tour-card-lift: 0 6px; transform-origin: top center; } .wui-tour-card[data-placement=top] { --wui-tour-card-lift: 0 -6px; transform-origin: bottom center; } .wui-tour-card[data-placement=bottom] { --wui-tour-card-lift: 0 6px; transform-origin: top center; } .wui-tour-card[data-placement=left] { --wui-tour-card-lift: -6px 0; transform-origin: right center; } .wui-tour-card[data-placement=right] { --wui-tour-card-lift: 6px 0; transform-origin: left center; } .wui-tour-card[data-placement=overlap], .wui-tour-card[data-placement=center] { --wui-tour-card-lift: 0 0; transform-origin: center; } .wui-tour-card[data-state=entering] { animation: wui-tour-card-enter var(--wui-tour-motion-duration) var(--wui-tour-motion-ease) var(--wui-tour-card-delay, 0ms) both; } .wui-tour-card[data-state=leaving] { transition: opacity calc(var(--wui-tour-motion-duration) / 2) var(--wui-tour-motion-ease); } } @media (prefers-reduced-motion: reduce) { .wui-tour-layer { animation: wui-tour-fade-in 120ms linear; } .wui-tour-layer[data-state=leaving] { transition: opacity 120ms linear; } .wui-tour-card[data-state=entering] { animation: wui-tour-fade-in 120ms linear both; } } .wui-tour-progress-bar { display: flex; gap: 4px; } .wui-tour-progress-segment { flex: 1 1 0; height: 4px; border-radius: 999px; background: var(--color-border); } .wui-tour-progress-segment[data-filled] { background: var(--color-primary); } .wui-tour-position { margin: 0; font-size: 12px; color: var(--color-text-muted); } .wui-tour-layer { padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); } .wui-tour-card:has(.wui-tour-arrow:not([hidden])) { overflow: visible; } .wui-tour-arrow { position: absolute; width: 8px; height: 8px; background: var(--color-surface); border: 1px solid var(--color-border); rotate: 45deg; pointer-events: none; } .wui-tour-card[data-placement=bottom] .wui-tour-arrow { top: -5px; border-right-color: rgba(0, 0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0); } .wui-tour-card[data-placement=top] .wui-tour-arrow { bottom: -5px; border-top-color: rgba(0, 0, 0, 0); border-left-color: rgba(0, 0, 0, 0); } .wui-tour-card[data-placement=right] .wui-tour-arrow { left: -5px; border-top-color: rgba(0, 0, 0, 0); border-right-color: rgba(0, 0, 0, 0); } .wui-tour-card[data-placement=left] .wui-tour-arrow { right: -5px; border-bottom-color: rgba(0, 0, 0, 0); border-left-color: rgba(0, 0, 0, 0); } @media (max-width: 575.98px) { .wui-tour-card { width: calc(100vw - 16px); } .wui-tour-actions .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; } } .wui-tour-media { position: relative; order: -1; flex: none; aspect-ratio: 16/9; margin: -16px -16px 4px; overflow: hidden; background: var(--color-border); } .wui-tour-media>img, .wui-tour-media>video { display: block; width: 100%; height: 100%; object-fit: cover; } .wui-tour-card[data-welcome] { width: min(420px, 100vw - 16px); } .wui-tour-media-toggle { position: absolute; inset-block-end: 8px; inset-inline-end: 8px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--color-scrim-strong); color: var(--color-on-scrim); cursor: pointer; } .wui-tour-media-toggle>svg { width: 20px; height: 20px; fill: currentColor; } .wui-tour-media-toggle:focus-visible { outline: 2px solid var(--color-on-scrim); outline-offset: 2px; } .wui-tour-layer[data-advance] { pointer-events: none; } .wui-tour-layer[data-advance]:not([data-state=leaving]) .wui-tour-card { pointer-events: auto; } .wui-tour-layer[data-advance]:not([data-state=leaving]) .wui-tour-spot::before { content: ""; position: absolute; inset: -100vmax; pointer-events: auto; clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 100vmax 100vmax, calc(100% - 100vmax) 100vmax, calc(100% - 100vmax) calc(100% - 100vmax), 100vmax calc(100% - 100vmax), 100vmax 100vmax); } .wui-tour-hint { margin: 0; font-size: 14px; font-weight: 600; color: var(--color-text); } .wui-tour-pointer { position: absolute; top: 50%; left: 50%; width: 18px; height: 24px; pointer-events: none; } .wui-tour-pointer::before { content: ""; position: absolute; inset: 0; background: var(--color-primary); clip-path: polygon(0 0, 0 75%, 28% 58%, 46% 100%, 62% 92%, 45% 52%, 85% 52%); filter: drop-shadow(1px 0 0 var(--color-surface)) drop-shadow(-1px 0 0 var(--color-surface)) drop-shadow(0 1px 0 var(--color-surface)) drop-shadow(0 -1px 0 var(--color-surface)); } .wui-tour-pointer::after { content: ""; position: absolute; top: -16px; left: -16px; width: 32px; height: 32px; border-radius: 50%; background: var(--color-primary); opacity: 0; display: none; } @media (max-width: 575.98px) { .wui-tour-pointer { width: 24px; height: 24px; translate: -50% -50%; } .wui-tour-pointer::before { clip-path: none; border-radius: 50%; box-shadow: 0 0 0 2px var(--color-surface); filter: none; } .wui-tour-pointer::after { top: -4px; left: -4px; } } @keyframes wui-tour-tap { 0% { opacity: 0; transform: translate(56px, 44px) scale(1); } 10% { opacity: 1; transform: translate(56px, 44px) scale(1); } 45% { transform: translate(0, 0) scale(1); } 52% { transform: translate(0, 0) scale(0.86); } 60% { transform: translate(0, 0) scale(1); } 85% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(0, 0) scale(1); } } @keyframes wui-tour-ripple { 0%, 50% { opacity: 0; transform: scale(0.2); } 52% { opacity: 0.35; transform: scale(0.2); } 80%, 100% { opacity: 0; transform: scale(1); } } @media (prefers-reduced-motion: no-preference) { .wui-tour-pointer { opacity: 0; animation: wui-tour-tap calc(var(--wui-duration-slow) * 6) var(--wui-ease-out) var(--wui-tour-spot-duration) infinite; } .wui-tour-pointer::after { display: block; animation: wui-tour-ripple calc(var(--wui-duration-slow) * 6) var(--wui-ease-out) var(--wui-tour-spot-duration) infinite; } } @keyframes wui-tour-check { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } } .wui-tour-end[data-layout=center] { --wui-tour-card-lift: 0 0; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); transform-origin: center; align-items: center; gap: 8px; width: min(420px, 100vw - 16px); max-height: calc(100vh - 16px); padding: 24px; text-align: center; } .wui-tour-end[data-layout=center] .wui-tour-actions { justify-content: center; margin-top: 8px; } .wui-tour-end[data-layout=center][data-next] .wui-tour-actions { flex-direction: column; align-items: stretch; width: 100%; gap: var(--wui-space-xs); } .wui-tour-end-mark { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--color-success-soft); color: var(--color-success-text); } .wui-tour-end-mark>svg { width: 26px; height: 26px; } .wui-tour-end-mark path { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; } .wui-tour-end-title { font-size: 18px; } .wui-tour-end-message { text-wrap: balance; } .wui-tour-end-next { text-wrap: balance; } .wui-tour-end-button { min-width: 120px; } @media (prefers-reduced-motion: no-preference) { .wui-tour-end-mark path { animation: wui-tour-check 300ms var(--wui-ease-out) calc(var(--wui-tour-card-delay, 0ms) + 120ms) both; } } `,G=`wui-tour-media`,_e=`wui-tour-media-toggle`,K=`http://www.w3.org/2000/svg`,ve=`M6 5h4v14H6zM14 5h4v14h-4z`,ye=`M8 5v14l11-7z`,be={pause:`Pause animation`,play:`Play animation`},xe=()=>globalThis.matchMedia?.(`(prefers-reduced-motion: reduce)`)?.matches===!0;function Se(e){let t=document.createElementNS(K,`svg`);t.setAttribute(`viewBox`,`0 0 24 24`),t.setAttribute(`aria-hidden`,`true`),t.setAttribute(`focusable`,`false`);let n=document.createElementNS(K,`path`);return n.setAttribute(`d`,e),t.appendChild(n),t}function Ce(e){let t=document.createElement(`img`);return t.setAttribute(`alt`,e.mediaAlt??``),t.setAttribute(`width`,`1280`),t.setAttribute(`height`,`720`),t.setAttribute(`loading`,`lazy`),t.setAttribute(`decoding`,`async`),t.setAttribute(`src`,e.media),t}function we(e,t){let n=document.createElement(`video`);return n.muted=!0,n.setAttribute(`muted`,``),n.loop=!0,n.setAttribute(`playsinline`,``),t&&n.setAttribute(`autoplay`,``),n.setAttribute(`preload`,t?`auto`:`metadata`),e.mediaAlt&&n.setAttribute(`aria-label`,e.mediaAlt),e.mediaPoster&&n.setAttribute(`poster`,e.mediaPoster),n.setAttribute(`src`,e.media),n}function Te(e,t){let n=document.createElement(`button`);n.type=`button`,n.className=_e;let r=(r=!e.paused)=>{n.setAttribute(`aria-label`,r?t.pause:t.play),n.replaceChildren(Se(r?ve:ye))};return e.addEventListener(`play`,()=>r()),e.addEventListener(`pause`,()=>r()),n.addEventListener(`click`,()=>{e.paused?e.play()?.catch(()=>r()):e.pause()}),r(e.hasAttribute(`autoplay`)),n}function Ee(e){let t=e.querySelector(`:scope > .${G}`);if(!t)return;let n=t.querySelector(`video`);n&&(n.pause(),n.removeAttribute(`src`),n.load()),t.remove()}function De(e,t,n=be){if(Ee(e),!t.media){e.removeAttribute(`data-media`);return}let r=document.createElement(`div`);if(r.className=G,t.mediaType===`video`){let e=we(t,!xe());r.append(e,Te(e,n))}else r.appendChild(Ce(t));e.prepend(r),e.setAttribute(`data-media`,t.target?`step`:`welcome`)}var q=`data-wui-tour-open`,Oe=`Step {current} of {total}`;function ke(e){let t=new Set;return{drop:e=>{t.add(e)},position:e=>{t.delete(e);let n=0;for(let r of t)r<e&&n++;return e+1-n},total:()=>e-t.size}}function Ae(e,t,n){return(e.getAttribute(`progress-label`)||Oe).replace(/\{(current|total)\}/g,(e,r)=>String(r===`current`?t:n))}function je(e,{text:t,position:n,total:r}){let i=e.querySelector(`.wui-tour-position`);i.textContent=t;let a=e.querySelector(`.wui-tour-progress-bar`);if(!a){let t=e.ownerDocument,n=t.createElement(`div`);n.className=`wui-tour-progress`,n.setAttribute(`aria-hidden`,`true`),a=t.createElement(`div`),a.className=`wui-tour-progress-bar`,n.append(a),i.before(n)}let o=a.children;for(;o.length<r;){let t=e.ownerDocument.createElement(`span`);t.className=`wui-tour-progress-segment`,a.append(t)}for(;o.length>r;)a.lastElementChild.remove();for(let e=0;e<o.length;e++)o[e].toggleAttribute(`data-filled`,e<n)}var Me=`wui-tour-step`,Ne=`wui-tour-host`,Pe=`wui-tour-seen:`,J=`data-tracking`,Fe={back:`Back`,next:`Next`,skip:`Skip`,done:`Done`,mediaPause:`Pause animation`,mediaPlay:`Play animation`,endTitle:`You're all set`,endMessage:`You know your way around now. Enjoy exploring.`,endButton:`Done`},Ie={back:`back-label`,next:`next-label`,skip:`skip-label`,done:`done-label`,mediaPause:`media-pause-label`,mediaPlay:`media-play-label`,endTitle:`end-title`,endMessage:`end-message`,endButton:`end-button`},Le=[[`media`,`media`],[`mediaAlt`,`media-alt`],[`mediaPoster`,`media-poster`],[`mediaType`,`media-type`],[`advanceOn`,`advance-on`],[`actionLabel`,`action-label`]],Y={index:null,position:null,total:null},X=0;function Re(e=Pe,t=globalThis.localStorage){return{isSeen:async n=>t.getItem(e+n)===`1`,markSeen:async n=>{t.setItem(e+n,`1`)}}}var Z=e=>!e?.isConnected||getComputedStyle(e).visibility===`hidden`?!1:e.getClientRects().length>0,Q=e=>!!e&&(e.isContentEditable||/^(INPUT|TEXTAREA|SELECT)$/.test(e.tagName)),ze=()=>{let e=document.activeElement;for(;e?.shadowRoot?.activeElement;)e=e.shadowRoot.activeElement;return e},$=null;function Be(e){$||($=new CSSStyleSheet,$.replaceSync(ge)),e.adoptedStyleSheets=[$]}var Ve=class extends t{static get observedAttributes(){return[`open`]}constructor(){super(),this.seenStore=null,this.onBeforeStep=null,this._run=0,this._running=!1,this._layer=null,this._outer=null,this._shadow=null,this._unbindAdvance=null,this._ending=null,this._seenMark=null}connectedCallback(){this.hasAttribute(`open`)&&this.start()}disconnectedCallback(){this.stop()}attributeChangedCallback(e,t,n){e===`open`&&this.isConnected&&(n===null?this.stop():this.start())}get tourId(){return this.getAttribute(`tour-id`)||``}set tourId(e){e==null||e===``?this.removeAttribute(`tour-id`):this.setAttribute(`tour-id`,String(e))}get isolated(){return this.hasAttribute(`isolated`)}set isolated(e){this.toggleAttribute(`isolated`,e===!0||e===``||e===`true`)}_stepList(){return Array.from(this.querySelectorAll(`:scope > ${Me}`),e=>{let t={target:e.getAttribute(`target`)||``,title:e.getAttribute(`title`)||void 0,description:e.textContent.trim()};for(let[n,r]of Le)e.hasAttribute(r)&&(t[n]=e.getAttribute(r));return t})}_store(){return this.seenStore?this.seenStore:this.getAttribute(`seen-store`)===`local`?Re():globalThis.window?.WUI?.tour?.seenStore||null}_label(e){return this.getAttribute(Ie[e])||Fe[e]}_endDialogText(){if(this.getAttribute(`end-dialog`)===`false`)return null;let e=(this.getAttribute(`end-next-label`)??``).trim(),t=(this.getAttribute(`end-next-href`)??``).trim();return{title:this._label(`endTitle`),message:this._label(`endMessage`),button:this._label(`endButton`),nextLabel:e,nextHref:t}}_markSeen(e){let t=this._store();return t?t.markSeen(this.tourId,e):null}async start(){if(this._running)return;this._running=!0;let e=++this._run;this.hasAttribute(`open`)||this.setAttribute(`open`,``);try{await this._start(e)}catch(t){throw e===this._run&&(this._running=!1),t}}async _start(e){this._steps=this._stepList(),this._progress=ke(this._steps.length);let t=this._store();if(t&&!this.tourId)throw Error(`<wui-tour> needs a tour-id to use a seen store.`);if(t&&await t.isSeen(this.tourId)){e===this._run&&this._finish(`alreadySeen`);return}for(let[e,t]of this._steps.entries())t.target&&!Z(document.querySelector(t.target))&&this._progress.drop(e);this._returnFocus=document.activeElement;let n=await this._locate(0,1,e);e===this._run&&(n?(this._firstIndex=n.index,this.dispatchEvent(new CustomEvent(`wui-tour:start`,{bubbles:!0,detail:{total:this._progress.total()}})),e===this._run&&(this._build(),this._show(n))):this._finish(`noTargets`))}next(){return this._move(1)}back(){return!this._current||this._current.index<=this._firstIndex?Promise.resolve():this._move(-1)}async goTo(e){if(this._current){if(!Number.isInteger(e)||e<0||e>=this._steps.length)throw RangeError(`<wui-tour> has no step ${e}; it has ${this._steps.length}.`);await this._go(e,1)}}stop(){this._running&&(this._run++,this._teardown(),this._running=!1,this.hasAttribute(`open`)&&this.removeAttribute(`open`))}async _locate(e,t,n){let r=this._steps;for(let i=e;i>=0&&i<r.length;i+=t){let e=r[i];if(await this._beforeStep(e,i),n!==this._run)return null;if(!e.target)return{index:i,target:null};let t=document.querySelector(e.target);if(Z(t))return this._progress.position(i),{index:i,target:t};this._progress.drop(i)}return null}async _beforeStep(e,t){let n=[];this.dispatchEvent(new CustomEvent(`wui-tour:beforestep`,{bubbles:!0,detail:{step:e,index:t,wait:e=>n.push(e)}})),await Promise.all(n),typeof this.onBeforeStep==`function`&&await this.onBeforeStep(e,t)}_build(){let e=`wui-tour-${++X}`,t=document.createElement(`div`);t.className=`wui-tour-layer`,t.innerHTML=` <div class="wui-tour-spot" aria-hidden="true"></div> <div class="wui-tour-card" role="dialog" aria-modal="true" tabindex="-1" aria-labelledby="${e}-title" aria-describedby="${e}-text"> <p class="wui-tour-position"></p> <h2 class="wui-tour-title" id="${e}-title"></h2> <p class="wui-tour-text" id="${e}-text"></p> <div class="wui-tour-actions"> <button type="button" class="btn btn-sm btn-link wui-tour-skip"></button> <div class="wui-tour-nav"> <button type="button" class="${o(`outline-secondary`,`sm`)} wui-tour-back" data-wui="${i}"></button> <button type="button" class="${o(`primary`,`sm`)} wui-tour-next" data-wui="${i}"></button> </div> </div> </div> <div class="visually-hidden" role="status" aria-live="polite"></div>`;let r=t;this._shadow=null,this.isolated&&(r=document.createElement(Ne),this._shadow=r.attachShadow({mode:`open`}),Be(this._shadow),this._shadow.appendChild(t)),document.body.appendChild(r),document.documentElement.setAttribute(q,``),this._outer=r,this._layer=t,this._spot=t.querySelector(`.wui-tour-spot`),this._card=t.querySelector(`.wui-tour-card`),this._live=t.querySelector(`[role=status]`),this._card.querySelector(`.wui-tour-skip`).addEventListener(`click`,()=>this._close(`skipped`,`button`)),this._card.querySelector(`.wui-tour-back`).addEventListener(`click`,()=>this._move(-1)),this._card.querySelector(`.wui-tour-next`).addEventListener(`click`,()=>this._move(1)),this._shadow&&this._card.removeAttribute(`aria-modal`),this._onKey=e=>this._key(e),this._onFocusIn=e=>{if(!this._layer||this._ending)return;let t=this._current,n=t?this._steps[t.index]:null;y(this._layer,n,t?.target??null,e.target)||this._card.focus()},document.addEventListener(`keydown`,this._onKey,!0),this._shadow||document.addEventListener(`focusin`,this._onFocusIn),n(r,()=>this._follow())}_active(){return this._shadow?this._shadow.activeElement:document.activeElement}_show(e){this._current=e;let{index:t,target:n}=e,r=this._steps[t],i=this._card,a=this._progress.position(t),o=this._progress.total(),s=a===o&&!this._endDialogText(),c=Ae(this,a,o);je(i,{text:c,position:a,total:o}),De(i,r,{pause:this._label(`mediaPause`),play:this._label(`mediaPlay`)}),i.toggleAttribute(`data-welcome`,!n);let l=v(this,{layer:this._layer,spot:this._spot,card:i},r,n),u=i.querySelector(`.wui-tour-title`);u.textContent=r.title||``,u.hidden=!r.title,i.querySelector(`.wui-tour-text`).textContent=r.description||``,i.querySelector(`.wui-tour-skip`).textContent=this._label(`skip`),i.querySelector(`.wui-tour-back`).textContent=this._label(`back`),i.querySelector(`.wui-tour-back`).hidden=t<=this._firstIndex,i.querySelector(`.wui-tour-next`).textContent=this._label(s?`done`:`next`);let d=[c,r.title,r.description].filter(Boolean).join(`. `);this._live.textContent=l?[d,l].join(/[.!?]$/.test(d)?` `:`. `):d,R(i,n),this._spot.removeAttribute(J),this._place(),O(i),this._unbindAdvance?.(),this._unbindAdvance=ne(r,n,()=>this._move(1));let f=this._active();(i.contains(f)?!f.hidden:this._shadow!==null&&Q(ze()))||i.focus(),this.dispatchEvent(new CustomEvent(`wui-tour:step`,{bubbles:!0,detail:{step:r,index:t,position:a,total:o}}))}_place(){this._current&&this._layer&&z(this._spot,this._card,this._current.target)}_follow(){if(!this._current||!this._layer||this._ending)return;let e=this._spot.style.cssText;this._place(),this._spot.style.cssText!==e&&this._spot.setAttribute(J,``)}async _move(e){this._current&&await this._go(this._current.index+e,e)}async _go(e,t){if(!this._current||this._moving)return;this._moving=!0;let n=this._run;try{let r=await this._locate(e,t,n);if(n!==this._run)return;if(r){let e=k(this._card);if(e&&await e,n!==this._run)return;this._show(r)}else if(t>0){let e=this._endDialogText(),t=e?await this._showEnd(e):`done`;if(n!==this._run)return;let r=await this._close(t===`next`?`next`:`finished`);t===`next`&&r&&this.ownerDocument.defaultView.location.assign(e.nextHref)}}finally{this._moving=!1}}_showEnd(e){return this._unbindAdvance?.(),this._unbindAdvance=null,v(this,{layer:this._layer,spot:this._spot,card:this._card},null,null),this._spot.removeAttribute(J),this._ending=new AbortController,this._seenMark=this._markSeen(`finished`),he(this._layer,e,this._ending.signal)}_key(e){if(!(!this._layer||this._ending||e.altKey||e.ctrlKey||e.metaKey)){if(e.key===`Escape`)e.preventDefault(),e.stopPropagation(),this._close(`skipped`,`escape`);else if(e.key===`ArrowRight`||e.key===`ArrowLeft`){if(Q(e.composedPath?.()[0]??e.target))return;e.preventDefault(),e.key===`ArrowRight`?this._move(1):this._current.index>this._firstIndex&&this._move(-1)}else if(e.key===`Tab`&&!this._shadow){let{index:t,target:n}=this._current;b(e,{card:this._card,active:this._active(),step:this._steps[t],target:n})}}}_teardown(){if(!this._layer)return;document.removeEventListener(`keydown`,this._onKey,!0),document.removeEventListener(`focusin`,this._onFocusIn);let e=!this._shadow||this._shadow.activeElement!==null||!document.activeElement||document.activeElement===document.body;this._unbindAdvance?.(),this._unbindAdvance=null,this._ending?.abort(),this._ending=null,this._seenMark=null,r(this._outer),oe(this._outer),document.documentElement.removeAttribute(q),this._outer=null,this._shadow=null,this._layer=null,this._current=null;let t=this._returnFocus;this._returnFocus=null,e&&t?.isConnected&&t.focus?.()}async _close(e,t=null){let n=this._run,r=this._current,i=r?{index:r.index,position:this._progress.position(r.index),total:this._progress.total()}:Y,a=this._seenMark;this._teardown();let o=e===`next`?`finished`:e,s=!1;try{n===this._run&&await(a??this._markSeen(o)),s=n===this._run}finally{this._finish(e,i,t)}return s}_finish(e,t=Y,n=null){this._run++,this._running=!1,this.hasAttribute(`open`)&&this.removeAttribute(`open`),this.dispatchEvent(new CustomEvent(`wui-tour:close`,{bubbles:!0,detail:{reason:e,...t,via:n}}))}},He=class extends t{constructor(){super(),this.shadowRoot||this.attachShadow({mode:`open`})}};e(`wui-tour`,Ve),e(`wui-tour-step`,He)})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/ui-elements",
-  "version": "0.137.2",
+  "version": "0.139.0",
   "description": "Webority framework-agnostic UI custom elements (<wui-*>) — the single implementation of the interactive components, styled by @webority/theme. Used natively in Razor and wrapped by @webority/ui-react.",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
@@ -25,14 +25,12 @@
       "default": "./dist/helpers.js"
     },
     "./server": "./dist/server.js",
-    "./elements/autocomplete": "./dist/elements/autocomplete.js",
     "./elements/carousel": "./dist/elements/carousel.js",
     "./elements/code-block": "./dist/elements/code-block.js",
     "./elements/command-palette": "./dist/elements/command-palette.js",
     "./elements/comment-thread": "./dist/elements/comment-thread.js",
     "./elements/consent-banner": "./dist/elements/consent-banner.js",
     "./elements/context-menu": "./dist/elements/context-menu.js",
-    "./elements/country-select": "./dist/elements/country-select.js",
     "./elements/data-table": "./dist/elements/data-table.js",
     "./elements/date-range": "./dist/elements/date-range.js",
     "./elements/datepicker": "./dist/elements/datepicker.js",
@@ -50,7 +48,6 @@
       "types": "./types/elements/mention-input.d.ts",
       "default": "./dist/elements/mention-input.js"
     },
-    "./elements/multiselect": "./dist/elements/multiselect.js",
     "./elements/navigation-menu": "./dist/elements/navigation-menu.js",
     "./elements/notification-center": "./dist/elements/notification-center.js",
     "./elements/onboarding-checklist": "./dist/elements/onboarding-checklist.js",
@@ -70,7 +67,6 @@
     "./elements/slider": "./dist/elements/slider.js",
     "./elements/sortable": "./dist/elements/sortable.js",
     "./elements/status-icon": "./dist/elements/status-icon.js",
-    "./elements/taginput": "./dist/elements/taginput.js",
     "./elements/timepicker": "./dist/elements/timepicker.js",
     "./elements/tour": {
       "types": "./types/elements/tour.d.ts",
@@ -103,7 +99,7 @@
     "@tiptap/markdown": "3.31.4",
     "@tiptap/starter-kit": "3.31.4",
     "@vitest/coverage-v8": "5.0.1",
-    "@webority/markdown-core": "0.137.2",
+    "@webority/markdown-core": "0.139.0",
     "echarts": "6.1.0",
     "jsdom": "30.1.1",
     "libphonenumber-js": "^1.13.9",

package/dist/WuiAutocomplete-178HkRe4.js

@@ -1,13 +0,0 @@
-import{n as e,r as t,t as n}from"./anchorOverlay-CBMAnDUt.js";import{n as r,r as i,t as a}from"./focusOrigin-R7FU5wL6.js";import{t as o}from"./elementBase-DV9IZZCu.js";import{n as s,r as c,t as l}from"./fieldState-D-zQcXUS.js";import{t as u}from"./formMirror-BMQTenSi.js";import{t as d}from"./iconGlyphs.g-gURMSeyB.js";import{n as f,t as p}from"./listboxKeyNav-DMIvs9d6.js";import{a as m,i as h,n as g,r as _,t as v}from"./optionLabel-CjrUbe2a.js";var y=class extends o{static formAssociated=!0;_accessibleName(){return this.getAttribute(`aria-label`)||this.getAttribute(`placeholder`)||`Select`}static get observedAttributes(){return[`value`,`placeholder`,`disabled`,`readonly`,`loading`,`min-chars`,`debounce`,`remote`,`size`,`aria-label`,`allow-custom`,`aria-invalid`,`open`,`value-avatar`,`value-initials`]}constructor(){super(),this._value=``,this._label=``,this._valueAvatar=``,this._valueInitials=``,this._optionsProp=null,this._loading=!1,this._active=-1,this._timer=null,this._reqSeq=0,this._pendingSearch=null,this._typeahead=``,this._typeaheadTimer=null;try{this._internals=this.attachInternals()}catch{this._internals=null}}connectedCallback(){if(!this._rendered)this._defaultCaptured||=(this._defaultValue=this._value,!0),this.render();else if(this._bindGlobal?.(),this._pendingSearch){let{query:e,seq:t}=this._pendingSearch;clearTimeout(this._timer),this._timer=setTimeout(()=>this._fireSearch(e,t),this._debounceMs)}}formResetCallback(){this.value=this._defaultValue||``}attributeChangedCallback(e,t,n){e===`value`?this.value=n:e===`value-avatar`?(this._valueAvatar=n??``,this._syncValueAvatar()):e===`value-initials`?(this._valueInitials=n??``,this._syncValueAvatar()):e===`aria-invalid`?this._syncInvalid():e===`open`?this._syncPinned?.():this._rendered&&this.render()}_syncInvalid(){let e=this.querySelector(`.search-select-control`);e&&(this.hasAttribute(`aria-invalid`)?e.setAttribute(`aria-invalid`,`true`):e.removeAttribute(`aria-invalid`))}get value(){return this._value}set value(e){this._value=e==null?``:String(e),u(this,this._value);let t=this._readOptions().find(e=>String(e.value)===this._value);this._label=t?h(t):``,this._value||(this._valueAvatar=``,this._valueInitials=``),this._syncInput(),this._syncValueAvatar(),this._renderOptions(``)}set options(e){this._optionsProp=Array.isArray(e)?e:[];let t=this._readOptions().find(e=>String(e.value)===this._value);t&&(this._label=h(t)),this._renderOptions(),this._syncInput()}get options(){return this._readOptions()}set loading(e){this._loading=!!e,this._renderLoading(),c(this,this._refs().control),this._renderOptions()}get loading(){return this._loading||this.hasAttribute(`loading`)}get _remote(){return this.hasAttribute(`remote`)}get _allowCustom(){return this.hasAttribute(`allow-custom`)}_matchesKnownOption(e){let t=e.toLowerCase();return this._readOptions().some(e=>h(e).toLowerCase()===t||String(e.value??``).toLowerCase()===t)}get _minChars(){let e=+!!this._remote,t=this.getAttribute(`min-chars`);if(t==null||t.trim()===``)return e;let n=Number(t);return Number.isInteger(n)&&n>=0?n:e}get _debounceMs(){let e=this.getAttribute(`debounce`);if(e==null||e===``)return 250;let t=Number(e);return Number.isFinite(t)&&t>=0?t:250}_snapshotDeclared(){if(this._declared)return;let e=[...this.querySelectorAll(`:scope > wui-option`)];e.length&&(this._declared=e.map(e=>({value:e.getAttribute(`value`)??e.textContent.trim(),label:e.innerHTML,icon:e.getAttribute(`icon`)||void 0,[v]:!0,selected:e.hasAttribute(`selected`)})))}_readOptions(){return this._optionsProp?this._optionsProp:(this._snapshotDeclared(),this._declared||[])}render(){this._snapshotDeclared();let e=this.getAttribute(`placeholder`)||`Search…`,t=this.getAttribute(`size`),n=t===`sm`?` search-select-sm`:t===`lg`?` search-select-lg`:``;this.id||=`wui-autocomplete-${Math.random().toString(36).slice(2,9)}`;let r=`${this.id}-listbox`;this._listboxId=r;let i=s(this)||this.hasAttribute(`loading`);this.innerHTML=`
-      <div class="search-select${n}">
-        <div class="input search-select-control search-select-ac" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="${b(r)}" aria-label="${b(this._accessibleName())}"${this.hasAttribute(`aria-invalid`)?` aria-invalid="true"`:``}>
-          <input class="search-select-input search-select-ac-input" placeholder="${b(e)}" aria-autocomplete="list" autocomplete="off"${this.hasAttribute(`disabled`)?` disabled`:``}${i?` readonly`:``} />
-          <span class="search-select-spinner spinner-border spinner-border-sm" role="status" aria-hidden="true" hidden></span>
-          <button type="button" class="search-select-clear" aria-label="Clear" hidden>${d(`x`)}</button>
-        </div>
-        <div class="search-select-menu search-select-menu-fixed" role="listbox" id="${b(r)}" tabindex="-1" hidden>
-          <div class="search-select-options"></div>
-          <div class="search-select-empty" hidden>No matches</div>
-          <div class="search-select-hint" hidden>Type to search…</div>
-        </div>
-      </div>`,this._rendered=!0,u(this,this._value),this._wire(),this._syncInput(),this._syncValueAvatar(),this._renderOptions(),this._renderLoading(),c(this,this._refs().control)}_syncValueAvatar(){let e=this.querySelector(`.search-select-control`);if(!e)return;e.querySelector(`.wui-search-select-value-avatar`)?.remove();let t=this._value?i({avatar:this._valueAvatar,initials:this._valueInitials},`avatar-xs`):``;e.classList.toggle(`wui-has-value-avatar`,!!t),t&&e.insertAdjacentHTML(`afterbegin`,`<span class="wui-search-select-value-avatar" aria-hidden="true">${t}</span>`)}_refs(){return{control:this.querySelector(`.search-select-control`),input:this.querySelector(`.search-select-ac-input`),menu:this.querySelector(`.search-select-menu`),spinner:this.querySelector(`.search-select-spinner`),clear:this.querySelector(`.search-select-clear`),optionsWrap:this.querySelector(`.search-select-options`),empty:this.querySelector(`.search-select-empty`),hint:this.querySelector(`.search-select-hint`)}}_optionEls(){return[...this.querySelectorAll(`.search-select-option`)]}_syncInput(){let{input:e,clear:t}=this._refs();e&&document.activeElement!==e&&(e.value=this._label),t&&(t.hidden=!this._value&&!e?.value)}_renderLoading(){let{spinner:e}=this._refs();e&&(e.hidden=!this.loading)}_renderOptions(e){let t=this._refs();if(!t.optionsWrap)return;let n=e??(t.input?t.input.value:``),r=n.trim().toLowerCase(),a=this._readOptions();!this._remote&&r&&(a=a.filter(e=>h(e).toLowerCase().includes(r)));let o=n.trim(),s=this._allowCustom&&o&&!this._matchesKnownOption(o)?[...a,{value:o,custom:!0}]:a,c=this._listboxId||`${this.id||`wui-autocomplete`}-listbox`;t.optionsWrap.innerHTML=s.map((e,t)=>{let n=`${c}-opt-${t}`;if(e.custom){let t=`Add “${g(e.value)}”`;return`<button type="button" role="option" id="${b(n)}" class="search-select-option search-select-option-custom" data-value="${b(e.value)}" data-custom="true" aria-selected="false">${t}</button>`}let r=String(e.value)===String(this._value);return`<button type="button" role="option" id="${b(n)}" class="search-select-option${r?` selected`:``}" data-value="${b(e.value)}" aria-selected="${r}">${i(e)}${_(e)}</button>`}).join(``),this._active=-1,t.control?.removeAttribute(`aria-activedescendant`);let l=r.length<this._minChars;t.hint&&(t.hint.hidden=!(this._remote&&l&&!a.length)),t.empty&&(t.empty.hidden=this.loading||s.length>0||this._remote&&l),this._reanchor?.()}_wire(){this._teardown();let i=this._refs();if(!i.control||!i.input)return;let o=()=>{let e=this.hasAttribute(`open`)?{below:!0}:{};n(i.control,i.menu,{matchWidth:!0,...e})},s=()=>this._optionEls().filter(e=>!e.hidden),c=(e,{reveal:t=!0}={})=>{let n=s();this._active=e,f(i.optionsWrap,e>=0&&n[e]||null),e>=0&&n[e]?(t&&n[e].scrollIntoView({block:`nearest`}),i.control.setAttribute(`aria-activedescendant`,n[e].id)):i.control.removeAttribute(`aria-activedescendant`)},d=()=>!i.menu.hidden,g=()=>{d()&&o()},_=()=>{this._remote&&this._minChars===0&&!i.input.value.trim()&&(clearTimeout(this._timer),this._fireSearch(``,++this._reqSeq))},v=({load:t=!0}={})=>{l(this)||(i.menu.hidden=!1,i.control.setAttribute(`aria-expanded`,`true`),i.control.classList.add(`open`),o(),e(this,g),t&&_(),this._renderOptions())},y=({force:e=!1}={})=>{(e||!this.hasAttribute(`open`))&&(i.menu.hidden=!0,i.control.setAttribute(`aria-expanded`,`false`),i.control.classList.remove(`open`),c(-1),clearTimeout(this._typeaheadTimer),this._typeaheadTimer=null,this._typeahead=``,this._syncInput(),t(this))},b=e=>{let t=e.dataset.custom===`true`;this._value=e.dataset.value;let n=t?null:this._readOptions().find(t=>String(t.value)===e.dataset.value);this._label=t?e.dataset.value:n?h(n):m(e.innerHTML),this._valueAvatar=n?.avatar??``,this._valueInitials=n?.initials??``,this._syncValueAvatar(),u(this,this._value),i.input.value=this._label,this.dispatchEvent(new CustomEvent(`change`,{bubbles:!0,detail:{isCustom:t}})),y(),i.input.focus()},x=e=>{this._value=e,this._label=e,this._valueAvatar=``,this._valueInitials=``,this._syncValueAvatar(),u(this,e),i.input.value=e,this.dispatchEvent(new CustomEvent(`change`,{bubbles:!0,detail:{isCustom:!0}})),y()},S=()=>{let e=i.input.value;if(i.clear&&(i.clear.hidden=!e),d()||v({load:!1}),this._remote){if(this._renderOptions(e),clearTimeout(this._timer),e.trim().length<this._minChars){this._pendingSearch=null;return}let t=++this._reqSeq;this._pendingSearch={query:e,seq:t},this._timer=setTimeout(()=>this._fireSearch(e,t),this._debounceMs)}else this._renderOptions(e)};this._navHandler=p({getVisibleOptions:s,getActive:()=>this._active,setActive:e=>c(e),onEnter:(e,t)=>{if(t[this._active])b(t[this._active]);else if(this._allowCustom){let e=i.input.value.trim();e&&!this._matchesKnownOption(e)&&x(e)}},onEscape:()=>{this._navHandler.clearTypeahead(),y()}});let C=e=>{if(l(this))return;let t=e.target?.tagName===`INPUT`||e.target?.tagName===`TEXTAREA`;if(e.key===`ArrowDown`){e.preventDefault(),d()||v();let t=s();c(Math.min(this._active+1,t.length-1))}else e.key===`ArrowUp`?(e.preventDefault(),c(Math.max(this._active-1,0))):(e.key!==`Home`&&e.key!==`End`&&e.key!==`PageDown`&&e.key!==`PageUp`||d()&&!t)&&(e.key.length!==1||!e.ctrlKey&&!e.metaKey&&!e.altKey&&d()&&e.target?.tagName!==`INPUT`&&e.target?.tagName!==`TEXTAREA`||d()&&e.target?.tagName!==`INPUT`&&e.target?.tagName!==`TEXTAREA`)&&(e.key===`Escape`&&d()&&(e.preventDefault(),e.stopPropagation()),this._navHandler.handler(e))};r(),i.input.addEventListener(`focus`,()=>{a()&&!d()&&v()}),i.control.addEventListener(`click`,e=>{i.input.disabled||l(this)||e.target.closest(`.search-select-clear`)||(e.target!==i.input&&i.input.focus(),d()||v())});let w=e=>{e.target?.classList?.contains(`avatar-img`)&&e.target.remove()};i.control.addEventListener(`error`,w,!0),i.optionsWrap.addEventListener(`error`,w,!0),i.input.addEventListener(`input`,S),i.input.addEventListener(`keydown`,C),i.menu.addEventListener(`keydown`,C),i.input.addEventListener(`blur`,e=>{if(!this._allowCustom||e.relatedTarget&&this.contains(e.relatedTarget))return;let t=i.input.value.trim();t&&t!==this._label&&!this._matchesKnownOption(t)&&x(t)}),i.optionsWrap.addEventListener(`click`,e=>{let t=e.target.closest(`.search-select-option`);t&&!l(this)&&b(t)}),i.optionsWrap.addEventListener(`mousemove`,e=>{let t=e.target.closest(`.search-select-option`);t&&!t.classList.contains(`is-active`)&&c(this._optionEls().indexOf(t),{reveal:!1})}),i.optionsWrap.addEventListener(`mouseleave`,()=>c(-1)),i.clear?.addEventListener(`click`,()=>{l(this)||(this._value=``,this._label=``,this._valueAvatar=``,this._valueInitials=``,this._syncValueAvatar(),u(this,``),i.input.value=``,i.clear.hidden=!0,this._renderOptions(``),this.dispatchEvent(new Event(`change`,{bubbles:!0})),i.input.focus(),d()?_():v())}),this._bindGlobal=()=>{this._teardown(),this._onDocClick=e=>{d()&&!this.contains(e.target)&&y()},document.addEventListener(`click`,this._onDocClick),d()&&e(this,g)},this._syncPinned=()=>this.hasAttribute(`open`)?v({load:!0}):y({force:!0}),this.hasAttribute(`open`)&&v({load:!0}),this._bindGlobal()}_fireSearch(e,t){this._pendingSearch=null,this.dispatchEvent(new CustomEvent(`search`,{bubbles:!0,detail:{query:e,seq:t}}))}_teardown(){this._onDocClick&&=(document.removeEventListener(`click`,this._onDocClick),null),t(this),clearTimeout(this._timer),this._navHandler?.teardown()}disconnectedCallback(){this._teardown()}},b=e=>String(e??``).replace(/&/g,`&amp;`).replace(/"/g,`&quot;`).replace(/</g,`&lt;`);export{y as t};

package/dist/WuiCountrySelect-Df9BRrCI.js

@@ -1 +0,0 @@
-import{t as e}from"./countries-CvmZ2xpG.js";import{t}from"./WuiSelect-1TmFVLek.js";var n=e=>{if(e==null)return null;let t=String(e).split(`,`).map(e=>e.trim().toUpperCase()).filter(Boolean);return t.length?new Set(t):null},r=t=>{let r=n(t);return e.filter(([e])=>!r||r.has(e)).map(([e,t])=>({value:e,label:t,flag:e}))},i=class extends t{static get observedAttributes(){return[...t.observedAttributes,`countries`]}_readOptions(){let e=this.getAttribute(`countries`);return this._countryCache?.attr!==e&&(this._countryCache={attr:e,options:r(e)}),this._countryCache.options}};export{i as t};

package/dist/WuiMultiSelect-nHensvLa.js

@@ -1,25 +0,0 @@
-import{n as e,r as t,t as n}from"./anchorOverlay-CBMAnDUt.js";import{n as r,r as i,t as a}from"./focusOrigin-R7FU5wL6.js";import{n as o}from"./devWarn-DXdRWZs3.js";import{t as s}from"./elementBase-DV9IZZCu.js";import{n as c,r as l,t as u}from"./fieldState-D-zQcXUS.js";import{n as d}from"./formMirror-BMQTenSi.js";import{t as f}from"./iconGlyphs.g-gURMSeyB.js";import{n as p,t as m}from"./listboxKeyNav-DMIvs9d6.js";import{a as h,i as g,n as _,r as v,t as y}from"./optionLabel-CjrUbe2a.js";import{i as b,t as x}from"./tokenCommit-BKckxgtg.js";var S=class extends s{static formAssociated=!0;_accessibleName(){return this.getAttribute(`aria-label`)||this.getAttribute(`placeholder`)||`Select`}static get observedAttributes(){return[`placeholder`,`search-placeholder`,`searchable`,`disabled`,`readonly`,`loading`,`icon`,`size`,`collapse-chips`,`aria-label`,`aria-invalid`,`allow-custom`,`custom-pattern`,`custom-invalid-message`]}constructor(){super(),this._values=[],this._optionsProp=null,this._active=-1,this._typeahead=``,this._typeaheadTimer=null,this._customError=``;try{this._internals=this.attachInternals()}catch{this._internals=null}}connectedCallback(){if(this._rendered)this._bindGlobal?.();else{if(!this._valuesInit&&!this._optionsProp&&!this._values.length){let e=this.getAttribute(`value`);if(e!=null&&e!==``)this._values=e.split(`,`).map(e=>e.trim()).filter(Boolean);else{let e=[...this.querySelectorAll(`:scope > wui-option[selected]`)].map(e=>e.getAttribute(`value`)??e.textContent.trim());e.length&&(this._values=e.map(String))}}this._valuesInit=!0,this._defaultCaptured||=(this._defaultValues=this._values.slice(),!0),this.render()}}formResetCallback(){this.values=(this._defaultValues||[]).slice();let e=this.querySelector(`[data-input]`);e&&(e.value=``),this._setCustomError(``)}attributeChangedCallback(e){e===`aria-invalid`?this._syncInvalid():e!==`custom-pattern`&&e!==`custom-invalid-message`&&this._rendered&&this.render()}_syncInvalid(){let e=this.querySelector(`.search-select-control`);e&&(this.hasAttribute(`aria-invalid`)||this._customError?e.setAttribute(`aria-invalid`,`true`):e.removeAttribute(`aria-invalid`))}get values(){return this._values.slice()}set values(e){this._values=Array.isArray(e)?e.map(String):[],d(this,this._values),this._rendered&&(this._renderControl(),this._renderOptions(this._query()))}set options(e){this._optionsProp=Array.isArray(e)?e:null,this._rendered&&this._allowCustom?(this._renderControl(),this._renderOptions(this._query())):this.isConnected&&this.render()}get options(){return this._readOptions()}get validateCustom(){return this._validateCustom??null}set validateCustom(e){this._validateCustom=typeof e==`function`?e:null}get _allowCustom(){return this.hasAttribute(`allow-custom`)}_query(){let e=this.querySelector(this._allowCustom?`[data-input]`:`.search-select-input`);return e?e.value:``}_snapshotDeclared(){if(this._declared)return;let e=[...this.querySelectorAll(`:scope > wui-option`)];e.length&&(this._declared=e.map(e=>{let t={value:e.getAttribute(`value`)??e.textContent.trim(),label:e.innerHTML,icon:e.getAttribute(`icon`)||void 0,[y]:!0,selected:e.hasAttribute(`selected`)};for(let[n,r]of w){let i=e.getAttribute(n);i&&(t[r]=i)}return e.hasAttribute(`disabled`)&&(t.disabled=!0),t}))}_readOptions(){return this._optionsProp?this._optionsProp:(this._snapshotDeclared(),this._declared||[])}_labelFor(e){let t=this._readOptions().find(t=>String(t.value)===String(e));return t?g(t):h(e)}_labelHtmlFor(e){let t=this._readOptions().find(t=>String(t.value)===String(e));return t?v(t):_(e)}render(){this._snapshotDeclared();let e=this._allowCustom,t=this.hasAttribute(`searchable`)&&!e,n=this.getAttribute(`search-placeholder`)||`Search…`,r=this.getAttribute(`icon`),i=this.getAttribute(`size`),a=i===`sm`?` search-select-sm`:i===`lg`?` search-select-lg`:``;d(this,this._values),this.id||=`wui-multiselect-${Math.random().toString(36).slice(2,9)}`;let o=`${this.id}-listbox`;this._listboxId=o;let s=this.hasAttribute(`disabled`),c=u(this);if(e){let e=`${this.id}-custom-error`;this.innerHTML=`
-      <div class="search-select${a}">
-        <div class="input search-select-control search-select-multi"${this.hasAttribute(`aria-invalid`)?` aria-invalid="true"`:``}${s?` aria-disabled="true"`:``}>
-          ${r?f(r,{className:`search-select-icon`}):``}
-          <div class="ms-chips" data-chips><input type="text" class="ms-input" data-input role="combobox" aria-autocomplete="list" aria-haspopup="listbox" aria-expanded="false" aria-controls="${k(o)}" aria-label="${k(this._accessibleName())}" aria-describedby="${k(e)}" autocomplete="off"${s?` disabled`:c?` readonly`:``} /></div>
-          ${f(`chevron-down`,{className:`search-select-caret`})}
-        </div>
-        <div class="search-select-menu search-select-menu-fixed" hidden>
-          <div class="search-select-options" role="listbox" id="${k(o)}" aria-multiselectable="true" tabindex="-1"></div>
-        </div>
-      </div>
-      <div class="field-error wui-ms-custom-error" id="${k(e)}" aria-live="polite" hidden></div>`}else this.innerHTML=`
-      <div class="search-select${a}">
-        <div class="input search-select-control search-select-multi" role="combobox" aria-haspopup="listbox" aria-expanded="false" aria-controls="${k(o)}" aria-label="${k(this._accessibleName())}"${this.hasAttribute(`aria-invalid`)?` aria-invalid="true"`:``}${s?` aria-disabled="true"`:` tabindex="0"`}>
-          ${r?f(r,{className:`search-select-icon`}):``}
-          <div class="ms-chips" data-chips></div>
-          ${f(`chevron-down`,{className:`search-select-caret`})}
-        </div>
-        <div class="search-select-menu search-select-menu-fixed" hidden>
-          ${t?`<div class="search-select-search">${f(`search`)}<input class="search-select-input" placeholder="${k(n)}" aria-label="${k(n)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden>${f(`x`)}</button></div>`:``}
-          <div class="search-select-options" role="listbox" id="${k(o)}" aria-multiselectable="true" tabindex="-1"></div>
-          <div class="search-select-empty" hidden>No matches</div>
-        </div>
-      </div>`;this._rendered=!0,this._customError=``,d(this,this._values),this._renderControl(),this._renderOptions(),this._wire(),l(this,this.querySelector(`.search-select-control`))}_renderControl(){let e=this.querySelector(`[data-chips]`);if(!e)return;let t=this.getAttribute(`placeholder`)||`Select…`,n=this._allowCustom?e.querySelector(`[data-input]`):null,r=!c(this)&&!this.hasAttribute(`loading`),i=this._values.map(e=>`<span class="chip chip-sm"><span class="chip-label">${this._labelHtmlFor(e)}</span>${r?`<button type="button" class="chip-remove" data-remove="${k(e)}" aria-label="Remove ${k(this._labelFor(e))}">${f(`x`)}</button>`:``}</span>`).join(``);if(n){for(let t of[...e.querySelectorAll(`:scope > .chip`)])t.remove();n.insertAdjacentHTML(`beforebegin`,i),n.placeholder=this._values.length?``:t,this._collapseChips()}else this._values.length?(e.innerHTML=i,this._collapseChips()):e.innerHTML=`<span class="search-select-placeholder">${_(t)}</span>`}_collapseChips(){let e=this.querySelector(`[data-chips]`);if(!e||!this.hasAttribute(`collapse-chips`)||!this._values.length)return;e.querySelector(`.chip-more`)?.remove();let t=[...e.querySelectorAll(`:scope > .chip:not(.chip-more)`)];for(let e of t)e.style.display=``;if(!t.length)return;let n=e.clientWidth,r=e=>e.offsetLeft+e.offsetWidth;if(r(t[t.length-1])<=n)return;let i=document.createElement(`span`);i.className=`chip chip-sm chip-more`,i.textContent=`+${t.length}`,t[t.length-1].after(i);let a=i.offsetWidth+6,o=0;for(let e of t)if(r(e)<=n-a)o+=1;else break;o<1&&(o=1);for(let e=o;e<t.length;e+=1)t[e].style.display=`none`;i.textContent=`+${t.length-o}`}_matches(e,t){return g(e).toLowerCase().includes(t)||String(e.description??``).toLowerCase().includes(t)}_optionNamed(e){let t=e.trim().toLowerCase();return this._readOptions().find(e=>String(e.value??``).toLowerCase()===t||g(e).trim().toLowerCase()===t)}_renderOptions(e){let t=this.querySelector(`.search-select-options`),n=this.querySelector(`.search-select-empty`);if(!t)return;let r=(e||``).trim(),i=r.toLowerCase(),a=this._readOptions();i&&(a=a.filter(e=>this._matches(e,i)));let o=this._listboxId||`${this.id||`wui-multiselect`}-listbox`,s=this._allowCustom&&r&&!this._optionNamed(r),c=a.map((e,t)=>{let n=this._values.includes(String(e.value)),r=`${o}-opt-${t}`;return T(e)?E(e,r,n):`<button type="button" role="option" id="${k(r)}" class="search-select-option${n?` selected`:``}" data-value="${k(e.value)}" aria-selected="${n}"><span class="ms-opt-label">${v(e)}</span><span class="ms-check">${f(`check`)}</span></button>`});s&&c.push(`<button type="button" role="option" id="${k(`${o}-opt-${a.length}`)}" class="search-select-option search-select-option-custom" data-value="${k(r)}" data-custom="true" aria-selected="false">Add “${_(r)}”</button>`),t.innerHTML=c.join(``),n&&(n.hidden=a.length>0),this._active=-1,this._combobox()?.removeAttribute(`aria-activedescendant`),this._allowCustom&&this._syncCustomMenu?.(),this._reanchor?.()}_combobox(){return this._allowCustom?this.querySelector(`[data-input]`):this.querySelector(`.search-select-control`)}_setCustomError(e){this._customError=e||``;let t=this.querySelector(`.wui-ms-custom-error`),n=this.querySelector(`[data-input]`);t&&(t.textContent=this._customError,t.hidden=!this._customError),n&&(this._customError?n.setAttribute(`aria-invalid`,`true`):n.removeAttribute(`aria-invalid`)),this._syncInvalid()}_customRefusal(e){let t=this.getAttribute(`custom-invalid-message`)||`Enter a valid value.`,n=this.getAttribute(`custom-pattern`);if(n){let r=O(n);if(r&&!r.test(e))return t}let r=this._validateCustom;if(r){let n=r(e);return n===!0?``:typeof n==`string`&&n?n:t}return``}_commitTyped(e){let t=e.trim().replace(/,+$/,``).trim();if(!t)return``;let n=this._optionNamed(t),r;if(n){if(n.disabled)return n.disabledHint||this.getAttribute(`custom-invalid-message`)||`That option is not available.`;r=String(n.value)}else{let e=this._customRefusal(t);if(e)return e;r=t}let i=r.toLowerCase();return this._values.some(e=>e.toLowerCase()===i)||(this._values=[...this._values,r]),``}_wire(){this._teardown();let i=this.querySelector(`.search-select-control`),o=this.querySelector(`.search-select-menu`),s=this.querySelector(`.search-select-input`),c=this.querySelector(`.search-select-clear`),l=this.querySelector(`.search-select-options`),f=this._allowCustom,h=f?this.querySelector(`[data-input]`):null,g=h||i;if(!i||!o)return;let _=()=>u(this),v=()=>n(i,o,{matchWidth:!0}),y=()=>[...this.querySelectorAll(`.search-select-option`)],S=()=>y().filter(e=>!e.hidden),w=(e,{reveal:t=!0}={})=>{let n=S();this._active=e,p(l,e>=0&&n[e]||null),e>=0&&n[e]?(t&&n[e].scrollIntoView({block:`nearest`}),g.setAttribute(`aria-activedescendant`,n[e].id)):g.removeAttribute(`aria-activedescendant`)},T=!1,E=()=>f?T:!o.hidden,D=()=>{let e=T&&y().length>0,t=o.hidden;o.hidden=!e,g.setAttribute(`aria-expanded`,String(e)),i.classList.toggle(`open`,e),e&&t&&v()};this._syncCustomMenu=f?D:null;let O=()=>{E()&&v()},k=()=>{_()||(e(this,O),f?(T=!0,D()):(o.hidden=!1,i.setAttribute(`aria-expanded`,`true`),i.classList.add(`open`),v(),s&&(s.value=``,this._renderOptions(``),s.focus())))},A=()=>{let e=f?T:i.getAttribute(`aria-expanded`)===`true`;f?(T=!1,D()):(o.hidden=!0,i.setAttribute(`aria-expanded`,`false`),i.classList.remove(`open`)),w(-1),clearTimeout(this._typeaheadTimer),this._typeaheadTimer=null,this._typeahead=``,t(this),e&&this.dispatchEvent(new Event(`wui-multiselect:close`,{bubbles:!0}))},j=()=>{d(this,this._values),this.dispatchEvent(new Event(`change`,{bubbles:!0}))},M=e=>{let t=String(e);if(this._values.includes(t))this._values=this._values.filter(e=>e!==t);else if(f&&this._values.some(e=>e.toLowerCase()===t.toLowerCase()))return;else this._values=[...this._values,t];this._renderControl(),this._renderOptions(this._query()),j()},N=e=>{this._values=this._values.filter(t=>t!==String(e)),this._renderControl(),this._renderOptions(this._query()),j()},P=(e,{quiet:t=!1}={})=>{let n=this._values.length,r=x(e,C)?b(e,C):[e],i=[],a=``;for(let e of r){let t=this._commitTyped(e);t&&(i.push(e.trim()),a||=t)}t&&i.length||(h.value=i.join(`, `),this._setCustomError(a),this._values.length!==n&&(this._renderControl(),j()),this._renderOptions(h.value))},F=e=>{e&&e.getAttribute(`aria-disabled`)!==`true`&&(e.dataset.custom===`true`?P(e.dataset.value):(M(e.dataset.value),h?.value&&(h.value=``,this._setCustomError(``),this._renderOptions(``))))};i.addEventListener(`click`,e=>{if(_())return;let t=e.target.closest(`[data-remove]`);if(t)e.stopPropagation(),N(t.dataset.remove),h?.focus();else if(h){let t=E();e.target!==h&&h.focus(),e.target===h||!t?k():A()}else E()?A():k()}),l.addEventListener(`click`,e=>{let t=e.target.closest(`.search-select-option`);t&&(F(t),(h||s)?.focus())}),l.addEventListener(`mousemove`,e=>{let t=e.target.closest(`.search-select-option`);t&&!t.classList.contains(`is-active`)&&w(S().indexOf(t),{reveal:!1})}),l.addEventListener(`mouseleave`,()=>w(-1)),l.addEventListener(`error`,e=>{e.target?.classList?.contains(`avatar-img`)&&e.target.remove()},!0),s?.addEventListener(`input`,()=>{this._renderOptions(s.value),c&&(c.hidden=!s.value),w(-1)}),this._navHandler=m({getVisibleOptions:S,getActive:()=>this._active,setActive:e=>w(e),onEnter:e=>{e?F(e):h?.value.trim()&&P(h.value)},onEscape:()=>{this._navHandler.clearTypeahead(),A(),h||i.focus()}});let I=e=>{if(_())return;let t=h||s;e.key===`Backspace`&&!t?.value&&this._values.length?N(this._values[this._values.length-1]):(e.key===`Escape`&&E()&&(e.preventDefault(),e.stopPropagation()),this._navHandler.handler(e))};if(s?.addEventListener(`keydown`,I),c?.addEventListener(`click`,()=>{s.value=``,this._renderOptions(``),c.hidden=!0,s.focus()}),h){let e=e=>{e.target!==h&&e.preventDefault()};l.addEventListener(`mousedown`,e),i.addEventListener(`mousedown`,e),r(),h.addEventListener(`focus`,()=>{a()&&k()}),h.addEventListener(`input`,()=>{this._customError&&this._setCustomError(``),this._renderOptions(h.value),k()}),h.addEventListener(`keydown`,e=>{if(!_()){if(e.key===`,`&&h.value.trim())e.preventDefault(),P(h.value);else if(e.key===`Enter`){if(this._active<0&&!h.value.trim())return;this._navHandler.handler(e)}else e.key!==`ArrowDown`&&e.key!==`ArrowUp`||E()||k(),I(e)}}),h.addEventListener(`paste`,e=>{if(_())return;let t=e.clipboardData?.getData(`text/plain`)??``;x(t,C)&&(e.preventDefault(),P(`${h.value}${t}`))}),h.addEventListener(`blur`,e=>{e.relatedTarget&&this.contains(e.relatedTarget)||(h.value.trim()&&P(h.value,{quiet:!0}),A())})}else i.addEventListener(`keydown`,e=>{E()?I(e):_()||(e.key===`ArrowDown`||e.key===`Enter`||e.key===` `)&&(e.preventDefault(),k())});this._bindGlobal=()=>{this._teardown(),!this._ro&&typeof ResizeObserver<`u`&&(this._ro=new ResizeObserver(()=>this._collapseChips()),this._ro.observe(this)),this._onDocClick=e=>{E()&&!this.contains(e.target)&&A()},document.addEventListener(`click`,this._onDocClick),E()&&e(this,O)},this._bindGlobal()}_teardown(){this._onDocClick&&=(document.removeEventListener(`click`,this._onDocClick),null),t(this),this._navHandler?.teardown()}disconnectedCallback(){this._teardown(),this._ro?.disconnect(),this._ro=null}},C=[`,`,`;`,`
-`,`	`],w=[[`description`,`description`],[`avatar`,`avatar`],[`initials`,`initials`],[`disabled-hint`,`disabledHint`]],T=e=>!!(e.description||e.avatar||e.initials||e.disabled||e.disabledHint),E=(e,t,n)=>{let r=!!e.disabled,a=e.description?`<span class="wui-opt-desc">${_(e.description)}</span>`:``,o=e.disabledHint&&r?`<span class="wui-opt-hint">${_(e.disabledHint)}</span>`:``;return`<button type="button" role="option" id="${k(t)}" class="search-select-option wui-opt-rich${n?` selected`:``}" data-value="${k(e.value)}" aria-selected="${n}"${r?` aria-disabled="true"`:``}><span class="ms-opt-label"><span class="wui-opt-name">${v(e)}</span>${a}</span>${o}${i(e)}<span class="ms-check">${f(`check`)}</span></button>`},D=/* @__PURE__ */ new Map,O=e=>{if(D.has(e))return D.get(e);let t=null;try{t=RegExp(`^(?:${e})$`,`u`)}catch{o(`<wui-multiselect> custom-pattern is not a valid regular expression and is ignored: ${e}`)}return D.set(e,t),t},k=e=>String(e??``).replace(/&/g,`&amp;`).replace(/"/g,`&quot;`).replace(/</g,`&lt;`);export{S as t};

package/dist/WuiSelect-1TmFVLek.js

@@ -1,15 +0,0 @@
-import{n as e,r as t,t as n}from"./anchorOverlay-CBMAnDUt.js";import{t as r}from"./elementBase-DV9IZZCu.js";import{r as i,t as a}from"./fieldState-D-zQcXUS.js";import{t as o}from"./formMirror-BMQTenSi.js";import{t as s}from"./iconGlyphs.g-gURMSeyB.js";import{n as c,t as l}from"./listboxKeyNav-DMIvs9d6.js";import{i as u,n as d,r as f,t as p}from"./optionLabel-CjrUbe2a.js";var m=class extends r{static formAssociated=!0;static get observedAttributes(){return[`value`,`placeholder`,`search-placeholder`,`empty-text`,`searchable`,`disabled`,`readonly`,`loading`,`compact`,`size`,`clearable`,`icon`,`prefix`,`aria-label`,`aria-invalid`,`open`]}_accessibleName(){return this.getAttribute(`aria-label`)||this.getAttribute(`placeholder`)||`Select`}_valueTitle(e){return e&&!this.hasAttribute(`title`)?u(e).trim():``}constructor(){super();try{this._internals=this.attachInternals()}catch{this._internals=null}this._value=``,this._optionsProp=null,this._active=-1,this._typeahead=``,this._typeaheadTimer=null}connectedCallback(){this._rendered?this._bindGlobal?.():this.render()}attributeChangedCallback(e,t,n){e===`value`?this.value=n:e===`aria-invalid`?this._syncInvalid():e===`open`?this._syncPinned?.():this._rendered&&this.render()}_syncInvalid(){let e=this.querySelector(`.search-select-control`);e&&(this.hasAttribute(`aria-invalid`)?e.setAttribute(`aria-invalid`,`true`):e.removeAttribute(`aria-invalid`))}formResetCallback(){this.value=this._defaultValue||``}get value(){return this._value}set value(e){this._value=e==null?``:String(e),o(this,this._value),this._syncSelected(),this._syncReset()}set options(e){this._optionsProp=Array.isArray(e)?e:null,this.isConnected&&this.render()}get options(){return this._readOptions()}_snapshotDeclared(){if(this._declared)return;let e=[...this.querySelectorAll(`:scope > wui-option`)];e.length&&(this._declared=e.map(e=>({value:e.getAttribute(`value`)??e.textContent.trim(),label:e.innerHTML,icon:e.getAttribute(`icon`)||void 0,[p]:!0,selected:e.hasAttribute(`selected`)})))}_readOptions(){return this._optionsProp?this._optionsProp:(this._snapshotDeclared(),this._declared||[])}render(){this._defaultValue===void 0&&(this._defaultValue=this.getAttribute(`value`)||``),this._snapshotDeclared();let e=this._readOptions(),t=this.hasAttribute(`searchable`),n=this.hasAttribute(`clearable`),r=this.getAttribute(`size`),a=r===`sm`?` search-select-sm`:r===`lg`?` search-select-lg`:``,c=this.getAttribute(`icon`),l=this.getAttribute(`prefix`),u=this.getAttribute(`placeholder`)||`Select...`,p=this.getAttribute(`search-placeholder`)||`Search...`,m=this.getAttribute(`empty-text`)||`No matches`,g=this._value!==``&&e.find(e=>String(e.value)===String(this._value))||e.find(e=>e.selected)||e.find(e=>String(e.value)===String(this._value));g&&(this._value=String(g.value));let _=this._valueTitle(g);o(this,this._value),this.id||=`wui-select-${Math.random().toString(36).slice(2,9)}`;let v=`${this.id}-listbox`;this._listboxId=v;let y=e.map((e,t)=>{let n=String(e.value)===String(this._value);return`<button type="button" role="option" id="${h(`${v}-opt-${t}`)}" class="search-select-option${n?` selected`:``}" data-value="${h(e.value)}" aria-selected="${n}">${f(e)}</button>`}).join(``);this.innerHTML=`
-      <div class="search-select${this.hasAttribute(`compact`)?` search-select-compact`:``}${a}">
-        <button type="button" role="combobox" class="input search-select-control" aria-haspopup="listbox" aria-expanded="false" aria-controls="${h(v)}" aria-label="${h(this._accessibleName())}"${_?` title="${h(_)}"`:``}${this.hasAttribute(`aria-invalid`)?` aria-invalid="true"`:``}${this.hasAttribute(`disabled`)?` disabled`:``}>
-          ${c?s(c,{className:`search-select-icon`}):``}
-          ${l?`<span class="search-select-prefix">${d(l)}</span>`:``}
-          <span class="${g?``:`search-select-placeholder`}" data-label>${g?f(g):d(u)}</span>
-          ${n?`<span class="search-select-reset" role="button" aria-label="Clear selection" hidden>${s(`x`)}</span>`:``}
-          ${s(`chevron-down`,{className:`search-select-caret`})}
-        </button>
-        <div class="search-select-menu search-select-menu-fixed" hidden>
-          ${t?`<div class="search-select-search">${s(`search`)}<input class="search-select-input" placeholder="${h(p)}" aria-label="${h(p)}" aria-autocomplete="list" /><button type="button" class="search-select-clear" aria-label="Clear search" hidden>${s(`x`)}</button></div>`:``}
-          <div class="search-select-options" role="listbox" id="${h(v)}" tabindex="-1">${y}</div>
-          <div class="search-select-empty" hidden>${d(m)}</div>
-        </div>
-      </div>`,this._rendered=!0,o(this,this._value),this._wire(),this._syncReset(),i(this,this.querySelector(`.search-select-control`))}_refs(){return{control:this.querySelector(`.search-select-control`),menu:this.querySelector(`.search-select-menu`),label:this.querySelector(`[data-label]`),reset:this.querySelector(`.search-select-reset`),search:this.querySelector(`.search-select-input`),clear:this.querySelector(`.search-select-clear`),empty:this.querySelector(`.search-select-empty`),optionsWrap:this.querySelector(`.search-select-options`)}}_optionEls(){return[...this.querySelectorAll(`.search-select-option`)]}_visible(){return this._optionEls().filter(e=>!e.hidden)}_syncSelected(){let{label:e,control:t}=this._refs(),n=this._readOptions().find(e=>String(e.value)===String(this._value));for(let e of this._optionEls()){let t=e.dataset.value===String(this._value);e.classList.toggle(`selected`,t),e.setAttribute(`aria-selected`,String(t))}if(e&&(e.innerHTML=n?f(n):d(this.getAttribute(`placeholder`)||`Select...`),e.classList.toggle(`search-select-placeholder`,!n)),t){let e=this._valueTitle(n);e?t.setAttribute(`title`,e):t.removeAttribute(`title`)}}_syncReset(){let{reset:e}=this._refs();e&&(e.hidden=!(this.hasAttribute(`clearable`)&&this._value!==``&&!a(this)))}_wire(){this._teardown();let r=this._refs();if(!r.control||!r.menu)return;let i=()=>{let e=this.hasAttribute(`open`)?{below:!0}:{};if(this.hasAttribute(`compact`)){let t=r.control.getBoundingClientRect();r.menu.style.width=`max-content`,r.menu.style.minWidth=`${t.width}px`,r.menu.style.maxWidth=`280px`,n(r.control,r.menu,e)}else n(r.control,r.menu,{matchWidth:!0,...e})},o=(e,{reveal:t=!0}={})=>{let n=this._visible();this._active=e,c(r.optionsWrap,e>=0&&n[e]||null),e>=0&&n[e]?(t&&n[e].scrollIntoView({block:`nearest`}),r.control.setAttribute(`aria-activedescendant`,n[e].id)):r.control.removeAttribute(`aria-activedescendant`)},s=e=>{let t=e.trim().toLowerCase(),n=0;for(let e of this._optionEls()){let r=!t||e.textContent.toLowerCase().includes(t);e.hidden=!r,r&&(n+=1)}r.empty&&(r.empty.hidden=n>0),r.clear&&(r.clear.hidden=!t),r.menu.hidden||i()},u=()=>!r.menu.hidden,d=()=>{u()&&i()},f=({focus:t=!0}={})=>{r.menu.hidden=!1,r.control.setAttribute(`aria-expanded`,`true`),r.control.classList.add(`open`),i(),e(this,d),r.search&&(r.search.value=``,s(``),t&&r.search.focus()),t&&o(this._optionEls().findIndex(e=>e.classList.contains(`selected`)))},p=({force:e=!1}={})=>{(e||!this.hasAttribute(`open`))&&(r.menu.hidden=!0,r.control.setAttribute(`aria-expanded`,`false`),r.control.classList.remove(`open`),o(-1),t(this))},m=e=>{try{this.value=e.dataset.value,this.dispatchEvent(new Event(`change`,{bubbles:!0}))}finally{p(),r.control.focus()}};this._navHandler=l({getVisibleOptions:()=>this._visible(),getActive:()=>this._active,setActive:e=>o(e),onEnter:(e,t)=>{e?m(e):r.search&&r.search.value.trim()!==``&&t.length===1&&m(t[0])},onEscape:()=>{this._navHandler.clearTypeahead(),p(),r.control.focus()}});let h=e=>{e.key===`Escape`&&(e.preventDefault(),e.stopPropagation()),this._navHandler.handler(e)};r.reset?.addEventListener(`click`,e=>{e.stopPropagation(),this.value=``,this.dispatchEvent(new Event(`change`,{bubbles:!0})),p(),r.control.focus()}),r.control.addEventListener(`click`,()=>{u()?p():a(this)||f()}),r.control.addEventListener(`keydown`,e=>{u()?h(e):(e.key===`ArrowDown`||e.key===`Enter`||e.key===` `)&&(e.preventDefault(),a(this)||f())}),r.optionsWrap.addEventListener(`click`,e=>{let t=e.target.closest(`.search-select-option`);t&&m(t)}),r.optionsWrap.addEventListener(`mousemove`,e=>{let t=e.target.closest(`.search-select-option`);t&&!t.classList.contains(`is-active`)&&o(this._visible().indexOf(t),{reveal:!1})}),r.optionsWrap.addEventListener(`mouseleave`,()=>o(-1)),r.search?.addEventListener(`input`,()=>{s(r.search.value),o(-1)}),r.clear?.addEventListener(`click`,()=>{r.search.value=``,s(``),r.search.focus()}),r.menu.addEventListener(`keydown`,h),this._bindGlobal=()=>{this._teardown(),this._onDocClick=e=>{u()&&!this.contains(e.target)&&p()},document.addEventListener(`click`,this._onDocClick),u()&&e(this,d)},this._syncPinned=()=>this.hasAttribute(`open`)?f({focus:!1}):p({force:!0}),this.hasAttribute(`open`)&&f({focus:!1}),this._bindGlobal()}_teardown(){this._onDocClick&&=(document.removeEventListener(`click`,this._onDocClick),null),t(this),this._navHandler?.teardown()}disconnectedCallback(){this._teardown()}},h=e=>String(e??``).replace(/&/g,`&amp;`).replace(/"/g,`&quot;`).replace(/</g,`&lt;`);export{m as t};

package/dist/WuiTagInput-Dkw2q0KS.js

@@ -1,6 +0,0 @@
-import{t as e}from"./elementBase-DV9IZZCu.js";import{n as t,r as n,t as r}from"./fieldState-D-zQcXUS.js";import{n as i}from"./formMirror-BMQTenSi.js";import{t as a}from"./iconGlyphs.g-gURMSeyB.js";import{i as o,n as s,r as c,t as l}from"./tokenCommit-BKckxgtg.js";var u=class extends e{static formAssociated=!0;_accessibleName(){return this.getAttribute(`aria-label`)||this.getAttribute(`placeholder`)||`Add tags`}static get observedAttributes(){return[`placeholder`,`disabled`,`readonly`,`loading`,`size`,`max-tags`,`aria-label`,`separators`,`allow-duplicates`,`aria-invalid`]}constructor(){super(),this._values=[],this._draftText=``;try{this._internals=this.attachInternals()}catch{this._internals=null}}connectedCallback(){if(this._rendered)this._wire();else{if(!this._valuesInit&&!this._values.length){let e=this.getAttribute(`value`);if(e!=null&&e!==``)this._values=e.split(`,`).map(e=>e.trim()).filter(Boolean);else{let e=[...this.querySelectorAll(`:scope > wui-tag`)].map(e=>e.textContent.trim());e.length&&(this._values=e.map(String))}}this._valuesInit=!0,this._defaultCaptured||=(this._defaultValues=this._values.slice(),!0),this.render()}}formResetCallback(){this.values=(this._defaultValues||[]).slice(),this._draftText=``;let e=this.querySelector(`[data-input]`);e&&(e.value=``)}attributeChangedCallback(e){e===`aria-invalid`?this._syncInvalid():this._rendered&&(e===`separators`||e===`allow-duplicates`?this._wire():this.render())}_syncInvalid(){let e=this.querySelector(`.search-select-control`);e&&(this.hasAttribute(`aria-invalid`)?e.setAttribute(`aria-invalid`,`true`):e.removeAttribute(`aria-invalid`))}get values(){return this._values.slice()}set values(e){this._values=Array.isArray(e)?e.map(String):[],i(this,this._values),this._rendered&&this._renderControl()}render(){let e=this.getAttribute(`size`),t=e===`sm`?` search-select-sm`:e===`lg`?` search-select-lg`:``;i(this,this._values),this.innerHTML=`
-      <div class="search-select${t}">
-        <div class="input search-select-control search-select-multi"${this.hasAttribute(`aria-invalid`)?` aria-invalid="true"`:``}${this.hasAttribute(`disabled`)?` aria-disabled="true"`:``}>
-          <div class="ms-chips" data-chips><input type="text" class="ms-input" data-input aria-label="${f(this._accessibleName())}" placeholder="${f(this.getAttribute(`placeholder`)||`Add…`)}" autocomplete="off"${this.hasAttribute(`disabled`)?` disabled`:``}${r(this)?` readonly`:``}/></div>
-        </div>
-      </div>`,this._rendered=!0,i(this,this._values),this._renderControl(),this._wire(),n(this,this.querySelector(`.input.search-select-control.search-select-multi`))}_renderControl(){let e=this.querySelector(`[data-chips]`);if(!e)return;for(let t of e.querySelectorAll(`:scope > .chip`))t.remove();if(!this._values.length)return;let n=!t(this)&&!this.hasAttribute(`loading`);e.querySelector(`[data-input]`).insertAdjacentHTML(`beforebegin`,this._values.map(e=>{let t=n?`<button type="button" class="chip-remove" data-remove="${f(e)}" aria-label="Remove ${f(e)}">${a(`x`)}</button>`:``;return`<span class="chip chip-sm"><span class="chip-label">${d(e)}</span>${t}</span>`}).join(``))}_wire(){this._teardown();let e=this.querySelector(`.search-select-control`),t=this.querySelector(`[data-input]`);if(!e||!t)return;let n=()=>r(this),a=(this.getAttribute(`separators`)||`enter,comma`).split(`,`).map(e=>e.trim()),u=this.getAttribute(`max-tags`),d=this.hasAttribute(`allow-duplicates`),f=new Set(a.map(c).filter(Boolean)),p=()=>{i(this,this._values),this.dispatchEvent(new Event(`change`,{bubbles:!0}))},m=e=>{let t=e.trim();if(!t||u&&this._values.length>=parseInt(u,10))return;let n=d?t:t.toLowerCase();(!this._values.some(e=>d?e===t:e.toLowerCase()===n)||d)&&(this._values.push(t),this._renderControl(),p())},h=()=>{!n()&&t.value.trim()&&(m(t.value.replace(/,+$/,``)),t.value=``)},g=e=>{this._values=this._values.filter(t=>t!==e),this._renderControl(),p()},_=e=>{if(!n()){if(e.key===`Enter`&&f.has(`Enter`))e.preventDefault(),m(t.value),t.value=``;else if(e.key===`,`&&f.has(`,`))e.preventDefault(),m(t.value.replace(/,+$/,``)),t.value=``;else if(e.key===` `&&f.has(` `)){let n=t.value.trim();n&&(e.preventDefault(),m(n),t.value=``)}else e.key===`Tab`&&f.has(`Tab`)?(e.preventDefault(),m(t.value),t.value=``):(e.key===`Backspace`&&!t.value&&this._values.length&&(e.preventDefault(),g(this._values[this._values.length-1])),e.key===`Escape`&&(t.value=``))}},v=e=>{if(e.preventDefault(),n())return;let r=e.clipboardData.getData(`text/plain`),i=[];for(let e of a){let t=s(e)??e;if(l(r,[t])){i.push(...o(r,[t]));break}}i.length||i.push(r.trim());for(let e of i)if(m(e),u&&this._values.length>=parseInt(u,10))break;t.value=``};this._onControlClick=e=>{let r=e.target.closest(`[data-remove]`);if(r){if(n())return;e.stopPropagation(),g(r.dataset.remove),t.focus()}else t.focus()},this._onInputKey=_,this._onInputPaste=v,this._onInputBlur=h,e.addEventListener(`click`,this._onControlClick),t.addEventListener(`keydown`,this._onInputKey),t.addEventListener(`paste`,this._onInputPaste),t.addEventListener(`blur`,this._onInputBlur),this._form=this.closest(`form`),this._onFormSubmit=h,this._form&&this._form.addEventListener(`submit`,this._onFormSubmit,!0),this._onDocClick=e=>{this.contains(e.target)||t.blur()},document.addEventListener(`click`,this._onDocClick)}_teardown(){this._onDocClick&&=(document.removeEventListener(`click`,this._onDocClick),null);let e=this.querySelector(`.search-select-control`),t=this.querySelector(`[data-input]`);e&&this._onControlClick&&e.removeEventListener(`click`,this._onControlClick),t&&this._onInputKey&&(t.removeEventListener(`keydown`,this._onInputKey),t.removeEventListener(`paste`,this._onInputPaste),t.removeEventListener(`blur`,this._onInputBlur)),this._form&&this._onFormSubmit&&(this._form.removeEventListener(`submit`,this._onFormSubmit,!0),this._form=null)}disconnectedCallback(){this._teardown()}},d=e=>String(e??``).replace(/&/g,`&amp;`).replace(/</g,`&lt;`).replace(/>/g,`&gt;`),f=e=>String(e??``).replace(/&/g,`&amp;`).replace(/"/g,`&quot;`).replace(/</g,`&lt;`);export{u as t};

package/dist/WuiTour-ClCXfOtI.js

@@ -1 +0,0 @@
-import{n as e,r as t}from"./anchorOverlay-CBMAnDUt.js";import{n,t as r}from"./buttonClass-DpG9WzgJ.js";import{t as i}from"./elementBase-DV9IZZCu.js";import{t as a}from"./tourOpenMark-nPeAJFSo.js";var o=`data-advance`,s=`wui-tour-hint`,c=`Click {actionName} to continue.`,l=`a[href], button, input, select, textarea, summary, [tabindex], [contenteditable]`,u=(e,t)=>e?.advanceOn===`click`&&!!t,d=e=>(e??``).replace(/\s+/g,` `).trim();function f(e){let t=e.ownerDocument,n=(e.getAttribute(`aria-labelledby`)||``).split(/\s+/).filter(Boolean),r=e.tagName===`INPUT`&&/^(button|submit|reset)$/.test(e.type)?e.value:``,i=[n.map(e=>t.getElementById(e)?.textContent??``).join(` `),e.getAttribute(`aria-label`),Array.from(e.labels??[],e=>e.textContent).join(` `),e.getAttribute(`alt`),r,e.textContent,e.getAttribute(`title`)];for(let e of i){let t=d(e);if(t)return t}return``}function p(e){for(let t of[e,...e.querySelectorAll(l)])if(t.tabIndex>=0&&!t.disabled)return t;return null}function m(e,t,n){let r=(e.getAttribute(`aria-describedby`)||``).split(/\s+/).filter(e=>e&&e!==t);n&&r.push(t),r.length>0?e.setAttribute(`aria-describedby`,r.join(` `)):e.removeAttribute(`aria-describedby`)}function h(e,t){let n=e.querySelector(`.${s}`),r=e.querySelector(`.wui-tour-text`)?.id,i=r?`${r.replace(/-text$/,``)}-hint`:``;t?(n||(n=e.ownerDocument.createElement(`p`),n.className=s,i&&(n.id=i),e.querySelector(`.wui-tour-actions`).before(n)),n.textContent=t,i&&m(e,i,!0)):(n?.remove(),i&&m(e,i,!1))}var ee=e=>getComputedStyle(e).animationName;function g(e,{layer:t,spot:n,card:r},i,a){let s=u(i,a);t.toggleAttribute(o,s&&!(t.getRootNode()instanceof ShadowRoot)),n.hasAttribute(o)&&(n.removeAttribute(o),s&&ee(n)),s&&n.setAttribute(o,``);let l=r.querySelector(`.wui-tour-next`);l.classList.toggle(`btn-primary`,!s),l.classList.toggle(`btn-link`,s);let p=s?d(i.actionLabel)||f(a):``,m=e.getAttribute(`advance-label`)||c,g=p?m.replace(/\{actionName\}/g,()=>p):``;return h(r,g),g}function _(e,t,n){if(!u(e,t))return()=>{};let r=null,i=()=>{r??=setTimeout(n,0)};return t.addEventListener(`click`,i),()=>{t.removeEventListener(`click`,i),clearTimeout(r)}}function te(e,t,n,r){return e.contains(r)||u(t,n)&&n.contains(r)}function ne(e,{card:t,active:n,step:r,target:i}){let a=Array.from(t.querySelectorAll(`button`)).filter(e=>!e.hidden),o=u(r,i)?p(i):null;o&&a.push(o);let s=a.findIndex(e=>e===n||e===o&&i.contains(n));e.preventDefault(),a[s===-1?e.shiftKey?a.length-1:0:(s+(e.shiftKey?-1:1)+a.length)%a.length].focus()}var v=2/3,y=1e3,re=/* @__PURE__ */ new Set([`top`,`left`,`width`,`height`]),b=/* @__PURE__ */ new WeakMap,x=(e,t)=>typeof e.getAnimations==`function`?e.getAnimations().filter(t):[],S=e=>e.transitionProperty===`opacity`,ie=e=>re.has(e.transitionProperty),ae=e=>typeof e.animationName==`string`&&e.animationName.startsWith(`wui-tour-`);function C(e){return e.length===0?null:new Promise(t=>{let n=setTimeout(t,y);Promise.allSettled(e.map(e=>e.finished)).then(()=>{clearTimeout(n),t()})})}function oe(e){let t=e.parentElement?.querySelector(`:scope > .wui-tour-spot`),n=0;for(let e of t?x(t,ie):[]){let t=e.effect?.getComputedTiming?.();if(typeof t?.duration!=`number`)continue;let r=typeof e.currentTime==`number`?e.currentTime:0;n=Math.max(n,(t.delay??0)+t.duration*v-r)}return n}function w(e){let t=oe(e);t>0?e.style.setProperty(`--wui-tour-card-delay`,`${Math.round(t)}ms`):e.style.removeProperty(`--wui-tour-card-delay`),e.dataset.state=`entering`;let n={};b.set(e,n);let r=()=>{b.get(e)===n&&e.dataset.state===`entering`&&(e.dataset.state=`shown`)},i=x(e,ae);i.length===0?r():Promise.allSettled(i.map(e=>e.finished)).then(r)}function T(e){return e.dataset.state=`leaving`,C(x(e,S))}function se(e){let t=e.classList.contains(`wui-tour-layer`)?e:e.shadowRoot?.querySelector(`.wui-tour-layer`);t&&(t.dataset.state=`leaving`);let n=t?C(x(t,S)):null;n?(e.setAttribute(`inert`,``),n.then(()=>e.remove())):e.remove()}var E=2,D=12,O=8,k=4,A=20,ce=`(max-width: 575.98px)`,le=[`bottom`,`top`,`right`,`left`],j=[`top-left`,`top-right`,`bottom-right`,`bottom-left`],M,N=(e,t,n)=>Math.max(t,Math.min(e,n)),P=(e,t,n,r)=>(Math.max(e,n)+Math.min(t,r))/2;function F(e,t){if(!t?.scrollIntoView)return;e.style.maxHeight=``;let n=V(e),r=e.offsetHeight+D;if(t.getBoundingClientRect().height+4+r*2<=n.bottom-n.top){t.scrollIntoView({block:`center`,inline:`nearest`});return}let i=t.style.scrollMarginTop;t.style.scrollMarginTop=`${n.top+r+E}px`,t.scrollIntoView({block:`start`,inline:`nearest`}),t.style.scrollMarginTop=i}function I(e,t,n){let r=e.style,i=t.style,a=H(t);if(!n){r.top=`50%`,r.left=`50%`,r.width=`0px`,r.height=`0px`,r.boxShadow=`0 0 0 100vmax var(--color-scrim-strong)`;for(let e of j)r.removeProperty(`border-${e}-radius`),r.removeProperty(`corner-${e}-shape`);t.dataset.placement=`center`,a.hidden=!0,i.position=`fixed`,i.top=`50%`,i.left=`50%`,i.transform=`translate(-50%, -50%)`,i.maxHeight=`calc(100vh - 16px)`;return}r.boxShadow=``,i.transform=``,i.position=`fixed`;let o=n.getBoundingClientRect();r.top=`${o.top}px`,r.left=`${o.left}px`,r.width=`${o.width}px`,r.height=`${o.height}px`,L(r,n);let s=t.scrollTop;i.maxHeight=``;let c={width:t.offsetWidth,height:t.offsetHeight},l=V(t),u=l.bottom-l.top,d={bottom:l.bottom-o.bottom-D,top:o.top-D-l.top,right:l.right-o.right-D,left:o.left-D-l.left},f=window.matchMedia(ce).matches,p=le.find(e=>e===`top`||e===`bottom`?c.height<=d[e]+1:!f&&c.width<=d[e]+1&&c.height<=u+1),m=Math.min(o.bottom,l.bottom+O)-Math.max(o.top,l.top-O);p?R(t,a,p,o,l,c):m>=Math.min(c.height,u)+8?z(t,a,o,l,c):B(t,a,d.bottom>=d.top?`bottom`:`top`,o,l,c,d),t.scrollTop=s}function L(e,t){M??=CSS.supports(`corner-top-left-shape`,`squircle`);let n=getComputedStyle(t);for(let t of j)e.setProperty(`border-${t}-radius`,n.getPropertyValue(`border-${t}-radius`)),M&&e.setProperty(`corner-${t}-shape`,n.getPropertyValue(`corner-${t}-shape`))}function R(e,t,n,r,i,a){let o=n===`top`||n===`bottom`,s,c,l;if(o){let e=P(r.left,r.right,i.left,i.right);s=N(e-a.width/2,i.left,i.right-a.width),c=n===`bottom`?r.bottom+D:r.top-D-a.height,l=N(e-s,A,a.width-A)}else{let e=P(r.top,r.bottom,i.top,i.bottom);c=N(e-a.height/2,i.top,i.bottom-a.height),s=n===`right`?r.right+D:r.left-D-a.width,l=N(e-c,A,a.height-A)}e.dataset.placement=n,e.style.top=`${c}px`,e.style.left=`${s}px`,t.hidden=!1,t.style.left=o?`${l-e.clientLeft-t.offsetWidth/2}px`:``,t.style.top=o?``:`${l-e.clientTop-t.offsetHeight/2}px`}function z(e,t,n,r,i){let a=r.bottom-r.top;e.dataset.placement=`overlap`,t.hidden=!0,e.style.maxHeight=i.height>a?`${Math.max(a,0)}px`:``;let o=Math.min(n.bottom,r.bottom)-k;e.style.top=`${Math.max(r.top,o-Math.min(i.height,a))}px`,e.style.left=`${N(n.left+k,r.left,r.right-i.width)}px`}function B(e,t,n,r,i,a,o){let s=Math.max(o[n],0),c=Math.min(a.height,s);e.dataset.placement=n,t.hidden=!0,e.style.maxHeight=a.height>s?`${s}px`:``,e.style.top=`${n===`bottom`?r.bottom+D:r.top-D-c}px`;let l=P(r.left,r.right,i.left,i.right);e.style.left=`${N(l-a.width/2,i.left,i.right-a.width)}px`}function V(e){let t=e.parentElement,n=t?getComputedStyle(t):null,r=e=>Number.parseFloat(n?.[e])||0;return{top:r(`paddingTop`)+O,bottom:window.innerHeight-r(`paddingBottom`)-O,left:r(`paddingLeft`)+O,right:window.innerWidth-r(`paddingRight`)-O}}function H(e){let t=e.querySelector(`:scope > .wui-tour-arrow`);return t||(t=document.createElement(`span`),t.className=`wui-tour-arrow`,t.setAttribute(`aria-hidden`,`true`),t.hidden=!0,e.append(t)),t}var U=0;function W(e,t,i){let a=`wui-tour-end-${++U}`,o=e.createElement(`div`);return o.className=`wui-tour-card wui-tour-end`,o.dataset.layout=`center`,o.setAttribute(`role`,`dialog`),i&&o.setAttribute(`aria-modal`,`true`),o.tabIndex=-1,o.setAttribute(`aria-labelledby`,`${a}-title`),o.setAttribute(`aria-describedby`,`${a}-message`),o.innerHTML=` <div class="wui-tour-end-mark" aria-hidden="true"><svg viewBox="0 0 24 24" focusable="false"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></div> <h2 class="wui-tour-title wui-tour-end-title" id="${a}-title"></h2> <p class="wui-tour-text wui-tour-end-message" id="${a}-message"></p> <div class="wui-tour-actions"><button type="button" class="${n(`primary`,`sm`)} wui-tour-end-button" data-wui="${r}"></button></div>`,o.querySelector(`.wui-tour-end-title`).textContent=t.title,o.querySelector(`.wui-tour-end-message`).textContent=t.message,o.querySelector(`.wui-tour-end-button`).textContent=t.button,o}function ue(e,t,n){let r=e.ownerDocument,i=e.getRootNode()===r,a=e.querySelector(`.wui-tour-card:not(.wui-tour-end)`),o=e.querySelector(`.wui-tour-spot`),s=e.querySelector(`[role=status]`),c=W(r,t,i),l=c.querySelector(`.wui-tour-end-button`),u=new AbortController;return new Promise(d=>{let f=()=>{u.abort(),d()};if(n?.aborted){f();return}let p={signal:u.signal};n?.addEventListener(`abort`,f,p),l.addEventListener(`click`,f,p),r.addEventListener(`keydown`,e=>{e.altKey||e.ctrlKey||e.metaKey||(e.key===`Escape`?(e.preventDefault(),e.stopPropagation(),f()):e.key===`Tab`&&i&&(e.preventDefault(),l.focus()))},{capture:!0,signal:u.signal}),i&&r.addEventListener(`focusin`,e=>{c.contains(e.target)||l.focus()},p);let m=()=>{u.signal.aborted||(a.hidden=!0,I(o,a,null),e.append(c),w(c),s.textContent=[t.title,t.message].filter(Boolean).join(`. `),l.focus())},h=T(a);h?h.then(m):m()})}var de=` :host { all: initial; ${Object.entries({"--wui-z-tour":`1550`,"--wui-radius-sm":`8px`,"--wui-radius-lg":`14px`,"--wui-shadow-popover":`0px 8px 28px -6px rgba(7, 20, 55, 0.14)`,"--wui-ease-out":`cubic-bezier(0.22, 1, 0.36, 1)`,"--wui-tour-motion-duration":`200ms`,"--wui-tour-motion-ease":`cubic-bezier(0.22, 1, 0.36, 1)`,"--wui-tour-spot-duration":`240ms`,"--wui-tour-spot-ease":`cubic-bezier(0.32, 0.72, 0, 1)`,"--color-primary":`#4F46E5`,"--color-primary-hover":`#4338CA`,"--color-primary-text":`#4F46E5`,"--color-focus-ring":`#4F46E5`,"--wui-focus-ring-width":`2px`,"--wui-focus-ring-offset":`2px`,"--color-on-primary":`#FFFFFF`,"--color-success-soft":`#E8FAEE`,"--color-success-text":`#0e7531`,"--color-on-scrim":`#FFFFFF`,"--color-scrim-strong":`color-mix(in srgb, #071437 62%, transparent)`,"--color-surface":`#FFFFFF`,"--color-text":`#071437`,"--color-text-muted":`#4B5675`,"--color-border":`#EBEDF3`,"--color-bg-muted":`#F5F6FA`}).map(([e,t])=>`    ${e}: ${t};`).join(` `)} } *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .btn { display: inline-block; margin: 0; padding: 0.25rem 0.5rem; border: 1px solid transparent; border-radius: 0.375rem; background: transparent; font: inherit; font-size: 0.875rem; font-weight: 500; line-height: 1.5; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; } .btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); } .btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); } .btn-outline-neutral { border-color: var(--color-text-muted); color: var(--color-text-muted); } .btn-outline-neutral:hover { background: var(--color-bg-muted); color: var(--color-text); } .btn-link { font-weight: 400; color: var(--color-primary-text); text-decoration: underline; } .btn-link:hover { color: var(--color-primary-hover); } .wui-tour-layer { pointer-events: none; font-family: "Webority Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--color-text); text-align: start; } .wui-tour-card { pointer-events: auto; } .wui-tour-layer { position: fixed; inset: 0; z-index: var(--wui-z-tour); } .wui-tour-spot { position: fixed; box-shadow: 0 0 0 2px var(--color-primary), 0 0 0 100vmax var(--color-scrim-strong); pointer-events: none; } .wui-tour-card { display: flex; flex-direction: column; gap: 8px; width: min(360px, 100vw - 16px); padding: 16px; overflow-y: auto; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--wui-radius-lg); corner-shape: squircle; box-shadow: var(--wui-shadow-popover); } .wui-tour-card:focus { outline: none; } .wui-tour-card:focus-visible { outline: var(--wui-focus-ring-width) solid var(--color-focus-ring); outline-offset: var(--wui-focus-ring-offset); } .wui-tour-title { margin: 0; font-size: 16px; font-weight: 600; } .wui-tour-text { margin: 0; font-size: 14px; color: var(--color-text-muted); } .wui-tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; } .wui-tour-nav { display: flex; gap: 8px; } .wui-tour-skip { color: var(--color-text-muted); } .wui-tour-back, .wui-tour-next { min-width: 64px; } @keyframes wui-tour-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes wui-tour-card-enter { from { opacity: 0; scale: 0.96; translate: var(--wui-tour-card-lift, 0 6px); } to { opacity: 1; scale: 1; translate: 0 0; } } .wui-tour-layer[data-state=leaving], .wui-tour-card[data-state=leaving] { opacity: 0; } .wui-tour-layer[data-state=leaving], .wui-tour-layer[data-state=leaving] * { pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .wui-tour-layer { animation: wui-tour-fade-in var(--wui-tour-motion-duration) var(--wui-tour-motion-ease); } .wui-tour-layer[data-state=leaving] { transition: opacity var(--wui-tour-motion-duration) var(--wui-tour-motion-ease); } .wui-tour-spot { transition: top var(--wui-tour-spot-duration) var(--wui-tour-spot-ease), left var(--wui-tour-spot-duration) var(--wui-tour-spot-ease), width var(--wui-tour-spot-duration) var(--wui-tour-spot-ease), height var(--wui-tour-spot-duration) var(--wui-tour-spot-ease), border-radius var(--wui-tour-spot-duration) var(--wui-tour-spot-ease); } .wui-tour-spot[data-tracking] { transition: none; } .wui-tour-card { --wui-tour-card-lift: 0 6px; transform-origin: top center; } .wui-tour-card[data-placement=top] { --wui-tour-card-lift: 0 -6px; transform-origin: bottom center; } .wui-tour-card[data-placement=bottom] { --wui-tour-card-lift: 0 6px; transform-origin: top center; } .wui-tour-card[data-placement=left] { --wui-tour-card-lift: -6px 0; transform-origin: right center; } .wui-tour-card[data-placement=right] { --wui-tour-card-lift: 6px 0; transform-origin: left center; } .wui-tour-card[data-placement=overlap], .wui-tour-card[data-placement=center] { --wui-tour-card-lift: 0 0; transform-origin: center; } .wui-tour-card[data-state=entering] { animation: wui-tour-card-enter var(--wui-tour-motion-duration) var(--wui-tour-motion-ease) var(--wui-tour-card-delay, 0ms) both; } .wui-tour-card[data-state=leaving] { transition: opacity calc(var(--wui-tour-motion-duration) / 2) var(--wui-tour-motion-ease); } } @media (prefers-reduced-motion: reduce) { .wui-tour-layer { animation: wui-tour-fade-in 120ms linear; } .wui-tour-layer[data-state=leaving] { transition: opacity 120ms linear; } .wui-tour-card[data-state=entering] { animation: wui-tour-fade-in 120ms linear both; } } .wui-tour-progress-bar { display: flex; gap: 4px; } .wui-tour-progress-segment { flex: 1 1 0; height: 4px; border-radius: 999px; background: var(--color-border); } .wui-tour-progress-segment[data-filled] { background: var(--color-primary); } .wui-tour-position { margin: 0; font-size: 12px; color: var(--color-text-muted); } .wui-tour-layer { padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); } .wui-tour-card:has(.wui-tour-arrow:not([hidden])) { overflow: visible; } .wui-tour-arrow { position: absolute; width: 8px; height: 8px; background: var(--color-surface); border: 1px solid var(--color-border); rotate: 45deg; pointer-events: none; } .wui-tour-card[data-placement=bottom] .wui-tour-arrow { top: -5px; border-right-color: rgba(0, 0, 0, 0); border-bottom-color: rgba(0, 0, 0, 0); } .wui-tour-card[data-placement=top] .wui-tour-arrow { bottom: -5px; border-top-color: rgba(0, 0, 0, 0); border-left-color: rgba(0, 0, 0, 0); } .wui-tour-card[data-placement=right] .wui-tour-arrow { left: -5px; border-top-color: rgba(0, 0, 0, 0); border-right-color: rgba(0, 0, 0, 0); } .wui-tour-card[data-placement=left] .wui-tour-arrow { right: -5px; border-bottom-color: rgba(0, 0, 0, 0); border-left-color: rgba(0, 0, 0, 0); } @media (max-width: 575.98px) { .wui-tour-card { width: calc(100vw - 16px); } .wui-tour-actions .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; } } .wui-tour-media { position: relative; order: -1; flex: none; aspect-ratio: 16/9; margin: -16px -16px 4px; overflow: hidden; background: var(--color-border); } .wui-tour-media>img, .wui-tour-media>video { display: block; width: 100%; height: 100%; object-fit: cover; } .wui-tour-card[data-media=welcome] { width: min(420px, 100vw - 16px); } .wui-tour-media-toggle { position: absolute; inset-block-end: 8px; inset-inline-end: 8px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--color-scrim-strong); color: var(--color-on-scrim); cursor: pointer; } .wui-tour-media-toggle>svg { width: 20px; height: 20px; fill: currentColor; } .wui-tour-media-toggle:focus-visible { outline: 2px solid var(--color-on-scrim); outline-offset: 2px; } .wui-tour-layer[data-advance] { pointer-events: none; } .wui-tour-layer[data-advance]:not([data-state=leaving]) .wui-tour-card { pointer-events: auto; } .wui-tour-layer[data-advance]:not([data-state=leaving]) .wui-tour-spot::before { content: ""; position: absolute; inset: -100vmax; pointer-events: auto; clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 100vmax 100vmax, calc(100% - 100vmax) 100vmax, calc(100% - 100vmax) calc(100% - 100vmax), 100vmax calc(100% - 100vmax), 100vmax 100vmax); } .wui-tour-hint { margin: 0; font-size: 14px; font-weight: 600; color: var(--color-text); } @keyframes wui-tour-pulse { from { box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 85%, transparent); } to { box-shadow: 0 0 0 14px color-mix(in srgb, var(--color-primary) 0%, transparent); } } @media (prefers-reduced-motion: no-preference) { .wui-tour-spot[data-advance]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; corner-shape: inherit; pointer-events: none; animation: wui-tour-pulse 600ms var(--wui-ease-out) var(--wui-tour-spot-duration); } } @keyframes wui-tour-check { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } } .wui-tour-end[data-layout=center] { --wui-tour-card-lift: 0 0; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); transform-origin: center; align-items: center; gap: 8px; width: min(420px, 100vw - 16px); max-height: calc(100vh - 16px); padding: 24px; text-align: center; } .wui-tour-end[data-layout=center] .wui-tour-actions { justify-content: center; margin-top: 8px; } .wui-tour-end-mark { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--color-success-soft); color: var(--color-success-text); } .wui-tour-end-mark>svg { width: 26px; height: 26px; } .wui-tour-end-mark path { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; } .wui-tour-end-title { font-size: 18px; } .wui-tour-end-message { text-wrap: balance; } .wui-tour-end-button { min-width: 120px; } @media (prefers-reduced-motion: no-preference) { .wui-tour-end-mark path { animation: wui-tour-check 300ms var(--wui-ease-out) calc(var(--wui-tour-card-delay, 0ms) + 120ms) both; } } `,G=`wui-tour-media`,fe=`wui-tour-media-toggle`,K=`http://www.w3.org/2000/svg`,pe=`M6 5h4v14H6zM14 5h4v14h-4z`,me=`M8 5v14l11-7z`,q={pause:`Pause animation`,play:`Play animation`},he=()=>globalThis.matchMedia?.(`(prefers-reduced-motion: reduce)`)?.matches===!0;function ge(e){let t=document.createElementNS(K,`svg`);t.setAttribute(`viewBox`,`0 0 24 24`),t.setAttribute(`aria-hidden`,`true`),t.setAttribute(`focusable`,`false`);let n=document.createElementNS(K,`path`);return n.setAttribute(`d`,e),t.appendChild(n),t}function _e(e){let t=document.createElement(`img`);return t.setAttribute(`alt`,e.mediaAlt??``),t.setAttribute(`width`,`1280`),t.setAttribute(`height`,`720`),t.setAttribute(`loading`,`lazy`),t.setAttribute(`decoding`,`async`),t.setAttribute(`src`,e.media),t}function ve(e,t){let n=document.createElement(`video`);return n.muted=!0,n.setAttribute(`muted`,``),n.loop=!0,n.setAttribute(`playsinline`,``),t&&n.setAttribute(`autoplay`,``),n.setAttribute(`preload`,t?`auto`:`metadata`),e.mediaAlt&&n.setAttribute(`aria-label`,e.mediaAlt),e.mediaPoster&&n.setAttribute(`poster`,e.mediaPoster),n.setAttribute(`src`,e.media),n}function ye(e,t){let n=document.createElement(`button`);n.type=`button`,n.className=fe;let r=(r=!e.paused)=>{n.setAttribute(`aria-label`,r?t.pause:t.play),n.replaceChildren(ge(r?pe:me))};return e.addEventListener(`play`,()=>r()),e.addEventListener(`pause`,()=>r()),n.addEventListener(`click`,()=>{e.paused?e.play()?.catch(()=>r()):e.pause()}),r(e.hasAttribute(`autoplay`)),n}function be(e){let t=e.querySelector(`:scope > .${G}`);if(!t)return;let n=t.querySelector(`video`);n&&(n.pause(),n.removeAttribute(`src`),n.load()),t.remove()}function xe(e,t,n=q){if(be(e),!t.media){e.removeAttribute(`data-media`);return}let r=document.createElement(`div`);if(r.className=G,t.mediaType===`video`){let e=ve(t,!he());r.append(e,ye(e,n))}else r.appendChild(_e(t));e.prepend(r),e.setAttribute(`data-media`,t.target?`step`:`welcome`)}var Se=`Step {current} of {total}`;function Ce(e){let t=/* @__PURE__ */ new Set;return{drop:e=>{t.add(e)},position:e=>{t.delete(e);let n=0;for(let r of t)r<e&&n++;return e+1-n},total:()=>e-t.size}}function we(e,t,n){return(e.getAttribute(`progress-label`)||Se).replace(/\{(current|total)\}/g,(e,r)=>String(r===`current`?t:n))}function Te(e,{text:t,position:n,total:r}){let i=e.querySelector(`.wui-tour-position`);i.textContent=t;let a=e.querySelector(`.wui-tour-progress-bar`);if(!a){let t=e.ownerDocument,n=t.createElement(`div`);n.className=`wui-tour-progress`,n.setAttribute(`aria-hidden`,`true`),a=t.createElement(`div`),a.className=`wui-tour-progress-bar`,n.append(a),i.before(n)}let o=a.children;for(;o.length<r;){let t=e.ownerDocument.createElement(`span`);t.className=`wui-tour-progress-segment`,a.append(t)}for(;o.length>r;)a.lastElementChild.remove();for(let e=0;e<o.length;e++)o[e].toggleAttribute(`data-filled`,e<n)}var Ee=`wui-tour-step`,De=`wui-tour-host`,Oe=`wui-tour-seen:`,J=`data-tracking`,ke={back:`Back`,next:`Next`,skip:`Skip`,done:`Done`,mediaPause:`Pause animation`,mediaPlay:`Play animation`,endTitle:`You're all set`,endMessage:`You know your way around now. Enjoy exploring.`,endButton:`Done`},Ae={back:`back-label`,next:`next-label`,skip:`skip-label`,done:`done-label`,mediaPause:`media-pause-label`,mediaPlay:`media-play-label`,endTitle:`end-title`,endMessage:`end-message`,endButton:`end-button`},je=[[`media`,`media`],[`mediaAlt`,`media-alt`],[`mediaPoster`,`media-poster`],[`mediaType`,`media-type`],[`advanceOn`,`advance-on`],[`actionLabel`,`action-label`]],Y={index:null,position:null,total:null},Me=0;function X(e=Oe,t=globalThis.localStorage){return{isSeen:async n=>t.getItem(e+n)===`1`,markSeen:async n=>{t.setItem(e+n,`1`)}}}var Z=e=>!e?.isConnected||getComputedStyle(e).visibility===`hidden`?!1:e.getClientRects().length>0,Q=e=>!!e&&(e.isContentEditable||/^(INPUT|TEXTAREA|SELECT)$/.test(e.tagName)),Ne=()=>{let e=document.activeElement;for(;e?.shadowRoot?.activeElement;)e=e.shadowRoot.activeElement;return e},$=null;function Pe(e){$||($=new CSSStyleSheet,$.replaceSync(de)),e.adoptedStyleSheets=[$]}var Fe=class extends i{static get observedAttributes(){return[`open`]}constructor(){super(),this.seenStore=null,this.onBeforeStep=null,this._run=0,this._running=!1,this._layer=null,this._outer=null,this._shadow=null,this._unbindAdvance=null,this._ending=null,this._seenMark=null}connectedCallback(){this.hasAttribute(`open`)&&this.start()}disconnectedCallback(){this.stop()}attributeChangedCallback(e,t,n){e===`open`&&this.isConnected&&(n===null?this.stop():this.start())}get tourId(){return this.getAttribute(`tour-id`)||``}set tourId(e){e==null||e===``?this.removeAttribute(`tour-id`):this.setAttribute(`tour-id`,String(e))}get isolated(){return this.hasAttribute(`isolated`)}set isolated(e){this.toggleAttribute(`isolated`,e===!0||e===``||e===`true`)}_stepList(){return Array.from(this.querySelectorAll(`:scope > ${Ee}`),e=>{let t={target:e.getAttribute(`target`)||``,title:e.getAttribute(`title`)||void 0,description:e.textContent.trim()};for(let[n,r]of je)e.hasAttribute(r)&&(t[n]=e.getAttribute(r));return t})}_store(){return this.seenStore?this.seenStore:this.getAttribute(`seen-store`)===`local`?X():globalThis.window?.WUI?.tour?.seenStore||null}_label(e){return this.getAttribute(Ae[e])||ke[e]}_endDialogText(){return this.getAttribute(`end-dialog`)===`false`?null:{title:this._label(`endTitle`),message:this._label(`endMessage`),button:this._label(`endButton`)}}_markSeen(e){let t=this._store();return t?t.markSeen(this.tourId,e):null}async start(){if(this._running)return;this._running=!0;let e=++this._run;this.hasAttribute(`open`)||this.setAttribute(`open`,``);try{await this._start(e)}catch(t){throw e===this._run&&(this._running=!1),t}}async _start(e){this._steps=this._stepList(),this._progress=Ce(this._steps.length);let t=this._store();if(t&&!this.tourId)throw Error(`<wui-tour> needs a tour-id to use a seen store.`);if(t&&await t.isSeen(this.tourId)){e===this._run&&this._finish(`alreadySeen`);return}for(let[e,t]of this._steps.entries())t.target&&!Z(document.querySelector(t.target))&&this._progress.drop(e);this._returnFocus=document.activeElement;let n=await this._locate(0,1,e);e===this._run&&(n?(this._firstIndex=n.index,this.dispatchEvent(new CustomEvent(`wui-tour:start`,{bubbles:!0,detail:{total:this._progress.total()}})),e===this._run&&(this._build(),this._show(n))):this._finish(`noTargets`))}next(){return this._move(1)}back(){return!this._current||this._current.index<=this._firstIndex?Promise.resolve():this._move(-1)}async goTo(e){if(this._current){if(!Number.isInteger(e)||e<0||e>=this._steps.length)throw RangeError(`<wui-tour> has no step ${e}; it has ${this._steps.length}.`);await this._go(e,1)}}stop(){this._running&&(this._run++,this._teardown(),this._running=!1,this.hasAttribute(`open`)&&this.removeAttribute(`open`))}async _locate(e,t,n){let r=this._steps;for(let i=e;i>=0&&i<r.length;i+=t){let e=r[i];if(await this._beforeStep(e,i),n!==this._run)return null;if(!e.target)return{index:i,target:null};let t=document.querySelector(e.target);if(Z(t))return this._progress.position(i),{index:i,target:t};this._progress.drop(i)}return null}async _beforeStep(e,t){let n=[];this.dispatchEvent(new CustomEvent(`wui-tour:beforestep`,{bubbles:!0,detail:{step:e,index:t,wait:e=>n.push(e)}})),await Promise.all(n),typeof this.onBeforeStep==`function`&&await this.onBeforeStep(e,t)}_build(){let t=`wui-tour-${++Me}`,i=document.createElement(`div`);i.className=`wui-tour-layer`,i.innerHTML=` <div class="wui-tour-spot" aria-hidden="true"></div> <div class="wui-tour-card" role="dialog" aria-modal="true" tabindex="-1" aria-labelledby="${t}-title" aria-describedby="${t}-text"> <p class="wui-tour-position"></p> <h2 class="wui-tour-title" id="${t}-title"></h2> <p class="wui-tour-text" id="${t}-text"></p> <div class="wui-tour-actions"> <button type="button" class="btn btn-sm btn-link wui-tour-skip"></button> <div class="wui-tour-nav"> <button type="button" class="${n(`outline-secondary`,`sm`)} wui-tour-back" data-wui="${r}"></button> <button type="button" class="${n(`primary`,`sm`)} wui-tour-next" data-wui="${r}"></button> </div> </div> </div> <div class="visually-hidden" role="status" aria-live="polite"></div>`;let o=i;this._shadow=null,this.isolated&&(o=document.createElement(De),this._shadow=o.attachShadow({mode:`open`}),Pe(this._shadow),this._shadow.appendChild(i)),document.body.appendChild(o),document.documentElement.setAttribute(a,``),this._outer=o,this._layer=i,this._spot=i.querySelector(`.wui-tour-spot`),this._card=i.querySelector(`.wui-tour-card`),this._live=i.querySelector(`[role=status]`),this._card.querySelector(`.wui-tour-skip`).addEventListener(`click`,()=>this._close(`skipped`,`button`)),this._card.querySelector(`.wui-tour-back`).addEventListener(`click`,()=>this._move(-1)),this._card.querySelector(`.wui-tour-next`).addEventListener(`click`,()=>this._move(1)),this._shadow&&this._card.removeAttribute(`aria-modal`),this._onKey=e=>this._key(e),this._onFocusIn=e=>{if(!this._layer||this._ending)return;let t=this._current,n=t?this._steps[t.index]:null;te(this._layer,n,t?.target??null,e.target)||this._card.focus()},document.addEventListener(`keydown`,this._onKey,!0),this._shadow||document.addEventListener(`focusin`,this._onFocusIn),e(o,()=>this._follow())}_active(){return this._shadow?this._shadow.activeElement:document.activeElement}_show(e){this._current=e;let{index:t,target:n}=e,r=this._steps[t],i=this._card,a=this._progress.position(t),o=this._progress.total(),s=a===o&&!this._endDialogText(),c=we(this,a,o);Te(i,{text:c,position:a,total:o}),xe(i,r,{pause:this._label(`mediaPause`),play:this._label(`mediaPlay`)});let l=g(this,{layer:this._layer,spot:this._spot,card:i},r,n),u=i.querySelector(`.wui-tour-title`);u.textContent=r.title||``,u.hidden=!r.title,i.querySelector(`.wui-tour-text`).textContent=r.description||``,i.querySelector(`.wui-tour-skip`).textContent=this._label(`skip`),i.querySelector(`.wui-tour-back`).textContent=this._label(`back`),i.querySelector(`.wui-tour-back`).hidden=t<=this._firstIndex,i.querySelector(`.wui-tour-next`).textContent=this._label(s?`done`:`next`);let d=[c,r.title,r.description].filter(Boolean).join(`. `);this._live.textContent=l?[d,l].join(/[.!?]$/.test(d)?` `:`. `):d,F(i,n),this._spot.removeAttribute(J),this._place(),w(i),this._unbindAdvance?.(),this._unbindAdvance=_(r,n,()=>this._move(1));let f=this._active();(i.contains(f)?!f.hidden:this._shadow!==null&&Q(Ne()))||i.focus(),this.dispatchEvent(new CustomEvent(`wui-tour:step`,{bubbles:!0,detail:{step:r,index:t,position:a,total:o}}))}_place(){this._current&&this._layer&&I(this._spot,this._card,this._current.target)}_follow(){if(!this._current||!this._layer||this._ending)return;let e=this._spot.style.cssText;this._place(),this._spot.style.cssText!==e&&this._spot.setAttribute(J,``)}async _move(e){this._current&&await this._go(this._current.index+e,e)}async _go(e,t){if(!this._current||this._moving)return;this._moving=!0;let n=this._run;try{let r=await this._locate(e,t,n);if(n!==this._run)return;if(r){let e=T(this._card);if(e&&await e,n!==this._run)return;this._show(r)}else if(t>0){let e=this._endDialogText();if(e&&await this._showEnd(e),n!==this._run)return;await this._close(`finished`)}}finally{this._moving=!1}}_showEnd(e){return this._unbindAdvance?.(),this._unbindAdvance=null,g(this,{layer:this._layer,spot:this._spot,card:this._card},null,null),this._spot.removeAttribute(J),this._ending=new AbortController,this._seenMark=this._markSeen(`finished`),ue(this._layer,e,this._ending.signal)}_key(e){if(!(!this._layer||this._ending||e.altKey||e.ctrlKey||e.metaKey)){if(e.key===`Escape`)e.preventDefault(),e.stopPropagation(),this._close(`skipped`,`escape`);else if(e.key===`ArrowRight`||e.key===`ArrowLeft`){if(Q(e.composedPath?.()[0]??e.target))return;e.preventDefault(),e.key===`ArrowRight`?this._move(1):this._current.index>this._firstIndex&&this._move(-1)}else if(e.key===`Tab`&&!this._shadow){let{index:t,target:n}=this._current;ne(e,{card:this._card,active:this._active(),step:this._steps[t],target:n})}}}_teardown(){if(!this._layer)return;document.removeEventListener(`keydown`,this._onKey,!0),document.removeEventListener(`focusin`,this._onFocusIn);let e=!this._shadow||this._shadow.activeElement!==null||!document.activeElement||document.activeElement===document.body;this._unbindAdvance?.(),this._unbindAdvance=null,this._ending?.abort(),this._ending=null,this._seenMark=null,t(this._outer),se(this._outer),document.documentElement.removeAttribute(a),this._outer=null,this._shadow=null,this._layer=null,this._current=null;let n=this._returnFocus;this._returnFocus=null,e&&n?.isConnected&&n.focus?.()}async _close(e,t=null){let n=this._run,r=this._current,i=r?{index:r.index,position:this._progress.position(r.index),total:this._progress.total()}:Y,a=this._seenMark;this._teardown();try{n===this._run&&await(a??this._markSeen(e))}finally{this._finish(e,i,t)}}_finish(e,t=Y,n=null){this._run++,this._running=!1,this.hasAttribute(`open`)&&this.removeAttribute(`open`),this.dispatchEvent(new CustomEvent(`wui-tour:close`,{bubbles:!0,detail:{reason:e,...t,via:n}}))}};export{X as n,Fe as t};

package/dist/WuiWizardStep-LecF3VY7.js

@@ -1 +0,0 @@
-import{t as e}from"./elementBase-DV9IZZCu.js";import{n as t}from"./devWarn-DXdRWZs3.js";import{t as n}from"./iconGlyphs.g-gURMSeyB.js";import{n as r,t as i}from"./buttonClass-DpG9WzgJ.js";import{n as a}from"./stepperHeader-yinJ_7Dk.js";var o=`wui-wizard-step`,s=`:scope > [data-wui-glyphs]`,c={done:`Done`,active:`Current`,pending:`To do`,error:`Error`,skipped:`Skipped`},l=[`data-nav`,`data-step`,`data-close`],u=/* @__PURE__ */ new WeakSet,d=class extends e{static get observedAttributes(){return[`active`,`variant`,`orientation`,`align`,`icon-size`,`non-linear`,`hide-stepper`,`hide-connectors`,`disabled`,`skippable`,`label`,`back-label`,`next-label`,`skip-label`,`finish-label`,`top-bar`,`bar-title`,`close-label`]}constructor(){super(),this._active=0,this._skipped=/* @__PURE__ */ new Set,this._invalid=/* @__PURE__ */ new Set,this._finished=!1,this._rendered=!1,this._reflecting=!1,this._beforeNext=null,this._header=null,this._footer=null,this._topBar=null,this._onTopBarClick=e=>{e.target.closest(`[data-close]`)&&this.dispatchEvent(new CustomEvent(`wui-wizard:close`,{detail:{index:this._active},bubbles:!0}))},this._known=[],this._observer=null,this._glyphs=null,this._glyphObserver=null}get active(){return this._active}set active(e){let t=Number.parseInt(e,10);Number.isFinite(t)&&this._go(t,`set`)}get beforeNext(){return this._beforeNext}set beforeNext(e){this._beforeNext=typeof e==`function`?e:null}get _steps(){return[...this.querySelectorAll(`:scope > ${o}`)]}refresh(){this._rendered&&this._renderChrome()}connectedCallback(){if(this._rendered)this._wire(),this._onStepsMutated();else{let e=Number.parseInt(this.getAttribute(`active`),10);this._active=Number.isFinite(e)&&e>=0?e:0,this.render()}}disconnectedCallback(){this._teardown()}attributeChangedCallback(e,t,n){if(this._rendered&&!this._reflecting){if(e===`active`){let e=Number.parseInt(n,10);Number.isFinite(e)&&this._go(e,`set`)}else this._renderChrome()}}render(){let e=this._steps;this._header||(this._header=document.createElement(`nav`),this._header.className=`stepper wizard-stepper`,this._footer=document.createElement(`div`),this._footer.className=`form-actions wizard-footer form-actions-between`,e.length?(this.insertBefore(this._header,e[0]),e[e.length-1].after(this._footer)):(this.prepend(this._header),this.append(this._footer))),this._known=e,this._renderChrome(),this._rendered=!0,this._wire()}_renderChrome(){let e=this._reconcileSteps();this._placeChrome(e),this._clampActive(e),this._syncPanels(e);let t=this._focusedControl();this._syncTopBar(e),this._header.innerHTML=this._headerHtml(e),this._footer.innerHTML=this._footerHtml(e),this._header.hidden=this.hasAttribute(`hide-stepper`),this._restoreFocus(t)}_focusedControl(){let e=document.activeElement;if(!e||![this._topBar,this._header,this._footer].some(t=>t?.contains(e)))return null;let t=l.find(t=>e.hasAttribute(t));return t?{attr:t,value:e.getAttribute(t)}:null}_restoreFocus(e){if(e)for(let t of[this._topBar,this._header,this._footer]){let n=t&&[...t.querySelectorAll(`[${e.attr}]`)].find(t=>t.getAttribute(e.attr)===e.value);if(n){n.disabled||n.focus({preventScroll:!0});return}}}_syncTopBar(e){if(!this.hasAttribute(`top-bar`)){this._topBar?.removeEventListener(`click`,this._onTopBarClick),this._topBar?.remove(),this._topBar=null;return}this._topBar||(this._topBar=document.createElement(`div`),this._topBar.className=`wui-wizard-topbar`,this._rendered&&this._topBar.addEventListener(`click`,this._onTopBarClick)),this._header.previousElementSibling!==this._topBar&&this.insertBefore(this._topBar,this._header);let t=this.getAttribute(`bar-title`)||``,n=this.getAttribute(`close-label`)||`Close`,r=e.length?`<span class="wui-wizard-topbar-count">Step ${this._active+1} of ${e.length}</span>`:``;this._topBar.innerHTML=`<span class="wui-wizard-topbar-title">${p(t)}</span>${r}<button type="button" class="wui-wizard-topbar-close" data-close aria-label="${m(n)}">${this._glyph(`x`)}</button>`}_clampActive(e){let t=Math.max(0,e.length-1);this._active>t&&(this._active=t),this._active<0&&(this._active=0)}_reconcileSteps(){let e=this._steps,t=this._known;if(this._known=e,f(e,t))return e;let n=n=>new Set([...n].map(n=>e.indexOf(t[n])).filter(e=>e>=0));this._skipped=n(this._skipped),this._invalid=n(this._invalid);let r=t[this._active];if(!r)return e;let i=e.indexOf(r);if(i<0){let n=t=>e.includes(t),r=t.slice(this._active+1).find(n)??t.slice(0,this._active).reverse().find(n);i=r?e.indexOf(r):this._active}return i=Math.min(i,Math.max(0,e.length-1)),i!==this._active&&(this._active=i,this._reflectActive(i)),e}_placeChrome(e){if(!e.length)return;let t=e[e.length-1];this._header.nextElementSibling!==e[0]&&this.insertBefore(this._header,e[0]),this._footer.previousElementSibling!==t&&t.after(this._footer)}_onStepsMutated(){if(!this._rendered)return;let e=this._steps,t=!e.length||this._header.nextElementSibling===e[0]&&this._footer.previousElementSibling===e[e.length-1];this.querySelector(s)!==this._glyphs&&(this._watchGlyphs(),this._renderHeader()),t&&f(e,this._known)||(this._renderChrome(),this._observer?.takeRecords())}_syncPanels(e){e.forEach((e,t)=>{let n=t===this._active;e.classList.add(`wizard-panel`),e.hidden=!n,e.setAttribute(`role`,`tabpanel`),e.setAttribute(`aria-hidden`,n?`false`:`true`)})}_stepStatus(e,t){return e.getAttribute(`status`)||(this._invalid.has(t)?`error`:this._finished?`done`:t===this._active?`active`:t<this._active?this._skipped.has(t)?`skipped`:`done`:`pending`)}_headerHtml(e){let n=this.getAttribute(`variant`)===`journey`,r=this.getAttribute(`variant`)===`icons`,i=this.getAttribute(`variant`)===`tiles`,o=this.getAttribute(`orientation`)===`vertical`,s=!this.hasAttribute(`hide-connectors`),l=this.getAttribute(`align`)===`start`;this._header.className=[`stepper`,`wizard-stepper`,n&&`stepper-journey`,r&&`stepper-icons`,i&&`wui-step-tiles`,o&&`stepper-vertical`,!s&&`wui-stepper-no-connectors`,l&&`wui-stepper-start`].filter(Boolean).join(` `),this._header.setAttribute(`aria-label`,this.getAttribute(`label`)||`Progress`);let d=this.hasAttribute(`non-linear`);for(let n of e)n.getAttribute(`label`)||u.has(n)||(u.add(n),t(`wui-wizard: a <wui-wizard-step> needs a label attribute; its header segment is empty.`));let f=a(e.map(e=>({label:e.getAttribute(`label`)||``,icon:e.getAttribute(`icon`)||void 0})),{statusOf:t=>this._stepStatus(e[t],t),journey:n,connectors:s}).map(t=>{let a=t.index,o=e[a],s=t.status,l=o.getAttribute(`label`)||``,u=o.getAttribute(`description`)||``,f=a+1,m=t.glyph.icon?this._glyph(t.glyph.icon):String(t.glyph.number),h=t.className,g=t.current?` aria-current="step"`:``,_=d||a<this._active;if(i){let e=`<span class="step-circle">${m}</span><span class="step-text"><span class="step-label">${p(l)}</span><span class="wui-step-tile-state">${c[s]??``}</span></span>`,t=_?`<button type="button" class="wui-step-tile-body" data-step="${a}"${g}>${e}</button>`:`<div class="wui-step-tile-body"${g}>${e}</div>`;return`<li class="${s===`pending`?`wui-step-tile`:`wui-step-tile ${s}`}">${t}</li>`}let v=u?`<span class="step-desc">${p(u)}</span>`:``,y;y=n?`<span class="step-circle">${m}</span><span class="step-text"><span class="step-index">Step ${f}</span><span class="step-label">${p(l)}</span>${v}</span>`:r?`<span class="step-circle">${m}</span><span class="step-index">Step ${f}</span><span class="step-label">${p(l)}</span>${v}`:`<span class="step-circle">${m}</span><span class="step-label">${p(l)}</span>${v}`;let b=_?`<button type="button" class="${h}" data-step="${a}"${g}>${y}</button>`:`<div class="${h}"${g}>${y}</div>`;return t.line?`${b}<span class="step-line${t.line.done?` done`:``}" aria-hidden="true"></span>`:b}).join(``);return i?`<ol>${f}</ol>`:f}_footerHtml(e){let t=this._active,a=e.length-1,o=this.hasAttribute(`disabled`)?` disabled`:``,s=e[t]?.hasAttribute(`optional`)||this.hasAttribute(`skippable`),c=this.getAttribute(`back-label`)||`Back`,l=this.getAttribute(`next-label`)||`Next`,u=this.getAttribute(`skip-label`)||`Skip`,d=this.getAttribute(`finish-label`)||`Finish`;return`${t>0?`<button type="button" class="${r(`soft`,`md`)}" data-nav="back"${o} data-wui="${i}">${n(`arrow-left`,{className:`me-2`})}${p(c)}</button>`:`<span></span>`}<span class="wizard-footer-actions">${s&&t<a?`<button type="button" class="${r(`neutral`,`md`)}" data-nav="skip"${o} data-wui="${i}">${p(u)}</button>`:``}${t<a?`<button type="button" class="${r(`primary`,`md`)}" data-nav="next"${o} data-wui="${i}">${p(l)}${n(`arrow-right`,{className:`ms-2`})}</button>`:`<button type="button" class="${r(`primary`,`md`)}" data-nav="finish"${o} data-wui="${i}">${p(d)}</button>`}</span>`}_wire(){this._teardown(),this._onHeaderClick=e=>{let t=e.target.closest(`[data-step]`);t&&this.contains(t)&&this._stepTo(Number.parseInt(t.dataset.step,10))},this._onFooterClick=e=>{let t=e.target.closest(`[data-nav]`);if(!t||!this.contains(t)||this.hasAttribute(`disabled`))return;let n=t.dataset.nav;n===`back`?this._back():n===`skip`?this._skip():(n===`next`||n===`finish`)&&this._next()},this._header.addEventListener(`click`,this._onHeaderClick),this._footer.addEventListener(`click`,this._onFooterClick),this._topBar?.addEventListener(`click`,this._onTopBarClick),this._observer=new MutationObserver(()=>this._onStepsMutated()),this._observer.observe(this,{childList:!0}),this._watchGlyphs()}_glyph(e){let t=this.querySelector(s),r=t&&[...t.children].find(t=>t.getAttribute(`data-icon`)===e);if(r)return r.outerHTML;let i=Number.parseInt(this.getAttribute(`icon-size`),10);return n(e,i>0?{size:i}:void 0)}_watchGlyphs(){this._glyphObserver?.disconnect(),this._glyphObserver=null,this._glyphs=this.querySelector(s),this._glyphs&&(this._glyphObserver=new MutationObserver(()=>this._renderHeader()),this._glyphObserver.observe(this._glyphs,{childList:!0,subtree:!0,attributes:!0,characterData:!0}))}_renderHeader(){if(!this._rendered)return;let e=this._focusedControl();this._header.innerHTML=this._headerHtml(this._steps),this._restoreFocus(e)}_teardown(){this._header&&this._onHeaderClick&&this._header.removeEventListener(`click`,this._onHeaderClick),this._footer&&this._onFooterClick&&this._footer.removeEventListener(`click`,this._onFooterClick),this._topBar?.removeEventListener(`click`,this._onTopBarClick),this._observer?.disconnect(),this._observer=null,this._glyphObserver?.disconnect(),this._glyphObserver=null}_stepTo(e){this.hasAttribute(`disabled`)||!this.hasAttribute(`non-linear`)&&e>=this._active||this._go(e,`step`)}_back(){this._active>0&&this._go(this._active-1,`back`)}async _next(){this._reconcileSteps();let e=this._active,t=this._steps,n=e>=t.length-1,r=t[e];if(!this.dispatchEvent(new CustomEvent(`wui-wizard:beforechange`,{detail:n?{index:e,next:e,reason:`finish`}:{index:e,next:e+1,reason:`next`},cancelable:!0})))return this._flagInvalid(e);if(this._beforeNext){let i;try{i=await this._beforeNext(e)}catch{i=!1}if(this._reconcileSteps(),t=this._steps,e=t.indexOf(r),e<0)return;if(n=e>=t.length-1,i===!1)return this._flagInvalid(e)}if(this._invalid.delete(e),this._skipped.delete(e),n)return this._finish();this._go(e+1,`next`)}_skip(){let e=this._active,t=this._steps;if(t[e]?.hasAttribute(`optional`)||this.hasAttribute(`skippable`)){if(this._invalid.delete(e),this._skipped.add(e),this.dispatchEvent(new CustomEvent(`wui-wizard:skip`,{detail:{index:e}})),e>=t.length-1)return this._finish();this._go(e+1,`skip`)}}_flagInvalid(e){this._invalid.add(e),this._renderChrome(),this.dispatchEvent(new CustomEvent(`wui-wizard:invalid`,{detail:{index:e}}))}_finish(){this._invalid.delete(this._active),this._finished=!0,this._renderChrome(),this.dispatchEvent(new CustomEvent(`wui-wizard:finish`,{detail:{index:this._active}}))}_go(e,t){let n=this._reconcileSteps(),r=Math.max(0,n.length-1),i=Math.min(Math.max(e,0),r),a=this._active;this._finished=!1,this._invalid.delete(a),this._active=i,this._reflectActive(i),this._renderChrome(),t!==`silent`&&i!==a&&this.dispatchEvent(new CustomEvent(`wui-wizard:change`,{detail:{index:i,previous:a,reason:t}}))}_reflectActive(e){this._reflecting=!0,this.setAttribute(`active`,String(e)),this._reflecting=!1}},f=(e,t)=>e.length===t.length&&e.every((e,n)=>e===t[n]),p=e=>String(e??``).replace(/&/g,`&amp;`).replace(/</g,`&lt;`).replace(/>/g,`&gt;`),m=e=>String(e??``).replace(/&/g,`&amp;`).replace(/"/g,`&quot;`).replace(/</g,`&lt;`),h=class extends e{static get observedAttributes(){return[`label`,`description`,`optional`,`icon`,`status`]}attributeChangedCallback(){let e=this.closest(`wui-wizard`);e&&typeof e.refresh==`function`&&e.refresh()}};export{d as n,h as t};