noph-ui 0.21.15 → 0.22.0

package/dist/badge/Badge.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	let { label }: { label?: string } = $props()
+</script>
+
+<div class="np-badge-container">
+	{#if label}
+		<div class="np-badge-label">
+			{label}
+		</div>
+	{:else}
+		<div class="np-badge-no-label"></div>
+	{/if}
+</div>
+
+<style>
+	.np-badge-container {
+		display: inline-block;
+		background-color: var(--np-color-error);
+		border-radius: var(--np-shape-corner-full);
+		text-align: center;
+		position: var(--np-badge-position, absolute);
+		top: var(--np-badge-top, 0);
+		left: var(--np-badge-left, auto);
+		right: var(--np-badge-right, auto);
+	}
+	.np-badge-no-label {
+		width: 0.375rem;
+		height: 0.375rem;
+	}
+	.np-badge-label {
+		color: var(--np-color-on-error);
+		padding-inline: 0.25rem;
+		min-width: 0.5rem;
+		font-weight: 500;
+		font-size: 0.6875rem;
+		height: 1rem;
+		display: flex;
+		align-items: center;
+		text-align: center;
+		justify-content: center;
+	}
+</style>

package/dist/badge/Badge.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    label?: string;
+};
+declare const Badge: import("svelte").Component<$$ComponentProps, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/tabs/Tab.svelte

@@ -2,6 +2,7 @@
 	import Ripple from '../ripple/Ripple.svelte'
 	import { getContext } from 'svelte'
 	import type { TabProps } from './types.ts'
+	import Badge from '../badge/Badge.svelte'
 
 	let {
 		children,
@@ -12,6 +13,8 @@
 		value,
 		href,
 		variant = 'primary',
+		badge = false,
+		badgeLabel,
 		...attributes
 	}: TabProps = $props()
 	let activeTab: { value: string | number; node: HTMLElement } = getContext('activeTab')
@@ -82,8 +85,23 @@
 				!inlineIcon && variant === 'primary' && children && icon && 'np-tab-no-inline',
 			]}
 		>
-			{@render icon?.()}
-			{@render children?.()}
+			{#if icon}
+				{#if badge && variant === 'primary' && !inlineIcon}
+					<div class="np-tab-icon-badge">
+						<Badge label={badgeLabel} />
+						{@render icon?.()}
+					</div>
+				{:else}
+					{@render icon?.()}
+				{/if}
+			{/if}
+			{#if badge && (!icon || variant === 'secondary' || inlineIcon)}
+				<div style="--np-badge-position:static;">
+					<span class="np-tab-label-badge">{@render children?.()}</span><Badge label={badgeLabel} />
+				</div>
+			{:else}
+				{@render children?.()}
+			{/if}
 			{#if variant === 'primary'}
 				<div class="np-indicator"></div>
 			{/if}
@@ -160,6 +178,15 @@
 		text-wrap: nowrap;
 		min-width: 1.5rem;
 	}
+	.np-tab-label-badge {
+		margin-right: 4px;
+	}
+	.np-tab-icon-badge {
+		height: 1.5rem;
+		width: 1.5rem;
+		position: relative;
+		--np-badge-left: 1.125rem;
+	}
 
 	.np-tab-no-inline {
 		flex-direction: column;

package/dist/tabs/types.d.ts

@@ -6,6 +6,8 @@ export interface TabProps extends HTMLAttributes<HTMLElement> {
     value: string | number;
     href?: string;
     icon?: Snippet;
+    badge?: boolean;
+    badgeLabel?: string;
 }
 export interface TabsProps extends HTMLAttributes<HTMLDivElement> {
     value: string | number;

package/dist/text-field/TextField.svelte

@@ -32,6 +32,8 @@
 		...attributes
 	}: TextFieldProps = $props()
 
+	const uid = $props.id()
+
 	let errorRaw: boolean = $state(error)
 	let errorTextRaw: string = $state(errorText)
 	let focusOnInvalid = $state(true)
@@ -134,8 +136,7 @@
 	})
 </script>
 
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<div
+<label
 	style={(variant === 'outlined'
 		? '--_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
@@ -146,14 +147,6 @@
 	bind:this={element}
 	bind:clientWidth
 	bind:clientHeight
-	role="button"
-	tabindex="-1"
-	onfocus={() => {
-		inputElement?.focus()
-	}}
-	onclick={() => {
-		inputElement?.click()
-	}}
 >
 	<div
 		class="field"
@@ -211,6 +204,9 @@
 						{#if attributes.type === 'textarea'}
 							<textarea
 								aria-label={label}
+								aria-describedby={supportingText || (errorTextRaw && errorRaw)
+									? `supporting-text-${uid}`
+									: undefined}
 								{...attributes}
 								oninput={onInputEvent}
 								oninvalid={onInvalidEvent}
@@ -231,6 +227,9 @@
 								{@render children?.()}
 								<input
 									aria-label={label}
+									aria-describedby={supportingText || (errorTextRaw && errorRaw)
+										? `supporting-text-${uid}`
+										: undefined}
 									{...attributes}
 									bind:value
 									bind:this={inputElement}
@@ -259,7 +258,7 @@
 		</div>
 		{#if supportingText || (errorTextRaw && errorRaw) || attributes.maxlength}
 			<div class="supporting-text" role={errorRaw ? 'alert' : undefined}>
-				<span>
+				<span id="supporting-text-{uid}">
 					{errorRaw && errorTextRaw ? errorTextRaw : supportingText}
 				</span>
 				{#if attributes.maxlength}
@@ -268,7 +267,7 @@
 			</div>
 		{/if}
 	</div>
-</div>
+</label>
 
 <style>
 	.active-indicator {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noph-ui",
-  "version": "0.21.15",
+  "version": "0.22.0",
   "license": "MIT",
   "homepage": "https://noph.dev",
   "repository": {
@@ -57,8 +57,8 @@
     "@eslint/js": "^9.33.0",
     "@material/material-color-utilities": "^0.3.0",
     "@playwright/test": "^1.54.2",
-    "@sveltejs/adapter-vercel": "^5.8.2",
-    "@sveltejs/kit": "^2.29.1",
+    "@sveltejs/adapter-vercel": "^5.9.1",
+    "@sveltejs/kit": "^2.31.1",
     "@sveltejs/package": "^2.4.1",
     "@sveltejs/vite-plugin-svelte": "^6.1.2",
     "@types/eslint": "^9.6.1",