npm - @expressivecss/expressive - Versions diffs - 0.14.1 → 0.15.0 - Mend

@expressivecss/expressive 0.14.1 → 0.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (242) hide show

package/dist/css/expressive.css CHANGED Viewed

@@ -884,9 +884,6 @@
   }
   @media (width < 840px) {
     table.responsive-table {
-      width: 100%;
-      border-collapse: collapse;
-      border-spacing: 0;
       display: block;
       position: relative;
     }
@@ -898,12 +895,12 @@
       margin: 0;
       vertical-align: top;
     }
-    table.responsive-table th {
-      text-align: left;
-    }
     table.responsive-table thead {
       display: block;
       float: left;
+      /* sort out borders */
+      border: 0;
+      border-right: 1px solid var(--md-sys-color-outline-variant);
     }
     table.responsive-table thead tr {
       display: block;
@@ -930,19 +927,11 @@
     table.responsive-table td {
       display: block;
       min-height: 1.25em;
-      text-align: left;
     }
     table.responsive-table tr {
       border-bottom: none;
       padding: 0 10px;
     }
-    table.responsive-table {
-      /* sort out borders */
-    }
-    table.responsive-table thead {
-      border: 0;
-      border-right: 1px solid var(--md-sys-color-outline-variant);
-    }
   }
   html {
     font-family: var(--md-ref-typeface-plain), var(--md-ref-typeface-fallback);
@@ -1936,7 +1925,6 @@
     background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 12%, transparent);
     border-color: transparent;
     pointer-events: none;
-    box-shadow: none;
     cursor: default;
   }
   :where(button:not(.datepicker-day-button, .date-picker-day-button, .month-prev, .month-next, .chip, .icon-button, .map-marker, .maplibregl-popup-close-button, .maplibregl-ctrl-attrib-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) *)) {
@@ -1957,12 +1945,7 @@
     --md-comp-button-group-item-shape-square: 12px;
     --md-comp-button-group-pressed-item-shape: 8px;
     --md-comp-button-group-pressed-item-width-multiplier: .15;
-    --md-comp-button-group-motion: linear(
-      0, .056 5%, .1796 10%, .3252 15%, .4675 20%, .5936 25%,
-      .6988 30%, .7828 35%, .8475 40%, .8959 45%, .931 50%,
-      .9559 55%, .973 60%, .9845 65%, .9919 70%, .9965 75%,
-      .9992 80%, 1.0006 85%, 1.0013 90%, 1.0015 95%, 1.0015
-    );
+    --md-comp-button-group-motion: linear(0, 0.056 5%, 0.1796 10%, 0.3252 15%, 0.4675 20%, 0.5936 25%, 0.6988 30%, 0.7828 35%, 0.8475 40%, 0.8959 45%, 0.931 50%, 0.9559 55%, 0.973 60%, 0.9845 65%, 0.9919 70%, 0.9965 75%, 0.9992 80%, 1.0006 85%, 1.0013 90%, 1.0015 95%, 1.0015);
     display: flex;
     align-items: center;
     gap: var(--md-comp-button-group-between-space);
@@ -2281,7 +2264,6 @@
     box-shadow: none !important;
     color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
     pointer-events: none;
-    box-shadow: none;
     cursor: default;
     background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 10%, transparent);
     border-color: transparent;
@@ -2291,7 +2273,6 @@
     box-shadow: none !important;
     color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
     pointer-events: none;
-    box-shadow: none;
     cursor: default;
     background-color: transparent;
     border-color: var(--md-sys-color-outline-variant);
@@ -2336,14 +2317,12 @@
   .button-group.connected.square {
     --md-comp-button-group-container-shape: var(--md-comp-button-group-inner-corner-corner-size);
   }
-  .button-group.connected > :is(button, a.button) {
-    min-width: 48px;
-  }
   .button-group.connected > :is(button, a.button) {
     --_corner: var(--md-comp-button-group-inner-corner-corner-size);
     --_outer-corner: var(--md-comp-button-group-container-shape);
     --_round: calc(var(--md-comp-filled-button-container-height, 40px) / 2);
     flex: 1 1 0;
+    min-width: 48px;
     border-radius: var(--_corner);
   }
   .button-group.connected > :is(button, a.button).icon-button {
@@ -2969,33 +2948,18 @@
     line-height: 0;
     color: transparent;
   }
-  :is(i,
-  .material-symbols,
-  .material-symbols-outlined,
-  .material-symbols-rounded,
-  .material-symbols-sharp,
-  .material-icons) {
+  :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons) {
     position: relative;
     overflow: visible;
   }
-  :is(i,
-  .material-symbols,
-  .material-symbols-outlined,
-  .material-symbols-rounded,
-  .material-symbols-sharp,
-  .material-icons) > .badge {
+  :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons) > .badge {
     position: absolute;
     z-index: 1;
     inset-block-start: calc((100% - var(--md-comp-badge-icon-size)) / 2);
     inset-inline-end: calc((100% - var(--md-comp-badge-icon-size)) / 2);
     transform: translate(50%, -50%);
   }
-  :is(i,
-  .material-symbols,
-  .material-symbols-outlined,
-  .material-symbols-rounded,
-  .material-symbols-sharp,
-  .material-icons) > .badge:dir(rtl) {
+  :is(i, .material-symbols, .material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp, .material-icons) > .badge:dir(rtl) {
     transform: translate(-50%, -50%);
   }
   .list .badge,
@@ -4278,9 +4242,7 @@
     object-fit: cover;
     border-radius: var(--md-comp-card-media-shape);
   }
