noph-ui 0.24.17 → 0.25.0

package/dist/checkbox/Checkbox.svelte

@@ -8,21 +8,22 @@
 		element = $bindable(),
 		group = $bindable(),
 		style,
+		value,
 		...attributes
 	}: CheckboxProps = $props()
 
 	$effect(() => {
-		if (group && attributes.value) {
-			checked = group.includes(attributes.value)
+		if (group && value) {
+			checked = group.includes(value)
 		}
 	})
 
 	$effect(() => {
-		if (attributes.value && group) {
-			const index = group.indexOf(attributes.value)
+		if (value && group) {
+			const index = group.indexOf(value)
 			if (checked) {
 				if (index < 0) {
-					group?.push(attributes.value)
+					group?.push(value)
 					group = group
 				}
 			} else {
@@ -36,59 +37,48 @@
 	let inputEl: HTMLInputElement | undefined = $state()
 </script>
 
-<div {style} class={['np-host', attributes.class]} bind:this={element}>
-	<div class="np-container">
-		<label class="np-input-wrapper">
-			{#if !attributes.disabled}
-				<Ripple forElement={inputEl} />
-			{/if}
-			<input
-				{...attributes}
-				class="np-input"
-				type="checkbox"
-				bind:indeterminate
-				bind:checked
-				bind:this={inputEl}
-				aria-checked={indeterminate ? 'mixed' : undefined}
-			/>
-		</label>
-
-		<div class="np-outline"></div>
-		<div class="np-background"></div>
-		<svg class="np-icon" viewBox="0 0 18 18" aria-hidden="true">
-			<rect class="mark short" />
-			<rect class="mark long" />
-		</svg>
+<div {style} class={['np-container', attributes.class]} bind:this={element}>
+	<div class="np-input-wrapper">
+		{#if !attributes.disabled}
+			<Ripple forElement={inputEl} />
+		{/if}
+		<input
+			{...attributes}
+			{value}
+			class="np-input"
+			type="checkbox"
+			bind:indeterminate
+			bind:checked
+			bind:this={inputEl}
+			aria-checked={indeterminate ? 'mixed' : undefined}
+		/>
 	</div>
+	<div class="np-outline"></div>
+	<div class="np-background"></div>
+	<svg class="np-icon" viewBox="0 0 18 18" aria-hidden="true">
+		<rect class="mark short" />
+		<rect class="mark long" />
+	</svg>
 </div>
 
 <style>
-	.np-host {
-		border-start-start-radius: var(--np-checkbox-container-shape, 2px);
-		border-start-end-radius: var(--np-checkbox-container-shape, 2px);
-		border-end-end-radius: var(--np-checkbox-container-shape, 2px);
-		border-end-start-radius: var(--np-checkbox-container-shape, 2px);
+	.np-container {
+		border-radius: var(--np-checkbox-container-shape, 2px);
 		display: inline-flex;
+		place-content: center;
+		place-items: center;
+		position: relative;
 		height: 18px;
 		position: relative;
 		vertical-align: top;
 		width: 18px;
-		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 		cursor: pointer;
+		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 		margin: var(--np-checkbox-margin, max(0px, (48px - 18px)/2));
 	}
-	.np-host:has(input:disabled) {
+	.np-container:has(input:disabled) {
 		cursor: default;
 	}
-	.np-container {
-		border-radius: inherit;
-		display: flex;
-		height: 100%;
-		place-content: center;
-		place-items: center;
-		position: relative;
-		width: 100%;
-	}
 	.np-input {
 		height: 48px;
 		width: 48px;
@@ -144,11 +134,8 @@
 		border-width: 2px;
 		box-sizing: border-box;
 	}
-	:where(:hover) .np-outline {
-		border-color: var(--np-color-on-surface);
-		border-width: 2px;
-	}
-	:where(:focus-within) .np-outline {
+	.np-container:focus-within .np-outline,
+	.np-container:hover .np-outline {
 		border-color: var(--np-color-on-surface);
 		border-width: 2px;
 	}

package/dist/menu/Menu.svelte

@@ -8,7 +8,6 @@
 		showPopover = $bindable(),
 		hidePopover = $bindable(),
 		open = $bindable(),
-		quick = false,
 		style,
 		popover = 'auto',
 		anchor,
@@ -112,7 +111,7 @@
 		attributes.ontoggle?.(event)
 	}}
 	{popover}
-	class={['np-menu-container', !quick && 'np-animate', attributes.class]}
+	class={['np-menu-container', attributes.class]}
 	{style}
 >
 	<div class="np-menu">
@@ -121,7 +120,18 @@
 </div>
 
 <style>
-	.np-menu-container {
+	.np-menu {
+		overflow-y: auto;
+		overflow-x: hidden;
+		flex: 1;
+		padding: 0.5rem 0;
+		scrollbar-color: var(--np-color-on-surface-variant) transparent;
+		scrollbar-width: thin;
+	}
+	:global(.np-menu .np-divider) {
+		margin-block: 0.5rem;
+	}
+	.np-menu-container[popover] {
 		color: var(--np-menu-text-color, var(--np-color-on-surface));
 		background-color: var(--np-menu-container-color, var(--np-color-surface-container));
 		border: none;
@@ -130,37 +140,21 @@
 		box-shadow: var(--np-elevation-2);
 		margin: var(--np-menu-margin, 2px);
 		inset: auto;
-		position: fixed;
-		bottom: anchor(bottom);
+		transition:
+			display 0.2s allow-discrete,
+			opacity 0.2s linear;
+		opacity: 0;
 		justify-self: var(--np-menu-justify-self, anchor-center);
 		position-area: var(--np-menu-position-area, bottom center);
 		position-try: normal flip-block;
 		z-index: 1000;
 	}
 
-	.np-animate[popover]:popover-open {
+	.np-menu-container:popover-open {
 		opacity: 1;
-		animation: fadeIn 0.2s linear;
-	}
-
-	@keyframes fadeIn {
-		from {
+		display: flex;
+		@starting-style {
 			opacity: 0;
 		}
-		to {
-			opacity: 1;
-		}
-	}
-
-	.np-menu {
-		overflow-y: auto;
-		overflow-x: hidden;
-		flex: 1;
-		padding: 0.5rem 0;
-		scrollbar-color: var(--np-color-on-surface-variant) transparent;
-		scrollbar-width: thin;
-	}
-	:global(.np-menu .np-divider) {
-		margin-block: 0.5rem;
 	}
 </style>

package/dist/menu/types.d.ts

@@ -6,7 +6,6 @@ export interface MenuProps extends HTMLAttributes<HTMLDivElement> {
     showPopover?: () => void;
     hidePopover?: () => void;
     element?: HTMLDivElement;
-    quick?: boolean;
     open?: boolean;
 }
 interface ButtonProps extends HTMLButtonAttributes {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noph-ui",
-  "version": "0.24.17",
+  "version": "0.25.0",
   "license": "MIT",
   "homepage": "https://noph.dev",
   "repository": {