@expressivecss/expressive 0.2.0 → 0.3.0

package/dist/css/expressive.css

@@ -1461,15 +1461,15 @@
   :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).large.circle.halfway-fab,
   :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).btn-large.circle.halfway-fab {
     position: absolute;
-    right: 24px;
+    inset-inline-end: 24px;
     bottom: -28px;
   }
   .btn-floating.halfway-fab.left,
   :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).extra.circle.halfway-fab.left,
   :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).large.circle.halfway-fab.left,
   :where(button:not(.datepicker-day-button, .month-prev, .month-next, .indicator-item-btn), a.button, .btn, .btn-flat, .btn-large, .btn-small).btn-large.circle.halfway-fab.left {
-    right: auto;
-    left: 24px;
+    inset-inline-end: auto;
+    inset-inline-start: 24px;
   }
   .btn-floating:not(.large, .btn-large, .extra, .small, .btn-small) {
     width: 40px;
@@ -1494,207 +1494,401 @@
     cursor: default;
   }
   .fixed-action-btn {
+    --md-comp-fab-offset: 16px;
+    --md-comp-fab-z: 997;
+    --md-comp-fab-menu-gap: 16px;
+    --md-comp-fab-duration: 200ms;
+    --md-comp-fab-stagger: 40ms;
+    --md-comp-fab-easing: cubic-bezier(0.65, 0, 0.35, 1);
+    --md-comp-fab-travel: 64px;
+    --md-comp-fab-hidden-transform: scale(0)
+      translateY(calc(var(--md-comp-fab-travel) * (var(--i, 0) + 1)));
     position: fixed;
-    right: 23px;
-    bottom: 23px;
-    padding-top: 15px;
-    margin-bottom: 0;
-    z-index: 997;
+    inset-inline-end: var(--md-comp-fab-offset);
+    bottom: var(--md-comp-fab-offset);
+    z-index: var(--md-comp-fab-z);
+    padding-top: var(--md-comp-fab-menu-gap);
+    margin: 0;
+    overflow: visible;
+  }
+  .fixed-action-btn > :is(a, button) {
+    position: relative;
+    z-index: 1;
+  }
+  .fixed-action-btn :is(ul, menu) {
+    --n: 1;
+    position: absolute;
+    inset-inline: 0;
+    bottom: 64px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--md-comp-fab-menu-gap);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    visibility: hidden;
+    overflow: visible;
+    transition: visibility 0s calc(var(--md-comp-fab-duration) + var(--md-comp-fab-stagger) * (var(--n) - 1));
+  }
+  .fixed-action-btn :is(ul, menu):has(> :nth-child(2)) {
+    --n: 2;
+  }
+  .fixed-action-btn :is(ul, menu):has(> :nth-child(3)) {
+    --n: 3;
+  }
+  .fixed-action-btn :is(ul, menu):has(> :nth-child(4)) {
+    --n: 4;
+  }
+  .fixed-action-btn :is(ul, menu):has(> :nth-child(5)) {
+    --n: 5;
   }
