noph-ui 0.10.13 → 0.11.1

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/IconButton.svelte

@@ -125,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 {
@@ -176,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 {
@@ -255,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/chip/FilterChip.svelte

@@ -0,0 +1,186 @@
+<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;
+		background-color: var(--np-color-surface-container-low);
+	}
+	.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/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/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.13",
+  "version": "0.11.1",
   "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;