@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.17 → 0.0.0-pr624.18

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 (31) hide show
  1. package/components/bibtemplate/dist/buttonVersion.d.ts +1 -1
  2. package/components/bibtemplate/dist/index.js +61 -10
  3. package/components/bibtemplate/dist/registered.js +61 -10
  4. package/components/combobox/demo/api.min.js +134 -20
  5. package/components/combobox/demo/index.min.js +134 -20
  6. package/components/combobox/dist/index.js +122 -20
  7. package/components/combobox/dist/registered.js +122 -20
  8. package/components/counter/demo/api.min.js +159 -33
  9. package/components/counter/demo/index.min.js +159 -33
  10. package/components/counter/dist/auro-counter.d.ts +6 -0
  11. package/components/counter/dist/index.js +159 -33
  12. package/components/counter/dist/registered.js +159 -33
  13. package/components/datepicker/demo/api.min.js +181 -28
  14. package/components/datepicker/demo/index.min.js +181 -28
  15. package/components/datepicker/dist/index.js +181 -28
  16. package/components/datepicker/dist/registered.js +181 -28
  17. package/components/input/demo/api.min.js +60 -9
  18. package/components/input/demo/index.min.js +60 -9
  19. package/components/input/dist/index.js +60 -9
  20. package/components/input/dist/registered.js +60 -9
  21. package/components/menu/demo/api.min.js +12 -0
  22. package/components/menu/demo/index.min.js +12 -0
  23. package/components/menu/dist/auro-menu.d.ts +6 -0
  24. package/components/menu/dist/index.js +12 -0
  25. package/components/menu/dist/registered.js +12 -0
  26. package/components/select/demo/api.min.js +94 -17
  27. package/components/select/demo/index.min.js +94 -17
  28. package/components/select/dist/auro-select.d.ts +7 -0
  29. package/components/select/dist/index.js +82 -17
  30. package/components/select/dist/registered.js +82 -17
  31. package/package.json +3 -3
