noph-ui 0.10.12 → 0.11.0

package/README.md

@@ -69,15 +69,14 @@ Beta (No breaking changes expected)
 
 In progress (Breaking changes expected)
 
-- Chips
+- Chips (Docs missing)
 - Dialogs (Fullscreen + Docs missing)
 - Menus (Positioning missing + Docs missing)
-- Navigation Rail (Badge is missing)
+- Navigation Drawer (Docs missing)
+- Navigation Rail (Badge is missing + Docs missing)
 - Tooltips (Positioning missing)
-- Select
+- Select (iOS issues)
 
 Pending
 
-- Sliders
-- Switch
 - Tabs

package/dist/button/Button.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import Ripple from '../ripple/Ripple.svelte'
 	import Tooltip from '../tooltip/Tooltip.svelte'
-	import { generateUUIDv4 } from '../utils.js'
 	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements'
 	import type { ButtonProps } from './types.ts'
 
@@ -17,7 +16,7 @@
 		...attributes
 	}: ButtonProps = $props()
 
-	let tooltipId = $state(title ? generateUUIDv4() : '')
+	let tooltipId = $state(title ? crypto.randomUUID() : '')
 
 	const isButton = (obj: unknown): obj is HTMLButtonAttributes => {
 		return (obj as HTMLAnchorAttributes).href === undefined

package/dist/button/IconButton.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
 	import Ripple from '../ripple/Ripple.svelte'
 	import Tooltip from '../tooltip/Tooltip.svelte'
-	import { generateUUIDv4 } from '../utils.js'
 	import type { IconButtonProps } from './types.ts'
-	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements'
+	import type {
+		HTMLAnchorAttributes,
+		HTMLButtonAttributes,
+		MouseEventHandler,
+	} from 'svelte/elements'
 
 	let {
 		variant = 'text',
@@ -15,10 +18,11 @@
 		selected = false,
 		selectedIcon,
 		keepTooltipOnClick,
+		onclick,
 		...attributes
 	}: IconButtonProps = $props()
 
-	let tooltipId = $state(title ? generateUUIDv4() : '')
+	let tooltipId = $state(title ? crypto.randomUUID() : '')
 	let selectedState = $state(!toggle || selected)
 	let touchEl: HTMLSpanElement | undefined = $state()
 
@@ -28,14 +32,6 @@
 	const isLink = (obj: unknown): obj is HTMLAnchorAttributes => {
 		return (obj as HTMLAnchorAttributes).href !== undefined
 	}
-
-	$effect(() => {
-		if (toggle) {
-			element?.addEventListener('click', () => {
-				selectedState = !selectedState
-			})
-		}
-	})
 </script>
 
 {#snippet content()}
@@ -58,6 +54,12 @@
 		{...attributes as HTMLButtonAttributes}
 		{disabled}
 		bind:this={element}
+		onclick={(event) => {
+			if (toggle) {
+				selectedState = !selectedState
+			}
+			;(onclick as MouseEventHandler<HTMLButtonElement>)?.(event)
+		}}
 		class={[
 			'np-icon-button',
 			disabled ? `${variant}-disabled disabled` : `${variant} enabled`,
@@ -123,8 +125,10 @@
 	}
 	.text-disabled {
 		border-radius: var(--np-icon-button-container-shape, var(--np-shape-corner-full));
-		height: var(--np-icon-button-container-height, 2.5rem);
-		width: var(--np-icon-button-container-width, 2.5rem);
+		--_button-height: var(--np-icon-button-container-height, 2.5rem);
+		--_button-width: var(--np-icon-button-container-width, 2.5rem);
+		height: var(--_button-height);
+		width: var(--_button-width);
 		--_icon-size: var(--np-icon-button-icon-size);
 	}
 	.filled-disabled {
@@ -174,8 +178,10 @@
 		--np-ripple-pressed-color: var(--np-icon-button-icon-color, var(--np-color-on-surface-variant));
 		color: var(--np-icon-button-icon-color, var(--np-color-on-surface-variant));
 		border-radius: var(--np-icon-button-container-shape, var(--np-shape-corner-full));
-		height: var(--np-icon-button-container-height, 2.5rem);
-		width: var(--np-icon-button-container-width, 2.5rem);
+		--_button-height: var(--np-icon-button-container-height, 2.5rem);
+		--_button-width: var(--np-icon-button-container-width, 2.5rem);
+		height: var(--_button-height);
+		width: var(--_button-width);
 		--_icon-size: var(--np-icon-button-icon-size);
 	}
 	.text.toggle {
@@ -253,7 +259,7 @@
 	}
 	.np-touch {
 		position: absolute;
-		height: max(48px, 100%);
-		width: max(48px, 100%);
+		height: max(calc(var(--_button-height, 40px) + 8px), 100%);
+		width: max(calc(var(--_button-width, 40px) + 8px), 100%);
 	}
 </style>

package/dist/card/Card.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Ripple from '../ripple/Ripple.svelte'
+	import type { FocusEventHandler } from 'svelte/elements'
 	import type { CardProps } from './types.ts'
 
 	let {
@@ -12,6 +13,8 @@
 		supportingText,
 		action,
 		children,
+		onblur,
+		onfocus,
 		...attributes
 	}: CardProps = $props()
 
@@ -28,16 +31,6 @@
 			})
 		}
 	})
