@alegendstale/holly-components 1.4.0 → 2.0.2

package/dist/components/tool-tip/tool-tip.styles.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=tool-tip.styles.d.ts.map

package/dist/components/tool-tip/tool-tip.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool-tip.styles.d.ts","sourceRoot":"","sources":["../../../src/components/tool-tip/tool-tip.styles.ts"],"names":[],"mappings":";AAEA,wBAwDE"}

package/dist/components/tool-tip/tool-tip.styles.js

@@ -0,0 +1,58 @@
+import { css } from 'lit';
+export default css `
+	:host {
+		display: block;
+		position: relative;
+		--tooltip-x: 0;
+		--tooltip-y: 0;
+	}
+
+	/* Manual or Click appear when display is true */
+	:host(:not([trigger='hover'])[display]) p {
+		display: flex;
+	}
+
+	/* Hover appears when display is true and user is hovering */
+	:host([trigger='hover'][display]:hover) p {
+		display: flex;
+	}
+
+	/* Display nothing when there is no text */
+	:host([text='']) #tip {
+		display: none;
+	}
+
+	p {
+		display: none;
+		align-items: center;
+		justify-content: center;
+
+		position: absolute;
+		background: #000000c0;
+		width: max-content;
+		min-width: 100px;
+		height: 40px;
+		text-align: center;
+		vertical-align: middle;
+		font-size: 18px;
+		font-weight: var(--font-medium);
+		color: #fafafa;
+		padding: 0;
+		margin: 0;
+		transform: translateX(-50%);
+
+		left: var(--tooltip-x);
+		top: var(--tooltip-y);
+
+		/* Obsidian Styling */
+		box-sizing: border-box;
+		animation: pop-down 200ms forwards ease-in-out;
+		box-shadow: 0 2px 8px var(--background-modifier-box-shadow);
+		border-radius: var(--radius-s);
+		line-height: var(--line-height-tight);
+		z-index: var(--layer-tooltip);
+		pointer-events: none;
+		word-break: normal;
+		overflow-wrap: anywhere;
+	}
+`;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"private": false,
-	"version": "1.4.0",
+	"version": "2.0.2",
 	"name": "@alegendstale/holly-components",
 	"description": "Reusable UI components created using lit",
 	"type": "module",
@@ -66,35 +66,39 @@
 	"license": "GPL-3.0",
 	"scripts": {
 		"generate-exports": "tsx scripts/generate-exports.ts",
-		"build": "npm run generate-exports && vite build && tsc",
+		"build": "npm run generate-exports && vite build && tsc && npm run cem",
 		"dev": "vite",
 		"preview": "vite preview",
 		"storybook": "storybook dev -p 6006",
 		"build-storybook": "storybook build",
-		"wdio": "wdio run ./wdio.conf.ts --watch"
+		"cem": "cem analyze --litelement"
 	},
 	"dependencies": {
 		"colorsea": "^1.2.2",
 		"lit": "^3.3.1",
-		"lucide": "^0.555.0",
+		"lucide": "^0.556.0",
 		"quantize": "^1.0.2"
 	},
 	"devDependencies": {
-		"@chromatic-com/storybook": "^1.7.0",
-		"@storybook/addon-essentials": "^8.2.9",
-		"@storybook/addon-links": "^8.2.9",
-		"@storybook/blocks": "^8.2.9",
-		"@storybook/test": "^8.2.9",
-		"@storybook/web-components": "^8.2.9",
-		"@storybook/web-components-vite": "^8.2.9",
+		"@chromatic-com/storybook": "^4.1.3",
+		"@custom-elements-manifest/analyzer": "^0.11.0",
+		"@storybook/addon-a11y": "^10.1.6",
+		"@storybook/addon-docs": "^10.1.6",
+		"@storybook/addon-links": "^10.1.6",
+		"@storybook/addon-vitest": "^10.1.6",
+		"@storybook/web-components-vite": "^10.1.6",
+		"@types/node": "^24.10.2",
 		"@types/quantize": "^1.0.2",
-		"@wdio/browser-runner": "^9.5.7",
-		"@wdio/cli": "^9.5.7",
-		"@wdio/mocha-framework": "^9.5.0",
-		"@wdio/spec-reporter": "^9.5.0",
-		"storybook": "^8.2.9",
+		"@wc-toolkit/cem-validator": "^1.0.3",
+		"@wc-toolkit/storybook-helpers": "^10.0.0",
+		"storybook": "^10.1.6",
 		"tsx": "^4.21.0",
 		"typescript": "latest",
-		"vite": "^7.2.6"
-	}
-}
+		"vite": "^7.2.7",
+		"vitest": "^4.0.15",
+		"playwright": "^1.57.0",
+		"@vitest/browser-playwright": "^4.0.15",
+		"@vitest/coverage-v8": "^4.0.15"
+	},
+	"customElements": "custom-elements.json"
+}

package/dist/components/bottom-sheet/bottom-sheet.test.d.ts

@@ -1,2 +0,0 @@
-import './bottom-sheet';
-//# sourceMappingURL=bottom-sheet.test.d.ts.map

package/dist/components/bottom-sheet/bottom-sheet.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"bottom-sheet.test.d.ts","sourceRoot":"","sources":["../../../src/components/bottom-sheet/bottom-sheet.test.ts"],"names":[],"mappings":"AAEA,OAAO,gBAAgB,CAAA"}

