@aurodesignsystem-dev/auro-formkit 0.0.0-pr794.0 → 0.0.0-pr798.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/checkbox/demo/api.min.js +4 -2
- package/components/checkbox/demo/index.min.js +4 -2
- package/components/checkbox/dist/index.js +4 -2
- package/components/checkbox/dist/registered.js +4 -2
- package/components/combobox/demo/api.min.js +21 -28
- package/components/combobox/demo/index.min.js +21 -28
- package/components/combobox/dist/index.js +13 -6
- package/components/combobox/dist/registered.js +13 -6
- package/components/counter/demo/api.min.js +10 -5
- package/components/counter/demo/index.md +4 -4
- package/components/counter/demo/index.min.js +10 -5
- package/components/counter/dist/index.js +10 -5
- package/components/counter/dist/registered.js +10 -5
- package/components/datepicker/demo/api.min.js +13 -6
- package/components/datepicker/demo/index.min.js +13 -6
- package/components/datepicker/dist/index.js +13 -6
- package/components/datepicker/dist/registered.js +13 -6
- package/components/dropdown/demo/api.md +7 -6
- package/components/dropdown/demo/api.min.js +5 -2
- package/components/dropdown/demo/index.min.js +5 -2
- package/components/dropdown/dist/index.js +5 -2
- package/components/dropdown/dist/registered.js +5 -2
- package/components/helptext/dist/auro-helptext.d.ts +2 -0
- package/components/helptext/dist/index.js +4 -2
- package/components/helptext/dist/registered.js +4 -2
- package/components/input/demo/api.min.js +4 -2
- package/components/input/demo/index.min.js +4 -2
- package/components/input/dist/index.js +4 -2
- package/components/input/dist/registered.js +4 -2
- package/components/menu/demo/api.html +15 -0
- package/components/menu/demo/api.md +12 -12
- package/components/menu/demo/api.min.js +8 -22
- package/components/menu/demo/index.min.js +8 -22
- package/components/menu/dist/auro-menu.d.ts +2 -2
- package/components/menu/dist/auro-menuoption.d.ts +2 -2
- package/components/menu/dist/index.js +8 -22
- package/components/menu/dist/registered.js +8 -22
- package/components/radio/demo/api.min.js +4 -2
- package/components/radio/demo/index.min.js +4 -2
- package/components/radio/dist/index.js +4 -2
- package/components/radio/dist/registered.js +4 -2
- package/components/select/demo/api.md +6 -3
- package/components/select/demo/api.min.js +21 -26
- package/components/select/demo/index.min.js +21 -26
- package/components/select/dist/auro-select.d.ts +4 -0
- package/components/select/dist/index.js +13 -4
- package/components/select/dist/registered.js +13 -4
- package/package.json +1 -1
|
@@ -17275,7 +17275,7 @@ var styleSnowflakeCss = css`:host{display:block}.wrapper{display:flex;flex:1;fle
|
|
|
17275
17275
|
|
|
17276
17276
|
var colorCss$5 = css`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
|
|
17277
17277
|
|
|
17278
|
-
var styleCss$6 = css
|
|
17278
|
+
var styleCss$6 = css`:host{position:relative;display:block}.helptext-wrapper{display:none;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([large]) .helptext-wrapper{font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
|
|
17279
17279
|
|
|
17280
17280
|
var tokensCss$6 = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
17281
17281
|
|
|
@@ -17355,6 +17355,8 @@ let AuroLibraryRuntimeUtils$5 = class AuroLibraryRuntimeUtils {
|
|
|
17355
17355
|
|
|
17356
17356
|
/**
|
|
17357
17357
|
* Displays help text or error messages within form elements - Internal Use Only.
|
|
17358
|
+
*
|
|
17359
|
+
* @attr { Boolean } large - If declared, make font-size to 1rem(16px).
|
|
17358
17360
|
*/
|
|
17359
17361
|
let AuroHelpText$2 = class AuroHelpText extends LitElement {
|
|
17360
17362
|
|
|
@@ -17470,7 +17472,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
|
|
|
17470
17472
|
// function that renders the HTML and CSS into the scope of the component
|
|
17471
17473
|
render() {
|
|
17472
17474
|
return html`
|
|
17473
|
-
<div class="helptext-wrapper
|
|
17475
|
+
<div class="helptext-wrapper" ?visible="${this.hasTextContent}">
|
|
17474
17476
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
17475
17477
|
</div>
|
|
17476
17478
|
`;
|
|
@@ -17584,6 +17586,7 @@ let AuroElement$4 = class AuroElement extends LitElement {
|
|
|
17584
17586
|
* @slot trigger - Defines the content of the trigger.
|
|
17585
17587
|
* @csspart trigger - The trigger content container.
|
|
17586
17588
|
* @csspart chevron - The collapsed/expanded state icon container.
|
|
17589
|
+
* @csspart size - The size of the dropdown bib. (height, width, maxHeight, maxWidth only)
|
|
17587
17590
|
* @csspart helpText - The helpText content container.
|
|
17588
17591
|
* @event auroDropdown-triggerClick - Notifies that the trigger has been clicked.
|
|
17589
17592
|
* @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.
|
|
@@ -26021,7 +26024,7 @@ var buttonVersion = '11.0.0';
|
|
|
26021
26024
|
|
|
26022
26025
|
var colorCss$4 = css`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
|
|
26023
26026
|
|
|
26024
|
-
var styleCss$5 = css
|
|
26027
|
+
var styleCss$5 = css`:host{position:relative;display:block}.helptext-wrapper{display:none;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([large]) .helptext-wrapper{font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
|
|
26025
26028
|
|
|
26026
26029
|
var tokensCss$5 = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
26027
26030
|
|
|
@@ -26101,6 +26104,8 @@ let AuroLibraryRuntimeUtils$4 = class AuroLibraryRuntimeUtils {
|
|
|
26101
26104
|
|
|
26102
26105
|
/**
|
|
26103
26106
|
* Displays help text or error messages within form elements - Internal Use Only.
|
|
26107
|
+
*
|
|
26108
|
+
* @attr { Boolean } large - If declared, make font-size to 1rem(16px).
|
|
26104
26109
|
*/
|
|
26105
26110
|
let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
26106
26111
|
|
|
@@ -26216,7 +26221,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
26216
26221
|
// function that renders the HTML and CSS into the scope of the component
|
|
26217
26222
|
render() {
|
|
26218
26223
|
return html`
|
|
26219
|
-
<div class="helptext-wrapper
|
|
26224
|
+
<div class="helptext-wrapper" ?visible="${this.hasTextContent}">
|
|
26220
26225
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
26221
26226
|
</div>
|
|
26222
26227
|
`;
|
|
@@ -26734,7 +26739,7 @@ var inputVersion = '4.2.0';
|
|
|
26734
26739
|
|
|
26735
26740
|
var colorCss$1 = css`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
|
|
26736
26741
|
|
|
26737
|
-
var styleCss$1 = css
|
|
26742
|
+
var styleCss$1 = css`:host{position:relative;display:block}.helptext-wrapper{display:none;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([large]) .helptext-wrapper{font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
|
|
26738
26743
|
|
|
26739
26744
|
var tokensCss$1 = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
26740
26745
|
|
|
@@ -26814,6 +26819,8 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
|
|
|
26814
26819
|
|
|
26815
26820
|
/**
|
|
26816
26821
|
* Displays help text or error messages within form elements - Internal Use Only.
|
|
26822
|
+
*
|
|
26823
|
+
* @attr { Boolean } large - If declared, make font-size to 1rem(16px).
|
|
26817
26824
|
*/
|
|
26818
26825
|
class AuroHelpText extends LitElement {
|
|
26819
26826
|
|
|
@@ -26929,7 +26936,7 @@ class AuroHelpText extends LitElement {
|
|
|
26929
26936
|
// function that renders the HTML and CSS into the scope of the component
|
|
26930
26937
|
render() {
|
|
26931
26938
|
return html`
|
|
26932
|
-
<div class="helptext-wrapper
|
|
26939
|
+
<div class="helptext-wrapper" ?visible="${this.hasTextContent}">
|
|
26933
26940
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
26934
26941
|
</div>
|
|
26935
26942
|
`;
|
|
@@ -60,12 +60,13 @@
|
|
|
60
60
|
|
|
61
61
|
## CSS Shadow Parts
|
|
62
62
|
|
|
63
|
-
| Part | Description
|
|
64
|
-
|
|
65
|
-
| [chevron](#chevron) | The collapsed/expanded state icon container.
|
|
66
|
-
| [helpText](#helpText) | The helpText content container.
|
|
67
|
-
| [popover](#popover) | The bib content container.
|
|
68
|
-
| [
|
|
63
|
+
| Part | Description |
|
|
64
|
+
|------------|--------------------------------------------------|
|
|
65
|
+
| [chevron](#chevron) | The collapsed/expanded state icon container. |
|
|
66
|
+
| [helpText](#helpText) | The helpText content container. |
|
|
67
|
+
| [popover](#popover) | The bib content container. |
|
|
68
|
+
| [size](#size) | The size of the dropdown bib. (height, width, maxHeight, maxWidth only) |
|
|
69
|
+
| [trigger](#trigger) | The trigger content container. |
|
|
69
70
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
70
71
|
|
|
71
72
|
## API Examples
|
|
@@ -3230,7 +3230,7 @@ var styleSnowflakeCss = i$2`:host{display:block}.wrapper{display:flex;flex:1;fle
|
|
|
3230
3230
|
|
|
3231
3231
|
var colorCss = i$2`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
|
|
3232
3232
|
|
|
3233
|
-
var styleCss = i$2
|
|
3233
|
+
var styleCss = i$2`:host{position:relative;display:block}.helptext-wrapper{display:none;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([large]) .helptext-wrapper{font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
|
|
3234
3234
|
|
|
3235
3235
|
var tokensCss = i$2`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
3236
3236
|
|
|
@@ -3310,6 +3310,8 @@ class AuroLibraryRuntimeUtils {
|
|
|
3310
3310
|
|
|
3311
3311
|
/**
|
|
3312
3312
|
* Displays help text or error messages within form elements - Internal Use Only.
|
|
3313
|
+
*
|
|
3314
|
+
* @attr { Boolean } large - If declared, make font-size to 1rem(16px).
|
|
3313
3315
|
*/
|
|
3314
3316
|
class AuroHelpText extends i {
|
|
3315
3317
|
|
|
@@ -3425,7 +3427,7 @@ class AuroHelpText extends i {
|
|
|
3425
3427
|
// function that renders the HTML and CSS into the scope of the component
|
|
3426
3428
|
render() {
|
|
3427
3429
|
return x`
|
|
3428
|
-
<div class="helptext-wrapper
|
|
3430
|
+
<div class="helptext-wrapper" ?visible="${this.hasTextContent}">
|
|
3429
3431
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
3430
3432
|
</div>
|
|
3431
3433
|
`;
|
|
@@ -3539,6 +3541,7 @@ class AuroElement extends i {
|
|
|
3539
3541
|
* @slot trigger - Defines the content of the trigger.
|
|
3540
3542
|
* @csspart trigger - The trigger content container.
|
|
3541
3543
|
* @csspart chevron - The collapsed/expanded state icon container.
|
|
3544
|
+
* @csspart size - The size of the dropdown bib. (height, width, maxHeight, maxWidth only)
|
|
3542
3545
|
* @csspart helpText - The helpText content container.
|
|
3543
3546
|
* @event auroDropdown-triggerClick - Notifies that the trigger has been clicked.
|
|
3544
3547
|
* @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.
|
|
@@ -3205,7 +3205,7 @@ var styleSnowflakeCss = i$2`:host{display:block}.wrapper{display:flex;flex:1;fle
|
|
|
3205
3205
|
|
|
3206
3206
|
var colorCss = i$2`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
|
|
3207
3207
|
|
|
3208
|
-
var styleCss = i$2
|
|
3208
|
+
var styleCss = i$2`:host{position:relative;display:block}.helptext-wrapper{display:none;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([large]) .helptext-wrapper{font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
|
|
3209
3209
|
|
|
3210
3210
|
var tokensCss = i$2`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
3211
3211
|
|
|
@@ -3285,6 +3285,8 @@ class AuroLibraryRuntimeUtils {
|
|
|
3285
3285
|
|
|
3286
3286
|
/**
|
|
3287
3287
|
* Displays help text or error messages within form elements - Internal Use Only.
|
|
3288
|
+
*
|
|
3289
|
+
* @attr { Boolean } large - If declared, make font-size to 1rem(16px).
|
|
3288
3290
|
*/
|
|
3289
3291
|
class AuroHelpText extends i {
|
|
3290
3292
|
|
|
@@ -3400,7 +3402,7 @@ class AuroHelpText extends i {
|
|
|
3400
3402
|
// function that renders the HTML and CSS into the scope of the component
|
|
3401
3403
|
render() {
|
|
3402
3404
|
return x`
|
|
3403
|
-
<div class="helptext-wrapper
|
|
3405
|
+
<div class="helptext-wrapper" ?visible="${this.hasTextContent}">
|
|
3404
3406
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
3405
3407
|
</div>
|
|
3406
3408
|
`;
|
|
@@ -3514,6 +3516,7 @@ class AuroElement extends i {
|
|
|
3514
3516
|
* @slot trigger - Defines the content of the trigger.
|
|
3515
3517
|
* @csspart trigger - The trigger content container.
|
|
3516
3518
|
* @csspart chevron - The collapsed/expanded state icon container.
|
|
3519
|
+
* @csspart size - The size of the dropdown bib. (height, width, maxHeight, maxWidth only)
|
|
3517
3520
|
* @csspart helpText - The helpText content container.
|
|
3518
3521
|
* @event auroDropdown-triggerClick - Notifies that the trigger has been clicked.
|
|
3519
3522
|
* @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.
|
|
@@ -3158,7 +3158,7 @@ var styleSnowflakeCss = css`:host{display:block}.wrapper{display:flex;flex:1;fle
|
|
|
3158
3158
|
|
|
3159
3159
|
var colorCss = css`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
|
|
3160
3160
|
|
|
3161
|
-
var styleCss = css
|
|
3161
|
+
var styleCss = css`:host{position:relative;display:block}.helptext-wrapper{display:none;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([large]) .helptext-wrapper{font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
|
|
3162
3162
|
|
|
3163
3163
|
var tokensCss = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
3164
3164
|
|
|
@@ -3238,6 +3238,8 @@ class AuroLibraryRuntimeUtils {
|
|
|
3238
3238
|
|
|
3239
3239
|
/**
|
|
3240
3240
|
* Displays help text or error messages within form elements - Internal Use Only.
|
|
3241
|
+
*
|
|
3242
|
+
* @attr { Boolean } large - If declared, make font-size to 1rem(16px).
|
|
3241
3243
|
*/
|
|
3242
3244
|
class AuroHelpText extends LitElement {
|
|
3243
3245
|
|
|
@@ -3353,7 +3355,7 @@ class AuroHelpText extends LitElement {
|
|
|
3353
3355
|
// function that renders the HTML and CSS into the scope of the component
|
|
3354
3356
|
render() {
|
|
3355
3357
|
return html`
|
|
3356
|
-
<div class="helptext-wrapper
|
|
3358
|
+
<div class="helptext-wrapper" ?visible="${this.hasTextContent}">
|
|
3357
3359
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
3358
3360
|
</div>
|
|
3359
3361
|
`;
|
|
@@ -3467,6 +3469,7 @@ class AuroElement extends LitElement {
|
|
|
3467
3469
|
* @slot trigger - Defines the content of the trigger.
|
|
3468
3470
|
* @csspart trigger - The trigger content container.
|
|
3469
3471
|
* @csspart chevron - The collapsed/expanded state icon container.
|
|
3472
|
+
* @csspart size - The size of the dropdown bib. (height, width, maxHeight, maxWidth only)
|
|
3470
3473
|
* @csspart helpText - The helpText content container.
|
|
3471
3474
|
* @event auroDropdown-triggerClick - Notifies that the trigger has been clicked.
|
|
3472
3475
|
* @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.
|
|
@@ -3158,7 +3158,7 @@ var styleSnowflakeCss = css`:host{display:block}.wrapper{display:flex;flex:1;fle
|
|
|
3158
3158
|
|
|
3159
3159
|
var colorCss = css`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
|
|
3160
3160
|
|
|
3161
|
-
var styleCss = css
|
|
3161
|
+
var styleCss = css`:host{position:relative;display:block}.helptext-wrapper{display:none;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([large]) .helptext-wrapper{font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
|
|
3162
3162
|
|
|
3163
3163
|
var tokensCss = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
3164
3164
|
|
|
@@ -3238,6 +3238,8 @@ class AuroLibraryRuntimeUtils {
|
|
|
3238
3238
|
|
|
3239
3239
|
/**
|
|
3240
3240
|
* Displays help text or error messages within form elements - Internal Use Only.
|
|
3241
|
+
*
|
|
3242
|
+
* @attr { Boolean } large - If declared, make font-size to 1rem(16px).
|
|
3241
3243
|
*/
|
|
3242
3244
|
class AuroHelpText extends LitElement {
|
|
3243
3245
|
|
|
@@ -3353,7 +3355,7 @@ class AuroHelpText extends LitElement {
|
|
|
3353
3355
|
// function that renders the HTML and CSS into the scope of the component
|
|
3354
3356
|
render() {
|
|
3355
3357
|
return html`
|
|
3356
|
-
<div class="helptext-wrapper
|
|
3358
|
+
<div class="helptext-wrapper" ?visible="${this.hasTextContent}">
|
|
3357
3359
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
3358
3360
|
</div>
|
|
3359
3361
|
`;
|
|
@@ -3467,6 +3469,7 @@ class AuroElement extends LitElement {
|
|
|
3467
3469
|
* @slot trigger - Defines the content of the trigger.
|
|
3468
3470
|
* @csspart trigger - The trigger content container.
|
|
3469
3471
|
* @csspart chevron - The collapsed/expanded state icon container.
|
|
3472
|
+
* @csspart size - The size of the dropdown bib. (height, width, maxHeight, maxWidth only)
|
|
3470
3473
|
* @csspart helpText - The helpText content container.
|
|
3471
3474
|
* @event auroDropdown-triggerClick - Notifies that the trigger has been clicked.
|
|
3472
3475
|
* @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.
|
|
@@ -2,7 +2,7 @@ import { css, LitElement, html } from 'lit';
|
|
|
2
2
|
|
|
3
3
|
var colorCss = css`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
|
|
4
4
|
|
|
5
|
-
var styleCss = css
|
|
5
|
+
var styleCss = css`:host{position:relative;display:block}.helptext-wrapper{display:none;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([large]) .helptext-wrapper{font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
|
|
6
6
|
|
|
7
7
|
var tokensCss = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
8
8
|
|
|
@@ -82,6 +82,8 @@ class AuroLibraryRuntimeUtils {
|
|
|
82
82
|
|
|
83
83
|
/**
|
|
84
84
|
* Displays help text or error messages within form elements - Internal Use Only.
|
|
85
|
+
*
|
|
86
|
+
* @attr { Boolean } large - If declared, make font-size to 1rem(16px).
|
|
85
87
|
*/
|
|
86
88
|
class AuroHelpText extends LitElement {
|
|
87
89
|
|
|
@@ -197,7 +199,7 @@ class AuroHelpText extends LitElement {
|
|
|
197
199
|
// function that renders the HTML and CSS into the scope of the component
|
|
198
200
|
render() {
|
|
199
201
|
return html`
|
|
200
|
-
<div class="helptext-wrapper
|
|
202
|
+
<div class="helptext-wrapper" ?visible="${this.hasTextContent}">
|
|
201
203
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
202
204
|
</div>
|
|
203
205
|
`;
|
|
@@ -2,7 +2,7 @@ import { css, LitElement, html } from 'lit';
|
|
|
2
2
|
|
|
3
3
|
var colorCss = css`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
|
|
4
4
|
|
|
5
|
-
var styleCss = css
|
|
5
|
+
var styleCss = css`:host{position:relative;display:block}.helptext-wrapper{display:none;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([large]) .helptext-wrapper{font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
|
|
6
6
|
|
|
7
7
|
var tokensCss = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
8
8
|
|
|
@@ -82,6 +82,8 @@ class AuroLibraryRuntimeUtils {
|
|
|
82
82
|
|
|
83
83
|
/**
|
|
84
84
|
* Displays help text or error messages within form elements - Internal Use Only.
|
|
85
|
+
*
|
|
86
|
+
* @attr { Boolean } large - If declared, make font-size to 1rem(16px).
|
|
85
87
|
*/
|
|
86
88
|
class AuroHelpText extends LitElement {
|
|
87
89
|
|
|
@@ -197,7 +199,7 @@ class AuroHelpText extends LitElement {
|
|
|
197
199
|
// function that renders the HTML and CSS into the scope of the component
|
|
198
200
|
render() {
|
|
199
201
|
return html`
|
|
200
|
-
<div class="helptext-wrapper
|
|
202
|
+
<div class="helptext-wrapper" ?visible="${this.hasTextContent}">
|
|
201
203
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
202
204
|
</div>
|
|
203
205
|
`;
|
|
@@ -7658,7 +7658,7 @@ var buttonVersion = '11.0.0';
|
|
|
7658
7658
|
|
|
7659
7659
|
var colorCss = i$5`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
|
|
7660
7660
|
|
|
7661
|
-
var styleCss = i$5
|
|
7661
|
+
var styleCss = i$5`:host{position:relative;display:block}.helptext-wrapper{display:none;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([large]) .helptext-wrapper{font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
|
|
7662
7662
|
|
|
7663
7663
|
var tokensCss = i$5`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
7664
7664
|
|
|
@@ -7738,6 +7738,8 @@ class AuroLibraryRuntimeUtils {
|
|
|
7738
7738
|
|
|
7739
7739
|
/**
|
|
7740
7740
|
* Displays help text or error messages within form elements - Internal Use Only.
|
|
7741
|
+
*
|
|
7742
|
+
* @attr { Boolean } large - If declared, make font-size to 1rem(16px).
|
|
7741
7743
|
*/
|
|
7742
7744
|
class AuroHelpText extends i$2 {
|
|
7743
7745
|
|
|
@@ -7853,7 +7855,7 @@ class AuroHelpText extends i$2 {
|
|
|
7853
7855
|
// function that renders the HTML and CSS into the scope of the component
|
|
7854
7856
|
render() {
|
|
7855
7857
|
return x`
|
|
7856
|
-
<div class="helptext-wrapper
|
|
7858
|
+
<div class="helptext-wrapper" ?visible="${this.hasTextContent}">
|
|
7857
7859
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
7858
7860
|
</div>
|
|
7859
7861
|
`;
|