noph-ui 0.6.12 → 0.7.0

package/README.md

@@ -65,7 +65,7 @@ Beta (No breaking changes expected)
 - Ripple
 - Segmented buttons
 - Snackbar
-- Text fields (Textarea Docs missing)
+- Text fields (Textarea + Docs missing)
 
 In progress (Breaking changes expected)
 
@@ -74,11 +74,10 @@ In progress (Breaking changes expected)
 - Menus (Positioning missing + Docs missing)
 - Navigation Rail (Badge is missing)
 - Tooltips (Positioning missing)
+- Select
 
 Pending
 
-- Dialogs
-- Select
 - Sliders
 - Switch
 - Tabs

package/dist/button/Button.svelte

@@ -54,7 +54,11 @@
 		aria-label={title || attributes['aria-label']}
 		{disabled}
 		bind:this={element}
-		class="np-button {variant}{disabled ? '-disabled disabled' : ' enabled'} {attributes.class}"
+		class={[
+			'np-button',
+			disabled ? `${variant}-disabled disabled` : `${variant} enabled`,
+			attributes.class,
+		]}
 	>
 		{@render content()}
 	</button>
@@ -64,7 +68,7 @@
 		aria-describedby={title ? tooltipId : attributes['aria-describedby']}
 		aria-label={title || attributes['aria-label']}
 		bind:this={element}
-		class="np-button enabled {variant} {attributes.class}"
+		class={['np-button', 'enabled', variant, attributes.class]}
 	>
 		{@render content()}
 	</a>

package/dist/button/IconButton.svelte

@@ -57,13 +57,13 @@
 		{...attributes as HTMLButtonAttributes}
 		{disabled}
 		bind:this={element}
-		class="np-icon-button {variant}{disabled ? '-disabled disabled' : ' enabled'}{toggle
-			? ' toggle '
-			: ''}{selectedState
-			? (variant === 'outlined' || variant === 'text') && !toggle
-				? ''
-				: ' selected'
-			: ''} {attributes.class}"
+		class={[
+			'np-icon-button',
+			disabled ? `${variant}-disabled disabled` : `${variant} enabled`,
+			toggle && 'toggle',
+			selectedState && ((variant !== 'outlined' && variant !== 'text') || toggle) && 'selected',
+			attributes.class,
+		]}
 	>
 		{@render content()}
 	</button>
@@ -73,11 +73,12 @@
 		aria-describedby={title ? tooltipId : undefined}
 		aria-label={title}
 		bind:this={element}
-		class="np-icon-button enabled {variant} {selectedState
-			? (variant === 'outlined' || variant === 'text') && !toggle
-				? ''
-				: ' selected'
-			: ''} {attributes.class}"
+		class={[
+			'np-icon-button',
+			variant,
+			selectedState && ((variant !== 'outlined' && variant !== 'text') || toggle) && 'selected',
+			attributes.class,
+		]}
 	>
 		{@render content()}
 	</a>

package/dist/button/SegmentedButton.svelte

@@ -15,7 +15,7 @@
 
 <div
 	{...attributes}
-	class="np-segmented-buttons {attributes.class}"
+	class={['np-segmented-buttons', attributes.class]}
 	bind:this={element}
 	style="{attributes.style};grid-template-columns: repeat({options.length}, minmax(max-content, 1fr));"
 >

package/dist/card/Card.svelte

@@ -63,21 +63,25 @@
 	{/if}
 {/snippet}
 
-{#if attributes.type === 'text' || disabled}
+{#if attributes.type === 'text'}
 	<div
-		{...attributes as HTMLAttributes<HTMLDivElement>}
+		{...attributes}
 		bind:this={element}
 		aria-disabled={disabled}
-		class="np-card-container np-card-{variant}{disabled
-			? ' np-card-disabled'
-			: ''} {attributes.class}"
+		class={[
+			'np-card-container',
+			`np-card-${variant}`,
+			disabled && 'np-card-disabled',
+			attributes.class,
+		]}
 	>
 		{@render content()}
 	</div>
 {:else if attributes.type === 'button'}
 	<button
-		{...attributes as HTMLButtonAttributes}
+		{...attributes}
 		bind:this={element}
+		aria-disabled={disabled}
 		onfocusin={() => {
 			focused = true
 		}}
@@ -85,9 +89,12 @@
 			focused = false
 		}}
 		{disabled}
-		class="np-card-container np-card-{variant}{disabled
-			? ' np-card-disabled'
-			: ''} {attributes.class}"
+		class={[
+			'np-card-container',
+			`np-card-${variant}`,
+			disabled && 'np-card-disabled',
+			attributes.class,
+		]}
 	>
 		{@render content()}
 	</button>
