@revikornmann/muka-ui 0.2.1

package/dist/esm/components/Tabs/Tabs.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, createContext, useContext, useRef, useCallback, useEffect } from 'react';
+import './Tabs.css';
+const TabsContext = createContext(null);
+const useTabsContext = () => {
+    const context = useContext(TabsContext);
+    if (!context)
+        throw new Error('Tabs components must be used within a <Tabs> provider');
+    return context;
+};
+/**
+ * Tabs Component (Compound)
+ *
+ * Accessible tab interface with keyboard navigation.
+ * Uses: <Tabs>, <TabList>, <Tab>, <TabPanel>
+ *
+ * @accessibility WCAG 2.1 AA compliant (WAI-ARIA Tabs Pattern)
+ * - role="tablist" with aria-orientation
+ * - role="tab" with aria-selected, aria-controls
+ * - role="tabpanel" with aria-labelledby
+ * - Keyboard: ArrowLeft/Right, Home/End navigation
+ * - Roving tabindex pattern (active tab is focusable)
+ *
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
+ */
+export const Tabs = ({ children, defaultValue = '', value, onChange, size = 'md', alignment = 'left', className = '', }) => {
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const activeValue = value !== undefined ? value : internalValue;
+    const setActiveValue = useCallback((newValue) => {
+        if (value === undefined) {
+            setInternalValue(newValue);
+        }
+        onChange?.(newValue);
+    }, [value, onChange]);
+    const rootClasses = [
+        'muka-tabs',
+        `muka-tabs--size-${size}`,
+        `muka-tabs--align-${alignment}`,
+        className,
+    ].filter(Boolean).join(' ');
+    return (_jsx(TabsContext.Provider, { value: { activeValue, setActiveValue }, children: _jsx("div", { className: rootClasses, children: children }) }));
+};
+export const TabList = ({ children, className = '' }) => {
+    const { activeValue } = useTabsContext();
+    const listRef = useRef(null);
+    useEffect(() => {
+        if (!listRef.current)
+            return;
+        const activeTab = listRef.current.querySelector('[aria-selected="true"]');
+        if (activeTab) {
+            const scrollPos = activeTab.offsetLeft - listRef.current.clientWidth / 2 + activeTab.clientWidth / 2;
+            listRef.current.scrollTo({
+                left: scrollPos,
+                behavior: 'smooth',
+            });
+        }
+    }, [activeValue]);
+    const handleKeyDown = (e) => {
+        const tabs = listRef.current?.querySelectorAll('[role="tab"]:not([disabled])');
+        if (!tabs?.length)
+            return;
+        const tabArray = Array.from(tabs);
+        const currentIndex = tabArray.findIndex((tab) => tab === document.activeElement);
+        let nextIndex = null;
+        if (e.key === 'ArrowRight') {
+            nextIndex = (currentIndex + 1) % tabArray.length;
+        }
+        else if (e.key === 'ArrowLeft') {
+            nextIndex = (currentIndex - 1 + tabArray.length) % tabArray.length;
+        }
+        else if (e.key === 'Home') {
+            nextIndex = 0;
+        }
+        else if (e.key === 'End') {
+            nextIndex = tabArray.length - 1;
+        }
+        if (nextIndex !== null) {
+            e.preventDefault();
+            tabArray[nextIndex].focus();
+            tabArray[nextIndex].click();
+        }
+    };
+    return (_jsx("div", { ref: listRef, className: `muka-tabs__list ${className}`.trim(), role: "tablist", "aria-orientation": "horizontal", onKeyDown: handleKeyDown, tabIndex: -1, children: children }));
+};
+export const Tab = ({ value, children, icon, disabled = false, className = '', }) => {
+    const { activeValue, setActiveValue } = useTabsContext();
+    const isActive = activeValue === value;
+    const tabClasses = [
+        'muka-tabs__trigger',
+        isActive && 'muka-tabs__trigger--current',
+        disabled && 'muka-tabs__trigger--disabled',
+        className,
+    ].filter(Boolean).join(' ');
+    let renderedIcon = icon;
+    if (React.isValidElement(icon)) {
+        renderedIcon = React.cloneElement(icon, {
+            variant: isActive ? 'fill' : 'line',
+        });
+    }
+    return (_jsxs("button", { className: tabClasses, role: "tab", "aria-selected": isActive, "aria-controls": `tabpanel-${value}`, id: `tab-${value}`, tabIndex: isActive ? 0 : -1, disabled: disabled, onClick: () => !disabled && setActiveValue(value), children: [renderedIcon && _jsx("span", { className: "muka-tabs__icon", children: renderedIcon }), _jsx("span", { className: "muka-tabs__label", children: children })] }));
+};
+export const TabPanel = ({ value, children, className = '', }) => {
+    const { activeValue } = useTabsContext();
+    const isActive = activeValue === value;
+    if (!isActive)
+        return null;
+    return (_jsx("div", { className: `muka-tabs__panel ${className}`.trim(), role: "tabpanel", id: `tabpanel-${value}`, "aria-labelledby": `tab-${value}`, tabIndex: 0, children: children }));
+};
+export default Tabs;
+//# sourceMappingURL=Tabs.js.map

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/Tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC"}

