@aurodesignsystem-dev/auro-formkit 0.0.0-pr785.0 → 0.0.0-pr785.2

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 (63) hide show
  1. package/components/checkbox/demo/api.html +16 -10
  2. package/components/checkbox/demo/api.min.js +2 -2
  3. package/components/checkbox/demo/index.html +16 -10
  4. package/components/checkbox/demo/index.min.js +2 -2
  5. package/components/checkbox/demo/readme.html +16 -9
  6. package/components/checkbox/dist/index.js +2 -2
  7. package/components/checkbox/dist/registered.js +2 -2
  8. package/components/combobox/demo/api.html +16 -10
  9. package/components/combobox/demo/api.min.js +27 -15
  10. package/components/combobox/demo/index.html +16 -10
  11. package/components/combobox/demo/index.min.js +27 -15
  12. package/components/combobox/demo/readme.html +16 -9
  13. package/components/combobox/dist/index.js +27 -15
  14. package/components/combobox/dist/registered.js +27 -15
  15. package/components/counter/demo/api.html +16 -10
  16. package/components/counter/demo/api.min.js +25 -13
  17. package/components/counter/demo/index.html +16 -10
  18. package/components/counter/demo/index.min.js +25 -13
  19. package/components/counter/demo/readme.html +16 -9
  20. package/components/counter/dist/index.js +25 -13
  21. package/components/counter/dist/registered.js +25 -13
  22. package/components/datepicker/demo/api.html +16 -10
  23. package/components/datepicker/demo/api.min.js +37 -15
  24. package/components/datepicker/demo/index.html +16 -10
  25. package/components/datepicker/demo/index.min.js +37 -15
  26. package/components/datepicker/demo/readme.html +16 -9
  27. package/components/datepicker/dist/index.js +37 -15
  28. package/components/datepicker/dist/registered.js +37 -15
  29. package/components/dropdown/demo/api.html +16 -10
  30. package/components/dropdown/demo/api.md +7 -6
  31. package/components/dropdown/demo/api.min.js +25 -13
  32. package/components/dropdown/demo/index.html +16 -10
  33. package/components/dropdown/demo/index.min.js +25 -13
  34. package/components/dropdown/demo/readme.html +16 -9
  35. package/components/dropdown/dist/auro-dropdown.d.ts +1 -0
  36. package/components/dropdown/dist/index.js +25 -13
  37. package/components/dropdown/dist/registered.js +25 -13
  38. package/components/form/demo/api.html +16 -9
  39. package/components/form/demo/autocomplete.html +19 -3
  40. package/components/form/demo/index.html +16 -9
  41. package/components/form/demo/readme.html +16 -9
  42. package/components/form/demo/working.html +19 -13
  43. package/components/input/demo/api.html +16 -10
  44. package/components/input/demo/api.min.js +2 -2
  45. package/components/input/demo/index.html +16 -10
  46. package/components/input/demo/index.min.js +2 -2
  47. package/components/input/demo/readme.html +16 -9
  48. package/components/input/dist/index.js +2 -2
  49. package/components/input/dist/registered.js +2 -2
  50. package/components/menu/demo/api.html +16 -32
  51. package/components/menu/demo/index.html +16 -10
  52. package/components/menu/demo/readme.html +16 -9
  53. package/components/radio/demo/api.html +16 -10
  54. package/components/radio/demo/index.html +16 -10
  55. package/components/radio/demo/readme.html +16 -9
  56. package/components/select/demo/api.html +16 -10
  57. package/components/select/demo/api.min.js +25 -13
  58. package/components/select/demo/index.html +16 -11
  59. package/components/select/demo/index.min.js +25 -13
  60. package/components/select/demo/readme.html +16 -9
  61. package/components/select/dist/index.js +25 -13
  62. package/components/select/dist/registered.js +25 -13
  63. package/package.json +4 -3
package/components/select/demo/index.min.js CHANGED
@@ -2940,7 +2940,7 @@ class AuroFloatingUI {
2940
2940
  return;
2941
2941
  }
2942
2942
 
2943
- this.hideBib();
2943
+ this.hideBib("keydown");
2944
2944
  }
2945
2945
 
