noph-ui 0.10.2 → 0.10.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.
@@ -16,12 +16,12 @@
16
16
  popover={modal ? popover || 'auto' : undefined}
17
17
  class={[
18
18
  'np-navigation-drawer-container',
19
- modal && 'np-navigation-drawer-shade',
19
+ modal && 'np-navigation-drawer-container-modal',
20
20
  backdrop && 'np-navigation-drawer-backdrop',
21
21
  attributes.class,
22
22
  ]}
23
23
  >
24
- <div class="np-navigation-wrapper">
24
+ <div class={['np-navigation-wrapper', modal && 'np-navigation-drawer-shade']}>
25
25
  <div class="np-navigation-drawer">
26
26
  {#if children}
27
27
  {@render children()}
@@ -33,8 +33,7 @@
33
33
  <style>
34
34
  .np-navigation-drawer-container {
35
35
  color: var(--np-color-on-surface-variant);
36
- border-top-right-radius: var(--np-shape-corner-large);
37
- border-bottom-right-radius: var(--np-shape-corner-large);
36
+ width: calc(var(--np-navigation-drawer-width, 22.5rem) + 3px);
38
37
  overflow: hidden;
39
38
  scrollbar-width: thin;
40
39
  overflow-y: auto;
@@ -43,30 +42,27 @@
43
42
  padding: 0;
44
43
  background-color: transparent;
45
44
  }
45
+ .np-navigation-drawer-container-modal {
46
+ z-index: 100;
47
+ }
46
48
  .np-navigation-wrapper {
47
49
  background-color: var(--np-navigation-drawer-background, var(--np-color-surface-container-low));
50
+ border-top-right-radius: var(--np-shape-corner-large);
51
+ border-bottom-right-radius: var(--np-shape-corner-large);
48
52
  width: var(--np-navigation-drawer-width, 22.5rem);
49
53
  height: var(--np-navigation-drawer-height, 100dvh);
50
54
  overflow-y: auto;
51
55
  }
52
- .np-navigation-drawer-container[popover] {
53
- width: 0;
54
- transition:
55
- overlay 0.2s allow-discrete,
56
- display 0.2s allow-discrete,
57
- width 0.2s ease-in;
58
- }
59
- .np-navigation-drawer-container:popover-open {
60
- width: var(--np-navigation-drawer-width, 22.5rem);
61
- @starting-style {
62
- width: 0;
63
- }
64
- }
65
56
 
66
57
  .np-navigation-drawer-container[popover] .np-navigation-wrapper {
67
58
  transform: translateX(-100%);
68
59
  transition: transform 0.2s ease-in;
69
60
  }
61
+ .np-navigation-drawer-container[popover] {
62
+ transition:
63
+ overlay 0.2s allow-discrete,
64
+ display 0.2s allow-discrete;
65
+ }
70
66
  .np-navigation-drawer-container:popover-open .np-navigation-wrapper {
71
67
  transform: translateX(0);
72
68
  @starting-style {
@@ -80,7 +76,6 @@
80
76
  }
81
77
  .np-navigation-drawer-shade {
82
78
  box-shadow: var(--np-elevation-1);
83
- z-index: 100;
84
79
  }
85
80
  .np-navigation-drawer-backdrop[popover]::backdrop {
86
81
  background-color: var(--np-color-scrim);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "noph-ui",
3
- "version": "0.10.2",
3
+ "version": "0.10.3",
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.49.1",
56
+ "@playwright/test": "^1.50.0",
57
57
  "@sveltejs/adapter-vercel": "^5.5.3",
58
58
  "@sveltejs/kit": "^2.16.1",
59
- "@sveltejs/package": "^2.3.8",
59
+ "@sveltejs/package": "^2.3.9",
60
60
  "@sveltejs/vite-plugin-svelte": "^5.0.3",
61
61
  "@types/eslint": "^9.6.1",
62
62
  "eslint": "^9.18.0",
@@ -66,12 +66,12 @@
66
66
  "prettier": "^3.4.2",
67
67
  "prettier-plugin-svelte": "^3.3.3",
68
68
  "publint": "^0.3.2",
69
- "svelte": "^5.19.1",
69
+ "svelte": "^5.19.2",
70
70
  "svelte-check": "^4.1.4",
71
71
  "typescript": "^5.7.3",
72
72
  "typescript-eslint": "^8.21.0",
73
73
  "vite": "^6.0.11",
74
- "vitest": "^3.0.3"
74
+ "vitest": "^3.0.4"
75
75
  },
76
76
  "svelte": "./dist/index.js",
77
77
  "types": "./dist/index.d.ts",