@revikornmann/muka-ui 0.2.2 → 0.2.4

package/dist/styles/index.css

@@ -2049,6 +2049,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)
@@ -2056,6 +2062,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) {
@@ -2075,6 +2084,8 @@ body {
 /* ─── Footer (e.g. BottomBar) ─────────────────────────── */
 
 .muka-view__footer {
+  position: sticky;
+  bottom: 0;
   flex-shrink: 0;
   z-index: 2;
 }
@@ -6049,36 +6060,6 @@ body {
 }
 
 
-/* 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 */
 
@@ -6390,6 +6371,36 @@ body {
 }
 
 
+/* 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 */
 
@@ -8547,50 +8558,6 @@ li.muka-listitem {
 }
 
 
-/* DataPieChart */
-/* DataPieChart Component Styles - Using Muka Design Tokens */
-
-.muka-data-pie-chart {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.muka-data-pie-chart__svg {
-  display: block;
-  width: 100%;
-  height: 100%;
-  /* Start the segment at 12 o'clock instead of 3 o'clock */
-  transform: rotate(-90deg);
-}
-
-.muka-data-pie-chart__track {
-  fill: none;
-}
-
-.muka-data-pie-chart__segment {
-  fill: none;
-  /* Subtle lift on the filled segment, matching the Figma elevation */
-  filter: drop-shadow(0 2px 4px var(--color-black-alpha-5, rgba(0, 0, 0, 0.05)));
-  transition: stroke-dasharray 0.3s ease;
-}
-
-.muka-data-pie-chart__value {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-family: var(--text-body-base-bold-fontFamily);
-  font-weight: var(--text-body-base-bold-fontWeight);
-  font-size: var(--text-body-base-bold-fontSize);
-  line-height: var(--text-body-base-bold-lineHeight);
-  color: var(--color-text-default-default);
-}
-
-
 /* DataTable */
 /* DataTable Component Styles - Using Muka Design Tokens */
 
@@ -8759,6 +8726,50 @@ li.muka-listitem {
 }
 
 
+/* DataPieChart */
+/* DataPieChart Component Styles - Using Muka Design Tokens */
+
+.muka-data-pie-chart {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.muka-data-pie-chart__svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  /* Start the segment at 12 o'clock instead of 3 o'clock */
+  transform: rotate(-90deg);
+}
+
+.muka-data-pie-chart__track {
+  fill: none;
+}
+
+.muka-data-pie-chart__segment {
+  fill: none;
+  /* Subtle lift on the filled segment, matching the Figma elevation */
+  filter: drop-shadow(0 2px 4px var(--color-black-alpha-5, rgba(0, 0, 0, 0.05)));
+  transition: stroke-dasharray 0.3s ease;
+}
+
+.muka-data-pie-chart__value {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--text-body-base-bold-fontFamily);
+  font-weight: var(--text-body-base-bold-fontWeight);
+  font-size: var(--text-body-base-bold-fontSize);
+  line-height: var(--text-body-base-bold-lineHeight);
+  color: var(--color-text-default-default);
+}
+
+
 /* Container */
 /* Container Component - Layout tokens (container.max-width, container.gap) */
 
@@ -10406,6 +10417,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 {

package/dist/styles/muka-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;
 }
@@ -6048,36 +6059,6 @@ body {
 }
 
 
-/* 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 */
 
@@ -6389,6 +6370,36 @@ body {
 }
 
 
+/* 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 */
 
@@ -8546,50 +8557,6 @@ li.muka-listitem {
 }
 
 
-/* DataPieChart */
-/* DataPieChart Component Styles - Using Muka Design Tokens */
-
-.muka-data-pie-chart {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.muka-data-pie-chart__svg {
-  display: block;
-  width: 100%;
-  height: 100%;
-  /* Start the segment at 12 o'clock instead of 3 o'clock */
-  transform: rotate(-90deg);
-}
-
-.muka-data-pie-chart__track {
-  fill: none;
-}
-
-.muka-data-pie-chart__segment {
-  fill: none;
-  /* Subtle lift on the filled segment, matching the Figma elevation */
-  filter: drop-shadow(0 2px 4px var(--color-black-alpha-5, rgba(0, 0, 0, 0.05)));
-  transition: stroke-dasharray 0.3s ease;
-}
-
-.muka-data-pie-chart__value {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-family: var(--text-body-base-bold-fontFamily);
-  font-weight: var(--text-body-base-bold-fontWeight);
-  font-size: var(--text-body-base-bold-fontSize);
-  line-height: var(--text-body-base-bold-lineHeight);
-  color: var(--color-text-default-default);
-}
-
-
 /* DataTable */
 /* DataTable Component Styles - Using Muka Design Tokens */
 
@@ -8758,6 +8725,50 @@ li.muka-listitem {
 }
 
 
+/* DataPieChart */
+/* DataPieChart Component Styles - Using Muka Design Tokens */
+
+.muka-data-pie-chart {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.muka-data-pie-chart__svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  /* Start the segment at 12 o'clock instead of 3 o'clock */
+  transform: rotate(-90deg);
+}
+
+.muka-data-pie-chart__track {
+  fill: none;
+}
+
+.muka-data-pie-chart__segment {
+  fill: none;
+  /* Subtle lift on the filled segment, matching the Figma elevation */
+  filter: drop-shadow(0 2px 4px var(--color-black-alpha-5, rgba(0, 0, 0, 0.05)));
+  transition: stroke-dasharray 0.3s ease;
+}
+
+.muka-data-pie-chart__value {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--text-body-base-bold-fontFamily);
+  font-weight: var(--text-body-base-bold-fontWeight);
+  font-size: var(--text-body-base-bold-fontSize);
+  line-height: var(--text-body-base-bold-lineHeight);
+  color: var(--color-text-default-default);
+}
+
+
 /* Container */
 /* Container Component - Layout tokens (container.max-width, container.gap) */
 
@@ -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 {

package/dist/styles/muka-light.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;
 }
@@ -6048,36 +6059,6 @@ body {
 }
 
 
-/* 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 */
 
@@ -6389,6 +6370,36 @@ body {
 }
 
 
+/* 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 */
 
@@ -8546,50 +8557,6 @@ li.muka-listitem {
 }
 
 
-/* DataPieChart */
-/* DataPieChart Component Styles - Using Muka Design Tokens */
-
-.muka-data-pie-chart {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.muka-data-pie-chart__svg {
-  display: block;
-  width: 100%;
-  height: 100%;
-  /* Start the segment at 12 o'clock instead of 3 o'clock */
-  transform: rotate(-90deg);
-}
-
-.muka-data-pie-chart__track {
-  fill: none;
-}
-
-.muka-data-pie-chart__segment {
-  fill: none;
-  /* Subtle lift on the filled segment, matching the Figma elevation */
-  filter: drop-shadow(0 2px 4px var(--color-black-alpha-5, rgba(0, 0, 0, 0.05)));
-  transition: stroke-dasharray 0.3s ease;
-}
-
-.muka-data-pie-chart__value {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-family: var(--text-body-base-bold-fontFamily);
-  font-weight: var(--text-body-base-bold-fontWeight);
-  font-size: var(--text-body-base-bold-fontSize);
-  line-height: var(--text-body-base-bold-lineHeight);
-  color: var(--color-text-default-default);
-}
-
-
 /* DataTable */
 /* DataTable Component Styles - Using Muka Design Tokens */
 
@@ -8758,6 +8725,50 @@ li.muka-listitem {
 }
 
 
+/* DataPieChart */
+/* DataPieChart Component Styles - Using Muka Design Tokens */
+
+.muka-data-pie-chart {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.muka-data-pie-chart__svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  /* Start the segment at 12 o'clock instead of 3 o'clock */
+  transform: rotate(-90deg);
+}
+
+.muka-data-pie-chart__track {
+  fill: none;
+}
+
+.muka-data-pie-chart__segment {
+  fill: none;
+  /* Subtle lift on the filled segment, matching the Figma elevation */
+  filter: drop-shadow(0 2px 4px var(--color-black-alpha-5, rgba(0, 0, 0, 0.05)));
+  transition: stroke-dasharray 0.3s ease;
+}
+
+.muka-data-pie-chart__value {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--text-body-base-bold-fontFamily);
+  font-weight: var(--text-body-base-bold-fontWeight);
+  font-size: var(--text-body-base-bold-fontSize);
+  line-height: var(--text-body-base-bold-lineHeight);
+  color: var(--color-text-default-default);
+}
+
+
 /* Container */
 /* Container Component - Layout tokens (container.max-width, container.gap) */
 
@@ -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 {