noph-ui 0.11.5 → 0.11.6

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/card/Card.svelte +2 -25
  2. package/dist/chip/FilterChip.svelte +1 -0
  3. package/dist/list/Item.svelte +10 -34
  4. package/package.json +3 -3
package/dist/card/Card.svelte CHANGED
@@ -1,6 +1,5 @@
1
1
  <script lang="ts">
2
2
  import Ripple from '../ripple/Ripple.svelte'
3
- import type { FocusEventHandler } from 'svelte/elements'
4
3
  import type { CardProps } from './types.ts'
5
4
 
6
5
  let {
@@ -13,8 +12,6 @@
13
12
  supportingText,
14
13
  action,
15
14
  children,
16
- onblur,
17
- onfocus,
18
15
  ...attributes
19
16
  }: CardProps = $props()
20
17
 
@@ -71,12 +68,6 @@
71
68
  {...attributes}
72
69
  bind:this={element}
73
70
  aria-disabled={disabled}
74
- onfocus={(event) => {
75
- ;(onfocus as FocusEventHandler<HTMLDivElement>)?.(event)
76
- }}
77
- onblur={(event) => {
78
- ;(onblur as FocusEventHandler<HTMLDivElement>)?.(event)
79
- }}
80
71
  class={[
81
72
  'np-card-container',
82
73
  `np-card-${variant}`,
@@ -91,14 +82,7 @@
91
82
  aria-disabled={disabled}
92
83
  {...attributes}
93
84
  bind:this={element}
94
- onfocus={(event) => {
95
- focused = true
96
- ;(onfocus as FocusEventHandler<HTMLButtonElement>)?.(event)
97
- }}
98
- onblur={(event) => {
99
- focused = false
100
- ;(onblur as FocusEventHandler<HTMLButtonElement>)?.(event)
101
- }}
85
+ bind:focused
102
86
  {disabled}
103
87
  class={[
104
88
  'np-card-container',
@@ -116,14 +100,7 @@
116
100
  aria-disabled={disabled}
117
101
  tabindex={disabled ? -1 : undefined}
118
102
  role="link"
119
- onfocus={(event) => {
120
- focused = true
121
- ;(onfocus as FocusEventHandler<HTMLAnchorElement>)?.(event)
122
- }}
123
- onblur={(event) => {
124
- focused = false
125
- ;(onblur as FocusEventHandler<HTMLAnchorElement>)?.(event)
126
- }}
103
+ bind:focused
127
104
  class={[
128
105
  'np-card-container',
129
106
  `np-card-${variant}`,
package/dist/chip/FilterChip.svelte CHANGED
@@ -39,6 +39,7 @@
39
39
  <button
40
40
  bind:this={chipBtn}
41
41
  class="np-filter-chip-btn"
42
+ type="button"
42
43
  {disabled}
43
44
  onclick={() => {
44
45
  if (element === undefined) return
package/dist/list/Item.svelte CHANGED
@@ -1,6 +1,5 @@
1
1
  <script lang="ts">
2
2
  import Ripple from '../ripple/Ripple.svelte'
3
- import type { FocusEventHandler } from 'svelte/elements'
4
3
  import type { ItemProps } from './types.ts'
5
4
 
6
5
  let {
@@ -9,8 +8,6 @@
9
8
  end,
10
9
  children,
11
10
  supportingText,
12
- onblur,
13
- onfocus,
14
11
  disabled = false,
15
12
  ...attributes
16
13
  }: ItemProps = $props()
@@ -43,9 +40,6 @@
43
40
  {@render end()}
44
41
  </div>
45
42
  {/if}
46
- {#if !disabled && !(attributes.variant === 'text' || attributes.variant === undefined)}
47
- <Ripple forceHover={focused} />
48
- {/if}
49
43
  {/snippet}
50
44
 
51
45
  {#if disabled}
@@ -53,47 +47,29 @@
53
47
  {@render content()}
54
48
  </div>
55
49
  {:else if attributes.variant === 'text' || attributes.variant === undefined}
56
- <div
57
- {...attributes}
58
- onfocus={(event) => {
59
- ;(onfocus as FocusEventHandler<HTMLDivElement>)?.(event)
60
- }}
61
- onblur={(event) => {
62
- ;(onblur as FocusEventHandler<HTMLDivElement>)?.(event)
63
- }}
64
- class={['np-item', selected && 'selected', attributes.class]}
65
- >
50
+ <div {...attributes} class={['np-item', selected && 'selected', attributes.class]}>
66
51
  {@render content()}
67
52
  </div>
68
53
  {:else if attributes.variant === 'button'}
69
54
  <button
70
55
  {...attributes}
71
- onfocus={(event) => {
72
- focused = true
73
- ;(onfocus as FocusEventHandler<HTMLButtonElement>)?.(event)
74
- }}
75
- onblur={(event) => {
76
- focused = false
77
- ;(onblur as FocusEventHandler<HTMLButtonElement>)?.(event)
78
- }}
56
+ bind:focused
79
57
  class={['np-item', selected && 'selected', attributes.class]}
80
58
  bind:this={element}
81
- >{@render content()}
59
+ >
60
+ {@render content()}
61
+ <Ripple forceHover={focused} />
82
62
  </button>
83
63
  {:else if attributes.variant === 'link'}
84
64
  <a
85
65
  {...attributes}
86
- onfocus={(event) => {
87
- focused = true
88
- ;(onfocus as FocusEventHandler<HTMLAnchorElement>)?.(event)
89
- }}
90
- onblur={(event) => {
91
- focused = false
92
- ;(onblur as FocusEventHandler<HTMLAnchorElement>)?.(event)
93
- }}
66
+ bind:focused
94
67
  class={['np-item', selected && 'selected', attributes.class]}
95
- bind:this={element}>{@render content()}</a
68
+ bind:this={element}
96
69
  >
70
+ {@render content()}
71
+ <Ripple forceHover={focused} />
72
+ </a>
97
73
  {/if}
98
74
 
99
75
  <style>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "noph-ui",
3
- "version": "0.11.5",
3
+ "version": "0.11.6",
4
4
  "license": "MIT",
5
5
  "homepage": "https://noph.dev",
6
6
  "repository": {
@@ -49,7 +49,7 @@
49
49
  "!dist/**/*.spec.*"
50
50
  ],
51
51
  "peerDependencies": {
52
- "svelte": "^5.16.0"
52
+ "svelte": "^5.19.4"
53
53
  },
54
54
  "devDependencies": {
55
55
  "@material/material-color-utilities": "^0.3.0",
@@ -66,7 +66,7 @@
66
66
  "prettier": "^3.4.2",
67
67
  "prettier-plugin-svelte": "^3.3.3",
68
68
  "publint": "^0.3.2",
69
- "svelte": "^5.19.4",
69
+ "svelte": "^5.19.5",
70
70
  "svelte-check": "^4.1.4",
71
71
  "typescript": "^5.7.3",
72
72
  "typescript-eslint": "^8.22.0",