package/dist/components/bottom-sheet/bottom-sheet.test.js

@@ -1,15 +0,0 @@
-import { $, expect } from '@wdio/globals';
-import './bottom-sheet';
-import { html, render } from 'lit';
-describe('Lit component testing', () => {
-    it('should open the sheet', async () => {
-        render(html `
-				<bottom-sheet></bottom-sheet>,
-			`, document.body);
-        const sheet = await $('bottom-sheet');
-        it('should open sheet', async () => {
-            // sheet.showSheet(true);
-            await expect($(sheet)).toHaveAttr('open');
-        });
-    });
-});

package/dist/components/tool-tip/Tooltip2.d.ts

@@ -1,17 +0,0 @@
-import { LitElement } from 'lit';
-export declare class SimpleTooltip extends LitElement {
-    static lazy(target: Element, callback: (target: SimpleTooltip) => void): void;
-    static styles: import("lit").CSSResult;
-    offset: number;
-    showing: boolean;
-    _target: Element | null;
-    get target(): Element | null;
-    set target(target: Element | null);
-    constructor();
-    connectedCallback(): void;
-    render(): import("lit-html").TemplateResult<1>;
-    show(): void;
-    hide(): void;
-    finishHide(): void;
-}
-//# sourceMappingURL=Tooltip2.d.ts.map

package/dist/components/tool-tip/Tooltip2.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tooltip2.d.ts","sourceRoot":"","sources":["../../../src/components/tool-tip/Tooltip2.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAO5C,qBACa,aAAc,SAAQ,UAAU;IAC5C,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI;IAWtE,MAAM,CAAC,MAAM,0BAqBX;IAGF,MAAM,SAAK;IAGX,OAAO,UAAS;IAGhB,OAAO,EAAE,OAAO,GAAG,IAAI,CAAQ;IAE/B,IAAI,MAAM,IAIS,OAAO,GAAG,IAAI,CAFhC;IAED,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,EAYhC;;IAOD,iBAAiB,IAAI,IAAI;IAQzB,MAAM;IAIN,IAAI;IAUJ,IAAI;IAIJ,UAAU;CAKV"}

package/dist/components/tool-tip/Tooltip2.js

@@ -1,104 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { html, css, LitElement } from 'lit';
-import { property } from 'lit/decorators.js';
-import { condCustomElement } from '../../decorators/condCustomElement.js';
-const enterEvents = ['pointerenter', 'focus'];
-const leaveEvents = ['pointerleave', 'blur', 'keydown', 'click'];
-let SimpleTooltip = class SimpleTooltip extends LitElement {
-    static lazy(target, callback) {
-        const createTooltip = () => {
-            const tooltip = document.createElement('simple-tooltip');
-            callback(tooltip);
-            target.parentNode.insertBefore(tooltip, target.nextSibling);
-            tooltip.show();
-            enterEvents.forEach((eventName) => target.removeEventListener(eventName, createTooltip));
-        };
-        enterEvents.forEach((eventName) => target.addEventListener(eventName, createTooltip));
-    }
-    get target() {
-        return this._target;
-    }
-    set target(target) {
-        if (this.target) {
-            // Remove events from current target
-            enterEvents.forEach(name => this.target.removeEventListener(name, this.show));
-            leaveEvents.forEach(name => this.target.removeEventListener(name, this.hide));
-        }
-        if (target) {
-            // Add events to new target
-            enterEvents.forEach(name => target.addEventListener(name, this.show));
-            leaveEvents.forEach(name => target.addEventListener(name, this.hide));
-        }
-        this._target = target;
-    }
-    constructor() {
-        super();
-        this.offset = 4;
-        this.showing = false;
-        // Tooltip target
-        this._target = null;
-        this.addEventListener('transitionend', this.finishHide);
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.hide();
-        // Set target to previous element as backup
-        this.target ??= this.previousElementSibling;
-    }
-    render() {
-        return html `<slot></slot>`;
-    }
-    show() {
-        this.style.cssText = '';
-        // Position tooltip near target
-        const { x, y, height } = this.target.getBoundingClientRect();
-        this.style.left = `${x}px`;
-        this.style.top = `${y + height + this.offset}px`;
-        this.showing = true;
-    }
-    hide() {
-        this.showing = false;
-    }
-    finishHide() {
-        if (!this.showing) {
-            this.style.display = 'none';
-        }
-    }
-};
-SimpleTooltip.styles = css `
-		:host {
-			display: inline-block;
-			position: fixed;
-			padding: 4px;
-			border: 1px solid darkgray;
-			border-radius: 4px;
-			background: #ccc;
-			pointer-events: none;
-
-			//Animation
-			opacity: 0;
-			transform: scale(0.75);
-			transition: opacity, transform;
-			transition-duration: .33s;
-		}
-
-		:host([showing]) {
-			opacity: 1;
-			transform: scale(1);
-		}
-	`;
-__decorate([
-    property({ type: Number })
-], SimpleTooltip.prototype, "offset", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], SimpleTooltip.prototype, "showing", void 0);
-SimpleTooltip = __decorate([
-    condCustomElement('simple-tooltip')
-], SimpleTooltip);
-export { SimpleTooltip };