@aurodesignsystem-dev/auro-formkit 0.0.0-pr1012.1 → 0.0.0-pr1012.3

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 (47) hide show
  1. package/components/bibtemplate/dist/iconVersion.d.ts +1 -1
  2. package/components/bibtemplate/dist/index.js +14 -9
  3. package/components/bibtemplate/dist/registered.js +14 -9
  4. package/components/checkbox/demo/api.min.js +37 -9
  5. package/components/checkbox/demo/index.min.js +37 -9
  6. package/components/checkbox/dist/auro-checkbox.d.ts +7 -0
  7. package/components/checkbox/dist/index.js +37 -9
  8. package/components/checkbox/dist/registered.js +37 -9
  9. package/components/combobox/demo/api.md +52 -0
  10. package/components/combobox/demo/api.min.js +78 -54
  11. package/components/combobox/demo/index.min.js +78 -54
  12. package/components/combobox/dist/auro-combobox.d.ts +1 -0
  13. package/components/combobox/dist/index.js +64 -45
  14. package/components/combobox/dist/registered.js +64 -45
  15. package/components/counter/demo/api.min.js +61 -41
  16. package/components/counter/demo/index.min.js +61 -41
  17. package/components/counter/dist/iconVersion.d.ts +1 -1
  18. package/components/counter/dist/index.js +61 -41
  19. package/components/counter/dist/registered.js +61 -41
  20. package/components/datepicker/demo/api.min.js +75 -53
  21. package/components/datepicker/demo/index.min.js +75 -53
  22. package/components/datepicker/dist/index.js +75 -53
  23. package/components/datepicker/dist/registered.js +75 -53
  24. package/components/dropdown/demo/api.min.js +14 -9
  25. package/components/dropdown/demo/index.min.js +14 -9
  26. package/components/dropdown/dist/index.js +14 -9
  27. package/components/dropdown/dist/registered.js +14 -9
  28. package/components/input/demo/api.min.js +22 -17
  29. package/components/input/demo/index.min.js +22 -17
  30. package/components/input/dist/index.js +22 -17
  31. package/components/input/dist/registered.js +22 -17
  32. package/components/menu/demo/api.min.js +14 -9
  33. package/components/menu/demo/index.min.js +14 -9
  34. package/components/menu/dist/iconVersion.d.ts +1 -1
  35. package/components/menu/dist/index.js +14 -9
  36. package/components/menu/dist/registered.js +14 -9
  37. package/components/radio/demo/api.min.js +9 -9
  38. package/components/radio/demo/index.min.js +9 -9
  39. package/components/radio/dist/index.js +9 -9
  40. package/components/radio/dist/registered.js +9 -9
  41. package/components/select/demo/api.md +50 -1
  42. package/components/select/demo/api.min.js +54 -45
  43. package/components/select/demo/index.min.js +54 -45
  44. package/components/select/dist/auro-select.d.ts +2 -7
  45. package/components/select/dist/index.js +40 -36
  46. package/components/select/dist/registered.js +40 -36
  47. package/package.json +1 -1
@@ -1,2 +1,2 @@
1
- declare const _default: "8.1.1";
1
+ declare const _default: "8.1.2";
2
2
  export default _default;
@@ -1249,7 +1249,7 @@ class AuroElement extends LitElement {
1249
1249
  }
1250
1250
  }
1251
1251
 
1252
- var error = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"error__desc\" class=\"ico_squareLarge\" data-deprecated=\"true\" 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=\"error__desc\">Error alert indicator.</desc><path d=\"m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583\"/></svg>"};
1252
+ var error = {"role":"img","color":"currentColor","title":"","desc":"Error alert indicator.","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":"error","category":"alert","deprecated":true,"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"error__desc\" class=\"ico_squareLarge\" data-deprecated=\"true\" 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=\"error__desc\">Error alert indicator.</desc><path d=\"m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583\"/></svg>"};
1253
1253
 
