@revikornmann/muka-ui 0.2.1

package/dist/styles/components/ListItem.css

@@ -0,0 +1,185 @@
+/* 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;
+}

package/dist/styles/components/Menu.css

@@ -0,0 +1,280 @@
+/* Menu Component Styles */
+
+/* ─── Content Container ──────────────────────────────────────────────────── */
+
+.muka-menu__content {
+  min-width: var(--menu-content-min-width);
+  max-height: var(--menu-content-max-height);
+  overflow-y: auto;
+  background-color: var(--menu-content-color-background);
+  border: var(--menu-content-border-width) solid var(--menu-content-color-border);
+  border-radius: var(--menu-content-border-radius);
+  box-shadow: var(--menu-content-shadow);
+  padding: var(--menu-content-padding);
+  z-index: 50;
+
+  /* Animation */
+  animation-duration: 150ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.muka-menu__content[data-state='open'] {
+  animation-name: muka-menu-fade-in;
+}
+
+.muka-menu__content[data-state='closed'] {
+  animation-name: muka-menu-fade-out;
+}
+
+.muka-menu__content[data-side='top'] {
+  animation-name: muka-menu-slide-down;
+}
+
+.muka-menu__content[data-side='bottom'] {
+  animation-name: muka-menu-slide-up;
+}
+
+.muka-menu__content[data-side='left'] {
+  animation-name: muka-menu-slide-right;
+}
+
+.muka-menu__content[data-side='right'] {
+  animation-name: muka-menu-slide-left;
+}
+
+/* ─── Menu Item ──────────────────────────────────────────────────────────── */
+
+.muka-menu__item {
+  display: flex;
+  align-items: center;
+  gap: var(--menu-item-gap);
+  min-height: var(--menu-item-height);
+  padding: var(--menu-item-padding-y) var(--menu-item-padding-x);
+  border-radius: var(--menu-item-border-radius);
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  font-family: var(--text-label-md-regular-font-family);
+  font-size: var(--text-label-md-regular-font-size);
+  font-weight: var(--text-label-md-regular-font-weight);
+  line-height: var(--text-label-md-regular-line-height);
+  color: var(--menu-item-color-default-foreground);
+  background-color: var(--menu-item-color-default-background);
+  transition: background-color 100ms ease, color 100ms ease;
+}
+
+.muka-menu__item:hover,
+.muka-menu__item[data-highlighted] {
+  background-color: var(--menu-item-color-hover-background);
+  color: var(--menu-item-color-hover-foreground);
+}
+
+.muka-menu__item:focus,
+.muka-menu__item[data-highlighted]:focus {
+  background-color: var(--menu-item-color-focus-background);
+  color: var(--menu-item-color-focus-foreground);
+}
+
+/* Disabled */
+.muka-menu__item--disabled,
+.muka-menu__item[data-disabled] {
+  color: var(--menu-item-color-disabled-foreground);
+  background-color: var(--menu-item-color-disabled-background);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.muka-menu__item--disabled .muka-menu__item-icon,
+.muka-menu__item[data-disabled] .muka-menu__item-icon {
+  color: var(--menu-item-color-disabled-icon);
+}
+
+/* Destructive */
+.muka-menu__item--destructive {
+  color: var(--menu-item-color-destructive-default-foreground);
+}
+
+.muka-menu__item--destructive .muka-menu__item-icon {
+  color: var(--menu-item-color-destructive-default-icon);
+}
+
+.muka-menu__item--destructive:hover,
+.muka-menu__item--destructive[data-highlighted] {
+  background-color: var(--menu-item-color-destructive-hover-background);
+  color: var(--menu-item-color-destructive-hover-foreground);
+}
+
+.muka-menu__item--destructive:hover .muka-menu__item-icon,
+.muka-menu__item--destructive[data-highlighted] .muka-menu__item-icon {
+  color: var(--menu-item-color-destructive-hover-icon);
+}
+
+/* ─── Item Parts ─────────────────────────────────────────────────────────── */
+
+.muka-menu__item-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--menu-item-color-default-icon);
+  transition: color 100ms ease;
+}
+
+.muka-menu__item:hover .muka-menu__item-icon,
+.muka-menu__item[data-highlighted] .muka-menu__item-icon {
+  color: var(--menu-item-color-hover-icon);
+}
+
+.muka-menu__item-label {
+  flex: 1;
+  min-width: 0;
+}
+
+.muka-menu__item-shortcut {
+  flex-shrink: 0;
+  margin-left: auto;
+  padding-left: var(--menu-item-gap);
+  font-size: var(--text-label-sm-regular-font-size);
+  color: var(--menu-shortcut-color);
+  opacity: 0.7;
+}
+
+.muka-menu__item-chevron {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-left: auto;
+  color: var(--menu-shortcut-color);
+}
+
+/* ─── Indicator (Checkbox/Radio) ─────────────────────────────────────────── */
+
+.muka-menu__item-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--menu-checkbox-indicator-size);
+  height: var(--menu-checkbox-indicator-size);
+  flex-shrink: 0;
+  color: var(--menu-checkbox-indicator-color);
+}
+
+.muka-menu__item--checkbox,
+.muka-menu__item--radio {
+  padding-left: var(--menu-item-padding-x);
+}
+
+.muka-menu__radio-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: var(--menu-radio-indicator-color);
+}
+
+/* ─── Separator ──────────────────────────────────────────────────────────── */
+
+.muka-menu__separator {
+  height: var(--menu-separator-height);
+  margin: var(--menu-separator-margin-y) 0;
+  background-color: var(--menu-separator-color);
+}
+
+/* ─── Group ──────────────────────────────────────────────────────────────── */
+
+.muka-menu__group {
+  /* No additional styles needed - just a container */
+}
+
+.muka-menu__group-label {
+  padding: var(--menu-group-label-padding-y) var(--menu-group-label-padding-x);
+  font-family: var(--text-label-sm-semibold-font-family);
+  font-size: var(--text-label-sm-semibold-font-size);
+  font-weight: var(--text-label-sm-semibold-font-weight);
+  line-height: var(--text-label-sm-semibold-line-height);
+  color: var(--menu-group-label-color);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* ─── Radio Group ────────────────────────────────────────────────────────── */
+
+.muka-menu__radio-group {
+  /* No additional styles needed - just a container */
+}
+
+/* ─── Context Menu Trigger ───────────────────────────────────────────────── */
+
+.muka-context-menu__trigger {
+  /* Allow the trigger to be styled by the parent */
+}
+
+.muka-context-menu__trigger:focus-visible {
+  outline: var(--contextmenu-trigger-outline-width) solid var(--contextmenu-trigger-outline-color);
+  outline-offset: var(--contextmenu-trigger-outline-offset);
+  border-radius: var(--border-radius-sm);
+}
+
+/* ─── Animations ─────────────────────────────────────────────────────────── */
+
+@keyframes muka-menu-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes muka-menu-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes muka-menu-slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes muka-menu-slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes muka-menu-slide-left {
+  from {
+    opacity: 0;
+    transform: translateX(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes muka-menu-slide-right {
+  from {
+    opacity: 0;
+    transform: translateX(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}

package/dist/styles/components/NavigationTransition.css

@@ -0,0 +1,25 @@
+/* NavigationTransition Component Styles */
+
+/* ─── Wrapper ────────────────────────────────────────── */
+
+.muka-nav-transition {
+  position: relative;
+  height: 100vh;
+  overflow: hidden;
+}
+
+/* Disable interaction during animation */
+.muka-nav-transition--active {
+  pointer-events: none;
+}
+
+/* ─── View slots ─────────────────────────────────────── */
+
+.muka-nav-transition--active .muka-nav-transition__view {
+  position: absolute;
+  inset: 0;
+}
+
+/* Z-index layering */
+.muka-nav-transition__view--bottom { z-index: 1; }
+.muka-nav-transition__view--top { z-index: 2; }

package/dist/styles/components/NumberInput.css

@@ -0,0 +1,27 @@
+/* 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;
+}

package/dist/styles/components/Pagination.css

@@ -0,0 +1,99 @@
+/* Pagination Component Styles */
+
+.muka-pagination__list {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* Base button */
+.muka-pagination__button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: var(--border-width-regular) solid transparent;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--color-text-default-default);
+  cursor: pointer;
+  font: inherit;
+  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+  padding: 0;
+}
+
+.muka-pagination__button:hover:not(:disabled):not(.muka-pagination__button--active) {
+  background-color: var(--color-surface-level1);
+}
+
+/* Active page */
+.muka-pagination__button--active {
+  background-color: var(--button-color-primary-default-background);
+  color: var(--button-color-primary-default-foreground);
+  border-color: var(--button-color-primary-default-background);
+  font-weight: 600;
+}
+
+/* Nav buttons (prev/next/first/last) */
+.muka-pagination__button--nav {
+  color: var(--color-text-subtle-default);
+}
+
+.muka-pagination__button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Ellipsis */
+.muka-pagination__ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-subtle-default);
+  user-select: none;
+}
+
+/* Disabled root */
+.muka-pagination--disabled {
+  pointer-events: none;
+  opacity: 0.4;
+}
+
+/* Size variants */
+.muka-pagination--sm .muka-pagination__button {
+  min-width: var(--button-height-sm);
+  height: var(--button-height-sm);
+  font-size: var(--text-label-sm-regular-fontSize);
+}
+
+.muka-pagination--sm .muka-pagination__ellipsis {
+  min-width: var(--button-height-sm);
+  height: var(--button-height-sm);
+  font-size: var(--text-label-sm-regular-fontSize);
+}
+
+.muka-pagination--md .muka-pagination__button {
+  min-width: var(--button-height-default);
+  height: var(--button-height-default);
+  font-size: var(--text-label-md-regular-fontSize);
+}
+
+.muka-pagination--md .muka-pagination__ellipsis {
+  min-width: var(--button-height-default);
+  height: var(--button-height-default);
+  font-size: var(--text-label-md-regular-fontSize);
+}
+
+.muka-pagination--lg .muka-pagination__button {
+  min-width: var(--button-height-lg);
+  height: var(--button-height-lg);
+  font-size: var(--text-label-lg-regular-fontSize);
+}
+
+.muka-pagination--lg .muka-pagination__ellipsis {
+  min-width: var(--button-height-lg);
+  height: var(--button-height-lg);
+  font-size: var(--text-label-lg-regular-fontSize);
+}

package/dist/styles/components/PieChart.css

@@ -0,0 +1,94 @@
+/* PieChart Component Styles - Using Muka Design Tokens */
+
+.muka-piechart {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-4);
+}
+
+/* Legend layout */
+.muka-piechart--legend-right {
+  flex-direction: row;
+}
+
+.muka-piechart--legend-bottom {
+  flex-direction: column;
+}
+
+/* ========================================
+   CHART
+   ======================================== */
+
+.muka-piechart__chart {
+  position: relative;
+  flex-shrink: 0;
+}
+
+.muka-piechart__chart--sm {
+  width: var(--piechart-size-diameter-sm);
+  height: var(--piechart-size-diameter-sm);
+}
+
+.muka-piechart__chart--md {
+  width: var(--piechart-size-diameter-md);
+  height: var(--piechart-size-diameter-md);
+}
+
+.muka-piechart__chart--lg {
+  width: var(--piechart-size-diameter-lg);
+  height: var(--piechart-size-diameter-lg);
+}
+
+.muka-piechart__svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  /* Start slices at 12 o'clock instead of 3 o'clock */
+  transform: rotate(-90deg);
+}
+
+.muka-piechart__track {
+  fill: none;
+  stroke: var(--piechart-color-track);
+}
+
+.muka-piechart__segment {
+  fill: none;
+}
+
+/* ========================================
+   LEGEND
+   ======================================== */
+
+.muka-piechart__legend {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+}
+
+.muka-piechart__legend-item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  font-family: var(--text-body-sm-regular-fontFamily);
+  font-weight: var(--text-body-sm-regular-fontWeight);
+  font-size: var(--text-body-sm-regular-fontSize);
+  line-height: var(--text-body-sm-regular-lineHeight);
+  color: var(--color-text-default-default);
+}
+
+.muka-piechart__swatch {
+  flex-shrink: 0;
+  width: var(--spacing-3);
+  height: var(--spacing-3);
+  border-radius: var(--border-radius-sm);
+}
+
+.muka-piechart__legend-value {
+  margin-left: auto;
+  padding-left: var(--spacing-2);
+  color: var(--color-text-subtle-default);
+}