@aurodesignsystem/auro-formkit 6.0.3 → 6.1.0

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 (53) hide show
  1. package/CHANGELOG.md +20 -8
  2. package/components/checkbox/demo/customize.min.js +14 -4
  3. package/components/checkbox/demo/getting-started.min.js +14 -4
  4. package/components/checkbox/demo/index.min.js +14 -4
  5. package/components/checkbox/dist/index.js +14 -4
  6. package/components/checkbox/dist/registered.js +14 -4
  7. package/components/combobox/demo/customize.min.js +71 -10
  8. package/components/combobox/demo/getting-started.min.js +71 -10
  9. package/components/combobox/demo/index.min.js +71 -10
  10. package/components/combobox/dist/index.js +71 -10
  11. package/components/combobox/dist/registered.js +71 -10
  12. package/components/counter/demo/customize.min.js +2 -2
  13. package/components/counter/demo/index.min.js +2 -2
  14. package/components/counter/dist/index.js +2 -2
  15. package/components/counter/dist/registered.js +2 -2
  16. package/components/datepicker/demo/customize.min.js +64 -8
  17. package/components/datepicker/demo/index.min.js +64 -8
  18. package/components/datepicker/dist/index.js +64 -8
  19. package/components/datepicker/dist/registered.js +64 -8
  20. package/components/dropdown/demo/customize.min.js +1 -1
  21. package/components/dropdown/demo/getting-started.min.js +63 -7
  22. package/components/dropdown/demo/index.min.js +1 -1
  23. package/components/dropdown/dist/index.js +1 -1
  24. package/components/dropdown/dist/registered.js +1 -1
  25. package/components/form/demo/customize.min.js +241 -38
  26. package/components/form/demo/getting-started.min.js +241 -38
  27. package/components/form/demo/index.min.js +241 -38
  28. package/components/form/demo/registerDemoDeps.min.js +241 -38
  29. package/components/input/demo/api.md +1 -1
  30. package/components/input/demo/css-only.md +2 -2
  31. package/components/input/demo/customize.md +3 -3
  32. package/components/input/demo/customize.min.js +62 -6
  33. package/components/input/demo/getting-started.min.js +62 -6
  34. package/components/input/demo/index.min.js +62 -6
  35. package/components/input/demo/why-input.md +2 -3
  36. package/components/input/dist/auro-input.d.ts +8 -0
  37. package/components/input/dist/base-input.d.ts +2 -0
  38. package/components/input/dist/index.js +62 -6
  39. package/components/input/dist/registered.js +62 -6
  40. package/components/radio/demo/customize.min.js +15 -4
  41. package/components/radio/demo/getting-started.min.js +15 -4
  42. package/components/radio/demo/index.min.js +15 -4
  43. package/components/radio/dist/auro-radio-group.d.ts +1 -0
  44. package/components/radio/dist/index.js +15 -4
  45. package/components/radio/dist/registered.js +15 -4
  46. package/components/select/demo/customize.min.js +13 -4
  47. package/components/select/demo/getting-started.min.js +13 -4
  48. package/components/select/demo/index.min.js +13 -4
  49. package/components/select/dist/auro-select.d.ts +2 -0
  50. package/components/select/dist/index.js +13 -4
  51. package/components/select/dist/registered.js +13 -4
  52. package/custom-elements.json +1516 -1504
  53. package/package.json +1 -1
@@ -13669,7 +13669,7 @@ class AuroBibtemplate extends LitElement {
13669
13669
  }
13670
13670
  }
13671
13671
 
13672
- var formkitVersion$2 = '202608111803';
13672
+ var formkitVersion$2 = '202608262225';
13673
13673
 
13674
13674
  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}