1254
1254
  /* eslint-disable no-underscore-dangle, jsdoc/no-undefined-types, jsdoc/require-param-description */
1255
1255
 
@@ -1349,16 +1349,21 @@ class BaseIcon extends AuroElement {
1349
1349
 
1350
1350
  // lifecycle function
1351
1351
  async firstUpdated() {
1352
- if (!this.customSvg) {
1353
- const svg = await this.fetchIcon(this.category, this.name);
1352
+ try {
1353
+ if (!this.customSvg) {
1354
+ const svg = await this.fetchIcon(this.category, this.name);
1354
1355
 
1355
- if (svg) {
1356
- this.svg = svg;
1357
- } else if (!svg) {
1358
- const penDOM = new DOMParser().parseFromString(error.svg, 'text/html');
1356
+ if (svg) {
1357
+ this.svg = svg;
1358
+ } else if (!svg) {
1359
+ const penDOM = new DOMParser().parseFromString(error.svg, 'text/html');
1359
1360
 
1360
- this.svg = penDOM.body.firstChild;
1361
+ this.svg = penDOM.body.firstChild;
1362
+ }
1361
1363
  }
1364
+ // eslint-disable-next-line no-unused-vars
1365
+ } catch (err) {
1366
+ this.svg = undefined;
1362
1367
  }
1363
1368
  }
1364
1369
  }
@@ -1609,7 +1614,7 @@ class AuroIcon extends BaseIcon {
1609
1614
  }
1610
1615
  }
1611
1616
 
1612
- var iconVersion = '8.1.1';
1617
+ var iconVersion = '8.1.2';
1613
1618
 
1614
1619
  var styleCss = css`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.63)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, 0.88)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3)}:host([no-margin-block]) .heading{margin-block:0}.util_stackMarginnone--bottom{margin-bottom:0}.util_stackMargin25--bottom{margin-bottom:var(--ds-size-25, 0.125rem)}.util_stackMargin50--bottom{margin-bottom:var(--ds-size-50, 0.25rem)}.util_stackMargin100--bottom{margin-bottom:var(--ds-size-100, 0.5rem)}.util_stackMargin150--bottom{margin-bottom:var(--ds-size-150, 0.75rem)}.util_stackMargin200--bottom{margin-bottom:var(--ds-size-200, 1rem)}.util_stackMargin300--bottom{margin-bottom:var(--ds-size-300, 1.5rem)}.util_stackMargin400--bottom{margin-bottom:var(--ds-size-400, 2rem)}.util_stackMargin600--bottom{margin-bottom:var(--ds-size-600, 3rem)}.util_stackMargin800--bottom{margin-bottom:var(--ds-size-800, 4rem)}.util_stackMarginnone--top{margin-top:0}.util_stackMargin25--top{margin-top:var(--ds-size-25, 0.125rem)}.util_stackMargin50--top{margin-top:var(--ds-size-50, 0.25rem)}.util_stackMargin100--top{margin-top:var(--ds-size-100, 0.5rem)}.util_stackMargin150--top{margin-top:var(--ds-size-150, 0.75rem)}.util_stackMargin200--top{margin-top:var(--ds-size-200, 1rem)}.util_stackMargin300--top{margin-top:var(--ds-size-300, 1.5rem)}.util_stackMargin400--top{margin-top:var(--ds-size-400, 2rem)}.util_stackMargin600--top{margin-top:var(--ds-size-600, 3rem)}.util_stackMargin800--top{margin-top:var(--ds-size-800, 4rem)}`;
1615
1620
 
@@ -1249,7 +1249,7 @@ class AuroElement extends LitElement {
1249
1249
  }
1250
1250
  }
1251
1251
 
