.

demo/src/features/index.ts

@@ -2,4 +2,5 @@ export * from './button';
 export * from './input';
 export * from './list';
 export * from './sheet';
+export * from './tree';
 export * from './typography';

demo/src/features/sheet.ts

@@ -14,14 +14,28 @@ export class DemoSheet extends $LitElement(css`
 		return html`
 			<schmancy-grid gap="md">
 				<schmancy-button
+					variant="elevated"
 					@click=${() => {
 						sheet.open({
 							component: new DemoList(),
-							position: SchmancySheetPosition.BottomCenter,
+							position: SchmancySheetPosition.Bottom,
 						})
 					}}
-					>left Side sheet</schmancy-button
 				>
+					Bottom Sheet
+				</schmancy-button>
+
+				<schmancy-button
+					variant="elevated"
+					@click=${() => {
+						sheet.open({
+							component: new DemoList(),
+							position: SchmancySheetPosition.Side,
+						})
+					}}
+				>
+					Side Sheet
+				</schmancy-button>
 			</schmancy-grid>
 		`
 	}

demo/src/features/tree.ts

@@ -0,0 +1,31 @@
+import { $LitElement } from '@mhmo91/lit-mixins/src'
+import { customElement } from 'lit/decorators.js'
+import { css, html } from 'lit'
+
+@customElement('demo-tree')
+export class DemoTree extends $LitElement(css`
+	:host {
+		display: block;
+	}
+`) {
+	render() {
+		return html`
+			<schmancy-grid gap="md">
+				<schmancy-tree active>
+					<div slot="root">root</div>
+					<schmancy-list>
+						<schmancy-list-item>Item 1.1</schmancy-list-item>
+						<schmancy-list-item>Item 1.2</schmancy-list-item>
+						<schmancy-list-item>Item 1.3</schmancy-list-item>
+					</schmancy-list>
+				</schmancy-tree>
+			</schmancy-grid>
+		`
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'demo-tree': DemoTree
+	}
+}

demo/src/index.ts

@@ -41,9 +41,12 @@ export default class SchmancyDemo extends $LitElement() {
 						<schmancy-tab label="Lists">
 							<demo-list class="py-4"></demo-list>
 						</schmancy-tab>
-						<schmancy-tab active label="Sheet">
+						<schmancy-tab label="Sheet">
 							<demo-sheet class="py-4"></demo-sheet>
 						</schmancy-tab>
+						<schmancy-tab active label="Root">
+							<demo-tree class="py-4"></demo-tree>
+						</schmancy-tab>
 					</schmancy-tab-group>
 				</schmancy-flex>
 			</schmancy-container>

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mhmo91/schmancy",
-	"version": "0.0.32",
+	"version": "0.0.33",
 	"description": "UI library build with web components",
 	"main": "./dist/index.js",
 	"repository": {

src/list/list-item.ts

@@ -44,7 +44,7 @@ export class SchmancyListItem extends TailwindElement() {
 		}
 
 		const stateLayerClasses = {
-			'hover:bg-surface-on opacity-[0.08] cursor-pointer absolute inset-0': !this.readonly,
+			'hover:bg-surface-on opacity-[0.08] cursor-pointer absolute inset-0 rounded-full': !this.readonly,
 		}
 		return html`<li class=${this.classMap(classes)}>
 			${when(!this.readonly, () => html` <div class="${this.classMap(stateLayerClasses)}"></div> `)}

src/sheet/sheet.scss

@@ -42,12 +42,12 @@
 	visibility: hidden;
 	pointer-events: none;
 	.content {
-		&[data-position='top-right'] {
+		&[data-position='side'] {
 			transform: translateX(100%);
 		}
-		&[data-position='bottom-center'],
-		&[data-position='bottom-left'],
-		&[data-position='bottom-right'] {
+		&[data-position='bottom'],
+		&[data-position='bottom'],
+		&[data-position='bottom'] {
 			transform: translateY(100%);
 		}
 		transition-duration: calc(var(--transition-duration) * 0.5);

src/sheet/sheet.service.ts

@@ -98,6 +98,8 @@ class BottomSheetService {
 						sheet.setAttribute('allowOverlyDismiss', target.allowOverlyDismiss === false ? 'false' : 'true')
 						document.body.appendChild(sheet)
 					} else {
+						// if sheet is found, set the new position
+						sheet.setAttribute('position', target.position ?? SchmancySheetPosition.Side)
 						// to make sure that the sheet is not removed later
 						target.persist = target.persist ?? false
 					}

src/sheet/sheet.ts

@@ -142,19 +142,14 @@ export default class SchmancySheet extends TailwindElement(style) {
 	render() {
 		const classes = {
 			'transition-all duration-[600]': true,
-			'items-center justify-end': this.position === SchmancySheetPosition.BottomCenter,
-			'bottom-0 mx-auto': this.position === SchmancySheetPosition.BottomCenter,
-			'items-end justify-start': this.position === SchmancySheetPosition.TopRight,
-			'items-end justify-end bottom-0 right-0': this.position === SchmancySheetPosition.BottomRight,
-			'top-0 right-0 rounded-[16px 0 0 16px]': [
-				SchmancySheetPosition.BottomRight,
-				SchmancySheetPosition.TopRight,
-				SchmancySheetPosition.BottomRight,
-			].includes(this.position),
+			'bottom-0 items-center justify-end': this.position === SchmancySheetPosition.Bottom,
+			'top-0 right-0 rounded-[16px 0 0 16px] bottom-0 mx-auto items-end justify-start h-full w-full':
+				this.position === SchmancySheetPosition.Side,
 		}
 		const contentClasses = {
-			'bg-surface-low text-surface-onVariant border-outline shadow-1 h-[100%]': this.mode === 'modal',
-			'bg-surface text-surface-onPrimary w-[256px]': this.mode === 'standard',
+			'h-full': this.position === SchmancySheetPosition.Side,
+			'bg-surface-low text-surface-onVariant border-outline shadow-1': this.mode === 'modal',
+			'bg-surface text-surface-onPrimary min-w-[256px]': this.mode === 'standard',
 		}
 		const overlayClasses = {
 			'bg-scrim transition-all duration-[600] opacity-[0.4] absolute inset-0': this.mode === 'modal',
@@ -168,7 +163,7 @@ export default class SchmancySheet extends TailwindElement(style) {
 					}}
 				></div>
 				<div class="content ${this.classMap(contentClasses)}" data-position=${this.position}>
-					<schmancy-sheet-content .closeButton=${true}>
+					<schmancy-sheet-content>
 						<slot></slot>
 					</schmancy-sheet-content>
 				</div>

src/tree/README.md

@@ -0,0 +1,59 @@
+It looks like you're interested in creating a README for a custom web component named `schmancy-tree`. A README file typically includes information about the component's purpose, usage, installation, and possibly some examples. Here's a template you can use and customize according to your specific component's features and requirements:
+
+---
+
+# Schmancy Tree Component
+
+## Overview
+
+The `schmancy-tree` component is a customizable tree view designed for web applications. It allows for hierarchical data to be displayed in a structured, collapsible tree format.
+
+## Features
+
+- **Customizable Layout**: Easily style the tree view to match your application's theme.
+- **Expand/Collapse**: Users can expand or collapse branches to view the information that's relevant to them.
+- **Nested Items**: Supports multiple levels of nesting for complex hierarchical data.
+
+## Installation
+
+To use `schmancy-tree` in your project, follow these steps:
+
+1. Install the component via npm:
+   ```
+   npm install schmancy-tree
+   ```
+2. Import the component in your JavaScript file:
+   ```javascript
+   import 'schmancy-tree/schmancy-tree.js'
+   ```
+
+## Usage
+
+Here is a basic example of how to use the `schmancy-tree` component in your HTML:
+
+```html
+<schmancy-tree>
+	<div slot="root">root</div>
+	<schmancy-list>
+		<schmancy-list-item>Item 1.1</schmancy-list-item>
+		<schmancy-list-item>Item 1.2</schmancy-list-item>
+		<schmancy-list-item>Item 1.3</schmancy-list-item>
+	</schmancy-list>
+</schmancy-tree>
+```
+
+## Customization
+
+You can customize the appearance and behavior of `schmancy-tree` using CSS and JavaScript. For detailed documentation on available properties and events, see [Customization Guide](#).
+
+## Contributing
+
+We welcome contributions to the `schmancy-tree` project. Please read our [Contributing Guidelines](#) for more information on how to get involved.
+
+## License
+
+`schmancy-tree` is licensed under the [MIT License](#).
+
+---
+
+Feel free to adjust the content to match the actual capabilities and usage of your component. This template is just a starting point.

src/tree/tree.ts

@@ -4,11 +4,24 @@ import { css, html } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
 import { fromEvent, merge, takeUntil, tap } from 'rxjs'
 
+/**
+ * @element schmancy-tree
+ * @slot root - The root element of the tree
+ * @slot - The children of the tree
+ */
 @customElement('schmancy-tree')
 export default class SchmancyTree extends TailwindElement(css`
 	:host {
 		display: block;
 		position: relative;
+		background-color: var(--schmancy-sys-color-surface-default);
+	}
+	::slotted([slot='root']) {
+		width: 100%;
+		text-align: left;
+	}
+	::slotted([slot='root'] + *) {
+		margin-top: 0.5rem;
 	}
 `) {
 	@property({ type: Boolean }) open: boolean = false
@@ -51,26 +64,28 @@ export default class SchmancyTree extends TailwindElement(css`
 		})
 	}
 	render() {
-		const classes = {
-			'bg-gray-800 text-white': this.active,
-			'text-gray-400 hover:text-white hover:bg-gray-800': !this.active,
-			'w-full group flex justify-between items-center  rounded-md p-2 text-sm leading-6 font-semibold': true,
-		}
 		return html`
-			<li class="w-full" id="toggler">
-				<button class="${this.classMap(classes)} ">
+			<schmancy-list>
+				<schmancy-list-item .active=${this.active} id="toggler">
 					<slot name="root"></slot>
 					<span
+						class="pointer-events-none"
+						slot="trailing"
 						@click=${e => {
 							e.stopPropagation()
 						}}
 						id="chevron"
-						class="rotate-180 flex items-center transition-all duration-100 w-[34px] h-[34px] hover:bg-gray-100 hover:bg-opacity-10 hover:scale-110   hover:rounded-full p-2 text-xl font-bold"
 						>⌅
 					</span>
-				</button>
-			</li>
-			<slot></slot>
+				</schmancy-list-item>
+				<slot></slot>
+			</schmancy-list>
 		`
 	}
 }
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'schmancy-tree': SchmancyTree
+	}
+}

types/src/tree/tree.d.ts

@@ -1,4 +1,9 @@
 declare const SchmancyTree_base: import("..").Constructor<CustomElementConstructor> & import("..").Constructor<import("@schmancy/mixin/tailwind/tailwind.mixin").ITailwindElementMixin> & import("..").Constructor<import("lit").LitElement> & import("..").Constructor<import("..").IBaseMixin>;
+/**
+ * @element schmancy-tree
+ * @slot root - The root element of the tree
+ * @slot - The children of the tree
+ */
 export default class SchmancyTree extends SchmancyTree_base {
     open: boolean;
     active: boolean;
@@ -8,4 +13,9 @@ export default class SchmancyTree extends SchmancyTree_base {
     firstUpdated(): void;
     render(): import("lit-html").TemplateResult<1>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'schmancy-tree': SchmancyTree;
+    }
+}
 export {};