@aurodesignsystem-dev/auro-formkit 0.0.0-pr1344.0 → 0.0.0-pr1344.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 (37) hide show
  1. package/components/checkbox/demo/api.min.js +1 -1
  2. package/components/checkbox/demo/index.min.js +1 -1
  3. package/components/checkbox/dist/index.js +1 -1
  4. package/components/checkbox/dist/registered.js +1 -1
  5. package/components/combobox/demo/api.min.js +91 -67
  6. package/components/combobox/demo/index.min.js +91 -67
  7. package/components/combobox/dist/index.js +91 -67
  8. package/components/combobox/dist/registered.js +91 -67
  9. package/components/counter/demo/api.min.js +2 -2
  10. package/components/counter/demo/index.min.js +2 -2
  11. package/components/counter/dist/index.js +2 -2
  12. package/components/counter/dist/registered.js +2 -2
  13. package/components/datepicker/demo/api.min.js +91 -67
  14. package/components/datepicker/demo/index.min.js +91 -67
  15. package/components/datepicker/dist/index.js +91 -67
  16. package/components/datepicker/dist/registered.js +91 -67
  17. package/components/dropdown/demo/api.min.js +1 -1
  18. package/components/dropdown/demo/index.min.js +1 -1
  19. package/components/dropdown/dist/index.js +1 -1
  20. package/components/dropdown/dist/registered.js +1 -1
  21. package/components/input/demo/api.md +73 -30
  22. package/components/input/demo/api.min.js +89 -65
  23. package/components/input/demo/index.md +2 -22
  24. package/components/input/demo/index.min.js +89 -65
  25. package/components/input/dist/base-input.d.ts +1 -16
  26. package/components/input/dist/index.js +89 -65
  27. package/components/input/dist/registered.js +89 -65
  28. package/components/radio/demo/api.min.js +1 -1
  29. package/components/radio/demo/index.min.js +1 -1
  30. package/components/radio/dist/index.js +1 -1
  31. package/components/radio/dist/registered.js +1 -1
  32. package/components/select/demo/api.min.js +2 -2
  33. package/components/select/demo/index.min.js +2 -2
  34. package/components/select/dist/index.js +2 -2
  35. package/components/select/dist/registered.js +2 -2
  36. package/custom-elements.json +0 -70
  37. package/package.json +2 -2
@@ -9228,7 +9228,7 @@ class AuroBibtemplate extends LitElement {
9228
9228
  }
9229
9229
  }
9230
9230
 
9231
- var formkitVersion$2 = '202602201616';
9231
+ var formkitVersion$2 = '202602201815';
9232
9232
 