1252
- var error = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"error__desc\" class=\"ico_squareLarge\" data-deprecated=\"true\" 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=\"error__desc\">Error alert indicator.</desc><path d=\"m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583\"/></svg>"};
1252
+ var error = {"role":"img","color":"currentColor","title":"","desc":"Error alert indicator.","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":"error","category":"alert","deprecated":true,"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"error__desc\" class=\"ico_squareLarge\" data-deprecated=\"true\" 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=\"error__desc\">Error alert indicator.</desc><path d=\"m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583\"/></svg>"};
1253
1253
 
1254
1254
  /* eslint-disable no-underscore-dangle, jsdoc/no-undefined-types, jsdoc/require-param-description */
1255
1255
 
@@ -1349,16 +1349,21 @@ class BaseIcon extends AuroElement {
1349
1349
 
1350
1350
  // lifecycle function
1351
1351
  async firstUpdated() {
1352
- if (!this.customSvg) {
1353
- const svg = await this.fetchIcon(this.category, this.name);
1352
+ try {
1353
+ if (!this.customSvg) {
1354
+ const svg = await this.fetchIcon(this.category, this.name);
1354
1355
 
1355
- if (svg) {
1356
- this.svg = svg;
1357
- } else if (!svg) {
1358
- const penDOM = new DOMParser().parseFromString(error.svg, 'text/html');
1356
+ if (svg) {
1357
+ this.svg = svg;
1358
+ } else if (!svg) {
1359
+ const penDOM = new DOMParser().parseFromString(error.svg, 'text/html');
1359
1360
 
1360
- this.svg = penDOM.body.firstChild;
1361
+ this.svg = penDOM.body.firstChild;
1362
+ }
1361
1363
  }
1364
+ // eslint-disable-next-line no-unused-vars
1365
+ } catch (err) {
1366
+ this.svg = undefined;
1362
1367
  }
1363
1368
  }
1364
1369
  }
@@ -1609,7 +1614,7 @@ class AuroIcon extends BaseIcon {
1609
1614
  }
1610
1615
  }
1611
1616
 
1612
- var iconVersion = '8.1.1';
1617
+ var iconVersion = '8.1.2';
1613
1618
 
1614
1619
  var styleCss = css`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.63)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, 0.88)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3)}:host([no-margin-block]) .heading{margin-block:0}.util_stackMarginnone--bottom{margin-bottom:0}.util_stackMargin25--bottom{margin-bottom:var(--ds-size-25, 0.125rem)}.util_stackMargin50--bottom{margin-bottom:var(--ds-size-50, 0.25rem)}.util_stackMargin100--bottom{margin-bottom:var(--ds-size-100, 0.5rem)}.util_stackMargin150--bottom{margin-bottom:var(--ds-size-150, 0.75rem)}.util_stackMargin200--bottom{margin-bottom:var(--ds-size-200, 1rem)}.util_stackMargin300--bottom{margin-bottom:var(--ds-size-300, 1.5rem)}.util_stackMargin400--bottom{margin-bottom:var(--ds-size-400, 2rem)}.util_stackMargin600--bottom{margin-bottom:var(--ds-size-600, 3rem)}.util_stackMargin800--bottom{margin-bottom:var(--ds-size-800, 4rem)}.util_stackMarginnone--top{margin-top:0}.util_stackMargin25--top{margin-top:var(--ds-size-25, 0.125rem)}.util_stackMargin50--top{margin-top:var(--ds-size-50, 0.25rem)}.util_stackMargin100--top{margin-top:var(--ds-size-100, 0.5rem)}.util_stackMargin150--top{margin-top:var(--ds-size-150, 0.75rem)}.util_stackMargin200--top{margin-top:var(--ds-size-200, 1rem)}.util_stackMargin300--top{margin-top:var(--ds-size-300, 1.5rem)}.util_stackMargin400--top{margin-top:var(--ds-size-400, 2rem)}.util_stackMargin600--top{margin-top:var(--ds-size-600, 3rem)}.util_stackMargin800--top{margin-top:var(--ds-size-800, 4rem)}`;
1615
1620
 
@@ -129,6 +129,7 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
129
129
  }