@@ -11385,7 +11385,6 @@ let AuroElement$1$3 = class AuroElement extends i$1 {
11385
11385
  * @private
11386
11386
  */
11387
11387
  wrapper: {
11388
- type: HTMLElement,
11389
11388
  attribute: false,
11390
11389
  reflect: false
11391
11390
  }
@@ -11694,7 +11693,7 @@ let AuroLoader$2 = class AuroLoader extends i$1 {
11694
11693
 
11695
11694
  var loaderVersion$2 = '5.0.0';
11696
11695
 
11697
- /* eslint-disable max-lines, curly */
11696
+ /* eslint-disable max-lines, curly, jsdoc/no-undefined-types */
11698
11697
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
11699
11698
  // See LICENSE in the project root for license information.
11700
11699
 
@@ -11761,6 +11760,21 @@ let AuroButton$2 = class AuroButton extends AuroElement$1$3 {
11761
11760
  * @private
11762
11761
  */
11763
11762
  this.loaderTag = versioning.generateTag('auro-loader', loaderVersion$2, AuroLoader$2);
11763
+
11764
+ /**
11765
+ * @private
11766
+ */
11767
+ this.buttonHref = undefined;
11768
+
11769
+ /**
11770
+ * @private
11771
+ */
11772
+ this.buttonTarget = undefined;
11773
+
11774
+ /**
11775
+ * @private
11776
+ */
11777
+ this.buttonRel = undefined;
11764
11778
  }
11765
11779
 
11766
11780
  static get styles() {
@@ -11827,13 +11841,23 @@ let AuroButton$2 = class AuroButton extends AuroElement$1$3 {
11827
11841
  },
11828
11842
 
11829
11843
  /**
11830
- * Populates `tabIndex` to define the focusable sequence in keyboard navigation.
11844
+ * Populates `tabindex` to define the focusable sequence in keyboard navigation.
11831
11845
  */
11832
11846
  tIndex: {
11833
11847
  type: String,
11834
11848
  reflect: true
11835
11849
  },
11836
11850
 
11851
+ /**
11852
+ * Populates `tabindex` to define the focusable sequence in keyboard navigation.
11853
+ * Must be used with "." to ensure the host element does not retain a reference to the `tabindex` attribute.
11854
+ * Example: `<auro-button .tabindex="${this.disabled ? '-1' : '0'}"></auro-button>`
11855
+ */
11856
+ tabindex: {
11857
+ type: String,
11858
+ reflect: false
11859
+ },
11860
+
11837
11861
  /**
11838
11862
  * Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element.
11839
11863
  */
@@ -11866,6 +11890,27 @@ let AuroButton$2 = class AuroButton extends AuroElement$1$3 {
11866
11890
  type: String,
11867
11891
  reflect: true
11868
11892
  },
11893
+
11894
+ /**
11895
+ * @private
11896
+ */
11897
+ buttonHref: {
11898
+ type: String,
11899
+ },
11900
+
11901
+ /**
11902
+ * @private
11903
+ */
11904
+ buttonTarget: {
11905
+ type: String,
11906
+ },
11907
+
11908
+ /**
11909
+ * @private
11910
+ */
11911
+ buttonRel: {
11912
+ type: String,
11913
+ },
11869
11914
  };
11870
11915
  }
11871
11916
 
@@ -11956,14 +12001,17 @@ let AuroButton$2 = class AuroButton extends AuroElement$1$3 {
11956
12001
  loading: this.loading,
11957
12002
  };
11958
12003
 
12004
+ const tag = this.buttonHref ? i$4`a` : i$4`button`;
12005
+ const part = this.buttonHref ? 'link' : 'button';
12006
+
11959
12007
  return u$3`
11960
- <button
11961
- part="button"
12008
+ <${tag}
12009
+ part="${part}"
11962
12010
  aria-label="${o(this.loading ? this.loadingText : this.currentAriaLabel || undefined)}"
11963
12011
  aria-labelledby="${o(this.loading ? undefined : this.currentAriaLabelledBy || undefined)}"
11964
- tabIndex="${o(this.tIndex)}"
12012
+ tabindex="${o(this.tIndex || this.tabindex)}"
11965
12013
  ?autofocus="${this.autofocus}"
11966
- class="${e(classes)}"
12014
+ class=${e(classes)}
11967
12015
  ?disabled="${this.disabled || this.loading}"
11968
12016
  ?onDark="${this.onDark}"
11969
12017
  title="${o(this.title ? this.title : undefined)}"
@@ -11972,6 +12020,9 @@ let AuroButton$2 = class AuroButton extends AuroElement$1$3 {
11972
12020
  variant="${o(this.variant ? this.variant : undefined)}"
11973
12021
  .value="${o(this.value ? this.value : undefined)}"
11974
12022
  @click="${this.type === 'submit' ? this.surfaceSubmitEvent : undefined}"
12023
+ href="${o(this.buttonHref || undefined)}"
12024
+ target="${o(this.buttonTarget || undefined)}"
12025
+ rel="${o(this.buttonRel || undefined)}"
11975
12026
  >
11976
12027
  ${o(this.loading ? u$3`<${this.loaderTag} pulse part="loader"></${this.loaderTag}>` : undefined)}
11977
12028
 
@@ -11980,12 +12031,12 @@ let AuroButton$2 = class AuroButton extends AuroElement$1$3 {
11980
12031
  <slot></slot>
11981
12032
  </span>
11982
12033
  </span>
11983
- </button>
12034
+ </${tag}>
11984
12035
  `;
11985
12036
  }
11986
12037
 
11987
12038
  /**
11988
- * Renders the layout of the button
12039
+ * Renders the layout of the button.
11989
12040
  * @returns {TemplateResult}
11990
12041
  * @private
11991
12042
  */
