@uh-design-system/component-library 1.5.2 → 1.6.0-rc.1

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

@@ -13,7 +13,7 @@
   z-index: 1000;
 }
 
-.ds-ribbon__MsKlb0 {
+.ds-ribbon__izAhxK {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -21,7 +21,7 @@
   font-size: var(--ds-fontSize-16);
   display: block;
 }
-.ds-ribbon__MsKlb0__container {
+.ds-ribbon__izAhxK__container {
   display: grid;
   grid-template-columns: 8rem auto;
   align-items: center;
@@ -32,36 +32,36 @@
   height: 3rem;
 }
 @media (min-width: 30rem) {
-  .ds-ribbon__MsKlb0__container {
+  .ds-ribbon__izAhxK__container {
     grid-template-columns: auto auto;
   }
 }
 @media (min-width: 60rem) {
-  .ds-ribbon__MsKlb0__container {
+  .ds-ribbon__izAhxK__container {
     grid-template-columns: 145px auto;
     padding: 0 var(--ds-spacing-large, 32px);
   }
 }
 @media (min-width: 75rem) {
-  .ds-ribbon__MsKlb0__container {
+  .ds-ribbon__izAhxK__container {
     grid-template-columns: auto auto;
   }
 }
-.ds-ribbon__MsKlb0__branding {
+.ds-ribbon__izAhxK__branding {
   display: flex;
   align-items: center;
   flex-shrink: 0;
 }
-.ds-ribbon__MsKlb0__mobile-toggle {
+.ds-ribbon__izAhxK__mobile-toggle {
   display: block;
   grid-column-end: -1;
 }
 @media (min-width: 60rem) {
-  .ds-ribbon__MsKlb0__mobile-toggle {
+  .ds-ribbon__izAhxK__mobile-toggle {
     display: none;
   }
 }
-.ds-ribbon__MsKlb0__drawer-backdrop {
+.ds-ribbon__izAhxK__drawer-backdrop {
   position: fixed;
   inset: 0;
   background-color: var(--ds-overlay-black-00);
@@ -71,20 +71,20 @@
   pointer-events: none;
 }
 @media (min-width: 60rem) {
-  .ds-ribbon__MsKlb0__drawer-backdrop {
+  .ds-ribbon__izAhxK__drawer-backdrop {
     display: none;
   }
 }
-.ds-ribbon__MsKlb0--drawer-open .ds-ribbon__MsKlb0__drawer-backdrop {
+.ds-ribbon__izAhxK--drawer-open .ds-ribbon__izAhxK__drawer-backdrop {
   cursor: pointer;
   pointer-events: auto;
 }
 @media (min-width: 60rem) {
-  .ds-ribbon__MsKlb0__drawer-backdrop {
+  .ds-ribbon__izAhxK__drawer-backdrop {
     pointer-events: auto;
     z-index: 1;
   }
-  .ds-ribbon__MsKlb0__drawer-backdrop, .ds-ribbon__MsKlb0--drawer-open .ds-ribbon__MsKlb0__container .ds-ribbon__MsKlb0__drawer-backdrop {
+  .ds-ribbon__izAhxK__drawer-backdrop, .ds-ribbon__izAhxK--drawer-open .ds-ribbon__izAhxK__container .ds-ribbon__izAhxK__drawer-backdrop {
     position: static;
     background-color: unset;
     backdrop-filter: unset;
@@ -92,25 +92,25 @@
     transition: none;
   }
 }
-.ds-ribbon__MsKlb0--drawer-clicked .ds-ribbon__MsKlb0__drawer-backdrop {
+.ds-ribbon__izAhxK--drawer-clicked .ds-ribbon__izAhxK__drawer-backdrop {
   transition: background-color 0.3s, opacity 0s 0.3s;
 }
-.ds-ribbon__MsKlb0--drawer-open .ds-ribbon__MsKlb0__drawer-backdrop {
+.ds-ribbon__izAhxK--drawer-open .ds-ribbon__izAhxK__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__MsKlb0__desktop-nav {
+.ds-ribbon__izAhxK__desktop-nav {
   display: none;
   grid-column-end: -1;
 }
 @media (min-width: 60rem) {
-  .ds-ribbon__MsKlb0__desktop-nav {
+  .ds-ribbon__izAhxK__desktop-nav {
     display: block;
   }
 }
-.ds-ribbon__MsKlb0__desktop-links {
+.ds-ribbon__izAhxK__desktop-links {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -119,18 +119,19 @@
   gap: var(--ds-spacing-medium, 24px);
   align-items: center;
 }
-.ds-ribbon__MsKlb0__desktop-link-item {
+.ds-ribbon__izAhxK__desktop-link-item {
+  --ds-link-text-transform: uppercase;
   display: flex;
   align-items: center;
   position: relative;
   text-transform: uppercase;
   height: var(--ds-spacing-2xLarge, 3rem);
 }
-.ds-ribbon__MsKlb0__desktop-link {
-  font-size: var(--ds-fontSize-12);
+.ds-ribbon__izAhxK__desktop-link {
+  --ds-link-font-size: var(--ds-fontSize-12);
   white-space: nowrap;
 }
-.ds-ribbon__MsKlb0__desktop-badge {
+.ds-ribbon__izAhxK__desktop-badge {
   font-size: var(--ds-fontSize-12);
   letter-spacing: var(--ds-letterSpacing-wide, 0);
   margin-left: var(--ds-spacing-2xSmall, 8px);
@@ -139,7 +140,7 @@
   top: 0;
   right: 100%;
 }
-.ds-ribbon__MsKlb0__desktop-badge > * {
+.ds-ribbon__izAhxK__desktop-badge > * {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -148,13 +149,13 @@
   border-radius: 1.25rem;
   padding: 0 var(--ds-spacing-2xSmall, 0.5rem);
 }
-.ds-ribbon__MsKlb0__desktop-badge > * span {
+.ds-ribbon__izAhxK__desktop-badge > * span {
   font-size: var(--ds-fontSize-12);
   line-height: 0;
   font-weight: 600;
   color: var(--ds-textColor-info, #005b80);
 }
-.ds-ribbon__MsKlb0__drawer {
+.ds-ribbon__izAhxK__drawer {
   position: absolute;
   top: 0;
   right: 0;
@@ -169,7 +170,7 @@
   cursor: default;
 }
 @media (min-width: 60rem) {
-  .ds-ribbon__MsKlb0__drawer {
+  .ds-ribbon__izAhxK__drawer {
     position: static;
     width: auto;
     max-width: none;
@@ -181,10 +182,10 @@
     overflow-y: visible;
   }
 }
-.ds-ribbon__MsKlb0--drawer-open .ds-ribbon__MsKlb0__drawer {
+.ds-ribbon__izAhxK--drawer-open .ds-ribbon__izAhxK__drawer {
   transform: translateX(0%);
 }
-.ds-ribbon__MsKlb0__drawer-header {
+.ds-ribbon__izAhxK__drawer-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -197,36 +198,36 @@
   background-color: var(--ds-bgColor-white, #fff);
 }
 @media (min-width: 60rem) {
-  .ds-ribbon__MsKlb0__drawer-header {
+  .ds-ribbon__izAhxK__drawer-header {
     display: none;
   }
 }
-.ds-ribbon__MsKlb0__drawer-branding {
+.ds-ribbon__izAhxK__drawer-branding {
   display: flex;
   align-items: center;
   flex-shrink: 0;
   max-width: 8rem;
 }
 @media (min-width: 30rem) {
-  .ds-ribbon__MsKlb0__drawer-branding {
+  .ds-ribbon__izAhxK__drawer-branding {
     max-width: unset;
   }
 }
-.ds-ribbon__MsKlb0__drawer-close {
+.ds-ribbon__izAhxK__drawer-close {
   flex-shrink: 0;
   margin-left: var(--ds-spacing-small, 16px);
 }
-.ds-ribbon__MsKlb0__drawer-nav {
+.ds-ribbon__izAhxK__drawer-nav {
   display: block;
   padding: var(--ds-spacing-medium, 24px);
   position: relative;
 }
 @media (min-width: 60rem) {
-  .ds-ribbon__MsKlb0__drawer-nav {
+  .ds-ribbon__izAhxK__drawer-nav {
     padding: 0;
   }
 }
-.ds-ribbon__MsKlb0__top-scrim, .ds-ribbon__MsKlb0__bottom-scrim {
+.ds-ribbon__izAhxK__top-scrim, .ds-ribbon__izAhxK__bottom-scrim {
   pointer-events: none;
   width: 100%;
   height: 2.75rem;
@@ -237,21 +238,21 @@
   z-index: 1;
   display: none;
 }
-.ds-ribbon__MsKlb0__top-scrim {
+.ds-ribbon__izAhxK__top-scrim {
   top: 3rem;
   background: linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%);
 }
-.ds-ribbon__MsKlb0__bottom-scrim {
+.ds-ribbon__izAhxK__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__MsKlb0__top-scrim {
+.has-top-scrim .ds-ribbon__izAhxK__top-scrim {
   display: block;
 }
-.has-bottom-scrim .ds-ribbon__MsKlb0__bottom-scrim {
+.has-bottom-scrim .ds-ribbon__izAhxK__bottom-scrim {
   display: block;
 }
-.ds-ribbon__MsKlb0__drawer-links {
+.ds-ribbon__izAhxK__drawer-links {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -259,50 +260,51 @@
   flex-direction: column;
   gap: var(--ds-spacing-4xSmall, 2px);
 }
-.ds-ribbon__MsKlb0__drawer-link-item {
+.ds-ribbon__izAhxK__drawer-link-item {
   display: flex;
   align-items: center;
   position: relative;
   text-transform: uppercase;
+  --ds-link-text-transform: uppercase;
   border-bottom: var(--ds-borderWidth-hairline) solid var(--ds-color-border-subtle);
   height: var(--ds-spacing-2xLarge, 3rem);
 }
-.ds-ribbon__MsKlb0__drawer-link-item:last-child {
+.ds-ribbon__izAhxK__drawer-link-item:last-child {
   border-bottom: none;
 }
 @media (min-width: 60rem) {
-  .ds-ribbon__MsKlb0__drawer-link-item {
+  .ds-ribbon__izAhxK__drawer-link-item {
     justify-content: flex-start;
     padding: 0;
     border-bottom: none;
   }
-  .ds-ribbon__MsKlb0__drawer-link-item:last-child {
+  .ds-ribbon__izAhxK__drawer-link-item:last-child {
     border-bottom: none;
   }
 }
-.ds-ribbon__MsKlb0__drawer-link {
-  font-size: var(--ds-fontSize-14, 0.875rem);
+.ds-ribbon__izAhxK__drawer-link {
+  --ds-link-font-size: var(--ds-fontSize-14, 0.875rem);
   white-space: nowrap;
 }
 @media (min-width: 60rem) {
-  .ds-ribbon__MsKlb0__drawer-link {
-    font-size: var(--ds-fontSize-12, 0.75rem);
+  .ds-ribbon__izAhxK__drawer-link {
+    --ds-link-font-size: var(--ds-fontSize-12, 0.75rem);
   }
 }
-.ds-ribbon__MsKlb0__drawer-badge {
+.ds-ribbon__izAhxK__drawer-badge {
   font-size: var(--ds-fontSize-12);
   letter-spacing: var(--ds-letterSpacing-wide, 0);
   margin-left: var(--ds-spacing-2xSmall, 8px);
   text-transform: none;
 }
 @media (min-width: 60rem) {
-  .ds-ribbon__MsKlb0__drawer-badge {
+  .ds-ribbon__izAhxK__drawer-badge {
     position: absolute;
     top: 0;
     right: 100%;
   }
 }
-.ds-ribbon__MsKlb0__drawer-badge > * {
+.ds-ribbon__izAhxK__drawer-badge > * {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -311,26 +313,26 @@
   border-radius: 1.25rem;
   padding: 0 var(--ds-spacing-2xSmall, 0.5rem);
 }
-.ds-ribbon__MsKlb0__drawer-badge > * span {
+.ds-ribbon__izAhxK__drawer-badge > * span {
   font-size: inherit;
   line-height: 0;
   font-weight: 600;
   color: var(--ds-textColor-info, #005b80);
 }
 
-:host(.ds-ribbon__MsKlb0--drawer-open) .ds-ribbon__MsKlb0__drawer-backdrop {
+:host(.ds-ribbon__izAhxK--drawer-open) .ds-ribbon__izAhxK__drawer-backdrop {
   display: block;
 }
 @media (min-width: 60rem) {
-  :host(.ds-ribbon__MsKlb0--drawer-open) .ds-ribbon__MsKlb0__drawer-backdrop {
+  :host(.ds-ribbon__izAhxK--drawer-open) .ds-ribbon__izAhxK__drawer-backdrop {
     display: block;
   }
 }
-:host(.ds-ribbon__MsKlb0--drawer-open) .ds-ribbon__MsKlb0__drawer {
+:host(.ds-ribbon__izAhxK--drawer-open) .ds-ribbon__izAhxK__drawer {
   transform: translateX(0);
 }
 @media (min-width: 60rem) {
-  :host(.ds-ribbon__MsKlb0--drawer-open) .ds-ribbon__MsKlb0__drawer {
+  :host(.ds-ribbon__izAhxK--drawer-open) .ds-ribbon__izAhxK__drawer {
     transform: none;
   }
 }

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

@@ -139,7 +139,6 @@ export class DsRibbon extends Mixin(componentFactory('ds-ribbon', { stopRootTrac
         }
         if (event.key === 'Tab') {
             this.handleFocusTrap(event);
-            return;
         }
     }
     handleWindowResize() {
@@ -174,8 +173,7 @@ export class DsRibbon extends Mixin(componentFactory('ds-ribbon', { stopRootTrac
             drawer.classList.remove('has-bottom-scrim');
         }
         else {
-            drawer.classList.add('has-top-scrim');
-            drawer.classList.add('has-bottom-scrim');
+            drawer.classList.add('has-top-scrim', 'has-bottom-scrim');
         }
     };
     handleDrawerBackdropClick = (event) => {
@@ -192,26 +190,26 @@ export class DsRibbon extends Mixin(componentFactory('ds-ribbon', { stopRootTrac
             focusableElements.push(closeButton);
         }
         const logoComponent = this.drawerRef.querySelector(this.DsLinkLogo);
-        if (logoComponent && logoComponent.shadowRoot) {
+        if (logoComponent?.shadowRoot) {
             const logoLink = logoComponent.shadowRoot.querySelector('a');
             if (logoLink && this.isFocusableElement(logoLink)) {
                 focusableElements.push(logoLink);
             }
         }
         const navLinkContainers = this.drawerRef.querySelectorAll(`[class*="drawer-link-item"]`);
-        navLinkContainers.forEach(container => {
+        for (const container of navLinkContainers) {
             const dsLinkElement = container.querySelector(this.DsLink);
-            if (dsLinkElement && dsLinkElement.shadowRoot) {
-                const linkElement = dsLinkElement.shadowRoot.querySelector('a');
+            if (dsLinkElement) {
+                const linkElement = dsLinkElement.querySelector('a');
                 if (linkElement && this.isFocusableElement(linkElement)) {
                     focusableElements.push(linkElement);
                 }
             }
-        });
+        }
         return focusableElements;
     }
     isFocusableElement(element) {
-        if (!element || element.offsetParent === null)
+        if (element?.offsetParent === null)
             return false;
         const tagName = element.tagName.toLowerCase();
         return ['a', 'button'].includes(tagName) && element.tabIndex !== -1;
@@ -221,12 +219,12 @@ export class DsRibbon extends Mixin(componentFactory('ds-ribbon', { stopRootTrac
         if (focusableElements.length === 0)
             return;
         let currentElement = document.activeElement;
-        if (currentElement && currentElement.shadowRoot && currentElement.shadowRoot.activeElement) {
+        if (currentElement?.shadowRoot?.activeElement) {
             currentElement = currentElement.shadowRoot.activeElement;
         }
-        if (this.el.shadowRoot && this.el.shadowRoot.activeElement) {
+        if (this.el.shadowRoot?.activeElement) {
             currentElement = this.el.shadowRoot.activeElement;
-            if (currentElement.shadowRoot && currentElement.shadowRoot.activeElement) {
+            if (currentElement.shadowRoot?.activeElement) {
                 currentElement = currentElement.shadowRoot.activeElement;
             }
         }
@@ -272,8 +270,7 @@ export class DsRibbon extends Mixin(componentFactory('ds-ribbon', { stopRootTrac
                 this.drawerRef.classList.remove('has-bottom-scrim');
             }
             else {
-                this.drawerRef.classList.add('has-top-scrim');
-                this.drawerRef.classList.add('has-bottom-scrim');
+                this.drawerRef.classList.add('has-top-scrim', 'has-bottom-scrim');
             }
         }
     }
@@ -355,7 +352,7 @@ export class DsRibbon extends Mixin(componentFactory('ds-ribbon', { stopRootTrac
             [`${baseClass}--drawer-open`]: this.isMobileDrawerOpen,
             [`${baseClass}--drawer-clicked`]: this.isMobileDrawerClicked,
         });
-        return (h("div", { key: '55e49a1a78a5fbbe223918d2df5fc480be41e3c6', class: ribbonClasses }, h("nav", { key: '46205034405d33329d9244965f10ce33fcdf8a5b', "aria-label": this.localizedNavAriaLabel, ...(this.isMobileDrawerOpen ? { inert: true } : {}) }, h("div", { key: 'ecffe3ec736a656cc606de7bab6e7e415f840daa', class: `${baseClass}__container`, ...this.inheritedAttributes }, this.renderBranding(), this.renderDesktopNavigation(), this.renderMobileToggle())), this.renderMobileNavigation()));
+        return (h("div", { key: 'b36a7d61360761e689e67853bb54642547c6b8b6', class: ribbonClasses }, h("nav", { key: 'b25008b643dc45d7a468330d3bc44b5119a8d491', "aria-label": this.localizedNavAriaLabel, ...(this.isMobileDrawerOpen ? { inert: true } : {}) }, h("div", { key: '99cc13e575c50b5be600d403087759019dcdccf2', class: `${baseClass}__container`, ...this.inheritedAttributes }, this.renderBranding(), this.renderDesktopNavigation(), this.renderMobileToggle())), this.renderMobileNavigation()));
     }
     static get is() { return "ds-ribbon"; }
     static get encapsulation() { return "shadow"; }