@aurodesignsystem/auro-accordion 4.1.0 → 4.2.1

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 (22) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/README.md +1 -1
  3. package/coverage/lcov-report/auro-accordion-group.js.html +1 -1
  4. package/coverage/lcov-report/auro-accordion.js.html +3 -3
  5. package/coverage/lcov-report/color-css.js.html +2 -2
  6. package/coverage/lcov-report/iconVersion.js.html +2 -2
  7. package/coverage/lcov-report/index.html +1 -1
  8. package/coverage/lcov-report/style-css.js.html +2 -2
  9. package/coverage/lcov-report/tokens-css.js.html +1 -1
  10. package/demo/api.min.js +927 -34
  11. package/demo/index.min.js +926 -33
  12. package/dist/auro-accordion__bundled.js +44 -24
  13. package/dist/iconVersion.d.ts +1 -1
  14. package/package.json +9 -9
  15. package/src/auro-accordion.js +2 -2
  16. package/src/color-css.js +1 -1
  17. package/src/color.css +1 -1
  18. package/src/color.scss +1 -1
  19. package/src/iconVersion.js +1 -1
  20. package/src/style-css.js +1 -1
  21. package/src/style.css +3 -4
  22. package/src/style.scss +3 -4
package/dist/auro-accordion__bundled.js CHANGED
@@ -226,7 +226,7 @@ const cacheFetch = (uri, options = {}) => {
226
226
  return _fetchMap.get(uri);
227
227
  };
228
228
 
229
- var styleCss$2 = i$5`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}:host .logo{color:var(--ds-color-brand-midnight-400, #01426a)}:host([customSize]){--auro-size-lg:100%;--ds-size-300: 100%;width:100%;height:100%}.label{display:flex;align-items:flex-start}.label svg{margin:0 var(--ds-size-50, 0.25rem)}.labelContainer{line-height:1.8}`;
229
+ var styleCss$2 = i$5`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}:host .logo{color:var(--ds-color-brand-midnight-400, #01426a)}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.label{display:flex;align-items:flex-start}.label svg{margin:0 var(--ds-size-50, 0.25rem)}.labelContainer{line-height:1.8}`;
230
230
 
231
231
  // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
232
232
  // See LICENSE in the project root for license information.
@@ -307,7 +307,7 @@ class BaseIcon extends AuroElement {
307
307
  }
308
308
  }
309
309
 
310
- var tokensCss$3 = i$5`:host{--ds-auro-icon-color: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default)}`;
310
+ var tokensCss$3 = i$5`:host{--ds-auro-icon-color: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default);--ds-auro-icon-size: var(--ds-size-300, $ds-size-300)}`;
311
311
 
312
312
  var colorCss$3 = i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-default, #a2c270)}:host(:not([onDark])[disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-default, #adadad)}:host(:not([onDark])[emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-default, #2a2a2a)}:host(:not([onDark])[error]){--ds-auro-icon-color: var(--ds-color-icon-error-default, #cc1816)}:host(:not([onDark])[info]){--ds-auro-icon-color: var(--ds-color-icon-info-default, #326aa5)}:host(:not([onDark])[secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-default, #7e8894)}:host(:not([onDark])[subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-default, #a0c9f1)}:host(:not([onDark])[success]){--ds-auro-icon-color: var(--ds-color-icon-success-default, #40a080)}:host(:not([onDark])[tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-default, #afb9c6)}:host(:not([onDark])[warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-default, #c49432)}:host([onDark]){--ds-auro-icon-color: var(--ds-color-icon-primary-inverse, #f7f7f7)}:host([onDark][accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-inverse, #badd81)}:host([onDark][disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-inverse, #7e7e7e)}:host([onDark][emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([onDark][error]){--ds-auro-icon-color: var(--ds-color-icon-error-inverse, #f9aca6)}:host([onDark][info]){--ds-auro-icon-color: var(--ds-color-icon-info-inverse, #89b2d4)}:host([onDark][secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-inverse, #ccd2db)}:host([onDark][subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-inverse, #326aa5)}:host([onDark][success]){--ds-auro-icon-color: var(--ds-color-icon-success-inverse, #8eceb9)}:host([onDark][tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-inverse, #939fad)}:host([onDark][warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-inverse, #f2c153)}`;
