@torpor/ui 0.4.0 → 1.0.0

package/dist/Accordion/index.d.ts

@@ -5,17 +5,17 @@ interface AccordionProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** Whether a single AccordionItem or multiple AccordionItems can be expanded at the same time */
-	type?: "single" | "multiple",
+	type?: "single" | "multiple";
 	/** The value of the expanded AccordionItem, or an array of values if the type is "multiple" */
-	value?: any | any[],
+	value?: Bindable<any | any[]>;
 	/** If set to true, the user cannot interact with any items in the Accordion */
-	disabled?: boolean,
+	disabled?: boolean;
 	/** Raised when the expanded item(s) have changed */
-	onchange?: (value: any | any[]) => void,
+	onchange?: (value: any | any[]) => void;
 }
 
 /**
@@ -51,11 +51,11 @@ interface AccordionContentProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** Whether this content should act as a region. Set this when the content contains heading elements or a nested Accordion */
-	ariaRegion?: boolean,
+	ariaRegion?: boolean;
 }
 
 /**
@@ -75,18 +75,16 @@ interface AccordionHeaderProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
-	/** The type of HTML header to use */
-	as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6",
+	style?: StyleValue;
 }
 
 /**
  * The header for an AccordionItem, which contains the AccordionTrigger.
  *
  * The structure of an AccordionHeader is:
- * 
+ *
  * ```
  * <AccordionHeader>
  * 	<AccordionTrigger />
@@ -107,24 +105,24 @@ interface AccordionItemProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** The index of this item in the Accordion. Set this if you will be inserting, removing or sorting items. If you don't set this, it will be set automatically */
-	index?: number,
+	index?: number;
 	/** A value for the item. Set this if you need more control over which item(s) are expanded. If you don't set this, the value will be set to the item's initial index */
-	value?: string,
+	value?: any;
 	/** If set to true, the user cannot interact with this AccordionItem */
-	disabled?: boolean,
+	disabled?: boolean;
 	/** Raised when this item is opened or closed */
-	ontoggle?: (open: boolean) => void,
+	onchange?: (open: boolean) => void;
 }
 
 /**
  * An item in an Accordion, which must consist of an AccordionTrigger and an AccordionContent.
- * 
+ *
  * The structure of an AccordionItem is:
- * 
+ *
  * ```
  * <AccordionItem>
  * 	<AccordionHeader>
@@ -148,9 +146,9 @@ interface AccordionTriggerProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 }
 
 /**
@@ -164,4 +162,4 @@ declare function AccordionTrigger(
 	$slots?: Record<string, SlotRender>,
 ): void;
 
-export { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger };
+export { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger };

package/dist/Accordion/index.js

@@ -1,22 +1,6 @@
-// src/Accordion/Accordion.torp
-import Accordion_default from "./Accordion.torp";
-
-// src/Accordion/AccordionContent.torp
-import AccordionContent_default from "./AccordionContent.torp";
-
-// src/Accordion/AccordionHeader.torp
-import AccordionHeader_default from "./AccordionHeader.torp";
-
-// src/Accordion/AccordionItem.torp
-import AccordionItem_default from "./AccordionItem.torp";
-
-// src/Accordion/AccordionTrigger.torp
-import AccordionTrigger_default from "./AccordionTrigger.torp";
-export {
-  Accordion_default as Accordion,
-  AccordionContent_default as AccordionContent,
-  AccordionHeader_default as AccordionHeader,
-  AccordionItem_default as AccordionItem,
-  AccordionTrigger_default as AccordionTrigger
-};
-//# sourceMappingURL=index.js.map
+import Accordion from "./Accordion.torp";
+import AccordionContent from "./AccordionContent.torp";
+import AccordionHeader from "./AccordionHeader.torp";
+import AccordionItem from "./AccordionItem.torp";
+import AccordionTrigger from "./AccordionTrigger.torp";
+export { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger };

package/dist/Breadcrumb/Breadcrumb.torp

@@ -4,11 +4,11 @@ interface BreadcrumbProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
-	/** An ARIA label for describing the popover to screen readers  */
-	ariaLabel?: string | undefined,
+	style?: StyleValue;
+	/** An ARIA label for describing the breadcrumb to screen readers  */
+	ariaLabel?: string | undefined;
 }
 
 /**
@@ -21,11 +21,13 @@ interface BreadcrumbProps {
  *
  * ```
  * <Breadcrumb>
- * 	<BreadcrumbItem />
- * 	<BreadcrumbSeparator /> (optional)
- * 	<BreadcrumbItem>
- * 		...
- * 	</BreadcrumbItem>
+ * 	<BreadcrumbList>
+ * 		<BreadcrumbItem />
+ * 		<BreadcrumbSeparator /> (optional)
+ * 		<BreadcrumbItem>
+ * 			...
+ * 		</BreadcrumbItem>
+ * 	</BreadcrumbList>
  * </Breadcrumb>
  * ```
  *
@@ -37,7 +39,7 @@ export default function Breadcrumb($props: BreadcrumbProps | undefined) {
 			{$props?.id}
 			class={["torp-breadcrumb", $props?.class]}
 			{$props?.style}
-			aria-label={$props?.ariaLabel}
+			aria-label={$props?.ariaLabel ?? "Breadcrumbs"}
 		>
 			<slot />
 		</nav>

package/dist/Breadcrumb/BreadcrumbItem.torp

@@ -4,11 +4,11 @@ interface BreadcrumbItemProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** Whether this is the current page */
-	current?: boolean,
+	current?: boolean;
 }
 
 /**
@@ -17,14 +17,14 @@ interface BreadcrumbItemProps {
  */
 export default function BreadcrumbItem($props: BreadcrumbItemProps | undefined) {
 	@render {
-		<div
+		<li
 			{$props?.id}
-			class={["torp-breadcrumb", $props?.class]}
+			class={["torp-breadcrumb-item", $props?.class]}
 			{$props?.style}
 			aria-current={$props?.current ? "page" : undefined}
 			data-current={$props?.current ? "current" : undefined}
 		>
 			<slot />
-		</div>
+		</li>
 	}
 }

