noph-ui 0.11.6 → 0.11.8

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 (4) hide show
  1. package/dist/chip/FilterChip.svelte +43 -42
  2. package/dist/chip/FilterChip.svelte.d.ts +1 -1
  3. package/dist/chip/types.d.ts +3 -2
  4. package/package.json +1 -1
package/dist/chip/FilterChip.svelte CHANGED
@@ -15,12 +15,13 @@
15
15
  element = $bindable(),
16
16
  ariaLabelRemove = 'Remove',
17
17
  remove,
18
- select,
19
- deselect,
18
+ name,
19
+ value,
20
+ group = $bindable(),
20
21
  ...attributes
21
22
  }: FilterChipProps = $props()
22
23
 
23
- let chipBtn: HTMLButtonElement | undefined = $state()
24
+ let chipLabel: HTMLLabelElement | undefined = $state()
24
25
  </script>
25
26
 
26
27
  <div
@@ -29,40 +30,30 @@
29
30
  class={[
30
31
  'np-filter-chip',
31
32
  elevated ? 'np-filter-chip-elevated' : 'np-filter-chip-default',
32
- icon || selected ? 'np-filter-chip-icon' : '',
33
- selected ? 'np-filter-chip-selected' : '',
33
+ icon ? 'np-filter-chip-icon' : '',
34
34
  removable ? 'np-filter-chip-removable' : '',
35
35
  disabled ? 'np-filter-chip-disabled' : '',
36
36
  attributes.class,
37
37
  ]}
38
38
  >
