@revikornmann/muka-ui 0.2.1 → 0.2.3

package/dist/styles/wireframe-light.css

@@ -5818,37 +5818,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);
-}
-
-
 /* PieChart */
 /* PieChart Component Styles - Using Muka Design Tokens */
 
@@ -6048,6 +6017,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);
+}
+
+
 /* NumberInput */
 /* NumberInput — reuses Input field styles (../Input/Input.css). */
 /* Only the prefix/suffix affixes are NumberInput-specific. */
@@ -6106,6 +6106,194 @@ 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 */
 
@@ -6389,194 +6577,6 @@ body {
 }
 
 
-/* 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
  *
@@ -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,33 +8546,6 @@ 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);
-}
-
-
 /* DataTable */
 /* DataTable Component Styles - Using Muka Design Tokens */
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revikornmann/muka-ui",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "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
 
@@ -42,20 +43,37 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
-          cache: 'npm'
+          # Node 22 LTS: current pnpm/yarn (via corepack) require Node >= 22.13.
+          node-version: '22'
+
+      - 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 +86,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 }}