drab 4.1.6 → 5.0.0-beta.0

package/editor.d.ts

@@ -0,0 +1,58 @@
+import { Base } from './base.js';
+
+/**
+ * A piece of content to insert into the `textarea`.
+ */
+type ContentElement = {
+    /** How to insert the content. */
+    type: "block" | "inline" | "wrap";
+    /** The value to insert. */
+    value: string;
+    /** An optional keyboard shortcut. */
+    key?: string;
+};
+/**
+ * Enhances the `textarea` element with controls to add content and keyboard shortcuts. Compared to other WYSIWYG editors, the `text` value is just a `string`, so you can easily store it in a database or manipulate it without learning a separate API.
+ *
+ * `data-value`
+ *
+ * Set the value of the text to be inserted using the `data-value` attribute on the `trigger`.
+ *
+ * `data-type`
+ *
+ * Set the `data-type` attribute of the `trigger` to specify how the content should be inserted into the `textarea`.
+ *
+ * - `block` will be inserted at the beginning of the selected line.
+ * - `wrap` will be inserted before and after the current selection.
+ * - `inline` will be inserted at the current selection.
+ *
+ * `data-key`
+ *
+ * Add a `ctrl`/`meta` keyboard shortcut for the content based on the `data-key` attribute.
+ *
+ * Other features:
+ *
+ * - Automatically adds closing characters for `keyPairs`. For example, when typing `(`, `)` will be inserted and typed over when reached. All content with `data-type="wrap"` is also added to `keyPairs`.
+ * - Highlights the first word of the text inserted if it contains letters.
+ * - Automatically increments/decrements ordered lists.
+ * - Adds the starting character to the next line for `block` content.
+ * - On double click, highlight is corrected to only highlight the current word without space around it.
+ * - `tab` key will indent and not change focus if the selection is within a code block (three backticks).
+ * - When text is highlighted and a `wrap` character `keyPair` is typed, the highlighted text will be wrapped with the character instead of removing it. For example, if a word is highlighted and the `"` character is typed, the work will be surrounded by `"`s.
+ */
+declare class Editor extends Base {
+    #private;
+    /** The characters that will be automatically closed when typed. */
+    keyPairs: {
+        [key: string]: string;
+    };
+    constructor();
+    /** The `content`, expects an `HTMLTextAreaElement`. */
+    get textArea(): HTMLTextAreaElement;
+    /** The current `value` of the `textarea`. */
+    get text(): string;
+    set text(value: string);
+    mount(): void;
+}
+
+export { type ContentElement, Editor };

package/editor.iife.js