9233
9233
  let l$1 = class l{generateElementName(t,e){let o=t;return o+="-",o+=e.replace(/[.]/g,"_"),o}generateTag(o,s,a){const r=this.generateElementName(o,s),i=literal`${unsafeStatic(r)}`;return customElements.get(r)||customElements.define(r,class extends a{}),i}};let d$1 = class d{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{});}closestElement(t,e=this,o=(e,s=e&&e.closest(t))=>e&&e!==document&&e!==window?s||o(e.getRootNode().host):null){return o(e)}handleComponentTagRename(t,e){const o=e.toLowerCase();t.tagName.toLowerCase()!==o&&t.setAttribute(o,true);}elementMatch(t,e){const o=e.toLowerCase();return t.tagName.toLowerCase()===o||t.hasAttribute(o)}getSlotText(t,e){const o=t.shadowRoot?.querySelector(`slot[name="${e}"]`),s=(o?.assignedNodes({flatten:true})||[]).map(t=>t.textContent?.trim()).join(" ").trim();return s||null}};let h$1 = class h{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{});}closestElement(t,e=this,o=(e,s=e&&e.closest(t))=>e&&e!==document&&e!==window?s||o(e.getRootNode().host):null){return o(e)}handleComponentTagRename(t,e){const o=e.toLowerCase();t.tagName.toLowerCase()!==o&&t.setAttribute(o,true);}elementMatch(t,e){const o=e.toLowerCase();return t.tagName.toLowerCase()===o||t.hasAttribute(o)}};var c$1=css`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]),:host([appearance=brand]){--ds-auro-loader-color: var(--ds-basic-color-brand-primary, #01426a)}:host([ondark]),:host([appearance=inverse]){--ds-auro-loader-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([orbit])>span{--ds-auro-loader-background-color: transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color: currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color: currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}
9234
9234
  `,u$4=css`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.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.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.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, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.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, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, 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"),var(--wcss-display-xl-family-fallback, 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"),var(--wcss-display-lg-family-fallback, 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"),var(--wcss-display-md-family-fallback, 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"),var(--wcss-display-sm-family-fallback, 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"),var(--wcss-display-xs-family-fallback, 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"),var(--wcss-heading-xl-family-fallback, 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"),var(--wcss-heading-lg-family-fallback, 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"),var(--wcss-heading-md-family-fallback, 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"),var(--wcss-heading-sm-family-fallback, 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"),var(--wcss-heading-xs-family-fallback, 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"),var(--wcss-heading-2xs-family-fallback, 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"),var(--wcss-accent-2xl-family-fallback, 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, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, 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, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, 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, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, 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, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, 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, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, 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, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0;box-sizing:border-box}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin: .375rem;--margin-xs: .2rem;--margin-sm: .5rem;--margin-md: .75rem;--margin-lg: 1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin) * 6);height:calc(1rem + var(--margin) * 2)}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(1.95rem + var(--margin-xs) * 6);height:calc(.65rem + var(--margin-xs) * 2)}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm) * 6);height:calc(2rem + var(--margin-sm) * 2)}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md) * 6);height:calc(3rem + var(--margin-md) * 2)}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg) * 6);height:calc(5rem + var(--margin-lg) * 2)}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-.4s}:host([pulse])>span:nth-child(2){animation-delay:-.2s}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,to{opacity:.1;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}to{left:110%}}:host>.no-animation{display:none}@media (prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center}:host>span{opacity:1}:host>.loader{display:none}:host>svg{display:none}:host>.no-animation{display:block}}
@@ -12941,7 +12941,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
12941
12941
  }
12942
12942
  };
12943
12943
 
12944
- var formkitVersion$1 = '202602201616';
12944
+ var formkitVersion$1 = '202602201815';
12945
12945
 
12946
12946
  let AuroElement$2 = class AuroElement extends LitElement {
12947
12947
  static get properties() {
@@ -24527,6 +24527,92 @@ class UniqueId {
24527
24527
  }
24528
24528
  }
24529
24529
 
24530
+ /**
24531
+ * Class for interaction with the DOM.
24532
+ */
24533
+ class DomHandler {
24534
+ /**
24535
+ * Walk up the DOM (including Shadow DOM boundaries) to find
24536
+ * the closest ancestor with a given attribute.
24537
+ *
24538
+ * @param {Node} startNode - The node to start from
24539
+ * @param {string} attrName - Attribute name to match
24540
+ * @returns {Element|null}
24541
+ */
24542
+ closestWithAttribute(startNode, attrName) {
24543
+ let node = startNode;
24544
+
24545
+ while (node) {
24546
+ // Only check Elements
24547
+ if (node.nodeType === Node.ELEMENT_NODE && node.hasAttribute(attrName)) {
24548
+ return node;
24549
+ }
24550
+
24551
+ // Normal DOM parent
24552
+ if (node.parentNode) {
24553
+ node = node.parentNode;
24554
+ continue;
24555
+ }
24556
+
24557
+ // Cross Shadow DOM boundary
24558
+ if (node instanceof ShadowRoot) {
24559
+ node = node.host;
24560
+ continue;
24561
+ }
24562
+
24563
+ // If we're inside a shadow tree and parentNode is null
24564
+ if (node.getRootNode) {
24565
+ const root = node.getRootNode();
24566
+ if (root instanceof ShadowRoot) {
24567
+ node = root.host;
24568
+ continue;
24569
+ }
24570
+ }
24571
+
24572
+ // Nothing left to traverse
24573
+ node = null;
24574
+ }
24575
+
24576
+ return null;
24577
+ }
24578
+
24579
+ /**
24580
+ * If the locale wasn't set via attribute on `elem`,
24581
+ * then use the closest `data-locale` attribute crawling up the DOM tree.
24582
+ * If none is found, default to 'en-US'.
24583
+ */
24584
+ getLocale(elem) {
24585
+ let locale = "en-US";
24586
+
24587
+ try {
24588
+ if (elem.hasAttribute("locale")) {
24589
+ locale = elem.getAttribute("locale");
24590
+ } else {
24591
+ const closestLocaleElement = this.closestWithAttribute(
24592
+ elem,
24593
+ "data-locale",
24594
+ );
24595
+
24596
+ if (closestLocaleElement) {
24597
+ locale = closestLocaleElement.getAttribute("data-locale");
24598
+ }
24599
+ }
24600
+ } catch (error) {
24601
+ if (!elem) {
24602
+ console.debug(
24603
+ "Auro getLocale: No element provided, defaulting to 'en-US'",
24604
+ );
24605
+ } else {
24606
+ console.debug(
24607
+ "Auro getLocale: Error accessing attributes, defaulting to 'en-US'",
24608
+ );
24609
+ }
24610
+ }
24611
+
24612
+ return locale;
24613
+ }
24614
+ }
24615
+
24530
24616
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
24531
24617
  // See LICENSE in the project root for license information.
24532
24618
 
@@ -24590,6 +24676,7 @@ class BaseInput extends AuroElement$1 {
24590
24676
  'dd/mm': 'dateDDMM',
24591
24677
  'mm/dd': 'dateMMDD'
24592
24678
  };
24679
+ this.domHandler = new DomHandler();
24593
24680
  this.dvInputOnly = false;
24594
24681
  this.hasValue = false;
24595
24682
  this.inputIconName = undefined;
@@ -25024,7 +25111,7 @@ class BaseInput extends AuroElement$1 {
25024
25111
  connectedCallback() {
25025
25112
  super.connectedCallback();
25026
25113
 
25027
- this.setLocale();
25114
+ this.locale = this.domHandler.getLocale(this);
25028
25115
  }
25029
25116
 
25030
25117
  firstUpdated() {
@@ -25127,69 +25214,6 @@ class BaseInput extends AuroElement$1 {
25127
25214
  }
25128
25215
  }
25129
25216
 
25130
- /**
25131
- * MOVE THIS TO AURO-LIBRARY ???
25132
- * Walk up the DOM (including Shadow DOM boundaries) to find
25133
- * the closest ancestor with a given attribute.
25134
- *
25135
- * @param {Node} startNode - The node to start from
25136
- * @param {string} attrName - Attribute name to match
25137
- * @returns {Element|null}
25138
- */
25139
- closestWithAttribute(startNode, attrName) {
25140
- let node = startNode;
25141
-
25142
- while (node) {
25143
- // Only check Elements
25144
- if (node.nodeType === Node.ELEMENT_NODE && node.hasAttribute(attrName)) {
25145
- return node;
25146
- }
25147
-
25148
- // Normal DOM parent
25149
- if (node.parentNode) {
25150
- node = node.parentNode;
25151
- continue;
25152
- }
25153
-
25154
- // Cross Shadow DOM boundary
25155
- if (node instanceof ShadowRoot) {
25156
- node = node.host;
25157
- continue;
25158
- }
25159
-
25160
- // If we're inside a shadow tree and parentNode is null
25161
- if (node.getRootNode) {
25162
- const root = node.getRootNode();
25163
- if (root instanceof ShadowRoot) {
25164
- node = root.host;
25165
- continue;
25166
- }
25167
- }
25168
-
25169
- // Nothing left to traverse
25170
- node = null;
25171
- }
25172
-
25173
- return null;
25174
- }
25175
-
25176
- /**
25177
- * If the locale wasn't set via attribute,
25178
- * look for the closest `data-locale` attribute in the DOM and use that.
25179
- * If none is found, default to 'en-US'.
25180
- */
25181
- setLocale() {
25182
- if (!this.hasAttribute('locale')) {
25183
- const closestLocaleElement = this.closestWithAttribute(this, 'data-locale');
25184
-
25185
- if (closestLocaleElement) {
25186
- this.locale = closestLocaleElement.getAttribute('data-locale');
25187
- } else {
25188
- this.locale = 'en-US';
25189
- }
25190
- }
25191
- }
25192
-
25193
25217
  /**
25194
25218
  * LitElement lifecycle method. Called after the DOM has been updated.
25195
25219
  * @param {Map<string, any>} changedProperties - Keys are the names of changed properties, values are the corresponding previous values.
@@ -26009,7 +26033,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
26009
26033
  }
26010
26034
  };
26011
26035
 
26012
- var formkitVersion = '202602201616';
26036
+ var formkitVersion = '202602201815';
26013
26037
 
26014
26038
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
26015
26039
  // See LICENSE in the project root for license information.
@@ -3405,7 +3405,7 @@ class AuroHelpText extends i {
3405
3405
  }
3406
3406
  }
3407
3407
 
3408
- var formkitVersion = '202602201616';
3408
+ var formkitVersion = '202602201815';
3409
3409
 
3410
3410
  class AuroElement extends i {
3411
3411
  static get properties() {
@@ -3345,7 +3345,7 @@ class AuroHelpText extends i {
3345
3345
  }
3346
3346
  }
3347
3347
 
3348
- var formkitVersion = '202602201616';
3348
+ var formkitVersion = '202602201815';
3349
3349
 
3350
3350
  class AuroElement extends i {
3351
3351
  static get properties() {
@@ -3254,7 +3254,7 @@ class AuroHelpText extends LitElement {
3254
3254
  }
3255
3255
  }
3256
3256
 
3257
- var formkitVersion = '202602201616';
3257
+ var formkitVersion = '202602201815';
3258
3258
 
3259
3259
  class AuroElement extends LitElement {
3260
3260
  static get properties() {
@@ -3254,7 +3254,7 @@ class AuroHelpText extends LitElement {
3254
3254
  }
3255
3255
  }
3256
3256
 
3257
- var formkitVersion = '202602201616';
3257
+ var formkitVersion = '202602201815';
3258
3258
 
3259
3259
  class AuroElement extends LitElement {
3260
3260
  static get properties() {
@@ -63,14 +63,12 @@ The `auro-input` element provides users a way to enter data into a text field.
63
63
 
64
64
  ## Methods
65
65
 
66
- | Method | Type | Description |
67
- |------------------------|--------------------------------------------------|--------------------------------------------------|
68
- | [clear](#clear) | `(): void` | Clears the input value. |
69
- | [closestWithAttribute](#closestWithAttribute) | `(startNode: Node, attrName: string): Element\|null` | MOVE THIS TO AURO-LIBRARY ???<br />Walk up the DOM (including Shadow DOM boundaries) to find<br />the closest ancestor with a given attribute.<br /><br />**startNode**: The node to start from<br />**attrName**: Attribute name to match |
70
- | [focus](#focus) | `(): void` | Function to set element focus. |
71
- | [reset](#reset) | `(): void` | Resets component to initial state, including resetting the touched state and validity. |
72
- | [setLocale](#setLocale) | `(): void` | If the locale wasn't set via attribute,<br />look for the closest `data-locale` attribute in the DOM and use that.<br />If none is found, default to 'en-US'. |
73
- | [validate](#validate) | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
66
+ | Method | Type | Description |
67
+ |------------|----------------------------------------|--------------------------------------------------|
68
+ | [clear](#clear) | `(): void` | Clears the input value. |
69
+ | [focus](#focus) | `(): void` | Function to set element focus. |
70
+ | [reset](#reset) | `(): void` | Resets component to initial state, including resetting the touched state and validity. |
71
+ | [validate](#validate) | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
74
72
 
75
73
  ## Events
76
74
 
@@ -113,20 +111,10 @@ The `auro-input` element provides users a way to enter data into a text field.
113
111
  <div class="exampleWrapper">
114
112
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
115
113
  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
116
- <auro-input type="date" locale="en-GB">
114
+ <auro-input>
117
115
  <span slot="ariaLabel.clear">Clear All</span>
118
116
  <span slot="label">GB Date</span>
119
117
  <span slot="helpText">Help Text</span>
120
- </auro-input>
121
- <auro-input type="date" locale="en-US">
122
- <span slot="ariaLabel.clear">Clear All</span>
123
- <span slot="label">US Date</span>
124
- <span slot="helpText">Help Text</span>
125
- </auro-input>
126
- <auro-input type="date">
127
- <span slot="ariaLabel.clear">Clear All</span>
128
- <span slot="label">Closest Locale Date</span>
129
- <span slot="helpText">Help Text</span>
130
118
  </auro-input>
131
119
  <!-- AURO-GENERATED-CONTENT:END -->
132
120
  </div>
@@ -136,21 +124,11 @@ The `auro-input` element provides users a way to enter data into a text field.
136
124
  <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
137
125
 
138
126
  ```html
