@byline/host-tanstack-start 6.10.1 → 6.11.0

package/dist/admin-shell/chrome/dashboard_module.css

@@ -1,201 +1,205 @@
-:is(.grid-aNPhoI, .byline-dashboard-grid) {
-  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
-  gap: 1.5rem;
-  display: grid;
-}
-
-:is(.cardLink-Di14n_, .byline-dashboard-card-link) {
-  color: inherit;
-  text-decoration: none;
-  display: block;
-}
-
-.cardLink-Di14n_:hover {
-  opacity: .9;
-}
-
-.byline-dashboard-card-link:hover {
-  opacity: .9;
-}
-
-:is(.cardHeader-WcRUsX, .byline-dashboard-card-header) {
-  border-bottom: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
-  padding-bottom: .75rem;
-}
-
-:is(:is([data-theme="dark"], .dark) .cardHeader-WcRUsX, :is([data-theme="dark"], .dark) .byline-dashboard-card-header) {
-  border-bottom-color: var(--gray-700);
-}
-
-:is(.cardTitle-aqU9F_, .byline-dashboard-card-title) {
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: .25rem;
-  display: flex;
-}
-
-:is(.titleText-qCLEsD, .byline-dashboard-title-text) {
-  font-size: 1.5rem;
-}
-
-:is(.titleMeta-_H8FQE, .byline-dashboard-title-meta) {
-  font-size: .9rem;
-  font-weight: normal;
-}
-
-:is(.statGrid-fjag3c, .byline-dashboard-stat-grid) {
-  grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr));
-  gap: .5rem;
-  display: grid;
-}
-
-:is(.statTile-Ag0cpz, .byline-dashboard-stat-tile) {
-  border-radius: .25rem;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: .125rem;
-  padding: 1rem .5rem .625rem;
-  text-decoration: none;
-  transition: opacity .2s;
-  display: flex;
-}
-
-.statTile-Ag0cpz:hover {
-  opacity: .8;
-}
-
-.byline-dashboard-stat-tile:hover {
-  opacity: .8;
-}
-
-:is(.statTileLabel-TotDKr, .byline-dashboard-stat-tile-label) {
-  text-transform: uppercase;
-  letter-spacing: .1em;
-  font-size: .6rem;
-  font-weight: 600;
-  line-height: 1;
-}
-
-:is(.statTileNumber-xKtSsh, .byline-dashboard-stat-tile-number) {
-  font-variant-numeric: tabular-nums;
-  margin-top: .25rem;
-  font-size: 1.5rem;
-  font-weight: 700;
-  line-height: 1;
-}
-
-:is(.tileDraft-PiNkZ8, .byline-dashboard-tile-draft) {
-  background-color: #fffbeb;
-}
-
-:is(.tileDraft-PiNkZ8 .statTileLabel-TotDKr, .byline-dashboard-tile-draft .byline-dashboard-stat-tile-label) {
-  color: #d97706;
-}
-
-:is(.tileDraft-PiNkZ8 .statTileNumber-xKtSsh, .byline-dashboard-tile-draft .byline-dashboard-stat-tile-number) {
-  color: #b45309;
-}
-
-:is(:is([data-theme="dark"], .dark) .tileDraft-PiNkZ8, :is([data-theme="dark"], .dark) .byline-dashboard-tile-draft) {
-  background-color: #78350f33;
-}
-
-:is(:is([data-theme="dark"], .dark) .tileDraft-PiNkZ8 .statTileLabel-TotDKr, :is([data-theme="dark"], .dark) .byline-dashboard-tile-draft .byline-dashboard-stat-tile-label) {
-  color: #fbbf24;
-}
-
-:is(:is([data-theme="dark"], .dark) .tileDraft-PiNkZ8 .statTileNumber-xKtSsh, :is([data-theme="dark"], .dark) .byline-dashboard-tile-draft .byline-dashboard-stat-tile-number) {
-  color: #fcd34d;
-}
-
-:is(.tilePublished-J3RcRP, .byline-dashboard-tile-published) {
-  background-color: #ecfdf5;
-}
-
-:is(.tilePublished-J3RcRP .statTileLabel-TotDKr, .byline-dashboard-tile-published .byline-dashboard-stat-tile-label, .tilePublished-J3RcRP .statTileNumber-xKtSsh, .byline-dashboard-tile-published .byline-dashboard-stat-tile-number) {
-  color: #047857;
-}
-
-:is(:is([data-theme="dark"], .dark) .tilePublished-J3RcRP, :is([data-theme="dark"], .dark) .byline-dashboard-tile-published) {
-  background-color: #064e3b33;
-}
-
-:is(:is([data-theme="dark"], .dark) .tilePublished-J3RcRP .statTileLabel-TotDKr, :is([data-theme="dark"], .dark) .byline-dashboard-tile-published .byline-dashboard-stat-tile-label) {
-  color: #34d399;
-}
-
-:is(:is([data-theme="dark"], .dark) .tilePublished-J3RcRP .statTileNumber-xKtSsh, :is([data-theme="dark"], .dark) .byline-dashboard-tile-published .byline-dashboard-stat-tile-number) {
-  color: #6ee7b7;
-}
-
-:is(.tileArchived-xNthEz, .byline-dashboard-tile-archived) {
-  background-color: #f0f9ff;
-}
-
-:is(.tileArchived-xNthEz .statTileLabel-TotDKr, .byline-dashboard-tile-archived .byline-dashboard-stat-tile-label, .tileArchived-xNthEz .statTileNumber-xKtSsh, .byline-dashboard-tile-archived .byline-dashboard-stat-tile-number) {
-  color: #0369a1;
-}
-
-:is(:is([data-theme="dark"], .dark) .tileArchived-xNthEz, :is([data-theme="dark"], .dark) .byline-dashboard-tile-archived) {
-  background-color: #0c4a6e33;
-}
-
-:is(:is([data-theme="dark"], .dark) .tileArchived-xNthEz .statTileLabel-TotDKr, :is([data-theme="dark"], .dark) .byline-dashboard-tile-archived .byline-dashboard-stat-tile-label) {
-  color: #38bdf8;
-}
-
-:is(:is([data-theme="dark"], .dark) .tileArchived-xNthEz .statTileNumber-xKtSsh, :is([data-theme="dark"], .dark) .byline-dashboard-tile-archived .byline-dashboard-stat-tile-number) {
-  color: #7dd3fc;
-}
-
-:is(.tileCustom-cAV1h6, .byline-dashboard-tile-custom) {
-  background-color: #f5f3ff;
-}
-
-:is(.tileCustom-cAV1h6 .statTileLabel-TotDKr, .byline-dashboard-tile-custom .byline-dashboard-stat-tile-label, .tileCustom-cAV1h6 .statTileNumber-xKtSsh, .byline-dashboard-tile-custom .byline-dashboard-stat-tile-number) {
-  color: #6d28d9;
-}
-
-:is(:is([data-theme="dark"], .dark) .tileCustom-cAV1h6, :is([data-theme="dark"], .dark) .byline-dashboard-tile-custom) {
-  background-color: #4c1d9533;
-}
-
-:is(:is([data-theme="dark"], .dark) .tileCustom-cAV1h6 .statTileLabel-TotDKr, :is([data-theme="dark"], .dark) .byline-dashboard-tile-custom .byline-dashboard-stat-tile-label) {
-  color: #a78bfa;
-}
-
-:is(:is([data-theme="dark"], .dark) .tileCustom-cAV1h6 .statTileNumber-xKtSsh, :is([data-theme="dark"], .dark) .byline-dashboard-tile-custom .byline-dashboard-stat-tile-number) {
-  color: #c4b5fd;
-}
-
-:is(.emptyLink-UVXqHV, .byline-dashboard-empty-link) {
-  display: block;
-}
-
-:is(.group-Q8QBu_, .byline-dashboard-group) {
-  flex-direction: column;
-  gap: 1rem;
-  display: flex;
-}
-
-:is(.group-Q8QBu_ + .group-Q8QBu_, .byline-dashboard-group + .byline-dashboard-group) {
-  margin-top: 2.5rem;
-}
-
-:is(.groupHeading-RsImn4, .byline-dashboard-group-heading) {
-  border-bottom: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
-  letter-spacing: .02em;
-  text-transform: uppercase;
-  color: var(--gray-600);
-  margin: 0;
-  padding-bottom: .5rem;
-  font-size: 1.125rem;
-  font-weight: 600;
-}
-
-:is(:is([data-theme="dark"], .dark) .groupHeading-RsImn4, :is([data-theme="dark"], .dark) .byline-dashboard-group-heading) {
-  border-bottom-color: var(--gray-700);
-  color: var(--gray-400);
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components, byline-components, overrides, byline-utilities, utilities, byline-components.primitives;
+
+@layer byline-components.cms {
+  :is(.grid-aNPhoI, .byline-dashboard-grid) {
+    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
+    gap: 1.5rem;
+    display: grid;
+  }
+
+  :is(.cardLink-Di14n_, .byline-dashboard-card-link) {
+    color: inherit;
+    text-decoration: none;
+    display: block;
+  }
+
+  .cardLink-Di14n_:hover {
+    opacity: .9;
+  }
+
+  .byline-dashboard-card-link:hover {
+    opacity: .9;
+  }
+
+  :is(.cardHeader-WcRUsX, .byline-dashboard-card-header) {
+    border-bottom: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
+    padding-bottom: .75rem;
+  }
+
+  :is(:is([data-theme="dark"], .dark) .cardHeader-WcRUsX, :is([data-theme="dark"], .dark) .byline-dashboard-card-header) {
+    border-bottom-color: var(--gray-700);
+  }
+
+  :is(.cardTitle-aqU9F_, .byline-dashboard-card-title) {
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: .25rem;
+    display: flex;
+  }
+
+  :is(.titleText-qCLEsD, .byline-dashboard-title-text) {
+    font-size: 1.5rem;
+  }
+
+  :is(.titleMeta-_H8FQE, .byline-dashboard-title-meta) {
+    font-size: .9rem;
+    font-weight: normal;
+  }
+
+  :is(.statGrid-fjag3c, .byline-dashboard-stat-grid) {
+    grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr));
+    gap: .5rem;
+    display: grid;
+  }
+
+  :is(.statTile-Ag0cpz, .byline-dashboard-stat-tile) {
+    border-radius: .25rem;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: .125rem;
+    padding: 1rem .5rem .625rem;
+    text-decoration: none;
+    transition: opacity .2s;
+    display: flex;
+  }
+
+  .statTile-Ag0cpz:hover {
+    opacity: .8;
+  }
+
+  .byline-dashboard-stat-tile:hover {
+    opacity: .8;
+  }
+
+  :is(.statTileLabel-TotDKr, .byline-dashboard-stat-tile-label) {
+    text-transform: uppercase;
+    letter-spacing: .1em;
+    font-size: .6rem;
+    font-weight: 600;
+    line-height: 1;
+  }
+
+  :is(.statTileNumber-xKtSsh, .byline-dashboard-stat-tile-number) {
+    font-variant-numeric: tabular-nums;
+    margin-top: .25rem;
+    font-size: 1.5rem;
+    font-weight: 700;
+    line-height: 1;
+  }
+
+  :is(.tileDraft-PiNkZ8, .byline-dashboard-tile-draft) {
+    background-color: #fffbeb;
+  }
+
+  :is(.tileDraft-PiNkZ8 .statTileLabel-TotDKr, .byline-dashboard-tile-draft .byline-dashboard-stat-tile-label) {
+    color: #d97706;
+  }
+
+  :is(.tileDraft-PiNkZ8 .statTileNumber-xKtSsh, .byline-dashboard-tile-draft .byline-dashboard-stat-tile-number) {
+    color: #b45309;
+  }
+
+  :is(:is([data-theme="dark"], .dark) .tileDraft-PiNkZ8, :is([data-theme="dark"], .dark) .byline-dashboard-tile-draft) {
+    background-color: #78350f33;
+  }
+
+  :is(:is([data-theme="dark"], .dark) .tileDraft-PiNkZ8 .statTileLabel-TotDKr, :is([data-theme="dark"], .dark) .byline-dashboard-tile-draft .byline-dashboard-stat-tile-label) {
+    color: #fbbf24;
+  }
+
+  :is(:is([data-theme="dark"], .dark) .tileDraft-PiNkZ8 .statTileNumber-xKtSsh, :is([data-theme="dark"], .dark) .byline-dashboard-tile-draft .byline-dashboard-stat-tile-number) {
+    color: #fcd34d;
+  }
+
+  :is(.tilePublished-J3RcRP, .byline-dashboard-tile-published) {
+    background-color: #ecfdf5;
+  }
+
+  :is(.tilePublished-J3RcRP .statTileLabel-TotDKr, .byline-dashboard-tile-published .byline-dashboard-stat-tile-label, .tilePublished-J3RcRP .statTileNumber-xKtSsh, .byline-dashboard-tile-published .byline-dashboard-stat-tile-number) {
+    color: #047857;
+  }
+
+  :is(:is([data-theme="dark"], .dark) .tilePublished-J3RcRP, :is([data-theme="dark"], .dark) .byline-dashboard-tile-published) {
+    background-color: #064e3b33;
+  }
+
+  :is(:is([data-theme="dark"], .dark) .tilePublished-J3RcRP .statTileLabel-TotDKr, :is([data-theme="dark"], .dark) .byline-dashboard-tile-published .byline-dashboard-stat-tile-label) {
+    color: #34d399;
+  }
+
+  :is(:is([data-theme="dark"], .dark) .tilePublished-J3RcRP .statTileNumber-xKtSsh, :is([data-theme="dark"], .dark) .byline-dashboard-tile-published .byline-dashboard-stat-tile-number) {
+    color: #6ee7b7;
+  }
+
+  :is(.tileArchived-xNthEz, .byline-dashboard-tile-archived) {
+    background-color: #f0f9ff;
+  }
+
+  :is(.tileArchived-xNthEz .statTileLabel-TotDKr, .byline-dashboard-tile-archived .byline-dashboard-stat-tile-label, .tileArchived-xNthEz .statTileNumber-xKtSsh, .byline-dashboard-tile-archived .byline-dashboard-stat-tile-number) {
+    color: #0369a1;
+  }
+
+  :is(:is([data-theme="dark"], .dark) .tileArchived-xNthEz, :is([data-theme="dark"], .dark) .byline-dashboard-tile-archived) {
+    background-color: #0c4a6e33;
+  }
+
+  :is(:is([data-theme="dark"], .dark) .tileArchived-xNthEz .statTileLabel-TotDKr, :is([data-theme="dark"], .dark) .byline-dashboard-tile-archived .byline-dashboard-stat-tile-label) {
+    color: #38bdf8;
+  }
+
+  :is(:is([data-theme="dark"], .dark) .tileArchived-xNthEz .statTileNumber-xKtSsh, :is([data-theme="dark"], .dark) .byline-dashboard-tile-archived .byline-dashboard-stat-tile-number) {
+    color: #7dd3fc;
+  }
+
+  :is(.tileCustom-cAV1h6, .byline-dashboard-tile-custom) {
+    background-color: #f5f3ff;
+  }
+
+  :is(.tileCustom-cAV1h6 .statTileLabel-TotDKr, .byline-dashboard-tile-custom .byline-dashboard-stat-tile-label, .tileCustom-cAV1h6 .statTileNumber-xKtSsh, .byline-dashboard-tile-custom .byline-dashboard-stat-tile-number) {
+    color: #6d28d9;
+  }
+
+  :is(:is([data-theme="dark"], .dark) .tileCustom-cAV1h6, :is([data-theme="dark"], .dark) .byline-dashboard-tile-custom) {
+    background-color: #4c1d9533;
+  }
+
+  :is(:is([data-theme="dark"], .dark) .tileCustom-cAV1h6 .statTileLabel-TotDKr, :is([data-theme="dark"], .dark) .byline-dashboard-tile-custom .byline-dashboard-stat-tile-label) {
+    color: #a78bfa;
+  }
+
+  :is(:is([data-theme="dark"], .dark) .tileCustom-cAV1h6 .statTileNumber-xKtSsh, :is([data-theme="dark"], .dark) .byline-dashboard-tile-custom .byline-dashboard-stat-tile-number) {
+    color: #c4b5fd;
+  }
+
+  :is(.emptyLink-UVXqHV, .byline-dashboard-empty-link) {
+    display: block;
+  }
+
+  :is(.group-Q8QBu_, .byline-dashboard-group) {
+    flex-direction: column;
+    gap: 1rem;
+    display: flex;
+  }
+
+  :is(.group-Q8QBu_ + .group-Q8QBu_, .byline-dashboard-group + .byline-dashboard-group) {
+    margin-top: 2.5rem;
+  }
+
+  :is(.groupHeading-RsImn4, .byline-dashboard-group-heading) {
+    border-bottom: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
+    letter-spacing: .02em;
+    text-transform: uppercase;
+    color: var(--gray-600);
+    margin: 0;
+    padding-bottom: .5rem;
+    font-size: 1.125rem;
+    font-weight: 600;
+  }
+
+  :is(:is([data-theme="dark"], .dark) .groupHeading-RsImn4, :is([data-theme="dark"], .dark) .byline-dashboard-group-heading) {
+    border-bottom-color: var(--gray-700);
+    color: var(--gray-400);
+  }
 }
 

