@expressivecss/expressive 0.10.1 → 0.12.0

package/dist/css/expressive.css

@@ -1906,6 +1906,18 @@
     box-shadow: none;
     cursor: default;
   }
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button):where(:not(.circle, .extend, .indicator-item, .chip .close, :is(.timepicker-container, .time-picker-container) :is(.am-btn, .pm-btn), :is(.button-group, .split-button, .toolbar, .navigation-bar, .navigation-rail, .snackbar) > *, header > :is(nav, .bar) > *, :is(.pagination, .tabs, .snackbar > nav, dialog > header) *)) {
+    height: auto;
+    min-height: var(--md-comp-filled-button-container-height);
+    max-width: 100%;
+    padding-block: 4px;
+    white-space: normal;
+    overflow-wrap: break-word;
+    text-align: center;
+  }
+  :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button), a.button, label.button):where(:not(.circle, .extend, .indicator-item, .chip .close, :is(.timepicker-container, .time-picker-container) :is(.am-btn, .pm-btn), :is(.button-group, .split-button, .toolbar, .navigation-bar, .navigation-rail, .snackbar) > *, header > :is(nav, .bar) > *, :is(.pagination, .tabs, .snackbar > nav, dialog > header) *)) > * {
+    min-width: 0;
+  }
   .button-group {
     --md-comp-button-group-between-space: 12px;
     --md-comp-button-group-item-shape-round: 9999px;
@@ -2963,7 +2975,7 @@
     inherits: false;
     initial-value: 0;
   }
-  header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) {
+  header:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) {
     --md-comp-top-app-bar-container-color: var(--md-sys-color-surface);
     --md-comp-top-app-bar-scrolled-container-color: var(--md-sys-color-surface-container);
     --md-comp-top-app-bar-headline-color: var(--md-sys-color-on-surface);
@@ -2977,7 +2989,7 @@
     border-radius: var(--md-comp-top-app-bar-container-shape);
     width: 100%;
   }
-  header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) {
+  header:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) {
     display: flex;
     align-items: center;
     box-sizing: border-box;
@@ -2986,23 +2998,23 @@
     padding-inline: 4px;
     margin: 0;
   }
-  header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(:is(h1, h2, h3, h4, h5, h6), hgroup) {
+  header:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(:is(h1, h2, h3, h4, h5, h6), hgroup) {
     flex: 1 1 auto;
     min-width: 0;
     margin: 0;
     padding-inline: 4px 12px;
   }
-  header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(:is(h1, h2, h3, h4, h5, h6), hgroup):first-child {
+  header:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(:is(h1, h2, h3, h4, h5, h6), hgroup):first-child {
     padding-inline-start: 12px;
   }
-  header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(:is(h1, h2, h3, h4, h5, h6), hgroup) {
+  header:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(:is(h1, h2, h3, h4, h5, h6), hgroup) {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     color: inherit;
   }
-  header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(h1, h2, h3, h4, h5, h6),
-  header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > hgroup > :is(h1, h2, h3, h4, h5, h6) {
+  header:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(h1, h2, h3, h4, h5, h6),
+  header:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > hgroup > :is(h1, h2, h3, h4, h5, h6) {
     margin: 0;
     color: inherit;
     font-family: var(--md-sys-typescale-title-large-font-family-name);
@@ -3011,7 +3023,7 @@
     line-height: var(--md-sys-typescale-title-large-line-height);
     letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);
   }
-  header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > hgroup {
+  header:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > hgroup {
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -3019,7 +3031,7 @@
     white-space: normal;
     text-overflow: unset;
   }
-  header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > hgroup > p {
+  header:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > hgroup > p {
     margin: 0;
     color: inherit;
     font-family: var(--md-sys-typescale-label-medium-font-family-name);
@@ -3028,7 +3040,7 @@
     line-height: var(--md-sys-typescale-label-medium-line-height);
     letter-spacing: var(--md-sys-typescale-label-medium-letter-spacing);
   }
-  header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(a, button):not(.button, .icon-button):not(.circle):not(.extra):has(> :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons):only-child) {
+  header:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(a, button):not(.button, .icon-button):not(.circle):not(.extra):has(> :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons):only-child) {
     display: inline-flex;
     flex: 0 0 auto;
     align-items: center;
@@ -3047,27 +3059,27 @@
     font: inherit;
     text-decoration: none;
   }
-  header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(a, button):not(.button, .icon-button):not(.circle):not(.extra):has(> :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons):only-child):focus-visible {
+  header:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(a, button):not(.button, .icon-button):not(.circle):not(.extra):has(> :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons):only-child):focus-visible {
     outline: 3px solid var(--md-sys-color-secondary);
     outline-offset: 2px;
   }
-  header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(a, button):not(.button, .icon-button):not(.circle):not(.extra):has(> :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons):only-child) > :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons) {
+  header:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(a, button):not(.button, .icon-button):not(.circle):not(.extra):has(> :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons):only-child) > :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons) {
     display: block;
     font-size: var(--md-comp-top-app-bar-leading-icon-size);
     width: var(--md-comp-top-app-bar-leading-icon-size);
     height: var(--md-comp-top-app-bar-leading-icon-size);
     line-height: var(--md-comp-top-app-bar-leading-icon-size);
   }
