noph-ui 0.25.1 → 0.25.3

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 (5) hide show
  1. package/dist/dialog/Dialog.svelte +0 -1
  2. package/dist/menu/Menu.svelte +9 -4
  3. package/dist/navigation-drawer/NavigationDrawer.svelte +0 -3
  4. package/dist/tooltip/Tooltip.svelte +23 -8
  5. package/package.json +7 -7
package/dist/dialog/Dialog.svelte CHANGED
@@ -70,7 +70,6 @@
70
70
  border: none;
71
71
  margin: auto;
72
72
  padding: 9px 14px 20px 14px;
73
- z-index: 1000;
74
73
  padding: 2rem 1rem;
75
74
  }
76
75
  .np-dialog {
package/dist/menu/Menu.svelte CHANGED
@@ -142,19 +142,24 @@
142
142
  inset: auto;
143
143
  transition:
144
144
  display 0.2s allow-discrete,
145
+ overlay 0.2s allow-discrete,
145
146
  opacity 0.2s linear;
146
147
  opacity: 0;
147
148
  justify-self: var(--np-menu-justify-self, anchor-center);
148
149
  position-area: var(--np-menu-position-area, bottom center);
149
150
  position-try: normal flip-block;
150
- z-index: 1000;
151
151
  }
152
152
 
153
- .np-menu-container:popover-open {
153
+ .np-menu-container[popover]:popover-open {
154
154
  opacity: 1;
155
- display: flex;
156
- @starting-style {
155
+ animation: fadeIn 0.2s linear;
156
+ }
157
+ @keyframes fadeIn {
158
+ 0% {
157
159
  opacity: 0;
158
160
  }
161
+ 100% {
162
+ opacity: 1;
163
+ }
159
164
  }
160
165
  </style>
package/dist/navigation-drawer/NavigationDrawer.svelte CHANGED
@@ -48,9 +48,6 @@
48
48
  padding: 0;
49
49
  background-color: transparent;
50
50
  }
51
- .np-navigation-drawer-container-modal {
52
- z-index: 1000;
53
- }
54
51
  .np-navigation-wrapper {
55
52
  background-color: var(--np-navigation-drawer-background, var(--np-color-surface-container-low));
56
53
  border-top-right-radius: var(--np-shape-corner-large);
package/dist/tooltip/Tooltip.svelte CHANGED
@@ -49,12 +49,19 @@
49
49
  anchor.style.setProperty('anchor-name', generatedId)
50
50
  }
51
51
  }
52
- anchor.addEventListener('pointerenter', showPopover)
53
- anchor.addEventListener('pointerleave', hidePopover)
54
- anchor.addEventListener('focus', showPopover)
52
+ anchor.addEventListener('mouseenter', showPopover)
53
+ anchor.addEventListener('mouseleave', onLeave)
54
+ anchor.addEventListener('focus', onAnchorFocus)
55
55
  anchor.addEventListener('blur', hidePopover)
56
56
  }
57
57
 
58
+ const onAnchorFocus = (e: FocusEvent) => {
59
+ const target = e.currentTarget as HTMLElement
60
+ if (target.matches(':focus-visible')) {
61
+ showPopover()
62
+ }
63
+ }
64
+
58
65
  const showPopover = () => {
59
66
  element?.showPopover()
60
67
  }
@@ -63,12 +70,20 @@
63
70
  element?.hidePopover()
64
71
  }
65
72
 
73
+ const onLeave = () => {
74
+ hidePopover()
75
+ // TODO Use delay as soons as popover="hint" is supported in all browsers
76
+ // setTimeout(() => {
77
+ // hidePopover()
78
+ // }, 500)
79
+ }
80
+
66
81
  onMount(() => {
67
82
  return () => {
68
83
  if (anchor) {
69
- anchor.removeEventListener('pointerenter', showPopover)
70
- anchor.removeEventListener('pointerleave', hidePopover)
71
- anchor.removeEventListener('focus', showPopover)
84
+ anchor.removeEventListener('mouseenter', showPopover)
85
+ anchor.removeEventListener('mouseleave', onLeave)
86
+ anchor.removeEventListener('focus', onAnchorFocus)
72
87
  anchor.removeEventListener('blur', hidePopover)
73
88
  }
74
89
  }
@@ -84,7 +99,7 @@
84
99
  {@attach attachAnchor}
85
100
  class={['np-tooltip', attributes.class]}
86
101
  role="tooltip"
87
- popover="manual"
102
+ popover="hint"
88
103
  bind:this={element}
89
104
  bind:clientWidth
90
105
  bind:clientHeight
@@ -110,9 +125,9 @@
110
125
  line-height: 1rem;
111
126
  font-size: 0.75rem;
112
127
  opacity: 0;
113
- z-index: 1000;
114
128
  transition:
115
129
  display 0.3s allow-discrete,
130
+ overlay 0.2s allow-discrete,
116
131
  opacity 0.3s ease;
117
132
  justify-self: var(--np-tooltip-justify-self, anchor-center);
118
133
  position-area: var(--np-tooltip-position-area, top);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "noph-ui",
3
- "version": "0.25.1",
3
+ "version": "0.25.3",
4
4
  "license": "MIT",
5
5
  "homepage": "https://noph.dev",
6
6
  "repository": {
@@ -58,18 +58,18 @@
58
58
  "@material/material-color-utilities": "^0.3.0",
59
59
  "@playwright/test": "^1.55.0",
60
60
  "@sveltejs/adapter-vercel": "^5.10.2",
61
- "@sveltejs/kit": "^2.37.1",
62
- "@sveltejs/package": "^2.5.0",
63
- "@sveltejs/vite-plugin-svelte": "^6.1.4",
61
+ "@sveltejs/kit": "^2.39.1",
62
+ "@sveltejs/package": "^2.5.1",
63
+ "@sveltejs/vite-plugin-svelte": "^6.2.0",
64
64
  "@types/eslint": "^9.6.1",
65
65
  "eslint": "^9.35.0",
66
66
  "eslint-config-prettier": "^10.1.8",
67
- "eslint-plugin-svelte": "^3.12.2",
68
- "globals": "^16.3.0",
67
+ "eslint-plugin-svelte": "^3.12.3",
68
+ "globals": "^16.4.0",
69
69
  "prettier": "^3.6.2",
70
70
  "prettier-plugin-svelte": "^3.4.0",
71
71
  "publint": "^0.3.12",
72
- "svelte": "^5.38.7",
72
+ "svelte": "^5.38.10",
73
73
  "svelte-check": "^4.3.1",
74
74
  "typescript": "^5.9.2",
75
75
  "typescript-eslint": "^8.43.0",