basecoat-css 0.1.1 → 0.2.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/basecoat.css +209 -126
- package/dist/cdn.css +4601 -0
- package/dist/cdn.min.css +2 -0
- package/dist/js/all.js +701 -0
- package/dist/js/all.min.js +1 -0
- package/dist/js/css-anchor-positioning.js +6340 -0
- package/dist/js/css-anchor-positioning.min.js +1 -0
- package/dist/js/dark-mode.js +10 -0
- package/dist/js/dark-mode.min.js +1 -0
- package/dist/js/dropdown-menu.js +121 -0
- package/dist/js/dropdown-menu.min.js +1 -0
- package/dist/js/select.js +199 -0
- package/dist/js/select.min.js +1 -0
- package/dist/js/sidebar.js +110 -0
- package/dist/js/sidebar.min.js +1 -0
- package/dist/js/tabs.js +75 -0
- package/dist/js/tabs.min.js +1 -0
- package/dist/js/toast.js +196 -0
- package/dist/js/toast.min.js +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
(()=>{const e=e=>{const t=e.querySelector("[popovertarget]"),n=e.querySelector("[popover]"),a=n?.querySelector('[role="menu"]');if(!t||!n||!a)return;let o=[],r=-1;const i=e=>{if(r>-1&&o[r]&&o[r].classList.remove("active"),r=e,r>-1&&o[r]){const e=o[r];e.classList.add("active"),t.setAttribute("aria-activedescendant",e.id),e.scrollIntoView({block:"nearest"})}else t.removeAttribute("aria-activedescendant")};t.addEventListener("keydown",(e=>{if(!n.matches(":popover-open"))return void(["ArrowDown","ArrowUp","Enter"," "].includes(e.key)&&(e.preventDefault(),t.click()));let a=r;if(0!==o.length){switch(e.key){case"ArrowDown":e.preventDefault(),r<o.length-1&&(a=r+1);break;case"ArrowUp":e.preventDefault(),r>0&&(a=r-1);break;case"Home":e.preventDefault(),a=0;break;case"End":e.preventDefault(),a=o.length-1;break;case"Enter":case" ":e.preventDefault(),o[r]?.click()}a!==r&&i(a)}})),n.addEventListener("toggle",(e=>{t.setAttribute("aria-expanded","open"===e.newState),"open"===e.newState?(o=Array.from(a.querySelectorAll('[role^="menuitem"]:not([disabled])')),o.forEach(((e,t)=>{e.id||(e.id=`${a.id}-item-${t}`)})),i(0)):i(-1)})),a.addEventListener("click",(e=>{e.target.closest('[role^="menuitem"]')&&n.hidePopover()})),a.addEventListener("mouseover",(e=>{const t=e.target.closest('[role^="menuitem"]:not([disabled])');if(t){const e=o.indexOf(t);e>-1&&e!==r&&i(e)}})),e.dataset.dropdownMenuInitialized=!0};document.querySelectorAll(".dropdown-menu:not([data-dropdown-menu-initialized])").forEach(e);new MutationObserver((t=>{t.forEach((t=>{t.addedNodes.forEach((t=>{t.nodeType===Node.ELEMENT_NODE&&(t.matches(".dropdown-menu:not([data-dropdown-menu-initialized])")&&e(t),t.querySelectorAll(".dropdown-menu:not([data-dropdown-menu-initialized])").forEach(e))}))}))})).observe(document.body,{childList:!0,subtree:!0})})(),(()=>{const e=e=>{const t=e.querySelector(":scope > [popovertarget]"),n=t.querySelector(":scope > span"),a=e.querySelector(":scope > [popover]"),o=a.querySelector('[role="listbox"]'),r=e.querySelector(':scope > input[type="hidden"]'),i=e.querySelector('header input[type="text"]');if(!(t&&a&&o&&r))return;const d=Array.from(o.querySelectorAll('[role="option"]'));let s=[...d],c=-1;const l=e=>{e&&(n.innerHTML=e.dataset.label||e.innerHTML,r.value=e.dataset.value,o.querySelector('[role="option"][aria-selected="true"]')?.removeAttribute("aria-selected"),e.setAttribute("aria-selected","true"))},u=e=>{e&&(l(e),t.removeAttribute("aria-activedescendant"),d.forEach((e=>e.classList.remove("active"))),c=-1,a.hidePopover())};if(i){const e=()=>{const e=i.value.trim().toLowerCase();c>-1&&(d[c].classList.remove("active"),t.removeAttribute("aria-activedescendant"),c=-1),s=[],d.forEach((t=>{const n=(t.dataset.label||t.textContent).trim().toLowerCase().includes(e);t.setAttribute("aria-hidden",String(!n)),n&&s.push(t)}))};i.addEventListener("input",e)}let h=d.find((e=>r.value&&e.dataset.value===r.value));!h&&d.length>0&&(h=d[0]),l(h);const v=e=>{if(!["ArrowDown","ArrowUp","Enter","Home","End"].includes(e.key))return;if(!a.matches(":popover-open"))return void(e.currentTarget===t&&"Enter"!==e.key&&(e.preventDefault(),t.click()));if(e.preventDefault(),"Enter"===e.key)return void(c>-1&&u(d[c]));if(0===s.length)return;const n=c>-1?s.indexOf(d[c]):-1;let o=n;switch(e.key){case"ArrowDown":n<s.length-1&&(o=n+1);break;case"ArrowUp":n>0?o=n-1:-1===n&&(o=0);break;case"Home":o=0;break;case"End":o=s.length-1}if(o!==n){n>-1&&s[n].classList.remove("active");const e=s[o];e.classList.add("active"),c=d.indexOf(e),e.id&&t.setAttribute("aria-activedescendant",e.id),e.scrollIntoView({block:"nearest",behavior:"smooth"})}};t.addEventListener("keydown",v),i&&i.addEventListener("keydown",v),o.addEventListener("click",(e=>{const t=e.target.closest('[role="option"]');t&&u(t)})),a.addEventListener("toggle",(e=>{if(t.setAttribute("aria-expanded","open"===e.newState),"open"===e.newState){i&&i.focus();const e=o.querySelector('[role="option"][aria-selected="true"]');let n=null;e&&s.includes(e)?n=e:s.length>0&&(n=s[0]),c>-1&&d[c]?.classList.remove("active"),n?(c=d.indexOf(n),n.classList.add("active"),n.id&&t.setAttribute("aria-activedescendant",n.id),n.scrollIntoView({block:"nearest"})):c=-1}else"closed"===e.newState&&(i&&(i.value="",s=[...d],d.forEach((e=>e.setAttribute("aria-hidden","false")))),t.removeAttribute("aria-activedescendant"),c>-1&&d[c]?.classList.remove("active"),c=-1)})),e.dataset.selectInitialized=!0};document.querySelectorAll("div.select:not([data-select-initialized])").forEach(e);new MutationObserver((t=>{t.forEach((t=>{t.addedNodes.forEach((t=>{t.nodeType===Node.ELEMENT_NODE&&(t.matches("div.select:not([data-select-initialized])")&&e(t),t.querySelectorAll("div.select:not([data-select-initialized])").forEach(e))}))}))})).observe(document.body,{childList:!0,subtree:!0})})(),(()=>{if(!window.history.__basecoatPatched){const e=window.history.pushState;window.history.pushState=function(...t){e.apply(this,t),window.dispatchEvent(new Event("basecoat:locationchange"))};const t=window.history.replaceState;window.history.replaceState=function(...e){t.apply(this,e),window.dispatchEvent(new Event("basecoat:locationchange"))},window.history.__basecoatPatched=!0}const e=e=>{const t="false"!==e.dataset.initialOpen,n="true"===e.dataset.initialMobileOpen,a=parseInt(e.dataset.breakpoint)||768;let o=a>0?window.innerWidth>=a?t:n:t;const r=()=>{const t=window.location.pathname.replace(/\/$/,"");e.querySelectorAll("a").forEach((e=>{if(e.hasAttribute("data-ignore-current"))return;new URL(e.href).pathname.replace(/\/$/,"")===t?e.setAttribute("aria-current","page"):e.removeAttribute("aria-current")}))},i=()=>{e.setAttribute("aria-hidden",!o),o?e.removeAttribute("inert"):e.setAttribute("inert","")},d=e=>{o=e,i()},s=e.id;window.addEventListener("sidebar:open",(e=>{e.detail?.id&&e.detail.id!==s||d(!0)})),window.addEventListener("sidebar:close",(e=>{e.detail?.id&&e.detail.id!==s||d(!1)})),window.addEventListener("sidebar:toggle",(e=>{e.detail?.id&&e.detail.id!==s||d(!o)})),e.addEventListener("click",(t=>{const n=t.target,o=e.querySelector("nav");if(window.innerWidth<a&&n.closest("a, button")&&!n.closest("[data-keep-mobile-sidebar-open]"))return document.activeElement&&document.activeElement.blur(),void d(!1);(n===e||o&&!o.contains(n))&&(document.activeElement&&document.activeElement.blur(),d(!1))})),window.addEventListener("popstate",r),window.addEventListener("basecoat:locationchange",r),i(),r(),e.dataset.sidebarInitialized=!0};document.querySelectorAll(".sidebar:not([data-sidebar-initialized])").forEach(e);new MutationObserver((t=>{t.forEach((t=>{t.addedNodes.forEach((t=>{t.nodeType===Node.ELEMENT_NODE&&(t.matches(".sidebar:not([data-sidebar-initialized])")&&e(t),t.querySelectorAll(".sidebar:not([data-sidebar-initialized])").forEach(e))}))}))})).observe(document.body,{childList:!0,subtree:!0})})(),(()=>{const e=e=>{const t=e.querySelector('[role="tablist"]');if(!t)return;const n=Array.from(t.querySelectorAll('[role="tab"]')),a=n.map((e=>document.getElementById(e.getAttribute("aria-controls")))).filter(Boolean),o=e=>{n.forEach(((e,t)=>{e.setAttribute("aria-selected","false"),e.setAttribute("tabindex","-1"),a[t]&&(a[t].hidden=!0)})),e.setAttribute("aria-selected","true"),e.setAttribute("tabindex","0");const t=document.getElementById(e.getAttribute("aria-controls"));t&&(t.hidden=!1)};t.addEventListener("click",(e=>{const t=e.target.closest('[role="tab"]');t&&o(t)})),t.addEventListener("keydown",(e=>{const t=e.target;if(!n.includes(t))return;let a;const r=n.indexOf(t);switch(e.key){case"ArrowRight":a=n[(r+1)%n.length];break;case"ArrowLeft":a=n[(r-1+n.length)%n.length];break;case"Home":a=n[0];break;case"End":a=n[n.length-1];break;default:return}e.preventDefault(),o(a),a.focus()})),e.dataset.tabsInitialized=!0};document.querySelectorAll(".tabs:not([data-tabs-initialized])").forEach(e);new MutationObserver((t=>{t.forEach((t=>{t.addedNodes.forEach((t=>{t.nodeType===Node.ELEMENT_NODE&&(t.matches(".tabs:not([data-tabs-initialized])")&&e(t),t.querySelectorAll(".tabs:not([data-tabs-initialized])").forEach(e))}))}))})).observe(document.body,{childList:!0,subtree:!0})})(),(()=>{let e;const t=new WeakMap;let n=!1;const a={success:'<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>',error:'<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>',info:'<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>',warning:'<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>'};function o(t){t.dataset.toasterInitialized||(e=t,e.addEventListener("mouseenter",i),e.addEventListener("mouseleave",d),e.addEventListener("click",(e=>{const t=e.target.closest(".toast footer a"),n=e.target.closest(".toast footer button");(t||n)&&s(e.target.closest(".toast"))})),e.querySelectorAll(".toast:not([data-toast-initialized])").forEach(r),e.dataset.toasterInitialized="true")}function r(e){if(e.dataset.toastInitialized)return;const a=parseInt(e.dataset.duration),o=-1!==a?a||("error"===e.dataset.category?5e3:3e3):-1,r={remainingTime:o,timeoutId:null,startTime:null};-1!==o&&(n?r.timeoutId=null:(r.startTime=Date.now(),r.timeoutId=setTimeout((()=>s(e)),o))),t.set(e,r),e.dataset.toastInitialized="true"}function i(){n||(n=!0,e.querySelectorAll('.toast:not([aria-hidden="true"])').forEach((e=>{if(!t.has(e))return;const n=t.get(e);n.timeoutId&&(clearTimeout(n.timeoutId),n.timeoutId=null,n.remainingTime-=Date.now()-n.startTime)})))}function d(){n&&(n=!1,e.querySelectorAll('.toast:not([aria-hidden="true"])').forEach((e=>{if(!t.has(e))return;const n=t.get(e);-1===n.remainingTime||n.timeoutId||(n.remainingTime>0?(n.startTime=Date.now(),n.timeoutId=setTimeout((()=>s(e)),n.remainingTime)):s(e))})))}function s(e){if(!t.has(e))return;const n=t.get(e);clearTimeout(n.timeoutId),t.delete(e),document.activeElement&&document.activeElement.blur(),e.setAttribute("aria-hidden","true"),e.addEventListener("transitionend",(()=>e.remove()),{once:!0})}const c=document.getElementById("toaster");c&&o(c),window.addEventListener("basecoat:toast",(t=>{if(!e)return void console.error("Cannot create toast: toaster container not found on page.");const n=function(e){const{category:t="info",title:n,description:o,action:r,cancel:i,duration:d,icon:s}=e,c=s||t&&a[t]||"",l=n?`<h2>${n}</h2>`:"",u=o?`<p>${o}</p>`:"",h=r?.href?`<a href="${r.href}" class="btn" data-toast-action>${r.label}</a>`:r?.onclick?`<button type="button" class="btn" data-toast-action onclick="${r.onclick}">${r.label}</button>`:"",v=i?`<button type="button" class="btn-outline h-6 text-xs px-2.5 rounded-sm" data-toast-cancel onclick="${i?.onclick}">${i.label}</button>`:"",m=`\n <div\n class="toast"\n role="${"error"===t?"alert":"status"}"\n aria-atomic="true"\n ${t?`data-category="${t}"`:""}\n ${void 0!==d?`data-duration="${d}"`:""}\n >\n <div class="toast-content">\n ${c}\n <section>\n ${l}\n ${u}\n </section>\n ${h||v?`<footer>${h}${v}</footer>`:""}\n </div>\n </div>\n </div>\n `,b=document.createElement("template");return b.innerHTML=m.trim(),b.content.firstChild}(t.detail?.config||{});e.appendChild(n)}));new MutationObserver((t=>{t.forEach((t=>{t.addedNodes.forEach((t=>{t.nodeType===Node.ELEMENT_NODE&&(t.matches("#toaster")&&o(t),e&&t.matches(".toast:not([data-toast-initialized])")&&r(t))}))}))})).observe(document.body,{childList:!0,subtree:!0})})();
|