-  article > figure:where(:not(.line-chart, .column-chart, .bar-chart, .pie-chart, .heatmap-chart, .radar-chart, .radial-chart, .mixed-chart)) {
-    position: relative;
-  }
+  article > figure:where(:not(.line-chart, .column-chart, .bar-chart, .pie-chart, .heatmap-chart, .radar-chart, .radial-chart, .mixed-chart)),
   article > .primary-action > figure:where(:not(.line-chart, .column-chart, .bar-chart, .pie-chart, .heatmap-chart, .radar-chart, .radial-chart, .mixed-chart)) {
     position: relative;
   }
@@ -5381,21 +5343,11 @@
   menu[id] > li:not(.divider, .optgroup, .gap, .label):last-child {
     border-radius: var(--md-comp-menu-item-container-shape) var(--md-comp-menu-item-container-shape) var(--md-comp-menu-item-edge-shape) var(--md-comp-menu-item-edge-shape);
   }
-  menu[id] > li:not(.disabled,
-  [aria-disabled=true],
-  .divider,
-  .optgroup,
-  .gap,
-  .label):hover,
+  menu[id] > li:not(.disabled, [aria-disabled=true], .divider, .optgroup, .gap, .label):hover,
   menu[id] > li.active:not(.selected, [aria-selected=true], [aria-checked=true]) {
     background-color: color-mix(in oklab, var(--md-comp-menu-item-label-text-color) 8%, transparent);
   }
-  menu[id] > li:not(.disabled,
-  [aria-disabled=true],
-  .divider,
-  .optgroup,
-  .gap,
-  .label):active {
+  menu[id] > li:not(.disabled, [aria-disabled=true], .divider, .optgroup, .gap, .label):active {
     background-color: color-mix(in oklab, var(--md-comp-menu-item-label-text-color) 10%, transparent);
   }
   menu[id] > li:is(.selected, [aria-selected=true], [aria-checked=true]):not(.divider) {
@@ -5416,9 +5368,7 @@
   menu[id] > li:is(.selected, [aria-selected=true], [aria-checked=true]):hover {
     background-color: color-mix(in oklab, var(--md-comp-menu-item-selected-label-text-color) 8%, var(--md-comp-menu-item-selected-container-color));
   }
-  menu[id] > li:is(.selected, [aria-selected=true], [aria-checked=true]):is(:focus,
-  :focus-visible,
-  :active) {
+  menu[id] > li:is(.selected, [aria-selected=true], [aria-checked=true]):is(:focus, :focus-visible, :active) {
     background-color: color-mix(in oklab, var(--md-comp-menu-item-selected-label-text-color) 10%, var(--md-comp-menu-item-selected-container-color));
   }
   menu[id] > li:focus-visible {
@@ -5495,34 +5445,19 @@
   menu[id].grouped > li.gap {
     margin: 0;
   }
-  menu[id].grouped > li:not(.disabled,
-  [aria-disabled=true],
-  .divider,
-  .optgroup,
-  .gap,
-  .label):hover,
+  menu[id].grouped > li:not(.disabled, [aria-disabled=true], .divider, .optgroup, .gap, .label):hover,
   menu[id].grouped > li.active,
   menu[id].grouped > li.selected,
   menu[id].grouped > li[aria-selected=true],
   menu[id].grouped > li[aria-checked=true] {
     background-color: var(--md-comp-menu-container-color);
   }
-  menu[id].grouped > li:not(.disabled,
-  [aria-disabled=true],
-  .divider,
-  .optgroup,
-  .gap,
-  .label):hover > :is(a, button, span:not(.material-symbols):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp):not(.material-icons)),
+  menu[id].grouped > li:not(.disabled, [aria-disabled=true], .divider, .optgroup, .gap, .label):hover > :is(a, button, span:not(.material-symbols):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp):not(.material-icons)),
   menu[id].grouped > li.active:not(.selected, [aria-selected=true], [aria-checked=true]) > :is(a, button, span:not(.material-symbols):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp):not(.material-icons)) {
     border-radius: var(--md-comp-menu-item-container-shape);
     background-color: color-mix(in oklab, var(--md-comp-menu-item-label-text-color) 8%, transparent);
   }
-  menu[id].grouped > li:not(.disabled,
-  [aria-disabled=true],
-  .divider,
-  .optgroup,
-  .gap,
-  .label):active > :is(a, button, span:not(.material-symbols):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp):not(.material-icons)) {
+  menu[id].grouped > li:not(.disabled, [aria-disabled=true], .divider, .optgroup, .gap, .label):active > :is(a, button, span:not(.material-symbols):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp):not(.material-icons)) {
     background-color: color-mix(in oklab, var(--md-comp-menu-item-label-text-color) 10%, transparent);
   }
   menu[id].grouped > li:is(.selected, [aria-selected=true], [aria-checked=true]) > :is(a, button, span:not(.material-symbols):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp):not(.material-icons)) {
@@ -5532,9 +5467,7 @@
   menu[id].grouped > li:is(.selected, [aria-selected=true], [aria-checked=true]):hover > :is(a, button, span:not(.material-symbols):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp):not(.material-icons)) {
     background-color: color-mix(in oklab, var(--md-comp-menu-item-selected-label-text-color) 8%, var(--md-comp-menu-item-selected-container-color));
   }
