noph-ui 0.14.3 → 0.15.1

package/dist/button/Button.svelte

@@ -19,7 +19,7 @@
 		...attributes
 	}: ButtonProps = $props()
 
-	let uid = $props.id()
+	const uid = $props.id()
 
 	const isButton = (obj: unknown): obj is HTMLButtonAttributes => {
 		return (obj as HTMLAnchorAttributes).href === undefined
@@ -121,11 +121,11 @@
 		overflow: hidden;
 		font-weight: 500;
 		text-decoration: none;
-		font-size: calc(var(--button-height) * 0.35);
+		font-size: var(--np-button-label-text-font-size, calc(var(--button-height) * 0.35));
 		height: var(--button-height);
-		padding-left: calc((var(--button-height) - 0.5rem) / 2);
-		padding-right: calc((var(--button-height) - 0.5rem) / 2);
-		gap: calc((var(--button-height) - 1.5rem) / 2);
+		padding-left: var(--np-button-padding-left, calc((var(--button-height) - 0.5rem) / 2));
+		padding-right: var(--np-button-padding-right, calc((var(--button-height) - 0.5rem) / 2));
+		gap: var(--np-button-gap, calc((var(--button-height) - 1.5rem) / 2));
 	}
 	.disabled {
 		pointer-events: none;
@@ -263,6 +263,7 @@
 		box-shadow: var(--np-elevation-1);
 	}
 	.outlined {
+		background-color: var(--np-outlined-button-container-color, transparent);
 		border: 1px solid;
 		--button-height: var(--np-outlined-button-container-height, 2.5rem);
 		--np-ripple-hover-color: var(--np-outlined-button-label-text-color, var(--np-color-primary));
@@ -278,8 +279,8 @@
 	}
 
 	:global(.np-button .button-icon) {
-		--_icon-size: calc((var(--button-height) - 0.375rem) / 2);
-		--_icon-color: inherit;
+		--_icon-size: var(--np-button-icon-size, calc((var(--button-height) - 0.375rem) / 2));
+		--_icon-color: var(--np-button-icon-color, inherit);
 	}
 
 	:global(.np-button .button-icon svg) {

package/dist/button/IconButton.svelte

@@ -22,7 +22,7 @@
 		...attributes
 	}: IconButtonProps = $props()
 
-	let uid = $props.id()
+	const uid = $props.id()
 	let selectedState = $state(!toggle || selected)
 	let touchEl: HTMLSpanElement | undefined = $state()
 

package/dist/checkbox/Checkbox.svelte

@@ -73,7 +73,7 @@
 		width: 18px;
 		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 		cursor: pointer;
