@revikornmann/muka-ui 0.2.1

package/dist/esm/components/DataTable/DataTable.css

@@ -0,0 +1,165 @@
+/* DataTable Component Styles - Using Muka Design Tokens */
+
+.muka-data-table-wrapper {
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.muka-data-table {
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+  table-layout: fixed;
+  background-color: var(--color-surface-level3);
+  color: var(--color-text-default-default);
+}
+
+.muka-data-table__caption {
+  padding: var(--spacing-3) var(--spacing-6);
+  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);
+  text-align: left;
+  caption-side: top;
+}
+
+/* ========================================
+   HEADER
+   ======================================== */
+
+.muka-data-table__head {
+  border-bottom: var(--border-width-regular, 1px) solid var(--color-border-default);
+}
+
+.muka-data-table__th {
+  background-color: var(--color-surface-level1);
+  padding: var(--spacing-2) var(--spacing-6);
+  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);
+  vertical-align: middle;
+  text-align: left;
+}
+
+.muka-data-table__th-label {
+  display: flex;
+  align-items: center;
+  min-height: 2rem; /* 32px slot — matches Figma header cell height */
+}
+
+/* ========================================
+   BODY
+   ======================================== */
+
+.muka-data-table__row {
+  border-bottom: var(--border-width-regular, 1px) solid var(--color-border-default);
+  transition: background-color 0.15s ease;
+}
+
+.muka-data-table__row:not(.muka-data-table__row--empty):hover {
+  background-color: var(--color-surface-hover);
+}
+
+.muka-data-table__td {
+  padding: var(--spacing-3) var(--spacing-6);
+  font-family: var(--text-body-base-regular-fontFamily);
+  font-weight: var(--text-body-base-regular-fontWeight);
+  font-size: var(--text-body-base-regular-fontSize);
+  line-height: var(--text-body-base-regular-lineHeight);
+  color: var(--color-text-default-default);
+  vertical-align: middle;
+}
+
+.muka-data-table__cell-content {
+  display: flex;
+  align-items: center;
+  min-height: 2rem; /* 32px slot — matches Figma body cell height */
+  word-break: break-word;
+}
+
+.muka-data-table__row--empty .muka-data-table__cell-content {
+  justify-content: center;
+  color: var(--color-text-subtle-default);
+}
+
+/* ========================================
+   ALIGNMENT
+   ======================================== */
+
+.muka-data-table__th--center,
+.muka-data-table__td--center {
+  text-align: center;
+}
+
+.muka-data-table__th--center .muka-data-table__th-label,
+.muka-data-table__th--center .muka-data-table__sort-button,
+.muka-data-table__td--center .muka-data-table__cell-content {
+  justify-content: center;
+}
+
+.muka-data-table__th--right,
+.muka-data-table__td--right {
+  text-align: right;
+}
+
+.muka-data-table__th--right .muka-data-table__th-label,
+.muka-data-table__th--right .muka-data-table__sort-button,
+.muka-data-table__td--right .muka-data-table__cell-content {
+  justify-content: flex-end;
+}
+
+/* ========================================
+   COLUMN DIVIDERS (vertical)
+   ======================================== */
+
+.muka-data-table--column-dividers .muka-data-table__th:not(:last-child),
+.muka-data-table--column-dividers .muka-data-table__td:not(:last-child) {
+  border-right: var(--border-width-regular, 1px) solid var(--color-border-default);
+}
+
+/* ========================================
+   SORTING
+   ======================================== */
+
+.muka-data-table__sort-button {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  width: 100%;
+  min-height: 2rem;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  color: inherit;
+  text-align: inherit;
+  cursor: pointer;
+  user-select: none;
+  border-radius: var(--border-radius-md, 8px);
+}
+
+.muka-data-table__sort-button:focus-visible {
+  outline: 2px solid var(--color-action-default);
+  outline-offset: 2px;
+}
+
+.muka-data-table__sort-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  opacity: 0.4;
+  transition: opacity 0.15s ease;
+}
+
+.muka-data-table__sort-button:hover .muka-data-table__sort-icon {
+  opacity: 0.7;
+}
+
+.muka-data-table__sort-icon--asc,
+.muka-data-table__sort-icon--desc {
+  opacity: 1;
+}