-  header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(a, button):not(.button, .icon-button):not(.circle):not(.extra):has(> :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons):only-child):hover {
+  header:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(a, button):not(.button, .icon-button):not(.circle):not(.extra):has(> :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons):only-child):hover {
     background-color: color-mix(in oklab, currentColor 8%, transparent);
   }
-  header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(a, button):not(.button, .icon-button):not(.circle):not(.extra):has(> :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons):only-child):active {
+  header:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(a, button):not(.button, .icon-button):not(.circle):not(.extra):has(> :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons):only-child):active {
     background-color: color-mix(in oklab, currentColor 10%, transparent);
   }
-  header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(:is(:is(h1, h2, h3, h4, h5, h6), hgroup), :is(.search-bar, .searchbar)) ~ :is(a, button):not(.button, .icon-button):not(.circle):not(.extra):has(> :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons):only-child) {
+  header:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(:is(:is(h1, h2, h3, h4, h5, h6), hgroup), :is(.search-bar, .searchbar)) ~ :is(a, button):not(.button, .icon-button):not(.circle):not(.extra):has(> :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons):only-child) {
     color: var(--md-comp-top-app-bar-trailing-icon-color);
   }
-  header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(menu, ul) {
+  header:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(menu, ul) {
     display: flex;
     align-items: stretch;
     align-self: stretch;
@@ -3075,11 +3087,11 @@
     margin: 0;
     padding: 0;
   }
-  header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(menu, ul) > li {
+  header:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(menu, ul) > li {
     display: flex;
     align-items: stretch;
   }
-  header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > ol {
+  header:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > ol {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -3090,7 +3102,7 @@
     margin: 0;
     padding-inline: 12px;
   }
-  header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > form {
+  header:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > form {
     display: flex;
     flex: 1 1 auto;
     align-items: center;
@@ -3098,7 +3110,7 @@
     min-width: 0;
     margin: 0;
   }
-  header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > form input {
+  header:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > form input {
     flex: 1 1 auto;
     min-width: 0;
     height: 100%;
@@ -3113,22 +3125,22 @@
     font-weight: var(--md-sys-typescale-body-large-font-weight);
     line-height: var(--md-sys-typescale-body-large-line-height);
   }
-  header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > form input:focus, header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > form input:focus-visible {
+  header:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > form input:focus, header:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > form input:focus-visible {
     outline: none;
     border: 0;
     box-shadow: none;
   }
-  header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(.search-bar, .searchbar) {
+  header:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(.search-bar, .searchbar) {
     flex: 1 1 auto;
     width: auto;
     min-width: 0;
     align-self: center;
     margin-block: 4px;
   }
-  header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(.search-bar, .searchbar) input {
+  header:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(.search-bar, .searchbar) input {
     text-align: center;
   }
-  header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > a:not(:has(> :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons):only-child)):not(.button, .icon-button):not(.circle):not(.breadcrumb), header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(menu, ul) > li > a {
+  header:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > a:not(:has(> :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons):only-child)):not(.button, .icon-button):not(.circle):not(.breadcrumb), header:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(menu, ul) > li > a {
     display: inline-flex;
     align-items: center;
     padding: 0 12px;
@@ -3140,14 +3152,14 @@
     line-height: var(--md-sys-typescale-label-large-line-height);
     letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
   }
-  header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > a:focus-visible:not(:has(> :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons):only-child)):not(.button, .icon-button):not(.circle):not(.breadcrumb), header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(menu, ul) > li > a:focus-visible {
+  header:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > a:focus-visible:not(:has(> :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons):only-child)):not(.button, .icon-button):not(.circle):not(.breadcrumb), header:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(menu, ul) > li > a:focus-visible {
     outline: 3px solid var(--md-sys-color-secondary);
     outline-offset: 2px;
   }
-  header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > a:hover:not(.active):not(:has(> :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons):only-child)):not(.button, .icon-button):not(.circle):not(.breadcrumb), header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(menu, ul) > li > a:hover:not(.active) {
+  header:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > a:hover:not(.active):not(:has(> :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons):only-child)):not(.button, .icon-button):not(.circle):not(.breadcrumb), header:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(menu, ul) > li > a:hover:not(.active) {
     background-color: color-mix(in oklab, currentColor 8%, transparent);
   }
-  header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > a.active:not(:has(> :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons):only-child)):not(.button, .icon-button):not(.circle):not(.breadcrumb), header:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(menu, ul) > li > a.active {
+  header:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > a.active:not(:has(> :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons):only-child)):not(.button, .icon-button):not(.circle):not(.breadcrumb), header:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar) > :is(menu, ul) > li > a.active {
     background-color: color-mix(in oklab, currentColor 10%, transparent);
   }
   header.center:not(.medium, .large):has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) > :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar),
@@ -3310,13 +3322,17 @@
     line-height: var(--md-sys-typescale-label-medium-line-height);
     letter-spacing: var(--md-sys-typescale-label-medium-letter-spacing);
   }