@@ -11994,7 +12045,7 @@ let AuroButton$2 = class AuroButton extends AuroElement$1$3 {
11994
12045
  }
11995
12046
  };
11996
12047
 
11997
- var buttonVersion$2 = '11.0.0';
12048
+ var buttonVersion$2 = '11.2.1';
11998
12049
 
11999
12050
  // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
12000
12051
  // See LICENSE in the project root for license information.
@@ -13136,7 +13187,6 @@ let AuroElement$5 = class AuroElement extends i$1 {
13136
13187
  * @private
13137
13188
  */
13138
13189
  wrapper: {
13139
- type: HTMLElement,
13140
13190
  attribute: false,
13141
13191
  reflect: false
13142
13192
  }
@@ -13445,7 +13495,7 @@ let AuroLoader$1 = class AuroLoader extends i$1 {
13445
13495
 
13446
13496
  var loaderVersion$1 = '5.0.0';
13447
13497
 
13448
- /* eslint-disable max-lines, curly */
13498
+ /* eslint-disable max-lines, curly, jsdoc/no-undefined-types */
13449
13499
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
13450
13500
  // See LICENSE in the project root for license information.
13451
13501
 
@@ -13512,6 +13562,21 @@ let AuroButton$1 = class AuroButton extends AuroElement$5 {
13512
13562
  * @private
13513
13563
  */
13514
13564
  this.loaderTag = versioning.generateTag('auro-loader', loaderVersion$1, AuroLoader$1);
13565
+
13566
+ /**
13567
+ * @private
13568
+ */
13569
+ this.buttonHref = undefined;
13570
+
13571
+ /**
13572
+ * @private
13573
+ */
13574
+ this.buttonTarget = undefined;
13575
+
13576
+ /**
13577
+ * @private
13578
+ */
13579
+ this.buttonRel = undefined;
13515
13580
  }
13516
13581
 
13517
13582
  static get styles() {
@@ -13578,13 +13643,23 @@ let AuroButton$1 = class AuroButton extends AuroElement$5 {
13578
13643
  },
13579
13644
 
13580
13645
  /**
13581
- * Populates `tabIndex` to define the focusable sequence in keyboard navigation.
13646
+ * Populates `tabindex` to define the focusable sequence in keyboard navigation.
13582
13647
  */
13583
13648
  tIndex: {
13584
13649
  type: String,
13585
13650
  reflect: true
13586
13651
  },
13587
13652
 
13653
+ /**
13654
+ * Populates `tabindex` to define the focusable sequence in keyboard navigation.
13655
+ * Must be used with "." to ensure the host element does not retain a reference to the `tabindex` attribute.
13656
+ * Example: `<auro-button .tabindex="${this.disabled ? '-1' : '0'}"></auro-button>`
13657
+ */
13658
+ tabindex: {
13659
+ type: String,
13660
+ reflect: false
13661
+ },
13662
+
13588
13663
  /**
13589
13664
  * Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element.
13590
13665
  */
@@ -13617,6 +13692,27 @@ let AuroButton$1 = class AuroButton extends AuroElement$5 {
13617
13692
  type: String,
13618
13693
  reflect: true
13619
13694
  },
13695
+
13696
+ /**
13697
+ * @private
13698
+ */
13699
+ buttonHref: {
13700
+ type: String,
13701
+ },
13702
+
13703
+ /**
13704
+ * @private
13705
+ */
13706
+ buttonTarget: {
13707
+ type: String,
13708
+ },
13709
+
13710
+ /**
13711
+ * @private
13712
+ */
13713
+ buttonRel: {
13714
+ type: String,
13715
+ },
13620
13716
  };
13621
13717
  }
13622
13718
 
@@ -13707,14 +13803,17 @@ let AuroButton$1 = class AuroButton extends AuroElement$5 {
13707
13803
  loading: this.loading,
13708
13804
  };
13709
13805
 
13806
+ const tag = this.buttonHref ? i$4`a` : i$4`button`;
13807
+ const part = this.buttonHref ? 'link' : 'button';
13808
+
13710
13809
  return u$3`
13711
- <button
13712
- part="button"
13810
+ <${tag}
13811
+ part="${part}"
13713
13812
  aria-label="${o(this.loading ? this.loadingText : this.currentAriaLabel || undefined)}"
13714
13813
  aria-labelledby="${o(this.loading ? undefined : this.currentAriaLabelledBy || undefined)}"
13715
- tabIndex="${o(this.tIndex)}"
13814
+ tabindex="${o(this.tIndex || this.tabindex)}"
13716
13815
  ?autofocus="${this.autofocus}"
13717
- class="${e(classes)}"
13816
+ class=${e(classes)}
13718
13817
  ?disabled="${this.disabled || this.loading}"
13719
13818
  ?onDark="${this.onDark}"
13720
13819
  title="${o(this.title ? this.title : undefined)}"
@@ -13723,6 +13822,9 @@ let AuroButton$1 = class AuroButton extends AuroElement$5 {
13723
13822
  variant="${o(this.variant ? this.variant : undefined)}"
13724
13823
  .value="${o(this.value ? this.value : undefined)}"
13725
13824
  @click="${this.type === 'submit' ? this.surfaceSubmitEvent : undefined}"
13825
+ href="${o(this.buttonHref || undefined)}"
13826
+ target="${o(this.buttonTarget || undefined)}"
13827
+ rel="${o(this.buttonRel || undefined)}"
13726
13828
  >
13727
13829
  ${o(this.loading ? u$3`<${this.loaderTag} pulse part="loader"></${this.loaderTag}>` : undefined)}
13728
13830
 
@@ -13731,12 +13833,12 @@ let AuroButton$1 = class AuroButton extends AuroElement$5 {
13731
13833
  <slot></slot>
13732
13834
  </span>
13733
13835
  </span>
13734
- </button>
13836
+ </${tag}>
13735
13837
  `;
13736
13838
  }