-  menu[id].grouped > li:is(.selected, [aria-selected=true], [aria-checked=true]):is(:focus,
-  :focus-visible,
-  :active) > :is(a, button, span:not(.material-symbols):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp):not(.material-icons)) {
+  menu[id].grouped > li:is(.selected, [aria-selected=true], [aria-checked=true]):is(:focus, :focus-visible, :active) > :is(a, button, span:not(.material-symbols):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp):not(.material-icons)) {
     background-color: color-mix(in oklab, var(--md-comp-menu-item-selected-label-text-color) 10%, var(--md-comp-menu-item-selected-container-color));
   }
   menu[id] li:has(> menu) {
@@ -5745,21 +5678,11 @@
   menu[id] li > menu > li:not(.divider, .optgroup, .gap, .label):last-child {
     border-radius: var(--md-comp-menu-item-container-shape) var(--md-comp-menu-item-container-shape) var(--md-comp-menu-item-edge-shape) var(--md-comp-menu-item-edge-shape);
   }
-  menu[id] li > menu > li:not(.disabled,
-  [aria-disabled=true],
-  .divider,
-  .optgroup,
-  .gap,
-  .label):hover,
+  menu[id] li > menu > li:not(.disabled, [aria-disabled=true], .divider, .optgroup, .gap, .label):hover,
   menu[id] li > menu > li.active:not(.selected, [aria-selected=true], [aria-checked=true]) {
     background-color: color-mix(in oklab, var(--md-comp-menu-item-label-text-color) 8%, transparent);
   }
-  menu[id] li > menu > li:not(.disabled,
-  [aria-disabled=true],
-  .divider,
-  .optgroup,
-  .gap,
-  .label):active {
+  menu[id] li > menu > li:not(.disabled, [aria-disabled=true], .divider, .optgroup, .gap, .label):active {
     background-color: color-mix(in oklab, var(--md-comp-menu-item-label-text-color) 10%, transparent);
   }
   menu[id] li > menu > li:is(.selected, [aria-selected=true], [aria-checked=true]):not(.divider) {
@@ -5780,9 +5703,7 @@
   menu[id] li > menu > li:is(.selected, [aria-selected=true], [aria-checked=true]):hover {
     background-color: color-mix(in oklab, var(--md-comp-menu-item-selected-label-text-color) 8%, var(--md-comp-menu-item-selected-container-color));
   }
-  menu[id] li > menu > li:is(.selected, [aria-selected=true], [aria-checked=true]):is(:focus,
-  :focus-visible,
-  :active) {
+  menu[id] li > menu > li:is(.selected, [aria-selected=true], [aria-checked=true]):is(:focus, :focus-visible, :active) {
     background-color: color-mix(in oklab, var(--md-comp-menu-item-selected-label-text-color) 10%, var(--md-comp-menu-item-selected-container-color));
   }
   menu[id] li > menu > li:focus-visible {
@@ -5859,34 +5780,19 @@
   menu[id] li > menu.grouped > li.gap {
     margin: 0;
   }
-  menu[id] li > menu.grouped > li:not(.disabled,
-  [aria-disabled=true],
-  .divider,
-  .optgroup,
-  .gap,
-  .label):hover,
+  menu[id] li > menu.grouped > li:not(.disabled, [aria-disabled=true], .divider, .optgroup, .gap, .label):hover,
   menu[id] li > menu.grouped > li.active,
   menu[id] li > menu.grouped > li.selected,
   menu[id] li > menu.grouped > li[aria-selected=true],
   menu[id] li > menu.grouped > li[aria-checked=true] {
     background-color: var(--md-comp-menu-container-color);
   }
-  menu[id] li > menu.grouped > li:not(.disabled,
-  [aria-disabled=true],
-  .divider,
-  .optgroup,
-  .gap,
-  .label):hover > :is(a, button, span:not(.material-symbols):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp):not(.material-icons)),
+  menu[id] li > menu.grouped > li:not(.disabled, [aria-disabled=true], .divider, .optgroup, .gap, .label):hover > :is(a, button, span:not(.material-symbols):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp):not(.material-icons)),
   menu[id] li > menu.grouped > li.active:not(.selected, [aria-selected=true], [aria-checked=true]) > :is(a, button, span:not(.material-symbols):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp):not(.material-icons)) {
     border-radius: var(--md-comp-menu-item-container-shape);
     background-color: color-mix(in oklab, var(--md-comp-menu-item-label-text-color) 8%, transparent);
   }
-  menu[id] li > menu.grouped > li:not(.disabled,
-  [aria-disabled=true],
-  .divider,
-  .optgroup,
-  .gap,
-  .label):active > :is(a, button, span:not(.material-symbols):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp):not(.material-icons)) {
+  menu[id] li > menu.grouped > li:not(.disabled, [aria-disabled=true], .divider, .optgroup, .gap, .label):active > :is(a, button, span:not(.material-symbols):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp):not(.material-icons)) {
     background-color: color-mix(in oklab, var(--md-comp-menu-item-label-text-color) 10%, transparent);
   }
   menu[id] li > menu.grouped > li:is(.selected, [aria-selected=true], [aria-checked=true]) > :is(a, button, span:not(.material-symbols):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp):not(.material-icons)) {
@@ -5896,9 +5802,7 @@
   menu[id] li > menu.grouped > li:is(.selected, [aria-selected=true], [aria-checked=true]):hover > :is(a, button, span:not(.material-symbols):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp):not(.material-icons)) {
     background-color: color-mix(in oklab, var(--md-comp-menu-item-selected-label-text-color) 8%, var(--md-comp-menu-item-selected-container-color));
   }
