@hyvnt/hyvui 0.2.0 → 0.3.0

package/dist/tokens/tokens.css

@@ -1,86 +1,100 @@
-:root {
-  /* ── backgrounds ─────────────────────────────── */
-  --bg: #08090b;
-  --bg-elev: #12151a;
-  --bg-elev-soft: #0d1014;
-
-  /* ── text ────────────────────────────────────── */
-  --text: #f0e8da;
-  --text-soft: #d8cdb9;
-  --muted: #a79d8b;
-  --muted-strong: #7e7568;
-
-  /* ── accent ──────────────────────────────────── */
-  --accent: #c79c57;
-  --accent-strong: #e2ba74;
-  --signal: #79a6a3;
-
-  /* ── lines ───────────────────────────────────── */
-  --line: rgba(186, 157, 108, 0.16);
-  --line-strong: rgba(198, 166, 112, 0.28);
-
-  /* ── status ──────────────────────────────────── */
-  --status-ok: #79a6a3;
-  --status-pend: #8b8476;
-  --status-warn: #c79c57;
-  --status-fail: #b66a48;
-
-  /* ── shadow ──────────────────────────────────── */
-  --shadow-veil: 0 40px 120px rgba(0, 0, 0, 0.45);
-  --shadow-card: 0 28px 72px rgba(0, 0, 0, 0.34);
-  --focus-ring: 0 0 0 1px rgba(226, 186, 116, 0.3), 0 0 0 4px rgba(199, 156, 87, 0.08);
-
-  /* ── motion ──────────────────────────────────── */
-  --transition-smooth: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
-  --transition-fast: 0.16s cubic-bezier(0.4, 0, 0.2, 1);
-
-  /* ── fonts ───────────────────────────────────── */
-  --font-body: 'ET Book', 'Iowan Old Style', 'Palatino Linotype', serif;
-  --font-mono: 'IBM Plex Mono', 'Menlo', 'Consolas', monospace;
-
-  /* ── spacing (fluid) ─────────────────────────── */
-  --space-2xs: 0.25rem;
-  --space-xs: 0.5rem;
-  --space-sm: 0.75rem;
-  --space-md: 1rem;
-  --space-lg: 1.5rem;
-  --space-xl: 2rem;
-  --space-2xl: 3rem;
-  --space-3xl: clamp(3rem, 6vw, 5rem);
-  --space-scene: clamp(2.25rem, 7vw, 6rem);
-  --space-card: clamp(1.1rem, 2vw, 1.6rem);
-  --space-inline: 1rem;
-  --shell-max: 72rem;
-  --shell-pad: clamp(1.1rem, 3vw, 2rem);
-  --section-gap: clamp(1.5rem, 3vw, 2.5rem);
-
-  /* ── radius ──────────────────────────────────── */
-  --radius-sm: 2px;
-  --radius-md: 4px;
-  --radius-lg: 6px;
-
-  /* ── controls ────────────────────────────────── */
-  --control-height-sm: 2.25rem;
-  --control-height-md: 2.75rem;
-  --control-pad-x: 0.9rem;
-  --control-pad-y: 0.7rem;
-  --control-gap: 0.5rem;
-
-  /* ── surface gradients ───────────────────────── */
-  --surface-card: linear-gradient(135deg, rgba(199, 156, 87, 0.08), transparent 44%),
-    rgba(10, 12, 14, 0.8);
-  --surface-panel: linear-gradient(180deg, rgba(121, 166, 163, 0.08), transparent 18%),
-    linear-gradient(135deg, rgba(199, 156, 87, 0.08), rgba(10, 12, 14, 0.82) 42%),
-    rgba(9, 11, 13, 0.74);
-  --surface-soft: linear-gradient(180deg, rgba(240, 232, 218, 0.015), transparent 38%),
-    linear-gradient(135deg, rgba(199, 156, 87, 0.05), transparent 48%),
-    rgba(11, 13, 16, 0.9);
-  --surface-stroke: inset 0 1px 0 rgba(240, 232, 218, 0.03);
-
-  /* ── z-index ─────────────────────────────────── */
-  --z-base: 0;
-  --z-raised: 10;
-  --z-overlay: 100;
-  --z-modal: 200;
-  --z-toast: 300;
-}
+:root {
+	/* ── backgrounds ─────────────────────────────── */
+	--bg: #08090b;
+	--bg-elev: #12151a;
+	--bg-elev-soft: #0d1014;
+
+	/* ── text ────────────────────────────────────── */
+	--text: #f0e8da;
+	--text-soft: #d8cdb9;
+	--muted: #a79d8b;
+	--muted-strong: #7e7568;
+
+	/* ── accent ──────────────────────────────────── */
+	--accent: #c79c57;
+	--accent-strong: #e2ba74;
+	--signal: #79a6a3;
+
+	/* ── lines ───────────────────────────────────── */
+	--line: rgba(186, 157, 108, 0.16);
+	--line-strong: rgba(198, 166, 112, 0.28);
+
+	/* ── status ──────────────────────────────────── */
+	--status-ok: #79a6a3;
+	--status-pend: #8b8476;
+	--status-warn: #c79c57;
+	--status-fail: #b66a48;
+
+	/* ── shadow ──────────────────────────────────── */
+	--shadow-veil: 0 40px 120px rgba(0, 0, 0, 0.45);
+	--shadow-card: 0 28px 72px rgba(0, 0, 0, 0.34);
+	--focus-ring: 0 0 0 1px rgba(226, 186, 116, 0.3), 0 0 0 4px rgba(199, 156, 87, 0.08);
+
+	/* ── motion ──────────────────────────────────── */
+	--transition-smooth: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
+	--transition-fast: 0.16s cubic-bezier(0.4, 0, 0.2, 1);
+
+	/* ── fonts ───────────────────────────────────── */
+	--font-body: 'ET Book', 'Iowan Old Style', 'Palatino Linotype', serif;
+	--font-mono: 'IBM Plex Mono', 'Menlo', 'Consolas', monospace;
+
+	/* ── spacing (fluid) ─────────────────────────── */
+	--space-2xs: 0.25rem;
+	--space-xs: 0.5rem;
+	--space-sm: 0.75rem;
+	--space-md: 1rem;
+	--space-lg: 1.5rem;
+	--space-xl: 2rem;
+	--space-2xl: 3rem;
+	--space-3xl: clamp(3rem, 6vw, 5rem);
+	--space-scene: clamp(2.25rem, 7vw, 6rem);
+	--space-card: clamp(1.1rem, 2vw, 1.6rem);
+	--space-inline: 1rem;
+	--shell-max: 72rem;
+	--shell-pad: clamp(1.1rem, 3vw, 2rem);
+	--section-gap: clamp(1.5rem, 3vw, 2.5rem);
+
+	/* ── radius ──────────────────────────────────── */
+	--radius-sm: 2px;
+	--radius-md: 4px;
+	--radius-lg: 6px;
+
+	/* ── controls ────────────────────────────────── */
+	--control-height-sm: 2.25rem;
+	--control-height-md: 2.75rem;
+	--control-pad-x: 0.9rem;
+	--control-pad-y: 0.7rem;
+	--control-gap: 0.5rem;
+
+	/* ── surface gradients ───────────────────────── */
+	--surface-card:
+		linear-gradient(135deg, rgba(199, 156, 87, 0.08), transparent 44%), rgba(10, 12, 14, 0.8);
+	--surface-panel:
+		linear-gradient(180deg, rgba(121, 166, 163, 0.08), transparent 18%),
+		linear-gradient(135deg, rgba(199, 156, 87, 0.08), rgba(10, 12, 14, 0.82) 42%),
+		rgba(9, 11, 13, 0.74);
+	--surface-soft:
+		linear-gradient(180deg, rgba(240, 232, 218, 0.015), transparent 38%),
+		linear-gradient(135deg, rgba(199, 156, 87, 0.05), transparent 48%), rgba(11, 13, 16, 0.9);
+	--surface-stroke: inset 0 1px 0 rgba(240, 232, 218, 0.03);
+
+	/* ── z-index ─────────────────────────────────── */
+	--z-base: 0;
+	--z-raised: 10;
+	--z-overlay: 100;
+	--z-modal: 200;
+	--z-toast: 300;
+
+	/* ── container query thresholds ───────────────── */
+	/* Used by components via @container rules. Keep these in rem so they scale
+     with user font sizing preferences. */
+	--cq-sm: 32rem; /* ~512px */
+	--cq-md: 48rem; /* ~768px */
+	--cq-lg: 64rem; /* ~1024px */
+
+	/* ── safe-area convenience ────────────────────── */
+	--safe-top: env(safe-area-inset-top);
+	--safe-right: env(safe-area-inset-right);
+	--safe-bottom: env(safe-area-inset-bottom);
+	--safe-left: env(safe-area-inset-left);
+}

