@revikornmann/muka-ui 0.19.0 → 0.20.0

package/dist/styles/components/Menu.css

@@ -138,7 +138,7 @@
 }
 
 .muka-menu__match {
-  font-weight: var(--font-weight-bold, 700);
+  font-weight: var(--text-label-md-bold-fontWeight);
 }
 
 .muka-menu__content--scrollbar {

package/dist/styles/components/Pagination.css

@@ -30,9 +30,9 @@
 
 /* Active page */
 .muka-pagination__button--active {
-  background-color: var(--button-color-primary-default-background);
-  color: var(--button-color-primary-default-foreground);
-  border-color: var(--button-color-primary-default-background);
+  background-color: var(--button-color-primary-background-default);
+  color: var(--button-color-primary-foreground-default);
+  border-color: var(--button-color-primary-background-default);
   font-weight: 600;
 }
 
@@ -63,37 +63,37 @@
 
 /* Size variants */
 .muka-pagination--sm .muka-pagination__button {
-  min-width: var(--button-height-sm);
-  height: var(--button-height-sm);
+  min-width: var(--size-2xl);
+  height: var(--size-2xl);
   font-size: var(--text-label-sm-regular-fontSize);
 }
 
 .muka-pagination--sm .muka-pagination__ellipsis {
-  min-width: var(--button-height-sm);
-  height: var(--button-height-sm);
+  min-width: var(--size-2xl);
+  height: var(--size-2xl);
   font-size: var(--text-label-sm-regular-fontSize);
 }
 
 .muka-pagination--md .muka-pagination__button {
-  min-width: var(--button-height-default);
-  height: var(--button-height-default);
+  min-width: var(--size-3xl);
+  height: var(--size-3xl);
   font-size: var(--text-label-md-regular-fontSize);
 }
 
 .muka-pagination--md .muka-pagination__ellipsis {
-  min-width: var(--button-height-default);
-  height: var(--button-height-default);
+  min-width: var(--size-3xl);
+  height: var(--size-3xl);
   font-size: var(--text-label-md-regular-fontSize);
 }
 
 .muka-pagination--lg .muka-pagination__button {
-  min-width: var(--button-height-lg);
-  height: var(--button-height-lg);
+  min-width: var(--size-4xl);
+  height: var(--size-4xl);
   font-size: var(--text-label-lg-regular-fontSize);
 }
 
 .muka-pagination--lg .muka-pagination__ellipsis {
-  min-width: var(--button-height-lg);
-  height: var(--button-height-lg);
+  min-width: var(--size-4xl);
+  height: var(--size-4xl);
   font-size: var(--text-label-lg-regular-fontSize);
 }

package/dist/styles/components/PhotoUploader.css

@@ -79,10 +79,10 @@
 }
 
 .muka-photo-uploader__dropzone-text {
-  font-family: var(--text-body-md-regular-fontFamily);
-  font-size: var(--text-body-md-regular-fontSize);
-  font-weight: var(--text-body-md-regular-fontWeight);
-  line-height: var(--text-body-md-regular-lineHeight);
+  font-family: var(--text-body-base-regular-fontFamily);
+  font-size: var(--text-body-base-regular-fontSize);
+  font-weight: var(--text-body-base-regular-fontWeight);
+  line-height: var(--text-body-base-regular-lineHeight);
   color: var(--color-text-subtle-default);
 }
 

package/dist/styles/components/ProgressAccordeon.css

@@ -13,16 +13,18 @@
 
 /* Per-state gap: content-bearing steps are tighter, header-only steps looser */
 .muka-progress-accordeon--current,
