drab 2.8.3 → 2.8.5

package/package.json

@@ -1,82 +1,82 @@
-{
-	"name": "drab",
-	"version": "2.8.3",
-	"description": "An unstyled Svelte component library",
-	"keywords": [
-		"components",
-		"Svelte",
-		"SvelteKit",
-		"Accordion",
-		"Breakpoint",
-		"Chord",
-		"ContextMenu",
-		"Copy",
-		"DataTable",
-		"Editor",
-		"Fullscreen",
-		"Popover",
-		"Share",
-		"Sheet",
-		"Tabs",
-		"YouTube"
-	],
-	"homepage": "https://drab.robino.dev",
-	"license": "MIT",
-	"author": {
-		"name": "Ross Robino",
-		"url": "https://robino.dev"
-	},
-	"repository": "github:rossrobino/drab",
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build && npm run package",
-		"preview": "vite preview",
-		"package": "svelte-kit sync && svelte-package && publint",
-		"prepublishOnly": "npm run 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 . --plugin=prettier-plugin-svelte --plugin=prettier-plugin-tailwindcss",
-		"pub": "npm publish --access public",
-		"doc": "node src/scripts/documentProps.js && node src/scripts/documentExamples.js && node src/scripts/copyReadMe.js"
-	},
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js"
-		}
-	},
-	"files": [
-		"dist"
-	],
-	"dependencies": {
-		"svelte": "^4.2.0"
-	},
-	"devDependencies": {
-		"@sveltejs/adapter-vercel": "^3.0.3",
-		"@sveltejs/kit": "^1.22.6",
-		"@sveltejs/package": "^2.2.1",
-		"@tailwindcss/typography": "^0.5.9",
-		"@types/node": "^20.5.1",
-		"@typescript-eslint/eslint-plugin": "^6.4.0",
-		"@typescript-eslint/parser": "^6.4.0",
-		"autoprefixer": "^10.4.15",
-		"eslint": "^8.47.0",
-		"eslint-config-prettier": "^9.0.0",
-		"eslint-plugin-svelte": "^2.32.4",
-		"marked": "^7.0.4",
-		"postcss": "^8.4.28",
-		"prettier": "^3.0.2",
-		"prettier-plugin-svelte": "^3.0.3",
-		"prettier-plugin-tailwindcss": "^0.5.3",
-		"publint": "^0.2.1",
-		"svelte-check": "^3.5.0",
-		"tailwindcss": "^3.3.3",
-		"tslib": "^2.6.2",
-		"typescript": "^5.1.6",
-		"vite": "^4.4.9"
-	},
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"type": "module"
-}
+{
+	"name": "drab",
+	"version": "2.8.5",
+	"description": "An unstyled Svelte component library",
+	"keywords": [
+		"components",
+		"Svelte",
+		"SvelteKit",
+		"Breakpoint",
+		"Chord",
+		"ContextMenu",
+		"Copy",
+		"DataTable",
+		"Details",
+		"Editor",
+		"Fullscreen",
+		"Popover",
+		"Share",
+		"Sheet",
+		"Tabs",
+		"YouTube"
+	],
+	"homepage": "https://drab.robino.dev",
+	"license": "MIT",
+	"author": {
+		"name": "Ross Robino",
+		"url": "https://robino.dev"
+	},
+	"repository": "github:rossrobino/drab",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run package",
+		"preview": "vite preview",
+		"package": "svelte-kit sync && svelte-package && publint",
+		"prepublishOnly": "npm run 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 . --plugin=prettier-plugin-svelte --plugin=prettier-plugin-tailwindcss",
+		"pub": "npm publish --access public",
+		"doc": "node src/scripts/documentProps.js && node src/scripts/documentExamples.js && node src/scripts/copyReadMe.js"
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"files": [
+		"dist"
+	],
+	"dependencies": {
+		"svelte": "^4.2.0"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-vercel": "^3.0.3",
+		"@sveltejs/kit": "^1.22.6",
+		"@sveltejs/package": "^2.2.1",
+		"@tailwindcss/typography": "^0.5.9",
+		"@types/node": "^20.5.1",
+		"@typescript-eslint/eslint-plugin": "^6.4.0",
+		"@typescript-eslint/parser": "^6.4.0",
+		"autoprefixer": "^10.4.15",
+		"eslint": "^8.47.0",
+		"eslint-config-prettier": "^9.0.0",
+		"eslint-plugin-svelte": "^2.32.4",
+		"marked": "^7.0.4",
+		"postcss": "^8.4.28",
+		"prettier": "^3.0.2",
+		"prettier-plugin-svelte": "^3.0.3",
+		"prettier-plugin-tailwindcss": "^0.5.3",
+		"publint": "^0.2.1",
+		"svelte-check": "^3.5.0",
+		"tailwindcss": "^3.3.3",
+		"tslib": "^2.6.2",
+		"typescript": "^5.1.6",
+		"vite": "^4.4.9"
+	},
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module"
+}

