@bi-digital/css 0.0.0-experimental-ca10f7e → 0.0.0-experimental-2ec4984

package/dist/components/avatar.css

@@ -48,3 +48,9 @@
   --bic-avatar-size: var(--bi-scale-16x);
   --bic-avatar-font-size: 1.25rem;
 }
+
+.bi-avatar > img {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}

package/dist/components/card.css

@@ -109,15 +109,96 @@
 .bi-card .bi-card--content {
   padding: var(--bic-card-content-padding);
   gap: var(--bi-scale-4x);
+  border-radius: inherit;
+  border: none;
   flex-direction: column;
   flex: auto;
   display: flex;
 }
 
+.bi-card .bi-card--content > p {
+  color: var(--bic-card-content-color);
+  white-space: break-spaces;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  margin: 0;
+  font-size: .875rem;
+  font-weight: 500;
+  line-height: 1.5;
+  display: -webkit-box;
+  overflow: hidden;
+}
+
+@media not (min-width: 768px) {
+  .bi-card .bi-card--content {
+    --bic-card-content-padding: var(--bi-scale-3x);
+    gap: var(--bi-scale-3x);
+  }
+}
+
+.bi-card:-webkit-any(a, button) {
+  cursor: pointer;
+  background: none;
+  text-decoration: none;
+  position: relative;
+}
+
+.bi-card:-webkit-any(a, button):not(.disabled):focus-visible {
+  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white), var(--bic-button-box-shadow));
+  outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
+  outline-offset: var(--_bi--focus, 2px);
+}
+
+.bi-card:-webkit-any(a, button):not(.disabled):focus-visible * {
+  --_bi--focus: ;
+}
+
+.bi-card:-webkit-any(a, button):not(.disabled):hover {
+  box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
+}
+
+.bi-card:-webkit-any(a, button):not(.disabled):active {
+  box-shadow: 0px 0px 0px var(--bi-stroke-default) var(--bi-primary-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
+}
+
+.bi-card:-webkit-any(a, button):disabled {
+  cursor: not-allowed;
+}
+
+.bi-card:is(a, button) {
+  cursor: pointer;
+  background: none;
+  text-decoration: none;
+  position: relative;
+}
+
+.bi-card:is(a, button):not(.disabled):focus-visible {
+  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white), var(--bic-button-box-shadow));
+  outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
+  outline-offset: var(--_bi--focus, 2px);
+}
+
+.bi-card:is(a, button):not(.disabled):focus-visible * {
+  --_bi--focus: ;
+}
+
+.bi-card:is(a, button):not(.disabled):hover {
+  box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
+}
+
+.bi-card:is(a, button):not(.disabled):active {
+  box-shadow: 0px 0px 0px var(--bi-stroke-default) var(--bi-primary-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
+}
+
+.bi-card:is(a, button):disabled {
+  cursor: not-allowed;
+}
+
 .bi-card .bi-card--content:-webkit-any(a, button) {
   cursor: pointer;
   background: none;
-  border: none;
   text-decoration: none;
   position: relative;
 }
@@ -147,7 +228,6 @@
 .bi-card .bi-card--content:is(a, button) {
   cursor: pointer;
   background: none;
-  border: none;
   text-decoration: none;
   position: relative;
 }
@@ -174,28 +254,6 @@
   cursor: not-allowed;
 }
 
