drab 5.0.0-beta.0 → 5.0.0-beta.2

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Ross Robino
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,54 @@
+# A Headless Custom Element Library
+
+- [Docs](https://drab.robino.dev)
+- [GitHub](https://github.com/rossrobino/drab)
+- [npm](https://www.npmjs.com/package/drab)
+- [MIT License](https://github.com/rossrobino/drab/blob/main/LICENSE.md)
+
+## Features
+
+**drab** focuses on providing JavaScript functionality where it's most useful. Many of the elements are helpful wrappers around browser APIs. Here are some of the features of the library.
+
+### Built on the web platform
+
+- Each element is a [custom element](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements). So you can use them [with a framework](https://custom-elements-everywhere.com/), without one, or even directly in a markdown file. These components will work [regardless of your project's architecture](https://jakelazaroff.com/words/web-components-will-outlive-your-javascript-framework/).
+- **drab** does _not_ use the [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM), so you can style content within these elements as usual with CSS.
+- Since you provide the HTML, these elements can take advantage of what JavaScript frameworks excel at---creating reusable markup that can be server side rendered.
+- Each element can be imported, extended, named, and used however you see fit.
+
+### Minimal bundle size
+
+- **drab** has zero dependencies.
+
+### Write JavaScript, or don't
+
+- Elements can be installed as a package (recommended), or utilized without writing any JavaScript by adding a script tag to your document.
+- Each element can be configured through HTML attributes.
+
+### Built in animations
+
+- Uses the [web animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) for transitions.
+- Transitions are disabled for users who prefer reduced motion.
+- Extend the `Animate` element to build your own elements.
+
+## Contributing
+
+Find an bug or have an idea? Feel free to create an issue on [GitHub](https://github.com/rossrobino/drab).
+
+Since this is an headless library, simple components like a badge that can be easily created with HTML and CSS are not included.
+
+### Local Development
+
+This library is built with [Vite](https://vitejs.dev), [domco](https://domco.robino.dev), and TypeScript. The package contents are located in `src/package`.
+
+1. Clone the [repository](https://github.com/rossrobino/drab)
+2. `bun i`
+3. `bun dev`
+
+### Making changes
+
+1. Add or edit the element in `src/package`---each element should extend `Base` or `Animate`. Each element has a `index.ts` file with the source code, and then a `define.ts` file where it is imported and called for use with a CDN.
+2. Add or edit the example in `src/docs`.
+3. Export the element from `src/package/index.ts`.
+4. Run `bun doc` to document your element with [TypeDoc](https://typedoc.org/).
+5. Add the element as an entry point to `tsup.config.ts`, then run `bun package` to build with [tsup](https://tsup.egoist.dev/).

package/{animate.d.ts → animate/index.d.ts}

@@ -1,4 +1,4 @@
-import { Base } from './base.js';
+import { Base } from '../base/index.js';
 
 /**
  * The `Animate` base class provides a declarative way to use the

package/animate/index.js

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

package/base/index.js

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

package/{breakpoint.d.ts → breakpoint/index.d.ts}

@@ -1,4 +1,4 @@
-import { Base } from './base.js';
+import { Base } from '../base/index.js';
 
 type Breakpoints = {
     name: string;

package/breakpoint/index.js

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

package/{contextmenu.d.ts → contextmenu/index.d.ts}

@@ -1,5 +1,5 @@
-import { Animate } from './animate.js';
-import './base.js';
+import { Animate } from '../animate/index.js';
+import '../base/index.js';
 
 /**
  * Displays content when the `trigger` element is right clicked, or long pressed on mobile.

package/contextmenu/index.js

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

package/{copy.d.ts → copy/index.d.ts}

@@ -1,5 +1,5 @@
-import { B as BaseCopy } from './index-22PHGcPf.js';
-import './base.js';
+import { B as BaseCopy } from '../index-SyRipepB.js';
+import '../base/index.js';
 
 /**
  * Uses the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText)

package/copy/index.js

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

package/define/index.js

@@ -0,0 +1 @@
+import{b 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";for(let o in e)customElements.define(`drab-${o.toLowerCase()}`,e[o]);

package/{details.d.ts → details/index.d.ts}

@@ -1,5 +1,5 @@
-import { Animate } from './animate.js';
-import './base.js';
+import { Animate } from '../animate/index.js';
+import '../base/index.js';
 
 /**
  * This element provides a progressive enhancement on top of the `HTMLDetailsElement` to

package/details/index.js

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

package/{dialog.d.ts → dialog/index.d.ts}

@@ -1,5 +1,5 @@
-import { Animate } from './animate.js';
-import './base.js';
+import { Animate } from '../animate/index.js';
+import '../base/index.js';
 
 /**
  * Provides triggers and animations for the `HTMLDialogElement`.

package/dialog/index.js

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

package/{editor.d.ts → editor/index.d.ts}

@@ -1,4 +1,4 @@
-import { Base } from './base.js';
+import { Base } from '../base/index.js';
 
 /**
  * A piece of content to insert into the `textarea`.

package/editor/index.js

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

package/{fullscreen.d.ts → fullscreen/index.d.ts}

@@ -1,4 +1,4 @@
-import { Base } from './base.js';
+import { Base } from '../base/index.js';
 
 /**
  * Toggles the `documentElement` or `content` element to fullscreen mode.

package/fullscreen/index.js

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

package/{index-22PHGcPf.d.ts → index-SyRipepB.d.ts}

@@ -1,4 +1,4 @@
-import { Base } from './base.js';
+import { Base } from './base/index.js';
 
 declare class BaseCopy extends Base {
     constructor();

package/index.d.ts

@@ -1,14 +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';
+export { Base } from './base/index.js';
+export { Animate } from './animate/index.js';
+export { Breakpoint } from './breakpoint/index.js';
+export { ContextMenu } from './contextmenu/index.js';
+export { Copy } from './copy/index.js';
+export { Details } from './details/index.js';
+export { Dialog } from './dialog/index.js';
+export { Editor } from './editor/index.js';
+export { Fullscreen } from './fullscreen/index.js';
+export { Popover } from './popover/index.js';
+export { Share } from './share/index.js';
+export { TableSort } from './tablesort/index.js';
+export { YouTube } from './youtube/index.js';
+import './index-SyRipepB.js';

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "drab",
 	"description": "A headless custom element library",
-	"version": "5.0.0-beta.0",
+	"version": "5.0.0-beta.2",
 	"homepage": "https://drab.robino.dev",
 	"license": "MIT",
 	"author": {
@@ -18,108 +18,108 @@
 			"default": "./index.js"
 		},
 		"./define": {
-			"types": "./define.d.ts",
-			"default": "./define.js"
+			"types": "./define/index.d.ts",
+			"default": "./define/index.js"
 		},
 		"./animate": {
-			"types": "./animate.d.ts",
-			"default": "./animate.js"
+			"types": "./animate/index.d.ts",
+			"default": "./animate/index.js"
 		},
 		"./animate/define": {
 			"types": "./animate/define.d.ts",
 			"default": "./animate/define.js"
 		},
 		"./contextmenu": {
-			"types": "./contextmenu.d.ts",
-			"default": "./contextmenu.js"
+			"types": "./contextmenu/index.d.ts",
+			"default": "./contextmenu/index.js"
 		},
 		"./contextmenu/define": {
 			"types": "./contextmenu/define.d.ts",
 			"default": "./contextmenu/define.js"
 		},
 		"./details": {
-			"types": "./details.d.ts",
-			"default": "./details.js"
+			"types": "./details/index.d.ts",
+			"default": "./details/index.js"
 		},
 		"./details/define": {
 			"types": "./details/define.d.ts",
 			"default": "./details/define.js"
 		},
 		"./youtube": {
-			"types": "./youtube.d.ts",
-			"default": "./youtube.js"
+			"types": "./youtube/index.d.ts",
+			"default": "./youtube/index.js"
 		},
 		"./youtube/define": {
 			"types": "./youtube/define.d.ts",
 			"default": "./youtube/define.js"
 		},
 		"./breakpoint": {
-			"types": "./breakpoint.d.ts",
-			"default": "./breakpoint.js"
+			"types": "./breakpoint/index.d.ts",
+			"default": "./breakpoint/index.js"
 		},
 		"./breakpoint/define": {
 			"types": "./breakpoint/define.d.ts",
 			"default": "./breakpoint/define.js"
 		},
 		"./dialog": {
-			"types": "./dialog.d.ts",
-			"default": "./dialog.js"
+			"types": "./dialog/index.d.ts",
+			"default": "./dialog/index.js"
 		},
 		"./dialog/define": {
 			"types": "./dialog/define.d.ts",
 			"default": "./dialog/define.js"
 		},
 		"./popover": {
-			"types": "./popover.d.ts",
-			"default": "./popover.js"
+			"types": "./popover/index.d.ts",
+			"default": "./popover/index.js"
 		},
 		"./popover/define": {
 			"types": "./popover/define.d.ts",
 			"default": "./popover/define.js"
 		},
 		"./tablesort": {
-			"types": "./tablesort.d.ts",
-			"default": "./tablesort.js"
+			"types": "./tablesort/index.d.ts",
+			"default": "./tablesort/index.js"
 		},
 		"./tablesort/define": {
 			"types": "./tablesort/define.d.ts",
 			"default": "./tablesort/define.js"
 		},
 		"./copy": {
-			"types": "./copy.d.ts",
-			"default": "./copy.js"
+			"types": "./copy/index.d.ts",
+			"default": "./copy/index.js"
 		},
 		"./copy/define": {
 			"types": "./copy/define.d.ts",
 			"default": "./copy/define.js"
 		},
 		"./fullscreen": {
-			"types": "./fullscreen.d.ts",
-			"default": "./fullscreen.js"
+			"types": "./fullscreen/index.d.ts",
+			"default": "./fullscreen/index.js"
 		},
 		"./fullscreen/define": {
 			"types": "./fullscreen/define.d.ts",
 			"default": "./fullscreen/define.js"
 		},
 		"./base": {
-			"types": "./base.d.ts",
-			"default": "./base.js"
+			"types": "./base/index.d.ts",
+			"default": "./base/index.js"
 		},
 		"./base/define": {
 			"types": "./base/define.d.ts",
 			"default": "./base/define.js"
 		},
 		"./editor": {
-			"types": "./editor.d.ts",
-			"default": "./editor.js"
+			"types": "./editor/index.d.ts",
+			"default": "./editor/index.js"
 		},
 		"./editor/define": {
 			"types": "./editor/define.d.ts",
 			"default": "./editor/define.js"
 		},
 		"./share": {
-			"types": "./share.d.ts",
-			"default": "./share.js"
+			"types": "./share/index.d.ts",
+			"default": "./share/index.js"
 		},
 		"./share/define": {
 			"types": "./share/define.d.ts",
@@ -132,7 +132,7 @@
 		"preview": "vite preview",
 		"format": "prettier --write .",
 		"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",
+		"copy": "cp package.json ./package && cp README.md ./package && cp LICENSE.md ./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"

package/{popover.d.ts → popover/index.d.ts}

@@ -1,5 +1,5 @@
-import { Animate } from './animate.js';
-import './base.js';
+import { Animate } from '../animate/index.js';
+import '../base/index.js';
 
 /**
  * Provides animations for the Popover API.

package/popover/index.js

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

package/{share.d.ts → share/index.d.ts}

@@ -1,5 +1,5 @@
-import { B as BaseCopy } from './index-22PHGcPf.js';
-import './base.js';
+import { B as BaseCopy } from '../index-SyRipepB.js';
+import '../base/index.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.

package/share/index.js

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

package/{tablesort.d.ts → tablesort/index.d.ts}

@@ -1,4 +1,4 @@
-import { Base } from './base.js';
+import { Base } from '../base/index.js';
 
 /**
  * Wrap a `HTMLTableElement` in the `TableSort` element to have sortable column

package/tablesort/index.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.d.ts → youtube/index.d.ts}

@@ -1,4 +1,4 @@
-import { Base } from './base.js';
+import { Base } from '../base/index.js';
 
 /**
  * Embeds a YouTube video iframe into a website with the video uid, using www.youtube-nocookie.com.

package/youtube/index.js

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

package/animate.js

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

package/base.js

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

package/breakpoint.js

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

package/contextmenu.js

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

package/copy.js

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

package/define.js

@@ -1 +0,0 @@
-import{b 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";for(let o in e)customElements.define(`drab-${o.toLowerCase()}`,e[o]);

package/details.js

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

package/dialog.js

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

package/editor.js

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

package/fullscreen.js

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

package/popover.js

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

package/share.js

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

package/tablesort.js

@@ -1 +0,0 @@
-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.js

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