package/dist/esm/components/Textarea/Textarea.css

@@ -0,0 +1,161 @@
+/* Textarea Component Styles - Using Muka Design Tokens */
+
+.muka-textarea {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+/* Label */
+.muka-textarea__label {
+  color: var(--color-text-default-default);
+  cursor: pointer;
+}
+
+.muka-textarea__label--sm {
+  font-family: var(--text-label-sm-semibold-fontFamily);
+  font-weight: var(--text-label-sm-semibold-fontWeight);
+  font-size: var(--text-label-sm-semibold-fontSize);
+  line-height: var(--text-label-sm-semibold-lineHeight);
+}
+
+.muka-textarea__label--md {
+  font-family: var(--text-label-md-semibold-fontFamily);
+  font-weight: var(--text-label-md-semibold-fontWeight);
+  font-size: var(--text-label-md-semibold-fontSize);
+  line-height: var(--text-label-md-semibold-lineHeight);
+}
+
+.muka-textarea__label--lg {
+  font-family: var(--text-label-lg-semibold-fontFamily);
+  font-weight: var(--text-label-lg-semibold-fontWeight);
+  font-size: var(--text-label-lg-semibold-fontSize);
+  line-height: var(--text-label-lg-semibold-lineHeight);
+}
+
+.muka-textarea__required {
+  color: var(--color-state-error-foreground);
+}
+
+/* Field container */
+.muka-textarea__field {
+  display: flex;
+  background-color: var(--input-field-color-default-background);
+  border: var(--border-width-regular) solid var(--input-field-color-default-border);
+  border-radius: var(--input-field-radius-md);
+  padding: var(--input-field-padding-y) var(--input-field-padding-x);
+  transition: border-color 0.2s ease, background-color 0.2s ease;
+  box-sizing: border-box;
+}
+
+.muka-textarea__field--sm {
+  min-height: var(--input-textarea-height-sm);
+  border-radius: var(--input-field-radius-sm);
+}
+
+.muka-textarea__field--md {
+  min-height: var(--input-textarea-height-default);
+  border-radius: var(--input-field-radius-md);
+}
+
+.muka-textarea__field--lg {
+  min-height: var(--input-textarea-height-lg);
+  border-radius: var(--input-field-radius-lg);
+}
+
+/* Focus state */
+.muka-textarea__field--focused:not(.muka-textarea__field--disabled) {
+  border-width: var(--border-width-bold);
+  border-color: var(--input-field-color-focus-border);
+  background-color: var(--input-field-color-focus-background);
+  padding: calc(var(--input-field-padding-y) - 1px) calc(var(--input-field-padding-x) - 1px);
+}
+
+/* Error state */
+.muka-textarea__field--error:not(.muka-textarea__field--disabled) {
+  border-width: var(--border-width-bold);
+  border-color: var(--input-field-color-error-border);
+  background-color: var(--input-field-color-error-background);
+  padding: calc(var(--input-field-padding-y) - 1px) calc(var(--input-field-padding-x) - 1px);
+}
+
+/* Disabled state */
+.muka-textarea__field--disabled {
+  background-color: var(--input-field-color-disabled-background);
+  border-color: var(--input-field-color-disabled-border);
+  cursor: not-allowed;
+}
+
+/* Native textarea */
+.muka-textarea__native {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--input-field-color-default-foreground);
+  font-family: var(--text-input-md-fontFamily);
+  font-weight: var(--text-input-md-fontWeight);
+  font-size: var(--text-input-md-fontSize);
+  line-height: var(--text-input-md-lineHeight);
+  padding: 0;
+  width: 100%;
+  min-width: 0;
+}
+
+.muka-textarea__field--sm .muka-textarea__native {
+  font-family: var(--text-input-sm-fontFamily);
+  font-weight: var(--text-input-sm-fontWeight);
+  font-size: var(--text-input-sm-fontSize);
+  line-height: var(--text-input-sm-lineHeight);
+}
+
+.muka-textarea__field--lg .muka-textarea__native {
+  font-family: var(--text-input-lg-fontFamily);
+  font-weight: var(--text-input-lg-fontWeight);
+  font-size: var(--text-input-lg-fontSize);
+  line-height: var(--text-input-lg-lineHeight);
+}
+
+.muka-textarea__native::placeholder {
+  color: var(--color-text-subtle-default);
+}
+
+.muka-textarea__field--disabled .muka-textarea__native {
+  color: var(--input-field-color-disabled-foreground);
+  cursor: not-allowed;
+}
+
+/* Footer (helper/error + count) */
+.muka-textarea__footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--spacing-2);
+}
+
+.muka-textarea__helper {
+  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);
+  color: var(--color-text-subtle-default);
+  margin: 0;
+}
+
+.muka-textarea__error {
+  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);
+  color: var(--color-state-error-foreground);
+  margin: 0;
+}
+
+.muka-textarea__count {
+  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);
+  color: var(--color-text-subtle-default);
+  margin-left: auto;
+}