package/dist/admin-shell/chrome/hamburger_module.css

@@ -1,7 +1,11 @@
-:is(.button-gAjP72, .byline-admin-hamburger) {
-  cursor: pointer;
-  background: none;
-  border: 0;
-  padding: 0;
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components, byline-components, overrides, byline-utilities, utilities, byline-components.primitives;
+
+@layer byline-components.cms {
+  :is(.button-gAjP72, .byline-admin-hamburger) {
+    cursor: pointer;
+    background: none;
+    border: 0;
+    padding: 0;
+  }
 }
 

package/dist/admin-shell/chrome/route-error_module.css

@@ -1,94 +1,98 @@
-:is(.section-LaH8Ja, .byline-route-error) {
-  padding-top: 3rem;
-  padding-bottom: 3rem;
-}
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components, byline-components, overrides, byline-utilities, utilities, byline-components.primitives;
 
-:is(.container-IBKPNd, .byline-route-error-container) {
-  max-width: 42rem;
-  margin-top: 8vh;
-}
+@layer byline-components.cms {
+  :is(.section-LaH8Ja, .byline-route-error) {
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+  }
 
-@media (min-width: 40rem) {
   :is(.container-IBKPNd, .byline-route-error-container) {
-    margin-top: 12vh;
+    max-width: 42rem;
+    margin-top: 8vh;
   }
-}
 
-:is(.message-GjE6w_, .byline-route-error-message) {
-  margin-top: .25rem;
-}
+  @media (min-width: 40rem) {
+    :is(.container-IBKPNd, .byline-route-error-container) {
+      margin-top: 12vh;
+    }
+  }
 
-:is(.actions-uUrjyX, .byline-route-error-actions) {
-  gap: .75rem;
-  margin-top: 1rem;
-  display: flex;
-}
+  :is(.message-GjE6w_, .byline-route-error-message) {
+    margin-top: .25rem;
+  }
 
-:is(.link-KPggsY, .byline-route-error-link) {
-  align-items: center;
-  font-size: .875rem;
-  text-decoration: underline;
-  display: inline-flex;
-}
+  :is(.actions-uUrjyX, .byline-route-error-actions) {
+    gap: .75rem;
+    margin-top: 1rem;
+    display: flex;
+  }
 
-.link-KPggsY:hover {
-  text-decoration: none;
-}
+  :is(.link-KPggsY, .byline-route-error-link) {
+    align-items: center;
+    font-size: .875rem;
+    text-decoration: underline;
+    display: inline-flex;
+  }
 
-.byline-route-error-link:hover {
-  text-decoration: none;
-}
+  .link-KPggsY:hover {
+    text-decoration: none;
+  }
 
-:is(.rootRoot-qv3BPU, .byline-root-error) {
-  justify-content: center;
-  align-items: center;
-  min-height: 100vh;
-  padding: 2rem;
-  display: flex;
-}
+  .byline-route-error-link:hover {
+    text-decoration: none;
+  }
 
-:is(.rootInner-tjvjNn, .byline-root-error-inner) {
-  text-align: center;
-  flex-direction: column;
-  gap: 1rem;
-  max-width: 28rem;
-  display: flex;
-}
+  :is(.rootRoot-qv3BPU, .byline-root-error) {
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    padding: 2rem;
+    display: flex;
+  }
 
-:is(.rootTitle-r1TMur, .byline-root-error-title) {
-  color: #dc2626;
-  font-size: 1.5rem;
-  font-weight: 700;
-}
+  :is(.rootInner-tjvjNn, .byline-root-error-inner) {
+    text-align: center;
+    flex-direction: column;
+    gap: 1rem;
+    max-width: 28rem;
+    display: flex;
+  }
 
-:is(:is([data-theme="dark"], .dark) .rootTitle-r1TMur, :is([data-theme="dark"], .dark) .byline-root-error-title) {
-  color: #f87171;
-}
+  :is(.rootTitle-r1TMur, .byline-root-error-title) {
+    color: #dc2626;
+    font-size: 1.5rem;
+    font-weight: 700;
+  }
 
-:is(.rootDetail-bRN7lX, .byline-root-error-detail) {
-  color: var(--gray-600);
-  font-size: .875rem;
-}
+  :is(:is([data-theme="dark"], .dark) .rootTitle-r1TMur, :is([data-theme="dark"], .dark) .byline-root-error-title) {
+    color: #f87171;
+  }
 
-:is(:is([data-theme="dark"], .dark) .rootDetail-bRN7lX, :is([data-theme="dark"], .dark) .byline-root-error-detail) {
-  color: var(--gray-400);
-}
+  :is(.rootDetail-bRN7lX, .byline-root-error-detail) {
+    color: var(--gray-600);
+    font-size: .875rem;
+  }
 
-:is(.rootButton-Dhbx5n, .byline-root-error-button) {
-  color: #fff;
-  cursor: pointer;
-  background-color: #dc2626;
-  border: 0;
-  border-radius: .25rem;
-  padding: .5rem 1rem;
-  font-size: .875rem;
-}
+  :is(:is([data-theme="dark"], .dark) .rootDetail-bRN7lX, :is([data-theme="dark"], .dark) .byline-root-error-detail) {
+    color: var(--gray-400);
+  }
 
-.rootButton-Dhbx5n:hover {
-  background-color: #b91c1c;
-}
+  :is(.rootButton-Dhbx5n, .byline-root-error-button) {
+    color: #fff;
+    cursor: pointer;
+    background-color: #dc2626;
+    border: 0;
+    border-radius: .25rem;
+    padding: .5rem 1rem;
+    font-size: .875rem;
+  }
+
+  .rootButton-Dhbx5n:hover {
+    background-color: #b91c1c;
+  }
 
-.byline-root-error-button:hover {
-  background-color: #b91c1c;
+  .byline-root-error-button:hover {
+    background-color: #b91c1c;
+  }
 }
 

package/dist/admin-shell/chrome/route-progress-bar_module.css

@@ -1,25 +1,29 @@
-:is(.bar-KT7kQq, .byline-route-progress-bar) {
-  z-index: 100;
-  background-color: var(--primary-500);
-  opacity: 0;
-  pointer-events: none;
-  will-change: width, opacity;
-  width: 0%;
-  height: 2px;
-  position: fixed;
-  top: 0;
-  left: 0;
-}
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components, byline-components, overrides, byline-utilities, utilities, byline-components.primitives;
 
-:is(.barVisible-qOhb8T, .byline-route-progress-bar-visible) {
-  opacity: 1;
-  width: 90%;
-  transition: width 8s cubic-bezier(0, .6, .1, 1), opacity .1s linear;
-}
+@layer byline-components.cms {
+  :is(.bar-KT7kQq, .byline-route-progress-bar) {
+    z-index: 100;
+    background-color: var(--primary-500);
+    opacity: 0;
+    pointer-events: none;
+    will-change: width, opacity;
+    width: 0%;
+    height: 2px;
+    position: fixed;
+    top: 0;
+    left: 0;
+  }
+
+  :is(.barVisible-qOhb8T, .byline-route-progress-bar-visible) {
+    opacity: 1;
+    width: 90%;
+    transition: width 8s cubic-bezier(0, .6, .1, 1), opacity .1s linear;
+  }
 
-:is(.barFinishing-Ifa7gF, .byline-route-progress-bar-finishing) {
-  opacity: 0;
-  width: 100%;
-  transition: width .18s ease-out, opacity .25s ease-out 80ms;
+  :is(.barFinishing-Ifa7gF, .byline-route-progress-bar-finishing) {
+    opacity: 0;
+    width: 100%;
+    transition: width .18s ease-out, opacity .25s ease-out 80ms;
+  }
 }