313
313
 
@@ -319,7 +319,6 @@ var colorCss$3 = i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){
319
319
  /**
320
320
  * auro-icon provides users a way to use the Auro Icons by simply passing in the category and name.
321
321
  *
322
- * @attr {Boolean} customSize - Allows for custom size use.
323
322
  * @attr {String} category - The category of the icon you are looking for. See https://auro.alaskaair.com/icons/usage.
324
323
  * @attr {String} name - The name of the icon you are looking for without the file extension. See https://auro.alaskaair.com/icons/usage
325
324
  * @attr {Boolean} customColor - Removes primary selector.
@@ -460,6 +459,18 @@ class AuroIcon extends BaseIcon {
460
459
  ];
461
460
  }
462
461
 
462
+ /**
463
+ * This will register this element with the browser.
464
+ * @param {string} [name="auro-icon"] - The name of element that you want to register to.
465
+ *
466
+ * @example
467
+ * AuroIcon.register("custom-icon") // this will register this element to <custom-icon/>
468
+ *
469
+ */
470
+ static register(name = "auro-icon") {
471
+ AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroIcon);
472
+ }
473
+
463
474
  connectedCallback() {
464
475
  super.connectedCallback();
465
476
 
@@ -499,20 +510,15 @@ class AuroIcon extends BaseIcon {
499
510
  }
500
511
  }
501
512
 
502
- // default internal definition
503
- if (!customElements.get("auro-icon")) {
504
- customElements.define("auro-icon", AuroIcon);
505
- }
506
-
507
- var iconVersion = '5.0.2';
513
+ var iconVersion = '6.0.2';
508
514
 
509
515
  var chevronUp = {"role":"img","color":"currentColor","title":"","desc":"Directional indicator; up.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"chevron-up","category":"interface","svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"chevron-up__desc\" class=\"ico_squareLarge\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"chevron-up__desc\">Directional indicator; up.</desc><path d=\"m17.603 14.343-.073.084a.75.75 0 0 1-.976.073l-.084-.073L12 9.957l-4.47 4.47a.75.75 0 0 1-.976.073l-.084-.073a.75.75 0 0 1-.073-.976l.073-.085 4.823-4.823a1 1 0 0 1 1.414 0l4.823 4.823a.75.75 0 0 1 .073.977\"/></svg>"};
510
516
 
511
517
  var chevronDown = {"role":"img","color":"currentColor","title":"","desc":"Directional indicator; down.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"chevron-down","category":"interface","svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"chevron-down__desc\" class=\"ico_squareLarge\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"chevron-down__desc\">Directional indicator; down.</desc><path d=\"m6.397 9.554.073-.084a.75.75 0 0 1 .976-.073l.084.073L12 13.939l4.47-4.47a.75.75 0 0 1 .976-.072l.084.073a.75.75 0 0 1 .073.976l-.073.084L13.061 15l-.354.354a1 1 0 0 1-1.414 0L10.939 15l-4.47-4.47a.75.75 0 0 1-.072-.976l.073-.084z\"/></svg>"};
512
518
 
