@nanoporetech-digital/components 8.0.0-alpha.7 → 8.0.0-alpha.9

package/dist/nano-components/nano-components.css

@@ -36,14 +36,15 @@
       transition-duration: 0.01ms !important;
       scroll-behavior: auto !important;
     }
-  }:where(nano-footer, .nano-footer) h1, :where(nano-footer, .nano-footer) h2, :where(nano-footer, .nano-footer) h3, :where(nano-footer, .nano-footer) h4, :where(nano-footer, .nano-footer) h5, :where(nano-footer, .nano-footer) h6 {
-  font-weight: var(--nano-font-weight-normal);
-  font-size: var(--nano-font-size-medium);
-  line-height: var(--nano-line-height-normal);
-  letter-spacing: var(--nano-letter-spacing-normal);
-  margin: var(--header-margin);
+  }@layer components {
+  :where(nano-footer, .nano-footer) h1, :where(nano-footer, .nano-footer) h2, :where(nano-footer, .nano-footer) h3, :where(nano-footer, .nano-footer) h4, :where(nano-footer, .nano-footer) h5, :where(nano-footer, .nano-footer) h6 {
+    font-weight: var(--nano-font-weight-normal);
+    font-size: var(--nano-font-size-medium);
+    line-height: var(--nano-line-height-normal);
+    letter-spacing: var(--nano-letter-spacing-normal);
+    margin: var(--header-margin);
+  }
 }
-
 @layer components {
   .nano-toast-stack {
     position: fixed;
@@ -446,10 +447,10 @@
   nano-card [slot] {
     display: block;
   }
-  nano-card [slot]:not([slot=img], ul) {
+  nano-card [slot]:not([slot=img], [slot=category], ul) {
     margin-inline: var(--content-margin);
   }
-  nano-card [slot]:not([slot=img], ul):last-child {
+  nano-card [slot]:not([slot=img], [slot=category], ul):last-child {
     margin-block-end: var(--content-margin);
   }
   nano-card:not(:has([slot=img])) [slot]:first-child {
@@ -458,6 +459,17 @@
   nano-card [slot=img] {
     order: 1;
   }
+  nano-card div[slot=img] {
+    position: relative;
+    inline-size: fit-content;
+    block-size: fit-content;
+  }
+  nano-card [slot=category] {
+    position: absolute;
+    inset-block-end: 10px;
+    inset-inline-end: 10px;
+    background: var(--nano-color-base-0);
+  }
   nano-card [slot=title] {
     order: 2;
     text-wrap: balance;
@@ -472,31 +484,49 @@
     align-items: center;
     gap: var(--gap);
   }
+  nano-card [slot=footer]:has(nano-tag) {
+    flex-wrap: wrap;
+    gap: var(--nano-spacing-sm);
+  }
   nano-card nano-content-links {
     --color-border: rgb(var(--nano-color-base-rgb-1000) / 7%);
   }
   nano-card address {
     font-style: normal;
   }
-  nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input)) a, nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type, :has(a, nano-icon-button, input, nano-cta[loading])) a {
+  nano-card a {
+    color: var(--color);
+    text-decoration: none;
+  }
+  nano-card a:hover {
+    color: var(--nano-color-primary-1000);
+    text-decoration: underline;
+  }
+  nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input)) a, nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type,
+  :has(a, nano-icon-button, input, nano-cta[loading])) a {
     color: var(--color);
     text-decoration: none;
   }
-  nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input)):hover [slot=title], nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type, :has(a, nano-icon-button, input, nano-cta[loading])):hover [slot=title] {
+  nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input)):hover [slot=title], nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type,
+  :has(a, nano-icon-button, input, nano-cta[loading])):hover [slot=title] {
     color: var(--nano-color-primary-1000);
     text-decoration: underline;
   }
-  nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input)):hover:has([slot=title] > * ~ *) [slot=title], nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type, :has(a, nano-icon-button, input, nano-cta[loading])):hover:has([slot=title] > * ~ *) [slot=title] {
+  nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input)):hover:has([slot=title] > * ~ *) [slot=title], nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type,
+  :has(a, nano-icon-button, input, nano-cta[loading])):hover:has([slot=title] > * ~ *) [slot=title] {
     color: var(--color);
     text-decoration: none;
   }
-  nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input)):hover:has([slot=title] > * ~ *) [slot=title] > :first-child, nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type, :has(a, nano-icon-button, input, nano-cta[loading])):hover:has([slot=title] > * ~ *) [slot=title] > :first-child {
+  nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input)):hover:has([slot=title] > * ~ *) [slot=title] > :first-child, nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type,
+  :has(a, nano-icon-button, input, nano-cta[loading])):hover:has([slot=title] > * ~ *) [slot=title] > :first-child {
     color: var(--nano-color-primary-1000);
     text-decoration: underline;
   }
   nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input)) button::before,