-.bi-card .bi-card--content > p {
-  color: var(--bic-card-content-color);
-  white-space: break-spaces;
-  text-overflow: ellipsis;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  -webkit-box-orient: vertical;
-  margin: 0;
-  font-size: .875rem;
-  font-weight: 500;
-  line-height: 1.5;
-  display: -webkit-box;
-  overflow: hidden;
-}
-
-@media not (min-width: 768px) {
-  .bi-card .bi-card--content {
-    --bic-card-content-padding: var(--bi-scale-3x);
-    gap: var(--bi-scale-3x);
-  }
-}
-
 .bi-card .bi-card--actions {
   flex-direction: var(--bic-card-actions-flex-direction, column);
   justify-content: center;
@@ -215,7 +273,7 @@
   --bic-button-font-size: var(--bi-icon-medium);
   --bic-button-color: var(--bic-card-actions-icon-color);
   --bic-button-size: var(--bi-scale-14x);
-  height: 100%;
+  flex: 1;
 }
 
 @media not (min-width: 768px) {

package/dist/components/checkbox-subsection.css

@@ -0,0 +1,22 @@
+.bi-checkbox-subsection {
+  --bic-checkbox-subsection-line-bg: var(--bi-neutral-30);
+  display: flex;
+}
+
+.bi-checkbox-subsection[data-dark="true"] {
+  --bic-checkbox-subsection-line-bg: var(--bi-neutral-50);
+}
+
+.bi-checkbox-subsection > div:first-child {
+  margin: 0 var(--bi-scale-3x) 0 var(--bi-scale-5x);
+  background-color: var(--bic-checkbox-subsection-line-bg);
+  width: var(--bi-stroke-default);
+}
+
+.bi-checkbox-subsection > div:last-child {
+  align-items: flex-start;
+  gap: var(--bi-scale-0-50x);
+  flex-direction: column;
+  flex: 1;
+  display: flex;
+}

package/dist/components/filter-group.css

@@ -0,0 +1,80 @@
+.bi-filter-group {
+  --bic-filter-group-background-color: var(--bi-basic-white);
+  --bic-filter-group-background-color-hover: var(--bi-primary-5);
+  --bic-filter-group-background-color-expanded: var(--bi-neutral-15);
+  --bic-filter-group-border-color: var(--bi-neutral-15);
+  --bic-filter-group-text-color: var(--bi-neutral-90);
+}
+
+.bi-filter-group[data-dark="true"] {
+  --bic-filter-group-background-color: var(--bi-neutral-90);
+  --bic-filter-group-background-color-hover: var(--bi-primary-90);
+  --bic-filter-group-background-color-expanded: var(--bi-neutral-80);
+  --bic-filter-group-border-color: var(--bi-neutral-70);
+  --bic-filter-group-text-color: var(--bi-basic-white);
+}
+
+.bi-filter-group {
+  flex-direction: column;
+  display: flex;
+}
+
+.bi-filter-group > button {
+  box-shadow: 0 var(--bi-scale-0-25x) 0 0 var(--bic-filter-group-border-color);
+  height: var(--bi-scale-12x);
+  color: var(--bic-filter-group-text-color);
+  align-items: center;
+  gap: var(--bi-scale-2x);
+  width: 100%;
+  padding: var(--bi-scale-2x) var(--bi-scale-1-5x);
+  background: var(--bic-filter-group-background-color);
+  cursor: pointer;
+  border-radius: var(--bi-radius-small) var(--bi-radius-small) 0 0;
+  border: none;
+  flex-direction: row;
+  font-size: 1rem;
+  display: flex;
+}
+
+.bi-filter-group > button:hover {
+  background: var(--bic-filter-group-background-color-hover);
+}
+
+.bi-filter-group > button:focus-visible {
+  box-shadow: 0 0 0 4.5px var(--bi-basic-white);
+  outline: 1.5px solid var(--bi-primary-50);
+  outline-offset: 2px;
+  border-radius: var(--bi-radius-small);
+}
+
+.bi-filter-group > button > [data-bi-icon="true"] {
+  width: var(--bi-scale-6x);
+  height: var(--bi-scale-6x);
+  font-size: var(--bi-icon-medium);
+}
+
+.bi-filter-group > button > h3 {
+  text-align: left;
+  flex: 1;
+  margin: 0;
+  font-family: museo-sans, Arial, sans-serif;
+  font-weight: 700;
+  line-height: 1.5;
+}
+
+.bi-filter-group > div {
+  gap: var(--bi-scale-2x);
+  padding: var(--bi-scale-3x) 0 var(--bi-scale-8x);
+  flex-direction: column;
+  display: none;
+}
+
+.bi-filter-group[data-expanded="true"] > button {
+  box-shadow: none;
+  --bic-filter-group-background-color: var(--bic-filter-group-background-color-expanded);
+  border-radius: var(--bi-radius-small);
+}
+
+.bi-filter-group[data-expanded="true"] > div {
+  display: flex;
+}

package/dist/components/navbar.css

@@ -13,7 +13,7 @@
   --bic-navbar-color: var(--bi-basic-white);
 }
 
