@aurodesignsystem/auro-formkit 6.1.0 → 6.2.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.
- package/CHANGELOG.md +24 -16
- package/components/bibtemplate/dist/auro-bibtemplate.d.ts +11 -0
- package/components/bibtemplate/dist/index.js +17 -4
- package/components/bibtemplate/dist/registered.js +17 -4
- package/components/checkbox/demo/accessibility.md +15 -4
- package/components/checkbox/demo/api.md +20 -13
- package/components/checkbox/demo/customize.md +2 -1
- package/components/checkbox/demo/customize.min.js +129 -29
- package/components/checkbox/demo/getting-started.min.js +129 -29
- package/components/checkbox/demo/index.min.js +129 -29
- package/components/checkbox/demo/styles.min.css +1 -1
- package/components/checkbox/dist/auro-checkbox-group.d.ts +33 -0
- package/components/checkbox/dist/auro-checkbox.d.ts +7 -2
- package/components/checkbox/dist/index.js +129 -29
- package/components/checkbox/dist/registered.js +129 -29
- package/components/combobox/demo/api.md +27 -19
- package/components/combobox/demo/customize.min.js +676 -151
- package/components/combobox/demo/getting-started.md +49 -0
- package/components/combobox/demo/getting-started.min.js +695 -151
- package/components/combobox/demo/index.min.js +676 -151
- package/components/combobox/demo/styles.min.css +1 -1
- package/components/combobox/dist/auro-combobox.d.ts +72 -27
- package/components/combobox/dist/index.js +569 -133
- package/components/combobox/dist/registered.js +569 -133
- package/components/counter/demo/api.md +36 -16
- package/components/counter/demo/customize.min.js +692 -105
- package/components/counter/demo/getting-started.html +3 -1
- package/components/counter/demo/getting-started.md +49 -0
- package/components/counter/demo/getting-started.min.js +8808 -0
- package/components/counter/demo/index.min.js +692 -105
- package/components/counter/demo/styles.min.css +1 -1
- package/components/counter/dist/auro-counter-button.d.ts +4 -0
- package/components/counter/dist/auro-counter-group.d.ts +38 -6
- package/components/counter/dist/auro-counter.d.ts +33 -0
- package/components/counter/dist/counterGroupKeyboardStrategy.d.ts +1 -0
- package/components/counter/dist/index.js +691 -104
- package/components/counter/dist/registered.js +691 -104
- package/components/datepicker/demo/api.md +55 -49
- package/components/datepicker/demo/customize.min.js +659 -166
- package/components/datepicker/demo/getting-started.html +3 -1
- package/components/datepicker/demo/getting-started.md +39 -0
- package/components/datepicker/demo/getting-started.min.js +37669 -0
- package/components/datepicker/demo/index.min.js +659 -166
- package/components/datepicker/demo/styles.min.css +1 -1
- package/components/datepicker/dist/auro-calendar-cell.d.ts +58 -4
- package/components/datepicker/dist/auro-calendar-month.d.ts +10 -4
- package/components/datepicker/dist/auro-calendar.d.ts +25 -6
- package/components/datepicker/dist/auro-datepicker.d.ts +75 -24
- package/components/datepicker/dist/index.js +658 -165
- package/components/datepicker/dist/registered.js +658 -165
- package/components/dropdown/demo/api.md +25 -22
- package/components/dropdown/demo/customize.min.js +217 -43
- package/components/dropdown/demo/getting-started.min.js +364 -95
- package/components/dropdown/demo/index.min.js +217 -43
- package/components/dropdown/demo/styles.min.css +1 -1
- package/components/dropdown/dist/auro-dropdown.d.ts +35 -8
- package/components/dropdown/dist/auro-dropdownBib.d.ts +17 -5
- package/components/dropdown/dist/index.js +217 -43
- package/components/dropdown/dist/registered.js +217 -43
- package/components/form/demo/customize.min.js +2739 -628
- package/components/form/demo/getting-started.min.js +2739 -628
- package/components/form/demo/index.min.js +2739 -628
- package/components/form/demo/registerDemoDeps.min.js +2733 -627
- package/components/form/demo/styles.min.css +1 -1
- package/components/form/dist/index.js +6 -1
- package/components/form/dist/registered.js +6 -1
- package/components/helptext/dist/auro-helptext.d.ts +9 -7
- package/components/helptext/dist/index.js +9 -3
- package/components/helptext/dist/registered.js +9 -3
- package/components/input/demo/api.md +30 -30
- package/components/input/demo/customize.md +0 -37
- package/components/input/demo/customize.min.js +147 -61
- package/components/input/demo/getting-started.md +33 -0
- package/components/input/demo/getting-started.min.js +167 -52
- package/components/input/demo/index.min.js +147 -52
- package/components/input/demo/styles.min.css +1 -1
- package/components/input/dist/base-input.d.ts +80 -25
- package/components/input/dist/index.js +146 -51
- package/components/input/dist/registered.js +146 -51
- package/components/layoutElement/dist/auroElement.d.ts +10 -17
- package/components/layoutElement/dist/index.js +20 -20
- package/components/layoutElement/dist/registered.js +20 -20
- package/components/menu/demo/api.md +31 -27
- package/components/menu/demo/index.min.js +126 -37
- package/components/menu/demo/styles.min.css +1 -1
- package/components/menu/dist/auro-menu.d.ts +26 -21
- package/components/menu/dist/auro-menuoption.d.ts +27 -1
- package/components/menu/dist/index.js +126 -37
- package/components/menu/dist/registered.js +126 -37
- package/components/radio/demo/accessibility.md +15 -4
- package/components/radio/demo/api.md +10 -9
- package/components/radio/demo/customize.min.js +120 -27
- package/components/radio/demo/getting-started.min.js +120 -27
- package/components/radio/demo/index.min.js +120 -27
- package/components/radio/demo/styles.min.css +1 -1
- package/components/radio/dist/auro-radio-group.d.ts +31 -3
- package/components/radio/dist/auro-radio.d.ts +4 -2
- package/components/radio/dist/index.js +120 -27
- package/components/radio/dist/registered.js +120 -27
- package/components/select/demo/api.md +18 -15
- package/components/select/demo/customize.min.js +396 -94
- package/components/select/demo/getting-started.md +49 -0
- package/components/select/demo/getting-started.min.js +418 -95
- package/components/select/demo/index.min.js +396 -94
- package/components/select/demo/styles.min.css +1 -1
- package/components/select/dist/auro-select.d.ts +18 -0
- package/components/select/dist/index.js +289 -76
- package/components/select/dist/registered.js +289 -76
- package/custom-elements.json +1354 -1404
- package/package.json +11 -11
|
@@ -1 +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;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}
|
|
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;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:none;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}
|
|
@@ -10,7 +10,8 @@
|
|
|
10
10
|
* @slot label - Defines the content of the label.
|
|
11
11
|
* @slot helpText - Defines the content of the helpText.
|
|
12
12
|
* @slot displayValue - Allows custom HTML content to display the selected value when the combobox is not focused. Only works with `snowflake` and `emphasized` layouts.
|
|
13
|
-
* @
|
|
13
|
+
* @csspart helpText - The help text and error message content container.
|
|
14
|
+
* @event auroCombobox-valueSet - Notifies that the component has a new value set. **DEPRECATED** - Use the `input` event instead.
|
|
14
15
|
* @event input - Notifies that the component has a new value set.
|
|
15
16
|
* @event inputValue - Notifies that the components internal HTML5 input value has changed.
|
|
16
17
|
* @event auroFormElement-validated - Notifies that the component value(s) have been validated.
|
|
@@ -19,13 +20,10 @@ export class AuroCombobox extends AuroElement {
|
|
|
19
20
|
static get properties(): {
|
|
20
21
|
/**
|
|
21
22
|
* Defines whether the component will be on lighter or darker backgrounds.
|
|
22
|
-
* @
|
|
23
|
+
* @type {'default' | 'inverse'}
|
|
23
24
|
* @default 'default'
|
|
24
25
|
*/
|
|
25
|
-
appearance:
|
|
26
|
-
type: StringConstructor;
|
|
27
|
-
reflect: boolean;
|
|
28
|
-
};
|
|
26
|
+
appearance: "default" | "inverse";
|
|
29
27
|
/**
|
|
30
28
|
* An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported.
|
|
31
29
|
*/
|
|
@@ -38,19 +36,16 @@ export class AuroCombobox extends AuroElement {
|
|
|
38
36
|
*/
|
|
39
37
|
autoPlacement: {
|
|
40
38
|
type: BooleanConstructor;
|
|
39
|
+
attribute: string;
|
|
41
40
|
reflect: boolean;
|
|
42
41
|
};
|
|
43
42
|
/**
|
|
44
43
|
* Array of available options to display in the dropdown.
|
|
45
44
|
* This array contains all non-hidden options (e.g., hidden by filtering on input value).
|
|
46
45
|
* @private
|
|
46
|
+
* @type {HTMLElement[]}
|
|
47
47
|
*/
|
|
48
|
-
availableOptions:
|
|
49
|
-
state: boolean;
|
|
50
|
-
type: ArrayConstructor;
|
|
51
|
-
reflect: boolean;
|
|
52
|
-
hasChanged(newVal: any, oldVal: any): any;
|
|
53
|
-
};
|
|
48
|
+
availableOptions: HTMLElement[];
|
|
54
49
|
/**
|
|
55
50
|
* Sets the behavior of the combobox, "filter" or "suggestion".
|
|
56
51
|
* "filter" requires the user to select an option from the menu.
|
|
@@ -96,6 +91,7 @@ export class AuroCombobox extends AuroElement {
|
|
|
96
91
|
*/
|
|
97
92
|
dvInputOnly: {
|
|
98
93
|
type: BooleanConstructor;
|
|
94
|
+
attribute: string;
|
|
99
95
|
reflect: boolean;
|
|
100
96
|
};
|
|
101
97
|
/**
|
|
@@ -124,12 +120,25 @@ export class AuroCombobox extends AuroElement {
|
|
|
124
120
|
* @default 'classic'
|
|
125
121
|
*/
|
|
126
122
|
layout: "classic" | "emphasized" | "snowflake";
|
|
123
|
+
/**
|
|
124
|
+
* Sets the shape of the combobox.
|
|
125
|
+
* @type {'box' | 'classic' | 'pill' | 'pill-left' | 'pill-right' | 'rounded' | 'snowflake'}
|
|
126
|
+
* @default 'classic'
|
|
127
|
+
*/
|
|
128
|
+
shape: "box" | "classic" | "pill" | "pill-left" | "pill-right" | "rounded" | "snowflake";
|
|
129
|
+
/**
|
|
130
|
+
* Sets the size of the combobox.
|
|
131
|
+
* @type {'xs' | 'sm' | 'md' | 'lg' | 'xl'}
|
|
132
|
+
* @default 'xl'
|
|
133
|
+
*/
|
|
134
|
+
size: "xs" | "sm" | "md" | "lg" | "xl";
|
|
127
135
|
/**
|
|
128
136
|
* If declared, the popover and trigger will be set to the same width.
|
|
129
137
|
* @private
|
|
130
138
|
*/
|
|
131
139
|
matchWidth: {
|
|
132
140
|
type: BooleanConstructor;
|
|
141
|
+
attribute: string;
|
|
133
142
|
reflect: boolean;
|
|
134
143
|
};
|
|
135
144
|
/**
|
|
@@ -137,6 +146,7 @@ export class AuroCombobox extends AuroElement {
|
|
|
137
146
|
*/
|
|
138
147
|
noFilter: {
|
|
139
148
|
type: BooleanConstructor;
|
|
149
|
+
attribute: string;
|
|
140
150
|
reflect: boolean;
|
|
141
151
|
};
|
|
142
152
|
/**
|
|
@@ -145,6 +155,7 @@ export class AuroCombobox extends AuroElement {
|
|
|
145
155
|
*/
|
|
146
156
|
noFlip: {
|
|
147
157
|
type: BooleanConstructor;
|
|
158
|
+
attribute: string;
|
|
148
159
|
reflect: boolean;
|
|
149
160
|
};
|
|
150
161
|
/**
|
|
@@ -159,6 +170,7 @@ export class AuroCombobox extends AuroElement {
|
|
|
159
170
|
*/
|
|
160
171
|
noValidate: {
|
|
161
172
|
type: BooleanConstructor;
|
|
173
|
+
attribute: string;
|
|
162
174
|
reflect: boolean;
|
|
163
175
|
};
|
|
164
176
|
/**
|
|
@@ -171,9 +183,11 @@ export class AuroCombobox extends AuroElement {
|
|
|
171
183
|
};
|
|
172
184
|
/**
|
|
173
185
|
* DEPRECATED - use `appearance="inverse"` instead.
|
|
186
|
+
* @deprecated Use `appearance="inverse"` instead.
|
|
174
187
|
*/
|
|
175
188
|
onDark: {
|
|
176
189
|
type: BooleanConstructor;
|
|
190
|
+
attribute: string;
|
|
177
191
|
reflect: boolean;
|
|
178
192
|
};
|
|
179
193
|
/**
|
|
@@ -188,6 +202,7 @@ export class AuroCombobox extends AuroElement {
|
|
|
188
202
|
*/
|
|
189
203
|
persistInput: {
|
|
190
204
|
type: BooleanConstructor;
|
|
205
|
+
attribute: string;
|
|
191
206
|
reflect: boolean;
|
|
192
207
|
};
|
|
193
208
|
/**
|
|
@@ -215,24 +230,28 @@ export class AuroCombobox extends AuroElement {
|
|
|
215
230
|
*/
|
|
216
231
|
setCustomValidity: {
|
|
217
232
|
type: StringConstructor;
|
|
233
|
+
attribute: string;
|
|
218
234
|
};
|
|
219
235
|
/**
|
|
220
236
|
* Custom help text message to display when validity = `customError`.
|
|
221
237
|
*/
|
|
222
238
|
setCustomValidityCustomError: {
|
|
223
239
|
type: StringConstructor;
|
|
240
|
+
attribute: string;
|
|
224
241
|
};
|
|
225
242
|
/**
|
|
226
243
|
* Custom help text message to display when validity = `valueMissing`.
|
|
227
244
|
*/
|
|
228
245
|
setCustomValidityValueMissing: {
|
|
229
246
|
type: StringConstructor;
|
|
247
|
+
attribute: string;
|
|
230
248
|
};
|
|
231
249
|
/**
|
|
232
250
|
* Custom help text message to display when validity = `valueMissing` due to the user not choosing a menu option when behavior = "filter".
|
|
233
251
|
*/
|
|
234
252
|
setCustomValidityValueMissingFilter: {
|
|
235
253
|
type: StringConstructor;
|
|
254
|
+
attribute: string;
|
|
236
255
|
};
|
|
237
256
|
/**
|
|
238
257
|
* Indicates whether the combobox is in a dirty state (has been interacted with).
|
|
@@ -250,20 +269,20 @@ export class AuroCombobox extends AuroElement {
|
|
|
250
269
|
*/
|
|
251
270
|
triggerIcon: {
|
|
252
271
|
type: BooleanConstructor;
|
|
272
|
+
attribute: string;
|
|
253
273
|
reflect: boolean;
|
|
254
274
|
};
|
|
255
275
|
/**
|
|
256
276
|
* Applies the defined value as the type attribute on `auro-input`.
|
|
277
|
+
* @type {'text' | 'password' | 'email' | 'credit-card' | 'tel' | 'number' | 'date'}
|
|
257
278
|
*/
|
|
258
|
-
type:
|
|
259
|
-
type: StringConstructor;
|
|
260
|
-
reflect: boolean;
|
|
261
|
-
};
|
|
279
|
+
type: "text" | "password" | "email" | "credit-card" | "tel" | "number" | "date";
|
|
262
280
|
/**
|
|
263
281
|
* Specifies the value of the input element within the combobox.
|
|
264
282
|
*/
|
|
265
283
|
typedValue: {
|
|
266
284
|
type: StringConstructor;
|
|
285
|
+
attribute: string;
|
|
267
286
|
reflect: boolean;
|
|
268
287
|
};
|
|
269
288
|
/**
|
|
@@ -285,6 +304,7 @@ export class AuroCombobox extends AuroElement {
|
|
|
285
304
|
*/
|
|
286
305
|
largeFullscreenHeadline: {
|
|
287
306
|
type: BooleanConstructor;
|
|
307
|
+
attribute: string;
|
|
288
308
|
reflect: boolean;
|
|
289
309
|
};
|
|
290
310
|
/**
|
|
@@ -299,12 +319,9 @@ export class AuroCombobox extends AuroElement {
|
|
|
299
319
|
/**
|
|
300
320
|
* Specifies the currently active option.
|
|
301
321
|
* @private
|
|
322
|
+
* @type {HTMLElement}
|
|
302
323
|
*/
|
|
303
|
-
optionActive:
|
|
304
|
-
type: ObjectConstructor;
|
|
305
|
-
reflect: boolean;
|
|
306
|
-
attribute: boolean;
|
|
307
|
-
};
|
|
324
|
+
optionActive: HTMLElement;
|
|
308
325
|
};
|
|
309
326
|
static get styles(): import("lit").CSSResult[];
|
|
310
327
|
/**
|
|
@@ -321,7 +338,8 @@ export class AuroCombobox extends AuroElement {
|
|
|
321
338
|
* @returns {void} Internal defaults.
|
|
322
339
|
*/
|
|
323
340
|
private _initializeDefaults;
|
|
324
|
-
|
|
341
|
+
/** @type {'default' | 'inverse'} */
|
|
342
|
+
appearance: "default" | "inverse" | undefined;
|
|
325
343
|
disabled: boolean | undefined;
|
|
326
344
|
msgSelectionMissing: string | undefined;
|
|
327
345
|
noFilter: boolean | undefined;
|
|
@@ -330,16 +348,22 @@ export class AuroCombobox extends AuroElement {
|
|
|
330
348
|
persistInput: boolean | undefined;
|
|
331
349
|
required: boolean | undefined;
|
|
332
350
|
typedValue: any;
|
|
333
|
-
|
|
351
|
+
/** @type {'filter' | 'suggestion'} */
|
|
352
|
+
behavior: "filter" | "suggestion" | undefined;
|
|
334
353
|
clearBtnFocused: boolean | undefined;
|
|
354
|
+
_clearBtnActivated: boolean | undefined;
|
|
335
355
|
checkmark: boolean | undefined;
|
|
336
356
|
dvInputOnly: boolean | undefined;
|
|
337
|
-
|
|
357
|
+
/** @type {'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'disabled'} */
|
|
358
|
+
fullscreenBreakpoint: "xs" | "sm" | "md" | "lg" | "xl" | "disabled" | undefined;
|
|
338
359
|
matchWidth: boolean | undefined;
|
|
339
|
-
|
|
340
|
-
|
|
360
|
+
/** @type {'box' | 'classic' | 'pill' | 'pill-left' | 'pill-right' | 'rounded' | 'snowflake'} */
|
|
361
|
+
shape: "classic" | "snowflake" | "box" | "pill" | "pill-left" | "pill-right" | "rounded" | undefined;
|
|
362
|
+
/** @type {'xs' | 'sm' | 'md' | 'lg' | 'xl'} */
|
|
363
|
+
size: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
|
|
341
364
|
triggerIcon: boolean | undefined;
|
|
342
|
-
|
|
365
|
+
/** @type {'top' | 'right' | 'bottom' | 'left' | 'bottom-start' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-end' | 'left-start' | 'left-end'} */
|
|
366
|
+
placement: "top" | "right" | "bottom" | "left" | "bottom-start" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-end" | "left-start" | "left-end" | undefined;
|
|
343
367
|
offset: number | undefined;
|
|
344
368
|
noFlip: boolean | undefined;
|
|
345
369
|
shift: boolean | undefined;
|
|
@@ -515,6 +539,27 @@ export class AuroCombobox extends AuroElement {
|
|
|
515
539
|
* @returns {void}
|
|
516
540
|
*/
|
|
517
541
|
private configureInput;
|
|
542
|
+
/**
|
|
543
|
+
* Flags genuine clear-button activations on an auro-input so the SPA-preselect
|
|
544
|
+
* guard in handleInputValueChange doesn't swallow them.
|
|
545
|
+
*
|
|
546
|
+
* The auro-input clear button fires an `isProgrammatic` input event (via
|
|
547
|
+
* notifyValueChanged) that is indistinguishable in shape from the
|
|
548
|
+
* SPA-preselect echo that guard bails on (isProgrammatic + set value + empty
|
|
549
|
+
* input). Without this one-shot flag, clicking clear would leave
|
|
550
|
+
* this.value/optionSelected stale (AB#1634257).
|
|
551
|
+
*
|
|
552
|
+
* Delegated on the shadow root so it works regardless of when .clearBtn
|
|
553
|
+
* renders (it only exists after a value is set), and covers both real clicks
|
|
554
|
+
* and programmatic clearBtn.click() (which no focusin precedes). Registered in
|
|
555
|
+
* the CAPTURE phase so the flag is set BEFORE the button's own @click
|
|
556
|
+
* (handleClickClear) fires its synchronous input event — which is when
|
|
557
|
+
* handleInputValueChange reads the flag.
|
|
558
|
+
* @private
|
|
559
|
+
* @param {Element} inputEl - The auro-input whose clear button to track.
|
|
560
|
+
* @returns {void}
|
|
561
|
+
*/
|
|
562
|
+
private trackClearBtnActivation;
|
|
518
563
|
/**
|
|
519
564
|
* Manages the visibility of the dropdown based on loading state changes.
|
|
520
565
|
*
|