-  nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input)) a::before, nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type, :has(a, nano-icon-button, input, nano-cta[loading])) button::before,
-  nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type, :has(a, nano-icon-button, input, nano-cta[loading])) a::before {
+  nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input)) a::before, nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type,
+  :has(a, nano-icon-button, input, nano-cta[loading])) button::before,
+  nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type,
+  :has(a, nano-icon-button, input, nano-cta[loading])) a::before {
     content: "";
     display: block;
     position: absolute;
@@ -509,14 +539,17 @@
     border-radius: 0;
     z-index: var(--enable-card-click);
   }
-  nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input)) nano-cta > *, nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type, :has(a, nano-icon-button, input, nano-cta[loading])) nano-cta > * {
+  nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input)) nano-cta > *, nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type,
+  :has(a, nano-icon-button, input, nano-cta[loading])) nano-cta > * {
     position: static;
   }
-  nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input))[variant^=promo]:hover, nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type, :has(a, nano-icon-button, input, nano-cta[loading]))[variant^=promo]:hover {
+  nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input))[variant^=promo]:hover, nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type,
+  :has(a, nano-icon-button, input, nano-cta[loading]))[variant^=promo]:hover {
     box-shadow: var(--nano-shadow-l0);
     background-color: var(--bg-hover);
   }