-.bi-navbar .bi-navbar__header {
+.bi-navbar > header {
   height: var(--bi-layout-navbar-height);
   align-items: center;
   gap: var(--bi-scale-6x);
@@ -24,38 +24,20 @@
   display: flex;
 }
 
-.bi-navbar .bi-navbar__header > :first-child {
+@media (prefers-reduced-motion: no-preference) {
+  .bi-navbar > header {
+    transition: transform .2s ease-in-out;
+  }
+}
+
+.bi-navbar > header > :first-child {
   margin-right: auto;
 }
 
-.bi-navbar[data-fixed="true"] .bi-navbar__header {
+.bi-navbar[data-fixed="true"] > header {
   z-index: 100;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
 }
-
-.bi-navbar .bi-navbar__skip-link {
-  background: var(--bi-primary-50);
-  color: var(--bi-basic-white);
-  outline-offset: 0px;
-  border-radius: 4px;
-  align-content: center;
-  height: 44px;
-  padding: 0 7px;
-  font-size: .75rem;
-  font-weight: 400;
-  position: absolute;
-  left: 50%;
-  transform: translate(-50%, -62px);
-}
-
-.bi-navbar .bi-navbar__skip-link:focus {
-  border-radius: var(--bi-radius-medium);
-  outline-offset: 2px;
-  outline: 1.5px solid var(--bi-primary-50);
-  box-shadow: 0 0 0 2px var(--bi-basic-white);
-  transition: transform .3s;
-  transform: translate(-50%);
-}

package/dist/components/skip-link.css

@@ -0,0 +1,32 @@
+.bi-skip-link {
+  --bic-skip-link-color: var(--bi-basic-white);
+  --bic-skip-link-background: var(--bi-primary-50);
+  background: var(--bic-skip-link-background);
+  color: var(--bic-skip-link-color);
+  outline-offset: 0px;
+  z-index: 200;
+  border-radius: 4px;
+  align-content: center;
+  height: 44px;
+  padding: 0 7px;
+  font-size: 1rem;
+  font-weight: 500;
+  transition: transform .3s ease-in-out;
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%, -110%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bi-skip-link {
+    transition: none;
+  }
+}
+
+.bi-skip-link:focus {
+  transform: translate(-50%, var(--bi-scale-2x));
+  border-radius: var(--bi-radius-medium);
+  outline-offset: 2px;
+  outline: 1.5px solid var(--bi-primary-50);
+  box-shadow: 0 0 0 2px var(--bi-basic-white);
+}

package/dist/components/sticky-header.css

@@ -0,0 +1,11 @@
+.bi-sticky-header {
+  z-index: 101;
+  position: -webkit-sticky;
+  position: sticky;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .bi-sticky-header {
+    transition: top .2s ease-in-out;
+  }
+}

package/dist/components/sub-navbar.css

@@ -0,0 +1,34 @@
+.bi-sub-navbar--wrapper {
+  height: var(--bi-layout-navbar-height);
+  position: relative;
+}
+
+.bi-sub-navbar--wrapper .bi-sub-navbar {
+  --bic-sub-navbar-background-color: var(--bi-basic-white);
+  --bic-sub-navbar-color: var(--bi-basic-key);
+  --bic-sub-navbar-border-color: var(--bi-neutral-15);
+  height: var(--bi-layout-navbar-height);
+  background-color: var(--bic-sub-navbar-background-color);
+  border-bottom: 1px solid var(--bic-sub-navbar-border-color);
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.bi-sub-navbar--wrapper .bi-sub-navbar[data-dark="true"] {
+  --bic-sub-navbar-background-color: var(--bi-primary-95);
+  --bic-sub-navbar-color: var(--bi-basic-white);
+  --bic-sub-navbar-border-color: var(--bi-neutral-70);
+}
+
+.bi-sub-navbar--wrapper .bi-sub-navbar[data-fixed="true"] {
+  z-index: 101;
+  position: fixed;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .bi-sub-navbar--wrapper .bi-sub-navbar[data-fixed="true"] {
+    transition: top .2s ease-in-out;
+  }
+}

package/dist/components.css

@@ -153,6 +153,12 @@
   --bic-avatar-font-size: 1.25rem;
 }
 
+.bi-avatar > img {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+
 .bi-badge {
   --bic-badge-background: transparent;
   --bic-badge-color: var(--bi-neutral-60);
@@ -561,15 +567,96 @@
 .bi-card .bi-card--content {
   padding: var(--bic-card-content-padding);
   gap: var(--bi-scale-4x);
+  border-radius: inherit;
+  border: none;
   flex-direction: column;
   flex: auto;
   display: flex;
 }
 
+.bi-card .bi-card--content > p {
+  color: var(--bic-card-content-color);
+  white-space: break-spaces;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  margin: 0;
+  font-size: .875rem;
+  font-weight: 500;
+  line-height: 1.5;
+  display: -webkit-box;
+  overflow: hidden;
+}
+
+@media not (min-width: 768px) {
+  .bi-card .bi-card--content {
+    --bic-card-content-padding: var(--bi-scale-3x);
+    gap: var(--bi-scale-3x);
+  }
+}
+
+.bi-card:-webkit-any(a, button) {
+  cursor: pointer;
+  background: none;
+  text-decoration: none;
+  position: relative;
+}
+
+.bi-card:-webkit-any(a, button):not(.disabled):focus-visible {
+  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white), var(--bic-button-box-shadow));
+  outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
+  outline-offset: var(--_bi--focus, 2px);
+}
+
+.bi-card:-webkit-any(a, button):not(.disabled):focus-visible * {
+  --_bi--focus: ;
+}
+
+.bi-card:-webkit-any(a, button):not(.disabled):hover {
+  box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
+}
+
+.bi-card:-webkit-any(a, button):not(.disabled):active {
+  box-shadow: 0px 0px 0px var(--bi-stroke-default) var(--bi-primary-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
+}
+
+.bi-card:-webkit-any(a, button):disabled {
+  cursor: not-allowed;
+}
+
+.bi-card:is(a, button) {
+  cursor: pointer;
+  background: none;
+  text-decoration: none;
+  position: relative;
+}
+
+.bi-card:is(a, button):not(.disabled):focus-visible {
+  box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-basic-white), var(--bic-button-box-shadow));
+  outline: var(--_bi--focus, 1.5px solid var(--bi-primary-50));
+  outline-offset: var(--_bi--focus, 2px);
+}
+
+.bi-card:is(a, button):not(.disabled):focus-visible * {
+  --_bi--focus: ;
+}
+
+.bi-card:is(a, button):not(.disabled):hover {
+  box-shadow: 0px 0px 0px 2px var(--bi-neutral-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
+}
+
+.bi-card:is(a, button):not(.disabled):active {
+  box-shadow: 0px 0px 0px var(--bi-stroke-default) var(--bi-primary-50), 0px 0px 20px var(--bi-scale-1-5x) #0000000d, 0px 0px 10px 0px #0000000d;
+}
+
+.bi-card:is(a, button):disabled {
+  cursor: not-allowed;
+}
+
 .bi-card .bi-card--content:-webkit-any(a, button) {
   cursor: pointer;
   background: none;
-  border: none;
   text-decoration: none;
   position: relative;
 }
@@ -599,7 +686,6 @@
 .bi-card .bi-card--content:is(a, button) {
   cursor: pointer;
   background: none;
-  border: none;
   text-decoration: none;
   position: relative;
 }
@@ -626,28 +712,6 @@
   cursor: not-allowed;
 }
 
-.bi-card .bi-card--content > p {
-  color: var(--bic-card-content-color);
-  white-space: break-spaces;
-  text-overflow: ellipsis;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  -webkit-box-orient: vertical;
-  margin: 0;
-  font-size: .875rem;
-  font-weight: 500;
-  line-height: 1.5;
-  display: -webkit-box;
-  overflow: hidden;
-}
-
-@media not (min-width: 768px) {
-  .bi-card .bi-card--content {
-    --bic-card-content-padding: var(--bi-scale-3x);
-    gap: var(--bi-scale-3x);
-  }
-}
-
 .bi-card .bi-card--actions {
   flex-direction: var(--bic-card-actions-flex-direction, column);
   justify-content: center;
@@ -667,7 +731,7 @@
   --bic-button-font-size: var(--bi-icon-medium);
   --bic-button-color: var(--bic-card-actions-icon-color);
   --bic-button-size: var(--bi-scale-14x);
-  height: 100%;
+  flex: 1;
 }
 
 @media not (min-width: 768px) {
@@ -794,6 +858,29 @@
   line-height: 1.15;
 }
 
+.bi-checkbox-subsection {
+  --bic-checkbox-subsection-line-bg: var(--bi-neutral-30);
+  display: flex;
+}
+
+.bi-checkbox-subsection[data-dark="true"] {
+  --bic-checkbox-subsection-line-bg: var(--bi-neutral-50);
+}
+
+.bi-checkbox-subsection > div:first-child {
+  margin: 0 var(--bi-scale-3x) 0 var(--bi-scale-5x);
+  background-color: var(--bic-checkbox-subsection-line-bg);
+  width: var(--bi-stroke-default);
+}
+
+.bi-checkbox-subsection > div:last-child {
+  align-items: flex-start;
+  gap: var(--bi-scale-0-50x);
+  flex-direction: column;
+  flex: 1;
+  display: flex;
+}
+
 .bi-chip {
   --bic-chip-background: var(--bi-primary-5);
   --bic-chip-background-hover: var(--bi-primary-10);
@@ -1633,6 +1720,87 @@ body:has(.bi-dialog:modal) {
   opacity: var(--ds-opacity-disabled);
 }
 
+.bi-filter-group {
+  --bic-filter-group-background-color: var(--bi-basic-white);
+  --bic-filter-group-background-color-hover: var(--bi-primary-5);
+  --bic-filter-group-background-color-expanded: var(--bi-neutral-15);
+  --bic-filter-group-border-color: var(--bi-neutral-15);
+  --bic-filter-group-text-color: var(--bi-neutral-90);
+}
+
+.bi-filter-group[data-dark="true"] {
+  --bic-filter-group-background-color: var(--bi-neutral-90);
+  --bic-filter-group-background-color-hover: var(--bi-primary-90);
+  --bic-filter-group-background-color-expanded: var(--bi-neutral-80);
+  --bic-filter-group-border-color: var(--bi-neutral-70);
+  --bic-filter-group-text-color: var(--bi-basic-white);
+}
+
+.bi-filter-group {
+  flex-direction: column;
+  display: flex;
+}
+
+.bi-filter-group > button {
+  box-shadow: 0 var(--bi-scale-0-25x) 0 0 var(--bic-filter-group-border-color);
+  height: var(--bi-scale-12x);
+  color: var(--bic-filter-group-text-color);
+  align-items: center;
+  gap: var(--bi-scale-2x);
+  width: 100%;
+  padding: var(--bi-scale-2x) var(--bi-scale-1-5x);
+  background: var(--bic-filter-group-background-color);
+  cursor: pointer;
+  border-radius: var(--bi-radius-small) var(--bi-radius-small) 0 0;
+  border: none;
+  flex-direction: row;
+  font-size: 1rem;
+  display: flex;
+}
+
+.bi-filter-group > button:hover {
+  background: var(--bic-filter-group-background-color-hover);
+}
+
+.bi-filter-group > button:focus-visible {
+  box-shadow: 0 0 0 4.5px var(--bi-basic-white);
+  outline: 1.5px solid var(--bi-primary-50);
+  outline-offset: 2px;
+  border-radius: var(--bi-radius-small);
+}
+
+.bi-filter-group > button > [data-bi-icon="true"] {
+  width: var(--bi-scale-6x);
+  height: var(--bi-scale-6x);
+  font-size: var(--bi-icon-medium);
+}
+
+.bi-filter-group > button > h3 {
+  text-align: left;
+  flex: 1;
+  margin: 0;
+  font-family: museo-sans, Arial, sans-serif;
+  font-weight: 700;
+  line-height: 1.5;
+}
+
+.bi-filter-group > div {
+  gap: var(--bi-scale-2x);
+  padding: var(--bi-scale-3x) 0 var(--bi-scale-8x);
+  flex-direction: column;
+  display: none;
+}
+
+.bi-filter-group[data-expanded="true"] > button {
+  box-shadow: none;
+  --bic-filter-group-background-color: var(--bic-filter-group-background-color-expanded);
+  border-radius: var(--bi-radius-small);
+}
+
+.bi-filter-group[data-expanded="true"] > div {
+  display: flex;
+}
+
 .bi-footer {
   --bic-footer-color: var(--bi-basic-key);
   --bic-footer-background: var(--bi-basic-white);
@@ -2319,7 +2487,7 @@ body:has(.bi-dialog:modal) {
   --bic-navbar-color: var(--bi-basic-white);
 }
 
-.bi-navbar .bi-navbar__header {
+.bi-navbar > header {
   height: var(--bi-layout-navbar-height);
   align-items: center;
   gap: var(--bi-scale-6x);
@@ -2330,11 +2498,17 @@ body:has(.bi-dialog:modal) {
   display: flex;
 }
 
-.bi-navbar .bi-navbar__header > :first-child {
+@media (prefers-reduced-motion: no-preference) {
+  .bi-navbar > header {
+    transition: transform .2s ease-in-out;
+  }
+}
+
+.bi-navbar > header > :first-child {
   margin-right: auto;
 }
 
-.bi-navbar[data-fixed="true"] .bi-navbar__header {
+.bi-navbar[data-fixed="true"] > header {
   z-index: 100;
   position: fixed;
   top: 0;
@@ -2342,28 +2516,39 @@ body:has(.bi-dialog:modal) {
   right: 0;
 }
 
-.bi-navbar .bi-navbar__skip-link {
-  background: var(--bi-primary-50);
-  color: var(--bi-basic-white);
-  outline-offset: 0px;
-  border-radius: 4px;
-  align-content: center;
-  height: 44px;
-  padding: 0 7px;
-  font-size: .75rem;
-  font-weight: 400;
+.bi-sub-navbar--wrapper {
+  height: var(--bi-layout-navbar-height);
+  position: relative;
+}
+
+.bi-sub-navbar--wrapper .bi-sub-navbar {
+  --bic-sub-navbar-background-color: var(--bi-basic-white);
+  --bic-sub-navbar-color: var(--bi-basic-key);
+  --bic-sub-navbar-border-color: var(--bi-neutral-15);
+  height: var(--bi-layout-navbar-height);
+  background-color: var(--bic-sub-navbar-background-color);
+  border-bottom: 1px solid var(--bic-sub-navbar-border-color);
+  width: 100%;
   position: absolute;
-  left: 50%;
-  transform: translate(-50%, -62px);
+  top: 0;
+  left: 0;
 }
 
-.bi-navbar .bi-navbar__skip-link:focus {
-  border-radius: var(--bi-radius-medium);
-  outline-offset: 2px;
-  outline: 1.5px solid var(--bi-primary-50);
-  box-shadow: 0 0 0 2px var(--bi-basic-white);
-  transition: transform .3s;
-  transform: translate(-50%);
+.bi-sub-navbar--wrapper .bi-sub-navbar[data-dark="true"] {
+  --bic-sub-navbar-background-color: var(--bi-primary-95);
+  --bic-sub-navbar-color: var(--bi-basic-white);
+  --bic-sub-navbar-border-color: var(--bi-neutral-70);
+}
+
+.bi-sub-navbar--wrapper .bi-sub-navbar[data-fixed="true"] {
+  z-index: 101;
+  position: fixed;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .bi-sub-navbar--wrapper .bi-sub-navbar[data-fixed="true"] {
+    transition: top .2s ease-in-out;
+  }
 }
 
 .bi-pagination {
@@ -2502,6 +2687,39 @@ body:has(.bi-dialog:modal) {
   display: none;
 }
 
+.bi-skip-link {
+  --bic-skip-link-color: var(--bi-basic-white);
+  --bic-skip-link-background: var(--bi-primary-50);
+  background: var(--bic-skip-link-background);
+  color: var(--bic-skip-link-color);
+  outline-offset: 0px;
+  z-index: 200;
+  border-radius: 4px;
+  align-content: center;
+  height: 44px;
+  padding: 0 7px;
+  font-size: 1rem;
+  font-weight: 500;
+  transition: transform .3s ease-in-out;
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%, -110%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bi-skip-link {
+    transition: none;
+  }
+}
+
+.bi-skip-link:focus {
+  transform: translate(-50%, var(--bi-scale-2x));
+  border-radius: var(--bi-radius-medium);
+  outline-offset: 2px;
+  outline: 1.5px solid var(--bi-primary-50);
+  box-shadow: 0 0 0 2px var(--bi-basic-white);
+}
+
 .bi-spinner {
   --bic-spinner-color: currentColor;
   aspect-ratio: 1;
@@ -2554,6 +2772,18 @@ body:has(.bi-dialog:modal) {
   }
 }
 
+.bi-sticky-header {
+  z-index: 101;
+  position: -webkit-sticky;
+  position: sticky;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .bi-sticky-header {
+    transition: top .2s ease-in-out;
+  }
+}
+
 .bi-tabs {
   --bic-tabs-tab-color-selected: var(--bi-primary-50);
   --bic-tabs-panel-padding: var(--bi-scale-4x) var(--bi-scale-5x);
@@ -2676,3 +2906,39 @@ body:has(.bi-dialog:modal) {
   left: var(--bic-validation-message-padding);
   position: absolute;
 }
+
+html:has(.bi-navbar) {
+  scroll-padding-top: var(--bi-layout-navbar-height);
+}
+
+html:has(.bi-sub-navbar) {
+  scroll-padding-top: var(--bi-layout-navbar-height);
+}
+
+html .bi-sticky-header {
+  top: 0;
+}
+
+html:has(.bi-navbar[data-fixed="true"]) .bi-sticky-header {
+  top: var(--bi-layout-navbar-height);
+}
+
+html:has(.bi-sub-navbar[data-fixed="true"][data-scroll-dir="down"]) .bi-navbar > header {
+  transform: translateY(-100%);
+}
+
+html:has(.bi-sub-navbar[data-fixed="true"][data-scroll-dir="down"]) .bi-sub-navbar {
+  top: 0;
+}
+
+html:has(.bi-navbar[data-fixed="true"]):has(.bi-sub-navbar[data-fixed="true"][data-scroll-dir="up"]) .bi-navbar > header {
+  transform: translateY(0);
+}
+
+html:has(.bi-navbar[data-fixed="true"]):has(.bi-sub-navbar[data-fixed="true"][data-scroll-dir="up"]) .bi-sub-navbar {
+  top: var(--bi-layout-navbar-height);
+}
+
+html:has(.bi-navbar[data-fixed="true"]):has(.bi-sub-navbar[data-fixed="true"][data-scroll-dir="up"]) .bi-sticky-header {
+  top: calc(var(--bi-layout-navbar-height)  + var(--bi-layout-navbar-height));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bi-digital/css",
-  "version": "0.0.0-experimental-ca10f7e",
+  "version": "0.0.0-experimental-2ec4984",
   "description": "CSS for the BI Design System",
   "author": "BI Digital",
   "license": "ISC",
@@ -23,7 +23,7 @@
     "lightningcss": "^1.30.1",
     "modern-normalize": "^3.0.1",
     "rimraf": "^6.0.1",
-    "@bi-digital/tokens": "0.0.0-experimental-ca10f7e"
+    "@bi-digital/tokens": "0.0.0-experimental-2ec4984"
   },
   "scripts": {
     "build": "rimraf dist && node config.js",