-  .fixed-action-btn.active ul {
+  .fixed-action-btn :is(ul, menu):has(> :nth-child(6)) {
+    --n: 6;
+  }
+  .fixed-action-btn :is(ul, menu):has(> :nth-child(7)) {
+    --n: 7;
+  }
+  .fixed-action-btn :is(ul, menu):has(> :nth-child(8)) {
+    --n: 8;
+  }
+  .fixed-action-btn :is(ul, menu) li:nth-last-child(1) {
+    --i: 0;
+  }
+  .fixed-action-btn :is(ul, menu) li:nth-last-child(2) {
+    --i: 1;
+  }
+  .fixed-action-btn :is(ul, menu) li:nth-last-child(3) {
+    --i: 2;
+  }
+  .fixed-action-btn :is(ul, menu) li:nth-last-child(4) {
+    --i: 3;
+  }
+  .fixed-action-btn :is(ul, menu) li:nth-last-child(5) {
+    --i: 4;
+  }
+  .fixed-action-btn :is(ul, menu) li:nth-last-child(6) {
+    --i: 5;
+  }
+  .fixed-action-btn :is(ul, menu) li:nth-last-child(7) {
+    --i: 6;
+  }
+  .fixed-action-btn :is(ul, menu) li:nth-last-child(8) {
+    --i: 7;
+  }
+  .fixed-action-btn :is(ul, menu) :is(a, button) {
+    opacity: 0;
+    transform: var(--md-comp-fab-hidden-transform);
+    transition: opacity var(--md-comp-fab-duration) var(--md-comp-fab-easing), transform var(--md-comp-fab-duration) var(--md-comp-fab-easing);
+    transition-delay: calc(var(--md-comp-fab-stagger) * (var(--n) - 1 - var(--i, 0)));
+  }
+  .fixed-action-btn.active :is(ul, menu) {
     visibility: visible;
-    padding-left: 0;
-    list-style-type: none;
+    transition-delay: 0s;
+  }
+  .fixed-action-btn.active :is(ul, menu) :is(a, button) {
+    opacity: 1;
+    transform: none;
+    transition-delay: calc(var(--md-comp-fab-stagger) * var(--i, 0));
+  }
+  .fixed-action-btn.direction-left :is(ul, menu) li:nth-child(1), .fixed-action-btn.direction-right :is(ul, menu) li:nth-child(1), .fixed-action-btn.direction-bottom :is(ul, menu) li:nth-child(1) {
+    --i: 0;
+  }
+  .fixed-action-btn.direction-left :is(ul, menu) li:nth-child(2), .fixed-action-btn.direction-right :is(ul, menu) li:nth-child(2), .fixed-action-btn.direction-bottom :is(ul, menu) li:nth-child(2) {
+    --i: 1;
+  }
+  .fixed-action-btn.direction-left :is(ul, menu) li:nth-child(3), .fixed-action-btn.direction-right :is(ul, menu) li:nth-child(3), .fixed-action-btn.direction-bottom :is(ul, menu) li:nth-child(3) {
+    --i: 2;
+  }
+  .fixed-action-btn.direction-left :is(ul, menu) li:nth-child(4), .fixed-action-btn.direction-right :is(ul, menu) li:nth-child(4), .fixed-action-btn.direction-bottom :is(ul, menu) li:nth-child(4) {
+    --i: 3;
+  }
+  .fixed-action-btn.direction-left :is(ul, menu) li:nth-child(5), .fixed-action-btn.direction-right :is(ul, menu) li:nth-child(5), .fixed-action-btn.direction-bottom :is(ul, menu) li:nth-child(5) {
+    --i: 4;
+  }
+  .fixed-action-btn.direction-left :is(ul, menu) li:nth-child(6), .fixed-action-btn.direction-right :is(ul, menu) li:nth-child(6), .fixed-action-btn.direction-bottom :is(ul, menu) li:nth-child(6) {
+    --i: 5;
+  }
+  .fixed-action-btn.direction-left :is(ul, menu) li:nth-child(7), .fixed-action-btn.direction-right :is(ul, menu) li:nth-child(7), .fixed-action-btn.direction-bottom :is(ul, menu) li:nth-child(7) {
+    --i: 6;
+  }
+  .fixed-action-btn.direction-left :is(ul, menu) li:nth-child(8), .fixed-action-btn.direction-right :is(ul, menu) li:nth-child(8), .fixed-action-btn.direction-bottom :is(ul, menu) li:nth-child(8) {
+    --i: 7;
   }
   .fixed-action-btn.direction-left, .fixed-action-btn.direction-right {
-    padding: 0 0 0 15px;
+    padding: 0;
   }
-  .fixed-action-btn.direction-left ul, .fixed-action-btn.direction-right ul {
-    text-align: right;
-    right: 64px;
+  .fixed-action-btn.direction-left :is(ul, menu), .fixed-action-btn.direction-right :is(ul, menu) {
+    inset: auto;
     top: 50%;
-    transform: translateY(-50%);
-    height: 100%;
-    left: auto;
-    width: 500px;
+    translate: 0 -50%;
+    flex-direction: row;
+    width: max-content;
+    height: auto;
   }
-  .fixed-action-btn.direction-left ul li, .fixed-action-btn.direction-right ul li {
-    display: inline-block;
-    margin: 7.5px 15px 0 0;
+  .fixed-action-btn.direction-left {
+    --md-comp-fab-hidden-transform: scale(0)
+      translateX(calc(var(--md-comp-fab-travel) * (var(--i, 0) + 1)));
+    padding-inline-start: var(--md-comp-fab-menu-gap);
   }
-  .fixed-action-btn.direction-right {
-    padding: 0 15px 0 0;
+  .fixed-action-btn.direction-left :is(ul, menu) {
+    inset-inline-end: 64px;
+    flex-direction: row-reverse;
   }
-  .fixed-action-btn.direction-right ul {
-    text-align: left;
-    direction: rtl;
-    left: 64px;
-    right: auto;
+  .fixed-action-btn.direction-right {
+    --md-comp-fab-hidden-transform: scale(0)
+      translateX(calc(-1 * var(--md-comp-fab-travel) * (var(--i, 0) + 1)));
+    padding-inline-end: var(--md-comp-fab-menu-gap);
   }
-  .fixed-action-btn.direction-right ul li {
-    margin: 7.5px 0 0 15px;
+  .fixed-action-btn.direction-right :is(ul, menu) {
+    inset-inline-start: 64px;
   }
   .fixed-action-btn.direction-bottom {
-    padding: 0 0 15px 0;
+    --md-comp-fab-hidden-transform: scale(0)
+      translateY(calc(-1 * var(--md-comp-fab-travel) * (var(--i, 0) + 1)));
+    padding: 0 0 var(--md-comp-fab-menu-gap);
   }
-  .fixed-action-btn.direction-bottom ul {
+  .fixed-action-btn.direction-bottom :is(ul, menu) {
+    inset: auto;
     top: 64px;
     bottom: auto;
-    display: flex;
-    flex-direction: column-reverse;
-  }
-  .fixed-action-btn.direction-bottom ul li {
-    margin: 15px 0 0 0;
+    inset-inline: 0;
   }
   .fixed-action-btn.toolbar {
     padding: 0;
     height: 56px;
   }
-  .fixed-action-btn.toolbar.active > a i, .fixed-action-btn.toolbar.active > button i {
+  .fixed-action-btn.toolbar :is(ul, menu) :is(a, button) {
+    opacity: 1;
+    transform: none;
+    transition: opacity var(--md-comp-fab-duration);
+  }
+  .fixed-action-btn.toolbar.active {
+    inset-inline: 0;
+    bottom: 0;
+    width: 100%;
+    height: 56px;
+  }
+  .fixed-action-btn.toolbar.active > :is(a, button) > i {
     opacity: 0;
   }
-  .fixed-action-btn.toolbar ul {
+  .fixed-action-btn.toolbar.active :is(ul, menu) {
+    visibility: visible;
+    position: static;
     display: flex;
-    top: 0;
-    bottom: 0;
-    z-index: 1;
+    flex-direction: row;
+    width: 100%;
+    height: 100%;
+    gap: 0;
   }
-  .fixed-action-btn.toolbar ul li {
+  .fixed-action-btn.toolbar :is(ul, menu) li {
     flex: 1;
-    display: inline-block;
     margin: 0;
     height: 100%;
-    transition: none;
   }
-  .fixed-action-btn.toolbar ul li a,
-  .fixed-action-btn.toolbar ul li button {
-    display: block;
-    overflow: hidden;
-    position: relative;
+  .fixed-action-btn.toolbar :is(ul, menu) li :is(a, button) {
+    display: grid;
+    place-items: center;
     width: 100%;
     height: 100%;
-    background-color: transparent;
+    background: transparent;
     box-shadow: none;
     color: var(--md-sys-color-on-primary-container);
-    line-height: 56px;
-    z-index: 1;
-  }
-  .fixed-action-btn.toolbar ul li a i,
-  .fixed-action-btn.toolbar ul li button i {
-    line-height: inherit;
-  }
-  .fixed-action-btn ul {
-    left: 0;
-    right: 0;
-    text-align: center;
-    position: absolute;
-    bottom: 64px;
-    margin: 0;
-    visibility: hidden;
-  }
-  .fixed-action-btn ul li {
-    margin-bottom: 15px;
-  }
-  .fixed-action-btn ul a.btn-floating,
-  .fixed-action-btn ul button.btn-floating {
-    opacity: 0;
   }
   .fixed-action-btn .fab-backdrop {
     position: absolute;
-    top: 0;
-    left: 0;
+    inset: 0 auto auto 0;
     z-index: -1;
     width: 56px;
     height: 56px;
-    background-color: var(--md-sys-color-primary-container);
     border-radius: 16px;
+    background-color: var(--md-sys-color-primary-container);
     transform: scale(0);
   }
+  @media (hover: hover) {
+    .fixed-action-btn:not(.click-to-toggle):hover :is(ul, menu) {
+      visibility: visible;
+      transition-delay: 0s;
+    }
+    .fixed-action-btn:not(.click-to-toggle):hover :is(ul, menu) :is(a, button) {
+      opacity: 1;
+      transform: none;
+      transition-delay: calc(var(--md-comp-fab-stagger) * var(--i, 0));
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .fixed-action-btn {
+      --md-comp-fab-duration: 0s;
+      --md-comp-fab-stagger: 0s;
+    }
+  }
   .collection {
-    padding-left: 0;
-    list-style-type: none;
-    margin: 0.5rem 0 1rem 0;
-    border: 1px solid var(--md-sys-color-outline-variant);
-    border-radius: 2px;
+    --md-comp-collection-shape: 12px;
+    --md-comp-collection-container-color: var(--md-sys-color-surface);
+    --md-comp-collection-outline-color: var(--md-sys-color-outline-variant);
+    --md-comp-collection-item-height: 56px;
+    --md-comp-collection-item-padding: 16px;
+    --md-comp-collection-avatar-size: 40px;
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0.5rem 0 1rem;
     overflow: hidden;
-    position: relative;
+    list-style: none;
+    border: 1px solid var(--md-comp-collection-outline-color);
+    border-radius: var(--md-comp-collection-shape);
+    background-color: var(--md-comp-collection-container-color);
+    color: var(--md-sys-color-on-surface);
   }
-  .collection .collection-item {
-    background-color: transparent;
-    line-height: 1.5rem;
-    padding: 10px 20px;
-    margin: 0;
-    border-bottom: 1px solid var(--md-sys-color-outline-variant);
+  .collection > * + * {
+    border-top: 1px solid var(--md-comp-collection-outline-color);
   }
-  .collection .collection-item.avatar {
-    min-height: 84px;
-    padding-left: 72px;
-    position: relative;
+  .collection > :is(li, a, .collection-item, .collection-header) {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto auto;
+    align-items: center;
+    column-gap: 16px;
+    box-sizing: border-box;
+    min-height: var(--md-comp-collection-item-height);
+    margin: 0;
+    padding: 8px var(--md-comp-collection-item-padding);
+    background-color: transparent;
+    color: inherit;
+    text-decoration: none;
+    transition: background-color 0.2s ease-out;
   }
-  .collection .collection-item.avatar:not(.circle-clipper) > .circle,
-  .collection .collection-item.avatar :not(.circle-clipper) > .circle {
-    position: absolute;
-    width: 42px;
-    height: 42px;
+  .collection > :is(li, a, .collection-item, .collection-header) > :is(img, i).circle {
+    grid-column: 1;
+    grid-row: 1/-1;
+    box-sizing: border-box;
+    width: var(--md-comp-collection-avatar-size);
+    height: var(--md-comp-collection-avatar-size);
     overflow: hidden;
-    left: 15px;
-    display: inline-block;
-    vertical-align: middle;
+    object-fit: cover;
   }
-  .collection .collection-item.avatar i.circle {
-    font-size: 18px;
-    line-height: 42px;
-    color: #fff;
-    background-color: var(--md-sys-color-shadow);
+  .collection > :is(li, a, .collection-item, .collection-header) > i.circle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    line-height: 1;
+    color: var(--md-sys-color-on-primary-container);
+    background-color: var(--md-sys-color-primary-container);
     text-align: center;
   }
-  .collection .collection-item.avatar .title {
-    font-size: 16px;
+  .collection > :is(li, a, .collection-item, .collection-header) > .title {
+    grid-column: 2;
+    grid-row: 1;
+    min-width: 0;
+    font-family: var(--md-sys-typescale-title-medium-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
+    font-size: var(--md-sys-typescale-title-medium-font-size);
+    font-weight: var(--md-sys-typescale-title-medium-font-weight);
+    line-height: var(--md-sys-typescale-title-medium-line-height);
+    letter-spacing: var(--md-sys-typescale-title-medium-letter-spacing);
   }
-  .collection .collection-item.avatar p {
+  .collection > :is(li, a, .collection-item, .collection-header) > p {
+    grid-column: 2;
+    grid-row: 1;
+    min-width: 0;
     margin: 0;
+    color: var(--md-sys-color-on-surface-variant);
+    font-family: var(--md-sys-typescale-body-medium-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
+    font-size: var(--md-sys-typescale-body-medium-font-size);
+    font-weight: var(--md-sys-typescale-body-medium-font-weight);
+    line-height: var(--md-sys-typescale-body-medium-line-height);
+    letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
   }
-  .collection .collection-item.avatar .secondary-content {
-    position: absolute;
-    top: 16px;
-    right: 16px;
+  .collection > :is(li, a, .collection-item, .collection-header) > .title ~ p {
+    grid-row: 2;
   }
-  .collection .collection-item:last-child {
-    border-bottom: none;
+  .collection > :is(li, a, .collection-item, .collection-header) > :is(.secondary-content, .badge) {
+    grid-column: 3;
+    grid-row: 1/-1;
+    align-self: center;
+    justify-self: end;
   }
-  .collection .collection-item.active {
-    background-color: var(--md-sys-color-primary);
-    color: var(--md-sys-color-on-primary);
+  .collection > :is(li, a, .collection-item, .collection-header) > a:not(.secondary-content, .btn, .btn-floating, .badge) {
+    grid-column: 1/-1;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    min-width: 0;
+    color: inherit;
+    text-decoration: none;
   }
-  .collection .collection-item.active .secondary-content {
-    color: var(--md-sys-color-on-primary);
+  .collection > :is(li, a, .collection-item, .collection-header) > a:not(.secondary-content, .btn, .btn-floating, .badge) > .badge {
+    margin-inline-start: auto;
   }
-  .collection a.collection-item {
-    display: block;
-    transition: 0.25s;
-    color: var(--md-sys-color-primary);
+  .collection > :is(li, .collection-item):is(.avatar, :has(> .circle)),
+  .collection > a:has(> .circle) {
+    min-height: 72px;
   }
-  .collection a.collection-item:not(.active):hover {
-    background-color: rgba(0, 0, 0, 0.04);
+  .collection > :is(.collection-header, li:has(> :is(h1, h2, h3, h4, h5, h6))) {
+    min-height: 0;
+    padding-block: 12px;
   }
-  .collection.with-header .collection-header {
-    background-color: transparent;
-    border-bottom: 1px solid var(--md-sys-color-outline-variant);
-    padding: 10px 20px;
+  .collection > :is(.collection-header, li:has(> :is(h1, h2, h3, h4, h5, h6))) > :is(h1, h2, h3, h4, h5, h6) {
+    grid-column: 1/-1;
+    margin: 0;
+    font-family: var(--md-sys-typescale-title-medium-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
+    font-size: var(--md-sys-typescale-title-medium-font-size);
+    font-weight: var(--md-sys-typescale-title-medium-font-weight);
+    line-height: var(--md-sys-typescale-title-medium-line-height);
+    letter-spacing: var(--md-sys-typescale-title-medium-letter-spacing);
   }
-  .collection.with-header .collection-item {
-    padding-left: 30px;
+  .collection > a:focus-visible,
+  .collection > li > a:not(.secondary-content, .btn, .btn-floating):focus-visible {
+    outline: 3px solid var(--md-sys-color-secondary);
+    outline-offset: 2px;
   }
-  .collection.with-header .collection-item.avatar {
-    padding-left: 72px;
+  .collection > a:hover,
+  .collection > li:has(> a:not(.secondary-content, .btn, .btn-floating):hover) {
+    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
   }
-  .secondary-content {
-    float: right;
+  .collection > :is(.active, [aria-current=page]),
+  .collection > li:has(> [aria-current=page]) {
+    background-color: var(--md-sys-color-secondary-container);
+    color: var(--md-sys-color-on-secondary-container);
+  }
+  .collection > :is(.active, [aria-current=page]) .secondary-content:not(.btn, .btn-floating),
+  .collection > li:has(> [aria-current=page]) .secondary-content:not(.btn, .btn-floating) {
+    color: var(--md-sys-color-on-secondary-container);
+  }
+  .collection > :is(.active, [aria-current=page]) span.badge:not(.new),
+  .collection > li:has(> [aria-current=page]) span.badge:not(.new) {
+    color: var(--md-sys-color-on-secondary-container);
+  }
+  .collection > :is(.disabled, [aria-disabled=true]) {
+    pointer-events: none;
+    color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
+  }
+  .collection .secondary-content {
+    float: none;
+    margin-inline-start: auto;
+  }
+  .collection .secondary-content:focus-visible {
+    outline: 3px solid var(--md-sys-color-secondary);
+    outline-offset: 2px;
+  }
+  .collection .secondary-content:not(.btn, .btn-floating) {
+    color: var(--md-sys-color-primary);
+  }
+  .collection span.badge {
+    float: none;
+    margin-block: 0;
+    margin-inline-start: auto;
+  }
+  .collection.flush {
+    border: 0;
+    border-radius: 0;
+  }
+  .secondary-content:not(.btn, .btn-floating) {
     color: var(--md-sys-color-primary);
   }
   .collapsible .collection {
     margin: 0;
     border: none;
+    border-radius: 0;
   }
   :root {
     --bagde-height: 22px;
@@ -1735,8 +1929,10 @@
     height: var(--bagde-height);
     -webkit-font-smoothing: auto;
   }
-  .collection-item span.badge {
-    margin-top: calc(0.75rem - var(--bagde-height) * 0.5);
+  .collection span.badge {
+    float: none;
+    margin-block: 0;
+    margin-inline-start: auto;
   }
   .collapsible span.badge {
     margin-left: auto;
@@ -1745,7 +1941,7 @@
     margin-right: 7px;
     order: -1;
   }
-  .collapsible .active span.badge:not(.new) {
+  .collapsible :is(.active, [open]) span.badge:not(.new) {
     color: var(--md-sys-color-on-surface-variant);
   }
   .sidenav span.badge {
@@ -1756,11 +1952,70 @@
     float: none;
     margin-left: auto;
   }
-  /* This is needed for some mobile phones to display the Google Icon font properly */
-  .material-icons, .material-symbols-outlined,
-  .material-symbols-rounded, .material-symbols-sharp {
+  :root {
+    --md-icon-font-outlined: "Material Symbols Outlined";
+    --md-icon-font-rounded: "Material Symbols Rounded";
+    --md-icon-font-sharp: "Material Symbols Sharp";
+    --md-icon-font: var(--md-icon-font-outlined);
+    --md-icon-fill: 0;
+    --md-icon-weight: 400;
+    --md-icon-grade: 0;
+    --md-icon-optical-size: 24;
+  }
+  [icon-style=outlined] {
+    --md-icon-font: var(--md-icon-font-outlined);
+  }
+  [icon-style=rounded] {
+    --md-icon-font: var(--md-icon-font-rounded);
+  }
+  [icon-style=sharp] {
+    --md-icon-font: var(--md-icon-font-sharp);
+  }
+  .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons {
+    display: inline-block;
+    font-family: var(--md-icon-font);
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    user-select: none;
     text-rendering: optimizeLegibility;
     font-feature-settings: "liga";
+    -webkit-font-smoothing: antialiased;
+    font-variation-settings: "FILL" var(--md-icon-fill), "wght" var(--md-icon-weight), "GRAD" var(--md-icon-grade), "opsz" var(--md-icon-optical-size);
+  }
+  .material-symbols.tiny, .material-symbols-outlined.tiny, .material-symbols-rounded.tiny, .material-symbols-sharp.tiny, .material-icons.tiny {
+    font-size: 1rem;
+    --md-icon-optical-size: 20;
+  }
+  .material-symbols.small, .material-symbols-outlined.small, .material-symbols-rounded.small, .material-symbols-sharp.small, .material-icons.small {
+    font-size: 2rem;
+    --md-icon-optical-size: 24;
+  }
+  .material-symbols.medium, .material-symbols-outlined.medium, .material-symbols-rounded.medium, .material-symbols-sharp.medium, .material-icons.medium {
+    font-size: 4rem;
+    --md-icon-optical-size: 40;
+  }
+  .material-symbols.large, .material-symbols-outlined.large, .material-symbols-rounded.large, .material-symbols-sharp.large, .material-icons.large {
+    font-size: 6rem;
+    --md-icon-optical-size: 48;
+  }
+  .material-symbols-outlined {
+    --md-icon-font: var(--md-icon-font-outlined);
+  }
+  .material-symbols-rounded {
+    --md-icon-font: var(--md-icon-font-rounded);
+  }
+  .material-symbols-sharp {
+    --md-icon-font: var(--md-icon-font-sharp);
+  }
+  .icon-filled {
+    --md-icon-fill: 1;
   }
   header:has(> nav) {
     --md-comp-top-app-bar-container-color: var(--md-sys-color-surface);
@@ -1851,6 +2106,17 @@
     display: flex;
     align-items: stretch;
   }
+  header:has(> nav) > nav:not(.tabs) > ol {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    align-self: center;
+    flex: 1 1 auto;
+    min-width: 0;
+    list-style: none;
+    margin: 0;
+    padding-inline: 12px;
+  }
   header:has(> nav) > nav:not(.tabs) > form {
     display: flex;
     flex: 1 1 auto;
@@ -3334,68 +3600,132 @@
     border-radius: var(--md-comp-basic-dialog-container-shape) 0 0 var(--md-comp-basic-dialog-container-shape);
   }
   .collapsible {
-    padding-left: 0;
-    list-style-type: none;
-    border-top: 1px solid var(--md-sys-color-outline-variant);
-    border-right: 1px solid var(--md-sys-color-outline-variant);
-    border-left: 1px solid var(--md-sys-color-outline-variant);
-    margin: 0.5rem 0 1rem 0;
+    --md-comp-collapsible-shape: 12px;
+    --md-comp-collapsible-container-color: var(--md-sys-color-surface);
+    --md-comp-collapsible-outline-color: var(--md-sys-color-outline-variant);
+    --md-comp-collapsible-header-padding: 1rem;
+    --md-comp-collapsible-body-padding: 0 1rem;
+    --md-comp-collapsible-duration: 500ms;
+    --md-comp-collapsible-easing-open: cubic-bezier(0.65, 0, 0.35, 1);
+    --md-comp-collapsible-easing-close: cubic-bezier(0.65, 0, 0.35, 1);
+    --md-comp-collapsible-icon-size: 24px;
+    --md-comp-collapsible-popout-inset: 24px;
+    --md-comp-collapsible-popout-gap: 16px;
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0.5rem 0 1rem;
+    list-style: none;
+    overflow: hidden;
+    border: 1px solid var(--md-comp-collapsible-outline-color);
+    border-radius: var(--md-comp-collapsible-shape);
+    background-color: var(--md-comp-collapsible-container-color);
+    color: var(--md-sys-color-on-surface);
     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
   }
-  .collapsible-header {
+  .collapsible > :is(details, li) + :is(details, li) {
+    border-top: 1px solid var(--md-comp-collapsible-outline-color);
+  }
+  .collapsible :is(summary, .collapsible-header) {
     display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    width: 100%;
+    margin: 0;
+    padding: var(--md-comp-collapsible-header-padding);
+    border: 0;
+    background: none;
+    color: inherit;
+    font: inherit;
+    font-weight: inherit;
+    line-height: 1.5;
+    text-align: start;
+    list-style: none;
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
-    line-height: 1.5;
-    padding: 1rem;
-    border-bottom: 1px solid var(--md-sys-color-outline-variant);
   }
-  .collapsible-header:focus {
-    outline: 0;
+  .collapsible :is(summary, .collapsible-header)::-webkit-details-marker {
+    display: none;
+  }
+  .collapsible :is(summary, .collapsible-header):focus-visible {
+    outline: 3px solid var(--md-sys-color-secondary);
+    outline-offset: 2px;
   }
-  .collapsible-header i {
+  .collapsible :is(summary, .collapsible-header) > i {
     width: 2rem;
+    margin-right: 1rem;
     font-size: 1.6rem;
-    display: inline-block;
+    line-height: 1;
     text-align: center;
-    margin-right: 1rem;
   }
-  .collapsible-header::after {
-    content: "\e5cf";
-    margin-left: 0.5rem;
-    font-family: "Material Symbols Outlined", "Material Symbols Rounded", "Material Symbols Sharp", "Material Icons";
-    font-size: 25px;
-    line-height: 0.9;
+  .collapsible :is(summary, .collapsible-header)::after {
+    content: "expand_more";
+    flex-shrink: 0;
+    margin-inline-start: auto;
+    font-family: var(--md-icon-font);
+    font-size: var(--md-comp-collapsible-icon-size);
+    font-variation-settings: "FILL" var(--md-icon-fill), "wght" var(--md-icon-weight), "GRAD" var(--md-icon-grade), "opsz" var(--md-icon-optical-size);
+    line-height: 1;
     -webkit-font-smoothing: antialiased;
+    transition: transform var(--md-comp-collapsible-duration) var(--md-comp-collapsible-easing-close);
   }
-  .active .collapsible-header::after {
-    content: "\e5ce";
-  }
-  .keyboard-focused .collapsible-header:focus {
-    background-color: rgba(0, 0, 0, 0.12);
+  .collapsible :is(details[open] > summary, .active > .collapsible-header)::after {
+    transform: rotate(180deg);
+    transition-timing-function: var(--md-comp-collapsible-easing-open);
   }
-  .collapsible-header-content {
+  .collapsible .collapsible-header-content {
     flex-grow: 1;
   }
-  .collapsible-body {
-    max-height: 0;
-    border-bottom: 1px solid var(--md-sys-color-outline-variant);
+  .collapsible .collapsible-body {
+    display: grid;
+    grid-template-rows: 0fr;
     box-sizing: border-box;
-    padding: 0 2rem;
+    padding: var(--md-comp-collapsible-body-padding);
+    overflow: hidden;
+    transition: grid-template-rows var(--md-comp-collapsible-duration) var(--md-comp-collapsible-easing-close);
+  }
+  .collapsible .collapsible-body > * {
+    min-height: 0;
     overflow: hidden;
   }
+  .collapsible .active > .collapsible-body,
+  .collapsible details[open] > .collapsible-body {
+    grid-template-rows: 1fr;
+    transition-timing-function: var(--md-comp-collapsible-easing-open);
+  }
+  .collapsible details:not([open]) > .collapsible-body {
+    display: grid;
+  }
+  .collapsible.no-icon :is(summary, .collapsible-header)::after {
+    content: none;
+  }
   .collapsible.popout {
-    border: none;
-    box-shadow: none;
+    overflow: visible;
+    border: 0;
+    background: transparent;
+    box-shadow: none !important;
   }
-  .collapsible.popout > li {
-    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-    margin: 0 24px;
-    transition: margin 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  .collapsible.popout > :is(details, li) {
+    margin-inline: var(--md-comp-collapsible-popout-inset);
+    overflow: hidden;
+    border: 0;
+    border-radius: var(--md-comp-collapsible-shape);
+    background-color: var(--md-comp-collapsible-container-color);
+    transition: margin var(--md-comp-collapsible-duration) var(--md-comp-collapsible-easing-close);
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
+  }
+  .collapsible.popout > :is(details, li) + :is(details, li) {
+    border-top: 0;
   }
-  .collapsible.popout > li.active {
-    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
-    margin: 16px 0;
+  .collapsible.popout > :is(details[open], li.active) {
+    margin-block: var(--md-comp-collapsible-popout-gap);
+    margin-inline: 0;
+    transition-timing-function: var(--md-comp-collapsible-easing-open);
+    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .collapsible {
+      --md-comp-collapsible-duration: 0s;
+    }
   }
   .chip {
     --font-size: 14px;
@@ -3435,7 +3765,7 @@
     object-fit: cover;
     border-radius: 12px;
   }
-  .chip > .material-icons {
+  .chip > :is(.material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons) {
     font-size: var(--font-size-icon);
     color: var(--md-sys-color-on-surface-variant);
   }
@@ -3517,6 +3847,9 @@
     transition: opacity 0.4s;
     backface-visibility: hidden;
   }
+  .lightboxed:not(.circle) {
+    border-radius: 12px;
+  }
   .lightboxed:hover:not(.active) {
     opacity: 0.8;
   }
@@ -3547,28 +3880,103 @@
     z-index: 1000;
     -webkit-font-smoothing: antialiased;
   }
+  .parallax,
   .parallax-container {
+    --md-comp-parallax-height: 500px;
+    --md-comp-parallax-travel: 120px;
+    --md-comp-parallax-shape: 12px;
     position: relative;
+    isolation: isolate;
     overflow: hidden;
-    height: 500px;
+    box-sizing: border-box;
+    height: var(--md-comp-parallax-height);
+    margin: 0;
+    border-radius: var(--md-comp-parallax-shape);
+    view-timeline-name: --parallax;
+    view-timeline-axis: block;
   }
-  .parallax-container .parallax {
+  .parallax-container > .parallax {
     position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: -1;
+    inset: 0;
+    height: auto;
+    margin: 0;
+    border-radius: 0;
+    overflow: visible;
+    view-timeline-name: none;
   }
-  .parallax-container .parallax img {
-    opacity: 0;
+  .parallax > :is(img, video),
+  .parallax > picture,
+  .parallax-container .parallax > :is(img, video),
+  .parallax-container .parallax > picture {
     position: absolute;
-    left: 50%;
-    bottom: 0;
-    min-width: 100%;
-    min-height: 100%;
-    transform: translate3d(0, 0, 0);
-    transform: translateX(-50%);
+    inset: 0;
+    display: block;
+    width: 100%;
+    height: 100%;
+    border: 0;
+  }
+  .parallax > picture img,
+  .parallax-container .parallax > picture img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border: 0;
+  }
+  .parallax > :is(img, video),
+  .parallax > picture img,
+  .parallax-container .parallax > :is(img, video),
+  .parallax-container .parallax > picture img {
+    object-fit: cover;
+    object-position: center;
+  }
+  .parallax > :is(h1, h2, h3, h4, h5, h6),
+  .parallax > p {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    display: grid;
+    place-items: center;
+    margin: 0;
+    padding: 24px;
+    color: var(--md-sys-color-on-surface);
+    text-align: center;
+  }
+  .parallax > figcaption {
+    position: absolute;
+    inset: auto 0 0;
+    z-index: 1;
+    margin: 0;
+    padding: 16px 24px;
+    color: var(--md-sys-color-on-surface);
+    background: color-mix(in oklab, var(--md-sys-color-surface) 72%, transparent);
+  }
+  .parallax.max,
+  .parallax-container.max {
+    height: 100vh;
+    height: 100dvh;
+    border-radius: 0;
+  }
+  @supports (animation-timeline: view()) {
+    @media (prefers-reduced-motion: no-preference) {
+      .parallax > :is(img, video),
+      .parallax > picture img,
+      .parallax-container .parallax > :is(img, video),
+      .parallax-container .parallax > picture img {
+        height: calc(100% + 2 * var(--md-comp-parallax-travel));
+        inset: calc(-1 * var(--md-comp-parallax-travel)) 0 auto;
+        animation: parallax-shift linear both;
+        animation-timeline: --parallax;
+        animation-range: cover;
+      }
+    }
+  }
+  @keyframes parallax-shift {
+    from {
+      transform: translateY(var(--md-comp-parallax-travel));
+    }
+    to {
+      transform: translateY(calc(-1 * var(--md-comp-parallax-travel)));
+    }
   }
   .pin-top, .pin-bottom {
     position: relative;
@@ -5181,7 +5589,7 @@
   .sidenav li > a {
     /* TODO: Use special class in future like "mw-icon" */
   }
-  .sidenav li > a > .material-icons, .sidenav li > a > .material-symbols-outlined, .sidenav li > a > .material-symbols-rounded, .sidenav li > a > .material-symbols-sharp {
+  .sidenav li > a > :is(.material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons) {
     display: inline-flex;
     vertical-align: middle;
     margin-right: 12px;
@@ -5271,7 +5679,8 @@
       padding: var(--sidenav-padding) var(--sidenav-padding) 0;
     }
   }
-  .sidenav .collapsible-body {
+  .sidenav .collapsible-body,
+  .sidenav details::details-content {
     padding: 0;
   }
   .sidenav-overlay {
@@ -5287,15 +5696,22 @@
   }
   .sidenav .collapsible,
   .sidenav.sidenav-fixed .collapsible {
+    overflow: visible;
     border: none;
+    border-radius: 0;
+    background: transparent;
     box-shadow: none;
   }
   .sidenav .collapsible-header,
-  .sidenav.sidenav-fixed .collapsible-header {
+  .sidenav summary,
+  .sidenav.sidenav-fixed .collapsible-header,
+  .sidenav.sidenav-fixed summary {
     border: none;
   }
   .sidenav .collapsible-body,
-  .sidenav.sidenav-fixed .collapsible-body {
+  .sidenav details::details-content,
+  .sidenav.sidenav-fixed .collapsible-body,
+  .sidenav.sidenav-fixed details::details-content {
     border: none;
   }
   .progress {
@@ -5673,6 +6089,9 @@
     height: 400px;
     width: 100%;
   }
+  .slider:not(.fullscreen) .slides, .slider:not(.fullscreen) .slides li {
+    border-radius: 12px;
+  }
   .slider.fullscreen {
     height: 100%;
     width: 100%;
@@ -5767,167 +6186,300 @@
     border-radius: 50%;
     border-width: 0;
   }
-  .slider .indicators .indicator-item-btn.active {
+  .slider .indicators .indicator-item-btn.active {
+    background-color: var(--md-sys-color-primary);
+  }
+  .carousel {
+    --md-comp-carousel-height: 400px;
+    --md-comp-carousel-shape: 12px;
+    --md-comp-carousel-gap: 0px;
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+    height: var(--carousel-height, var(--md-comp-carousel-height));
+    border-radius: var(--md-comp-carousel-shape);
+  }
+  .carousel .carousel-item > img,
+  .carousel .carousel-item > video {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  .carousel .indicators {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    list-style: none;
+    position: absolute;
+    inset: auto 0 0;
+    z-index: 2;
+    margin: 0;
+    padding: 16px 0;
+    border: 0;
+    background: none;
+  }
+  .carousel .indicators .indicator-item {
+    appearance: none;
+    box-sizing: border-box;
+    display: block;
+    width: 8px;
+    height: 8px;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 45%, transparent);
+    cursor: pointer;
+    transition: background-color 0.2s ease-out;
+  }
+  .carousel .indicators .indicator-item:is(.active, [aria-current=true]) {
     background-color: var(--md-sys-color-primary);
   }
-  .carousel {
-    --carousel-height: 400px;
-    overflow: hidden;
-    position: relative;
-    width: 100%;
-    height: var(--carousel-height);
+  .carousel .indicators .indicator-item:focus-visible {
+    outline: 3px solid var(--md-sys-color-secondary);
+    outline-offset: 2px;
+  }
+  .carousel:not(.flat):not(.carousel-slider) {
     perspective: 500px;
     transform-style: preserve-3d;
     transform-origin: 0% 50%;
+    touch-action: pan-y;
   }
-  .carousel.carousel-slider {
+  .carousel:not(.flat):not(.carousel-slider) > .carousel-item {
+    visibility: hidden;
+    position: absolute;
     top: 0;
     left: 0;
+    width: calc(var(--carousel-height, var(--md-comp-carousel-height)) * 0.5);
+    height: calc(var(--carousel-height, var(--md-comp-carousel-height)) * 0.5);
+    overflow: hidden;
+    border-radius: var(--md-comp-carousel-shape);
+  }
+  .carousel.flat,
+  .carousel.carousel-slider {
+    overflow: hidden;
+    perspective: none;
+    transform: none;
+  }
+  .carousel.flat > .carousel-track,
+  .carousel.carousel-slider > .carousel-track {
+    display: flex;
+    gap: var(--md-comp-carousel-gap);
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-snap-type: x mandatory;
+    scroll-behavior: smooth;
+    touch-action: pan-x;
+    scrollbar-width: none;
+  }
+  .carousel.flat > .carousel-track::-webkit-scrollbar,
+  .carousel.carousel-slider > .carousel-track::-webkit-scrollbar {
+    display: none;
+  }
+  .carousel.flat .carousel-track > .carousel-item,
+  .carousel.carousel-slider .carousel-track > .carousel-item {
+    flex: 0 0 100%;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    position: relative;
+    visibility: visible;
+    scroll-snap-align: start;
+    scroll-snap-stop: always;
   }
+  .carousel.flat .carousel-fixed-item,
   .carousel.carousel-slider .carousel-fixed-item {
     position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 20px;
+    inset: auto 0 20px;
     z-index: 1;
   }
+  .carousel.flat .carousel-fixed-item.with-indicators,
   .carousel.carousel-slider .carousel-fixed-item.with-indicators {
     bottom: 68px;
   }
-  .carousel.carousel-slider .carousel-item {
-    width: 100%;
-    height: 100%;
-    min-height: var(--carousel-height);
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
+  .carousel.flat .carousel-item h2,
   .carousel.carousel-slider .carousel-item h2 {
-    font-size: 24px;
-    font-weight: 500;
-    line-height: 32px;
+    font-family: var(--md-sys-typescale-headline-small-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
+    font-size: var(--md-sys-typescale-headline-small-font-size);
+    font-weight: var(--md-sys-typescale-headline-small-font-weight);
+    line-height: var(--md-sys-typescale-headline-small-line-height);
+    letter-spacing: var(--md-sys-typescale-headline-small-letter-spacing);
+    margin: 0 0 8px;
   }
+  .carousel.flat .carousel-item p,
   .carousel.carousel-slider .carousel-item p {
-    font-size: 15px;
-  }
-  .carousel .carousel-item {
-    visibility: hidden;
-    width: calc(var(--carousel-height) * 0.5);
-    height: calc(var(--carousel-height) * 0.5);
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-  .carousel .carousel-item > img {
-    width: 100%;
-  }
-  .carousel .indicators {
-    padding-left: 0;
-    list-style-type: none;
-    position: absolute;
-    text-align: center;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    font-family: var(--md-sys-typescale-body-medium-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
+    font-size: var(--md-sys-typescale-body-medium-font-size);
+    font-weight: var(--md-sys-typescale-body-medium-font-weight);
+    line-height: var(--md-sys-typescale-body-medium-line-height);
+    letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
     margin: 0;
   }
-  .carousel .indicators .indicator-item {
-    display: inline-block;
-    position: relative;
-    cursor: pointer;
-    height: 8px;
-    width: 8px;
-    margin: 24px 4px;
-    background-color: rgba(255, 255, 255, 0.45);
-    transition: background-color 0.3s;
-    border-radius: 50%;
-  }
-  .carousel .indicators .indicator-item.active {
-    background-color: var(--md-ref-palette-primary100);
+  @media (prefers-reduced-motion: reduce) {
+    .carousel.flat > .carousel-track,
+    .carousel.carousel-slider > .carousel-track {
+      scroll-behavior: auto;
+    }
   }
   .carousel.scrolling .carousel-item .lightboxed,
-  .carousel .carousel-item:not(.active) .lightboxed {
+  .carousel-item:not(.active) .lightboxed {
     pointer-events: none;
   }
   .tap-target-wrapper {
-    width: 800px;
-    height: 800px;
+    --md-comp-tap-target-size: 480px;
+    --md-comp-tap-target-z: 1000;
+    --md-comp-tap-target-container-color: var(--md-sys-color-primary-container);
+    --md-comp-tap-target-supporting-color: var(--md-sys-color-on-primary-container);
+    --md-comp-tap-target-duration: 300ms;
+    --md-comp-tap-target-easing: cubic-bezier(0.65, 0, 0.35, 1);
+    --md-comp-tap-target-x: 50%;
+    --md-comp-tap-target-y: 50%;
+    --md-comp-tap-target-origin-size: 56px;
+    box-sizing: border-box;
     position: fixed;
-    z-index: 1000;
+    inset: auto;
+    left: var(--md-comp-tap-target-x);
+    top: var(--md-comp-tap-target-y);
+    translate: -50% -50%;
+    width: var(--md-comp-tap-target-size);
+    height: var(--md-comp-tap-target-size);
+    margin: 0;
+    padding: 0;
+    overflow: visible;
+    border: 0;
+    background: transparent;
+    color: var(--md-comp-tap-target-supporting-color);
     visibility: hidden;
-    transition: visibility 0s 0.3s;
+    pointer-events: none;
+    z-index: var(--md-comp-tap-target-z);
+    transition: visibility 0s var(--md-comp-tap-target-duration), overlay var(--md-comp-tap-target-duration) allow-discrete, display var(--md-comp-tap-target-duration) allow-discrete;
   }
-  .tap-target-wrapper.open {
+  .tap-target-wrapper:is(.open, :popover-open) {
     visibility: visible;
-    transition: visibility 0s;
+    pointer-events: none;
+    transition-delay: 0s;
   }
-  .tap-target-wrapper.open .tap-target {
+  .tap-target-wrapper:is(.open, :popover-open) .tap-target,
+  .tap-target-wrapper:is(.open, :popover-open) .feature-discovery {
     transform: scale(1);
-    opacity: 0.95;
-    transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1);
+    opacity: 1;
   }
-  .tap-target-wrapper.open .tap-target-wave::before {
+  .tap-target-wrapper:is(.open, :popover-open) .tap-target-wave::before {
     transform: scale(1);
   }
-  .tap-target-wrapper.open .tap-target-wave::after {
+  .tap-target-wrapper:is(.open, :popover-open) .tap-target-wave::after {
     visibility: visible;
     animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
-    transition: opacity 0.3s, transform 0.3s, visibility 0s 1s;
   }
-  .tap-target {
+  .tap-target,
+  .feature-discovery {
     position: absolute;
-    font-size: 1rem;
-    border-radius: 50%;
-    background-color: var(--md-sys-color-primary-container);
-    color: var(--md-sys-color-primary);
-    box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.14), 0 10px 50px 0 rgba(0, 0, 0, 0.12), 0 30px 10px -20px rgba(0, 0, 0, 0.2);
+    inset: 0;
+    display: grid;
+    box-sizing: border-box;
     width: 100%;
     height: 100%;
+    overflow: hidden;
+    border-radius: 50%;
+    background-color: var(--md-comp-tap-target-container-color);
+    color: var(--md-comp-tap-target-supporting-color);
     opacity: 0;
     transform: scale(0);
-    transition: transform 0.3s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.3s cubic-bezier(0.42, 0, 0.58, 1);
+    transition: transform var(--md-comp-tap-target-duration) var(--md-comp-tap-target-easing), opacity var(--md-comp-tap-target-duration) var(--md-comp-tap-target-easing);
+    box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
+    font-family: var(--md-sys-typescale-body-medium-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
+    font-size: var(--md-sys-typescale-body-medium-font-size);
+    font-weight: var(--md-sys-typescale-body-medium-font-weight);
+    line-height: var(--md-sys-typescale-body-medium-line-height);
+    letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
   }
   .tap-target-content {
     position: relative;
-    display: table-cell;
+    z-index: 1;
+    display: grid;
+    align-content: start;
+    gap: 8px;
+    box-sizing: border-box;
+    max-width: min(18rem, 52%);
+    padding: calc(var(--md-comp-tap-target-origin-size) * 0.5 + 20px);
+    pointer-events: auto;
+  }
+  .tap-target-content > :is(h1, h2, h3, h4, h5, h6) {
+    margin: 0;
+    color: inherit;
+    font-family: var(--md-sys-typescale-title-medium-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
+    font-size: var(--md-sys-typescale-title-medium-font-size);
+    font-weight: var(--md-sys-typescale-title-medium-font-weight);
+    line-height: var(--md-sys-typescale-title-medium-line-height);
+    letter-spacing: var(--md-sys-typescale-title-medium-letter-spacing);
+  }
+  .tap-target-content > p {
+    margin: 0;
+    color: inherit;
+  }
+  .tap-target-wrapper[data-edge^=top] .tap-target-content {
+    align-self: end;
+  }
+  .tap-target-wrapper[data-edge^=bottom] .tap-target-content {
+    align-self: start;
+  }
+  .tap-target-wrapper[data-edge$=left] .tap-target-content {
+    justify-self: end;
+  }
+  .tap-target-wrapper[data-edge$=right] .tap-target-content {
+    justify-self: start;
+  }
+  .tap-target-wrapper[data-edge$=center] .tap-target-content {
+    justify-self: center;
+    max-width: min(22rem, 80%);
+    text-align: center;
   }
   .tap-target-wave {
     position: absolute;
+    top: 50%;
+    left: 50%;
+    z-index: 0;
+    width: calc(var(--md-comp-tap-target-origin-size) * 2);
+    height: calc(var(--md-comp-tap-target-origin-size) * 2);
+    translate: -50% -50%;
     border-radius: 50%;
-    z-index: 10001;
+    pointer-events: none;
   }
   .tap-target-wave::before, .tap-target-wave::after {
     content: "";
-    display: block;
     position: absolute;
-    width: 100%;
-    height: 100%;
+    inset: 0;
+    display: block;
     border-radius: 50%;
     background-color: var(--md-sys-color-surface);
   }
   .tap-target-wave::before {
     transform: scale(0);
-    transition: transform 0.3s;
+    transition: transform var(--md-comp-tap-target-duration) var(--md-comp-tap-target-easing);
   }
   .tap-target-wave::after {
     visibility: hidden;
-    transition: opacity 0.3s, transform 0.3s, visibility 0s;
     z-index: -1;
   }
   .tap-target-origin {
-    top: 50%;
-    left: 50%;
-    z-index: 10002;
-    position: absolute !important;
-    transform: translate(-50%, -50%);
-  }
-  .tap-target-origin:not(.btn), .tap-target-origin:not(.btn):hover {
-    background: none;
+    z-index: calc(var(--md-comp-tap-target-z, 1000) + 2);
   }
   @media (width < 601px) {
-    .tap-target, .tap-target-wrapper {
-      width: 600px;
-      height: 600px;
+    .tap-target-wrapper {
+      --md-comp-tap-target-size: 360px;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .tap-target-wrapper {
+      --md-comp-tap-target-duration: 0s;
+    }
+    .tap-target-wrapper:is(.open, :popover-open) .tap-target-wave::after {
+      animation: none;
     }
   }
   .pulse {
@@ -6410,100 +6962,225 @@
       margin-top: 1.6rem;
     }
   }
+  nav:has(> ol):not(.pagination),
+  nav:has(> .breadcrumb),
   .breadcrumb-wrapper {
+    --md-comp-breadcrumb-label-color: var(--md-sys-color-on-surface-variant);
+    --md-comp-breadcrumb-current-color: var(--md-sys-color-on-surface);
+    --md-comp-breadcrumb-separator: "/";
+    --md-comp-breadcrumb-gap: 8px;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    color: var(--md-comp-breadcrumb-label-color);
+    font-family: var(--md-sys-typescale-body-small-font-family-name), -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
+    font-size: var(--md-sys-typescale-body-small-font-size);
+    font-weight: var(--md-sys-typescale-body-small-font-weight);
+    line-height: var(--md-sys-typescale-body-small-line-height);
+    letter-spacing: var(--md-sys-typescale-body-small-letter-spacing);
+  }
+  nav:has(> ol):not(.pagination).nowrap,
+  nav:has(> .breadcrumb).nowrap,
+  .breadcrumb-wrapper.nowrap {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+  nav:has(> ol):not(.pagination).nowrap::-webkit-scrollbar,
+  nav:has(> .breadcrumb).nowrap::-webkit-scrollbar,
+  .breadcrumb-wrapper.nowrap::-webkit-scrollbar {
+    display: none;
+  }
+  nav:has(> ol):not(.pagination) > ol,
+  nav:has(> .breadcrumb) > ol,
+  .breadcrumb-wrapper > ol {
     display: flex;
+    flex-wrap: inherit;
     align-items: center;
+    list-style: none;
+    min-width: 0;
+    margin: 0;
+    padding: 0;
   }
-  .breadcrumb {
+  nav:has(> ol):not(.pagination) > ol > li,
+  nav:has(> .breadcrumb) > ol > li,
+  .breadcrumb-wrapper > ol > li {
     display: inline-flex;
     align-items: center;
+    min-width: 0;
   }
-  .breadcrumb i,
-  .breadcrumb i.material-icons, .breadcrumb i.material-symbols-outlined,
-  .breadcrumb i.material-symbols-rounded, .breadcrumb i.material-symbols-sharp, .breadcrumb:before {
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
+  nav:has(> ol):not(.pagination) > ol > li:has(> [aria-current=page]),
+  nav:has(> .breadcrumb) > ol > li:has(> [aria-current=page]),
+  .breadcrumb-wrapper > ol > li:has(> [aria-current=page]) {
+    flex-shrink: 0;
+  }
+  nav:has(> ol):not(.pagination) > ol > li + li::before,
+  nav:has(> .breadcrumb) > ol > li + li::before,
+  .breadcrumb-wrapper > ol > li + li::before {
+    content: var(--md-comp-breadcrumb-separator);
+    margin-inline: var(--md-comp-breadcrumb-gap);
+    color: var(--md-comp-breadcrumb-label-color);
+  }
+  nav:has(> ol):not(.pagination) > .breadcrumb + .breadcrumb::before,
+  nav:has(> .breadcrumb) > .breadcrumb + .breadcrumb::before,
+  .breadcrumb-wrapper > .breadcrumb + .breadcrumb::before {
+    content: var(--md-comp-breadcrumb-separator);
+    margin-inline: var(--md-comp-breadcrumb-gap);
+    color: var(--md-comp-breadcrumb-label-color);
+  }
+  nav:has(> ol):not(.pagination) :is(a, .breadcrumb),
+  nav:has(> .breadcrumb) :is(a, .breadcrumb),
+  .breadcrumb-wrapper :is(a, .breadcrumb) {
+    display: inline-flex;
+    align-items: center;
+    min-height: 32px;
+    color: var(--md-comp-breadcrumb-label-color);
+    text-decoration: none;
   }
-  .breadcrumb:before {
-    content: "\e5cc";
-    font-family: "Material Symbols Outlined", "Material Symbols Rounded", "Material Symbols Sharp", "Material Icons";
+  nav:has(> ol):not(.pagination) :is(a, .breadcrumb):focus-visible,
+  nav:has(> .breadcrumb) :is(a, .breadcrumb):focus-visible,
+  .breadcrumb-wrapper :is(a, .breadcrumb):focus-visible {
+    outline: 3px solid var(--md-sys-color-secondary);
+    outline-offset: 2px;
   }
-  .breadcrumb:first-child:before {
-    visibility: hidden;
+  nav:has(> ol):not(.pagination) :is(a, .breadcrumb):hover,
+  nav:has(> .breadcrumb) :is(a, .breadcrumb):hover,
+  .breadcrumb-wrapper :is(a, .breadcrumb):hover {
+    color: var(--md-comp-breadcrumb-current-color);
+  }
+  nav:has(> ol):not(.pagination) [aria-current=page],
+  nav:has(> .breadcrumb) [aria-current=page],
+  .breadcrumb-wrapper [aria-current=page] {
+    color: var(--md-comp-breadcrumb-current-color);
+  }
+  nav:has(> ol):not(.pagination) i,
+  nav:has(> .breadcrumb) i,
+  .breadcrumb-wrapper i {
+    font-size: 1.125em;
+    margin-inline-end: 4px;
+  }
+  header:has(> nav) > nav:has(> ol):not(.pagination),
+  header:has(> nav) > nav:has(> .breadcrumb) {
+    --md-comp-breadcrumb-label-color: inherit;
+    --md-comp-breadcrumb-current-color: inherit;
+  }
+  .pagination {
+    --md-comp-pagination-size: 2rem;
+    --md-comp-pagination-shape: 2rem;
+    --md-comp-pagination-gap: 0px;
+    --md-comp-pagination-padding: 0.66rem;
+    --md-comp-pagination-icon-size: 2rem;
+    --md-comp-pagination-selected-color: var(--md-sys-color-primary);
+    --md-comp-pagination-selected-on-color: var(--md-sys-color-on-primary);
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    color: var(--md-sys-color-on-surface);
+    font-size: 1.2rem;
+    line-height: 1;
+  }
+  .pagination,
+  .pagination > :is(ul, ol) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--md-comp-pagination-gap);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  .pagination.nowrap, .pagination.nowrap > :is(ul, ol) {
+    flex-wrap: nowrap;
+    min-width: 0;
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+  .pagination.nowrap::-webkit-scrollbar, .pagination.nowrap > :is(ul, ol)::-webkit-scrollbar {
+    display: none;
   }
   .pagination li {
-    display: inline-block;
-    vertical-align: top;
+    display: flex;
+    flex-shrink: 0;
+    margin: 0;
+    padding: 0;
   }
-  .pagination li a {
+  .pagination :is(a, button) {
     box-sizing: border-box;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: var(--md-comp-filled-button-icon-label-space, 8px);
-    height: 2rem;
-    padding-left: 0.66rem;
-    padding-right: 0.66rem;
-    border: none;
-    border-radius: var(--md-comp-filled-button-container-shape, 20px);
-    font-family: var(--md-sys-typescale-label-large-font-family-name);
-    font-size: 1.2rem;
-    font-weight: var(--md-sys-typescale-label-large-font-weight);
-    line-height: var(--md-sys-typescale-label-large-line-height);
-    letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
+    gap: 4px;
+    min-width: var(--md-comp-pagination-size);
+    height: var(--md-comp-pagination-size);
+    padding: 0 var(--md-comp-pagination-padding);
+    border: 0;
+    border-radius: var(--md-comp-pagination-shape);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    line-height: inherit;
     text-decoration: none;
-    white-space: nowrap;
     cursor: pointer;
-    outline: 0;
-    user-select: none;
-    appearance: none;
     -webkit-tap-highlight-color: transparent;
-    transition: background-color 0.2s ease-out, box-shadow 0.2s ease-out;
-  }
-  .pagination li.active a {
-    color: var(--md-comp-filled-button-label-text-color, var(--md-sys-color-on-primary));
-    background-color: var(--md-comp-filled-button-container-color, var(--md-sys-color-primary));
-  }
-  .pagination li.active a:hover {
-    background-color: color-mix(in oklab, var(--md-sys-color-on-primary) 8%, var(--md-sys-color-primary));
+    transition: background-color 0.2s ease-out;
   }
-  .pagination li.active a:active, .pagination li.active a:focus {
-    background-color: color-mix(in oklab, var(--md-sys-color-on-primary) 10%, var(--md-sys-color-primary));
-  }
-  .pagination li.active a:focus-visible {
+  .pagination :is(a, button):focus-visible {
     outline: 3px solid var(--md-sys-color-secondary);
     outline-offset: 2px;
   }
-  .pagination li.disabled a {
-    box-shadow: none !important;
+  .pagination :is(a, button):hover {
+    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
+  }
+  .pagination :is(a, button):has(> span) {
+    width: auto;
+  }
+  .pagination :is(a, button) > i {
+    font-size: var(--md-comp-pagination-icon-size);
+    width: var(--md-comp-pagination-icon-size);
+    height: var(--md-comp-pagination-icon-size);
+    line-height: 1;
+  }
+  .pagination :is(a, button)[aria-current=page],
+  .pagination .active > :is(a, button),
+  .pagination li:has(> [aria-current=page]) > :is(a, button) {
+    background-color: var(--md-comp-pagination-selected-color);
+    color: var(--md-comp-pagination-selected-on-color);
+  }
+  .pagination :is(a, button)[aria-current=page]:hover,
+  .pagination .active > :is(a, button):hover,
+  .pagination li:has(> [aria-current=page]) > :is(a, button):hover {
+    background-color: color-mix(in oklab, var(--md-comp-pagination-selected-on-color) 8%, var(--md-comp-pagination-selected-color));
+  }
+  .pagination :is(a, button)[aria-disabled=true],
+  .pagination .disabled > :is(a, button) {
     color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
-    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 12%, transparent);
-    border-color: transparent;
+    background-color: transparent;
     pointer-events: none;
-    box-shadow: none;
     cursor: default;
   }
-  .pagination li i {
-    font-size: 2rem;
+  .pagination li > span {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--md-comp-pagination-size);
+    height: var(--md-comp-pagination-size);
+    color: var(--md-sys-color-on-surface-variant);
   }
-  .pagination li.pages ul li {
-    display: inline-block;
-    float: none;
+  .pagination .pages {
+    min-width: 0;
   }
-  @media (width < 993px) {
-    .pagination {
-      width: 100%;
-    }
-    .pagination li.prev,
-    .pagination li.next {
-      width: 10%;
-    }
-    .pagination li.pages {
-      width: 80%;
-      overflow: hidden;
-      white-space: nowrap;
-    }
+  .pagination .pages > :is(ul, ol) {
+    display: flex;
+    flex-wrap: inherit;
+    align-items: center;
+    gap: var(--md-comp-pagination-gap);
+    list-style: none;
+    min-width: 0;
+    margin: 0;
+    padding: 0;
   }
 }
 @layer utilities {