@revikornmann/muka-ui 0.23.1 → 0.25.0

package/dist/styles/wireframe-dark.css

@@ -4802,6 +4802,156 @@ body {
 }
 
 
+/* SocialSignInButton */
+/*
+ * SocialSignInButton lockup colors are provider-mandated (Apple HIG /
+ * Google Identity branding) and intentionally fixed across Muka brands —
+ * same exception pattern as LicensePlateInput regulatory colors.
+ *
+ * Apple: https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple
+ * Google: https://developers.google.com/identity/branding-guidelines
+ */
+.muka-social-sign-in-button {
+  --ssi-white: #ffffff;
+  --ssi-black: #000000;
+  --ssi-google-text-light: #1f1f1f;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  /* Provider lockup type — matches Figma / HIG, not brand font tokens.
+   * SF Pro Text is OS-provided on Apple platforms (not redistributable).
+   * Google Sans is not freely shippable; Roboto is the closest system fallback. */
+  font-family: inherit;
+  font-weight: 600;
+  text-decoration: none;
+  white-space: nowrap;
+
+  border: 1px solid transparent;
+  cursor: pointer;
+  user-select: none;
+  transition: opacity 0.15s ease, filter 0.15s ease;
+
+  outline: none;
+  position: relative;
+  box-sizing: border-box;
+}
+
+.muka-social-sign-in-button--apple {
+  font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Helvetica, Arial, sans-serif;
+  font-weight: 600;
+}
+
+.muka-social-sign-in-button--google {
+  font-family: 'Google Sans', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-weight: 500;
+}
+
+.muka-social-sign-in-button:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+
+/* Sizes — heights align with Button md/lg */
+.muka-social-sign-in-button--md {
+  padding: 0 var(--button-padding-md-x);
+  border-radius: var(--button-radius-md);
+  font-size: var(--text-label-sm-semibold-fontSize);
+  line-height: var(--text-label-sm-semibold-lineHeight);
+  min-height: 40px;
+  min-width: 240px;
+}
+
+.muka-social-sign-in-button--md .muka-social-sign-in-button__label {
+  padding: 0 var(--button-gap-md);
+}
+
+.muka-social-sign-in-button--md .muka-social-sign-in-button__icon {
+  width: var(--button-icon-md);
+  height: var(--button-icon-md);
+}
+
+.muka-social-sign-in-button--lg {
+  padding: 0 var(--button-padding-lg-x);
+  border-radius: var(--button-radius-lg);
+  font-size: var(--text-label-lg-semibold-fontSize);
+  line-height: var(--text-label-lg-semibold-lineHeight);
+  min-height: 48px;
+  min-width: 280px;
+}
+
+.muka-social-sign-in-button--lg .muka-social-sign-in-button__label {
+  padding: 0 var(--button-gap-lg);
+}
+
+.muka-social-sign-in-button--lg .muka-social-sign-in-button__icon {
+  width: var(--button-icon-lg);
+  height: var(--button-icon-lg);
+}
+
+/* White lockup — for dark surfaces (Apple White with Outline) */
+.muka-social-sign-in-button--white {
+  background-color: var(--ssi-white);
+  color: var(--ssi-black);
+  border-color: var(--ssi-black);
+}
+
+.muka-social-sign-in-button--white.muka-social-sign-in-button--google {
+  color: var(--ssi-google-text-light);
+}
+
+/* Black lockup — for light surfaces */
+.muka-social-sign-in-button--black {
+  background-color: var(--ssi-black);
+  color: var(--ssi-white);
+  border-color: transparent;
+}
+
+/* Interaction — luminance/opacity only; no brand tint */
+.muka-social-sign-in-button:hover:not(:disabled) {
+  filter: brightness(0.92);
+}
+
+.muka-social-sign-in-button:active:not(:disabled) {
+  filter: brightness(0.85);
+}
+
+.muka-social-sign-in-button:disabled,
+.muka-social-sign-in-button--disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+  pointer-events: none;
+  filter: none;
+}
+
+.muka-social-sign-in-button--full-width {
+  width: 100%;
+  min-width: 0;
+}
+
+.muka-social-sign-in-button__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.muka-social-sign-in-button__icon > *,
+.muka-social-sign-in-button__icon svg {
+  width: auto;
+  height: 100%;
+  max-width: 100%;
+  display: block;
+}
+
+.muka-social-sign-in-button__label {
+  display: inline-flex;
+  align-items: center;
+}
+
+
 /* SmsOtpField */
 /* SmsOtpField Component Styles - Using Muka Design Tokens */
 
@@ -4994,156 +5144,6 @@ body {
 }
 
 