139
- <auro-input type="date" locale="en-GB">
127
+ <auro-input>
140
128
  <span slot="ariaLabel.clear">Clear All</span>
141
129
  <span slot="label">GB Date</span>
142
130
  <span slot="helpText">Help Text</span>
143
131
  </auro-input>
144
- <auro-input type="date" locale="en-US">
145
- <span slot="ariaLabel.clear">Clear All</span>
146
- <span slot="label">US Date</span>
147
- <span slot="helpText">Help Text</span>
148
- </auro-input>
149
- <auro-input type="date">
150
- <span slot="ariaLabel.clear">Clear All</span>
151
- <span slot="label">Closest Locale Date</span>
152
- <span slot="helpText">Help Text</span>
153
- </auro-input>
154
132
  ```
155
133
  <!-- AURO-GENERATED-CONTENT:END -->
156
134
  </auro-accordion>
@@ -419,6 +397,71 @@ Set the `inputmode` for the input.
419
397
  <!-- AURO-GENERATED-CONTENT:END -->
420
398
  </auro-accordion>
421
399
 
400
+ #### Locale
401
+
402
+ Set the `locale` for the input (e.g. `en-US`).
403
+
404
+ Locale currently only affects date format auro-input elements. If no locale is set, the element will look up the DOM to find the nearest `data-locale` attribute. If no `data-locale` is defined up the DOM tree, auro-input will default to `en-US`.
405
+
406
+ <div class="exampleWrapper">
407
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/locale.html) -->
408
+ <!-- The below content is automatically added from ./../apiExamples/locale.html -->
409
+ <div data-locale="de-DE">
410
+ <auro-input type="date" locale="en-GB">
411
+ <span slot="ariaLabel.clear">Clear All</span>
412
+ <span slot="label">en-GB Date</span>
413
+ <span slot="helpText">Help Text</span>
414
+ </auro-input>
415
+ <auro-input type="date" locale="en-US">
416
+ <span slot="ariaLabel.clear">Clear All</span>
417
+ <span slot="label">en-US Date</span>
418
+ <span slot="helpText">Help Text</span>
419
+ </auro-input>
420
+ <auro-input type="date" locale="zh-CN">
421
+ <span slot="ariaLabel.clear">Clear All</span>
422
+ <span slot="label">zh-CN Date</span>
423
+ <span slot="helpText">Help Text</span>
424
+ </auro-input>
425
+ <auro-input type="date">
426
+ <span slot="ariaLabel.clear">Clear All</span>
427
+ <span slot="label">Nearest `data-locale` attribute format (`de-DE` in this case)</span>
428
+ <span slot="helpText">Help Text</span>
429
+ </auro-input>
430
+ </div>
431
+ <!-- AURO-GENERATED-CONTENT:END -->
432
+ </div>
433
+ <auro-accordion alignRight>
434
+ <span slot="trigger">See code</span>
435
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/locale.html) -->
436
+ <!-- The below code snippet is automatically added from ./../apiExamples/locale.html -->
437
+
438
+ ```html
439
+ <div data-locale="de-DE">
440
+ <auro-input type="date" locale="en-GB">
441
+ <span slot="ariaLabel.clear">Clear All</span>
442
+ <span slot="label">en-GB Date</span>
443
+ <span slot="helpText">Help Text</span>
444
+ </auro-input>
445
+ <auro-input type="date" locale="en-US">
446
+ <span slot="ariaLabel.clear">Clear All</span>
447
+ <span slot="label">en-US Date</span>
448
+ <span slot="helpText">Help Text</span>
449
+ </auro-input>
450
+ <auro-input type="date" locale="zh-CN">
451
+ <span slot="ariaLabel.clear">Clear All</span>
452
+ <span slot="label">zh-CN Date</span>
453
+ <span slot="helpText">Help Text</span>
454
+ </auro-input>
455
+ <auro-input type="date">
456
+ <span slot="ariaLabel.clear">Clear All</span>
457
+ <span slot="label">Nearest `data-locale` attribute format (`de-DE` in this case)</span>
458
+ <span slot="helpText">Help Text</span>
459
+ </auro-input>
460
+ </div>
461
+ ```
462
+ <!-- AURO-GENERATED-CONTENT:END -->
463
+ </auro-accordion>
464
+
422
465
  ### Max
423
466
 
424
467
  Use the `max` attribute to define a maximum value used during validation. The attribute will only apply when `<auro-input>` also has a `type` attribute for `number` or any date format.
@@ -10672,6 +10672,92 @@ class UniqueId {
10672
10672
  }
10673
10673
  }
10674
10674
 
10675
+ /**
10676
+ * Class for interaction with the DOM.
10677
+ */
10678
+ class DomHandler {
10679
+ /**
10680
+ * Walk up the DOM (including Shadow DOM boundaries) to find
10681
+ * the closest ancestor with a given attribute.
10682
+ *
10683
+ * @param {Node} startNode - The node to start from
10684
+ * @param {string} attrName - Attribute name to match
10685
+ * @returns {Element|null}
10686
+ */
10687
+ closestWithAttribute(startNode, attrName) {
10688
+ let node = startNode;
10689
+
10690
+ while (node) {
10691
+ // Only check Elements
10692
+ if (node.nodeType === Node.ELEMENT_NODE && node.hasAttribute(attrName)) {
10693
+ return node;
10694
+ }
10695
+
10696
+ // Normal DOM parent
10697
+ if (node.parentNode) {
10698
+ node = node.parentNode;
10699
+ continue;
10700
+ }
10701
+
10702
+ // Cross Shadow DOM boundary
10703
+ if (node instanceof ShadowRoot) {
10704
+ node = node.host;
10705
+ continue;
10706
+ }
10707
+
10708
+ // If we're inside a shadow tree and parentNode is null
10709
+ if (node.getRootNode) {
10710
+ const root = node.getRootNode();
10711
+ if (root instanceof ShadowRoot) {
10712
+ node = root.host;
10713
+ continue;
10714
+ }
10715
+ }
10716
+
10717
+ // Nothing left to traverse
10718
+ node = null;
10719
+ }
10720
+
10721
+ return null;
10722
+ }
10723
+
10724
+ /**
10725
+ * If the locale wasn't set via attribute on `elem`,
10726
+ * then use the closest `data-locale` attribute crawling up the DOM tree.
10727
+ * If none is found, default to 'en-US'.
10728
+ */
10729
+ getLocale(elem) {
10730
+ let locale = "en-US";
10731
+
10732
+ try {
10733
+ if (elem.hasAttribute("locale")) {
10734
+ locale = elem.getAttribute("locale");
10735
+ } else {
10736
+ const closestLocaleElement = this.closestWithAttribute(
10737
+ elem,
10738
+ "data-locale",
10739
+ );
10740
+
10741
+ if (closestLocaleElement) {
10742
+ locale = closestLocaleElement.getAttribute("data-locale");
10743
+ }
10744
+ }
10745
+ } catch (error) {
10746
+ if (!elem) {
10747
+ console.debug(
10748
+ "Auro getLocale: No element provided, defaulting to 'en-US'",
10749
+ );
10750
+ } else {
10751
+ console.debug(
10752
+ "Auro getLocale: Error accessing attributes, defaulting to 'en-US'",
10753
+ );
10754
+ }
10755
+ }
10756
+
10757
+ return locale;
10758
+ }
10759
+ }
10760
+
10675
10761
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
10676
10762
  // See LICENSE in the project root for license information.
10677
10763
 
@@ -10735,6 +10821,7 @@ class BaseInput extends AuroElement {
10735
10821
  'dd/mm': 'dateDDMM',
10736
10822
  'mm/dd': 'dateMMDD'
10737
10823
  };
10824
+ this.domHandler = new DomHandler();
10738
10825
  this.dvInputOnly = false;
10739
10826
  this.hasValue = false;
10740
10827
  this.inputIconName = undefined;
@@ -11169,7 +11256,7 @@ class BaseInput extends AuroElement {
11169
11256
  connectedCallback() {
11170
11257
  super.connectedCallback();
11171
11258
 
11172
- this.setLocale();
11259
+ this.locale = this.domHandler.getLocale(this);
11173
11260
  }
11174
11261
 
11175
11262
  firstUpdated() {
@@ -11272,69 +11359,6 @@ class BaseInput extends AuroElement {
11272
11359
  }
11273
11360
  }
11274
11361
 
11275
- /**
11276
- * MOVE THIS TO AURO-LIBRARY ???
11277
- * Walk up the DOM (including Shadow DOM boundaries) to find
11278
- * the closest ancestor with a given attribute.
11279
- *
11280
- * @param {Node} startNode - The node to start from
11281
- * @param {string} attrName - Attribute name to match
11282
- * @returns {Element|null}
11283
- */
11284
- closestWithAttribute(startNode, attrName) {
11285
- let node = startNode;
11286
-
11287
- while (node) {
11288
- // Only check Elements
11289
- if (node.nodeType === Node.ELEMENT_NODE && node.hasAttribute(attrName)) {
11290
- return node;
11291
- }
11292
-
11293
- // Normal DOM parent
11294
- if (node.parentNode) {
11295
- node = node.parentNode;
11296
- continue;
11297
- }
11298
-
11299
- // Cross Shadow DOM boundary
11300
- if (node instanceof ShadowRoot) {
11301
- node = node.host;
11302
- continue;
11303
- }
11304
-
11305
- // If we're inside a shadow tree and parentNode is null
11306
- if (node.getRootNode) {
11307
- const root = node.getRootNode();
11308
- if (root instanceof ShadowRoot) {
11309
- node = root.host;
11310
- continue;
11311
- }
11312
- }
11313
-
11314
- // Nothing left to traverse
11315
- node = null;
11316
- }
11317
-
11318
- return null;
11319
- }
11320
-
11321
- /**
11322
- * If the locale wasn't set via attribute,
11323
- * look for the closest `data-locale` attribute in the DOM and use that.
11324
- * If none is found, default to 'en-US'.
11325
- */
11326
- setLocale() {
11327
- if (!this.hasAttribute('locale')) {
11328
- const closestLocaleElement = this.closestWithAttribute(this, 'data-locale');
11329
-
11330
- if (closestLocaleElement) {
11331
- this.locale = closestLocaleElement.getAttribute('data-locale');
11332
- } else {
11333
- this.locale = 'en-US';
11334
- }
11335
- }
11336
- }
11337
-
11338
11362
  /**
11339
11363
  * LitElement lifecycle method. Called after the DOM has been updated.
11340
11364
  * @param {Map<string, any>} changedProperties - Keys are the names of changed properties, values are the corresponding previous values.
@@ -12154,7 +12178,7 @@ class AuroHelpText extends i$3 {
12154
12178
  }
12155
12179
  }
12156
12180
 
12157
- var formkitVersion = '202602201616';
12181
+ var formkitVersion = '202602201815';
12158
12182
 
12159
12183
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
12160
12184
  // See LICENSE in the project root for license information.
@@ -28,20 +28,10 @@ The `<auro-input>` element should be used in situations where users may:
28
28
  <div class="exampleWrapper">
29
29
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
30
30
  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
31
- <auro-input type="date" locale="en-GB">
31
+ <auro-input>
32
32
  <span slot="ariaLabel.clear">Clear All</span>
33
33
  <span slot="label">GB Date</span>
34
34
  <span slot="helpText">Help Text</span>
35
- </auro-input>
36
- <auro-input type="date" locale="en-US">
37
- <span slot="ariaLabel.clear">Clear All</span>
38
- <span slot="label">US Date</span>
39
- <span slot="helpText">Help Text</span>
40
- </auro-input>
41
- <auro-input type="date">
42
- <span slot="ariaLabel.clear">Clear All</span>
43
- <span slot="label">Closest Locale Date</span>
44
- <span slot="helpText">Help Text</span>
45
35
  </auro-input>
46
36
  <!-- AURO-GENERATED-CONTENT:END -->
47
37
  </div>
@@ -51,21 +41,11 @@ The `<auro-input>` element should be used in situations where users may:
51
41
  <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
52
42
 
53
43
  ```html
54
- <auro-input type="date" locale="en-GB">
44
+ <auro-input>
55
45
  <span slot="ariaLabel.clear">Clear All</span>
56
46
  <span slot="label">GB Date</span>
57
47
  <span slot="helpText">Help Text</span>
58
48
  </auro-input>
59
- <auro-input type="date" locale="en-US">
60
- <span slot="ariaLabel.clear">Clear All</span>
61
- <span slot="label">US Date</span>
62
- <span slot="helpText">Help Text</span>
63
- </auro-input>
64
- <auro-input type="date">
65
- <span slot="ariaLabel.clear">Clear All</span>
66
- <span slot="label">Closest Locale Date</span>
67
- <span slot="helpText">Help Text</span>
68
- </auro-input>
69
49
  ```
70
50
  <!-- AURO-GENERATED-CONTENT:END -->
71
51
  </auro-accordion>