-	$effect(() => {
-		if (element) {
-			element.addEventListener('focus', () => {
-				focused = true
-			})
-			element.addEventListener('blur', () => {
-				focused = false
-			})
-		}
-	})
 </script>
 
 {#snippet content()}
@@ -77,6 +70,12 @@
 		{...attributes}
 		bind:this={element}
 		aria-disabled={disabled}
+		onfocus={(event) => {
+			;(onfocus as FocusEventHandler<HTMLDivElement>)?.(event)
+		}}
+		onblur={(event) => {
+			;(onblur as FocusEventHandler<HTMLDivElement>)?.(event)
+		}}
 		class={[
 			'np-card-container',
 			`np-card-${variant}`,
@@ -91,6 +90,14 @@
 		aria-disabled={disabled}
 		{...attributes}
 		bind:this={element}
+		onfocus={(event) => {
+			focused = true
+			;(onfocus as FocusEventHandler<HTMLButtonElement>)?.(event)
+		}}
+		onblur={(event) => {
+			focused = false
+			;(onblur as FocusEventHandler<HTMLButtonElement>)?.(event)
+		}}
 		{disabled}
 		class={[
 			'np-card-container',
@@ -108,11 +115,13 @@
 		aria-disabled={disabled}
 		tabindex={disabled ? -1 : undefined}
 		role="link"
-		onfocusin={() => {
+		onfocus={(event) => {
 			focused = true
+			;(onfocus as FocusEventHandler<HTMLAnchorElement>)?.(event)
 		}}
-		onfocusout={() => {
+		onblur={(event) => {
 			focused = false
+			;(onblur as FocusEventHandler<HTMLAnchorElement>)?.(event)
 		}}
 		class={[
 			'np-card-container',

package/dist/chip/FilterChip.svelte

@@ -0,0 +1,185 @@
+<script lang="ts">
+	import IconButton from '../button/IconButton.svelte'
+	import CheckIcon from '../icons/CheckIcon.svelte'
+	import CloseIcon from '../icons/CloseIcon.svelte'
+	import Ripple from '../ripple/Ripple.svelte'
+	import type { FilterChipProps } from './types.ts'
+
+	let {
+		selected = $bindable(false),
+		removable = false,
+		elevated = false,
+		disabled = false,
+		label = '',
+		icon,
+		...attributes
+	}: FilterChipProps = $props()
+
+	let chipBtn: HTMLButtonElement | undefined = $state()
+</script>
+
+<div
+	{...attributes}
+	class={[
+		'np-filter-chip',
+		elevated ? 'np-filter-chip-elevated' : 'np-filter-chip-default',
+		icon || selected ? 'np-filter-chip-icon' : '',
+		selected ? 'np-filter-chip-selected' : '',
+		removable ? 'np-filter-chip-removable' : '',
+		disabled ? 'np-filter-chip-disabled' : '',
+		attributes.class,
+	]}
+>
+	<button
+		bind:this={chipBtn}
+		class="np-filter-chip-btn"
+		{disabled}
+		onclick={() => {
+			console.log('click')
+			selected = !selected
+		}}
+	>
+		{#if icon && !selected}
+			{@render icon()}
+		{/if}
+		{#if selected}
+			<CheckIcon width={18} height={18} />
+		{/if}
+		<div class="np-chip-label">{label}</div>
+	</button>
+	{#if !disabled}
+		<Ripple forElement={chipBtn} />
+	{/if}
+	{#if removable}
+		<IconButton
+			{disabled}
+			--np-icon-button-container-height="1.75rem"
+			--np-icon-button-container-width="1.75rem"
+			--np-icon-button-icon-size="1.125rem"
+			onclick={(event: Event) => {
+				event.stopPropagation()
+			}}
+		>
+			<CloseIcon />
+		</IconButton>
+	{/if}
+</div>
+
+<style>
+	.np-filter-chip {
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+		user-select: none;
+		border-radius: var(--np-filter-chip-container-shape, var(--np-shape-corner-small));
+		--np-icon-button-icon-color: var(--np-color-on-surface-variant);
+		--np-icon-size: 1.125rem;
+	}
+	.np-filter-chip-btn {
+		box-sizing: border-box;
+		font-family: inherit;
+		background-color: transparent;
+		border-width: 0;
+		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+		cursor: pointer;
+		display: inline-flex;
+		align-items: center;
+		padding: 0;
+		height: 2rem;
+		color: var(--np-color-on-surface-variant);
+		fill: currentColor;
+		gap: 0.5rem;
+		z-index: 1;
+		padding-left: 1rem;
+		padding-right: 1rem;
+	}
+	.np-filter-chip-icon .np-filter-chip-btn {
+		padding-left: 0.5rem;
+	}
+	.np-filter-chip-removable {
+		padding-right: 2px;
+	}
+	.np-filter-chip-removable .np-filter-chip-btn {
+		padding-right: 2px;
+	}
+	.np-chip-label {
+		line-height: 1.25rem;
+		font-size: 0.875rem;
+		font-weight: 500;
+	}
+	.np-filter-chip::before {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		pointer-events: none;
+	}
+	.np-filter-chip-default::before {
+		border-width: 1px;
+		border-style: solid;
+		border-color: var(--np-filter-chip-outline-color, var(--np-color-outline-variant));
+	}
+	.np-filter-chip-selected::before {
+		border-width: 0;
+		background-color: var(--np-color-secondary-container);
+	}
+	.np-filter-chip-elevated {
+		border-width: 0;
+		box-shadow: var(--np-elevation-1);
+	}
+	.np-filter-chip-selected {
+		--np-icon-button-icon-color: var(--np-color-on-secondary-container);
+	}
+	.np-filter-chip-selected .np-filter-chip-btn {
+		color: var(--np-color-on-secondary-container);
+	}
+	.np-filter-chip-btn:focus-visible {
+		outline-width: 0;
+	}
+	.np-filter-chip:has(.np-filter-chip-btn:focus-visible) {
+		outline-style: solid;
+		outline-color: var(--np-color-primary);
+		outline-width: 3px;
+		outline-offset: 2px;
+		animation: focusAnimation 0.3s ease forwards;
+	}
+	@keyframes focusAnimation {
+		0% {
+			outline-width: 3px;
+		}
+		50% {
+			outline-width: 6px;
+		}
+		100% {
+			outline-width: 3px;
+		}
+	}
+
+	.np-filter-chip-disabled .np-filter-chip-btn {
+		cursor: default;
+		color: var(--np-color-on-surface);
+		opacity: 0.38;
+	}
+	.np-filter-chip-disabled.np-filter-chip-elevated {
+		box-shadow: none;
+	}
+	.np-filter-chip-disabled.np-filter-chip-selected::before {
+		opacity: 0.12;
+	}
+	:not(.np-filter-chip-selected).np-filter-chip-disabled.np-filter-chip-default::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		pointer-events: none;
+		border-width: 1px;
+		border-style: solid;
+		border-color: var(--np-color-on-surface);
+		opacity: 0.12;
+	}
+	.np-filter-chip-disabled::before {
+		background-color: var(--np-color-on-surface);
+		opacity: 0.12;
+		border-width: 0;
+	}
+</style>

package/dist/chip/FilterChip.svelte.d.ts

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

package/dist/chip/index.d.ts

@@ -1 +1 @@
-export { default as Chip } from './Chip.svelte';
+export { default as FilterChip } from './FilterChip.svelte';

package/dist/chip/index.js

@@ -1 +1 @@
-export { default as Chip } from './Chip.svelte';
+export { default as FilterChip } from './FilterChip.svelte';

package/dist/chip/types.d.ts

@@ -1 +1,10 @@
-export {};
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface FilterChipProps extends HTMLAttributes<HTMLDivElement> {
+    selected?: boolean;
+    removable?: boolean;
+    disabled?: boolean;
+    elevated?: boolean;
+    label?: string;
+    icon?: Snippet;
+}

package/dist/chip/types.js

@@ -1 +1 @@
-"use strict";
+export {};

package/dist/icons/CheckIcon.svelte

@@ -1,3 +1,13 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"
+<script lang="ts">
+	let {
+		height = 24,
+		width = 24,
+	}: {
+		height?: number
+		width?: number
+	} = $props()
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" {height} viewBox="0 -960 960 960" {width}
 	><path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z" /></svg
 >

package/dist/icons/CheckIcon.svelte.d.ts

@@ -1,26 +1,7 @@
-export default CheckIcon;
-type CheckIcon = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
+type $$ComponentProps = {
+    height?: number;
+    width?: number;
 };
-declare const CheckIcon: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
+declare const CheckIcon: import("svelte").Component<$$ComponentProps, {}, "">;
+type CheckIcon = ReturnType<typeof CheckIcon>;
+export default CheckIcon;

package/dist/icons/CloseIcon.svelte

@@ -1,4 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"
+<script lang="ts">
+	let {
+		height = 24,
+		width = 24,
+	}: {
+		height?: number
+		width?: number
+	} = $props()
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" {height} viewBox="0 -960 960 960" {width}
 	><path
 		d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"
 	/></svg

package/dist/icons/CloseIcon.svelte.d.ts

@@ -1,26 +1,7 @@
-export default CloseIcon;
-type CloseIcon = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
+type $$ComponentProps = {
+    height?: number;
+    width?: number;
 };
-declare const CloseIcon: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
+declare const CloseIcon: import("svelte").Component<$$ComponentProps, {}, "">;
+type CloseIcon = ReturnType<typeof CloseIcon>;
+export default CloseIcon;

package/dist/menu/Menu.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { generateUUIDv4 } from '../utils.js'
 	import type { MenuProps } from './types.ts'
 
 	let {
@@ -75,7 +74,7 @@
 					{ passive: true },
 				)
 			} else if (!anchor.style.getPropertyValue('anchor-name')) {
-				const generatedId = `--${generateUUIDv4()}`
+				const generatedId = `--${crypto.randomUUID()}`
 				element.style.setProperty('position-anchor', generatedId)
 				anchor.style.setProperty('anchor-name', generatedId)
 			}

package/dist/select/Select.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import Menu from '../menu/Menu.svelte'
 	import { isFirstInvalidControlInForm } from '../text-field/report-validity.js'
-	import { generateUUIDv4 } from '../utils.js'
 	import type { SelectProps } from './types.ts'
 	import Item from '../list/Item.svelte'
 	import { tick } from 'svelte'
@@ -35,7 +34,7 @@
 	let selectElement: HTMLSelectElement | undefined = $state()
 	let menuElement: HTMLDivElement | undefined = $state()
 	let field: HTMLDivElement | undefined = $state()
-	let menuId = $state(`--select-${generateUUIDv4()}`)
+	let menuId = $state(`--select-${crypto.randomUUID()}`)
 	let menuOpen = $state(false)
 	let selectedLabel = $derived.by<string>(() => {
 		return options.find((option) => option.value === value)?.label || ''

package/dist/themes/defaultTheme.css

@@ -63,6 +63,7 @@
 		rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;
 	--np-shape-corner-full: 9999px;
 	--np-shape-corner-extra-small: 0.25rem;
+	--np-shape-corner-small: 0.5rem;
 	--np-shape-corner-medium: 0.75rem;
 	--np-shape-corner-large: 1rem;
 	--np-shape-corner-extra-large: 1.75rem;

package/dist/tooltip/Tooltip.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { generateUUIDv4 } from '../utils.js'
 	import type { TooltipProps } from './types.ts'
 
 	let {
@@ -46,7 +45,7 @@
 		if (anchor && element) {
 			if ('anchorName' in document.documentElement.style) {
 				const anchorName = anchor.style.getPropertyValue('anchor-name')
-				const generatedId = anchorName || `--${generateUUIDv4()}`
+				const generatedId = anchorName || `--${crypto.randomUUID()}`
 				element.style.setProperty('position-anchor', generatedId)
 				if (!anchorName) {
 					anchor.style.setProperty('anchor-name', generatedId)

package/dist/types.d.ts

@@ -2,6 +2,7 @@ export * from './button/types.ts';
 export * from './card/types.ts';
 export * from './checkbox/types.ts';
 export * from './chip/types.ts';
+export * from './dialog/types.js';
 export * from './divider/types.js';
 export * from './list/types.ts';
 export * from './menu/types.ts';
@@ -10,6 +11,7 @@ export * from './navigation-rail/types.ts';
 export * from './progress/types.js';
 export * from './radio/types.ts';
 export * from './ripple/types.ts';
+export * from './select/types.js';
 export * from './snackbar/types.ts';
 export * from './text-field/types.ts';
 export * from './tooltip/types.ts';

package/dist/types.js

@@ -2,6 +2,7 @@ export * from './button/types.ts';
 export * from './card/types.ts';
 export * from './checkbox/types.ts';
 export * from './chip/types.ts';
+export * from './dialog/types.js';
 export * from './divider/types.js';
 export * from './list/types.ts';
 export * from './menu/types.ts';
@@ -10,6 +11,7 @@ export * from './navigation-rail/types.ts';
 export * from './progress/types.js';
 export * from './radio/types.ts';
 export * from './ripple/types.ts';
+export * from './select/types.js';
 export * from './snackbar/types.ts';
 export * from './text-field/types.ts';
 export * from './tooltip/types.ts';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noph-ui",
-  "version": "0.10.12",
+  "version": "0.11.0",
   "license": "MIT",
   "homepage": "https://noph.dev",
   "repository": {
@@ -66,7 +66,7 @@
     "prettier": "^3.4.2",
     "prettier-plugin-svelte": "^3.3.3",
     "publint": "^0.3.2",
-    "svelte": "^5.19.3",
+    "svelte": "^5.19.4",
     "svelte-check": "^4.1.4",
     "typescript": "^5.7.3",
     "typescript-eslint": "^8.22.0",

package/dist/chip/Chip.svelte

@@ -1,14 +0,0 @@
-<script lang="ts">
-	let { ...attributes } = $props()
-</script>
-
-<template class="divider {attributes.class}"></template>
-
-<style>
-	.divider {
-		height: 1px;
-		width: 100%;
-		display: flex;
-		background-color: var(--np-color-outline-variant);
-	}
-</style>

package/dist/chip/Chip.svelte.d.ts

@@ -1,3 +0,0 @@
-declare const Chip: import("svelte").Component<Record<string, any>, {}, "">;
-type Chip = ReturnType<typeof Chip>;
-export default Chip;

package/dist/utils.d.ts

@@ -1,2 +0,0 @@
-declare const generateUUIDv4: () => string;
-export { generateUUIDv4 };

package/dist/utils.js

@@ -1,7 +0,0 @@
-const generateUUIDv4 = () => {
-    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
-        const r = (Math.random() * 16) | 0, v = c === 'x' ? r : (r & 0x3) | 0x8;
-        return v.toString(16);
-    });
-};
-export { generateUUIDv4 };