@revikornmann/muka-ui 0.2.3 → 0.2.4

package/dist/styles/wireframe-dark.css

@@ -2048,6 +2048,12 @@ body {
   overflow-y: auto;
   overflow-x: clip;
   z-index: 1;
+
+  /* Column flow so the footer (now a scroll-area child) can pin to the bottom and
+     content scrolls *behind* it — letting a floating BottomBar's frosted backdrop
+     reveal the content underneath. */
+  display: flex;
+  flex-direction: column;
 }
 
 /* Inner wrapper constrains content width at the large tier (enterprise desktop)
@@ -2055,6 +2061,9 @@ body {
    width. Full-bleed below large. */
 .muka-view__body-inner {
   width: 100%;
+  /* Grow on short content so the sticky footer is pushed to the bottom rather
+     than floating mid-screen. */
+  flex: 1 0 auto;
 }
 
 @media (min-width: 1024px) {
@@ -2074,6 +2083,8 @@ body {
 /* ─── Footer (e.g. BottomBar) ─────────────────────────── */
 
 .muka-view__footer {
+  position: sticky;
+  bottom: 0;
   flex-shrink: 0;
   z-index: 2;
 }
@@ -5818,6 +5829,37 @@ body {
 }
 
 
+/* Popover */
+/* Popover Component Styles */
+
+.muka-popover__content {
+  background-color: var(--color-surface-level3);
+  border: var(--border-width-regular) solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-4);
+  box-shadow: var(--shadow-level3);
+  max-width: 20rem;
+  z-index: 50;
+  animation: muka-popover-fade-in 150ms ease;
+}
+
+@keyframes muka-popover-fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* Arrow */
+.muka-popover__arrow {
+  fill: var(--color-surface-level3);
+}
+
+
 /* PieChart */
 /* PieChart Component Styles - Using Muka Design Tokens */
 
@@ -6017,67 +6059,6 @@ body {
 }
 
 
-/* Popover */
-/* Popover Component Styles */
-
-.muka-popover__content {
-  background-color: var(--color-surface-level3);
-  border: var(--border-width-regular) solid var(--color-border-default);
-  border-radius: var(--radius-md);
-  padding: var(--spacing-4);
-  box-shadow: var(--shadow-level3);
-  max-width: 20rem;
-  z-index: 50;
-  animation: muka-popover-fade-in 150ms ease;
-}
-
-@keyframes muka-popover-fade-in {
-  from {
-    opacity: 0;
-    transform: scale(0.96);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-/* Arrow */
-.muka-popover__arrow {
-  fill: var(--color-surface-level3);
-}
-
-
-/* NumberInput */
-/* NumberInput — reuses Input field styles (../Input/Input.css). */
-/* Only the prefix/suffix affixes are NumberInput-specific. */
-
-.muka-numberinput__addon {
-  display: inline-flex;
-  align-items: center;
-  flex: none;
-  color: var(--color-text-subtle-default);
-  font-family: var(--text-input-md-fontFamily);
-  font-size: var(--text-input-md-fontSize);
-  line-height: var(--text-input-md-lineHeight);
-  user-select: none;
-  pointer-events: none;
-  white-space: nowrap;
-}
-
-/* Hide the native number spinners — affixes/step API replace them. */
-.muka-numberinput__field .muka-input__native::-webkit-outer-spin-button,
-.muka-numberinput__field .muka-input__native::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.muka-numberinput__field .muka-input__native {
-  -moz-appearance: textfield;
-  appearance: textfield;
-}
-
-
 /* NavigationTransition */
 /* NavigationTransition Component Styles */
 
@@ -6106,194 +6087,6 @@ body {
 .muka-nav-transition__view--top { z-index: 2; }
 
 
-/* ListItem */
-/* ListItem Component Styles - Using Muka Design Tokens */
-
-/* Base list item styles */
-.muka-listitem {
-  /* Layout */
-  display: flex;
-  align-items: flex-start;
-  gap: var(--spacing-4);
-  padding: var(--spacing-5) var(--spacing-4);
-  
-  /* Background - using semantic tokens */
-  background-color: var(--color-surface-level3);
-  
-  /* Typography */
-  font-family: var(--alias-font-brand-family);
-  
-  /* Border and spacing */
-  border: none;
-  position: relative;
-  
-  /* Interaction - only apply if interactive */
-  transition: background-color 0.2s ease;
-}
-
-/* Interactive state */
-.muka-listitem--interactive {
-  cursor: pointer;
-}
-
-.muka-listitem--interactive:hover:not(:disabled):not(.muka-listitem--disabled) {
-  background-color: var(--color-surface-hover);
-}
-
-.muka-listitem--interactive:active:not(:disabled):not(.muka-listitem--disabled),
-.muka-listitem--interactive.muka-listitem--pressed:not(:disabled):not(.muka-listitem--disabled) {
-  background-color: var(--color-surface-pressed);
-}
-
-/* Focus styles for accessibility */
-.muka-listitem:focus-visible {
-  outline: 2px solid var(--color-border-focus);
-  outline-offset: -2px;
-}
-
-/* Disabled state */
-.muka-listitem--disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.muka-listitem--disabled:hover {
-  background-color: var(--color-surface-level3);
-}
-
-/* Selected state */
-.muka-listitem--selected {
-  background-color: var(--color-surface-level2);
-}
-
-.muka-listitem--selected:hover {
-  background-color: var(--color-surface-hover);
-}
-
-/* No divider modifier */
-.muka-listitem--no-divider .muka-listitem__divider {
-  display: none;
-}
-
-/* Center content vertically when no caption */
-.muka-listitem--no-caption {
-  align-items: center;
-}
-
-/* Leading content (icon or image) */
-.muka-listitem__leading {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: 48px;
-  height: 48px;
-}
-
-.muka-listitem__icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  color: var(--color-text-default-default);
-}
-
-.muka-listitem__image {
-  width: 48px;
-  height: 48px;
-  border-radius: var(--radius-md);
-  object-fit: cover;
-}
-
-/* Main content area */
-.muka-listitem__content {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-4);
-  min-width: 0;
-}
-
-.muka-listitem__text {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-1);
-  min-width: 0;
-}
-
-/* Label text */
-.muka-listitem__label {
-  margin: 0;
-  padding: 0;
-  
-  /* Typography - using semantic tokens */
-  font-family: var(--alias-font-plain-family);
-  font-weight: var(--alias-font-plain-weight-semibold, 600);
-  font-size: var(--text-label-md-fontSize);
-  line-height: var(--text-label-md-lineHeight);
-  color: var(--color-text-default-default);
-  
-  /* Text handling */
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* Caption text */
-.muka-listitem__caption {
-  margin: 0;
-  padding: 0;
-  
-  /* Typography - using semantic tokens */
-  font-family: var(--alias-font-plain-family);
-  font-weight: var(--alias-font-plain-weight-regular, 400);
-  font-size: var(--text-body-sm-fontSize);
-  line-height: var(--text-body-sm-lineHeight);
-  color: var(--color-text-subtle-default);
-  
-  /* Text handling */
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* Trailing chevron */
-.muka-listitem__chevron {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: 24px;
-  height: 24px;
-  color: var(--color-text-subtle-default);
-}
-
-/* Bottom divider */
-.muka-listitem__divider {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 1px;
-  background-color: var(--color-border-default);
-}
-
-/* Button and anchor specific styles */
-button.muka-listitem,
-a.muka-listitem {
-  text-align: left;
-  width: 100%;
-}
-
-/* List item specific styles */
-li.muka-listitem {
-  list-style: none;
-}
-
-
 /* Menu */
 /* Menu Component Styles */
 
@@ -6577,6 +6370,224 @@ li.muka-listitem {
 }
 
 
+/* NumberInput */
+/* NumberInput — reuses Input field styles (../Input/Input.css). */
+/* Only the prefix/suffix affixes are NumberInput-specific. */
+
+.muka-numberinput__addon {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  color: var(--color-text-subtle-default);
+  font-family: var(--text-input-md-fontFamily);
+  font-size: var(--text-input-md-fontSize);
+  line-height: var(--text-input-md-lineHeight);
+  user-select: none;
+  pointer-events: none;
+  white-space: nowrap;
+}
+
+/* Hide the native number spinners — affixes/step API replace them. */
+.muka-numberinput__field .muka-input__native::-webkit-outer-spin-button,
+.muka-numberinput__field .muka-input__native::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.muka-numberinput__field .muka-input__native {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+
+
+/* ListItem */
+/* ListItem Component Styles - Using Muka Design Tokens */
+
+/* Base list item styles */
+.muka-listitem {
+  /* Layout */
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-4);
+  padding: var(--spacing-5) var(--spacing-4);
+  
+  /* Background - using semantic tokens */
+  background-color: var(--color-surface-level3);
+  
+  /* Typography */
+  font-family: var(--alias-font-brand-family);
+  
+  /* Border and spacing */
+  border: none;
+  position: relative;
+  
+  /* Interaction - only apply if interactive */
+  transition: background-color 0.2s ease;
+}
+
+/* Interactive state */
+.muka-listitem--interactive {
+  cursor: pointer;
+}
+
+.muka-listitem--interactive:hover:not(:disabled):not(.muka-listitem--disabled) {
+  background-color: var(--color-surface-hover);
+}
+
+.muka-listitem--interactive:active:not(:disabled):not(.muka-listitem--disabled),
+.muka-listitem--interactive.muka-listitem--pressed:not(:disabled):not(.muka-listitem--disabled) {
+  background-color: var(--color-surface-pressed);
+}
+
+/* Focus styles for accessibility */
+.muka-listitem:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: -2px;
+}
+
+/* Disabled state */
+.muka-listitem--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.muka-listitem--disabled:hover {
+  background-color: var(--color-surface-level3);
+}
+
+/* Selected state */
+.muka-listitem--selected {
+  background-color: var(--color-surface-level2);
+}
+
+.muka-listitem--selected:hover {
+  background-color: var(--color-surface-hover);
+}
+
+/* No divider modifier */
+.muka-listitem--no-divider .muka-listitem__divider {
+  display: none;
+}
+
+/* Center content vertically when no caption */
+.muka-listitem--no-caption {
+  align-items: center;
+}
+
+/* Leading content (icon or image) */
+.muka-listitem__leading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 48px;
+  height: 48px;
+}
+
+.muka-listitem__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  color: var(--color-text-default-default);
+}
+
+.muka-listitem__image {
+  width: 48px;
+  height: 48px;
+  border-radius: var(--radius-md);
+  object-fit: cover;
+}
+
+/* Main content area */
+.muka-listitem__content {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  min-width: 0;
+}
+
+.muka-listitem__text {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+/* Label text */
+.muka-listitem__label {
+  margin: 0;
+  padding: 0;
+  
+  /* Typography - using semantic tokens */
+  font-family: var(--alias-font-plain-family);
+  font-weight: var(--alias-font-plain-weight-semibold, 600);
+  font-size: var(--text-label-md-fontSize);
+  line-height: var(--text-label-md-lineHeight);
+  color: var(--color-text-default-default);
+  
+  /* Text handling */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Caption text */
+.muka-listitem__caption {
+  margin: 0;
+  padding: 0;
+  
+  /* Typography - using semantic tokens */
+  font-family: var(--alias-font-plain-family);
+  font-weight: var(--alias-font-plain-weight-regular, 400);
+  font-size: var(--text-body-sm-fontSize);
+  line-height: var(--text-body-sm-lineHeight);
+  color: var(--color-text-subtle-default);
+  
+  /* Text handling */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Trailing chevron */
+.muka-listitem__chevron {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  color: var(--color-text-subtle-default);
+}
+
+/* Bottom divider */
+.muka-listitem__divider {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background-color: var(--color-border-default);
+}
+
+/* Button and anchor specific styles */
+button.muka-listitem,
+a.muka-listitem {
+  text-align: left;
+  width: 100%;
+}
+
+/* List item specific styles */
+li.muka-listitem {
+  list-style: none;
+}
+
+
 /* LicensePlateInput */
 /* LicensePlateInput — Dutch RDW-style plate input
  *
@@ -10405,6 +10416,15 @@ li.muka-listitem {
   backdrop-filter: blur(var(--bottombar-floating-backdrop-blur));
   -webkit-backdrop-filter: blur(var(--bottombar-floating-backdrop-blur));
   padding: var(--bottombar-floating-padding-top) var(--bottombar-floating-margin-x) var(--bottombar-floating-margin-bottom);
+
+  /* The transparent frosted margin around the pill overlays scrolling content;
+     let scroll/taps fall through to that content, keeping only the pill itself
+     interactive (re-enabled on __content below). */
+  pointer-events: none;
+}
+
+.muka-bottombar--floating .muka-bottombar__content {
+  pointer-events: auto;
 }
 
 .muka-bottombar--floating .muka-bottombar__content {