@sk-web-gui/core 0.1.85 → 0.1.87

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/cjs/components/accordion.js +104 -39
  2. package/dist/cjs/components/accordion.js.map +1 -1
  3. package/dist/cjs/components/user-menu.js +44 -26
  4. package/dist/cjs/components/user-menu.js.map +1 -1
  5. package/dist/esm/components/accordion.js +104 -39
  6. package/dist/esm/components/accordion.js.map +1 -1
  7. package/dist/esm/components/user-menu.js +44 -26
  8. package/dist/esm/components/user-menu.js.map +1 -1
  9. package/package.json +2 -2
  10. package/src/components/accordion.js +107 -36
  11. package/src/components/user-menu.js +50 -26
package/dist/cjs/components/accordion.js CHANGED
@@ -2,14 +2,23 @@
2
2
 
3
3
  module.exports = Accordion = function Accordion(colors) {
4
4
  return {
5
- '.accordion': {
5
+ '.sk-disclosure': {
6
+ '&:has(&-header:focus-visible)': {
7
+ '@apply outline': {}
8
+ },
6
9
  '&-header': {
7
10
  '@apply flex flex-col text-left': {},
8
11
  '[aria-expanded="true"] &': {
9
12
  '@apply bg-hover': {}
10
13
  },
14
+ '&:focus-visible': {
15
+ '@apply outline-0': {}
16
+ },
11
17
  '&-icon': {
12
- '@apply ml-auto !text-2xl': {}
18
+ '@apply ml-auto !text-2xl': {},
19
+ svg: {
20
+ '@apply !text-2xl': {}
21
+ }
13
22
  }
14
23
  },
15
24
  '&-is-open &-header': {
@@ -18,17 +27,10 @@ module.exports = Accordion = function Accordion(colors) {
18
27
  '&-toggle': {
19
28
  '@apply flex items-center inline-block text-lg leading-lg text-left text-lg mx-md sm:mx-lg my-md': {},
20
29
  fontWeight: 'bold',
21
- //"@apply focus-visible:shadow shadow-lg": {},
22
- '&:focus-visible': {
23
- boxShadow: '0 0 0 0.4rem #fff!important',
24
- outline: '0'
25
- //"@apply border-4": {},
26
- },
27
-
28
- '.accordion-title': {
30
+ '.sk-disclosure-title': {
29
31
  '@apply mr-md text-base leading-base md:text-lg md:leading-lg': {}
30
32
  },
31
- '.accordion-subtitle': {
33
+ '.sk-disclosure-subtitle': {
32
34
  '@apply m-0 mr-md text-sm font-normal': {}
33
35
  }
34
36
  },
@@ -46,25 +48,25 @@ module.exports = Accordion = function Accordion(colors) {
46
48
  },
47
49
  '&-solid': {
48
50
  '@apply border border-primary': {},
49
- '.accordion-header': {
51
+ '.sk-disclosure-header': {
50
52
  '@apply bg-primary text-white': {},
51
53
  '[aria-expanded="true"] &': {
52
54
  '@apply bg-hover': {}
53
55
  }
54
56
  }
55
57
  },
56
- '&-alert': {
58
+ '&-solid[data-alert="true"], &-outline[data-alert="true"]': {
57
59
  '@apply border border-warning': {},
58
- '.accordion-header': {
60
+ '.sk-disclosure-header:not([data-disabled="true"])': {
59
61
  '@apply bg-warning-light text-warning': {},
60
62
  '[aria-expanded="true"] &': {
61
63
  '@apply bg-warning-light': {}
62
64
  }
63
65
  }
64
66
  },
65
- '&-error': {
67
+ '&-solid[data-error="true"], &-outline[data-error="true"]': {
66
68
  '@apply border border-error': {},
67
- '.accordion-header': {
69
+ '.sk-disclosure-header:not([data-disabled="true"])': {
68
70
  '@apply bg-error-light text-error': {},
69
71
  '[aria-expanded="true"] &': {
70
72
  '@apply bg-error-light': {}
@@ -73,52 +75,115 @@ module.exports = Accordion = function Accordion(colors) {
73
75
  },
74
76
  '&-is-open': {
75
77
  '@apply border border-gray-stroke': {},
76
- '& .accordion-header': {
78
+ '& .sk-disclosure-header': {
77
79
  '@apply bg-hover text-white': {}
80
+ },
81
+ '&[data-alert="true"]': {
82
+ '@apply border border-warning': {},
83
+ '& .sk-disclosure-header': {
84
+ '@apply border-b border-warning': {}
85
+ }
86
+ },
87
+ '&[data-error="true"]': {
88
+ '@apply border border-error': {},
89
+ '& .sk-disclosure-header': {
90
+ '@apply border-b border-error': {}
91
+ }
78
92
  }
79
93
  },
80
- '&-is-open-alert': {
81
- '@apply border border-warning': {},
82
- '& .accordion-header': {
83
- '@apply border-b border-warning': {}
84
- }
85
- },
86
- '&-is-open-error': {
87
- '@apply border border-error': {},
88
- '& .accordion-header': {
89
- '@apply border-b border-error': {}
90
- }
91
- },
92
- '&-is-open &-body, &-is-open-alert &-body, &-is-open-error &-body': {
94
+ '&-is-open &-body': {
93
95
  '@apply overflow-visible animate-reset-overflow': {}
94
96
  },
95
97
  '&-outline': {
96
98
  '@apply border border-gray-stroke': {},
97
- '.accordion-body': {
99
+ '&:not([data-error="true"]):not([data-alert="true"]) .sk-disclosure-body': {
98
100
  '@apply mt-0': {}
99
101
  },
100
- '.accordion-toggle': {
101
- '&:focus-visible': {
102
- boxShadow: '0 0 0 0.4rem #4b4b4b!important',
103
- outline: '0'
102
+ '.sk-disclosure-toggle': {},
103
+ '.sk-disclosure-header': {
104
+ '@apply bg-transparent text-body': {},
105
+ '[aria-expanded="true"] &': {
106
+ '@apply bg-hover': {}
104
107
  }
108
+ }
109
+ },
110
+ '&-plain': {
111
+ '@apply border-0': {},
112
+ '&:has(.sk-disclosure-header:focus-visible)': {
113
+ '@apply outline-offset-4': {}
105
114
  },
106
- '.accordion-header': {
115
+ '.sk-disclosure-header': {
107
116
  '@apply bg-transparent text-body': {},
108
117
  '[aria-expanded="true"] &': {
109
118
  '@apply bg-hover': {}
119
+ },
120
+ '&[data-disabled="true"]': {
121
+ '@apply bg-transparent text-gray-stroke': {}
122
+ },
123
+ '.sk-disclosure-toggle': {
124
+ '@apply mx-0': {}
125
+ }
126
+ },
127
+ '.sk-disclosure-body': {
128
+ '@apply m-0': {}
129
+ },
130
+ '&[data-alert="true"]': {
131
+ '@apply border-0': {},
132
+ '.sk-disclosure-header': {
133
+ '@apply border-0 text-warning': {}
134
+ }
135
+ },
136
+ '&[data-error="true"]': {
137
+ '@apply border-0': {},
138
+ '.sk-disclosure-header': {
139
+ '@apply border-0 text-error': {}
110
140
  }
111
141
  }
112
142
  },
113
- '&-disabled, &-disabled button': {
143
+ '&-disabled, &-disabled [role="button"]': {
114
144
  '@apply disabled:cursor-not-allowed cursor-not-allowed': {}
115
145
  },
116
- '&-disabled &-header': {
117
- '@apply bg-gray-lighter text-gray': {}
146
+ '&-header[data-disabled="true"]': {
147
+ '@apply bg-gray-lighter text-gray-stroke': {}
118
148
  },
119
149
  '&-disabled, &&-disabled': {
120
150
  '@apply border-gray': {}
121
151
  }
152
+ },
153
+ '.sk-accordion': {
154
+ '&-item': {
155
+ '.sk-disclosure': {
156
+ transitionProperty: 'margin',
157
+ transitionDuration: '180ms',
158
+ '&-disabled': {
159
+ '@apply border-x-transparent border-y-transparent': {}
160
+ },
161
+ '&-plain, &-plain[data-disabled="true"]': {
162
+ '@apply border border-transparent border-b-gray-stroke': {}
163
+ },
164
+ '&-solid[data-open="false"]': {
165
+ '@apply border-white': {},
166
+ '&[data-disabled="true"]': {
167
+ '@apply border-x-transparent border-y-transparent': {}
168
+ }
169
+ },
170
+ '&[data-open="true"]:not(&-plain)': {
171
+ '@apply mt-md mb-md': {}
172
+ }
173
+ },
174
+ '&:not(:first-child)': {
175
+ '@apply mt-[-1px]': {}
176
+ },
177
+ '&:first-child .sk-disclosure[data-open="true"]:not(.sk-disclosure-plain)': {
178
+ '@apply mt-0 mb-md': {}
179
+ },
180
+ '&:last-child .sk-disclosure[data-open="true"]:not(.sk-disclosure-plain)': {
181
+ '@apply mt-md mb-0': {}
182
+ },
183
+ '&:last-child .sk-disclosure-plain': {
184
+ '@apply border-b-transparent': {}
185
+ }
186
+ }
122
187
  }
123
188
  };
124
189
  };
package/dist/cjs/components/accordion.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"accordion.js","names":["module","exports","Accordion","colors","fontWeight","boxShadow","outline","transitionProperty","transitionTimingFunction","transitionDuration"],"sources":["../../../src/components/accordion.js"],"sourcesContent":["module.exports = Accordion = (colors) => ({\r\n '.accordion': {\r\n '&-header': {\r\n '@apply flex flex-col text-left': {},\r\n\r\n '[aria-expanded=\"true\"] &': {\r\n '@apply bg-hover': {},\r\n },\r\n\r\n '&-icon': {\r\n '@apply ml-auto !text-2xl': {},\r\n },\r\n },\r\n\r\n '&-is-open &-header': {\r\n '@apply bg-hover': {},\r\n },\r\n\r\n '&-toggle': {\r\n '@apply flex items-center inline-block text-lg leading-lg text-left text-lg mx-md sm:mx-lg my-md': {},\r\n fontWeight: 'bold',\r\n //\"@apply focus-visible:shadow shadow-lg\": {},\r\n '&:focus-visible': {\r\n boxShadow: '0 0 0 0.4rem #fff!important',\r\n outline: '0',\r\n //\"@apply border-4\": {},\r\n },\r\n '.accordion-title': {\r\n '@apply mr-md text-base leading-base md:text-lg md:leading-lg': {},\r\n },\r\n '.accordion-subtitle': {\r\n '@apply m-0 mr-md text-sm font-normal': {},\r\n },\r\n },\r\n\r\n '&-body': {\r\n '@apply h-0 overflow-hidden': {},\r\n transitionProperty: 'visibility, height, padding, margin',\r\n transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',\r\n transitionDuration: '180ms',\r\n\r\n '&[aria-hidden=\"true\"], &[data-hidden=\"true\"]': {\r\n '@apply my-0 invisible': {},\r\n },\r\n\r\n '&[aria-hidden=\"false\"], &[data-hidden=\"false\"]': {\r\n '@apply block h-auto visible': {},\r\n },\r\n },\r\n\r\n '&-solid': {\r\n '@apply border border-primary': {},\r\n '.accordion-header': {\r\n '@apply bg-primary text-white': {},\r\n\r\n '[aria-expanded=\"true\"] &': {\r\n '@apply bg-hover': {},\r\n },\r\n },\r\n },\r\n\r\n '&-alert': {\r\n '@apply border border-warning': {},\r\n '.accordion-header': {\r\n '@apply bg-warning-light text-warning': {},\r\n\r\n '[aria-expanded=\"true\"] &': {\r\n '@apply bg-warning-light': {},\r\n },\r\n },\r\n },\r\n '&-error': {\r\n '@apply border border-error': {},\r\n '.accordion-header': {\r\n '@apply bg-error-light text-error': {},\r\n\r\n '[aria-expanded=\"true\"] &': {\r\n '@apply bg-error-light': {},\r\n },\r\n },\r\n },\r\n\r\n '&-is-open': {\r\n '@apply border border-gray-stroke': {},\r\n '& .accordion-header': {\r\n '@apply bg-hover text-white': {},\r\n },\r\n },\r\n\r\n '&-is-open-alert': {\r\n '@apply border border-warning': {},\r\n '& .accordion-header': {\r\n '@apply border-b border-warning': {},\r\n },\r\n },\r\n\r\n '&-is-open-error': {\r\n '@apply border border-error': {},\r\n '& .accordion-header': {\r\n '@apply border-b border-error': {},\r\n },\r\n },\r\n\r\n '&-is-open &-body, &-is-open-alert &-body, &-is-open-error &-body': {\r\n '@apply overflow-visible animate-reset-overflow': {},\r\n },\r\n\r\n '&-outline': {\r\n '@apply border border-gray-stroke': {},\r\n '.accordion-body': {\r\n '@apply mt-0': {},\r\n },\r\n '.accordion-toggle': {\r\n '&:focus-visible': {\r\n boxShadow: '0 0 0 0.4rem #4b4b4b!important',\r\n outline: '0',\r\n },\r\n },\r\n '.accordion-header': {\r\n '@apply bg-transparent text-body': {},\r\n\r\n '[aria-expanded=\"true\"] &': {\r\n '@apply bg-hover': {},\r\n },\r\n },\r\n },\r\n\r\n '&-disabled, &-disabled button': {\r\n '@apply disabled:cursor-not-allowed cursor-not-allowed': {},\r\n },\r\n\r\n '&-disabled &-header': {\r\n '@apply bg-gray-lighter text-gray': {},\r\n },\r\n\r\n '&-disabled, &&-disabled': {\r\n '@apply border-gray': {},\r\n },\r\n },\r\n});\r\n"],"mappings":";;AAAAA,MAAM,CAACC,OAAO,GAAGC,SAAS,GAAG,SAAAA,UAACC,MAAM;EAAA,OAAM;IACxC,YAAY,EAAE;MACZ,UAAU,EAAE;QACV,gCAAgC,EAAE,CAAC,CAAC;QAEpC,0BAA0B,EAAE;UAC1B,iBAAiB,EAAE,CAAC;QACtB,CAAC;QAED,QAAQ,EAAE;UACR,0BAA0B,EAAE,CAAC;QAC/B;MACF,CAAC;MAED,oBAAoB,EAAE;QACpB,iBAAiB,EAAE,CAAC;MACtB,CAAC;MAED,UAAU,EAAE;QACV,iGAAiG,EAAE,CAAC,CAAC;QACrGC,UAAU,EAAE,MAAM;QAClB;QACA,iBAAiB,EAAE;UACjBC,SAAS,EAAE,6BAA6B;UACxCC,OAAO,EAAE;UACT;QACF,CAAC;;QACD,kBAAkB,EAAE;UAClB,8DAA8D,EAAE,CAAC;QACnE,CAAC;QACD,qBAAqB,EAAE;UACrB,sCAAsC,EAAE,CAAC;QAC3C;MACF,CAAC;MAED,QAAQ,EAAE;QACR,4BAA4B,EAAE,CAAC,CAAC;QAChCC,kBAAkB,EAAE,qCAAqC;QACzDC,wBAAwB,EAAE,8BAA8B;QACxDC,kBAAkB,EAAE,OAAO;QAE3B,8CAA8C,EAAE;UAC9C,uBAAuB,EAAE,CAAC;QAC5B,CAAC;QAED,gDAAgD,EAAE;UAChD,6BAA6B,EAAE,CAAC;QAClC;MACF,CAAC;MAED,SAAS,EAAE;QACT,8BAA8B,EAAE,CAAC,CAAC;QAClC,mBAAmB,EAAE;UACnB,8BAA8B,EAAE,CAAC,CAAC;UAElC,0BAA0B,EAAE;YAC1B,iBAAiB,EAAE,CAAC;UACtB;QACF;MACF,CAAC;MAED,SAAS,EAAE;QACT,8BAA8B,EAAE,CAAC,CAAC;QAClC,mBAAmB,EAAE;UACnB,sCAAsC,EAAE,CAAC,CAAC;UAE1C,0BAA0B,EAAE;YAC1B,yBAAyB,EAAE,CAAC;UAC9B;QACF;MACF,CAAC;MACD,SAAS,EAAE;QACT,4BAA4B,EAAE,CAAC,CAAC;QAChC,mBAAmB,EAAE;UACnB,kCAAkC,EAAE,CAAC,CAAC;UAEtC,0BAA0B,EAAE;YAC1B,uBAAuB,EAAE,CAAC;UAC5B;QACF;MACF,CAAC;MAED,WAAW,EAAE;QACX,kCAAkC,EAAE,CAAC,CAAC;QACtC,qBAAqB,EAAE;UACrB,4BAA4B,EAAE,CAAC;QACjC;MACF,CAAC;MAED,iBAAiB,EAAE;QACjB,8BAA8B,EAAE,CAAC,CAAC;QAClC,qBAAqB,EAAE;UACrB,gCAAgC,EAAE,CAAC;QACrC;MACF,CAAC;MAED,iBAAiB,EAAE;QACjB,4BAA4B,EAAE,CAAC,CAAC;QAChC,qBAAqB,EAAE;UACrB,8BAA8B,EAAE,CAAC;QACnC;MACF,CAAC;MAED,kEAAkE,EAAE;QAClE,gDAAgD,EAAE,CAAC;MACrD,CAAC;MAED,WAAW,EAAE;QACX,kCAAkC,EAAE,CAAC,CAAC;QACtC,iBAAiB,EAAE;UACjB,aAAa,EAAE,CAAC;QAClB,CAAC;QACD,mBAAmB,EAAE;UACnB,iBAAiB,EAAE;YACjBJ,SAAS,EAAE,gCAAgC;YAC3CC,OAAO,EAAE;UACX;QACF,CAAC;QACD,mBAAmB,EAAE;UACnB,iCAAiC,EAAE,CAAC,CAAC;UAErC,0BAA0B,EAAE;YAC1B,iBAAiB,EAAE,CAAC;UACtB;QACF;MACF,CAAC;MAED,+BAA+B,EAAE;QAC/B,uDAAuD,EAAE,CAAC;MAC5D,CAAC;MAED,qBAAqB,EAAE;QACrB,kCAAkC,EAAE,CAAC;MACvC,CAAC;MAED,yBAAyB,EAAE;QACzB,oBAAoB,EAAE,CAAC;MACzB;IACF;EACF,CAAC;AAAA,CAAC"}
1
+ {"version":3,"file":"accordion.js","names":["module","exports","Accordion","colors","svg","fontWeight","transitionProperty","transitionTimingFunction","transitionDuration"],"sources":["../../../src/components/accordion.js"],"sourcesContent":["module.exports = Accordion = (colors) => ({\r\n '.sk-disclosure': {\r\n '&:has(&-header:focus-visible)': {\r\n '@apply outline': {},\r\n },\r\n '&-header': {\r\n '@apply flex flex-col text-left': {},\r\n\r\n '[aria-expanded=\"true\"] &': {\r\n '@apply bg-hover': {},\r\n },\r\n\r\n '&:focus-visible': {\r\n '@apply outline-0': {},\r\n },\r\n\r\n '&-icon': {\r\n '@apply ml-auto !text-2xl': {},\r\n svg: {\r\n '@apply !text-2xl': {},\r\n },\r\n },\r\n },\r\n\r\n '&-is-open &-header': {\r\n '@apply bg-hover': {},\r\n },\r\n\r\n '&-toggle': {\r\n '@apply flex items-center inline-block text-lg leading-lg text-left text-lg mx-md sm:mx-lg my-md': {},\r\n fontWeight: 'bold',\r\n\r\n '.sk-disclosure-title': {\r\n '@apply mr-md text-base leading-base md:text-lg md:leading-lg': {},\r\n },\r\n '.sk-disclosure-subtitle': {\r\n '@apply m-0 mr-md text-sm font-normal': {},\r\n },\r\n },\r\n\r\n '&-body': {\r\n '@apply h-0 overflow-hidden': {},\r\n transitionProperty: 'visibility, height, padding, margin',\r\n transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',\r\n transitionDuration: '180ms',\r\n\r\n '&[aria-hidden=\"true\"], &[data-hidden=\"true\"]': {\r\n '@apply my-0 invisible': {},\r\n },\r\n\r\n '&[aria-hidden=\"false\"], &[data-hidden=\"false\"]': {\r\n '@apply block h-auto visible': {},\r\n },\r\n },\r\n\r\n '&-solid': {\r\n '@apply border border-primary': {},\r\n '.sk-disclosure-header': {\r\n '@apply bg-primary text-white': {},\r\n\r\n '[aria-expanded=\"true\"] &': {\r\n '@apply bg-hover': {},\r\n },\r\n },\r\n },\r\n\r\n '&-solid[data-alert=\"true\"], &-outline[data-alert=\"true\"]': {\r\n '@apply border border-warning': {},\r\n\r\n '.sk-disclosure-header:not([data-disabled=\"true\"])': {\r\n '@apply bg-warning-light text-warning': {},\r\n\r\n '[aria-expanded=\"true\"] &': {\r\n '@apply bg-warning-light': {},\r\n },\r\n },\r\n },\r\n '&-solid[data-error=\"true\"], &-outline[data-error=\"true\"]': {\r\n '@apply border border-error': {},\r\n '.sk-disclosure-header:not([data-disabled=\"true\"])': {\r\n '@apply bg-error-light text-error': {},\r\n\r\n '[aria-expanded=\"true\"] &': {\r\n '@apply bg-error-light': {},\r\n },\r\n },\r\n },\r\n\r\n '&-is-open': {\r\n '@apply border border-gray-stroke': {},\r\n '& .sk-disclosure-header': {\r\n '@apply bg-hover text-white': {},\r\n },\r\n\r\n '&[data-alert=\"true\"]': {\r\n '@apply border border-warning': {},\r\n '& .sk-disclosure-header': {\r\n '@apply border-b border-warning': {},\r\n },\r\n },\r\n\r\n '&[data-error=\"true\"]': {\r\n '@apply border border-error': {},\r\n '& .sk-disclosure-header': {\r\n '@apply border-b border-error': {},\r\n },\r\n },\r\n },\r\n '&-is-open &-body': {\r\n '@apply overflow-visible animate-reset-overflow': {},\r\n },\r\n\r\n '&-outline': {\r\n '@apply border border-gray-stroke': {},\r\n '&:not([data-error=\"true\"]):not([data-alert=\"true\"]) .sk-disclosure-body': {\r\n '@apply mt-0': {},\r\n },\r\n '.sk-disclosure-toggle': {},\r\n '.sk-disclosure-header': {\r\n '@apply bg-transparent text-body': {},\r\n\r\n '[aria-expanded=\"true\"] &': {\r\n '@apply bg-hover': {},\r\n },\r\n },\r\n },\r\n\r\n '&-plain': {\r\n '@apply border-0': {},\r\n '&:has(.sk-disclosure-header:focus-visible)': {\r\n '@apply outline-offset-4': {},\r\n },\r\n '.sk-disclosure-header': {\r\n '@apply bg-transparent text-body': {},\r\n\r\n '[aria-expanded=\"true\"] &': {\r\n '@apply bg-hover': {},\r\n },\r\n '&[data-disabled=\"true\"]': {\r\n '@apply bg-transparent text-gray-stroke': {},\r\n },\r\n '.sk-disclosure-toggle': {\r\n '@apply mx-0': {},\r\n },\r\n },\r\n '.sk-disclosure-body': {\r\n '@apply m-0': {},\r\n },\r\n '&[data-alert=\"true\"]': {\r\n '@apply border-0': {},\r\n '.sk-disclosure-header': {\r\n '@apply border-0 text-warning': {},\r\n },\r\n },\r\n '&[data-error=\"true\"]': {\r\n '@apply border-0': {},\r\n '.sk-disclosure-header': {\r\n '@apply border-0 text-error': {},\r\n },\r\n },\r\n },\r\n\r\n '&-disabled, &-disabled [role=\"button\"]': {\r\n '@apply disabled:cursor-not-allowed cursor-not-allowed': {},\r\n },\r\n\r\n '&-header[data-disabled=\"true\"]': {\r\n '@apply bg-gray-lighter text-gray-stroke': {},\r\n },\r\n\r\n '&-disabled, &&-disabled': {\r\n '@apply border-gray': {},\r\n },\r\n },\r\n '.sk-accordion': {\r\n '&-item': {\r\n '.sk-disclosure': {\r\n transitionProperty: 'margin',\r\n transitionDuration: '180ms',\r\n '&-disabled': {\r\n '@apply border-x-transparent border-y-transparent': {},\r\n },\r\n '&-plain, &-plain[data-disabled=\"true\"]': {\r\n '@apply border border-transparent border-b-gray-stroke': {},\r\n },\r\n\r\n '&-solid[data-open=\"false\"]': {\r\n '@apply border-white': {},\r\n '&[data-disabled=\"true\"]': {\r\n '@apply border-x-transparent border-y-transparent': {},\r\n },\r\n },\r\n '&[data-open=\"true\"]:not(&-plain)': {\r\n '@apply mt-md mb-md': {},\r\n },\r\n },\r\n '&:not(:first-child)': {\r\n '@apply mt-[-1px]': {},\r\n },\r\n '&:first-child .sk-disclosure[data-open=\"true\"]:not(.sk-disclosure-plain)': {\r\n '@apply mt-0 mb-md': {},\r\n },\r\n '&:last-child .sk-disclosure[data-open=\"true\"]:not(.sk-disclosure-plain)': {\r\n '@apply mt-md mb-0': {},\r\n },\r\n '&:last-child .sk-disclosure-plain': {\r\n '@apply border-b-transparent': {},\r\n },\r\n },\r\n },\r\n});\r\n"],"mappings":"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"}
package/dist/cjs/components/user-menu.js CHANGED
@@ -2,40 +2,58 @@
2
2
 
3
3
  module.exports = UserMenu = function UserMenu(colors) {
4
4
  return {
5
- '.usermenu': {
6
- // "@apply mx-sm mt-sm mb-0 px-md py-0 divide-y divide-y-2 divide-gray-300 bg-white border-2 border-white border-solid rounded":
7
- '@apply text-body': {},
8
- // "@apply ": {},
9
- '&-is-open': {
10
- // "@apply border-2 border-gray-300 border-solid rounded": {},
11
- // "box-shadow": "0px 4px 12px rgba(27, 29, 31, 0.12)",
5
+ '.sk-usermenu': {
6
+ '@apply text-body mx-auto lg:mx-sm lg:relative': {},
7
+ '&-wrapper': {
8
+ '@apply block max-lg:-mr-md': {}
12
9
  },
13
- '&-menuTitle': {
14
- overflow: 'hidden',
15
- 'text-overflow': 'ellipsis',
16
- display: '-webkit-box',
17
- '-webkit-line-clamp': '2' /* number of lines to show */,
18
- 'line-clamp': '2',
19
- '-webkit-box-orient': 'vertical'
10
+ '&-button': {
11
+ '&-content': {
12
+ '@apply max-lg:font-bold lg:items-center lg:text-left': {}
13
+ },
14
+ '&-icon': {
15
+ '@apply !text-2xl ml-auto align-top max-lg:mr-2 max-lg:text-primary': {}
16
+ }
17
+ },
18
+ '&-first-row': {
19
+ '@apply max-lg:hidden bg-white border-t-2 pb-sm -mt-0 mx-md': {}
20
+ },
21
+ '&-label': {
22
+ '@apply flex align-middle mt-md lg:mb-xs': {},
23
+ '&-content': {
24
+ '@apply inline-block px-lg py-md lg:pl-md lg:pr-md lg:py-sm text-sm font-semibold uppercase whitespace-nowrap': {}
25
+ },
26
+ '&-line': {
27
+ '@apply inline-block w-full h-px border-gray-300 border-t-2 mt-[2.6rem] lg:hidden': {}
28
+ }
20
29
  },
21
- '&-menuSubTitle': {
22
- overflow: 'hidden',
23
- 'text-overflow': 'ellipsis',
24
- display: '-webkit-box',
25
- '-webkit-line-clamp': '1' /* number of lines to show */,
26
- 'line-clamp': '1',
27
- '-webkit-box-orient': 'vertical'
30
+ '&-body': {
31
+ '@apply py-sm absolute rounded border-t-0 bg-white mt-6 right-0 left-0 border-none max-lg:shadow-lg lg:-mt-2 lg:border-2 lg:border-solid lg:border-white': {},
32
+ '&[data-open="true"]': {
33
+ '@apply lg:border-gray-300 lg:border-t-0 lg:shadow-lg': {}
34
+ }
28
35
  },
29
36
  '&-header': {
30
- '[aria-expanded="true"] &': {
31
- '@apply bg-hover': {}
37
+ '@apply px-md py-sm bg-white border-none rounded lg:border-2 lg:border-solid lg:border-b-0 lg:border-transparent': {},
38
+ '&[aria-expanded="true"]': {
39
+ '@apply lg:border-gray-300 lg:shadow-none': {}
32
40
  }
33
41
  },
34
- '&-item': {
35
- '@apply block px-lg py-md lg:px-md lg:py-sm w-full cursor-pointer text-body no-underline': {},
42
+ '&-group': {
43
+ 'a, button': {
44
+ '@apply block px-lg py-md lg:px-md lg:py-sm w-full cursor-pointer text-body no-underline': {},
45
+ '&.active': {
46
+ '@apply bg-hover text-white no-underline': {}
47
+ }
48
+ },
36
49
  '&.active': {
37
- '@apply bg-hover text-white no-underline': {}
50
+ 'a, button': {
51
+ '@apply bg-hover text-white no-underline': {}
52
+ }
38
53
  }
54
+ },
55
+ '&-divider': {
56
+ '@apply bg-white border-t-2 pb-sm mt-sm mx-md': {}
39
57
  }
40
58
  }
41
59
  };
package/dist/cjs/components/user-menu.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"user-menu.js","names":["module","exports","UserMenu","colors","overflow","display"],"sources":["../../../src/components/user-menu.js"],"sourcesContent":["module.exports = UserMenu = (colors) => ({\r\n '.usermenu': {\r\n // \"@apply mx-sm mt-sm mb-0 px-md py-0 divide-y divide-y-2 divide-gray-300 bg-white border-2 border-white border-solid rounded\":\r\n '@apply text-body': {},\r\n // \"@apply \": {},\r\n '&-is-open': {\r\n // \"@apply border-2 border-gray-300 border-solid rounded\": {},\r\n // \"box-shadow\": \"0px 4px 12px rgba(27, 29, 31, 0.12)\",\r\n },\r\n\r\n '&-menuTitle': {\r\n overflow: 'hidden',\r\n 'text-overflow': 'ellipsis',\r\n display: '-webkit-box',\r\n '-webkit-line-clamp': '2' /* number of lines to show */,\r\n 'line-clamp': '2',\r\n '-webkit-box-orient': 'vertical',\r\n },\r\n\r\n '&-menuSubTitle': {\r\n overflow: 'hidden',\r\n 'text-overflow': 'ellipsis',\r\n display: '-webkit-box',\r\n '-webkit-line-clamp': '1' /* number of lines to show */,\r\n 'line-clamp': '1',\r\n '-webkit-box-orient': 'vertical',\r\n },\r\n\r\n '&-header': {\r\n '[aria-expanded=\"true\"] &': {\r\n '@apply bg-hover': {},\r\n },\r\n },\r\n '&-item': {\r\n '@apply block px-lg py-md lg:px-md lg:py-sm w-full cursor-pointer text-body no-underline': {},\r\n '&.active': {\r\n '@apply bg-hover text-white no-underline': {},\r\n },\r\n },\r\n },\r\n});\r\n"],"mappings":";;AAAAA,MAAM,CAACC,OAAO,GAAGC,QAAQ,GAAG,SAAAA,SAACC,MAAM;EAAA,OAAM;IACvC,WAAW,EAAE;MACX;MACA,kBAAkB,EAAE,CAAC,CAAC;MACtB;MACA,WAAW,EAAE;QACX;QACA;MAAA,CACD;MAED,aAAa,EAAE;QACbC,QAAQ,EAAE,QAAQ;QAClB,eAAe,EAAE,UAAU;QAC3BC,OAAO,EAAE,aAAa;QACtB,oBAAoB,EAAE,GAAG,CAAC;QAC1B,YAAY,EAAE,GAAG;QACjB,oBAAoB,EAAE;MACxB,CAAC;MAED,gBAAgB,EAAE;QAChBD,QAAQ,EAAE,QAAQ;QAClB,eAAe,EAAE,UAAU;QAC3BC,OAAO,EAAE,aAAa;QACtB,oBAAoB,EAAE,GAAG,CAAC;QAC1B,YAAY,EAAE,GAAG;QACjB,oBAAoB,EAAE;MACxB,CAAC;MAED,UAAU,EAAE;QACV,0BAA0B,EAAE;UAC1B,iBAAiB,EAAE,CAAC;QACtB;MACF,CAAC;MACD,QAAQ,EAAE;QACR,yFAAyF,EAAE,CAAC,CAAC;QAC7F,UAAU,EAAE;UACV,yCAAyC,EAAE,CAAC;QAC9C;MACF;IACF;EACF,CAAC;AAAA,CAAC"}
1
+ {"version":3,"file":"user-menu.js","names":["module","exports","UserMenu","colors"],"sources":["../../../src/components/user-menu.js"],"sourcesContent":["module.exports = UserMenu = (colors) => ({\r\n '.sk-usermenu': {\r\n '@apply text-body mx-auto lg:mx-sm lg:relative': {},\r\n\r\n '&-wrapper': {\r\n '@apply block max-lg:-mr-md': {},\r\n },\r\n\r\n '&-button': {\r\n '&-content': {\r\n '@apply max-lg:font-bold lg:items-center lg:text-left': {},\r\n },\r\n '&-icon': {\r\n '@apply !text-2xl ml-auto align-top max-lg:mr-2 max-lg:text-primary': {},\r\n },\r\n },\r\n\r\n '&-first-row': {\r\n '@apply max-lg:hidden bg-white border-t-2 pb-sm -mt-0 mx-md': {},\r\n },\r\n\r\n '&-label': {\r\n '@apply flex align-middle mt-md lg:mb-xs': {},\r\n '&-content': {\r\n '@apply inline-block px-lg py-md lg:pl-md lg:pr-md lg:py-sm text-sm font-semibold uppercase whitespace-nowrap':\r\n {},\r\n },\r\n '&-line': {\r\n '@apply inline-block w-full h-px border-gray-300 border-t-2 mt-[2.6rem] lg:hidden': {},\r\n },\r\n },\r\n\r\n '&-body': {\r\n '@apply py-sm absolute rounded border-t-0 bg-white mt-6 right-0 left-0 border-none max-lg:shadow-lg lg:-mt-2 lg:border-2 lg:border-solid lg:border-white':\r\n {},\r\n '&[data-open=\"true\"]': {\r\n '@apply lg:border-gray-300 lg:border-t-0 lg:shadow-lg': {},\r\n },\r\n },\r\n\r\n '&-header': {\r\n '@apply px-md py-sm bg-white border-none rounded lg:border-2 lg:border-solid lg:border-b-0 lg:border-transparent':\r\n {},\r\n '&[aria-expanded=\"true\"]': {\r\n '@apply lg:border-gray-300 lg:shadow-none': {},\r\n },\r\n },\r\n '&-group': {\r\n 'a, button': {\r\n '@apply block px-lg py-md lg:px-md lg:py-sm w-full cursor-pointer text-body no-underline': {},\r\n '&.active': {\r\n '@apply bg-hover text-white no-underline': {},\r\n },\r\n },\r\n '&.active': {\r\n 'a, button': {\r\n '@apply bg-hover text-white no-underline': {},\r\n },\r\n },\r\n },\r\n '&-divider': {\r\n '@apply bg-white border-t-2 pb-sm mt-sm mx-md': {},\r\n },\r\n },\r\n});\r\n"],"mappings":";;AAAAA,MAAM,CAACC,OAAO,GAAGC,QAAQ,GAAG,SAAAA,SAACC,MAAM;EAAA,OAAM;IACvC,cAAc,EAAE;MACd,+CAA+C,EAAE,CAAC,CAAC;MAEnD,WAAW,EAAE;QACX,4BAA4B,EAAE,CAAC;MACjC,CAAC;MAED,UAAU,EAAE;QACV,WAAW,EAAE;UACX,sDAAsD,EAAE,CAAC;QAC3D,CAAC;QACD,QAAQ,EAAE;UACR,oEAAoE,EAAE,CAAC;QACzE;MACF,CAAC;MAED,aAAa,EAAE;QACb,4DAA4D,EAAE,CAAC;MACjE,CAAC;MAED,SAAS,EAAE;QACT,yCAAyC,EAAE,CAAC,CAAC;QAC7C,WAAW,EAAE;UACX,8GAA8G,EAC5G,CAAC;QACL,CAAC;QACD,QAAQ,EAAE;UACR,kFAAkF,EAAE,CAAC;QACvF;MACF,CAAC;MAED,QAAQ,EAAE;QACR,yJAAyJ,EACvJ,CAAC,CAAC;QACJ,qBAAqB,EAAE;UACrB,sDAAsD,EAAE,CAAC;QAC3D;MACF,CAAC;MAED,UAAU,EAAE;QACV,iHAAiH,EAC/G,CAAC,CAAC;QACJ,yBAAyB,EAAE;UACzB,0CAA0C,EAAE,CAAC;QAC/C;MACF,CAAC;MACD,SAAS,EAAE;QACT,WAAW,EAAE;UACX,yFAAyF,EAAE,CAAC,CAAC;UAC7F,UAAU,EAAE;YACV,yCAAyC,EAAE,CAAC;UAC9C;QACF,CAAC;QACD,UAAU,EAAE;UACV,WAAW,EAAE;YACX,yCAAyC,EAAE,CAAC;UAC9C;QACF;MACF,CAAC;MACD,WAAW,EAAE;QACX,8CAA8C,EAAE,CAAC;MACnD;IACF;EACF,CAAC;AAAA,CAAC"}
package/dist/esm/components/accordion.js CHANGED
@@ -1,12 +1,21 @@
1
1
  module.exports = Accordion = colors => ({
2
- '.accordion': {
2
+ '.sk-disclosure': {
3
+ '&:has(&-header:focus-visible)': {
4
+ '@apply outline': {}
5
+ },
3
6
  '&-header': {
4
7
  '@apply flex flex-col text-left': {},
5
8
  '[aria-expanded="true"] &': {
6
9
  '@apply bg-hover': {}
7
10
  },
11
+ '&:focus-visible': {
12
+ '@apply outline-0': {}
13
+ },
8
14
  '&-icon': {
9
- '@apply ml-auto !text-2xl': {}
15
+ '@apply ml-auto !text-2xl': {},
16
+ svg: {
17
+ '@apply !text-2xl': {}
18
+ }
10
19
  }
11
20
  },
12
21
  '&-is-open &-header': {
@@ -15,17 +24,10 @@ module.exports = Accordion = colors => ({
15
24
  '&-toggle': {
16
25
  '@apply flex items-center inline-block text-lg leading-lg text-left text-lg mx-md sm:mx-lg my-md': {},
17
26
  fontWeight: 'bold',
18
- //"@apply focus-visible:shadow shadow-lg": {},
19
- '&:focus-visible': {
20
- boxShadow: '0 0 0 0.4rem #fff!important',
21
- outline: '0'
22
- //"@apply border-4": {},
23
- },
24
-
25
- '.accordion-title': {
27
+ '.sk-disclosure-title': {
26
28
  '@apply mr-md text-base leading-base md:text-lg md:leading-lg': {}
27
29
  },
28
- '.accordion-subtitle': {
30
+ '.sk-disclosure-subtitle': {
29
31
  '@apply m-0 mr-md text-sm font-normal': {}
30
32
  }
31
33
  },
@@ -43,25 +45,25 @@ module.exports = Accordion = colors => ({
43
45
  },
44
46
  '&-solid': {
45
47
  '@apply border border-primary': {},
46
- '.accordion-header': {
48
+ '.sk-disclosure-header': {
47
49
  '@apply bg-primary text-white': {},
48
50
  '[aria-expanded="true"] &': {
49
51
  '@apply bg-hover': {}
50
52
  }
51
53
  }
52
54
  },
53
- '&-alert': {
55
+ '&-solid[data-alert="true"], &-outline[data-alert="true"]': {
54
56
  '@apply border border-warning': {},
55
- '.accordion-header': {
57
+ '.sk-disclosure-header:not([data-disabled="true"])': {
56
58
  '@apply bg-warning-light text-warning': {},
57
59
  '[aria-expanded="true"] &': {
58
60
  '@apply bg-warning-light': {}
59
61
  }
60
62
  }
61
63
  },
62
- '&-error': {
64
+ '&-solid[data-error="true"], &-outline[data-error="true"]': {
63
65
  '@apply border border-error': {},
64
- '.accordion-header': {
66
+ '.sk-disclosure-header:not([data-disabled="true"])': {
65
67
  '@apply bg-error-light text-error': {},
66
68
  '[aria-expanded="true"] &': {
67
69
  '@apply bg-error-light': {}
@@ -70,52 +72,115 @@ module.exports = Accordion = colors => ({
70
72
  },
71
73
  '&-is-open': {
72
74
  '@apply border border-gray-stroke': {},
73
- '& .accordion-header': {
75
+ '& .sk-disclosure-header': {
74
76
  '@apply bg-hover text-white': {}
77
+ },
78
+ '&[data-alert="true"]': {
79
+ '@apply border border-warning': {},
80
+ '& .sk-disclosure-header': {
81
+ '@apply border-b border-warning': {}
82
+ }
83
+ },
84
+ '&[data-error="true"]': {
85
+ '@apply border border-error': {},
86
+ '& .sk-disclosure-header': {
87
+ '@apply border-b border-error': {}
88
+ }
75
89
  }
76
90
  },
77
- '&-is-open-alert': {
78
- '@apply border border-warning': {},
79
- '& .accordion-header': {
80
- '@apply border-b border-warning': {}
81
- }
82
- },
83
- '&-is-open-error': {
84
- '@apply border border-error': {},
85
- '& .accordion-header': {
86
- '@apply border-b border-error': {}
87
- }
88
- },
89
- '&-is-open &-body, &-is-open-alert &-body, &-is-open-error &-body': {
91
+ '&-is-open &-body': {
90
92
  '@apply overflow-visible animate-reset-overflow': {}
91
93
  },
92
94
  '&-outline': {
93
95
  '@apply border border-gray-stroke': {},
94
- '.accordion-body': {
96
+ '&:not([data-error="true"]):not([data-alert="true"]) .sk-disclosure-body': {
95
97
  '@apply mt-0': {}
96
98
  },
97
- '.accordion-toggle': {
98
- '&:focus-visible': {
99
- boxShadow: '0 0 0 0.4rem #4b4b4b!important',
100
- outline: '0'
99
+ '.sk-disclosure-toggle': {},
100
+ '.sk-disclosure-header': {
101
+ '@apply bg-transparent text-body': {},
102
+ '[aria-expanded="true"] &': {
103
+ '@apply bg-hover': {}
101
104
  }
105
+ }
106
+ },
107
+ '&-plain': {
108
+ '@apply border-0': {},
109
+ '&:has(.sk-disclosure-header:focus-visible)': {
110
+ '@apply outline-offset-4': {}
102
111
  },
103
- '.accordion-header': {
112
+ '.sk-disclosure-header': {
104
113
  '@apply bg-transparent text-body': {},
105
114
  '[aria-expanded="true"] &': {
106
115
  '@apply bg-hover': {}
116
+ },
117
+ '&[data-disabled="true"]': {
118
+ '@apply bg-transparent text-gray-stroke': {}
119
+ },
120
+ '.sk-disclosure-toggle': {
121
+ '@apply mx-0': {}
122
+ }
123
+ },
124
+ '.sk-disclosure-body': {
125
+ '@apply m-0': {}
126
+ },
127
+ '&[data-alert="true"]': {
128
+ '@apply border-0': {},
129
+ '.sk-disclosure-header': {
130
+ '@apply border-0 text-warning': {}
131
+ }
132
+ },
133
+ '&[data-error="true"]': {
134
+ '@apply border-0': {},
135
+ '.sk-disclosure-header': {
136
+ '@apply border-0 text-error': {}
107
137
  }
108
138
  }
109
139
  },
110
- '&-disabled, &-disabled button': {
140
+ '&-disabled, &-disabled [role="button"]': {
111
141
  '@apply disabled:cursor-not-allowed cursor-not-allowed': {}
112
142
  },
113
- '&-disabled &-header': {
114
- '@apply bg-gray-lighter text-gray': {}
143
+ '&-header[data-disabled="true"]': {
144
+ '@apply bg-gray-lighter text-gray-stroke': {}
115
145
  },
116
146
  '&-disabled, &&-disabled': {
117
147
  '@apply border-gray': {}
118
148
  }
149
+ },
150
+ '.sk-accordion': {
151
+ '&-item': {
152
+ '.sk-disclosure': {
153
+ transitionProperty: 'margin',
154
+ transitionDuration: '180ms',
155
+ '&-disabled': {
156
+ '@apply border-x-transparent border-y-transparent': {}
157
+ },
158
+ '&-plain, &-plain[data-disabled="true"]': {
159
+ '@apply border border-transparent border-b-gray-stroke': {}
160
+ },
161
+ '&-solid[data-open="false"]': {
162
+ '@apply border-white': {},
163
+ '&[data-disabled="true"]': {
164
+ '@apply border-x-transparent border-y-transparent': {}
165
+ }
166
+ },
167
+ '&[data-open="true"]:not(&-plain)': {
168
+ '@apply mt-md mb-md': {}
169
+ }
170
+ },
171
+ '&:not(:first-child)': {
172
+ '@apply mt-[-1px]': {}
173
+ },
174
+ '&:first-child .sk-disclosure[data-open="true"]:not(.sk-disclosure-plain)': {
175
+ '@apply mt-0 mb-md': {}
176
+ },
177
+ '&:last-child .sk-disclosure[data-open="true"]:not(.sk-disclosure-plain)': {
178
+ '@apply mt-md mb-0': {}
179
+ },
180
+ '&:last-child .sk-disclosure-plain': {
181
+ '@apply border-b-transparent': {}
182
+ }
183
+ }
119
184
  }
120
185
  });
121
186
  //# sourceMappingURL=accordion.js.map
package/dist/esm/components/accordion.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"accordion.js","names":["module","exports","Accordion","colors","fontWeight","boxShadow","outline","transitionProperty","transitionTimingFunction","transitionDuration"],"sources":["../../../src/components/accordion.js"],"sourcesContent":["module.exports = Accordion = (colors) => ({\r\n '.accordion': {\r\n '&-header': {\r\n '@apply flex flex-col text-left': {},\r\n\r\n '[aria-expanded=\"true\"] &': {\r\n '@apply bg-hover': {},\r\n },\r\n\r\n '&-icon': {\r\n '@apply ml-auto !text-2xl': {},\r\n },\r\n },\r\n\r\n '&-is-open &-header': {\r\n '@apply bg-hover': {},\r\n },\r\n\r\n '&-toggle': {\r\n '@apply flex items-center inline-block text-lg leading-lg text-left text-lg mx-md sm:mx-lg my-md': {},\r\n fontWeight: 'bold',\r\n //\"@apply focus-visible:shadow shadow-lg\": {},\r\n '&:focus-visible': {\r\n boxShadow: '0 0 0 0.4rem #fff!important',\r\n outline: '0',\r\n //\"@apply border-4\": {},\r\n },\r\n '.accordion-title': {\r\n '@apply mr-md text-base leading-base md:text-lg md:leading-lg': {},\r\n },\r\n '.accordion-subtitle': {\r\n '@apply m-0 mr-md text-sm font-normal': {},\r\n },\r\n },\r\n\r\n '&-body': {\r\n '@apply h-0 overflow-hidden': {},\r\n transitionProperty: 'visibility, height, padding, margin',\r\n transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',\r\n transitionDuration: '180ms',\r\n\r\n '&[aria-hidden=\"true\"], &[data-hidden=\"true\"]': {\r\n '@apply my-0 invisible': {},\r\n },\r\n\r\n '&[aria-hidden=\"false\"], &[data-hidden=\"false\"]': {\r\n '@apply block h-auto visible': {},\r\n },\r\n },\r\n\r\n '&-solid': {\r\n '@apply border border-primary': {},\r\n '.accordion-header': {\r\n '@apply bg-primary text-white': {},\r\n\r\n '[aria-expanded=\"true\"] &': {\r\n '@apply bg-hover': {},\r\n },\r\n },\r\n },\r\n\r\n '&-alert': {\r\n '@apply border border-warning': {},\r\n '.accordion-header': {\r\n '@apply bg-warning-light text-warning': {},\r\n\r\n '[aria-expanded=\"true\"] &': {\r\n '@apply bg-warning-light': {},\r\n },\r\n },\r\n },\r\n '&-error': {\r\n '@apply border border-error': {},\r\n '.accordion-header': {\r\n '@apply bg-error-light text-error': {},\r\n\r\n '[aria-expanded=\"true\"] &': {\r\n '@apply bg-error-light': {},\r\n },\r\n },\r\n },\r\n\r\n '&-is-open': {\r\n '@apply border border-gray-stroke': {},\r\n '& .accordion-header': {\r\n '@apply bg-hover text-white': {},\r\n },\r\n },\r\n\r\n '&-is-open-alert': {\r\n '@apply border border-warning': {},\r\n '& .accordion-header': {\r\n '@apply border-b border-warning': {},\r\n },\r\n },\r\n\r\n '&-is-open-error': {\r\n '@apply border border-error': {},\r\n '& .accordion-header': {\r\n '@apply border-b border-error': {},\r\n },\r\n },\r\n\r\n '&-is-open &-body, &-is-open-alert &-body, &-is-open-error &-body': {\r\n '@apply overflow-visible animate-reset-overflow': {},\r\n },\r\n\r\n '&-outline': {\r\n '@apply border border-gray-stroke': {},\r\n '.accordion-body': {\r\n '@apply mt-0': {},\r\n },\r\n '.accordion-toggle': {\r\n '&:focus-visible': {\r\n boxShadow: '0 0 0 0.4rem #4b4b4b!important',\r\n outline: '0',\r\n },\r\n },\r\n '.accordion-header': {\r\n '@apply bg-transparent text-body': {},\r\n\r\n '[aria-expanded=\"true\"] &': {\r\n '@apply bg-hover': {},\r\n },\r\n },\r\n },\r\n\r\n '&-disabled, &-disabled button': {\r\n '@apply disabled:cursor-not-allowed cursor-not-allowed': {},\r\n },\r\n\r\n '&-disabled &-header': {\r\n '@apply bg-gray-lighter text-gray': {},\r\n },\r\n\r\n '&-disabled, &&-disabled': {\r\n '@apply border-gray': {},\r\n },\r\n },\r\n});\r\n"],"mappings":"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"}
1
+ {"version":3,"file":"accordion.js","names":["module","exports","Accordion","colors","svg","fontWeight","transitionProperty","transitionTimingFunction","transitionDuration"],"sources":["../../../src/components/accordion.js"],"sourcesContent":["module.exports = Accordion = (colors) => ({\r\n '.sk-disclosure': {\r\n '&:has(&-header:focus-visible)': {\r\n '@apply outline': {},\r\n },\r\n '&-header': {\r\n '@apply flex flex-col text-left': {},\r\n\r\n '[aria-expanded=\"true\"] &': {\r\n '@apply bg-hover': {},\r\n },\r\n\r\n '&:focus-visible': {\r\n '@apply outline-0': {},\r\n },\r\n\r\n '&-icon': {\r\n '@apply ml-auto !text-2xl': {},\r\n svg: {\r\n '@apply !text-2xl': {},\r\n },\r\n },\r\n },\r\n\r\n '&-is-open &-header': {\r\n '@apply bg-hover': {},\r\n },\r\n\r\n '&-toggle': {\r\n '@apply flex items-center inline-block text-lg leading-lg text-left text-lg mx-md sm:mx-lg my-md': {},\r\n fontWeight: 'bold',\r\n\r\n '.sk-disclosure-title': {\r\n '@apply mr-md text-base leading-base md:text-lg md:leading-lg': {},\r\n },\r\n '.sk-disclosure-subtitle': {\r\n '@apply m-0 mr-md text-sm font-normal': {},\r\n },\r\n },\r\n\r\n '&-body': {\r\n '@apply h-0 overflow-hidden': {},\r\n transitionProperty: 'visibility, height, padding, margin',\r\n transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',\r\n transitionDuration: '180ms',\r\n\r\n '&[aria-hidden=\"true\"], &[data-hidden=\"true\"]': {\r\n '@apply my-0 invisible': {},\r\n },\r\n\r\n '&[aria-hidden=\"false\"], &[data-hidden=\"false\"]': {\r\n '@apply block h-auto visible': {},\r\n },\r\n },\r\n\r\n '&-solid': {\r\n '@apply border border-primary': {},\r\n '.sk-disclosure-header': {\r\n '@apply bg-primary text-white': {},\r\n\r\n '[aria-expanded=\"true\"] &': {\r\n '@apply bg-hover': {},\r\n },\r\n },\r\n },\r\n\r\n '&-solid[data-alert=\"true\"], &-outline[data-alert=\"true\"]': {\r\n '@apply border border-warning': {},\r\n\r\n '.sk-disclosure-header:not([data-disabled=\"true\"])': {\r\n '@apply bg-warning-light text-warning': {},\r\n\r\n '[aria-expanded=\"true\"] &': {\r\n '@apply bg-warning-light': {},\r\n },\r\n },\r\n },\r\n '&-solid[data-error=\"true\"], &-outline[data-error=\"true\"]': {\r\n '@apply border border-error': {},\r\n '.sk-disclosure-header:not([data-disabled=\"true\"])': {\r\n '@apply bg-error-light text-error': {},\r\n\r\n '[aria-expanded=\"true\"] &': {\r\n '@apply bg-error-light': {},\r\n },\r\n },\r\n },\r\n\r\n '&-is-open': {\r\n '@apply border border-gray-stroke': {},\r\n '& .sk-disclosure-header': {\r\n '@apply bg-hover text-white': {},\r\n },\r\n\r\n '&[data-alert=\"true\"]': {\r\n '@apply border border-warning': {},\r\n '& .sk-disclosure-header': {\r\n '@apply border-b border-warning': {},\r\n },\r\n },\r\n\r\n '&[data-error=\"true\"]': {\r\n '@apply border border-error': {},\r\n '& .sk-disclosure-header': {\r\n '@apply border-b border-error': {},\r\n },\r\n },\r\n },\r\n '&-is-open &-body': {\r\n '@apply overflow-visible animate-reset-overflow': {},\r\n },\r\n\r\n '&-outline': {\r\n '@apply border border-gray-stroke': {},\r\n '&:not([data-error=\"true\"]):not([data-alert=\"true\"]) .sk-disclosure-body': {\r\n '@apply mt-0': {},\r\n },\r\n '.sk-disclosure-toggle': {},\r\n '.sk-disclosure-header': {\r\n '@apply bg-transparent text-body': {},\r\n\r\n '[aria-expanded=\"true\"] &': {\r\n '@apply bg-hover': {},\r\n },\r\n },\r\n },\r\n\r\n '&-plain': {\r\n '@apply border-0': {},\r\n '&:has(.sk-disclosure-header:focus-visible)': {\r\n '@apply outline-offset-4': {},\r\n },\r\n '.sk-disclosure-header': {\r\n '@apply bg-transparent text-body': {},\r\n\r\n '[aria-expanded=\"true\"] &': {\r\n '@apply bg-hover': {},\r\n },\r\n '&[data-disabled=\"true\"]': {\r\n '@apply bg-transparent text-gray-stroke': {},\r\n },\r\n '.sk-disclosure-toggle': {\r\n '@apply mx-0': {},\r\n },\r\n },\r\n '.sk-disclosure-body': {\r\n '@apply m-0': {},\r\n },\r\n '&[data-alert=\"true\"]': {\r\n '@apply border-0': {},\r\n '.sk-disclosure-header': {\r\n '@apply border-0 text-warning': {},\r\n },\r\n },\r\n '&[data-error=\"true\"]': {\r\n '@apply border-0': {},\r\n '.sk-disclosure-header': {\r\n '@apply border-0 text-error': {},\r\n },\r\n },\r\n },\r\n\r\n '&-disabled, &-disabled [role=\"button\"]': {\r\n '@apply disabled:cursor-not-allowed cursor-not-allowed': {},\r\n },\r\n\r\n '&-header[data-disabled=\"true\"]': {\r\n '@apply bg-gray-lighter text-gray-stroke': {},\r\n },\r\n\r\n '&-disabled, &&-disabled': {\r\n '@apply border-gray': {},\r\n },\r\n },\r\n '.sk-accordion': {\r\n '&-item': {\r\n '.sk-disclosure': {\r\n transitionProperty: 'margin',\r\n transitionDuration: '180ms',\r\n '&-disabled': {\r\n '@apply border-x-transparent border-y-transparent': {},\r\n },\r\n '&-plain, &-plain[data-disabled=\"true\"]': {\r\n '@apply border border-transparent border-b-gray-stroke': {},\r\n },\r\n\r\n '&-solid[data-open=\"false\"]': {\r\n '@apply border-white': {},\r\n '&[data-disabled=\"true\"]': {\r\n '@apply border-x-transparent border-y-transparent': {},\r\n },\r\n },\r\n '&[data-open=\"true\"]:not(&-plain)': {\r\n '@apply mt-md mb-md': {},\r\n },\r\n },\r\n '&:not(:first-child)': {\r\n '@apply mt-[-1px]': {},\r\n },\r\n '&:first-child .sk-disclosure[data-open=\"true\"]:not(.sk-disclosure-plain)': {\r\n '@apply mt-0 mb-md': {},\r\n },\r\n '&:last-child .sk-disclosure[data-open=\"true\"]:not(.sk-disclosure-plain)': {\r\n '@apply mt-md mb-0': {},\r\n },\r\n '&:last-child .sk-disclosure-plain': {\r\n '@apply border-b-transparent': {},\r\n },\r\n },\r\n },\r\n});\r\n"],"mappings":"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"}
package/dist/esm/components/user-menu.js CHANGED
@@ -1,38 +1,56 @@
1
1
  module.exports = UserMenu = colors => ({
2
- '.usermenu': {
3
- // "@apply mx-sm mt-sm mb-0 px-md py-0 divide-y divide-y-2 divide-gray-300 bg-white border-2 border-white border-solid rounded":
4
- '@apply text-body': {},
5
- // "@apply ": {},
6
- '&-is-open': {
7
- // "@apply border-2 border-gray-300 border-solid rounded": {},
8
- // "box-shadow": "0px 4px 12px rgba(27, 29, 31, 0.12)",
2
+ '.sk-usermenu': {
3
+ '@apply text-body mx-auto lg:mx-sm lg:relative': {},
4
+ '&-wrapper': {
5
+ '@apply block max-lg:-mr-md': {}
9
6
  },
10
- '&-menuTitle': {
11
- overflow: 'hidden',
12
- 'text-overflow': 'ellipsis',
13
- display: '-webkit-box',
14
- '-webkit-line-clamp': '2' /* number of lines to show */,
15
- 'line-clamp': '2',
16
- '-webkit-box-orient': 'vertical'
7
+ '&-button': {
8
+ '&-content': {
9
+ '@apply max-lg:font-bold lg:items-center lg:text-left': {}
10
+ },
11
+ '&-icon': {
12
+ '@apply !text-2xl ml-auto align-top max-lg:mr-2 max-lg:text-primary': {}
13
+ }
14
+ },
15
+ '&-first-row': {
16
+ '@apply max-lg:hidden bg-white border-t-2 pb-sm -mt-0 mx-md': {}
17
+ },
18
+ '&-label': {
19
+ '@apply flex align-middle mt-md lg:mb-xs': {},
20
+ '&-content': {
21
+ '@apply inline-block px-lg py-md lg:pl-md lg:pr-md lg:py-sm text-sm font-semibold uppercase whitespace-nowrap': {}
22
+ },
23
+ '&-line': {
24
+ '@apply inline-block w-full h-px border-gray-300 border-t-2 mt-[2.6rem] lg:hidden': {}
25
+ }
17
26
  },
18
- '&-menuSubTitle': {
19
- overflow: 'hidden',
20
- 'text-overflow': 'ellipsis',
21
- display: '-webkit-box',
22
- '-webkit-line-clamp': '1' /* number of lines to show */,
23
- 'line-clamp': '1',
24
- '-webkit-box-orient': 'vertical'
27
+ '&-body': {
28
+ '@apply py-sm absolute rounded border-t-0 bg-white mt-6 right-0 left-0 border-none max-lg:shadow-lg lg:-mt-2 lg:border-2 lg:border-solid lg:border-white': {},
29
+ '&[data-open="true"]': {
30
+ '@apply lg:border-gray-300 lg:border-t-0 lg:shadow-lg': {}
31
+ }
25
32
  },
26
33
  '&-header': {
27
- '[aria-expanded="true"] &': {
28
- '@apply bg-hover': {}
34
+ '@apply px-md py-sm bg-white border-none rounded lg:border-2 lg:border-solid lg:border-b-0 lg:border-transparent': {},
35
+ '&[aria-expanded="true"]': {
36
+ '@apply lg:border-gray-300 lg:shadow-none': {}
29
37
  }
30
38
  },
31
- '&-item': {
32
- '@apply block px-lg py-md lg:px-md lg:py-sm w-full cursor-pointer text-body no-underline': {},
39
+ '&-group': {
40
+ 'a, button': {
41
+ '@apply block px-lg py-md lg:px-md lg:py-sm w-full cursor-pointer text-body no-underline': {},
42
+ '&.active': {
43
+ '@apply bg-hover text-white no-underline': {}
44
+ }
45
+ },
33
46
  '&.active': {
34
- '@apply bg-hover text-white no-underline': {}
47
+ 'a, button': {
48
+ '@apply bg-hover text-white no-underline': {}
49
+ }
35
50
  }
51
+ },
52
+ '&-divider': {
53
+ '@apply bg-white border-t-2 pb-sm mt-sm mx-md': {}
36
54
  }
37
55
  }
38
56
  });
package/dist/esm/components/user-menu.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"user-menu.js","names":["module","exports","UserMenu","colors","overflow","display"],"sources":["../../../src/components/user-menu.js"],"sourcesContent":["module.exports = UserMenu = (colors) => ({\r\n '.usermenu': {\r\n // \"@apply mx-sm mt-sm mb-0 px-md py-0 divide-y divide-y-2 divide-gray-300 bg-white border-2 border-white border-solid rounded\":\r\n '@apply text-body': {},\r\n // \"@apply \": {},\r\n '&-is-open': {\r\n // \"@apply border-2 border-gray-300 border-solid rounded\": {},\r\n // \"box-shadow\": \"0px 4px 12px rgba(27, 29, 31, 0.12)\",\r\n },\r\n\r\n '&-menuTitle': {\r\n overflow: 'hidden',\r\n 'text-overflow': 'ellipsis',\r\n display: '-webkit-box',\r\n '-webkit-line-clamp': '2' /* number of lines to show */,\r\n 'line-clamp': '2',\r\n '-webkit-box-orient': 'vertical',\r\n },\r\n\r\n '&-menuSubTitle': {\r\n overflow: 'hidden',\r\n 'text-overflow': 'ellipsis',\r\n display: '-webkit-box',\r\n '-webkit-line-clamp': '1' /* number of lines to show */,\r\n 'line-clamp': '1',\r\n '-webkit-box-orient': 'vertical',\r\n },\r\n\r\n '&-header': {\r\n '[aria-expanded=\"true\"] &': {\r\n '@apply bg-hover': {},\r\n },\r\n },\r\n '&-item': {\r\n '@apply block px-lg py-md lg:px-md lg:py-sm w-full cursor-pointer text-body no-underline': {},\r\n '&.active': {\r\n '@apply bg-hover text-white no-underline': {},\r\n },\r\n },\r\n },\r\n});\r\n"],"mappings":"AAAAA,MAAM,CAACC,OAAO,GAAGC,QAAQ,GAAIC,MAAM,KAAM;EACvC,WAAW,EAAE;IACX;IACA,kBAAkB,EAAE,CAAC,CAAC;IACtB;IACA,WAAW,EAAE;MACX;MACA;IAAA,CACD;IAED,aAAa,EAAE;MACbC,QAAQ,EAAE,QAAQ;MAClB,eAAe,EAAE,UAAU;MAC3BC,OAAO,EAAE,aAAa;MACtB,oBAAoB,EAAE,GAAG,CAAC;MAC1B,YAAY,EAAE,GAAG;MACjB,oBAAoB,EAAE;IACxB,CAAC;IAED,gBAAgB,EAAE;MAChBD,QAAQ,EAAE,QAAQ;MAClB,eAAe,EAAE,UAAU;MAC3BC,OAAO,EAAE,aAAa;MACtB,oBAAoB,EAAE,GAAG,CAAC;MAC1B,YAAY,EAAE,GAAG;MACjB,oBAAoB,EAAE;IACxB,CAAC;IAED,UAAU,EAAE;MACV,0BAA0B,EAAE;QAC1B,iBAAiB,EAAE,CAAC;MACtB;IACF,CAAC;IACD,QAAQ,EAAE;MACR,yFAAyF,EAAE,CAAC,CAAC;MAC7F,UAAU,EAAE;QACV,yCAAyC,EAAE,CAAC;MAC9C;IACF;EACF;AACF,CAAC,CAAC"}
1
+ {"version":3,"file":"user-menu.js","names":["module","exports","UserMenu","colors"],"sources":["../../../src/components/user-menu.js"],"sourcesContent":["module.exports = UserMenu = (colors) => ({\r\n '.sk-usermenu': {\r\n '@apply text-body mx-auto lg:mx-sm lg:relative': {},\r\n\r\n '&-wrapper': {\r\n '@apply block max-lg:-mr-md': {},\r\n },\r\n\r\n '&-button': {\r\n '&-content': {\r\n '@apply max-lg:font-bold lg:items-center lg:text-left': {},\r\n },\r\n '&-icon': {\r\n '@apply !text-2xl ml-auto align-top max-lg:mr-2 max-lg:text-primary': {},\r\n },\r\n },\r\n\r\n '&-first-row': {\r\n '@apply max-lg:hidden bg-white border-t-2 pb-sm -mt-0 mx-md': {},\r\n },\r\n\r\n '&-label': {\r\n '@apply flex align-middle mt-md lg:mb-xs': {},\r\n '&-content': {\r\n '@apply inline-block px-lg py-md lg:pl-md lg:pr-md lg:py-sm text-sm font-semibold uppercase whitespace-nowrap':\r\n {},\r\n },\r\n '&-line': {\r\n '@apply inline-block w-full h-px border-gray-300 border-t-2 mt-[2.6rem] lg:hidden': {},\r\n },\r\n },\r\n\r\n '&-body': {\r\n '@apply py-sm absolute rounded border-t-0 bg-white mt-6 right-0 left-0 border-none max-lg:shadow-lg lg:-mt-2 lg:border-2 lg:border-solid lg:border-white':\r\n {},\r\n '&[data-open=\"true\"]': {\r\n '@apply lg:border-gray-300 lg:border-t-0 lg:shadow-lg': {},\r\n },\r\n },\r\n\r\n '&-header': {\r\n '@apply px-md py-sm bg-white border-none rounded lg:border-2 lg:border-solid lg:border-b-0 lg:border-transparent':\r\n {},\r\n '&[aria-expanded=\"true\"]': {\r\n '@apply lg:border-gray-300 lg:shadow-none': {},\r\n },\r\n },\r\n '&-group': {\r\n 'a, button': {\r\n '@apply block px-lg py-md lg:px-md lg:py-sm w-full cursor-pointer text-body no-underline': {},\r\n '&.active': {\r\n '@apply bg-hover text-white no-underline': {},\r\n },\r\n },\r\n '&.active': {\r\n 'a, button': {\r\n '@apply bg-hover text-white no-underline': {},\r\n },\r\n },\r\n },\r\n '&-divider': {\r\n '@apply bg-white border-t-2 pb-sm mt-sm mx-md': {},\r\n },\r\n },\r\n});\r\n"],"mappings":"AAAAA,MAAM,CAACC,OAAO,GAAGC,QAAQ,GAAIC,MAAM,KAAM;EACvC,cAAc,EAAE;IACd,+CAA+C,EAAE,CAAC,CAAC;IAEnD,WAAW,EAAE;MACX,4BAA4B,EAAE,CAAC;IACjC,CAAC;IAED,UAAU,EAAE;MACV,WAAW,EAAE;QACX,sDAAsD,EAAE,CAAC;MAC3D,CAAC;MACD,QAAQ,EAAE;QACR,oEAAoE,EAAE,CAAC;MACzE;IACF,CAAC;IAED,aAAa,EAAE;MACb,4DAA4D,EAAE,CAAC;IACjE,CAAC;IAED,SAAS,EAAE;MACT,yCAAyC,EAAE,CAAC,CAAC;MAC7C,WAAW,EAAE;QACX,8GAA8G,EAC5G,CAAC;MACL,CAAC;MACD,QAAQ,EAAE;QACR,kFAAkF,EAAE,CAAC;MACvF;IACF,CAAC;IAED,QAAQ,EAAE;MACR,yJAAyJ,EACvJ,CAAC,CAAC;MACJ,qBAAqB,EAAE;QACrB,sDAAsD,EAAE,CAAC;MAC3D;IACF,CAAC;IAED,UAAU,EAAE;MACV,iHAAiH,EAC/G,CAAC,CAAC;MACJ,yBAAyB,EAAE;QACzB,0CAA0C,EAAE,CAAC;MAC/C;IACF,CAAC;IACD,SAAS,EAAE;MACT,WAAW,EAAE;QACX,yFAAyF,EAAE,CAAC,CAAC;QAC7F,UAAU,EAAE;UACV,yCAAyC,EAAE,CAAC;QAC9C;MACF,CAAC;MACD,UAAU,EAAE;QACV,WAAW,EAAE;UACX,yCAAyC,EAAE,CAAC;QAC9C;MACF;IACF,CAAC;IACD,WAAW,EAAE;MACX,8CAA8C,EAAE,CAAC;IACnD;EACF;AACF,CAAC,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sk-web-gui/core",
3
- "version": "0.1.85",
3
+ "version": "0.1.87",
4
4
  "license": "MIT",
5
5
  "main": "src/index.js",
6
6
  "module": "dist/esm/index.js",
@@ -40,5 +40,5 @@
40
40
  "@sk-web-gui/theme": "0.1.13",
41
41
  "mini-svg-data-uri": "^1.4.4"
42
42
  },
43
- "gitHead": "9f7e1a15e38c6d040495f6f02e12c8c05486949d"
43
+ "gitHead": "433ca907ab7124030c8045bc5964a4f8ff5db68d"
44
44
  }
package/src/components/accordion.js CHANGED
@@ -1,5 +1,8 @@
1
1
  module.exports = Accordion = (colors) => ({
2
- '.accordion': {
2
+ '.sk-disclosure': {
3
+ '&:has(&-header:focus-visible)': {
4
+ '@apply outline': {},
5
+ },
3
6
  '&-header': {
4
7
  '@apply flex flex-col text-left': {},
5
8
 
@@ -7,8 +10,15 @@ module.exports = Accordion = (colors) => ({
7
10
  '@apply bg-hover': {},
8
11
  },
9
12
 
13
+ '&:focus-visible': {
14
+ '@apply outline-0': {},
15
+ },
16
+
10
17
  '&-icon': {
11
18
  '@apply ml-auto !text-2xl': {},
19
+ svg: {
20
+ '@apply !text-2xl': {},
21
+ },
12
22
  },
13
23
  },
14
24
 
@@ -19,16 +29,11 @@ module.exports = Accordion = (colors) => ({
19
29
  '&-toggle': {
20
30
  '@apply flex items-center inline-block text-lg leading-lg text-left text-lg mx-md sm:mx-lg my-md': {},
21
31
  fontWeight: 'bold',
22
- //"@apply focus-visible:shadow shadow-lg": {},
23
- '&:focus-visible': {
24
- boxShadow: '0 0 0 0.4rem #fff!important',
25
- outline: '0',
26
- //"@apply border-4": {},
27
- },
28
- '.accordion-title': {
32
+
33
+ '.sk-disclosure-title': {
29
34
  '@apply mr-md text-base leading-base md:text-lg md:leading-lg': {},
30
35
  },
31
- '.accordion-subtitle': {
36
+ '.sk-disclosure-subtitle': {
32
37
  '@apply m-0 mr-md text-sm font-normal': {},
33
38
  },
34
39
  },
@@ -50,7 +55,7 @@ module.exports = Accordion = (colors) => ({
50
55
 
51
56
  '&-solid': {
52
57
  '@apply border border-primary': {},
53
- '.accordion-header': {
58
+ '.sk-disclosure-header': {
54
59
  '@apply bg-primary text-white': {},
55
60
 
56
61
  '[aria-expanded="true"] &': {
@@ -59,9 +64,10 @@ module.exports = Accordion = (colors) => ({
59
64
  },
60
65
  },
61
66
 
62
- '&-alert': {
67
+ '&-solid[data-alert="true"], &-outline[data-alert="true"]': {
63
68
  '@apply border border-warning': {},
64
- '.accordion-header': {
69
+
70
+ '.sk-disclosure-header:not([data-disabled="true"])': {
65
71
  '@apply bg-warning-light text-warning': {},
66
72
 
67
73
  '[aria-expanded="true"] &': {
@@ -69,9 +75,9 @@ module.exports = Accordion = (colors) => ({
69
75
  },
70
76
  },
71
77
  },
72
- '&-error': {
78
+ '&-solid[data-error="true"], &-outline[data-error="true"]': {
73
79
  '@apply border border-error': {},
74
- '.accordion-header': {
80
+ '.sk-disclosure-header:not([data-disabled="true"])': {
75
81
  '@apply bg-error-light text-error': {},
76
82
 
77
83
  '[aria-expanded="true"] &': {
@@ -82,59 +88,124 @@ module.exports = Accordion = (colors) => ({
82
88
 
83
89
  '&-is-open': {
84
90
  '@apply border border-gray-stroke': {},
85
- '& .accordion-header': {
91
+ '& .sk-disclosure-header': {
86
92
  '@apply bg-hover text-white': {},
87
93
  },
88
- },
89
94
 
90
- '&-is-open-alert': {
91
- '@apply border border-warning': {},
92
- '& .accordion-header': {
93
- '@apply border-b border-warning': {},
95
+ '&[data-alert="true"]': {
96
+ '@apply border border-warning': {},
97
+ '& .sk-disclosure-header': {
98
+ '@apply border-b border-warning': {},
99
+ },
94
100
  },
95
- },
96
101
 
97
- '&-is-open-error': {
98
- '@apply border border-error': {},
99
- '& .accordion-header': {
100
- '@apply border-b border-error': {},
102
+ '&[data-error="true"]': {
103
+ '@apply border border-error': {},
104
+ '& .sk-disclosure-header': {
105
+ '@apply border-b border-error': {},
106
+ },
101
107
  },
102
108
  },
103
-
104
- '&-is-open &-body, &-is-open-alert &-body, &-is-open-error &-body': {
109
+ '&-is-open &-body': {
105
110
  '@apply overflow-visible animate-reset-overflow': {},
106
111
  },
107
112
 
108
113
  '&-outline': {
109
114
  '@apply border border-gray-stroke': {},
110
- '.accordion-body': {
115
+ '&:not([data-error="true"]):not([data-alert="true"]) .sk-disclosure-body': {
111
116
  '@apply mt-0': {},
112
117
  },
113
- '.accordion-toggle': {
114
- '&:focus-visible': {
115
- boxShadow: '0 0 0 0.4rem #4b4b4b!important',
116
- outline: '0',
118
+ '.sk-disclosure-toggle': {},
119
+ '.sk-disclosure-header': {
120
+ '@apply bg-transparent text-body': {},
121
+
122
+ '[aria-expanded="true"] &': {
123
+ '@apply bg-hover': {},
117
124
  },
118
125
  },
119
- '.accordion-header': {
126
+ },
127
+
128
+ '&-plain': {
129
+ '@apply border-0': {},
130
+ '&:has(.sk-disclosure-header:focus-visible)': {
131
+ '@apply outline-offset-4': {},
132
+ },
133
+ '.sk-disclosure-header': {
120
134
  '@apply bg-transparent text-body': {},
121
135
 
122
136
  '[aria-expanded="true"] &': {
123
137
  '@apply bg-hover': {},
124
138
  },
139
+ '&[data-disabled="true"]': {
140
+ '@apply bg-transparent text-gray-stroke': {},
141
+ },
142
+ '.sk-disclosure-toggle': {
143
+ '@apply mx-0': {},
144
+ },
145
+ },
146
+ '.sk-disclosure-body': {
147
+ '@apply m-0': {},
148
+ },
149
+ '&[data-alert="true"]': {
150
+ '@apply border-0': {},
151
+ '.sk-disclosure-header': {
152
+ '@apply border-0 text-warning': {},
153
+ },
154
+ },
155
+ '&[data-error="true"]': {
156
+ '@apply border-0': {},
157
+ '.sk-disclosure-header': {
158
+ '@apply border-0 text-error': {},
159
+ },
125
160
  },
126
161
  },
127
162
 
128
- '&-disabled, &-disabled button': {
163
+ '&-disabled, &-disabled [role="button"]': {
129
164
  '@apply disabled:cursor-not-allowed cursor-not-allowed': {},
130
165
  },
131
166
 
132
- '&-disabled &-header': {
133
- '@apply bg-gray-lighter text-gray': {},
167
+ '&-header[data-disabled="true"]': {
168
+ '@apply bg-gray-lighter text-gray-stroke': {},
134
169
  },
135
170
 
136
171
  '&-disabled, &&-disabled': {
137
172
  '@apply border-gray': {},
138
173
  },
139
174
  },
175
+ '.sk-accordion': {
176
+ '&-item': {
177
+ '.sk-disclosure': {
178
+ transitionProperty: 'margin',
179
+ transitionDuration: '180ms',
180
+ '&-disabled': {
181
+ '@apply border-x-transparent border-y-transparent': {},
182
+ },
183
+ '&-plain, &-plain[data-disabled="true"]': {
184
+ '@apply border border-transparent border-b-gray-stroke': {},
185
+ },
186
+
187
+ '&-solid[data-open="false"]': {
188
+ '@apply border-white': {},
189
+ '&[data-disabled="true"]': {
190
+ '@apply border-x-transparent border-y-transparent': {},
191
+ },
192
+ },
193
+ '&[data-open="true"]:not(&-plain)': {
194
+ '@apply mt-md mb-md': {},
195
+ },
196
+ },
197
+ '&:not(:first-child)': {
198
+ '@apply mt-[-1px]': {},
199
+ },
200
+ '&:first-child .sk-disclosure[data-open="true"]:not(.sk-disclosure-plain)': {
201
+ '@apply mt-0 mb-md': {},
202
+ },
203
+ '&:last-child .sk-disclosure[data-open="true"]:not(.sk-disclosure-plain)': {
204
+ '@apply mt-md mb-0': {},
205
+ },
206
+ '&:last-child .sk-disclosure-plain': {
207
+ '@apply border-b-transparent': {},
208
+ },
209
+ },
210
+ },
140
211
  });
package/src/components/user-menu.js CHANGED
@@ -1,41 +1,65 @@
1
1
  module.exports = UserMenu = (colors) => ({
2
- '.usermenu': {
3
- // "@apply mx-sm mt-sm mb-0 px-md py-0 divide-y divide-y-2 divide-gray-300 bg-white border-2 border-white border-solid rounded":
4
- '@apply text-body': {},
5
- // "@apply ": {},
6
- '&-is-open': {
7
- // "@apply border-2 border-gray-300 border-solid rounded": {},
8
- // "box-shadow": "0px 4px 12px rgba(27, 29, 31, 0.12)",
2
+ '.sk-usermenu': {
3
+ '@apply text-body mx-auto lg:mx-sm lg:relative': {},
4
+
5
+ '&-wrapper': {
6
+ '@apply block max-lg:-mr-md': {},
7
+ },
8
+
9
+ '&-button': {
10
+ '&-content': {
11
+ '@apply max-lg:font-bold lg:items-center lg:text-left': {},
12
+ },
13
+ '&-icon': {
14
+ '@apply !text-2xl ml-auto align-top max-lg:mr-2 max-lg:text-primary': {},
15
+ },
16
+ },
17
+
18
+ '&-first-row': {
19
+ '@apply max-lg:hidden bg-white border-t-2 pb-sm -mt-0 mx-md': {},
9
20
  },
10
21
 
11
- '&-menuTitle': {
12
- overflow: 'hidden',
13
- 'text-overflow': 'ellipsis',
14
- display: '-webkit-box',
15
- '-webkit-line-clamp': '2' /* number of lines to show */,
16
- 'line-clamp': '2',
17
- '-webkit-box-orient': 'vertical',
22
+ '&-label': {
23
+ '@apply flex align-middle mt-md lg:mb-xs': {},
24
+ '&-content': {
25
+ '@apply inline-block px-lg py-md lg:pl-md lg:pr-md lg:py-sm text-sm font-semibold uppercase whitespace-nowrap':
26
+ {},
27
+ },
28
+ '&-line': {
29
+ '@apply inline-block w-full h-px border-gray-300 border-t-2 mt-[2.6rem] lg:hidden': {},
30
+ },
18
31
  },
19
32
 
20
- '&-menuSubTitle': {
21
- overflow: 'hidden',
22
- 'text-overflow': 'ellipsis',
23
- display: '-webkit-box',
24
- '-webkit-line-clamp': '1' /* number of lines to show */,
25
- 'line-clamp': '1',
26
- '-webkit-box-orient': 'vertical',
33
+ '&-body': {
34
+ '@apply py-sm absolute rounded border-t-0 bg-white mt-6 right-0 left-0 border-none max-lg:shadow-lg lg:-mt-2 lg:border-2 lg:border-solid lg:border-white':
35
+ {},
36
+ '&[data-open="true"]': {
37
+ '@apply lg:border-gray-300 lg:border-t-0 lg:shadow-lg': {},
38
+ },
27
39
  },
28
40
 
29
41
  '&-header': {
30
- '[aria-expanded="true"] &': {
31
- '@apply bg-hover': {},
42
+ '@apply px-md py-sm bg-white border-none rounded lg:border-2 lg:border-solid lg:border-b-0 lg:border-transparent':
43
+ {},
44
+ '&[aria-expanded="true"]': {
45
+ '@apply lg:border-gray-300 lg:shadow-none': {},
32
46
  },
33
47
  },
34
- '&-item': {
35
- '@apply block px-lg py-md lg:px-md lg:py-sm w-full cursor-pointer text-body no-underline': {},
48
+ '&-group': {
49
+ 'a, button': {
50
+ '@apply block px-lg py-md lg:px-md lg:py-sm w-full cursor-pointer text-body no-underline': {},
51
+ '&.active': {
52
+ '@apply bg-hover text-white no-underline': {},
53
+ },
54
+ },
36
55
  '&.active': {
37
- '@apply bg-hover text-white no-underline': {},
56
+ 'a, button': {
57
+ '@apply bg-hover text-white no-underline': {},
58
+ },
38
59
  },
39
60
  },
61
+ '&-divider': {
62
+ '@apply bg-white border-t-2 pb-sm mt-sm mx-md': {},
63
+ },
40
64
  },
41
65
  });