@aurodesignsystem-dev/auro-formkit 0.0.0-pr1497.0 → 0.0.0-pr1497.1

package/components/form/demo/styles.min.css

@@ -1 +1 @@
-.container{display:grid;margin-left:auto;margin-right:auto;max-width:1232px}.pagecontainer{padding-left:1rem;padding-right:1rem;margin-left:auto;margin-right:auto;max-width:1232px}@media screen and (min-width: 576px){.pagecontainer{padding-left:1rem;padding-right:1rem}}@media screen and (min-width: 768px){.pagecontainer{padding-left:1.5rem;padding-right:1.5rem}}@media screen and (min-width: 1024px){.pagecontainer{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1232px){.pagecontainer{padding-left:2rem;padding-right:2rem}}.pagecontainer.breadcrumbs{margin-block-end:3.35rem}.pageLayout-2colAnchorNav{display:grid;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem;max-width:1232px;gap:2rem}@media screen and (min-width: 576px){.pageLayout-2colAnchorNav{gap:var(--ds-grid-gutter-sm, 1rem)}}@media screen and (min-width: 768px){.pageLayout-2colAnchorNav{gap:var(--ds-grid-gutter-md, 1.5rem)}}@media screen and (min-width: 1024px){.pageLayout-2colAnchorNav{gap:var(--ds-grid-gutter-lg, 1.5rem)}}@media screen and (min-width: 1232px){.pageLayout-2colAnchorNav{gap:var(--ds-grid-gutter-xl, 2rem)}}.pageLayout-2colAnchorNav{grid-template-areas:"breadcrumbs" "anchornav" "main"}@media screen and (min-width: 576px){.pageLayout-2colAnchorNav{padding-left:1rem;padding-right:1rem}}@media screen and (min-width: 768px){.pageLayout-2colAnchorNav{padding-left:1.5rem;padding-right:1.5rem;grid-template-columns:auto var(--fixed-anchor-width, 168px);grid-template-areas:"breadcrumbs breadcrumbs" "main anchornav"}}@media screen and (min-width: 1024px){.pageLayout-2colAnchorNav{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1232px){.pageLayout-2colAnchorNav{padding-left:2rem;padding-right:2rem}}.pageLayout-2colAnchorNav .breadcrumbs{grid-area:breadcrumbs}.pageLayout-2colAnchorNav .main{grid-area:main}.pageLayout-2colAnchorNav .main *{scroll-margin-top:var(--ds-grid-margin-md, 1.5rem)}.pageLayout-2colAnchorNav .anchornav{grid-area:anchornav}@media screen and (min-width: 768px){.pageLayout-2colAnchorNav .anchornav{position:sticky;top:0;max-height:100vh;padding-top:var(--ds-grid-margin-xl, 2rem)}}.pageLayout-2colSideNav{display:grid;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0;max-width:1232px;gap:2rem}@media screen and (min-width: 576px){.pageLayout-2colSideNav{gap:var(--ds-grid-gutter-sm, 1rem)}}@media screen and (min-width: 768px){.pageLayout-2colSideNav{gap:var(--ds-grid-gutter-md, 1.5rem)}}@media screen and (min-width: 1024px){.pageLayout-2colSideNav{gap:var(--ds-grid-gutter-lg, 1.5rem)}}@media screen and (min-width: 1232px){.pageLayout-2colSideNav{gap:var(--ds-grid-gutter-xl, 2rem)}}.pageLayout-2colSideNav{grid-template-areas:"breadcrumbs" "sidenav" "main"}@media screen and (min-width: 768px){.pageLayout-2colSideNav{padding-left:1.5rem;padding-right:1.5rem;grid-template-columns:var(--fixed-nav-width, 280px) auto;grid-template-areas:"breadcrumbs breadcrumbs" "sidenav main"}}@media screen and (min-width: 1024px){.pageLayout-2colSideNav{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1232px){.pageLayout-2colSideNav{padding-left:2rem;padding-right:2rem}}.pageLayout-2colSideNav .breadcrumbs{grid-area:breadcrumbs;padding-left:1rem;padding-right:1rem}@media screen and (min-width: 768px){.pageLayout-2colSideNav .breadcrumbs{padding-left:0;padding-right:0}}.pageLayout-2colSideNav .sidenav{grid-area:sidenav;background-color:var(--ds-color-container-primary-default, #ffffff);padding-left:1rem;padding-right:1rem}@media screen and (min-width: 768px){.pageLayout-2colSideNav .sidenav{padding-left:0;padding-right:0;background-color:transparent}}.pageLayout-2colSideNav .main{grid-area:main;padding-left:1rem;padding-right:1rem}@media screen and (min-width: 768px){.pageLayout-2colSideNav .main{padding-left:0;padding-right:0}}.pageLayout-2colSideNav .main *{scroll-margin-top:var(--ds-grid-margin-md, 1.5rem)}.pageLayout-3col{display:grid;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0;max-width:1232px;gap:2rem}@media screen and (min-width: 576px){.pageLayout-3col{gap:var(--ds-grid-gutter-sm, 1rem)}}@media screen and (min-width: 768px){.pageLayout-3col{gap:var(--ds-grid-gutter-md, 1.5rem)}}@media screen and (min-width: 1024px){.pageLayout-3col{gap:var(--ds-grid-gutter-lg, 1.5rem)}}@media screen and (min-width: 1232px){.pageLayout-3col{gap:var(--ds-grid-gutter-xl, 2rem)}}.pageLayout-3col{grid-template-areas:"breadcrumbs" "sidenav" "anchornav" "main"}@media screen and (min-width: 768px){.pageLayout-3col{padding-left:1.5rem;padding-right:1.5rem;grid-template-columns:var(--fixed-nav-width, 280px) auto var(--fixed-anchor-width, 168px);grid-template-areas:"breadcrumbs breadcrumbs breadcrumbs" "sidenav main anchornav"}}@media screen and (min-width: 1024px){.pageLayout-3col{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1232px){.pageLayout-3col{padding-left:2rem;padding-right:2rem}}.pageLayout-3col .breadcrumbs{grid-area:breadcrumbs;padding-left:1rem;padding-right:1rem}@media screen and (min-width: 768px){.pageLayout-3col .breadcrumbs{padding-left:0;padding-right:0}}.pageLayout-3col .sidenav{grid-area:sidenav;z-index:1;background-color:var(--ds-color-container-primary-default, #ffffff);padding-left:1rem;padding-right:1rem;position:sticky;top:0;--align-self: stretch;align-self:var(--align-self)}@media screen and (min-width: 768px){.pageLayout-3col .sidenav{padding-left:0;padding-right:0;background-color:transparent}}.pageLayout-3col .main{grid-area:main;padding-left:1rem;padding-right:1rem}@media screen and (min-width: 768px){.pageLayout-3col .main{padding-left:0;padding-right:0}}.pageLayout-3col .main *{scroll-margin-top:var(--ds-grid-margin-md, 1.5rem)}.pageLayout-3col .anchornav{grid-area:anchornav}@media screen and (min-width: 768px){.pageLayout-3col .anchornav{position:sticky;top:0;max-height:100vh;padding-top:var(--ds-grid-margin-xl, 2rem)}}.pageLayout-3col .anchornav{padding-left:1rem;padding-right:1rem}@media screen and (min-width: 768px){.pageLayout-3col .anchornav{padding-left:0;padding-right:0}}@font-face{font-family:"AS Circular";font-weight:var(--ds-text-heading-display-weight, 100);font-style:normal;font-display:fallback;src:url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/bltd55b385b9432ca51/ASCircularWeb-Light?environment=production") format("woff2"),url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/blt1566a6d54c0bf457/ASCircularWeb-Light?environment=production") format("woff")}@font-face{font-family:"AS Circular";font-weight:var(--ds-text-heading-medium-weight, 300);font-style:normal;font-display:fallback;src:url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/bltc48385a5d7dd0f20/ASCircularWeb-Medium?environment=production") format("woff2"),url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/bltf30c93842722e935/ASCircularWeb-Medium?environment=production") format("woff")}@font-face{font-family:"AS Circular";font-weight:var(--ds-text-body-default-weight, 500);font-style:normal;font-display:fallback;src:url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/blt3b851fb0e0de3833/ASCircularWeb-Book?environment=production") format("woff2"),url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/blt8b440e82e9793058/ASCircularWeb-Book?environment=production") format("woff")}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}main{display:block}hr{overflow:visible;box-sizing:content-box;height:0}pre{font-family:monospace,monospace;font-size:var(--ds-text-body-size-default, 1rem)}a{background-color:transparent}abbr[title]{text-decoration:underline;text-decoration:underline dotted;border-bottom:none}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:var(--ds-text-body-size-default, 1rem)}sub,sup{position:relative;vertical-align:baseline;font-size:75%;line-height:0}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:100%;line-height:var(--ds-text-body-height-default, 1.5rem)}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:none;appearance:none}fieldset{padding:.35em .75em .625em}legend{display:table;box-sizing:border-box;max-width:100%;padding:0;white-space:normal;color:inherit}progress{vertical-align:baseline}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:textfield;appearance:textfield}::-webkit-search-decoration{-webkit-appearance:none;appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button;appearance:button}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.heading,.auro-markdown h1,.auro-markdown h2,.auro-markdown h3{margin:1.75rem 0;letter-spacing:var(--ds-text-heading-default-spacing, -0.2px);font-weight:var(--ds-text-heading-default-weight, 500)}.heading--display,.auro-markdown h1{margin-top:0;font-size:var(--ds-text-heading-display-size-breakpoint-sm, 2.75rem);font-weight:var(--ds-text-heading-display-weight, 100);line-height:var(--ds-text-heading-display-height-breakpoint-sm, 3.375rem)}@media screen and (min-width: 768px){.heading--display,.auro-markdown h1{font-size:var(--ds-text-heading-display-size-breakpoint-md, 3rem);line-height:var(--ds-text-heading-display-height-breakpoint-md, 3.75rem)}}@media screen and (min-width: 1024px){.heading--display,.auro-markdown h1{font-size:var(--ds-text-heading-display-size-breakpoint-lg, 3.5rem);line-height:var(--ds-text-heading-display-height-breakpoint-lg, 4.25rem)}}.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-sm, 2rem);font-weight:var(--ds-text-heading-800-weight, 500);line-height:var(--ds-text-heading-800-height-breakpoint-sm, 2.375rem)}@media screen and (min-width: 768px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-md, 2.25rem);line-height:var(--ds-text-heading-800-height-breakpoint-md, 2.625rem)}}@media screen and (min-width: 1024px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-lg, 2.5rem);line-height:var(--ds-text-heading-800-height-breakpoint-lg, 3rem)}}.heading--700,.auro-markdown h2{font-size:var(--ds-text-heading-700-size-breakpoint-sm, 1.75rem);font-weight:var(--ds-text-heading-700-weight, 500);line-height:var(--ds-text-heading-700-height-breakpoint-sm, 2.125rem)}@media screen and (min-width: 768px){.heading--700,.auro-markdown h2{font-size:var(--ds-text-heading-700-size-breakpoint-md, 2rem);line-height:var(--ds-text-heading-700-height-breakpoint-md, 2.375rem)}}@media screen and (min-width: 1024px){.heading--700,.auro-markdown h2{font-size:var(--ds-text-heading-700-size-breakpoint-lg, 2.25rem);line-height:var(--ds-text-heading-700-height-breakpoint-lg, 2.75rem)}}.heading--600,.auro-markdown h3{margin:1rem 0;font-size:var(--ds-text-heading-600-size-breakpoint-sm, 1.625rem);font-weight:var(--ds-text-heading-600-weight, 300);line-height:var(--ds-text-heading-600-height-breakpoint-sm, 1.875rem)}@media screen and (min-width: 768px){.heading--600,.auro-markdown h3{font-size:var(--ds-text-heading-600-size-breakpoint-md, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-md, 2.125rem)}}@media screen and (min-width: 1024px){.heading--600,.auro-markdown h3{font-size:var(--ds-text-heading-600-size-breakpoint-lg, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-lg, 2.25rem)}}.heading--500,.auro-markdown h4{margin:1rem 0;font-size:var(--ds-text-heading-500-size-breakpoint-sm, 1.375rem);font-weight:var(--ds-text-heading-500-weight, 300);line-height:var(--ds-text-heading-500-height-breakpoint-sm, 1.625rem)}@media screen and (min-width: 768px){.heading--500,.auro-markdown h4{font-size:var(--ds-text-heading-500-size-breakpoint-md, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-md, 1.875rem)}}@media screen and (min-width: 1024px){.heading--500,.auro-markdown h4{font-size:var(--ds-text-heading-500-size-breakpoint-lg, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-lg, 2rem)}}.heading--400{margin:.75rem 0;font-size:var(--ds-text-heading-400-size, 1.25rem);font-weight:var(--ds-text-heading-400-weight, 300);line-height:var(--ds-text-heading-400-height, 1.625rem)}.heading--300{margin:.75rem 0;font-size:var(--ds-text-heading-300-size, 1.125rem);font-weight:var(--ds-text-heading-300-weight, 300);line-height:var(--ds-text-heading-300-height, 1.625rem)}blockquote{margin-left:0;border-left:1px solid var(--ds-color-border-ui-active-default, #225296);padding:var(--ds-size-100, 0.5rem);padding-left:var(--ds-size-400, 2rem);color:var(--ds-color-text-secondary-default, #525252);font-weight:200;margin-top:var(--ds-size-300, 1.5rem);margin-bottom:var(--ds-size-300, 1.5rem)}blockquote p,blockquote .auro-markdown p,.auro-markdown blockquote p{line-height:2}blockquote p:last-child{margin-bottom:0}blockquote+p,.auro-markdown blockquote+p{margin-bottom:var(--ds-size-400, 2rem)}.auro_table,.auro-markdown table{display:block;overflow:scroll;width:auto;margin-bottom:var(--ds-size-400, 2rem);border-spacing:var(--ds-size-150, 0.75rem);border-collapse:collapse;font-weight:var(--ds-text-heading-display-weight, 100)}.auro_table tr:nth-child(even),.auro-markdown table tr:nth-child(even){background-color:var(--ds-color-container-secondary-default, #f7f7f7)}.auro_table th,.auro-markdown table th{text-align:left;font-weight:var(--ds-text-heading-default-weight, 500)}@media screen and (min-width: 576px){.auro_table,.auro-markdown table{display:table;width:100%}}.auro_table thead,.auro-markdown table thead{border-collapse:collapse;border-bottom:1px solid var(--ds-color-border-tertiary-default, #dddddd)}.auro_table th,.auro-markdown table th,.auro_table td,.auro-markdown table td{padding:var(--ds-size-200, 1rem)}*:focus-visible{outline:1px solid var(--ds-color-border-ui-focus-default, #2c67b5)}:focus:not(:focus-visible){outline:3px solid transparent}html{box-sizing:border-box;font-size:var(--ds-text-body-size-default, 1rem);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body,.baseType{margin:0;color:var(--ds-color-text-primary-default, #2a2a2a);font-family:var(--ds-font-family-default, "AS Circular", "Helvetica Neue", Arial, sans-serif);font-variant-ligatures:no-common-ligatures;font-size:var(--ds-text-body-size-default, 1rem);font-weight:var(--ds-text-body-default-weight, 500);line-height:var(--ds-text-body-height-default, 1.5rem)}.baseParagraph{margin:0 0 1rem;line-height:var(--ds-text-body-height-default, 1.5rem)}.baseParagraph .hyperlink,.baseParagraph .auro-markdown a,.auro-markdown .baseParagraph a{text-decoration:underline}.hyperlink,.auro-markdown a{text-decoration:underline;color:var(--ds-color-text-ui-default-default, #2c67b5)}.hyperlink:visited,.auro-markdown a:visited{color:var(--ds-color-text-ui-default-default, #2c67b5)}.hyperlink--nav{display:block;text-decoration:none}.hyperlink--nav:not(.is-touching):hover{text-decoration:underline !important}.hyperlink--ondark{color:var(--ds-color-text-ui-default-inverse, #56bbde)}.hyperlink--ondark:not(.is-touching):hover{color:var(--ds-color-text-ui-hover-inverse, #a8e9f7)}.hyperlink--ondark:visited{color:var(--ds-color-text-ui-default-inverse, #56bbde)}.hyperlink:not(.is-touching):hover,.auro-markdown a:not(.is-touching):hover{text-decoration:none;color:var(--ds-color-text-ui-hover-default, #193d73)}img{max-width:100%}small,.type--small{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-height-xs, 1rem)}.fineprint{font-family:var(--ds-font-family-default, "AS Circular", "Helvetica Neue", Arial, sans-serif);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-height-xs, 1rem);color:var(--ds-color-text-secondary-default, #525252)}.auro-markdown p:last-child{margin-bottom:0}.hljs{background-color:unset !important;padding:unset !important}pre{background:var(--ds-color-brand-gray-100, #f7f7f7) !important;border:unset !important;padding:var(--ds-size-200) !important;margin-bottom:var(--ds-size-300, 1.5rem) !important;border-style:solid !important;border-width:1px !important;border-color:var(--ds-color-border-secondary-default) !important;border-radius:.5rem;margin-top:var(--ds-size-200) !important;box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.1) !important;overflow-x:scroll !important}pre code{font-size:.85rem !important;font-family:monospace;text-shadow:none}.pre-wrapper:last-of-type pre{margin-bottom:0 !important}code:not(.html):not(.css):not(.js):not([class*=language-]){color:var(--ds-color-brand-flamingo-500, #b82b47);margin-bottom:0 !important}.token.operator{background-color:unset !important}auro-accordion:not(.section){margin-top:1rem !important;display:block}auro-accordion:not(.section):nth-child(2){margin-block-start:0}auro-accordion[class~=section]::part(accordion){padding-right:2px;display:block}.accordion-content{padding-top:1rem}.token.operator{background-color:unset !important}auro-accordion:not(auro-accordion-group *){margin-top:1rem !important;display:block}.pre-wrapper{position:relative}.copy-btn{position:absolute;top:6px;right:6px;opacity:0;transition:opacity .15s ease;background:var(--ds-color-container-primary-default, #fff);border:1px solid var(--ds-color-border-secondary-default, #ccc);border-radius:4px;padding:4px 8px;cursor:pointer;font-size:12px;line-height:1;color:var(--ds-color-text-secondary-default, #333);z-index:1}.copy-btn:hover{background:var(--ds-color-container-secondary-default, #f0f0f0)}.pre-wrapper:hover .copy-btn{opacity:1}.exampleWrapper{background-color:var(--ds-basic-color-surface-default);padding:1rem;border-radius:.5rem;margin-top:1rem}.exampleWrapper--ondark{background-color:var(--ds-basic-color-surface-inverse);padding:1rem;border-radius:.5rem;margin-top:1rem}table{--ds-color-container-secondary-default: transparent}table.compressed{width:unset !important;margin:var(--ds-size-50) 0 var(--ds-size-100) !important}table.compressed th,table.compressed td{padding:var(--ds-size-50) !important}tr:not(:last-of-type){border-bottom:1px solid var(--ds-color-border-tertiary-default)}body{padding:0;display:flex;flex-direction:column}main{display:flex;flex-direction:column;min-height:0;flex:1}.contentWrapper{display:flex;flex-direction:row-reverse;gap:25px;align-items:flex-start}.contentWrapper>nav{width:200px;flex-shrink:0;position:sticky;top:0;height:100vh;overflow-y:auto}.contentWrapper>nav auro-nav{display:block}.mainContent{flex:1;display:flex;flex-direction:column;flex-basis:0;box-sizing:border-box;min-width:0}.scrollWrapper{flex:1;min-height:0}auro-nav{max-width:200px;position:sticky;top:2rem;align-self:flex-start;max-height:calc(100vh - 4rem);overflow-y:auto}auro-anchorlink[class~=level2]{padding-left:var(--ds-size-200)}p:first-of-type{margin-top:0}.note,.warning{margin:10px 0;padding:10px;border-radius:6px;font-style:italic}.note{background-color:var(--ds-basic-color-surface-neutral-subtle);color:var(--ds-basic-color-texticon-muted)}.warning{background-color:var(--ds-basic-color-status-error-subtle);color:var(--ds-basic-color-status-error)}auro-header{margin-top:1rem}body{padding:var(--ds-size-400, 2rem)}main{margin:0 auto;max-width:64rem}#page-nav{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;padding:8px 16px;background:var(--ds-color-background-lightest, #fff);border-bottom:1px solid var(--ds-color-border-subtle, #ddd);font-family:var(--ds-text-body-default-font, sans-serif);font-size:.8rem}
+.container{display:grid;margin-left:auto;margin-right:auto;max-width:1232px}.pagecontainer{padding-left:1rem;padding-right:1rem;margin-left:auto;margin-right:auto;max-width:1232px}@media screen and (min-width: 576px){.pagecontainer{padding-left:1rem;padding-right:1rem}}@media screen and (min-width: 768px){.pagecontainer{padding-left:1.5rem;padding-right:1.5rem}}@media screen and (min-width: 1024px){.pagecontainer{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1232px){.pagecontainer{padding-left:2rem;padding-right:2rem}}.pagecontainer.breadcrumbs{margin-block-end:3.35rem}.pageLayout-2colAnchorNav{display:grid;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem;max-width:1232px;grid-template-areas:"breadcrumbs" "anchornav" "main";gap:2rem}@media screen and (min-width: 576px){.pageLayout-2colAnchorNav{gap:var(--ds-grid-gutter-sm, 1rem)}}@media screen and (min-width: 768px){.pageLayout-2colAnchorNav{gap:var(--ds-grid-gutter-md, 1.5rem)}}@media screen and (min-width: 1024px){.pageLayout-2colAnchorNav{gap:var(--ds-grid-gutter-lg, 1.5rem)}}@media screen and (min-width: 1232px){.pageLayout-2colAnchorNav{gap:var(--ds-grid-gutter-xl, 2rem)}}@media screen and (min-width: 576px){.pageLayout-2colAnchorNav{padding-left:1rem;padding-right:1rem}}@media screen and (min-width: 768px){.pageLayout-2colAnchorNav{padding-left:1.5rem;padding-right:1.5rem;grid-template-columns:auto var(--fixed-anchor-width, 168px);grid-template-areas:"breadcrumbs breadcrumbs" "main anchornav"}}@media screen and (min-width: 1024px){.pageLayout-2colAnchorNav{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1232px){.pageLayout-2colAnchorNav{padding-left:2rem;padding-right:2rem}}.pageLayout-2colAnchorNav .breadcrumbs{grid-area:breadcrumbs}.pageLayout-2colAnchorNav .main{grid-area:main}.pageLayout-2colAnchorNav .main *{scroll-margin-top:var(--ds-grid-margin-md, 1.5rem)}.pageLayout-2colAnchorNav .anchornav{grid-area:anchornav}@media screen and (min-width: 768px){.pageLayout-2colAnchorNav .anchornav{position:sticky;top:0;max-height:100vh;padding-top:var(--ds-grid-margin-xl, 2rem)}}.pageLayout-2colSideNav{display:grid;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0;max-width:1232px;grid-template-areas:"breadcrumbs" "sidenav" "main";gap:2rem}@media screen and (min-width: 576px){.pageLayout-2colSideNav{gap:var(--ds-grid-gutter-sm, 1rem)}}@media screen and (min-width: 768px){.pageLayout-2colSideNav{gap:var(--ds-grid-gutter-md, 1.5rem)}}@media screen and (min-width: 1024px){.pageLayout-2colSideNav{gap:var(--ds-grid-gutter-lg, 1.5rem)}}@media screen and (min-width: 1232px){.pageLayout-2colSideNav{gap:var(--ds-grid-gutter-xl, 2rem)}}@media screen and (min-width: 768px){.pageLayout-2colSideNav{padding-left:1.5rem;padding-right:1.5rem;grid-template-columns:var(--fixed-nav-width, 280px) auto;grid-template-areas:"breadcrumbs breadcrumbs" "sidenav main"}}@media screen and (min-width: 1024px){.pageLayout-2colSideNav{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1232px){.pageLayout-2colSideNav{padding-left:2rem;padding-right:2rem}}.pageLayout-2colSideNav .breadcrumbs{grid-area:breadcrumbs;padding-left:1rem;padding-right:1rem}@media screen and (min-width: 768px){.pageLayout-2colSideNav .breadcrumbs{padding-left:0;padding-right:0}}.pageLayout-2colSideNav .sidenav{grid-area:sidenav;background-color:var(--ds-color-container-primary-default, #ffffff);padding-left:1rem;padding-right:1rem}@media screen and (min-width: 768px){.pageLayout-2colSideNav .sidenav{padding-left:0;padding-right:0;background-color:transparent}}.pageLayout-2colSideNav .main{grid-area:main;padding-left:1rem;padding-right:1rem}@media screen and (min-width: 768px){.pageLayout-2colSideNav .main{padding-left:0;padding-right:0}}.pageLayout-2colSideNav .main *{scroll-margin-top:var(--ds-grid-margin-md, 1.5rem)}.pageLayout-3col{display:grid;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0;max-width:1232px;grid-template-areas:"breadcrumbs" "sidenav" "anchornav" "main";gap:2rem}@media screen and (min-width: 576px){.pageLayout-3col{gap:var(--ds-grid-gutter-sm, 1rem)}}@media screen and (min-width: 768px){.pageLayout-3col{gap:var(--ds-grid-gutter-md, 1.5rem)}}@media screen and (min-width: 1024px){.pageLayout-3col{gap:var(--ds-grid-gutter-lg, 1.5rem)}}@media screen and (min-width: 1232px){.pageLayout-3col{gap:var(--ds-grid-gutter-xl, 2rem)}}@media screen and (min-width: 768px){.pageLayout-3col{padding-left:1.5rem;padding-right:1.5rem;grid-template-columns:var(--fixed-nav-width, 280px) auto var(--fixed-anchor-width, 168px);grid-template-areas:"breadcrumbs breadcrumbs breadcrumbs" "sidenav main anchornav"}}@media screen and (min-width: 1024px){.pageLayout-3col{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1232px){.pageLayout-3col{padding-left:2rem;padding-right:2rem}}.pageLayout-3col .breadcrumbs{grid-area:breadcrumbs;padding-left:1rem;padding-right:1rem}@media screen and (min-width: 768px){.pageLayout-3col .breadcrumbs{padding-left:0;padding-right:0}}.pageLayout-3col .sidenav{grid-area:sidenav;z-index:1;background-color:var(--ds-color-container-primary-default, #ffffff);padding-left:1rem;padding-right:1rem;position:sticky;top:0;--align-self: stretch;align-self:var(--align-self)}@media screen and (min-width: 768px){.pageLayout-3col .sidenav{padding-left:0;padding-right:0;background-color:transparent}}.pageLayout-3col .main{grid-area:main;padding-left:1rem;padding-right:1rem}@media screen and (min-width: 768px){.pageLayout-3col .main{padding-left:0;padding-right:0}}.pageLayout-3col .main *{scroll-margin-top:var(--ds-grid-margin-md, 1.5rem)}.pageLayout-3col .anchornav{grid-area:anchornav;padding-left:1rem;padding-right:1rem}@media screen and (min-width: 768px){.pageLayout-3col .anchornav{position:sticky;top:0;max-height:100vh;padding-top:var(--ds-grid-margin-xl, 2rem)}}@media screen and (min-width: 768px){.pageLayout-3col .anchornav{padding-left:0;padding-right:0}}@font-face{font-family:"AS Circular";font-weight:var(--ds-text-heading-display-weight, 100);font-style:normal;font-display:fallback;src:url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/bltd55b385b9432ca51/ASCircularWeb-Light?environment=production") format("woff2"),url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/blt1566a6d54c0bf457/ASCircularWeb-Light?environment=production") format("woff")}@font-face{font-family:"AS Circular";font-weight:var(--ds-text-heading-medium-weight, 300);font-style:normal;font-display:fallback;src:url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/bltc48385a5d7dd0f20/ASCircularWeb-Medium?environment=production") format("woff2"),url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/bltf30c93842722e935/ASCircularWeb-Medium?environment=production") format("woff")}@font-face{font-family:"AS Circular";font-weight:var(--ds-text-body-default-weight, 500);font-style:normal;font-display:fallback;src:url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/blt3b851fb0e0de3833/ASCircularWeb-Book?environment=production") format("woff2"),url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/blt8b440e82e9793058/ASCircularWeb-Book?environment=production") format("woff")}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}main{display:block}hr{overflow:visible;box-sizing:content-box;height:0}pre{font-family:monospace,monospace;font-size:var(--ds-text-body-size-default, 1rem)}a{background-color:transparent}abbr[title]{text-decoration:underline;text-decoration:underline dotted;border-bottom:none}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:var(--ds-text-body-size-default, 1rem)}sub,sup{position:relative;vertical-align:baseline;font-size:75%;line-height:0}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:100%;line-height:var(--ds-text-body-height-default, 1.5rem)}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:none;appearance:none}fieldset{padding:.35em .75em .625em}legend{display:table;box-sizing:border-box;max-width:100%;padding:0;white-space:normal;color:inherit}progress{vertical-align:baseline}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:textfield;appearance:textfield}::-webkit-search-decoration{-webkit-appearance:none;appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button;appearance:button}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.heading,.auro-markdown h1,.auro-markdown h2,.auro-markdown h3{margin:1.75rem 0;letter-spacing:var(--ds-text-heading-default-spacing, -0.2px);font-weight:var(--ds-text-heading-default-weight, 500)}.heading--display,.auro-markdown h1{margin-top:0;font-size:var(--ds-text-heading-display-size-breakpoint-sm, 2.75rem);font-weight:var(--ds-text-heading-display-weight, 100);line-height:var(--ds-text-heading-display-height-breakpoint-sm, 3.375rem)}@media screen and (min-width: 768px){.heading--display,.auro-markdown h1{font-size:var(--ds-text-heading-display-size-breakpoint-md, 3rem);line-height:var(--ds-text-heading-display-height-breakpoint-md, 3.75rem)}}@media screen and (min-width: 1024px){.heading--display,.auro-markdown h1{font-size:var(--ds-text-heading-display-size-breakpoint-lg, 3.5rem);line-height:var(--ds-text-heading-display-height-breakpoint-lg, 4.25rem)}}.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-sm, 2rem);font-weight:var(--ds-text-heading-800-weight, 500);line-height:var(--ds-text-heading-800-height-breakpoint-sm, 2.375rem)}@media screen and (min-width: 768px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-md, 2.25rem);line-height:var(--ds-text-heading-800-height-breakpoint-md, 2.625rem)}}@media screen and (min-width: 1024px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-lg, 2.5rem);line-height:var(--ds-text-heading-800-height-breakpoint-lg, 3rem)}}.heading--700,.auro-markdown h2{font-size:var(--ds-text-heading-700-size-breakpoint-sm, 1.75rem);font-weight:var(--ds-text-heading-700-weight, 500);line-height:var(--ds-text-heading-700-height-breakpoint-sm, 2.125rem)}@media screen and (min-width: 768px){.heading--700,.auro-markdown h2{font-size:var(--ds-text-heading-700-size-breakpoint-md, 2rem);line-height:var(--ds-text-heading-700-height-breakpoint-md, 2.375rem)}}@media screen and (min-width: 1024px){.heading--700,.auro-markdown h2{font-size:var(--ds-text-heading-700-size-breakpoint-lg, 2.25rem);line-height:var(--ds-text-heading-700-height-breakpoint-lg, 2.75rem)}}.heading--600,.auro-markdown h3{margin:1rem 0;font-size:var(--ds-text-heading-600-size-breakpoint-sm, 1.625rem);font-weight:var(--ds-text-heading-600-weight, 300);line-height:var(--ds-text-heading-600-height-breakpoint-sm, 1.875rem)}@media screen and (min-width: 768px){.heading--600,.auro-markdown h3{font-size:var(--ds-text-heading-600-size-breakpoint-md, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-md, 2.125rem)}}@media screen and (min-width: 1024px){.heading--600,.auro-markdown h3{font-size:var(--ds-text-heading-600-size-breakpoint-lg, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-lg, 2.25rem)}}.heading--500,.auro-markdown h4{margin:1rem 0;font-size:var(--ds-text-heading-500-size-breakpoint-sm, 1.375rem);font-weight:var(--ds-text-heading-500-weight, 300);line-height:var(--ds-text-heading-500-height-breakpoint-sm, 1.625rem)}@media screen and (min-width: 768px){.heading--500,.auro-markdown h4{font-size:var(--ds-text-heading-500-size-breakpoint-md, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-md, 1.875rem)}}@media screen and (min-width: 1024px){.heading--500,.auro-markdown h4{font-size:var(--ds-text-heading-500-size-breakpoint-lg, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-lg, 2rem)}}.heading--400{margin:.75rem 0;font-size:var(--ds-text-heading-400-size, 1.25rem);font-weight:var(--ds-text-heading-400-weight, 300);line-height:var(--ds-text-heading-400-height, 1.625rem)}.heading--300{margin:.75rem 0;font-size:var(--ds-text-heading-300-size, 1.125rem);font-weight:var(--ds-text-heading-300-weight, 300);line-height:var(--ds-text-heading-300-height, 1.625rem)}blockquote{margin-left:0;border-left:1px solid var(--ds-color-border-ui-active-default, #225296);padding:var(--ds-size-100, 0.5rem);padding-left:var(--ds-size-400, 2rem);color:var(--ds-color-text-secondary-default, #525252);font-weight:200;margin-top:var(--ds-size-300, 1.5rem);margin-bottom:var(--ds-size-300, 1.5rem)}blockquote p,blockquote .auro-markdown p,.auro-markdown blockquote p{line-height:2}blockquote p:last-child{margin-bottom:0}blockquote+p,.auro-markdown blockquote+p{margin-bottom:var(--ds-size-400, 2rem)}.auro_table,.auro-markdown table{display:block;overflow:scroll;width:auto;margin-bottom:var(--ds-size-400, 2rem);border-spacing:var(--ds-size-150, 0.75rem);border-collapse:collapse;font-weight:var(--ds-text-heading-display-weight, 100)}.auro_table tr:nth-child(even),.auro-markdown table tr:nth-child(even){background-color:var(--ds-color-container-secondary-default, #f7f7f7)}.auro_table th,.auro-markdown table th{text-align:left;font-weight:var(--ds-text-heading-default-weight, 500)}@media screen and (min-width: 576px){.auro_table,.auro-markdown table{display:table;width:100%}}.auro_table thead,.auro-markdown table thead{border-collapse:collapse;border-bottom:1px solid var(--ds-color-border-tertiary-default, #dddddd)}.auro_table th,.auro-markdown table th,.auro_table td,.auro-markdown table td{padding:var(--ds-size-200, 1rem)}*:focus-visible{outline:1px solid var(--ds-color-border-ui-focus-default, #2c67b5)}:focus:not(:focus-visible){outline:3px solid transparent}html{box-sizing:border-box;font-size:var(--ds-text-body-size-default, 1rem);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body,.baseType{margin:0;color:var(--ds-color-text-primary-default, #2a2a2a);font-family:var(--ds-font-family-default, "AS Circular", "Helvetica Neue", Arial, sans-serif);font-variant-ligatures:no-common-ligatures;font-size:var(--ds-text-body-size-default, 1rem);font-weight:var(--ds-text-body-default-weight, 500);line-height:var(--ds-text-body-height-default, 1.5rem)}.baseParagraph{margin:0 0 1rem;line-height:var(--ds-text-body-height-default, 1.5rem)}.baseParagraph .hyperlink{text-decoration:underline}.hyperlink{transition:all .15s ease;text-decoration:underline;color:var(--ds-advanced-color-hyperlink-text);border-radius:3px;outline-offset:unset;outline-style:solid;outline-width:1px;outline-color:transparent}.hyperlink:visited{color:var(--ds-advanced-color-hyperlink-text, #2c67b5)}.hyperlink:focus-visible{outline-color:var(--ds-advanced-color-state-focused, #2c67b5);outline-offset:var(--ds-size-25, 0.125rem)}@media(hover: hover){.hyperlink:hover{text-decoration:none;color:var(--ds-advanced-color-hyperlink-text-hover)}}.hyperlink:focus-visible{outline-color:var(--ds-color-border-ui-focus-default, #2c67b5);outline-offset:var(--ds-size-25, 0.125rem)}.hyperlink--nav{display:block;text-decoration:none}@media(hover: hover){.hyperlink--nav:hover{text-decoration:underline}}.hyperlink--nav:focus-visible{outline-width:var(--ds-size-50, 0.25rem);outline-offset:unset}.hyperlink--ondark{color:var(--ds-advanced-color-hyperlink-text-inverse)}@media(hover: hover){.hyperlink--ondark:hover{color:var(--ds-advanced-color-hyperlink-text-inverse-hover)}}.hyperlink--ondark:visited{color:var(--ds-advanced-color-hyperlink-text-inverse)}img{max-width:100%}small,.type--small{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-height-xs, 1rem)}.fineprint{font-family:var(--ds-font-family-default, "AS Circular", "Helvetica Neue", Arial, sans-serif);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-height-xs, 1rem);color:var(--ds-color-text-secondary-default, #525252)}.auro-markdown p:last-child{margin-bottom:0}.hljs{background-color:unset !important;padding:unset !important}pre{background:var(--ds-color-brand-gray-100, #f7f7f7) !important;border:unset !important;padding:var(--ds-size-200) !important;margin-bottom:var(--ds-size-300, 1.5rem) !important;border-style:solid !important;border-width:1px !important;border-color:var(--ds-color-border-secondary-default) !important;border-radius:.5rem;margin-top:var(--ds-size-200) !important;box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.1) !important;overflow-x:scroll !important}pre code{font-size:.85rem !important;font-family:monospace;text-shadow:none}.pre-wrapper:last-of-type pre{margin-bottom:0 !important}code:not(.html):not(.css):not(.js):not([class*=language-]){color:var(--ds-color-brand-flamingo-500, #b82b47);margin-bottom:0 !important}.token.operator{background-color:unset !important}auro-accordion:not(.section){margin-top:1rem !important;display:block}auro-accordion:not(.section):nth-child(2){margin-block-start:0}auro-accordion[class~=section]::part(accordion){padding-right:2px;display:block}.accordion-content{padding-top:1rem}.token.operator{background-color:unset !important}auro-accordion:not(auro-accordion-group *){margin-top:1rem !important;display:block}.pre-wrapper{position:relative}.copy-btn{position:absolute;top:6px;right:6px;opacity:0;transition:opacity .15s ease;background:var(--ds-color-container-primary-default, #fff);border:1px solid var(--ds-color-border-secondary-default, #ccc);border-radius:4px;padding:4px 8px;cursor:pointer;font-size:12px;line-height:1;color:var(--ds-color-text-secondary-default, #333);z-index:1}.copy-btn:hover{background:var(--ds-color-container-secondary-default, #f0f0f0)}.pre-wrapper:hover .copy-btn{opacity:1}.exampleWrapper{background-color:var(--ds-basic-color-surface-default);padding:1rem;border-radius:.5rem;margin-top:1rem}.exampleWrapper--ondark{background-color:var(--ds-basic-color-surface-inverse);padding:1rem;border-radius:.5rem;margin-top:1rem}table{--ds-color-container-secondary-default: transparent}table.compressed{width:unset !important;margin:var(--ds-size-50) 0 var(--ds-size-100) !important}table.compressed th,table.compressed td{padding:var(--ds-size-50) !important}tr:not(:last-of-type){border-bottom:1px solid var(--ds-color-border-tertiary-default)}body{padding:0;display:flex;flex-direction:column}main{display:flex;flex-direction:column;min-height:0;flex:1}.contentWrapper{display:flex;flex-direction:row-reverse;gap:25px;align-items:flex-start}.contentWrapper>nav{width:200px;flex-shrink:0;position:sticky;top:0;height:100vh;overflow-y:auto}.contentWrapper>nav auro-nav{display:block}.mainContent{flex:1;display:flex;flex-direction:column;flex-basis:0;box-sizing:border-box;min-width:0}.scrollWrapper{flex:1;min-height:0}auro-nav{max-width:200px;position:sticky;top:2rem;align-self:flex-start;max-height:calc(100vh - 4rem);overflow-y:auto}auro-anchorlink[class~=level2]{padding-left:var(--ds-size-200)}p:first-of-type{margin-top:0}.note,.warning{margin:10px 0;padding:10px;border-radius:6px;font-style:italic}.note{background-color:var(--ds-basic-color-surface-neutral-subtle);color:var(--ds-basic-color-texticon-muted)}.warning{background-color:var(--ds-basic-color-status-error-subtle);color:var(--ds-basic-color-status-error)}auro-header{margin-top:1rem}body{padding:var(--ds-size-400, 2rem)}main{margin:0 auto;max-width:64rem}#page-nav{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;padding:8px 16px;background:var(--ds-color-background-lightest, #fff);border-bottom:1px solid var(--ds-color-border-subtle, #ddd);font-family:var(--ds-text-body-default-font, sans-serif);font-size:.8rem}

package/components/form/demo/why-form.html

@@ -0,0 +1,57 @@
+<!--
+  Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+  See LICENSE in the project root for license information.
+
+  HTML in this document is standardized and NOT to be edited.
+  All demo code should be added/edited in ./demo/why-form.md
+
+  With the exception of adding custom elements if needed for the demo.
+
+  ----------------------- DO NOT EDIT -----------------------------
+
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Auro Web Component Demo | auro-form | Why auro-form</title>
+
+    <!-- highlight.js Stylesheet -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css"/>
+
+    <!-- Legacy reference is still needed to support auro-form's use of legacy token values at this time -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
+
+    <!-- Design Token Alaska Theme -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
+
+    <!-- Webcore Stylesheet Alaska Theme -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
+
+    <!-- Demo Specific Styles -->
+    <link rel="stylesheet" type="text/css" href="./styles.min.css" />
+    <style>
+      table {
+        --ds-color-container-secondary-default: transparent;
+      }
+
+      tr:not(:last-of-type) {
+        border-bottom: 1px solid var(--ds-color-border-tertiary-default);
+      }
+    </style>
+  </head>
+  <body class="auro-markdown">
+    <main></main>
+
+    <script type="module">
+      import { renderPage } from './demo-support.min.js';
+      await renderPage('./why-form.md');
+    </script>
+
+    <!-- If additional elements are needed for the demo, add them here. -->
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
+  </body>
+</html>

package/components/form/demo/why-form.md

@@ -0,0 +1,101 @@
+<auro-header level="1" id="overview">Why auro-form?</auro-header>
+<p>The native <code>&lt;form&gt;</code> element handles submission and reset for standard HTML inputs, but it has no awareness of web components, cannot orchestrate validation across custom elements, and provides no centralized state management. <code>auro-form</code> fills these gaps for applications built with Auro components.</p>
+<auro-header level="2" id="customElementAwareness">Custom element awareness</auro-header>
+<p>Native <code>&lt;form&gt;</code> relies on the browser's form association API, which web components must explicitly opt into via <code>ElementInternals</code>. Even when they do, coordinating validation state, required fields, and submission values across a mix of Auro components requires custom JavaScript.</p>
+<p><code>auro-form</code> automatically discovers and manages:</p>
+<ul>
+<li><code>auro-input</code></li>
+<li><code>auro-select</code></li>
+<li><code>auro-datepicker</code></li>
+<li><code>auro-combobox</code></li>
+<li><code>auro-checkbox-group</code></li>
+<li><code>auro-radio-group</code></li>
+<li><code>auro-counter-group</code></li>
+</ul>
+<p>New elements added to the DOM are detected via <code>MutationObserver</code> and integrated automatically.</p>
+<auro-header level="2" id="validationOrchestration">Validation orchestration</auro-header>
+<p>Native forms validate each input independently. There is no built-in way to check "are all required fields valid?" without querying each element manually.</p>
+<p><code>auro-form</code> provides:</p>
+<ul>
+<li>A single <code>validity</code> getter that returns <code>'valid'</code>, <code>'invalid'</code>, or <code>null</code> based on the aggregate state of all child form elements</li>
+<li>Automatic validation of all elements on <code>submit()</code> — each element's <code>validate(true)</code> is called to force error display</li>
+<li>Per-element validity tracking via an internal <code>formState</code> object</li>
+<li>Listening for <code>auroFormElement-validated</code> events from child components to stay in sync</li>
+</ul>
+<auro-header level="2" id="centralizedState">Centralized state</auro-header>
+<p>Native forms have no concept of "has the user touched anything?" or "what are all the current values?"</p>
+<p><code>auro-form</code> tracks:</p>
+<ul>
+<li><strong><code>value</code></strong> — A key-value object of all form element values, keyed by element <code>name</code></li>
+<li><strong><code>isInitialState</code></strong> — Whether any element has been modified since initialization</li>
+<li><strong>Submit/reset button state</strong> — Submit and reset buttons are automatically disabled based on form state (e.g., reset is disabled when the form is in its initial state)</li>
+</ul>
+<auro-header level="2" id="submitAndReset">Submit and reset</auro-header>
+<p>Native form submission navigates to a URL or requires <code>event.preventDefault()</code> and manual value extraction.</p>
+<p><code>auro-form</code> simplifies this:</p>
+<ul>
+<li><strong><code>submit()</code></strong> — Validates all elements. If valid, dispatches a <code>submit</code> event with a <code>detail.value</code> object containing all form values. No page navigation.</li>
+<li><strong><code>reset()</code></strong> — Resets all child elements to their initial state, dispatches a <code>reset</code> event with <code>detail.previousValue</code> containing the pre-reset values.</li>
+<li><strong>Enter key</strong> — Pressing Enter on a form element triggers <code>submit()</code>, matching native form behavior. Textareas are excluded to allow newlines.</li>
+</ul>
+<auro-header level="2" id="eventNormalization">Event normalization</auro-header>
+<p>Each Auro component dispatches its own events (<code>auroSelect-valueSet</code>, <code>auroDatePicker-valueSet</code>, etc.). Listening for all of these individually is error-prone.</p>
+<p><code>auro-form</code> normalizes events:</p>
+<ul>
+<li><code>input</code> — Fired when any child element receives user input</li>
+<li><code>change</code> — Fired when any child element's value changes, or when the form is initialized</li>
+<li><code>submit</code> — Fired with aggregated form values on valid submission</li>
+<li><code>reset</code> — Fired with previous values on reset</li>
+</ul>
+<auro-header level="2" id="summary">Summary</auro-header>
+<table>
+<thead>
+<tr>
+<th>Capability</th>
+<th><code>&lt;form&gt;</code></th>
+<th><code>auro-form</code></th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>Web component discovery</td>
+<td>Manual</td>
+<td>Automatic (MutationObserver)</td>
+</tr>
+<tr>
+<td>Aggregate validity</td>
+<td>Manual querying</td>
+<td>Single <code>validity</code> getter</td>
+</tr>
+<tr>
+<td>Centralized values</td>
+<td><code>FormData</code> (native inputs only)</td>
+<td><code>value</code> object (all Auro components)</td>
+</tr>
+<tr>
+<td>Force validation on submit</td>
+<td>Manual per-element</td>
+<td>Automatic</td>
+</tr>
+<tr>
+<td>Submit button auto-disable</td>
+<td>No</td>
+<td>Yes</td>
+</tr>
+<tr>
+<td>Reset to initial state</td>
+<td>Native inputs only</td>
+<td>All Auro components</td>
+</tr>
+<tr>
+<td>Enter key submit</td>
+<td>Native inputs only</td>
+<td>All Auro components</td>
+</tr>
+<tr>
+<td>Event normalization</td>
+<td>No</td>
+<td>Unified input/change/submit/reset</td>
+</tr>
+</tbody>
+</table>

package/components/input/demo/css-only.html

@@ -0,0 +1,57 @@
+<!--
+  Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+  See LICENSE in the project root for license information.
+
+  HTML in this document is standardized and NOT to be edited.
+  All demo code should be added/edited in ./demo/css-only.md
+
+  With the exception of adding custom elements if needed for the demo.
+
+  ----------------------- DO NOT EDIT -----------------------------
+
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Auro Web Component Demo | auro-input | CSS only</title>
+
+    <!-- highlight.js Stylesheet -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css"/>
+
+    <!-- Legacy reference is still needed to support auro-input's use of legacy token values at this time -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
+
+    <!-- Design Token Alaska Theme -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
+
+    <!-- Webcore Stylesheet Alaska Theme -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
+
+    <!-- Demo Specific Styles -->
+    <link rel="stylesheet" type="text/css" href="./styles.min.css" />
+    <style>
+      table {
+        --ds-color-container-secondary-default: transparent;
+      }
+
+      tr:not(:last-of-type) {
+        border-bottom: 1px solid var(--ds-color-border-tertiary-default);
+      }
+    </style>
+  </head>
+  <body class="auro-markdown">
+    <main></main>
+
+    <script type="module">
+      import { renderPage } from './demo-support.min.js';
+      await renderPage('./css-only.md');
+    </script>
+
+    <!-- If additional elements are needed for the demo, add them here. -->
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
+  </body>
+</html>

package/components/input/demo/css-only.md

@@ -0,0 +1,199 @@
+<auro-header level="1">CSS only with native input</auro-header>
+<p>For situations where the <code>&lt;auro-input&gt;</code> web component cannot be used, a native HTML <code>&lt;input&gt;</code> element can be styled with the Auro Design System tokens to approximate the visual appearance of <code>auro-input</code>. Unlike <auro-hyperlink href="https://auro.alaskaair.com/components/auro/hyperlink/css-only" target="_blank">auro-hyperlink</auro-hyperlink>, <auro-hyperlink href="https://alaskaairlines.github.io/WebCoreStyleSheets/" target="_blank">Web Core Style Sheets</auro-hyperlink> does not provide a prebuilt <code>.input</code> or <code>.form-*</code> class, so the styling must be authored manually using Auro design tokens.</p>
+<auro-header level="2">Styling a native input</auro-header>
+<p>The native input can be reset and restyled with the Auro design tokens published by <auro-hyperlink href="https://alaskaairlines.github.io/WebCoreStyleSheets/" target="_blank">@aurodesignsystem/design-tokens</auro-hyperlink>. The pattern below replicates the border, focus ring, padding, label, and helper text used by <code>auro-input</code>.</p>
+<pre><code>@import "./node_modules/@aurodesignsystem/design-tokens/dist/tokens/CSSCustomProperties.css";
+​
+.input-field {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  height: var(--ds-size-600, 3rem);
+  padding: 0 var(--ds-size-200, 1rem);
+  font-family: var(--ds-font-family-default, sans-serif);
+  font-size: var(--ds-text-body-default-size, 1rem);
+  line-height: var(--ds-text-body-default-line-height, 1.5);
+  color: var(--ds-color-text-primary-default, #1d1d1d);
+  background-color: var(--ds-color-container-primary-default, #ffffff);
+  border: 1px solid var(--ds-color-border-ui-default, #6e767f);
+  border-radius: var(--ds-border-radius, 4px);
+  outline: none;
+}
+​
+.input-field:focus-visible {
+  border-color: var(--ds-color-border-active-default, #01426a);
+  outline: 2px solid var(--ds-color-border-active-default, #01426a);
+  outline-offset: 1px;
+}
+​
+.input-field:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+​
+.input-field[aria-invalid="true"] {
+  border-color: var(--ds-color-border-error-default, #d50032);
+}
+​
+.input-label {
+  display: block;
+  margin-bottom: var(--ds-size-50, 0.25rem);
+  font-size: var(--ds-text-body-sm-size, 0.875rem);
+  color: var(--ds-color-text-secondary-default, #6e767f);
+}
+​
+.input-helptext {
+  display: block;
+  margin-top: var(--ds-size-50, 0.25rem);
+  font-size: var(--ds-text-body-sm-size, 0.875rem);
+  color: var(--ds-color-text-secondary-default, #6e767f);
+}
+​
+.input-helptext[data-error="true"] {
+  color: var(--ds-color-text-error-default, #d50032);
+}</code></pre>
+<auro-header level="3">Text input</auro-header>
+<p>Apply the <code>.input-field</code> class to a native <code>&lt;input type="text"&gt;</code> element and pair it with a <code>&lt;label&gt;</code> using <code>for</code>/<code>id</code>:</p>
+<pre><code>&lt;label class="input-label" for="name"&gt;Full name&lt;/label&gt;
+&lt;input id="name" type="text" class="input-field" name="name" /&gt;</code></pre>
+<auro-header level="3">Email input</auro-header>
+<p>Use <code>type="email"</code> to surface the browser's built-in email format validation:</p>
+<pre><code>&lt;label class="input-label" for="email"&gt;Email address&lt;/label&gt;
+&lt;input id="email" type="email" class="input-field" name="email" required /&gt;</code></pre>
+<auro-header level="3">Password input</auro-header>
+<p>Use <code>type="password"</code> to mask the entered value. Note that the show/hide toggle provided by <code>auro-input</code> is not present:</p>
+<pre><code>&lt;label class="input-label" for="password"&gt;Password&lt;/label&gt;
+&lt;input id="password" type="password" class="input-field" name="password" /&gt;</code></pre>
+<auro-header level="3">Number input</auro-header>
+<p>Use <code>type="number"</code> with <code>min</code>, <code>max</code>, and <code>step</code> for numeric constraints:</p>
+<pre><code>&lt;label class="input-label" for="qty"&gt;Quantity&lt;/label&gt;
+&lt;input id="qty" type="number" class="input-field" name="qty" min="1" max="9" step="1" /&gt;</code></pre>
+<auro-header level="3">Helper text</auro-header>
+<p>Pair the input with a sibling element and wire it up via <code>aria-describedby</code> so assistive technology announces the helper content:</p>
+<pre><code>&lt;label class="input-label" for="username"&gt;Username&lt;/label&gt;
+&lt;input id="username" type="text" class="input-field" name="username" aria-describedby="username-help" /&gt;
+&lt;span id="username-help" class="input-helptext"&gt;Must be 3-20 characters.&lt;/span&gt;</code></pre>
+<auro-header level="3">Error state</auro-header>
+<p>Toggle <code>aria-invalid="true"</code> on the input and switch the helper text to error styling to communicate validation failure:</p>
+<pre><code>&lt;label class="input-label" for="email-error"&gt;Email address&lt;/label&gt;
+&lt;input id="email-error" type="email" class="input-field" name="email" aria-invalid="true" aria-describedby="email-error-msg" /&gt;
+&lt;span id="email-error-msg" class="input-helptext" data-error="true"&gt;Enter a valid email address.&lt;/span&gt;</code></pre>
+<auro-header level="2">What you lose without auro-input</auro-header>
+<p>While the CSS above replicates the <strong>visual styling</strong> of <code>auro-input</code>, the following functionality built into the <code>auro-input</code> web component is <strong>not available</strong> when using plain HTML:</p>
+<auro-header level="3">Input masking</auro-header>
+<p><code>auro-input</code> integrates IMask to apply format patterns as the user types — for example <code>format="(###) ###-####"</code> for phone numbers or <code>format="mm/dd/yyyy"</code> for dates. Native inputs have no concept of input masks, so you must integrate a third-party masking library and manage cursor position, paste handling, and value reconciliation yourself.</p>
+<auro-header level="3">Credit-card formatting and detection</auro-header>
+<p><code>auro-input</code> with <code>type="credit-card"</code> auto-detects Visa, Mastercard, American Express, Discover, Diners Club, and Alaska Airlines cards from the first digits, applies the correct digit grouping (e.g., 4-4-4-4 for Visa, 4-6-5 for Amex), displays the matching card brand icon, and validates with the Luhn algorithm. None of this is available natively.</p>
+<auro-header level="3">Password show/hide toggle</auro-header>
+<p><code>auro-input</code> with <code>type="password"</code> includes an accessible show/hide toggle with customizable ARIA labels via the <code>ariaLabel.password.show</code> and <code>ariaLabel.password.hide</code> slots. A native password input only masks the value — you must build the toggle button, swap the <code>type</code> attribute, and manage its accessible name yourself.</p>
+<auro-header level="3">Clear button</auro-header>
+<p><code>auro-input</code> renders an accessible clear button when the field has a value, with a customizable ARIA label via the <code>ariaLabel.clear</code> slot. Native inputs do not provide a clear control beyond the browser's built-in (and inconsistently styled) <code>type="search"</code> affordance.</p>
+<auro-header level="3">Custom validation messages</auro-header>
+<p><code>auro-input</code> exposes a full set of per-constraint setters — <code>setCustomValidityValueMissing</code>, <code>setCustomValidityRangeOverflow</code>, <code>setCustomValidityRangeUnderflow</code>, <code>setCustomValidityTooLong</code>, <code>setCustomValidityTooShort</code>, <code>setCustomValidityBadInput</code>, <code>setCustomValidityCustomError</code>, and <code>setCustomValidityForType</code>. Native inputs surface browser-controlled validation messages that cannot be customized beyond a single <code>setCustomValidity()</code> string.</p>
+<auro-header level="3">Format types</auro-header>
+<p><code>auro-input</code> ships dedicated <code>type</code> values for <code>credit-card</code>, <code>month-day-year</code>, <code>year-month-day</code>, <code>day-month-year</code>, <code>month-year</code>, <code>month-fullYear</code>, and <code>year-month</code>, each applying the correct mask, validation, and accent icon. With native HTML you are limited to the standard input types and must implement format-specific behavior by hand.</p>
+<auro-header level="3">Floating and dynamic labels</auro-header>
+<p><code>auro-input</code> floats the label above the field when it is focused or populated, and automatically associates slotted label content with the underlying input. With native HTML you must wire up <code>for</code>/<code>id</code> attributes and author the floating-label animation yourself.</p>
+<auro-header level="3">Display value slot</auro-header>
+<p><code>auro-input</code> supports a <code>displayValue</code> slot that renders custom HTML in place of the raw value when the input is blurred — useful for masked account numbers or formatted currency. Native inputs always show the raw value and have no equivalent.</p>
+<auro-header level="3">Layout and shape variants</auro-header>
+<p><code>auro-input</code> supports classic, emphasized, and snowflake layouts, as well as <code>shape</code> variants (<code>box</code>, <code>pill</code>, <code>pill-left</code>, <code>pill-right</code>). A bordered default and a borderless <code>simple</code> mode are also provided. With native HTML you must author each variant's CSS yourself.</p>
+<auro-header level="3">Icon slots and accents</auro-header>
+<p><code>auro-input</code> renders left and right accent slots and an automatic accent icon for typed formats (credit-card brand icon, calendar icon for date types). Native inputs have no slotting mechanism, so icons must be positioned via wrapper elements and absolute positioning.</p>
+<auro-header level="3">Help text and error slots</auro-header>
+<p><code>auro-input</code> exposes a <code>helpText</code> slot that automatically swaps to the validation error message when the field is invalid, with the correct ARIA wiring and color treatment. With native HTML you must manage <code>aria-describedby</code>, error-state styling, and the switch between help and error content yourself.</p>
+<auro-header level="3">Validation timing control</auro-header>
+<p><code>auro-input</code> supports <code>validateOnInput</code> to validate on every keystroke, <code>noValidate</code> to disable validation, and tracks touched state so errors do not appear before the user has interacted with the field. Native inputs validate on submit and have no built-in touched concept.</p>
+<auro-header level="3">Form integration events</auro-header>
+<p><code>auro-input</code> dispatches <code>auroFormElement-validated</code> events so a parent <code>auro-form</code> can coordinate validation across all child fields. Native inputs participate in form submission but do not emit the structured validation events that the Auro form system expects.</p>
+<auro-header level="3">Multi-brand theming</auro-header>
+<p><code>auro-input</code> consumes Auro design tokens through its component logic, so it automatically picks up brand-specific theming when token packages are swapped. A CSS-only input is tied to whichever tokens were imported at author time and will not respond to runtime theme switching the way the web component does.</p>
+<auro-header level="2">Summary</auro-header>
+<table>
+<thead>
+<tr>
+<th>Feature</th>
+<th>Native <code>&lt;input&gt;</code> with Auro tokens</th>
+<th><code>auro-input</code></th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>Design-system-aligned styling</td>
+<td>Manual (author-written CSS)</td>
+<td>Built-in</td>
+</tr>
+<tr>
+<td>Input masking</td>
+<td>Not supported</td>
+<td>Built-in via IMask and <code>format</code></td>
+</tr>
+<tr>
+<td>Credit-card detection and formatting</td>
+<td>Not supported</td>
+<td>Auto-detect with icon and Luhn check</td>
+</tr>
+<tr>
+<td>Password show/hide toggle</td>
+<td>Not supported</td>
+<td>Built-in</td>
+</tr>
+<tr>
+<td>Clear button</td>
+<td>Not supported</td>
+<td>Built-in with ARIA label</td>
+</tr>
+<tr>
+<td>Custom validation messages</td>
+<td>Limited to <code>setCustomValidity()</code></td>
+<td>Per-constraint custom messages</td>
+</tr>
+<tr>
+<td>Format types (date, credit-card, etc.)</td>
+<td>Standard input types only</td>
+<td>Dedicated <code>type</code> values</td>
+</tr>
+<tr>
+<td>Floating label</td>
+<td>Manual</td>
+<td>Automatic</td>
+</tr>
+<tr>
+<td>Display value slot</td>
+<td>Not supported</td>
+<td><code>displayValue</code> slot</td>
+</tr>
+<tr>
+<td>Bordered/borderless variants</td>
+<td>Manual CSS</td>
+<td><code>simple</code>, <code>shape</code>, layout attributes</td>
+</tr>
+<tr>
+<td>Icon slots / accents</td>
+<td>Manual wrapper + positioning</td>
+<td>Left/right accent slots</td>
+</tr>
+<tr>
+<td>Helper / error slot swap</td>
+<td>Manual <code>aria-describedby</code></td>
+<td>Automatic</td>
+</tr>
+<tr>
+<td>Validation timing / touched state</td>
+<td>Manual</td>
+<td><code>validateOnInput</code>, <code>noValidate</code>, automatic touched tracking</td>
+</tr>
+<tr>
+<td>Form validation events</td>
+<td>Not supported</td>
+<td><code>auroFormElement-validated</code></td>
+</tr>
+<tr>
+<td>Multi-brand theming</td>
+<td>Static (import-time tokens)</td>
+<td>Full (design tokens + component logic)</td>
+</tr>
+</tbody>
+</table>
+<auro-header level="2">Recommendation</auro-header>
+<p>Use <code>auro-input</code> whenever possible. Fall back to a CSS-styled native input only in environments where custom elements are not supported or when integrating with third-party systems that require plain HTML — and be prepared to reimplement masking, format-specific validation, clear and password toggles, touched tracking, and label/help/error wiring yourself.</p>

package/components/input/demo/customize.min.js

@@ -12178,7 +12178,7 @@ class AuroHelpText extends i$3 {
   }
 }
 
-var formkitVersion = '202606081518';
+var formkitVersion = '202606081833';
 
 /**
  * @license

package/components/input/demo/getting-started.min.js

@@ -12178,7 +12178,7 @@ class AuroHelpText extends i$3 {
   }
 }
 
-var formkitVersion = '202606081518';
+var formkitVersion = '202606081833';
 
 /**
  * @license

package/components/input/demo/index.min.js

@@ -12178,7 +12178,7 @@ class AuroHelpText extends i$3 {
   }
 }
 
-var formkitVersion = '202606081518';
+var formkitVersion = '202606081833';
 
 /**
  * @license

package/components/input/demo/pages.json

@@ -1 +1 @@
-["accessibility.md","api.md","customize.md","design.md","getting-started.md","index.md","keyboard-behavior.md","voiceover.md","readme.md"]
+["accessibility.md","api.md","css-only.md","customize.md","design.md","getting-started.md","index.md","keyboard-behavior.md","voiceover.md","why-input.md","readme.md"]