@govtechsg/sgds-web-component 3.3.3-rc.2 → 3.4.0-rc.1

package/index.umd.js

@@ -4382,7 +4382,7 @@
       });
   }
 
-  var css_248z$1k = css`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color-default);font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-body);margin:0;*,:after,:before{box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;height:var(--sgds-icon-size-lg);margin-left:.25rem;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;vertical-align:bottom;width:var(--sgds-icon-size-lg)}::slotted(svg){vertical-align:middle}}`;
+  var css_248z$1k = css`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--sgds-body-color-default);font-family:var(--sgds-font-family-brand);font-size:var(--sgds-font-size-2);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-body);margin:0;*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;height:var(--sgds-icon-size-lg);margin-left:.25rem;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;vertical-align:bottom;width:var(--sgds-icon-size-lg)}::slotted(svg){vertical-align:middle}}`;
 
   /**
    * @cssprop --sgds-{stateColor} - State colors in hexadecimal value
@@ -13575,7 +13575,7 @@
 
   register("sgds-button", SgdsButton);
 
-  var css_248z$11 = css`:host([disabled]){cursor:not-allowed}:host([orientation=horizontal]) .card{flex-direction:row}:host(:not([hideBorder])) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}:host([orientation=horizontal]) .card-body{flex:1}:host([orientation=horizontal]) .card-media{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-xl)}:host([orientation=horizontal]) .card-image{width:40%}:host([imagePosition=after]) .card-image{order:1}:host([orientation=vertical][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-left-radius:var(--sgds-border-radius-none);border-top-right-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-bottom-left-radius:var(--sgds-border-radius-none);border-top-left-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal]) slot[name=image]::slotted(img){border-bottom-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:var(--sgds-border-radius-none);height:100%;object-fit:cover}:host([orientation=vertical][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-sm) var(--sgds-margin-sm) var(--sgds-padding-none)}:host([orientation=vertical][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-none) var(--sgds-margin-sm) var(--sgds-margin-sm)}:host([orientation=horizontal][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-sm) var(--sgds-margin-none) var(--sgds-margin-sm) var(--sgds-margin-sm)}:host([orientation=horizontal][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-sm) var(--sgds-margin-sm) var(--sgds-margin-sm) var(--sgds-margin-none)}:host([orientation][imageAdjustment="padding around"]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1))}:host([orientation=vertical]:not([imageAdjustment="aspect ratio"])) slot[name=image]::slotted(img){height:auto}:host([orientation=vertical][imageAdjustment="aspect ratio"]) slot[name=image]::slotted(img){object-fit:cover}.card{word-wrap:break-word;background-clip:border-box;background-color:var(--sgds-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-md);box-shadow:none;display:flex;flex-direction:column;height:100%;min-width:0;position:relative;transition:box-shadow .3s ease}a.card{color:initial;text-decoration:none}@media (prefers-reduced-motion:reduce){.card{transition:none}}.card.disabled{opacity:var(--sgds-opacity-50);pointer-events:none}a.card:focus{outline:0}a.card:not(.disabled):focus-visible{box-shadow:var(--sgds-box-shadow-focus)}.card-tinted-bg{border-radius:var(--sgds-border-radius-md);bottom:0;left:0;opacity:var(--sgds-opacity-0);position:absolute;right:0;top:0}.card-image{flex:1;position:relative}.card-media{align-items:flex-start;display:flex;justify-content:space-between;line-height:0;padding:var(--sgds-padding-xl) var(--sgds-padding-xl) var(--sgds-padding-none)}.card-thumbnail{align-items:center;border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);border-radius:var(--sgds-border-radius-full);display:flex;height:var(--sgds-dimension-80);justify-content:center;width:var(--sgds-dimension-80)}.card-body{color:var(--sgds-body-color-default);display:flex;flex:1 1 auto;flex-direction:column;gap:var(--sgds-gap-xl);padding:var(--sgds-padding-xl);z-index:1}.card-header-container{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}.card-header{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}.card-title{--sgds-font-size-5:var(--sgds-font-size-4);--sgds-font-size-6:var(--sgds-font-size-4);--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-font-weight-bold:var(--sgds-font-weight-semibold);color:var(--sgds-body-color-default);font-size:var(--sgds-font-size-4);font-weight:var(--sgds-font-weight-semibold)}.card-subtitle,.card-text,.card-title{margin-bottom:var(--sgds-margin-none)}slot[name=subtitle]::slotted(*){--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-margin-xs:var(--sgds-margin-none);--sgds-font-size-4:var(--sgds-font-size-1);--sgds-font-size-5:var(--sgds-font-size-1);--sgds-font-size-6:var(--sgds-font-size-1);--sgds-font-weight-bold:var(--sgds-font-weight-semibold);--sgds-line-height-heading:var(--sgds-line-height-min);--sgds-letter-spacing-tight:var(--sgds-letter-spacing-wide);color:var(--sgds-color-default);font-size:var(--sgds-font-size-1);font-weight:var(--sgds-font-weight-semibold);letter-spacing:var(--sgds-letter-spacing-wide);line-height:var(--sgds-line-height-min);margin:var(--sgds-margin-none);text-transform:uppercase}slot[name=title]::slotted(a){--sgds-font-size-2:var(--sgds-font-size-4);--sgds-font-weight-regular:var(--sgds-font-weight-semibold);color:var(--sgds-link-color-default);font-size:var(--sgds-font-size-4);font-weight:var(--sgds-font-weight-semibold);text-decoration:none!important}slot[name=description]::slotted(*){color:var(--sgds-color-subtle)}slot[name=image]::slotted(img){border-top-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));display:block;width:100%}slot[name=link]::slotted(*){font-weight:700;margin-top:auto;padding-top:var(--sgds-padding-sm)}slot[name=link]::slotted(a){color:var(--sgds-link-color-default);height:auto!important;text-decoration:none!important}slot[name=link]::slotted(a:focus),slot[name=link]::slotted(a:hover),slot[name=title]::slotted(a:focus),slot[name=title]::slotted(a:hover){color:var(--sgds-link-color-emphasis)}slot[name=link]::slotted(a:focus),slot[name=title]::slotted(a:focus){outline:0}slot[name=link]::slotted(a:focus-visible),slot[name=title]::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}`;
+  var css_248z$11 = css`:host([disabled]){cursor:not-allowed}:host([stretchedLink]) slot[name=footer]::slotted(a),:host([stretchedLink]) slot[name=footer]::slotted(sgds-link),:host([stretchedLink]) slot[name=link]::slotted(a),:host([stretchedLink]) slot[name=link]::slotted(sgds-link){display:none}:host([orientation=horizontal]) .card{flex-direction:row}:host(:not([hideBorder])) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}:host([orientation=horizontal]) .card-body{flex:1}:host([orientation=horizontal]) .card-media{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-xl)}:host([orientation=horizontal]) .card-image{width:40%}:host([imagePosition=after]) .card-image{order:1}:host([orientation=vertical][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-left-radius:var(--sgds-border-radius-none);border-top-right-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-bottom-left-radius:var(--sgds-border-radius-none);border-top-left-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal]) slot[name=image]::slotted(img){border-bottom-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:var(--sgds-border-radius-none);height:100%;object-fit:cover}:host([orientation=vertical][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-sm) var(--sgds-margin-sm) var(--sgds-padding-none)}:host([orientation=vertical][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-none) var(--sgds-margin-sm) var(--sgds-margin-sm)}:host([orientation=horizontal][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-sm) var(--sgds-margin-none) var(--sgds-margin-sm) var(--sgds-margin-sm)}:host([orientation=horizontal][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-sm) var(--sgds-margin-sm) var(--sgds-margin-sm) var(--sgds-margin-none)}:host([orientation][imageAdjustment="padding around"]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1))}:host([orientation=vertical]:not([imageAdjustment="aspect ratio"])) slot[name=image]::slotted(img){height:auto}:host([orientation=vertical][imageAdjustment="aspect ratio"]) slot[name=image]::slotted(img){object-fit:cover}.card{word-wrap:break-word;background-clip:border-box;background-color:var(--sgds-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-md);box-shadow:none;display:flex;flex-direction:column;height:100%;min-width:0;position:relative;transition:box-shadow .3s ease}a.card{color:initial;text-decoration:none}@media (prefers-reduced-motion:reduce){.card{transition:none}}.card.disabled{opacity:var(--sgds-opacity-50);pointer-events:none}a.card:focus{outline:0}a.card:not(.disabled):focus-visible{box-shadow:var(--sgds-box-shadow-focus)}.card-tinted-bg{border-radius:var(--sgds-border-radius-md);bottom:0;left:0;opacity:var(--sgds-opacity-0);position:absolute;right:0;top:0}.card-image{flex:1;position:relative}.card-media{align-items:flex-start;display:flex;justify-content:space-between;line-height:0;padding:var(--sgds-padding-xl) var(--sgds-padding-xl) var(--sgds-padding-none)}.card-body{color:var(--sgds-body-color-default);display:flex;flex:1 1 auto;flex-direction:column;gap:var(--sgds-gap-xl);padding:var(--sgds-padding-xl);z-index:1}.card-header-container{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}.card-header{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}.card-title{--sgds-font-size-5:var(--sgds-font-size-4);--sgds-font-size-6:var(--sgds-font-size-4);--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-font-weight-bold:var(--sgds-font-weight-semibold);color:var(--sgds-body-color-default);font-size:var(--sgds-font-size-4);font-weight:var(--sgds-font-weight-semibold);margin-bottom:var(--sgds-margin-none)}slot[name=subtitle]::slotted(*){--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-margin-xs:var(--sgds-margin-none);--sgds-font-size-4:var(--sgds-font-size-1);--sgds-font-size-5:var(--sgds-font-size-1);--sgds-font-size-6:var(--sgds-font-size-1);--sgds-font-weight-bold:var(--sgds-font-weight-semibold);--sgds-line-height-heading:var(--sgds-line-height-min);--sgds-letter-spacing-tight:var(--sgds-letter-spacing-wide);color:var(--sgds-color-subtle);font-size:var(--sgds-font-size-1);font-weight:var(--sgds-font-weight-semibold);letter-spacing:var(--sgds-letter-spacing-wide);line-height:var(--sgds-line-height-min);margin:var(--sgds-margin-none);text-transform:uppercase}slot[name=title]::slotted(a){--sgds-font-size-2:var(--sgds-font-size-4);--sgds-font-weight-regular:var(--sgds-font-weight-semibold);color:var(--sgds-link-color-default);font-size:var(--sgds-font-size-4);font-weight:var(--sgds-font-weight-semibold);text-decoration:none!important}slot[name=description]::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);color:var(--sgds-color-subtle);margin-bottom:var(--sgds-paragraph-spacing-xl,--sgds-margin-none)}slot[name=image]::slotted(img){border-top-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));display:block;width:100%}slot[name=footer]::slotted(*),slot[name=link]::slotted(*){margin-top:auto;padding-top:var(--sgds-padding-sm);width:fit-content}slot[name=footer]::slotted(a),slot[name=link]::slotted(a){color:var(--sgds-link-color-default);height:auto!important;text-decoration:none!important}slot[name=footer]::slotted(a:focus),slot[name=footer]::slotted(a:hover),slot[name=link]::slotted(a:focus),slot[name=link]::slotted(a:hover),slot[name=title]::slotted(a:focus),slot[name=title]::slotted(a:hover){color:var(--sgds-link-color-emphasis)}slot[name=footer]::slotted(a:focus),slot[name=link]::slotted(a:focus),slot[name=title]::slotted(a:focus){outline:0}slot[name=footer]::slotted(a:focus-visible),slot[name=link]::slotted(a:focus-visible),slot[name=title]::slotted(a:focus-visible){box-shadow:var(--sgds-box-shadow-focus)}`;
 
   var css_248z$10 = css`.text-primary{color:var(--sgds-primary-rgb)!important}.text-secondary{color:var(--sgds-secondary-rgb)!important}.text-success{color:var(--sgds-success-rgb)!important}.text-info{color:var(--sgds-info-rgb)!important}.text-warning{color:var(--sgds-warning-rgb)!important}.text-danger{color:var(--sgds-danger-rgb)!important}.text-light{color:var(--sgds-light-rgb)!important}.text-dark{color:var(--sgds-dark-rgb)!important}.text-muted{color:var(--sgds-secondary-color)!important}`;
 
@@ -13590,7 +13590,8 @@
   class CardElement extends SgdsElement {
       constructor() {
           super(...arguments);
-          /** Extends the link passed in slot[name="link"] to the entire card */
+          /** Extends the link passed in the `link` slot to the entire card. Prefer using the `footer` slot for links going forward. The `link` slot is still supported for backward compatibility, but is **deprecated** and will be removed in a future release.
+           */
           this.stretchedLink = false;
           /** Disables the card  */
           this.disabled = false;
