@revikornmann/muka-ui 0.2.2 → 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;
 }
@@ -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/wireframe-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 {

package/dist/types/components/TopBar/TopBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TopBar.d.ts","sourceRoot":"","sources":["../../../../components/TopBar/TopBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,WAAW;IAC1B,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,+CAA+C;IAC/C,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,uDAAuD;IACvD,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEpC,qBAAqB;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAElC;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAE1B;;;;OAIG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE7B,mDAAmD;IACnD,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE7B;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAmExC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"TopBar.d.ts","sourceRoot":"","sources":["../../../../components/TopBar/TopBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,WAAW;IAC1B,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,+CAA+C;IAC/C,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,uDAAuD;IACvD,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEpC,qBAAqB;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAElC;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAE1B;;;;OAIG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE7B,mDAAmD;IACnD,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE7B;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAqExC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/docs/consumers/setup-instructions.md

@@ -47,6 +47,17 @@ This workflow listens for the `muka-released` dispatch and installs the exact
 published version. You can also run it manually from the Actions tab
 (installs `@latest`). The package is public, so it needs no secrets to install.
 
+The workflow auto-detects your package manager from the lockfile
+(`pnpm-lock.yaml` → pnpm, `yarn.lock` → yarn, else npm) and installs with it.
+
+> **pnpm / yarn consumers:** pin your package manager with a `packageManager`
+> field in `package.json`, e.g. `"packageManager": "pnpm@9.15.9"`. CI uses
+> [corepack](https://nodejs.org/api/corepack.html), which otherwise downloads
+> the *latest* pnpm/yarn — a newer major than your lockfile, which can fail the
+> update (Node-version mismatches, or pnpm's `minimumReleaseAge` default
+> rejecting a just-published version). Match the value to the pnpm/yarn version
+> you use locally (e.g. `lockfileVersion: 9.0` → pnpm 9).
+
 ## 3. Register as a consumer
 
 Add `owner/repo` to Muka's [`.github/consumers.txt`](../../.github/consumers.txt)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revikornmann/muka-ui",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "Muka Design System - Multi-brand design tokens and React components",
   "main": "dist/cjs/components/index.js",
   "module": "dist/esm/components/index.js",

package/skills/setup-muka/SKILL.md

@@ -72,7 +72,15 @@ cp node_modules/@revikornmann/muka-ui/templates/update-muka.yml \
 
 The workflow listens for the `muka-released` dispatch and installs the exact
 published version (manual runs install `@latest`). No secrets needed — the
-package is public.
+package is public. It auto-detects the package manager from the lockfile
+(pnpm/yarn/npm).
+
+**If this is a pnpm or yarn repo**, ensure `package.json` has a `packageManager`
+field pinning your version (e.g. `"packageManager": "pnpm@9.15.9"` — match the
+lockfile, `lockfileVersion: 9.0` → pnpm 9). Without it, CI's corepack pulls the
+*latest* pnpm/yarn, which can fail the update (Node-version mismatch, or pnpm's
+`minimumReleaseAge` default rejecting a just-published version). Add it if
+missing.
 
 ## Step 4: Register this repo as a consumer
 

package/templates/update-muka.yml

@@ -43,7 +43,8 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          # Node 22 LTS: current pnpm/yarn (via corepack) require Node >= 22.13.
+          node-version: '22'
 
       - name: Enable corepack (pnpm / yarn shims)
         run: corepack enable