.

.github/workflows/publish-npm-packages.yml

@@ -30,6 +30,6 @@ jobs:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
 
       - name: Publish to npm
-        run: bun i && bun run build && npm publish --access public
+        run: npm i && npm run build && npm publish --access public
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

demo/src/features/typewriter.ts

@@ -6,24 +6,13 @@ import { customElement } from 'lit/decorators.js'
 export class SchmancyTypewriterDemo extends $LitElement() {
 	render() {
 		return html`
-			<schmancy-typography type="display">
-				<schmancy-typewriter
-					.actions=${[
-						'Event-driven Typewriter.',
-						{
-							action: 'pause',
-							value: 1000,
-						},
-						{ action: 'delete', value: 1 },
-
-						{
-							action: 'pause',
-							value: 1000,
-						},
-						' Listening to Events!',
-					]}
-				></schmancy-typewriter>
-			</schmancy-typography>
+			<schmancy-typewriter .speed=${10} .cursor=${true} .cursorChar=${'|'} .autoStart=${true}>
+				Hello, world!
+				<span action="pause" value="1000"></span>
+				Welcome to <strong>Schmancy</strong>.
+				<span action="delete" value="9"></span>
+				Lit Components!
+			</schmancy-typewriter>
 		`
 	}
 }

demo/src/nav.ts

