noph-ui 0.21.0 → 0.21.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.
|
@@ -97,7 +97,15 @@
|
|
|
97
97
|
aria-describedby={title ? uid : attributes['aria-describedby']}
|
|
98
98
|
aria-label={title || attributes['aria-label']}
|
|
99
99
|
bind:this={element}
|
|
100
|
-
class={[
|
|
100
|
+
class={[
|
|
101
|
+
'np-button',
|
|
102
|
+
size,
|
|
103
|
+
selected ? 'square' : 'round',
|
|
104
|
+
toggle ? 'toggle' : '',
|
|
105
|
+
'enabled',
|
|
106
|
+
variant,
|
|
107
|
+
attributes.class,
|
|
108
|
+
]}
|
|
101
109
|
>
|
|
102
110
|
{@render content()}
|
|
103
111
|
</a>
|
|
@@ -140,6 +148,7 @@
|
|
|
140
148
|
overflow: hidden;
|
|
141
149
|
font-weight: 500;
|
|
142
150
|
text-decoration: none;
|
|
151
|
+
--np-icon-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
143
152
|
transition:
|
|
144
153
|
background-color 150ms linear,
|
|
145
154
|
border-radius 150ms ease-in-out,
|
|
@@ -230,6 +239,12 @@
|
|
|
230
239
|
.xl:active {
|
|
231
240
|
border-radius: 1rem;
|
|
232
241
|
}
|
|
242
|
+
.toggle {
|
|
243
|
+
--np-icon-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
244
|
+
}
|
|
245
|
+
.selected {
|
|
246
|
+
--np-icon-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
247
|
+
}
|
|
233
248
|
.disabled {
|
|
234
249
|
pointer-events: none;
|
|
235
250
|
color: color-mix(in srgb, var(--np-color-on-surface) 38%, transparent);
|
|
@@ -96,6 +96,7 @@
|
|
|
96
96
|
variant,
|
|
97
97
|
selected || loading ? 'square' : shape,
|
|
98
98
|
'enabled',
|
|
99
|
+
toggle && 'toggle',
|
|
99
100
|
selected ? 'selected' : '',
|
|
100
101
|
attributes.class,
|
|
101
102
|
]}
|
|
@@ -131,6 +132,8 @@
|
|
|
131
132
|
|
|
132
133
|
:global(.np-icon-button svg) {
|
|
133
134
|
fill: currentColor;
|
|
135
|
+
height: var(--_icon-size, 1.25rem);
|
|
136
|
+
width: var(--_icon-size, 1.25rem);
|
|
134
137
|
}
|
|
135
138
|
|
|
136
139
|
.xs {
|
|
@@ -86,8 +86,7 @@
|
|
|
86
86
|
<IconButton
|
|
87
87
|
{disabled}
|
|
88
88
|
type="button"
|
|
89
|
-
|
|
90
|
-
--np-icon-button-container-width="1.75rem"
|
|
89
|
+
size="xs"
|
|
91
90
|
--np-icon-button-icon-size="1.125rem"
|
|
92
91
|
aria-label={ariaLabelRemove}
|
|
93
92
|
onclick={(
|
|
@@ -158,10 +157,10 @@
|
|
|
158
157
|
padding-left: 0.5rem;
|
|
159
158
|
}
|
|
160
159
|
.np-filter-chip-removable {
|
|
161
|
-
padding-right:
|
|
160
|
+
padding-right: 1px;
|
|
162
161
|
}
|
|
163
162
|
.np-filter-chip-removable .np-filter-chip-label {
|
|
164
|
-
padding-right:
|
|
163
|
+
padding-right: 1px;
|
|
165
164
|
}
|
|
166
165
|
.np-chip-label {
|
|
167
166
|
line-height: 1.25rem;
|
|
@@ -179,12 +178,13 @@
|
|
|
179
178
|
pointer-events: none;
|
|
180
179
|
}
|
|
181
180
|
.np-filter-chip-default::before {
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
181
|
+
outline-style: solid;
|
|
182
|
+
outline-color: var(--np-filter-chip-outline-color, var(--np-color-outline-variant));
|
|
183
|
+
outline-width: 1px;
|
|
184
|
+
outline-offset: -1px;
|
|
185
185
|
}
|
|
186
186
|
.np-filter-chip:has(input:checked)::before {
|
|
187
|
-
|
|
187
|
+
outline-style: none;
|
|
188
188
|
background-color: var(--np-color-secondary-container);
|
|
189
189
|
}
|
|
190
190
|
.np-filter-chip-elevated {
|
|
@@ -71,8 +71,7 @@
|
|
|
71
71
|
<IconButton
|
|
72
72
|
{disabled}
|
|
73
73
|
type="button"
|
|
74
|
-
|
|
75
|
-
--np-icon-button-container-width="1.75rem"
|
|
74
|
+
size="xs"
|
|
76
75
|
--np-icon-button-icon-size="1.125rem"
|
|
77
76
|
aria-label={ariaLabelRemove}
|
|
78
77
|
onclick={(
|
|
@@ -116,7 +115,7 @@
|
|
|
116
115
|
border-radius: var(--np-input-chip-container-shape, var(--np-shape-corner-small));
|
|
117
116
|
--np-icon-button-icon-color: var(--np-color-on-surface-variant);
|
|
118
117
|
--np-icon-size: 1.125rem;
|
|
119
|
-
padding-right:
|
|
118
|
+
padding-right: 1px;
|
|
120
119
|
min-width: 0;
|
|
121
120
|
}
|
|
122
121
|
.np-input-chip-label input {
|
|
@@ -135,7 +134,6 @@
|
|
|
135
134
|
gap: 0.5rem;
|
|
136
135
|
z-index: 1;
|
|
137
136
|
padding-left: 1rem;
|
|
138
|
-
padding-right: 2px;
|
|
139
137
|
overflow: hidden;
|
|
140
138
|
}
|
|
141
139
|
.np-chip-icon {
|
|
@@ -149,7 +147,7 @@
|
|
|
149
147
|
line-height: 1.25rem;
|
|
150
148
|
font-size: 0.875rem;
|
|
151
149
|
font-weight: 500;
|
|
152
|
-
padding-right:
|
|
150
|
+
padding-right: 1px;
|
|
153
151
|
white-space: pre;
|
|
154
152
|
overflow: hidden;
|
|
155
153
|
text-overflow: ellipsis;
|
|
@@ -160,12 +158,13 @@
|
|
|
160
158
|
inset: 0;
|
|
161
159
|
border-radius: inherit;
|
|
162
160
|
pointer-events: none;
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
161
|
+
outline-style: solid;
|
|
162
|
+
outline-color: var(--np-input-chip-outline-color, var(--np-color-outline-variant));
|
|
163
|
+
outline-width: 1px;
|
|
164
|
+
outline-offset: -1px;
|
|
166
165
|
}
|
|
167
166
|
.np-input-chip-selected::before {
|
|
168
|
-
|
|
167
|
+
outline-style: none;
|
|
169
168
|
background-color: var(--np-color-secondary-container);
|
|
170
169
|
}
|
|
171
170
|
.np-input-chip-selected {
|
|
@@ -62,8 +62,6 @@
|
|
|
62
62
|
<Button
|
|
63
63
|
variant="text"
|
|
64
64
|
--np-text-button-label-text-color="var(--np-snackbar-action-color, var(--np-color-inverse-primary))"
|
|
65
|
-
--np-text-button-container-shape="0"
|
|
66
|
-
style="height:{buttonHeight};margin-right:0.25rem"
|
|
67
65
|
aria-label={actionLabel}
|
|
68
66
|
onclick={onActionClick}
|
|
69
67
|
>
|
|
@@ -74,9 +72,6 @@
|
|
|
74
72
|
<div class="np-snackbar-icon-container">
|
|
75
73
|
<IconButton
|
|
76
74
|
--np-icon-button-icon-color="var(--np-snackbar-text-color, var(--np-color-inverse-on-surface))"
|
|
77
|
-
--np-icon-button-container-shape="0"
|
|
78
|
-
--np-icon-button-container-height={buttonHeight}
|
|
79
|
-
--np-icon-button-container-width="2.75rem"
|
|
80
75
|
aria-label="Close"
|
|
81
76
|
onclick={onIconClick}
|
|
82
77
|
>
|