@marianmeres/stuic 3.0.0 → 3.0.1

package/dist/components/Nav/index.css

@@ -0,0 +1,318 @@
+/* =============================================================================
+   NAV COMPONENT TOKENS
+   Override globally: :root { --stuic-nav-radius: 0; }
+   Override locally:  <Nav style="--stuic-nav-radius: 9999px;">
+   ============================================================================= */
+
+:root {
+	/* Structure tokens */
+	--stuic-nav-radius: var(--radius-md);
+	--stuic-nav-transition: 150ms;
+	--stuic-nav-gap: 0.5rem;
+
+	/* Children indent */
+	--stuic-nav-children-indent: 1rem;
+	--stuic-nav-children-gap: 0.25rem;
+
+	/* Section title (static header above group) */
+	--stuic-nav-section-title-padding-x: 0.5rem;
+	--stuic-nav-section-title-padding-y: 0.25rem;
+	--stuic-nav-section-title-font-size: var(--text-xs);
+	--stuic-nav-section-title-font-weight: 600;
+	--stuic-nav-section-title-opacity: 0.5;
+	--stuic-nav-section-title-letter-spacing: 0.05em;
+
+	/* Title/header (collapsible group header) */
+	--stuic-nav-group-title-padding-x: 0.5rem;
+	--stuic-nav-group-title-padding-y: 0.5rem;
+	--stuic-nav-group-title-font-size: var(--text-sm);
+	--stuic-nav-group-title-font-weight: 700;
+	--stuic-nav-group-title-opacity: 0.75;
+	--stuic-nav-group-title-height: 2.125rem; /* 34px */
+
+	/* Item sizing */
+	--stuic-nav-item-padding-x: 0.5rem;
+	--stuic-nav-item-padding-y: 0.5rem;
+	--stuic-nav-item-height: 2.125rem; /* 34px */
+	--stuic-nav-item-font-size: var(--text-sm);
+
+	/* Touch-friendly modifier */
+	--stuic-nav-item-height-touch: 2.75rem; /* 44px */
+	--stuic-nav-item-padding-y-touch: 0.75rem;
+	--stuic-nav-group-title-height-touch: 2.75rem;
+
+	/* Collapsed mode */
+	--stuic-nav-item-size-collapsed: 2.125rem;
+	--stuic-nav-item-size-collapsed-touch: 2.75rem; /* 44px */
+
+	/* Icon */
+	--stuic-nav-icon-opacity: 0.75;
+
+	/* Chevron */
+	--stuic-nav-chevron-opacity: 0.5;
+
+	/* Color tokens: Base state */
+	--stuic-nav-item-bg: transparent;
+	--stuic-nav-item-text: inherit;
+
+	/* Color tokens: Hover state */
+	--stuic-nav-item-bg-hover: rgb(0 0 0 / 0.1);
+	--stuic-nav-item-text-hover: inherit;
+
+	/* Color tokens: Active state */
+	--stuic-nav-item-bg-active: var(--stuic-color-primary);
+	--stuic-nav-item-text-active: var(--stuic-color-primary-foreground);
+
+	/* Color tokens: Focused state (keyboard navigation) */
+	--stuic-nav-item-bg-focus: var(--stuic-color-primary);
+	--stuic-nav-item-text-focus: var(--stuic-color-primary-foreground);
+}
+
+@layer components {
+	/* =============================================================================
+	   BASE CONTAINER
+	   ============================================================================= */
+
+	.stuic-nav {
+		display: flex;
+		flex-direction: column;
+		gap: var(--stuic-nav-children-gap);
+	}
+
+	/* Center items horizontally when collapsed */
+	.stuic-nav[data-collapsed] {
+		align-items: center;
+	}
+
+	/* =============================================================================
+	   SECTION TITLE (static header above group)
+	   ============================================================================= */
+
+	.stuic-nav-section-title {
+		/* Layout */
+		display: block;
+		width: 100%;
+
+		/* Padding */
+		padding: var(--stuic-nav-section-title-padding-y)
+			var(--stuic-nav-section-title-padding-x);
+
+		/* Typography */
+		font-size: var(--stuic-nav-section-title-font-size);
+		font-weight: var(--stuic-nav-section-title-font-weight);
+		letter-spacing: var(--stuic-nav-section-title-letter-spacing);
+		line-height: 1;
+
+		/* Visual */
+		opacity: var(--stuic-nav-section-title-opacity);
+
+		/* Non-interactive */
+		user-select: none;
+	}
+
+	/* Collapsed mode: hide title but preserve space */
+	.stuic-nav-section-title[data-collapsed] {
+		visibility: hidden;
+	}
+
+	/* =============================================================================
+	   GROUP TITLE/HEADER (collapsible)
+	   ============================================================================= */
+
+	.stuic-nav-group-title {
+		/* Layout */
+		display: flex;
+		align-items: center;
+		gap: var(--stuic-nav-gap);
+		width: 100%;
+		height: var(--stuic-nav-group-title-height);
+
+		/* Padding */
+		padding: var(--stuic-nav-group-title-padding-y)
+			var(--stuic-nav-group-title-padding-x);
+
+		/* Typography */
+		font-size: var(--stuic-nav-group-title-font-size);
+		font-weight: var(--stuic-nav-group-title-font-weight);
+		text-align: left;
+		line-height: 1;
+
+		/* Visual */
+		opacity: var(--stuic-nav-group-title-opacity);
+		border-radius: var(--stuic-nav-radius);
+		background: transparent;
+		border: none;
+
+		/* Interaction */
+		cursor: pointer;
+		user-select: none;
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.stuic-nav-group-title:hover {
+		background: var(--stuic-nav-item-bg-hover);
+	}
+
+	.stuic-nav-group-title:focus {
+		outline: none;
+	}
+
+	.stuic-nav-group-title:focus-visible {
+		background: var(--stuic-nav-item-bg-hover);
+	}
+
+	/* Touch-friendly title */
+	.stuic-nav-group-title[data-touch-friendly] {
+		height: var(--stuic-nav-group-title-height-touch);
+		padding-top: var(--stuic-nav-item-padding-y-touch);
+		padding-bottom: var(--stuic-nav-item-padding-y-touch);
+	}
+
+	/* =============================================================================
+	   CHILDREN CONTAINER
+	   ============================================================================= */
+
+	.stuic-nav-children {
+		display: flex;
+		flex-direction: column;
+		gap: var(--stuic-nav-children-gap);
+		padding-left: var(--stuic-nav-children-indent);
+		list-style: none;
+		margin: 0;
+	}
+
+	/* No indent in collapsed mode */
+	.stuic-nav[data-collapsed] .stuic-nav-children {
+		padding-left: 0;
+	}
+
+	/* =============================================================================
+	   ITEM STYLES
+	   ============================================================================= */
+
+	.stuic-nav-item {
+		/* Layout */
+		display: flex;
+		align-items: center;
+		gap: var(--stuic-nav-gap);
+		width: 100%;
+		height: var(--stuic-nav-item-height);
+
+		/* Padding */
+		padding: var(--stuic-nav-item-padding-y)
+			var(--stuic-nav-item-padding-x);
+
+		/* Typography */
+		font-size: var(--stuic-nav-item-font-size);
+		text-align: left;
+		text-decoration: none;
+		line-height: 1;
+
+		/* Visual */
+		border-radius: var(--stuic-nav-radius);
+		background: var(--stuic-nav-item-bg);
+		color: var(--stuic-nav-item-text);
+		border: none;
+
+		/* Interaction */
+		cursor: pointer;
+		user-select: none;
+		-webkit-tap-highlight-color: transparent;
+		transition:
+			background var(--stuic-nav-transition),
+			color var(--stuic-nav-transition);
+	}
+
+	/* Icon opacity */
+	.stuic-nav-item > span:first-child {
+		opacity: var(--stuic-nav-icon-opacity);
+	}
+
+	/* =============================================================================
+	   ITEM STATE STYLES
+	   ============================================================================= */
+
+	/* Hover state */
+	.stuic-nav-item:hover:not(:disabled):not([data-active]) {
+		background: var(--stuic-nav-item-bg-hover);
+		color: var(--stuic-nav-item-text-hover);
+	}
+
+	/* Focus styles */
+	.stuic-nav-item:focus {
+		outline: none;
+	}
+
+	.stuic-nav-item:focus-visible:not([data-active]) {
+		background: var(--stuic-nav-item-bg-focus);
+		color: var(--stuic-nav-item-text-focus);
+	}
+
+	/* Active/Selected state */
+	.stuic-nav-item[data-active] {
+		background: var(--stuic-nav-item-bg-active);
+		color: var(--stuic-nav-item-text-active);
+	}
+
+	/* Active state: make icon full opacity */
+	.stuic-nav-item[data-active] > span:first-child {
+		opacity: 1;
+	}
+
+	/* Focused state (keyboard navigation) */
+	.stuic-nav-item[data-focused]:not([data-active]) {
+		background: var(--stuic-nav-item-bg-focus);
+		color: var(--stuic-nav-item-text-focus);
+	}
+
+	/* Disabled state */
+	.stuic-nav-item:disabled,
+	.stuic-nav-item[data-disabled] {
+		opacity: 0.5;
+		cursor: not-allowed;
+		pointer-events: none;
+	}
+
+	/* =============================================================================
+	   TOUCH-FRIENDLY MODIFIER
+	   ============================================================================= */
+
+	.stuic-nav-item[data-touch-friendly] {
+		height: var(--stuic-nav-item-height-touch);
+		padding-top: var(--stuic-nav-item-padding-y-touch);
+		padding-bottom: var(--stuic-nav-item-padding-y-touch);
+	}
+
+	/* =============================================================================
+	   COLLAPSED MODE
+	   ============================================================================= */
+
+	.stuic-nav-item[data-collapsed] {
+		/* Center content */
+		justify-content: center;
+		width: var(--stuic-nav-item-size-collapsed);
+		height: var(--stuic-nav-item-size-collapsed);
+		padding: 0.375rem;
+	}
+
+	/* Collapsed + touch-friendly: minimum 44x44 */
+	.stuic-nav-item[data-collapsed][data-touch-friendly] {
+		width: var(--stuic-nav-item-size-collapsed-touch);
+		height: var(--stuic-nav-item-size-collapsed-touch);
+	}
+
+	/* Expanding transition state - shift content left */
+	.stuic-nav-item[data-expanding] {
+		padding-left: var(--stuic-nav-item-padding-x);
+		justify-content: flex-start;
+	}
+
+	/* =============================================================================
+	   CHEVRON STYLES
+	   ============================================================================= */
+
+	.stuic-nav-group-title > span:first-child,
+	.stuic-nav-item[data-collapsed] > span:first-child {
+		opacity: var(--stuic-nav-chevron-opacity);
+	}
+}

package/dist/components/Nav/index.d.ts

@@ -0,0 +1 @@
+export { default as Nav, type Props as NavProps, type NavItem, type NavGroup, NAV_BASE_CLASSES, NAV_SECTION_TITLE_CLASSES, NAV_GROUP_TITLE_CLASSES, NAV_ITEM_CLASSES, NAV_CHILDREN_CLASSES, } from "./Nav.svelte";

package/dist/components/Nav/index.js

@@ -0,0 +1 @@
+export { default as Nav, NAV_BASE_CLASSES, NAV_SECTION_TITLE_CLASSES, NAV_GROUP_TITLE_CLASSES, NAV_ITEM_CLASSES, NAV_CHILDREN_CLASSES, } from "./Nav.svelte";

package/dist/components/Notifications/Notifications.svelte

@@ -40,7 +40,6 @@
 	import Button from "../Button/Button.svelte";
 	import Thc from "../Thc/Thc.svelte";
 	import X from "../X/X.svelte";
-	import "./index.css";
 	import type { Notification } from "./notifications-stack.svelte.js";
 	import Progress from "../Progress/Progress.svelte";
 
@@ -167,8 +166,8 @@
 					{#if n.ttl && !noProgress}
 						<Progress
 							progress={100 - n._ttlProgress * 100}
-							class={twMerge("progress", classProgress)}
-							classBar={twMerge("progress-bar", classProgressBar)}
+							class={twMerge("progress h-full", classProgress)}
+							classBar={twMerge("progress-bar bg-black/5", classProgressBar)}
 							styleBar="transition-duration: {notifications.options.disposeInterval}ms;"
 						/>
 					{/if}

package/dist/components/Notifications/Notifications.svelte.d.ts

@@ -27,7 +27,6 @@ export interface Props {
     classProgressBar?: string;
     el?: HTMLDivElement;
 }
-import "./index.css";
 declare const Notifications: import("svelte").Component<Props, {}, "el">;
 type Notifications = ReturnType<typeof Notifications>;
 export default Notifications;

package/dist/components/Notifications/index.css

@@ -35,183 +35,183 @@
 	--stuic-notification-badge-text: var(--color-neutral-50);
 
 	/* Progress bar */
-	--stuic-notification-progress-opacity: 0.1;
+	/* --stuic-notification-progress-opacity: 0.1; */
 }
 
-/* ============================================================================
-   TYPE-BASED COLOR MAPPING
-   Each type sets the color palette via internal CSS vars.
-   ============================================================================ */
-
-/* Default / info */
-.stuic-notification {
-	--_bg: var(--stuic-color-info);
-	--_text: var(--stuic-color-info-foreground);
-	--_border: var(--stuic-color-info-hover);
-}
-
-.stuic-notification[data-type="success"] {
-	--_bg: var(--stuic-color-success);
-	--_text: var(--stuic-color-success-foreground);
-	--_border: var(--stuic-color-success-hover);
-}
-
-.stuic-notification[data-type="warn"] {
-	--_bg: var(--stuic-color-warning);
-	--_text: var(--stuic-color-warning-foreground);
-	--_border: var(--stuic-color-warning-hover);
-}
-
-.stuic-notification[data-type="error"] {
-	--_bg: var(--stuic-color-destructive);
-	--_text: var(--stuic-color-destructive-foreground);
-	--_border: var(--stuic-color-destructive-hover);
-}
+@layer components {
+	/* ============================================================================
+	   TYPE-BASED COLOR MAPPING
+	   Each type sets the color palette via internal CSS vars.
+	   ============================================================================ */
 
-/* ============================================================================
-   BASE STYLES
-   ============================================================================ */
-
-.stuic-notification {
-	/* Layout */
-	position: relative;
-	display: flex;
-	align-items: center;
-	width: 100%;
-	max-width: 100%;
+	/* Default / info */
+	.stuic-notification {
+		--_bg: var(--stuic-color-info);
+		--_text: var(--stuic-color-info-foreground);
+		--_border: var(--stuic-color-info-hover);
+	}
 
-	/* Box model */
-	border-width: 1px;
-	border-style: solid;
-	border-radius: var(--stuic-notification-radius);
+	.stuic-notification[data-type="success"] {
+		--_bg: var(--stuic-color-success);
+		--_text: var(--stuic-color-success-foreground);
+		--_border: var(--stuic-color-success-hover);
+	}
 
-	/* Shadow */
-	box-shadow: var(--stuic-notification-shadow);
+	.stuic-notification[data-type="warn"] {
+		--_bg: var(--stuic-color-warning);
+		--_text: var(--stuic-color-warning-foreground);
+		--_border: var(--stuic-color-warning-hover);
+	}
 
-	/* Colors - use internal vars set by type */
-	background: var(--_bg);
-	color: var(--_text);
-	border-color: var(--_border);
+	.stuic-notification[data-type="error"] {
+		--_bg: var(--stuic-color-destructive);
+		--_text: var(--stuic-color-destructive-foreground);
+		--_border: var(--stuic-color-destructive-hover);
+	}
 
-	/* Interaction */
-	pointer-events: auto;
-}
+	/* ============================================================================
+	   BASE STYLES
+	   ============================================================================ */
 
-@media (min-width: 40rem) {
 	.stuic-notification {
-		width: var(--stuic-notification-max-width);
+		/* Layout */
+		position: relative;
+		display: flex;
+		align-items: center;
+		width: 100%;
+		max-width: 100%;
+
+		/* Box model */
+		border-width: 1px;
+		border-style: solid;
+		border-radius: var(--stuic-notification-radius);
+
+		/* Shadow */
+		box-shadow: var(--stuic-notification-shadow);
+
+		/* Colors - use internal vars set by type */
+		background: var(--_bg);
+		color: var(--_text);
+		border-color: var(--_border);
+
+		/* Interaction */
+		pointer-events: auto;
 	}
-}
-
-/* ============================================================================
-   ICON
-   ============================================================================ */
-
-.stuic-notification .icon {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding-top: var(--stuic-notification-padding-y);
-	padding-bottom: var(--stuic-notification-padding-y);
-	padding-left: var(--stuic-notification-padding-x);
-	padding-right: 0;
-	color: var(--_text);
-	opacity: 0.85;
-}
-
-.stuic-notification .icon svg {
-	width: var(--stuic-notification-icon-size);
-	height: var(--stuic-notification-icon-size);
-}
-
-/* ============================================================================
-   CONTENT
-   ============================================================================ */
 
-.stuic-notification .content {
-	flex: 1;
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	padding: var(--stuic-notification-padding-y) calc(var(--spacing) * 1)
-		var(--stuic-notification-padding-y) var(--stuic-notification-padding-x);
-	font-size: var(--stuic-notification-font-size);
-	letter-spacing: var(--tracking-tight);
-}
+	@media (min-width: 40rem) {
+		.stuic-notification {
+			width: var(--stuic-notification-max-width);
+		}
+	}
 
-.stuic-notification .content.no-close-button {
-	padding-right: var(--stuic-notification-padding-x);
-}
+	/* ============================================================================
+	   ICON
+	   ============================================================================ */
+
+	.stuic-notification .icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding-top: var(--stuic-notification-padding-y);
+		padding-bottom: var(--stuic-notification-padding-y);
+		padding-left: var(--stuic-notification-padding-x);
+		padding-right: 0;
+		color: var(--_text);
+		opacity: 0.85;
+	}
 
-/* ============================================================================
-   CLOSE BUTTON
-   ============================================================================ */
+	.stuic-notification .icon svg {
+		width: var(--stuic-notification-icon-size);
+		height: var(--stuic-notification-icon-size);
+	}
 
-.stuic-notification .close-button {
-	align-self: stretch;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	padding: 0 calc(var(--spacing) * 3);
-	border-top-right-radius: var(--stuic-notification-radius);
-	border-bottom-right-radius: var(--stuic-notification-radius);
-	color: var(--_text);
-	opacity: 0.75;
-	transition: opacity var(--stuic-notification-transition);
-}
+	/* ============================================================================
+	   CONTENT
+	   ============================================================================ */
+
+	.stuic-notification .content {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		padding: var(--stuic-notification-padding-y) calc(var(--spacing) * 1)
+			var(--stuic-notification-padding-y) var(--stuic-notification-padding-x);
+		font-size: var(--stuic-notification-font-size);
+		letter-spacing: var(--tracking-tight);
+	}
 
-.stuic-notification .close-button:hover {
-	opacity: 1;
-	background: rgb(0 0 0 / 0.1);
-}
+	.stuic-notification .content.no-close-button {
+		padding-right: var(--stuic-notification-padding-x);
+	}
 
-.stuic-notification .close-button:focus-visible {
-	opacity: 1;
-	outline: none;
-	background: rgb(0 0 0 / 0.1);
-}
+	/* ============================================================================
+	   CLOSE BUTTON
+	   ============================================================================ */
+
+	.stuic-notification .close-button {
+		align-self: stretch;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: 0 calc(var(--spacing) * 3);
+		border-top-right-radius: var(--stuic-notification-radius);
+		border-bottom-right-radius: var(--stuic-notification-radius);
+		color: var(--_text);
+		opacity: 0.75;
+		transition: opacity var(--stuic-notification-transition);
+	}
 
-/* ============================================================================
-   COUNTER BADGE
-   ============================================================================ */
+	.stuic-notification .close-button:hover {
+		opacity: 1;
+		background: rgb(0 0 0 / 0.1);
+	}
 
-.stuic-notification .count {
-	position: absolute;
-	top: calc(var(--spacing) * -2);
-	right: calc(var(--spacing) * -2);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding: var(--stuic-notification-badge-padding-y)
-		var(--stuic-notification-badge-padding-x);
-	border-radius: var(--stuic-notification-badge-radius);
-	font-size: var(--stuic-notification-badge-font-size);
-	line-height: 1;
-	background: var(--stuic-notification-badge-bg);
-	color: var(--stuic-notification-badge-text);
-}
+	.stuic-notification .close-button:focus-visible {
+		opacity: 1;
+		outline: none;
+		background: rgb(0 0 0 / 0.1);
+	}
 
-/* ============================================================================
-   PROGRESS BAR
-   ============================================================================ */
+	/* ============================================================================
+	   COUNTER BADGE
+	   ============================================================================ */
+
+	.stuic-notification .count {
+		position: absolute;
+		top: calc(var(--spacing) * -2);
+		right: calc(var(--spacing) * -2);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: var(--stuic-notification-badge-padding-y)
+			var(--stuic-notification-badge-padding-x);
+		border-radius: var(--stuic-notification-badge-radius);
+		font-size: var(--stuic-notification-badge-font-size);
+		line-height: 1;
+		background: var(--stuic-notification-badge-bg);
+		color: var(--stuic-notification-badge-text);
+	}
 
-.stuic-notification .progress {
-	position: absolute;
-	inset: 0;
-	width: 100%;
-	height: 100%;
-	background: transparent;
-	border-top-left-radius: var(--stuic-notification-radius);
-	border-bottom-left-radius: var(--stuic-notification-radius);
-	overflow: hidden;
-	pointer-events: none;
-}
+	/* ============================================================================
+	   PROGRESS BAR
+	   ============================================================================ */
+
+	.stuic-notification .progress {
+		position: absolute;
+		inset: 0;
+		background: transparent;
+		border-bottom-left-radius: var(--stuic-notification-radius);
+		border-bottom-right-radius: var(--stuic-notification-radius);
+		overflow: hidden;
+		pointer-events: none;
+	}
 
-.stuic-notification .progress-bar {
-	width: 100%;
-	height: 100%;
-	background: rgb(255 255 255 / var(--stuic-notification-progress-opacity));
-	border-top-left-radius: var(--stuic-notification-radius);
-	border-bottom-left-radius: var(--stuic-notification-radius);
+	.stuic-notification .progress-bar {
+		width: 100%;
+		height: 100%;
+		/* background: rgb(255 255 255 / 0.5); */
+		border-bottom-left-radius: var(--stuic-notification-radius);
+		border-bottom-right-radius: var(--stuic-notification-radius);
+	}
 }