@@ -0,0 +1,9 @@
+"use strict";(()=>{var c=class extends HTMLElement{#n=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(t){this.setAttribute("event",t)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(t=HTMLElement){let s=this.querySelector(this.getAttribute("content")??"[data-content]");if(s instanceof t)return s;throw new Error("Content not found")}swapContent(t=!0,s=800){let n=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(n){let e=Array.from(this.getContent().childNodes);n instanceof HTMLTemplateElement?this.getContent().replaceChildren(n.content.cloneNode(!0)):this.getContent().replaceChildren(...n.childNodes),t&&setTimeout(()=>this.getContent().replaceChildren(...e),s)}}safeListener(t,s,n=document.body,e={}){e.signal=this.#n.signal,n.addEventListener(t,s,e)}triggerListener(t,s=this.event){for(let n of this.getTrigger())n.addEventListener(s,t)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}disconnectedCallback(){this.#n.abort()}};var y=class extends c{#n=[];keyPairs={"(":")","{":"}","[":"]","<":">",'"':'"',"`":"`"};constructor(){super();for(let t of this.#l)t.type==="wrap"&&(this.keyPairs[t.value]=t.value)}get textArea(){return this.getContent(HTMLTextAreaElement)}get text(){return this.textArea.value}set text(t){this.textArea.value=t}get#l(){let t=[];for(let s of this.getTrigger())t.push(this.#o(s));return t}get#h(){let t=this.text.split("```"),s=0;for(let[n,e]of t.entries())if(s+=e.length+3,this.#e<s)return n;return 0}get#t(){return this.textArea.selectionEnd}get#e(){return this.textArea.selectionStart}#s(t,s){this.textArea.setSelectionRange(t,s)}#o(t){let s=t.dataset.type,n=t.dataset.value,e=t.dataset.key??void 0;return{type:s,value:n,key:e}}async#c(t,s,n){if(t.type==="inline")this.text=`${this.text.slice(0,n)}${t.value}${this.text.slice(n)}`;else if(t.type==="wrap")this.text=d(this.text,t.value,s),this.text=d(this.text,this.keyPairs[t.value],n+t.value.length),t.value.length<2&&this.#n.push(t.value);else if(t.type==="block"){let{lines:e,lineNumber:i}=this.#r(),r=t.value.at(0);r&&e[i]?.startsWith(r)?e[i]=t.value.trim()+e[i]:e[i]=t.value+e[i],this.text=e.join(`
+`)}}async#u(t,s,n){let e=0,i=0;if(/[a-z]/i.test(t)){for(let r=n;r<this.text.length;r++)if(this.text[r]?.match(/[a-z]/i))e?i=r+1:e=r;else if(e)break}else e=s+t.length,i=n+t.length;this.#s(e,i),this.textArea.focus()}async#i(t){let s=this.#t,n=this.#e;await this.#c(t,n,s),this.#u(t.value,n,s)}#g(t){if(t){let s=[];this.#l.forEach(e=>{e.type==="block"&&s.push(e.value)});for(let e=0;e<s.length;e++){let i=s[e];if(i&&t.startsWith(i))return i}let n=m(t);if(n)return`${n}. `}return""}#r(){let t=this.text.split(`
+`),s=0;for(let n=0;n<t.length;n++){let e=t.at(n)?.length??0;if(s++,s+=e,s>this.#t)return{lines:t,lineNumber:n,columnNumber:this.#t-(s-e-1)}}return{lines:t,lineNumber:0,columnNumber:0}}#a(t,s=!1){let{lines:n}=this.#r();for(let e=t+1;e<n.length;e++){let i=n[e];if(i){let r=m(i);if(r){let l;if(s)if(r>1)l=r-1;else break;else l=r+1;n[e]=i.slice(String(r).length),n[e]=String(l)+n[e]}else break}}this.text=n.join(`
+`)}mount(){this.textArea.addEventListener("keydown",async t=>{let s=["ArrowUp","ArrowDown","Delete"],n=this.text[this.#t]??"";if(s.includes(t.key))this.#n=[];else if(t.key==="Backspace"){let e=this.text[this.#e-1];if(e&&e in this.keyPairs&&n===this.keyPairs[e]){t.preventDefault();let i=this.#e-1,r=this.#t-1;this.text=u(this.text,i),this.text=u(this.text,r),setTimeout(()=>{this.#s(i,r)},0),this.#n.pop()}if(e===`
+`&&this.#e===this.#t){t.preventDefault();let i=this.#e-1,{lineNumber:r}=this.#r();this.#a(r,!0),this.text=u(this.text,i),setTimeout(async()=>{this.#s(i,i)},0)}}else if(t.key==="Tab")this.#h%2!==0&&(t.preventDefault(),await this.#i({type:"inline",value:"	"}));else if(t.key==="Enter"){let{lines:e,lineNumber:i,columnNumber:r}=this.#r(),l=e.at(i),a=this.#g(l),h=a,g=m(a);if(g&&(a=`${g+1}. `),a&&h.length<r)t.preventDefault(),g&&this.#a(i),await this.#i({type:"inline",value:`
+${a}`});else if(a&&h.length===r){t.preventDefault();let p=this.#t-h.length;for(let f=0;f<h.length;f++)this.text=u(this.text,this.#t-(f+1));setTimeout(async()=>{this.#s(p,p),this.textArea.focus(),await this.#i({type:"inline",value:`
+`})},0)}}else{let e=Object.values(this.keyPairs).includes(n),i=this.#e!==this.#t;if((t.ctrlKey||t.metaKey)&&this.#e===this.#t&&(t.key==="c"||t.key==="x")){t.preventDefault();let{lines:r,lineNumber:l,columnNumber:a}=this.#r();if(await navigator.clipboard.writeText(`${l===0&&t.key==="x"?"":`
+`}${r[l]}`),t.key==="x"){let h=this.#e-a;r.splice(l,1),this.text=r.join(`
+`),setTimeout(()=>{this.#s(h,h)},0)}}if((t.ctrlKey||t.metaKey)&&t.key){let r=this.#l.find(l=>l.key===t.key);r&&this.#i(r)}else e&&(n===t.key||t.key==="ArrowRight")&&this.#n.length&&!i?(t.preventDefault(),this.#s(this.#e+1,this.#t+1),this.#n.pop()):t.key in this.keyPairs&&(t.preventDefault(),await this.#i({type:"wrap",value:t.key}),this.#n.push(t.key))}}),this.textArea.addEventListener("dblclick",()=>{this.#e!==this.#t&&(this.text[this.#e]===" "&&this.#s(this.#e+1,this.#t),this.text[this.#t-1]===" "&&this.#s(this.#e,this.#t-1))}),this.textArea.addEventListener("click",()=>this.#n=[]),this.triggerListener(t=>{t.target instanceof HTMLElement&&this.#i(this.#o(t.target))})}},m=o=>{let t=o.match(/^(\d+)\./);return t?Number(t[1]):null},d=(o,t,s)=>o.slice(0,s)+t+o.slice(s),u=(o,t)=>o.slice(0,t)+o.slice(t+1);})();

package/editor.js

@@ -0,0 +1 @@
+import{a}from"./chunk-FNJ7AESC.js";import"./chunk-MXKU7AKV.js";export{a as Editor};

package/fullscreen/define.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/fullscreen/define.iife.js

@@ -0,0 +1 @@
+"use strict";(()=>{var s=class extends HTMLElement{#e=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(e){this.setAttribute("event",e)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(e=HTMLElement){let t=this.querySelector(this.getAttribute("content")??"[data-content]");if(t instanceof e)return t;throw new Error("Content not found")}swapContent(e=!0,t=800){let n=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(n){let r=Array.from(this.getContent().childNodes);n instanceof HTMLTemplateElement?this.getContent().replaceChildren(n.content.cloneNode(!0)):this.getContent().replaceChildren(...n.childNodes),e&&setTimeout(()=>this.getContent().replaceChildren(...r),t)}}safeListener(e,t,n=document.body,r={}){r.signal=this.#e.signal,n.addEventListener(e,t,r)}triggerListener(e,t=this.event){for(let n of this.getTrigger())n.addEventListener(t,e)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}disconnectedCallback(){this.#e.abort()}};var o=class extends s{constructor(){super()}isFullscreen(){return document.fullscreenElement!==null}fullscreenSupported(){return!!document.documentElement.requestFullscreen}toggle(){if(this.isFullscreen())document.exitFullscreen();else try{this.getContent(HTMLElement).requestFullscreen()}catch{document.documentElement.requestFullscreen()}}mount(){this.triggerListener(()=>this.toggle());for(let e of this.getTrigger())!this.fullscreenSupported()&&"disabled"in e&&(e.disabled=!0)}};customElements.define("drab-fullscreen",o);})();

package/fullscreen/define.js

@@ -0,0 +1 @@
+import{a as e}from"../chunk-5JV4T7GM.js";import"../chunk-MXKU7AKV.js";customElements.define("drab-fullscreen",e);

package/fullscreen.d.ts

@@ -0,0 +1,23 @@
+import { Base } from './base.js';
+
+/**
+ * Toggles the `documentElement` or `content` element to fullscreen mode.
+ *
+ * Disables the `trigger` if fullscreen is not supported.
+ */
+declare class Fullscreen extends Base {
+    constructor();
+    /**
+     * @returns `true` if fullscreen is currently enabled.
+     */
+    isFullscreen(): boolean;
+    /**
+     * @returns `true` if fullscreen is supported.
+     */
+    fullscreenSupported(): boolean;
+    /** Enables or disables fullscreen mode based on the current state. */
+    toggle(): void;
+    mount(): void;
+}
+
+export { Fullscreen };

package/fullscreen.iife.js

@@ -0,0 +1 @@
+"use strict";(()=>{var s=class extends HTMLElement{#e=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(e){this.setAttribute("event",e)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(e=HTMLElement){let t=this.querySelector(this.getAttribute("content")??"[data-content]");if(t instanceof e)return t;throw new Error("Content not found")}swapContent(e=!0,t=800){let n=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(n){let r=Array.from(this.getContent().childNodes);n instanceof HTMLTemplateElement?this.getContent().replaceChildren(n.content.cloneNode(!0)):this.getContent().replaceChildren(...n.childNodes),e&&setTimeout(()=>this.getContent().replaceChildren(...r),t)}}safeListener(e,t,n=document.body,r={}){r.signal=this.#e.signal,n.addEventListener(e,t,r)}triggerListener(e,t=this.event){for(let n of this.getTrigger())n.addEventListener(t,e)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}disconnectedCallback(){this.#e.abort()}};var i=class extends s{constructor(){super()}isFullscreen(){return document.fullscreenElement!==null}fullscreenSupported(){return!!document.documentElement.requestFullscreen}toggle(){if(this.isFullscreen())document.exitFullscreen();else try{this.getContent(HTMLElement).requestFullscreen()}catch{document.documentElement.requestFullscreen()}}mount(){this.triggerListener(()=>this.toggle());for(let e of this.getTrigger())!this.fullscreenSupported()&&"disabled"in e&&(e.disabled=!0)}};})();

package/fullscreen.js

@@ -0,0 +1 @@
+import{a}from"./chunk-5JV4T7GM.js";import"./chunk-MXKU7AKV.js";export{a as Fullscreen};

package/index-22PHGcPf.d.ts

@@ -0,0 +1,17 @@
+import { Base } from './base.js';
+
+declare class BaseCopy extends Base {
+    constructor();
+    /**
+     * @default "" the empty string
+     */
+    get value(): string;
+    set value(value: string);
+    /**
+     * Copies the `text`.
+     * @param text The `text` to share
+     */
+    copy(text?: string): Promise<void>;
+}
+
+export { BaseCopy as B };

package/index.d.ts

@@ -0,0 +1,14 @@
+export { Base } from './base.js';
+export { Animate } from './animate.js';
+export { Breakpoint } from './breakpoint.js';
+export { ContextMenu } from './contextmenu.js';
+export { Copy } from './copy.js';
+export { Details } from './details.js';
+export { Dialog } from './dialog.js';
+export { Editor } from './editor.js';
+export { Fullscreen } from './fullscreen.js';
+export { Popover } from './popover.js';
+export { Share } from './share.js';
+export { TableSort } from './tablesort.js';
+export { YouTube } from './youtube.js';
+import './index-22PHGcPf.js';

package/index.iife.js

@@ -0,0 +1,9 @@
+"use strict";(()=>{var c=class extends HTMLElement{#s=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(t){this.setAttribute("event",t)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(t=HTMLElement){let e=this.querySelector(this.getAttribute("content")??"[data-content]");if(e instanceof t)return e;throw new Error("Content not found")}swapContent(t=!0,e=800){let s=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(s){let n=Array.from(this.getContent().childNodes);s instanceof HTMLTemplateElement?this.getContent().replaceChildren(s.content.cloneNode(!0)):this.getContent().replaceChildren(...s.childNodes),t&&setTimeout(()=>this.getContent().replaceChildren(...n),e)}}safeListener(t,e,s=document.body,n={}){n.signal=this.#s.signal,s.addEventListener(t,e,n)}triggerListener(t,e=this.event){for(let s of this.getTrigger())s.addEventListener(e,t)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}disconnectedCallback(){this.#s.abort()}};var m=class extends c{constructor(){super()}get animationOptions(){let t={};for(let e of this.getAttributeNames())if(e.startsWith("animation-option-")){let s=this.getAttribute(e),[,,n]=e.split("-");s&&(n==="duration"||n==="delay"?t[n]=Number(s):n==="easing"&&(t[n]=s))}return t}async animateElement(t={element:this.getContent(),options:{}}){let{element:e=this.getContent(),options:s={}}=t,n=this.keyframes;if(n.length&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches){s=Object.assign(this.animationOptions,s),s.duration||(s.duration=200),s.easing||(s.easing="ease-in-out");let r=n.at(0),i=n.at(-1);if(r&&i){let l=["composite","easing","offset"];for(let h of l)delete r[h],delete i[h]}s.direction?.includes("reverse")&&([r,i]=[i,r]),Object.assign(e.style,r),await e.animate(n,s).finished,Object.assign(e.style,i)}}get keyframes(){let t=[];for(let e of this.getAttributeNames()){let s=this.getAttribute(e),[,,n,...r]=e.split("-");if(e.startsWith("animation-keyframe-")){let i=r.map((o,l)=>l<1?o:o.at(0)?.toUpperCase()+o.slice(1)).join("");if(n&&i){n==="from"?n="0":n==="to"?n="1":n=String(parseInt(n)*.01);let o=Number(n),l=t.find(h=>h.offset===o);l?l[i]=s:t.push({[i]:s,offset:o})}}}return t.sort((e,s)=>Number(e.offset)-Number(s.offset)),t}};var b=class extends c{breakpoints=[{name:"sm",width:640},{name:"md",width:768},{name:"lg",width:1024},{name:"xl",width:1280},{name:"2xl",width:1536}];constructor(){super();let t=[];for(let e of this.getAttributeNames())if(e.startsWith("breakpoint-")){let[,...s]=e.split("-");s&&t.push({name:s.join("-"),width:Number(this.getAttribute(e))})}t.length&&(this.breakpoints=t),this.breakpoints.sort((e,s)=>s.width-e.width)}get breakpoint(){for(let t=0;t<this.breakpoints.length;t++){let e=this.breakpoints[t];if(e&&window.innerWidth>e.width)return e.name}return"none"}mount(){let t=()=>this.getContent().innerHTML=`${this.breakpoint}:${window.innerWidth}`;t(),this.safeListener("resize",t,window)}};var w=class extends m{#s;constructor(){super()}set#r(t){this.getContent().style.left=`${t.x}px`,this.getContent().style.top=`${t.y}px`}async show(t){let e=window.scrollY,s=window.scrollX,n=t instanceof MouseEvent?t.clientX:t.touches[0]?.clientX??0,r=t instanceof MouseEvent?t.clientY:t.touches[0]?.clientY??0,i=n+s,o=r+e;this.getContent().style.position="absolute",this.getContent().style.display="block";let l=this.getContent().offsetWidth+24,h=this.getContent().offsetHeight+6,u=window.innerWidth,f=window.innerHeight;i+l>s+u&&(i=s+u-l),o+h>e+f&&(o=e+f-h),this.#r={x:i,y:o},await this.animateElement()}async hide(){this.getContent().style.display!=="none"&&(await this.animateElement({options:{direction:"reverse"}}),this.getContent().style.display="none")}mount(){this.triggerListener(e=>{e.preventDefault(),this.show(e)},"contextmenu"),this.safeListener("click",()=>this.hide()),this.triggerListener(e=>{this.#s=setTimeout(()=>{this.show(e)},800)},"touchstart");let t=()=>clearTimeout(this.#s);this.triggerListener(t,"touchend"),this.triggerListener(t,"touchcancel"),this.safeListener("keydown",e=>{e.key==="Escape"&&this.hide()})}};var p=class extends c{constructor(){super()}get value(){return this.getAttribute("value")??""}set value(t){this.setAttribute("value",t)}async copy(t=this.value){await navigator.clipboard.writeText(t),this.swapContent()}};var x=class extends p{constructor(){super()}mount(){this.triggerListener(async()=>await this.copy())}};var v=class extends m{constructor(){super()}get details(){let t=this.getContent(HTMLElement).parentElement;if(!(t instanceof HTMLDetailsElement))throw new Error("Details: HTMLDetailsElement not found.");return t}async open(){this.details.open=!0,await this.animateElement()}async close(){await this.animateElement({options:{direction:"reverse"}}),this.details.open=!1}toggle(){this.details.open?this.close():this.open()}mount(){this.triggerListener(t=>{t.preventDefault(),this.toggle()})}};var E=class extends m{constructor(){super()}get dialog(){return this.getContent(HTMLDialogElement)}async show(){this.dialog.showModal(),await this.animateElement()}async close(){await this.animateElement({options:{direction:"reverse"}}),this.dialog.close()}async toggle(){this.dialog.open?this.close():this.show()}mount(){this.triggerListener(()=>this.toggle()),this.safeListener("keydown",t=>{t.key==="Escape"&&this.dialog.open&&(t.preventDefault(),this.close())})}};var T=class extends c{#s=[];keyPairs={"(":")","{":"}","[":"]","<":">",'"':'"',"`":"`"};constructor(){super();for(let t of this.#r)t.type==="wrap"&&(this.keyPairs[t.value]=t.value)}get textArea(){return this.getContent(HTMLTextAreaElement)}get text(){return this.textArea.value}set text(t){this.textArea.value=t}get#r(){let t=[];for(let e of this.getTrigger())t.push(this.#a(e));return t}get#h(){let t=this.text.split("```"),e=0;for(let[s,n]of t.entries())if(e+=n.length+3,this.#e<e)return s;return 0}get#t(){return this.textArea.selectionEnd}get#e(){return this.textArea.selectionStart}#n(t,e){this.textArea.setSelectionRange(t,e)}#a(t){let e=t.dataset.type,s=t.dataset.value,n=t.dataset.key??void 0;return{type:e,value:s,key:n}}async#c(t,e,s){if(t.type==="inline")this.text=`${this.text.slice(0,s)}${t.value}${this.text.slice(s)}`;else if(t.type==="wrap")this.text=N(this.text,t.value,e),this.text=N(this.text,this.keyPairs[t.value],s+t.value.length),t.value.length<2&&this.#s.push(t.value);else if(t.type==="block"){let{lines:n,lineNumber:r}=this.#o(),i=t.value.at(0);i&&n[r]?.startsWith(i)?n[r]=t.value.trim()+n[r]:n[r]=t.value+n[r],this.text=n.join(`
+`)}}async#u(t,e,s){let n=0,r=0;if(/[a-z]/i.test(t)){for(let i=s;i<this.text.length;i++)if(this.text[i]?.match(/[a-z]/i))n?r=i+1:n=i;else if(n)break}else n=e+t.length,r=s+t.length;this.#n(n,r),this.textArea.focus()}async#i(t){let e=this.#t,s=this.#e;await this.#c(t,s,e),this.#u(t.value,s,e)}#m(t){if(t){let e=[];this.#r.forEach(n=>{n.type==="block"&&e.push(n.value)});for(let n=0;n<e.length;n++){let r=e[n];if(r&&t.startsWith(r))return r}let s=k(t);if(s)return`${s}. `}return""}#o(){let t=this.text.split(`
+`),e=0;for(let s=0;s<t.length;s++){let n=t.at(s)?.length??0;if(e++,e+=n,e>this.#t)return{lines:t,lineNumber:s,columnNumber:this.#t-(e-n-1)}}return{lines:t,lineNumber:0,columnNumber:0}}#l(t,e=!1){let{lines:s}=this.#o();for(let n=t+1;n<s.length;n++){let r=s[n];if(r){let i=k(r);if(i){let o;if(e)if(i>1)o=i-1;else break;else o=i+1;s[n]=r.slice(String(i).length),s[n]=String(o)+s[n]}else break}}this.text=s.join(`
+`)}mount(){this.textArea.addEventListener("keydown",async t=>{let e=["ArrowUp","ArrowDown","Delete"],s=this.text[this.#t]??"";if(e.includes(t.key))this.#s=[];else if(t.key==="Backspace"){let n=this.text[this.#e-1];if(n&&n in this.keyPairs&&s===this.keyPairs[n]){t.preventDefault();let r=this.#e-1,i=this.#t-1;this.text=g(this.text,r),this.text=g(this.text,i),setTimeout(()=>{this.#n(r,i)},0),this.#s.pop()}if(n===`
+`&&this.#e===this.#t){t.preventDefault();let r=this.#e-1,{lineNumber:i}=this.#o();this.#l(i,!0),this.text=g(this.text,r),setTimeout(async()=>{this.#n(r,r)},0)}}else if(t.key==="Tab")this.#h%2!==0&&(t.preventDefault(),await this.#i({type:"inline",value:"	"}));else if(t.key==="Enter"){let{lines:n,lineNumber:r,columnNumber:i}=this.#o(),o=n.at(r),l=this.#m(o),h=l,u=k(l);if(u&&(l=`${u+1}. `),l&&h.length<i)t.preventDefault(),u&&this.#l(r),await this.#i({type:"inline",value:`
+${l}`});else if(l&&h.length===i){t.preventDefault();let d=this.#t-h.length;for(let y=0;y<h.length;y++)this.text=g(this.text,this.#t-(y+1));setTimeout(async()=>{this.#n(d,d),this.textArea.focus(),await this.#i({type:"inline",value:`
+`})},0)}}else{let n=Object.values(this.keyPairs).includes(s),r=this.#e!==this.#t;if((t.ctrlKey||t.metaKey)&&this.#e===this.#t&&(t.key==="c"||t.key==="x")){t.preventDefault();let{lines:i,lineNumber:o,columnNumber:l}=this.#o();if(await navigator.clipboard.writeText(`${o===0&&t.key==="x"?"":`
+`}${i[o]}`),t.key==="x"){let h=this.#e-l;i.splice(o,1),this.text=i.join(`
+`),setTimeout(()=>{this.#n(h,h)},0)}}if((t.ctrlKey||t.metaKey)&&t.key){let i=this.#r.find(o=>o.key===t.key);i&&this.#i(i)}else n&&(s===t.key||t.key==="ArrowRight")&&this.#s.length&&!r?(t.preventDefault(),this.#n(this.#e+1,this.#t+1),this.#s.pop()):t.key in this.keyPairs&&(t.preventDefault(),await this.#i({type:"wrap",value:t.key}),this.#s.push(t.key))}}),this.textArea.addEventListener("dblclick",()=>{this.#e!==this.#t&&(this.text[this.#e]===" "&&this.#n(this.#e+1,this.#t),this.text[this.#t-1]===" "&&this.#n(this.#e,this.#t-1))}),this.textArea.addEventListener("click",()=>this.#s=[]),this.triggerListener(t=>{t.target instanceof HTMLElement&&this.#i(this.#a(t.target))})}},k=a=>{let t=a.match(/^(\d+)\./);return t?Number(t[1]):null},N=(a,t,e)=>a.slice(0,e)+t+a.slice(e),g=(a,t)=>a.slice(0,t)+a.slice(t+1);var C=class extends c{constructor(){super()}isFullscreen(){return document.fullscreenElement!==null}fullscreenSupported(){return!!document.documentElement.requestFullscreen}toggle(){if(this.isFullscreen())document.exitFullscreen();else try{this.getContent(HTMLElement).requestFullscreen()}catch{document.documentElement.requestFullscreen()}}mount(){this.triggerListener(()=>this.toggle());for(let t of this.getTrigger())!this.fullscreenSupported()&&"disabled"in t&&(t.disabled=!0)}};var L=class extends m{constructor(){super()}get open(){return this.hasAttribute("open")}set open(t){t?this.setAttribute("open",""):this.removeAttribute("open")}async show(){this.getContent().showPopover(),await this.animateElement()}async hide(){await this.animateElement({options:{direction:"reverse"}}),this.getContent().hidePopover()}async toggle(){this.open?this.hide():this.show()}mount(){this.triggerListener(t=>{t.preventDefault(),this.toggle()}),this.getContent().addEventListener("toggle",t=>{t.newState==="open"?this.open=!0:this.open=!1}),this.safeListener("keydown",t=>{t.key==="Escape"&&this.open&&(t.preventDefault(),this.hide())})}};var A=class extends p{constructor(){super()}async share(t=this.value){if(navigator.canShare&&navigator.canShare({url:t}))try{await navigator.share({url:t})}catch(e){e?.name!=="AbortError"&&console.error(e)}else this.copy()}mount(){this.triggerListener(async()=>await this.share())}};var M=class extends c{constructor(){super()}mount(){let t=this.getContent(HTMLTableSectionElement);for(let e of this.getTrigger())e.addEventListener(this.event,()=>{Array.from(t.querySelectorAll("tr")).sort(D(e,e.toggleAttribute("data-ascending"))).forEach(s=>t.appendChild(s))})}},D=(a,t)=>(s,n)=>{let r=Array.from(a.parentNode?.children??[]).indexOf(a);return((o,l)=>{let h=a.dataset.type??"string";if(h==="string")return new Intl.Collator().compare(o,l);if(h==="boolean"){let u=f=>["0","false","null","undefined"].includes(f)?!1:!!f;return u(o)===u(l)?0:u(o)?-1:1}else return Number(o)-Number(l)})(S(t?s:n,r),S(t?n:s,r))},S=(a,t)=>{let e=a.children[t];return e instanceof HTMLElement?e.dataset.value??e.textContent??"":""};var H=class extends c{static observedAttributes=["autoplay","start","uid"];constructor(){super()}get iframe(){return this.getContent(HTMLIFrameElement)}get autoplay(){return this.hasAttribute("autoplay")}set autoplay(t){t?this.setAttribute("autoplay",""):this.removeAttribute("autoplay")}get start(){return this.getAttribute("start")??"0"}set start(t){this.setAttribute("start",t)}get uid(){let t=this.getAttribute("uid");if(!t)throw new Error("YouTube: missing `uid` attribute.");return t}set uid(t){this.setAttribute("uid",t)}mount(){this.iframe.allowFullscreen=!0,this.iframe.allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"}attributeChangedCallback(){queueMicrotask(()=>{this.iframe.src=`https://www.youtube-nocookie.com/embed/${this.uid}?start=${this.start}${this.autoplay?"&autoplay=1":""}`})}};})();

package/index.js

@@ -0,0 +1 @@
+import{a as l}from"./chunk-2ZZQECRY.js";import{a as m}from"./chunk-VEVFQB5N.js";import{a as h}from"./chunk-FNJ7AESC.js";import{a as i}from"./chunk-5JV4T7GM.js";import{a as j}from"./chunk-T7RZI3ZL.js";import{a as k}from"./chunk-IQJQPZUL.js";import{a as d}from"./chunk-57VEEUFG.js";import{a as e}from"./chunk-TSTTUEAF.js";import"./chunk-7F7CQUEG.js";import{a as f}from"./chunk-JMJUWKN2.js";import{a as g}from"./chunk-7S6DTKGH.js";import{a as b}from"./chunk-7KU2PRW5.js";import{a as c}from"./chunk-6HYPZWQ4.js";import{b as a}from"./chunk-MXKU7AKV.js";export{b as Animate,a as Base,c as Breakpoint,d as ContextMenu,e as Copy,f as Details,g as Dialog,h as Editor,i as Fullscreen,j as Popover,k as Share,l as TableSort,m as YouTube};

package/package.json

@@ -1,25 +1,7 @@
 {
 	"name": "drab",
-	"version": "4.1.6",
-	"description": "An Unstyled Svelte Component Library",
-	"keywords": [
-		"components",
-		"Svelte",
-		"SvelteKit",
-		"Breakpoint",
-		"ContextMenu",
-		"Copy",
-		"DataTable",
-		"Details",
-		"Editor",
-		"FrettedChord",
-		"Fullscreen",
-		"Popover",
-		"Share",
-		"Sheet",
-		"Tablature",
-		"YouTube"
-	],
+	"description": "A headless custom element library",
+	"version": "5.0.0-beta.0",
 	"homepage": "https://drab.robino.dev",
 	"license": "MIT",
 	"author": {
@@ -28,57 +10,147 @@
 	},
 	"repository": "github:rossrobino/drab",
 	"type": "module",
-	"sideEffects": false,
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
+	"types": "./index.d.ts",
+	"main": "./index.js",
 	"exports": {
 		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js"
+			"types": "./index.d.ts",
+			"default": "./index.js"
+		},
+		"./define": {
+			"types": "./define.d.ts",
+			"default": "./define.js"
+		},
+		"./animate": {
+			"types": "./animate.d.ts",
+			"default": "./animate.js"
+		},
+		"./animate/define": {
+			"types": "./animate/define.d.ts",
+			"default": "./animate/define.js"
+		},
+		"./contextmenu": {
+			"types": "./contextmenu.d.ts",
+			"default": "./contextmenu.js"
+		},
+		"./contextmenu/define": {
+			"types": "./contextmenu/define.d.ts",
+			"default": "./contextmenu/define.js"
+		},
+		"./details": {
+			"types": "./details.d.ts",
+			"default": "./details.js"
+		},
+		"./details/define": {
+			"types": "./details/define.d.ts",
+			"default": "./details/define.js"
+		},
+		"./youtube": {
+			"types": "./youtube.d.ts",
+			"default": "./youtube.js"
+		},
+		"./youtube/define": {
+			"types": "./youtube/define.d.ts",
+			"default": "./youtube/define.js"
+		},
+		"./breakpoint": {
+			"types": "./breakpoint.d.ts",
+			"default": "./breakpoint.js"
+		},
+		"./breakpoint/define": {
+			"types": "./breakpoint/define.d.ts",
+			"default": "./breakpoint/define.js"
+		},
+		"./dialog": {
+			"types": "./dialog.d.ts",
+			"default": "./dialog.js"
+		},
+		"./dialog/define": {
+			"types": "./dialog/define.d.ts",
+			"default": "./dialog/define.js"
+		},
+		"./popover": {
+			"types": "./popover.d.ts",
+			"default": "./popover.js"
+		},
+		"./popover/define": {
+			"types": "./popover/define.d.ts",
+			"default": "./popover/define.js"
+		},
+		"./tablesort": {
+			"types": "./tablesort.d.ts",
+			"default": "./tablesort.js"
+		},
+		"./tablesort/define": {
+			"types": "./tablesort/define.d.ts",
+			"default": "./tablesort/define.js"
+		},
+		"./copy": {
+			"types": "./copy.d.ts",
+			"default": "./copy.js"
+		},
+		"./copy/define": {
+			"types": "./copy/define.d.ts",
+			"default": "./copy/define.js"
+		},
+		"./fullscreen": {
+			"types": "./fullscreen.d.ts",
+			"default": "./fullscreen.js"
+		},
+		"./fullscreen/define": {
+			"types": "./fullscreen/define.d.ts",
+			"default": "./fullscreen/define.js"
+		},
+		"./base": {
+			"types": "./base.d.ts",
+			"default": "./base.js"
+		},
+		"./base/define": {
+			"types": "./base/define.d.ts",
+			"default": "./base/define.js"
+		},
+		"./editor": {
+			"types": "./editor.d.ts",
+			"default": "./editor.js"
+		},
+		"./editor/define": {
+			"types": "./editor/define.d.ts",
+			"default": "./editor/define.js"
+		},
+		"./share": {
+			"types": "./share.d.ts",
+			"default": "./share.js"
+		},
+		"./share/define": {
+			"types": "./share/define.d.ts",
+			"default": "./share/define.js"
 		}
 	},
-	"files": [
-		"dist"
-	],
 	"scripts": {
-		"dev": "vite dev",
-		"host": "vite dev --host",
-		"build": "vite build",
+		"dev": "vite --host",
+		"build": "tsc && vite build",
 		"preview": "vite preview",
-		"package": "svelte-kit sync && svelte-package && publint",
-		"prepublishOnly": "bun package",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --check . && eslint .",
 		"format": "prettier --write .",
-		"pub": "bun i && bun doc && bun package && npm publish --access public",
-		"doc": "bun format && node src/scripts/documentProps.js && node src/scripts/documentExamples.js && node src/scripts/copyReadMe.js"
-	},
-	"dependencies": {
-		"svelte": "^4.2.8"
+		"doc": "typedoc --out src/lib/docs --plugin typedoc-plugin-markdown src/package/index.ts --hideBreadcrumbs --hideInPageTOC --githubPages false --publicPath /docs/ && bun src/lib/scripts/doc/index.ts && bun format",
+		"copy": "cp package.json ./package",
+		"entry": "bun src/lib/scripts/entryPoints/index.ts && bun format",
+		"package": "bun entry && tsup && bun copy",
+		"pub": "bun i && bun doc && bun package && npm publish --access public --tag beta ./package"
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-vercel": "^3.1.0",
-		"@sveltejs/kit": "^1.29.1",
-		"@sveltejs/package": "^2.2.3",
 		"@tailwindcss/typography": "^0.5.10",
-		"@types/node": "^20.10.4",
-		"@typescript-eslint/eslint-plugin": "^6.14.0",
-		"@typescript-eslint/parser": "^6.14.0",
+		"@types/node": "^20.11.0",
 		"autoprefixer": "^10.4.16",
-		"eslint": "^8.55.0",
-		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-svelte": "^2.35.1",
-		"prettier": "^3.1.1",
-		"prettier-plugin-svelte": "^3.1.2",
-		"prettier-plugin-tailwindcss": "^0.5.9",
-		"publint": "^0.2.6",
+		"domco": "^0.3.7",
+		"prettier": "^3.2.1",
+		"prettier-plugin-tailwindcss": "^0.5.11",
 		"robino": "^0.0.39",
-		"svelte-check": "^3.6.2",
-		"tailwindcss": "^3.3.6",
-		"tslib": "^2.6.2",
+		"tailwindcss": "^3.4.1",
+		"tsup": "^8.0.1",
+		"typedoc": "^0.25.7",
+		"typedoc-plugin-markdown": "^3.17.1",
 		"typescript": "^5.3.3",
-		"uico": "^0.1.6",
-		"vite": "^4.5.0"
+		"uico": "^0.2.2",
+		"vite": "^5.0.11"
 	}
 }

package/popover/define.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/popover/define.iife.js

@@ -0,0 +1 @@
+"use strict";(()=>{var f=class extends HTMLElement{#e=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(e){this.setAttribute("event",e)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(e=HTMLElement){let s=this.querySelector(this.getAttribute("content")??"[data-content]");if(s instanceof e)return s;throw new Error("Content not found")}swapContent(e=!0,s=800){let t=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(t){let n=Array.from(this.getContent().childNodes);t instanceof HTMLTemplateElement?this.getContent().replaceChildren(t.content.cloneNode(!0)):this.getContent().replaceChildren(...t.childNodes),e&&setTimeout(()=>this.getContent().replaceChildren(...n),s)}}safeListener(e,s,t=document.body,n={}){n.signal=this.#e.signal,t.addEventListener(e,s,n)}triggerListener(e,s=this.event){for(let t of this.getTrigger())t.addEventListener(s,e)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}disconnectedCallback(){this.#e.abort()}};var m=class extends f{constructor(){super()}get animationOptions(){let e={};for(let s of this.getAttributeNames())if(s.startsWith("animation-option-")){let t=this.getAttribute(s),[,,n]=s.split("-");t&&(n==="duration"||n==="delay"?e[n]=Number(t):n==="easing"&&(e[n]=t))}return e}async animateElement(e={element:this.getContent(),options:{}}){let{element:s=this.getContent(),options:t={}}=e,n=this.keyframes;if(n.length&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches){t=Object.assign(this.animationOptions,t),t.duration||(t.duration=200),t.easing||(t.easing="ease-in-out");let o=n.at(0),i=n.at(-1);if(o&&i){let a=["composite","easing","offset"];for(let l of a)delete o[l],delete i[l]}t.direction?.includes("reverse")&&([o,i]=[i,o]),Object.assign(s.style,o),await s.animate(n,t).finished,Object.assign(s.style,i)}}get keyframes(){let e=[];for(let s of this.getAttributeNames()){let t=this.getAttribute(s),[,,n,...o]=s.split("-");if(s.startsWith("animation-keyframe-")){let i=o.map((r,a)=>a<1?r:r.at(0)?.toUpperCase()+r.slice(1)).join("");if(n&&i){n==="from"?n="0":n==="to"?n="1":n=String(parseInt(n)*.01);let r=Number(n),a=e.find(l=>l.offset===r);a?a[i]=t:e.push({[i]:t,offset:r})}}}return e.sort((s,t)=>Number(s.offset)-Number(t.offset)),e}};var c=class extends m{constructor(){super()}get open(){return this.hasAttribute("open")}set open(e){e?this.setAttribute("open",""):this.removeAttribute("open")}async show(){this.getContent().showPopover(),await this.animateElement()}async hide(){await this.animateElement({options:{direction:"reverse"}}),this.getContent().hidePopover()}async toggle(){this.open?this.hide():this.show()}mount(){this.triggerListener(e=>{e.preventDefault(),this.toggle()}),this.getContent().addEventListener("toggle",e=>{e.newState==="open"?this.open=!0:this.open=!1}),this.safeListener("keydown",e=>{e.key==="Escape"&&this.open&&(e.preventDefault(),this.hide())})}};customElements.define("drab-popover",c);})();

package/popover/define.js

@@ -0,0 +1 @@
+import{a as o}from"../chunk-T7RZI3ZL.js";import"../chunk-7KU2PRW5.js";import"../chunk-MXKU7AKV.js";customElements.define("drab-popover",o);

package/popover.d.ts

@@ -0,0 +1,29 @@
+import { Animate } from './animate.js';
+import './base.js';
+
+/**
+ * Provides animations for the Popover API.
+ *
+ * The Popover API is not currently support in FireFox. [See the latest browser compatibility on MDN](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API#browser_compatibility).
+ *
+ * This component can be deprecated once it can be animated with CSS only,
+ * currently [only available in Chrome](https://developer.chrome.com/blog/introducing-popover-api#interactive_entry_and_exit).
+ */
+declare class Popover extends Animate {
+    constructor();
+    /**
+     * Whether the popover is open or closed. This doesn't get set
+     * automatically on the element like with the `HTMLDialogElement`.
+     */
+    get open(): boolean;
+    set open(value: boolean);
+    /** `HTMLElement.showPopover()` with animation. */
+    show(): Promise<void>;
+    /** `HTMLElement.hidePopover()` with animation. */
+    hide(): Promise<void>;
+    /** `show` or `hide` depending on the current state. */
+    toggle(): Promise<void>;
+    mount(): void;
+}
+
+export { Popover };

package/popover.iife.js

@@ -0,0 +1 @@
+"use strict";(()=>{var f=class extends HTMLElement{#e=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(e){this.setAttribute("event",e)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(e=HTMLElement){let s=this.querySelector(this.getAttribute("content")??"[data-content]");if(s instanceof e)return s;throw new Error("Content not found")}swapContent(e=!0,s=800){let t=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(t){let n=Array.from(this.getContent().childNodes);t instanceof HTMLTemplateElement?this.getContent().replaceChildren(t.content.cloneNode(!0)):this.getContent().replaceChildren(...t.childNodes),e&&setTimeout(()=>this.getContent().replaceChildren(...n),s)}}safeListener(e,s,t=document.body,n={}){n.signal=this.#e.signal,t.addEventListener(e,s,n)}triggerListener(e,s=this.event){for(let t of this.getTrigger())t.addEventListener(s,e)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}disconnectedCallback(){this.#e.abort()}};var m=class extends f{constructor(){super()}get animationOptions(){let e={};for(let s of this.getAttributeNames())if(s.startsWith("animation-option-")){let t=this.getAttribute(s),[,,n]=s.split("-");t&&(n==="duration"||n==="delay"?e[n]=Number(t):n==="easing"&&(e[n]=t))}return e}async animateElement(e={element:this.getContent(),options:{}}){let{element:s=this.getContent(),options:t={}}=e,n=this.keyframes;if(n.length&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches){t=Object.assign(this.animationOptions,t),t.duration||(t.duration=200),t.easing||(t.easing="ease-in-out");let o=n.at(0),i=n.at(-1);if(o&&i){let a=["composite","easing","offset"];for(let l of a)delete o[l],delete i[l]}t.direction?.includes("reverse")&&([o,i]=[i,o]),Object.assign(s.style,o),await s.animate(n,t).finished,Object.assign(s.style,i)}}get keyframes(){let e=[];for(let s of this.getAttributeNames()){let t=this.getAttribute(s),[,,n,...o]=s.split("-");if(s.startsWith("animation-keyframe-")){let i=o.map((r,a)=>a<1?r:r.at(0)?.toUpperCase()+r.slice(1)).join("");if(n&&i){n==="from"?n="0":n==="to"?n="1":n=String(parseInt(n)*.01);let r=Number(n),a=e.find(l=>l.offset===r);a?a[i]=t:e.push({[i]:t,offset:r})}}}return e.sort((s,t)=>Number(s.offset)-Number(t.offset)),e}};var h=class extends m{constructor(){super()}get open(){return this.hasAttribute("open")}set open(e){e?this.setAttribute("open",""):this.removeAttribute("open")}async show(){this.getContent().showPopover(),await this.animateElement()}async hide(){await this.animateElement({options:{direction:"reverse"}}),this.getContent().hidePopover()}async toggle(){this.open?this.hide():this.show()}mount(){this.triggerListener(e=>{e.preventDefault(),this.toggle()}),this.getContent().addEventListener("toggle",e=>{e.newState==="open"?this.open=!0:this.open=!1}),this.safeListener("keydown",e=>{e.key==="Escape"&&this.open&&(e.preventDefault(),this.hide())})}};})();

package/popover.js

@@ -0,0 +1 @@
+import{a}from"./chunk-T7RZI3ZL.js";import"./chunk-7KU2PRW5.js";import"./chunk-MXKU7AKV.js";export{a as Popover};

package/share/define.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/share/define.iife.js

@@ -0,0 +1 @@
+"use strict";(()=>{var s=class extends HTMLElement{#e=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(e){this.setAttribute("event",e)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(e=HTMLElement){let t=this.querySelector(this.getAttribute("content")??"[data-content]");if(t instanceof e)return t;throw new Error("Content not found")}swapContent(e=!0,t=800){let n=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(n){let r=Array.from(this.getContent().childNodes);n instanceof HTMLTemplateElement?this.getContent().replaceChildren(n.content.cloneNode(!0)):this.getContent().replaceChildren(...n.childNodes),e&&setTimeout(()=>this.getContent().replaceChildren(...r),t)}}safeListener(e,t,n=document.body,r={}){r.signal=this.#e.signal,n.addEventListener(e,t,r)}triggerListener(e,t=this.event){for(let n of this.getTrigger())n.addEventListener(t,e)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}disconnectedCallback(){this.#e.abort()}};var i=class extends s{constructor(){super()}get value(){return this.getAttribute("value")??""}set value(e){this.setAttribute("value",e)}async copy(e=this.value){await navigator.clipboard.writeText(e),this.swapContent()}};var o=class extends i{constructor(){super()}async share(e=this.value){if(navigator.canShare&&navigator.canShare({url:e}))try{await navigator.share({url:e})}catch(t){t?.name!=="AbortError"&&console.error(t)}else this.copy()}mount(){this.triggerListener(async()=>await this.share())}};customElements.define("drab-share",o);})();

package/share/define.js

@@ -0,0 +1 @@
+import{a as e}from"../chunk-IQJQPZUL.js";import"../chunk-7F7CQUEG.js";import"../chunk-MXKU7AKV.js";customElements.define("drab-share",e);

package/share.d.ts

@@ -0,0 +1,19 @@
+import { B as BaseCopy } from './index-22PHGcPf.js';
+import './base.js';
+
+/**
+ * Uses the [Navigator API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share) to share a `url`. If `share` is not supported, falls back to copy the text instead.
+ */
+declare class Share extends BaseCopy {
+    constructor();
+    /**
+     * Shares or copies the `value`.
+     * @param url The `url` to share, defaults to `this.value`
+     * @returns An object containing a `result` - whether the `url` was copied or shared
+     * depending on browser support.
+     */
+    share(url?: string): Promise<void>;
+    mount(): void;
+}
+
+export { Share };

package/share.iife.js

@@ -0,0 +1 @@
+"use strict";(()=>{var s=class extends HTMLElement{#e=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(e){this.setAttribute("event",e)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(e=HTMLElement){let t=this.querySelector(this.getAttribute("content")??"[data-content]");if(t instanceof e)return t;throw new Error("Content not found")}swapContent(e=!0,t=800){let n=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(n){let r=Array.from(this.getContent().childNodes);n instanceof HTMLTemplateElement?this.getContent().replaceChildren(n.content.cloneNode(!0)):this.getContent().replaceChildren(...n.childNodes),e&&setTimeout(()=>this.getContent().replaceChildren(...r),t)}}safeListener(e,t,n=document.body,r={}){r.signal=this.#e.signal,n.addEventListener(e,t,r)}triggerListener(e,t=this.event){for(let n of this.getTrigger())n.addEventListener(t,e)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}disconnectedCallback(){this.#e.abort()}};var i=class extends s{constructor(){super()}get value(){return this.getAttribute("value")??""}set value(e){this.setAttribute("value",e)}async copy(e=this.value){await navigator.clipboard.writeText(e),this.swapContent()}};var a=class extends i{constructor(){super()}async share(e=this.value){if(navigator.canShare&&navigator.canShare({url:e}))try{await navigator.share({url:e})}catch(t){t?.name!=="AbortError"&&console.error(t)}else this.copy()}mount(){this.triggerListener(async()=>await this.share())}};})();

package/share.js

@@ -0,0 +1 @@
+import{a}from"./chunk-IQJQPZUL.js";import"./chunk-7F7CQUEG.js";import"./chunk-MXKU7AKV.js";export{a as Share};

package/tablesort/define.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/tablesort/define.iife.js

@@ -0,0 +1 @@
+"use strict";(()=>{var n=class extends HTMLElement{#t=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(t){this.setAttribute("event",t)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(t=HTMLElement){let e=this.querySelector(this.getAttribute("content")??"[data-content]");if(e instanceof t)return e;throw new Error("Content not found")}swapContent(t=!0,e=800){let s=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(s){let r=Array.from(this.getContent().childNodes);s instanceof HTMLTemplateElement?this.getContent().replaceChildren(s.content.cloneNode(!0)):this.getContent().replaceChildren(...s.childNodes),t&&setTimeout(()=>this.getContent().replaceChildren(...r),e)}}safeListener(t,e,s=document.body,r={}){r.signal=this.#t.signal,s.addEventListener(t,e,r)}triggerListener(t,e=this.event){for(let s of this.getTrigger())s.addEventListener(e,t)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}disconnectedCallback(){this.#t.abort()}};var o=class extends n{constructor(){super()}mount(){let t=this.getContent(HTMLTableSectionElement);for(let e of this.getTrigger())e.addEventListener(this.event,()=>{Array.from(t.querySelectorAll("tr")).sort(d(e,e.toggleAttribute("data-ascending"))).forEach(s=>t.appendChild(s))})}},d=(i,t)=>(s,r)=>{let u=Array.from(i.parentNode?.children??[]).indexOf(i);return((a,c)=>{let m=i.dataset.type??"string";if(m==="string")return new Intl.Collator().compare(a,c);if(m==="boolean"){let l=f=>["0","false","null","undefined"].includes(f)?!1:!!f;return l(a)===l(c)?0:l(a)?-1:1}else return Number(a)-Number(c)})(p(t?s:r,u),p(t?r:s,u))},p=(i,t)=>{let e=i.children[t];return e instanceof HTMLElement?e.dataset.value??e.textContent??"":""};customElements.define("drab-tablesort",o);})();

package/tablesort/define.js

@@ -0,0 +1 @@
+import{a as e}from"../chunk-2ZZQECRY.js";import"../chunk-VEVFQB5N.js";import"../chunk-FNJ7AESC.js";import"../chunk-5JV4T7GM.js";import"../chunk-T7RZI3ZL.js";import"../chunk-IQJQPZUL.js";import"../chunk-57VEEUFG.js";import"../chunk-TSTTUEAF.js";import"../chunk-7F7CQUEG.js";import"../chunk-JMJUWKN2.js";import"../chunk-7S6DTKGH.js";import"../chunk-7KU2PRW5.js";import"../chunk-6HYPZWQ4.js";import"../chunk-MXKU7AKV.js";customElements.define("drab-tablesort",e);

package/tablesort.d.ts

@@ -0,0 +1,21 @@
+import { Base } from './base.js';
+
+/**
+ * Wrap a `HTMLTableElement` in the `TableSort` element to have sortable column
+ * headers. Set each `th` that you want to sort to the `trigger`. Set the `tbody`
+ * element to the `content`.
+ *
+ * The values of each cell default to the cell's `textContent`. If you would like to
+ * provide an alternate value than what appears in the cell to sort by instead,
+ * you can set a different value using the `data-value` attribute on the cell.
+ *
+ * The cells will be sorted as `string` by default. If you want to provide a different
+ * datatype `number` or `boolean`, set `data-type="number"` on the corresponding
+ * `th`/`trigger` element. The data will be converted to the specified type before sorting.
+ */
+declare class TableSort extends Base {
+    constructor();
+    mount(): void;
+}
+
+export { TableSort };

package/tablesort.iife.js

@@ -0,0 +1 @@
+"use strict";(()=>{var n=class extends HTMLElement{#t=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(t){this.setAttribute("event",t)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(t=HTMLElement){let e=this.querySelector(this.getAttribute("content")??"[data-content]");if(e instanceof t)return e;throw new Error("Content not found")}swapContent(t=!0,e=800){let s=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(s){let r=Array.from(this.getContent().childNodes);s instanceof HTMLTemplateElement?this.getContent().replaceChildren(s.content.cloneNode(!0)):this.getContent().replaceChildren(...s.childNodes),t&&setTimeout(()=>this.getContent().replaceChildren(...r),e)}}safeListener(t,e,s=document.body,r={}){r.signal=this.#t.signal,s.addEventListener(t,e,r)}triggerListener(t,e=this.event){for(let s of this.getTrigger())s.addEventListener(e,t)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}disconnectedCallback(){this.#t.abort()}};var c=class extends n{constructor(){super()}mount(){let t=this.getContent(HTMLTableSectionElement);for(let e of this.getTrigger())e.addEventListener(this.event,()=>{Array.from(t.querySelectorAll("tr")).sort(d(e,e.toggleAttribute("data-ascending"))).forEach(s=>t.appendChild(s))})}},d=(i,t)=>(s,r)=>{let u=Array.from(i.parentNode?.children??[]).indexOf(i);return((o,h)=>{let m=i.dataset.type??"string";if(m==="string")return new Intl.Collator().compare(o,h);if(m==="boolean"){let a=f=>["0","false","null","undefined"].includes(f)?!1:!!f;return a(o)===a(h)?0:a(o)?-1:1}else return Number(o)-Number(h)})(p(t?s:r,u),p(t?r:s,u))},p=(i,t)=>{let e=i.children[t];return e instanceof HTMLElement?e.dataset.value??e.textContent??"":""};})();

package/tablesort.js

@@ -0,0 +1 @@
+import{a}from"./chunk-2ZZQECRY.js";import"./chunk-VEVFQB5N.js";import"./chunk-FNJ7AESC.js";import"./chunk-5JV4T7GM.js";import"./chunk-T7RZI3ZL.js";import"./chunk-IQJQPZUL.js";import"./chunk-57VEEUFG.js";import"./chunk-TSTTUEAF.js";import"./chunk-7F7CQUEG.js";import"./chunk-JMJUWKN2.js";import"./chunk-7S6DTKGH.js";import"./chunk-7KU2PRW5.js";import"./chunk-6HYPZWQ4.js";import"./chunk-MXKU7AKV.js";export{a as TableSort};

package/youtube/define.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/youtube/define.iife.js

@@ -0,0 +1 @@
+"use strict";(()=>{var s=class extends HTMLElement{#t=new AbortController;constructor(){super()}get event(){return this.getAttribute("event")??"click"}set event(t){this.setAttribute("event",t)}getTrigger(){return this.querySelectorAll(this.getAttribute("trigger")??"[data-trigger]")}getContent(t=HTMLElement){let e=this.querySelector(this.getAttribute("content")??"[data-content]");if(e instanceof t)return e;throw new Error("Content not found")}swapContent(t=!0,e=800){let r=this.querySelector(this.getAttribute("swap")??"[data-swap]");if(r){let n=Array.from(this.getContent().childNodes);r instanceof HTMLTemplateElement?this.getContent().replaceChildren(r.content.cloneNode(!0)):this.getContent().replaceChildren(...r.childNodes),t&&setTimeout(()=>this.getContent().replaceChildren(...n),e)}}safeListener(t,e,r=document.body,n={}){n.signal=this.#t.signal,r.addEventListener(t,e,n)}triggerListener(t,e=this.event){for(let r of this.getTrigger())r.addEventListener(e,t)}mount(){}connectedCallback(){queueMicrotask(()=>this.mount())}disconnectedCallback(){this.#t.abort()}};var i=class extends s{static observedAttributes=["autoplay","start","uid"];constructor(){super()}get iframe(){return this.getContent(HTMLIFrameElement)}get autoplay(){return this.hasAttribute("autoplay")}set autoplay(t){t?this.setAttribute("autoplay",""):this.removeAttribute("autoplay")}get start(){return this.getAttribute("start")??"0"}set start(t){this.setAttribute("start",t)}get uid(){let t=this.getAttribute("uid");if(!t)throw new Error("YouTube: missing `uid` attribute.");return t}set uid(t){this.setAttribute("uid",t)}mount(){this.iframe.allowFullscreen=!0,this.iframe.allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"}attributeChangedCallback(){queueMicrotask(()=>{this.iframe.src=`https://www.youtube-nocookie.com/embed/${this.uid}?start=${this.start}${this.autoplay?"&autoplay=1":""}`})}};customElements.define("drab-youtube",i);})();

package/youtube/define.js

@@ -0,0 +1 @@
+import{a as e}from"../chunk-VEVFQB5N.js";import"../chunk-MXKU7AKV.js";customElements.define("drab-youtube",e);

package/youtube.d.ts

@@ -0,0 +1,29 @@
+import { Base } from './base.js';
+
+/**
+ * Embeds a YouTube video iframe into a website with the video uid, using www.youtube-nocookie.com.
+ */
+declare class YouTube extends Base {
+    static observedAttributes: readonly ["autoplay", "start", "uid"];
+    constructor();
+    /** The `HTMLIFrameElement` within the element. */
+    get iframe(): HTMLIFrameElement;
+    /** Whether the video should start playing when loaded. */
+    get autoplay(): boolean;
+    set autoplay(value: boolean);
+    /** The start time of the video (seconds). */
+    get start(): string;
+    set start(value: string);
+    /**
+     * The video's YouTube uid, found within the url of the video.
+     *
+     * For example if the video url is https://youtu.be/gouiY85kD2o,
+     * the `uid` is `"gouiY85kD2o"`.
+     */
+    get uid(): string;
+    set uid(v: string);
+    mount(): void;
+    attributeChangedCallback(): void;
+}
+
+export { YouTube };