@@ -13614,14 +13615,6 @@
           if (childNodes.length > 1) {
               return console.error("Multiple elements passed into SgdsCard's link slot");
           }
-          if (!this.stretchedLink)
-              return;
-          if (childNodes[0] instanceof HTMLAnchorElement || childNodes[0] instanceof SgdsLink) {
-              const hyperlink = (childNodes[0].querySelector("a") || childNodes[0]);
-              this.card.setAttribute("href", hyperlink.href);
-              const linkSlot = this.shadowRoot.querySelector("slot[name='link']");
-              linkSlot.style.display = "none";
-          }
       }
   }
   CardElement.styles = [...SgdsElement.styles, css_248z$10, css_248z$$, css_248z$_, css_248z$Z, css_248z$Y, css_248z$11];
@@ -13657,7 +13650,9 @@
    * @slot title - The title of the card
    * @slot description - The paragrapher text of the card
    * @slot lower - Accepts any additional content to be displayed below the card description, such as badges, metadata, or supplementary information.
-   * @slot link - Accepts an anchor element. Only a single element is allowed to be passed in.
+   * @slot footer - Footer area of the card. Accepts links, actions, or any custom content.
+   * @slot link - (@deprecated) Deprecated since 3.3.2 in favour of `footer` slot.
+   *  Legacy slot for anchor elements. Use `footer` instead.
    */
   class SgdsCard extends CardElement {
       constructor() {
@@ -13666,21 +13661,45 @@
           this.imagePosition = "before";
           /** Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio` */
           this.imageAdjustment = "default";
-          this.hasSlotController = new HasSlotController(this, "image", "icon", "menu", "description");
+          this.hasSlotController = new HasSlotController(this, "image", "icon", "menu");
+      }
+      get linkSlotItems() {
+          if (!this.linkNode || this.linkNode.length === 0)
+              return null;
+          const element = this.linkNode[0];
+          return (element.querySelector("a") || element);
+      }
+      get footerSlotItems() {
+          if (!this.footerNode || this.footerNode.length === 0)
+              return null;
+          const element = this.footerNode[0];
+          return (element.querySelector("a") || element);
+      }
+      firstUpdated() {
+          var _a, _b;
+          if (this.stretchedLink) {
+              const footerHref = (_a = this.footerSlotItems) === null || _a === void 0 ? void 0 : _a.href;
+              const linkHref = (_b = this.linkSlotItems) === null || _b === void 0 ? void 0 : _b.href;
+              if (footerHref) {
+                  this.card.setAttribute("href", footerHref);
+              }
+              else if (linkHref) {
+                  this.card.setAttribute("href", linkHref);
+              }
+          }
       }
       handleImgSlotChange(e) {
           const childNodes = e.target.assignedNodes({ flatten: true });
           if (childNodes.length > 1) {
               console.error("Multiple elements passed into SgdsCard's image slot");
           }
-          if (this.hasSlotController.test("icon") && this.hasSlotController.test("icon")) {
+          if (this.hasSlotController.test("icon") && this.hasSlotController.test("image")) {
               console.error("Both image and icon slots cannot be used together in SgdsCard");
           }
       }
       render() {
           const tag = this.stretchedLink ? literal `a` : literal `div`;
           const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;
-          const hasDescriptionSlot = this.hasSlotController.test("description");
           const hasImageSlot = this.hasSlotController.test("image");
           const hasIconSlot = this.hasSlotController.test("icon");
           const hasMenuSlot = this.hasSlotController.test("menu");
@@ -13695,7 +13714,10 @@
         <div class="card-tinted-bg"></div>
         
         ${hasMenuSlot ? html ` <slot name="menu"></slot> ` : nothing}
-        <div class=${classMap({ "card-image": hasImageSlot, "card-media": hasIconSlot || hasUpperSlot })}>
+        <div class=${classMap({
+            "card-image": hasImageSlot,
+            "card-media": hasIconSlot || hasUpperSlot
+        })}>
           <slot name="upper">
           ${hasImageSlot ? html ` <slot name="image" @slotchange=${this.handleImgSlotChange}></slot> ` : nothing}
           ${hasIconSlot ? html ` <slot name="icon"></slot> ` : nothing}
@@ -13710,19 +13732,23 @@
             </div>
             <slot></slot>
           </div>
-          ${hasDescriptionSlot
-            ? html `<p class="card-text">
-                  <slot name="description"></slot>
-                </p>`
-            : nothing}
+          <slot name="description"></slot>
           <slot name="lower"></slot>
-          <slot name="link" @slotchange=${this.handleLinkSlotChange}></slot>
+          <slot name="footer">
+            <slot name="link" @slotchange=${this.handleLinkSlotChange}></slot>
+          </slot>
         </div>
       </${tag}>
     `;
       }
   }
   SgdsCard.styles = [...CardElement.styles, css_248z$X];
+  __decorate([
+      queryAssignedElements({ slot: "footer" })
+  ], SgdsCard.prototype, "footerNode", void 0);
+  __decorate([
+      queryAssignedElements({ slot: "link" })
+  ], SgdsCard.prototype, "linkNode", void 0);
   __decorate([
       property({ type: String, reflect: true })
   ], SgdsCard.prototype, "imagePosition", void 0);
@@ -14594,7 +14620,10 @@
    * @slot icon - slot for form control icon to be displayed on the right of the input box.
    *
    * @event sgds-select - Emitted when the combo box's selected value changes.
+   * @event sgds-change - Emitted when the combo box's value changes.
    * @event sgds-input -  Emitted when user input is received and its value changes.
+   * @event sgds-focus -  Emitted when user input is focused.
+   * @event sgds-blur -  Emitted when user input is blurred.
    */
   class SgdsComboBox extends SelectElement {
       constructor() {
@@ -14731,8 +14760,12 @@
               }
           }
       }
+      _handleFocus() {
+          this.emit("sgds-focus");
+      }
       async _handleInputBlur(e) {
           e.preventDefault();
+          this.emit("sgds-blur");
           if (this.multiSelect) {
               const displayValueMatchedSelectedItems = this.selectedItems.filter(({ label }) => this.displayValue === label);
               if (displayValueMatchedSelectedItems.length <= 0) {
@@ -14834,6 +14867,7 @@
             .value=${this.displayValue}
             @input=${this._handleInputChange}
             @blur=${this._handleInputBlur}
+            @focus=${this._handleFocus}
             aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this._controlId}-invalid` : undefined)}
             aria-labelledby="${this._labelId} ${this._controlId}Help ${this.invalid && this.hasFeedback
             ? `${this._controlId}-invalid`
@@ -26308,7 +26342,7 @@
       }
   }
 