-  nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input)) nano-tooltip > *, nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type, :has(a, nano-icon-button, input, nano-cta[loading])) nano-tooltip > * {
+  nano-card:has(a:only-of-type):not(:has(button, nano-icon-button, input)) nano-tooltip > *, nano-card:not([variant=product]):has(button:only-of-type):not(button[loading]:only-of-type,
+  :has(a, nano-icon-button, input, nano-cta[loading])) nano-tooltip > * {
     position: relative;
     z-index: 2;
   }
@@ -532,6 +565,7 @@
   nano-card[layout=landscape] [slot] {
     grid-column: 2;
   }
+  nano-card[layout=landscape] div:has([slot=img]),
   nano-card[layout=landscape] [slot=img] {
     grid-column: 1;
     grid-row: 1/-1;
@@ -833,6 +867,11 @@
     padding: 0.15em 0.65em !important;
     display: inline-block;
   }
+  nano-badge:empty {
+    padding: 0 !important;
+    height: 0.5em;
+    width: 0.5em;
+  }
   nano-badge a {
     color: inherit;
     border-radius: inherit;
@@ -841,8 +880,8 @@
     content: "";
     position: absolute;
     inset: 0;
-    width: 100%;
-    height: 100%;
+    inline-size: 100%;
+    block-size: 100%;
     border-radius: inherit;
     background-color: transparent;
   }
@@ -960,32 +999,48 @@
   }
 }
 @layer components {
-  .nano-theme-dark :where(nano-global-nav, .nano-global-nav)::part(logo),
-  .nano-theme-dark :where(nano-global-nav, .nano-global-nav) [part~=logo],
-  :where(nano-global-nav, .nano-global-nav).nano-theme-dark::part(logo),
-  :where(nano-global-nav, .nano-global-nav).nano-theme-dark [part~=logo] {
+  .nano-theme-dark nano-global-nav::part(logo),
+  .nano-theme-dark nano-global-nav [part~=logo],
+  nano-global-nav.nano-theme-dark::part(logo),
+  nano-global-nav.nano-theme-dark [part~=logo] {
     filter: invert(100%);
   }
-  :where(nano-global-nav, .nano-global-nav) > a,
-  :where(nano-global-nav, .nano-global-nav) :where(nano-nav-item, .nano-nav-item)::part(label),
-  :where(nano-global-nav, .nano-global-nav) :where(nano-nav-item, .nano-nav-item) [part~=label] {
+  nano-global-nav > a,
+  nano-global-nav > nano-nav-item::part(label),
+  nano-global-nav > nano-nav-item [part~=label] {
     white-space: nowrap;
   }
-  :where(nano-global-nav, .nano-global-nav).bar-menu nano-nav-item, :where(nano-global-nav, .nano-global-nav).bar-menu > a {
+  nano-global-nav > nano-nav-item [slot=icon-start] {
+    position: relative;
+  }
+  nano-global-nav > nano-nav-item [slot=icon-start] nano-badge {
+    position: absolute;
+    top: 0;
+    inset-inline-end: 0;
+    translate: 100% -50%;
+  }
+  nano-global-nav:has(nano-menu-drawer)::part(site-wrapper),
+  nano-global-nav:has(nano-menu-drawer) [part~=site-wrapper] {
+    display: flex;
+  }
+  nano-global-nav.bar-menu > nano-nav-item,
+  nano-global-nav.bar-menu > a {
     color: var(--main-menu-text-color);
   }
-  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item):hover, :where(nano-global-nav, .nano-global-nav).bar-menu > a:hover {
+  nano-global-nav.bar-menu > nano-nav-item:hover,
+  nano-global-nav.bar-menu > a:hover {
     color: var(--main-menu-hover-text-color);
   }
-  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item):active, :where(nano-global-nav, .nano-global-nav).bar-menu > a:active {
+  nano-global-nav.bar-menu > nano-nav-item:active,
+  nano-global-nav.bar-menu > a:active {
     color: var(--main-menu-active-text-color);
   }
-  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item)::part(trigger),
-  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [part~=trigger] {
+  nano-global-nav.bar-menu > nano-nav-item::part(trigger),
+  nano-global-nav.bar-menu > nano-nav-item [part~=trigger] {
     position: relative;
   }
-  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item)::part(trigger)::before,
-  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [part~=trigger]::before {
+  nano-global-nav.bar-menu > nano-nav-item::part(trigger)::before,
+  nano-global-nav.bar-menu > nano-nav-item [part~=trigger]::before {
     content: "";
     position: absolute;
     background-color: var(--main-menu-active-border-color);
@@ -996,18 +1051,18 @@
     transform-origin: 0 center;
     transition: transform var(--nano-transition-x-fast) ease-in-out;
   }
-  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item)[open] {
+  nano-global-nav.bar-menu > nano-nav-item[open] {
     color: var(--main-menu-active-border-color) !important;
   }
-  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item)[open]::part(trigger)::before, :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item)[open] [part~=trigger]::before {
+  nano-global-nav.bar-menu > nano-nav-item[open]::part(trigger)::before, nano-global-nav.bar-menu > nano-nav-item[open] [part~=trigger]::before {
     transform: translateZ(0) scaleX(1);
   }
-  :where(nano-global-nav, .nano-global-nav).bar-menu a.active,
-  :where(nano-global-nav, .nano-global-nav).bar-menu nano-nav-item.active,
-  :where(nano-global-nav, .nano-global-nav).bar-menu nano-nav-item[selected] {
+  nano-global-nav.bar-menu > a.active,
+  nano-global-nav.bar-menu > nano-nav-item.active,
+  nano-global-nav.bar-menu > nano-nav-item[selected] {
     color: var(--main-menu-active-text-color) !important;
   }
-  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item)::part(modal) {
+  nano-global-nav.bar-menu > nano-nav-item::part(modal) {
     inset-block-start: -500%;
     inline-size: 100%;
     position: absolute;
@@ -1015,10 +1070,10 @@
     inset-inline: 0;
     transition: inset-block-start var(--nano-transition-fast) ease-in-out, opacity var(--nano-transition-x-fast) ease;
   }
-  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item)::part(modal modal--open) {
+  nano-global-nav.bar-menu > nano-nav-item::part(modal modal--open) {
     inset-block-start: 100%;
   }
-  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item)::part(modal-content) {
+  nano-global-nav.bar-menu > nano-nav-item::part(modal-content) {
     background: var(--nano-color-base-0);
     color: var(--nano-color-base-1000);
     padding: var(--nano-spacing-xl);
@@ -1027,59 +1082,59 @@
     margin: auto;
     box-shadow: var(--nano-shadow-l2);
   }
-  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item)::part(modal-mask),
-  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [part~=modal-mask] {
+  nano-global-nav.bar-menu > nano-nav-item::part(modal-mask),
+  nano-global-nav.bar-menu > nano-nav-item [part~=modal-mask] {
     background: var(--nano-overlay-background-color);
     position: fixed;
     inset: 0;
     min-block-size: 100%;
     z-index: -1;
   }
-  :where(nano-global-nav, .nano-global-nav).bar-menu [slot=close-button] {
+  nano-global-nav.bar-menu > nano-nav-item [slot=close-button] {
     display: none;
   }
-  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] {
+  nano-global-nav.bar-menu > nano-nav-item [slot=secondary] {
     display: grid;
     gap: var(--nano-spacing-xl);
     grid-template: auto/repeat(auto-fit, minmax(200px, 1fr));
   }
-  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary]:has(.gn__focus-area) {
+  nano-global-nav.bar-menu > nano-nav-item [slot=secondary]:has(.gn__focus-area) {
     grid-template: auto/1fr 1fr 26rem;
   }
   @media (width < 1200px) {
-    :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary]:has(.gn__focus-area) {
+    nano-global-nav.bar-menu > nano-nav-item [slot=secondary]:has(.gn__focus-area) {
       grid-template-columns: 1fr 26rem;
     }
   }
   @media (width < 830px) {
-    :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary]:has(.gn__focus-area) {
+    nano-global-nav.bar-menu > nano-nav-item [slot=secondary]:has(.gn__focus-area) {
       grid-template-columns: 1fr;
     }
   }
-  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] h1, :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] h2, :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] h3, :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] h4, :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] .gn__title {
+  nano-global-nav.bar-menu > nano-nav-item [slot=secondary] h1, nano-global-nav.bar-menu > nano-nav-item [slot=secondary] h2, nano-global-nav.bar-menu > nano-nav-item [slot=secondary] h3, nano-global-nav.bar-menu > nano-nav-item [slot=secondary] h4, nano-global-nav.bar-menu > nano-nav-item [slot=secondary] .gn__title {
     font-weight: var(--nano-font-weight-normal);
     font-size: var(--nano-font-size-medium);
     line-height: var(--nano-line-height-dense);
     padding-block-end: 1rem;
     border-block-end: 1px solid var(--nano-color-neutral-100);
   }
-  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] a {
+  nano-global-nav.bar-menu > nano-nav-item [slot=secondary] a {
     text-decoration: none;
   }
-  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] a:hover {
+  nano-global-nav.bar-menu > nano-nav-item [slot=secondary] a:hover {
     text-decoration: underline;
   }
-  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] ul {
+  nano-global-nav.bar-menu > nano-nav-item [slot=secondary] ul {
     margin: 0;
     padding: 0;
   }
-  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] ul li {
+  nano-global-nav.bar-menu > nano-nav-item [slot=secondary] ul li {
     margin-inline: 0;
     list-style: none;
     margin-block-end: var(--nano-spacing-sm);
     line-height: var(--nano-line-height-dense);
   }
-  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] .gn__focus-area {
+  nano-global-nav.bar-menu > nano-nav-item [slot=secondary] .gn__focus-area {
     padding: var(--nano-spacing-xl) var(--nano-spacing-l);
     display: flex;
     flex-direction: column;
@@ -1088,87 +1143,89 @@
     color: var(--nano-color-base-1000);
   }
   @media (width < 1200px) and (width > 830px) {
-    :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] .gn__focus-area {
+    nano-global-nav.bar-menu > nano-nav-item [slot=secondary] .gn__focus-area {
       grid-column: 2;
       grid-row: 1/3;
     }
   }
-  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] .gn__focus-area h1, :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] .gn__focus-area h2, :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] .gn__focus-area h3, :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] .gn__focus-area h4, :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] .gn__focus-area h5, :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] .gn__focus-area p {
+  nano-global-nav.bar-menu > nano-nav-item [slot=secondary] .gn__focus-area h1, nano-global-nav.bar-menu > nano-nav-item [slot=secondary] .gn__focus-area h2, nano-global-nav.bar-menu > nano-nav-item [slot=secondary] .gn__focus-area h3, nano-global-nav.bar-menu > nano-nav-item [slot=secondary] .gn__focus-area h4, nano-global-nav.bar-menu > nano-nav-item [slot=secondary] .gn__focus-area h5, nano-global-nav.bar-menu > nano-nav-item [slot=secondary] .gn__focus-area p {
     margin: 0;
     border: none;
   }
-  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] .gn__focus-area nano-content-links {
+  nano-global-nav.bar-menu > nano-nav-item [slot=secondary] .gn__focus-area nano-content-links {
     display: block;
   }
-  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] .gn__link-columns {
+  nano-global-nav.bar-menu > nano-nav-item [slot=secondary] .gn__link-columns {
     gap: var(--nano-spacing-xl);
   }
-  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] .gn__link-columns:has(> :nth-child(6)) {
+  nano-global-nav.bar-menu > nano-nav-item [slot=secondary] .gn__link-columns:has(> :nth-child(6)) {
     columns: 2;
   }
-  :where(nano-global-nav, .nano-global-nav).bar-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] .gn__link-columns > * {
+  nano-global-nav.bar-menu > nano-nav-item [slot=secondary] .gn__link-columns > * {
     display: block;
     margin-block-end: var(--nano-spacing-sm);
   }
-  :where(nano-global-nav, .nano-global-nav).overflow-menu :where(nano-nav-item, .nano-nav-item), :where(nano-global-nav, .nano-global-nav).overflow-menu > a {
+  nano-global-nav.overflow-menu nano-nav-item, nano-global-nav.overflow-menu > a {
     color: var(--overflow-text-color);
   }
-  :where(nano-global-nav, .nano-global-nav).overflow-menu :where(nano-nav-item, .nano-nav-item):hover, :where(nano-global-nav, .nano-global-nav).overflow-menu > a:hover {
+  nano-global-nav.overflow-menu nano-nav-item:hover, nano-global-nav.overflow-menu > a:hover {
     color: var(--overflowhover-text-color);
   }
-  :where(nano-global-nav, .nano-global-nav).overflow-menu :where(nano-nav-item, .nano-nav-item):active, :where(nano-global-nav, .nano-global-nav).overflow-menu > a:active {
+  nano-global-nav.overflow-menu nano-nav-item:active, nano-global-nav.overflow-menu > a:active {
     color: var(--overflow-active-text-color);
   }
-  :where(nano-global-nav, .nano-global-nav).overflow-menu a.active,
-  :where(nano-global-nav, .nano-global-nav).overflow-menu :where(nano-nav-item, .nano-nav-item).active,
-  :where(nano-global-nav, .nano-global-nav).overflow-menu :where(nano-nav-item, .nano-nav-item)[selected] {
+  nano-global-nav.overflow-menu a.active,
+  nano-global-nav.overflow-menu nano-nav-item.active,
+  nano-global-nav.overflow-menu nano-nav-item[selected] {
     color: var(--overflow-active-text-color) !important;
   }
-  :where(nano-global-nav, .nano-global-nav).overflow-menu :where(nano-nav-item, .nano-nav-item)::part(modal) {
+  nano-global-nav.overflow-menu nano-nav-item::part(modal) {
     background-color: var(--overflow-bg-color);
     inline-size: 100%;
     block-size: 100%;
     position: absolute;
     inset: 0;
+    z-index: 1;
   }
-  :where(nano-global-nav, .nano-global-nav).overflow-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] {
+  nano-global-nav.overflow-menu nano-nav-item [slot=secondary] {
     display: flex;
     flex-direction: column;
     gap: var(--nano-spacing-md);
     padding-block-end: var(--nano-spacing-md);
+    color: var(--overflow-text-color);
   }
-  :where(nano-global-nav, .nano-global-nav).overflow-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] a {
+  nano-global-nav.overflow-menu nano-nav-item [slot=secondary] a {
     text-decoration: none;
     color: var(--nano-color-blue-cerulean-700);
   }
-  :where(nano-global-nav, .nano-global-nav).overflow-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] a:hover {
+  nano-global-nav.overflow-menu nano-nav-item [slot=secondary] a:hover {
     text-decoration: underline;
   }
-  :where(nano-global-nav, .nano-global-nav).overflow-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] h1, :where(nano-global-nav, .nano-global-nav).overflow-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] h2, :where(nano-global-nav, .nano-global-nav).overflow-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] h3, :where(nano-global-nav, .nano-global-nav).overflow-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] h4, :where(nano-global-nav, .nano-global-nav).overflow-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] .gn__title {
+  nano-global-nav.overflow-menu nano-nav-item [slot=secondary] h1, nano-global-nav.overflow-menu nano-nav-item [slot=secondary] h2, nano-global-nav.overflow-menu nano-nav-item [slot=secondary] h3, nano-global-nav.overflow-menu nano-nav-item [slot=secondary] h4, nano-global-nav.overflow-menu nano-nav-item [slot=secondary] .gn__title {
     font-size: var(--nano-font-size-small);
     line-height: var(--nano-line-height-normal);
     letter-spacing: var(--nano-letter-spacing-loose);
     margin-block-end: var(--nano-spacing-sm);
   }
-  :where(nano-global-nav, .nano-global-nav).overflow-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] ul {
+  nano-global-nav.overflow-menu nano-nav-item [slot=secondary] ul {
     margin: 0;
     padding: 0;
   }
-  :where(nano-global-nav, .nano-global-nav).overflow-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] ul li {
+  nano-global-nav.overflow-menu nano-nav-item [slot=secondary] ul li {
     margin-inline: 0;
     list-style: none;
     margin-block-end: var(--nano-spacing-sm);
     line-height: var(--nano-line-height-dense);
   }
-  :where(nano-global-nav, .nano-global-nav).overflow-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] .gn__link-columns {
+  nano-global-nav.overflow-menu nano-nav-item [slot=secondary] .gn__link-columns {
     padding-inline-start: var(--nano-spacing-md);
   }
-  :where(nano-global-nav, .nano-global-nav).overflow-menu :where(nano-nav-item, .nano-nav-item) [slot=secondary] .gn__focus-area {
+  nano-global-nav.overflow-menu nano-nav-item [slot=secondary] .gn__focus-area {
     border-block-start: 1px solid rgb(var(--nano-color-base-rgb-1000)/10%);
     padding-block-start: var(--nano-spacing-md);
   }
-  :where(nano-global-nav, .nano-global-nav).overflow-menu [slot=close-button] {
-    color: inherit;
+  nano-global-nav.overflow-menu [slot=close-button] {
+    color: var(--overflow-text-color);
     padding-block: var(--nano-spacing-md);
     display: flex;
     gap: var(--nano-spacing-sm);
@@ -1176,10 +1233,10 @@
     cursor: pointer;
     inline-size: 100%;
   }
-  :where(nano-global-nav, .nano-global-nav).overflow-menu [slot=close-button]:hover {
+  nano-global-nav.overflow-menu [slot=close-button]:hover {
     color: var(--nano-color-blue-cerulean-700);
   }
-  :where(nano-global-nav, .nano-global-nav).overflow-menu [slot=close-button]::before {
+  nano-global-nav.overflow-menu [slot=close-button]::before {
     content: "";
     margin-inline-start: 0;
     background-size: cover;
@@ -1676,43 +1733,44 @@
     color: var(--nano-color-primary-1200);
   }
 }
-:where(nano-tab-group, .nano-tab-group)[equal-tab-size] .nano-tab {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex: 1;
-}
-:where(nano-tab-group, .nano-tab-group)[placement=start][equal-tab-size] .nano-tab {
-  justify-content: flex-end;
-}
-:where(nano-tab-group, .nano-tab-group)[placement=start] .nano-tab {
-  border-block-end: none;
-  border-inline-end: var(--border);
-}
-:where(nano-tab-group, .nano-tab-group)[placement=start] .nano-tab::part(base),
-:where(nano-tab-group, .nano-tab-group)[placement=start] .nano-tab [part~=base] {
-  justify-content: end;
-}
-:where(nano-tab-group, .nano-tab-group)[placement=start] .nano-tab::part(label),
-:where(nano-tab-group, .nano-tab-group)[placement=start] .nano-tab [part~=label] {
-  align-items: flex-end;
-}
-:where(nano-tab-group, .nano-tab-group)[placement=start] .nano-tab:not([disabled]):hover {
-  border-color: inherit;
-}
-:where(nano-tab-group, .nano-tab-group)[placement=start] .nano-tab:not([disabled])[active] {
-  border-color: inherit;
-}
-:where(nano-tab-group, .nano-tab-group)[placement=top][size=large]::part(tabs__wrapper), :where(nano-tab-group, .nano-tab-group)[placement=top][size=large] [part~=tabs__wrapper] {
-  --scroll-btn-size: 2rem;
-}
-:where(nano-tab-group, .nano-tab-group)[placement=top][size=large] .nano-tab {
-  font-weight: var(--nano-font-weight-normal);
-  font-size: var(--nano-font-size-l);
-  line-height: var(--nano-line-height-dense);
-  --padding: 1.5625rem;
+@layer components {
+  :where(nano-tab-group, .nano-tab-group)[equal-tab-size] .nano-tab {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex: 1;
+  }
+  :where(nano-tab-group, .nano-tab-group)[placement=start][equal-tab-size] .nano-tab {
+    justify-content: flex-end;
+  }
+  :where(nano-tab-group, .nano-tab-group)[placement=start] .nano-tab {
+    border-block-end: none;
+    border-inline-end: var(--border);
+  }
+  :where(nano-tab-group, .nano-tab-group)[placement=start] .nano-tab::part(base),
+  :where(nano-tab-group, .nano-tab-group)[placement=start] .nano-tab [part~=base] {
+    justify-content: end;
+  }
+  :where(nano-tab-group, .nano-tab-group)[placement=start] .nano-tab::part(label),
+  :where(nano-tab-group, .nano-tab-group)[placement=start] .nano-tab [part~=label] {
+    align-items: flex-end;
+  }
+  :where(nano-tab-group, .nano-tab-group)[placement=start] .nano-tab:not([disabled]):hover {
+    border-color: inherit;
+  }
+  :where(nano-tab-group, .nano-tab-group)[placement=start] .nano-tab:not([disabled])[active] {
+    border-color: inherit;
+  }
+  :where(nano-tab-group, .nano-tab-group)[placement=top][size=large]::part(tabs__wrapper), :where(nano-tab-group, .nano-tab-group)[placement=top][size=large] [part~=tabs__wrapper] {
+    --scroll-btn-size: 2rem;
+  }
+  :where(nano-tab-group, .nano-tab-group)[placement=top][size=large] .nano-tab {
+    font-weight: var(--nano-font-weight-normal);
+    font-size: var(--nano-font-size-l);
+    line-height: var(--nano-line-height-dense);
+    --padding: 1.5625rem;
+  }
 }
-
 @layer components {
   :where(nano-tooltip, .nano-tooltip) [slot=content], :where(nano-tooltip, .nano-tooltip) [slot=content] * {
     font-size: var(--nano-font-size-2xs);
@@ -1931,6 +1989,192 @@
     }
   }
 }
+@layer components {
+  nano-feature-box {
+    --color: var(--nano-color-basic-white);
+    --bg: var(--nano-color-basic-black);
+    container-type: inline-size;
+    display: grid;
+    grid-template-columns: calc(50% - var(--nano-spacing-l1-default)) 1fr;
+    gap: 0;
+    background-color: var(--bg);
+    color: var(--color);
+    overflow: clip;
+    position: relative;
+    min-block-size: 270px;
+  }
+  nano-feature-box[img-position=end] {
+    grid-template-columns: 1fr calc(50% - var(--nano-spacing-l1-default));
+  }
+  nano-feature-box [slot] {
+    grid-column: 2;
+    grid-row: 1/-1;
+  }
+  nano-feature-box::before {
+    content: "";
+    display: block;
+    grid-column: 1;
+  }
+  nano-feature-box [slot=img] {
+    grid-column: 1;
+    object-fit: cover;
+    position: absolute;
+    inline-size: calc(50% - var(--nano-spacing-l1-default));
+    block-size: 101%;
+    inset-block-start: 50%;
+    transform: translateY(-50%);
+  }
+  nano-feature-box[img-position=end] [slot] {
+    grid-column: 1;
+  }
+  nano-feature-box[img-position=end] [slot=img] {
+    grid-column: 2;
+    min-inline-size: -webkit-fill-available;
+    min-inline-size: -moz-available;
+    min-inline-size: stretch;
+  }
+  nano-feature-box[img-position=end]::before {
+    grid-column: 2;
+  }
+  @container (width < 650px) {
+    nano-feature-box::before {
+      display: none;
+    }
+    nano-feature-box [slot] {
+      grid-column: 1/-1 !important;
+      grid-row: 2;
+    }
+    nano-feature-box [slot=img] {
+      grid-row: 1;
+      grid-column: 1/-1 !important;
+      position: static;
+      transform: none;
+      inset-block-start: 0;
+      inline-size: 100%;
+      block-size: auto;
+      min-block-size: 0;
+    }
+  }
+  nano-feature-box [slot=content] {
+    padding: var(--nano-spacing-l1-default);
+    display: flex;
+    flex-direction: column;
+    gap: var(--nano-spacing-sm);
+  }
+  nano-feature-box [slot=content] h1, nano-feature-box [slot=content] h2, nano-feature-box [slot=content] h3, nano-feature-box [slot=content] h4, nano-feature-box [slot=content] h5, nano-feature-box [slot=content] h6 {
+    text-wrap: balance;
+  }
+  nano-feature-box [slot=content] > * {
+    margin-block: unset;
+    margin-block-start: unset;
+    margin-block-end: unset;
+  }
+}
+@layer components {
+  nano-menu-drawer > nano-nav-item {
+    --padding: var(--padding-top) var(--nano-spacing-md) var(--padding-bottom) var(--padding-start);
+    color-scheme: dark;
+  }
+  nano-menu-drawer > nano-nav-item:hover {
+    background-color: var(--bg-color-hover);
+  }
+  nano-menu-drawer > nano-nav-item:active, nano-menu-drawer > nano-nav-item[selected] {
+    background-color: var(--bg-color-selected);
+  }
+  nano-menu-drawer > nano-nav-item[open] {
+    background-color: var(--bg-color-open);
+  }
+  nano-menu-drawer > nano-nav-item::part(trigger), nano-menu-drawer > nano-nav-item [part~=trigger] {
+    gap: 1rem;
+    border-bottom: var(--nano-color-grey-mono-1400) 1px solid;
+    white-space: nowrap;
+    min-width: fit-content;
+  }
+  nano-menu-drawer > nano-nav-item::part(modal) {
+    position: absolute;
+    inset: calc(var(--global-nav-height) * -1) 0 0 100%;
+    z-index: -1;
+    height: 100vh;
+    width: calc(100vw - (var(--menu-width) + var(--scrollbar-width, 0px)));
+  }
+  nano-menu-drawer > nano-nav-item::part(modal-content) {
+    width: 400px;
+    background: var(--bg-color-open);
+    height: 100vh;
+    overflow: auto;
+    scrollbar-width: thin;
+    inset-inline-start: -400px;
+    position: absolute;
+    box-shadow: var(--nano-shadow-l2);
+    transition: inset-inline-start var(--nano-transition-fast) ease;
+    padding: calc(var(--global-nav-height) + var(--nano-spacing-md)) var(--nano-spacing-md) var(--nano-spacing-md);
+  }
+  nano-menu-drawer > nano-nav-item::part(modal-content modal-content--open) {
+    inset-inline-start: 0;
+  }
+  nano-menu-drawer > nano-nav-item::part(modal-mask) {
+    background: var(--nano-overlay-background-color);
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+  }
+  nano-menu-drawer > nano-nav-item::part(close-button) {
+    display: flex;
+    justify-content: flex-end;
+    border-bottom: var(--nano-color-grey-mono-1400) 1px solid;
+    padding-bottom: var(--nano-spacing-sm);
+    color: var(--nano-color-blue-cerulean-700);
+    text-decoration: underline;
+  }
+  nano-menu-drawer > nano-nav-item::part(close-button):hover {
+    color: var(--nano-color-basic-white);
+  }
+  nano-menu-drawer > nano-nav-item [slot=close-button] {
+    cursor: pointer;
+  }
+  nano-menu-drawer > nano-nav-item [slot=secondary] {
+    font-size: var(--nano-font-size-xs);
+    color: var(--content-color);
+  }
+  nano-menu-drawer > nano-nav-item nano-icon {
+    --icon-size: inherit;
+  }
+  nano-menu-drawer > nano-nav-item nano-icon[slot=icon-end] {
+    margin-inline-end: calc((var(--nano-spacing-md)) / 2 * -1);
+    color: var(--nano-color-blue-cerulean-700);
+    position: relative;
+  }
+  nano-menu-drawer > nano-nav-item [slot=icon-start] {
+    position: relative;
+  }
+  nano-menu-drawer > nano-nav-item [slot=icon-start] nano-badge {
+    position: absolute;
+    top: 0;
+    inset-inline-end: 0;
+    translate: 100% -50%;
+  }
+  [slot=secondary] .md__list {
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 0;
+  }
+  [slot=secondary] .md__list > * {
+    border-bottom: var(--nano-color-grey-mono-1400) 1px solid;
+    list-style: none;
+    margin: 0 !important;
+    padding: var(--nano-spacing-sm) 0;
+    font-size: var(--nano-font-size-xs);
+    display: flex;
+    flex-direction: column;
+    gap: var(--nano-spacing-sm);
+  }
+  [slot=secondary] .md__list .md__list-head {
+    display: flex;
+    justify-content: space-between;
+    gap: inherit;
+  }
+}
 @layer components {
   :root {
     --nano-component-icon-chevron: url("data:image/svg+xml;charset=utf-8,<svg%20viewBox='0%200%2016%2016'%20xmlns='http://www.w3.org/2000/svg'><g><path%20fill='white'%20d='M4.18457%2015.8496C4.06179%2015.7374%204.00044%2015.584%204.00044%2015.43C4.00044%2015.291%204.05065%2015.1521%204.15221%2015.0421L10.6195%208.00301L4.15207%200.959231C3.9378%200.727093%203.9512%200.364958%204.18443%200.151748C4.41655%20-0.0625328%204.77688%20-0.0480332%204.99114%200.183555L11.8477%207.61197C12.0508%207.83182%2012.0508%208.16767%2011.8477%208.38766L4.99114%2015.8161C4.77594%2016.046%204.41669%2016.0639%204.18457%2015.8496Z'/></g></svg>");
@@ -1949,7 +2193,8 @@
   nano-badge,
   nano-avatar,
   nano-icon-item,
-  nano-table {
+  nano-table,
+  nano-feature-box {
     visibility: visible !important;
   }
   body:not(.nano-eager) nano-algolia-filter,
@@ -1999,14 +2244,14 @@
   body:not(.nano-eager) .hydrated {
     visibility: inherit;
   }
-  nano-alert:not(.hydrated):not([open]),
+  nano-alert:not(.hydrated, [open]),
   nano-dialog:not(.hydrated),
   nano-drawer:not(.hydrated) {
     display: none;
   }
   nano-alert[open]:not(.hydrated) {
     display: block;
-    min-height: calc(var(--nano-pictogram-size-large) + var(--nano-spacing-md) * 2);
+    min-block-size: calc(var(--nano-pictogram-size-large) + var(--nano-spacing-md) * 2);
   }
   nano-tooltip:not(.hydrated) [slot=content] {
     display: none;
@@ -2038,7 +2283,7 @@
     --height: 0.9375rem;
   }
   nano-progress-bar progress {
-    height: var(--height);
+    block-size: var(--height);
   }
   @supports (scrollbar-gutter: stable) {
     .nano-scroll-lock {