@@ -116,7 +116,7 @@ export class DemoNav extends $LitElement(css`
 		return html`
 			<schmancy-grid ${fullHeight()} gap="md" justify="center">
 				<schmancy-typography type="headline" token="lg">
-					<schmancy-typewriter .actions=${['Schmancy']}> </schmancy-typewriter>
+					<schmancy-typewriter> Schmancy </schmancy-typewriter>
 				</schmancy-typography>
 
 				<schmancy-list>

package.json

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

readme.md

@@ -62,6 +62,7 @@ Below is a table linking to each component’s documentation on the GitHub Wiki:
 | Component                 | Description                     | Documentation                                                                                     |
 | ------------------------- | ------------------------------- | ------------------------------------------------------------------------------------------------- |
 | `schmancy-area`           | Area component                  | [Wiki - schmancy-area](https://github.com/mhmo91/schmancy/wiki/schmancy-area)                     |
+| `schmancy-typewriter`     | Typewriter component            | [Wiki - schmancy-area](https://github.com/mhmo91/schmancy/wiki/schmancy-typewriter)               |
 | `schmancy-autocomplete`   | Autocomplete field              | [Wiki - schmancy-autocomplete](https://github.com/mhmo91/schmancy/wiki/schmancy-autocomplete)     |
 | `schmancy-busy`           | Loading/busy indicator          | [Wiki - schmancy-busy](https://github.com/mhmo91/schmancy/wiki/schmancy-busy)                     |
 | `schmancy-button`         | Customizable button             | [Wiki - schmancy-button](https://github.com/mhmo91/schmancy/wiki/schmancy-button)                 |

src/area/area.component.ts

@@ -160,7 +160,7 @@ export class SchmancyArea extends $LitElement(css`
 
 					// Native Web Animations API - fade in
 					// "ease: cubic-bezier(0.25, 0.8, 0.25, 1)" was used in the old code
-					component.animate([{ opacity: '0' }, { opacity: '1' }], {
+					component.animate([{ opacity: 0 }, { opacity: 1 }], {
 						duration: oldViewExists ? 250 : 150,
 						easing: 'cubic-bezier(0.25, 0.8, 0.25, 1)',
 					})

src/content-drawer/sheet.ts

@@ -96,8 +96,8 @@ export class SchmancyContentDrawerSheet extends $LitElement(css`
 		// --- 2) Use native Web Animations API ---
 		this.sheet.animate(
 			[
-				{ opacity: '0', transform: 'translateX(100%)' },
-				{ opacity: '1', transform: 'translateX(0%)' },
+				{ opacity: 0, transform: 'translateX(100%)' },
+				{ opacity: 1, transform: 'translateX(0%)' },
 			],
 			{
 				duration: 500,
@@ -133,8 +133,8 @@ export class SchmancyContentDrawerSheet extends $LitElement(css`
 		return new Observable<void>(observer => {
 			const animation = this.sheet.animate(
 				[
-					{ opacity: '1', transform: 'translateX(0%)' },
-					{ opacity: '1', transform: 'translateX(100%)' },
+					{ opacity: 1, transform: 'translateX(0%)' },
+					{ opacity: 1, transform: 'translateX(100%)' },
 				],
 				{
 					duration: 500,

src/nav-drawer/drawer.ts

@@ -31,12 +31,12 @@ export class SchmancyNavigationDrawer extends $LitElement(css`
 
 	/**
 	 * The minimum width of the sidebar
-	 * @attr	min-width
+	 * @attr	breakpoint
 	 * @type {number}
 	 * @memberof SchmancyNavigationDrawer
 	 */
-	@property({ type: Number })
-	minWidth: number = 1240
+	@property({ type: Number, attribute: 'breakpoint' })
+	breakpoint: number = 768
 
 	/**
 	 * The mode of the sidebar
@@ -59,7 +59,7 @@ export class SchmancyNavigationDrawer extends $LitElement(css`
 				map(event => event.target as Window),
 				startWith(window),
 				map(window => window.innerWidth),
-				map(width => width >= this.minWidth),
+				map(width => width >= this.breakpoint),
 				distinctUntilChanged(),
 				takeUntil(this.disconnecting),
 				debounceTime(100),
@@ -96,8 +96,8 @@ export class SchmancyNavigationDrawer extends $LitElement(css`
 		return html`
 			<schmancy-grid
 				cols=${this.fullscreen ? '1fr' : 'auto 1fr'}
-				rows="1fr"
-				flow="col"
+				rows="auto 1fr"
+				flow="row"
 				justify="stretch"
 				align="stretch"
 				${fullHeight()}

src/nav-drawer/navbar.ts

@@ -50,8 +50,8 @@ export class SchmancyNavigationDrawerSidebar extends $LitElement() {
 		this.overlay.style.display = 'block'
 
 		// Animate opacity from 0 to 0.4
-		this.overlay.animate([{ opacity: '0' }, { opacity: '0.4' }], {
-			duration: 300,
+		this.overlay.animate([{ opacity: 0 }, { opacity: 0.4 }], {
+			duration: 200,
 			easing: 'cubic-bezier(0.5, 0.01, 0.25, 1)',
 			fill: 'forwards', // <-- This keeps the final keyframe (0.4) after finishing
 		})
@@ -61,8 +61,8 @@ export class SchmancyNavigationDrawerSidebar extends $LitElement() {
 
 	closeOverlay() {
 		// Animate opacity from 0.4 to 0
-		const animation = this.overlay.animate([{ opacity: '0.4' }, { opacity: '0' }], {
-			duration: 250,
+		const animation = this.overlay.animate([{ opacity: 0.4 }, { opacity: 0 }], {
+			duration: 150,
 			easing: 'cubic-bezier(0.5, 0.01, 0.25, 1)',
 		})
 
@@ -74,7 +74,7 @@ export class SchmancyNavigationDrawerSidebar extends $LitElement() {
 
 	protected render() {
 		const animate = {
-			'transition-all transform-gpu duration-[300ms] ease-[cubicBezier(0.5, 0.01, 0.25, 1)]': true,
+			'transition-all transform-gpu duration-[200ms] ease-[cubicBezier(0.5, 0.01, 0.25, 1)]': true,
 		}
 
 		const sidebarClasses = {

src/slider/slider.ts

@@ -1,5 +1,4 @@
 import { $LitElement } from '@mixins/index'
-import { SchmancyTheme } from '@schmancy/theme'
 import { css, html } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 import { fromEvent } from 'rxjs'

src/tree/tree.ts

@@ -74,24 +74,15 @@ export class SchmancyTree extends TailwindElement(css`
 						// We are about to open, so remove `hidden` to measure scrollHeight
 						this.defaultSlot.hidden = false
 					}
-					const slotHeight = this.defaultSlot.scrollHeight
-					const fromHeight = this.open ? `${slotHeight}px` : '0px'
-					const toHeight = this.open ? '0px' : `${slotHeight}px`
 
 					const fromOpacity = this.open ? 1 : 0
 					const toOpacity = this.open ? 0 : 1
 
-					const slotAnimation = this.defaultSlot.animate(
-						[
-							{ height: fromHeight, opacity: fromOpacity },
-							{ height: toHeight, opacity: toOpacity },
-						],
-						{
-							duration: 200,
-							easing: 'ease-out',
-							fill: 'forwards',
-						},
-					)
+					const slotAnimation = this.defaultSlot.animate([{ opacity: fromOpacity }, { opacity: toOpacity }], {
+						duration: 150,
+						easing: 'ease-out',
+						fill: 'forwards',
+					})
 
 					// Hide the slot if we just closed it
 					slotAnimation.onfinish = () => {