513
- var styleCss$1 = i$5`:host{interpolate-size:allow-keywords}:host .trigger{position:relative;cursor:pointer;display:flex;flex-direction:row;border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem)}:host .trigger:hover{text-decoration:underline}:host ::slotted([slot=trigger]){padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-200, 1rem);font-size:var(--ds-text-heading-300-size, 1.125rem)}:host .iconWrapper{height:var(--ds-size-300, 1.5rem);margin-top:-2px}:host [auro-icon]{height:var(--ds-size-300, 1.5rem);width:var(--ds-size-300, 1.5rem)}:host [auro-icon][hidden]{display:none}:host .content{width:100%;transition:all .5s ease-in-out;transition-property:height;font-size:var(--ds-text-body-size-default, 1rem)}:host .componentWrapper{height:100%;overflow:hidden}:host .contentWrapper{padding-left:var(--ds-size-400, 2rem);padding-bottom:var(--ds-size-300, 1.5rem);padding-right:var(--ds-size-200, 1rem)}:host(:focus) .trigger{border-width:1px;border-style:solid}:host([chevron=right]) ::slotted([slot=trigger]){padding-left:0;padding-right:var(--ds-size-50, 0.25rem)}:host([alignRight]) .componentWrapper{display:flex;flex-direction:column;align-items:flex-end}:host([fluid]) .trigger{width:100%}:host([grouped]) .componentWrapper{border-width:1px;border-style:solid}:host(:not([expanded])) .content,:host([expanded=false]) .content{height:0 !important}:host([expanded]) .content{height:auto}:host([emphasis]) .trigger{border-style:solid;border-width:1px;border-left-width:2px;padding-left:var(--ds-size-200, 1rem)}:host([emphasis]) .trigger:before{display:block;position:absolute;top:-1px;left:-2px;width:1px;height:calc(100% + 2px);content:"";border-left-style:solid;border-left-width:2px}:host([emphasis]) .trigger:focus{border-left-width:1px;margin-left:1px}:host([emphasis]) .content{border-left-width:2px;border-left-style:solid;padding:unset}:host([emphasis]) .contentWrapper{padding-left:var(--ds-size-200, 1rem)}:host([emphasis]) .iconWrapper{padding-right:var(--ds-size-200, 1rem)}:host([emphasis]:not([expanded]):hover) .trigger{text-decoration:unset}:host([variant=sm]) ::slotted([slot=trigger]){font-size:var(--ds-text-body-size-default, 1rem)}:host([variant=lg]) ::slotted([slot=trigger]){font-size:var(--ds-text-heading-400-size, 1.25rem)}:host([chevron=none]) ::slotted([slot=trigger]),:host([chevron=none]) .contentWrapper{padding-left:unset}`;
519
+ var styleCss$1 = i$5`:host{interpolate-size:allow-keywords}:host .trigger{position:relative;cursor:pointer;display:flex;flex-direction:row;border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem)}:host .trigger:hover{text-decoration:underline}:host ::slotted([slot=trigger]){padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-200, 1rem);font-size:var(--ds-text-heading-300-size, 1.125rem)}:host .iconWrapper{height:var(--ds-size-300, 1.5rem);margin-top:-2px}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300,$ds-size-300)}:host [auro-icon][hidden]{display:none}:host .content{width:100%;transition:all .5s ease-in-out;transition-property:height;font-size:var(--ds-text-body-size-default, 1rem)}:host .componentWrapper{height:100%;overflow:hidden}:host .contentWrapper{padding-left:var(--ds-size-400, 2rem);padding-bottom:var(--ds-size-300, 1.5rem);padding-right:var(--ds-size-200, 1rem)}:host(:focus) .trigger{border-width:1px;border-style:solid}:host([chevron=right]) ::slotted([slot=trigger]){padding-left:0;padding-right:var(--ds-size-50, 0.25rem)}:host([alignRight]) .componentWrapper{display:flex;flex-direction:column;align-items:flex-end}:host([fluid]) .trigger{width:100%}:host([grouped]) .componentWrapper{border-bottom-width:1px;border-bottom-style:solid}:host(:not([expanded])) .content,:host([expanded=false]) .content{height:0 !important}:host([expanded]) .content{height:auto}:host([emphasis]) .trigger{border-style:solid;border-width:1px;border-left-width:2px;padding-left:var(--ds-size-200, 1rem)}:host([emphasis]) .trigger:before{display:block;position:absolute;top:-1px;left:-2px;width:1px;height:calc(100% + 2px);content:"";border-left-style:solid;border-left-width:2px}:host([emphasis]) .trigger:focus{border-left-width:1px;margin-left:1px}:host([emphasis]) .content{border-left-width:2px;border-left-style:solid;padding:unset}:host([emphasis]) .contentWrapper{padding-left:var(--ds-size-200, 1rem)}:host([emphasis]) .iconWrapper{padding-right:var(--ds-size-200, 1rem)}:host([emphasis]:not([expanded]):hover) .trigger{text-decoration:unset}:host([variant=sm]) ::slotted([slot=trigger]){font-size:var(--ds-text-body-size-default, 1rem)}:host([variant=lg]) ::slotted([slot=trigger]){font-size:var(--ds-text-heading-400-size, 1.25rem)}:host([chevron=none]) ::slotted([slot=trigger]),:host([chevron=none]) .contentWrapper{padding-left:unset}`;
514
520
 