2946
2946
  setupHideHandlers() {
@@ -2965,7 +2965,7 @@ class AuroFloatingUI {
2965
2965
  document.expandedAuroFormkitDropdown = null;
2966
2966
  document.expandedAuroFloater = this;
2967
2967
  } else {
2968
- this.hideBib();
2968
+ this.hideBib("click");
2969
2969
  }
2970
2970
  }
2971
2971
  };
@@ -2978,7 +2978,7 @@ class AuroFloatingUI {
2978
2978
  // if something else is open, let it handle itself
2979
2979
  return;
2980
2980
  }
2981
- this.hideBib();
2981
+ this.hideBib("keydown");
2982
2982
  }
2983
2983
  };
2984
2984
 
@@ -3061,7 +3061,11 @@ class AuroFloatingUI {
3061
3061
  }
3062
3062
  }
3063
3063
 
3064
- hideBib() {
3064
+ /**
3065
+ * Hides the floating UI element.
3066
+ * @param {String} eventType - The event type that triggered the hiding action.
3067
+ */
3068
+ hideBib(eventType = "unknown") {
3065
3069
  if (!this.element.disabled && !this.element.noToggle) {
3066
3070
  this.lockScroll(false);
3067
3071
  this.element.triggerChevron?.removeAttribute('data-expanded');
@@ -3072,7 +3076,7 @@ class AuroFloatingUI {
3072
3076
  if (this.showing) {
3073
3077
  this.cleanupHideHandlers();
3074
3078
  this.showing = false;
3075
- this.dispatchEventDropdownToggle();
3079
+ this.dispatchEventDropdownToggle(eventType);
3076
3080
  }
3077
3081
  }
3078
3082
  document.expandedAuroFloater = null;
@@ -3081,11 +3085,13 @@ class AuroFloatingUI {
3081
3085
  /**
3082
3086
  * @private
3083
3087
  * @returns {void} Dispatches event with an object showing the state of the dropdown.
3088
+ * @param {String} eventType - The event type that triggered the toggle action.
3084
3089
  */
3085
- dispatchEventDropdownToggle() {
3090
+ dispatchEventDropdownToggle(eventType) {
3086
3091
  const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
3087
3092
  detail: {
3088
3093
  expanded: this.showing,
3094
+ eventType: eventType || "unknown",
3089
3095
  },
3090
3096
  composed: true
3091
3097
  });
@@ -3095,7 +3101,7 @@ class AuroFloatingUI {
3095
3101
 
3096
3102
  handleClick() {
3097
3103
  if (this.element.isPopoverVisible) {
3098
- this.hideBib();
3104
+ this.hideBib("click");
3099
3105
  } else {
3100
3106
  this.showBib();
3101
3107
  }
@@ -3131,7 +3137,7 @@ class AuroFloatingUI {
3131
3137
  break;
3132
3138
  case 'mouseleave':
3133
3139
  if (this.element.hoverToggle) {
3134
- this.hideBib();
3140
+ this.hideBib("mouseleave");
3135
3141
  }
3136
3142
  break;
3137
3143
  case 'focus':
@@ -4519,6 +4525,9 @@ class AuroDropdown extends AuroElement$3 {
4519
4525
 
4520
4526
  this.parentBorder = false;
4521
4527
 
4528
+ /** @private */
4529
+ this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
4530
+
4522
4531
  this.privateDefaults();
4523
4532
  }
4524
4533
 
@@ -4952,12 +4961,14 @@ class AuroDropdown extends AuroElement$3 {
4952
4961
  if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
4953
4962
  this.handleTriggerContentSlotChange();
4954
4963
  }
4964
+ }
4955
4965
 
4956
- if (changedProperties.has('isPopoverVisible')) {
4957
- this.updateFocusTrap();
4958
- if (!this.isPopoverVisible && this.hasFocus) {
4959
- this.trigger.focus();
4960
- }
4966
+ handleDropdownToggle(event) {
4967
+ this.updateFocusTrap();
4968
+ this.isPopoverVisible = event.detail.expanded;
4969
+ const eventType = event.detail.eventType || "unknown";
4970
+ if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
4971
+ this.trigger.focus();
4961
4972
  }
4962
4973
  }
4963
4974
 
@@ -4965,6 +4976,7 @@ class AuroDropdown extends AuroElement$3 {
4965
4976
 
4966
4977
  // Configure the floater to, this will generate the ID for the bib
4967
4978
  this.floater.configure(this, 'auroDropdown');
4979
+ this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
4968
4980
 
4969
4981
  /**
4970
4982
  * @description Let subscribers know that the dropdown ID ha been generated and added.
package/components/select/demo/readme.html CHANGED
@@ -16,17 +16,24 @@
16
16
  <head>
17
17
  <meta charset="UTF-8" />
18
18
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
19
- <title>Auro Web Component Generator | auro-select custom element</title>
20
- <link
21
- rel="stylesheet"
22
- type="text/css"
23
- href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
24
- />
25
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css">
26
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
19
+ <title>Auro Web Component Demo | auro-select</title>
20
+
21
+ <!-- Prism.js Stylesheet -->
22
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
23
+
24
+ <!-- Legacy reference is still needed to support auro-select's use of legacy token values at this time -->
25
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
26
+
27
+ <!-- Design Token Alaska Theme -->
28
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
29
+
30
+ <!-- Webcore Stylesheet Alaska Theme -->
31
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
32
+
33
+ <!-- Demo Specific Styles -->
27
34
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
28
35
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
29
- </head>
36
+ </head>
30
37
  <body class="auro-markdown">
31
38
  <main></main>
32
39
 
package/components/select/dist/index.js CHANGED
@@ -2894,7 +2894,7 @@ class AuroFloatingUI {
2894
2894
  return;
2895
2895
  }
2896
2896
 
2897
- this.hideBib();
2897
+ this.hideBib("keydown");
2898
2898
  }
2899
2899
 
2900
2900
  setupHideHandlers() {
@@ -2919,7 +2919,7 @@ class AuroFloatingUI {
2919
2919
  document.expandedAuroFormkitDropdown = null;
2920
2920
  document.expandedAuroFloater = this;
2921
2921
  } else {
2922
- this.hideBib();
2922
+ this.hideBib("click");
2923
2923
  }
2924
2924
  }
2925
2925
  };
@@ -2932,7 +2932,7 @@ class AuroFloatingUI {
2932
2932
  // if something else is open, let it handle itself
2933
2933
  return;
2934
2934
  }
2935
- this.hideBib();
2935
+ this.hideBib("keydown");
2936
2936
  }
2937
2937
  };
2938
2938
 
@@ -3015,7 +3015,11 @@ class AuroFloatingUI {
3015
3015
  }
3016
3016
  }
3017
3017
 
3018
- hideBib() {
3018
+ /**
3019
+ * Hides the floating UI element.
3020
+ * @param {String} eventType - The event type that triggered the hiding action.
3021
+ */
3022
+ hideBib(eventType = "unknown") {
3019
3023
  if (!this.element.disabled && !this.element.noToggle) {
3020
3024
  this.lockScroll(false);
3021
3025
  this.element.triggerChevron?.removeAttribute('data-expanded');
@@ -3026,7 +3030,7 @@ class AuroFloatingUI {
3026
3030
  if (this.showing) {
3027
3031
  this.cleanupHideHandlers();
3028
3032
  this.showing = false;
3029
- this.dispatchEventDropdownToggle();
3033
+ this.dispatchEventDropdownToggle(eventType);
3030
3034
  }
3031
3035
  }
3032
3036
  document.expandedAuroFloater = null;
@@ -3035,11 +3039,13 @@ class AuroFloatingUI {
3035
3039
  /**
3036
3040
  * @private
3037
3041
  * @returns {void} Dispatches event with an object showing the state of the dropdown.
3042
+ * @param {String} eventType - The event type that triggered the toggle action.
3038
3043
  */
3039
- dispatchEventDropdownToggle() {
3044
+ dispatchEventDropdownToggle(eventType) {
3040
3045
  const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
3041
3046
  detail: {
3042
3047
  expanded: this.showing,
3048
+ eventType: eventType || "unknown",
3043
3049
  },
3044
3050
  composed: true
3045
3051
  });
@@ -3049,7 +3055,7 @@ class AuroFloatingUI {
3049
3055
 
3050
3056
  handleClick() {
3051
3057
  if (this.element.isPopoverVisible) {
3052
- this.hideBib();
3058
+ this.hideBib("click");
3053
3059
  } else {
3054
3060
  this.showBib();
3055
3061
  }
@@ -3085,7 +3091,7 @@ class AuroFloatingUI {
3085
3091
  break;
3086
3092
  case 'mouseleave':
3087
3093
  if (this.element.hoverToggle) {
3088
- this.hideBib();
3094
+ this.hideBib("mouseleave");
3089
3095
  }
3090
3096
  break;
3091
3097
  case 'focus':
@@ -4473,6 +4479,9 @@ class AuroDropdown extends AuroElement$2 {
4473
4479
 
4474
4480
  this.parentBorder = false;
4475
4481
 
4482
+ /** @private */
4483
+ this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
4484
+
4476
4485
  this.privateDefaults();
4477
4486
  }
4478
4487
 
@@ -4906,12 +4915,14 @@ class AuroDropdown extends AuroElement$2 {
4906
4915
  if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
4907
4916
  this.handleTriggerContentSlotChange();
4908
4917
  }
4918
+ }
4909
4919
 
4910
- if (changedProperties.has('isPopoverVisible')) {
4911
- this.updateFocusTrap();
4912
- if (!this.isPopoverVisible && this.hasFocus) {
4913
- this.trigger.focus();
4914
- }
4920
+ handleDropdownToggle(event) {
4921
+ this.updateFocusTrap();
4922
+ this.isPopoverVisible = event.detail.expanded;
4923
+ const eventType = event.detail.eventType || "unknown";
4924
+ if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
4925
+ this.trigger.focus();
4915
4926
  }
4916
4927
  }
4917
4928
 
@@ -4919,6 +4930,7 @@ class AuroDropdown extends AuroElement$2 {
4919
4930
 
4920
4931
  // Configure the floater to, this will generate the ID for the bib
4921
4932
  this.floater.configure(this, 'auroDropdown');
4933
+ this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
4922
4934
 
4923
4935
  /**
4924
4936
  * @description Let subscribers know that the dropdown ID ha been generated and added.
package/components/select/dist/registered.js CHANGED
@@ -2894,7 +2894,7 @@ class AuroFloatingUI {
2894
2894
  return;
2895
2895
  }
2896
2896
 
2897
- this.hideBib();
2897
+ this.hideBib("keydown");
2898
2898
  }
2899
2899
 
2900
2900
  setupHideHandlers() {
@@ -2919,7 +2919,7 @@ class AuroFloatingUI {
2919
2919
  document.expandedAuroFormkitDropdown = null;
2920
2920
  document.expandedAuroFloater = this;
2921
2921
  } else {
2922
- this.hideBib();
2922
+ this.hideBib("click");
2923
2923
  }
2924
2924
  }
2925
2925
  };
@@ -2932,7 +2932,7 @@ class AuroFloatingUI {
2932
2932
  // if something else is open, let it handle itself
2933
2933
  return;
2934
2934
  }
2935
- this.hideBib();
2935
+ this.hideBib("keydown");
2936
2936
  }
2937
2937
  };
2938
2938
 
@@ -3015,7 +3015,11 @@ class AuroFloatingUI {
3015
3015
  }
3016
3016
  }
3017
3017
 
3018
- hideBib() {
3018
+ /**
3019
+ * Hides the floating UI element.
3020
+ * @param {String} eventType - The event type that triggered the hiding action.
3021
+ */
3022
+ hideBib(eventType = "unknown") {
3019
3023
  if (!this.element.disabled && !this.element.noToggle) {
3020
3024
  this.lockScroll(false);
3021
3025
  this.element.triggerChevron?.removeAttribute('data-expanded');
@@ -3026,7 +3030,7 @@ class AuroFloatingUI {
3026
3030
  if (this.showing) {
3027
3031
  this.cleanupHideHandlers();
3028
3032
  this.showing = false;
3029
- this.dispatchEventDropdownToggle();
3033
+ this.dispatchEventDropdownToggle(eventType);
3030
3034
  }
3031
3035
  }
3032
3036
  document.expandedAuroFloater = null;
@@ -3035,11 +3039,13 @@ class AuroFloatingUI {
3035
3039
  /**
3036
3040
  * @private
3037
3041
  * @returns {void} Dispatches event with an object showing the state of the dropdown.
3042
+ * @param {String} eventType - The event type that triggered the toggle action.
3038
3043
  */
3039
- dispatchEventDropdownToggle() {
3044
+ dispatchEventDropdownToggle(eventType) {
3040
3045
  const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
3041
3046
  detail: {
3042
3047
  expanded: this.showing,
3048
+ eventType: eventType || "unknown",
3043
3049
  },
3044
3050
  composed: true
3045
3051
  });
@@ -3049,7 +3055,7 @@ class AuroFloatingUI {
3049
3055
 
3050
3056
  handleClick() {
3051
3057
  if (this.element.isPopoverVisible) {
3052
- this.hideBib();
3058
+ this.hideBib("click");
3053
3059
  } else {
3054
3060
  this.showBib();
3055
3061
  }
@@ -3085,7 +3091,7 @@ class AuroFloatingUI {
3085
3091
  break;
3086
3092
  case 'mouseleave':
3087
3093
  if (this.element.hoverToggle) {
3088
- this.hideBib();
3094
+ this.hideBib("mouseleave");
3089
3095
  }
3090
3096
  break;
3091
3097
  case 'focus':
@@ -4473,6 +4479,9 @@ class AuroDropdown extends AuroElement$2 {
4473
4479
 
4474
4480
  this.parentBorder = false;
4475
4481
 
4482
+ /** @private */
4483
+ this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
4484
+
4476
4485
  this.privateDefaults();
4477
4486
  }
4478
4487
 
@@ -4906,12 +4915,14 @@ class AuroDropdown extends AuroElement$2 {
4906
4915
  if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
4907
4916
  this.handleTriggerContentSlotChange();
4908
4917
  }
4918
+ }
4909
4919
 
4910
- if (changedProperties.has('isPopoverVisible')) {
4911
- this.updateFocusTrap();
4912
- if (!this.isPopoverVisible && this.hasFocus) {
4913
- this.trigger.focus();
4914
- }
4920
+ handleDropdownToggle(event) {
4921
+ this.updateFocusTrap();
4922
+ this.isPopoverVisible = event.detail.expanded;
4923
+ const eventType = event.detail.eventType || "unknown";
4924
+ if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
4925
+ this.trigger.focus();
4915
4926
  }
4916
4927
  }
4917
4928
 
@@ -4919,6 +4930,7 @@ class AuroDropdown extends AuroElement$2 {
4919
4930
 
4920
4931
  // Configure the floater to, this will generate the ID for the bib
4921
4932
  this.floater.configure(this, 'auroDropdown');
4933
+ this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
4922
4934
 
4923
4935
  /**
4924
4936
  * @description Let subscribers know that the dropdown ID ha been generated and added.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aurodesignsystem-dev/auro-formkit",
3
- "version": "0.0.0-pr785.0",
3
+ "version": "0.0.0-pr785.2",
4
4
  "description": "A collection of web components used to build forms.",
5
5
  "homepage": "https://github.com/AlaskaAirlines/auro-formkit#readme",
6
6
  "bugs": {
@@ -49,10 +49,11 @@
49
49
  "sweep": "find ./components ./packages -type d -name 'dist' -exec rm -rf {} + && find ./ -type d -name '.turbo' -exec rm -rf {} + && find ./components ./packages -not -path '*/node_modules/*' -type f \\( -name '*.css' -o -name '*-css.js' \\) -delete",
50
50
  "preCommit": "node ./node_modules/@aurodesignsystem/auro-library/scripts/build/pre-commit.mjs",
51
51
  "prepare": "husky",
52
- "deploy-demo": "npm run build && sh ./deploy-components.sh"
52
+ "deploy-demo": "npm run build && sh ./deploy-components.sh",
53
+ "local-demo": "npm run build && sh ./local-demo.sh --zip"
53
54
  },
54
55
  "dependencies": {
55
- "@aurodesignsystem/auro-library": "^5.2.3",
56
+ "@aurodesignsystem/auro-library": "^5.3.0",
56
57
  "@lit/reactive-element": "^2.1.0",
57
58
  "lit": "^3.2.1"
58
59
  },