-  var css_248z$E = css`:host{display:contents}.drawer{height:100%;inset-inline-start:0;overflow:hidden;pointer-events:none;top:0;width:100%}.drawer-fixed{position:fixed;z-index:1100}.drawer-panel{background-color:var(--sgds-surface-default);display:flex;flex-direction:column;gap:var(--sgds-gap-2-xl);max-height:100%;max-width:100%;overflow:auto;padding:var(--sgds-padding-4-xl) var(--sgds-padding-3-xl);pointer-events:all;position:absolute;z-index:2}.drawer-panel:focus{outline:none}.drawer-top .drawer-panel{bottom:auto;height:var(--sgds-dimension-512);inset-inline-end:auto;inset-inline-start:0;top:0;width:100%}.drawer-end .drawer-panel{bottom:auto;height:100%;inset-inline-end:0;inset-inline-start:auto;top:0;width:var(--sgds-dimension-512)}.drawer-bottom .drawer-panel{bottom:0;height:var(--sgds-dimension-512);inset-inline-end:auto;inset-inline-start:0;top:auto;width:100%}.drawer-start .drawer-panel{bottom:auto;height:100%;inset-inline-end:auto;inset-inline-start:0;top:0;width:var(--sgds-dimension-512)}.drawer-header{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}slot[name=title]::slotted(*){--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-font-size-6:var(--sgds-font-size-4);color:var(--sgds-color-default)!important;font-size:var(--sgds-font-size-6,var(--sgds-font-size-4));margin-bottom:var(--sgds-margin-2-xs,var(--sgds-margin-none))}slot[name=description]::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);color:var(--sgds-color-subtle);margin-bottom:var(--sgds-paragraph-spacing-xl,var(--sgds-margin-none))}sgds-close-button{position:absolute;right:32px;top:32px}.drawer-body{-webkit-overflow-scrolling:touch;display:block;flex:1 1 auto;overflow:auto}.drawer-overlay{background-color:var(--sgds-bg-overlay);bottom:0;display:block;left:0;pointer-events:all;position:fixed;right:0;top:0}.drawer-contained .drawer-overlay{display:none}@media screen and (max-width:768px){.drawer-panel{padding:var(--sgds-padding-3-xl) var(--sgds-padding-lg)}sgds-close-button{right:20px;top:20px}}`;
+  var css_248z$E = css`:host{display:contents}:host([size=md]) .drawer-end .drawer-panel,:host([size=md]) .drawer-start .drawer-panel{max-width:var(--sgds-dimension-768)}:host([size=md]) .drawer-bottom .drawer-panel,:host([size=md]) .drawer-top .drawer-panel{max-height:var(--sgds-dimension-768)}:host([size=lg]) .drawer-end .drawer-panel,:host([size=lg]) .drawer-start .drawer-panel{max-width:var(--sgds-dimension-1024)}:host([size=lg]) .drawer-bottom .drawer-panel,:host([size=lg]) .drawer-top .drawer-panel{max-height:var(--sgds-dimension-1024)}.drawer{height:100%;inset-inline-start:0;overflow:hidden;pointer-events:none;top:0;width:100%}.drawer-fixed{position:fixed;z-index:1100}.drawer-panel{background-color:var(--sgds-surface-default);display:flex;flex-direction:column;gap:var(--sgds-gap-2-xl);overflow:auto;padding:var(--sgds-padding-lg);pointer-events:all;position:absolute;z-index:2}.drawer-panel:focus{outline:none}.drawer-top .drawer-panel{bottom:auto;height:80%;inset-inline-end:auto;inset-inline-start:0;max-height:var(--sgds-dimension-512);top:0;width:100%}.drawer-end .drawer-panel{bottom:auto;height:100%;inset-inline-end:0;inset-inline-start:auto;max-width:var(--sgds-dimension-512);top:0;width:80%}.drawer-bottom .drawer-panel{bottom:0;height:80%;inset-inline-end:auto;inset-inline-start:0;max-height:var(--sgds-dimension-512);top:auto;width:100%}.drawer-start .drawer-panel{bottom:auto;height:100%;inset-inline-end:auto;inset-inline-start:0;max-width:var(--sgds-dimension-512);top:0;width:80%}.drawer-header{display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}slot[name=title]::slotted(*){--sgds-margin-2-xs:var(--sgds-margin-none);--sgds-margin-xs:var(--sgds-margin-none);--sgds-font-size-6:var(--sgds-font-size-4);--sgds-font-size-7:var(--sgds-font-size-4);color:var(--sgds-color-default)!important;font-size:var(--sgds-font-size-6,var(--sgds-font-size-4));margin-bottom:var(--sgds-margin-2-xs,var(--sgds-margin-none))}slot[name=description]::slotted(*){--sgds-paragraph-spacing-xl:var(--sgds-margin-none);color:var(--sgds-color-subtle);margin-bottom:var(--sgds-paragraph-spacing-xl,var(--sgds-margin-none))}slot[name=footer]::slotted(*){box-shadow:0 -2px 2px 0 hsla(0,0%,5%,.08);margin:var(--sgds-margin-none) calc(var(--sgds-margin-xs)*-1);padding:var(--sgds-padding-lg) var(--sgds-padding-lg) var(--sgds-padding-none)}sgds-close-button{position:absolute;right:8px;top:8px}.drawer-body{-webkit-overflow-scrolling:touch;display:block;flex:1 1 auto;overflow:auto}.drawer-overlay{background-color:var(--sgds-bg-overlay);bottom:0;display:block;left:0;pointer-events:all;position:fixed;right:0;top:0}.drawer-contained .drawer-overlay{display:none}@media screen and (min-width:512px){.drawer-panel{padding:var(--sgds-padding-2-xl)}slot[name=footer]::slotted(*){margin:var(--sgds-margin-none) calc(var(--sgds-margin-md)*-1);padding:var(--sgds-padding-2-xl) var(--sgds-padding-2-xl) var(--sgds-padding-none)}}`;
 
   /**
    * @summary Drawers slide in from a container to expose additional options and information.
@@ -26316,6 +26350,7 @@
    * @slot default - The drawer's main content
    * @slot title - The title of the drawer
    * @slot description - The description of the drawer
+   * @slot footer - The footer of the drawer
    *
    * @event sgds-show - Emitted when the drawer opens.
    * @event sgds-after-show - Emitted after the drawer opens and all animations are complete.
@@ -26337,6 +26372,13 @@
            * use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.
            */
           this.open = false;
