@florid-kit/components 0.8.53 → 0.8.55
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/index.js +14 -12
- package/index.mjs +14 -12
- package/package.json +1 -1
package/index.js
CHANGED
|
@@ -146,8 +146,9 @@
|
|
|
146
146
|
<button type=${this.type} class="button" ?disabled=${this.disabled} @click=${this.handleClick}>
|
|
147
147
|
${this.startIcon?this.renderIcon("start"):d}
|
|
148
148
|
${o?l`
|
|
149
|
-
${this.text?l`<span class="text">${this.text}
|
|
149
|
+
${this.text?l`<span class="text">${this.text}</span>`:d}
|
|
150
150
|
${this.textsecond?l`<span class="text">${this.textsecond}</span>`:d}
|
|
151
|
+
${this.withbadge?l`<slot></slot>`:d}
|
|
151
152
|
`:l`<slot></slot>`}
|
|
152
153
|
${this.endIcon?this.renderIcon("end"):d}
|
|
153
154
|
</button>
|
|
@@ -168,6 +169,7 @@
|
|
|
168
169
|
`}};Oe(b);b.formAssociated=!0;b.styles=y`
|
|
169
170
|
:host {
|
|
170
171
|
--button-border: transparent;
|
|
172
|
+
--badge-outer-width: 19px;
|
|
171
173
|
cursor: pointer;
|
|
172
174
|
display: inline-flex;
|
|
173
175
|
}
|
|
@@ -329,8 +331,9 @@
|
|
|
329
331
|
|
|
330
332
|
:host([underlined]) span:not([class*="icon-"]),
|
|
331
333
|
:host([underlined]) .text,
|
|
332
|
-
:host([underlined]) .button slot {
|
|
334
|
+
:host([underlined]:not([text])) .button slot {
|
|
333
335
|
position: relative;
|
|
336
|
+
|
|
334
337
|
&::after {
|
|
335
338
|
content: "";
|
|
336
339
|
display: block;
|
|
@@ -342,12 +345,15 @@
|
|
|
342
345
|
}
|
|
343
346
|
}
|
|
344
347
|
|
|
345
|
-
:host([
|
|
346
|
-
|
|
347
|
-
|
|
348
|
+
:host([underlined]:not([text])) .button slot {
|
|
349
|
+
display: inline-flex;
|
|
350
|
+
gap: 8px;
|
|
348
351
|
}
|
|
349
|
-
|
|
350
|
-
|
|
352
|
+
|
|
353
|
+
:host([underlined][withbadge]:not([text])) .button slot {
|
|
354
|
+
&::after {
|
|
355
|
+
width: calc(100% - var(--badge-outer-width, 19px) - var(--spacing-s, 8px))
|
|
356
|
+
}
|
|
351
357
|
}
|
|
352
358
|
|
|
353
359
|
//Icon movement on hover
|
|
@@ -848,6 +854,7 @@
|
|
|
848
854
|
@click=${this.handleClosePanel}
|
|
849
855
|
@keydown=${this.handleClosePanel}
|
|
850
856
|
aria-label="${this.closeButtonLabel}"
|
|
857
|
+
aria-describedby="panel-title"
|
|
851
858
|
></o-icon-button>
|
|
852
859
|
</div>
|
|
853
860
|
`:null;return l`
|
|
@@ -2333,11 +2340,6 @@
|
|
|
2333
2340
|
--text-color: var(--color-content-filter, #f6f0e7);
|
|
2334
2341
|
}
|
|
2335
2342
|
|
|
2336
|
-
:host([withinbutton]) {
|
|
2337
|
-
position: absolute;
|
|
2338
|
-
right: calc(-1 * (var(--badge-width) + var(--spacing-s, 8px)));
|
|
2339
|
-
}
|
|
2340
|
-
|
|
2341
2343
|
.badge {
|
|
2342
2344
|
display: block;
|
|
2343
2345
|
padding: 1px var(--spacing-4-xs, 0) var(--spacing-4-xs, 0) 1px;
|
package/index.mjs
CHANGED
|
@@ -863,8 +863,9 @@ let b = class extends so {
|
|
|
863
863
|
<button type=${this.type} class="button" ?disabled=${this.disabled} @click=${this.handleClick}>
|
|
864
864
|
${this.startIcon ? this.renderIcon("start") : d}
|
|
865
865
|
${o ? l`
|
|
866
|
-
${this.text ? l`<span class="text">${this.text}
|
|
866
|
+
${this.text ? l`<span class="text">${this.text}</span>` : d}
|
|
867
867
|
${this.textsecond ? l`<span class="text">${this.textsecond}</span>` : d}
|
|
868
|
+
${this.withbadge ? l`<slot></slot>` : d}
|
|
868
869
|
` : l`<slot></slot>`}
|
|
869
870
|
${this.endIcon ? this.renderIcon("end") : d}
|
|
870
871
|
</button>
|
|
@@ -894,6 +895,7 @@ b.formAssociated = !0;
|
|
|
894
895
|
b.styles = y`
|
|
895
896
|
:host {
|
|
896
897
|
--button-border: transparent;
|
|
898
|
+
--badge-outer-width: 19px;
|
|
897
899
|
cursor: pointer;
|
|
898
900
|
display: inline-flex;
|
|
899
901
|
}
|
|
@@ -1055,8 +1057,9 @@ b.styles = y`
|
|
|
1055
1057
|
|
|
1056
1058
|
:host([underlined]) span:not([class*="icon-"]),
|
|
1057
1059
|
:host([underlined]) .text,
|
|
1058
|
-
:host([underlined]) .button slot {
|
|
1060
|
+
:host([underlined]:not([text])) .button slot {
|
|
1059
1061
|
position: relative;
|
|
1062
|
+
|
|
1060
1063
|
&::after {
|
|
1061
1064
|
content: "";
|
|
1062
1065
|
display: block;
|
|
@@ -1068,12 +1071,15 @@ b.styles = y`
|
|
|
1068
1071
|
}
|
|
1069
1072
|
}
|
|
1070
1073
|
|
|
1071
|
-
:host([
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
+
:host([underlined]:not([text])) .button slot {
|
|
1075
|
+
display: inline-flex;
|
|
1076
|
+
gap: 8px;
|
|
1074
1077
|
}
|
|
1075
|
-
|
|
1076
|
-
|
|
1078
|
+
|
|
1079
|
+
:host([underlined][withbadge]:not([text])) .button slot {
|
|
1080
|
+
&::after {
|
|
1081
|
+
width: calc(100% - var(--badge-outer-width, 19px) - var(--spacing-s, 8px))
|
|
1082
|
+
}
|
|
1077
1083
|
}
|
|
1078
1084
|
|
|
1079
1085
|
//Icon movement on hover
|
|
@@ -2107,6 +2113,7 @@ let u = class extends v {
|
|
|
2107
2113
|
@click=${this.handleClosePanel}
|
|
2108
2114
|
@keydown=${this.handleClosePanel}
|
|
2109
2115
|
aria-label="${this.closeButtonLabel}"
|
|
2116
|
+
aria-describedby="panel-title"
|
|
2110
2117
|
></o-icon-button>
|
|
2111
2118
|
</div>
|
|
2112
2119
|
` : null;
|
|
@@ -4274,11 +4281,6 @@ pt.styles = y`
|
|
|
4274
4281
|
--text-color: var(--color-content-filter, #f6f0e7);
|
|
4275
4282
|
}
|
|
4276
4283
|
|
|
4277
|
-
:host([withinbutton]) {
|
|
4278
|
-
position: absolute;
|
|
4279
|
-
right: calc(-1 * (var(--badge-width) + var(--spacing-s, 8px)));
|
|
4280
|
-
}
|
|
4281
|
-
|
|
4282
4284
|
.badge {
|
|
4283
4285
|
display: block;
|
|
4284
4286
|
padding: 1px var(--spacing-4-xs, 0) var(--spacing-4-xs, 0) 1px;
|