@revikornmann/muka-ui 0.22.0 → 0.23.1

package/dist/styles/muka-dark.css

@@ -5026,6 +5026,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;
+}
+
+
 /* Skeleton */
 /* Skeleton Component Styles */
 
@@ -9023,7 +9173,8 @@ li.muka-listitem {
   height: var(--icon-size-default);
 }
 
-.muka-input__clear {
+.muka-input__clear,
+.muka-input__reveal {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -9037,7 +9188,8 @@ li.muka-listitem {
   cursor: pointer;
 }
 
-.muka-input__field--sm .muka-input__clear {
+.muka-input__field--sm .muka-input__clear,
+.muka-input__field--sm .muka-input__reveal {
   width: var(--size-xl, 1.5rem);
   height: var(--size-xl, 1.5rem);
 }
@@ -9046,14 +9198,19 @@ li.muka-listitem {
 .muka-input__icon .muka-icon,
 .muka-input__clear .muka-icon,
 .muka-input__clear:hover,
-.muka-input__clear:hover .muka-icon {
+.muka-input__clear:hover .muka-icon,
+.muka-input__reveal .muka-icon,
+.muka-input__reveal:hover,
+.muka-input__reveal:hover .muka-icon {
   color: var(--color-text-subtle-default);
 }
 
 .muka-input__field--disabled .muka-input__icon,
 .muka-input__field--disabled .muka-input__icon .muka-icon,
 .muka-input__field--disabled .muka-input__clear,
-.muka-input__field--disabled .muka-input__clear .muka-icon {
+.muka-input__field--disabled .muka-input__clear .muka-icon,
+.muka-input__field--disabled .muka-input__reveal,
+.muka-input__field--disabled .muka-input__reveal .muka-icon {
   color: var(--input-field-color-disabled-foreground);
 }
 

package/dist/styles/muka-light.css

@@ -5026,6 +5026,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;
+}
+
+
 /* Skeleton */
 /* Skeleton Component Styles */
 
@@ -9023,7 +9173,8 @@ li.muka-listitem {
   height: var(--icon-size-default);
 }
 
-.muka-input__clear {
+.muka-input__clear,
+.muka-input__reveal {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -9037,7 +9188,8 @@ li.muka-listitem {
   cursor: pointer;
 }
 
-.muka-input__field--sm .muka-input__clear {
+.muka-input__field--sm .muka-input__clear,
+.muka-input__field--sm .muka-input__reveal {
   width: var(--size-xl, 1.5rem);
   height: var(--size-xl, 1.5rem);
 }
@@ -9046,14 +9198,19 @@ li.muka-listitem {
 .muka-input__icon .muka-icon,
 .muka-input__clear .muka-icon,
 .muka-input__clear:hover,
-.muka-input__clear:hover .muka-icon {
+.muka-input__clear:hover .muka-icon,
+.muka-input__reveal .muka-icon,
+.muka-input__reveal:hover,
+.muka-input__reveal:hover .muka-icon {
   color: var(--color-text-subtle-default);
 }
 
 .muka-input__field--disabled .muka-input__icon,
 .muka-input__field--disabled .muka-input__icon .muka-icon,
 .muka-input__field--disabled .muka-input__clear,
-.muka-input__field--disabled .muka-input__clear .muka-icon {
+.muka-input__field--disabled .muka-input__clear .muka-icon,
+.muka-input__field--disabled .muka-input__reveal,
+.muka-input__field--disabled .muka-input__reveal .muka-icon {
   color: var(--input-field-color-disabled-foreground);
 }
 

package/dist/styles/wireframe-dark.css

@@ -4994,6 +4994,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;
+}
+
+
 /* Skeleton */
 /* Skeleton Component Styles */
 
@@ -8991,7 +9141,8 @@ li.muka-listitem {
   height: var(--icon-size-default);
 }
 
-.muka-input__clear {
+.muka-input__clear,
+.muka-input__reveal {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -9005,7 +9156,8 @@ li.muka-listitem {
   cursor: pointer;
 }
 
-.muka-input__field--sm .muka-input__clear {
+.muka-input__field--sm .muka-input__clear,
+.muka-input__field--sm .muka-input__reveal {
   width: var(--size-xl, 1.5rem);
   height: var(--size-xl, 1.5rem);
 }
@@ -9014,14 +9166,19 @@ li.muka-listitem {
 .muka-input__icon .muka-icon,
 .muka-input__clear .muka-icon,
 .muka-input__clear:hover,
-.muka-input__clear:hover .muka-icon {
+.muka-input__clear:hover .muka-icon,
+.muka-input__reveal .muka-icon,
+.muka-input__reveal:hover,
+.muka-input__reveal:hover .muka-icon {
   color: var(--color-text-subtle-default);
 }
 
 .muka-input__field--disabled .muka-input__icon,
 .muka-input__field--disabled .muka-input__icon .muka-icon,
 .muka-input__field--disabled .muka-input__clear,
-.muka-input__field--disabled .muka-input__clear .muka-icon {
+.muka-input__field--disabled .muka-input__clear .muka-icon,
+.muka-input__field--disabled .muka-input__reveal,
+.muka-input__field--disabled .muka-input__reveal .muka-icon {
   color: var(--input-field-color-disabled-foreground);
 }