@revikornmann/muka-ui 0.2.2 → 0.2.3

package/dist/styles/index.css

@@ -5819,37 +5819,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 */
 
@@ -6049,6 +6018,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. */
@@ -6107,6 +6107,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 */
 
@@ -6287,294 +6475,106 @@ body {
 .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);
-  }
-}
-
-
-/* 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;
+  background-color: var(--menu-separator-color);
 }
 
-/* Leading content (icon or image) */
-.muka-listitem__leading {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: 48px;
-  height: 48px;
+/* ─── Group ──────────────────────────────────────────────────────────────── */
+
+.muka-menu__group {
+  /* No additional styles needed - just a container */
 }
 
-.muka-listitem__icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  color: var(--color-text-default-default);
+.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;
 }
 
-.muka-listitem__image {
-  width: 48px;
-  height: 48px;
-  border-radius: var(--radius-md);
-  object-fit: cover;
+/* ─── Radio Group ────────────────────────────────────────────────────────── */
+
+.muka-menu__radio-group {
+  /* No additional styles needed - just a container */
 }
 
-/* Main content area */
-.muka-listitem__content {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-4);
-  min-width: 0;
+/* ─── Context Menu Trigger ───────────────────────────────────────────────── */
+
+.muka-context-menu__trigger {
+  /* Allow the trigger to be styled by the parent */
 }
 
-.muka-listitem__text {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-1);
-  min-width: 0;
+.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);
 }
 
-/* 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;
+/* ─── Animations ─────────────────────────────────────────────────────────── */
+
+@keyframes muka-menu-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
-/* 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;
+@keyframes muka-menu-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
 }
 
-/* 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);
+@keyframes muka-menu-slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
-/* Bottom divider */
-.muka-listitem__divider {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 1px;
-  background-color: var(--color-border-default);
+@keyframes muka-menu-slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
-/* Button and anchor specific styles */
-button.muka-listitem,
-a.muka-listitem {
-  text-align: left;
-  width: 100%;
+@keyframes muka-menu-slide-left {
+  from {
+    opacity: 0;
+    transform: translateX(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
 }
 
-/* List item specific styles */
-li.muka-listitem {
-  list-style: none;
+@keyframes muka-menu-slide-right {
+  from {
+    opacity: 0;
+    transform: translateX(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
 }
 
 
@@ -8547,50 +8547,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 +8715,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) */