130
130
  };
131
131
 
132
+ /* eslint-disable max-lines */
132
133
  // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
133
134
  // See LICENSE in the project root for license information.
134
135
 
@@ -367,6 +368,33 @@ class AuroCheckbox extends i$2 {
367
368
  });
368
369
  }
369
370
 
371
+ connectedCallback() {
372
+ super.connectedCallback();
373
+
374
+ this.handleKeyDown = this.handleKeyDown.bind(this);
375
+ this.addEventListener('keydown', this.handleKeyDown);
376
+ }
377
+
378
+ disconnectedCallback() {
379
+ super.disconnectedCallback();
380
+
381
+ this.removeEventListener('keydown', this.handleKeyDown);
382
+ }
383
+
384
+ /**
385
+ * Handles keydown event to toggle the checkbox with Space key.
386
+ * @private
387
+ * @param {KeyboardEvent} event - The keydown event from the checkbox input.
388
+ * @returns {void}
389
+ */
390
+ handleKeyDown(event) {
391
+ if (event.key === ' ' && !this.disabled) {
392
+ event.preventDefault();
393
+
394
+ this.shadowRoot.querySelector('input').click();
395
+ }
396
+ }
397
+
370
398
  /**
371
399
  * @private
372
400
  * @returns {HTMLElement}
@@ -1132,16 +1160,16 @@ class AuroFormValidation {
1132
1160
  }
1133
1161
 
1134
1162
  this.getErrorMessage(elem);
1135
-
1136
- elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
1137
- bubbles: true,
1138
- composed: true,
1139
- detail: {
1140
- validity: elem.validity,
1141
- message: elem.errorMessage
1142
- }
1143
- }));
1144
1163
  }
1164
+
1165
+ elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
1166
+ bubbles: true,
1167
+ composed: true,
1168
+ detail: {
1169
+ validity: elem.validity,
1170
+ message: elem.errorMessage
1171
+ }
1172
+ }));
1145
1173
  }
1146
1174
 
1147
1175
  /**
@@ -121,6 +121,7 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
121
121
  }
122
122
  };
123
123
 
124
+ /* eslint-disable max-lines */
124
125
  // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
125
126
  // See LICENSE in the project root for license information.
126
127
 
@@ -359,6 +360,33 @@ class AuroCheckbox extends i$2 {
359
360
  });
360
361
  }
361
362
 
363
+ connectedCallback() {
364
+ super.connectedCallback();
365
+
366
+ this.handleKeyDown = this.handleKeyDown.bind(this);
367
+ this.addEventListener('keydown', this.handleKeyDown);
368
+ }
369
+
370
+ disconnectedCallback() {
371
+ super.disconnectedCallback();
372
+
373
+ this.removeEventListener('keydown', this.handleKeyDown);
374
+ }
375
+
376
+ /**
377
+ * Handles keydown event to toggle the checkbox with Space key.
378
+ * @private
379
+ * @param {KeyboardEvent} event - The keydown event from the checkbox input.
380
+ * @returns {void}
381
+ */
382
+ handleKeyDown(event) {
383
+ if (event.key === ' ' && !this.disabled) {
384
+ event.preventDefault();
385
+
386
+ this.shadowRoot.querySelector('input').click();
387
+ }
388
+ }
389
+
362
390
  /**
363
391
  * @private
364
392
  * @returns {HTMLElement}
@@ -1124,16 +1152,16 @@ class AuroFormValidation {
1124
1152
  }
1125
1153
 
1126
1154
  this.getErrorMessage(elem);
1127
-
1128
- elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
1129
- bubbles: true,
1130
- composed: true,
1131
- detail: {
1132
- validity: elem.validity,
1133
- message: elem.errorMessage
1134
- }
1135
- }));
1136
1155
  }
1156
+
1157
+ elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
1158
+ bubbles: true,
1159
+ composed: true,
1160
+ detail: {
1161
+ validity: elem.validity,
1162
+ message: elem.errorMessage
1163
+ }
1164
+ }));
1137
1165
  }
1138
1166
 
1139
1167
  /**
@@ -127,6 +127,13 @@ export class AuroCheckbox extends LitElement {
127
127
  reset(): void;
128
128
  firstUpdated(): void;
129
129
  inputId: string;
130
+ /**
131
+ * Handles keydown event to toggle the checkbox with Space key.
132
+ * @private
133
+ * @param {KeyboardEvent} event - The keydown event from the checkbox input.
134
+ * @returns {void}
135
+ */
136
+ private handleKeyDown;
130
137
  /**
131
138
  * @private
132
139
  * @returns {HTMLElement}
@@ -81,6 +81,7 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
81
81
  }
82
82
  };
83
83
 
84
+ /* eslint-disable max-lines */
84
85
  // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