-  menu[id] li > menu.grouped > li:is(.selected, [aria-selected=true], [aria-checked=true]):is(:focus,
-  :focus-visible,
-  :active) > :is(a, button, span:not(.material-symbols):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp):not(.material-icons)) {
+  menu[id] li > menu.grouped > li:is(.selected, [aria-selected=true], [aria-checked=true]):is(:focus, :focus-visible, :active) > :is(a, button, span:not(.material-symbols):not(.material-symbols-outlined):not(.material-symbols-rounded):not(.material-symbols-sharp):not(.material-icons)) {
     background-color: color-mix(in oklab, var(--md-comp-menu-item-selected-label-text-color) 10%, var(--md-comp-menu-item-selected-container-color));
   }
   menu[id] li > menu li:has(> menu) {
@@ -5954,10 +5858,6 @@
   menu[id] > li:focus-visible {
     background-color: color-mix(in oklab, var(--md-comp-menu-item-label-text-color) 10%, transparent);
   }
-  menu[id] > li:focus-visible:not(.selected, [aria-selected=true], [aria-checked=true]) {
-    outline: 3px solid var(--md-sys-color-secondary);
-    outline-offset: -3px;
-  }
   menu[id].grouped > li:focus-visible {
     background-color: var(--md-comp-menu-container-color);
   }
@@ -6912,7 +6812,6 @@
     outline: 0;
     margin: 0;
     padding: 0;
-    width: 120px;
     width: fit-content;
     min-width: 100px;
     max-width: 200px;
@@ -6927,12 +6826,10 @@
   }
   .prefix ~ .chips {
     margin-left: 3rem;
-    width: 92%;
     width: calc(100% - 3rem);
   }
   .suffix ~ .chips {
     margin-right: 3rem;
-    width: 92%;
     width: calc(100% - 3rem);
   }
   .chips:empty ~ label {
@@ -6957,10 +6854,7 @@
   }
   #lightbox-overlay {
     position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: 0;
     background-color: var(--md-sys-color-background);
     z-index: 1000;
     will-change: opacity;
@@ -7027,54 +6921,54 @@
     padding: 0;
     list-style: none;
   }