13737
13839
 
13738
13840
  /**
13739
- * Renders the layout of the button
13841
+ * Renders the layout of the button.
13740
13842
  * @returns {TemplateResult}
13741
13843
  * @private
13742
13844
  */
@@ -25063,7 +25165,6 @@ let AuroElement$3 = class AuroElement extends i$1 {
25063
25165
  * @private
25064
25166
  */
25065
25167
  wrapper: {
25066
- type: HTMLElement,
25067
25168
  attribute: false,
25068
25169
  reflect: false
25069
25170
  }
@@ -25372,7 +25473,7 @@ class AuroLoader extends i$1 {
25372
25473
 
25373
25474
  var loaderVersion = '5.0.0';
25374
25475
 
25375
- /* eslint-disable max-lines, curly */
25476
+ /* eslint-disable max-lines, curly, jsdoc/no-undefined-types */
25376
25477
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
25377
25478
  // See LICENSE in the project root for license information.
25378
25479
 
@@ -25439,6 +25540,21 @@ class AuroButton extends AuroElement$3 {
25439
25540
  * @private
25440
25541
  */
25441
25542
  this.loaderTag = versioning.generateTag('auro-loader', loaderVersion, AuroLoader);
25543
+
25544
+ /**
25545
+ * @private
25546
+ */
25547
+ this.buttonHref = undefined;
25548
+
25549
+ /**
25550
+ * @private
25551
+ */
25552
+ this.buttonTarget = undefined;
25553
+
25554
+ /**
25555
+ * @private
25556
+ */
25557
+ this.buttonRel = undefined;
25442
25558
  }
25443
25559
 
25444
25560
  static get styles() {
@@ -25505,13 +25621,23 @@ class AuroButton extends AuroElement$3 {
25505
25621
  },
25506
25622
 
25507
25623
  /**
25508
- * Populates `tabIndex` to define the focusable sequence in keyboard navigation.
25624
+ * Populates `tabindex` to define the focusable sequence in keyboard navigation.
25509
25625
  */
25510
25626
  tIndex: {
25511
25627
  type: String,
25512
25628
  reflect: true
25513
25629
  },
25514
25630
 
25631
+ /**
25632
+ * Populates `tabindex` to define the focusable sequence in keyboard navigation.
25633
+ * Must be used with "." to ensure the host element does not retain a reference to the `tabindex` attribute.
25634
+ * Example: `<auro-button .tabindex="${this.disabled ? '-1' : '0'}"></auro-button>`
25635
+ */
25636
+ tabindex: {
25637
+ type: String,
25638
+ reflect: false
25639
+ },
25640
+
25515
25641
  /**
25516
25642
  * Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element.
25517
25643
  */
@@ -25544,6 +25670,27 @@ class AuroButton extends AuroElement$3 {
25544
25670
  type: String,
25545
25671
  reflect: true
25546
25672
  },
25673
+
25674
+ /**
25675
+ * @private
25676
+ */
25677
+ buttonHref: {
25678
+ type: String,
25679
+ },
25680
+
25681
+ /**
25682
+ * @private
25683
+ */
25684
+ buttonTarget: {
25685
+ type: String,
25686
+ },
25687
+
25688
+ /**
25689
+ * @private
25690
+ */
25691
+ buttonRel: {
25692
+ type: String,
25693
+ },
25547
25694
  };
25548
25695
  }
25549
25696
 
@@ -25634,14 +25781,17 @@ class AuroButton extends AuroElement$3 {
25634
25781
  loading: this.loading,
25635
25782
  };
25636
25783
 
25784
+ const tag = this.buttonHref ? i$4`a` : i$4`button`;
25785
+ const part = this.buttonHref ? 'link' : 'button';
25786
+
25637
25787
  return u$3`
25638
- <button
25639
- part="button"
25788
+ <${tag}
25789
+ part="${part}"
25640
25790
  aria-label="${o(this.loading ? this.loadingText : this.currentAriaLabel || undefined)}"
25641
25791
  aria-labelledby="${o(this.loading ? undefined : this.currentAriaLabelledBy || undefined)}"
25642
- tabIndex="${o(this.tIndex)}"
25792
+ tabindex="${o(this.tIndex || this.tabindex)}"
25643
25793
  ?autofocus="${this.autofocus}"
25644
- class="${e(classes)}"
25794
+ class=${e(classes)}
25645
25795
  ?disabled="${this.disabled || this.loading}"
25646
25796
  ?onDark="${this.onDark}"
25647
25797
  title="${o(this.title ? this.title : undefined)}"
@@ -25650,6 +25800,9 @@ class AuroButton extends AuroElement$3 {
25650
25800
  variant="${o(this.variant ? this.variant : undefined)}"
25651
25801
  .value="${o(this.value ? this.value : undefined)}"
25652
25802
  @click="${this.type === 'submit' ? this.surfaceSubmitEvent : undefined}"
25803
+ href="${o(this.buttonHref || undefined)}"
25804
+ target="${o(this.buttonTarget || undefined)}"
25805
+ rel="${o(this.buttonRel || undefined)}"
25653
25806
  >
25654
25807
  ${o(this.loading ? u$3`<${this.loaderTag} pulse part="loader"></${this.loaderTag}>` : undefined)}
25655
25808
 
@@ -25658,12 +25811,12 @@ class AuroButton extends AuroElement$3 {
25658
25811
  <slot></slot>
25659
25812
  </span>
25660
25813
  </span>
25661
- </button>
25814
+ </${tag}>
25662
25815
  `;
25663
25816
  }
25664
25817
 
25665
25818
  /**
25666
- * Renders the layout of the button
25819
+ * Renders the layout of the button.
25667
25820
  * @returns {TemplateResult}
25668
25821
  * @private
25669
25822
  */