85
86
  // See LICENSE in the project root for license information.
86
87
 
@@ -319,6 +320,33 @@ class AuroCheckbox extends LitElement {
319
320
  });
320
321
  }
321
322
 
323
+ connectedCallback() {
324
+ super.connectedCallback();
325
+
326
+ this.handleKeyDown = this.handleKeyDown.bind(this);
327
+ this.addEventListener('keydown', this.handleKeyDown);
328
+ }
329
+
330
+ disconnectedCallback() {
331
+ super.disconnectedCallback();
332
+
333
+ this.removeEventListener('keydown', this.handleKeyDown);
334
+ }
335
+
336
+ /**
337
+ * Handles keydown event to toggle the checkbox with Space key.
338
+ * @private
339
+ * @param {KeyboardEvent} event - The keydown event from the checkbox input.
340
+ * @returns {void}
341
+ */
342
+ handleKeyDown(event) {
343
+ if (event.key === ' ' && !this.disabled) {
344
+ event.preventDefault();
345
+
346
+ this.shadowRoot.querySelector('input').click();
347
+ }
348
+ }
349
+
322
350
  /**
323
351
  * @private
324
352
  * @returns {HTMLElement}
@@ -1077,16 +1105,16 @@ class AuroFormValidation {
1077
1105
  }
1078
1106
 
1079
1107
  this.getErrorMessage(elem);
1080
-
1081
- elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
1082
- bubbles: true,
1083
- composed: true,
1084
- detail: {
1085
- validity: elem.validity,
1086
- message: elem.errorMessage
1087
- }
1088
- }));
1089
1108
  }
1109
+
1110
+ elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
1111
+ bubbles: true,
1112
+ composed: true,
1113
+ detail: {
1114
+ validity: elem.validity,
1115
+ message: elem.errorMessage
1116
+ }
1117
+ }));
1090
1118
  }
1091
1119
 
1092
1120
  /**
@@ -81,6 +81,7 @@ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
81
81
  }
82
82
  };
83
83
 
84
+ /* eslint-disable max-lines */
84
85
  // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
85
86
  // See LICENSE in the project root for license information.
86
87
 
@@ -319,6 +320,33 @@ class AuroCheckbox extends LitElement {
319
320
  });
320
321
  }
321
322
 
