noph-ui 0.18.13 → 0.18.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/checkbox/Checkbox.svelte +6 -3
  2. package/dist/radio/Radio.svelte +25 -14
  3. package/dist/select/VirtualList.svelte.d.ts +11 -4
  4. package/package.json +14 -14
package/dist/checkbox/Checkbox.svelte CHANGED
@@ -8,6 +8,7 @@
8
8
  element = $bindable(),
9
9
  group = $bindable(),
10
10
  style,
11
+ onpointerup,
11
12
  ...attributes
12
13
  }: CheckboxProps = $props()
13
14
 
@@ -33,22 +34,24 @@
33
34
  }
34
35
  }
35
36
  })
37
+ let inputEl: HTMLInputElement | undefined = $state()
36
38
  </script>
37
39
 
38
40
  <div {style} class={['np-host', attributes.class]} bind:this={element}>
39
41
  <div class="np-container">
40
42
  <label class="np-input-wrapper">
43
+ {#if !attributes.disabled}
44
+ <Ripple forElement={inputEl} />
45
+ {/if}
41
46
  <input
42
47
  {...attributes}
43
48
  class="np-input"
44
49
  type="checkbox"
45
50
  bind:indeterminate
46
51
  bind:checked
52
+ bind:this={inputEl}
47
53
  aria-checked={indeterminate ? 'mixed' : undefined}
48
54
  />
49
- {#if !attributes.disabled}
50
- <Ripple />
51
- {/if}
52
55
  </label>
53
56
 
54
57
  <div class="np-outline"></div>
package/dist/radio/Radio.svelte CHANGED
@@ -11,18 +11,13 @@
11
11
  ...attributes
12
12
  }: RadioProps = $props()
13
13
 
14
- let touchEl: HTMLSpanElement | undefined = $state()
14
+ let inputEl: HTMLSpanElement | undefined = $state()
15
15
  </script>
16
16
 
17
17
  <label {style} class={['np-host', attributes.class]} bind:this={element}>
18
- {#if group !== undefined}
19
- <input {...attributes} type="radio" class="np-input" {checked} {defaultChecked} bind:group />
20
- {:else}
21
- <input {...attributes} type="radio" class="np-input" {checked} {defaultChecked} />
22
- {/if}
23
18
  <div class="np-container" aria-hidden="true">
24
19
  {#if !attributes.disabled}
25
- <Ripple forElement={touchEl} class="np-radio-ripple" />
20
+ <Ripple forElement={inputEl} class="np-radio-ripple" />
26
21
  {/if}
27
22
  <svg class="np-radio-icon" viewBox="0 0 20 20">
28
23
  <mask id="1">
@@ -32,7 +27,26 @@
32
27
  <circle class="outer circle" cx="10" cy="10" r="10" mask="url(#1)" />
33
28
  <circle class="inner circle" cx="10" cy="10" r="5" />
34
29
  </svg>
35
- <span class="np-touch" bind:this={touchEl}></span>
30
+ {#if group !== undefined}
31
+ <input
32
+ {...attributes}
33
+ bind:this={inputEl}
34
+ type="radio"
35
+ class="np-input"
36
+ {checked}
37
+ {defaultChecked}
38
+ bind:group
39
+ />
40
+ {:else}
41
+ <input
42
+ {...attributes}
43
+ bind:this={inputEl}
44
+ type="radio"
45
+ class="np-input"
46
+ {checked}
47
+ {defaultChecked}
48
+ />
49
+ {/if}
36
50
  </div>
37
51
  </label>
38
52
 
@@ -45,9 +59,11 @@
45
59
  }
46
60
  .np-input {
47
61
  opacity: 0;
48
- inset: 0;
62
+ margin: 0;
49
63
  position: absolute;
50
64
  cursor: inherit;
65
+ height: 48px;
66
+ width: 48px;
51
67
  }
52
68
  .np-host {
53
69
  margin: max(0px, (48px - var(--np-radio-icon-size, 20px))/2);
@@ -92,11 +108,6 @@
92
108
  place-items: center;
93
109
  width: 100%;
94
110
  }
95
- .np-touch {
96
- height: 48px;
97
- position: absolute;
98
- width: 48px;
99
- }
100
111
  .np-radio-icon {
101
112
  fill: var(--np-radio-icon-color, var(--np-color-on-surface-variant));
102
113
  inset: 0px;
package/dist/select/VirtualList.svelte.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { type Snippet } from 'svelte';
2
2
  import type { HTMLAttributes } from 'svelte/elements';
3
- declare class __sveltets_Render<T> {
4
- props(): HTMLAttributes<HTMLDivElement> & {
3
+ declare function $$render<T>(): {
4
+ props: HTMLAttributes<HTMLDivElement> & {
5
5
  items: T[];
6
6
  height?: string;
7
7
  itemHeight?: number;
@@ -9,8 +9,15 @@ declare class __sveltets_Render<T> {
9
9
  end?: number;
10
10
  row: Snippet<[T]>;
11
11
  };
12
- events(): {};
13
- slots(): {};
12
+ exports: {};
13
+ bindings: "start" | "end";
14
+ slots: {};
15
+ events: {};
16
+ };
17
+ declare class __sveltets_Render<T> {
18
+ props(): ReturnType<typeof $$render<T>>['props'];
19
+ events(): ReturnType<typeof $$render<T>>['events'];
20
+ slots(): ReturnType<typeof $$render<T>>['slots'];
14
21
  bindings(): "start" | "end";
15
22
  exports(): {};
16
23
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "noph-ui",
3
- "version": "0.18.13",
3
+ "version": "0.18.14",
4
4
  "license": "MIT",
5
5
  "homepage": "https://noph.dev",
6
6
  "repository": {
@@ -53,26 +53,26 @@
53
53
  "svelte": "^5.32.1"
54
54
  },
55
55
  "devDependencies": {
56
- "@eslint/js": "^9.30.1",
56
+ "@eslint/js": "^9.31.0",
57
57
  "@material/material-color-utilities": "^0.3.0",
58
- "@playwright/test": "^1.53.2",
59
- "@sveltejs/adapter-vercel": "^5.7.2",
60
- "@sveltejs/kit": "^2.22.2",
61
- "@sveltejs/package": "^2.3.12",
62
- "@sveltejs/vite-plugin-svelte": "^5.1.0",
58
+ "@playwright/test": "^1.54.1",
59
+ "@sveltejs/adapter-vercel": "^5.8.0",
60
+ "@sveltejs/kit": "^2.25.1",
61
+ "@sveltejs/package": "^2.4.0",
62
+ "@sveltejs/vite-plugin-svelte": "^6.1.0",
63
63
  "@types/eslint": "^9.6.1",
64
- "eslint": "^9.30.1",
65
- "eslint-config-prettier": "^10.1.5",
66
- "eslint-plugin-svelte": "^3.10.1",
64
+ "eslint": "^9.31.0",
65
+ "eslint-config-prettier": "^10.1.8",
66
+ "eslint-plugin-svelte": "^3.11.0",
67
67
  "globals": "^16.3.0",
68
68
  "prettier": "^3.6.2",
69
69
  "prettier-plugin-svelte": "^3.4.0",
70
70
  "publint": "^0.3.12",
71
- "svelte": "^5.35.2",
72
- "svelte-check": "^4.2.2",
71
+ "svelte": "^5.36.13",
72
+ "svelte-check": "^4.3.0",
73
73
  "typescript": "^5.8.3",
74
- "typescript-eslint": "^8.35.1",
75
- "vite": "^7.0.2",
74
+ "typescript-eslint": "^8.38.0",
75
+ "vite": "^7.0.5",
76
76
  "vitest": "^3.2.4"
77
77
  },
78
78
  "svelte": "./dist/index.js",