@grantcodes/ui 2.0.2 → 2.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grantcodes/ui",
-  "version": "2.0.2",
+  "version": "2.1.1",
   "description": "A personal component system built with Lit web components",
   "type": "module",
   "main": "src/main.js",
@@ -20,9 +20,9 @@
       "import": "./src/css/base.css",
       "require": "./src/css/base.css"
     },
-    "./styles/themes/grantcodes.css": {
-      "import": "./src/css/themes/grantcodes.css",
-      "require": "./src/css/themes/grantcodes.css"
+    "./styles/themes/*": {
+      "import": "./src/css/themes/*",
+      "require": "./src/css/themes/*"
     },
     "./components/*": {
       "import": "./src/components/*",
@@ -30,25 +30,12 @@
     },
     "./fonts/*": "./src/fonts/*"
   },
-  "scripts": {
-    "dev": "storybook dev -p 6006",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "build": "npm run build-storybook",
-    "generate": "plop",
-    "cem": "cem analyze --config custom-elements-manifest.config.js --litelement",
-    "fix": "run-s fix:lint",
-    "fix:lint": "npx @biomejs/biome format --write src",
-    "test": "run-s lint test:unit",
-    "lint": "npx @biomejs/biome lint src",
-    "test:unit": "NODE_ENV=test node --test --test-concurrency=1 src/**/*.test.js"
-  },
   "license": "MIT",
   "dependencies": {
-    "@grantcodes/style-dictionary": "^1.2.0",
     "lit": "^3.3.1",
     "sanitize.css": "^13.0.0",
-    "shiki": "^3.17.1"
+    "shiki": "^3.17.1",
+    "@grantcodes/style-dictionary": "^1.3.0"
   },
   "devDependencies": {
     "@biomejs/biome": "2.3.8",
@@ -77,5 +64,19 @@
     "README.md",
     "LICENCE"
   ],
-  "customElements": "custom-elements.json"
-}
+  "customElements": "custom-elements.json",
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "watch": "vite build --watch",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "build": "npm run build-storybook",
+    "generate": "plop",
+    "cem": "cem analyze --config custom-elements-manifest.config.js --litelement",
+    "fix": "run-s fix:lint",
+    "fix:lint": "npx @biomejs/biome format --write src",
+    "test": "run-s lint test:unit",
+    "lint": "npx @biomejs/biome lint src",
+    "test:unit": "NODE_ENV=test node --test --test-concurrency=1 src/**/*.test.js"
+  }
+}

package/src/components/accordion/accordion.component.js

@@ -0,0 +1,33 @@
+import { LitElement } from "lit";
+import { html } from "lit/static-html.js";
+import { accordionStyles } from "./accordion.styles.js";
+
+export class GrantCodesAccordion extends LitElement {
+	static styles = [accordionStyles];
+
+	static properties = {
+		items: { type: Array },
+	};
+
+	constructor() {
+		super();
+		this.items = [];
+	}
+
+	render() {
+		return html`
+      <div class="accordion">
+        ${this.items.map(
+					(item, index) => html`
+            <details class="accordion__item">
+              <summary class="accordion__summary focus-ring">
+                ${item.title}
+              </summary>
+              <div class="accordion__content">${item.content}</div>
+            </details>
+          `,
+				)}
+      </div>
+    `;
+	}
+}

package/src/components/accordion/accordion.js

@@ -0,0 +1,6 @@
+import { GrantCodesAccordion } from "./accordion.component.js";
+
+export * from "./accordion.component.js";
+export default GrantCodesAccordion;
+
+customElements.define("grantcodes-accordion", GrantCodesAccordion);

package/src/components/accordion/accordion.stories.js