package/dist/Breadcrumb/BreadcrumbList.torp

@@ -0,0 +1,21 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
+
+interface BreadcrumbListProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+}
+
+/**
+ * The list that contains the breadcrumbs.
+ */
+export default function BreadcrumbList($props: BreadcrumbListProps | undefined) {
+	@render {
+		<ol {$props?.id} class={["torp-breadcrumb-list", $props?.class]} {$props?.style}>
+			<slot />
+		</ol>
+	}
+}

package/dist/Breadcrumb/BreadcrumbSeparator.torp

@@ -4,9 +4,9 @@ interface BreadcrumbSeparatorProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 }
 
 /**
@@ -15,13 +15,13 @@ interface BreadcrumbSeparatorProps {
  */
 export default function BreadcrumbSeparator($props: BreadcrumbSeparatorProps | undefined) {
 	@render {
-		<div
+		<li
 			{$props?.id}
 			class={["torp-breadcrumb-separator", $props?.class]}
 			{$props?.style}
 			aria-hidden="true"
 		>
 			<slot />
-		</div>
+		</li>
 	}
 }

package/dist/Breadcrumb/index.d.ts

@@ -5,11 +5,11 @@ interface BreadcrumbProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
-	/** An ARIA label for describing the popover to screen readers  */
-	ariaLabel?: string | undefined,
+	style?: StyleValue;
+	/** An ARIA label for describing the breadcrumb to screen readers  */
+	ariaLabel?: string | undefined;
 }
 
 /**
@@ -22,11 +22,13 @@ interface BreadcrumbProps {
  *
  * ```
  * <Breadcrumb>
- * 	<BreadcrumbItem />
- * 	<BreadcrumbSeparator /> (optional)
- * 	<BreadcrumbItem>
- * 		...
- * 	</BreadcrumbItem>
+ * 	<BreadcrumbList>
+ * 		<BreadcrumbItem />
+ * 		<BreadcrumbSeparator /> (optional)
+ * 		<BreadcrumbItem>
+ * 			...
+ * 		</BreadcrumbItem>
+ * 	</BreadcrumbList>
  * </Breadcrumb>
  * ```
  *
@@ -46,11 +48,11 @@ interface BreadcrumbItemProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** Whether this is the current page */
-	current?: boolean,
+	current?: boolean;
 }
 
 /**
@@ -67,13 +69,35 @@ declare function BreadcrumbItem(
 
 
 
+interface BreadcrumbListProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+}
+
+/**
+ * The list that contains the breadcrumbs.
+ */
+declare function BreadcrumbList(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: BreadcrumbListProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
 interface BreadcrumbSeparatorProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 }
 
 /**
@@ -88,4 +112,4 @@ declare function BreadcrumbSeparator(
 	$slots?: Record<string, SlotRender>,
 ): void;
 
-export { Breadcrumb, BreadcrumbItem, BreadcrumbSeparator };
+export { Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbSeparator };

package/dist/Breadcrumb/index.js

@@ -1,14 +1,5 @@
-// src/Breadcrumb/Breadcrumb.torp
-import Breadcrumb_default from "./Breadcrumb.torp";
-
-// src/Breadcrumb/BreadcrumbItem.torp
-import BreadcrumbItem_default from "./BreadcrumbItem.torp";
-
-// src/Breadcrumb/BreadcrumbSeparator.torp
-import BreadcrumbSeparator_default from "./BreadcrumbSeparator.torp";
-export {
-  Breadcrumb_default as Breadcrumb,
-  BreadcrumbItem_default as BreadcrumbItem,
-  BreadcrumbSeparator_default as BreadcrumbSeparator
-};
-//# sourceMappingURL=index.js.map
+import Breadcrumb from "./Breadcrumb.torp";
+import BreadcrumbItem from "./BreadcrumbItem.torp";
+import BreadcrumbList from "./BreadcrumbList.torp";
+import BreadcrumbSeparator from "./BreadcrumbSeparator.torp";
+export { Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbSeparator };