noph-ui 0.10.1 → 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.
Files changed (3) hide show
  1. package/dist/dialog/Dialog.svelte +5 -10
  2. package/dist/navigation-drawer/NavigationDrawer.svelte +34 -26
  3. package/package.json +5 -5
package/dist/dialog/Dialog.svelte CHANGED
@@ -73,23 +73,18 @@
73
73
  opacity: 0;
74
74
  }
75
75
  }
76
- .np-dialog::backdrop {
76
+ .np-dialog[popover]::backdrop {
77
77
  background-color: var(--np-color-scrim);
78
78
  opacity: 0;
79
- transition:
80
- display 0.2s allow-discrete,
81
- overlay 0.2s allow-discrete,
82
- opacity 0.2s linear;
79
+ transition: opacity 0.2s linear;
83
80
  }
84
- .np-dialog:popover-open::backdrop {
81
+ .np-dialog[popover]:popover-open::backdrop {
85
82
  opacity: 0.38;
86
- }
87
-
88
- @starting-style {
89
- .np-dialog:popover-open::backdrop {
83
+ @starting-style {
90
84
  opacity: 0;
91
85
  }
92
86
  }
87
+
93
88
  .np-dialog-icon {
94
89
  color: var(--np-color-secondary);
95
90
  display: flex;
package/dist/navigation-drawer/NavigationDrawer.svelte CHANGED
@@ -4,6 +4,7 @@
4
4
  modal = false,
5
5
  backdrop = false,
6
6
  element = $bindable(),
7
+ popover,
7
8
  children,
8
9
  ...attributes
9
10
  }: NavigationDrawerProps = $props()
@@ -12,45 +13,57 @@
12
13
  <nav
13
14
  {...attributes}
14
15
  bind:this={element}
16
+ popover={modal ? popover || 'auto' : undefined}
15
17
  class={[
16
18
  'np-navigation-drawer-container',
17
- modal && 'np-navigation-drawer-shade',
19
+ modal && 'np-navigation-drawer-container-modal',
18
20
  backdrop && 'np-navigation-drawer-backdrop',
19
21
  attributes.class,
20
22
  ]}
21
23
  >
22
- <div class="np-navigation-drawer">
23
- {#if children}
24
- {@render children()}
25
- {/if}
24
+ <div class={['np-navigation-wrapper', modal && 'np-navigation-drawer-shade']}>
25
+ <div class="np-navigation-drawer">
26
+ {#if children}
27
+ {@render children()}
28
+ {/if}
29
+ </div>
26
30
  </div>
27
31
  </nav>
28
32
 
29
33
  <style>
30
34
  .np-navigation-drawer-container {
31
- background-color: var(--np-navigation-drawer-background, var(--np-color-surface-container-low));
32
35
  color: var(--np-color-on-surface-variant);
33
- border-top-right-radius: var(--np-shape-corner-large);
34
- border-bottom-right-radius: var(--np-shape-corner-large);
35
- height: var(--np-navigation-drawer-height, 100dvh);
36
- width: var(--np-navigation-drawer-width, 22.5rem);
36
+ width: calc(var(--np-navigation-drawer-width, 22.5rem) + 3px);
37
+ overflow: hidden;
37
38
  scrollbar-width: thin;
38
39
  overflow-y: auto;
39
40
  border: 0;
40
41
  margin: 0;
41
42
  padding: 0;
43
+ background-color: transparent;
44
+ }
45
+ .np-navigation-drawer-container-modal {
46
+ z-index: 100;
47
+ }
48
+ .np-navigation-wrapper {
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);
52
+ width: var(--np-navigation-drawer-width, 22.5rem);
53
+ height: var(--np-navigation-drawer-height, 100dvh);
54
+ overflow-y: auto;
42
55
  }
43
56
 
57
+ .np-navigation-drawer-container[popover] .np-navigation-wrapper {
58
+ transform: translateX(-100%);
59
+ transition: transform 0.2s ease-in;
60
+ }
44
61
  .np-navigation-drawer-container[popover] {
45
- transition-property: transform;
46
- transition-timing-function: ease-in;
47
62
  transition:
48
- transform 0.3s,
49
- overlay 0.3s allow-discrete,
50
- display 0.3s allow-discrete;
51
- transform: translateX(-100%);
63
+ overlay 0.2s allow-discrete,
64
+ display 0.2s allow-discrete;
52
65
  }
53
- .np-navigation-drawer-container:popover-open {
66
+ .np-navigation-drawer-container:popover-open .np-navigation-wrapper {
54
67
  transform: translateX(0);
55
68
  @starting-style {
56
69
  transform: translateX(-100%);
@@ -64,19 +77,14 @@
64
77
  .np-navigation-drawer-shade {
65
78
  box-shadow: var(--np-elevation-1);
66
79
  }
67
- .np-navigation-drawer-backdrop::backdrop {
80
+ .np-navigation-drawer-backdrop[popover]::backdrop {
68
81
  background-color: var(--np-color-scrim);
69
82
  opacity: 0;
70
- transition:
71
- display 0.3s allow-discrete,
72
- overlay 0.3s allow-discrete,
73
- opacity 0.3s linear;
83
+ transition: opacity 0.2s linear;
74
84
  }
75
- .np-navigation-drawer-backdrop:popover-open::backdrop {
85
+ .np-navigation-drawer-backdrop[popover]:popover-open::backdrop {
76
86
  opacity: 0.38;
77
- }
78
- @starting-style {
79
- .np-navigation-drawer-backdrop:popover-open::backdrop {
87
+ @starting-style {
80
88
  opacity: 0;
81
89
  }
82
90
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "noph-ui",
3
- "version": "0.10.1",
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",