.

demo/src/features/typewriter.ts

@@ -6,18 +6,21 @@ import { customElement } from 'lit/decorators.js'
 export class SchmancyTypewriterDemo extends $LitElement() {
 	render() {
 		return html`
-			<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="2"></span>
-				Lit Components!
-			</schmancy-typewriter>
-			<schmancy-typewriter .speed=${30} cursorChar="|">
-				We empower organizations to operate
-				<p>Efficiently, Seamlessly, and Affordably</p>
-				<p>Through digital transformation.</p>
-			</schmancy-typewriter>
+			<schmancy-grid class="w-full">
+				<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="2"></span>
+					Lit Components!
+				</schmancy-typewriter>
+				<schmancy-divider grow="both"></schmancy-divider>
+				<schmancy-typewriter .speed=${30} cursorChar="|">
+					We empower organizations to operate
+					<p>Efficiently, Seamlessly, and Affordably</p>
+					<p>Through digital transformation.</p>
+				</schmancy-typewriter>
+			</schmancy-grid>
 		`
 	}
 }

package.json

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

src/divider/divider.ts

@@ -2,31 +2,105 @@
 import { $LitElement } from '@mixins/index'
 import { css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
+import { classMap } from 'lit/directives/class-map.js'
 
 @customElement('schmancy-divider')
 export default class SchmancyDivider extends $LitElement(css`
 	:host {
 		display: block;
+		overflow: hidden; /* Ensure the animation is clipped */
 	}
-	:host([orientation='horizontal']) {
+	.divider {
+		/* Maintain existing border-based color logic */
+		border-color: var(--divider-color, currentColor);
+	}
+	/* Horizontal Divider */
+	.horizontal {
 		width: 100%;
 		height: 1px;
+		border-top: 1px solid;
+		transform: scaleX(0);
+		transform-origin: var(--transform-origin, left);
+		animation: drawHorizontal var(--animation-duration, 1s) forwards;
 	}
-	:host([orientation='vertical']) {
-		height: 100%;
+	/* Vertical Divider */
+	.vertical {
 		width: 1px;
+		height: 100%;
+		border-left: 1px solid;
+		transform: scaleY(0);
+		transform-origin: var(--transform-origin, top);
+		animation: drawVertical var(--animation-duration, 1s) forwards;
+	}
+	/* Outline Variants */
+	.border-outlineVariant {
+		/* Utilize existing outline variant styles */
+		border-color: var(--outline-variant-color, #555);
+	}
+	.border-outline {
+		/* Utilize existing default outline styles */
+		border-color: var(--outline-color, #000);
+	}
+	/* RTL Support for Horizontal Dividers */
+	:host([dir='rtl']) .horizontal.grow-start {
+		--transform-origin: right;
+	}
+	:host([dir='rtl']) .horizontal.grow-end {
+		--transform-origin: left;
+	}
+	/* Center Growth for Horizontal and Vertical Dividers */
+	.horizontal.grow-both {
+		--transform-origin: center;
+	}
+	.vertical.grow-both {
+		--transform-origin: center;
+	}
+	/* Define Keyframes */
+	@keyframes drawHorizontal {
+		to {
+			transform: scaleX(1);
+		}
+	}
+	@keyframes drawVertical {
+		to {
+			transform: scaleY(1);
+		}
+	}
+	/* Assign Animations Based on Grow Direction */
+	.horizontal.grow-start {
+		animation: drawHorizontal var(--animation-duration, 1s) forwards;
+	}
+	.horizontal.grow-end {
+		animation: drawHorizontal var(--animation-duration, 1s) forwards;
+	}
+	.horizontal.grow-both {
+		animation: drawHorizontal var(--animation-duration, 1s) forwards;
+	}
+
+	.vertical.grow-start {
+		animation: drawVertical var(--animation-duration, 1s) forwards;
+	}
+	.vertical.grow-end {
+		animation: drawVertical var(--animation-duration, 1s) forwards;
+	}
+	.vertical.grow-both {
+		animation: drawVertical var(--animation-duration, 1s) forwards;
 	}
 `) {
-	@property() outline: 'default' | 'variant' = 'variant'
-	@property({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'horizontal'
-	protected render(): unknown {
+	@property({ type: String }) outline: 'default' | 'variant' = 'variant'
+	@property({ reflect: true, type: String }) orientation: 'horizontal' | 'vertical' = 'horizontal'
+	@property({ type: String }) grow: 'start' | 'end' | 'both' = 'start'
+
+	protected render() {
 		const classes = {
-			'border-t': this.orientation === 'horizontal',
-			'border-l h-full': this.orientation === 'vertical',
+			divider: true,
+			horizontal: this.orientation === 'horizontal',
+			vertical: this.orientation === 'vertical',
 			'border-outlineVariant': this.outline === 'variant',
 			'border-outline': this.outline === 'default',
+			[`grow-${this.grow}`]: true, // e.g., grow-start, grow-end, grow-both
 		}
-		return html`<div class="${this.classMap(classes)}"></div>`
+		return html`<div class="${classMap(classes)}"></div>`
 	}
 }