-  header.fixed:has(> :is(nav:not(.navigation-bar, .navigation-rail), .bar)) {
+  header:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) {
     position: sticky;
     top: 0;
     z-index: 997;
-    animation: top-app-bar-scroll linear both;
-    animation-timeline: scroll(root);
-    animation-range: 0 8px;
+  }
+  @supports (animation-timeline: scroll()) {
+    header:has(> :is(nav:not(.tabs, .navigation-bar, .navigation-rail), .bar)) {
+      animation: top-app-bar-scroll linear both;
+      animation-timeline: scroll(root);
+      animation-range: 0 8px;
+    }
   }
   @keyframes top-app-bar-scroll {
     to {
@@ -5933,12 +5949,6 @@
     border: 0;
     background: none;
   }
-  dialog > :is(form, nav):last-child > :is(button, a.button):not(.icon-button, .circle, .extend) {
-    max-width: 100%;
-    height: auto;
-    min-height: var(--md-comp-filled-button-container-height, 40px);
-    white-space: normal;
-  }
   dialog:not(.bottom,
   .bottom-sheet,
   .side-sheet,
@@ -6593,6 +6603,7 @@
     margin: 0;
     min-height: 32px;
     height: auto;
+    padding-block: 4px;
     padding-left: var(--padding);
     padding-right: var(--padding);
     font-size: var(--font-size);
@@ -6923,14 +6934,6 @@
   footer:not(:has(> nav:only-child)) > .container > small:last-child a:not(.button, .icon-button) {
     color: var(--md-sys-color-primary);
   }
-  body:has(> footer:not(:has(> nav:only-child))) {
-    min-height: 100dvh;
-    display: flex;
-    flex-direction: column;
-  }
-  body:has(> footer:not(:has(> nav:only-child))) > main {
-    flex: 1 0 auto;
-  }
   ::placeholder {
     color: var(--md-sys-color-on-surface-variant);
   }
@@ -7166,6 +7169,7 @@
     height: 1px;
     margin: -1px;
     padding: 0;
+    border: 0;
     overflow: hidden;
     clip-path: inset(50%);
     white-space: nowrap;
@@ -7178,23 +7182,31 @@
     width: 40px;
     margin: 5px 15px;
   }
-  :is(.datepicker-date-input, .date-picker-date-input) {
-    position: relative;
-    text-indent: -9999px;
-  }
-  :is(.datepicker-date-input, .date-picker-date-input)::after {
-    display: block;
-    position: absolute;
-    top: 1.1rem;
-    content: attr(data-date);
-    color: var(--input-color);
-    text-indent: 0;
-  }
-  :is(.datepicker-date-input, .date-picker-date-input):focus-visible {
-    text-indent: 0;
-  }
-  :is(.datepicker-date-input, .date-picker-date-input):focus-visible:after {
-    text-indent: -9999px;
+  @supports selector(::-webkit-datetime-edit) {
+    .field:has(> :is(.datepicker-date-input, .date-picker-date-input)):not(:has(> .display-docked)) {
+      isolation: isolate;
+    }
+    .field:has(> :is(.datepicker-date-input, .date-picker-date-input)) > :is(i, .prefix, .suffix) {
+      z-index: 1;
+    }
+    :is(.datepicker-date-input, .date-picker-date-input) {
+      position: relative;
+      text-indent: -9999px;
+    }
+    :is(.datepicker-date-input, .date-picker-date-input)::after {
+      display: block;
+      position: absolute;
+      top: 1.1rem;
+      content: attr(data-date);
+      color: var(--input-color);
+      text-indent: 0;
+    }
+    :is(.datepicker-date-input, .date-picker-date-input):focus-visible {
+      text-indent: 0;
+    }
+    :is(.datepicker-date-input, .date-picker-date-input):focus-visible:after {
+      text-indent: -9999px;
+    }
   }
   label:has(> [type=radio]),
   .radio {
@@ -7963,7 +7975,7 @@
   }
   .file-field {
     display: grid;
-    grid-template-columns: min-content auto;
+    grid-template-columns: fit-content(50%) minmax(0, 1fr);
     gap: 10px;
   }
   .file-field .file-path-wrapper {
@@ -7975,10 +7987,14 @@
   .file-field > label.button,
   .file-field > button,
   .file-field > .btn {
+    display: block;
+    align-content: center;
+    overflow-wrap: break-word;
     position: relative;
     overflow: hidden;
-    height: 3rem;
-    line-height: 3rem;
+    align-self: start;
+    min-height: 3rem;
+    min-width: 0;
   }
   .file-field span {
     cursor: pointer;
@@ -8016,7 +8032,6 @@
     --md-comp-slider-active-fraction: 0%;
     --md-comp-slider-start-fraction: 0%;
     --md-comp-slider-end-fraction: 100%;
-    --md-comp-slider-stop-count: 6;
   }
   :is(.slider, .range, .range-field, label:has(> [type=range])) {
     position: relative;
@@ -8292,24 +8307,40 @@
   :is(.slider, .range, .range-field, label:has(> [type=range])).vertical:has(> [type=range] ~ [type=range]) > [type=range]:first-of-type {
     clip-path: inset(calc(100% - var(--slider-split)) -24px -8px -24px);
   }
-  :is(.slider, .range, .range-field, label:has(> [type=range])).stops::after {
+  :is(.slider, .range, .range-field, label:has(> [type=range])).stops:not(.vertical)::after {
+    --_position: var(--md-comp-slider-active-position, var(--md-comp-slider-active-fraction));
+    --_start: calc(var(--_position) + var(--md-comp-slider-gap) + var(--md-comp-slider-handle-width) / 2);
+    --_end: calc(var(--_position) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2);
+    --_from: 0px;
+    --_to: var(--_end);
+    --_icon: 0px;
+    --_dot: calc(var(--md-comp-slider-handle-width) / 2);
     content: "";
     position: absolute;
     z-index: 1;
     left: 0;
-    top: 50%;
-    width: max(0px, var(--md-comp-slider-active-position, var(--md-comp-slider-active-fraction)) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2);
+    top: var(--md-comp-slider-track-center, 50%);
+    width: 100%;
     height: var(--md-comp-slider-track-height);
     translate: 0 -50%;
     pointer-events: none;
-    background-image: radial-gradient(circle var(--md-comp-slider-stop-size), var(--md-sys-color-on-primary) 99%, transparent);
-    background-size: calc(100% / max(1, var(--md-comp-slider-stop-count) - 1)) 100%;
-    background-repeat: repeat-x;
-    background-position: center;
+    background: radial-gradient(circle var(--md-comp-slider-stop-size) at var(--_dot) 50%, var(--md-sys-color-on-primary) 99%, transparent) 0 0/var(--md-comp-slider-stop-spacing, 0px) 100% repeat-x;
+    clip-path: inset(0 calc(100% - var(--_to)) 0 max(var(--_from), var(--_icon)));
+  }
+  :is(.slider, .range, .range-field, label:has(> [type=range])).stops:not(.vertical):has([type=range]:dir(rtl))::after {
+    --_dot: calc(100% - var(--md-comp-slider-handle-width) / 2);
+    background-position-x: right;
+    clip-path: inset(0 var(--_from) 0 max(100% - var(--_to), var(--_icon)));
+  }
+  :is(.slider, .range, .range-field, label:has(> [type=range])).stops.centered:not(.vertical)::after {
+    --_from: min(50% + var(--md-comp-slider-stop-size), var(--_start));
+    --_to: max(50% - var(--md-comp-slider-stop-size), var(--_end));
   }
-  :is(.slider, .range, .range-field, label:has(> [type=range])).stops.centered::after {
-    left: min(50%, var(--md-comp-slider-active-position, var(--md-comp-slider-active-fraction)));
-    width: max(0%, abs(50% - var(--md-comp-slider-active-position, var(--md-comp-slider-active-fraction))) - var(--md-comp-slider-gap) - var(--md-comp-slider-handle-width) / 2);
+  :is(.slider, .range, .range-field, label:has(> [type=range])).stops:not(.vertical):has(> :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons):first-child)::after {
+    --_icon: calc(var(--md-comp-slider-stop-inset) + var(--md-comp-slider-icon-size));
+  }
+  :is(.slider, .range, .range-field, label:has(> [type=range])).stops:has(> [type=range]:disabled)::after {
+    opacity: 0.38;
   }
   input[type=range] + .thumb {
     position: absolute;
@@ -8450,6 +8481,17 @@
   fieldset.rounded {
     --md-comp-fieldset-container-shape: 12px;
   }
+  fieldset.plain {
+    --md-comp-fieldset-container-color: transparent;
+    --md-comp-fieldset-outline-width: 0;
+    margin: 0;
+    padding: 0;
+  }
+  fieldset.plain > legend {
+    max-width: 100%;
+    margin-inline-start: 0;
+    padding-inline: 0;
+  }
   fieldset:disabled,
   fieldset[disabled] {
     --md-comp-fieldset-outline-color: color-mix(
@@ -8571,8 +8613,20 @@
     background-color: var(--md-comp-progress-indicator);
     border-radius: var(--md-comp-progress-shape);
   }
-  progress.progress:indeterminate::-webkit-progress-value, progress.progress:indeterminate::-moz-progress-bar {
-    background-color: transparent;
+  progress.progress:indeterminate::-moz-progress-bar {
+    width: 40%;
+    margin-inline-end: 60%;
+    animation: progress-indeterminate-moz 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+  }
+  @keyframes progress-indeterminate-moz {
+    from {
+      margin-inline-start: -40%;
+      margin-inline-end: 100%;
+    }
+    to {
+      margin-inline-start: 100%;
+      margin-inline-end: -40%;
+    }
   }
   .progress > .determinate {
     position: absolute;
@@ -8595,8 +8649,7 @@
     width: auto;
     animation: preloader-indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
   }
-  .progress > .indeterminate,
-  progress.progress:indeterminate {
+  .progress > .indeterminate {
     background-color: transparent;
   }
   .progress > .indeterminate::before, .progress > .indeterminate::after,
@@ -8705,6 +8758,7 @@
     progress.progress:indeterminate::-moz-progress-bar {
       background-color: CanvasText;
       width: 40%;
+      animation: none;
     }
     :is(.preloader, .progress.circular) {
       background: conic-gradient(CanvasText 0 90deg, transparent 90deg 360deg);
@@ -8733,6 +8787,9 @@
     .preloader {
       transform: none;
     }
+    progress.progress:indeterminate::-moz-progress-bar {
+      animation: none;
+    }
   }
   .carousel {
     --md-comp-carousel-height: 240px;
@@ -8788,7 +8845,6 @@
     scroll-snap-type: x mandatory;
     scroll-behavior: smooth;
     overscroll-behavior-inline: contain;
-    touch-action: pan-x;
     scrollbar-width: none;
   }
   .carousel > .carousel-track::-webkit-scrollbar {
@@ -9088,7 +9144,6 @@
     scroll-snap-type: y mandatory;
     overscroll-behavior-inline: auto;
     overscroll-behavior-block: contain;
-    touch-action: pan-y;
   }
   .carousel.full-screen .carousel-track > .carousel-item {
     flex: 0 0 100%;
@@ -9120,7 +9175,6 @@
     scroll-snap-type: x mandatory;
     overscroll-behavior-inline: contain;
     overscroll-behavior-block: auto;
-    touch-action: pan-x;
   }
   .carousel.full-screen.full-screen-horizontal .carousel-track > .carousel-item {
     flex: 0 0 var(--md-comp-carousel-large-item-width);
@@ -9144,7 +9198,9 @@
     .carousel > .carousel-track {
       cursor: grab;
     }
-    .carousel.dragging > .carousel-track {
+    .carousel.dragging > .carousel-track,
+    .carousel.uncontained.snap.dragging > .carousel-track,
+    .carousel.full-screen.full-screen-horizontal.dragging > .carousel-track {
       cursor: grabbing;
       scroll-behavior: auto;
       scroll-snap-type: none;
@@ -11142,6 +11198,12 @@
   .ml-0 {
     margin-left: 0 !important;
   }
+  .ms-0 {
+    margin-inline-start: 0 !important;
+  }
+  .me-0 {
+    margin-inline-end: 0 !important;
+  }
   .mx-0 {
     margin-left: 0 !important;
     margin-right: 0 !important;
@@ -11165,6 +11227,12 @@
   .ml-1 {
     margin-left: 0.25rem !important;
   }
+  .ms-1 {
+    margin-inline-start: 0.25rem !important;
+  }
+  .me-1 {
+    margin-inline-end: 0.25rem !important;
+  }
   .mx-1 {
     margin-left: 0.25rem !important;
     margin-right: 0.25rem !important;
@@ -11188,6 +11256,12 @@
   .ml-2 {
     margin-left: 0.5rem !important;
   }
+  .ms-2 {
+    margin-inline-start: 0.5rem !important;
+  }
+  .me-2 {
+    margin-inline-end: 0.5rem !important;
+  }
   .mx-2 {
     margin-left: 0.5rem !important;
     margin-right: 0.5rem !important;
@@ -11211,6 +11285,12 @@
   .ml-3 {
     margin-left: 0.75rem !important;
   }
+  .ms-3 {
+    margin-inline-start: 0.75rem !important;
+  }
+  .me-3 {
+    margin-inline-end: 0.75rem !important;
+  }
   .mx-3 {
     margin-left: 0.75rem !important;
     margin-right: 0.75rem !important;
@@ -11234,6 +11314,12 @@
   .ml-4 {
     margin-left: 1rem !important;
   }
+  .ms-4 {
+    margin-inline-start: 1rem !important;
+  }
+  .me-4 {
+    margin-inline-end: 1rem !important;
+  }
   .mx-4 {
     margin-left: 1rem !important;
     margin-right: 1rem !important;
@@ -11257,6 +11343,12 @@
   .ml-5 {
     margin-left: 1.5rem !important;
   }
+  .ms-5 {
+    margin-inline-start: 1.5rem !important;
+  }
+  .me-5 {
+    margin-inline-end: 1.5rem !important;
+  }
   .mx-5 {
     margin-left: 1.5rem !important;
     margin-right: 1.5rem !important;
@@ -11280,6 +11372,12 @@
   .ml-6 {
     margin-left: 3rem !important;
   }
+  .ms-6 {
+    margin-inline-start: 3rem !important;
+  }
+  .me-6 {
+    margin-inline-end: 3rem !important;
+  }
   .mx-6 {
     margin-left: 3rem !important;
     margin-right: 3rem !important;
@@ -11303,6 +11401,12 @@
   .ml-auto {
     margin-left: auto !important;
   }
+  .ms-auto {
+    margin-inline-start: auto !important;
+  }
+  .me-auto {
+    margin-inline-end: auto !important;
+  }
   .mx-auto {
     margin-left: auto !important;
     margin-right: auto !important;
@@ -11326,6 +11430,12 @@
   .pl-0 {
     padding-left: 0 !important;
   }
+  .ps-0 {
+    padding-inline-start: 0 !important;
+  }
+  .pe-0 {
+    padding-inline-end: 0 !important;
+  }
   .px-0 {
     padding-left: 0 !important;
     padding-right: 0 !important;
@@ -11349,6 +11459,12 @@
   .pl-1 {
     padding-left: 0.25rem !important;
   }
+  .ps-1 {
+    padding-inline-start: 0.25rem !important;
+  }
+  .pe-1 {
+    padding-inline-end: 0.25rem !important;
+  }
   .px-1 {
     padding-left: 0.25rem !important;
     padding-right: 0.25rem !important;
@@ -11372,6 +11488,12 @@
   .pl-2 {
     padding-left: 0.5rem !important;
   }
+  .ps-2 {
+    padding-inline-start: 0.5rem !important;
+  }
+  .pe-2 {
+    padding-inline-end: 0.5rem !important;
+  }
   .px-2 {
     padding-left: 0.5rem !important;
     padding-right: 0.5rem !important;
@@ -11395,6 +11517,12 @@
   .pl-3 {
     padding-left: 0.75rem !important;
   }
+  .ps-3 {
+    padding-inline-start: 0.75rem !important;
+  }
+  .pe-3 {
+    padding-inline-end: 0.75rem !important;
+  }
   .px-3 {
     padding-left: 0.75rem !important;
     padding-right: 0.75rem !important;
@@ -11418,6 +11546,12 @@
   .pl-4 {
     padding-left: 1rem !important;
   }
+  .ps-4 {
+    padding-inline-start: 1rem !important;
+  }
+  .pe-4 {
+    padding-inline-end: 1rem !important;
+  }
   .px-4 {
     padding-left: 1rem !important;
     padding-right: 1rem !important;
@@ -11441,6 +11575,12 @@
   .pl-5 {
     padding-left: 1.5rem !important;
   }
+  .ps-5 {
+    padding-inline-start: 1.5rem !important;
+  }
+  .pe-5 {
+    padding-inline-end: 1.5rem !important;
+  }
   .px-5 {
     padding-left: 1.5rem !important;
     padding-right: 1.5rem !important;
@@ -11464,6 +11604,12 @@
   .pl-6 {
     padding-left: 3rem !important;
   }
+  .ps-6 {
+    padding-inline-start: 3rem !important;
+  }
+  .pe-6 {
+    padding-inline-end: 3rem !important;
+  }
   .px-6 {
     padding-left: 3rem !important;
     padding-right: 3rem !important;
@@ -11472,29 +11618,6 @@
     padding-top: 3rem !important;
     padding-bottom: 3rem !important;
   }
-  .p-auto {
-    padding: auto !important;
-  }
-  .pt-auto {
-    padding-top: auto !important;
-  }
-  .pr-auto {
-    padding-right: auto !important;
-  }
-  .pb-auto {
-    padding-bottom: auto !important;
-  }
-  .pl-auto {
-    padding-left: auto !important;
-  }
-  .px-auto {
-    padding-left: auto !important;
-    padding-right: auto !important;
-  }
-  .py-auto {
-    padding-top: auto !important;
-    padding-bottom: auto !important;
-  }
   .gap-0 {
     gap: 0 !important;
   }
@@ -11519,6 +11642,18 @@
   .hide {
     display: none !important;
   }
+  .visually-hidden,
+  .visually-hidden-focusable:not(:focus-within) {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    margin: -1px !important;
+    padding: 0 !important;
+    border: 0 !important;
+    overflow: hidden !important;
+    clip-path: inset(50%) !important;
+    white-space: nowrap !important;
+  }
   @media (width < 600px) {
     .hide-on-compact-only,
     .hide-on-small-only,
@@ -11656,6 +11791,21 @@
   .flex-none {
     flex: none;
   }
+  .min-w-0 {
+    min-width: 0;
+  }
+  .min-h-0 {
+    min-height: 0;
+  }
+  .overflow-x-auto {
+    overflow-x: auto;
+  }
+  .overflow-y-auto {
+    overflow-y: auto;
+  }
+  .overflow-hidden {
+    overflow: hidden;
+  }
   .left-align {
     text-align: left;
   }
@@ -11665,6 +11815,12 @@
   .center-align {
     text-align: center;
   }
+  .start-align {
+    text-align: start;
+  }
+  .end-align {
+    text-align: end;
+  }
   .divider {
     height: 1px;
     overflow: hidden;
@@ -11681,6 +11837,15 @@
     margin-left: auto;
     margin-right: auto;
   }
+  .break-words {
+    overflow-wrap: anywhere;
+  }
+  .text-nowrap {
+    white-space: nowrap;
+  }
+  .text-wrap {
+    white-space: normal;
+  }
   .truncate {
     display: block;
     white-space: nowrap;