@utahdts/utah-design-system-header 3.0.4 → 4.0.0-beta.0

package/dist/index.d.ts

@@ -8,7 +8,7 @@ declare module "@utahdts/utah-design-system-header" {
   export type Environments = "none" | "a1" | "a2" | "a3" | "custom" | "unittest";
   export type Events = "utahHeaderLoaded" | "utahHeaderUnloaded";
   export type HeaderApplicationTypes = 'wordpress' | 'static site' | 'salesforce' | 'custom application' | 'microsoft power apps' | 'servicenow';
-  export type PopupPlacement = "auto" | "auto-start" | "auto-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end" | "top" | "top-start" | "top-end";
+  export type PopupPlacement = "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end" | "top" | "top-start" | "top-end";
   export type Size = "SMALL" | "MEDIUM" | "LARGE";
   export type UtahIdFetchStyle = "Automatic" | "None" | "Provided";
   export type MainMenuItem = {

package/dist/style.css

@@ -440,8 +440,7 @@ variables and settings
 */
 @font-face {
   font-family: "utah design system";
-  src: url("https://cdn.utah.gov/design-system/fonts/utah-design-system.eot");
-  src: url("https://cdn.utah.gov/design-system/fonts/utah-design-system.eot?#iefix") format("embedded-opentype"), url("https://cdn.utah.gov/design-system/fonts/utah-design-system.woff") format("woff"), url("https://cdn.utah.gov/design-system/fonts/utah-design-system.ttf") format("truetype"), url("https://cdn.utah.gov/design-system/fonts/utah-design-system.svg#utah-design-system") format("svg");
+  src: url("https://cdn.utah.gov/design-system/fonts/v2/utah-design-system.woff") format("woff"), url("https://cdn.utah.gov/design-system/fonts/v2/utah-design-system.ttf") format("truetype"), url("https://cdn.utah.gov/design-system/fonts/v2/utah-design-system.svg#utah-design-system") format("svg");
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -450,6 +449,9 @@ variables and settings
   --icon-check-mark-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12.15'%3E%3Cg%3E%3Cpath d='M6.185,12.15L0,5.966,2.335,3.631l3.85,3.849L13.665,0l2.335,2.335L6.185,12.15Z' style='fill: %23fff;'/%3E%3C/g%3E%3C/svg%3E");
   --icon-chevron-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg%3E%3Crect width='14' height='14' style='fill: none;'/%3E%3Cpath d='M3.142,5l3.716,3.71,3.717-3.71,1.142,1.142-4.859,4.858L2,6.142l1.142-1.142Z' style='fill: %23474747;'/%3E%3C/g%3E%3C/svg%3E");
 }
+.utah-design-system .uds-icon {
+  font-family: "utah design system";
+}
 .utah-design-system [class*=utds-icon-before-],
 .utah-design-system [class*=utds-icon-after-] {
   display: inline-flex;
@@ -479,252 +481,260 @@ variables and settings
 }
 .utah-design-system .utds-icon-before-external-link::before,
 .utah-design-system .utds-icon-after-external-link::after {
-  content: "A";
+  content: "\e900";
   font-size: 0.65em;
 }
 .utah-design-system .utds-icon-before-waffle::before,
 .utah-design-system .utds-icon-after-waffle::after {
-  content: "B";
+  content: "\e901";
 }
 .utah-design-system .utds-icon-before-alert::before,
 .utah-design-system .utds-icon-after-alert::after {
-  content: "C";
+  content: "\e902";
 }
 .utah-design-system .utds-icon-before-help::before,
 .utah-design-system .utds-icon-after-help::after {
-  content: "D";
+  content: "\e903";
 }
 .utah-design-system .utds-icon-before-bookmark::before,
 .utah-design-system .utds-icon-after-bookmark::after {
-  content: "E";
+  content: "\e904";
 }
 .utah-design-system .utds-icon-before-search::before,
 .utah-design-system .utds-icon-after-search::after {
-  content: "F";
+  content: "\e905";
 }
 .utah-design-system .utds-icon-before-check::before,
 .utah-design-system .utds-icon-after-check::after {
-  content: "G";
+  content: "\e906";
 }
 .utah-design-system .utds-icon-before-star::before,
 .utah-design-system .utds-icon-after-star::after {
-  content: "H";
+  content: "\e907";
 }
 .utah-design-system .utds-icon-before-info::before,
 .utah-design-system .utds-icon-after-info::after {
-  content: "I";
+  content: "\e908";
 }
 .utah-design-system .utds-icon-before-unfold-less::before,
 .utah-design-system .utds-icon-after-unfold-less::after {
-  content: "J";
+  content: "\e909";
 }
 .utah-design-system .utds-icon-before-unfold-more::before,
 .utah-design-system .utds-icon-after-unfold-more::after {
-  content: "K";
+  content: "\e90a";
 }
 .utah-design-system .utds-icon-before-circle-chevron-down::before,
 .utah-design-system .utds-icon-after-circle-chevron-down::after {
-  content: "L";
+  content: "\e90b";
 }
 .utah-design-system .utds-icon-before-circle-chevron-up::before,
 .utah-design-system .utds-icon-after-circle-chevron-up::after {
-  content: "M";
+  content: "\e90c";
 }
 .utah-design-system .utds-icon-before-chevron-up::before,
 .utah-design-system .utds-icon-after-chevron-up::after {
-  content: "N";
+  content: "\e90d";
 }
 .utah-design-system .utds-icon-before-chevron-right::before,
 .utah-design-system .utds-icon-after-chevron-right::after {
-  content: "O";
+  content: "\e90e";
 }
 .utah-design-system .utds-icon-before-chevron-down::before,
 .utah-design-system .utds-icon-after-chevron-down::after {
-  content: "P";
+  content: "\e90f";
 }
 .utah-design-system .utds-icon-before-chevron-left::before,
 .utah-design-system .utds-icon-after-chevron-left::after {
-  content: "Q";
+  content: "\e910";
 }
 .utah-design-system .utds-icon-before-arrow-up::before,
 .utah-design-system .utds-icon-after-arrow-up::after {
-  content: "R";
+  content: "\e911";
 }
 .utah-design-system .utds-icon-before-arrow-right::before,
 .utah-design-system .utds-icon-after-arrow-right::after {
-  content: "S";
+  content: "\e912";
 }
 .utah-design-system .utds-icon-before-arrow-down::before,
 .utah-design-system .utds-icon-after-arrow-down::after {
-  content: "T";
+  content: "\e913";
 }
 .utah-design-system .utds-icon-before-arrow-left::before,
 .utah-design-system .utds-icon-after-arrow-left::after {
-  content: "U";
+  content: "\e914";
 }
 .utah-design-system .utds-icon-before-plus::before,
 .utah-design-system .utds-icon-after-plus::after {
-  content: "V";
+  content: "\e915";
 }
 .utah-design-system .utds-icon-before-minus::before,
 .utah-design-system .utds-icon-after-minus::after {
-  content: "W";
+  content: "\e916";
 }
 .utah-design-system .utds-icon-before-x-icon::before,
 .utah-design-system .utds-icon-after-x-icon::after {
-  content: "X";
+  content: "\e917";
 }
 .utah-design-system .utds-icon-before-edit::before,
 .utah-design-system .utds-icon-after-edit::after {
-  content: "Y";
+  content: "\e918";
 }
 .utah-design-system .utds-icon-before-edit-box::before,
 .utah-design-system .utds-icon-after-edit-box::after {
-  content: "Z";
+  content: "\e919";
 }
 .utah-design-system .utds-icon-before-verified::before,
 .utah-design-system .utds-icon-after-verified::after {
-  content: "a";
+  content: "\e91a";
 }
 .utah-design-system .utds-icon-before-gear::before,
 .utah-design-system .utds-icon-after-gear::after {
-  content: "b";
+  content: "\e91b";
 }
 .utah-design-system .utds-icon-before-doc::before,
 .utah-design-system .utds-icon-after-doc::after {
-  content: "c";
+  content: "\e91c";
 }
 .utah-design-system .utds-icon-before-doc-square::before,
 .utah-design-system .utds-icon-after-doc-square::after {
-  content: "d";
+  content: "\e91d";
 }
 .utah-design-system .utds-icon-before-warning::before,
 .utah-design-system .utds-icon-after-warning::after {
-  content: "e";
+  content: "\e91e";
 }
 .utah-design-system .utds-icon-before-error::before,
 .utah-design-system .utds-icon-after-error::after {
-  content: "f";
+  content: "\e91f";
 }
 .utah-design-system .utds-icon-before-copy::before,
 .utah-design-system .utds-icon-after-copy::after {
-  content: "g";
+  content: "\e920";
 }
 .utah-design-system .utds-icon-before-home-menu::before,
 .utah-design-system .utds-icon-after-home-menu::after {
-  content: "h";
+  content: "\e921";
 }
 .utah-design-system .utds-icon-before-hamburger::before,
 .utah-design-system .utds-icon-after-hamburger::after {
-  content: "i";
+  content: "\e922";
 }
 .utah-design-system .utds-icon-before-account::before,
 .utah-design-system .utds-icon-after-account::after {
-  content: "j";
+  content: "\e923";
 }
 .utah-design-system .utds-icon-before-lock::before,
 .utah-design-system .utds-icon-after-lock::after {
-  content: "k";
+  content: "\e924";
 }
 .utah-design-system .utds-icon-before-more-vertical::before,
 .utah-design-system .utds-icon-after-more-vertical::after {
-  content: "l";
+  content: "\e925";
 }
 .utah-design-system .utds-icon-before-more-horizontal::before,
 .utah-design-system .utds-icon-after-more-horizontal::after {
-  content: "m";
+  content: "\e926";
 }
 .utah-design-system .utds-icon-before-download::before,
 .utah-design-system .utds-icon-after-download::after {
-  content: "n";
+  content: "\e927";
 }
 .utah-design-system .utds-icon-before-upload::before,
 .utah-design-system .utds-icon-after-upload::after {
-  content: "o";
+  content: "\e928";
 }
 .utah-design-system .utds-icon-before-favorite::before,
 .utah-design-system .utds-icon-after-favorite::after {
-  content: "p";
+  content: "\e929";
 }
 .utah-design-system .utds-icon-before-visibility::before,
 .utah-design-system .utds-icon-after-visibility::after {
-  content: "q";
+  content: "\e92a";
 }
 .utah-design-system .utds-icon-before-visibility-off::before,
 .utah-design-system .utds-icon-after-visibility-off::after {
-  content: "r";
+  content: "\e92b";
 }
 .utah-design-system .utds-icon-before-trash::before,
 .utah-design-system .utds-icon-after-trash::after {
-  content: "s";
+  content: "\e92c";
 }
 .utah-design-system .utds-icon-before-calendar::before,
 .utah-design-system .utds-icon-after-calendar::after {
-  content: "t";
+  content: "\e92d";
 }
 .utah-design-system .utds-icon-before-clock::before,
 .utah-design-system .utds-icon-after-clock::after {
-  content: "u";
+  content: "\e92e";
 }
 .utah-design-system .utds-icon-before-double-arrow-up::before,
 .utah-design-system .utds-icon-after-double-arrow-up::after {
-  content: "v";
+  content: "\e92f";
 }
 .utah-design-system .utds-icon-before-double-arrow-right::before,
 .utah-design-system .utds-icon-after-double-arrow-right::after {
-  content: "w";
+  content: "\e930";
 }
 .utah-design-system .utds-icon-before-double-arrow-down::before,
 .utah-design-system .utds-icon-after-double-arrow-down::after {
-  content: "x";
+  content: "\e931";
 }
 .utah-design-system .utds-icon-before-double-arrow-left::before,
 .utah-design-system .utds-icon-after-double-arrow-left::after {
-  content: "y";
+  content: "\e932";
 }
 .utah-design-system .utds-icon-before-filter::before,
 .utah-design-system .utds-icon-after-filter::after {
-  content: "z";
+  content: "\e933";
 }
 .utah-design-system .utds-icon-before-restart::before,
 .utah-design-system .utds-icon-after-restart::after {
-  content: "{";
+  content: "\e934";
 }
 .utah-design-system .utds-icon-before-sync::before,
 .utah-design-system .utds-icon-after-sync::after {
-  content: "|";
+  content: "\e935";
 }
 .utah-design-system .utds-icon-before-refresh::before,
 .utah-design-system .utds-icon-after-refresh::after {
-  content: "}";
+  content: "\e936";
 }
 .utah-design-system .utds-icon-before-light-mode::before,
 .utah-design-system .utds-icon-after-light-mode::after {
-  content: "~";
+  content: "\e937";
 }
 .utah-design-system .utds-icon-before-dark-mode::before,
 .utah-design-system .utds-icon-after-dark-mode::after {
-  content: "0";
+  content: "\e938";
 }
 .utah-design-system .utds-icon-before-mail::before,
 .utah-design-system .utds-icon-after-mail::after {
-  content: "1";
+  content: "\e939";
 }
 .utah-design-system .utds-icon-before-share::before,
 .utah-design-system .utds-icon-after-share::after {
-  content: "2";
+  content: "\e93a";
 }
 .utah-design-system .utds-icon-before-policy::before,
 .utah-design-system .utds-icon-after-policy::after {
-  content: "3";
+  content: "\e93b";
 }
 .utah-design-system .utds-icon-before-login::before,
 .utah-design-system .utds-icon-after-login::after {
-  content: "4";
+  content: "\e93c";
 }
 .utah-design-system .utds-icon-before-logout::before,
 .utah-design-system .utds-icon-after-logout::after {
-  content: "5";
+  content: "\e93d";
+}
+.utah-design-system .utds-icon-before-circle-check::before,
+.utah-design-system .utds-icon-after-circle-check::after {
+  content: "\e93e";
+}
+.utah-design-system .utds-icon-before-mail-open::before,
+.utah-design-system .utds-icon-after-mail-open::after {
+  content: "\e93f";
 }
 /*
 ############     _media-size-vars.scss      ############
@@ -2275,6 +2285,11 @@ component specific, BEM (Block, Element, Modifier)
 .utah-design-system .footer-agency-information a[href] {
   color: white;
 }
+.utah-design-system .footer-agency-information a[href]:focus-visible {
+  outline: 2px solid #FFF;
+  outline-offset: 2px;
+  border-radius: var(--radius-small1x);
+}
 .utah-design-system .footer-agency-information__title {
   font-size: var(--font-size-l);
   font-weight: var(--font-weight-semi-bold);
@@ -2493,6 +2508,35 @@ component specific, BEM (Block, Element, Modifier)
 .utah-design-system .text-input__clear-button[disabled]:active {
   transform: translateY(-50%);
 }
+.utah-design-system .search-input__wrapper {
+  position: relative;
+}
+.utah-design-system .search-input__wrapper input[type=text] {
+  border-radius: var(--radius-circle);
+  padding: var(--spacing-s) 170px var(--spacing-s) var(--spacing-3xl);
+}
+.utah-design-system .search-input__button-wrapper {
+  position: absolute;
+  right: var(--spacing-xs);
+}
+.utah-design-system .search-input__button-wrapper:has(button:focus) {
+  clip: unset;
+  height: unset;
+  margin: unset;
+  overflow: unset;
+  padding: unset;
+  position: absolute;
+  width: unset;
+}
+.utah-design-system .search-input__icon-search {
+  position: absolute;
+  top: calc(50% + 2px);
+  left: var(--spacing);
+}
+.utah-design-system .search-input__icon-search[class*=utds-icon-before-]::before {
+  display: block;
+  font-size: 1.2rem;
+}
 .utah-design-system .combo-box-input[type=text] {
   padding: 0 var(--spacing-xl) 0 var(--spacing-xs);
 }
@@ -2948,6 +2992,9 @@ component specific, BEM (Block, Element, Modifier)
 .utah-design-system select.select-input--clear-icon-visible {
   padding: 0 var(--spacing-3xl) 0 var(--spacing-xs);
 }
+.utah-design-system select.select-input--placeholder {
+  color: var(--form-ele-placeholder-color);
+}
 .utah-design-system select[aria-invalid=true] {
   border: 2px solid var(--danger-color);
 }
@@ -4034,43 +4081,43 @@ BEM standard: Block, Element, Modifier
   content: "";
   transform: rotate(45deg);
 }
-.utah-design-system .popup__wrapper[data-popper-placement^=top] .popup__content {
+.utah-design-system .popup__wrapper[data-popup-placement^=top] .popup__content {
   transform-origin: bottom;
 }
-.utah-design-system .popup__wrapper[data-popper-placement^=top] .popup__arrow {
+.utah-design-system .popup__wrapper[data-popup-placement^=top] .popup__arrow {
   bottom: -5px;
 }
-.utah-design-system .popup__wrapper[data-popper-placement^=top] .popup__arrow::before {
+.utah-design-system .popup__wrapper[data-popup-placement^=top] .popup__arrow::before {
   border-bottom: 1px solid var(--gray-3-1-contrast);
   border-right: 1px solid var(--gray-3-1-contrast);
 }
-.utah-design-system .popup__wrapper[data-popper-placement^=bottom] .popup__content {
+.utah-design-system .popup__wrapper[data-popup-placement^=bottom] .popup__content {
   transform-origin: top;
 }
-.utah-design-system .popup__wrapper[data-popper-placement^=bottom] .popup__arrow {
+.utah-design-system .popup__wrapper[data-popup-placement^=bottom] .popup__arrow {
   top: -6px;
 }
-.utah-design-system .popup__wrapper[data-popper-placement^=bottom] .popup__arrow::before {
+.utah-design-system .popup__wrapper[data-popup-placement^=bottom] .popup__arrow::before {
   border-top: 1px solid var(--gray-3-1-contrast);
   border-left: 1px solid var(--gray-3-1-contrast);
 }
-.utah-design-system .popup__wrapper[data-popper-placement^=left] .popup__content {
+.utah-design-system .popup__wrapper[data-popup-placement^=left] .popup__content {
   transform-origin: right;
 }
-.utah-design-system .popup__wrapper[data-popper-placement^=left] .popup__arrow {
+.utah-design-system .popup__wrapper[data-popup-placement^=left] .popup__arrow {
   right: -5px;
 }
-.utah-design-system .popup__wrapper[data-popper-placement^=left] .popup__arrow::before {
+.utah-design-system .popup__wrapper[data-popup-placement^=left] .popup__arrow::before {
   border-top: 1px solid var(--gray-3-1-contrast);
   border-right: 1px solid var(--gray-3-1-contrast);
 }
-.utah-design-system .popup__wrapper[data-popper-placement^=right] .popup__content {
+.utah-design-system .popup__wrapper[data-popup-placement^=right] .popup__content {
   transform-origin: left;
 }
-.utah-design-system .popup__wrapper[data-popper-placement^=right] .popup__arrow {
+.utah-design-system .popup__wrapper[data-popup-placement^=right] .popup__arrow {
   left: -6px;
 }
-.utah-design-system .popup__wrapper[data-popper-placement^=right] .popup__arrow::before {
+.utah-design-system .popup__wrapper[data-popup-placement^=right] .popup__arrow::before {
   border-bottom: 1px solid var(--gray-3-1-contrast);
   border-left: 1px solid var(--gray-3-1-contrast);
 }
@@ -4141,28 +4188,28 @@ BEM standard: Block, Element, Modifier
   left: 50%;
   transform: translateX(-50%) rotate(45deg);
 }
-.utah-design-system .tooltip__wrapper[data-popper-placement^=top] .tooltip__content {
+.utah-design-system .tooltip__wrapper[data-popup-placement^=top] .tooltip__content {
   transform-origin: bottom;
 }
-.utah-design-system .tooltip__wrapper[data-popper-placement^=top] .tooltip__arrow {
+.utah-design-system .tooltip__wrapper[data-popup-placement^=top] .tooltip__arrow {
   bottom: -2px;
 }
-.utah-design-system .tooltip__wrapper[data-popper-placement^=bottom] .tooltip__content {
+.utah-design-system .tooltip__wrapper[data-popup-placement^=bottom] .tooltip__content {
   transform-origin: top;
 }
-.utah-design-system .tooltip__wrapper[data-popper-placement^=bottom] .tooltip__arrow {
+.utah-design-system .tooltip__wrapper[data-popup-placement^=bottom] .tooltip__arrow {
   top: -3px;
 }
-.utah-design-system .tooltip__wrapper[data-popper-placement^=left] .tooltip__content {
+.utah-design-system .tooltip__wrapper[data-popup-placement^=left] .tooltip__content {
   transform-origin: right;
 }
-.utah-design-system .tooltip__wrapper[data-popper-placement^=left] .tooltip__arrow {
+.utah-design-system .tooltip__wrapper[data-popup-placement^=left] .tooltip__arrow {
   right: -2px;
 }
-.utah-design-system .tooltip__wrapper[data-popper-placement^=right] .tooltip__content {
+.utah-design-system .tooltip__wrapper[data-popup-placement^=right] .tooltip__content {
   transform-origin: left;
 }
-.utah-design-system .tooltip__wrapper[data-popper-placement^=right] .tooltip__arrow {
+.utah-design-system .tooltip__wrapper[data-popup-placement^=right] .tooltip__arrow {
   left: -3px;
 }
 /*
@@ -4189,6 +4236,7 @@ BEM standard: Block, Element, Modifier
   top: 0;
   left: 0;
   z-index: 4000;
+  overflow: auto;
 }
 .utah-design-system .modal__wrapper {
   animation: 400ms ease-in-out 100ms drop-in both;
@@ -4198,7 +4246,7 @@ BEM standard: Block, Element, Modifier
   width: calc(100% - var(--spacing-3xl));
   border-radius: var(--radius-medium);
   left: 50%;
-  margin: var(--spacing-4xl) var(--spacing) var(--spacing-4xl) 0;
+  margin: var(--spacing-4xl) 0;
   overflow: hidden;
   padding: 0;
   position: absolute;
@@ -4212,7 +4260,6 @@ BEM standard: Block, Element, Modifier
   padding: var(--spacing-xs) calc(var(--spacing) + 1.4rem) var(--spacing-xs) var(--spacing-l);
 }
 .utah-design-system .modal__content {
-  line-height: 1.6rem;
   padding: var(--spacing-xs) var(--spacing-l);
 }
 .utah-design-system .modal__footer {
@@ -4284,13 +4331,7 @@ BEM standard: Block, Element, Modifier
 .utah-design-system .search-modal__close-button:hover [class*=utds-icon-before-]::before {
   color: var(--gray-color);
 }
-.utah-design-system .search-modal__icon-search {
-  position: absolute;
-  top: calc(50% + 2px);
-  left: var(--spacing);
-}
 .utah-design-system .search-modal__icon-search[class*=utds-icon-before-]::before {
-  display: block;
   font-size: 1.3rem;
 }
 .utah-design-system .documentation-template {
@@ -5177,7 +5218,7 @@ BEM standard: Block, Element, Modifier
   top: 106px;
   left: 0;
   width: 100%;
-  height: 100%;
+  height: calc(100% - 106px);
   z-index: 1000;
   background-color: transparent;
 }
@@ -5265,6 +5306,11 @@ BEM standard: Block, Element, Modifier
   box-sizing: border-box;
   width: 100%;
 }
+.utah-design-system.utds-footer a:focus-visible {
+  outline: 2px solid #FFF;
+  outline-offset: 2px;
+  border-radius: var(--radius-small1x);
+}
 .utds-footer__horizontal-divider {
   position: absolute;
   width: calc(100% - 2 * var(--spacing-xl));
@@ -5360,7 +5406,10 @@ BEM standard: Block, Element, Modifier
   .utds-footer__vertical-divider {
     display: none;
   }
-  .utds-footer__official-site-wrapper {
+  .utds-footer__official-site {
+    text-align: center;
+  }
+  .utds-footer__official-site-site-wrapper {
     flex: 1 0 100%;
     display: flex;
     align-items: center;