package/dist/esm/components/Textarea/Textarea.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useId } from 'react';
+import './Textarea.css';
+export const Textarea = ({ value, onChange, placeholder, label, helperText, error = false, errorMessage, disabled = false, readOnly = false, size = 'md', rows, resize = 'vertical', showCount = false, maxLength, className = '', name, id, required = false, }) => {
+    const [isFocused, setIsFocused] = useState(false);
+    const generatedId = useId();
+    const textareaId = id || name || generatedId;
+    const helperTextId = `${textareaId}-helper`;
+    const errorMessageId = `${textareaId}-error`;
+    const showError = error && errorMessage;
+    const describedBy = showError ? errorMessageId : helperText ? helperTextId : undefined;
+    const charCount = value?.length ?? 0;
+    const wrapperClasses = [
+        'muka-textarea',
+        className,
+    ].filter(Boolean).join(' ');
+    const fieldClasses = [
+        'muka-textarea__field',
+        `muka-textarea__field--${size}`,
+        isFocused && 'muka-textarea__field--focused',
+        error && 'muka-textarea__field--error',
+        disabled && 'muka-textarea__field--disabled',
+    ].filter(Boolean).join(' ');
+    return (_jsxs("div", { className: wrapperClasses, children: [label && (_jsxs("label", { className: `muka-textarea__label muka-textarea__label--${size}`, htmlFor: textareaId, children: [label, required && _jsx("span", { className: "muka-textarea__required", "aria-hidden": "true", children: " *" })] })), _jsx("div", { className: fieldClasses, children: _jsx("textarea", { id: textareaId, className: "muka-textarea__native", value: value, onChange: onChange, placeholder: placeholder, disabled: disabled, readOnly: readOnly, name: name, required: required, rows: rows, maxLength: maxLength, "aria-invalid": error || undefined, "aria-describedby": describedBy, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), style: { resize } }) }), _jsxs("div", { className: "muka-textarea__footer", children: [showError && (_jsx("p", { className: "muka-textarea__error", id: errorMessageId, role: "alert", children: errorMessage })), !showError && helperText && (_jsx("p", { className: "muka-textarea__helper", id: helperTextId, children: helperText })), showCount && (_jsxs("span", { className: "muka-textarea__count", children: [charCount, maxLength ? `/${maxLength}` : ''] }))] })] }));
+};
+export default Textarea;
+//# sourceMappingURL=Textarea.js.map

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/Textarea/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAsB,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC"}

package/dist/esm/components/Tile/Tile.css