-/* SocialSignInButton */
-/*
- * SocialSignInButton lockup colors are provider-mandated (Apple HIG /
- * Google Identity branding) and intentionally fixed across Muka brands —
- * same exception pattern as LicensePlateInput regulatory colors.
- *
- * Apple: https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple
- * Google: https://developers.google.com/identity/branding-guidelines
- */
-.muka-social-sign-in-button {
-  --ssi-white: #ffffff;
-  --ssi-black: #000000;
-  --ssi-google-text-light: #1f1f1f;
-
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-
-  /* Provider lockup type — matches Figma / HIG, not brand font tokens.
-   * SF Pro Text is OS-provided on Apple platforms (not redistributable).
-   * Google Sans is not freely shippable; Roboto is the closest system fallback. */
-  font-family: inherit;
-  font-weight: 600;
-  text-decoration: none;
-  white-space: nowrap;
-
-  border: 1px solid transparent;
-  cursor: pointer;
-  user-select: none;
-  transition: opacity 0.15s ease, filter 0.15s ease;
-
-  outline: none;
-  position: relative;
-  box-sizing: border-box;
-}
-
-.muka-social-sign-in-button--apple {
-  font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    Helvetica, Arial, sans-serif;
-  font-weight: 600;
-}
-
-.muka-social-sign-in-button--google {
-  font-family: 'Google Sans', Roboto, 'Helvetica Neue', Arial, sans-serif;
-  font-weight: 500;
-}
-
-.muka-social-sign-in-button:focus-visible {
-  outline: 2px solid var(--color-border-focus);
-  outline-offset: 2px;
-}
-
-/* Sizes — heights align with Button md/lg */
-.muka-social-sign-in-button--md {
-  padding: 0 var(--button-padding-md-x);
-  border-radius: var(--button-radius-md);
-  font-size: var(--text-label-sm-semibold-fontSize);
-  line-height: var(--text-label-sm-semibold-lineHeight);
-  min-height: 40px;
-  min-width: 240px;
-}
-
-.muka-social-sign-in-button--md .muka-social-sign-in-button__label {
-  padding: 0 var(--button-gap-md);
-}
-
-.muka-social-sign-in-button--md .muka-social-sign-in-button__icon {
-  width: var(--button-icon-md);
-  height: var(--button-icon-md);
-}
-
-.muka-social-sign-in-button--lg {
-  padding: 0 var(--button-padding-lg-x);
-  border-radius: var(--button-radius-lg);
-  font-size: var(--text-label-lg-semibold-fontSize);
-  line-height: var(--text-label-lg-semibold-lineHeight);
-  min-height: 48px;
-  min-width: 280px;
-}
-
-.muka-social-sign-in-button--lg .muka-social-sign-in-button__label {
-  padding: 0 var(--button-gap-lg);
-}
-
-.muka-social-sign-in-button--lg .muka-social-sign-in-button__icon {
-  width: var(--button-icon-lg);
-  height: var(--button-icon-lg);
-}
-
-/* White lockup — for dark surfaces (Apple White with Outline) */
-.muka-social-sign-in-button--white {
-  background-color: var(--ssi-white);
-  color: var(--ssi-black);
-  border-color: var(--ssi-black);
-}
-
-.muka-social-sign-in-button--white.muka-social-sign-in-button--google {
-  color: var(--ssi-google-text-light);
-}
-
-/* Black lockup — for light surfaces */
-.muka-social-sign-in-button--black {
-  background-color: var(--ssi-black);
-  color: var(--ssi-white);
-  border-color: transparent;
-}
-
-/* Interaction — luminance/opacity only; no brand tint */
-.muka-social-sign-in-button:hover:not(:disabled) {
-  filter: brightness(0.92);
-}
-
-.muka-social-sign-in-button:active:not(:disabled) {
-  filter: brightness(0.85);
-}
-
-.muka-social-sign-in-button:disabled,
-.muka-social-sign-in-button--disabled {
-  cursor: not-allowed;
-  opacity: 0.4;
-  pointer-events: none;
-  filter: none;
-}
-
-.muka-social-sign-in-button--full-width {
-  width: 100%;
-  min-width: 0;
-}
-
-.muka-social-sign-in-button__icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.muka-social-sign-in-button__icon > *,
-.muka-social-sign-in-button__icon svg {
-  width: auto;
-  height: 100%;
-  max-width: 100%;
-  display: block;
-}
-
-.muka-social-sign-in-button__label {
-  display: inline-flex;
-  align-items: center;
-}
-
-
 /* Skeleton */
 /* Skeleton Component Styles */
 
@@ -7433,77 +7433,6 @@ body {
 }
 
 
