noph-ui 0.32.0 → 0.32.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.
@@ -104,6 +104,9 @@
104
104
  </script>
105
105
 
106
106
  {#snippet item(option: AutoCompleteOption, index: number)}
107
+ {#snippet supportingText()}
108
+ {option.supportingText}
109
+ {/snippet}
107
110
  <Item
108
111
  id="{uid}-opt-{index}"
109
112
  softFocus={index === activeIndex}
@@ -122,6 +125,7 @@
122
125
  variant="button"
123
126
  start={option.start}
124
127
  end={option.end}
128
+ supportingText={option.supportingText ? supportingText : undefined}
125
129
  >{option.label}
126
130
  </Item>
127
131
  {/snippet}
@@ -5,6 +5,7 @@ export interface AutoCompleteOption {
5
5
  label: string;
6
6
  start?: Snippet;
7
7
  end?: Snippet;
8
+ supportingText?: string;
8
9
  }
9
10
  export interface AutoCompleteProps extends Omit<InputFieldProps, 'clientWidth' | 'clientHeight'> {
10
11
  options: AutoCompleteOption[];
@@ -4,6 +4,7 @@
4
4
  modal = false,
5
5
  backdrop = false,
6
6
  element = $bindable(),
7
+ direction = 'ltr',
7
8
  popover,
8
9
  children,
9
10
  ...attributes
@@ -14,6 +15,9 @@
14
15
  {...attributes}
15
16
  bind:this={element}
16
17
  popover={modal ? popover || 'auto' : undefined}
18
+ style="--np-navigation-drawer-start: {direction === 'ltr'
19
+ ? 'translateX(-100%)'
20
+ : 'translateX(100%)'}"
17
21
  class={[
18
22
  'np-navigation-drawer-container',
19
23
  modal && 'np-navigation-drawer-container-modal',
@@ -59,7 +63,7 @@
59
63
  }
60
64
 
61
65
  .np-navigation-drawer-container[popover] .np-navigation-wrapper {
62
- transform: translateX(-100%);
66
+ transform: var(--np-navigation-drawer-start, translateX(-100%));
63
67
  transition: transform 0.25s ease;
64
68
  }
65
69
 
@@ -72,7 +76,7 @@
72
76
  .np-navigation-drawer-container:popover-open .np-navigation-wrapper {
73
77
  transform: translateX(0);
74
78
  @starting-style {
75
- transform: translateX(-100%);
79
+ transform: var(--np-navigation-drawer-start, translateX(-100%));
76
80
  }
77
81
  }
78
82
  .np-navigation-drawer {
@@ -4,6 +4,7 @@ export interface NavigationDrawerProps extends HTMLAttributes<HTMLElement> {
4
4
  modal?: boolean;
5
5
  backdrop?: boolean;
6
6
  element?: HTMLElement;
7
+ direction?: 'rtl' | 'ltr';
7
8
  }
8
9
  interface NavigationDrawerItemButton extends HTMLButtonAttributes {
9
10
  icon?: Snippet;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "noph-ui",
3
- "version": "0.32.0",
3
+ "version": "0.32.2",
4
4
  "license": "MIT",
5
5
  "homepage": "https://noph.dev",
6
6
  "repository": {
@@ -72,7 +72,7 @@
72
72
  "@materialx/material-color-utilities": "^0.4.8",
73
73
  "@playwright/test": "^1.58.2",
74
74
  "@sveltejs/adapter-auto": "^7.0.1",
75
- "@sveltejs/kit": "^2.53.0",
75
+ "@sveltejs/kit": "^2.53.3",
76
76
  "@sveltejs/package": "^2.5.7",
77
77
  "@sveltejs/vite-plugin-svelte": "^7.0.0",
78
78
  "@types/eslint": "^9.6.1",
@@ -83,8 +83,8 @@
83
83
  "prettier": "^3.8.1",
84
84
  "prettier-plugin-svelte": "^3.5.0",
85
85
  "publint": "^0.3.17",
86
- "svelte": "^5.53.3",
87
- "svelte-check": "^4.4.3",
86
+ "svelte": "^5.53.5",
87
+ "svelte-check": "^4.4.4",
88
88
  "typescript": "^5.9.3",
89
89
  "typescript-eslint": "^8.56.1",
90
90
  "vite": "^7.3.1",