noph-ui 0.12.13 → 0.12.15

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 (6) hide show
  1. package/dist/button/Button.svelte +4 -4
  2. package/dist/button/IconButton.svelte +4 -4
  3. package/dist/select/Select.svelte +4 -3
  4. package/dist/text-field/TextField.svelte +1 -1
  5. package/dist/text-field/types.d.ts +1 -1
  6. package/package.json +11 -11
package/dist/button/Button.svelte CHANGED
@@ -19,7 +19,7 @@
19
19
  ...attributes
20
20
  }: ButtonProps = $props()
21
21
 
22
- let tooltipId = $state(title ? crypto.randomUUID() : '')
22
+ let uid = $props.id()
23
23
 
24
24
  const isButton = (obj: unknown): obj is HTMLButtonAttributes => {
25
25
  return (obj as HTMLAnchorAttributes).href === undefined
@@ -58,7 +58,7 @@
58
58
  {#if isButton(attributes) || disabled || loading}
59
59
  <button
60
60
  {...attributes as HTMLButtonAttributes}
61
- aria-describedby={title ? tooltipId : attributes['aria-describedby']}
61
+ aria-describedby={title ? uid : attributes['aria-describedby']}
62
62
  aria-label={title || attributes['aria-label']}
63
63
  disabled={disabled || loading}
64
64
  bind:this={element}
@@ -74,7 +74,7 @@
74
74
  {:else if isLink(attributes)}
75
75
  <a
76
76
  {...attributes}
77
- aria-describedby={title ? tooltipId : attributes['aria-describedby']}
77
+ aria-describedby={title ? uid : attributes['aria-describedby']}
78
78
  aria-label={title || attributes['aria-label']}
79
79
  bind:this={element}
80
80
  class={['np-button', 'enabled', variant, attributes.class]}
@@ -84,7 +84,7 @@
84
84
  {/if}
85
85
 
86
86
  {#if title}
87
- <Tooltip {keepTooltipOnClick} id={tooltipId}>{title}</Tooltip>
87
+ <Tooltip {keepTooltipOnClick} id={uid}>{title}</Tooltip>
88
88
  {/if}
89
89
 
90
90
  <style>
package/dist/button/IconButton.svelte CHANGED
@@ -22,7 +22,7 @@
22
22
  ...attributes
23
23
  }: IconButtonProps = $props()
24
24
 
25
- let tooltipId = $state(title ? crypto.randomUUID() : '')
25
+ let uid = $props.id()
26
26
  let selectedState = $state(!toggle || selected)
27
27
  let touchEl: HTMLSpanElement | undefined = $state()
28
28
 
@@ -48,7 +48,7 @@
48
48
 
49
49
  {#if isButton(attributes) || disabled}
50
50
  <button
51
- aria-describedby={title ? tooltipId : attributes['aria-describedby']}
51
+ aria-describedby={title ? uid : attributes['aria-describedby']}
52
52
  aria-label={title || attributes['aria-label']}
53
53
  aria-pressed={selectedState}
54
54
  {...attributes as HTMLButtonAttributes}
@@ -73,7 +73,7 @@
73
73
  {:else if isLink(attributes)}
74
74
  <a
75
75
  {...attributes}
76
- aria-describedby={title ? tooltipId : undefined}
76
+ aria-describedby={title ? uid : undefined}
77
77
  aria-label={title}
78
78
  bind:this={element}
79
79
  class={[
@@ -89,7 +89,7 @@
89
89
  {/if}
90
90
 
91
91
  {#if title}
92
- <Tooltip {keepTooltipOnClick} id={tooltipId}>{title}</Tooltip>
92
+ <Tooltip {keepTooltipOnClick} id={uid}>{title}</Tooltip>
93
93
  {/if}
94
94
 
95
95
  <style>
package/dist/select/Select.svelte CHANGED
@@ -29,6 +29,8 @@
29
29
  ...attributes
30
30
  }: SelectProps = $props()
31
31
 
32
+ const uid = $props.id()
33
+
32
34
  let errorTextRaw: string = $state(errorText)
33
35
  let errorRaw = $state(error)
34
36
  let selectElement: HTMLSelectElement | undefined = $state()
@@ -36,7 +38,6 @@
36
38
  let anchorElement: HTMLDivElement | undefined = $state()
37
39
  let field: HTMLDivElement | undefined = $state()
38
40
  let clientWidth = $state(0)
39
- let menuId = $state(`--select-${crypto.randomUUID()}`)
40
41
  let menuOpen = $state(false)
41
42
  let selectedLabel = $derived.by<string>(() => {
42
43
  return options.find((option) => option.value === value)?.label || ''
@@ -131,7 +132,7 @@
131
132
  <div class="outline-end"></div>
132
133
  </div>
133
134
  {/if}
134
- <div class="np-container" bind:this={anchorElement} style="anchor-name:{menuId};">
135
+ <div class="np-container" bind:this={anchorElement} style="anchor-name:--{uid};">
135
136
  {#if start}
136
137
  <div class="start">
137
138
  <span class="icon">{@render start()}</span>
@@ -199,7 +200,7 @@
199
200
  </div>
200
201
 
201
202
  <Menu
202
- style="position-anchor:{menuId};min-width:{clientWidth}px;"
203
+ style="position-anchor:--{uid};min-width:{clientWidth}px;"
203
204
  popover="manual"
204
205
  role="listbox"
205
206
  --np-menu-justify-self="none"
package/dist/text-field/TextField.svelte CHANGED
@@ -355,7 +355,7 @@
355
355
  }
356
356
 
357
357
  &::-webkit-calendar-picker-indicator {
358
- display: none;
358
+ display: var(--np-picker-indicator-display, none);
359
359
  }
360
360
 
361
361
  &::-webkit-search-decoration,
package/dist/text-field/types.d.ts CHANGED
@@ -14,7 +14,7 @@ interface FieldProps {
14
14
  element?: HTMLSpanElement;
15
15
  }
16
16
  export interface InputFieldProps extends HTMLInputAttributes, FieldProps {
17
- type?: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url';
17
+ type?: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url' | 'datetime-local';
18
18
  }
19
19
  export interface TextAreaFieldProps extends HTMLTextareaAttributes, FieldProps {
20
20
  type: 'textarea';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "noph-ui",
3
- "version": "0.12.13",
3
+ "version": "0.12.15",
4
4
  "license": "MIT",
5
5
  "homepage": "https://noph.dev",
6
6
  "repository": {
@@ -49,29 +49,29 @@
49
49
  "!dist/**/*.spec.*"
50
50
  ],
51
51
  "peerDependencies": {
52
- "svelte": "^5.19.4"
52
+ "svelte": "^5.20.0"
53
53
  },
54
54
  "devDependencies": {
55
55
  "@material/material-color-utilities": "^0.3.0",
56
56
  "@playwright/test": "^1.50.1",
57
- "@sveltejs/adapter-vercel": "^5.6.1",
58
- "@sveltejs/kit": "^2.17.1",
57
+ "@sveltejs/adapter-vercel": "^5.6.2",
58
+ "@sveltejs/kit": "^2.17.2",
59
59
  "@sveltejs/package": "^2.3.10",
60
60
  "@sveltejs/vite-plugin-svelte": "^5.0.3",
61
61
  "@types/eslint": "^9.6.1",
62
- "eslint": "^9.19.0",
62
+ "eslint": "^9.20.1",
63
63
  "eslint-config-prettier": "^10.0.1",
64
64
  "eslint-plugin-svelte": "^2.46.1",
65
- "globals": "^15.14.0",
66
- "prettier": "^3.4.2",
65
+ "globals": "^15.15.0",
66
+ "prettier": "^3.5.1",
67
67
  "prettier-plugin-svelte": "^3.3.3",
68
- "publint": "^0.3.4",
69
- "svelte": "^5.19.9",
68
+ "publint": "^0.3.5",
69
+ "svelte": "^5.20.2",
70
70
  "svelte-check": "^4.1.4",
71
71
  "typescript": "^5.7.3",
72
- "typescript-eslint": "^8.23.0",
72
+ "typescript-eslint": "^8.24.1",
73
73
  "vite": "^6.1.0",
74
- "vitest": "^3.0.5"
74
+ "vitest": "^3.0.6"
75
75
  },
76
76
  "svelte": "./dist/index.js",
77
77
  "types": "./dist/index.d.ts",