-		margin: max(0px, (48px - 18px)/2);
+		margin: var(--np-checkbox-margin, max(0px, (48px - 18px)/2));
 	}
 	.np-host:has(input:disabled) {
 		cursor: default;

package/dist/chip/AssistChip.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import type { AssistChipProps } from './types.ts'
+	import Button from '../button/Button.svelte'
+
+	let {
+		elevated = false,
+		disabled = false,
+		label = '',
+		icon,
+		element = $bindable(),
+		...attributes
+	}: AssistChipProps = $props()
+</script>
+
+<Button
+	--np-elevated-button-container-shape="var(--np-assist-chip-container-shape, var(--np-shape-corner-small))"
+	--np-outlined-button-container-shape="var(--np-assist-chip-container-shape, var(--np-shape-corner-small))"
+	--np-elevated-button-label-text-color="var(--np-assist-chip-label-text-color, var(--np-color-on-surface-variant))"
+	--np-outlined-button-label-text-color="var(--np-assist-chip-label-text-color, var(--np-color-on-surface-variant))"
+	--np-outlined-button-outline-color="var(--np-assist-chip-outline-color, var(--np-color-outline-variant))"
+	--np-elevated-button-container-height="2rem"
+	--np-outlined-button-container-height="2rem"
+	--np-button-label-text-font-size="0.875rem"
+	--np-button-icon-size="1.125rem"
+	--np-button-padding-left="0.5rem"
+	--np-button-padding-right="0.5rem"
+	--np-button-gap="0.5rem"
+	--np-button-icon-color="var(--np-color-primary)"
+	--np-outlined-button-container-color="var(--np-color-surface-container-low)"
+	bind:element
+	variant={elevated ? 'elevated' : 'outlined'}
+	{disabled}
+	{...attributes}
+>
+	{#snippet start()}
+		{@render icon?.()}
+	{/snippet}
+	{label}
+</Button>

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

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

package/dist/chip/index.d.ts

@@ -1,3 +1,4 @@
 export { default as FilterChip } from './FilterChip.svelte';
+export { default as AssistChip } from './AssistChip.svelte';
 export { default as InputChip } from './InputChip.svelte';
 export { default as ChipSet } from './ChipSet.svelte';

package/dist/chip/index.js

@@ -1,3 +1,4 @@
 export { default as FilterChip } from './FilterChip.svelte';
+export { default as AssistChip } from './AssistChip.svelte';
 export { default as InputChip } from './InputChip.svelte';
 export { default as ChipSet } from './ChipSet.svelte';

package/dist/chip/types.d.ts

@@ -1,6 +1,21 @@
 import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
+import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
 export type ChipSetProps = HTMLAttributes<HTMLDivElement>;
+interface AssistChipButtonProps extends HTMLButtonAttributes {
+    elevated?: boolean;
+    disabled?: boolean;
+    label?: string;
+    icon?: Snippet;
+    element?: HTMLDivElement;
+}
+interface AssistChipAnchorProps extends HTMLAnchorAttributes {
+    elevated?: boolean;
+    disabled?: boolean;
+    label?: string;
+    icon?: Snippet;
+    element?: HTMLDivElement;
+}
+export type AssistChipProps = AssistChipButtonProps | AssistChipAnchorProps;
 export interface FilterChipProps extends HTMLAttributes<HTMLDivElement> {
     selected?: boolean;
     removable?: boolean;
@@ -33,3 +48,4 @@ export interface InputChipProps extends HTMLAttributes<HTMLDivElement> {
         currentTarget: EventTarget & HTMLButtonElement;
     }) => void;
 }
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noph-ui",
-  "version": "0.14.3",
+  "version": "0.15.1",
   "license": "MIT",
   "homepage": "https://noph.dev",
   "repository": {
@@ -52,27 +52,27 @@
     "svelte": "^5.20.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.21.0",
+    "@eslint/js": "^9.22.0",
     "@material/material-color-utilities": "^0.3.0",
-    "@playwright/test": "^1.50.1",
+    "@playwright/test": "^1.51.0",
     "@sveltejs/adapter-vercel": "^5.6.3",
-    "@sveltejs/kit": "^2.18.0",
+    "@sveltejs/kit": "^2.19.0",
     "@sveltejs/package": "^2.3.10",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@types/eslint": "^9.6.1",
-    "eslint": "^9.21.0",
-    "eslint-config-prettier": "^10.0.2",
-    "eslint-plugin-svelte": "^3.0.2",
+    "eslint": "^9.22.0",
+    "eslint-config-prettier": "^10.1.1",
+    "eslint-plugin-svelte": "^3.1.0",
     "globals": "^16.0.0",
     "prettier": "^3.5.3",
     "prettier-plugin-svelte": "^3.3.3",
-    "publint": "^0.3.8",
-    "svelte": "^5.22.1",
-    "svelte-check": "^4.1.4",
+    "publint": "^0.3.9",
+    "svelte": "^5.22.6",
+    "svelte-check": "^4.1.5",
     "typescript": "^5.8.2",
-    "typescript-eslint": "^8.26.0",
-    "vite": "^6.2.0",
-    "vitest": "^3.0.7"
+    "typescript-eslint": "^8.26.1",
+    "vite": "^6.2.1",
+    "vitest": "^3.0.8"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",