-  footer:not(:has(> nav:only-child)).filled,
-  footer:not(:has(> nav:only-child)).surface {
+  footer:not(:has(> .navigation-bar:only-child)).filled,
+  footer:not(:has(> .navigation-bar:only-child)).surface {
     background-color: var(--md-sys-color-surface-container);
     border-top: 1px solid var(--md-sys-color-outline-variant);
   }
-  footer:not(:has(> nav:only-child)) > .container,
-  footer:not(:has(> nav:only-child)):not(:has(> .container)) {
+  footer:not(:has(> .navigation-bar:only-child)) > .container,
+  footer:not(:has(> .navigation-bar:only-child)):not(:has(> .container)) {
     display: grid;
     gap: var(--md-comp-footer-gap);
     grid-template-columns: 1fr;
   }
   @media (width >= 600px) {
-    footer:not(:has(> nav:only-child)) > .container,
-    footer:not(:has(> nav:only-child)):not(:has(> .container)) {
+    footer:not(:has(> .navigation-bar:only-child)) > .container,
+    footer:not(:has(> .navigation-bar:only-child)):not(:has(> .container)) {
       grid-template-columns: repeat(2, 1fr);
     }
   }
   @media (width >= 840px) {
-    footer:not(:has(> nav:only-child)) > .container,
-    footer:not(:has(> nav:only-child)):not(:has(> .container)) {
+    footer:not(:has(> .navigation-bar:only-child)) > .container,
+    footer:not(:has(> .navigation-bar:only-child)):not(:has(> .container)) {
       grid-template-columns: repeat(4, 1fr);
     }
   }
   @media (width >= 1200px) {
-    footer:not(:has(> nav:only-child)) > .container,
-    footer:not(:has(> nav:only-child)):not(:has(> .container)) {
+    footer:not(:has(> .navigation-bar:only-child)) > .container,
+    footer:not(:has(> .navigation-bar:only-child)):not(:has(> .container)) {
       grid-template-columns: repeat(5, 1fr);
     }
   }
   @media (width >= 1600px) {
-    footer:not(:has(> nav:only-child)) > .container,
-    footer:not(:has(> nav:only-child)):not(:has(> .container)) {
+    footer:not(:has(> .navigation-bar:only-child)) > .container,
+    footer:not(:has(> .navigation-bar:only-child)):not(:has(> .container)) {
       grid-template-columns: repeat(6, 1fr);
     }
   }
-  footer:not(:has(> nav:only-child)) > .container > .row,
-  footer:not(:has(> nav:only-child)) > .row {
+  footer:not(:has(> .navigation-bar:only-child)) > .container > .row,
+  footer:not(:has(> .navigation-bar:only-child)) > .row {
     grid-column: 1/-1;
   }
-  footer:not(:has(> nav:only-child)) :is(nav, section) {
+  footer:not(:has(> .navigation-bar:only-child)) :is(nav, section) {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 0;
     min-width: 0;
   }
-  footer:not(:has(> nav:only-child)) nav > a:not(.button, .icon-button, .circle, .extra),
-  footer:not(:has(> nav:only-child)) ul a:not(.button, .icon-button, .circle, .extra) {
+  footer:not(:has(> .navigation-bar:only-child)) nav > a:not(.button, .icon-button, .circle, .extra),
+  footer:not(:has(> .navigation-bar:only-child)) ul a:not(.button, .icon-button, .circle, .extra) {
     display: inline-flex;
     align-items: center;
     box-sizing: border-box;
@@ -7088,12 +6982,12 @@
     line-height: var(--md-sys-typescale-label-large-line-height);
     letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
   }
-  footer:not(:has(> nav:only-child)) nav > a:not(.button, .icon-button, .circle, .extra):hover,
-  footer:not(:has(> nav:only-child)) ul a:not(.button, .icon-button, .circle, .extra):hover {
+  footer:not(:has(> .navigation-bar:only-child)) nav > a:not(.button, .icon-button, .circle, .extra):hover,
+  footer:not(:has(> .navigation-bar:only-child)) ul a:not(.button, .icon-button, .circle, .extra):hover {
     background-color: color-mix(in oklab, var(--md-sys-color-on-surface) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
   }
-  footer:not(:has(> nav:only-child)) > small:last-child,
-  footer:not(:has(> nav:only-child)) > .container > small:last-child {
+  footer:not(:has(> .navigation-bar:only-child)) > small:last-child,
+  footer:not(:has(> .navigation-bar:only-child)) > .container > small:last-child {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -7112,8 +7006,8 @@
     line-height: var(--md-sys-typescale-body-small-line-height);
     letter-spacing: var(--md-sys-typescale-body-small-letter-spacing);
   }
-  footer:not(:has(> nav:only-child)) > small:last-child a:not(.button, .icon-button),
-  footer:not(:has(> nav:only-child)) > .container > small:last-child a:not(.button, .icon-button) {
+  footer:not(:has(> .navigation-bar:only-child)) > small:last-child a:not(.button, .icon-button),
+  footer:not(:has(> .navigation-bar:only-child)) > .container > small:last-child a:not(.button, .icon-button) {
     color: var(--md-sys-color-primary);
   }
   ::placeholder {
@@ -8190,8 +8084,6 @@
   }
   .field:has(> .hide-select) > input.menu-trigger {
     border-radius: inherit;
-  }
-  .field:has(> .hide-select) > input.menu-trigger {
     padding-inline-end: 52px;
   }
   .field:has(> .hide-select) .caret {
@@ -8879,15 +8771,13 @@
     min-inline-size: 0;
     margin: 0;
     padding: 16px;
-  }
-  fieldset + fieldset {
-    margin-block-start: 24px;
-  }
-  fieldset {
     border: var(--md-comp-fieldset-outline-width) solid var(--md-comp-fieldset-outline-color);
     border-radius: var(--md-comp-fieldset-container-shape);
     background-color: var(--md-comp-fieldset-container-color);
   }
+  fieldset + fieldset {
+    margin-block-start: 24px;
+  }
   fieldset > legend {
     float: none;
     width: auto;
@@ -9804,7 +9694,6 @@
     display: block;
     font-size: 1.5rem;
     line-height: 25px;
-    color: var(--md-sys-color-on-primary);
   }
   :is(.datepicker-date-display, .date-picker-date-display) .date-text {
     display: block;
@@ -9845,12 +9734,6 @@
   :is(.datepicker-table, .date-picker-table) :is(.datepicker-day, .date-picker-day).is-today {
     color: var(--md-sys-color-primary);
   }
-  :is(.datepicker-table, .date-picker-table) :is(.datepicker-day, .date-picker-day) {
-    /*&.is-selected button {
-      background-color: var(--md-sys-color-primary);
-      color:  var(--md-sys-color-on-primary);
-    }*/
-  }
   :is(.datepicker-day, .date-picker-day).is-daterange-start,
   :is(.datepicker-day, .date-picker-day).is-daterange-end,
   :is(.datepicker-day, .date-picker-day).is-daterange {
@@ -9905,8 +9788,8 @@
     background-color: var(--md-sys-color-surface-variant);
     color: var(--md-sys-color-primary);
   }
-  :is(.datepicker-day-button, .date-picker-day-button).is-outside-current-month button, :is(.datepicker-day-button, .date-picker-day-button).is-disabled button {
-    color: var(--md-sys-color-on-surface);
+  :is(.is-outside-current-month, .is-disabled) :is(.datepicker-day-button, .date-picker-day-button) {
+    color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
     pointer-events: none;
   }
   /* Footer */
@@ -9950,7 +9833,6 @@
     text-align: left;
     color: var(--md-sys-color-on-surface-variant);
     font-weight: 400;
-    /*position: relative;*/
     user-select: none;
     padding: 1rem 1rem 1.3rem 1rem;
   }
@@ -9995,14 +9877,8 @@
     width: 1.6rem;
     text-align: center;
   }
-  /*input[type=text].text-primary {
-    color: var(--md-sys-color-on-background);
-  }*/
   :is(.timepicker-display-am-pm, .time-picker-display-am-pm) {
     font-size: 1.3rem;
-    /*position: absolute;
-    top: 1rem;
-    right: 1rem;*/
     font-weight: 400;
   }
   :is(.timepicker-span-am-pm, .time-picker-span-am-pm) {
@@ -10047,10 +9923,7 @@
   :is(.timepicker-canvas, .time-picker-canvas),
   :is(.timepicker-dial, .time-picker-dial) {
     position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
+    inset: 0;
   }
   :is(.timepicker-minutes, .time-picker-minutes) {
     visibility: hidden;
@@ -10093,10 +9966,7 @@
   :is(.timepicker-canvas-out, .time-picker-canvas-out) {
     opacity: 0.25;
   }
-  :is(.timepicker-canvas-bearing, .time-picker-canvas-bearing) {
-    stroke: none;
-    fill: var(--md-sys-color-primary);
-  }
+  :is(.timepicker-canvas-bearing, .time-picker-canvas-bearing),
   :is(.timepicker-canvas-bg, .time-picker-canvas-bg) {
     stroke: none;
     fill: var(--md-sys-color-primary);
@@ -10123,15 +9993,12 @@
     :is(.timepicker-container, .time-picker-container) {
       width: auto;
       max-width: 620px;
-    }
-    :is(.timepicker-container, .time-picker-container) {
       flex-direction: row;
     }
     :is(.timepicker-digital-display, .time-picker-digital-display) {
       padding: 0.67rem;
     }
     :is(.timepicker-text-container, .time-picker-text-container) {
-      /*top: 31%;*/
       flex-direction: column;
       margin-top: 4.8rem;
       text-align: center;
@@ -10150,19 +10017,11 @@
     :is(.timepicker-container, .time-picker-container) .am-btn,
     :is(.timepicker-container, .time-picker-container) .pm-btn {
       flex-grow: 1;
-      /*width: auto;*/
-      padding-inline: 0;
       border-radius: 0;
       border: 1px solid var(--md-sys-color-outline);
     }
-    :is(.timepicker-container, .time-picker-container) .am-btn {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
     :is(.timepicker-container, .time-picker-container) .pm-btn {
       border-left: 0;
-      border-bottom-left-radius: 0;
-      border-top-left-radius: 0;
     }
     :is(.timepicker-plate, .time-picker-plate) {
       margin-top: 1.6rem;
@@ -10559,7 +10418,6 @@
   .panes.floating > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane).elevated,
   .pane-layout.separated > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane).elevated,
   .pane-layout.floating > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane).elevated {
-    background-color: var(--md-sys-color-surface-container-low);
     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);
   }
   .panes.separated > :is(.pane, .list-pane, .primary-pane, .detail-pane, .supporting-pane).outlined,
@@ -10683,15 +10541,15 @@
     overscroll-behavior: contain;
     margin: 0;
   }
-  .pane > footer:not(:has(> nav:only-child)),
+  .pane > footer:not(:has(> .navigation-bar:only-child)),
   .pane > :is(footer, .pane-footer, nav:last-child),
-  .list-pane > footer:not(:has(> nav:only-child)),
+  .list-pane > footer:not(:has(> .navigation-bar:only-child)),
   .list-pane > :is(footer, .pane-footer, nav:last-child),
-  .primary-pane > footer:not(:has(> nav:only-child)),
+  .primary-pane > footer:not(:has(> .navigation-bar:only-child)),
   .primary-pane > :is(footer, .pane-footer, nav:last-child),
-  .detail-pane > footer:not(:has(> nav:only-child)),
+  .detail-pane > footer:not(:has(> .navigation-bar:only-child)),
   .detail-pane > :is(footer, .pane-footer, nav:last-child),
-  .supporting-pane > footer:not(:has(> nav:only-child)),
+  .supporting-pane > footer:not(:has(> .navigation-bar:only-child)),
   .supporting-pane > :is(footer, .pane-footer, nav:last-child) {
     display: flex;
     flex-wrap: wrap;
@@ -10704,15 +10562,15 @@
     padding: 8px 16px;
     border-block-start: 1px solid var(--md-comp-pane-divider-color);
   }
-  .pane > footer:not(:has(> nav:only-child)) > :is(button, a):not(.icon-button),
+  .pane > footer:not(:has(> .navigation-bar:only-child)) > :is(button, a):not(.icon-button),
   .pane > :is(footer, .pane-footer, nav:last-child) > :is(button, a):not(.icon-button),
-  .list-pane > footer:not(:has(> nav:only-child)) > :is(button, a):not(.icon-button),
+  .list-pane > footer:not(:has(> .navigation-bar:only-child)) > :is(button, a):not(.icon-button),
   .list-pane > :is(footer, .pane-footer, nav:last-child) > :is(button, a):not(.icon-button),
-  .primary-pane > footer:not(:has(> nav:only-child)) > :is(button, a):not(.icon-button),
+  .primary-pane > footer:not(:has(> .navigation-bar:only-child)) > :is(button, a):not(.icon-button),
   .primary-pane > :is(footer, .pane-footer, nav:last-child) > :is(button, a):not(.icon-button),
-  .detail-pane > footer:not(:has(> nav:only-child)) > :is(button, a):not(.icon-button),
+  .detail-pane > footer:not(:has(> .navigation-bar:only-child)) > :is(button, a):not(.icon-button),
   .detail-pane > :is(footer, .pane-footer, nav:last-child) > :is(button, a):not(.icon-button),
-  .supporting-pane > footer:not(:has(> nav:only-child)) > :is(button, a):not(.icon-button),
+  .supporting-pane > footer:not(:has(> .navigation-bar:only-child)) > :is(button, a):not(.icon-button),
   .supporting-pane > :is(footer, .pane-footer, nav:last-child) > :is(button, a):not(.icon-button) {
     min-width: 0;
     max-width: 100%;
@@ -11514,7 +11372,7 @@
   }
   .map .map-marker.location {
     --md-comp-map-marker-color: var(--md-sys-color-tertiary);
-    box-shadow: 0 0 0 8px color-mix(in srgb, var(--md-comp-map-marker-color) 24%, transparent);
+    box-shadow: 0 0 0 8px color-mix(in oklab, var(--md-comp-map-marker-color) 24%, transparent);
     cursor: default;
   }
   .map-marker-label {
@@ -11576,7 +11434,7 @@
     line-height: 1;
   }
   .map .maplibregl-popup-close-button:hover {
-    background-color: color-mix(in srgb, currentColor 8%, transparent) !important;
+    background-color: color-mix(in oklab, currentColor 8%, transparent) !important;
   }
   .map .maplibregl-popup-close-button:focus-visible {
     outline: 3px solid var(--md-sys-color-secondary);
@@ -12328,9 +12186,6 @@
     min-height: 16px;
     margin-block: 4px;
   }
-  .stepper.vertical > li:last-child::after {
-    content: none;
-  }
   .stepper.vertical > li > .stepper-content {
     grid-column: 2;
     grid-row: 3;
@@ -12867,6 +12722,7 @@
     min-width: 0;
     margin: 0.5rem 0 1rem;
     color: var(--md-sys-color-on-surface);
+    position: relative;
   }
   .line-chart > figcaption {
     color: var(--md-sys-color-on-surface-variant);
@@ -12876,9 +12732,6 @@
     line-height: var(--md-sys-typescale-title-small-line-height);
     letter-spacing: var(--md-sys-typescale-title-small-letter-spacing);
   }
-  .line-chart {
-    position: relative;
-  }
   .line-chart:has(> .line-chart-plot) > table {
     position: absolute;
     width: 1px;
@@ -13124,6 +12977,7 @@
     min-width: 0;
     margin: 0.5rem 0 1rem;
     color: var(--md-sys-color-on-surface);
+    position: relative;
   }
   .column-chart > figcaption {
     color: var(--md-sys-color-on-surface-variant);
@@ -13133,9 +12987,6 @@
     line-height: var(--md-sys-typescale-title-small-line-height);
     letter-spacing: var(--md-sys-typescale-title-small-letter-spacing);
   }
-  .column-chart {
-    position: relative;
-  }
   .column-chart:has(> .column-chart-plot) > table {
     position: absolute;
     width: 1px;
@@ -13378,7 +13229,7 @@
     z-index: -1;
     width: calc(100% / var(--rows, 1));
     border-radius: var(--md-comp-column-chart-shape);
-    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
+    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
     translate: -50% 0;
   }
   @media (forced-colors: active) {
@@ -13402,6 +13253,7 @@
     min-width: 0;
     margin: 0.5rem 0 1rem;
     color: var(--md-sys-color-on-surface);
+    position: relative;
   }
   .bar-chart > figcaption {
     color: var(--md-sys-color-on-surface-variant);
@@ -13411,9 +13263,6 @@
     line-height: var(--md-sys-typescale-title-small-line-height);
     letter-spacing: var(--md-sys-typescale-title-small-letter-spacing);
   }
-  .bar-chart {
-    position: relative;
-  }
   .bar-chart:has(> .bar-chart-plot) > table {
     position: absolute;
     width: 1px;
@@ -13763,7 +13612,7 @@
     inset-inline: 0;
     height: calc(100% / var(--rows, 1));
     border-radius: var(--md-comp-bar-chart-shape);
-    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
+    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
     translate: 0 -50%;
   }
   .bar-chart-tooltip {
@@ -13801,6 +13650,7 @@
     min-width: 0;
     margin: 0.5rem 0 1rem;
     color: var(--md-sys-color-on-surface);
+    position: relative;
   }
   .pie-chart > figcaption {
     color: var(--md-sys-color-on-surface-variant);
@@ -13810,9 +13660,6 @@
     line-height: var(--md-sys-typescale-title-small-line-height);
     letter-spacing: var(--md-sys-typescale-title-small-letter-spacing);
   }
-  .pie-chart {
-    position: relative;
-  }
   .pie-chart:has(> .pie-chart-plot) > table {
     position: absolute;
     width: 1px;
@@ -14167,6 +14014,7 @@
     min-width: 0;
     margin: 0.5rem 0 1rem;
     color: var(--md-sys-color-on-surface);
+    position: relative;
   }
   .heatmap-chart > figcaption {
     color: var(--md-sys-color-on-surface-variant);
@@ -14176,9 +14024,6 @@
     line-height: var(--md-sys-typescale-title-small-line-height);
     letter-spacing: var(--md-sys-typescale-title-small-letter-spacing);
   }
-  .heatmap-chart {
-    position: relative;
-  }
   .heatmap-chart:has(> .heatmap-chart-plot) > table {
     position: absolute;
     width: 1px;
@@ -14424,13 +14269,13 @@
     outline: 2px solid var(--md-sys-color-on-surface);
     outline-offset: 1px;
   }
+  .heatmap-chart-tooltip {
+    translate: 8px 0;
+  }
   .heatmap-chart-tooltip > span.gap::before {
     background: none;
     box-shadow: inset 0 0 0 1px var(--md-comp-heatmap-chart-grid-color);
   }
-  .heatmap-chart-tooltip {
-    translate: 8px 0;
-  }
   .heatmap-chart-tooltip.end {
     translate: calc(-100% - 8px) 0;
   }
@@ -14467,6 +14312,7 @@
     min-width: 0;
     margin: 0.5rem 0 1rem;
     color: var(--md-sys-color-on-surface);
+    position: relative;
   }
   .radar-chart > figcaption {
     color: var(--md-sys-color-on-surface-variant);
@@ -14476,9 +14322,6 @@
     line-height: var(--md-sys-typescale-title-small-line-height);
     letter-spacing: var(--md-sys-typescale-title-small-letter-spacing);
   }
-  .radar-chart {
-    position: relative;
-  }
   .radar-chart:has(> .radar-chart-plot) > table {
     position: absolute;
     width: 1px;
@@ -14801,6 +14644,7 @@
     min-width: 0;
     margin: 0.5rem 0 1rem;
     color: var(--md-sys-color-on-surface);
+    position: relative;
   }
   .radial-chart > figcaption {
     color: var(--md-sys-color-on-surface-variant);
@@ -14810,9 +14654,6 @@
     line-height: var(--md-sys-typescale-title-small-line-height);
     letter-spacing: var(--md-sys-typescale-title-small-letter-spacing);
   }
-  .radial-chart {
-    position: relative;
-  }
   .radial-chart:has(> .radial-chart-plot) > table {
     position: absolute;
     width: 1px;
@@ -15123,6 +14964,7 @@
     min-width: 0;
     margin: 0.5rem 0 1rem;
     color: var(--md-sys-color-on-surface);
+    position: relative;
   }
   .mixed-chart > figcaption {
     color: var(--md-sys-color-on-surface-variant);
@@ -15132,9 +14974,6 @@
     line-height: var(--md-sys-typescale-title-small-line-height);
     letter-spacing: var(--md-sys-typescale-title-small-letter-spacing);
   }
-  .mixed-chart {
-    position: relative;
-  }
   .mixed-chart:has(> .mixed-chart-plot) > table {
     position: absolute;
     width: 1px;
@@ -15388,7 +15227,7 @@
     inset: 0;
     z-index: -1;
     border-radius: var(--md-comp-mixed-chart-shape);
-    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
+    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent);
   }
   .mixed-chart-cursor > span {
     position: absolute;
@@ -15851,6 +15690,126 @@
     color: var(--md-sys-color-on-surface);
     pointer-events: none;
   }
+  :is(.keypad, .keyboard) {
+    --md-comp-keypad-key-color: var(--md-sys-color-surface-container-highest);
+    --md-comp-keypad-key-label-color: var(--md-sys-color-on-surface);
+    --md-comp-keypad-function-key-color: var(--md-sys-color-secondary-container);
+    --md-comp-keypad-function-key-label-color: var(--md-sys-color-on-secondary-container);
+    --md-comp-keypad-key-pressed-shape: 12px;
+    --md-comp-keypad-motion: linear(0, 0.056 5%, 0.1796 10%, 0.3252 15%, 0.4675 20%, 0.5936 25%, 0.6988 30%, 0.7828 35%, 0.8475 40%, 0.8959 45%, 0.931 50%, 0.9559 55%, 0.973 60%, 0.9845 65%, 0.9919 70%, 0.9965 75%, 0.9992 80%, 1.0006 85%, 1.0013 90%, 1.0015 95%, 1.0015);
+    touch-action: manipulation;
+  }
+  :is(.keypad, .keyboard) button {
+    --_color: var(--md-comp-keypad-key-color);
+    --_label: var(--md-comp-keypad-key-label-color);
+    min-width: 0;
+    padding: 0;
+    transition: border-radius 200ms var(--md-comp-keypad-motion), background-color 200ms ease-out;
+  }
+  :is(.keypad, .keyboard) button[data-key] {
+    --_color: var(--md-comp-keypad-function-key-color);
+    --_label: var(--md-comp-keypad-function-key-label-color);
+  }
+  :is(.keypad, .keyboard) button:hover {
+    --_state: calc(var(--md-sys-state-hover-state-layer-opacity) * 100%);
+  }
+  :is(.keypad, .keyboard) button:focus {
+    --_state: calc(var(--md-sys-state-focus-state-layer-opacity) * 100%);
+  }
+  :is(.keypad, .keyboard) button:active {
+    --_state: calc(var(--md-sys-state-pressed-state-layer-opacity) * 100%);
+  }
+  :is(.keypad, .keyboard) button:active:not(:disabled) {
+    border-radius: var(--md-comp-keypad-key-pressed-shape);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    :is(.keypad, .keyboard) button {
+      transition-property: background-color;
+    }
+  }
+  :is(.keypad, .keyboard) button:not(.filled, .tonal, .outlined, .elevated, .text, :disabled) {
+    color: var(--_label);
+    background-color: color-mix(in oklab, var(--_label) var(--_state, 0%), var(--_color));
+  }
+  :is(.keypad, .keyboard) [data-key=Shift][aria-pressed=true] {
+    --_color: var(--md-sys-color-primary);
+    --_label: var(--md-sys-color-on-primary);
+  }
+  .keypad {
+    --md-comp-keypad-key-size: 72px;
+    --md-comp-keypad-gap: 12px;
+    display: inline-grid;
+    grid-template-columns: repeat(3, var(--md-comp-keypad-key-size));
+    gap: var(--md-comp-keypad-gap);
+  }
+  .keypad button {
+    flex-direction: column;
+    gap: 0;
+    width: 100%;
+    height: var(--md-comp-keypad-key-size);
+    border-radius: calc(var(--md-comp-keypad-key-size) / 2);
+    font-family: var(--md-sys-typescale-headline-medium-font-family-name);
+    font-size: var(--md-sys-typescale-headline-medium-font-size);
+    font-weight: var(--md-sys-typescale-headline-medium-font-weight);
+    line-height: var(--md-sys-typescale-headline-medium-line-height);
+    letter-spacing: var(--md-sys-typescale-headline-medium-letter-spacing);
+  }
+  .keypad button.wide {
+    grid-column: span 2;
+  }
+  .keypad button > small {
+    font-family: var(--md-sys-typescale-label-small-font-family-name);
+    font-size: var(--md-sys-typescale-label-small-font-size);
+    font-weight: var(--md-sys-typescale-label-small-font-weight);
+    line-height: var(--md-sys-typescale-label-small-line-height);
+    letter-spacing: var(--md-sys-typescale-label-small-letter-spacing);
+    color: inherit;
+    opacity: 0.78;
+  }
+  .keyboard {
+    --md-comp-keyboard-columns: 10;
+    --md-comp-keyboard-gap: 6px;
+    --md-comp-keyboard-key-height: 48px;
+    --md-comp-keyboard-number-key-height: 40px;
+    --md-comp-keyboard-key-shape: 12px;
+    --md-comp-keypad-key-pressed-shape: 6px;
+    --md-comp-keyboard-container-color: var(--md-sys-color-surface-container);
+    --md-comp-keyboard-container-shape: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 8px;
+    border-radius: var(--md-comp-keyboard-container-shape);
+    background-color: var(--md-comp-keyboard-container-color);
+  }
+  .keyboard > :not([hidden]) {
+    --_unit: calc((100% - (var(--md-comp-keyboard-columns) - 1) * var(--md-comp-keyboard-gap)) / var(--md-comp-keyboard-columns));
+    display: flex;
+    justify-content: center;
+    gap: var(--md-comp-keyboard-gap);
+  }
+  .keyboard button {
+    flex: 0 1 var(--_unit);
+    height: var(--md-comp-keyboard-key-height);
+    border-radius: var(--md-comp-keyboard-key-shape);
+    font-family: var(--md-sys-typescale-title-medium-font-family-name);
+    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);
+  }
+  .keyboard button[data-key] {
+    flex-basis: calc(1.5 * var(--_unit) + 0.5 * var(--md-comp-keyboard-gap));
+  }
+  .keyboard button[value=" "] {
+    flex-grow: 1;
+  }
+  .keyboard > .numbers button {
+    height: var(--md-comp-keyboard-number-key-height);
+  }
+  .keyboard:has([data-key=Shift][aria-pressed=true]) button[value] {
+    text-transform: uppercase;
+  }
 }
 @layer utilities {
   .primary {