@swiftwc/ui 0.0.0-dev.112 → 0.0.0-dev.113
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/generated/components/h-flex-stack.d.ts +16 -0
- package/generated/components/h-flex-stack.js +18 -0
- package/generated/components/index.d.ts +2 -0
- package/generated/components/index.js +2 -0
- package/generated/components/picker-view.d.ts +3 -20
- package/generated/components/picker-view.js +306 -257
- package/generated/components/tab-view.js +1 -5
- package/generated/components/v-flex-stack.d.ts +16 -0
- package/generated/components/v-flex-stack.js +18 -0
- package/generated/css/index.css +268 -150
- package/html-data/en.json +83 -21
- package/package.json +1 -1
- package/scss/_maps.scss +1 -1
- package/scss/components/_h-flex-stack.scss +2 -0
- package/scss/components/_index.scss +1 -1
- package/scss/components/_picker-view.scss +157 -117
- package/scss/components/_v-flex-stack.scss +2 -0
- package/scss/utils/_stacks.scss +3 -1
package/html-data/en.json
CHANGED
|
@@ -309,6 +309,23 @@
|
|
|
309
309
|
"name": "h-divider",
|
|
310
310
|
"description": "undefined\n\n```ts\ninterface HDividerSignature {}\n\nclass HDivider extends HTMLElement<HDividerSignature> {}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'h-divider': HDivider // <h-divider></h-divider>\n }\n}\n\n```\n"
|
|
311
311
|
},
|
|
312
|
+
{
|
|
313
|
+
"name": "h-flex-stack",
|
|
314
|
+
"references": [
|
|
315
|
+
{
|
|
316
|
+
"name": "Documentation",
|
|
317
|
+
"url": "https://swiftwc.github.io/ui/web-components/h-flex-stack"
|
|
318
|
+
}
|
|
319
|
+
],
|
|
320
|
+
"attributes": [
|
|
321
|
+
{
|
|
322
|
+
"name": "spacing",
|
|
323
|
+
"description": "\nDescription: The gap between the primary axis",
|
|
324
|
+
"valueSet": "Spacing"
|
|
325
|
+
}
|
|
326
|
+
],
|
|
327
|
+
"description": "A view that arranges its children side by side.\n---\n\n```ts\ninterface HFlexStackSignature {\n Attributes: {\n spacing?: Spacing // The gap between the primary axis\n }\n}\n\nclass HFlexStack extends HTMLElement<HFlexStackSignature> {}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'h-flex-stack': HFlexStack // <h-flex-stack></h-flex-stack>\n }\n}\n\n```\n"
|
|
328
|
+
},
|
|
312
329
|
{
|
|
313
330
|
"name": "h-stack",
|
|
314
331
|
"references": [
|
|
@@ -562,6 +579,37 @@
|
|
|
562
579
|
}
|
|
563
580
|
],
|
|
564
581
|
"attributes": [
|
|
582
|
+
{
|
|
583
|
+
"name": "label-value-placement",
|
|
584
|
+
"description": "Value Type: “vertical” | “horizontal” | “auto”",
|
|
585
|
+
"values": [
|
|
586
|
+
{
|
|
587
|
+
"name": "vertical"
|
|
588
|
+
},
|
|
589
|
+
{
|
|
590
|
+
"name": "horizontal"
|
|
591
|
+
},
|
|
592
|
+
{
|
|
593
|
+
"name": "auto"
|
|
594
|
+
}
|
|
595
|
+
]
|
|
596
|
+
},
|
|
597
|
+
{
|
|
598
|
+
"name": "horizontal-radio-group-layout",
|
|
599
|
+
"description": "Value Type: boolean"
|
|
600
|
+
},
|
|
601
|
+
{
|
|
602
|
+
"name": "prompt"
|
|
603
|
+
},
|
|
604
|
+
{
|
|
605
|
+
"name": "prompt-icon"
|
|
606
|
+
},
|
|
607
|
+
{
|
|
608
|
+
"name": "label"
|
|
609
|
+
},
|
|
610
|
+
{
|
|
611
|
+
"name": "name"
|
|
612
|
+
},
|
|
565
613
|
{
|
|
566
614
|
"name": "picker-style",
|
|
567
615
|
"description": "Value Type: “menu” | “inline” | “navigation-link” | “sheet” | “automatic”",
|
|
@@ -583,36 +631,33 @@
|
|
|
583
631
|
}
|
|
584
632
|
]
|
|
585
633
|
},
|
|
634
|
+
{
|
|
635
|
+
"name": "selection"
|
|
636
|
+
},
|
|
637
|
+
{
|
|
638
|
+
"name": "searchable",
|
|
639
|
+
"description": "Value Type: boolean"
|
|
640
|
+
},
|
|
641
|
+
{
|
|
642
|
+
"name": "current-value-label"
|
|
643
|
+
},
|
|
644
|
+
{
|
|
645
|
+
"name": "current-value-icon"
|
|
646
|
+
},
|
|
586
647
|
{
|
|
587
648
|
"name": "help",
|
|
588
|
-
"description": "
|
|
649
|
+
"description": "Adds a help tooltip to the trigger of the picker, if style supports one"
|
|
589
650
|
},
|
|
590
651
|
{
|
|
591
652
|
"name": "dictionary",
|
|
592
|
-
"description": "Value Type:
|
|
593
|
-
"values": [
|
|
594
|
-
{
|
|
595
|
-
"name": "DictEntry[]"
|
|
596
|
-
}
|
|
597
|
-
]
|
|
653
|
+
"description": "Value Type: Array.<DictEntry>\nDescription: Renders all options using this array"
|
|
598
654
|
},
|
|
599
655
|
{
|
|
600
|
-
"name": "
|
|
601
|
-
"description": "Value Type:
|
|
602
|
-
"values": [
|
|
603
|
-
{
|
|
604
|
-
"name": "vertical"
|
|
605
|
-
},
|
|
606
|
-
{
|
|
607
|
-
"name": "horizontal"
|
|
608
|
-
},
|
|
609
|
-
{
|
|
610
|
-
"name": "auto"
|
|
611
|
-
}
|
|
612
|
-
]
|
|
656
|
+
"name": "required",
|
|
657
|
+
"description": "Value Type: boolean"
|
|
613
658
|
}
|
|
614
659
|
],
|
|
615
|
-
"description": "A control that selects one value from a set of options.\n---\n\n```ts\ninterface PickerViewSignature {\n Attributes: {\n 'picker-style'?:\n | 'menu'\n | 'inline'\n | 'navigation-link'\n | 'sheet'\n | 'automatic'\n
|
|
660
|
+
"description": "A control that selects one value from a set of options.\n---\n\n```ts\ninterface PickerViewSignature {\n Attributes: {\n 'label-value-placement'?: 'vertical' | 'horizontal' | 'auto'\n 'horizontal-radio-group-layout'?: boolean\n prompt?: string\n 'prompt-icon'?: string\n label?: string\n name?: string\n 'picker-style'?:\n | 'menu'\n | 'inline'\n | 'navigation-link'\n | 'sheet'\n | 'automatic'\n selection?: string\n searchable?: boolean\n 'current-value-label'?: string\n 'current-value-icon'?: string\n help?: string // Adds a help tooltip to the trigger of the picker, if style supports one\n dictionary?: Array<DictEntry> // Renders all options using this array\n required?: boolean\n }\n\n Slots: {\n default: HTMLElement[] // The default slot.\n label: HTMLElement[]\n list: HTMLElement[]\n 'validity-options': HTMLOptionElement[]\n }\n}\n\nclass PickerView extends HTMLElement<PickerViewSignature> {\n static formAssociated = true\n\n selection: string\n readonly template: DocumentFragment\n readonly pickerStyle:\n | 'automatic'\n | 'menu'\n | 'inline'\n | 'navigation-link'\n | 'sheet'\n | 'radio-group'\n readonly name: string // Form participation property\n\n setValidity(): void\n setCustomValidity(): void\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'picker-view': PickerView // <picker-view></picker-view>\n }\n}\n\n```\n"
|
|
616
661
|
},
|
|
617
662
|
{
|
|
618
663
|
"name": "plain-button",
|
|
@@ -957,6 +1002,23 @@
|
|
|
957
1002
|
"name": "v-divider",
|
|
958
1003
|
"description": "undefined\n\n```ts\ninterface VDividerSignature {}\n\nclass VDivider extends HTMLElement<VDividerSignature> {}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'v-divider': VDivider // <v-divider></v-divider>\n }\n}\n\n```\n"
|
|
959
1004
|
},
|
|
1005
|
+
{
|
|
1006
|
+
"name": "v-flex-stack",
|
|
1007
|
+
"references": [
|
|
1008
|
+
{
|
|
1009
|
+
"name": "Documentation",
|
|
1010
|
+
"url": "https://swiftwc.github.io/ui/web-components/v-flex-stack"
|
|
1011
|
+
}
|
|
1012
|
+
],
|
|
1013
|
+
"attributes": [
|
|
1014
|
+
{
|
|
1015
|
+
"name": "template",
|
|
1016
|
+
"description": "\nDescription: The main-axis grid template",
|
|
1017
|
+
"valueSet": "Template"
|
|
1018
|
+
}
|
|
1019
|
+
],
|
|
1020
|
+
"description": "A view that arranges its children one on top of the other.\n---\n\n```ts\ninterface VFlexStackSignature {\n Attributes: {\n template?: Template // The main-axis grid template\n }\n}\n\nclass VFlexStack extends HTMLElement<VFlexStackSignature> {}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'v-flex-stack': VFlexStack // <v-flex-stack></v-flex-stack>\n }\n}\n\n```\n"
|
|
1021
|
+
},
|
|
960
1022
|
{
|
|
961
1023
|
"name": "v-keyboard",
|
|
962
1024
|
"references": [
|
package/package.json
CHANGED
package/scss/_maps.scss
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
$picker-styles-names: menu, navigation-link, sheet;
|
|
1
|
+
$picker-styles-names: menu, navigation-link, sheet, radio-group;
|
|
2
2
|
$label-styles-names: icon-only, title-only, title-and-icon;
|
|
3
3
|
$list-styles-names: inset, inset-grouped, sidebar;
|
|
4
4
|
$form-styles-names: inset, inset-grouped, sidebar;
|
|
@@ -103,7 +103,7 @@
|
|
|
103
103
|
:where(menu-view)::part(menu-scrollable),
|
|
104
104
|
:where(picker-view)::part(picker-stack),
|
|
105
105
|
:where(picker-view)::part(picker-label-stack),
|
|
106
|
-
:where(picker-view)::part(picker-input-stack),
|
|
106
|
+
// :where(picker-view)::part(picker-input-stack),
|
|
107
107
|
:where(tool-bar)::part(top-bar),
|
|
108
108
|
:where(tool-bar)::part(bottom-bar),
|
|
109
109
|
:where(label-view)::part(label-image-stack),
|
|
@@ -5,73 +5,100 @@
|
|
|
5
5
|
@use '../mixins';
|
|
6
6
|
|
|
7
7
|
$picker-ifs: (
|
|
8
|
+
radio-group: (
|
|
9
|
+
--picker--labelstack-display: grid,
|
|
10
|
+
// --picker--inputstack-display: flex,
|
|
11
|
+
// --picker--inputstack-flex-flow: row wrap,
|
|
12
|
+
--picker--inputstack-text-align: start,
|
|
13
|
+
--picker--inputstack-gap: 1rem,
|
|
14
|
+
// copy from labeled-content
|
|
15
|
+
// --picker--host-display: flex,
|
|
16
|
+
// --picker--host-justify-content: space-between,
|
|
17
|
+
--picker--host-row-gap: var(--labeled-content-row-gap),
|
|
18
|
+
--picker--host-column-gap: var(--labeled-content-column-gap),
|
|
19
|
+
//
|
|
20
|
+
--picker--host-grid-padding-inline: var(--itempadistart,) var(--itempadiend,),
|
|
21
|
+
--picker--host-grid-padding-block: var(--itempadbstart,) var(--itempadbend,),
|
|
22
|
+
--picker--host-grid-border-radius: var(--itemradiustl,) var(--itemradiustr,) var(--itemradiusbr,) var(--itemradiusbl,),
|
|
23
|
+
--picker--host-grid-background: var(--itemface,),
|
|
24
|
+
--picker--host-grid-color: var(--itemtext,),
|
|
25
|
+
--picker--host-grid-border: var(--itemborder,),
|
|
26
|
+
// --picker--inputstack-child-place-self: end,
|
|
27
|
+
//
|
|
28
|
+
// --picker--host-flex-wrap: wrap,
|
|
29
|
+
// --picker--inputstack-flex-shrink: 0,
|
|
30
|
+
// --picker--inputstack-max-width: 70%,
|
|
31
|
+
),
|
|
8
32
|
menu: (
|
|
9
33
|
--picker--labelstack-display: grid,
|
|
10
|
-
--picker--
|
|
34
|
+
--picker--inputstack-text-align: start,
|
|
11
35
|
// copy from labeled-content
|
|
12
|
-
// --picker--
|
|
13
|
-
// --picker--
|
|
14
|
-
--picker--
|
|
15
|
-
--picker--
|
|
36
|
+
// --picker--host-display: flex,
|
|
37
|
+
// --picker--host-justify-content: space-between,
|
|
38
|
+
--picker--host-row-gap: var(--labeled-content-row-gap),
|
|
39
|
+
--picker--host-column-gap: var(--labeled-content-column-gap),
|
|
16
40
|
//
|
|
17
|
-
--picker--
|
|
18
|
-
--picker--
|
|
19
|
-
--picker--
|
|
20
|
-
--picker--
|
|
21
|
-
--picker--
|
|
22
|
-
--picker--
|
|
23
|
-
// --picker--
|
|
41
|
+
--picker--host-grid-padding-inline: var(--itempadistart,) var(--itempadiend,),
|
|
42
|
+
--picker--host-grid-padding-block: var(--itempadbstart,) var(--itempadbend,),
|
|
43
|
+
--picker--host-grid-border-radius: var(--itemradiustl,) var(--itemradiustr,) var(--itemradiusbr,) var(--itemradiusbl,),
|
|
44
|
+
--picker--host-grid-background: var(--itemface,),
|
|
45
|
+
--picker--host-grid-color: var(--itemtext,),
|
|
46
|
+
--picker--host-grid-border: var(--itemborder,),
|
|
47
|
+
// --picker--inputstack-child-place-self: end,
|
|
24
48
|
//
|
|
25
|
-
// --picker--
|
|
26
|
-
// --picker--
|
|
27
|
-
// --picker--
|
|
49
|
+
// --picker--host-flex-wrap: wrap,
|
|
50
|
+
// --picker--inputstack-flex-shrink: 0,
|
|
51
|
+
// --picker--inputstack-max-width: 70%,
|
|
28
52
|
),
|
|
29
53
|
navigation-link: (
|
|
30
54
|
--picker--labelstack-display: grid,
|
|
31
|
-
--picker--
|
|
55
|
+
--picker--inputstack-text-align: end,
|
|
32
56
|
// copy from labeled-content
|
|
33
|
-
// --picker--
|
|
34
|
-
// --picker--
|
|
35
|
-
--picker--
|
|
36
|
-
--picker--
|
|
57
|
+
// --picker--host-display: flex,
|
|
58
|
+
// --picker--host-justify-content: space-between,
|
|
59
|
+
--picker--host-row-gap: var(--labeled-content-row-gap),
|
|
60
|
+
--picker--host-column-gap: var(--labeled-content-column-gap),
|
|
37
61
|
//
|
|
38
|
-
--picker--
|
|
39
|
-
--picker--
|
|
40
|
-
--picker--
|
|
41
|
-
--picker--
|
|
42
|
-
--picker--
|
|
43
|
-
--picker--
|
|
44
|
-
// --picker--
|
|
62
|
+
--picker--host-grid-padding-inline: var(--itempadistart,) var(--itempadiend,),
|
|
63
|
+
--picker--host-grid-padding-block: var(--itempadbstart,) var(--itempadbend,),
|
|
64
|
+
--picker--host-grid-border-radius: var(--itemradiustl,) var(--itemradiustr,) var(--itemradiusbr,) var(--itemradiusbl,),
|
|
65
|
+
--picker--host-grid-background: var(--itemface,),
|
|
66
|
+
--picker--host-grid-color: var(--itemtext,),
|
|
67
|
+
--picker--host-grid-border: var(--itemborder,),
|
|
68
|
+
// --picker--inputstack-child-place-self: end,
|
|
45
69
|
//
|
|
46
|
-
// --picker--
|
|
47
|
-
// --picker--
|
|
48
|
-
// --picker--
|
|
70
|
+
// --picker--host-flex-wrap: wrap,
|
|
71
|
+
// --picker--inputstack-flex-shrink: 0,
|
|
72
|
+
// --picker--inputstack-max-width: 70%,
|
|
49
73
|
),
|
|
50
74
|
sheet: (
|
|
51
75
|
--picker--labelstack-display: grid,
|
|
52
|
-
--picker--
|
|
76
|
+
--picker--inputstack-text-align: end,
|
|
53
77
|
// copy from labeled-content
|
|
54
|
-
// --picker--
|
|
55
|
-
// --picker--
|
|
56
|
-
--picker--
|
|
57
|
-
--picker--
|
|
78
|
+
// --picker--host-display: flex,
|
|
79
|
+
// --picker--host-justify-content: space-between,
|
|
80
|
+
--picker--host-row-gap: var(--labeled-content-row-gap),
|
|
81
|
+
--picker--host-column-gap: var(--labeled-content-column-gap),
|
|
58
82
|
//
|
|
59
|
-
--picker--
|
|
60
|
-
--picker--
|
|
61
|
-
--picker--
|
|
62
|
-
--picker--
|
|
63
|
-
--picker--
|
|
64
|
-
--picker--
|
|
65
|
-
// --picker--
|
|
83
|
+
--picker--host-grid-padding-inline: var(--itempadistart,) var(--itempadiend,),
|
|
84
|
+
--picker--host-grid-padding-block: var(--itempadbstart,) var(--itempadbend,),
|
|
85
|
+
--picker--host-grid-border-radius: var(--itemradiustl,) var(--itemradiustr,) var(--itemradiusbr,) var(--itemradiusbl,),
|
|
86
|
+
--picker--host-grid-background: var(--itemface,),
|
|
87
|
+
--picker--host-grid-color: var(--itemtext,),
|
|
88
|
+
--picker--host-grid-border: var(--itemborder,),
|
|
89
|
+
// --picker--inputstack-child-place-self: end,
|
|
66
90
|
//
|
|
67
|
-
// --picker--
|
|
68
|
-
// --picker--
|
|
69
|
-
// --picker--
|
|
91
|
+
// --picker--host-flex-wrap: wrap,
|
|
92
|
+
// --picker--inputstack-flex-shrink: 0,
|
|
93
|
+
// --picker--inputstack-max-width: 70%,
|
|
70
94
|
),
|
|
71
95
|
);
|
|
96
|
+
$picker-elses: (
|
|
97
|
+
--picker--labelstack-display: none,
|
|
98
|
+
);
|
|
72
99
|
|
|
73
100
|
// $picker-elses: (
|
|
74
|
-
// --picker--
|
|
101
|
+
// --picker--host-grid-template-columns: minmax(0, 1fr), //auto minmax(0, 1fr),
|
|
75
102
|
// );
|
|
76
103
|
|
|
77
104
|
// @mixin make-button-affordance() {
|
|
@@ -105,48 +132,55 @@ $picker-ifs: (
|
|
|
105
132
|
grid-template-rows: minmax(0, 1fr);
|
|
106
133
|
|
|
107
134
|
// wire these to mimic componentize
|
|
108
|
-
padding-inline: var(--picker--
|
|
109
|
-
padding-block: var(--picker--
|
|
110
|
-
background: var(--picker--
|
|
111
|
-
border-radius: var(--picker--
|
|
112
|
-
border: var(--picker--
|
|
113
|
-
color: var(--picker--
|
|
135
|
+
padding-inline: var(--picker--host-grid-padding-inline,);
|
|
136
|
+
padding-block: var(--picker--host-grid-padding-block,);
|
|
137
|
+
background: var(--picker--host-grid-background,);
|
|
138
|
+
border-radius: var(--picker--host-grid-border-radius,);
|
|
139
|
+
border: var(--picker--host-grid-border,);
|
|
140
|
+
color: var(--picker--host-grid-color,);
|
|
114
141
|
|
|
115
142
|
&::part(picker-stack) {
|
|
116
143
|
// grid-auto-flow: column;
|
|
117
|
-
grid-template-columns: var(--picker--
|
|
144
|
+
grid-template-columns: var(--picker--host-grid-template-columns,); //minmax(30%, 1fr) auto;
|
|
118
145
|
|
|
119
|
-
grid-template-rows: var(--picker--
|
|
120
|
-
row-gap: var(--picker--
|
|
146
|
+
grid-template-rows: var(--picker--host-grid-template-rows,); //minmax(0, 1fr);
|
|
147
|
+
row-gap: var(--picker--host-row-gap,);
|
|
121
148
|
|
|
122
|
-
column-gap: var(--picker--
|
|
149
|
+
column-gap: var(--picker--host-column-gap,);
|
|
123
150
|
|
|
124
|
-
// display: var(--picker--
|
|
151
|
+
// display: var(--picker--host-display,);
|
|
125
152
|
|
|
126
|
-
// flex-wrap: var(--picker--
|
|
153
|
+
// flex-wrap: var(--picker--host-flex-wrap,);
|
|
127
154
|
|
|
128
|
-
// justify-content: var(--picker--
|
|
155
|
+
// justify-content: var(--picker--host-justify-content,);
|
|
129
156
|
|
|
130
|
-
// grid-template-columns: var(--picker--
|
|
157
|
+
// grid-template-columns: var(--picker--host-grid-template-columns,);
|
|
131
158
|
|
|
132
159
|
// grid-template-rows: minmax(0, 1fr);
|
|
133
160
|
|
|
134
161
|
// column-gap: 1rem;
|
|
135
162
|
|
|
136
163
|
// // wire these to mimic componentize
|
|
137
|
-
// padding-inline: var(--picker--
|
|
138
|
-
// padding-block: var(--picker--
|
|
139
|
-
// background: var(--picker--
|
|
140
|
-
// border-radius: var(--picker--
|
|
141
|
-
// border: var(--picker--
|
|
142
|
-
// color: var(--picker--
|
|
164
|
+
// padding-inline: var(--picker--host-grid-padding-inline,);
|
|
165
|
+
// padding-block: var(--picker--host-grid-padding-block,);
|
|
166
|
+
// background: var(--picker--host-grid-background,);
|
|
167
|
+
// border-radius: var(--picker--host-grid-border-radius,);
|
|
168
|
+
// border: var(--picker--host-grid-border,);
|
|
169
|
+
// color: var(--picker--host-grid-color,);
|
|
143
170
|
}
|
|
144
171
|
|
|
145
172
|
&::part(picker-input-stack) {
|
|
146
|
-
|
|
147
|
-
// flex-shrink: var(--picker--input-stack-flex-shrink,); //none;
|
|
173
|
+
display: var(--picker--inputstack-display, grid);
|
|
148
174
|
|
|
149
|
-
|
|
175
|
+
text-align: var(--picker--inputstack-text-align,);
|
|
176
|
+
|
|
177
|
+
gap: var(--picker--inputstack-gap,);
|
|
178
|
+
|
|
179
|
+
flex-flow: var(--picker--inputstack-flex-flow,);
|
|
180
|
+
|
|
181
|
+
// flex-shrink: var(--picker--inputstack-flex-shrink,); //none;
|
|
182
|
+
|
|
183
|
+
// max-width: var(--picker--inputstack-max-width,); //70%;
|
|
150
184
|
}
|
|
151
185
|
|
|
152
186
|
&::part(picker-label-stack) {
|
|
@@ -165,30 +199,30 @@ $picker-ifs: (
|
|
|
165
199
|
}
|
|
166
200
|
}
|
|
167
201
|
|
|
168
|
-
--picker--
|
|
202
|
+
--picker--host-grid-template-columns: minmax(30%, 1fr) auto;
|
|
169
203
|
|
|
170
|
-
--picker--
|
|
204
|
+
--picker--host-grid-template-rows: minmax(0, 1fr);
|
|
171
205
|
}
|
|
172
206
|
|
|
173
207
|
// > :not([slot]) {
|
|
174
208
|
// :where(&) {
|
|
175
|
-
// place-self: var(--picker--
|
|
209
|
+
// place-self: var(--picker--inputstack-child-place-self,);
|
|
176
210
|
// }
|
|
177
211
|
// }
|
|
178
212
|
|
|
179
213
|
// :where(&) {
|
|
180
|
-
// --picker--
|
|
214
|
+
// --picker--host-grid-template-columns: auto minmax(0, 1fr);
|
|
181
215
|
// @include mixins.write-props($picker-elses); NOT Needed for now since all defaults/fallbacks are already the elses
|
|
182
216
|
// }
|
|
183
217
|
|
|
184
218
|
// :where(tool-bar-item &) {
|
|
185
219
|
// --picker--labelstack-display: none;
|
|
186
|
-
// --picker--
|
|
220
|
+
// --picker--host-grid-template-columns: minmax(0, 1fr);
|
|
187
221
|
// }
|
|
188
222
|
|
|
189
223
|
// :where(form &) {
|
|
190
224
|
// --picker--labelstack-display: grid;
|
|
191
|
-
// --picker--
|
|
225
|
+
// --picker--host-grid-template-columns: auto minmax(0, 1fr);
|
|
192
226
|
// }
|
|
193
227
|
|
|
194
228
|
// :where(& menu-view > menu-view > label-view[slot='label']) {
|
|
@@ -212,64 +246,62 @@ $picker-ifs: (
|
|
|
212
246
|
// SECTION: ifs
|
|
213
247
|
@supports (x: #{string.unquote('if(else:red)')}) {
|
|
214
248
|
:where(form &) {
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
--picker--labelstack-display: if(style(--picker-style: sheet): grid ; style(--picker-style: navigation-link): grid ; style(--picker-style: menu): grid ; else: none ;);
|
|
218
|
-
// --picker--
|
|
219
|
-
|
|
220
|
-
--picker--
|
|
221
|
-
--picker--
|
|
222
|
-
--picker--
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
);
|
|
226
|
-
--picker--
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
);
|
|
249
|
+
@include mixins.write-ifs(--picker-style, $picker-ifs, $picker-elses);
|
|
250
|
+
|
|
251
|
+
// --picker--labelstack-display: if(style(--picker-style: sheet): grid ; style(--picker-style: navigation-link): grid ; style(--picker-style: menu): grid ; else: none ;);
|
|
252
|
+
// // --picker--host-grid-template-columns: if(style(--picker-style: menu): auto minmax(0, 1fr) ; else: minmax(0, 1fr) ;);
|
|
253
|
+
|
|
254
|
+
// --picker--host-display: if(style(--picker-style: sheet): flex ; style(--picker-style: navigation-link): flex ; style(--picker-style: menu): flex ;);
|
|
255
|
+
// --picker--host-justify-content: if(style(--picker-style: sheet): space-between ; style(--picker-style: navigation-link): space-between ; style(--picker-style: menu): space-between ;);
|
|
256
|
+
// --picker--host-row-gap: if(
|
|
257
|
+
// style(--picker-style: sheet): var(--labeled-content-row-gap) ; style(--picker-style: navigation-link): var(--labeled-content-row-gap) ;
|
|
258
|
+
// style(--picker-style: menu): var(--labeled-content-row-gap) ;
|
|
259
|
+
// );
|
|
260
|
+
// --picker--host-column-gap: if(
|
|
261
|
+
// style(--picker-style: sheet): var(--labeled-content-column-gap) ; style(--picker-style: navigation-link): var(--labeled-content-column-gap) ;
|
|
262
|
+
// style(--picker-style: menu): var(--labeled-content-column-gap) ;
|
|
263
|
+
// );
|
|
230
264
|
//
|
|
231
|
-
--picker--
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
);
|
|
235
|
-
--picker--
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
);
|
|
239
|
-
--picker--
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
);
|
|
243
|
-
--picker--
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
);
|
|
250
|
-
// --picker--input-stack-child-place-self: if(style(--picker-style: sheet): end ; style(--picker-style: navigation-link): end ; style(--picker-style: menu): end ;);
|
|
251
|
-
--picker--input-stack-text-align: if(style(--picker-style: sheet): end ; style(--picker-style: navigation-link): end ; style(--picker-style: menu): start ;);
|
|
265
|
+
// --picker--host-grid-padding-inline: if(
|
|
266
|
+
// style(--picker-style: sheet): var(--itempadistart,) var(--itempadiend,) ; style(--picker-style: navigation-link): var(--itempadistart,) var(--itempadiend,) ;
|
|
267
|
+
// style(--picker-style: menu): var(--itempadistart,) var(--itempadiend,) ;
|
|
268
|
+
// );
|
|
269
|
+
// --picker--host-grid-padding-block: if(
|
|
270
|
+
// style(--picker-style: sheet): var(--itempadbstart,) var(--itempadbend,) ; style(--picker-style: navigation-link): var(--itempadbstart,) var(--itempadbend,) ;
|
|
271
|
+
// style(--picker-style: menu): var(--itempadbstart,) var(--itempadbend,) ;
|
|
272
|
+
// );
|
|
273
|
+
// --picker--host-grid-border-radius: if(
|
|
274
|
+
// style(--picker-style: sheet): var(--itemradiustl,) var(--itemradiustr,) var(--itemradiusbr,) var(--itemradiusbl,) ; style(--picker-style: navigation-link): var(--itemradiustl,)
|
|
275
|
+
// var(--itemradiustr,) var(--itemradiusbr,) var(--itemradiusbl,) ; style(--picker-style: menu): var(--itemradiustl,) var(--itemradiustr,) var(--itemradiusbr,) var(--itemradiusbl,) ;
|
|
276
|
+
// );
|
|
277
|
+
// --picker--host-grid-background: if(style(--picker-style: sheet): var(--itemface,) ; style(--picker-style: navigation-link): var(--itemface,) ; style(--picker-style: menu): var(--itemface,) ;);
|
|
278
|
+
// --picker--host-grid-color: if(style(--picker-style: sheet): var(--itemtext,) ; style(--picker-style: navigation-link): var(--itemtext,) ; style(--picker-style: menu): var(--itemtext,) ;);
|
|
279
|
+
// --picker--host-grid-border: if(
|
|
280
|
+
// style(--picker-style: sheet): var(--itemborder,) ; style(--picker-style: navigation-link): var(--itemborder,) ; style(--picker-style: menu): var(--itemborder,) ;
|
|
281
|
+
// );
|
|
282
|
+
// --picker--inputstack-child-place-self: if(style(--picker-style: sheet): end ; style(--picker-style: navigation-link): end ; style(--picker-style: menu): end ;);
|
|
283
|
+
// --picker--inputstack-text-align: if(style(--picker-style: sheet): end ; style(--picker-style: navigation-link): end ; style(--picker-style: menu): start ;);
|
|
252
284
|
|
|
253
285
|
// SECTION experimental only in chrome
|
|
254
|
-
// --picker--
|
|
286
|
+
// --picker--inputstack-flex-shrink: if(
|
|
255
287
|
// style(--picker-style: sheet) or style(--picker-style: navigation-link) or
|
|
256
288
|
// style(--picker-style: menu): if(style(--picker-label-value-placement: vertical) or style(--picker-label-value-placement: auto): 1 ; else: 0 ;)
|
|
257
289
|
// );
|
|
258
|
-
// --picker--
|
|
290
|
+
// --picker--host-flex-wrap: if(
|
|
259
291
|
// style(--picker-style: sheet) or style(--picker-style: navigation-link) or
|
|
260
292
|
// style(--picker-style: menu): if(style(--picker-label-value-placement: vertical) or style(--picker-label-value-placement: auto): wrap ;)
|
|
261
293
|
// );
|
|
262
|
-
// --picker--
|
|
294
|
+
// --picker--inputstack-max-width: if(
|
|
263
295
|
// style(--picker-style: sheet) or style(--picker-style: navigation-link) or
|
|
264
296
|
// style(--picker-style: menu): if(style(--picker-label-value-placement: vertical) or style(--picker-label-value-placement: auto): 70% ;)
|
|
265
297
|
// );
|
|
266
|
-
// --picker--
|
|
298
|
+
// --picker--inputstack-flex-shrink: if(
|
|
267
299
|
// style(--picker-label-value-placement: vertical) or
|
|
268
300
|
// style(--picker-label-value-placement: auto): if(style(--picker-style: sheet) or style(--picker-style: navigation-link) or style(--picker-style: menu): 1 ;) ; ;
|
|
269
301
|
// else: if(style(--picker-style: sheet) or style(--picker-style: navigation-link) or style(--picker-style: menu): 0 ;) ; ;
|
|
270
302
|
// );
|
|
271
|
-
// --picker--
|
|
272
|
-
// --picker--
|
|
303
|
+
// --picker--inputstack-max-width: if(style(--picker-style: sheet): 70% ; style(--picker-style: navigation-link): 70% ; style(--picker-style: menu): 70% ;);
|
|
304
|
+
// --picker--host-flex-wrap: if(style(--picker-style: sheet): wrap ; style(--picker-style: navigation-link): wrap ; style(--picker-style: menu): wrap ;);
|
|
273
305
|
}
|
|
274
306
|
}
|
|
275
307
|
|
|
@@ -297,6 +329,14 @@ $picker-ifs: (
|
|
|
297
329
|
}
|
|
298
330
|
}
|
|
299
331
|
}
|
|
332
|
+
|
|
333
|
+
&[horizontal-radio-group-layout] {
|
|
334
|
+
:where(&) {
|
|
335
|
+
--picker--inputstack-display: flex;
|
|
336
|
+
|
|
337
|
+
--picker--inputstack-flex-flow: row wrap;
|
|
338
|
+
}
|
|
339
|
+
}
|
|
300
340
|
}
|
|
301
341
|
}
|
|
302
342
|
|