@revikornmann/muka-ui 0.2.1

package/dist/styles/components/Tooltip.css

@@ -0,0 +1,33 @@
+/* Tooltip Component Styles */
+
+.muka-tooltip__content {
+  background-color: var(--color-surface-inverse);
+  color: var(--color-text-default-inverse);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-2) var(--spacing-3);
+  box-shadow: var(--shadow-level2);
+  font-family: var(--text-label-sm-regular-fontFamily);
+  font-weight: var(--text-label-sm-regular-fontWeight);
+  font-size: var(--text-label-sm-regular-fontSize);
+  line-height: var(--text-label-sm-regular-lineHeight);
+  max-width: 16rem;
+  z-index: 50;
+  user-select: none;
+  animation: muka-tooltip-fade-in 150ms ease;
+}
+
+@keyframes muka-tooltip-fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* Arrow */
+.muka-tooltip__arrow {
+  fill: var(--color-surface-inverse);
+}

package/dist/styles/components/TopBar.css

@@ -0,0 +1,72 @@
+/* ControlBar Component Styles */
+
+/*
+ * Sizing is driven by `--cb-*` custom properties set per tier. Base (small)
+ * values live on `.muka-controlbar`; the large tier flips them — either
+ * responsively (no `size` prop, scoped with `:not([data-size])`, large at
+ * 1024px+ to track the TopBar large tier) or forced via `[data-size="…"]`.
+ * Size affects the bar's own box only; `--controlbar-content-radius` is exposed
+ * for consumers to apply to nested fields.
+ */
+.muka-controlbar {
+  display: flex;
+  justify-content: center;
+  background-color: var(--controlbar-color-background);
+  width: 100%;
+
+  /* ─── Small tier (base) ─── */
+  --cb-padding-x: var(--controlbar-padding-x-sm);
+  --cb-padding-bottom: var(--controlbar-padding-bottom-sm);
+  --cb-max-width: var(--controlbar-max-width-sm);
+  --cb-gap: var(--controlbar-gap-sm);
+  --controlbar-content-radius: var(--controlbar-content-radius-sm);
+
+  padding: 0 var(--cb-padding-x) var(--cb-padding-bottom);
+}
+
+/* ─── Large tier ─── */
+@media (min-width: 1024px) {
+  .muka-controlbar:not([data-size]) {
+    --cb-padding-x: var(--controlbar-padding-x-lg);
+    --cb-padding-bottom: var(--controlbar-padding-bottom-lg);
+    --cb-max-width: var(--controlbar-max-width-lg);
+    --cb-gap: var(--controlbar-gap-lg);
+    --controlbar-content-radius: var(--controlbar-content-radius-lg);
+  }
+}
+
+.muka-controlbar[data-size='lg'] {
+  --cb-padding-x: var(--controlbar-padding-x-lg);
+  --cb-padding-bottom: var(--controlbar-padding-bottom-lg);
+  --cb-max-width: var(--controlbar-max-width-lg);
+  --cb-gap: var(--controlbar-gap-lg);
+  --controlbar-content-radius: var(--controlbar-content-radius-lg);
+}
+
+/* Contents are capped at the tier max-width and centered, so they don't
+   stretch full-width on larger viewports while the bar background stays edge-to-edge. */
+.muka-controlbar__content {
+  display: flex;
+  align-items: center;
+  gap: var(--cb-gap);
+  width: 100%;
+  max-width: var(--cb-max-width);
+}
+
+/* ─── Justification variants ─────────────────────────── */
+
+.muka-controlbar--justify-start .muka-controlbar__content {
+  justify-content: flex-start;
+}
+
+.muka-controlbar--justify-center .muka-controlbar__content {
+  justify-content: center;
+}
+
+.muka-controlbar--justify-end .muka-controlbar__content {
+  justify-content: flex-end;
+}
+
+.muka-controlbar--justify-between .muka-controlbar__content {
+  justify-content: space-between;
+}

package/dist/styles/components/TypingIndicator.css