package/dist/tokens/tokens.js

@@ -12,14 +12,14 @@ export const tokens = {
         statusOk: '#79a6a3',
         statusPend: '#8b8476',
         statusWarn: '#c79c57',
-        statusFail: '#b66a48',
+        statusFail: '#b66a48'
     },
     font: {
         body: "'ET Book', 'Iowan Old Style', 'Palatino Linotype', serif",
-        mono: "'IBM Plex Mono', 'Menlo', 'Consolas', monospace",
+        mono: "'IBM Plex Mono', 'Menlo', 'Consolas', monospace"
     },
     transition: {
         smooth: '0.35s cubic-bezier(0.22, 1, 0.36, 1)',
-        fast: '0.16s cubic-bezier(0.4, 0, 0.2, 1)',
-    },
+        fast: '0.16s cubic-bezier(0.4, 0, 0.2, 1)'
+    }
 };

package/dist/utils/motion.js

@@ -3,7 +3,7 @@ export const staggerIn = {
     from: { opacity: 0, transform: 'translateY(6px)' },
     to: { opacity: 1, transform: 'translateY(0)' },
     duration: 500,
-    easing: 'cubic-bezier(0.22, 1, 0.36, 1)',
+    easing: 'cubic-bezier(0.22, 1, 0.36, 1)'
 };
 /** Standard hover-lift transform. */
 export const hoverLift = 'translateY(-2px)';

