noph-ui 0.12.1 → 0.12.2

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.
@@ -1,5 +1,6 @@
1
1
  <script lang="ts">
2
2
  import Ripple from '../ripple/Ripple.svelte'
3
+ import type { FocusEventHandler } from 'svelte/elements'
3
4
  import type { CardProps } from './types.ts'
4
5
 
5
6
  let {
@@ -12,6 +13,8 @@
12
13
  supportingText,
13
14
  action,
14
15
  children,
16
+ onfocus,
17
+ onblur,
15
18
  ...attributes
16
19
  }: CardProps = $props()
17
20
 
@@ -82,7 +85,14 @@
82
85
  aria-disabled={disabled}
83
86
  {...attributes}
84
87
  bind:this={element}
85
- bind:focused
88
+ onfocus={(event) => {
89
+ focused = true
90
+ ;(onfocus as FocusEventHandler<HTMLButtonElement>)?.(event)
91
+ }}
92
+ onblur={(event) => {
93
+ focused = false
94
+ ;(onblur as FocusEventHandler<HTMLButtonElement>)?.(event)
95
+ }}
86
96
  {disabled}
87
97
  class={[
88
98
  'np-card-container',
@@ -100,7 +110,14 @@
100
110
  aria-disabled={disabled}
101
111
  tabindex={disabled ? -1 : undefined}
102
112
  role="link"
103
- bind:focused
113
+ onfocus={(event) => {
114
+ focused = true
115
+ ;(onfocus as FocusEventHandler<HTMLAnchorElement>)?.(event)
116
+ }}
117
+ onblur={(event) => {
118
+ focused = false
119
+ ;(onblur as FocusEventHandler<HTMLAnchorElement>)?.(event)
120
+ }}
104
121
  class={[
105
122
  'np-card-container',
106
123
  `np-card-${variant}`,
@@ -1,5 +1,6 @@
1
1
  <script lang="ts">
2
2
  import Ripple from '../ripple/Ripple.svelte'
3
+ import type { FocusEventHandler } from 'svelte/elements'
3
4
  import type { ItemProps } from './types.ts'
4
5
 
5
6
  let {
@@ -9,6 +10,8 @@
9
10
  children,
10
11
  supportingText,
11
12
  disabled = false,
13
+ onfocus,
14
+ onblur,
12
15
  ...attributes
13
16
  }: ItemProps = $props()
14
17
 
@@ -53,7 +56,14 @@
53
56
  {:else if attributes.variant === 'button'}
54
57
  <button
55
58
  {...attributes}
56
- bind:focused
59
+ onfocus={(event) => {
60
+ focused = true
61
+ ;(onfocus as FocusEventHandler<HTMLButtonElement>)?.(event)
62
+ }}
63
+ onblur={(event) => {
64
+ focused = false
65
+ ;(onblur as FocusEventHandler<HTMLButtonElement>)?.(event)
66
+ }}
57
67
  class={['np-item', selected && 'selected', attributes.class]}
58
68
  bind:this={element}
59
69
  >
@@ -63,7 +73,14 @@
63
73
  {:else if attributes.variant === 'link'}
64
74
  <a
65
75
  {...attributes}
66
- bind:focused
76
+ onfocus={(event) => {
77
+ focused = true
78
+ ;(onfocus as FocusEventHandler<HTMLAnchorElement>)?.(event)
79
+ }}
80
+ onblur={(event) => {
81
+ focused = false
82
+ ;(onblur as FocusEventHandler<HTMLAnchorElement>)?.(event)
83
+ }}
67
84
  class={['np-item', selected && 'selected', attributes.class]}
68
85
  bind:this={element}
69
86
  >
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "noph-ui",
3
- "version": "0.12.1",
3
+ "version": "0.12.2",
4
4
  "license": "MIT",
5
5
  "homepage": "https://noph.dev",
6
6
  "repository": {
@@ -53,10 +53,10 @@
53
53
  },
54
54
  "devDependencies": {
55
55
  "@material/material-color-utilities": "^0.3.0",
56
- "@playwright/test": "^1.50.0",
57
- "@sveltejs/adapter-vercel": "^5.5.3",
58
- "@sveltejs/kit": "^2.16.1",
59
- "@sveltejs/package": "^2.3.9",
56
+ "@playwright/test": "^1.50.1",
57
+ "@sveltejs/adapter-vercel": "^5.6.1",
58
+ "@sveltejs/kit": "^2.17.1",
59
+ "@sveltejs/package": "^2.3.10",
60
60
  "@sveltejs/vite-plugin-svelte": "^5.0.3",
61
61
  "@types/eslint": "^9.6.1",
62
62
  "eslint": "^9.19.0",
@@ -65,13 +65,13 @@
65
65
  "globals": "^15.14.0",
66
66
  "prettier": "^3.4.2",
67
67
  "prettier-plugin-svelte": "^3.3.3",
68
- "publint": "^0.3.2",
69
- "svelte": "^5.19.5",
68
+ "publint": "^0.3.3",
69
+ "svelte": "^5.19.7",
70
70
  "svelte-check": "^4.1.4",
71
71
  "typescript": "^5.7.3",
72
- "typescript-eslint": "^8.22.0",
73
- "vite": "^6.0.11",
74
- "vitest": "^3.0.4"
72
+ "typescript-eslint": "^8.23.0",
73
+ "vite": "^6.1.0",
74
+ "vitest": "^3.0.5"
75
75
  },
76
76
  "svelte": "./dist/index.js",
77
77
  "types": "./dist/index.d.ts",