-.muka-progress-accordeon--past.muka-progress-accordeon--expanded {
+.muka-progress-accordeon--past.muka-progress-accordeon--expanded,
+.muka-progress-accordeon--upcoming.muka-progress-accordeon--expanded {
   gap: var(--spacing-6);
 }
 
 .muka-progress-accordeon--upcoming,
-.muka-progress-accordeon--past.muka-progress-accordeon--collapsed {
+.muka-progress-accordeon--past.muka-progress-accordeon--collapsed,
+.muka-progress-accordeon--upcoming.muka-progress-accordeon--collapsed {
   gap: var(--spacing-8);
 }
 
-/* Past steps group header + slot. The header↔content gap lives inside the
+/* Collapsible steps group header + slot. The header↔content gap lives inside the
    collapsing slot (as padding-top) so it collapses with the content, so the
    body gap itself is 0. */
 .muka-progress-accordeon__body {
@@ -56,8 +58,10 @@
   gap: var(--spacing-4);
 }
 
-/* Past steps carry 40px controls; nudge the heading to vertically centre it */
-.muka-progress-accordeon--past .muka-progress-accordeon__heading-group {
+/* Steps with header controls (edit / chevron) are 40px tall; nudge the heading
+   so a single line centres against the indicator + controls row. */
+.muka-progress-accordeon:has(.muka-progress-accordeon__controls)
+  .muka-progress-accordeon__heading-group {
   padding-top: var(--spacing-1);
 }
 
@@ -161,7 +165,7 @@
   width: 100%;
 }
 
-/* ─── Collapse/expand animation (past steps) ─────────────────
+/* ─── Collapse/expand animation (past & upcoming steps) ──────
    The grid-template-rows 1fr → 0fr technique animates the content to/from its
    intrinsic (auto) height with no magic max-height. Under prefers-reduced-motion
    --motion-duration-view resolves to 0ms, so the toggle stays instant. */

package/dist/styles/components/SearchInput.css

@@ -80,10 +80,10 @@
   outline: none;
   padding: 0;
   color: var(--color-text-default-default);
-  font-family: var(--text-body-md-regular-fontFamily);
-  font-weight: var(--text-body-md-regular-fontWeight);
-  font-size: var(--text-body-md-regular-fontSize);
-  line-height: var(--text-body-md-regular-lineHeight);
+  font-family: var(--text-body-base-regular-fontFamily);
+  font-weight: var(--text-body-base-regular-fontWeight);
+  font-size: var(--text-body-base-regular-fontSize);
+  line-height: var(--text-body-base-regular-lineHeight);
   appearance: none;
   -webkit-appearance: none;
 }

package/dist/styles/components/Select.css

@@ -38,7 +38,7 @@
 }
 
 .muka-select__required {
-  color: var(--color-state-error-foreground);
+  color: var(--color-state-error-default);
 }
 
 .muka-select__label--sm + .muka-select__field--disabled,
@@ -186,6 +186,6 @@
   font-weight: var(--text-label-sm-regular-fontWeight);
   font-size: var(--text-label-sm-regular-fontSize);
   line-height: var(--text-label-sm-regular-lineHeight);
-  color: var(--color-state-error-foreground);
+  color: var(--color-state-error-default);
   margin: 0;
 }

package/dist/styles/components/SmsOtpField.css

@@ -35,7 +35,7 @@
 }
 
 .muka-sms-otp-field__required {
-  color: var(--color-state-error-foreground);
+  color: var(--color-state-error-default);
 }
 
 /* Hidden input for browser autofill */
@@ -184,6 +184,6 @@
   font-weight: var(--text-label-sm-regular-fontWeight);
   font-size: var(--text-label-sm-regular-fontSize);
   line-height: var(--text-label-sm-regular-lineHeight);
-  color: var(--color-state-error-foreground);
+  color: var(--color-state-error-default);
   margin: 0;
 }

package/dist/styles/components/SpecList.css

@@ -20,10 +20,10 @@
   flex: 0 0 auto;
   margin: 0;
   color: var(--color-text-subtle-default);