package/package.json

@@ -1,60 +1,67 @@
-{
-	"name": "@hyvnt/hyvui",
-	"version": "0.2.0",
-	"publishConfig": {
-		"access": "public"
-	},
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build && npm run prepack",
-		"preview": "vite preview",
-		"prepare": "svelte-kit sync || echo ''",
-		"prepack": "svelte-kit sync && svelte-package && publint",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"format": "prettier --write .",
-		"lint": "prettier --check ."
-	},
-	"files": [
-		"dist",
-		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*"
-	],
-	"sideEffects": [
-		"**/*.css"
-	],
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"type": "module",
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js"
-		}
-	},
-	"peerDependencies": {
-		"svelte": "^5.0.0"
-	},
-	"devDependencies": {
-		"@sveltejs/adapter-auto": "^6.0.0",
-		"@sveltejs/kit": "^2.22.0",
-		"@sveltejs/package": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^6.0.0",
-		"@tailwindcss/forms": "^0.5.9",
-		"@tailwindcss/typography": "^0.5.15",
-		"@tailwindcss/vite": "^4.0.0",
-		"prettier": "^3.4.2",
-		"prettier-plugin-svelte": "^3.3.3",
-		"prettier-plugin-tailwindcss": "^0.6.11",
-		"publint": "^0.3.2",
-		"svelte": "^5.0.0",
-		"svelte-check": "^4.0.0",
-		"tailwindcss": "^4.0.0",
-		"typescript": "^5.0.0",
-		"vite": "^7.0.4",
-		"vite-plugin-devtools-json": "^1.0.0"
-	},
-	"keywords": [
-		"svelte"
-	]
-}
+{
+	"name": "@hyvnt/hyvui",
+	"version": "0.3.0",
+	"publishConfig": {
+		"access": "public"
+	},
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run prepack",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"prepack": "svelte-kit sync && svelte-package && publint",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"format": "prettier --write .",
+		"lint": "prettier --check .",
+		"test:e2e": "npm run build && playwright test"
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		},
+		"./styles.css": "./dist/styles.css",
+		"./styles": "./dist/styles.css"
+	},
+	"peerDependencies": {
+		"svelte": "^5.0.0"
+	},
+	"dependencies": {
+		"@floating-ui/dom": "^1.6.13"
+	},
+	"devDependencies": {
+		"@playwright/test": "^1.50.0",
+		"@sveltejs/adapter-auto": "^6.0.0",
+		"@sveltejs/kit": "^2.22.0",
+		"@sveltejs/package": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^6.0.0",
+		"@tailwindcss/forms": "^0.5.9",
+		"@tailwindcss/typography": "^0.5.15",
+		"@tailwindcss/vite": "^4.0.0",
+		"prettier": "^3.4.2",
+		"prettier-plugin-svelte": "^3.3.3",
+		"prettier-plugin-tailwindcss": "^0.7.2",
+		"publint": "^0.3.2",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
+		"tailwindcss": "^4.0.0",
+		"typescript": "^5.0.0",
+		"vite": "^7.0.4",
+		"vite-plugin-devtools-json": "^1.0.0"
+	},
+	"keywords": [
+		"svelte"
+	]
+}