39
- <button
40
- bind:this={chipBtn}
41
- class="np-filter-chip-btn"
42
- type="button"
43
- {disabled}
44
- onclick={() => {
45
- if (element === undefined) return
46
- if (selected) {
47
- deselect?.(element)
48
- } else {
49
- select?.(element)
50
- }
51
- selected = !selected
52
- }}
53
- >
54
- {#if icon && !selected}
39
+ <label bind:this={chipLabel} class="np-filter-chip-label">
40
+ {#if icon}
55
41
  <div class="np-chip-icon">
56
42
  {@render icon()}
57
43
  </div>
58
44
  {/if}
59
- {#if selected}
45
+ <div class="np-chip-icon-checked">
60
46
  <CheckIcon width={18} height={18} />
61
- {/if}
47
+ </div>
62
48
  <div class="np-chip-label">{label}</div>
63
- </button>
49
+ {#if group !== undefined}
50
+ <input type="checkbox" bind:checked={selected} {value} {name} {disabled} bind:group />
51
+ {:else}
52
+ <input type="checkbox" bind:checked={selected} {value} {name} {disabled} />
53
+ {/if}
54
+ </label>
64
55
  {#if !disabled}
65
- <Ripple forElement={chipBtn} />
56
+ <Ripple forElement={chipLabel} />
66
57
  {/if}
67
58
  {#if removable}
68
59
  <IconButton
@@ -93,17 +84,17 @@
93
84
  --np-icon-button-icon-color: var(--np-color-on-surface-variant);
94
85
  --np-icon-size: 1.125rem;
95
86
  }
96
- .np-filter-chip-btn {
97
- box-sizing: border-box;
98
- font-family: inherit;
99
- background-color: transparent;
100
- border-width: 0;
101
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
87
+ .np-filter-chip-label input {
88
+ opacity: 0;
89
+ position: absolute;
90
+ pointer-events: none;
91
+ }
92
+ .np-filter-chip-label {
102
93
  cursor: pointer;
103
94
  display: inline-flex;
104
95
  align-items: center;
105
- padding: 0;
106
96
  height: 2rem;
97
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
107
98
  color: var(--np-color-on-surface-variant);
108
99
  fill: currentColor;
109
100
  gap: 0.5rem;
@@ -111,17 +102,27 @@
111
102
  padding-left: 1rem;
112
103
  padding-right: 1rem;
113
104
  }
105
+ .np-chip-icon-checked {
106
+ display: none;
107
+ }
108
+ .np-filter-chip:has(input:checked) .np-chip-icon-checked {
109
+ display: flex;
110
+ }
111
+ .np-filter-chip:has(input:checked) .np-chip-icon {
112
+ display: none;
113
+ }
114
114
  .np-chip-icon {
115
115
  color: var(--np-color-primary);
116
116
  display: flex;
117
117
  }
118
- .np-filter-chip-icon .np-filter-chip-btn {
118
+ .np-filter-chip:has(input:checked) .np-filter-chip-label,
119
+ .np-filter-chip-icon .np-filter-chip-label {
119
120
  padding-left: 0.5rem;
120
121
  }
121
122
  .np-filter-chip-removable {
122
123
  padding-right: 2px;
123
124
  }
124
- .np-filter-chip-removable .np-filter-chip-btn {
125
+ .np-filter-chip-removable .np-filter-chip-label {
125
126
  padding-right: 2px;
126
127
  }
127
128
  .np-chip-label {
@@ -142,7 +143,7 @@
142
143
  border-style: solid;
143
144
  border-color: var(--np-filter-chip-outline-color, var(--np-color-outline-variant));
144
145
  }
145
- .np-filter-chip-selected::before {
146
+ .np-filter-chip:has(input:checked)::before {
146
147
  border-width: 0;
147
148
  background-color: var(--np-color-secondary-container);
148
149
  }
@@ -150,16 +151,16 @@
150
151
  border-width: 0;
151
152
  box-shadow: var(--np-elevation-1);
152
153
  }
153
- .np-filter-chip-selected {
154
+ .np-filter-chip:has(input:checked) {
154
155
  --np-icon-button-icon-color: var(--np-color-on-secondary-container);
155
156
  }
156
- .np-filter-chip-selected .np-filter-chip-btn {
157
+ .np-filter-chip:has(input:checked) .np-filter-chip-label {
157
158
  color: var(--np-color-on-secondary-container);
158
159
  }
159
- .np-filter-chip-btn:focus-visible {
160
+ .np-filter-chip-label:focus-visible {
160
161
  outline-width: 0;
161
162
  }
162
- .np-filter-chip:has(.np-filter-chip-btn:focus-visible) {
163
+ .np-filter-chip:has(input:focus-visible) {
163
164
  outline-style: solid;
164
165
  outline-color: var(--np-color-primary);
165
166
  outline-width: 3px;
@@ -178,7 +179,7 @@
178
179
  }
179
180
  }
180
181
 
181
- .np-filter-chip-disabled .np-filter-chip-btn {
182
+ .np-filter-chip-disabled .np-filter-chip-label {
182
183
  cursor: default;
183
184
  color: var(--np-color-on-surface);
184
185
  opacity: 0.38;
@@ -186,10 +187,10 @@
186
187
  .np-filter-chip-disabled.np-filter-chip-elevated {
187
188
  box-shadow: none;
188
189
  }
189
- .np-filter-chip-disabled.np-filter-chip-selected::before {
190
+ .np-filter-chip-disabled:has(input:checked)::before {
190
191
  opacity: 0.12;
191
192
  }
192
- :not(.np-filter-chip-selected).np-filter-chip-disabled.np-filter-chip-default::after {
193
+ .np-filter-chip-disabled:has(input:not(:checked)).np-filter-chip-default::after {
193
194
  content: '';
194
195
  position: absolute;
195
196
  inset: 0;
package/dist/chip/FilterChip.svelte.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import type { FilterChipProps } from './types.ts';
2
- declare const FilterChip: import("svelte").Component<FilterChipProps, {}, "element" | "selected">;
2
+ declare const FilterChip: import("svelte").Component<FilterChipProps, {}, "element" | "group" | "selected">;
3
3
  type FilterChip = ReturnType<typeof FilterChip>;
4
4
  export default FilterChip;
package/dist/chip/types.d.ts CHANGED
@@ -9,7 +9,8 @@ export interface FilterChipProps extends HTMLAttributes<HTMLDivElement> {
9
9
  icon?: Snippet;
10
10
  ariaLabelRemove?: string;
11
11
  element?: HTMLDivElement;
12
+ name?: string;
13
+ value?: string;
14
+ group?: string | number | null;
12
15
  remove?: (chip: HTMLDivElement) => void;
13
- select?: (chip: HTMLDivElement) => void;
14
- deselect?: (chip: HTMLDivElement) => void;
15
16
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "noph-ui",
3
- "version": "0.11.6",
3
+ "version": "0.11.8",
4
4
  "license": "MIT",
5
5
  "homepage": "https://noph.dev",
6
6
  "repository": {