+          /**
+           * Defines the size of the drawer panel.
+           * For drawers placed on the left or right (`start`/`end`), this controls the drawer's width.
+           * For drawers placed on the top or bottom, this controls the drawer's height.
+           * Accepts `small`, `medium`, or `large`. Defaults to `small`.
+           */
+          this.size = "sm";
           /** The direction from which the drawer will open. */
           this.placement = "end";
           /**
@@ -26352,7 +26394,6 @@
           };
       }
       firstUpdated() {
-          this.drawer.hidden = !this.open;
           if (this.open) {
               this.addOpenListeners();
               if (!this.contained) {
@@ -26490,11 +26531,12 @@
           return waitForEvent(this, "sgds-after-hide");
       }
       render() {
+          const isHydrated = this.hasUpdated;
+          const shouldHide = !this.open && !isHydrated;
           return html$1 `
       <div
         class=${classMap({
             drawer: true,
-            "drawer-open": this.open,
             "drawer-top": this.placement === "top",
             "drawer-end": this.placement === "end",
             "drawer-bottom": this.placement === "bottom",
@@ -26502,6 +26544,7 @@
             "drawer-contained": this.contained,
             "drawer-fixed": !this.contained
         })}
+        ?hidden=${shouldHide}
       >
         <div class="drawer-overlay" @click=${() => this.requestClose("overlay")} tabindex="-1"></div>
 
@@ -26522,6 +26565,7 @@
             ></sgds-close-button>
           </header>
           <slot class="drawer-body"></slot>
+          <slot name="footer"></slot>
         </div>
       </div>
     `;
@@ -26544,6 +26588,9 @@
   __decorate([
       property({ type: Boolean, reflect: true })
   ], SgdsDrawer.prototype, "open", void 0);
+  __decorate([
+      property({ type: String, reflect: true })
+  ], SgdsDrawer.prototype, "size", void 0);
   __decorate([
       property({ type: String, reflect: true })
   ], SgdsDrawer.prototype, "placement", void 0);
@@ -27529,7 +27576,8 @@
   const XL_BREAKPOINT = 1280;
   const XXL_BREAKPOINT = 1440;
 
-  const MainnavContext = createContext("mainnav-context");
+  const MainnavBreakpointContext = createContext("mainnav-context");
+  const MainnavExpandedContext = createContext("mainnav-expanded-context");
 
   var css_248z$z = css`:host{z-index:1200}nav{background-color:var(--sgds-surface-default);box-shadow:0 2px 2px 0 hsla(0,0%,5%,.08)}.navbar{align-items:stretch;display:flex;flex-wrap:wrap;gap:var(--sgds-gap-xs);justify-content:space-between;margin:auto;max-width:var(--sgds-mainnav-max-width);min-height:80px;padding:0 var(--sgds-mainnav-padding-x);position:relative;width:100%}@media screen and (max-width:768px){.navbar{padding:0 var(--sgds-mainnav-mobile-padding-x)}}.navbar-brand{align-items:center;display:flex;text-decoration:none;white-space:nowrap}.navbar-brand:focus,.navbar-brand:focus-visible{outline:0}.navbar-brand:focus-visible{box-shadow:var(--sgds-box-shadow-focus)}.navbar-nav{display:flex;flex-direction:column;height:100%;margin-bottom:0;margin-top:0;width:100%}nav>.navbar-body{background-color:var(--sgds-surface-default);border-top:var(--sgds-border-width-1) solid var(--sgds-border-color-translucent);bottom:0;box-shadow:0 2px 2px 0 hsla(0,0%,5%,.08);padding:var(--sgds-padding-md) 0;position:absolute;transition:transform .2s ease-in-out;width:100%;z-index:2000}nav>.navbar-body slot::slotted(:not(sgds-mainnav-item):not(sgds-mainnav-dropdown)){padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}@media screen and (max-width:768px){nav>.navbar-body slot::slotted(:not(sgds-mainnav-item):not(sgds-mainnav-dropdown)){padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}}.navbar-collapse{align-items:center;flex-basis:100%;flex-grow:1}.navbar-toggler{align-self:center}@media (prefers-reduced-motion:reduce){.navbar-toggler{transition:none}}.navbar-nav-scroll{overflow-y:auto}@media (min-width:576px){.navbar-expand-sm{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-sm .navbar-nav{flex-direction:row}.navbar-expand-sm .navbar-nav-scroll{overflow:visible}.navbar-expand-sm .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}}@media (min-width:768px){.navbar-expand-md{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-md .navbar-nav{flex-direction:row}.navbar-expand-md .navbar-nav-scroll{overflow:visible}.navbar-expand-md .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-md .navbar-toggler{display:none}}@media (min-width:1024px){.navbar-expand-lg{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav-scroll{overflow:visible}.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}}@media (min-width:1280px){.navbar-expand-xl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xl .navbar-nav{flex-direction:row}.navbar-expand-xl .navbar-nav .nav-link{padding-left:var(--mainnav-nav-link-padding-x);padding-right:var(--mainnav-nav-link-padding-x)}.navbar-expand-xl .navbar-nav-scroll{overflow:visible}.navbar-expand-xl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xl .navbar-toggler{display:none}}@media (min-width:1440px){.navbar-expand-xxl{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand-xxl .navbar-nav{flex-direction:row}.navbar-expand-xxl .navbar-nav-scroll{overflow:visible}.navbar-expand-xxl .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-xxl .navbar-toggler{display:none}}.navbar-expand{flex-wrap:nowrap;gap:var(--sgds-gap-xl);justify-content:flex-start}.navbar-expand .navbar-nav{flex-direction:row}.navbar-expand .navbar-nav-scroll{overflow:visible}.navbar-expand .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand .navbar-toggler{display:none}slot[name=non-collapsible]{align-items:center;display:flex;gap:var(--sgds-spacer-4);margin-left:auto}.slot-end{align-items:stretch;display:flex;gap:var(--sgds-gap-xs);margin-left:auto}.slot-end::slotted(:not([name$=-mainnav-item]):not([name$=-mainnav-dropdown])){align-self:center}`;
 
@@ -27560,6 +27608,10 @@
       constructor() {
           super();
           this._breakpointReached = false;
+          /** Indicates if mobile menu is open or closed */
+          this.expanded = false;
+          /** Denotes the transition state of mobile mainnav menu opening  */
+          this.expanding = false;
           /** The href link for brand logo */
           this.brandHref = "";
           this.collapseId = genId("mainnav", "collapse");