package/dist/esm/components/DataTable/DataTable.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import './DataTable.css';
+import { Icon } from '../Icon';
+/** Default comparator: numbers compare numerically, everything else as strings. */
+function compareValues(a, b) {
+    if (a == null && b == null)
+        return 0;
+    if (a == null)
+        return -1;
+    if (b == null)
+        return 1;
+    if (typeof a === 'number' && typeof b === 'number')
+        return a - b;
+    return String(a).localeCompare(String(b), undefined, { numeric: true });
+}
+const SortIcon = ({ direction }) => (_jsx("span", { className: `muka-data-table__sort-icon${direction ? ` muka-data-table__sort-icon--${direction}` : ''}`, "aria-hidden": "true", children: _jsx(Icon, { name: direction === 'asc' ? 'arrow-up-s' : 'arrow-down-s', variant: "line", size: "sm" }) }));
+/**
+ * DataTable Component
+ *
+ * Declarative, data-driven table. Pass `columns` and `data` and it renders the
+ * full header/body — including sortable headers and dividers. For a low-level
+ * compositional table (write your own rows/cells), use `Table` instead.
+ *
+ * Sorting is uncontrolled by default (click a sortable header to sort). Provide
+ * `sortKey` + `sortDirection` + `onSortChange` to control it externally.
+ */
+export function DataTable({ columns, data, sortKey, sortDirection = 'asc', onSortChange, columnDividers = false, getRowKey, caption, emptyMessage = 'No data', className = '', }) {
+    const isControlled = sortKey !== undefined;
+    const [internalSort, setInternalSort] = useState(null);
+    const activeKey = isControlled ? sortKey : internalSort?.key ?? null;
+    const activeDirection = isControlled ? sortDirection : internalSort?.direction ?? 'asc';
+    const handleSort = (column) => {
+        if (!column.sortable)
+            return;
+        const nextDirection = activeKey === column.key && activeDirection === 'asc' ? 'desc' : 'asc';
+        onSortChange?.(column.key, nextDirection);
+        if (!isControlled) {
+            setInternalSort({ key: column.key, direction: nextDirection });
+        }
+    };
+    // Only sort internally when uncontrolled — controlled consumers sort their own data.
+    const rows = React.useMemo(() => {
+        if (isControlled || !internalSort)
+            return data;
+        const { key, direction } = internalSort;
+        const sorted = [...data].sort((a, b) => compareValues(a[key], b[key]));
+        return direction === 'desc' ? sorted.reverse() : sorted;
+    }, [data, isControlled, internalSort]);
+    const tableClasses = [
+        'muka-data-table',
+        columnDividers && 'muka-data-table--column-dividers',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const resolveWidth = (width) => typeof width === 'number' ? `${width}px` : width;
+    return (_jsx("div", { className: "muka-data-table-wrapper", children: _jsxs("table", { className: tableClasses, children: [caption && _jsx("caption", { className: "muka-data-table__caption", children: caption }), _jsx("colgroup", { children: columns.map((column) => (_jsx("col", { style: column.width ? { width: resolveWidth(column.width) } : undefined }, column.key))) }), _jsx("thead", { className: "muka-data-table__head", children: _jsx("tr", { className: "muka-data-table__head-row", children: columns.map((column) => {
+                            const isActive = activeKey === column.key;
+                            const align = column.align ?? 'left';
+                            return (_jsx("th", { scope: "col", className: [
+                                    'muka-data-table__th',
+                                    `muka-data-table__th--${align}`,
+                                    column.sortable && 'muka-data-table__th--sortable',
+                                ]
+                                    .filter(Boolean)
+                                    .join(' '), "aria-sort": column.sortable
+                                    ? isActive
+                                        ? activeDirection === 'asc'
+                                            ? 'ascending'
+                                            : 'descending'
+                                        : 'none'
+                                    : undefined, children: column.sortable ? (_jsxs("button", { type: "button", className: "muka-data-table__sort-button", onClick: () => handleSort(column), children: [_jsx("span", { className: "muka-data-table__th-label", children: column.header }), _jsx(SortIcon, { direction: isActive ? activeDirection : null })] })) : (_jsx("span", { className: "muka-data-table__th-label", children: column.header })) }, column.key));
+                        }) }) }), _jsx("tbody", { className: "muka-data-table__body", children: rows.length === 0 ? (_jsx("tr", { className: "muka-data-table__row muka-data-table__row--empty", children: _jsx("td", { className: "muka-data-table__td", colSpan: columns.length, children: _jsx("span", { className: "muka-data-table__cell-content", children: emptyMessage }) }) })) : (rows.map((row, rowIndex) => (_jsx("tr", { className: "muka-data-table__row", children: columns.map((column) => {
+                            const align = column.align ?? 'left';
+                            const content = column.render
+                                ? column.render(row, rowIndex)
+                                : (row[column.key] ?? null);
+                            return (_jsx("td", { className: ['muka-data-table__td', `muka-data-table__td--${align}`]
+                                    .filter(Boolean)
+                                    .join(' '), children: _jsx("span", { className: "muka-data-table__cell-content", children: content }) }, column.key));
+                        }) }, getRowKey ? getRowKey(row, rowIndex) : rowIndex)))) })] }) }));
+}
+export default DataTable;
+//# sourceMappingURL=DataTable.js.map

package/dist/esm/components/DataTable/DataTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.js","sourceRoot":"","sources":["../../../../components/DataTable/DataTable.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/DataTable/index.js

@@ -0,0 +1,3 @@
+export { DataTable, } from './DataTable';
+export { default } from './DataTable';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/DataTable/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/DataTable/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,GAIV,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC"}

package/dist/esm/components/DatePicker/DatePicker.css

@@ -0,0 +1,29 @@
+/* DatePicker — compact native date field. */
+/* Field/label/helper styling is inherited from ../Input/Input.css. */
+
+/* Adopt the field typography on the native date input. */
+.muka-datepicker__field .muka-input__native {
+  font-family: var(--text-input-md-fontFamily);
+  font-size: var(--text-input-md-fontSize);
+  line-height: var(--text-input-md-lineHeight);
+}
+
+.muka-datepicker__field--sm .muka-input__native {
+  font-family: var(--text-input-sm-fontFamily);
+  font-size: var(--text-input-sm-fontSize);
+  line-height: var(--text-input-sm-lineHeight);
+}
+
+/* Tint the browser calendar indicator to match the field foreground. */
+.muka-datepicker__field .muka-input__native::-webkit-calendar-picker-indicator {
+  cursor: pointer;
+  opacity: 0.6;
+}
+
+.muka-datepicker__field .muka-input__native::-webkit-calendar-picker-indicator:hover {
+  opacity: 1;
+}
+
+.muka-datepicker__field .muka-input__native:disabled {
+  cursor: not-allowed;
+}

package/dist/esm/components/DatePicker/DatePicker.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useId, useRef } from 'react';
+import '../Input/Input.css';
+import './DatePicker.css';
+const pad2 = (n) => (n < 10 ? `0${n}` : `${n}`);
+/** Format a Date as a local yyyy-mm-dd string (avoids TZ day-shifting). */
+function toIso(date) {
+    if (!date || Number.isNaN(date.getTime()))
+        return '';
+    return `${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())}`;
+}
+/**
+ * DatePicker Component
+ *
+ * Compact date field built on the native <input type="date"> for full
+ * accessibility and the OS date picker. Styled with the Input field tokens.
+ *
+ * Emits `Date | null` (null when cleared). Sizes: sm, md, lg.
+ */
+export const DatePicker = ({ value, onChange, label, helperText, error = false, errorMessage, disabled = false, size = 'md', min, max, fullWidth = false, className = '', id, name, required = false, readOnly = false, 'aria-label': ariaLabel, }) => {
+    const [isFocused, setIsFocused] = useState(false);
+    const inputRef = useRef(null);
+    const generatedId = useId();
+    const inputId = id || name || generatedId;
+    const helperTextId = `${inputId}-helper`;
+    const errorMessageId = `${inputId}-error`;
+    const showError = error && errorMessage;
+    const describedBy = showError ? errorMessageId : helperText ? helperTextId : undefined;
+    const wrapperClasses = [
+        'muka-input',
+        'muka-datepicker',
+        fullWidth && 'muka-input--full-width',
+        className,
+    ].filter(Boolean).join(' ');
+    const fieldClasses = [
+        'muka-input__field',
+        'muka-datepicker__field',
+        `muka-input__field--${size}`,
+        isFocused && 'muka-input__field--focused',
+        error && 'muka-input__field--error',
+        disabled && 'muka-input__field--disabled',
+    ].filter(Boolean).join(' ');
+    return (_jsxs("div", { className: wrapperClasses, children: [label && (_jsxs("label", { className: `muka-input__label muka-input__label--${size}`, htmlFor: inputId, children: [label, required && _jsx("span", { className: "muka-input__required", "aria-hidden": "true", children: " *" })] })), _jsx("div", { className: fieldClasses, onMouseDown: (e) => {
+                    if (disabled)
+                        return;
+                    if (e.target !== inputRef.current) {
+                        e.preventDefault();
+                        inputRef.current?.focus();
+                    }
+                }, children: _jsx("input", { ref: inputRef, id: inputId, className: "muka-input__native", type: "date", value: toIso(value), min: min ? toIso(min) : undefined, max: max ? toIso(max) : undefined, disabled: disabled, readOnly: readOnly, name: name, required: required, "aria-label": ariaLabel, "aria-invalid": error || undefined, "aria-describedby": describedBy, onChange: (e) => {
+                        const v = e.target.value;
+                        if (!v) {
+                            onChange?.(null);
+                            return;
+                        }
+                        const [y, m, d] = v.split('-').map(Number);
+                        if (y && m && d)
+                            onChange?.(new Date(y, m - 1, d));
+                    }, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false) }) }), showError && (_jsx("p", { className: "muka-input__error", id: errorMessageId, role: "alert", children: errorMessage })), !showError && helperText && (_jsx("p", { className: "muka-input__helper", id: helperTextId, children: helperText }))] }));
+};
+export default DatePicker;
+//# sourceMappingURL=DatePicker.js.map