@@ -0,0 +1,358 @@
+/* Tile Component Styles - Using Muka Design Tokens */
+
+/* ─── Base ────────────────────────────────────────────── */
+
+.muka-tile {
+  display: flex;
+  color: var(--color-text-default-default);
+}
+
+.muka-tile--interactive {
+  cursor: pointer;
+  user-select: none;
+}
+
+.muka-tile--interactive:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+  border-radius: var(--border-radius-lg);
+}
+
+/* ─── Image position variants ─────────────────────────── */
+
+.muka-tile--image-top {
+  flex-direction: column;
+}
+
+.muka-tile--image-left {
+  flex-direction: row;
+}
+
+.muka-tile--image-right {
+  flex-direction: row;
+}
+
+/* ─── Gap by size (top) ───────────────────────────────── */
+
+.muka-tile--image-top.muka-tile--lg {
+  gap: var(--spacing-6);
+}
+
+.muka-tile--image-top.muka-tile--md {
+  gap: var(--spacing-6);
+  width: 320px;
+}
+
+.muka-tile--image-top.muka-tile--sm {
+  gap: var(--spacing-4);
+  min-width: 120px;
+}
+
+/* ─── Gap by size (left/right) ────────────────────────── */
+
+.muka-tile--image-left.muka-tile--lg,
+.muka-tile--image-right.muka-tile--lg {
+  gap: var(--spacing-6);
+  align-items: center;
+}
+
+.muka-tile--image-left.muka-tile--md,
+.muka-tile--image-right.muka-tile--md {
+  gap: var(--spacing-6);
+  align-items: center;
+}
+
+.muka-tile--image-left.muka-tile--sm,
+.muka-tile--image-right.muka-tile--sm {
+  gap: var(--spacing-4);
+  align-items: flex-start;
+}
+
+/* ─── Photos container ────────────────────────────────── */
+
+.muka-tile__photos {
+  position: relative;
+  flex-shrink: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  isolation: isolate;
+}
+
+/* Photos border radius by size */
+.muka-tile--lg .muka-tile__photos,
+.muka-tile--md .muka-tile__photos {
+  border-radius: var(--border-radius-lg);
+}
+
+.muka-tile--sm .muka-tile__photos {
+  border-radius: var(--border-radius-md);
+}
+
+/* Photos sizing: top layout */
+.muka-tile--image-top .muka-tile__photos {
+  width: 100%;
+}
+
+/* Photos sizing: left/right large */
+.muka-tile--image-left.muka-tile--lg .muka-tile__photos,
+.muka-tile--image-right.muka-tile--lg .muka-tile__photos {
+  width: 520px;
+}
+
+/* Photos sizing: left/right medium */
+.muka-tile--image-left.muka-tile--md .muka-tile__photos,
+.muka-tile--image-right.muka-tile--md .muka-tile__photos {
+  width: 320px;
+}
+
+/* Photos sizing: left/right small (single 80x80 thumbnail) */
+.muka-tile--image-left.muka-tile--sm .muka-tile__photos,
+.muka-tile--image-right.muka-tile--sm .muka-tile__photos {
+  width: 80px;
+  align-self: stretch;
+}
+
+/* ─── Main photo ──────────────────────────────────────── */
+
+.muka-tile__photo-main {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+/* 16:9 aspect for lg and md */
+.muka-tile--lg .muka-tile__photo-main,
+.muka-tile--md .muka-tile__photo-main {
+  aspect-ratio: 1280 / 720;
+}
+
+/* 1:1 aspect for top + sm */
+.muka-tile--image-top.muka-tile--sm .muka-tile__photo-main {
+  aspect-ratio: 1 / 1;
+}
+
+/* Fixed size for left/right + sm */
+.muka-tile--image-left.muka-tile--sm .muka-tile__photo-main,
+.muka-tile--image-right.muka-tile--sm .muka-tile__photo-main {
+  width: 80px;
+  height: 80px;
+  aspect-ratio: auto;
+}
+
+.muka-tile__photo-main img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* ─── Favourite overlay ───────────────────────────────── */
+
+.muka-tile__favourite {
+  position: absolute;
+  z-index: 3;
+}
+
+.muka-tile--lg .muka-tile__favourite,
+.muka-tile--md .muka-tile__favourite {
+  top: var(--spacing-4);
+  right: var(--spacing-4);
+}
+
+.muka-tile--image-top.muka-tile--sm .muka-tile__favourite {
+  top: var(--spacing-1);
+  right: var(--spacing-1);
+}
+
+/* ─── Thumbnails ──────────────────────────────────────── */
+
+.muka-tile__thumbnails {
+  display: flex;
+  gap: 2px;
+  overflow: hidden;
+  flex-shrink: 0;
+  height: 80px;
+}
+
+.muka-tile__thumbnail {
+  width: 80px;
+  height: 80px;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.muka-tile__thumbnail img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* Gap between main photo and thumbnails */
+.muka-tile__photos > .muka-tile__photo-main + .muka-tile__thumbnails {
+  margin-top: 2px;
+}
+
+/* ─── Content section ─────────────────────────────────── */
+
+.muka-tile__content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+}
+
+/* Top layout: content has horizontal padding */
+.muka-tile--image-top.muka-tile--lg .muka-tile__content {
+  padding: 0 var(--spacing-3);
+  gap: var(--spacing-1);
+}
+
+.muka-tile--image-top.muka-tile--md .muka-tile__content {
+  padding: 0 var(--spacing-3);
+  gap: var(--spacing-2);
+}
+
+.muka-tile--image-top.muka-tile--sm .muka-tile__content {
+  gap: var(--spacing-2);
+}
+
+/* Left/right layout: content grows to fill space */
+.muka-tile--image-left .muka-tile__content,
+.muka-tile--image-right .muka-tile__content {
+  gap: var(--spacing-3);
+}
+
+.muka-tile--image-left.muka-tile--lg .muka-tile__content,
+.muka-tile--image-right.muka-tile--lg .muka-tile__content {
+  padding: 0 var(--spacing-3);
+}
+
+.muka-tile--image-left.muka-tile--md .muka-tile__content,
+.muka-tile--image-right.muka-tile--md .muka-tile__content {
+  padding: var(--spacing-2) var(--spacing-3);
+}
+
+.muka-tile--image-left.muka-tile--sm .muka-tile__content,
+.muka-tile--image-right.muka-tile--sm .muka-tile__content {
+  gap: var(--spacing-2);
+}
+
+/* ─── Header (heading row + price) ────────────────────── */
+
+.muka-tile__header {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-4);
+}
+
+/* Small horizontal: row with text and action */
+.muka-tile--sm:not(.muka-tile--image-top) .muka-tile__header {
+  gap: var(--spacing-2);
+  align-items: center;
+  padding-top: var(--spacing-1);
+}
+
+/* ─── Text group ──────────────────────────────────────── */
+
+.muka-tile__text {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  gap: var(--spacing-2);
+}
+
+/* ─── Heading typography ──────────────────────────────── */
+
+.muka-tile__heading {
+  margin: 0;
+}
+
+.muka-tile--lg .muka-tile__heading {
+  font-family: var(--text-label-2xl-semibold-fontFamily);
+  font-weight: var(--text-label-2xl-semibold-fontWeight);
+  font-size: var(--text-label-2xl-semibold-fontSize);
+  line-height: var(--text-label-2xl-semibold-lineHeight);
+  color: var(--color-text-default-default);
+}
+
+.muka-tile--md .muka-tile__heading {
+  font-family: var(--text-label-xl-semibold-fontFamily);
+  font-weight: var(--text-label-xl-semibold-fontWeight);
+  font-size: var(--text-label-xl-semibold-fontSize);
+  line-height: var(--text-label-xl-semibold-lineHeight);
+  color: var(--color-text-default-default);
+}
+
+.muka-tile--sm .muka-tile__heading {
+  font-family: var(--text-label-lg-bold-fontFamily);
+  font-weight: var(--text-label-lg-bold-fontWeight);
+  font-size: var(--text-label-lg-bold-fontSize);
+  line-height: var(--text-label-lg-bold-lineHeight);
+  color: var(--color-text-default-default);
+}
+
+/* ─── Subheading typography ───────────────────────────── */
+
+.muka-tile__subheading {
+  margin: 0;
+  color: var(--color-text-subtle-default);
+}
+
+.muka-tile--lg .muka-tile__subheading {
+  font-family: var(--text-subheading-md-fontFamily);
+  font-weight: var(--text-subheading-md-fontWeight);
+  font-size: var(--text-subheading-md-fontSize);
+  line-height: var(--text-subheading-md-lineHeight);
+}
+
+.muka-tile--md .muka-tile__subheading,
+.muka-tile--sm .muka-tile__subheading {
+  font-family: var(--text-subheading-sm-fontFamily);
+  font-weight: var(--text-subheading-sm-fontWeight);
+  font-size: var(--text-subheading-sm-fontSize);
+  line-height: var(--text-subheading-sm-lineHeight);
+}
+
+/* ─── Description typography ──────────────────────────── */
+
+.muka-tile__description {
+  margin: 0;
+  color: var(--color-text-default-default);
+}
+
+.muka-tile--lg .muka-tile__description {
+  font-family: var(--text-body-lg-regular-fontFamily);
+  font-weight: var(--text-body-lg-regular-fontWeight);
+  font-size: var(--text-body-lg-regular-fontSize);
+  line-height: var(--text-body-lg-regular-lineHeight);
+}
+
+.muka-tile--md .muka-tile__description,
+.muka-tile--sm .muka-tile__description {
+  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);
+}
+
+/* Description overflow for medium */
+.muka-tile--md .muka-tile__description {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ─── Price slot ──────────────────────────────────────── */
+
+.muka-tile__price {
+  flex-shrink: 0;
+}
+
+/* ─── Action slot ─────────────────────────────────────── */
+
+.muka-tile__action {
+  flex-shrink: 0;
+}