13675
13675
  `,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}}
@@ -19400,7 +19400,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
19400
19400
  }
19401
19401
  };
19402
19402
 
19403
- var formkitVersion$1 = '202608111803';
19403
+ var formkitVersion$1 = '202608262225';
19404
19404
 
19405
19405
  let AuroElement$2 = class AuroElement extends LitElement {
19406
19406
  static get properties() {
@@ -31565,6 +31565,8 @@ class BaseInput extends AuroElement$1 {
31565
31565
 
31566
31566
  /**
31567
31567
  * If set, the label will remain fixed in the active position.
31568
+ * Only applies to the classic/default layout; the emphasized and snowflake
31569
+ * layouts always render the label inside the field, so this has no effect there.
31568
31570
  */
31569
31571
  activeLabel: {
31570
31572
  type: Boolean,
@@ -32684,6 +32686,18 @@ class BaseInput extends AuroElement$1 {
32684
32686
  cardIcon: 'cc-dinersclub',
32685
32687
  maskFormat: "0000 000000 0000"
32686
32688
  },
32689
+ {
32690
+ // JCB is variable length (16-19 digits), like UnionPay, so it reuses the
32691
+ // formatMinLength/formatLength range machinery. The 35 prefix overlaps no
32692
+ // other brand (Amex is 34|37, Diners is 30[0-5]|36|38).
32693
+ name: 'JCB',
32694
+ regex: /^(?<num>35)\d{0}/u,
32695
+ formatMinLength: 19,
32696
+ formatLength: 23,
32697
+ errorMessage: CreditCardValidationMessage,
32698
+ cardIcon: 'cc-jcb',
32699
+ maskFormat: "0000 0000 0000 0000 000"
32700
+ },
32687
32701
  {
32688
32702
  name: 'Visa',
32689
32703
  regex: /^(?<num>4)\d{0}/u,
@@ -32715,6 +32729,20 @@ class BaseInput extends AuroElement$1 {
32715
32729
  errorMessage: CreditCardValidationMessage,
32716
32730
  cardIcon: 'cc-discover',
32717
32731
  maskFormat: "0000 0000 0000 0000"
32732
+ },
32733
+ {
32734
+ // China UnionPay is variable length (16-19 digits). It must come after
32735
+ // Discover so the last-match-wins loop below gives its 62 prefix
32736
+ // precedence over the generic `6` that resolves to Discover. 81 is used
32737
+ // by UnionPay cards issued outside mainland China and overlaps no other
32738
+ // brand. 60 is intentionally excluded (it overlaps real Discover 6011).
32739
+ name: 'China UnionPay',
32740
+ regex: /^(?<num>62|81)\d{0}/u,
32741
+ formatMinLength: 19,
32742
+ formatLength: 23,
32743
+ errorMessage: CreditCardValidationMessage,
32744
+ cardIcon: 'cc-unionpay',
32745
+ maskFormat: "0000 0000 0000 0000 000"
32718
32746
  }
32719
32747
  ];
32720
32748
 
@@ -32732,7 +32760,12 @@ class BaseInput extends AuroElement$1 {
32732
32760
  }
32733
32761
  });
32734
32762
 
32735
- this.validationCCLength = type.formatLength;
32763
+ // Variable-length brands (both min and max defined, e.g. UnionPay) validate
32764
+ // against the minimum masked length so shorter-but-valid entries are not
32765
+ // flagged tooShort. Fixed-length brands keep their single formatLength.
32766
+ this.validationCCLength = type.formatMinLength && type.formatLength
32767
+ ? type.formatMinLength
32768
+ : type.formatLength;
32736
32769
 
32737
32770
  return type;
32738
32771
  }
@@ -33091,7 +33124,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
33091
33124
  }
33092
33125
  };
33093
33126
 
33094
- var formkitVersion = '202608111803';
33127
+ var formkitVersion = '202608262225';
33095
33128
 
33096
33129
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
33097
33130
  // See LICENSE in the project root for license information.
@@ -33192,15 +33225,35 @@ class AuroInput extends BaseInput {
33192
33225
  * @private
33193
33226
  */
33194
33227
  get inputHidden() {
33228
+ // In the classic/default layout, activeLabel keeps the input row visible so
33229
+ // the label stays raised rather than collapsing to the centered placeholder
33230
+ // position. Emphasized/snowflake always render the label inside the field,
33231
+ // so activeLabel does not apply there. This only overrides the empty/
33232
+ // unfocused clause — the display-value clause (combobox/datepicker) is
33233
+ // preserved regardless.
33234
+ const activeLabelRaisesInput = this.activeLabel && this.isClassicLayout;
33235
+
33195
33236
  return (
33196
33237
  this.hasDisplayValueContent && !this.hasFocus && this.hasValue) ||
33197
33238
  (
33239
+ !activeLabelRaisesInput &&
33198
33240
  (!this.value || this.value.length === 0) &&
33199
33241
  !this.hasFocus &&
33200
33242
  (!this.placeholderStr || this.placeholderStr === '')
33201
33243
  );
33202
33244
  }
33203
33245
 
33246
+ /**
33247
+ * Whether the component is rendering the classic/default layout, meaning not
33248
+ * emphasized and not snowflake. Kept as a single source of truth so
33249
+ * layout-scoped behavior such as activeLabel stays consistent across getters.
33250
+ * @returns {boolean} - True for the classic/default layout.
33251
+ * @private
33252
+ */
33253
+ get isClassicLayout() {
33254
+ return !this.layout.startsWith('emphasized') && this.layout !== 'snowflake';
33255
+ }
33256
+
33204
33257
  /**
33205
33258
  * Determines if the input should display in a state with no focus or value indication.
33206
33259
  * Returns true when the input has display content without focus and has a value,
@@ -33246,7 +33299,7 @@ class AuroInput extends BaseInput {
33246
33299
  }
33247
33300
 
33248
33301
  // classic layout (default)
33249
- return ((!this.value || this.value.length === 0) && !this.placeholderStr && !this.hasFocus) ? 'body-default' : 'body-xs';
33302
+ return ((!this.value || this.value.length === 0) && !this.placeholderStr && !this.hasFocus && !this.activeLabel) ? 'body-default' : 'body-xs';
33250
33303
  }
33251
33304
 
33252
33305
  /**
@@ -33342,7 +33395,8 @@ class AuroInput extends BaseInput {
33342
33395
  'wrapper': true,
33343
33396
  'simple': this.simple,
33344
33397
  'withValue': this.hasValue,
33345
- 'hasFocus': this.hasFocus
33398
+ 'hasFocus': this.hasFocus,
33399
+ 'activeLabel': this.activeLabel
33346
33400
  };
33347
33401
  }
33348
33402
 
@@ -33492,7 +33546,10 @@ class AuroInput extends BaseInput {
33492
33546
  */
33493
33547
  definePattern() {
33494
33548
  if (this.type === 'credit-card' && !this.noValidate && this.maxLength) {
33495
- return `.{${this.maxLength},${this.maxLength}}`;
33549
+ // Variable-length brands (e.g. UnionPay) set minLength, so accept a range;
33550
+ // fixed-length brands leave minLength undefined and keep an exact length.
33551
+ const minPatternLength = this.minLength || this.maxLength;
33552
+ return `.{${minPatternLength},${this.maxLength}}`;
33496
33553
  }
33497
33554
 
33498
33555
  return this.pattern;
@@ -33553,7 +33610,6 @@ class AuroInput extends BaseInput {
33553
33610
  @input="${this.handleInput}"
33554
33611
  .placeholder=${this.placeholderStr}
33555
33612
  .role=${this.a11yRole}
33556
- ?activeLabel="${this.activeLabel}"
33557
33613
  ?disabled="${this.disabled}"
33558
33614
  ?required="${this.required}"
33559
33615
  aria-activedescendant=${ifDefined(this.a11yActivedescendant)}
@@ -3780,7 +3780,7 @@ class AuroHelpText extends i {
3780
3780
  }
3781
3781
  }
3782
3782
 
3783
- var formkitVersion = '202608111803';
3783
+ var formkitVersion = '202608262225';
3784
3784
 
3785
3785
  class AuroElement extends i {
3786
3786
  static get properties() {
@@ -3780,7 +3780,7 @@ let AuroHelpText$1 = class AuroHelpText extends i {
3780
3780
  }
3781
3781
  };
3782
3782
 
3783
- var formkitVersion$1 = '202608111803';
3783
+ var formkitVersion$1 = '202608262225';
3784
3784
 
3785
3785
  let AuroElement$1 = class AuroElement extends i {
3786
3786
  static get properties() {
@@ -15952,6 +15952,8 @@ class BaseInput extends AuroElement {
15952
15952
 
15953
15953
  /**
15954
15954
  * If set, the label will remain fixed in the active position.
15955
+ * Only applies to the classic/default layout; the emphasized and snowflake
15956
+ * layouts always render the label inside the field, so this has no effect there.
15955
15957
  */
15956
15958
  activeLabel: {
15957
15959
  type: Boolean,
@@ -17071,6 +17073,18 @@ class BaseInput extends AuroElement {
17071
17073
  cardIcon: 'cc-dinersclub',
17072
17074
  maskFormat: "0000 000000 0000"
17073
17075
  },
17076
+ {
17077
+ // JCB is variable length (16-19 digits), like UnionPay, so it reuses the
17078
+ // formatMinLength/formatLength range machinery. The 35 prefix overlaps no
17079
+ // other brand (Amex is 34|37, Diners is 30[0-5]|36|38).
17080
+ name: 'JCB',
17081
+ regex: /^(?<num>35)\d{0}/u,
17082
+ formatMinLength: 19,
17083
+ formatLength: 23,
17084
+ errorMessage: CreditCardValidationMessage,
17085
+ cardIcon: 'cc-jcb',
17086
+ maskFormat: "0000 0000 0000 0000 000"
17087
+ },
17074
17088
  {
17075
17089
  name: 'Visa',
17076
17090
  regex: /^(?<num>4)\d{0}/u,
@@ -17102,6 +17116,20 @@ class BaseInput extends AuroElement {
17102
17116
  errorMessage: CreditCardValidationMessage,
17103
17117
  cardIcon: 'cc-discover',
17104
17118
  maskFormat: "0000 0000 0000 0000"
17119
+ },
17120
+ {
17121
+ // China UnionPay is variable length (16-19 digits). It must come after
17122
+ // Discover so the last-match-wins loop below gives its 62 prefix
17123
+ // precedence over the generic `6` that resolves to Discover. 81 is used
17124
+ // by UnionPay cards issued outside mainland China and overlaps no other
17125
+ // brand. 60 is intentionally excluded (it overlaps real Discover 6011).
17126
+ name: 'China UnionPay',
17127
+ regex: /^(?<num>62|81)\d{0}/u,
17128
+ formatMinLength: 19,
17129
+ formatLength: 23,
17130
+ errorMessage: CreditCardValidationMessage,
17131
+ cardIcon: 'cc-unionpay',
17132
+ maskFormat: "0000 0000 0000 0000 000"
17105
17133
  }
17106
17134
  ];
17107
17135
 
@@ -17119,7 +17147,12 @@ class BaseInput extends AuroElement {
17119
17147
  }
17120
17148
  });
17121
17149
 
17122
- this.validationCCLength = type.formatLength;
17150
+ // Variable-length brands (both min and max defined, e.g. UnionPay) validate
17151
+ // against the minimum masked length so shorter-but-valid entries are not
17152
+ // flagged tooShort. Fixed-length brands keep their single formatLength.
17153
+ this.validationCCLength = type.formatMinLength && type.formatLength
17154
+ ? type.formatMinLength
17155
+ : type.formatLength;
17123
17156
 
17124
17157
  return type;
17125
17158
  }
@@ -17478,7 +17511,7 @@ class AuroHelpText extends i {
17478
17511
  }
17479
17512
  }
17480
17513
 
17481
- var formkitVersion = '202608111803';
17514
+ var formkitVersion = '202608262225';
17482
17515
 
17483
17516
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
17484
17517
  // See LICENSE in the project root for license information.
@@ -17579,15 +17612,35 @@ class AuroInput extends BaseInput {
17579
17612
  * @private
17580
17613
  */
17581
17614
  get inputHidden() {
17615
+ // In the classic/default layout, activeLabel keeps the input row visible so
17616
+ // the label stays raised rather than collapsing to the centered placeholder
17617
+ // position. Emphasized/snowflake always render the label inside the field,
17618
+ // so activeLabel does not apply there. This only overrides the empty/
17619
+ // unfocused clause — the display-value clause (combobox/datepicker) is
17620
+ // preserved regardless.
17621
+ const activeLabelRaisesInput = this.activeLabel && this.isClassicLayout;
17622
+
17582
17623
  return (
17583
17624
  this.hasDisplayValueContent && !this.hasFocus && this.hasValue) ||
17584
17625
  (
17626
+ !activeLabelRaisesInput &&
17585
17627
  (!this.value || this.value.length === 0) &&
17586
17628
  !this.hasFocus &&
17587
17629
  (!this.placeholderStr || this.placeholderStr === '')
17588
17630
  );
17589
17631
  }
17590
17632
 
17633
+ /**
17634
+ * Whether the component is rendering the classic/default layout, meaning not
17635
+ * emphasized and not snowflake. Kept as a single source of truth so
17636
+ * layout-scoped behavior such as activeLabel stays consistent across getters.
17637
+ * @returns {boolean} - True for the classic/default layout.
17638
+ * @private
17639
+ */
17640
+ get isClassicLayout() {
17641
+ return !this.layout.startsWith('emphasized') && this.layout !== 'snowflake';
17642
+ }
17643
+
17591
17644
  /**
17592
17645
  * Determines if the input should display in a state with no focus or value indication.
17593
17646
  * Returns true when the input has display content without focus and has a value,
@@ -17633,7 +17686,7 @@ class AuroInput extends BaseInput {
17633
17686
  }
17634
17687
 
17635
17688
  // classic layout (default)
17636
- return ((!this.value || this.value.length === 0) && !this.placeholderStr && !this.hasFocus) ? 'body-default' : 'body-xs';
17689
+ return ((!this.value || this.value.length === 0) && !this.placeholderStr && !this.hasFocus && !this.activeLabel) ? 'body-default' : 'body-xs';
17637
17690
  }
17638
17691
 
17639
17692
  /**
@@ -17729,7 +17782,8 @@ class AuroInput extends BaseInput {
17729
17782
  'wrapper': true,
17730
17783
  'simple': this.simple,
17731
17784
  'withValue': this.hasValue,
17732
- 'hasFocus': this.hasFocus
17785
+ 'hasFocus': this.hasFocus,
17786
+ 'activeLabel': this.activeLabel
17733
17787
  };
17734
17788
  }
17735
17789
 
@@ -17879,7 +17933,10 @@ class AuroInput extends BaseInput {
17879
17933
  */
17880
17934
  definePattern() {
17881
17935
  if (this.type === 'credit-card' && !this.noValidate && this.maxLength) {
17882
- return `.{${this.maxLength},${this.maxLength}}`;
17936
+ // Variable-length brands (e.g. UnionPay) set minLength, so accept a range;
17937
+ // fixed-length brands leave minLength undefined and keep an exact length.
17938
+ const minPatternLength = this.minLength || this.maxLength;
17939
+ return `.{${minPatternLength},${this.maxLength}}`;
17883
17940
  }
17884
17941
 
17885
17942
  return this.pattern;
@@ -17940,7 +17997,6 @@ class AuroInput extends BaseInput {
17940
17997
  @input="${this.handleInput}"
17941
17998
  .placeholder=${this.placeholderStr}
17942
17999
  .role=${this.a11yRole}
17943
- ?activeLabel="${this.activeLabel}"
17944
18000
  ?disabled="${this.disabled}"
17945
18001
  ?required="${this.required}"
17946
18002
  aria-activedescendant=${o(this.a11yActivedescendant)}
@@ -3807,7 +3807,7 @@ class AuroHelpText extends i {
3807
3807
  }
3808
3808
  }
3809
3809
 
3810
- var formkitVersion = '202608111803';
3810
+ var formkitVersion = '202608262225';
3811
3811
 
3812
3812
  class AuroElement extends i {
3813
3813
  static get properties() {
@@ -3712,7 +3712,7 @@ class AuroHelpText extends LitElement {
3712
3712
  }
3713
3713
  }
3714
3714
 
3715
- var formkitVersion = '202608111803';
3715
+ var formkitVersion = '202608262225';
3716
3716
 
3717
3717
  class AuroElement extends LitElement {
3718
3718
  static get properties() {
@@ -3712,7 +3712,7 @@ class AuroHelpText extends LitElement {
3712
3712
  }
3713
3713
  }
3714
3714
 
3715
- var formkitVersion = '202608111803';
3715
+ var formkitVersion = '202608262225';
3716
3716
 
3717
3717
  class AuroElement extends LitElement {
3718
3718
  static get properties() {