noph-ui 0.12.2 → 0.12.4

package/README.md

@@ -65,7 +65,7 @@ Beta (No breaking changes expected)
 - Ripple
 - Segmented buttons
 - Snackbar
-- Text fields (Theming missing)
+- Text fields
 
 In progress (Breaking changes expected)
 
@@ -75,8 +75,9 @@ In progress (Breaking changes expected)
 - Navigation Drawer (Docs missing)
 - Navigation Rail (Badge is missing + Docs missing)
 - Tooltips (Positioning missing)
-- Select (iOS issues)
+- Select (iOS issues + Docs missing)
 
 Pending
 
 - Tabs
+- Date Field

package/dist/button/Button.svelte

@@ -3,6 +3,7 @@
 	import Tooltip from '../tooltip/Tooltip.svelte'
 	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements'
 	import type { ButtonProps } from './types.ts'
+	import CircularProgress from '../progress/CircularProgress.svelte'
 
 	let {
 		variant = 'outlined',
@@ -12,6 +13,7 @@
 		title,
 		element = $bindable(),
 		disabled = false,
+		loading = false,
 		keepTooltipOnClick,
 		...attributes
 	}: ButtonProps = $props()
@@ -27,9 +29,14 @@
 </script>
 
 {#snippet content()}
-	{#if !disabled}
+	{#if !disabled && !loading}
 		<Ripple />
 	{/if}
+	{#if loading}
+		<div class="circular-progress">
+			<CircularProgress indeterminate />
+		</div>
+	{/if}
 	<div class="button-icon">
 		{#if start}
 			{@render start()}
@@ -47,16 +54,17 @@
 	</div>
 {/snippet}
 
-{#if isButton(attributes) || disabled}
+{#if isButton(attributes) || disabled || loading}
 	<button
 		{...attributes as HTMLButtonAttributes}
 		aria-describedby={title ? tooltipId : attributes['aria-describedby']}
 		aria-label={title || attributes['aria-label']}
-		{disabled}
+		disabled={disabled || loading}
 		bind:this={element}
 		class={[
 			'np-button',
-			disabled ? `${variant}-disabled disabled` : `${variant} enabled`,
+			loading ? 'np-loading' : '',
+			disabled || loading ? `${variant}-disabled disabled` : `${variant} enabled`,
 			attributes.class,
 		]}
 	>
@@ -85,6 +93,18 @@
 		text-overflow: ellipsis;
 		text-wrap: nowrap;
 	}
+	.circular-progress {
+		--np-circular-progress-size: calc(var(--button-height) * 0.75);
+		--np-circular-progress-color: color-mix(in srgb, var(--np-color-on-surface) 38%, transparent);
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+	}
+	.np-loading .button-icon,
+	.np-loading .children-wrapper {
+		opacity: 0;
+	}
 	.np-button {
 		box-sizing: border-box;
 		font-family: inherit;

package/dist/button/types.d.ts

@@ -6,6 +6,7 @@ interface ButtonButtonProps extends HTMLButtonAttributes {
     end?: Snippet | undefined;
     element?: HTMLElement;
     disabled?: boolean;
+    loading?: boolean;
     keepTooltipOnClick?: boolean;
 }
 interface ButtonAnchorProps extends HTMLAnchorAttributes {
@@ -15,6 +16,7 @@ interface ButtonAnchorProps extends HTMLAnchorAttributes {
     element?: HTMLElement;
     keepTooltipOnClick?: boolean;
     disabled?: boolean;
+    loading?: boolean;
 }
 interface IconButtonButtonProps extends HTMLButtonAttributes {
     variant?: 'text' | 'filled' | 'outlined' | 'tonal';

package/dist/checkbox/Checkbox.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { CheckboxProps } from './types.ts';
-declare const Checkbox: import("svelte").Component<CheckboxProps, {}, "element" | "group" | "checked" | "indeterminate">;
+declare const Checkbox: import("svelte").Component<CheckboxProps, {}, "element" | "group" | "indeterminate" | "checked">;
 type Checkbox = ReturnType<typeof Checkbox>;
 export default Checkbox;

package/dist/select/Select.svelte

@@ -204,6 +204,9 @@
 	--np-menu-position-area-fallback="top span-right"
 	--np-menu-position-area="bottom span-right"
 	--np-menu-margin="2px 0"
+	--np-menu-container-shape={variant === 'outlined'
+		? 'var(--np-outlined-select-text-field-container-shape)'
+		: 'var(--np-filled-select-text-field-container-shape)'}
 	anchor={element}
 	ontoggle={({ newState }) => {
 		if (newState === 'open') {
@@ -293,7 +296,7 @@
 	}
 	.background {
 		background: var(
-			--np-text-field-filled-background-color,
+			--np-filled-select-text-field-container-color,
 			var(--np-color-surface-container-highest)
 		);
 	}
@@ -319,14 +322,32 @@
 		position: relative;
 	}
 	.outlined .container-overflow {
-		border-start-start-radius: var(--np-shape-corner-extra-small);
-		border-start-end-radius: var(--np-shape-corner-extra-small);
-		border-end-end-radius: var(--np-shape-corner-extra-small);
-		border-end-start-radius: var(--np-shape-corner-extra-small);
+		border-start-start-radius: var(
+			--np-outlined-select-text-field-container-shape,
+			var(--np-shape-corner-extra-small)
+		);
+		border-start-end-radius: var(
+			--np-outlined-select-text-field-container-shape,
+			var(--np-shape-corner-extra-small)
+		);
+		border-end-end-radius: var(
+			--np-outlined-select-text-field-container-shape,
+			var(--np-shape-corner-extra-small)
+		);
+		border-end-start-radius: var(
+			--np-outlined-select-text-field-container-shape,
+			var(--np-shape-corner-extra-small)
+		);
 	}
 	.container-overflow {
-		border-start-start-radius: var(--np-shape-corner-extra-small);
-		border-start-end-radius: var(--np-shape-corner-extra-small);
+		border-start-start-radius: var(
+			--np-filled-select-text-field-container-shape,
+			var(--np-shape-corner-extra-small)
+		);
+		border-start-end-radius: var(
+			--np-filled-select-text-field-container-shape,
+			var(--np-shape-corner-extra-small)
+		);
 		border-end-end-radius: var(--np-shape-corner-none);
 		border-end-start-radius: var(--np-shape-corner-none);
 		display: flex;

package/dist/text-field/TextField.svelte

@@ -63,10 +63,10 @@
 
 <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-text-color:var(--np-outlined-text-field-label-text-color);--top-space:1rem;--bottom-space:1rem;--floating-label-top:-0.5rem;--floating-label-left:-2.25rem;--_focus-outline-width:3px;'
 		: !label?.length
-			? '--top-space:1rem;--bottom-space:1rem;'
-			: '') + style}
+			? '--_label-text-color:var(--np-filled-text-field-label-text-color);--top-space:1rem;--bottom-space:1rem; '
+			: '--_label-text-color:var(--np-filled-text-field-label-text-color); ') + style}
 	class={['text-field', attributes.class]}
 	bind:this={element}
 >
@@ -197,7 +197,10 @@
 		width: 100%;
 	}
 	.active-indicator::after {
-		border-bottom-color: var(--np-color-primary);
+		border-bottom-color: var(
+			--np-filled-text-field-focus-active-indicator-color,
+			var(--np-color-primary)
+		);
 		border-bottom-width: 3px;
 	}
 	.error .active-indicator::before {
@@ -213,7 +216,7 @@
 	}
 	.background {
 		background: var(
-			--np-text-field-filled-background-color,
+			--np-filled-text-field-container-color,
 			var(--np-color-surface-container-highest)
 		);
 	}
@@ -239,14 +242,32 @@
 		position: relative;
 	}
 	.outlined .container-overflow {
-		border-start-start-radius: var(--np-shape-corner-extra-small);
-		border-start-end-radius: var(--np-shape-corner-extra-small);
-		border-end-end-radius: var(--np-shape-corner-extra-small);
-		border-end-start-radius: var(--np-shape-corner-extra-small);
+		border-start-start-radius: var(
+			--np-outlined-text-field-container-shape,
+			var(--np-shape-corner-extra-small)
+		);
+		border-start-end-radius: var(
+			--np-outlined-text-field-container-shape,
+			var(--np-shape-corner-extra-small)
+		);
+		border-end-end-radius: var(
+			--np-outlined-text-field-container-shape,
+			var(--np-shape-corner-extra-small)
+		);
+		border-end-start-radius: var(
+			--np-outlined-text-field-container-shape,
+			var(--np-shape-corner-extra-small)
+		);
 	}
 	.container-overflow {
-		border-start-start-radius: var(--np-shape-corner-extra-small);
-		border-start-end-radius: var(--np-shape-corner-extra-small);
+		border-start-start-radius: var(
+			--np-filled-text-field-container-shape,
+			var(--np-shape-corner-extra-small)
+		);
+		border-start-end-radius: var(
+			--np-filled-text-field-container-shape,
+			var(--np-shape-corner-extra-small)
+		);
 		border-end-end-radius: var(--np-shape-corner-none);
 		border-end-start-radius: var(--np-shape-corner-none);
 		display: flex;
@@ -543,7 +564,7 @@
 	}
 	.field:has(input:focus-visible) .label,
 	.field:has(textarea:focus-visible) .label {
-		color: var(--np-color-primary);
+		color: var(--_label-text-color, var(--np-color-primary));
 	}
 	.error .label,
 	.error:has(input:focus-visible) .label,
@@ -698,7 +719,7 @@
 
 	.field:has(input:focus-visible) .np-outline,
 	.field:has(textarea:focus-visible) .np-outline {
-		border-color: var(--np-color-primary);
+		border-color: var(--np-outlined-text-field-focus-outline-color, var(--np-color-primary));
 		color: var(--np-color-primary);
 	}
 	.error .np-outline,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noph-ui",
-  "version": "0.12.2",
+  "version": "0.12.4",
   "license": "MIT",
   "homepage": "https://noph.dev",
   "repository": {
@@ -65,8 +65,8 @@
     "globals": "^15.14.0",
     "prettier": "^3.4.2",
     "prettier-plugin-svelte": "^3.3.3",
-    "publint": "^0.3.3",
-    "svelte": "^5.19.7",
+    "publint": "^0.3.4",
+    "svelte": "^5.19.9",
     "svelte-check": "^4.1.4",
     "typescript": "^5.7.3",
     "typescript-eslint": "^8.23.0",