515
- var colorCss$2 = i$5`:host .trigger{color:var(--ds-auro-accordion-trigger-color);border-color:var(--ds-auro-accordion-trigger-border-color)}:host [auro-icon]{color:var(--ds-auro-accordion-trigger-icon-color)}:host(:focus){--ds-auro-accordion-trigger-border-color: var(--ds-color-border-active-default, #0074c8);--ds-auro-accordion-trigger-icon-color: var(--ds-color-icon-ui-secondary-focus-default, #7e7e7e)}:host(:hover){--ds-auro-accordion-trigger-icon-color: var(--ds-color-icon-ui-secondary-hover-default, #525252)}:host([grouped]) .componentWrapper{border-color:var(--ds-auro-accordion-group-border-color)}:host([emphasis]) .trigger:before{border-color:var(--ds-auro-accordion-trigger-border-color)}:host([emphasis]) .trigger:focus:before,:host([emphasis]) .trigger:hover:before{--ds-auro-accordion-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}:host([emphasis]) .trigger:focus{--ds-auro-accordion-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}:host([emphasis]) .content{border-left-color:var(--ds-auro-accordion-content-border-color)}:host([emphasis][expanded]) .trigger:before{--ds-auro-accordion-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}:host([emphasis][expanded]) .content{--ds-auro-accordion-content-border-color: var(--ds-color-border-subtle-default, #f0f7fd)}`;
521
+ var colorCss$2 = i$5`:host .trigger{color:var(--ds-auro-accordion-trigger-color);border-color:var(--ds-auro-accordion-trigger-border-color)}:host [auro-icon]{color:var(--ds-auro-accordion-trigger-icon-color)}:host(:focus){--ds-auro-accordion-trigger-border-color: var(--ds-color-border-active-default, #0074c8);--ds-auro-accordion-trigger-icon-color: var(--ds-color-icon-ui-secondary-focus-default, #7e7e7e)}:host(:hover){--ds-auro-accordion-trigger-icon-color: var(--ds-color-icon-ui-secondary-hover-default, #525252)}:host([grouped]) .componentWrapper{border-bottom-color:var(--ds-auro-accordion-group-border-color)}:host([emphasis]) .trigger:before{border-color:var(--ds-auro-accordion-trigger-border-color)}:host([emphasis]) .trigger:focus:before,:host([emphasis]) .trigger:hover:before{--ds-auro-accordion-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}:host([emphasis]) .trigger:focus{--ds-auro-accordion-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}:host([emphasis]) .content{border-left-color:var(--ds-auro-accordion-content-border-color)}:host([emphasis][expanded]) .trigger:before{--ds-auro-accordion-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}:host([emphasis][expanded]) .content{--ds-auro-accordion-content-border-color: var(--ds-color-border-subtle-default, #f0f7fd)}`;
516
522
 
517
523
  var tokensCss$2 = i$5`:host{--ds-auro-accordion-content-border-color: transparent;--ds-auro-accordion-group-border-color: var(--ds-color-border-divider-default, rgba(0, 0, 0, 0.12));--ds-auro-accordion-trigger-border-color: transparent;--ds-auro-accordion-trigger-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-accordion-trigger-icon-color: var(--ds-color-icon-ui-secondary-default-default, #7e7e7e)}`;
518
524
 
@@ -668,10 +674,10 @@ class AuroAccordion extends r {
668
674
  aria-expanded="${this.expanded}"
669
675
  @click="${this.toggle}"
670
676
  part="trigger">
671
- <${this.iconTag} slot="icon" customSvg customSize customColor ?hidden="${!this.expanded}">
677
+ <${this.iconTag} slot="icon" customSvg customColor ?hidden="${!this.expanded}">
672
678
  ${this.generateIconHtml(chevronUp.svg)}
673
679
  </${this.iconTag}>
674
- <${this.iconTag} slot="icon" customSvg customSize customColor ?hidden="${this.expanded}">
680
+ <${this.iconTag} slot="icon" customSvg customColor ?hidden="${this.expanded}">
675
681
  ${this.generateIconHtml(chevronDown.svg)}
676
682
  </${this.iconTag}>
677
683
  <slot name="trigger" part="triggerSlot"></slot>
@@ -907,6 +913,18 @@ class AuroLoader extends r {
907
913
  ];
908
914
  }