@@ -95,15 +102,21 @@
 	<a
 		{...attributes}
 		bind:this={element}
+		aria-disabled={disabled}
+		tabindex={disabled ? -1 : undefined}
+		role="link"
 		onfocusin={() => {
 			focused = true
 		}}
 		onfocusout={() => {
 			focused = false
 		}}
-		class="np-card-container np-card-{variant}{disabled
-			? ' np-card-disabled'
-			: ''} {attributes.class}"
+		class={[
+			'np-card-container',
+			`np-card-${variant}`,
+			disabled && 'np-card-disabled',
+			attributes.class,
+		]}
 	>
 		{@render content()}
 	</a>

package/dist/checkbox/Checkbox.svelte

@@ -13,12 +13,12 @@
 	<div class="np-container">
 		<label class="np-input-wrapper">
 			<input
+				{...attributes}
 				class="np-input"
 				type="checkbox"
 				bind:indeterminate
 				bind:checked
 				aria-checked={indeterminate ? 'mixed' : undefined}
-				{...attributes}
 			/>
 			{#if !attributes.disabled}
 				<Ripple />

package/dist/divider/Divider.svelte

@@ -4,13 +4,7 @@
 	let { variant = 'full', ...attributes }: DividerProps = $props()
 </script>
 
-<template
-	class:full={variant === 'full'}
-	class:inset={variant === 'inset'}
-	class:inset-middle={variant === 'inset-middle'}
-	role="separator"
-	{...attributes}
-	class="divider {attributes.class}"
+<template {...attributes} role="separator" class={['np-divider', variant, attributes.class]}
 ></template>
 
 <style>
@@ -26,7 +20,7 @@
 	.full {
 		width: 100%;
 	}
-	.divider {
+	.np-divider {
 		height: 1px;
 		display: flex;
 		background-color: var(--np-divider-color, var(--np-color-outline-variant));

package/dist/list/Item.svelte

@@ -35,7 +35,7 @@
 	</div>
 
 	{#if end}
-		<div class="np-item-end {selected ? 'selected ' : ''}">
+		<div class={['np-item-end', selected && 'selected']}>
 			{@render end()}
 		</div>
 	{/if}
@@ -45,17 +45,17 @@
 {/snippet}
 
 {#if disabled}
-	<div aria-disabled="true" class="np-item disabled {attributes.class}">
+	<div aria-disabled="true" class={['np-item disabled', attributes.class]}>
 		{@render content()}
 	</div>
 {:else if attributes.variant === 'text' || attributes.variant === undefined}
-	<div {...attributes} class="{selected ? 'selected ' : ''} np-item {attributes.class}">
+	<div {...attributes} class={['np-item', selected && 'selected', attributes.class]}>
 		{@render content()}
 	</div>
 {:else if attributes.variant === 'button'}
 	<button
 		{...attributes}
-		class="{selected ? 'selected ' : ''} np-item {attributes.class}"
+		class={['np-item', selected && 'selected', attributes.class]}
 		onfocus={() => {
 			focused = true
 		}}
@@ -66,7 +66,7 @@
 {:else if attributes.variant === 'link'}
 	<a
 		{...attributes}
-		class="{selected ? 'selected ' : ''} np-item {attributes.class}"
+		class={['np-item', selected && 'selected', attributes.class]}
 		onfocus={() => {
 			focused = true
 		}}

package/dist/menu/Menu.svelte

@@ -78,12 +78,12 @@
 />
 
 <div
+	{...attributes}
 	bind:this={element}
 	bind:clientWidth
 	bind:clientHeight
-	{...attributes}
 	popover="auto"
-	class="np-menu {attributes.class}"
+	class={['np-menu', attributes.class]}
 	role="menu"
 >
 	{@render children()}
@@ -101,9 +101,8 @@
 		margin: 0;
 		margin-bottom: 2px;
 		margin-top: 2px;
-		top: anchor(bottom);
+		position-area: bottom;
 		position-try-fallbacks: --menu-top;
-		justify-self: anchor-center;
 		transition:
 			display 0.2s allow-discrete,
 			opacity 0.2s linear;

package/dist/ripple/Ripple.svelte

@@ -291,9 +291,12 @@
 <div
 	aria-hidden="true"
 	{...attributes}
-	class="{pressed ? 'np-ripple-pressed' : ''} {hovered || forceHover
-		? 'np-ripple-hovered'
-		: ''} np-ripple-surface {attributes.class}"
+	class={[
+		pressed && 'np-ripple-pressed',
+		(hovered || forceHover) && 'np-ripple-hovered',
+		'np-ripple-surface',
+		attributes.class,
+	]}
 	bind:this={element}
 ></div>
 

package/dist/select/Select.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import Menu from '../menu/Menu.svelte'
+	import TextField from '../text-field/TextField.svelte'
+
+	let { children, value = $bindable() } = $props()
+</script>
+
+<select class="custom-select">
+	<option>Option 1</option>
+	<option>Option 2</option>
+	<option>Option 3</option>
+</select>
+
+<style>
+	.custom-select {
+		appearance: none; /* Entfernt standardmäßigen Stil */
+		-webkit-appearance: none; /* Für Safari */
+		-moz-appearance: none; /* Für Firefox */
+		background-color: none;
+		border-width: 1px;
+		border-style: solid;
+		border-color: var(--np-color-outline);
+		border-radius: var(--np-shape-corner-extra-small);
+		padding: 8px 12px;
+		font-size: 16px;
+		color: var(--np-color-on-surface);
+		cursor: pointer;
+		width: 200px;
+		position: relative;
+	}
+
+	.custom-select:focus {
+		outline: none;
+		border-color: var(--np-color-primary);
+		border-width: 3px;
+	}
+
+	/* Optional: Ein Pfeil-Icon simulieren */
+	.custom-select::after {
+		content: '▼';
+		position: absolute;
+		right: 12px;
+		pointer-events: none;
+	}
+</style>

package/dist/select/Select.svelte.d.ts

@@ -0,0 +1,6 @@
+declare const Select: import("svelte").Component<{
+    children: any;
+    value?: any;
+}, {}, "value">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/select/index.d.ts

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

package/dist/select/index.js

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

package/dist/select/types.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export interface SelectProps extends HTMLAttributes<HTMLDivElement> {
+    forceHover?: boolean;
+    element?: HTMLDivElement;
+    forElement?: HTMLElement;
+}

package/dist/select/types.js

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

package/dist/snackbar/Snackbar.svelte

@@ -46,7 +46,7 @@
 <div
 	{...attributes}
 	{popover}
-	class="np-snackbar {attributes.class}"
+	class={['np-snackbar', attributes.class]}
 	onbeforetoggle={toggleHandler}
 	bind:this={element}
 >

package/dist/text-field/TextField.svelte

@@ -59,9 +59,7 @@
 	})
 </script>
 
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<span
+<label
 	style={(variant === 'outlined'
 		? '--top-space:1rem;--bottom-space:1rem;--floating-label-top:-0.5rem;--floating-label-left:-2.25rem;--_focus-outline-width:3px;'
 		: !label?.length
@@ -69,12 +67,6 @@
 			: '') + style}
 	class="text-field"
 	bind:this={element}
-	onclick={() => {
-		if (attributes.disabled) {
-			return
-		}
-		textElement?.focus()
-	}}
 >
 	<div
 		class="field"
@@ -171,7 +163,7 @@
 			</div>
 		{/if}
 	</div>
-</span>
+</label>
 
 <style>
 	.active-indicator {

package/dist/tooltip/Tooltip.svelte

@@ -46,7 +46,7 @@
 
 <div
 	{...attributes}
-	class="tooltip {attributes.class}"
+	class={['tooltip', attributes.class]}
 	style="top:{calculateTopPos}px;left:{calculateLeftPos}px;{attributes.style}"
 	role="tooltip"
 	bind:clientWidth

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noph-ui",
-  "version": "0.6.12",
+  "version": "0.7.0",
   "license": "MIT",
   "homepage": "https://noph.dev",
   "repository": {
@@ -49,13 +49,13 @@
     "!dist/**/*.spec.*"
   ],
   "peerDependencies": {
-    "svelte": "^5.0.0"
+    "svelte": "^5.16.0"
   },
   "devDependencies": {
     "@material/material-color-utilities": "^0.3.0",
     "@playwright/test": "^1.49.1",
     "@sveltejs/adapter-vercel": "^5.5.2",
-    "@sveltejs/kit": "^2.13.0",
+    "@sveltejs/kit": "^2.15.0",
     "@sveltejs/package": "^2.3.7",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@types/eslint": "^9.6.1",
@@ -66,10 +66,10 @@
     "prettier": "^3.4.2",
     "prettier-plugin-svelte": "^3.3.2",
     "publint": "^0.2.12",
-    "svelte": "^5.15.0",
+    "svelte": "^5.16.0",
     "svelte-check": "^4.1.1",
     "typescript": "^5.7.2",
-    "typescript-eslint": "^8.18.1",
+    "typescript-eslint": "^8.18.2",
     "vite": "^6.0.5",
     "vitest": "^2.1.8"
   },