323
+ connectedCallback() {
324
+ super.connectedCallback();
325
+
326
+ this.handleKeyDown = this.handleKeyDown.bind(this);
327
+ this.addEventListener('keydown', this.handleKeyDown);
328
+ }
329
+
330
+ disconnectedCallback() {
331
+ super.disconnectedCallback();
332
+
333
+ this.removeEventListener('keydown', this.handleKeyDown);
334
+ }
335
+
336
+ /**
337
+ * Handles keydown event to toggle the checkbox with Space key.
338
+ * @private
339
+ * @param {KeyboardEvent} event - The keydown event from the checkbox input.
340
+ * @returns {void}
341
+ */
342
+ handleKeyDown(event) {
343
+ if (event.key === ' ' && !this.disabled) {
344
+ event.preventDefault();
345
+
346
+ this.shadowRoot.querySelector('input').click();
347
+ }
348
+ }
349
+
322
350
  /**
323
351
  * @private
324
352
  * @returns {HTMLElement}
@@ -1077,16 +1105,16 @@ class AuroFormValidation {
1077
1105
  }
1078
1106
 
1079
1107
  this.getErrorMessage(elem);
1080
-
1081
- elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
1082
- bubbles: true,
1083
- composed: true,
1084
- detail: {
1085
- validity: elem.validity,
1086
- message: elem.errorMessage
1087
- }
1088
- }));
1089
1108
  }
1109
+
1110
+ elem.dispatchEvent(new CustomEvent('auroFormElement-validated', {
1111
+ bubbles: true,
1112
+ composed: true,
1113
+ detail: {
1114
+ validity: elem.validity,
1115
+ message: elem.errorMessage
1116
+ }
1117
+ }));
1090
1118
  }
1091
1119
 
1092
1120
  /**
@@ -3,6 +3,12 @@
3
3
 
4
4
  # auro-combobox
5
5
 
6
+ ## Attributes
7
+
8
+ | Attribute | Description |
9
+ |-----------|--------------------------------------------------|
10
+ | [fluid](#fluid) | When attribute is present, element will be 100% width of container element. |
11
+
6
12
  ## Properties
7
13
 
8
14
  | Property | Attribute | Type | Default | Description |
@@ -377,6 +383,52 @@ You can manually set the input mode for the input.
377
383
  <!-- AURO-GENERATED-CONTENT:END -->
378
384
  </auro-accordion>
379
385
 
386
+ #### fluid <a name="fluid"></a>
387
+ Use `fluid` attribute to make `<auro-combobox>` to take the full width of its container.
388
+
389
+ <div class="exampleWrapper">
390
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/fluid.html) -->
391
+ <!-- The below content is automatically added from ./../apiExamples/fluid.html -->
392
+ <auro-combobox fluid>
393
+ <span slot="ariaLabel.bib.close">Close combobox</span>
394
+ <span slot="ariaLabel.input.clear">Clear All</span>
395
+ <span slot="bib.fullscreen.headline">Bib Header</span>
396
+ <span slot="label">Name</span>
397
+ <auro-menu>
398
+ <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
399
+ <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
400
+ <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
401
+ <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
402
+ <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
403
+ <auro-menuoption static nomatch>No matching option</auro-menuoption>
404
+ </auro-menu>
405
+ </auro-combobox>
406
+ <!-- AURO-GENERATED-CONTENT:END -->
407
+ </div>
408
+ <auro-accordion alignRight>
409
+ <span slot="trigger">See code</span>
410
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/fluid.html) -->
411
+ <!-- The below code snippet is automatically added from ./../apiExamples/fluid.html -->
412
+
413
+ ```html
414
+ <auro-combobox fluid>
415
+ <span slot="ariaLabel.bib.close">Close combobox</span>
416
+ <span slot="ariaLabel.input.clear">Clear All</span>
417
+ <span slot="bib.fullscreen.headline">Bib Header</span>
418
+ <span slot="label">Name</span>
419
+ <auro-menu>
420
+ <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
421
+ <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
422
+ <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
423
+ <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
424
+ <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
425
+ <auro-menuoption static nomatch>No matching option</auro-menuoption>
426
+ </auro-menu>
427
+ </auro-combobox>
428
+ ```
429
+ <!-- AURO-GENERATED-CONTENT:END -->
430
+ </auro-accordion>
431
+
380
432
  #### noFilter
381
433
 
382
434
  If set, combobox will not do suggestion filtering of the menuoptions. This option is useful when the `<auro-menuoption>` elements are being pre-filtered externally to combobox (e.g. using the citysearch API).