@revikornmann/muka-ui 0.2.1 → 0.2.2

package/dist/styles/index.css

@@ -8221,6 +8221,33 @@ li.muka-listitem {
 }
 
 
+/* Divider */
+/* Divider Component Styles - Using Muka Design Tokens */
+
+.muka-divider {
+  flex-shrink: 0;
+}
+
+.muka-divider--horizontal {
+  width: 100%;
+  height: var(--separator-width);
+}
+
+.muka-divider--vertical {
+  height: 100%;
+  width: var(--separator-width);
+  align-self: stretch;
+}
+
+.muka-divider--default {
+  background-color: var(--separator-color-default);
+}
+
+.muka-divider--contrast {
+  background-color: var(--separator-color-contrast);
+}
+
+
 /* Dialog */
 /* Dialog Component Styles */
 
@@ -8520,30 +8547,47 @@ li.muka-listitem {
 }
 
 
-/* Divider */
-/* Divider Component Styles - Using Muka Design Tokens */
+/* DataPieChart */
+/* DataPieChart Component Styles - Using Muka Design Tokens */
 
-.muka-divider {
+.muka-data-pie-chart {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   flex-shrink: 0;
 }
 
-.muka-divider--horizontal {
+.muka-data-pie-chart__svg {
+  display: block;
   width: 100%;
-  height: var(--separator-width);
+  height: 100%;
+  /* Start the segment at 12 o'clock instead of 3 o'clock */
+  transform: rotate(-90deg);
 }
 
-.muka-divider--vertical {
-  height: 100%;
-  width: var(--separator-width);
-  align-self: stretch;
+.muka-data-pie-chart__track {
+  fill: none;
 }
 
-.muka-divider--default {
-  background-color: var(--separator-color-default);
+.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-divider--contrast {
-  background-color: var(--separator-color-contrast);
+.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);
 }
 
 
@@ -8715,50 +8759,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);
-}
-
-
 /* Container */
 /* Container Component - Layout tokens (container.max-width, container.gap) */
 

package/dist/styles/muka-dark.css

@@ -8220,6 +8220,33 @@ li.muka-listitem {
 }
 
 
+/* Divider */
+/* Divider Component Styles - Using Muka Design Tokens */
+
+.muka-divider {
+  flex-shrink: 0;
+}
+
+.muka-divider--horizontal {
+  width: 100%;
+  height: var(--separator-width);
+}
+
+.muka-divider--vertical {
+  height: 100%;
+  width: var(--separator-width);
+  align-self: stretch;
+}
+
+.muka-divider--default {
+  background-color: var(--separator-color-default);
+}
+
+.muka-divider--contrast {
+  background-color: var(--separator-color-contrast);
+}
+
+
 /* Dialog */
 /* Dialog Component Styles */
 
@@ -8519,30 +8546,47 @@ li.muka-listitem {
 }
 
 
-/* Divider */
-/* Divider Component Styles - Using Muka Design Tokens */
+/* DataPieChart */
+/* DataPieChart Component Styles - Using Muka Design Tokens */
 
-.muka-divider {
+.muka-data-pie-chart {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   flex-shrink: 0;
 }
 
-.muka-divider--horizontal {
+.muka-data-pie-chart__svg {
+  display: block;
   width: 100%;
-  height: var(--separator-width);
+  height: 100%;
+  /* Start the segment at 12 o'clock instead of 3 o'clock */
+  transform: rotate(-90deg);
 }
 
-.muka-divider--vertical {
-  height: 100%;
-  width: var(--separator-width);
-  align-self: stretch;
+.muka-data-pie-chart__track {
+  fill: none;
 }
 
-.muka-divider--default {
-  background-color: var(--separator-color-default);
+.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-divider--contrast {
-  background-color: var(--separator-color-contrast);
+.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);
 }
 
 
@@ -8714,50 +8758,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);
-}
-
-
 /* Container */
 /* Container Component - Layout tokens (container.max-width, container.gap) */
 

package/dist/styles/muka-light.css

@@ -8220,6 +8220,33 @@ li.muka-listitem {
 }
 
 
+/* Divider */
+/* Divider Component Styles - Using Muka Design Tokens */
+
+.muka-divider {
+  flex-shrink: 0;
+}
+
+.muka-divider--horizontal {
+  width: 100%;
+  height: var(--separator-width);
+}
+
+.muka-divider--vertical {
+  height: 100%;
+  width: var(--separator-width);
+  align-self: stretch;
+}
+
+.muka-divider--default {
+  background-color: var(--separator-color-default);
+}
+
+.muka-divider--contrast {
+  background-color: var(--separator-color-contrast);
+}
+
+
 /* Dialog */
 /* Dialog Component Styles */
 
@@ -8519,30 +8546,47 @@ li.muka-listitem {
 }
 
 
-/* Divider */
-/* Divider Component Styles - Using Muka Design Tokens */
+/* DataPieChart */
+/* DataPieChart Component Styles - Using Muka Design Tokens */
 
-.muka-divider {
+.muka-data-pie-chart {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   flex-shrink: 0;
 }
 
-.muka-divider--horizontal {
+.muka-data-pie-chart__svg {
+  display: block;
   width: 100%;
-  height: var(--separator-width);
+  height: 100%;
+  /* Start the segment at 12 o'clock instead of 3 o'clock */
+  transform: rotate(-90deg);
 }
 
-.muka-divider--vertical {
-  height: 100%;
-  width: var(--separator-width);
-  align-self: stretch;
+.muka-data-pie-chart__track {
+  fill: none;
 }
 
-.muka-divider--default {
-  background-color: var(--separator-color-default);
+.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-divider--contrast {
-  background-color: var(--separator-color-contrast);
+.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);
 }
 
 
@@ -8714,50 +8758,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);
-}
-
-
 /* Container */
 /* Container Component - Layout tokens (container.max-width, container.gap) */
 

package/dist/styles/wireframe-dark.css

@@ -8220,6 +8220,33 @@ li.muka-listitem {
 }
 
 
+/* Divider */
+/* Divider Component Styles - Using Muka Design Tokens */
+
+.muka-divider {
+  flex-shrink: 0;
+}
+
+.muka-divider--horizontal {
+  width: 100%;
+  height: var(--separator-width);
+}
+
+.muka-divider--vertical {
+  height: 100%;
+  width: var(--separator-width);
+  align-self: stretch;
+}
+
+.muka-divider--default {
+  background-color: var(--separator-color-default);
+}
+
+.muka-divider--contrast {
+  background-color: var(--separator-color-contrast);
+}
+
+
 /* Dialog */
 /* Dialog Component Styles */
 
@@ -8519,30 +8546,47 @@ li.muka-listitem {
 }
 
 
-/* Divider */
-/* Divider Component Styles - Using Muka Design Tokens */
+/* DataPieChart */
+/* DataPieChart Component Styles - Using Muka Design Tokens */
 
-.muka-divider {
+.muka-data-pie-chart {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   flex-shrink: 0;
 }
 
-.muka-divider--horizontal {
+.muka-data-pie-chart__svg {
+  display: block;
   width: 100%;
-  height: var(--separator-width);
+  height: 100%;
+  /* Start the segment at 12 o'clock instead of 3 o'clock */
+  transform: rotate(-90deg);
 }
 
-.muka-divider--vertical {
-  height: 100%;
-  width: var(--separator-width);
-  align-self: stretch;
+.muka-data-pie-chart__track {
+  fill: none;
 }
 
-.muka-divider--default {
-  background-color: var(--separator-color-default);
+.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-divider--contrast {
-  background-color: var(--separator-color-contrast);
+.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);
 }
 
 
@@ -8714,50 +8758,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);
-}
-
-
 /* Container */
 /* Container Component - Layout tokens (container.max-width, container.gap) */
 

package/dist/styles/wireframe-light.css

@@ -8220,6 +8220,33 @@ li.muka-listitem {
 }
 
 
+/* Divider */
+/* Divider Component Styles - Using Muka Design Tokens */
+
+.muka-divider {
+  flex-shrink: 0;
+}
+
+.muka-divider--horizontal {
+  width: 100%;
+  height: var(--separator-width);
+}
+
+.muka-divider--vertical {
+  height: 100%;
+  width: var(--separator-width);
+  align-self: stretch;
+}
+
+.muka-divider--default {
+  background-color: var(--separator-color-default);
+}
+
+.muka-divider--contrast {
+  background-color: var(--separator-color-contrast);
+}
+
+
 /* Dialog */
 /* Dialog Component Styles */
 
@@ -8519,30 +8546,47 @@ li.muka-listitem {
 }
 
 
-/* Divider */
-/* Divider Component Styles - Using Muka Design Tokens */
+/* DataPieChart */
+/* DataPieChart Component Styles - Using Muka Design Tokens */
 
-.muka-divider {
+.muka-data-pie-chart {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   flex-shrink: 0;
 }
 
-.muka-divider--horizontal {
+.muka-data-pie-chart__svg {
+  display: block;
   width: 100%;
-  height: var(--separator-width);
+  height: 100%;
+  /* Start the segment at 12 o'clock instead of 3 o'clock */
+  transform: rotate(-90deg);
 }
 
-.muka-divider--vertical {
-  height: 100%;
-  width: var(--separator-width);
-  align-self: stretch;
+.muka-data-pie-chart__track {
+  fill: none;
 }
 
-.muka-divider--default {
-  background-color: var(--separator-color-default);
+.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-divider--contrast {
-  background-color: var(--separator-color-contrast);
+.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);
 }
 
 
@@ -8714,50 +8758,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);
-}
-
-
 /* Container */
 /* Container Component - Layout tokens (container.max-width, container.gap) */
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revikornmann/muka-ui",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "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

@@ -22,16 +22,19 @@ it and prefer it when present, since it always matches the installed version.
 
 If a previous git dependency exists (e.g.
 `"@revikornmann/muka-ui": "github:revikornmann/muka#<sha>"`), it is replaced by
-the install below.
+the install below. Use the repo's package manager — check the lockfile first
+(`pnpm-lock.yaml` → pnpm, `yarn.lock` → yarn, otherwise npm):
 
 ```bash
-npm install @revikornmann/muka-ui@latest --save
+npm install @revikornmann/muka-ui@latest --save   # npm
+# pnpm add @revikornmann/muka-ui@latest            # pnpm
+# yarn add @revikornmann/muka-ui@latest            # yarn
 ```
 
 Confirm it resolved from npmjs (not a git URL):
 
 ```bash
-npm ls @revikornmann/muka-ui
+npm ls @revikornmann/muka-ui   # or: pnpm why … / yarn why …
 ```
 
 ## Step 2: Import styles and components

package/templates/update-muka.yml

@@ -11,7 +11,8 @@
 #   bump. Pushing to the default branch lets your host (e.g. Vercel) redeploy.
 #
 #   Muka UI is a public npm package, so installing needs no registry config or
-#   auth token.
+#   auth token. The install step auto-detects your package manager from the
+#   lockfile (npm / pnpm / yarn) and commits whichever lockfile changed.
 
 name: Update Muka UI
 
@@ -43,19 +44,35 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: '20'
-          cache: 'npm'
+
+      - name: Enable corepack (pnpm / yarn shims)
+        run: corepack enable
 
       - name: Install target Muka version
         # repository_dispatch carries the published version; workflow_dispatch
         # falls back to @latest. Public npm package — no registry config or auth.
+        # Auto-detects the package manager from the repo's lockfile.
+        env:
+          # Don't prompt to download a corepack-managed pnpm/yarn in CI.
+          COREPACK_ENABLE_DOWNLOAD_PROMPT: '0'
         run: |
           VERSION="${{ github.event.client_payload.version }}"
-          npm install "@revikornmann/muka-ui@${VERSION:-latest}" --save
+          SPEC="@revikornmann/muka-ui@${VERSION:-latest}"
+          if [ -f pnpm-lock.yaml ]; then
+            echo "Detected pnpm"
+            pnpm add "$SPEC"
+          elif [ -f yarn.lock ]; then
+            echo "Detected yarn"
+            yarn add "$SPEC"
+          else
+            echo "Detected npm"
+            npm install "$SPEC" --save
+          fi
 
       - name: Check for changes
         id: changes
         run: |
-          if git diff --quiet -- package.json package-lock.json; then
+          if git diff --quiet -- package.json package-lock.json pnpm-lock.yaml yarn.lock; then
             echo "changed=false" >> "$GITHUB_OUTPUT"
             echo "Already on the target muka version — nothing to update."
           else
@@ -68,7 +85,11 @@ jobs:
         run: |
           git config --local user.email "action@github.com"
           git config --local user.name "GitHub Action"
-          git add package.json package-lock.json
+          # Stage package.json plus whichever lockfile this repo uses.
+          git add package.json
+          for lock in package-lock.json pnpm-lock.yaml yarn.lock; do
+            [ -f "$lock" ] && git add "$lock"
+          done
           git commit -m "⬆️ Update @revikornmann/muka-ui to ${{ github.event.client_payload.version || 'latest' }}
 
           Triggered by: ${{ github.event_name }}