noph-ui 0.9.16 → 0.10.0

package/dist/button/SegmentedButton.svelte

@@ -44,7 +44,7 @@
 			{#if !option.disabled}
 				<Ripple forceHover={i === hoverState} />
 			{/if}
-			{#if group}
+			{#if group !== undefined}
 				{#if multiSelect}
 					<input
 						type="checkbox"
@@ -102,7 +102,7 @@
 		display: grid;
 		color: var(--np-color-on-surface);
 		border: 1px solid var(--np-color-outline);
-		border-radius: 1.5rem;
+		border-radius: var(--np-shape-corner-full);
 		overflow-x: auto;
 	}
 

package/dist/checkbox/Checkbox.svelte

@@ -15,7 +15,7 @@
 <div {style} class={['np-host', attributes.class]} bind:this={element}>
 	<div class="np-container">
 		<label class="np-input-wrapper">
-			{#if group}
+			{#if group !== undefined}
 				<input
 					{...attributes}
 					class="np-input"
@@ -89,7 +89,7 @@
 		position: absolute;
 		width: 48px;
 		z-index: 1;
-		border-radius: var(--np-shape-corner-large);
+		border-radius: var(--np-shape-corner-full);
 		cursor: inherit;
 	}
 

package/dist/navigation-drawer/NavigationDrawer.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+	import type { NavigationDrawerProps } from './types.ts'
+	let {
+		modal = false,
+		backdrop = false,
+		element = $bindable(),
+		children,
+		...attributes
+	}: NavigationDrawerProps = $props()
+</script>
+
+<nav
+	{...attributes}
+	bind:this={element}
+	class={[
+		'np-navigation-drawer-container',
+		modal && 'np-navigation-drawer-shade',
+		backdrop && 'np-navigation-drawer-backdrop',
+		attributes.class,
+	]}
+>
+	<div class="np-navigation-drawer">
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
+</nav>
+
+<style>
+	.np-navigation-drawer-container {
+		background-color: var(--np-navigation-drawer-background, var(--np-color-surface-container-low));
+		color: var(--np-color-on-surface-variant);
+		border-top-right-radius: var(--np-shape-corner-large);
+		border-bottom-right-radius: var(--np-shape-corner-large);
+		height: var(--np-navigation-drawer-height, 100dvh);
+		width: var(--np-navigation-drawer-width, 22.5rem);
+		scrollbar-width: thin;
+		overflow-y: auto;
+		border: 0;
+		margin: 0;
+		padding: 0;
+	}
+
+	.np-navigation-drawer-container[popover] {
+		transition-property: transform;
+		transition-timing-function: ease-in;
+		transition:
+			transform 0.3s,
+			overlay 0.3s allow-discrete,
+			display 0.3s allow-discrete;
+		transform: translateX(-100%);
+	}
+	.np-navigation-drawer-container:popover-open {
+		transform: translateX(0);
+		@starting-style {
+			transform: translateX(-100%);
+		}
+	}
+	.np-navigation-drawer {
+		display: flex;
+		padding: 0.75rem;
+		flex-direction: column;
+	}
+	.np-navigation-drawer-shade {
+		box-shadow: var(--np-elevation-1);
+	}
+	.np-navigation-drawer-backdrop::backdrop {
+		background-color: var(--np-color-scrim);
+		opacity: 0;
+		transition:
+			display 0.3s allow-discrete,
+			overlay 0.3s allow-discrete,
+			opacity 0.3s linear;
+	}
+	.np-navigation-drawer-backdrop:popover-open::backdrop {
+		opacity: 0.38;
+	}
+	@starting-style {
+		.np-navigation-drawer-backdrop:popover-open::backdrop {
+			opacity: 0;
+		}
+	}
+</style>

package/dist/navigation-drawer/NavigationDrawer.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { NavigationDrawerProps } from './types.ts';
+declare const NavigationDrawer: import("svelte").Component<NavigationDrawerProps, {}, "element">;
+type NavigationDrawer = ReturnType<typeof NavigationDrawer>;
+export default NavigationDrawer;

package/dist/navigation-drawer/NavigationDrawerItem.svelte

@@ -0,0 +1,144 @@
+<script lang="ts">
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements'
+	import type { NavigationDrawerItemProps } from './types.ts'
+	import Ripple from '../ripple/Ripple.svelte'
+
+	let {
+		selected = false,
+		label,
+		badgeLabelText,
+		icon,
+		...attributes
+	}: NavigationDrawerItemProps = $props()
+
+	const isButton = (obj: unknown): obj is HTMLButtonAttributes => {
+		return (obj as HTMLAnchorAttributes).href === undefined
+	}
+	const isLink = (obj: unknown): obj is HTMLAnchorAttributes => {
+		return (obj as HTMLAnchorAttributes).href !== undefined
+	}
+</script>
+
+{#snippet content()}
+	<Ripple />
+	<div class="np-navigation-drawer-item-icon">
+		{#if icon}
+			{@render icon()}
+		{/if}
+	</div>
+	<div class="np-navigation-drawer-item-label">{label}</div>
+	<div class="np-navigation-drawer-item-badge">{badgeLabelText}</div>
+{/snippet}
+
+{#if isButton(attributes)}
+	<button
+		{...attributes as HTMLButtonAttributes}
+		class:np-navigation-drawer-item-selected={selected}
+		class="np-navigation-drawer-item {attributes.class}"
+	>
+		{@render content()}
+	</button>
+{:else if isLink(attributes)}
+	<a
+		{...attributes}
+		class:np-navigation-drawer-item-selected={selected}
+		class="np-navigation-drawer-item {attributes.class}"
+	>
+		{@render content()}
+	</a>
+{/if}
+
+<style>
+	.np-navigation-drawer-item {
+		cursor: pointer;
+		border: 0;
+		background: none;
+		align-items: center;
+		gap: 0.75rem;
+		height: 3.5rem;
+		display: inline-flex;
+		position: relative;
+		padding: 0 1.5rem 0 1rem;
+		border-radius: var(--np-navigation-drawer-item-container-shape, var(--np-shape-corner-full));
+		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+		z-index: 1;
+	}
+
+	.np-navigation-drawer-item::before {
+		content: '';
+		position: absolute;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		opacity: 0;
+		transform: scaleX(0.32);
+		transition-duration: 0.2s;
+		transition-property: transform, opacity;
+		transition-timing-function: linear;
+		background-color: var(--np-color-secondary-container);
+		border-radius: var(--np-shape-corner-full);
+		z-index: -1;
+	}
+
+	.np-navigation-drawer-item-selected.np-navigation-drawer-item::before {
+		opacity: 1;
+		transform: scaleX(1);
+	}
+
+	.np-navigation-drawer-item:focus-visible {
+		outline-style: solid;
+		outline-color: var(--np-color-primary);
+		outline-width: 3px;
+		outline-offset: -3px;
+		animation: focusAnimation 0.3s ease forwards;
+	}
+	@keyframes focusAnimation {
+		0% {
+			outline-offset: -3px;
+			outline-width: 3px;
+		}
+		50% {
+			outline-offset: -6px;
+			outline-width: 6px;
+		}
+		100% {
+			outline-offset: -3px;
+			outline-width: 3px;
+		}
+	}
+	.np-navigation-drawer-item-icon {
+		color: var(--np-color-on-surface-variant);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.np-navigation-drawer-item-selected .np-navigation-drawer-item-icon {
+		color: var(--np-color-on-secondary-container);
+		--np-icon-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+	}
+
+	.np-navigation-drawer-item-label {
+		font-size: var(--np-navigation-drawer-font-size, 0.875rem);
+		line-height: 1.25rem;
+		font-weight: 500;
+		flex: 1;
+		text-align: left;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		text-wrap: nowrap;
+		color: var(--np-color-on-surface-variant);
+	}
+
+	.np-navigation-drawer-item-selected .np-navigation-drawer-item-label {
+		font-weight: 700;
+		color: var(--np-color-on-secondary-container);
+	}
+
+	.np-navigation-drawer-item-badge {
+		font-size: 0.875rem;
+		line-height: 1.25rem;
+		font-weight: 500;
+		color: var(--np-color-on-surface-variant);
+	}
+</style>

package/dist/navigation-drawer/NavigationDrawerItem.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { NavigationDrawerItemProps } from './types.ts';
+declare const NavigationDrawerItem: import("svelte").Component<NavigationDrawerItemProps, {}, "">;
+type NavigationDrawerItem = ReturnType<typeof NavigationDrawerItem>;
+export default NavigationDrawerItem;

package/dist/navigation-drawer/index.d.ts

@@ -0,0 +1,2 @@
+export { default as NavigationDrawer } from './NavigationDrawer.svelte';
+export { default as NavigationDrawerItem } from './NavigationDrawerItem.svelte';

package/dist/navigation-drawer/index.js

@@ -0,0 +1,2 @@
+export { default as NavigationDrawer } from './NavigationDrawer.svelte';
+export { default as NavigationDrawerItem } from './NavigationDrawerItem.svelte';

package/dist/navigation-drawer/types.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
+export interface NavigationDrawerProps extends HTMLAttributes<HTMLElement> {
+    modal?: boolean;
+    backdrop?: boolean;
+    element?: HTMLElement;
+}
+interface NavigationDrawerItemButton extends HTMLButtonAttributes {
+    icon?: Snippet;
+    label: string;
+    selected?: boolean;
+    badgeLabelText?: string;
+}
+interface NavigationDrawerItemLink extends HTMLAnchorAttributes {
+    icon?: Snippet;
+    label: string;
+    selected?: boolean;
+    badgeLabelText?: string;
+}
+export type NavigationDrawerItemProps = NavigationDrawerItemButton | NavigationDrawerItemLink;
+export {};

package/dist/navigation-drawer/types.js

@@ -0,0 +1 @@
+export {};

package/dist/navigation-rail/{NavigationAction.svelte → NavigationRailItem.svelte}

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements'
-	import type { NavigationActionProps } from './types.ts'
+	import type { NavigationRailItemProps } from './types.ts'
 	import Ripple from '../ripple/Ripple.svelte'
 
-	let { selected, icon, label, ...attributes }: NavigationActionProps = $props()
+	let { selected, icon, label, ...attributes }: NavigationRailItemProps = $props()
 	let touchEl: HTMLSpanElement | undefined = $state()
 
 	const isButton = (obj: unknown): obj is HTMLButtonAttributes => {
@@ -80,6 +80,7 @@
 		width: 3.5rem;
 		height: 2rem;
 		align-items: center;
+		z-index: 1;
 	}
 	.np-navigation-action-label {
 		font-size: 0.75rem;

package/dist/navigation-rail/NavigationRailItem.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { NavigationRailItemProps } from './types.ts';
+declare const NavigationRailItem: import("svelte").Component<NavigationRailItemProps, {}, "">;
+type NavigationRailItem = ReturnType<typeof NavigationRailItem>;
+export default NavigationRailItem;

package/dist/navigation-rail/index.d.ts

@@ -1,2 +1,2 @@
 export { default as NavigationRail } from './NavigationRail.svelte';
-export { default as NavigationAction } from './NavigationAction.svelte';
+export { default as NavigationRailItem } from './NavigationRailItem.svelte';

package/dist/navigation-rail/index.js

@@ -1,2 +1,2 @@
 export { default as NavigationRail } from './NavigationRail.svelte';
-export { default as NavigationAction } from './NavigationAction.svelte';
+export { default as NavigationRailItem } from './NavigationRailItem.svelte';

package/dist/navigation-rail/types.d.ts

@@ -1,15 +1,15 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
 export type NavigationRailProps = HTMLAttributes<HTMLElement>;
-interface NavigationActionButton extends HTMLButtonAttributes {
+interface NavigationRailItemButton extends HTMLButtonAttributes {
     icon: Snippet;
     label: string;
     selected?: boolean;
 }
-interface NavigationActionLink extends HTMLAnchorAttributes {
+interface NavigationRailItemLink extends HTMLAnchorAttributes {
     icon: Snippet;
     label: string;
     selected?: boolean;
 }
-export type NavigationActionProps = NavigationActionButton | NavigationActionLink;
+export type NavigationRailItemProps = NavigationRailItemButton | NavigationRailItemLink;
 export {};

package/dist/radio/Radio.svelte

@@ -15,7 +15,7 @@
 </script>
 
 <label {style} class={['np-host', attributes.class]} bind:this={element}>
-	{#if group}
+	{#if group !== undefined}
 		<input {...attributes} type="radio" class="np-input" {checked} {defaultChecked} bind:group />
 	{:else}
 		<input {...attributes} type="radio" class="np-input" {checked} {defaultChecked} />

package/dist/themes/defaultTheme.css

@@ -64,7 +64,7 @@
 	--np-shape-corner-full: 9999px;
 	--np-shape-corner-extra-small: 0.25rem;
 	--np-shape-corner-medium: 0.75rem;
-	--np-shape-corner-large: 1.5rem;
+	--np-shape-corner-large: 1rem;
 	--np-shape-corner-extra-large: 1.75rem;
 	--np-shape-corner-none: 0;
 }

package/dist/types.d.ts

@@ -5,6 +5,7 @@ export * from './chip/types.ts';
 export * from './divider/types.js';
 export * from './list/types.ts';
 export * from './menu/types.ts';
+export * from './navigation-drawer/types.ts';
 export * from './navigation-rail/types.ts';
 export * from './progress/types.js';
 export * from './radio/types.ts';

package/dist/types.js

@@ -5,6 +5,7 @@ export * from './chip/types.ts';
 export * from './divider/types.js';
 export * from './list/types.ts';
 export * from './menu/types.ts';
+export * from './navigation-drawer/types.ts';
 export * from './navigation-rail/types.ts';
 export * from './progress/types.js';
 export * from './radio/types.ts';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noph-ui",
-  "version": "0.9.16",
+  "version": "0.10.0",
   "license": "MIT",
   "homepage": "https://noph.dev",
   "repository": {
@@ -54,9 +54,9 @@
   "devDependencies": {
     "@material/material-color-utilities": "^0.3.0",
     "@playwright/test": "^1.49.1",
-    "@sveltejs/adapter-vercel": "^5.5.2",
-    "@sveltejs/kit": "^2.15.2",
-    "@sveltejs/package": "^2.3.7",
+    "@sveltejs/adapter-vercel": "^5.5.3",
+    "@sveltejs/kit": "^2.16.1",
+    "@sveltejs/package": "^2.3.8",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@types/eslint": "^9.6.1",
     "eslint": "^9.18.0",
@@ -66,12 +66,12 @@
     "prettier": "^3.4.2",
     "prettier-plugin-svelte": "^3.3.3",
     "publint": "^0.3.2",
-    "svelte": "^5.18.0",
+    "svelte": "^5.19.1",
     "svelte-check": "^4.1.4",
     "typescript": "^5.7.3",
-    "typescript-eslint": "^8.20.0",
-    "vite": "^6.0.7",
-    "vitest": "^2.1.8"
+    "typescript-eslint": "^8.21.0",
+    "vite": "^6.0.11",
+    "vitest": "^3.0.3"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/dist/navigation-rail/NavigationAction.svelte.d.ts

@@ -1,4 +0,0 @@
-import type { NavigationActionProps } from './types.ts';
-declare const NavigationAction: import("svelte").Component<NavigationActionProps, {}, "">;
-type NavigationAction = ReturnType<typeof NavigationAction>;
-export default NavigationAction;