feat(preview): accordion web components

.storybook/types/index.js

@@ -15,5 +15,4 @@ import argTypes from "./args.js";
 import globalTypes from "./global.js";
 
 export * from "./states.js";
-export * from "./variants.js";
 export { argTypes, globalTypes };

.storybook/types/states.js

@@ -89,16 +89,6 @@ export const isLoading = {
 	control: "boolean",
 };
 
-export const isIndeterminate = {
-	name: "Indeterminate",
-	type: { name: "boolean" },
-	table: {
-		type: { summary: "boolean" },
-		category: "State",
-	},
-	control: "boolean",
-};
-
 export const isDisabled = {
 	name: "Disabled",
 	type: { name: "boolean" },
@@ -134,7 +124,7 @@ export const isReadOnly = {
 	type: { name: "boolean" },
 	table: {
 		type: { summary: "boolean" },
-		category: "State",
+		category: "Advanced",
 	},
 	control: "boolean",
 };
@@ -148,13 +138,3 @@ export const isChecked = {
 	},
 	control: { type: "boolean" },
 };
-
-export const isPending = {
-	name: "Pending",
-	type: { name: "boolean" },
-	table: {
-		type: { summary: "boolean" },
-		category: "State",
-	},
-	control: "boolean",
-};

components/accordion/stories/Accordion.js

@@ -0,0 +1,26 @@
+import { LitElement, css, unsafeCSS } from "lit";
+import styles from "../index.css?inline";
+import { Template } from "./template";
+
+export class Accordion extends LitElement {
+	static get styles() {
+		return css`${unsafeCSS(styles)}`;
+	}
+
+	static get properties() {
+		return {
+			args: { type: Object },
+		};
+	}
+
+	constructor() {
+		super();
+		this.args = {};
+	}
+
+	render() {
+		return Template(this.args);
+	}
+}
+
+customElements.define("spectrum-accordion", Accordion);

components/accordion/stories/AccordionItem.js

@@ -0,0 +1,26 @@
+import { LitElement, css, unsafeCSS } from "lit";
+import styles from "../index.css?inline";
+import { ItemTemplate } from "./template.js";
+
+export class AccordionItem extends LitElement {
+	static get styles() {
+		return css`${unsafeCSS(styles)}`;
+	}
+
+	static get properties() {
+		return {
+			args: { type: Object },
+		};
+	}
+
+	constructor() {
+		super();
+		this.args = {};
+	}
+
+	render() {
+		return ItemTemplate(this.args);
+	}
+}
+
+customElements.define("spectrum-accordion-item", AccordionItem);