noph-ui 0.4.12 → 0.6.0

package/README.md

@@ -56,22 +56,24 @@ Beta (No breaking changes expected)
 
 - Buttons
 - Cards
-- Checkbox
+- Checkbox (Docs missing)
 - Divider
 - Icon buttons
+- Lists (Docs missing)
 - Progress indicators
+- Radio (Docs missing)
 - Ripple
 - Segmented buttons
 - Snackbar
-- Radio
-- Text fields
+- Text fields (Textarea Docs missing)
 
 In progress (Breaking changes expected)
 
 - Chips
-- Lists
-- Menus
-- Tooltips
+- Dialogs (Fullscreen + Docs missing)
+- Menus (Positioning missing + Docs missing)
+- Navigation Rail (Badge is missing)
+- Tooltips (Positioning missing)
 
 Pending
 

package/dist/dialogs/Dialog.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+	import Divider from '../divider/Divider.svelte'
+	import type { DialogProps } from './types.ts'
+
+	let {
+		element = $bindable(),
+		showPopover = $bindable(),
+		hidePopover = $bindable(),
+		children,
+		headline,
+		icon,
+		supportingText,
+		buttons,
+		divider,
+		...attributes
+	}: DialogProps = $props()
+
+	showPopover = () => {
+		element?.showPopover()
+	}
+
+	hidePopover = () => {
+		element?.hidePopover()
+	}
+</script>
+
+<form bind:this={element} class="np-dialog" popover="auto" role="dialog" {...attributes}>
+	{#if icon}
+		<div class="np-dialog-icon">
+			{@render icon()}
+		</div>
+	{/if}
+	<h1 class="np-dialog-headline" style={icon ? 'text-align: center' : ''}>{headline}</h1>
+	{#if supportingText}
+		<p class="np-dialog-supporting-text">{supportingText}</p>
+	{/if}
+	{#if divider}
+		<Divider style="margin-top: 1rem" --np-divider-color="var(--np-color-outline)" />
+	{/if}
+	{#if children}
+		{@render children()}
+	{/if}
+	{#if buttons}
+		<div class="np-dialog-buttons">
+			{@render buttons()}
+		</div>
+	{/if}
+</form>
+
+<style>
+	.np-dialog {
+		border: 0;
+		min-width: 280px;
+		max-width: 560px;
+		background-color: var(--np-color-surface);
+		color: var(--np-color-on-surface);
+		padding: 1.5rem;
+		border-radius: var(--np-shape-corner-extra-large);
+		box-shadow: var(--np-elevation-3);
+		transition:
+			display 0.2s allow-discrete,
+			overlay 0.2s allow-discrete,
+			opacity 0.2s linear;
+		opacity: 0;
+		z-index: 1;
+	}
+	.np-dialog:popover-open {
+		opacity: 1;
+		@starting-style {
+			opacity: 0;
+		}
+	}
+	.np-dialog::backdrop {
+		background-color: var(--np-color-scrim);
+		opacity: 0;
+		transition:
+			display 0.2s allow-discrete,
+			overlay 0.2s allow-discrete,
+			opacity 0.2s linear;
+	}
+	.np-dialog:popover-open::backdrop {
+		opacity: 0.38;
+	}
+
+	@starting-style {
+		.np-dialog:popover-open::backdrop {
+			opacity: 0;
+		}
+	}
+	.np-dialog-icon {
+		color: var(--np-color-secondary);
+		display: flex;
+		justify-content: center;
+		margin-bottom: 1rem;
+	}
+	.np-dialog-headline {
+		margin: 0 0 1rem 0;
+		padding: 0;
+		line-height: 2rem;
+		font-size: 1.5rem;
+		font-weight: 400;
+	}
+	.np-dialog-buttons {
+		display: flex;
+		justify-content: flex-end;
+		gap: 0.5rem;
+		margin-top: 1.5rem;
+	}
+	.np-dialog-supporting-text {
+		margin: 0;
+		padding: 0;
+		line-height: 1.25rem;
+		font-size: 0.875rem;
+		font-weight: 400;
+		color: var(--np-color-on-surface-variant);
+	}
+</style>

package/dist/dialogs/Dialog.svelte.d.ts

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

package/dist/dialogs/index.d.ts

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

package/dist/dialogs/index.js

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

package/dist/dialogs/types.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { HTMLFormAttributes } from 'svelte/elements';
+export interface DialogProps extends Omit<HTMLFormAttributes, 'class' | 'popover'> {
+    icon?: Snippet;
+    headline: string;
+    supportingText?: string;
+    divider?: boolean;
+    buttons?: Snippet;
+    element?: HTMLElement;
+    showPopover?: () => void;
+    hidePopover?: () => void;
+}

package/dist/dialogs/types.js

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

package/dist/index.d.ts

@@ -2,9 +2,11 @@ export * from './button/index.js';
 export * from './card/index.js';
 export * from './checkbox/index.js';
 export * from './chip/index.js';
+export * from './dialogs/index.js';
 export * from './divider/index.js';
 export * from './list/index.js';
 export * from './menu/index.js';
+export * from './navigation-rail/index.js';
 export * from './progress/index.js';
 export * from './radio/index.js';
 export * from './ripple/index.js';

package/dist/index.js

@@ -2,9 +2,11 @@ export * from './button/index.js';
 export * from './card/index.js';
 export * from './checkbox/index.js';
 export * from './chip/index.js';
+export * from './dialogs/index.js';
 export * from './divider/index.js';
 export * from './list/index.js';
 export * from './menu/index.js';
+export * from './navigation-rail/index.js';
 export * from './progress/index.js';
 export * from './radio/index.js';
 export * from './ripple/index.js';

package/dist/menu/Menu.svelte

@@ -112,7 +112,9 @@
 	}
 	.np-menu:popover-open {
 		opacity: 1;
-		@starting-style {
+	}
+	@starting-style {
+		.np-menu:popover-open {
 			opacity: 0;
 		}
 	}

package/dist/navigation-rail/NavigationAction.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements'
+	import type { NavigationAction } from './types.ts'
+	import Ripple from '../ripple/Ripple.svelte'
+
+	let { selected, icon, label, ...attributes }: NavigationAction = $props()
+	let touchEl: HTMLSpanElement | undefined = $state()
+
+	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()}
+	<div class="np-navigation-action-icon">
+		<Ripple forElement={touchEl} />
+		{@render icon()}
+	</div>
+	<div class="np-navigation-action-label">{label}</div>
+	<span class="np-touch" bind:this={touchEl}></span>
+{/snippet}
+
+{#if isButton(attributes)}
+	<button
+		{...attributes as HTMLButtonAttributes}
+		class:np-navigation-action-selected={selected}
+		class="np-navigation-action {attributes.class}"
+	>
+		{@render content()}
+	</button>
+{:else if isLink(attributes)}
+	<a {...attributes} class="np-navigation-action {attributes.class}">
+		{@render content()}
+	</a>
+{/if}
+
+<style>
+	.np-navigation-action {
+		cursor: pointer;
+		border: 0;
+		background: none;
+		align-items: center;
+		gap: 0.25rem;
+		display: flex;
+		flex-direction: column;
+		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+	}
+	.np-navigation-action-icon {
+		position: relative;
+		color: var(--np-color-on-surface-variant);
+		display: flex;
+		border-radius: var(--np-shape-corner-full);
+		justify-content: center;
+		width: 3.5rem;
+		height: 2rem;
+		align-items: center;
+	}
+	.np-navigation-action-label {
+		font-size: 0.75rem;
+		line-height: 1rem;
+		font-weight: 500;
+		transition: all;
+		color: var(--np-color-on-surface-variant);
+	}
+	.np-navigation-action-selected .np-navigation-action-icon {
+		color: var(--np-color-secondary-container);
+		--np-icon-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+	}
+	.np-navigation-action-icon::before {
+		content: '';
+		position: absolute;
+		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-on-secondary-container);
+		border-radius: 100px;
+		z-index: -1;
+	}
+	.np-navigation-action-selected .np-navigation-action-icon::before {
+		opacity: 1;
+		transform: scaleX(1);
+	}
+
+	.np-navigation-action-selected .np-navigation-action-label {
+		font-weight: 700;
+		color: var(--np-color-on-surface);
+	}
+	.np-touch {
+		height: 56px;
+		position: absolute;
+		width: 80px;
+	}
+</style>

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

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

package/dist/navigation-rail/NavigationRail.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { NavigationRail } from './types.ts'
+
+	let { children, ...attributes }: NavigationRail = $props()
+</script>
+
+<nav {...attributes} class="navigation-rail">
+	{#if children}
+		{@render children()}
+	{/if}
+</nav>
+
+<style>
+	.navigation-rail {
+		z-index: 8;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		width: 80px;
+		gap: 0.75rem;
+		background-color: var(--np-color-surface);
+	}
+</style>

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

@@ -0,0 +1,4 @@
+import type { NavigationRail } from './types.ts';
+declare const NavigationRail: any;
+type NavigationRail = ReturnType<typeof NavigationRail>;
+export default NavigationRail;

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

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

package/dist/navigation-rail/index.js

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

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

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

package/dist/navigation-rail/types.js

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

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-rail/types.ts';
 export * from './progress/types.js';
 export * from './radio/types.ts';
 export * from './ripple/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-rail/types.ts';
 export * from './progress/types.js';
 export * from './radio/types.ts';
 export * from './ripple/types.ts';

package/package.json

@@ -1,93 +1,92 @@
 {
-	"name": "noph-ui",
-	"version": "0.4.12",
-	"license": "MIT",
-	"homepage": "https://noph.dev",
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/cnolte/noph-ui"
-	},
-	"author": {
-		"name": "cnolte"
-	},
-	"keywords": [
-		"svelte",
-		"svelte 5",
-		"material",
-		"material 3",
-		"material you",
-		"m3",
-		"ui",
-		"frontend",
-		"design-system",
-		"ui-library",
-		"theming"
-	],
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build && npm run package",
-		"preview": "vite preview",
-		"package": "svelte-kit sync && svelte-package && publint",
-		"prepublishOnly": "npm run package",
-		"test": "npm run test:integration && npm run test:unit",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --check . && eslint .",
-		"format": "prettier --write .",
-		"test:integration": "playwright test",
-		"test:unit": "vitest"
-	},
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js"
-		},
-		"./icons": {
-			"types": "./dist/icons/index.d.ts",
-			"svelte": "./dist/icons/index.js"
-		},
-		"./types": {
-			"types": "./dist/types.d.ts"
-		},
-		"./defaultTheme": {
-			"import": "./dist/themes/defaultTheme.css",
-			"require": "./dist/themes/defaultTheme.css"
-		}
-	},
-	"sideEffects": [
-		"**/*.css"
-	],
-	"files": [
-		"dist",
-		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*"
-	],
-	"peerDependencies": {
-		"svelte": "^5.0.0"
-	},
-	"devDependencies": {
-		"@material/material-color-utilities": "^0.3.0",
-		"@playwright/test": "^1.49.1",
-		"@sveltejs/adapter-vercel": "^5.5.2",
-		"@sveltejs/kit": "^2.12.1",
-		"@sveltejs/package": "^2.3.7",
-		"@sveltejs/vite-plugin-svelte": "^5.0.2",
-		"@types/eslint": "^9.6.1",
-		"eslint": "^9.17.0",
-		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-svelte": "^2.46.1",
-		"globals": "^15.13.0",
-		"prettier": "^3.4.2",
-		"prettier-plugin-svelte": "^3.3.2",
-		"publint": "^0.2.12",
-		"svelte": "^5.14.3",
-		"svelte-check": "^4.1.1",
-		"typescript": "^5.7.2",
-		"typescript-eslint": "^8.18.1",
-		"vite": "^6.0.3",
-		"vitest": "^2.1.8"
-	},
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"type": "module"
-}
+  "name": "noph-ui",
+  "version": "0.6.0",
+  "license": "MIT",
+  "homepage": "https://noph.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cnolte/noph-ui"
+  },
+  "author": {
+    "name": "cnolte"
+  },
+  "keywords": [
+    "svelte",
+    "svelte 5",
+    "material",
+    "material 3",
+    "material you",
+    "m3",
+    "ui",
+    "frontend",
+    "design-system",
+    "ui-library",
+    "theming"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    },
+    "./icons": {
+      "types": "./dist/icons/index.d.ts",
+      "svelte": "./dist/icons/index.js"
+    },
+    "./types": {
+      "types": "./dist/types.d.ts"
+    },
+    "./defaultTheme": {
+      "import": "./dist/themes/defaultTheme.css",
+      "require": "./dist/themes/defaultTheme.css"
+    }
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@material/material-color-utilities": "^0.3.0",
+    "@playwright/test": "^1.49.1",
+    "@sveltejs/adapter-vercel": "^5.5.2",
+    "@sveltejs/kit": "^2.12.1",
+    "@sveltejs/package": "^2.3.7",
+    "@sveltejs/vite-plugin-svelte": "^5.0.2",
+    "@types/eslint": "^9.6.1",
+    "eslint": "^9.17.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-svelte": "^2.46.1",
+    "globals": "^15.13.0",
+    "prettier": "^3.4.2",
+    "prettier-plugin-svelte": "^3.3.2",
+    "publint": "^0.2.12",
+    "svelte": "^5.14.3",
+    "svelte-check": "^4.1.1",
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.18.1",
+    "vite": "^6.0.3",
+    "vitest": "^2.1.8"
+  },
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run package",
+    "preview": "vite preview",
+    "package": "svelte-kit sync && svelte-package && publint",
+    "test": "npm run test:integration && npm run test:unit",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --check . && eslint .",
+    "format": "prettier --write .",
+    "test:integration": "playwright test",
+    "test:unit": "vitest"
+  }
+}