909
915
 
916
+ /**
917
+ * This will register this element with the browser.
918
+ * @param {string} [name="auro-loader"] - The name of element that you want to register to.
919
+ *
920
+ * @example
921
+ * AuroLoader.register("custom-loader") // this will register this element to <custom-loader/>
922
+ *
923
+ */
924
+ static register(name = "auro-loader") {
925
+ AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroLoader);
926
+ }
927
+
910
928
  firstUpdated() {
911
929
  // Add the tag name as an attribute if it is different than the component name
912
930
  this.runtimeUtils.handleComponentTagRename(this, 'auro-loader');
@@ -954,12 +972,7 @@ class AuroLoader extends r {
954
972
  }
955
973
  }
956
974
 
957
- // default internal definition
958
- if (!customElements.get("auro-loader")) {
959
- customElements.define("auro-loader", AuroLoader);
960
- }
961
-
962
- var loaderVersion = '3.0.0';
975
+ var loaderVersion = '3.1.1';
963
976
 
964
977
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
965
978
  // See LICENSE in the project root for license information.
@@ -1100,6 +1113,18 @@ class AuroButton extends r {
1100
1113
  };
1101
1114
  }
1102
1115
 
1116
+ /**
1117
+ * This will register this element with the browser.
1118
+ * @param {string} [name="auro-button"] - The name of element that you want to register to.
1119
+ *
1120
+ * @example
1121
+ * AuroButton.register("custom-button") // this will register this element to <custom-button/>
1122
+ *
1123
+ */
1124
+ static register(name = "auro-button") {
1125
+ AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroButton);
1126
+ }
1127
+
1103
1128
  /**
1104
1129
  * Internal method to apply focus to the HTML5 button.
1105
1130
  * @private
@@ -1182,11 +1207,6 @@ class AuroButton extends r {
1182
1207
  }
1183
1208
  }
1184
1209
 
1185
- // default internal definition
1186
- if (!customElements.get("auro-button")) {
1187
- customElements.define("auro-button", AuroButton);
1188
- }
1189
-
1190
1210
  // Copyright (c) 2022 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
1191
1211
  // See LICENSE in the project root for license information.
1192
1212
 
package/dist/iconVersion.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- declare const _default: "5.0.2";
1
+ declare const _default: "6.0.2";
2
2
  export default _default;
3
3
  //# sourceMappingURL=iconVersion.d.ts.map
package/package.json CHANGED
@@ -7,7 +7,7 @@
7
7
  "================================================================================"
8
8
  ],
9
9
  "name": "@aurodesignsystem/auro-accordion",
10
- "version": "4.1.0",
10
+ "version": "4.2.1",
11
11
  "description": "auro-accordion HTML custom element",
12
12
  "repository": {
13
13
  "type": "git",
@@ -21,9 +21,9 @@
21
21
  },
22
22
  "dependencies": {
23
23
  "@alaskaairux/icons": "^4.44.1",
24
- "@aurodesignsystem/auro-button": "^8.0.1",
25
- "@aurodesignsystem/auro-icon": "^5.0.2",
26
- "@aurodesignsystem/auro-library": "^2.10.1",
24
+ "@aurodesignsystem/auro-button": "^8.1.2",
25
+ "@aurodesignsystem/auro-icon": "^6.0.2",
26
+ "@aurodesignsystem/auro-library": "~2.8",
27
27
  "chalk": "^5.3.0",
28
28
  "lit": "^3.2.1"
29
29
  },
@@ -32,8 +32,8 @@
32
32
  "@aurodesignsystem/webcorestylesheets": "^5.1.2"
33
33
  },
34
34
  "devDependencies": {
35
- "@aurodesignsystem/design-tokens": "^4.10.0",
36
- "@aurodesignsystem/eslint-config": "^1.3.2",
35
+ "@aurodesignsystem/design-tokens": "^4.10.1",
36
+ "@aurodesignsystem/eslint-config": "^1.3.3",
37
37
  "@aurodesignsystem/webcorestylesheets": "^5.1.2",
38
38
  "@commitlint/cli": "^19.5.0",
39
39
  "@commitlint/config-conventional": "^19.5.0",
@@ -60,10 +60,10 @@
60
60
  "postcss": "^8.4.47",
61
61
  "postcss-discard-comments": "^7.0.3",
62
62
  "postcss-selector-replace": "^1.0.2",
63
- "rollup": "^4.24.0",
63
+ "rollup": "^4.24.3",
64
64
  "rollup-plugin-serve": "^2.0.3",
65
- "sass": "^1.80.3",
66
- "semantic-release": "^24.1.3",
65
+ "sass": "^1.80.5",
66
+ "semantic-release": "^24.2.0",
67
67
  "stylelint": "^16.10.0",
68
68
  "stylelint-config-idiomatic-order": "^10.0.0",
69
69
  "stylelint-config-standard": "^36.0.1",
package/src/auro-accordion.js CHANGED
@@ -172,10 +172,10 @@ export class AuroAccordion extends LitElement {
172
172
  aria-expanded="${this.expanded}"
173
173
  @click="${this.toggle}"
174
174
  part="trigger">
175
- <${this.iconTag} slot="icon" customSvg customSize customColor ?hidden="${!this.expanded}">
175
+ <${this.iconTag} slot="icon" customSvg customColor ?hidden="${!this.expanded}">
176
176
  ${this.generateIconHtml(chevronUp.svg)}
177
177
  </${this.iconTag}>
178
- <${this.iconTag} slot="icon" customSvg customSize customColor ?hidden="${this.expanded}">
178
+ <${this.iconTag} slot="icon" customSvg customColor ?hidden="${this.expanded}">
179
179
  ${this.generateIconHtml(chevronDown.svg)}
180
180
  </${this.iconTag}>
181
181
  <slot name="trigger" part="triggerSlot"></slot>
package/src/color-css.js CHANGED
@@ -1,2 +1,2 @@
1
1
  import { css } from 'lit';
2
- export default css`:host .trigger{color:var(--ds-auro-accordion-trigger-color);border-color:var(--ds-auro-accordion-trigger-border-color)}:host [auro-icon]{color:var(--ds-auro-accordion-trigger-icon-color)}:host(:focus){--ds-auro-accordion-trigger-border-color: var(--ds-color-border-active-default, #0074c8);--ds-auro-accordion-trigger-icon-color: var(--ds-color-icon-ui-secondary-focus-default, #7e7e7e)}:host(:hover){--ds-auro-accordion-trigger-icon-color: var(--ds-color-icon-ui-secondary-hover-default, #525252)}:host([grouped]) .componentWrapper{border-color:var(--ds-auro-accordion-group-border-color)}:host([emphasis]) .trigger:before{border-color:var(--ds-auro-accordion-trigger-border-color)}:host([emphasis]) .trigger:focus:before,:host([emphasis]) .trigger:hover:before{--ds-auro-accordion-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}:host([emphasis]) .trigger:focus{--ds-auro-accordion-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}:host([emphasis]) .content{border-left-color:var(--ds-auro-accordion-content-border-color)}:host([emphasis][expanded]) .trigger:before{--ds-auro-accordion-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}:host([emphasis][expanded]) .content{--ds-auro-accordion-content-border-color: var(--ds-color-border-subtle-default, #f0f7fd)}`;
2
+ export default css`:host .trigger{color:var(--ds-auro-accordion-trigger-color);border-color:var(--ds-auro-accordion-trigger-border-color)}:host [auro-icon]{color:var(--ds-auro-accordion-trigger-icon-color)}:host(:focus){--ds-auro-accordion-trigger-border-color: var(--ds-color-border-active-default, #0074c8);--ds-auro-accordion-trigger-icon-color: var(--ds-color-icon-ui-secondary-focus-default, #7e7e7e)}:host(:hover){--ds-auro-accordion-trigger-icon-color: var(--ds-color-icon-ui-secondary-hover-default, #525252)}:host([grouped]) .componentWrapper{border-bottom-color:var(--ds-auro-accordion-group-border-color)}:host([emphasis]) .trigger:before{border-color:var(--ds-auro-accordion-trigger-border-color)}:host([emphasis]) .trigger:focus:before,:host([emphasis]) .trigger:hover:before{--ds-auro-accordion-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}:host([emphasis]) .trigger:focus{--ds-auro-accordion-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}:host([emphasis]) .content{border-left-color:var(--ds-auro-accordion-content-border-color)}:host([emphasis][expanded]) .trigger:before{--ds-auro-accordion-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}:host([emphasis][expanded]) .content{--ds-auro-accordion-content-border-color: var(--ds-color-border-subtle-default, #f0f7fd)}`;
package/src/color.css CHANGED
@@ -17,7 +17,7 @@
17
17
  }
18
18
 
19
19
  :host([grouped]) .componentWrapper {
20
- border-color: var(--ds-auro-accordion-group-border-color);
20
+ border-bottom-color: var(--ds-auro-accordion-group-border-color);
21
21
  }
22
22
 
23
23
  :host([emphasis]) .trigger:before {
package/src/color.scss CHANGED
@@ -31,7 +31,7 @@
31
31
 
32
32
  :host([grouped]) {
33
33
  .componentWrapper {
34
- border-color: var(--ds-auro-accordion-group-border-color);
34
+ border-bottom-color: var(--ds-auro-accordion-group-border-color);
35
35
  }
36
36
  }
37
37
 
package/src/iconVersion.js CHANGED
@@ -1 +1 @@
1
- export default '5.0.2'
1
+ export default '6.0.2'
package/src/style-css.js CHANGED
@@ -1,2 +1,2 @@
1
1
  import { css } from 'lit';
2
- export default css`:host{interpolate-size:allow-keywords}:host .trigger{position:relative;cursor:pointer;display:flex;flex-direction:row;border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem)}:host .trigger:hover{text-decoration:underline}:host ::slotted([slot=trigger]){padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-200, 1rem);font-size:var(--ds-text-heading-300-size, 1.125rem)}:host .iconWrapper{height:var(--ds-size-300, 1.5rem);margin-top:-2px}:host [auro-icon]{height:var(--ds-size-300, 1.5rem);width:var(--ds-size-300, 1.5rem)}:host [auro-icon][hidden]{display:none}:host .content{width:100%;transition:all .5s ease-in-out;transition-property:height;font-size:var(--ds-text-body-size-default, 1rem)}:host .componentWrapper{height:100%;overflow:hidden}:host .contentWrapper{padding-left:var(--ds-size-400, 2rem);padding-bottom:var(--ds-size-300, 1.5rem);padding-right:var(--ds-size-200, 1rem)}:host(:focus) .trigger{border-width:1px;border-style:solid}:host([chevron=right]) ::slotted([slot=trigger]){padding-left:0;padding-right:var(--ds-size-50, 0.25rem)}:host([alignRight]) .componentWrapper{display:flex;flex-direction:column;align-items:flex-end}:host([fluid]) .trigger{width:100%}:host([grouped]) .componentWrapper{border-width:1px;border-style:solid}:host(:not([expanded])) .content,:host([expanded=false]) .content{height:0 !important}:host([expanded]) .content{height:auto}:host([emphasis]) .trigger{border-style:solid;border-width:1px;border-left-width:2px;padding-left:var(--ds-size-200, 1rem)}:host([emphasis]) .trigger:before{display:block;position:absolute;top:-1px;left:-2px;width:1px;height:calc(100% + 2px);content:"";border-left-style:solid;border-left-width:2px}:host([emphasis]) .trigger:focus{border-left-width:1px;margin-left:1px}:host([emphasis]) .content{border-left-width:2px;border-left-style:solid;padding:unset}:host([emphasis]) .contentWrapper{padding-left:var(--ds-size-200, 1rem)}:host([emphasis]) .iconWrapper{padding-right:var(--ds-size-200, 1rem)}:host([emphasis]:not([expanded]):hover) .trigger{text-decoration:unset}:host([variant=sm]) ::slotted([slot=trigger]){font-size:var(--ds-text-body-size-default, 1rem)}:host([variant=lg]) ::slotted([slot=trigger]){font-size:var(--ds-text-heading-400-size, 1.25rem)}:host([chevron=none]) ::slotted([slot=trigger]),:host([chevron=none]) .contentWrapper{padding-left:unset}`;
2
+ export default css`:host{interpolate-size:allow-keywords}:host .trigger{position:relative;cursor:pointer;display:flex;flex-direction:row;border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem)}:host .trigger:hover{text-decoration:underline}:host ::slotted([slot=trigger]){padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-200, 1rem);font-size:var(--ds-text-heading-300-size, 1.125rem)}:host .iconWrapper{height:var(--ds-size-300, 1.5rem);margin-top:-2px}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300,$ds-size-300)}:host [auro-icon][hidden]{display:none}:host .content{width:100%;transition:all .5s ease-in-out;transition-property:height;font-size:var(--ds-text-body-size-default, 1rem)}:host .componentWrapper{height:100%;overflow:hidden}:host .contentWrapper{padding-left:var(--ds-size-400, 2rem);padding-bottom:var(--ds-size-300, 1.5rem);padding-right:var(--ds-size-200, 1rem)}:host(:focus) .trigger{border-width:1px;border-style:solid}:host([chevron=right]) ::slotted([slot=trigger]){padding-left:0;padding-right:var(--ds-size-50, 0.25rem)}:host([alignRight]) .componentWrapper{display:flex;flex-direction:column;align-items:flex-end}:host([fluid]) .trigger{width:100%}:host([grouped]) .componentWrapper{border-bottom-width:1px;border-bottom-style:solid}:host(:not([expanded])) .content,:host([expanded=false]) .content{height:0 !important}:host([expanded]) .content{height:auto}:host([emphasis]) .trigger{border-style:solid;border-width:1px;border-left-width:2px;padding-left:var(--ds-size-200, 1rem)}:host([emphasis]) .trigger:before{display:block;position:absolute;top:-1px;left:-2px;width:1px;height:calc(100% + 2px);content:"";border-left-style:solid;border-left-width:2px}:host([emphasis]) .trigger:focus{border-left-width:1px;margin-left:1px}:host([emphasis]) .content{border-left-width:2px;border-left-style:solid;padding:unset}:host([emphasis]) .contentWrapper{padding-left:var(--ds-size-200, 1rem)}:host([emphasis]) .iconWrapper{padding-right:var(--ds-size-200, 1rem)}:host([emphasis]:not([expanded]):hover) .trigger{text-decoration:unset}:host([variant=sm]) ::slotted([slot=trigger]){font-size:var(--ds-text-body-size-default, 1rem)}:host([variant=lg]) ::slotted([slot=trigger]){font-size:var(--ds-text-heading-400-size, 1.25rem)}:host([chevron=none]) ::slotted([slot=trigger]),:host([chevron=none]) .contentWrapper{padding-left:unset}`;
package/src/style.css CHANGED
@@ -24,8 +24,7 @@
24
24
  margin-top: -2px;
25
25
  }
26
26
  :host [auro-icon] {
27
- height: var(--ds-size-300, 1.5rem);
28
- width: var(--ds-size-300, 1.5rem);
27
+ --ds-auro-icon-size: var(--ds-size-300,$ds-size-300);
29
28
  }
30
29
  :host [auro-icon][hidden] {
31
30
  display: none;
@@ -67,8 +66,8 @@
67
66
  }
68
67
 
69
68
  :host([grouped]) .componentWrapper {
70
- border-width: 1px;
71
- border-style: solid;
69
+ border-bottom-width: 1px;
70
+ border-bottom-style: solid;
72
71
  }
73
72
 
74
73
  :host(:not([expanded])) .content,
package/src/style.scss CHANGED
@@ -40,8 +40,7 @@
40
40
  }
41
41
 
42
42
  [auro-icon] {
43
- height: var(--ds-size-300, $ds-size-300);
44
- width: var(--ds-size-300, $ds-size-300);
43
+ --ds-auro-icon-size: var(--ds-size-300,$ds-size-300);
45
44
 
46
45
  &[hidden] { // stylelint-disable-line selector-max-attribute
47
46
  display: none;
@@ -99,8 +98,8 @@
99
98
 
100
99
  :host([grouped]) {
101
100
  .componentWrapper {
102
- border-width: 1px;
103
- border-style: solid;
101
+ border-bottom-width: 1px;
102
+ border-bottom-style: solid;
104
103
  }
105
104
  }
106
105