-/* ProfileBadge */
-/* ProfileBadge Component Styles - Using Muka Design Tokens */
-
-.muka-profile-badge {
-  display: inline-flex;
-  align-items: center;
-  font-family: var(--text-body-base-regular-fontFamily);
-}
-
-/* Size variants */
-.muka-profile-badge--lg {
-  gap: var(--spacing-4); /* 16px */
-}
-
-.muka-profile-badge--md {
-  gap: var(--spacing-3); /* 12px */
-}
-
-.muka-profile-badge__avatar {
-  flex-shrink: 0;
-}
-
-/* Text stack */
-.muka-profile-badge__text {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  min-width: 0;
-}
-
-.muka-profile-badge__name {
-  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-default-default);
-}
-
-.muka-profile-badge__email {
-  font-family: var(--text-body-xs-regular-fontFamily);
-  font-size: var(--text-body-xs-regular-fontSize);
-  font-weight: var(--text-body-xs-regular-fontWeight);
-  line-height: var(--text-body-xs-regular-lineHeight);
-  color: var(--color-text-subtle-default);
-}
-
-/* Clickable state */
-.muka-profile-badge--clickable {
-  cursor: pointer;
-  border: none;
-  background: none;
-  padding: 0;
-  text-align: left;
-  border-radius: var(--radius-md);
-  transition: opacity 0.2s ease;
-}
-
-.muka-profile-badge--clickable:hover {
-  opacity: 0.9;
-}
-
-.muka-profile-badge--clickable:active {
-  opacity: 0.8;
-}
-
-.muka-profile-badge--clickable:focus-visible {
-  outline: 2px solid var(--color-border-focus);
-  outline-offset: 2px;
-}
-
-
 /* PriceTag */
 /* PriceTag Component Styles - Using Muka Design Tokens */
 
@@ -7601,6 +7530,77 @@ body {
 }
 
 
+/* ProfileBadge */
+/* ProfileBadge Component Styles - Using Muka Design Tokens */
+
+.muka-profile-badge {
+  display: inline-flex;
+  align-items: center;
+  font-family: var(--text-body-base-regular-fontFamily);
+}
+
+/* Size variants */
+.muka-profile-badge--lg {
+  gap: var(--spacing-4); /* 16px */
+}
+
+.muka-profile-badge--md {
+  gap: var(--spacing-3); /* 12px */
+}
+
+.muka-profile-badge__avatar {
+  flex-shrink: 0;
+}
+
+/* Text stack */
+.muka-profile-badge__text {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  min-width: 0;
+}
+
+.muka-profile-badge__name {
+  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-default-default);
+}
+
+.muka-profile-badge__email {
+  font-family: var(--text-body-xs-regular-fontFamily);
+  font-size: var(--text-body-xs-regular-fontSize);
+  font-weight: var(--text-body-xs-regular-fontWeight);
+  line-height: var(--text-body-xs-regular-lineHeight);
+  color: var(--color-text-subtle-default);
+}
+
+/* Clickable state */
+.muka-profile-badge--clickable {
+  cursor: pointer;
+  border: none;
+  background: none;
+  padding: 0;
+  text-align: left;
+  border-radius: var(--radius-md);
+  transition: opacity 0.2s ease;
+}
+
+.muka-profile-badge--clickable:hover {
+  opacity: 0.9;
+}
+
+.muka-profile-badge--clickable:active {
+  opacity: 0.8;
+}
+
+.muka-profile-badge--clickable:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+
+
 /* Popover */
 /* Popover Component Styles */
 
@@ -8019,34 +8019,6 @@ body {
 }
 
 
-/* NavigationTransition */
-/* NavigationTransition Component Styles */
-
-/* ─── Wrapper ────────────────────────────────────────── */
-
-.muka-nav-transition {
-  position: relative;
-  height: 100vh;
-  overflow: hidden;
-}
-
-/* Disable interaction during animation */
-.muka-nav-transition--active {
-  pointer-events: none;
-}
-
-/* ─── View slots ─────────────────────────────────────── */
-
-.muka-nav-transition--active .muka-nav-transition__view {
-  position: absolute;
-  inset: 0;
-}
-
-/* Z-index layering */
-.muka-nav-transition__view--bottom { z-index: 1; }
-.muka-nav-transition__view--top { z-index: 2; }
-
-
 /* Menu */
 /* Menu Component Styles */
 
@@ -8526,6 +8498,34 @@ body {
 }
 
 
+/* NavigationTransition */
+/* NavigationTransition Component Styles */
+
+/* ─── Wrapper ────────────────────────────────────────── */
+
+.muka-nav-transition {
+  position: relative;
+  height: 100vh;
+  overflow: hidden;
+}
+
+/* Disable interaction during animation */
+.muka-nav-transition--active {
+  pointer-events: none;
+}
+
+/* ─── View slots ─────────────────────────────────────── */
+
+.muka-nav-transition--active .muka-nav-transition__view {
+  position: absolute;
+  inset: 0;
+}
+
+/* Z-index layering */
+.muka-nav-transition__view--bottom { z-index: 1; }
+.muka-nav-transition__view--top { z-index: 2; }
+
+
 /* ListItem */
 /* ListItem Component Styles - Using Muka Design Tokens */
 
@@ -10643,9 +10643,10 @@ li.muka-listitem {
   flex-shrink: 0;
 }
 
-/* Hide footer on mobile for modal dialogs with inputs (actions move to TopBar) */
+/* Hide footer on mobile for modal dialogs with inputs (actions move to TopBar),
+   unless the consumer keeps them in the BottomBar (mobileActions="footer") */
 @media (max-width: 1023px) {
-  .muka-dialog:not(.muka-dialog--non-modal):not(.muka-dialog--no-inputs) .muka-dialog__footer {
+  .muka-dialog:not(.muka-dialog--non-modal):not(.muka-dialog--no-inputs):not(.muka-dialog--mobile-actions-footer) .muka-dialog__footer {
     display: none;
   }