@dnanpm/ui-components 0.7.0 → 0.8.0

package/dist/components/Footer/Footer.css

@@ -5,7 +5,7 @@
  * so focus-soft sits outside at 10.49:1.
  */
 
-._footer_1kfrt_8 {
+._footer_1lum3_8 {
     container-name: footer;
     container-type: inline-size;
     color: var(--color-semantic-foreground-inverse);
@@ -13,59 +13,59 @@
 }
 
 /* Zero specificity so modifier classes can still set their own colour. */
-:where(._footer_1kfrt_8 a) {
+:where(._footer_1lum3_8 a) {
     color: inherit;
 }
 
 /* Resets the base list styles from styles/typography.css (li carries margin). */
-._footer_1kfrt_8 ul {
+._footer_1lum3_8 ul {
     margin: 0;
     padding: 0;
     list-style: none;
 }
 
-._footer_1kfrt_8 li {
+._footer_1lum3_8 li {
     margin: 0;
 }
 
-._footer__inner_1kfrt_31 {
+._footer__inner_1lum3_31 {
     max-width: 1280px;
     margin-inline: auto;
 }
 
-._footer__top_1kfrt_36,
-._footer__bottom_1kfrt_37 {
+._footer__top_1lum3_36,
+._footer__bottom_1lum3_37 {
     padding: var(--spacing-space-32) var(--spacing-space-16);
 }
 
 @container footer (min-width: 768px) {
-    ._footer__top_1kfrt_36,
-    ._footer__bottom_1kfrt_37 {
+    ._footer__top_1lum3_36,
+    ._footer__bottom_1lum3_37 {
         padding: var(--spacing-space-40) var(--spacing-space-32);
     }
 }
 
 @container footer (min-width: 1024px) {
-    ._footer__top_1kfrt_36,
-    ._footer__bottom_1kfrt_37 {
+    ._footer__top_1lum3_36,
+    ._footer__bottom_1lum3_37 {
         padding: var(--spacing-space-40) var(--spacing-space-40);
     }
 }
 
 /* === Top section === */
 
-._footer__top_1kfrt_36 {
+._footer__top_1lum3_36 {
     background: var(--color-semantic-surface-secondary-mid);
 }
 
-._footer__top-row_1kfrt_61 {
+._footer__top-row_1lum3_61 {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-space-32);
 }
 
 @container footer (min-width: 768px) {
-    ._footer__top-row_1kfrt_61 {
+    ._footer__top-row_1lum3_61 {
         flex-direction: row;
         align-items: flex-start;
         justify-content: space-between;
@@ -73,7 +73,7 @@
     }
 }
 
-._footer__top-column_1kfrt_76 {
+._footer__top-column_1lum3_76 {
     display: flex;
     flex: 1 0 0;
     flex-direction: column;
@@ -81,25 +81,25 @@
     min-width: 0;
 }
 
-._footer__top-heading_1kfrt_84 {
+._footer__top-heading_1lum3_84 {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-space-20);
     align-items: flex-start;
 }
 
-._footer__top-icon_1kfrt_91 {
+._footer__top-icon_1lum3_91 {
     width: 48px;
     height: 48px;
     fill: currentColor;
 }
 
-._footer__top-title_1kfrt_97 {
+._footer__top-title_1lum3_97 {
     margin: 0;
     font: var(--typography-heading-xs);
 }
 
-._footer__top-links_1kfrt_102 {
+._footer__top-links_1lum3_102 {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-space-8);
@@ -107,19 +107,19 @@
 }
 
 /* Removes the line box around the inline-flex child so the gap is exactly space/8. */
-._footer__top-links_1kfrt_102 li,
-._footer__link-list_1kfrt_111 li {
+._footer__top-links_1lum3_102 li,
+._footer__link-list_1lum3_111 li {
     display: flex;
 }
 
 /* IconButton owns its own label typography and underline behaviour. */
-._footer__top-link_1kfrt_102 {
+._footer__top-link_1lum3_102 {
     max-width: 100%;
 }
 
 /* === Bottom section === */
 
-._footer__container_1kfrt_122 {
+._footer__container_1lum3_122 {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-space-40);
@@ -132,20 +132,20 @@
  * button, which is wrong when the content is permanently visible. display:none
  * removes the inactive branch from both the tab order and the a11y tree.
  */
-._footer__nav-accordions_1kfrt_135 {
+._footer__nav-accordions_1lum3_135 {
     display: block;
 }
 
-._footer__nav-columns_1kfrt_139 {
+._footer__nav-columns_1lum3_139 {
     display: none;
 }
 
 @container footer (min-width: 768px) {
-    ._footer__nav-accordions_1kfrt_135 {
+    ._footer__nav-accordions_1lum3_135 {
         display: none;
     }
 
-    ._footer__nav-columns_1kfrt_139 {
+    ._footer__nav-columns_1lum3_139 {
         display: flex;
         align-items: flex-start;
         justify-content: space-between;
@@ -153,7 +153,7 @@
     }
 }
 
-._footer__column_1kfrt_156 {
+._footer__column_1lum3_156 {
     display: flex;
     flex: 1 0 0;
     flex-direction: column;
@@ -161,12 +161,12 @@
     min-width: 0;
 }
 
-._footer__column-heading_1kfrt_164 {
+._footer__column-heading_1lum3_164 {
     margin: 0;
     font: var(--typography-heading-xs);
 }
 
-._footer__link-list_1kfrt_111 {
+._footer__link-list_1lum3_111 {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-space-8);
@@ -178,8 +178,8 @@
  * left-aligned) but it stops narrow labels sitting between wider neighbours,
  * which leaves overlapping target regions under SC 2.5.8.
  */
-._footer__link-list_1kfrt_111 a,
-._footer__link-list_1kfrt_111 button {
+._footer__link-list_1lum3_111 a,
+._footer__link-list_1lum3_111 button {
     flex: 1 1 auto;
 }
 
@@ -187,8 +187,8 @@
  * Underline styling comes from the shared text-decoration utility; only its
  * visibility is toggled here, matching how IconButton handles the same case.
  */
-._footer__link_1kfrt_111,
-._footer__action_1kfrt_191 {
+._footer__link_1lum3_111,
+._footer__action_1lum3_191 {
     display: inline-block;
     max-width: 100%;
     /* Keeps short labels such as "5G" at the 24px minimum target size (SC 2.5.8). */
@@ -198,13 +198,15 @@
     text-decoration-color: transparent;
 }
 
-._footer__link_1kfrt_111:hover,
-._footer__action_1kfrt_191:hover {
+._footer__link_1lum3_111:hover,
+._footer__link_1lum3_111:focus-visible,
+._footer__action_1lum3_191:hover,
+._footer__action_1lum3_191:focus-visible {
     color: var(--color-semantic-foreground-link-inverse-hover);
     text-decoration-color: currentColor;
 }
 
-._footer__action_1kfrt_191 {
+._footer__action_1lum3_191 {
     padding: 0;
     color: inherit;
     background: none;
@@ -219,32 +221,32 @@
  * is adjusted so link text aligns with the footer gutter. The block-start
  * padding also keeps the first link off the ::details-content clip edge.
  */
-._footer__accordion_1kfrt_222 > summary {
+._footer__accordion_1lum3_224 > summary {
     padding-inline: 0;
 }
 
-._footer__accordion_1kfrt_222 > summary + div {
+._footer__accordion_1lum3_224 > summary + div {
     padding-block: var(--spacing-space-8) var(--spacing-space-16);
     padding-inline: 0;
 }
 
 /* === Divider === */
 
-._footer__divider_1kfrt_233 {
+._footer__divider_1lum3_235 {
     height: 1px;
     background: var(--color-semantic-border-neutral-mid);
 }
 
 /* The accordion branch already ends with a rule, so avoid doubling it. */
 @container footer (max-width: 767px) {
-    ._footer__divider--after-nav_1kfrt_240 {
+    ._footer__divider--after-nav_1lum3_242 {
         display: none;
     }
 }
 
 /* === Meta row === */
 
-._footer__meta_1kfrt_247 {
+._footer__meta_1lum3_249 {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-space-32);
@@ -252,7 +254,7 @@
 }
 
 @container footer (min-width: 768px) {
-    ._footer__meta_1kfrt_247 {
+    ._footer__meta_1lum3_249 {
         flex-direction: row;
         align-items: flex-start;
         justify-content: center;
@@ -260,7 +262,7 @@
     }
 }
 
-._footer__meta-center_1kfrt_263 {
+._footer__meta-center_1lum3_265 {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-space-32);
@@ -271,14 +273,14 @@
 
 /* === Language selector === */
 
-._footer__language-list_1kfrt_274 {
+._footer__language-list_1lum3_276 {
     display: flex;
     gap: var(--spacing-space-4);
     align-items: center;
     flex: 0 0 auto;
 }
 
-._footer__language_1kfrt_274 {
+._footer__language_1lum3_276 {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -289,7 +291,8 @@
     border-radius: var(--radius-semantic-full);
 }
 
-._footer__language_1kfrt_274:hover {
+._footer__language_1lum3_276:hover,
+._footer__language_1lum3_276:focus-visible {
     background: var(--color-semantic-surface-secondary-soft);
 }
 
@@ -297,18 +300,19 @@
  * The active entry is marked with aria-current plus a filled pill, so selection
  * is never conveyed by colour alone.
  */
-._footer__language--current_1kfrt_300 {
+._footer__language--current_1lum3_303 {
     color: var(--color-semantic-foreground-default);
     background: var(--color-semantic-surface-base);
 }
 
-._footer__language--current_1kfrt_300:hover {
+._footer__language--current_1lum3_303:hover,
+._footer__language--current_1lum3_303:focus-visible {
     background: var(--color-semantic-surface-base);
 }
 
 /* === Social media === */
 
-._footer__social-list_1kfrt_311 {
+._footer__social-list_1lum3_315 {
     display: flex;
     flex-wrap: wrap;
     gap: var(--spacing-space-16);
@@ -316,7 +320,7 @@
     justify-content: center;
 }
 
-._footer__social-link_1kfrt_319 {
+._footer__social-link_1lum3_323 {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -326,11 +330,12 @@
     border-radius: var(--radius-semantic-full);
 }
 
-._footer__social-link_1kfrt_319:hover {
+._footer__social-link_1lum3_323:hover,
+._footer__social-link_1lum3_323:focus-visible {
     background: var(--color-semantic-surface-secondary-soft);
 }
 
-._footer__social-icon_1kfrt_333 {
+._footer__social-icon_1lum3_338 {
     width: 24px;
     height: 24px;
     fill: currentColor;
@@ -338,7 +343,7 @@
 
 /* === Organization selector === */
 
-._footer__organization-list_1kfrt_341 {
+._footer__organization-list_1lum3_346 {
     display: flex;
     flex-wrap: wrap;
     gap: var(--spacing-space-8);
@@ -346,7 +351,7 @@
     justify-content: center;
 }
 
-._footer__organization_1kfrt_341 {
+._footer__organization_1lum3_346 {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -357,23 +362,25 @@
     border-radius: var(--radius-semantic-full);
 }
 
-._footer__organization_1kfrt_341:hover {
+._footer__organization_1lum3_346:hover,
+._footer__organization_1lum3_346:focus-visible {
     background: var(--color-semantic-surface-secondary-soft);
 }
 
-._footer__organization--current_1kfrt_364 {
+._footer__organization--current_1lum3_370 {
     font: var(--typography-body-sm-medium);
     color: var(--color-semantic-foreground-default);
     background: var(--color-semantic-surface-base);
 }
 
-._footer__organization--current_1kfrt_364:hover {
+._footer__organization--current_1lum3_370:hover,
+._footer__organization--current_1lum3_370:focus-visible {
     background: var(--color-semantic-surface-base);
 }
 
 /* === Legal links === */
 
-._footer__legal-list_1kfrt_376 {
+._footer__legal-list_1lum3_383 {
     display: flex;
     flex-wrap: wrap;
     gap: var(--spacing-space-8) var(--spacing-space-16);
@@ -381,29 +388,29 @@
     justify-content: center;
 }
 
-._footer__legal-list_1kfrt_376 li {
+._footer__legal-list_1lum3_383 li {
     display: flex;
     gap: var(--spacing-space-16);
     align-items: center;
 }
 
 /* Decorative; kept out of the accessibility tree by using ::before rather than a real element. */
-._footer__legal-list_1kfrt_376 li + li::before {
+._footer__legal-list_1lum3_383 li + li::before {
     content: '';
     width: 1px;
     height: 12px;
     background: var(--color-semantic-foreground-inverse);
 }
 
-._footer__legal-list_1kfrt_376 ._footer__link_1kfrt_111,
-._footer__legal-list_1kfrt_376 ._footer__action_1kfrt_191,
-._footer__copyright_1kfrt_400 {
+._footer__legal-list_1lum3_383 ._footer__link_1lum3_111,
+._footer__legal-list_1lum3_383 ._footer__action_1lum3_191,
+._footer__copyright_1lum3_407 {
     font: var(--typography-body-sm);
 }
 
 /* === App badges === */
 
-._footer__apps_1kfrt_406 {
+._footer__apps_1lum3_413 {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-space-8);
@@ -412,16 +419,16 @@
 }
 
 @container footer (min-width: 768px) {
-    ._footer__apps_1kfrt_406 {
+    ._footer__apps_1lum3_413 {
         align-items: flex-start;
     }
 }
 
-._footer__apps-title_1kfrt_420 {
+._footer__apps-title_1lum3_427 {
     font: var(--typography-body-md-medium);
 }
 
-._footer__badges_1kfrt_424 {
+._footer__badges_1lum3_431 {
     display: flex;
     flex-wrap: wrap;
     gap: var(--spacing-space-8);
@@ -429,18 +436,18 @@
 }
 
 @container footer (min-width: 768px) {
-    ._footer__badges_1kfrt_424 {
+    ._footer__badges_1lum3_431 {
         flex-direction: column;
         align-items: flex-start;
     }
 }
 
-._footer__badge_1kfrt_424 {
+._footer__badge_1lum3_431 {
     display: inline-flex;
     border-radius: var(--radius-semantic-md);
 }
 
-._footer__badge_1kfrt_424 img {
+._footer__badge_1lum3_431 img {
     display: block;
     width: 140px;
     height: 40px;
@@ -454,12 +461,12 @@
 }
 
 @media (forced-colors: active) {
-    ._footer__divider_1kfrt_233 {
+    ._footer__divider_1lum3_235 {
         background: CanvasText;
     }
 
-    ._footer__language--current_1kfrt_300,
-    ._footer__organization--current_1kfrt_364 {
+    ._footer__language--current_1lum3_303,
+    ._footer__organization--current_1lum3_370 {
         outline: 2px solid Highlight;
     }
 }

package/dist/components/Footer/Footer.module.css.cjs

@@ -1,61 +1,61 @@
 require('./Footer.css');
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const footer = "_footer_1kfrt_8";
-const footer__inner = "_footer__inner_1kfrt_31";
-const footer__top = "_footer__top_1kfrt_36";
-const footer__bottom = "_footer__bottom_1kfrt_37";
-const footer__container = "_footer__container_1kfrt_122";
-const footer__column = "_footer__column_1kfrt_156";
-const footer__link = "_footer__link_1kfrt_111";
-const footer__action = "_footer__action_1kfrt_191";
-const footer__accordion = "_footer__accordion_1kfrt_222";
-const footer__divider = "_footer__divider_1kfrt_233";
-const footer__meta = "_footer__meta_1kfrt_247";
-const footer__language = "_footer__language_1kfrt_274";
-const footer__organization = "_footer__organization_1kfrt_341";
-const footer__copyright = "_footer__copyright_1kfrt_400";
-const footer__apps = "_footer__apps_1kfrt_406";
-const footer__badges = "_footer__badges_1kfrt_424";
-const footer__badge = "_footer__badge_1kfrt_424";
+const footer = "_footer_1lum3_8";
+const footer__inner = "_footer__inner_1lum3_31";
+const footer__top = "_footer__top_1lum3_36";
+const footer__bottom = "_footer__bottom_1lum3_37";
+const footer__container = "_footer__container_1lum3_122";
+const footer__column = "_footer__column_1lum3_156";
+const footer__link = "_footer__link_1lum3_111";
+const footer__action = "_footer__action_1lum3_191";
+const footer__accordion = "_footer__accordion_1lum3_224";
+const footer__divider = "_footer__divider_1lum3_235";
+const footer__meta = "_footer__meta_1lum3_249";
+const footer__language = "_footer__language_1lum3_276";
+const footer__organization = "_footer__organization_1lum3_346";
+const footer__copyright = "_footer__copyright_1lum3_407";
+const footer__apps = "_footer__apps_1lum3_413";
+const footer__badges = "_footer__badges_1lum3_431";
+const footer__badge = "_footer__badge_1lum3_431";
 const styles = {
   footer,
   footer__inner,
   footer__top,
   footer__bottom,
-  "footer__top-row": "_footer__top-row_1kfrt_61",
-  "footer__top-column": "_footer__top-column_1kfrt_76",
-  "footer__top-heading": "_footer__top-heading_1kfrt_84",
-  "footer__top-icon": "_footer__top-icon_1kfrt_91",
-  "footer__top-title": "_footer__top-title_1kfrt_97",
-  "footer__top-links": "_footer__top-links_1kfrt_102",
-  "footer__link-list": "_footer__link-list_1kfrt_111",
-  "footer__top-link": "_footer__top-link_1kfrt_102",
+  "footer__top-row": "_footer__top-row_1lum3_61",
+  "footer__top-column": "_footer__top-column_1lum3_76",
+  "footer__top-heading": "_footer__top-heading_1lum3_84",
+  "footer__top-icon": "_footer__top-icon_1lum3_91",
+  "footer__top-title": "_footer__top-title_1lum3_97",
+  "footer__top-links": "_footer__top-links_1lum3_102",
+  "footer__link-list": "_footer__link-list_1lum3_111",
+  "footer__top-link": "_footer__top-link_1lum3_102",
   footer__container,
-  "footer__nav-accordions": "_footer__nav-accordions_1kfrt_135",
-  "footer__nav-columns": "_footer__nav-columns_1kfrt_139",
+  "footer__nav-accordions": "_footer__nav-accordions_1lum3_135",
+  "footer__nav-columns": "_footer__nav-columns_1lum3_139",
   footer__column,
-  "footer__column-heading": "_footer__column-heading_1kfrt_164",
+  "footer__column-heading": "_footer__column-heading_1lum3_164",
   footer__link,
   footer__action,
   footer__accordion,
   footer__divider,
-  "footer__divider--after-nav": "_footer__divider--after-nav_1kfrt_240",
+  "footer__divider--after-nav": "_footer__divider--after-nav_1lum3_242",
   footer__meta,
-  "footer__meta-center": "_footer__meta-center_1kfrt_263",
-  "footer__language-list": "_footer__language-list_1kfrt_274",
+  "footer__meta-center": "_footer__meta-center_1lum3_265",
+  "footer__language-list": "_footer__language-list_1lum3_276",
   footer__language,
-  "footer__language--current": "_footer__language--current_1kfrt_300",
-  "footer__social-list": "_footer__social-list_1kfrt_311",
-  "footer__social-link": "_footer__social-link_1kfrt_319",
-  "footer__social-icon": "_footer__social-icon_1kfrt_333",
-  "footer__organization-list": "_footer__organization-list_1kfrt_341",
+  "footer__language--current": "_footer__language--current_1lum3_303",
+  "footer__social-list": "_footer__social-list_1lum3_315",
+  "footer__social-link": "_footer__social-link_1lum3_323",
+  "footer__social-icon": "_footer__social-icon_1lum3_338",
+  "footer__organization-list": "_footer__organization-list_1lum3_346",
   footer__organization,
-  "footer__organization--current": "_footer__organization--current_1kfrt_364",
-  "footer__legal-list": "_footer__legal-list_1kfrt_376",
+  "footer__organization--current": "_footer__organization--current_1lum3_370",
+  "footer__legal-list": "_footer__legal-list_1lum3_383",
   footer__copyright,
   footer__apps,
-  "footer__apps-title": "_footer__apps-title_1kfrt_420",
+  "footer__apps-title": "_footer__apps-title_1lum3_427",
   footer__badges,
   footer__badge
 };