@uh-design-system/component-library 1.2.0 → 1.3.0-rc.1

package/dist/collection/components/01-base-components/ds-ribbon/ds-ribbon.css

@@ -13,7 +13,7 @@
   z-index: 1000;
 }
 
-.ds-ribbon__DFAX9n__container {
+.ds-ribbon__rbEY9j__container {
   display: grid;
   grid-template-columns: 8rem auto;
   align-items: center;
@@ -24,36 +24,36 @@
   height: 3rem;
 }
 @media (min-width: 30rem) {
-  .ds-ribbon__DFAX9n__container {
+  .ds-ribbon__rbEY9j__container {
     grid-template-columns: auto auto;
   }
 }
 @media (min-width: 60rem) {
-  .ds-ribbon__DFAX9n__container {
+  .ds-ribbon__rbEY9j__container {
     grid-template-columns: 145px auto;
     padding: 0 var(--ds-spacing-large, 32px);
   }
 }
 @media (min-width: 75rem) {
-  .ds-ribbon__DFAX9n__container {
+  .ds-ribbon__rbEY9j__container {
     grid-template-columns: auto auto;
   }
 }
-.ds-ribbon__DFAX9n__branding {
+.ds-ribbon__rbEY9j__branding {
   display: flex;
   align-items: center;
   flex-shrink: 0;
 }
-.ds-ribbon__DFAX9n__mobile-toggle {
+.ds-ribbon__rbEY9j__mobile-toggle {
   display: block;
   grid-column-end: -1;
 }
 @media (min-width: 60rem) {
-  .ds-ribbon__DFAX9n__mobile-toggle {
+  .ds-ribbon__rbEY9j__mobile-toggle {
     display: none;
   }
 }
-.ds-ribbon__DFAX9n__drawer-backdrop {
+.ds-ribbon__rbEY9j__drawer-backdrop {
   position: fixed;
   inset: 0;
   background-color: var(--ds-overlay-black-00);
@@ -63,20 +63,20 @@
   pointer-events: none;
 }
 @media (min-width: 60rem) {
-  .ds-ribbon__DFAX9n__drawer-backdrop {
+  .ds-ribbon__rbEY9j__drawer-backdrop {
     display: none;
   }
 }
-.ds-ribbon__DFAX9n--drawer-open .ds-ribbon__DFAX9n__drawer-backdrop {
+.ds-ribbon__rbEY9j--drawer-open .ds-ribbon__rbEY9j__drawer-backdrop {
   cursor: pointer;
   pointer-events: auto;
 }
 @media (min-width: 60rem) {
-  .ds-ribbon__DFAX9n__drawer-backdrop {
+  .ds-ribbon__rbEY9j__drawer-backdrop {
     pointer-events: auto;
     z-index: 1;
   }
-  .ds-ribbon__DFAX9n__drawer-backdrop, .ds-ribbon__DFAX9n--drawer-open .ds-ribbon__DFAX9n__container .ds-ribbon__DFAX9n__drawer-backdrop {
+  .ds-ribbon__rbEY9j__drawer-backdrop, .ds-ribbon__rbEY9j--drawer-open .ds-ribbon__rbEY9j__container .ds-ribbon__rbEY9j__drawer-backdrop {
     position: static;
     background-color: unset;
     backdrop-filter: unset;
@@ -84,25 +84,25 @@
     transition: none;
   }
 }
-.ds-ribbon__DFAX9n--drawer-clicked .ds-ribbon__DFAX9n__drawer-backdrop {
+.ds-ribbon__rbEY9j--drawer-clicked .ds-ribbon__rbEY9j__drawer-backdrop {
   transition: background-color 0.3s, opacity 0s 0.3s;
 }
-.ds-ribbon__DFAX9n--drawer-open .ds-ribbon__DFAX9n__drawer-backdrop {
+.ds-ribbon__rbEY9j--drawer-open .ds-ribbon__rbEY9j__drawer-backdrop {
   background-color: var(--ds-overlay-black-50);
   opacity: 1;
   transition: background-color 0.1s 0.3s, opacity 0s 0s;
   z-index: 999;
 }
-.ds-ribbon__DFAX9n__desktop-nav {
+.ds-ribbon__rbEY9j__desktop-nav {
   display: none;
   grid-column-end: -1;
 }
 @media (min-width: 60rem) {
-  .ds-ribbon__DFAX9n__desktop-nav {
+  .ds-ribbon__rbEY9j__desktop-nav {
     display: block;
   }
 }
-.ds-ribbon__DFAX9n__desktop-links {
+.ds-ribbon__rbEY9j__desktop-links {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -111,18 +111,18 @@
   gap: var(--ds-spacing-medium, 24px);
   align-items: center;
 }
-.ds-ribbon__DFAX9n__desktop-link-item {
+.ds-ribbon__rbEY9j__desktop-link-item {
   display: flex;
   align-items: center;
   position: relative;
   text-transform: uppercase;
   height: var(--ds-spacing-2xLarge, 3rem);
 }
-.ds-ribbon__DFAX9n__desktop-link {
+.ds-ribbon__rbEY9j__desktop-link {
   font-size: var(--ds-fontSize-12, 0.75rem);
   white-space: nowrap;
 }
-.ds-ribbon__DFAX9n__desktop-badge {
+.ds-ribbon__rbEY9j__desktop-badge {
   font-size: var(--ds-font-size-small, 12px);
   letter-spacing: var(--ds-letterSpacing-wide, 0);
   margin-left: var(--ds-spacing-2xSmall, 8px);
@@ -131,7 +131,7 @@
   top: 0;
   right: 100%;
 }
-.ds-ribbon__DFAX9n__desktop-badge > * {
+.ds-ribbon__rbEY9j__desktop-badge > * {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -140,12 +140,12 @@
   border-radius: 1.25rem;
   padding: 0 var(--ds-spacing-2xSmall, 0.5rem);
 }
-.ds-ribbon__DFAX9n__desktop-badge > * span {
+.ds-ribbon__rbEY9j__desktop-badge > * span {
   line-height: 0;
   font-weight: 600;
   color: var(--ds-textColor-info, #005b80);
 }
-.ds-ribbon__DFAX9n__drawer {
+.ds-ribbon__rbEY9j__drawer {
   position: absolute;
   top: 0;
   right: 0;
@@ -160,7 +160,7 @@
   cursor: default;
 }
 @media (min-width: 60rem) {
-  .ds-ribbon__DFAX9n__drawer {
+  .ds-ribbon__rbEY9j__drawer {
     position: static;
     width: auto;
     max-width: none;
@@ -172,10 +172,10 @@
     overflow-y: visible;
   }
 }
-.ds-ribbon__DFAX9n--drawer-open .ds-ribbon__DFAX9n__drawer {
+.ds-ribbon__rbEY9j--drawer-open .ds-ribbon__rbEY9j__drawer {
   transform: translateX(0%);
 }
-.ds-ribbon__DFAX9n__drawer-header {
+.ds-ribbon__rbEY9j__drawer-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -188,36 +188,36 @@
   background-color: var(--ds-bgColor-white, #fff);
 }
 @media (min-width: 60rem) {
-  .ds-ribbon__DFAX9n__drawer-header {
+  .ds-ribbon__rbEY9j__drawer-header {
     display: none;
   }
 }
-.ds-ribbon__DFAX9n__drawer-branding {
+.ds-ribbon__rbEY9j__drawer-branding {
   display: flex;
   align-items: center;
   flex-shrink: 0;
   max-width: 8rem;
 }
 @media (min-width: 30rem) {
-  .ds-ribbon__DFAX9n__drawer-branding {
+  .ds-ribbon__rbEY9j__drawer-branding {
     max-width: unset;
   }
 }
-.ds-ribbon__DFAX9n__drawer-close {
+.ds-ribbon__rbEY9j__drawer-close {
   flex-shrink: 0;
   margin-left: var(--ds-spacing-small, 16px);
 }
-.ds-ribbon__DFAX9n__drawer-nav {
+.ds-ribbon__rbEY9j__drawer-nav {
   display: block;
   padding: var(--ds-spacing-medium, 24px);
   position: relative;
 }
 @media (min-width: 60rem) {
-  .ds-ribbon__DFAX9n__drawer-nav {
+  .ds-ribbon__rbEY9j__drawer-nav {
     padding: 0;
   }
 }
-.ds-ribbon__DFAX9n__top-scrim, .ds-ribbon__DFAX9n__bottom-scrim {
+.ds-ribbon__rbEY9j__top-scrim, .ds-ribbon__rbEY9j__bottom-scrim {
   pointer-events: none;
   width: 100%;
   height: 2.75rem;
@@ -228,21 +228,21 @@
   z-index: 1;
   display: none;
 }
-.ds-ribbon__DFAX9n__top-scrim {
+.ds-ribbon__rbEY9j__top-scrim {
   top: 3rem;
   background: linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%);
 }
-.ds-ribbon__DFAX9n__bottom-scrim {
+.ds-ribbon__rbEY9j__bottom-scrim {
   bottom: 0;
   background: linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%);
 }
-.has-top-scrim .ds-ribbon__DFAX9n__top-scrim {
+.has-top-scrim .ds-ribbon__rbEY9j__top-scrim {
   display: block;
 }
-.has-bottom-scrim .ds-ribbon__DFAX9n__bottom-scrim {
+.has-bottom-scrim .ds-ribbon__rbEY9j__bottom-scrim {
   display: block;
 }
-.ds-ribbon__DFAX9n__drawer-links {
+.ds-ribbon__rbEY9j__drawer-links {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -250,7 +250,7 @@
   flex-direction: column;
   gap: var(--ds-spacing-4xSmall, 2px);
 }
-.ds-ribbon__DFAX9n__drawer-link-item {
+.ds-ribbon__rbEY9j__drawer-link-item {
   display: flex;
   align-items: center;
   position: relative;
@@ -258,42 +258,42 @@
   border-bottom: var(--ds-borderWidth-hairline) solid var(--ds-color-border-subtle);
   height: var(--ds-spacing-2xLarge, 3rem);
 }
-.ds-ribbon__DFAX9n__drawer-link-item:last-child {
+.ds-ribbon__rbEY9j__drawer-link-item:last-child {
   border-bottom: none;
 }
 @media (min-width: 60rem) {
-  .ds-ribbon__DFAX9n__drawer-link-item {
+  .ds-ribbon__rbEY9j__drawer-link-item {
     justify-content: flex-start;
     padding: 0;
     border-bottom: none;
   }
-  .ds-ribbon__DFAX9n__drawer-link-item:last-child {
+  .ds-ribbon__rbEY9j__drawer-link-item:last-child {
     border-bottom: none;
   }
 }
-.ds-ribbon__DFAX9n__drawer-link {
+.ds-ribbon__rbEY9j__drawer-link {
   font-size: var(--ds-fontSize-14, 0.875rem);
   white-space: nowrap;
 }
 @media (min-width: 60rem) {
-  .ds-ribbon__DFAX9n__drawer-link {
+  .ds-ribbon__rbEY9j__drawer-link {
     font-size: var(--ds-fontSize-12, 0.75rem);
   }
 }
-.ds-ribbon__DFAX9n__drawer-badge {
+.ds-ribbon__rbEY9j__drawer-badge {
   font-size: var(--ds-font-size-small, 12px);
   letter-spacing: var(--ds-letterSpacing-wide, 0);
   margin-left: var(--ds-spacing-2xSmall, 8px);
   text-transform: none;
 }
 @media (min-width: 60rem) {
-  .ds-ribbon__DFAX9n__drawer-badge {
+  .ds-ribbon__rbEY9j__drawer-badge {
     position: absolute;
     top: 0;
     right: 100%;
   }
 }
-.ds-ribbon__DFAX9n__drawer-badge > * {
+.ds-ribbon__rbEY9j__drawer-badge > * {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -302,25 +302,25 @@
   border-radius: 1.25rem;
   padding: 0 var(--ds-spacing-2xSmall, 0.5rem);
 }
-.ds-ribbon__DFAX9n__drawer-badge > * span {
+.ds-ribbon__rbEY9j__drawer-badge > * span {
   line-height: 0;
   font-weight: 600;
   color: var(--ds-textColor-info, #005b80);
 }
 
-:host(.ds-ribbon__DFAX9n--drawer-open) .ds-ribbon__DFAX9n__drawer-backdrop {
+:host(.ds-ribbon__rbEY9j--drawer-open) .ds-ribbon__rbEY9j__drawer-backdrop {
   display: block;
 }
 @media (min-width: 60rem) {
-  :host(.ds-ribbon__DFAX9n--drawer-open) .ds-ribbon__DFAX9n__drawer-backdrop {
+  :host(.ds-ribbon__rbEY9j--drawer-open) .ds-ribbon__rbEY9j__drawer-backdrop {
     display: block;
   }
 }
-:host(.ds-ribbon__DFAX9n--drawer-open) .ds-ribbon__DFAX9n__drawer {
+:host(.ds-ribbon__rbEY9j--drawer-open) .ds-ribbon__rbEY9j__drawer {
   transform: translateX(0);
 }
 @media (min-width: 60rem) {
-  :host(.ds-ribbon__DFAX9n--drawer-open) .ds-ribbon__DFAX9n__drawer {
+  :host(.ds-ribbon__rbEY9j--drawer-open) .ds-ribbon__rbEY9j__drawer {
     transform: none;
   }
 }

package/dist/collection/components/01-base-components/ds-ribbon/ds-ribbon.js

@@ -14,7 +14,6 @@ export class DsRibbon {
     el;
     drawerRef;
     mobileToggleRef;
-    closeButtonRef;
     dsIcon;
     dsSiteName;
     dsHideBranding = false;
@@ -291,21 +290,14 @@ export class DsRibbon {
         this.setupScrollListener(this.drawerRef, scrollableHeight);
     }
     closeMobileDrawer() {
-        if (this.closeButtonRef && document.activeElement !== this.closeButtonRef) {
-            this.closeButtonRef.setFocus?.();
-        }
         this.isMobileDrawerOpen = false;
         if (this.drawerRef) {
             this.drawerRef.removeEventListener('scroll', this.handleDrawerScroll);
         }
-        setTimeout(async () => {
-            try {
-                await this.mobileToggleRef.setFocus();
-            }
-            catch {
-                this.mobileToggleRef.focus();
-            }
-        }, 50);
+        const buttonInToggle = this.mobileToggleRef?.querySelector('button');
+        setTimeout(() => {
+            buttonInToggle?.focus();
+        }, 100);
     }
     getBrandingUrl() {
         const language = getLanguage() || 'fi';
@@ -339,7 +331,7 @@ export class DsRibbon {
         const baseClass = cx('ds-ribbon');
         const brandingUrl = this.getBrandingUrl();
         const iconName = this.dsIcon || this.icon || fallbackRibbonData.config?.dsIcon;
-        return (h("div", { class: `${baseClass}__drawer-header` }, h("div", { class: `${baseClass}__drawer-branding` }, h(this.DsLinkLogo, { dsHref: brandingUrl, dsIcon: iconName, dsIconTitle: this.dsIconTitle, dsIconAriaLabel: this.dsIconAriaLabel, dsText: this.localizedSiteName, dsTarget: "_self", class: `${baseClass}__drawer-branding-link`, "aria-label": this.localizedLogoAriaLabel })), h(this.DsButton, { dsId: this.dsCloseButtonId, dsType: "button", dsVariant: "supplementary", dsColour: "black", dsSize: "small", dsText: this.localizedCloseText, dsIcon: "close", dsIconPosition: "end", class: `${baseClass}__drawer-close`, ref: el => (this.closeButtonRef = el), onClick: this.handleMobileToggle })));
+        return (h("div", { class: `${baseClass}__drawer-header` }, h("div", { class: `${baseClass}__drawer-branding` }, h(this.DsLinkLogo, { dsHref: brandingUrl, dsIcon: iconName, dsIconTitle: this.dsIconTitle, dsIconAriaLabel: this.dsIconAriaLabel, dsText: this.localizedSiteName, dsTarget: "_self", class: `${baseClass}__drawer-branding-link`, "aria-label": this.localizedLogoAriaLabel })), h(this.DsButton, { dsId: this.dsCloseButtonId, dsType: "button", dsVariant: "supplementary", dsColour: "black", dsSize: "small", dsText: this.localizedCloseText, dsIcon: "close", dsIconPosition: "end", class: `${baseClass}__drawer-close`, onClick: this.handleMobileToggle })));
     }
     renderMobileToggle() {
         const links = this.localizedLinks;
@@ -362,7 +354,7 @@ export class DsRibbon {
             [`${baseClass}--drawer-open`]: this.isMobileDrawerOpen,
             [`${baseClass}--drawer-clicked`]: this.isMobileDrawerClicked,
         });
-        return (h("nav", { key: '2b9d1a1ed3be751312fc2ea10a8be977eda529da', class: ribbonClasses, "aria-label": this.localizedNavAriaLabel, ...this.inheritedAttributes }, h("div", { key: '734e7ac32c5fab06eb538361bb2ccc4b683ccf0e', class: `${baseClass}__container`, ...(this.isMobileDrawerOpen ? { inert: true } : {}) }, this.renderBranding(), this.renderDesktopNavigation(), this.renderMobileToggle()), this.renderMobileNavigation()));
+        return (h("div", { key: 'cf7741aa5f17c6f8203fac966fc822180aa09cae', class: ribbonClasses }, h("nav", { key: 'aef3df5ebe392617370536186c0d469dca44247b', "aria-label": this.localizedNavAriaLabel, ...(this.isMobileDrawerOpen ? { inert: true } : {}) }, h("div", { key: '198eda00d400fa04db0f4bc6ec1fea77c90b3278', class: `${baseClass}__container`, ...this.inheritedAttributes }, this.renderBranding(), this.renderDesktopNavigation(), this.renderMobileToggle())), this.renderMobileNavigation()));
     }
     static get is() { return "ds-ribbon"; }
     static get encapsulation() { return "shadow"; }