package/dist/components/Accordion.svelte

@@ -1,189 +0,0 @@
-<!--
-@component
-
-### Accordion
-
-Displays a list of `details` elements with helpful defaults and transitions. 
-
-@props
-
-- `autoClose` - if `true`, other items close when a new one is opened
-- `classContent` - class of all the `div`s that wrap the `content` slot
-- `classDetails` - class of the `div` around each `details` element
-- `classIcon` - class of the `div` that wraps the icon if displayed
-- `classSummary` - class of all the `summary` elements
-- `class` 
-- `data` - data to display in the accordion
-- `icon` 
-- `id` 
-- `transition` - rotates the icon, slides the content, set to `false` to remove
-
-@slots
-
-| name      | purpose                       | default value  | slot props      |
-| --------- | ----------------------------- | -------------- | --------------- |
-| `summary` | summary element               | `item.summary` | `item`, `index` |
-| `icon`    | icon element                  | `icon` prop    | `item`, `index` |
-| `content` | content of the accordion item | `item.content` | `item`, `index` |
-
-@example
-
-```svelte
-<script lang="ts">
-	import { Accordion, type AccordionItem, FullscreenButton } from "drab";
-	import Chevron from "../../site/svg/Chevron.svelte";
-
-	const data: AccordionItem[] = [
-		{ summary: "Is it accessible?", content: "Yes." },
-		{
-			summary: "Is it styled?",
-			content: "Nope, style with global styles.",
-		},
-		{
-			summary: "Is it animated?",
-			content: "Yes, with the transition prop.",
-		},
-		{
-			summary: "Is it customizable?",
-			content: "Yes, customize with slots.",
-			class: "uppercase",
-			component: FullscreenButton,
-		},
-		{ summary: "Does it work without JavaScript?", content: "Yes." },
-	];
-</script>
-
-<Accordion
-	{data}
-	icon={Chevron}
-	class="mb-12"
-	classDetails="border-b"
-	classSummary="flex gap-8 cursor-pointer items-center justify-between p-4 font-bold underline hover:decoration-dotted"
-	classContent="pb-4 px-4"
-/>
-
-<Accordion
-	{data}
-	icon={Chevron}
-	classDetails="border-b"
-	classSummary="flex gap-8 cursor-pointer items-center justify-between p-4 font-bold underline hover:decoration-dotted"
-	classContent="pb-4 px-4"
-	autoClose={false}
->
-	<svelte:fragment slot="summary" let:item let:index>
-		<span class={item.class ? item.class : ""}>
-			{index + 1}.
-			{item.summary}
-		</span>
-	</svelte:fragment>
-	<svelte:fragment slot="content" let:item>
-		<span>{item.content}</span>
-		{#if item.component === FullscreenButton}
-			<div><svelte:component this={FullscreenButton} class="btn mt-4" /></div>
-		{/if}
-	</svelte:fragment>
-</Accordion>
-```
--->
-
-<script context="module"></script>
-
-<script>import { onMount } from "svelte";
-import { slide } from "svelte/transition";
-import { prefersReducedMotion } from "../util/accessibility";
-import { duration } from "../util/transition";
-let className = "";
-export { className as class };
-export let id = "";
-export let data;
-export let icon = "";
-export let classDetails = "";
-export let classSummary = "";
-export let classContent = "";
-export let classIcon = "";
-export let transition = { duration };
-export let autoClose = true;
-let clientJs = false;
-const toggleOpen = (i) => {
-  data[i].open = !data[i].open;
-  if (autoClose) {
-    for (let j = 0; j < data.length; j++) {
-      if (j !== i)
-        data[j].open = false;
-    }
-  }
-};
-onMount(() => {
-  clientJs = true;
-  if (prefersReducedMotion())
-    transition = false;
-});
-</script>
-
-<div class={className} {id}>
-	{#each data as item, index}
-		<div class={classDetails}>
-			<details bind:open={item.open}>
-				<!-- svelte-ignore a11y-no-redundant-roles -->
-				<summary
-					role="button"
-					tabindex="0"
-					class={classSummary}
-					on:click|preventDefault={() => toggleOpen(index)}
-					on:keydown={(e) => {
-						if (e.key === "Enter") {
-							e.preventDefault();
-							toggleOpen(index);
-						}
-					}}
-				>
-					<slot name="summary" {item} {index}>{item.summary}</slot>
-					<slot name="icon" {item} {index}>
-						{#if icon}
-							<div
-								class={classIcon}
-								class:d-rotate-180={item.open}
-								class:d-transition={transition}
-								style="--duration: {transition ? transition.duration : 0}ms;"
-							>
-								{#if typeof icon !== "string"}
-									<svelte:component this={icon} />
-								{:else}
-									<span>{icon}</span>
-								{/if}
-							</div>
-						{/if}
-					</slot>
-				</summary>
-				{#if !clientJs || !transition}
-					<div class={classContent}>
-						<slot name="content" {item} {index}>{item.content}</slot>
-					</div>
-				{/if}
-			</details>
-			{#if clientJs && item.open && transition}
-				<!-- outside the details for the transition -->
-				<div class={classContent} transition:slide={transition}>
-					<slot name="content" {item} {index}>{item.content}</slot>
-				</div>
-			{/if}
-		</div>
-	{/each}
-</div>
-
-<style>
-	summary {
-		list-style: none;
-	}
-	summary::-webkit-details-marker {
-		display: none;
-	}
-	.d-rotate-180 {
-		transform: rotate(180deg);
-	}
-	.d-transition {
-		transition-property: transform;
-		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-		transition-duration: var(--duration);
-	}
-</style>

package/dist/components/Accordion.svelte.d.ts

@@ -1,135 +0,0 @@
-import { SvelteComponent } from "svelte";
-export type AccordionItem = {
-    /** text summary of the item */
-    summary?: string;
-    /** text content of the item */
-    content?: string;
-    /** controls whether the content is displayed */
-    open?: boolean;
-    /** any data to pass back to the parent */
-    [key: string | number]: any;
-};
-import { type ComponentType } from "svelte";
-import { type SlideParams } from "svelte/transition";
-declare const __propDef: {
-    props: {
-        class?: string | undefined;
-        id?: string | undefined;
-        /** data to display in the accordion */ data: AccordionItem[];
-        icon?: string | ComponentType | undefined;
-        /** class of the `div` around each `details` element */ classDetails?: string | undefined;
-        /** class of all the `summary` elements */ classSummary?: string | undefined;
-        /** class of all the `div`s that wrap the `content` slot */ classContent?: string | undefined;
-        /** class of the `div` that wraps the icon if displayed */ classIcon?: string | undefined;
-        /** rotates the icon, slides the content, set to `false` to remove */ transition?: false | SlideParams | undefined;
-        /** if `true`, other items close when a new one is opened */ autoClose?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        summary: {
-            item: AccordionItem;
-            index: any;
-        };
-        icon: {
-            item: AccordionItem;
-            index: any;
-        };
-        content: {
-            item: AccordionItem;
-            index: any;
-        };
-    };
-};
-export type AccordionProps = typeof __propDef.props;
-export type AccordionEvents = typeof __propDef.events;
-export type AccordionSlots = typeof __propDef.slots;
-/**
- * ### Accordion
- *
- * Displays a list of `details` elements with helpful defaults and transitions.
- *
- * @props
- *
- * - `autoClose` - if `true`, other items close when a new one is opened
- * - `classContent` - class of all the `div`s that wrap the `content` slot
- * - `classDetails` - class of the `div` around each `details` element
- * - `classIcon` - class of the `div` that wraps the icon if displayed
- * - `classSummary` - class of all the `summary` elements
- * - `class`
- * - `data` - data to display in the accordion
- * - `icon`
- * - `id`
- * - `transition` - rotates the icon, slides the content, set to `false` to remove
- *
- * @slots
- *
- * | name      | purpose                       | default value  | slot props      |
- * | --------- | ----------------------------- | -------------- | --------------- |
- * | `summary` | summary element               | `item.summary` | `item`, `index` |
- * | `icon`    | icon element                  | `icon` prop    | `item`, `index` |
- * | `content` | content of the accordion item | `item.content` | `item`, `index` |
- *
- * @example
- *
- * ```svelte
- * <script lang="ts">
- * import { Accordion, type AccordionItem, FullscreenButton } from "drab";
- * import Chevron from "../../site/svg/Chevron.svelte";
- *
- * const data: AccordionItem[] = [
- * 	{ summary: "Is it accessible?", content: "Yes." },
- * 	{
- * 		summary: "Is it styled?",
- * 		content: "Nope, style with global styles.",
- * 	},
- * 	{
- * 		summary: "Is it animated?",
- * 		content: "Yes, with the transition prop.",
- * 	},
- * 	{
- * 		summary: "Is it customizable?",
- * 		content: "Yes, customize with slots.",
- * 		class: "uppercase",
- * 		component: FullscreenButton,
- * 	},
- * 	{ summary: "Does it work without JavaScript?", content: "Yes." },
- * ];
- * </script>
- *
- * <Accordion
- * {data}
- * icon={Chevron}
- * class="mb-12"
- * classDetails="border-b"
- * classSummary="flex gap-8 cursor-pointer items-center justify-between p-4 font-bold underline hover:decoration-dotted"
- * classContent="pb-4 px-4"
- * />
- *
- * <Accordion
- * {data}
- * icon={Chevron}
- * classDetails="border-b"
- * classSummary="flex gap-8 cursor-pointer items-center justify-between p-4 font-bold underline hover:decoration-dotted"
- * classContent="pb-4 px-4"
- * autoClose={false}
- * >
- * <svelte:fragment slot="summary" let:item let:index>
- * 	<span class={item.class ? item.class : ""}>
- * 		{index + 1}.
- * 		{item.summary}
- * 	</span>
- * </svelte:fragment>
- * <svelte:fragment slot="content" let:item>
- * 	<span>{item.content}</span>
- * 	{#if item.component === FullscreenButton}
- * 		<div><svelte:component this={FullscreenButton} class="btn mt-4" /></div>
- * 	{/if}
- * </svelte:fragment>
- * </Accordion>
- * ```
- */
-export default class Accordion extends SvelteComponent<AccordionProps, AccordionEvents, AccordionSlots> {
-}
-export {};

package/dist/util/messages.d.ts

@@ -1 +0,0 @@
-export declare const messageNoScript = "JavaScript is disabled on your device. This feature requires JavaScript for full functionality.";

package/dist/util/messages.js

@@ -1 +0,0 @@
-export const messageNoScript = "JavaScript is disabled on your device. This feature requires JavaScript for full functionality.";