@@ -27567,8 +27619,6 @@
           this.expand = "lg";
           /** @internal */
           this.breakpointReached = false;
-          /** @internal */
-          this.expanded = false;
           window.addEventListener("resize", () => {
               const newBreakpointReachedValue = window.innerWidth < SIZES[this.expand];
               if (newBreakpointReachedValue !== this.breakpointReached) {
@@ -27576,7 +27626,8 @@
               }
               else {
                   this.body ? (this.body.hidden = true) : null;
-                  this.expanded = false;
+                  // this.expanded = false;
+                  this.expanding = false;
               }
               if (newBreakpointReachedValue) {
                   this._handleMobileNav();
@@ -27601,20 +27652,10 @@
       connectedCallback() {
           super.connectedCallback();
           this.addEventListener("click", (event) => this._handleClickOutOfElement(event, this.body));
-          this.addEventListener("sgds-mainnav-close", () => {
-              if (this.breakpointReached) {
-                  this.hide();
-              }
-          });
       }
       disconnectedCallback() {
           super.disconnectedCallback();
           this.removeEventListener("click", (event) => this._handleClickOutOfElement(event, this.body));
-          this.removeEventListener("sgds-mainnav-close", () => {
-              if (this.breakpointReached) {
-                  this.hide();
-              }
-          });
       }
       firstUpdated() {
           if (this.breakpointReached && this.body) {
@@ -27641,7 +27682,6 @@
               document.querySelector("body").style.overflow = "hidden";
               this.show();
           }
-          this.header.focus();
       }
       async _handleMobileNav() {
           if (!this.nav)
@@ -27661,6 +27701,7 @@
       async _animateToShow() {
           const sgdsShow = this.emit("sgds-show", { cancelable: true });
           if (sgdsShow.defaultPrevented) {
+              this.expanding = false;
               this.expanded = false;
               return;
           }
@@ -27674,6 +27715,7 @@
       async _animateToHide() {
           const slHide = this.emit("sgds-hide", { cancelable: true });
           if (slHide.defaultPrevented) {
+              this.expanding = false;
               this.expanded = true;
               return;
           }
@@ -27685,13 +27727,16 @@
           this.emit("sgds-after-hide");
       }
       async handleOpenChange() {
-          if (this.expanded) {
+          if (this.expanding) {
               // Show
-              this._animateToShow();
+              await this._animateToShow();
+              this.expanded = true;
           }
           else {
+              this.header.focus();
               // Hide
-              this._animateToHide();
+              await this._animateToHide();
+              this.expanded = false;
           }
       }
       /** Shows the menu. For when mainnav is in the collapsed form */
@@ -27699,7 +27744,7 @@
           if (this.expanded) {
               return;
           }
-          this.expanded = true;
+          this.expanding = true;
           return waitForEvent(this, "sgds-after-show");
       }
       /** Hide the menu. For when mainnav is in the collapsed form */
@@ -27707,11 +27752,8 @@
           if (!this.expanded) {
               return;
           }
-          this.expanded = false;
+          this.expanding = false;
           document.querySelector("body").style.removeProperty("overflow");
-          setTimeout(() => {
-              this.emit("close-dropdown-menu");
-          }, 200);
           return waitForEvent(this, "sgds-after-hide");
       }
       // assigning name attribute to elements added in slot="end", to use wildcard css selector to assign styles only to *-mainnav-item
@@ -27771,9 +27813,16 @@
       "sgds-icon-button": SgdsIconButton
   };
   __decorate([
-      provide({ context: MainnavContext }),
+      provide({ context: MainnavBreakpointContext }),
       state()
   ], SgdsMainnav.prototype, "_breakpointReached", void 0);
+  __decorate([
+      provide({ context: MainnavExpandedContext }),
+      state()
+  ], SgdsMainnav.prototype, "expanded", void 0);
+  __decorate([
+      state()
+  ], SgdsMainnav.prototype, "expanding", void 0);
   __decorate([
       query("nav")
   ], SgdsMainnav.prototype, "nav", void 0);
@@ -27801,9 +27850,6 @@
   __decorate([
       state()
   ], SgdsMainnav.prototype, "breakpointReached", void 0);
-  __decorate([
-      state()
-  ], SgdsMainnav.prototype, "expanded", void 0);
   __decorate([
       queryAssignedElements()
   ], SgdsMainnav.prototype, "defaultNodes", void 0);
@@ -27811,7 +27857,7 @@
       queryAssignedElements({ slot: "end" })
   ], SgdsMainnav.prototype, "endNodes", void 0);
   __decorate([
-      watch("expanded", { waitUntilFirstUpdate: true })
+      watch("expanding", { waitUntilFirstUpdate: true })
   ], SgdsMainnav.prototype, "handleOpenChange", null);
   setDefaultAnimation("mainnav.show", {
       keyframes: [
@@ -27840,6 +27886,7 @@
   class SgdsMainnavDropdown extends SgdsElement {
       constructor() {
           super(...arguments);
+          this._breakpointReached = true;
           /** @internal Forwards value to id attribute of toggle button of Dropdown. An unique id generated by default */
           this.togglerId = genId("dropdown", "button");
           /** When true,  applies active styles on the dropdown button */
@@ -27851,30 +27898,6 @@
       get defaultSlotItems() {
           return [...(this.defaultNodes || [])].filter((node) => typeof node.tagName !== "undefined");
       }
-      connectedCallback() {
-          super.connectedCallback();
-          document.addEventListener("close-dropdown-menu", () => {
-              this._resetDropdownMenu();
-              this._hideDropdownMenuItems();
-          });
-      }
-      disconnectedCallback() {
-          super.disconnectedCallback();
-          // Clean up the event listener when the element is removed from the DOM
-          document.removeEventListener("close-dropdown-menu", () => {
-              this._resetDropdownMenu();
-              this._hideDropdownMenuItems();
-          });
-      }
-      willUpdate(changedProperties) {
-          super.willUpdate(changedProperties);
-          if (!this.shadowRoot) {
-              return;
-          }
-          if (this._breakpointReached) {
-              this.shadowRoot.adoptedStyleSheets = [css_248z$19.styleSheet, css_248z$y.styleSheet];
-          }
-      }
       updated() {
           if (this._breakpointReached) {
               this._copyTextToMenu();
@@ -27896,8 +27919,10 @@
                   link.setAttribute("tabindex", "-1");
               }
               else {
-                  link.addEventListener("click", () => {
-                      this.emit("sgds-mainnav-close");
+                  link.addEventListener("click", (e) => {
+                      const target = e.target;
+                      const mainnav = target.closest("sgds-mainnav");
+                      mainnav.hide();
                   });
               }
           });
@@ -28016,12 +28041,9 @@
           }
       }
       _closeMenu() {
-          // 200ms delay as the transform transition is set to this timing
           this._resetDropdownMenu();
-          setTimeout(() => {
-              this._hideDropdownMenuItems();
-              this.navLink.focus();
-          }, 200);
+          this._hideDropdownMenuItems();
+          this.navLink.focus();
       }
       render() {
           const mobileView = html$1 `
@@ -28087,9 +28109,13 @@
       "sgds-icon": SgdsIcon
   };
   __decorate([
-      consume({ context: MainnavContext, subscribe: true }),
+      consume({ context: MainnavBreakpointContext, subscribe: true }),
       state()
   ], SgdsMainnavDropdown.prototype, "_breakpointReached", void 0);
+  __decorate([
+      consume({ context: MainnavExpandedContext, subscribe: true }),
+      state()
+  ], SgdsMainnavDropdown.prototype, "expanded", void 0);
   __decorate([
       query(".nav-link")
   ], SgdsMainnavDropdown.prototype, "navLink", void 0);
@@ -28160,8 +28186,10 @@
                   anchor.setAttribute("tabindex", "-1");
                   return;
               }
-              anchor.addEventListener("click", () => {
-                  this.emit("sgds-mainnav-close");
+              anchor.addEventListener("click", (e) => {
+                  const target = e.target;
+                  const mainnav = target.closest("sgds-mainnav");
+                  mainnav.hide();
               });
           }
       }
@@ -32035,6 +32063,10 @@
    * @summary Select is used to make one selection from a list through keyboard or mouse actions
    *
    * @event sgds-select - Emitted when an option is selected and the value of select is updated
+   * @event sgds-change - Emitted when the select value changes.
+   * @event sgds-focus -  Emitted when user input is focused.
+   * @event sgds-blur -  Emitted when user input is blurred.
+   *
    */
   class SgdsSelect extends SelectElement {
       connectedCallback() {
@@ -32059,6 +32091,8 @@
           }
       }
       async _handleValueChange() {
+          // when value change, always emit a change event
+          this.emit("sgds-change");
           if (this.value) {
               this.emit("sgds-select");
           }
@@ -32083,8 +32117,12 @@
           this.displayValue = this.selectedItems[0].label;
           this.hideMenu();
       }
+      _handleFocus() {
+          this.emit("sgds-focus");
+      }
       async _handleInputBlur(e) {
           e.preventDefault();
+          this.emit("sgds-blur");
           if (this.selectedItems.length > 0) {
               this.displayValue = this.selectedItems[0].label;
           }
@@ -32142,6 +32180,7 @@
             ?required=${this.required}
             .value=${this.displayValue}
             @blur=${this._handleInputBlur}
+            @focus=${this._handleFocus}
             aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this._controlId}-invalid` : undefined)}
             aria-labelledby="${this._labelId} ${this._controlId}Help ${this.invalid && this.hasFeedback
             ? `${this._controlId}-invalid`
@@ -32191,7 +32230,9 @@
    * @slot title - The title of the card
    * @slot description - The paragrapher text of the card
    * @slot lower - Accepts any additional content to be displayed below the card description, such as badges, metadata, or supplementary information.
-   * @slot link - Accepts an anchor element. Only a single element is allowed to be passed in.
+   * @slot footer - Footer area of the card. Accepts links, actions, or any custom content.
+   * @slot link - (@deprecated) Deprecated since 3.3.2 in favour of `footer` slot.
+   *  Legacy slot for anchor elements. Use `footer` instead.
    */
   class SgdsImageCard extends CardElement {
       constructor() {
@@ -32202,9 +32243,21 @@
           this.imagePosition = "before";
           /** Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio` */
           this.imageAdjustment = "default";
-          this.hasSlotController = new HasSlotController(this, "description");
+      }
+      get linkSlotItems() {
+          if (!this.linkNode || this.linkNode.length === 0)
+              return null;
+          const element = this.linkNode[0];
+          return (element.querySelector("a") || element);
+      }
+      get footerSlotItems() {
+          if (!this.footerNode || this.footerNode.length === 0)
+              return null;
+          const element = this.footerNode[0];
+          return (element.querySelector("a") || element);
       }
       firstUpdated() {
+          var _a, _b;
           if (this._imageNode.length === 0) {
               const image = this.shadowRoot.querySelector(".card-image");
               const body = this.shadowRoot.querySelector(".card-body");
@@ -32212,6 +32265,16 @@
               if (this.noPadding)
                   body.style.padding = "0px";
           }
+          if (this.stretchedLink) {
+              const footerHref = (_a = this.footerSlotItems) === null || _a === void 0 ? void 0 : _a.href;
+              const linkHref = (_b = this.linkSlotItems) === null || _b === void 0 ? void 0 : _b.href;
+              if (footerHref) {
+                  this.card.setAttribute("href", footerHref);
+              }
+              else if (linkHref) {
+                  this.card.setAttribute("href", linkHref);
+              }
+          }
       }
       handleImgSlotChange(e) {
           const childNodes = e.target.assignedNodes({ flatten: true });
@@ -32222,7 +32285,6 @@
       render() {
           const tag = this.stretchedLink ? literal `a` : literal `div`;
           const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;
-          const hasDescriptionSlot = this.hasSlotController.test("description");
           return html `
       <${tag} 
         class="card ${classMap({
@@ -32245,13 +32307,11 @@
             </div>
             <slot></slot>
           </div>
-          ${hasDescriptionSlot
-            ? html `<p class="card-text">
-                  <slot name="description"></slot>
-                </p>`
-            : nothing}
+          <slot name="description"></slot>
           <slot name="lower"></slot>
-          <slot name="link" @slotchange=${this.handleLinkSlotChange}></slot>
+          <slot name="footer">
+            <slot name="link" @slotchange=${this.handleLinkSlotChange}></slot>
+          </slot>
         </div>
       </${tag}>
     `;
@@ -32261,6 +32321,12 @@
   __decorate([
       queryAssignedNodes({ slot: "image", flatten: true })
   ], SgdsImageCard.prototype, "_imageNode", void 0);
+  __decorate([
+      queryAssignedElements({ slot: "footer" })
+  ], SgdsImageCard.prototype, "footerNode", void 0);
+  __decorate([
+      queryAssignedElements({ slot: "link" })
+  ], SgdsImageCard.prototype, "linkNode", void 0);
   __decorate([
       property({ type: Boolean, reflect: true })
   ], SgdsImageCard.prototype, "noPadding", void 0);
@@ -32273,7 +32339,7 @@
 
   customElements.define("sgds-image-card", SgdsImageCard);
 
-  var css_248z$1 = css`:host([noPadding]) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent)}:host(:not([noPadding])) .card:not(.disabled):hover{box-shadow:0 0 1px 0 hsla(0,0%,5%,.12),0 8px 16px 0 hsla(0,0%,5%,.12)}:host([orientation=vertical][noPadding]) .card-body{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none)}:host([orientation=vertical][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none)}:host([orientation=horizontal][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl)}:host([orientation=horizontal][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none)}:host([tinted]:not([noPadding])) .card-tinted-bg{background-color:var(--sgds-bg-translucent-subtle);opacity:var(--sgds-opacity-50)}:host([orientation][noPadding]) .card-media{padding:var(--sgds-padding-none)}slot[name=thumbnail]::slotted(*){height:auto;max-width:100%}`;
+  var css_248z$1 = css`:host([noPadding]) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent)}:host(:not([noPadding])) .card:not(.disabled):hover{box-shadow:0 0 1px 0 hsla(0,0%,5%,.12),0 8px 16px 0 hsla(0,0%,5%,.12)}:host([orientation=vertical][noPadding]) .card-body{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none)}:host([orientation=vertical][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none)}:host([orientation=horizontal][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-none) var(--sgds-padding-xl)}:host([orientation=horizontal][imagePosition=after][noPadding]) .card-body{padding:var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-none)}:host([tinted]:not([noPadding])) .card-tinted-bg{background-color:var(--sgds-bg-translucent-subtle);opacity:var(--sgds-opacity-50)}:host([orientation][noPadding]) .card-media{padding:var(--sgds-padding-none)}slot[name=thumbnail]::slotted(*){height:64px!important;max-width:128px!important;min-width:64px!important;object-fit:contain;object-position:left;width:100%}`;
 
   /**
    * @summary Thumbnail cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.
@@ -32284,19 +32350,31 @@
    * @slot title - The title of the card
    * @slot description - The paragrapher text of the card
    * @slot lower - Accepts any additional content to be displayed below the card description, such as badges, metadata, or supplementary information.
-   * @slot link - Accepts an anchor element. Only a single element is allowed to be passed in.
+   * @slot footer - Footer area of the card. Accepts links, actions, or any custom content.
+   * @slot link - (@deprecated) Deprecated since 3.3.2 in favour of `footer` slot.
+   *  Legacy slot for anchor elements. Use `footer` instead.
    */
   class SgdsThumbnailCard extends CardElement {
       constructor() {
           super(...arguments);
           /** Removes the card's internal padding when set to true.  */
           this.noPadding = false;
-          this.hasSlotController = new HasSlotController(this, "description");
+      }
+      get linkSlotItems() {
+          if (!this.linkNode || this.linkNode.length === 0)
+              return null;
+          const element = this.linkNode[0];
+          return (element.querySelector("a") || element);
+      }
+      get footerSlotItems() {
+          if (!this.footerNode || this.footerNode.length === 0)
+              return null;
+          const element = this.footerNode[0];
+          return (element.querySelector("a") || element);
       }
       firstUpdated() {
+          var _a, _b;
           if (this._thumbnailNode.length === 0) {
-              const thumbnail = this.shadowRoot.querySelector(".card-thumbnail");
-              thumbnail.style.display = "none";
               if ((this.orientation === "vertical" && this._upperNode.length === 0) || this.orientation === "horizontal") {
                   const media = this.shadowRoot.querySelector(".card-media");
                   media.style.display = "none";
@@ -32305,11 +32383,20 @@
                       body.style.padding = "0px";
               }
           }
+          if (this.stretchedLink) {
+              const footerHref = (_a = this.footerSlotItems) === null || _a === void 0 ? void 0 : _a.href;
+              const linkHref = (_b = this.linkSlotItems) === null || _b === void 0 ? void 0 : _b.href;
+              if (footerHref) {
+                  this.card.setAttribute("href", footerHref);
+              }
+              else if (linkHref) {
+                  this.card.setAttribute("href", linkHref);
+              }
+          }
       }
       render() {
           const tag = this.stretchedLink ? literal `a` : literal `div`;
           const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;
-          const hasDescriptionSlot = this.hasSlotController.test("description");
           return html `
       <${tag} 
         class="card ${classMap({
@@ -32319,9 +32406,7 @@
       >
         ${this.tinted && !this.noPadding ? html `<div class="card-tinted-bg"></div>` : nothing}
         <div class="card-media">
-					<div class="card-thumbnail">
-            <slot name="thumbnail"></slot>
-          </div>
+          <slot name="thumbnail"></slot>
 					${this.orientation === "vertical" ? html `<slot name="upper"></slot>` : nothing}
         </div>
         <div class="card-body">
@@ -32333,13 +32418,11 @@
             </div>
             <slot></slot>
           </div>
-          ${hasDescriptionSlot
-            ? html `<p class="card-text">
-                  <slot name="description"></slot>
-                </p>`
-            : nothing}
+          <slot name="description"></slot>
           <slot name="lower"></slot>
-          <slot name="link" @slotchange=${this.handleLinkSlotChange}></slot>
+          <slot name="footer">
+            <slot name="link" @slotchange=${this.handleLinkSlotChange}></slot>
+          </slot>
         </div>
       </${tag}>
     `;
@@ -32352,6 +32435,12 @@
   __decorate([
       queryAssignedNodes({ slot: "upper", flatten: true })
   ], SgdsThumbnailCard.prototype, "_upperNode", void 0);
+  __decorate([
+      queryAssignedElements({ slot: "footer" })
+  ], SgdsThumbnailCard.prototype, "footerNode", void 0);
+  __decorate([
+      queryAssignedElements({ slot: "link" })
+  ], SgdsThumbnailCard.prototype, "linkNode", void 0);
   __decorate([
       property({ type: Boolean, reflect: true })
   ], SgdsThumbnailCard.prototype, "noPadding", void 0);
@@ -32369,16 +32458,30 @@
    * @slot title - The title of the card
    * @slot description - The paragrapher text of the card
    * @slot lower - Accepts any additional content to be displayed below the card description, such as badges, metadata, or supplementary information.
-   * @slot link - Accepts an anchor element. Only a single element is allowed to be passed in.
+   * @slot footer - Footer area of the card. Accepts links, actions, or any custom content.
+   * @slot link - (@deprecated) Deprecated since 3.3.2 in favour of `footer` slot.
+   *  Legacy slot for anchor elements. Use `footer` instead.
    */
   class SgdsIconCard extends CardElement {
       constructor() {
           super(...arguments);
           /** Removes the card's internal padding when set to true.  */
           this.noPadding = false;
-          this.hasSlotController = new HasSlotController(this, "description");
+      }
+      get linkSlotItems() {
+          if (!this.linkNode || this.linkNode.length === 0)
+              return null;
+          const element = this.linkNode[0];
+          return (element.querySelector("a") || element);
+      }
+      get footerSlotItems() {
+          if (!this.footerNode || this.footerNode.length === 0)
+              return null;
+          const element = this.footerNode[0];
+          return (element.querySelector("a") || element);
       }
       firstUpdated() {
+          var _a, _b;
           if (this._iconNode.length === 0) {
               if ((this.orientation === "vertical" && this._upperNode.length === 0) || this.orientation === "horizontal") {
                   const media = this.shadowRoot.querySelector(".card-media");
@@ -32388,14 +32491,24 @@
                       body.style.padding = "0px";
               }
           }
+          if (this.stretchedLink) {
+              const footerHref = (_a = this.footerSlotItems) === null || _a === void 0 ? void 0 : _a.href;
+              const linkHref = (_b = this.linkSlotItems) === null || _b === void 0 ? void 0 : _b.href;
+              if (footerHref) {
+                  this.card.setAttribute("href", footerHref);
+              }
+              else if (linkHref) {
+                  this.card.setAttribute("href", linkHref);
+              }
+          }
       }
       render() {
           const tag = this.stretchedLink ? literal `a` : literal `div`;
           const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;
-          const hasDescriptionSlot = this.hasSlotController.test("description");
           return html `
       <${tag} 
-        class="card ${classMap({
+        class="${classMap({
+            card: true,
             disabled: this.disabled
         })}"
         tabindex=${cardTabIndex}
@@ -32414,13 +32527,11 @@
             </div>
             <slot></slot>
           </div>
-          ${hasDescriptionSlot
-            ? html `<p class="card-text">
-                  <slot name="description"></slot>
-                </p>`
-            : nothing}
+          <slot name="description"></slot>
           <slot name="lower"></slot>
-          <slot name="link" @slotchange=${this.handleLinkSlotChange}></slot>
+          <slot name="footer">
+            <slot name="link" @slotchange=${this.handleLinkSlotChange}></slot>
+          </slot>
         </div>
       </${tag}>
     `;
@@ -32433,6 +32544,12 @@
   __decorate([
       queryAssignedNodes({ slot: "upper", flatten: true })
   ], SgdsIconCard.prototype, "_upperNode", void 0);
+  __decorate([
+      queryAssignedElements({ slot: "footer" })
+  ], SgdsIconCard.prototype, "footerNode", void 0);
+  __decorate([
+      queryAssignedElements({ slot: "link" })
+  ], SgdsIconCard.prototype, "linkNode", void 0);
   __decorate([
       property({ type: Boolean, reflect: true })
   ], SgdsIconCard.prototype, "noPadding", void 0);