@m3e/option 1.1.11 → 1.2.0
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.
- package/README.md +18 -10
- package/dist/css-custom-data.json +47 -7
- package/dist/custom-elements.json +49 -7
- package/dist/html-custom-data.json +2 -2
- package/dist/index.js +41 -17
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +7 -7
- package/dist/index.min.js.map +1 -1
- package/dist/src/OptionElement.d.ts +5 -0
- package/dist/src/OptionElement.d.ts.map +1 -1
- package/dist/src/OptionPanelElement.d.ts +14 -9
- package/dist/src/OptionPanelElement.d.ts.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -117,6 +117,10 @@ This section details the attributes, slots, events and CSS custom properties ava
|
|
|
117
117
|
| `--m3e-option-label-text-tracking` | The letter spacing of the option label. |
|
|
118
118
|
| `--m3e-option-focus-ring-shape` | The corner radius of the focus ring. |
|
|
119
119
|
| `--m3e-option-icon-size` | The size of the option icons. |
|
|
120
|
+
| `--m3e-option-shape` | Base shape of the option. |
|
|
121
|
+
| `--m3e-option-selected-shape` | Shape used for a selected option. |
|
|
122
|
+
| `--m3e-option-first-child-shape` | Shape for the first option in list. |
|
|
123
|
+
| `--m3e-option-last-child-shape` | Shape for the last option in a list. |
|
|
120
124
|
|
|
121
125
|
### 🗂️ m3e-option-panel
|
|
122
126
|
|
|
@@ -137,16 +141,20 @@ This section details the attributes, slots, events and CSS custom properties ava
|
|
|
137
141
|
|
|
138
142
|
#### 🎛️ CSS Custom Properties
|
|
139
143
|
|
|
140
|
-
| Property
|
|
141
|
-
|
|
|
142
|
-
| `--m3e-option-panel-container-shape`
|
|
143
|
-
| `--m3e-option-panel-container-min-width`
|
|
144
|
-
| `--m3e-option-panel-container-max-width`
|
|
145
|
-
| `--m3e-option-panel-container-max-height`
|
|
146
|
-
| `--m3e-option-panel-container-padding-block`
|
|
147
|
-
| `--m3e-option-panel-container-
|
|
148
|
-
| `--m3e-option-panel-container-
|
|
149
|
-
| `--m3e-option-panel-
|
|
144
|
+
| Property | Description |
|
|
145
|
+
| --------------------------------------------------- | ------------------------------------------------------- |
|
|
146
|
+
| `--m3e-option-panel-container-shape` | Corner radius of the panel container. |
|
|
147
|
+
| `--m3e-option-panel-container-min-width` | Minimum width of the panel container. |
|
|
148
|
+
| `--m3e-option-panel-container-max-width` | Maximum width of the panel container. |
|
|
149
|
+
| `--m3e-option-panel-container-max-height` | Maximum height of the panel container. |
|
|
150
|
+
| `--m3e-option-panel-container-padding-block` | Vertical padding inside the panel container. |
|
|
151
|
+
| `--m3e-option-panel-container-padding-inline` | Horizontal padding inside the panel container. |
|
|
152
|
+
| `--m3e-option-panel-container-color` | Background color of the panel container. |
|
|
153
|
+
| `--m3e-option-panel-container-elevation` | Box shadow elevation of the panel container. |
|
|
154
|
+
| `--m3e-option-panel-gap` | Vertical spacing between option items. |
|
|
155
|
+
| `--m3e-option-panel-divider-spacing` | Vertical spacing around slotted `m3e-divider` elements. |
|
|
156
|
+
| `--m3e-option-panel-text-highlight-container-color` | Background color used for text highlight matches. |
|
|
157
|
+
| `--m3e-option-panel-text-highlight-color` | Text color used for text highlight matches. |
|
|
150
158
|
|
|
151
159
|
### 🗂️ m3e-optgroup
|
|
152
160
|
|
|
@@ -147,39 +147,69 @@
|
|
|
147
147
|
"description": "The size of the option icons.",
|
|
148
148
|
"values": []
|
|
149
149
|
},
|
|
150
|
+
{
|
|
151
|
+
"name": "--m3e-option-shape",
|
|
152
|
+
"description": "Base shape of the option.",
|
|
153
|
+
"values": []
|
|
154
|
+
},
|
|
155
|
+
{
|
|
156
|
+
"name": "--m3e-option-selected-shape",
|
|
157
|
+
"description": "Shape used for a selected option.",
|
|
158
|
+
"values": []
|
|
159
|
+
},
|
|
160
|
+
{
|
|
161
|
+
"name": "--m3e-option-first-child-shape",
|
|
162
|
+
"description": "Shape for the first option in a list.",
|
|
163
|
+
"values": []
|
|
164
|
+
},
|
|
165
|
+
{
|
|
166
|
+
"name": "--m3e-option-last-child-shape",
|
|
167
|
+
"description": "Shape for the last option in a list.",
|
|
168
|
+
"values": []
|
|
169
|
+
},
|
|
150
170
|
{
|
|
151
171
|
"name": "--m3e-option-panel-container-shape",
|
|
152
|
-
"description": "
|
|
172
|
+
"description": "Corner radius of the panel container.",
|
|
153
173
|
"values": []
|
|
154
174
|
},
|
|
155
175
|
{
|
|
156
176
|
"name": "--m3e-option-panel-container-min-width",
|
|
157
|
-
"description": "Minimum width of the
|
|
177
|
+
"description": "Minimum width of the panel container.",
|
|
158
178
|
"values": []
|
|
159
179
|
},
|
|
160
180
|
{
|
|
161
181
|
"name": "--m3e-option-panel-container-max-width",
|
|
162
|
-
"description": "Maximum width of the
|
|
182
|
+
"description": "Maximum width of the panel container.",
|
|
163
183
|
"values": []
|
|
164
184
|
},
|
|
165
185
|
{
|
|
166
186
|
"name": "--m3e-option-panel-container-max-height",
|
|
167
|
-
"description": "Maximum height of the
|
|
187
|
+
"description": "Maximum height of the panel container.",
|
|
168
188
|
"values": []
|
|
169
189
|
},
|
|
170
190
|
{
|
|
171
191
|
"name": "--m3e-option-panel-container-padding-block",
|
|
172
|
-
"description": "Vertical padding inside the
|
|
192
|
+
"description": "Vertical padding inside the panel container.",
|
|
193
|
+
"values": []
|
|
194
|
+
},
|
|
195
|
+
{
|
|
196
|
+
"name": "--m3e-option-panel-container-padding-inline",
|
|
197
|
+
"description": "Horizontal padding inside the panel container.",
|
|
173
198
|
"values": []
|
|
174
199
|
},
|
|
175
200
|
{
|
|
176
201
|
"name": "--m3e-option-panel-container-color",
|
|
177
|
-
"description": "Background color of the
|
|
202
|
+
"description": "Background color of the panel container.",
|
|
178
203
|
"values": []
|
|
179
204
|
},
|
|
180
205
|
{
|
|
181
206
|
"name": "--m3e-option-panel-container-elevation",
|
|
182
|
-
"description": "Box shadow elevation of the
|
|
207
|
+
"description": "Box shadow elevation of the panel container.",
|
|
208
|
+
"values": []
|
|
209
|
+
},
|
|
210
|
+
{
|
|
211
|
+
"name": "--m3e-option-panel-gap",
|
|
212
|
+
"description": "Vertical spacing between option items.",
|
|
183
213
|
"values": []
|
|
184
214
|
},
|
|
185
215
|
{
|
|
@@ -187,6 +217,16 @@
|
|
|
187
217
|
"description": "Vertical spacing around slotted `m3e-divider` elements.",
|
|
188
218
|
"values": []
|
|
189
219
|
},
|
|
220
|
+
{
|
|
221
|
+
"name": "--m3e-option-panel-text-highlight-container-color",
|
|
222
|
+
"description": "Background color used for text highlight matches.",
|
|
223
|
+
"values": []
|
|
224
|
+
},
|
|
225
|
+
{
|
|
226
|
+
"name": "--m3e-option-panel-text-highlight-color",
|
|
227
|
+
"description": "Text color used for text highlight matches.",
|
|
228
|
+
"values": []
|
|
229
|
+
},
|
|
190
230
|
{
|
|
191
231
|
"name": "--m3e-nav-bar-height",
|
|
192
232
|
"description": "Height of the navigation bar.",
|
|
@@ -254,6 +254,22 @@
|
|
|
254
254
|
{
|
|
255
255
|
"description": "The size of the option icons.",
|
|
256
256
|
"name": "--m3e-option-icon-size"
|
|
257
|
+
},
|
|
258
|
+
{
|
|
259
|
+
"description": "Base shape of the option.",
|
|
260
|
+
"name": "--m3e-option-shape"
|
|
261
|
+
},
|
|
262
|
+
{
|
|
263
|
+
"description": "Shape used for a selected option.",
|
|
264
|
+
"name": "--m3e-option-selected-shape"
|
|
265
|
+
},
|
|
266
|
+
{
|
|
267
|
+
"description": "Shape for the first option in a list.",
|
|
268
|
+
"name": "--m3e-option-first-child-shape"
|
|
269
|
+
},
|
|
270
|
+
{
|
|
271
|
+
"description": "Shape for the last option in a list.",
|
|
272
|
+
"name": "--m3e-option-last-child-shape"
|
|
257
273
|
}
|
|
258
274
|
],
|
|
259
275
|
"slots": [
|
|
@@ -433,36 +449,52 @@
|
|
|
433
449
|
"name": "M3eOptionPanelElement",
|
|
434
450
|
"cssProperties": [
|
|
435
451
|
{
|
|
436
|
-
"description": "
|
|
452
|
+
"description": "Corner radius of the panel container.",
|
|
437
453
|
"name": "--m3e-option-panel-container-shape"
|
|
438
454
|
},
|
|
439
455
|
{
|
|
440
|
-
"description": "Minimum width of the
|
|
456
|
+
"description": "Minimum width of the panel container.",
|
|
441
457
|
"name": "--m3e-option-panel-container-min-width"
|
|
442
458
|
},
|
|
443
459
|
{
|
|
444
|
-
"description": "Maximum width of the
|
|
460
|
+
"description": "Maximum width of the panel container.",
|
|
445
461
|
"name": "--m3e-option-panel-container-max-width"
|
|
446
462
|
},
|
|
447
463
|
{
|
|
448
|
-
"description": "Maximum height of the
|
|
464
|
+
"description": "Maximum height of the panel container.",
|
|
449
465
|
"name": "--m3e-option-panel-container-max-height"
|
|
450
466
|
},
|
|
451
467
|
{
|
|
452
|
-
"description": "Vertical padding inside the
|
|
468
|
+
"description": "Vertical padding inside the panel container.",
|
|
453
469
|
"name": "--m3e-option-panel-container-padding-block"
|
|
454
470
|
},
|
|
455
471
|
{
|
|
456
|
-
"description": "
|
|
472
|
+
"description": "Horizontal padding inside the panel container.",
|
|
473
|
+
"name": "--m3e-option-panel-container-padding-inline"
|
|
474
|
+
},
|
|
475
|
+
{
|
|
476
|
+
"description": "Background color of the panel container.",
|
|
457
477
|
"name": "--m3e-option-panel-container-color"
|
|
458
478
|
},
|
|
459
479
|
{
|
|
460
|
-
"description": "Box shadow elevation of the
|
|
480
|
+
"description": "Box shadow elevation of the panel container.",
|
|
461
481
|
"name": "--m3e-option-panel-container-elevation"
|
|
462
482
|
},
|
|
483
|
+
{
|
|
484
|
+
"description": "Vertical spacing between option items.",
|
|
485
|
+
"name": "--m3e-option-panel-gap"
|
|
486
|
+
},
|
|
463
487
|
{
|
|
464
488
|
"description": "Vertical spacing around slotted `m3e-divider` elements.",
|
|
465
489
|
"name": "--m3e-option-panel-divider-spacing"
|
|
490
|
+
},
|
|
491
|
+
{
|
|
492
|
+
"description": "Background color used for text highlight matches.",
|
|
493
|
+
"name": "--m3e-option-panel-text-highlight-container-color"
|
|
494
|
+
},
|
|
495
|
+
{
|
|
496
|
+
"description": "Text color used for text highlight matches.",
|
|
497
|
+
"name": "--m3e-option-panel-text-highlight-color"
|
|
466
498
|
}
|
|
467
499
|
],
|
|
468
500
|
"slots": [
|
|
@@ -596,6 +628,16 @@
|
|
|
596
628
|
],
|
|
597
629
|
"description": "Toggles the menu."
|
|
598
630
|
},
|
|
631
|
+
{
|
|
632
|
+
"kind": "method",
|
|
633
|
+
"name": "#handleSlotChange",
|
|
634
|
+
"privacy": "private",
|
|
635
|
+
"return": {
|
|
636
|
+
"type": {
|
|
637
|
+
"text": "void"
|
|
638
|
+
}
|
|
639
|
+
}
|
|
640
|
+
},
|
|
599
641
|
{
|
|
600
642
|
"kind": "method",
|
|
601
643
|
"name": "#handleDocumentClick",
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
},
|
|
11
11
|
{
|
|
12
12
|
"name": "m3e-option",
|
|
13
|
-
"description": "An option that can be selected.\n---\n\n\n### **Slots:**\n - _default_ - Renders the label of the option.\n\n### **CSS Properties:**\n - **--m3e-option-container-height** - The height of the option container. _(default: undefined)_\n- **--m3e-option-color** - The text color of the option. _(default: undefined)_\n- **--m3e-option-container-hover-color** - The color for the hover state layer. _(default: undefined)_\n- **--m3e-option-container-focus-color** - The color for the focus state layer. _(default: undefined)_\n- **--m3e-option-ripple-color** - The color of the ripple effect. _(default: undefined)_\n- **--m3e-option-selected-color** - The text color when the option is selected. _(default: undefined)_\n- **--m3e-option-selected-container-color** - The background color when the option is selected. _(default: undefined)_\n- **--m3e-option-selected-container-hover-color** - The hover color for the selected state layer. _(default: undefined)_\n- **--m3e-option-selected-container-focus-color** - The focus color for the selected state layer. _(default: undefined)_\n- **--m3e-option-selected-ripple-color** - The ripple color when the option is selected. _(default: undefined)_\n- **--m3e-option-disabled-color** - The text color when the option is disabled. _(default: undefined)_\n- **--m3e-option-disabled-opacity** - The opacity level applied to the disabled text color. _(default: undefined)_\n- **--m3e-option-icon-label-space** - The spacing between the icon and label. _(default: undefined)_\n- **--m3e-option-padding-start** - The left padding of the option content. _(default: undefined)_\n- **--m3e-option-padding-end** - The right padding of the option content. _(default: undefined)_\n- **--m3e-option-label-text-font-size** - The font size of the option label. _(default: undefined)_\n- **--m3e-option-label-text-font-weight** - The font weight of the option label. _(default: undefined)_\n- **--m3e-option-label-text-line-height** - The line height of the option label. _(default: undefined)_\n- **--m3e-option-label-text-tracking** - The letter spacing of the option label. _(default: undefined)_\n- **--m3e-option-focus-ring-shape** - The corner radius of the focus ring. _(default: undefined)_\n- **--m3e-option-icon-size** - The size of the option icons. _(default: undefined)_",
|
|
13
|
+
"description": "An option that can be selected.\n---\n\n\n### **Slots:**\n - _default_ - Renders the label of the option.\n\n### **CSS Properties:**\n - **--m3e-option-container-height** - The height of the option container. _(default: undefined)_\n- **--m3e-option-color** - The text color of the option. _(default: undefined)_\n- **--m3e-option-container-hover-color** - The color for the hover state layer. _(default: undefined)_\n- **--m3e-option-container-focus-color** - The color for the focus state layer. _(default: undefined)_\n- **--m3e-option-ripple-color** - The color of the ripple effect. _(default: undefined)_\n- **--m3e-option-selected-color** - The text color when the option is selected. _(default: undefined)_\n- **--m3e-option-selected-container-color** - The background color when the option is selected. _(default: undefined)_\n- **--m3e-option-selected-container-hover-color** - The hover color for the selected state layer. _(default: undefined)_\n- **--m3e-option-selected-container-focus-color** - The focus color for the selected state layer. _(default: undefined)_\n- **--m3e-option-selected-ripple-color** - The ripple color when the option is selected. _(default: undefined)_\n- **--m3e-option-disabled-color** - The text color when the option is disabled. _(default: undefined)_\n- **--m3e-option-disabled-opacity** - The opacity level applied to the disabled text color. _(default: undefined)_\n- **--m3e-option-icon-label-space** - The spacing between the icon and label. _(default: undefined)_\n- **--m3e-option-padding-start** - The left padding of the option content. _(default: undefined)_\n- **--m3e-option-padding-end** - The right padding of the option content. _(default: undefined)_\n- **--m3e-option-label-text-font-size** - The font size of the option label. _(default: undefined)_\n- **--m3e-option-label-text-font-weight** - The font weight of the option label. _(default: undefined)_\n- **--m3e-option-label-text-line-height** - The line height of the option label. _(default: undefined)_\n- **--m3e-option-label-text-tracking** - The letter spacing of the option label. _(default: undefined)_\n- **--m3e-option-focus-ring-shape** - The corner radius of the focus ring. _(default: undefined)_\n- **--m3e-option-icon-size** - The size of the option icons. _(default: undefined)_\n- **--m3e-option-shape** - Base shape of the option. _(default: undefined)_\n- **--m3e-option-selected-shape** - Shape used for a selected option. _(default: undefined)_\n- **--m3e-option-first-child-shape** - Shape for the first option in a list. _(default: undefined)_\n- **--m3e-option-last-child-shape** - Shape for the last option in a list. _(default: undefined)_",
|
|
14
14
|
"attributes": [
|
|
15
15
|
{
|
|
16
16
|
"name": "disabled",
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
},
|
|
33
33
|
{
|
|
34
34
|
"name": "m3e-option-panel",
|
|
35
|
-
"description": "Presents a list of options on a temporary surface.\n---\n\n\n### **Events:**\n - **beforetoggle** - Dispatched before the toggle state changes.\n- **toggle** - Dispatched after the toggle state has changed.\n\n### **Methods:**\n - **show(trigger: _HTMLElement_, anchor: _HTMLElement | undefined_): _Promise<void>_** - Opens the menu.\n- **hide(restoreFocus: _boolean_): _void_** - Hides the menu.\n- **toggle(trigger: _HTMLElement_, anchor: _HTMLElement | undefined_): _Promise<void>_** - Toggles the menu.\n\n### **Slots:**\n - _default_ - Renders the contents of the list.\n\n### **CSS Properties:**\n - **--m3e-option-panel-container-shape** -
|
|
35
|
+
"description": "Presents a list of options on a temporary surface.\n---\n\n\n### **Events:**\n - **beforetoggle** - Dispatched before the toggle state changes.\n- **toggle** - Dispatched after the toggle state has changed.\n\n### **Methods:**\n - **show(trigger: _HTMLElement_, anchor: _HTMLElement | undefined_): _Promise<void>_** - Opens the menu.\n- **hide(restoreFocus: _boolean_): _void_** - Hides the menu.\n- **toggle(trigger: _HTMLElement_, anchor: _HTMLElement | undefined_): _Promise<void>_** - Toggles the menu.\n\n### **Slots:**\n - _default_ - Renders the contents of the list.\n\n### **CSS Properties:**\n - **--m3e-option-panel-container-shape** - Corner radius of the panel container. _(default: undefined)_\n- **--m3e-option-panel-container-min-width** - Minimum width of the panel container. _(default: undefined)_\n- **--m3e-option-panel-container-max-width** - Maximum width of the panel container. _(default: undefined)_\n- **--m3e-option-panel-container-max-height** - Maximum height of the panel container. _(default: undefined)_\n- **--m3e-option-panel-container-padding-block** - Vertical padding inside the panel container. _(default: undefined)_\n- **--m3e-option-panel-container-padding-inline** - Horizontal padding inside the panel container. _(default: undefined)_\n- **--m3e-option-panel-container-color** - Background color of the panel container. _(default: undefined)_\n- **--m3e-option-panel-container-elevation** - Box shadow elevation of the panel container. _(default: undefined)_\n- **--m3e-option-panel-gap** - Vertical spacing between option items. _(default: undefined)_\n- **--m3e-option-panel-divider-spacing** - Vertical spacing around slotted `m3e-divider` elements. _(default: undefined)_\n- **--m3e-option-panel-text-highlight-container-color** - Background color used for text highlight matches. _(default: undefined)_\n- **--m3e-option-panel-text-highlight-color** - Text color used for text highlight matches. _(default: undefined)_",
|
|
36
36
|
"attributes": [],
|
|
37
37
|
"references": []
|
|
38
38
|
},
|
package/dist/index.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Copyright (c) 2025 matraic
|
|
4
4
|
* See LICENSE file in the project root for full license text.
|
|
5
5
|
*/
|
|
6
|
-
import { LitElement, html,
|
|
6
|
+
import { LitElement, html, unsafeCSS, css } from 'lit';
|
|
7
7
|
import { Selected, Disabled, Role, DesignToken, getTextContent, ScrollController } from '@m3e/core';
|
|
8
8
|
import { typeaheadLabel, removeAriaReferencedId, addAriaReferencedId } from '@m3e/core/a11y';
|
|
9
9
|
import { positionAnchor } from '@m3e/core/anchoring';
|
|
@@ -483,6 +483,11 @@ var _M3eOptionElement_instances, _M3eOptionElement_value, _M3eOptionElement_text
|
|
|
483
483
|
* @cssprop --m3e-option-label-text-tracking - The letter spacing of the option label.
|
|
484
484
|
* @cssprop --m3e-option-focus-ring-shape - The corner radius of the focus ring.
|
|
485
485
|
* @cssprop --m3e-option-icon-size - The size of the option icons.
|
|
486
|
+
* @cssprop --m3e-option-shape - Base shape of the option.
|
|
487
|
+
* @cssprop --m3e-option-selected-shape - Shape used for a selected option.
|
|
488
|
+
* @cssprop --m3e-option-first-child-shape - Shape for the first option in a list.
|
|
489
|
+
* @cssprop --m3e-option-last-child-shape - Shape for the last option in a list.
|
|
490
|
+
|
|
486
491
|
*/
|
|
487
492
|
let M3eOptionElement = class M3eOptionElement extends Selected(Disabled(Role(LitElement, "option"))) {
|
|
488
493
|
constructor() {
|
|
@@ -534,7 +539,7 @@ let M3eOptionElement = class M3eOptionElement extends Selected(Disabled(Role(Lit
|
|
|
534
539
|
}
|
|
535
540
|
/** @inheritdoc */
|
|
536
541
|
render() {
|
|
537
|
-
return html`<div class="base"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring"
|
|
542
|
+
return html`<div class="base"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple><div class="touch" aria-hidden="true"></div><div class="wrapper"><div class="icon" aria-hidden="true"><svg class="check" viewBox="0 -960 960 960"><path fill="currentColor" d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg></div><m3e-text-overflow class="label"><slot @slotchange="${__classPrivateFieldGet(this, _M3eOptionElement_instances, "m", _M3eOptionElement_handleSlotChange)}"></slot></m3e-text-overflow></div></div>`;
|
|
538
543
|
}
|
|
539
544
|
};
|
|
540
545
|
_M3eOptionElement_handleSlotChange = function _M3eOptionElement_handleSlotChange(e) {
|
|
@@ -542,7 +547,7 @@ _M3eOptionElement_handleSlotChange = function _M3eOptionElement_handleSlotChange
|
|
|
542
547
|
this.classList.toggle("-empty", this.isEmpty);
|
|
543
548
|
};
|
|
544
549
|
/** The styles of the element. */
|
|
545
|
-
M3eOptionElement.styles = css`:host { display: block; outline: none; user-select: none; flex: none; height: var(--m3e-option-container-height,
|
|
550
|
+
M3eOptionElement.styles = css`:host { display: block; outline: none; user-select: none; flex: none; height: var(--m3e-option-container-height, 2.75rem); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } :host(:not([aria-disabled="true"])) .base { color: var(--m3e-option-color, ${DesignToken.color.onSurface}); --m3e-state-layer-hover-color: var(--m3e-option-container-hover-color, ${DesignToken.color.onSurface}); --m3e-state-layer-focus-color: var(--m3e-option-container-focus-color, ${DesignToken.color.onSurface}); --m3e-ripple-color: var(--m3e-option-ripple-color, ${DesignToken.color.onSurface}); } :host(:not([aria-disabled="true"]):not(.-empty)[selected]) .base { color: var(--m3e-option-selected-color, ${DesignToken.color.onTertiaryContainer}); background-color: var(--m3e-option-selected-container-color, ${DesignToken.color.tertiaryContainer}); --m3e-state-layer-hover-color: var( --m3e-option-selected-container-hover-color, ${DesignToken.color.onTertiaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-option-selected-container-focus-color, ${DesignToken.color.onTertiaryContainer} ); --m3e-ripple-color: var(--m3e-option-selected-ripple-color, ${DesignToken.color.onTertiaryContainer}); } :host(:not([aria-disabled="true"])) { cursor: pointer; } :host([aria-disabled="true"]) .base { color: color-mix( in srgb, var(--m3e-option-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-option-disabled-opacity, 38%), transparent ); } .base { box-sizing: border-box; vertical-align: middle; display: inline-flex; align-items: center; position: relative; width: 100%; height: 100%; border-radius: var(--m3e-option-shape, ${DesignToken.shape.corner.extraSmall}); transition: ${unsafeCSS(`border-radius ${DesignToken.motion.spring.fastEffects}`)}; } :host([selected]:not(.-first)) .base { border-top-left-radius: var(--m3e-option-selected-shape, ${DesignToken.shape.corner.medium}); border-top-right-radius: var(--m3e-option-selected-shape, ${DesignToken.shape.corner.medium}); } :host([selected]:not(.-last)) .base { border-bottom-left-radius: var(--m3e-option-selected-shape, ${DesignToken.shape.corner.medium}); border-bottom-right-radius: var(--m3e-option-selected-shape, ${DesignToken.shape.corner.medium}); } :host(.-first) .base { border-top-left-radius: var(--m3e-option-first-child-shape, ${DesignToken.shape.corner.medium}); border-top-right-radius: var(--m3e-option-first-child-shape, ${DesignToken.shape.corner.medium}); } :host(.-last) .base { border-bottom-left-radius: var(--m3e-option-last-child-shape, ${DesignToken.shape.corner.medium}); border-bottom-right-radius: var(--m3e-option-last-child-shape, ${DesignToken.shape.corner.medium}); } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .wrapper { flex: 1 1 auto; display: inline-flex; align-items: center; width: 100%; overflow: hidden; column-gap: var(--m3e-option-icon-label-space, 0.5rem); padding-inline-start: var(--_option-padding-start, var(--m3e-option-padding-start, 0.75rem)); padding-inline-end: var(--m3e-option-padding-end, 0.75rem); font-size: var(--m3e-option-label-text-font-size, ${DesignToken.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-option-label-text-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-option-label-text-line-height, ${DesignToken.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-option-label-text-tracking, ${DesignToken.typescale.standard.label.large.tracking}); } .focus-ring { border-radius: var(--m3e-option-focus-ring-shape, inherit); } .icon { margin-inline-start: calc(0px - var(--m3e-option-icon-label-space, 0.5rem)); transition: ${unsafeCSS(`margin-inline-start ${DesignToken.motion.spring.fastEffects}, width ${DesignToken.motion.spring.fastEffects}`)}; } :host([selected]) .icon { margin-inline-start: 0; width: var(--m3e-option-icon-size, 1.25rem); } .icon { flex: none; width: 0px; font-size: var(--m3e-option-icon-size, 1.25rem); } :host(.-empty) .icon, :host(.-hide-selection-indicator) .icon, :host(:not([selected])) .check { display: none; } @media (forced-colors: active) { .base { background-color: Menu; color: MenuText; } :host([aria-disabled="true"]) .base { color: GrayText; } } @media (prefers-reduced-motion) { .icon, .base { transition: none; } }`;
|
|
546
551
|
__decorate([e(".focus-ring")], M3eOptionElement.prototype, "focusRing", void 0);
|
|
547
552
|
__decorate([e(".state-layer")], M3eOptionElement.prototype, "stateLayer", void 0);
|
|
548
553
|
__decorate([e(".ripple")], M3eOptionElement.prototype, "_ripple", void 0);
|
|
@@ -616,7 +621,7 @@ M3eOptGroupElement.styles = css`:host { display: block; --_option-padding-start:
|
|
|
616
621
|
M3eOptGroupElement.__nextId = 0;
|
|
617
622
|
M3eOptGroupElement = M3eOptGroupElement_1 = __decorate([t$1("m3e-optgroup")], M3eOptGroupElement);
|
|
618
623
|
|
|
619
|
-
var _M3eOptionPanelElement_instances, _M3eOptionPanelElement_trigger, _M3eOptionPanelElement_anchor, _M3eOptionPanelElement_anchorCleanup, _M3eOptionPanelElement_documentClickHandler, _M3eOptionPanelElement_scrollController, _M3eOptionPanelElement_toggleHandler, _M3eOptionPanelElement_handleDocumentClick;
|
|
624
|
+
var _M3eOptionPanelElement_instances, _M3eOptionPanelElement_trigger, _M3eOptionPanelElement_anchor, _M3eOptionPanelElement_anchorCleanup, _M3eOptionPanelElement_documentClickHandler, _M3eOptionPanelElement_scrollController, _M3eOptionPanelElement_toggleHandler, _M3eOptionPanelElement_handleSlotChange, _M3eOptionPanelElement_handleDocumentClick;
|
|
620
625
|
var M3eOptionPanelElement_1;
|
|
621
626
|
/**
|
|
622
627
|
* Presents a list of options on a temporary surface.
|
|
@@ -633,14 +638,19 @@ var M3eOptionPanelElement_1;
|
|
|
633
638
|
* @fires beforetoggle - Dispatched before the toggle state changes.
|
|
634
639
|
* @fires toggle - Dispatched after the toggle state has changed.
|
|
635
640
|
*
|
|
636
|
-
* @cssprop --m3e-option-panel-container-shape -
|
|
637
|
-
* @cssprop --m3e-option-panel-container-min-width - Minimum width of the
|
|
638
|
-
* @cssprop --m3e-option-panel-container-max-width - Maximum width of the
|
|
639
|
-
* @cssprop --m3e-option-panel-container-max-height - Maximum height of the
|
|
640
|
-
* @cssprop --m3e-option-panel-container-padding-block - Vertical padding inside the
|
|
641
|
-
* @cssprop --m3e-option-panel-container-
|
|
642
|
-
* @cssprop --m3e-option-panel-container-
|
|
641
|
+
* @cssprop --m3e-option-panel-container-shape - Corner radius of the panel container.
|
|
642
|
+
* @cssprop --m3e-option-panel-container-min-width - Minimum width of the panel container.
|
|
643
|
+
* @cssprop --m3e-option-panel-container-max-width - Maximum width of the panel container.
|
|
644
|
+
* @cssprop --m3e-option-panel-container-max-height - Maximum height of the panel container.
|
|
645
|
+
* @cssprop --m3e-option-panel-container-padding-block - Vertical padding inside the panel container.
|
|
646
|
+
* @cssprop --m3e-option-panel-container-padding-inline - Horizontal padding inside the panel container.
|
|
647
|
+
* @cssprop --m3e-option-panel-container-color - Background color of the panel container.
|
|
648
|
+
* @cssprop --m3e-option-panel-container-elevation - Box shadow elevation of the panel container.
|
|
649
|
+
* @cssprop --m3e-option-panel-gap - Vertical spacing between option items.
|
|
643
650
|
* @cssprop --m3e-option-panel-divider-spacing - Vertical spacing around slotted `m3e-divider` elements.
|
|
651
|
+
* @cssprop --m3e-option-panel-text-highlight-container-color - Background color used for text highlight matches.
|
|
652
|
+
* @cssprop --m3e-option-panel-text-highlight-color - Text color used for text highlight matches.
|
|
653
|
+
|
|
644
654
|
*/
|
|
645
655
|
let M3eOptionPanelElement = M3eOptionPanelElement_1 = class M3eOptionPanelElement extends Role(LitElement, "listbox") {
|
|
646
656
|
constructor() {
|
|
@@ -746,14 +756,14 @@ let M3eOptionPanelElement = M3eOptionPanelElement_1 = class M3eOptionPanelElemen
|
|
|
746
756
|
}
|
|
747
757
|
}
|
|
748
758
|
/** @inheritdoc */
|
|
749
|
-
render() {
|
|
750
|
-
return html`<slot></slot>`;
|
|
751
|
-
}
|
|
752
|
-
/** @inheritdoc */
|
|
753
759
|
firstUpdated(_changedProperties) {
|
|
754
760
|
super.firstUpdated(_changedProperties);
|
|
755
761
|
requestAnimationFrame(() => this.classList.remove("-no-animate"));
|
|
756
762
|
}
|
|
763
|
+
/** @inheritdoc */
|
|
764
|
+
render() {
|
|
765
|
+
return html`<div class="base"><slot @slotchange="${__classPrivateFieldGet(this, _M3eOptionPanelElement_instances, "m", _M3eOptionPanelElement_handleSlotChange)}"></slot></div>`;
|
|
766
|
+
}
|
|
757
767
|
};
|
|
758
768
|
_M3eOptionPanelElement_trigger = new WeakMap();
|
|
759
769
|
_M3eOptionPanelElement_anchor = new WeakMap();
|
|
@@ -762,16 +772,30 @@ _M3eOptionPanelElement_documentClickHandler = new WeakMap();
|
|
|
762
772
|
_M3eOptionPanelElement_scrollController = new WeakMap();
|
|
763
773
|
_M3eOptionPanelElement_toggleHandler = new WeakMap();
|
|
764
774
|
_M3eOptionPanelElement_instances = new WeakSet();
|
|
775
|
+
_M3eOptionPanelElement_handleSlotChange = function _M3eOptionPanelElement_handleSlotChange() {
|
|
776
|
+
const options = [...this.querySelectorAll("m3e-option")];
|
|
777
|
+
options.forEach((x, i) => {
|
|
778
|
+
x.classList.toggle("-first", i === 0);
|
|
779
|
+
x.classList.toggle("-last", i === options.length - 1);
|
|
780
|
+
});
|
|
781
|
+
};
|
|
765
782
|
_M3eOptionPanelElement_handleDocumentClick = function _M3eOptionPanelElement_handleDocumentClick(e) {
|
|
766
783
|
if (!e.composedPath().some(x => x instanceof M3eOptionPanelElement_1 || x === __classPrivateFieldGet(this, _M3eOptionPanelElement_trigger, "f") || x === __classPrivateFieldGet(this, _M3eOptionPanelElement_anchor, "f"))) {
|
|
767
784
|
this.hide();
|
|
768
785
|
}
|
|
769
786
|
};
|
|
787
|
+
(() => {
|
|
788
|
+
if (document) {
|
|
789
|
+
const lightDomStyle = new CSSStyleSheet();
|
|
790
|
+
lightDomStyle.replaceSync(css`m3e-option-panel > m3e-divider { margin-block: var(--m3e-option-panel-divider-spacing, 0.5rem); }`.toString());
|
|
791
|
+
document.adoptedStyleSheets = [...document.adoptedStyleSheets, lightDomStyle];
|
|
792
|
+
}
|
|
793
|
+
})();
|
|
770
794
|
/** The styles of the element. */
|
|
771
|
-
M3eOptionPanelElement.styles = css`:host { position: absolute; flex-direction: column; padding: unset; margin: unset; border: unset; overflow-y: auto; scrollbar-width: ${DesignToken.scrollbar.thinWidth}; scrollbar-color: ${DesignToken.scrollbar.color}; border-radius: var(--m3e-option-panel-container-shape, ${DesignToken.shape.corner.
|
|
795
|
+
M3eOptionPanelElement.styles = css`:host { position: absolute; flex-direction: column; padding: unset; margin: unset; border: unset; overflow-y: auto; scrollbar-width: ${DesignToken.scrollbar.thinWidth}; scrollbar-color: ${DesignToken.scrollbar.color}; scroll-padding-block: calc( var(--m3e-focus-ring-thickness, 0.1875rem) + var(--m3e-option-panel-container-padding-block, 0.25rem) ); border-radius: var(--m3e-option-panel-container-shape, ${DesignToken.shape.corner.large}); min-width: var(--m3e-option-panel-container-min-width, 7rem); max-width: var(--m3e-option-panel-container-max-width, 17.5rem); max-height: var(--m3e-option-panel-container-max-height, 17.5rem); background-color: var(--m3e-option-panel-container-color, ${DesignToken.color.surfaceContainer}); box-shadow: var(--m3e-option-panel-container-elevation, ${DesignToken.elevation.level3}); opacity: 0; display: none; } .base { display: flex; flex-direction: column; row-gap: var(--m3e-option-panel-gap, 0.125rem); min-width: inherit; max-width: inherit; padding-block: var(--m3e-option-panel-container-padding-block, 0.25rem); padding-inline: var(--m3e-option-panel-container-padding-inline, 0.25rem); --m3e-text-highlight-container-color: var( --m3e-option-panel-text-highlight-container-color, ${DesignToken.color.tertiaryContainer} ); --m3e-text-highlight-color: var( --m3e-option-panel-text-highlight-color, ${DesignToken.color.onTertiaryContainer} ); } :host(:not(.-no-animate)) { transition: ${unsafeCSS(`opacity ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard},
|
|
772
796
|
transform ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard},
|
|
773
797
|
overlay ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete,
|
|
774
|
-
display ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete`)}; } :host { transform: scaleY(0.8); } :host(:popover-open) { transform: scaleY(1); display:
|
|
798
|
+
display ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete`)}; } :host { transform: scaleY(0.8); } :host(:popover-open) { transform: scaleY(1); display: block; opacity: 1; } :host::backdrop { background-color: transparent; } :host(.-bottom) { transform-origin: top; } :host(.-top) { transform-origin: bottom; } @starting-style { :host(:popover-open) { transform: scaleY(0.8); } } @media (prefers-reduced-motion) { :host(:not(.-no-animate)) { transition: none; } } @media (forced-colors: active) { :host { background-color: Menu; color: MenuText; outline: 1px solid MenuText; } }`;
|
|
775
799
|
M3eOptionPanelElement = M3eOptionPanelElement_1 = __decorate([t$1("m3e-option-panel")], M3eOptionPanelElement);
|
|
776
800
|
|
|
777
801
|
export { M3eOptGroupElement, M3eOptionElement, M3eOptionPanelElement };
|