@@ -0,0 +1,69 @@
+/* TypingIndicator Component Styles */
+
+.muka-typing-indicator {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  padding: var(--spacing-2) var(--spacing-3);
+}
+
+.muka-typing-indicator__dot {
+  display: inline-block;
+  border-radius: 50%;
+  background-color: var(--color-text-subtle-default);
+  animation: muka-typing-bounce 1.2s ease-in-out infinite;
+}
+
+.muka-typing-indicator--sm .muka-typing-indicator__dot {
+  width: 4px;
+  height: 4px;
+}
+
+.muka-typing-indicator--md .muka-typing-indicator__dot {
+  width: 6px;
+  height: 6px;
+}
+
+.muka-typing-indicator__dot:nth-child(1) {
+  animation-delay: 0s;
+}
+.muka-typing-indicator__dot:nth-child(2) {
+  animation-delay: 0.16s;
+}
+.muka-typing-indicator__dot:nth-child(3) {
+  animation-delay: 0.32s;
+}
+
+@keyframes muka-typing-bounce {
+  0%, 80%, 100% {
+    transform: translateY(0);
+    opacity: 0.4;
+  }
+  40% {
+    transform: translateY(-3px);
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .muka-typing-indicator__dot {
+    animation: muka-typing-fade 1.4s ease-in-out infinite;
+    transform: none !important;
+  }
+  @keyframes muka-typing-fade {
+    0%, 100% { opacity: 0.4; }
+    50% { opacity: 1; }
+  }
+}
+
+.muka-typing-indicator__sr-label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/dist/styles/components/View.css

@@ -0,0 +1,96 @@
+/* View Component Styles */
+
+/* ─── Base layout ─────────────────────────────────────── */
+
+.muka-view {
+  display: flex;
+  flex-direction: column;
+  height: 100dvh;
+  background-color: var(--view-color-background);
+  position: relative;
+  isolation: isolate;
+  box-sizing: border-box;
+
+  /* Width reserved for the footer nav once it becomes a left sidebar at the
+     large tier (matches BottomBar's desktopAs="sidebar" rail width). */
+  --view-sidebar-width: 240px;
+}
+
+/* ─── Surface level variants ─────────────────────────── */
+
+.muka-view--surface-3 {
+  background-color: var(--color-surface-level3);
+}
+
+/* ─── Large screens: make room for the left sidebar ──────────
+   A footer nav with desktopAs="sidebar" becomes a fixed 240px left rail at
+   ≥1024px. Offset the shell so the TopBar/body clear it — tied to the sidebar's
+   actual presence (the `.muka-bottombar--desktop-sidebar` element) rather than
+   the View's `size`, so a forced `size="lg"` below 1024px never reserves space
+   for a sidebar that hasn't rendered yet. */
+@media (min-width: 1024px) {
+  .muka-view:has(.muka-bottombar--desktop-sidebar) {
+    padding-left: var(--view-sidebar-width);
+  }
+}
+
+/* ─── TopBar elevation ────────────────────────────────── */
+
+.muka-view .muka-topbar {
+  flex-shrink: 0;
+  z-index: 3;
+  box-shadow: var(--shadow-level2);
+}
+
+/* ─── Scrollable body ─────────────────────────────────── */
+
+.muka-view__body {
+  flex: 1 1 0%;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: clip;
+  z-index: 1;
+}
+
+/* Inner wrapper constrains content width at the large tier (enterprise desktop)
+   using the alias-layer section/container tokens, while the body scrolls full
+   width. Full-bleed below large. */
+.muka-view__body-inner {
+  width: 100%;
+}
+
+@media (min-width: 1024px) {
+  .muka-view:not([data-size]) .muka-view__body-inner {
+    max-width: var(--container-max-width-xl);
+    margin-inline: auto;
+    padding-inline: var(--section-padding-horizontal-default);
+  }
+}
+
+.muka-view[data-size='lg'] .muka-view__body-inner {
+  max-width: var(--container-max-width-xl);
+  margin-inline: auto;
+  padding-inline: var(--section-padding-horizontal-default);
+}
+
+/* ─── Footer (e.g. BottomBar) ─────────────────────────── */
+
+.muka-view__footer {
+  flex-shrink: 0;
+  z-index: 2;
+}
+
+/* Inside an AppShell, the persistent left rail replaces the per-view bottom
+   navigation at the large tier, so hide a footer that holds a navigation bar.
+   Scoped to `.muka-app-shell` so bare Views (and the standalone
+   desktopAs="sidebar" footer pattern above) are unaffected. Action-bar footers
+   (`.muka-bottombar--actions`) don't match and remain at the bottom. */
+@media (min-width: 1024px) {
+  .muka-app-shell .muka-view__footer:has(.muka-bottombar--navigation) {
+    display: none;
+  }
+}
+
+.muka-app-shell[data-size='lg'] .muka-view__footer:has(.muka-bottombar--navigation) {
+  display: none;
+}