@@ -0,0 +1,88 @@
+import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
+import { html } from "lit/static-html.js";
+import "./accordion.js";
+const { events, args, argTypes, template } = getStorybookHelpers(
+	"grantcodes-accordion",
+);
+
+const meta = {
+	title: "Components/Accordion",
+	component: "grantcodes-accordion",
+	args,
+	argTypes,
+	parameters: {
+		actions: {
+			handles: events,
+		},
+	},
+};
+
+export default meta;
+
+/**
+ * Default accordion with multiple items.
+ */
+export const Accordion = {
+	args: {
+		items: [
+			{
+				title: "What is this?",
+				content:
+					"This is an accordion component that allows you to collapse and expand content sections.",
+			},
+			{
+				title: "How do I use it?",
+				content:
+					"Pass an array of items with title and content properties to the items property.",
+			},
+			{
+				title: "Can I customize it?",
+				content:
+					"Yes, you can style the accordion using CSS custom properties and theme variables.",
+			},
+		],
+	},
+};
+
+/**
+ * Single item accordion.
+ */
+export const SingleItem = {
+	args: {
+		items: [
+			{
+				title: "Click to expand",
+				content:
+					"This is the content that appears when you expand this accordion item.",
+			},
+		],
+	},
+};
+
+/**
+ * Accordion with multiple items expanded by default.
+ * Note: Native HTML details/summary doesn't support open by default,
+ * but you can control this with CSS or JavaScript if needed.
+ */
+export const MultipleItems = {
+	args: {
+		items: [
+			{
+				title: "First Section",
+				content: "Content for the first section.",
+			},
+			{
+				title: "Second Section",
+				content: "Content for the second section.",
+			},
+			{
+				title: "Third Section",
+				content: "Content for the third section.",
+			},
+			{
+				title: "Fourth Section",
+				content: "Content for the fourth section.",
+			},
+		],
+	},
+};

package/src/components/accordion/accordion.styles.js

@@ -0,0 +1,66 @@
+import { css } from "lit";
+import { focusRingStyles } from "../../lib/styles/focus-ring.styles.js";
+
+export const accordionStyles = css`
+  ${focusRingStyles}
+
+  :host {
+    display: block;
+  }
+
+  .accordion {
+    display: flex;
+    flex-direction: column;
+    gap: var(--g-theme-spacing-sm);
+  }
+
+  .accordion__item {
+    border: 1px solid var(--g-theme-color-border-default);
+    border-radius: var(--g-theme-border-radius-md, 0.5rem);
+    height: 3.5rem;
+    transition: height 0.25s;
+  }
+
+  .accordion__item[open] {
+    height: auto;
+    overflow: clip;
+  }
+
+  .accordion__summary {
+    padding: var(--g-theme-spacing-md);
+    cursor: pointer;
+    background: var(--g-theme-color-background-subtle);
+    border: var(--g-theme-border-width-md) solid
+      var(--g-theme-color-border-subtle);
+    border-radius: var(--g-theme-border-radius-md);
+    font-weight: var(--g-typography-font-weight-500);
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    transition-property: background-color, outline-width, outline-color;
+  }
+
+  .accordion__summary:hover {
+    background: var(--g-theme-color-background-subtle-hover);
+  }
+
+  .accordion__summary::-webkit-details-marker {
+    display: none;
+  }
+
+  .accordion__summary::after {
+    content: "+";
+    font: var(--g-theme-typography-title-default);
+    line-height: 1;
+  }
+
+  .accordion__item[open] .accordion__summary::after {
+    content: "-";
+  }
+
+  .accordion__content {
+    padding: var(--g-theme-spacing-md);
+    background: var(--g-theme-color-background-default);
+  }
+`;

package/src/components/accordion/index.js

@@ -0,0 +1,6 @@
+import { GrantCodesAccordion } from "./accordion.component.js";
+
+export * from "./accordion.component.js";
+export default GrantCodesAccordion;
+
+customElements.define("grantcodes-accordion", GrantCodesAccordion);

package/src/components/app-bar/app-bar.component.js

@@ -66,7 +66,7 @@ export class GrantCodesAppBar extends LitElement {
 					<!-- Mobile Menu Button -->
 					<button
 						type="button"
-						class="app-bar__menu-button"
+						class="app-bar__menu-button focus-ring"
 						aria-label="${this._mobileMenuOpen ? "Close menu" : "Open menu"}"
 						aria-expanded="${this._mobileMenuOpen}"
 						@click=${this._toggleMobileMenu}
@@ -86,5 +86,3 @@ export class GrantCodesAppBar extends LitElement {
 		`;
 	}
 }
-
-

package/src/components/app-bar/app-bar.js

@@ -4,5 +4,3 @@ export * from "./app-bar.component.js";
 export default GrantCodesAppBar;
 
 customElements.define("grantcodes-app-bar", GrantCodesAppBar);
-
-