-  font-family: var(--text-body-md-regular-fontFamily);
-  font-weight: var(--text-body-md-regular-fontWeight);
-  font-size: var(--text-body-md-regular-fontSize);
-  line-height: var(--text-body-md-regular-lineHeight);
+  font-family: var(--text-body-base-regular-fontFamily);
+  font-weight: var(--text-body-base-regular-fontWeight);
+  font-size: var(--text-body-base-regular-fontSize);
+  line-height: var(--text-body-base-regular-lineHeight);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -41,10 +41,10 @@
 }
 
 .muka-spec-row__value-text {
-  font-family: var(--text-body-md-regular-fontFamily);
-  font-weight: var(--text-body-md-regular-fontWeight);
-  font-size: var(--text-body-md-regular-fontSize);
-  line-height: var(--text-body-md-regular-lineHeight);
+  font-family: var(--text-body-base-regular-fontFamily);
+  font-weight: var(--text-body-base-regular-fontWeight);
+  font-size: var(--text-body-base-regular-fontSize);
+  line-height: var(--text-body-base-regular-lineHeight);
 }
 
 .muka-spec-row__hint {

package/dist/styles/components/Spinner.css

@@ -13,7 +13,7 @@
 }
 
 .muka-spinner--inverse {
-  color: var(--color-text-inverse-default);
+  color: var(--color-text-default-inverse);
 }
 
 .muka-spinner__circle {

package/dist/styles/components/SwipeActions.css

@@ -86,20 +86,20 @@
 
 .muka-swipe-actions__button--primary {
   background-color: var(--color-action-default);
-  color: var(--color-text-inverse-default, #fff);
+  color: var(--color-text-default-inverse);
 }
 
 .muka-swipe-actions__button--success {
-  background-color: var(--color-state-success-default, var(--color-action-default));
-  color: var(--color-text-inverse-default, #fff);
+  background-color: var(--color-state-success-default);
+  color: var(--color-text-default-inverse);
 }
 
 .muka-swipe-actions__button--warning {
-  background-color: var(--color-state-warning-default, var(--color-action-default));
+  background-color: var(--color-state-warning-default);
   color: var(--color-text-default-default);
 }
 
 .muka-swipe-actions__button--destructive {
-  background-color: var(--color-state-error-default, #c0392b);
-  color: var(--color-text-inverse-default, #fff);
+  background-color: var(--color-state-error-default);
+  color: var(--color-text-default-inverse);
 }

package/dist/styles/components/Table.css

@@ -55,7 +55,7 @@
    ======================================== */
 
 .muka-table__body .muka-table__row {
-  border-bottom: var(--border-width-regular) solid var(--color-border-subtle);
+  border-bottom: var(--border-width-regular) solid var(--color-border-muted);
 }
 
 .muka-table__body .muka-table__row:last-child {
@@ -67,11 +67,11 @@
 }
 
 .muka-table__body .muka-table__row--selected {
-  background-color: var(--table-row-selected-background, var(--color-action-background));
+  background-color: var(--table-row-selected-background, var(--color-action-default));
 }
 
 .muka-table__body .muka-table__row--selected:hover {
-  background-color: var(--table-row-selected-background, var(--color-action-background));
+  background-color: var(--table-row-selected-background, var(--color-action-default));
 }
 
 .muka-table__row--clickable {

package/dist/styles/components/Tabs.css

@@ -25,7 +25,7 @@
   align-items: center;
   position: relative;
   z-index: 2;
-  border-bottom: 1px solid var(--color-border-default, #e0e0e0);
+  border-bottom: 1px solid var(--tabs-trigger-color-default-border);
 }
 
 /* Tab Trigger — clean underline style */
@@ -43,7 +43,7 @@
   white-space: nowrap;
   position: relative;
   z-index: 2;
-  color: var(--color-text-subtle-default, #838383);
+  color: var(--tabs-trigger-color-default-foreground);
 
   /* Default MD size values */
   height: 48px;
@@ -75,12 +75,12 @@
 
 /* Hover state */
 .muka-tabs__trigger:hover:not(:disabled):not(.muka-tabs__trigger--current) {
-  color: var(--color-text-neutral-default, #202020);
+  color: var(--tabs-trigger-color-hover-foreground);
 }
 
 /* Current tab */
 .muka-tabs__trigger--current {
-  color: var(--color-text-action-default, #202020);
+  color: var(--tabs-trigger-color-current-foreground);
 }
 
 /* Active bottom border (underline) */
@@ -91,7 +91,7 @@
   left: 0;
   right: 0;
   height: 3px;
-  background-color: var(--color-text-action-default, #202020);
+  background-color: var(--tabs-trigger-color-current-foreground);
   border-bottom-left-radius: 1px;
   border-bottom-right-radius: 1px;
   border-top-left-radius: 3px;
@@ -100,7 +100,7 @@
 }
 
 .muka-tabs__trigger--disabled {
-  color: var(--color-text-disabled-foreground, #a0a0a0);
+  color: var(--tabs-trigger-color-disabled-foreground);
   cursor: not-allowed;
 }
 

package/dist/styles/components/Textarea.css

@@ -34,7 +34,7 @@
 }
 
 .muka-textarea__required {
-  color: var(--color-state-error-foreground);
+  color: var(--color-state-error-default);
 }
 
 /* Field container */
@@ -147,7 +147,7 @@
   font-weight: var(--text-label-sm-regular-fontWeight);
   font-size: var(--text-label-sm-regular-fontSize);
   line-height: var(--text-label-sm-regular-lineHeight);
-  color: var(--color-state-error-foreground);
+  color: var(--color-state-error-default);
   margin: 0;
 }
 

package/dist/styles/components/Waveform.css

@@ -9,7 +9,7 @@
 .muka-waveform {
   display: flex;
   align-items: center;
-  gap: var(--spacing-05, 2px);
+  gap: var(--size-3xs);
   width: 100%;
   min-width: 0;
 }