@warp-ds/elements 2.10.0-next.18 → 2.10.0-next.19
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/dist/custom-elements.json +179 -159
- package/dist/docs/affix/affix.md +117 -0
- package/dist/docs/affix/styling.md +107 -0
- package/dist/docs/breadcrumbs/breadcrumbs.md +67 -4
- package/dist/docs/breadcrumbs/styling.md +67 -4
- package/dist/docs/index.md +1 -1
- package/dist/docs/select/select.md +91 -0
- package/dist/docs/select/styling.md +91 -0
- package/dist/docs/textarea/styling.md +91 -0
- package/dist/docs/textarea/textarea.md +91 -0
- package/dist/docs/textfield/api.md +8 -0
- package/dist/docs/textfield/styling.md +95 -0
- package/dist/docs/textfield/textfield.md +103 -0
- package/dist/index.d.ts +90 -64
- package/dist/packages/affix/affix-styles.d.ts +8 -0
- package/dist/packages/affix/affix-styles.js +108 -0
- package/dist/packages/affix/affix.d.ts +11 -8
- package/dist/packages/affix/affix.js +118 -17
- package/dist/packages/affix/affix.js.map +4 -4
- package/dist/packages/affix/affix.react.stories.d.ts +1 -1
- package/dist/packages/affix/react.d.ts +1 -1
- package/dist/packages/alert/alert.js.map +1 -1
- package/dist/packages/attention/attention.js.map +1 -1
- package/dist/packages/breadcrumb-item/breadcrumb-item.js +16 -7
- package/dist/packages/breadcrumb-item/breadcrumb-item.js.map +2 -2
- package/dist/packages/breadcrumb-item/styles.js +14 -5
- package/dist/packages/button/button.react.stories.d.ts +2 -2
- package/dist/packages/button/react.d.ts +1 -1
- package/dist/packages/checkbox-group/react.d.ts +1 -1
- package/dist/packages/combobox/combobox.react.stories.d.ts +2 -2
- package/dist/packages/combobox/react.d.ts +1 -1
- package/dist/packages/datepicker/datepicker.js.map +1 -1
- package/dist/packages/datepicker/datepicker.react.stories.d.ts +2 -2
- package/dist/packages/datepicker/react.d.ts +1 -1
- package/dist/packages/expandable/expandable.js.map +1 -1
- package/dist/packages/icon/icon.js +2 -2
- package/dist/packages/icon/icon.js.map +1 -1
- package/dist/packages/icon/icon.react.stories.d.ts +2 -1
- package/dist/packages/icon/icon.react.stories.js +1 -1
- package/dist/packages/modal-header/modal-header.js.map +1 -1
- package/dist/packages/pagination/pagination.js.map +1 -1
- package/dist/packages/pill/pill.js.map +1 -1
- package/dist/packages/radio-group/react.d.ts +1 -1
- package/dist/packages/select/input-styles.d.ts +11 -0
- package/dist/packages/select/input-styles.js +88 -0
- package/dist/packages/select/react.d.ts +1 -1
- package/dist/packages/select/select.js +96 -19
- package/dist/packages/select/select.js.map +4 -4
- package/dist/packages/select/select.react.stories.d.ts +2 -2
- package/dist/packages/slider/react.d.ts +1 -1
- package/dist/packages/slider/slider.react.stories.d.ts +1 -1
- package/dist/packages/slider-thumb/react.d.ts +1 -1
- package/dist/packages/snackbar/snackbar.d.ts +2 -2
- package/dist/packages/snackbar/snackbar.js +1 -1
- package/dist/packages/snackbar/snackbar.js.map +2 -2
- package/dist/packages/step/step.js.map +1 -1
- package/dist/packages/textarea/input-styles.d.ts +11 -0
- package/dist/packages/textarea/input-styles.js +88 -0
- package/dist/packages/textarea/react.d.ts +1 -1
- package/dist/packages/textarea/textarea.js +99 -20
- package/dist/packages/textarea/textarea.js.map +4 -4
- package/dist/packages/textarea/textarea.react.stories.d.ts +2 -2
- package/dist/packages/textfield/input-styles.d.ts +11 -0
- package/dist/packages/textfield/input-styles.js +88 -0
- package/dist/packages/textfield/locales/da/messages.d.mts +1 -0
- package/dist/packages/textfield/locales/da/messages.mjs +1 -0
- package/dist/packages/textfield/locales/en/messages.d.mts +1 -0
- package/dist/packages/textfield/locales/en/messages.mjs +1 -0
- package/dist/packages/textfield/locales/fi/messages.d.mts +1 -0
- package/dist/packages/textfield/locales/fi/messages.mjs +1 -0
- package/dist/packages/textfield/locales/nb/messages.d.mts +1 -0
- package/dist/packages/textfield/locales/nb/messages.mjs +1 -0
- package/dist/packages/textfield/locales/sv/messages.d.mts +1 -0
- package/dist/packages/textfield/locales/sv/messages.mjs +1 -0
- package/dist/packages/textfield/react.d.ts +1 -1
- package/dist/packages/textfield/textfield.d.ts +11 -1
- package/dist/packages/textfield/textfield.js +111 -24
- package/dist/packages/textfield/textfield.js.map +4 -4
- package/dist/packages/textfield/textfield.react.stories.d.ts +2 -2
- package/dist/packages/toast/toast.js.map +1 -1
- package/dist/web-types.json +60 -50
- package/eik/index.js +20 -20
- package/package.json +1 -1
|
@@ -2,163 +2,6 @@
|
|
|
2
2
|
"schemaVersion": "1.0.0",
|
|
3
3
|
"readme": "",
|
|
4
4
|
"modules": [
|
|
5
|
-
{
|
|
6
|
-
"kind": "javascript-module",
|
|
7
|
-
"path": "packages/icon/icon.ts",
|
|
8
|
-
"declarations": [
|
|
9
|
-
{
|
|
10
|
-
"kind": "class",
|
|
11
|
-
"description": "",
|
|
12
|
-
"name": "WarpIcon",
|
|
13
|
-
"members": [
|
|
14
|
-
{
|
|
15
|
-
"kind": "field",
|
|
16
|
-
"name": "name",
|
|
17
|
-
"type": {
|
|
18
|
-
"text": "string"
|
|
19
|
-
},
|
|
20
|
-
"description": "Icon filename (without .svg)",
|
|
21
|
-
"attribute": "name",
|
|
22
|
-
"reflects": true
|
|
23
|
-
},
|
|
24
|
-
{
|
|
25
|
-
"kind": "field",
|
|
26
|
-
"name": "size",
|
|
27
|
-
"type": {
|
|
28
|
-
"text": "\"small\" | \"medium\" | \"large\" | PixelValue | undefined"
|
|
29
|
-
},
|
|
30
|
-
"description": "Size: small, medium, large or pixel value (e.g. \"32px\").",
|
|
31
|
-
"default": "\"medium\"",
|
|
32
|
-
"attribute": "size",
|
|
33
|
-
"reflects": true,
|
|
34
|
-
"parsedType": {
|
|
35
|
-
"text": "'small' | 'medium' | 'large' | `${number}px` | undefined"
|
|
36
|
-
}
|
|
37
|
-
},
|
|
38
|
-
{
|
|
39
|
-
"kind": "field",
|
|
40
|
-
"name": "locale",
|
|
41
|
-
"type": {
|
|
42
|
-
"text": "string"
|
|
43
|
-
},
|
|
44
|
-
"description": "Locale used for `<title>` text.\n\nReads the `lang` attribute from `<html>`, falls back to 'en'.",
|
|
45
|
-
"attribute": "locale",
|
|
46
|
-
"reflects": true
|
|
47
|
-
},
|
|
48
|
-
{
|
|
49
|
-
"kind": "field",
|
|
50
|
-
"name": "svg",
|
|
51
|
-
"type": {
|
|
52
|
-
"text": "SVGElement | null"
|
|
53
|
-
},
|
|
54
|
-
"privacy": "private",
|
|
55
|
-
"default": "null",
|
|
56
|
-
"description": "Parsed SVG element (not reflected as attribute)"
|
|
57
|
-
},
|
|
58
|
-
{
|
|
59
|
-
"kind": "method",
|
|
60
|
-
"name": "fetchIcon",
|
|
61
|
-
"privacy": "private",
|
|
62
|
-
"return": {
|
|
63
|
-
"type": {
|
|
64
|
-
"text": ""
|
|
65
|
-
}
|
|
66
|
-
},
|
|
67
|
-
"parameters": [
|
|
68
|
-
{
|
|
69
|
-
"name": "iconName",
|
|
70
|
-
"type": {
|
|
71
|
-
"text": "string"
|
|
72
|
-
},
|
|
73
|
-
"description": "Name of the icon file"
|
|
74
|
-
}
|
|
75
|
-
],
|
|
76
|
-
"description": "Fetch an icon SVG from the CDN, with caching"
|
|
77
|
-
},
|
|
78
|
-
{
|
|
79
|
-
"kind": "method",
|
|
80
|
-
"name": "loadIcon",
|
|
81
|
-
"privacy": "private",
|
|
82
|
-
"return": {
|
|
83
|
-
"type": {
|
|
84
|
-
"text": "Promise<void>"
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
],
|
|
89
|
-
"attributes": [
|
|
90
|
-
{
|
|
91
|
-
"name": "name",
|
|
92
|
-
"type": {
|
|
93
|
-
"text": "string"
|
|
94
|
-
},
|
|
95
|
-
"description": "Icon filename (without .svg)",
|
|
96
|
-
"fieldName": "name"
|
|
97
|
-
},
|
|
98
|
-
{
|
|
99
|
-
"name": "size",
|
|
100
|
-
"type": {
|
|
101
|
-
"text": "\"small\" | \"medium\" | \"large\" | PixelValue | undefined"
|
|
102
|
-
},
|
|
103
|
-
"description": "Size: small, medium, large or pixel value (e.g. \"32px\").",
|
|
104
|
-
"default": "\"medium\"",
|
|
105
|
-
"fieldName": "size",
|
|
106
|
-
"parsedType": {
|
|
107
|
-
"text": "'small' | 'medium' | 'large' | `${number}px` | undefined"
|
|
108
|
-
}
|
|
109
|
-
},
|
|
110
|
-
{
|
|
111
|
-
"name": "locale",
|
|
112
|
-
"type": {
|
|
113
|
-
"text": "string"
|
|
114
|
-
},
|
|
115
|
-
"description": "Locale used for `<title>` text.\n\nReads the `lang` attribute from `<html>`, falls back to 'en'.",
|
|
116
|
-
"fieldName": "locale"
|
|
117
|
-
}
|
|
118
|
-
],
|
|
119
|
-
"superclass": {
|
|
120
|
-
"name": "LitElement",
|
|
121
|
-
"package": "lit"
|
|
122
|
-
},
|
|
123
|
-
"tagName": "w-icon",
|
|
124
|
-
"customElement": true,
|
|
125
|
-
"modulePath": "packages/icon/icon.ts",
|
|
126
|
-
"definitionPath": "packages/icon/icon.ts"
|
|
127
|
-
},
|
|
128
|
-
{
|
|
129
|
-
"kind": "variable",
|
|
130
|
-
"name": "WIcon",
|
|
131
|
-
"default": "WarpIcon",
|
|
132
|
-
"deprecated": "Exported for backwards compatibility. Use WarpIcon."
|
|
133
|
-
}
|
|
134
|
-
],
|
|
135
|
-
"exports": [
|
|
136
|
-
{
|
|
137
|
-
"kind": "js",
|
|
138
|
-
"name": "WarpIcon",
|
|
139
|
-
"declaration": {
|
|
140
|
-
"name": "WarpIcon",
|
|
141
|
-
"module": "packages/icon/icon.ts"
|
|
142
|
-
}
|
|
143
|
-
},
|
|
144
|
-
{
|
|
145
|
-
"kind": "js",
|
|
146
|
-
"name": "WIcon",
|
|
147
|
-
"declaration": {
|
|
148
|
-
"name": "WIcon",
|
|
149
|
-
"module": "packages/icon/icon.ts"
|
|
150
|
-
}
|
|
151
|
-
},
|
|
152
|
-
{
|
|
153
|
-
"kind": "custom-element-definition",
|
|
154
|
-
"name": "w-icon",
|
|
155
|
-
"declaration": {
|
|
156
|
-
"name": "WarpIcon",
|
|
157
|
-
"module": "packages/icon/icon.ts"
|
|
158
|
-
}
|
|
159
|
-
}
|
|
160
|
-
]
|
|
161
|
-
},
|
|
162
5
|
{
|
|
163
6
|
"kind": "javascript-module",
|
|
164
7
|
"path": "packages/textfield/textfield.ts",
|
|
@@ -173,7 +16,7 @@
|
|
|
173
16
|
"name": "suffix"
|
|
174
17
|
},
|
|
175
18
|
{
|
|
176
|
-
"description": "Use with `<w-affix>` to include a prefix, for example a search icon.",
|
|
19
|
+
"description": "Use with `<w-affix>` to include a prefix, for example a search icon. ## Accessibility Note for Affixes Due to shadow DOM boundaries, affix content cannot be connected to the input via ARIA references. For non-interactive affixes (text labels like currency symbols), consider including that information in the main label or placeholder text instead for better screen reader support.",
|
|
177
20
|
"name": "prefix"
|
|
178
21
|
}
|
|
179
22
|
],
|
|
@@ -223,6 +66,17 @@
|
|
|
223
66
|
"attribute": "help-text",
|
|
224
67
|
"reflects": true
|
|
225
68
|
},
|
|
69
|
+
{
|
|
70
|
+
"kind": "field",
|
|
71
|
+
"name": "optional",
|
|
72
|
+
"type": {
|
|
73
|
+
"text": "boolean"
|
|
74
|
+
},
|
|
75
|
+
"default": "false",
|
|
76
|
+
"description": "Whether to show the optional indicator after the label.",
|
|
77
|
+
"attribute": "optional",
|
|
78
|
+
"reflects": true
|
|
79
|
+
},
|
|
226
80
|
{
|
|
227
81
|
"kind": "field",
|
|
228
82
|
"name": "size",
|
|
@@ -509,6 +363,15 @@
|
|
|
509
363
|
"summary": "Description shown below the input field",
|
|
510
364
|
"fieldName": "helpText"
|
|
511
365
|
},
|
|
366
|
+
{
|
|
367
|
+
"name": "optional",
|
|
368
|
+
"type": {
|
|
369
|
+
"text": "boolean"
|
|
370
|
+
},
|
|
371
|
+
"default": "false",
|
|
372
|
+
"description": "Whether to show the optional indicator after the label.",
|
|
373
|
+
"fieldName": "optional"
|
|
374
|
+
},
|
|
512
375
|
{
|
|
513
376
|
"name": "size",
|
|
514
377
|
"type": {
|
|
@@ -686,13 +549,170 @@
|
|
|
686
549
|
}
|
|
687
550
|
]
|
|
688
551
|
},
|
|
552
|
+
{
|
|
553
|
+
"kind": "javascript-module",
|
|
554
|
+
"path": "packages/icon/icon.ts",
|
|
555
|
+
"declarations": [
|
|
556
|
+
{
|
|
557
|
+
"kind": "class",
|
|
558
|
+
"description": "",
|
|
559
|
+
"name": "WarpIcon",
|
|
560
|
+
"members": [
|
|
561
|
+
{
|
|
562
|
+
"kind": "field",
|
|
563
|
+
"name": "name",
|
|
564
|
+
"type": {
|
|
565
|
+
"text": "string"
|
|
566
|
+
},
|
|
567
|
+
"description": "Icon filename (without .svg)",
|
|
568
|
+
"attribute": "name",
|
|
569
|
+
"reflects": true
|
|
570
|
+
},
|
|
571
|
+
{
|
|
572
|
+
"kind": "field",
|
|
573
|
+
"name": "size",
|
|
574
|
+
"type": {
|
|
575
|
+
"text": "\"small\" | \"medium\" | \"large\" | PixelValue | undefined"
|
|
576
|
+
},
|
|
577
|
+
"description": "Size: small, medium, large or pixel value (e.g. \"32px\").",
|
|
578
|
+
"default": "\"medium\"",
|
|
579
|
+
"attribute": "size",
|
|
580
|
+
"reflects": true,
|
|
581
|
+
"parsedType": {
|
|
582
|
+
"text": "'small' | 'medium' | 'large' | `${number}px` | undefined"
|
|
583
|
+
}
|
|
584
|
+
},
|
|
585
|
+
{
|
|
586
|
+
"kind": "field",
|
|
587
|
+
"name": "locale",
|
|
588
|
+
"type": {
|
|
589
|
+
"text": "string"
|
|
590
|
+
},
|
|
591
|
+
"description": "Locale used for `<title>` text.\n\nReads the `lang` attribute from `<html>`, falls back to 'en'.",
|
|
592
|
+
"attribute": "locale",
|
|
593
|
+
"reflects": true
|
|
594
|
+
},
|
|
595
|
+
{
|
|
596
|
+
"kind": "field",
|
|
597
|
+
"name": "svg",
|
|
598
|
+
"type": {
|
|
599
|
+
"text": "SVGElement | null"
|
|
600
|
+
},
|
|
601
|
+
"privacy": "private",
|
|
602
|
+
"default": "null",
|
|
603
|
+
"description": "Parsed SVG element (not reflected as attribute)"
|
|
604
|
+
},
|
|
605
|
+
{
|
|
606
|
+
"kind": "method",
|
|
607
|
+
"name": "fetchIcon",
|
|
608
|
+
"privacy": "private",
|
|
609
|
+
"return": {
|
|
610
|
+
"type": {
|
|
611
|
+
"text": ""
|
|
612
|
+
}
|
|
613
|
+
},
|
|
614
|
+
"parameters": [
|
|
615
|
+
{
|
|
616
|
+
"name": "iconName",
|
|
617
|
+
"type": {
|
|
618
|
+
"text": "string"
|
|
619
|
+
},
|
|
620
|
+
"description": "Name of the icon file"
|
|
621
|
+
}
|
|
622
|
+
],
|
|
623
|
+
"description": "Fetch an icon SVG from the CDN, with caching"
|
|
624
|
+
},
|
|
625
|
+
{
|
|
626
|
+
"kind": "method",
|
|
627
|
+
"name": "loadIcon",
|
|
628
|
+
"privacy": "private",
|
|
629
|
+
"return": {
|
|
630
|
+
"type": {
|
|
631
|
+
"text": "Promise<void>"
|
|
632
|
+
}
|
|
633
|
+
}
|
|
634
|
+
}
|
|
635
|
+
],
|
|
636
|
+
"attributes": [
|
|
637
|
+
{
|
|
638
|
+
"name": "name",
|
|
639
|
+
"type": {
|
|
640
|
+
"text": "string"
|
|
641
|
+
},
|
|
642
|
+
"description": "Icon filename (without .svg)",
|
|
643
|
+
"fieldName": "name"
|
|
644
|
+
},
|
|
645
|
+
{
|
|
646
|
+
"name": "size",
|
|
647
|
+
"type": {
|
|
648
|
+
"text": "\"small\" | \"medium\" | \"large\" | PixelValue | undefined"
|
|
649
|
+
},
|
|
650
|
+
"description": "Size: small, medium, large or pixel value (e.g. \"32px\").",
|
|
651
|
+
"default": "\"medium\"",
|
|
652
|
+
"fieldName": "size",
|
|
653
|
+
"parsedType": {
|
|
654
|
+
"text": "'small' | 'medium' | 'large' | `${number}px` | undefined"
|
|
655
|
+
}
|
|
656
|
+
},
|
|
657
|
+
{
|
|
658
|
+
"name": "locale",
|
|
659
|
+
"type": {
|
|
660
|
+
"text": "string"
|
|
661
|
+
},
|
|
662
|
+
"description": "Locale used for `<title>` text.\n\nReads the `lang` attribute from `<html>`, falls back to 'en'.",
|
|
663
|
+
"fieldName": "locale"
|
|
664
|
+
}
|
|
665
|
+
],
|
|
666
|
+
"superclass": {
|
|
667
|
+
"name": "LitElement",
|
|
668
|
+
"package": "lit"
|
|
669
|
+
},
|
|
670
|
+
"tagName": "w-icon",
|
|
671
|
+
"customElement": true,
|
|
672
|
+
"modulePath": "packages/icon/icon.ts",
|
|
673
|
+
"definitionPath": "packages/icon/icon.ts"
|
|
674
|
+
},
|
|
675
|
+
{
|
|
676
|
+
"kind": "variable",
|
|
677
|
+
"name": "WIcon",
|
|
678
|
+
"default": "WarpIcon",
|
|
679
|
+
"deprecated": "Exported for backwards compatibility. Use WarpIcon."
|
|
680
|
+
}
|
|
681
|
+
],
|
|
682
|
+
"exports": [
|
|
683
|
+
{
|
|
684
|
+
"kind": "js",
|
|
685
|
+
"name": "WarpIcon",
|
|
686
|
+
"declaration": {
|
|
687
|
+
"name": "WarpIcon",
|
|
688
|
+
"module": "packages/icon/icon.ts"
|
|
689
|
+
}
|
|
690
|
+
},
|
|
691
|
+
{
|
|
692
|
+
"kind": "js",
|
|
693
|
+
"name": "WIcon",
|
|
694
|
+
"declaration": {
|
|
695
|
+
"name": "WIcon",
|
|
696
|
+
"module": "packages/icon/icon.ts"
|
|
697
|
+
}
|
|
698
|
+
},
|
|
699
|
+
{
|
|
700
|
+
"kind": "custom-element-definition",
|
|
701
|
+
"name": "w-icon",
|
|
702
|
+
"declaration": {
|
|
703
|
+
"name": "WarpIcon",
|
|
704
|
+
"module": "packages/icon/icon.ts"
|
|
705
|
+
}
|
|
706
|
+
}
|
|
707
|
+
]
|
|
708
|
+
},
|
|
689
709
|
{
|
|
690
710
|
"kind": "javascript-module",
|
|
691
711
|
"path": "packages/affix/affix.ts",
|
|
692
712
|
"declarations": [
|
|
693
713
|
{
|
|
694
714
|
"kind": "class",
|
|
695
|
-
"description": "This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-affix--docs)",
|
|
715
|
+
"description": "This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`.\n\n## Accessibility Note\nDue to shadow DOM encapsulation, ARIA attributes (like `aria-describedby`, `aria-labelledby`)\ncannot reference elements across shadow boundaries. This means:\n- Non-interactive affixes (text labels, icons) cannot be connected to the parent input via ARIA\n- Interactive affixes (buttons) must have their own `aria-label` (already implemented)\n- Do NOT attempt to reference affix content from parent components via ARIA ID references - it won't work\n\nFor non-interactive labels (e.g., currency symbols), consider including the information in the\nmain label or placeholder instead of relying on ARIA to announce affix content.\n\n[See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-affix--docs)",
|
|
696
716
|
"name": "WarpAffix",
|
|
697
717
|
"members": [
|
|
698
718
|
{
|
package/dist/docs/affix/affix.md
CHANGED
|
@@ -4,6 +4,16 @@
|
|
|
4
4
|
|
|
5
5
|
This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`.
|
|
6
6
|
|
|
7
|
+
## Accessibility Note
|
|
8
|
+
Due to shadow DOM encapsulation, ARIA attributes (like `aria-describedby`, `aria-labelledby`)
|
|
9
|
+
cannot reference elements across shadow boundaries. This means:
|
|
10
|
+
- Non-interactive affixes (text labels, icons) cannot be connected to the parent input via ARIA
|
|
11
|
+
- Interactive affixes (buttons) must have their own `aria-label` (already implemented)
|
|
12
|
+
- Do NOT attempt to reference affix content from parent components via ARIA ID references - it won't work
|
|
13
|
+
|
|
14
|
+
For non-interactive labels (e.g., currency symbols), consider including the information in the
|
|
15
|
+
main label or placeholder instead of relying on ARIA to announce affix content.
|
|
16
|
+
|
|
7
17
|
## Usage
|
|
8
18
|
|
|
9
19
|
`w-affix` is typically used inside form controls to render prefix/suffix text or icon actions.
|
|
@@ -142,8 +152,115 @@ Clicking the clear button will reset the textfield
|
|
|
142
152
|
|
|
143
153
|
</elements-example>
|
|
144
154
|
|
|
155
|
+
# Affix Styling
|
|
156
|
+
|
|
157
|
+
The affix component provides a comprehensive styling API through CSS custom properties (tokens).
|
|
158
|
+
|
|
145
159
|
## Styling API
|
|
146
160
|
|
|
161
|
+
### Wrapper Tokens
|
|
162
|
+
|
|
163
|
+
Customize the appearance of the affix wrapper container:
|
|
164
|
+
|
|
165
|
+
```css
|
|
166
|
+
--w-c-affix-wrapper-bg: transparent;
|
|
167
|
+
--w-c-affix-wrapper-border-radius: 0.4rem;
|
|
168
|
+
--w-c-affix-wrapper-padding-left: 1.2rem;
|
|
169
|
+
--w-c-affix-wrapper-padding-right: 1.2rem;
|
|
170
|
+
--w-c-affix-wrapper-width-with-label: max-content;
|
|
171
|
+
--w-c-affix-wrapper-width-with-icon: 4rem;
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
### Label Tokens
|
|
175
|
+
|
|
176
|
+
Customize the appearance of text labels (when `label` property is used):
|
|
177
|
+
|
|
178
|
+
```css
|
|
179
|
+
--w-c-affix-label-color: var(--w-s-color-text);
|
|
180
|
+
--w-c-affix-label-font-size: var(--w-font-size-xs);
|
|
181
|
+
--w-c-affix-label-line-height: var(--w-line-height-xs);
|
|
182
|
+
--w-c-affix-label-font-weight: 700;
|
|
183
|
+
--w-c-affix-label-cursor: default;
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
## Parts
|
|
187
|
+
|
|
188
|
+
For advanced styling needs beyond tokens, you can target internal elements using CSS parts:
|
|
189
|
+
|
|
190
|
+
- `::part(wrapper)` - The container element (either `<div>` or `<button>` depending on variant)
|
|
191
|
+
- `::part(label)` - The text label element (when using `label` property)
|
|
192
|
+
|
|
193
|
+
```css
|
|
194
|
+
w-affix::part(wrapper) {
|
|
195
|
+
/* Custom styling for the wrapper */
|
|
196
|
+
background-color: var(--w-s-color-background-subtle);
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
w-affix::part(label) {
|
|
200
|
+
/* Custom styling for text labels */
|
|
201
|
+
text-transform: uppercase;
|
|
202
|
+
}
|
|
203
|
+
```
|
|
204
|
+
|
|
205
|
+
## Example Usage
|
|
206
|
+
|
|
207
|
+
### Customizing Label Color
|
|
208
|
+
|
|
209
|
+
```css
|
|
210
|
+
w-affix {
|
|
211
|
+
--w-c-affix-label-color: var(--w-s-color-text-primary);
|
|
212
|
+
}
|
|
213
|
+
```
|
|
214
|
+
|
|
215
|
+
### Customizing Wrapper Background
|
|
216
|
+
|
|
217
|
+
```css
|
|
218
|
+
w-affix {
|
|
219
|
+
--w-c-affix-wrapper-bg: var(--w-s-color-background-subtle);
|
|
220
|
+
--w-c-affix-wrapper-padding-left: 1.6rem;
|
|
221
|
+
--w-c-affix-wrapper-padding-right: 1.6rem;
|
|
222
|
+
}
|
|
223
|
+
```
|
|
224
|
+
|
|
225
|
+
### Adjusting Icon/Label Widths
|
|
226
|
+
|
|
227
|
+
```css
|
|
228
|
+
w-affix {
|
|
229
|
+
--w-c-affix-wrapper-width-with-icon: 5rem;
|
|
230
|
+
--w-c-affix-wrapper-width-with-label: auto;
|
|
231
|
+
}
|
|
232
|
+
```
|
|
233
|
+
|
|
234
|
+
### Styling by Slot Position
|
|
235
|
+
|
|
236
|
+
Target prefix and suffix affixes differently:
|
|
237
|
+
|
|
238
|
+
```css
|
|
239
|
+
/* Style only prefix affixes */
|
|
240
|
+
w-affix[slot='prefix'] {
|
|
241
|
+
--w-c-affix-wrapper-padding-left: 2rem;
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
/* Style only suffix affixes */
|
|
245
|
+
w-affix[slot='suffix'] {
|
|
246
|
+
--w-c-affix-wrapper-padding-right: 2rem;
|
|
247
|
+
}
|
|
248
|
+
```
|
|
249
|
+
|
|
250
|
+
### Using Parts for Advanced Customization
|
|
251
|
+
|
|
252
|
+
```css
|
|
253
|
+
/* Add a border to the wrapper */
|
|
254
|
+
w-affix::part(wrapper) {
|
|
255
|
+
border-left: 1px solid var(--w-s-color-border);
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
/* Make labels italic */
|
|
259
|
+
w-affix::part(label) {
|
|
260
|
+
font-style: italic;
|
|
261
|
+
}
|
|
262
|
+
```
|
|
263
|
+
|
|
147
264
|
## `<w-affix>` API
|
|
148
265
|
|
|
149
266
|
Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
|
|
@@ -1 +1,108 @@
|
|
|
1
|
+
# Affix Styling
|
|
2
|
+
|
|
3
|
+
The affix component provides a comprehensive styling API through CSS custom properties (tokens).
|
|
4
|
+
|
|
1
5
|
## Styling API
|
|
6
|
+
|
|
7
|
+
### Wrapper Tokens
|
|
8
|
+
|
|
9
|
+
Customize the appearance of the affix wrapper container:
|
|
10
|
+
|
|
11
|
+
```css
|
|
12
|
+
--w-c-affix-wrapper-bg: transparent;
|
|
13
|
+
--w-c-affix-wrapper-border-radius: 0.4rem;
|
|
14
|
+
--w-c-affix-wrapper-padding-left: 1.2rem;
|
|
15
|
+
--w-c-affix-wrapper-padding-right: 1.2rem;
|
|
16
|
+
--w-c-affix-wrapper-width-with-label: max-content;
|
|
17
|
+
--w-c-affix-wrapper-width-with-icon: 4rem;
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
### Label Tokens
|
|
21
|
+
|
|
22
|
+
Customize the appearance of text labels (when `label` property is used):
|
|
23
|
+
|
|
24
|
+
```css
|
|
25
|
+
--w-c-affix-label-color: var(--w-s-color-text);
|
|
26
|
+
--w-c-affix-label-font-size: var(--w-font-size-xs);
|
|
27
|
+
--w-c-affix-label-line-height: var(--w-line-height-xs);
|
|
28
|
+
--w-c-affix-label-font-weight: 700;
|
|
29
|
+
--w-c-affix-label-cursor: default;
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## Parts
|
|
33
|
+
|
|
34
|
+
For advanced styling needs beyond tokens, you can target internal elements using CSS parts:
|
|
35
|
+
|
|
36
|
+
- `::part(wrapper)` - The container element (either `<div>` or `<button>` depending on variant)
|
|
37
|
+
- `::part(label)` - The text label element (when using `label` property)
|
|
38
|
+
|
|
39
|
+
```css
|
|
40
|
+
w-affix::part(wrapper) {
|
|
41
|
+
/* Custom styling for the wrapper */
|
|
42
|
+
background-color: var(--w-s-color-background-subtle);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
w-affix::part(label) {
|
|
46
|
+
/* Custom styling for text labels */
|
|
47
|
+
text-transform: uppercase;
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
## Example Usage
|
|
52
|
+
|
|
53
|
+
### Customizing Label Color
|
|
54
|
+
|
|
55
|
+
```css
|
|
56
|
+
w-affix {
|
|
57
|
+
--w-c-affix-label-color: var(--w-s-color-text-primary);
|
|
58
|
+
}
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
### Customizing Wrapper Background
|
|
62
|
+
|
|
63
|
+
```css
|
|
64
|
+
w-affix {
|
|
65
|
+
--w-c-affix-wrapper-bg: var(--w-s-color-background-subtle);
|
|
66
|
+
--w-c-affix-wrapper-padding-left: 1.6rem;
|
|
67
|
+
--w-c-affix-wrapper-padding-right: 1.6rem;
|
|
68
|
+
}
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
### Adjusting Icon/Label Widths
|
|
72
|
+
|
|
73
|
+
```css
|
|
74
|
+
w-affix {
|
|
75
|
+
--w-c-affix-wrapper-width-with-icon: 5rem;
|
|
76
|
+
--w-c-affix-wrapper-width-with-label: auto;
|
|
77
|
+
}
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
### Styling by Slot Position
|
|
81
|
+
|
|
82
|
+
Target prefix and suffix affixes differently:
|
|
83
|
+
|
|
84
|
+
```css
|
|
85
|
+
/* Style only prefix affixes */
|
|
86
|
+
w-affix[slot='prefix'] {
|
|
87
|
+
--w-c-affix-wrapper-padding-left: 2rem;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
/* Style only suffix affixes */
|
|
91
|
+
w-affix[slot='suffix'] {
|
|
92
|
+
--w-c-affix-wrapper-padding-right: 2rem;
|
|
93
|
+
}
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
### Using Parts for Advanced Customization
|
|
97
|
+
|
|
98
|
+
```css
|
|
99
|
+
/* Add a border to the wrapper */
|
|
100
|
+
w-affix::part(wrapper) {
|
|
101
|
+
border-left: 1px solid var(--w-s-color-border);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
/* Make labels italic */
|
|
105
|
+
w-affix::part(label) {
|
|
106
|
+
font-style: italic;
|
|
107
|
+
}
|
|
108
|
+
```
|