package/dist/esm/components/DatePicker/DatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../../components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/DatePicker/index.js

@@ -0,0 +1,3 @@
+export { DatePicker } from './DatePicker';
+export { default } from './DatePicker';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/DatePicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/DatePicker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAwB,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}

package/dist/esm/components/Dialog/Dialog.css

@@ -0,0 +1,264 @@
+/* Dialog Component Styles */
+
+/* ─── Native dialog reset ─────────────────────────────── */
+
+.muka-dialog {
+  border: none;
+  padding: 0;
+  max-width: none;
+  max-height: none;
+  overflow: visible;
+  background: transparent;
+  color: inherit;
+  box-shadow: none;
+}
+
+.muka-dialog:not([open]) {
+  display: none;
+}
+
+/* ─── Backdrop ────────────────────────────────────────── */
+
+.muka-dialog::backdrop {
+  background-color: var(--dialog-color-backdrop);
+}
+
+/* ─── Non-modal modifier ──────────────────────────────── */
+
+.muka-dialog--non-modal::backdrop {
+  pointer-events: auto;
+}
+
+/* ─── Mobile: all sizes bottom-attached (< 1024px) ───── */
+
+.muka-dialog--sm,
+.muka-dialog--md,
+.muka-dialog--lg {
+  width: 100%;
+  height: 100%;
+  max-width: 100vw;
+  max-height: 100vh;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: stretch;
+}
+
+.muka-dialog__surface:focus {
+  outline: none;
+}
+
+.muka-dialog--sm .muka-dialog__surface,
+.muka-dialog--md .muka-dialog__surface,
+.muka-dialog--lg .muka-dialog__surface {
+  background-color: var(--dialog-color-background);
+  border-radius: var(--dialog-border-radius) var(--dialog-border-radius) 0 0;
+  box-shadow: var(--dialog-shadow-default);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: var(--dialog-min-height-mobile);
+}
+
+/* Mobile per-size heights */
+.muka-dialog--sm .muka-dialog__surface {
+  height: var(--dialog-height-mobile-sm);
+}
+
+.muka-dialog--md .muka-dialog__surface {
+  height: var(--dialog-height-mobile-md);
+}
+
+.muka-dialog--lg .muka-dialog__surface {
+  height: calc(100vh - var(--dialog-margin-top-mobile));
+}
+
+/* Body */
+.muka-dialog--sm .muka-dialog__body,
+.muka-dialog--md .muka-dialog__body,
+.muka-dialog--lg .muka-dialog__body {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--dialog-padding-x);
+  background-color: var(--dialog-color-body-background);
+}
+
+/* ─── Surface level variants ─────────────────────────── */
+
+.muka-dialog--surface-2 .muka-dialog__body {
+  background-color: var(--color-surface-level2);
+}
+
+/* ─── Footer ──────────────────────────────────────────── */
+
+.muka-dialog__footer {
+  flex-shrink: 0;
+}
+
+/* Hide footer on mobile for modal dialogs with inputs (actions move to TopBar) */
+@media (max-width: 1023px) {
+  .muka-dialog:not(.muka-dialog--non-modal):not(.muka-dialog--no-inputs) .muka-dialog__footer {
+    display: none;
+  }
+
+  /* No-input modals: stack footer buttons vertically on mobile */
+  .muka-dialog--no-inputs .muka-bottombar--actions .muka-bottombar__content {
+    flex-direction: column;
+  }
+
+  .muka-dialog--no-inputs .muka-bottombar--actions .muka-bottombar__content > * {
+    width: 100%;
+  }
+}
+
+/* ─── Mobile slide animation (< 1024px) ─────────────── */
+
+@media (max-width: 1023px) {
+  /* Default state: surface off-screen (for entrance animation) */
+  .muka-dialog .muka-dialog__surface {
+    transform: translateY(100%);
+    opacity: 0;
+    transition: transform 200ms ease-out, opacity 200ms ease-out, height 200ms ease-out;
+  }
+
+  /* Slide in: surface visible */
+  .muka-dialog--slide-in .muka-dialog__surface {
+    transform: translateY(0);
+    opacity: 1;
+  }
+
+  /* Backdrop fade */
+  .muka-dialog::backdrop {
+    opacity: 0;
+    transition: opacity 200ms ease-out;
+  }
+
+  .muka-dialog--slide-in::backdrop {
+    opacity: 1;
+  }
+
+  /* Disable surface transition during drag */
+  .muka-dialog--dragging .muka-dialog__surface {
+    transition: none;
+  }
+}
+
+/* ─── Drag area ──────────────────────────────────────── */
+
+.muka-dialog__drag-area {
+  cursor: grab;
+}
+
+.muka-dialog--dragging .muka-dialog__drag-area {
+  cursor: grabbing;
+}
+
+/* ─── Desktop overrides (≥ 1024px) ────────────────────── */
+
+@media (min-width: 1024px) {
+  /* Shared desktop layout: centered card */
+  .muka-dialog--sm,
+  .muka-dialog--md,
+  .muka-dialog--lg {
+    justify-content: center;
+    align-items: center;
+  }
+
+  .muka-dialog--sm .muka-dialog__surface,
+  .muka-dialog--md .muka-dialog__surface,
+  .muka-dialog--lg .muka-dialog__surface {
+    border-radius: var(--dialog-border-radius-desktop);
+    height: auto;
+    width: 100%;
+  }
+
+  /* Half-height override not needed on desktop */
+  .muka-dialog--mobile-half .muka-dialog__surface {
+    height: auto;
+  }
+
+  /* SM: small centered card (560px) */
+  .muka-dialog--sm {
+    width: min(var(--dialog-width-sm), calc(100vw - 3rem));
+    height: auto;
+    max-height: var(--dialog-height-sm);
+    margin: auto;
+  }
+
+  .muka-dialog--sm .muka-dialog__surface {
+    max-height: var(--dialog-height-sm);
+  }
+
+  /* MD: medium centered card (872px) */
+  .muka-dialog--md {
+    width: min(var(--dialog-width-md), calc(100vw - 3rem));
+    height: auto;
+    max-height: var(--dialog-height-md);
+    margin: auto;
+  }
+
+  .muka-dialog--md .muka-dialog__surface {
+    max-height: var(--dialog-height-md);
+  }
+
+  /* LG: large centered card (1224px) */
+  .muka-dialog--lg {
+    width: min(var(--dialog-width-lg), calc(100vw - 3rem));
+    height: auto;
+    max-height: var(--dialog-height-lg);
+    margin: auto;
+  }
+
+  .muka-dialog--lg .muka-dialog__surface {
+    max-height: var(--dialog-height-lg);
+    flex: 1;
+  }
+
+  /* Hide drag handle on desktop (non-modal mobile only) */
+  .muka-dialog .muka-topbar__drag-handle-container {
+    display: none;
+  }
+
+  /* No drag cursor on desktop */
+  .muka-dialog__drag-area {
+    cursor: default;
+  }
+
+  /* Desktop TopBar border radius */
+  .muka-dialog .muka-topbar {
+    border-radius: var(--dialog-border-radius-desktop) var(--dialog-border-radius-desktop) 0 0;
+  }
+
+  /* Desktop BottomBar border radius */
+  .muka-dialog .muka-bottombar {
+    border-radius: 0 0 var(--dialog-border-radius-desktop) var(--dialog-border-radius-desktop);
+  }
+}
+
+/* ─── Responsive visibility helpers ──────────────────── */
+
+/* Visible on mobile only (< 1024px) — used for modal text buttons */
+.muka-dialog__mobile-only {
+  display: none;
+}
+
+@media (max-width: 1023px) {
+  .muka-dialog__mobile-only {
+    display: flex;
+  }
+}
+
+/* ─── Bar elevation shadows ──────────────────────────── */
+
+.muka-dialog .muka-topbar {
+  position: relative;
+  z-index: 1;
+  box-shadow: var(--shadow-level2);
+}
+
+.muka-dialog .muka-bottombar {
+  position: relative;
+  z-index: 1;
+  box-shadow: var(--shadow-level2);
+}