drab 2.8.4 → 2.8.6

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/components/Tabs.svelte

@@ -1,126 +0,0 @@
-<!--
-@component
-
-### Tabs
-
-Displays tabs and the selected tab's content.
-
-@props
-
-- `classNoscript` - `noscript` class
-- `classTabActive` - class of the active tab's `button`
-- `classTabInactive` - class of all the inactive tabs' `button`s
-- `classTabList` - class of the `div` that wraps the `button`s
-- `classTabPanel` - class of `div` that wraps the slotted content
-- `classTab` - class of all title `button`s
-- `class` 
-- `data` - provides the content for each tab
-- `id` 
-- `selectedIndex` - index of selected tab, defaults to `0`
-
-@slots
-
-| name       | purpose              | default value   | slot props             |
-| ---------- | -------------------- | --------------- | ---------------------- |
-| `tab`      | title of each tab    | `item.tab`      | `item`, `index`, `tab` |
-| `tabPanel` | selected tab's panel | `item.tabPanel` | `item`, `index`        |
-
-@example
-
-```svelte
-<script lang="ts">
-	import { Tabs, type TabsItem, FullscreenButton } from "drab";
-
-	const data: TabsItem[] = [
-		{ tab: "Tab", tabPanel: "Content" },
-		{
-			tab: "Another Tab",
-			tabPanel: "Some more content",
-			component: FullscreenButton,
-		},
-	];
-</script>
-
-<Tabs
-	{data}
-	class="mb-4"
-	classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded-md bg-neutral-200 p-1"
-	classTab="btn btn-s p-2"
-	classTabActive="bg-white text-neutral-950 shadow"
-	classTabInactive="bg-neutral-200 text-neutral-600"
-	classTabPanel="py-2"
-/>
-
-<Tabs
-	{data}
-	classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded-md bg-neutral-200 p-1"
-	classTab="btn btn-s p-2"
-	classTabActive="bg-white text-neutral-950 shadow"
-	classTabInactive="bg-neutral-200 text-neutral-600"
-	classTabPanel="py-2"
->
-	<svelte:fragment slot="tab" let:item let:index>
-		{index + 1}.
-		{item.tab}
-	</svelte:fragment>
-	<svelte:fragment slot="tabPanel" let:item>
-		<div>{item.tabPanel}</div>
-		{#if item.component}
-			<svelte:component this={item.component} class="btn mt-2" />
-		{/if}
-	</svelte:fragment>
-</Tabs>
-```
--->
-
-<script context="module"></script>
-
-<script>import { onMount } from "svelte";
-import { messageNoScript } from "../util/messages";
-let className = "";
-export { className as class };
-export let id = "";
-export let classTabList = "";
-export let classTab = "";
-export let classTabActive = "";
-export let classTabInactive = "";
-export let classNoscript = "";
-export let classTabPanel = "";
-export let data;
-export let selectedIndex = 0;
-let clientJs = false;
-const idPanel = "tabPanel-" + Math.random().toString().substring(2, 8);
-onMount(() => clientJs = true);
-</script>
-
-<div class={className} {id}>
-	<div class={classTabList} role="tablist">
-		{#each data as item, index}
-			<button
-				role="tab"
-				tabindex={index === selectedIndex ? 0 : -1}
-				aria-selected={index === selectedIndex}
-				aria-controls={idPanel}
-				disabled={!clientJs}
-				class="{classTab} {selectedIndex === index
-					? classTabActive
-					: ''} {selectedIndex !== index ? classTabInactive : ''}"
-				on:click={() => (selectedIndex = index)}
-			>
-				<slot name="tab" {item} {index} tab={item.tab}>{item.tab}</slot>
-			</button>
-		{/each}
-	</div>
-	{#each data as item, index}
-		{#if index === selectedIndex}
-			<div class={classTabPanel} role="tabpanel" id={idPanel}>
-				<slot name="tabPanel" {item} {index}>
-					{item.tabPanel}
-				</slot>
-			</div>
-		{/if}
-	{/each}
-	<noscript>
-		<div class={classNoscript}>{messageNoScript}</div>
-	</noscript>
-</div>

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

@@ -1,115 +0,0 @@
-import { SvelteComponent } from "svelte";
-export interface TabsItem {
-    /** tab title, displayed in `button` element */
-    tab?: string;
-    /** slotted content, displayed once tab is clicked */
-    tabPanel?: string;
-    /** any data to pass back to the parent */
-    [key: string | number]: any;
-}
-declare const __propDef: {
-    props: {
-        class?: string | undefined;
-        id?: string | undefined;
-        /** class of the `div` that wraps the `button`s */ classTabList?: string | undefined;
-        /** class of all title `button`s */ classTab?: string | undefined;
-        /** class of the active tab's `button` */ classTabActive?: string | undefined;
-        /** class of all the inactive tabs' `button`s */ classTabInactive?: string | undefined;
-        /** `noscript` class */ classNoscript?: string | undefined;
-        /** class of `div` that wraps the slotted content */ classTabPanel?: string | undefined;
-        /** provides the content for each tab */ data: TabsItem[];
-        /** index of selected tab, defaults to `0` */ selectedIndex?: number | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        tab: {
-            item: TabsItem;
-            index: any;
-            tab: string | undefined;
-        };
-        tabPanel: {
-            item: TabsItem;
-            index: any;
-        };
-    };
-};
-export type TabsProps = typeof __propDef.props;
-export type TabsEvents = typeof __propDef.events;
-export type TabsSlots = typeof __propDef.slots;
-/**
- * ### Tabs
- *
- * Displays tabs and the selected tab's content.
- *
- * @props
- *
- * - `classNoscript` - `noscript` class
- * - `classTabActive` - class of the active tab's `button`
- * - `classTabInactive` - class of all the inactive tabs' `button`s
- * - `classTabList` - class of the `div` that wraps the `button`s
- * - `classTabPanel` - class of `div` that wraps the slotted content
- * - `classTab` - class of all title `button`s
- * - `class`
- * - `data` - provides the content for each tab
- * - `id`
- * - `selectedIndex` - index of selected tab, defaults to `0`
- *
- * @slots
- *
- * | name       | purpose              | default value   | slot props             |
- * | ---------- | -------------------- | --------------- | ---------------------- |
- * | `tab`      | title of each tab    | `item.tab`      | `item`, `index`, `tab` |
- * | `tabPanel` | selected tab's panel | `item.tabPanel` | `item`, `index`        |
- *
- * @example
- *
- * ```svelte
- * <script lang="ts">
- * import { Tabs, type TabsItem, FullscreenButton } from "drab";
- *
- * const data: TabsItem[] = [
- * 	{ tab: "Tab", tabPanel: "Content" },
- * 	{
- * 		tab: "Another Tab",
- * 		tabPanel: "Some more content",
- * 		component: FullscreenButton,
- * 	},
- * ];
- * </script>
- *
- * <Tabs
- * {data}
- * class="mb-4"
- * classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded-md bg-neutral-200 p-1"
- * classTab="btn btn-s p-2"
- * classTabActive="bg-white text-neutral-950 shadow"
- * classTabInactive="bg-neutral-200 text-neutral-600"
- * classTabPanel="py-2"
- * />
- *
- * <Tabs
- * {data}
- * classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded-md bg-neutral-200 p-1"
- * classTab="btn btn-s p-2"
- * classTabActive="bg-white text-neutral-950 shadow"
- * classTabInactive="bg-neutral-200 text-neutral-600"
- * classTabPanel="py-2"
- * >
- * <svelte:fragment slot="tab" let:item let:index>
- * 	{index + 1}.
- * 	{item.tab}
- * </svelte:fragment>
- * <svelte:fragment slot="tabPanel" let:item>
- * 	<div>{item.tabPanel}</div>
- * 	{#if item.component}
- * 		<svelte:component this={item.component} class="btn mt-2" />
- * 	{/if}
- * </svelte:fragment>
- * </Tabs>
- * ```
- */
-export default class Tabs extends SvelteComponent<TabsProps, TabsEvents, TabsSlots> {
-}
-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.";